HTML: تفاوت بین نسخه‌ها   

از دانشنامه جوملا فارسی - مامبو فارسی
پرش به: ناوبری، جستجو
(توضيحات كوتاهي در رابطه با html و كدهاي پراستفاده آن)
 
جز (معرفي مختصر html به 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 مراجعه كنيد و اين كدنويسي را همراه با مثال و مطالب گسترده‌تري فرا بگيريد.

 

موفق باشيد.