چگونه از javascript در طراحی سایت استفاده کنیم؟

تگ <script> در زبان html برای قرار دادن کدهای جاوااسکریپت در صقحه وب سایت به کار میرود!

چگونه جاوا اسکریپت را داخل صفحات HTML  قرار دهیم؟

<html>
<body>

    <script type = "text/javascript">

           Document.write("Hello World!");

    </script>

</body>
</html>

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

Hello World!

توضیح مثال
استفاده از javascript در طراحی سایت ساده است فقط کافی است داخل صفحه HTML از تگ <script> استفاده کنیم . داخل تگ <script> نوع خصوصیاتی که برای تعریف زبان اسکریپت تعریف می شود را تعریف میکنیم.
بنابراین <script type=”text/javascript”>  و </script>  به ما می گوید که جاوا اسکریپت از کجا شروع شده و کجا خاتمه پیدا کرده است.

<html>
<body>

     <script type="text/javascript">
         ......
     </script>

</body>
</html>

کلمه ی Document.write  یک دستور استاندارد جاوا اسکریپت برای نوشتن خروجی بر روی صفحه سایت است. با قرار دادن دستور Document.write بین تگهای <script> و </script> مرورگر آن را به عنوان یک دستور جاوااسکریپت تشخیص داده و آن خط را اجرا می کند . در این مورد مرورگر Hello World!  را بر روی صفحه می نویسد.

<html>
<body>

     <script type="text/javascript">
          Document.write("Hello World!");
     </script>

</body>
</html>

توجه : اگر ما تگ <script>  را ننویسیم مرورگر خود دستور document.write(“Hello World!”)  را بدون هیچ تغییری چاپ می کند چراکه آن را به عنوان یک متن شناسایی خواهد کرد.

توضیحات HTML برای مدیریت مرورگرهای ساده

مرورگرهایی که از جاوا اسکریپت حمایت نمی کنند با آن به عنوان محتویات یک صفحه عمل می کنند .
برای جلوگیری از این مسئله در طراحی سایت و طبق استانداردهای جاوا اسکریپت ، توضیح تگهای HTML می تواند دستورات جاوا اسکریپت را پنهان کند . کافی است از تگ HTML  <!–  قبل از اول توضیحات جاوا اسکریپت  و یک <– در آخر دستور بعد از آخرین توضیح جاوا اسکریپت استفاده کنید .

<html>
<body>

     <script type = "text/javascript">
     <!- -
          Document.write("Hello World!")
     // -- >
     <script/>

</body>
</html>

دو تا اسلشی که در آخر خط توضیحی وجود دارد (//) نشانه ی توضیحات جاوا اسکریپت است . که این از اجرای تگ <- – در جاوا اسکریپت جلوگیری می کند.

مترجم: فاطمه سیفی

طراحی سایت , آموزش javascript , مقدمه

مقدمه ای بر جاوا اسکریپت

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

برای شروع یادگیری javascript  چه چیزهایی را باید بدانیم؟

توانایی های پایه ای که شما برای درک جاوا اسکریپت باید بلد باشید HTML و XHTML  می باشد که به راحتی قابل یاد گیری است.

جاوا اسکریپت چیست؟

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

آیا جاوا اسکریپت و جاوا یکی اند؟

نه!!!!
جاوا اسکریپت و جاوا java از دو بعد مفهوم و طراحی دو زبان کاملا متفاوت هستند.
جاوا java  ( که توسط شرکت sun توسعه یافته است ) فوی و بسیار پیچیده تر از جاوا اسکریپت است و در دسته بندی زبان هایی مانند C/C++ قرار میگیرد.

چه کارهایی را جاوا اسکریپت می تواند انجام بدهد؟

– جاوا اسکریپت به طراحان سایت یک ابزار برنامه نویسی می دهد . طراحان HTML برنامه نویس نیستند ؛ اما جاوا اسکریپت یک زبان اسکریپت با دستورالعملهای خیلی ساده است ؛ به طوری که هرکس میتواند قسمت کوچکی از کدها را بر روی صفحه ی HTML خودش قرار بدهد.
– جاوا اسکریپت می تواند صفحات متحرک و پویا را داخل سایت HTML  قرار بدهد.
یک دستور جاوا اسکریپت مانند:

Document.write("<h1> + name + "</h1>")

 می تواند یک متن متغیر را داخل صفحه ی سایت بنویسد.
– جاوا اسکریپت می تواند به رخدادهای صفحه – event – واکنش نشان بدهد . یعنی وقتی که اتفاقی می افتد اجرا می شود مثلا وقتی صفحه ای از سایت لودش تمام می شود یا وقتی که کاربر کلیک می کند.
– جاوا اسکریپت می تواند عناصر HTML  را بخواند و بنویسد . می تواند بخواند و یا محتویات عناصر HTML  را تغییر بدهد.
– جاوا اسکریپت می تواند برای تصدیق و معتبر ساختن اطلاعات استفاده شود . می تواند برای معتبر ساختن اطلاعات فرم قبل از اینکه به سمت سرور ارسال شود استفاده شود . طراحی سایتی با این ویژگی جلوی پردازش های اضافی توسط سرور را می گیرد.
– جاوا اسکریپت می تواند برای کشف نوع مرورگر بازدیدکنندگان مورد استفاده قرار بگیرد. در این صورت چناچه برای مرورگرهای متفاوت صفحات متفاوتی طراحی کرده اید میتواند صفحه ی سازگار با نوع مرورگر کاربر را لود کند.
– جاوا اسکریپت می تواند برای ایجاد کوکی ها استفاده شود . چاوا اسکریپت می تواند برای استفاده هایی مثل ذخیره و بازیابی اطلاعات در کامپیوتر های بازدید کننده استفاده شود.

آیا می دانید اسم واقعی آن ECMAScript است!!؟؟

– اسم رسمی جاوا اسکریپت ECMAScript است . استاندارد سازی و توسعه و نگه داری آن توسط سازمان ECMA انجام می گیرد.
– ECMA_262 استاندارد رسمی جاوا اسکریپت است . این استاندارد بر اساس Javascript (Nets cape) و Jscript ( Microsoft ) بیان شده است .
–  این زبان توسط براندان ایچ در Nets cape(با Navigator 20) ابداع شده  و در همه ی موتورهای جستجوی Netscape  و Microsoft  از سال 1996 ظاهر شده است.
– توسعه ی استاندارد  ECMA_262 از سال 1996 و اولین ویرایش آن در جون 1997  توسط مجمع عمومیECMA  پذیرفته شد.
– استاندارد به عنوان یک استاندارد ISO جهانی در سال 1998 شناخته شد.
– توسعه استاندارد هنوز هم در حال پیشرفت است.

مترجم: فاطمه سیفی

طراحی سایت , دستور زبان CSS

وقتی طراحی سایت انجام می دهیم باید بدانیم دستور زبان در CSS از سه بخش تشکیل شده است: یک  گزینشگر , یک خاصیت و یک مقدار. (a selector, a property and a value) :

selector {property: value}

گزینشگر همان tag/element در HTML است که می تواند خاصیت های متفاوتی داشته باشد که هر خاصیت نیز می تواند چندین مقدار داشته باشد. خاصیت و مقدار توسط دو نقطه از هم جدا می شوند و داخل یک جفت آکولاد قرار می گیرند.

body {color: black}

نکته : اگر مقدار یک خاصبت چند کلمه ای بود هنگام طراحی سایت آن را داخل کوتیشن قرار دهید.

p {font-family: "sans serif"}

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

p {text-align:center;color:red}

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

p
{
text-align: center;
color: black;
font-family: arial
}

گروه سازی:

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

h1,h2,h3,h4,h5,h6 
{
color: green
}

گزینشگر کلاس – The class Selector :

با استفاده از کلاس می توانید برای یک نوع المنت html استایل های متفاوتی تعریف نمایید. برای مثال شما به دو نوع پاراگراف نیاز دارید. یکی وسط چین و دیگری راست چین! برای این کار به صورت زیر عمل می کنیم:

p.right {text-align: right}
p.center {text-align: center}

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

<p class="right">
This paragraph will be right-aligned.
</p>
<p class="center">
This paragraph will be center-aligned.
</p>

نکته : شما می توانید از چند کلاس برای یک المنت استفاده کنید:

<p class="center bold">
This is a paragraph.
</p>

پاراگراف بالا هم style کلاس bold  را دارد و هم  center را.

شما همچنین می توانید نام تگ را از گزینشگر حذف کنید ، در این صورت شما می توانید در طراحی سایت از این کلاس برای تمامی انواع المنت های html استفاده کنید. در مثال زیر تمامی انواع المنت های html با کلاس center به صورت وسط چین نمایش داده میشوند:

.center {text-align: center}

در قطعه کد زیر هر دو المنت h1 و p از کلاس center استفاده می کنند. این بدین معناست که هر دو از قوانین تعریف شده در کلاس center بهره می برند:

<h1 class="center">
This heading will be center-aligned
</h1>
<p class="center">
This paragraph will also be center-aligned.
</p>

توجه: هیچگاه نام یک کلاس را با عدد شروع نکنید چرا که در مرورگر Mozilla/Firefox کار نخواهد کرد و طراحی سایت خوبی نخواهید داشت.

افزودن style به المنت با پارامترهای خاص :

قاعده زیر تمامی انواع input هایی که خاصیت type با مقدار text دارند را با رنگ آبی نمایش میدهد:

input[type="text"] {background-color: blue}

شناسه ها در گزینشگر ها:

شما می توانید با استفده از علامت # یک شناسه برای گزینشگر ها تعریف کنید.

قاعده تعریف شده در زیر با المنتی مطابقت خواهد کرد که خاصیت id با مقدار green داشته باشد:

#green {color: green}

استایل زیر پاراگرافی که id آن مقدار paral داشته باشد را در بر میگیرد:

p#para1
{
text-align: center;
color: red
}

توجه: هیچگاه نام یک شناسه را با عدد شروع نکنید چرا که در مرورگر Mozilla/Firefox کار نخواهد کرد.

توضیحات در سی اس اس – CSS Comments

از توضیحات برای توضیح code ها استفاده می شود. توضیحات در browser نمایش داده نمی شوند. توضیحات  را داخل /* و */ قرار می دهیم.

/* This is a comment */
p
{
text-align: center;
/* This is another comment */
color: black;
font-family: arial
}

مترجم: به آفرید علی بخشی

طراحی سایت , معرفی CSS

پیش نیاز :
قبل از اینکه ادامه دهید باید مطالب زیر را بخوانید :
HTML / xHTML
اگر می خواهید مطالب بالا را بخوانید می توانید به بخش آموزش HTML در همین سایت مراجعه کنید.

CSS چیست؟

1-CSS  مخفف این واژگان است:  Cascading Style Sheets
2- سبک (Style) تعریف می کند که عناصر HTML در طراحی سایت چگونه نمایش داده شوند.
3- Styleها در حالت عادی در  برگه های Style یا همان Style Sheets قرار می گیرند.
4-Style ها برای حل کردن یک مشکل به HTML 4.0 اضافه شدند.
5- برگه های استایل خارجی (External Style Sheets) می توانند در طراحی سایت کار زیادی را برای شما صرفه جویی کنند.
6- برگه های استایل خارجی (External Style Sheets) به هنگام طراحی سایت در فایل های CSS ذخیره می شوند.
7-تعاریف Style های گوناگون می توانند با هم یکی شوند.

Style ها یک مشکل رایج را حل می کنند:

Tag های HTML در اصل برای تعریف اجزای یک صفحه یا document طراحی شده اند. برای مثال  این  tag ها می گویند ” این یک تیتر است ” یا  “این یک پاراگراف است ” یا “این یک جدول است ” با استفاده از tag هایی مثل  <h1> یا <p> یا <table> و … فرض بر این بود که وظیفه آرایش صفحات بر عهده مرورگر(Browser) است بدون استفاده از هرگونه دستور قالب بندی.

از زمانیکه دو مرورگر اصلی آن زمان – Netscape و  Internet Explorer – افزودن تگ هایی مثل <font> و یا صفاتی مقل color به HTML  اصلی را ادامه دادند طراحی وب سایت به کار سختی مبدل گشت چراکه محتوای صفحات HTML به طور کامل از آرایش  صفحه جدا شده بود.

برای حل این مشکل کنسرسيوم تار جهان گستر World Wide Web Consortium (W3C)- –  STYLE ها رابعلاوه HTML 4.0  ایجاد کرد.

Style Sheets ها می توانند کار زیادی را در طراحی سایت صرفه جویی کنند:

به هنگام طراحی سایت استایل چگونگی نمایش اجزای HTML را تعریف می کنند دقیقا مثل تگ font ویا صفت color در HTML 3.2. معمولا استایل ها در فایل های خارجی با پسوند .css ذخیره میشوند. فایلهای استایل خارجی به شما این امکان را میدهند که آرایش تمام صفحات وب سایت خود را تنها با ویرایش یک فایل CSS انجام دهید!

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

استایل های مختلف به صورت آبشاری یکی میشوند!!!

Style Sheet ها اجازه میدهند که اطلاعات سبک به روش های گوناگون تعریف شوند. سبک ها میتوانند در داخل تگ عناصر HTML ، در داخل بخش <head> یا در یک فایل .css ذخیره شوند.

ترتیب آبشار – ریزش!!؟؟؟ – به زبان ساده اولویت با کیست؟

وقتی چندین سبک برای یک عنصر HTML وجود دارد کدام سبک انتخاب خواهد شد؟

در حالت کلی میتوانیم بگوییم که همه Style Sheetها در یک Style Sheet مجازی جدید با قوانین زیر ریخته میشوند که مورد چهارم دارای بالاترین اولویت است:
1. مقدار پیش فرض مرورگر
2. فایل Style Sheet  خارجی
3. Style Sheet داخلی (سبک در قسمت <head> تعریف شده است)
4. Inline Style (سبک در داخل عناصر HTML تعریف شده است)
بنابراین ، یک Inline Style بالاترین اولویت را خواهد داشت ، که این بدین معناست که سبکی که در داخل یک عنصر HTML  تعریف شده ، مقادیر  بخش <head> ، فایل خارجی یا مقدار پیش فرض مرورگر را override میکند.

توجه: اگر فایل Style Sheet خارجی وقتی طراحی سایت انجام می دهیم زیر Style Sheet داخلی در بخش <head>  قرار گیرد ، فایل خارجی مقادیر Style Sheet داخلی را override میکند.

مترجم: به آفرید علی بخشی

طراحی سایت – 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 rowcolumn 2 into first row
column 1 into second rowcolumn 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با استفاده ازاین صفت می توان تعیین کرد که ارتفاع هر خانه به اندازه چند سطر باشد.برای جداولی کاربرد دارد که ارتفاع  خانه های آن متفاوت است.