-
HTML مخفف Hyper Text Markup Language میباشد. فایل HTML یک فایل متنی است که از تگهای کوچکتری تشکیل شده است.این تکها به مرورگر میگن که چگونه صفحه ها را نشان بدهد و این فایل حتما باید پسوند htm یا html داشته باشدوتوسط یک ادیتور ساده مانند نت پد ساخته میشود.
برای شروع در ویندوز Notepad را باز کنید و متن زیر را یادداشت کنید.
كد :
<html> <head> <title>Title of page</title> </head> <body> This is my first homepage. <b>This text is bold</b> </body> </html>
این فایل را بنام mypage.htm سیو کنید.سپس مرورگر وبتون را باز کنید از منوی File روی Open و یا Open Page کلیک کنید.در دیالوگی که باز میشود روی Browse و یا
Choose File کلیک کرده وآدرس فایلی که ذخیره کرده اید به آن بدهید و پس از انتخاب آن روی Open کلیک کنید حالا شما بایدآدرسی را که داده اید در دیالوگ ببینید سپس OK راکلیک بکنید اکنون مرورگرتان باید صفحه ای که ساخته بودید نشان دهد.
تشریح مثال بالا
اولین تگ در سند اچتیمل تان <html> بود.این تگ به مرورگرتان میگوید که این شروع یک سند اچتمل میباشد و آخرین تگ در سندتان <html/> هست که به مرورگر اطلاع میدهد که سند تمام شده است .
متنهای مابین دو تگ <head> و<head/> اطلاعات عناوین صفحه میباشند این اطلاعات در پنجره مرورگر نشان داده نمیشود.متن داخل تگهای <title> عنوان سندتان میباشد که درآدرس بار مرورگرتان مشاهده میشود.متن داخل دو تگ <b> و <b /> سیاه بودن یا بلود بودن متن را میرساند.
پسوند HTM یا HTML
شما وقتی که یک فایل HTML را سیو می کنید هم با پسوند HTML و هم با پسوند
HTM می تونید سیوش کنید.
در ضمن فایلهای HTML را براحتی میتوانید با FrontPage , Claris Home Page, یا Adobe بجای نوشتن تگهای فایل استفاده کنید.
-
اسناد HTML توسط عناصر HTML ساخته میشوند. عناصرHTML بوسیله تگهای HTML
شناخته میشوند.عناصر HTML مابین دو کاراکتر< و > محاصره شدند. تگهای HTML
معمولا ما بین یک جفت <b> و <b/> نوشته میشوند.به تگ اولی تگ شروع و به تگ دومی
تگ انتهایی گفته میشود.متن ما بین دو تگ شروع و انتها عنصر مضمون یا محتوا خوانده
میشود و تگهای HTML به حروف کوچک یا بزرگ حساس نیستند مثال مطلب قبلی را مجدادا
در پایین همین متن میارم.
این یک عنصر HTML است. <b>This text is bold</b>
این عنصر با تگ شروع <b> آغاز شده و مضمون آن This text is bold است و با
عنصر پایانی <b/> خاتمه یافته است.
هدف تگ <b> معین کردن یک عنصر HTML است به صورت bold نشان داده شود.
همچنین این نیز یک عنصر HTML است.
<body>
This is my first homepage. <b>This text is bold</b>
</body>
این عنصر با تگ شروع <body> آغاز شده و سندHTML بدنه را در بر میگیرد.
و اما چرا از حروف کوچک برای تگها استفاده میکنیم؟
گفتیم که تگهای HTML به حروف کوچک وبزرگ حساس نیستند <B> مثل <b> میباشد.
ولی کنسرسیم W3C برای شناخته شدن این تگها بوسیله XHTML با حروف کوچکتر استفاده
بشه.
تگهای حامل
حاملها میتوننداطلاعات اضافی به عناصر HTML در صفحات وب بدهند. این
عنصر<body> بدنه صفحه HTML را مشخص میکنند و با یک حامل bgcolor به
مرورگر میگن که مثلا صفحه قرمز رنگ باشه مثل <"body bgcolor="red>
<table> این تگ یک جدول HTML راتایین میکند که با اضافه کردن یک حامل border
به مرورگر میگه مثلا حاشیه نداشته باشه < "table border="0>
حامها معمولا باید توسط دو کوتیشن مارک " " معرفی شوند
كد :
<html> <head> <title>Title of page</title> </head> <body> This is my first homepage. <b>This text is bold</b> </body> </html>
-
سلام دوست عزيز
مطالبت خيلي جالب بود فقط من يك سوال داشتم من يك عكس با فوتو شاپ
طراحي كردم چطور اون رو تو وبلاگم بذارم :?:
-
در جواب دوستم آقاي مختاري بايد بگم كه عكستون را بايد آپالود كنيد
-
ببخشيد اقا علي ميشه بگيد اپلود كردن چه جوريه :D
-
-
بهترین راه برای یادگیری HTML کار کردن با مثالهای آن میباشد.ما یک ویرایشگر خیلی
خوب ساختیمکه با این ادیتور کد سورس HTML ی که دوست داریدویرایش کنید روی کلید
کلیک کنید و نتیجه را ببینید. این یک مثال ساده از یک سند HTML استبا کمترین تگ که
نشان میدهد عناصر بدنه چطور توسط مرورگر مشاهده میشود.عناوین با تگهای <h1> تا
<h6> مشخص میشوند که <h1> برای بزرگترین حروف و <h6> برای کوچکترین حروف
بکار میروند
<h1>This is a heading</h1>
<h2>This is a heading</h2>
<h3>This is a heading</h3>
<h4>This is a heading</h4>
<h5>This is a heading</h5>
<h6>This is a heading</h6>
HTML بطور اتوماتیک یک خط سفید قبل از عنوان بعدی اضافه میکند. پاراگرافها با تگ
<p> نشان داده میشوند
<p>This is a paragraph</p>
<p>This is another paragraph</p>
تگ <br> زمانی استفاده میشه که ما بخواهیم خطی را به اتمام برسانیم نه آنکه پاراگراف
دیگری را شروع کنیم.برای درک بهتر این مثال را ویرایش کنید.
<p>This <br> is a para<br>graph with line breaks</p>
<br> این یک تگ تنها است و تگ پایانی ندارد.
تگ توضیحی در داخل کدهای HTML استفاده میشه.یک تگ توضیحی ممکن از دید مرورگر
نادیده گرفته شود. شما میتونید برای شرح دادن کد از آن استفاده کنید که در زمان دیگری برای
ویرایش کمکمون میکند مانند مثال زیر
<-- This is a comment --!>
توجه کنید که شما به این ! علامت بعد از> نیاز دارید نه قبل از <
شما از تگ<hr> برای کشیدن خط افقی جهت جدا کردن پاراگرافها استفاده میکنید
-
روش کدگزاری UTF-8
برای تايپ و تمايش متون فارسی از استاندارد يونيکد و روش کدگزاری UTF-8 اسنفاده میشود.برای نمايش صحيح متون فارسی تعيين نوع کدگزاری يا encoing صفحات فارسی است که برای اينکار بايد از متاتگ خاصی به نام http-equiv در بخش head صفحات اچتمل به شکل زير استفاده شود:
< "meta http-equiv="Content-Type" content="text/html; charset=utf-8>
در اينصورت مرورگرقبل از نمايش صفحه از روی متاتگ فوق نوع کدگزاری را تشخيص داده و ديگر نيازی به تعيين دستی نوع Encoing توسط بازديدکننده نخواهد بود.
شناسه يا attribute ی به نام dir
جهت نمايش متون لاتين به صورت پيش فرض و default از چپ به راست (ltr) ميباشد.در مورد متون و جملات فارسی بايد با کمک روشی جهت نمايش پيش فرض را به "راست به چپ" تغيير دهيد. شناسه به نام dir يا همان direction اين کار را برای شما انجام ميدهد. اين شناسه دارای دو مقدار ممکن ميباشد :
dir="ltr" , Left-to-right text. - چپ به راست
dir="rtl" , Right-to-left text. - راست به چپ
مثلا برای نمايش جمله فارسی "این یک وبلاگ است" با کمک عناصر p يا div کافی است که به يکی از شکلهای زير عمل شود:
<p dir="rtl"> این یک وبلاگ است </p>
<div dir="rtl"> این یک وبلاگ است </div>
-
ساختن یک پیوند
این مثال ساختن یک لینک با اچتمل و لینک به یک تصویر را نشان میدهد و با تگ <a>
(anchor) آشنا میشوید. یک anchor محلی را در وب معین میکند مانند یک صفحه وب ،
یک تصویر ، یک فایل صوتی ، یک فیلم و غیره.
نحوه ساختن یک پیوند
<a href="url">Text to be displayed</a>
از تگ <a> برای ساختن پیوند به یک لینک استفاده میشه، ویژگی href برای آدرس دهی به
یک سنده و کلماتی که ما بین دو تگ باز و بسته anchor قرار دارند در صفحه به نمایش در
میآیند. مثال زیر یک پیوند به همین صفحه است
<a href="www.iranvadonia.tk/">Visit hame!</a>
خط بالا فقط جمله Visit hame! را در مرورگر نشان خواهد داد.
ویژگی Target
توسط این کلمه شما تایین میکنید که صفحه مورد نظر در صفحه جدیدی باز شود. توسط خط
زیر سند در یک صفحه جدید باز خواهد شد.
كد :
<a href="www.iranvadonia.tk/" target="_blank">Visit hame!</a>
تگ <a> (پیوند) به همراه Name
ویژگی Name برا ساختن پیوند نامبرده استفاده می شود، وقتی از پیوند Name استفاده
میکنیم میتونیم به یک سندی در همان صفحه لینک بدیم در زیر یک نمونه از پیوند Name را
مشاهده میکنید.
<a name="label">Text to be displayed</a>
با این پیوند شما میتونید به مقداری از متن اشاره کنید.
البته تعداددیگری نیز هست که در آموزشهای بعدی به آنها اشاره خواهد شد.
-
جدولها با تگ <table> معین می شوند. یک جدول توسط تگ <tr> در هر سطر طبقه بندی
میشود و همه فهرست سطرها توسط تگ <td> تقسیم بندی می شوند. حروف td مخفف کلمه
"table data" که محتوی دادها هستند. داده ها میتونند متون ،تصاویر،لیستها ، پاراگرافها و
غیره را در بر بگیرند.
بعنوان مثال
كد :
<table border="1"> <tr> <td>row 1, cell 1</td> <td>row 1, cell 2</td> </tr> <tr> <td>row 2, cell 1</td> <td>row 2, cell 2</td> </tr> </table>
جداول و ویژگیهای Border
اگر شما ویژگی حاشیه را در جدول ها مشخص نکنید جولها بدون حاشیه دیده خواهند شد،بعضی
مواقع اینکار سودمنده اما بیشتر وقتها ما میخواهیم کناره های جدول دیده شود.
برای نشان دادن کناره های جدولباید از ویژگی Border استفاده کنیم:
كد :
<table border="1"> <tr> <td>Row 1, cell 1</td> <td>Row 1, cell 2</td> </tr> </table>
هد جدولها
هد جدولها توسط تگ <th> تقسیم بندی میشود.
كد :
<table border="1"> <tr> <th>Heading</th> <th>Another Heading</th> </tr> <tr> <td>row 1, cell 1</td> <td>row 1, cell 2</td> </tr> <tr> <td>row 2, cell 1</td> <td>row 2, cell 2</td> </tr> </table>
خانه های خالی در جدول
البته خانه های خالی در مرورگرهای مختلف بخوبی دیده نمیشوند.
كد :
<table border="1"> <tr> <td>row 1, cell 1</td> <td>row 1, cell 2</td> </tr> <tr> <td>row 2, cell 1</td> <td></td> </tr> </table>
همانطور که می بینید حاشیه خانه خالی دیده نمی شود برای اجتناب از این کار (&nbsp;) را
داخل خانه قرار می دهیم.
كد :
<table border="1"> <tr> <td>row 1, cell 1</td> <td>row 1, cell 2</td> </tr> <tr> <td>row 2, cell 1</td> <td>&nbsp;</td> </tr> </table>
