آموزش HTML (جلسه پنجم)

نمایش یک تصویر در صفحات سایت ها، وبلاگ ها و در کل امکان نمایش تصویر در وب را میسر می کند، در کنار تگ img به عنوان تگی کلیدی، می توان از عناصر دیگری از جمله alt، title، map، area، border و... استفاده کرد که قابلیت های بیشتری در نحوه نمایش و کنترل رفتارهای رویدادی (مانند تعیین محل کلیک کاربر) در اختیارمان قرار می دهند، از این رو در ادامه آموزش های مقدماتی HTML، این مطلب را اختصاص داده ایم به نحوه کاربرد تگ img و نمایش تصاویر در HTML.

 

 

 

تگ img در HTML

از تگ img برای نمایش یک تصویر در وب استفاده می شود، این تگ معمولا به همراه src می آید و src در واقع مخفف source یا منبع تصویر است که در اینجا معمولا آدرس کامل تصویر یا آدرس آن به صورت دایرکتوری مد نظر است، مثال زیر نحوه نمایش یک تصویر ساده را در وب نشان می دهد.

 

 

 

 

<img src="example-image.jpg" />

ویژگی alt در تگ img

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

 

<img src="example-image.jpg" alt="example-image" />

ویژگی title در تگ img

علاوه بر alt که متن جایگزین تصویر است، از عنصر title می توان برای هنگامی که کاربر ماوس را روی تصویر می برد، جهت نمایش یک پیام به صورت توصیف (tooltip) استفاده کرد، درون این ویژگی از متنی برای توضیح ماهیت تصویر استفاده کنید

<img src="example-image.jpg" alt="example-image" title="نمایش تصویر در html" />

ویژگی height و width در تگ img

برای اینکه ارتفاع و عرض تصویر خود را تعریف کنید، از دو ویژگی width و height در کنار سایر ویژگی های تگ img استفاده کنید، این کار مخصوصا از نظر سئو و موتورهای جستجو اهمیت زیادی دارد.

 

<img src="example-image.jpg" alt="example-image" title="نمایش تصویر در html" height="100" width="200" />

ویژگی border در تگ img

از border مخصوصا در مواقعی که به تصویر خود لینک می دهید، می توان برای حذف حاشیه ها استفاده کرد، در برخی مرورگر ها وقتی یک تصویر را به صورت لینک شده درمی آورید، به صورت پیش فرض نواری آب رنگ به عنوان حاشیه تصویر در نظر گرفته می شود، برای حذف این حالت می توانید مقدار صفر را برای border در نظر بگیرید، به مثال زیر توجه کنید.

<img src="example-image.jpg" alt="example-image" title="نمایش تصویر در html" height="100" width="200" border="0" />

ویژگی usemap در تگ img

ویژگی هایی که پیش تر گفتیم، معمولا برای تصاویر معمولی در صفحات وب کفایت می کنند، اما برای مواردی پیشرفته تر می توان از خاصیت usemap و area برای تعریف نقاط قابل کلیک در یک تصویر استفاده کرد، گاهی نیاز به این داریم که بیش از چند لینک را در یک تصویر قرار دهیم یا بخش خاصی از آن را قابل کلیک شدن کنیم، این دسته از تنظیمات با ویژگی usemap و area در تگ img بر روی تصاویر قابل اعمال هستند.

 

<img src="example-image.jpg" alt="example-image" title="نمایش تصویر در html" height="100" width="200" border="0" usemap="#img-map" />
<map name="img-map" id="img-map">
<area shape="circle" coords="100,20,0" alt="تصویر دایره ای" href="image-html.html" />
<area shape="poly" coords="130,20,4,8,0,3" alt="تصویر چند ضلعی" href="image-html.html" />
<area shape="rect" coords="130,20,4,0" alt="تصویر مستطیل مربع" href="image-html.html" />
</map>

نکته مهم در این حالت، استفاده درست از شکل اشیائی است که می خواهیم قابل کلیک شدن باشند، سه مقدار circle ،poly و rect برای قسمت shape در area کاربرد دارند.
- rect به معنی rectangle یا مربع مستطیل است.
- poly یک شیء چند ضلعی است.
- circle برای ترسیم محیط قابل کلیک شدن به شکل دایره کاربرد دارد.

 

نحوه تنظیم مقادیر area در map

برای اینکه نقاط قابل کلیک شدن را به درستی برای تصاویر تعریف کنید، باید با نحوه مقدار دهی صحیح برای شکل های متفاوت، آشنا باشید.
- برای اشیاء rect یا مربع مستطیلی شکل، از چهار عدد به عنوان گوشه چپ - بالا و راست - پائین استفاده می شود، در واقع شما میزان فاصله سمت چپ و بالای تصویر و همچنین سمت راست و پائین تصویر را برای قابل کلیک بودن تعریف می کنید.

 

<area shape="rect" coords="0,0,13,16" href="http://www.geeklearnimg.ir">

- برای اشیاء چندگانه یا poly باید از 6 مقدار استفاده کنید، این مقادیر موقعیت محل قابل کلیک شدن را نشان می دهند.

 

<area shape="poly" coords="13,0,11,3,7,12" href="http://wwwgeeklearning.ir">

- نهایتا برای اشیاء دایره ای شکل یا circle کافی است دو مقدار را تعیین کنید، البته برای تعیین انحراف از مرکز دایره، مقدار سومی نیز می توان تنظیم کرد که به فرض دایره را به شکل بیضی تبدیل می کند.

 

<area shape="circle" coords="30,14,3" href="http://www.geeklearning.ir">

برای دیدن تمام ویژگی هایی که در این آموزش مرور کردیم به صورت آنلاین، می توانید از کد و پیش نمایش زیر استفاده کنید.

 

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>گروه گیک لرنینگ | نمایش یک تصویر در وب</title>
<!-- http://www.geeklearning.ir -->
<style type="text/css">
body{
 font-family:Tahoma, Geneva, sans-serif;
 font-size:12px;
 direction:rtl;
}
</style>
</head>
<body>
<img src="example-image.jpg" alt="example-image" title="نمایش تصویر در html" height="194" width="259" border="0" usemap="#img-map" />
<map name="img-map" id="img-map">
<area shape="rect" coords="0,0,100,100" alt="تصویر مستطیل مربع" href="http://www.geeklearning.ir" />
</map>
<hr />
برای دیدن ویژگی map و area کافی است ماوس خود را بر روی گوشه بالای سمت چپ تصویر ببرید.
</body>
</html>

 

آموزش HTML (جلسه سوم)

آشنایی با متاتگ ها (Meta tags) و کاربرد آنها در صفحات وب (HTML)

پیش از این و در مطالب قبلی از بخش آموزش مقدماتی html با کلیاتی از این زبان پایه برنامه نویسی وب، آشنا شدیم و تا حدودی مسیرمان را به سوی کدنویسی پیشرفته تر هموار کردیم، تگ های اصلی و سازنده فرم و اسکلت بندی صفحات را شناختیم و با مثال هایی از آنها تمرین کردیم و به قدرت این زبان ساده ولی کاربردی بیشتر پی بردیم؛ اکنون و در این مطلب می خواهیم در ادامه مباحث و آموزش های مقدماتی، نحوه استفاده از متاتگ ها (Meta Tags) و کاربرد آنها در صفحات وب (HTML) را با هم مرور کنیم.
به طور کلی متاتگ ها، جزء عناصر اصلی صفحات وب به شمار می روند که در بین تگ head گنجانده می شوند و بسته به میزان اهمیتشان ممکن است وجودشان ضروری (Necessary) یا انتخابی و اختیاری (Optional) باشد که در ادامه به طور جزئی تر به آنها اشاره خواهیم کرد.

 

متاتگ http-equiv:

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

 

 

<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />

متاتگ description:

بعد از تگ title و http-equiv در html، متاتگ description از بالاترین اهمیت برای موتورهای جستجو برخوردار است، برای اینکه ربات های جستجوگر را نسبت به محتوای صفحه خود راهنمایی کنید، حتما این متاتگ را به صورت زیر در کد خود (بین تگ head و بعد از title و http-equiv) به کار ببرید:

 

<meta name="description" content="توضیحی برای مطلب شما" />

متاتگ keywords:

keywords نیز یکی دیگر از متاتگ های کلیدی صفحات html است که مربوط به موتورهای جستجو است؛ نحوه کابرد آن به شکل زیر است:

 

<meta name="keywords" content="کلمات, کلیدی, شما" />

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

 

متاتگ robots:

این متاتگ برای اعمال دستوراتی روی ربات های جستجوگر است، البته همه ی ربات ها از این متاتگ پیروی نمی کنند، اما بد نیست که در صفحه اول سایت خود آن را به صورت زیر استفاده کنید:

 

<meta name="robots" content="index, follow" />

با تکه کد بالا، به ربات ها خواهید گفت که صفحه شما را index (ذخیره شدن در لیست جستجو) کرده و از لینک های موجود در آن پیروی (follow) کنند؛ چند نمونه دیگر از این متاتگ که تنها در موارد خاصی مورد استفاده قرار می گیرد:

 

<meta name="robots" content="noindex, follow" />
<meta name="robots" content="noindex, nofollow" />
<meta name="robots" content="index, nofollow" />

با توجه به عبارت موجود در قسمت content، رفتار ربات هایی که از این متاتگ پیروی می کنند نسبت به صفحه و لینک های آن متفاوت خواهد بود.

 

متاتگ generator:

از generator برای مشخص کردن اینکه صفحه مورد نظر از چه برنامه یا خدماتی جهت انتشار محتوا استفاده می کند، استفاده می شود؛ به کار بردن این متاتگ اختیاری است و تاثیر زیادی در رتبه و عملکرد شما در موتورهای جستجو ندارد:

 

<meta name="generator" content="Dreamweaver CS" />

متاتگ author:

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

 

<meta name="author" content="name family" />

متاتگ expires:

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

 

<meta name="expires" content="tue, 21 Jun 1999" />
<meta name="expires" content="never" />

متاتگ copyright:

برای مشخص کردن اینکه محتوای صفحات شما دارای کپی رایت یا حقوق مولف است، از این متاتگ در کدهای خود استفاده کنید، البته استفاده از آن هیچ تضمینی برای سوء استفاده نکردن دیگران از محتوای شما ایجاد نمی کند و متاسفانه همواره هستند کسانی که می خواهند نابرده رنج گنج میسر کنند!:

 

<meta name="copyright" content="your copyright text here" />

متاتگ refresh:

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

 

<meta http-equiv="refresh" content="10; URL=http://geeklearnnig.ir/" />

عددی که در این متاتگ ملاحظه می کنید، مقدار زمان به ثانیه ای است که بعد از آن کاربر به آدرس جدید منتقل خواهد شد.

 

متاتگ Cache-control:

این متاتگ برای مدیریت نحوه ذخیره یا به اصطلاح Cache شدن صفحات شما در مرورگر کاربران می تواند مفید باشد، در حالت معمولی اکثر مرورگرها محتویات صفحه شما، از جمله تصاویر و فایل ها را در حافظه موقت خود ذخیره می کنند تا در مراجعات بعدی سریع تر به آنها دست پیدا کنند، اما گاهی نیاز می شود که محتوای صفحات شما از این عمل مصون بمانند، بدین منظور از متاتگ Cache-control به یکی از شیوه های زیر استفاده کنید:

 

<meta http-equiv="Cache-control" content="public" />
<meta http-equiv="Cache-control" content="private" />
<meta http-equiv="Cache-control" content="no-cache" />
<meta http-equiv="Cache-control" content="no-store" />

مقادیر این متاتگ به قرار زیر است:
- public: محتوای شما در حافظه مشترک تمام کاربران یک سیستم ذخیره می شوند.
- private: محتوای شما تنها در حافظه نام کاربری شما ذخیره می شود.
- no-Cache: هیچ ذخیره ای از محتوای شما در حافظه صورت نمی گیرد.
- no-Store: در محدوده زمانی کوتاهتری محتوای شما ذخیره و نگهداری می شوند و به صورت آرشیو در نمی آیند.
تعداد متاتگ ها به مواردی که گفتیم محدود نمی شود، ولی مهم ترین آنها بعد از title و http-equiv متاتگ های keywords و description هستند که استفاده از آنها برای هدایت موتورهای جستجو و کسب نتایج بهتر ضروری است؛ علاوه بر این دقت کنید که استفاده از علامت / در انتهای متاتگ ها برای صفحاتی است که ساختار xhtml دارند، برای صفحات با ساختار html از علامت / در انتهای متاتگ ها استفاده نکنید، چون ممکن است از نظر سرویس اعتبار سنجی validator.w3.org کد شما معتبر نباشد.

 

آموزش HTML (جلسه دوم)

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

 

تگ چیست؟
تگ از نظر لغوی به معنی برچسب است، اما در زبان های برنامه نویسی و از جمله در html، تگ ها به معنی کدهای تعریف شده این زبان هستند که معمولا به صورت دو قسمتی به کار می روند، قسمت اول نشانگر شروع تگ و قسمت دوم نشانگر پایان آن است، هر قسمت نیز بین علامت های <> محصور شده است، ذکر این نکته نیز ضروری است که بعضی تگ های html تک قسمتی و یکتا هستند، مانند تگ های مربوط به خط یا فاصله.
- تگ head ، title ، html و body
کدهای وب بین تگ های html و body ساخته می شوند و تگ head دارای قابلیتهایی خاص جهت معرفی آن صفحه، قرار دادن تیتر صفحه (تگ title)، ایمپورت فایل های css و جاوا اسکریپت (javascript)، متاتگ ها (metatags) و... است، تقریبا در تمام صفحات وب، این تگ ها را خواهید یافت، چرا که چارچوب اصلی یک صفحه وب را تعریف می کنند و از اهمیت زیادی برخوردارند.

 

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>آموزش اچ تی ام ال گروه گیک لرنینگ </title>
<!-- http://Unit-Sardroud.blog.ir -->
<style type="text/css">
body{
 font-family:Tahoma, Geneva, sans-serif;
 font-size:12px;
 direction:rtl;
}
</style>
</head>
<body>
این یک سند اچ تی ام ال ساده است!
</body>
</html>

پیش نمایش

- تگ h1 تا h6،

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

 

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>آموزش اچ تی ام ال گروه گیک لرنینگ </title>
<!-- http://Unit-Sardroud.blog.ir -->
<style type="text/css">
body{
 font-family:Tahoma, Geneva, sans-serif;
 font-size:12px;
 direction:rtl;
}
</style>
</head>
<body>
<h1>این یک متن اچ تی ام ال تیتر شده است!</h1>
</body>
</html>

پیش نمایش

- تگ های ایجاد کننده خط و فاصله

 

br و hr دو تگی هستند که از آنها برای ایجاد فاصله و خط استفاده می شود، استفاده از این دو تگ به جهت موارد کاربرد زیاد، در صفحات html به وفور تکرار می شود، از طرفی همانطور که پیش تر گفتیم، این تگ ها یکتا هستند و قسمت دوم ندارند.

 

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>آموزش اچ تی ام ال گروه گیک لرنینگ </title>
<!-- http://Unit-Sardroud.blog.ir -->
<style type="text/css">
body{
 font-family:Tahoma, Geneva, sans-serif;
 font-size:12px;
 direction:rtl;
}
</style>
</head>
<body>
<h1>این یک متن اچ تی ام ال تیتر شده است!</h1>
<br />
<h2>این یک متن اچ تی ام ال تیتر شده با h2 است!</h2>
<hr />
</body>
</html>

 

آموزش HTML (جلسه اول)

آشنایی با HTML، زبان پایه برنامه نویسی وب

 

اچ تی ام ال (HTML) یا hypertext markup language، زبانی است که تقریبا تمام کسانی که دستی در دنیای وب دارند با آن آشنا هستند یا لااقل اسم آن را بارها شنیده اند، زبانی که به جرات می توان گفت یکی از آسان ترین و کاربردی ترین ها در جهان است که  از سال 1980 میلادی تا امروز همواره روندی رو به رشد داشته،  در اهمیت آن همین بس که حاصل کدنویسی برنامه نویسان وب،  نهایتا به صورت خروجی HTML  و در مرورگر کاربران نشان داده خواهد شد؛ لذا نقطه آغاز یادگیری برنامه نویسی  وب، آموزش این زبان است، برای آشنایی بیشتر چند تگ ساده را در ادامه بررسی می کنیم.

 

اولین صفحه با کدهای html

برنامه Notepad را باز کنید و کد زیر را در آن کپی نمائید:

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>من یک صفحه اچ تی ام ال هستم </title>
<!-- http://geeklearning.ir -->
</head>
<body>
<h1>اولین صفحه من</h1>
<p>اولین پاراگراف من</p>
</body>
</html>

پیش نمایش

 

اکنون فایلتان را با پسوند html و با یونیکد utf-8 ذخیره نمائید (برای این کار به جای پسوند txt، پسوند html را جایگزین کنید و در قسمت Encoding عبارت UTF-8 را انتخاب کنید)، حاصل اولین کدتان را در یک مرورگر وب ببینید!
توضیح:
- عبارت DOCTYPE html PUBLIC و مقادیر آن برای راهنمایی کردن مرورگرهای وب جهت پردازش صحیح صفحه مورد نظر است.
- تگ head و body جز اصلی ترین تگ های اچ تی ام ال است که سازنده یک صفحه به شمار می روند، درون تگ head می توان از مقادیر meta تگ ها استفاده کرد.
- تگ title برای نمایش عنوان صفحه در مرورگر لازم است.
- تگ h1 نشان گر سرتیتر ها است که می تواند مقادیری تا h6 داشته باشد.
- تگ p در کدهای اچ تی ام ال نشانگر پاراگراف است.
- اکثر تگ های اچ تی ام ال با افزودن یک (/) بسته می شوند و البته برخی نیز یکتا هستند (مثلا </ br>).
نکته 1: هدف از ایجاد زبانی به نام html یا hypertext markup language در وب، در واقع به ضرورت ایجاد استانداردی تعریف شده برای یکسان سازی و سهولت کار برمی گردد، این زبان توسط کنسرسیوم جهانی وب یا w3c توسعه یافته و امروزه تبدیل به استانداردی فراگیر گشته است که توسط انواع مختلف مرورگرها و واسطه های کاربری (کامپیوتر، تلفن همراه و...)، قابل پردازش است.
نکته 2: html در حقیقت یک زبان برنامه نویسی نیست، بلکه بیشتر شبیه یک قرار داد با پیروی از اصولی منظم است، چرا که محدود به تگ ها و دستور عمل های خاصی است و خارج از چارچوب تعریف شده خود، قدرت مانور ندارد، اما از این جهت که زبان تفهیم خواسته های برنامه نویس از مرورگر تلقی می شود، اهمیت زیادی دارد، یعنی وقتی در وب برنامه ای به یک زبان که در سرور اجرا می شود (مانند php) می نویسیم، هدف، هر چه که باشد، نهایتا معمولا باید خروجی خود را در بستر html به مرورگر انتقال دهیم.

 

آموزش استفاده از اینستاگرام با کامپیوتر

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

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