اصول نوشتن صفحات HTML

در اینجا می خواهیم به ساختار شناسه ها یا همان تگها (tag) در HTML بپردازیم. یک تگ همیشه با علامت کوچکتر ریاضی یعنی این علامت > آغاز می شود و با علامت بزرگتر < به پایان می رسد. مثلاً تگی که باعث ایجاد زیرخط کلمات می شود اینطور نوشته می شود: <U> این علامت را قبل از متنی که می خواهیم زیر آن خط کشیده شود قرار می دهیم. به این تگ ، تگ ابتدایی (Opening tag) می گویند، که عملیاتی را که شما می خواهید آغاز کنید شروع می کند. به منظور پایان دادن به زیرخط باید از یک تگ پایانی استفاده کنید. یک تگ پایانی با این علامت شروع می شود: />  بقیه تگ مانند تگ ابتدایی می باشد. برای درک بهتر این مطلب به مثال زیر توجه کنید:

Tags and their position

اگر بخواهید متن بالا را با زیرخط در مرورگر خود ببینید باید آنرا مطابق خط روبرو در ویرایشگر متن خود بنویسید:

<u>tags and their position</u>

نتیجه را به این صورت می بینید:

Tags and their position

در HTML همه تگها به یک تگ پایانی نیاز ندارند. برای مثال تگی که برای وارد کردن عکس استفاده می شود  از این قبیل تگهاست، که به این صورت می باشد:

<img src="myimage.gif">

البته بعداً در مورد این تگ توضیح خواهیم داد در اینجا فقط برای مثال این تگ را آوردیم. موارد دیگری هم با این وضعیت وجود دارند مثلاً <br> که برای رفتن به خط بعدی استفاده می شود، <hr> که برای ایجاد یک خط افقی به کار می رود و <p> که برای رفتن به پاراگراف بعدی استفاده می شود.

در ضمن نیاز نیست که حتماً تگها با حروف بزرگ نوشته شوند. مثلاً <P> همان <p> است. البته در نسخه های جدیدتر HTML توصیه می شود کدهای HTML با حروف کوچک نوشته در XHTML هم نوشتن کدها با حروف کوچک الزامی است. فضای خالی هم بین تگها تأثیری ندارد. مثلاً :

<u>         متن زیرخط دار          </u>

کد بالا همان نتیجه ای را می دهد که کد زیر دارد:

<u>متن زیرخط دار</U>

به این طریق هم اگر نوشته شود فرقی نمی کند:

<u>
متن زیرخط دار
</u>

قالب پایه ای یک فایل HTML مانند زیر است. ببینید می توانید کاری را که تگهای این کد انجام می دهند حدس بزنید؟ البته همه آنها را بعداً توضیح می دهیم.

 

<html>
<head>
<title>html قالب اصلی</title>
</head>
<body>
هر چیزی که اینجا قرار گیرد در صفحه شما قابل دیدن است
</body>
</html>

برای درک بهتر این قسمت سعی کنید تگها را به صورت جفتی در نظر بگیرید (از جایی که باز می شوند تا جایی که بسته می شوند) اولین تگ <html> است که علامت شروع یک متن HTML است و تگ پایانی آن <html/> است که همانطور که ممکن است حدس زده باشید نشانه پایان متن HTML است. هر چیزی در HTML باید بین این دو تگ قرار گیرد. مانند متن، دیگر تگها، عکسها و... چون این دو تگ نشان دهنده آغاز و پایان صفحه شما هستند.

تگ بعدی <head> است. این تگ مشخص کننده بخشی است که شما باید عنوان صفحه، کلمات کلیدی، و دیگر توضیحات خود برای این صفحه را در آن قرار دهید. این بخش با <head/> به پایان می رسد. در مثال بالا تنها قسمت HEAD عنوان صفحه بود که با TITLE مشخص می شود.

تگ <title> به شما اجازه می دهد برای صفحه خود یک عنوان برگزینید. این قسمت مورد استفاده موتورهای جستجو قرار می گیرد و همان متنی است که به هنگام مشاهده صفحه در نوار عنوان مرورگر نشان داده می شود. تا هنگامی که این تگ در قسمت BODY قرار نگیرد در متن شما نشان داده نمی شود. برای پایان دادن به تگ عنوان از این تگ استفاده می شود: <title/> در مثال بالا عنوانی که برای صفحه نشان داده می شود قالب اصلی HTML است.

تگ <body> بخشی را آغاز می کند که در صفحه مرورگر شما به نمایش در می آید. این قسمت جایی است که ما باید کار اصلی خود را در آن انجام دهیم. برای پایان دادن به این تگ از <body/> استفاده می کنیم. در مثال بالا متنی که در صفحه مرورگر دیده می شود به صورت زیر است (البته در اینجا برای نوشته زیر رنگ و فونت نیز انتخاب شده که در قسمتهای بعد به آنها خواهیم پرداخت) :

هر چیزی که اینجا قرار گیرد در صفحه شما قابل دیدن است

چیزی که در اینجا می بینیم متنی است که به صورت ساده نوشته شده و در طرف چپ صفحه قرار دارد.

در درس بعد در مورد چگونگی کار کردن با متنها بحث می کنیم.


نظرات بازدید کنندگان
Mon, 21 Jul 2008 23:12:33 +0430 نویسنده : ali asghar
thanks very much
good luck
 
Mon, 21 Jul 2008 15:10:01 +0430 نویسنده : آريا خوزستاني
با سلام و خسته نباشيد
از اطلاعاتي كه در اختيار ما گذاشته ايد سپاسگذاريم
 
Sun, 06 Jul 2008 15:10:07 +0430 نویسنده : anioletti
کارت خیلی عالیه امیدوارم تا آخر همین طور عالی بمونه
 
Sun, 29 Jun 2008 14:09:38 +0430 نویسنده : ali asghar
thanks very very much
 
Thu, 26 Jun 2008 14:19:52 +0430 نویسنده : ali asghar
خیلی متشکر-ایمدوارم که همواره موفق باشی
 
Tue, 17 Jun 2008 18:34:23 +0430 نویسنده : morteza
salam man ye site daram vli nemidunam che juri mitunam etela atesho taghiir bedam lotfan mano rahnamaii konid mamnoonam
 
Sun, 01 Jun 2008 18:03:30 +0430 نویسنده : مهدی رحمانی
با سلام سایت بسیار مفید شما را دیدم لطفا به من بگوید که این کدهای را باید کجای وبلاگ گذاشت تا کدها فعال شوند .با تشکر
 
Mon, 12 May 2008 02:57:48 +0430 نویسنده : ندا
خیلی از آموزشاتون ممنونم...خیلی به من کمک کرد....شاد و موفق باشید
 
Sun, 11 May 2008 21:57:14 +0430 نویسنده : محمد
سلام. سایت بسیار خوبی داری. من دارم این آموزش را یاد میگیرم. اگه میشه وبلاگ من را تبلیغ کنید... ممنون میشم...
http://www.ebionline.com
 
Fri, 09 May 2008 00:01:34 +0430 نویسنده : مصطفي.
سايتتون خوبه ممنون ازتون به خاطره خدماتتون [email protected]
 
Tue, 06 May 2008 10:01:53 +0430 نویسنده : پویا حقانی
سلام . خیلی ممنونم به خاطر این مطالب مطالب مفید
 
Sun, 04 May 2008 10:42:57 +0430 نویسنده : زهرا کریمی
تو فوق العاده هستی عزیزم
 
Sun, 04 May 2008 10:42:56 +0430 نویسنده : زهرا کریمی
تو فوق العاده هستی عزیزم
 
Sat, 26 Apr 2008 15:20:33 +0430 نویسنده : arsalan
salam....mikhastam age momkene chegoonegie neveshtane code ahang baraye weblog  ya site ro amooozesh bedid
ba tashakkor...
arsalan...
 
Fri, 18 Apr 2008 06:51:13 +0330 نویسنده : mojtaba
بسیار عالی بود
 
Sat, 05 Apr 2008 11:36:56 +0330 نویسنده : محسن
با سلام
تشکر از زحمات شما
در صورت امکان منابع خود را اعلام فرمائید
 
Tue, 01 Apr 2008 11:57:40 +0330 نویسنده : محمد
براي كسي كه تازه شروع كرده باشه خيلي عاليه من تازه شروع كردم خيلي جالب بود
 
ساعت: 13:58 - تاریخ: 1386 نویسنده : mojtaba
اگر لطف مي شود توضيح بيشتر و ساده تر
 
ساعت: 10:30 - تاریخ: 1386 نویسنده : نهمتوسط نه
خوب بي
 
ساعت: 10:27 - تاریخ: 1386 نویسنده : حامد
متو سط توضيحاتش كم بود