HTML
ایران گستر در صدد آن است تا با آموزش های تصویری خود, شما را با به روز ترین زبان های برنامه نویسی آشنا کند تا با یادگیری آنها بتوانبد وارد بازار کار شوید و کسب و کار خود را رونق بخشید. ار این پس آموزش های HTML مارا دنبال کنید.
[caption id="attachment_3063" align="aligncenter" width="300"]
HTML[/caption]
Heading چیست؟
Heading ها در واقع تیترهایی هستند برای قسمت های مختلف یک صفحه و از <h1> شروع شده و تا <h6> ادامه پیدا می کنند. به صورتی که <h1> مهم ترین عنوان یا تیتر و <h6> کم اهمیت ترین عنوان را مشخص می کند.(ایران گستر)
به مثال زیر توجه کنید:
|
1 2 3 4 5 6 7 8 9 10 11 12 13 |
<!DOCTYPE html> <html> <body>
<h1>Heading 1</h1> <h2>Heading 2</h2> <h3>Heading 3</h3> <h4>Heading 4</h4> <h5>Heading 5</h5> <h6>Heading 6</h6>
</body> </html> |
همانطور که در خروجی مشاهده کردید، این تگ ها در ظاهر نیز با هم متفاوت هستند و هر چه اهمیتشان بیشتر باشد، بزرگتر می شوند اما اهمیت اصلی آن ها در ظاهرشان نیست چرا که ظاهر را می توان با CSS نیز تغییر داد. اهمیت اصلی در مسئله ی سئو است؛ موتورهای جست و جو از heading ها استفاده می کنند تا ساختار یک صفحه ی وب را ایندکس کنند. بنابراین نباید از ساختار صفحات وب خود غافل شوید.(ایران گستر)
برای ساختاربندی صحیح توجه کنید که <h1> همیشه باید عنوان اصلی تمامِ صفحه باشد بنابراین نباید در هر صفحه بیشتر از یک عدد <h1> داشته باشیم. سپس به ترتیب اهمیت از تگ های <h2> و <h3> و … استفاده کنید. برای مشاهده ی ساختار HTML صفحه ی خود می توانید از وب سایت هایی مانند HTML 5 Outliner استفاده کنید. برای مثال ما سایت روکسو را به آن دادیم و نتیجه به شکل زیر بود:(ایران گستر)
این ساختار، ساختار صحیح و درستی است. همانطور که می بینید هر دسته به همراه زیر مجموعه هایش و بر اساس اهمیت جداسازی شده اند اما اگر شما در سایتتان از heading های صحیح استفاده نکنید دیگر با چنین ساختار مرتبی مواجه نخواهید شد. همیشه به این فکر کنید که کدام مطلب زیر مجموعه ی کدام مطلب دیگر است.(ایران گستر)
همچنین کاربران سایت نیز صفحات شما را بر اساس heading ها بررسی می کنند تا مطالب مورد نظرشان را پیدا کنند.
نکته: مرورگرها به طور خودکار قبل و بعد از یک heading، مقداری فضای خالی اضافه می کنند تا بین عنوان و مطالب مربوطه فاصله ایجاد شود.(ایران گستر)
نکته: هیچ گاه از heading ها برای بزرگتر کردن نوشته ها و پررنگ کردنشان استفاده نکنید. برای این کار باید از CSS استفاده کنیم که در جلسات بعد با آن آشنا خواهیم شد. تنها مورد استفاده ی heading ها عناوین و تیترها هستند!(ایران گستر)
سوال: اگر بخواهیم heading من اندازه ی بزرگتری داشته باشد چکار کنم؟(ایران گستر)
پاسخ: همانطور که گفتیم تمام این موارد در CSS نوشته می شود اما برای مثال این مورد را برایتان توضیح میدهم. شما می توانید از font-size استفاده کنید:(ایران گستر)
|
1 2 3 4 5 6 7 8 9 10 |
<!DOCTYPE html> <html> <body>
<h1 style="font-size:60px;">Heading 1</h1>
<p>You can change the size of a heading with the style attribute, using the font-size property.</p>
</body> </html> |
من سایز این heading را روی 60 پیکسل گذاشته ام. شما می توانید به JSBin بروید و این مقدار را تغییر دهید تا ببینید چطور کوچک و بزرگ می شود.(ایران گستر)
استفاده از <hr>
تگ <hr> در زبان HTML هنگامی استفاده می شود که بخواهیم یک قسمت از صفحه را از قسمتی دیگر جدا کنیم. معمولا زمانی که قسمتی از مطلب ما از مطالب دیگر جدا است از این تگ استفاده می کنیم. خروجی این تگ به صورت یک خط افقی در صفحه است:(ایران گستر)
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 |
<!DOCTYPE html> <html> <body>
<h1>This is heading 1</h1> <p>This is some text.</p> <hr>
<h2>This is heading 2</h2> <p>This is some other text.</p> <hr>
<h2>This is heading 2</h2> <p>This is some other text.</p>
</body> </html> |
اگر می خواهید خروجی این تگ را ببینید باید آن را در JSBin مشاهده کنید.
برچسب <head> چیست؟
بسیاری از طراحان مبتدی تگ <head> را با heading ها اشتباه می گیرند اما واقعیت این است که این دو تگ هیچ ارتباطی با هم ندارند. در واقع عنصر <head> نگهدارنده ی اطلاعات metadata است و بین تگ های <html> و <body> قرار می گیرد. metadata اطلاعاتی است که در مورد خودِ سند HTML است و هیچ گاه به نمایش در نمی آیند. بگذارید مثالی را ببینیم:(ایران گستر)
|
1 2 3 4 5 6 7 8 9 10 11 12 13 |
<!DOCTYPE html> <html> <head> <title>My First HTML</title> <meta charset="UTF-8"> </head> <body>
<p>The HTML head element contains meta data.</p> <p>Meta data is data about the HTML document.</p>
</body> </html> |
به غیر از عناصر p در کد بالا چیز دیگری به نمایش در نمی آید. یکی از metadata هایی که در کد بالا استفاده کرده ایم meta charset است که مشخص می کند سند ما از چه نوع encoding ای پشتیبانی می کند. برای زبان فارسی باید UTF-8 را به کار ببرید اما امروزه پیشنهاد می شود به طور کلی از هر زبانی استفاده کردید این مقدار را روی UTF-8 تنظیم کنید. در مورد این تگ ها نیز بعدا به طور مفصل صحبت خواهیم کرد.(ایران گستر)
- ۹۸/۰۷/۲۰