htmlطراحی سایت

جلسه ۵: درباره HTML در طراحی سایت

HTML

در این درس ، اصول HTML را خواهیم آموخت! در پایان این درس ، شما باید قادر به درک و نوشتن HTML پایه باشید. موارد زیر را بیان خواهیم کرد

  • مقدمه
  • ساختار تگ ها
  • ساختار سند HTML
  • تگ های HTML
  • تگ های head و body
  • Doctype
  • کامنت HTML
  • ویژگی های تگ ها
  • تگ های رایج
  • دانش خود را در مورد HTML آزمایش کنید!

مقدمه

HTML (HyperText Markup Language) یک زبان برنامه نویسی نیست. این یک زبان نشانه گذاری است. زبان های برنامه نویسی واقعی توانایی توصیف منطق را دارند. از HTML ، برای نمایش و قالب بندی قسمتهای یک صفحه وب استفاده می شود. این زبان کاملاً ظاهری است.

نحو نوشتن تگ ها

تگ های HTML عناصر اصلی ساخت کلیه صفحات وب هستند. اساساً ، آنها نحوه نمایش اطلاعات و متن را قالب بندی می کنند. آنها محتوا را در دسته هایی قرار می دهند (عناصر نامیده می شوند!) مانند “عنوان” ، “پاراگراف” و “جدول”. یک تگ HTML متشکل از یک نام است که در “براکت های زاویه ای” محصور شده است ، یعنی نماد کمتر و بیشتر. همچنین ، این تگ ها معمولاً به صورت جفت تگ باز و بسته هستند. تگ بسته شدن همان تگ باز شدن است با این تفاوت که تگ بسته شده بعد از علامت کمتر از یک اسلش دارد. نگاهی به مثال زیر بیندازید.

<tagname> content </tagname>

بعضی از تگ ها احتیاجی به بسته شدن ندارند و در واقع تنها تگ بسته شده هستند.مثل:

<selfclosing/> content

ساختار سند HTML

اسناد HTML از ساختار خاصی پیروی می کنند و برای اجرای صحیح به برخی تگ ها نیاز دارند.

تگ <HTML> :

همه موارد موجود در یک سند HTML در تگ های <HTML&gt; محصور شده است.

 

<html>
 <head>
   Content in the head tag.
 </head>
 <body>
   Content in the body tag.
 </body>
</html>

برچسب <head> و <body>

بعلاوه ، اسناد معتبر HTML به تگ <head> و <body> نیز نیاز دارند. همچنین ، تگ های head و body هیچ ارتباطی با محل قرارگیری محتوا در خروجی مرورگر ندارند – از آنها برای تقسیم بندی خود سند استفاده می شود. تگ <head> شامل آیتم هایی مانند عنوان صفحه ، پیوندها به فال های CSS و JS و کلمات کلیدی است که توسط موتورهای جستجو مانند Google استفاده می شود. این آیتم در مرورگر نمایش داده نمی شود. از طرف دیگر ، تگ <body> شامل نشانه گذاری واقعی مانند پاراگراف ها ، تصاویر و جداول است که در مرورگر نمایش داده می شوند.

<html>
 <head>
   Content in the head tag.
 </head>
 <body>
   Content in the body tag.
 </body>
</html>

Doctype

Doctype یک اعلامیه است که به مرورگر اعلام میکند سند HTML است. این باید اولین چیز مطلق در سند باشد.

کامنت HTML

کامنت HTML مانند <! – comment -> می باشد و مرورگر آنها را نادیده می گیرد. شما فقط می توانید آنها را برای خود یا دیگران که ممکن است به سند HTML شما نگاه کنند قرار دهید!

برچسب های رایج

HTML زیر نحوه استفاده از برخی برچسب های رایج را نشان می دهد. به تگ <img> و چگونگی داشتن ویزگی به نام src توجه کنید.

<!DOCTYPE html>
<html>
 <head>
   <!– An HTML Comment! –>
 </head>
 <body>
   <!– Headings –>
   <h1>Heading ۱</h1>
   <h2>Heading ۲</h2>
   <h3>Heading ۳</h3>
   <h4>Heading ۴</h4>
   <!– A paragraph –>
   <p> A paragraph </p>
   <!– A link –>
   <a href=”https://www.educative.io/explore”>  Educative </a>
   <!– An Unordered List –>
   <ul style=”list-style-type:disc”>
     <li>An</li>
     <li>Unordered</li>
     <li>List</li>
   </ul>
   <ol type=”1″>
     <li>An</li>
     <li>Ordered</li>
     <li>List</li>
   </ol>
   <!– A table –>
<table>
  <tr>
    <th>Language</th>
    <th>Application</th>
  </tr>
  <tr>
    <td>JavaScript</td>
    <td>Front End and Back End</td>
  </tr>
  <tr>
    <td>Python</td>
    <td>Back End</td>
  </tr>
  <tr>
    <td>PHP</td>
    <td>Back End</td>
  </tr>
  <tr>
    <td>C#</td>
    <td>Back End</td>
  </tr>
</table>
   <!– An image –>
     <img src=”https://upload.wikimedia.org/wikipedia/commons/thumb/6/61/HTML5_logo_and_wordmark.svg/240px-HTML5_logo_and_wordmark.svg.png”>
 </body>
</html>

آزمون:

0
ایجاد شده در

Quiz 39

1 / 3

از چه تگ می توانید برای ایجاد یک لیست شماره دار در HTML استفاده کنید

2 / 3

آیا کد HTML زیر معتبر است؟

<h1> Welcome to this quiz! </h1><br>

3 / 3

کدام یک از موارد زیر نام بزرگترین تگ عنوان HTML است؟

امتیاز شما

میانگین امتیازها 0%

0%

اکنون که اصول اولیه HTML را بررسی کردیم ، بیایید در درس بعدی به طراحی ظاهر در HTML با CSS بپردازیم!

نوشته های مشابه

دیدگاهتان را بنویسید

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

دکمه بازگشت به بالا