معرفی زبان html 5

Sina

Administrator
پرسنل مدیریت
2013-05-11
4,709
2,901
113
چابکســـر


به زبان ساده , یک صفحه وب (web page) یا سند HTML Document یک فایل متنی ساده است که با استفاده از HTML)) Hypertext Markup Language یا زبان علامت گذاری فرا متنی نوشته شده است تا با فرمت ها و قالب های زیبا درون یک مرورگر نمایش داده شوند. در توضیحاتی که در ادامه نوشته ام معنی Html را به صورت کلمه به کلمه می توانید مشاهده کنید : • Hypertext : متنی که وقتی روی آن کلیک میکنید از یک سند به یک سند دیگر میرود. این توانایی یک صفحه وب برای ایجاد لینک (ارتباط) به یک صفحه وب دیگر است .
Markup : تگ (Tag یا بر چسب)هایی که چیدمان و قالب گرافیکی را روی یک متن ساده اعمال میکنند. به عبارت دیگر , متن ساده با تگ ها "علامت گذاری (Markup)" می شود .
Language : نشان دهنده این است که HTML به عنوان یک زبان در نظر گرفته می شود .


Everything is on sale. در HTML بر خلاف برنامه های واژه پرداز ( مانند مایکروسافت ورد ) هیچ دکمه Italic وجود ندارد که روی آن کلیک کنید تا متن ایتالیک شود. بنابراین باید عبارتی که میخواهید ایتالیک شود را تگ بزنید (برچسب بزنید). کدی که مشخص میکند ایتالیک کردن از کجا باید شروع شود به صورت <i> است (تگ باز) و کدی که مشخص میکند ایتالیک کجا باید خاتمه پیدا کند به صورت </i> می باشد (تگ بسته). کد HTML شما برای متن بالا چیزی مانند این خواهد بود :

کد:
<i>Everything</i> is on sale.

این مثال دارای تگ دو طرفه (Two-sided Tag) است. در این حالت متن بین تگ های باز و بسته قرار می گیرد که در این حالت <i> و </i> هستند (مانند متنی که درون پرانتز باز و بسته قرار می گیرد). دقت کنید که در </i> از یک اسلش (/) استفاده شده است . این اسلش باعث می شود یک تگ بسته از یک تگ باز متفاوت شود. وقتی از تگ دو طرفه استفاده می کنید . همیشه باید برای تگ باز یک تگ بسته نیز داشته باشید .


برای این که متوجه شوید این سیستم تگ گذاری چگونه ایجاد شده است , لازم است که به روزهای قدیم اینترنت بازگردیم که در آن زمان همه افراد با استفاده از مودم های دایل آپ (شماره گیر) به اینترنت وصل بوده و حداکثر سرعت برابر با 58Kbps بود . این سرعت واقعاً کم بود. فایل های متنی به مراتب سریع تر از فایل های باینری (دودویی) انتقال پیدا میکردند و بنابراین برای انتقالب اطلاعات از فایل های متنی استفاده می شد تا کاربران مجبور نباشند مدت زیادی برای بارگذاری اطلاعات صبر کنند .



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


سازندگان وب یک راه حل جالب پیدا کردند . به جای ارسال صفحات دارای فرمت به روی اینترنت , آن ها مرورگر وب (Web Browser) ایجاد کردند که می توانست کدهای متن ساده (تگ های HTML) را به عنوان دستورالعمل فرمت صفحه ترجمه کند/ متن نیز می توانست با فرمت فایل متن ساده به راحتی و با سرعت ارسال شود و سپس توسط مرورگر وب روی کامپیوتر کاربر به صورت گرافیکی ترجمه می شد .



HTML برای انواع فرمت های متنی به خوبی کار می کرد اما بعضی از طراحان وب باید از گرافیک های روی صفحه وب خود استفاده می کردند. برای انجام این کار تگ <img> ایجاد شد که طراحان از آن برای مراجعه به یک گرافیک ذخیره شده روی سرور استفاده می کردند. وقتی مرورگر وب به این تگ می رسید, به سرور درخواست دانلود آن گرافیک را داده و وقتی گرافیک دریافت می شد , آن را روی صفحه وب نشان می دهد.


تگ <img> نسبت به تگ <i> متفاوت است . ابتدا این تگ یک طرفه (One Sided) است یعنی تگ بسته نیست و خاصیت هایی را دریافت می کند. یک خاصیت (Attribute) متنی درون یک تگ است که حاوی اطلاعاتی درباره چگونگی رفتار تگ است . به عنوان مثال برای یک تگ <img> , باید مکان فایل گرافیکی را نیز مشخص کنید ( که منبع نام دارد ). برای انجام این کار از خاصیت Src استفاده می شود :
کد:
<img src="/tree.gif">

این تگ <img> از خاصیت src= استفاده کرده و با استفاده از آن تعیین می کند که فایل tree.gif باید نمایش داده شود.
تگ های زیادی هستند که از خاصیت ها استفاده می کنند که این خاصیت ها می توانند دلخواه یا لازم باشند.

با استفاده از HTML می توانید هایپرلینک هایی ( Hyperlinks ) را از یک صفحه به صفحه دیگر ایجاد کنید .
وقتی یک بازدید کننده سایت روی یک هاپیرلینک کلیک می کند , مرورگر وب صفحه مشخص شده توسط هایپرلینک را باز کرده و یا به قسمت تعیین شده توسط هایپرلینک در همان صفحه می رود ( یعنی به صفحه "بوک مارک"). چگونگی ایجتد هایپرلینک در اینده بررسی می شود .


تگ برای یک هایپرلینک به صورت <a> است که یک تگ دو طرفه می باشد اما بدون استفاده از خاصیت مشخص کننده مکان هدف بدون استفاده است . به عنوان مثال برای ایجاد هایپرلینک روی عبارت click here (اینجا کلیک کنید) که باعث باز شدن صفحه index.htm می شود, کد می تواند به این صورت باشد :

کد:
<a href = "index.htm">click here</a>

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

مقایسه و معرفی نسخه های HTML :

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

• HTML4 : یک نسخه بسیار پایدار که به صورت جهانی پذیرفته شده و از خطاهای کوچک کد چشم پوشی می کند. وقتی سازگاری با تمام مرورگر ها مهم باشد, استفاده از HTML4 مناسب است .
• XHTML : یک نسخه بسیار سخت گیر و مبتی بر استاندارد HTML که با XML ایجاد شده است .
XHTML دارای کد مشابه HTML4 است بنابراین با مرورگرهای سازگار با HTML4 سازگار است .
• HTML5 : یک سری کد بازنگری شده که بر مبنای HTML4 ایجاد شده و سازگاری های جدیدی به آن اضافه شده اند . HTML5 بهبود های بسیار جالبی را در زمینه ایجاد برنامه های تحت وب و مولتی مدیا در اختیار کاربر قرار داده است که البته بسیاری از این موارد فراتر از این مطالب می باشند . اما از نظر کدنویسی , بزرگ ترین تفاوت این است که کدهای خاص جدیدی برای انواع متفاوتی از داده های اضافه شده اند که در نسخه های قبلی از کدهای کلی برای آن ها استفاده می شد . به عنوان مثال HTML5 دارای تگ های <audio> و <video> برای قرار دادن محتویات مولتی مدیا است در حالتی که HTML4 تمام انواع محتویات مولتی مدیا را با تگ <embed> قرار می داد . یک مرورگر خوب به صورت ایده آل تمام تگ ها و همه نسخه های HTML را پشتیبانی می کند زیرا باید همه نسخه های HTML توسط بازدیدکنندگان سایت قابل دیدن باشند. با این حال HTML5 یک استاندارد جدید است که همه مرورگر ها هنوز به طور کامل با آن تطبیق پیدا نکرده اند و به خصوص کاربران کامپیوترهای قدیمی تر معمولاً دارای نسخه های قدیمی تر مرورگر هایی هستند که با HTML5 سازگار نیستند .

چرا از HTML5 استفاده کنیم ؟

پاسخ کوتاه به این صورت است : شما باید از HTML5 استفاده کنید زیرا سرمایه گذاری برای آینده است . ظرف چند سال , HTML5 به استانداردی برای همه وب سایت ها تبدیل می شود.

پاسخ اندکی طولانی تر این است که HTML5 به شما اجازه می دهد تا کدهای بهتر و آسان تری را بنویسید . تکنولوژی صفحه پیشرفت زیادی داشته است که مهم ترین دلیل آن افزایش سرعت اینترنت کاربران است اما دلیل دیگر افزایش انتظار کاربر , طراح و برنامه نویسها از صفحات وب است مانند کنترل بیشتر روی قلم ها و طرح ها , ترسیم بهتر روی تجهیزات کوچک تر مانند تلفن های همراه تا تجهیزات بزرگ تر مانند مانیتورهای رومیزی, تصاویر بهتر , قابلیت برقراری ارتباط بهتر, ویدئو, صدا, انیمیشن و پشتیبانی از فرمت های فایل و تصویر مختلف. به دلیل این که اغلب مردم دارای اتصال سریعی هستند, دیگر مجبور نیستند تا مدت زیادی برای بارگذاری صفحات حاوی فایل های صوتی و ویدئوی بزرگ منتظر بمانند و به همین خاطر همه روزه سایت های بیشتر و بیشتری از محتویات صوتی و ویدئو استفاده می کنند.
HTML در اصل برای تحویل دادن آسان محتویات مولتی مدیا طراحی نشده است و به همین خاطر همه روزه سایت های بیشتری به سراغ زبان ها و تکنولوژی های دیگیری مانند جاوا اسکریپت و فلش می روند.


HTML5 تگ های جدید مهمی را اضافه کرده است که باعث می شود تا یکپارچه کردن صدا ویدئو و برنامه های کاربردی آسان تر و بهتر انجام شود. درباره این تگ های جدید در اینده صحبت می کنیم که در آن تگ های <audio>, <video>,<canvas> نیز وجود دارند .
HTML5 بعضی از تگ های قدیمی تر را پشتیبانی نمی کند . به عنان مثال یک روش قدیمی (قبل از HTML4) برای مشخص کردن یک قلم استفاده از تگ <font> بود. امروزه, اغلب طراحان از برگه های شیوه آبشاری برای تعریف قلم ها استفاده می کنند و بنابراین تگ <font> دیگر توسط اکثر برنامه نویسها استفاده نمی شود . HTML5 نیز آن را حذف کرده است .
یکی از بزرگ ترین چیزهایی که HTML5 حذف کرده است, توانایی ایجاد وب سایت های چند فریمی با دستورات <frame> و <frameset> است. هنوز هم می توانید سایت های با چند قسمت ایجاد کنید اما آن ها به خوبی توسط جدول ها و تقسیم کننده ها ایجاد می شوند .

منبع : learning.asarayan.com
 
  • Like
واکنش‌ها[ی پسندها]: bahramnik

درباره ما

  • خوش آمدید ؛ یه حسِ خوب یک انجمن است که شما می توانید در آن عضو شده از امکانات آن استفاده کرده و دوستان جدید پیدا کنید. این مجموعه دارای نظارت 24 ساعته بوده تا محیطی سالم را برای کاربران خود فراهم آورد،از کاربران انتظار می رود که با رعایت قوانین ما را برای رسیدن به این هدف یاری کنند.
    از طرف مدیر وب سایت:
    "همواره آرزو دارم که هربازدید کننده ای بعد از ورود به انجمن، با یه حسِ خوب اینجارو ترک کنه!"

منوی کاربر