زبان برنامه نویسی HTML چیست؟ | راهنمای یادگیری و شروع به کار | به زبان ساده

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

آیا HTML زبان برنامه نویسی است؟

لازم است به این مسئله توجه داشت که HTML‌ زبان برنامه نویسی نیست، بلکه یک زبان نشانه‌گذاری (Markup) است که ساختار محتوا را تعیین می‌کند. HTML دارای منطق برنامه نویسی نیست و عاری از عبارات شرطی مثل If و Else‌ است. در HTML‌ نمی‌توان متغیر تعریف کرد و تابع نوشت. امکان مدیریت رویدادها یا انجام وظایف در HTML وجود ندارد. با HTML به هیچ وجه نمی‌توان داده‌ها را تغییر داد یا آن‌ها را ویرایش کرد.

فیلم آموزش اچ تی ام ال – طراحی وب با HTML – مقدماتی در فرادرس

کلیک کنید

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

زبان نشانه گذاری HTML

HTML‌ یک نوع زبان نشانه گذاری است. یعنی HTML داده‌ها را محصور می‌کند یا آن‌ها را در داخل تگ‌های (برچسب‌های) HTML «علامت‌گذاری» می‌کند. این نشانه‌گذاری، هدف داده را تعریف و تفسیر می‌کند. سپس، مرورگر وب کدهای HTML‌ را می‌خواند و این کدها محل مؤلفه‌هایی مثل عنوان‌ها، پاراگراف‌ها، لینک‌ها و سایر موارد را برای مرورگر مشخص می‌کنند. در واقع، HTML داده را برای مرورگر توصیف می‌کند تا مرورگر وب بتواند داده‌ها را به شکل مناسبی نمایش دهد.

فیلم آموزش طراحی سایت با HTML و CSS ویژه کودکان و نوجوانان در فرادرس

کلیک کنید

به همراه HTML‌ و برای تکمیل آن، می‌توان از فناوری‌هایی مانند CSS و زبان‌های اسکریپت‌نویسی مثل جاوا اسکریپت برای ایجاد وب‌سایت‌ها کمک گرفت. اما، با توجه به اینکه استفاده از عبارت «زبان برنامه نویسی HTML» در میان عموم رایج است و توسط اکثر افراد از این اصطلاح استفاده می‌شود، در این مطلب نیز همین عبارت به کار برده شده است.

زبان برنامه نویسی HTML چیست ؟

زبان برنامه نویسی HTML در واقع زبان نشانه‌گذاری استاندارد برای ایجاد مستنداتی است که در یک مرورگر وب نمایش داده می‌شوند.‌ HTML کدی است که برای ساختاردهی به محتوا در یک صفحه وب استفاده می‌شود. برای مثال، محتوا ممکن است در قالب یک دسته از پاراگراف‌ها، لیست‌های نشانه‌دار (Bullet Points) یا استفاده از تصاویر و جداول داده باشد.

فیلم آموزش اچ تی ام ال – طراحی وب با HTML – مقدماتی در فرادرس

کلیک کنید

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

HTML مخفف چیست ؟

HTML‌ سرنامی برای عبارت HyperText Markup Language به معنی زبان نشانه‌گذاری ابرمتن است. مفهوم دو کلمه HyperText و Markup ممکن است در ابتدا پیچیده و گنگ به نظر برسد، بنابراین، در ادامه این بخش توضیحات بیش‌تر درباره هر کدام ارائه شده است.

فیلم آموزش طراحی سایت با HTML و CSS ویژه کودکان و نوجوانان در فرادرس

کلیک کنید

ابرمتن چیست؟

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

نشانه گذاری

نشانه‌گذاری (Markup) کاری است که تگ‌های اچ‌تی‌ام‌ال (برچسب اچ‌تی‌ام‌ال | HTML Tag) با متن داخل‌شان انجام می‌دهند. تگ‌ها متن را به عنوان یک نوع متن خاص نشانه‌گذاری می‌کنند (مثل نوع ایتالیک). در ادامه، برای آشنایی بیش‌تر با زبان برنامه نویسی HTML دو مفهوم مهم تگ HTML و صفت HTML معرفی شده است.

فیلم آموزش اچ تی ام ال – طراحی وب با HTML – مقدماتی در فرادرس

کلیک کنید

تگ های HTML‌ چه هستند ؟

این تگ های HTML‌ است که یک متن معمولی را از کد HTML‌ تفکیک می‌کنند. تگ‌ها یا برچسب‌های HTML بین یک علامت کوچک‌تر و یک علامت بزرگ‌تر یا در واقع در داخل پرانتز گوشه‌‌دار (Angle-Bracket) مثل <angle bracket> قرار می‌گیرند. امکان قرار دادن همه نوع چندرسانه مثل عکس، جدول و موارد دیگر در‌ یک صفحه وب، به وسیله تگ‌های HTML وجود دارد. تنها لازم است آنچه که مرورگر باید در صفحه رندر (Render | پردازش) کند را تعیین و مشخص کرد.

فیلم آموزش طراحی سایت با HTML و CSS ویژه کودکان و نوجوانان در فرادرس

کلیک کنید

تگ‌های مختلف کارهای مختلفی انجام می‌دهند. وقتی صفحه از طریق مرورگر مشاهده می‌شود، تگ‌ها دیده نمی‌شوند اما تأثیری که تگ‌ها ایجاد می‌کنند قابل ملاحظه است.

مثالی برای تگ HTML

ساده‌ترین تگ‌ها تنها کار شکل دهی به متن را انجام می‌دهند. یک نمونه تگ ساده HTML در ادامه به عنوان مثال ارائه شده است.

<b>این کلمات در داخل تگ درشت نشان داده خواهند شد</b> اما، این کلمات به صورت عادی نمایش داده می‌شوند

در مثال بالا، تگ‌ b به صورت <b> </b> در دو طرف جمله «این کلمات در داخل تگ درشت نشان داده خواهند شد» را احاطه کرده‌اند. تأثیر تگ <b> این است که از طریق یک مرورگر عادی، متن داخل آن به صورت درشت (بولد | Bold) نشان داده خواهد شد. تصویر خروجی این کد در مرورگر فایرفاکس به صورت زیر است.

عنصر HTML چیست ؟

یک عنصر HTML یا HTML Element به وسیله یک تگ آغازین تعریف می‌شود. اگر عنصر محتوایی را در خود جای داده باشد، با یک تگ پایانی بسته می‌شود. در مثالی که برای تگ HTML در بالا ارائه شد، <b> تگ آغازین برای عنصر b است و چون این عنصر در داخلش متن وجود دارد باید با تگ پایانی <b/> بسته شود.

فیلم آموزش اچ تی ام ال – طراحی وب با HTML – مقدماتی در فرادرس

کلیک کنید

صفت های HTML چه هستند ؟

صفت های HTML کلمات مخصوصی هستند که در داخل تگ ابتدایی برای مدیریت رفتار یک عنصر به کار گرفته می‌شوند. یک عنصر HTML‌ متشکل از تگ ابتدایی، تگ انتهایی و محتوایی است که بین این دو قرار می‌گیرد. همه عنصرهای HTML می‌توانند دارای صفت باشند. صفت های HTML ویرایش کننده انواع عناصر HTML هستند. در واقع،‌ صفت‌ها اطلاعات افزوده‌ای را در مورد عناصر HTML فراهم می‌کنند. صفت‌های HTML همیشه در داخل تگ‌های آغازین قرار داده می‌شوند. صفت‌ها معمولا به صورت جفت‌های نام و مقدار (name="value"‎) تعریف می‌شوند.

مثالی برای صفت HTML

در این بخش، ‌برای درک بهتر صفت های HTML یک مثال ساده استفاده از صفت HTML ارائه می‌شود. تگ <a> یک ابرلینک را تعریف می‌کند. در داخل تگ آغازین <a>، صفت href آدرس URL‌ را مشخص می‌کند. کد HTML‌ مربوط به این مثال در ادامه ارائه شده است.

1<a href="https://blog.faradars.org">Visit FaraDars</a>

همان‌طور که در کد بالا ملاحظه می‌شود، صفت href در داخل تگ آغازین <a> تعریف شده است. href آدرس اینترنتی مجله فرادرس را مشخص کرده است. این آدرس اینترنتی در داخل متن «Visit FaraDars» تعبیه شده و در خروجی به صورت یک لینک آبی رنگ با یک خط در زیر آن، نمایش داده خواهد شد.

مجموعه آموزشی طراحی سایت با HTML و CSS

• فیلم آموزش طراحی وب با HTML – مقدماتی: (زمان: 2 ساعت و 56 دقیقه، مدرس: مهندس محمد عبداللهی): برای علاقه‌مندان و افرادی که قصد یادگیری طراحی وب را دارند مناسب است. برای مشاهده آموزش طراحی وب با HTML – مقدماتی + کلیک کنید.
• فیلم آموزش طراحی وب با CSS– مقدماتی: (زمان: 4 ساعت و 34 دقیقه، مدرس: مهندس محمد عبداللهی): برای علاقه‌مندان و افرادی که قصد یادگیری طراحی وب با CSS را دارند مناسب است. برای مشاهده آموزش طراحی وب با CSS – مقدماتی + کلیک کنید.
• فیلم آموزش طراحی وب با HTML – تکمیلی : (زمان: ۳ ساعت و ۲۳ دقیقه، مدرس: مهندس محمد عبداللهی): برای افرادی که قصد یادگیری HTML5 در سطح پیشرفته و طراحی وب را دارند مناسب است. برای مشاهده فیلم آموزش طراحی وب با HTML – تکمیلی + کلیک کنید.
• فیلم آموزش طراحی وب با CSS3) CSS) – تکمیلی : (زمان: ۳ ساعت و ۱۶ دقیقه، مدرس: مهندس سید رضا هاشمیان): برای افرادی که قصد یادگیری طراحی وب با CSS در سطح تکمیلی (CSS3) را دارند مناسب است. برای مشاهده فیلم آموزش طراحی وب با CSS3) CSS) – تکمیلی + کلیک کنید.
• فیلم آموزش پروژه محور HTML و CSS : (زمان: ۴ ساعت و ۹ دقیقه، مدرس: مهندس مهران بهدوست): برای افرادی می‌خواهند طراحی وب با  HTML و CSS را به صورت پروژه محور آموزش ببینند مناسب است. برای مشاهده فیلم آموزش پروژه محور HTML و CSS + کلیک کنید.
• فیلم آموزش بوت استرپ (Bootstrap) برای طراحی صفحات وب : (زمان: ۶ ساعت و ۲۶ دقیقه، مدرس: مهندس سید رضا هاشمیان): برای افرادی می‌خواهند طراحی وب با  HTML و CSS را به صورت پروژه محور آموزش ببینند مناسب است. برای مشاهده فیلم آموزش پروژه محور HTML و CSS + کلیک کنید.

مجموعه آموزشی طراحی سایت با HTML و CSS علاوه بر دوره‌هایی که در بالا معرفی شدند، دارای ۹ عنوان آموزشی دیگر نیز هست.

• برای دیدن فیلم های آموزشی طراحی سایت با HTML و CSS + اینجا کلیک کنید.

در ادامه مطلب زبان برنامه نویسی HTML چیست تاریخچه HTML‌ به طور کامل و به ترتیب برای هر نسخه شرح داده شده است.

تاریخچه HTML

اولین نسخه HTML که شامل ۱۸ تگ بود، توسط تیم برنرز-لی (Tim Berners-Lee) در اوایل دهه هفتاد شمسی نوشته شد. از آن زمان تا کنون، نسخه‌های HTML متعددی وجود داشته است. در هر نسخه تگ‌ها و صفت‌های جدیدی اضافه شده است.

فیلم آموزش اچ تی ام ال – طراحی وب با HTML – مقدماتی در فرادرس

کلیک کنید

رایج‌ترین نسخه مورد استفاده در دهه هفتاد شمسی، HTML 4.01 بود که در سال ۱۳۷۸ تبدیل به یک استاندارد رسمی شد. بزرگ‌ترین به‌روزرسانی زبان برنامه نویسی HTML در اواسط سال ۱۳۹۲ با نام HTML5 معرفی شد. در این به‌روزرسانی تگ‌های معنایی زیادی مثل <header> ،<article> و <footer> به این زبان نشانه‌گذاری اضافه شدند.

HTML 1.0

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

HTML 2.0

HTML 2.0 به عنوان دومین نسخه از زبان برنامه نویسی HTML همه مشخصات نسخه اولیه HTML 1.0 را داشت و علاوه بر آن‌، چند ویژگی جدید را نیز به این مجموعه اضافه کرد.

فیلم آموزش طراحی سایت با HTML و CSS ویژه کودکان و نوجوانان در فرادرس

کلیک کنید

HTML 2.0 تا اواسط سال ۱۳۷۵ استاندارد طراحی وب محسوب می‌شد و ویژگی‌های کلیدی بسیاری را برای نخستین بار معرفی کرد.

HTML 3.0

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

Netscape دردسرساز

در اینجا بود که دردسرها شروع شد. در آن زمان، شرکتی به نام Netscape با محصولی به نام Netscape Navigator، به وضوح به عنوان پیشتاز و پرچم‌دار در بازار مرورگر شناخته می‌شد. برای پاسخگویی به نیازهای کاربران HTML، این شرکت تگ‌های اختصاصی را در مرورگر Netscape Navigator معرفی کرد. این قابلیت‌های جدید، تگ‌های افزوده نت‌اسکیپ (Netscape extension tags) نام‌گذاری شدند.

این مسئله موجب بروز مشکلات بزرگی شد. سازندگان مرورگرهای دیگر، سعی داشتند تأثیرات این تگ‌ها را همانند‌سازی کنند؛ به این دلیل که نمی‌خواستند از قافله عقب باشند. اما مشکل اینجا بود که این مرورگرها نمی‌توانستند دقیقاً نتایجی مشابه Netscape تولید کنند و خروجی‌ها متفاوت نمایش داده می‌شدند. یعنی اگر صفحه‌ای با افزونه Netscape طراحی می‌شد، این صفحه در سایر مرورگرها به درستی نمایش داده نمی‌شد. این مسئله موجب سردرگمی و خشم پیشگامان عرصه نشانه‌گذاری (Markup) شد.

فیلم آموزش اچ تی ام ال – طراحی وب با HTML – مقدماتی در فرادرس

کلیک کنید

معرفی نسخه سه HTML

در این زمان، یک کارگروه HTML تحت هدایت دِیو راگت (Dave Raggett) یک پیش‌نویس HTML جدید را به نام HTML 3.0 معرفی کردند. این نسخه، دارای قابلیت‌های ارتقایافته بسیاری برای HTML بود و فرصت‌های خیلی بیش‌تری را برای مدیران سایت‌ها جهت طراحی صفحات فراهم می‌کرد. متأسفانه، مرورگرهای آن زمان در پیاده‌سازی هر کدام از به‌روزرسانی‌های جدید، بسیار کند عمل می‌کردند. این مرورگرها تنها برخی از قابلیت‌های جدید را پیاده‌سازی کرده و باقی آن‌ها را کنار می‌گذاشتند.

چرا HTML 3.0 کنار گذاشته شد و راهکار چه بود؟

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

فیلم آموزش طراحی سایت با HTML و CSS ویژه کودکان و نوجوانان در فرادرس

کلیک کنید

HTML 3.2 و شکل‌گیری W3C

تعداد تگ‌های مختلفی که هر کدام فقط با مرورگر خاصی سازگاری داشتند، روزبه‌روز بیش‌تر می‌شد. این مسئله به وضوح نشان می‌داد که نیاز به وضع یک استاندارد جدید وجود دارد. بنابراین، ائتلاف شبکه جهانی وب (World Wide Web) که به اختصار W3C خوانده می‌شود، در سال ۱۳۷۲ تاسیس شد. هدف این سازمان، استانداردسازی زبان برنامه نویسی HTML و هدایت به‌روزرسانی‌های آن در مسیر درست است. اولین نسخه ارائه شده توسط W3C ابتدا WILBUR نام‌گذاری و بعدها به نام HTML 3.2 شناخته شد.

تغییرات در HTML 3.2 چه بودند؟

این نسخه تغییری تعدیل‌یافته برای استانداردهای کنونی بود و بسیاری از گام‌های بزرگ‌تر برای نسخه‌های بعدی کنار گذاشته شدند. اکثر تگ‌های افزونه‌ ارائه شده توسط Netscape (و تعداد کم‌تری هم توسط مایکروسافت) در استاندارد جدید به کار گرفته نشدند. این استاندارد جدید به سرعت محبوب شد و در سال ۱۳۷۵ به استاندارد رسمی زبان برنامه نویسی HTML بدل شد. امروزه عملاً تمام مرورگرها به طور کامل از آن پشتیبانی می‌کنند.

فیلم آموزش اچ تی ام ال – طراحی وب با HTML – مقدماتی در فرادرس

کلیک کنید

HTML 4.01 و پشتیبانی از CSS

HTML 4.01 تحولی اساسی در استانداردهای زبان برنامه نویسی HTML و آخرین بازنویسی HTML‌ سنتی (کلاسیک) به حساب می‌آید. در مراحل ابتدایی توسعه، از آن با لقب COUGAR (به معنی گربه وحشی) نام برده می‌شد. این بار، اکثر قابلیت‌های جدید ارائه شده برای بهبود کاستی‌های HTML 3.0 ارائه شدند. همچنین، مجموعه‌ای از مرتب‌سازی‌ها و اصلاحات تگ‌های قدیمی، تمرکز بر جهانی‌سازی و پشتیبانی از پدیده جدید صفحات پیاپی مشبک (Cascading Style Sheet | CSS) انجام شدند.

مایکروسافت چطور به رشد HTML 4.01 کمک کرد؟

HTML 4.01 در اواسط ۱۳۷۶ توسط W3C ارائه و در ابتدای سال ۱۳۷۷ تبدیل به استاندارد رسمی شد. پشتیبانی از HTML 4.01 در مرورگر اینترنت اکسپلورر به طور شگفت‌آوری توسط مایکروسافت جدی گرفته شد. و نسخه IE5 که پیشتاز بازار بود (و به دنبال آن نسخه IE6)، پشتیبانی فوق‌العاده‌ای برای همه تگ‌ها و صفت‌ها (Attribute) ارائه می‌کرد.

فیلم آموزش طراحی سایت با HTML و CSS ویژه کودکان و نوجوانان در فرادرس

کلیک کنید

در مقایسه،‌ مرورگر پرنقص Navigator 4.7 شرکت Netscape در خصوص پشتیبانی از HTML 4.01 و حتی CSS کاملاً نا‌توان بود. اگرچه، مرورگرهای امروزی بسیار بهبود یافته‌اند. کمی پس از انتشار HTML 4.0 مستندات آن بازبینی و در برخی موارد اصلاحاتی انجام شد. این نسخه جدید به نام HTML 4.01 آخرین نسخه با این مشخصه بود.

XHTML چطور ایجاد شد ؟

نزدیک به آغاز قرن بیست و یکم، W3C نسخه اولیه XHTML 1.0 را منتشر کرد. این نسخه از اواخر ۱۳۷۸ به طور مشترک با HTML 4.01 به عنوان استاندارد اصلی شناخته می‌شد. XHTML تحولی در نحوه عملکرد مشخصات جدید و به عنوان شاخه جدیدی از HTML به حساب می‌آید. XHTML یک بازنویسی از HTML به عنوان یک زبان XML بود.

فیلم آموزش اچ تی ام ال – طراحی وب با HTML – مقدماتی در فرادرس

کلیک کنید

XML‌ یک زبان نشانه‌گذاری استاندارد است که برای ایجاد زبان‌های نشانه‌گذاری دیگر استفاده می‌شود. امروزه، صدها زبان XML در حال استفاده است. برخی از این زبان‌ها شامل GML (زبان نشانه‌گذاری جغرافیا | Geography Markup Language) یا MathML ، MusicML و RSS (هم‌نشری بسیار ساده | Really Simple Syndication) است.

ویژگی های XHTML

از آنجا که هر یک از این زبان‌ها به زبان مشترکی (XML) نوشته شده‌اند، محتوای آن‌ها به راحتی می تواند در میان برنامه ها به اشتراک گذاشته شود. این مسئله، به طور بالقوه‌ای XML را تبدیل به یک زبان نشانه‌گذاری بسیار قدرتمند کرده است. به همین دلیل، جای تعجبی ندارد که W3C  یک نسخه XML از HTML‌ بسازد (که XHTML نامیده می‌شود). XHTML در سال 1380 تبدیل به یک استاندارد رسمی و در سال ۱۳۸۲ به‌روزرسانی شد. XHTML بسیار مشابه HTML است اما،‌ قوانین سفت و سخت‌تری دارد. قوانین سختگیرانه برای تمام زبان‌های XML‌ضروری است چرا که، بدون آن هم‌کنش‌پذیری (Interoperability) میان برنامه‌ها امکان‌پذیر نبود.

HTML5

پس از HTML 4.01 و XHTML 1.0 افرادی که جهت‌دهی HTML را در اختیار داشتند، مشغول کار روی طرح پیشنهادی جدیدی برای XHTML 2 بودند. در همان زمان، توسعه‌دهندگان زیرک وب، دائماً در حال خلق نوآوری و ایجاد قابلیت‌های جدید در مرورگرها و وب‌سایت‌ها بودند.

فیلم آموزش کاربردی HTML5، CSS3 و jQuery در طراحی وب – بخش یکم در فرادرس

کلیک کنید

مسیری که XHTML 2 در آن قرار گرفته بود کم‌کم کسل‌کننده و غیر واقع‌گرایانه به نظر می‌رسید. بنابراین، پرواضح بود که نیاز به رویکرد جدیدی وجود دارد. تا اینکه، تعدادی از هواداران عمل‌گرا در حوزه فناوری وب و برنامه‌نویسان مرورگر، ساخت نسخه جدیدی خارج از حیطه معمول سازوکار W3C را آغاز کردند.

چیرگی WHATWG

آن‌ها خود را کارگروه تعیین تکنولوژی نحوه استفاده از ابرمتن وب (Hypertext Application Technology Working Group | WHATWG) نامیدند و یک نسخه جدید توسعه دادند. پس از بررسی و واکاوی‌های متعدد، W3C‌ به این نتیجه رسید که HTML همچنان آینده وب به حساب می‌آید. پروژه XHTML 2 متوقف و HTML5 تبدیل به نسخه جدیدی شد که تلاش و کوشش همگان باید به آن معطوف می‌شد. HTML5 برای وب در زمان حال و هم برای آینده طراحی شده است. HTML5 نسخه‌ای است که برای مدت‌ها مورد استفاده قرار گرفته و خواهد گرفت. به همین دلیل، روند توسعه آن به آرامی و با دقت انجام می‌شود. بسیاری از بخش‌های آن شناخته شده خواهند بود و عناصر جدید، صفت‌ها و قابلیت‌های هیجان‌انگیز متعددی برای آن ارائه شده و خواهد شد.

معرفی فیلم های آموزش طراحی سایت فرادرس

فیلم‌های آموزش طراحی سایت در قالب یک مجموعه آموزشی گردآوری شده‌اند. این مجموعه، شامل ۵۵ دوره آموزشی مختلف است که مدت زمانی آن‌ها در مجموع نزدیک به ۱۲۰ ساعت است. تاکنون، بیش از ۱۰۰ هزار دانشجو از محتوای دوره‌ها و عناوین این مجموعه استفاده کرده‌اند.

در این مجموعه، دوره‌های آموزشی مختلفی در زمینه زبان‌های برنامه نویسی، ابزارها و فریم‌وُرک‌های مورد استفاده در طراحی سایت و برنامه‌های کاربردی از قبیل زبان برنامه نویسی HTML، جاوا اسکریپت و CSS موجود است. حتی می‌توان در زمینه بهبود سئو و امنیت سایت و کلیه مواردی که در طراحی و ساخت وب‌سایت‌ها مورد نیاز و استفاده است، دوره‌هایی را در این مجموعه آموزشی یافت.

• برای دیدن مجموعه فیلم‌های آموزش طراحی سایت فرادرس + اینجا کلیک کنید.

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

چه تفاوتی میان HTML و HTML5 وجود دارد ؟

از همان روزهای ابتدایی تحولات بسیاری در زبان برنامه نویسی HTML‌ اتفاق افتاده است. W3C به طور دائم نسخه‌ها و به‌روزرسانی‌های جدیدی منتشر می‌کند. همان‌طور که در بخش تاریخچه زبان برنامه نویسی HTML بیان شد، HTML4 که این روزها با همان نام HTML شناخته می‌شود، در اواخر دهه هفتاد شمسی منتشر شد. آخرین نسخه اصلی HTML با نام HTML5 در ابتدای دهه نود شمسی ارائه شده است.

فیلم آموزش اچ تی ام ال – طراحی وب با HTML – مقدماتی در فرادرس

کلیک کنید

امکان تعبیه صوت و ویدئو

یکی از ویژگی‌های پیش‌بینی شده HTML5 پشتیبانی بومی آن برای تعبیه صوت و ویدئو در سند HTML‌ است. به جای استفاده از Flash Player می‌توان به راحتی فایل‌های صوتی و ویدئویی را با استفاده از تگ‌های <audio></audio> و <video></video> در صفحات وب قرار داد. همچنین، HTML5 از تصاویر گرافیکی برداری مقیاس‌پذیر (Scalable Vector Graphics | SVG) و MathML برای فرمول‌های ریاضی و علمی پشتیبانی می‌کند.

تگ های معنایی

همچنین، HTML5 بهبودهایی را برای اجزاء معنایی (Semantic) نیز معرفی کرده است. تگ‌های معنایی جدید، مرورگرها را در مورد مفهوم محتوا مطلع می‌سازند که این مسئله هم به سود خوانندگان و هم به سود موتورهای جستجو است. تگ‌های معنایی (Semantic Tag) آن دسته از تگ‌های HTML هستند که معنی و مفهوم خود را به وضوح و به صورت قابل خواندن برای انسان و ماشین توصیف می‌کنند.

فیلم آموزش طراحی سایت با HTML و CSS ویژه کودکان و نوجوانان در فرادرس

کلیک کنید

در ادامه، برخی از محبوب‌ترین تگ‌های معنایی فهرست شده‌اند.

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

در ادامه مطلب زبان برنامه نویسی HTML چیست، نوبت به کاربردهای زبان برنامه نویسی HTML‌ می‌رسد.

HTML چه کاربردهایی دارد ؟

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

فیلم آموزش اچ تی ام ال – طراحی وب با HTML – مقدماتی در فرادرس

کلیک کنید

در این بخش از مطلب زبان برنامه نویسی HTML برخی از شاخص‌ترین کاربردهای HTML ارائه شده است.

توسعه صفحات وب

HTML کاربرد گسترده‌ای در ایجاد صفحاتی دارد که در تارنمای جهان‌گستر (World Wide Web) یا همان وب (Web) به نمایش گذاشته می‌شود. هر صفحه، حاوی مجموعه‌ای از تگ‌های HTML، شامل ابَرلینک‌ها (Hyperlink) است. این ابرلینک‌ها برای ارتباط با صفحات دیگر استفاده می‌شود. هر صفحه‌ای که در وب دیده می‌شود،‌ با استفاده از یکی از نسخه‌های HTML نوشته و تولید شده است.

اپلیکیشن HTML

برنامه کاربردی اچ‌تی‌ام‌ال (HTML Application | HTA) یک برنامه مبتنی بر ویندوز است که کدهای منبع آن حاوی کدهای HTML و اچ‌تی‌ام‌ال پویا (Dynamic HTML | DHTML) است. در کنار HTML، از یک زبان اسکریپت‌نویسی سازگار با Internet Explorer نیز برای ساخت اپلیکیشن HTML استفاده می‌شود.

فیلم آموزش طراحی سایت با HTML و CSS ویژه کودکان و نوجوانان در فرادرس

کلیک کنید

در HTA، از HTML‌ برای ایجاد واسط کاربری استفاده می‌شود. یک HTA‌ بدون محدویت‌های مدل امنیتی مرورگر اینترنت اجرا می‌شود. در واقع، اپلیکیشن HTML به عنوان یک برنامه کاربردی «کاملاً مورد اعتماد» (Fully Trusted) اجرا می‌شود.

تصاویر واکنش‌گرا در صفحات وب

در سطح ابتدایی از کاربردهای HTML می‌توان کوئری‌هایی (Query) را برای استفاده از تصاویری تنظیم کرد که به طور طبیعی واکنش‌گرا باشند. با استفاده از صفت srcset در عنصر img و ترکیب آن با عناصر Picture، یک توسعه‌دهنده می‌تواند به طور کامل نحوه رندر کردن یک تصویر توسط مرورگر در سمت کاربر را کنترل کند. می‌توان با استفاده از عنصر img در HTML، انواع تصاویر را با اندازه‌های مختلف بارگذاری کرد. می‌توان با استفاده از عنصر Picture‌ به راحتی قوانینی را وضع کرد.

ذخیره سازی سمت کلاینت

در گذشته، این امکان وجود نداشت که بتوان داده‌های مرورگر یک کاربر را در طول جلسه‌ها (Session) ذخیره کرد. برای دست‌یابی به چنین نیازمندی، باید زیرساخت‌های سمت سرور فراهم می‌شد و یا از Cookie‌های کاربران استفاده می‌شد. اما اکنون در HTML5 با استفاده از localStorage‌ و IndexDB می‌توان ذخیره‌سازی سمت کلاینت را انجام داد.

فیلم آموزش اچ تی ام ال – طراحی وب با HTML – مقدماتی در فرادرس

کلیک کنید

localStorage‌ اساساً ذخیره‌سازی مبتنی بر رشته جدول درهم‌سازی (String-Based Hash-Table Storage) را فراهم می‌کند. API آن بسیار ساده است و متدهای getItem ،setItem و removeItem را برای توسعه‌دهندگان فراهم می‌کند. از طرف دیگر، IndexDB یک سرویس ذخیره داده بزرگ‌تر و بهتر برای سمت کلاینت است. IndexDB را می‌توان با اجازه کاربر گسترش داد.

امکان توسعه بازی

پیش از ظهور HTML5 توسعه بازی تحت وب محدود به Flash و Silverlight بود. چون مرورگرها از ملزومات جدید برای HTML5 مثل CSS3 و موتور سریع و سبک جاوا اسکریپت برای ایجاد تجربه مطلوب پشتیبانی می‌کنند،‌ HTML5‌ می‌تواند امکان توسعه بازی را به واقعیت تبدیل کند. نیازی نیست که تک تک ویژگی‌‌های APIها را پیاده‌سازی کرد. بلکه، می‌توان از ویژگی‌های مناسب و مطلوب استفاده کرده و سایر آن‌ها را حذف کرد.

کاربرد در قابلیت‌های آفلاین

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

مزایا و معایب HTML چه هستند ؟

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

فیلم آموزش اچ تی ام ال – طراحی وب با HTML – مقدماتی در فرادرس

کلیک کنید

مزایای HTML

ابتدا برخی از مزایای HTML به صورت کوتاه و فهرست‌وار ارائه شده است. پس از آن، برخی از مزایای HTML5 با جزئیات بیش‌تری شرح داده خواهند شد.

• زبان برنامه نویسی HTML به طور گسترده‌ای مورد استفاده قرار می‌گیرد و همچنین، دارای منابع و جامعه کاربری بزرگی است.
• HTML در همه مرورگرها به صورت محلی (Native) اجرا می‌شود.
• این زبان نشانه‌گذاری دارای منحنی یادگیری همواری است.
• زبان نشانه‌گذاری HTML متن‌باز و کاملا رایگان است.
• HTML الگوی نشانه‌گذاری شفاف و منسجمی دارد.
• استانداردهای رسمی وب، توسط W3C مدیریت می‌شوند.
• HTML به راحتی با زبان‌های بک‌اند مثل PHP و Node.js قابل ترکیب کردن است.

مزایای HTML5

در ادامه این بخش، برخی از مزایای HTML5 به همراه توضیحاتی پیرامون هر یک از این مزایا، بیان شده است.

1. HTML یک محصول تصاحب شده نیست: برای استفاده از زبان برنامه نویسی HTML برای ساخت وب‌سایت، نیازی به پرداخت حق امتیاز نیست. زبان برنامه نویسی HTML چند پلتفرمی (Cross-Platform) است. چندپلتفرمی به این معنا است که می‌توان به صفحات و وب‌سایت‌های ساخته شده با زبان برنامه نویسی HTML از طریق هر دستگاهی مانند کامپیوتر رومیزی، لپ‌تاپ، گوشی هوشمند و یا حتی تلویزیون دسترسی داشت. این کار تا وقتی که مرورگر از HTML پشتیبانی کند به احتمال زیاد امکان‌پذیر خواهد بود.
2. HTML5 از صوت و ویدئو پشتیبانی می‌کند: به وسیله عنصر Canvas امکان اجرای اجزاء (قطعات | Component) بسیاری از طریق وب‌سایت وجود دارد. قبل از این، نیاز به یک برنامه بین‌متنی تعبیه شده در سمت کاربر وجود داشت. این یعنی، HTML5 به توسعه‌دهندگان اجازه می‌دهد تصاویر گرافیکی پویا تولید کنند، از بازی‌های آنلاین استفاده کنند و ویدئوهای تعاملی در سایت‌شان به نمایش بگذارند. همان‌طور که در بخش کاربردهای HTML‌ در این مطلب بیان شد، به تازگی حتی ارائه ویدئو و بازی‌های آفلاین نیز به کمک امکانات جدید HTML5 به وجود آمده است.
3. کدنویسی با HTML5 شفاف و منسجم است: ویژگی شفافیت در کدنویسی آخرین نسخه زبان برنامه نویسی HTML قابل ستایش است. شیوه کدنویسی در HTML‌ ساده و خواندن آن بسیار آسان است. به سرعت می‌توان محتوا را از استایل‌های CSS جدا کرد که باعث می‌شود کار تولید کدهای توصیفی و واضح بسیار راحت‌تر شود. با چنین ساختاری، یادگیری زبان برنامه نویسی HTML برای کدنویسان تازه‌کار بسیار ساده خواهد بود. بنابراین، همه افراد علاقه‌مند به حوزه طراحی وب می‌توانند از HTML استفاده کنند.
4. با HTML وب‌سایت‌ها پایداری بیش‌تری دارند: همچنان بازنویسی‌های متعددی از نسخه‌های مختلف زبان برنامه نویسی HTML در سطح اینترنت وجود دارد. از نقطه نظر و جایگاه کاربران، با استفاده هر چه بیش‌تر وب‌سایت‌ها از HTML5، پایداری و انسجام بسیار بیش‌تری نیز در زمینه تجربه استفاده از اینترنت به وجود آمده است. حتی، بسیاری از وب‌سایت‌ها از کدهای یکسان برای دست‌یابی به اهداف بسیار متفاوتی استفاده می‌کنند. این کار باعث می‌شود تجربه بارگذاری سایت‌ها بدون چند برابر شدن بار وب‌سایت مربوطه،‌ تسریع یابد. این مسئله همچنین موجب می‌شود توسعه‌دهندگان به لحاظ ساختاری درک متقابل بهتری نسبت به یکدیگر داشته باشند.
5. عناصر صفحه آرایی بیش‌تری برای محتوا در دسترس خواهد بود: در نسخه‌های قدیمی‌تر زبان برنامه نویسی HTML انتخاب‌های در دسترس بسیار محدود بودند. این انتخاب‌ها تنها شامل Paragraph ،Heading ،Div و Span‌ می‌شدند. اما، با HTML5 عنصرهای متعددی حتی برای استفاده در طراحی صفحه آرایی (Page Layout) وجود دارند. سربرگ‌ (Headers)، پانویس (Footer)، محدوده (Area) و بخش‌ (Section) همگی در دسترس سازندگان وب‌سایت هستند.

معایب HTML

در بخش معایب HTML نیز ابتدا به صورت فهرست‌وار و کوتاه به شرح برخی از معایب زبان برنامه نویسی HTML پرداخته شده است و پس از آن نیز، برخی از معایب HTML5 به همراه توضیحات آن‌ها ارائه خواهد شد.

• HTML بیش‌تر برای صفحات وب ایستا (Static) مورد استفاده قرار می‌گیرد. برای افزودن قابلیت‌های پویا، باید از جاوا اسکریپت یا یک زبان بک‌اند مثل PHP استفاده شود.
• زبان برنامه نویسی HTML به کاربر اجازه پیاده‌سازی منطق را نمی‌دهد. به همین سبب تمام صفحات وب، حتی در صورتی که از عناصر یکسانی استفاده می‌کنند (مثل عنوان‌ها و پی‌نوشت‌ها) باید به صورت جداگانه ایجاد شوند.
• برخی از مرورگرها ویژگی‌های جدید HTML را با تأخیر زیاد اضافه می‌کنند.
• گاهاً پیش‌بینی رفتار مرورگر دشوار است. برای مثال، مرورگرهای قدیمی‌تر گاهی تگ‌های جدیدتر را رندر نمی‌کنند.

در ادامه این بخش، برخی از سایر معایب HTML‌ به همراه توضیح آن‌ها فهرست شده است.

1. پشتیبانی‌های مختلفی از ویدیو در HTML5 وجود دارد: به واقع هیچ کس نمی‌تواند بر سر اینکه باید از کدام استاندارد پشتیبانی ویدئو در HTML5 استفاده شود به توافق برسد. به همین دلیل، تعداد زیادی از پشتیبانی‌های ویدئو متفاوت وجود دارد که متکی به مرورگر مورد استفاده هستند. در حال حاضر از سه فرمت ویدئو اصلی استفاده می‌شود. این فرمت‌ها شامل H.264 ،Ogg Theory و VP8/WebM است. Ogg Theory با هر چیزی به غیر از اینترنت اکسپلورر سازگاری دارد. H.264 با هر مرورگری به جز فایرفاکس سازگار است. VP8/WebM به وسیله همه مرورگرها پشتیبانی می‌شود.
2. دسترسی به HTML5 نیازمند مرورگرهای مدرن است: اگر کاربرانی باشند که از مرورگرهای قدیمی استفاده ‌کنند، امکان دسترسی به وب‌سایت‌های توسعه داده شده با HTML5 برای آن‌ها وجود نخواهد داشت. آخرین نسخه‌های اکسپلورر که دیگر نسخه جدیدی از آن ارائه نمی‌شود نیز سازگاری بسیار اندکی با HTML5‌ داشتند. از جنبه اقتصادی، این مسئله قابل قبول نیست که بازدیدکنندگان نتوانند به یک وب‌سایت با عملکرد مناسب و کامل دسترسی پیدا کنند. کاربران هرگز مرورگر قدیمی خود را سرزنش نخواهند کرد بلکه، آن سایت را هدف انتقاد قرار خواهند داد.
3. نیاز به واکنش‌گرایی برای دستگاه‌های مختلف دردسرساز است: هدف ایجاد یک وب‌سایت مدرن این است که در هر دستگاه و مرورگر دلخواهی، یکسان به نظر برسد. بسیاری از قالب‌ها امکان واکنش‌گرایی (Responsiveness) خودکار را فراهم می‌کنند. این مسئله نیاز به دانش زبان برنامه نویسی HTML‌ را کاهش می‌دهد. اما این باعث می‌‌شود قالب‌ها تکراری شده و اکثر سایت‌ها یک شکل به نظر برسند.
4. بازی‌ با جاوا اسکریپت تحت HTML5 مشکل دارد: جاوا اسکریپت از معدود زبان‌های اسکریپت‌نویسی سازگار با HTML5 است. جاوا اسکریپت زبان بسیار مناسب و انتخاب خوبی برای اکثر کاربردهای وب است. اگرچه از نقطه نظر بازی‌سازی، کمبود امکانات وجود دارد. امکانات و قابلیت‌های خاصی برای بازی‌سازی نیاز است. فضای نام‌های شخصی‌سازی شده، واسط دسترسی اعضا و ارث‌بری، همگی با جاوا اسکریپت ناسازگاری‌ّایی دارند. اگرچه، راه‌حل‌های بسیاری وجود دارند تا بتوان به هدف مطلوب رسید. اما در خصوص بازی‌سازی، استفاده از HTML5‌ به همراه جاوا اسکریپت هرگز اولین انتخاب نخواهد بود.

HTML‌ چطور کار می‌کند ؟

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

فیلم آموزش طراحی سایت با HTML و CSS ویژه کودکان و نوجوانان در فرادرس

کلیک کنید

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

معمولاً، یک وب‌سایت عادی شامل تعداد زیادی صفحات HTML مختلف است. برای مثال، صفحه اول سایت، صفحه «درباره ما»، صفحه اطلاعات تماس و سایر صفحات همگی مستندات HTML مخصوص به خود را دارند. هر صفحه HTML شامل تعدادی تگ است که عنصر (Element) نیز نامیده می‌شوند. عناصر HTML‌ را می‌توان استخوان‌بندی یا اسکلت اینترنت دانست. این عناصر یک سلسله مراتب ایجاد می‌کنند که به محتوا در قالب بخش‌ها (Sections)‌، پاراگراف‌ها،‌ سربرگ‌ها و سایر اجزاء سازمان می‌دهند.

مرورگرهای وب، مستندات HTML را از وب‌سرور یا یک ذخیره‌گاه محلی دریافت می‌کنند و با پردازش (رندر | Render) این مستندات، آن‌ها را به صفحات وب چندرسانه‌ای تبدیل می‌کنند. زبان برنامه نویسی HTML شامل یک سری عناصر است که برای محصور کردن یا بسته‌بندی بخش‌های مختلف محتوا استفاده می‌شود تا بتوان این محتوا را به شکل خاصی نمایش داد. این تگ‌های (Tag) احاطه کننده، می‌توانند یک کلمه یا عکس را تبدیل به ابرمتن کنند، کلمات را به صورت مورب (Italic) در بیاورند، فونت را بزرگ‌تر یا کوچک‌تر کنند و سایر موارد مورد نیاز را انجام دهند. برای مثال، می‌توان جمله زیر را درنظر گرفت:

گربه‌ام خیلی بداخلاق است

اگر هدف این باشد که جمله بالا به تنهایی و به صورت مستقل نشان داده شود، می‌توان به صورت زیر با قرار دادن آن در داخل یک تگ پاراگراف مشخص کرد که جمله بالا یک پاراگراف است.

1<p>گربه‌ام خیلی بداخلاق است</p>

یادگیری HTML

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

فیلم آموزش اچ تی ام ال – طراحی وب با HTML – مقدماتی در فرادرس

کلیک کنید

یادگیری HTML چقدر زمان می‌برد ؟

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

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

نمونه کد HTML

همان‌طور که بیان شد، اکثر عنصرهای HTML دارای یک تگ ابتدایی و انتهایی هستند که از نحو <tag></tag> تبعیت می‌کنند. در این بخش، یک مثال از نحوه سازمان عناصر HTML ارائه شده است.

1<div>
2  <h1>The Main Heading</h1> 
3  <h2>A catchy subheading</h2>
4  <p>Paragraph one</p> 
5  <img src="/" alt="Image"> 
6  <p>Paragraph two with a <a> href="https://example.com">hyperlink</a></p>
7</div>

در ادامه این بخش، توضیحاتی در خصوص کدهای بالا ارائه شده است.

• عنصر Div، یک بخش (Division) ساده است که با تگ <div> مشخص می‌شود. از این عنصر می‌توان برای نشانه‌گذاری بخش‌های محتوایی بزرگ‌تر استفاده کرد.
•  عنصر Div حاوی یک عنوان (<h1></h1>)، یک زیرعنوان (<h2></h2>)، دو پاراگراف (<p></p>) و یک تصویر <img> است.
• پاراگراف دوم یک لینک (<a></a>) با یک صفت href دارد که این صفت، حاوی URL (آدرس اینترنتی) مقصد است.
• تگ تصویر (img) نیز دارای دو صفت است. یکی از این صفت‌ها src که برای تعیین محل تصویر استفاده شده و دیگری alt است که برای توصیف تصویر به کار گرفته می‌شود.

پراستفاده‌ترین تگ‌های HTML چه هستند ؟

تگ‌های HTML دارای دو نوع اصلی هستند:

فیلم آموزش اچ تی ام ال – طراحی وب با HTML – مقدماتی در فرادرس

کلیک کنید

1. تگ‌های سطح بلوکی (Block-Level): عناصر سطح بلوکی تمام فضای موجود را اشغال و همواره یک خط جدید در سند ایجاد می‌کنند. عنوان‌ها (Heading) و پاراگراف‌ها مثال‌های عالی برای تگ‌های سطح بلوکی هستند.
2. تگ‌های بین‌متنی (Inline Tag): تگ‌های بین‌متنی فقط به اندازه نیاز فضا اشغال می‌کنند و خط جدیدی در صفحه اضافه نمی‌کنند. آن‌ها معمولاً برای قالب‌بندی محتوای بین‌متنی عناصر سطح بلوکی استفاده می‌شوند. لینک‌ها و کلمات Bold شده مثال‌های خوبی برای تگ‌های بین‌متنی هستند.

در ادامه، هر یک از این انواع تگ HTML معرفی شده‌اند.

تگ‌های سطح بلوکی رایج

سه تگ سطح بلوکی که هر سند HTML به آن نیاز دارد، شامل تگ‌های <head> ،<html> و <body> است.

1. تگ <html></html>: عنصر با بالاترین سطح است که هر صفحه HTML را محصور می‌کند.
2. تگ <head></head>: اطلاعات تکمیلی (Meta) از جمله عنوان صفحه و مجموعه کاراکتر (Charset) را نگهداری می‌کند.
3. تگ <body></body>: تمام محتوایی که در صفحه ظاهر می‌شود را در خود محصور می‌کند.

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

• عنوان‌ها (Heading) در زبان برنامه نویسی HTML دارای شش سطح هستند. آن‌ها به ترتیب از <h1></h1> تا <h6></h6> دسته‌بندی می‌شوند. h1 عنوان در بالاترین سطح است و h6 در پایین‌ترین سطح قرار دارد. تگ‌های پاراگراف به صورت <p></p> هستند. همچنین،‌ تگ‌های نقل قول‌های سطح بلوکی (Blockquote) به صورت <blockquote></blockquote> هستند.
• بخش‌ها (Division) قسمت‌های محتوایی بزرگ‌تری هستند که معمولاً شامل تعداد زیادی پاراگراف‌، تصویر، گاهی نقل قول‌های سطح بلوکی و سایر عناصر کوچک‌تر می‌شوند. می‌توان آن‌ها را با استفاده از تگ <div></div> نشانه‌گذاری کرد.
• می‌توان از تگ‌های <ol></ol> برای لیست‌های مرتب (Ordered List) و از <ul></ul> برای لیست‌های نشانه‌دار استفاده کرد. هر کدام از گزینه‌ها در لیست باید در داخل تگ <li></li> قرار بگیرند. برای مثال، یک تگ نشانه‌دار (نامرتب) در HTML، به صورت زیر برچسب‌گذاری می‌شود.

1<ul>
2    <li>List item 1</li>
3    <li>List item 2</li>
4    <li>List item 3</li>
5</ul>

تگ‌های بین‌متنی رایج

بسیاری از تگ‌های بین‌متنی برای قالب‌بندی متن استفاده می‌شوند. برای مثال، یک تگ <strong></strong> یک عنصر را به صورت درشت (بولد | Bold) رندر می‌کند، درحالی‌که، تگ‌های <em></em> آن را به صورت مورب (ایتالیک) نمایش خواهند داد.

فیلم آموزش طراحی سایت با HTML و CSS ویژه کودکان و نوجوانان در فرادرس

کلیک کنید

همچنین، ابرلینک‌ها (Hyperlink) عناصر بین‌متنی (بین‌خطی | Inline) هستند که به وسیله تگ‌های <a></a> احاطه شده و صفت href برای تعیین مقصد لینک استفاده می‌شود.

1<a href="https://example.com/">Click me!</a>

تصاویر نیز عناصر بین‌خطی هستند. می‌توان یک عکس را با استفاده از تگ <img> و بدون تگ پایانی به یک سند HTML‌ اضافه کرد. اما باید از صفت src‌ برای تعیین محل (مسیر)‌ عکس به صورت زیر استفاده کرد:

1<img src="/images/example.jpg" alt="Example image">

HTML با CSS و جاوا اسکریپت چه ارتباطی دارد ؟

با وجود اینکه HTML‌ زبان قدرتمندی است، اما برای ساخت یک وب‌سایت حرفه‌ای و کاملاً واکنش‌گرا کافی نیست. از زبان برنامه نویسی HTML (زبان نشانه‌گذاری HTML) تنها می‌توان برای اضافه کردن عنصرهای متنی استفاده و ساختار محتوا را ایجاد کرد. اما، HTML به همراه دو زبان فرانت‌اند دیگر به خوبی کار می‌کند.

فیلم آموزش اچ تی ام ال – طراحی وب با HTML – مقدماتی در فرادرس

کلیک کنید

این زبان‌ها CSS و جاوا اسکریپت هستند. با استفاده از CSS ، HTML و جاوا اسکریپت می‌توان به تجربه کاربری بسیار خوبی دست یافت و قابلیت‌های پیشرفته‌ای را پیاده‌سازی کرد.

• CSS برای طراحی و استایل‌دهی مثل یک پس‌زمینه، رنگ‌ها، صفحه آرایی، فاصله گذاری و تصاویر متحرک استفاده می‌شود.
• جاوا اسکریپت امکان افزودن قابلیت‌های پویا همچون اسلايدرها، پاپ‌آپ‌ها و گالری تصاویر را پدید می‌آورد.

برای درک بهتر،‌ اگر فرض شود HTML‌ یک انسان است، می‌توان‌ CSS را مثل لباس‌های او و جاوا اسکریپت را حرکات و رفتار وی در نظر گرفت.

CSS چیست ؟

CSS سرنامی برای عبارت Cascading Style Sheet به معنی صفحات پیاپی مشبک است. CSS وضعیت ظاهری عناصر HTML را در صفحه نمایش، کاغذ یا سایر رسانه‌ها توصیف می‌کند. صفحات پیاپی مشبک برای قالب‌بندی آرایش صفحات وب استفاده می‌شوند. از آن‌ها می‌توان برای تعریف استایل‌های متنی، اندازه جدول‌ها و سایر مؤلفه‌های صفحات وب استفاده کرد.

فیلم آموزش سی اس اس – طراحی وب سایت با CSS – مقدماتی در فرادرس

کلیک کنید

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

جاوا اسکریپت چیست ؟

جاوا اسکریپت (JavaScript |‌ JS) یک زبان برنامه نویسی است که امکان پیاده‌سازی ویژگی‌های پیچیده را در صفحات وب فراهم می‌کند. جاوا اسکریپت به کاربران اجازه می‌دهد با صفحات وب تعامل داشته باشند. از فریم‌وُر‌ک‌های متعدد جاوا اسکریپت برای ساخت اپلیکیشن‌های وب و موبایل استفاده می‌شود.

فیلم آموزش جاوا اسکریپت JavaScript – جامع و کاربردی در فرادرس

کلیک کنید

همچنین، JavaScript برای ساخت وب‌سرورها، توسعه کاربردهای مرتبط با سرور و توسعه بازی‌های کامپیوتری نیز به کار گرفته می‌شود.

آموزش مقدماتی HTML برای شروع

در این بخش از مطلب زبان برنامه نویسی HTML آموزش مقدماتی HTML‌ برای شروع کار با آن ارائه شده است.

فیلم آموزش اچ تی ام ال – طراحی وب با HTML – مقدماتی در فرادرس

کلیک کنید

ساختار عنصر HTML به چه صورت است ؟

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

در ادامه، بخش‌های اصلی عنصر HTML معرفی شده است.

تگ ابتدایی

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

فیلم آموزش طراحی سایت با HTML و CSS ویژه کودکان و نوجوانان در فرادرس

کلیک کنید

تگ انتهایی

این تگ نیز مثل تگ ابتدایی است با این تفاوت که یک علامت ممیز (/) قبل از نام عنصر وجود دارد. تگ انتهایی مشخص می‌کند که عنصر در کجا پایان یافته است. فراموش کردن استفاده از تگ انتهایی یکی از اولین خطاهایی است که مبتدیان با آن مواجه می‌شوند. این اشتباه می‌تواند منجر به بروز نتایج غیرعادی شود.

محتوا

در داخل دو تگ ابتدایی و انتهایی در یک عنصر HTML محتوای مورد نظر قرار داده می‌شود. در تصویر بالا و مثالی که در اینجا ارائه شد، این محتوا تنها شامل متن است.

فیلم آموزش اچ تی ام ال – طراحی وب با HTML – مقدماتی در فرادرس

کلیک کنید

عنصر HTML

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

صفت HTML

همان‌طور که در ابتدا نیز بیان شد، عناصر HTML می‌توانند دارای تعدادی صفت باشند. به عنوان مثال، یک صفت به صورت زیر است.

صفت‌ها حاوی اطلاعات بیش‌تر در مورد یک عنصر هستند که قرار نیست در محتوای خروجی نمایش داده شوند. در اینجا، class نام یک صفت است و editor-note مقدار این صفت است. صفت class اجازه می‌دهد یک شناسه غیر منحصربه‌فرد به عنصر نسبت داده شود که می‌تواند برای هدف قرار دادن آن عنصر با اطلاعات مربوط به طراحی (CSS) و سایر موارد (جاوا اسکریپت) مورد استفاده قرار گیرد. همچنین، هر عنصر دیگری که دارای همین مقدار class‌ یعنی editor-note باشد را نیز می‌توان هدف گرفت.

عناصر تو در تو

در زبان برنامه نویسی HTML‌ می‌توان عناصر را در داخل عناصر دیگر قرار داد. به این کار تودرتویی (Nesting) گفته می‌شود. به عنوان مثال، اگر لازم باشد یکی از کلمات در یک جمله با فونت درشت نمایش داده شود، می‌توان آن کلمه را در داخل یک تگ <strong> قرار داد.

فیلم آموزش طراحی سایت با HTML و CSS ویژه کودکان و نوجوانان در فرادرس

کلیک کنید

این یعنی آن کلمه باید به صورت درشت و تأکید شده نمایش داده شود. یک نمونه کد برای این مثال در ادامه آمده است.

1<p>My cat is <strong>very</strong> grumpy.</p>

تگ‌های یک عنصر باید همیشه به درستی باز و بسته شوند تا در عناصر تودرتو، به درستی در داخل یا خارج یکدیگر قرار بگیرند. در مثال بالا، ابتدا عنصر <p> باز شد و پس از آن، تگ آغازین عنصر <strong> قرار داده شده است. بنابراین، ابتدا باید تگ <strong> بسته شده (<strong/>) و تنها پس از آن، عنصر <p> را بست.

عناصر خالی

برخی از عناصر در زبان برنامه نویسی HTML محتوایی ندارند که به آن‌‌ها عناصر خالی گفته می‌شود. به عنوان مثال می‌توان عنصر <img> را در نظر گرفت. مثالی از کد HTML‌ برای تعریف یک عنصر <img> در ادامه آمده است.

1<img src="images/firefox-icon.png" alt="My test image">

همان‌طور که در کد HTML بالا مشخص است،‌ عنصر <img> دارای دو صفت است، اما هیچ تگ انتهایی برای بست عنصر وجود ندارد. طبیعتاً هیچ محتوایی هم در داخل عنصر <img> وجود ندارد. این مسئله به این خاطر است که ماهیت عنصر <img> در بر گرفتن محتوا برای تغییر آن نیست. هدف این عنصر تعبیه یک تصویر در صفحه HTML است، این تصویر در همان محل درج عنصر تصویر در صفحه نمایش داده خواهد شد.

ساختار یک صفحه HTML

عناصر ابتدایی و اساسی HTML به صورت مستقل کارایی ندارند. در اصل، این ترکیب عناصر HTML است که یک صفحه HTML کامل را به وجود می‌آورد. در این بخش از آموزش مقدماتی زبان برنامه نویسی HTML نحوه ادغام عناصر HTML‌ برای تشکیل یک صفحه کامل HTML ارائه شده است. برای ایجاد یک صفحه HTML ابتدا باید یک فایل متنی با نام دلخواه ایجاد شود. کدهای HTML در داخل این فایل قرار داده می‌شوند.

فیلم آموزش اچ تی ام ال – طراحی وب با HTML – مقدماتی در فرادرس

کلیک کنید

برای ساخت یک صفحه HTML می‌توان از یک ویرایش‌گر متن ساده مثل نرم‌افزار Notepad‌ استفاده کرد. برای تبدیل فایل متنی به فرمت HTML باید پسوند آن را به «html.» تغییر داد. به عنوان مثال و برای نمایش ساختار یک صفحه HTML کدهای زیر باید در فایل ایجاد شده کپی شوند.

1<!DOCTYPE html>
2<html>
3  <head>
4    <meta charset="utf-8">
5    <title>My test page</title>
6  </head>
7  <body>
8    <img src="images/firefox-icon.png" alt="My test image">
9  </body>
10</html>

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

• <DOCTYPE html!> : تگ doctype یک مقدمه الزامی است. در زمان‌های دور،‌ وقتی HTML جوان بود (حدوداً سال ۱۳۷۰)،‌ doctypeها با هدف ایجاد ارتباط با یک مجموعه قواعد استفاده می‌شدند که صفحه HTML باید از آن‌ها پیروی می‌کرد تا به عنوان HTML‌ مطلوب در نظر گرفته شود. این به معنای بررسی خودکار خطاها و سایر موارد کاربردی بود. اگرچه امروزه، doctypeها کار چندانی انجام نمی‌دهند و فقط برای اطمینان از اینکه سند HTML به درستی رفتار می‌کند به کار می‌روند. در سطح مبتدی، اطلاعات در مورد doctype در همین حد کافی است.
• <html></html>:‌ عنصر <html> تمام محتوای یک صفحه را در داخلش محصور می‌کند و گاهی به عنوان عنصر ریشه شناخته می‌شود.
• <head></head>: عنصر <head> به عنوان یک محفظه برای تمام عناصری استفاده می‌شود که قصد نمایش محتوای آن‌ها به بازدید کنندگان صفحه HTML‌ وجود ندارد. این عناصر شامل مواردی مثل کلمات کلیدی، توضیحات صفحه برای ظاهر شدن در نتایج جستجو،‌ کدهای CSS برای طراحی محتوا، تعریف مجموعه کاراکترها و سایر موارد می‌شود.
• <meta charset="utf-8"‎>: این عنصر، مجموعه کاراکتری (Character Set) را که سند مربوطه باید از آن استفاده کند، روی UTF-8 تنظیم می‌کند. UTF-8 حاوی اکثر کاراکترها در تعداد زیادی از زبان‌‌های نوشتاری است. به این وسیله، لزوماً امکان مدیریت و ویرایش هر نوع محتوای متنی برای استفاده در صفحه HTML‌ وجود دارد. دلیلی وجود ندارد که مجموعه کاراکتر را تنظیم نکرد چرا که، این کار می‌تواند از بروز برخی مشکلات در آینده جلوگیری کند.
• <title></title>: عنصر <title> همان‌طور که از نامش پیداست برای تنظیم و تعیین عنوان صفحه HTML‌ استفاده می‌شود. این عنوان در سربرگ (Tab) مرورگری که صفحه در آن بارگذاری شده ظاهر می‌شود. همچنین، این عنوان برای زمانی که صفحه نشان‌دار (Bookmark) می‌شود مورد استفاده قرار می‌گیرد. نشان‌دار کردن صفحه به معنی قرار دادن آن در لیست علاقه‌مندی‌های مرورگر است.
• <body></body>: عنصر <body> حاوی تمام محتوایی است که در زمان بازدید از صفحه مربوطه به کاربران وب نمایش داده می‌شود. چه این محتوا متن، تصویر، ویدئو،‌ بازی، قطعات صوتی قابل پخش و چه هر چیز دیگری باشد.

معرفی مطالب پروژه محور زبان برنامه نویسی HTML مجله فرادرس

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

• Metadata در HTML — راهنمای جامع: در این مطلب، در خصوص Metadata یا قسمت Head در HTML که هنگام بارگذاری صفحه وب به کاربر نمایش داده نمی‌شود، بحث شده است. برای مطالعه مطلب «Metadata در HTML — راهنمای جامع» + کلیک کنید.
• تگ های سفارشی در HTML — به زبان ساده: در این مطلب، یک روش ساده برای بسط زبان HTML با استفاده از تگ‌های سفارشی انجام شده است. برای مطالعه مطلب «تگ های سفارشی در HTML — به زبان ساده» + کلیک کنید.
• تصاویر در HTML — راهنمای کاربردی: در این مقاله، به بررسی دقیق چگونگی استفاده از عنصر img در HTML، پرداخته شده است. برای مطالعه مطلب «تصاویر در HTML — راهنمای کاربردی» + کلیک کنید.
• سند و ساختار وب سایت در HTML — راهنمای کاربردی: در این نوشته، به بررسی روش طراحی ساختار یک وب‌سایت کوچک پرداخته شده است. برای مطالعه مطلب «سند و ساختار وب سایت در HTML — راهنمای کاربردی» + کلیک کنید.
• محتوای ویدیویی و صوتی در HTML — راهنمای کاربردی: در این مقاله، افزودن محتوای ویدئویی و صوتی در سندهای HTML را با استفاده از عناصر <video> و <audio> اجرا شده است. برای مطالعه مطلب «محتوای ویدیویی و صوتی در HTML — راهنمای کاربردی» + کلیک کنید.
• HTML و هر آنچه باید پیش از شروع یادگیری آن بدانید — راهنمای مقدماتی و کاربردی: در این مقاله، به اصول اولیه زبان HTML‌ پرداخته شده است. برای مطالعه مطلب «HTML و هر آنچه باید پیش از شروع یادگیری آن بدانید — راهنمای مقدماتی و کاربردی» + کلیک کنید.
• دیباگ کردن کدهای HTML — راهنمای کاربردی: در این نوشته، برخی از ابزارهایی که به دیباگ کدهای HTML و یافتن خطاها در آن‌ها کمک می‌کنند، معرفی شده است. برای مطالعه مطلب «دیباگ کردن کدهای HTML — راهنمای کاربردی» + کلیک کنید.
• ایجاد هایپرلینک در HTML — راهنمای کاربردی: در این مقاله، به بررسی ساختار مورد نیاز برای ساخت یک لینک پرداخته شده است. برای مطالعه مطلب «ایجاد هایپرلینک در HTML — راهنمای کاربردی» + کلیک کنید.
• فرم HTML — راهنمای جامع: در این مقاله، به بررسی روش مقدماتی ساخت فرم HTML پرداخته و طراحی یک فرم ساده انجام شده است. برای مطالعه مطلب «فرم HTML — راهنمای جامع» + کلیک کنید.
• ۸ افکت HTML برای زیباتر شدن وبسایت: در این مقاله هشت افکت HTML معرفی شده است که می‌توانند بدون هیچ هزینه‌ای، عملکرد و «تجربه‌ی کاربری» (User Experience) وبسایت را بهبود ببخشند. برای مطالعه مطلب «۸ افکت HTML برای زیباتر شدن وبسایت» + کلیک کنید.
• ارسال فرم HTML با جاوا اسکریپت — راهنمای جامع: در این مطلب، آشنایی لازم با روش آماده‌سازی یک درخواست HTML برای ارسال از طریق جاوا اسکریپت بدست می‌آید. برای مطالعه مطلب «ارسال فرم HTML با جاوا اسکریپت — راهنمای جامع» + کلیک کنید.
• ساختاردهی فرم های HTML — راهنمای جامع: در این مطلب به بررسی برخی عناصر پرداخته شده است که برای ساختاردهی فرم های HTML کابرد دارند. برای مطالعه مطلب «ساختاردهی فرم های HTML — راهنمای جامع» + کلیک کنید.
• استایل‌بندی پیشرفته فرم های HTML — راهنمای جامع: در این مطلب به استایل‌بندی پیشرفته فرم های HTML پرداخته شده است. برای مطالعه مطلب «استایل بندی پیشرفته فرم های HTML — راهنمای جامع» + کلیک کنید.
• تگ های کم کاربرد اما کارآمد HTML — راهنمای کاربردی: در این مقاله، آشنایی با برخی تگ های کم کاربرد اما کارآمد HTML حاصل خواهد شد. برای مطالعه مطلب «تگ های کم کاربرد اما کارآمد HTML — راهنمای کاربردی» + کلیک کنید.
• ایجاد نوار ناوبری واکنش گرا با HTML ،CSS و جی کوئری – از صفر تا صد: در این مقاله، تمام مراحل مورد نیاز برای ساخت یک نوار ناوبری ساده بررسی شده و آشنایی با روش واکنش‌گرا ساختن آن بدست می‌آید. برای مطالعه مطلب «ایجاد نوار ناوبری واکنش گرا با HTML ،CSS و جی کوئری – از صفر تا صد» + کلیک کنید.
• عنصر Dialog در HTML — از صفر تا صد: در این مقاله، عنصر Dialog در HTML معرفی شده و کارهایی که می‌توان به وسیله آن‌ انجام داد شرح داده شده است. برای مطالعه مطلب «عنصر Dialog در HTML — از صفر تا صد» + کلیک کنید.
• قالب بندی پیشرفته متن در HTML — راهنمای کاربردی: در این مقاله، روش نشانه‌گذاری نقل‌قول‌ها، لیست‌های توصیفی، کد رایانه و دیگر متن‌های مرتبط، زیرنویس و بالانویس، اطلاعات تماس و مواردی دیگر از این دست آموزش داده شده است. برای مطالعه مطلب «عنصر Dialog در HTML — از صفر تا صد» + کلیک کنید.

فیلم آموزش HTML و طراحی وب

در بخش پایانی مطلب زبان برنامه نویسی HTML چیست، دوره‌ها و فیلم‌های آموزش HTML و سایر فیلم های آموزش طراحی وب معرفی شده‌اند. این دوره‌ها برای طراحی سایت بسیار مفید و کاربردی هستند. در ادامه این بخش، ابتدا دوره آموزش طراحی وب با HTML (مقدماتی) معرفی شده است.

فیلم مجموعه آموزش طراحی سایت با HTML و CSS – مقدماتی تا پیشرفته در فرادرس

کلیک کنید

فیلم آموزش طراحی وب با HTML – مقدماتی

طول مدت دوره آموزش طراحی وب با HTML (مقدماتی) سه ساعت و پنجاه و شش دقیقه است و مدرس آن مهندس محمد عبدللهی هستند. این دوره برای علاقه‌مندانی که قصد دارند به تازگی طراحی وب و ساخت وب‌سایت را آغاز کنند مناسب است و به عنوان پیش‌نیاز اساسی برای شروع توسعه وب محسوب می‌شود. از جمله سرفصل‌های این دوره آموزشی می‌توان به مقدمات HTML،‌ تگ‌های Text Formatting، عکس‌ها در صفحه وب، مروری بر CSS، لیست‌ها و سایر موارد اشاره کرد.

• برای دیدن فیلم‌ آموزش آموزش طراحی وب با HTML – مقدماتی + اینجا کلیک کنید.

فیلم آموزش طراحی وب با HTML – تکمیلی

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

• برای دیدن فیلم‌ آموزش طراحی وب با HTML – تکمیلی + اینجا کلیک کنید.

آموزش طراحی وب با CSS - مقدماتی

طول مدت این آموزش چهار ساعت و سی و چهار دقیقه است و مدرس آن مهندس محمد عبداللهی هستند. این آموزش برای افراد و علاقه‌مندان مبتدی که قصد یادگیری و آموزش طراحی وب با HTML و CSS‌ را دارند مناسب است. در این آموزش، تقریباً تمام مفاهیم و موضوعات مقدماتی در رابطه با CSS پوشش داده شده است. برخی از این سرفصل‌ها شامل  مقدمات CSS، استایل‌دهی به عناصر CSS، مفاهیم باکس در CSS و سایر موارد است.

• برای دانلود فیلم‌ آموزش طراحی وب با CSS - مقدماتی + اینجا کلیک کنید.

فیلم آموزش طراحی وب با CSS3) CSS) - تکمیلی

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

• برای دیدن فیلم آموزش طراحی وب با CSS3) CSS) - تکمیلی + اینجا کلیک کنید.

فیلم آموزش HTML و CSS پروژه محور

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

• برای دیدن فیلم آموزش آموزش پروژه محور HTML و CSS + اینجا کلیک کنید.

جمع‌بندی

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

فیلم مجموعه آموزش طراحی و برنامه ‌نویسی سایت – مقدماتی تا پیشرفته در فرادرس

کلیک کنید

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