هایپر لینک ها ستون فقرات وب هستند. آنها وسیله ای برای برقراری ارتباط میان یک بخش از اطلاعات با بخش دیگر از اطلاعات (به عنوان نمونه یک صفحه) می باشند. اگر شما دو صفحه وب طراحی کرده اید، به وسیله هایپر لینک می تواند از یک صفحه به صفحه دیگر بروید. همچنین اگر یک صفحه وب طولانی طراحی کرده اید، می توانید به وسیله هایپر لینک از یک بخش صفحه به بخش دیگر بروید و باز گزدید. هایپر لینک شبیه شکل زیر می باشد (یک متن آبی زیر خط دار). حال ببینیم زمانی که روی یک لینک کلیک می شود چه اتفاقی می افتد. هایپر لینک چیست؟ زمانیکه برروی لینکی از یک سایت دیگر کلیک می کنید (با فرض اینکه به اینترنت متصل باشید)، این اتفاق می افتد: مرورگر شما اطلاعات مربوط به لینک را جمع آوری کرده و درخواستی به چیزی که نام سرور (نیم سرور) نام دارد ارسال می کند. نیم سرور متن درخواست را (مثلا www.yasict.com) به اعدادی که IP نام دارند ترجمه می کند. این کار الزامی است، چون کامپیوترها به زبان نوشتاری صحبت نمی کنند و به چیزی احتایج دارند که برای آنها قابل فهم باشد. آدرس IP برای شناسایی یک کامپیوتر خاص بکار برده می شود. چنانچه آدرس IP مورد نظر یافت نشد، خطایی سمت مرورگر برگردانده می شود. در این حالت، معمولا صفحه خطای 404 نمایش داده می شود. چنانچه آدرس IP مورد نظر یافت شود، به مرورگر شما ارسال می شود و سپس مرورگر با برقرای ارتباط با وبادامه مطلب

دو عنصر جدید در html5 عبارتند از:FIGURE و FIGCAPTION عنصر اول، FIGURE برای استفاده در عناصری مانند تصاویر و سایر عناصر گرافیکی مناسب است، در حالیکه عنصر دوم FIGCAPTION، برای معرفی تصویر مورد نظر بکار برده می شود. مثال: در مثال فوق، تگ img توسط دو تگfigure احاطه شده است. سپس تگ figcaption در زیر تصویر اضافه شده است. کدهای بالا در مرورگر به شکل زیر نمایان می شوند: در صورت تمایل می توان تگ FIGCAPTION را بالای تصویر قرار داد: توجه داشته باشید که تگهای figure و figcaption، دارای قالب از پیش تعریف شده ای نیستند و برای تنظیم استایل آنها می بایست تنظیمات لازم را در فایل css ایجاد نمایید: FIGCAPTION { font-style: italic;font-variant: small-caps; } به دلیل اینکه figure و figcaption تگهای جدید html5 هستند، مرورگرهای قدیمی قادر به شناسایی آنها نمی باشد. بنابراین مانند تگهای خطی در صفحه نمایش داده می شوند. به این معنا که یک شکست خط خودکار برای قسمت figcaptionایجاد نمی شود و آنها در کنار تصویر نمایش داده می شوند. برای رفع این مشکل، می توان از ویژگی display با مقدار blck برای این تگها استفاده کرد. مانند: FIGURE, FIGCAPTION { display: block;font-style: italic;font-variant: small-caps; } کدهای css فوق، به مرورگر می گوید که تگ های figure و figcaption، یک بلاک هستند. چون بلاک ها به صورت زیر هم ادامه مطلب

شما می توانید در صورت تمایل در قسمت های مختلف صفحه، تصویر پشت زمینه ایجاد نمایید. ویژگی css برای این کار background-image می باشد. برای مقدار، آدرس محل قرار گیری عکس به ویژگی نسبت داده می شود. آدرس در میان پرانتز ها و بعد از کلمه url قرار می گیرد: }BODY ;(background-image: url('my_image.gif' { قواعدی که برای آدرس دهی تصاویر بکار برده می شود در این قسمت هم کارایی دارد. بنابراین در قطعه کد بالا، به تصویری که در همان پوشه ای که فایل وب جاری قرار دارد، اشاره شده است. چنانچه فایل تصویر پشت زمینه در پوشه ای به نام background قرار داشت، کد به دو شکل زیر نوشته می شد: }BODY ;(background-image: url('backgrounds/my_image.gif' { حالت پیش فرض برای عکسهای پشت زمینه، حالت تکرا آنها است. بعنوان مثال اگر عکس پشت زمینه شما 100 پیکسل در 100 پیکسل باشد، این عکس تا زمانیکه کل صفحه را پر کند، کپی می شود. چیدمان تکرار تصاویر پشت زمینه همیشه کارایی ندارند. مانند تصاویر زیر: تصویر پشت زمینه که در شکل بالا به کار گرفته شده است، ابعادی به اندازه 200*200 پیکسل دارد. این اندازه عرض تصویر را به خوبی پوشش داده است، اما پوشش طولی آن مناسب به نظر نمی رسد. برای تنظیم چیدمان تصاویر پشت صحنه، از ویژگی background-repeat استفاده می شود. این ویژگی، چهار مقدار قبول می کند: Repeat-x Repeat-y Repeat N o-repeat برای تصادامه مطلب

در اطراف تصاویر، می توان حاشیه های زیبایی ایجاد کرد. حاشیه ها انواع مختلفی دارند که می توان به دلخواه آنها را انتخاب نمود، اما همه آنها توسط تمامی مرورگرها پشتیبانی نمی شوند. تنظیماتی که برای ایجاد حاشیه بکار می روند عبارتنداز: نوع حاشیه: border-style صفحات حاشیه: border-width رنگ حاشیه: border-color برخی مقادیر قابل قبول برای ویژگی border-style (نوع حاشیه) شامل لیست زیر می باشد: نقطه چین: Dotted خط چین: dashed خط ممتد: solid خط دو خطی: double ضخامت حاشیه سه حالت دارد: نازک، متوسط و ضخیم. اما همچنین می تواند ضخامت دقیق را به واحد پیکسل تعیین نمایید. ویژگی Border colour نیز رنگ حاشیه را مشخص می کند که می تواند هر یک از مقادیر قابل قبول رنگ (نام رنگ، مقدار هگزا دسیمال و یا مقدار rgb) را بپذیرد. تمرین: استایل های زیر را به کلاس TextWrap خود اضافه نمایید: در اینجا، ما ضخامتی از نوع خط ممتد و ضخامت 2 پیکسل و رنگ دلخواه ایجاد کرده ایم. تغییرات را ذخیره و نتیجه را در مرورگر مشاهده نمایید. تمرین: سایر انواع حاشیه(border styles) را که بالاتر توضیح داده شد را در تمرین قبلی امتحان نمایید. همچنین ضخامت و رنگ را نیز تغییر دهید و نتیجه را مشاهده کنید. حاشیه ای که توسط css ایجاد کرده ایم را می توان بر عناصر مختلف html اعمال کرد. بعنوان مثال، چنانچه حاشیه ای در اطراف یک پاراگراف متنی بخواهیم، ادامه مطلب

برخی از ویژگی های تگ img که در نسخه قبلی html استفاده می شد، اکنون منسوخ شده اند. یکی از پر کاربردترین این ویژگی ها چینش تصاویر بود که می توانستید یکی از مقادیر زیر را برای چیدمان تصویر در صفحه انتخاب نمایید: Absbottom، Absmiddle، Bottom، Middle، Left، Right، Texttop، Topبنابراین ویژگی چینش تصویر به صورت زیر قابل تنظیم بود: با انجام این کار، حمل قرار گرفتن عکس در کنار متن تنظیم می شد. به طوریکه تصویر به صورت جزئی از متن در صفحه قرار بگیرد و نه به صورت یک آیتم مستقل. به عبارتی دیگر متن، تصویر را احاطه می کند. در html5، احاطه عکس توسط متن، به وسیله css انجام می شود. به عنوان مثال در شکل زیر عکس و متن کنار هم قرار گرفته اند. همانطور که در تصویر فوق پیداست، عکس در سمت راست صفحه قرار دارد و متن با رعایت کمی فاصله به صورت شناور در کنار آن قرار گرفته است، برای ایجاد تنظیمات فوق، می بایست استایل مربوطه را در قسمت head یا فایل css به صورت زیر ایجاد نماییم: به این ترتیب استایلی با نام TextWrap ایجاد کرده ایم که دارای دو ویژگی زیر می باشد: float: right;margin: 10px; ویژگی css ای که برای حرکت عکس در صفحه مورد نیاز است، float نام دارد. برای ویژگی float ، سه مقدار قابل قبول می باشد: left،right و none.(راست، چپ و هیچکدام) برای ایجاد مقداری فاصله میان عکس و متن، می توانیم از ویژگی margin استفادامه مطلب

قبل از شروع این درس، اطمینان حاصل کنید که فایل های تصویر مربوطه را که قبلا دانلود کرده اید در پوشه york_images قرار دهید. اگر فایل ها را تا کنون دریافت نکرده اید از این قسمت قابل دریافت هستند. در html5، تراز کردن عناصر با استفاده از Css صورت می گیرد. چنانچه فقط به تراز چپ، راست و یا مرکز احتیاج دارید، استفاده از تگ div بسیار کمک کننده می باشد. تگ div یک تگ همه منظوره است. از یک جهت این تگ مانند تگ p عمل می کند، به طوریکه بعد از آن شکست خط اتفاق می افتد. برای مشاهده عملی تگ div ، کد html خود را به صورت زیر اصلاح نمایید: (تگ Doctype نوشته نشده است ). در اینجا، از یک جفت تگ div استفاده شده است: <div> ، بعد از یک فاصله، ویژگی "ALIGN="right استفاده شده است. این ویژگی بر تمام عناصر داخل تگ div تاثیر می گذارد که در مثال فوق دومین عکس York Minster می باشد. تغییرات را ذخیره و صفحه مرورگر را به روزرسانی نمایید. آنچه که مشاهده می شود به صورت زیر است: دو مقدار دیگر برای ویژگی ALIGN عبارتند از را حذف کرده left و center. مقدار right را حذف کرده و مقادیر دیگر را تمرین نمایید. تغییرات را ذخیره و نتیجه را در مرورگر مشاهده نمایید. لازم به ذکر است که در صورت نیاز به تراز چپ (DIV ALIGN="left") احتیاجی به نوشتن این ویژگی نمی باشد، تراز پیش فرض، تراز چپ می باشد. ویژگی align همچنین می تواادامه مطلب

زمانی که از img استفاده می کنید، در واقع از یک تگ html استفاده کرده اید. قسمت src یک ویژگی نامیده می شود. ویژگی های بسیاری وجود دارند که می توان از آنها در تگ img استفاده کرد. ویژگی های تگ img در html5 شامل موارد زیر هستند:ARTSRCHEIGHTWIDTHUSEMAPISMAP در نسخه قبلی html، ویژگی های زیر قابل استفاده بودند: ALIGNBORDERHSPACEVSPACE اگر چه ویژگی های فوق اکنون منسوخ هستند، ولی هنوز می توان از آن ها استفاده کرد.نحوه استفاده از ویژگی ها به صورت زیر می باشد : ویژگی Alt: اولین ویژگی، ویژگی alt است. نحوه استفاده از آن به صورت زیر می باشد: alt از کلمه Alteative Text به معنای " متن جایگزین" گرفته شده است و در صورتیکه تصویر نمایش داده نشود به جای آن متنی که داخل دو علامت "" قرار گرفته است نمایش داده می شود. برای تمرین این ویژگی، کد html زیر را در فایل خود وارد نمایید: در مثال فوق، نام فایل تصویر را تغییر داده ایم. حال تغییرات را ذخیره و صفحه مرورگر را به روز رسانی نمایید. نتیجه کار به صورت زیر خواهد بود (در مرورگر اینترنت اکسپلورر): اینترنت اکسپلورر، متن alt را بعد از آیکون x قرمز قرار داده است. شما می توانید همیشه متنی را به عنوان ویژگی alt برای تگ های img خود وارد نمایید و این کار به موتورهای جستجو نیز در یافتن تصاویر کمک می کند، به خصوص موتور جستجوی گوگل. ویژگی عرض و ارتفاع: عمل دیگری که ادامه مطلب

در جلسه قبلی با نحوه آدرس دهی نسبی آشنا شدید. در این جلسه تمرینات عملی راجع به این موضوع خواهیم داشت. در کاوشگر ویندوز به مسیری که فایل های html خود را ذخیره کرده اید بروید. فایل پوشه ای به نام html ایجاد کرده بودیم. درون پوشه html، دو پوشه جدید ایجاد کنید. یکی از آن ها را images و دیگری را pages نام گذاری کنید. اگر سیستم عامل شما ویندوز باشد، کاوشگر ویندوز به شکل زیر خواهد بود: (ویندوز 7). فایل html را باز کرده و کد html درج تصویر زیر را به فایل خود اضافه نمایید: فایل html را از طریق منوی File>Save As مجددا در پوشه ای که جدیدا به نام Pages ایجاد کرده ایم ذخیره کنید و نام آن را images.html بگذارید. فراموش نکنید که در قسمت Save As Type گزینه All File را انتخاب کنید. در محیط ویندوز نتیجه به صورت زیر خواهد بود: بعد از اینکه فایل html ذخیره شد، بر روی آن دوبار کلیک کنید تا در مرورگر باز شود. اگر از مرورگر فایرفاکس استفاده می کنید. صفحه به شکل زیر خواهد بود: و چنانچه از مرورگر اینترنت اکسپلورر استفاده می کنید، صفحه به شکل زیر خواهد بود: در هر دو حالت، تصویری نمایش داده نمی شود. فایر فاکس آیکون فایل شکسته و اینترنت اکسپلورر آیکون x قرمز را نمایش می دهد و علت اینست که مرورگر قادر به پیدا کردن فایل تصویر نمی باشد. بنابراین هر گاه در آینده به آیکون فوق برخوردید، به خاطر داشته باشیادامه مطلب

بعد از فایل تصویری شما با فرمت GIF یا JPEG آماده شد، زمان درج آن در وب سایت فرا رسیده است. این کار توسط تگ IMG در html امکان پذیر می باشد. تگ img به صورت زیر نوشته می شود: تگimg تگ پایانی ندارد و لازم نیست که به صورت زیر نوشته شود: img از کلمه image و src از کلمه source بر گرفته شده است که محل فایل عکس را معرفی می کند. نکته: قابل توجه در این قسمت این است که آدرس فایل عکس به درستی وارد شود. بنابراین لازم است که با انواع آدرس دهی مطلق و نسبی آشنا شویم. آدرس دهی مطلق به آدرس زیر توجه کنید: C:UsersOwnerDocumentsHTMLsome_image.gif از قسمت سمت راست آدرس فوق مشخص است که تصویری با نام some-image موجود است که داخل پوشه ای بنام html قرار دارد و پوشه html خود درون پوشه Document و پوشه Document درون پوشه Owner و آن پوشه نیز درون پوشه Users قرار دارد که درون درایو C قرار گرفته است. این نوع آدرس دهی، آدرس دهی مطلق نام دارد که به یک عمل خاص از درایو C اشاره می کند. این روش در اینترنت کارآیی ندارد. اگر چه پوشه های فوق در کامپیوتر شما و داخل درایو C قرار دارند. اما شخصی که از طریق اینترنت و از مکان دیگری صفحه وب شما را مشاهده کند، به آن مسیر دسترسی ندارد. بنابراین عکسی که در صفحه وب قرار دادیده اید فقط برای خودتان قابل مشاهده خواهد بود و نه شخص دیگر. مثال دیگری از آدرس دهی مطلق به صورت زیر ادامه مطلب

همانطور که به خاطر دارید، درباره پسوندهای فایل در ابتدای دوره توضیحاتی داده شد. حال می خواهیم با دو پسوند جدید آشنا شویم: JPEG و GIF. همانطور که صفحات وب و فایل های متنی دارای پسوند فایل می باشند، تصاویر پسوند مخصوص خود را دارند. پسوندهای بسیار زیادی برای تصاویر وجود دارند، دو تا از مهمترین پسوندها که در صفحات وب استفاده می شوند، JPEG و GIF هستند. (PNG نیز یکی دیگر از فرمت های معروف می باشد که مشابه GIF است. بنابراین به صورت مجزا راجع به آن بحث نمی کنیم).تصاویر GIF فایل های GIF از الگوریتم هایی برای کاهش حجم فایل استفاده می کند. حجم تصاویر در یک صفحه وب به خصوص در زمانهایی که سرعت اینترنت پائین است، عامل بسیار مهمی را ایفا می کند. چنانچه یک عکس با حجم 1 مگابایت داشته باشیم و سرعت اینترنت برابر با 2mb باشد، حدود 4 ثانیه طول می کشد تا عکس بارگذاری شود که زمان طولانی به نظر نمی رسد. اما اگر سرعت اینترنت برابر با 500 کیلو بیت بر ثانیه باشد، حدود 16 ثانیه طول می کشد تا عکس بارگذاری شود و کسی تمایل به انتظار طولانی برای بارگذاری یک عکس ندارد. بنابراین مقایسه حجم یک عکس به سرعت اینترنت بستگی دارد. اگر عکسی در کامپیوترتان دارید نگاهی به پسوند آن بیندازید. نرم افزار هایی وجود دارند که امکان تغییر فرمت عکس را فراهم می کنند. تغییر فرمت عکس به GIF به طرز چشمگیری حجم عکس را کاهش می دهد. اما درادامه مطلب

استایل های خطی فایل متنی html که در ابتدای دوره ایجاد کرده بودید را باز کنید. بر روی منوی File->Seve As کلیک کنید. فایل را با عنوان جدید newpage.html ذخیره کنید. فراموش نکنید که قبل از کلیک روی دکمه ذخیره، آیتم Save As Type را به All Files تغییر دهید. متن را برای عنوان صفحه در تگ Title وارد کنید. یک تگ عنوان H1 اضافه کرده و عبارتی را درون آن تایپ نمایید. حال یک پاراگراف بعد از تگ عنوان وارد نمایید. برای ایجاد استایل خطی بعد از اولین H1 کلیک کنید. کلید فاصله (space) را یکبار فشرده و عبارت زیر را تایپ نمایید: توجه کنید که هیچ فاصله ای بعد از علامت : و قبل از کلمه center وجود نداشته باشد. کدهای html شما باید شبیه تصویر زیر باشد: بعد از تکمیل کد نویسی، نتیجه را در مرورگر مشاهده نمایید. همانطور که ملاحظه می کنید، عنوان وارد شده، در وسط صفحه قرار گرفته است: بنابراین برای وسط چین کردن عناصر روی صفحه، می بایست از ویژگی text-align استفاده کنید. بعد از علامت : مقدار ویژگی را وارد نمایید که در مثال فوق کلمه center می باشد. تمرین: مشابه کلمه center که برای وسط چین کردن عناصر استفاده می شود، می توانید از مقادیر left و right برای چپ چین و راست چین کردن عناصر در صفحه استفاده نمایید. آنها را امتحان نمایید. استایل هایادامه مطلب

نحوه استفاده از کلاس های CSS و انتخاب گرهای ID تا اینجا طریقه تنظیم کردن صفحات استایل دهی را یاد گرفته اید و می دانید که اگر یک انتخاب گر html تنظیم کنید، تمام تگهای html از آن نوع به مقدار ویژگی که شما تعیین کرده اید، تغییر می یابند. بعنوان مثال اگر html به صورت زیر داشته باشید: در این صورت متن تمام عنوان های H1 که در میان تگ BODY استفاده کرده اید به رنگ قرمز خواهند شد. به عبارتی دیگر، برای استفاده از انتخاب گرهای جدید، لازم نیست که چیزی به کدهای html اضافه شود و تگها به طور معمول نوشته می شوند. اگر چه کلاس و انتخاب گرهای شناسه کمی متفاوت هستند. انتخاب گر کلاس برای تنظیم یک انتخاب گر کلاس، کد نویسی به صورت زیر بود: ابتدا یک نقطه تایپ می شود، سپس نام کلاس نوشته می شود که می تواند به دلخواه انتخاب شود. سپس ویژگی و مقدار به طور معمول نوشته می شوند. مثال: Fontone. در مثال فوق یک انتخاب گر کلاس است. عنوانی است که ما خودمان انتخاب کرده ایم. آنچه که داخل آکولاد قرار دارد می گوید که "هر زمانی که این قاعده استفاده می شود، متن رنگ قرمز شود". شما می توانید این قاعده جدید را برای تمام تگهای html بکار ببرید. مانند زیر: زمانی که از انتخاب گر کلاس استفاده می کنید، ولی کلمه "class" استفاده می شود. بعد از آن یک علامت مساوی (=) و بعد از آادامه مطلب

استایل ها در سه محل می توانند قرار بگیرند: خطی، جاسازی شده در فایل html و در فایل خارجی. استایل دهی خطی: می توانید یک تک استایل را مستقیما در تگ های html قرار دهید. این روش استایل دهی خطی نام دارد. استایل های خطی بر سایر خط ها اولویت دارند. مثال: برای جایگذاری استایل در تگ html، به روش زیر عمل کنید: تگی که می خواهید تغییر کند را بنویسید. یک فاصله دار و کلمه style را تایپ کنید. یک علامت مساوی (=) وارد کنید. علامت نقل قول را تایپ کنید. نام ویژگی را به همراه دو نقطه وارد کنید. مقدار را وارد کنید. علامت نقل قول را مجددا وارد کنید. علامت بزرگتری را برای تگ html وارد کنید. استایل دهی جاسازی شده: استایل دهی جاسازی شده، در قسمت HEAD فایل html قرار داده می شوند. زمانی که استایلی را در قسمت HEAD قرار می دهید، برای شناسایی استایل ها به مرورگر می بایست از دو تگ آغازی و پایانی استایلها استفاده نمایید. ما بین دو تگ ، قواعد css نوشته می شوند. استایل دهی در فایل خارجی: به جای قرار دادن استایل ها در بخش HEAD، می توان تمام آنها را در یک فایل متنی وارد کرد. سپس به مرورگر می گویید که محل قرارگیری این فایل کجا است. سپس این فایل مانند زمانی که در بخش (HEAD) بود عمل کند. فایل خارجی استایل به صادامه مطلب

قواعد CSS به مرورگر می فهماند که ظاهر یک صفحه html چگونه باشد و چه کاری انجام دهد. یک قاعده css، مشخص می کند که یک تگ html چه شکلی داشته باشد و یا می توانید قواعد خود را برای بکار بردن در قسمتهای مختلف ایجاد کنید. به عنوان مثال، می توان قاعده ای تنظیم کرد که به مرورگر بگوید که تمام تگهای چگونه تنظیم شوند و اولین خط آنها فرو رفته باشد، یا می توانید قاعده پاراگراف خود را ایجاد نمایید و آنرا برای یک پاراگراف بکار برید و نه برای تمام پارگرافها. یک قاعده سه قسمت دارد: انتخاب گر، ویژگی و مقدار. انتخاب گر ID مشابه انتخاب گر کلاس است، اما برای شناسایی یک عنصر خاص در صفحه استفاده می شود. مثلا یک عنصر جعبه متنی در صفحه. مثال زیر، نحوه استفاده انتخاب گر را نشان می دهد: در فرمت اول، H1 یک انتخاب گر html است. توجه کنید که علامتهای کوچکتری و بزرگتری از تگ حذف شده اند. با نوشتن یک انتخاب گر html، تمام تگهای html از آن نوع در صفحه به فرمتی که تنظیم کرده اید تغییر می یابند. بنابراین برای فرمت H1 که در بالا تنظیم شده است، تمام متنهایی که داخل تگ H1 نوشته شده اند، به رنگ قرمز تغییر خواهند کرد. استایل دوم، NewFont. یک انتخاب گر کلاس است. دقت کنید که انتخاب گر کلاس با یک نقطه آغاز می شود. سپس نام کلاس نوشته می شود (هر عنوان که بخواهید). بین نقطه و عنوان کلاس و همچنین بین کلمات در عنوان کلاس فاصله ای ادامه مطلب

مقدمه ای بر صفحات قالب بندی آبشاری html ابزاری برای طراحی گرافیک صفحه نیست، بلکه روشی آسان برای نمایش متن در مرورگر است، مانند روشی که واژه پرداز word متون در صفحه نمایش می دهد. تگ ها طی سالیان سال اضافه شدند تا رنگ و روی به یک صفحه ساده (که در ابتدا طوسی رنگ بود) برسند. به مرور عناصری مانند تصاویر، جدول ها و فرم ها اضافه شدند. این عناصر می توانند مستقیما به وسیله کدهای html در صفحه نمایش داده شوند. طراحان خواهان روش های بهتری برای نمایش کارشان روی صفحه است. html تنها کافی نیست بعد از نوشتن کدهای html، برای اینکه متن یا تصویر را در جای مناسب خود قرار دهید، مجبورید از جدول بندی پیچیده ای برای تنظیم موقعیت عناصر استفاده کنید. و تصور کنید که می خواهید یک پارگراف خاص پشت زمینه رنگی داشته باشد و نه تمام صفحه، انجام این کار با html کمی مشکل است. در مورد لینک ها چه؟ آیا توسط html راهی وجود دارد که زیر خط لینک ها فعال و غیرفعال شود؟ پاسخ تمام این سوال ها به استفاده از صفحات قالب بندی آبشاری (css) ختم می شود. یک استایل، روش دیگری برای تنظیم چینش عناصر در صفحه هستند و به صفحه وب روح می دهند. یک صفحه قالب بندی چیست؟ اگر از یک واژه پرداز متنی مانند word استفاده کرده باشید می دانید که چگونه می توان به واژه پرداز گفت که رنگ متن را مشکی کند. به عنوان مثال تمام عنوان های صفحه می توانند سایز 28، ادامه مطلب