تبلیغات
یادداشت های من - آموزش HTML5 – جلسه دوم : عناصر جدید در HTML5

یادداشت های روزانه من درباره اینترنت، سیاست، آبکنار، رایانه، شعر، فناوری اطلاعات و ...
هر چیزی که بهش علاقه دارم

حسین (کیوان) جهانبخش آبکنار

جستجو

 

آموزش HTML5 – جلسه دوم : عناصر جدید در HTML5

یکشنبه 1 خرداد 1390   09:35 ب.ظ

اینترنت از زمان استاندارد شدن HTML 4.01 در سال 99 تغییرات زیادی کرده. امروز بعضی از عناصر HTML 4.01 منسوخ شده و هیچ استفاده از آن نمی شود و یا برای کاری که برای آن ساخته شده اند استفاده نمی شوند. این عناصر در HTML5 حذف و یا دوباره نوشته شده اند.

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

عناصر 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: مقدار ورودی از نوع یک آدرس وب URL
  • email: مقدار ورودی از نوع یک یا چند آدرس ایمیل
  • datetime: مقدار ورودی از نوع زمان و/یا تاریخ
  • date: مقدار ورودی از نوع تاریخ
  • month: مقدار ورودی از نوع ماه
  • week: مقدار ورودی از نوع هفته
  • time: مقدار ورودی از نوع زمان
  • datetime-local: مدار ورودی از نوع زمان/تاریخ محلی
  • number: مقدار ورودی از نوع عدد
  • range: مقدار ورودی از نوع عددی در رنج داده شده
  • color: مقدار ورودی از نوع کد هگزادسیمال یک رنگ مثل #FF8800

 

در این دو جلسه فقط به مفاهیم و آشنایی با HTML5 پرداختیم و تا حالا یک خط کد هم با این زبان (اگر بتوان HTML را زبان برنامه نویسی نامید) ننوشته ایم. در اینجا ذکر یک سری نکات ضروری است:

1-      هدف از این جلسات این نیست که شما با HTML آشنا شوید این جلسات به شما کمک می کند که با HTML5 آشنا شوید. شما باید آشنایی قبلی با HTML داشته باشید. پس اگر می خواهید با پیش روی در این جلسات طراحی وب بیاموزید سخت در اشتباهید.

2-      ما در این مجموعه جلسات با تگ های جدیدی که در  نسخه 5 HTML به وجود آمده اند خواهیم پرداخت و در پایان اگر خدا بخواهد یک مرجع از تگ های HTML5 برایتان خواهم ساخت.

3-      در جلسه بعدی با تگ video یکی از عناصر جدید اضافه شده در HTML5 آشنا خواهید شد.



پ ن : این مجموعه آموزش ها از سایت W3C ترجمه شده و خواهد شد. جهت آشنایی خودم و دیگران منتشر می کنم.



نوشته شده توسط : حسین (کیوان) جهانبخش آبکنار

نوع مطلب : HTML 5 ،طراحی وب ،