آموزش HTML قسمت اول

آموزش HTML قسمت اول

شروع به کار

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

به عنوان مثال برای استفاده از کدهای زبان PHP که یک زبان برنامه نویسی سمت سرور است، تگ شناخته شده توسط اچ تی ام ال به این شکل است:

<?php PHP CODES ?>

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

برای ایجاد صفحات اچ تی ام ال نیاز به یک ویرایشگر ساده متن مانند NOTEPAD دارید، اما اگر بخواهید صفحات حرفه ای تری ایجاد کنید می توانید از WISYWIG ها استفاده کنید.این نرم افزار ها با ارائه یک واسط گرافیکی و امکانات دیگر سرعت و دقت ایجاد صفحات را افزایش دهند. از بهترین نمونه های آن ها می توان frontpage و dreamwviwer اشاره کرد.

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

لازم به ذکر است که این دستنامه بر مبنای XHTML2.0 نوشته شده است

ساختار اساسی

عناصر و صفات

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

<xyz>Some content</xyz>

این بند یک عنصر فرضی با نام XYZ تعریف می کند. تگ شروع و تگ پایان است.

محتوای عنصر متنی است که باید نشانه گذاری شود، البته خود می تواند شامل عناصر دیگری باشد:

<xyz>Some <abc>more</abc>content<def>added</def></xyz>

تگ ها باید به شکل صحیح در هم ترکیب شوند، مثال زیر یک شکل نادرست است:

<xyz>Some <abc>more content<def>added</abc> </def> </xyz>

عنصر def یا باید به طور کامل درون abc قرار بگیرد یا به طور کامل خارج از آن.

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

<xyz attr1="sometext" attr2='somemoretext'>Some content</xyz>

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

ساختار یک سند HTML

تمامی کدها بین تگ html باز و بسته قرار می گیرند، کل صفحه به دو قسمت سر صفحه و بدنه تقسیم شده، که عنوان و فراداده ها- اطلاعاتی که سند را توصیف می کنند- در قسمت سر و محتوای سند در قسمت بدنه قرار می گیرند، هر سند دارای یک بخش ثابت است که وظیفه بیان نوع سند را بر عهده دارد و کمک می کند تا سند بهتر اجرا شود:

<p class='leftTxt'><xmp><?xml version="1.0" encoding="iso-8859-1" ?> <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd"> <html> <head> <title> Title of Page Come Here </title> </head> <body> Other Elements Come Here </b0dy> </html>

مدل لایه

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

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

درون خطی: عناصری که فقط شامل متن یا دیگر عناصر درون خطی هستند. عناصر em و strong درون خطی هستند.

بلوکی: عناصری که دارای اهمیت بیش تری هستند، می توانند دامنه ی خود را تعیین کرده و می توانند شامل عناصر درون خطی باشند. عناصر p و h1 نمونه های عناصر بلوکی هستند. بعضی عناصر بلوکی هستند که بیش تر شبیه به جعبه هستند تا عناصر بلوکی منفرد که می توانند محتوی عناصر بلوکی دیگر باشند. در این مورد ساختار درونی می تواند پیچیده تر باشد.

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

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

شکست خطوط

{<br />}

اگر در بین پاراگراف نیاز به انتقال به خط بعد باشد از عنصر درون خطی br استفاده می شود. برای مثال:

<p>It is a Paragraph with <br>Line Breaks</p>

It is a Paragraph with Line Breaks.



نظرات کاربران



عبارت امنیتی : حاصل 2 × 6 می شود :
متن پیام :