قالب بندي صفحات HTML
در ادامه مباحث آموزشي HTML قبل، مي خواهيم ببينيم چه آيتم هايي در format دادن و قالب بندي صفحات HTML مورد نياز ما هستند.
اگر با پردازشگر word كار مي كنيد بايد با بولد كردن (bold)، ايتاليك كردن و آندرلاين كردن متن آشنا باشيد. اين ها فقط سه گزينه از ده گزينه موجود براي چگونگي ظاهر شدن متن در HTML و XHTML مي باشند.
بولد كردن متن
هرچيزي كه بين عناصر< b>...< /b> قرار مي گيرد به صورت بولد ظاهر مي شود، مانند مثال زير:
مثال:
نمونه يك
Bold Text Example
The following word uses a
bold
typeface.
ايتاليك كردن متن
هر چيزي كه بين عناصر< i>...< /i>قرار بگيرد به صورت ايتاليك ظاهر مي شود، مانند مثال زير:
مثال:
نمونه دو
The following word uses a
italicized typeface.
آندرلاين كردن متن
هر چيزي كه بين عناصر < u>...< /u> قرار بگيرد به صورت آندرلاين ظاهر مي شود، مانند مثال زير:
نمونه سه
The following word uses a
underlined
typeface.
خط كشيدن روي متن
هر چيزي كه بين گزينه هاي < strike>...< /strike> قرار بگيرد، با يك strikethrough نمايش داده مي شود كه خط باريكي مي باشد كه روي متن كشيده مي شود، همانطور كه در مثال زير مشاهده مي كنيد:
نمونه چهار
The following word uses a strikethrough typeface.
فونت monospaced
محتواي عنصر < tt>...< /tt> به فونت monospaced نوشته مي شود. اكثر فونت ها با عنوان فونت هايي با عرض متغير شناخته شده اند، زيرا حروف مختلف داراي عرضهاي مختلف هستند ( به عنوان مثال حرف m عريض تر از حرف I مي باشد.) به هرحال در فونت monospaced تمام حروف داراي عرض يكسان مي باشند.
مثال:
نمونه پنج
The following word uses a monospaced typeface.
</body>
متن superscript ( چاپ شده در بالا)
محتواي عنصر < sup>...< /sup> در بالا نوشته مي شود، فونت استفاده شده براي آن همان فونت كاراكترهاي اطراف آن مي باشد، اما به اندازه ي نصف يك كاراكتر بالاتر از ديگر كاراكترها نمايش داده مي شود.
مثال:
نمونه شش
The following word uses a superscript typeface.
متن subscript (چاپ شده در زير)
محتواي عنصر< sub>...< /sub> در زير نوشته مي شود. اندازه ي فونت استفاده شده براي آن به اندازه ي فونت كاراكترهاي اطراف مي باشد اما به اندازه ي نصف ارتفاع يك كاراكتر زير كاراكترهاي ديگر نمايش داده مي شود.
مثال:
نمونه هفت
The following word uses a subscript typeface.
متن مندرج
هرچيزي كه بين عنصر ... قرار بگيرد به عنوان متن مندرج نمايش داده مي شود.
مثال:
نمونه هشت
I want to drink cola wine
متن حذف شده
هر چيزي كه بين عنصر < del>...< /del> ظاهر شود با عنوان يك متن حذف شده نمايش داده مي شود.
مثال:
نمونه نه
I want to drink cola wine
متن بزرگتر
محتواي عنصر < big>...< /big> اندازه فونت را بزرگتر از متن اطراف نشان مي دهد. مانند مثال زير:
مثال:
نمونه ده
The following word uses a big typeface.
متن كوچكتر
محتواي عنصر < small>...< /small> متن را يك سايز كوچكتر از متن اطراف آن نشان مي دهد، مانند مثال زير:
مثال:
نمونه يازده
The following word uses a small typeface.
گروه بندي محتوا
عناصر< div>و < span> به شما اجازه مي دهند تا براي ايجاد بخش ها و يا زيرمجموعه هاي يك صفحه، عناصر زيادي را با يكديگر گروه بندي كنيد.
براي مثال ممكن است تمايل داشته باشيد كه تمام پاورقي ها را در يك صفحه در داخل عنصر < div> قرار دهيد تا نشان دهيد كه تمام عناصر موجود در آن عنصر مربوط به پاورقي مي باشند. پس از آن ممكن است طرحي را به عنصر< div> ضميمه كنيد، طوريكه با استفاده از مجموعه اي از قوانين طراحي ظاهر شوند.
مثال:
نمونه دوازده
Content Articles
Actual content goes here.....
از طرف ديگر عنصر < span> فقط مي تواند براي گروه بندي داخل خطي عناصر استفاده شود. بنابراين اگر بخشي از جمله يا پاراگراف را داريد كه مي خواهيد با هم در يك گروه قرار دهيد، مي توانيد از عنصر < span> مانند زير استفاده كنيد:
مثال:
نمونه سيزده
This is the example of span tag and the
div tag
alongwith CSS
اين برچسب ها عموما با CSS استفاده مي شوند تا به شما اجازه دهند طرحي را به بخشي ازيك صفحه ضميمه كنيد.