آموزش PHP و Laravel از پایه تا پیشرفته همراه با پروژه‌های عملی
آموزش برنامه نویسی - تاپ دمی
ورود عضویت
پر کاربرد ترین تگ های html

پر کاربرد ترین تگ های html

طراحی وب

24 اردیبهشت، 1402

در این مقاله ابتدا با ساختار سند html آشنا شده سپس به معرفی پرکاربرد ترین تگ های html مانند :img ، لینک دهی ، لیست ها و ... می پردازیم.

html چیست ؟

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

همچنین در دوره آموزش html می توانید به صورت رایگان شروع یادگیری این زبان نشانه گذاری کنید.

ساختار سند html

به صورت کلی سند html از سه تگ اصلی با نام های html، body، head ایجاد شده است و درون هر کدام از این بخش ها کد های مشخصی قرار می گیرند.

تگ HTML

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

نحوه نوشتن :

  <html> Statements... </html>

مثال:

<html>
    <head>
        <title>topdemy.ir</title>
    </head>
    <body> page contents </body>
</html>

تگ Head

تگ head شامل تمام فایل های HTML می باشد ، برای مثال لینک های css ، متا تگ ها و... درون این بخش قرار می گیرند.

نحوه نوشتن :

<head> Statements... </head>

مثال:

<head>Contains elements describing the document</head>

تگ Body

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

نحوه نوشتن :

<body> Statements... </body>

مثال:

<body>The content of your HTML page</body>

تگ Title

این تگ برای تعریف عنوان سند HTML استفاده می شود.

نحوه نوشتن :

<title> Statements... </title>

مثال:

<title>topdemy.ir</title>

تگ Heading

این تگ برای تعریف عناوین با سایز های مختلف در سند HTML استفاده می شود ، که شامل تگ h1 تا h6 است.

نحوه نوشتن :

<h1> Statements... </h>
<h2> Statements... </h2>
<h3> Statements... </h3>
<h4> Statements... </h4>
<h5> Statements... </h5>
<h6> Statements... </h6>

مثال:

<h1>Heading 1 </h1> 
<h2>Heading 2 </h2>
<h3>Heading 3 </h3>
<h4>Heading 4 </h4>
<h5>Heading 5 </h5>
<h6>Heading 6 </h6>

تگ Paragraph

این تگ برای تعریف محتوا به صورت پاراگراف در یک سند HTML استفاده می شود.

نحوه نوشتن :

<p> Statements... </p>

مثال:

<p>topdemy.ir</p>

تگ Bold

این تگ برای تعیین محتوای بولد شده در یک سند HTML استفاده می شود.

نحوه نوشتن :

<b> Statements... </b>

مثال:

<b>topdemy.ir</b>

تگ Italic

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

نحوه نوشتن :

<i> Statements... </i>

مثال:

<i>topdemy.ir</i>

تگ Small

این تگ برای نوشتن متن با سایز کوچک استفاده می شود.

نحوه نوشتن :

<small> Statements... </small>

مثال:

<small>topdemy.ir</small>

تگ Underline

این تگ برای قرار دادن یک خط زیر متن استفاده می شود.

نحوه نوشتن :

<u> Statements... </u>

مثال:

<u>topdemy.ir</u>

تگ Deleted text

این تگ بر روی یک متن خط می کشد.

نحوه نوشتن :

<strike> Statements... </strike>

مثال:

<strike>topdemy.ir</strike>topdemy.ir

تگ a

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

نحوه نوشتن :

<a href="..."> Statements... </a>

مثال:

 <a href="https://www.topdemy.ir/">
topdemy.ir</a>

تگ li

از این تگ برای ایجاد فهرست استفاده می شود.

نحوه نوشتن :

<li> Statements... </li>

مثال:

<li>List item 1</li>
<li>List item 2</li>

تگ ol

از این تگ برای ایجاد فهرستی با ترتیبی مشخص استفاده می شود.

نحوه نوشتن :

<ol> Statements... </ol>

مثال:


<ol>
     <li>List item 1</li>
     <li>List item 2</li>
     <li>List item 3</li>
     <li>List item 4</li>
</ol>

تگ ul

از این تگ برای ایجاد فهرستی بدون ترتیب خاص استفاده می شود.

نحوه نوشتن :

<ul> Statements... </ul>

مثال:

<ul>
     <li>List item 1</li>
     <li>List item 2</li>
     <li>List item 3</li>
     <li>List item 4</li>
</ul>

تگ Comment

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

نحوه نوشتن :

<!-- Statements... -->

مثال:

<ul>
     <li>List item 1</li>
     <li>List item 2</li>
     <li>List item 3</li>
     <li>List item 4</li>
</ul>

تگ Image

برای اضافه کردن تصاویر به سند html از این تگ استفاده می شود.

نحوه نوشتن :

<img>

مثال:

<img src="..."alt="topdemy.ir Image">

تگها:

#html #آموزش_html #ساخت_وب_سایت

توسعه دهنده وب

شروع آشنایی من با دنیای برنامه نویسی 9 سال پیش بود ، اول مسیر با وردپرس آشنا شدم و بعد از اون شروع به یادگیری زبان جاوا اسکریپت کردم و رفته رفته سعی کردم یک برنامه نویس Front-end بشم که به مبحث گرافیک هم علاقه منده و هر روز تلاش میکنه تا پیشرفت کنه و اگر تجربه ای داره با بقیه به اشتراک بزاره.

محبوب ترینها
دسته بندی مقالات
پی اچ پی
طراحی وب
جاوا اسکریپت
کاربردی
لاراول
دیتابیس

این مقاله چقدر مفید بود ؟

مقالات مشابه