خانه / آموزش ها / آموزش HTML / معرفی تگ های html و قالب بندی صفحات وب
تگ های مقدماتی HTML

معرفی تگ های html و قالب بندی صفحات وب

الف: تگ های مقدماتی HTML

تگ <p>

تگ <p> برای ایجاد پاراگراف می باشد.

برای ایجاد پاراگراف جدید از تگ P استفاده می شود. ابتداء تگ <p> را در بخش body تایپ می کنیم به این صورت که تگ را باز کرده و محتویات پارگراف را نوشته و سپس تگ </p> را می بندیم مثال:

<body>

<p>

      welcome to pishrosite

</p>

</body>

 

 

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

 

پاراگراف‌ چیست؟

یک پاراگراف مجموعه‌ای از چند جمله است که یک مفهوم اصلی را شرح می‌دهند.

به طور معمول این مفهوم اصلی در «جمله‌ی موضوع» بیان می‌شود که اغلب نخستین جمله‌ی پاراگراف است و اندکی با تورفتگی نوشته می‌شود. دیگر جمله‌های پاراگراف، باید به شرح و گسترش جمله‌ی موضوع کمک کنند و به آن‌ها «جمله‌های پشتیبان» می‌گویند. برخی پاراگراف‌ها، یک «جمله‌ی نتیجه‌گیری» هم دارند که نظر اصلی پاراگراف را خلاصه می‌کند یا نکته‌‌ی مهمی را درباره‌‌ی آن یادآور می‌شود. این جمله به طور معمول در پایان پاراگراف می‌آید. نویسنده در نوشتن همه‌ی این جمله‌ها باید مفهوم واحدی را با نظم منطقی بیان کند و شرح دهد.

 

ایجاد فاصله بین کلمات در html:

باید گفت که html وجود فاصله های خالی موجود در متن را تشخیص نمی دهد مثلا فضای خالی که توسط space ایجاد می شود را تشخیص نمی دهد و در صورتی که بخواهیم بین کلمات، فاصله ایجاد کنیم از علامت nbsp& استفاده می کنیم که هر یک بار نوشتن آن ایجاد یک کاراکتر فاصله می کند مثلا برای ایجاد ۸ کاراکتر فاصله باید ۸ بار پشت سرهم این عبارت را نوشت.

مثال؛

<body>

<p>

Html&nbsp&nbsp&nbsp&nbsp&nbsp&nbsp&nbsp&nbsp and Css

 </p>

</body>

خروجی :

Html         and Css

 ۲: تگ <br>

استفاده از <br> برای زمانی است که بخواهیم بخشی از یک جمله را در یک خط جدید نمایش دهیم زیرا همانطور که قبلا بیان شد  html وجود فاصله های خالی موجود در متن را تشخیص نمی دهد مثلا برای آوردن بخشی از یک جمله به خط جدید نمی توان از دکمه Enter استفاده کرد چون در خروجی این فاصله ها نمایش داده نمی شود.

مثال  :

<p>
This paragraph
contains a lot of lines
in the source code,
but the browser
ignores it
<p/>

خروجی :

This paragraph contains a lot of lines in the source code, but the browser ignores it

حال برای اینکار از تگ <br> استفاده می کنیم .

<body>

<p>This is<br>a paragraph<br>with line breaks</p>

<body/>

خروجی :

This is
a paragraph
with line breaks

نکته :

تگ <br> یک تگ خالی است، به این معنی که بدون تگ پایان است.

۳: تگ <b>

برای توپر نشان دادن یک کلمه از تگ <b> استفاده می کنیم

مثال:

 <p>

         welcome to<b>pishrosite</b>

</p>

خروجی :

welcome to pishrosite

۴: تگ <i>

برای نمایش کلمات بصورت ایتالیک یا مورب از تگ <i> استفاده می کنیم.

مثال:

<p>

         welcome to<i>pishrosite</i>

</p>

خروجی :

welcome to pishrosite

۵: تگ <strong>

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

مثال :

<strong> pishrosite.com </strong>

۶: تگ <em>

 تگ <em> که مخفف کلمه ( emphasized) می باشد، نشان دهنده محتوای تاکیدی است.

مثال:

<em> pishrosite.com </em>

نکته: بجای تگ <b> می توان از تگ strong   و بجای تگ <i> از تگ<em>  استفاده کرد.

 

تفاوت بین عنصر i و em :

نتیجه بصری بطور پیش فرض در این دو تگ, یکسان است و هر دو تگ ، محتوا را به صورت کج (ایتالیک) نمایش می دهند. اما از نظر معناشناختی متفاوت هستند. تگ <em> نشان دهنده محتوای تاکیدی می باشد، در حالی که <i> نشان دهنده ی متنی است که خارج از نثر عادی نوشته شده، مانند نام یک فیلم ، کتاب یا یک کلمه خارجی، و یا وقتی که متنی به جای معنای مفهومی، به تعریف یک کلمه اشاره دارد.

 

استفاده از تگهای b ,i ,strong ,em برای bold و italic کردن متن :

از نظر موتورهای جستجو تگهای b و i می توانند یک متن و یا کلمه را به حالت bold و Italic تغییر دهند . اگر شما به بهینه سازی وب سایت خود برای موتورهای جستجو اهمیت می دهید بهتر است از تگهای strong و em به صورت مستقیم در کد HTML به جای تگهای b و i و همچنین style ها استفاده نمائید . به این نکته بسیار مهم توجه داشته باشید که تگ های b و i تگهای نمایشی هستند و تگهای strong و em تگهای مفهومی و نمایشی هستند .

مفهوم این جمله این خواهد بود که متن ها به وسیله b و i فقط یک تغییر از لحاظ ظاهری پیدا کرده اند و به همین دلیل مورد توجه موتورهای جستجو قرار نخواهند گرفت . اما با استفاده از تگهای strong و em شما به همراه تغییرات ظاهری یک شخصیت نیز به متن خود خواهید بخشید و اعلام خواهید کرد که این متن در داخل این نوع از تگها از اهمیت بیشتری برخوردار خواهد بود .

ب: تگ های heading

قبل از شروع بحث این نکته رو یادآوری کنم که تگ های هدینگ کاربرد بسیار اساسی در بحث سئو دارند و از دید موتورهای جستجو وجود تگ های h1 و h2 برای هر صفحه از سایت ضروری هستند و در صورت عدم وجود این تگ ها ارور میدهند.

تگ های هدینگ :

زبان html شش نوع heading با ترازهای مختلف دارد که باید در قسمت body بنویسیم که تگ اول آن <h1> و تگ آخر آن  <h6> می باشد. کاربرد تگ های هدینگ برای مشخص کردن عنوان ها و تیترها می باشد که <h1> بیانگر مهم ترین عنوان و <h6> بیانگر کم اهمیت ترین عنوان می باشد.

برای درک بهتر مطلب یک مثال میزنم، فرض کنید یک مقاله دارید که دارای چند عنوان اصلی است و هر یک از عنوان ها نیز چند زیر عنوان دارند، حالا شما قصد دارید که این مقاله را در سایت بگذارید. برای اینکه موتورهای جستجو این مقاله را بتوانند ایندکس کنند و در نتیجه جستجو نمایش دهند بهترین روش این است که شما نام مقاله را با تگ h1 مشخص کنید( به این نکته توجه کنید که در هر صفحه وب نباید بیش از یک تگ h1 استفاده کنید ولی در استفاده از دیگر تگ ها محدودیتی وجود ندارد) حالا دیگر با تگ h1 کاری نداریم. در ادامه عنوان های اصلی مقاله را با تگ h2 مشخص می کنیم و زیر عنوان ها را با تگ h3 و اگر این زیر عنوان ها نیز دارای زیر عنوان بودند با تگ h4 مشخص می کنیم و به همین ترتیب تا h6 ادامه می دهیم .

نحوه کاربرد تگ های هدینگ :

ابتداء تگ باز هدینگ را نوشته و در ادامه محتویات heading را می نویسیم و در انتهاء تگ بسته آن را تایپ می کنیم.

نکته: h1 بزرگترین فونت و h6 کوچکترین فونت رادارد.

<body>

<h۱ pishrosite.com </h۱>

<h۲pishrosite.com </h۲>

<h۳pishrosite.com </h۳>

<h۴pishrosite.com </h۴>

<h۵pishrosite.com </h۵>

     <h۶ pishrosite.com </h۶>

</body>

 نمایش خروجی :

 

ج: فارسی نویسی در صفحات وب

فارسی نویسی در IDE :

در بحث فارسی نویسی  باید به این نکته توجه کنید که در ابتدا شما باید در نرم افزار ide خودتان بتوانید فارسی بنویسید و برای این کار بسته به نوع IDE  مورد استفاده ، می توانید تنظیمات فارسی نویسی را فعال کنید مثلا در  Notepad++ با رفتن به تب Encoding ، گزینه Encode in utf-8without Bom  را انتخاب کنید .

فارسی نویسی در کدهای Html :

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

روش کدگذاری UTF-8
برای نمایش متون فارسی از استاندارد یونیکد و روش کدگزاری UTF-8 استفاده می شود .

یونی‌کُد به انگلیسیUnicode) ) استانداردی صنعتی برای کدبندی کاراکترهای رایانه‌ای و نمایش و پردازش متن به اکثر زبان‌های دنیا است.

نکته مهم در نمایش صحیح متون فارسی تعیین نوع کدگزاری یا encoding صفحات فارسی است که برای اینکار باید از متاتگ خاصی به نام http-equiv در بخش head صفحات html به شکل زیر استفاده شود:

<meta http-equiv=”Content-Type” content=”text/html; charset=utf-8″>

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

 

شناسه یا attribute ی به نام dir
جهت نمایش متون لاتین به صورت پیش فرض و default از چپ به راست (ltr) می باشد.در مورد متون و جملات فارسی باید با کمک روشی جهت نمایش پیش فرض را به “راست به چپ” تغییر دهید. شناسه یا attribute ی به نام dir یا همان direction این کار را برای شما انجام میدهد. این شناسه دارای دو مقدار ممکن میباشد :
dir=”ltr”   ( Left-to-right text. )چپ به راست
dir=”rtl”   ( Right-to-left text). راست به چپ

مثلا برای نمایش جمله فارسی “سلام بر دنیای وب!” با کمک عناصر p یا div کافی است که به یکی از شکلهای زیر عمل شود:
<p dir=”rtl”> سلام بر دنیای وب </p>
<div dir=”rtl”> سلام بر دنیای وب </div>

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

<p> , <div> , <html> , <body> , <table> , <tr> , <td> , <h1 … h6> , <input> , <pre> , <select> , <span>

درباره ی حسینعلی جانی نژاد

با سلام خدمت دوستان عزیز، فارغ التحصیل رشته IT هستم و در زمینه برنامه نویسی وب و طراحی سایت فعالیت می کنم.

پاسخ دهید