جستجو برای:
  • خانه
  • طراحی سایت
  • خدمات ما
    • سامانه یادگیری الکترونیکی – سایا (LMS)
    • سامانه الکترونیکی مدیریت آموزش (ساما) (EMS)
    • پشتیبانی نرم افزار
    • پشتیبانی سخت افزار
    • پشتیبانی شبکه
    • پشتیبانی ماشین های اداری
  • نمونه کارها
  • قالب و افزونه
  • دسته بندی مطالب
    • آموزش مجازی
    • اخبار سینما
    • افزونه وردپرس
    • آموزش افزونه وردپرس
    • بازی
    • دوره های رایگان
    • سریال
    • فناوری
    • فیلم
      • اکشن
      • تاریخی
      • ترسناک
      • کمدی
      • هیجان انگیز
      • ورزشی
    • قالب وردپرس
      • قالب خبری و وبلاگ
      • قالب شرکتی
      • قالب نمونه کار
      • قالب های چند منظوره
    • مقالات
      • بازایابی دیجیتال
      • برنامه نویسی
      • تولید و بازاریابی محتوا
      • طراحی و گرافیک
  • تماس با ما
  • DMCA
  • پشتیبان سایت
 
  • 02144824488
  • info@myhamyar.com
  • بلاگ
  • تماس با ما
  • درباره ما
همیارِمَن  | آموزش برنامه نویسی و طراحی سایت | طراحی گرافیک
دسترسی سریع
  • پشتیبان سایت
0

ورود و ثبت نام

  • خانه
  • طراحی سایت
  • خدمات ما
    • سامانه یادگیری الکترونیکی – سایا (LMS)
    • سامانه الکترونیکی مدیریت آموزش (ساما) (EMS)
    • پشتیبانی نرم افزار
    • پشتیبانی سخت افزار
    • پشتیبانی شبکه
    • پشتیبانی ماشین های اداری
  • نمونه کارها
  • قالب و افزونه
  • دسته بندی مطالب
    • آموزش مجازی
    • اخبار سینما
    • افزونه وردپرس
    • آموزش افزونه وردپرس
    • بازی
    • دوره های رایگان
    • سریال
    • فناوری
    • فیلم
      • اکشن
      • تاریخی
      • ترسناک
      • کمدی
      • هیجان انگیز
      • ورزشی
    • قالب وردپرس
      • قالب خبری و وبلاگ
      • قالب شرکتی
      • قالب نمونه کار
      • قالب های چند منظوره
    • مقالات
      • بازایابی دیجیتال
      • برنامه نویسی
      • تولید و بازاریابی محتوا
      • طراحی و گرافیک
  • تماس با ما
  • DMCA
  • پشتیبان سایت

بلاگ

همیارِمَن | آموزش برنامه نویسی و طراحی سایت | طراحی گرافیکبلاگدوره های رایگانآموزش رایگان HTML مقدماتی تا پیشرفته بخش دوم

آموزش رایگان HTML مقدماتی تا پیشرفته بخش دوم

16 شهریور 1400
ارسال شده توسط همیار من
دوره های رایگان
364 بازدید

HTML چیست؟ تاریخچه مختصر، نسخه ها و ویژگی های مهم آن را با هم بررسی می کنیم.

فهرست عناوین

    • HTML چیست؟ تاریخچه مختصر، نسخه ها و ویژگی های مهم آن را با هم بررسی می کنیم.
    • یک مثال ساده از HTML :
  • توضیحات مثال
    • HTML5 چیست؟
      • HTML5 چگونه بنظر می رسد؟
  • تاریخچه مختصر از HTML
    • برای یادگیری تمامی محبث های این دوره میتوانید اینجا کلیک کنید.
  • نسخه های HTML
    • ویژگی های HTML

HTML مخفف عبارت Hyper Text Markup Language است که برای ایجاد صفحات و برنامه های وب استفاده می شود. منظور از Hypertext Markup Language و صفحه وب چیست؟

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

Markup language: زبان نشانه گذاری یک زبان کامپیوتری است که برای اعمال قواعد طرح بندی و قالببندی به یک سند متنی استفاده می شود. زبان نشانه گذاری متن را پویاتر و تعاملی تر می کند. این زبان می تواند متن را به تصاویر، جداول، لینکها و … تبدیل کند.

صفحه وب: صفحه وب سندی است که معمولاً بهHTML نوشته شده است و توسط مرورگر وب ترجمه می شود. یک صفحه وب می تواند با وارد کردن یک URL شناسایی شود. صفحه وب می تواند از نوع ایستا یا پویا باشد. با HTML تنها می توانیم صفحات وب ایستا ایجاد کنیم.

بنابراین HTML یک زبان نشانه گذاری است که به همراه سبک بندی برای ایجاد صفحات جذاب وب استفاده می شود تا در مرورگر وب در قالبی زیبا به نظر برسند. یک سند HTML از تگ های HTML بسیاری ساخته شده است و هر تگ HTML محتوای متفاوتی دارد.
تگ های HTML به چه شکل می باشند؟

همیارمن

همانطور که در مثال تگ HTML در تصویر بالا مشاهده می شود ، اجزای زیادی وجود ندارد. بطور کلی در این جا دو نوع تگ داریم : ۱- تگ های باز/شروع کننده (Opening Tag) و ۲- تگ های بسته/انتهای تگ (Closing Tag).

تگ های باز HTML شامل تگ نام (name) و تگ  ویژگی (attribute) می باشد که همگی آنها مثل تگ هدینگ شامل یک هشتک باز (>) ، اسم تگ و یک هشتک بسته (<) هستند.

تگ های بسته شامل forward slash و تگ name بسته هستند. همانطور که در شکل مشاهده می کنید ، تگ های بسته شامل یک هشتک یا زاویه باز (>) ، یک علامت اسلش (forward slash) ، اسم تگ و یک هشتک یا زاویه بسته (<) هستند. برای تگ هایی مانند <img> که تگ های بسته هستند ، بهتر است آن را با یک forward slash به پایان برسانید.

پس همانطور که گفته شد هر تگ بین یک هشتک یا زاویه باز (>) و یک هشتک یا زاویه بسته (<) قرار دارد و همه چیز بین تگ باز و بسته نمایش داده می شود. در مثال بالا ، تگ <a> لینکی به نام “همیارمن” ایجاد می کند که به فایل hope.html اشاره می کند.

یک مثال ساده از HTML :

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
    <!DOCTYPE>
 
    <html>
 
    <head>
 
    <title>Web page title</title>
 
    </head>
 
    <body>
 
    <h1>Write Your First Heading</h1>
 
    <p>myhamyar.com</p>
 
    </body>
 
    </html>

توضیحات مثال

< DOCTYPE!>: این قسمت نوع سند را مشخص می کند یا به مرورگر درباره نسخه HTML اطلاع می دهد.

<html>: این تگ به مرورگر اطلاع می دهد که این یک سند HTML است. متن بین تگ html سند وب را توصیف می دهد. این تگ یک نگهدارنده برای سایر عناصر HTML به جز <DOCTYPE! > است.

<head>: این تگ باید اولین عنصر درون تگ <html> باشد که شامل داده های اضافی (اطلاعات مربوط به سند) است. تگ <head> باید قبل از باز شدن تگ <body> بسته شود.

<title>: همانطور که از نام آن پیدا است، برای اضافه کردن عنوان به صفحه HTML استفاده می شود که در بالای پنجره مرورگر نمایش داده می شود. باید داخل تگ <head> قرار گیرد و بلافاصله بسته شود. (این تگ اختیاری است.)

<body>: متن بین تگ <body> محتوای صفحه را توصیف می کند که برای کاربر قابل مشاهده است. این تگ شامل محتوای اصلی سند HTML است.

<h1>: متن بین تگ <1h> سرتیتر سطح اول از صفحه وب را نشان می دهد.

<p>: متن بین تگ <p> یک پاراگراف از صفحه وب را توصیف می کند.

HTML5 چیست؟

HTML5 نسخه ی روزرسانی شده HTML از  HTML4 است (XHTML از یک ورژن شماره گذاری متفاوت پیروی می کند). HTML5 نیز از همان قوانین اساسی HTML4 پیروی می کند ، اما برخی تگ ها و ویژگی های جدیدی اضافه می کند که معنایی بهتر و عناصر پویا را با استفاده از JavaScript فعال می کند. عناصر جدید عبارتند از: <article> ، <aside> ، <audio> ، <bdi>، <canvas>، <datalist>، <details>، <embed>، <figure>، <figcaption>، <Footer>، <header > ، <keygen> ، <mark>، <meter>، <nav>، <output>، <progress>، <rp>، <rt>، <ruby>، <time>، <track>، <video> و <wbr>. همچنین انواع ورودی جدیدی برای فرم ها وجود دارد که شامل تلفن ، جستجو ، آدرس اینترنتی یا url ، ایمیل ، تاریخ ، ماه ، هفته ، زمان ، زمان محلی ، تعداد ، محدوده و رنگ می باشد.

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

<acronym>, <applet>, <basefont>, <big>, <center>, <dir>, <font>, <frame>, <frameset>, <noframes>, <strike>, and <tt>

اهداف اصلی Html5 پشتیبانی از  جدیدترین فناوری‌های چند رسانه‌ای است بطوری که خواندن آن را تسهیل نماید و به طور مداوم نیز توسط رایانه‌ها، مرورگرهای وب، تجزیه کننده‌ها و … قابل فهم باشد.

HTML5 چگونه بنظر می رسد؟

همانطور که در زیر مشاهده می کنید ، HTML5 هم بسیار شبیه به مثال HTML4 قبلی است ، اما جمع و جورتر است و تگ doctype هم اصلاح شده است.

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
    <!doctype html>
 
    <html>
 
     <head>
 
      <meta charset=”utf-8″>
 
      <title>Example page</title>
 
     </head>
 
     <body>
 
      <h1>This is a heading</h1>
 
      <p>This is an example of a basic HTML page-myhamyar.com</p>
 
     </body>
 
    </html>

تاریخچه مختصر از HTML

در اواخر دهه ۱۹۸۰ یک فیزیکدان به نام تیم برنرز لی که پیمانکار CERN (سازمان تحقیقات هسته‌ای اروپا ) بود، سیستمی را برای محققان CERN پیشنهاد داد. در سال ۱۹۸۹، او یادداشتی برای ارائه اینترنت مبتنی بر سیستم ابرمتن نوشت.

تیم برنرز لی به عنوان پدر HTML شناخته شده است. اولین توصیف در دسترس از HTML سندی بود به نام “HTML Tags” که توسط تیم در اواخر سال ۱۹۹۱پیشنهاد شد. آخرین نسخه HTML ، HTML5 است که در ادامه در این آموزش یاد خواهیم گرفت.

برای یادگیری تمامی محبث های این دوره میتوانید اینجا کلیک کنید.

نسخه های HTML

از زمان اختراع HTML نسخه های HTML زیادی در بازار وجود دارد. معرفی کوتاهی از نسخه های HTML در زیر آمده است:

۱٫۰ HTML: اولین نسخه HTML نسخه ۱٫۰ که استخوان بندی زبان HTML بود، در سال ۱۹۹۱منتشر شد.

۲٫۰ HTML: نسخه بعدی در سال ۱۹۹۵ منتشر شد و به عنوان نسخه زبان استاندارد برای طراحی وب سایت استفاده شد. ۲٫۰HTML قادر به پشتیبانی ویژگی های اضافی مانند آپلود فایل مبتنی بر فرم، عناصر فرم مانند جعبه متن، دکمه و … بود.

۳٫۲ HTML: نسخه ۳٫۲HTML توسط W3C در اوایل ۱۹۹۷ منتشر شد. این نسخه قادر به ایجاد جداول و پشتیبانی از گزینه های اضافی برای عنصر فرم بود. همچنین از یک صفحه وب با معادلات پیچیده ریاضی پشتیبانی می کند. این نسخه یک استاندارد رسمی برای هر مرورگر تا ژانویه ۱۹۹۷ شد. امروزه تقریبا توسط بسیاری از مرورگرها پشتیبانی می شود.

۴٫۰۱ HTML: نسخه ۴٫۰۱HTML در دسامبر ۱۹۹۹ منتشر شد و نسخه بسیار پایدار زبان HTML است. این نسخه استاندارد رسمی فعلی است و پشتیبانی بیشتری از فایل های CSS و قابلیت اسکریپت برای عناصر مختلف چندرسانه ای ارائه می دهد.

HTML5: جدیدترین نسخه زبان نشانه گذاری ابرمتن است. اولین پیش نویس از این نسخه در ژانویه ۲۰۰۸ منتشر شد. دو سازمان بزرگ، W3C (کنسرسیوم شبکه جهانی وب) و WHATWG (کارگروه فناوری برنامه های ابر متن وب) در توسعه نسخهHTML5 نقش داشته اند و این نسخه همچنان هم در حال توسعه است.

ویژگی های HTML

۱) زبان بسیار ساده و آسانی است و به راحتی قابل درک و اصلاح است.

۲) ساخت یک ارائه تاثیرگذار با HTML بسیار آسان است زیرا تگ های قالب بندی زیادی دارد..

۳) زبان نشانه گذاری است بنابراین روشی انعطاف پذیر برای طراحی صفحات وب به همراه متن ارائه می دهد.

۴) به برنامه نویسان کمک می کند تا به صفحات وب لینک اضافه کنند (توسط تگ انکر) در نتیجه علاقه وبگردی کاربر را افزایش می دهد.

۵) مستقل از پلتفرم است زیرا می تواند در هر پلتفرمی مانند ویندوز، لینکوس و مکینتاش و … نمایش داده شود.

۶) به برنامه نویس کمک می کند تا با اضافه کردن گرافیک ، فیلم و صدا به صفحات وب، آنها را جذابتر و پویاتر کند.

۷) HTML به بزرگی و کوچکی حروف حساس نیست، یعنی محدودیتی برای نوشتن نام تگ ها به صورت حروف کوچک یا بزرگ وجود ندارد.

 

بیشتر بخوانید:

  • چگونه توسعه دهنده وب شویم؟
  • چند پروژه تمرینی HTML و CSS
  • دانلود افزونه فرم ساز گرویتی فرمز| Gravity Forms
  • تکنیک‌های سئو دسته بندی محصولات در فروشگاه اینترنتی
  • آپلود وب‌سایت در سرور | چگونه سایت ساخته شده را به صورت آنلاین مشاهده کنیم؟
  • معرفی زبان PHP و مزیت‌های آن
  • آموزش رایگان HTML مقدماتی تا پیشرفته
  • بهترین افزونه های اسلایدر وردپرس
  • آموزش کامل افزونه ووکامرس و اضافه کردن محصول به WooCommerce
اشتراک گذاری:
برچسب ها: HTMLHTML چیستHTML5 چیستآموزش HTMLآموزش html pdfآموزش html به زبان سادهآموزش html پی دی افآموزش html پیشرفتهآموزش html و cssآموزش html و css پیشرفتهآموزش html5 pdfآموزش رایگان HTMLآموزش رایگان html همیارمنآموزش رایگان html5آموزش رایگان html5 و css3آموزش رایگان html5 و css3 pdfآموزش رایگان زبان htmlآموزش کامل و رایگان htmlآموزش+html+css+javascriptپروژه تمرینی htmlپروژه تمرینی html cssتاریخچه مختصر از HTMLتمرین عملی htmlدانلود فیلم آموزش رایگان htmlدوره رایگان آموزش html و cssفیلم آموزش رایگان html
در تلگرام
کانال ما را دنبال کنید!
در اینستاگرام
ما را دنبال کنید!

مطالب زیر را حتما مطالعه کنید

لوگو ادمین سایت

آموزش انیمیشن‌سازی با CSS

در این قسمت از آموزش انیمشن‌سازی در CSS قصد داریم به طور کلی به آموزش...
همیارمن

نحوه اضافه کردن کد PHP در وردپرس

اگر به دنبال اضافه کردن کد php در وردپرس به صفحات در وردپرس هستید به...

دوره رایگان طراحی فروشگاه اینترنتی!

در حال آپدیت... امروزه شاهد سایت های فروشگاهی بسیاری هستیم. افراد بسیاری وجود دارند که...

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

در این مقاله در همیار من قصد داریم یکی از مطالب بسیار مهم و کاربردی...
ترفندهای عکاسی حرفه‌ای با موبایل (ساده و بدون هزینه!)

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

یکی از وسایلی که امروزه تقریبا با همه ما همراه شده است و ساعت‌ها آن...
لوگو ادمین سایت

DOM چیست و چه کاربردی دارد؟

DOM عبارتی است که بیشتر آنرا در زبان جاوا اسکریپت می‌شنویم. در این مقاله در...

دیدگاهتان را بنویسید لغو پاسخ

جستجو در همیارمَن
جستجو برای:
  • آموزش مجازی
  • اخبار سینما
  • افزونه وردپرس
    • آموزش افزونه وردپرس
  • بازی
  • پیشنهادی
  • دسته‌بندی نشده
  • دوره های رایگان
  • سریال
  • فناوری
  • فیلم
    • اکشن
    • تاریخی
    • ترسناک
    • جنایی
    • کمدی
    • مستند
    • معمایی
    • هیجان انگیز
    • ورزشی
  • قالب HTML
  • قالب وردپرس
    • قالب خبری و وبلاگ
    • قالب شرکتی
    • قالب نمونه کار
    • قالب های چند منظوره
  • مقالات
    • بازایابی دیجیتال
    • برنامه نویسی
    • تولید و بازاریابی محتوا
    • طراحی و گرافیک
آخرین مطالب سایت
  • آموزش انیمیشن‌سازی با CSS
  • بهترین فیلم های اسلشر تاریخ سینما
  • نقد فیلم Cure – یک فیلم هیپنوتیزم کننده
  • نقد فیلم یتیم Orphan: First Kill
  • کسب درآمد از آموزش آنلاین چگونه است؟
برچسب‌ها
CSS HTML آموزش آموزش CSS آموزش css3 آموزش css3 pdf آموزش css3 رایگان آموزش css3 پیشرفته آموزش css pdf آموزش css حرفه ای آموزش css و html آموزش css پروژه محور آموزش css پیشرفته آموزش افزونه وردپرس آموزش تولید محتوا آموزش رایگان html همیارمن آموزش رایگان زبان html آموزش وب سایت افزونه وردپرس بازاریابی بازاریابی دیجیتال بازی بررسی بررسی بازی تولید محتوا دانلود افزونه وردپرس دانلود قالب وردپرس دوره دوره رایگان دیجیتال مارکتینگ سایت فناوری فیلم قالب قالب سایت قالب وب سایت قالب وردپرس نقد نقد بازی نقد فیلم نقد و بررسی نقد و بررسی بازی نقد و بررسی فیلم وردپرس ووکامرس

ورود

رمز عبور را فراموش کرده اید؟

هنوز عضو نشده اید؟ عضویت در سایت