آموزش ساخت سند html و تگ های پر کاربرد

ساخت فایل html

برای ساخت فایل html چندین روش وجود دارد :

روش اول : می توان در صفحه دسکتاپ خود یک فولدر جدید باز کنید و درون آن یک text document جدید بسازید و نام و پسوند آن را به index.html تغییر دهید و پس از آن با استفاده از ویرایشگر دلخواه خود این فولدر را باز کنید.

روش دوم : می توان برای مثال با استفاده از ادیتور Vscode از ساید بار سمت چپ قسمت new file را انتخاب کرده سپس از گزینه file بر روی گزینه save as کلیک کنید و نام و پسوند فولدر را به index.html تغییر دهید.

روش سوم : ابتدا وارد vscode شده سپس با استفاده از کلید میانبر Ctrl + N یک فایل ایجاد کنید پس از آن با استفاده از کلید میانبر Ctrl + S فایل را با نام و پسوند index.html ذخیره کنید.

توجه : برای نام گذاری سند html خود می توانید از هر نامی استفاده کنید ولی بهتر است از نام index استفاده کنید ، همچنین در هنگام نامگذاری سند نباید از space استفاده کرد ولی می توانید از اعداد ، حروف ، خط تیره ، اندرلاین و ... استفاده کنید.

وارد کردن اولین تگ ها در سند html

اولین تگی که شما باید وارد سند خود کنید تگ زیر است :

  <!DOCTYPE html>

پس از آن تگ بعدی را قرار می دهیم :

<html lang="en"> </html>

این تگ نشاندهنده ریشه ما که همان html5 است.

<!DOCTYPE html>
<html lang="en">
  <head> </head>
</html>

تگ بعدی تگ head است که تگ های مانند لینک ها ،اسکریپت ،css، متاتگ ها و ... قرار می گیرند.

  <!DOCTYPE html>
<html lang="en">
  <head> </head>
  <body></body>
</html>

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

  <!DOCTYPE html>
<html lang="en">
  <head>
    <title>نام سند ما در مرورگر</title>
  </head>
  <body></body>
</html>

تگ بعدی تگ title است که نام سند ما در مرورگر را نشان می دهد.

    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">

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

نکته : شما می توانید تمامی این تگ ها را با استفاده از کلید میانبر ! و کلید tab به صورت یک جا وارد سند خود کنید.

شکل کلی این سند ما تا به اینجای آموزش به صورت زیر است :

  <!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
</head>
<body>

</body>
</html>

معرفی تگ های پرکاربرد html

heading

همانطور که از نام این تگ مشخص است از تگ heading یا h در متن برای هدر ، عنوان و تیتر استفاده می شود تگ های هدر از h1 تا h6 هستند که از 1 به سمت 6 فونت سایز آنها کوچکتر می شود.

paragraph

از تگ p یا paragraph برای ایجاد پاراگراف استفاده می شود که می توانیم متن خود را درون آن قرار دهیم.

section

از این تگ برای جدا سازی و به نوعی بخش بندی قسمت های مختلف یک سند html استفاده می شود.

برای مثال :

  <!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>عنوان وب سایت در مرورگر </title>
  </head>
  <body>
    <h1> قرار دادن عنوان مطلب با فونت بزرگ </h1>
    <section>
      <h2> قرار دادن عنوان مطلب با فونت کوچک </h2>
      <p>
     قرار دادن متن شما در تگ p که درون یک تگ section  قرار گرفته است.
      </p>
    </section>
  </body>
</html>

ul و li

یکی از کاربردی ترین تگ های html تگ لیست یا ul است که برای ساخت لیست ها در html مورد ستفاده قرار می گیرد ، به این صورت که ابتدا یک شما یک تگ ul باز می کنید و پس از آن با استفاده از تگ li که درون تگ ul قرار می گیرد می توان به عنوان مثال لیستی از اسامی ایجاد کنید.

برای مثال :

  <!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>عنوان وب سایت در مرورگر </title>
  </head>
  <body>
    <h1> قرار دادن عنوان مطلب با فونت بزرگ </h1>
    <section>
      <h2> قرار دادن عنوان مطلب با فونت کوچک </h2>
      <p>
     قرار دادن متن شما در تگ p که درون یک تگ section  قرار گرفته است.
      </p>
    </section>
    <section>
      <h2>عنوان لیست برای مثال نام زبان های برنامه نویسی</h2>
      <ul>
        <li>پایتون</li>
        <li>جاوا</li>
        <li>جاوااسکریپت</li>
        <li>php</li>
      </ul>
    </section>
  </body>
</html>

فرمت های مختلف یک متن

small : با به کاربردن این تگ درون متن خود می توانیم آن قسمت از متن مورد استفاده را کوچکتر از حالت عادی به نمایش گذاشت.

b : با استفاده از این تگ میتوانیم متن خود را بولد کنیم.

strong : با استفاده از این متن می توانیم متن خود را با فونت برگتری به نمایش گذاشت.

قرار دادن تصویر در قالب html

برای این کار شما می توانید از تگ img استفاده کرده و با استفاده از آن تصویر دلخواه خود را در سند html خود قرار دهید.

برای مثال :

  <img
    src="آدرس تصویر خود را قرار دهید.
    alt="در این قسمت میتوانید نام تصویر خود را بنویسید تا در صورتی که تصویر باز نشد نام آن مشخص شود."
  />

نحوه ساخت لینک در html

با استفاده از تگ a می توانیم در قالب خود لینک قرار دهیم.

برای مثال :

  <a href="https://www.topdemy.ir/">وب سایت آموزشی تاپ دمی</a>.

آموزش ساخت سند html و تگ های پر کاربرد

ساخت فایل html

وارد کردن اولین تگ ها در سند html

معرفی تگ های پرکاربرد html

قرار دادن تصویر در قالب html

نحوه ساخت لینک در html

مقالات مشابه

پر کاربرد ترین تگ های html

ساخت فروشگاه اینترنتی با html ، css و bootstrap - بخش دوم

ساخت فروشگاه اینترنتی با html ، css و bootstrap - بخش اول