آموزش طراحی سایت با HTML و CSS قسمت 3 : لینک ها و CSS Property

سلام به دوستان عزیز ITPRO.
در جلسه ی قبل با پاراگراف ها ، متن ها عنوان ها ، Style ها و Selector های مقدماتی Css آشنا شدیم . توی این جلسه می خواهیم با property های Css ، تگ های Inline و تگ های block و لینک ها کار کنیم.

property های CSS


درجلسه ی قبل یاد گرفتیم که برای دسترسی به یک تگ در HTML با CSS چطور می شود از CSS Selector ها بهره برد. اما CSS Selector ها به تنهایی هیچ کاری از پیش نمی برند و ما برای استفاده از CSS Selector ها نیاز به Property هایCSS داریم.
هر کدام از Property ها عمل مشخصی دارند و یک بازه از مقدار ها (Valueها) را در بر می گیرند.
Property ها به این شکل نوشته می شوند:
selector{
			property:value;
		}
حالا ما برای نمونه می خواهیم پس زمینه ی صفحه ی html را که در جلسه ی قبل درست کردیم به رنگ قرمز تغیر دهیم:



	First Css projects
	


	

This is my first Css project heading

This is my first Css project text!

برای تغیر دادن رنگ پس زمینه ی تگی از Property این کار یعنی Background-color استفاده می کنیم و مقدار آن را برابر با نام رنگ و یا کد HEX رنگ قرار می دهیم.(هر رنگ کد HEX خود را دارد که با علامت "#" شروع می شود.)
صفحه را در مرورگر باز می کنیم .
خروجی:
css colors

به مرور در آموزش های آینده با CSS Property های بیشتری آشنا می شویم.

تگ های inline و تگ های Block در HTML


تگ های Block

اگر دقت کرده باشید در نمونه کد هایی که در جلسات قبل با هم کار کردیم وقتی دو تگ را داخل BODY در پشت سر هم قرار می دهیم تگ ها در زیر هم قرار می گیرند مثلا وقتی تگ p را بعد از h1 قرار دادیم تگ p به زیر h1 رفت در حقیقت این تگ ها به اندازه ی کل سطری که در آن قرار دارند عرض صفحه را پر می کنند. در HTML تمام تگ های به این شکل نیستند و مثلا تگ span (برای جداسازی متن ها جهت دادن Style استفاده می شود.)که تنها به اندازه ی عرضش فضا می گیرد و می توان چند نمونه از آن را در کنار هم قرار داد.

تگ های Inline

به تگ هایی که تنها به اندازه ی محتوای خودشان عرض صفحه را میگیرند (مانند تگ span که در بالا به آن اشاره کردیم) تگ های inline می گویند . توجه داشته باشید که با CSS می توان این خاصیت تگ ها را تغیر داد.

	
	
		First Css projects
		
	
	
		This is an inline tagThis is an other html inline tag!
		

This is a block tag

This is an inline tag.
خروجی:
inline elements

همانطور که در نمونه ی بالا دیدید تگ p تمام فضای سطر خود را پر می کند و همین باعث می شود که تگ span جایی در آن سطر نداشته باشد و به پایین بیفتد.

متن های bold و italic


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

متن های bold

متن ها در تگ strong به شکل bold در می آیند.

This is a paragraph

خروجی:
bold text

متن های Italic

با استفاده از تگ em شما می توانید متن های Italic بر صفحه ی خود درج کنید.

This is a paragraph

خروجی:
italic


لینک های HTML


یکی از مهم ترین عناصری که در یک صفحه ی وب می تواند وجود داشته باشد لینک است. ما هر روز توی وبسایت های مختلف با استفاده از لینک ها به صفحات دیگر می رویم. شیوه ی لینک دادن به صفحات دیگر بسیار ساده است و با تگ a و Attribute آن که href نام دارد انجام می شود.(تگ a تگی inline است.)
طریقه ی کلی نوشتن یک لینک:
link text
برای شروع من فولدر project3 را داخل فولدر Workspace که در جلسه ی اول درست کردیم می سازم و داخل آن دو صفحه با نام های index.html و about.html ایجاد می کنم.
در داخل صفحه ی index کد های زیر را می نویسم:

	
	
		ITPRO
		
	
	
		

انجمن تخصصی فناوری اطلاعات ایران

خروجی:
itpro

و در داخل about کد های زیر را:

	
	
		ITPRO
		
	
	
		

انجمن تخصصی فناوری اطلاعات ایران

انجمن تخصصی فناوری اطلاعات ایران با شعار زکات علم شروع به فعالیت کرد.

خروجی:
about-itpro

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

آدرس دهی صفحات وب


در صفحات وب برای درج عکس ها،لینک ها،فایل های صوتی و تصویری و ... نیاز به آدرس دهی دارید. آدرس دهی در صفحات وب بسیار ساده است. در صفحات HTML شما نسبت به صفحه ای که در آن می نویسید باید آدرس دهی کنید. و بین فولدر ها باید از / (Slash) استفاده کنید و در نهایت باید نام فایل مورد نظرتون رو با فرمت فایل بنویسید.
برای مثال من فولدری ایجاد و فایل About.html را به آن منتقل می کنم. حالا می خواهم از دو صفحه ی پروژه ام یعنی index.html و about.html به یکدیگر آدرس دهی کنم.
address

ابتدا برای فایل index لینک به صفحه ی About رو قرار می دهیم.
درباره ی ما
خروجی:
html links

فایل about.html ما نسبت به index.html داخل پوشه ی content قرار دارد.
حالا می خواهیم از صفحه ی about.html به صفحه ی index.html که در رده ی بالایی آن قرار دارد لینک کنیم.در آدرس دهی صفحات وب برای برگشت به قسمت بالایی از /.. استفاده می کنیم.
کد صفحه ی about.html:
خانه
در کد بالا ما با نوشتن /.. به فولدر بالایی About.html یعنی فولدر projet3 باز می گردیم. پس فقط کافی است اسم و پسوند فایل مورد نظر خود را در انتها بنویسیم.
خروجی:
html links

توجه داشته باشید که برای لینک دادن به صفحات آنلاین باید از "//:http " در ابتدای آدرس استفاده کنید.

Target Attribute

شما با یک Attribute می توانید این را کنترل بکنید که لینک شما در کجا باز شود مثلا از صفحه ی شما به صفحه ی لینک داده شده انتقال بیابد یا در تب جدیدی از مرورگر باز شود. این Attribute به این شکل نوشته می شود:
خانه
blank_ مشخص می کند که لینک در تب جدیدی باز شود.

ممنون از همراهی شما.
ITPRO باشید!
محمد پارسا صفوی
انجمن تخصصی فناوری اطلاعات ایران - tosinso.com






#آموزش_html_و_css #طراحی_صفحات_وب_با_html_و_css #آموزش_html #آموزش_طراحی_وبسایت_با_html #آموزش_طراحی_وبسایت #آموزش_css #طراحی_وبسایت_با_html_و_css
عنوان
1 آموزش طراحی سایت با HTML و CSS قسمت 1 : مقدمه رایگان
2 آموزش طراحی سایت با HTML و CSS قسمت 2 : Style ها و متن ها رایگان
3 آموزش طراحی سایت با HTML و CSS قسمت 3 : لینک ها و CSS Property رایگان
4 آموزش طراحی سایت با HTML و CSS قسمت 4 : تگ های ساختاری و Selector رایگان
5 آموزش طراحی سایت با HTML و CSS قسمت 5 : Box Model رایگان
6 آموزش طراحی سایت با HTML و CSS قسمت 6 : Flaot ها رایگان
7 آموزش طراحی سایت با HTML و CSS قسمت 7 : Position ها رایگان
8 آموزش طراحی سایت با HTML و CSS قسمت 8 : لیست ، Background و عکس رایگان
9 طراحی وب سایت با کمک HTML و CSS - بخش نهم :: فرم ها و جداول رایگان
10 آموزش طراحی سایت با HTML و CSS قسمت 10 : کد نویسی اصولی رایگان
11 آموزش طراحی سایت با HTML و CSS قسمت 11 : انیمیشن ها رایگان
12 آموزش طراحی سایت با HTML و CSS قسمت 12 : طراحی واکنشگرا رایگان
زمان و قیمت کل 0″ 0
0 نظر

هیچ نظری ارسال نشده است! اولین نظر برای این مطلب را شما ارسال کنید...

نظر شما
برای ارسال نظر باید وارد شوید.
از سرتاسر توسینسو
تنظیمات حریم خصوصی
تائید صرفنظر
×

تو می تونی بهترین نتیجه رو تضمینی با بهترین های ایران بدست بیاری ، پس مقایسه کن و بعد خرید کن : فقط توی جشنواره تابستانه می تونی امروز ارزونتر از فردا خرید کنی ....