در مقاله آموزشی html چیست با قسمت های مختلف اچ تی ام ال آشنا شدیم و به این موضوع رسیدیم که html یک زبان برنامه نویسی نیست و تنها یک قالب جهت نمایش المان های دیجیتال بر روی صفحه رایانه است که مرورگرهای مختلف همچون گوگل کروم، فایرفاکس و اینترت اکسپلورر قادر به خواندن آن هستند. در این قسمت می خواهیم با تگ های اچ تی ام ال آشنا شویم و بررسی کنیم که هر کدام از این تگ ها چه نقشی را بازی می کنند و کدام یک از آن ها به عنوان تگ اصلی، و کدام یک به عنوان تگ هایی شناخته می شوند که زیاد کاربردی نبوده و منقرض شده اند ! پس با ما در این قسمت از آموزش پایگاه دانش آسا اسکریپت همراه باشید.
فهرست محتوای مقاله
- کاربرد تگ های اچ تی ام ال
- تگ های اصلی فرمت Html
- بررسی و آشنایی با تگ های اچ تی ام ال
- جمع بندی
کاربرد تگ های html
اگر بخواهیم به زبان ساده تگ های اچ تی ام ال را معرفی کنیم بهتر است آن را با یک مثال بسیار ساده که تقریبا (البته قبلا) همیشه با آن سر و کار داشتیم شروع کنیم. تا به حال همگی ما صفحات یک روزنامه یا کتاب را ورق زده ایم. نوشته های روزنامه در قالب های مختلف مثل پاراگراف، سرتیتر، عکس، ستون های کناری و خیلی موارد دیگر دسته بندی می شوند. در واقع برای این که یک روزنامه به چاپ نهایی برسد و در دسترس عموم قرار گیرد مراحل مختلفی را طی میکند. به طور خلاصه در مرحله اول نویسنده مطلب نوشته شده را آماده کرده و به دست تاپیست می دهد. تایپیست متن مورد نظر را تایپ کرده و به صفحه آرا روزنامه تحویل می دهد. صفحه آرا براساس اولویت متن خبری و عکس های موجود از خبر، آن را در قالب یک صفحه روزنامه پیاده سازی و طراحی می کند و دست آخر آن را به چاپ خانه جهت اطلاع رسانی عموم تحویل می دهد. صفحات وب نیز همین مراحل را طی میکند با این تفاوت که در اینجا رسانه به صورت دیجیتال در دسترس عموم قرار میگیرد. حال ممکن است این سوال مطرح شود که نقش تگ های html کجاست ؟ در واقع تگ های اچ تی ام ال قسمت هایی هستند جهت قرار گیری عنوان ها، نوشته ها، پاراگراف ها و عکس که در کنار یک دیگر با استفاده از فرم دهی css قرار می گیرند. در کل تگ ها شاخ و برگ تشکیل دهنده صفحه هستند که هر کدام در جای خود وظیفه ای را بر عهده دارند.
تگ های اصلی فرمت Html
همانطور که در مقاله آموزشی Html چیست مطرح شد اچ تی ام ال از دو بخش اصلی تشکیل شده است. Head و body که در درون تگ اصلی html قرار می گیرد.
تگ هایی که در درون قسمت head قرار می گیرند عبارتند از:
- <title>
- <base>
- <link>
- <meta>
- <script>
- <noscript>
و تگ هایی که در درون قسمت Body قرار می گیرند عبارتند از:
- <div>
- <a>
- <img>
- <span>
- </br>
- </hr>
- <ul>
- <li>
- <ol>
- <i>
- <p>
- <table>
- <tr>
- <td>
- <h1>
نکته قابل ذکر این است که این html tags ها تمامی موارد موجود نمی باشند و جهت سهولت تنها به تعدادی کاربردی اکتفا کرده ایم. جهت مطالعه کلیه موارد می توانید به این لینک مراجعه نمائید.
بررسی و آشنایی با تگ های اچ تی ام ال
از تگ های هدر که در بالای سایت قرار می گیرند شروع می کنیم:
تگ title:
تگ سر تیتر یا title یک تگ باز و بسته است. این تگ حاوی متنی جهت نمایش در بالای صفحه مرورگر است که در جست و جوهای گوگل از آن به عنوان سر تیتر یاد می شود و همانی است که بر روی آن کلیک می کنیم.
<head>
<title>HTML Reference</title>
</head>
تگ base:
تگ پایه یا base محلی جهت تعریف یک لینک پایه است !! حالا یعنی چه این مورد با یک ساده به صورت زیر مشخص می شود.
<!DOCTYPE html>
<html>
<head>
<base href="https://free-learn.ir/category/web_design/">
</head>
<body dir="rtl">
<a href="html_tutorial">آموزش HTML</a> | <a href="css_tutorial">آموزش CSS</a>
</body>
</html>
همانطور که می بینید یک تگ اولیه تعریف کرده ایم و تنها کافی است که در لینک های درون بدنه بقیه لینک مورد نظر را بنویسیم و از بازنویسی قسمت اولیه لینک خودداری به عمل آوریم. این تگ دیگر منسوخ شده است و من به شخصه تا حالا جایی ندیدم که از این روش استفاده کنند.
تگ link:
یکی از مهمترین تگ های اچ تی ام ال تگ لینک است. این تگ وظیفه آدرس دهی استایل های خارجی و تعریف ایکون صفحه را بر عهده دارد و بهتر است در قسمت head مورد استفاده قرار گیرد.
<head>
<link rel="stylesheet" type="text/css" href="mystyle.css">
<link href="files/icon.png" rel="icon" sizes="20x20">
</head>
تگ meta:
کاربرد تگ متا بیشتر برای سئو سایت است. در درون این تگ می توانیم اطلاعات مختلفی را وارد کنیم از جمله توضیحات صفحه، کلمات کلیدی، نام قالب و نام طراح به همراه لینک صفحه شخصی سازنده. این تگ تنها برای موتورهای جست و جو قابلیت خوانایی دارد و کاربران آن را در صفحه مشاهده نمی کنند.
تگ script:
این تگ نیز مانند تگ قبلی یکی از مهمترین تگ های html است که برعکس تگ link در تمامی قسمت های سند html می توان از آن استفاده کرد. وظیفه این تگ معرفی اسکریپت های صفحه است که معمولا تنها از خانواده جاوا اسکریپت در آن استفاده می شود.
<script>
document.getElementById("demo").innerHTML = "Hello JavaScript!";
</script>
تگ noscript:
این تگ تنها زمانی اجرا می شود که هیچ گونه اسکریپتی بر روی صفحه لود نشود و یا کاربر اجازه لود شدن را به آن نداده باشد. در این صورت تنها محتویات درون این تگ باز و بسته لود می شود.
<noscript>Your browser does not support JavaScript!</noscript>
تگ div:
این تگ به صورت تگ باز و بسته می باشد که در درون بدنه body قرار می گیرد و مخفف کلمه division به معنی قسمت است و در واقه یک تگ غیر خطی است. همانطور که از نام این tag پیداست این تگ تعریف کننده قسمت های مختلف دیداری هر قسمت از صفحه اچ تی ام ال است که در بالاترین سطح قرار می گیرد و تگ های دیگر در درون آن تعریف می شوند. بزارید بر گردیم به مثال روزنامه، در روزنامه هر صفحه دارای قسمت های مختلفی است که در کنار هم قرار گرفته اند و همواره شامل پاراگرافی از کلمات هستند. در اینجا div هم همین نقش را ایفا می کند و ساختار مختلفی را در بر می گیرد که بر اساس طراحی صفحه معمولا به شکل تو در تو قرار می گیرند.
تگ a:
تگ a جهت مشخص کردن یک anchor می باشد. حالا سوال اینه که anchor چیست ؟ ترجمه انکر در انگلیسی به معنی لنگر کشتی است ! حال این مسئله پیش میاد که چرا به این tag لنگر می گیم ؟ در واقع جواب این سوال به سال 1991 بر می گردد. این تگ جزو اولین استاندارد ها بوده که برای ابر متن ها در ANSI تعریف شده است. در آن موقع این تگ جهت معرفی یک پاورقی مورد استفاده قرار می گرفت که به آن اشاره می کردند و در کنار آن علامت یک لنگر را قرار می دادند اما در قالب های جدید جهت اتصال به لینک های مختلف از آن استفاده می شود.
تگ img:
این تگ یک تگ خطی جهت نمایش عکس در اسناد html مورد استفاده قرار می گیرد. این تگ یک تگ تنها است و هیچگاه به صورت باز و بسته از آن استفاده نمی شود. لینک عکس به صورت attribute src در این تگ مورد استفاده قرار می گیرد.
تگ span:
این تگ یک تگ خطی است که جهت دسته بندی کردن عناصر خطی مورد استفاده قرار می گیرد و قابلیت این را دارد که استایل های مختلفی را در قسمت های مختلف به آن اختصاص دهیم. مثلا فرض کنید شما می خواهید یک خط متن با کلمات خاصی که دارای رنگ های مختلفی هستند داشته باشید. از تگ P که نمی شود استفاده کرد ! پس می بایست حتما از تگی استفاده ببریم تا بتوان یک خط را تکه تکه کنیم. این تگ، تگ span است که می توان از آن به صورت خطی بهره برد.
تگ </br>
از این تگ جهت انتقال عناصر به خط بعدی استفاده می بریم. در طراحی های قالب های نوین html این تگ دیگر منسوخ شده است و استایل های جدید css جای این تگ را پر کرده اند ولی با این وجود شما استفاده از آن را در سایت های مختلف می بینید.
تگ </hr>
این تگ نیز مانند برادر بزرگتر خود تقریبا منسوخ شده است و کمتر از آن در طراحی وب سایت بهره می بریم. وظیفه این تگ ایجاد یک خط فاصله در درون یک div است که می توان از آن به عنوان یک جدا کننده نام برد.
تگ <ul>
تگ ul مخفف عبارت unordered list است که یک تگ غیر خطی است. همان طور که می دانیم تگ های غیر خطی جهت دسته بندی اطلاعات مورد استفاده قرار می گیرند و عناصر داخلی نیز دارند. عنصر داخلی تگ ul تگی است به نام li که در درون این تگ قرار می گیرد. از تگ ul معمولا در ایجاد منو های افقی و خطی استفاده می شود. و کاربرد اصلی آن در navbar یا همان منوی اصلی بالای هر سایت است. البته تگ div با استایل های پیشرفته css جایگزین مناسبی برای ul و li ها هستند.
<ul>
<li>سلام</li>
<li>خوبی</li>
<li>من صادق</li>
<li>هستم</li>
</ul>
تگ <li>
تگ li زیر مجموعه تگ ul است. این تگ اجبارا می بایست همواره به تگ ul بچسبد و المان های داخلی آن را معلوم کند.
تگ <ol>
تگ ol مخفف عبارت ordered list است. این تگ برادر دو قلوی تگ ul است. تنها تفاوت این دو در این است که تگ ul به صورت نا منظم دسته شدی و هیچ شماره خاصی برای آن وجود ندارد ولی ol دارای شماره منحصر به فرد بوده و می توان به آن اشاره کرد.
تگ <i>
از این تگ جهت نمایش متن به صورت ایتالیک یا مورب استفاده می شود. این تگ معادلی به نام em نیز دارد که همین کار را انجام می دهد و تنها تفاوت آن در این است که تگ em جهت تاکید بر روی یک عبارت و یا کلمه مورد استفاده قرار می گیرد. تگ em تقریبا منسوخ شده است و از تگ i نیز معمولا جهت نمایش آیکون هایی مثل fontawesome بهره می بریم.
تگ <p>
از این تگ جهت نمایش یک پاراگراف می توان بهره برد. که می تواند شامل تعداد زیادی کاراکتر باشد. و به وفور در سایت از آن استفاده می شود.
تگ های <table>، <td> و <tr>
همانطور که از نام این تگ پیداست این تگ مخصوص ترسیم جدول در صفحات وب است. جهت ترسیم جدول ابتدا یک تگ باز و بسته <table> را قرار می دهیم سپس در درون آن با استفاده از تگ باز و بسته <tr> یک سطر را مشخص می کنیم. سپس در درون تگ tr از تگ باز و بسته td جهت وارد کردن عناصر بهره می بریم. بدین شکل یک ساختار جدول را خواهیم داشت.
<table>
<tr>
<td>محتوای جدول</td>
<td>محتوای جدول</td>
</tr>
</table>
تگ سری <h1>
سری تگ های هدر که شامل موارد <h1>، <h2>، <h3>، <h4>، <h5>، <h6> است به ترتیب دارای اندازه فونت هایی هستند که از بزرگترین آن ها h1 شروع شده و به h6 ختم می شود. این تگ به صورت تک خطی باز و بسته مورد استفاده قرار می گیرد و با قرار گرفتن در هر المان بقیه المان ها را به خط بعدی منتقل می کند. ممکن است این سوال به وجود آید که خوب می توان از تگ <span> به جای این تگ استفاده برد ولی مسئله اینجاست که پس سئو چه می شود ؟ موتورهای جست و جو براساس تگ های h صفحه را می خوانند به طوری که می بایست حتما یک تگ اولیه h1 و چندین تگ h2 حتما در صفحه وجود داشته باشد تا روی سئوی سایت موردی به وجود نیاید.
جمع بندی:
در این آموزش با تگ های اولیه html 4 که تا به امروزه نیز خیلی مورد استفاده قرار می گیرند آشنا شدیم. این تنها بخشی از تگ های html است. اگر به این کدها تگ های جدید و کاربردی html 5 را نیز اگر اضافه کنید می بینید که به چه سهولتی می توان با html یک قالب بسیار زیبا را ایجاد کرد.