آموزش html - پایه های اصلی

تعداد بازدید: 506

در این مقاله چند مثال اساسی 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> 

اعلامیه <! DOCTYPE>

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

فقط باید یک بار ، در بالای صفحه (قبل از هر برچسب HTML) ظاهر شود.

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

عبارت <! DOCTYPE> برای HTML5 عبارت است از:

<!DOCTYPE html>

عناوین HTML

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

<h1> مهمترین عنوان را تعریف می کند. <h6> مهمترین عنوان را تعریف می کند:

 <h1>This is heading 1</h1>
<h2>This is heading 2</h2>
<h3>This is heading 3</h3> 

پاراگراف HTML

پاراگراف HTML با برچسب <p> تعریف شده است:

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

پیوندهای HTML

پیوند یا لینک دادن در HTML با برچسب <a> تعریف می شوند:

 <a href="https://eliagroup.ir/">This is a link</a> 

مقصد لینک در ویژگی href مشخص شده است و اگر روی عبارت This is a link کلیک شود سایت گروه ایلیا باز خواهد شد.

از ویژگی ها (attributes) برای ارائه اطلاعات اضافی در مورد عناصر HTML استفاده می شود.

در مقالات بعدی اطلاعات بیشتری در مورد ویژگیها کسب خواهید کرد.

تصاویر HTML

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

پرونده منبع (src) ، متن جایگزین (alt) ، عرض و ارتفاع به عنوان ویژگی ها ارائه می شوند:

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

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

آیا تا به حال یک صفحه وب دیده اید و این سوال پرسیده اید؟ کاش کد این صفحه را می دانستم!
آموزش مشاهده سورس کد HTML:

بر روی صفحه HTML کلیک راست کرده و "View page source" (در Chrome) یا مشابه در سایر مرورگرها را انتخاب کنید. با این کار یک پنجره حاوی کد منبع HTML صفحه باز می شود.

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

مطالب تصادفی

سید خلیل حسینی

کارشناس کامپیوتر، علاقه مند و فعال در حوزه برنامه نویسی و طراحی سایت
برنامه نویس بک اند پی اچ پی و لاراول 
برنامه نویس فرانت اند
پلاگین نویس و طراح صفحات وردپرس

blog-author-image