آموزش HTML - جلسه اول - مقدمه و معرفی اچ تی ام ال

آموزش HTML – جلسه اول – مقدمه و معرفی اچ تی ام ال

نویسنده: بابک حبیبی

تاریخ: 2012 - 02 - 18

دسته بندی: HTML اچ تی ام ال

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

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

HTML چیست؟

HTML مخفف HyperText Markup Language به معنای زبان نشانه گذاری فرا متنی هست. HTML برای درست کردن صفحات وب استفاده میشود.در واقع تمامی سایت های دنیا از HTML در خودشون استفاده کردن.شما برای این که کدای HTML یه سایت رو ببین خیلی راحت روی صفحه ی سایت کلیک راست می کنید و View Source میگیرد.ساده ترین حالت همچین نمونه ای رو نشون میده :

<!doctype html>
<html lang="en">
<head>
 <title>Sample Web page</title>
</head>
<body>
 <p>Here is a paragraph</p>
</body>

تاریخچه ی HTML

اولین نسخه ی HTML توسط Tim Berners-Lee در سال ۱۹۹۱ معرفی شد.در بین سال های ۱۹۹۰ تا ۱۹۹۵ HTML دست خوش تغییرات زیادی بود . بعد از بوجود آمدن کنسرسیوم جهانی وب W3C دوباره HTML دچار تغییرات در زمینه ی استاندارد سازی شد و در سال ۱۹۹۵ نسخه ی جدید خود را با نام HTML2.0 عرضه کرد. ورژن های مختلف HTML بعد از چند سال به ترتیب این گونه عرضه شدن : HTML3.2 در سال ۱۹۹۷ و HTML4.01 در سال ۱۹۹۹ و HTML5 هم در سال ۲۰۰۸٫

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

یک TAG تگ با این علامت باز میشود <> و به این صورت بسته می شود </>

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

بجای واژه ی tag name باید اسم تگ مورد نظر رو قرار بدید مثل :


<cite></cite>

بعضی تگ ها هم نیازی به بستن ندارن مثل :

<br>

هر تگ می تونه خاصیت خودش رو داشته باشه مثل:

شما می تونید به تگ ها بصورت زیر خاصیت های مورد نظر رو بدید،attribute اسم اون خاصیت هست و value مقدار اون خاصیت که بستگی به خاصیت داره که چند گزینه شما در دسترس داشته باشید

<tagname attribute="value"></tagname>

در HTML مقدار خاصیت میتونه بدون علامت کتیشن باشه اگه فاصله ای نداشته باشه یا از کاراکتر های زیر استفاده نشده باشه ” ‘ ` = < یا > در مقدار ، در غیر این صورت باید از کتیشن یا دابل کتیشن حتما استفاده بشه.
نمونه ای از این دستورات رو در زیر می تونید مشاهده کنید:


<!-- خاصیت های خالی -->
<input type="text" disabled="disabled" />
<input type="text" disabled="disabled" />
<input type="text" disabled="disabled" />
<!-- خاصیت های با مقدار -->
<input type="text" name="address" />
<input type="text" name="address" />
<input type="text" name="address" />

ساخت یک HTML

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

Dreamweaver , Frontpage , …

برای مثال می خواهیم یک فایل HTML بسازیم

برای این کار اول یک Notepad باز کنید و کد های آماده ی زیر را در آن بنویسید (بعدا به مبحث معرفی تگ ها میرسیم )

<!doctype html>
<html lang="en">
<head>
 <meta charset="utf-8">
 <title>Sample Web page</title>
</head>
<body>
 <p>Hello!</p>
</body>
</html>

بعد از نوشتن این کد ها روی گزینه ی File کلیک کنید و بعد روی Save as سپس از منوی Encoding گزینه ی UTF-8 رو انتخاب کنید و اسمی برای آن انتخاب کنید.توجه داشته باشید حتما باید پسوند .htm یا .html بزارید مثال index.htm
بعد از اتمام کار با یکی از مرورگر های اینترنتی مثل Internet Explorer , Mozilla Firefox Google Chrome,Opera ,Safari و … این فایل را باز کنید و نتیجه ی کار را ببیند.