طراحی سایت
ساناتک
جمعه 25 تير 1395
2
کاربرد تگ ها h و p و o1 در ساخت صفحات وب

آنالیز صفحه وب ساخته شده

در این مثال دو تگ جدید استفاده کرده ایم؛ یکی تگ heading و دیگری تگ paragraph است که به ترتیب با تگ های <h1> و <p> نشان داده شده اند.

heading-paragraph

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

تگ های h یا تیتربندی

تگ های آغاز و پایان تیتر ما به ترتیب با <h1> و </h1> نشان داده شده است و می بینید که تیتر در مرورگر بزرگ نمایش داده شده است. به همین صورت در مورد پاراگراف هایمان عمل کردیم و این تگ ها نیز دو جمله در خود جای داده و در مرورگر ما دیده می شوند.

نکته دیگر اینکه تمام تگ ها با حروف لاتین کوچک نوشته شده است، نسخه های قدیمی HTML بگونه ای بود که باید حروف بزرگ نوشته می شدند اما در XHTML شما حتماً باید حروف را کوچک وارد کنید.

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

در مثال بالا برای یک تیتر اصلی از h1 استفاده کردیم، اگر می خواستیم از یک تیتر وابسته به تیتر اصلی استفاده کنیم باید از تگ h2 استفاده می کردیم و توجه داشته باشید تگ دوم حتماً باید زیر تگ اول قرار گیرد به همین ترتیب تیترهای وابسته با شماره های بالارونده یکی پس از دیگری قرار می گیرند و به ترتیب اندازه فونت استفاده شده بر اساس اهمیت تیترهای وابسته کم و کمتر می شود.

در مورد تیتربندی نکته کلیدی این است که تیترهای وابسته به ترتیب و با شماره های بزرگتر زیر یکدیگر قرار گیرند، این روند تا جایی ادامه میابد که ما بخواهیم تیتر اصلی دیگری به متن خود اضافه کنیم و طبیعتاً برای تیتر اصلی جدید نیز این قائده تکرار می شود. برای درک بهتر موضوع به مثال زیر توجه کنید.

  1. تیتر اصلی اول
  2. تیتر وابسته (1) به «تیتر اصلی اول»
  3. تیتر وابسته (2) به «تیتر اصلی اول»
  4. تیتر وابسته به «تیتر وابسته (2) به تیتر اصلی اول»
  5. تیتر اصلی دوم
  6. تیتر اصلی وابسته به «تیتر اصلی دوم»

نترسید! برای درک بهتر به کدنویسی تیترهای بالا توجه کنید:

<h1>First Major Heading</h1>
<h2>First Subheading</h2>
<h2>Second Subheading</h2>
<h3>A Sub-subheading</h3>
<h1>Another Major Heading</h1>
<h2>Another Subheading</h2>

تگ های پاراگراف (p)

از آنجا که هیچ خواننده ای علاقه ندارد فقط تیتر و سرتیترها را بخواند باید زیر هر یک از این تیترها توضیح و پاراگرافی مربوط به عنوان مربوط در تیتر بیان کنیم؛ تگی که برای ایجاد پاراگراف ها و نوشته هایمان از آن استفاده می کنیم p می باشد. به خاطر سپردن تگ p سخت نیست در صورتی که بدانیم از کلمه paragraph گرفته شده است؛ در واقع اکثر تگ هایی که در XHTML از آن ها استفاده می کنیم به همین صورت بوده و از آنجا که از کلمه لاتین اصلی خود گرفته شده اند به خاطر سپردن آن ها زیاد سخت نیست، این زیباییِ XHTML است.

چگونه لیست بندی کنیم؟ استفاده از تگ های o1 و u1

تصور کنید در صفحه وب خود بخواهید لیستی از مواردی که در ذهن دارید بسازید. برای ایجاد یک فهرست منظم از تگ o1 استفاده می کنیم و برای استفاده از یک لیست غیر منظم از تگ u1 بهره می بریم، پس تا اینجا چند نوع لیست وجود دارند؟! جواب ساده است، دو نوع؛ یکی فهرست منظم و دیگری غیر منظم که به ترتیب با تگ های o1 و u1 آغاز می شوند. برای عناوین موجود در هر یک از این ها هم از تگ li بهره می بریم. برای روشن تر شدن موضوع پیشنهاد می کنیم مثال زیر را با دقت مرور کنید، ابتدا نوع کدنویسی و سپس نحوه به نمایش در آمدنش در مرورگر:

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN"
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<title>Lists - an introduction</title>
<meta http-equiv="Content-Type"
content="text/html; charset=utf-8" />
</head>
<body>
<h1>Lists - an introduction </h1>
<p>Here's a paragraph. A lovely, concise little paragraph.</p>
<p>Here comes another one, followed by a subheading.</p>
<h2>A subheading here</h2>
<p>And now for a list or two:</p>
<ul>
<li>This is a bulleted list</li>
<li>No order applied</li>
<li>Just a bunch of points we want to make</li>
</ul>
<p>And here's an ordered list:</p>
<ol>
<li>This is the first item</li>
<li>Followed by this one</li>
<li>And one more for luck</li>
</ol>
</body>
</html>

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

list tag

عکس2.9: استفاده از فهرست های منظم و نامنظم؛ در واقع فهرست هایی که ترتیب قرارگیری عناوین در آن ها مهم هست و آن هایی که این ترتیب برای آن ها اهمیت ندارد.

تعداد بازدید: 255
مطالب دیگر آموزش طراحی سایت
روش های انتخاب تگ با استفاده از classوضعیت های گوناگون یک لینک در یک صفحه وبstyle دهی گروهی به چندین تگانتخاب زمینه کاری در CSS با خصوصیت idکاربرد دستور em و italics در CSS
 
زمان ثبت
دوشنبه 28 تير 1395 16:45
محمدی
اگر داخل تگ h1 یک تگ تصویر img بگذاریم مشکلی پیش نمیآید؟؟
مدیر سایت:
با سلام
خیر، فقط تگ img حتما خصوصیت alt را داشته باشد
@

با عضویت در خبرنامه در جریان آخرین اخبار و مطالب سایت قرار بگیرید