راسخون

مدرسه HTML

saeidfarajpour کاربر طلایی1
|
تعداد پست ها : 2734
|
تاریخ عضویت : آذر 1392 

تعدادی از کاراکترها یک معنی خاص در HTML دارند.مثل علامت کوچکتر از ">" که شروع یک برچسب HTML را معرفی می کند.اگر ما بخواهیم که مرورگر عملا این کاراکتر ها را نشان بدهد باید در منبع کد HTML موجودیت های کاراکتر را وارد کنیم. 
یک موجودیت کاراکتر سه بخش دارد: یک علامت "&" ، یک موجودیت اسم یا یک علامت "#" و یک موجودیت عددو در نهایت یک ";".
برای نمایش یک علامت کوچکتر از در یک پرونده HTML ما باید بنویسیم: ;lt& یا ;60#& .
فایده استفاده از یک نام بجای یک عدد این است که به خاطر سپردن یک نام آسان تر است و اشکال آن این است که همه مرورگر ها موجودیت کاراکترها را پشتیبانی نمی کنند در حالی که تقریبا همه مرورگرها خیلی خوب از موجودیت عددها پشتیبانی می کنند. 
توجه کنید که موجودیت ها حساس به حروف کوچک و بزرگ هستند.

saeidfarajpour کاربر طلایی1
|
تعداد پست ها : 2734
|
تاریخ عضویت : آذر 1392 

یکی از موجودیت کاراکترهای پر استفاده در HTML فاصله بدون شکست است. بطور عادی HTML فاصله ها را در متن شما کوتاه خواهد کرد ، اگر شما ده فاصله در متن خود بگذارید HTML 9 تای آن را از بین خواهد برد. برای اضافه کردن فاصله در متنتان ، از موجودیت کاراکتر ;nbsp& استفاده کنید.

saeidfarajpour کاربر طلایی1
|
تعداد پست ها : 2734
|
تاریخ عضویت : آذر 1392 

 

نتیجه توضیحات نام موجودیت شماره موجودیت
  فاصله بدون شکست    
< کوچکتر از &lt; &#60;
> بزرگتر از &gt; &#62;
& ampersand &amp; &#38;
" علامت کتیشن &quot; &#34;
' آپاستروف &apos;(در IE کاربرد ندارد) &#39;

 

 

نتیجه توضیحات نام موجودیت شماره موجودیت
¢ cent &cent; &#162;
£ پاوند &pound; &#163;
¥ ین &yen; &#165;
§ بخش &sect; &#167;
© حق کپی &copy; &#169;
® علامت ثبت شده &reg; &#174;
× ضرب &times; &#215;
÷ تقسیم &divide; &#247;

 

saeidfarajpour کاربر طلایی1
|
تعداد پست ها : 2734
|
تاریخ عضویت : آذر 1392 

HTML برای پیوند به پرونده های دیگر در وب از فرا پیوندها استفاده می کند.

مثالها

<html>
<body>
 
<p>
<a href="?page=lastpage.htm">
This text</a> is a link to a page on 
this Web site.
</p>
 
<p>
<a href="?page=../../www.microsoft.com/default.htm">
This text</a> is a link to a page on 
the World Wide Web.
</p>
 
</body>
</html>
 
 

این مثال نشان می دهد که چگونه می توان، در متن نوشته شده، فراپیوندی ایجاد کرد.

<html>
<body>
<p>
You can also use an image as a link:
<a href="http://www.farajpour.ir">
<img border="0" src="./content/media/tryit/buttonnext.gif" width="65" height="38">
</a>
</p>
 
</body>
</html>

این مثال عکسی را به یک فراپیوند تبدیل می کند.

saeidfarajpour کاربر طلایی1
|
تعداد پست ها : 2734
|
تاریخ عضویت : آذر 1392 

HTML از برچسب <a> برای ساخت یک پیوند به پرونده های دیگر استفاده می کند. یک anchor می تواند به هر منبعی در وب اشاره کند.یک صفحه HTML ، یک عکس ، یک فایل صوتی ، یک فیلم و ... .
دستورالعمل ساخت یک Anchor

<a href="url"> متنی که نمایش داده می شود </a>

در هنگام ساختن یک Anchor باید مکانی که پیوند به آن پرونده اشاره میکند را مشخص کرد. برای نمایش آدرس پرونده از موجودیت href استفاده می شود.کلمات بین بر چسب آغازو پایان Anchor به عنوان فرا پیوند نمایش داده می شود.     
این Anchor یک پیوند به farajpour.ir را معرفی می کند:

<a href="http://www.farajpour.ir"> farajpour.ir را ملاقات کنید </a>

خط بالا شبیه این نشان داده خواهد شد :

farajpour.ir را ملاقات کنید

 
saeidfarajpour کاربر طلایی1
|
تعداد پست ها : 2734
|
تاریخ عضویت : آذر 1392 

با موجودیت هدف شما می توانید معرفی کنید که پرونده های پیوند داده شده کجا باز شوند. خط زیر پرونده ای را در یک پنجره مرورگر جدید باز خواهد کرد.

<a href="http://www.farajpour.ir/" target="_blank"> farajpour.ir را ملاقات کنید </a>

saeidfarajpour کاربر طلایی1
|
تعداد پست ها : 2734
|
تاریخ عضویت : آذر 1392 

موجودیت نام برای ساخت یک Anchor نام دار استفاده می شود. هنگامی که ما از یک Anchor نام دار استفاده می کنیم، می توانیم پیوندهایی بسازیم که مستقیما بتواندبه یک بخش خاص در صفحه برود. در ست به جای آنکه بگذاریم  کاربر در صفحه بگردد. در پایین طریقه نوشتن یک Anchor نام دار آمده است.

<a name="lable">متنی که نوشته می شود</a>

از موجودیت نام برای ساخت یک Anchor نام دار استفاده می شود. نام یک Anchor می تواند هر متنی که شما بخواهید باشد.خط زیر یک Anchor نام دار را معرفی می کند.

<a name="tips"> بخش اطلاعات مفید </a>

شما باید توجه کنید که یک Anchor نام دار، در یک حالت خاص نشان داده نمی شود. برای پیوند مستقیم به بخش "Tips" یک علامت "#" و نام آن Anchor را به انتهای آن url اضافه کنید:

<a href="http://www.farajpour.ir/links.html#Tips"> پرش به بخش اطلاعات مفید </a>

یک فرا پیوند به بخش نکات مفید از میان فایل "Links.html" شبیه به این خواهد بود

<a href="#Tips"> پرش به بخش نکات مفید </a>

saeidfarajpour کاربر طلایی1
|
تعداد پست ها : 2734
|
تاریخ عضویت : آذر 1392 

همیشه یک علامت "/" به منابع زیر پوشه ها اضافه کنید. اگر شما پیوندی مثل این درست کنید

href="http://www.farajpour.ir/links.html"

شما دو تقاضا برای سرور درست کرده اید ، چون سرور یک علامت "/" به انتهای آدرس اضافه کرده و یک تقاضای جدید درست می کند. مثل این:

href="http://www.farajpour.ir/links.html/"

از Anchor نام دار معمولا برای ساخت یک جدول از محتویات در ابتدای یک پرونده بزرگ استفاده می شود. به هر بخش در میان پرونده یک Anchor نام دار داده شده و پیوند به هرکدام از این Anchor ها در بالای پرونده قرار داده شده است. اگر یک مرورگر نتواند Anchor نام داری را که مشخص شده است را پیدا کند به ابتدای آن پرونده رفته و هیچ خطایی اتفاق نمی افتد.

saeidfarajpour کاربر طلایی1
|
تعداد پست ها : 2734
|
تاریخ عضویت : آذر 1392 

 

<html>
<body>
 
<a href="http://www.farajpour.ir" target="_blank">farajpour.ir</a> 
 
<p>
If you set the target attribute of a link to "_blank",
the link will open in a new window.
</p>
 
</body>
</html>
 

در این مثال، روش ساخت فراپیوندی نشان داده می شود، که در آن، کاربر پس از کلیک روی فراپیوند، صفحه فعلی را از دست نداده و پنجره جدیدی برای نمایش صفحه پیوندی، برای او، باز می شود.

 

<html>
<body>
 
<p>
<a href="#C4">See also Chapter 4.</a>
</p>
 
<h2>Chapter 1</h2>
<p>This chapter explains ba bla bla</p>
 
<h2>Chapter 2</h2>
<p>This chapter explains ba bla bla</p>
 
<h2>Chapter 3</h2>
<p>This chapter explains ba bla bla</p>
 
<h2><a name="C4">Chapter 4</a></h2>
<p>This chapter explains ba bla bla</p>
 
<h2>Chapter 5</h2>
<p>This chapter explains ba bla bla</p>
 
<h2>Chapter 6</h2>
<p>This chapter explains ba bla bla</p>
 
<h2>Chapter 7</h2>
<p>This chapter explains ba bla bla</p>
 
<h2>Chapter 8</h2>
<p>This chapter explains ba bla bla</p>
 
<h2>Chapter 9</h2>
<p>This chapter explains ba bla bla</p>
 
<h2>Chapter 10</h2>
<p>This chapter explains ba bla bla</p>
 
<h2>Chapter 11</h2>
<p>This chapter explains ba bla bla</p>
 
<h2>Chapter 12</h2>
<p>This chapter explains ba bla bla</p>
 
<h2>Chapter 13</h2>
<p>This chapter explains ba bla bla</p>
 
<h2>Chapter 14</h2>
<p>This chapter explains ba bla bla</p>
 
<h2>Chapter 15</h2>
<p>This chapter explains ba bla bla</p>
 
<h2>Chapter 16</h2>
<p>This chapter explains ba bla bla</p>
 
<h2>Chapter 17</h2>
<p>This chapter explains ba bla bla</p>
 
</body>
</html>
 
 

فرض کنید در ابتدای متن، فهرستی از محتوای متن نوشته اید. اگر بخواهیم با کلیک روی هر یک از سرفصلها، به آن سرفصل مراجعه کنیم، چگونه عمل می کنیم؟ فراپیندهای این مثال، چگونگی این کار را نشان می دهند.

 

<html>
<body>
 
<p>Locked in a frame?</p> 
 
<a href="http://www.farajpour.ir"
target="_top">Click here!</a> 
 
</body>
</html>
 
 

اگر صفحه شما، داخل یک قاب نمایش داده می شود، فرا پیوندهای آن، محتوای قاب را تغییر می دهند. برای شکستن این محدودیت و تغییر محتوای کل پنجره مانند این مثال عمل کنید.

 

<html>
 
<body>
 
<p>
This is a mail link:
<a href="mailto:someone@microsoft.com?subject=Hello%20again">
Send Mail</a>
</p>
 
<p>
<b>Note:</b> Spaces between words should be replaced by %20 to <b>ensure</b> that the browser will display your text properly.
</p>
 
</body>
</html>
 
 

در صورتیکه آدرس فراپیوند شما، از شماهای دیگری غیر از http، مانند mailto و یا ftp استفاده کند، چه می شود. این مثال نمونه ای را نمایش می دهد.

 

 

<html>
 
<body>
 
<p>
This is another mailto link:
<a href="mailto:someone@microsoft.com?cc=someoneelse@microsoft.com&bcc=andsomeoneelse2@microsoft.com&subject=Summer%20Party&body=
You%20are%20invited%20to%20a%20big%20summer%20party!">Send mail!</a>
</p>
 
<p>
<b>Note:</b> Spaces between words should be replaced by %20 to <b>ensure</b> that the browser will display your text properly.
</p>
 
</body>
</html>
 
 

در این مثال نمونه دیگری از فراپیوند نوع mailto را می بینید.

saeidfarajpour کاربر طلایی1
|
تعداد پست ها : 2734
|
تاریخ عضویت : آذر 1392 

 

برچسب ها توضیحات
<a> یک Anchor را معرفی می کند

 

saeidfarajpour کاربر طلایی1
|
تعداد پست ها : 2734
|
تاریخ عضویت : آذر 1392 

تعریف و کاربرد

برچسب a برای تعریف یک anchor به کار می رود. یک anchor به دو منظور به کار می رود:

  1. برای پیوند به یک پرونده دیگر ، با استفاده از موجودیت href
  2. برای ساخت یک نشان لای کتاب ، با استفاده از موجودیت name,id

تفاوت بین HTML و XHTML

تفاوتی ندارد.

نکات

یک صفحه پیوند داده شده بطور عادی در همان صفحه مرورگر نشان داده می شوند. مگر اینکه شما هدف دیگری را مشخص کرده باشید.

مثال

منبع خروجی
<p> پیوند به farajpour.ir
<a href="http://www.farajpour.ir" >
farajpour.ir </a > </p>
<p> باز کردن این سایت در یک صفحه جدید:
<a href="http://www.farajpour.ir" target="_blank">
farajpour.ir</a > </p>

پیوند به farajpour.ir
farajpour.ir

باز کردن این سایت در یک صفحه جدید: 
farajpour.ir

خواص انتخابی

DTD نشان می دهد که در کدام DTD این خواص مجاز هستند.S=اکید ، T=وابسته، F=frameset.

خاصیت مقدار توضیحات DTD
charset charset_encoding encoding کارکترها را در url هدف مشخص می کند. STF
coords if shape="rect" then coords="left,top,right,bottom"
if shape="circ" then coords="centerx,centery,radius"
if shape="poly" then coords="x1,y1,x2,y2,..,xn,yn"		 یک مختصات مناسب را برای ظاهر موجودیت اختصاص می دهد برای تعریف فضای یک تصویر برای نقشه های تصاویر. STF
href url url هدف پیوند. STF
hreflang language_code زبان پایه در url هدف را مشخص می کند. STF
name section_name نام های یک anchor. از این موجودیت برای ساخت نشان لای کتاب استفاده می شود.
در نسخه های آینده XHTML موجودیت name با موجودیت id جایگزین خواهد شد.		 STF
rel alternate
designates
stylesheet
start
next
prev
contents
index
glossary
copyright
chapter
section
subsection
appendix
help
bookmark		 یک رابطه بین پرونده جاری و url هدف تخصیص می دهد. STF
rev alternate
designates
stylesheet
start
next
prev
contents
index
glossary
copyright
chapter
section
subsection
appendix
help
bookmark		 یک رابطه بین پرونده جاری و url هدف تخصیص می دهد. STF
shape rect
rectangle
circ
circle
poly
polygon		 نوع فضایی را که تعریف شده برای نگاشت در فضای جاری تعیین می کند. با موجودیت coords استفاده می شود. STF
target _blank
_parent
_self
_top		 url هدف کجا باز شود؟
  • url ._blank هدف در یک پنجره جدید باز خواهد شد.
  • url ._self هدف در همان قابی باز می شود که روی پیوند آن کلیک شده.
  • url ._parent. هدف در frameset مادر باز می شود.
  • url ._topهدف در تمام طول پنجره باز می شود.
 STF

خواص استاندارد

id, class, title, style, dir, lang, xml:lang, tabindex, accesskey

خواص رویداد

onfocus, onblur, onclick, ondblclick, onmousedown, onmouseup, onmouseover, onmousemove, onmouseout, onkeypress, onkeydown, onkeyup

saeidfarajpour کاربر طلایی1
|
تعداد پست ها : 2734
|
تاریخ عضویت : آذر 1392 

به وسیله قابها شما می توانید بیش از یک صفحه وب را در یک پنجره مرورگر نشان دهید.

مثالها

<html>
 
<frameset cols="25%,50%,25%">
 
  <frame src="./content/media/tryit/frame_a.htm">
  <frame src="./content/media/tryit/frame_b.htm">
  <frame src="./content/media/tryit/frame_c.htm">
 
</frameset>
 
</html>

دراین مثال شما سه قاب عمودی با محتوای مختلف، می بینید.

 

<html>
 
<frameset rows="25%,50%,25%">
 
  <frame src="./content/media/tryit/frame_a.htm">
  <frame src="./content/media/tryit/frame_b.htm">
  <frame src="./content/media/tryit/frame_c.htm">
 
</frameset>
 
</html>

این مثال، قابهای افقی را نمایش می دهد.

saeidfarajpour کاربر طلایی1
|
تعداد پست ها : 2734
|
تاریخ عضویت : آذر 1392 

هر پرونده HTML یک قاب نامیده می شود ، و هر قاب نیز مستقل از دیگر قاب هاست. بدی استفاده از قاب ها این است که :

  • توسعه دهنده وب باید پیوسته رد بیشتر پرونده های HTML را داشته باشد.
  • چاپ کردن کل صفحه مشکل است
saeidfarajpour کاربر طلایی1
|
تعداد پست ها : 2734
|
تاریخ عضویت : آذر 1392 

 

  • برچسب <frameset> معرفی می کند که چگونه می شود پنجره را به قابها تقسیم کرد.
  • هر frameset یک مجموعه از سطرها یا ستون ها را معرفی می کند.
saeidfarajpour کاربر طلایی1
|
تعداد پست ها : 2734
|
تاریخ عضویت : آذر 1392 

برچسب <frame> پرونده HTML ای را معرفی می کند که در هر قاب قرار می گیرد.

در مثال پایین یک frameset با دو ستون داریم. ستون اول با پهنای 25% از پنجره مرورگر ست شده است.ستون دوم با پهنای 75% از پنجره مرورگر ست شده است. پرونده "HTML "frame_a.html در ستون اول قرار گرفته و پرونده "HTML "frame_b.html در ستون دوم قرار داده شدهاست.

<frameset cols="25%,75%">
    <frame src="frame_a.html">
    <frame src="frame_b.html">