آموزش کامل html و html5 :: سربازان سایبری

آموزش کامل html و html5

يكشنبه, ۱۹ خرداد ۱۳۹۸، ۱۱:۲۴ ب.ظ

آموزش کامل html و html5

آموزش زبان کد نویسی HTML به صورت کامل قمست اول

معرفی HTML

HTML چیست؟

HTML زبان استاندارد نشانه گذاری برای ساخت صفحات وب است.

HTML مخفف شده عبارت “Hyper Text Markup Language” است.

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

عناصرHTML، بلوک های سازنده صفحات وب هستند.

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

تگ های HTML، قطعات محتوا مانند “عنوان”، “پاراگراف”، “جدول” و غیره را برچسب گذاری می کنند.

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

یک سند ساده HTML

<!DOCTYPE html>

<html>

<head>

<title>Page Title</title>

</head>

<body>

<h1>My First Heading</h1>

<p>My first paragraph.</p>

</body>

</html>

توضیحات مثال

اعلان <!DOCTYPE html>به مرورگر می گوید که این یک سند HTML 5 است.
عنصر <html>، عنصر ریشه در یک سند HTML است.
عنصر <head>شامل اطلاعات متا در مورد سند HTML است.
عنصر <title> یک عنوان را برای سند مشخص می کند.
عنصر <body> محتوای قابل مشاهده یک صفحه وب را شامل می شود.
عنصر <h1> یک عنوان بزرگ تعریف می کند.
عنصر <p>یک پاراگراف تعریف می کند.

تگ های HTML

تگ های HTML نام های عناصر احاطه شده با براکت های زاویه (<,>) هستند.

<tagname>Content goes here...</tagname>

تگ های HTML معمولا به شکل جفتی می آیند مانند <p> و </p>.
در یک جفت اولین تگ را تگ شروع و دومین تگ را تگ پایان می نامند.
تگ پایان نیز مانند تگ شروع نوشته می شود با این تفاوت که در قبل از نام تگ یک علامت / نوشته می شود.

مرورگر وب

هدف یک مرورگر وب (گوگل کروم، موزیلا فایرفاکس و …) خواندن اسناد HTML و نمایش آن ها است.

مرورگر ها تگ های HTML را نمایش نمی دهند، اما با استفاده از آن ها نحوه نمایش هر سند را تعیین می کنند.

ساختار صفحه HTML

توجه: فقط محتوای موجود بین تگ <body> (ناحیه سفید رنگ) در مرورگر ها نمایش داده می شوند.

اعلامیه <!DOCTYPE>

اعلام <!DOCTYPE> نوع سند را نشان می دهد و به مرورگر کمک می کند تا صفحات وب را به درستی نمایش دهد. این اعلام باید یک بار و بالای سند (بالاتر از همه تگ ها) بیاید. این اعلام به بزرگ یا کوچک بودن حروف حساس نیست.

اعلام <!DOCTYPE> برای یک سند HTML 5 به صورت زیر می باشد:

<!DOCTYPE html>

ورژن های HTML

از زمان بوجود آمدن وب تا به امروز، ورژن های زیادی از HTML ارائه شده اند:

ورژن	سال
۱۹۹۱	HTML
۱۹۹۵	HTML 2.0
۱۹۹۷	HTML 3.2
۱۹۹۹	HTML 4.01
۲۰۰۰	XHTML
۲۰۱۴	HTML5

ویرایشگرهای HTML

نوشتن HTML با استفاده از Notepad ویندوز و TextEdit مک

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

به منظور ساخت اولین صفحه وب خود با استفاده از Notepad ویندوز و TextEdit مک چهار مرحله زیر را دنبال کنید.

مرحله ۱: باز کردن Notepad در ویندوز

در ویندوز ۸ یا جدید تر، برای باز کردن Notepad بر روی لوگوی ویندوز در پایین و سمت چپ صفحه کلیک کنید و کمله Notepad را تایپ کنید.
در ویندوز ۷ یا ویندوز های قدیمی تر، منو استارت را باز کرده و از مسیر Programs > Accessories برنامه Notepad را اجرا کنید.

مرحله ۱: باز کردن TextEdit در مک

از مسیر Finder > Applications برنامه TextEdit را اجرا کنید. همچنین برای ذخیره سازی درست فایل ها، از قسمت Preferences > Form گزینه “Plain Text” را انتخاب کنید. سپس در زیر قسمت “Open and Save” تیک گزینه “Display HTML files as HTML code instead of formatted text” را فعال کنید. بعد از انجام این کارها یک سند جدید باز کنید.

مرحله ۲: نوشتن HTML

کد های زیر را در داخل Notepad بنویسید.

<!DOCTYPE html>

<html>

<body>

<h1>My First Heading</h1>

<p>My first paragraph.</p>

</body>

</html>

مرحله ۳: ذخیره صفحه HTML

برای ذخیره سند بر روی کامپیوتر تان، از منوی File گزینه Save as را انتخاب کنید. سپس در پنجره باز شده در قسمت نام Index.htm را وارد کنید و از بخش Encoding گزینه UTF-8 (کد گذاری مورد استفاده برای اسناد HTML) را انتخاب کنید.

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

مرحله ۴: مشاهده صفحه HTML در مرورگر شما

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

مثال های پایه HTML

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

اسناد HTML

تمامی اسناد HTML باید با یک اعلام نوع سند یعنی <!DOCTYPE html> شروع شوند.

خود سند HTML با تگ <html> شروع و با تگ </html> پایان می یابد.

بخش قابل مشاهده هر سند HTML در بین دو تگ <body> و </body> قرار می گیرد. به مثال زیر توجه کنید.

<!DOCTYPE html>

<html>

<body>

<h1>My First Heading</h1>

<p>My first paragraph.</p>

</body>

<html/>

عنوان ها (Heading)

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

<h1>This is heading 1</h1>

<h2>This is heading 2</h2>

<h3>This is heading 3</h3>

پاراگراف ها (Paragraph)

پاراگراف ها در HTML با تگ <p> تعریف می شوند.

<p>This is a paragraph.</p>

<p>This is another paragraph.</p>

لینک ها (Link)

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

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

عکس ها (Image)

عکس ها در HTML با تگ <img> تعریف می شود. در تگ <img> آدرس فایل منبع (src)، متن جایگزین (alt)، عرض و ارتفاع به عنوان صفات ارائه می شود.

<"img src="image.jpg" alt="not found" width="104" height="142>

دکمه ها (Button)

دکمه ها در HTML با تگ <button> تعریف می شوند.

<button>Click me</button>

لیست ها (List)

لیست ها در HTML با تگ <ul> یا <ol> ایجاد می شوند. سپس در درون این تگ ها، تگ های <li> یا همان آیتم های لیست تعریف می شوند.

<ul>

  <li>Coffee</li>

  <li>Tea</li>

  <li>Milk</li>

</ul>

عناصر در HTML

عناصر

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

1 2	<tagname>Content goes here...</tagname> <p>My first paragraph.</p>

تگ شروع	محتوای عنصر	تگ پایان
<h1>	My First Heading	</h1>
<p>	My first paragraph	</p>
<br>

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

جدید است.

عناصر تو در تو

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

<!DOCTYPE html>

<html>

<body>

<h1>My First Heading</h1>

<p>My first paragraph.</p>

</body>

</html>

توضیحات مثال

عنصر <html> کل سند را تعریف می کند و یک تگ شروع <html> و یک تگ پایان </html> دارد. محتوایی که در داخل این عنصر قرار گرفته است، خود نیز یک عنصر است (عنصر body).

<html>

<body>

<h1>My First Heading</h1>

<p>My first paragraph.</p>

</body>

</html>

عنصر <body> بدنه سند را تعریف می کند و یک تگ شروع <body> و یک تگ پایان </body> دارد. مانند عنصر قبلی محتوایی که در داخل این عنصر قرار گرفته است، نیز یک عنصر است (<h1> و <p>).

<body>

<h1>My First Heading</h1>

<p>My first paragraph.</p>

</body>

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

متن می باشد (My First Heading).

<h1>My First Heading</h1>

عنصر <p> یک بند یا پاراگراف تعریف می کند که یک تگ شروع <p> و یک تگ پایان </p> دارد. محتوای داخل این عنصر نیز به صورت متن می باشد (My first paragraph).

<p>My first paragraph.</p>

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

بعضی از عناصر HTML در مواقعی که تگ پایان را فراموش کنید نیز به درستی کار می کنند. مانند مثال زیر:

<html>

<body>

<p>My first paragraph

<p>My first paragraph

</body>

<html/>

کد بالا در تمام مرورگر ها کار می کند و دلیل آن هم این است که گذاشتن تگ پایان اختیاری است. اما همیشه نمی شود از نتیجه همچین کد هایی مطمئن بود و ممکن است نتایج و خطا های غیره منتظره ایی را تولید کنند.

عناصر خالی

همان طور که قبلا هم اشاره شد، عناصری را که محتوایی ندارند، عناصر خالی می نامند. برای نمونه تگ <br> یک عنصر خالی است که تگ پایان ندارد. عناصر خالی می توانند در تگ شروع بسته شوند مانند: </br>.

در HTML 5 نیازی به بستن عناصر خالی نیست. اما اگر می خواهید کد های شما معتبر باشد و یا نیاز دارید که سند شما توسط تجزیه کننده های XML قابل خواندن باشد، باید تمام عناصر را ببندید.

تگ ها را به صورت حروف کوچک استفاده کنید

تگ ها HTML به بزرگ یا کوچک بودن حروف حساس نیستند. برای مثال تگ <P> برای مرورگر یعنی همان <p>. در استاندارد HTML 5 نیاز نیست که حتما از حروف کوچک استفاده کنید. اما W3C توصیه می کند تا از حروف کوچک در اسناد HTML و یا اسناد دقیق تر مانند XHTML استفاده شود.

خصوصیت ها در HTML

خصوصیت ها اطلاعات اضافی را در مورد عناصر HTML فراهم می کنند.

خصوصیت ها

تمام عناصر HTML می توانند دارای خصوصیت باشند.
خصوصیت ها اطلاعات بیشتری را در مورد عناصر فراهم می کنند.
خصوصیت ها همیشه در تگ شروع مشخص می کنند.
خصوصیت ها معمولا به صورت نام / مقدار تعریف می شوند. مانند name=”value”.

خصوصیت href

لینک ها در HTML با تگ <a> مشخص می شوند. آدرس لینک در خصوصیت href مشخص می شود.

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

خصوصیت src

عکس ها در HTML با تگ <img> تعریف می شوند و نام و آدرس عکس در خصوصیت src مشخص می شود.

<"img src="sample.jpg>

خصوصیت عرض و ارتفاع

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

<"img src="sample.jpg" width="500" height="600>

اندازه عکس ها با پیکسل مشخص می شود. برای مثال width=”500″ یعنی عرض تصویر ۵۰۰ پیکسل است. در مورد عکس ها و خصوصیت ها آن ها در بخش ها بعدی بیشتر می آموزید.

خصوصیت alt

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

<"img src=" sample.jpg" alt="Image not found>

خصوصیت style

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

<p style="color:red">I am a paragraph</p>

خصوصیت lang

زبان سند را می توان در تگ <hml> اعلام کرد. این اعلام با استفاده از خصوصیت lang انجام می شود. مشخص بودن زبان سند برای برنامه ها دسترسی و موتور های جستجو از اهمیت بالایی برخوردار است.

<!DOCTYPE html>

<html lang="en-US">

<body>

...

</body>

</html>

دو حرف اول (en) در مقدار خصوصیت lang زبان را مشخص می کند و اگر زبان دارای گویش خاصی باشد از دو حرف دوم (US) برای اعلام آن استفاده می کنیم.

خصوصیت title

در اینجا خصوصیت title به یک عنصر <p> اضافه شده است. مقدار داخل خصوصیت title زمانی که اشاره گر ماوس بر روی عنصر قرار بگیرد، به عنوان راهنمای ابزار نمایش داده می شود.

<p title="I'm a tooltip">

This is a paragraph.

</p>

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

در استاندارد HTML 5 الزامی برای استفاده از حروف کوچک برای نام خصوصیت وجود ندارد. برای مثال خصوصیت title هم می تواند به صورت TITLE و هم به صورت title نوشته شود. ما در این آموزش همیشه از حروف کوچک برای نام عناصر استفاده می کنیم.

پیشنهاد ما: استفاده از علامت نقل قول (“) برای مقادیر خصوصیت است

در HTML 5 نیازی به استفاده از علامت (“) برای مقادیر خصوصیت ها نیست. برای نمونه خصوصیت href نشان داده شده در بالا می تواند بدون علامت نقل قول نوشته شود.

Bad

Good

<"a href="https://www.google.com>

اما W3C توصیه می کند تا از علامت نقل قول در اسناد HTML و همچنین اسناد پیچیده تر مانند XHTML استفاده شود.

در بعضی از مواقع لازم است تا از علامت نقل قول استفاده کنیم. برای نمونه به مثال زیر توجه کنید:

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

علامت نقل قول تکی (‘) یا دوتایی (“)

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

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

<'p title='John "ShotGun" Nelson>

<"p title="John 'ShotGun' Nelson>

خلاصه

تمام عناصر HTML می توانند خصوصیت داشته باشند.
خصوصیت title اطلاعاتی را به عنوان راهنمای ابزار فراهم می کند.
خصوصیت href اطلاعات ادرس را برای لینک ها مشخص می کند.
خصوصیت های width و height اطلاعات مربوط به اندازه عکس را مشخص می کنند.
خصوصیت alt یک متن جایگزین برای عکس و خوانندگان صفحه فراهم می کند.

خصوصیت های HTML

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

alt : یک متن جایگزین برای عکس مشخص می کند تا زمانی که نمی توان عکس را نمایش داد یا عکس موجود نیست، این متن به کاربر نشان داده شود

disabled : مشخص می کند که عنصر ورودی باید غیرفعال باشد

href : آدرس اینترنتی را برای لینک مشخص می کند

id : یک شناسه منحصر به فرد برای عنصر را مشخص می کند

src : نشانی یا آدرس را برای یک تصویر مشخص می کند

style : یک استایل درونی برای عنصر مشخص می کند

title : اطلاعات اضافی در مورد یک عنصر را مشخص می کند (به عنوان راهنمای ابزار نمایش داده می شود)

سر تیترها در HTML

منظور تعریف سر تیترها در HTML یا همان عناوین از تگ های <h1> تا <h6> استفاده می کنیم. <h1> مهمترین عنوان و <h6> کم اهمیت ترین عنوان را مشخص می کند.

<h1>Heading 1</h1>

<h2>Heading 2</h2>

<h3>Heading 3</h3>

<h4>Heading 4</h4>

<h5>Heading 5</h5>

<h6>Heading 6</h6>

نکته: مرورگر ها به صورت خودکار به قبل و بعد از هر عنوان مقداری فضای خالی اضافه می کنند.

سر تیترها مهم هستند

موتور های جستجو برای ایندکس کردن محتوا و ساختار صفحات وب از عنوان ها یا سر تیترها استفاده می کنند. کاربران، صفحات وب را با توجه به عنوان های آن ها می خوانند. و مهم است که از عنوان ها به منظور نمایش ساختار سند استفاده شود.

اهمیت عنوان ها یا سر تیترها

در HTML باید از <h1> برای نمایش عنوان های اصلی و مهم استفاده شود و با افزایش این عدد از ۱ تا ۶ از میزان اهمیت عنوان ها کاسته می شود.

نکته: هرگز نباید از عنوان ها برای نمایش متون بزرگ (BIG) و یا ضخیم (BOLD) استفاده کرد.

عنوان های بزرگتر

هر یک از عنوان ها در HTML دارای انداز پیشفرض می باشند. اما با استفاده صفت font-size در CSS می توانید اندازه دلخواه را بر روی آن ها اعمال کنید.

<h1 style="font-size:60px;">Heading 1</h1>

خطوط افقی

در اسناد HTML به منظور ایجاد یک خط افقی و یا جدا کردن محتوای سند از یک دیگر از تگ <hr> استفاده می شود.

<h1>This is heading 1</h1>

<p>This is some text.</p>

<hr>

<h2>This is heading 2</h2>

<p>This is some other text.</p>

<hr>

عنصر <head>

عنصر <head> هیچ ارتباطی با عنوان های سند ندارد بلکه اطلاعات متای مربوط به سند HTML را در خود نگه می دارد. اطلاعات متا به کاربران نمایش داده نمی شود. تگ <head> باید بین دو تگ <html> و تگ <body> تعریف شود.

<!DOCTYPE html>

<html>

<head>

<title>My First HTML</title>

<meta charset="UTF-8">

</head>

<body>

.

.

.

نکته: معمولا از اطلاعات متا برای تعیین عنوان سند، مجموعه کاراکتر ها، استایل ها، لینک ها، اسکریپت ها و غیره استفاده می شود.

چگونه کدهای منبع یک سند را مشاهده کنیم؟

حتما تا به حال یک صفحه وب را دیده و از خود پرسیده اید که “چگونه آن را ساخته اند؟”.

نحوه مشاهده کدهای منبع

برای اینکار، بر روی صفحه مورد نظر کلیک راست کنید، سپس از منوی باز شده گزینه “View Page Source” را انتخاب کنید. پنجره ایی باز خواهد شد که شامل کد های منبع آن صفحه می باشد. البته با استفاده از این روش فقط می توان کدهای HTML، کد های CSS و جاوا اسکریپت مشاهده کرد.

بازبینی یک عنصر

برای بررسی و بازبینی یک عنصر، ابتدا بر روی آن یا بخش خالی صفحه کلیک راست کنید، سپس از منوی باز شده گزینه “Inspect” و یا “Inspect Element” را انتخاب کنید تا چگونگی ساخته شدن عناصر آن صفحه را مشاهده کنید (در پنجره باز شده کد های HTML و سی اس اس را مشاهده خواهید کرد). البته شما علاوه بر مشاهده کد ها می توانید آن ها را ویرایش کنید.

پاراگراف ها در HTML

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

<p>This is a paragraph.</p>

<p>This is another paragraph.</p>

نکته: مانند عنوان ها، مرورگر ها به صورت خودکار به قبل و بعد از هر پاراگراف فضای خالی اضافه می کنند.

نمایش محتوا

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

<p>

This paragraph

contains a lot of lines

in the source code,

but the browser

ignores it.

</p>

<p>

This paragraph

contains         a lot of spaces

in the source         code,

but the        browser

ignores it.

</p>

شکستن خط

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

<p>This is<br>a paragraph<br>with line breaks.</p>

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

مشکل شعر

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

<p>

My Bonnie lies over the ocean.

My Bonnie lies over the sea.

My Bonnie lies over the ocean.

Oh, bring back my Bonnie to me.

</p>

توجه: برای حل این مشکل می توانید از عنصر <pre> استفاده کنید که در ادامه بررسی می شود.

عنصر <pre>

وظیفه تگ <pre> نمایش متن به صورت پیش فرمت شده است. به معنی که متن به هر شکلی نوشته شود، همان شکل نمایش داده خواهد شد.

<pre>

My Bonnie lies over the ocean.

My Bonnie lies over the sea.

My Bonnie lies over the ocean.

Oh, bring back my Bonnie to me.

</pre>

۱ ۰
۹۸/۰۳/۱۹

حسن روشنی خواه

سربازان سایبری

سربازان سایبری

هکر قانونمند و کلاه سفید

برنامه نویسی

دانلود های مهم

هک و امنیت

لایسنس و کرک

آموزش های متفرقه

فروشگاه

دانلود فیلم