پاراگراف های html
سندهای HTML به پاراگراف ها تقسیم شده اند
پاراگراف های HTML
پاراگراف ها بوسیله تگ <p> تعریف شده اند
<p>This is a paragraph</p>
<p>This is another paragraph</p>
توجه : مرورگرها به طور خودکار یک خط خالی ، قبل و بعد از پاراگراف اضافه می کنند
تگ پایان را فراموش نکن
بیشتر مرورگرها HTML را به درستی نمایش می دهند ، حتی اگر شما تگ پایان را
فراموش کنید
p>This is a paragraph>
مثال بالا در بیشتر مرورگرها کار می کند ، ولی به آن تکیه نکنید ، فراموش کردن تگ
پایان می تواند نتایج غیر قابل انتظار و خطاها را تولید کند
توجه: نسخه های آینده HTML به شما اجازه نخواهند داد که از تگ پایان جهش کنید
خط شکسته ( خط جدید) HTML
اگر شما یک خط شکسته ( خط جدید ) ، بدون شروع یک پاراگرف جدید می خواهید از
تگ </br>استفاده کنید
عنصر( تگ ) </br> جزو عنصرهای( تگ های ) خالی HTML است ، تگ پایان ندارد
<p>This is<br />a para<br />graph with line breaks</p>
تگ <br> یا </br> ؟
در XHTML و XML نسخه های آینده HTML ، تگ های HTML بدون تگ پایان اجازه داده
نمی شوند حتی اگر تگ <br> در تمام مرورگرها کار کند ، نوشتن تگ </br> به جای
آن در آینده بیشتر ملاک است
نکته های مفید - خروجی HTML
شما نمی توانید مطمئن باشید که HTML چگونه نمایش داده می شود ، بزرگ یا کوچک
بودن صفحه ها و تغییر اندازه پنجره ها ، نتیجه های متفاوت ایجاد خواهد کرد
با HTML شما نمی توانید خروجی را بوسیله اضافه کردن ، فاصله ها و خط های اضافی ،
در کد HTML خود تغییر دهید مرورگرها فاصله ها و خط های اضافی را وفتی که صفحه
نمایش داده می شود نادیده می گیرند هر تعداد خط (lines) ، یک خط مشاهده می
شود و هر تعداد فاصله (spaces) ، یک فاصله مشاهده می شود
مثال زیر بعضی از مشکلات قالب بندی متن HTML را نشان می دهد:
مثال از این صفحه
چگونه پاراگراف های HTML در مرورگر نمایش داده می شوند HTML paragraphs
از خط شکسته ( خط جدید) در سند HTML استفاده کن Line breaks
بعضی از مشکلات قالب بندی متن Poem problems : HTML
مثال های بیشتر
رفتارهای پیش فرض پاراگراف ها More paragraphs
مرجع تگ HTML
مرجع تگ w3schools شامل اطلاعات اضافی درباره این تگ ها و صفت هایشان است
شما تگ ها و صفت هایشان را در فصل های بعدی این خودآموز فراخواهید گرفت
شرح (description) تگ (tag) یک پاراگراف را مشخص می کند <p> یک خط شکسته اضافه می کند </br>
سرتیترهای html
سرتیترها در اسناد HTML مهم هستند
سرتیترهای HTML
سرتیترهای HTML از تگ <h1> تا <h6> تعریف شده اند
تگ <h1> بزرگترین سرتیتر را مشخص می کند و تگ <h6> کوچکترین سرتیتر را
مشخص می کند
<h1>This is a heading</h1>
سرتیترها مهم هستند
از سرتیترهای HTML فقط برای سرتیتر استفاده کن ، از سرتیترهای HTML برای تولید
متن بزرگ یا ضخیم استفاده نکن ، موتورهای جست و جو از سرتیترهای شما برای
نشان دادن ساختار و محتوای صفحات وب شما استفاده می کنند ، از آنجایی که ممکن
است کاربران ، صفحات شما را به طور سطحی بخوانند ، استفاده از عناوین برای نشان
دادن ساختار سند مهم است سرتیتر H1 باید به عنوان سرتیتر اصلی استفاده شود ، به
دنبال آن سرتیتر H2 ، سپس کم اهمیت تر سرتیتر H3 و ...
خطوط HTML
تگ </hr> یک خط افقی در صفحه HTML ایجاد می کند ، تگ </hr> می تواند در
محتوای جداگانه استفاده شود
توضیح های HTML
توضیحات ( تفسیرها) می توانند به کد HTML اضافه شوند ، که باعث می شود قابل
خواندن و قابل فهم باشد ؛ توضیحات ( تفسیرها ) توسط مرورگرها نادیده گرفته شده و
نمایش داده نمی شوند
حالا خودتان امتحان کنید!
چگونه سورس های HTML را میتوان مشاهده کرد؟
اگر تا حالا یک صفحه وب را دیده باشید و شگفت زده شده باشید و با خود بگویید که چگونه آن ها این کار را کرده اند ، برای فهمیدن ، در صفحه ای که هستید راست کلیک
(right-click) کنید و گزینه مشاهده سورس ( view source ) در مرور گر IE یا مشاهده
صفحه سورس ( view page source ) در مرورگر Firefox را انتخاب کنید
(در مرورگرهای دیگر نیز مشابه است)
مثال از این صفحه
سرتیترها در سند HTML چگونه نمایش داده می شوند Headings
چگونه توضیحات ( تفسیرها) را به سورس کد HTML اضافه میکنند Hidden comments
چگونه یک خط افقی اضافه می کنند Horizontal lines
مرجع تگ HTML
مرجع تگ w3schools شامل اطلاعات اضافی درباره این تگ ها و صفت هایشان است
شما تگ ها و صفت هایشان را در فصل های بعدی این خودآموز فراخواهید گرفت
| شرح (description) | تگ (tag) |
| یک سند HTML را تعریف می کند | <html> |
| بدنه ( پیکر) سند را مشخص می کند | <body> |
| سرتیترهای HTML را مشخص می کند | <h6> تا <h1> |
| یک خط افقی مشخص می کند | </hr> |
| یک توضیح(تفسیر) را مشخص می کند | <--!> |
صفت های html
صفت ها ، اطلاعات اضافی درباره ی عناصر ( تگ ها ) HTML را فراهم می کنند
صفت های HTML :
- عناصر(تگ ها) HTML می توانند صفات (attributes) داشته باشند
- صفت ها ، اطلاعات اضافی درباره ی عناصر HTML را فراهم می کنند
- صفات همیشه در تگ شروع (برچسب شروع) ، مشخص شده اند
- صفت ها همیشه اینگونه می آیند "name = "value مانند : "href="www.w3cschools.ir
مثال از صفت ( attribute )
لینک های HTML بوسیله تگ <a> تعریف شده اند ؛ آدرس های لینک در صفت href
تعریف شده اند مثال :
<a href="http://www.w3cschools.ir">This is a link</a>
مقدار (value) صفت همیشه در نقل قول
مقدار صفت همیشه در نقل قول ها محصور شود ، دوبل کوتیشن ها (" ") متداول تر
هستند اما تک کوتیشن ها (' ') نیز مجاز می باشند
در بعضی از موقعیت های نادر مثل زمانی که مقدار صفت خود شامل
کوتیشن می باشد لازم است که از تک کوتیشن استفاده کنیم مثال :
'name='John "ShotGun" Nelson
از صفت های با حروف کوچک استفاده کن
صفت ها و مقدار صفت ها به کوچکی و بزرگی حروف حساس نیستند با این حال
کنسرسیوم جهانی وب (W3C) در HTML4 توصیه به استفاده از حروف کوچک در صفت
ها و مقدار صفت ها می کند ، نسخه های جدید تر از XHTML تقاضا می کنند که از حروف
کوچک در صفت ها استفاده کنید
مرجع صفت های HTML
فهرست کاملی از صفت های قانونی برای هر عنصر HTML در این سایت فهرست
شده اند:
فهرست بعضی از صفت هایی که در بیشتر تگ های HTML استاندارد هستند در زیر
آمده است:
| توضیحات (description) | مقدار(value) | صفت(attribute) |
| نام class را برای یک عنصر HTML مشخص می کند | نام class | class |
| یک شناصه منحصر به فرد برای هر عنصر(تگ) مشخص می کند | شناسه | id |
| یک استایل درونی برای یک عنصر HTML مشخص می کند | تعریف استایل | style |
| اطلاعات اضافی در مورد یک عنصر HTML ارائه میکند و با ایستادن ماوس روی عنصر، نمایش داده میشود | متن عنوان | title |
برای اطلاعات بیشتر درباره ی صفت های استاندارد رجوع کنید به :
عناصر html
اسناد HTML ، از طریق عنصرهای HTML تعریف می شوند
عنصرهای HTML
یک عنصر HTML همه چیز بین تگ شروع و تگ پایان می باشد
تگ پایان محتوای تگ تگ شروع
<p> this is a paragraph </p>
<a href="defult.htm"> this is a link </a>
- نام دیگر تگ شروع (start tag) ، تگ باز (opening tag) است
- نام دیگر تگ پایان (end tag) ، تگ بسته (closing tag) است
ساختار عناصر HTML
- یک عنصر HTML بوسیله تگ شروع ( تگ باز ) آغاز می شود
- یک عنصر HTML بوسیله تگ پایان ( تگ بسته ) پایان می یابد
- محتوای عنصر همه چیز بین تگ شروع و تگ پایان است
- بعضی عنصرها محتوای خالی دارند
- عنصرهای خالی در تگ شروع بسته می شوند مثل : </br>
- بیشتر عنصرهای HTML می توانند دارای صفت ها ( attributes) باشند
- نام دیگر تگ ( برچسب ) ، element (عنصر) می باشد
توجه : شما صفت ها ( attributes) را در فصل های بعدی این خودآموز فرا می گیرید
عنصرهای تودرتو HTML
بیشتر عنصرهای ( تگ های ) HTML میتوانند تودرتو باشند
( می توانند شامل دیگر عنصرهای ( تگ های ) HTML باشند)
مثال سند HTML
مثال توضیح داده شده HTML
عنصر ( تگ ) <p>:
<p>This is my first paragraph.</p>
- عنصر ( تگ ) <p> یک پاراگراف را در سند HTML تعریف می کند
- این عنصر یک تگ شروع ( <p> ) و یک تگ پایان دارد ( <p/> )
- محتوای این عنصر : This is my first paragraph است
عنصر ( تگ ) <body>:
- عنصر ( تگ ) <body> یک بدنه ( پیکر ) را در سند HTML تعریف می کند
- این عنصر یک تگ شروع (<body>) و یک تگ پایان (<body/>) دارد
- محتوای این عنصر ، عنصر دیگر است(عنصر<p> محتوای عنصر <body> است)
عنصر ( تگ ) <html>:
<p>This is my first paragraph.</p>
<html/>
- عنصر ( تگ ) <html> تــــمـــــام ( کل ) سند HTML را مشخص می کند
- این عنصر یک تگ شروع <html> و یک تگ پایان <html/> دارد
- محتوای این عنصر ، عنصر دیگر است(عنصر<body> محتوای عنصر <html> است )
تگ پایان را فراموش نکن
p>This is a paragraph>
بیشتر مرورگرها HTML را به درستی نشان می دهند حتی اگر شما تگ پایان را فراموش
کنید مثال بالا در بیشتر مرورگرها کار خواهد کرد اما به آن تکیه نکن ؛ فراموشی تگ
پایان می تواند نتایج یا خطاهای غیر قابل انتظار تولید کند
توجه : نسخه آینده HTML به شما اجازه نخواهد داد که از تگ پایان پرش کنید
عناصر خالی HTML
عناصر HTML بدون محتوا را عناصرخالی (empty element) می نامند این عناصر
در همان تگ شروع بسته می شوند ، تگ <br/> یکی از عناصر خالی است که بسته
نمی شود ( تگ <br> باعث شکستن خط بعد از خود می شود )
البته در زبان های XHTML و XML و نسخه های بعدی HTML ، همه ی عناصر باید بسته
شوند اضافه کردن یک ممیز به تگ شروع مانند </br> مناسب ترین را برای بستن
عناصر خالی است و توسط XHTML و HTML و XML پذیرفته شده است حتی اگر تگ
<br> در تمام مرورگرها کار کند ، نوشتن تگ </br> به جای آن در آینده بیشتر ملاک
است
نکته HTML : از تگ های با حروف کوچک استفاده کن
تگ های HTML به حروف کوچک حساس نیست به طور مثال تگ <b> همان کار تگ
<B> را انجام می دهد ، بسیاری از صفحات وب از حروف بزرگ برای ساختن تگ های
HTML استفاده می کنند w3cschools از تگ های با حروف کوچک استفاده می کند به
خاطر این که کنسرسیوم جهانی وب ( W3C ) توصیه به استفاده از حروف کوچک در
HTML4 می کنند و تگ های با حروف کوچک را در نسخه های آینده X)HTML) خواستار
است.
اصول html
اگر مثال ها ، از تگ هایی استفاده می کننند که شما فرا نگرفته اید ، نگران نباشید ؛
شما همه چیز را در رابطه با آن در فصل های بعدی یاد خواهید گرفت
سرتیترهای HTML
سرتیترهای HTML از تگ های <h1> تا <h6> تعریف شده اند
پاراگراف های HTML
پاراگراف های HTML بوسیله تگ <p> تعریف شده اند
<p>My First Heading </p>
لینک های HTML
لینک های HTML بوسیله تگ <a> تعریف شده اند
<a href="http://www.w3cschools.ir">This is a link</a>
توجه: لینک آدرس در صفت href مشخص شده است (href=attribute)
شما صفت ها (attributes) را در فصل های بعدی این خودآموز فرا خواهید گرفت
تصاویر HTML
تصاویر HTML بوسیله تگ <img> تعریف شده اند
</ "img src="w3cschools.jpg" width="104" height="142 >