عضو شوید

عضویت سریع

به وبلاگ من خوش آمدید

براي اطلاع از آپيدت شدن وبلاگ در خبرنامه وبلاگ عضو شويد تا جديدترين مطالب به ايميل شما ارسال شود

شماره مجازی PingMe

ارسال لینک

فاطمه فیصلی []

آمار مطالب

:: کل مطالب : 160
:: کل نظرات : 0

آمار کاربران

:: افراد آنلاین : 1
:: تعداد اعضا : 0

کاربران آنلاین

آمار بازدید

:: بازدید امروز : 27
:: باردید دیروز : 16
:: بازدید هفته : 65
:: بازدید ماه : 557
:: بازدید سال : 557
:: بازدید کلی : 3829

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

نوشته شده توسط : فاطمه فیصلی

HTML

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

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

HTML[/caption]

عناصر معنایی (Semantics)

Semantics به خودی خود و جدا از دنیای برنامه نویسی، مطالعه ی معنی کلمات و عبارات در یک زبان است و از دروس دانشگاهی بسیاری از رشته های علوم انسانی می باشد. اما در دنیای وب زمانی که می گوییم عناصر Semantic یعنی عناصری که فقط عنصر ظاهری نیستند بلکه معنی خاصی را نیز با خودشان دارند. این معنی از یک طرف برای مرورگر و موتور های جست و جو است و از طرف دیگر برای توسعه دهندگان.(ایران گستر)

عناصر غیر معنایی یا non-semantic مانند <div> و <span> معنا یا اطلاعاتی را در مورد محتوای خود به ما نمی دهند اما عناصر معنایی یا semantic مانند <form> و <table>و <article> مشخص می کنند که چه نوع محتوایی دارند.(ایران گستر)

قبل از ارائه ی HTML5 برای مشخص کردن قسمت های مختلف صفحه از کدهایی مثل <“div id=”nav> یا <“div class=”header> استفاده می کردیم اما امروزه چنین کاری منسوخ شده است (متاسفانه برخی از توسعه دهندگان هنوز هم این کار را می کنند). اجزای مختلف یک صفحه در HTML5 به این شکل است:(ایران گستر)

طرح کلی HTML5

بنابراین HTML5 عناصر معنایی جدیدی را برای پایه ریزی این طرح به ما می دهد:(ایران گستر)

<article>
<aside>
<details>
<figcaption>
<figure>
<footer>
<header>
<main>
<mark>
<nav>
<section>
<summary>
<time>

عنصر <section>

این عنصر وظیفه ی تعریف یک قسمت خاص را در سند شما بر عهده دارد. بر اساس documentation ارائه شده از سمت W3C، این عنصر:(ایران گستر)

A section is a thematic grouping of content, typically with a heading.

یعنی عنصر <section> مجموعه ای از محتوا را که موضوع و مضمون مشابهی دارند در یک قسمت جمع می کند و معمولا یک heading نیز به آن ها می دهد. بنابراین صفحه ی اصلی سایت شما می تواند به <section> های مختلفی مانند مقدمه، محتوا، اطلاعات تماس و … تقسیم شود.(ایران گستر)

مثال:

<!DOCTYPE html>

<html>

<body>

<p>The World Wide Fund forNature(WWF)isan international organization working on issues regarding the conservation,research andrestoration of the environment,formerly named the World Wildlife Fund.WWF was founded in1961.</p>

</section>

<h1>WWF'sPanda symbol</h1>

<p>The Panda has become the symbol of WWF.The well-known panda logo of WWF originated fromapanda named Chi Chi that was transferred from the Beijing Zoo tothe London Zoo inthe same year of the establishment of WWF.</p>

</section>

</body>

</html>

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

عنصر <article>

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

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

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

<!DOCTYPE html>

<html>

<body>

<p>WWF's mission is to stop the degradation of our planet'snatural environment,andbuildafuture inwhich humans live inharmony with nature.</p>

</article>

</body>

</html>

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

تو در تو سازی <article> در <section>

آیا تو در تو سازی <article> در <section> و یا بالعکس شدنی است؟ <article> مشخص کننده ی مقالات مستقل و جداگانه در صفحه ی ما بود. <section> نیز تعریف کننده ی یک قسمت خاص در صفحه ی ما بود.(ایران گستر)

سوال اینجاست: آیا قانون خاصی برای ترکیب این عناصر معنایی به جز معنی شان وجود دارد؟ پاسخ شما خیر است!

حتما در بعضی از وب سایت های اینترنتی دیده اید که <section> درون تگ <article> قرار دارد و <article> نیز دارای تگ های <section> است. همچنین برعکس این موضوع را نیز مشاهده کرده اید. به طور مثال ممکن است در یک خبرگزاری اینترنتی، مقالات ورزشی در یک <article> گذاشته شوند که قسمت (section) ورزشی قرار دارند، و از طرفی همان <article> ممکن است قسمت (section) های فنی داشته باشد. بنابراین تو در تو سازی (nesting) این عناصر بر پایه ی معنای آن ها است.(ایران گستر)

عنصر <header>

این عنصر یک header (موضوع) برای کل سند شما و یا یک section در صفحه ی شما تعیین می کند. در واقع باید از <header> به صورت نگه دارنده ی اطلاعاتی مانند موضوع و … استفاده کرد و از آن جایی که می توان چند مقاله در یک صفحه داشت، می توانیم چندین <header> نیز در یک صفحه داشته باشیم.(ایران گستر)

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

<!DOCTYPE html>

<html>

<body>

<p>WWF's mission:</p>

</header>

<p>WWF'smission istostop the degradation of our planet'snatural environment,andbuildafuture inwhich humans live inharmony with nature.</p>

</article>

</body>

</html>

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

عنصر <footer>

این عنصر برای صفحه ی شما یک footer (قسمت پایینی وب سایت یا یک مقاله که معمولا اطلاعات تکمیلی مانند اطلاعات تماس یا نام نویسنده در آن قرار می گیرد) تعیین می کند. بنابراین <footer> باید اطلاعاتی در مورد عنصر نگه دارنده اش داشته باشد و معمولا شامل این موارد می شود: نام نویسنده، اطلاعات مربوط به کپی رایت، شرایط و قوانین استفاده، اطلاعات تماس و …. . از آنجا که می توان چندین مقاله در یک صفحه داشت، می توانیم چندین <footer> نیز در یک صفحه داشته باشیم.(ایران گستر)

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

<!DOCTYPE html>

<html>

<body>

<p>Posted by:Amir Zouerami</p>

<p>Contact information:<ahref="mailto:Zouerami@gmail.com">

Zouerami@gmail.com</a>.</p>

</footer>

</body>

</html>

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

عنصر <nav>

این عنصر لینک های navigation (مسیریابی – لینک هایی که در بالای سایت هستند مانند «خانه» و «تماس با ما» و …) را در بر می گیرد. نکته ای که باید به آن توجه کنید این است که لازم نیست هر لینکی داخل <nav> قرار بگیرد. <nav> ها تنها برای مجموعه ای از لینک ها هستند که قرار است کاربر را به قسمت خاصی منتقل کنند. مثال:(ایران گستر)

<!DOCTYPE html>

<html>

<body>

<nav>

<ahref="https://www.roxo.ir/series/html-tutorials/">HTML</a>|

<ahref="https://www.roxo.ir/series/html-tutorials/">CSS</a>|

<ahref="https://www.roxo.ir/series/javascript-tutorials/">JavaScript</a>|

<ahref="https://www.roxo.ir/series/sql-language-tutorial/">MySQL</a>

</nav>

</body>

</html>

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

عنصر `<aside>`

این عنصر محتوایی را تعیین می کند که در کنار محتوای اصلی قرار می گیرد (مانند sidebar ها – مثلا لیست مقالات پر بازدید که به صورت عمودی در برخی از سایت ها موجود است). محتوای درون <aside> باید با محتوای پیرامونش مرتبط باشد.(ایران گستر)

مثال:

<!DOCTYPE html>

<html>

<body>

<p>My family andIvisited The Epcot center thissummer.</p>

<aside>

<h4>Epcot Center</h4>

<p>The Epcot Center isatheme park inDisney World,Florida.</p>

</aside>

</body>

</html>

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

عنصر <figure>

هدف <figure> ارائه ی توضیحات متنی برای یک تصویر است. در HTML5 می توانیم این توضیح متنی را به همراه تصویر مورد نظر در <figure> قرار دهیم. بنابراین درون <figure> یک تگ img و یک تگ <figcaption> قرار دارد که حاوی توضیحات متنی است.(ایران گستر)

مثال:

<!DOCTYPE html>

<html>

<body>

<h2>Places toVisit</h2>

<p>Puglia's most famous sight is the unique conical houses (Trulli) found in the area around Alberobello, a declared UNESCO World Heritage Site.</p>

<figcaption dir='rtl'>خانههایTrulliدرایتالیا</figcaption>

</figure>

</body>

</html>

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

چرا عناصر معنایی؟

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

:: بازدید از این مطلب : 16

امتیاز مطلب : 0

تعداد امتیازدهندگان : 0

مجموع امتیاز : 0

تاریخ انتشار : شنبه 27 مهر 1398 | نظرات ()

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

نوشته شده توسط : فاطمه فیصلی

HTML

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

HTML[/caption]

HTML5 چیست؟

برای درک HTML5 بهتر است تاریخچه ای کوتاه از زبان HTML را بدانیم. ما از سال 1991 تا سال 1999 شاهد عرضه ی نسخه های 1 تا 4 از HTML بوده ایم. سپس در سال 2000 کنسرسیوم جهانی وب (W3C) پیشنهاد استفاده از XHTML 1.0 را داد که توسعه دهندگان را مجبور به نوشتن کد های تمیز و دقیق می کرد. این مسئله تا جایی پیش رفت که در سال 2004 کنسرسیوم جهانی وب تصمیم گرفت که دیگر HTML را توسعه ندهد بلکه فقط به XHTML بپردازد.(ایران گستر)

سپس در سال 2004 نهاد و گروهی به نام WHATWG (مخفف Web Hypertext Application Technology Working Group) ایجاد شد که هدفشان توسعه ی HTML به صورت مرتب بود، به نحوی که با نسخه های قدیمی هم سازگاری داشته باشد. این گروه طی سال های 2004 تا 2006 توانست پشتیبانی اکثر شرکت های سازنده ی مرورگرهای اینترنتی مطرح را به دست آورد. سپس در سال 2006 کنسرسیوم جهانی وب اعلام کرد که از WHATWG پشتیبانی می کند.(ایران گستر)

در نهایت در سال 2008 اولین نسخه ی آزمایشی HTML5 منتشر شد. سپس در سال 2012 گروه WHATWG و کنسرسیوم جهانی وب تصمیم گرفتند که از هم جدا شوند چرا که WHATWG میخواست زبان HTML را به صورتی توسعه دهد که مرتبا بروزرسانی و ویرایش شود، و در عین بروزرسانی با قابلیت های قدیمی نیز سازگار باشد. به همین دلیل اولین نسخه ی ارائه شده توسط گروه WHATWG در سال 2012 ارائه شد. از طرفی کنسرسیوم جهانی وب قصد داشت استانداردی مشخص و قطعی برای HTML5 و XHTML بنویسد. بنابراین اولین نسخه ی پیشنهادی HTML5 طبق اعلام کنسرسیوم جهانی وب در 28 اکتبر سال 2014 ارائه شد. متعاقبا HTML5.1 و HTML5.2 نیز به ترتیب در 3 اکتبر 2017 و 14 دسامبر 2017 ارائه شدند.(ایران گستر)

بنابراین همانطور که میدانید HTML5 نسخه ی جدیدتر HTML بوده و در صدد ارتقاء تجربه ی کاربری و کدنویسی افراد در دنیای وب تلاش هایی را انجام داده است. در این مقاله میخواهیم بیشتر با این نسخه از HTML آشنا شویم.(ایران گستر)

DOCTYPE مورد نیاز برای تعریف HTML5 بسیار ساده است:

1	<!DOCTYPE html>

همچنین تعیین encoding مناسب نیز بسیار راحت شده است:(ایران گستر)

1	<meta charset="UTF-8">

البته باید بدانید که encoding پیش فرض در HTML5 همان UTF-8 است.(ایران گستر)

بنابراین یک سند عادی به این شکل خواهد بود:

<!DOCTYPE html>

<html>

<head>

<title>Page Title</title>

</head>

<body>

<h1>ThisisaHeading</h1>

<p>Thisisaparagraph.</p>

</body>

</html>

در HTML5 عناصر جدیدی نیز معرفی شده اند:(ایران گستر)

عناصر معنایی جدید مانند: <header> و <footer> و <article> و <section> و …
attribute های جدید برای فرم ها مانند: number و date و time و calendar و range و …
عناصر گرافیکی مانند: <svg> و <canvas>
عناصر چند رسانه ای جدید: <audio> و <video>

همچنین API جدیدی نیز معرفی شده است که عبارت اند از:(ایران گستر)

HTML Geolocation
HTML Drag and Drop
HTML Local Storage
HTML Application Cache
HTML Web Workers
HTML SSE

بعدا با این موارد آشنا خواهیم شد.

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

عنصر منسوخ	نسخه ی جدید آن
<acronym>	<abbr>
<applet>	<object>
<basefont>	قوانین CSS
<big>	قوانین CSS
<center>	قوانین CSS
<dir>	<ul>
<font>	قوانین CSS
<frame>	–
<frameset>	–
<noframes>	–
<strike>	قوانین CSS یا <s> یا <del>
<tt>	قوانین CSS

ناسازگاری مرورگرهای قدیمی

وقتی صحبت از HTML5 میکنیم بسیاری از توسعه دهندگان نگران موضوع عدم سازگاری با تکنولوژی های قدیمی هستند اما شما می توانید به مرورگرهای قدیمی تر بگویید که در مواجهه با HTML5 چکار کنند. همانطور که حدس می زنید، HTML5 در تمام مرورگرهای امروزی پشتیبانی می شود اما در مورد مرورگر های قدیمی تر نکته ی جالبی وجود دارد؛ تمام مرورگرها، چه جدید و چه قدیمی، در برخورد با عنصری که آن را نشناسند، آن را یک عنصر inline در نظر می گیرند. به همین دلیل شما می توانید به مرورگرهای قدیمی یاد بدهید که چطور با عناصر HTML5 که برایشان ناشناخته است کنار بیایند. شما حتی می توانید به IE6 که متعلق به Windows XP 2001 است نیز یاد بدهید که چطور با HTML5 کار کند.(ایران گستر)

HTML5 هشت عنصر معنایی (semantic) جدید را معرفی کرده است که همگی از نوع block هستند. بنابراین برای حل مشکل عدم سازگاری می توانیم دوباره آن ها را در CSS به صورت block تعریف کنیم:(ایران گستر)

header,section,footer,aside,nav,main,article,figure{

display:block;

}

شما همچنین می توانید عناصر جدیدی را در HTML ایجاد کنید. به طور مثال در کد زیر یک عنصر جدید به نام <myHero> را به دلخواه خود ساخته ایم و سپس آن را استایل دهی کرده ایم:(ایران گستر)

<!DOCTYPEhtml>

<html>

<head>

<style>

myHero {

display:block;

background-color:#dddddd;

padding:50px;

font-size:30px;

}

</style>

</head>

<body>

<h1>AHeading</h1>

<myHero>My Hero Element</myHero>

</body>

</html>

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

کد کوتاه جاوا اسکریپت در مثال بالا (("document.createElement("myHero) برای ایجاد عناصر در مرورگرهای IE 9 و قدیمی تر لازم است.(ایران گستر)

شما می توانید از این راه حل برای تمام مرورگرها استفاده کنید اما متاسفانه مرورگرهای IE8 و نسخه های قدیمی تر آن اجازه ی استایل دهی به عناصر ناشناخته را نمی دهند. خوشبختانه آقای Sjoerd Visscher کد جاوا اسکریپتی به نام HTML5Shiv ساخته است که به مرورگرهایی مانند IE8 و نسخه های قدیمی تر اجازه ی این کار را می دهد.(ایران گستر)

برای استفاده از HTML5Shiv باید آن را در قسمت <head> و درون تگ <script> قرار دهید. شما می توانید آن را در صفحه ی گیت هاب HTML5Shiv دانلود کنید و یا کد زیر را به مرورگر خود اضافه کنید:(ایران گستر)

<head>

<!--[ifltIE9]>

<![endif]-->

</head>

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

<!DOCTYPE html>

<html>

<head>

<!--[ifltIE9]>

<![endif]-->

</head>

<body>

<h1>Famous Cities</h1>

<h2>London</h2>

<p>London isthe capital city of England.It isthe most populous city inthe United Kingdom,

withametropolitan area of over13million inhabitants.</p>

</article>

<h2>Paris</h2>

<p>Paris isthe capital andmost populous city of France.</p>

</article>

<h2>Tokyo</h2>

<p>Tokyo isthe capital of Japan,the center of the Greater Tokyo Area,

andthe most populous metropolitan area inthe world.</p>

</article>

</section>

</body>

</html>

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

نکته: تمام این موارد فقط و فقط جهت اطلاع شما گفته شده است. در دنیای واقعی نیازی به این کار نیست؛ توجه کنید که ما (در زمان نگارش این مقاله) در سال 2019 هستیم و به هیچ عنوان نباید نگران سازگاری با مرورگرهای IE8 و غیره باشیم. این مرورگرهای قدیمی خیلی وقت است که از رده خارج شده اند و به توصیه ی تمام محققین و متخصصین باید پشتیبانی از آن ها را رها کرد.(ایران گستر)

:: بازدید از این مطلب : 22

امتیاز مطلب : 0

تعداد امتیازدهندگان : 0

مجموع امتیاز : 0

تاریخ انتشار : شنبه 27 مهر 1398 | نظرات ()

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

نوشته شده توسط : فاطمه فیصلی

HTML

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

HTML[/caption]

ویژگی value

این ویژگی مقدار اولیه ی یک input در فرم ما را مشخص می کند:(ایران گستر)

<!DOCTYPE html>

<html>

<body>

<h2>The value Attribute</h2>

<p>The value attribute specifies the initial value foran input field:</p>

First name:<br>

<br>

Last name:<br>

</form>

</body>

</html>

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

ویژگی readonly

این ویژگی باعث می شود که input ما read only شود یعنی هیچکس نتواند آن را تغییر دهد:(ایران گستر)

<!DOCTYPE html>

<html>

<body>

<h2>The readonly Attribute</h2>

<p>The readonly attribute specifies that the input field isread only(cannot be changed):</p>

First name:<br>

<br>

Last name:<br>

</form>

</body>

</html>

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

ویژگی disabled

این ویژگی باعث می شود که input ما غیرفعال شود. input ای که غیرفعال باشد، غیر قابل کلیک کردن و تغییر دادن است و همچنین مقدار آن در هنگام submit (ارسال نهایی) فرم به سرور ارسال نمی شود:(ایران گستر)

<!DOCTYPE html>

<html>

<body>

<h2>The disabled Attribute</h2>

<p>The disabled attribute specifies that the input field isdisabled:</p>

First name:<br>

<br>

Last name:<br>

</form>

</body>

</html>

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

ویژگی size

این ویژگی سایز یک input را بر اساس تعداد کاراکتر تعیین می کند:(ایران گستر)

<!DOCTYPE html>

<html>

<body>

<h2>The size Attribute</h2>

<p>The size attribute specifies the size(incharacters)of the input field:</p>

First name:<br>

<br>

Last name:<br>

</form>

</body>

</html>

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

ویژگی maxlength

این ویژگی حداکثر طول مجاز یک input را برای کاربر تعیین می کند:(ایران گستر)

<!DOCTYPE html>

<html>

<body>

<h2>The maxlength Attribute</h2>

<p>The maxlength attribute specifies the maximum allowed length forthe input field:</p>

First name:<br>

<br>

Last name:<br>

</form>

</body>

</html>

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

به طور مثال اگر مقدار maxlength را 5 بگذارید دیگر فرم اجازه ی تایپ بیشتر از 5 کاراکتر را به کاربر نمی دهد اما توجه داشته باشید که این ویژگی هیچ هشداری به کاربر نمیدهد بنابراین اگر میخواهید پیامی برای کاربر نمایش داده شود و به او بگوید که این فیلد محدود است و یا اینکه چرا این فیلد محدود است باید از کد های جاوا اسکریپت یا روش های دیگر استفاده کنید.(ایران گستر)

هشدار: تمام روش های محدود سازی با HTML (مانند مثال بالا) و Javascript قابل دور زدن هستند و اصلا امن نیستند، بلکه تنها برای راحتی سرور شما و خود کاربران ایجاد شده اند. لازم است که حتما و حتما داده ها را در سمت سرور نیز چک کنید.(ایران گستر)

ویژگی autocomplete

این ویژگی می گوید که آیا یک فرم قابلیت autocomplete (تکمیل خودکار) داشته باشد یا خیر. زمانی که autocomplete فعال باشد مرورگر به صورت خودکار مقادیر ورودی را بر اساس مقادیری که کاربر قبلا وارد کرده است پر می کند. autocomplete با عنصر <form> و <input> های متنی، جست و جو، URL، تلفن، ایمیل، رمز عبور، datepicker ها، محدوده و رنگ ها کار می کند.(ایران گستر)

نکته: شما می توانید autocomplete را برای کل فرم (<form>) فعال کرده و سپس برای برخی از input ها غیر فعالش کنید.(ایران گستر)

<!DOCTYPE html>

<html>

<body>

<h2>The autocomplete Attribute</h2>

First name:<input type="text"name="fname"><br>

Last name:<input type="text"name="lname"><br>

E-mail:<input type="email"name="email"autocomplete="off"><br>

</form>

<pdir='rtl'>فرمراپرکردهوسپسارسالکنید.حالایکبارصفحهراrefreshکنیدتاببینیدقابلیتتکمیلخودکارچطورکارمیکند.</p>

<pdir='rtl'>توجهکنیدکهقابلیتتکمیلخودکاربرایemailغیرفعالاست.</p>

</body>

</html>

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

برای مشاهده ی خروجی در صفحه مورد نظر کلید Run را بزنید.

ویژگی novalidate

این ویژگی میگوید که داده های فرم در هنگام ارسال نباید Validate (اعتبار سنجی) شوند:(ایران گستر)

<!DOCTYPE html>

<html>

<body>

<h2>The novalidate Attribute</h2>

<p>The novalidate attribute specifies that the form data should notbe validated when submitted.</p>

E-mail:<input type="email"name="user_email">

</form>

<pdir='rtl'><strong>هشدار:</strong>اینقابلیتدرمرورگرهایinternet explorer9ونسخههایقبلآنوهمچنیندرsafari10ونسخههایقبلآنکارنمیکند.</p>

</body>

</html>

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

ویژگی autofocus

این ویژگی باعث می شود که پس از بارگذاری صفحه، یکی از input های ما (به انتخاب خودمان) focus بگیرد (یعنی بدون کلیک کاربر فعال شود):(ایران گستر)

<!DOCTYPE html>

<html>

<body>

<h2>The autofocus Attribute</h2>

<p>The autofocus attribute specifies that the input field should automatically get focus when the page loads.</p>

First name:<input type="text"name="fname"autofocus><br>

Last name:<input type="text"name="lname"><br>

</form>

<pdir='rtl'><strong>هشدار:</strong>اینقابلیتدرinternet explorer9ونسخههایقبلترآنپشتیبانینمیشود.</p>

</body>

</html>

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

پس از ورود به صفحه ی خروجی دکمه ی RUN را بزنید و متوجه خواهید شد که فیلد اول انتخاب شده است و آماده ی تایپ کردن شماست! این همان حالت focus است.(ایران گستر)

ویژگی form

این ویژگی مشخص می کند که فلان <input> متعلق به کدام فرم و یا چند فرم است:(ایران گستر)

<!DOCTYPE html>

<html>

<body>

<h2>The form Attribute</h2>

<p>The form attribute specifies one ormore forms an input element belongs to.</p>

First name:<input type="text"name="fname"><br>

</form>

<pdir='rtl'>فیلدLast nameکهدرزیرمشاهدهمیکنیدخارجازformبالااستاماهنوزهمبهآنتعلقدارد.</p>

Last name:<input type="text"name="lname"form="form1">

</body>

</html>

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

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

ویژگی formaction

این ویژگی مسیر فایلی را مشخص می کند که قرار است فرم ما را پردازش کند. این ویژگی action را باطل می کند و با "type="submit و "type="image استفاده می شود:(ایران گستر)

<!DOCTYPE html>

<html>

<body>

<h2>The formaction Attribute</h2>

<p>The formaction attribute specifies the URL ofafile that will process the input control when the form issubmitted.</p>

First name:<input type="text"name="fname"><br>

Last name:<input type="text"name="lname"><br>

</form>

<pdir='rtl'><strong>هشدار:</strong>اینقابلیتدرinternet explorer9ونسخههایقبلترآنپشتیبانینمیشود.</p>

</body>

</html>

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

ویژگی formenctype

این ویژگی encoding ارسال فرم را تعیین می کند (فقط برای فرم های “method=”post) و attribute قبلی فرم یعنی enctype را باطل می کند. این ویژگی با "type="submit و "type="image استفاده می شود:(ایران گستر)

<!DOCTYPE html>

<html>

<body>

<h2>The formenctype Attribute</h2>

<p>The formenctype attribute specifies how the form data should be encoded when submitted(only forforms with method="post").</p>

First name:<input type="text"name="fname"><br>

</form>

<pdir='rtl'><strong>هشدار:</strong>اینقابلیتدرinternet explorer9ونسخههایقبلترآنپشتیبانینمیشود.</p>

</body>

</html>

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

ویژگی formmethod

این ویژگی متد HTTP برای ارسال فرم ها به action را تعیین می کند و attribute قبلی فرم یعنی method را باطل می کند. این ویژگی با "type="submit و "type="image استفاده می شود:(ایران گستر)

<!DOCTYPE html>

<html>

<body>

<h2>The formmethod Attribute</h2>

<p>The formmethod attribute defines the HTTP method forsending form-data tothe action URL.</p>

First name:<input type="text"name="fname"><br>

Last name:<input type="text"name="lname"><br>

</form>

<pdir='rtl'><strong>هشدار:</strong>اینقابلیتدرinternet explorer9ونسخههایقبلترآنپشتیبانینمیشود.</p>

</body>

</html>

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

ویژگی formnovalidate

این ویژگی، novalidate را باطل کرده و تغییر میدهد و با "type="submit استفاده می شود:(ایران گستر)

<!DOCTYPE html>

<html>

<body>

<h2>The formnovalidate Attribute</h2>

E-mail:<input type="email"name="userid"><br>

</form>

<pdir='rtl'><strong>هشدار:</strong>اینقابلیتدرinternet explorer9ونسخههایقبلترآنوهمچنیندرsafari10ونسخههایقبلترآنپشتیبانینمیشود.</p>

</body>

</html>

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

ویژگی formtarget

این ویژگی مشخص می کند که مرورگر جواب دریافتی از سرور (پس از ارسال فرم) را کجا نمایش دهد. این ویژگی attribute قبلی فرم یعنی target را باطل می کند و این ویژگی با "type="submit و "type="image استفاده می شود:(ایران گستر)

<!DOCTYPE html>

<html>

<body>

<h2>The formtarget Attribute</h2>

<p>The formtarget attribute specifiesaname orakeyword that indicates where todisplay the response that isreceived after submitting the form.</p>

First name:<input type="text"name="fname"><br>

Last name:<input type="text"name="lname"><br>

</form>

<pdir='rtl'><strong>هشدار:</strong>اینقابلیتدرinternet explorer9ونسخههایقبلترآنپشتیبانینمیشود.</p>

</body>

</html>

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

ویژگی height و width

این دو ویژگی عرض و ارتفاع <"input type="image> را مشخص می کنند:(ایران گستر)

<!DOCTYPE html>

<html>

<body>

<h2>The height andwidth Attributes</h2>

<p>The height andwidth attributes specify the height andwidth of an input type="image"element.</p>

First name:<input type="text"name="fname"><br>

Last name:<input type="text"name="lname"><br>

</form>

</body>

</html>

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

ویژگی list

این ویژگی به <datalist> اشاره می کند که گزینه های از پیش تعریف شده ای برای <input> دارد:(ایران گستر)

<!DOCTYPE html>

<html>

<body>

<h2>The list Attribute</h2>

<p>The list attribute refers toadatalist element that contains pre-defined options foran input element.</p>

</datalist>

</form>

<pdir='rtl'><strong>هشدار:</strong>

اینقابلیتدرinternet explorer9ونسخههایقبلترآن وهمچنیندرsafariپشتیبانینمیشود.

</p>

</body>

</html>

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

ویژگی min و max

این دو ویژگی حداقل و حداکثر مقادیر مجاز برای <input> را تعیین می کنند و با input های عددی، محدوده ای، تاریخ، datetime-local، ماه، زمان و هفته کار می کند (اگر با انواع input ها آشنا نیستید به قسمت های قبل از همین سری آموزشی مراجعه کنید):(ایران گستر)

<!DOCTYPE html>

<html>

<body>

<h2>The min andmax Attributes</h2>

<p>The min andmax attributes specify the minimum andmaximum values foran input element.</p>

Enteradate before1980-01-01:

Enteradate after2000-01-01:

Quantity(between1and5):

</form>

<pdir='rtl'><strong>هشدار:</strong>ایندوویژگیدرمرورگرInternet Explorer9ونسخههایقبلترآنکارنمیکنند</p>

<pdir='rtl'><strong>هشدار:</strong>ایندوویژگیاگربرایتاریخوزمانبهکاربرونددرمرورگرInternet explorer10کارنمیکنند.</p>

</body>

</html>

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

ویژگی multiple

این ویژگی مشخص می کند که کاربر می تواند بیشتر از یک مقدار را در <input> وارد کند. این ویژگی با <input> های از نوع ایمیل و فایل کار می کند:(ایران گستر)

<!DOCTYPE html>

<html>

<body>

<h2>The multiple Attributes</h2>

<p>The multiple attribute specifies that the user isallowed toenter more than one value inthe input element.</p>

Select images:<input type="file"name="img"multiple>

</form>

<p>Tryselecting more than one file when browsing forfiles.</p>

<pdir='rtl'><strong>هشدار:</strong>ایندوویژگیدرمرورگرInternet Explorer9ونسخههایقبلترآنکارنمیکنند</p>

</body>

</html>

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

ویژگی pattern

این ویژگی از regular expression (عبارات با قاعده) استفاده می کند تا محتوای فرم را چک کند و با انواع input های متنی، جست و جو، URL، تلفن، ایمیل و رمز عبور کار می کند:(ایران گستر)

<!DOCTYPE html>

<html>

<body>

<h2>The pattern Attribute</h2>

<p>The pattern attribute specifiesaregular expression that the input element's value is checked against.</p>

Country code: <input type="text" name="country_code" pattern="[A-Za-z]{3}" title="Three letter country code">

</form>

<p dir='rtl'><strong>هشدار:</strong>اینقابلیتدرinternet explorer9ونسخههایقبلترآنوهمچنیندرsafari10ونسخههایقبلترآنپشتیبانینمیشود.</p>

</body>

</html>

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

مبحث عبارات با قاعده از مباحث بسیار طولانی در دنیای برنامه نویسی است و نمی شود آن را در این مقاله توضیح داد. اگر با آن ها آشنایی ندارید باید در اینترنت به دنبالشان بگردید و مقالات مختلف در این زمینه را مطالعه کنید.

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

ویژگی placeholder

این ویژگی متنی کوتاه را در فیلد مورد نظر نشان می دهد تا به کاربر توضیحات خلاصه ای ارائه کند. به طور مثال اگر میخواهید به کاربر بگویید که در این قسمت با حروف انگلیسی تایپ کند می توانید از این ویژگی استفاده کنید. این ویژگی با input های متنی، جست و جو، URL، تلفن، ایمیل و رمز کاربری کار می کند:(ایران گستر)

<!DOCTYPE html>

<html>

<body>

<h2>The placeholder Attribute</h2>

<p>The placeholder attribute specifiesahint that describes the expected value of an input field(asample value orashortdescription of the format).</p>

</form>

<pdir='rtl'><strong>هشدار:</strong>ایندوویژگیدرمرورگرInternet Explorer9ونسخههایقبلترآنکارنمیکنند</p>

</body>

</html>

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

ویژگی required

این ویژگی تعیین می کند که فلان فیلد این فرم اجباری است و حتما باید پُر شود و با انواع فیلد های text, search, url, tel, email, password, date pickers, number, checkbox, radio, و file کار می کند.(ایران گستر)

<!DOCTYPE html>

<html>

<body>

<h2>The required Attribute</h2>

<p>The required attribute specifies that an input field must be filled out before submitting the form.</p>

Username:<input type="text"name="usrname"required>

</form>

<pdir='rtl'><strong>هشدار:</strong>اینویژگیدرمرورگرInternet explorer9ونسخههایقبلترآنوهمچنیندرSafari10.1ونسخههایقبلترآنکارنمیکند.</p>

</body>

</html>

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

ویژگی step

این ویژگی بازه های مجاز برای یک <input> را تعیین می کنند. به طور مثال اگر این ویژگی برابر با 3 باشد (“step=”3) اعداد مجاز 3- و 0 و 3 و 6 و … خواهند بود. همچنین می توانید از max و min هم به همراه آن استفاده کنید. این ویژگی با فیلد های umber, range, date, datetime-local, month, time و week کار میکند:(ایران گستر)

<!DOCTYPE html>

<html>

<body>

<h2>The step Attribute</h2>

<p>The step attribute specifies the legal number intervals foran input element.</p>

</form>

<pdir='rtl'><strong>هشدار:</strong>اینویژگیدرمرورگرInternet explorer9ونسخههایقبلترآنکارنمیکند.</p>

</body>

</htmlایران >

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

:: بازدید از این مطلب : 29

امتیاز مطلب : 0

تعداد امتیازدهندگان : 0

مجموع امتیاز : 0

تاریخ انتشار : شنبه 27 مهر 1398 | نظرات ()

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

نوشته شده توسط : فاطمه فیصلی

HTML

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

HTML[/caption]

Input های HTML5

همزمان با معرفی HTML5 انواع مختلفی از input ها نیز به توسعه دهندگان معرفی شد تا بتوانند با استفاده از آن ها برنامه های کاربردی تر و راحت تری بنویسند. آن ها عبارت اند از:(ایران گستر)

color
date
datetime-local
email
month
number
range
search
tel
time
url
week

نکته: از آن جایی که این نوع input ها نسبتا جدید تر هستند ممکن است در تمام مروگر ها کار نکنند. اگر input ای در مرورگری پشتیبانی نشود، به جای آن یک فیلد خالی از نوع <"input type="text> نمایش داده خواهد شد.(ایران گستر)

Input های رنگی

این نوع از input ها به صورت <"input type="color> مشخص می شوند و کارشان ایجاد فیلد هایی است که رنگ خاصی را انتخاب کنند. اگر مرورگر کاربر از این input پشتیبانی کند یک color picker برای کاربر نمایش داده خواهد شد:(ایران گستر)

<!DOCTYPE html>

<html>

<body>

<h2>Color Picker</h2>

<p>The<strong>input type="color"</strong>isused forinput fields that should containacolor.</p>

<pdir='rtl'>رنگموردنظرتانراانتخابکنید</p>

</form>

<pdir='rtl'>اینقابلیتدرinternet explorer11وsafari9.1ونسخههایقبلیایندومرورگرپشتیبانینمیشود.</p>

</body>

</html>

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

Input های تاریخ

input های نوع <"input type="date> فیلد هایی مخصوص نگه داری تاریخ می سازند. اگر مرورگر کاربر از آن پشتیبانی کند یک date picker نمایش داده خواهد شد:(ایران گستر)

<!DOCTYPE html>

<html>

<body>

<h2>Date Field</h2>

<p>The<strong>input type="date"</strong>isused forinput fields that should containadate.</p>

<p>Depending on browser support:<br>Adate picker can pop-up when you enter the input field.<p>

تاریختولد:

</form>

<pdir='rtl'>اینقابلیتدرinternet explorer11ونسخههایقبلیآنوهمچنیندرsafariپشتیبانینمیشود.</p>

</body>

</html>

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

شما همچنین می توانید از attribute های min و max استفاده کنید تا محدودیت هایی را برای این تاریخ ایجاد کنید:(ایران گستر)

<!DOCTYPE html>

<html>

<body>

<h2>Date Field Restrictions</h2>

<p>Usethe min andmax attributes toadd restrictions todates:</p>

تاریخیقبلازسال1980-01-01راانتخابکنید:<br>

تاریخیبعدازسال2000-01-01راانتخابکنید:<br>

</form>

<pdir='rtl'>اینقابلیتدرinternet explorer11ونسخههایقبلیآنوهمچنیندرsafariپشتیبانینمیشود.</p>

</body>

</html>

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

Input های Datetime-local

این نوع از input ها با <"input type="datetime-local> مشخص شده و کار آنها دریافت ساعت و تاریخ (بدون هر گونه time zone – منطقه ی زمانی) می باشد:(ایران گستر)

<!DOCTYPE html>

<html>

<body>

<h2>Local Date Field</h2>

<p>The<strong>input type="datetime-local"</strong>specifiesadate andtime input field,with no time zone.</p>

<p>Depending on browser support:<br>Adate picker can pop-up when you enter the input field.</p>

Birthday(date andtime):

</form>

<pdir='rtl'>اینقابلیتدرinternet explorer12ونسخههایقبلیآنوهمچنیندر safariوfirefoxپشتیبانینمیشود.</p>

</body>

</html>

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

Input های ایمیل

این نوع input ها با <"input type="email> مشخص می شوند و کارشان دریافت ایمیل کاربران است. این نوع input ها معمولا از نظر ظاهری دقیقا شبیه به فیلدهای متنی ساده هستند و تنها تفاوتشان در این است که آدرس ایمیل کاربر را validate می کنند؛ یعنی چک می کنند که آدرس ایمیل نامعتبر نباشد و از الگوی صحیح پیروی کند.(ایران گستر)

همچنین برخی از تلفن های هوشمند می توانند این نوع input را تشخیص دهند و در کیبورد کاربر کلید “com.” را اضافه کنند.(ایران گستر)

<!DOCTYPE html>

<html>

<body>

<h2>Email Field</h2>

<p>The<strong>input type="email"</strong>isused forinput fields that should contain ane-mail address:</p>

E-mail:

</form>

<pdir='rtl'>

<b>هشدار:</b>اینقابلیتدرInternet Explorer9ونسخههایقبلازآنپشتیبانینمیشود.</p>

</body>

</html>

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

سعی کنید در خروجی بالا یک ایمیل نا معتبر (مانند example.com یا example یا example.com@me و …) وارد کنید. خواهید دید که فرم ثبت نخواهد شد و به جای آن یک هشدار به شما نمایش داده می شود.(ایران گستر)

Input های فایل

کار این نوع input ها که با <"input type="file> مشخص می شوند دریافت فایل های کاربر است. در صورتی که نیاز باشد کاربر فایلی را روی سرور شما آپلود کند (مانند تصویر پروفایل) می توانید از این نوع input استفاده کنید:(ایران گستر)

<!DOCTYPE html>

<html>

<body>

<h1>File upload</h1>

<p>Showafile-select field which allowsafile tobe chosen forupload:</p>

<br>

یکفایلانتخابکنید:

</form>

</body>

</html>

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

Input های ماه

نوع <"input type="month> به کاربر اجازه می دهد که یک ماه و سال را انتخاب کند:(ایران گستر)

<!DOCTYPE html>

<html>

<body>

<h2>Month Field</h2>

<p>The<strong>input type="month"</strong>allows the user toselectamonth andyear.</p>

<p>Depending on browser support:<br>Adate picker can pop-up when you enter the input field.</p>

Birthday(month andyear):

</form>

<pdir='rtl'><strong>هشدار:</strong>اینقابلیتدرinternet explorer11ونسخههایقبلیآنوهمچنیندرsafariوfirefoxپشتیبانینمیشود.</p>

</body>

</html>

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

Input های عددی

این نوع input ها که به صورت <"input type="number> مشخص می شوند به کاربر اجازه میدهند که در یک فیلد تنها از اعداد استفاده کند. شما می توانید با min و max حداقل و حداکثر اعداد مجاز را نیز تعیین کنید.(ایران گستر)

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

<!DOCTYPE html>

<html>

<body>

<h2>Number Field</h2>

<p>The<strong>input type="number"</strong>definesanumeric input field.</p>

<p>You can usethe min andmax attributes toadd numeric restrictions inthe input field:</p>

Quantity(between1and5):

</form>

<pdir='rtl'><b>هشدار:</b>اینقابلیتدرinternet explorer9ونسخههایقبلترآنپشتیبانینمیشود.</p>

</body>

</html>

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

Input های محدوده

این نوع input ها با <"input type="range> مشخص می شوند و کارشان تعیین عددی است که مقدار دقیق آن برای ما مهم نیست (مانند slider ها). حد پیش فرض آن از 0 تا 100 است اما شما می توانید آن را تغییر دهید:(ایران گستر)

<!DOCTYPE html>

<html>

<body>

<h2>Range Field</h2>

<p>Depending on browser support:<br>The input type"range"can be displayed asaslider control.<p>

Points:

</form>

<pdir='rtl'>

<b>هشدار:</b>

اینقابلیتدرinternet explorer9ونسخههایقبلترازآنپشتیبانینمیشود.

</p>

</body>

</html>

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

Input های جست و جو

این نوع input ها با <"input type="search> مشخص می شوند و فیلدهایی برای قسمت جست و جو در سایت شما هستند:(ایران گستر)

<!DOCTYPE html>

<html>

<body>

<h2>Search Field</h2>

<p>The<strong>input type="search"</strong>isused forsearch fields(behaves likearegular text field):</p>

Search Google:

</form>

</body>

</html>

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

این input ها از نظر کارکرد و از نظر ظاهر هیچ تفاوتی با فیلد های متنی ساده ندارند. تفاوت اصلی در بحث semantics و درک موتور های جست و جو از سایت شما است.

Input های تلفن

این نوع input ها که با <"input type="tel> مشخص می شوند مسئولیت دریافت شماره تلفن کاربران را دارند:(ایران گستر)

<!DOCTYPE html>

<html>

<body>

<h2>Telephone Field</h2>

<p>The<strong>input type="tel"</strong>isused forinput fields that should containatelephone number:</p>

Telephone:<input type="tel"name="phone"pattern="[0-9]{3}-[0-9]{2}-[0-9]{3}"required>

<span>Format:123-45-678</span>

</form>

</body>

</html>

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

احتمالا متوجه قسمت "{pattern="[0-9]{3}-[0-9]{2}-[0-9]{3 نشده اید. از آنجا که هر کشوری الگوی شماره تلفن های مخصوص خودش را دارد شما می توانید این الگو را بر اساس شماره تلفن های کشور خودتان تنظیم کنید. در الگوی بالا گفته شده است {3}[0-9] که یعنی 3 رقم اول شماره تلفن می توانند شامل اعداد 0 تا 9 (همه ی اعداد) بشوند. سپس دو رقم بعدی و در آخر سه رقم بعدی را مشخص کرده ایم. شما می توانید سعی کنید این الگو را مطابق با ایران طراحی کنید.(ایران گستر)

Input های زمان

این نوع input ها با <"input type="time> مشخص می شوند و به کاربر اجازه می دهند که بدون ذکر هیچ time zone یا منطقه ی زمانی، یک زمان خاص را انتخاب کند:(ایران گستر)

<!DOCTYPE html>

<html>

<body>

<h2>Time Field</h2>

<p>The<strong>input type="time"</strong>allows the user toselectatime(no time zone):</p>

<p>Depending on browser support:<br>Atime picker might pop-up when you enter the input field.</p>

Selectatime:

</form>

<pdir='rtl'>اینقابلیتدرinternet explorer12ونسخههایقبلترآنوهمچنیندرsafariپشتیبانینمیشود.</p>

</body>

</html>

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

Input های URL

این نوع input ها به صورت <"input type="url> مشخص می شوند و مسئولیت دریافت یک آدرس اینترنتی (URL) را دارند. برخی از تلفن های هوشمند می توانند این نوع input را تشخیص دهند و در کیبورد کاربر کلید “com.” را اضافه کنند:(ایران گستر)

<!DOCTYPE html>

<html>

<body>

<h2>URL Field</h2>

<p>The<strong>input type="url"</strong>isused forinput fields that should containaURL address:</p>

Add your homepage:

</form>

<pdir='rtl'>اینقابلیتدرinternet explorer9ونسخههایقبلآنپشتیبانینمیشود.</p>

</body>

</html>

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

کار اصلی این نوع فیلد validate کردن داده ی کاربر است؛ یعنی چک می کند تا ببیند آیا آدرس URL ای که کاربر وارد کرده است دارای الگوی صحیحی است یا خیر. می توانید این مورد را در خروجی بالا چک کنید.(ایران گستر)

Input های هفته

این نوع input ها به صورت <"input type="week> نوشته می شوند و به کاربر اجازه می دهند تا یک هفته و یک سال را انتخاب کند:(ایران گستر)

<!DOCTYPE html>

<html>

<body>

<h2>Week Field</h2>

<p>The<strong>input type="week"</strong>allows the user toselectaweek andyear:</p>

<p>Depending on browser support:<br>Adate picker can pop-up when you enter the input field.</p>

Selectaweek:

</form>

<pdir='rtl'>اینقابلیتدرinternet explorer11ونسخههایقبلیآنوهمچنیندرsafariوfirefoxپشتیبانینمیشود.</p>

</body>

</html>

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

:: بازدید از این مطلب : 21

امتیاز مطلب : 0

تعداد امتیازدهندگان : 0

مجموع امتیاز : 0

تاریخ انتشار : شنبه 27 مهر 1398 | نظرات ()

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

نوشته شده توسط : فاطمه فیصلی

HTML

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

HTML[/caption]

Input های رایج و قدیمی

همانطور که در دو قسمت قبلی دیدیم، input ها قسمت مهمی از فرم های HTML هستند و ما می خواهیم در این قسمت انواع آن ها را بررسی کنیم. انواع input ها از این قرار هستند:(ایران گستر)

<"input type="button>
<"input type="checkbox>
<"input type="color>
<"input type="date>
<"input type="datetime-local>
<"input type="email>
<"input type="file>
<"input type="hidden>
<"input type="image>
<"input type="month>
<"input type="number>
<"input type="password>
<"input type="radio>
<"input type="range>
<"input type="reset>
<"input type="search>
<"input type="submit>
<"input type="tel>
<"input type="text>
<"input type="time>
<"input type="url>
<"input type="week>

ما می خواهیم این موارد را طی دو قسمت بررسی کنیم. در قسمت اول که همین قسمت می باشد، input هایی را به شما معرفی می کنیم که بسیار کاربردی بوده و سال های سال است که مورد استفاده قرار می گیرند. این نوع input ها توسط تمام برنامه نویسان وب شناخته شده هستند و سابقه ای دیرینه دارند. در قسمت بعد به سراغ input هایی خواهیم رفت که در HTML5 معرفی شده اند؛ این input ها تقریبا جدید تر هستند و بعضی از آن ها ممکن است در تمام مرورگر ها پشتیبانی نشوند اما امکانات بیشتری به ما می دهند. پس ابتدا برویم سراغ input های اصلی و رایج(ایران گستر)

Input های متنی

<"input type="text> به معنی این است که input ما از نوع متنی بوده و تبدیل به یک فیلد خالی برای تایپ کاربر می شود:(ایران گستر)

<!DOCTYPE html>

<html>

<body>

<h2>Text field</h2>

<p>The<strong>input type="text"</strong>definesaone-line text input field:</p>

First name:<br>

<br>

Last name:<br>

</form>

<pdir='rtl'>توجهداشتهباشیدکهخودتگformنمایشدادهنمیشود.</p>

<pdir='rtl'>عرضپیشفرضهرفیلد20کاراکتراست</p>

</body>

</html>

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

Input های رمز عبور

فیلد های رمز عبور دقیقا مانند فیلد های متنی هستند بنابراین <"input type="password> هنوز هم یک فیلد خالی برای تایپ به ما می دهد اما تفاوت اینجاست که برای حفظ حریم شخصی کاربر، ظاهر هر چیزی که در این قسمت بنویسید با دایره های سیاه جایگزین می شود و کسی نمی تواند رمز تایپ شده ی شما را ببیند:(ایران گستر)

<!DOCTYPE html>

<html>

<body>

<h2>Password field</h2>

<p>The<strong>input type="password"</strong>definesapassword field:</p>

User name:<br>

<br>

User password:<br>

</form>

<pdir='rtl'>کاراکترهاییکهدرinputهایرمزیتایپمیشونددیدهنمیشوند.میتوانیددرقسمتراستاینموضوعراامتحانکنید.</p>

</body>

</html>

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

Input های ارسال فرم

<"input type="submit> بدین معنا است که input مورد نظر می خواهد فرمی را ثبت و ارسال (submit) کند. این فرم سپس به یک form-handler ارسال می شود. همانطور که قبلا هم توضیح دادیم form-handler صفحات اسکریپتی در سمت سرور هستند که کار پردازش و ذخیره ی داده های ارسالی را بر عهده دارند و آدرسشان در قسمت action مشخص می شود:(ایران گستر)

<!DOCTYPE html>

<html>

<body>

<h2>Submit Button</h2>

<p>The<strong>input type="submit"</strong>definesabutton forsubmitting form data toaform-handler:</p>

First name:<br>

<br>

Last name:<br>

</form>

<p>Ifyou click"Submit",the form-data will be sent toapage called"/action_page.php".</p>

</body>

</html>

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

نکته: اگر مقدار value را برای submit تعیین نکنید، یک مقدار پیش فرض برای آن تعیین می شود که معمولا همان کلمه ی submit است.(ایران گستر)

Input های پاک کردن فرم

input هایی که به صورت <"input type="reset> نوشته می شوند، معمولا یک reset button (دکمه ی ریستارت یا شروع مجدد) را ایجاد می کنند و زمانی که کاربر روی این دکمه کلیک کند تمام محتوایی که در فیلد ها نوشته است پاک می شود.(ایران گستر)

<!DOCTYPE html>

<html>

<body>

<h2>Reset Button</h2>

<p>The<strong>input type="reset"</strong>definesareset button that will reset all form values totheir defaultvalues:</p>

First name:<br>

<br>

Last name:<br>

</form>

<pdir='rtl'>اگردرفیلدهایبالامقداریرابنویسیدوتغییرشاندهید،سپسرویدکمهیresetکلیککنیدتماممحتوایفرمبهحالتاولیهیآنبازمیگردد.</p>

</body>

</html>

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

Input های radio

در جلسات قبل با radio button ها آشنا شدیم؛ آن ها به هر کاربر اجازه می دهند تا از بین چند گزینه تنها یک گزینه را انتخاب کند:(ایران گستر)

<!DOCTYPE html>

<html>

<body>

<h2>Radio Buttons</h2>

<p>The<strong>input type="radio"</strong>definesaradio button:</p>

<pdir='rtl'>لطفاجنسیتخودراانتخابکنید:</p>

<input type="radio"name="gender"value="other">نمیخواهماعلامکنم<br><br>

</form>

</body>

</html>

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

Input های Checkbox

input های checkbox به صورت <"input type="checkbox> ساخته می شوند؛ آن ها به کاربر اجازه می دهند که از بین چند گزینه صفر، یک، دو، سه و … یا همه را انتخاب کند:(ایران گستر)

<!DOCTYPE html>

<html>

<body>

<h2>Checkboxes</h2>

<p>The<strong>input type="checkbox"</strong>definesacheckbox:</p>

<pdir='rtl'>مالککداممواردهستید؟</p>

<input type="checkbox"name="vehicle1"value="Bike">مندوچرخهدارم

<br>

<input type="checkbox"name="vehicle2"value="Car">منماشیندارم

<br>

<input type="checkbox"name="bus"value="Car">مناتوبوسدارم

</form>

</body>

</html>

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

Input های دکمه ای

این نوع از input ها به صورت <"input type="button> تعریف می شوند. سوالی که در ابتدا پیش می آید این است که برخی از input های قبلی نیز دکمه می شدند. چرا به این نوع از input ها به طور خاص دکمه ای می گوییم؟ جواب این است که این نوع از input ها تنها یک دکمه هستند و کارکرد آن ها را شما و معمولا با جاوا اسکریپت مشخص می کنید. input های قبلی که تبدیل به یک دکمه شدند کارشان تعریف شده بود و از این نظر با input های دکمه ای متفاوت هستند:(ایران گستر)

<!DOCTYPE html>

<html>

<body>

<h2>Input Button</h2>

</body>

</html>

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

تا اینجای کار با input های معروف HTML آشنا شدیم. در قسمت بعد به سراغ input هایی خواهیم رفت که در HTML5 معرفی شده اند، یعنی:(ایران گستر)

color
date
datetime-local
email
month
number
range
search
tel
time
url
week

:: بازدید از این مطلب : 28

امتیاز مطلب : 0

تعداد امتیازدهندگان : 0

مجموع امتیاز : 0

تاریخ انتشار : جمعه 26 مهر 1398 | نظرات ()

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

نوشته شده توسط : فاطمه فیصلی

HTML

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

HTML[/caption]

عنصر <input>

در جلسه ی قبل به صورت خلاصه اشاره ای به این عنصر داشتیم اما در این قسمت کمی مفصل تر صحبت خواهیم کرد. مهم ترین عنصر یک فرم <input> است که بر اساس مقدار type میتواند به انواع و اشکال مختلفی ظاهر شود:(ایران گستر)

<!DOCTYPE html>

<html>

<body>

<h2>The input Element</h2>

Enter your name:

</form>

</body>

</html>

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

نکته: اگر مقدار type را خالی بگذارید، مقدار پیش فرض که همان text است برایش تعیین می شود.(ایران گستر)

عنصر <select>

این عنصر یک لیستِ drop-down را می سازد. لیست های drop-down لیست هایی هستند که با کلیک روی آن ها می توانید از بین گزینه هایشان که نمایان می شود انتخاب کنید. به مثال زیر توجه کنید:(ایران گستر)

<!DOCTYPE html>

<html>

<body>

<h2>The select Element</h2>

<p>The select element definesadrop-down list:</p>

<option value="volvo">Volvo</option>

</select>

</form>

</body>

</html>

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

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

هر کدام از <option> های بالا یکی از گزینه های لیست ما می باشد و در حالت پیش فرض اولین <option> بدون کلیک و در فیلد ما نمایان خواهد بود. اگر می خواهید این موضوع را تغییر دهید و <option> مورد نظر خود را گزینه ی پیش فرض کنید از selected استفاده کنید:(ایران گستر)

<!DOCTYPE html>

<html>

<body>

<h2>Pre-selected Option</h2>

<p>You can preselect an option with the selected attribute.</p>

<option value="volvo">Volvo</option>

</select>

</form>

</body>

</html>

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

همچنین اگر می خواهید تعداد گزینه هایی که نمایان هستند افزایش پیدا کنند، می توانید از size استفاده کنید:(ایران گستر)

<!DOCTYPE html>

<html>

<body>

<h2>Visible Option Values</h2>

<p>Usethe size attribute tospecify the number of visible values.</p>

<option value="volvo">Volvo</option>

</select>

</form>

</body>

</html>

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

در آخر اگر می خواهید کاربر بتواند چندین گزینه را انتخاب کند از multiple استفاده می کنید:(ایران گستر)

<!DOCTYPE html>

<html>

<body>

<h2>Allow Multiple Seletcions</h2>

<p>Usethe multiple attribute toallow the user toselect more than one value.</p>

<option value="volvo">Volvo</option>

</select>

</form>

<p>Hold down the Ctrl(windows)/Command(Mac)button toselect multiple options.</p>

</body>

</html>

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

برای این کار کاربر باید کلید کنترل (Ctrl) را نگه دارد و سپس گزینه های مورد نظرش را انتخاب کنید. بدین ترتیب می توان چندین گزینه را انتخاب نمود. می توانید این مورد را در مثالا بالا امتحان کنید.(ایران گستر)

عنصر <textarea>

عنصر <textarea> یک فیلد متنیِ چند خطی را ایجاد می کند. به مثال زیر توجه کنید:(ایران گستر)

<!DOCTYPE html>

<html>

<body>

<h2>Textarea</h2>

<p>The textarea element definesamulti-line input field.</p>

<textarea name="message"rows="10"cols="30">The cat was playing inthe garden.</textarea>

<br>

</form>

</body>

</html>

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

در کد بالا rows مسئول مشخص کردن تعداد خطوط قابل رویت در text area و cols مسئول مشخص کردن عرض قابل رویت آن هستند. البته می توانید این اندازه ها را با CSS نیز تعیین کنید:(ایران گستر)

The cat was playing inthe garden.

</textarea>

عنصر <button>

عنصر <button> یک دکمه را تعریف می کند:(ایران گستر)

<!DOCTYPE html>

<html>

<body>

<h2>The button Element</h2>

<button type="button"onclick="alert('سلام کاربر گرامی')">رویمنکلیککن</button>

</body>

</html>

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

همانطور که می بینید دکمه ها به خودی خود کاری نمی کنند و ما باید برایشان تعریف کنیم که قرار است چه کار کنند.

نکته: مرورگر های مختلف ممکن است از مقادیر مختلفی برای حالت پیش فرضِ type استفاده کنند بنابراین بهتر خودتان آن را مشخص کنید.(ایران گستر)

عناصر HTML5

با معرفی HTML5 دو عنصر دیگر نیز به عناصر بالا اضافه شدند:(ایران گستر)

<datalist>
<output>

این عناصر جدید هستند بنابراین در مرورگر های قدیمی نمایش داده نمی شوند و جای آنها خالی گذاشته می شود.(ایران گستر)

عنصر <datalist> لیستی از گزینه های از پیش تعیین شده را برای <input> ایجاد می کند و کاربران هنگام کار با آن با یک لیست drop-down سر و کار دارند. همچنین list مربوط به <input> باید به id مربوط به <datalist> اشاره کند.(ایران گستر)

مثال:

<!DOCTYPE html>

<html>

<body>

<h2>The datalist Element</h2>

<p>The datalist element specifiesalist of pre-defined options foran input element.</p>

</datalist>

</form>

<pdir='rtl'><b>هشدار:</b>اینقابلیتدرمرورگرهایسافاریواینترنتاکسپلورر9وقبلترپشتیبانینمیشود</p>

</body>

</html>

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

عنصر <output> نیز نماینده ی یک محاسبه است (معمولا محاسبه هایی که با اسکریپت و در سمت سرور انجام می شوند):(ایران گستر)

<!DOCTYPE html>

<html>

<body>

<h2>The output Element</h2>

<p>میتوانیدمقدارجمعایندوعددرابهراحتیپیداکنید</p>

<form action="/action_page.php"

oninput="x.value=parseInt(a.value)+parseInt(b.value)">

100+

</form>

<pdir='rtl'><strong>هشدار:</strong>اینقابلیتدرEdge12وIEومرورگرهایقدیمیپشتیبانینمیشود</p>

</body>

</html>

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

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

:: بازدید از این مطلب : 26

امتیاز مطلب : 0

تعداد امتیازدهندگان : 0

مجموع امتیاز : 0

تاریخ انتشار : جمعه 26 مهر 1398 | نظرات ()

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

نوشته شده توسط : فاطمه فیصلی

HTML

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

HTML[/caption]

عنصر <form>

عنصر <form> فرمی را تعریف می کند که برای دریافت داده های کاربر مورد استفاده قرار می گیرد و به طور کل به این شکل است:(ایران گستر)

<form>

عناصرمختلففرمدراینقسمتنوشتهمیشوند.

</form>

هر فرم HTML ای دارای عناصر فرم (form elements) است و به خودی خود هیچ کاری را نمی تواند انجام دهد. این عناصر فرم در واقع انواع مختلف دریافت داده ها هستند؛ به طور مثال text field (مانند فیلد دریافت نام و نام خانوادگی کاربر)، checkbox (فیلد هایی که کاربر آن ها را تیک می زند) و … . ما می خواهیم با این عناصر به صورت خلاصه آشنا شویم.(ایران گستر)

عنصر <input>

عنصر <input> مهم ترین و شناخته شده ترین عنصر یک فرم است. ظاهر این تگ بر اساس attribute ای به نام type تغییر می کند و بستگی دارد که ما به این attribute چه مقداری داده باشیم:(ایران گستر)

Type	توضیحات
<input type=”text”>	یک فیلد متنی خالی به ما می دهد
<input type=”radio”>	یک radio button به ما می دهد (انتخاب یک گزینه بین چند گزینه)
<input type=”submit”>	یک submit button به ما می دهد (برای ثبت نهایی و ارسال فرم)

حالت `<"input type="text>`

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

<!DOCTYPE html>

<html>

<body>

<h2>Text Input</h2>

<form>

نام:<br>

<br>

نامخانوادگی:<br>

</form>

<pdir='rtl'>توجهداشتهباشیدکهخودتگformقابلمشاهدهنیست.</p>

<p>همچنینبایدبدانیدکهعرضپیشفرضاینفیلد20کاراکتراست</p>

</body>

</html>

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

نکته: در مورد این فرم باید به دو مورد توجه کرد؛ اولا خود تگ form قابل مشاهده نیست و ثانیا عرض پیشفرض فیلدهای text برابر با 20 کاراکتر است.(ایران گستر)

حالت `<"input type="radio>`

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

<!DOCTYPE html>

<html>

<body>

<h2>Radio Buttons</h2>

<form>

<input type="radio"name="gender"value="other">نمیخواهماعلامکنم

</form>

</body>

</html>

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

حالت `<"input type="submit>`

در این نوع type، دکمه ای برای ارسال نهایی فرم به form-handler ایجاد می شود. form-handler ها در اکثر اوقات صفحات اسکریپت نویسی شده ای هستند که اطلاعات کاربر را پردازش می کنند. این صفحات در attribute ای به نام action آدرس دهی می شوند. به مثال زیر نگاه کنید:(ایران گستر)

<!DOCTYPE html>

<html>

<body>

<h2>HTML Forms</h2>

First name:<br>

<br>

Last name:<br>

</form>

<pdir='rtl'>اگربررویدکمهیsubmitکلیککنیداطلاعاتفرمبهصفحهی"https://www.w3schools.com/action_page.php"ارسالمیشود</p>

</body>

</html>

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

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

وظیفه ی action

attribute ای به نام action در تمام فرم ها وجود دارد (به غیر از موارد معدودی که استثناء هستند) و تعیین می کند که پس از ثبت نهایی فرم و ارسال آن چه اتفاقی بیفتد. البته خودِ action کاری انجام نمی دهد بلکه فرم و اطلاعاتش را به صفحه ی اسکریپتی هدایت می کند تا پردازش شود و عکس العملی نشان دهد.(ایران گستر)

در مثال بالا، فرم به صفحه ای به نام action_page.php ارسال شد که شامل اسکریپت های server-side (مانند PHP یا ASP.NET و …) است:(ایران گستر)

1	<form action="/action_page.php">

نکته: اگر action را کاملا حذف کنید، فرم به همان صفحه ای که در آن هستید ارسال می شود.(ایران گستر)

وظیفه ی target

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

مثال:

<!DOCTYPE html>

<html>

<body>

<h2>The target Attribute</h2>

<p>When submitting thisform,the result will be opened inanewbrowser tab:</p>

First name:<br>

<br>

Last name:<br>

</form>

</body>

</html>

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

مقادیر مجاز دیگر parent_ و top_ و یا نام یک iframe هستند.(ایران گستر)

وظیفه ی method

در فرم ها یک attribute بسیار مهم دیگری به نام method (به معنی «روش») وجود دارد. در واقع این attribute روش یا متد ارسال اطلاعات را مشخص می کند که یا می تواند GET باشد و یا POST.(ایران گستر)

مثالی از متد GET:

<!DOCTYPE html>

<html>

<body>

<h2>The method Attribute</h2>

<p>Thisform will be submitted using the GET method:</p>

First name:<br>

<br>

Last name:<br>

</form>

<p>پسازثبتفرمبهنوارآدرسمرورگرنگاهکنید.اطلاعاتثبتشدهرادرآنجامیبینید</p>

</body>

</html>

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

مثالی از متد POST:(ایران گستر)

<!DOCTYPE html>

<html>

<body>

<h2>The method Attribute</h2>

<p>Thisform will be submitted using the GET method:</p>

First name:<br>

<br>

Last name:<br>

</form>

<p>پسازثبتفرمبهنوارآدرسمرورگرنگاهکنید.هیچاطلاعاتیدرآنجادیدهنمیشود</p>

</body>

</html>

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

تفاوت GET و POST چیست؟

حالت پیش فرض مرورگر برای ارسال اطلاعات حالت GET است اما زمانی که از GET استفاده می شود تمام اطلاعات ثبت شده در نوار آدرس مرورگر نمایان خواهند بود (رجوع کنید به دو مثال بالا):(ایران گستر)

1	/action_page.php?firstname=Mickey&lastname=Mouse

نکاتی در مورد GET:(ایران گستر)

داده های فرم را به صورت جفت های name/value در URL قرار می دهد
طول این URL محدود است (حدود 3000 کاراکتر)
هیچ گاه برای ارسال اطلاعات حساس مانند رمز عبور از GET استفاده نکنید چرا که در نوار آدرس مرورگر قابل مشاهده خواهد بود
مناسب برای کاربرانی که می خواهند نتایج را Bookmark کنند
GET معمولا مناسب موقعیت هایی است که هیچ اطلاعات حساسی در آن رد و بدل نمی شود، مانند query string های گوگل زمانی که چیزی را در آن سرچ می کنید

اما اگر داده های شما حاوی اطلاعات مهم، شخصی، حساس و … است حتما باید از POST استفاده کنید. این متد داده های شما را در نوار آدرس نشان نمی دهد

نکاتی در مورد POST:

POST هیچ محدودیت اندازه ای ندارد و می توانید از طریق آن حجم بزرگی از داده ها را ارسال کنید
نتایجی که با POST ارسال شوند قابل bookmark شدن نخواهند بود

وظیفه ی name

هر فیلد ورودی (input) باید یک name داشته باشد و اگر فیلدی آن را نداشته باشد، داده های درون آن فیلد اصلا ارسال نمی شوند.(ایران گستر)

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

<!DOCTYPE html>

<html>

<body>

<h2>The name Attribute</h2>

First name:<br>

<br>

Last name:<br>

</form>

</body>

</html>

جمع کردن داده در فرم ها

عنصر <fieldset> داده های مرتبط با هم را در یک گروه جمع می کند. تگ <legend> نیز توضیحی درباره ی <fieldset> ارائه می کند. به مثال زیر دقت کنید:(ایران گستر)

<!DOCTYPE html>

<html>

<body>

<h2>Grouping Form Data with Fieldset</h2>

<p>The fieldset element isused togroup related data inaform,andthe legend element definesacaption forthe fieldset element.</p>

<legend>Personal information:</legend>

First name:<br>

<br>

Last name:<br>

</fieldset>

</form>

</body>

</html>

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

:: بازدید از این مطلب : 18

امتیاز مطلب : 0

تعداد امتیازدهندگان : 0

مجموع امتیاز : 0

تاریخ انتشار : جمعه 26 مهر 1398 | نظرات ()

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

نوشته شده توسط : فاطمه فیصلی

HTML

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

HTML[/caption]

آشنایی با XHTML

به زبان ساده، XHTML همان HTML است که به صورت XML نوشته شده باشد.(ایران گستر)

XHTML مخفف EXtensible HyperText Markup Language و به معنی «زبان امتدادپذیر نشانه‌گذاری فرامتنی» است اما نگذارید این اسم های قلمبه و سلمبه شما را فریب دهد! XHTML دقیقا مانند HTML نوشته می شود اما قوانین سخت گیرانه تری دارد و همانطور که گفتیم انگار می خواهیم HTML را به صورت یک برنامه ی XML بنویسیم. همچنین قابل ذکر است که XHTML توسط تمام مرورگر های مطرح پشتیبانی می شود.(ایران گستر)

چرا XHTML ؟

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

<html>

<head>

<title>Thisisbad HTML</title>

<body>

<h1>Bad HTML

<p>Thisisaparagraph

</body>

به نظر شما مشکل کد بالا چیست؟

کد بالا در وهله ی اول هیچ DOCTYPE ای ندارد و مشخص نکرده است که از چه ورژنی از HTML استفاده می کند. همچنین تگ <html> را در آخر سند بسته نشده است و هیچ تگ پایانی را مشاهده نمی کنیم. این اتفاق برای تگ های <head> و <h1> و <p> نیز اتفاق افتاده است.(ایران گستر)

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

از طرفی XML نوعی زبان نشانه گذاری است که در آن باید قوانین نشانه گذاری را به طور کامل رعایت کرد. همانطور که حدس می زنید ترکیب XML و HTML همان XHTML می باشد.(ایران گستر)

خصوصیات XHTML

برخی از مهم ترین خصوصیات زبان XHTML از این قرار اند:(ایران گستر)

تعریف DOCTYPE در این زبان اجباری است
تعریف attribute ای به نام xmlns در <html> اجباری است
وجود داشتن تگ های <html> و <head> و <title> و <body> در یک سند اجباری است
عناصر XHTML باید به صورت کاملا صحیح nest شوند (تو در تو قرار بگیرند)
تمام عناصر XHTML باید همیشه بسته شوند (تگ پایانی)
تمام عناصر XHTML باید با حروف کوچک نوشته شوند
اسناد XHTML باید حتما یک عنصر root (ریشه ای) داشته باشند
نام attribute ها باید همیشه با حروف کوچک نوشته شود
مقدار attribute ها باید در Quotation قرار بگیرد
خلاصه سازی attribute ها غیر مجاز است.

1- خلاصه سازی attribute ها یعنی مواردی مثل مورد زیر:(ایران گستر)

اگر به جای نوشتن <"option selected="selected> بنویسید <option selected> می گوییم attribute (در اینجا selected) را خلاصه کرده اید.

می خواهیم این موارد را به صورت خلاصه بررسی کنیم.(ایران گستر)

اعلام DOCTYPE

یک سند XHTML باید علاوه بر DOCTYPE شامل تگ های <html> و <head> و <title> و <body> باشد.

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

<!DOCTYPE html PUBLIC"-//W3C//DTD XHTML 1.0 Transitional//EN"

"http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">

<head>

<title>Title of document</title>

</head>

<body>

some content

</body>

</html>

DOCTYPE ای که در بالا می بینید، نحوه ی اعلام DOCTYPE به عنوان XHTML است.

تو در تو بودن (nesting)

در زبان HTML بعضا می توانیم اشتباها عناصر را nest کنیم:(ایران گستر)

1	<b><i>Thistext isbold anditalic</b></i>

در این کد تگ های پایانی جا به جا بسته شده اند.

اما در XHTML باید کاملا صحیح nest شوند:

1	<b><i>Thistext isbold anditalic</i></b>

تگ های پایانی

در HTML این کد غلط است:(ایران گستر)

1 2	<p>Thisisaparagraph <p>Thisisanother paragraph

و این حالت صحیح است:(ایران گستر)

1 2	<p>Thisisaparagraph</p> <p>Thisisanother paragraph</p>

حتی تگ هایی که در HTML تگ پایانی ندارند باید در XHTML بسته شوند. در HTML این تگ ها به این صورت هستند:(ایران گستر)

Abreak:<br>

Ahorizontal rule:<hr>

An image:<img src="happy.gif"alt="Happy face">

اما در XHTML باید به این شکل نوشته شوند:

Abreak:<br/>

Ahorizontal rule:<hr/>

An image:<img src="happy.gif"alt="Happy face"/>

همچنین همیشه باید تگ هایتان با حروف کوچک باشند بنابراین کد زیر غلط است:(ایران گستر)

<BODY>

<P>Thisisaparagraph</P>

</BODY>

حالت صحیح این کد به این صورت است:(ایران گستر)

<body>

<p>Thisisaparagraph</p>

</body>

Attribute ها

کوچک بودن حروف برای attribute ها نیز صدق می کند، بنابراین کد زیر غلط است:(ایران گستر)

1	<table WIDTH="100%">

و شکل صحیح آن بدین صورت است:

1	<table width="100%">

همچنین باید مقدار این attribute ها در quotation باشد. کد زیر غلط است:(ایران گستر)

1	<table width=100%>

و شکل صحیح آن بدین صورت است:

1	<table width="100%">

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

کد غلط:

1	<input type="checkbox"name="vehicle"value="car"checked/>

حالت صحیح آن:(ایران گستر)

1	<input type="checkbox"name="vehicle"value="car"checked="checked"/>

کد غلط:(ایران گستر)

1	<input type="text"name="lastname"disabled/>

حالت صحیح آن:(ایران گستر)

1	<input type="text"name="lastname"disabled="disabled"/>

سوال: چطور می توانیم از HTML به XHTML مهاجرت کنیم؟(ایران گستر)

پاسخ: ابتدا باید یک DOCTYPE برای XHTML بنویسید و DOCTYPE قبلی را حذف کنید. سپس attribute ای به نام xmlns را به خودِ عنصر html اضافه کنید. سپس نام تمامی عناصر را با حروف کوچک بنویسید و این کار را با attribute ها نیز انجام دهید. در آخر تگ های خالی (تگ هایی که تگ پایانی ندارند) را ببندید و برای مقادیر attribute ها Quotation قرار دهید.(ایران گستر)

یک مثال از یک سند XHTML برای شما آورده ام:

<?xml version="1.0"encoding="UTF-8"?>

<!DOCTYPE html

PUBLIC"-//W3C//DTD XHTML 1.0 Strict//EN"

"DTD/xhtml1-strict.dtd">

<head>

<title>Strict DTD XHTML Example</title>

</head>

<body>

<p>

Please ChooseaDay:

<option selected="selected">Monday</option>

<option>Tuesday</option>

<option>Wednesday</option>

</select>

</p>

</body>

</html>

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

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

:: بازدید از این مطلب : 22

امتیاز مطلب : 0

تعداد امتیازدهندگان : 0

مجموع امتیاز : 0

تاریخ انتشار : جمعه 26 مهر 1398 | نظرات ()

7 ویژگی بارز سیستم عامل مک او اس Catalina (ایران گستر)

نوشته شده توسط : فاطمه فیصلی

macOS

ایران گستر در صدد آن است تا اخبار و تکنولوژی های روز IT , اخبار گوگل ,اپلیکیشن های کاربردی (بدافزار ها) یا مفید را در اختیار شما عزیزان قرار دهد تا شما عزیزان با مطالعه آنها وارد این دنیای شیرین و پر چالش شوید و آنها را در کسب و کار و زندگی خود به کار گیرید.

سیستم عامل مک او اس Catalina

اپل رسما عرضه سیستم عامل مک او اس Catalina را آغاز کرد. از کاتالینا به عنوان یکی از مهم‌ترین بروزرسانی‌های macOS یاد می‌شود چرا که ویژگی‌های جدیدی را در خود جای داده و می‌تواند تجربه لذت‌بخشی از کار با محصولات مجهز به این سیستم عامل را برای کاربران به ارمغان آورد.(ایران گستر)

در مک او اس Catalina آی‌تیونز به چندین برنامه تجزیه شده و اپل Arcade نیز با بیش از 100 بازی در این نسخه جای گرفته است. با قابلیت Sidebar نیز این امکان برای کاربران فراهم می‌شود تا بتوانند آیپد خود را به نمایشگر ثانویه مک تبدیل کنند. در ادامه به طور مفصل‌تر به این ویژگی‌ها اشاره خواهیم کرد.(ایران گستر)

اپلیکیشن‌های جداگانه‌ای برای Music، TV و Podcasts

آی‌تیونز بعد از چند سال گنجاندن انواع محتوا در خود، بالاخره به چندین برنامه تقسیم شد. حال آی‌تیونز در مک او اس Catalina به اپلیکیشن‌های مستقل Music، TV و Podcasts تجزیه شده است. قابلیت Finder نیز به گونه‌ای طراحی شده که از مدیریت دستگاه‌های iOS نیز پشتیبانی می‌کند. این امکان برای کاربران فراهم شده تا از طریق سایدبار Finder بتوانند آیفون یا آیپد خود را با کمک قابلیت Locations پیدا کنند.(ایران گستر)

Sidecar

یکی از ویژگی‌های جدیدی که در مک او اس Catalina تعبیه شده، امکان استفاده از آیپد به عنوان نمایشگر ثانویه برای دستگاه‌های مک است. از این قابلیت می‌توان به صورت سیمی‌و یا بدون‌سیم (وایرلس) استفاده و ارتباط میان دستگاه‌ها را برقرار کرد.(ایران گستر)

Screen Time

این ویژگی برای اولین بار در iOS 12 برای مدیریت میزان استفاده از دستگاه‌های آیفون و آیپد طراحی شد و اکنون راه خود را به دستگاه‌های مک باز کرده است.(ایران گستر)

اپل آرکید

سرویس آرکید که به همراه نسخه iOS 13 و iPadOS 13 در اختیار کاربران آیفون و آیپد قرار گرفت. اما در نسخه کاتالینا، بیش از 100 بازی به سرویس Arcade در مک اضافه شده که کاربر می‌تواند کنترلرهای وایرلس ایکس‌باکس و پلی استیشن 4 Dual Shockرا به آن متصل و استفاده کند.(ایران گستر)

Find My

اپلیکیشن جدید Find My تلفیقی از اپلیکیشن‌های Find My Friends و Find My Phones است. با این قابلیت کاربران می‌توانند دستگاه‌های خود را پیدا کنند حتی اگر خاموش باشند.(ایران گستر)

اپلیکیشن‌های بروزرسانی‌شده

اپل در مک او اس Catalina اپلیکیشن‌هایی همچون Photos، Reminders، Notes، Mail و Safari را برزورسانی کرده که ارتقای قابلیت‌های آن‌ها را به دنبال داشته است. همچنین تغییراتی نیز در قابلیت‌های امنیتی این سیستم عامل ایجاد شده که از جمله آن‌ها می‌توان به ارتقای عملکرد Gatekeeper و Activation Lock به لطف استفاده از تراشه T2 اشاره کرد.(ایران گستر)

دسترسی سریع‌تر

اپل در مک او اس Catalina ویژگی جدیدی را تحت عنوان Voice Control اضافه کرده که با کمک آن، کاربر می‌تواند هدایت دستگاه‌های مک خود را از طریق فرامین صوتی در دست بگیرد.(ایران گستر)

:: بازدید از این مطلب : 21

امتیاز مطلب : 0

تعداد امتیازدهندگان : 0

مجموع امتیاز : 0

تاریخ انتشار : چهار شنبه 24 مهر 1398 | نظرات ()

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

نوشته شده توسط : فاطمه فیصلی

HTML

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

HTML[/caption]

نمایش کدهای کامپیوتری

وقتی می گوییم کدهای کامپیوتری یعنی کدهایی که به یکی از زبان های برنامه نویسی یا نشانه گذاری یا … تعلق داشته باشد. اگر به کدهای کامپیوتری نگاه کرده باشید متوجه می شوید که از نظر ظاهری کمی با متون عادی متفاوت هستند. ما می خواهیم در این قسمت این حالت را در HTML به وجود بیاوریم.(ایران گستر)

کد های کامپیوتری تنها متونی نیستند که از نظر ظاهری چنین تفاوت هایی دارند، بلکه ورودی های کیبورد (مثلا وقتی می گوییم کلیدهای Ctrl و S را برای ذخیره سازی فشار دهید و …) و موارد دیگری نیز در این گروه هستند و ما می خواهیم تک تک آن ها را بررسی کنیم.(ایران گستر)

ورودی های صفحه کلید

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

<!DOCTYPE html>

<html>

<body>

<h2>The kbd Element</h2>

<p>The kbd element represents user input:</p>

<p>Save the document by pressing<kbd>Ctrl+S</kbd></p>

</body>

</html>

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

به خروجی بروید تا قسمت Ctrl و S را در فونت monospace مشاهده کنید.(ایران گستر)

خروجی برنامه ها

معمولا برای نمایش خروجی یک کد برنامه نویسی یا یک برنامه ی کامپیوتری از تگ <samp> استفاده می کنند. متنی که در این تگ نوشته شود نیز با فونت monospace مرورگر نمایش داده خواهد شد. مثال:(ایران گستر)

<!DOCTYPE html>

<html>

<body>

<h2>The samp Element</h2>

<p>The samp element represents output fromaprogram orcomputing system:</p>

<p>Ifyou input wrong value,the program will return<samp>Error!</samp></p>

</body>

</html>

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

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

کدهای برنامه نویسی مهم ترین و شایع ترین دلیل استفاده از این نوع فونت هستند و شکل کاملا متفاوتی دارند. اگر شما بخواهید قسمتی از کدی را در وب سایت خود نمایش دهید می توانید از تگ <code> استفاده کنید تا کدها در فونت monospace به نمایش در بیایند.(ایران گستر)

در مثال زیر چند خط کد ساده را نوشته ایم:

<!DOCTYPE html>

<html>

<body>

<h2>The code Element</h2>

<p>Programming code example:</p>

<code>

x=5;

y=6;

z=x+y;

</code>

</body>

</html>

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

حتما متوجه نکته ای شده اید. در خروجی ما اینترها رعایت نشده اند و تمام کد در یک خط نوشته شده است، به این شکل:

x = 5; y = 6; z = x + y;

اما معمولا هنگام کدنویسی کسی اینطور کد نمی نویسد بنابراین راه حل چیست؟ تگ <code> مانند خود HTML کاری با اینترها و فضای خالی ندارد. برای آنکه اینترها (البته نحوه ی صحیح بیان آن line break است) را رعایت کنیم باید از تگ <pre> استفاده شود:(ایران گستر)

<!DOCTYPE html>

<html>

<body>

<p>The code element does notpreserve whitespace andline-breaks.</p>

<p>Tofix this,you can put the code element insideapre element:</p>

<pre>

<code>

x=5;

y=6;

z=x+y;

</code>

</pre>

</body>

</html>

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

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

<!DOCTYPE html>

<html>

<body>

<h2>The varElement</h2>

<p>Einstein wrote:<var>E</var>=<var>mc</var><sup>2</sup>.</p>

</body>

</html>

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

سوال: چه تفاوتی دارد که از کدام یک از این تگ ها استفاده کنیم؟ همه ی آن ها ظاهر یکسانی دارند.(ایران گستر)

پاسخ: بله درست است، تمام آن ها ظاهر یکسانی دارند و با فونت monospace نمایش داده می شوند اما شما نباید برای نمایش همه ی آن ها از یک تگ استفاده کنید. دلیل اش هم این است که این تگ ها برای موتور های جست و جو معنی دارند و به مبحث کدنویسی Semantic (به معنی «معنایی») مربوط می شوند. یک موتور جست و جو می تواند به دیدن این تگ ها بفهمد که محتوای روبرویش چیست و آن را بهتر درک کند.(ایران گستر)

HTML Entities و کاراکترهای رزرو شده

برخی از کاراکترها در زبان های برنامه نویسی رزرو شده هستند؛ برخی کاراکترها نیز در زبان HTML رزرو شده هستند یعنی در زبان HTML معنی خاصی دارند (مثلا کاراکترهای < و > که نشان دهنده ی تگ ها هستند). حالا اگر بخواهیم از این کاراکترها به صورت عادی در متن صفحاتمان استفاده کنیم چه می شود؟ باید از HTML Entities استفاده کنید. در واقع برای دو هدف اصلی از HTML Entities استفاده می شود:(ایران گستر)

زمانی که کاراکتر مورد نظر ما در زبان HTML رزرو شده باشد
زمانی که کاراکتر مورد نظر ما اصلا روی کیبورد وجود نداشته باشد

به طور مثال اگر بخواهیم از علامت کمتری یا بیشتری (> <) در متن خود استفاده کنیم، ممکن است مرورگر تصور کند در حال نوشتن HTML هستیم و تمام متن ما را خراب کند.(ایران گستر)

معمولا ساختار کلی entity ها به این شکل است:

&entity_name;

&#entity_number;

به طور مثال برای حل مشکل استفاده از علامت کمتری باید از ;&lt یا ;&#60 استفاده کنیم! مزیت استفاده از entity ها آسان بودن حفظ و کار با آن ها است اما نکته ی منفی آن ها این است که برخی از مرورگر ها از تمام entity پشتیبانی نمی کنند و باید مواظب این مورد باشید.(ایران گستر)

کاراکتر Non-breaking Space

کاراکتری در زبان HTML وجود دارد به نام Non-breaking Space (به معنی «اسپیس غیر شکستنی») که به این شکل نوشته می شود: ;&nbsp .(ایران گستر)

ما از آن جهت به این کاراکتر اسپیس غیر شکستنی می گوییم که اگر دو کلمه با این اسپیس از هم جدا شوند دیگر در آخر خط شکسته نمی شوند و یکی از آن ها به خط بعد نمی رود بلکه همیشه به هم چسبیده اند. تصور کنید می خواهیم بگوییم 10 کیلومتر بر ساعت؛ باید آن را اینطور بنویسیم:(ایران گستر)

10 km/h

مواردی مانند بالا (10 کیلومتر بر ساعت) نباید از هم جدا شوند چرا که قسمت عددی مقدار را نشان می دهد و قسمت حرفی نیز واحد آن را نشان می دهد، اما در عین حال باید بینشان اسپیس باشد و به هم نچسبند. در این حالت از Non-breaking Space استفاده می کنیم.(ایران گستر)

اما استفاده ی اصلی از Non-breaking Space زمانی است که می خواهیم چندین اسپیس را در متن خود داشته باشیم اما همانطور که می دانید HTML اسپیس های بیشتر از یک عدد را حذف می کند و به آن ها اهمیت نمی دهد. اگر در سورس کد خود تنها اسپیس بزنید هیچ اتفاقی نمی افتد اما اگر از Non-breaking Space استفاده کنید اسپیس ها سر جایشان خواهند ماند.(ایران گستر)

دیگر Entity ها

در اینجا لیست برخی از Entity های مختلف در زبان HTML را برایتان آورده ایم:

کد عددی Entity	کد حرفی Entity	نام یا توضیح	نتیجه
		non-breaking space
<	<	کمتر از (در فارسی برعکس است)	<
>	>	بیشتر از (در فارسی برعکس است)	>
&	&	علامت ampersand	&
“	"	علامت نقل قول double	“
‘	'	علامت نقل قول single	‘
¢	¢	سنت (پول)	¢
£	£	پوند (پول)	£
¥	¥	ین (پول)	¥
€	€	یورو (پول)	€
©	©	علامت کپی رایت (حق انتشار)	©
®	®	علامت تجاری ثبت شده	®

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

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

:: بازدید از این مطلب : 16

امتیاز مطلب : 0

تعداد امتیازدهندگان : 0

مجموع امتیاز : 0

تاریخ انتشار : چهار شنبه 24 مهر 1398 | نظرات ()

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

نوشته شده توسط : فاطمه فیصلی

HTML

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

HTML[/caption]

طراحی واکنش گرا چیست؟

طراحی واکنش گرا نوعی از طراحی سایت بوده که در سال های اخیر باب شده است و هدف اصلی آن استفاده از HTML و CSS به طوری است که ظاهر و سایز صفحات را بر اساس نیازشان تغییر دهد.(ایران گستر)

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

می خواهیم چند مورد از مواردی را که در این زمینه کاربرد دارند برایتان بازگو کنیم.(ایران گستر)

تصحیح Viewport

اولین قدم برای واکنش گرا کردن یک سایت تنظیم viewport آن با استفاده از <meta> می باشد. در دو مثال زیر تفاوت استفاده از آن را متوجه می شوید:(ایران گستر)

مثال اول

<!DOCTYPE html>

<html>

<body>

<p><b>Tounderstand thisexample,you should open thispage onaphone oratablet.</b></p>

<p>

Lorem ipsum dolor sit amet,consectetuer adipiscing elit,sed diam nonummy nibh euismod tincidunt ut laoreet dolore magna aliquam erat volutpat.

Ut wisi enim ad minim veniam,quis nostrud exerci tation ullamcorper suscipit lobortis nisl ut aliquip ex ea commodo consequat.Duis autem vel eum iriure dolor inhendrerit invulputate velit esse molestie consequat,vel illum dolore eu feugiat nulla facilisis at vero eros et accumsan et iusto odio dignissim qui blandit praesent luptatum zzril delenit augue duis dolore te feugait nulla facilisi.Nam liber tempor cum soluta nobis eleifend option congue nihil imperdiet doming id quod mazim placerat facer possim assum.

Nam liber tempor cum soluta nobis eleifend option congue nihil imperdiet doming id quod mazim placerat facer possim assum.

</p>

</body>

</html>

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

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

مثال دوم

<!DOCTYPE html>

<html>

<head>

<style>

img {

max-width:100%;

height:auto;

}

</style>

</head>

<body>

<p><b>Tounderstand thisexample,you should open thispage onaphone oratablet.</b></p>

<p>

Lorem ipsum dolor sit amet,consectetuer adipiscing elit,sed diam nonummy nibh euismod tincidunt ut laoreet dolore magna aliquam erat volutpat.

Nam liber tempor cum soluta nobis eleifend option congue nihil imperdiet doming id quod mazim placerat facer possim assum.

</p>

</body>

</html>

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

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

استفاده از تصاویر واکنش گرا

تصاویر واکنش گرا تصاویری هستند که با تغییر سایز صفحه، سایزشان تغییر می کند. اگر خاصیت width را برابر با 100 درصد گذاشته باشید، تصاویر از نوع واکنش گرا خواهند بود و سایزشان تغییر می کند.(ایران گستر)

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

<!DOCTYPE html>

<html>

<body>

<h2>Responsive Image</h2>

<pdir='rtl'>اگرخاصیت width رابرابربا100درصدگذاشتهباشید،تصاویرازنوعواکنشگراخواهندبودوسایزشانتغییرمیکند.</p>

</body>

</html>

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

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

البته مشکلی وجود دارد؛ اگر سایز قسمت خروجی را بزرگتر از سایز عادی اش بکنید، تصویر نیز بزرگتر از سایز عادی اش می شود و صفحه را زشت می کند. برای آنکه به تصاویر اجازه ندهیم از سایز مشخصی بزرگتر شوند می توانیم به جای استفاده از خاصیت width از خاصیت max-width استفاده کنیم.(ایران گستر)

در این صورت شاهد مثال زیر می شویم:

<!DOCTYPE html>

<html>

<body>

<h2>Responsive Image</h2>

<pdir='rtl'>اگرخاصیت max-width رابرابربا100درصدگذاشتهباشید،تصاویرازنوعواکنشگراخواهندبودوسایزشانتغییرمیکند.

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

</p>

</body>

</html>

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

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

استفاده از تصاویر متفاوت

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

<!DOCTYPE html>

<html>

<body>

<h2>Show Different Images Depending on Browser Width</h2>

<p>Resize the browser width andthe image will change at600pxand1500px.</p>

</picture>

</body>

</html>

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

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

نتها نکته ی منفی این دستور این است که با آپلود کردن چندین عکس برای هر قسمت از سایتتان، فضای زیادی از سرور را اشغال می کنید بنابراین پیشنهاد ما این است که از این قابلیت تنها در جاهایی استفاده کنید که با کدنویسی جواب نگرفته اید.(ایران گستر)

متون واکنش گرا

با بزرگ و کوچک شدن یک صفحه، متون ما نیز باید کوچک و بزرگ شوند، در غیر این صورت یا صفحه ظاهر زشتی پیدا می کند و یا خواندن مطالب خیلی سخت می شود. برای واکنش گرا کردن یک متن باید سایز آن را با واحد vw تنظیم کنیم و از مقادیری مثل پیکسل و … دوری کنیم. به کد زیر نگاه کنید:(ایران گستر)

<!DOCTYPE html>

<html>

<body>

<h1 style="font-size:10vw;">Responsive Text</h1>

<pdir='rtl'style="font-size:5vw;">باتغییرسایزاینقسمتمتوجهمیشویدکهاندازهیفونتونوشتهیمانیزتغییرمیکند.</p>

<pdir='rtl'style="font-size:5vw;">اگراز10vwاستفادهکنیداندازهیفونتشما10درصدازکلviewportراخواهدگرفت.</p>

<p>Viewport isthe browser window size.1vw=1%of viewport width.Ifthe viewport is50cmwide,1vwis0.5cm.</p>

</body>

</html>

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

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

استفاده از Media Queries

media query ها دستور هایی متعلق به CSS هستند که می توان با استفاده از آن ها طرح صفحات را کاملا تغییر داد به طوری که کاربر فکر می کند وارد سایت دیگری شده است! بهترین روش یادگیری آن از طریق مثال است بنابراین بیایید کدهای زیر را بررسی کنیم:(ایران گستر)

<!DOCTYPE html>

<html>

<head>

<style>

* {

box-sizing:border-box;

}

.left {

background-color:#2196F3;

padding:20px;

float:left;

width:20%;/* The width is 20%, by default */

}

.main {

background-color:#f1f1f1;

padding:20px;

float:left;

width:60%;/* The width is 60%, by default */

}

.right {

background-color:#4CAF50;

padding:20px;

float:left;

width:20%;/* The width is 20%, by default */

}

/* Use a media query to add a break point at 800px: */

@media screen and (max-width:800px) {

.left, .main, .right {

width:100%;/* The width is 100%, when the viewport is 800px or smaller */

}

</style>

</head>

<body>

<h2>Media Queries</h2>

<p>Resize the browser window.</p>

<pdir='rtl'>قسمتخروجیراکوچکترکنیدتابه800pxبرسد.آنموقعمتوجهتغییرمیشوید

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

</p>

</div>

<p>Main Content</p>

</div>

<p>Right Content</p>

</div>

</body>

</html>

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

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

@media screen and (max-width:800px)

این دستور یک media query است و می گوید زمانی که عرض صفحه به 800 پیکسل رسید، استایل های قبلی را فراموش کن و استایل هایی که من می گویم را اعمال کن. به همین دلیل است که شاهد تغییر محتوا در عرض 800 پیکسل هستیم. در مورد media query ها در دوره ی آموزش زبان CSS بیشتر صحبت خواهیم کرد.(ایران گستر)

استفاده از فریم ورک های CSS

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

<!DOCTYPE html>

<head>

<title>Bootstrap Example</title>

</head>

<body>

<h1>My First Bootstrap Page</h1>

<p>Resize thisresponsive page tosee the effect!</p>

</div>

<h3>Column1</h3>

<p>Lorem ipsum dolor sit amet,consectetur adipisicing elit...</p>

<p>Ut enim ad minim veniam,quis nostrud exercitation ullamco laboris...</p>

</div>

<h3>Column2</h3>

<p>Lorem ipsum dolor sit amet,consectetur adipisicing elit...</p>

<p>Ut enim ad minim veniam,quis nostrud exercitation ullamco laboris...</p>

</div>

<h3>Column3</h3>

<p>Lorem ipsum dolor sit amet,consectetur adipisicing elit...</p>

<p>Ut enim ad minim veniam,quis nostrud exercitation ullamco laboris...</p>

</div>

</body>

</html>

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

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

:: بازدید از این مطلب : 20

امتیاز مطلب : 0

تعداد امتیازدهندگان : 0

مجموع امتیاز : 0

تاریخ انتشار : چهار شنبه 24 مهر 1398 | نظرات ()

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

نوشته شده توسط : فاطمه فیصلی

HTML

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

HTML[/caption]

طرح کلی صفحات HTML

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

semantic در لغت به معنی «معنایی» است و وقتی می گوییم عناصرِ semantic، منظورمان عناصری است که در HTML5 دیگر تنها یک عنصر نیستند، بلکه برای موتورهای جست و جو معنی خاصی دارند.(ایران گستر)

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

<header> مسئول تعریف قسمت header در سایت ها است
<nav> مسئول تعریف منوی سایت ها (نوار navigation) است
<section> مسئول تعریف یک قسمت در سایت ما است
<article> مسئول تعریف قسمتی مستقل است که دارای مقاله ای از سایت ما است
<aside> مسئول تعریف قسمت کناری و جانبی سایت است
<footer> مسئول تعریف قسمت footer در سایت ها است
<details> مسئول تعریف جزئیات بیشتر در صفحات وب است
<summary> مسئول تعریف یک heading برای عنصر <details> است.(ایران گستر)

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

طرح کلی HTML5

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

برای ایجاد این نوع طرح چند ستونه 5 روش اصلی وجود دارد:(ایران گستر)

استفاده از جداول HTML (این مورد منسوخ شده است و به هیچ عنوان پیشنهاد نمی شود.
استفاده از خاصیت float در CSS
استفاده از flexbox در CSS
استفاده از framework های زبان CSS
استفاده از grid ها در CSS (ایران گستر)

جداول HTML

در سال های قبل (بسیار قبل تر از معرفی HTML5) طراحان مجبور بودند برای طراحی سایت های چند ستونه (طرح موجود در تصویر بالا) از <table> یا همان جدول ها در HTML استفاده کنند. واضح است که جدول ها برای شکل دهی به صفحات وب ساخته نشده اند بلکه برای نمایش داده های خاص که نیاز به جدول دارند می باشند.(ایران گستر)

استفاده از <table> برای شکل دادن به صفحات وب تان کاری بسیار طاقت فرسا و غیر استاندارد است که کاملا منسوخ شده و هیچ انسان عاقلی دیگر از آن استفاده نمی کند.(ایران گستر)

فریم ورک های CSS

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

فریم ورک Bulma

[caption id="attachment_77302" align="aligncenter" width="750"] Bulma CSS Framework[/caption]

فریم ورک Bulma یکی از محبوب ترین فریم ورک های CSS است که قبلا با نام Scotch شناخته میشد. از مزیت های اصلی این فریم ورک این است که از CSS خالص تشکیل شده است و هیچ کد جاوا اسکریپتی ندارد؛ بنابراین تنها باید یک فایل css را درون پروژه ی خود import کنید و نیازی به فایل های js نیست.(ایران گستر)

همچنین این فریم ورک بر اساس Flexbox طراحی شده است و بر پایه ی Sass می باشد بنابراین تنها از کدهایی استفاده خواهید کرد که به آن ها نیاز داشته باشید. طراحی با این فریم ورک کاملا واکنش گرا (responsive) بوده و اولویت خود را بر گوشی های موبایل قرار داده است.(ایران گستر)

فریم ورک Bootstrap

[caption id="attachment_77313" align="aligncenter" width="750"] Bootstrap Framework[/caption]

فکر نمی کنم Bootstrap نیاز به معرفی داشته باشد! Bootstrap یکی از بزرگترین فریم ورک های CSS در دنیا می باشد که تا امروز به نسخه ی چهارم خود رسیده است. این فریم ورک، فریم ورک پیش فرض اکثر توسعه دهندگان وب است و بر اساس SASS و LESS ساخته شده است. می توان به صورت خلاصه گفت که Bootstrap بزرگترین فریم ورک CSS محسوب می شود.(ایران گستر)

فریم ورک های بسیار دیگری نیز وجود دارد اما ما نمی توانیم تمام آن ها را بررسی کنیم. این دو مورد از موارد مشهور در کنار فریم ورک Foundation هستند.(ایران گستر)

استفاده از خاصیت float در CSS

استفاده از خصوصیت float برای نظم دهی به صفحات وب و طراحی چند ستونه از شایع ترین روش های طراحی است. از مزیت های کار با float این است که یادگیری آن بسیار آسان است؛ تنها کافی است با خصوصیت های float و clear آشنا باشید. اما نکته ی منفی آن اینجاست که عناصر float وابسته به document flow (جریان عناصر در سند HTML) هستند که از انعطاف پذیری CSS کم می کند.(ایران گستر)

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

100

101

102

103

<!DOCTYPE html>

<head>

<title>CSS Template</title>

<style>

* {

box-sizing:border-box;

}

body {

font-family:Arial,Helvetica,sans-serif;

}

/* Style the header */

header {

background-color:#666;

padding:30px;

text-align:center;

font-size:35px;

color:white;

}

/* Create two columns/boxes that floats next to each other */

nav {

float:left;

width:30%;

height:300px;/* only for demonstration, should be removed */

background:#ccc;

padding:20px;

}

/* Style the list inside the menu */

nav ul {

list-style-type:none;

padding:0;

}

article {

float:left;

padding:20px;

width:70%;

background-color:#f1f1f1;

height:300px;/* only for demonstration, should be removed */

}

/* Clear floats after the columns */

section:after {

content:"";

display:table;

clear:both;

}

/* Style the footer */

footer {

background-color:#777;

padding:10px;

text-align:center;

color:white;

}

/* Responsive layout - makes the two columns/boxes stack on top of each other instead of next to each other, on small screens */

@media (max-width: 600px) {

nav, article {

width:100%;

height:auto;

}

</style>

</head>

<body>

<h2>CSS Layout Float</h2>

<p>Inthisexample,we have createdaheader,two columns/boxes andafooter.On smaller screens,the columns will stack on top of eachother.</p>

<p>Resize the browser window tosee the responsive effect(you will learn more about thisinour next chapter-HTML Responsive.)</p>

<h2>Cities</h2>

</header>

<nav>

<ul>

<li><ahref="#">London</a></li>

<li><ahref="#">Paris</a></li>

<li><ahref="#">Tokyo</a></li>

</ul>

</nav>

<h1>London</h1>

<p>London isthe capital city of England.It isthe most populous city inthe United Kingdom,withametropolitan area of over13million inhabitants.</p>

<p>Standing on the River Thames,London has beenamajor settlement fortwo millennia,its history going back toits founding by the Romans,who named it Londinium.</p>

</article>

</section>

<p>Footer</p>

</footer>

</body>

</html>

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

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

استفاده از Flexbox

قابلیت Flexbox نسبتا از قابلیت های جدید در CSS3 است. این قابلیت سعی می کند صفحات را طوری تنظیم کند که با تغییر سایز مرورگر کاربر و دستگاه های مختلف، صفحه به هم نریزد بلکه مناسب با آن سایز نمایش داده شود. در دوره ی CSS در این مورد صحبت خواهیم کرد.(ایران گستر)

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

100

101

102

103

104

<!DOCTYPE html>

<head>

<title>CSS Template</title>

<style>

* {

box-sizing:border-box;

}

body {

font-family:Arial,Helvetica,sans-serif;

}

/* Style the header */

header {

background-color:#666;

padding:30px;

text-align:center;

font-size:35px;

color:white;

}

/* Container for flexboxes */

section {

display:-webkit-flex;

display:flex;

}

/* Style the navigation menu */

nav {

-webkit-flex:1;

-ms-flex:1;

flex:1;

background:#ccc;

padding:20px;

}

/* Style the list inside the menu */

nav ul {

list-style-type:none;

padding:0;

}

/* Style the content */

article {

-webkit-flex:3;

-ms-flex:3;

flex:3;

background-color:#f1f1f1;

padding:10px;

}

/* Style the footer */

footer {

background-color:#777;

padding:10px;

text-align:center;

color:white;

}

/* Responsive layout - makes the menu and the content (inside the section) sit on top of each other instead of next to each other */

@media (max-width: 600px) {

section {

-webkit-flex-direction:column;

flex-direction:column;

}

</style>

</head>

<body>

<h2>CSS Layout Flexbox</h2>

<p>Inthisexample,we have createdaheader,two columns/boxes andafooter.On smaller screens,the columns will stack on top of eachother.</p>

<p>Resize the browser window tosee the responsive effect.</p>

<p><strong>Note:</strong>Flexbox isnotsupported inInternet Explorer10andearlier versions.</p>

<h2>Cities</h2>

</header>

<nav>

<ul>

<li><ahref="#">London</a></li>

<li><ahref="#">Paris</a></li>

<li><ahref="#">Tokyo</a></li>

</ul>

</nav>

<h1>London</h1>

<p>London isthe capital city of England.It isthe most populous city inthe United Kingdom,withametropolitan area of over13million inhabitants.</p>

<p>Standing on the River Thames,London has beenamajor settlement fortwo millennia,its history going back toits founding by the Romans,who named it Londinium.</p>

</article>

</section>

<p>Footer</p>

</footer>

</body>

</html>

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

استفاده از Grid View

ماژول Grid در CSS به شما اجازه می دهد تا طرحی داشته باشید که بر اساس یک Grid (به معنی «شبکه توری» یا «مشبک») باشد. به تصویر زیر نگاه کنید:(ایران گستر)

[caption id="attachment_77281" align="aligncenter" width="1944"] تفاوت صفحات طراحی شده با CSS Grid[/caption]

در این تصویر دو صفحه ی وب را می بینید. صفحه ی سمت راست بر اساس Grid طراحی شده است و همانطور که گفتیم Grid به شکل یک شبکه ی توری مانند است و خانه هایی را که می بینید، شکل می دهد. حالا می توانید عناصر خود را با دقت فراوان داخل این خانه ها قرار دهید. اگر از Grid استفاده کنید دیگر نیازی به استفاده از float و مدیریت فضای پیشرفته نخواهید داشت.(ایران گستر)

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

:: بازدید از این مطلب : 18

امتیاز مطلب : 0

تعداد امتیازدهندگان : 0

مجموع امتیاز : 0

تاریخ انتشار : چهار شنبه 24 مهر 1398 | نظرات ()

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

نوشته شده توسط : فاطمه فیصلی

HTML

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

HTML[/caption]

عنصر <head> چیست؟

عنصر <head> در یک سند HTML وظیفه ی نگه داری از metadata را دارد و بین <html> و <body> قرار می گیرد. metadata یعنی «داده هایی که در مورد داده های دیگر» هستند! به طور مثال وقتی می گوییم «metadata های سند HTML» یعنی اطلاعاتی درباره ی سند HTML (که خود اطلاعات است).(ایران گستر)

واضح است که metadata نمایش داده نمی شود و شکل بصری ندارد بلکه مواردی مثل این موارد را شامل می شود:(ایران گستر)

character set (مواردی مثل UTF-8)
document title (عنوان سند)
styles (استایل های CSS)
محل قرار گیری تگ های link و script
و دیگر اطلاعاتی که راجع به خودِ سند HTML باشد

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

تگ <title>

عنصر <title> عنوان و تیتر کل سند را انتخاب می کند و باید در تمام اسناد HTML وجود داشته باشد تا HTML شما غیر معتبر تلقی نشود.(ایران گستر)

به عبارت دیگر 3 کار اصلی <title> از این قرار است:(ایران گستر)

موضوع صفحه ی HTML را در تب مرورگر کاربر نمایش می دهد
اگر صفحه ای به favorites اضافه شود، عنوان آن همان محتوای <title> خواهد بود
تگ <title> همان چیزی است که در موتورهای جست و جو به عنوان لینک سایت شما می آید

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

<!DOCTYPE html>

<html>

<head>

<title>Page Title</title>

</head>

<p>محتوایbodyدرصفحهیمرورگرنمایشدادهمیشود</p>

<p>محتوایتگtitleنیزدرتبمرورگر،درfavoritesودرموتورهایجستوجوبهنمایشدرمیآید</p>

</body>

</html>

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

همانطور که می بینید این موضوع بسیار ساده بود.

تگ <style>

تگ <style> استایل های CSS را مشخص می کند.

ما در دوره ی CSS توضیح میدهیم که کدهای CSS به سه روش اصلی نوشته می شوند:

به صورت inline (به صورت attribute)
به صورت internal (در قسمت <head> از سند HTML)
به صورت external (در یک فایل جداگانه)

در واقع تگ <style> مورد دوم یا internal است. به مثال زیر توجه کنید:

<!DOCTYPEhtml>

<html>

<head>

<title>PageTitle</title>

<style>

body {background-color:powderblue;}

h1 {color:red;}

p {color:blue;}

</style>

</head>

<body>

<h1>ThisisaHeading</h1>

<p>Thisisaparagraph.</p>

</body>

</html>

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

استفاده از کدهای CSS به این صورت ایده آل ترین حالت ممکن نیست اما ضربه ی جدی نیز به شما نمی زند. معمولا در یک وب سایت واقعی از آن جا که کدهای CSS بسیار حجیم می شوند مجبور می شوید آن ها را در یک فایل جداگانه (external) بنویسید و سپس با استفاده از link آن ها را به سند HTML متصل کنید. این نوع از نوشتن کدهای CSS معمولا برای مباحث یادگیری و تمرین و یا کدهای CSS خاصی است که برنامه نویس می خواهد در آن قسمت قرار بگیرند.(ایران گستر)

تگ <link>

از تگ <link> برای آدرس دهی به یک فایل خارجی استفاده می شود که معمولا جاوا اسکریپت و یا CSS است. با این کار فایل های خارجی خود را به سند HTML متصل کرده و می توانیم از کدهای داخلشان استفاده کنیم.(ایران گستر)

مثال:

<!DOCTYPE html>

<html>

<head>

<title>Page Title</title>

</head>

<body>

<h1>ThisisaHeading</h1>

<p>Thisisaparagraph.</p>

</body>

</html>

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

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

عنصر <meta>

تگ <meta> کار مشخص کردن اطلاعات خاصی را دارد. به طور مثال اینکه character set استفاده شده در سند چیست؟ یا چه keyword هایی برای این صفحه تعیین شده است؟ author (نویسنده) ی این صفحه کیست؟ و الی آخر …(ایران گستر)

مرورگرها به طور عمده از <meta> برای بهتر نمایش دادن محتوا و موتورهای جست و جو برای دریافت keyword ها استفاده می کنند.(ایران گستر)

– برای تعیین character set از این کد استفاده می کنیم:(ایران گستر)

1	<meta charset="UTF-8">

پیشنهاد تمام متخصصین حوزه ی وب این است که اگر هر جایی (چه پایگاه داده، چه اسناد HTML و …) مجبور به انتخاب نوع encoding یا همان character set شدید، آن را روی UTF-8 بگذارد چرا که بسیار از زبان ها را پشتیبانی می کند. در غیر این صورت ممکن است برخی از کاراکتر های صفحه ی شما نمایش داده نشود. البته این موضوع اگر در پایگاه داده باشد، خسارات سنگین تری بر جای می گذارد؛ مانند اشتباه ذخیره شدن نام و اطلاعات مشتریان.(ایران گستر)

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

1	<meta name="description"content="site description">

به طور مثال در سایت روکسو این توضیح را ارائه داده ایم:(ایران گستر)

1	<meta name="description"content="دستیابی به هزاران مقاله آموزش رایگان برنامه نویسی و آموزش رایگان طراحی گرافیک در وب سایت روکسو. آموزش رایگان فتوشاپ و برنامه نویسی"/>

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

– برای تعیین کلیدواژه ها (keywords) از این قالب استفاده کنید:(ایران گستر)

1	<meta name="keywords"content="HTML, CSS, XML, JavaScript">

– همچنین شما می توانید نویسنده ی صفحه یا همان author را به این شکل تعیین کنید:(ایران گستر)

1	<meta name="author"content="Amir Zouerami">

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

– شما حتی می توانید صفحات خود را طوری تنظیم کنید که هر فلان ثانیه (مثلا اینجا 30 ثانیه) refresh شوند:(ایران گستر)

1	<meta http-equiv="refresh"content="30">

بیایید این موارد را در یک مثال استفاده کنیم:

<!DOCTYPE html>

<html>

<head>

</head>

<body>

<pdir='rtl'>تماماطلاعاتقسمتbodyکهدیدهمیشونددراینقسمتقرارخواهندگرفت</p>

</body>

</html>

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

مبحث viewport

HTML5 روشی ارائه کرد تا طراحان وب سایت به viewport دسترسی پیدا کنند. viewport به معنای قسمتی از صفحه ی HTML است که کاربر مشاهده می کند. به طور مثال اگر صفحه طولانی باشد و اسکرول عمودی بخورد، در هر لحظه، آن قسمتی از صفحه که کاربر مشاهده می کند، viewport نام دارد.(ایران گستر)

مشخص است که viewport در تلفن های همراه (مانند دستگاه های اندرویدی) کوچکتر است بنابراین باید مراقب این نوع کاربران نیز باشیم.(ایران گستر)

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

1	<meta name="viewport"content="width=device-width, initial-scale=1.0">

این کد به مرورگر کاربر می گوید که صفحه را چطور نمایش دهد و چطور با مقایس یک صفحه کار کند.(ایران گستر)

قسمت width=device-width می گوید عرض صفحه (width) باید با عرض صفحه ی دستگاه کاربر (چه کامپیوتر، په تبلت، چه گوشی و …) هماهنگ باشد. از طرفی قسمت initial-scale=1.0 می گوید، مقدار بزرگنمایی اولیه ی یک صفحه چقدر باید باشد؛ وقتی به آن عدد 1.0 داده ایم یعنی 1 برابر بزرگنمایی داشته باشد و همانطور که می دانید 1 برابر بزرگنمایی یعنی همان سایز اصلی و بدون بزرگنمایی. اگر مقادیر بیشتری از 1 به آن بدهید، پس از بارگذاری صفحات برای کاربر، صفحه به همان اندازه بزرگنمایی (zoom) خواهد داشت که اصلا کار قشنگی نیست.(ایران گستر)

بگذارید تفاوت استفاده از این دستور را در صفحات وب به شما نشان دهم.(ایران گستر)

ابتدا به کد زیر نگاه کنید:

<!DOCTYPE html>

<html>

<body>

<p><b>Tounderstand thisexample,you should open thispage onaphone oratablet.</b></p>

<p>

Lorem ipsum dolor sit amet,consectetuer adipiscing elit,sed diam nonummy nibh euismod tincidunt ut laoreet dolore magna aliquam erat volutpat.

Nam liber tempor cum soluta nobis eleifend option congue nihil imperdiet doming id quod mazim placerat facer possim assum.

</p>

</body>

</html>

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

در این کد از width=device-width و … استفاده نکرده ایم. اگر به خروجی این صفحه در JSBin بروید و صفحه ی مرورگرتان یا قسمت راست JSBin (یعنی قسمت مشاهده ی خروجی) را کوچک تر کنید میبینید که تصویر از کادر خارج می شود!

حالا به این کد نگاه کنید:(ایران گستر)

<!DOCTYPE html>

<html>

<head>

<style>

img {

max-width:100%;

height:auto;

}

</style>

</head>

<body>

<p><b>Tounderstand thisexample,you should open thispage onaphone oratablet.</b></p>

<p>

Lorem ipsum dolor sit amet,consectetuer adipiscing elit,sed diam nonummy nibh euismod tincidunt ut laoreet dolore magna aliquam erat volutpat.

Nam liber tempor cum soluta nobis eleifend option congue nihil imperdiet doming id quod mazim placerat facer possim assum.

</p>

</body>

</html>

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

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

1	<meta name="viewport"content="width=device-width, initial-scale=1.0"/>

اگر در JSBin، صفحه سمت راست را کوچک کنید و یا اندازه ی مرورگر خود را بسیار کوچک کنید، متوجه می شوید که اندازه ی تصویر متناسب با اندازه ی صفحه تغییر می کند و دیگر از کادر خارج نمی شود! دلیل استفاده از این دستور همین موضوع ساده اما بسیار کاربردی است.(ایران گستر)

تگ <script>

تگ <script> برای اضافه کردن کدهای جاوا اسکریپت است (چه خارجی و چه داخلی).

به طور مثال در کد زیر میخواهیم عبارت Hello JavaScript را نمایش دهیم:(ایران گستر)

<!DOCTYPEhtml>

<html>

<head>

<title>PageTitle</title>

functionmyFunction(){

document.getElementById("demo").innerHTML="Hello JavaScript!";

}

</script>

</head>

<body>

<pid="demo">AParagraph</p>

<button type="button"onclick="myFunction()">Tryit</button>

</body>

</html>

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

در دوره ی جاوا اسکریپت ما می توانید بیشتر در رابطه با این مورد مطالعه کنید.

تگ <base>

تگ <base> در عمل URL یا آدرس اینترنتی پایه ی وب سایت شما را مشخص می کند تا تمام آدرس های اینترنتی دیگری که در صفحه ی ما موجود هستند با آن شروع شوند.(ایران گستر)

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

<!DOCTYPE html>

<html>

<head>

<title>Page Title</title>

</head>

<body>

<p><ahref="/react-loops/">تکرارعناصر(حلقهها)درریاکت</a></p>

</body>

</html>

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

هشدار: در استاندارد HTML5 گفته شده است که شما اجازه دارید تگ های <html> و <body> و <head> را حذف کنید. یعنی کد شما به این شکل باشد:(ایران گستر)

<!DOCTYPE html>

<title>Page Title</title>

<h1>Thisisaheading</h1>

<p>Thisisaparagraph.</p>

اما ما به شما پیشنهاد می کنیم تحت هیچ شرایطی چنین کاری را انجام ندهید. پاک کردن تگ های <html> و <body> می تواند DOM یا نرم افزار XML را به طور کامل از کار بیندازد و در مرورگرهای قدیمی مانند IE9 نیز باعث خطاهای فراوان می شود. این مسئله که شما اجازه به پاک کردن برخی از تگ ها دارید، به شرایط و حالت خاصی مربوط است، نه اینکه چون می توانیم باید تمام این تگ ها را در شرایط عادی حذف کنیم.(ایران گستر)

:: بازدید از این مطلب : 22

امتیاز مطلب : 0

تعداد امتیازدهندگان : 0

مجموع امتیاز : 0

تاریخ انتشار : چهار شنبه 24 مهر 1398 | نظرات ()

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

نوشته شده توسط : فاطمه فیصلی

HTML

تگ <script>

تگ <script> متعلق به زبان HTML بوده و زمانی استفاده می شود که بخواهیم در سند HTML از کدهای جاوا اسکریپتی استفاده کنیم؛ چه این کدها به صورت دستی درون این تگ وارد شوند و چه شامل آدرسی باشند که به یک فایل خارجی جاوا اسکریپت اشاره می کنند.(ایران گستر)

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

manipulation: همان دستکاری و تغییر دادن عناصر HTML و محتوای آن است.
form validation: همان اعتبارسنجی فرم ها می باشد. به طور مثال اگر از کاربر بخواهید سن خود را وارد کند، باید کاراکترهای حرفی (الفبا) را توسط جاوا اسکریپت غیرمجاز کنیم.(ایران گستر)
dynamic changes: جاوا اسکریپت می تواند محتوای صفحه را پویا کند؛ به طور مثال یک ساعت دیجیتال را در صفحه نمایش دهد که هر یک ثانیه بروزرسانی می شود.(ایران گستر)

1- ممکن است بگویید مگر نمی توان این موارد را در سمت سرور چک کرد؟ حرفتان اشتباه نیست و قطعا اعتبارسنجی در سمت سرور هم انجام می گیرد اما اگر ابتدا یک بار با جاوا اسکریپت اعتبار سنجی کنیم دیگر نیازی نیست از سرور های خود کار بکشیم و بیخودی روی آن ها بار پردازشی قرار دهیم.(ایران گستر)

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

<!DOCTYPE html>

<html>

<body>

<h2>UseJavaScript toChange Text</h2>

<p>Thisexample writes"Hello JavaScript!"into an HTML element with id="demo":</p>

<pid="demo"></p>

document.getElementById("demo").innerHTML="Hello JavaScript!";

</script>

</body>

</html>

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

در مثال بالا یک عنصر <p> داشتیم که id آن برابر با demo بود اما محتوایی نداشت. سپس با جاوا اسکریپت آن را دریافت کردیم و به آن محتوا (عبارت Hello JavaScript) دادیم.(ایران گستر)

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

<!DOCTYPE html>

<html>

<body>

<h1>My First JavaScript</h1>

<pid="demo">JavaScript can change the style of an HTML element.</p>

functionmyFunction(){

document.getElementById("demo").style.fontSize="25px";

document.getElementById("demo").style.color="red";

document.getElementById("demo").style.backgroundColor="yellow";

}

</script>

<button type="button"onclick="myFunction()">Click Me!</button>

</body>

</html>

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

مشخص است که می توانیم کارهای خلاقانه ی بسیار زیادی را با جاوا اسکریپت انجام دهیم!

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

<!DOCTYPEhtml>

<html>

<body>

functionlight(sw){

varpic;

if(sw==0){

pic="https://www.w3schools.com/html/pic_bulboff.gif"

}else{

pic="https://www.w3schools.com/html/pic_bulbon.gif"

}

document.getElementById('myImage').src=pic;

}

</script>

<p>

<button type="button"onclick="light(1)">Light On</button>

<button type="button"onclick="light(0)">Light Off</button>

</p>

</body>

</html>

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

در این کد با تغییر دادن دو تصویر متفاوت، تصور می کنیم که با فشار دادن دکمه ها چراغ را خاموش یا روشن می کنیم!

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

تگ <noscript>

تگ <noscript> که یکی از تگ های HTML می باشد کار جالبی دارد؛ اگر کاربری که از سایت شما بازدید می کند قابلیت جاوا اسکریپت مرورگر خود را غیر فعال کرده باشد و یا اصلا مرورگر او از قابلیت جاوا اسکریپت پشتیبانی نکند محتوای درون تگ <noscript> به او نمایش داده می شود.(ایران گستر)

سوال: چه محتوایی باید درون <noscript> بنویسیم؟

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

<!DOCTYPE html>

<html>

<pid="demo"></p>

document.getElementById("demo").innerHTML="Hello JavaScript!";

</script>

<p>اگرمرورگریجاوااسکریپتخودراغیرفعالکردهباشد،متنداخل تگnoscriptراخواهددرد.

درغیراینصورتهمینمتنیراکهدرحالحاضرمیخوانید،خواهدخواند!

</p>

<p>

شمامیتوانیدبرایتستکردناینموضوع،ازقسمتتنظیماتمرورگرخودبهدنبالگزینهیJavaSciptبگردیدوآنراغیرفعالکنیدتامحتوایاینتگراببینید.

</p>

</body>

</html>

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

آدرس دهی فایل ها

آدرس دهی فایل ها در دنیای وب (چه HTML باشد، چه جاوا اسکریپت، چه PHP و …) معمولا از یک قانون پیروی می کنند. file path به معنی «مسیر فایل» است و آدرس یک فایل را بر اساس ساختار پوشه های یک سایت مشخص می کند. ما زمانی از file path استفاده می کنیم که بخواهیم از عناصر خارجی استفاده کنیم، مانند:(ایران گستر)

صفحات وب دیگر
تصاویر
ویدیوها
صفحات استایل CSS
فایل های جاوا اسکریپت
و …

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

آدرس مطلق یا کامل (Absolute File Path)

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

<!DOCTYPE html>

<html>

<body>

<h2>UsingaFull URL File Path</h2>

</body>

</html>

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

آدرس نسبی (Relative File Path)

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

1	<img src="/images/picture.jpg"alt="HTML">

آدرسی که در کد بالا داده ایم با یک اسلش (علامت /) شروع شده است:

/images/picture.jpg

این اسلش می گوید به root (فولدر اصلی) برو و از آنجا دنبال پوشه ی images بگرد و از داخل آن تصویر picture.jpg را پیدا کن!

یک حالت دیگر به این شکل است:(ایران گستر)

1	<img src="images/picture.jpg"alt="HTML">

در این شکل آدرس دهی، از هیچ علامت اسلشی در ابتدای آدرس استفاده نکرده ایم:

images/picture.jpg

این یعنی به پوشه ی images برو و فایل picture.jpg را پیدا کن. البته یادتان باشد زمانی می توانید اینطور آدرس بدهید که فایل سورس کدتان (فایلی که کد بالا را در آن نوشته اید) به همراه images در یک پوشه باشند! به طور مثال اسم فایل سورس کد index.html باشد و به همراه پوشه ای به نام images هر دو در یک پوشه ی دیگر (مثلا My HTML Files) باشند. به همین دلیل این نوع آدرس دهی «نسبی» نام دارد؛ فایل هایتان را نسبت به سورس کد آدرس دهی می کنید.(ایران گستر)

روش دیگر آدرس دهی نسبی به این صورت است:

1	<img src="../images/picture.jpg"alt="HTML">

آدرسی که در این کد مشخص کرده ایم با دو علامت نقطه و یک اسلش شروع می شود:

../images/picture.jpg

این ترکیب (/..) معنای خاصی دارد، یک پوشه به عقب برو! در اینجا دیگر پوشه ی images مانند مثال قبل در یک پوشه با سورس کد قرار ندارد. این حالتی است که در آن فایل سورس کد ما در یک پوشه قرار دارد اما پوشه ی images در آنجا نیست بلکه یک پوشه عقب تر یا یک سطح عقب تر می باشد.(ایران گستر)

بهترین روش آدرس دهی

پاسخ این سوال در موقعیت های مختلف متفاوت خواهد بود اما در حالت کلی آدرس دهی نسبی بسیار بهتر است چرا که file path های شما به آدرس URL تان وابسته نمی شوند و با تغییر آن مجبور نیستید همه را دوباره تغییر دهید. همچنین لینک ها و منابعی که آدرس دهی دارند در localhost (کامپیوتر خود) نیز کار می کنند و می توانید هنگام توسعه دادن یک برنامه در سیستم خود نیز کارکرد آن را ببینید.(ایران گستر)

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

:: بازدید از این مطلب : 24

امتیاز مطلب : 0

تعداد امتیازدهندگان : 0

مجموع امتیاز : 0

تاریخ انتشار : سه شنبه 23 مهر 1398 | نظرات ()

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

نوشته شده توسط : فاطمه فیصلی

HTML

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

HTML[/caption]

id ها و کاربرد آن ها

در زبان HTML دسته ای از attribute ها را داریم که id نام دارند. id ها، همانطور که از نامشان مشخص است، آیدی (id) منحصر به فردی را برای عنصری در HTML تعیین می کند. برخلاف کلاس ها، id ها باید منحصر به فرد و غیر تکراری باشند؛ به طور مثال نمی توانیم در یک صفحه 2 عنصر با آیدی یکسان داشته باشیم.(ایران گستر)

سوال: اگر id دو عنصر را یکی کنیم چه می شود؟(ایران گستر)

پاسخ: یکی کردن id دو یا چند عنصر باعث توقف برنامه تان نمی شود اما دو مشکل کلی را به وجود می آورد: اول اینکه کار id ها تعیین آیدی و مشخص کردن یک عنصر خاص است. اگر قرار است چند عنصر را مشخص کنیم باید از همان کلاس ها استفاده کنیم. دوم اینکه این کار از نظر HTML غیر معتبر است بنابراین در سئو و رتبه بندی ضرر خواهید کرد.(ایران گستر)

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

<!DOCTYPEhtml>

<html>

<head>

<style>

#myHeader {

background-color:lightblue;

color:black;

padding:40px;

text-align:center;

}

</style>

</head>

<body>

<h2>The id Attribute</h2>

<p>UseCSS tostyle an element with the id"myHeader":</p>

<h1 id="myHeader">My Header</h1>

</body>

</html>

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

نکات مهم در مورد id:(ایران گستر)

id ها می توانند روی هر عنصری استفاده شوند و از Attribute های عمومی هستند.
id ها case sensitive هستند؛ یعنی نسبت به بزرگی و کوچکی حروف انگلیسی حساس اند.
مقدار id ها باید حداقل یک کاراکتر داشته باشد و نباید خالی (اسپیس و …) گذاشته شود.

تفاوت id با class چیست؟

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

بگذارید برایتان مثالی بزنم. در قسمت های قبل گفتیم برای درک بهتر، class را به عنوان کلاس درس و عناصر داخل آن را به عنوان دانش آموزان کلاس در نظر بگیرید. دانش آموزان خاص هستند اما دانش آموزانی که داخل یک کلاس هستند علاوه بر تفاوت هایشان، دارای شباهت های پایه ای و مهم هستند (یک مجموعه درس را می خوانند، هم سن هستند، یک هدف دارند و …). عناصر داخل کلاس نیز شباهت های پایه ای دارند.(ایران گستر)

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

این مسئله را در مثال زیر مشاهده می کنید:

<!DOCTYPEhtml>

<html>

<head>

<style>

/* Style the element with the id "myHeader" */

#myHeader {

background-color:lightblue;

color:black;

padding:40px;

text-align:center;

}

/* Style all elements with the class name "city" */

.city {

background-color:tomato;

color:white;

padding:10px;

}

</style>

</head>

<body>

<h2>Difference Between ClassandID</h2>

<p>An HTML page can only have one unique id applied toone specific element,whileaclassname can be applied tomultiple elements.</p>

<h1 id="myHeader">My Cities</h1>

<h2 class="city">London</h2>

<p>London isthe capital of England.</p>

<h2 class="city">Paris</h2>

<p>Paris isthe capital of France.</p>

<h2 class="city">Tokyo</h2>

<p>Tokyo isthe capital of Japan.</p>

</body>

</html>

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

bookmark چیست؟

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

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

ابتدا یک عنصر (معمولا تگ های h1 و …) با id خاصی می سازیم:(ایران گستر)

1	<h2 id="C4">Chapter4</h2>

سپس برایش لینک تعیین می کنیم:(ایران گستر)

1	<ahref="#C4">Jump toChapter4</a>

نتیجه ی نهایی مثال زیر می شود:(ایران گستر)

<!DOCTYPE html>

<html>

<body>

<p><ahref="#C4">Jump toChapter4</a></p>

<h2>Chapter1</h2>

<p>Thischapter explains ba bla bla</p>

<h2>Chapter2</h2>

<p>Thischapter explains ba bla bla</p>

<h2>Chapter3</h2>

<p>Thischapter explains ba bla bla</p>

<h2 id="C4">Chapter4</h2>

<p>Thischapter explains ba bla bla</p>

<h2>Chapter5</h2>

<p>Thischapter explains ba bla bla</p>

<h2>Chapter6</h2>

<p>Thischapter explains ba bla bla</p>

<h2>Chapter7</h2>

<p>Thischapter explains ba bla bla</p>

<h2>Chapter8</h2>

<p>Thischapter explains ba bla bla</p>

<h2>Chapter9</h2>

<p>Thischapter explains ba bla bla</p>

<h2>Chapter10</h2>

<p>Thischapter explains ba bla bla</p>

<h2>Chapter11</h2>

<p>Thischapter explains ba bla bla</p>

<h2>Chapter12</h2>

<p>Thischapter explains ba bla bla</p>

<h2>Chapter13</h2>

<p>Thischapter explains ba bla bla</p>

<h2>Chapter14</h2>

<p>Thischapter explains ba bla bla</p>

<h2>Chapter15</h2>

<p>Thischapter explains ba bla bla</p>

<h2>Chapter16</h2>

<p>Thischapter explains ba bla bla</p>

<h2>Chapter17</h2>

<p>Thischapter explains ba bla bla</p>

<h2>Chapter18</h2>

<p>Thischapter explains ba bla bla</p>

<h2>Chapter19</h2>

<p>Thischapter explains ba bla bla</p>

<h2>Chapter20</h2>

<p>Thischapter explains ba bla bla</p>

<h2>Chapter21</h2>

<p>Thischapter explains ba bla bla</p>

<h2>Chapter22</h2>

<p>Thischapter explains ba bla bla</p>

<h2>Chapter23</h2>

<p>Thischapter explains ba bla bla</p>

</body>

</html>

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

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

استفاده از id در زبان جاوا اسکریپت

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

<!DOCTYPE html>

<html>

<body>

<h2>Using The id Attribute inJavaScript</h2>

<p>JavaScript can access an element withaspecified id by using the getElementById()method:</p>

<h1 id="myHeader">Hello World!</h1>

<button onclick="displayResult()">Changetext</button>

functiondisplayResult(){

document.getElementById("myHeader").innerHTML="Have a nice day!";

}

</script>

</body>

</html>

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

در این خروجی باید روی دکمه ی موجود در سمت راست (قسمت خروجی) کلیک کنید تا متوجه تغییر صفحه و نحوه ی دسترسی به myHeader بشوید.(ایران گستر)

Iframe چیست؟

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

برای تعریف آن باید از تگ <iframe> استفاده کنید:

1	<iframe src="URL"></iframe>

باید آدرس صفحه ی وبی که می خواهید در صفحه ی خود نمایش دهید را به src بدهید.

همچنین می توانید برای iframe ها طول و عرض (width و height) تعریف کنید.

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

<!DOCTYPE html>

<html>

<body>

<h2>HTML Iframes</h2>

<p>You can usethe height andwidth attributes tospecify the size of the iframe:</p>

</body>

</html>

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

البته می توانید تعیین اندازه را از طریق CSS نیز انجام دهید:(ایران گستر)

1	<iframe src="https://www.roxo.ir/best-code-editors/"style="height:200px;width:300px;"></iframe>

اگر بخواهید حاشیه ی دور iframe را حذف کنید می توانید border را اینطور بنویسید:(ایران گستر)

1	<iframe src="https://www.roxo.ir/best-code-editors/"style="border:none;"></iframe>

یکی از نکات جالب این است که شما می توانید در عناصر لینک، attribute ای به نام target را با attribute ای به نام name یکی کنید تا با کلیک روی لینک، iframe باز شود:(ایران گستر)

<!DOCTYPE html>

<html>

<body>

<h2>Iframe-Target foraLink</h2>

<pdir='rtl'align='center'><ahref="https://www.roxo.ir/best-code-editors/"target="iframe_a">بهترینویرایشگربرنامهنویسیکداماست؟</a></p>

</body>

</html>

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

:: بازدید از این مطلب : 23

امتیاز مطلب : 0

تعداد امتیازدهندگان : 0

مجموع امتیاز : 0

تاریخ انتشار : سه شنبه 23 مهر 1398 | نظرات ()

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

نوشته شده توسط : فاطمه فیصلی

HTML

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

عناصر Block

تمام عناصر HTML به صورت پیش فرض دارای مقداری برای خاصیت display خود هستند که به نوع عنصر بستگی دارد. این مقادیر پیش فرض یا block هستند و یا inline.(ایران گستر)

عناصری که از نوع block باشند، همیشه در خط جدید ایجاد می شوند و تمام عرض (width) صفحه را می گیرند و تا جایی که بتوانند خود را به راست و چپ گسترش می دهند.(ایران گستر)

به طور مثال به کد زیر و خروجی آن دقت کنید:(ایران گستر)

<!DOCTYPE html>

<html>

<body>

<div>Hello</div><div>World</div>

<p>The DIV element isablock element,andwill start onanewline.</p>

</body>

</html>

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

همانطور که می بینید عنصر div در یک خط جدید شروع به کار کرده است! اگر به آن یک رنگ پس زمینه بدهیم بهتر مشخص می شود:(ایران گستر)

<!DOCTYPEhtml>

<html>

<style>

#first {

background-color:red;

}

#second {

background-color:purple;

}

</style>

<body>

<div id="first">Hello</div><div id='second'>World</div>

<p>The DIV element isablock element,andwill start onanewline.</p>

</body>

</html>

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

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

نکته: عنصر div معمولا به عنوان نگه دارنده ی دیگر عناصر مورد استفاده قرار می گیرند و به تنهایی کاربرد خاصی ندارد:

<!DOCTYPE html>

<html>

<body>

<h2>London</h2>

<p>London isthe capital city of England.It isthe most populous city inthe United Kingdom,withametropolitan area of over13million inhabitants.</p>

<p>Standing on the River Thames,London has beenamajor settlement fortwo millennia,its history going back toits founding by the Romans,who named it Londinium.</p>

</div>

</body>

</html>

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

عناصر Block شامل تمام تگ های زیر می شوند:(ایران گستر)

<address> <article> <aside> <blockquote> <canvas> <dd> <div> <dl> <dt> <fieldset> <figcaption> <figure> <footer> <form> <h1>-<h6> <header> <hr> <li> <main> <nav> <noscript> <ol> <p> <pre> <section> <table> <tfoot> <ul> <video>

عناصر Inline

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

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

<!DOCTYPE html>

<html>

<body>

<span>Hello</span>

<span>World</span>

<p>The SPAN element isan inline element,andwill notstart onanewline.</p>

</body>

</html>

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

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

<!DOCTYPEhtml>

<html>

<style>

#first {

background-color:red;

}

#second {

background-color:purple;

}

</style>

<body>

<span id='first'>Hello</span>

<span id='second'>World</span>

<p>The SPAN element isan inline element,andwill notstart onanewline.</p>

</body>

</html>

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

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

نکته: تگ span معمولا به عنوان نگه دارنده ی قسمتی از متن به کار برده می شود:(ایران گستر)

<!DOCTYPE html>

<html>

<body>

<h1>My<span style="color:red">Important</span>Heading</h1>

</body>

</html>

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

عناصر inline در زبان HTML شامل تمام موارد زیر می شوند:

کلاس ها

همانطور که می دانید attribute ای به نام class وجود دارد. class برای تعیین استایل های مشابه در عناصری به کار می رود که نام کلاسشان یکی باشد. برای راحت تر شدن موضوع، class را مانند کلاس های درس واقعی تصور کنید که هر عنصر در آن مانند یک دانش آموز در کلاس واقعی است. درست است که دانش آموزان یک کلاس با یکدیگر تفاوت دارند اما شباهت های بسیاری نیز دارند! در زبان HTML این شباهت، استایل های CSS است.(ایران گستر)

در مثال زیر 3 تگ div داریم که برای همه شان یک استایل و کلاس تعریف کرده ایم:

<!DOCTYPEhtml>

<html>

<head>

<style>

.cities {

background-color:black;

color:white;

margin:20px;

padding:20px;

}

</style>

</head>

<body>

<h2>London</h2>

<p>London isthe capital of England.</p>

</div>

<h2>Paris</h2>

<p>Paris isthe capital of France.</p>

</div>

<h2>Tokyo</h2>

<p>Tokyo isthe capital of Japan.</p>

</div>

</body>

</html>

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

به این صورت می توانیم کدهای تکراری CSS را حذف کنیم و هر سه div را یک جا استایل دهی کنیم. همچنین همانطور که از کد بالا فهمیده اید برای هدف قرار دادن یک کلاس در زبان CSS باید از نقطه استفاده کنیم. به طور مثال:(ایران گستر)

<style>

.city {

background-color:tomato;

color:white;

padding:10px;

}

</style>

نکته: کلاس های HTML می توانند روی هر عنصر و تگی استفاده شوند (inline یا block و …) اما باید توجه داشته باشید که case sensitive (حساس به حروف بزرگ و کوچک انگلیسی) هستند.(ایران گستر)

کلاس های چندگانه

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

<!DOCTYPEhtml>

<html>

<style>

.city {

background-color:tomato;

color:white;

padding:10px;

}

.main {

text-align:center;

}

</style>

<body>

<h2>Multiple Classes</h2>

<p>All three headers have the classname"city".Inaddition,London also have the classname"main",which center-aligns the text.</p>

<h2 class="city main">London</h2>

<h2 class="city">Paris</h2>

<h2 class="city">Tokyo</h2>

</body>

</html>

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

همانطور که می بینید، در استایل ها ابتدا گفته ایم کلاس city را قرمز رنگ کن و غیره. سپس گفته ایم آن هایی که کلاس main دارند باید وسط چین باشند. نتیجه ی ادغام این دو استایل همان London است که در خروجی مشاهده می کنید.

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

1 2	<h2 class="city">Paris</h2> <pclass="city">Paris isthe capital of France</p>

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

<!DOCTYPE html>

<html>

<body>

<h2>Using The classAttribute inJavaScript</h2>

<p>Click the button,tohide all elements with the classname"city",with JavaScript:</p>

<button onclick="myFunction()">Hide elements</button>

<h2 class="city">London</h2>

<p>London isthe capital of England.</p>

<h2 class="city">Paris</h2>

<p>Paris isthe capital of France.</p>

<h2 class="city">Tokyo</h2>

<p>Tokyo isthe capital of Japan.</p>

functionmyFunction(){

varx=document.getElementsByClassName("city");

for(vari=0;i<x.length;i++){

x[i].style.display="none";

}

</script>

</body>

</html>

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

اگر به خروجی کد بالا مراجعه کنید، می بینید که با فشرده دکمه ی Hide elements تمام div ها ناپدید می شوند(ایران گستر)

:: بازدید از این مطلب : 16

امتیاز مطلب : 0

تعداد امتیازدهندگان : 0

مجموع امتیاز : 0

تاریخ انتشار : سه شنبه 23 مهر 1398 | نظرات ()

آموزش گام به گام و تصویری 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>ADescription 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>ANested 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 را نیز در خود جای دهند و الزامی در متنی بودنشان نیست. (ایران گستر)

:: بازدید از این مطلب : 12

امتیاز مطلب : 0

تعداد امتیازدهندگان : 0

مجموع امتیاز : 0

تاریخ انتشار : سه شنبه 23 مهر 1398 | نظرات ()

آموزش گام به گام و تصویری 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 استفاده کنیم:(ایران گستر)

<!DOCTYPEhtml>

<html>

<head>

<style>

table, th, td {

border:1pxsolidblack;

}

</style>

</head>

<body>

<h2>Bordered Table</h2>

<p>Usethe CSS border propertytoaddaborder tothe 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:1pxsolid black;

border-collapse:collapse;

}

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

اضافه کردن Padding

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

<!DOCTYPEhtml>

<html>

<head>

<style>

table, th, td {

border:1pxsolidblack;

border-collapse:collapse;

}

th, td {

padding:15px;

}

</style>

</head>

<body>

<h2>Cellpadding</h2>

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

<tr>

<th>Firstname</th>

<th>Lastname</th>

</tr>

<tr>

<td>Smith</td>

</tr>

<tr>

<td>Jackson</td>

</tr>

<tr>

</tr>

</table>

<pdir='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 وجود دارد که مانند نامش، کارش ایجاد فاصله بین حاشیه های خانه های جدول است. بیایید مثالی از آن را ببینیم:(ایران گستر)

<!DOCTYPEhtml>

<html>

<head>

<style>

table, th, td {

border:1pxsolidblack;

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>

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

</body>

</html>

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

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

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

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

<!DOCTYPEhtml>

<html>

<head>

<style>

table, th, td {

border:1pxsolidblack;

border-collapse:collapse;

}

th, td {

padding:5px;

text-align:left;

}

</style>

</head>

<body>

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

<p>Tomakeacell span more than one column,usethe colspan attribute.</p>

<tr>

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

</tr>

<tr>

<td>Bill Gates</td>

</tr>

</table>

</body>

</html>

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

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

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

<!DOCTYPEhtml>

<html>

<head>

<style>

table, th, td {

border:1pxsolidblack;

border-collapse:collapse;

}

th, td {

padding:5px;

text-align:left;

}

</style>

</head>

<body>

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

<p>Tomakeacell span more than one row,usethe 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 می شود. به طور مثال یک جدول را به شکل چشم نواز تری استایل دهی کرده ایم و برایتان آورده ایم:(ایران گستر)

<!DOCTYPEhtml>

<html>

<head>

<style>

table {

width:100%;

}

table, th, td {

border:1pxsolidblack;

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

:: بازدید از این مطلب : 26

امتیاز مطلب : 0

تعداد امتیازدهندگان : 0

مجموع امتیاز : 0

تاریخ انتشار : یک شنبه 21 مهر 1398 | نظرات ()

آموزش گام به گام و تصویری 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 زیر را به کد هایمان اضافه کنیم:(ایران گستر)

[caption id="attachment_71273" align="aligncenter" width="248"] وقتی بعد از 100 بار ویرایش کد ها، باز هم چند تا باگ توی برنامه ات می بینی.[/caption]

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

<!DOCTYPE html>

<html>

<body>

<h2>Animated Images</h2>

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

</body>

</html>

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

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

(ایران گستر)

<ahref="roxo.ir">

</a>

ویژگی float

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

<!DOCTYPE html>

<html>

<body>

<h2>Floating Images</h2>

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

<p>

Aparagraph withafloating image.Aparagraph withafloating image.Aparagraph withafloating image.

</p>

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

<p>

Aparagraph withafloating image.Aparagraph withafloating image.Aparagraph withafloating 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 و نسخه های قبل تر پشتیبانی نمی شود.

:: بازدید از این مطلب : 23

امتیاز مطلب : 0

تعداد امتیازدهندگان : 0

مجموع امتیاز : 0

تاریخ انتشار : یک شنبه 21 مهر 1398 | نظرات ()

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

نوشته شده توسط : فاطمه فیصلی

HTML

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

لینک دادن در html

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

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

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

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

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

<!DOCTYPE html>

<html>

<body>

<h2>HTML Links</h2>

<pdir='rtl'align='center'><ahref="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>

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

</body>

</html>

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

ظاهر لینک ها

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

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

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

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

<!DOCTYPEhtml>

<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 defaultcolors of links</p>

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

</body>

</html>

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

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

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

<!DOCTYPEhtml>

<html>

<head>

<style>

a:link, a:visited {

background-color:#f44336;

color:white;

padding:15px25px;

text-align:center;

text-decoration:none;

display:inline-block;

}

a:hover, a:active {

background-color:red;

}

</style>

</head>

<body>

<h2>Link Button</h2>

<p>Alink styled asabutton:</p>

<ahref="default.asp"target="_blank">Thisisalink</a>

</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>

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

<p>Ifyou set the target attribute to"_blank",the link will open inanewbrowser window ortab.</p>

</body>

</html>

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

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

<!DOCTYPE html>

<html>

<body>

<h2>The target Attribute</h2>

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

<p>Ifyou set the target attribute to"_blank",the link will open inanewbrowser window ortab.</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 isalink.You can click on it.</p>

<ahref="https://www.roxo.ir/plus/">

</a>

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

</p>

</body>

</html>

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

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

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

مثال:

<!DOCTYPE html>

<html>

<body>

<h2>Image Links</h2>

<p>The image isalink.You can click on it.</p>

<ahref="https://www.roxo.ir/plus/"title="این لینک شما را به صفحه ی روکسو پلاس خواهد برد">

</a>

</p>

</body>

</html>

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

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

ایجاد bookmark ها

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

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

1	<h2 id="C4">Chapter4</h2>

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

1	<ahref="#C4">Jump toChapter4</a>

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

<!DOCTYPE html>

<html>

<body>

<p><ahref="#C4">Jump toChapter4</a></p>

<h2>Chapter1</h2>

<p>Thischapter explains ba bla bla</p>

<h2>Chapter2</h2>

<p>Thischapter explains ba bla bla</p>

<h2>Chapter3</h2>

<p>Thischapter explains ba bla bla</p>

<h2 id="C4">Chapter4</h2>

<p>Thischapter explains ba bla bla</p>

<h2>Chapter5</h2>

<p>Thischapter explains ba bla bla</p>

<h2>Chapter6</h2>

<p>Thischapter explains ba bla bla</p>

<h2>Chapter7</h2>

<p>Thischapter explains ba bla bla</p>

<h2>Chapter8</h2>

<p>Thischapter explains ba bla bla</p>

<h2>Chapter9</h2>

<p>Thischapter explains ba bla bla</p>

<h2>Chapter10</h2>

<p>Thischapter explains ba bla bla</p>

<h2>Chapter11</h2>

<p>Thischapter explains ba bla bla</p>

<h2>Chapter12</h2>

<p>Thischapter explains ba bla bla</p>

<h2>Chapter13</h2>

<p>Thischapter explains ba bla bla</p>

<h2>Chapter14</h2>

<p>Thischapter explains ba bla bla</p>

<h2>Chapter15</h2>

<p>Thischapter explains ba bla bla</p>

<h2>Chapter16</h2>

<p>Thischapter explains ba bla bla</p>

<h2>Chapter17</h2>

<p>Thischapter explains ba bla bla</p>

<h2>Chapter18</h2>

<p>Thischapter explains ba bla bla</p>

<h2>Chapter19</h2>

<p>Thischapter explains ba bla bla</p>

<h2>Chapter20</h2>

<p>Thischapter explains ba bla bla</p>

<h2>Chapter21</h2>

<p>Thischapter explains ba bla bla</p>

<h2>Chapter22</h2>

<p>Thischapter explains ba bla bla</p>

<h2>Chapter23</h2>

<p>Thischapter explains ba bla bla</p>

</body>

</html>

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

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

یکی از مثال های عملی آن را در صفحه ی توضیحات تگ <a> از توسعه دهندگان Mozilla می بینید. اگر روی این لینک کلیک کنید شما را مستقیما به صفحه ی تگ <a> می برد اما اگر روی این لینک کلیک کنید شما را به قسمت Accessibility concerns از همان صفحه می برد (اسکرول برای شما انجام شده است و دیگر در ابتدای صفحه نخواهید بود.(ایران گستر)

:: بازدید از این مطلب : 21

امتیاز مطلب : 0

تعداد امتیازدهندگان : 0

مجموع امتیاز : 0

تاریخ انتشار : یک شنبه 21 مهر 1398 | نظرات ()

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

نوشته شده توسط : فاطمه فیصلی

HTML

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

نقل قول و استناد

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

<!DOCTYPE html>

<html>

<body>

<p>Here isaquote from WWF's website:</p>

For 50 years, WWF has been protecting the future of nature.

The world'sleading conservation organization,

WWF works in100countries andissupported by

1.2million members inthe United States and

close to5million globally.

</blockquote>

</body>

</html>

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

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

بیایید تگ های آن را بررسی کنیم.

تگ <q>

تگ <q> مخفف quotation یا نقل قول است و وظیفه اش مشخص کردن نقل قول های مختصر و کوتاه است. اگر از این تگ استفاده کنید معمولا مرورگرها محتوایش را بین دو علامت Quotation (“) قرار می دهند. مثال:(ایران گستر )

<!DOCTYPE html>

<html>

<body>

<p>Browsers usually insert quotation marks around theqelement.</p>

<p>WWF'sgoal isto:<q>Buildafuture where people live inharmony with nature.</q></p>

</body>

</html>

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

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

تگ <blockquote>

تگ <blockquote> در زبان HTML وظیفه ی استناد و نقل قول قسمت کاملی از متن را دارد و مرورگرها معمولا آن را indent (جلوتر قراردادن نسبت به بقیه ی متن) می کنند. مثال:(ایران گستر )

<!DOCTYPE html>

<html>

<body>

<p>Browsers usually indent blockquote elements.</p>

For50years,WWF has been protecting the future of nature.

The world'sleading conservation organization,

WWF works in100countries andissupported by

1.2million members inthe United States and

close to5million globally.

</blockquote>

</body>

</html>

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

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

نکته: شما می توانید با استفاده از CSS ظاهر انواع نقل قول ها را تغییر دهید بنابراین نگران ظاهر آن ها نباشد. دلیل اصلی استفاده از این تگ ها، مبحث semantic (کدنویسی معنایی) است که برای موتورهای جستجو اهمیت دارد.(ایران گستر )

تگ <abbr>

تگ <abbr> مخفف abbreviation و به معنی کلمات مخفف است. به طور مثال کلماتی که شکل اختصاری آن ها به کار می رود و یا سرواژه ها در این دسته قرار می گیرند. شما می توانید با استفاده از این تگ اعلام کنید که فلان کلمه ی متن یک سرواژه است یا مخفف عبارت خاصی است:(ایران گستر )

<!DOCTYPE html>

<html>

<body>

<p>The<abbr title="World Health Organization">WHO</abbr>was founded in1948.</p>

<p>Marking up abbreviations can give useful information tobrowsers,translation systems andsearch-engines.</p>

</body>

</html>

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

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

سوال: چرا متن را به صورت عادی ننویسیم؟ آیا لازم است از این تگ استفاده کنیم؟(ایران گستر )

پاسخ: از نظر فنی خیر اما با استفاده از این تگ به موتورهای جستجو کمک می کنید تا آنها بهتر متن سایتتان را درک کنند و سایت اصولی تری خواهید داشت. همچنین در صورت استفاده از این تگ، اگر کاربری از سیستم های ترجمه (مانند افزونه google translate و …) استفاده کند، می تواند ترجمه ی بهتری دریافت کند.(ایران گستر )

تگ <address>

تگ <address> در زبان HTML اطلاعات تماس نویسنده ی صفحه و یا صاحب وب سایت را به کاربر ارائه می کند. محتوای این نوع تگ ها معمولا به صورت مورب (italic) به نمایش در می آیند. همچنین اکثر مرورگرها قبل و بعد از آن، یک line break (اینتر) اضافه می کنند:(ایران گستر )

<!DOCTYPE html>

<html>

<body>

<p>The HTML address element defines contact information(author/owner)ofadocument orarticle.</p>

Written by John Doe.<br>

Visit us at:<br>

Example.com<br>

Box564,Disneyland<br>

USA

</address>

</body>

</html>

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

در خروجی، نحوه ی نمایش اطلاعات را مشاهده می کنید که italic هستند.

تگ <cite>

تگ <cite> در هنگام نقل قول معمولا عنوان یک اثر را مشخص می کند. به طور مثال:(ایران گستر )

<!DOCTYPE html>

<html>

<body>

<p>The HTML cite element defines the title ofawork.</p>

<p>Browsers usually display cite elements initalic.</p>

<p><cite>The Scream</cite>by Edvard Munch.Painted in1893.</p>

</body>

</html>

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

در مثال بالا نقاشی معروف ادوارد مانچ به نام “The Scream” را آورده ایم و از آنجا که The Scream نام اثر است آن را در cite قرار داده ایم.(ایران گستر )

تگ <bdo>

تگ <bdo> مخفف bi-directional override (به معنی «باطل کردن دو طرفه») می باشد. دلیل استفاده از آن باطل کردن یا نادیده گرفتن text direction فعلی است. text direction یعنی نوشته ی ما از راست به چپ نوشته می شود (مانند فارسی) یا از چپ به راست (مانند انگلیسی) و با استفاده از این تگ می توانید در وسط یک جمله این جهت را عوض کنید:(ایران گستر )

<!DOCTYPE html>

<html>

<body>

<p>Ifyour browser supports bi-directional override(bdo),the next line will be written from right toleft(rtl):</p>

<bdo dir="rtl">Thisline will be written from right toleft</bdo>

</body>

</html>

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

اگر به خروجی کد بالا بروید می بینید که جمله ی This line will be written from right to left کاملا برعکس شده است.(ایران گستر )

:: بازدید از این مطلب : 22

امتیاز مطلب : 0

تعداد امتیازدهندگان : 0

مجموع امتیاز : 0

تاریخ انتشار : یک شنبه 21 مهر 1398 | نظرات ()

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

نوشته شده توسط : فاطمه فیصلی

HTML

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

ویژگی Style

در جلسه ی قبل در مورد attribute ای به نام style صحبت کردیم و با هم دیدیم که می توان با آن شکل ظاهری عناصر را در HTML تغییر داد اما وقتی صحبت از متون عادی می شود، HTML موارد خاصی را برای تغییر چهره شان دارد!(ایران گستر)

<b> متون را bold (پررنگ) می کند.
<strong> نشان دهنده ی یک متن مهم است.
<i> متون را italic (مورب) می کند.
<em> بر متن تاکید می کند.
<mark> متن را علامت گذاری می کند.
<small> متن را کوچک می کند.
<del> نشان دهنده ی متن حذف شده است.
<ins> نشان دهنده ی متن اضافه شده است.
<sub> نشان دهنده ی متن زیروند است.
<sup> نشان دهنده ی متن بالاوند است.

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

پاسخ: استفاده ی صحیح از این تگ ها بسیار مهم است! اگر بنا بر تغییر ظاهر متن بود، می توانستیم از همان style و زبان CSS استفاده کنیم اما اینجا بحث بر سر برنامه نویسی semantic (معنایی) است. هر کدام از این تگ ها علاوه بر نمایش دادن متن به شکل متفاوت، معنی متفاوتی برای موتورهای جستجو دارند. در ادامه ی این دوره بیشتر در مورد آن ها صحبت می کنیم.ایران گستر

تگ های <b> و <strong>

حتما متوجه شده اید که هر دوی این تگ ها متن را bold و پررنگ می کنند و در ذهنتان سوال می کنید که فرقشان چیست؟ باید بگویم که <b> تنها متن را پررنگ می کند و هیچ معنایی فراتر از آن ندارد:ایران گستر

<!DOCTYPE html>

<html>

<body>

<p>Thistext isnormal.</p>

<p><b>Thistext isbold.</b></p>

</body>

</html>

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

اما تگ <strong> علاوه بر پررنگ کردن متن یا کلمه، معنی strong (قوی یا مهم) را به آن متن اضافه می کند. شما در عمل و در کدهایتان هیچ تفاوتی را متوجه نمی شوید اما موتورهای جستجو بین این تگ ها و معانی فرق قائل می شوند. مثالی از تگ strong:ایران گستر

<!DOCTYPE html>

<html>

<body>

<p>Thistext isnormal.</p>

<p><strong>Thistext isstrong.</strong></p>

</body>

</html>

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

تگ های <i> و <em>

دقیقا مانند تفاوت تگ های قبلی، تگ <i> در زبان HTML متن مورد نظرتان را مورب می کند و هیچ اهمیت خاص یا معنی دیگری به آن اضافه نمی کند:ایران گستر

<!DOCTYPE html>

<html>

<body>

<p>Thistext isnormal.</p>

<p><i>Thistext isitalic.</i></p>

</body>

</html>

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

اما تگ <em> جدا از مورب کردن متن، به آن معنی و اهمیت خاصی نیز می دهد. مثال استفاده از این تگ را در کد زیر می بینید:ایران گستر

<!DOCTYPE html>

<html>

<body>

<p>Thistext isnormal.</p>

<p><em>Thistext isemphasized.</em></p>

</body>

</html>

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

اگر بخواهم به طور خلاصه بگویم:

مرورگرها تگ های <strong> و <b> و تگ های <em> و <i> را به یک شکل نمایش می دهند اما تگ های <b> و <i> تنها کارکرد نمایشی دارند در حالی که <strong> و <em> به موتورهای جستجو می گویند فلان متن مهم است و معنی خاصی را همراهشان دارند.ایران گستر

تگ <small>

تگ <small> متن مورد نظر شما را به شکل بسیار کوچک نمایش می دهد. به این مثال توجه کنید:

<!DOCTYPE html>

<html>

<body>

<h2>HTML<small>Small</small>Formatting</h2>

<p>Thisisaparagraph and<small>smaller text goes here</small></p>

</body>

</html>

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

تگ <mark>

تگ <mark> در زبان HTML متون مورد نظر شما را به حالت هایلایت شده (ماژیک فسفری) نمایش می دهد تا به مخاطب بفهماند فلان قسمت از متن اهمیت خاصی دارد:ایران گستر

<!DOCTYPE html>

<html>

<body>

<h2>HTML<mark>Marked</mark>Formatting</h2>

</body>

</html>

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

تگ های <del>

در ابتدای مقاله در مورد تگ <del> به طور خلاصه نوشتم «نشان دهنده ی متن حذف شده است.» احتمالا این توضیح بیشتر شما را گیج کرده است! بگذارید واضح تر بگویم؛ برخی اوقات مطلبی را روی سایت خود منتشر می کنید اما پس از مدتی متوجه می شوید آن مطلب دیگر صحیح نیست. آنجاست که از تگ <del> استفاده می کنیم.ایران گستر

سوال: چرا از اول آن نوشته را حذف نکنیم و این همه به خودمان دردسر بدهیم؟

پاسخ: این تگ نوشته را حذف نمی کند بلکه نشان دهنده ی متن حذف شده است. یعنی دانستن این موضوع که قبلا این متن در وب سایت ما بوده است اهمیت دارد. به طور مثال ما در آموزش برنامه نویسی جاوا اسکریپت می گوییم از فلان دستور جاوا اسکریپت برای دریافت خصوصیات یک شیء استفاده می شود. بعد از گذشت یک سال یا دو سال یا هر مقدار زمان دیگر، نسخه ی جدیدی از جاوا اسکریپت معرفی شده و دستور ما منسوخ می شود. حالا می توانیم از تگ <del> استفاده کنیم تا به مخاطب بفهمانیم دستور جدید این است اما فلان دستور قدیمی نیز وجود داشته است تا اگر کنجکاو بود در مورد آن تحقیق کند. این تنها یک مثال از مثال های عملی بسیار برای این تگ بود.ایران گستر

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

<!DOCTYPE html>

<html>

<body>

<p>The del element represents deleted(removed)text.</p>

<p>My favorite color is<del>blue</del>red.</p>

</body>

</html>

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

تگ <ins>

تگ <ins> نشان دهنده ی متن اضافه شده است. این یعنی چه؟

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

مثال:

<!DOCTYPE html>

<html>

<body>

<p>The ins element represent inserted(added)text.</p>

<p>My favorite<ins>color</ins>isred.</p>

</body>

</html>

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

تگ <sub>

تگ <sub> در زبان HTML، متون زیروند را مشخص می کند. استفاده از این حروف در موقعیت های مختلفی امکان دارد که یکی از آن ها فرمول های شیمیایی است! فرمول شیمیایی زیر نحوه ی تبدیل کربن دی اکسید (co₂) به کربن مونو اکسید (co) را نشان می دهد:ایران گستر

CO₂ + 2 e⁻ + 2H⁺ → CO + H₂O

می بینید که می توانیم به سادگی از این تگ برای نمایش زیروند ها استفاده کنیم. تصور کنید که انجام این کار با CSS و تگ Style چقدر زمان بر خواهد بود!ایران گستر

تگ <sup>

تگ <sup> دقیقا بر خلاف تگ <sub> عمل می کند و برای بالاوند کردن متون استفاده می شود. از مثال های کاربردی آن باز هم می توان به سراغ مثال های علمی رفت؛ بیایید فرمول معروف آلبرت انیشتین را در رابطه با «هم ارزی جرم و انرژی» بنویسیم:ایران گستر

E=mc²

می بینید که برای اضافه کردن توان 2 از این تگ استفاده کرده ایم. البته تمام کاربرد های این تگ و تگ قبلی محدود به متون علمی نیست بلکه اینها یک مورد از چندین مورد استفاده ی آن هستند.ایران گستر

:: بازدید از این مطلب : 39

امتیاز مطلب : 0

تعداد امتیازدهندگان : 0

مجموع امتیاز : 0

تاریخ انتشار : شنبه 20 مهر 1398 | نظرات ()

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

نوشته شده توسط : فاطمه فیصلی

HTML

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

ویژگی Style

کلمه ی style در لغت به معنی «سبک» یا «طرح» یا همان «استایل» ای است که در فارسی نیز می گوییم. در واقع کار این تگ اعمال دستورات زبان CSS در کد های HTML است. ساختار کلی style به این شکل است:(ایران گستر)

1	<tagname style="property:value;">

در این ساختار، property یک خصوصیت CSS (مانند سایز فونت و …) است و value نیز مقداری که آن خصوصیت می گیرد (مانند 25px و …). در مورد این تگ در دوره ی آموزشی CSS به طور مفصل صحبت خواهیم کرد.(ایران گستر)

بهترین راه برای یادگیری این ویژگی استفاده از مثال های مختلف است بنابراین چندین مثال از آن را برایتان آماده کرده ایم.

رنگ پس زمینه در HTML

خصوصیت background-color، یک رنگ پس زمینه را برای سند HTML ما و یا یکی از عناصر آن تعیین می کند. در مثال زیر رنگ پس زمینه ی سند HTML را به رنگ powderblue تنظیم کرده ایم. اگر نمی دانید این رنگ چیست می توانید در گوگل جست و جو کنید.(ایران گستر)

<!DOCTYPE html>

<html>

<h1>Thisisaheading</h1>

<p>Thisisaparagraph.</p>

</body>

</html>

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

سوال: من از کجا بدانم چه رنگ هایی می توانم به عنوان value بگذارم؟

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

نام رنگ به صورت حرفی	کد HEX
Aqua	#00FFFF
Black	#000000
CadetBlue	#5F9EA0
Coral	#FF7F50
Crimson	#DC143C
Cyan	#00FFFF
DarkOrange	#FF8C00
DeepSkyBlue	#00BFFF
HotPink	#FF69B4

شما می توانید از هر کدام از این رنگ ها که خواستید استفاده کنید. در واقع تعداد این رنگ ها بیشتر از این ها است و جدول بالا تنها مشتی از خروار است! اگر دقت کرده باشید متوجه می شوید رنگ هایی که در جدول بالا آورده ایم هم نام دارند و هم کد. این یعنی در زبان CSS می توانید به جای کد هایشان از نام هایشان استفاده کنید (مانند "style="background-color:powderblue) اما بسیاری از رنگ هایی که ما می خواهیم دارای نام نیستند بنابراین تنها راه استفاده از آن ها تعیین رنگ به وسیله ی کد HEX است.(ایران گستر)

اگر نیاز به کد رنگ خاصی دارید، می توانید به وب سایت htmlcolorcodes.com یا امثال آن مراجعه کنید.

سوال: آیا رنگ ها فقط در کد HEX هستند؟

پاسخ: خیر رنگ ها در قالب های HSL و HSA و … نیز موجود هستند که در دوره ی CSS مورد بحث قرار خواهند گرفت.(ایران گستر)

رنگ متون

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

<!DOCTYPE html>

<html>

<body>

<h1 style="color:blue;">Thisisaheading</h1>

<pstyle="color:red;">Thisisaparagraph.</p>

</body>

</html>

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

فونت متون

خصوصیت font-family نوع فونت یک متن را انتخاب می کند. البته بر اساس نحوه ی استفاده، می توانید فونت کل سند HTML را نیز تغییر دهید. مثال:(ایران گستر)

<!DOCTYPE html>

<html>

<body>

<h1 style="font-family:verdana;">Thisisaheading</h1>

<pstyle="font-family:courier;">Thisisaparagraph.</p>

</body>

</html>

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

همانطور که در خروجی مشاهده می کنید در این متن از دو فونت verdana و courier استفاده کرده ایم.

سوال: آیا می توانیم نام هر فونتی را به این خصوصیت بدهیم؟(ایران گستر)

پاسخ: بستگی دارد! اگر فونتی که انتخاب کرده اید از فونت های پیش فرض موجود در مرورگر ها نباشد باید آن را import کنید که خودش بحث جداگانه ای دارد و در دوره ی CSS مورد بحث قرار خواهد گرفت.(ایران گستر)

اندازه ی متون

خصوصیت font-size اندازه ی فونت یک عنصر را مشخص می کند. در واقع این خصوصیت همان خصوصیتی است که در قسمت های قبلی در موردش صحبت کردیم و گفتیم می توانید با آن اندازه ی heading ها را تغییر دهید! به مثال زیر توجه کنید:(ایران گستر)

<!DOCTYPE html>

<html>

<body>

<h1 style="font-size:300%;">Thisisaheading</h1>

<pstyle="font-size:160%;">Thisisaparagraph.</p>

</body>

</html>

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

اگر خروجی این کد را مشاهده کنید می بینید که اندازه ی تگ های h1 و p به اندازه ی پیش فرضشان نیستند و بزرگترشان کرده ایم.(ایران گستر)

سوال: چرا اندازه ی فونت ها به درصد تعیین شده است؟

پاسخ: در CSS شما می توانید از واحد های مختلفی برای تعیین سایز عناصر، سایز متون و … استفاده کنید. یکی از آن ها درصد است. از دیگر واحد ها می توان پیکسل (px) را نام برد. توضیح کامل این موارد مربوط به دوره ی CSS است و در بحث ما نمی گنجد، بلکه نگاه ما به این کد ها به عنوان ویژگی (attribute) های HTML است.(ایران گستر)

تراز کردن افقی متون

خصوصیت text-align کار ترازبندی افقی متون را بر عهده دارد. به مثال زیر توجه کنید:

<!DOCTYPE html>

<html>

<body>

<h1 style="text-align:center;">Centered Heading</h1>

<pstyle="text-align:center;">Centered paragraph.</p>

</body>

</html>

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

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

سوال: آیا می توانیم چندین خصوصیت را به یک ویژگی style بدهیم؟

پاسخ: بله! این کار را در مثال زیر انجام داده ام:

<!DOCTYPE html>

<html>

<body>

<p>Iam normal</p>

<pstyle="color:red; font-size:300%; text-align:center;">Iam red</p>

<pstyle="color:blue; font-family:courier;">Iam blue</p>

<pstyle="font-size:50px; font-family:calibri;">Iam big</p>

</body>

</html>

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

:: بازدید از این مطلب : 16

امتیاز مطلب : 0

تعداد امتیازدهندگان : 0

مجموع امتیاز : 0

تاریخ انتشار : شنبه 20 مهر 1398 | نظرات ()

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

نوشته شده توسط : فاطمه فیصلی

HTML

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

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

HTML[/caption]

Heading چیست؟

Heading ها در واقع تیترهایی هستند برای قسمت های مختلف یک صفحه و از <h1> شروع شده و تا <h6> ادامه پیدا می کنند. به صورتی که <h1> مهم ترین عنوان یا تیتر و <h6> کم اهمیت ترین عنوان را مشخص می کند.(ایران گستر)

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

<!DOCTYPE html>

<html>

<body>

<h1>Heading1</h1>

<h2>Heading2</h2>

<h3>Heading3</h3>

<h4>Heading4</h4>

<h5>Heading5</h5>

<h6>Heading6</h6>

</body>

</html>

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

همانطور که در خروجی مشاهده کردید، این تگ ها در ظاهر نیز با هم متفاوت هستند و هر چه اهمیتشان بیشتر باشد، بزرگتر می شوند اما اهمیت اصلی آن ها در ظاهرشان نیست چرا که ظاهر را می توان با CSS نیز تغییر داد. اهمیت اصلی در مسئله ی سئو است؛ موتورهای جست و جو از heading ها استفاده می کنند تا ساختار یک صفحه ی وب را ایندکس کنند. بنابراین نباید از ساختار صفحات وب خود غافل شوید.(ایران گستر)

برای ساختاربندی صحیح توجه کنید که <h1> همیشه باید عنوان اصلی تمامِ صفحه باشد بنابراین نباید در هر صفحه بیشتر از یک عدد <h1> داشته باشیم. سپس به ترتیب اهمیت از تگ های <h2> و <h3> و … استفاده کنید. برای مشاهده ی ساختار HTML صفحه ی خود می توانید از وب سایت هایی مانند HTML 5 Outliner استفاده کنید. برای مثال ما سایت روکسو را به آن دادیم و نتیجه به شکل زیر بود:(ایران گستر)

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

همچنین کاربران سایت نیز صفحات شما را بر اساس heading ها بررسی می کنند تا مطالب مورد نظرشان را پیدا کنند.

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

نکته: هیچ گاه از heading ها برای بزرگتر کردن نوشته ها و پررنگ کردنشان استفاده نکنید. برای این کار باید از CSS استفاده کنیم که در جلسات بعد با آن آشنا خواهیم شد. تنها مورد استفاده ی heading ها عناوین و تیترها هستند!(ایران گستر)

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

پاسخ: همانطور که گفتیم تمام این موارد در CSS نوشته می شود اما برای مثال این مورد را برایتان توضیح میدهم. شما می توانید از font-size استفاده کنید:(ایران گستر)

<!DOCTYPE html>

<html>

<body>

<h1 style="font-size:60px;">Heading1</h1>

<p>You can change the size ofaheading with the style attribute,using the font-size property.</p>

</body>

</html>

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

من سایز این heading را روی 60 پیکسل گذاشته ام. شما می توانید به JSBin بروید و این مقدار را تغییر دهید تا ببینید چطور کوچک و بزرگ می شود.(ایران گستر)

استفاده از <hr>

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

<!DOCTYPE html>

<html>

<body>

<h1>Thisisheading1</h1>

<p>Thisissome text.</p>

<hr>

<h2>Thisisheading2</h2>

<p>Thisissome other text.</p>

<hr>

<h2>Thisisheading2</h2>

<p>Thisissome other text.</p>

</body>

</html>

اگر می خواهید خروجی این تگ را ببینید باید آن را در JSBin مشاهده کنید.

برچسب <head> چیست؟

بسیاری از طراحان مبتدی تگ <head> را با heading ها اشتباه می گیرند اما واقعیت این است که این دو تگ هیچ ارتباطی با هم ندارند. در واقع عنصر <head> نگهدارنده ی اطلاعات metadata است و بین تگ های <html> و <body> قرار می گیرد. metadata اطلاعاتی است که در مورد خودِ سند HTML است و هیچ گاه به نمایش در نمی آیند. بگذارید مثالی را ببینیم:(ایران گستر)

<!DOCTYPE html>

<html>

<head>

<title>My First HTML</title>

</head>

<body>

<p>The HTML head element contains meta data.</p>

<p>Meta data isdata about the HTML document.</p>

</body>

</html>

به غیر از عناصر p در کد بالا چیز دیگری به نمایش در نمی آید. یکی از metadata هایی که در کد بالا استفاده کرده ایم meta charset است که مشخص می کند سند ما از چه نوع encoding ای پشتیبانی می کند. برای زبان فارسی باید UTF-8 را به کار ببرید اما امروزه پیشنهاد می شود به طور کلی از هر زبانی استفاده کردید این مقدار را روی UTF-8 تنظیم کنید. در مورد این تگ ها نیز بعدا به طور مفصل صحبت خواهیم کرد.(ایران گستر)

:: بازدید از این مطلب : 22

امتیاز مطلب : 0

تعداد امتیازدهندگان : 0

مجموع امتیاز : 0

تاریخ انتشار : شنبه 20 مهر 1398 | نظرات ()

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

نوشته شده توسط : فاطمه فیصلی

HTML

HTML یک زبان برنامه نویسی نیست

باید بدانید که HTML یک زبان برنامه نویسی نیست، بلکه یک زبان نشانه گذاری است و طبق برخی گفته ها دلیل استفاده از کلمه ی نشانه‌گذاری این است که این زبان اعضا و عناصر صفحات وب را با نشانه گذاری به مرورگر می شناساند. به طور مثال از تگ <p> به عنوان یک نشانه استفاده می کند تا به مرورگر بگوید فلان متن یک پاراگراف است. در ضمن باید بدانید که تگ های HTML در مرورگر به نمایش در نمی آیند بلکه روی نحوه ی نمایش محتوا و درک ربات ها از متن و … اثر می گذارند. (ایران گستر)

مثالی از یک سند HTML

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

<!DOCTYPE html>

<html>

<head>

<title>Page Title</title>

</head>

<body>

<h1>My First Heading</h1>

<p>My first paragraph.</p>

</body>

</html>

نمایش کد بالا در ادیتور آنلاین JSbin

به عناصر کد بالا دقت کنید:

<DOCTYPE html!> به مرورگر ها/ ربات ها و … اعلام می کند که این سند، از نوع HTML5 است. در طول سال های اخیر نسخه های مختلفی از HTML معرفی شده اند که آخرین نسخه ی آن HTML 5 است و مبنای کار ما در این دوره قرار می گیرد.(ایران گستر)

عنصر <html> عنصر اصلی و ریشه ی HTML در هر صفحه ی اچ تی ام ال است.
عنصر <head> دارای اطلاعات meta در مورد سند مربوطه است.
عنصر <title> برای سند ما یک عنوان تعیین می کند.
عنصر <body> شامل محتوای قابل مشاهده توسط کاربر می باشد.
عنصر <h1> یک heading بزرگ را تعریف می کند (در آینده با heading ها آشنا می شویم).
عنصر <p> یک پاراگراف را تعیین می کند.

1- در انتهای این مقاله با نسخه های آن بیشتر آشنا می شویم.(ایران گستر)

ساختار تگ ها

تگ های اچ تی ام ال بین دو عدد angle bracket قرار می گیرند. angle bracket ها همان علامت های کمتر و بیشتری هستند (> یا <). مثال:

<tagname> محتوا در این قسمت قرار می گیرد… </tagname>

تگ های HTML در اکثر مواقع به صورت یک جفت حاضر می شوند مانند <p> و <p/> که به تگ اول start tag یا تگ آغازین و به دومی end tag یا تگ پایانی می گوییم. اگر دقت کنید متوجه می شوید که تگ پایانی دقیقا مانند تگ آغازین نوشته می شود با این تفاوت که یک forward slash (علامت /) نیز دارد.(ایران گستر)

نکته: ممکن است در اینترنت این تگ ها را با نام های opening tag و closing tag نیز ببینید. این نام ها نیز صحیح هستند.

مرورگرها

وظیفه و فلسفه ی وجودی مرورگرها این است که اسناد اچ تی ام ال را بخوانند و آن ها را برای کاربر نمایش دهند. همانطور که گفتیم، مرورگرها تگ های اچ تی ام ال را نشان نمی دهند بلکه با استفاده از آن ها متوجه می شوند محتوا را به چه شکلی نمایش دهند.(ایران گستر)

[caption id="attachment_64459" align="aligncenter" width="635"] مثالی از یک صفحه ی HTML خالی و ساده در مرورگر Chrome[/caption]

در واقع ساختار HTML در مرورگر ها به این شکل است:

ساختار HTML در مرورگر های مختلف

تنها قسمتی از تصویر بالا که سفید است (یعنی داخل تگ <body>) در مرورگر به نمایش در می آید و دیگر قسمت ها مخصوص مسائل دیگری هستند که در آینده با آن ها آشنا می شویم.(ایران گستر)

اعلان <DOCTYPE!>

همانطور که گفته شد، اعلان <DOCTYPE!> نوع سند HTML و نسخه ی آن را مشخص می کند تا مرورگر ها بتوانند صفحات وب را به شکل بهتری نمایش دهند. این اعلان تنها یک بار و آن هم بالای صفحه (قبل از تمام تگ های دیگر) نوشته می شود و نسبت به بزرگی و کوچکی حروف نیز غیر حساس است اما به صورت یک قرارداد همه جا به حروف بزرگ نوشته می شود (البته نسخه ی 5). این اعلان در نسخه ی 5 از HTML به شکل زیر نوشته می شود:(ایران گستر)

1	<!DOCTYPE html>

ما در طول این دوره بر اساس HTML 5 کار می کنیم اما جهت آشنایی شما با دیگر declaration ها چند مورد دیگر را نیز آورده ایم:(ایران گستر)

HTML 4.01

Strict:

1 2	<!DOCTYPE HTML PUBLIC"-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">

XHTML 1.0

Strict:

1 2	<!DOCTYPE html PUBLIC"-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">

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

نسخه	سال انتشار
HTML	1991
HTML 2.0	1995
HTML 3.2	1997
HTML 4.01	1999
XHTML	2000
HTML5	2014

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

HTML 2.0 – DTD:

1	<!DOCTYPE html PUBLIC"-//IETF//DTD HTML 2.0//EN">

HTML 3.2 – DTD:

1	<!DOCTYPE html PUBLIC"-//W3C//DTD HTML 3.2 Final//EN">

XHTML Basic 1.0 – DTD:

1 2	<!DOCTYPE html PUBLIC"-//W3C//DTD XHTML Basic 1.0//EN" "http://www.w3.org/TR/xhtml-basic/xhtml-basic10.dtd">

:: بازدید از این مطلب : 17

امتیاز مطلب : 0

تعداد امتیازدهندگان : 0

مجموع امتیاز : 0

تاریخ انتشار : جمعه 19 مهر 1398 | نظرات ()

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

نوشته شده توسط : فاطمه فیصلی

HTML

محیط کد نویسی HTML

برای یادگیری HTML و کدنویسی آن می توانید از ادیتور های پیشرفته مانند PHPStorm یا Visual Studio Code استفاده کنید اما در ابتدای کار بهتر است از ادیتور های متنی ساده مانند notepad خودِ ویندوز استفاده کنید.(ایران گستر)

دلیل این مسئله آن است که ادیتورهای پیشرفته به شما در کدنویسی کمک می کنند و شما مطلب را از خودتان نمی نویسید و فراموشش می کنید.(ایران گستر)

برای کد نویسی به شکل ساده در notepad ابتدا باید آن را باز کنید و سپس به صورت ساده عناصر زیر را در آن بنویسید:

<!DOCTYPE html>

<html>

<body>

<h1>My First Heading</h1>

<p>My first paragraph.</p>

</body>

</html>

این عناصر تنها یک نمونه هستند تا با کدنویسی در notepad آشنا شویم، بعدا می توانید آن را تغییر دهید. کد هایتان در notepad به این شکل خواهند بود:(ایران گستر)

کدنویسی ساده HTML در notepad

حالا برای ذخیره سازی این فایل به شکل یک سند HTML باید به این شکل عمل کنید:(ایران گستر)

ابتدا از سمت بالا و چپ پنجره، گزینه ی File را انتخاب کنید.
سپس گزینه ی Save as را انتخاب کنید.
در پنجره ای که برایتان باز می شود نام فایل را index.html یا index.htm بگذارید
و در آخر نیز Encoding را روی مقدار UTF-8 قرار دهید.

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

ذخیره ی فایل notepad به شکل یک سند HTML

نکات مربوط به مراحل بالا:(ایران گستر)

شما می توانید پسوند فایل را html یا htm بگذارید و باید بدانید این دو هیچ تفاوتی با هم ندارند. دلیل وجود htm این است که بعضی از سرور ها فایل هایی با پسوند چهار حرفی را قبول نمی کنند. بنابراین htm یک جایگزین برای html است و انتخاب پسوند با شما است.(ایران گستر)
دلیل اضافه کردن نام index به فایل HTML این است که وب سرور ها فایل هایی با نام index.html و index.htm و … را به عنوان صفحه ی پیش فرض حساب می کنند و آن را خودکار اجرا می کنند. بنابراین معمولا صفحات اصلی سایت ها را به شکل index نام گذاری می کنند تا وب سرور به صورت خودکار آن را برای کاربر اجرا کند.(ایران گستر)
قرار دادن encoding روی utf-8 به این دلیل است که ما ممکن است از زبان فارسی، شکلک ها و یا کاراکتر های غیر معمول نیز استفاده کنیم. اگر چنین تصمیمی بگیریم (مثلا وب سایت ما فارسی باشد) اما به عنوان utf-8 تنظیم نشده باشد تمام کاراکتر ها بهم خواهند ریخت. البته مسئله فقط زبان فارسی نیست و ممکن است بعضی از کاراکتر ها نیز بدون utf-8 پشتیبانی نشوند بنابراین توصیه می کنیم همیشه تمام فایل هایتان را روی utf-8 قرار دهید.(ایران گستر)

پس از اینکه فایل را ذخیره کردید می توانید آن را در مرورگر خود باز کنید:

باز کردن فایل ساده ی HTML در مرورگر کروم

اما برای دوره ی ما استفاده از ادیتور هایی مثل notepad ممکن نیست چرا که قرار است همه با هم یاد بگیریم. بنابراین از همان ادیتور آنلاین جاوا اسکریپت استفاده می کنیم , به طور مثال کد زیر را در ادیتور آنلاین اجرا می کنیم:(ایران گستر)

<!DOCTYPE html>

<head>

<title>این عنوان کل صفحه است</title>

</head>

<body>

<p>این یک پاراگراف است.</p>

</body>

</html>

برای نمایش این کد در مرورگرتان روی این لینک کلیک کنید.

عناصر پایه ای HTML

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

ساختار اسناد HTML

همه می دانیم که تمام اسناد HTML با یک declaration (به معنی «اعلان») شروع می شود: <DOCTYPE html!>. پس از آن تگ های <html> و <html/> را داریم که تمام تگ های دیگر در آن ها نوشته می شوند. البته از بین این تگ ها، تنها تگ هایی که بین <body> و <body/> قرار می گیرند برای کاربر قابل مشاهده هستند. مثال زیر را ببینید:(ایران گستر)

<!DOCTYPE html>

<html>

<body>

<h1>My First Heading</h1>

<p>My first paragraph.</p>

</body>

</html>

Heading ها در HTML

heading ها در واقع تیتر قسمت های مختلف صفحات هستند.

این تیتر ها از <h1> شروع می شوند و تا <h6> ادامه دارند. این تگ ها به ترتیب اهمیت نام گذاری شده اند بنابراین <h1> یعنی مهم ترین و اصلی ترین تیتر و <h6> یعنی فرعی ترین تیتر. به مثال زیر دقت کنید:(ایران گستر)

<!DOCTYPE html>

<html>

<body>

<h1>Thisisheading1</h1>

<h2>Thisisheading2</h2>

<h3>Thisisheading3</h3>

<h4>Thisisheading4</h4>

<h5>Thisisheading5</h5>

<h6>Thisisheading6</h6>

</body>

</html>

ما یک سری نوشته را با heading های مختلف نوشته ایم. حالا روی این لینک کلیک کنید تا خروجی را در مرورگرتان ببینید. همانطور که مشاهده کردید، بزرگی و bold بودن این نوشته ها متفاوت است. بگذارید یک مثال عملی برایتان بزنم. به صفحه ی Iran System encoding در ویکی پدیا بروید.

صفحه ی مربوط به encoding در ایران از ویکی پدیا

در این عکس که قسمتی از همان صفحه است متوجه دو عدد heading می شویم؛ heading اول “Iran System encoding” و heading دوم “Character set” است. همانطور که می بینید، یکی از دیگری بزرگتر است. heading اول در تگ h1 و heading دوم در تگ h2 قرار دارد. آیا می دانید چرا؟(ایران گستر)

مسئله مربوط به کدنویسی نیست، بلکه کاملا منطقی و انسانی است. اگر مقاله ای داشته باشیم که در مورد encoding در ایران باشد، مشخص است که Iran System encoding (به معنی «سیستم کدگذاری ایران») باید تگ h1 باشد چرا که کل مقاله در مورد آن است. سپس متوجه می شویم که لیست کاراکتر ها یا همان Character set یک شاخه ی فرعی یا یک موضوع فرعی است اما هنوز هم تیتر محسوب می شود. بنابراین آن را در تگ h2 قرار می دهیم. حالا اگر تیتر دیگری داشتیم که در مورد برخی از Character set ها بود، باید به آن h3 می دادیم و الی آخر.(ایران گستر)

پاراگراف ها

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

1 2	<p>This is a paragraph.</p> <p>This is another paragraph.</p>

لینک ها

لینک ها در این زبان با استفاده از تگ <a> مشخص می شوند:(ایران گستر)

1	<a href="https://www.w3schools.com">This is a link</a>

همانطور که میبینید این تگ دارای مقداری به نام href است که تگ آغازین اش چسبیده است. به href و امثال آن attribute می گوییم که در جلسات بعد با آن ها آشنا خواهیم شد. کار این attribute ها این است که اطلاعات بیشتری به تگ ضمیمه کنند.

تصاویر

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

1	<img src="w3schools.jpg"alt="W3Schools.com"width="104"height="142">

دکمه ها

برای نمایش دکمه ها (مانند دکمه ی «ورود به حساب کاربری» و …) از تگ <button> استفاده می کنیم:(ایران گستر)

1	<button>Click me</button>

لیست ها

برای استفاده از لیست ها در زبان HTML از دو تگ <ul> (مخفف unordered list به معنی «لیست بدون ترتیب») یا <ol> (مخفف ordered list به معنی «لیست مرتب») استفاده می شود:(ایران گستر)

<ul>

<li>Coffee</li>

</ul>

از <ul> ها زمانی استفاده می شود که ترتیب موارد لیست اهمیتی نداشته باشد و از <ol> نیز زمانی استفاده می شود که ترتیب اهمیت داشته باشد. در مثال بالا مهم نیست که اول coffee (قهوه) بیاید یا tea (چای) یا milk (شیر). بنابراین از <ul> استفاده کرده ایم.

:: بازدید از این مطلب : 19

امتیاز مطلب : 0

تعداد امتیازدهندگان : 0

مجموع امتیاز : 0

تاریخ انتشار : جمعه 19 مهر 1398 | نظرات ()

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

نوشته شده توسط : فاطمه فیصلی

HTML

[caption id="attachment_3063" align="aligncenter" width="300"] هر عنصر HTML می تواند Attribute هایی داشته باشد[/caption]

Attribute ها چه کار می کنند؟

همانطور که می دانید هر عنصر HTML می تواند Attribute هایی (به معنی «ویژگی») داشته باشد. کار این Attribute ها ارائه ی اطلاعات بیشتر به این عناصر است و همیشه در تگ آغازین حاضر می شوند. در اکثر مواقع این Attribute ها دارای جفت های “name=”value هستند که در ادامه با مهم ترین آن ها آشنا می شویم.(ایران گستر)

ویژگی href

لینک ها در زبان HTML با تگ <a> تعریف می شوند و برای آدرس دهی این لینک ها از Attribute ای به نام href استفاده می شود. مثال:(ایران گستر)

<!DOCTYPE html>

<html>

<body>

<h2>The href Attribute</h2>

<p>HTML links are defined with theatag.The link address isspecified inthe href attribute:</p>

<ahref="https://roxo.ir/plus">Thisisalink</a>

</body>

</html>

همانطور که می بینید آدرس لینک را توسط href به تگ <a> داده ایم. در مورد لینک ها و تگ <a> بعدا به شکل مفصل صحبت خواهیم کرد.(ایران گستر)

ویژگی src

تصاویر در زبان HTML با تگ <img> تعریف می شوند اما این تگ تنها تعریف کننده ی یک تصویر است. اینکه کدام تصویر به نمایش در بیاید به عهده ی src می باشد. این Attribute آدرس فایل تصویری مورد نظر را به تگ <img> می دهد. به مثال زیر توجه کنید:(ایران گستر)

<!DOCTYPE html>

<html>

<body>

<h2>The src Attribute</h2>

<p>HTML images are defined with the img tag,andthe filename of the image source isspecified inthe src attribute:</p>

</body>

</html>

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

اگر به مثال بالا دقت کنید، دو Attribute دیگر نیز می بینید؛ width (به معنی «عرض») و height («طول»). در واقع اینها دو Attribute دیگر هستند که در واحد پیکسل نوشته می شوند بنابراین در تصویر بالا که “width=”800 است منظور این است که عرض تصویر 800 پیکسل باشد.(ایران گستر)

در مورد تصاویر و Attribute هایشان بعدا به صورت مفصل صحبت خواهیم کرد و اینجا تنها قصد آشنایی با Attribute ها را داریم.

ویژگی alt

alt متنی را مشخص می کند تا اگر به هر دلیلی تصویر ما به کاربر نمایش داده نشد (مانند حذف شدن تصویر از سرور ما، تحریم شدن تصویر در ایران، ناسازگار بودن مرورگر کاربر با سایت ما و …) به جای آن متنی نمایش داده شود تا کاربر بداند آن عکس چه بوده است. همچنین این نوشته می تواند توسط screen reader ها خوانده شود (دستگاه هایی که محتوای صفحه را برای افراد نابینا می خوانند) تا افراد نابینا یا کسانی که نمی توانند صفحه را ببینند بتوانند آن را بخوانند.(ایران گستر)

از دیگر فایده های این Attribute کمک کردن به طراحی سایت است. تصور کنید در src آدرس اشتباه یک تصویر را بدهید. زمانی که سایتتان بالا می آید دیگر تصویری در کار نیست و اگر برایش alt تعریف نکرده باشید، ممکن است یادتان رفته باشد که این تصویر چه بوده است. حالا باید بگردید و ببینید این تصویر مربوط به چه پست یا مطلبی بوده اما با alt می توانید به راحتی بفهمید کدام تصویر مد نظر بوده است.(ایران گستر)

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

<!DOCTYPE html>

<html>

<body>

<h2>The alt Attribute</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 از مهم ترین Attribute هایی است که باید برای تک تک عناصر تصویری تان تعریف کنید چرا که علاوه بر حرفه ای کردن صفحه تان، در موتورهای جست و جو و مسائل سئو اهمیت ویژه ای پیدا می کند.(ایران گستر)

ویژگی style

این Attribute مربوط به استایل (همان سبک و سیاق ظاهری عناصر) می باشد مانند رنگ متن، اندازه ی فونت ها و … . مثال:

<!DOCTYPE html>

<html>

<body>

<h2>The style Attribute</h2>

<p>The style attribute isused tospecify the styling of an element,like color:</p>

<pstyle="color:red">Iamaparagraph.</p>

</body>

</html>

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

با استفاده از این روش ساده، متن خود را قرمز رنگ کرده ایم! این Attribute مربوط به زبان CSS است که همیشه در کنار زبان HTML می‌باشد. ما در این دوره و در قسمت های آینده به صورت خلاصه در مورد CSS صحبت خواهیم کرد و در آینده ای نزدیک یک دوره ی جداگانه برای آن خواهیم داشت.(ایران گستر)

ویژگی lang

شما می توانید زبان یک سند را در تگ <html> تعریف کنید. این کار از طریق lang (مخفف language به معنی «زبان») انجام می شود. مثال:(ایران گستر)

<!DOCTYPE html>

<body>

...

</body>

</html>

مشخص کردن زبان صفحه تان برای موتور های جست و جو ضروری است. اگر به کد بالا نگاه کنید میبینید که زبان صفحه را en-US گذاشته ایم. دو حرف اول (یعنی en که مخفف English یا همان زبان انگلیسی است) مشخص کننده ی زبان است و دو حرف دوم (یعنی US یا همان آمریکا) تنها در صورتی می آیند که زبان ما چندین گویش داشته باشد. به طور مثال زبان انگلیسی گویش های آمریکایی، استرالیایی، بریتانیایی و … دارد. ما اینجا گویش آمریکایی را انتخاب کرده ایم.

برای زبان فارسی باید از عبارت fa استفاده کنید. برای کامل تر بودن بهتر است آن را به شکل fa-IR بنویسید تا با فارسی کشورهای اطرافمان تمایز پیدا کند.(ایران گستر)

ویژگی title

در واقع title متنی را مشخص می کند که به آن tooltip میگوییم. tooltip ها همان متن هایی هستند که اگر موس را روی عنصر خاصی نگه دارید ظاهر می شوند. حتما با آن ها در اینترنت آشنا هستید. به طور مثال اگر به سایتی بروید و موس را روی عنصری که title را به عنوان attribute داشته باشید نگه دارید، نوشته ای ظاهر می شود که معمولا شامل توضیحات اضافی در مورد آن عنصر است. در مثال زیر ما یک title را به تگ <p> اضافه کرده ایم:(ایران گستر)

<!DOCTYPE html>

<body>

<h2 title="من یک تیتر هستم">The title Attribute</h2>

<ptitle="هستم tooltip من یک">

موسخودرارویاینمتنبیاوریدوتکانندهیدتاتوضیحاتراببینید.

</p>

</body>

</html>

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

زمانی که به JSBin رفتید، موس خود را روی پاراگرافی که میبینید نگه دارید تا متن tooltip به نمایش در بیاید.(ایران گستر)

حروف بزرگ یا کوچک؟

همانطور که می دانید در attribute های زبان HTML و تگ های مختلف آن الزامی به نوشتن حروف به صورت بزرگ یا کوچک نیست. شما می توانید title را به صورت title و یا TITLE بنویسید و تفاوتی در کد هایتان ایجاد نمی شود اما کنسرسیوم جهانی وب (W3C) پیشنهاد می کند در اسناد HTML از حروف کوچک استفاده کنید اما در اسنادی که قوانین سخت گیرانه تری دارند (مانند XHTML) مجبور هستید از حروف کوچک استفاده کنید. تقریبا در تمام دنیا HTML را با حروف کوچک می نویسند بنابراین ما نیز همین کار را می کنیم.(ایران گستر)

در مورد دیگر استاندارد ها نیز باید بگوییم در HTML5 نیازی به قرار دادن attribute ها در quotation نیست اما سعی کنید همیشه از چنین کاری دوری کنید چرا که استاندارد نیست و به سئوی شما ضربه می زند.

مثال بد و غیر استاندارد:

1	<ahref=https://roxo.ir>

مثال صحیح و استاندارد:

1	<ahref="https://roxo.ir">

همچنین در مواقعی نیز مجبور هستید از quotation استفاده کنید. به مثال زیر نگاه کنید:

1	<ptitle=About roxo.ir>

از آن جایی که این attribute دارای اسپیس است اگر quotation ها را حذف کنید، دیگر اجرا نخواهد شد.

:: بازدید از این مطلب : 17

امتیاز مطلب : 0

تعداد امتیازدهندگان : 0

مجموع امتیاز : 0

تاریخ انتشار : جمعه 19 مهر 1398 | نظرات ()

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

نوشته شده توسط : فاطمه فیصلی

HTML

[caption id="attachment_3063" align="aligncenter" width="300"] شیوه تعریف عناصر HTML[/caption]

ساختار عناصر HTML

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

<tagname> محتوا در این قسمت قرار می‌گیرد </tagname>

بنابراین هر عنصر HTML برابر است با تگ آغازین + محتوا + تگ پایانی. مثال:(ایران گستر )

<p>My first paragraph.</p>

نکته: عناصر HTML ای که دارای محتوا نباشند «عناصر خالی» یا empty element نام دارند و دارای تگ پایانی نیز نیستند. یکی از مثال های بارز این تگ ها، تگ <br> است که معادل اینتر زدن و به خط بعد رفتن در هنگام نوشتن است.(ایران گستر )

«به خط جدید رفتن» اصطلاح خاص خودش را دارد؛ line break. به مثال زیر توجه کنید:

<!DOCTYPE html>

<html>

<body>

<p>Thisisa<br>paragraph withaline break.</p>

</body>

</html>

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

در HTML5 نیازی به بستن عناصر خالی ندارید اما اگر دوست دارید کدهایتان را در نهایت استاندارد بنویسید و همچنین کد هایتان توسط تجزیه کنندگان XML قابل خواندن باشد می توانید آن ها را به این شکل ببیندید:(ایران گستر )

<br />

توجه کنید که در این حالت، تگ ها دو عدد (تگ آغازین و پایانی) نمی شوند بلکه همان تگ اول تغییر شکل پیدا می کند.

عناصر تو در تو (nested)

عناصر HTML می توانند به صورت تو در تو یا nested قرار بگیرند؛ این یعنی یک عنصر داخل عنصر دیگری باشد.

به طور مثال در کد زیر چهار عنصر HTML وجود دارد:(ایران گستر )

<!DOCTYPE html>

<html>

<body>

<h1>My First Heading</h1>

<p>My first paragraph.</p>

</body>

</html>

اگر به کد بالا نگاه کنید متوجه می شوید عنصر <html> تمام سند HTML را تعریف می کند و دارای تگ های آغازین و پایانی است. محتوای درون این تگ، یک تگ دیگر به نام <body> است. این عنصر بدنه ی سند را تعریف می کند و مشخصا دارای تگ های آغازین و پایانی است. حالا محتوای خود عنصر <body> شامل دو تگ <h1> و <p> است، یعنی این قسمت:(ایران گستر )

<body>

<h1>My First Heading</h1>

<p>My first paragraph.</p>

</body>

حالا تگ <h1> یک تیتر را تعیین می کند و دارای تگ های <h1> و <h1/> می باشد. تگ <p> نیز تعریف کننده ی یک پاراگراف است که شامل تگ های <p> و <p/> می شود. این توضیح ساختار تو در توی بالا بود. حالا می فهمیم معنی تو در تو بودن چیست.(ایران گستر )

تگ های پایانی

زبان HTML مانند دیگر زبان ها آنچنان قوانین سفت و سختی ندارد. منظور من از این حرف چیست؟ منظور من این است که در بسیاری از زبان های برنامه نویسی با جا انداختن کوچک ترین علامت و نوشتار، در اکثر اوقات برنامه از کار می افتد اما در زبان HTML مسئله به شکل دیگری است.(ایران گستر )

در زبان HTML اگر برخی از قسمت ها را جا بیندازید صفحه تان هنوز هم نمایش داده می شود! به طور مثال:

<!DOCTYPE html>

<html>

<body>

<p>Thisisaparagraph.

</body>

</html>

در مثال بالا تگ های پایانی عنصر <p> را قرار نداده ایم اما هنوز هم صفحه ی ما نمایش داده می شود. برای اجرای این کد در مرورگرتان روی این لینک کلیک کنید.(ایران گستر )

در واقع تگ آغازین در مثال بالا دلخواه فرض شده است اما جدا هشدار می دهیم که هیچ گاه به این شکل کدنویسی نکنید چرا که:

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

بزرگی و کوچکی حروف

در زبان HTML بزرگی و کوچکی حروف اهمیتی ندارد بنابراین <P> با <p> یکی است اما تقریبا در تمام دنیا شیوه ی کدنویسی HTML به صورت حروف کوچک است. شما می توانید همین الان به هر سایتی که دوست دارید سر بزنید و کد های HTML آن را مشاهده کنید. 99 درصد سایت های جهان به حروف کوچک HTML می نویسند. همچنین سندهایی که سخت گیری های بیشتری از HTML دارند (مانند XHTML) حروف بزرگ را قبول نمی کنند. بر همین اساس ما در تمام کدنویسی ها و پروژه های آینده از حروف کوچک استفاده می کنیم.(ایران گستر )

XHTML چیست؟

زبان XHTML مخفف EXtensible HyperText Markup Language (به معنای «زبان امتدادپذیر نشانه‌گذاری فرامتنی») است. در واقع این زبان دقیقا با زبان HTML یکی است و تنها تفاوت آن با HTML در این است که دارای قوانین سخت گیرانه تری می‌باشد.

به عبارت دیگر می توانیم بگوییم XHTML همان HTML است که به عنوان یک برنامه ی XML تعریف شده است. از نظر پشتیبانی نیز خیالتان راحت باشد، XHTML توسط تمام مرورگر های جدید پشتیبانی می شود.(ایران گستر )

سوالی که پیش می آید این است که چرا باید از این زبان استفاده کنیم؟ پاسخ ساده است. اگر به کد زیر نگاه کنید، می فهمیم که دارای نقص هایی است:

<html>

<head>

<title>Thisisbad HTML</title>

<body>

<h1>Bad HTML

<p>Thisisaparagraph

</body>

مانند مثال قبلی ما، تگ های پایانی اش جا افتاده اند.

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

حتما با خودتان می گویید من هیچ گاه چنین کاری انجام نمی دهم و حواسم به تگ های پایانی هست. مشکل آن جاست که مسئله فقط تگ های پایانی نیست، زبان HTML اجازه می دهد بسیاری از موارد غیر استاندارد را اجرا کنید و زمانی که کد هایتان تبدیل به 800 خط، 1000 خط و بیشتر شد احتمال خطا بسیار بالا می رود.(ایران گستر )

:: بازدید از این مطلب : 28

امتیاز مطلب : 0

تعداد امتیازدهندگان : 0

مجموع امتیاز : 0

تاریخ انتشار : جمعه 19 مهر 1398 | نظرات ()

ولوو XC40 با سیستم عامل اندروید رونمایی می‌شود(ایران گستر)

نوشته شده توسط : فاطمه فیصلی

ولوو XC40 با سیستم عامل اندروید

XC40 با جدید ترین امکانات

تنها یک هفته تا رونمایی از اولین خودروی تمام الکتریکی مدل XC40 SUV ولوو باقی مانده و روز گذشته این خودرو ساز سوئدی اعلام کرد XC40 برای اولین بار به سیستم هوشمند «Android Automotive» مجهز خواهد بود.(ایران گستر)

این یعنی XC40 جدید با امکاناتی همچون اپلیکیشن‌های گوگل اسیستنت و گوگل مپ بدون نیاز به اسمارت‌فون اندرویدی عرضه خواهد شد. این سیستم جدید گوگل همچنین به راننده امکان دسترسی به پلی استور گوگل و دانلود اپلیکیشن‌های تعبیه شده برای سرنشینان خودرو را می‌دهد.(ایران گستر)

تقریبا 2 سال از تلاش‌های ولوو برای به‌کارگیری اندروید در خودروهایش می‌گذرد. سال 2018 بود که گوگل در کنفرانس I/O نسخه اولیه خودرو XC40 دیزلی را معرفی کرد که در آن از اندروید استفاده شده بود.(ایران گستر)

[caption id="attachment_71303" align="alignnone" width="5100"] XC40 با جدید ترین امکانات[/caption]

البته برندهای زیرمجموعه ولوو در گذشته از سیستم عامل اندروید در خودروهایشان استفاده کرده‌اند. «Polestar» یکی از همین برندهاست که اخیرا خودروهای تمام الکتریکی مدل Polestar 2 را با سیستم عامل اندروید معرفی و اعلام کرد تا سال 2020 این خودرو تمام الکتریکی را به بازار عرضه خواهد کرد.(ایران گستر)

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

علیرغم این ویژگی‌های سیستم اندروید به‌کارگرفته شده در این خودرو که امکانات خیلی بیشتری در مقایسه با دیگر سیستم‌های هوشمند خودرویی ارائه می‌کند، اما این سیستم گوگل همچنان شباهت خیلی زیادی به نرم‌افزار Senus ولوو که در دیگر خودروهای این شرکت به‌کارگرفته شده دارد.(ایران گستر)

:: بازدید از این مطلب : 20

امتیاز مطلب : 0

تعداد امتیازدهندگان : 0

مجموع امتیاز : 0

تاریخ انتشار : پنج شنبه 18 مهر 1398 | نظرات ()

7 ویژگی بارز سیستم عامل مک او اس Catalina (ایران گستر)

نوشته شده توسط : فاطمه فیصلی

macOS

سیستم عامل مک او اس Catalina

اپلیکیشن‌های جداگانه‌ای برای Music، TV و Podcasts

Sidecar

Screen Time

اپل آرکید

Find My

اپلیکیشن‌های بروزرسانی‌شده

دسترسی سریع‌تر

:: بازدید از این مطلب : 24

امتیاز مطلب : 0

تعداد امتیازدهندگان : 0

مجموع امتیاز : 0

تاریخ انتشار : پنج شنبه 18 مهر 1398 | نظرات ()

آموزش ساخت مموجی دلخواه در IOS نسخه 13(ایران گستر)

نوشته شده توسط : فاطمه فیصلی

مموجی در IOS

ساخت مموجی

با عرضه آی او اس 13، اپل نیز قابلیت‌های جدیدی برای ساخت مموجی های دلخواه به‌وجود آورده است. در این به‌روزسانی، رنگ‌ پوست جدید، چهره‌های جدید، وسایل تزئینی جدید و حتی امکان تغییر ظاهر دندان‌ها وجود دارد. در آی او اس 13 شما حتی می‌توانید مموجی‌ها دلخواهتان را در اشکال مختلف استفاده کنید. آواتارهای مموجی جدید اپل در حال حاضر در آیفون 11، 11 پرو و 11 پرو مکس قابل استفاده هستند.(ایران گستر)

مموجی‌های آیفون با مموجی‌هایی که در دیگر اسمارت‌فون‌های رقیب وجود دارند کاملا متفاوت هستند. برای مثال مموجی ‌های واقعیت افزوده که اخیرا در گوشی‌های سامسونگ دیدیم خیلی ظاهر دلچسبی نداشتند. جالب اینکه خود سامسونگ هم در مراسم معرفی گلکسی اس 10 اشاره زیادی به این مموجی‌ها نداشت. گوگل هم فعلا مموجی‌های اختصاصی خود را معرفی نکرده که ممکن است با معرفی پیکسل 4 شاهد مموجی‌های اختصاصی این شرکت نیز باشیم.(ایران گستر)

کاربرد مموجی‌های اپل

مموجی ‌های آی او اس 13 را می‌توان در اپلیکیشن‌های Messages، فیس‌تایم، میل، Notes و دیگر اپلیکیشن‌های مورد علاقه کاربر استفاده کرد.(ایران گستر)

روش ساخت مموجی‌های دلخواه

در آی او اس 13 کاربر می‌تواند از ویژگی‌های جدیدی در مموجی‌ها استفاده کند که در بالا به آنها اشاره کردیم. برای دسترسی به ویژگی‌های مختلف برای استفاده در مموجی‌ها، تب‌های مختلفی وجود دارند. در هر تب با استفاده از اسلایدر تعبیه شده می‌توانید پوست، مو و آرایش هر مموجی را تنظیم کنید.(ایران گستر)

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

استیکر مموجی چیست؟

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

استیکرهای مموجی را از کجا پیدا کنم؟

در اپلیکیشن Messages، روی آیکون مموجی ضربه بزنید و سپس آیکون سه نقطه را لمس کنید. در این بخش اگر قبلا مموجی ساخته باشید، می‌توانید آن را ویرایش یا حذف کنید.(ایران گستر)

چه آیفون‌هایی از نسخه جدید مموجی ‌ها پشتیبانی می‌کنند؟

اگر آیفون شما از چیپست A9 بهره می‌برد، بنابراین می‌توانید از مموجی‌های جدید اپل استفاده کنید. چیپ A9 در آیفون 6اس و آیپد نسل پنجم استفاده شده است. البته به یاد داشته باشید که سیستم‌عامل دیوایس شما باید به آی او اس 13 به‌روزرسانی شده باشد.(ایران گستر)

:: بازدید از این مطلب : 22

امتیاز مطلب : 0

تعداد امتیازدهندگان : 0

مجموع امتیاز : 0

تاریخ انتشار : پنج شنبه 18 مهر 1398 | نظرات ()

آموزش استریم ایکس‌باکس وان روی ویندوز 10(ایران گستر)

نوشته شده توسط : فاطمه فیصلی

عصر دیپ فیک

دیپ فیک چیست؟

دیپ فیک‌ ها،(Deepfake) پدیده‌های چالش بر انگیز این روزهای اینترنت هستند. کلیپ‌هایی ساختگی، که با استفاده از تکنیک‌های هوش مصنوعی و یادگیری ماشینی، با واقعیت تفاوت زیادی ندارند.(ایران گستر)

Sam Gregory,، مدیر برنامه ای غیر دولتی به نام Witness است، برنامه‌ای که از ویدیو به عنوان ابزاری برای دفاع از حقوق بشر، استفاده می‌کند.(ایران گستر)

مصاحبه گرگوری

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

[caption id="attachment_71152" align="alignnone" width="772"] گرگوری در مصاحبه‌ای با وبسایت وایرد اعلام کرد که باید خود را آماده دیدن ویدیوهای دیپ فیک بیشتری کنیم[/caption]

سیاست مدارن آمریکایی هشدار داده‌اند که ویدیوهای دیپ‌فیک می‌تواند برای انتخابات پیش روی این کشور، مشکل ایجاد کند.

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

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

به عقیده گرگوری، این دوره، عصر دیپ فیک است. با این وجود وی معتقد است که هنوز نمی‌توان از واقعیت نا امید شد:« فعلا چاره این است. ما همگی باید تبدیل به کاربران شکاک شویم. باید فرهنگ جدیدی از دنیای مجازی شکل بگیرد که اِلمان‌هایش بر اساس نسل جدید تکنولوژی تغییر پیدا کرده است.»(ایران گستر)

:: بازدید از این مطلب : 27

امتیاز مطلب : 0

تعداد امتیازدهندگان : 0

مجموع امتیاز : 0

تاریخ انتشار : پنج شنبه 18 مهر 1398 | نظرات ()

آموزش استریم ایکس‌باکس وان روی ویندوز 10(ایران گستر)

نوشته شده توسط : فاطمه فیصلی

آموزش استریم ایکس‌باکس وان

ایکس‌باکس وان

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

اما چرا باید همچین کاری کرد؟ پاسخ این است که برخی افراد مانیتور کامپیوترشان را به تلویزیون ترجیح می‌دهند. دیگر دلیل این است که کنسولتان در یک نقطه از خانه به برق متصل است به جای خرید یک کابل HDMI 100 متری ترجیح می‌دهید بازی‌ها را به صورت وایرلس روی مانیتور کامپیوتر استریم کنید. بدون دردسر.(ایران گستر)

برخلاف پلی استیشن که از دو ویژگی Remote Play و PS Now بهره می‌برد و به کاربر امکان استریم به هرجایی را می‌دهد، ایکس‌باکس وان و کامپیوتر باید به یک شبکه مشترک متصل باشند. با این وجود تنها با یک ترفند ساده چند قدمی ساده می‌توانید به راحتی بازی‌های ایکس‌باکس وان را روی کامپیوتر استریم کنید.(ایران گستر)

از اپلیکیشن “Xbox Console Companion” استفاده کنید

اگر از ویندوز 10 روی کامپیوترتان استفاده می‌کنید، احتمالا اپلیکیشن “Xbox Console Companion” هم به صورت پیش‌فرض روی آن نصب شده است. در صورتی که آن را پیدا نکردید، می‌توانید آن را از مایکروسافت استور به راحتی دانلود کنید.

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

1- اپلیکیشن را باز کنید سپس وارد اکانت مایکروسافت خود شوید.(ایران گستر)

2- پس از ورود به اکانت، روی گزینه منو در گوشه بالا سمت چپ کلیک کنید. در لیست باز شده روی گزینه Connection در انتهای لیست کلیک کنید.(ایران گستر)

3- حالا گزینه «Add a Device» را انتخاب نمایید. اپلیکیشن به صورت خودکار به دنبال کنسول ایکس باکس وان موجود در شبکه شما می‌گردد. پس از اینکه کنسول شما پیدا شد، روی گزینه «Connect» کلیک کنید.(ایران گستر)

4- اگر کنسولتان پیدا نشد، آدرس IP آن را در فیلد مورد نظر که در تصویر نیز مشاهده می‌کنید وارد کنید. آدرس IP کنسولتان را هم می‌توانید از آدرس Network > “Network settings > Advanced Settings در منوی کنسولتان پیدا کنید.(ایران گستر)

5- پس از اتصال، کنسول شما در بخش «Now Playing» در اپلیکیشن Companion نمایش داده خواهد شد. با کلیک بر روی آن می‌توانید تصویر زنده کنسول خود را روی نمایشگر کامپیوترتان مشاهده کنید.(ایران گستر)

از بین بردن تاخیر و کندی در استریم

آموزش استریم ایکس‌باکس

ممکن است زمانی که بازی‌ها را روی کامپیوتر استریم می‌کنید با کمی کندی مواجه شوید که این مسئله به شبکه وای‌فای شما مربوط می‌شود. یکی از راه‌های افزایش قابل توجه سرعت استریم استفاده از کابل «Ethernet» است. البته اپلیکیشن Xbox Console Companion طبق تصویر به شما امکان تغییر کیفیت تصاویر را نیز می‌دهد و با کاهش کیفیت تصاویر می‌توانید استریم را با تاخیر کمتر و بدون کندی اجرا کنید. البته این کار باعث کاهش کیفیت تصاویر نیز خواهد شد.(ایران گستر)

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

:: بازدید از این مطلب : 35

امتیاز مطلب : 0

تعداد امتیازدهندگان : 0

مجموع امتیاز : 0

تاریخ انتشار : پنج شنبه 18 مهر 1398 | نظرات ()

کامپیوترهای کوانتومی روزی دنیا را در دست خواهد گرفت(ایران گستر)

نوشته شده توسط : فاطمه فیصلی

کامپیوترهای کوانتومی

اما برخی از متخصصین صنعت کامپیوتر، نگرانند که کامپیوترهای کوانتومی بتوانند حتی خود اینترنت را نیز از کار بیندازند.(ایران گستر)

این تئوری را اولین بار دکتر ریچارد فینمن در سال 1982 مطرح کرد. در این تئوری ادعا می‌شود که کامپیوترهای کوانتوم، وِیژگی‌های اختصاصی فیزیک کوانتوم را دارا هستند و با پیشرفت علم کامپیوتر، به قدرت پردازشی دست پیدا می‌کنند که فراتر از هر کامپیوتر دیگری است.(ایران گستر)

بیت‌های کوانتومی

کامپیوترهای کوانتوم، به جای استفاده بیت‌های سنتی – صفر و یک‌هایی که برای ذخیره و انتقال داده استفاده می‌شود- از بیت‌های کوانتومی یا کیوبیتز(qubits) بهره برده‌اند. کیوبیت‌ها دیگر محدود به دو حالت دوگانه صفر و یک نبوده ومی‌توانند و با هر بار اضافه شدن به سیستم کامپیوتر کوانتومی، قدرت آن را به طرز قابل توجهی افزایش ‌دهند.(ایران گستر)

کامپیوترهای کوانتومی

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

آنطور که از ادله بر می‌آید، ظاهرا گوگل در رابطه با تکنولوژی این سبک انقلابی از کامپیوترها نیز، مثل دیگر حوزه‌ها پیشتاز شده است. این شرکت موفق شده یک کامپیوتر 72-qubit تولید کند که قادر است محاسبه‌ای را که یک سوپر کامپیوتر سنتی در ده هزار سال ! انجام می‌دهد، تنها در 200 ثانیه انجام دهد.(ایران گستر)

آخرالزمان کوانتومی

اما چنین توسعه و دستاوردی قطعا بدون هزینه نخواهد بود. آقای تیم کالان، یکی از مسئولین شرکت امنیت سایبری Sectigo، هشدار داده که توسعه این نسل جدید از ماشین‌ها می‌تواند تبدیل به فاجعه‌ای شود که کالان از آن تحت عنوان «آخرالزمان کوانتومی» نام برده است. بیشترین تهدیدی هم که ایجاد می‌شود، در حوزه تکنولوژی‌ های رمزگذاری هویدا خواهد شد مانند تکنیک‌هایی که همین حالا در برنامه‌های پیغام رسانی مانند واتسپ دیده می‌شود. دو سیستم معمول رمزگذاری که RSA و ECC نام دارند، می‌توانند از تمام داده‌های کاربران در مقابل مجرمین سایبری، هکرها و آژانس‌های جاسوسی محافظت کند.

داده‌های مربوط به ارگان‌ها و دولت‌ها، دپارتمان‌های آموزشی، تجاری و پزشکی، با وجود کامپیوترهای کوانتومی می‌تواند در معرض خطر بزرگی قرار بگیرد زیرا سیستم‌های قدرتمند این کامپیوترها می‌تواند به سرعت داده‌های رمزگذاری شده را بشکند و هیچ مانعی در مقابل آن وجود ندارد.(ایران گستر)

رمگذاری RSA و ECC

آقای کالان در مصاحبه‌ای با The Independent می‌گوید:« فعلا هیچ کسی نمی‌تواند به طور قطع بگوید که کامپیوترهای کوانتوم چه زمانی موفق خواهند شد سیستم‌های رمگذاری RSA و ECC را شکست دهند اما بسیاری از تحلیل گران معتقدند این اتفاق بین 10 الی 15 سال آینده رخ خواهد داد.»(ایران گستر)

کالان توضیح می‌دهد که در چنین شرایطی، تمام حوزه‌های دنیای صنعت، از سیستم‌های مدرن اقتصاد، تجاری، ارتباطی، حمل و نقل گرفته تا حوزه‌های ساخت و ساز، انرژی، دولت ها، سیاست و پزشکی و سلامت، می‌توانند تحت سلطه اهداف و نیات صاحبان این قدرت جدید در بیایند.(ایران گستر)

هشدار داده شده که اگر تدابیری اندیشیده نشود،بیتکوین می‌تواند دقیقا همزمان با ورود کامپیوترهای کوانتومی، از صحنه فضای مجازی حذف شود.(ایران گستر)

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

زیرساخت‌های تکنولوژیک بیتکوین و ارزهای مشابه، بر پایه پیشرفت‌های تکنولوژی رمزگذاری یا cryptography بنا نهاده شده، پیشرفت‌هایی که می‌تواند از شبکه‌های بلاک چین در برابر حملات سایبری محافظت کند. اما کامپیوترهای کوانتوم می‌توانند قدرت این سیستم‌های حفاظتی را از بین ببرند.(ایران گستر)

بدون شک، ضد کامپیوترهای کوانتومی نیست

شرکت امنیت سایبری Post Quantum، درباره بیتکوین اعلام کرده:«بدون شک، ضد کامپیوترهای کوانتومی نیست» و هشدار داده که اگر تدابیر لازم اتخاذ نشود، بیتکوین می‌تواند دقیقا همزمان با ورود کامپیوترهای کوانتومی، از صحنه فضای مجازی حذف شود.(ایران گستر)

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

موسسه ملی استاندارهای تکنولوژی(National Institute for Standards and Technology یا Nist) در آمریکا، همین حالا موفق شده 20 الگوریتم جدید در رابطه با تغییر تکنیک‌های امنیت رمزگذاری مجازی طراحی کند. البته اینکه میزان کارایی این الگوریتم ها تا چه اندازه است، فعلا مشخص نیست.(ایران گستر)

حملات سایبری

تکنولوژی رمزگذاری، علاوه بر اینکه باید با کامپیوترهای کوانتومی و حملات سایبری دست و پنجه نرم کند،و باید تلاش کند تا شیوه‌های فعال ماندن روی کامپیوترهای سنتی و گوشی‌های هوشمند را نیز به روز نگه دارد. اقای کالن می‌گوید:« کامپیوترهای کوانتومی قرار نیست جایگزین کامپیوترهای سنتی کنونی شوند. به عبارت دیگر، این دو سبک مختلف از صنعت کامپیوترها، کنار یکدیگر و دوشادوش هم فعالیت خواهند کرد. به همین دلیل، پارادایم‌های رمزگذاری در آینده باید بتواند علاوه بر مقابله با حملات سایبری از سوی کامپیوترهای کوانتومی، با حوزه کامپیوترهای سنتی نیز سازگار باقی بماند.»(ایران گستر)

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

برخی از متخصصین صنعت کامپیوتر، نگرانند که کامپیوترهای کوانتومی بتوانند حتی خود اینترنت را نیز از کار بیندازند.

تحقیقاتی در حال انجام است که نشان دهد دقیقا چقدر زمان می‌برد تا کامپیوترهای کوانتومی به چنین مرحله خطرناکی برسند. این تحقیق، توسط تیمی به رهبری مایکل موسکا، یکی از موسسان لابراتوار Institute for Quantum Computing از دانشگاه واترلو در کانادا انجام می‌پذیرد.(ایران گستر)

:: بازدید از این مطلب : 22

امتیاز مطلب : 0

تعداد امتیازدهندگان : 0

مجموع امتیاز : 0

تاریخ انتشار : چهار شنبه 17 مهر 1398 | نظرات ()

سرمایه‌گذاری 300 میلیون دلاری سلزفورس در شرکت صاحب وردپرس(ایران گستر)

نوشته شده توسط : فاطمه فیصلی

سرمایه‌گذاری 300 میلیون دلاری

بازوی سرمایه‌گذاری شرکت مشهور سلزفورس

شرکت Automattic که شرکت صاحب وردپرس WordPress و شرکتهای دیگری چون WooCommerce و به زودی Tumblr است اخیرا 300 میلیون دلار سرمایه‌گذاری جذب کرده است.(ایران گستر)

این شرکت با این سرمایه‌گذاری جدید ارزش خود را به 3 میلیارد دلار رسانده است.سری D از سرمایه‌گذاری در Automattic تنها یک سرمایه‌گذار داشته و آن سلزفورس ونچرز ( بازوی سرمایه‌گذاری شرکت مشهور سلزفورس) است.(ایران گستر)

شرکت Automattic به طور تاریخی سرمایه‌گذاری زیادی در 15 سال اخیر نداشته است. در سال 2014 این شرکت در راند C سرمایه‌گذاری 160 میلیون دلار سرمایه جذب کرد.

[caption id="attachment_2929" align="aligncenter" width="573"] شرکت در راند C سرمایه‌گذاری 160 میلیون دلار سرمایه جذب کرد.[/caption]

شرکت Automattic

شرکت Automattic و وردپرس تاریخچه مشترکی دارند. بسیاری از افراد وردپرس را به خوبی می‌شناسند محبوب‌ترین سیستم مدیریت محتوا در جهان. Automattic در پروژه وردپرس فعالیت زیادی داشته و در راه‌آندازی سرویسهای مختلفی چون WordPress.com و پلاگین Jetpack ، وردپرس دات کام VIP ( که بسیاری از سایتها از جمله تکرانچ از آن استفاده می‌کند ) و همچنین Woocommerce.(ایران گستر)

شرکت Automattic در سال 2014 بین 200 تا 300 نیرو داشت اما زمانی که میخواست سایت Tumblr را بخرد نزدیک به 1200 نیرو داشت.

در سال 2014 نزدیک به 22 درصد از 10 میلیون وب سایت برتر جهان از وردپرس استفاده می‌کردند. در حال حاضر این میزان به 34 درصد رسیده است.(ایران گستر)

مدیرعامل Automattic در گفت و گو با تکرانچ می‌گوید این پتانسیل وجود دارد که وردپرس همانند اندروید شود که هم اکنون 85 درصد از سهم گوشی ها را در جهان در اختیار دارد.(ایران گستر)

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

Matt Mullenweg می‌گوید: ما میخواهیم سیستم عامل وب آزاد open web باشیم.(ایران گستر)

به گفته وی سرمایه‌گذرای سلزفورس در Automattic راه را برای همکاری‌های بعدی باز می‌کند و به خصوص برای آنکه وردپرس بتواند محصول کامل‌تری در آینده باشد.(ایران گستر)

:: بازدید از این مطلب : 29

امتیاز مطلب : 0

تعداد امتیازدهندگان : 0

مجموع امتیاز : 0

تاریخ انتشار : چهار شنبه 17 مهر 1398 | نظرات ()

نسخه پرمیوم افزونه WP Smush Pro بهینه ساز تصاویر

نوشته شده توسط : فاطمه فیصلی

افزونه WP Smush Pro بهینه‌ساز پیشرفته تصاویر

افزونه WP Smush Pro افزونه ای کاربردی تصاویر در وردپرس که قدرتمندترین افزونه در زمینه‌ی کاهش حجم تصاویر وبسایت می باشد.

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

این افزونه بهینه ساز تصاویر حجم فایل را بدون از دست دادن کیفیت کاهش می دهد. فایل های تصویر بزرگ ممکن است سایت شما را کند نماید بدون آنکه اطلاعی راجبه این مورد داشته باشید. WP Smush با حذف همه اطلاعات غیر ضروری و کاهش سایز تصاویر به افزایش سرعت سایت شما کمک خواهد کرد.

برخی از ویژگی های برجسته افزونه وردپرس بهینه‌ساز پیشرفته تصاویر :

دارای پنل تنظیمات فارسی بهمراه استفاده از فونت فارسی در پنل تنظیمات
فشرده سازی بدون کاهش کیفیت تصویر
قابلیت بازگردانی نسخه اصلی تصاویر فشرده سازی شده
فشرده سازی اتوماتیک تصاویر آپلود شده جدید
پشتیبانی شبانه روزی واقعی
قابلیت فشرده سازی تصاویر از فضای CDN
افزونه برتر سال های 2019،2018،2017
راه اندازی آسان و سریع
تبدیل تصاویر PNG به فرمت JPEG
سازگار با افزونه های Gutenberg ، NextGen Gallery ، WPBakery Page Builder و Amazon S3
همگام سازی زبان افزونه با زبان پیشخوان وردپرس شما
امکان انتخاب شاخه جهت فشرده سازی تصاویر شاخه انتخابی
تا 2 برابر فشرده سازی بیشتر با Super Smush
بروزرسانی دائمی و رایگان

Bulk Smush : فشرده سازی تصاویر موجود به صرفه جویی در فضا بر روی سرور شما کمک می کند. علاوه بر این افزایش سرعت صفحه و لود سریع تر را نیز به دنبال دارد.

Super Smush : با چندین پاس برای فشرده کردن شما می توانید تا حد ممکن فشرده کنید و با این افزونه هوشمند بیشتر بدرخشید.

Auto-Smush : اسموش به صورت کاملا خودکار تصاویر شما را فشرده خواهد کرد. با این کار به سرعت وب سایت شما کمک زیادی می کند.

Lossless Smush : بهترین فشرده ساز تصاویر بدون اینکه از کیفیت تصویر کاسته شود.

تبدیل فایل های PNG به JPEG : اسموش می تواند به سادگی فایل های PNG به JPEG تبدیل کند.

تغییر اندازه تصاویر : باحداکثر تنظیم عرض و ارتفاع و قابلیت دیگر این افزونه این است که تصاویر بزرگ را به صورت خودکار در هنگام آپلود کوچک می کند.

بازگرداندن اصل : با ذخیره فایل های اصلی عکس ،شما می توانید به سرعت زمانی که نیاز به کیفیت کامل دارید ان تصویر را بازگردانید.

نگه داشتن EXIF داده : این قابلیت مخصوص برای عکاسان می باشد که می خواهند اطلاعات تصویر پیوست شده را نگه دارند.

افزونه WP Smush Pro | افزونه وردپرس بهینه‌ساز پیشرفته تصاویر

:: بازدید از این مطلب : 26

امتیاز مطلب : 0

تعداد امتیازدهندگان : 0

مجموع امتیاز : 0

تاریخ انتشار : دو شنبه 15 مهر 1398 | نظرات ()

افزونه چند زبانه کردن سایت با WPML و 6 افزونه جانبی

نوشته شده توسط : فاطمه فیصلی

چند زبانه کردن سایت WPML

یکی از قدرتمند ترین افزونه های چند زبانه کردن سایت وردپرس افزونه قدرتمند WPML هست که به راحتی امکان ایجاد سایت چند زبانه را به وردپرس میدهد.

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

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

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

قالب های که با این افزونه سازگاری کامل دارند :

قالب وردپرس صحیفه
قالب خبری SevenMag
قالب وردپرس Goodnews
قالب فروشگاهی KuteShop
قالب وردپرس Avada
قالب مولتی نیوز
قالب فروشگاهی نیلسن
قالب مجله خبری Nanomag
قالب وردپرس Be
قالب وردپرس انفولد
قالب چند منظوره The 7
قالب Divi
قالب Seofy
و صد ها قالب دیگر....

شما با تهیه این محصول علاوه بر افزونه چندزبانه WPML افزونه های جانبی زیر را نیز دریافت میکنید:

WPML String Translation 2.8.5

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

WPML Translation Management 2.6.5

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

WPML Media Translation

افزونه Media Translation فایل های رسانه ای مانند عکس ها را مدیریت می کند تا بتوانید از همان فایل ها در پست های ترجمه شده استفاده کنید با امکان این که عناوین و زمینه های مرتبط را نیز ترجمه می کنید. در واقع این افزونه عکس های استفاده شده در پست های ترجمه شده را با امکان ترجمه عناوین تصاویر، فراهم می کند.

GravityForms Multilingual

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

افزونه GravityForms Multilingual به شما این اجازه میدهد که مجموعه ای از فرم ها را به زبان اصلی ایجاد کنید. سپس، شما فقط باید متونی که در این فرمها به زبانهای دیگر در سایت شما نمایش داده می شود را ترجمه کنید.

WooCommerce Multilingual

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

دریافت خواهید کرد.

افزونه ای که برای فروش گذاشته شده به صورت پکیج می باشد و شامل 6 پلاگین هست یکی افزونه اصلی wpml و 12 افزونه بقیه امکانات جانبی هست که در صورت تمایل می تونید از آنها استفاده کنید.

ویژگی های افزونه سایت چند زبانه WPML

سازگاری کامل با تمام قالب های وردپرسی
امکان ادغام با افزونه های ترجمه دیگر
سازگار با تمام نسخه های وردپرس
سازگار با تمام نسخه های ووکامرس
امکان ترجمه اختصاصی مطلب توسط مدیر وبسایت
آپدیت های رایگان
قابلیت ذخیره ترجمه در دیتابیس
تعیین سطح تغییر ترجمه سایت براساس نقش کاربری
امکان اضافه کردن زبان های دلخواه
سازگار با تمام نسخه های ایزی دیجیتال دانلود
قابلیت ترجمه بیش از 50 زبان دنیا
سرعت بارگزاری بالا
امکان ترجمه برچسب ها، دسته بندی ها، ابزارک ها، هدر، فوتر و…
قابلیت ترجمه فهرست
افزونه WPML توسط روپوش کاملاً فارسی سازی شده
دارای 6 افزونه جانبی

:: بازدید از این مطلب : 26

امتیاز مطلب : 0

تعداد امتیازدهندگان : 0

مجموع امتیاز : 0

تاریخ انتشار : دو شنبه 15 مهر 1398 | نظرات ()

اپلیکیشن White Eye Detector تشخیض بیماری چشم

نوشته شده توسط : فاطمه فیصلی

White Eye Detector

ایران گستر در صدد آن است تا اخبار و تکنولوژی های روز IT , اخبار گوگل ,اپلیکیشن های کاربردی مانند White Eye Detector ,(بدافزار ها) یا مفید را در اختیار شما عزیزان قرار دهد تا شما عزیزان با مطالعه آنها وارد این دنیای شیرین و پر چالش شوید و آنها را در کسب و کار و زندگی خود به کار گیرید.

اپلیکیشن تشخیص بیماری چشم White Eye Detector

تکنولوژی روز به روز در حال پیشرفت و تسلط بر تمامی‌حوزه‌هاست. ظهور این فناوری‌ها سبب شده تا انسان‌ها بتوانند از پس کارهایی که تاکنون برای آن‌ها، میسر نبود برآیند. برای نمونه اخیرا محققان اپلیکیشنی را تولید کرده‌اند که قادر است با بررسی‌هایی که بر روی سفید چشم افراد در تصاویر انجام می‌دهد که نام آن White Eye Detector است، احتمال وجود بیماری‌هایی همانند سرطان شبکیه، آب مروارید و دیگر نارسایی مربوط به چشم را تشخیص دهد

به نظر می‌رسد که این اپلیکیشن که تحت عنوان White Eye Detector شناخته می‌شود، می‌تواند تشخیص‌هایی درستی را انجام دهد؛ در آزمایشی که بر روی 53 هزار عکس از 40 کودک مبتلا به یکی از بیماری‌های چشمی ‌انجام شد، این اپلیکیشن توانست 16 مورد را حدود 1.3 سال زودتر از آنکه پزشکان از بروز بیماری در این کودکان مطلع شوند، به درستی شناسایی کند.

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

این اپلیکیشن در دو نسخه اندروید و iOS برای کاربران عرضه شده و قابل دانلود است. اما تولیدکننده آن در توضیحات این اپلیکیشن نوشت که هنوز نتوانسته تاییدیه سازمان غذا و داروی آمریکا را کسب کند و این یعنی ممکن است نتایجی که توسط این اپلیکیشن ارائه می‌شود، قابل استناد نباشد.

با این حال، اپلیکیشنی که توسط محققان تولید شده هیچگونه ضرری برای کاربران ندارد و تنها از طریق بررسی تصاویر، تشخیص‌های خود را ارائه می‌دهد.

:: بازدید از این مطلب : 24

امتیاز مطلب : 0

تعداد امتیازدهندگان : 0

مجموع امتیاز : 0

تاریخ انتشار : دو شنبه 15 مهر 1398 | نظرات ()

معرفی Google Discover و چگونگی ایجاد ترافیک

نوشته شده توسط : فاطمه فیصلی

Google Discover

ایران گستر در صدد آن است تا اخبار و تکنولوژی های روز IT , اخبار گوگل , Google Discover ,(بدافزار ها) یا مفید را در اختیار شما عزیزان قرار دهد تا شما عزیزان با مطالعه آنها وارد این دنیای شیرین و پر چالش شوید و آنها را در کسب و کار و زندگی خود به کار گیرید.

قابلیت Google Discover

اصلی Google Discover از Google Feed گرفته شده است. بخواهیم ساده بگوییم، گوگل قابلیتی مشابه feed در شبکه های اجتماعی رو تحت عنوان Discover معرفی کرده که تا همین چند ماه پیش نامش Google Feed بود.

خود Feed در 2016 رونمایی و معرفی شد. آن زمان نتایج بصورت کارت (Card View) به کاربران نشان داده می شدند. آنها ترند و استوری هایی بودند که برای آنها مهم تشخیص داده شده بود.

تفاوت Feed در گوگل با شبکه های اجتماعی این است که در شبکه های اجتماعی شما کاربران رو فالو می کنید ولی در گوگل موارد مورد علاقه تان مثل موزیک، سرگرمی، ورزش، مارکتینگ، حیوانات و … رو دنبال می کنید.

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

در روش معمول گوگل، کاربر چیزی را جستجو می کند و گوگل صفحه نتایج یا SERP رو به او نشان میدهد که مرتبط ترین نتایج در آن ردیف شده‌اند.

اما در Feed موضوع کاملا برعکس بود. گوگل به شما اطلاعاتی ارائه می داد حتی قبل از اینکه شروع به جستجو کرده باشید. این قابلیت به کاربران کمک کرد تا راحت تر چیزی را که می‌خواهند پیدا کنند و هر لحظه با موضوعات مورد علاقه‌شان مرتبط باقی بمانند.

سوال اصلی این بود که آیا کاربر چنین قابلیتی رو دوست داشت یا نه؟

بر اساس گزارش ignitevisibility ، طی سال گذشته 800 میلیون کاربر از feed استفاده کردند. پس جواب حتما مثبت است. بنابراین گوگل روی این قابلیت سرمایه گذاری بیشتری انجام داد و این قابلیت رو با نام Discover معرفی و ری برند کرد.

اساسا Google Discover چیه و چه تفاوتی با Feed دارد؟

گوگل با معرفی Discover در سپتامبر امسال یکی از سه ضلع استراتژی جدید خودش برای نحوه پاسخگویی به جستجوها رو عملیاتی کرد.

این ضلع از استراتژی گوگل شیف کردن از روش جستجو و دستیابی به محتوا با کوئری به روش بدون کوئریه. یعنی لزوما کاربر برای دریافت اخبار روز در حوزه مورد علاقه‌اش لازم نیست چیزی رو جست و جو کند ، بلکه گوگل این محتوا رو در صفحه اول مرورگر کروم یا اپ Google Search به کاربر پیشنهاد میدهد. این اطلاعات مرتبط به علایق و سلایق کاربر است و در بیشتر موارد کاربر حتی در لحظه مواجه قصد جستجوی چنین چیزی رو هم نداشته است. این کار در این روزها از طریق Google Discover اتفاق می‌افتد که شاید شما هم باهاش مواجه شده باشید.

پیشنهاد‌های Discover در دو اپ جدا در موبایل بر اساس سلایق کاربر

همینطور که تصویر بالا می بینید Discover روی دو اپ Google Chrome و Google Search در حال پیشنهاد مواردی به من هست که قبلا یا مورد جستجوی من قرار گرفتند یا در همین Discover روی آنها کلیک کردم.

در واقع خود گوگل در توضیح نحوه عملکردش در این بخش گفته که این بر اساس تاریخچه جستجو‌های کاربر و هوش مصنوعی گوگل اتفاق می‌افتد.

ممکن است برخی موارد را در این بخش ببینید که اساسا فکر کنید به شما بی ربط است اما اتفاقا و احتمالا روزی چیزی در این مورد رو جستجو کردید که حالا بر اساس اون برای شما محتوایی ارایه شده است.

محتوای Discover به ازای هر شخص به شکل خاص و Cross Platform & Device نمایش داده میشود. به این معنی که شما روی یک تبلت IOS و یک موبایل Android نتایج مشابه و نزدیک به هم را می بینید.

آیا برای قرار گرفتن در Discover باید محتوای به روز داشت

قبل از این بیشتر چیزهایی که در Feed به نمایش در می آمد اخبار و ترندهای روز بود. اما امروز این موارد در Discover ترکیبی از مطالبی است که بر اساس هر کاربر تعیین شده است. ممکن است این مطالب در وب جدید باشند یا برای آن کاربر خاص جدید باشند. در واقع محتوای همیشه سبز یا evergreen که اساسا تاریخ انقضا ندارند برای نمایش در این بخش از شانس بیشتری برخوردارند.

گوگل در این مورد مثالی زده و گفته فرض کنید در حال برنامه ریزی برای سفر بعدی خودتون هستید، Discover مقاله ای در مورد بهترین غذاها یا جاذبه‌های تفریحی مقصد سفرتون به شما نشان داده می‌شود.

قابلیت کنترل و سفارشی سازی

یکی از موارد جالب و بجا در Discover قابلیت کنترل محتوایی است که به شما نشان داده می‌شود.

همانطور که در تصویر زیر می بینید، در گوشه هر کارت گزینه ای وجود دارد که با انتخاب یکی از دوحالت Less/More شما می‌توانید تعیین کنید که از این دست محتوا بیشتر یا کمتر برای شما نمایش داده شود.

چطور محتوای سایت را برای نمایش در Google Discover بهینه کنیم؟

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

ساخت محتوای با کیفیت برای Google Discover

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

این کار با فوکوس و عمیق شدن در شناخت مخاطب شروع میشود. اینکه آنها دقیقا چه می‌خواهند و اینکه شما چطور قرار است آنها را به سمت سایت خود بیاورید.
– از استراتژی های محتوا در شبکه های اجتماعی‌تان کمک بگیرید. از آنجاییه که Discover شبیه Feed در شبکه های اجتماعی عمل میکند، می‌شوداز راه های موفقیت در شبکه های اجتماعی برای اینجا هم استفاده کرد.
– محتوای درگیرکننده یا Engagement تولید کنید. هر چقدر که پست یه صفحه ای از سایت، لایک، کامنت و اشتراک بیشتری داشته باشد شانس نمایشش در این بخش هم بیشتر است..
– از محتوای تصویری و ویدئویی بیشتر استفاده کنید. چون Discover اساسا بصورت یک بخش Visual طراحی شده اهمیت تصاویر در این جا مشخص میشود.
– انتشار مطالب و مقالات سایت در قالب ویدئو هم یکی از راه های موفق در Discover خواهد بود.
– تازه های حوزه و صنعت خودتون رو بصورت مداوم و روزانه در سایت کار کنید.
– حتما صفحات سایت خودتون رو برای نمایش در موبایل آماده کرده باشید.

:: بازدید از این مطلب : 33

امتیاز مطلب : 0

تعداد امتیازدهندگان : 0

مجموع امتیاز : 0

تاریخ انتشار : یک شنبه 14 مهر 1398 | نظرات ()

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

نوشته شده توسط : فاطمه فیصلی

اپلیکیشن مدیریت پسورد

ایران گستر در صدد آن است تا اخبار و تکنولوژی های روز IT , اخبار گوگل ,اپلیکیشن مدیریت پسورد ,(بدافزار ها) یا مفید را در اختیار شما عزیزان قرار دهد تا شما عزیزان با مطالعه آنها وارد این دنیای شیرین و پر چالش شوید و آنها را در کسب و کار و زندگی خود به کار گیرید.

کاربرداپلیکیشن مدیریت پسورد

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

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

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

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

بهترین گزینه رایگان: LastPass

LastPass یک اپلیکیشن رایگان مدیریت رمز ورود است که می‌تواند رمزهای ورود قوی برایتان تولید کرده و با امنیت بالا، آنها را ذخیره کند. این برنامه هم روی پلت فرم دسکتاپ و هم دستگاه‌های هوشمند اندرویدی و آی‌اواس قابل اجراست.

بد نیست بدانید که در سال 2015، LastPass هک شد. مسئولین این برنامه، به کاربران اطمینان خاطر دادند که اطلاعات رمزهای ورودشان محفوظ مانده و امن است اما اطلاعات شخصی کاربران مورد دسترسی قرار گرفته است. اما به یاد داشته باشید که این اتفاق مربوط به 4 سال پیش بوده و این برنامه از آن زمان تا کنون ارتقا یافته‌تر و پیشرفته‌تر شده و کاربران زیادی در سرتاسر دنیا دارد.

نحوه استفاده از LastPass در دسکتاپ

به صفحه دانلود LastPass مراجعه کنید و نسخه مدنظر خود را نصب کنید.
بعد از پایان دانلود و نصب، آیکون جدیدی روی نوار ابزار(Toolbar) مرورگر خود می‌بینید. روی آن کلیلک کرده و Create an account now را انتخاب کنید.
حالا ایمیل خود را وارد کنید و یک «پسورد اصلی» بسازید. این پسورد باید قوی باشد زیرا تنها رمز عبوری است که باید به خاطر بسپارید تا به تمام دیگر پسوردهایتان دسترسی پیدا کنید.

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

چگونه تمام پسوردها را یکجا ذخیره کنیم

بعد از باز کردن اکانت LastPass ، نوبت ذخیره سازی پسوردهاست که در ادامه با مراحل آن آشنا می‌شوید:

به صفحه ورود برنامه مدنظر خود بروید مثلا فیس بوک.
اطلاعات خود را وارد کنید و قبل از کلیک روی گزینه ورود یا Sign in، روی آیکون LastPass داخل نوار پسورد کلیک کنید و بعد گزینه«ذخیره اطلاعات این سایت»( Save credentials for this site) را انتخاب کنید.

همنطور که به وبسایت‌های مختلف می‌روید، رمزهای عبور اکانت‌های مختلفتان را داخل LastPass ثبت می‌کنید و در دفعات بعد، LastPass به طورت خودکار جای نوار پسورد را پر می‌کند.

چگونه پسوردی ضد هک بسازیم

خواهش می‌کنیم با رمز عبور «123» خداحافظی کنید.

در برنامه LastPass گزینه تولید رمزعبور وجود دارد که در ادامه نحوه استفاده از آن را توضیح می‌دهیم:

در نوار ابزار دسکتاپ خود، روی آیکون LastPass و بعد گزینه My Vault کلیک کنید
گزینه Security Challenge و بعد Show My Score را انتخاب کنید.
بعد از نمایش نوتیفیکیشن، رمز عبور اصلی خود را وارد کنید.
چند دقیقه صبر کنید تا LastPass تمام پسوردهای شما را تحلیل کند.
بعد از اتمام، LastPass امتیازی به هرکدام از پسوردهای شما می‌دهد.
پس وردهایی که ضعیف، قدیمی یا تکراری معرفی می‌شوند را تغییر دهید.
برای اینکه خود LastPass پسورد مناسبی انتخاب کند، گزینه Auto-Change را انتخاب کنید تا برنامه به صورت اتوماتیک پسورد جدیدی ثبت کرده و آن را ذخیره کند.

استفاده از LastPass روی گوشی‌های هوشمند

LastPass، هم در روی پلت فرم آی‌اواس و هم اندروید به صورت رایگان ارائه شده است. در ادامه، شیوه استفاده از این ابزار مدیریت پسورد روی گوشی را بخوانید:

اول از همه، برنامه LastPass را در داخل اپ استور(روی هر دو پلت فرم اندروید و آی‌اواس) پیدا کنید.
با استفاده از ایمیل و یک پسورد اصلی قوی، اکانتی داخل برنامه LastPass بسازید. دقیقا مانند مراحل داخل دسکتاپ، مطمئن شوید که این پسورد اصلی به اندازه کافی قوی بوده و آن را در جای امنی ذخیره می‌کنید.
برای اضافه کردن پسورد جدید، گزینه Add در قسمت بالایی سمت راست صفحه گوشی را کلیک کنید.
گزینه Password را انتخاب کنید و از داخل لیست شبکه‌های پیشنهاد شده، شبکه و وبسایت مدنظر خود را پیدا کنید.

می توانید تمام پسوردهای خود را از داخل اکانت LastPass روی دسکتاپ، به روی گوشی منتقل کنید. برای این کار، مراحل زیر را انجام دهید:

وارد اکانت LastPass شده و به قسمت Vault بروید.
به روی گزینه More Options در منوی سمت چپ کلیک کنید و بعد گزینه Advanced را انتخاب کنید.
حالا گزینه Import را انتخاب کنید.
از منوی پایین صفحه، منبعی که قرار است اطلاعات LastPass از آن منتقل شود را انتخاب کنید. در ادامه، اطلاعات از روی دسکتاپ به روی گوشی منتقل می‌شود.

در برنامه LastPass می‌توانید با پرداخت سالیانه 24 دلار، اکانت خود را ارتقا دهید. با پرمیوم شدن اکانت، امکان به اشتراک گذاری پسوردها، ورود از طریق وای فای و قابلیت‌های دیگر در دسترس کاربر قرار می گیرد. همچنین امنیت بیشتر و گزینه‌های تایید هویتی نیز به اکانت اضافه می‌شود.

1Password

برنامه‌های رایگان زیادی برای مدیریت پسورد در بازار برنامه‌ها وجود دارد اما برخی از کاربران ترجیح می‌دهند از ابزارهای غیر رایگان استفاده کنند. برنامه 1Password یکی از بهترین گزینه‌هاست که 2.99 دلار در ماه هزینه عضویت دارد.

اول از همه به وبسایت 1Password’s site بروید.
1Password یک دسترسی موقت 30 روزه ارائه می‌هد تا کاربر با محیط آن بیشتر آشنا شود و بعد، در مورد انتخاب طرح مورد نیاز خود تصمیم بگیرد. family plan یا طرح خانواده این برنامه، 4.99 دلار در ماه است که حداکثر تا 5 نفر را تحت پوشش قرار می‌دهد. طرح عادی تک نفره نیز، 2.99 دلار در ماه قیمت دارد.
حالا زمان ساخت اکانت است. با استفاده از ایمیل و یک رمزعبور اصلی با قدرت، اکانت خود را بسازید. فایلی به ایمیل شما ارسال می‌شود که حاوی یک کد QR که برای اضافه کردن اکانت‌های مختلف به برنامه کاربرد دارد.

نحوه استفاده از 1Password داخل دسکتاپ

نرم افزار مناسب نسخه دسکتاپ را از وبسایت اصلی برنامه دانلود کنید.
وارد اکانت خود شوید.
به روی گزینه Scan Account Details کلیک کنید.
کد Setup QR Code که در ایمیل خود دریافت کرده‌اید را پرینت کرده و اسکن کنید.

شروع ذخیره سازی پسوردها روی برنامه 1Password

بعد از نصب و تنظیم اکانت 1Password، حالا زمان بک‌آپ گیری از تمام پسوردهاست. این مرحله مشابه LastPass انجام می‌شود.

با مراجعه به وبسایت مدنظر، مراحل ورود را با استفاده از ایمیل و پسورد، به صورت عادی انجام دهید.
بعد، 1Password به صورت اتوماتیک اطلاعات ورود به سایت را ذخیره می‌کند. تنها کافیست گزینه Save Login را انتخاب کنید.
همزمان با ورود به وبسایت و شبکه‌های مختلف، 1Password امکان تولید پسوردهای قدرتمند‌تر را نیز ارائه می‌دهد. تنها کافیست روی آیکون برنامه، داخل مرورگر خود کلیک کرده و بعد گزینه Password Generator را انتخاب کنید.

استفاده از 1Password روی موبایل

1Password برای گوشی های اندروید و آی‌او‌اس به رایگان عرضه شده است. نحوه استفاده از برنامه روی گوشی‌های هوشمند را در ادامه بخوانید:

برنامه 1Password را دانلود کنید.
در بخش تنظیمات گوشی، به برنامه 1Password اجازه پر کردن اتوماتیک بخش‌های مربوط به درخواست پسورد را بدهید. برای این کار، در آی‌او‌اس به Settings > Passwords & Accounts >AutoFill Passwords > 1Password و در اندروید به Settings > Autofill > 1Password بروید.

ذخیره پسوردها روی گوشی، مشابه مراحل روی دسکتاپ است و تمام پسوردها به روی دستگاه‌های سینک شده قابل دسترسی خواهند بود.

اطلاعات ورود خود را روی صفحه لاگین وبسایت مدنظر وارد کنید.
بعد از ورود، با رفتن به بخش Categories، می‌توانید اطلاعات ورود خود را ذخیره کنید.
حالا می‌توانید اکانت یوتیوب، جیمیل و یا هر وبسایت دیگر خود را از لیست ارائه شده انتخاب کنید. حتی می‌توانید از نوار جستجو، سایت مورد نظرتان را انتخاب کنید.
بعد از اتمام این مراحل و وارد کردن اطلاعات ورود، اپلیکیشن هنگام نیاز، به صورت اتوماتیک نوار خالی پسوردها را پر می کند.

:: بازدید از این مطلب : 22

امتیاز مطلب : 0

تعداد امتیازدهندگان : 0

مجموع امتیاز : 0

تاریخ انتشار : یک شنبه 14 مهر 1398 | نظرات ()