حقوقی

روانشناسی

حقوقی

روانشناسی

آموزش گام به گام و تصویری HTML قسمت یازدهم (ایران گستر)

HTML

ایران گستر در صدد آن است تا با آموزش های تصویری خود, شما را با به روز ترین زبان های برنامه نویسی آشنا کند تا با یادگیری آنها بتوانبد وارد بازار کار شوید و کسب و کار خود را رونق بخشید. از این پس آموزش های HTML مارا دنبال کنید.

[caption id="attachment_3063" align="aligncenter" width="300"] HTML HTML[/caption]

تصاویر و عنصر <img>

برای نمایش تصاویر در زبان HTML از تگ معروف <img> استفاده می شود:(ایران گستر)

<!DOCTYPE html>

<html>

<body>

<h2>HTML Image</h2>

</body>

</html>

مشاهده ی خروجی در JSBin

همانطور که مشاهده می کنید نکاتی در مورد تگ <img> وجود دارد:(ایران گستر)

این تگ از دسته تگ های خالی است بنابراین هیچ محتوای متنی نمی گیرد.
این تگ، تگ های آغازین و پایانی ندارد.
این تگ تنها شامل attribute های مختلف می شود که مهم ترین آن ها src (مخفف source و به معنی «منبع») می باشد.

با این توضیحات متوجه می شویم که ساختار حداقلی تگ img به این شکل است:(ایران گستر)

1	<img src="url">

بیایید تک تک attribute های این تگ را بررسی کنیم:

ویژگی alt

در تصاویری که در دنیای وب هستند، attribute ای به نام alt وجود دارد. کار این attribute ارائه ی متنی جایگزین برای تصویر ما است تا اگر زمانی تصویر ما به کاربر نمایش داده نشود (به طور مثال تصویر به صورت اتفاقی از سرور ما حذف یا فیلتر شده باشد، آدرس دهی ما به src اشتباه باشد و …) به جای آن متنی نمایش داده شود که به کاربر بگوید این تصویر در مورد چه چیزی بوده است.(ایران گستر)

استفاده ی دیگر این تگ نیز برای افراد نابینا یا کم بینا است که از دستگاه های screen reader استفاده می کنند. screen reader ها می توانند alt را بخوانند تا فرد متوجه تصویر شود.(ایران گستر)

بر اساس چیزی که گفته شد همیشه سعی کنید alt را طوری بنویسید که تصویر را توصیف کند و از موارد دیگر پرهیز کنید.

مثال:

<!DOCTYPE html>

<html>

<body>

<h2>Alternative text</h2>

<p>The alt attribute should reflect the image content, so users who cannot see the image gets an understanding of what the image contains:</p>

</body>

</html>

مشاهده ی خروجی در JSBin

هشدار: بسیاری از attribute ها در زبان HTML دلخواه هستند اما alt اجباری است و اگر صفحه ی شما تصاویر بدون alt داشته باشد، از نظر HTML غیر معتبر تلقی شده و می تواند به رتبه بندی و سئوی شما ضربه بزند.(ایران گستر)

ویژگی های Width و Height

قبلا به صورت کوتاه اشاره کرده بودیم که می توانید از style استفاده کنید تا width (عرض یا پهنا) و height (طول یا ارتفاع) یک تصویر را مشخص کنید:(ایران گستر)

<!DOCTYPE html>

<html>

<body>

<h2>Alternative text</h2>

<p>The alt attribute should reflect the image content, so users who cannot see the image gets an understanding of what the image contains:</p>

</body>

</html>

خروجی این کد در JSBin

اما این روش آنچنان چنگی به دل نمی زند. چرا که باز هم inline (درون‌خطی) است. اگر نمی دانید استایل های inline چه هستند به دوره ی CSS ما سری بزنید.(ایران گستر)

بنابراین راه بهتر چیست؟ راه بهتر این است که اصلا از CSS استفاده نکنیم چرا که خود زبان HTML برای ما attribute هایی را به همین اسم فراهم کرده است:(ایران گستر)

1	<img src="http://s1.1zoom.me/big0/715/Blonde_girl_Snow_Hair_447971.jpg" alt="دختری با لباس های زمستانی در هوای سرد" width="500" height="350">

واحد کار با تصاویر در زبان HTML پیکسل است بنابراین ‘width = ‘500 یعنی عرض تصویر 500 پیکسل باشد.

سوال: اگر کد های CSS را به صورت inline ننویسیم چطور؟

پاسخ: تفاوت زیادی ایجاد نمی کند و بستگی به سلیقه ی شما دارد.(ایران گستر)

نکته: بهتر است همیشه برای تصاویر خود طول و عرض تعیین کنید. اگر این کار را انجام ندهید ممکن است در برخی از موارد صفحه تان کمی به هم بریزد و یا تا تصویر بارگذاری نشده باشد صفحه تان نمایش داده نشود.(ایران گستر)

آدرس دهی src

حتما متوجه شده اید که تا به حال برای src از آدرس کامل (full path) استفاده کرده ام، دلیل آن هم این است که تصویر مورد نظر خود را از سرور دیگری برداشته ام. اگر تصویر شما روی سرور خودتان وجود دارد می توانید از آدرس دهی نسبی (relative path) استفاده کنید. مثال:(ایران گستر)

1	<img src="/images/html5.gif" alt="HTML5 Icon" style="width:128px;height:128px;">

تصاویر متحرک

شما مجاز هستید در زبان HTML از تصاویر متحرک GIF نیز استفاده کنید. به طور مثال میخواهیم GIF زیر را به کد هایمان اضافه کنیم:(ایران گستر)

وقتی بعد از 100 بار ویرایش کد ها، باز هم چند تا باگ توی برنامه ات می بینی!

اضافه کردن این تصویر به یک صفحه ی HTML به سادگی کد زیر است:(ایران گستر)

<!DOCTYPE html>

<html>

<body>

<h2>Animated Images</h2>

<p>The GIF standard allows moving images.</p>

</body>

</html>

خروجی این کد در JSBin

همچنین به یاد داشته باشید که تصاویر GIF از دیگر تصاویر جدا نیستند، بنابراین می توانید به راحتی آن ها را نیز به لینک تبدیل کنید! اگر از قسمت های قبلی به یاد داشته باشید برای این کار تنها کافی است تگ img را بین تگ های a قرار دهید:

(ایران گستر)

</a>

ویژگی float

attribute ای به نام float (به معنی «شناور» یا «شناور شدن») وجود دارد که به تصویر اجازه می دهد با متن تعامل داشته و در کنار آن قرار بگیرد. در حالت عادی تصاویر نمی توانند هم سطح و کنار یک متن یا عناصر دیگر قرار بگیرند اما با استفاده از float این کار انجام شدنی است. مثال:(ایران گستر)

<!DOCTYPE html>

<html>

<body>

<h2>Floating Images</h2>

<p align ='center'><strong>کردن تصاویر به سمت راست نوشته float</strong></p>

<p>

A paragraph with a floating image. A paragraph with a floating image. A paragraph with a floating image.

</p>

<p align ='center'><strong>کردن تصاویر به سمت چپ نوشته float</strong></p>

<p>

A paragraph with a floating image. A paragraph with a floating image. A paragraph with a floating image.

</p>

</body>

</html>

خروجی این کد در JSBin

البته این نکته پیچیده تر و به مبحث CSS مربوط می شود بنابراین توضیحات بیشتر آن را به دوره ی CSS واگذار می کنیم.(ایران گستر)

عنصر <picture>

در HTML5 عنصر جدیدی به نام <picture> معرفی شده است تا به صفحات وب انعطاف پذیری بیشتری بدهد. تگ <picture> شامل چند تگ <source> می باشد که هر کدام از آن ها دارای attribute هایی هستند که به مرورگر می گویند در دستگاه های مختلف (با سایز صفحات مختلف) کدام تصویر بهتر نمایش داده می شود. به مثال زیر دقت کنید تا بهتر متوجه این موضوع شوید.(ایران گستر)

در مثال زیر میبینید که با تغییر سایز پنجره ی مرورگر و یا تغییر سایز قسمت راست (قسمت مشاهده ی خروجی در JSBin) تصاویری که برای شما نمایش داده می شوند متفاوت هستند:(ایران گستر)

<!DOCTYPE html>

<html>

<head>

</head>

<body>

<h2>The picture Element</h2>

</picture>

</body>

</html>

مشاهده ی خروجی در JSBin

صفحه ی نتایج (سمت راست) و یا پنجره ی مرورگر خود را کوچک و بزرگ کنید تا متوجه تغییر تصاویر بشوید! مرورگر با استفاده از media query ها سعی می کند بهترین تصویر را برای سایز صفحه ی شما پیدا کند. اگر دقت کنید می بینید که تگ آخر به جای آنکه از نوع <source> باشد، از نوع img است. باید بدانید که قرار دادن آخرین تصویر با تگ img الزامی است و حتما باید انجام شود؛ دلیل آن این است که اگر مرورگری بسیار قدیمی بود و از تگ <picture> پشتیبانی نمی کرد، وب سایت شما بدون تصویر نماند و همان تصویر img بارگذاری شود.(ایران گستر)

نکته: این قابلیت در مرورگر IE12 و نسخه های قبل تر و همچنین در Safari 9.0 و نسخه های قبل تر پشتیبانی نمی شود.

fateme یکشنبه 21 مهر 1398 ساعت 13:49

0 نظر

آموزش گام به گام و تصویری HTML قسمت دهم (ایران گستر)

HTML

[caption id="attachment_3063" align="aligncenter" width="300"] HTML HTML[/caption]

لینک دادن در html

در زبان HTML، لینک ها معمولا شما را به صفحات دیگری می فرستند و زمانی که موس خود را روی آن ها ببرید، نشانگر موس تبدیل به «علامت دست» می شود.(ایران گستر)

تصور اشتباهی از لینک ها بین عموم مردم جا افتاده است: لینک ها، متنی هستند! لینک ها می توانند متن، تصویر یا هر عنصر دیگر HTML باشند و تنها محدود به متن نمی شوند.(ایران گستر)

ساختار کلی لینک ها در زبان HTML از این قرار است:

1	<a href="url">link text</a>

همانطور که می بینید برای ایجاد لینک ها از تگی به نام <a> استفاده می شود. مثال زیر را ببینید:(ایران گستر)

<!DOCTYPE html>

<html>

<body>

<h2>HTML Links</h2>

<p dir='rtl' align='center'><a href="https://www.roxo.ir/series/html-tutorials/"> دوره ی آموزشی صفر تا صد HTML</a></p>

</body>

</html>

مشاهده ی خروجی در JSBin

لینکی که در مثال بالا ساختیم، شما را مستقیما به صفحه ی دوره ی آموزشی HTML در وب سایت روکسو می برد؛ attribute ای به نام href وجود دارد که آدرس لینک مورد نظرتان را باید در آن قسمت قرار دهید و متنی که بین دو تگ آغازی و پایانی <a> نوشته می شود قسمتی از متن است که کاربر مشاهده می کند.(ایران گستر)

توجه: اگر در پایان آدرس لینک ها از علامت forward slash (یعنی /) استفاده نکنید، ممکن است 2 درخواست به سمت سرور ارسال کنید! البته بسیاری از سرورها به طور خودکار علامت slash را به آخر آدرس لینک اضافه می کنند و سپس درخواست را پردازش می کنند اما کار از محکم کاری عیب نمی کند.(ایران گستر)

نکته: ما دو علامت slash داریم؛ یکی از آن ها forward slash است (این علامت -> /) و دیگری back slash است (این علامت -> \). دلیل نام گذاری آن ها به forward (جلو) و back یا backwards (عقب) از این جهت است که سر علامت اول رو به جلو بوده و سر دومی رو به عقب است!(ایران گستر)

مثال بالا از absolute path یا full path استفاده می کند که در فارسی با نام های آدرس مطلق و آدرس کامل شناخته می شوند. در این نوع آدرس دهی ها، آدرس کامل یک لینک به href داده می شود اما اگر لینک های شما به وب سایت خودتان برمی گردد، می توانید قسمت اول آدرس را به آن ندهید. مثال:(ایران گستر)

<!DOCTYPE html>

<html>

<body>

<h2>HTML Links</h2>

<p dir='rtl' align='center'><a href="series/html-tutorials/"> دوره ی آموزشی صفر تا صد HTML</a></p>

</body>

</html>

آدرس وب سایت (نام دامنه ی اصلی) به صورت خودکار به لینک اضافه خواهد شد.

ظاهر لینک ها

در تمام مرورگرها ظاهر پیش فرض لینک ها از این قرار است:(ایران گستر)

لینک هایی که تا به حال باز نشده باشند زیرخط (underline) دارند و به رنگ آبی هستند.
لینک هایی که حداقل یک بار باز شده باشند زیرخط داشته و بنفش هستند.
لینک های active (به معنی «فعال») نیز زیرخط داشته و به رنگ قرمز هستند.

لینک های active به معنی لحظه ای است که کلیک چپ را روی لینک نگه داشته اید، اما هنوز رهایش نکرده اید تا به صفحه ی مورد نظر منتقل شوید. می توانید به خروجی مثال قبلی مراجعه کنید و روی لینک مورد نظر کلیک چپ را نگه دارید تا متوجه تغییر رنگ لینک ها بشوید.(ایران گستر)

شما می توانید این ظاهر را با استفاده از CSS تغییر دهید:

<!DOCTYPE html>

<html>

<head>

<style>

a:link {

color: green;

background-color: transparent;

text-decoration: none;

}

a:visited {

color: pink;

background-color: transparent;

text-decoration: none;

}

a:hover {

color: red;

background-color: transparent;

text-decoration: underline;

}

a:active {

color: yellow;

background-color: transparent;

text-decoration: underline;

}

</style>

</head>

<body>

<h2>Link Colors</h2>

<p>You can change the default colors of links</p>

<a href="html_images.asp" target="_blank">HTML Images</a>

</body>

</html>

مشاهده ی خروجی در JSBin

اگر به خروجی این کد مشاهده کنید، متوجه می شوید تمام رفتارهای لینک را تغییر داده ایم. اگر متوجه کدهای CSS نمی شوید جای نگرانی نیست، کافی است دوره ی آموزشی CSS ما را دنبال کنید. این مثال ها تنها برای این آورده شده اند که شما با قدرت CSS و همکاری اش با HTML آشنا شوید.(ایران گستر)

حالا که بحث از قدرت CSS شد، خوب است بدانید که می توانید لینک ها را به شکل دکمه در بیاورید!.به مثال زیر نگاه کنید:(ایران گستر)

<!DOCTYPE html>

<html>

<head>

<style>

a:link, a:visited {

background-color: #f44336;

color: white;

padding: 15px 25px;

text-align: center;

text-decoration: none;

display: inline-block;

}

a:hover, a:active {

background-color: red;

}

</style>

</head>

<body>

<h2>Link Button</h2>

<p>A link styled as a button:</p>

</body>

</html>

مشاهده ی خروجی در JSBin

زمانی که به خروجی کد بالا مراجعه کنید، متوجه می شوید که با استفاده از کدهای CSS یک لینک عادی را به شکل یک دکمه در آورده ایم(ایران گستر)

نحوه ی باز شدن لینک ها

شما با استفاده از Attribute ای به نام target می توانید تعیین کنید که لینک مورد نظر چطور باز شود:(ایران گستر)

اگر به target مقدار blank_ را بدهید، کاربر با کلیک روی لینک به یک tab جدید در مرورگر منتقل شده و لینک در آن tab برایش باز می شود.
اگر به target مقدار self_ را بدهید، لینک در صفحه ی فعلی باز می شود که حالت پیش فرض مرورگر ها است.
اگر به target مقدار parent_ را بدهید، لینک در frame پدر باز می شود.
اگر به target مقدار top_ را بدهید، کاربر با کلیک روی لینک به یک پنجره ی جداگانه (window و نه tab) منتقل شده و لینک در آنجا برایش باز می شود.
اگر به target مقدار framename را بدهید، لینک در یک frame نام گذاری شده باز می شود.

دو مثال از موارد بالا میزنیم. لینک زیر در یک tab جداگانه باز خواهد شد:(ایران گستر)

<!DOCTYPE html>

<html>

<body>

<h2>The target Attribute</h2>

<a href="https://www.roxo.ir/plus/" target="_blank">انتقال به صفحه ی اصلی روکسو پلاس</a>

<p>If you set the target attribute to "_blank", the link will open in a new browser window or tab.</p>

</body>

</html>

مشاهده ی خروجی در JSBin

اما در مثال بعدی میخواهیم لینک را در همان صفحه باز کنیم:(ایران گستر)

<!DOCTYPE html>

<html>

<body>

<h2>The target Attribute</h2>

<a href="https://www.roxo.ir/plus/" target="_self">انتقال به صفحه ی اصلی روکسو پلاس</a>

<p>If you set the target attribute to "_blank", the link will open in a new browser window or tab.</p>

</body>

</html>

مشاهده ی خروجی در JSBin

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

سوال: frame چیست؟ مقدار top_ که به آن مربوط می شود چه کاری انجام می دهد؟(ایران گستر)

پاسخ: هنوز به مبحث frame ها در HTML نرسیده ایم اما اگر بخواهم به صورت کوتاه توضیح دهم همان JSBin را برایتان مثال می زنم. اگر به خروجی مثال قبل سر زده باشید، متوجه می شوید صفحه ی ما به 2 قسمت تقسیم شده است؛ قسمت سمت چپ حاوی کد ها است و قسمت سمت راست حاوی خروجی آن ها. به هر کدام از این قسمت ها یک frame (به معنی «قاب») می گویند.

زمانی که روی لینکِ موجود در سمت راست کلیک کنید می بینید که سایت در همان frame سمت راست باز می شود. اگر کد قبل را ویرایش کنیم و به target مقدارِ top_ را بدهیم، صفحه ی JSBin کاملا از بین می رود و لینک جدید تمام صفحه را می گیرد.(ایران گستر)

تصاویر لینک دار

همانطور که گفتیم لینک ها به متن محدود نیستند و می توانند از نوع تصویر باشند. به مثال زیر توجه کنید:(ایران گستر)

<!DOCTYPE html>

<html>

<body>

<h2>Image Links</h2>

<p>The image is a link. You can click on it.</p>

</a>

<p dir='rtl'>ما از "border:0" استفاده کرده ایم تا جلوی اینترنت اکسپلورر نسخه ی 9 و نسخه های قدیمی ترش را بگیریم تا دور تصویر ما دورگیری نکنند.

</p>

</body>

</html>

مشاهده ی خروجی در JSBin

اگر در خروجی، روی لوگوی روکسو پلاس کلیک کنید، به صفحه ی روکسو پلاس منتقل خواهید شد؛ تنها کاری که کردیم قرار دادن تصویر (تگ <img>) درون تگ <a> بود.(ایران گستر)

نکته: شما می توانید به لینک های خود، attribute ای به نام title بدهید. هر مقداری به title بدهید به عنوان توضیحات اضافی آن لینک محسوب می شود و اگر کاربر موس خود را روی لینک نگه دارد، این توضیحات نمایان می شوند.(ایران گستر)

مثال:

<!DOCTYPE html>

<html>

<body>

<h2>Image Links</h2>

<p>The image is a link. You can click on it.</p>

</a>

</p>

</body>

</html>

مشاهده ی خروجی در JSBin

در این مثال باید موس خود را روی لوگوی روکسو پلاس نگه دارید تا توضیحات title نمایش داده شود.

ایجاد bookmark ها

لینک ها همیشه شما را به صفحات دیگر منتقل نمی کنند. برخی اوقات می توانید از لینک ها استفاده کنید تا کاربر را به قسمت های مختلف یک صفحه منتقل کنند. معمولا این کار را برای صفحات بسیار طولانی انجام می دهند. یک مثال میزنم:(ایران گستر)

ابتدا به عنصر دلخواه خود attribute ای به نام id میدهیم:

1	<h2 id="C4">Chapter 4</h2>

سپس لینکی در همان صفحه ایجاد می کنیم و به href آن مقدار id عنصر اولیه را به همراه علامت # می دهیم:

1	<a href="#C4">Jump to Chapter 4</a>

حالا اگر روی آن لینک کلیک کنیم به قسمت مورد نظر (در این مثال همان chapter 4) منتقل می شویم:(ایران گستر)

<!DOCTYPE html>

<html>

<body>

<p><a href="#C4">Jump to Chapter 4</a></p>

<h2>Chapter 1</h2>