HTML
HTMLمخفف Hyper Text Markup Language هستش ، اگه معنیشو نمیدونید معنیش میشه زبان نشانه گذاری فرا متنی!!!
زبان نشانه گذاری میگن چون ساختار دستوراتش بر اساس یکسری نشانه tag هست و فرامتنی میگن چون از متنی که تویه کاغذ نوشته میشه توانایی بیشتری داره…
HTML زبانیه که به مرورگر میگه که صفحات رو باید چطور نمایش بده! میشه گفت داره صفحات وب رو توصیف میکنه.
وقتی این همه برنامه برای ساخت صفحات وب هست چرا باید خودمو تو دردسر بندازم اچ تی ام ال یاد بگیرم!؟
اول اینکه html بسیار ساده هست و خیلی سریع میتونید اونو یاد بگیرید و بهش مسلط بشید و دوم اینکه وقتی که جلوتر بریم میبینیم که موقع نوشتن خیلی از برنامه های تحت وب مثلا با php نیاز دارید که با html هم آشنا باشید. یادتون باشه هرچی که قرار باشه کاربر ببینه باید رویه صفحه نمایش داده بشه!
مواد لازم:
هیچی! همون برنامه notepad تویه ویندوز کافیه! البته اگر برنامه notepad++ و یا HTMLPad رو دانلود کنید میتونید تگ های html رو به صورت رنگی ببینید و امکانات بیشتری داشته باشید!
خوبه شروع کنیم دیگه! تویه notepad(++) یه سند جدید ایجاد کنید و توش کد زیر رو بنویسید:
<html>
<head>
<title>In Onvane Safhast</title>
</head>
<body>
In Ham Matne Safheye Avvle!
Vay Khoda Daram Html Yad Migiram….
</body>
</html>
حالا اونو با یه نام دلخواه ذخیره کنید مثلا من به نام safeheye1.html ذخیره کردمش! حالا باید نتیجه تلاشمون رو ببینیم فقط کافیه که روی فایلمون (منظورم safheye1.html) دابل کلیک کنیم! اگر نتوستید صفحه رو باز کنید برید مرورگر رو باز کنید و از منوی File گزینه Open یا Open File رو انتخاب کنید و بعد هم فایلی که ایجاد کردید رو انتخاب و باز کنید! حالا اگر همه چی خوب پیش رفته باشه صفحه را ببینید!
اگه تا اینجا رو با دقت خونده باشید به نکات زیر حتما رسیدید:
۱٫ هر صفحه html از یک فایل متنی تشکیل میشه که با پسوند html یا htm ذخیره میشه!
۲٫ دستورات html ساختاری به صورت <دستور/>……<دستور> دارن!
۳٫ ساختار هر فایل html به صورت زیر هست که از دو قسمت اصلی تشکیل میشه: head که توش عنوان title و یکسری اطلاعات دیگه قرار میگیره و bodyکه توش عناصر صفحه قرار میگیرن!
<html>
<head>
</head>
<body>
</body>
</html>
۴٫ دستورات html خودشون متن هستند و برای اجرا باید به کامپیوتر کاربر منتقل بشن. میتونید این موضوع رو امتحان کنید فقط کافیه تویه همین صفحه که هستند راست کلیک کنید و بعد گزینه View Source یا View Page Source رو انتخاب کنید. واسه همینه که میگن html یک زبان سمت کاربر هستش!
۵٫ توانایی متون html از متون کاغذی خیلی بیشتره به عنوان مثال دیدید که با کلیک رویه کلمه میشه یه صفحه جدید باز کرد!
اگر شما می خواهید متنی را به صفحه html خود اضافه کنید کافی است متن دلخواه را در قسمت Body از صفحه html تایپ کنید.
مثال:
ویراستار notepad یا notepad++ خود را باز کنید و کد زیر را تایپ کنید
<html>
<head>
<title>my page</title>
</head>
<body>
.سلام !!این صفحه وب من است.
</body>
</html>
سپس با پسوند htm یا html آن را ذخیره کنید.
با باز کردن مثال خود با مرورگر Internet Explorer یا هر مرورگر دیگر نتیجه به صورت زیر خواهد شد:
سلام !!این صفحه وب من است.
اگر خطوط را به صورت "خرچنگ قورباغه" مي بينيد,فرار نكنيد, کافی است در هنگام Save کردن در پایین پنجره گزینه Encoding را با UTF-8 تنظیم کنید (در صورت استفاده از n++ باید قبل از save کردن از منوی Format گزینه Encode in UTF-8 را انتخاب نمایید).
مانند مثال بال اگر ویژگی های خاصی را به متن اضافه نکنید مرورگر از سایز و فونتی که به صورت پیش فرض برایش تعریف شده استفاده می کند.
فونت پیش فرض (BASE FONT):
برای اینکه متنی که در کل صفحه html وارد می کنید به یک شکل دیده شود یا به عبارت دیگر یک فونت سراسری با اندازه و رنگ یکسان داشته باشید کافی است که از دستور <basefont> در ابتدای قسمت بدنه (body) استفاده کنید.
مثال: ویراستار Notpade++ خود را باز کنید و کد زیر را تایپ کنید سپس با پسوند htm یا html و با نام دلخواه آن را ذخیره کنید.
۱٫<html>
۲٫<head>
۳٫ <title>my page</title>
۴٫</head>
۵٫ <body>
۶٫ <basefont face="Tahoma, arial, verdana" size="4" color="red">
۷٫ Hello! This is my page.
۸٫ All text looks the same<br>
۹٫ since I only specified a basefont<br>
۱۰٫</body>
۱۱٫</html>
در مثال بالا خاصیت های color,size,face از دستور basefont به ترتیب بیانگر فونت, اندازه یا سایز متن ( ۱کوچکترین و ۷ بزرگترین سایز) ورنگ متن html شما هستند.
نکته: اگر لیستی از فونت ها را مانند مثال بالا وارد کنیم مرورگر از اولین فونت قابل نمایش برای متن درکامپیوتر بیننده استفاده می کند.یعنی اگر قابلیت نمایش فونت Tahoma فراهم نباشد مرورگر از فونت arial وگر نه از فونت verdana استفاده خواهد کرد. نتیجه مثال بالا به صورت زیر خواهد شد:
Hello! This is my page. All text looks the same
since I only specified a basefont
توجه کنید که در هنگام نوشتن متون html برای رفتن به خط بعدی باید از دستور <br> استفاده کنید. با توجه به مثال خواهید دید که در خط ۷ از <br> استفاده نکردیم و به همین دلیل متن نوشته شده در خط ۸ با وجود اینکه در خط بعدی کد نوشته شده درخروجی بلافاصله بعد از متن خط ۷ دیده میشود.
تغییر فونت متن :
با استفاده از دستور </font><font> می توان فونت ,رنگ و اندازه متن را تغییر داد.
مثال: ویراستار Notpade++ خود را باز کنید و کد زیر را تایپ کنید سپس با پسوند htm یا html و با نام دلخواه آن را ذخیره کنید.
<html>
<head>
<title>My Page</title>
</head>
<body>
<basefont color="green" face="arial" size="4">
Hello! This is my page.<br><br>
<font color="red" face="arial" size="2">
This local text looks different.
</font>
<br><br>
This text looks like the first line.
</body>
</html>
با باز کردن مثال خود با مرورگر Internet Explorer , کد بالا نتیجه زیر را در مرورگر خواهد داشت:
Hello! This is my page.
This local text looks different.
This text looks like the first line.
با استفاده از صفت های color,face,size از دستور <font> می توان به ترتیب اندازه (۱ کوچکترین و۷ بزرگترین) ,نوع فونت و رنگ متن را تعیین کرد.
تفاوت font با basefont
basefont در کل صفحه وب اعمال می شود.در حالی که در دستور font تنها متنی که بین <font>…</font> قرار دارد تحت تاثیر این دستور و صفت های آن(face,color,size) قرار می گیرد.
قالب بندی متن:
در html قالب بندی متون به سادگی توسط دستورات مشخص شده در جدول انجام می شود!
| توضیح | دستور | خروجی |
| باعثbold (برجسته)شدن متن می شود. | <b>text</b> | text |
| باعث Italic (کج یا خوابیده) شدن متن می شود. | <i>text</i> | text |
| خطی زیر متن می کشد. | <u>text</u> | text |
| متن را کوچکتر می کند و پایین تر می آورد. | A<sub>B</sub> | AB |
| متن را کوچکتر می کند و بالا تر می آورد. | A<sup>B</sup> | AB |
| متن را به صورت چشمک زن نمایش می دهد. | <blink>text</blink> | text |
| خطی روی متن می کشد. | <strike>text</strike> | text |
| متن را به صورتی که در ماشین تحریر تایپ می شود ,نمایش می دهد. | <tt>text</tt> | text |
|
متن را دقیقا به همان صورتی که می نویسیم نمایش می دهد. یعنی فضای خالی ,tab ,رفتن به سطر بعدی را حفظ می کند. |
<pre>text</pre> |
اندازه های متون:
در html روش های متعددی برای تعیین اندازه متون پیش بینی شده است!
| توضیح | دستور | خروجی |
| باعث افزایش سایز متن به اندازه ۱ واحد نسبت به حالت عاددی | <big>text</big> | text |
| باعث کاهش سایز متن به اندازه ۱ واحد نسبت به حالت عادی. | <small>text</small> | text |
| متن را با کوچکترین سایز نمایش می دهد. | <font size="1">text</font> | text |
| متن را با بزرگترین سایز نمایش می دهد. | <font size="7"> text</font> | text |
نکته اول در مورد دستور <big></big> اینکه می توان از آن به صورت تکراری و پشت سر هم استفاده کرد.مثلا اگر بخواهیم متنی با دو سایز بزرگ تر از حالت عادی نمایش داده شود , کافی است از این دستو دو بار به صورت زیر استفاده شود .
<big><big>text</big></big>
و نکته دوم اینکه مقادیر صفت size متغیرند و می توانید از تمامی مقادیر ۱ تا ۷ استفاده کنید!
پاراگراف بندی:
برای پاراگراف بندی متن در Html کافی از دستور <p>…</p> استفاده کنیم , که <p> نشان دهنده شروع پاراگراف و <p/> نشان دهنده پایان آن است.
صفات Align,Id,Title,Dir از جمله صفاتی هستند که به بحث آنها می پردازیم:
صفت Dir : برای اینکه جهت نوشته شدن متن را مشخص کنیم از این صفت استفاده می کنیم. مقادیر این صفت عبارتند از LTR مخفف Left To Right به معنی چپ به راست و همچنین RTL مخفف Right To Left به معنی راست به چپ که از دومی ( RTL ) برای نوشتن متون فارسی استفاده می کنیم.
صفت Title: عبارتی که جلوی Title نوشته می شود به عنوان توضیح در مورد پاراگراف هنگامی که ماوس روی آن قرار می گیرد, ظاهر می شود.
صفت Id : نام پاراگراف را تعیین می کند.که این نام از طریق شیوه نامه ها قابل دسترسی است.
صفت Align :که مکان پاراگراف را مشخص می کند.که دارای سه مقدار Left,Right,Center است که قبلا توضیح داده شده است.
عناوین:
در اچ تی ام ال از دستورات h1 – h6 برای تعیین عنوان استفاده می شود. برای این کار از دستور مورد نظر به صورت <hX>Text</hX> استفاده می شود که باید بر حسب نیاز X را با عدد مورد نظر جایگزین کنید. مهمترین نکته در مورد دستورات تعیین عنوان این است که این دستورات برعکس نامشان اندازه عنوان را تعیین می کنند یعنی از h1 برای تعیین بزرگترین عنوان و از h6 برای تعیین کوچکترین عنوان استفاده می شود.
Heading1
Heading2
Heading3
Heading4
Heading5
Heading6
به عنوان آخرین نکته در نظر داشته باشید که می توانیم بوسیله قراردادن صفت align در دستورات hX محل قرارگیری عناوین را مشخص کنیم. نحوه استفاده از این صفت و مقادیر مختلف آن را در ادامه خواهید دید.
<h1 align="center">عنوان در وسط</h1>
عنوان در وسط
<h1 align="left">عنوان سمت چپ</h1>
عنوان سمت چپ
<h1 align="right">عنوان سمت راست</h1>
عنوان سمت راست
لینک ها:
با سلام ممنون از لینکیدنت.بهم سر بزن و با نظرات خود ما رو در هر چه بهتر مطالب یاری کنید