HTML چیست؟ از کاربرد تا مفاهیم اولیه + مثال فرادرس مجله‌

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

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

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

اصول واکنشگرایی سایت ها ( پایان فصل اول )

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

برای درک بهتر،‌ اگر فرض شود HTML‌ یک انسان است، می‌توان‌ CSS را مثل لباس‌های او و جاوا اسکریپت را حرکات و رفتار وی در نظر گرفت. همچنین، ابرلینک‌ها (Hyperlink) عناصر بین‌متنی (بین‌خطی | Inline) هستند که به وسیله تگ‌های احاطه شده و صفت href برای تعیین مقصد لینک استفاده می‌شود. XML‌ یک زبان نشانه‌گذاری استاندارد است که برای ایجاد زبان‌های نشانه‌گذاری دیگر استفاده می‌شود.

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

منظور از عرضه یک سند به کاربر، تبدیل کردن آن به شکلی است که مخاطب بتواند از آن استفاده کند. مرورگرها از قبیل فایرفاکس، کروم یا اج طوری طراحی شده‌اند که اسناد را به صورت بصری، برای نمونه روی صفحه رایانه، پروژکتور یا پرینتر عرضه کنند. منظور از «سند» (document) یک فایل متنی است که با استفاده از زبان نشانه‌گذاری، ساختاربندی یافته است. HTML رایج‌ترین زبان نشانه‌گذاری است اما زبان‌های دیگری مانند SVG یا XML نیز وجود دارند. این تگ نیز مثل تگ ابتدایی است با این تفاوت که یک علامت ممیز (/) قبل از نام عنصر وجود دارد. فراموش کردن استفاده از تگ انتهایی یکی از اولین خطاهایی است که مبتدیان با آن مواجه می‌شوند.

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

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

آموزش طراحی قالب واکنشگرا Responsive در css

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

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

برای نمونه می‌توان از آن برای تغییر دادن رنگ و اندازه عناوین و لینک‌ها استفاده کرد. از آن می‌توان برای ایجاد طرح‌بندی برای نمونه تبدیل یک ستون منفرد متنی به یک لی‌آوت با ناحیه محتوای اصلی و یک سایدبار برای اطلاعات مرتبط استفاده کرد. حتی می‌توان از آن برای جلوه‌هایی مانند انیمیشن نیز استفاده کرد. می‌توانید به کار روی style.css به صورت لوکال ادامه دهید و یا این که می‌توانید از ادیتور تعاملی که در ادامه ارائه شده است در این راهنما استفاده کنید.

برخی از این زبان‌ها شامل GML (زبان نشانه‌گذاری جغرافیا | Geography Markup Language) یا MathML ، MusicML و RSS (هم‌نشری بسیار ساده | Really Simple Syndication) است. منابع آموزشی رایگان و پولی متعددی برای یادگیری مهارت‌های HTML در اینترنت و وب موجود است که در ادامه این بخش مهم‌ترین این منابع آموزشی را معرفی خواهیم کرد. در توسعه وب مدرن، رویکرد مرسوم این است که از استفاده از ویژگی styleبرای تنظیمات طراحی عناصر خودداری شود. در عوض، استفاده از نوعی شیوه‌نامه CSS جداگانه برای استایل بخشیدن به کل صفحه استفاده می‌شود. در مثال اول روش استفاده از مقدارهای مربوط به طراحی حروف و رنگ پس‌زمینه متن را نمایش داده‌ایم.

{
• سازندگان مرورگرهای دیگر، سعی داشتند تأثیرات این تگ‌ها را همانند‌سازی کنند؛ به این دلیل که نمی‌خواستند از قافله عقب باشند.
|}{
• با این حال، طراحی سایت‌های مدرن امروزی فقط به این عناصر محدود نمی‌شود و خود HTML به تنهایی پاسخگوی همه نیازهای توسعه وب نیست.
|}
• معماری وب‌سایت‌ها اساساً به وسیله HTML شکل می‌گیرد که در پشت‌صحنه با «Cascading Style Sheets (CSS)» و همچنین زبان برنامه نویسی جاوا اسکریپت کار می‌کند.
• در این ویدیو، تمامی مراحل طراحی قالب وبسایت به صورت گام‌به‌گام و با جزئیات کامل توضیح داده شده است.
{
• نشانه‌گذاری (Markup) کاری است که تگ‌های اچ‌تی‌ام‌ال (برچسب اچ‌تی‌ام‌ال | HTML Tag) با متن داخل‌شان انجام می‌دهند.
|}
• برای کسانی که قصد ورود به دنیای توسعه وب را دارند، HTML نقطه شروع است و یادگیری آن از مهم‌ترین پیش‌نیازهای این حرفه به‌حساب می‌آید.

این نسخه از اواخر ۱۳۷۸ به طور مشترک با HTML 4.01 به عنوان استاندارد اصلی شناخته می‌شد. XHTML تحولی در نحوه عملکرد مشخصات جدید و به عنوان شاخه جدیدی از HTML به حساب می‌آید. در مقایسه،‌ مرورگر پرنقص Navigator 4.7 شرکت Netscape در خصوص پشتیبانی از HTML 4.01 و حتی CSS کاملاً نا‌توان بود. کمی پس از انتشار HTML 4.0 مستندات آن بازبینی و در برخی موارد اصلاحاتی انجام شد.

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

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

عناصر HTML

«زبان نشانه‌‌گذاری ابَرمتن» (Hypertext Markup Language | HTML) برای تعریف محتوی صفحه وب به‌ کار برده می‌شود. اما این زبان، روش نمایش این چیزها را در مرورگر مشخص نمی‌کند. در این بخش به معرفی راه‌کارهای مورد نظر برای آموزش CSS پرداخته‌ایم. فرادرس برای آموزش CSS فیلم‌های آموزشی بسیار متنوعی را تهیه کرده تا تمام جنبه‌های این تکنولوژی مربوط به طراحی رابط کاربری صفحات اینترنتی را پوشش دهد.

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

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

بررسی تگ های span , h , head

زیرا HTML مانند زیربنای سایت عمل می‌کند و CSS وظیفه راه‌اندازی تمام ویژگی‌های زیبایی ظاهر سایت‌های اینترنتی را برعهده دارد. مرورگرهای وب اسناد HTML را از یک وب‌سرور یا محل ذخیره لوکال دریافت کرده و آن‌ها را به صورت صفحه‌های وب چندرسانه‌ای رندر می‌کنند. HTML به توصیف ساختار معناشناختی یک صفحه وب می‌پردازد و سرنخ‌هایی برای شیوه نمایش ظاهری آن ارائه می‌کند. CSS سرنامی برای عبارت Cascading Style Sheet به معنی صفحات پیاپی مشبک است.

آموزش CSS صفر تا ۱۰۰ رایگان پروژه طراحی قالب ۲۰۲۳

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

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

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

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

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

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

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

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

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

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

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

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

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

عنصر HTML

ما در مجله فرادرس در طی ماه‌های اخیر سری مطالب آموزشی با موضوع HTML ارائه کرده‌ایم که فهرست آن‌ها به صورت زیر است. توجه کنید که این مطلب در چهار دسته کلی «معرفی HTML»، «امکانات چندرسانه‌ای HTML»، «جداول HTML» و «فرم‌های HTML» ارائه شده‌اند. در این بخش با مشکلات float آشنا میشویم و همچنین طریقه حل مشکلات را بررسی میکنیم با کمک مفهوم clear و کلاس clearfix .

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

تگ ابتدایی

ممکن است فکر کنید که معقول است مشخصه‌های background-color و border-color در این ماژول باشند و البته حق با شما است.

در ادامه، تمام بخش‌های معرفی شده سینتکس بالا را به ترتیب توضیح داده‌‌ایم. در تصویر زیر بخش‌های مختلف دستورات CSS را می‌توانید مشاهده کنید. در این بخش مبحث مربوط به تغییر حالت المان ها با افکت های محتلف بررسی میشود. برای بررسی یک مثال خاص به ماژول Backgrounds and Borders بازمی‌گردیم.

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

HTML دارای منطق برنامه نویسی نیست و عاری از عبارات شرطی مثل If و Else‌ است. با HTML به هیچ وجه نمی‌توان داده‌ها را تغییر داد یا آن‌ها را ویرایش کرد. HTML در اصل زبان اصلی اینترنت محسوب می‌شود و نقش به سزایی در دنیای آنلاین امروزی دارد. ادغام آن با پلتفرم‌های پرکاربرد مانند وردپرس بر اهمیت آن تأکید زیادی دارد.

این دستورات می‌توانند به تمام سند HTML اشاره کرده یا حتی چندین فایل HTML جداگانه را پوشش بدهند. دستورات CSS در زمان بارگذاری صفحات اینترنتی توسط مرورگر پردازش می‌شوند. شما به عنوان یک فرد مبتدی در زمینه CSS ممکن است متوجه شوید که مستندات CSS پیچیده هستند. بسیاری از توسعه‌دهندگان باتجربه ترجیح می‌دهند که مستندات MDN یا دیگر راهنماها را بخوانند. با این حال این مستندات رسمی نیز حائز اهمیت هستند و به درک رابطه بین CSS که استفاده می‌کنید، پشتیبانی مرورگر و دیگر استانداردها کمک می‌کند. CSS اختصاری برای عبارت «استایل‌شیت‌های آبشاری» (Cascading Style Sheets) است و امکان ایجاد صفحه‌های وب با ظاهر مناسب را به ما می‌دهد.

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

CSS به توسعه‌دهندگان برای طراحی و جابه‌جا کردن تمام عناصر در صفحه کمک می‌کند. تا به اینجای کار فهمیدیم که علت استفاده از CSS چیست، در بخش‌های بعدی مطلب با سینتکس و مفاهیم مورد استفاده در این زبان نیز آشنا می‌شویم. «شیوه‌نامه آبشاری» (Cascading Style Sheets | CSS) برای طرح و رنگ دادن به عناصر نوشته شده در زبان‌های نشانه‌گذاری مانند HTML به کار برده می‌شود.

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

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

در نتیجه استفاده از سایت‌ها ساده‌تر شده و از نظر بصری هم جذاب‌تر شده‌‌اند. HTML 4.01 تحولی اساسی در استانداردهای زبان برنامه نویسی HTML و آخرین بازنویسی HTML‌ سنتی (کلاسیک) به حساب می‌آید. در مراحل ابتدایی توسعه، از آن با لقب COUGAR (به معنی گربه وحشی) نام برده می‌شد. این بار، اکثر قابلیت‌های جدید ارائه شده برای بهبود کاستی‌های HTML 3.0 ارائه شدند.

یادگیری HTML با General Assembly Dash

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

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

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

همین‌طور که تا به این جا متوجه شدیم، CSS، وظیفه مدیریت ظاهر عناصر موجود در سایت را بر عهده دارد. CSS با هدف نمایش محتوی HTML مطابق با هدف طراحان سایت، به کار برده می‌شود. این فناوری از سوی گروهی درون W3C به نام «گروه کاری سی‌اس‌اس» (CSS Working Group) توسعه یافته است. این گروه متشکل از نمایندگانی از ارائه‌دهندگان مرورگرها و دیگر شرکت‌هایی است که به CSS علاقه‌مند هستند. افراد دیگری نیز در این گره عضو هستند که به نام «کارشناسان مدعو» (invited experts) نامیده می‌شوند و شامل دیدگاه‌های مستقلی هستند که به هیچ سازمان و نهادی وابسته نیستند. اکنون، هر یک از عناصر تشکیل دهنده صفحه HTML‌ تولید شده با کدهای بالا در ادامه فهرست و توضیح داده شده‌اند.

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

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