با توجه به رشد وب در بین افراد و مردم و همچنین راحت تر شدن دسترسی به آن توسط تلفن های همراه هوشمند طراحی و یا داشتن یک وبسایت برای هر فرد و هر کسب…
با توجه به رشد وب در بین افراد و مردم و همچنین راحت تر شدن دسترسی به آن توسط تلفن های همراه هوشمند طراحی و یا داشتن یک وبسایت برای هر فرد و هر کسب و کار لازم است. ما در قرن بیست و یکم بر این باور هستیم که تمامی شخصیت های حقیقی و حقوقی باید برای خودشان یک وبسایت شخصی داشته باشند. لذا خوب است همه ما در زمینه طراحی سایت و کدنویسی html و css حداقل دستی در آتش داشته باشیم. در این مقاله با رشدانا همراه باشید تا درباره کدنویسی وب که پایه و اساس آن زبان های HTML و CSS هستند بیشتر آشنا شویم.
HTML مخفف عبارت Hyper Text Markup Language و به معنی زبان نشانه گذاری فوق متن می‌باشد. بهتر است بدانید که HTML یک زبان برنامه نویسی محسوب نمی‌شود بلکه جهت نشانه گذاری ابر متن ابداع شده و هدف از بکارگیری آن، سازماندهی اطلاعات هر صفحه از وب است. علاوه بر آن، از HTML در جداسازی اجزاء یک صفحه وب مانند عناوین، بندها، تصاویر و… استفاده می‌شود.
این زبان نشانه گذاری، زبانی استاندارد برای طراحی صفحات وب است که در فرایند طراحی صفحات وب، همه کدهای سمت سرور و سمت کاربر، ابتدا به کدهای HTML تبدیل می‌شوند و سپس، توسط مرورگرها نمایش داده می‌شوند.
در این زبان، قسمت‌های مختلف یک صفحه، توسط تگ‌ها از یکدیگر جدا می‌شوند. بنابراین، برای هر عنصر در صفحه وب مانند تيتر ، عکس ، جدول و.. باید از تگ مربوط به همان عنصر استفاده کرد. به این ترتیب، هر سند HTML پرونده ای مبتنی بر متن است که معمولاً با پسوند .htm یا .html شناخته می‌شوند، سپس مرورگرها، برچسب های HTML را خوانده و محتوای صفحه‌ای که با این زبان نوشته شده را Render یا نمایان سازی می‌کنند.
حال که با زبان نشانه گذاری HTML آشنا شدید، قصد داریم تا در ادامه شما را با سایر نسخه‌های HTML که تا کنون منتشر شده‌اند، آشنا کنیم.
در واقع اولین نسخه HTML، بدون هیچ گونه شماره ای به نام HTML نام گذاری و معرفی شد. پس از آن، طی سال های 1990 تا 1999 یعنی در حدود 9 سال تغییراتی در آن ایجاد شد که منجر به توسعه نسخه های بعدی گردید. در ادامه به هر یک از این نسخه ها و ویژگی‌هایشان اشاره‌ای کوتاه خواهیم داشت.
این اولین نسخه HTML است که در سال 1991 منتشر شد و مبنای زبان HTML و نسخه های توسعه یافته بعدی آن گردید.
این نسخه در سال 1995 منتشر شد و تا 2 سال بعد، برای طراحی و کدنویسی صفحات وب استفاده می‌شد و توانست بسیاری از ویژگی‌های اصلی HTML را در خود جای دهد. این نسخه، توانست برای اولین بار از جداول و فرم‌ها نیز پشتیبانی کند.
این نسخه که امروزه توسط اکثر مرورگرها پشتیبانی نمی‌شود، در سال 1997 توسط W3C (کنسرسیوم شبکه جهانی وب) نهایی شد. نسخه HTML 3.2 قابلیت پشتیبانی از عناصر فرم پیچیده را داشت و برای صفحات وب این امکان را ایجاد می‌کرد که از معادلات سخت ریاضی نیز، پشتیبانی کند.
خوشبختنانه این نسخه، به نسبت نسخه‌های قبلی پایدارتر بوده و پشتیبانی بیشتری از فایل های CSS دارد. نسخه HTML 4.0.1 با هدف مرتفع کردن مشکلات نسخه‌های قبلی ایجاد شد و توانست از اسکریپت‌ها، فریم‌ها و حتی از استایل شیت‌ها نیز پشتیبانی کند.
علی‌رغم ویژگی‌های ذکر شده، نسخه 4.0.1 به خوبی از زبان‌های راست‌چین مانند فارسی و عربی حمایت می‌کند و علاوه بر آن، قابلیت ایجاد صفحات پویا توسط زبان‌های اسکریپتی را نیز فراهم آورده است.
این نسخه که از انعطاف‌پذیری بیشتری نسبت به نسخه‌های HTML قبلی برخوردار است؛ نتیجه همکاری میان کنسرسیوم شبکه جهانی وب و کارگروه فناوری کاربرد ابرمتن تحت وب می‌باشد که سرانجام در سال 2006 توانستند نسخه HTML5 را ایجاد کنند.
همانطور که گفتیم نسخه‌های قبلی HTML، دارای ایرادات و باگ‌های بسیاری بودند و با ایجاد نسخه بعدی، تا حدی از نواقص این زبان کاسته می‌شد تا اینکه با روی کار آمدن نسخه HTML5، نه تنها اغلب باگ‌های موجود در نسخه‌های پیشین از میان رفت بلکه ویژگی‌های زیر نیز برای توسعه دهندگان و طراحان وب ایجاد گردید.
HTML ابزاری است که توسط آن می‌توانید پایه و اساس وب سایت خود را ساخته و آن را طراحی کنید. اما برای این کار نیازمند بکارگیری تگ (Tag) هستید. در حقیقت، این تگ ها هستند که اسکلت صفحات وب سایت شما را می‌سازند و هر وب سایت طی دو مرحله اصلی ایجاد می‌شود.
ابتدا ساختار اصلی صفحات وب با کمک تگ های موجود در HTML ایجاد شده، سپس با استفاده از زبان برنامه نویسی CSS، به صفحات جان بخشیده می‌شود. یعنی می‌توان با افزودن زیبایی‌های بصری همچون فونت، اندازه، رنگ و… صفحات وب را زیبا نموده و آن ها را قابل استفاده کرد.
همانطور که گفتیم HTML یک زبان نشانه گذاری است که از بخش‌های مختلفی به نام تگ ایجاد شده است. از سوی دیگر، برای طراحی یک وب سایت حرفه‌ای نیاز به استفاده از سایر زبان‌های برنامه نویسی مانند جاوا اسکریپت، سی اس اس و… می‌باشد درحالی‌که مرورگرها فقط کدها و عناصر HTML را می‌توانند نمایش دهند و قادر نیستند کدهای سایر زبان های برنامه نویسی را به نمایش بگذارند.
بنابراین، تگ‌ها نه تنها در HTML بلکه در فرآیند طراحی سایت، بسیار حائز اهمیت هستند. و در اصل، این تگ‌ها هستند که قدرت بسیار زیادی را به HTML میدهند. به عبارت دیگر، تگ‌ها در HTML توانایی ساخت پاراگراف ها، تصاویر، جداول و سایر بخش‌های وب سایت را دارند و باید برای هر یک از این بخش‌ها (عناصر) از تگ مربوط به آن استفاده کرد.
مثلا <article> تگ تعریف یک پست یا مقاله است و یا <audio> تگ تعریف کننده محتوای صوتی می‌باشد که مرورگرهای مختلف با فراخوانی همین تگ‌ها، می‌توانند اطلاعات موجود در کدها را به نمایش بگذارند. در ادامه به چند تگ کاربردی دیگر اشاره میکنیم.
به یاد داشته باشید طراحان و توسعه دهندگان وب، به دلیل تعداد بالای تگ‌ها، همه آن ها را حفظ نیستند.
تگ <body> ایجاد بدنه اصلی محتویات صفحات
تگ <button> اضافه کردن دکمه در صفحات
تگ <a> ایجاد لینک در صفحه وب
تگ < address> تعریف اطلاعات تماس نویسنده در وب
CSS مخفف عبارت Cascading Sheet Style و به معنی «برگه‌های سبک آبشار» یا «برگه‌های آبشاری» است. احتمالا این سؤال برای شما هم پیش آمده که منظور از برگه‌های آبشاری چیست و اصلا چه ربطی به یک برنامه نویسی دارد!
به این دلیل به CSS برگه‌های آبشاری گفته می‌شود که استایل یک برگه CSS، به طور مستقیم بر روی عناصر فرزند (Children) آن برگه هم تأثیر می‌گذارد. مثلا اگر شما برای یک صفحه از سایت، رنگ آبی را انتخاب کرده باشید، تمام هدینگ‌ها و پاراگراف های آن صفحه که اصطلاحا فرزندان آن برگه CSS هستند نیز به رنگ آبی نمایش داده می‌شوند.
CSS در کنار HTML قرار می‌گیرد تا هر دوی آن ها هسته ایجاد یک وب سایت را به وجود بیاورند. برای یک طراح سایت، استفاده از CSS بهترین و سریع‌ترین راه شکل دهی به سایت و ایجاد حس خوب در کاربران وب سایت است.
اگر کدهای HTML وظیفه دارند که جایگاه هر یک از عناصر را در صفحه مشخص کنند، برگه‌های CSS نیز مسئول قرار دادن متن و سایر تگ های HTML هستند. بنابراین، ویژگی های ظاهری این عناصر همچون اندازه، رنگ، چیدمان، گرافیک و… را نیز همین زبان CSS باید برعهده بگیرید و در نهایت یک صفحه وب کاربردی، زیبا، مطابق با نیازها و در راستای علائق کاربر را ایجاد نماید.
CSS دارای ۴ نسخه زیر می‌باشد که اولین نسخه آن در سال ۱۹۹۶ معرفی شد و به مرور نسخه‌های دیگری از این زبان ایجاد شد که مانند نسخه‌های HTML، هر کدام از نسخه‌های جدیدتر باگ‌ها و ایرادات نسخه قبلی را برطرف کرده و ویژگی‌های خاص خود را دارد.
به طور کلی می‌توان گفت هدف از ایجاد CSS، زیباتر کردن صفحات وب با کمک کدهای HTML است. پس اگر ما زبان CSS را در اختیار نداشتیم، با مقدار زیادی از تگ‌های و کدهای نا آشنا روبرو بودیم که خواندن یک صفحه از وب را برایمان طاقت فرسا می‌کرد.
در نتیجه، مهم‌ترین کاربرد CSS زیبا سازی صفحات وب در زمان طراحی آن‌ها می‌باشد تا تجربه کاربری به طرز چشمگیری افزایش یافته و کاربر بتواند به راحتی در صفحات یک سایت وارد شود، مطالعه کند و در یک کلام، احساس راحتی بسیار بالایی از حضور در سایت داشته باشد.
پیش از این به بیان ویژگی ها و جایگاه استفاده هر یک ز زبان های HTML و CSS پرداختیم و توضیح دادیم که تمام توسعه دهندگان وب و همچنین طراحان سایت، برای ساخت یک وب سایت بایستی به اصول اولیه کدنویسی HTML و CSS مسلط باشند. اما در حالت کلی، هر دو زبان گفته شده، دارای تفاوت‌هایی هستند که در ادامه این تفاوت‌ها را توضیح می‌دهیم.
هرچند با استفاده از هر دو زبان می‌توان یک صفحه وب ایجاد کرد اما هر یک از آن‌ها توانایی‌ها و ویژگی‌های خاص خود را دارد. شما با بکار گیری زبان HTML می‌توانید یک صفحه از وب و محتوای داخل آن را ایجاد کنید در حالی‌که توسط CSS، استایل سایت یا زیبایی ظاهری صفحه وب را ایجاد می‌کنید. بنابراین ابتدا باید ساختار کلی صفحه وب را ایجاد کرده سپس، به زیباسازی ظاهری و طراحی عناصر بصری آن بپردازید.
از دیگر تفاوت های بارز و اساسی این دو زبان این است که از CSS در یک فایل HTML می‌توان استفاده کرد اما عکس این حالت قابل انجام شدن نیست. یعنی استفاده از سند HTML در یک فایل CSS، به هیج عنوان شدنی نیست.
احتمالا هنگام تعریف از HTML و CSS متوجه این موضوع شدید که صفحات ساخته شده با HTML فرمت و قالب خاصی ندارند اما با ایجاد CSS که توسط اسناد HTML شکل می‌گیرد، به همان صفحات بدون قالب و خالی از هر نوع ویژگی بصری، فرم هایی زیبا و کاربرپسند داده می‌شود.
یعنی اگر با زبان نشانه گذاری HTML یک جدول خالی و بدون هیچ گونه خصوصیتی طراحی می‌کنید، با استفاده از زبان CSS می‌توانید در آن جدول اندازه، رنگ، طول و دیگر عناصر زیبایی ساز را طراحی کرده و اصطلاحا به به آن جدول، جان ببخشید.
همانطور که می‌دانید هر وب سایت مانند ساختمان های چند طبقه از اسکلت بندی و نمای خاص خود برخوردار است. ما در کد نویسی باید بتوانیم یک اسکلت خوب و محکم را در کنار یک نمای بسیار زیبا و جذاب قرار دهیم تا یک وب سایت عالی داشته باشیم. طراحی وب سایت با کدنویسی HTML و CSS دقیقا مانند ساخت یک آپارتمان است.
برای ساخت ابتدا باید پایه ریزی مناسب را انجام داد و نقشه سایت را با کمک یک UI کار به طور کامل طراحی کرد. و پس از آن با کمک این دو زبان مهم و اساسی در امر طراحی وب صفحه‌ها را یک به یک ساخت. برای شروع باید از اسکلت یعنی همان کد های HTML استفاده کرد. این کدها تنها و تنها برای ساخت جان اصلی سایت هستند. همانطور که در قوانین نسخه پنجم این زبان یعنی HTML 5 گفته شده است شکل دادن و استایل دهی به وسیله این زبان یک خطا در کد نویسی محسوب می‌شود. پیش از این طراحان وب از اچ تی ام ال برای نما دادن به صفحه نیز از آن استفاده می‌کردند که بعد از ورود CSS به میدان این تگ‌ها منسوخ شده اعلام شدند.
برای زیبا کردن و یا همان سنگ کاری نمای ساختمان از سی اس اس استفاده می کنیم. این زبان علاوه بر راحت کردن کار، به ما دسترسی های مختلف می دهد تا بتوانیم نما را بهتر ایجاد کنیم. در CSS تگ های استایل دهی پیشرفته تر شده اند و می توان به کمک آن جلوه ای زیبا برای سایت تهیه کرد. البته در اینجا باید به یک نکته اشاره کنیم که مبحث کدنویسی و برنامه نویسی برای بعضی افراد بسیار شیرین و برای بعضی دیگر واقعا خسته کننده است. پیشنهاد می کنیم در ابتدا این موضوع را برای خودتان حل کنید.
اگر می خواهید تنها یک وبسایت برای خودتان داشته باشید و از آن لذت ببرید تا همین جای کار شما آماده هستید. شما با یادگیری کدنویسی HTML و CSS می‌توانید نیاز‌های خود را بر طرف کنید. ( اگر وب سایتتان را با سی ام اس های مختلف بسازید، حتی این مقدار یاد داشتن کد نویسی از سر سایتتان هم زیاد تر است!)
اما اگر دوست دارید در زمینه طراحی وب وارد شوید و حرفه‌ای در آن جلو بروید لازم است تا زبان های مکمل دیگری را نیز یاد بگیرید. شما می‌توانید با کمک اچ تی ام ال و سی اس اس یک سایت را کامل طراحی کنید اما برای پویا کردن آن لازم است تا از زبان برنامه نویسی PHP، جاوا اسکریپت و کتابخانه جی کوئری آن نیز استفاده کنید.
شاید برای شما این سوال پیش بیاید که اگر برای طراحی هر وب سایت به اچ تی ام ال و سی اس اس نیاز است، سی ام اس ها چگونه سایت ها را می سازند؟ و اصلا اگر سی ام اس ها تمام کد نویسی را انجام می دهند و برای ما سایت طراحی می کنند چه نیازی وجود دارد تا ما این زبان ها را یاد بگیریم؟
برای پاسخ دادن به این سوالات به شما پیشنهاد می کنیم که در مرورگرتان روی صفحه اصلی همین سایت (!) راست کلیک کنید و گزینه نمایش سورس سایت را بزنید. (این کار را می توانید با گرفتن کلید های ترکیبی کنترل و u نیز انجام دهید) با این کار تمام کد های تشکیل دهنده سایت برای شما به نمایش در می آیند. همانطور که می بینید با اینکه این سایت با سیستم مدیریت محتوا وردپرس طراحی شده است باز هم کد های آن از زبان HTML و CSS ساخته شده اند.
پس شاید بهتر است بگوییم که سی ام اس ها، کد های لازمه را به صورت خودکار دارند و با زدن چند کلیک آن ها را برای شما کنار هم قرار می دهند. به عبارتی دیگر حتی سی ام اس ها هم کد نویس اند!
حتی سیستم های مدیریت محتوا گاهی در کد نویسی همه چیز لازم را ندارند. یا هم ممکن است شما افزونه مورد نظرتان را در بین هزاران افزونه ساخته شده برای آن سی ام اس را پیدا نکنید. در این زمان لازم است تا بعضی ویرایش های جزئی را خودتان به صورت دستی انجام دهید. علاوه بر این ممکن است در بعضی بخش های کانفیگ سرورتان و یا سی پنلی که سایتتان را با آن مدیریت می کنید لازم باشد از کد نویسی دستی استفاده کنید. پس بهتر است خودمان بتوانیم گلیممان را از آب بکشیم و برای یک خط کد دست به دامان کد نویسی دیگر نشویم.
در پایان با توجه به این که از اهمیت یادگیری کدنویسی HTML و CSS اطلاع پیدا کردید به دنبال محلی برای یادگیری آن بگردید. تنها کار لازم این است که در لیست کارگاه ها و دوره های رشدانا نگاهی بیندازید و در دوره آموزش کدنویسی HTML و CSS ثبت نام کنید.
HTML5 & CSS3 Markup
اولین گام برای ورود به دنیای برنامه نویسی
