آموزش کامل HTML - قسمت نهم


با سلام خدمت دوستان و همراهان همیشگی زُلند .

توی قسمت نهم آموزش میخوایم با عناصر inline و block  در HTML آشنا بشیم.

ما در HTML دو نوع عنصر داریم؛عناصر inline و عناصر block. عناصر block  عناصری هستن که تمام طول یک سطر رو اشغال میکنن حتی اگه بهش نیازی نداشته باشن مثل تگ های <h1> ، <p> ، <div> ، <table>

و عناصر inline عناصری هستن که فقط به اندازه ای که نیاز دارن عرض یک سطر رو اشغال میکنن مثل تگ های <span> ، <a> ، <img> ، <td>

مهمترین تگ عناصر inline تگ <span> و عناصر block تگ <div> هست.

 تگ <div> برای گروه بندی بقیه عناصر HTML استفاده میشه و زمانی که با CSS استفاده بشه خصوصیت های زیادی رو میگیره که در مبحث CSS بطور مفصل باهاش کار میکنیم.

تگ<span>  هم بعنوان یک ظرف برای متن ها هست. یعنی اینکه با استفاده از این تگ میتونیم به بخش های متنی سایت خودمون استایل های مختلفی بدیم.

خب تا اینجای کار با عناصر مختلف آشنا شدیم حالا بریم یه مثال بزنیم و صفحه بندی رو بطور کامل توضیح بدیم. اگه دقت کرده باشین بیشتر وبسایت ها محتویات خودشون رو در چند ستون قرار میدن به فرمت مجله ها و روزنامه ها . ما با استفاده از تگ های <div> و <table> میتونیم این حالت جندستونی رو پیاده سازی کنیم اما از اونجایی که تگ <table> مخصوص پیاده سازی جداول هست و برای صفحه بندی مناسب نیست پس از <div> استفاده میکنیم به این صورت :

<html>

<body>

<div style=”width:500px”>

<div style=”background-color:red;”>

<h1>header</h1>

<div style=”background-color:blue;height:200px;width:100px;float:left;”>

<strong>Web</strong> <br>

HTML <br>

CSS <br>

JavaScript </div>

<div style=”background-color:yellow:height:200px;width:400px;float:left;”>

Content </div>

<div style=”background-color:gray;”>

Zoland.org </div>

</body>

</html>

خب ما با تگ <div> به روش استاندارد یه صفحه بندی ساده انجام دادیم که شامل هدر و بدنه سایت و فوتر و یه منوی چپ چین بود.

اگه دقت کرده باشین گفتیم که با استفاده از <table> هم میشه همینارو طراحی کرد اما خب استانداردش اینه که از <div> استفاده کنیم. برای آشنایی بیشتر ما این صفحه بندی رو با <table> هم انجام میدیم.

به مثال زیر دقت کنید :

<html>

<body>

<table width=”600” border=”0”>

<tr>

<td colspan=”2” style=background-color:red;”>

<h1>Main</h1>

</td>

</tr>

<tr valign=”top”>

<td style=”background-color:blue;width:100px;>

<strong>Web</strong> <br>

HTML <br>

CSS <br>

JavaScript

</td>

<td style=”background-color:yellow;height:200px;width:400px;>

Content </td>

</tr>

<tr>

<td colspan=”2” style=”background-color:gray;”>

Zoland.org</td>

</tr>

</table>

</body>

</html>

 

خب اینم یه مثال ساده از صفحه بندی با تگ <table> بود اما همونطور که تاکید کردم برای صفحه بندی استفاده از <div> مرسوم هست و سعی کنید شما هم از همین روش صفحه بندی رو انجام بدین.

ادامه آموزش هارو در قسمت دهم بخونید

 

 

این نوشته اختصاصی وب سایت زولند بوده و هرگونه کپی برداری ممنوع بوده و پیگری میگردد.
مصطفی اسدی

In programmers world anything is possible !

5 امتیاز 10 نوشته

این نوشته را با دوستان خود به اشتراک بگذارید...

برای ارسال دیدگاه خود لطفا وارد سایت شوید و یا ثبت نام کنید.