سی اس اس از کجا آمد و به چه دردی می خورد؟

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

Cascading Style Sheets که آن را به اختصار با نام CSS می شناسیم، در حقیقت یک زبان ساده طراحی است که روند ساخت صفحات وب زیبا و قابل ارائه را بسیار ساده می کند. در واقع این نام به این دلیل به کار می رود که کدهای سی اس اس صفحه ای از اطلاعات هستند که قیافه و شیوه چینش محتوا در صفحه وب را تعیین می کنند (استایل شیت= صفحه استایل ها).

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

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

آشنایی با جاوا اسکریپت و آژاکس

۱- جاوا اسکریپت JavaScript

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

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

نکته: توجه داشته باشید که زبان جاوا اسکریپت به کلی متفاوت از زبان جاوا بوده و تفاوت ماهوی با آن دارد. بنابراین هیچ وقت از کلمه «جاوا» به جای «جاوا اسکریپت» استفاده نکنید. این دو ارتباطی با همدیگر ندارند!

برخی کاربردهای جاوا اسکریپت:

HTML برای همه - بخش دوم - شناخت تگ های ضروری

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

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

عناصر یا Elements در هر متن اچ تی ام ال با تگ ها مشخص می شوند. هر تگ معمولا حاوی نام یا خلاصه نام عنصر مورد نظر است که در میان دو علامت کوچکتر و بزرگتر قرار گرفته است. مرورگر همیشه می داند که آنچه میان این دو علامت <> قرار دارد یک کد اچ تی ام ال است که باید ترجمه شود و مانند متن عادی آن را به کاربر نشان نمی دهد. عناصر معمولا شامل دو تگ آغاز و پایان هستند که تگ آغاز حاوی نام یا علامت اختصاری عنصر است و تگ پایان هم تکرار همان عبارت با علامت اسلش / است.

نکته: توجه داشته باشید که هیچ گاه اشتباها به جای اسلش / از علامت بک اسلش استفاده نکنید.

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

HTML برای همه- بخش اول- اصول ساخت یک صفحه ساده وب

بعد از آشنایی با تاریخچه اینترنت و شناخت اچ تی ام ال، بهتر است کمی کاربردی تر و عملی با این زبان کدنویسی آشنا شویم. اگر تا به حال با HTML کار نکرده باشید، احتمالا دیدار اول تان با کدهای یک صفحه تا حدی گیج کننده و نامأنوس باشد. انگار که دارید به متنی با یک زبان بیگانه نگاه می کند. اما جالب است بدانید که تنها با شناخت تعداد معدودی از دستورات (تگ ها) اچ تی ام ال، می توانید به راحتی زبان یک صفحه اچ تی ام ال را دانسته و منظورتان را هم به آن بفهمانید.

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

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

داستان HTML

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

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

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