مهمترین تگهای HTML جهت یادگیری سریع
مقالات طراحی سایتچگونه میتوان در کمتر از چند دقیقه به اصلی ترین تگهای زبان HTML مسلط شده و کدنویسی را شروع کرد یا ساختار کدهای HTML یک پروژه را درک کرد ؟ این مقاله برای شماست !!..!!
دوستانی که علاقمند به یادگیری HTML هستند ، حتی با وجود اینکه این زبان بسیار ساده است و در کمتر از چندروز میتوان به آن مسلط شد ، ممکن است به هر دلیلی ، مثلا عجله برای تحویل یک پروژه دانشجویی ، یا الزام به یادگیری سریع تر برای استفاده بهینه از زمان و … قصد دارند تا مهم ترین بخش های html را فعلا یادگرفته و کار خود را پیش ببرند و برای یادگیری سایر قسمت ها بعدا که زمان اضافی دارند و برخی تمرینات را انجام دادهاند اقدام کنند .
توجه داشته باشید که در این مقاله قصد نداریم تا از تاریخچه زبان HTML و مواردی از این دست صحبت کنیم ، هدف اصلی در این مقاله معرفی پرکاربردترین تگ هایی است که با یادگیری آنها میتوانید بیش از 70 یا 80 درصد پروژه های خودتان را اجرا کنید . اول از هرچیزی توجه داشته باشید که ساختار اصلی و پایه HTML در نسخه 5 را باید همیشه به شکل زیر در داخل فایل های پروژه خود ایجاد کنید :
<!DOCTYPE html>
<html lang="fa" dir="rtl">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
</head>
<body>
</body>
</html>در این ساختار تگ های اصلی شامل HTML و head و body هستند . در کل با داشتن این ساختار اولیه شما میتوانید از تمامی تگ هایی که در ادامه معرفی خواهد شد داخل تگ body استفاده کنید . هر المانی که داخل دو تگ باز و بسته body قرار گیرد برای شما خروجی خواهد داشت .
تگ های کلی وفرمتینگ در HTML
اول از تگ های فرمتینگ و کلی شروع می کنیم ، تگ های فرمتینگ منظور تگ هایی هستند که برای بخش کار با متن ها استفاده میشوند .
- تگ <meta>
این تگ در بین تگ <head> جهت تنظیم ویژگی های پروژه استفاده می شود
- تگ <!–…–>
برای ایجاد کامنت داخل کدها استفاده می شود
- تگ <script>
برای متصل کردن فایل های جاوا اسکریپتی به پروژه به کار می رود
- تگ <style>
برای متصل کردن فایل های Css به پروژه به کار می رود
- تگ <div>
مهم ترین تگ برای ایجاد بخش بندی و انجام چیدمان داخل صفحه است ، تقریبا تمامی بخش های یک وب سایت داخل این تگ ها قرار می گیرند
- تگ <a>
این تگ برای لینک کردن هر المانی ازجمله متن ، تصویر و … به کار می رود ، برای ایجاد لینک در داخل یا خارج از پروژه به آن نیاز دارید
- تگ <img>
از این تگ برای قراردادن و نمایش تصاویر در صفحه استفاده می شود
- تگ <br>
برای ایجاد یک خط شکست به کار میرود
- تگ <h1> to <h6>
برای عنوان گذاری در داخل متن ها استفاده می شود ، تگ H1 دارای بیشترین الویت از نظر محتوایی داشته و به همین ترتیب H2 کمتر از H1 تاااا به H6 برسد که کمترین الویت را دارد
- تگ <p>
برای قراردادن محتوای متنی از این تگ استفاده می شود که به معنی پاراگراف است ، در هربخش که نیاز به محتوا است برای مثال توضیحات مقاله ، توضیحات محصول و … باید این محتوا داخل تگ <p> قرار گیرد
- تگ <ul>
این تگ برای ساخت لیست های غیرترتیبی استفاده می شود خصوصا برای ساخت منوهای ناوبری سایت باید از این نوع لیست استفاده کرد
- تگ <li>
این عناصر داخل تگ <ul> استفاده می شوند و درحقیقت لیست آیتم ها را به وجود می آورند
- تگ <span>
یکی از تگ هایی که میتوانید متن های غیر مهم و کوچک را داخل آن قرار دهید
- تگ <strong>
برای بولد کردن و پررنگ کردن یک قسمت از متن به کار میرود
- تگ <hr>
برای ایجاد یک خط افقی در تمام عرض صفحه استفاده می شود
- تگ <table>
برای ساخت جدول به کار میرود ، تگ <tr> برای ایجاد ردیف داخل جدول و تگ <td> برای ایجاد سلول های جدول داخل تگ <tr> به کار میرود
تگ های معنایی HTML نسخه 5
تگ های معنایی درحقیقت تگ هایی هستند که اولا معنی عملکرد آنها از نام تگ مشخص است ، و دوم اینکه در صفحه ، معنی و مفهوم خاصی را منتقل می کنند
- تگ <article>
یکی از تگ های معنایی اچ تی ام ال 5 ، برای بخشی به کار میرود که محتوای توصیفی همچون یک مقاله داریم و بهتر است کل محتوای مقاله داخل این تگ قرار گیرد
- تگ <main>
برای معرفی اصلی ترین قسمت صفحه یا یک محتوا به کار میرود
- تگ <section>
این تگ برای بخش بندی قسمت های مختلف صفحه به کار میرود برای مثال در داخل صفحه اصلی سایت ، اسلایدر یک section است ، بخش آخرین محصولات یک section ، بخش آخرین مقالات یک section و …
- تگ <aside>
از دیگر تگ های معنایی اچ تی ام ال 5 ، برای قراردادن محتوای سایدبار ها استفاده می شود
- تگ <figure>
تگ img در داخل آن قرار گرفته و به تصویر معنی میدهد
- تگ <header>
برای بخش های بالایی هر المانی از صفحه میتواند به کار رود . مثلا برای بالاترین قسمت سایت ، و یا بالاترین قسمت یک جعبه برای نمایش جزئیات مقالات سایت
- تگ <footer>
برای محتوای انتهایی هربخشی میتواند استفاده شود ، ازجمله محتوای انتهایی خود وب سایت در صفحه اصلی ، یا محتوای انتهایی یک جعبه نمایش اطلاعات محصول و …
- تگ <nav>
منوهای سایت میتوانند داخل تگ <nav> قرار گرفته و معنی درست را منتقل کنند
- تگ <video>
برای قراردادن ویدئو در سایت
- تگ <audio>
برای قراردادن فایل های صوتی داخل سایت استفاده می شود
برای بخش فرم ها
فرم ها از مهم ترین قسمت های داخل هر سایت به شمار میروند و لازم است تا با اصلی ترین تگ های این بخش آشنایی داشته باشید
- تگ <form>
اصلی ترین تگ که به شما امکان ساخت فرم و قراردادن تگ هایی که در ادامه معرفی می شود را داخل آن خواهد داد
- تگ <input>
مهم ترین تگ در داخل فرم ها که امکان دریافت اطلاعاتی همچون نام ، کلمه عبور ، تاریخ تولد ، جنسیت و … را فراهم می کند و انواع مختلفی دارد
- تگ <label>
برای نشانه گذاری input ها و عناصر فرم استفاده می شود
- تگ <select>
این تگ امکان انتخاب گزینه های مختلف را در فرم فراهم خواهد کرد . برای مثال انتخاب رشته تحصیلی از بین چندرشته مختلف
- تگ <option>
این تگ ها باید داخل <select> به کاررفته و گزینه های قابل انتخاب را تعریف کنند
- تگ <textarea>
برای ایجاد فضاهای متنی بزرگ استفاده می شود ، مثلا برای درخواست آدرس یا توضیحات از کاربر باید از این تگ استفاده کنید
- تگ <button>
برای ایجاد دکمه در داخل فرم جهت ارسال یا پاکساری اطلاعات فرم استفاده میشود
شما میتوانید با مطالعه فوری این تگ ها ، ساختار کلی هر صفحه وبی را به راحتی درک کنید ! از آنجایی که تمامی وب سایت های دنیا در ساختار اصلی خود باید از کدهای HTML استفاده کنند ، میتوانید در داخل هر وب سایتی با زدن کلید های ترکیبی Ctrl + U وارد قسمت سورس صفحه شده و تگ های استفاده شده داخل صفحه را برای خودتان به عنوان تمرین بررسی کنید . مابقی تگ هایی که در این مقاله معرفی نشدند جز گزینه هایی هستند که میتوانید پس از یادگیری تگ های اصلی به سراغ آنها رفته و اقدام به یادگیری کنید . برای مثال تگ هایی همچون <sub> که میتوایند برای بخش های محتوایی و ریاضی از آنها استفاده کنید . میتوانید لیست تمامی تگ های اچ تی ام ال را از این لینک مشاهده کنید .
