آموزش طراحي سايت- آموزش تگ هاي اصلي در Html
در اين سري از مقالات آموزش html مي خواهيم به بيان تگ در html بپردازيم.
برچسب هاي تيتر:
هر داكيومنت با يك تيتر آغاز مي شود. شما مي توانيد از اندازه هاي مختلف براي تيترهاي خود استفاده كنيد. HTML داراي شش سطح مي باشد كه از< h1>, < h2>, < h3>, < h4>, < h5> و < h6> عناصر استفاده مي كند. در هنگام نمايش هر تيتر مرور گر يك خط قبل و يك خط بعد از تيتر اضافه مي كند.
مثال:
نمونه يك
<!DOCTYPE html><html><head> <title>Heading Example</title></head><body> <h1>This is heading 1</h1> <h2>This is heading 2 </h2> <h3>This is heading 3</h3> <h4>This is heading 4</h4> <h5>This is heading 5</h5> <h6>This is heading 6</h6>
</body></html>
برچسب پاراگراف:
برچسب < p> به روش طراحي متن شما در پاراگراف هاي مختلف اشاره دارد. هر پاراگراف متن بايد بين برچسب بازكننده ي < p> وبستن < /p> قرار بگيرد، همانطور كه در مثال زير مشاهده مي كنيد:
نمونه دو
<!DOCTYPE html><html><head> <title>Paragraph Example</title></head><body> <p>Here is a first paragraph of text.</p> <p>Here is a second paragraph of text.</p> <p>Here is a third paragraph of text.</p></body></html>
برچسب شكست لينك
هرزمان كه شما از < br /> عنصر استفاده كنيد، هر چيزي كه آن را دنبال مي كند از خط بعد شروع خواهد شد. اين برچسب نمونه اي از يك عنصرempty مي باشد، زماني كه لازم نيست برچسبي را باز كنيد يا ببنديد چرا كه چيزي براي رفتن بين آنها وجود ندارد.
در بچسب < br />، يك فضاي خالي بين كااكترهاي br و اسلش جلوي آن وجود دارد. اگر شما اين فضا را حذف كنيد، مرورگرهاي قديمي تر در اجراي خط شكست مشكل خواهند داشت، در حاليكه اگر اسلش را حذف كنيد برچسب < br> باقيمانده در HTML معتبر نمي باشد.مثال:
نمونه سه
<!DOCTYPE html><html><head> <title>Line Break Example</title></head><body> <p>Hello<br /> You delivered your assignment ontime.<br /> Thanks <br /> Mahnaz </p></body></html>
مركزگذاري متن
مي توانيد با استفاده از برچسب < center> مي توانيد هر محتوايي را در مركز صفحه يا در مركز هر سلول از يك جدول قرار دهيد.
مثال:
نمونه چهار
<!DOCTYPE html><html><head> <title>Centring Content Example4 </title></head><body> <p>This text is not in the center. </p> <center> <p>This text is in the center.</p> </center></body></html>
خطوط افقي
خطوط افقي براي بخش هاي شكست بصري يك داكيومنت استفاده مي شوند. برچسب < hr> خطي از موقعيت كنوني داكيومنت به حاشيه ي سمت راست ايجاد كرده و خط را طبق آن مي شكند.
به عنوان مثال ممكن است تمايل داشته باشيد بين دو پاراگراف خطي قرار دهيد، همانطور كه در مثال زير ارائه شده است:
مثال:
نمونه پنج
<!DOCTYPE html><html><head> <title>Horizontal Line Example5 </title></head><body> <p>This is paragraph one and should be on top</p> <hr /> <p>This is paragraph two and should be at bottom</p>
</body></html>
و باز برچسب< hr /> مثالي از Empty مي باشد كه نيازي به باز كردن يا بستن برچسب نداريد زيرا چيزي براي رفتن بين آنها وجود ندارد.
در عنصر < hr /> يك فضاي خالي بين كاراكترهاي hr و اسلش مقابل آن وجود دارد. اگر اين فضا را حذف كنيد مرورگرهاي قديمي تر در اجراي خط افقي مشكل خواهند داشت. در حاليكه اگر اسلش مقابل آن را حذف كنيد عنصر باقيمانده < hr> مي باشد كه در HTML فاقد اعتبار مي باشد.
حفظ طراحي
گاهي اوقات تمايل داريد كه متن فرمت دقيق خود در HTML را دنبال كند، در اين موارد مي توانيد از برچسب پريفرمت < pre> استفاده كنيد.
هر متن بين برچسب باز كننده ي < pre> و برچسب بستن < /pre> طراحي متن منبع را حفظ خواهد كرد.
مثال:
نمونه شش
<!DOCTYPE html><html><head><title>Preserve Formatting Example6</title></head><body><pre>function testFunction( strText ){alert (strText)}</pre></body></html>
سعي كنيد از همان كد بدون نگهداري آن بين برچسب هاي < pre>...< /pre> استفاده كنيد.
فضاهاي غيرشكست:
فرض كنيد مي خواهيد از عبارت "12 Angry Men." استفاده كنيد. در اينجا از مرورگر نمي خواهيد عبارت را بين دو خط به صورت 12 Angry و Men بشكند.
An example of this technique appears in the movie "12 Angry Men."
در مواردي كه نمي خواهيد مرورگر متن را بشكند بايد به جاي يك فضاي عادي از فضاي غير شكست استفاده كنيد. براي مثال وقتي "12 Angry Men" را در يك پاراگراف كدگذاري مي كنيد بايد از كدي مانند زير استفاده كنيد:
مثال:
نمونه هفت
<!DOCTYPE html><html><head> <title>Nonbreaking Spaces Example7</title></head><body> <p>An example of this technique appears in the movie "12 Angry Men."</p></body></html>
