لیست کامل تگ های html

محمد هاشمی طالب بیگی آموزش HTML

در این بخش از آموزش html از تاپ سایت 98 به سراغ لیست کامل تگ های html می رویم و با آنها همراه با مثال آشنا می شویم.

تگ h1 :

تگ h1 برای قرار دادن عنوان صفحه وب استفاده می شود.

عنوان ها شامل تگ های h1 تا h6 می باشند. عناوین از اهمیت زیادی در صفحات وب برخوردار میباشند.

معمولا مهم ترین عنوان را در تگ h1 و کم اهمیت ترین عنوان را در تگ h6 قرار می دهیم.

عناوین پراهمیت در h1,h2 قرار داده می شود و هر چه اهمیت آنها کمتر شود در h3,h4,h5,h6 قرار داده می شود.

در زیر یک مثال از عناوین را خواهید دید.

برای اجرای کد کافی است که کدها را در یک فایل با نام مثلا t.html ذخیره نمایید و سپس اجرا کنید.

توجه داشته باشید که پسوند فایل html باشد وگرنه کد اجرا نخواهد شد.

<!DOCTYPE html>
<html>
<body>
<a href="https://topsite98.com/">Click me!</a>
<h1>TopSite98.com</h1>
<h2>TopSite98.com</h2>
<h3>TopSite98.com</h3>
<h4>TopSite98.com</h4>
<h5>TopSite98.com</h5>
<h6>TopSite98.com</h6>
</body></html>

تگ p :

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

ولی یکی از معایبی که این تگ دارد نشان دادن افقی و پشت سر هم مطالب هست که جالب نیست و برای رفتن خط بعد در نوشتن مطالب‌ هر بار باید از تگ br استفاده کرد که زیاد جالب نیست

ولی در عوض استفاده از تگ pre را پیشنهاد میکنم که فرقش با تگ p این است که همان طوری که مطالب‌ را شما می نویسید به همان شکل هم در خروجی به نمایش می‌گذارد و کد نویسی را آسان می کند

تگ ul , ol :

تگ ul , ol برای قرار دادن لیست در صفحات htmlاستفاده می شود.

لیست ها نیز دارای اهمیت زیادی در صفحات html هستند برای ساخت منو یا لیست های مختلف می توان از تگ ul و تگ ol استفاده کرد.

این تگ ها قابليت بسیار بالایی دارند که پس از تسلط به آن ها شما می توانید منو های کشویی یا تو در تو و با قابلیت های مختلف ايجاد و در بخش ها و صفحات مختلف سایت از آن بهره برد

تگ a :

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

در مثال زیر نحوه استفاده از آنها را مشاهده خواهید کرد. برای اجرای آن کد را در یک فایل html ذخیره کرده و اجرا کنید.

<!DOCTYPE html>
<html>
<body>
<a href="https://topsite98.com/">Click me!</a>
<p>HTML list ul topsite98.com</p>
<ul>
<li>html</li>
<li>css</li>
<li>jquery</li>
<li>php</li>
</ul>
<p>html list ol</p>
<ol type="1">
<li>html</li>
<li>css</li>
<li>jquery</li>
<li>php</li>
</ol>
</body></html>

تگ img :

تگ img برای قرار دادن تصویر در صفحه html بکار می رود.

همان طور که می‌دانید تصاویر بخش مهمی از وب‌سایت ما محسوب می‌شوند و برای افزايش تعامل کاربر با سایت ما خیلی اهمیت دارند و در انتخاب آن ها باید دقت زیادی کرد و این تگ هم مثل سایر تگ ها ویژگی های مختلفی دارد که یکی از مهم ترین این خصوصیات alt هست که درآن مقدار متنی جایگزینی برای عکس قرار میدهم که به عوامل مختلفی مثل کاهش سرعت اینترنت که باعث لود نشدن عکس می‌شود این متن جایگزین به نمایش در می آید که در بحث سئو و بهینه سازی سایت برای موتور جستجو اهمیت بسیار بالایی دارد و باید در انتخاب آن دقت کرد و متن مناسبی را قرار داد

تگ table :

تگ table برای ایجاد جدول در صفحات html مورد استفاده قرار می گیرد که این جدول ساخته شده در html دارای سطر و ستون مشخصی هست که این بخش ها را به ترتیب با tr و td ایجاد میکنیم و حتی با th هم می‌توان عنوان های برای مقادیر و اطلاعات موجود در این جدول ایجاد کرد

تگ div :

تگ div برای ایجاد یک بلاک یا بخش استفاده می شود.

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

طرح های بسیار قشنگی ایجاد می شود که اکثر این سایت های که شما در روز از آن ها دیدن می‌کنید استفاده مکرری از این تگ کرده اند

تگ form :

تگ form برای ایجاد فرم در صفحات وب بکار می رود که دارای عناصر مختلفی می باشد

که شما در واقع از سایت های مختلفی که در روز دیدن می کنید و حتی در بعضی آن ها ثبت نام می کنید و یا چیزی سفارش می دهید دارید از این تگ بهره می‌برید

این تگ مهم در html مسئول گرفتن اطلاعات ورودی نظیر نام، تلفن، آدرس و… هست که شما این موارد را پر می کنید و برای آن سایت ارسال می کنید که ویژگی های مختلفی دارد که شما وقتی مهارت استفاده از آن را پیدا کردید می توانید فرم های بسیار جذاب و شکیل ایجاد و در سایت خود استفاده کنید

اگر به دنبال کار پاره وقت هستید با ما تماس بگیرید.

اگر سوال یا نظری دارید در بخش کامنت ها بنویسید.اگر موضوع خاصی مد نظر شماست که در سایت موجود نیست در بخش کامنت ها بنویسید