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