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

HTML چیست؟

HTML مخفف عبارت Hyper Text Markup Language و به معنی زبان نشانه گذاری فوق متن می‎‌باشد. بهتر است بدانید که HTML یک زبان برنامه نویسی محسوب نمی‌شود بلکه جهت نشانه گذاری ابر متن ابداع شده و هدف از بکارگیری آن، سازماندهی اطلاعات هر صفحه از وب است. علاوه بر آن، از HTML در جداسازی اجزاء یک صفحه وب مانند عناوین، بندها، تصاویر و… استفاده می‌شود.

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

در این زبان، قسمت‌های مختلف یک صفحه، توسط تگ‌ها از یکدیگر جدا می‌شوند. بنابراین، برای هر عنصر در صفحه وب مانند تيتر ، عکس ، جدول و.. باید از تگ مربوط به همان عنصر استفاده کرد. به این ترتیب، هر سند HTML پرونده ای مبتنی بر متن است که معمولاً با پسوند .htm یا .html شناخته می‌شوند، سپس مرورگرها، برچسب های HTML را خوانده و محتوای صفحه‌ای که با این زبان نوشته شده را Render یا نمایان سازی می‌کنند.

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

انواع نسخه‌های HTML

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

HTML۱,۰

این اولین نسخه HTML است که در سال ۱۹۹۱ منتشر شد و مبنای زبان HTML و نسخه های توسعه یافته بعدی آن گردید.

نسخه HTML ۲,۰

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

نسخه HTML ۳,۲

این نسخه که امروزه توسط اکثر مرورگرها پشتیبانی نمی‌‎شود، در سال ۱۹۹۷ توسط W۳C (کنسرسیوم شبکه جهانی وب) نهایی شد. نسخه HTML ۳,۲ قابلیت پشتیبانی از عناصر فرم پیچیده را داشت و برای صفحات وب این امکان را ایجاد می‌کرد که از معادلات سخت ریاضی نیز، پشتیبانی کند.

نسخه HTML ۴,۰.۱

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

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

نسخه HTML۵

این نسخه که از انعطاف‌پذیری بیش‌تری نسبت به نسخه‌های HTML قبلی برخوردار است؛ نتیجه همکاری میان کنسرسیوم شبکه جهانی وب و کارگروه فناوری کاربرد ابرمتن تحت وب می‌باشد که سرانجام در سال ۲۰۰۶ توانستند نسخه HTML۵ را ایجاد کنند.

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

• HTML۵ با استفاده از API جاوا اسکریپت Geolocation، قابلیت شناسایی موقعیت مکانی کاربران را دارد.
• نسخه HTML۵ از ویدئو و صدا نیز به خوبی پشتیبانی می‌کند.
• تگ‌های جدیدی در HTML۵ تعریف شده اند که از میان آن ها می‎توان به تگ‌های صفات همچون number ،date ،time ،calendar و range، تگ‌هایی عناصر گرافیکی مانند: <svg> و <canvas> و حتی تگ‌های معنایی مثل <header> ،<footer> ،<article> و <section> اشاره کرد.

کاربرد های اصلی HTML

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

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

تگ (Tag) چیست؟

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

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

مثلا <article> تگ تعریف یک پست یا مقاله است و یا <audio> تگ تعریف کننده محتوای صوتی می‌‎باشد که مرورگرهای مختلف با فراخوانی همین تگ‌ها، می‌توانند اطلاعات موجود در کدها را به نمایش بگذارند. در ادامه به چند تگ کاربردی دیگر اشاره می‎‌کنیم.

به یاد داشته باشید طراحان و توسعه دهندگان وب، به دلیل تعداد بالای تگ‌ها، همه آن ها را حفظ نیستند.

تگ <body> ایجاد بدنه اصلی محتویات صفحات

تگ <button> اضافه کردن دکمه در صفحات

تگ <a> ایجاد لینک در صفحه وب

تگ < address> تعریف اطلاعات تماس نویسنده در وب

CSS چیست؟

CSS مخفف عبارت Cascading Sheet Style و به معنی «برگه‌های سبک آبشار» یا «برگه‌های آبشاری» است. احتمالا این سؤال برای شما هم پیش آمده که منظور از برگه‌های آبشاری چیست و اصلا چه ربطی به یک برنامه نویسی دارد!

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

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

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

معرفی انواع نسخه های CSS

CSS دارای ۴ نسخه زیر می‌‎باشد که اولین نسخه آن در سال ۱۹۹۶ معرفی شد و به مرور نسخه‌های دیگری از این زبان  ایجاد شد که مانند نسخه‌های HTML، هر کدام از نسخه‌های جدیدتر باگ‌ها و ایرادات نسخه قبلی را برطرف ‌کرده و ویژگی‌های خاص خود را دارد.

CSS دارای چه کاربردهایی است؟

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

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

HTML و CSS چه تفاوت هایی دارند؟

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

وظایف منحصر به فرد

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

تمایز فایل مورد استفاده برای هر زبان

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

فرمت متفاوت میان HTML و CSS

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

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

HTML و CSS اسکلت و آجر های صفحات وب!

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

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

نمای سنگ را برای ساختمان استفاده کنید

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

هیچ چیز دیگر لازم نیست؟

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

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

سی ام اس ها هم کد نویس اند؟

شاید برای شما این سوال پیش بیاید که اگر برای طراحی هر وب سایت به اچ تی ام ال و سی اس اس نیاز است، سی ام اس ها چگونه سایت ها را می سازند؟ و اصلا اگر سی ام اس ها تمام کد نویسی را انجام می دهند و برای ما سایت طراحی می کنند چه نیازی وجود دارد تا ما این زبان ها را یاد بگیریم؟

برای پاسخ دادن به این سوالات به شما پیشنهاد می کنیم که در مرورگرتان روی صفحه اصلی همین سایت (!) راست کلیک کنید و گزینه نمایش سورس سایت را بزنید. (این کار را می توانید با گرفتن کلید های ترکیبی کنترل و u نیز انجام دهید) با این کار تمام کد های تشکیل دهنده سایت برای شما به نمایش در می آیند. همانطور که می بینید با اینکه این سایت با سیستم مدیریت محتوا وردپرس طراحی شده است باز هم کد های آن از زبان HTML و CSS ساخته شده اند.

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

چرا باید HTML و  CSS را یاد بگیریم؟

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

خب از کجا شروع کنم؟!

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