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">
/* (...) */
<body bgcolor="green">
/* (...) */
</source>
و در بین برچسب body قرار می‌گیرد.
توجه: عناصر همیشه به برچسب شروع عناصر HTML اضافه می‌شوند.
برچسب table به منظور ایجاد یک جدول در صفحه می‌باشد.
عنصر border برای تعیین اندازه لبه‌های جدول کاربرد دارد و در میان برچسب جدول مورد نظر قرار می‌گیرد. برای قرار گرفتن در بین جدول مورد نظر باید به صورت زیر کدها را وارد کنید.
<source lang="php">
/* (...) */
</div>
/* (...) */
</source>
توجه: عناصر همیشه در یک زوج نام/مقدار می‌آیند، مانند : نام="مقدار"
سرتیترها
سر تیترها با برچسب‌های <h1>تا<h6> معرفی می‌شوند. <h1> بیانگر بزرگترین سرتیتر و <h6> بیانگر کوچکترین سرتیتر است.
پاراگراف‌ها
پاراگراف‌ها با برچسب <p> معرفی می‌شوند. HTML بطور خودکار فضای خالی اضافی به قبل و بعد از یک پاراگراف اضافه می کند.
پرش به خط بعد
برچسب <br> هنگامی استفاده می‌شود که بخواهیم یک خط را پایان دهیم اما نمی‌خواهیم یک پاراگراف جدید را آغاز کنیم.برچسب <br> شما را از هر جا که قرار دارید به یک خط پایین‌تر می‌برد. برچسب <br> یک برچسب تکی است و هیچ برچسب پایانی ندارد.
برچسب <hr> نیز یک خط افقی را معرفی می کند.
برچسب Anchor و موجودیت Href :
HTML از برچسب <a> برای ساخت یک پیوند به پرونده‌های دیگر استفاده می‌کند. یک anchor می‌تواند به هر منبعی در وب اشاره کند.
دستورالعمل:
<source lang="php">
/* (...) */
<a href="url"> متن مورد نظر </a>
/* (...) */
</source>
موجودیت Target
با موجودیت هدف شما می‌توانید معرفی کنید که پرونده‌های پیوند داده شده کجا باز شوند. خط زیر پرونده‌ای را در یک پنجره مرورگر جدید باز خواهد کرد.
دستورالعمل:
<source lang="php">
/* (...) */
<a href="url" target="_blank"> متن مورد نظر </a>
/* (...) */
</source>
توجه داشته باشید بسته به نیاز شما مقدار blank_ تغییر می‌کند و ممکن است new_ باشد.
سرتیترها در جداول
سرتیترها در یک جدول با برچسب <th> مشخص می‌شوند.
لیست‌های نامرتب
یک لیست نامرتب ، لیستی از اقلام است.اقلام لیست بوسیله گلوله نشانه گذاری می‌شوند (معمولا یک دایره سیاه کوچک). یک لیست نامرتب با یک برچسب <ul> آغاز می‌شوند. هر کدام از اقلام لیست با برچسب <li> آغاز می‌شوند.
لیست‌های مرتب
یک لیست مرتب شده نیز لیستی از اقلام است. اقلام لیست بوسیله شماره نشانه گذاری می‌شوند.یک لیست مرتب با برچسب <ol> آغاز می‌شود.هرکدام از اقلام لیست با برچسب <li> آغاز می‌شوند.
فرم‌ها
یک فرم ، منطقه‌ای حاوی عناصر فرم است.عناصر فرم ، عناصری هستند که به کاربر اجازه می‌دهند تا اطلاعات را (مثل فیلدهای متنی ، فیلدهای text area ، لیست های پایین افتان، دکمه های رادیویی ، چک باکس‌ها و...) در فرم وارد کند.یک فرم با برچسب <form> معرفی می‌شود.
در برچسب <form> برچسب <input> بیشترین استفاده را دارد.نوع ورودی با خواص آن تعیین می‌شود.
مثال
<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 عکس‌ها با برچسب <img > معرفی می‌شوند.برچسب <img > خالی است بدین معنا که آن فقط حاوی موجودیت‌ها است و برچسب پایانی ندارد.
برای نمایش یک تصویر در یک صفحه، شما احتیاج دارید که از موجودیت Src استفاده کنید. Src مخفف source (منبع) است. محتوای موجودیت url ، Src تصویری است که شما می خواهید در صفحه تان نمایش دهید. نحوه معرفی یک تصویر به صورت زیر است :
<source lang="php">
/* (...) */
<img src="url">
/* (...) */
</source>
url به محلی اشاره می‌کند که تصویر در آنجا قرار دارد . تصویری که "pic.gif" نامیده شده در دایرکتوری "images" در "www.yoursite" دارای این url است:
http://yoursite/images/pic.gif
مرورگر تصویر را جایی قرار می‌دهد که برچسب تصویر پرونده در آنجا قرار گرفته است.اگر شما برچسب تصویر را بین دو پاراگراف قرار دهید ، مرورگر ابتدا پاراگراف اول ، سپس تصویر و سپس پاراگراف دوم را نشان می دهد.
موجودیت Alt
برای معرفی متن جایگزین به جای یک تصویر استفاده می شود. محتوای موجودیت Alt یک متن توصیفی است:
<source lang="php">
/* (...) */
<img src="url" alt="My Picture">
/* (...) */
</source>
اگر مرورگر نتواند تصویری را بارگیری نماید ، موجودیت alt به خواننده می‌گوید که آن را در صفحه از دست داده است ، سپس مرورگر متن جایگزین را بجای آن نشان خواهد داد.
این مقاله برای درک بهتر مفاهیم html می‌باشد و جنبه آموزشی ندارد. برای آموزش این برنامه نویسی و درک بهتر مفاهیم مطرح شده، به سایت http://www.html.ir مراجعه کنید و این کدنویسی را همراه با مثال و مطالب گسترده‌تری فرا بگیرید.
منبع : سایت html.ir
 استفاده از مطالب دانشنامه جوملا فارسی - مامبو فارسی با ذکر منبع ( دانشنامه جوملا فارسی ) و لینک مستقیم به http://docs.joomlafarsi.com بلامانع است.
|
استفاده از مطالب دانشنامه جوملا فارسی - مامبو فارسی با ذکر منبع ( دانشنامه جوملا فارسی ) و لینک مستقیم به http://docs.joomlafarsi.com بلامانع است.
