HTML
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
به اين شكل اضافه ميشود : <body bgcolor="green"> و
در بين برچسب body قرار ميگيرد. توجه : عناصر همیشه به
برچسب شروع عناصر HTML اضافه می شوند.
برچسب table به منظور ايجاد يك جدول در صفحه ميباشد.
عنصر border براي تعيين اندازه لبههاي جدول كاربرد دارد و در ميان برچسب جدول مورد
نظر قرار ميگيرد. براي قرار گرفتن در بين جدول مورد نظر بايد به شكل <table
border="0"> وارد كنيد. توجه : عناصر همیشه در یک زوج
نام/مقدار می آیند، مانند : نام="مقدار"
سرتيترها :
سر تیترها با برچسب های <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 مراجعه كنيد و اين كدنويسي را همراه با مثال و مطالب گستردهتري
فرا بگيريد.
