طراحي حرفه اي وب سايت : طراحي وب سايت خود را به گروه فناوري اطلاعات ايران بسپاريد

طراحي وب سايت طراحي حرفه اي وب سايت بهينه سازي وب سايت

اصول نوشتن صفحات 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, 01 Jun 2009 15:45:57 +0430 نویسنده : محمدرضا
سلام با تشكر از زحمات شما من تازه آشنا شدم با سايتتون اميدوارم بتونم موفق خارج شم
 
Thu, 16 Apr 2009 18:15:11 +0430 نویسنده : morteza
salam man az japon matalebe khobe shoma ro didam agar baraton emkan dare roye email man in mataleb ro be sorate pdf ersal konid.agar mayel bashid man hazinash ro ham pardakht mikonam. ba tashakor
 
Fri, 10 Apr 2009 09:04:38 +0430 نویسنده : بهزاد
با سلام و عرض خته نباشید. از اینکه اینقدر با متد آموزشی مطالب رو مطرح می کنین از شما تشکر می کنم
لطفا اگر امکان داره کتاب یا ای بوک یا پی دی اف اموزشی رو معرفی کنین
 
Thu, 09 Apr 2009 20:34:46 +0430 نویسنده : فرهاد
علم خود را در قلبت نگه مدار بلکه به آیندگان هم بیاموز
با تشکر از خدماتی که در این راه انجام داده اید به امید موفقیت روز افزون شما
 
Thu, 09 Apr 2009 20:33:12 +0430 نویسنده : علی
درود بر شما هم کارتون عالیه هم مرامتون که بدون چشم داشت آموزش دادین
ایشاا... که خدای ابراهیم عوضشو بهتون بده
 
Thu, 05 Mar 2009 19:43:22 +0330 نویسنده : پریسا ,دانشجوی مهندسی کامپیوتر
مطالب خیلی خوب بود,دستتون درد نکنه
 
Tue, 10 Feb 2009 18:28:00 +0330 نویسنده : mahdigaz
دستتون درد نکنه
روشن شدم خدا روشنتون کنه.
 
Mon, 09 Feb 2009 17:37:05 +0330 نویسنده : زهرا دلاوری
سلام . خسته نباشید. باتشکر از زحمات شما عزیزان .خواهشمندم  آموزش زبانهای برنامه نویسی مثل FRONT PAGE , HTML و ...  و آموزش میکس فیلم را قدم به قدم از راحت تا دشوار و کاربردی به ایمیل من ارسال کنید.

                                                                                 با تشکر
 
Sat, 07 Feb 2009 11:52:38 +0330 نویسنده : azar
خیلی عالی بود . واقعا ممنونم.من دانشجوی کامپیوترهستم و این روش توضیح و آموزش خیلی برام مفیده تازه دارم می فهمم چه طوری بایددرس بخونم. بالاخره پیدا شدند کسانیکه بی دریغ برای یاد دادن به هموطنانشون از خود گذشتگی می کنند.اگه لطف کنید برام آموزش زبان ++c رو بفرستید با همین روش گام به گام خیلی شرمندم کردین.(به امید بی نیازی ایران از دست ساخته های بقیه)
اجرکم عندا...
 
Sun, 01 Feb 2009 11:17:47 +0330 نویسنده : عماد
با سلام به استاد عزيز و انسان نازنين و گرامي چون شما
شما فوق العاده هستيد كاري كه شما در انجام آموزش انجام داديد با هيچ پاداشي برابري نمي كنه اميدوارم و مطمئنم كه خداوند در مسير زندگي شما بركات زيادي رو قرار ميده من تازه با اين سايت آشنا شدم و از شما واقعاٌ سپاسگذارم شما به معناي واقعي يك استاد خوب و دلسوز هستيد اميدوارم هميشه پاينده باشيد
 
Sat, 31 Jan 2009 23:48:37 +0330 نویسنده : همون
عالیه فقط چرا وقتی فارسی تایپ میکنم  تو وب نمیاره؟
 
Sat, 31 Jan 2009 01:18:19 +0330 نویسنده : حامد
شما استاد ما هستي دوست من و بايد بگم كه كمتر كسي هست كه اين اطلاعات را مجاني در اختيا مردم بزاره
 
Fri, 30 Jan 2009 13:22:15 +0330 نویسنده : 774
1-برای پردازش هم می توانیم از HTML استفاده کنیم؟
2-فارسی نوشتن در آن چطوری است؟
 
Thu, 22 Jan 2009 21:24:01 +0330 نویسنده : maryam
سلام.خسته نباشید.یه سوال داشتم.از فرمها میشه برای پردازش اطلاعات استفاده کرد.مثلا با وارد کردن شماره دانشجویی نمره ها نمایش داده بشن.....اگر امکانش هست با یه مثال توضیح بدید ممنون میشم......
 
Sat, 17 Jan 2009 15:12:21 +0330 نویسنده : ریحانه
بابا کولاک کردین
 
Sat, 17 Jan 2009 12:56:46 +0330 نویسنده : ریحانه
ممنون از سایتتون عالی بود
 
Tue, 13 Jan 2009 15:13:31 +0330 نویسنده : حيدر ناصر دهگان
با عرض سلام!
واقعا كه خيلي سايت عالي و مفيدي است.خيلي زحمت مي كشيد.
 
Sun, 04 Jan 2009 13:42:31 +0330 نویسنده : BITA
با سلام و تشکر فراوان از زحمات وسایت بسیار خوبتان.
من امروز کلی در  گوگل سرچ کردم تا مطالبی را در مورد اموزش وب سایت پیدا کنم و اخر این سایت را یافتم و واقعا کمکم کرد. واقعا ممنونم و دارم برنامه به برنامه پیش می روم.
 
Tue, 30 Dec 2008 09:50:21 +0330 نویسنده : arezoo
از لطف شما ممنون و سپاسگذارم
 
Sat, 27 Dec 2008 18:12:55 +0330 نویسنده : رضا
تفاوت بین htmlبا htmچیست ؟ با تشکر از زحماتتان. اگر به ایمیلم بدهید ممنونم
 
Tue, 16 Dec 2008 23:48:15 +0330 نویسنده : فاطمه
خدا خیرتون بده.کارتون عالیه.
 
Tue, 09 Dec 2008 11:27:41 +0330 نویسنده : شادی
خدا حفظتون کنه من خیلی نیاز مبرم به آموزش htmlداشتم مرسی
 
Wed, 26 Nov 2008 10:45:32 +0330 نویسنده : زهرا
نظرات بازدید کنندگان رو خوندم.بابا چه قدر دعا پشت سرتونه .خدا نورو از چشاتون نگیره.
 
Sun, 23 Nov 2008 14:01:51 +0330 نویسنده : عرشیا
به خاطر اطلاعاتی که به زبان ساده وگویا و بدون کوچکترین انتظاری دراختیارمان گذاشتی ممنون
 
Sat, 22 Nov 2008 10:34:16 +0330 نویسنده : توحيد اكرامي
باسلام
قالب وب سايت اموزشي
براي دانش آموزان دبيرستان مي خواستم
هزينه  انرا مي پردازم
 
Sat, 15 Nov 2008 02:25:08 +0330 نویسنده : سهیل طلاجوران
(هرکس به من کلمه ای بیانوزد مرا بنده خود کرده)حضرت علی(ع)-آیا شما 1کلمه یا100 یا1000یا..........؟؟؟؟نمی دانم ولی باتمام وجود ممنونم
 
Tue, 11 Nov 2008 01:04:40 +0330 نویسنده : حسام کیانپور برجویی
سایت خوبی طراحی کردید ولی من اگه بخوام یه سایت حرفه ای بسازم از اول تا اخرش رو باید برام بفرستید .
 
Sat, 08 Nov 2008 22:38:06 +0330 نویسنده : علی غزاله
سلام خسته نباشی ممنون از این همه مطلب خوب و اموزنده که برای ما انتخاب کردی و به صورت رایگان در اختیار ما دادی ولی در کل سایت شما یه مشکل بزرگ دارده اونم وقتی میشینی پاش دیگه دوست نداری بلند شی.التماس دعا
 
Wed, 22 Oct 2008 14:59:34 +0330 نویسنده : رضا
سلام سایت خیلی جالب و آموزنده ای دارید ازتون واقعا ممنونم. پاینده باشید.
 
Sat, 18 Oct 2008 00:10:10 +0330 نویسنده : mohammad
بابا دمت گرم تو آخرشي به ما ترم اوليا كمك كردي و اميدوارم همين جور باشي
 
Wed, 15 Oct 2008 11:08:31 +0330 نویسنده : حسين
سلام
دمت گرم خيلي استفاده كردم
يه سري سوال داشتم اگه ميشه واسم mail بذاريد
من ترم اول نرم افزار هستم
شاديتان افزون . مهرتان پاينده
 
Tue, 14 Oct 2008 18:03:14 +0330 نویسنده : arod
سلام آقا واقعا ممنون کارتون واقعا خوبه فقط امیدوارم که ادامه بدین چون به ادامه این مطالب نیاز دارم
 
Sun, 05 Oct 2008 16:54:27 +0330 نویسنده : میثم
taze mikham dast be tarrahi saite konam va be nazar matalebe shoma kheryli mofid ast.
 
Wed, 01 Oct 2008 01:13:38 +0330 نویسنده : محمد
عالی بوده و هست .
دمتان گرم.
پاینده باشید
 
Fri, 26 Sep 2008 15:18:15 +0330 نویسنده : ebyjackal
بابا دمتون گرم  
به ما كه خيلي حال دادين
قربون نشكتون شم
 
Tue, 23 Sep 2008 23:13:00 +0330 نویسنده : vahid
تا اینجا که خیلی عالیه!!!!!!!!!!!
یاشاسن!!
 
Fri, 08 Aug 2008 12:45:16 +0430 نویسنده : رامین
کار تون حرف نداره  بابا دمت گرم
 
Thu, 07 Aug 2008 00:56:14 +0430 نویسنده : حسن
man hamingoori  az harkas tashakor namikonam vali kar shoma aaaaalliiiiiiiiiiiiiiiiiii hast va gay♥ tashakor dare mersi♥
 
Sun, 27 Jul 2008 15:30:53 +0430 نویسنده : امین
سلام
از زحمات شما به خاطر نگارش این وبسایت و ارائه ی مطالبی این چنین مفید و مختصر به صورت رایگان در فضایی این چنین ساده و آرامش خش و بدون وجود بنر های تبلیغاتی تشکر می کنم.
به امید آموزش سایر زبان های پرکاربرد و یا نرم افزار های حرفه ای توسط شما.
پیوسته دلتان شاد و لبتان خندان باد.
 
Thu, 24 Jul 2008 10:27:30 +0430 نویسنده : مریم
سایت خوبی است خیلی خوب هم توضیح داده از همگی ممنونم .
 
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 نویسنده : مصطفي.
سايتتون خوبه ممنون ازتون به خاطره خدماتتون sali_voicer_cam@yahoo.com