آموزش عناصر در HTML
در این جلسه به آموزش عناصر در HTML خواهیم پرداخت, لطفا قبل از مشاهده این جلسه ابتدا جلسه ی قبل را از این لینک مشاهده کنید.
آموزش عناصر در HTML
یک عنصر HTML توسط یک برچسب شروع کننده تعریف می شود. اگر عنصر دارای محتوای دیگری باشد، با یک برچسب بسته کننده تمام می شود در حالیکه جلوی نام عنصر یک علامت اسلش قرار گرفته است که می توانید در جدول زیر برخی ازاین برچسب ها را مشاهده کنید
۱.<p>
این برچسب محتوای پاراگراف می باشد.
۲.<h1>
این برچسب تیتر محتوا می باشد.
۳.<div>
این برچسب تقسیم محتوا می باشد.
بنابراین در اینجا p یک عنصر HTML و h1 عنصر دیگری از HTML می باشد. عناصری از HTML وجود دارند که نیازی به بسته شدن ندارند مانند </ hr…/>, <img> و </ br> این عناصر با عنوان elements void( عناصر خالی) شناخته می شوند. داکیومنت های HTML دارای درختی از این عناصر می باشند و مشخص می کنند که چگونه داکیومنت ها باید ساخته شوند و چه نوع محتوایی باید در چه بخشی از داکیومنت HTML قرار بگیرد.
برچسب HTML در مقابل عنصر
یک عنصر HTML به وسیله ی یک برچسب شروع کننده تعریف می شود. اگر عنصر دارای محتوای دیگری باشد با یک برچسب بستن تمام می شود. برای مثال <p> برچسب شروع کننده ی یک پاراگراف می باشد و <p/ > برچسب بستن همان پاراگراف می باشد، اما <p>paragraph is This<p/>عنصر یک پاراگراف می باشد.
عناصر تو در توی HTML
نگهداری یک عنصر HTML در داخل عنصر دیگر بسیار متداول می باشد.
<!DOCTYPE html> <html> <head> <title>Nested Elements Example </title> </head> <body> <h1>This is <i>italic</i> heading</h1> <p>This is <u>underlined</u> paragraph </p> </body> </html>
ویژگی های زبان html
برخی از برچسب های HTML مانند برچسب های تیتر و برچسب های پاراگراف، و موارد استفاده ی آنها را مشاهده کردیم. تاکنون از آنها به ساده ترین شکل خود استفاده کرده ایم، اما بیشتر برچسب های HTML می توانند ویژگی هایی داشته باشند که مقداری اطلاعات اضافه می باشد. یک attribute برای تعریف ویژگی های عنصر HTML استفاده می شود و در داخل برچسب بازکننده ی عنصر قرار می گیرد. همه ی ویژگی ها از دو بخش تشکیل شده اند. name و value.
Name ویژگی مورد نظر شما برای تنظیم میباشد، به عنوان مثال عنصر پاراگراف در مثال ارائه شده دارای ویژگی می باشد که نام آن align می باشد و شما می توانید از آن برای تنظیم پاراگراف در صفحه استفاده کنید.
Value همان است که شما می خواهید مقدار ویژگی تنظیم شود و همیشه در داخل گیومه قرار می دهید. مثال زیر سه مقدار ممکن ازیک ویژگی تراز را نشان می دهد چپ، مرکز و راست.
ویژگی نام ها و ویژگی مقادیر غیرهوشمند می باشند. به هرحال وب جهانی Consortium) W3C) مقادیر ویژگی ها را در ۴ HTML با حروف کوچک پیشنهاد می دهد.
مثال
<!DOCTYPE html> <html> <head> <title>Align Attribute Example</title> </head> <body> <p align="left">This is left aligned</p> <p align="center">This is center aligned</p> <p align="right">This is right aligned</p> </body> </html>
این مثال نتیجه ی زیر را دنبال خواهد کرد
This is left aligned
This is center aligned
This is right aligned
ویژگی های اصلی
چهار ویژگی اصلی که می توانند در اکثر عناصر HTML مورد استفاده قرار بگیرند عبارتند از :
id
title
class
style
ویژگی id یک برچسب HTML می تواند برای تشخیص یک عنصر در یک صفحه ی HTML مورد استفاده قرار بگیرد. دو دلیل اصلی برای تمایل شما به استفاده از ویژگی id در یک عنصر وجود دارد. اگر یک عنصر یک ویژگی را به عنوان تشخیص دهنده ی منحصر به فرد استفاده می کند شناخت تنها آن عنصر و محتوای مربوط به آن ممکن می باشد. اگر دارای دو عنصر هم نام در یک صفحه ی وب می باشید، می توانید از عنصر id برای تشخیص این عناصر هم نام استفاده کنید. در مورد طراحی صفحه در آموزش های مجزا بحث خواهیم کرد، اکنون اجازه بدهید از ویژگی id برای تشخیص عناصر بین دو پاراگراف استفاده کنیم، مانند مثال زیر:
<p id="html">This para explains what is HTML</p> <p id="css">This para explains what is Cascading Style Sheet</p>
ویژگی title
این ویژگی یک تیتر پیشنهادی برای عنصر ارائه می دهد. ترکیب مربوط به ویژگی title شبیه به ترکیب توضیح داده شده برای ویژگی id می باشد. رفتار این ویژگی بستگی به عنصری دارد که آن را حمل می کند، گرچه اغلب اوقات وقتی مکان نما روی عنصر قرار می گیرد یا عنصر در حال بارگذاری می باشد، با عنوان یک راهنمای ابزار (tooltip) نمایش داده می شود.
مثال
<!DOCTYPE html> <html> <head> <title>The title Attribute Example</title> </head> <body> <h3 title="Hello HTML!">Titled Heading Tag Example</h3> </body> </html>
مثال باال نتیجه ی زیر را تولید خواهد کرد.
Titled Heading Tag Example
اکنون سعی کنید مکان نما را روی “Example Tag Heading Titled “بیاورید، خواهید دید که هر تیتری که در کد خود استفاده کرده اید، مانند یک راهنمای ابزار نمایش داده خواهد شد.
ویژگی class
این ویژگی برای برقراری ارتباط بین یک عنصر با یک صفحه ی طراحی استفاده می شود و گروه عنصر را مشخص می کند. وقتی که را یاد بگیرید (CSS (Sheet Style Cascading در مورد این ویژگی بیشتر فرا خواهید گرفت. اکنون تا همین حد کافیست. مقدار ویژگی نیز ممکن است لیستی از فضاهای مجزای نام های گروه باشد، برای مثال
class=”className1 className2 className3″
ویژگی style
این ویژگی به شما اجازه می دهد تا قوانین CSS را در داخل عنصر مشخص کنید.
مثال
<!DOCTYPE html> <html> <head> <title>The style Attribute</title> </head> <body> <p style="font-family:arial; color:#FF0000;">Some text...</p> </body> </html>
این مثال نتیجه ی زیر را تولید می کند
Some text…
اکنون CSS را یاد نمیگیریم بنابراین اجازه دهید بدون اینکه بیشتر از این خود را در مورد CSS اذیت کنیم، به جلوتر برویم. در اینجا الزم است در مورد ویژگی های HTML بدانید و اینکه چگونه در هنگام طراحی متن مورد استفاده قرار می گیرند.
ممنون که در این جلسه هم با ما همراه بودید, در این جلسه به آموزش عناصر در HTML پرداخته شد و در جلسه ی آینده به یادگیری مطالب حرفه ای تری خواهیم پرداخت.
دیدگاه ها