ساختار داکیومنت HTML
سلام خدمت همه ی شما همراهان عزیز وبسایت لرن پارسی در این قسمت به یادگیری و آشنایی با ساختار داکیومنت HTML میپردازیم. توجه کنید که قبل از دیدن این قسمت شما حتما جلسه ی قبل را از طریق این لینک مطالعه فرمایید. در ادامه ی این جلسه با ما همراه باشید تا با ساختار داکیومنت HTML آشنا شویم.
یک نمونه از داکیومت HTML دارای ساختار زیر خواهد بود
<html> <head> Document header related tags </head> <body> Document body related tags </body> </html>
تمام برچسب های مربوط به بدنه تیتر را در بخش های بعدی مطالعه خواهیم کرد، اکنون اجازه بدهید در مورد برچسب اطلاعیه ی داکیومنت بیشتر بدانیم.
برچسب <DOCTYPE!>
برچسب اطلاعیه ی <DOCTYPE !> توسط مرورگرهای وب برای پی بردن به ورژن HTML استفاده شده در داکیومنت مورد استفاده قرار می گیرد. ورژن حال حاضر HTML ورژن ۵ می باشد که از اطلاعیه ی زیر استفاده می کند:
<DOCTYPE html!>
انواع دیگری اطلاعیه وجود دارند که می توانند در داکیومنت HTML ،متناسب با ورژن HTML مورد استفاده قرار بگیرند. جزئیات بیشتری در این مورد در زمان بحث در مورد برچسب های دیگر HTML فرا خواهیم گرفت.
برچسب های تیتر
هر داکیومنت با یک تیتر آغاز می شود. شما می توانید از اندازه های مختلف برای تیترهای خود استفاده کنید. HTML دارای شش سطح می باشد که از, < h4>, < h3>, < h2>, < h1> و <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>
مثال باال نتیجه ی زیر را تولید خواهد کرد
Hello
You delivered your assignment ontime
Thanks
Mahnaz
مرکزگذاری متن
می توانید با استفاده از برچسب <center> می توانید هر محتوایی را در مرکز صفحه یا در مرکز هر سلول از یک جدول قرار دهید.
مثال
< !DOCTYPE html> < html> < head> < title>Centring Content Example < /title> < /head> < body> < p>This text is not in the center. < /p> < center> < p>This text is in the center. < /p> < /center> < /body> </html>
مثال باال نتیجه ی زیر را تولید خواهد کرد
This text is not in the center.
This text is in the center
خطوط افقی
خطوط افقی برای بخش های شکست بصری یک داکیومنت استفاده می شوند. برچسب <hr> خطی از موقعیت کنونی داکیومنت به حاشیه ی سمت راست ایجاد کرده و خط را طبق آن می شکند. به عنوان مثال ممکن است تمایل داشته باشید بین دو پاراگراف خطی قرار دهید، همانطور که در مثال زیر ارائه شده است
مثال
< !DOCTYPE html> < html> < head> < title>Horizontal Line Example < /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>
این مثال نتیجه ی زیر را تولید خواهد کرد
This is paragraph one and should be on top
This is paragraph two and should be at bottom
و باز برچسب</ hr> مثالی از Empty می باشد که نیازی به باز کردن یا بستن برچسب ندارید زیرا چیزی برای رفتن بین آنها وجود ندارد. در عنصر </ hr> یک فضای خالی بین کاراکترهای hr و اسلش مقابل آن وجود دارد. اگر این فضا را حذف کنید مرورگرهای قدیمی تر در اجرای خط افقی مشکل خواهند داشت. در حالیکه اگر اسلش مقابل آن را حذف کنید عنصر باقیمانده <hr> می باشد که در HTML فاقد اعتبار می باشد.
حفظ طراحی
گاهی اوقات تمایل دارید که متن فرمت دقیق خود در HTML را دنبال کند، در این موارد می توانید از برچسب پریفرمت <pre> استفاده کنید. هر متن بین برچسب باز کننده ی <pre> و برچسب بستن <pre/> طراحی متن منبع را حفظ خواهد کرد.
مثال
< !DOCTYPE html>
< html>
< head>
< title>Preserve Formatting Example < /title>
< /head>
< body>
< pre>
function testFunction( strText ){
alert (strText)
}
< /pre>
< /body>
</html>
مثال باال نتیجه ی زیر را تولید خواهد کرد
{ function testFunction( strText )
alert (strText)
{
سعی کنید از همان کد بدون نگهداری آن بین برچسب های <pre>…< /pre> استفاده کنید
فضاهای غیرشکست
فرض کنید می خواهید از عبارت “.Men Angry 12 ” استفاده کنید. در اینجا از مرورگر نمی خواهید عبارت را بین دو خط به صورت Angry 12 و Men بشکند.
An example of this technique appears in the movie “۱۲ Angry Men.”
در مواردی که نمی خواهید مرورگر متن را بشکند باید به جای یک فضای عادی از فضای غیر شکست nbsp& استفاده کنید. برای مثال وقتی “Men Angry 12 “را در یک پاراگراف کدگذاری می کنید باید از کدی مانند زیر استفاده کنید
مثال
<!DOCTYPE html> <html> <head> <title>Nonbreaking Spaces Example</title> </head> <body> <p>An example of this technique appears in the movie "12 Angry Men."</p> </body> </html>
برای تمرین هر جلسه میتوانید به وبسایت W3C مراجعه کنید.
خب امیدوارم که از این قسمت هم لذت کافی رو برده باشید اکنون ما ساختار داکیومنت HTML را هم میشناسیم. در قسمت های آینده به نکات پیشرفته تر و جذاب تری از زبان html میرسیم.
دیدگاه ها