در این مقاله قصد داریم تا نگاهی به مفاهیم پایه HTML داشته باشیم و به عنوان اولین قدم از شروع یادگیری HTML با مفاهیم پایه و اولیه اون آشنا بشیم. توصیه میکنم قبل مطالعه این مقاله، ابتدا نگاهی به مقاله HTML و CSS چیست بیندازید تا دید بهتری نسبت به HTML و نحوه کار اون و کاربردش آشنا بشید.
HTML چیست ؟
در مقاله ای که کمی قبل تر بهتون پیشنهاد دادم ابتدا مطالعش کنید بطور کامل سوال HTML چیست را توضیح دادیم و گفتیم که:
HTML یک زبان استاندارد برای نشانه گذاری و پایه ریزی و ایجاد صفحات وب هست و از HTML استفاده میکنیم تا آیتم های مختلفی مثل متن، دکمه، جدول، فرم، عکس، ویدئو و ..... را به صفحات وب اضافه کنیم. به عبارتی دیگه از HTML استفاده میکنیم تا اسکلت بندی و اجزای تشکیل دهنده صفحه وب خودمون را تعیین و ایجاد کنیم.
چطور یک فایل HTML بسازیم و شروع به کدنویسی کنیم ؟
برای شروع به کار با HTML فقط کافیه تا یک فایل با پسوند html مثلا index.html در یک نرم افزار ویرایش کد مثل vscode ایجاد کنید و سپس این فایل را در مرورگر خود باز کنید.
ساختار کدهای HTML به چه صورت هستش ؟
کمی قبل تر و در مقاله ای که معرفی کردیم گفتیم که از HTML استفاده میکنیم تا یکسری عناصر مثل متن، دکمه، فرم، عکس، ویدئو و .... را به صفحه وب خودمون اضافه کنیم و اصطلاحا ساختار و اسکلت بندی صفحه وب را ایجاد کنیم، اما داخل یک فایل HTML چخبره ؟ کدهای اون به چه شکل هستن ؟
<!DOCTYPE html>
<html lang="fa" dir="rtl">
<head>
<title>آموزش HTML - وسپار</title>
</head>
<body>
<h1>نمایش یک عنوان</h1>
<p>نمایش یک متن ساده</p>
</body>
</html>در نمونه کد بالا داریم ساده ترین حالت ممکن یک فایل html را میبینیم که صرفا یک عنوان و یک متن ساده را در صفحه وب به نمایش در میاره. بریم در ادامه تک تک چیزهایی که در مثال بالا وجود داره را ببریم زیر ذره بین و ببینیم چی هست و چکاری را داره انجام میده:
<!DOCTYPE html>: این عبارت بیانگر این هست که این فایل یک فایل HTML5 هست.<html>: این تگ اولین و اصلی ترین و اصطلاحا تگ root یک فایل HTML هست.<head>: در داخل این تگ، اطلاعات اضافی درباره فایل HTML ما نوشته میشه، اطلاعات اضافه ای مثل عنوان صفحه.<title>: بوسیله این تگ، عنوان اصلی صفحه را تعیین میکنیم. ( این عنوان در Tab مرورگر هم نمایش داده میشه )<body>: در داخل این تگ هم تمامی عناصر و element هایی که قصد داریم در صفحه وب ما نمایش داده بشه را مینویسیم. تمامی عناصر مثل متن ها، دکمه ها، عکس ها، فرم ها و .... در داخلbodyنوشته میشن.<h1>: این تگ یک متن را به حالت عنوانی برجسته و بزرگ در صفحه وب ما نمایش میده. ما میتونیم عنوان هایی را از h1 تا h6 تعیین کنیم که هرچه عددش به یک نزدیک تر باشه بیانگر اولویت بیشتره اونه.<p>: یک عنصر متنی معمولی را به صفحه وب ما اضافه میکنه.
خروجی مثال بالا هم به شکل زیر خواهد بود:
پس تا اینجا متوجه شدیم که بوسیله HTML به مرورگر ها میگیم که چه چیزهایی را در یک صفحه وب به ما نمایش بدن، همینطور که در مثالا بالا یک تکه کد را به شما نشان دادم که شامل یک عنوان و یک متن معمولی بود و در تصویر بالا هم دیدید که خروجی اون کد در مرورگر به چه شکل شد.
بنابر این ما در یک فایل HTML عناصری را ایجاد میکنیم و در نهایت مرورگر ها این عناصر را برای ما بصورت گرافیکی به نمایش در میارن.
HTML Element چیست ؟
به تمامی عناصری که در صفحه وب بوسیله html ایجاد میکنیم، مثل متن ها، عنوان ها، دکمه ها، تصاویر و .... HTML Element گفته میشه.
املاء یا اصطلاحا سینتکس ایجاد یک HTML Element هم بصورت زیر هستش:
<tagname> Content goes here... </tagname> با املاء بالا میتونیم یک element را به صفحه وب خودمون اضافه کنیم. element ها معمولا و اکثرا بصورت بالا نوشته میشن، یعنی در ابتدا یک تگ باز بصورت <tagname> مینویسیم و در ادامه اون تگ را بصورت </tagname> میبندیم و محتوای مدنظر را هم در بین تگ های باز و بسته قرار میدیم.
دقیقا مثل زیر که یک element متنی را اضافه کردیم:
<p>نمایش یک متن ساده</p>بعضی از element های html برخلاف املاء بالا هستند، یعنی محتوایی در بین تگ شروع و تگ پایان اونها وجود نداره، مثل نمونه های زیر:
<br/>
<hr/>در مثال بالا، تگ br یک خط فاصله میندازه و تگ hr هم یک خط افقی برای ما در صفحه رسم میکنه.
در جدول زیر میتونید لیست برخی از رایج ترین عناصر و تگ های html را ببینید:
| تگ باز | تگ بسته | کاربرد |
|---|---|---|
| <h1> | </h1> | نمایش یک عنوان برجسته و بزرگ |
| <p> | </p> | نمایش یک متن معمولی |
| <strong> | </strong> | نمایش یک متن در حالت برجسته و پررنگ |
| <a> | </a> | ایجاد یک لینک به صفحه ای دیگر |
| <button> | </button> | ایجاد یک دکمه |
| <div> | </div> | ایجاد یک بخش/فضا/section |
| <input> | ندارد | ایجاد یک فیلد برای وارد کردن اطلاعات |
| <img> | ندارد | افزودن یک تصویر در صفحه وب |
| <span> | </span> | ایجاد یک عنصر متنی معمولی |
| <blockquote> | </blockquote> | نمایش یک متن در حالت نقل قول |
HTML Attributes چیست ؟
ما به تگ ها یا همان HTML Element ها میتونیم یکسری چیزهای دیگه با نام Attributes اضافه کنیم. این Attribute ها گاهی اوقات عملکرد اون element را تکمیل میکنه، گاهی اوقات یکسری چیزهای اضافه ای را بهش اضافه میکنه و گاهی اوقات هم کنترل بیشتری برروی اون element را برای ما بوجود میاره.
به عنوان مثال ما بوسیله تگ <img> قصد داریم تا یک تصویر را به صفحه وب خودمون اضافه کنیم. این تگ به تنهایی عکسی را به صفحه وب اضافه نمیکنه و نیازه تا به نحوی آدرس عکس مدنظر را به این تگ بدیم تا مرورگر تصویر را شناسایی و در صفحه وب به نمایش در بیاره.
در اینجا عملکرد تگ <img> به تنهایی ناقص هست، بنابر این بوسیله یک Attribute با نام src میاییم این عملکرد را تکمیل میکنیم و آدرس تصویر مدنظر را به این تگ به شکل زیر اضافه میکنیم:
<img src="/images/flower.png">املاء نوشتن این Attribute ها هم به شکل بالا هستش. یعنی پس از تگ آغازین و با یک فاصله، نام attribute مدنظر را مینویسیم و مقدار دلخواه (مقداری که متناسب با اون Attribute هست) را بهش میدیم.
مثال بالا فقط یک نمونه بود و ما Attribute های خیلی زیادی داریم که هر کدوم از اونها کاربرد خاص خودشون را دارن و برخی از این Attribute ها هم مختص به یکسری element های خاص هستند.
در این مقاله در همین حد آشنایی با html و Element ها و Attribute ها کافی هست و ما در مقالات آینده و همچنین در دوره آموزش HTML و CSS بطور کامل این موارد را بررسی خواهیم کرد