بنام خدا

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

سرفصل (Heading)

برای مشخص کردن سرفصل یک سطر یا نوشته از تگ <h1> تا <h6> استفاده می شود که از بزرگترین اندازه ۱ تا کوچکترین اندازه ۶ متغیر است.

نکته! با کلیک روی دکمه «تمرین کنید» در پایین می توانید به صفحه تمرین بروید و خودتان امتحان کنید.
 <!DOCTYPE html>
<html>
<head>
<title>عنوان صفحه</title>
</head>
<body>

<h1>بزرگترین سرفصل</h1>

<h2>سرفصل</h2>

<h3>سرفصل</h3>

<h4>سرفصل</h4>

<h5>سرفصل</h5>

<h6>کوچکترین سرفصل</h6>

</body>
</html> 

 

سطر (Paragraph)

یک سطر یا پاراگراف با حرف p که اول کلمه paragraph است به صورت <p> تعریف می شود و با <p/> بسته می شود.

 <!DOCTYPE html>
<html>
<head>
<title>عنوان صفحه</title>
</head>
<body>

 <p>این یک سطر یا پاراگراف است.</p>
<p>این سطر دیگر است.</p> 

</body>
</html> 

 

پیوند (Link)

یک پیوند یا لینک با حرف a که اول کلمه anchor است به صورت <a> تعریف می شود و با <a/> بسته می شود.

نکات!
– در ویژگی href آدرس مورد نظر قرار می گیرد که می تواند آدرس یک سایت، تصویر، فایل صوتی و غیره باشد.
ویژگی ها (attributes) اطلاعات اضافی راجع به عنصر HTML می دهند.
 <!DOCTYPE html>
<html>
<head>
<title>عنوان صفحه</title>
</head>
<body>

<a href="http://www.babaabdad.ir">این یک لینک به سایت بابا آب داد هستش.</a> 
 <a href="http://babaabdad.ir/?page_id=3580">این یک لینک دیگه به محصولات آموزشی بابا آب داد</a>

</body>
</html> 

 

تصویر (image)

یک تصویر با کلمه img به صورت <img> تعریف می شود و چون به آدرس یک تصویر پیوند می دهند تگ بسته ندارند.

نکات!
– عنصر تصویر ویژگی های src برای آدرس تصویر، alt برای متن جایگزین تصویر در صورت بارگذاری نشدن، و width و height اندازه مشخص شده تصویر را دارا می باشد.
– عنصر تصویر تگ بسته ندارد و به خودی خود بسته است. با تگ های بسته بعدا بیشتر آشنا می شویم.
 <!DOCTYPE html>
<html>
<head>
<title>عنوان صفحه</title>
</head>
<body>

<img src="apple.png" alt="تصویر سیب" width="128" height="128">

</body>
</html> 

 

دکمه (Button)

یک دکمه با کلمه button به صورت <button> تعریف می شود و با <button/> بسته می شود.

نکته!
– با کاربرد دکمه و ویژگی های آن بعدا بیشتر آشنا می شوید.
 <!DOCTYPE html>
<html>
<head>
<title>عنوان صفحه</title>
</head>
<body>

<button>کلیک کن</button>

</body>
</html> 

 

فهرست (List)

فهرست یا لیست به دو صورت فهرست مرتب (Ordered List) و نامرتب (Unordered List) مشخص می شوند. فهرست مرتب به صورت <ol> و نامرتب یه صورت <ul> مشخص می شوند و عناصر داخلی لیست با li مخفف list مرتب می شوند.

نکات!
– فهرست مرتب با اعداد، حروف الفبای انگلیسی بزرگ یا کوچک و حروف الفبای رومی بزرگ یا کوچک مشخص می شود.
– فهرست نامرتب به صورت نقطه، مربع و غیره نمایش داده می شود.
– در دروس آینده بیشتر در مورد لیست و ویژگی های آن آشنا خواهیم شد.
 <!DOCTYPE html>
<html>
<head>
<title>عنوان صفحه</title>
</head>
<body>

<p>این یک لیست بدون ترتیب عددی از میوه ها است.</p>
    
    <h3>میوه ها</h3>

    <ul>
  <li>سیب</li>
  <li>انار</li>
  <li>هلو</li>
   </ul>

<p>این یک لیست با ترتیب عددی از گل ها است.</p>

   <h3>گل ها</h3>

    <ol>
  <li>شقایق</li>
  <li>لاله</li>
  <li>بنفشه</li>
   </ol>

</body>
</html> 

 

آخرین محصولات

دوره مکالمه انگلیسی

دوره واژگان کاربردی

اینفوگرافی

دستور انگلیسی

آیا می دانید؟

لغات 504

مکالمات انگلیسی

اصطلاحات انگلیسی





عضویت در خبرنامه

با عضویت در خبرنامه، از آخرین آموزش ها، محصولات و تخفیف های بابا آب داد مطلع شوید.

یا برای اطلاع می توانید در هر یک از کانال های زیر در تلگرام، گپ و ایتا به آی دی babaabdadchannel@ عضو شوید:

گپ تلگرام ایتا

آموزش HTML ؛ درس دوم: سرفصل، سطر، لینک، تصویر، دکمه و فهرست

پاسخ دهید

نشانی ایمیل شما منتشر نخواهد شد. بخش‌های موردنیاز علامت‌گذاری شده‌اند *