پایه ها (Basic)
اینجا چند نمونه «HTML پایه» می بینیم. نترس اگر برخی تگ ها تازه اند. کم کم می شناسیم شان و با مثال جلو می رویم.
اسناد HTML (HTML Documents)
هر سند با اعلان نوع شروع می شود. سپس با تگ html آغاز و پایان می یابد. بخش قابل دیدن بین body و /body است.
<!DOCTYPE html>
<html>
<body>
<h1>My First Heading</h1>
<p>My first paragraph.</p>
</body>
</html>
اعلان <!DOCTYPE>
اعلان «!DOCTYPE» نوع سند را مشخص می کند. مرورگر با آن درست نمایش می دهد. فقط یک بار و بالای صفحه می آید. حروفش حساس نیست.
<!DOCTYPE html>
تیترها (HTML Headings)
تیترها با h1 تا h6 هستند. h1 مهم ترین است. h6 کم اهمیت تر است.
<h1>This is heading 1</h1>
<h2>This is heading 2</h2>
<h3>This is heading 3</h3>
پاراگراف ها (HTML Paragraphs)
پاراگراف با تگ «p» نوشته می شود. هر پاراگراف متن خودش را دارد.
<p>This is a paragraph.</p>
<p>This is another paragraph.</p>
لینک ها (HTML Links)
لینک با «a» ساخته می شود. «ویژگی (Attribute)» اطلاعات اضافی می دهد. «href» مقصد لینک است.
<a href="https://www.w3schools.com">This is a link</a>
تصاویر (HTML Images)
تصویر با «img» می آید. «src» مسیر فایل است. «alt» متن جایگزین است. «width» و «height» اندازه ها هستند.
<img src="w3schools.jpg" alt="W3Schools.com" width="104" height="142">
دیدن سورس HTML
کلید CTRL + U را بزن. یا راست کلیک کن و View Page Source را انتخاب کن.
برای بررسی دقیق، راست کلیک کن و Inspect را بزن. سپس ساختار HTML و CSS را می بینی.
ادامه مسیر
برای تمرین بیشتر به ویرایشگرها سر بزن. سپس بخش المان ها را بخوان. اگر لازم شد، به HTML پایه برگرد و مرور کن.
جمع بندی سریع HTML پایه
- سند با !DOCTYPE و html شروع می شود.
- بخش دیدنی داخل body قرار می گیرد.
- تیترها h1 تا h6 هستند.
- لینک با a و href ساخته می شود.
- تصویر با img و alt قابل دسترس می شود.