تو پست قبلی ، کلیات مواردی که توی بخش head مطرح میشه گفتیم. این پست اختصاص به مواردی از body داره.
گفتیم html از دو بخش head و body تشکیل میشه.
قسمت body شامل همه ی چیزهایی هست که قراره توی مرورگر نشون داده بشه.
هر المانی توی html از یک تگ تشکیل میشه ، که شامل یک اسم تگ و مجموعه ای از خصوصیات اون تگ هست.
مثلا برای تصویر از تگ <img> استفاده میشه. داخل تگ خصوصیات المان نوشته میشه مثلا تصویری با آدرس"address" و عرض "۱۰۰px" به شکل زیر توی html نوشته میشه : <img src="address" width="100px"/>
یک سری از مجموعه خصوصیت هایی که برای تقریبا تمام المان های نمایشی html وجود داره موارد زیر هست :
عرض = width
ارتفاع = height
توضیح (که در صورت قرار گرفتن ماوس روی اون نمایش داده میشه ) = title
و یک سری موارد دیگه که چون اینجا هدف ما آموزش مو به موی html نیست و فقط می خواهیم با قالب کلی آشنا بشیم مطرح نمی کنیم و بهتره خودتون برین و از منابع کامل html بخونین.
در واقع المان های اصلی که توی مرورگر نشون داده میشه ، شامل موارد زیر هست :
۱ - متن : هر چیزی که توی قسمت body بدون توضیح خاصی و خارج از سایر تگ ها باشه ، به همون شکل توی مرورگر نشون داده میشه.
۲ - عکس : برای نشون دادن عکس از تگ img استفاده میشه. تگ img شامل خصوصیات زیر هست :
src = آدرس فایل تصویری که قراره نشون داده بشه.
alt = توضیحی که در صورت عدم نمایش تصویر بجاش نشون داده میشه.
۳ - لینک = برای قراردادن لینک توی صفحه از تگ (خیلی مختصر!) a استفاده میشه. این تگ شامل خصوصیت اصلی زیر هست :
href = آدرسی که لینک به اون اشاره می کنه.
این تگ معمولا به صورت دو قسمتی نوشته میشه و چیزی که بین این دوتا قسمت نوشته بشن ، به عنوان متن لینک نشون داده میشه و با کلیک روی اون به مقصد لینک فرستاده میشه. (توضیح : همه ی تگ های html رو امروزه میشه طبق استاندارد xml به صورت دو قسمتی نوشت . برای توضیح بیشتر به منابع اصلی مراجعه کنید.) شکل کلیش اینطوری هست:
<a href="destination"> link text</a>
۴ - <br /> به عنوان خط شکسته (رفتن به سطر پائین تر)
۵ - <hr /> به عنوان خط فاصل افقی بین سطر ها
۶ - <table> که در واقع برای ترسیم جدول توی صفحه استفاده میشه. شامل زیر تگ های <th> برای خانه ی عنوان جدول ، <tr> برای تعریف سطر جدید و <td> برای شروع خانه جدید هست.
و در حالت کلی به شکل زیر نوشته میشه :
<table>
<tr>
<th>
خانه اول سطر عنوان
</th>
<th>
خانه دوم سطر عنوان
</th>
.
.
.
<th>
خانه اخر سطر عنوان
</th>
</tr>
<tr>
<td>
خانه اول سطر دوم
</td>
<td>
خانه دوم سطر دوم
</td>
.
.
.
</tr>
<tr>
.
.
.
</tr>
</table>
توی تعریف این تگ ها از بعضی خصوصیت ها برای تغییرات خاصی مثل ترکیب خانه ها ، رنگ بندی و استایل دهی به حاشیه های جدول ، فاصله های درونی خانه ها و ... استفاده میشه که بازم یاد گرفتن این موارد به عهده خودتون هست.
برای درست کردن لسیت های تو در تو هم از تگ های ul و li استفاده میشه. که یادگرفتن این هم باز بر عهده خودتونه
۷ - برای شروع کردن یک پاراگراف جدید توی صفحه html هم از تگ <p> استفاده میشه. به طوری که یک پاراگراف به این شکل نوشته میشه :
<p>
.
.
متن پاراگراف
.
.
</p>
۸ - برای نوشتن عناوین هم از تگ <H1> تا <H6> استفاده میشه ، به طوری که <H1> درشت ترین و <H6> کوچک ترین اندازه برای نوشتن عنوان های مطالب هست.
اینا المان های اصلی یک سند html بود که عرض کردم خدمتتون. تگ های خیلی زیاد دیگه ای هم وجود داره ، اما با دونستن همین ها هم احتمالا می تونین شاید چیزی حدود ۶۰ درصد از کد html یک صفحه رو تجزیه و تحلیل کنید و متوجه بشین.
توی پست بعدی قراره بیشتر در مورد خصوصیت های این المان ها و ویژگی های ظاهریشون صحبت کنیم. اگه هم فرصت بشه احتمالا کمی از CSS میگیم .
منتظر نظراتتون هستم .
موفق باشید.
---------------------------------------
پ ن : ضمنا متاسفانه ویرایشگر مانشت قابلیت نوشتن فارسی و انگلیسی رو کنار هم به شکل راحت نداره. به همین خاطر شکل کلی تگ های بسته کمی به هم ریخته که با مراجعه به مراجع اصلی متوجه شکل درستش میشین.