آموزش HTML بخش هشتم
آموزش HTML بخش هشتم
آموزش HTML بخش هشتم
آشنایی با ورژن های مختلف HTML
هم اکنون بسیار ی از Editor های وب و همچنین طراحان و کدنویسان از HTML 4.0 برای
Markup کردن و علامت گذاری صفحات وب خود استفاده می کنند.
البته هم اکنون ورژن جدید تری از این زبان نشانه گذاری ( HTML 5.0 ) وجود دارد که
استفاده از آن به دلیل پشتیبای تعداد معدودی از مرورگر ها و همچنین آشنایی کم
طراحان و برنامه نویسان متداول نیست.
فلسفه ایجاد زبان نشانه گذاری HTML مشخص کردن هویت عناصر صفحه است . یعنی اینکه
مشخص کند کدام بخش صفحه یک پاراگراف است یا کدام قسمت سرفصل است و کدام بخش یک جدول
است و… برای این منظور از یک سری تگ استاندارد نظیر
،
و استفاده می شود. وظیفه ای که در گذشته برای HTML در نظر گرفته شده بود فقط به همین وظیفه محدود می شد و نحوه نمایش این عناصر بر عهده مرورگرهای وب گذاشته شده بود. برای مثال مشخصاتی نظیر فونت متن، رنگ و مشخصاتی از این قبیل را مرورگر انتخاب می کرد و HTML در قالب بندی عناصر صفحات وب نقشی نداشت.
به تدریج مرورگرهای بزرگ مثل IE و Netscape از تگهای HTML جدیدی برای قالب بندی و تعیین ظاهر صفحات وب استفاده کردند مانند تگ که برای تعیین فونت متن مورد استفاده قرار می گیرد و شناسه color که رنگ متن را مشخص می کند.
صفحاتی که با HTML 3.2 نوشته شده اند به دلیل استفاده از این تگها برای قالب بندی صفحه به کد نویسی بیشتری احتیاج داشتند و این یک کابوس برای طراحان و برنامه نویسان وب بود .
صفحاتی که با این روش به وجود می آمد مملو از تگهای HTML می شد و در نتیجه حجم صفحات بسیار افزایش می یافت و سرعت لود شدن آنها کاهش پیدا می کرد. علاوه بر این اصل جدایی محتویات صفحه از قالب آن هم رعایت نمی شد.
استفاده از استایل و شیوه نامه ها (CSS) با HTML 4.0 آغاز شد. از CSS برای قالب بندی عناصر صفحه استفاده می شود. برای مثال با آن می توان برای قسمتهای مختلف در صفحه تصویر زمینه تعیین کرد، فونت آنها را تغییر داد، رنگ متن ها را تغییر داد و بسیاری از قابلیتهای دیگر که قبلاً در HTML وجود نداشت با CSS در دسترس طراحان قرار می گیرد.
Document Type Definition (DTD)
برای استاندارد سازی صفحات HTML و بهتر شناخته شدن و تفسیر شدن آنها توسط مرورگرهای
مختلف احتیاج به اضافه نمودن اطلاعاتی به صفحات وب است که شامل نوع و ورژن HTML
استفاده شده در آن سند است.
این وظیفه توسط !DOCTYPE در صفحات وب انجام می گیرد. !DOCTYPE در واقع یک تگ نیست و
محل قرار گیری آن در صفحه ماقبل تمامی تگها و در ابتدای صفحه و بالای تگ <html>
است.
در زیر به صورت ابتدائی با انواع سندهای HTML و نحوه قرار دادن این اطلاعات در
صفحات وب آشنا خواهید شد.
HTML 4.01 Strict
در این سبک از HTML بر روی تگها و استفاده استاندارد از آنها حساسیت بسیار زیادی وجود دارد . و از تگهای غیر متداول مانند پشتیبانی نمی کند.
HTML PUBLIC "-//W3C//DTD HTML 4.01//EN"
"http://www.w3.org/TR/html4/strict.dtd">
HTML 4.01 Transitional
این نسخه از HTML برای اغلب مرورگرها مناسب میباشد . نوشتن اسناد به این سبک بسیار ساده و متداول است .در این نسخه می توانید از کلیه تگهای HTML با خیال آسوده استفاده نمائید.
HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"
"http://www.w3.org/TR/html4/loose.dtd">
HTML 4.01 Frameset
این نسخه از HTML مخصوص اسنادی است که در آن از تگ Frameset استفاده شده است .
HTML PUBLIC "-//W3C//DTD HTML 4.01 Frameset//EN"
"http://www.w3.org/TR/html4/frameset.dtd">
Cascading Style Sheet چیست ؟ و نحوه استفاده از آن چگونه است ؟
CSS یا همان Cascading Style Sheet ابزاری است برای قالب بندی و طراحی و کنترل اجزای صفحات وب بدون استفاده از کدهای HTML .در اینجا به صورت کلی توضیحاتی در مورد Style ها ، CSS و نحوه وارد کردن آنها در صفحات HTML داده خواهد شد و در آینده به صورت کامل با این کدها آشنا خواهیم شد.
Style Sheet ها به سه روش در صفحات HTML مورد استفاده قرار می گیرند.
- External style sheet
- Internal style sheet
- Inline styles
External style sheet
استفاده از style ها به صورت صفحات بیرونی با فرمت css. , اگر می خواهید برای تعداد زیادی از صفحات وب یک فرمت و style خاص را تعریف کنید بهتر است از این روش برای نوشتن کدهای css استفاده نمائید.
از این روش می توان برای کنترل تمامی اجزاء و تگهای مورد استفاده در کلیه صفحات یک وب سایت استفاده کرد. به طوری که با وارد کردن این Style Sheet در صفحات HTML یک وب سایت کلیه صفحات به طور یکسان از این Style Sheet استفاده می کنند و به راحتی می توان با اعمال تغییرات در این سند کلیه اجزاء و صفحات تشکیل دهنده یک وب سایت را کنترل نمود.
برای وارد نمودن صفحات css از روش زیر استفاده می نمائیم.
<head> <link rel="stylesheet" type="text/css" href="mystyle.css" /> </head>
Internal style sheet
استفاده از تگهای
این style ها با استفاده از تگ
<head>
<style type="text/css">
body {background-color:yellow}
p {color:blue}
</style>
</head>
Inline styles
استفاده از style ها به صورت خطی و درون تگ های HTML. از این روش برای دادن فرمت و style خاص برای یک تگ HTML استفاده می شود. برای آشنایی با استفاده از این نوع style به مثال زیر توجه نمائید .
<p style="color:blue;margin-left:20px">This is a paragraph.</p>]
در این مثال font color و margin تگ <p></p> مورد نظر از سمت چپ با استفاده از دستورات css تعیین شده است.
آشنایی با تگHead و خصوصیات آن
تگ head چیست ؟
head قسمتی از وب سایت است که مواردی مانند ، اطلاعاتی در زمینه فعالیت وب سایت ، وارد کردن script ها و Style Sheet ها و … را شامل می شود.
تگهای زیر می توانند درون قسمت head یک وب سایت قرار گیرند.
<title>, <base>, <link>, <meta>, <script>, <style>
<title>
با استفاده از این تگ می توانید سرفصل وب سایت خود را معرفی نمائید. از کاربردها و مزایای این تگ می توان به
- نمایش محتویات این تگ به عنوان سر تیتر وب سایت شما بر بالای پنجره مرورگر
- قرار گرفتن محتویات و مقدار این تگ در لیست علاقه مندیهای هنگام ثبت شدن توسط کاربر ) Add to favorites)
- نمایش مقدار این تگ در نتایج موتورهای جستجو
<html>
The content of the document......
html>
<base>
با استفاده از این تگ می توانید آدرس defualt لینک های خود و یا خاصیت target انها را مشخص کنید .
<head> <base href="http://www.w3schools.com/images/" /> <base target="_blank" /> </head>
<link>
از این تگ برای وارد کردن resource ها و منابع خارجی به صفحات وب استفاده می شود.مانند وارد کردن style sheet ها به صفحات وب.
<head> <link rel="stylesheet" type="text/css" href="mystyle.css" /> </head>
<style>
در مورد این تگ و نحوه استفاده از آن هم پیشتر صحبت کردیم و در اینجا به یک مثال اکتفا می کنیم.
<head>
<style type="text/css">
body {background-color:yellow}
p {color:blue}
</style>
</head>
<script>
از این تگ برای تعریف نمودن client-side script ( مانند JavaScript ) در صفحات وب استفاده می شود.
استفاده از این تگ در خارج از تگ meta نیز صورت می گیرد که در آینه در این مورد توضیحات بیشتری را خواهیم داد.
<script type="text/javascript" src="js/myJavaScript.js" ></script>
<meta>
با استفاده از این تگ می توانید توضیحاتی را در مورد وب سایت خود به موتورهای جستجو ارائه کنید ((description,keyword و آنها را در بهتر شناختن وب سایت خود کمک کنید .
در قسمتهای بعدی بیشتر با این تگ و نحوه تنظیمات آن آشنا خواهیم شد.
