HTML CSS, آموزشگاه, رایانه, وب

مقدمه ای بر طراحی وب

html و css
26
آذر

آموزش طراحی سایت با HTML و CSS: بخش اول

معرفی HTML5

اکثر صفحات وب بر اساس زبان نشانه گذاری Haper Text Markup Language می باشند که چهار حرف اول آن بصورت HTML  در آمده است. یادگیری این زبان بسیار ساده است. هر کس که به کامپیوتر آشنایی داشه باشد به راحتی می تواند با یادگیری چند تگ و قرار دادن آن ها کنار یکدیگر یک صفحه وب ایجاد کند. همچنین این زبان به قدری انعطاف پذیر است که طراحان علاقمند به یادگیری و آزمایش آن صفحات می شوند. به خصوص زمانی که HTML با برگه های CSS که بعداً در مورد آنها توضیح می دهیم ادغام شود. 

معرفی تگ ها و عناصر HTML

اسناد HTML فایل های متنی هستند که تگ های HTML را در بر می گیرند. این تگ ها عناصر HTML را تشکیل می دهند. معمولا این فایل ها با پسوند html یا  htm ذخیره می شوند. تگ های HTML درون دو علامت <> قرار می گیرند. مثلاً <p> آغاز پاراگراف است. بهتر است تگ ها بلافاصله پس از شروع، با تگ پایانی بسته شوند. تگ های پایانی مانند تگ های آغازین هستند. با این تفاوت که یک خط مورب اضافه تر دارند. یک تگ کامل HTML مانند زیر می باشد.

<p> Here is a paragraph. </p>

تگ بالا دارای عناصر زیر می باشد:

  • تگ آغازین : <p>
  • محتوا : Here is a paragraph
  • تگ پایانی : <p/>

تگ های تودرتو

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

<p><strong> Here is a paragraph. </strong></p>

  • تگ <p>….</p>  به عنوان تگ والد محسوب می شود.
  • با استفاده از تگ strong متن به صورت تیره یا Bold در می آید.

<p><strong><em> Here is a paragraph. </em></strong></p>

  • ترتیب بستن کد ها برعکس ترتیب باز شدن آنهاست.
  • با استفاده از تگ em متن به صورت کج یا ایتالیک در می آید.

<p><strong><em> Here is a paragraph. </strong></p>

  • بستن همه تگ ها ضروریتی ندارد، اما بهتر است جهت جلوگیری از خطا همه تگ ها بسته شود.
  • در این مثال تگ em بسته نشده است، به همین دلیل متن های بعدی در صفحه به صورت ایتالیک نمایش داده می شوند.

معرفی CSS

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

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

دستورهای CSS

هر دستور CSS از یک انتخابگر(Selector) و یک اعلان (Declaration) تشکیل شده است. انتخابگر در ابتدای دستور CSS قرار گرفته است و مشخص می کند که این دستور بر کدام یک از قسمت های سند HTML تأثیر می گذارد. اعلان نیز از تعدادی ویژگی / مقدار تشکیل شده که ویژگی های خاصی دارند و تعیین می کنند که عنصر مربوط چگونه باید نمایش داده شود.

H1 {color : red ; background : yellow }

  • انتخابگر: H1
  • اعلان : {color : red ; background : yellow }
  • ویژگی و مقدار : color : red

انواع انتخابگر های CSS

  • انتخابگر های کلاس 
  • انتخابگر های ID
  • انتخابگر های گروهی
  • انتخابگر های مفهومی
  • انتخابگر های کاذب
  • انتخابگر های خصیصه

انتخابگر های کلاس

. warningText { color : red ; }

  • در CSS نام یک انتخابگر کلاس بعد از نقطه قرار می گیرد.

<H2 class = ” warningText “> This heading is red. </H2>

<p class = ” warningText ” >This is a paragraph. </p>

<p> This is paragraph, <span class = “warningText ” >and this is red </span></p>

  • این استایل را می توانیم با استفاده از خصیصه class به تمام عناصر HTML در هر صفحه ای که استایل شیت به آن متصل است اعمال کنیم.

p . warningText {color : red ; }

  • در صورتی که بخواهیم یک کلاس را به عنصر خاصی نسبت دهیم تگ HTML مربوط به آن را قبل از نقطه قرار می دهیم.
  • در این مثال فقط تگ p تغییر رنگ می دهد و این تغییر رنگ شامل تگ های heading یا span نمی شود.

<p class = ” warningText hugeText ” >

  • یک عنصر را می توان با چندین کلاس مقداردهی کرد. برای این کار باید چندن مقدار را در یک خصیصه کلاس که با فاصله از یکدیگر جدا شده اند قرار داد.
  • در این مثال تگ p  بر اساس کلاس های warningText و hugeText تغییر می کند.

انتخابگرهای ID

p # Footer { padding : 20 px ; }

  • جهت استفاده از انتخابگرهای ID در CSS، باید نام ID را بعد از علامت # نوشت.
  • استفاده از ID بالا باعث ایجاد 20 پیکسل حاشیه در تمام جهات می شود.

<p id = ” Footer ” > &copy ; 200px the company all right reserved. </p>

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

انتخابگرهای گروهی

H1 , H2 , H3 , H4 , H5 , H6 { color : green ; }

H1 { font-size : 1.5em ; }

H2 { font-size : 1.2em ; }

  • اگر بخواهید مقدار یک ویژگی را برای چندین انتخابگر تعریف کنید، می توانید از انتخابگرهای گروهی استفاده کنید که با یک (,) از یکدیگر جدا می شوند.
  • در این مثال تمام عناوین سایت به رنگ سبز تبدیل می شوند.
  • می توان برای عبارت های مشترک از انتخابگرهای گروهی و برای مقادیر ویژگی های خاص از انتخابگرهای مجزا استفاده کرد.

انتخابگرهای مفهومی

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

<p> I am a paragraph. </p>

<div id = ” navigation ” ><p> I am a paragraph within the navigation div. </p></div>

  • در مثال بالا دو نوع پاراگراف داریم، یکی داخل تگ div و دیگری خارج از آن

p { color : black ; }

# navigation p { color : blue ; font-weight : bold ; }

  • در مثال بالا در خط اوّل از یک انتخابگر استاندارد برای سبک دهی به کل پاراگراف های صفحه استفاده و سپس با استفاده از یک انتخابگر مفهومی مقادیر خاصی را برای پاراگراف های درون div navigation (در مثال قبل) تعیین کرده ایم.
  • هر یک از انتخابگرها را باید با فاصله از یکدیگر جدا کرد.( در این مثال منظور p و  navigation  می باشد.)
  • نتیجه دو عبارت فوق به صورت زیر است :
    1. رنگ تمام پاراگراف ها در صفحه مشکی می شود.
    2. دستور navigation p # نسبت به دستور p برای تمام پاراگراف های درون کادر navigation  در اولویت قرار می گیرد و رنگ آنها را آبی و به صورت تو پر (bold) در می آورد.

انتخابگرهای کاذب

این انتخابگرها بیشتر زمانی که می خواهید به لینک ها سبک دهی کنید مورد استفاده قرار می گیرد.

a : hover { color : black ; }

لینک ها را می توان در سه حالت سبک دهی کرد:

  1. unvisited : زمانی که روی آنها کلیک نشده باشد.
  2. visited : زمانی که روی آنها کلیک شده باشد.
  3. hover : زمانی که مأوس از روی آن عبور می کند.

انتخابگر های خصیصه

انتخابگرهای خصیصه، آنهایی هستند که بر اساس خصیصه هایشان مورد هدف قرار می گیرند.

<a href = ” http://www.example.com “> I am a link. </a>

تصور کنید که می خواهید در یک سایت قبل از تمام لینک لوگوی سایت را قرار دهید. برای این کار دو راه وجود دارد:

  1. برای تمام لینک ها یک کلاس تعریف کرد و برای تک تک لینک های که در آینده به صفحه اضافه می کنید، این کلاس را اضافه کنید.
  2. راه ساده تر اینست که از انتخابگرهای خصیصه، همانند مثال زیر استفاده کنید.

a [ href$ = ‘ example.com ‘ ] {content : url (logos / logo.png ) ; }

افزودن استایل به صفحه وب

به طور کلی برای استایل دهی به صفحات وب دو روش وجود دارد:

الف.استفاده از CSS خارجی (External style sheet)

ب.انجام عملیات استایل دهی در درون سند HTML ( روش مستقیم )

الف.روش CSS  خارجی

  • دستورات CSS به صورت مجزا در سندی با پسوند CSS. ذخیره و سپس دستورات متصل کننده به تگ Head در سند HTML اضافه می گردد.
  • از دو تگ زیر جهت اتصال استفاده می شود:

1.تگ Link :

<link rel = ” stylesheet ” href = ” mystylesheet.css ” >

2.تگ style ( روش Import ) :

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

<style type = “text/css ” media = “screen” > @import url ( mystylesheet.css );</style>

ب.روش مستقیم :

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

1.وارد کردن تگ Style به طور مستقیم در بخش Head سند HTML :

<Head>
<style type = ” text/css ” >
p {
color : black ;
}
# navigation p {
color : blue ;
font-weight : bold ;
}
</style>
</Head>

2.روش استایل داخلی ( inline style ) :

< p style = ” color : blue ; ” > this paragraph will be displayed in blue. </p>

    • در این روش دستورات CSS مستقیماً درون تگ ها نوشته می شود.
    • این روش منسوخ شده و کم کم در حال از بین رفتن است.

برگه آبشاری ( Cascade )

دستورات CSS را می توانید چندین بار برای یک عنصر به کار ببرید. به عبارت دیگر هم از استایل های داخلی و هم از استایل های Embedded (خارجی) می توانید استفاده کنید. به روش عملکرد دستورهای CSS آبشار ( Cascade ) گفته می شود و قانون کلی آن به صورت زیر است:

همیشه نزدیک ترین مقدار به یک عنصر در آن دستورالعمل اعمال می شود.

p{
font-size : 1.1em;
}
p{
font-size : 1.2em;
}

  • در این مثال دستور دوم نسبت به دستور اول در اولویت قرار می گیرد و اندازه قلم تگ های متصل به آن 1.2em می شود.
  • اگر این نوع دستورها به صورت یک استایل Embedded زیر قسمت Import یا Link قرار گیرند، آن دستور دارای اولویت می شود.( درون سند HTML )
  • اگر این نوع دستورها بصورت Inline وارد تگ مربوطه شوند، آن دستور نسبت به سایر دستورها در اولویت قرار می گیرد.
  • ممکن در قسمت Head یک صفحه وب چندین برگه آبشاری بصورت Link یا Import قرار گیرد. هر دستوری که در برگه دوم قرار گیرد نسبت به برگه آبشاری قبلی دارای اولیت می باشد.
  • یک عنصر HTML با تگ HTML آغاز شده سپس وارد شاخه های Head و Body می شود که هر یک از این تگ ها عناصر فرزند بیشماری درون خود دارند. وقتی استایلی به یک عنصر نسبت داده می شود، تمام فرزندان آن عنصر نیز مقدار ویژگی CSS را به خود می گیرند، مگر اینکه استایل خاص دیگری به آنها نسبت داده شده باشد.
  • تمام ویژگی های CSS وراثتی نیستند.

مدل جعبه ای در CSS

مدل جعبه ای CSS
مدل جعبه ای CSS
  • هر عنصر CSS، درون یک کادر مستطیل قرار می گیرد که ابعادش بستگی به محتوای درون آن دارد.
  • با استفاده از ویژگی های width و height می توان اندازه یک عنصر CSS را مشخص کرد.
  • خط مرزی عناصر ، Border نام دارد.
  • تغییر اندازه ویژگی Padding باعث تغییر فاصله یک عنصر از Border می شود.
  • تغییر اندازه ویژگی Margin باعث تغییر فاصله سایر عناصر مجاور از Border یک عنصر CSS می شود. در بعضی موارد حاشیه بین دو عنصر حذف شده و فقط حاشیه بزرگتر استفاده می شود.
  • مجموع طول و عرض جعبه به اضافه Margin ، Border ، Padding میزان فضای اشغال شده توسط این عنصر در صفحه را تعیین می کند.

دیدگاهتان را بنویسید

نشانی ایمیل شما منتشر نخواهد شد. بخش‌های موردنیاز علامت‌گذاری شده‌اند *

سه × دو =