آموزش css

کاراکترهای رزرو شده در HTML باید با character entity ها جایگزین شوند.

HTML Entities

Wiki

بعضی کاراکترها در HTML رزرو شده هستند.

استفاده از علامت کوچکتر(<) و بزرگتر(>) در متن به دلیل اینکه مرورگر آنها را با تگ ها در هم می آمیزد امکان پذیر نیست.

برای اینکه بتوان کاراکترهای رزرو شده را نمایش داد، باید از character entity ها در کد منبع HTML استفاده کنیم.

یک character entity به این شکل می باشد:

برای نمایش علامت کوچکتر باید بنویسیم:  lt& یا 60#& (که lt مخفف less than است)

نکته: مزیت استفاده از entity name به جای entity number این است که به یاد آوردن name راحت تر است. اما عیب آن این است که مرورگرها ممکن است همه entity name ها را پشتیبانی نکنند. (پشتیبانی از entity number ها خیلی بهتر است.)

فاصله (Non-breaking Space)

Wiki

یک character entity رایج در HTML کاراکتر non-breaking space (یا nbsp&) می باشد.

مرورگرها همیشه فاصله ها (space) را کوتاه می کنند. اگر 10 فاصله پشت سر هم در متن خود تایپ کنید، مرورگر 9 تای آن ها را برمی دارد. برای اینکه فاصله ها را به متن خود اضافه کنید، می توانید از کاراکتر nbsp& استفاده نمایید.

مثال

Wiki

character entity ها در HTML را تجربه کنید: Try it yourself
در مثال بالا، کاراکتر X را با یک نام یا عدد (عدد+#) جایگزین نمایید.

character entity های مفید در HTML

Wiki

نکته: نام Entityها حساس به کوچکی و بزرگی حروف هستند.

لیست های رایج در HTML لیست های ترتیبی و غیر ترتیبی هستند.

مثال - خودتان امتحان کنید

Wiki

Unordered list
نحوه ایجاد لیست نامرتب در سند HTML.

Ordered list
نحوه ایجاد لیست مرتب در HTML.

(شما می توانید مثال های بیشتر را در پایین این صفحه مشاهده کنید.)

لیستهای نامرتب (Unorder List)

Wiki

یک لیست غیر ترتیبی یا نامرتب با تگ <ul> شروع می شود. آیتم های هر لیست با تگ <li> شروع می شوند. (List Item)

آیتم های یک لیست به وسیله گلوله نشانه گذاری می شوند. (دایره های کوچک سیاه رنگ)

نحوه نمایش کد بالا در مرورگر:

• Coffee
• Milk

لیست های مرتب (Order List)

Wiki

یک لیست مرتب یا ترتیبی با تگ <ol> شروع می شود. آیتم های هر لیست با تگ <li> شروع می شوند.

 آیتم های یک لیست به وسیله اعداد نشانه گذاری می شوند.

نحوه نمایش کد بالا در مرورگر:

1. Coffee
2. Milk

لیست های تعریفی (Description List)

Wiki

یک لیست تعریفی لیستی از آیتم هاست که هر آیتم توضیحی دارد.

لیست های تعریفی با تگ <dl> نوشته می شوند.

تگ <dl> به همراه تگ <dt> (که آیتم های موجود در لیست را مشخص می کند) و تگ <dd> ( که آیتم های موجود در لیست را توضیح می دهد) استفاده می شود.

نحوه نمایش کد بالا در مرورگر:

Coffee

- black hot drink

Milk

- white cold drink

نکات مهم و اساسی

Wiki

نکته: درون آیتم های یک لیست، می توانید تصویر، لینک، تگ </ br>، لیستی دیگر و غیره را قرار دهید.

مثال بیشتر - خودتان امتحان کنید

Different types of ordered lists
نمایش انواع دیگر لیست های ترتیبی.

Different types of unordered lists
نمایش انواع دیگر لیست های غیر ترتیبی.

Nested list
نمایش لیست های تو در تو.

Nested list 2
نمایش لیست های تو در توی پیچیده تر.

Description list
نمایش لیست تعریفی.

تگ های لیست در HTML

لینک ها در HTML

Wiki

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

مثال - خودتان امتحان کنید

HTML links
نحوه ایجاد لینک ها در سند HTML

می توانید مثال های بیشتری را در پایین این صفحه ببیند.

Hyperlink (یا Link ها) در HTML

Wiki

یک hyperlink یا link یک کلمه یا گروهی از کلمات یا عکس می باشد که شما می توانید با کلیک کردن روی آن به سند جدید یا بخشی از همان سند بروید.

هنگامی که شما موس را روی یک لینک در یک صفحه وب می برید، نشانگر به شکل یک دست کوچک در می آید.

لینک ها در HTML با تگ <a> مشخص می شوند.

تگ <a> به دو روش می تواند استفاده شود:

1. برای ایجاد لینک به سندی دیگر، با استفاده از خصوصیت href
2. برای ایجاد یک پیوند به دورن همان صفحه (bookmark)، با استفاده از خصوصیت name

نحوه نوشتن لینک در HTML:

خصوصیت href مقصد یک لینک را مشخص می کند.

مثال:

که به این صورت نمایش داده می شود: Visit beyamooz 

با کلیک روی لینک بالا، کاربر به صفحه اصلی سایت beyamooz ارجاع داده می شود.

نکته: Link text الزاما یک متن نیست. می تواند یک عکس یا هر عنصر دیگر HTML باشد.

خصوصیت target

Wiki

خصوصیت target مشخص می کند که صفحه لینک شده، چگونه باز شود.

مثال زیر، صفحه لینک شده را در یک پنجره جدید یا در یک تب جدید باز می کند:

خصوصیت name یا (id)

Wiki

با تنظیم یک نام منحصر به فرد برای یک عنصر با استفاده از خصوصیت name یا id، می توانید در CSS یا JavaScript به آن دسترسی داشته باشید.

البته از خصوصیت name یا id برای ایجاد یک bookmark یا پیوند به درون همان صفحه نیز می توان استفاده نمود.

نکته: استاندارد HTML5 خصوصیت id را بجای name برای تعیین اسم برای یک محل مشخص پیشنهاد می دهد. خصوصیت id برای HTML4 در تمام مرورگرهای امروزی نیز عمل می کند.

مثال:تنظیم خصوصیت Name برای تگ <a> در سند HTML:

ایجاد یک لینک به محل مشخصی درون صفحه جاری:

یا، ایجاد یک لینک به محل مشخصی در صفحه ای دیگر:

نکات اساسی و مفید

Wiki

نکته: اگر می خواهید یک فولدر در یک سایت را آدرس دهی نمایید، همیشه یک slash به انتهای آن اضافه کنید. مانند زیر:

http://beyamooz.com/html/

در غیر اینصورت، دو درخواست به سرور ارسال کرده اید، سرور ابتدا یک slash به انتهای آدرس اضافه می کند و سپس آدرس را بارگذاری می کند.

مثال - خودتان امتحان کنید

Wiki

An image as a link
نحوه ایجاد یک عکس به عنوان یک لینک

Link to a location on the same page
نحوه ایجاد یک پیوند درون همان صفحه. (این روش برای سندهایی که فهرست بندی شده اند کاربرد زیادی دارد)

Break out of a frame
 چگونه از یک فریم بیرون بیاییم. (اگر سایت شما در یک فریم محصور است)

Create a mailto link 1
 چگونه با یک لینک، متنی را ایمیل کنیم. (تنها زمانی کار می کند که نرم افزار مدیریت ایمیل مثل outlook نصب شده باشد)

Create a mailto link 2
مثالی دیگر از ارسال متن توسط لینک

تگ های لینک در HTML:

آموزش HTML (اچ تی ام ال) - مقدمه HTML (اچ تی ام ال)

Wiki

با استفاده از این آموزش، می توانید وب سایتتان را خودتان طراحی کنید.

در این خود آموز، مطالبی را در مورد HTML (اچ تی ام ال) آموزش خواهید دید.

یاد گیری HTML (اچ تی ام ال) کار آسانی است و از آموزش آن لذت خواهید برد.

آموزش HTML (اچ تی ام ال) همراه با صدها مثال

Wiki

در این خودآموز، برای آموزش HTML از صدها مثال استفاده شده است.

به کمک ویرایشگری که در اختیارتان است، می توانید سند HTML را ویرایش کنید و با کلیک روی یک دکمه، نتیجه را مشاهده کنید.

برای مشاهده نتیجه کد بالا روی دکمه "خودتان امتحان کنید" کلیک کنید.

HTML چیست؟

Wiki

HTML یک زبان برای توصیف صفحات وب است.

• HTML بترتیب سرنام واژگان Hyper Text Markup Language بحساب می آید. (زبان علامت گذاری ابر متن)
• HTML یک زبان برنامه نویسی نیست بلکه زبان علامت گذاری است.
• یک زبان علامت گذاری مجموعه ای از تگ ها می باشد.
• HTML از تگ ها برای توصیف صفحات وب استفاده می کند.

آموزش تگ های HTML

Wiki

• تگ های HTML، کلید واژه هایی هستند که داخل علامت کوچکتر بزرگتر هستند. مثل <HTML>
• تگ های HTML معمولا به صورت جفت می آیند.
• تگ اول همان تگ شروع می باشد و تگ دوم نیز همان تگ پایان است.
• تگ های شروع و پایان، تگ باز و بسته نیز نامیده می شود.

سند HTML = صفحات وب

Wiki

• سندهای HTML صفحات وب را توصیف می کنند.
• سندهای HTML شامل تگ های HTML (اچ تی ام ال) و متن ساده می باشد.
• سندهای HTML صفحات وب نیز نامیده می شود.

هدف یک مرورگر وب (مانند internet explorer یا firefox) این است که سندهای HTML را خوانده و آنها را به صورت صفحات وب نمایش دهد. مرورگر، تگ های HTML را نمایش نمی دهد، اما از تگ های HTML استفاده می کند تا محتوای صفحه را تفسیر کند.

مثال:

توضیح مثال:

• متن بین <html> و <html/> صفحه وب را توضیح می دهد.
• متن بین <body> و <body/> محتوای قابل نمایش صفحه است.
• متن بین <h1> و <h1/> برای نمایش یک عنوان استفاده می شود.
• متن بین <p> و <p/> برای نمایش یک پاراگراف استفاده می شود.