در ادامه با برخی تگ‌های ساده و پرکاربرد HTML آشنا می‌شوید. چند مثال ساده از کدهای HTML برای طراحی صفحات وب که در درس‌های بعدی به طور کامل آن‌ها را آموزش خواهیم داد. لذا نگران این نباشید که این تگ‌ها را نمی‌شناسید چون به زودی به آن نیز خواهیم پرداخت.
اسناد HTML
همه اسناد HTML باید با اعلان نوع سند شروع شوند: <!DOCTYPE html>.
خود سند HTML با <html> شروع می شود و با </html> به پایان می‌رسد.
بیانیه <!DOCTYPE>
عنصر اعلان <!DOCTYPE> در HTML نشان دهنده نوع سند برای مرورگر است تا مرورگرها کمک کند صفحات وب را به درستی نمایش دهند.
عنصر اعلان نوع سند همیشه باید فقط یک بار و آن هم در ابتدا و بالای صفحه (قبل از هر تگ HTML) قرار بگیرد.
اعلان <!DOCTYPE> به حروف بزرگ و کوچک حساس نیست.
اعلان <!DOCTYPE> در اسناد HTML5 به شرح زیر است:
<!DOCTYPE html>
عناوین HTML
عناوین در HTML با تگ‌های <h1> تا <h6> تعریف می‌شوند. هر چه شماره تگ کمتر باشد یعنی رتبه و اهمیت بهتر و بالاتری دارد. معمولا در صفحات HTML تنها اجازه استفاده از یک تگ <h1> را داریم. ولی سایتر عناوین <h2> تا <h6> را می‌توانید بیش از یک بار استفاده نمایید.
تگ <h1> مهمترین سرفصل را تعریف می‌کند و به صورت استاندارد باید حداقل یک بار در صفحه وجود داشته باشد. تگ <h6> نیز کوچکترین زیر عنوان محسوب می‌شود. معمولا بهتر است که ترتسی استفاده از عناوین در صفحات HTML رعایت شود. یعنی بهتر است تگ مهم‌تر بالاتر از تگ کم اهمیت‌تر در متن قرار بگیرید:
-
</>
مثال برای درک بهتر آموزش عناوین HTML:
<h1>این مهمترین عنوان صفحه از نوع ۱ است</h1>
<h2>این زیر عنوان صفحه از نوع ۲ است</h2>
<h3>و این عنوان کم اهمیت تر از دو عنوان قبلی از نوع ۳ است</h3>
<h4>این عنوان از نوع ۴ و کم ارزش تر از سه عنوان قبلی است</h4>
<h5>این عنوان با اهمیت ۵ است</h5>
<h6>و این پایین‌ترین سطح عناوین و از نوع ۶ است</h6>
پاراگراف‌های HTML
پاراگراف‌ها در HTML با تگ <p> تعریف می‌شوند. برای قراردادن متون خود از این تگ استفاده نمایید:
پیوندهای HTML
لینک‌ها یا پیوندها در HTML را با استفاده از تگ <a> تعریف می‌کنند. از این تگ برای جابجایی بین صفحات HTML استفاده می‌شود:
تصاویر HTML
تصاویر در HTML را با استفاده از تگ <img> نمایش می‌دهند. این نوع تگ به تنهایی استفاده می‌شود و از نوع تگ‌های دو قسمتی باز و بسته یا آغاز و پایان نیست.
در تگ تصویر آدرس فایل منبع را با یک ویژگی به نام (src) تعریف می‌کنند، همچنین با یک ویژگی دیگر یک متن جایگزین (alt) به آن می‌دهند تا اگر تصویر فراخوانی نشود آن متن نمایش داده شود، عرض و ارتفاع تصویر نیز به عنوان ویژگی‌های دیگری داخل این تگ تعریف می‌شود:
چگونه می‌توان کدهای یک صفحه HTML را مشاهده کرد؟
آیا تا به حال یک صفحه وب را دیده‌اید که با خود گفته باشید: "وااای! این صفحه رو چه طوری درست کردند؟" بدونید که به راحتی می‌توانید کد منبع یا HTML Source Code همه صفحات وب را به سادگی مشاهده کنید.
مشاهده کد منبع HTML:
هر گاه بخواهید سورس یا کدهای منبع یک صفحه HTML را ببینید کافی است تا روی فضای خالی از آن صفحه HTML راست کلیک کنید و از منوی باز شده گزینه "View Source Page" (در Chrome) یا "View Source" (در Edge) یا مشابه آن در مرورگرهای دیگر را انتخاب کنید. دکمه‌های ترکیبی میان‌بر آن بر روی صفحه کلید نیز (Ctrl+U) است. با این کار پنجره‌ای حاوی کد منبع HTML صفحه باز می‌شود. که تمام تگ‌هایی که در آن صفحه وجود دارد را نمایش می‌دهد. برخی صفحات بسیار پیچیده هستند و چند صد سطر کد نویسی دارند یا حتی بیشتر...
بررسی یک عنصر HTML از طریق مرورگر وب با استفاده از ابزار Inspector (بازرس):
تقریبا همه مرورگرهای وب به این ابزار بررسی کننده صفحات وب که برای توسعه‌دهنگان صفحات وب بسیار کاربردی و ضروری است، مجهز هستند. برای این کار کافی است بر روی یک عنصر که مد نظر شما است (یا یک ناحیه خالی) راست کلیک کنید و گزینه "Inspect" یا "Inspect Element" را انتخاب کنید تا یک پنجره روی مرورگر شما باز شود و در آن جزئیات آن المان و عنصر را به شما نشان دهد تا ببینید که آن قسمت که انتخاب کرده بودید از چه عناصری تشکیل شده است. این ابزار اطلاعات بسیار زیادی به شما می‌دهد و علاوه بر نمایش چزئیات HTML صفحه، عناصر CSS و حتی JS صفحه را نیز به شما نمایش می‌دهد. یک ویژگی بسیار مهم این ابزار امکان ویرایش درجای همین صفحات به صورت موقت و نمادین است. مثل این که بخواهید چیزی را روی صفحه تست کنید. دیباگ و رفع اشکال کنید. در واقع می‌توانید HTML یا CSS را در حالی که یه صورت زنده مشاهده می‌کنید در پنل Elements برای HTML و در پنل Styles برای CSS و در Console برای JS باز کرده، جستجو و ویرایش کنید و همان لحظه نتیجه ویرایش را در همان صفحه مشاهده نمایید.
دقت کنید که این تغییرات صرفا در صفحه‌ای که باز کردید انجام می‌شود و قابل مشاهده است و به صورت موقت در حافظه مرورگر تغییر می‌کند و هرگز چیزی بر روی آن فایل ذخیره نمی‌شود. لذا با فراخوانی مجدد صفحه (Refresh) همه تغییرات شما پاک می‌شود و صفحه مجدد همان طور که بود باز می‌شود.
این ابزار به طراحان صفحات وب کمک می‌کند که اشکالات طراحی صفحات وب خود را پیدا کرده و اصلاح کنند و سپس کد اصلاح شده را در صفحه کد منبع اصلی آن صفحه کپی و ذخیره کنند و سپس با Refresh صفحه نتیجه اصلاح شده را مشاهده نمایند.