دوره‌ها

دوره آموزش HTML


مجتبی پاکزاد مجتبی پاکزاد

HTML چیست؟


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

سوال: فرق بین زبان برنامه‌نویسی با زبان نشانه‌گذاری چیست؟

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

HTML با استفاده از تگ‌هایی که تعریف شده است، محتوا را برای مرورگر نشانه‌گذاری می‌کند. در واقع این نشانه‌گذاری را می‌توان معنادار کردن محتوا برای مرورگر دانست. ممکن است عناوینی مانند عنصر، المان، برچسب یا المنت را بشنوید. تمامی این موارد یک مفهوم را دارند.

تاریخچه 

این زبان توسط تیم برنرز لی، فیزیکدان موسسه تحقیقاتی CERN در سوئیس ابداع شد. او ایده یک سیستم hypertext یا ابرمتنی مبتنی بر اینترنت را ارائه داد.

Hypertext به چه معناست؟

Hypertext به معنای متنی است، شامل رفرنس‌ها یا لینک‌هایی به سایر متون که مخاطبان می‌توانند بلافاصله به آن دسترسی پیدا کنند.

او اولین نسخه را در سال 1991 منتشر کرد، که متشکل از 18 تگ بود. از آن زمان تا به امروز در هر نسخه جدید از این زبان، تگ‌ها و اتریبیوت‌های جدید اضافه شد. طبق آمار در حال حاضر 140 تگ در این زبان وجود دارد. البته بعضی از آن‌ها منسوخ شده‌اند و توسط مرورگرهای فعلی مثل کروم و فایرفاکس پشتیبانی نمی‌شوند.
به دلیل افزایش سریع محبوبیت، اکنون HTML یک استاندارد وب رسمی محسوب می‌شود که خصوصیات آن توسط کنسرسیوم شبکه جهانی وب  یعنی W3C حفظ و توسعه می‌یابد. می‌توانید آخرین وضعیت این زبان نشانه‌گذاری را در در وب سایت W3C بررسی کنید.
بزرگترین ارتقا و بروزرسانی این زبان، معرفی HTML5 در سال 2014 بود. در این نسخه چندین تگ معنایی جدید اضافه شد که معنی محتوای خود را به خوبی نشان می‌دهند. تگ‌هایی مانند <article>و <header>, <footer> از جمله تگ‌هایی معنایی جدید بودند.

نحوه عملکرد 

داکیومنت‌های HTML فایل‌هایی هستند که با پسوند html. یا htm. ذخیره می‌شوند. شما می‌توانید با استفاده از هر مرورگری مثل کروم، سافاری، فایرفاکس این فایل‌ها را مشاهده کنید. مرورگر فایل را می‌خواند و محتوای آن را به مخاطب ارائه می‌دهد، تا کاربران اینترنت بتوانند محتوا را مشاهده کنند.
معمولاً یک وب‌سایت استاندارد شامل چندین صفحه HTML است. به عنوان مثال: صفحه اصلی، صفحه درباره ما، صفحه تماس با ما همه دارای داکیومنت‌های جداگانه هستند.
هر صفحه HTML از مجموعه‌ای از تگ‌ها تشکیل شده است. تگ‌هایی که می‌توان آن‌ها را به عنوان عناصر سازنده صفحات وب دانست. تگ‌ها سلسله مراتبی را ایجاد می‌کنند که باعث می‌شود مطالب را در سکشن‌ها، پاراگراف‌ها، هدینگ‌ها و سایر بلوک‌های محتوایی ساختاردهی کنیم.
اکثر المان‌های این بان نشانه‌گذاری، دارای یک بخش برای بازکردن و یک بخش برای بستن تگ هستند. یعنی برای استفاده از آن‌ها باید به صورت <tag> .... </tag> عمل کنیم.

 

نگاهی اجمالی به انواع تگ‌ها

تگ‌ها در این زبان نشانه‌گذاری دو نوع هستند: block-level و inline
تگ‌های block-level تمام فضای بلاک را اشغال می‌کنند و همیشه یک خط جدید در داکیومنت ایجاد می‌کنند. هدینگ‌ها و پاراگراف‌ها یک مثال بارز از این نوع تگ‌ها هستند.
در مقابل تگ‌های عناصر inline فقط به اندازه فضای مورد نیاز خود، فضا اشغال می‌کنند و خط جدیدی را در صفحه شروع نمی‌کنند. لینک‌ها نمونه‌های خوبی از تگ‌های inline هستند.
اگر این مطالب برای شما کمی گنگ است اصلا نگران نباشید در دوره آموزش HTML، به‌طور کامل به همراه مثال توضیحات لازم داده می‌شود.

تکامل 

از همان ابتدای کار این زبان نشانه‌گذاری یک سیر تحول باورنکردنی را تجربه کرده است. W3C دائماً نسخه‌ها و به‌روزرسانی‌های جدید را منتشر می‌کرد. در حالی که نقاط عطف این تحولات نام‌های مشخصی دارند یعنی HTML4 و HTML5، اما چه تفاوتی بین این دو ورژن وجود دارد؟
HTML4 که این روزها آن‌را که با HTML می‌شناسیم، در سال 1999 منتشر شد. آخرین نسخه اصلی آن در سال 2014 و با نام HTML5 منتشر شد. در این نسخه فیچرهای جدید به زبان نشانه‌گذاری اضافه شد. یکی از ویژگی‌های منحصر‌به‌فرد آن پشتیبانی native از فایل صوتی و تصویری است. به جای استفاده از Flash Player، می‌توانیم به‌راحتی و با استفاده از تگ‌های جدید <audio> </audio> و <video> </video> فیلم‌ها و فایل‌های صوتی را در صفحات وب خود جاسازی کنیم. 
HTML5 نیز چند پیشرفت در حوزه اصلی خود یعنی تگ‌ معنایی را هم به‌همراه داشته است. تگ‌های جدید معنایی، معنای محتوا را به مرورگرها اطلاع می‌دهند که هم به نفع خوانندگان است و هم به نفع موتورهای جستجو.
محبوب‌ترین تگ‌های معنایی موارد زیر هستند.

<footer></footer>
<header></header>
<aside></aside>
<section></section>
<article></article>

نقاط قوت و ضعف 

مانند اکثر دستاوردها، HTML هم نقاط ضعف و قوتی دارد که در ادامه آن‌ها را مشاهده می‌کنید.

نقاط قوت

1. یک زبان پرکاربرد با منابع زیاد و جامعه عظیم 
2. به طور طبیعی در هر مرورگر وب اجرا می‌شود
3. اپن‌سوررس و کاملا رایگان
4. کدهای تمیز و ثابت
5. استانداردهای رسمی وب توسط کنسرسیوم شبکه جهانی وب W3C حفظ می‌شود
6. به‌راحتی با زبان‌های backend مانند PHP و Node.js قابل ادغام است

نقاط ضعف

  1. 1. بیشتر برای صفحات وب استاتیک استفاده می‌شود. برای عملکرد داینامیک، ممکن است لازم باشد از JavaScript یا یک زبان بک‌اند مانند PHP استفاده کنید.
    2. به کاربر اجازه نمی‌دهد منطق را پیاده‌سازی کند. در نتیجه همه صفحات وب باید جداگانه ایجاد شوند. حتی اگر از المان‌های مشابه استفاده کنند. به عنوان مثال برای تمامی صفحات داخلی سایت باید هدر و فوتر مجزا ایجاد کنید.
    3. برخی از مرورگرها با سرعت پایینی با فیچرهای جدید سازگاری پیدا می‌کنند.
    4. پیش بینی رفتار مرورگر گاهی اوقات دشوار است. به عنوان مثال اکثر مواقع مرورگرهای قدیمی تگ‌های جدیدتر را پشتیبانی نمی‌کنند.
  2. چرا دوره آموزش HTML باورژن؟

  3. همانطور که ابتدای بحث گفتیم از اولین گام‌ها برای یادگیری طراحی وب‌سایت، تسلط بر HTML است. به همین دلیل ما در دوره آموزش
  4. HTML وظیفه خود دانستیم تا این زبان نشانه‌گذاری را به همراه جزئیات تدوین و منتشر کنیم.

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

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

درس‌ها

1
مقدمه
08:00
2
ساختار
40:22
3
تگ‌ها
36:36
4
فرم‌ها
32:48