با سلام

امروز در ALT + TAB با شما هستیم تا با هم دوره آموزشی زبان جذاب HTML 5 را  شروع کنیم. این دوره از روی منبع اصلی آن یعنی W3Schools ترجمه و منتشر می شود. برای استفاده بهتر از این دوره و انجام تمرینات، ما سایت عالی Codepen را معرفی می کنیم. این سایت به ما یک ادیتور آنلاین شامل 3 قسمت HTML ، CSS و Java Script را می دهد. ما می توانیم کدهای خود را در قسمت های مربوطه نوشته و در همان لحظه نتیجه کارمان را ببینیم. به این صورت شما در دوره های مکمل HTML یعنی CSS و Java Script نیز می توانید از این سایت بخوبی برای تست و نشر کارهایتان استفاده کنید. پس قبل از هر چیز به این سایت رفته و به صورت رایگان برای خود یک حساب کاربری بسازید. خودتان را برای یادگیری یکی از آسانترین و شیرین ترین زبان های کدنویسی آماده کنید!

HTML5

‏HTML چیست ؟

‏HTML یک زبان نشانه گذاری استاندارد برای ساخت صفحات وب است.

  • HTML مخفف Hyper Text Markup Language می باشد.
  • HTML ساختار صفحات وب را با استفاده از تگ ها تعریف می کند.
  • المان های HTML با استفاده از تگ ها تعریف می شوند.

یک صفحه نمونه HTML : (برای اجرا بر روی آن کلیک کنید)

تشریح کدهای صفحه فوق:

<DOCTYPE html!>

مشخص می کند که این document از نوع html5 است.
‏<html>
این المان ، المان ریشه یک صفحه html است.
‏<head>
شامل اطلاعات meta درباره document است.
‏<title>
یک عنوان برای document مشخص می کند.
‏<body>
دربرگیرنده محتوایی است که در صفحات وب مشاهده می کنیم.
‏<h1>
مشخص کننده سرفصل های مهم متن است.
‏<p>
مشخص کننده پاراگراف است.

تگ های HTML

تگ های HTML به شکل زیر نمایش داده می شوند:

<TAGNAME/>محل قرارگیری محتوا...<TAGNAME>

تگ های HTML معمولا جفت هستند مانند <p> و <p/> .
تگ اول را start tag و دومی را end tag می نامیم.
end tag دقیقا مانند start tag است؛ تنها با این تفاوت که قبل از اسم تگ، از کاراکتر / استفاده می کنیم.
نکته: start tag را opening tag و end tag را‌ closing tag نیز  می نامیم.

مرورگرها

هدف یک مرورگر (Chrome,IE,Firefox,Safari) خواندن فایل های HTML و نمایش آن هاست.
مرورگرها تگ های HTML را نمایش نمی دهند؛ اما از آن ها برای تعیین اینکه چگونه یک فایل را نمایش دهند استفاده می کنند .

ساختار صفحات HTML

در زیر ساختار یک صفحه HTML به تصویر کشیده شده است:

نکته: تنها محتوای درون تگ <body> در یک مرورگر نمایش داده می شود.

تشریح تگ <DOCTYPE!>

  • <DOCTYPE!> نوع فایل را مشخص کرده و به مرورگرها برای نمایش صحیح صفحات وب کمک میکند.
  • ‏<DOCTYPE!> تنها یک بار و در بالای یک فایل، قبل از هر تگ HTML ، باید نوشته شود.
  • ‏<DOCTYPE!> به استفاده از حروف کوچک/بزرگ حساس نیست.
  • ‏<DOCTYPE!> مناسب برای HTML5 عبارتست از :
<!DOCTYPE html>

ورژن های مختلف HTML

از روزهای اول به وجود آمدن web ، نسخه هایی از HTML وجود داشته است:

ویرایشگرهای HTML

نوشتن HTML با استفاده از Notepad یا هر ابزار Text Editorدیگر

صفحات وب می توانند با استفاده از ویرایشگرهای HTML حرفه ای ساخته و اصلاح شوند.
اگرچه، ما برای یاد گرفتن HTML یک text editor ساده مانند Notepad (Windows) یا TextEdit (MacOS) را پیشنهاد می کنیم.
ما در ALT+TAB اعتقاد داریم استفاده از یک text editor ساده راه خوبی برای یادگیری HTML است.
۴ مرحله زیر را برای ساخت اولین صفحه وب مان با Notepad دنبال می کنیم.

مرحله ۱ : باز کردن Notepad در ‏ Windows
بر روی دکمه ‏Start کلیک می کنیم و Notepad را تایپ کرده و کلید Enter را فشار می دهیم.

مرحله ۲ : نوشتن کدهای HTML
چند کد HTML در Notepad می نویسیم.

مرحله ۳ : save کردن صفحه HTML
فایل را روی کامپیوتر save می کنیم. از منوی File گزینه Save as را انتخاب می کنیم.
مطابق تصویر زیر، در قسمت File name اسم فایل را برای مثال ALToTAB.htm می گذاریم و از منوی کشویی زیر File name مقدار Save as type را بر روی All Files (*.*) قرار می دهیم و در آخر مقدار گزینه Encoding را بر روی UTF-8 می گذاریم.

می توان هریک از پسوندهای htm. و یا html. را به عنوان پسوند فایل های HTML استفاده کرد.

مرحله ۴ : مشاهده صفحه HTML در مرورگر
فایل HTML را در مرورگر دلخواه باز کرده (با double click کردن روی فایل یا راست کلیک کردن روی فایل و انتخاب Open with) و نتیجه را مشاهده می کنیم.
نتیجه به این شکل خواهد بود :

ادامه دارد...