HTML   

از دانشنامه جوملا فارسی - مامبو فارسی
(تغییرمسیر از Html)
پرش به: ناوبری، جستجو

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

8.pngاستفاده از مطالب دانشنامه جوملا فارسی - مامبو فارسی با ذکر منبع ( دانشنامه جوملا فارسی ) و لینک مستقیم به http://docs.joomlafarsi.com بلامانع است.
برگرفته از «https://docs.joomlafarsi.com/index.php?title=HTML&oldid=1980»