HTML5 نسخه شماره ۵ زبان اصلی World Wide Web یعنی HTML است. این نسخه در تاریخ ۲۲ ژانویه ۲۰۰۸ بوسیله کنسرسیوم وب جهانی (w3c) منتشر شد.
ایده ابتدایی این نسخه از HTML در سال ۲۰۰۴ در Web Hypertext Application Technology Working Group یا همان WHATWG کلید خورد. این گروه کاری شامل شرکت های بزرگی مانند AOL، Apple، Google، IBM، Microsoft، Mozilla، Nokia، Opera و … می باشد.

نشانه های جدید
HTML 5 عناصر و ویژگی های جدیدی به تگ ها (tag) ها اضافه کرده است. از لحاظ تکنیکی بعضی از این تگ ها به div و span شبیه هستند. به عنوان مثال تگ جدید nav و تگ جدید footer از این دسته هستند.
بعضی دیگر از تگ های جدید مخصوص موتور های جستجو (برای ایندکس کردن اطلاعات) ، دستگاه های دارای صفحه کوچک (مانند موبایل) و یا خواننده های صوتی می باشند مانند تگ های جدید audio و video.
همچنین بعضی از عناصر حذف شده اند. مانند تگ center.

تفاوت ها با HTML 4
لیست تعدادی از تفاوت های HTML 5 با HTML 4 به طور خلاصه (تعداد کمی از نمونه ها نمایش داده شده است) عبارتند از:
• عناصر جدید – section, video, progress, nav, meter, time, aside, canvas
• عناصر صفحه – header, section, footer, figure
• ویژگی های جدید برای تگ Input – date/time, email, url
• ویژگی های جدید – ping, charset, async
• ویژگی های عمومی (به تمامی عناصر قابل اعمال هستند) – id, tabindex,repeat
• عناصر حذف شده – center, font, strike
برای مشاهده تمامی تفاوت های HTML 5 با 4 کافیست به صفحه HTML 5 Reference مراجعه کنید.

میزان پشتیبانی مرورگر ها از استاندارد های HTML 5
برای مشاهده آخرین بررسی ها در رابطه با پشتیبانی مرورگر ها از استاندارد های HTML 5 می توانید به لینک های زیر مراجعه نمایید:

• Implementations in Web browsers
• Comparison_of_layout_engines

موفق باشید

اشتراک‌گذاری

مطالب مرتبط:

1. از سیر تا پیاز HTML در کتاب الکترونیکی آموزش html
2. تفاوت های HTML با XHTML
3. HTML چیست؟

یکی از اشکلات IE در نمایش فیلد های password فرم ها می باشد. به تصویر زیر توجه کنید:

برای حل این مشکل کافیست تا به همه فیلد های خود (برای داشتن اندازه ی برابر) کد استایل زیر را اضافه نمائید:

البته arial هر مقداری می تواند باشد. مهم اعمال خصیصه font-family می باشد.(این اعمال می تواند توسط کلاس ها، تگ ها و … صورت گیرد.)

به عکس زیر توجه کنید:

موفق باشید

اشتراک‌گذاری

مطالب مرتبط:

1. مقدمه MySQL
2. گالری فایرفاکس
3. راه اندازی PHP در ویندوز قسمت دوم

مقدمه
گاهی اوقات در طراحی سایت، شما به مشکل مغایرت طراحی در دو مرورگر فایرفاکس و اینترنت اکسپلورر برخورد می کنید. مثلا text-align در فایرفاکس درست دیده می شود ولی اینترنت اکسپلورر آن را اشتباه نمایش می دهد. البته در صورت کد نویسی صحیح اینگونه مشکلات کمتر پیش می آید.
Conditional Comments، توضیحات شرطی خاصی می باشند که همانند یک اکستنشن در IE نسخه 5 به بالا کار می کنند. Conditional Comments به شما قابلیت تشخیص مرورگر IE و نسخه آن را می دهند.

نحوه استفاده
در زیر یک توضیح ساده که در بین کدهای x-html نوشته می شود را مشاهده می کنید:

<!-- This text will be ignored by the browser. -->

ساده ترین دستور زبان Conditional Comments مانند زیر است:

<!--[if IE]>
This text will be shown by IE/win ver. 5.0 and higher.
 <![endif]-->

برای اعمال دستورات بر روی نسخه خاصی از IE می توانید نسخه آن را به صورت زیر بعد از [if IE بنویسید(در اینجا نسخه های 5 اعمال شده اند. مانند 5, 5.1, 5.5 و ...):

<!--[if IE 5]>
The major version number of this browser is 5.
<![endif]–>

(در اینجا نسخه 5.5 اعمال شده است)

<!--[if IE 5.5000]>
You are using IE/win 5.5.
 <![endif]-->

همچنین این دستورات قابلیت استفاده از عمگلر هایی مانند <, > و ... را دارند که در زیر معرفی شده اند:
lt : کوچکتر less than
lte : کوچکتر یا مساوی less than or equal
gt : بزرگتر greater than
gte : بزرگتر یا مساوی greater than or equal

نحوه نگارش این عملگرها در دستور زبان Conditional Comments به صورت زیر است:

<!--[if gte IE 6]>
This text will be shown by IE/win ver. 6.0 and higher.
 <![endif]-->

عملگر نفی (!) نیز قابل استفاده است:

<!--[if !gte IE 6]>
 This text will be shown by IE/win ver. 6.0 and higher.
 <![endif]-->

و یا:

<!--[if !IE]>
This text will be not be shown by any version  of IE/win that understands conditional comments. It won't be shown by  any other browsers either because they will treat this as a normal  comment.
 <![endif]-->

آخرین کدی که در بالا نوشته شده است به معنی اعمل دستورات در مرورگری به جز IE است.

نمونه کد کامل برای X-HTML

<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">
<html lang="en">
<head>
<title>Conditional comments</title>
</head>
<body>
<!--[if !IE]>        <p>This is page is not being viewed with Internet Explorer
 for Windows version 5.0 or higher.</p>      <!--<![endif]-->
<!--[if IE]>        <p>This is page is being viewed with Internet Explorer
 for Windows version 5.0 or higher.</p>      <![endif]-->
</body>
</html>

نمونه کد کامل برای CSS

<head>
<title>Conditional comments</title>
<link rel="sytlesheet" type="text/css" href="style.css">
<!--[if IE 5]>
 <link rel="sytlesheet" type="text/css" href="bugFixForIE5x.css">
    <![endif]-->
</head>

منبع (source)
موفق باشید

اشتراک‌گذاری

مطالب مرتبط:

1. فضای سفید و توضیحات
2. خاصیت توو رفتگی سر سطر (CSS text-indent Property)
3. درباره HTML 5

اگر با فایرفاکس کار کرده باشید متوجه آیکون در آدرس بار شده اید. البته این آیکون فقط زمانی نمایش داده می شود که فایرفاکس متوجه خروجی RSS سایت شما شود. برای اینکه فایرفاکس را متوجه این موضوع کنید، کد زیر را در داخل بلوک تگ <head> قرار دهید:

که در آن type نوع نسخه RSS ،TITLE معمولاً نسخه RSS شما (یا هر عنوان دیگری) و RSS-URL آدرس خروجی RSS شما می باشد. در صورتی که چندین نوع خروجی RSS دارید، به ازای هر کدام، کد را جداگانه بنویسید.
به عنوان مثال کد زیر مربوط به همین وبلاگ است:

نکته : این کدها با IE 7 و Safari نیز سازگار می باشند.

موفق باشید

اشتراک‌گذاری

مطالب مرتبط:

1. Alternate Style Sheets – استایل جایگزین
2. دنیای فایرفاکس
3. ۲ اکستنشن فوق العاده برای فایرفاکس

<link rel="stylesheet" title="TITLE" href="URL"/>

که در آن title = عنوان دلخواه برای این استایل و href = آدرس نسبی یا مطلق این استایل می باشد، با استفاده از دستور زیر به تعداد دلخواه استایل جایگزین بسازید:

<link rel="alternate stylesheet" title="TITLE" href="URL"/>

برای سوئیچ کردن بین استایل های مختلف کافی است بعد از باز شدن صفحه حاوی استایل های جایگزین، در مرورگر فایرفاکس (FireFox) به منو View رفته و از زیر منو Page Style استایل جایگزین مورد نظر را انتخاب کنید.

نمونه ای از این امکان را در اینجا ببینید.

اشتراک‌گذاری

مطالب مرتبط:

1. حل مشکل سایز فیلد password در IE
2. چگونه فایرفاکس را متوجه خروجی RSS سایتمان کنیم؟
3. first letter در CSS

• از نظر HTML فرقی نمی کند که شما از تگ های html، head و body و DOCTYPE استفاده کنید؛ ولی نوشتن این المان ها در XHTML ضروری است.
• HTML به شما اجازه می دهد که بعضی از تگ های بسته را حذف کنید؛ ولی XHTML چنین نیست و حتی المان های خالی نیز به تگ های بسته نیاز دارند. برای این که سازگاری با برنامه های مرورگر تا حد امکان حفظ شود، یک Space(فضای خالی) و یک اسلش(/) به المان های خالی اضافه کنید. مانند:

  <img src="logo.gif" />

  و برای المان هایی که خالی نیستند، حتماً یک تگ بسته مستقل بنویسید. مانند:

  <p> Para
  
  </p>

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

• HTML به شما اجازه می دهد که مقادیر خصیصه ها را بدون کوتیشن بنویسید (البته این مقادیر فقط شامل حروف، اعداد و چهار سمبل – ، . ، _ و : می باشد). حذف کوتیشن، XHTML را دچار کابوس می کند و در نتیجه خطا رخ می دهد.
• HTML نسبت به بزرگی و کوچکی حروف حساس نیست؛ ولی XHTML چنین است. در XHTML باید تمامی المان ها، خصیصه ها و مقادیر از پیش تعریف شده ی آنها را باید با حروف کوچک بنویسید.
• اگر مقدار خصیصه ای با نام آن یکسان باشد، در HTML می توانید از آن صرف نظر کنید. ولی در XHTML باید مقادیر تمام خصیصه ها را به طور صریح مشخص نمایید.

اشتراک‌گذاری

مطالب مرتبط:

1. از سیر تا پیاز HTML در کتاب الکترونیکی آموزش html
2. درباره HTML 5
3. HTML چیست؟

فضای سفید
جدا کردن کاراکتر های مانند برگه ها (tab)، فضای خالی (space) و خطوط جدید (newline) را فضای سفید (whitespace) گویند. همانطور که می دانید، مرورگرهای HTML فضای سفید را نادیده می گیرند. موتور PHP هم از این روش تبعید می کند. این دو قطعه HTML در نظر بگیرید:

<h5>welcome to 5ww.ir</h5><p>What you like to search today</p>

و

<h5>welcome

to 5ww.ir</h5>

<p>What you like

to search today</p>

خروجی این کدها یکسان است زیرا مرورگر به آنها با یک دید می نگرد. استفاده از فضای سفید در HTML خوانائی کد را بالا می برد و مطالعه آن توسط انسان را ساده می سازد اما در نگرش مرورگر به آن نقشی ندارد. در PHP همین اصل حکم فرماست. استفاده از فضای سفید خوانائی کد PHP را بالا می برد. مثلا دو کد

echo ‘hello’;

echo ‘world’;

و

echo ‘hello’;echo ‘world’;

معادلند اما کد اول خواناتر می باشد.

بخش توضیحات مربوط به php ، css می باشد و در بسیاری از زبان های دیگر نیز هم اینگونه است.

توضیحات
توضیحات راهنمائی برای کاربر هستند. از توضیحات برای توصیف هدف استفاده از کد، مشخص کردن نویسنده و زمان نوشتن یا آخرین ویرایش کد استفاده می شود.
مفسر PHP توضیحات کد را نادیده می گیرد و آنها را معادل فضای سفید در نظر می گیرد. PHP از توضیحات ++C، C و اسکریپت پوسته (shell) پشتیبانی می کند.
توضیحات چند خطی زیر به سبک ++C نوشته شده و در ابتدای یک اسکریپت PHP ظاهر می شوند:

/*Author: Saeid

Homepage: http://www.5ww.ir

E-mail: info@5ww.ir

*/

توضیحات چند خطی با */ آغاز و با /* پایان می یابند. توضیحات چند خطی را نمی توان به صورت تودرتو نوشت.

توضیحات یک خطه زیر با سبک ++C نوشته شده اند:

echo ‘<p>Search processed .</p>’; //Start printing search

و توضیحات زیر به سبک اسکریپت پوسته نوشته شده اند:

echo ‘<p>Search processed .</p>’; #Start printing search

در این دو سبک عبارتی که بعد از # یا // قرار گیرد به صورت توضیحات در نظر گرفته می شود.

در زبان HTML از علامت

<!–

برای شروع توضیحات و از علامت

–>

برای پایان دادن به توضیحات استفاده می کنند.

اشتراک‌گذاری

مطالب مرتبط:

1. توضیحات شرطی – Conditional Comments
2. ضمیمه php چیست؟
3. ایده ای برای استفاده متفاوت از تابع ()Date در PHP

پی نوشت: لینک اصلاح شد.

اشتراک‌گذاری

مطالب مرتبط:

1. کتاب الکترونیکی معرفی PHP به زبان فارسی
2. کتاب الکترونیکی همه چیز درباره Ajax
3. کتاب الکترونیکی ‫راهنمای سریع دستورات برای شروع کار با اوبونتو

اچ‌تی‌ام‌ال، سنگِ‌بنای وب است؛ یک زبان رایانه‌ای که برای تدوین قالب و طراحی صفحات وب به کار برده می‌شود. دستورالعملهای این زبان، برچسب (Tag) نام دارند که محتوای یک صفحهٔ وب، به وسیلهٔ آنها، نشانه‌گذاری شده و بدین‌ترتیب، نحوهٔ نمایش آن صفحه برای مرورگرهای وِب، توصیف می‌شود.

هر یک از برچسبهای اچ‌تی‌ام‌ال، معنا و مفهوم خاصی دارند و تأثیر مشخصی بر محتوا می‌گذارند؛ مثلاً برچسبهایی برای تغییر شکل ظاهری متن، نظیر درشت‌ و ضخیم کردن یک کلمه یا برقراری پیوند (Link) به صفحات دیگر در اچ‌تی‌ام‌ال تعریف شده‌اند.

یک سند اچ‌تی‌ام‌ال، یک پرونده مبتنی بر متن (Text–based) است که معمولاً با پسوند .htm یا .html نامگذاری شده و محتویات آن از برچسبهای اچ‌تی‌ام‌ال تشکیل می‌شود. مرورگرهای وب، که قادر به درک و تفسیر برچسبهای اچ‌تی‌ام‌ال هستند، تک‌تک آنها را از داخل سند اچ‌تی‌ام‌ال خوانده و سپس محتوای آن صفحه را نمایان‌سازی (Render) می‌کنند.

اچ‌تی‌ام‌ال یک زبان برنامه‌نویسی نیست، بلکه زبانی برای نشانه‌گذاری ابرمتن است و اساساً برای ساختمندکردن اطلاعات و تفکیک اجزای منطقی یک نوشتار — نظیر عناوین، تصاویر، فهرستها، بندها و جداول — به کار می‌رود. از سوی دیگر، اچ‌تی‌ام‌ال را نباید به عنوان زبانی برای صفحه‌آرایی یا نقاشی صفحات وب به کار بُرد؛ این وظیفه اکنون بر دوش فناوریهای دیگری چون شیوه‌نامه‌های آبشاری است.

گفتنی است اچ‌تی‌ام‌ال شکلی از زبان دیگری بنام اس.جی.ام.ال است و « کنسرسیوم وب جهان گستر » آنرا به عنوان استانداردی برای نشانه‌گذاری مستندات ابرمتنی برای عرضه در وب، تدوین کرده است.

اشتراک‌گذاری

مطالب مرتبط:

1. از سیر تا پیاز HTML در کتاب الکترونیکی آموزش html
2. درباره HTML 5
3. تفاوت های HTML با XHTML

اگر دقت کرده باشید در آدرس بار کنار آدرس سایت http://zebardast.ir یک آیکون مشاهده می نمائید. در اصطلاح به این عکس فاویکون (Favicon) گفته می شود. برای اینکه شما نیز کنار آدرس سایت یا وبلاگ خود عکس را قرار بدهید مراحل زیر را پی بگیرید:

1. یک آیکون در سایز 16*16 طراحی نمائید.
2. فایل را با نام favicon.ico ذخیره نمائید.
3. فایل آیکون را بر روی یک سرویس دهنده آپلود نمائید.(در صورتی که سایت دارید در شاخه اصلی آپلود کنید)
4. کد زیر را در قسمت head قالب صفحه اصلی خود اضافه کنید: (به جای URL آدرس فایل آیکون را بنویسید. در صورتی که در شاخه اصلی سایت خود آپلود نموده اید نوشتن favicon.ico کافی است)

چند نکته:

• مرورگر اینترنت اکسپلورر favicon را فقط در صورتی که در دایرکتوری ریشه و با فرمت ico باشد نمایش می دهد.
• استفاده از فایل های متحرک برای این منظور غیر استاندارد می باشد ولی در صورتی که قصد دارید تا فایل متحرکی را در کنار آدرس سایت خود در آدرس بار قرار دهید، ابتدا فایل را با فرمت Gif طراحی نموده و سپس نام آن را به favicon.ico تغییر دهید. بدلیل استاندارد نبودن این روش ممکن است بعضی از مرورگر ها از آن پشتیبانی ننمایند.
• سایز استاندارد آیکون برای این کار 16*16 می باشد ولی شما می توانید از سایز های دیگر نظیر 32*32 و 48*48 نیز استفاده کنید.

• در صورتی که بعد از مراحل بالا عکس را در آدرس بار مشاهده ننمودید، می توانید با انجام یکی از دو کار زیر آیکون را مشاهده نمائید:
  1. Cache مرورگر خود را پاک کنید.
  2. بر روی عکسی که هم اکنون در آدرس بار مرورگر شماست کلیک کرده و آن را بر روی آدرس سایت خود بکشید و سپس رها نمائید.

شاد و پیروز باشید

اشتراک‌گذاری

مطالب مرتبط:

1. نحوه FTP با اینترنت اکسپلورر ۷ (IE 7)
2. کنار رود پیدرا نشستم و گریستم
3. بدست آوردن کشور یک آدرس IP به کمک MySQL