بنام خدا

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

سرفصل (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 ؛ درس دوم: سرفصل، سطر، لینک، تصویر، دکمه و فهرست

پاسخ دهید

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