حقوقی

روانشناسی

حقوقی

روانشناسی

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

HTML

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

[caption id="attachment_3063" align="aligncenter" width="255"] HTML

HTML[/caption]

لیست های غیر ترتیبی

لیست های غیر ترتیبی (در انگلیسی: unordered list) با استفاده از تگ <ul> مشخص شده و سپس درون این تگ از تگ های <li> برای مشخص کردن هر گزینه استفاده می کنیم. (ایران گستر)

در حالت پیش فرض این نوع از لیست ها با bullet مشخص می شوند. bullet در لغت به معنی «گلوله» است اما منظور از آن در لیست ها همان دایره های سیاه رنگ کنار هر گزینه هستند.(ایران گستر)

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

<!DOCTYPE html>

<html>

<body>

<h2>An unordered HTML list</h2>

<ul>

<li>Coffee</li>

</ul>

</body>

</html>

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

دایره های سیاه کنار هر مورد را به سادگی می توان دید. همچنین به راحتی متوجه می شویم که بین Coffee (قهوه)، Tea (چای) و Milk (شیر) ترتیبی وجود ندارد؛ چه شیر را اول بیاوریم و چه قهوه را، هیچ تفاوتی به حال ما و یا بحث اصلی ندارد (قبل از نتیجه گیری، قسمت لیست های ترتیبی را نیز ببینید).(ایران گستر)

سوال: چطور می توانیم شکل bullet ها را تغییر دهیم؟(ایران گستر)

پاسخ: همانطور که دیگر اجزای HTML را تغییر می دهیم! با استفاده از CSS. به جدول زیر نگاه کنید:(ایران گستر)

مقدار	توضیحات
disc	این حالت همان bullet های پیش فرض و سیاه رنگ است
circle	این حالت دایره ها را به صورت توخالی نمایش می دهد
square	این حالت به جای دایره از مربع استفاده می کند
none	در این حالت، موارد یک لیست بدون شکل خواهند بود

بیایید تک تک این موارد را بررسی کنیم.

حالت اول: تنظیم روی مقدار disc (ایران گستر)

<!DOCTYPE html>

<html>

<body>

<h2>Unordered List with Disc Bullets</h2>

<li>Coffee</li>

</ul>

</body>

</html>

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

حالت دوم: تنظیم روی مقدار Circle (ایران گستر)

<!DOCTYPE html>

<html>

<body>

<h2>Unordered List with Disc Bullets</h2>

<li>Coffee</li>

</ul>

</body>

</html>

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

حالت سوم: تنظیم روی مقدار Square (ایران گستر)

<!DOCTYPE html>

<html>

<body>

<h2>Unordered List with Square Bullets</h2>

<li>Coffee</li>

</ul>

</body>

</html>

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

حالت چهارم: تنظیم روی مقدار none (ایران گستر)

<!DOCTYPE html>

<html>

<body>

<h2>Unordered List without Bullets</h2>

<li>Coffee</li>

</ul>

</body>

</html>

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

لیست های ترتیبی

لیست های ترتیبی (به انگلیسی: ordered list) با تگ <ol> مشخص می شود و برای اضافه کردن هر مورد جدید به لیست باید از همان <li> استفاده کنید. در این نوع از لیست ها، ترتیب اهمیت دارد.(ایران گستر)

به مثال زیر توجه کنید:

<!DOCTYPE html>

<html>

<body>

<h2>An ordered HTML list</h2>

<ol>

<li>Coffee</li>

</ol>

</body>

</html>

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

سوال: مگر در قسمت قبل همین مثال را به صورت غیر ترتیبی نیاوردیم و نگفتیم که ترتیب موارد آن اهمیتی ندارد؟

پاسخ: بله! در واقع اهمیت داشتن یا نداشتن ترتیب به دو مورد اصلی بستگی دارد:(ایران گستر)

سلیقه ی شما به عنوان نویسنده
زمینه و موضوع بحث

از نظر زمینه و موضوع بحث: بگذارید با مثال برایتان توضیح دهم؛ اگر بحث شما در مورد مقدار پروتئین و میزان کالری شیر، قهوه و چای باشد، ترتیب اهمیت پیدا می کند! تصور کنید می خواهید لیستی به مخاطب ارائه کنید که در آن نوشیدنی ها بر اساس میزان کالری شان لیست شده اند. در این حالت ترتیب اهمیت دارد اما زمانی که می خواهید چند مورد از نوشیدنی های محبوب جهان را نام ببرید آیا باز هم مهم است کدام را اول بیاوریم؟ خیر.(ایران گستر)

از نظر سلیقه ی نویسنده: سلیقه ی شما ممکن است چنین چیزی را قبول نکند! به طور مثال برای شما (به هر دلیل شخصی که دارید) مهم است ابتدا شیر بیاید یا قهوه یا چای! در این حالت این لیست تغییر می کند. مسئله ی عکس آن نیز صادق است.(ایران گستر)

بنابراین می توان به عنوان قانونی کلی گفت: زیاد در مورد جزئیات لیست ها، فنی رفتار نکنید چرا که تعیین ترتیب داشتن یا نداشتن موارد یک لیست به این سادگی ها نیست. علاوه بر آن اهمیت آنچنانی نیز ندارد و مسئله ای بین شما و کاربرانتان محسوب می شود.

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

نوع	توضیحات
type=”1″	موارد لیست با عدد شماره گذاری می شوند (حالت پیش فرض)
type=”A”	موارد لیست با حروف بزرگ انگلیسی علامت گذاری می شوند (A و B و C و …)
type=”a”	موارد لیست با حروف کوچک انگلیسی علامت گذاری می شوند (a و b و c و …)
type=”I”	موارد لیست با اعداد بزرگ رومی علامت گذاری می شوند (I و II و III و …)
type=”i”	موارد لیست با اعداد کوچک رومی علامت گذاری می شوند (i و ii و iii و …)

بیایید هر کدام را بررسی کنیم:

حالت اول: تنظیم روی مقدار Numbers (ایران گستر)

<!DOCTYPE html>

<html>

<body>

<h2>Unordered List without Bullets</h2>

<li>Coffee</li>

</ul>

</body>

</html>

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

حالت دوم: تنظیم روی حروف بزرگ (ایران گستر)

<!DOCTYPE html>

<html>

<body>

<h2>Ordered List with Letters</h2>

<li>Coffee</li>

</ol>

</body>

</html>

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

حالت سوم: تنظیم روی حروف کوچک (ایران گستر)

<!DOCTYPE html>

<html>

<body>

<h2>Ordered List with Lowercase Letters</h2>

<li>Coffee</li>

</ol>

</body>

</html>

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

حالت چهارم: تنظیم روی حروف رومی بزرگ (ایران گستر)

<!DOCTYPE html>

<html>

<body>

<h2>Ordered List with Roman Numbers</h2>

<li>Coffee</li>

</ol>

</body>

</html>

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

حالت پنجم: تنظیم روی حروف رومی کوچک

<!DOCTYPE html>

<html>

<body>

<h2>Ordered List with Lowercase Roman Numbers</h2>

<li>Coffee</li>

</ol>

</body>

</html>

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

سوال: اگر بخواهیم شمارش لیست از عدد خاصی شروع شود باید چه کار کنیم؟

پاسخ: برای این کار از attribute ای به نام start شروع می کنیم. به طور مثال کد زیر را طوری نوشته ایم که شمارش در آن ها از عدد 50 شروع شود:(ایران گستر)

<!DOCTYPE html>

<html>

<body>

<h2>The start attribute</h2>

<p>شمارش به صورت پیش فرض از عدد 1 شروع می شود اما میتوانیم کاری کنیم که شمارش از عدد دلخواه ما شروع شود:</p>

<li>Coffee</li>

</ol>

<li>Coffee</li>

</ol>

</body>

</html>

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

لیست توضیحات

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

این نوع از لیست ها با تگ <dl> تعریف شده و برای اضافه کردن هر مورد به آن باید از تگ های زیر استفاده کرد: (ایران گستر)

تگ های <dt> اصطلاح را مشخص می کنند.
تگ های <dd> نیز شامل تعریف فنی آن هستند.

به مثال زیر توجه کنید:

<!DOCTYPE html>

<html>

<body>

<h2>A Description List</h2>

<dl>

<dt>Coffee</dt>

<dd>- black hot drink</dd>

<dd>- white cold drink</dd>

</dl>

</body>

</html>

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

نکته: شما می توانید لیست های HTML را به صورت تو در تو (nested) بنویسید: (ایران گستر)

<!DOCTYPE html>

<html>

<body>

<h2>A Nested List</h2>

<p>List can be nested (lists inside lists):</p>

<ul>

<li>Coffee</li>

<li>Tea

<ul>

<li>Black tea</li>

<li>Green tea</li>

</ul>

</li>

</ul>

</body>

</html>

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

fateme سه‌شنبه 23 مهر 1398 ساعت 12:39

0 نظر

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

HTML

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

جدول ها

Country	Contact	Company
Germany	Maria Anders	Alfreds Futterkiste
Mexico	Francisco Chang	Centro comercial Moctezuma
Austria	Roland Mendel	Ernst Handel
UK	Helen Bennett	Island Trading
Canada	Yoshi Tannamuri	Laughing Bacchus Winecellars
Italy	Giovanni Rovelli	Magazzini Alimentari Riuniti

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

هدف از ساخت جدول به کار و سلیقه ی شما بستگی دارد اما سعی کنید زمانی از جدول ها استفاده کنید که داده های جدولی داشته باشید! برخی از برنامه نویسان وب با تصور اشتباه اینکه هر جدولی به هر صفحه ای زیبایی می دهد بی جا و بدون دلیل از جدول ها استفاده می کنند. با اینکه احتمال ضربه زدن به سئو از طریق این کار تقریبا صفر است اما برای ظاهر وب سایت شما خوب نیست. برخی داده ها به صورت گروهی هستند و یا به هر دلیل دیگر مستقیما در یک جدول جا می گیرند؛ در آن زمان می توانید از جدول ها استفاده کنید.(ایران گستر)

برای ساختن جدول ها از تگ <table> استفاده می کنیم. این تگ به مرورگر اعلام می کند ما قصد ساخت یک جدول را داریم. سپس در داخل این تگ، برای هر ردیف از جدول‌تان باید از تگ <tr> استفاده کنید که مخفف table row (ردیف جدول) است. اگر ردیف اول شما دارای عنوان برای داده ها است و می خواهید پر رنگ تر باشد باید درون <tr> اول، از تگ <th> استفاده کنید. حالا برای هر خانه ی جدول باید از تگ <td> (مخفف table data) استفاده کنید.(ایران گستر)

بیایید به یک مثال نگاهی بیندازیم:(ایران گستر)

<!DOCTYPE html>

<html>

<body>

<h2>Basic HTML Table</h2>

<tr>

<th>Firstname</th>

<th>Lastname</th>

</tr>

<tr>

<td>Smith</td>

</tr>

<tr>

<td>Jackson</td>

</tr>

<tr>

</tr>

</table>

</body>

</html>

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

نکته:ها به طور پیش فرض به صورت Bold (پررنگ) و centered (وسط چین) هستند، به همین دلیل خروجی را به این شکل مشاهده می کنید.(ایران گستر)

باید بدانید <td> ها که خانه های جدول شما را می سازند می توانند هر عنصر HTML ای مانند تصویر، لیست، متن و … را در خود نگه دارند.(ایران گستر)

حاشیه در جدول

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

<!DOCTYPE html>

<html>

<head>

<style>

table, th, td {

border: 1px solid black;

}

</style>

</head>

<body>

<h2>Bordered Table</h2>

<p>Use the CSS border property to add a border to the table.</p>

<tr>

<th>Firstname</th>

<th>Lastname</th>

</tr>

<tr>

<td>Smith</td>

</tr>

<tr>

<td>Jackson</td>

</tr>

<tr>

</tr>

</table>

</body>

</html>

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

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

اگر بخواهیم خاصیت دو خطی بودن حاشیه را حذف کنیم می توانیم از دستور border-collapse در زبان CSS استفاده کنیم:(ایران گستر)

table, th, td {

border: 1px solid black;

border-collapse: collapse;

}

اگر این کار را بکنید کد بالا به این شکل در می آید.

اضافه کردن Padding

padding در هر خانه ی جدول، فضایی خالی را بین داده های جدول و حاشیه های آن مشخص می کند. در حالت پیش فرض خانه های جدول ها در HTML هیچ padding ای ندارند. بیایید به جدول خودمان padding اضافه کنیم تا متوجه تغییر آن بشویم:(ایران گستر)

<!DOCTYPE html>

<html>

<head>

<style>

table, th, td {

border: 1px solid black;

border-collapse: collapse;

}

th, td {

padding: 15px;

}

</style>

</head>

<body>

<h2>Cellpadding</h2>

<p>Cell padding specifies the space between the cell content and its borders.</p>

<tr>

<th>Firstname</th>

<th>Lastname</th>

</tr>

<tr>

<td>Smith</td>

</tr>

<tr>

<td>Jackson</td>

</tr>

<tr>

</tr>

</table>

<p dir='rtl'>سعی کنید مقدار padding را به 5 پیکسل تغییر دهید.</p>

</body>

</html>

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

همانطور که در جدول می بینید، خانه های آن بسیار بزرگتر شده اند که نتیجه ی ایجاد padding است.

خصوصیت های border-spacing و text-align

در ضمن همانطور که گفتیم <th> ها به طور پیش فرض به صورت Bold (پررنگ) و centered (وسط چین) هستند اما اگر بخواهیم آن ها را سر جایشان برگردانیم چه کار کنیم؟ می توانیم از text-align استفاده کنیم. این خصوصیت CSS به ما اجازه می دهد راست چین، چپ چین و وسط چین بودن داده های جدول را تعیین کنیم. به طور مثال می خواهیم <th> ها را به سمت چپ ببریم بنابراین کد زیر را به استایل ها اضافه می کنیم:(ایران گستر)

th {

text-align: left;

}

با اضافه کردن این کد، جدول ما به این شکل در می آید (تمام داده ها به سمت چپ می روند)

از طرفی خصوصیتی به نام border-spacing وجود دارد که مانند نامش، کارش ایجاد فاصله بین حاشیه های خانه های جدول است. بیایید مثالی از آن را ببینیم:(ایران گستر)

<!DOCTYPE html>

<html>

<head>

<style>

table, th, td {

border: 1px solid black;

padding: 5px;

}

table {

border-spacing: 15px;

}

</style>

</head>

<body>

<h2>Border Spacing</h2>

<p>Border spacing specifies the space between the cells.</p>

<tr>

<th>Firstname</th>

<th>Lastname</th>

</tr>

<tr>

<td>Smith</td>

</tr>

<tr>

<td>Jackson</td>

</tr>

<tr>

</tr>

</table>

<p dir='rtl'> مقدار فاصله را به 5 پیکسل تغییر دهید و خروجی را دوباره مشاهده کنید.</p>

</body>

</html>

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

نکته: اگر حاشیه های جدول شما دارای border-collapse باشند، دستور border-spacing کار نکرده و هیچ تاثیری روی آن ها ندارد. چرا؟ چون گفته نباید حاشیه های دو خطی داشته باشیم (حاشیه های تک خطی) و یک خط هم نمی تواند از خودش فاصله بگیرد! چطور می شود از نظر منطقی یک شیء از خودش فاصله بگیرد؟!(ایران گستر)

خانه های مشترک

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

<!DOCTYPE html>

<html>

<head>

<style>

table, th, td {

border: 1px solid black;

border-collapse: collapse;

}

th, td {

padding: 5px;

text-align: left;

}

</style>

</head>

<body>

<h2>Cell that spans two columns</h2>

<p>To make a cell span more than one column, use the colspan attribute.</p>

<tr>

<th colspan="2">Telephone</th>

</tr>

<tr>

<td>Bill Gates</td>

</tr>

</table>

</body>

</html>

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

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

حالت دیگر این است که یک خانه از جدول، شامل چندین ردیف شود. در این حالت از attribute دیگری به نام rowspan استفاده می کنیم. به مثال زیر توجه کنید:(ایران گستر)

<!DOCTYPE html>

<html>

<head>

<style>

table, th, td {

border: 1px solid black;

border-collapse: collapse;

}

th, td {

padding: 5px;

text-align: left;

}

</style>

</head>

<body>

<h2>Cell that spans two rows</h2>

<p>To make a cell span more than one row, use the rowspan attribute.</p>

<tr>

<td>Bill Gates</td>

</tr>

<tr>

<th rowspan="2">Telephone:</th>

</tr>

<tr>

</tr>

</table>

</body>

</html>

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

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

تگ <caption>

تگ <caption> به معنی «زیرنویس» یا «توضیحات» است و آن را می توانید به جدول هایتان اضافه کنید تا توضیح مختصری را به مخاطب ارائه دهید. به طور مثال:(ایران گستر)

<caption>Monthly savings</caption>

<tr>

<th>Month</th>

<th>Savings</th>

</tr>

<tr>

<td>January</td>

</tr>

<tr>

<td>February</td>

</tr>

</table>

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

Monthly savings (به معنی «پس اندازهای ماهانه») توضیح این جدول است و مخاطب را سریعا با محتوای آن آشنا می کند.

نکته: تگ <caption> باید بلافاصله بعد از تگ <table> نوشته شود.(ایران گستر)

سوال: اگر چندین جدول داشته باشیم اما بخواهیم هر کدام را به شکلی خاص استایل دهی کنیم چطور؟

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

از آنجا که این دوره مربوط به HTML است همین مقدار برایتان کافی است و از نظر HTML شما را با جدول ها آشنا کرد. بحث استایل دهی جدول ها مربوط به دوره ی CSS می شود. به طور مثال یک جدول را به شکل چشم نواز تری استایل دهی کرده ایم و برایتان آورده ایم:(ایران گستر)

<!DOCTYPE html>

<html>

<head>

<style>

table {

width:100%;

}

table, th, td {

border: 1px solid black;

border-collapse: collapse;

}

th, td {

padding: 15px;

text-align: left;

}

table#t01 tr:nth-child(even) {

background-color: #eee;

}

table#t01 tr:nth-child(odd) {

background-color: #fff;

}

table#t01 th {

background-color: black;

color: white;

}

</style>

</head>

<body>

<h2>Styling Tables</h2>

<table>

<tr>

<th>Firstname</th>

<th>Lastname</th>

</tr>

<tr>

<td>Smith</td>

</tr>

<tr>

<td>Jackson</td>

</tr>

<tr>

</tr>

</table>

<br>

<tr>

<th>Firstname</th>

<th>Lastname</th>

</tr>

<tr>

<td>Smith</td>

</tr>

<tr>

<td>Jackson</td>

</tr>

<tr>

</tr>

</table>

</body>

</html>

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

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

0 نظر

آموزش گام به گام و تصویری 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>