سلام!

با قسمت دوم از مجموعه آموزش HTML5 ، از سری آموزش های جذاب ALT + TAB با شما هستیم. در این قسمت با بیان مثال های پایه به بررسی تگ های اصلی این زبان می پردازیم؛ و در ادامه به بررسی کلی المان های HTML می پردازیم.

HTML

مثال های پایه HTML

اگر در این مثال ها از تگ هایی استفاده شده که هنوز آموزش نداده ایم، اصلا نگران نشید؛ در بخش های بعد کم کم همه تگ ها را یاد می گیریم!

فایل های HTML

همه ی فایل های HTML باید با مشخص کردن نوع فایل <DOCTYPE HTML!> شروع شوند.

خود فایل HTML با تگ <html> آغاز و با تگ <html/> به پایان می رسد.

قسمت قابل مشاهده فایل HTML بین دو‌ تگ <body> و <body/> قرار می گیرد.

همانطور که در قسمت قبل گفتیم، برای کیفیت بهتر آموزش و یادگیری شما، در این دوره از ادیتور قدرتمند Codepen استفاده می کنیم.

(برای مشاهده نتیجه کدها بر روی Result کلیک کنید)

عناوین در HTML

عناوین در HTML با تگ‌های <h1> تا <h6> تعریف می شوند. به این ترتیب که تگ های <h1> مهم ترین و تگ های <h6> کم ارزش ترین عناوین را مشخص می کنند.

پاراگراف ها در HTML

پاراگراف ها در HTML با تگ <p> معرفی می شوند.

لینک ها در HTML

لینک ها (پیوند ها) در HTML با تگ <a> معرفی می شوند.

منبع لینک در href attribute مشخص می گردد.

attribute ها برای ارائه ی اطلاعات اضافی درباره ی المان های HTML استفاده می شوند.

تصاویر در HTML

تصاویر در HTML با تگ <img> معرفی می شوند.

منبع فایل (src) ، متن جایگزین (alt) ، طول و عرض به عنوان attribute ارائه می شوند.

المان های HTML

 یک المان HTML عموما دارای یک تگ آغازین (Start Tag) و یک تگ پایان (End Tag) و محتوا در بین این دو تگ است.

<tagname>محتوا اینجا قرار می گیرد...</tagname>

 المان HTML شامل همه ی آن چه میان تگ آغاز تا پایان است، می شود.

<p>اولین پاراگراف من</p>

HTML

نکته: المان های HTML بدون محتوا، المان های خالی (Empty Element) نامیده می شوند.  Empty Element ها، تگ پایان ندارند؛ مانند المان <br> که  نشان دهنده Line Break است ؛ یعنی محتوای بعد از این تگ به خط بعدی منتقل می گردد.

المان های HTML  تو در تو

المان های HTML می توانند به صورت تو در تو به کار روند؛ یعنی هر المان خود شامل المان های دیگری باشد.

همه ی document های HTML شامل المان های تو در تو هستند.

این مثال دربردارنده ی 4 المان HTML است :

تشریح مثال

المان <html> همه ی document  را معرفی می کند؛ که دارای تگ آغازین به صورت <html> و یک تگ پایانی به صورت </html> است.

تگ دربرگیرنده محتوا، المان <body> است.

<html>
<body>

<h1>اولین عنوان من</h1>
<p>اولین پاراگراف من</p>

</body>
</html>


المان <body> پیکره فایل را مشخص می کند؛ که داری تگ‌ آغازینی به صورت <body> و‌ تگ پایانی به صورت <body/> است.
محتوای تگ <body>، المان های HTML دیگری یعنی <h1> و <p> است.
تگ <h1> بیانگر تیتر است؛ که داری تگ‌ آغازین به صورت <h1> و‌ تگ پایانی به صورت <h1/> است.
محتوای تگ <p> عبارتست از: اولین پاراگراف من .

تگ پایان فراموش نشود!

بعضی از المان های HTML حتی اگر end tag فراموش گردد، صحیح نمایش داده می شوند:

مثال بالا در همه ی مرورگرها صحیح نمایش داده می شود؛ چرا که استفاده از closing tag در اینجا اختیاری است؛ اما هیچ وقت روی این موضوع نمی توان حساب کرد به این خاطر که گاهی ممکن است باعث به وجود آمدن اشکالات غیرقابل پیش بینی شود!

ما در ALT+TAB پیشنهاد می کنیم که همیشه از تگ پایان نیز استفاده شود!

المان های HTML بدون محتوا

المان های HTML بدون محتوا، empty elements نامیده می شوند.
تگ‌<br> یک empty element است که closing tag ندارد. empty element ها را می توان در همان start tag بست؛ مانند: </br>
در HTML5 نیازی نیست که empty element ها بسته شوند؛ اما اگر بخواهیم محکم کاری کنیم یا اگر نیاز داشته باشیم که document ما با XML قابل خواندن باشد، باید همه ی تگ های HTML را ببندیم.

استفاده از حروف کوچک برای اسامی تگ ها

تگ های HTML حساس به حروف کوچک و بزرگ نیستند؛ یعنی برای مثال تفاوتی بین تگ های <P> و <p> نیست و‌ معادل یکدیگرند.
استاندارد HTML5 الزامی برای استفاده کردن از حروف کوچک در نام تگ ها ندارد؛ اما W3C پیشنهاد می کند از حروف کوچک استفاده شود چرا که برای document هایی مثلا از نوع XHTML ما نیاز داریم از حروف کوچک استفاده کنیم.

در ALT+TAB ما همیشه از حروف کوچک برای نام تگ ها استفاده می کنیم.

ادامه دارد...