آموزش و دوره های رایگان برنامه نویسی( طراحی وب و اندروید) سایتاپ سئو

در سایتاپ با آموزش های اندروید،asp.et MVC و همچنین SEO و بهینه سازی وب با همراه باشید.همچنین با اخبار روز در زمینه های امنیت و هک و اخبار روز تکنولوژی را در سایت ما میتوانید بخوانید.


دوره طراحی وب (html,css)- جلسه3

سایتاپ سئو

با قسمت سوم آموزش زبان های HTML ,CSS  یا همان طراحی وب در خدمت شما هستیم.

در این قسمت با تعریف اتریبیوت ها و ورود به  css  خواهیم بود.

 

اتریبیوت ها چه هستند؟

اتریبیوت ها ویژگی ها و استایل هایی هستند که به هر تگ توسط برنامه نویس،میتواند اختصاص داده میشوند.

برای مثال ما چهار تا تگ <p>  داریم.

<html>
<head>

</head>


<body>
<p>this is a paragraph1</p>
<p>this is a paragraph2</p>
<p>this is a paragraph3</p>
<p>this is a paragraph4</p>

</body>
</html>

میخواهیم رنگ نوشته تگ ها یا اصلا کمی قضیه را سخت میکنیم.فقط رنگ پس زمینه تگ <p> دومی را قرمز کنیم.چگونه این امر امکان پذیر است؟یا اینکه رنگ پس زمینه یا همان بک گراند یکی از این چهار تگ یا همه شان آبی شود.این چگونه ممکن است؟

 

به ادامه آموزش میپردازیم.

اولین اتریبیوتی که قصد یادگیری آن را داریم، اتریبیوت id است. ما اگر بخواهیم به یک تگ یک شناسه دهیم که با آن شناسه رنگ یا هر ویژگی آن تگ را عوض کنیم، به آن تگ id  میدهیم.به صورت زیر:

 

<html>
<head>



</head>

<body>
<p>this is a paragraph1</p>
<p id="para2">this is a paragraph2</p>
<p>this is a paragraph3</p>
<p>this is a paragraph4</p>

</body>
</html>

خوب همان طور که در بالا مشاهده میکنید، ما به تگ دومی یک اتربیوت به اسم  para2  داده ایم..این اسم یک اسم دلخواه است و شما میتوانید هر اسم دیگری را به عنوان اتریبیوت id  به آن تگ بدهیم.

نکته:دو تگ نمیتوانند آی دی یکسان داشته باشند.یعنی آی دی ها منحصر به فرد هستند.

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

پس ما برای انجام این کاز نیاز داریم که از زبان  css  استفاده کنیم.به سه طریق میتوانیم از زبان   css استفاده کنیم.ما فعلا از تگ <style> استفاده میکنیم.

برای این کار باید درون تگ <head>  یک تگ <style>  تعریف کنیم.به صورت زیر:

<html>
<head>

<style> 


</style>

</head>


<body>
<p>this is a paragraph1</p>
<p id="para2">this is a paragraph2</p>
<p>this is a paragraph3</p>
<p>this is a paragraph4</p>

</body>
</html>

 

حال ما دستورات زبان css  را درون این تگ مینویسیم.زبان css  بسیار بسیار ساده است.مثلا دستور زیر مشخص است که چه کاری انجام میدهد:

Background-color:blue

خوب کیست که نداند این دستور چکار میکند؟مشخص است.رنگ پس زمینه یا همان بک گراند را آبی میکند.

ولی چگونه آن تگی که دارای آی دی گفته شده است از دستور بالا تبعیت کند؟به صورت زیر

<html>
<head>

<style> 

#para2{background-color: blue}
</style>

</head>


<body>
<p>this is a paragraph1</p>
<p id="para2">this is a paragraph2</p>
<p>this is a paragraph3</p>
<p>this is a paragraph4</p>

</body>
</html>

عبارت بالا را درون تگ <style> مینویسیم و خروجی را مشاده میکنیم.

یا مثلا به تگ <p>  سومی، یک اتریبیوت آی دی به اسم para3  میدهیم.حال میخواهیم که رنگ نوشته این تگ،قرمز شود.اینبار از دستور زیر باید استفاده کنیم:

 

<html>
<head>

<style> 

#para2{background-color: blue}

#para3{color:red}
</style>

</head>


<body>
<p>this is a paragraph1</p>
<p id="para2">this is a paragraph2</p>
<p id="para3">this is a paragraph3</p>
<p>this is a paragraph4</p>

</body>
</html>

 

و خروجی به صورت زیر خواهد بود.

 

 

 

خوب در این جلسه با اتریبیوت آی دی آشنا شدید.و همینطور یک درک از کاربرد زبان css   به دست آورده اید.در جلسات بعدی با اتریبیوت ها و دستورات بیشتری در css  آشنا خواهید شد.

 

 

تمرین های عملی:

چهار تگ <p> بنویسید که چهارمی رنگ پس زمینه سبز داشته باشد و دومی رنگ نوشته اش زرد باشد.

دو تگ <p> بنویسید که تگ اولی رنگ پس زمینه قرمز و رنگ نوشته اش سفید باشد.

دسته بندی
Tutorial-Web-Design
آموزش-اتریبیوت-id-در-طراحی-وب کاربرد-اتریبیوت-ها-در-html-و-css دوره-رایگان-آموزش-طراحی-وب دوره-آموزشی-وب-دیزاین-صفر-تا-صد آموزش-عملی-زبان-برنامه-نویسی-html آموزش-دستورات-زبان-css-به-صورت-مقدماتی دوره-رایگان-طراحی-وب

برگشت به صفحه اصلی

سایتاپ درباره ما

#به نام یکتا برنامه نویس هستی


تلگرام من

alitaheri_4

بنده علی طاهری دانشجوی رشته نرم افزار و علاقه مند به برنامه نویسی هستم.اولین بار در 14 سالگی با وبلاگ نویسی پا در عرصه وب و سئو گذاشتم.در حال حاضر در برنامه نویسی اندروید با زبان جاوا و تحت وب با asp.net فعالیت دارم.همچنین بسیار علاقه مند به سئو هستم.