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

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

 

نحوه تعریف فونت در html 

فونت در html به صورت تگ های خطی قابل تعریف است، تگی که برای تعریف فونت استفاده می شود <font> و <font/> هستند، به مثال زیر توجه کنید:

<font>متن داخل تگ فونت</font>

درون این تگ می توان ویژگی هایی را اضافه کرد که عبارتند از ویژگی face، dir، color، lang، size، class و id که به تفصیل راجب آنها خواهیم گفت.

ویژگی face در html font

face در html در واقع عملکردی شبیه عنصر font-family در css دارد، هر دوی این عناصر برای ایجاد و تعریف خانواده ای از فونت ها و نسبت دادن آن به عبارات و متن زیر مجموعه خود کاربرد دارند، چون بحث ما در اینجا آموزش html است، از طرح مبحث css آن خودداری می کنیم و توجه شما را به نحوه به کار بردن این عنصر در مثال زیر جلب می کنیم.

 

<font face="Tahoma, Geneva, sans-serif">
این یک متن جهت آزمایش نحوه تعریف فونت در html است!
</font>

مقادیر font face می تواند از خانواده فونت های وب باشد، مثلا مقادیر Arial, Helvetica, sans-serif یا Tahoma, Geneva, sans-serif و...

 

ویژگی dir در html font

dir برای مشخص کردن جهت نوشتاری حروف به کار می رود، برای حروف از راست به چپ (مثل زبان فارسی) از مقادیر rtl و برای حروف چپ به راست (مثل زبان انگلیسی) از مقادیر ltr استفاده می شود، این ویژگی در css با direction تنظیم می شود

 

<font face="Arial, Helvetica, sans-serif" dir="rtl">
این یک متن جهت آزمایش نحوه تعریف فونت در html است!
</font>

ویژگی color در html font

برای نسبت دادن رنگ های مختلف به متن داخل تگ font از عنصر color استفاده می کنیم، مقادیر این عنصر می تواند رنگ های عادی مثل red، blue، green و ... یا مقادیری به صورت کدهای هگز باشد مثلا 666666# یا 3366CC# و...، این ویژگی نیز در css با نامی مشابه یعنی color قابل تعریف است.

 

<font face="Arial, Helvetica, sans-serif" dir="rtl" color="#666666">
این یک متن جهت آزمایش نحوه تعریف متن در html است!
</font>

ویژگی lang در html font

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

 

<font face="Arial, Helvetica, sans-serif" dir="rtl" color="#666666" lang="fa">
این یک متن جهت آزمایش نحوه تعریف فونت در html است!
</font>

ویژگی size در html font

برای تعیین اندازه متن داخل تگ font از عنصر size استفاده می کنند، مقادیر این عنصر به صورت اعداد صحیح معمولا از یک تا هفت (1 2 3 و... 7) و یا به صورت اعداد صحیح به اضافه + از یک تا شش (1+ 2+ 3+ و... 6+) و همچنین به صورت منفی از منفی یک تا منفی 6 (1- 2- 3- و... 6-) قابل تنظیم است، این ویژگی در css با عنصر font-size تعریف می شود.

 

<font face="Arial, Helvetica, sans-serif" dir="rtl" color="#666666" lang="fa" size="+1">
این یک متن جهت آزمایش نحوه تعریف فونت در html است!
</font>

ویژگی class و id در html font

اکثر تگ های html این قابلیت را دارند که با کدها و استایل های css تنظیم شوند، لذا تگ font نیز از این قاعده مستثنی نیست و همانطور که پیشتر گفتیم، اصولا کار با ویژگی هایی که با css قابل تعریف هستند، به صورت تگ های html کاربردی و مورد قبول نیست (و باید آنها را با css تنظیم نمود)، اما جهت آگاهی از چند و چون کار بد نیست با آنها آشنایی داشته باشیم.

 

<font face="Arial, Helvetica, sans-serif" dir="rtl" color="#666666" lang="fa" size="+1" class="your-class" id="your-id">
این یک متن جهت آزمایش نحوه تعریف فونت در html است!
</font>

استایل خطی در html font

همانطور که پیشتر گفتیم، تگ های html قابلیت استفاده از استایل css را درون خود دارند، استایل های css نیز به سه شیوه قابل تعریف هستند، به صورت خطی و درون تگ html، به صورت غیر خطی اما درون کدهای html و نهایتا به صورت ایمپورت فایل خارجی در صفحه؛ آنچه در این آموزش به آن خواهیم پرداخت، استایل خطی درون تگ های html است.
درون تگ های html استایل خطی را با قرار دادن style و تنظیم مقادیر داخل آن، تعریف می کنند، تمام ویژگی هایی که در css قابل دسترسی هستند، در داخل stlye خطی نیز قابل تعریف شدن است.

 

<font style="font-family:Tahoma, Geneva, sans-serif; direction:rtl; color:#333; font-size:14px; display:block;">
این یک متن جهت آزمایش نحوه تعریف استایل در html است!
</font>

پیش نمایش نحوه تعریف فونت و استایل در html

در زیر کد و پیش نمایشی از آن را جهت آشنایی بیشتر با نحوه استفاده از تگ font و style در 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>گروه گیک لرنینگ | نحوه تعریف فونت و استایل در html</title>
<!-- http://www.geeklearning.ir -->
</head>
<body>
<font face="Arial, Helvetica, sans-serif" dir="rtl" color="#666666" lang="fa" size="+1" class="your-class" id="your-id">
این یک متن جهت آزمایش نحوه تعریف فونت در html است!
</font>
<br />
<font style="font-family:Tahoma, Geneva, sans-serif; direction:rtl; color:#333; font-size:14px; display:block;">
این یک متن جهت آزمایش نحوه تعریف استایل در html است!
</font>
</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>

 

دانلود اوبونتو 14.04

لینک دانلود در ادامه مطلب... به زودی آموزش نصب اوبونتو نیز قرار میگیرد. با تشکر از پوریا معتمدزاده 

ساعت هوشمند سامسونگ با سیستم عامل اندروید ویر تا پایان سال 2014 عرضه می‌شود

به نقل از زومیت :

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