مقدمه ای از HTML

دسته بندی : آموزش HTML سطح مقاله : مقدماتی زمان مطالعه : 3 دقیقه 02 آبان 1399
مقدمه-ای-از-HTML

HTML یک زبان نشانه گذاری است که شروعی برای طراحی هر وب سایت در اینترنت است ، تمام وب سایت های موجود در سطح وب برای نمایش اطلاعات خود از زبان نشانه گذاری html استفاده می کنند. HTML5 آخرین نسخه HTML است ، که در سال 2014 نهایی شد. مقدمه ای از HTML را برای شما آماده کردیم تا به بهترین شکل بتوانید ارتباط خود را با HTML برقرار کنید.

HTML چیست: یک توضیح ساده

برای ایجاد وب سایت های مفید و عملکرد خوب ، به CSS و JavaScript نیاز دارید. با این حال ، برای اینکه آنها مطابق با هدف کار کنند ، ابتدا باید بفهمید HTML چیست. درست مانند خانه ای که پایه و اساس دارد ، یک صفحه وب نیز دارای HTML است.

جواب اینکه HTML به چه معنی است ساده است: HyperText Markup Language. این سیستمی است که به شما امکان می دهد ساختار مطالب را در صفحه وب خود با استفاده از عناصر پیچیده شده در تگ های پشتیبانی شده جهانی تعریف کنید.

HTML یک زبان نشانه گذاری است نه زبان برنامه نویسی !!!!

این نکته را همیشه به یاد داشته باشید.

مقدمه ای از HTML را دنبال کنید.

تاریخچه HTML : نسخه های مختلف

HTML1 توسط دانشمند ، تیم برنرز لی ایجاد شده است.

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

HTML1 در سال 1991 معرفی شد ، فقط 18 برچسب داشت که بیشتر آنها بر اساس زبان نشانه گذاری تعمیم یافته استاندارد (SGML) است.

HTML2 در سال 1995 ارائه شد و چند ویژگی دیگر داشت.

پیش نویس HTML3 به دلیل اجرای کند برچسب های تازه ایجاد شده کنار گذاشته شد. بنابراین ، کنسرسیوم شبکه جهانی وب اقدام به استاندارد سازی HTML کرد.

در سال 1997 ، HTML3.2 منتشر شد که در آن زمان به یک استاندارد تبدیل شد.

HTML4 یک مرحله بزرگ بود ، زیرا سبک سازی را از برنامه نویسی جدا می کند و نسخه اول را به CSS می سپارد.

نسخه اصلاح شده ای به نام HTML4.01 در سال 1999 منتشر شد و اشتباهات جزئی موجود در HTML4.0 را اصلاح و چند ویژگی مفید ارائه داد.

HTML 5 همان HTML است که امروزه آن را می شناسیم.

توجه : ممکن است عباراتی مانند تفاوت بین HTML و HTML5 یا HTML در مقابل HTML5 وجود داشته باشد.

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

HTML5 چیست؟

HTML5 برای اولین بار در سال 2008 منتشر شد ، اگرچه مراحل مشخصات آن تا سال 2014 کامل نبود. از هم اکنون ، این زبان نشانه گذاری پایه و اساس هر وب سایت جدید است.

html5-چیست

هنگام مقایسه HTML و HTML5 ، اولین تفاوت عمده در سطح پشتیبانی است. وب سایت های ایجاد شده با HTML5 در همه مرورگرهای اصلی و سیستم عامل های مختلف نیز قابل استفاده هستند.

این امر در قرن 21 حیاتی است که اکثر کاربران از طریق دستگاه های تلفن همراه به وب دسترسی پیدا می کنند.

نسخه ارائه شده در HTML5 کمک زیادی به بهینه سازی موتور جستجو (SEO) می کند.

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

همچنین قابلیت دسترسی در دستگاه های تلفن همراه را بهبود می بخشد و کار فناوری های کمکی (به عنوان مثال ، صفحه خوان ها) را ساده می کند.

HTML5 همچنین در صورت نیاز به ایجاد محتوای پویا و جذاب بسیار مفید است ، زیرا به شما امکان می دهد بدون اتکا به Adobe Flash ویدئو و صدا را نیز در آن قرار دهید.

یک سند اساسی HTML

مبتدیان ممکن است فکر کنند: آیا HTML یک زبان برنامه نویسی است؟

در واقع اینگونه نیست به یاد داشته باشید ، HTML مخفف زبان markup language است. بنابراین ، کار با HTML کدگذاری است ، نه برنامه نویسی!!

ساده ترین سند HTML از چند خط کد تشکیل شده است:

<!DOCTYPE html>
<html>
<head>
 <title>عنوان صفحه شما</title>
</head>
<body>
 <h1>تیتر اصلی محتوا</h1>
 <p>متن های شما</p>
</body>
</html>

بیایید آنچه را که در بخشهای بعدی مقدمه ای از HTML دارد ، مرور کنیم.

تگ ویژه <! DOCTYPE>

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

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

<!DOCTYPE html>

<!DOCTYPE HTML>

<!doctype html>

<!Doctype Html>

بدنه اصلی HTML

از عنصر <html> برای تعریف یک سند HTML استفاده می شود تا مرورگرهای وب بتوانند آن را شناسایی و نمایش دهند.

<!DOCTYPE html>
<html>

<head>
  <title>عنوان صفحه</title>
</head>

<body>
  <h1>تیتر اصلی </h1>
  <p>متن ها</p>
</body>

</html>

تگ <head>

 شامل کلیه اطلاعات مربوط به سند HTML است. می توانید عنوانی برای وب سایت ، برخی از اطلاعات مربوط به متا ، سبک ها و موارد دیگر اضافه کنید.

<head>
  <title>عنوان صفحه</title>
</head>

تگ عنوان <title>

عنوان سندی را توصیف می کند که خوانندگان را از محتوای یک وب سایت مطلع می کند.

<title>عنوان صفحه</title>

تگ بدنه <body>

محتوا را در وب سایت ها قابل مشاهده می کند، بدون آن وب سایت شما عملکردی نخواهد داشت. هر عنصری که باید در یک وب سایت نشان داده شود متعلق به این بخش است.

<body>
  <h1>تیتراصلی</h1>
  <p>متن ها</p>
</body>

عناصر <h1> - <h6> عناوین را مشخص می کنند. در صفحه  مشابه عنوان است اما از آنجا که بخش‌هایی از سند را نام می برد نه کل وب سایت از اهمیت کمتری برخوردار است. از آن‌ها برای اشاره به عناوین و نام های محتوایی استفاده کنید.

<h1>Heading text - Level 1. Most Important Heading</h1>
<h2>Heading text - Level 2</h2>
<h3>Heading text - Level 3</h3>
<h4>Heading text - Level 4</h4>
<h5>Heading text - Level 5</h5>
<h6>Heading text - Level 6. Least Important Heading</h6>

تگ <p>

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

<p>This is a paragraph.</p>

<p>This is also a paragraph.</p>

<p>This is yet another paragraph.</p>

تگ <div>

 به عنوان تقسیم شناخته می شود. این یک عنصر سطح بلوک است که برای تقسیم صفحه به بخشهای کاربر پسندتر اعمال می شود.

<div style="background-color: #333; color: white; padding: 10px;">
  <h3>This header has same color as a div</h3>
  <p>This paragraph should have same color as div</p>
</div>

استفاده از تگ ها در HTML

برای درک اینکه HTML5 چیست ، باید با tags آشنا باشید. آنها عناصر HTML را محصور می کنند تا جلوه ها و تغییرات مختلف را ارائه دهند.

تگ ها معمولاً دو به دو می آیند و با علامت های بزرگتر و کوچکتر احاطه می شوند (<و>). اولین تگ جفت ، تگ باز است و تگ دوم ، تگ بسته است. تگ بسته همیشه پس از علامت بزرگتر یک اسلشبه همراه دارد (</).

شما همچنین می توانید یک عنصر را درون یک عنصر دیگر قرار دهید تا صفحه وب شما زیبا و کاربردی شود. به این کار nesting و یا تگ های تو در تو می گویند.

استفاده از ویژگی ها برای عناصر HTML

برچسب باز شده یک عنصر می تواند ویژگی هایی داشته باشد که بر نحوه به نظر رسیدن محتوا تأثیر می گذارد.

<tag attribute = "value"> محتوا </ tag>

می توانید از این ویژگی ها برای :

  • قالب بندی اساسی
  • ارائه اطلاعات اضافی درباره برچسب (به عنوان مثال ، یک تصویر)

استفاده کنید .

رایج ترین ویژگی ها

وقتی یک عنصر اصلی نمایش داده نشود ، متن جایگزین تعریف شده با مشخصه alt نشان داده می شود:

<img src="image.png" alt="Space Doggo" width="50" height="50">

class : برای یک عنصر یک نام کلاس تعیین می کند. یک کلاس با تغییر رنگ ، اندازه و غیره با CSS ، شکل ظاهری را تغییر می دهد.

<p class="paragraph1">This is paragraph text.</p>

height و width ابعاد عنصر HTML را بر اساس پیکسل تعریف می کند.

<img src="image.png" alt="JumpyDoggy" width="104" height="142">

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

<a href="https://devix.ir">آموزش طراحی سایت</a>

id یک شناسه منحصر به فرد برای عنصر ایجاد می کند که بعداً می تواند برای تغییر سبک عنصر مورد استفاده قرار گیرد.

<div id="id_name">This is some content inside a div.</div>

name نام عنصری را تنظیم می کند که بعداً می تواند برای ارجاع این عنصر در JavaScript استفاده شود.

<button name="submit">Submit button</button>

src URL منبع را برای اسناد تعریف می کند. این ویژگی بیشتر برای افزودن فایل های ویدئویی ، صوتی و تصویری استفاده می شود.

<img src="image.png" alt="Space Doggo" width="50" height="50">

style یک فرم داخلی CSS را برای یک عنصر (رنگ ، اندازه ، قلم و سایر دکوراسیون ها) تعریف می کند.

<a href="https://www.bitdegree.org/" style="background-color: lime;">This is a hyperlink!</a>

نکته: برای اعمال سبک ها در کل صفحه یا وب سایت ، از یک ظاهر طراحی داخلی یا خارجی CSS استفاده کنید.

type نوع عنصر را تنظیم می کند. این تفاوت بین دکمه هایی مانند YES و NO ، Next و قبلی و غیره را ایجاد می کند.

<input type="text" name="name" autofocus>

value مقدار یک عنصر را تعریف می کند. مقدار متن سفارش داده شده را تعیین می کند یا مقدار اولیه یک عنصر خاص را تعریف می کند.

<input type="text" value="user value">

نکات مفید HTML چیست؟

  • برای نوشتن HTML به نرم افزار خاصی نیاز ندارید: هر ویرایشگر متنی این کار را انجام می دهد. با این حال ، یک ویرایشگر HTML خوب (مانند Atom یا Notepad ++) می تواند قابلیت های بیشتری را ارائه دهد و به طور کلی برای استفاده راحت تر است.
  • وقتی کد HTML را می نویسید ، همیشه بهتر است آن را با استفاده از اعتبار سنج HTML بررسی کنید. کنسرسیوم شبکه جهانی وب یک کنسرسیوم رایگان ارائه می دهد.
  • برای بهبود تجربه کاربر ، سعی کنید محتوای بالاتر از حد (محتوایی که کاربر بدون نیاز به پیمایش به پایین مشاهده می کند) را از عناصری که بارگیری آنها کمی طول می کشد (به عنوان مثال تصاویر با وضوح بسیار بالا) دور نگه دارید.
  • در صورت تمایل به آزمایش بپردازید ، اما فراموش نکنید که کد استفاده نشده (مانند قالب بندی غیرضروری ، فضای خالی ، فضای گسترده و غیره) را حذف کنید. هرچه کد کوتاه تر باشد ، بارگیری مرورگر راحت تر است.

چه امتیازی به این مقاله می دید؟

5 / 5.00
[ 1 رای ]
مطالب مشابه

Related Posts