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

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

<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»