گروه آموزش طراحی سایت ۲۹ شهریور ۱۳۹۰ ۳ 2878 بازدید

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

نکته ها:

  1. برای طراحی سایت، دانستن html لازم است و برای کار با html، دانستن تگ ها و کاری که انجام می دهند، ضروری است. اما توجه داشته باشید که تگ های اچ تی ام ال تعداد زیادی دارند که در حین کار، تعداد محدودی از آن ها هستند که همیشه به کار می آیند. بنابر این لازم نیست اقدام به حفظ کردن تمام تگ های اچ تی ام ال بکنید!
  2. تگ های html معمولا به صورت جفت می آیند؛ مثل <p>sample text</p> که تگ <p> را تگ شروع و تگ </p> را تگ پایان می نامند.
  3. نحوه ی بکارگیری تگ های اچ تی ام ال به این صورت است که محتوا را با استفاده از تگ ها محصور می کنیم؛ مانند <p>sample text</p> که sample text را بوسیله ی تگ شروع <p> و تگ پایان </p> محصور کرده ایم.
  4. برخی از تگ های html به تنهایی به کار می روند، این تگ ها بخشی را برای محتوا ندارند و با نام self closing tags شناخته می شوند؛ مانند:
    <br /> <img />
  5. تگ ها را می توان به صورت تو در تو استفاده کرد. مثلا:
    <p>this is a sample <span>span</span> to show.</p>

    که تگ <span> درون تگ <p> به کار گرفته شده است.

  6. قوانین مربوط به جفت شدن تگ های شروع و پایان، مانند قوانین جفت شدن پرانتزهاست. هر تگی که زودتر باز شود، دیرتر بسته می شود.

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

تگ p:

برای نشانه گذاری پاراگراف ها، از تگ <p> استفاده می کنیم؛ بعنوان مثال در کد زیر ما دو پاراگراف مختلف را نشانه گذاری کرده ایم:

<p>this is the paragraph number 2</p><p>this is the paragraph  number 2</p>

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

تگ های h:

در html، سلسله مراتبی از تگ های <h> وجود دارد که از <h1> شروع شده و تا <h6> ادامه دارد. نقش این تگ ها نشانه گذاری تیترهای اصلی (headings)، در هنگام طراحی صفحات سایت می باشد.

در هنگام استفاده از تگ های <h> بایستی به این مسئله توجه داشت که از آن ها به صورت سلسله مراتبی استفاده کرد؛ یعنی:

  1. تگ <h1> تیتر اصلی صفحه را مشخص می کند.
  2. تگ <h6> داخلی ترین تیتر را مشخص می کند.
  3. تگ های <h2>، تیترهای با اولویت دوم را در یک صفحه مشخص می کنند، تیترهای درون <h2> باید با <h3> مشخص شوند و بهمین ترتیب الی آخر.

برای درک بهتر نحوه ی استفاده ی سلسله مراتبی از تگ های <h>، به مثال زیر توجه کنید:

<h1>this is main header</h1>
<h2>this is secondary  header</h2>
<h3>third headers </h3>
<h4>third  headers </h4>
<h4>third headers </h4>
<h3>third  headers </h3>
<h4>third headers </h4>
<h4>third  headers </h4>
<h2>this is secondary header</h2>

تگ br

برای ایجاد خطوط جدید (line break)، از این تگ استفاده می کنیم. مثلا اگر هنوز درون یک پاراگراف هستید، اما می خواهید ادامه ی متن شما در خط جدیدی ظاهر شود، به صورت زیر اقدام کنید:

<p>this is first paragraph and first line<br  />this is  first paragraph and second line</p><p>this is second  paragraph</p>

برای درک بهتر کد اچ تی ام ال گفته شده، تنها کافیست آن را در یک فایل با پسوند html ذخیره کرده و با استفاده از مرورگرها اجرا کنید.

تگ های لیست (ul – ol):

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

لیست های ترتیبی ol – li:

اگر ترتیب ظهور محتوای یک لیست اهمیت داشته باشد، از تگ <ol> (مخفف ordered list)، استفاده می کنیم. به این ترتیب که کل لیست را بین <ol> </ol> آورده و هر کدام از اجزای لیست را بوسیله ی جفت <li></li>  مشخص می کنیم. (li مخفف list item می باشد). برای درک بهتر به مثال زیر توجه کنید:

<ol><li>item one</li><li>item  two</li><li>item three</li></ol>

لیست های غیر ترتیبی ul – li:

اگر ترتیب ظهور محتوای یک لیست اهمیت نداشته باشد، از تگ <ul> (مخفف unordered list)، استفاده می کنیم. به این ترتیب که کل لیست را بین <ul> </ul> آورده و هر کدام از اجزای لیست را بوسیله ی جفت <li></li>  مشخص می کنیم. (li مخفف list item می باشد). برای درک بهتر به مثال زیر توجه کنید:

<ul><li>item one</li><li>item  two</li><li>item three</li></ul>

نظرات کاربران (۳)



  1. matrix

    خیلی خوب بود.
    به دوستانم حتما توصیه میکنم.

  2. reza naderi6672

    ۲۰ ۲۰

  3. farshad

    خوب نبود