تفاوت های HTML با XHTML

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

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

    <img src="logo.gif" />

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

    <p> Para

    </p>

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

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

فضای سفید و توضیحات

بخش فضای سفید مربوط به php ، x-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 را بالا می برد. مثلا دو کد
(ادامه…)

از سیر تا پیاز HTML در کتاب الکترونیکی آموزش html

HTML را می توان پایه طراحی صفحات وب دانست. با فراگیری HTML می توانید گام های بعدی را راحت تر بردارید. در راه خود استوار بوده و به صورت استاندارد به طراحی وب بپردازید.
کتاب الکترونیکی html شامل تمامی تگ های و دستور های HTML می باشد. شما با مطالعه این کتاب بخش عظیمی از زبان قالب بندی صفحه HTML را خواهید آموخت. این کتاب از 48 صفحه تشکیل شده است. کتاب تماماً به زبان فارسی بوده و به صورت ترتیبی و طبقه بندی شده html را به شما عزیزان یاد می دهد. پسوند فایل Doc. می باشد.
منبع اصلی کتاب در دست نیست. بعضی از قسمت های کتاب تغییر داده ام تا راحت تر بتوانید از آن استفاده کنید.
لینک دانلود کتاب الکترونیکی html با حجم 284 کیلو بایت

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

HTML چیست؟

HTML سرواژه‌ٔ HyperText Markup Language و به معنای « زبان نشانه‌گذاری اَبَرمتن » است (که البته برخی آنرا « زبان علامت‌گذاری فرامتن » ترجمه کرده‌اند).

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

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

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

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

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

نحوه قرار دادن عکس کنار آدرس بار


سلام،

اگر دقت کرده باشید در آدرس بار کنار آدرس سایت 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. بر روی عکسی که هم اکنون در آدرس بار مرورگر شماست کلیک کرده و آن را بر روی آدرس سایت خود بکشید و سپس رها نمائید.

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