ساختار سند

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

برای ایجاد سایت MachineLearningWorkshop.com (MLW)، با گنجاندن اجزایی که باید برای هر صفحه وب ضروری در نظر گرفته شوند، شروع کنید: نوع سند، زبان انسانی محتوا، مجموعه کاراکترها و البته عنوان یا نام سایت یا برنامه.

به هر سند HTML اضافه کنید

چندین عنصر وجود دارد که برای هر صفحه وب ضروری هستند. مرورگرها در صورت عدم وجود این عناصر، محتوا را رندر می‌کنند، اما شما باید آنها را در صفحه وب خود بگنجانید.

<!DOCTYPE html>

اولین چیزی که در هر سند HTML وجود دارد، مقدمه است. برای HTML، تنها چیزی که نیاز دارید <!DOCTYPE html> است. این شبیه یک عنصر HTML به نظر می‌رسد، اما در واقع یک گره خاص به نام doctype است. doctype به مرورگر می‌گوید که از حالت استاندارد استفاده کند. در صورت حذف، مرورگرها از حالت رندر متفاوتی به نام quirks mode استفاده می‌کنند. گنجاندن doctype به جلوگیری از quirks mode کمک می‌کند.

<html>

عنصر <html> عنصر ریشه یک سند HTML است. این عنصر والد <head> و <body> است و شامل همه چیز در سند HTML به غیر از doctype می‌شود. اگر حذف شود، زبان به طور ضمنی مشخص می‌شود، اما شما باید آن را برای اعلام زبان سند اضافه کنید.

زبان محتوا

ویژگی lang در تگ <html> زبان اصلی سند را تعریف می‌کند. مقدار آن یک کد زبان ISO است که به دنبال آن یک منطقه اختیاری می‌آید. برای مثال، زبان فرانسوی در کانادا fr-CA است، در حالی که در بورکینافاسو fr-BF است. این تعریف به صفحه‌خوان‌ها، موتورهای جستجو و سرویس‌های ترجمه کمک می‌کند تا زبان سند را شناسایی کنند.

شما می‌توانید از ویژگی lang در تگ‌های دیگر برای شناسایی استثنائات در زبان اصلی سند استفاده کنید. مانند استفاده از آن در head، ویژگی lang در بدنه هیچ جلوه بصری ندارد. این ویژگی معنایی را اضافه می‌کند، بنابراین فناوری‌های کمکی و سرویس‌های خودکار می‌توانند زبان محتوای خاص را شناسایی کنند.

علاوه بر تنظیم زبان سند و استثنائات مربوط به آن زبان پایه، می‌توان از این ویژگی در انتخابگرهای CSS استفاده کرد. <span lang="fr-fr">Ceci n'est pas une pipe.</span> می‌توان با ویژگی و انتخابگرهای زبان [lang|="fr"] و :lang(fr) هدف قرار داد.

بین تگ‌های باز و بسته‌ی <html> ، دو فرزند به نام‌های <head> و <body> قرار دارند:

<!DOCTYPE html>
<html lang="en-US">
  <head>
  </head>
  <body>
  </body>
</html>

<head> شامل فراداده‌های یک سایت یا برنامه است، در حالی که <body> شامل محتوای قابل مشاهده است. بقیه این بخش بر روی اجزایی که درون عنصر <head> قرار دارند تمرکز دارد.

اجزای مورد نیاز داخل <head>

متادیتای سند، شامل عنوان سند، مجموعه کاراکترها، تنظیمات نمای دید، توضیحات، URL پایه، لینک‌های stylesheet و آیکون‌ها، در عنصر <head> یافت می‌شوند. اگرچه ممکن است به همه این ویژگی‌ها نیاز نداشته باشید، اما همیشه مجموعه کاراکترها، عنوان و تنظیمات نمای دید را در آن قرار دهید.

رمزگذاری کاراکتر

اولین عنصر در <head> باید اعلان کدگذاری کاراکتر charset باشد. این اعلان قبل از عنوان می‌آید تا اطمینان حاصل شود که مرورگر می‌تواند کاراکترهای موجود در آن عنوان و تمام کاراکترهای موجود در بقیه سند را رندر کند.

کدگذاری پیش‌فرض در اکثر مرورگرها بسته به زبان، windows-1252 است. با این حال، شما باید UTF-8 استفاده کنید که کدگذاری یک تا چهار بایتی همه کاراکترها را فعال می‌کند.

برای تنظیم کدگذاری کاراکتر روی UTF-8، موارد زیر را وارد کنید:

<meta charset="utf-8" />

با اعلام UTF-8 (غیرحساس به حروف بزرگ و کوچک)، حتی می‌توانید ایموجی را در عنوان خود قرار دهید.

کدگذاری کاراکتر در همه جای سند، حتی <style> و <script> ، به ارث برده می‌شود. این تعریف کوچک به این معنی است که می‌توانید ایموجی را در نام کلاس‌ها و selectorAPI قرار دهید. اگر از ایموجی استفاده می‌کنید، مطمئن شوید که از آنها به گونه‌ای استفاده می‌کنید که قابلیت استفاده را بدون آسیب رساندن به دسترسی‌پذیری افزایش دهد.

عنوان سند

هر صفحه، صفحه اصلی شما و تمام صفحات اضافی، باید یک عنوان منحصر به فرد داشته باشند. محتوای عنوان سند، متن بین تگ‌های باز و بسته <title> ، در تب مرورگر، لیست پنجره‌های باز، تاریخچه، نتایج جستجو و، مگر اینکه با تگ‌های <meta> تعریف مجدد شوند، در کارت‌های رسانه‌های اجتماعی نمایش داده می‌شوند.

<title>Machine Learning Workshop</title>

فراداده‌ی ویوپورت

متا تگ viewport برای واکنش‌گرایی سایت ضروری است و تضمین می‌کند که محتوا صرف نظر از عرض viewport به خوبی نمایش داده شود. اگرچه متا تگ viewport از سال ۲۰۰۷ وجود داشته است، اما اخیراً در یک سند مشخصات ثبت شده است. این متا تگ اندازه و مقیاس viewport را کنترل می‌کند و از کوچک شدن محتوا برای تناسب با صفحه نمایش‌های کوچکتر جلوگیری می‌کند.

<meta name="viewport" content="width=device-width" />

کد قبلی به معنای «واکنش‌گرا کردن سایت است، که با تنظیم عرض محتوا به اندازه عرض صفحه نمایش شروع می‌شود». علاوه بر width ، می‌توانید بزرگنمایی و مقیاس‌پذیری را تنظیم کنید، اما هر دو به طور پیش‌فرض روی مقادیر قابل دسترس تنظیم شده‌اند. اگر می‌خواهید صریح باشید، موارد زیر را اضافه کنید:

<meta name="viewport" content="width=device-width, initial-scale=1, user-scalable=1" />

Viewport بخشی از ممیزی دسترسی‌پذیری Lighthouse است. اگر سایت شما مقیاس‌پذیر باشد و حداکثر اندازه‌ای برای آن تعیین نشده باشد، پذیرفته خواهد شد.

تا اینجا، طرح کلی فایل HTML ما به صورت زیر است:

<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="utf-8" />
    <title>Machine Learning Workshop</title>
    <meta name="viewport" content="width=device-width" />
  </head>
  <body>

  </body>
</html>

سایر محتوای <head>

چیزهای خیلی بیشتری در <head> قرار می‌گیرد. در واقع، تمام متادیتاها. در حالی که بیشتر عناصری که در <head> پیدا خواهید کرد در این ماژول پوشش داده شده‌اند، ما اطلاعات بیشتری را در ماژول متادیتا به اشتراک خواهیم گذاشت.

شما مجموعه کاراکترهای متا و عنوان سند را دیده‌اید، اما فراداده‌های بسیار بیشتری خارج از تگ‌های <meta> وجود دارند که باید گنجانده شوند.

سی‌اس‌اس

<head> جایی است که شما استایل‌ها را برای HTML خود اضافه می‌کنید. اگر می‌خواهید در مورد استایل‌ها یاد بگیرید، یک مسیر یادگیری مختص CSS وجود دارد، اما باید بدانید که چگونه آنها را در اسناد HTML خود وارد کنید.

سه راه برای اضافه کردن CSS وجود دارد: <link> ، <style> و ویژگی style .

دو روش اصلی برای اضافه کردن استایل‌ها به فایل HTML شما، اضافه کردن یک منبع خارجی با استفاده از یک عنصر <link> با ویژگی rel تنظیم شده روی stylesheet یا اضافه کردن CSS به طور مستقیم در ابتدای سند شما در داخل تگ‌های باز و بسته <style> است.

تگ <link> روش ترجیحی برای گنجاندن stylesheetها است. پیوند دادن یک یا چند stylesheet خارجی هم برای تجربه توسعه‌دهنده و هم برای عملکرد سایت مفید است: شما می‌توانید CSS را در یک نقطه نگه دارید به جای اینکه در همه جا پخش شود، و مرورگرها می‌توانند فایل خارجی را ذخیره کنند، به این معنی که لازم نیست با هر پیمایش صفحه دوباره دانلود شود.

سینتکس آن به صورت <link rel="stylesheet" href="styles.css"> است، که در آن styles.css نام فایل و مکان نسبی برای stylesheet شما است. ممکن است ویژگی type="text/css" را ببینید، اما الزامی نیست. ویژگی rel رابطه را تعریف می‌کند، که در این مورد stylesheet است. اگر ویژگی rel را حذف کنید، CSS شما لینک نخواهد شد.

به زودی با چند مقدار rel دیگر آشنا خواهید شد، اما ابتدا روش‌های دیگر گنجاندن CSS را یاد خواهید گرفت.

اگر می‌خواهید استایل‌های استایل‌شیت خارجی شما درون یک لایه آبشاری قرار بگیرند، اما به ویرایش فایل CSS دسترسی ندارید، باید CSS را با استفاده از @import درون یک <style> قرار دهید:

<style>
  @import "styles.css" layer(firstLayer);
</style>

هنگام استفاده از @import برای وارد کردن شیوه‌نامه‌ها به سند خود، به صورت اختیاری به لایه‌های آبشاری، دستور @import باید اولین دستور در <style> یا شیوه‌نامه پیوند شده شما، خارج از اعلان مجموعه کاراکتر باشد.

اگرچه لایه‌های آبشاری هنوز نسبتاً جدید هستند و ممکن است @import را در head <style> تشخیص ندهید، اغلب ویژگی‌های سفارشی را خواهید دید که در بلوک head style تعریف شده‌اند:

<style>
  :root {
    --theme-color: #226DAA;
  }
</style>

استایل‌هایی که با <link> ، <style> یا هر دو اضافه می‌شوند، باید در بخش head قرار بگیرند. اگرچه وقتی در بدنه سند قرار می‌گیرند، کار می‌کنند، اما به دلایل عملکردی باید استایل‌ها را در head اضافه کنید. این ممکن است غیرمنطقی به نظر برسد، زیرا ممکن است فکر کنید می‌خواهید محتوای شما ابتدا بارگیری شود. اما بهتر است مرورگر بداند که چگونه محتوا را هنگام بارگیری رندر کند. اضافه کردن استایل‌ها در ابتدا، از رنگ‌آمیزی مجدد غیرضروری که در صورت استایل‌دهی به یک عنصر پس از اولین رندر آن رخ می‌دهد، جلوگیری می‌کند.

یک راه برای گنجاندن سبک‌هایی وجود دارد که هرگز در <head> سند خود استفاده نخواهید کرد: سبک‌های درون‌خطی. احتمالاً هرگز از سبک‌های درون‌خطی در بخش سر صفحه استفاده نخواهید کرد زیرا برگه‌های سبک عامل کاربر به طور پیش‌فرض سر صفحه را پنهان می‌کنند. اما اگر مثلاً می‌خواهید یک ویرایشگر CSS بدون جاوا اسکریپت بسازید تا بتوانید عناصر سفارشی صفحه خود را آزمایش کنید، می‌توانید سر صفحه را با display: block و سپس همه چیز را در سر صفحه پنهان کنید و سپس با یک ویژگی style درون‌خطی، یک بلوک سبک قابل ویرایش با محتوا را قابل مشاهده کنید.

<style contenteditable style="display: block; font-family: monospace; white-space: pre;">
  head { display: block; }
  head * { display: none; }
  :root {
    --theme-color: #226DAA;
  }
</style>

شما می‌توانید استایل‌های درون‌خطی را به عنصر <style> اضافه کنید.

عنصر link برای ایجاد روابط بین سند HTML و منابع خارجی استفاده می‌شود. برخی از این منابع ممکن است دانلود شوند، برخی دیگر اطلاعاتی هستند. نوع رابطه با مقدار ویژگی rel تعریف می‌شود. 25 مقدار برای ویژگی rel وجود دارد که می‌توانند با <link> ، <a> و <area> یا <form> استفاده شوند، که تعداد کمی از آنها را می‌توان با همه استفاده کرد. ترجیحاً موارد مربوط به اطلاعات متا را در head و موارد مربوط به عملکرد را در <body> قرار دهید.

اکنون سه نوع دیگر را در هدر خود وارد خواهید کرد: icon ، alternate و canonical . نوع چهارم، rel="manifest" را در ماژول بعدی اضافه خواهید کرد.

فاویکون

از تگ <link> به همراه rel="icon" برای مشخص کردن فاوآیکون سند خود استفاده کنید. فاوآیکون یک آیکون کوچک است که در تب مرورگر، معمولاً در سمت چپ عنوان سند، ظاهر می‌شود. وقتی تب‌ها کوچک می‌شوند، عنوان ممکن است ناپدید شود، اما آیکون قابل مشاهده باقی می‌ماند. اکثر فاوآیکون‌ها، لوگوی شرکت یا برنامه هستند.

اگر favicon را تعریف نکنید، مرورگر به دنبال فایلی با نام favicon.ico در دایرکتوری سطح بالا (پوشه ریشه وب‌سایت) می‌گردد. با استفاده از <link> می‌توانید از نام فایل و مکان دیگری استفاده کنید: 

<link rel="icon" sizes="16x16 32x32 48x48" type="image/png" href="/images/mlwicon.png" />

کد قبلی می‌گوید «از فایل mlwicon.png به عنوان آیکون برای سناریوهایی استفاده کنید که در آن‌ها اندازه‌های ۱۶، ۳۲ یا ۴۸ پیکسل منطقی هستند.» ویژگی sizes مقدار any را برای آیکون‌های مقیاس‌پذیر یا فهرستی از مقادیر مربعی widthXheight که با فاصله از هم جدا شده‌اند، می‌پذیرد؛ جایی که مقادیر عرض و ارتفاع در آن دنباله هندسی ۱۶، ۳۲، ۴۸ یا بیشتر باشند، واحد پیکسل حذف می‌شود و X به حروف کوچک و بزرگ حساس نیست. 

<link rel="apple-touch-icon" sizes="180x180" href="/images/mlwicon.png" />
<link rel="mask-icon" href="/images/mlwicon.svg" color="#226DAA" />

دو نوع آیکون غیر استاندارد خاص برای مرورگر سافاری وجود دارد: apple-touch-icon برای دستگاه‌های iOS و mask-icon برای تب‌های پین شده در macOS. apple-touch-icon فقط زمانی اعمال می‌شود که کاربر یک سایت را به صفحه اصلی اضافه کند: می‌توانید چندین آیکون با sizes مختلف برای دستگاه‌های مختلف مشخص کنید. mask-icon فقط در صورتی استفاده می‌شود که کاربر تب را در سافاری دسکتاپ پین کند: خود آیکون باید یک SVG تک رنگ باشد و ویژگی color ، آیکون را با رنگ مورد نیاز پر می‌کند.

در حالی که می‌توانید <link> برای تعریف یک تصویر کاملاً متفاوت در هر صفحه یا حتی هر بار بارگذاری صفحه استفاده کنید، این کار را نکنید. برای ثبات و یک تجربه کاربری خوب، از یک تصویر واحد استفاده کنید. گوگل برای هر یک از برنامه‌های مختلف خود از فاوآیکن‌های متفاوتی استفاده می‌کند: برای مثال، یک آیکون ایمیل، یک آیکون تقویم وجود دارد. اما همه آیکون‌های گوگل از یک طرح رنگی یکسان استفاده می‌کنند. شما دقیقاً از روی آیکون می‌دانید که محتوای یک تب باز چیست.

نسخه‌های جایگزین سایت

از مقدار alternate ویژگی rel برای شناسایی ترجمه‌ها یا نمایش‌های جایگزین سایت استفاده کنید.

فرض کنید نسخه‌هایی از سایت را به فرانسوی و پرتغالی برزیلی ترجمه کرده‌ایم: 

<link rel="alternate" href="https://www.machinelearningworkshop.com/fr/" hreflang="fr-FR" />
<link rel="alternate" href="https://www.machinelearningworkshop.com/pt/" hreflang="pt-BR" />

هنگام استفاده از alternate برای ترجمه، ویژگی hreflang باید تنظیم شود.

مقدار جایگزین برای مواردی بیش از ترجمه‌ها کاربرد دارد. برای مثال، ویژگی type می‌تواند URI جایگزین را برای یک RSS feed تعریف کند، زمانی که ویژگی type روی application/rss+xml یا application/atom+xml تنظیم شده باشد.

لینک به نسخه PDF ساختگی سایت: 

<link rel="alternate" type="application/x-pdf" href="https://machinelearningworkshop.com/mlw.pdf" />

اگر مقدار rel alternate stylesheet باشد، یک alternative stylesheet تعریف می‌کند و ویژگی title باید تنظیم شود و به آن alternative style یک نام بدهد.

متعارف

اگر چندین ترجمه یا نسخه از کارگاه یادگیری ماشین ایجاد کنید، موتورهای جستجو ممکن است منبع معتبر را شناسایی نکنند. برای شناسایی URL ترجیحی برای سایت یا برنامه rel="canonical" استفاده کنید.

آدرس اینترنتی متعارف را در تمام صفحات ترجمه شده خود و در صفحه اصلی قرار دهید و آدرس اینترنتی ترجیحی ما را مشخص کنید: 

<link rel="canonical" href="https://www.machinelearning.com" />

لینک متعارف rel="canonical" اغلب برای ارسال متقابل با نشریات و پلتفرم‌های وبلاگ‌نویسی برای ذکر منبع اصلی استفاده می‌شود. وقتی سایتی محتوا را منتشر می‌کند، باید لینک متعارف به منبع اصلی را نیز در آن قرار دهد.

اسکریپت‌ها

تگ <script> شامل اسکریپت‌ها می‌شود. نوع پیش‌فرض آن جاوا اسکریپت است. اگر از زبان اسکریپت‌نویسی دیگری استفاده می‌کنید، ویژگی type را به همراه نوع MIME یا برای ماژول جاوا اسکریپت type="module" استفاده کنید. فقط جاوا اسکریپت و ماژول‌های جاوا اسکریپت تجزیه و اجرا می‌شوند.

تگ‌های <script> می‌توانند برای کپسوله‌سازی کد شما یا دانلود یک فایل خارجی استفاده شوند. در MLW، هیچ فایل اسکریپت خارجی وجود ندارد زیرا برخلاف تصور رایج، برای یک وب‌سایت کاربردی به جاوا اسکریپت نیازی ندارید. این یک مسیر یادگیری HTML است، نه جاوا اسکریپت .

شما بعداً برای ایجاد یک تخم مرغ عید پاک، مقدار کمی جاوا اسکریپت اضافه خواهید کرد: 

<script>
  document.getElementById('switch').addEventListener('click', function() {
    document.body.classList.toggle('black');
  });
</script>

این قطعه کد یک کنترل‌کننده رویداد برای عنصری با شناسه switch ایجاد می‌کند. در جاوا اسکریپت، باید از ارجاع به یک عنصر قبل از وجود آن خودداری کنید. از آنجایی که switch هنوز وجود ندارد، ما هنوز کنترل‌کننده رویداد را اضافه نخواهیم کرد.

وقتی عنصر کلید برق را اضافه می‌کنیم، <script> را به جای <head> در پایین <body> اضافه می‌کنیم. چرا؟ دو دلیل. می‌خواهیم مطمئن شویم که عناصر قبل از مواجهه با اسکریپتی که به آنها ارجاع می‌دهد، وجود دارند، زیرا این اسکریپت را بر اساس یک رویداد DOMContentLoaded نمی‌نویسیم. و عمدتاً، جاوا اسکریپت نه تنها render-blocking است، بلکه مرورگر هنگام دانلود اسکریپت‌ها، دانلود تمام فایل‌ها را متوقف می‌کند و دانلود سایر فایل‌ها را تا زمانی که اجرای جاوا اسکریپت به پایان نرسیده است، از سر نمی‌گیرد. به همین دلیل، اغلب درخواست‌های جاوا اسکریپت را در انتهای سند به جای سربرگ می‌بینید.

دو ویژگی وجود دارد که می‌توانند ماهیت مسدودکننده دانلود و اجرای جاوا اسکریپت را کاهش دهند: defer و async . با defer ، رندر HTML در طول دانلود مسدود نمی‌شود و جاوا اسکریپت فقط پس از اتمام رندر سند اجرا می‌شود. با async ، رندر در طول دانلود نیز مسدود نمی‌شود، اما پس از پایان دانلود اسکریپت، رندر در حین اجرای جاوا اسکریپت متوقف می‌شود.

بارگیری هنگام استفاده از async و defer.

برای گنجاندن جاوا اسکریپت MLW در یک فایل خارجی، می‌توانید بنویسید: 

<script src="js/switch.js" defer></script>

اضافه کردن ویژگی defer ، اجرای اسکریپت را تا پس از رندر شدن همه چیز به تعویق می‌اندازد و از آسیب دیدن عملکرد اسکریپت جلوگیری می‌کند. ویژگی‌های async و defer فقط در اسکریپت‌های خارجی معتبر هستند.

پایه

عنصر دیگری وجود دارد که فقط در <head>. عنصر کم کاربرد <base> امکان تنظیم URL و هدف پیش‌فرض برای لینک را فراهم می‌کند. ویژگی href URL پایه را برای همه لینک‌های نسبی تعریف می‌کند.

ویژگی target که هم برای <base> و هم برای لینک‌ها و فرم‌ها معتبر است، محل باز شدن لینک‌ها را تعیین می‌کند. پیش‌فرض _self فایل‌های لینک‌شده را در همان زمینه سند فعلی باز می‌کند. گزینه‌های دیگر شامل _blank است که هر لینک را در یک پنجره جدید باز می‌کند، _parent محتوای فعلی که اگر بازکننده iframe نباشد، می‌تواند همان self باشد، یا _top که در همان تب مرورگر قرار دارد، اما از هر زمینه‌ای بیرون آمده و کل تب را اشغال می‌کند.

بیشتر توسعه‌دهندگان به جای استفاده از <base> ، ویژگی target را به معدود لینک‌هایی که می‌خواهند در یک پنجره جدید روی لینک‌ها باز شوند یا خودشان تشکیل دهند، اضافه می‌کنند. 

<base target="_top" href="https://machinelearningworkshop.com" />

اگر وب‌سایت ما در سایتی مانند Yummly درون یک iframe قرار گرفته باشد، اضافه کردن عنصر <base> به این معنی است که وقتی کاربر روی هر لینکی در سند ما کلیک کند، لینک از iframe بیرون زده و کل پنجره مرورگر را اشغال می‌کند.

یکی از معایب این عنصر این است که لینک‌های لنگر با <base> حل می‌شوند. <base> به طور مؤثر لینک <a href="#ref"> را به <a target="_top" href="https://machinelearningworkshop.com#ref"> تبدیل می‌کند و یک درخواست HTTP به URL پایه با قطعه کد پیوست شده، راه‌اندازی می‌کند.

چند نکته دیگر در مورد <base> :

  • فقط یک عنصر <base> می‌تواند در یک سند وجود داشته باشد.
  • این باید قبل از استفاده از هرگونه URL نسبی، از جمله ارجاعات احتمالی به اسکریپت یا استایل‌شیت، بیاید.

کد الان به این شکل میشه: 

<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="utf-8" />
    <title>Machine Learning Workshop</title>
    <meta name="viewport" content="width=device-width" />
    <link rel="stylesheet" href="css/styles.css" />
    <link rel="icon" type="image/png" href="/images/favicon.png" />
    <link rel="alternate" href="https://www.machinelearningworkshop.com/fr/" hreflang="fr-FR" />
    <link rel="alternate" href="https://www.machinelearningworkshop.com/pt/" hreflang="pt-BR" />
    <link rel="canonical" href="https://www.machinelearning.com" />
  </head>
  <body>

    <!-- <script defer src="scripts/lightswitch.js"></script>-->
  </body>
</html>

نظرات HTML

اسکریپت در داخل براکت‌های زاویه‌دار، خط تیره و یک علامت ضربدر قرار می‌گیرد که نحوه کامنت‌گذاری HTML را نشان می‌دهد. هر چیزی بین <!-- و --> قابل مشاهده یا تجزیه نیست. می‌توانید کامنت‌های HTML را در هر جایی از صفحه قرار دهید، به جز درون اسکریپت‌ها یا بلوک‌های استایل، که باید از کامنت‌های جاوا اسکریپت و CSS استفاده کنید.

شما اصول اولیه‌ی آنچه در <head> قرار می‌گیرد را پوشش داده‌اید، اما می‌خواهید چیزهای بیشتری از اصول اولیه یاد بگیرید. در بخش‌های بعدی، در مورد متا تگ‌ها و نحوه‌ی کنترل آنچه هنگام لینک شدن وب‌سایت شما در رسانه‌های اجتماعی نمایش داده می‌شود، خواهیم آموخت.

درک خود را بررسی کنید

دانش خود را در مورد ساختار اسناد آزمایش کنید.

چگونه زبان سند را تشخیص می‌دهید؟

ویژگی language را به تگ HTML اضافه کنید.
دوباره امتحان کنید.
ویژگی lang را به تگ HTML اضافه کنید.
درست است!
عنصر Add the <lang> را به <head> اضافه کنید.
دوباره امتحان کنید.

عناصری را انتخاب کنید که می‌توانند در <head> قرار گیرند.

<p>
دوباره امتحان کنید.
<title>
درست است!
<meta>
درست است!
قبلی
مروری بر HTML
بعدی
فراداده