HTML: تفاوت بین نسخهها
جز |
|||
| سطر ۱: | سطر ۱: | ||
| − | + | =HTML چیست ؟= | |
| − | مخفف | + | مخفف کلمه hyper text markup language میباشد و عموماً فایلهای این کدنویسی با پسوند html و htm معرفی میشوند. |
| − | پسوند html و htm | + | |
| − | هر | + | هر فایل [[HTML]] حاوی برچسبهای (تگها) کوچک نشانه گذاریست و این برچسبها هستند که به [[مرورگر]] بیان میکنند که صفحه را چگونه نمایش دهند و یک فایل [[HTML]] میتواند توسط یک ویرایشگر متنی ساده همچون notepad ساخته شود. |
| − | به مرورگر | + | |
| − | + | کدنویسی در این زبان بسیار ساده هست و نیاز به صرف زمان اندکی دارد و میتوانید در مدت یک هفته به این زبان نسبتاً مسلط شوید. | |
| − | + | ||
| − | مدت | + | برای شروع لازم میباشد تا کد زیر را تحلیل کنیم : |
| − | + | ||
| − | < | + | |
| − | < | + | <div dir=ltr> |
| − | + | <code> | |
| − | + | <pre> | |
| − | + | <html> | |
| − | + | <head> | |
| − | متن | + | <title>عنوان صفحه</title> |
| − | + | </head> | |
| − | + | <body> | |
| − | < | + | متن معمولی<b> متن درشت خط </b> |
| − | اگر دقت | + | </body> |
| − | مثال : برچسب | + | </html> |
| − | در واقع | + | </pre> |
| − | + | </code> | |
| − | برچسب به | + | </div> |
| − | مطالب واقع در | + | |
| − | از قسمت | + | |
| − | + | اگر دقت کنید هرکدی که آغاز میشود در خطهای بعدی به کد خاتمه خود ختم میشود. بطور مثال : برچسب <html> که با </html> به پایان میرسد. | |
| − | + | ||
| − | + | در واقع اولین برچسب در فایل [[HTML]] شما ، <nowiki><html></nowiki> است.این برچسب به [[مرورگر]] میفهماند که این آغاز یک فایل [[HTML]] است، آخرین برچسب در فایل شما <nowiki><html/></nowiki> است.این برچسب به فایل شما میفهماند که این انتهای یک فایل [[HTML]] است. | |
| − | در | + | |
| − | + | مطالب واقع در میان برچسب head در نمای کلی صفحه نمایش داده نمیشوند و کاربرد خارج از قسمت نمایش اصلی (body) هستند. همانگونه که مشاهده میکنید برچسب title در دل این برچسب قرار گرفته است و وظیفه نمایش عنوان صفحه را دارد. | |
| − | + | ||
| − | + | محتویات سایت شما در بین برچسب body قرار میگیرد و متنی که در میان <nowiki><b></nowiki> قرار میگیرد به شکل درشت خط و یا Bold نمایش داده میشود. توجه : در کدنویسی به این سبک B و b تفاوتی ندارند ولی بهتر است خود را با حروف کوچک عادت دهید. | |
| − | + | ||
| − | + | =برچسبها و عناصر دیگر= | |
| − | به | + | حال زمان آنست که با برخی از برچسبها و عناصر دیگر html آشنا شوید: |
| − | در | + | |
| − | برچسب شروع عناصر HTML اضافه | + | عنصر Bgcolor به منظور معرفی یک زمینه برای صفحه یا جدول شما کاربرد دارد و در body به این شکل اضافه میشود : |
| − | برچسب table به منظور | + | |
| − | عنصر border | + | <div dir=ltr> |
| − | نظر قرار | + | <code> |
| − | border= | + | <pre> |
| − | نام/مقدار | + | <div dir=ltr><body bgcolor="green"></div> |
| − | < | + | </pre> |
| − | < | + | </code> |
| − | + | </div> | |
| − | + | ||
| − | < | + | و در بین برچسب body قرار میگیرد. |
| − | + | ||
| − | بعد از | + | توجه : عناصر همیشه به برچسب شروع عناصر [[HTML]] اضافه میشوند. |
| − | + | ||
| − | + | ||
| − | + | برچسب table به منظور ایجاد یک جدول در صفحه میباشد. | |
| − | + | ||
| − | برچسب | + | عنصر border برای تعیین اندازه لبههای جدول کاربرد دارد و در میان برچسب جدول مورد نظر قرار میگیرد. برای قرار گرفتن در بین جدول مورد نظر باید به شکل |
| − | + | ||
| − | + | ||
| − | HTML از برچسب | + | <div dir=ltr> |
| − | anchor | + | <code> |
| − | دستورالعمل : < | + | <pre> |
| − | + | <div dir=ltr><table border="0"></div> | |
| − | با | + | </pre> |
| − | شوند. خط | + | </code> |
| − | دستورالعمل : < | + | </div> |
| − | + | ||
| − | توجه داشته | + | |
| − | باشد. | + | وارد کنید. |
| − | + | ||
| − | + | توجه : عناصر همیشه در یک زوج نام/مقدار می آیند، مانند : نام="مقدار" | |
| − | + | ||
| − | + | ||
| − | + | ==سرتیترها== | |
| − | + | سر تیترها با برچسبهای <nowiki><h1></nowiki>تا<nowiki><h6></nowiki> معرفی میشوند. <nowiki><h1></nowiki> بیانگر بزرگترین سرتیتر و <nowiki><h6></nowiki> بیانگر کوچکترین سرتیتر است. | |
| − | معمولا | + | |
| − | از اقلام | + | ==پاراگرافها== |
| − | < | + | پاراگرافها با برچسب <nowiki><p></nowiki> معرفی میشوند. [[HTML]] بطور خودکار فضای خالی اضافی به قبل و بعد از یک پاراگراف اضافه می کند. |
| − | + | ||
| − | + | ==پرش به خط بعد== | |
| − | + | برچسب <nowiki><br></nowiki> هنگامی استفاده میشود که بخواهیم یک خط را پایان دهیم اما نمیخواهیم یک پاراگراف جدید را آغاز کنیم.برچسب <nowiki><br></nowiki> شما را از هر جا که قرار دارید به یک خط پایینتر میبرد. برچسب <nowiki><br></nowiki> یک برچسب تکی است و هیچ برچسب پایانی ندارد. | |
| − | + | ||
| − | + | برچسب <nowiki><hr></nowiki> نیز یک خط افقی را معرفی می کند. | |
| − | + | ||
| − | + | ==برچسب Anchor و موجودیت Href :== | |
| − | افتان، دکمه | + | [[HTML]] از برچسب <nowiki><a></nowiki> برای ساخت یک پیوند به پروندههای دیگر استفاده میکند. یک anchor میتواند به هر منبعی در وب اشاره کند. |
| − | + | ||
| − | در برچسب | + | دستورالعمل : |
| − | + | ||
| − | + | ||
| − | + | <div dir=ltr> | |
| − | value= | + | <code> |
| − | + | <pre> | |
| − | + | <a href="url"> متن مورد نظر </a> | |
| − | + | </pre> | |
| − | < | + | </code> |
| − | در HTML | + | </div> |
| − | آن فقط | + | |
| − | + | ||
| − | Src مخفف source (منبع) است. | + | ==موجودیت Target== |
| − | در صفحه تان | + | با موجودیت هدف شما میتوانید معرفی کنید که پروندههای پیوند داده شده کجا باز شوند. خط زیر پروندهای را در یک پنجره [[مرورگر]] جدید باز خواهد کرد. |
| − | < | + | |
| − | < | + | دستورالعمل : |
| − | < | + | |
| − | url به | + | |
| − | شده در | + | <div dir=ltr> |
| − | < | + | <code> |
| − | http://yoursite/images/pic.gif</ | + | <pre> |
| − | + | <a href="url" target="_blank"> متن مورد نظر </a> | |
| − | مرورگر | + | </pre> |
| − | است.اگر شما برچسب | + | </code> |
| − | ، سپس | + | </div> |
| − | + | ||
| − | + | ||
| − | < | + | توجه داشته باشید بسته به نیاز شما مقدار blank_ تغییر میکند و ممکن است new_ باشد. |
| − | + | ||
| − | < | + | ==سرتیترها در جداول== |
| − | اگر مرورگر نتواند | + | سرتیترها در یک جدول با برچسب <nowiki><th></nowiki> مشخص میشوند. |
| − | را در صفحه از دست داده است ، سپس مرورگر متن | + | |
| − | + | ==لیستهای نامرتب== | |
| − | + | یک لیست نامرتب ، لیستی از اقلام است.اقلام لیست بوسیله گلوله نشانه گذاری میشوند (معمولا یک دایره سیاه کوچک). یک لیست نامرتب با یک برچسب <nowiki><ul></nowiki> آغاز میشوند. هر کدام از اقلام لیست با برچسب <nowiki><li></nowiki> آغاز میشوند. | |
| − | + | ||
| − | ندارد. | + | ==لیستهای مرتب== |
| − | http://www.html.ir مراجعه | + | یک لیست مرتب شده نیز لیستی از اقلام است. اقلام لیست بوسیله شماره نشانه گذاری میشوند.یک لیست مرتب با برچسب <nowiki><ol></nowiki> آغاز میشود.هرکدام از اقلام لیست با برچسب <nowiki><li></nowiki> آغاز میشوند. |
| − | فرا | + | |
| − | + | ==فرمها== | |
| + | یک فرم ، منطقهای حاوی عناصر فرم است.عناصر فرم ، عناصری هستند که به کاربر اجازه میدهند تا اطلاعات را (مثل فیلدهای متنی ، فیلدهای text area ، لیست های پایین افتان، دکمه های رادیویی ، چک باکسها و...) در فرم وارد کند.یک فرم با برچسب <nowiki><form></nowiki> معرفی میشود. | ||
| + | |||
| + | در برچسب <nowiki><form></nowiki> برچسب <nowiki><input></nowiki> بیشترین استفاده را دارد.نوع ورودی با خواص آن تعیین میشود. | ||
| + | |||
| + | مثال : | ||
| + | |||
| + | |||
| + | <div dir=ltr> | ||
| + | <code> | ||
| + | <pre> | ||
| + | <input type="text" name="firstname" > | ||
| + | </pre> | ||
| + | </code> | ||
| + | </div> | ||
| + | |||
| + | |||
| + | دکمههای رادیویی : | ||
| + | |||
| + | |||
| + | <div dir=ltr> | ||
| + | <code> | ||
| + | <pre> | ||
| + | <input type="radio" name="city" value="Tehran" > Tehran </form> | ||
| + | </pre> | ||
| + | </code> | ||
| + | </div> | ||
| + | |||
| + | |||
| + | چک باکسها : | ||
| + | |||
| + | |||
| + | <div dir=ltr> | ||
| + | <code> | ||
| + | <pre> | ||
| + | <input type="checkbox" name="Text"> | ||
| + | </pre> | ||
| + | </code> | ||
| + | </div> | ||
| + | |||
| + | |||
| + | دکمه ارسال فرم : | ||
| + | |||
| + | |||
| + | <div dir=ltr> | ||
| + | <code> | ||
| + | <pre> | ||
| + | <input type="submit" value="Send"> | ||
| + | </pre> | ||
| + | </code> | ||
| + | </div> | ||
| + | |||
| + | |||
| + | ==برچسب Images و موجودیت Src== | ||
| + | در [[HTML]] عکسها با برچسب <nowiki><img ></nowiki> معرفی میشوند.برچسب <nowiki><img ></nowiki> خالی است بدین معنا که آن فقط حاوی موجودیتها است و برچسب پایانی ندارد. | ||
| + | |||
| + | برای نمایش یک تصویر در یک صفحه، شما احتیاج دارید که از موجودیت Src استفاده کنید. Src مخفف source (منبع) است. محتوای موجودیت url ، Src تصویری است که شما می خواهید در صفحه تان نمایش دهید. نحوه معرفی یک تصویربه شکل زیر است : | ||
| + | |||
| + | |||
| + | <div dir=ltr> | ||
| + | <code> | ||
| + | <pre> | ||
| + | <img src="url"> | ||
| + | </pre> | ||
| + | </code> | ||
| + | </div> | ||
| + | |||
| + | |||
| + | url به محلی اشاره میکند که تصویر در آنجا قرار دارد . تصویری که "pic.gif" نامیده شده در دایرکتوری "images" در "www.yoursite" دارای این url است: | ||
| + | <nowiki>http://yoursite/images/pic.gif</nowiki> | ||
| + | |||
| + | |||
| + | [[مرورگر]] تصویر را جایی قرار میدهد که برچسب تصویر پرونده در آنجا قرار گرفته است.اگر شما برچسب تصویر را بین دو پاراگراف قرار دهید ، [[مرورگر]] ابتدا پاراگراف اول ، سپس تصویر و سپس پاراگراف دوم را نشان می دهد. | ||
| + | |||
| + | ==موجودیت Alt== | ||
| + | برای معرفی متن جایگزین به جای یک تصویر استفاده می شود. محتوای موجودیت Alt یک متن توصیفی است: | ||
| + | |||
| + | |||
| + | <div dir=ltr> | ||
| + | <code> | ||
| + | <pre> | ||
| + | <img src="url" alt="My Picture"> | ||
| + | </pre> | ||
| + | </code> | ||
| + | </div> | ||
| + | |||
| + | |||
| + | اگر [[مرورگر]] نتواند تصویری را بارگیری نماید ، موجودیت alt به خواننده میگوید که آن را در صفحه از دست داده است ، سپس [[مرورگر]] متن جایگزین را بجای آن نشان خواهد داد. | ||
| + | |||
| + | |||
| + | این مقاله برای درک بهتر مفاهیم html میباشد و جنبه آموزشی ندارد. برای آموزش این برنامه نویسی و درک بهتر مفاهیم مطرح شده، به سایت <nowiki>http://www.html.ir</nowiki> مراجعه کنید و این کدنویسی را همراه با مثال و مطالب گستردهتری فرا بگیرید. | ||
| + | |||
| + | مطالب این مقاله از سایت html.ir تهیه شده است. | ||
[[رده:زبان برنامه نویسی تحت وب]] | [[رده:زبان برنامه نویسی تحت وب]] | ||
نسخهٔ ۳۰ ژانویهٔ ۲۰۱۰، ساعت ۱۶:۱۴
محتویات
HTML چیست ؟
مخفف کلمه hyper text markup language میباشد و عموماً فایلهای این کدنویسی با پسوند html و htm معرفی میشوند.
هر فایل HTML حاوی برچسبهای (تگها) کوچک نشانه گذاریست و این برچسبها هستند که به مرورگر بیان میکنند که صفحه را چگونه نمایش دهند و یک فایل HTML میتواند توسط یک ویرایشگر متنی ساده همچون notepad ساخته شود.
کدنویسی در این زبان بسیار ساده هست و نیاز به صرف زمان اندکی دارد و میتوانید در مدت یک هفته به این زبان نسبتاً مسلط شوید.
برای شروع لازم میباشد تا کد زیر را تحلیل کنیم :
<html> <head> <title>عنوان صفحه</title> </head> <body> متن معمولی<b> متن درشت خط </b> </body> </html>
اگر دقت کنید هرکدی که آغاز میشود در خطهای بعدی به کد خاتمه خود ختم میشود. بطور مثال : برچسب <html> که با </html> به پایان میرسد.
در واقع اولین برچسب در فایل HTML شما ، <html> است.این برچسب به مرورگر میفهماند که این آغاز یک فایل HTML است، آخرین برچسب در فایل شما <html/> است.این برچسب به فایل شما میفهماند که این انتهای یک فایل HTML است.
مطالب واقع در میان برچسب head در نمای کلی صفحه نمایش داده نمیشوند و کاربرد خارج از قسمت نمایش اصلی (body) هستند. همانگونه که مشاهده میکنید برچسب title در دل این برچسب قرار گرفته است و وظیفه نمایش عنوان صفحه را دارد.
محتویات سایت شما در بین برچسب body قرار میگیرد و متنی که در میان <b> قرار میگیرد به شکل درشت خط و یا Bold نمایش داده میشود. توجه : در کدنویسی به این سبک B و b تفاوتی ندارند ولی بهتر است خود را با حروف کوچک عادت دهید.
برچسبها و عناصر دیگر
حال زمان آنست که با برخی از برچسبها و عناصر دیگر html آشنا شوید:
عنصر Bgcolor به منظور معرفی یک زمینه برای صفحه یا جدول شما کاربرد دارد و در body به این شکل اضافه میشود :
<div dir=ltr><body bgcolor="green"></div>
و در بین برچسب body قرار میگیرد.
توجه : عناصر همیشه به برچسب شروع عناصر HTML اضافه میشوند.
برچسب table به منظور ایجاد یک جدول در صفحه میباشد.
عنصر border برای تعیین اندازه لبههای جدول کاربرد دارد و در میان برچسب جدول مورد نظر قرار میگیرد. برای قرار گرفتن در بین جدول مورد نظر باید به شکل
<div dir=ltr><table border="0"></div>
وارد کنید.
توجه : عناصر همیشه در یک زوج نام/مقدار می آیند، مانند : نام="مقدار"
سرتیترها
سر تیترها با برچسبهای <h1>تا<h6> معرفی میشوند. <h1> بیانگر بزرگترین سرتیتر و <h6> بیانگر کوچکترین سرتیتر است.
پاراگرافها
پاراگرافها با برچسب <p> معرفی میشوند. HTML بطور خودکار فضای خالی اضافی به قبل و بعد از یک پاراگراف اضافه می کند.
پرش به خط بعد
برچسب <br> هنگامی استفاده میشود که بخواهیم یک خط را پایان دهیم اما نمیخواهیم یک پاراگراف جدید را آغاز کنیم.برچسب <br> شما را از هر جا که قرار دارید به یک خط پایینتر میبرد. برچسب <br> یک برچسب تکی است و هیچ برچسب پایانی ندارد.
برچسب <hr> نیز یک خط افقی را معرفی می کند.
برچسب Anchor و موجودیت Href :
HTML از برچسب <a> برای ساخت یک پیوند به پروندههای دیگر استفاده میکند. یک anchor میتواند به هر منبعی در وب اشاره کند.
دستورالعمل :
<a href="url"> متن مورد نظر </a>
موجودیت Target
با موجودیت هدف شما میتوانید معرفی کنید که پروندههای پیوند داده شده کجا باز شوند. خط زیر پروندهای را در یک پنجره مرورگر جدید باز خواهد کرد.
دستورالعمل :
<a href="url" target="_blank"> متن مورد نظر </a>
توجه داشته باشید بسته به نیاز شما مقدار blank_ تغییر میکند و ممکن است new_ باشد.
سرتیترها در جداول
سرتیترها در یک جدول با برچسب <th> مشخص میشوند.
لیستهای نامرتب
یک لیست نامرتب ، لیستی از اقلام است.اقلام لیست بوسیله گلوله نشانه گذاری میشوند (معمولا یک دایره سیاه کوچک). یک لیست نامرتب با یک برچسب <ul> آغاز میشوند. هر کدام از اقلام لیست با برچسب <li> آغاز میشوند.
لیستهای مرتب
یک لیست مرتب شده نیز لیستی از اقلام است. اقلام لیست بوسیله شماره نشانه گذاری میشوند.یک لیست مرتب با برچسب <ol> آغاز میشود.هرکدام از اقلام لیست با برچسب <li> آغاز میشوند.
فرمها
یک فرم ، منطقهای حاوی عناصر فرم است.عناصر فرم ، عناصری هستند که به کاربر اجازه میدهند تا اطلاعات را (مثل فیلدهای متنی ، فیلدهای text area ، لیست های پایین افتان، دکمه های رادیویی ، چک باکسها و...) در فرم وارد کند.یک فرم با برچسب <form> معرفی میشود.
در برچسب <form> برچسب <input> بیشترین استفاده را دارد.نوع ورودی با خواص آن تعیین میشود.
مثال :
<input type="text" name="firstname" >
دکمههای رادیویی :
<input type="radio" name="city" value="Tehran" > Tehran </form>
چک باکسها :
<input type="checkbox" name="Text">
دکمه ارسال فرم :
<input type="submit" value="Send">
برچسب Images و موجودیت Src
در HTML عکسها با برچسب <img > معرفی میشوند.برچسب <img > خالی است بدین معنا که آن فقط حاوی موجودیتها است و برچسب پایانی ندارد.
برای نمایش یک تصویر در یک صفحه، شما احتیاج دارید که از موجودیت Src استفاده کنید. Src مخفف source (منبع) است. محتوای موجودیت url ، Src تصویری است که شما می خواهید در صفحه تان نمایش دهید. نحوه معرفی یک تصویربه شکل زیر است :
<img src="url">
url به محلی اشاره میکند که تصویر در آنجا قرار دارد . تصویری که "pic.gif" نامیده شده در دایرکتوری "images" در "www.yoursite" دارای این url است:
http://yoursite/images/pic.gif
مرورگر تصویر را جایی قرار میدهد که برچسب تصویر پرونده در آنجا قرار گرفته است.اگر شما برچسب تصویر را بین دو پاراگراف قرار دهید ، مرورگر ابتدا پاراگراف اول ، سپس تصویر و سپس پاراگراف دوم را نشان می دهد.
موجودیت Alt
برای معرفی متن جایگزین به جای یک تصویر استفاده می شود. محتوای موجودیت Alt یک متن توصیفی است:
<img src="url" alt="My Picture">
اگر مرورگر نتواند تصویری را بارگیری نماید ، موجودیت alt به خواننده میگوید که آن را در صفحه از دست داده است ، سپس مرورگر متن جایگزین را بجای آن نشان خواهد داد.
این مقاله برای درک بهتر مفاهیم html میباشد و جنبه آموزشی ندارد. برای آموزش این برنامه نویسی و درک بهتر مفاهیم مطرح شده، به سایت http://www.html.ir مراجعه کنید و این کدنویسی را همراه با مثال و مطالب گستردهتری فرا بگیرید.
مطالب این مقاله از سایت html.ir تهیه شده است.
