HTML مخفف زبان نشانه گذاری ابرمتن است و اسناد با استفاده از این زبان صفحات وب را ایجاد می کنند. هر وب سایت از این استفاده می کند ، بنابراین درک نحوه عملکرد آن بسیار مهم است.
در این مقاله آموزشی ، همه آنچه را که باید در مورد HTML بدانید یاد خواهید گرفت.
بیانیه <! DOCTYPE> چیست؟
اعلان <! DOCTYPE> اولین خط کد در هر فایل HTML است. به مرورگرهای وب می گوید که کدام نسخه HTML در یک فایل خاص قرار دارد.
هر نسخه از HTML منحصر به فرد است و قوانین خاص خود را دارد. HTML 5 آخرین نسخه این زبان است. این نسخه توصیه شده برای توسعه دهندگان ، و همچنین ساده ترین نسخه برای اعلام است. برای اعلام سند HTML 5 ، کافی است عنصر HTML را به اعلان <! DOCTYPE> اضافه کنید .
در زیر می توانید نمونه ای را مشاهده کنید:
<!DOCTYPE html>برچسب <head> چیست؟
در هر سند HTML ، اعلان <! DOCTYPE> با برچسب <html> دنبال می شود. این تگ ریشه سند را مشخص می کند و تگ های <head> و <body> را در بر می گیرد .
برچسب <head> اولین بخش است و شامل برچسب <title> و <meta> است . با این حال ، در مواردی که توسعه دهنده استفاده از CSS داخلی را انتخاب می کند ، تگ <style> نیز در داخل تگ <head> قرار می گیرد.
فقط یک برچسب <title> در یک سند HTML وجود دارد . برچسب <title> شامل عنوان یک صفحه وب است و این اطلاعات در قسمت برگه مرورگر وب ظاهر می شود.
در زیر می توانید نمونه برچسب عنوان را مشاهده کنید:
<title>An Introduction to HTML</title>یک فایل HTML که دارای برچسب <title> در بالا است در قسمت برگه مرورگرها به عنوان "مقدمه ای بر HTML" نشان داده می شود.
برچسب <meta> محتوای یک صفحه وب را توصیف می کند و به طور کلی دارای نام و ویژگی محتوا است. سه مورد از محبوب ترین برچسب های <meta> عبارتند از توضیحات ، کلمه کلیدی و نمای دید.
در زیر یک مثال برچسب <meta> توضیح داده شده است :
<mete name="description" content="This is a simple page, which demonstrates the basics of HTML">
ویژگی محتوای برچسب <meta> حاوی توضیحات صفحه وب شما است. این داده هایی است که در نتیجه موتور جستجو نمایش داده می شود و به بازدیدکنندگان آینده نشان می دهد که در وب سایت چه انتظاری دارند.
در زیر کلمه کلیدی مثال <meta> tag است:
<meta name="keywords" content="HTML, web development, etc">
برچسب کلمات کلیدی <meta> شامل کلمات یا عباراتی است که به وب سایت شما مرتبط است. همانطور که در مثال بالا مشاهده می کنید ، هر کلمه یا عبارت جدیدی که به یک ویژگی محتوای کلمه کلیدی اختصاص داده می شود ، با کاما جدا می شود.
در زیر نمایی از برچسب <meta> تگ مثال است:
<meta name="viewport" content="width=device-width, initial-scale=1.0">
برچسب <meta> viewport با ایجاد پاسخگویی صفحه وب به انواع مختلف دستگاه ، به ایجاد طرح های پاسخگو کمک می کند.
برچسب <body> چیست؟
تگ <body> دومین بخش اصلی در برچسب ریشه <html> است. تگ <body> شامل هر عنصری است که در یک صفحه وب نمایش داده می شود.
عناصر دارای برچسب <body> به عنوان عناصر درون خطی یا بلوک طبقه بندی می شوند. اگر می خواهید یک صفحه اصلی تقلب ضروریات HTML کامل را مشاهده کنید ، ما یکی را جمع آوری کرده ایم تا بتوانید همه چیز را راحت تر درک کنید.
عناصر بلوک چیست؟
عناصر بلوک همیشه از یک خط جدید شروع می شوند و تمام عرض خطی را که در آن قرار دارند اشغال می کنند.
برخی از عناصر بلوک مورد استفاده شما عبارتند از:
- برچسب های عنوان
- تگ <p>
- برچسب <div>
- تگ <ol>
- برچسب <ul>
- تگ <li>
از عناصر بلوک برای تقسیم متن بر روی وب سایت در قالب منسجم و قابل هضم استفاده می شود.
برچسب های عنوان چیست؟
شش نوع برچسب عنوان وجود دارد: <h1> ، <h2> ، <h3> ، <h4> ، <h5> و <h6> . تگ <h1> بزرگترین سرفصل را تولید می کند ، <h6> کوچکترین سرفصل را تولید می کند و همه سرفصل های دیگر در موقعیتی بین این دو قرار می گیرند (بسته به مقدار عدد آن).
برچسب های عنوان در عنوان های یک صفحه وب استفاده می شود. استفاده از برچسب عنوان خاص بستگی به موقعیت عنوان در صفحه وب دارد. به عنوان مثال ، برچسب <h1> در اولین عنوان یک صفحه وب استفاده می شود و یک صفحه وب فقط از یک عنصر h1 استفاده می کند (هر چند ممکن است چندین عنصر h2 ، h3 و h4 داشته باشد).
در زیر می توانید نمونه ای از برچسب <h1> را مشاهده کنید:
<h1> Learning the Basics of HTML </h1>
برچسب <p> چیست؟
<p> یکی دیگر از عناصر بلوک است که در بدنه صفحه وب استفاده می شود و پاراگراف ایجاد می کند. در زیر نمونه ای از این برچسب استفاده می شود:
<p>
Lorem ipsum dolor sit amet consectetur adipisicing elit. Velit aliquid a cupiditate
inventore, reiciendis earum illum mollitia dignissimos officia,culpa cumque dolorem
quidem atque maiores, ad tempora quia. Repudiandae, delectus!
</p>
برچسب <div> چیست؟
تگ <div> نشان دهنده یک تقسیم است. از آن برای ایجاد ظروف برای گروه های دیگر عناصر HTML به منظور ظاهر سازی یا کاربردی استفاده می شود.
به عنوان مثال ، اگر با یک شبکه کار می کنید ، باید همه عناصر شبکه را در یک ظرف قرار دهید. تگ <div> چیزی است که برای ایجاد محتوا باید از آن استفاده کنید.
برچسب های <ol> و <ul> چیست؟
از تگ های <ol> و <ul> برای ایجاد لیست در HTML استفاده می شود . تگ <ol> لیست های مرتب شده ایجاد می کند ، در حالی که تگ <ul> لیست های نامرتبی ایجاد می کند. با این حال ، هر دو برچسب از تگ <li> استفاده می کنند ، که موارد لیست را ایجاد می کند.
با استفاده از تگ <ol>
یک لیست مرتب به طور پیش فرض از اعداد استفاده می کند. با این حال ، تگ <ol> دارای ویژگی type است که می توانید به طور واضح عنصری را که می خواهید برای سفارش لیست خود استفاده کنید ، بیان کنید. می توانید لیستی را با اعداد بزرگ یا کوچک رومی ، حروف بزرگ یا کوچک یا اعداد سفارش دهید.
در زیر می توانید نمونه ای را مشاهده کنید:
<ol type="a">
<li>First item</li>
<li>Second item</li>
<li>Third item</li>
</ol>
کد بالا با استفاده از حروف کوچک یک لیست مرتب ایجاد می کند.
با استفاده از تگ <ul>
برچسب <ul> همچنین دارای ویژگی type است که یکی از چندین مقدار را می گیرد: دیسک ، دایره یا مربع. با این حال ، دیسک شاخص پیش فرض یک مورد لیست جدید در یک لیست نامرتب است.
در زیر نمونه ای از آنچه لیست نامرتب در قالب کد می خواهد را مشاهده می کنید:
<ul>
<li>First item</li>
<li>Second item</li>
<li>Third item</li>
</ul>
عناصر درون خطی چیست؟
یک عنصر درون خطی در یک خط جدید شروع نمی شود. در موقعیت بعدی موجود ، که ممکن است در خط جدید باشد یا نباشد ، شروع می شود و فقط از عرض لازم به عنوان مورد نیاز استفاده می کند. برخی از عناصر داخلی که به احتمال زیاد از آنها استفاده می کنید عبارتند از:
- برچسب <span>
- برچسب <a>
- برچسب <img>
- برچسب <label>
- برچسب <button>
ما در زیر هر یک از این موارد را به طور عمیق تر بحث خواهیم کرد.
برچسب <span> چیست؟
تگ <span> برای اهداف یک ظاهر طراحی داخلی استفاده می شود. به عنوان مثال ، اگر می خواهید سبک یک کلمه یا عبارت خاص را در یک پاراگراف تغییر دهید ، می توانید از تگ <span> استفاده کنید .
در زیر نمونه ای از این برچسب آمده است:
<p>
Lorem ipsum dolor sit amet consectetur adipisicing elit. Velit aliquid a cupiditate
inventore, reiciendis earum illum <span id="important">dignissimos officia</span> ,culpa cumque dolorem
quidem atque maiores, ad tempora quia. Repudiandae, delectus!
</p>
استفاده از تگ <span> در مثال بالا این اطمینان را می دهد که دو کلمه درون تگ <span> اکنون می توانند سبک منحصر به فردی داشته باشند.
برچسب <a> چیست؟
برچسب <a> برای ایجاد پیوند در یک صفحه وب استفاده می شود. برچسب <a> به توسعه دهنده اجازه می دهد تا به یک وب سایت متفاوت (پیوند خارجی) یا یک صفحه وب دیگر در همان وب سایت (پیوند داخلی) پیوند دهد. برچسب <a> دو ویژگی مهم دارد – href و target.
ویژگی href ضروری است ، زیرا مقدار محل پیوند را ذخیره می کند. و ویژگی هدف ضروری است زیرا به کاربر اجازه می دهد پیوند را در یک برگه جدید باز کند. بدون ویژگی هدف ، پیوندی در برگه کنونی باز می شود و اگر پیوند خارجی باشد ، ترافیک را از وب سایت شما دور می کند.
برای مشاهده نمونه ای از برچسب <a> در عمل به موارد زیر مراجعه کنید:
<a href="http://google.com" target="_blank">Click this link to Google</a>
یادگیری HTML برای برنامه نویسان ضروری است
یادگیری HTML برای همه برنامه نویسان بسیار مهم است و باید اصول اولیه مطالعات شما را تشکیل دهد. با این حال ، خوشبختانه ، این نیز خیلی پیچیده نیست.
با مطالعه این راهنما ، باید همه چیز را برای شروع بهتر قالب بندی وب سایت ها داشته باشید.
