شروع آموزش html جلسه هشتم
آشنایی با ورژن های مختلف HTML و تفاوتهای آنها.
Cascading Style Sheet چیست ؟ و نحوه استفاده از آن چگونه است ؟
آشنایی با تگ <head> و خصوصیات آن ( meta , title ,… )
تگ <meta> چیست و نحوه تنظیمات آن چگونه است ؟
چگونگی استفاده از Script ها درصفحات وب .
آشنایی با URL ها و Encoding آنها .
XHTML چیست و مزیت های استفاده از آن چییست ؟
تفاوتهای HTML و XHTML
آشنایی با قوانین XHTML
آشنایی با ورژن های مختلف HTML
هم اکنون بسیار ی از Editor های وب و همچنین طراحان و کدنویسان از HTML 4.0 برای Markup کردن و علامت گذرای صفحات وب خود استفاده می کنند.
البته هم اکنون ورژن جدید تری از این زبان نشانه گذاری ( HTML 5.0 ) وجود دارد که استفاده از آن به دلیل پشتیبای تعداد معدودی از مرورگر ها و همچنین آشنایی کم طراحان و برنامه نویسان متداول نیست.
فلسفه ایجاد زبان نشانه گذاری HTML مشخص کردن هویت عناصر صفحه است . یعنی اینکه مشخص کند کدام بخش صفحه یک پاراگراف است یا کدام قسمت سرفصل است و کدام بخش یک جدول است و… برای این منظور از یک سری تگ استاندارد نظیر <p> ، <h1> و <table> استفاده می شود. وظیفه ای که در گذشته برای HTML در نظر گرفته شده بود فقط به همین وظیفه محدود می شد و نحوه نمایش این عناصر بر عهده مرورگرهای وب گذاشته شده بود. برای مثال مشخصاتی نظیر فونت متن، رنگ و مشخصاتی از این قبیل را مرورگر انتخاب می کرد و HTML در قالب بندی عناصر صفحات وب نقشی نداشت.
به تدریج مرورگرهای بزرگ مثل IE و Netscape از تگهای HTML جدیدی برای قالب بندی و تعیین ظاهر صفحات وب استفاده کردند مانند تگ <font> که برای تعیین فونت متن مورد استفاده قرار می گیرد و شناسه 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 بر روی تگها و استفاده استاندارد از آنها حساسیت بسیار زیادی وجود دارد . و از تگهای غیر متداول مانند <font > پشتیبانی نمی کند.
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">
HTML 4.01 Transitional
این نسخه از HTML برای اغلب مرورگرها مناسب میباشد . نوشتن اسناد به این سبک بسیار ساده و متداول است .در این نسخه می توانید از کلیه تگهای HTML با خیال آسوده استفاده نمائید.
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
HTML 4.01 Frameset
این نسخه از HTML مخصوص اسنادی است که در آن از تگ Frameset استفاده شده است .
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Frameset//EN" "http://www.w3.org/TR/html4/frameset.dtd">
style sheet چیست ؟ و نحوه استفاده از آن چگونه است ؟
یا همان 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> برای وارد نمودن style ها در صفحه HTML . این روش برای نوشتن style هایی خاص برای صفحات به خصوص استفاده می شود. به این معنی که کدهای css نوشته شده با این روش فقط بر روی همان صفحه تاثیر می گذارند.
این style ها با استفاده از تگ <style> در صفحات HTML وارد می شوند و محل قرارگیری آنها مابین تگ <head> است.
<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 تگ
مورد نظر از سمت چپ با استفاده از دستورات css تعیین شده است.
آشنایی با تگHead و خصوصیات آن
تگ head چیست ؟
head قسمتی از وب سایت است که مواردی مانند ، اطلاعاتی در زمینه فعالیت وب سایت ، وارد کردن script ها و Style Sheet ها و … را شامل می شود.
تگهای زیر می توانند درون قسمت head یک وب سایت قرار گیرند.
<html> <head> <title>Title of the document</title> </head> <body> The content of the document...... </body> </html>
<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 ) در صفحات وب استفاده می شود.
<script type="text/javascript" src="js/myJavaScript.js" ></script>
<meta>
با استفاده از این تگ می توانید توضیحاتی را در مورد وب سایت خود به موتورهای جستجو ارائه کنید ((description,keyword و آنها را در بهتر شناختن وب سایت خود کمک کنید .
در قسمتهای بعدی بیشتر با این تگ و نحوه تنظیمات آن آشنا خواهیم شد.
<meta name="description" content="آموزش طراحی وب سایت" /> <meta name="keywords" content="طراحی وب , آموزش , وب سایت , html" />
