HTML5 و کاربردهای آن

شروع موضوع توسط moeintnt ‏12 آگوست 2018 در 13:01 در انجمن زبان HTML

  1. moeintnt

    moeintnt New Member

    ارسال‌ها:
    22
    تشکر شده:
    1
    امتیاز دستاورد:
    3
    نخستین پرسش؛ HTML چیست؟
    [​IMG]

    HTML یک زبان نشانه گذاری برای توصیف اسناد وب (صفحات وب) است.

    • HTML مخفف عبارت Hyper Text Markup Language به معنای "زبان نشانه گذاری فرا متن" است
    • یک زبان نشانه گذاری از مجموعه ای از برچسب های (تگ) نشانه گذاری (markup tags) تشکیل می شود
    • اسناد HTML توسط تگ های اچ تی ام ال (HTML tags) توصیف می شوند
    • هر تگ HTML محتوای خاصی از سند HTML را توصیف می کند
    مثال

    یک نمونه کوچک از اسناد HTML:

    <!DOCTYPE html>
    <html>
    <head>
    <title>عنوان صفحه در مرورگر</title>
    </head>

    <body>

    <h1>اولین عبارت از نوع عنوان که من نوشتم</h1>

    <p>اولین متن از نوع پاراگراف که من نوشتم.</p>

    </body>

    </html>
    توضیح مثال طرح شده

    • تگ
      DOCTYPE
      نوع سند HTML را تعریف می کند
    • کد های بین تگ باز
      <html>
      و تگ بسته
      </html>
      کار توصیف و چگونگی یک سند HTML را انجام می دهند
    • کدهای بین تگ باز
      <head>
      و تگ بسته
      </head>
      اطلاعاتی درباره سند را ارائه می کنند
    • متن داخل تگ
      <title>
      و
      </title>
      یک عنوان برای سند هنگام باز شدن در مرورگر نمایش می دهد
    • کدهای داخل تگ
      <body>
      و
      </body>
      محتوای قابل مشاهده در صفحه HTML را در خود جای می دهد
    • متن داخل تگ
      <h1>
      و
      </h1>
      یک عنوان درجه یک را نمایش می دهد. (شش درجه عنوان داریم)
    • متن داخل تگ
      <p>
      و
      </p>
      متنی از نوع پاراگراف را نمایش می دهد
    با استفاده از این توضیحات، یک مرورگر وب می تواند یک سند HTML را با یک عنوان و یک پاراگراف نمایش دهد.


    تگ های HTML

    تگ های HTML کلمات کلیدی (نام تگ ها) هستند که توسط دو براکت زاویه دار احاطه شده اند.

    <نام تگ/>متن داخل تگ های باز و بسته<نام تگ>
    • تگ ها HTML به طور معمول به صورتجفت استفاده می شوند مثل تگ پاراگراف
      <p>
      و
      </p>
    • برچسب اول را برچسب آغازین یا تگ باز, و برچسب آخر را برچسب پایانی یا تگ بسته می نامند
    • برچسب بسته همانند برچسب باز نوشته می شود با این تفاوت که پیش از نام تگ با یک اسلش / نوشته می شود
    [​IMG] تگ هایی که در آغاز کد قرار گرفتند تگ باز و تگ هایی که در پایان کد قرار می گیرند تگ بسته نام دارند.

    مرورگر وب

    منظور از عبارت مرورگر وب، همان برنامه های (Chrome, IE, Firefox, Safari,...) است که امکان خواندن اسناد HTML و نمایش محتوای آن را به شما فراهم می آورند.

    مرورگرها کدهای HTML را نمایش نمی دهند، بلکه آن ها را به شکلی که بر اساس تگ های HTML نوشته شده در آن هست نمایش می دهند:

    [​IMG]


    ساختار صفحات HTML

    در زیر تصویری از ساختار صفحات HTML مشاهده می نمایید:

    <html>
    <head>
    <title>عنوان صفحه در مرورگر</title>

    </head>
    <body>
    <h1>این یک عنوان از نوع درجه یک است</h1>
    <p>این یک پاراگراف است.</p>
    <p>این یک پاراگراف دیگر است.</p>

    </body></html>
    [​IMG] فقط فضای داخل تگ <body> (کادر سفید رنگ در تصویر بالا) در مرورگر به کاربر نمایش داده می شود.

    تگ بیانیه

    <!DOCTYPE>
    بیانیه

    <!DOCTYPE>
    کمک می کند تا مرورگر به درستی یک صفحه وب را نمایش دهد

    انواع مختلفی از اسناد HTML در وب وجود دارد

    برای نمایش صحیح یک سند HTML مرورگر باید نسخه و نوع سند را تشخیص بدهد

    بیانیه

    <!DOCTYPE>
    به بزرگی و کوچکی حروف حساس نیست و هر دو حالت قابل تشخیص و استفاده از آن مجاز است:

    <!DOCTYPE html>

    <!DOCTYPE HTML>

    <!doctype html>

    <!Doctype Html>

    بیانیه های رایج

    HTML5
    <!DOCTYPE html>
    HTML 4.01

    <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"
    "http://www.w3.org/TR/html4/loose.dtd">
    XHTML 1.0

    <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"
    "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">

    عناصر markup جدید:

    عناصر جدید برای ساختار سازی بهتر:
    <article>: برای محتواهای خارجی مثل متن از مقالات خبری، وبلاگ، تالارگفتگو و با هر محتوای دیگری از منابع خارجی
    <aside>: برای محتواهای کنار گذاشته شده از محتویاتی که قرار گرفته است. محتواهای کنار گذاشته شده باید مرتبط با محتویات اطراف خودش باشد.
    <command>: یک دکمه و یا دکمه رادیویی و یا یک چک باکس
    <details>: برای توضیح جزئیات یک صفحه یا بخشی از یک صفحه
    <summary>: یک عنوان یا خلاصه در داخل عنصر details به کار می رود.
    <figure>: برای گروه بندی یک محتوای مستقل که می تواند یک ویدیو باشد
    <figcaption>: عنوان بخش figure را با آن مشخص می کنند.
    <footer>: برای بخش footer صفحه یا یک بخش که می تواند شامل نام نویسنده، تاریخ ایجاد صفحه، اطلاعات تماس و یا اطلاعات حق کپی رایت باشد
    <header>: برای معرفی یک صفحه یا یک بخش که می تواند شامل navigation (منوی راهوری) هم باشد.
    < hgroup>: برای تیتر یک بخش از <h1> تا <h6> می توان استفاده کرد که بزرگترین آنه به عنوان تیتر اصلی بخش و بقیه به عنوان زیر تیتر بخش استفاده می شوند.
    <mark>: برای متن هایی که باید مشخص تر (highlight) باشند
    <meter>: برای اندازه گیری، فقط زمانی استفاده می شود که مقادیر ماکزیمم و مینیمم مشخص باشد.
    <nav>: برای بخش navigation به کار می رود.
    <progress>:حالت کاری که در حال پیشرفت است
    <ruby>، <rt>، <rp>: برای تفسیر کاراکترهای و یا متن های چینی
    <section>: برای بخشی از یک سند مثلا فصل ها، هدرها، فوترها و هر بخش دیگری از صفحه
    <time>: برای تعریف یک ساعت یا تاریخ و یا هر دو
    <wbr>: شکست کلمه. می توان با آن خط جدید (line-break) را تعریف کرد.

    عناصر چندرسانه ای جدید
    <audio>: برای صداها، موزیک ها و هر فایل چندرسانه ای صوتی
    <video>: برای ویدیوکلیپ ها و هر فایل ویدیویی دیگر
    <source>: برای منبع عناصر مدیا که در داخل تگ های video و audio تعریف میشود.
    <embed>: برای محتویات جاسازی شده (embed) مثل پلاگین ها

    عنصر Convas ساخت تصاویر
    <convas>: برای ساخت تصاویر با یک اسکریپت

    عناصر فرم جدید:
    <datalist>: لیستی از خصوصیتهای اختیاری برای مقادیر ورودی
    <keygen>: کدهایی برای شناسایی کاربران ایجاد می کند.
    <output>: برای انواع متفاوتی از خروجی مثل خروجی های نوشته شده توسط یک اسکریپت

    مقادیر صفت نوع ورودی جدید:
    خصوصیت نوع عنصر input ، مقادیر جدیدی برای کنترل بهتر دریافت ورودی از کاربر قبل از ارسال آن به سرور در اختیار قرار داده است:
    tel: مقدار وروردی از نوع شماره تلفن
    search: مقدار ورودی از نوع فیلد جستجو
    url: مقدار ورودی از نوع یک آدرس وب
    email: مقدار ورودی از نوع یک یا چند آدرس ایمیل
    datetime: مقدار ورودی از نوع زمان و/یا تاریخ
    date: مقدار ورودی از نوع تاریخ
    month: مقدار ورودی از نوع ماه
    week: مقدار ورودی از نوع هفته
    time: مقدار ورودی از نوع زمان
    datetime-local: مدار ورودی از نوع زمان/تاریخ محلی
    number: مقدار ورودی از نوع عدد
    range: مقدار ورودی از نوع عددی در رنج داده شده
    color: مقدار ورودی از نوع کد هگزادسیمال یک رنگ مثل #FF8800

    در این دو جلسه فقط به مفاهیم و آشنایی با HTML5 پرداختیم و تا حالا یک خط کد هم با این زبان (اگر بتوان HTML را زبان برنامه نویسی نامید) ننوشته ایم. در اینجا ذکر یک سری نکات ضروری است:
    ۱- هدف از این جلسات این نیست که شما با HTML آشنا شوید این جلسات به شما کمک می کند که با HTML5 آشنا شوید. شما باید آشنایی قبلی با HTML داشته باشید. پس اگر می خواهید با پیش روی در این جلسات طراحی وب بیاموزید سخت در اشتباهید. [​IMG]
    ۲- من در این مجموعه جلسات با تگ های جدیدی که در نسخه ۵ HTML به وجود آمده اند خواهم پرداخت و در پایان اگر خدا بخواهد یک مرجع از تگ های HTML5 برایتان خواهم ساخت.
    ۳- در جلسه بعدی با تگ video یکی از عناصر جدید اضافه شده در HTML5 آشنا خواهید شد.

    منابع: وب سایت 118فایل
     
    نوشته شده توسط moeintnt در ‏12 آگوست 2018 در 13:01

به اشتراک بگذارید