آموزش html فرادرس2023-02-20
HTML چیست؟ از کاربرد تا مفاهیم اولیه + مثال فرادرس مجله
مرورگر صفحه را بر اساس عناصر تعریف شده در کد HTML میسازد و به همراه شیوهنامه CSS برای استایل بخشیدن به این عناصر کار میکند. سال ۱۳۷۷ (1999 میلادی) توسعه «HTML4.01» به وقوع پیوست که از گزینههای چندرسانهای، شیوهنامهها، امکانات چاپ و زبانهای برنامه نویسی اضافی پشتیبانی میکرد. با گذشت زمان، HTML5 به استاندارد تبدیل شد و از سال ۱۴۰۱، «HTML5.2» در حال استفاده است. HTML5.2 به عنوان آخرین نسخه این فناوری وب تأکید زیادی بر سیاست امنیت محتوا دارد و نیازهای عصر معاصر را به خوبی برطرف میکند. HTML، مخفف «Hypertext Markup Language» است و زبان سادهای محسوب میشود که در ایجاد صفحات وب استفاده میشود.
کسب مهارت در HTML برای افرادی که مایل به دنبال کردن توسعه وب هستند بسیار مهم است. توسعهدهندگان وبی که HTML را یاد بگیرند فرصتهای شغلی متعددی را پیش روی خود میبینند. از کار به صورت فریلنسری گرفته تا پیادهسازی پروژههای شخصی و کار برای شرکتهای برنامه نویسی و طراحی سایت همه و همه فرصتهای شغلی مناسبی هستند. تقاضا برای توسعهدهندگان وب ماهر نهتنها در عصر حاضر بسیار قابل توجه است، بلکه سودآور زیادی هم دارد. برای مثال در سال ١٤٠١، متوسط دستمزد توسعهدهندگان وب ٩٨٥٦٥ دلار تخمین زده شد که نشاندهنده پتانسیل مناسب این حوزه در دنیای برنامه نویسی است. از طرفی دیگر شرکتها به هنگام استخدام توسعهدهندگان وب، به دنبال افرادی هستند که درک قوی از HTML دارند.
در مثال بالا، ابتدا ایموجی روی عرض ثابت ۴۰۰ پیکسل تنظیم شده است. سپس، زمانی که Viewport، ۴۰۰ پیکسل یا کوچکتر است، آن را به ۳۰۰ پیکسل کاهش میدهد. در نهایت، برای صفحههای ۳۰۰ پیکسل یا کوچکتر، حداکثر عرض روی ۳۰۰ پیکسل تنظیم شده و اطمینان حاصل میشود که مقیاس آن همیشه ۱۰۰ درصد از عرض موجود در کانتینر را اشغال کند. اگر با CSS آشنایی ندارید، توصیه میکنیم تا راهنمای CSS مجله را مطالعه کنید تا درک بهتری از ویژگیها، سینتکس، انتخابگرها و ویژگیهای آن داشته باشید. البته قطعا مطالعه مقالات از رفرنس های معتبر در قالب آموزش HTML pdf به شما کمک بیشتری میکنه که در طول دوره اونهارو به شما معرفی میکنیم.
بخش های سایت
به جای استفاده از Flash Player میتوان به راحتی فایلهای صوتی و ویدئویی را با استفاده از تگهای و در صفحات وب قرار داد. همچنین، HTML5 از تصاویر گرافیکی برداری مقیاسپذیر (Scalable Vector Graphics | SVG) و MathML برای فرمولهای ریاضی و علمی پشتیبانی میکند. «[+] Codecademy» دورههای مقدماتی رایگانی را به همراه آموزشهای تعاملی ارائه میدهد. همچنین این پلتفرم خارجی مجهز به نوعی رابط صفحه نمایش برای کدنویسی است که کاربران میتوانند در آن تمرینات HTML را آغاز کرده و نتایج بلادرنگ را مشاهده کنند. بعد از آن تمام این دستورات را همراه با مثال سادهای یک به یک توضیح داده و کدهای مربوط به آنها را نمایش دادیم. در نهایت هم دستورات معادل علمیات CRUD را در زبان کوئری نویسی SQL معرفی کردیم.
از اضافه کردن یه عکس به سایت گرفته، تا دسته بندی کردن مطالب و ساختار بندی هر بخش سایت، همرو میتونی با دوره آموزش HTML سبزلرن پیاده کنی. HTML به عنوان یک زبان نشانهگذاری شناخته میشود که به شما اجازه میدهد ساختار یک صفحه وب را به شکلی که مد نظر دارید ایجاد کنید. ما در دوره آموزش HTML سعی کردهایم خیلی ساده و سریع و رایگان این زبان نشانگذاری را به شکل کامل به شما آموزش دهیم. تعداد تگهای مختلفی که هر کدام فقط با مرورگر خاصی سازگاری داشتند، روزبهروز بیشتر میشد. این مسئله به وضوح نشان میداد که نیاز به وضع یک استاندارد جدید وجود دارد.
کدنویسی وب سایت چقدر طول می کشد؟
یادگیری HTML تنها چند روز برای خواندن و آموزش کدهای مورد نیاز زمان میبرد. وقتی آشنایی کافی با تگها بدست آید، میتوان به راحتی صفحه HTML ساخت. اگرچه، استفاده از HTML برای طراحی سایتهای خوب بحث جداگانهای دارد. با توجه به موجود بودن منابع متعدد، یادگیری زبان برنامه نویسی HTML بسیار ساده است. HTML به طور مداوم در حال بازبینی و تحول است تا بتواند تقاضا و نیازمندیهای روزافزون مخاطبان اینترنت را تحت مدیریت کارگروه W3C برآورده کند. W3C سازمانی است که مسئولیت طراحی و نگهداری زبان برنامه نویسی HTML را برعهده دارد.
این ویژگیها نه تنها تعامل کاربر را افزایش میدهد، بلکه بازدیدکنندگان را قادر میسازد تا تجربه خود را بر اساس اولویتها و نیازها تنظیم کنند. این متا تگ به همه مرورگرها و دستگاهها دستور میدهد تا اندازهگیریهای پیکسل را به طور مداوم تفسیر کنند. به عبارت سادهتر، دستگاههای تلفن همراه و مرورگرها صفحه را به همان مقیاسی که روی دسکتاپ ظاهر میشود تنظیم میکنند.
اگر متد GET را ده بار پشت سر هم بر روی اطلاعات یکسانی فراخوانی کنیم، بار دهم هم باید همان پاسخی را دریافت کنیم که در بار اول دریافت کرده بودیم. با کمک متد GET حتی میتوانیم کل آیتمهای ذخیره شده در لیست را فراخوانی کرده و مشاهده کنیم. در این مطلب از مجله فرادرس، متوجه میشویم که CRUD چیست و از چه دستورهایی تشکیل شده است.
در این بخش از آموزش ساخت سایت داده HTML، به استایلبندی صفحه طراحی شده مرحله قبل میپردازیم. برای درک بهتر فرایند استایل بخشی به سایت با زبان شیوهنامه CSS، بیایید به همان مثال ساخت خانه باز گردیم. CSS در طراحی سایت مانند افزودن نما، رنگ دیواڤ، دکوراسیون و عناصری بصری در ساخت خانه است. HTML ساده فاقد ویژگیهای بصری بوده و جذابیت چندان خاصی ندارد. برای افزودن عناصر بصری و جذاب کردن طراحی از CSS باید استفاده کرد.
HTML 4.01 تحولی اساسی در استانداردهای زبان برنامه نویسی HTML و آخرین بازنویسی HTML سنتی (کلاسیک) به حساب میآید. در مراحل ابتدایی توسعه، از آن با لقب COUGAR (به معنی گربه وحشی) نام برده میشد. این بار، اکثر قابلیتهای جدید ارائه شده برای بهبود کاستیهای HTML 3.0 ارائه شدند. همچنین، مجموعهای از مرتبسازیها و اصلاحات تگهای قدیمی، تمرکز بر جهانیسازی و پشتیبانی از پدیده جدید صفحات پیاپی مشبک (Cascading Style Sheet | CSS) انجام شدند. در ادامه مطلب زبان برنامه نویسی HTML چیست تاریخچه HTML به طور کامل و به ترتیب برای هر نسخه شرح داده شده است. این تگ های HTML است که یک متن معمولی را از کد HTML تفکیک میکنند.
افزودن محتوا به تگ Body
از آنجا که هر یک از این زبانها به زبان مشترکی (XML) نوشته شدهاند، محتوای آنها به راحتی می تواند در میان برنامه ها به اشتراک گذاشته شود. این مسئله، به طور بالقوهای XML را تبدیل به یک زبان نشانهگذاری بسیار قدرتمند کرده است. به همین دلیل، جای تعجبی ندارد که W3C یک نسخه XML از HTML بسازد (که XHTML نامیده میشود). XHTML در سال 1380 تبدیل به یک استاندارد رسمی و در سال ۱۳۸۲ بهروزرسانی شد.
آموزش ساخت منوی کشویی با Css و Html
بنابراین، در ادامه مطلب زبان برنامه نویسی HTML چیست مزایا و معایبی که ممکن است طراحان سایت در روند توسعه وبسایت با استفاده از HTML با آن مواجه شوند، ارائه شده است. لازم است به این مسئله توجه داشت که HTML زبان برنامه نویسی نیست، بلکه یک زبان نشانهگذاری (Markup) است که ساختار محتوا را تعیین میکند. HTML دارای منطق برنامه نویسی نیست و عاری از عبارات شرطی مثل If و Else است.
برای ورود به دنیای طراحی سایت و برنامه نویسی وب، یادگیری HTML پیشنیازی ضروری است. HTML سنگ بنای توسعه وب محسوب میشود و یادگیری آن اولین قدم در توسعه وب است. بعد از آن که فهمیدیم که HTML چیست، چه کاربردی دارد و چگونه کار میکند آگهی یافتن از مقدمات این زبان نشانهگذاری متن هم خالی از لطف نیست و به مجموعه مهارتهای ما خواهد افزود. از ۳ دهه قبل HTML به عنوان زبان پیشفرض برای اسناد و وبسایتهای مبتنی بر وب مورد استفاده قرار میگیرد. وظیفه اصلی این فناوری محبوب همکاری با مرورگرهای وب و کمک به درک ساختار و سبک وبسایتها به وسیله این مرورگرها است. اساساً، HTML به عنوان نوعی طرح اولیه عمل میکند و مرورگر وب قادر است با استفاده از آن صفحه وب را هنگام وارد کردن URL به وسیله کاربران، به آنها نمایش دهد.
ویژوال استودیو کد به ویژه دارای قابلیتهایی است که عملکردهای اضافی را به ویرایشگر اضافه میکند، مانند گزینه جابجایی بین حالتهای تاریک و روشن. همچنین این ویرایشگر کد این دارای جامعه کاربری اختصاصی است که به طور مداوم افزونههای بیشتری برای آن ایجاد میکنند. ساختار تودرتو به سازماندهی و قالببندی محتوای در صفحه وب کمک میکند.
HTML چگونه کار می کند؟
سند HTML به عنوان نوعی راهنما برای مرورگر وب کاربر عمل میکند و مرورگر به کمک آن صفحات را به کابران به نمایش در میآورد. این رندر نوعی فرآیند ساخت و ساز واقعی است که هر بار که شخصی به صفحه خاصی در سایت هدایت میشود، رخ میدهد. هر گونه مشکل در سند HTML یا فایلهای مرتبط با آن می تواند روند رندرینگ را مختل کند.
با وجود امکان ذخیره داده در مرورگر، یک توسعهدهنده میتواند راهحلی بیابد تا حتی در صورت قطعی اینترنت، وباپلیکیشن بتواند همچنان در حالت اجرا باقی مانده و به کار خود ادامه دهد. HTML5 دارای ساز و کار ذخیرهسازی موقت اپلیکیشن است که نحوه مدیریت شرایط آفلاین توسط مرورگر را تعیین میکند. در واقع، حافظه موقت اپلیکیشن که مسئولیت امکانات آفلاین را برعهده دارد، از اجزای مختلفی تشکیل شده است. با استفاده از یک صفت خاص در HTML5 یک توسعهدهنده میتواند بررسی کند که آیا یک اپلیکیشن آنلاین است یا خیر. آنها خود را کارگروه تعیین تکنولوژی نحوه استفاده از ابرمتن وب (Hypertext Application Technology Working Group | WHATWG) نامیدند و یک نسخه جدید توسعه دادند. پس از بررسی و واکاویهای متعدد، W3C به این نتیجه رسید که HTML همچنان آینده وب به حساب میآید.
برای مثال، به منظور پیدا کردن کتاب، میتوان از نام کتاب، نام نویسنده یا شماره ISBN به صورت مجزا یا در ترکیب با هم استفاده کرد. این تابع هم هیچ تغییری در اطلاعات فراخوانی شده ایجاد نمیکند. تا به اینجای مطلب نحوه ساخت نمونه سایت ساده با HTML را یاد گرفتیم اما این تازه اول کار بوده و هنوز راه درازی باقی ماند است. در زیر نقشه راهی ساده و ابتدایی برای یادگیری طراحی سایت به صورت حرفهای آورده شده است.
تگهای تکی بخشی از سند را تحت تاثیر قرار نمیدهند، بلکه کار مشخصی را در جای خود انجام میدهند. به عنوان مثال برای این گونه تگها میتوان از شکستگی خط یا پاراگراف نام برد. همانطور که در کد HTML بالا مشخص است، عنصر دارای دو صفت است، اما هیچ تگ انتهایی برای بست عنصر وجود ندارد. این مسئله به این خاطر است که ماهیت عنصر در بر گرفتن محتوا برای تغییر آن نیست. هدف این عنصر تعبیه یک تصویر در صفحه HTML است، این تصویر در همان محل درج عنصر تصویر در صفحه نمایش داده خواهد شد.
با HTML به هیچ وجه نمیتوان دادهها را تغییر داد یا آنها را ویرایش کرد. HTML در اصل زبان اصلی اینترنت محسوب میشود و نقش به سزایی در دنیای آنلاین امروزی دارد. ادغام آن با پلتفرمهای پرکاربرد مانند وردپرس بر اهمیت آن تأکید زیادی دارد. یادگیری HTML فرصتهایی را برای سفارشی کردن قالبهای سیستمهای مدیریت محتوا مانند وردپرس باز میکند. اساساً CSS ظاهر اسناد HTML را شکیلتر و کاربرپسندتر میکند و به طراحان وب انعطافپذیری و کنترل بیشتری بر جنبههای بصری وبسایت ارائه میدهد.
«[+] General Assembly Dash» نوعی منبع آموزشی HTML خارجی بوده که برای مبتدیان طراحی شده است و پروژههای عملی را برای زبان آموزان در طراحی وب ارائه میدهد. این پلتفرم با استفاده از رویکردی مبتنی بر هدف، بر کاربردهای دنیای واقعی HTML تأکید دارد و آموزش ارائه میدهد. پس از تکمیل پروژهها، شرکتکنندگان میتوانند یک دوره مربیگری آنلاین را انتخاب کنند که پس از اتمام، گواهینامه نیز به آنها اعطا میکند. اطلاعاتی در مورد بخشهای مختلف متن سند ارائه میکنند و میتوانند شامل تگهای دیگر به عنوان عناصر فرعی باشند.
جمع بندی دوره آموزش HTML
قدم نهایی برای ساخت نمونه رزومه ساده با HTML، ذخیر فایل و اجرای آن در مرورگر است. برای این هدف باید فایل HTML را با پسوند .htmlذخیره و آن را در مروگر باز کرد. با این کار صفحه ساخته شده در مرورگر باز شده و کاربران میتوانند رزومه را نگاه کنند. همچنین برای شکیلتر کردن صفحه رزومه میتوان از CSS بهره برد و ظاهر آن را بسیار بهبود بخشید.
- {
- در پلتفرم فرادرس انواع دورههای آموزشی جاوا اسکریپت موجود است که میتوانید از آنها بهره ببرید. |}
- فراموش کردن استفاده از تگ انتهایی یکی از اولین خطاهایی است که مبتدیان با آن مواجه میشوند.
- این منابع به شما امکان میدهند تا به صورت همیشگی و در زمانی که برای شما مناسب است، به یادگیری HTML بپردازید و مهارتهای خود را تقویت کنید. {
- به همین دلیل فضای اشتغال برای افراد دارای مهارت طراحی سایت تقریبا همیشه باز است. |}{
- هر صفحه وب دارای انواع عناصر درون صفحه و خارج از صفحه است که همه به دقت در اسناد HTML ساختار یافتهاند. |}
- یعنی HTML دادهها را محصور میکند یا آنها را در داخل تگهای (برچسبهای) HTML «علامتگذاری» میکند.
کارهای پیچیدهتر توسط زبانهایی نظیر PHP یا جاوا انجام میشوند که در این مطلب به آنها نخواهیم پرداخت. اگر تصمیم دارید که به یک توسعه دهنده Front-End و طراح وبسایت تبدیل شوید باید HTML را به شکل کامل یاد بگیرید. ما در دوره آموزش HTML سعی کردهایم به شکل کامل و کاربردی و البته رایگان این زبان نشانهگذاری را به شما آموزش دهیم.
در این بخش از آموزش ساخت نمونه سایت داده با HTML به مسئله تعاملی کردن وبسایتها خواهیم پرداخت و وبسایت ساختهشده خود را تعاملی خواهیم کرد. مهمترین نکته این است که یادگیری HTML نسبتاً ساده است و منابع آموزش html رایگان زیادی در دسترس هستند. میتوانید از منابع آنلاین، کتابها، دورههای آموزشی و مستندات رسمی HTML استفاده کنید تا به طور کامل با این زبان آشنا شوید. کمک گرفتن از آموزش html رایگان اهمیت های فراوانی میتواند داشته باشد که مهمترین آنها دسترسی آسان بدون پرداخت هزینه خواهد بود.
تگ ابتدایی
با مشخص کردن آدرس مقصد و قرار دادن تگ در دو طرف یک متن، میتوانید به آن آدرس یک لینک ایجاد کنید. همچنین از این طریق میتوانید در بخش نظرات بسیاری از وبسایتها نیز لینک ایجاد نمایید. تصاویر به بخشی اصلی از صفحات HTML تبدیل شدهاند، ولی با این حال هنوز هم برای ایجاد آنها نیاز به کدهای خاص است. تگ یکی از دو تگی است که در این مطلب به جزئیات آن خواهیم پرداخت تا بتوانید مورد استفاده قرار دهید. همانطور که در بالاتر اشاره کردیم، HTML متن خالص را به گونهای تغییر میدهد که بتوانیم برای آن ظاهر و هدف تعریف کنیم.
اگر میخواهید بیشتر وارد HTML شده و بتوانید به کمک آن اقدام به طراحی یک وبسایت پایه و استاتیک کنید، میتوانید از «آموزش طراحی وب با HTML – مقدماتی» در فرادرس استفاده نمایید. ما سعی کردهایم در قالب این دوره موارد مهم و مختلفی که شما برای یادگیری HTML به آن نیاز دارید را قدم به قدم از صفر مطلق تا جایی که نیاز است، در طی جلسات مختلف به شما آموزش دهیم. شما برای یادگیری HTML از طریق این دوره به مقدار زیادی اشتیاق به یادگیری و پیشرفت، با چاشنی اراده و اندکی تصمیم به ورود به دنیای طراحی وب دارید.
HTML 4.01 و پشتیبانی از CSS
زیرا دستورهای CRUD بیشتر از همه برای کار با API-ها استفاده میشوند. تقریبا تمامی صنایع و کسبوکارها برای توسعه و رشد خود به اینترنت متکی هستند. به همین دلیل فضای اشتغال برای افراد دارای مهارت طراحی سایت تقریبا همیشه باز است.
{گواهی پایان دوره
|}یک عنصر HTML یا HTML Element به وسیله یک تگ آغازین تعریف میشود. اگر عنصر محتوایی را در خود جای داده باشد، با یک تگ پایانی بسته میشود. در مثالی که برای تگ HTML در بالا ارائه شد، تگ آغازین برای عنصر b است و چون این عنصر در داخلش متن وجود دارد باید با تگ پایانی بسته شود. کدهای بالا، آیتم جدیدی را با مقدار Avocado Toast به ازای نام name و مقدار 8 به ازای قیمت price ایجاد میکند. در صورتی که عملیات ساخت عنصر جدید در پایگاه داده با موفقیت انجام شود، سرور پاسخی را برمیگرداند که شامل Header و بدنه Response است. داخل بخش Header در پاسخ، لینکی به منبع ساخته شده جدید وجود دارد و در بخش Body پاسخ کد 201 قرار داده میشود.
در نخستین بخش از این سری مطالب، به مبانی مقدماتی HTML پرداخته و عناصر، خصوصیتها و همچنین دیگر اصطلاحهای مهم که ممکن است شنیده باشید را توضیح میدهیم. همچنین شیوه سازماندهی عناصر HTML، چگونگی سازماندهی صفحه HTML و دیگر ویژگیهای مهم زبان HTML را توضیح دادهایم. در این مسیر با برخی مفاهیم HTML نیز در عمل کار میکنیم تا انگیزه یادگیری شما را حفظ کنیم. ما در مجله فرادرس در طی ماههای اخیر سری مطالب آموزشی با موضوع HTML ارائه کردهایم که فهرست آنها به صورت زیر است. توجه کنید که این مطلب در چهار دسته کلی «معرفی HTML»، «امکانات چندرسانهای HTML»، «جداول HTML» و «فرمهای HTML» ارائه شدهاند.
{یادگیری HTML چقدر زمان میبرد ؟
|}در حالی که HTML و CSS برای ایجاد صفحه وب قابلمشاهده کمی حیاتیتر هستند اما از طرفی دیگر جاوا اسکریپت هم بسیار مهم است. این زبان برنامه نویسی کاربران را قادر میسازد تاکتیکهای برنامهنویسی را پیادهسازی کرده و لایههای جدیدی از تعامل را به سایتهای ثابت اضافه کنند. کاربردهایی مانند بانکداری آنلاین، رسانههای اجتماعی، خدمات تحویل غذا و موارد دیگر همه و همه از جاوا اسکریپت بهره میبرند. در پلتفرم فرادرس انواع دورههای آموزشی جاوا اسکریپت موجود است که میتوانید از آنها بهره ببرید. HTML مخفف «Hypertext Markup Language» بوده و اساس و پایه توسعه و طراحی سایت است. برای درک بهتر وظیفه HTML بیایید فرایند ساخت خانه را بررسی کنیم.
{استفاده از جاوا اسکریپت برای تعاملی کردن سایت ساخته شده با HTML
|}اگر وبسایت نتواند از صفحهنمایشهای کوچک تلفن تا تلویزیونهای هوشمند پشتیبانی کند، کاربران زیادی را به احتمال زیاد از دست خواهد داد. در دنیای امروز، اینترنت بخشی جداییناپذیر از زندگی ما شده است و تقریباً همه چیز از خرید و فروش تا یادگیری و ارتباطات به واسطه وبسایتها انجام میشود. در این میان، یادگیری HTML و CSS به عنوان دو ابزار اساسی برای ساخت و طراحی صفحات وب، میتواند شما را به دنیایی پر از فرصتهای شغلی و خلاقیت وارد کند. اشنایی با مهم ترین تگ ها در پیاده سازی صفحات وب، تحلیل ساختار صفحات، پیاده سازی ساختار HTML صفحات مختلف ازجمله مهم ترین دستاورد های دیدن دوره آموزش HTML سبزلرن به شمار میره. مثال اول که با علامت «example-1» نشانهگذاری شده است نشان دهندهی یک جمله است که در داخل دو تگ قرار گرفته که یکی تگ شروع و دیگری تگ پایان نام دارد.
چون در کنار اون حداقل باید به CSS هم آشنا باشید تا بتونید رنگ و لعاب خوبی به صفحات بدید. مقدار «alt» مشخص میکند که هنگامی که ماوس خود را بر روی تصویر قرار دادید یا تصویر به هر دلیلی نمایش داده نشد، چه متنی به کاربر نشان داده شود. این تگها مشخص میکنند که یک تصویر با چه اندازهی نمایش داده میشود و چیزی راجع به اندازهی واقعی تصویر به ما نمیگویند. اندازهی تصویر را میتوان به پیکسل (مشابه 200 یا 200px) یا به درصد نوشت.
همانطور که متوجه شدیم، برای برقراری ارتباط بین کاربر و منابع مختلف در اپلکیشنها چهار عملیات اصلی انجام میگیرند. اغلب اوقات، دانشمندان علوم کامپیوتر این دستورها را به شکل خلاصه شده و با کلمه CRUD نام میبرند. اگر عملیاتی وجود داشت که قابل اجرا توسط هیچکدام از این ۴ دستور نبود، به احتمال زیاد باید به صورت مدل مجزایی تعریف شود.
{ویژگی های XHTML
|}«فرادرس» به عنوان یکی از قدیمیترین پلتفرمهای آموزش محور وب فارسی همواره با ارائه دورههای آموزشی به کاربران، خدمات زیادی داشته است. علاوه بر دورههای آموزش HTML، انواع دورههای آموزشی ترکیبی HTML و CSS و همچنین جاوا اسکریپت در این پلتفرم موجود است. وبسایتهای مدرن از عناصر متنوع HTML تشکیل شدهاند که این عناصر با استفاده از تگها و ویژگیها به وجود آمدهاند. اگر تگی علامت پایان یا آغاز نداشته باشد، میتواند منجر به گروهبندی ناخواسته محتوا شود و به طور بالقوه طرحبندی صفحه را تغییر دهد.
اما مشکل اینجا بود که این مرورگرها نمیتوانستند دقیقاً نتایجی مشابه Netscape تولید کنند و خروجیها متفاوت نمایش داده میشدند. یعنی اگر صفحهای با افزونه Netscape طراحی میشد، این صفحه در سایر مرورگرها به درستی نمایش داده نمیشد. این مسئله موجب سردرگمی و خشم پیشگامان عرصه نشانهگذاری (Markup) شد.
یک تگ یا برچسب هیچ کار خاصی انجام نمیدهد و فقط بخشی از سند را علامت میگذارد و مشخص میکند که چه کاری باید بر روی آن انجام شود. با این حال HTML نیز چیزی نیست که همهی افراد به آن آشنایی داشته باشند و نیازمند تخصص خود است. امروز در این مطلب میخواهیم طی چند دقیقه شما را کمی با ساختار HTML آشنا کنیم. بسیاری از تگهای بینمتنی برای قالببندی متن استفاده میشوند. برای مثال، یک تگ یک عنصر را به صورت درشت (بولد | Bold) رندر میکند، درحالیکه، تگهای آن را به صورت مورب (ایتالیک) نمایش خواهند داد. در سطح ابتدایی از کاربردهای HTML میتوان کوئریهایی (Query) را برای استفاده از تصاویری تنظیم کرد که به طور طبیعی واکنشگرا باشند.
برای درک مفهوم واکنشگرایی در وب، مثالی عینی در دنیای واقعی را در نظر میگیرم. آب موجود در برکه شکل ثابت خود را حفظ میکند زیرا لبهها برکه یا حوض در حالت عادی بدون تغییر باقی میمانند. در مقابل، لبههای جلگه همیشه در حال تغییر هستند که این باعث میشود آب منبسط و باریک شود تا به شکلهای مختلفی درآید. این تگ به ویژگی SRCنیاز دارد که مسیر فایل را به تصویری که کاربر میخواهد نمایش دهد را شامل میشود.
تا به اینجای کار از ساخت نمونه سایت ساده با HTML، صفحه ساخته شده از نوع ایستاتیک یا ثابت بود. در حالی که عناصر متن به طور پیشفرض تغییر اندازه میدهند، سایر عناصر شکل و اندازه اصلی خود را بدون توجه به تغییر صفحهنمایش حفظ میکنند. در شکل زیر، میتوان مشاهده کرد که سمت راست ایموجی اضافه شده به صفحه سایت بریده شده است زیر سایت ساخته شده ما واکنش گرا نبود. برای اینکه مرورگر محتوای مورد نظر را نمایش دهد، هر قسمت از محتوا باید بهصراحت مشخص شود.
آموزش html به زبان ساده