htmlطراحی سایت

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

webآگوست 12, 2021
۰

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%

LinkedIn Facebook Twitter
0%

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

webآگوست 12, 2021
۰
تصویر web

web

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

جلسه ۵۳: gradient ها تصاویر پس زمینه هستند! در CSS

آگوست 19, 2021

جلسه ۳۳: مدل جعبه در CSS

آگوست 16, 2021

جلسه ۴۵: Serif و Sans-Serif در CSS

آگوست 17, 2021

جلسه ۵۶: خصوصیات کانتینر Flex در CSS

آگوست 19, 2021

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

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

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