مقدمه

html یک زبان استاندارد نشانه گذاری سمت کاربر است که از آن برای ایجاد صفحات وب و برنامه‌های کاربردی وب، با استفاده از CSS و جاوا اسکریپت استفاده می‌کنند. مرورگرهای وب اسناد HTML را از یک سرور وب یا از سیستم رایانه دریافت می کنند و اسناد را به صفحات وب چندرسانه ای تبدیل می کنند. عناصر HTML ساختار یک صفحه وب را توصیف می کنند و در اصل شامل نشانه هایی برای ظاهر سند هستند.

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

ساختار تگ های HTML به این صورت است:

<tag>
  ...
</tag>

مثلا:

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

و </ p> قرار می گیرند. اولین تگ در یک جفت تگ شروع است، برچسب دوم تگ پایان است. تگ پایان مانند تگ شروع بوده، اما قبل از اسم تگ وارد شده است.گاهی نیز به شکل </> استفاده شده و اصطلاحا self close هستند مثلا:

<input />

در HTML5 وجود slash آخر نیز اختیاری است. ساختار یک فایل html به شکل زیر است:

<!DOCTYPE html>
<html lang="en-US">
   <head>
      <title>Page title</title>
      <meta charset="utf-8" />
      <meta name="viewport" content="width=device-width,initial-scale=1.0" />
      <link rel="icon" type="image/x-icon" href="img/favicon.ico" />
      <link rel="stylesheet" href="style.css" />
   </head>
   <body>
      <!-- page contents goes here -->
      <script type="text/javascript" src="js/script.js"></script>
   </body>
</html>

تگ‌ها

comment

برای درج توضیحات در سند html1 از تگ زیر استفاده می‌شود که متن داخل آن کاملا نادیده گرفته خواهد شد:

<!--
function displayMsg() {
  alert("Hello World!")
}
//
-->

هدف از درج توضیحات غیر فعال کردن موقت یک قطعه کد یا درج توضیحاتی برای افزایش خوانایی کد در آینده برای خود کد نویس یا سایر اعضای تیم است.

doctype

یک دستورالعمل برای مشخص کردن نسخه ی یک صفحه یا فایل HTML است.دستورالعمل Doctype مخفف Document Type بوده و در واقع این تگ نوع سند را به مرورگر ها معرفی می کند.یعنی به مرورگر ها مختلفی مثل کروم، فایرفاکس و… می فهماند صفحه وبی که در حال خواندن و نمایش آن هستند یک نوع سند HTML یا XHTML است.

مثلا تگ aside در نسخه های پایین تر از HTML5 تعریف نشده است. یا تگ‌های acronym و applet در HTML5 تعریف نشده‌اند. کنسرسیوم جهانی وب یعنی w3c، استاندارد های مختلفی از زبان پایه ی وب یعنی HTML را ارائه نموده که هر کدام از آنها در مقایسه با هم هرچند اندک دارای تفاوت هایی هستند. این موضوع سبب می‌شود که مرورگر های وب، در برخورد با صفحات مختلف نتوانند در حالت عادی، استاندارد صحیح را شناسایی کنند و لذا به جای پردازش متناسب با استاندارد اصلی، عملیات پیش فرض خود را برای نمایش صفحه انجام می‌دهند که این موضوع ممکن است با آنچه مورد نظر شما بوده باشد، فرق کند و یا از مرورگری به مرورگر دیگر، صفحات شما به چند شکل مختلف پردازش شوند. لذا برای جلوگیری از بروز چنین مشکلاتی، از دستور راهنمای DOCTYPE استفاده می‌شود تا نوع نسخه HTML استفاده شده را برای مرورگر مشخص کند. کنسرسیوم جهانی وب (W3C) نسب به استفاده از این کد توصیه اکید دارد. مخصوصا در صفحاتی که از نسخه HTML 4.01 یا XHTML 1.0 استفاده می کنند. لذا به خاطر رعایت استانداردهای توصیه شده W3C می توان گفت که استفاده از آن تقریبا الزامی است، در غیر این صورت علاوه بر اینکه ممکن است صفحات، به درستی در مرورگرهای مختلف نمایش داده نشوند، از نظر اعتبار سنجی (Validation) نیز معتبر نیستند، که این امر در امتیاز و رتبه سایت یا وبلاگ در موتورهای جستجو تاثیر منفی خواهد داشت. 

<!DOCTYPE html>

به مرورگر و موتور جستجو اعلام می کند که سایت از html5 استفاده می کند.

html

بیانگر ریشه اصلی فایل html است.همه تگ ها غیر از تگ DOCTYPE در این تگ قرار می گیرند. خاصیت و ویژگی lang در آن درج می‌شود و بیان می کند زیان سایت چیست. که این اعلان برای مرورگر و موتور های جستجو اهمیت دارد.

حاوی اطلاعات metadata 2 ی سایت است و بین تگ های html و body قرار میگیرد و اطلاعات آن در سایت نمایش داده نمی‌شود. تگ هایی که در آن استفاده می شوند:

`<title>`، `<style>`، `<base>`، `<link>`، `<meta>`، `<script>`، `<noscript>`.

title

عنوان صفحه که روی سربرگ مرورگر نیز نمایش داده می‌شود.در مبحث SEO3 این عنوان اهمیت زیادی دارد و در تعیین چیدمان نتایج تولید شده توسط موتورهای جستجو موثر است و هنگام نمایش سطر با همین عنوان نمایش داده می‌شود. وقنی سایت به favorite bar کاربر اضافه می‌شود برای نام پیش فرض از آن استفاده می‌شود. توصیه می‌شود بیش از یک یا دو کلمه برای عنوان استفاده کنید.

<title>عنوان صفحه</title>
موتورهای جستجو بین ۵۰ تا ۶۰ کاراکتر عنوان را نمایش خواهند داد. عنوانی طولانی تر این مقدار انتخاب نکنید. عنوان را فقط رشته ای از حروف نتخاب نکنید چون باعث افت در موقعیت سایت در نتایج جستجوها خواهد شد

base

عبارتی که در آن قرار می گیرد پایه همه مسیرهای ناکامل موجود در سند خواهد شد. مثلا: 

    <head>
    <base href="https://www.w3schools.com/" target="_blank">
    </head>

    <body>
    <img src="images/stickman.gif" width="24" height="39" alt="Stickman">
    <a href="tags/tag_base.asp">HTML base Tag</a>
    </body>

تصویر از مسیر زیر بارگذاری خواهد شد:

https://www.w3schools.com/images/stickman.gif

اگر تگ base اعلان نشده باشد مسیر پیش فرض پوشه ای است که فایل html در آن قرار گرفته است.

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

Property description
CrossOrigin مشخص می کند با درخواست های CORS چگونه برخورد شود.
rel=“icon” مقدار icon یا favicon کمک می کند آیکون سایت که در سربرگ مرورگر نمایش داده می‌شود و اگر کاربر سایت را به favorite اضافه کند در نوار علایق با این آیکون نمایش داده می‌شود.مقدار apple-touch-icon کمک می کند در صورتی که در سیستم های iOS سایت add to desktop شد این امکان را داشته باشیم که آیکونی با رزولوشن بالاتری برای آن در نظر بگیریم تا در کنار بقیه آیکون های دسکتاپ شمایل بهتری داشته باشد
rel=“stylesheet” حاوی فایل css برای قالب بندی سایت است.
rel=“preload” اعلام می کند مرورگر باید قبل از نمایش سایت این اطلاعات را دریافت کند و در cache نگهداری کند
Type وقتی rel=“Stylesheet” باشد مقدار type را برابر text/css قرار می دهیم.

مثال:

<link rel="icon" href="/favicon.ico" type="image/x-icon">
<link rel="stylesheet" type="text/css" href="styles.css">

<link rel="preload" href="style.css" as="style" />
<link rel="preload" href="main.js" as="script" />

Meta

معمولا از آن برای اعلان کاراکترها استفاده می کنیم:

<meta charset="utf-8" />

کد فوق در HTML 4 به شکل زیر نوشته می شد:

<meta http-equiv="content-type" content="text/html; charset=UTF-8">

همچنین برای مباحث SEO سایت می توان از این تگ با کلید واژه content برای اعلام کلمات کلیدی مرتبط با محتوا سایت استفاده کرد.

<meta name="viewport" content="width=device-width, initial-scale=1.0">

تگ فوق به responsive شدن سایت و نمایش صحیح آن در اندازه های مختلف صفحه نمایش از قبیل تبلت و گوشی موبایل و تلویزیون … کمک می کند.

با تگ زیر می توان نویسنده صفحه را اعلان کرد:

<meta name="author" content="John Doe">

با تگ زیر می توان کلمات کلیدی سایت را به موتورهای جستجو اعلان کرد:

<meta name="keywords" content="HTML, CSS, JavaScript">

تگ زیر توضیحی درباره چیستی سایت ارایه می کند:

<meta name="description" content="Free Web tutorials">

خاصیت دیگری به اسم http-equiv وجود دارد که کارکردهای خاصی دارد:

<meta http-equiv="refresh" content="30">

کد فوق باعث می‌شود سایت هر ۳۰ ثانیه یک بار به طور خودکار refresh شود.اگر بعد از ۳۰ یک سمی کالمن بگذاریم و بعد از آن آدرس یک سایت را بنویسیم بعد از سپری شدن مدت مشخص شده کاربر به سایت تعیین شده هدایت خواهد شد:

<meta http-equiv="refresh" content="30;URL='http://test.com/'" />

از خاصیت زیر برای کنترل رفتار مرورگر در cache کردن محتویات قابل ذخیره سازی نظیر تصاویر می توان استفاده کرد که چند حالت دارد:

<meta http-equiv="Cache-control" content="public">
<meta http-equiv="Cache-control" content="private">
<meta http-equiv="Cache-control" content="no-cache">
<meta http-equiv="Cache-control" content="no-store">

پس از قرار دادن مقدار cash-control در مقابل ویژگی http-equiv باید در مقابل ویژگی content از مقدار:

  • public (جهت استفاده از cash به اشتراک گذاری شده عمومی)
  • private (جهت استفاده از cash به اشتراک گذاری شده خصوصی)
  • no-cash (جهت عدم استفاده از cash)
  • no-store (جهت استفاده از cash و عدم ذخیره سازی توسط cash) استفاده نماییم.

به کمک خاصیت Set-Cookie برای http-equiv می توانیم اطلاعاتی از بازدید کننده را ذخیره کنیم مشروط به اینکه از قالب زیر استفاده کنیم:

CONTENT=”name=data; path=path; expires=Day, DD-MMM-YY HH:MM:SS ZON”

مثلا:

<meta http-equiv="Set-Cookie" content="ACCOUNT=9983373;
   path=/; expires=Thursday, 20-May-09 00:15:00 GMT">

Body

بدنه اصلی سایت در این تگ قرار می گیرد.هر سند html می تواند حاوی تنها یک تگ body باشد.

a

Anchor برای ایجاد یک hyperlink استفاده می‌شود تا کاربر با کلیک روی آن به سایت دیگری منتقل شود یا به قسمت دیگری از صفحه هدایت شود.مقصد به کمک خاصیت href مشخص می‌شود.

<a href="https://www.w3schools.com">Visit W3Schools.com!</a>

خاصیت کاربردی دیگر این تگ target است که مشخص می کند مقصد در همان صفحه باز شود یا در سربرگ جدیدی از مرورگر باز شود مقدار آن می توانند یکی از اینها باشد:

  • _blank
  • _parent
  • _self
  • _top

کد زیر مقصد را در سربرگ جدیدی باز می کند:

<a href="https://www.w3schools.com" target="_blank">Visit W3Schools.com!</a>

<a href="https://www.w3schools.com" target="_blank">Visit W3Schools.com!</a>

در صورتی که مقصد در همان سایت باشد از # استفاده می کنیم:

<a href="#section2">Go to Section 2</a>
<p>In my younger and more vulnerable years</p>
<h2 id="section2">Section 2</h2>
<p>In my younger and more vulnerable years</p>

می تواند به ID یکی از المنتهای صفحه اشاره کند.

اگر # خالی استفاده کنیم به سر صفحه منتقل می شویم.

می توان برای تماس تلفنی از طریق نرم افزار های VoIP روی سیستم بازدید کننده نیز از Anchor استفاده کرد:

<a href="tel:+982191000000">1000000</a>

<a href="tel:+982191000000">1000000</a>

می توان برای ارسال ایمیل نیز از آن استفاده کرد:

<a href="mailto:mjid.ahmadi@gmail.com?subject=Hi Majid&body=Hello dear, How are you following table demonstrates preprices we can deal">Send Email to Majid</a>

<a href="mailto:mjid.ahmadi@gmail.com?subject=Hi Majid&body=Hello dear, How are you following table demonstrates preprices we can deal">Send Email to Majid</a>

خاصیت دیگری به نام download وحود دارد کهبه مرورگر میگوید باید مقصد را به شکل یک فایل دانلود کند.

<a href="path/to/file.pdf" download="نام_جدید_فایل.pdf">دانلود فایل</a>

(اختیاری) نامی است که برای فایل دانلودی در نظر گرفته می‌شود. اگر این مقدار را وارد نکنید، مرورگر از نام اصلی فایل استفاده می‌کند

بصورت پیش فرض یک لینک دارای ۳ حالت کلی زیر می باشد:

  • لینکی که هنوز کلیک نشده – ( زیرش یک خط کشیده شده و رنگش آبی می باشد )
  • لینکی که کلیک شده – ( زیرش یک خط کشیده شده و رنگش بنفش می باشد )
  • لحظه ی کلیک بروی لینک – ( زیرش یک خط کشیده شده و رنگش قرمز می باشد ) وقتی ماوس بروی یک لینک قرار میگیرد معمولا علامت آن به شکل 👆 آموزش کار با لینک ها یا Links در HTMLتبدیل می شود، ولی خب بازم بستگی به سیستم عامل و تِم سیستمتون داره و ممکنه شکلش کمی متفاوتتر باشه.

می توان عناصر دیگر را درون یک تگa قرار داد. مثلا در صورت کلیک روی تصویر زیر لینک باز خواهد شد.

<p>بروی تصویر زیر کلیک کنید</p>

<a href="#">
 <img src="../../assets/images/chapter-html/img.webp">
</a>

<a href="#">
 <img src="../../assets/images/chapter-html/img.webp">
</a>

h

از h1 تا h6 برای تعریف heading یا سرفصل برای متن استفاده می‌شود.

<h1>عنوان اصلی سطح ۱ - بزرگترین تیتر</h1>
<h2>عنوان فرعی سطح ۲ - سرفصل‌های اصلی</h2>
<h3>عنوان سطح ۳ - زیرسرفصل‌ها</h3>
<h4>عنوان سطح ۴ - جزئیات بیشتر</h4>
<h5>عنوان سطح ۵ - توضیحات تخصصی</h5>
<h6>عنوان سطح ۶ - کوچکترین تیتر</h6>

<div style="
  font-size: calc(1.325rem + 0.9vw);
  font-weight: bold;
  margin: 0.67em 0;
  line-height: 1.2;
  display: block;
">
  عنوان اصلی سطح ۱ - بزرگترین تیتر
</div>
<h2>عنوان فرعی سطح ۲ - سرفصل‌های اصلی</h2>
<h3>عنوان سطح ۳ - زیرسرفصل‌ها</h3>
<h4>عنوان سطح ۴ - جزئیات بیشتر</h4>
<h5>عنوان سطح ۵ - توضیحات تخصصی</h5>
<h6>عنوان سطح ۶ - کوچکترین تیتر</h6>

نکات مهم سئو (SEO) و دسترسی‌پذیری:

  • سلسله‌مراتب (Hierarchy): ترتیب منطقی را رعایت کنید (h1 بزرگترین و h6 کوچکترین).

  • تعداد h1: در هر صفحه فقط یک <h1> داشته باشید (برای عنوان اصلی).

  • از پرش (Skip): از h1 به h4 نپرید؛ ترتیب را رعایت کنید.

  • کاربری: از h فقط برای تیترها استفاده کنید، نه برای بزرگ کردن متن!

p

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

div

مخفف division برای بخش بندی صفحه سایت و به عنوان کانتینری برای اجزای سایت استفاده می‌شود تا بتوان روی آن محتویات از طریق style یا جاوا اسکریپت اعمال خاصی انجام داد. مثال غیر کاربردی(جلوتر درباره بخش بندی اصولی صحبت خواهیم کرد):

<!DOCTYPE html>
<html lang="fa">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Layout</title>

    <style>
        * {
            margin: 0;
            padding: 0;
            box-sizing: border-box;
        }

        .container {
            width: 100%;
            min-height: 100vh;
        }

        /* Header */
        .header {
            height: 100px;
            background: #4e8fe6;
        }

        /* Main Section */
        .main {
            display: flex;
            min-height: 500px;
        }

        .aside {
            width: 25%;
            background: #f0b64b;
        }

        .content {
            flex: 1;
            background: #ead846;
        }

        /* Footer */
        .footer {
            height: 100px;
            background: #f25a5a;
        }

        .header,
        .aside,
        .content,
        .footer {
            color: white;
            font-weight: bold;
            display: flex;
            align-items: center;
            justify-content: center;
            font-size: 42px;
        }
    </style>
</head>
<body>
    <div class="container">
        <div class="header">
            header
        </div>
        <div class="main">
            <div class="aside">
                aside
            </div>
            <div class="content">
                content
            </div>
        </div>
        <div class="footer">
            footer
        </div>
    </div>
</body>
</html>

span

عنصر <span> در HTML یک ظرف درون‌خطی عمومی برای بیان محتوا است که ذاتاً چیزی را نشان نمی‌دهد. می‌توان از آن برای گروه‌بندی عناصر به منظور سبک‌دهی (با استفاده از ویژگی‌های class یا id) یا به دلیل اشتراک‌گذاری مقادیر ویژگی‌ها، مانند lang، استفاده کرد. این عنصر فقط باید زمانی استفاده شود که هیچ عنصر معنایی دیگری مناسب نباشد. <span> بسیار شبیه به عنصر <div> است، اما <div> یک عنصر سطح بلوکی است در حالی که <span> یک عنصر سطح درون‌خطی است. 

<p>
  Add the <span class="ingredient">basil</span>,
  <span class="ingredient">pine nuts</span> and
  <span class="ingredient">garlic</span> to a blender and blend into a paste.
</p>

<p>
  Gradually add the <span class="ingredient">olive oil</span> while running the
  blender slowly.
</p>

<p>
  Add the <span class="ingredient">basil</span>,
  <span class="ingredient">pine nuts</span> and
  <span class="ingredient">garlic</span> to a blender and blend into a paste.
</p>

<p>
  Gradually add the <span class="ingredient">olive oil</span> while running the
  blender slowly.
</p>

bdi 4

وقتی میدانیم درون یک متن راست به چپ یا چپ به راست احتمال درج زبانی در خلاف جهت وجود دارد از این تگ استفاده می کنیم تا چینش متن به هم نخورد:

<ul>
   <li>User <bdi>hrefs</bdi>: 60 points</li>
   <li>User <bdi>jdoe</bdi>: 80 points</li>
   <li>User <bdi>إيان</bdi>: 90 points</li>
</ul>

<ul>
   <li>User <bdi>hrefs</bdi>: 60 points</li>
   <li>User <bdi>jdoe</bdi>: 80 points</li>
   <li>User <bdi>إيان</bdi>: 90 points</li>
</ul>

در کنار آن تگ bdo را داریم.

<bdi> = "خودت جهت را تشخیص بده، فقط از بقیه جداش کن."

<bdo> = "به تشخیصت کاری ندارم؛ دقیقاً از جهتی که من می‌گویم نمایش بده."

<p dir="ltr">
    <bdo>ABC-123-XYZ</bdo>
    <br>
    <bdi>ABC-123-XYZ</bdi>
</p>

<p dir="rtl">
    <bdo>ABC-123-XYZ</bdo>
    <br>
    <bdi>ABC-123-XYZ</bdi>
</p>

تگ های مفهومی

طراحان سایت و برنامه نویسان صفحه را به کمک تگ های header و main و footer به چند بخش تقسیم می کنند و هر بخش را به کمک تگ section به چند زیر بخش. این tag ها مثل Div کاربرد container بودن هم دارند. مثل Div هم Block-level هستند. تفاوت آنها این است که Div برای ایجاد یک container والد که دارای چند فرزند است ایجاد می‌شود ولی این تگ ها برای جدا کردن بخش های مفهومی سایت استفاده می شوند که برای موتورهای جستجو و کاربران معنی 5 دارند. Screen reader ها هم تفسیر متفاوتی از این دو دارند. 

<section>
    <h2>محصولات</h2>
    ...
</section>

لیست تگهای مفهومی:

tag description
header سرآمد هر بخش
nav برای منوها و ناوبری6 در سایت استفاده می‌شود.
main بدنه اصلی سایت
aside نوارهای چپ و راست بدنه اصلی
section برای بخش بدنی هر یک از تگ های مفهومی دیگر استفاده می‌شود
article برای نمایش قسمت هایی که ممکن است در جاهای مختلف سایت نمایش داده شوند مثل پست های وبلاگ یا انجمن یا اخبار
footer بخش پایینی سایت

ol-ul-li

مخفف unordered list یعنی لیست بدون شماره از این تگ برای ایجاد لیست استفاده می‌شود. با تگ li اجزای این لیست را می توان اضافه کرد. برای لیست های شماره دار از تگ ol استفاده می‌شود. برای اجزایی مثل آیتم های لیست موجود در منوی سایت از ul استفاده می‌شود.

<ol>
  <li>Coffee</li>
  <li>Tea</li>
  <li>Milk</li>
</ol>

<ol>
  <li>Coffee</li>
  <li>Tea</li>
  <li>Milk</li>
</ol>

<ul>
  <li>Coffee</li>
  <li>Tea</li>
  <li>Milk</li>
</ul>

<ul>
  <li>Coffee</li>
  <li>Tea</li>
  <li>Milk</li>
</ul>

به کمک شبه المان ها می‌شود تغییراتی در آنها داد.

توسط خاصیت های مثل padding می توان فاصله آیتم ها از هم را تنظیم کرد.

از لیست ها برای ساخت منوهای سایت نیز می توان استفاده کرد.معمولا در ساخت منو ها خاصیت list-style-type را روی none قرار می‌دهند.

li {
    list-style: none;
    display: inline;
}

li:hover {
    background-color: orange;
    cursor: pointer;
}

ul {
    background-color: yellow;
    padding: 0;
}


<ul>
   <li>Home</li>
   <li>News</li>
   <li>Blog</li>
   <li style="float: right;">About</li>
</ul>

در کد بالا اگر خاصیت display را برابر با block کنیم منو تبدیل به منوی عموی خواهد شد که در پنل سمت جپ سایت ها کاربرد دارد.

مقادیر دیگری که خاصیت list-style می تواند داشته باشد:

  • Disc
  • Circle
  • Square
  • Lower-alpha
  • Lower-latin
  • Lower-roman

table

برای رسم جدول استفاده می‌شود.هر جدول دو نوع سلول دارد data و header که با دو تگ <td> برای table data و <th> برای table header مشخص می شوند. این دو نوع سلول باید در یک ردیف که با <tr> به معنی table row مشخص می‌شود قرار گیرند. 

<table>
  <tr>
    <th>Name</th>
    <th>Email</th>
    <th colspan="2">Phone</th>    
  </tr>
  <tr>
    <td>John Doe</td>
    <td>john.doe@example.com</td>    
    <td>123-45-678</td>
    <td>212-00-546</td>    
  </tr>
</table>

که خروجی آن به شکل زیر است:

colspan (مخفف Column Span) به سلول می‌گوید که چند ستون را در عرض خودش پوشش دهد (اشغال کند). به عبارت دیگر، یک سلول را در چندین ستون پخش می‌کند.

  • مقدار پیش‌فرض: 1 (یعنی سلول فقط یک ستون را اشغال می‌کند)

  • مقدار مجاز: هر عدد صحیح مثبت (مثلاً 2، 3، 5 و ...)

<table border="1">
    <tbody>
        <tr>
            <td>A</td>
            <td>B</td>
            <td>C</td>
        </tr>


        <tr>
            <td colspan="2">D</td>
            <td>E</td>
        </tr>
        <tr>
            <td>F</td>
            <td colspan="2">G</td>
        </tr>
    </tbody>
</table>

تصویر 7

به هر یک از سلول ها یا به کل جدول می توان یک Style نسبت داد. خاصیتی به نام border-collapse داریم که باعث می‌شود border های سلول ها به هم بچسبند.

تصویر 8

به کمک شبه کلاس‌ها می توان برای ردیف های even یا odd استایل خاصی را اعمال کرد.این کار به کمک متد nth-child انجام می‌شود:

tr:nth-child(even){
    background-color:silver
}

تصویر 9

اگر به جای even بنویسیم 3n+1 به شکل زیر اعمال خواهد شد:

تصویر 10

برای جداول بزرگ توصیه می‌شود برای اینکه در پرینت صفحات و اسکرول کردن صفحات کاربر راحت باشد سه بخش جدول (سرآمد-بدنه - پا جدول) را در سه تگ زیر قرار داد:

<thead></thead>
<tbody></tbody>
<tfoot></tfoot>

تصویر 11

وقتی فایل بیش از یک صفحه باشد:

تصویر 12

در bootstrap کلاس های table-striped و table-bordered برای شکل دهی سریع به جداول پرکاربرد هستند.

<div class="container">
     <table></table>
     <thead></thead>
     <tbody></tbody>
     <tfoot></tfoot>


     <table class="table caption-top table-bordered">
       <caption>
         List of users
       </caption>
       <thead>
         <tr>
           <th scope="col">Name</th>
           <th>Email</th>
           <th colspan="2">Phone</th>
         </tr>
       </thead>
       <tbody>
         <tr>
           <td>John Doe</td>
           <td>john.doe@example.com</td>
           <td>123-45-678</td>
           <td>212-00-546</td>
         </tr>
       </tbody>
       <tfoot>
         <tr>
           <td colspan="4">Address:here</td>
         </tr>
       </tfoot>
     </table>
   </div>

با تگ colgroup می توان چند ستون را ادغام کرد. در کد از colgroup برای ادغام با هدف اعمال کلاس مشترک روی دو ستون آخر استفاده شده:

<table>
    <caption>
        Personal weekly activities
    </caption>
    <colgroup span="5" class="weekdays"></colgroup>
    <colgroup span="2" class="weekend"></colgroup>
    <thead>
        <tr>
            <th>Mon</th>
            <th>Tue</th>
            <th>Wed</th>
            <th>Thu</th>
            <th>Fri</th>
            <th>Sat</th>
            <th>Sun</th>
        </tr>
    </thead>
    <tbody>
        <tr>
            <td>Clean room</td>
            <td>Football training</td>
            <td>Dance Course</td>
            <td>History Class</td>
            <td>Buy drinks</td>
            <td>Study hour</td>
            <td>Free time</td>
        </tr>
        <tr>
            <td>Yoga</td>
            <td>Chess Club</td>
            <td>Meet friends</td>
            <td>Gymnastics</td>
            <td>Birthday party</td>
            <td>Fishing trip</td>
            <td>Free time</td>
        </tr>
    </tbody>
</table>

table {
    border-collapse: collapse;
    border: 2px solid rgb(140 140 140);
}


caption {
    caption-side: bottom;
    padding: 10px;
}


th,
td {
    border: 1px solid rgb(160 160 160);
    padding: 8px 6px;
    text-align: center;
}


.weekdays {
    background-color: #d7d9f2;
}


.weekend {
    background-color: #ffe8d4;
}

تصویر 13

خصوصیت span در <colgroup> یک عدد صحیح مثبت دریافت می‌کند که نشان‌دهنده تعداد ستون‌هایی است که آن گروه شامل می‌شود . مثلاً

<colgroup span="5" class="weekdays"></colgroup>
<colgroup span="2" class="weekend"></colgroup>

یعنی یک گروه شامل 5 ستون (روزهای هفته) و یک گروه شامل 2 ستون (تعطیلات آخر هفته).

dl dt dd

dl مخفف description list به معنی لیست توضیخات است. به همراه dt به معنی definition term و dd به معنی difinition description برای درج توضیحات درباره هر آیتم استفاده می‌شود. 

<dl>
    <dt>Coffee</dt>
    <dd>Black hot drink</dd>
    <dt>Milk</dt>
    <dd>White cold drink</dd>
</dl>

<dl>
    <dt>Coffee</dt>
    <dd>Black hot drink</dd>
    <dt>Milk</dt>
    <dd>White cold drink</dd>
</dl>

با استایل دهی به آن می توان مفاهیم را بهتر برای بازدید کننده تشریح کرد:

    dt {
        font-weight: bold;
    }


    dl,
    dd {
        font-size: 0.9rem;
    }


    dd {
        margin-bottom: 1em;
    }

<dl>
    <dt>Beast of Bodmin</dt>
    <dd>A large feline inhabiting Bodmin Moor.</dd>


    <dt>Morgawr</dt>
    <dd>A sea serpent.</dd>


    <dt>Owlman</dt>
    <dd>A giant owl-like creature.</dd>
</dl>

<dl>
    <dt>Beast of Bodmin</dt>
    <dd style="margin-bottom: 1em;padding-left: 2rem;font-size: 0.9rem;">A large feline inhabiting Bodmin Moor.</dd>


    <dt>Morgawr</dt>
    <dd style="margin-bottom: 1em;padding-left: 2rem;font-size: 0.9rem;">A sea serpent.</dd>


    <dt>Owlman</dt>
    <dd style="margin-bottom: 1em;padding-left: 2rem;font-size: 0.9rem;">A giant owl-like creature.</dd>
</dl>

Text formatting

این تگ‌ها فقط ظاهر متن رو تغییر میدهند و معنای خاصی ندارند.

تگ **کاربرد ** مثال نتیجه
<b> متن پررنگ (Bold) متن پررنگ متن پررنگ
<i> متن کج (Italic) متن کج متن کج
<u> متن زیرخط‌دار (Underline) متن زیرخط‌دار متن زیرخط‌دار
<s> ~~متن خط‌خورده~~ (Strikethrough) متن خط‌خورده ~~متن خط‌خورده~~
<small> متن کوچک متن کوچک متن کوچک

Phrase tags

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

| **تگ **    | **کاربرد **                  | **مثال **                                             | **نتیجه **                                          |
| ---------- | ---------------------------- | ----------------------------------------------------- | --------------------------------------------------- |
| `<strong>` | متن بسیار مهم (اهمیت بالا)   | `<strong>مهم</strong>`                                | <strong>مهم</strong>                                |
| `<em>`     | تأکید (Emphasis)             | `<em>تأکید</em>`                                      | <em>تأکید</em>                                      |
| `<mark>`   | <mark>متن هایلایت شده</mark> | `<mark>هایلایت</mark>`                                | <mark>هایلایت</mark>                                |
| `<del>`    | ~~متن حذف شده~~              | `<del>حذف شده</del>`                                  | <del>حذف شده</del>                                  |
| `<ins>`    | <ins>متن اضافه شده</ins>     | `<ins>اضافه شده</ins>`                                | <ins>اضافه شده</ins>                                |
| `<sub>`    | زیرنویس (مثل H₂O)            | `H<sub>2</sub>O`                                      | H<sub>2</sub>O                                      |
| `<sup>`    | بالانویس (مثل m²)            | `m<sup>2</sup>`                                       | m<sup>2</sup>                                       |
| `<code>`   | کد کامپیوتر                  | `<code>let x = 10;</code>`                            | <code>let x = 10;</code>                            |
| `<kbd>`    | ورودی صفحه‌کلید               | `<kbd>Ctrl+S</kbd>`                                   | <kbd>Ctrl+S</kbd>                                   |
| `<samp>`   | خروجی برنامه                 | `<samp>Error 404</samp>`                              | <samp>Error 404</samp>                              |
| `<var>`    | متغیر ریاضی                  | `<var>x</var> = 5`                                    | <var>x</var> = 5                                    |
| `<abbr>`   | مخفف                         | `<abbr title="HyperText Markup Language">HTML</abbr>` | <abbr title="HyperText Markup Language">HTML</abbr> |

strong

تگ strong که در دسته ی تگ های عبارتی یا Phrase می باشد ، تگی است که با استفاده از آن میتوان یک متن / محتوا را به صورت مهم یا متنی که دارای ارزش محتوایی می باشد نشان داد.از نظر شمایل خروجی آن مثل تگ b که برای bold کردن متن استفاده می‌شود است ولی کارکرد متفاوت دیگری نیز دارد. زمانی که محتوای مهمی داریم و میخواهیم به موتورهای جستجو اعلام کنیم که به این محتوا یا کلمه کلیدی اهمیت ویژه ای بدهد از تگ strong استفاده می‌کنیم و زمانی که محتوای ما محتوای مهمی نیست و تنها می‌خواهیم آن را ضخیم کنیم از تگ b استفاده می‌کنیم.تگ strong در سئو سایت دارای اهمیت است.

<p>
  ... the most important rule, the rule you can never forget, no matter how much
  he cries, no matter how much he begs:
  <strong>never feed him after midnight</strong>.
</p>

<p>
  ... the most important rule, the rule you can never forget, no matter how much
  he cries, no matter how much he begs:
  <strong>never feed him after midnight</strong>.
</p>

code

تگ code تگی است که ما با استفاده از آن میتوانیم یک تکه کد (معمولا کدهای کامپیوتری) را درون یک صفحه ی وب تعریف نماییم.

<p>
  The <code>push()</code> method adds one or more elements to the end of an
  array and returns the new length of the array.
</p>

<p>
  The <code>push()</code> method adds one or more elements to the end of an
  array and returns the new length of the array.
</p>

می توان با استایل سفارشی کد ها را متمایز کرد.

pre7

برای نمایش متن ها دقیقا با همان حالت و فواصل استفاده می شود.

    <pre>
این    متن    با    فاصله‌های    زیاد
     و خط جدید
نشان داده میشه
</pre>

<pre>
این    متن    با    فاصله‌های    زیاد
     و خط جدید
نشان داده میشه
</pre>

متن داخل <pre> 8 با فونت ثابت‌عرض (مثل Courier) نمایش داده میشود.

<code> فقط برای نمایش تک‌خطی کد یا عبارت‌های کوتاه استفاده میشود و فاصله‌ها را حفظ نمیکند. نکته مهم:اگر داخل <pre> از کاراکترهای خاص مثل < یا > استفاده میکنید، حتماً باید از Entity Codes (مثل < برای بسته و > برای باز) استفاده کنید تا مرورگر اون‌ها رو به‌عنوان تگ HTML تفسیر نکنه.

<pre>
    <code>
function hello() {
    console.log("Hello World");
}
    </code>
</pre>

<pre>
    <span class="code-slash fade-in-element">TEST</span>
</pre>

<pre>
    &lt;span class="code-slash fade-in-element"&gt;TEST&lt;/span&gt;
</pre>

<pre>
    <span class="code-slash fade-in-element">TEST</span>
</pre>

<pre>
    &lt;span class="code-slash fade-in-element"&gt;TEST&lt;/span&gt;
</pre>

همانطور که مشاهده می شود span اول توسط مرورگر به عنوان تگ span تفسیر شده است.

var

تگ var یا Variable که در دسته ی تگ های عبارتی یا ( Phrase ) قرار دارد، تگی است که با استفاده از آن می توان متغیر ها را در یک صفحه وب تعریف و یا ایجاد نمود. اگر با زبان های برنامه نویسی آشنایی داشته باشید میدانید که متغیرها چه هستند، حال همان متغیرها را اگر بخواهیم در یک صفحه وب بگذاریم باید از تگ Var استفاده نماییم.

<p>
  The volume of a box is <var>l</var> × <var>w</var> × <var>h</var>, where
  <var>l</var> represents the length, <var>w</var> the width and
  <var>h</var> the height of the box.
</p>

<p>
  The volume of a box is <var>l</var> × <var>w</var> × <var>h</var>, where
  <var>l</var> represents the length, <var>w</var> the width and
  <var>h</var> the height of the box.
</p>

kbd

تگ kbd که مخفف Keyboard Input می باشد تگی است که در دسته ی تگ های عبارتی یا Phrase می باشد ، با استفاده از آن میتوان یک ورودی صفحه کلید یا Keyboard Input را در یک صفحه وب قرار داد.

<p>
  Please press <kbd>Ctrl</kbd> + <kbd>Shift</kbd> + <kbd>R</kbd> to re-render an
  MDN page.
</p>

<p>
  Please press <kbd>Ctrl</kbd> + <kbd>Shift</kbd> + <kbd>R</kbd> to re-render an
  MDN page.
</p>

مرورگر و موتورهای جستجو متن درون آن را به عنوان ترکیبی از کلیدهای کیبورد درک خواهند کرد.

kbd {
    background-color: #123456;
    padding:.1rem .6rem;
    color: #fff;
}

<p>
    Please press <kbd>Ctrl</kbd> + <kbd>Shift</kbd> + <kbd>R</kbd> to re-render
    page.
</p>

<p>
    Please press <kbd style="            background-color: #123456;
    padding: .1rem .6rem;
    color: #fff;
    border-radius: .2rem;">Ctrl</kbd> + <kbd style="            background-color: #123456;
    padding: .1rem .6rem;
    color: #fff;
    border-radius: .2rem;">Shift</kbd> + <kbd style="            background-color: #123456;
    padding: .1rem .6rem;
    color: #fff;
    border-radius: .2rem;">R</kbd> to re-render
    page.
</p>

samp

تگ samp که مخفف Sample می باشد ، تگی است که در دسته ی تگ های عبارتی یا Phrase می باشد ، و با استفاده از آن می توان خروجی یک برنامه کامپیوتری را در یک صفحه وب قرار داد.

<p>I was trying to boot my computer, but I got this hilarious message:</p>

<p>
  <samp>Keyboard not found <br />Press F1 to continue</samp>
</p>

<p>I was trying to boot my computer, but I got this hilarious message:</p>

<p>
  <samp>Keyboard not found <br />Press F1 to continue</samp>
</p>

abbr

از تگ <abbr> برای اختصار سازی 9 یک عبارت طولانی استفاده می‌شود.

<p>
    The <abbr title="World Health Organization">WHO</abbr> was founded in 1948.
</p>

<p>
    The <abbr title="World Health Organization">WHO</abbr> was founded in 1948.
</p>

mark

برای برجسته و متمایز کردن قسمت خاصی از متن استفاده می‌شود.

<p>Search results for "salamander":</p>

<hr />

<p>
    Several species of <mark>salamander</mark> inhabit the temperate rainforest of
    the Pacific Northwest.
</p>

<p>
    Most <mark>salamander</mark>s are nocturnal, and hunt for insects, worms, and
    other small creatures.
</p>

<p>Search results for "salamander":</p>

<hr />

<p>
    Several species of <mark>salamander</mark> inhabit the temperate rainforest of
    the Pacific Northwest.
</p>

<p>
    Most <mark>salamander</mark>s are nocturnal, and hunt for insects, worms, and
    other small creatures.
</p>

dfn

این امکان می دهد را به شما می دهد تا کلمه کلیدی محتوا را مشخص کنید.

<p>
  A <dfn id="def-validator">validator</dfn> is a program that checks for syntax
  errors in code or documents.
</p>

<p>
  A <dfn id="def-validator">validator</dfn> is a program that checks for syntax
  errors in code or documents.
</p>

blockquote - cite - q

این تگ علاوه بر ظاهر، معنای معنایی (semantic) هم دارد و به مرورگرها، موتورهای جستجو و ابزارهای کمکی می‌گوید که این بخش یک نقل‌قول است.

<div>
  <blockquote cite="https://www.huxley.net/bnw/four.html">
    <p>
      Words can be like X-rays, if you use them properly—they'll go through
      anything. You read and you're pierced.
    </p>
  </blockquote>
  <p>—Aldous Huxley, <cite>Brave New World</cite></p>
</div>

<div>
  <blockquote cite="https://www.huxley.net/bnw/four.html">
    <p>
      Words can be like X-rays, if you use them properly—they'll go through
      anything. You read and you're pierced.
    </p>
  </blockquote>
  <p>—Aldous Huxley, <cite>Brave New World</cite></p>
</div>

ویژگی cite به منبعی که از آن سایت نقل قول کرده ایم اشاره می کند. این آدرس به کاربر نمایش داده نمی شود اگر بخواهیم نمایش داده شود از تگ cite استفاده می کنیم:

برای نقل قول کوتاه از q استفاده می کنیم:

<p>
  When Dave asks HAL to open the pod bay door, HAL answers:
  <q
    cite="https://www.imdb.com/title/tt0062622/quotes/?item=qt0396921&ref_=ext_shr_lnk">
    I'm sorry, Dave. I'm afraid I can't do that.
  </q>
</p>

<p>
  When Dave asks HAL to open the pod bay door, HAL answers:
  <q
    cite="https://www.imdb.com/title/tt0062622/quotes/?item=qt0396921&ref_=ext_shr_lnk">
    I'm sorry, Dave. I'm afraid I can't do that.
  </q>
</p>

address

اطلاعات تماس نویسنده ی محتوا را تعیین می کند.

<address>
   Written by <a href="mailto:webmaster@example.com">Jon Doe</a>.<br> 
   Visit us at:<br>
   Example.com<br>
   Box 564, Disneyland<br>
   USA
</address>

<address>
   Written by <a href="mailto:webmaster@example.com">Jon Doe</a>.<br>
   Visit us at:<br>
   Example.com<br>
   Box 564, Disneyland<br>
   USA
</address>

em

تگ em که از کلمه Emphasized گرفته شده و در دسته ی تگ های عبارتی یا Phrase می باشد ، تگی است که با استفاده از آن می توان روی یک متن / کلمه تاکید کرد.موتورهای جستجوگر ( مثل گوگل ) به این تگ توجه می کنند، تگ i نیز در ظاهر شبیه به تگ em می باشد ولی فرق دارند، تگ i هیچ گونه تاکیدی روی متن ندارد و فقط متن رو شکسته یا ایتالیک می کند. همچنین screen reader ها با رسیدن به این تگ متن درون آن را با تاکید قرائت می کنند.

<p>Get out of bed <em>now</em>!</p>

<p>We <em>had</em> to do something about it.</p>

<p>This is <em>not</em> a drill!</p>

<p>Get out of bed <em>now</em>!</p>

<p>We <em>had</em> to do something about it.</p>

<p>This is <em>not</em> a drill!</p>

img

برای درج تصویر در سایت استفاده می‌شود.چون محتوایی درون خود ندارد، یک تگ تهی 10 محسوب می‌شود؛ یعنی تگ بسته (</img>) ندارد.

<img src="/logo.png" alt="لوگوی شرکت">

اگر تصویر لود نشود یا کاربر از صفحه‌خوان استفاده کند، متن 11 alt نمایش داده یا خوانده می‌شود.

توصیه می شود در آدرس فایل های محلی حتما / قید شود تا اگر سایت روی سرور قرار گرفت مشکلی در یافتن فایل به وجود نیاید. این تگ خاصیتی به نام loading دارد که در حالت پیش فرض مقدار آن eager است. در صورتی که مقدار آن روی lazy تنظیم شود فقط تصاویری دانلود می‌شوند که در محدوده قابل رویت یعنی viewport قرار دارند.

خاصیت title باعث می شود در صورتی که کاربر ماوس را روی تصویر نگه داشت یک tooltip نمایش داده شود.

<img src=".." title="strawberry">

می توان به وسیله srcset با توجه به سایز صفحه نمایش و یا رزولوشن مشخص کرد کدام عکس باز شود.sizes به مرورگر می‌گوید که تصویر در چه اندازه‌ای (بر اساس عرض صفحه) نمایش داده می‌شود تا مرورگر بهترین عکس را از بین لیست srcset انتخاب کند.

ویژگی decoding به مرورگر می گوید که چگونه تصویر را رمز گشایی کند. مقدار async باعث بهبود سرعت می شود.

<img
  src="image-fallback.jpg"
  srcset="image-small.jpg 480w, image-medium.jpg 768w, image-large.jpg 1200w"
  sizes="(max-width: 600px) 100vw, 50vw"
  alt="توضیح مفید و سئو شده درباره تصویر"
  width="800"
  height="600"
  loading="lazy"
  decoding="async"
>

figure

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

figure {
  border: thin silver solid;
  display: flex;
  flex-flow: column;
  padding: 5px;
  max-width: 220px;
  margin: auto;
}

img {
  max-width: 220px;
  max-height: 150px;
}

figcaption {
  background-color: #222222;
  color: white;
  font: italic smaller sans-serif;
  padding: 3px;
  text-align: center;
}

معمولاً یک <figure> یک تصویر، تصویرسازی، نمودار، قطعه کد و غیره است که در جریان اصلی یک سند به آن ارجاع داده می‌شود، اما می‌توان آن را بدون تأثیر بر جریان اصلی به بخش دیگری از سند یا به یک پیوست منتقل کرد.

یک عنوان را می‌توان با قرار دادن یک <figcaption> درون عنصر <figure> (به عنوان اولین یا آخرین فرزند) به آن مرتبط کرد. اولین عنصر <figcaption> که در شکل یافت می‌شود، به عنوان عنوان شکل نمایش داده می‌شود.

<figcaption> نام قابل دسترسی برای <figure> والد را فراهم می‌کند.

area

به کمک این تگ می توان محدوده های قابل کلیکی در یک تصویر به وجود آورد.

<map name="infographic">
  <area
    shape="poly"
    coords="129,0,260,95,129,138"
    href="https://developer.mozilla.org/docs/Web/HTTP"
    alt="HTTP" />
  <area
    shape="poly"
    coords="260,96,209,249,130,138"
    href="https://developer.mozilla.org/docs/Web/HTML"
    alt="HTML" />
  <area
    shape="poly"
    coords="209,249,49,249,130,139"
    href="https://developer.mozilla.org/docs/Web/JavaScript"
    alt="JavaScript" />
  <area
    shape="poly"
    coords="48,249,0,96,129,138"
    href="https://developer.mozilla.org/docs/Web/API"
    alt="Web APIs" />
  <area
    shape="poly"
    coords="0,95,128,0,128,137"
    href="https://developer.mozilla.org/docs/Web/CSS"
    alt="CSS" />
</map>
<img
  usemap="#infographic"
  src="/shared-assets/images/examples/mdn-info.png"
  alt="MDN infographic" />

</map>

<p style="text-align:left;">hover mouse on image</p>
<map name="infographic">
  <area
    shape="poly"
    coords="129,0,260,95,129,138"
    href="https://developer.mozilla.org/docs/Web/HTTP"
    alt="HTTP" />
  <area
    shape="poly"
    coords="260,96,209,249,130,138"
    href="https://developer.mozilla.org/docs/Web/HTML"
    alt="HTML" />
  <area
    shape="poly"
    coords="209,249,49,249,130,139"
    href="https://developer.mozilla.org/docs/Web/JavaScript"
    alt="JavaScript" />
  <area
    shape="poly"
    coords="48,249,0,96,129,138"
    href="https://developer.mozilla.org/docs/Web/API"
    alt="Web APIs" />
  <area
    shape="poly"
    coords="0,95,128,0,128,137"
    href="https://developer.mozilla.org/docs/Web/CSS"
    alt="CSS" />
</map>
<img
  usemap="#infographic"
  src="../../assets/images/chapter-html/area.webp"
  alt="MDN infographic"
  style="display: block;
  margin: 0 auto;
  width: 260px;
  height: 260px;" />

برای shape می توان از مقدار poly برای ترسیم دقیق تر استفاده کرد.

audio

برای درج پلیر صوتی در صفحه استفاده می‌شود.

<audio controls>
  <source src="horse.ogg" type="audio/ogg">
  <source src="horse.mp3" type="audio/mpeg">
  Your browser does not support the audio tag.
</audio>

video

برای نمایش پخش کننده فیلم:

<video width="320" height="240" controls>
   <source src="movie.mp4" type="video/mp4">
   <source src="movie.ogg" type="video/ogg">
   <source src="movie.WebM" type="video/webm">
   Your browser does not support the video tag.
</video>

درج باعث controls می‌شود کنترل کننده های فیلم در صفحه player نمایش داده شوند.Autoplay و muted و poster موارد دیگری است که می توان استفاده کرد. Poster درواقع cover فیلم قبل از شروع نمایش آن است. خاصیتی به نام preload می توان در این تگ استفاده کرد که مشخص می کند load ویدئو بعد از زدن دکمه play شروع شود یا همزمان با باز شدن سایت cache کردن فیلم آغاز شود.مقادیر آن:

  • None
  • Metadata - download film preview metadata
  • Auto
<video width="320" height="240" preload=”auto”>

اگر autoplay را فعال کرده باشید این خاصیت بی تاثیر خواهد بود. روش دیگر استفاده از iframe است:

<iframe width="420" height="315"
src="https://www.youtube.com/embed/tgbNymZ7vqY?autoplay=1&mute=1&loop=1&playlist=tgbNymZ7vqY&controls=0">
</iframe>

در url فوق بعد از علامت ؟ پارامترهای زیر که بینشان & درج شده است استفاده شده اند:

- Autoplay (for start playing after page load. Not work on chromium browsers) - Loop (for loop video after it ends) - Mute (for start playing muted) - Playlist (open specific playlist)

می توان پارامترهای زیر را نیز اضافه کرد:

frameborder=0 cc_lang_pref=fa cc_load_policy = 1 For Default caption

ویژگی poster از رابط HTMLVideoElement رشته‌ای است که URL تصویری را که قرار است در زمانی که هیچ داده ویدیویی در دسترس نیست، نمایش داده شود، منعکس می‌کند. اگر این ویژگی یک URL معتبر را نشان ندهد، هیچ قاب پوستری نمایش داده نخواهد شد.

iframe 4

برای نمایش یک سایت دیگر در سایتمان و در یک قاب با ابعاد مشخص:

<iframe src="https://test.com" height="200" width="300"></iframe>

برای نمایش فیلم های یوتیوب و آپارات می توان از آن استفاده کرد:

<iframe src="https://www.aparat.com/video/video/embed/videohash/zsz7161/vt/frame"     allowFullScreen="true"
    webkitallowfullscreen="true" mozallowfullscreen="true">
</iframe>

یا برای نمایش نقشه گوگل مپ:

<iframe src="https://www.google.com/maps/embed?..." width="600" height="450">
</iframe>

یا فایل pdf:

<iframe
    src="../../assets/files/sample.pdf"
    width="100%"
    height="700">
</iframe>

همچنین نمایش داشبوردها و ابزارهای تحت وب مثل تقویم و …

ویژگی زیر باعث می شود محتوی فقط زمانی بارگزاری شود که به آن نزدیک می شویم:

<iframe
    loading="lazy"
    src="video.html">
</iframe>

همه سایت ها اجازه نمی دهند داخل iFrame نمایش داده شوند مثلا کد زیر :

<iframe src="https://google.com"></iframe>

خطای Refused to display because it set X-Frame-Options… خواهد داشت. مدیر سایت به دلایل امنیتی این مجوز را رد کرده است.

در این تگ هم مثل تگ img می توان از ویژگی loading استفاده کرد.

Form Elements

فورم های HTML برای جمع آوری و ارسال اطلاعات فرم به سرور استفاده می شوند.

 <form action="/action_page.php">
   <label for="fname">First name:</label><br>
   <input type="text" id="fname" name="fname" value="John"><br>
   <label for="lname">Last name:</label><br>
   <input type="text" id="lname" name="lname" value="Doe"><br><br>
   <input type="submit" value="Submit"> 
</form>

 <form action="/action_page.php">
   <label for="fname">First name:</label><br>
   <input type="text" id="fname" name="fname" value="John"><br>
   <label for="lname">Last name:</label><br>
   <input type="text" id="lname" name="lname" value="Doe"><br><br>
   <input type="submit" value="Submit">
</form>

بین انواع متدهای HTTP در نوع Get اطلاعات در شکل Query string بعد از یک علامت سوال در address bar ارسال می شوند ولی در متد post اطلاعات قابل رویت نیستند.

https://www.w3schools.com/action_page.php?<mark>firstname=John&lastname=Doe</mark>

مثال برای متد post :

تصویر 14

تصویر 15

برای مشخص کردن بازه برای Input از نوع number می توان از مشخصه های زیر استفاده کرد:

<input type="number" min="5" max="10" value="17">

datalist

برای تهیه لیستی از آیتم های یک input استفاده می‌شود:

<form action="/action_page.php" method="get">
   <label for="browser">Choose your browser from the list:</label>
   <input list="browsers" name="browser" id="browser">
   <datalist id="browsers">
      <option value="Edge">
      <option value="Firefox">
      <option value="Chrome">
      <option value="Opera">
      <option value="Safari">
   </datalist>
   <input type="submit">
</form>

<form action="/action_page.php" method="get">
   <label for="browser">Choose your browser from the list:</label>
   <input list="browsers" name="browser" id="browser">
   <datalist id="browsers">
      <option value="Edge">
      <option value="Firefox">
      <option value="Chrome">
      <option value="Opera">
      <option value="Safari">
   </datalist>
   <input type="submit">
</form>

fieldset

برای گروه کردن تعدادی از عناصر مرتبط با هم استفاده می‌شود و دور آنها یک مستطیل رسم می کند:

<form action="/action_page.php">
   <fieldset>
      <legend>Personalia:</legend>
      <label for="fname">First name:</label>
      <input type="text" id="fname" name="fname"><br><br>
      <label for="lname">Last name:</label>
      <input type="text" id="lname" name="lname"><br><br>
      <label for="email">Email:</label>
      <input type="email" id="email" name="email"><br><br>
      <label for="birthday">Birthday:</label>
      <input type="date" id="birthday" name="birthday"><br><br>
      <input type="submit" value="Submit">
   </fieldset>
</form>

<form action="/action_page.php">
   <fieldset class="my-fieldset">
      <legend class="my-legend">Personalia:</legend>
      <label for="fname">First name:</label>
      <input type="text" id="fname" name="fname"><br><br>
      <label for="lname">Last name:</label>
      <input type="text" id="lname" name="lname"><br><br>
      <label for="email">Email:</label>
      <input type="email" id="email" name="email"><br><br>
      <label for="birthday">Birthday:</label>
      <input type="date" id="birthday" name="birthday"><br><br>
      <input type="submit" value="Submit">
   </fieldset>
</form>

details

برای درج جزییات باز شونده برای یک عنوان استفاده می‌شود.

<details>
   <summary>Epcot Center</summary>
   <p>Epcot is a theme park at Walt Disney World Resort featuring exciting attractions, international pavilions, award-winning fireworks and seasonal special events.</p>
</details>

<details>
   <summary>Epcot Center</summary>
   <p>Epcot is a theme park at Walt Disney World Resort featuring exciting attractions, international pavilions, award-winning fireworks and seasonal special events.</p>
</details>

dialog

برای ایجاد جعبه‌های گفتگو (Dialog Box) یا پنجره‌های تعاملی استفاده میشه. از سال 2013 به کمک popover می توان از بدون نیاز به جاوا اسکریپت استفاده کرد:

<button popovertarget="dialog">Show a dialog</button>
<dialog id="dialog" popover>
    <form method="form-dialog">
        <p>The background shown outside of this dialog is a backdrop.</p>
        <button popovertarget="dialog" popovertargetaction="hide" type="button">Close the dialog</button>
    </form>
</dialog>

<button popovertarget="mydialog">Show a dialog</button>
<dialog id="mydialog" popover>
    <form method="form-dialog">
        <p>The background shown outside of this dialog is a backdrop.</p>
        <button popovertarget="mydialog" popovertargetaction="hide" type="button">Close the dialog</button>
    </form>
</dialog>

نکته کد فوق این است که type=button حتما باید قید شود چون دکمه در form قرار گرفته و نوع پیش فرض آن submit است. در نتیجه بین Dialog API و Popover API تداخل عملکرد به وجود می‌آید.

این تگ به شما اجازه میده به راحتی و بدون نیاز به جاوا اسکریپت سنگین، یک دیالوگ (مثل هشدار، فرم، یا پنجره تأیید) در صفحه ایجاد کنید.

SVG

برای طراحی برداری تصاویر از این تگ استفاده می‌شود.ترسیم تعدادی خط به کمک این تگ و زیرتگ polyline انجام می‌شود.

xmlns مخفف XML NameSpace است و مشخص می‌کند که این فایل از کدام دیکشنری (مجموعه قوانین) تگ‌ها استفاده می‌کند.

circle

برای ترسیم دایره:

<svg viewBox="0 0 10 10" xmlns="http://www.w3.org/2000/svg">
  <circle cx="5" cy="5" r="3" fill="orange" />
</svg>

cx و cy مختصات مرکز دایره هستند و می توانند عدد یا درصد باشند. R شعاع دایره است.

![](../../assets/images/chapter-html/circle.svg)

مقدار ویژگی viewBox لیستی از چهار عدد است که با فاصله و/یا کاما از هم جدا شده‌اند: min-x، min-y، width و height. min-x و min-y کوچکترین مختصات X و Y را که viewBox ممکن است داشته باشد (مختصات مبدا viewBox) نشان می‌دهند و عرض و ارتفاع، اندازه viewBox را مشخص می‌کنند.

viewBox حاصل، مستطیلی در فضای کاربر است که به مرزهای نمای یک عنصر SVG (نه نمای مرورگر) نگاشت شده است. هنگامی که یک SVG حاوی ویژگی viewBox است (اغلب در ترکیب با ویژگی preserveAspectRatio)، یک transform، نمای SVG را کشیده یا تغییر اندازه می‌دهد تا با container یا والد خود مطابقت داشته باشد.

rect

برای ترسیم مستطیل:

<svg viewBox="0 0 220 100" xmlns="http://www.w3.org/2000/svg">
  <!-- Regular rectangle -->
  <rect width="100" height="100" fill="green" />


  <!-- Rounded corner rectangle -->
  <rect x="120" width="100" height="100" rx="15" fill="red" />
</svg>
![](../../assets/images/chapter-html/rect.svg)

polyline

<svg height="180" width="500">
  <polyline
    points="0,40 40,40 40,80 80,80 80,120 120,120 120,160"
    style="fill:white;stroke:red;stroke-width:4"
  />
</svg>
![](../../assets/images/chapter-html/polyline.svg)

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

خاصیت های height و width نیز ابعاد کادری که ترسیم باید در آنها انجام شود مشخص می کنند.

path

زیر تگ path نیز همراه با دستورات خاص برای رسم خط استفاده می‌شود:

M = moveto L = lineto H = horizontal lineto V = vertical lineto C = curveto S = smooth curveto Q = quadratic Bézier curve T = smooth quadratic Bézier curveto A = elliptical Arc Z = closepath 
<svg height="210" width="400"  xmlns="http://www.w3.org/2000/svg">
  <path d="M150 0 L75 200 L225 200 Z" fill="yellow"/>
</svg>
![](../../assets/images/chapter-html/path.svg)

با همین دستورات ساده می توان تصاویر پیچیده ای خلق کرد

متدهای استفاده از SVG

فایل های برداری نقاشی شده هستند.به روش های مختلفی می توان از آنها استفاده کرد:

| `<svg>`     | اطلاعات را درون یک تگ SVG قرار می دهیم   |
| ----------- | ---------------------------------------- |
| Sprite      | به کمک تگ های symbole و  use             |
| `<img>`     | فایل svg را به عنوان src به آن می دهیم   |
| `<picture>` |                                          |
| css url()   |                                          |
| `<object>`  | آدرس فایل را در خاصیت  data قرار می دهیم |
| `<iframe>`  |                                          |
| `<embed>`   |                                          |

روش sprite به این شکل است:

<svg viewBox="0 0 80 20" xmlns="http://www.w3.org/2000/svg">
    <!-- Our symbol in its own coordinate system -->
    <symbol id="myDot" width="10" height="10" viewBox="0 0 2 2">
        <circle cx="1" cy="1" r="1" />
    </symbol>


    <symbol id="myRect" viewBox="0 0 10 10" xmlns="http://www.w3.org/2000/svg">
        <rect x="0" y="0" width="100%" height="100%" />
    </symbol>
</svg>


<svg viewBox="0 0 800 200" xmlns="http://www.w3.org/2000/svg">
    <use href="./img/svgs.svg#icon-warning" x=20 fill="blue" />
</svg>

مثال برای تگ picture و embed و object و تابع url

<picture>
    <source type="image/svg+xml" srcset="./img/metalmarious_Laptop.svg">
    <img src="sun.png" alt="">
</picture>

<object type="image/svg+xml" data="./img/metalmarious_Laptop.svg">
    <!-- Fallback (تصویر جایگزین یا متن جایگزین) -->
</object>

<embed
  type="image/jpeg"
  src="/shared-assets/images/examples/flowers.jpg"
  width="250"
  height="200" />

.laptop {
    height: 200px;
    background-image: url("./img/metalmarious_Laptop.svg");
    background-repeat: no-repeat;
}

در صورتی که قصد ایجاد انیمیشن روی SVG داشته باشید هر روش نکات خاص خود را خواهد داشت.

Canvas

یک ناحیه bitmap در صفحه ایجاد می کند که می تواند مورد استفاده javascript قرار گرفته و در آن ترسیم گرافیکی انجام گیرد.

<canvas id="myCanvas" width="300" height="150"></canvas>


<script>
    const ctx = myCanvas.getContext("2d");
    ctx.fillStyle = "red";
    ctx.fillRect(20, 20, 150, 100);
</script>

<canvas id="myCanvas" width="300" height="150"></canvas>


<script>
    const ctx = myCanvas.getContext("2d");
    ctx.fillStyle = "red";
    ctx.fillRect(20, 20, 150, 100);
</script>

  1. HyperText Markup Language ↩

  2. data about data ↩

  3. search engine optimization ↩

  4. Inline Frame ↩↩

  5. Semantic ↩

  6. navigation ↩

  7. Preformatted Text ↩

  8. Monospace ↩

  9. abbreviation ↩

  10. Void Element ↩

  11. Alternative Text ↩