آموزش HTML به زبان ساده – بخش اول “معرفی”

HTML چیست ؟

آموزش HTML به زبان ساده - بخش اول "معرفی"

برای آموزش HTML به زبان ساده در ابتدا باید بدانید HTML مخفف Hyper Text Markup Language است که پرکاربردترین زبان برای توسعه صفحات وب است. HTML در اواخر سال 1991 توسط Berners-Lee ایجاد شد اما “HTML 2.0” اولین نسخه استاندارد و جامع از HTML بود که در سال 1995 منتشر شد و در حال حاضر نسخه HTML-5 را داریم که پسوند HTML 4.01 شناسایی می شود و این نسخه در سال 2012 منتشر شد.

چرا باید زبان HTML را یاد بگیریم ؟

در اصل، HTML با هدف تعریف ساختار اسناد مانند سرفصل ها، پاراگراف ها، فهرست ها و غیره توسعه داده شد تا به اشتراک گذاری اطلاعات علمی بین محققان را تسهیل کند. اما با گذشت زمان، HTML به طور گسترده ای برای قالب بندی صفحات وب با کمک تگ های مختلف موجود در زبان HTML مورد استفاده قرار گرفت.

برای کسانی که در زمینه کامپیوتر فعالیت دارند یا می خواهند به یک مهندس نرم‌افزار عالی تبدیل شوند دانستن زبان HTML یک امر ضروری است، مخصوصاً زمانی که در دامنه توسعه وب کار می‌کنند. برخی از مزایای کلیدی یادگیری HTML را فهرست می کنیم:

  • ایجاد وب سایت – اگر HTML را به خوبی بدانید، می توانید یک وب سایت ایجاد کنید یا یک قالب وب موجود را برای خودتان سفارشی سازی کنید.
  • یک طراح وب شوید – اگر می خواهید به عنوان یک طراح وب حرفه ای برای خودتان کاری دست و پا کنید، طراحی HTML و CSS یک مهارت ضروری است.
  • درک وب – اگر می خواهید وب سایت خود را بهینه کنید، سرعت و عملکرد آن را افزایش دهید، خوب است که HTML را بدانید تا بهترین نتیجه را داشته باشید.
  • زبان های دیگر را بیاموزید – هنگامی که اصول HTML را درک کردید، سایر فناوری ها و زبان های برنامه نویسی مرتبط مانند جاوا اسکریپت، php یا angular برای درک آسان تر می شوند.
بیشتر بخوانید
ویروس کرونا و برندسازی تجاری در بحران

کاربردهای HTML

HTML یکی از پرکاربردترین زبان ها در دنیای وب است. برخی از کاربردهای اساسی زبان HTML عبارتند از:

  • توسعه صفحات وب – HTML برای ایجاد صفحاتی که از طریق وب ارائه می شوند استفاده می شود. تقریباً هر صفحه وب دارای تگ‌های html برای نمایش جزئیات آن در مرورگر است.
  • ناوبری اینترنتی – HTML برچسب هایی را ارائه می دهد که برای پیمایش از یک صفحه به صفحه دیگر استفاده می شود و به شدت در ناوبری اینترنتی استفاده می شود.
  • رابط کاربری واکنشگرا – صفحات HTML به دلیل استراتژی طراحی واکنش گرا، امروزه در همه پلتفرم ها، موبایل ها، تبلت ها، دسکتاپ یا لپ تاپ ها به خوبی کار می کنند.
  • پشتیبانی آفلاین – صفحات HTML پس از بارگیری می توانند به صورت آفلاین در دستگاه بدون نیاز به اینترنت در دسترس قرار گیرند.
  • توسعه بازی – HTML5 دارای پشتیبانی کاملی برای یک تجربه غنی بصری است و اکنون در عرصه توسعه بازی نیز مفید است.

نمونه یک کد HTML ساده

فقط برای اینکه درک بهتری از کد هایی که به زبان HTML در تمامی صفحات وب نهفته است داشته باشید ، نمونه کد ساده زیر را مشاهده نمایید :

<!DOCTYPE html>
<html>
   <head>
      <title>عنوان صفحه وب</title>
   </head>	
   <body>
      <h1>سربرگ شروع</h1>
      <p>یک پاراگراف متنی ساده</p>
   </body>	
</html>

کد بالا یک نمونه بسیار ساده و ابتدایی از یک صفحه html را برای شما به نمایش می گذارد . برای درک بهتر این کد می توانید از طریق بخش ابزارهای فایل گپ و ابزار ویرایشگر HTML که یک نسخه ساده از ویرایشگر آنلاین میباشد نوع نمایش این قطعه کد را مشاهده نمایید فقط کافیست این کد را در قسمت منبع ابزار ویرایشگر HTML وارد نمایید .

بیشتر بخوانید
ارزش‌گذاری محصول و تاثیر آن بر فروش

همچنین در آموزش های بعدی نیز که به مرور وارد سطح پیشرفته تری خواهد شد میتوانید از ابزار ویرایشگر فرانت اند فایل گپ استفاده نمایید .

 

آموزش HTML به زبان ساده - بخش اول "معرفی" 2

 

Hypertext Markup Language یعنی چه ؟

همانطور که قبلا گفتیم HTML مخفف Hypertext Markup Language است پس بیایید دقیقتر بررسی کنیم :

  • Hypertext به روشی اشاره دارد که در آن صفحات وب (اسناد HTML) به یکدیگر مرتبط می شوند. بنابراین، پیوند موجود در یک صفحه وب، Hypertext نامیده می شود.
  • Markup Language – همانطور که از نام آن پیداست، HTML یک زبان نشانه گذاری است که به این معنی است که شما از HTML برای “علامت گذاری” یک سند متنی از برچسب ( تگ ) هایی استفاده می کنید که به مرورگر وب می گوید چگونه آن را برای نمایش ساختار بندی کند.

در واقع همانطور که در بالا اشاره شد ، HTML با هدف تعریف ساختار اسناد مانند سرفصل ها، پاراگراف ها، فهرست ها و غیره توسعه داده شد تا به اشتراک گذاری اطلاعات علمی بین محققان را تسهیل کند.این ساختار ها  با کمک تگ های مختلف موجود در زبان HTML قابل پیاده سازی می باشد.

تگ های پایه HTML

HTML یک زبان نشانه گذاری است و از برچسب های مختلف برای قالب بندی محتوا استفاده می کند. این تگ ها در داخل پرانتزهای زاویه ای مانند : <نام برچسب (تگ)> ،محصور شده اند. به جز چند تگ، بیشتر تگ ها دارای تگ های بسته مربوط به خود هستند.

بیشتر بخوانید
حذف نام category از پیوندیکتا مطالب وردپرس

برای مثال، <html> دارای تگ بسته <html/> و تگ <body> دارای تگ بسته شدن <body/> و غیره است. یعنی به این صورت که در ابتدا تگ <body> نوشته شده سپس محتوای مورد نظر پس از آن درج می شود و در انتها باید تگ body به صورت <body/> بسته شود.

به مثال زیر توجه کنید:

<html>
   <head>
    محتوایی که در میان تگ هد قرار می گیرد
   </head>
   <body>
   محتوایی که در میان تگ بدنه قرار میگرد.
   </body>
</html>

توجه نمایید که محتوای مورد نظر ما که می تواند شامل کد های html باشد و قرار است در قسمت بدنه یا همان bady قرار بگیرد باید با تگ <body> شروع و در انتها با تگ <body/> بسته شود .

بررسی تگ های پایه

<!DOCTYPE…>

این تگ نوع سند و نسخه HTML را مشخص می کند.

<html>

این تگ سند کامل HTML را در بر می گیرد و عمدتاً شامل سرصفحه سند است که با <head>…</head> و بدنه سند که با تگ <body>…</body> نشان داده می شود.

<head>

این تگ نشان دهنده هدر سند است که می تواند سایر تگ های HTML مانند <title>، <link> و غیره را نگه دارد.

<title>

تگ <title> در داخل تگ <head> برای ذکر عنوان سند استفاده می شود.

<body>

این تگ نمایانگر بدنه سند است که تگ های HTML دیگر مانند  <h1>, <div>, <p> و غیره را نگه می دارد.

<h1…6>

این تگ نشان دهنده عنوان یا سر تیتر است.

<p>

این تگ نشان دهنده یک پاراگراف است.

بیشتر بخوانید
عکاسی از محصول و اهمیت آن در جذب مشتری

 

برای یادگیری HTML، باید تگ‌های مختلف را مطالعه کنید و درک کنید که چگونه یک سند متنی را قالب‌بندی کنید. یادگیری HTML ساده است زیرا تنها باید استفاده از برچسب های مختلف را یاد بگیرید تا متن یا تصاویر را قالب بندی کنید و یک صفحه وب زیبا بسازید.

اولین تگ که باید آن را بشناسید

تگ اعلان <DOCTYPE!> توسط مرورگر وب برای درک نسخه HTML استفاده شده در صفحه وب ،مورد استفاده قرار می گیرد. نسخه ای که ما نیز بر اساس آن سری آموزش های HTML به زبان ساده را پیش می بریم نسخه HTML 5 است و به شکل زیر استفاده می شود .

<!DOCTYPE html>

لازم به ذکر است که شما باید این قطعه کد را در ابتدا تمامی صفحات HTML که طراحی میکنید قرار دهید البته بدون این کد نیز صفحات شما معمولا به درستی توسط مرورگر نمایش داده می شود اما از دیدگاه گوگل و مرورگر های وب عدم وجود این کد در ابتدای صفحات یک ارور محسوب شده و یک نمره منفی در سئو سایت محسوب می شود.

بسیاری از انواع دیگر تگ اعلان وجود دارد که بسته به اینکه با چه نسخه ای از HTML کار می کنید مورد استفاده قرار می گیرد. در قسمت های بعدی آموزش HTML به زبان ساده، درباره تگ <…DOCTYPE!> همچنین سایر تگ های HTML، جزئیات بیشتر و دقیق تری در این مورد خواهیم دید.

بیشتر بخوانید
سئو چیست ، مفهوم سئو به زبان ساده

اهداف سری آموزش های HTML به زبان ساده

سری آموزش های HTML به زبان ساده برای طراحان و توسعه دهندگان وب با نیاز به درک HTML با جزئیات کافی همراه با نمای کلی ساده و مثال های عملی آن طراحی شده است. این آموزش به شما مواد لازم برای شروع کار با HTML را می دهد، جایی که می توانید خود را در سطح بالاتری از تخصص قرار دهید.

به همین منظور تمامی موارد لازم برای فراگیری زبان برنامه نویسی HTML به صورت بخش بندی شده از سطح مبتدی تا پیشرفته توسط فایل گپ برای شما کاربران گرامی آماده گردیده است و سعی شده که تمامی مفاهیم به دور از پیچیدگی و به زبان ساده بیان شود و همراه هرمفهوم انواع مثال ها نیز ارایه شود تا بتوانید به ساده ترین و راحت ترین حالت ممکن HTML را بیاموزید .

با سری آموزش های رایگان HTML به زبان ساده همراه ما باشید …

منابع مورد استفاده  : tutorialspoint    mozilla   w3schools