بخش Vip سئو مایند

بهترین فرصت برای یادگیری در قسمت Vip سئو مایند هم اکنون برای دانشجوبان عزیز فراهم شده است

جزئیات بیشتر
ورود به بازار کار با سئو مایند
تخفیف ویژه سئو مایند با کد تخفیف BlFri برای همه دوره ها

مهم ترین تگ های html جهت یادگیری سریع

مقالات طراحی سایت

چگونه میتوان در کمتر از چند دقیقه به اصلی ترین تگ های زبان html مسلط شده و کدنویسی را شروع کرد یا ساختار کدهای html یک پروژه را درک کرد ؟ این مقاله برای شماست !

0
مهم ترین تگ های 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> به کار می‌رود

تگ های معنایی html5

تگ های معنایی درحقیقت تگ هایی هستند که اولا معنی عملکرد آنها از نام تگ مشخص است ، و دوم اینکه در صفحه ، معنی و مفهوم خاصی را منتقل می کنند

  • تگ <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> که میتوایند برای بخش های محتوایی و ریاضی از آنها استفاد کنید . میتوانید لیست تمامی تگ های اچ تی ام ال را از این لینک مشاهده کنید .

ادمین

انتقال دانش زمانی ارزشمند است که در حوزه ارائه شده به شکل کامل و بی نقص باشد . در دوره های آموزشی و مقالاتی که برای شما عزیزان به اشتراک میگذارم ، تمامی تلاش خود را میکنم تا همه نیاز های شما را پوشش دهم .

آموزش های فرانت

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

شاید این مطالب نیز برای شما جالب باشد

با رعایت 4 فاکتور اصلی در یادگیری مهارت های طراحی سایت ، می توانید در کوتاه ترین زمان ، توانایی رسیدن به بازارکار و درآمد را داشته باشید . در این مقاله این 4 مورد را معرفی و بررسی خواهیم کرد .

4

ux چیست و چگونه میتوان در سایت یک ux مناسب را ایجاد کرد ؟ داشتن یک تجربه کاربری خوب تا چه اندازه میتواند در بهبود وضعیت کلی سایت موثر باشد ؟ در این مقاله مطالعه کنید .

0
دیدگاه ها و نظرات
توجه کامنت های انگلیسی تایید نخواهند شد در صورت داشتن مشکل ، قبل از ارسال دیدگاه نظرات سایر دوستان را نیز مطالعه فرمائید برای مشاهده پاسخ دیدگاه ها بر روی علامت " " کلیک کنید
اشتراک دیدگاه
captcha
تکمیل تمامی فیلد ها الزامی است