صفحات وب را می توان با استفاده از ویراستاران حرفه ای HTML ایجاد و اصلاح کرد.
با این حال، برای یادگیری HTML ما یک ویرایشگر متن ساده مانند Notepad (PC) یا TextEdit (Mac) را توصیه میکنیم.
ما معتقدیم استفاده از یک ویرایشگر متن ساده راه خوبی برای یادگیری HTML است.
مراحل زیر را دنبال کنید تا اولین صفحه وب خود را با Notepad یا TextEdit ایجاد کنید.
در ویندوز 8 یا بالاتر:
پنجره ی جستجوی ویندوز را باز کنید. کلمه Notepad را تایپ کنید.
در ویندوز 7 یا پایین تر:
این مسیر را دنبال کنید: Start > Programs > Accessories > Notepad
این مسیر را دنبال کنید: Finder > Applications > TextEdit
همچنین برخی از تنظیمات را تغییر دهید تا برنامه را به درستی ذخیره کنید. برای اینکار در قسمتPreferences > Format، انتخاب کنید "Plain Text"
_
نوشتن یا کپی کردن کدهای HTML در Notepad
<!DOCTYPE html>
<html>
<body>
<h1>My First Heading</h1>
<p>My first paragraph.</p>
</body>
</html>
برای ذخیره کردن فایل HTML در کامپیوتر خود در منو Notepad روی File کلیک کنید و از زیر منوی باز شده Save as را انتخاب کنید.
نام فایل مورد نظر را index.htm قرار داده و انکدینگ فایل را UTF-8 قرار دهید (که رمزگذاری توصیه شده برای فایل های HTML است).
شما می توانید از هر یک از پسوندهای .htm یا .html برای فایل خود استفاده کنید. هیچ تفاوتی بین آنها وجود ندارد، این مورد به شما بستگی دارد.
فایل HTML ذخیره شده را در مرورگر مورد علاقه خود باز کنید (روی فایل دوبار کلیک کنید یا راست کلیک کنید) و گزینه Open with را انتخاب کنید.
با ویرایشگر آنلاین رایگان وبسایت W3Schools، شما می توانید کد HTML را ویرایش کنید و نتیجه را در مرورگر خود مشاهده کنید.
این ابزاری بسیار عالی است هنگامی که شما می خواهید سریع کد تست کنید. همچنین دارای کدگذاری رنگی و توانایی ذخیره و به اشتراک گذاری کد با دیگران است:
مثال
<!DOCTYPE html>
<html>
<head>
<title>Page Title</title>
</head>
<body>
<h1>This is a Heading</h1>
<p>This is a paragraph.</p>
</body>
</html>
روی دکمه "خودتان امتحان کنید" کلیک کنید تا ببینید که چگونه کار می کند.
منبع: وبسایت W3Schools
HTML نشانه گذاری استاندارد برای ایجاد صفحات وب است.
<!DOCTYPE html>
<html>
<head>
<title>Page Title</title>
</head>
<body>
<h1>This is a Heading</h1>
<p>This is a paragraph.</p>
</body>
</html>
تگ های HTML نام عناصری هستند که توسط <> محصور شده اند:
<tagname>content goes here.</tagname>
تگ های در HTML معمولا به صورت جفت هستند. مانند: <p> و </p>
تگ اول، تگ آغازین و تگ دوم تگ پایانی نامیده می شود
تگ پایانی همانند تگ آغازین نوشته می شود با این تفاوت که قبل tagname یک اسلش قرار می گیرد
نکته: تگ آغازین با نام تگ باز و تگ پایانی با نام تگ بسته نیز نامیده میشوند
هدف یک مرورگر وب (Chrome، Edge، Firefox، Safari)، خواندن اسناد HTML و نمایش آنها است.
مرورگر تگ های HTML را نمایش نمی دهد، بلکه از آنها برای تعیین نحوه نمایش سند استفاده می کند:
در زیر میتوانید ساختار اصلی یک صفحه وب را مشاهده کنید:
توجه: فقط محتوای داخل بخش <body> (قسمت سفید در بالا) در مرورگر نمایش داده می شود.
اعلامیه <!DOCTYPE> نشان دهنده نوع سند است و به مرورگر کمک می کند تا صفحات وب به درستی نمایش داده شوند.
این تگ فقط یک بار در بالای صفحه (قبل از هر تگ HTML) قرار می گیرد.
اعلامیه <!DOCTYPE> حساس به حروف بزرگ نیست.
نمونه کد زیر نحوه استفاده از اعلامیه <!DOCTYPE> برای HTML5 را نشان می دهد:
<!DOCTYPE html>
از روزهای اولیه وب نسخه های مختلفی از HTML منتشر شده است:
نسخه | سال |
HTML | 1991 |
HTML 2.0 | 1995 |
HTML 3.2 | 1997 |
HTML 4.01 | 1999 |
XHTML | 2000 |
HTML5 | 2014 |
منبع: وبسایت W3Schools
CSS مخفف عبارت Cascading Style Sheet به معنی الگوهای آبشاری می باشد.
CSS نحوه نمایش عناصر HTML را روی صفحه کامپیوتر، کاغذ یا دیگر رسانه ها مشخص می کند.
CSS می تواند بسیار مفید باشد، برای اینکه یک فایل CSS می تواند ظاهر چندین صفحه وب را به طور همزمان کنترل کند.
همچنین CSS به یکی از سه روش زیر می تواند به عناصر HTML اضافه شود:
<style>
در بخش <head>
رایج ترین روش برای اضافه کردن CSS به عناصر HTML استفاده از روش External است. با این حال ما در این آموزش ها برای Style دهی به عناصر HTML از روش های Inline و Internal استفاده می کنیم به این دلیل که استفاده از این روش ها راحت تر است و آموزش های ما را برای شما قابل فهم تر میکند.
نکته: در این فصل ما تنها به آموزش برخی از مفاهیم پایه ای CSS پرداخته ایم، اما در آینده آموزش کامل CSS در دوره آموزشی مربوط به آن قرار خواهد گرفت.
از روش Inline برای دادن استایلی منحصر به فرد به یک عنصر HTML استفاده می شود.
در روش Inline ما با استفاده از صفت style ویژگی مد نظرمان را بر روی عنصر مورد نظر اعمال می کنیم.
در مثال زیر با استفاده از این روش رنگ متن عنصر <h1>
را به آبی تغییر داده ایم:
از روش Internal برای دادن استایلی به یک صفحه مشخص HTML استفاده می شود.
در روش Internal کد های CSS در بخش <head>
از صفحه ی HTML و در داخل عنصر <style>
قرار می گیرند:
از روش External برای دادن استایل به تعداد زیادی صفحه HTML استفاده می شود.
در این روش به این دلیل که ما از یک فایل خارجی برای استایل دهی به تمام صفحات وب سایت استفاده می کنیم با تغییر کدهای تنها همین یک فایل می توانیم شاهد تغییر ظاهر همه ی صفحات وب سایت باشیم.
برای استفاده از روش External، ابتدا باید یک فایل با پسوند CSS. ایجاد کنید و سپس لینک این فایل را به صورت زیر در داخل بخش <head>
از سند HTML تان قرار دهید:
صفحه ی External که حاوی کدهای CSS است، می تواند توسط هر ویرایشگر متنی نوشته شود. این فایل نباید حاوی هیچ کد HTML ای باشد و همچنین باید با پسوند CSS. ذخیره شود.
صفحه ی External ای که حاوی کدهای CSS بوده و در مثال بالا لینک شده به شکل زیر است:
ویژگی color
در CSS رنگ متن مورد استفاده را مشخص می کند.
ویژگی font-family
در CSS فونت متن مورد استفاده را مشخص می کند.
ویژگی font-size
در CSS اندازه متن مورد استفاده را مشخص می کند.
ویژگی border
در CSS مشخص میکند که حاشیه دور یک عنصر HTML به چه شکلی باشد:
ویژگی padding
در CSS مشخص میکند که فاصله متن تا border یا حاشیه ی یک عنصر HTML چه قدر باشد:
ویژگی margin در CSS فاصله border یا حاشیه ی یک عنصر HTML را با دیگر عناصر HTML مشخص می کند:
برای تعریف یک استایل خاص برای یک عصر خاص، صفت id
را به آن عنصر اضافه کنید:
سپس به صورت زیر یک استایل خاص را برای آن عنصر تعریف کنید:
توجه: صفت id یک عنصر باید در یک صفحه منحصر به فرد باشد، بنابراین از صفت id برای اعمال یک استایل خاص بر روی یک عنصر خاص استفاده می شود
برای استفاده از استایلی برای تعدادی عنصر خاص، صفت class
را به آن عنصرها اضافه کنید:
سپس به صورت زیر یک استایل برای آن عناصر تعریف کنید:
صفحات External یا خارجی حاوی استایل های CSS می توانند با یک URL کامل یا نسبی نسبت به صفحه HTML ارجاع داده شوند.
در مثال زیر از یک URL کامل برای آدرس دهی فایل خارجی CSS استفاده شده است:
مثال زیر اشاره به فایل خارجی CSS ای دارد که در همان فولدر html ای قرار دارد که سند HTML سایت در آن قرار گرفته است:
مثال زیر اشاره به فایل خارجی CSS ای دارد که در همان محلی قرار دارد که سند HTML سایت در آن قرار گرفته است:
در HTML می توان رنگ ها را با استفاده از نام های از پیش تعریف شده برای رنگ ها، مقادیر RGB ، HEX ، HSL ، RGBA ، HSLA مقدار دهی کرد. در این فصل ما به آموزش رنگ ها در همهی حالت ها خواهیم پرداخت.
در HTML یک رنگ را می توان با اسم مخصوص به آن رنگ مشخص کرد:
نام فارسی | نام انگلیسی | رنگ |
---|---|---|
گوجه ای | Tomato | |
نارنجی | Orange | |
نیلی | DodgerBlue | |
خزه ای | MediumSeaGreen | |
خاکستری | Gray | |
آبی فولادی | SlateBlue | |
بنفش روشن | Violet | |
خاکستری روشن | LightGray |
شما می توانید با استفاده از صفت background-color رنگ پس زمینه ای دلخواه برای عناصر HTML انتخاب کنید:
شما می توانید با استفاده از صفت color رنگی دلخواه برای عناصر HTML انتخاب کنید:
Lorem ipsum dolor sit amet, consectetuer adipiscing elit, sed diam nonummy nibh euismod tincidunt ut laoreet dolore magna aliquam erat volutpat.
Ut wisi enim ad minim veniam, quis nostrud exerci tation ullamcorper suscipit lobortis nisl ut aliquip ex ea commodo consequat.
شما می توانید با استفاده از صفت border رنگی دلخواه برای حاشیه عناصر HTML انتخاب کنید:
در HTML می توان رنگ ها را با استفاده از مقادیر RGB، مقادیر هگزادسیمال (HEX)، مقادیرHSL، مقادیر RGBA و مقادیر HSLA مشخص کرد:
در ادامه مثال هایی با رنگ یکسان گوجه ای برای هر یک از مقادیر بالا آورده شده است:
در مثال زیر از همان رنگ گوجه ای استفاده شده، اما 50 درصد شفاف تر:
در HTML یک رنگ را می توان با مقدار RGB با استفاده از این فرمول مشخص کرد: (rgb(red, green, blue.
به جای هر پارامتر (red, green, blue) عددی بین 0 تا 255 قرار می گیرد.
به عنوان مثال، (rgb(255, 0, 0 رنگ قرمز را نشان می دهد، زیرا رنگ قرمز روی بالاترین مقدار آن روی 255 تنظیم شده و مقدار بقیه پارامترها روی صفر قرار داده شده است.
برای نمایش رنگ سیاه باید تمام پارامترها با عدد 0 مقدار دهی شوند، اینگونه: (rgb(0, 0, 0.
برای نمایش رنگ سفید باید تمام پارامترها با عدد 255 مقدار دهی شوند، اینگونه: (rgb(255, 255, 255.
در مثال زیر چند رنگ با مقدار RGB مقدار دهی شده اند:
سایه های خاکستری اغلب با قرار دادن مقادیر مساوی به جای هر سه پارامتر تعریف می شوند:
در HTML یک رنگ را می توان با مقدار هگزادسیمال به این صورت تعریف کرد:
#rrggbb
که در آن rr (قرمز)، gg (سبز) و bb (آبی) مقادیر هگزادسیمالی بین 00 تا ff (به صورت تقریبی مشابه 255 حالت البته در مبنای 16) هستند.
سایه های خاکستری اغلب با قرار دادن مقادیر مساوی به جای هر سه پارامتر تعریف می شوند:
در HTML یک رنگ را می توان با مقدار HSL به این صورت تعریف کرد:
hsl(hue, saturation, lightness)
hue درجه ای از چرخه رنگ از 0 تا 360 است. 0 رنگ قرمز، 120 رنگ سبز و 240 رنگ آبی است.
مقدار saturation از جنس درصد است، 0% به معنای سایه خاکستری و 100% به معنای رنگ کامل است.
مقدار lightness نیز از جنس درصد است، 0% سیاه، 50% نه روشن و نه تاریک و 100% به معنای سفید است.
saturation را می توان به عنوان شدت یک رنگ توصیف کرد.
100% رنگ خالص است و سایه ای از خاکستری ندارد.
50% خاکستری است اما هنوز هم می توانید رنگ آن را ببینید.
0% کاملا خاکستری است و دیگر نمی توانید رنگ آن را ببینید.
شما می توانید از lightness برای تنظیم میزان روشنایی رنگتان استفاده کنید. 0% به معنای تاریکی (سیاه)، 50% به معنای نه روشن و نه تاریک و 100% بع معنای کاملا روشن (سفید) است.
سایه های خاکستری غالبا با تنظیم hue و saturation روی عدد صفر مشخص می شوند و برای رسیدن به سایه های خاکستری تیره تر یا روشن تر lightness را از 0 تا 100 تنظیم می کنند:
مقدار رنگ RGBA از همان فرمت RGB است با این تفاوت که این فرمت حاوی پارامتر آلفا (alpha) نیز هست که برای تعیین شفافیت رنگ کاربرد دارد.
مقدار رنگ RGBA در HTML به صورت زیر تعریف می شود:
rgba(red, green, blue, alpha)
پارامتر آلفا (alpha) عددی بین 0.0 (کاملا شفاف) و 1.0 (بسیار کدر) است:
مقدار رنگ HSLA از همان فرمت HSL است با این تفاوت که این فرمت حاوی پارامتر آلفا (alpha) نیز هست که برای تعیین شفافیت رنگ کاربرد دارد.
مقدار رنگ HSLA در HTML به صورت زیر تعریف می شود:
hsla(hue, saturation, lightness, alpha)
پارامتر آلفا (alpha) عددی بین 0.0 (کاملا شفاف) و 1.0 (بسیار کدر) است:
تگ های کامنت در HTML برای قرار دادن توضیح یا نوشته ای در سورس کد HTML مورد استفاده قرار می گیرند.
شما به صورت زیر می توانید از کامنت ها در سورس کد HTML استفاده کنید.
توجه کنید که علامت تعجب فقط در تگ باز قرار داده می شود، و در تگ بسته نباید از آن استفاده کنید.
نکته: کامنت ها توسط مرورگرها نشان داده نمی شوند، اما کامنت ها می توانند در سورس کد سند HTML مفید باشند.
با کامنت ها شما می توانید که اعلان یا یادآوری هایی را در سند HTML تان اضافه کنید. به مثال زیر توجه کنید تا بیشتر با کاربرد کامنت ها آشنا شوید:
کامنت ها همچنین برای اشکال زدایی سند HTML بسیار عالی هستند، زیرا شما می توانید قسمتی از کدهای سند HTML خود را برای یافتن خطا کامنت کنید:
متن زیر یک نقل قول از وبسایت WWF است:
به مدت 50 سال WWF از آینده طبیعت محافظت کرده است. WWF در 100 کشور فعالیت می کند و همچنین توسط 1.2 میلیون عضو در ایالات متحده و بیش از 5 میلیون نفر در سراسر جهان حمایت می شود.
عنصر <q>
در HTML نقل قول های کوتاه را تعریف کی کند.
مرورگرها معمولا در اطراف محتوای عنصر <q>
علامت کوتیشن قرار می دهند.
عنصر <blockquote>
برای تعریف نقل قول هایی استفاده می شود که از یک منبع دیگر نقل شده باشند.
مرورگرها معمولا برای محتوای عنصر <blockquote>
تو رفتگی ایجاد می کنند.
عنصر <abbr>
برای تعریف کلمات مخفف یا مختصر شده استفاده می شود.
با مقدار دهی صفت title برای عنصر <abbr>
با قرار گرفتن نشانگر موس روی محتوای این عنصر مقدار صفت title در یک تول تیپ کوچک نشان داده می شود.
استفاده از عنصر <abbr>
برای مشخص کردن اختصارات می تواند اطلاعات مفیدی را در اختیار مرورگرها، مترجم ها و موتورهای جستجو قرار دهد.
عنصر <address>
اظلاعات تماس (مالک/نویسنده) یک سند یا مقاله را تعریف می کند.
محتوای داخل عنصر <address>
به طور معمول به صورت ایتالیک نمایش داده می شوند. همچنین بیشتر مرورگرها یک خط خالی ابتدا و انتهای محتوای این عنصر اضافه می کنند.
عنصر <cite>
برای تعریف عنوان یا اسم یک اثر (مثل تابلو نقاشی) استفاده می شود.
مرورگرها معمولا محتوای داخل عنصر <cite>
را به صورت ابتالیک (کج) نمایش می دهند.
از عنصر <bdo>
برای عوض کردن جهت نوشتن یک متن در HTML استفاده می شود.
در متن زیر از این عنصر استفاده شده تا جهت نوشته شدن حروف متن عوض شود:
This text is bold
This text is italic
This is subscript and superscript
در فصل قبلی، شما درباره ی صفت استایل یاد گرفتید.
همچنین در HTML عناصر ویژه ای برای دادن معنی خاصی به متن تعریف شده اند.
HTML از عناصری مانند <b>
(بولد کردن متن) و <i>
(ایتالیک کردن متن) برای فرمت بندی متون استفاده می کند.
عناصر فرمت بندی برای نمایش انواع خاصی از متن طراحی شده اند:
<b>
- متن بولد (پررنگ)<strong>
; - متن مهم<i>
- متن ایتالیک (کج)<em>
- متن تاکید شده<mark>
- متن مارک شده (نشانه گذاری شده)<small>
- متن کوچک<del>
- متن حذف شده<ins>
- متن اضافه شده<sub>
- متن زیرنویس<sup>
- متن بالانویسعنصر <b>
متن را بولد می کند، بدون این که از نظر معنایی اهمیت بیشتری به متن بدهد.
ولی عنصر <strong>
متن قوی را تعریف میکند. از نظر ظاهری متن قرار گرفته داخل این عنصر هیچ تفاوتی با متن بولد شده ندارد ولی از نظر معنایی اهمیت بسیار بیشتری دارد.
عنصر <i>
یک متن ایتالیک (کج) تعریف می کند، بدون اینکه از نظر معنایی اهمیت بیشتری به متن بدهد.
ولی عنصر <em>
یک متن تاکید شده را تعریف میکند. از نظر ظاهری متن قرار گرفته داخل این عنصر هیچ تفاوتی با متن ایتالیک ندارد ولی از نظر معنایی اهمیت بسیار بیشتری دارد.
نکته: مرورگرها <strong>
را مثل <b>
و <em>
را مثل <i>
نمایش می دهند. با این حال در معنای این تگ ها تفاوت وجود دارد: <b>
و <i>
متن بولد و ایتالیک را مشخص می کنند، اما <strong>
و <em>
بدین معنی هستند که متن مهم است.
عنصر <small>
یک متن کوچک را تعریف می کند:
عنصر <mark>
یک متن مارک یا هایلایت شده را تعریف می کند:
عنصر <del>
برای مشخص کردن متون حذف شده استفاده می شود:
عنصر <ins>
یک متن اضافه شده را تعریف میکند:
عنصر <sub>
یک متن زیرنویس شده را تعریف می کند:
عنصر <sup>
یک متن بالانویس شده را تعریف می کند:
I am Red
I am Blue
I am Big
با صفت style
می توان تنظیمات مربوط به اندازه، فونت، رنگ و . یک عنصر را در HTML مقدار دهی کرد.
شما می توانید به این صورت از صفت style در کدهای HTML خود استفاده کنید:
Property یک ویژگی از جنس CSS و value یک مقدار از جنس CSS است
توجه: شما در آموزش های بعدی درباره ی CSS بیشتر یاد خواهید گرفت
ویژگی background-color
رنگ پس زمینه را برای یک عنصر HTML تعریف می کند.
در این مثال رنگ پس زمینه صفحه با رنگ powderblue مقدار دهی شده است:
color رنگ متن یک عنصر HTML تعریف می کند:
ویژگی font-family
فونت یک عنصر HTML را تعریف می کند:
ویژگی font-size
اندازه متن یک عنصر HTML را تعریف می کند:
ویژگی text-align
ترازبندی یک عنصر HTML را تعریف می کند:
عنصر <p>
در HTML یک پاراگراف را تعریف می کند:
نکته: مرورگرها به طور خودکار مقداری فضای خالی (حاشیه) را قبل و بعد از پاراگراف اضافه می کنند.
شما نمیتوانید درباره ی چگونگی صفحات HTML مطمئن شوید، زیرا پنجره های بزرگ یا کوچک و یا پنجره های تعییر یافته نتایج مختلفی ایجاد می کند.
در HTML، شما نمی توانید با اضافه کردن فضاهای خالی یا خط های اضافی در کدهای HTML خروجی کدهایتان در مرورگر را تغییر دهید.
مرورگر فضاهای اضافی و خطوط اضافی را وقتی صفحه نمایش داده می شود حذف می کند:
با این حال اگر تگ پایان را فراموش کنید بیشتر مرورگرها صفحه HTML را بدرستی نمایش خواهند داد:
مثال فوق در بیشتر مرورگرها کار خواهد کرد، اما نباید به آن تکیه کنید.
نکته: به کار نبردن تگ پایان ممکن است که نتایج غیر منتظره ای به همراه داشته باشد و یا سبب ارورهای متعدد شود.
عنصر <br>
در HTML باعث رفتن به خط بعد میشود.
شما می توانید زمانی از <br>
استفاده کنید که میخواهید بدون شروع یک پاراگراف جدید به خط بعدی بروید:
تگ <br>
یک تگ خالی (empty) است، که بدان معنی است که تگ پایانی ندارد.
در خروجی کد زیر شعرها در یک خط نمایش داده می شوند:
عنصر <pre>
در HTML متنی را که از پیش فرمت بندی شده تعریف می کند.
متن داخل عنصر <pre>
با یک فونت پیشفرض (معمولا courier) نمایش داده میشود، و همچنین فضاها و خطوط خالی اضافه شده داخل این عنصر حفظ می شوند.
عنوان ها با تگ های <h1>
تا <h6>
تعریف می شوند.
<h1>
مهمترین عنوان و <h6>
کم اهمیت ترین عنوان را تعریف میکند.
نکته: مرورگر به طور خودکار یک فضای سفید(حاشیه) را قبل و بعد از یک عنوان اضافه می کند.
موتورهای جستجو از عنوان ها برای ایند ساختار و محتوای صفحات وب استفاده می کنند.
کاربران اغلب از عنوان ها برای انتخاب صفخات وب استفاده می کنند، برای همین استفاده از عنوان ها برای نشان دادن ساختار سند بسیار مهم است.
از تگ <h1>
برای نشان دادن مهم ترین عنوان ها استفاده میشود، به دنبال آن از تگ <h2>
، و بعد از آن از <h3>
و غیره برای نشان دادن عنوان های کم اهمیت تر استفاده میشود.
نکته:از عنوان ها در HTML فقط برای سر تیتر مطالب خود استفاده کنید. از عنوان ها برای بزرگ یا بولد کردن متن استفاده نکنید.
هر عنوان در HTML دارای اندازه پیش فرض است. با این حال، شما می توانید برای هر عنوان با صفت style
با استفاده از ویژگی font-size
در CSS اندازه مورد نظر خود را مشخص کنید.
تگ <hr>
یک تغییر موضوع (thematic break) را در صفحه HTML نشان می دهد و اغلب به عنوان یک خط افقی نمایش داده می شود.
عنصر <hr>
برای جدا کردن محتوا (یا تعریف یک تغییر) در یک صفحه HTML استفاده می شود:
عنصر <head>
در HTML فضایی برای قرارگیری metadata ها است. metadata ها حاوی داده هایی درباره سند HTML ما هستند که نمایش داده نمی شوند، اما برای نمایش درست صفحات وبسایت لازم هستند.
عنصر <head>
بین تگ <html>
و <body>
قرار می گیرد:
نکته: metadata ها معمولا عنوان سند، کاراکتر ست ، استایل ها، اسکریپت ها و دیگر متا اطلاعات تعریف می کنند.
آیا تا به حال یک صفحه وب را مشاهده کرده اید و از خود بپرسید که "این صفحه چطور درست شده است؟"
برای مشاهده کد منبع (source code) صفحه HTML روی صفحه مورد نظر کلیک راست کرده و گزینه ی "view page source" (در Chrome) یا "view sorce" (در Edge) و یا شبیه به اینها را در دیگر مرورگرها انتخاب کنید. پنجره ای که باز خواهد شد حاوی کدهای منبع HTML آن صفحه است.
برای انجام این کار بر روی یک عنصر (یا یک فضای خالی) راست کلیک کرده و گزینه "Inspect" یا "Inspect Element" را انتخاب کنید تا چگونه ساخته شدن آن عنصر را مشاهده کنید (شما با انجام این کار هم کدهای HTML و هم کدهای CSS را مشاهده خواهید کرد). همچنین شما میتوانید کدهای CSS و HTML در پنل باز شده تغییر دهید و نتیجه را به صورت آنی مشاهده کنید، البته توجه داشته باشید که این تغییرات فقط برای شما قابل مشاهده هستند و در صورت رفرش کردن صفحه از بین می روند.
صفات (attributes) در HTML اطلاعات اضافی را برای عناصر ارائه می دهند. در این فصل از آموزش HTML به بررسی برخی از این صفات می پردازیم.
لینک ها در تگ <a>
تعریف می شوند. آدرس لینک نیز با صفت href
مشخص می شود:
در آموزش های بعدی درباره ای لینک ها و تگ <a>
بیشتر یاد خواهید گرفت.
عکس ها در HTML با تگ <img>
تعریف می شوند.
نام فایل منبع تصویر در صفت src
مشخص می شود:
عکس ها در HTML همچنین دارای صفات width
و height
هستند، که عرض و ارتفاع تصاویر را مشخص می کند:
صفات عرض و ارتفاع به صورت پیشفرض با واحد پیکسل مقدار دهی می شوند، بنابراین "width="500 به معنای عرض 500 پیکسل است.
شما درباره تصاویر در فصل های بعدی بیشتر یاد خواهید گرفت.
اگر تصویر به هر دلیلی قابل نمایش نباشد، صفت alt
یک متن جایگزین را به جای عکس نمایش می دهد.
همچنین ارزش صفت alt
برای اسکرین ریدرزها (نرم افزارهای خوانند متن) قابل خواندن است. به این ترتیب، فردی که به متن صفحات وب گوش میکند (برای مثال فرد دچار اختلال بینایی) می تواند محتوای این عنصر را بشنود.
صفت alt
همچنین برای زمانی که تصویر ما قابل نمایش نباشد نیز مفیداست (مثلا وقتی که تصویر وجود نداشته باشد).
در مثال زیر می توانید مشاهده کنید که اگر سعی کنیم تصویری را که وجودخارجی ندارد نشان دهیم چه اتفاقی می افتد:
صفت style
برای مشخص کردن ظاهر یک عنصر در مواردی همچون رنگ، فونت، اندازه و غیره استفاده می شود.
زبان سند را میتوان در تگ <html>
مشخص کرد.
زبان با صفت lang
مشخص می شود.
مشخص کردن زبان برای موتورهای جستجو و اسکرین ریدرز اهمیت فراوانی دارد.
دو حرف اول، زبان (en) را مشخص می کند. اگر گویش خاصی مد نظرتان است دو حرف دیگر اضافه کنید (us).
در اینجا صفت title
به عنصر <p>
اضافه شده است. مقدار صفت title وقتی که موس روی پاراگراف قرار بگیرد در یک تول تیپ (tooltip) کوچک نمایش داده می شود:
در HTML5 استفاده از حروف کوچک برای نوشتن نام صفات اجباری نیست.
برای مثال نوشتن تگ title به دو صورت title و TILTLE صحیح است.
W3C استفاده از حروف کوچک را توصیه می کند.
در HTML5 اجباری به استفاده از نقل قول ("") در اطراف ارزش (value) صفات وجود ندارد.
صفت href که در مثال های بالا استفاده شده بود می تواند بدون نقل قول ("") نوشته شود:
با این حال W3C پیشنهاد می کند که از نقل قول ("") استفاده کنید.
گاهی لازم است که از نقل قول ("") استفاده شود، مثلا زمانی که بین دو کلمه از ارزش یک صفت فضای خالی (space) وجود دارد. مثال زیر ارزش صفت title را به درستی نشان نمی دهد زیرا دارای یک فضای خالی (space) است.
استفاده از نقل قول دوتایی (" ") در اطراف ارزش صفات در HTML شایع تر است، اما نقل قول تکی (' ') نیز می تواند مورد استفاده قرار گیرد.
در بعضی موارد که ارزش صفت خود شامل نقل قول دوتایی (" ") است، استفاده از نقل قول تکی به صورت زیر ضروری است:
یا برعکس:
title
محتوای تول تیپ (tooltip) را مشخص میکندhref
آدرس لینک را مشخص می کند/li>width
و height
اندازه عکس را تعیین می کنندalt
متنی جایگزین را به جای عکس مشخص می کندCSS مخفف عبارت Cascading Style Sheet به معنی الگوهای آبشاری می باشد.
CSS نحوه نمایش عناصر HTML را روی صفحه کامپیوتر، کاغذ یا دیگر رسانه ها مشخص می کند.
CSS می تواند بسیار مفید باشد، برای اینکه یک فایل CSS می تواند ظاهر چندین صفحه وب را به طور همزمان کنترل کند.
همچنین CSS به یکی از سه روش زیر می تواند به عناصر HTML اضافه شود:
<style>
در بخش <head>
رایج ترین روش برای اضافه کردن CSS به عناصر HTML استفاده از روش External است. با این حال ما در این آموزش ها برای Style دهی به عناصر HTML از روش های Inline و Internal استفاده می کنیم به این دلیل که استفاده از این روش ها راحت تر است و آموزش های ما را برای شما قابل فهم تر میکند.
نکته: در این فصل ما تنها به آموزش برخی از مفاهیم پایه ای CSS پرداخته ایم، اما در آینده آموزش کامل CSS در دوره آموزشی مربوط به آن قرار خواهد گرفت.
از روش Inline برای دادن استایلی منحصر به فرد به یک عنصر HTML استفاده می شود.
در روش Inline ما با استفاده از صفت style ویژگی مد نظرمان را بر روی عنصر مورد نظر اعمال می کنیم.
در مثال زیر با استفاده از این روش رنگ متن عنصر <h1>
را به آبی تغییر داده ایم:
از روش Internal برای دادن استایلی به یک صفحه مشخص HTML استفاده می شود.
در روش Internal کد های CSS در بخش <head>
از صفحه ی HTML و در داخل عنصر <style>
قرار می گیرند:
از روش External برای دادن استایل به تعداد زیادی صفحه HTML استفاده می شود.
در این روش به این دلیل که ما از یک فایل خارجی برای استایل دهی به تمام صفحات وب سایت استفاده می کنیم با تغییر کدهای تنها همین یک فایل می توانیم شاهد تغییر ظاهر همه ی صفحات وب سایت باشیم.
برای استفاده از روش External، ابتدا باید یک فایل با پسوند CSS. ایجاد کنید و سپس لینک این فایل را به صورت زیر در داخل بخش <head>
از سند HTML تان قرار دهید:
صفحه ی External که حاوی کدهای CSS است، می تواند توسط هر ویرایشگر متنی نوشته شود. این فایل نباید حاوی هیچ کد HTML ای باشد و همچنین باید با پسوند CSS. ذخیره شود.
صفحه ی External ای که حاوی کدهای CSS بوده و در مثال بالا لینک شده به شکل زیر است:
ویژگی color
در CSS رنگ متن مورد استفاده را مشخص می کند.
ویژگی font-family
در CSS فونت متن مورد استفاده را مشخص می کند.
ویژگی font-size
در CSS اندازه متن مورد استفاده را مشخص می کند.
ویژگی border
در CSS مشخص میکند که حاشیه دور یک عنصر HTML به چه شکلی باشد:
ویژگی padding
در CSS مشخص میکند که فاصله متن تا border یا حاشیه ی یک عنصر HTML چه قدر باشد:
ویژگی margin در CSS فاصله border یا حاشیه ی یک عنصر HTML را با دیگر عناصر HTML مشخص می کند:
برای تعریف یک استایل خاص برای یک عصر خاص، صفت id
را به آن عنصر اضافه کنید:
سپس به صورت زیر یک استایل خاص را برای آن عنصر تعریف کنید:
توجه: صفت id یک عنصر باید در یک صفحه منحصر به فرد باشد، بنابراین از صفت id برای اعمال یک استایل خاص بر روی یک عنصر خاص استفاده می شود
برای استفاده از استایلی برای تعدادی عنصر خاص، صفت class
را به آن عنصرها اضافه کنید:
سپس به صورت زیر یک استایل برای آن عناصر تعریف کنید:
صفحات External یا خارجی حاوی استایل های CSS می توانند با یک URL کامل یا نسبی نسبت به صفحه HTML ارجاع داده شوند.
در مثال زیر از یک URL کامل برای آدرس دهی فایل خارجی CSS استفاده شده است:
مثال زیر اشاره به فایل خارجی CSS ای دارد که در همان فولدر html ای قرار دارد که سند HTML سایت در آن قرار گرفته است:
مثال زیر اشاره به فایل خارجی CSS ای دارد که در همان محلی قرار دارد که سند HTML سایت در آن قرار گرفته است:
https://www.w3schools.com/html/html_css.asp
در HTML می توان رنگ ها را با استفاده از نام های از پیش تعریف شده برای رنگ ها، مقادیر RGB ، HEX ، HSL ، RGBA ، HSLA مقدار دهی کرد. در این فصل ما به آموزش رنگ ها در همهی حالت ها خواهیم پرداخت.
در HTML یک رنگ را می توان با اسم مخصوص به آن رنگ مشخص کرد:
نام فارسی | نام انگلیسی | رنگ |
---|---|---|
گوجه ای | Tomato | |
نارنجی | Orange | |
نیلی | DodgerBlue | |
خزه ای | MediumSeaGreen | |
خاکستری | Gray | |
آبی فولادی | SlateBlue | |
بنفش روشن | Violet | |
خاکستری روشن | LightGray |
شما می توانید با استفاده از صفت background-color رنگ پس زمینه ای دلخواه برای عناصر HTML انتخاب کنید:
شما می توانید با استفاده از صفت color رنگی دلخواه برای عناصر HTML انتخاب کنید:
Lorem ipsum dolor sit amet, consectetuer adipiscing elit, sed diam nonummy nibh euismod tincidunt ut laoreet dolore magna aliquam erat volutpat.
Ut wisi enim ad minim veniam, quis nostrud exerci tation ullamcorper suscipit lobortis nisl ut aliquip ex ea commodo consequat.
شما می توانید با استفاده از صفت border رنگی دلخواه برای حاشیه عناصر HTML انتخاب کنید:
در HTML می توان رنگ ها را با استفاده از مقادیر RGB، مقادیر هگزادسیمال (HEX)، مقادیرHSL، مقادیر RGBA و مقادیر HSLA مشخص کرد:
در ادامه مثال هایی با رنگ یکسان گوجه ای برای هر یک از مقادیر بالا آورده شده است:
در مثال زیر از همان رنگ گوجه ای استفاده شده، اما 50 درصد شفاف تر:
در HTML یک رنگ را می توان با مقدار RGB با استفاده از این فرمول مشخص کرد: (rgb(red, green, blue.
به جای هر پارامتر (red, green, blue) عددی بین 0 تا 255 قرار می گیرد.
به عنوان مثال، (rgb(255, 0, 0 رنگ قرمز را نشان می دهد، زیرا رنگ قرمز روی بالاترین مقدار آن روی 255 تنظیم شده و مقدار بقیه پارامترها روی صفر قرار داده شده است.
برای نمایش رنگ سیاه باید تمام پارامترها با عدد 0 مقدار دهی شوند، اینگونه: (rgb(0, 0, 0.
برای نمایش رنگ سفید باید تمام پارامترها با عدد 255 مقدار دهی شوند، اینگونه: (rgb(255, 255, 255.
در مثال زیر چند رنگ با مقدار RGB مقدار دهی شده اند:
سایه های خاکستری اغلب با قرار دادن مقادیر مساوی به جای هر سه پارامتر تعریف می شوند:
در HTML یک رنگ را می توان با مقدار هگزادسیمال به این صورت تعریف کرد:
#rrggbb
که در آن rr (قرمز)، gg (سبز) و bb (آبی) مقادیر هگزادسیمالی بین 00 تا ff (به صورت تقریبی مشابه 255 حالت البته در مبنای 16) هستند.
سایه های خاکستری اغلب با قرار دادن مقادیر مساوی به جای هر سه پارامتر تعریف می شوند:
در HTML یک رنگ را می توان با مقدار HSL به این صورت تعریف کرد:
hsl(hue, saturation, lightness)
hue درجه ای از چرخه رنگ از 0 تا 360 است. 0 رنگ قرمز، 120 رنگ سبز و 240 رنگ آبی است.
مقدار saturation از جنس درصد است، 0% به معنای سایه خاکستری و 100% به معنای رنگ کامل است.
مقدار lightness نیز از جنس درصد است، 0% سیاه، 50% نه روشن و نه تاریک و 100% به معنای سفید است.
saturation را می توان به عنوان شدت یک رنگ توصیف کرد.
100% رنگ خالص است و سایه ای از خاکستری ندارد.
50% خاکستری است اما هنوز هم می توانید رنگ آن را ببینید.
0% کاملا خاکستری است و دیگر نمی توانید رنگ آن را ببینید.
شما می توانید از lightness برای تنظیم میزان روشنایی رنگتان استفاده کنید. 0% به معنای تاریکی (سیاه)، 50% به معنای نه روشن و نه تاریک و 100% بع معنای کاملا روشن (سفید) است.
سایه های خاکستری غالبا با تنظیم hue و saturation روی عدد صفر مشخص می شوند و برای رسیدن به سایه های خاکستری تیره تر یا روشن تر lightness را از 0 تا 100 تنظیم می کنند:
مقدار رنگ RGBA از همان فرمت RGB است با این تفاوت که این فرمت حاوی پارامتر آلفا (alpha) نیز هست که برای تعیین شفافیت رنگ کاربرد دارد.
مقدار رنگ RGBA در HTML به صورت زیر تعریف می شود:
rgba(red, green, blue, alpha)
پارامتر آلفا (alpha) عددی بین 0.0 (کاملا شفاف) و 1.0 (بسیار کدر) است:
مقدار رنگ HSLA از همان فرمت HSL است با این تفاوت که این فرمت حاوی پارامتر آلفا (alpha) نیز هست که برای تعیین شفافیت رنگ کاربرد دارد.
مقدار رنگ HSLA در HTML به صورت زیر تعریف می شود:
hsla(hue, saturation, lightness, alpha)
پارامتر آلفا (alpha) عددی بین 0.0 (کاملا شفاف) و 1.0 (بسیار کدر) است:
https://www.w3schools.com/html/html_colors.asp
تگ های کامنت در HTML برای قرار دادن توضیح یا نوشته ای در سورس کد HTML مورد استفاده قرار می گیرند.
شما به صورت زیر می توانید از کامنت ها در سورس کد HTML استفاده کنید.
توجه کنید که علامت تعجب فقط در تگ باز قرار داده می شود، و در تگ بسته نباید از آن استفاده کنید.
نکته: کامنت ها توسط مرورگرها نشان داده نمی شوند، اما کامنت ها می توانند در سورس کد سند HTML مفید باشند.
با کامنت ها شما می توانید که اعلان یا یادآوری هایی را در سند HTML تان اضافه کنید. به مثال زیر توجه کنید تا بیشتر با کاربرد کامنت ها آشنا شوید:
کامنت ها همچنین برای اشکال زدایی سند HTML بسیار عالی هستند، زیرا شما می توانید قسمتی از کدهای سند HTML خود را برای یافتن خطا کامنت کنید:
https://www.w3schools.com/html/html_comments.asp
متن زیر یک نقل قول از وبسایت WWF است:
به مدت 50 سال WWF از آینده طبیعت محافظت کرده است. WWF در 100 کشور فعالیت می کند و همچنین توسط 1.2 میلیون عضو در ایالات متحده و بیش از 5 میلیون نفر در سراسر جهان حمایت می شود.
عنصر <q>
در HTML نقل قول های کوتاه را تعریف کی کند.
مرورگرها معمولا در اطراف محتوای عنصر <q>
علامت کوتیشن قرار می دهند.
عنصر <blockquote>
برای تعریف نقل قول هایی استفاده می شود که از یک منبع دیگر نقل شده باشند.
مرورگرها معمولا برای محتوای عنصر <blockquote>
تو رفتگی ایجاد می کنند.
عنصر <abbr>
برای تعریف کلمات مخفف یا مختصر شده استفاده می شود.
با مقدار دهی صفت title برای عنصر <abbr>
با قرار گرفتن نشانگر موس روی محتوای این عنصر مقدار صفت title در یک تول تیپ کوچک نشان داده می شود.
استفاده از عنصر <abbr>
برای مشخص کردن اختصارات می تواند اطلاعات مفیدی را در اختیار مرورگرها، مترجم ها و موتورهای جستجو قرار دهد.
عنصر <address>
اظلاعات تماس (مالک/نویسنده) یک سند یا مقاله را تعریف می کند.
محتوای داخل عنصر <address>
به طور معمول به صورت ایتالیک نمایش داده می شوند. همچنین بیشتر مرورگرها یک خط خالی ابتدا و انتهای محتوای این عنصر اضافه می کنند.
عنصر <cite>
برای تعریف عنوان یا اسم یک اثر (مثل تابلو نقاشی) استفاده می شود.
مرورگرها معمولا محتوای داخل عنصر <cite>
را به صورت ابتالیک (کج) نمایش می دهند.
از عنصر <bdo>
برای عوض کردن جهت نوشتن یک متن در HTML استفاده می شود.
در متن زیر از این عنصر استفاده شده تا جهت نوشته شدن حروف متن عوض شود:
https://www.w3schools.com/html/html_quotation_elements.asp
This text is bold
This text is italic
This is subscript and superscript
در فصل قبلی، شما درباره ی صفت استایل یاد گرفتید.
همچنین در HTML عناصر ویژه ای برای دادن معنی خاصی به متن تعریف شده اند.
HTML از عناصری مانند <b>
(بولد کردن متن) و <i>
(ایتالیک کردن متن) برای فرمت بندی متون استفاده می کند.
عناصر فرمت بندی برای نمایش انواع خاصی از متن طراحی شده اند:
<b>
- متن بولد (پررنگ)<strong>
; - متن مهم<i>
- متن ایتالیک (کج)<em>
- متن تاکید شده<mark>
- متن مارک شده (نشانه گذاری شده)<small>
- متن کوچک<del>
- متن حذف شده<ins>
- متن اضافه شده<sub>
- متن زیرنویس<sup>
- متن بالانویسعنصر <b>
متن را بولد می کند، بدون این که از نظر معنایی اهمیت بیشتری به متن بدهد.
ولی عنصر <strong>
متن قوی را تعریف میکند. از نظر ظاهری متن قرار گرفته داخل این عنصر هیچ تفاوتی با متن بولد شده ندارد ولی از نظر معنایی اهمیت بسیار بیشتری دارد.
عنصر <i>
یک متن ایتالیک (کج) تعریف می کند، بدون اینکه از نظر معنایی اهمیت بیشتری به متن بدهد.
ولی عنصر <em>
یک متن تاکید شده را تعریف میکند. از نظر ظاهری متن قرار گرفته داخل این عنصر هیچ تفاوتی با متن ایتالیک ندارد ولی از نظر معنایی اهمیت بسیار بیشتری دارد.
نکته: مرورگرها <strong>
را مثل <b>
و <em>
را مثل <i>
نمایش می دهند. با این حال در معنای این تگ ها تفاوت وجود دارد: <b>
و <i>
متن بولد و ایتالیک را مشخص می کنند، اما <strong>
و <em>
بدین معنی هستند که متن مهم است.
عنصر <small>
یک متن کوچک را تعریف می کند:
عنصر <mark>
یک متن مارک یا هایلایت شده را تعریف می کند:
عنصر <del>
برای مشخص کردن متون حذف شده استفاده می شود:
عنصر <ins>
یک متن اضافه شده را تعریف میکند:
عنصر <sub>
یک متن زیرنویس شده را تعریف می کند:
عنصر <sup>
یک متن بالانویس شده را تعریف می کند:
https://www.w3schools.com/html/html_formatting.asp
I am Red
I am Blue
I am Big
با صفت style
می توان تنظیمات مربوط به اندازه، فونت، رنگ و . یک عنصر را در HTML مقدار دهی کرد.
شما می توانید به این صورت از صفت style در کدهای HTML خود استفاده کنید:
Property یک ویژگی از جنس CSS و value یک مقدار از جنس CSS است
توجه: شما در آموزش های بعدی درباره ی CSS بیشتر یاد خواهید گرفت
ویژگی background-color
رنگ پس زمینه را برای یک عنصر HTML تعریف می کند.
در این مثال رنگ پس زمینه صفحه با رنگ powderblue مقدار دهی شده است:
color رنگ متن یک عنصر HTML تعریف می کند:
ویژگی font-family
فونت یک عنصر HTML را تعریف می کند:
ویژگی font-size
اندازه متن یک عنصر HTML را تعریف می کند:
ویژگی text-align
ترازبندی یک عنصر HTML را تعریف می کند:
https://www.w3schools.com/html/html_styles.asp
عنصر <p>
در HTML یک پاراگراف را تعریف می کند:
نکته: مرورگرها به طور خودکار مقداری فضای خالی (حاشیه) را قبل و بعد از پاراگراف اضافه می کنند.
شما نمیتوانید درباره ی چگونگی صفحات HTML مطمئن شوید، زیرا پنجره های بزرگ یا کوچک و یا پنجره های تعییر یافته نتایج مختلفی ایجاد می کند.
در HTML، شما نمی توانید با اضافه کردن فضاهای خالی یا خط های اضافی در کدهای HTML خروجی کدهایتان در مرورگر را تغییر دهید.
مرورگر فضاهای اضافی و خطوط اضافی را وقتی صفحه نمایش داده می شود حذف می کند:
با این حال اگر تگ پایان را فراموش کنید بیشتر مرورگرها صفحه HTML را بدرستی نمایش خواهند داد:
مثال فوق در بیشتر مرورگرها کار خواهد کرد، اما نباید به آن تکیه کنید.
نکته: به کار نبردن تگ پایان ممکن است که نتایج غیر منتظره ای به همراه داشته باشد و یا سبب ارورهای متعدد شود.
عنصر <br>
در HTML باعث رفتن به خط بعد میشود.
شما می توانید زمانی از <br>
استفاده کنید که میخواهید بدون شروع یک پاراگراف جدید به خط بعدی بروید:
تگ <br>
یک تگ خالی (empty) است، که بدان معنی است که تگ پایانی ندارد.
در خروجی کد زیر شعرها در یک خط نمایش داده می شوند:
عنصر <pre>
در HTML متنی را که از پیش فرمت بندی شده تعریف می کند.
متن داخل عنصر <pre>
با یک فونت پیشفرض (معمولا courier) نمایش داده میشود، و همچنین فضاها و خطوط خالی اضافه شده داخل این عنصر حفظ می شوند.
https://www.w3schools.com/html/html_paragraphs.asp
درباره این سایت