آموزش HTML – قسمت هشتم

دوشنبه, ۱۱ام مرداد , ۱۳۸۹ | ۱۳ دیدگاه

با سلام دوباره.بعد از استقبال خیلی خوب و نظرات مثبت دوستان تصمیم گرفتیم که آموزش HTML رو به صورت کمی پیشرفته تر ادامه بدیم و همچنین آشنایی با CSS رو جزو برنامه های پیش رو قرار بدیم. امیدوارم که مورد قبول و توجه واقع بشه.

تا کنون هفت قسمت از آموزشهای HTML رو با زبان ساده پشت سر گذاشتیم و از این مرحله به صورت پیشرفته تر شروع به یادگیری HTML و CSS می کنیم .

در این سری از خود آموزها با مطالب زیر آشنا خواهیم شد.

آشنایی با ورژن های مختلف 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">

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> برای وارد نمودن 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 تگ <p></p> مورد نظر از سمت چپ با استفاده از دستورات css تعیین شده است.

آشنایی با تگHead و خصوصیات آن

تگ head چیست ؟

head قسمتی از وب سایت است که مواردی مانند ، اطلاعاتی در زمینه فعالیت وب سایت ، وارد کردن script ها و Style Sheet ها و … را شامل می شود.

تگهای زیر می توانند درون قسمت head یک وب سایت قرار گیرند.

<title>, <base>, <link>, <meta>, <script>, <style>

<title>

با استفاده از این تگ می توانید سرفصل وب سایت خود را معرفی نمائید. از کاربردها و مزایای این تگ می توان به

– نمایش محتویات این تگ به عنوان سر تیتر وب سایت شما بر بالای پنجره مرورگر

– قرار گرفتن محتویات و مقدار این تگ در لیست علاقه مندیهای هنگام ثبت شدن توسط کاربر ) Add to favorites)

– نمایش مقدار این تگ در نتایج موتورهای جستجو

<html>
<head>
<title>Title of the document</title>
</head>

<body>
The content of the document......
</body>

</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 و آنها را در بهتر شناختن وب سایت خود کمک کنید .

در قسمتهای بعدی بیشتر با این تگ و نحوه تنظیمات آن آشنا خواهیم شد.

<meta name="description" content="آموزش طراحی وب سایت" />
<meta name="keywords" content="طراحی وب , آموزش  , وب سایت  , html" />



فایل pdf

آموزش HTML قسمت اول

آموزش HTML قسمت دوم

آموزش HTML قسمت سوم

آموزش HTML قسمت چهارم

آموزش HTML قسمت پنجم

آموزش HTML قسمت ششم

آموزش HTML قسمت هفتم

Be Sociable, Share!


۱۳ دیدگاه


  1. میلاد
    ۱۲ مرداد ۱۳۸۹

    بسیار آموزنده و مفید!
    خواهش می کنم ادامه بدهید




  2. یک دانشجوی آی تی
    ۱۲ مرداد ۱۳۸۹

    مرسی خسته نباشید . می شه یه ذره ریز تر بررسی بشه ؟ مثلا ویژگی های هر تگ ؟




  3. امیر
    ۱۲ مرداد ۱۳۸۹

    با تشکر. در قسمت های بعدی توضیحات بیشتری در مورد جزئیات می نویسم.




  4. محمد صادق
    ۱۳ مرداد ۱۳۸۹

    با عرض سلام و خسته نباشی خدمت استاد خودم.
    جدا کمال تشکر و قدردانی رو از شما دارم که اینقدر برای بچه های ایران وقت میذارید.لطفا ادامه بدید.ما داریم استفاده میکنیم




  5. ونوس هادیان
    ۱۳ مرداد ۱۳۸۹

    بسیار عالی و روان توضیح دادید …لطفا ادامه بدید..ما مشتاقانه منتظر ادامه ی آموزش هستیم………….




  6. رهگذر
    ۱۴ مرداد ۱۳۸۹

    خیلی ممنون از آ»وزشهاتون
    عالی بودند
    فقط اگر میشه سریعتر ادامه بدید آخه مشتاقیم!




  7. سعید
    ۱۴ مرداد ۱۳۸۹

    بسیار ساده روان و روشن نوشتین سپاسگذارم. اگه ادامه بدین

    دعاگوتون میشیم .




  8. pouya
    ۱۷ مرداد ۱۳۸۹

    damet garm




  9. سارا
    ۱۷ مرداد ۱۳۸۹

    سلام
    عالی بود ممنونم لطفا آموزش های بعدی رو زود به زود بزارین
    منتظریم




  10. aydin
    ۱۸ مرداد ۱۳۸۹

    آقا ممنون فقظ سریع لطفا




  11. speed-rap
    ۲۵ مهر ۱۳۸۹

    tank you – very good




  12. temp
    ۲۷ دی ۱۳۸۹

    عالی بود. ممنون

    دو تا سوال:
    ۱٫ این چه معنی میده و پیشرفته تر از مثال شماست یا چه جوری باشه بهتره؟

    ۲٫ با link میشه هر چیزی رو وارد کرد؟

    ممنون میشم جواب به ایمیلم ارسال بشه




  13. masih
    ۷ فروردین ۱۳۹۱

    تشکر



دیدگاه خود را بنویسید