فروردین, ۱۳۹۸ بدون نظر HTML, طراحی سایت

در ادامه آموزش های مقدماتی آشنایی با زبان  html، این بار می خواهیم به دو تگ کلیدی، مخصوصا در زمینه لایه بندی (فرمت بندی) صفحات وب بپردازیم، این دو تگ div و span نام دارند و کمتر صفحه وبی وجود دارد که در سورس کدهای خود از آنها استفاده نکرده باشد.

کاربرد تگ div در html

تگ div در زبان html برای ایجاد بلاک ها یا لایه های نگهدارنده جهت فرمت بندی قسمت های مختلف صفحه مورد استفاده قرار می گیرد، در واقع اکثر صفحاتی که در وب مشاهده می کنیم، از بلاک هایی تو در تو تشکیل شده اند که به کمک ویژگی های css به شکل منطقی و نظم یافته ای به نظر می رسند،

به زبان ساده تر در زبان اچ تی ام ال (HTML) زمانیکه بخواهیم گروهی از تگ ها را در کنار یکدیگر قرار دهیم می بایست از تگ <div> استفاده کنیم. در واقع تگ <div> به عنوان ظرفی مورد استفاده قرار می گیرد که می توان دیگر تگ های اچ تی ام ال را داخل آن قرار داد.

در مقاله قبلی با مفهموم تگ های inline-level , block-level آشنا شدید، تگ <div> از دید یک مرورگر حاوی معنی خاصی نیست اما از آنجایی که تگ <div> تگی از جنس Block Element است و گروهی از تگ های اچ تی ام ال را در خود جای می دهد، مرورگر در حین خواندن این تگ یک فاصله قبل و یک فاصله بعد از این تگ قرار می دهند.در گذشته برای ساخت Layout یک سایت از جداول استفاده می شد که کار صحیحی نبود چرا که تگ های <table>و<table/> برای نمایش داده ها، اعداد و ارقام و … بایستی مورد استفاده قرار گیرند. امروزه برنامه نویسان وب برای ایجاد ساختار کلی سایت های خود از تگ <div> استفاده می کنند.

همانطور که اشاره کردیم مسئله ای که تاثیر به کارگیری تگ <div> را دوچندان می کند استفاده از CSS است. در حقیقت با به کارگیری تگ های <div> به همراه کدهای CSS می توان Layout هایی بسیار کاربردی و در عین حال جذاب ایجاد کرد.در ادامه و بعد از توضیح تگ span سعی می کنیم با مثال هایی کاربرد تگ div را به صورت عملی نشان دهیم. ( آموزش کامل CSS)

کاربرد تگ span در html

تگ span یکی از پرکاربردترین تگ های زبان html می باشد که کاربردهای خاص و گوناگونی در صفحات وب دارد.به طور مثال از آنجایی که این تگ توسط مرورگرها به طور پیش فرض به صورت inline تفسیر می شود برای نمایش دکمه های صفحه به صفحه، برجسته کردن (highlight) بخشی از یک متن،نمایش آیکون ها و … کاربرد دارد.

به مانند تگ <div> تگ <span> نیز با استفاده از css قابلیت هایی را می پذیرد که با استفاده از انها می توان به اهداف خود در طراحی صفحات وب رسید.

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

<!DOCTYPE html>
<html>
<head>
<meta charset=”utf-8″/>
<title>رایتک | طراحی سایت</title>
</head>
<body>
<div style=”height:50px;background:red;text-align:center;padding-top:20px”>هدر صفحه</div>
<div style=”height:300px;background:blue;text-align:center;padding-top:20px”>محتوای صفحه</div>
<div style=”height:40px;background:green;text-align:center;padding-top:20px”>فوتر صفحه</div>
</body>
</html>
برچسب ها

ارسال نظر شما

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