آموزش گام به گام زبان HTML به زبان ساده – فصل اول

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

گام گام زبان HTML زبان - فصل

به صورت ساده زبان اچ تی ام ال برای ایجاد صفحه های وب است.

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

اچ تی ام ال چیست ؟

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

HTML مخفف هایپر تکست مارک آپ لنگوویج (Hyper Text Markup Language) است.

اچ تی ام ال به روش مارک آپ (علامت گذاری) ساختار صفحات وب را توضیح میدهد.

عناصر یا المان های اچ تی ام ال همانند آجر های ساختمان یک صفحه اچ تی ام ال هستند.

المان های اچ تی ام ال به وسیله تگ ها (برچسب) نمایش داده میشوند. هر تگ دارای خاصیت (attribute) برای تنظیمات مختلف است.

تگ های اچ تی ام ال تکه هایی از مطالب را دسته بندی میکنند، تکه هایی مثل سربرگ، پاراگراف، جدول و بسیاری قطعات دیگر…

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

مثال ساده ساخت یک پرونده ساده با HTML



توضیح مثال بالا



این بیانیه، پرونده را یک پرونده (فایل) اچ تی ام ال پنج تعریف میکند.



این المان، شاخه اصلی یک صفحه اچ تی ام ال است.



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



این المان برای فایل HTML ما، یک عنوان مشخص میکند.



این المان یک هدینگ (سربرگ) بزرگ را ایجاد میکند.



این المان، پاراگراف ها را ایجاد میکند.

تگ های اچ تی ام ال (HTML tags)

تگ های اچ تی ام ال نام المان هایی هستند که ما بین علامت کوچکتر و بزرگتر <> نوشته میشوند.



به جای tagname در مثال بالا می توانید از تگ های اچ تی ام ال موجود استفاده کنید.

-تگ های اچ تی ام ال به صورت معمولی در یک جفت ظاهر میشوند مثل:



اولین تگ در یک جفت تگ، تگ شروع نام دارد و تگ دوم تگ پایانی است.

تگ پایانی مانند تگ شروع نوشته میشود ولی با یک فوروارد اسلش.

نکته: به تگ شروع تگ گشایش نیز گفته میشود همانطور که تگ پایانی را تگ جمع آوری میگویند.

مرور گر های وب با تگ های HTML چه کار می کنند؟

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

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

ساختار صفحه اچ تی ام ال

در پایین ساختمان یک صفحه اچ تی ام ال نمایش داده شده:



هماطور که میبینید کل صفحه بین دو تگ html است و الباقی المان ها که به صورت تگ های دوتایی هستند در میان این دو تگ وجود دارند. دقیقا شبیه به تگ های head و body که خودشان در ساختار بقیه ی تگ هارا در بر میگیرند.

واژه تعیین Doctype



واژه ی تعیین داک تایپ گواهی نوع پرونده است و به مرورگر کمک میکند تا صفحه های وب را صحیح نمایش دهد.

داک تایپ باید اول هر پیچ یک بار نوشته شود (قبل از هر تگ اچ تی ام ال)

این واژه ی تعیین را میتوان با حروف بزرگ یا کوچک نوشت.

واژه ی تعیین برای اچ تی ام ال 5 به این صورت است:



نسخه های اچ تی ام ال

از همان روز های اول اینترنت نسخه های زیادی از اچ تی ام ال وجود داشت که نسخه اچ تی ام ال 5 آخرین نسخه این سری در سال 2014 برای استفاده منتشر شد.

نوشتن اچ تی ام ال با استفاده از نوت پد یا تکست ادیت

صفحه های وب به وسیله ادیتور های حرفه ای قابل ساختن و ویرایش هستند.

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

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

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

مرحله 1 در ویندوز : نوت پد را در ویندوز باز کنید.

در ویندوز 8 یا جدیدتر:

صفحه استارت را باز کنید  NOTEPAD را تایپ کرده و اجرا کنید

ویندوز هفت به قبل :

منوی استارت را باز کنید و نوت پد را از این مسیر اجرا کنید

Start > programs > accessories > notepad

مرحله 1 در مک: تکست ادیت را در مک باز کنید

از مسیر

Finder > applications > textedit

همچنین تنظیمات را تغییر دهید تا فایل ها درست ذخیره شوند

بدین صورت

Preferences >format > plain text

سپس زیر open and save جعبه ای را که نوشته display HTML files as HTML code instead of formatted text را بزنید.

مرحله 2 : مقداری اچ تی ام ال بنویسید

مقداری اچ تی ام ال در ویرایشگر متن نوشته یا کپی کنید.



مرحله 3 : صفحه اچ تی ام ال را ذخیره کنید

فایل را بر روی کامپیوترتان ذخیره کنید.

File>save as

نام فایل را index.htm گذاشته و encoding را UTF-8 که ترجیها برای فایل های اچ تی ام ال بهتر است بگذارید

شما میتوانید از دو پسوند  htm و html استفاده کنید که بستگی به نویسنده دارد.

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

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

نتیجه به این صورت نمایش داده خواهد شد:

avalin heading man

avalin paragraph man

مثال های اساسی اچ تی ام ال

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

در فصل های آینده به آموزش جدی آنها میپردازیم.

پرونده های اچ تی ام ال

تمام پرونده های اچ تی ام ال باید با یک تعیین کننده ی نوع پرونده شروع شوند :

<!DOCTYPE html>

هر پرونده اچ تی ام ال با <html> شروع میشود و در آخر با </html> پایان میابد.

قسمت قابل نمایش هر پرونده اچ تی ام ال ما بین <body> و </body> است.

مثال:



سربرگ های اچ تی ام ال

هدینگ ها یا همان سربرگ ها از <h1> تعریف شده و تا <h6> ادامه دارند.

<h1> مهم ترین سربرگ را تعریف می کند.

<h6> کم اهمیت ترین سربرگ را تعریف می کند.

مثال:





پاراگراف های اچ تی ام ال

پاراگراف های اچ تی ام ال با تگ <p> تعریف میشوند:

مثال:



لینک های اچ تی ام ال

لینک های اچ تی ام ال با تگ <a> تعریف میشوند.

مثال:



مقصد لینک در خاصیت یا اتریبیوت با نام href مشخص میشود.

خاصیت ها یا همان اتریبیوت ها برای ارائه کردن اطلاعات اضافه درباره المان های اچ تی ام ال هستند.

درباره خاصیت ها بعدا مفصل توضیح داده خواهد شد.

تصاویر اچ تی ام ال

تصاویر اچ تی ام ال با تگ <img> تعریف میشوند که مخفف کلمه image است.

آدرس تصویر در خاصیت src نوشته می شود. در خاصیت alt نام تصویر قرار می گیرد و همچنین عرض تصویر با خاصیت width و ارتفاع آن با خاصیت height قابل مشخص کردن است:

مثال:



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

دکمه های اچ تی ام ال با تگ <button> تعریف میشوند:

مثال:



فهرست های اچ تی ام ال

فهرست های اچ تی ام ال به صورت <ul> یا <ol> و در ادامه با <li> می آیند که نمایانگر فهرست بی ترتیب و فهرست ترتیب دار هستند.

مثال:

المان های اچ تی ام ال

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



المان اچ تی ام ال تمام مواردی است که از تگ شروع تا تگ پایان نوشته شده:



المان های بدون مطلب به نام المان های خالی شناخته میشوند. المان های خالی تگ پایانی ندارند به عنوان مثال المان <br> که نمایانگر یک شکست خط است.

المان های مرکب اچ تی ام ال

المان های اچ تی ام ال گاها ممکن است مرکب شوند(یک المان میتواند المان های دیگری را در خود جای دهد)

تمام پرونده های اچ تی ام ال متشکل از المان های مرکب هستند.

برای نمونه این مثال حاوی چهار المان اچ تی ام ال است.

مثال:



توضیح مثال فوق

المان <html> کل پرونده را تعریف می کند که یک تگ شروع و یک تگ پایانی دارد.

محتوای این المان یک المان دیگر از اچ تی ام ال است (المان <body>)



المان <body> بدنه ی پرونده را تعریف میکند که تگ شروع و پایان خود را دارد.

و محتوای این المان دو المان دیگر هستند (<p> و <h1>).



المان <h1> هدینگ را تعریف میکند. این المان حاوی متن avalin heading man است.

المان <p> یک پاراگراف را تعریف میکند که حاوی متن avalin paragraph man است.

تگ پایانی را فراموش نکنید

بعضی از المان های اچ تی ام ال به درستی نمایش داده میشوند حتی با از قلم انداختن تگ پایانی:

مثال:



مثال فوق در تمام مرور گر ها کار میکند چون نوشتن تگ پایانی دلخواهیست.

هیچ وقت به این اتکا نکنید چون ممکن است در نتیجه در پرونده ایراد ایجاد شود با از یاد بردن تگ پایانی.

المان های خالی اچ تی ام ال

المان های اچ تی ام ال بدون محتوا به نام المان های خالی شناخته میشوند.

<br> یک المان خالی بدون تگ پایانی است که شکست در خط (رفتن به خط بعدی) را تعریف میکند.

مثال:



المان های خالی قابلیت بسته شدن در تگ شروع را دارند مثل : <br />

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

خاصیت های اچ تی ام ال (HTML Attributes)

خاصیت های اچ تی ام ال یا همان Attribute ها، اطلاعات اضافه ای را در باره المان های اچ تی ام ال ارائه میدهند.

تمام المان های اچ تی ام ال میتوانند خاصیت هم داشته باشند.

خاصیت ها همیشه در تگ شروع مشخص میشوند.

خاصیت ها در یک جفت نام و مقدار می آیند مثل nam=”meghdar”

خاصیت href

لینک های اچ تی ام ال با تگ <a> تعریف میشوند.

ادرس لینک در خاصیت href مشخص میشود.

مثال:



درباره لینک و این تگ در ادامه آموزش توضیحات بیشتری خواهیم داد.

خاصیت src

تصاویر اچ تی ام ال به وسیله تگ <img> تعریف می شوند.

اسم پرونده منبع تصویر در خاصیت src آورده میشود.

مثال:



خاصیت های طول و ارتفاع

تصویر در اچ تی ام ال چند خاصیت اندازه دارد که عرض و ارتفاع تصویر را مشخص میکند

مثال



اندازه تصویر به پیکسل مشخص میشود برای مثال وقتی عرض را 500 وارد میکنیم تصویر در 500 پیکسل نمایش داده خواهد شد و همینطور برای ارتفاع.

در فصل تصاویر اچ تی ام ال بیشتر در مورد تصاویر توضیح خواهیم داد.

خاصیت alt

خاصیت alt یک نوشته اضافه را برای استفاده وقتی که تصویر قابل نمایش نیست را ارائه میدهد.

مقدار این خاصیت میتواند به وسیله صفحه خوان ها استفاده شود به طوری که اگر کسی در حال گوش دادن به صفحه باشد به جای تصویر نوشته را میشنود.

مثال



خاصیت alt همچنین برای مواقعی که تصویر وجود ندارد هم مفید است.

خاصیت style

خاصیت style برای مشخص کردن استایل یک المان استفاده میشود مثل رنگ فونت سایز و موارد دیگر که در واقع کد های css هستند. در آینده به توضیح کد های css خواهیم پرداخت.

مثال:



دز ادامه درباره خاصیت style بیشتر بحث میشود و به صورت کامل در دوره سی اس اس.

خاصیت lang

زبان پرونده را میتوان در تگ <html> تعیین کرد.

زبان به وسیله خاصیت lang تعیین میشود.

تعیین کردن زبان یک صفحه برای کاربرد های برنامه های با قابلیت دسترسی مهم است (مانند صفحه خوان ها) و موتور های جستجو.

مثال:



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

خاصیت title

خاصیت title به المان پاراگراف <p> اضاف میشود که وقتی ماوس را بر روی پاراگراف بگیرید صفحه کوچکی ظاهر شده و در ان مقدار این خاصیت نوشته شده است.

مثال:



در ادامه آموزش گام به گام زبان HTML، مطلب آموزش HTML – فصل دوم: سربرگ ها و پاراگراف (Headings & Paragraph) را مطالعه کنید.

حسین باقری 2 سال پیش

عای بود

ویدیوها و مطالب مشابه