عضو شوید

عضویت سریع

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

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

شماره مجازی PingMe

ارسال لینک

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

آمار مطالب

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

آمار کاربران

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

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

آمار بازدید

:: بازدید امروز : 98
:: باردید دیروز : 16
:: بازدید هفته : 136
:: بازدید ماه : 628
:: بازدید سال : 628
:: بازدید کلی : 3900

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 اضافه کرده که با کمک آن، کاربر می‌تواند هدایت دستگاه‌های مک خود را از طریق فرامین صوتی در دست بگیرد.(ایران گستر)

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

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

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

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

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

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

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

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

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

:: بازدید از این مطلب : 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

صفحات وب مانند صفحات روزنامه ها و مجلات، محتوای خود را در ستون ها و طرح های خاصی نمایش می دهند. با معرفی 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

[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 ها ناپدید می شوند(ایران گستر)

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

امتیاز مطلب : 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>