توضیحات
در دورههای آموزش HTML به خوبی متوجه خواهید شد که HTML به عنوان یک زبان نشانهگذاری فوق متن محسوب میشود. HTML مخفف عبارت " Hyper Text Markup Language " است. بخشهای مختلفی که توسط این زبان نشانهگذاری میشوند به کمک " تگها " از یکدیگر جداسازی میشوند. تگها دارای کاربردهای مختلف هستند که به مرورگر اعلام میکنند هر صفحه دارای چه عناصری است و نحوه نمایش آن چگونه خواهد بود. آموزش HTML با " باورژن " به شما کمک میکند تا اجزای مختلف این زبان شامل تگها، فرمها، ساختار و... را بشناسید.
HTML چیست؟
HTML از پایهترین مفاهیمی است که برای پا نهادن به حرفه طراحی سایت باید یاد بگیرید. در واقع میتوان گفت اولین چیزی که باید در گوگل سرچ کنید آموزش HTML است. HTML یک زبان نشانهگذاری است. شاید عنوان زبان برنامهنویسی HTML را شنیده باشید. اما مفهومی تحت این عنوان وجود ندارد. همانطور که گفتیم با عنوان زبان نشانهگذاری روبرو هستیم.
سوال: فرق بین زبان برنامهنویسی با زبان نشانهگذاری چیست؟
در برنامهنویسی شما با استفاده از مفاهیمی مثل فانکشنها و کنار هم چیدن یکسری منطق کارهایی مثل محاسبه قیمت کالا، ثبتنام کاربر و ... را انجام میدهید. ولی در زبان نشانهگذاری با مفاهیمی از جمله تگها، زیرساختی برای ارائه محتوا ارائه میکنید.
مثلا محتوایی دارید که مرورگر باید آنرا به عنوان پاراگراف بشناسد. برای اینکار متن خود را داخل تگ P قرار میدهید.
HTML با استفاده از تگهایی که تعریف شده است، محتوا را برای مرورگر نشانهگذاری میکند. در واقع این نشانهگذاری را میتوان معنادار کردن محتوا برای مرورگر دانست. ممکن است عناوینی مانند عنصر، المان، برچسب یا المنت را بشنوید. تمامی این موارد یک مفهوم را دارند.
آیا دوره html برای طراحی سایت ضروری است؟
همان طور که میدانید آموزش HTML برای افرادی که قصد ورود به دنیای طراحی سایت را دارند امری ضروری محسوب میشود. زیرا شناخت مهمترین زبانهای برنامهنویسی برای این افراد از اهمیت زیادی برخوردار است. قبل از اینکه به جوانب مختلف آموزش HTML بپردازیم بهتر است اشارهای به تاریخچه آن داشته باشیم. زبان HTML یا زبان نشانهگذاری برای نخستین بار در سال ۱۹۹۰ خلق شد و به منظور طراحی سایتهایی با ساختار بسیار ساده و ابتدایی مورد استفاده قرار گرفت. به مرور زمان قابلیتهای بیشتری به این زبان اضافه شد و در نهایت در سال ۲۰۱۰ با ۵HTML که تغییرات زیادی در آن رخ داده بود مواجه شدیم.
اگر با دنیای طراحی وب سایت آشنا باشید به خوبی میدانید طراحی ریسپانسیو به چه معناست و چه اهمیتی دارد. به بیانی ساده باید بگوییم که منظور از طراحی ریسپانسیو یا واکنش گرا این است که وب سایت نه تنها درمانیتور کامپیوتر و لپ تاپ، بلکه در نمایشگر سایر دستگاههای هوشمند مانند تلفن همراه و تبلت نیز به خوبی نشان داده شود. پس میتوان نتیجه گرفت که طراحی ریسپانسیو یا واکنش گرا به هر کدام از دستگاههای هوشمند، واکنش مخصوص به آن را نشان میدهد. در بهینهسازی وب سایتها یکی از مهمترین کارهایی که باید انجام داد این است که به کمک زبانهای نشانهگذاری مانند HTML بتوانیم آن را واکنش گرا کنیم.
آموزش html مناسب برای چه افرادی است؟
افرادی که تمایل دارند وارد حوزه برنامهنویسی و طراحی وب سایت شوند باید با جوانب مختلف این حرفه آشنا باشند. علاوه بر شناخت زبانهای برنامهنویسی باید نیازهای مشتریان را بشناسند و توانایی آنالیز آنها را داشته باشند. تهیه یک طرح جامع از سایت مورد نظر و تطابق آن با اصولی و قواعد هدایت کاربر یکی دیگر از مواد مهم در این حوزه محسوب میشود. افرادی که برنامهنویسی میکنند باید به خوبی با سیستمهای مدیریت محتوای مختلف مانند وردپرس آشنا باشند. یک تصور اشتباه که در بین تازه کارها وجود دارد این است که با استفاده از وردپرس دیگر نیازی به یادگیری و گذراندن آموزشهایی مانند دوره HTML ندارند. در صورتی که این باور کاملاً اشتباه است. زیرا شما برای توسعه وب سایت خود باید مهارتهای مختلفی داشته باشید که مهمترین آنها یادگیری زبان 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. بیشتر برای صفحات وب استاتیک استفاده میشود. برای عملکرد داینامیک، ممکن است لازم باشد از JavaScript یا یک زبان بکاند مانند PHP استفاده کنید.
2. به کاربر اجازه نمیدهد منطق را پیادهسازی کند. در نتیجه همه صفحات وب باید جداگانه ایجاد شوند. حتی اگر از المانهای مشابه استفاده کنند. به عنوان مثال برای تمامی صفحات داخلی سایت باید هدر و فوتر مجزا ایجاد کنید.
3. برخی از مرورگرها با سرعت پایینی با فیچرهای جدید سازگاری پیدا میکنند.
4. پیش بینی رفتار مرورگر گاهی اوقات دشوار است. به عنوان مثال اکثر مواقع مرورگرهای قدیمی تگهای جدیدتر را پشتیبانی نمیکنند. -
برای یادگیری html به چه ابزارهایی نیاز داریم؟
- شما به عنوان یک برنامهنویس و فردی که قصد طراحی وب سایتهای مختلف را دارد باید دارای ابزارهایی مانند کامپیوتر، اینترنت، فضای مناسب، ابزارهای کدنویسی، مرورگر و کامپایلر باشد. در ادامه به بررسی هر کدام از این ابزارها اشاره خواهیم کرد.
-
کامپیوتر
- در واقع کامپیوتر به عنوان مهمترین و اصلیترین ابزار برنامهنویسی مطرح میشود. زیرا بدون وجود آن نمیتوان کاری انجام داد. استفاده از لپ تاپ یا کامپیوترهای رومیزی فرقی ندارد. موضوعی که باید آن را جدی بگیرید این است که سیستم عامل شما باید از آخرین ورژن بهرهمند باشد. در حال حاضر سیستم عاملهای قابل استفاده برای طراحی سایت ویندوز ۷، ۸ و ۱۰ هستند.
-
اینترنت
- هر کد بعد از نوشته شدن باید اجرا شود. برای اجرا و نمایش دادن کدها نیاز به اینترنت دارید. سرعت اینترنت موضوع مهمی است که نباید آن را نادیده بگیرید. روشهای متنوعی نیز برای اتصال به دنیای اینترنت وجود دارد که میتوانید با توجه به شرایط خود یکی از آنها را انتخاب کنید.
-
فضای مناسب برای کدنویسی
- منظور از فضای مناسب برای کدنویسی، فضایی است که بتوانید کدهای مورد نظر را با پسوند در آن ذخیره کنید تا هر زمان که بخواهید قادر به اجرای آنها باشید. در حال حاضر بهترین ابزار برای کدنویسی notepad و word است که میتوان برای ذخیره کدها از پسوندهایی مانند. html و. xhtml استفاده کرد. این ابزارها برای افراد مبتدی مناسب است. اما اگر شما به عنوان یک فرد حرفهای به دنبال ابزارهای پیشرفته هستید میتوانید از IDE استفاده کنید. این ابزار قابلیتهای مختلفی مانند رنگی کردن قسمتهای مختلف کد، بهبود خوانایی کد، نمایش ارورها، کمک به سرعت در کدنویسی و... را در اختیار شما قرار میدهد. در آموزش HTML ابزارهای متناسب برای یادگیری و اجرای آن نیز توضیح داده خواهد شد.
-
مرورگرها
- تمام وب سایتها در مرورگر نمایش داده میشوند. پس بعد از نوشتن کد باید آنها را در محیطهایی مانند مرورگر اجرا کنید. اگر کدهای نوشته شده را در ابزارهای مختلف مانند notepad، word یا IDE نوشته باشید و پسوند مناسب برای آن قرار داده باشید میتوانید آنها را با مرورگرهای مختلف از جمله Google Chrome، Firefox، Opera و... باز کنید.
-
چرا دوره آموزش HTML باورژن؟
- همانطور که ابتدای بحث گفتیم از اولین گامها برای یادگیری طراحی وبسایت، تسلط بر HTML است. به همین دلیل ما در دوره آموزش
- HTML وظیفه خود دانستیم تا این زبان نشانهگذاری را به همراه جزئیات تدوین و منتشر کنیم.
مطمئنا با کمی وقتگذاشتن، دورههای زیادی را در سطح اینترنت به صورت رایگان و پولی پیدا خواهید کرد. مرددشدن بین انتخاب دورهها امری طبیعی است. ما در باورژن یک وجه تمایز بسیار پراهمیت داریم و آن موجزگویی است. مدرس دورههای آموزشی باورژن تمامی مفاهیم را به صورت کاملا عملی، مختصر و البته مفید و کاربردی توضیح داده است. در این دوره آموزش HTML مبنای تلاش بر این بوده است که با دوری از گزافگویی و شاخوبرگ دادن بیمورد به مباحث، اصل مطلب را در کوتاهترین حالت ممکن توضیح دهیم.
یکی از مزایای این کار سرعت یادگیری است. خیلی زود وارد بخش عملیاتی شده و دست به کد میشوید و با یادگرفتن و اجرای کدها، انگیزه بیشتری برای ادامه یادگیری خواهید داشت.
چه بسا دورههای آموزشی که به دلیل طولانیبودن کنار گذاشتهایم. این کنارگذاشتن به معنای پایینبودن سطح علمی دوره نیست. بلکه مشغلههای زندگی امروزه مجال صرف این حجم زمان برای آموزش را نمیدهد. پس اصل کمگوی و گزیدهگوی چون در جناب نظامی گنجوی را مبنای آموزش قرار دادیم تا در سریعترین زمان ممکن به نتیجه مطلوب برسید.
جلسات دوره
-
درس: 1مقدمه
-
درس: 2ساختار
-
درس: 3تگها
-
درس: 4فرمها