بررسی برخی از تگ های اچ تی ام ال (Html)
در طراحی صفحات وب از تگ اچ تی ام ال (html tag) برای ایجاد تغییرات در متن ویا قرار دادن کدهای قالب و برنامه نویسی استفاده می شود.
این مقاله به بررسی چند نمونه از تگ های پرکاربرد اچ تی ام ال می پردازد.
نحوه نگارش تگ اچ تی ام ال
تگ ها (یا برچسب ها) به دو صورت نگارش می شوند:
تگ های تک خطی: تگ هایی که خودشان شامل یک شیء (ماننده تصویر، دکمه، باکس…) یا یک تغییر (مانند شکستن خط) در صفحه می باشند.
تگ های تک خطی گاها هیچ تغییری در ظاهر صفحه نمی دهند.
نحوه نگارش تگ تک خطی به صورت زیر است:
<tagname />
تگ های محتوایی: تگ هایی که به یک محتوا ویا متن استایل یا ویژگی خاصی را می بخشند.
<tagname><tagname/>
<tagname> محتویات (Content) <tagname/>
تگ DOCTYPE:
این تگ همیشه به صورت زیر باید در ابتدای فایل هایی که با HTML طراحی می شوند قرار گیرد:
<!DOCTYPE html>
دندانه دار نویسی: دندانه دار نویسی به این معناست که هر تگ اچ تی ام ال محتوایی در خط جدید آغاز و در خطی دیگر پایان یابد و قبل از نام تگ، یک تب (tab) فاصله قرار گیرد.
اگر قبلا یک تب فاصله وجود داشت، یک تب فاصله به آن اضافه شود.
دندانه دار نویسی اجباری نیست، اما برای طراحی با کیفیت بالاتر لازم است.
اتریبیوت یا صفت (Attribute):
اتریبیوت ها تنظیماتی هستند که در مقابل نام تگ قرار می گیرند.
مقدار اتریبیوت در داخل ” ” بعد از مساوی قرار می گیرد.
اتریبیوت ها برای تگ ها از پیش تعریف شده اند.
<tagname attribute1=”value” attribute2=”value” />
<tagname attribute1=”value” attribute2=”value”> [Content] </tagname>
بررسی چند نمونه تگ اچ تی ام ال
تگ html: این تگ بصورت اجباری کل محتوای صفحه را باید در بر بگیرد و بعد از تگ Doctype قرار می گیرد.
<!DOCTYPE html>
<html>
</html>تگ head و تگ body: از تگ head برای قرار دادن تنظیمات کلی صفحه، تنظیمات موتورهای جستجو و … استفاده می شود و از تگ body برای قرار دادن محتویات صفحه استفاده می شود.
به صورت زیر:
<!DOCTYPE html>
<html>
<head>
[webpage settings]
</head>
<body>
[webpage content]
</body>
</html>گ عنوان صفحه (title): از تگ عنوان برای تعریف عنوان صفحه که در بالای صفحه (روی تب های مرورگر) نوشته می شود استفاده می گردد. این تگ اچ تی ام ال در قسمت تنظیمات (head) تعریف می شود.
تگ توپر (b): برای تو پُر کردن محتویات متنی استفاده می شود.
تگ شکستن خط (br): برای نمایش ادامه متن در خط بعدی استفاده می شود. این تگ به صورت تک خطی نگارش می شود.
تگ ایتالیک (i): این تگ نوشته را با اندکی زاویه (مایل) نمایش می دهد.
تگ خط زیر متن (u): این تگ زیر محتویات متنی داخل خود خط می کشد.
تگ متن متحرک (marquee): برای قرار دادن متن های متحرک در کدهای اچ تی ام ال خود، میتوانید از تگ <marquee> استفاده کنید. برای حرکت از چپ به راست متن، از اتریبیوت و مقدار “direction=”right و برای حرکت از راست به چپ نیز از “direction=”left استفاده کنید.
تگ های عنوان
تگ های عنوانی شامل <h1><h2><h3><h4><h5><h6> هستند و عناوین پاراگراف های متن را در سایز های مختلف نمایش می دهند.
تگ های عنوانی در تعریف کلمات کلیدی برای موتورهای جستجو کاربرد ویژه های دارند.
تگ پاراگراف (p)
از تگ <p> برای جداسازی پاراگراف های صفحه استفاده می شود.
اتریبیوت استایل در پارگراف (style): از این اتریبیوت برای تغییر ویژگی هایی همچون رنگ متن، راست چین، چپ پین، فونت، سایز فونت و … استفاده می شود.
مقادیر استایل به صورت دستورات css نوشته می شود:
مقدار:نوع ویژگی;
مثال:
color:red;
مثال زیر، شیوه استفاده از تمام این تگ ها را نشان می دهد:
<!DOCTYPE html>
<html>
<head>
<title>عنوان صفحه</title>
</head>
<body>
<h3>عنوان پاراگراف<h3>
<p style="color:red;">محتویات پاراگراف</p>
متن ۱<br />متن ۲<b>متن ۳</b>
<i>متن ۴</i><u>متن ۵</u>
<marquee direction="left" >
Hello
</marquee>
</body>
</html>جدول ها
جدول ها نیز با استفاده از تگ ها قابل نمایش هستند. جدول ها چهار تگ اصلی دارند:
۱- تگ جدول (table): این تگ اچ تی ام ال، جدا کننده قسمت جدول از بقیه محتویات صفحه است و تنظیمات کلی جدول در اتریبیوت های این تگ قرار می گیرند.
۲- تگ سطر (tr): این تگ برای جدا سازی سطر ها بکار می رود. برای رسم جدول ابتدا باید به تعداد سطر ها این تگ قرار داده شود.
۳- تگ عنوان (th): این تگ در داخل تگ سطر اول برای عناوین جدول به کار می رود.
۴- تگ ستون های جدول (td): در سطر های بعدی، به ازای هر ستون یک تگ ستون استفاده می شود.
اتریبیوت استایل در جداول
این اتریبیوت (style) در جداول برای تنظیم کادرها، رنگ و استایل جدول کاربرد دارد.
ویژگی بُردِر (border): این ویژگی برای تنظیم کادر مورد استفاده قرار می گیرد. مقادیر قابل تنظیم در این ویژگی شامل رنگ، ضخامت و نوع رنگ می شود.
مثال:
border: 3px black solid;
منظور از ۳px ضخامت کادر به اندازه سه پیکسل است.
منظور از black رنگ کادر است.
و منظور از solid نوع رنگ است که قابل نمایش شود.
دستور زیر کادر های هر سطر و ستون از جدول را به هم می چسباند و بهتر از در تگ table تعریف شود:
border-collapse: collapse;
مثال زیر جدولی را همراه با کادر رسم می کند:
<!DOCTYPE html>
<html>
<head>
<title>عنوان صفحه</title>
</head>
<body>
<table style="border-collapse: collapse;">
<tr>
<th style="border: 3px solid black;">عنوان ۱</th>
<th style="border: 3px solid black;">عنوان ۲</th>
</tr>
<tr>
<td style="border: 3px solid black;">سطر ۱ ستون ۱</td>
<td style="border: 3px solid black;">سطر ۱ ستون ۲</td>
</tr>
<tr>
<td style="border: 3px solid black;">سطر ۲ ستون ۱</td>
<td style="border: 3px solid black;">سطر ۲ ستون ۲</td>
</tr>
</table>
</body>
</html>مرجع نسبتا کامل از تگ ها و اتریبوت های HTML در: w3schools
مطالب آموزشی بیشتر در بلاگ
نوشته شده توسط: محمد مهدی کفش کنان – مهندس الکترونیک و برنامه نویسی فول استک و بنیانگذار WiCardTech