HTML پیشرفته

شاید نام این درس را باید می‌گذاشتیم: گسترش فهم پیشرفته از اصول HTML. قرار نیست ترفندهای پیشرفته یا تگ‌های جدید یاد بگیریم، داریم کاری می‌کنیم که به مراتب فایده بیشتری دارد: آشنایی با اصول اولیه تفاوت آدم حرفه‌ای با آماتور‌ها است.

مقدمه HTML پیشرفته

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

تفاوت بین تگ‌های (برچسب‌های) منمنطقی و فیزیکی یکی از مفاهیم اساسی کلیدی در HTML است که، زمانی که فهمیده شوند، می‌تواند تاثیر عظیمی بر نحوه انجام کارها توسط طراحان وب بگذارد.

تگ های درون‌خطی منطقی در مقابل تگ های درون‌خطی فیزیکی
تگ‌های منطقی
در HTML دو نوع تگ‌ منطقی و فیزیکی وجود دارد. تگ‌های منطقی به منظور توصیف (برای مرورگر) معنای متن محصور شده طراحی شده‌اند. نمونه‌ای از یک تگ منطقی تگ‌ <strong> </strong> است. با قرار دادن متن بین این دو تگ به مرورگر می‌گویید که این متن از اهمیت بیشتری برخوردار است.
به طور پیش فرض اکثر مرورگرها متن موجود در بین تگ‌های <strong> و </strong> را با حروف درشت نشان می دهند اما نکته‌ای که باید از این موضوع برداشت کنیم این است که تگ strong نشان از اهمیت متن داخل آن دارد. این موضوع حتی بر روی موتورهای جستجو مانند گوگل هم تأثیر می‌گذارد چرا که آن‌ها دنبال چنین تگ‌هایی می‌گردند تا بفهمند صفحه مورد نظر درباره چه موضوعی است.
تگ‌ها منطقی بسیاری وجود دارد و برخی از آن‌ها عبارتند از:
<strong>: همان‌طور که در بالا اشاره شد.
<em>: (emphasis) – معمولا به صورت مورب ارائه می شوند (توسط مرورگر نشان داده می‌شود).
<span>: یک چارچوب خطی خنثی است. – در زیر توضیح مربوط به مزیت آن را بخوانید.
<div> : یک عنصر قالب خنثی است. – در زیر توضیح مربوط به مزیت آن را بخوانید.
تگ‌ها منطقی، همان‌طور که در بالا ذکر شد، حالت پیش فرضی دارند که در آن مرورگر (مانند اینترنت اکسپلورر یا اپرا) آن‌ها را ارائه می‌دهد. اما می‌توان فهمید که برای تعیین سبک و سیاق نمایش آن‌ها یا به عبارت دیگر «چهره»شان، باید از CSS استفاده کرد.
تگ‌های فیزیکی
از سوی دیگر تگ‌ها فیزیکی برای چگونگی نمایش متنی که در بر گرفته اند دستورالعملی خاص فراهم می‌کند. نمونه‌هایی از تگ‌های فیزیکی عبارتند از:
<b>: باعث می‌شود حروف متن پر‌رنگ (بولد) شود.
<big>: باعث می‌شود قلم (فونت) متن معمولاً از متن اطرافش یک درجه بزرگتر شود.
<font> : برای اعمال یک قلم (مانند Arial یا Helvetica) و تعیین رنگ قلم مورد استفاده قرار می‌گیرد.
<i>: باعث می‌شود متن کجراه شود.
تگ‌ها فیزیکی ساده‌تر هستند. تگ <i> باعث می‌شود متن کجراه بشود، <b> متن را پر رنگ (بولد) می‌کند، و <font> به منظور تعیین نوع و رنگ قلم برای متن به کار می رود.
چرا این تگ یا آن تگ به کار می‌رود؟
مخلص کلام این‌که تگ‌ها فیزیکی برای اضافه کردن سبک به صفحات HTML اختراع شدند چون هنوز از صفحات شیوه‌نامه خبری نبود، هر چند مقصور اصلی از HTML حذف تگ‌های فیزیکی بود. چرا؟ خب، به خاطر این‌که تگ‌های فیزیکی شلوغ پلوغ و خسته کننده بوده و بیش از منفعتشان دردسر درست می‌کنند (در اغلب مواقع).
به جای استفاده از تگ‌های فیزیکی بهتر است برای سبک و سیاق دادن به صفحاتHTML ، از صفحات شیوه نامه‌ استفاده کنید (که شیوه نامه‌های آبشاری یا CSSهم نامیده می‌شود).
تگ های چارچوبی در برابر درون‌خطی
مفهوم «درون‌خطی» در شرح دسته بندی تگ‌ها چیست؟
درHTML، تگ‌ها یا عناصری «درون‌خطی»‌اند یا چارچوبی.

عناصر چارچوبی HTML پیشرفته

عناصر چارچوبی در «جعبه» مجازی خود قرار داشته و همیشه با یک سر‌خط (مثل ضربه زدن روی کلید «اینتر» پس از تایپ مقداری متن) به پایان می‌رسند. به عبارت دیگر، یک عنصر چارچوبی جریان متن و عناصر دیگر را به منظور ایجاد جعبه‌ یا چارچوبی مجازی به دور خود می‌شکند.
عناصر HTML درون‌خطی
تگ‌های درون‌خطی (عناصر) به بخشی از «جریان» متنی که درون آن قرار دارند تبدیل می‌شوند و هیچ جعبه‌ای در اطراف آن‌ها نبوده و سرخط آمدن هم ندارند.
مثال تگ چارچوبی تگ <p> (پاراگراف) و مثال تگ های درون‌خطی تگ <b> (پر‌رنگ) است. تگ‌ها را در صفحه‌تان به کار ببریدآن‌گاه خواهید دید در صفحه‌تان چه اتفاقی می‌افتد وقتی که از تگ <p> استفاده می‌کنید یا وقتی از تگ <b> استفاده کرده‌اید؛ وقتی همه چیز را به چشم خودتان ببینید مطالب دستگیرتان خواهد شد.

بالاخره که چی ؟
باید حواستان باشد! همین که فرقشان را فهمیدید (اگر کمی به خودتان زحمت بدهید فهمیدنش دشوار نیست) و وقتی درک کنید که می‌توان از CSS برای تبدیل تگ‌های چارچوبی به تگ‌های درون‌خطی و بالعکس استفاده کرد، قدرتی فوق العاده برای طراحی و صفحه‌آرایی صفحاتتان در وجود خود کشف خواهید کرد.

منبع: HTML پیشرفته