تگ در HTML چیست - معرفی المنت ها و اتریبیوت های HTML

فیلم آموزشی تگ در HTML

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

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

در ادامه به بررسی خصوصیات تگ ها در HTML می پردازیم. سپس با تگ های کاربردی در زبان برنامه نویسی HTML آشنا می شویم.

در ادامه در مورد اتریبیوت های HTML صحبت خواهیم کرد و بررسی می کنیم که هر المنت html5، از چه اجزایی تشکیل شده است.

در توضیح تگ ها در html، به بررسی تگ شروع یا تگ باز (start tag) و تگ پایان یا تگ بسته (end tag) خواهیم پرداخت.

همچنین در مورد HTML Entities صحبت خواهیم کرد و در فیلم توضیحاتی در مورد self-closing تگ ها در html نیز خواهیم داد.

در انتها نیز با نحوه گذاشتن کامنت در بین کدهای HTML این قسمت را به پایان می بریم.

مقدمه: فیلم آموزشی مفهوم تگ در HTML

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

برای دسترسی به کلیه فیلم های آموزش HTML می توانید از این لینک استفاده کنید.

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

در ادامه به همراه بررسی Start tagها و end tagها، نحوه ی نمایش آنها در مرورگر chrome را به تفصیل تشریح می کنیم.

در تمامی این بخش ها با استفاده از inspector مروگر کروم، خصوصیات تگ های HTML را مورد بحث و بررسی قرار می دهیم.

توضیح در مورد فیلم آموزشی « تگ HTML چیست؟ »

این مجموعه یکی از قسمت های دوره وبمستران وردپرس می باشد که شامل بیش از ۸۰ قسمت فیلم آموزشی است. برای دسترسی به کلیه فیلم های آن می توانید به بخش “دوره آموزشی وبمستران وردپرس“مراجعه کنید.

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

بعضی از قسمت های این دوره، به صورت رایگان در سایت وبمستر وردپرس در دسترس عموم خواهد بود و سایر آن ها را می توانید با مراجعه به سایت کلوپ وبمستران وردپرس ، دریافت نمایید.

توجه: پیشنیاز برای یادگیری HTML

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

در واقع می توان گفت برای وبمستر حرفه ای شدن و وارد شدن به سایر مباحث همچون HTML می باید بر مفاهیم وب و نحوه کار اجزا آن باهم آشنا شوید. به همین منظور، پیشنیاز درک بهتر این دوره، دوره آموزش مقدمات وب می باشد.

برای این منظور می توانید به بخش آموزش مقدمات وب در سایت کلوپ وبمستران وردپرس مراجعه کرده و در این دوره رایگان شرکت نمایید.

دوره آموزشی HTML کاربردی برای وبمستران

در کمتر از ۹ ساعت مثل یک برنامه نویس حرفه ای به HTML مسلط شوید!!!

اگر وبمستر، سئوکار، دیجیتال مارکتر یا صاحب کسب و کار آنلاین هستید، اولین چیزی که باید با آن آشنا باشید، یادگیری HTML می باشد. در غیر این صورت از پس هیچ کدام از کارهای وبمستری خود بر نخواهید آمد. برای ثبت نام در دوره کاربردی HTML در کمتر از ۹ ساعت، از لینک روبرو استفاده کنید.

دوره آموزشی HTML کاربردی برای وبمستران

نمایش فیلم تگ ها در HTML

در ادامه می توانید فیلم آموزشی رایگان خصوصیات تگ های در HTML را که به همراه توضیح و مثال می باشد، در زیر مشاهده فرمایید. در صورتی که نیاز به دانلود آن دارید، می توانید از لینک های پایین صفحه استفاده نمایید:

فیلم آموزش «تگ ها در HTML» شامل چه بخش هایی می باشد؟

فیلم آموزشی تگ در HTML و کاربردهای آن، دارای بخش هایی به شرح زیر می باشد:

ساختار یک فایل یا document با فرمت html به چه صورت می باشد؟

در قسمت ابتدایی فیلم، در مورد این صحبت می کنیم که ساختار داخلی یک Document در وب یا ساختار یک فایل با پسوند html یا htm، به چه صورت می باشد. عنوان های صحبت شده در این بخش به شرح زیر می باشد:

در ابتدا به صورت کامل، اجزای یک document با فرمت html به صورت کامل بیان می شوند. در این قسمت شروع به ساخت یک فایل html در ویرایشگر PhpStorm می کنیم و به موازات آن بخش مختلف آن را تشریح می کنیم.
یک فایل html در داخل خود از یک تگ باز و تگ بسته html،تشکیل شده است. دو بخش اصلی تگ html، تگ های زیر می باشند:
- تگ head
- تگ body
در ادامه در مورد Document type ها صحبت می کنیم. همچنین در مورد متا دیتا ها در تگ head و محتوای صفحه یا همان page content در تگ body صحبت خواهیم کرد.

چه فایلی در هنگام درخواست به وب سرور، به سمت کاربر فرستاده می شود؟

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

در ابتدا به معرفی فایل های خاص، شامل فایل های index.html و index.htm و index.php و index.asp می پردازیم. در هنگام رسیدن یک درخواست، ابتدا وب سرور آدرس مورد نظر را بررسی می کند تا در صورت بودن یکی از این موارد، آن را در قالب جواب به مرورگر کاربر ارسال نماید.
توضیح در مورد اینکه این فایل ها به صورت پیش فرض می توانند در تنظیمات وب سرور اعمال شوند. شما می توانید با اعمال تغییرات، تقدم و تاخر هر کدام از آن ها را مشخص کنید.
در صورتی که هیچ کدام از این فایل های پیش فرض موجود نباشند، وب سرور لیست فایل های موجود در مسیر درخواست شده را بر می گرداند.

داشتن چندین فایل در کنارهم در یک دایرکتوری نیز، در این قسمت فیلم آموزشی مورد بررسی واقع می گردد.
اندازه المنت ها در html به صورت داینامیک تعیین می شود. این به این معنی خواهد بود که المنت ها، بسته به سایز مرورگر، تغییر می کنند.
مرورگر خودش کار line wrapping را برای المان های موجود در صفحه انجام می دهد. ضمن اینکه هر مقدار کاراکتر space یا همان white space را به هر مقدار، تبدیل به یک کاراکتر space می کند.

مدیریت whitespace و line wrapping در html توسط مرورگر

آشنایی با ساختار کلی تگ ها در HTML

در این قسمت با ساختار کلی تگ ها در HTML ها آشنا خواهیم شد. عنوان های صحبت شده در این بخش به شرح زیر می باشد:

تگ در html چیست؟

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

بعضی از تگ ها توسط مرورگر نمایش داده می شوند اما بعضی دیگر فقط توسط مرورگر خوانده و تفسیر شده اما نمایش داده نمی شوند.
هر صفحه با فرمت html دارای تگ باز و بسته html در درون خود می باشد.
اندازه المنت ها عمدتاً به صورت داینامیک تعیین می شوند، این بدان معناست که بسته به سایز مرورگر تغییر می کنند. در واقع مثلا ما به تگ p اجازه می دهیم که به صورت داینامیک بخش های مختلف را پوشش دهد و این موضوع به کوچکی یا بزرگی Screen ما بستگی دارد.

انواع تگ ها در HTML

به طور کلی دو دسته تگ را می توانیم در ساختار html مشاهده کنیم. اولین آن ها تگ هایی هستند که دارای تگ باز بسته می باشند. دومین آن ها تگ هایی هستند که فقط شامل تگ ابتدایی هستند که به آن ها self-closing تگ هم گفته می شود.
تگ ها چه کاربردی دارند؟

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

هر تگ html دارای یک ابتدا و یک انتها می باشد. تگ ابتدایی یا تگ شروع یا opening tag با قرار داده شدن در بین علامت کوچکتر و بزرگتر شروع می شود.

تگ انتها یا end tag هم مشابه آن می باشد، با این تفاوت که در ابتدای نام تگ از علامت slash استفاده می شود.
همه تگ ها در html توسط مرورگر نمایش داده نمی شوند. بعضی از آن ها، مثل اطلاعاتی که در تگ head یک صفحه قرار می گیرند، شامل متا دیتا و اطلاعات اضافی تر توسط صفحه می باشند که عملا توسط مرورگر نمایش داده نمی شوند.

آشنایی با اتریبیوت های html و انواع آن

در ادامه این فیلم آموزشی، با attribute ها در html آشنا خواهیم شد. عناوین صحبت شده در این بخش به شرح زیر می باشد:

Attribute ها در HTML چیستند؟

هر تگ html می تواند شامل صفات، ویژگی ها و خواص مخصوص به خود باشد. به این خاصیت ها، attribute های html گفته می شود. این خاصیت ها می توانند شامل صفاتی چون width یا height برای یک المنت مثل تگ image باشد.
attribute های html چگونه در تگ ها قرار می گیرند؟

هر attribute در html به صورت یک زوج name=”value” می باشد. در واقع هر خاصیت دارای یک نام (یا کلید یا key یا name) می باشد. این نام می تواند توسط single quotation یا double quotation مقداری را قبول کند.

ترکیب های این زوج نام/مقدار ها می باید در داخل تگ ابتدایی یا شروع یک تگ html قرار بگیرند.

Nested Element ها در html چیستند؟

در یک سند html می توانیم از تگ ها به صورت تو در تو استفاده کنیم. به تگ هایی که به صورت تو در تو قرار گرفته اند، nested element گفته می شود.

در واقع هر nested element شامل تگ های children و parent می باشد.
Empty Element چیست؟

یک سری از المنت ها هستند که دارای تگ پایان و همین طور محتوا یا content داخل تگ نیستند. این تگ ها بدون اینکه دارای متنی برای content خود باشند، می توانند به عنوان self-closing تگ در Html مورد استفاده قرار گیرند.

از نمونه های این تگ های Empty Element می توان به تگ br و همین طور تگ hr اشاره کرد.

ساختار empty tag ها یا همان self-closing تگ ها در html

آیا مهم است که تگ ها و attribute ها در html با حروف کوچک نوشته شوند؟

در استانداردهای جدید html5 خواسته شده است که به جای استفاده از Uppercase برای حروف، از حروف lowercase برای نمایش تگ ها و همین طور attribute ها در html استفاده کنیم.
مهم ترین تفاوت تگ در HTML5 با HTML4 چیست؟

در HTML5 استانداردهایی جدیدی به ثبت رسید که از مهم ترین آن ها می توان به کوچک شدن حروف تگ ها، و استفاده از تگ های بسته یا همان closed tag ها اشاره کرد.
در کجا برای نمایش مقدار attribute ها از Single quote و در کجا در Double quote استفاده می کنیم ؟

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

در تگ های پایانی امکان جابجایی وجود ندارد،یعنی رعایت ترتیب الزامی می باشد.

Nested Element ها در html و رعایت ترتیب آن ها

پیشنهاد برای مطالعه بیشتر

در صورتی که می خواهید با تاریخچه HTML آشنا شوید، می توانید از لینک زیر استفاده کنید. این آموزش دومین قسمت از این بخش می باشد:

معرفی زبان HTML و تاریخچه HTML

معرفیHTML Entities و نحوه استفاده از آن ها

در این بخش از آموزش، به بررسی HTML Entities می پردازیم. این بخش شامل قسمت های مهم زیر می باشد.

HTML Entity چیست؟

یک سری کاراکترها برای نشانه گذاری در زبان HTML رزرو شده اند، بنابراین وقتی می خواهید از آن ها در بین متن استفاده کنید ممکن است باعث قاطی شدن آن ها در تفسیر، توسط مرورگر شوید. به همین منظور باید html entities برای درست تفسیر شدن آن توسط مرورگر، استفاده کنید.

هر HTML Entity یک رشته است که با علامت & (Ampersand) شروع شده و با علامت ; (Semicolon) پایان می یابد.

ساختار Character Entity

برای اینکه بتوان از کاراکترهای رزرو شده در زبان برنامه نویسی استفاده کرد، باید از character entityها در کدنویسی HTML استفاده کنیم. یک character entity به صورت زیر می باشد:

&entity_name;

&#entity_number;

نکته :

بعضی از کاراکترها همانند علامت بزرگتر(<) و علامت کوچکتر(>) را نمی توان در متن استفاده کرد، زیرا مرورگر به اشتباه آن ها را، تگ در نظر می گیرد.

تگ Comment در HTML و کاربرد آن

هر زبان برنامه نویسی نیازمند مکانیزمی برای گذاشتن Comment در بین کدها می باشد. کامنت ها در مرورگرها نمایش داده نمی شوند.
از کامنت ها برای یافتن خطاهای HTML استفاده می شود، زیرا میتوان برای پیدا کردن خطاها، قسمتی از کدهای خود را کامنت کنید.
با استفاده از Commentها میتوانیم برخی از توضیحاتی را که ممکن است در آینده به آن ها نیاز پیدا کنیم را به کدهای HTML اضافه کنیم. در واقع همانند راهنما عمل می کند.
کامنت ها در html به صورت زیر نمایش داده می شوند:

You will be able to see this text. 

<!-- You will not be able to see this text. --> 

You can even comment out things in <!-- the middle of --> a sentence. 


<!-- Or you can 
comment out a large 
number of lines. 
-->

نتیجه گیری برای فیلم آموزش « مفهوم تگ در HTML»

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

در مورد المنت های اصلی در یک Document از نوع HTML صحبت می کنیم. سپس در مورد متا دیتاها در یک صفحه HTML و کدهای اصلی آن می پردازیم.

پرکاربردترین تگ های HTML را بیان می کنیم. و در ادامه در مورد Start Tag ها و End Tag ها در HTML صحبت می کنیم. سپس در مورد تگ Self-Closing صحبت می کنیم.

پس از آن به بررسی HTML Entities و نحوه کامنت گذاری در کدهای HTML می پردازیم.

ممکن است به نظر شما بعضی از موارد درست نبوده و یا شما موارد بیشتری را بدانید که ما فراموش کرده ایم تا در این فیلم آموزشی، قرار دهیم.

اگر شما از این موارد آگاه هستید، حتما در بخش نظرات عنوان کنید تا آن را به این مقاله اضافه کنیم. در ضمن اگر این مقاله را مفید دیدید، حتما آن را به دوستان خود معرفی کرده یا در شبکه های اجتماعی به اشتراک بگذارید.

در ساخت و تهیه این مطلب فیلم آموزش مقدمات وبمستری از مراجع زیر استفاده شده است. شما می توانید با مراجعه به آن ها، اطلاعات بیشتری را بدست آورید:

لینک دانلود این فیلم در سایت آپارات

راهنما برای خواندن سایر مقالات سایت به صورت دسته بندی شده:

شما می توانید از طریق لینک های کاربردی زیر به سایر مقالات سایت که کاملا بصورت طبقه بندی شده وجود دارد، مراجعه نموده و از آن ها استفاده کنید:

بازگشت به صفحه بلاگ وبمستر وردپرس

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

فیلم آموزشی تگ در HTML

مقدمه: فیلم آموزشی مفهوم تگ در HTML