المان های جدید HTML5

المان-های-جدید-HTML5

المان های جدید در HTML5

المان‌های جدید ساختاری در HTML5 به ما این امکان را می دهد تا بخش‌های مختلف صفحات وب را بتوانیم به راحتی توصیف کنیم. هرکدام از این المان‌های جدید با هدف خاصی معرفی شده‌اند و به ما در تفکیک بخش‌های مختلف صفحات وب کمک می کنند. در زیر لیستی از المان های HTML5  و همچنین توضیحی از چگونگی عملکرد هر یک بیان شده است و اینکه برای چه چیزی مورد استفاده قرار می گیرند.

المان های ساختاری/معنایی جدید

HTML5 المان های جدیدی را به منظور ساختار بهتر صفحات وب ارائه می دهد. در جدول زیر تگ های ساختاری جدید HTML5 با توضیح کوتاهی برای هر یک بیان شده است.

<article> تعریف یک مقاله
<aside> تعریف یک محتوای در کنار متن اصلی
<bdi> تعریف متن در جهتی غیر از جهت اصلی که خارج از آن در نظر گرفته شده
<details> تعریف جزییات بیشتر
<dialog> تعریف یک پنجره dialog
<figcaption> تعریف یک عنوان برای تگ <figure>
<figure> تعریف یک محتوای مجزا مانند عکس، نمودار و …
<footer> تعریف یک بخش پایینی برای یک صفحه یا بخش
<header> تعریف یک بخش بالایی برای یک صفحه یا بخش
<main> تعریف متن اصلی صفحات
<mark> برای برجسته کردن متن
<meter> تعریف یک واحد اندازه گیری
<nav> تعریف لینک های پیمایش صفحات
<progress> نمایش پیشرفت یک وظیفه
<section> تعریف یک بخش از متن
<summary> تعریف بخش قابل مشاهده از یک تگ <details>
<time> تعریف تاریخ و زمان
<wbr> تعریف یک خط جدید

المان های جدید فرم

<datalist> تعریف یک فهرست از حالت های پیش فرض برای کنترل ورودی
<keygen> تعریف یک تولید کننده جفت کلید برای شناسایی کاربران
<output> تعریف نتیجه یک خروجی

انواع ورودی در HTML5

با  امکاناتی که HTML5 در اختیار ما قرار می دهد می توان یک ورودی را راحتر و بهتر کنترل کرد.

انواع ورودی های جدید در HTML5 عبارتند از:

  • color
  • date
  • datetime
  • datetime-local
  • email
  • month
  • number
  • range
  • search
  • tel
  • time
  • url
  • week

انواع خصوصیت های جدید در HTML5 عبارتند از:

  • autocomplete
  • autofocus
  • form
  • formaction
  • formenctype
  • formmethod
  • formnovalidate
  • formtarget
  • height and width
  • list
  • min and max
  • multiple
  • (pattern (regexp
  • placeholder
  • required
  • step

برای اطلاعات بیشتر در رابطه با انواع خصوصیت های جدید در HTML5 می توانید مقاله خواص فیلدهای ورودی در html5 را مطالعه نمایید.

خصوصیت جدید syntax برای ورودی در HTML5

HTML5 چهار syntax مختلف را برای خصوصیت ها در نظر گرفته است. مثال زیر syntaxهای مختلفی که برای تگ <input> وجود دارد را نشان می دهد:

نوع مثال
Empty <input type=”text” value=”Elham” disabled>
unquoted <input type=”text” value=Elham>
double-quoted <“input type=”text” value=”Elham  Ab>
single-quoted <‘input type=”text” value=’Elham Ab>

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

گرافیک در HTML5

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

<canvas> از این تگ برای ترسیم گرافیک های دو بعدی از طریق کدنویسی (مثل جاوا اسکریپت) استفاده می شود
<svg> برای ایجاد گرافیک های برداری در صفحات وب بکار می رود

المان های صوتی و تصویری جدید HTML5

 تا قبل از ارائه HTML5، استاندارد خاصی برای نمایش فایل های صوتی و تصویری در صفحات وب وجود نداشت و طراحان وب برای نمایش اینگونه فایل ها از ابزارهای جانبی مثل falsh player و real palyer استفاده می کردند. اما HTML5، یک استاندارد برای پخش فایل های صوتی و تصویری تعیین کرده است که به وسیله آن، دیگر نیازی به استفاده و نصب نرم افزار جانبی خاصی نیست. این المان های صوتی و تصویری HTML5 در جدول زیر بیان شده است:

<audio> تعریف محتوای صوتی
<embed> تعریف محتوای تصویری مانند فیلم و کلیپ
<source> تعریف منابع مختلف برای <audio> و <video>
<track> تعریف یک ظرف یا یک محتوای تعاملی برای <audio> و <video>
<video> تعریف متن برای <audio> و <video>

4 نظرات شما

  • rahimi

    مرداد ۱۰, ۱۳۹۴ at ۷:۰۸ ب.ظ
    سایتت فوق العاده زیباست همش رو خودت تنظیم کردی ؟
  • امیرحسام

    شهریور ۸, ۱۳۹۴ at ۱۰:۲۰ ب.ظ
    خوشحالم که سایتتون دوباره بروز شد اینقدر مطالبتون رو خوندم که همرو ازبرم امیدوارم که دوباره ادامه بدید
  • جاوید

    آبان ۲, ۱۳۹۴ at ۱:۲۵ ق.ظ
    سلام خانم عباس زاده ممنون از آموزش خوبتون !! من هم کارشناسی نرم افزار خوندم و به طراحی وب علاقه دارم !!
  • دنیس

    آبان ۱۰, ۱۳۹۴ at ۵:۴۳ ب.ظ
    با سلام و تشکر به خاطر مطالب خوبتون. شما به صورت رسمی جهت عضویت و مدیریت در سایت دنیس دعوت می شوید. Dnis.ir

پاسخ دهید

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


© 2013 Mobtadi. All rights reserved.
کلیه حقوق مادی و معنوی برای وبسایت مبتدی محفوظ است.