آموزش HTML شماره 2 - شروع کار با تگ ها

آموزش وب ، html ،
327 بازدید
آموزش HTML شماره 2 - شروع کار با تگ ها
تگ هایی مثل h1 , h2 , h3 , h4 , h5 , h6 , p , pre , br , hr

در آموزش قبلی شما دیدید که چگونه می توانید یک فایل با پسوند های (html یا htm - فرقی با هم ندارند) را به وسیله ی نرم افزار notepad که به صورت پیشفرض روی ویندوز وجود دارد تغییر دهید. همچنین شما این یک فایل html را در مرورگر خود باز کردید و با استفاده از ctrl + u توانستید کد های آن صفحه را مشاهده کنید. در اصل شما اگر آموزش قبلی را مطالعه کرده باشید ، مقدمات html را به پایان رسانده اید و آماده ی ادامه ی مطالعه ی خود در این مطلب هستید.

توجه داشته باشید که شما اگر می خواهید این کد ها را امتحان کنید ، از تگ های body , head , html هم استفاده کنید و این کد ها را در بخش body آزمایش کنید.

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

1- سر تیتر (h1 , h2 , h3 , h4 , h5 , h6) :

کلمات کلیدی بالا ، کلمات کلیدی ای هستند که برای ایجاد سرتیتر در صفحات اچ تی ام ال به کار می روند. موتور های جستجوگر هم برای فهمیدن میزان اهمیت و موضوع صفحه از این تگ ها استفاده می کنند (در واقع اگر نام مطلب در بین <h2> و </h2> قرار دارد ، موضوع آن صفحه را از آن متوجه می شوند و در جستجو از آن کمک می گیرند. پس این تگ ها اگر به درستی در صفحه استفاده شوند می توانند بازدید صفحه را افزایش دهند)

این کدها را ببینید:

<<<code>>>

 

<h1> this is h1 </h1>

<h2> this is h2 </h2>

<h3> this is h3 </h3>

<h4> this is h4 </h4>

<h5> this is h5 </h5>

<h6> this is h6 </h6>

<<</code>>>

 این کد ها را به در کنار هم استفاده کنید و نتیجه را ببینید. (استفاده از نمایش دهنده ی آنلاین وبلاگ)

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

h6
h5

h4

h3

h2

h1

 

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

2- بند (پاراگراف - p):

در اچ تی ام ال برای ایجاد بند ، از تگ <p> .... </p> استفاده می شود. هر چیزی که در آن قرار گیرد جزو آن بند به حساب می آید. این تگ هم مانند تگ های قبلی باعث می شود متن های بعدی در خط جدید نمایش داده شوند.

<<<code>>>

 

<h2>this is title (h2):</h2>­

<p>this is the paragraf ....</p>

<<</code>>>

 

کد بالا را امتحان کنید و خروجی را ببینید. (استفاده از نمایش دهنده ی آنلاین وبلاگ)

3- خط افقی (hr):

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

<<<code>>>

<hr />

<h2>this is title (h2):</h2>­

<p>this is the paragraf ....</p>

    <hr />

<h4> this is title (h4) </h4>

<p> this is paragraf. p tag. </p>

<<</code>>>

کد بالا را امتحان کنید و خروجی را ببینید. (استفاده از نمایش دهنده ی آنلاین وبلاگ)

4- شکستن خط (br):

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

<<<code>>>

dfdfdsfdfdsfdsfsdfsdfd

safsdafsdfsdfsdfsdfsdf

ghjhgjghjghjhgjhgjhgj

ilkjlkjlkjlhljljljkljhljlk

ewrewrewqrwqerwer

<<</code>>>

حالا خروجی را مشاهده کنید. (استفاده از نمایش دهنده ی آنلاین وبلاگ) می بینید که این حروف با این که به صورت خط شکسته (enter) نوشته شده اند اما در خروجی صفحه ی اچ تی ام ال ، پشت سر هم و فقط با یک فاصله ی کوچک نمایش داده می شوند. حال برای رفع این مشکل شما دو راه دارید.

یکی از راه ها این است که از تگ <br /> در هر قسمتی که می خواهید خط شکسته شود استفاده کنید.

دومین راه این است که متن خود را در تگ <pre> ... </pre> به همان شکل که هست بنویسید. این تگ حالتی ایجاد می کند که با هر اینتری که شما در کد های خود وارد می کنید ، خط شکسته می شود و خط جدید آغاز می شود و دیگر لازم نیست از تگ <br /> به تعداد زیاد استفاده کنید.

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

 

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

خیلی از برنامه نویسان وب هستند که می خواهند در کد خود توضیحاتی را بنویسند که در صفحه نمایش داده نشود ، اما در کد ها وجود داشته باشد و شخص استفاده کننده بتواند آن ها را در بین کد ها بخواند. برای این کار می توان از روش زیر استفاده کرد:

<<<code>>>

 

<!-- متنی که می خواهید در کد ها نمایش داده نشود -->

<<</code>>>

 

نکته: این تگی که برای مشخص کردن توضیحات استفاده می شود ، حالت بسته ندارد.

خروجی ساز - مشاهده ی نتیجه ی کد ها

 


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

رمز تمام فایل های فشرده
رمز فایل فشرده است.