شاید نام این درس را بايد مي‌گذاشتيم: گسترش فهم پيشرفته از اصول 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 پیشرفته
هیچ نظری موجود نیست:
ارسال یک نظر