طراحی سایت تهران، سیدخندان به سمت رسالت شرق، خیابان کابلی (دبستان)، نبش کوچه آگاهی، پلاک ۴ ، واحد ۱۵
02188471521   ۰۲۱۴۰۸۸۱۰۳۸

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

آموزش HTML | آموزش HTML5

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

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

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

CSS مخفف عبارت Cascading Style Sheet می باشد و کدهایی هستند که برای سبک دهی به المان های سند HTML نوشته می شوند. برای ادامه آموزش زبان HTML لازم است که با بخش هایی از CSS آشنا باشیم. در این بخش مقدمات CSS را آموزش خواهیم داد و در جلسات بعدی ادامه مباحث HTML را با هم خواهیم آموخت. ( از منوی سایت و قسمت آموزش طراحی سایت به آموزش های CSS دسترسی خواهید داشته. )

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

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

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

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

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

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

روش درون خطی

این روش زمانی کاربرد دارد که می خواهیم یک سبک خاص را به المانی خاص بدهیم. برای این کار از خصیصه style استفاده می کنیم که در بخش قبلی با آن آشنا شدیم:

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

روش داخلی

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

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

روش خارجی

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

زمانی که تمام دستورات سبک دهی را در فایل خارجی نوشتیم، در تگ <head>  هر سند HTML می توان فایل خارجی دستورات CSS را به آن سند متصل کرد. به مثال زیر توجه فرمایید:

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

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

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

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

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

فونت و سبک دهی به آن

می توان هر فونت دلخواهی را برای متن ها انتخاب کرد و آنها  را سبک دهی کرد که برای این کار ویژگی های زیر را داریم:

  • برای تعیین رنگ فونت از ویژگی color استفاده می کنیم.
  • برای تغیین خانواده فونت از ویژگی font-family استفاده می کنیم.
  • برای تغییر اندازه فونت از ویژگی font-size استفاده می کنیم. واحد اندازه فونت را می توان px و یا % ، em و … انتخاب کرد.

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

حاشیه ، فاصله داخلی و فاصله خارجی

Border: با استفاده از این ویژگی می توان المان ها را حاشیه گذاری کرد.

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

Padding: با استفاده از این ویژگی، بین متن و حاشیه فاصله خالی ایجاد کنیم که به آن فاصله داخلی می گوییم.

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

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

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

شناسه

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

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

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

کلاس

اگر بخواهیم چندین المان را همزمان با هم انتخاب کرده و سبک های خاصی را به آنها بدهیم، از خصیصه کلاس ( class ) استفاده می کنیم. این خصیصه را در تگ آغاز تعیین می کنیم و برای انتخاب المان های با class یکسان، نام تگ را نوشته و بعد ” . ” و در ادامه کلاسی را که تعیین کرده بودیم می نویسیم. مثلا برای انتخاب چندین پاراگراف با کلاس یکسان، در تگ <style>  اینگونه عمل می کنیم:

به مثال زیر توجه فرمایید:

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

در مثال بالا با استفاده از خصیصه class پاراگراف های 1 و 4 و 8 را انتخاب و CSS ها را به این 3 پاراگراف اعمال کردیم.

با این دانش ابتدایی آموزش های HTML را ادامه می دهیم. بعد از یادگیری کامل HTML در قدم بعد به یادگیری CSS می پردازیم.

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

نوشته های مرتبط

دیدگاه ‏خود را بنویسید