دوره رایگان HTML 5ویدیو آموزشی
موضوعات داغ

دوره آموزش ۵ HTML جلسه ۱

دوره ویدیویی اموزش 5 HTML ارئه شده توسط تیم زتاتک

به زبان ساده، یک صفحه وب (Web Page) یا سند (HTML (HTML Document یک فایل متنی ساده است که با استفاده از (Hypertext Markup Language (HTML  یا زبان علامت گذاری فرامتنی نوشته شده است تا با فرمت ها و قالب های زیبا درون یک مرورگر نمایش داده شوند. در این جا معنی HTML را به صورت کلمه به کلمه می بینید.
  • Hypertext: متنی که وقتی روی آن کلیک می کنید از یک سند به یک سند دیگر میروید. این توانایی یک صفحه وب برای ایجاد لینک (ارتباط) به یک صفحه وب دیگر است.
  • Markup:  تگ (Tag با برچسب) هایی که چیدمان و قالب گرافیکی را روی یک متن ساده اعمال می کنند. به عبارت دیگر، متن ساده با تگها “علامت گذاری” (Markup) میشود.
  • Language:  نشان دهنده این است که HTML به عنوان یک زبان برنامه نویسی در نظر گرفته میشود.

وقتی مردم زبان برنامه نویسی کامپیوتر را در نظر می گیرند، معمولا نوشتن یک برنامه کامپایل شده را به خاطر می آورند. یک زبان برنامه نویسی کامپایل شده (Compiled) کد برنامه نویسی که توسط انسان قابل خواندن است را از طریق یک ابزار به یک فایل اجرایی (که معمولا دارای پسوند exe. یا com در ویندوز می باشد) تبدیل کرده و سپس آن را به کاربران می دهند. اما HTML یک زبان برنامه نویسی ترجمه ای (Interpreted) است. یعنی برنامه با قالبی به کاربر داده می شود که توسط انسان قابل خواندن است و برنامه ای که آنرا باز می کند، چگونگی اجرا را کنترل می نماید. کد HTML برای صفحات وب درون فایلها قرار می گیرد. هر بار که مرورگر وب شما یک صفحه وب را باز می کند. کد HTML درون فایل را پردازش کرده و نتیجه نهایی را به شما نشان می دهد

آشنایی با تگ های HTML

کد درون یک فایل HTML حاوی متنی است که درون تگها (Tags) قرار می گیرد. این تگها نشان دهنده جایی هستند که یک قالب بندی (فرمت) باید اعمال شود، و چگونگی ظاهر شدن چیدمان عناصر را تعیین می کنند و به عنوان مثال مشخص می کنند که یک تصویر باید در یک مکان خاص ظاهر شود. به عنوان مثال فرض کنید که می خواهید یک عبارت خاص به صورت ایتالیک ظاهر شود مانند این:

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 باید نمایش داده شود.

تگهای زیادی هستند که از خاصیت ها استفاده می کنند که این خاصیت ها می توانند دلخواه یا لازم باشند. وقتی یک بازدید کننده سایت روی یک هایپرلینک کلیک می کند، مرورگر وب صفحه مشخص شده توسط هایپرلینک را باز کرده و یا به قسمت تعیین شده توسط هایپرلینک در همان صفحه می رود (یعنی به یک”بوکمارک”).

تگ برای یک هایپرلینک به صورت <a> است که یک تگ دو طرفه می باشد اما بدون استفاده از خاصیت مشخص کننده مکان هدف بدون استفاده است. به عنوان مثال برای ایجاد یک هایپرلینک روی عبارت Click Here (اینجا کلیک کنید) که باعث باز شدن فایل index.html می شود، کد می تواند به این صورت باشد:

<a href=”index.htm”>Click Here</a>

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

آشنایی با CSS

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

برای اعمال یک تغییر روی کل سایت، طراح باید همه ۲۰۰ صفحه را یک به یک تغییر میداد. نسخه های بعدی HTML با پشتیبانی از برگه های شیوه آبشاری (Cascading Style Sheets) این مشکل را حل کردند. همانند شیوه هایی که در برنامه های واژه پرداز مورد استفاده قرار می گیرند، طراحان وب از برگه های شیوه آبشاری در یک سند شیوه جداگانه برای دادن فرمت به یک نوع تگ خاص استفاده کرده و سپس آن شیوه را روی چند صفحه اعمال می کنند. آیا لازم است که یک شیوه را تغییر دهید؟ کافی است که تنها برگه شیوه را تغییر دهید، تغییرات شما به صورت خودکار روی تمام صفحات اعمال می شوند. با این که می توانید با استفاده از روش های قدیمی تر از فرمت های مختلف روی استاد خود استفاده کنید اغلب طراحان وب روی برگه های شیوه آبشاری تکیه می کنند و XHTML نیز از شما همین را می خواهد. در

انتخاب یک نسخه HTML

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

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

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

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

کدهایی که ما در این آموزش ویدیویی استفاده می کنیم، بر مبنای HTML5 هستند.

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

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

HTML5 تگ های جدید مهمی را اضافه کرده است که باعث می شود تا یکپارچه کردن صداه ویدئو و برنامه های کاربردی آسان تر و بهتر انجام شود.

HTML5 بعضی از تگهای قدیمی تر را پشتیبانی نمی کند. به عنوان مثال یک روش قدیمی (قبل از HTML4) برای مشخص کردن یک قلم استفاده از تگ <font> بود. امروزه، اغلب طراحان از برگه های شیوه آبشاری برای تعریف قلم ها استفاده می کنند و بنابراین تگ <font> دیگر توسط اکثر برنامه نویسها استفاده نمی شود. HTML5 نیز آن را حذف کرده است.

یکی از بزرگترین چیزهایی که HTML5 حذف کرده است، توانایی ایجاد وب سایتهای چند فریمی با دستورات <frame> و <frameset> است. هنوز هم می توانید سایت هایی با چند قسمت ایجاد کنید اما آنها به خوبی توسط جدول ها و تقسیم کننده ها ایجاد می شوند. تقسیم کننده ها یک روش جدیدتر بوده و اکثر طراحان حرفه ای وب آن را ترجیح میدهند.

حداقل سیستم مورد نیاز 

برای استفاده از زبان HTML حداقل سیستمی وجود ندارد؛ می توانید این کار را با هر برنامه ویرایش متن و پا هر نوع کامپیوتر و سیستم عاملی انجام دهید. این زیبایی HTML است! برای آزمایش کار خود، می توانید از یک مرورگر وب سازگار با HTML5 استفاده کنید. گوگل کروم و فایرفاکس و اینترنت اکسپلورر و به خوبی از HTML5 پشتیبانی می کنند.

 


برای دریافت دیگر جلسات این دوره می توانید به کانال تلگرام زتاتک مراجعه کنید و با جستجو عبارت ” دوره آموزشی HTML5 به صورت 0 تا 100 ” از دیگر جلسات دوره بهره مند شوید! (هر روز یک جلسه این دوره در سایت قرار داده می شود)
برچسب ها

علی رحمانی

سازنده سایت و کانال زتاتک

پاسخی بگذارید

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

بستن