درس سوم-طراحی وب
یک فایل متن معمولی (index.txt) بسازید و در آن مطلبی بنویسید. سپس آن را ذخیره کنید و با مرورگر وب باز کنید. میبینید مرورگر وب آن را نمایش می دهد!
پسوند فایل مذکور را به .html تغییر دهید. میبینید به راحتی توسط مرورگز باز میشود و دیده میشود.
این متن ساده هیچ تگ و دستور html ندارد
Tag HTML
این یک صفحه خالی از دستورات HTML بود. برای طراحی وب باید از دستورات اچ تی ام ال استفاده کنید. به دستورات اصلی HTML تگ tag میگویند.
<b> <img /> </b>
تگهای فوق برخی تگهای HTML هستند.
بیشتر تگها جفتی هستند و باید بسته شوند مثل تگ زیر
<p>محتوا</p> <div>محتوا</div> <b>محتوا</b> <img src="data:image/gif;base64,R0lGODlhAQABAIAAAAAAAP///yH5BAEAAAAALAAAAAABAAEAAAIBRAA7" data-wp-preserve="%3Cscript%3E%DA%A9%D8%AF%3C%2Fscript%3E" data-mce-resize="false" data-mce-placeholder="1" class="mce-object" width="20" height="20" alt="<script>" title="<script>" />
برخی از تگها تکی هستند و بسته نمیشوند.
<img src="aks.png"> عکس <br> رفتن به خط بعد (شکستن خط) <hr> کشیدن یک خط <link href="style.css"> اتصال فایل استایل به فایل اچ تی ام ال <meta charset="utf-8">
Attribiute یا صفات
در کد هایلایت شده زیر img تگ و src و title صفات یا attribute های تگ هستند. هر تگ تعدادی صفات اتریبیوت قابل استفاده دارد که به فراخور طرحی که باید اجرا شود از آن استفاده خواهد شد.
<img title="این یک عکس است" src="./images/aks.jpg" />
عنصر یا المنت Element
به یک تگ و محتویات و صفاتش مجموعا یک المنت یا یک عنصر گفته میشود. در زیر در هر خط یک المنت نشان داده شده:
<h1>My First Heading</h1> <p>My first paragraph.</p>
عنصرها میتوانند تو در تو باشند یعنی یک عنصر درون عنصر دیگر باشد. مثل مثال زیر:
<div> <p>مطلب<a href="next.html">لینک</a>مطب</p> </div>
به المنتی مثل
<br>
عنصر خالی میگویند.