طراحی سایت – HTML5 – پشتیبانی از مرورگرها

پشتیبانی مرورگرها از HTML5

HTML5 در بیشتر مرورگرهای مدرن پشتیبانی می شود. همچنین همه مرورگرهای قدیمی و جدید به صورت خودکار المان های ناشناخته را به عنوان المان inline در نظر می گیرند.

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

شما حتی می توانید به IE5 در (ویندوز XP 2001) بیاموزید که چگونه با المان های ناشناخته رفتار کند.

همه به یاد داریم که در گذشته تست و سازگار سازی طراحی سایت با مرورگر IE6 عذاب آورترین بخش از پروسه طراحی سایت به شمار می رفت.

تعریف المان های معنایی به عنوان بلوک عناصر

HTML5 هشت المان معنایی جدید معرفی کرده است. همه این المان ها block-level هستند.

المان های HTML همیشه block-level یا inline هستند. یک المان block-level همه فضای المان مادر یا در برگیرنده خود را اشغال می کند. مرورگرها معمولا المان block-level را با یک خط جدید قبل و بعد از آن نمایش می دهند.

برای اینکه اطمینان حاصل کنیم که مرورگرها قدیمی نیز این المان ها را به عنوان block در نظر می گیرند باید مقادیر CSS این المان ها را خودمان مقداردهی کنیم:

header, section, footer, aside, nav, main, article, figure {
        display: block;
 }

اضافه کردن عناصر جدید به HTML

المان های جدید را نیز می توان به صفحه html با ترفند زیر معرفی کرد. در این مثال یک المان به نام <myHero> به یک صفحه وب HTML به هنگام طراحی سایت اضافه شده و برای آن style تعریف شده است:

<!DOCTYPE html>
<html>
<head>
  <script>document.createElement("myHero")</script>
  <style>
  myHero {
      display: block;
      background-color: #dddddd;
      padding: 50px;
      font-size: 30px;
  } 
  </style> 
</head>
<body>

<h1>A Heading</h1>
<myHero>My Hero Element</myHero>

</body>
</html>

دستور جاوا اسکریپت زیر برای ساخت المان جدید در مرورگر IE9 و قدیمی تر ضروری است.

document.createElement("myHero")

مشکل IE8

روش بالا را برای تمامی المان های جدید html5 می توان استفاده کرد. البته IE8 و نسخه های پیش از آن امکان تغییر style المان های ناشناخته را نمی دهد. خوشبختانه Sjoerd Visscher یک کتابخانه به نام HTML5Shiv برای حل این مشکل ساخته است. HTML5Shiv یک راه حل javascript برای امکان تغییر ظاهر المان های HTML5 در نسخه های قبل از IE9 است.

در طراحی سایت به HTML5Shiv برای ایجاد سازگاری اینترنت اکسپلورر قبل از نسخه 9 نیاز دارید.

روش استفاده از HTML5Shiv در طراحی سایت

HTML5Shiv در داخل بخش <head> قرار می گیرد.

 HTML5Shiv یک فایل جاوااسکریپت است که باید در داخل تگ <script> آدرس دهی شود.

زمانیکه از تگ های <article> یا <section> یا <aside> یا <nav> یا <footer> در طراحی سایت استفاده می کنید باید از HTML5Shiv نیز بهره ببرید.

آخرین نسخه HTML5Shiv از github قابل دانلود است یا می توانید مستقیما از نسخه CDN آن در مسیر زیر استفاده کنید.

https://oss.maxcdn.com/libs/html5shiv/3.7.0/html5shiv.js

نحوه استفاده از HTML5Shiv به صورت زیر است:

<head>
  <!--[if lt IE 9]>
    <script src="/js/html5shiv.js"></script>
  <![endif]-->
</head>

مثال استفاده از HTML5Shiv در طراحی سایت

اگر نمی خواهید HTML5Shiv را دانلود کرده و در وب سایت خود قرار دهید می توانید مانند مثال زیر از نسخه CDN استفاده کنید.

<!DOCTYPE html>
<html>
 <head>
 <meta charset="UTF-8">
 <!--[if lt IE 9]>
    <script src="https://oss.maxcdn.com/libs/html5shiv/3.7.0/html5shiv.js"></script>
 <![endif]-->
 </head>
 <body>
    <section>
      <h1>Famous Cities</h1>
      <article>
         <h2>London</h2>
         <p>London is the capital city of England. It is the most populous city in the United Kingdom, with a metropolitan area of over 13 million inhabitants.</p>
      </article>
      <article>
         <h2>Paris</h2>
         <p>Paris is the capital and most populous city of France.</p>
       </article>
       <article>
         <h2>Tokyo</h2>
         <p>Tokyo is the capital of Japan, the center of the Greater Tokyo Area, and the most populous metropolitan area in the world.</p>
       </article>
     </section>
 </body>
</html>

 

طراحی سایت – HTML5 – قابلیت های جدید

از زمانيکه HTML 4.01 در سال 1999 به عنوان يک استاندارد طراحی سایت معرفي شد خيلي موارد در اينترنت و حتي در مورد کاربران و نيازهاي آنها در دنیای طراحی سایت تغيير کرده است. امروزه بسياري از قابليت هاي HTML 4.01 منسوخ شده يا مورد استفاده قرار نميگيرد. بيشتر ويژگيهايي منسوخ و بي استفاده از HTML5 حذف شده اند يا در مورد بعضي از آنها بازنگريهايي صورت گرفته است.

براي اينکه HTML5 قادر به پشتيباني از نيازهاي اينترنت امروزي در طراحی سایت باشد قابليتهاي جديدي مانند ترسيم ، فيلم ، صدا و … به آن افزوده شده است. در ادامه به صورت خيلي خلاصه اين قابليت هاي جديد و پرکاربرد در طراحی سایت را بررسي مي کنيم.

<canvas>

تگ توضيحات
<canvas> از اين تگ براي ترسيم گرافيک هاي دو بعدي از طريق کدنويسي (معمولا جاوا اسکريپت) استفاده ميشود

تگ هاي مربوط به رسانه

تگ توضيحات
<audio> تعريف محتواي صوتي
<video> تعريف محتواي تصويري – فيلم و کليپ
<source> تعريف منابع مختلف براي صدا و تصوير
<embed> تعريف يک بخش براي برنامه خارجي يا يک محتواي تعاملي – پلاگين
<track> تعريف متن براي <audio> و <video>

المان هاي فرم

تگ توضيحات
<datalist> يک فهرست از حالت هاي پيش فرض براي کنترل هاي ورودي
<keygen> تعريف يک توليد کننده جفت کليد براي فرم ها
<output> تعريف نتيجه يک خروجي

المان هاي معنايي و ساختاري

HTML5 المان هايي جديدي را براي ساختار دادن به متون وب به شرح زير در بر گرفته است:

تگ توضيحات
<article> تعريف يک مقاله
<aside> تعريف يک محتواي در کنار متن اصلي
<bdi> جهت تعريف متن در جهتي غير از جهت اصلي که خارج از آن در نظر گرفته شده
<command> تعريف يک دکمه دستوري که کاربر مي تواند آن را فعال نمايد
<details> تعريف جزييات بيشتر
<dialog> تعريف يک پنجره dialog
<summary> تعريف بخش قابل مشاهده از يک تگ <details>
<figure> تعريف محتواي خود شامل مانند عکس ، نمودار و …
<figcaption> تعريف يک عنوان براي تگ <figure>
<footer> تعريف يک بخش پاييني براي يک صفحه يا بخش
<header> تعريف يک بخش بالايي براي يک صفحه يا بخش
<mark> جهت برجسته کردن متن
<meter> تعريف يک واحد اندازه گيري
<nav> لينک هاي پيمايش صفحات
<progress> نمايش پيشرفت يک وظيفه
<section> تعريف يک بخش از متن
<time> تعريف تاريخ و زمان
<wbr> تعريف يک خط جديد

المان هاي حذف شده از HTML5

تگ هاي زير نيز از HTML5 حذف شده اند:

  • <acronym>
  • <applet>
  • <basefont>
  • <big>
  • <center>
  • <dir>
  • <font>
  • <frame>
  • <frameset>
  • <noframes>
  • <strike>
  • <tt>

طراحی سایت – HTML5 – مقدمه

HTML5 چیست؟

HTML5 جدیدترین استاندارد برای HTML است که امروزه در طراحی سایت مورد استفاده قرار می گیرد.

همانطور که می دانید نسخه قبلی از HTML یعنی HTML 4.01 در سال 1999 معرفی شد. از آن زمان تا به حال خیلی موارد در دنیای وب دچار دگرگونی و تغییر شده است.

پروژه HTML5 چطور آغاز شد؟

HTML5 دست پخت مشترک W3C و WHATWG است. WHATWG روی وب فرم ها و برنامه های کاربردی و W3C روی XHTML 2.0 کار می کرد. در سال 2006 تصمیم براین شد که هردو سازمان روی نسخه جدیدی از HTML کار کنند که نتیجه آن HTML5 شد.

مجموعه ای قراردادها و قوانین به شرح زیر برای شروع کار در نظر گرفته شد:

  • تعریف ویژگی های جدید بر مبنای HTML ، CSS ، JAVASCRIPT و DOM
  • کاهش نیاز به پلاگین های خارجی مانند FLASH
  • بهبود مدیریت خطا
  • استفاده از دستورات بیشتر به جای کدنویسی – scripting
  • HTML5 نباید به دستگاه خاصی وابسته باشد
  • پروسه توسعه باید عمومی باشد

HTML5 <!DOCTYPE>

در HTML5 فقط یک تعریف <!DOCTYPE> داریم و آن به سادگی کد زیر است:

<!DOCTYPE html>

کد زیر حداقل کدی است که برای طراحی یک صفحه وب سایت با HTML5 به آن نیاز دارید:

<!DOCTYPE html>
 <html>
  <head>
  <title>Title of the document</title>
  </head>
  <body>
  The content of the document......
  </body>
 </html> 

ویژگیهای جدید HTML5

بعضی از مهمترین ویژگیهای جدید در HTML5 به شرح زیر است:

  • المان <canvas> برای ترسیم دو بعدی
  • تگ های <video> و <audio> برای پخش چند رسانه ای – صدا و فیلم
  • پشتیبانی از ذخیره سازی محلی
  • تگ های جدید وابسته به محتوا در طراحی سایت مانند <article> ، <footer> ، <header> و …
  • کنترل های جدید برای فرم ها مانند تقویم ، تاریخ ، جستجو ، ایمیل و …

طراحی سایت – آموزش html – فرم

شاید تا این مدت به فکر این افتاده باشید که بتوانید هنگام طراحی سایت با دریافت اطلاعات از کاربر تعامل بهتر و بیشتری با او داشته باشید؟

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

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

• text fields(فیلدهای متنی)
• textarea(ناحیه متنی)
• radio buttons(دکمه های رادیویی)
• checkboxes
• drop-down menus (لیست های پایین افتان)

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

method="post  or  get"
action="url  or  filename"

method:
بوسیله ی این صفت تعیین می کنید که اطلاعات فرم به چه نحوی به مقصد مورد نظر منتقل شوند.

get: در این حالت داده ها و اطلاعات فرم از طریق url مرورگر منتقل خواهند شد و محدودیت هایی نیز خواهید داشت چراکه بعضی کاراکترها مثل & قابل استفاده نخواهند بود. همچنین از آنجا که داده ها در url مرورگر نمایش داده میشوند برای انتقال داده هایی مانند پسورد و … مناسب نمی باشد.

post: در صورتی که از method=post استفاده نمایید اطلاعات به صورت داخلی – internal – منتقل میشوند و در url نمایش داده نمیشوند. در این روش هیچ محدودیتی برای حجم داده های ارسالی و نوع کاراکترها نخواهید داشت.

action:
معمولا مقدار این صفت آدرس فایلی است که پردازش فرم طراحی شده را انجام میدهد. برای آدرس دهی باید طبق قوانین آدرس دهی که قبلا فرا گرفتید عمل کنید.

<html>
         <body>
                <form action=" address " method="post">

                </form>
       </body> 
</html>

بر خلاف بسیاری از دستورات html فرم ها در مرورگر به تنهایی نمایش داده نمیشوند. به عنوان مثال دستورات مثال بالا هیچ چیزی را در مرورگر نمایش نخواهد داد. در طراحی سایت برای اینکه اطلاعات را از کاربر دریافت کنیم علاوه بر دستور فرم نیازمند دستورات دیگری هستیم که فیلدهای ورودی را درفرم مشخص کنند. اکثر فیلدهای ورودی در زبان html بوسیله دستور input مشخص میشوند. شکل کلی دستور input به صورت زیر است. که در این حالت type نوع فیلد ورودی و name نام فیلد ورودی را مشخص میکند.

<input type="fieldType" name="fieldName" />

نکته قابل ذکر در رابطه با نام فیلدها این است که وقتی فرمی به برنامه ای که بر روی سرورقراردارد، فرستاده می شود هر یک از ویژگی های آن فرم با name مربوطه مدیریت می شود.به این ترتیب که ،اطلاعات هر کدام از عناصر فرم برای اینکه با یکدیگر تمایز داشته باشند با name های یکتایی از هم جدا می شوند و هنگامی که می خواهیم به اطلاعات هر عنصر از قبیل گزینه ی انتخاب شده و یا متن نوشته شده ، فرم دسترسی پیدا کنیم ،name  آنها در واقع نوع و کیفیت رفتار مخاطب را بر می گرداند.

در ادامه با انواع فیلدهای ورودی بیشتر آشنا میشویم!

فیلدهای متنی   text:
زمانی که شما بخواهید به عنوان کاربر اطلاعاتی نظیر حروف و اعداد را وارد کنید این فیلد کاربرد فراوانی خواهد داشت .

First name : <input name="First_name" type="text" value="enter your First name" size="25"     maxlength="25" />
<br />
Last name :<input name="Last_name" type="text" value="enter Your Family name" size="30"   maxlength="30" />

ویژگی پر کاربرد درtext :

• size=NO که میزان کارکترهای وارد شده را تعین میکند اما بصورت پیش فرض 20 کاراکتر است!
• maxlength=NO  حداکثر تعداد کارکتر های ورودی را کنترل می کند.
• name=” Textbox _Name” : برای نام دهی
• value=”preview_Text” متن اولیه در آن نوشته می شود.

در صورتی که تمایل داشته باشید فیلد ها بصورتی باشند که در هنگام تایپ کردن دیده نشوند – فیلد ورودی پسورد – باید نوع فیلد را password انتخاب نمایید:

User Name: <input name="userName" type="text" value="user name" size="25"     maxlength="25" />
<br />
Password :<input name="myPass" type="password " value="password" size="30"   maxlength="30" />

textarea :
در یک textarea شما می توانید به میزان نامحدود کاراکتر وارد کنید ، که در مثال زیر بوضوح قابل مشاهده است.

<textarea name="content" rows="10" cols="30"> 
  In The Name Of God!
</textarea>

• cols=NO : برای تعیین عرض این محوطه
• rows=NO : برای تعیین سطر این محوطه

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

<input type="radio" name="group1" value="Milk"> Milk<br />

<input type="radio" name="group1" value="Butter" checked> Butter<br />

<input type="radio" name="group1" value="Cheese"> Cheese

• Name=”radio_name” اسم گروهی ازدکمه های radio ،هنگامی قرار است از بین تعدادی از آنها تنها یکی قابل انتخاب باشد، باید name آن دسته از از دکمه های radio  یکسان باشد.
• value=” preview_Text” متن اولیه در آن نوشته می شود.
•  checked:  اگر بخواهیم دکمه ای بصورت اولیه انتخاب شده باشد این عبارت را می نویسیم.

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

<input type="checkbox" name="option1" value="Milk"> Milk<br>

 <input type="checkbox" name="option2" value="Butter" checked> Butter<br>

<input type="checkbox" name="option3" value="Cheese"> Cheese<br>

• Name=”checkbox_name” اسم گروهی از checkbox ها
• value=”check_value” این مقدار در نظر گرفته شده ،برگردانده می شود.
• checked:  اگر بخواهیم   checkboxبصورت اولیه انتخاب شده باشد ،این عبارت را می نویسیم.

معرفی <select>
برای اینکه بتوانیم لیستی از موارد انتخابی تهیه کنیم از این تگ در طراحی سایت استفاده می کنیم ، که هر مورد را جلوی تگ <option> می نویسیم.

<select name="food">
  <option value="Mike">Milk</option>
  <option value="Butter" selected> Butter </option>
  <option value="Cheese"> Cheese </option>
</select>

• name=”selecName”: برای نام دهی
• size=NO که تعداد مواردی که همزمان قابل نمایش است را تعین میکند .
• Multiple:این ویژگی باعث می شود تا کاربر از لیست با فشار دادن دکمه ی ctrl یا shift چند گزینه را انتخاب نماید.
• Selected : این ویژگی باعث می شود تا این مقدار بطور پیش فرض انتخاب شده باشد.
• value=”option_value” این مقدار در نظر گرفته شده ،برگردانده می شود.

طراحی سایت و دکمه Submit:
این عنصر برای تایید فرم استفاده می شود. زمانی که بر روی دکمه Submit فشار داده می شود فرم به آدرسی که به  action نسبت داده می شود،فرستاده می شود.در حالیکه می توان با java script این گونه عناصر را کنترل کرد.

Press The Submit <input name="Submit" type="submit" value="Ok" />

• Name=”submit_name” اسم این دکمه
• value=”submit_text” مقداری که روی دکمه نوشته می شود

reset :
برای ساختن دکمه ای که فرم را به حالت اولیه باز می گرداند.

Press The Reset  <input name="reset" type="reset" value="reset" />

• Name=”reset_name” اسم این دکمه
• value=”reset_text” مقداری که روی دکمه نوشته می شود

button:
برای ساختن دکمه به کار برده می شود.این دکمه به تنهایی کاری برای ما انجام نمی دهد.با دانستن زبان script  می توانیم دستوراتی به این دکمه ها داد تا کاری را انجام دهند.

Press The Button <input name="button" type=" button " value=" button " />

• Name=” button _name” اسم این دکمه
• value=” button _text” مقداری که روی دکمه نوشته می شود.

image button:
این ویژگی کارکردی شبیه دکمه ی submit دارد که در واقع این طور است که وقتی بر روی عکسی کلیک می شود فرم به آدرسی که به action نسبت داده می شود،فرستاده می شود.

<input type="image" src="url" name="image" width="60" height="60">

ویزگی های به کار رفته شده در قسمت طراحی سایت آموزش html عکس ها به تفصیل بحث شده است و برای جلوگیری از زیاد شدن حجم مطالب از ذکر آنان خودداری می کنیم.
در انتها به 2 ویژگی در تمامی تگهای اصلی فرم وجود دارد اشاره می کنیم:
1. disabled: اگر از این تگ استفاده کنیم آن عنصر نمایش داده می شود اما غیر فعال می باشد.
2. tabindex=NO الویت حرکت cursor  در هنگامی که دکمه tab از صفحه کلید فشار داده می شود.به این صورت که هر چه شماره کمتر باشد الویت بیشتر است.در صورت برابری شماره ها حرکت cursor به ترتیب قرار گرفتن آنها حرکت می کند.

نویسنده: مجتبی کاظمی

طراحی سایت – آموزش html – پس زمینه

احتمالا تا به حال به این فکر افتادید که وقتی داریم طراحی سایت انجام میدیم چطور میشه رنگ پس زمینه صفحه رو تغییر بدیم یا عکسی به عنوان تصویر پس زمینه انتخاب کنیم! این کار به سادگی با دو صفت از دستور <body> ممکنه که در این بخش با اونا آشنا میشیم!

قبل از شروع بحث به یادآوری روش نامگذاری رنگ ها می پردازیم:
در زبان html سه روش برای انتخاب رنگ معرفی شده است:

1. استفاده از شماره رنگ در مبنای شانزده:
در این روش به هنگام طراحی سایت ترکیبی از سه رنگ اصلی قرمز ، سبز و آبی در مبنای شانزده بعد از یک علامت number sign `#` معرف رنگ مورد نظر خواهد بود.

#ff0000 —> RED
#00ff00 —> GREEN
#0000ff —> BLUE
#ffff00 —> YELLOW
#fb60f9 —> PURPLE

نگران نباشید نرم افزارهایی مثل فتوشاپ به راحتی به شما امکان انتخاب رنگ مورد نظر را بدون آشنایی با این روش می دهند کافی است که در پنجره Color Picker شماره رنگ دلخواه خود را کپی نمایید.

2.استفاده از شماره رنگ در مبنای ده:
در این روش نیز تمامی رنگ های دلخواه از ترکیب سه رنگ اصلی قرمز ، سبز و آبی ساخته خواهند شد البته نسبت ترکیب رنگ های ذکر شده به صورت ( rgb(x,y,z بیان میشود که x y z به ترتیب بیانگر رنگ های قرمز ، سبز و آبی خواهند بود ، که می توان اعداد 0 تا 255 را جایگزین آنها کرد.

rgb(255,0,0)     ---> RED
rgb(0,255,0)     ---> GREEN
rgb(0,0,255)     ---> BLUE

3.استفاده از اسامی رنگ های اصلی:
در این روش از نام رنگ مورد نظر استفاده می کنیم برای مطالعه بیشتر درباره این روش به بخش لینک های رنگی آموزش های html مراجعه کنید.

پس زمینه رنگی:
برای انتخاب رنگ پس زمینه طراحی سایت در زبان html از صفت bgcolor بهره می بریم. این صفت همانطور که قبلا بیان شد مربوط به دستور body است. برای استفاده از این صفت کافی است که رنگ مورد نظر را بر طبق یکی از روش های ذکر شده بعد از علامت مساوی قرار دهیم.

<body bgcolor="#dfac17">
<body bgcolor="rgb(241,175,100)">
<body bgcolor="red">

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

<body background="blueSreen.jpg">
<body background="../images/bg.gif">
<body background="http://www.webfocus.ir/images/1.gif"

صفت bgproperties:
این صفت زمانی به کار برده میشود که از عکس به عنوان پس زمینه صفحه طراحی سایت استفاده نمایید ، در این صورت چناچه بخواهید عکس مورد نظر با  scroll – مرور عمودی صفحه – جابجا نشود و محل آن ثابت بماند باید مقدار آن را برابر fixed قرار دهید. این ویژگی در مرورگر firefox پشتیبانی نمی شود.

<body background="../images/bg.gif" bgproperties="fixed">

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

  1. توجه کنید که هرچه حجم تصویر انتخابی کمتر باشد بارگذاری – load – صفحه سریع تر انجام میشود.
  2. در صورتیکه عرض عکس انتخابی نسبت به وضوح -resolution – صفحه نمایش کمتر باشد تصویر زمینه به صورت tile نمایش داده میشود – تصویر مورد نظر تکرار خواهد شد.
  3. صفت background از bgcolor اولویت بالاتری دارد بدین معنا که اگر از هر دو صفت همزمان استفاده نمایید صفت background در نظر گرفته خواهد شد.

نویسنده: مجتبی کاظمی

طراحی سایت – آموزش html – جدول

معمولا به دو دلیل اصلی از جدول ها طراحان صفحه سایت استفاده می کنند.

1) سازماندهی کردن اطلاعات با استفاده از جدول.
2) چیدمان یا طرح بندی صفحه با استفاده از جدول های مخفی (hidden tables) – ( امروزه بیشتر از CSS برای طرح بندی صفحه سایت استفاده می شود)

تقسیم کردن صفحه سایت به قسمت های مختلف , ایجاد کردن منوها , ایجاد کردن سر صفحه  (header )  , قرار دادن آسان تر عکس ها در مکان های دلخواه از صفحه, نوشتن متون در چند ستون در یک صفحه و …. از جمله کاربرد جدول ها می باشند.

ساختار جدول ها در طراحی سایت (Basic Tables) :

جدول ها با دستور <table>  تعریف می شوند. هر جدول از سطرها (Rows) و ستونهایی(Columns) تشکیل شده است.

سطر ها (Rows ) :

برای اضافه کردن سطرها به جدول از دستور <tr> … </tr> استفاده می کنیم.

ستون ها (Columns):

برای اینکه هر سطر را به ستون هایی تقسیم کنیم از دستور <td>…</td> استفاده می کنیم.

مثال :

<table> 
    <tr>
        <td>column 1 into first row </td>
        <td>column 2 into first row</td>
    </tr>
    <tr>
         <td>column 1 into second row</td>
         <td>column 2 into second row</td>
    </tr>
</table>

 

نتیجه به صورت زیر خواهد بود :

column 1 into first row column 2 into first row
column 1 into second row column 2 into second row

صفت های دستور <table>:

صفت align:  با استفاده از این صفت می توان موقعیت جدول را در صفحه تعیین کرد.مقادیر left ,center ,right به ترتیب باعث نمایش جدول در سمت راست , مرکز وچپ صفحه خواهند شد.

صفت background : برای وارد کردن عکس به عنوان پس زمینه جدول , ازاین صفت استفاده می کنیم.

<table background =”URL”>

</table>

صفت bgcolor : برای تعریف کردن رنگ برای پس زمینه جدول.

صفت border :  برای  تعیین کردن ضخامت حاشیه یا کادر جدول.

صفت bordercolor :  برای تعیین کردن رنگ کادر.

صفت bordercolordark :مشخص کردن رنگی به عنوان  سایه برای کادر جدول.

صفت  cellpadding : با استفاده از این صفت می توان فاصله ای بین خانه های جدول و محتوای جدول تعیین کرد.

صفت   cellspacing : برای تعیین فاصله بین خانه های جدول.

مثال :

<table align=center cellpadding=4 cellspacing=14 bgcolor=white border=3 bordercolor=black bordercolordark=gray>
 <tr>
  <td>column 1 into first row </td>
  <td>column 2 into first row</td>
 </tr>
 <tr>
  <td>column 1 into second row</td>
 <td>column 2 into second row.</td>
 </tr>
 </table>

صفت frame :

این صفت به معنای چهار چوب و دارای مقادیر زیر است :

void : برای پاک کردن کادرهای بیرونی.

above : یرای نمایش  دادن حاشیه بالایی جدول.

below : برای نمایش دادن حاشیه پایینی جدول.

lhs : حاشیه قسمت چپ جدول را نمایش می دهد.

rhs : حاشیه قسمت راست جدول را نمایش می دهد.

hsides : برای نشان دادن دو ضلع  افقی حاشیه.

vsides : برای نشان دادن دو ضلع  عمودی حاشیه.

box : برای نمایش دادن همه اضلاع حاشیه جدول.

صفت valign :

این صفت دارای دو مقدار زیر است :

top : محتوای جدول را با بالای خانه های جدول تنظیم می کند.

botton : محتوای جدول را با پایین خانه های جدول تنظیم می کند.

صفت width :

این صفت که یا با پیکسل یا به صورت درصد بیان می شود عرض جدول را تعیین می کند.

مثال :

<table align="center" bgcolor="white" border="4" bordercolor="black" bordercolordark="gray" valign="top" frame="above">
 <tr>
  <td>column 1 into first row </td>
  <td>column 2 into first row</td>
 </tr>
 <tr>
  <td>column 1 into second row</td>
  <td>column 2 into second row.</td>
 </tr>
 </table>

صفت های  دستورهای <td> و <tr> :

صفت align : با استفاده از مقادیر left,right,center ازاین صفت می توان موقعیت محتوا را در مرکز , قسمت راست و چپ خانه های جدول تعیین کرد.

صفت background : با استفاده از این صفت می توان عکسی را به عنوان پس زمینه خانه یا خانه های جدول قرار داد.

صفت bgcolor : با استفاده از این صفت می توان برای خانه های جدول رنگ در نظر کرفت.

صفت bordercolor : با استفاده از این صفت می توان برای حاشیه یا کادر خانه ها رنگ مشخص کرد.

صفت bordercolordark : می توان رنگی را به عنوان سایه برای حاشیه خانه های جدول تعریف کرد.

صفت valign : این صفت دارای مقادیر top,middle,bottom است که به ترتیب باعث نمایش محتوای خانه های جدول در پایین , وسط و بالای خانه ها می شود.

صفت width : عرض خانه های جدول را تعیین می کند که می تواند با پیکسل یا درصد مقداردهی شود.

صفت height : ارتفاع خانه های جدول را تعیین می کند که می تواند با پیکسل یا درصد مقداردهی شود..

صفت های بالا در هر دو دستور <td> و <tr> معتبر هستند اما صفت هایی که در زیر بیان می شوند مخصوص دستور <td

صفت colspan : با استفاده ازاین صفت می توان تعیین کرد که عرض هر خانه به اندازه چند ستون باشد.برای جداولی کاربرد دارد که پهنای خانه های آن متفاوت است.

صفت rowspanبا استفاده ازاین صفت می توان تعیین کرد که ارتفاع هر خانه به اندازه چند سطر باشد.برای جداولی کاربرد دارد که ارتفاع  خانه های آن متفاوت است.

طراحی سایت – آموزش html – عکس

در ادامه مباحث طراحی سایت به چگونگی اضافه کردن تصاویر به صفحه وب می پردازیم.
یکی از مشکلات اصلی استفاده از تصاویر در طراحی صفحات وب ،  مدت زمان طولانی تر بارگذاری تصاویر در صفحات سایت نسبت به متون است . بنابراین هر چه حجم این تصاویر کمتر باشد ، مدت زمان بارگذاری صفحه کمتر می شود و طراحی سایت حرفه ای تری خواهیم داشت.
قبل از آغاز نمودن بحث باید به این نکته توجه کرد که gif: graphics interchange format و jpg: joint photographic group دو نوع فرمت رایج تصاویر در صفحات وب هستند.

استفاده از کدام یک بهتر است؟؟
برای Banner  ,  button , divider  و clipart ها بهتر است که از فرمت GIF  استفاده کنیم.
از آنجایی که تصاویر با فرمت JPG را می توان فشرده کرد , هر چند که کیفیت آن کاهش پیدا می کند , ولی حجم آن نیز کم می شود, پس برای عکس ها بهتر است از فرمت JPG  استفاده کنیم.

قرار دادن تصاویر در صفحه وب سایت:

برای قرار دادن تصاویر در صفحه از دستور <img> استفاده می کنیم و برای مشخص کردن آدرس این تصویر از صفت src این دستور بهره می گیریم. بنابراین شکل کلی این دستور به صورت زیر است:

<img src="url">

اگر مکان عکس در همان Folder ی باشد که فایل html سایت شما در آن قرار دارد , کافی است به جای URL ، نام عکس همراه با فرمت آن را ذکر کنید.

مثال 1:
ابتدا پوشه  test را در درایو C  خود بسازید و یک تصویر با نام img1   و با فرمت jpg  در آن قرار دهید سپس  ویراستار Notepad یا Notepad++ خود را باز کنید و در قست بدنه فایل html  خود کد زیر را تایپ کنید و سپس این فایل را با نام دلخواه و با پسوند htm در درایو C  خود و در پوشه test ذخیره کنید.

<img src="img1.jpg">

اکنون با باز کردن فایل html خود , تصویر img1 را مشاهده خواهید کرد.

اما اگر تصویر مورد نظر در یک سایت دیگر باشد باید آدرس کامل مکان عکس را به جای URL قرار دهید.

مثال 2:

<img src="http://www.siteURL.com/??/?.gif">

در صورتیکه فایل مورد نظر در پوشه ای بیرون از پوشه جاری بود چطور عمل کنیم؟
برای اینکه از پوشه خارج شویم یا یک مرحله به عقب برگردیم کافی است در ابتدای آدرس /.. را قرار دهیم. به کمک این روش به هر تعداد که بخواهیم می توانیم به عقب برگردیم. برای روشن شدن موضوع فرض کنید فایل html در پوشه files قرار گرفته یعنی آدرس آن به شکل myWebsite/files/page1.html است و عکس مورد نظر در پوشه images با مسیر myWebsite/images/image1.jpg قرار دارد. برای آدرس دهی این عکس و قرار دادن آن در فایل page1.html باید ابتدا یک پوشه به عقب بر گردیم و سپس وارد پوشه images شویم و نام فایل مورد نظر را وارد کنیم. یعنی آدرس عکس را باید به صورت images/image1.jpg/.. وارد نماییم. به شکل توجه کنید:

 

html-address
آدرس دهی در طراحی وب سایت

height , width :

با استفاده از صفت های width و height از دستور <img> می توان اندازه تصاویر وب سایت را تغییر داد. مقداری که برای این صفت تعریف می شود , می تواند بر حسب پیکسل یا درصد باشد. معمولا برای کاهش سایز تصاویر بهتر است از برنامه گرافیکی استفاده کرد تا از این صفت , زیرا استفاده از این صفت برای کاهش سایز مدت زمان بار گذاری صفحه وب را افزایش می دهد. در عین حال برای بزرگ تر کردن تصاویر از حالت عادی , استفاده از این صفت توصیه می شود.
مثال 3:

<img src="img1.jpg" width="60" height="60">

مثال 4:   

<img src="img1.jpg" width="50%" height="60%">

در مثال 4 ارتفاع وعرض تصویر به ترتیب 60% و%50 از اندازه صفحه مرور گر شما را تشکیل می دهد.
یعنی با استفاده از درصد (%) به هر اندازه که صفحه مرورگرتان را تغییر سایز دهید , تصویر در آن صفحه نیز به همان نسبت کوچک یا بزرگ خواهد شد.در حالی که با استفاده از مقدار پیکسلی اندازه تصویر همواره ثابت خواهد ماند.

border :

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

مثال 5:
کادر با ضخامت 4 دور تصویر

<img src="img1.jpg "  border="4">

alt :

صفت alt مخفف alternative است. سه کاربرد اصلی این صفت عبارتند از:
1. هرگاه تصویر مورد نظر به هر دلیل نمایش داده نشود این متن به جای آن تصویر قرار می گیرد.
2. با قرار گرفتن موس روی تصویر توضیحی از آن نمایش داده میشود.
3. برای افراد معلول امکان خواندن توضیح تصویر توسط نرم افزارهای مخصوص محیا میشود.

مثال 6:

<"img src=" img1.jpg" alt="matn jaygozin>

صفت های hspace   و vspace :

با استفاده از صفت  hspace می توان فضایی را در سمت راست و چپ تصویر در نظر گرفت.
با استفاده از صفت  vspace می توان فضایی را در بالا و پایین تصویر در نظر گرفت.

مثال 7:

<img src="img1.jpg"  Hspace="30" Vspace="10>

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

align :

با استفاده از این صفت می توانیم چگونگی قرار گرفتن تصویر را در متن به هنگام طراحی وب سایت مشخص کنیم.  مثلا مطلوب ما این است که تصویر در بالای متن قرار گیرد یا در پایین متن.
با استفاده از مقادیر  top(بالا) , bottom (یایین) و middle (میانه یا وسط) می توان متن را در بالا , پایین یا وسط تصویر قرار داد.

مثال 8:

<img src ="img1.jpg" align="top">

علاوه بر مقادیر top , bottom وmiddle ، مقادیر دیگری نیز برای این صفت موجود است که به شرح هر یک می پردازیم.

Texttop :  با این مقدار بالای تصویر با بالای بزرگترین کاراکتر تنظیم می شود.
Absmiddle : با این مقدار وسط تصویر با وسط متن تنظیم می شود.Baseline : با این مقدار پایین تصویر با پایین کشیده ترین کاراکتر رو به پایین تنظیم می شود.
left و right :با این دو مقدار می توان تصویر را به سمت چپ یا راست  متن انتقال داد.

مثال 9:

<img src ="img1.jpg" align="left>

طراحی سایت – آموزش html – فهرست (لیست)

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

فهرست مرتب ( ordered or numbered list) :

 همانطور که از نام این نوع فهرست مشخص است ترتیب در این نوع لیست اهمیت دارد. برای ایجاد لیست مرتب وقتی داریم سایتی طراحی می کنیم از دستور <ol> برای شروع لیست و </ol> برای مشخص کردن انتهای آن استفاده می کنیم ، اما باید توجه کنیم که هر فهرست شامل اقلامی است که برای مشخص کردن آن از دستور  <li> که li مخفف list items  است ، استفاده می کنیم.
مثال :

<ol>
      <li>list item1</li>
      <li>list item2</li>
      <li>list item3</li>
</ol>

آیا می توانیم از عددهای رومی (i,ii,iii,…)  یا حروف (a,b,c,…)  برای شماره گذاری عناصر فهرست در طراحی سایت استفاده کنیم؟؟
بله با استفاده از صفت type  این دستور می توان این کار را انجام داد.
به مثال های زیر توجه کنید:
فهرست با اعداد رومی به صورت i , ii ,iii , iv

<ol type ="i">
       <li>list item1</li>       
       <li>list item2</li>      
       <li>list item3</li>
</ol>

فهرست با حروف a , b ,c , d

<ol type ="a">
       <li>list item1</li>
       <li>list item2</li>
       <li>list item3</li>
</ol>

فهرست با حروف بزرگ A , B ,C ,D

<ol type ="A">
       <li>list item1</li>
       <li>list item2</li>
       <li>list item3</li>
</ol>

با استفاده از صفت start از دستور <ol>  می توان تعیین کرد که شماره گذاری عناصر فهرست از چه مقدار عددی یا حروفی شروع شود. به عنوان مثال :

<ol type="I" start="7">
       <li>list item1</li>
       <li>list item2</li>
       <li>list item3</li>
</ol>

در مثال بالا ابتدا با استفاده از صفت type مشخص می کنیم که برای شماره گذاری عناصر لیست از اعداد رومی بزرگ استفاده شود و سپس با استفاده از دستور start می گوییم که شروع شماره گذاری از عدد 7 رومی  باشد.

لیست نامرتب در طراحی سایت (unordered or bulleted list) :

در این نوع لیست ترتیب برای عناصر لیست اهمیتی ندارد. برای نمایش لیستی از این نوع از دستور ul استفاده می کنیم. برای هر کدام از عناصر لیست هم مثل نوع قبلی از برچسب li بهره می گیریم. عناصر لیست به کمک شکل ها یا علامت های دایره تو پر (disc) ,دایره تو خالی (circle) و مربع تو پر (square) مشخص می شوند. برای تعیین شکل عناصر از صفت type کمک می گیریم. به مثال زیر توجه کنید:

<ul type="circle">
      <li>list item1</li>
      <li>list item2</li>
      <li>list item3</li>
</ul>

استفاده از لیست های تعریفی در طراحی سایت (definition list) :

مجموعه ای از عناصر با تعاریف  متناظرشان , یک لیست تعریفی را تشکیل می دهند که دستور <dl> نشان دهنده شروع و </dl> نشان دهنده پایان این لیست است. توجه کنید وقتی در حال طراحی سایت با این لیست هستیم برای نشان دادن  هر عنصر از دستور <dt>  که dt مخفف  definition term است , استفاده می کنیم و برای تعریف هر عنصر دستور <dd> را به کار می بریم.
مثال :

<dl>
     <dt>Term 1</dt>
     <dd>This is the definition of the first term.</dd>
     <dt>Term 2</dt>
     <dd>This is the definition of the second term.</dd>
</dl>

نویسنده: رضا ترابی

طراحی سایت – آموزش html – لینک ها

لینک ها بنیادی ترین قسمت از شبکه ارتباط جهانی (www) هستند. بنابرین توصیه می شود که هزینه زمانی بیشتری برای این قسمت صرف کنید. ما هم سعی می کنیم با آوردن مثال های متنوع به شما برای یاد گیری این بخش کمک کنیم. باید توجه داشت که هم متون و هم عکس ها در طراحی سایت می توانند به عنوان لینک مورد استفاده قرار بگیرند.
مثال های زیر را با هم بررسی می کنیم.
مثال 1) برای رفتن به سایت www.google.com  از سایت www.webfocus.ir کافی است که بر روی www.google.com کلیک کنید.
مثال 2)برای رفتن به صفحه طراحی سایت – آموزش html – مقدمه را در همین سایت  ببینیم کافی است که بر روی آن کلیک کنید.
مثال 3)برای رفتن به یکی از مثال ها در همین صفحه کافی است که روی برو به مثال کلیک کنید
3 مثالی که در بالا آورده شد تداعی کننده انواع لینک ها هستند که در زیر به آنها اشاره می شود.

انواع لینک (link) در html

1) لینک سراسری(Global Links): لینک هایی که به صفحات یک سایت دیگر اشاره دارند. به مثال 1 توجه کنید.
2) لینک محلی یا موضعی(Local Links): لینک هایی که به صفحات دیگر همان وب سایت اشاره می کند. یعنی از سایتی که در آن هستید خارج نمی شوند. به مثال 2 توجه کنید.
3) لینک داخلی (Internal Links): لینک هایی هستند که  به قسمتی همان صفحه ای که در آن هستید اشاره می کنند. به مثال 3 توجه کنید.

چگونه زمان طراحی سایت لینک html بسازیم؟؟؟

برای ساختن لینک کافی است از دستور <a>…</a> مخفف anchor استفاده کنیم. هر آنچه که بین </a>…<a>  قرار می گیرد به عنوان لینک شناخته می شود. برای اینکه مقصد لینک نیز مشخص شود از صفت href  مخفف “hypertext reference” استفاده می کنیم. توجه کنید بین دستور a هر المانی از جمله متن ، عکس و… می تواند قرار بگیرد و بعد از این کار با کلیک بر روی آن المان به پیوند مورد نظر منتقل خواهیم شد.

پس شکل کلی این دستور به هنگام طراحی سایت در زبان html به صورت زیر است:

<a href="url">متنی که به عنوان لینک شناخته خواهد شد</a>

<a href="url"><img src="" /></a>

<a href="">هر المانی که قرار است به عنوان لینک استفاده شود</a>

 

Global link – لینک سراسری یا جهانی  :

ویراستار Notpade++   خود را باز کنید و کد زیر را تایپ کنید سپس با پسوند htm  یا html  و با نام GlobalLink آن را ذخیره کنید.

<html>
   <head>
       <title>My Page</title>
   </head>

   <body>
             Click <a href="http://webfocus.ir">here</a> to go to webfocus.ir.
   </body>
</html>

حال اگر با مرورگر صفحه مورد نظر را باز کنید نتیجه به صورت زیر مشاهده خواهد شد:

Click here to go to webfocus.ir.

با فشردن کلمه here به صفحه اول وب فوکوس خواهید رفت , به همین سادگی!

Local link – لینک محلی:

قبل از اینکه به این مثال بپردازیم یک صفحه html بنام firstpage را در درایو c رایانه خود بسازید. سپس ویراستار NotePad++  را باز کرده و کد زیر را در آن تایپ کنید و آن را با نام Internallink  و با پسوند htm ذخیره کنید

Click <a href="c:\firstpage.htm">here</a> to go to firstpage.

حال اگر با مرورگر صفحه Internallink.htm را باز کنید، صفحه مورد نظر برای شما نمایش داده میشود!

 Intrnal Link – پیوند داخلی:

برای اینکه به قسمت خاصی از صفحه وبی که در آن قرار داریم ، پیوند بر قرار کنیم یا به عبارت دیگر به قسمتی از همان صفحه html پرش کنیم، باید از صفت name  از دستور<a>…</a> برای نام گذاری آن بخش  استفاده کنیم.این نام از حروف تشکیل می شود که باید منحصر به فرد نیز باشد. مثلا قسمتی از صفحه را انتخاب می کنیم  و در آن قسمت دستور <a name=”mesale1″>…</a> را می نویسیم حال برای مراجعه به آن بخش کافی است در پیوند داخلی که ایجاد می کنیم علامت # و بعد نامی که انتخاب کرده بودیم را می نویسیم. در این مثال باید بنویسیم <a href=”#mesale1″>…</a>. مثال کامل زیر بهتر به تشریح این موضوع خواهد پرداخت.

<html>
   <head>
      <title>my page</title>
   </head>

   <body>

        <h3><a href="#Chapter 1">Introduction</a></h2>
        <h3><a href="#Chapter 2">html text</a></h2>
        <h3><a href="#Chapter 3">html links</a></h2>

        <a name=" Chapter 1"> Introduction </a></br>
        <!-- Introdution متن مربوط به  --></br>

        <a name=" Chapter 2"> html text</a></br>
        <!-- html text متن مربوط به  --></br>

        <a name=" Chapter 3"> html links</a></br>
        <!-- html links متن مربوط به  --></br>

   </body>
</html>

در مثال بالا فرض کنید صفحه وبی داریم که شامل اطلاعاتی در مورد html  است که به 3 فصل  html links, html text ,Introduction تقسیم شده است که در بالای صفحه آمده اند. توضیح همه این فصل ها درهمین صفحه قرار دارد.
حال برای دیدن متن مربوط به html text  کافی است بر روی لینک html text کلیک کنیم. با یاد داریم که این نوع  پیوند ، پیوند داخلی نام دارد. پس 2 مرحله برای ایجاد پیوند داخلی داریم:

1)نام گذاری بخشی که می خواهیم با لینک آن را ببینیم.
<a name=”#Chapter 2″>html text</a>

2)ایجاد پیوند به بخش نام گذاری شده.
<a href=”#Chapter 2″>html text</a>

لینک های رنگی بسازید:

برای اینکه لینک ها را در صفحه خود به صورت متمایز نمایش دهیم می توان برای آنها رنگ مشخص کرد.
دو حالت برای تعریف کردن رنگ لینک ها وجود دارد:
1)رنگ تمام لینک ها در صفحه به یک صورت تعریف شود.
2)برای بعضی از لینک ها رنگ متفاوتی تعریف کنیم.

link,vlink,alink ؟!! یعنی چی؟

link: بیان کننده رنگ پیوند هایی است که تا کنون ملاقات نشده اند. استاندارد آن  آبی (blue  یا  #0000FF) است.
vlink مخفف Visited Link :رنگ پیوند را پس از ملاقات شدن نمایش می دهد.استاندارد آن ارغوانی (purple – #800080) است.
alink مخفف Active Link :رنگ لینک را وقتی که ماوس بر روی آن قرار می گیرد ، مشخص می کند.استاندارد آن قرمز (red – #FF0000) است.

یک رنگ برای تمام لینک های موجود در صفحه html

کافی است که در قسمت <body> از صفت های  link,vlink,alink  استفاده کنیم.

<body link="#C0C0C0" vlink="#808080" alink="#FF0000">

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

روش اول:استفاده از دستور font  بین دستور <a href>…</a>باید به این نکته مهم توجه داشت که دستور font حتما باید بین <a href>…</a> قرار بگیرد.

Click <a href="http://www.webfocus.ir"> <font color="red">here</font> </a> to go to webfocus.

روش دوم:استفاده از خاصیت style  در دستور <a>

Click <a href="http://www.webfocus.com" style="color: green">here</a> to go to webfocus.

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

بعضی رنگ های معروف طراحی وب سایت:
Black, Aqua , Fushia, Blue, Gray, Green, Lime, Marron, Navy, Olive, Purple, Red,Silver,Teal,White,Yellow  .

نکته :به جای نوشتن اسامی رنگ ها, می توان از فرمت RGB استفاده کرد.که b,g,r به ترتیب مخفف blue,green,red هستند.که هر یک می توانند مقداری بین 0 تا 255 بگیرند. رنگ مورد نظر از ترکیب این رنگ ها به دست خواهد آمد. مثلا 187 017 142 رنگی مایل به بنفش خواد بود. البته اکثر طراحان ترجیح می دهند که این رنگ ها را در مبنای شانزده (hex) بیان کنند مثلا رنگ معادل مثال قبل در مبنای شانزده به صورت 8E11BB# نوشته می شود.

صفات مربوط به دستور پیوند (Link Attributes )

در مورد صفت های href وname به طور مفصل صحبت کردیم حال به توضیح صفت های دیگر این دستور می پردازیم.
صفت title : با استفاده از این صفت وقتی ماوس بر روی پیوند مورد نظر قرار می گیرد متنی که در جلوی این صفت نوشته شده  ظاهر می شود.
مثال:

<a href ="www.webfocus.ir" title="for more learning html click here">learning html</a>

وقتی ماوس روی پیوندhml learning قرار می گیرد پیام for more learning html click here ظاهر می شود.

     صفت tabindex : با استفاده از این صفت و مقدار دادن به آن در مرورگرهایی که ازاین صفت پشتیبانی می کنند ,روند انتخاب کردن پیوند را با استفاده از کلید Tab  مشخص می کنیم.
مثال:

<a href =" http://www.yahoo.com"  tabindex="1">yahoo</a></br>
<a href =" http://www.google.com"  tabindex="3">google</a></br>
<a href =" http://www.webfocus.ir"  tabindex="2">webfocus</a>

با یک بار فشردن کلید Tabمکان نما بر روی پیوند yahoo با دو بار فشردن مکان نما بر روی پیوند webfocus و با سه بار فشردن کلید Tab مکان نما بر روی پیوند google قرار می گیرد.
حال اگر ازاین صفت استفاده نکنیم ,با هر بار فشردن کلید Tab ,مکان نما به ترتیبی که پیوندها در صفحه آورده شده اند ,حرکت می کنند.مثلا اگر در مثال بالا از صفت tabindex استفاده نشود,با یک بار فشردن  Tab  مکان نما بر روی پیوند yahoo با دو بار فشردن بر روی پیوند google و با سه بار فشردن برروی پیوند webfocus قرار می گیرد.

      صفت Target : به صورت پیش فرض, لینک ها در همان پنجره یا فریم ای که در آن هستید باز خواهند شد.با استفاده از صفت Target مثلا می توانید تعیین کنید که پیوند مورد نظر در یک پنجره جدید باز شود. با این صفت در بخش فریم ها در طراحی وب سایت بیشتر آشنا خواهیم شد.

نویسنده: رضا ترابی

طراحی سایت – آموزش html – متن ها

به هنگام طراحی سایت اگر می خواهید متنی را به صفحه html خود اضافه کنید کافی است متن دلخواه را در قسمت Body از صفحه html تایپ کنید.

مثال:
ویراستار notepad یا notepad++   خود را باز کنید و کد زیر را تایپ کنید

<html> 
<head> 
    <title>my page</title>
 </head> 
   <body>
سلام این صفحه سایت را من طراحی کرده ام!
   </body>
</html>

سپس  با پسوند htm  یا html   آن را ذخیره کنید.
با باز کردن مثال خود با مرورگر Internet Explorer یا هر مرورگر دیگر  نتیجه به صورت زیر خواهد شد:

سلام این صفحه سایت را من طراحی کرده ام!

اگر خطوط را  به صورت “خرچنگ قورباغه” مي بينيد,فرار نكنيد, کافی است در هنگام Save کردن در پایین پنجره گزینه Encoding را با UTF-8 تنظیم کنید (در صورت استفاده از n++ باید قبل از save کردن از منوی Format گزینه Encode in UTF-8 را انتخاب نمایید).
مانند مثال بالا اگر ویژگی های خاصی را به متن اضافه نکنید مرورگر از سایز و فونتی که به صورت  پیش فرض برایش تعریف شده  استفاده می کند.

ویرایش 1392/06/12 توسط میثم

دستور basefont فقط توسط مرورگر IE9 و نسخه های قدیمی تر آن پشتیبانی می شود به عبارت دیگر هیچ مرورگر دیگری از آن پشتیبانی نمی کند.

نکته مهم!!!!!! دستور basefont در html5 پشتیبانی نمی شود و امروزه از CSS برای این منظور در طراحی سایت استفاده می شود.

فونت پیش فرض (BASE FONT):

برای اینکه متنی که در کل صفحه html وارد می کنید به یک شکل دیده شود یا به عبارت دیگر یک فونت سراسری با اندازه و رنگ یکسان داشته باشید کافی است که از دستور <basefont> در ابتدای قسمت بدنه  (body) استفاده کنید.
مثال: ویراستار Notpade++   خود را باز کنید و کد زیر را تایپ کنید سپس  با پسوند htm  یا html  و با نام دلخواه آن را ذخیره کنید.

 1.<html> 
 2.<head> 
 3.      <title>my page</title> 
 4.</head> 
 5. <body> 
 6.     <basefont face="Tahoma, arial, verdana" size="4" color="red"> 
 7.       Hello! This is my page. 
 8.       All text looks the same<br> 
 9.       since I only specified a basefont<br> 
10.</body> 
11.</html>

در مثال بالا خاصیت های color,size,face از دستور  basefont به ترتیب بیانگر فونت, اندازه یا سایز متن ( 1کوچکترین و 7 بزرگترین سایز) ورنگ متن html شما هستند.

نکته: اگر لیستی از فونت ها را مانند مثال بالا وارد کنیم مرورگر از اولین فونت قابل نمایش برای متن درکامپیوتر بیننده استفاده می کند.یعنی اگر قابلیت نمایش فونت Tahoma  فراهم نباشد مرورگر از فونت arial وگر نه از فونت verdana استفاده خواهد کرد. نتیجه مثال بالا به صورت زیر خواهد شد:

Hello! This is my page. All text looks the same
since I only specified a basefont

توجه کنید زمانیکه سایتی طراحی می کنید به هنگام نوشتن متون html برای رفتن به خط بعدی باید از دستور <br> استفاده کنید. با توجه به مثال خواهید دید که در خط 7 از <br> استفاده نکردیم و به همین دلیل متن نوشته شده در خط 8 با وجود اینکه در خط بعدی کد نوشته شده درخروجی بلافاصله بعد از متن خط 7  دیده میشود.

تغییر فونت متن :

با استفاده از دستور  </font><font> می توان فونت , رنگ و اندازه متن را زمان طراحی سایت تغییر داد.
مثال: ویراستار Notpade++   خود را باز کنید و کد زیر را تایپ کنید سپس  با پسوند htm  یا html  و با نام دلخواه آن را ذخیره کنید.

<html> 
   <head> 
   <title>My Page</title> 
   </head> 
 
<body> 
   <basefont color="green" face="arial" size="4"> 
   Hello! This is my page.<br><br> 
   <font color="red" face="arial" size="2"> 
   This local text looks different. 
   </font> 
   <br><br> 
   This text looks like the first line. 
</body> 
</html>

با باز کردن مثال خود با مرورگر Internet Explorer , کد بالا نتیجه زیر را در مرورگر خواهد داشت:
Hello! This is my page.

This local text looks different.

This text looks like the first line.

با استفاده از صفت های color,face,size  از دستور <font> می توان به ترتیب اندازه (1 کوچکترین و7 بزرگترین) ,نوع فونت و رنگ متن را تعیین کرد.

تفاوت font با basefont
basefont در کل صفحه وب اعمال می شود.در حالی که در دستور font تنها متنی که بین <font>…</font> قرار دارد تحت تاثیر این دستور و صفت های آن(face,color,size) قرار می گیرد.

قالب بندی متن:

در طراحی سایت به زبان html قالب بندی متون به سادگی توسط دستورات مشخص شده در جدول انجام می شود!

توضیح دستور خروجی
باعثbold  (برجسته)شدن متن می شود. <b>text</b> text
باعث Italic  (کج یا خوابیده) شدن متن می شود. <i>text</i> text
خطی زیر متن می کشد. <u>text</u> text
متن را کوچکتر می کند و پایین تر می آورد. A<sub>B</sub> AB
متن را کوچکتر می کند و بالا تر می آورد. A<sup>B</sup> AB
متن را به صورت چشمک زن نمایش می دهد. <blink>text</blink> text
خطی روی متن می کشد. <strike>text</strike> text
متن را به صورتی که در ماشین تحریر تایپ می شود ,نمایش می دهد. <tt>text</tt> text
متن را دقیقا به همان صورتی  که می نویسیم نمایش می دهد.
یعنی فضای خالی ,tab ,رفتن به سطر بعدی را حفظ می کند.
<pre>text</pre>

اندازه های متون:

در html روش های متعددی برای تعیین اندازه متون پیش بینی شده است!

توضیح دستور خروجی
باعث  افزایش سایز متن به اندازه 1 واحد نسبت به حالت عاددی <big>text</big> text
باعث  کاهش سایز متن به اندازه 1 واحد نسبت به حالت عادی. <small>text</small> text
متن را با کوچکترین سایز نمایش می دهد. <font size=”1″>text</font> text
متن را با بزرگترین سایز نمایش می دهد. <font size=”7″> text</font> text

نکته اول در مورد دستور <big></big> اینکه می توان از آن به صورت تکراری و پشت سر هم استفاده کرد.مثلا اگر بخواهیم متنی با دو سایز بزرگ تر از حالت عادی نمایش داده شود , کافی است از این دستو دو بار به صورت زیر استفاده شود .
<big><big>text</big></big>

و نکته دوم اینکه مقادیر صفت size متغیرند و می توانید از تمامی مقادیر 1 تا 7 استفاده کنید!

پاراگراف بندی:

برای پاراگراف بندی متن در Html  کافی از دستور <p>…</p>  استفاده کنیم , که <p> نشان دهنده شروع پاراگراف و <p/> نشان دهنده پایان آن است.
صفات Align,Id,Title,Dir از جمله صفاتی هستند که به بحث آنها می پردازیم:

صفت Dir : برای اینکه جهت نوشته شدن متن را مشخص کنیم از این صفت استفاده می کنیم. مقادیر این صفت عبارتند از LTR مخفف Left To Right به معنی چپ به راست و همچنین RTL مخفف Right To Left به معنی راست به چپ که از دومی ( RTL ) برای نوشتن متون فارسی استفاده می کنیم.

صفت Title: عبارتی که جلوی Title نوشته می شود به عنوان توضیح در مورد پاراگراف هنگامی که ماوس روی آن قرار می گیرد, ظاهر می شود.

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

صفت Align :که مکان پاراگراف را مشخص می کند.که دارای سه مقدار Left,Right,Center  است که قبلا توضیح داده شده است.

عناوین در طراحی سایت:

در اچ تی ام ال از دستورات h1 – h6 برای تعیین عنوان استفاده می شود. برای این کار از دستور مورد نظر به صورت <hX>Text</hX> استفاده می شود که باید بر حسب نیاز X را با عدد مورد نظر جایگزین کنید. مهمترین نکته در مورد دستورات تعیین عنوان این است که این دستورات برعکس نامشان اندازه عنوان را تعیین می کنند یعنی از h1 برای تعیین بزرگترین عنوان و از h6 برای تعیین کوچکترین عنوان استفاده می شود.

Heading1

Heading2

Heading3

Heading4

Heading5
Heading6

به عنوان آخرین نکته در نظر داشته باشید که می توانیم بوسیله قراردادن صفت align در دستورات hX محل قرارگیری عناوین را مشخص کنیم. نحوه استفاده از این صفت و مقادیر مختلف آن را در ادامه خواهید دید.

<h1 align="center">عنوان در وسط</h1>

عنوان در وسط

<h1 align="left">عنوان سمت چپ</h1>

عنوان سمت چپ

<h1 align="right">عنوان سمت راست</h1>

عنوان سمت راست

 

نویسنده: رضا ترابی