فرادرسآموزش HTML — مجموعه مقالات مجله فرادرس
HTML اختصاری برای عبارت «زبان نشانه‌گذاری ابرمتن» (Hypertext Markup Language) است که به صورت استاندارد برای نشانه‌گذاری اسنادی مورد استفاده قرار می‌گیرد که در مرورگرهای وب نمایش پیدا می‌کنند. فناوری‌های دیگری از قبیل CSS و جاوا اسکریپت نیز به این منظور به کمک آن آمده‌اند. در این مقاله به جمع‌بندی مجموعه مقالات آموزش HTML مجله فرادرس می‌پردازیم.
مرورگرهای وب اسناد HTML را از یک وب‌سرور یا محل ذخیره لوکال دریافت کرده و آن‌ها را به صورت صفحه‌های وب چندرسانه‌ای رندر می‌کنند. HTML به توصیف ساختار معناشناختی یک صفحه وب می‌پردازد و سرنخ‌هایی برای شیوه نمایش ظاهری آن ارائه می‌کند.
عناصر HTML بلوک‌های تشکیل‌دهنده صفحه‌های HTML هستند. بدین ترتیب می‌توان تصویر و دیگر چیزها مانند فرم‌های تعاملی را در صفحه رندر کرد. HTML از طریق نمایش متن به صورت عناصر مختلف مانند عنوان، پاراگراف، لیست، لینک، گیومه و موارد دیگر، امکان ارائه یک ساختار معناشناختی را فراهم ساخته است. عناصر HTML به وسیله تگ‌ها شناسایی می‌شوند که درون علامت <> درج می‌شوند. برخی تگ‌ها مانند <img /> و <input /> مستقیماً محتوایی را در صفحه جای می‌دهند. بقیه تگ‌ها مانند <p> اطلاعاتی در مورد بخش‌های مختلف متن سند ارائه می‌کنند و می‌توانند شامل تگ‌های دیگر به عنوان عناصر فرعی باشند. مرورگرها تگ‌ها را نمایش نمی‌دهند بلکه از آن‌ها برای تفسیر محتوای صفحه بهره می‌گیرند.
HTML می‌تواند شامل برنامه‌هایی باشد که در زبان‌های اسکریپت‌نویسی از قبیل جاوا اسکریپت نوشته شده‌اند و بر رفتار و محتوای صفحه وب تأثیر می‌گذارند. گنجاندن CSS در صفحه‌های HTML موجب تعریف کردن ظاهر و لی‌آوت آن صفحه می‌شود. کنسرسیوم جهانی وب W3C که سابقاً نهاد مسئول نگهداری HTML و هم اینک نهاد مسئول نگهداری استانداردهای CSS است، از سال 1997 توسعه‌دهندگان را تشویق به استفاده از CSS به جای بهره‌گیری از ارائه HTML خام می‌کند.
ما در مجله فرادرس در طی ماه‌های اخیر سری مطالب آموزشی با موضوع HTML ارائه کرده‌ایم که فهرست آن‌ها به صورت زیر است. توجه کنید که این مطلب در چهار دسته کلی «معرفی HTML»، «امکانات چندرسانه‌ای HTML»، «جداول HTML» و «فرم‌های HTML» ارائه شده‌اند.
بخش اول: معرفی HTML
در نخستین بخش از این سری مطالب، به مبانی مقدماتی HTML پرداخته و عناصر، خصوصیت‌ها و همچنین دیگر اصطلاح‌های مهم که ممکن است شنیده باشید را توضیح می‌دهیم. همچنین شیوه سازمان‌دهی عناصر HTML، چگونگی سازمان‌دهی صفحه HTML و دیگر ویژگی‌های مهم زبان HTML را توضیح داده‌ایم. در این مسیر با برخی مفاهیم HTML نیز در عمل کار می‌کنیم تا انگیزه یادگیری شما را حفظ کنیم.
بخش head در سندهای HTML قسمتی است که هنگام بارگذاری صفحه در مرورگرهای وب نمایش نمی‌یابد. این بخش شامل اطلاعاتی مانند عنوان یا <title> صفحه، لینک به فایل‌های CSS، لینک به favicon-های سفارشی، و دیگر فراداده‌ها در ارتباط با HTML مانند نویسنده، کلیدواژه‌های مهم که سند را توصیف می‌کنند و موارد دیگر است. در این بخش از سری مقالات آموزش HTML همه موارد فوق و همچنین برخی موارد دیگر که به عنوان مقدمه‌ای برای کار با markup مورد نیاز هستند ارائه شده است.
یکی از وظایف اصلی HTML ایجاد ساختار و معنا برای متن است به طوری که مرورگر بتواند آن را به طرز صحیحی نمایش دهد. این مقاله به توضیح روش‌هایی می‌پردازد که HTML برای سازمان‌دهی متن در یک صفحه به کار می‌گیرد.
هایپرلینک مفهوم بسیار مهمی محسوب می‌شود. در واقع این هایپرلینک‌ها بودند که وب را به صورت امروزی که می‌بینیم درآورده‌اند. در این مقاله ساختار مورد نیاز برای ساخت یک لینک را معرفی کرده و بهترین رویه‌های ساخت لینک را مورد بررسی قرار داده‌ایم.
عناصر زیادی در HTML وجود دارند که به منظور قالب‌بندی پیشرفته متن به کار می‌آیند و در این نوشته مورد بررسی قرار گرفته‌اند. اگر چه اغلب این عناصر کمتر شناخته شده‌اند، اما با این حال، کسب اطلاع در مورد آن‌ها مفید است. در این مقاله با روش نشانه‌گذاری نقل‌قول‌ها، لیست‌های توصیفی، کد رایانه و دیگر متن‌های مرتبط، زیرنویس و بالانویس، اطلاعات تماس و مواردی دیگر از این دست آشنا خواهید شد.
در این بخش به بررسی سند و ساختار وب سایت در HTML پرداخته‌ایم. HTML علاوه بر این که به تعریف اجزای منفرد یک صفحه مانند پاراگراف یا تصویر کمک می‌کند، چند عنصر در سطح بلوک، مانند «هدر» (Header) یا «منوی ناوبری» (Navigation menu) نیز دارد که برای تعریف نواحی مختلف صفحه مورد استفاده قرار می‌گیرند. در این مقاله به بررسی روش طراحی ساختار یک وب‌سایت کوچک پرداخته و کد HTML مورد نیاز برای بازنمایی این ساختار را می‌نویسیم.
نوشتن کدهای HTML کار آسانی است، اما اگر مشکلی پیش بیاید و نتوانید بفهمید که خطا در کدام بخش از کد ایجاد شده است چطور؟ در این نوشته برخی از ابزارهایی را معرفی می‌کنیم که به دیباگ کدهای HTML و یافتن خطاها در آن‌ها کمک می‌کنند.
در این مقاله به عنوان آخرین نوشته از بخش اول راهنمای جامع HTML یک ارزیابی به صورت نشانه‌گذاری یک نامه ارائه شده است تا شما با اجرای این تمرین بتوانید آموخته‌های خود را در طی این بخش به آزمون بگذارید.
بخش دوم: امکانات چند رسانه‌ای HTML
در این بخش از سری مقالات آموزش جامع HTML در طی 5 مقاله به معرفی برخی امکانات غیر متنی HTML پرداخته‌ایم.
در آغاز، وب تنها از متن تشکیل یافته و واقعاً خسته‌کننده بود. خوشبختانه طولی نکشید که امکان درج تصاویر (و البته دیگر انواع محتوای جذاب) نیز درون صفحه‌های وب فراهم شد. انواع دیگری از فایل‌های چندرسانه‌ای نیز وجود دارند که باید در نظر بگیریم، اما منطقی است که بررسی خود را از عنصر ساده‌تر <img> آغاز کنیم که برای درج تصاویر ساده در صفحه وب استفاده می‌شود. در این مقاله به بررسی دقیق چگونگی استفاده از این عنصر، شامل مبانی کار، درج زیرنویس برای تصاویر در HTML با استفاده از <figure> و تفصیل جزییات ارتباط آن با تصاویر پس‌زمینه CSS می‌پردازیم.
در این بخش از سری مقالات راهنمای آموزش HTML شروع به افزودن محتوای ویدئویی و صوتی در سندهای HTML می‌کنیم. در این مقاله این کار را با استفاده از عناصر <video> و <audio> آغاز می‌کنیم و سپس با روش اضافه کردن زیرنویس و عنوان به ویدیوها نیز آشنا می‌شویم.
در این بخش با طرز کار جاسازی یا Embedding موارد مختلف از قبیل صوت و ویدئو در صفحه‌های وب آشنا خواهید شد. بدین ترتیب به بررسی عناصری می‌پردازیم که امکان جاسازی طیف گسترده‌ای از انواع محتوا را در صفحه‌های وب فراهم می‌سازند. این موارد شامل فناوری‌های مختلف جاسازی از جمله عناصر <iframe>،<embed> و <object> هستند. <iframe>-ها برای جاسازی صفحه‌های وب دیگر استفاده می‌شوند و دو مورد دیگر نیز برای جاسازی فایل‌های PDF،SVG و حتی Flash مورد استفاده قرار می‌گیرند. Flash فناوری است که روزهای آخر عمر خود را سپری می‌کند، اما کماکان در جاهای مختلف به چشم می‌خورد.
گرافیک‌های برداری در شرایط زیادی مفید واقع می‌شوند. این گرافیک‌ها فایل‌هایی با اندازه کوچک هستند که به راحتی می‌توانند افزایش مقیاس پیدا کنند، به طوری که وقتی روی آن‌ها زوم می‌کنید به صورت تار یا در اصطلاح «pixelate» (پیکسل پیکسل) درنمی‌آیند. در این مقاله روش افزودن گرافیک برداری به وب را توضیح می‌دهیم. هدف از این نوشته آشنایی با روش جاسازی یک تصویر (بُرداری) SVG در صفحه وب است.
در این مقاله در مورد مفهوم تصاویر واکنش‌گرا یا Responsive صحبت کرده‌ایم. تصاویر واکنش‌گرا به تصاویری گفته می‌شود که روی دستگاه‌های مختلف که اندازه‌های صفحه، وضوح تصویر و دیگر ویژگی‌های متفاوت دارند، به طرز مناسبی نمایش پیدا می‌کنند. همچنین با امکانات HTML برای پیاده‌سازی تصاویر واکنش‌گرا آشنا خواهیم شد. تصاویر واکنش‌گرا بخشی از طراحی وب واکنش‌گرا هستند.
بخش سوم: جداول HTML
در این بخش از طریق 2 مطلب با امکان درج جدول در صفحه‌های HTML آشنا خواهیم شد.
در این مقاله به بررسی جداول در HTML پرداخته‌ایم و با موارد کاملاً ساده‌ای مانند ردیف و سلول، عنوان، گسترش سلول به چند ردیف یا ستون و شیوه گروه‌بندی همه سلول‌ها در یک ستون برای استایل‌دهی آشنا خواهیم شد.
در این بخش برخی از قابلیت‌های پیشرفته‌تر جداول HTML مانند کپشن، جمع‌بندی و گروه‌بندی ردیف‌ها در عنوان جدول یا بخش‌های بدنه و فوتر را بررسی کرده‌ایم. همچنین بحث دسترس‌پذیری جداول HTML برای کاربران دچار نقص بینایی را بیشتر مورد بررسی قرار می‌دهیم.
بخش چهارم: فرم‌های HTML
در این بخش از سری مقالات آموزش جامع HTML در طی 10 مقاله با جوانب مختلف فرم‌های HTML آشنا می‌شویم.
در این مقاله، به بررسی روش مقدماتی ساخت فرم HTML پرداخته و طراحی یک فرم ساده، پیاده‌سازی آن با استفاده از عناصر صحیح HTML و افزودن مقداری استایل‌های مقدماتی CSS را مورد بررسی قرار داده و در مورد روش ارسال داده‌ها به سرور نیز صحبت کرده‌ایم.
در این بخش به بررسی برخی عناصر پرداخته‌ایم که برای ساختاردهی فرم‌های HTML کاربرد دارند. انعطاف‌پذیری فرم‌های HTML آن‌ها را به یکی از پیچیده‌ترین ساختارهای HTML تبدیل ساخته است. با استفاده از عناصر اختصاصی فرم و خصوصیت‌های آن‌ها می‌توان هر نوع فرم مقدماتی را ساخت. استفاده از ساختار صحیح در زمان ساخت فرم HTML تضمین می‌کند که فرم هم قابل استفاده و هم دسترس‌پذیر باشد.
در این بخش از سری مقالات آموزش HTML به بررسی دقیق کارکرد ویجت‌های مختلف فرم می‌پردازیم و گزینه‌هایی که برای گردآوری انواع داده‌ها وجود دارند را مورد بررسی قرار می‌دهیم. این بخش به نوعی یک راهنمای جامع است و همه ویجت‌های نیتیو فرم را شامل می‌شود.
در این مقاله به بررسی اتفاقاتی می‌پردازیم که در جریان تحویل یک فرم از سوی کاربر رخ می‌دهد. در این نوشته بررسی خواهیم کرد که در زمان ارسال فرم HTML داده‌های آن به کجا می‌روند و زمانی که به مقصد رسیدند چگونه می‌توانیم آن‌ها را مدیریت کنیم. همچنین به بررسی برخی دغدغه‌های امنیتی مرتبط با ارسال داده‌های فرم می‌پردازیم.
اعتبارسنجی فرم به ما کمک می‌کند که مطمئن شویم همه کاربران، فرم‌هایمان را به شیوه‌ای صحیح پر کرده‌اند و همچنین اطمینان می‌یابیم که داده‌های تحویل‌شده در اپلیکیشن ما با موفقیت استفاده خواهند شد. در این مقاله با مفاهیم مقدماتی و مثال‌هایی از اعتبارسنجی فرم آشنا می‌شویم.
موارد زیادی وجود دارند که ویجت‌های آماده فرم HTML کافی نیستند. اگر می‌خواهید استایل‌بندی پیشرفته‌ای را اجرا کنید یا برخی ویجت‌ها مانند <select> داشته باشید، یا اگر می‌خواهید رفتارهای سفارشی داشته باشید چاره‌ای به جز ساخت ویجت‌های سفارشی فرم خود را نخواهید داشت. در این مقاله، به بررسی روش ساخت چنین ویجت‌هایی می‌پردازیم.
در این مقاله به بررسی روش‌های ارسال فرم HTML از طریق جاوا اسکریپت پرداخته‌ایم. بدین ترتیب با روش آماده‌سازی یک درخواست HTML برای ارسال از طریق جاوا اسکریپت آشنا می‌شویم.
وب جای خشنی برای توسعه‌دهندگان محسوب می‌شود و بدترین مورد هم مرورگرهای قدیمی هستند. باید پذیرفت که وقتی از مرورگرهای قدیمی صحبت می‌کنیم در عمل نسخه‌های قدیمی اینترنت اکسپلورر را در نظر داریم، اما محدود به آن نمی‌شود. یک نسخه یک سال پیش فایرفاکس هم مرورگری قدیمی محسوب می‌شود. همچنین در دنیای موبایل که سیستم عامل و مرورگر بسیار کندتر به‌روزرسانی می‌شوند، این مشکل تشدید می‌شود. بسیاری از گوشی‌های اندروید و یا آیفون وجود دارند که مرورگرهای اولیه خودشان را حفظ کرده‌اند و هرگز به‌روزرسانی نشده‌اند. این‌ها نیز مرورگرهای قدیمی محسوب می‌شوند. در این مقاله به بررسی روش کار با فرم‌های HTML در مرورگرهای قدیمی می‌پردازیم.
در این مقاله با شیوه استفاده از CSS روی فرم‌های HTML برای زیباتر ساختن آن‌ها آشنا می‌شویم. البته این کار ممکن است کمی پیچیده باشد. ویجت‌های فرم به دلایل تاریخی و فنی به خوبی با CSS همکاری نمی‌کنند. به دلیل همین دشواری‌ها، توسعه‌دهندگان زیادی تلاش می‌کنند که ویجت‌های HTML خاص خود را بسازند و روی ظاهر و حس آن‌ها کنترل کاملی داشته باشند. با این حال، طراحان وب با استفاده از بسیاری از مرورگرهای مدرن کنترل هر چه بیشتری روی طراحی عناصر فرم پیدا کرده‌اند.
در این مقاله به بررسی شیوه استفاده از CSS در فرم‌های HTML جهت استایل دادن به ویجت‌های مختلف فرم که سفارشی‌سازی دشواری دارند می‌پردازیم. در بخش قبلی دیدیم که فیلدهای متنی و دکمه‌ها به خوبی با CSS کار می‌کنند. در این مقاله به بخش دشوارتر یعنی استایل‌بندی پیشرفته فرم‌های HTML می‌پردازیم.
آموزش HTML و سخن پایانی
بدین ترتیب در این 25 مقاله به طور جامع با «زبان نشانه‌گذاری اَبَرمتن» یا HTML آشنا می‌شوید.
HTML دارای نسخه‌های مختلفی است، HTML 2 در تاریخ 24 نوامبر 1995 منتشر شده است. نسخه 3 HTML در 14 ژانویه 1997 معرفی شد. نسخه 4 HTML در مراحل مختلف از سال 1997 تا 2000 معرفی شد. بالاخره آخرین نسخه کنونی HTML یعنی نسخه 5 در سال 2014 عرضه شده است. امیدواریم با مطالعه این مجموعه مقالات بتوانید آشنایی خوبی با این زبان به دست آورید.
اگر این مطلب برای شما مفید بوده است، آموزش‌های زیر نیز به شما پیشنهاد می‌شوند:
- مجموعه آموزش‌های طراحی سایت با HTML و CSS
- آموزش پروژه محور HTML و CSS
- مجموعه آموزش‌های جاوا اسکریپت
- ۵ گام برای درک کدهای پایه HTML – آموزش مقدماتی
- HTML و هر آنچه باید پیش از شروع یادگیری آن بدانید — راهنمای مقدماتی و کاربردی
==
