درخواست های ارتباط
جستجو تنظیمات
لیست دوستان من
صندوق پیام
همه را دیدم تنظیمات
  • در حال دریافت لیست پیام ها
صندوق پیام
  • در حال دریافت لیست رویدادها
همه رویدادهای من

طراحی وب سایت با کمک HTML و CSS - بخش سوم::لینک ها و Css property ها

0 نظرات
سلام به دوستان عزیز 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 را که در جلسه ی قبل درست کردیم به رنگ قرمز تغیر دهیم:
<!DOCTYPE html>
<html>
<head>
	<title>First Css projects</title>
	<style>
		body{
			background-color:red;
		}
	</style>
</head>
<body>
	<h1>This is my first Css project heading</h1>
	<p>This is my first Css project text!</p>

</body>
</html>
برای تغیر دادن رنگ پس زمینه ی تگی از 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 می توان این خاصیت تگ ها را تغیر داد.
<!DOCTYPE html>
	<html>
	<head>
		<title>First Css projects</title>
		<style>
			body{
				background-color:gainsboro;
			}
		</style>
	</head>
	<body>
		<span>This is an inline tag</span><span>This is an other html inline tag!</span>
		<p>This is a block tag</p>
		<span>This is an inline tag.</span>
	</body>
</html>
خروجی:
inline elements

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

متن های bold و italic


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

متن های bold

متن ها در تگ strong به شکل bold در می آیند.
<p>This is a <strong>paragraph</strong></p>
خروجی:
bold text

متن های Italic

با استفاده از تگ em شما می توانید متن های Italic بر صفحه ی خود درج کنید.
<p>This is a <em>paragraph</em></p>
خروجی:
italic


لینک های HTML


یکی از مهم ترین عناصری که در یک صفحه ی وب می تواند وجود داشته باشد لینک است. ما هر روز توی وبسایت های مختلف با استفاده از لینک ها به صفحات دیگر می رویم. شیوه ی لینک دادن به صفحات دیگر بسیار ساده است و با تگ a و Attribute آن که href نام دارد انجام می شود.(تگ a تگی inline است.)
طریقه ی کلی نوشتن یک لینک:
<a herf="address">link text</a>
برای شروع من فولدر project3 را داخل فولدر Workspace که در جلسه ی اول درست کردیم می سازم و داخل آن دو صفحه با نام های index.html و about.html ایجاد می کنم.
در داخل صفحه ی index کد های زیر را می نویسم:
<!DOCTYPE html>
	<html>
	<head>
		<title>ITPRO</title>
		<style>
			body{
				background-color:gainsboro;
			}
		</style>
	</head>
	<body>
		<h1>انجمن تخصصی فناوری اطلاعات ایران</h1>
	</body>
</html>	
خروجی:
itpro

و در داخل about کد های زیر را:
<!DOCTYPE html>
	<html>
	<head>
		<title>ITPRO</title>
		<style>
			body{
				background-color:gainsboro;
			}
		</style>
	</head>
	<body>
		<h1>انجمن تخصصی فناوری اطلاعات ایران</h1>
		<p>انجمن تخصصی فناوری اطلاعات ایران با شعار زکات علم  شروع به فعالیت کرد.</p>
	</body>
</html>	
خروجی:
about-itpro

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

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


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

ابتدا برای فایل index لینک به صفحه ی About رو قرار می دهیم.
<a href="content/about.html">درباره ی ما</a>
خروجی:
html links

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

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

Target Attribute

شما با یک Attribute می توانید این را کنترل بکنید که لینک شما در کجا باز شود مثلا از صفحه ی شما به صفحه ی لینک داده شده انتقال بیابد یا در تب جدیدی از مرورگر باز شود. این Attribute به این شکل نوشته می شود:
<a href="../index.html" target="_blank">خانه</a>
blank_ مشخص می کند که لینک در تب جدیدی باز شود.

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






برچسب ها
ردیف عنوان قیمت
1 طراحی وب سایت با کمک HTML و CSS - بخش اول :: مقدمه رایگان
2 طراحی وب سایت با کمک HTML و CSS - بخش دوم:: Style ها و متن ها رایگان
3 طراحی وب سایت با کمک HTML و CSS - بخش سوم::لینک ها و Css property ها رایگان
4 طراحی وب سایت با کمک HTML و CSS - بخش چهارم :: تگ های ساختاری و CSS Selector های پیشرفته رایگان
5 طراحی وب سایت با کمک HTML و CSS - بخش پنجم :: Box Model رایگان
6 طراحی وب سایت با کمک HTML و CSS - بخش ششم :: Float ها رایگان
7 طراحی وب سایت با کمک HTML و CSS - بخش هفتم :: Position ها رایگان
8 طراحی وب سایت با کمک HTML و CSS - بخش هشتم :: لیست ها ، Background ها و عکس ها رایگان
9 طراحی وب سایت با کمک HTML و CSS - بخش نهم :: فرم ها و جداول رایگان
10 طراحی وب سایت با کمک HTML و CSS - بخش دهم :: کد نویسی اصولی و Transition ها رایگان
11 طراحی وب سایت با کمک HTML و CSS - بخش یازدهم :: Animation ها رایگان
12 طراحی وب سایت با کمک HTML و CSS - بخش دوازدهم (پایانی) :: طراحی واکنشگرا و IFrame ها رایگان
مطالب مرتبط
نظرات
هیچ نظری ارسال نشده است

    برای ارسال نظر ابتدا به سایت وارد شوید

    arrow