آموزش HTML – بخش پنجم

آموزش HTML – بخش پنجم

آشنایی مقدماتی با CSS

در قسمت‌های قبل گفتیم که ساختمان اصلی هر صفحه وب را با زبان HTML می‌سازیم. برای جان بخشیدن به صفحه و همچنین نحوه نمایش اجزا مختلف صفحه به‌صورت دلخواه، از CSS استفاده می‌کنیم. CSS مخفف عبارت Cascading Style Sheet می‌باشد و کدهایی هستند که برای اعمال تغییرات دلخواه بر روی اجزاء صفحه نوشته می‌شوند. برای ادامه آموزش زبان HTML نیاز هست که با بخش‌هایی از CSS آشنا باشیم. در این قسمت مقدمات CSS را آموزش خواهیم داد و بعد ادامه HTML را باهم یاد خواهیم گرفت. (آموزش CSS بعد از آموزش HTML – بخش پنجم  به‌طور کامل در سایت سازان قرار خواهد گرفت.)

برای اضافه کردن CSS به ساختار صفحه‌ای که با HTML طراحی کرده‌ایم ۳ روش وجود دارد:

  • Inline: با استفاده از اتریبیوت Style در تگ آغاز هر جزء؛ که در قسمت‌های گذشته از آن استفاده کردیم.
  • Internal: در این روش دورن تگ <head> تگی به نام <style> را ایجاد کرده و درون آن کدهای دلخواه را می‌نویسیم. تگ <style> به‌صورت زوج بوده و دارای تگ آغاز و پایان است.
  • External: در این روش تمام کدهای CSS را در یک فایلی جدا نوشته و آن‌ها را به صفحه لینک می‌دهیم. مزیتی که این روش دارد این است که می‌توان تمام کدهای نوشته‌شده را به چند صفحه اعمال کرد نیازی به نوشتن کدهای تکراری برای هر صفحه نیست.

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

درروش Internal و External برای اعمال CSS باید ابتدا المنت موردنظر را انتخاب کنید و بعد کدهای CSS را بنویسید. فرض کنید می‌خواهیم برای پاراگرافی CSS هایی را بنویسیم. به‌صورت زیر عمل می‌کنیم:

p { property: value; }

p سلکتور است و یعنی هر پاراگرافی درون صفحه را انتخاب کرده و CSS ها را به آن اعمال کن. به نحوه نوشتن css ها توجه کنید. ابتدا property را نوشته و بعد ” : ” و بعد مقدار را می‌نویسیم و در انتها ” ; ” را می‌نویسیم.

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

 

اعمال CSS به روش Inline

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

<!DOCTYPE html>

<html lang="en">

          <head>

                   <meta charset="UTF-8">

                   <title> عنوان صفحه </title>

          </head>

          <body>

 

                   <p style="color:green"> این پاراگراف را با استفاده از اتریبیوت استایل به رنگ سبز تغییر داده ایم </p>

 

          </body>

</html>

آموزش HTML – بخش پنجم | طﺮاﺣﻲ ﺻﻔﺤﺎت وب | طراحی سایت

اعمال CSS به روش Internal

در این روش برای تمام اجزاء یک صفحه می‌توان CSS هایی را در همان صفحه کدهای HTML نوشت. همان‌طور که در بالا اشاره شد برای استفاده از این روش، درون تگ <head> تگ <style> را نوشته و کدهای CSS را می‌نویسیم.

<!DOCTYPE html>

<html lang="en">

          <head>

                   <meta charset="UTF-8">

                   <title> عنوان صفحه </title>

                   <style>

                   body { background-color: cyan; }

                   h1 { color: blue; }

                   p { color: green; }

                   </style>

          </head>

          <body>

 

                   <h1> عنوان مطلب نوشته‌شده در صفحه </h1>

 

                   <p> پاراگراف‌هایی در صفحه </p>

 

 

          </body>

</html>

آموزش HTML – بخش پنجم | طﺮاﺣﻲ ﺻﻔﺤﺎت وب | طراحی سایت

اعمال CSS به روش External

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

حال وقتی این کدها را در یک صفحه نوشتیم، درون تگ <head> این کدها را به صفحه موردنظرمان لینک می‌دهیم. به مثال زیر توجه فرمایید:

می‌خواهیم یک فایل اکسترنال برای CSS هایمان ایجاد کنیم. در نرم‌افزار sublime یک صفحه جدید را با فشردن کلیدهای Ctrl+N ایجاد کنید. در منوی File بر روی Save As کلیک کنید. توجه کنید که برای فایلهای CSS نام دلخواه را تایپ کرده و در ادامه .CSS را اضافه کنید و در کنار فایل index.html ذخیره کنید.

آموزش HTML – بخش پنجم | طﺮاﺣﻲ ﺻﻔﺤﺎت وب | طراحی سایت

درون این فایل کدهای زیر را تایپ کنید:

 

body {

    background-color: yellow;

}

h1 {

    color: red;

}

p {

    color: green;

}

برای لینک کردن فایل CSS به صفحات HTML به این صورت عمل می‌کنیم که درون تگ <head> تگ <link> را ایجاد می‌کنیم. این تگ دارای دو اتریبیوت rel و href است که اتریبیوت rel رابطه فایل CSS با صفحه HTML تعریف می‌کند. و اتریبیوت href برای تعیین آدرس فایل CSS می‌باشد. به کدهای زیر دقت کنید:

<!DOCTYPE html>

<html lang="en">

          <head>

                   <meta charset="UTF-8">

                   <title> عنوان صفحه </title>

 

                   <link rel="stylesheet" href="style.css">

 

          </head>

          <body>

 

                   <h1> عنوان مطلب نوشته‌شده در صفحه </h1>

 

                   <p> پاراگراف‌هایی در صفحه </p>

 

 

          </body>

</html>

آموزش HTML – بخش پنجم | طﺮاﺣﻲ ﺻﻔﺤﺎت وب | طراحی سایت

تغییر فونت و اعمال تغییرات بر آن

برای هر جزء از صفحه می‌توان فونتی را تعیین کرد و تغییراتی را بر روی آن اعمال کرد.

  • برای تعیین رنگ فونت از پراپرتی color استفاده می‌کنیم.
  • برای تغییر نوع فونت از پراپرتی font-family استفاده می‌کنیم.
  • برای تغییر اندازه فونت از پراپرتی font-size استفاده می‌کنیم. اندازه فونت را می‌توان با px و یا % تعیین کرد.

<!DOCTYPE html>

<html lang="en">

          <head>

                   <meta charset="UTF-8">

                   <title> عنوان صفحه </title>

                   <style>

                   h1 { font-family: tahoma;

                             color: blue;

                             font-size: 300%;

                             }

 

                   p { font-family: A shekari;

                             color: red;

                             font-size: 40px;

                    }

 

 

                   </style>

          </head>

          <body>

 

                   <h1> عنوان مطلب نوشته‌شده در صفحه </h1>

 

                   <p> پاراگراف‌هایی در صفحه </p>

 

 

          </body>

</html>

آموزش HTML – بخش پنجم | طﺮاﺣﻲ ﺻﻔﺤﺎت وب | طراحی سایت

آشنایی با Border ، Padding و Margin

Border: با استفاده از این پراپرتی می‌توان برای هر جزء دلخواه از صفحه حاشیه‌ای را ایجاد کرد.

<!DOCTYPE html>

<html lang="en">

          <head>

                   <meta charset="UTF-8">

                   <title> عنوان صفحه </title>

                   <style>

 

                   p { border: 2px solid red;

 

                     }

 

                   </style>

          </head>

          <body>

 

 

                             <p> پاراگراف شماره یک </p> <br>

 

                             <p> پاراگراف شماره دو </p> <br>

 

                             <p> پاراگراف شماره سه </p> <br>

 

 

 

          </body>

</html>

آموزش HTML – بخش پنجم | طﺮاﺣﻲ ﺻﻔﺤﺎت وب | طراحی سایت

 Padding: با استفاده از این پراپرتی، بین متن و حاشیه فاصله قرار می‌دهیم.

<!DOCTYPE html>

<html lang="en">

          <head>

                   <meta charset="UTF-8">

                   <title> عنوان صفحه </title>

                   <style>

 

                   p { border: 2px solid red;

                       padding: 20px;

                     }

 

                   </style>

          </head>

          <body>

 

 

                             <p> پاراگراف شماره یک </p> <br>

 

                             <p> پاراگراف شماره دو </p> <br>

 

                             <p> پاراگراف شماره سه </p> <br>

 

 

 

          </body>

</html>

آموزش HTML – بخش پنجم | طﺮاﺣﻲ ﺻﻔﺤﺎت وب | طراحی سایت

Margin: در قسمت‌های قبل گفتیم که مرورها بین اجزاء صفحه، فاصله‌ای را به‌صورت دیفالت قرار می‌دهند. با استفاده از پراپرتی Margin می‌توان بین این اجزا ( درواقع بین حاشیه‌های اجزاء ) فاصله دلخواهی را ایجاد کرد.

<!DOCTYPE html>

<html lang="en">

          <head>

                   <meta charset="UTF-8">

                   <title> عنوان صفحه </title>

                   <style>

 

                   p { border: 2px solid red;

                       padding: 20px;

                       margin: 70px;

                     }

 

                   </style>

          </head>

          <body>

 

 

                             <p> پاراگراف شماره یک </p> <br>

 

                             <p> پاراگراف شماره دو </p> <br>

 

                             <p> پاراگراف شماره سه </p> <br>

 

 

 

          </body>

</html>

آموزش HTML – بخش پنجم | طﺮاﺣﻲ ﺻﻔﺤﺎت وب | طراحی سایت

آشنایی با اتریبوت id

وقتی‌که می‌خواهیم یک style را به یک جزء خاص نسبت دهیم، برای آن جزء یک id  را در تگ آغاز تعریف می‌کنیم. از این id می‌توان به‌صورت سلکتور استفاده کرد. بدین‌صورت که وقتی می‌خواهیم جزئی با یک id را انتخاب کنیم، همانند قسمت قبل که ابتدا سلکتور را می‌نوشتیم، در اینجا #id را که بنویسیم، جزئی که id را برای آن تعریف کرده‌ایم، انتخاب می‌شود. id باید unique ( یکتا ) باشد. یعنی نمی‌توان برای چند جزء یک id را در نظر گرفت.

<!DOCTYPE html>

<html lang="en">

          <head>

                   <meta charset="UTF-8">

                   <title> عنوان صفحه </title>

                   <style>

 

                   #p01 { border: 2px solid red;

                       padding: 20px;

                       margin: 70px;

                     }

 

                   </style>

          </head>

          <body>

 

 

                             <p id="p01"> پاراگراف شماره یک </p> <br>

 

                             <p> پاراگراف شماره دو </p> <br>

 

                             <p> پاراگراف شماره سه </p> <br>

 

 

 

          </body>

</html>

آموزش HTML – بخش پنجم | طﺮاﺣﻲ ﺻﻔﺤﺎت وب | طراحی سایت

در مثال بالا برای پاراگراف اول id را در تگ آغاز و به‌صورت p01 تعریف کردیم. درون تگ <style> با نوشتن #p01 پاراگراف اول را انتخاب کردیم. همان‌طور که در عکس مشاهده می‌کنید، CSS های نوشته‌شده به پاراگراف اول اعمال می‌شوند.

آشنایی با اتریبیوت class

اگر بخواهیم چندین جزء را هم‌زمان باهم انتخاب کرده و CSS هایی را به آن‌ها اعمال کنیم، از اتریبیوت class استفاده می‌کنیم. این اتریبیوت را در تگ آغاز تعیین می‌کنیم و برای انتخاب اجزاء با class یکسان، نام تگ را نوشته و بعد ” . ” و در ادامه کلاسی را که تعیین کرده بودیم می‌نویسیم. برای انتخاب چندین پاراگراف با class برابر در تگ <style> این‌گونه عمل می‌کنیم:  p.class { css rule }

<!DOCTYPE html>

<html lang="en">

          <head>

                   <meta charset="UTF-8">

                   <title> عنوان صفحه </title>

                   <style>

 

                   p.par { border: 2px solid red;

                       padding: 20px;

                       margin: 70px;

                     }

 

                   </style>

          </head>

          <body>

 

 

                             <p class="par"> پاراگراف شماره یک </p> <br>

 

                             <p> پاراگراف شماره دو </p> <br>

 

                             <p> پاراگراف شماره سه </p> <br>

 

                             <p class="par"> پاراگراف شماره چهار </p> <br>

 

                             <p> پاراگراف شماره پنج </p> <br>

 

                             <p> پاراگراف شماره شش </p> <br>

 

                             <p> پاراگراف شماره هفت </p> <br>

 

                             <p class="par"> پاراگراف شماره هشت </p> <br>

 

                             <p> پاراگراف شماره نه </p> <br>

 

          </body>

</html>

آموزش HTML – بخش پنجم | طﺮاﺣﻲ ﺻﻔﺤﺎت وب | طراحی سایت

در مثال بالا با استفاده از اتریبیوت class پاراگراف‌های ۱ و ۴ و ۸ را انتخاب کردیم و CSS ها را به این ۳ پاراگراف اعمال کردیم.

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

دسته بندی طراحی سایت در سایت سازان