در جلسات قبلی آموزش به طور کلی اچ تی ام ال رو شناختیم حالا با چند نکته ای مهم آشنا میکنم و آموزش رو ادامه میدم
* شما به دو صورت میتوانید تگ ها را بنویسید :
1) میتوانید تگ ها رو همه رو پشت هم بنویسید .
به عنوان مثال :
<html><head><title>my web page </title></head><body>this is a sample page</body></html>
در این روش شما هیچ خطای برنامه نویسی از سیستم دریافت نمی کنید(اصلاً اچ تی ام ال دیباگر نداره یعنی اگر خطا داشته باشین به هیچ اخطاری بر نمیخورین) اما کار برای خود شما سخت میشود وقتی صفحه کد را میبینید و درک آن کمی دشوار میشود .
2) میتوانید تگ ها رو زیر هم بنویسید باحال ترو جذاب تره خوندنشم راحت تره مگه نه :D :
به عنوان مثال :
<html>
<head>
<title>
</title>
</head>
<body>
</body>
</html>
همانگونه که مشاهده میکنید خواندن کدها بسیار روان تر شده است و این را باید بدانید که همیشه کدهای شما 5 یا 6 خطی نیستند وقتی کدهای شما به 200 خط برسد و همه پشت هم باشد خواندن کدها بسیار دشوار می شود .
نوشتن اولین برنامه به دست شما :
حال زمان آن رسیده است که اولین برنامه خود را بنویسید .
قبل هر چیز از شما میخوام که همراه من تک تک کد ها رو بنویسید و اجرا بگیرید که پس طی کردن فصول آموزشی HTML به خوبی بتوانید با این زبان کار کنید .
خب میخواهیم صفحه ای درست کنیم که عنوان آن My Web Page باشد و داخل صفحه آن عبارت This Is A Sample Page رو به ما نمایش دهد .
برای اینکار تکه کد های زیر را در Notpad++ بنویسید و ذخیره کنید و اجرا بگیرید ...
<html>
<head>
<title>my web page </title>
</head>
<body>this is a sample page</body>
</html>
تا الان شاید خواسته باشید که مطالب فارسی را در صفحه htmlخود برروی مرورگر به نمایش بگذارید ولی نتوانستید در اینجا شمارا راهنمایی میکنیم که بدون هیچ مشگلی فارسی بنویسید.
چگونه در سند اچ تی ام فارسی بنویسیم؟!
برای فارسی نویسی راه های مختلفی وجود دارد یکی از راه ها این است که اگر با نود پد معمولی کار میکنید کافی است:
file--->save as--->encoding--->UTF-8
را انتخاب کنید وصفحه html را ذخیره کنید مانند تصویر زیر:
راه دوم و منطقی برای فارسی نویسی در سند htmlاضافه کردن کد زیر در بخش<head>در کد نویسی صفحه است:
<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
<meta http-equiv="Content-Language" content="fa">
مشخص کردن عنوان برای صفحه
برای مشخص کردن عنوان برای صفحه html از تگ<title>استفاده میشود که این تگ بین تگ <head>نوشته میشود.معمولا در آغازین کار اکثر سایتها نام سایت خود را برای عنوان سایت خود انتخاب میکنند. عنوان ها در محبوبیت شما در موتورهای جستوجو از اهمیت بالایی برخوردار میباشند که محل نمایش عنوان ها معولا در بالا مرورگر سمت چپ میباشد که در تصویر زیر کاملا مشخص است:
پاراگراف
پاراگراف هامجموعه چند جمله که یک مفهوم اصلی را شرح میدهند.نشانه پاراگراف اولین خط آن باکمی تورفتگی به نمایش گذاشته میشود.
برای ایجاد پاراگراف درhtml
در htmlبرای ایجاد پاراگراف از تگی به نام<p>استفاده میشود مثال:
<p>این یک پاراگراف است</p>
نکته:مرورگرها قبل و بعد از هر پاراگراف یک خط خالی ایجاد میکنند.
نکته:توجه داشته باشید که اگر تگ پایانی را نبندید شاید مشگلی پیش نیایدودر تمامی مرورگرهاعمل کنند ولی امکان بروز عواقبی غیر منتظره وجود دارد.چون در منطقhtml اجازه نبستن تگ به شما داده نمیشود.
عنوان ها در html
برای ایجاد سرفصل ها یا تیترها ویا عنوان موضوعات در صفحات htmlاز تگ های
<h1>,<h2>,<h3>...<h6>
استفاده میشود.
که درتوضیح مطلبی مهم عنوان موضوع رادر تگ<h1>قرار دهیم .
همان طور که در بالا گفته شدتگ<h1>برای اولویت عنوان موضوعی مهم به کار گرفته میشود وبعد از آن اولیت کمتریعنی<h2>اولیت کمتر ازتگ<h2>از تگ<h3>استفاده میشود تا تگ <h6>به همین صورت است.که کم اهمیت ترین عنوان یک موضوع را در سایت را در بین تگ<h6>قرار میدهیم.
آموزش HTML – المنتهای Block-level و Inline-level
المنت ها و یا تگ ها در htmlبه دو دستهblock levelوinline levelتقسیم میشوند.
block-level:
توضیح خیلی ساده بلاک لِوِل ها block level داریه تگ شروع وتگ پایانی هستند مثل:
<p></p>
<h1></h1>
<div></div>
<table></table>
inlinelevel:
توضیح خیلی ساده المنت یا تگ هایinline levelتگ هایی گه تگ پایانی ندارند مثل:
<br>,<hr>,<b>,<i>,...
replaced element
این المنت ها در نسخه های جدید html آمده که ترکیبی از inline-level,block-levelاست.که inline-levelها نیز جزء این دسته قرار گرفته اند.که در این نوع المنت ها تگ پایانی را در خود جای میدهند.مثال:
<img src="" />
<object />
<hr />
<input />
آموزش HTML – کامنت گذاری
کامنت به معنایه نوشته یا توضیح است که برای نوشتن توضیح قسمت خاصی برای رجوع در آینده و متوجه شدن کاری که آن کد انجام داده است شویم و در پس تغییرآن برآییم یا در دیگر برنامه هایمان از آن قطعه کد استفاده نماییم. نکته:کامنت گذاری در بیشتر زبان های برنامه نویسی scriptنشانه گذاری به شکل زیر صورت میگیرد:
<!--متن مورد توضیح باید بین اینجا قرار بگیرد-->
