HTML مخفف HyperText Markup Language است. فایرفاکس، گوگل کروم، سافاری و سایر مرورگر ها، HTML را می‌خوانند و به چیزی که می‌بینید، تبدیل می‌کنند.
اگر هر صفحه‌ای از وب را یک ساختمان در نظر بگیرید، HTML مانند اسکلت آن ساختمان برای آن صفحه عمل می‌کند.
HTML چندین نسخه دارد اما نسخه‌ای که امروزه بیش از همه مورد استفاده قرار می‌گیرد، HTML5 است. من نیز در این دوره تمرکزم را روی HTML5 گذاشته‌ام.
بیایید برای شروع، یک صفحه خیلی ساده با HTML بسازیم. برای این کار، یک فایل با نام index.html بسازید و کد زیر را داخل آن قرار دهید:
<!DOCTYPE html>
<html>
<head>
<title>Hello World</title>
</head>
<body>
<h1>Hello, World!</h1>
<p>این اولین صفحهٔ HTML من است.</p>
</body>
</html>حالا این فایل را با مرورگر باز کنید. یک صفحهٔ سفید می‌بینید با یک عنوان بزرگ که نوشته «Hello, World!» و یک پاراگراف زیرش.
<!DOCTYPE html> — به مرورگر می‌گوید این یک سند HTML5 است. اگر نباشد، مرورگر به حالت قدیمی (quirks mode) می‌رود و رفتارهای عجیبی نشان می‌دهد. این خط را همیشه ابتدای هر HTML ای بنویسید.<html> — داستان ما با تعریف کردن <head> و <body> از اینجا شروع می‌شود.<head> — شامل اطلاعاتی که در صفحه دیده نمی‌شود ولی اطلاعات مفیدی را برای نرم افزار های صفحه خوان (ازجمله موتور های جستجو) فراهم می‌کند.<title> — عنوان صفحه که در تب مرورگر نمایش داده می‌شود.<body> — هرچه کاربر می‌بیند اینجا قرار می‌گیرد.<h1> — تیتر صفحه<p> — پاراگرافاین ساختار حداقلی را هر صفحهٔ وبی دارد.
اگر از ویندوز استفاده می‌کنید، تنظیمات File Explorer را باز کرده و گزینه زیر را از داخل تنظیمات آن فعال کنید. زمانی که این گزینه فعال باشد فرمت فایل ها نمایش داده می‌شود. یعنی اگر یک فایل index.html بسازید واقعا فرمت آن html می‌شود. در غیر اینصورت اگر فایل index.html را بسازید، چیزی که واقعا ساخته می‌شود index.html.txt است که ویندوز به صورت پیش‌فرض txt آن را به شما نمایش نمی‌دهد.
بسیاری از دانشجویان تازه کار به دلیل ندانستن این مورد وقت زیادی را از دست می‌دهند. محل قرارگیری این گزینه در نسخه‌های گوناگون ویندوز ممکن است متفاوت باشد اما با کمی جستجو و کمک از هوش مصنوعی حتما آن را پیدا خواهید کرد.
تگ (Tag) واحد سازندهٔ صفحه HTML است. هر تگ با علامت > و < تعریف می‌شود. بیشتر تگ‌ها یک شروع و یک پایان دارند. معمولا به تگ شروع کننده تگِ باز و به تگ پایانی، تگِ بسته می‌گویند.
<tagname>محتوا</tagname>در تکه کد بالا، به <tagname> تگِ باز و به </tagname> تگِ بسته می‌گویند.
برخی تگ ها هم ساختارشان شبیه زیر است که خودشان، خودشان را می‌بندند به این معنی که چیزی در آن‌ها قرار نمی‌گیرد یا تگ دیگری را به عنوان فرزند قبول نمی‌کنند.
<tagname />تگ‌های HTML را می‌شود به دو دستهٔ اصلی تقسیم کرد:
این تگ‌ها هم شروع دارند و هم پایان، و محتوا را در خود می‌پیچند. به عبارت دیگر، تگ های دیگری به عنوان فرزند در این تگ ها قرار می‌گیرند. در ادامه برخی از این تگ ها را مشاهده می‌کنید.
<p> — پاراگراف<h1> تا <h6> — تیترها<div> — بخش‌بندی عمومی<a> — لینک<form> — فرم (که در ادامه این دوره مفصل به آن خواهم پرداخت)<ul>, <ol>, <li> — لیستهااین تگ‌ها محتوایی ندارند و تگ پایان هم ندارند (یا خودشان پایان خودشان هستند). این تگ ها تنها با مقادیری که به عنوان ویژگی (attribute) می‌گیرند، محتوای قابل نمایشی برای ما ایجاد می‌کنند. در ادامه برخی از این تگ ها را مشاهده می‌کنید.
<img /> — تصویر<input /> — فیلد ورودی فرم<meta /> — متادیتا در headاتریبیوت‌ها (Attributes) اطلاعات اضافی‌ای هستند که داخل تگ شروع قرار می‌گیرند و رفتار یا ویژگی‌های آن تگ را مشخص می‌کنند. ساختار کلی:
<tagname attribute="value">محتوا</tagname>مثال واقعی:
<a href="https://example.com">کلیک کن</a>
<form method="post" action="/submit">
<input type="text" name="email" required>ببینید، اینجا href ، method ، action ، type ، name و required همه اتریبیوت هستند. بعضی مثل required مقدار ندارند (Boolean Attribute) و صرفا با بودنشان یعنی فعال‌اند.
من همه ویدئو ها و پادکست های کُدباز رو توی یوتیوب و ساندکلود و پلتفرم هایی آپلود می‌کنم که اغلب فیلتر هستند.
اغلب آموزش‌ها ویدئو و پادکست دارند. پس اگر می‌خواهید از محتوای سایت بیشترین استفاده رو ببرید نیاز به فیلتر شکن دارید.
توجه داشته باشید که برای خرید از فروشگاه بهتره فیلتر شکن رو خاموش کنید.