تصاویر html
مثال ها
Norwegian Mountain Trip
حالا خودتان امتحان کنید - مثال ها
چگونگی اضافه کردن تصاویر به سند HTML
این مثال چگونگی نمایش تصویر را نشان می دهد.
چگونگی اضافه کردن تصاویر از محلی دیگر
در صورتیکه تصویر مورد نظر در محلی دیگر باشد ، می توانید برای نمایش آن، از این
مثال کمک بگیرید.
(مثالهای بیشتر، در انتهای این صفحه آمده است)
تگ <img> و صفت src
در HTML تصاویر با تگ <img> معرفی می شوند ، تگ <img> خالی است بدین معنا که فقط
شامل صفت ها است و تگ پایانی ندارد ، برای نمایش یک تصویر در یک صفحه ، شما احتیاج دارید
که از صفت Src استفاده کنید ، Src مخفف source (منبع) است
محتوا ( ارزش ) صفت src آدرس تصویری است که شما می خواهید در صفحتان نمایش دهید
نحوه معرفی یک تصویر
<" img src="url" alt="some_text/>
url به محلی اشاره می کند که تصویر در آنجا قرار دارد . تصویری که "boat.gif" نامیده شده در
دایرکتوری "images" در "www.w3cschools.ir" دارای این url است:
http://www.w3cschools.ir/images/boat.gif
مرورگر تصویر را جایی قرار می دهد که تگ تصویر پرونده در آنجا قرار گرفته است ، اگر شما تگ
تصویر را بین دو پاراگراف قرار دهید ، مرورگر ابتدا پاراگراف اول ، سپس تصویر و سپس پاراگراف
دوم را نشان می دهد.
صفت Alt
صفت Alt برای معرفی متن جایگزین به جای یک تصویر استفاده می شود ، محتوای(value) صفت
Alt یک متن توصیفی است:
<"img src="boat.gif" alt="Big Boat>
در واقع صفت alt اطلاعات دیگری را برای تصویر شامل می شود در صورتی که کاربر به دلایلی
نتواند تصویر را مشاهده کند
( به دلیل کندی اتصال ، خطا در صفت src ، یا در صورتی که کاربر از یک صفحه خوان استفاده کند)
توضیح تکمیلی : اگر مرورگر نتواند تصویری را بارگیری نماید ، صفت alt به خواننده می گوید که
تصویر را در صفحه از دست داده است ، سپس مرورگر متن جایگزین را بجای تصویر نشان خواهد
داد
مشخص کردن عرض و ارتفاع یک تصویر
صفت های height و width برای مشخص کردن ارتفاع و عرض یک تصویر مورد استفاده
قرار می گیرند به طور پیش فرض مقدار صفت به صورت پیکسل مشخص می شود
<img src="pulpit.jpg" alt="Pulpit rock" width="304" height="228">
نکته : این یک تمرین خوب برای مشخص کردن هر دو صفت width و height یک تصویر
است اگر این صفت ها مشخص شوند هنگام بارگذاری صفحه ، فضای لازم برای تصویر
رزرو شده است ، هنگامی که تصویر بارگذاری می شود طرح بندی صفحه در طول
بارگذاری تغییر می کند
نکات پایه ای - اطلاعات مفید
نکته: اگر یک فایل HTML حاوی 10 تصویر باشد ، برای نمایش کامل صفحه به 11 فایل احتیاج
است. بارگیری تصاویر وقت گیر است ، بنابراین بهترین توصیه من این است که از تصاویر به دقت
استفاده کنید
نکته: هنگامی که صفحه وب بارگیری می شود ، این مرورگر است که در آن لحظه تصاویر را از وب
سرور می گیرد و آن را در صفحه اضافه می کند بنابراین مطمئن شوید که تصاویر دقیقا در همان
نقطه در ارتباط با صفحه وب باقی بمانند در غیر این صورت بازدید کنندگان شما آیکون لینک شکسته
را مشاهده می کنند
آیکون لینک شکسته نمایش خواهد داده شد در صورتی که مرورگر ، تصویر را نتواند پیدا کند
مثال های بیشتر
چگونگی چینش یک تصویر در داخل یک متن
به کمک این مثال می توان محل نمایش عکس، نسبت به متنی که عکس درون آن قرار
دارد ، را تعیین کرد
تعیین محل نمایش یک تصویر در پاراگراف
می خواهید تصویری را درون یک پاراگراف نمایش دهید برای تعیین محل آن نسبت به
متن پاراگراف ، به این مثال توجه کنید
به کمک این مثال می توان محل نمایش تصویر ، نسبت به متنی که تصویر درون آن قرار
دارد ، را تعیین کرد
چگونگی ایجاد یک نقشه تصویری با قابلیت کلیک بر ناحیه ها ، هر ناحیه یک لینک است
برچسب های تصویر
| برچسب | توضیحات |
|---|---|
| <img> | یک تصویر را معرفی می کند |
| <map> | یک نقشه تصویری را معرفی می کند |
| <area> | داخل یک نقشه تصویری یک ناحیه قابل کلیک را تعریف می کند |
برگه های سبک آبشاری html
CSS مخفف Cascading Style Sheets به معنای برگه های سبک آبشاری ، برای استایل
دادن به عناصر HTML استفاده می شود
Look! Styles and colors
This text is in Verdana and red
This text is in Times and blue
This text is 30 pixels high
مثال ها - خودتان امتحان کنید
چگونگی اضافه کردن استایل ها در داخل تگ <head>
چگونگی ایجاد لینکی که زیرخطدار نیست با صفت style
چگونگی استفاده از تگ <link> برای لینک به یک برگه سبک خارجی
استایل دادن به HTML با CSS
CSS به همراه HTML 4 برای فراهم آوردن یک راه بهتر برای استایل دادن به عناصر
HTML معرفی شد CSS به روش های زیر می تواند به HTML اضافه شود
- خطی (inline) : با استفاده از صفت style در عناصر HTML
- داخلی (internal) : با استفاده از عنصر style در بخش <head>
- خارجی (external) : با استفاده از یک فایل خارجی CSS
راه ترجیح داده شده برای اضافه کردن CSS به HTML این است که قواعد CSS را در یک
فایل جداگانه CSS قرار دهید هر چند ما در این خودآموز HTML به شما CSS را با استفاده
از صفت style معرفی می کنیم همچنین شما به سادگی می توانید کد خود را ویرایش
کنید شما می توانید همه چیز را در رابطه با CSS در خودآموز CSS ما فرابگیرید
استایل های خطی
یک استایل خطی می تواند استفاده شود اگر یک استایل منحصر به فرد به یک عنصر
اعمال شود برای استفاده از استایل های خطی ، از صفت style در تگ مربوطه استفاده
کنید صفت style می تواند شامل هر خاصیتی (property) باشد مثال زیر چگونگی تغییر
رنگ متن و حاشیه چپ پاراگراف را نشان می دهد
<p style="color:blue;margin-left:20px;">This is a paragraph.</p>
برای فراگیری بیشتر در رابطه با برگه های سبک از آموزش CSS ما بازدید فرمایید
مثالی از استایل - رنگ پس زمینه (background color)
خاصیت background-color رنگ پس زمینه برای یک عنصر را تعریف می کند
به جای صفت bgcolor از صفت style استفاده کنید چون صفت bgcolor منسوخ شده است
مثالی از استایل - Font , color , size
font-size و color و font-family ، به ترتیب اندازه و رنگ و فونت متن را مشخص می کند
به جای تگ <font> از صفت style استفاده کنید چون تگ <font> منسوخ شده است
مثالی از استایل - چیدمان متن
text-align چیدمان افقی متن را مشخص می کند
به جای تگ center از صفت style استفاده کنید چون تگ center منسوخ شده است
برگه سبک داخلی
یک برگه سبک داخلی می تواند استفاده بشود اگر سند تنها یک استایل یکتا داشته
باشد استایل های داخلی در بخش head ِ یک صفحه HTML با استفاده از تگ <style>
تعریف می شوند مانند زیر:
<head>
<style type="text/css">
body {background-color:yellow;}
p {color:blue;}
</style>
</head>
برگه سبک خارجی
یک برگه سبک خارجی ایده آل است وقتی که به بسیاری از صفحات استایل اعمال می
شود با یک برگه سبک خارجی شما می توانید ظاهر تمام وب سایت را با تغییر یک فایل
تغییر دهید هر صفحه باید به برگه سبک با استفاده از تگ <link> لینک شود تگ <link>
در بخش head باید قرار گیرد
<head>
<link rel="stylesheet" type="text/css" href="mystyle.css">
</head>
تگ های استایل HTML
یک استایل را برای یک سند تعریف می کند <style> ارتباط بین یک سند و یک منبع خارجی را تعریف می کند <link>
تگ ها و صفت های از بین رفته ( دیگر استاندارد نیست)
در HTML 4 بعضی از تگ ها که برای استایل دادن به سند استفاده می شند از بین رفتند
( دیگر استاندارد نیستند) به این معنی که آن ها دیگر در نسخه های بعدی HTML و XHTML
پشتیبانی نمی شوند
پیام روشن است : از تگ ها و صفت های از بین رفته اجتناب کنید
از این تگ ها و صفت ها باید اجتناب کنید
به جای همه تگ ها و صفت های بالا از استایل ها استفاده کنید
ازاستفاده از عناصر <font> و <center> و <strike> و صفت های bgcolor و color
اجتناب کنید
HTML head
مثال ها - خودتان امتحان کنید
<title> - یک عنوان برای یک سند HTML تعریف می کند
از تگ <title> برای یک عنوان برای یک سند استفاده کنید
<base> - یک URL و target پیش فرض برای تمامی لینک ها تعریف می کند
از تگ <base> برای مشخص کردن یک URL و یک target پیش فرض برای تمامی لینک
های صفحه استفاده کند
<meta> - متا دیتا برای یک سند HTML فراهم می کند
از عنصر <meta> برای مشخص کردن یک توصیف (description) ، کلمه کلیدی
(keywords) ، نام نویسنده (author) و مجموعه کاراکتر (character set) یک سند
استفاده کن
عنصر <head>
عنصر head یک ظرف (container) برای تمام عناصر head است ، عناصر داخل
<head> می تواند شامل script ها ، متوجه ساختن مرورگرها از مکانی که برگه های
سبک را پیدا کند ، فراهم آوردن اطلاعات متا ، و ...
تگ های رو به رو می تواند در بخش head اضافه شود :
<link>، <meta> ، <style> ، <title> ، <noscript> ، <script> و <base>
عنصر <title>
تگ <title> عنوان سند را معرفی می کند
عنصر <title> در تمام اسناد HTML/XHTML احتایج است
عنصر <title> :
- یک عنوان را در نوار ابزار مرورگر معرفی می کند
- یک عنوان را برای وقتی که یک صفحه به علاقه مندی ها اضافه می شود فراهم می کند
- عنوان یک صفحه را در نتایج موتورهای جستجو نمایش می دهد
نمونه ای از یک سند HTML:
<html>
<head>
<title>Title of the document</title>
</head>
<body>
The content of the document.....
</body>
</html>
عنصر <base>
تگ <base> یک آدرس پیش فرض یا یک target پیش فرض برای تمامی لینک های
صفحه مشخص می کند
<head>
<base href="http://www.w3schools.com/images/"><base target="_blank">
</head>
عنصر <link>
تگ <link> یک ارتباط بین یک سند و یک منبع خارجی را تعریف می کند
تگ <link> بیشترین استفاده را برای اتصال به برگه های سبک دارد
<link rel="stylesheet" type="text/css" href="mystyle.css">
</head>
عنصر <style>
تگ <style> برای تعریف اطلاعات سبک یک سند HTML استفاده می شود
در داخل عنصر <style> شما مشخص می کنید که چگونه عناصر HTML باید در مرورگر
ارائه شوند
<head>
<style type="text/css">
body {background-color:yellow}
p {color:blue}
</style>
</head>
عنصر <meta>
متادیتا (metadata) اطلاعاتی درباره داده است
تگ <meta> متادیتایی را در رابطه با سند HTML فراهم می کند ، متادیتا بر روی صفحه
نمایش داده نمی شود اما دستوراتش تجزیه و تحلیل می شود
عناصر متا به طور معمول برای مشخص کردن توصیف صفحه ، کلمات کلیدی ، نام
نویسنده سند، تاریخ و زمان آخرین اصلاح و دیگر متادیتا استفاده می شود
متادیتا می تواند توسط مرورگرها ( چگونگی نمایش محتوا یا بارگذاری مجدد صفحه ) ،
موتورهای جستجو (کلمات کلیدی) یا دیگر سرویس های وب استفاده شود
تگ <meta> همیشه در داخل عنصر <head> قرار می گیرد
مثال ها - تگ <meta>
کلمات کلیدی برای موتورهای جستجو تعریف می کند
<meta name="keywords" content="HTML, CSS, XML, XHTML, JavaScript">
توصیفی از صفحه وب شما را معرفی می کند
<meta name="description" content="Free Web tutorials on HTML and CSS">
نام نویسنده صفحه را معرفی می کند
<meta name="author" content="Hege Refsnes">
سند را برای هر 30 ثانیه رفرش می کند
<meta http-equiv="refresh" content="30">
عنصر <script>
تگ <script> برای تعریف اسکریپت سمت کلاینت تعریف می شود مانند جاوااسکریپت
عنصر <script> در فصل های بعدی توضیح داده خواهد شد
عناصر head
| Description | Tag |
| اطلاعاتی را درباره سند معرفی می کند | <head> |
| عنوان سند را معرفی می کند | <title> |
| یک آدرس پیش فرض یا یک target پیش فرض برای تمامی لینک های صفحه معرفی می کند | <base> |
| ارتباط بین یک سند و یک منبع خارجی را معرفی می کند | <link> |
| متادیتا در رابطه با سند HTML معرفی می کند | <meta> |
| یک اسکریپت سمت کلاینت معرفی می کند | <script> |
| اطلاعات استایل را برای یک سند معرفی می کند | <style> |
لینک های html
لینک ها تقریبا در تمام صفحات وب هستند ، لینک ها به کاربران اجازه می دهند تا با
کلیک کردن بر روی آن ها از یک صفحه به صفحه دیگر بروند
خودتان امتحان کنید
چگونگی ایجاد لینک در اسناد HTML
(شما می توانید مثال های بیشتری را در پایین این صفحه پیدا کنید)
فرا لینک های HTML (لینک ها)
تگ <a> یک فرالینک را تعریف می کند
لینک یک کلمه است ، گروهی از کلمات ، یا تصویری که شما می توانید با کلیک کردن بر
روی آن به یک سند جدید و یا بخش جدیدی از سند جاری پرش کنید
وقتی شما مکان نما را بر روی یک لینک در یک صفحه وب حرکت می دهید،پیکان(نشانه)
به یک دست کوچک تبدیل می شود
لینک ها در HTML با استفاده از تگ <a> مشخص شده اند
مهمترین صفت عنصر <a> صفت href می باشد که مقصد لینک را مشخص می کند
به طور پیش فرض لینک ها در تمامی مرورگرها به شکل های زیر پدیدار می شوند
- لینک های بازدید نشده که زیرخط دار و آبی رنگ هستند
- لینک های بازدید شده که زیرخط دار و بنفش رنگ هستند
- لینک های فعال که زیرخط دار و قرمز رنگ هستند
ساختار لینک HTML
کد HTML برای یک لینک ساده مثل این به نظر می رسد:
<a href="url">Link text</a>
صفت href ، مقصد لینک را مشخص می کند
مثال
<a href="http://www.w3cschools.ir/">Visit W3Schools</a>
مانند این نمایش داده خواهد شد visiT w3cschools.ir
با کلیک بر روی این پیوند کاربر به صفحه اصلی w3schools فرستاده می شود
نکته: متن پیوند ، حتما لازم نیست متن باشد بلکه می تواند تصویر و یا هر عنصر دیگر
HTML باشد
لینک های HTML - صفت target
در واقع صفت target جاییکه سند لینک شده باز شود را مشخص می کند
مثال زیر سند لینک شده را در پنجره جدید مرورگر باز می کند
a href="http://www.w3schools.com/" target="_blank">Visit W3Schools>
</a>
لینک های HTML - صفت id
صفت id می تواند برای ایجاد یک نشانه (bookmark) در داخل سند HTML استفاده شود
نکته: نشانه ها نمایش داده نمی شوند و برای خواننده غیر قابل دیدن هستند
مثال:
در زیر طریقه نوشتن یک anchor با یک id آمده است.
<a id="tips">Useful Tips Section</a>
در داخل همان سند یک لینک به "Useful Tips Section" ایجاد می کند
<a href="#tips">Visit the Useful Tips Section</a>
یا از یک صفحه دیگر یک لینک به "Useful Tips Section" ایجاد می کند
<"a href="http://www.w3schools.com/html_links.htm#tips>
نکات پایه ای - اطلاعات مفیدهمیشه یک علامت "/" به منابع زیر پوشه ها اضافه کنید. اگر شما پیوندی مثل این
درست کنید
href="http://www.w3cschools.ir/links.html"
شما دو تقاضا برای سرور درست کرده اید ، چون سرور یک علامت "/" به انتهای آدرس
اضافه کرده و یک تقاضای جدید درست می کند. مثل این:
href="http://www.w3cschools.ir/links.html/"
از Anchor نام دار معمولا برای ساخت یک جدول از محتویات در ابتدای یک پرونده بزرگ
استفاده می شود. به هر بخش در میان پرونده یک Anchor نام دار داده شده و پیوند به
هرکدام از این Anchor ها در بالای پرونده قرار داده شده است. اگر یک مرورگر نتواند
Anchor نام داری را که مشخص شده است را پیدا کند به ابتدای آن پرونده رفته و هیچ
خطایی اتفاق نمی افتد.
چگونگی استفاده از تصویر به عنوان پیوند
اگر می خواهید تصویری را لینک کنید این مثال چگونگی این کار را نمایش می دهد
اگر بخواهیم با کلیک روی هر یک از سرفصلها، به آن سرفصل مراجعه کنیم، چگونه
عمل می کنیم؟
پیوندهای این مثال، چگونگی این کار را نشان می دهند.
اگر صفحه شما، داخل یک قاب نمایش داده می شود ، پیوندهای آن، محتوای قاب را
تغییر می دهند ، برای شکستن این محدودیت و تغییر محتوای کل پنجره مانند این مثال
عمل کنید.
در صورتیکه آدرس پیوند شما، از شماهای دیگری غیر از http ، مانند mailto و یا ftp
استفاده کند، چه می شود. این مثال نمونه ای را نمایش می دهد.
در این مثال نمونه دیگری از پیوند نوع mailto را می بینید.
تگ لینک HTML
| برچسب | توضیحات |
|---|---|
| <a> | یک فرالینک را معرفی می کند |
قالب بندی متن html
This text is big
This text is italic
This is computer outputThis is subscript and superscript
قالب بندی متن HTML
HTML از تگ هایی مانند <b> و <i> برای نشان دادن قالب بندی متن استفاده می کند مانند متن
bold یا italic این تگ های HTML تگ های قالب بندی متن نامیده می شوند
( برای مرجع کامل به پایین صفحه نگاه کنید )
اغلب تگ <strong> به عنوان تگ <b> و تگ <em> به عنوان تگ <i> نمایش داده می شود
هرچند ، تفاوت در معنی این تگ ها ( برچسب ها ) وجود دارد : تگ <b> یا تگ <i> فقط متن با
حروف درشت ( bold ) یا کج ( italic ) را مشخص می کند
تگ <strong> یا تگ <em> بدان معنی است که وقتی شما می خواهید متنی را ارائه دهید کاربر
آن متن را مهم درک کند ، امروزه تمام مرورگرهای بزرگ <strong> را به عنوان
حروف ضخیم ( bold) و <em> را به عنوان حروف کج ( italic ) نمایش می دهند
هر چند اگر یک روز مرورگر بخواهد با <strong> متن هایلات ایجاد کند در آینده ممکن است
به عنوان مثال حروف شکسته باشد نه ضخیم
خودتان تمرین کنید - مثال هاچگونگی کنترل خط های شکسته و فاصله ها با استفاده از تگ <pre>
چگونگی نمایش تگ های خروجی
چگونگی تعریف اطلاعات تماس برای نویسنده یا صاحب سند HTML
چگونگی رفتار با اختصارات و کلمات اختصاری
چگونگی تغییر جهت متن
چگونگی رفتار با نقل قول های طولانی و کوتاه
چگونگی حذف و درج متن
برچسب های قالب بندی متن HTML
| برچسب | توضیح |
|---|---|
| <b> | متن ضخیم را مشخص می کند |
| <big> | متن بزرگ را مشخص می کند |
| <em> | متن تاکیدی را مشخص می کند |
| <i> | متن کج را مشخص می کند |
| <small> | متن کوچک را مشخص می کند |
| <strong> | متن با حروف درشت را مشخص می کند |
| <sub> | متن در زیر یک خط را مشخص می کند |
| <sup> | متن در پایین یک خط را مشخص می کند |
| <ins> | یک متن وارد شده را مشخص می کند |
| <del> | یک متن حذف شده را مشخص می کند |
برچسب های خروجی کامپیوتر HTML
| برچسب | توضیح |
|---|---|
| <code> | کد زبان های برنامه نویسی را مشخص می کند |
| <kbd> | این هم نمایانگر کلمه keyboard است که حروف را به صورت ساده و تایپی نشان می دهد |
| <samp> | |
| <tt> | نوشته بین آن ها به صورت حروف تایپی ظاهر می شود و خاصیت آن در این است که کلیه حروف به یک اندازه جا اشغال می کنند |
| <var> | یک متغیر را تعریف می کند |
| <pre> | متن در تگ pre در عرض ثابت نمایش داده می شود و فاصله ها و خط های شکسته حفظ می شود |
نقل قول ها ، تعریف برچسب ها
| برچسب | توضیح |
|---|---|
| <abbr> | کلمات مختصر شده را تعیین می کند |
| <acronym> | کلمات مخفف شده را تعیین می کند |
| <address> | اطلاعات تماس برای نویسنده یا صاحب سند را مشخص می کند |
| <bdo> | جهت متن را مشخص می کند |
| <blockquote> | نقل قول بلند را مشخص می کند |
| <q> | نقل قول کوتاه را مشخص می کند |
| <cite> | نقل قول را مشخص می کند |
| <dfn> | توضیح یک اصطلاح |