عناصر HTML

عناصر HTML


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

یک عنصر HTML جزئی از سند HTML است. هر صفحه وب شامل بسیاری از عناصر HTML می باشد.

تگ های HTML به مرورگر می گویند که عناصر را را کجا و چگونه نمایش دهند. جایی که عنصر نمایش داده می شود، براساس ترتیبی است که تگ ها نوشته می شوند.

زبان HTML بیش از 100 تگ دارد. لازم نیست که همه ی این صد تگ را حفظ کنید زیرا در نهایت فقط از چندین تگ اصلی در صفحات اصلی خود استفاده می کنید. امّا توصیه کامپیوتر پرسش این است که همه ی تگ های HTML را یادبگیری و با نحوه ی کار آن ها آشنا شوید بعدا بیشتر متوجه خواهید شد.

خب، حالا نگاه دقیقتری به مثال جلسه قبل می اندازیم:

نوشتن کدهای اولیه

توضیح کدهای بالا:

- در اوّلین قسمت از کدهای ما اعلامیه DOCTYPE… را مشاهده می کنید. این تگ به مرورگر می گوید که در حال حاضر ما از کدام نسخه زبان HTML استفاده می کنیم. درحال حاضر اعلام زبان HTML5 به مرورگر با اعلامیه <!DOCTYPE html> صورت می گیرد.

- عنصر <html> به عنوان عنصر ریشه شناخته می شود می توان آن را مانند یک کانیتنر در نظر گرفت که تمام تگ های دیگر را در داخل خود حمل می کند (البته به غیر از اعلامیه)

- تگ <head> شامل اطلاعاتی است که معمولا در مرورگر مشاهده نمی شود (مانند متاتگ ها، جاوا اسکریپت و سی اس اس)، هرچند که تگ <title>یک استثناست و در قسمت برگه های مرورگر یا نوار عنوان که در بالای مرورگر قرار دارد، نمایش داده می شود.

- تگ <body> منطقه ی اصلی محتوای شماست. این محل جایی است که اکثر کدهای شما (عناصر قابل مشاهده) نوشته خواهد شد.

- تگ <h1> تیتری با اهمیت درجه اول را تعریف می کنید.

- تگ <p> پاراگراف و عبارات متنی را تعریف می کند. این تگ شامل متن بدنه ی اصلی صفحه وب است.

بستن تگ ها

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

همچنین تا کنون باید متوجه شده باشید که برای بستن یک تگ کار سختی ندارید و فقط باید برای تگ بازتان یک تگ با همان نام ایجاد کنید با این تفاوت که یک فوروارد اسلش "/" بعد از علامت ">" بگذارید. اینکار به مرورگر می گوید که تگ قبلی را بسته و تگ جدید را بخواند.

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

بازگشت و حمل دوباره

شما می توانید کد را به عقب برگردانید و اگر بخواهید کدهای دلخواه را اضافه کنید. این می تواند به قابلیت خواندن کمک کند و بر صفحه نمایش در مرورگر تأثیری نمی گذارد.

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

البته این نکته را در نظر داشته باشید که زبان HTML زبان برنامه نویسی نیست و فقط یک زبانه نشانه گذاری است.

به عنوان مثال، ما می توانیم مثال جلسه قبل را کپی کرده و دوباره در یک فایل جدید پیست «Paste» کنیم، در نتیجه بازهم صفحه وب مشابه و بدون تغییر خواهیم داشت.

حروف بزرگ یا حروف کوچک؟

خوشبختانه در زبان HTML تفاوتی میان حروف کوچک و حروف بزرگ انگلیسی نیست. امّا اکثر توسعه دهندگان وب ترجیح می دهند از حروف کوچک برای کدنویسی HTML استفاده کنید. اینکار باعث می شود تا HTML خواناتر باشد. همچنین حروف کوچک به حفظ کدهای XML نیز کمک می کند (اگر از XHTML استفاده می کنید) که این خودش بحث جدایی است.

بنابراین:

عالی:<h1>

خوب:<H1>

تگ های اختیاری

برخی از تگ ها در شرایط خاصی اختیاری می شوند و حضور آنها الزامی نیست. برای نمونه، مثالی که ما از آن استفاده کردیم دارای تگ هایی همچون <head>, <html> و <body> بود که همه جزء تگ های اختیاری به شمار می آیند.

بنابراین اگر کدهای فوق را به شکل زیر تغییر دهیم بازهم صفحه وب ما معتبر است و تغییری نمی کند.

کدهای اختیاری اچ تی ام ال

امّا قوانین خاصی وجود دارد که در برخی از زمان ها شما نمی توانید این کار را انجام دهید و دیگر کدهای شما معتبر نخواهد بود. به عنوان مثال می توان تگ شروع <html> را حذف کرد در صورتی که کامنت (نظر) پس از آن قرار داده نشود، و همینطور این مورد بر تگ پایان آن نیز صدق می کند. تگ <head> نیز می تواند حذف شود در صورتی که چیزی در آن قرار داده نشود یا اگر چیزی قرار دارد یک عنصر باشد. و تگ پایان آن تنها در صورتی حذف می شود که عنصر بلافاصله با یک کارکتر فاصله دار یا کامنت دنبال نشود. عنصر body نیز دارای شرایط خاصی برای حذف تگ ها است.

پیشنهاد ما این است که همیشه تگ های در مثال را به کار ببرید تا دچار مشکلی نشوید! در جلسه بعدی بیشتر در مورد تگ های معروف و پرکاربرد صحبت خواهیم کرد.

جلسه قبل | جلسه بعد

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

نظرات شما


    نام
    ایمیل (منتشر نمی‌شود) (لازم)
    وبسایت
    :) :( ;) :D ;)) :X :? :P :* =(( :O @};- :B /:) :S
    نظر خصوصی
    مشخصات شما ذخیره شود ؟ [حذف مشخصات] [شکلک ها]
    کد امنیتیرفرش کد امنیتی