آموزش HTML - قسمت دوم (عناصر ، خصوصیات ، عنوان یا سرتیتر و پاراگراف ها)

سند های HTML به وسیله عناصر HTML تعریف می شوند.عناصر (Element)یک عنصر در HTML، هر چیزی از تگ شروع تا تگ پایان می باشد:*تگ شروع را اغلب تگ باز و تگ پایان را اغلب تگ بسته می نامند.نحوه نوشتن یک عنصر در HTMLیک عنصر با یک تگ شروع (تگ باز) آغاز می شود.یک عنصر به یک تگ پایان (تگ بسته) ختم می شود.محتوای یک عنصر نوشته های بین تگ شروع و پایان می باشد.بعضی از عناصر در HTML تهی هستند.عناصر تهی در همان تگ شروع بسته می شود.بیشتر عناصر HTML می توانند دارای خصوصیت هایی باشند.توجه: در ادامه آموزش در مورد خصوصیت های عناصر، بیشتر توضیح می دهیم.عناصر تو در تو در HTMLبیشتر عناصر HTML می توانند به صورت تو در تو باشند. (بدین معنی که محتوای آنها می تواند شامل دیگر عناصر HTML نیز باشد)سندهای HTML شامل عناصر تو در توی HTML می باشند.مثالی از یک سند HTML<html> <body> <p>This is my first paragraph.</p> </body> </html>مثال بالا شامل سه عنصر زیر می باشد:1- عنصر <p><p>This is my first paragraph.</p>عنصر <p> یک پاراگراف را در سند HTML تعریف می کند.این عنصر حاوی تگ شروع <p> و تگ پایان <p/> می باشد.محتوای این عنصر "This is my first paragraph" می باشد.2- عنصر <body><body> <p>This is my first paragraph.</p> </body>عنصر <body> بدنه یک سند HTML را توصیف می کند.این عنصر دارای تگ شروع <body> و تگ پایان <body/> می باشد.محتوای این عنصر حاوی یک عنصر دیگر (عنصر p) می باشد.3- عنصر <html><html> <body> <p>This is my first paragraph.</p> </body> </html>عنصر <html> تمام سند html را توصیف می کند.این عنصر دارای تگ شروع <html> و تگ پایان <html/> می باشد.محتوای این عنصر حاوی یک عنصر دیگر (عنصر body که خود حاوی عنصر <p> است) می باشد.* تگ پایان را فراموش نکنیددر بعضی عناصر HTML حتی اگر تگ پایان را فراموش کنید ممکن است آن عنصر درست عمل کند:<p>This is a paragraph <p>This is a paragraphمثال بالا در بیشتر مرورگرها درست عمل می کند، زیرا تگ بسته در اینجا اختیاری می باشد.هرگز به این مسئله که تگ بسته اختیاری است استناد نکنید. عناصر زیادی هستند که اگر تگ پایان را در آنها ننویسید خطا می دهند یا نتایج نادرستی می دهند.عناصر تهیعناصری که قسمت محتوای آنها خالی است را عناصر تهی می نامیم.عنصر <br> یک عنصر تهی و بدون تگ بسته است (تگ <br> یک خط را تعریف می کند.)نکته: در XHTML تمام عناصر باید بسته شوند. اضافه کردن یک اسلش درون تگ شروع، مثل </br>، راه مناسبی برای بستن عناصر تهی در XHTML و XML می باشد.نکته: تگ ها را با حروف کوچک بنویسیدتگ های HTML حساس به کوچکی و بزرگی حروف نیستند: <P> با <p> یکسان است. بیشتر وب سایت ها تگ ها را با حروف بزرگ می نویسند.خصوصیت ها اطلاعات بیشتری در مورد عناصر HTML می دهند.خصوصیت ها (Attributes) در HTMLتمام عناصر در HTML دارای خصوصیت هستند.خصوصیت ها اطلاعات بیشتری در مورد یک عنصر می دهند.خصوصیت ها همیشه در تگ شروع نوشته می شوند.خصوصیت ها به صورت روبرو نوشته می شوند: ("مقدار"=نام خصوصیت)مثال:لینک ها در HTML با تگ <a> تعریف می شوند. آدرس لینک به وسیله خصوصیت href مشخص می شود.<a href=&quothttps://w3schools.com&quot>This is a link</a>همیشه مقدار خصوصیت را در کوتیشن بنویسیدمقدار خصوصیت ها همیشه باید درون کوتیشن قرار بگیرد.دابل کوتیشن رایج تر است، اما تک کوتیشن نیز مجاز است.*نکته: در بعضی حالت های خاص، هنگامی که مقدار خصوصیتی خود حاوی کوتیشن نیز هست، ضروری است که از تک کوتیشن استفاده کنیم.مثل: 'name='John "ShotGun" Nelsonنکته: از حروف کوچک برای خصوصیت ها استفاده کنیدنام خصوصیت و مقدار آن حساس به حروف نمی باشند.اما کنسرسیوم World Wide Web یا (w3c) حالت کوچک حروف را برای نام و مقدار خصوصیت ها در HTML 4 توصیه می کند.در نسخه های جدید (HTML (X نوشتن حروف کوچک برای خصوصیت ها و مقادیرشان استاندارد شده است.در زیر لیستی از بعضی خصوصیت ها که برای عناصر زیادی در HTML استاندارد هستند ارائه شده است:عنوان یا سرتیتر (Headings) در HTMLعنوان ها در سندهای HTML، عناصر مهمی هستند.عنوان ها در HTMLعنوان یا سرتیتر در HTML به وسیله تگ های <h1> تا <h6> تعریف می شود.تگ <h1> برای مهمترین سرتیتر استفاده می شود. تگ <h6> کم اهمیت ترین سرتیتر را تعریف می کند.<h1>This is a heading</h1> <h2>This is a heading</h2> <h3>This is a heading</h3>نکته: مرورگرها به طور خودکار مقداری فضای خالی (یک حاشیه) را قبل و بعد از هر سرتیتری اضافه می کنند.سرتیترها عناصر مهمی هستنداز عنصر heading تنها برای سرتیترها استفاده کنید. از آنها برای بزرگ یا bold کردن استفاده نکنید.موتورهای جستجو از سرتیترهای شما برای شاخص گذاری ساختار و محتوای صفحات وب شما استفاده می کنند.از آنجایی که کاربران ممکن است صفحات وب شما را با نگاه کردن به سرتیترها از نظر بگذرانند، استفاده از سرتیترها برای اینکه ساختار سند را نشان دهید مهم است.تگ h1 برای مهمترین سرتیتر استفاده می شود، بعد از آن h2 و سپس h3 برای سرتیترهای کم اهمیت تر و به همین ترتیب سایر سرتیترها.ایجاد خطوط افقی در HTMLتگ </ hr> یک خط افقی را در صفحه HTML ایجاد می کند.عنصر hr برای جدا کردن محتویات از یکدیگر استفاده می شود.<p>This is a paragraph</p> <hr /> <p>This is a paragraph</p> <hr /> <p>This is a paragraph</p>توضیحات (Comment ها) در HTMLتوضیحات می توانند در کدهای HTML وارد شوند تا کدها را خواناتر و قابل فهم تر نمایند. توضیحات توسط مرورگرها نادیده گرفته می شوند و نمایش داده نمی شوند.توضیحات به صورت زیر نوشته می شوند:<!-- This is a comment -->نکته: علامت تعجب بعد از علامت باز نوشته می شود نه قبل از علامت بسته.نکته: چگونه کدهای HTML را ببینیمآیا تاکنون وقتی یک صفحه وب را دیده اید از خود پرسیده اید "چگونه می توان کدهای HTML آن را دید."برای دیدن این کدها روی صفحه مورد نظر راست کلیک کرده و از منوی باز شده گزینه "View Source" را در (IE) و یا "View Page Source" را در Firefox و یا گزینه مشابه را در سایر مرورگرها انتخاب کنید.مثال - خودتان امتحان کنیدچگونه سرتیترها را در یک سند HTML نشان دهیم.<html> <body> <h1>This is heading 1</h1> <h2>This is heading 2</h2> <h3>This is heading 3</h3> <h4>This is heading 4</h4> <h5>This is heading 5</h5> <h6>This is heading 6</h6> </body> </html>چگونه توضیحی را در کد HTML درج کنیم.<html> <body> <!-- This is a comment --> <p>This is a paragraph.</p> <!-- Comments are not displayed in the browser --> </body> </html>چگونه خط افقی درج کنیم.<html> <body> <p>The hr tag defines a horizontal rule:</p> <hr /> <p>This is a paragraph</p> <hr /> <p>This is a paragraph</p> <hr /> <p>This is a paragraph</p> </body> </html>منبعی از تگ ها در HTMLدر فصل های بعد در مورد تگ های HTML و خصوصیت های آن ها بیشتر خواهید آموخت.پاراگراف ها (Paragraphs) در HTMLپاراگراف ها، قسمت عمده ای از یک سند HTML را تشکیل می دهند.پاراگراف ها در HTMLپاراگراف ها به وسیله تگ <p> تعریف می شوند.<p>This is a paragraph</p> <p>This is another paragraph</p>نکته: مرورگرها به طور خودکار یک خط خالی را قبل و بعد از پاراگراف اضافه می کند.تگ پایان را فراموش نکنیداغلب مرورگرها حتی اگر تگ پایان را هم نگذاریم صفحه را به درستی نمایش می دهند.<p>This is a paragraph <p>This is another paragraphمثال بالا در بیشتر مرورگرها عمل می کند، اما به آن اطمینانی نیست. فراموش کردن تگ پایان می تواند نتایج غیر منتظره یا خطاهایی را ایجاد کند.تذکر: نسخه های آینده HTML به شما اجازه نمی دهد که تگ پایان را فراموش کنید.رفتن به خط جدید در HTMLاز تگ </ br> برای رفتن به خط جدید بدون اینکه پاراگراف جدیدی را شروع کنیم استفاده می شود.<p>This is<br />a para<br />graph with line breaks</p>عنصر </ br> یک عنصر تهی در HTML است. این عنصر دارای تگ پایان نیست.<br> یا </ br>در XHTML و XML عناصر بدون تگ پایان(تگ بسته) مجاز نمی باشند.اگر چه <br>در تمام مرورگرها کار می کند، اما نوشتن </ br> در برنامه های XHTML و XML بهتر عمل می کند.خروجی HTML - نکات مفیدشما نمی توانید مطمئن شوید که کدهای HTML چگونه نمایش داده خواهد شد. صفحات نمایش بزرگ یا کوچک و تغییر اندازه پنجره ها نتایج متفاوتی را به همراه دارد.هنگام نوشتن کدهای HTML، نباید انتظار داشته باشید که فاصله ها یا خط های اضافه در کدهای HTML در خروجی مرورگر نیز فاصله یا خط اضافه دیده شوند.یک مرورگر فاصله ها و خط های اضافی را هنگام نمایش صفحه بر می دارد. هر تعداد خط به عنوان یک خط و هر تعداد فاصله به عنوان یک فاصله حساب می شوند.<html> <body> <p>شعر زیر، در مرورگر پشت سرهم و در یک خط نمایش داده خواهد شد</p> <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> <p>Note that your browser ignores the layout!</p> </body> </html>(اگر این مثال را اجرا کنید بعضی از مشکلات فرمت دهی را در HTML نشان می دهد.)عنصر <pre> در HTMLبا استفاده از عنصر <pre> می توانید فاصله ها و خط های اضافی داخل متن را به همان صورت در مرورگر نمایش دهید:<p>فاصله و خط های اضافی در شعر زیر به همان صورت نمایش داده خواهد شد</p> <p>The pre tag is needed for displaying poems:</p> <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>مثال - خودتان امتحان کنیدچگونه پاراگراف ها در مرورگر نشان داده می شود.<html> <body> <p>This is a paragraph.</p> <p>This is a paragraph.</p> <p>This is a paragraph.</p> </body> </html>رفتن به خط جدید در سندهای HTML.<html> <body> <p>This is<br />a para<br />graph with line breaks</p> </body> </html>بعضی مشکلات در فرمت دهی در HTML.<html> <body> <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> <p>Note that your browser ignores the layout!</p> </body> </html>رفتارهای پیش فرض در پاراگراف ها.<html> <body> <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> <p> The number of lines in a paragraph depends on the size of your browser window. If you resize the browser window, the number of lines in this paragraph will change. </p> </body> </html>منبع تگ های HTMLمنبع تگ های HTML حاوی اطلاعات اضافی در مورد عناصر HTML و خصوصیت های آن ها می باشد.