منوی برگه ها
TwitterRssFacebook
منوی دسته ها

ارسال شده توسط در تاریخ ۲۹ مهر ۱۳۹۳ در طراحی وب | ۰ دیدگاه

آموزش جامع HTML » (قسمت دوم):

 

سلام :

در بخش قبلی پیرامون شروع کار با زبان HTML صحبت کردیم و در این پست قصد داریم تا با یکدیگر مطالب جدیدی از این زبان را بیاموزیم.

معرفی چند صفت پرکاربرد عمومی:

Style: از این صفت در تگ ها برای تعریف یکسری ویژگی هایCss استفاده می کنند که برای ویرایش گرافیکی مطالب از جمله رنگ و فونت و اندازه و… به کار برده می شود که در مورد زبان Css هم در دوره های بعدی صحبت خواهیم کرد.

Title: شاید تا کنون دیده باشید که در صفحات وب وقتی که موس خود را بر روی یک عبارت می برید و نگه می دارید توضیحاتی پیرامون آن عبارت به صورت یک باکس در کنار آن ظاهر می شود در واقع  مقدار این صفت همان توضیحاتی است که برای محتوای تگ مورد نظر بیان می شود.

id: از این صفت برای تعیین یک شناسه منحصر به فرد برای تگ ها استفاده می شود و دقت داشته باشید که هیچگاه نباید دو تگ در یک صفحه وب داری مقدار id یکسانی باشند.

 

dir:از این صفت برای تعیین جهت گیری محتوای تگ استفاده می گردد که دارای دو مقدار ltr  یعنی چپ به راست و rtl یعنی راست به چپ می باشد.

Class:از این صفت باز هم برای ارتباط بین زبان Css و HTML به کار برده می شود و درواقع مقدار این صفت نام کلاسی است که در کدهای Css آن را تعریف کرده ایم.

Hidden: این صفت برای مخفی کردن محتوای تگ مورد نظر کاربرد دارد که دو مقدار true  وfalse را به خود می گیرد که به ترتیب باعث حذف شدن و حذف نشدن عنصردر مرورگر می گردد.

معرفی تگ های قالب بندی متن :

این نوع تگ ها در واقع همانگونه که از اسمش برمی آید برای قالب بندی و همچنین کنترل و هدایت نمایش متن ها بکار می رود که بسیار هم مهم و کاربردی هستند.

در زیر با مهمترین تگ های قالب بندی متن آشنا می شویم:

تگ <i>

این تگ برای ایتالیک کردن یا همان مورب کردن متون بکار می رود و این ویژگی به روی متن نوشته شده بین این تگ اعمال می گردد.

<i/> محتوای نوشته شده در این قسمت در صفحه مرورگر به صورت مورب نمایش داده می شود .<i>

تگ <b>

توسط این تگ می توان محتوای بین آن را bold یا بزرگ و توپر کرد.

<b/> محتوای نوشته شده در این قسمت در صفحه مرورگر به صورت bold نمایش داده می شود . <b>

تگ <s>

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

<s/> محتوای نوشته شده در این قسمت در صفحه مرورگر به صورت خط خورده نمایش داده می شود . <s>


تگ های <sub> و <sup> و <big>

محتوای بین این سه تگ به ترتیب به صورت زیر نویس (اندیس) و بالا نویس و بزرگ نمایش داده و در واقع از نظر اندازه یک واحد بیشتر از متون اطراف خود نمایش داده خواهد شد.

تگ<small>

بله درست حدس زدید این تگ درست عکس تگ <big> عمل می کند و متون بین آن یک واحد کوچک تر از متون اطراف خود نشان داده می شود.

تگ ایجاد تیتر برای متون <h>

برای اینکه بتوان برای متون خود تیتر تعیین کنید باید از این تگ استفاده کنید اما نه به این صورت در واقع این تگ ۶ نوع دارد که به ترتیب از بزرگترین تیتر تا کوچکترین آن به صورت زیر می باشد.

<h1> سپس <h2> سپس <h3> ……تا <h6>  برای فهم بهتر به تصویر زیر دقت کنید.

<h1>Heading 1</h1>

<h2>Heading 2</h2>

<h3>Heading 3</h3>

<h4>Heading 4</h4>

<h5>Heading 5</h5>

<h6>Heading 6</h6>


که حاصل اجرای کد فوق به صورت زیر می باشد:

نتیجه کد

همه عناصر فوق دارای صفت هایی می باشند که در زیر مطرح شده است:

Title: این صفت به صورت عمومی تعریف شده است و رشته هایی را به عنوان مقدار می پذیرد.

dir :این صفت هم که بیان شد برای تعیین جهت گیری متون است.

align :این صفت برای نحوه چیدن متون قرار دارد که خود این صفت ۴ مقدار زیر را می پذیرد:

Left وcenter و right و justify که به ترتیب متون را در چپ و مرکز و راست و تراز از دو طرف تنظیم می کند.

 

تگ <p>

این تگ یکی از مهمترین تگ های مورد استفاده در زبان html می باشد و وظیفه آن ایجاد یک پاراگراف جدید است که با ایجاد هر تگ <p> به خط بعد می رویم و پاراگراف جدیدی را ایجاد می کنیم.

<p/>این عبارت اولین پاراگراف ایجاد شده می باشد<p>

<p/>این عبارت دومین پاراگراف ایجاد شده می باشد <p>

<p/>این عبارت سومین پاراگراف ایجاد شده می باشد <p>

که نتیجه را در زیر می بینید:

نتیجه کد

تگ </br>

تگ فوق برای ایجاد یک شکست در خط در نظر گرفته شده که در واقع وظیفه Enter را در نوشتن دارد و با رسیدن به این تگ به خط بعدی می رویم:

<p/>این خط پیش از رسیدن به تگ جدید است </br>این تگ بعد از رسیدن به تگ است <p>

نتیجه کد

تگ <nobr>:

این تگ دقیقا در مقابل تگ قبلی قرار می گیرد و وظیفه آن هم این است که محتوای بین آن تحت هیچ شرایطی شکسته نمی شود مگر اینکه در بین آن از تگ </br> استفاده گردد.

 

تگ های <pre> و <code>:

یک از پرکاربردترین و شاید مهمترین تگ هایی که می توان به آن اشاره کرد این دو تگ است که این دو مانند مثال زیر با هم می آیند و در واقع وظیفه آن ها این است که محتوای بین خود را دقیقا به همان شکلی که تایپ می کنیم در خروجی مرورگر نمایش دهد .کاربرد این دو تگ زمانی بیشتر آشکار می گردد که مثلا بخواهید دستورات برنامه نویسی را همانگونه که هست در مرورگر نمایش دهید که این موضوع سبب می گردد تا دقیقا آنچه که می نویسید به همراه space  ها نمایش دهد.

<code>

<pre>

این دستورات دقیقا به همین شکل

و به صورتی که در بین این دو تگ

نوشته می شود نمایش داده می شود

<pre/>

<code>

نتیجه کد:

نتیجه کد

تگ <blink>:

یکی از جذابترین تگ های html  همین تگ است و محتوای بین خود را به صورت چشمک زن نمایش می دهد اما توجه داشته باشید که این تگ خاص در مرورگر IE پشتیبانی نمی شود پس از این تگ با در نظر گرفتن این موضوع استفاده کنید.

تگ <center>:

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

 

تگ</hr> :

بارها شده وارد یک وبسایتی شوید و در صفحه خطوط افقی را که در سرتاسر مرورگر کشیده شده است ببینید . این تگ دقیقا همین وظیفه را به عهده دارد و باعث ایجاد یک خط افقی در صفحه می گردد البته این تگ اصطلاحا تهی بوده یعنی دیگر بسته شدن تگ برای آن معنا ندارد و به همین صورت نوشته می شود.

این تگ دارای چند صفت خیلی مهم است که در زیر بیان می شود:

Size: این صفت همانطور که از نامش بر می آید برای تعیین اندازه ارتفاع خط تعیین می گردد و یک عدد بر حسب px به عنوان value برای آن در نظر گرفته می شود.

مثال

</hr size=30px >

کد فوق سبب پدید آمدن یک خط افقی به ارتفاع ۳۰ پیکسل می شود.

Width:

این صفت برای تعیین عرض یک المان در نظر گرفته می شود که در اینجا اگر برای تگ <hr/> استفاده شود عرض خط افقی را تعیین می کند که مقدار این صفت هم عددی بر حسب درصد و یا بر حسب px است.

</hr  width=30px>

کد فوق سبب پدید آمدن یک خط افقی به عرض ۳۰ پیکسل می شود.

Color:

تگ فوق هم رنگ المان را تعیین می کند که نه فقط برای این تگ بلکه برای تعیین رنگ تگهای دیگر هم کاربرد دارد.

در پست بعدی روش کار کردن با این صفت مهم و ادامه کار با زبان شیرین  htmlرا آموزش می دهم…

بسیار خوب دومین آموزش هم به پایان خود رسید با تمرین بیشتر به مهارت های خود اضافه کنید…

با تشکر از استاد احمد بادپی

تا پست بعدی خدا نگهدار…

دیدگاهتان را بنویسید

نشانی ایمیل شما منتشر نخواهد شد. بخش‌های موردنیاز علامت‌گذاری شده‌اند *

Time limit is exhausted. Please reload CAPTCHA.

Pin It on Pinterest

Share This

Share This

Share this post with your friends!