ساخت منو افقی و عمودی بوسیله HTML

​

  

در این مقاله از آموزش طراحی سایت می آموزیم که چطور یک Icon Bar ( نوار آیکون ) با استفاده از کد CSS ایجاد کنید.

قدم اول : کد HTML را اضافه کنید. مثال :

< div class="icon-bar">

< a class="active" href="#">< i class="fa fa-home">< /i>< /a>

< a href="#">< i class="fa fa-search">< /i>< /a>

< a href="#">< i class="fa fa-envelope">< /i>< /a>

< a href="#">< i class="fa fa-globe">< /i>< /a>

< a href="#">< i class="fa fa-trash">< /i>< /a>

< /div>

قدم دوم :  کد CSS را برای ساخت منو افقی اضافه کنید. مثال :

.icon-bar {

  width: 100%; /* Full-width */

  background-color: #555; /* Dark-grey background */

  overflow: auto; /* Overflow due to float */

}

 

.icon-bar a {

  float: left; /* Float links side by side */

  text-align: center; /* Center-align text */

  width: 20%; /* Equal width (5 icons with 20% width each = 100%) */

  padding: 12px 0; /* Some top and bottom padding */

  transition: all 0.3s ease; /* Add transition for hover effects */

  color: white; /* White text color */

  font-size: 36px; /* Increased font size */

}

 

.icon-bar a:hover {

  background-color: #000; /* Add a hover color */

}

 

.active {

  background-color: #4CAF50; /* Add an active/current color */

}

​

 

مثال (ایجاد منوی عمودی) : کد CSS را برای ساخت منو عمودی اضافه کنید.

.icon-bar {

width: 90px; /* Set a specific width */

background-color: #555; /* Dark-grey background */

}

.icon-bar a {

display: block; /* Make the links appear below each other instead of side-by-side */

text-align: center; /* Center-align text */

padding: 16px; /* Add some padding */

transition: all 0.3s ease; /* Add transition for hover effects */

color: white; /* White text color */

font-size: 36px; /* Increased font-size */

}

.icon-bar a:hover {

background-color: #000; /* Add a hover color */

}

.active {

background-color: #4CAF50; /* Add an active/current color */

}

​

 

​

آموزش طراحی سایت-آموزش جاوا اسکرپیت

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

• مزایای استفاده از جاوا اسکریپت
• نوشتن اولین قطعه کد جاوا اسکریپت
• فعال سازی جاوا اسکریپت در مرورگرها
• محل قرارگیری دستورات جاوا اسکریپت

حال ادامه آموزش طراحی سایت در خدمت شما هستیم.

آموزش دستورات جاوا اسکریپتstatements:

در جاوا اسکریپت statements، دستوراتی هستند که توسط مرورگر وب اجرا می شوند.

دستورات جاوا اسکریپت

دستور زیر به مرورگر دستور می دهد عبارت "Hello Dolly." را داخل یک المان HTML با شناسه ی "demo" بنویسد.

document.getElementById("demo") = "Hello Dolly."

عبارات JavaScript

document.getElementById("demo") = "Hello Dolly." Try it Yourself »

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

بیشتر برنامه های جاوا اسکریپت دربردارنده ی بسیاری از این نوع دستورات هستند.

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

در این مثال x، y و z هر یک مقداردهی شده اند که یکی پس از دیگری اجرا می شوند. همان طور که خود مشاهده می کنید z آخر از همه اجرا می گردند.

مثال:

var x = 5; var y = 6; var z = x + y; 1document.getElementById("demo") = z;

توجه:

برنامه های نوشته شده توسط جاوا اسکریپت (javascript programs) همگی کد جاوا اسکریپت خوانده می شوند.

نقطه ویرگول ;

نقطه ویرگول برنامه ها (دستورات) جاوا اسکریپت را از هم جدا می کنند.

در انتهای هر دستور قابل اجرا یک نقطه ویرگول لحاظ کنید.

a = 5;

b = 6;

c = a + b;‎

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

a = 5; b = 6; c = a + b;‎

نکته:

قرار دادن نقطه ویرگول در انتهای دستورات اگرچه کاملاً ضروری نیست، اما اکیداً توصیه می شود.

فاصله بین بخش های مختلف کد

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

جاوا اسکریپت معمولاً فاصله ی بین بخش های مختلف کد را نادیده می گیرد. با این وجود می توان با استفاده از فاصله (white space) کد را به مراتب خواناتر کرد.

به عنوان مثال، دو نمونه ی زیر کاملاً یکسان هستند.

var person = "Hege";

var person="Hege";‎

توصیه می شود از فاصله در اطراف عملگرهای = + - * / استفاده کنید.

var x = y + z;‎

طول خط کد و شکستن آن (line length، line break)

به منظور خواناتر کردن کد، برنامه نویس ها اغلب سعی می کنند خطوط کدهایشان از 80 کاراکتر تجاوز نکند

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

مثال:

document.getElementById("demo") =

‎"Hello Dolly.";‎

مجموعه / گروهی از دستورات (code block)

می توان مجموعه ی از دستورات جاوا اسکریپت را داخل علامت های {...} جای گذاری کرد تا از این طریق امکان اجرای یکجا و همزمان کدها فراهم آید (به عبارتی آن ها را با قرار دادن داخل کاراکتر مزبور گروه بندی کرد).

هدف از این امر اجرای همزمان کدهای جاوا اسکریپت است.

یکی از جاهایی که در آن دستورات جاوا اسکریپت را به صورت گروه بندی شده مشاهده می کنید، داخل توابع (function) جاوا اسکریپت است.

مثال:

function myFunction() { 1‎ document.getElementById("demo") = "Hello Dolly." document.getElementById("myDIV") = "How are you?" ‎}‎

کلید واژه های جاوا اسکریپت

دستورات جاوا اسکریپت معمولاً با یک کلید واژه / keyword شروع می شود که نوع عملیاتی که در جاوا اسکریپت باید اجرا شود را تعیین می کند.

جدول زیر کلیدواژه هایی که در این سری آموزشی یاد می گیرید را فهرست می کند.

لطفاً توجه داشته باشید کلید واژه ها را نمی توان به عنوان اسم برای متغیرها مورد استفاده قرار داد.

آموزش متغیرها و انواع داده ای در زبان جاوا اسکریپت:

انواع داده ای در جاوا اسکریپت

یکی از مشخصه های اساسی هر زبان برنامه نویسی، انواع داده ای (Data Types) است که توسط آن پشتیبانی می شود. جاوا اسکریپت امکان استفاده از سه نوع داده ای اساسی زیر را به کاربر می دهد.

اعداد (Numbers) مثل 123 ، 12.50 و....

متن (Strings) مثل “ Text “ و....

مقادیر صحیح یا غلط (Boolean) مثل true یا false.

همچنین جاوا اسکریپت دو نوع داده ای جزیی به صورت null (خالی) و undefined (تعریف نشده) را نیز به صورت مقادیر تک وجهی پشتیبانی می کند.

علاوه بر این نوع داده ای اولیه، جاوا اسکریپت دارای یک نوع داده ای دیگر به نام شی (Object) است که به صورت مفصل در یک بخش، به تشریح آن خواهیم پرداخت.

نکته:

جاوا اسکریپت، تفاوتی بین نوع داده ای عددی (Integer) و اعداد بزرگتر (Flaot) قائل نشده و تمامی اعداد در این زبان در یک متغیر 64 بیتی از نوعfloat تعریف می شوند.

نحوه تعریف متغیرها در زبان جاوا اسکریپت

همانند سایر زبان های برنامه نویسی، جاوا اسکریپت نیز از متغیرها (Variables) پشتیبانی می کند. متغیرها در واقع ظروفی هستند که مقادیر مورد نظر خود را درون آنها ریخته و یک نام منحصر به فرد را برایش انتخاب می کنید. سپس در هر جای برنامه که خواستید از آن مقدار استفاده نموده و یا آن را تغییر دهید، کافی است نام متغیر را در کد خود بنویسید.

قبل از استفاده از یک متغیر در زبان جاوا اسکریپت، بایستی آن را در کد خود تعریف کنید. از واژه کلیدی var، همانند کد زیر برای تعریف متغیرها استفاده می شود. در مثال زیر، دو متغیر به نام های money و name را تعریف کرده ایم.

<script type="text/javascript">

‎‎

همچنین می توانید دو یا چندین متغیر را با استفاده از یک واژه کلیدی var و به صورت پشت سر هم تعریف کنید. همانند کد زیر

<script type="text/javascript">‎

‎‎

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

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

<script type="text/javascript">‎

‎‎

برای تعریف هر متغیر، فقط یکبار از واژه کلیدی var استفاده نمایید. در دفعات بعدی استفاده یا مقداردهی آن متغیر، دیگر نیازی با استفاده از کلمه var نیست.

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

نوع داده ای یک متغیر جاوا اسکریپت، حتی در طول کد می تواند، مثلا از عدد به متن تعییر کند. این کار آزادی عمل و امکان بروز خطای کمتری را به کاربر می دهد.

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

میدان شعاع ( دید ) استفاده از متغیرها در جاوا اسکریپت

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

متغیرهای سراسری (Global Variables) :

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

متغیرهای محلی (Local Variables) :

متغیرهای محلی، متغیرهایی هستند که فقط در خود آن تابع یا کلاسی که تعریف می شوند، قابل استفاده و فراخوانی می باشند. برای مثال پارامترهای یک تابع، متغیرهای محلی برای آن حساب می شوند.

نکته:

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

<script type="text/javascript">‎

‎‎

توصیح مثال : در مثال فوق، یک متغیر سراسری به نام myVar و یک متغیر محلی نیز به همان نام درون تابع ای تعریف نموده و هر دو را مقدار دهی کرده ایم.

در هنگام اجرای دستور (myVar); درون تابع، مقدار متغیر محلی خوانده شده و در خروجی چاپ می شود.

قواعد نام گذاری متغیرها در جاوا اسکریپت

در هنگام نامگذاری متغیرها در جاوا اسکریپت، بایستی موارد زیر را رعایت نمایید.

شما مجاز به استفاده از نام های ذخیره شده و کلمات کلیدی زبان جاوا اسکریپت برای یک متغیر نیستید. لیست نام های دخیره شده و کلمات کلیدی جاوا اسکریپت در بخش بعدی قرار داده شده است. برای مثال نام هایی مثال if یاBoolean برای نامگذاری، غیر مجاز است.

نام متغیرها در جاوا اسکریپت، نباید با یک عدد(9 -0) شده و برای آغاز نام حتما بایستی یک کاراکتر حروفی یا علامت _ قرار بگیرد. برای مثال نام های 123est غیر مجاز و نام_123est ممکن است.

نام متغیرها در زبان جاوا اسکریپت، به بزرگی یا کوچکی حروف حساس هستند. برای مثال متغیرهای Name ، name و یا NaMe با هم متفاوت خواهند بود.

لیست کلمات کلیدی و ذخیره شده زبان جاوا اسکریپت

لیست زیر، کلمات کلیدی ذخیره شده زبان جاوا اسکریپت را شامل می شود که از این واژه ها برای تعیین نام متغیرها نمی توانید استفاده کنید.

آموزش محل قرار گیری کدهای جاوا اسکریپت:

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

< head > … < /head >.

قرار دادن اسکریپت ها در تگ اصلی < body > … < /body > .

قرار دادن کدهای جاوا اسکریپت در یک فایل خارجی . js سپس لینک به آن فایل در بخش < head > صفحه.

در ادامه به تشریح هر یک از روش های بالا خواهیم پرداخت.

قرار دادن کدهای جاوا اسکریپت در تگ< head >صفحه

چنانچه بخواهید دستور یا دستورات اسکریپت مورد نظرتان، پس از اجرای یک رویداد مثل کلیک کاربر بر روی یک دکمه فرمان، اجرا شوند، بایستی کدهای خود را در یک تگ < script > و در بخش < head > صفحه قرار دهید.

در مثال زیر در صورت کلیک کاربر بر روی دکمه فرمان< input > ، تابع sayHello ( ) اجرا شده و پیام خود را در صفحه نمایش می دهد.

توجه داشته باشید که کدهای موجود در بخش < head > صفحه، تا زمانی که فراخوانی نشوند، اجرا نخواهند شد.

قرار دادن کدهای جاوا اسکریپت در بخش < body > صفحه

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

همانند مثال زیر، کد < script > تعریف شده، بلافاصله پس از اجرا بر روی صفحه، پیام خروجی خود را نمایش می دهد.

قرار دادن کدهای جاوا اسکریپت در بخش < head > و < body > صفحه

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

همانند مثال زیر. در مثال زیر کد < script > موجود در بخش < head > در صورت کلیک کاربر بر روی دکمه فرمان و کد < script > موجود در بخش < body > به محض لود صفحه اجرا می شوند.

قرار دادن کدهای جاوا اسکریپت در یک فایل خارجی . js

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

1. جدا کردن بخش کدها از تگ های HTML برای خوانایی و کاهش حجم کد صفحه.
2. استفاده از یکسری کد مشترک جاوا اسکریپت در چندین فایل HTML با اتصال به فایل “.js” به جای نوشتن آن کدها به صورت جداگانه در هر صفحه.

برای این منظور، بایستی ابتدا کدها و توابع مورد نظر را در یک فایل متنی با نام مشخص و پسوند “.js” نوشته و سپس به وسیله یک تگ < script > در بخش < head > صفحه، آن فایل خارجی را به صفحه متصل کنید. همانند کد زیر < html >‎ ‎< head > ‎ < script type="text/javascript" src="filename.js" >< /script >‎ ‎ < /head >‎ ‎< body > ‎ ‎ .......‎ ‎ < /body >‎‎ < /html >‎

برای مثال شما می توانید تابع را در یک فایل خارجی “.js” تعریف کرده و سپس به وسیله یک تگ < script > و تابع sayHello ( )، در هر جای صفحه که می خواهید، آن را فراخوانی و اجرا کنید.

function sayHello() {‎ alert("Hello World")‎ }‎‏ ‏

همچنین می توانید این کد و فایل را برای هر چند فایل HTML دیگر که می خواهید، به کار ببرید.

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

آموزش طراحی سایت-آموزش javascript

سلام با آموزش طراحی سایت در خدمت شما هستیم .در قسمت قبل در مورد جاوا اسکرپیت صحبت کردیم , حال ادامه آموزش طراحی سایت در خدمت شما هستیم.

جاوا اسکریپت JavaScript زندگی خود را با نام Live Script آغاز نمود، اما شرکت Netscape نام آن را، احتمالا به دلیل هیجانی که می توانست از سوی زبان Java به خود بگیرد، به JavaScript تغییر داد.

جاوا اسکریپت برای اولین بار در مرورگر Netscape 2.0 با عنوان Live Script به کار گرفته شد. جاوا اسکریپت یک زبان سبک و مفسر، همراه با قابلیت های شی گرایی (Object Oriented) است که به شما این امکان را داده تا به صفحات ایستاتیک و ساده HTML ، حالت واکنش گرا و تعاملی بدهید. به طور کلی می توان جاوا اسکریپت را در موارد زیر خلاصه کرد.

جاوا اسکریپت یک زبان سبک و مفسر می باشد (معنای مفسر این است که برنامه دستورات را به صورت خط به خط خوانده و در پایان هر خط آن را اجرا می کند. بر خلاف کامپایلر که ابتدا کل دستورات را خوانده و اشکال یابی کرده، سپس آنها را یکباره اجرا می کند). این زبان برای ساخت نرم افزارهای میانی شبکه ( واسط ) استفاده می شود. جاوا اسکریپت یک زبان مکمل برای HTML می باشد. این زبان یک پلتفرم باز می باشد. جاوا اسکریپت یک زبان طرف کاربر (Client Side) است .

زبان جاوا اسکریپت یک زبان طرف مشتری (Client Side) می باشد، به این معنی که دستورات آن در کامپیوتر کاربر و در مرورگر وی اجرا می شود. دستورات جاوا اسکریپت را مستقیما می توان درون اسناد HTML وارد کرده و یا آنها را در یک فایل مجزا قرار داد و سپس آن فایل را به صفحه HTML پیوند زد. وجود زبان جاوا اسکریپت باعث می شود تا صفحات HTML از حالت Static و ساده درآمده و بتوانند با کاربر ارتباط برقرار کرده، مرورگر را کنترل نموده و به صورت پویا محتویات HTML تولید و به صفحه اضافه کنند. کدهای سمت کلاینت جاوا اسکریپت، قابلیت انجام بسیاری از کارهایی که توسط کد های سمت سرور انجام می شوند را دارا هستند.

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

 

مزایای استفاده از جاوا اسکریپت

 

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

کاهش عملکرد و درگیر نمودن سرور :

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

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

پاسخ سریع و لحظه ای به کاربر :

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

بالا رفتن قدرت تعامل با کاربر :

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

رابط کاربری قوی تر :

به وسیله جاوا اسکریپت می توانید اجزایی مثل منو های بازشو، اسلایدشوها و... را طراحی نموده و به سایت خود، رابط کاربری قوی تری بدهید.

 

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

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

 

ساختار دستوری جاوا اسکریپت

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

<script...>‎

‎ ‎دستورات‎ ‎جاوا‎ ‎اسکریپت‎ JavaScript code //‎

‎‎

تگ JavaScript دو خاصیت مهم زیر را می تواند داشته باشد.

Language :

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

Type :

این خاصیت نیز نوع دستورات تعیین شده در اسکریپت را تعیین می کرده که رایج ترین مقدار برای آن “ text/javascript “ می باشد. به معنای اینکه به زبان جاوا اسکریپت و به صورت متنی هستند. بنابراین تگ JavaScript شما در حالت کاملتر بایستی به صورت زیر باشد.

<script language="javascript" type="text/javascript">‎

‎ JavaScript code

‎‎

نوشتن اولین قطعه کد جاوا اسکریپت

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

بیایید برای یادگیری و درک بهتر زبان جاوا اسکریپت، اولین قطعه کد خود را برای چاپ عبارت “ Hello World “ در خروجی بنویسیم. به شرح زیر

<html>‎

‎<body> ‎

<script language="javascript" type="text/javascript">‎

‎ ‎ ‎

</body>‎‎

</html>‎

در قطعه کد فوق، ما یک کد دلخواه به نام توضیح (comment) را اضافه کرده ایم که سایر دستورات را درون خود جای داده است. این کار برای جلوگیری از اجرای ناصحیح دستورات جاوا اسکریپت توسط ورژن های قدیمی مرورگرهایی است که از این زبان پشتیبانی نمی کنند. در مرحله بعد، تابع document.wite ( ) را فراخوانی کرده که می تواند متن یا کد HTML درون پرانتز مقابلش را بر روی صفحه چاپ می کند. بنابراین خروجی کد فوق به صورت زیر است.

Hello World!

وجود فاصله ( جای خالی ) بین کاراکترها و رفتن به خط بعدی را در دستورات جاوا اسکریپت

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

به کار بردن کاراکتر ; اختیاری است

معمولا هر خط کد یا دستور در جاوا اسکریپت، همانند آنچه در C++ یا Java دیده اید، با یک کاراکتر ; به پایان می رسد. اما در جاوا اسکریپت، چنانچه هر کد دستوری شما در یک خط جدا Line باشد، می توانید از به کار بردن کاراکتر; خودداری کنید. برای مثال در قطعه کد زیر، می توانید از به کار بردن ; در پایان هر دستور اجتناب نمایید.

<script language="javascript" type="text/javascript">‎

‎‎

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

<script language="javascript" type="text/javascript">‎

‎‎

نکته:

بهتر است عادت کرده از ; در کدهای خود استفاده نمایید.

 

جاوا اسکریپت یک زبان حساس به بزرگ یا کوچک بودن حروف می باشد. این بدان معناست که که کلمات کلیدی زبان، نام متغیرها یا توابع و هر واژه دیگری بایستی با رعایت بزرگ یا کوچک بودن حروف نوشته شوند. بنابراین کلمات Time، TIME و یا TiMe در این زبان با هم متفاوت می باشند.

 

قرار دادن توضیحات کدنویسی (comment) در جاوا اسکریپت

از توضیحات یا کامنت ها، برای تشریح کدهای خود و یا غیر فعال کرد موقت آنها استفاده می کنیم. این دستورها و متون توسط موتور جاوا اسکریپت اجرا نشده و خروجی بر روی صفحه ندارند. زبان جاوا اسکریپت از روشی همانند زبان C++ برای قرار دادن توضیحات در کدهای خود استفاده کرده و قانون های کلی زیر را داراست. هر متنی که بین یک // و پایان یک خط دستور قرار بگیرد، یک توضیح حساب می شود. هر متنی که بین یک /* و */ قرار بگیرد، توضیح حساب شده و می تواند حتی شامل چندین خط دستور باشد. جاوا اسکریپت، از کاراکتر ویژه زبان HTML جهت توضیحات پشتیبانی می کند.

 

فعال سازی جاوا اسکریپت در مرورگرها

تمامی مرورگرهای مطرح و به روز دنیا، دارای موتور پردازشگر جاوا اسکریپت به صورت پیش فرض بوده و این قابلیت در آنها فعال است. اما گاهی اوقات لازم می شود تا قابلیت جاوا اسکریپت را در مرورگرتان فعال و یا غیر فعال نمایید. در این درس قصد داریم تا نحوه فعال سازی و یا غیر فعال نمودن قابلیت جاوا اسکریپت در مرورگرهایIE ، FireFox وOpera را به شما آموزش دهیم.

 

جاوا اسکریپت و اینترنت اکسپلورر

مراحل زیر، نحوه روشن یا خاموش کردن قابلیت جاوا اسکریپت را در مرورگر IE نشان می دهد.

1. از منوی اصلی مرورگر، گزینه Tools > Internet Option را کلیک نمایید.
2. از کادر باز شده، لبه Security را انتخاب کنید.
3. دکمه Custom Level را کلیک نمایید.
4. منوی فوق را تا رسیدن به گزینه “ Security Option “ به سمت پایین اسکرول کنید.
5. دکمه رادیویی Enable را در زیر بخش Active Scripting ، برای فعال شدن قابلیت جاوا اسکریپت کلیک نمایید.
6. در نهایت دکمه Ok را زده و از پنجره خارج شوید.

نکته:

برای غیر فعال نمودن قابلیت جاوا اسکریپت، بایستی دکمه رادیویی Disable را در همان بخش Active Scripting انتخاب کنید.

جاوا اسکریپت در مرورگر Firefox :

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

1. از منوی برنامه، مراحل زیر را دنبال کنید : Tools > Options
2. گزینه Content را از پنجره باز شده انتخاب کنید.
3. گزینه Enable JavaScript را انتخاب کنید.
4. در نهایت دکمه ok را زده و پنجره را ببندید.

برای غیر فعال نمودن قابلیت جاوا اسکریپت در مرورگر Firefox ، بایستی تیک گزینه Enable JavaScript را بردارید.

Opera جاوا اسکریپت در مرورگر

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

مراحل زیر، نحوه روشن یا خاموش کردن قابلیت جاوا اسکریپت در مرورگر Opera را نشان می دهد.

1. از منوی اصلی مرورگر، مسیر زیر را طی کنید : Tools > Prefrences
2. گزینه Advanced را از پنجره باز شده انتخاب کنید.
3. از لیست آیتم های موجود، گزینه Content را انتخاب نموده و کادر انتخابی Enable JavaScript را علامت بزنید.
4. در نهایت دکمه Ok را زده و پنجره را ببندید.

برای غیر فعال نمودن قابلیت جاوا اسکریپت در مرورگر اپرا، کافی است تیک گزینه Enable JavaScript را در منوی اشاره شده بردارید.

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

گاهی اوقات ممکن است به دلیل قدیمی بودن مرورگر مورد استفاده کاربر و یا غیر فعال بودن قابلیت جاوا اسکریپت، مرورگر کدهای جاوا اسکریپت را به درستی اجرا نکرده و باعث تولید خروجی نا مطلوب در صفحه شود. برای این منظور، می توان با استفاده از تگ <noscript> <span =""> یک اقدام احتیاطی انجام داد تا در صورت عدم اجرای دستورات <span=""><>، دستور آن تگ اجرا نشود. این تگ بایستی بلافاصله پس از تگ <span=""><> در صفحه تعیین شده و حاوی پیامی به کاربر با مفهوم عدم اجرای اسکریپت ها باشد. مثال زیر نحوه استفاده از این تگ را نشان می دهد.

< html >

< body >

‎ < script language="javascript" type="text/javascript" >

‎ < /script ‎>

< noscript >

متاسفانه دستورات جاوا اسکریپت، در این مرورگر اجرا نمی شوند.

< /noscript >‎‎

< /body >

< /html >‎

 

آموزش محل قرارگیری دستورات جاوااسکریپت-javascript

محل قرارگیری دستورات جاوا اسکریپت

دستورات JavaScript را می توان در بخش های < body > و همچنین < head > یک سند HTML جای گذاری کرد.

تگ< script >

در HTML، کدهای جاوا اسکریپت را باید بین تگ های < script > و < /script > درج کرد (وارد کرد).

مثال:

< script >

document.getElementById("demo") = "My First JavaScript";

< /script >

نکته:

در مثال های پیشین خصیصه ی typeبرای تگ< script >بکار برده شده مانند این نمونه

< script type="text/javascript" >

در 5 ،HTMLکلیه ی مرورگر های موجود زبان پیش فرض اسکریپت نویسی JavaScript می باشد و از این رو نیازی به خصیصه ی (attribute) type نیست.

توابع و رخدادهای JavaScript

یک تابع / function در جاوا اسکریپت در واقع یک ساختمان یا مجموعه (block) ای از کدها است، که درست زمانی که لازم است اجرا می شوند. برای مثال، یک تابع ممکن است زمانی اجرا شود که رخدادی / event معین روی دهد درست مثل زمانی که کاربر موس را کلیک می کند.

قرار دادن کدهای جاوا اسکریپت در بخش< head >یا< body >

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

نکته:

توصیه می کنیم تمامی کدهای خود را در یک مکان واحد نگه دارید.

قراردهی کد جاوا اسکریپ در بخش< head >

در این مثال، یک تابع جاوا اسکریپت در بخش (بین تگ باز و بسته ی)< head > صفحه ی HTML قرار داده می شود. زمانی که روی دکمه کلیک می کنید تابع فراخوانده (invoke) می شود.

مثال:

< !DOCTYPE html >

< html >

< head >

< script >

function myFunction() {

document.getElementById("demo") = "Paragraph changed.";

}

< /script >

< /head >

< body >

< h1 >My Web Page< /h1 >

< p id="demo" >A Paragraph< /p >

< button type="button" ="myFunction()" >Try it< /button >

< /body >

< /html >

جای گذاری کدهای جاوا اسکریپت در بدنه ی HTML / قسمت < body >

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

مثال:

< !DOCTYPE html >

< html >

< body >

< h1 >My Web Page< /h1 >

< p id="demo" >A Paragraph< /p >

< button type="button" ="myFunction()" >Try it< /button >

< script >

function myFunction() {

document.getElementById("demo") = "Paragraph changed.";

}

< /script >

< /body >

< /html >

نکته:

توصیه می شود اسکریپت ها (Script) را در پایین (انتهای) المان < body > قرار دهید. این کار در حقیقت به بارگذاری هر چه بهتر صفحه کمک می کند، زیرا که نمایش HTML با بارگذاری اسکریپت ها مسدود نمی گردد.

قراردادن اسکریپت ها در فایل های خارجی

همچنین می توان اسکریپت ها را در فایل های خارجی جای گذاری کرد. اسکریپت های خارجی (external scripts) زمانی بیشترین کارایی را دارند که یک کد یکسان در بسیاری از صفحات وب بکار گرفته شده است. فایل های جاوا اسکریپت همگی دارای پسوند .jsهستند. جهت استفاده از یک اسکریپت که در فایل خارجی قرار داده شده باشد، کافی است اسم فایل اسکریپت را داخل خصیصه ی src (source) در تگ< script > قرار دهید.

مثال:

< !DOCTYPE html >

< html >

< body >

< script src="myScript.js" >< /script >

< /body >

< /html >

می توانید ارجاع (reference) به اسکریپت خارجی را مطابق میل خود در تگ های < head >یا < body > قرار دهید. اسکریپت مربوطه درست همانگونه عمل خواهد کرد که گویی دقیقاً همان جایی که تگ< script > قرار گرفته، جای گذاری شده.

توجه:

اسکریپت های خارجی نمی توانند دربردارنده ی تگ های < script > باشند.

مزایای استفاده از خاصیت قراردهی کدهای جاوا اسکریپت در فایل های خارجی

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

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

این آموزش ادامه دارد

آموزش طراحی سایت-آموزش CSS

سلام با آموزش طراحی سایت در خدمت شما هستیم , در قسمت قبل سر برگ در HTML‏ را یاد گرفتیم , در حال با ادامه آموزش طراحی سایت همراه باشید:

آموزش Cascading style sheet ‏ ‏

استایل شیت Cascading style sheet (CSS) بیان می کند که داکیومنت ها روی صفحه و در چاپ چگونه نشان داده می شوند، یا شاید چگونه بیان می شوند. از زمانی که کنسرسیوم در سال 1994 تاسیس شد، W3C به طور فعالانه ای در استفاده از Style sheet روی وب پیشرفت کرده است.
CSS جایگزین های ساده و موثری را برای تعیین ویژگی های مختلف برچسب های HTML ارائه می دهد. با استفاده از CSS شما می توانید تعدادی از ویژگی های طراحی را برای یک HTML ارائه شده تعیین کنید. هر ویژگی دارای نام مقدار میباشد که به وسیله ی علامت (:) از هم جدا شده اند. اطلاعیه ی مربوط به هر ویژگی نیز توسط علامت نقطه ویرگول (;) از یکدیگر جدا شده اند.

مثال:

ابتدا اجازه بدهید که مثالی از داکیومنت HTML را مورد بررسی قرار دهیم که برای تعیین رنگ و اندازه ی فونت از برچسب < font> استفاده می کند.

<p><font color="green" size="5">Hello, World!</font></p>

می توانیم با استفاده از style sheet مثال بالا را مانند زیر بازنویسی کنیم.

<p style="color:green;font-size:24px;">Hello, World!</p>

شما می توانید به سه روش از CSS در داکیومنت HTML خود استفاده کنید.

استایل Style sheet خارجی – قوانین style sheet را در یک فایل css مجزا تعریف می کند، و سپس آن فایل را با استفاده از برچسب در HTML وارد داکیومنت HTML شما می کند.

استایل Style sheet داخلی – قوانین style sheet را در با استفاده از برچسب< style>در بخش سربرگ داکیومنت HTML تعریف می کند.

استایل Inline style sheet – قوانین style sheet را مستقیما و به همراه عناصر HTML با استفاده از ویژگی style تعریف می کند.

اجازه بدهید هر سه مورد را یکی یکی و با استفاده از مثال های مناسب بررسی کنیم.

Style sheet خارجی

اگر می خواهید از style sheet خود در صفحات مختلف استفاده کنید، توصیه می شود که یک style sheet متداول در یک فایل مجزا تعریف کنید. یک فایل cascading style sheet دارای ضمیمه هایی مانند css می باشد و با استفاده از برچسب < link> وارد فایل های HTML خواهد شد.

توجه داشته باشید که ما یک فایل style sheet به نام style.css که دارای قوانین زیر می بشد، تعریف می کنیم.

.red{

   color: red;

}

.thick{

   font-size:20px;

}

.green{

   color:green;

}

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

!DOCTYPE html>

< html>

< head>

< title>HTML External CSS< /title>

<link rel="stylesheet" type="text/css" href="/html/style.css">

< /head>

< body>

< p class="red">This is red< /p>

< p class="thick">This is thick< /p>

< p class="green">This is green< /p>

< p class="thick green">This is thick and green< /p>

< /body>

< /html>

این مثال نتیجه ی زیر را تولید خواهد کرد.

This is red

This is thick

This is green

This is thick and green

Style sheet داخلی

اگر می خواهید قوانین style sheet را برای یک داکیومنت مجزا به کار ببرید، فقط آن موقع است که می توانید این قوانین را با استفاده از برچسب< style>وارد بخش سربرگ داکیومنت HTML کنید.
قوانین تعریف شده در style sheet داخلی، قوانین تعریف شده در فایل CSS خارجی را نیز در بر می گیرد.

مثال:

اجازه بدهید مثال بالا را یک بار دیگر بازنویسی کنیم، اما در اینجا قوانین style sheet را در همان داکیومنت HTML و با استفاده از برچسب< style>می نویسیم.

<style type="text/css">

.red {

color: red;

}

.thick {

font-size: 20px;

}

.green {

color: green;

}

</style>

شما می توانید با استفاده از ویژگی style از برچسب مربوطه، قوانین style sheet را مستقیما برای هر عنصر HTML به کار برید. این امر فقطزمانی می تواند انجام شود که شما علاقمند به ایجاد تغییرات خاص در هرکدام از عناصر HTML می باشید.
قوانین تعریف شده با عنصر درون خطی، قوانین تعریف شده در یک فایل CSS خارجی و نیز قوانین تعریف شده در یک عنصر< style>را در برمی گیرد. اجازه بدهید مثال بالا را یک بار دیگر بازنویسی کنیم، اما این بار قوانین style sheet را همراه با قوانین HTML و با استفاده از ویژگی style در عناصر خواهیم نوشت.

<p style="color:red;">This is red</p>

<p style="font-size:20px;">This is thick</p>

<p style="color:green;">This is green</p>

<p style="color:green;font-size:20px;">This is </p>

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

آموزش طراحی سایت:آموزش طراحی وب

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

پس زمینه در html

سلام با آموزش طراحی سایت در خدمت شما هستیم , در قسمت قبل آموزش HTML لینک های عکس در html , لینک های متنی , لینک ایمیل در HTML و قابها در html را یاد گرفتیم , در قسمت نهم با ادامه آموزش HTML همراه باشید:

پس زمینه در html

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

• زمینه ی HTML با رنگ ها.
• زمینه ی HTML با تصاویر.

اکنون اجازه بدهید هر دو روش را یکی یکی و با استفاده از مثال های مناسب بررسی کنیم.

زمینه ی HTML با رنگها

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

< tagname bgcolor="color_value" ...>

این color- value می تواند به هرکدام از فرمت های زیر ارائه شود.

<!-- Format 1 - Use color name -->

< table bgcolor="lime">

<!-- Format 2 - Use hex value -->

< table bgcolor="#f1f1f1">

<!-- Format 3 - Use color value in RGB terms -->

< table bgcolor="rgb(0,0,120)">

مثال:

در اینجا مثالی را می بینید از تنظیم زمینه ی یک برچسب HTML.

نمونه یک

<table bgcolor="yellow" width="100%">

<tbody><tr>

<td>

This background is yellow

</td>

</tr>

</tbody></table>

زمینه ی HTML با تصاویر

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

توجه:

ویژگی background به عنوان ویژگی خوبی تلقی نمی شود و توصیه می شود از style sheet برای تنظیم زمینه استفاده کنید.

< tagname background="Image URL" ...>

متداول ترین فرمت های مورد استفاده ی تصویر عبارتند از JPEG، PNG و GIF.

مثال:

در اینجا مثال هایی را از تنظیم تصویر به عنوان زمینه ی جدول مشاهده می کنید.

نمونه دو

This background is filled up with HTML image.

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

زمینه های طرح دار و شفاف

شما ممکن است الگوها و زمینه های شفاف بسیاری را در وب سایت های نختلف دیده باشید. این امر به راحتی و با استفاده از تصاویر طرح دار و شفاف در زمینه قابل دستیابی می باشد. توصیه می شود در هنگام ایجاد تصاویر طرح دار یا شفاف GIF یا PNG، از کوچکترین ابعاد ممکن آنها استفاده کنید، حتی به کوچکی 1x1 برای جلوگیری از بارگذاری آهسته.

مثال:

در اینجا مثالی از تنظیم یک الگوی زمینه برای یک جدول را مشاهده می کنید.

نمونه سه

This background is filled up with a pattern image.

رنگ در html:

رنگ ها برای دادن یک ظاهر و احساس خوب به وب سایت شما بسیار مهم می باشند. شما می توانید رنگ ها را روی لایه ی صفحه با استفاده از برچسب < body>مشخص کنید، یا می توانید رنگ ها را برای برچسب های مجزا با استفاده از ویژگی bgcolor مشخص کنید.
برچسب< body>دارای ویژگی های زیر می باشد که می تواند برای تنظیم رنگ های مختلف استفاده شود.

bgcolor

رنگی را برای زمینه ی صفحه تنظیم می کند.

text

رنگی را برای متن تنظیم می کند

alink

رنگی را برای لینک های فعال یا انتخاب شده تنظیم می کند.

link

رنگی را برای متن لینک شده تنظیم می کند.

رنگی را برای لینک های بازدید شده تنظیم می کند- یعنی برای متن لینک شده که روی آن کلیک کرده اید.

روش های کدگذاری رنگ HTML

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

Color names -

می توانید نام رنگ ها را به طور مستقیم تعیین کنید، به عنوان مثال سبز، قرمز، آبی و غیره.

Hex codes -

یک کد شش رقمی که نشان دهنده ی مقدار آبی، قرمز و سبز سازنده ی رنگ، می باشد.

Color decimal or percentage values-

این مقدار با استفاده از ویژگی rgb( ) تعیین می شود.

اکنون این روش های رنگ گذاری را یکی یکی بررسی خواهیم کرد.

رنگ های HTML – نام رنگ

می توانید برای تنظیم رنگ متن یا زمینه به طور مستقیم از نام رنگ استفاده کنید. W3C لیستی از 16 رنگ پایه را دارد که توسط یک اعتباز سنج HTML ارزیابی می شود، اما نام بیشتر از 200 رنگ مختلف وجود داردکه توسط مرورگرهای مهم پشتیبانی می شوند.

16 رنگ استاندارد W3C

در اینجا نام 16 رنگ استاندارد W3C را مشاهده می کنید، پیشنهاد می شود که از آنها استفاده کنید.

16 رنگ استاندارد W3C

مثال:

در اینجا مثال هایی را میبینید از تنظیم زمینه ی یک برچسب HTML به وسیله ی نام رنگ.

نمونه یک

<p>Use different color names for for body and table and see the result.</p>

رنگ های HTML – کدهای Hex

هگزادسیمال یک نمایش 6 رقمی از یک رنگ می باشد. دو رقم اول یعنی RR نمایانگر رنگ قرمر (Red) می باشند، دو رقم بعدی (GG) مقدار سبز (green) را نشان می دهند و آخرین دو رقم (BB) نیز مقدار آبی (blue) را نشان می دهند.
هر کد هگزادسیمال به وسیله ی یک علامت # دنبال می شود. در ادامه رنگ های مورد استفاده در نشانه گذاری هگزادسیمال را مشاهده می کنید.

در زیر مثال هایی را می بینیند از تنظیم زمینه ی یک برچسب HTML به وسیله ی کد رنگ در هگزادسیمال.

نمونه دو

<p>Use different color hexa for for body and table and see the result.</p>

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

رنگ های HTML – مقادیر RGB

مقدار این رنگ با استفاده از ویژگی rgb( ) مشخص می شود. این ویژگی سه مقدار می گیرد که هر کدام برای سبز، قرمز و آبی می باشد. مقدار می تواند عددی بین 0 و 255 یا یک درصد باشد.

توجه:

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

در زیر لیستی از رنگ ها با مقادیر RGB را مشاهده می کنید.

رنگ های HTML – مقادیر RGB

در اینجا مثال هایی را مشاهده می کنید از تنظیم زمینه ی یک برچسب HTML به وسیله ی برچسب rgb() با کد رنگ.

نمونه سه

<p>Use different color code for for body and table and see the result.</p>

در زیر لیستی از 216 رنگ را مشاهده می کنید که تصور می شود سالم ترین و مستقل ترین رنگ های کامپیوتر باشند. این رنگ ها از کد هگزای 000000 تا FFFFFF متفاوت می باشند و توسط همه ی کامپیوترهای دارای پالت رنگ 256 تایی پشتیبانی می شوند.

فونت ها:

فونت ها نقش مهمی در زیبا ساختن و خواناتر کردن وب سایت بازی می کنند. ظاهرو رنگ فونت به طور کامل بستگی به کامپیوتر و مرورگری دارد که استفاده می شود، اما شما می توانید از برچسب < font>در HTML برای افزودن استایل، سایز و رنگ به متن خود در وب سایت استفاده کنید. می توانید از یک برچسب< basefont> برای تنظیم تمام متن خود به اندازه، ظاهر و رنگ یکسان استفاده کنید.
برچسب فونت دارای سه ویژگی به نام های size، color و face می باشد که فونت شکا را به دلخواه در می آورد. برای تغییر هرکدام از ویژگی های فونت در هر زمانی در صفحه ی وب خود، به سادگی از برچسب < font> استفاده کنید. متنی که دنبال می کند، تغییر یافته با قی می ماند تا زمانی که شما آن را با < /font> برچسب ببندید. شما می توانید یکی از ویژگی ها یا همه ی ویژگی های داخل برچسب < font> را تغییر دهید.

نکته:

برچسب های font و basefont استفاده نمی شوند و احتمال می رود که در ورژن های بعدی HTML حذف شوند. بنابراین نباید مورد استفاده قرار بگیرند، پیشنهاد می شود که برای اجرای فونت های خود از استایل های CSS استفاده کنید. اما برای رسیدن به هدف این فصل برچسب های font و basefont رابا جزئیات توضیح می دهد.

تنظیم اندازه ی فونت

شما می توانید با استفتده از ویژگی size اندازه فونت محتوا را تنظیم کنید. دامنه ی مقادیر قابل قبول از 1 (کوچکترین) تا 7 (بزرگترین) می باشد. اندازه ی فونت پیش فرض 3 می باشد.

مثال:

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

نمونه یک

<font size="1">Font size="1"</font><br>

<font size="2">Font size="2"</font><br>

<font size="3">Font size="3"</font><br>

اندازه ی فونت مربوط

شما می توانید مشخص کنید چه تعداد از فونت ها بزرگتر و چه تعداد کوچکتر از اندازه ی فونت حاضر باشند. می توانید آن را مانند< font size="+n"> or < font size="-n"> مشخص کنید.

مثال:

نمونه دو

<font size="-1">Font size="-1"</font><br>

<font size="+1">Font size="+1"</font><br>

<font size="+2">Font size="+2"</font><br>

تنظیم ظاهر فونت

شما می توانید با استفاده از ویژگی face ظاهر فونت را تنظیم کنید، اما باید بدانید که اگر کاربر بازدیدکننده ی صفحه، فونت را نصب نکرده باشد، قادر به دیدن آن نخواهد بود. در عوض کاربر ظاهر فونت پیش فرض را می بیند که برای کامپیوترش مناسب می باشد.

مثال:

نمونه سه

<font face="Times New Roman" size="5">Times New Roman</font><br>

<font face="Verdana" size="5">Verdana</font><br>

<font face="Comic sans MS" size="5">Comic Sans MS</font><br>

تعیین ظاهر فونت جایگزین

یک بازدید کننده فقط قادر خواهد بود فونت شما را ببیند، اگر آن را نصب شده روی کامپیوتر خود داشته باشد. بنابراین امکان تعیین دو یا بیشتر از دو ظاهر جایگزین با ارائه ی نام های مربوط به فونت ها وجود دارد.

< font face="arial,helvetica">

< font face="Lucida Calligraphy,Comic Sans MS,Lucida Console">

اگر هیچکدام از فونت های ارائه شده نصب نشده باشند، بنابراین فونت پیش فرض Times New Roman نمایش داده خواهد شد.

تنظیم رنگ فونت

شما می توانید با استفاده از ویژگی color هر رنگی رابرای فونت تنظیم کنید. شما می توانید رنگ مورد نظر خود را یا با استفاده از نام رنگ و یا با استفاده از کد هگزادسیمال برای آن رنگ تعیین کنید.

مثال:

نمونه چهار

<font color="#FF00FF">This text is in pink</font><br>

عنصر < basefont>

انتظار می رود که عنصر < basefont> یک اندازه، رنگ و ظاهر پیش فرض برای هر بخشی از داکیومنت که در برچسب < font>قرار نمی گیرند، تنظیم کند. شما می توانید از عناصر < font>استفاده کنید تا تنظیمات < basefont> را انجام دهید.
برچسب < basefont> همچنین ویژگی های رنگ، اندازه و ظاهر را می گیرد و با دادن مقدار بیشتر از 1+ برای فونت های بزرگتر و کمتر از 2- برای فونت های کوچکتر، تنظیمات فونت مربوطه را پشتیبانی می کند.

مثال:

نمونه پنج

<basefont face="arial, verdana, sans-serif" size="2" color="#ff0000">

<p>This is the page's default font.</p>

<h2>Example of the <basefont> element<="" h2=""></basefont>></h2>

پایان بخش نهم آموزش طراحی سایت

آموزش طراحی سایت:صفر تا 100

سلام با آموزش طراحی سایت در خدمت شما هستیم , در قسمت قبل آموزش HTML لیست List , لینک های متنی را یاد گرفتیم , در قسمت هشتم با ادامه آموزش HTML همراه باشید:

آموزش لینک های عکس در html

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

مثال:

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

نمونه یک

<img src="012.jpg " alt=" tahlildadeh " border="0">

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

تصاویر حساس به ماوس

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

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

سرور Server-side image maps - توسط ویژگی ismap از برچسب < img> فعال می شود و دستیابی به یک سرور و پردازش برنامه های مربوط به تصویر نقشه لازم می باشد.

کلاینت Client-side image maps - با استفاده از ویژگی usemap از برچسب < img> همراه با برچسب های متناظر< map> و < area> ایجاد می شود.

Server side image maps

در اینجا به سادگی تصویر خود را داخل یک هایپرلینک قرار داده و از ویژگی ismap استفاده کنید که آن را یک تصویر خاص می سازد و وقتی یوزر در بخشی از تصویر کلیک می کند، مرورگر مختصات اشاره گر ماوس را همراه با URL مشخص شده در برچسب < a>به سرور وب منتقل می کند. سرور از مختصات اشاره گر ماوس استفاده می کند تا تعیین کند کدام داکیومنت باید به مرورگر بازگردانده شود.
زمانی که ismap استفاده می شود، ویژگی href از برچسب < a> باید URL یک برنامه ی سرور را مانند یک cgi یا اسکریپت PHP و غیره در برداشته باشد، تا درخواست ورودی را براساس مختصات انتقال داده شده پردازش کند. مختصات موقعیت ماوس پیکسل های صفحه میباشند که از گوشه ی بالای سمت چپ تصویر شمرده می شوند و با (0,0) شروع می شوند. مختصات دنبال شده با یک علامت سوال، به انتهای URL اضافه می شوند.

مثال:

نمونه دو

<a href="Exp1.html" target="_self">

<img ismap="" src="logo.png" alt="tahlildadeh" border="0">

</a>

سپس مرورگر پارامترهای جستجوی زیر را به سرور می فرستد که می تواند توسط اسکریپت ismap.cgi یا فایل map پردازش شود و شما می توانید هر داکیومنتی را که دوست داشته باشید به این مختصات لینک کنید.

/cgi-bin/ismap.cgi?20,30

از این طریق شما می توانید لینک های مختلفی را به مختصات متفاوت یک تصویر اختصاص دهید، و وقتی این مختصات کلیک می شوند، می توانید داکیومنت های لینک شده ی متناظر را باز کنید.

Client side image maps

این تصاویر به وسیله ی ویژگی usemap از برچسب < img> فعال می شوند و به وسیله ی برچسب های ضمیمه ی< map>و< area> تعریف می شوند.
نقشه ای که قرار است نقشه را طراحی کند، به وسیله ی< img> به عنوان یک تصویرعادی وارد صفحه می شود، به جز اینکه این مورد ویژگی اضافه ای به نام usemap همرا خود دارد. مقدار ویژگی usemap مقداری می باشد که در یک برچسب< map>استفاده می شود تا برچسب های تصویر و نقشه را لینک کند.< map>همراه با برچسب های< area> همه ی مختصات تصویر و لینک های مربوطه را تعریف می کند.
برچسب< area> در داخل برچسب نقشه مختصات و شکل حاشیه های قابل کلیک در داخل تصویر را تعریف می کند. در اینجا مثالی از تصویر نقشه می بینید.

نمونه سه

<map name="planetmap">

<area shape="rect" coords="0,0,40,126" href=" 02.jpg">

<area shape="circle" coords="90,58,20" href=" 04.jpg">

<area shape="circle" coords="124,78,20" href=" 05.jpg">

</map>

سیستم مختصات

مقدار حقیقی مختصات کانلا به شکل در سوال وابسته است. در اینجا خلاصه ای می بینید که قرار است با مثال های مفصل دنبال شوند.

rect = x1 , y1 , x2 , y2

ایکس x1 و y1 مختصات گوشه ی بالای سمت چپ از مستطیل می باشد. x2 و y2 مختصات گوشه ی سمت راست پایین می باشند.

circle = xc , yc , radius

ایکس xc و yc مختصات مرکز دایره و radius شعاع دایره می باشد. دایره ای به مرکز200,50 با شعاع 25 دارای ویژگی coords="200,50,25" خواهد بود.

poly = x1 , y1 , x2 , y2 , x3 , y3 ,... xn , yn

جفت های مختلف x-y رئوس چند ضلعی می باشند، با یک خط که از یک نقطه به نقطه ی دیگر کشیده شده. یک چندضلعی لوزی شکل با بالاترین راس آن در نقطه ی 20،20 و 40 پیکسل، در عریض ترین نقطه ی خود دارای ویژگی coords="20,20,40,40,20,60,0,40" می باشد.
تمام مختصات مربوط به بالاترین گوشه ی سمت چپ تصویر می باشند. هر شکل دارای یک URL مربوطه می باشد. می توانید از هر نرم افزار تصویری برای دانستن مختصات موقعیت های مختلف استفاده کنید.

آموزش لینک ایمیل در HTML

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

قرار دادن یک لینک ایمیل HTML روی صفحه ی وب خود کار سختی نیست، اما این کار ممکن است باعث بروز مشکل اسپم های غیرضروری در اکانت ایمیل شما شود. افرادی هستند که می توانند برنامه هایی را برای جمع آوری چنین ایمیل هایی اجرا کنند و سپس آنها را با راه های مختلف برای اسپم کردن استفاده کنند.
می توانید از گزینه دیگری استفاده کنید تا افراد به راحتی بتوانند به شما ایمیل ارسال کنند. یک گزینه می تواند استفاده از فرم های HTML باشد برای جمع آوری داده های یوزر و سپس استفاده ازاسکریپت PHP یا CGI برای ارسال ایمیل.
برای یک مثال ساده، فرم Contact Us را چک کنید. با استفاده از این فرم یک فیدبک از یوزر گرفته و سپس از یک برنامه ی CGI استفاده می کنیم که در حال جمع آوری این اطلاعات و ارسال ایمیل به یک email ID ارائه شده می باشد.

برچسب HTML Email

برچسب < a> در HTML برای مشخص کردن یک آدرس ایمیل و ارسال ایمیل، گزینه هایی را به شما ارائه می دهد. در حالیکه از برچسب < a> به عنوان یک email tag استفاده می کنید، از mailto:email address همراه با ویژگی href نیز استفاده خواهید کرد. در زیر ترکیب استفاده از mailto را به جای استفاده از http می بینید.

نمونه یک

<a href="mailto:[e-mail]">Send Email</a>

اکنون اگر یوزر روی این لینک کلیک کند، email client آغاز به کار خواهد کرد ( مانند lotus notes و outlook express و غیره.) که روی کامپیوتر شما نصب شده است. ریسک دیگری در استفاده از این گزینه برای ارسال ایمیل وجود دارد، زیرا اگر یوزر email client نصب شده روی کامپیوتر خود نداشته باشد، ارسال ایمیل ممکن نحواهد بود.

تنظیمات پیش فرض

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

نمونه دو

<a href="mailto:[e-mail]?subject=Feedback&body=Message">

Send Feedback

</a>

آموزش قابها در html

قاب های HTML برای تقسیم پنجره ی مرورگر شما به چند بخش استفاده می شوند که هر بخش می تواند یک داکیومنت مجزای HTML رابارگذاری کند. مجموعه ای از چارچوب ها در پنجره ی مروگر به عناون frameset شناخته می شوند. به روش مشابهی که جدول ها سازماندهی می شوند، پنجره نیز به چارچوب های مختلف تقسیم می شود: در ستون ها و ردیف ها.

نقطه ضعف های چارچوب ها:

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

ایجاد چارچوب ها:

برای استفاده از چارچوب ها در یک صفحه از برچسب < frameset> به جای < body>استفاده می کنیم. برچسب< frameset> چگونگی تقسیم پنجره به چارچوب را تعریف می کند. ویژگی rows از برچسب < frameset> چارچوب های افقی و ویژگی cols نیز چارچوب های عمودی را تعریف می کنند. هر چارچوب توسط برچسب < frame> نشان داده شده است و تعریف می کند که کدام داکیومنت HTML باید در داخل چارچوب باز شود.

مثال:

در زیر مثالی را برای ایجاد سه چارچوب افقی می بینید.

نمونه یک

<!DOCTYPE html>

<html xmlns="http://www.w3.org/1999/xhtml">

<head>

<title>HTML Frames</title>

</head>

<frameset rows="25%,50%,25%">

<frame name="left" src="http://tahlildadeh.com/Temp/Html/top_frame.htm" />

<frame name="center" src="http://tahlildadeh.com/Temp/Html/main_frame.htm" />

<frame name="right" src="http://tahlildadeh.com/Temp/Html/bottom_frame.htm" />

<noframes>

<body>

Your browser does not support frames.

</body>

</noframes>

</frameset>

ویژگی های برچسب < frameset>:

ویژگی های برچسب < frame>

مرورگرهایی که frame ها را پشتیبانی می کنند

اگر کاربر از مرورگرهای قدیمی یا مرورگرهایی استفاده کند که frame را پشتیبانی نمی کنند، عنصر < noframes>باید به یوزر نمایش داده شود. بنابراین شما باید یک عنصر < body>را داخل عنصر < noframes>قرار دهید، زیرا تصور می شود که عنصر< frameset>جایگزین عنصر< body>می شود. اما اگر یک مرورگر < frameset>را درک نکند، بنابراین باید آنچه را که داخل عنصر< body>می باشد درک کند که حاوی عنصر < noframes>می باشد.
شما می توانید به یوزرهای خود که از مرورگرهای قدیمی استفاده می کنند، پیام هایی بدهید. برای مثال پیام Sorry!! your browser does not support frames. ، همانطور که در مثال بالا نشان داده شده است.

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

نام frame و ویژگی های target

یکی از محبوب ترین موارد استفاده از frame قرار دادن نوارهای مسیریابی در یک frame و سپس بارگذاری صفحات اصلی در یک frame مجزا می باشد.

مثال:

اجازه بدهید مثال زیر را بررسی کنیم که داری کد زیر می باشد:

نمونه دو

<p>Your browser does not support frames.</p>

در اینجا دو ستون ایجاد کرده ایم که قرار است با دو ستون پر شوند. اولین frame دارای عرض 200 پیکسل می باشد و حاوی نوار منوی مسیر یابی می باشد که توسط فایل menu.htm اجرا می شود. دومین ستون فضای باقیمانده را پر کرده و حاوی بخش اصلی صفحه خواهد بود و توسط فایل main.htm اجرا می شود. برای هرسه لینک موجود در نوار منو یک frame هدف به عنوان main_page ذکر کرده ایم، بنابراین هر زمان روی لینک های موجود در نوار منو کلیک کنید، لینک موجود در main_page باز خواهد شد.
در زیر محتوای فایل menu.htm را مشاهده می کنید.

نمونه سه

<p><a href="http://www.google.com" target="main_page">Google</a><br>

<br>

<a href="http://www.microsoft.com" target="main_page">Microsoft</a></p>

<p> </p>

<p> </p>

<p> </p>

در زیر محتوای فایل main.htm را مشاهده می کنید.

نمونه چهار

<h3>This is main page and content from any link will be displayed here.</h3>

<p>So now click any link and see the result.</p>

اکنون می توانید لینک های موجود در پنل چپ را کلیک کرده و نتیجه را مشاهده کنید. ویژگی target نیز یکی از مقادیر زیر را می گیرد:

آموزش Iframes در html

شما می توانید یک frame درون خطی را با استفاده از برچسب < iframe>مربوط به HTML تعریف کنید. این برچسب به برچسب < frameset>ارتباطی ندارد، در عوض می تواند در هرجایی در داکیومنت شما ظاهر شود. برچسب< iframe>یک محدوده ی مستطیلی را در داخل داکیومنت تعریف می کند که در آن مرورگر می تواند یک داکیومنت مجزا را ارائه دهد، مانند نوارهای اسکرول و حاشیه ها.
ویژگی src برای مشخص کردن URL مربوط به داکیومنتی استفاده می شود که حاوی frame درون خطی می باشد.

مثال:

در زیر مثالی را می بینید که چگونگی استفاده از < iframe> را توضیح می دهد.

<iframe src="/html/menu.htm" width="555" height="200" __idm_frm__="45">

Sorry your browser does not support inline frames.

</iframe>

ویژگی های برچسب < iframe>

بسیاری از ویژگی های برچسب < iframe> شامل نام، گروه، حاشیه، id، longdesk، طول حاشیه، عرض حاشیه، نام، اسکرول کردن، روش و تیتر، درست مانند ویژگی های متناظر با برچسب < frame> رفتار می کنند.

" />

ویژگی های برچسب < iframe></figcaption>

پایان بخش هشتم آموزش طراحی سایت

آموزش طراحی سایت:قسمت هفتم

آموزش List

سلام با آموزش طراحی سایت در خدمت شما هستیم , در قسمت قبل آموزش HTML طراحی جدول را یاد گرفتیم , در قسمت هفتم با ادامه آموزش HTML همراه باشید:

آموزش List

اچ تی ام ال HTML سه روش برای مشخص کردن لیست هایی از اطلاعات ارائه می دهد. تمام لیست ها باید شامل یک یا بیشتر ازیک عنصر باشند. لیست ها ممکن است شامل موارد زیر شوند.

< ul>

لیست بدون ترتیب. این لیست آیتم ها را با استفاده از bullet های ساده لیست می کند.

< ol>

لیست منظم. این لیست از نمودارهای عددی مختلف برای لیست کردن آیتم های شما استفاده می کند.

< dl>

لیست تعریف. این لیست آیتم های شما را به همان روشی که در دیکشنری منظم شده اند، منظم می کند.

لیست های بدون ترتیب HTML

لیست بدون ترتیب مجموعه ای از آیتم های مربوط به هم می باشد که هیچگونه نظم و ترتیب خاصی ندارند. این لیست با استفاده از برچسب < ul> در HTML ایجاد می شود. هر آیتم در لیست با یک bullet مشخص می شود.

مثال:

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

نمونه یک

<ul>

<li>Beetroot</li>

<li>Ginger</li>

<li>Potato</li>

<li>Radish</li>

</ul>

ویژگی type

می توانید از ویژگی type برای برچسب < ul> استفاده کنید تا نوع bullet خود را مشخص کنید، که به طور پیش فرض یک دیسک می باشد. در زیر گزینه های ممکن را مشاهده می کنید.

<ul type="square">

<ul type="disc">

<ul type="circle"></ul></ul></ul>

در زیر مثالی را میبینید که در آن از < ul type="square"> استفاده می کنیم.

نمونه دو

<ul type="square">

<li>Beetroot</li>

<li>Ginger</li>

<li>Potato</li>

<li>Radish</li>

</ul>

در زیر مثالی را می بینید که در آن از < ul type="disc"> استفاده کرده ایم.

نمونه سه

<ul type="disc">

<li>Beetroot</li>

<li>Ginger</li>

<li>Potato</li>

<li>Radish</li>

</ul>

در زیر مثالی را می بینید که در آن از < ul type="circle"> استفاده کرده ایم.

نمونه چهار

<ul type="circle">

<li>Beetroot</li>

<li>Ginger</li>

<li>Potato</li>

<li>Radish</li>

</ul>

لیست های منظم HTML

اگر تمایل دارید آیتم های خود را به جای قرار دادن در یک لیست دارای bullet، در یک لیست عددگذاری شده قرار دهید، می توانید از لیست منظم HTML استفاده کنید. این لیست با استفاده از برچسب < ol> ایجاد می شود. شماره گذاری از یک شروع شده و برای هر لیست منظم عنصر بعدی با اضافه شدن یک عدد و به همراه برچسب< li>اضافه می شود.
می توانید از ویژگی type برای برچسب < ol> استفاده کنیم تا نوع شماره گذاریمورد نظر خود را مشخص کنید. به طور پیش فرض شماره گذاری به وسیله ی عدد انجام می شود. در زیر گزینه های ممکن را مشاهده می کنید.

<ol type="1">

- Default-Case Numerals.

<ol type="I">

- Upper-Case Numerals.

<ol type="i">

- Lower-Case Numerals.

<ol type="a">

- Lower-Case Letters.

<ol type="A"> - Upper-Case Letters.</ol></ol></ol></ol></ol>

در زیر مثالی را می بینید که در آن از < ol type="1"> استفاده کرده ایم.

نمونه پنج

<ol type="1">

<li>Beetroot</li>

<li>Ginger</li>

<li>Potato</li>

<li>Radish</li>

</ol>

در زیر مثالی را می بینید که در آن از < ol type="I"> استفاده می کنیم.

نمونه شش

<ol type="I">

<li>Beetroot</li>

<li>Ginger</li>

<li>Potato</li>

<li>Radish</li>

</ol>

در زیر مثالی را میبینید که در آن از < ol type="i"> استفاده کرده ایم.

نمونه هفت

<ol type="i">

<li>Beetroot</li>

<li>Ginger</li>

<li>Potato</li>

<li>Radish</li>

</ol>

مثال:

در زیر مثالی را می بینید که در آن از < ol type="A"> استفاده کرده ایم.

<ol type="A">

<li>Beetroot</li>

<li>Ginger</li>

<li>Potato</li>

<li>Radish</li>

</ol>

در زیر مثالی را می بینید که در آن از< ol type="a"> استفاده کرده ایم.

نمونه نه

<ol type="a">

<li>Beetroot</li>

<li>Ginger</li>

<li>Potato</li>

<li>Radish</li>

</ol>

ویژگی start

شما می توانید از ویژگی start برای برچسب < ol> استفاده کنید تا نقطه ی شروع شماره گذاری خود را مشخص کنید. در زیر گزینه های ممکن را مشاهده می کنید.

<ol type="1" start="4">

- Numerals starts with 4.

<ol type="I" start="4">

- Numerals starts with IV.

<ol type="i" start="4">

- Numerals starts with iv.

<ol type="a" start="4">

- Letters starts with d.

<ol type="A" start="4"> - Letters starts with D.

</ol></ol></ol></ol></ol>

در زیر مثالی را می بینید که در آن از < ol type="i" start="4"> استفاده می کنیم.

نمونه ده

<ol type="i" start="4">

<li>Beetroot</li>

<li>Ginger</li>

<li>Potato</li>

<li>Radish</li>

</ol>

اچ تی ام ال HTML و XHTML لیست هایی به نام لیست های تعریف را پشتیبانی می کنند که در این لیست ها ورودی ها مانند ترتیب لغات در دیکشنری قرار می گیرند. این لیست یک روش ایده آل برای ارائه یک فهرست از معانی یا لیستی از اصطلاحات یا لیستی از نام ها و مقادیر می باشد.
لیست تعریف از سه برچسب زیر استفاده می کند

< dl> -

شروع لیست را تعریف می کند.

مثال:

نمونه یازده

<dl>

<dt><b>HTML</b></dt>

<dd>This stands for Hyper Text Markup Language</dd>

<dt><b>HTTP</b></dt>

<dd>This stands for Hyper Text Transfer Protocol</dd>

</dl>

آموزش لینک های متنی

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

لینک کردن داکیومنت ها

یک لینک با استفاده از برچسب < a> در HTML تعیین می شود. این برچسب anchor tag نامیده می شود و هر چیزی بین برچسب آغازین < a> و پایانی < /a> بخشی از لینک می شود و یک یوزر می تواند آن بخش را کلیک کرده تا به داکیومنت لینک شده برسد. در زیر ترکیب ساده ی استفاده از برچسب < a> را می بینید.

<a href="Document URL" ...="" attributes-list="">Link Text</a>

مثال:

اجازه دهید مثال زیر را امتحان کنیم که http://www.tahlildadeh.com را در صفحه ی شما لینک می کند.

نمونه یک

<p>Click following link</p>

<a href="http://www.tahlildadeh.com" target="_self">Tahlildadeh</a>

این مثال نتیجه ی زیر را تولید خواهد کرد که شما می توانید روی لینک تولید شده ی tahlildadeh کلیک کنید تا به صفحه ی اصلی tahlildadeh برسید.
Click following link

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

ویژگی target

ما از ویژگی target در مثال قبلی خود استفاده کردیم . این ویژگی برای مشخص کردن موقعیتی که داکیومنت لینک شده باز می شود، مورد استفاده قرار می گیرد. در زیر گزینه های ممکن را مشاهده می کنید.

مثال:

برای درک تفاوت اصلی در برخی گزینه های ارائه شده در ویژگی target مثال زیر را امتحان کنید.

<base href="http://www.tahlildadeh.com/">

<p>Click any of the following links</p>

<a href="http://www.tahlildadeh.com" target="_blank">Opens in New</a>

این مثال نتیجه ی زیر را تولید خواهد کرد که می توانید روی لینک های مختلف کلیک کنید تا تفاوت بین گزینه های مختلف ارائه شده برای ویژگی target را درک کنید.

Click any of the following links

Opens in New | Opens in Self | Opens in Parent | Opens in Body

استفاده از مسیر پایه

وقتی که شما داکیومنت های HTML را متناسب با همان وب سایت لینک می کنید، ارائه ی یک URL کامل برای هر لینک ضروری نیست. اگر از برچسب در تیتر داکیومنت HTML خود استفاده می کنید، می توانید از دست آن خلاص شوید. این برچسب برای ارائه ی یک مسیر پایه برای همه ی لینک ها استفاده می شود. بنابراین مرورگر شما مسیر ارائه شده ی مرتبط را به مسیر پایه پیوند خواهد داد و یک URL کامل ایجاد خواهد کرد.

مثال:

مثال زیر از برچسب < base> برای مشخص کردن URL پایه استفاده می کند و پس از آن ما می توانیم به جای ارائه ی URL کامل برای هر لینک از مسیرهای مرتبط استفاده کنیم.

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

نمونه سه

<a href="http://www.tahlildadeh.com" target="_blank">HTML tahlildadeh</a>

ین مثال نتیجه ی زیر را تولید خواهد کرد که می توانید روی لینک تولید شده ی HTML tahlildadeh کلیک کنید تا به آموزش HTML برسید.
اکنون URL ارائه شده ی < a href="http:/WebsiteNews/TahlildadeNews.aspx> باعنوان < a href=" http //www.tahlildadeh.com/WebsiteNews /TahlildadeNews.aspx"> در نظر گرفته می شود

لینک شدن به بخشی از صفحه

می توانید برای بخش خاصی از صفحه ی وب ارائه شده، با استفاده از ویژگی name یک لینک ایجاد کنید. این امر یک فرایند دو مرحله ای می باشد.
نخست اینکه در مکانی که می خواهید به داخل صفحه ی وب برسید یک لینک ایجاد کنید و آن را با استفاده از برچسب < a...> نام گذاری کنید

<h1>HTML Text Links <a name="top"></a></h1>

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

<a href="/html/html_text_links.htm#top">Go to the Top</a>

و این مثال لینک زیر را تولید خواهد کرد که می توانید در آن روی لینک تولید شده ی Go to the Top کلیک کنید تا به نقطه ی بالای آموزش HTML Text Link برسید.

نمونه پنج

<p>Click following link</p>

<a href="http://www.tahlildadeh.com" target="_blank">HTML tahlildadeh</a>

تنظیم رنگ های لینک

شما می توانید رنگ لینک های خود، لینک های فعال و لینکهای مشاهده شده را با استفاده ازویژگی های link و alink و vlink از برچسب < body>تنظیم کنید.

مثال:

مثال زیر را در test.htm ذخیره کنید و سپس می توانید آن را در هر مرورگری باز کنید تا ببینید که چگونه ویژگی های link, alink و vlink کار می کنند.

نمونه شش

<a href="http://tahlildadeh.com/Files/Articles/04GL07.pdf"> download pdf file</a>

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

دانلود کردن لینک ها

شما می توانید لینک متنی ایجاد کنید تا فایل های قابل دانلود PDF، ZIP و DOC خود را بسازید. این کار بسیار ساده می باشد، فقط کافیست یک URL کامل از فایل قابل دانلود ارائه بدهید.

نمونه چهار

<h1>HTML Text Links <a name="top"></a></h1>

<a href="#top">Go to the Top</a>

این مثال لینک زیر را تولید خواهد کرد و برای دانلود یک فایل استفاده می شود.

پایان بخش هفتم آموزش طراحی سایت

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

آموزش طراحی سایت:قسمت ششم

آموزش Table در HTML

سلام با آموزش طراحی سایت در خدمت شما هستیم , در قسمت قبل آموزش HTML را شروع کردیم , در قسمت پنجم با ادامه آموزش HTML ( آموزش ساخت جدول ) همراه باشید:

آموزش Table در HTML

جدول های HTML به نویسندگان وب اجازه می دهند تا داده هایی مانند متن، تصاویر، لینک ها، جدول های دیگر و غیره در ردیف ها و ستون ها تنظیم کنید. جدول های HTML با استفاده از برچسب < table> ایجاد می شوند که در آن برچسب < tr> برای ایجاد ردیف ها و برچسب < td> برای ایجاد داده های سلول ها استفاده می شوند.

مثال:

نمونه یک

<table border="1">

    <tbody>

        <tr>

            <td>Row 1, Column 1</td>

            <td>Row 1, Column 2</td>

        </tr>

    </tbody>

</table>

ویژگی های colspan و rowspan

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

مثال:

نمونه سه

<p>Column 1 Column 2 Column 3 Row 1 Cell 1Row 1 Cell 2Row 1 Cell 3 Row 2 Cell 2Row 2 Cell 3</p>

پس زمینه ی جدول

می توانید به دو روش زیر برای جدول خود زمینه ای تنظیم کنید.

• ویژگی Bg color: می توانید رنگ زمینه را برای همه ی جدول و یا تنها برای یک سلول تنظیم کنید.
• ویژگی background: می توانید یک تصویر را برای کل جدول یا تنها یک سلول تنظیم کنید.

همچنین می توانید با استفاده از ویژگی bordercolor رنگ حاشیه را نیز تنظیم کنید.

مثال:

نمونه چهار

<p>Column 1 Column 2 Column 3 Row 1 Cell 1Row 1 Cell 2Row 1 Cell 3 Row 2 Cell 2Row 2 Cell 3</p>

در اینجا مثالی در رابطه با استفاده از ویژگی background می بینید. در این مثال ما از تصویری موجود در image directory استفاده کرده ایم.

نمونه پنج

<table border="1">

<tbody>

<tr>

<th>Column 1</th>

<th>Column 2</th>

<th>Column 3</th>

</tr>

<tr>

<td rowspan="2">Row 1 Cell 1</td>

<td>Row 1 Cell 2</td>

<td>Row 1 Cell 3</td>

</tr>

<tr>

<td>Row 2 Cell 2</td>

<td>Row 2 Cell 3</td>

</tr>

<tr>

<td colspan="3">Row 3 Cell 1</td>

</tr>

</tbody>

</table>

طول و عرض جدول

شما می توانید طول و عرض جدولی را با استفاده از ویژگی های width و height تنظیم کنید. شما می توانید طول و عرض جدول را به پیکسل و یا متناسب با درصد صفحه ی جاری تنظیم کنید.

مثال:

نمونه شش

<p>Row 1, Column 1 Row 1, Column 2 Row 2, Column 1 Row 2, Column 2</p>

شرح جدول

برچسب caption یک توضیح یا یک تیتر برای جدول می باشد که در بالای جدول نمایش داده می شود. این برچسب در ورژن های جدید HTML/XHTML توصیه می شود.

مثال آموزش طراحی سایت:

نمونه هفت

<table border="1" style="width:100%">

<caption>This is the caption</caption>

<tbody>

<tr>

<td>row 1, column 1</td>

<td>row 1, columnn 2</td>

</tr>

<tr>

<td>row 2, column 1</td>

<td>row 2, columnn 2</td>

</tr>

</tbody>

</table>

تیتر، بدنه و پاورقی جدول

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

• < thead> - برای ایجاد یک تیتر مجزا
• < tbody>- برای نشان دادن بدنه ی اصلی جدول
• < tfoot> - برای ایجاد یک پاورقی مجزا در یک جدول

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

مثال:

نمونه هشت

<p>This is the head of the table This is the foot of the table Cell 1 Cell 2 Cell 3 Cell 4</p>

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

مثال:

در زیر مثالی را از استفاده ی یک جدول و برچسب های دیگر در داخل یک سلول مشاهده می کنید.

<a class="btn btn-danger" href="/Try/441/9" target="_blank">امتحان کنید</a><p> </p><p style="unicode-bidi: embed; direction: rtl; margin: 0in 0in 10pt; line-height: 17pt;" dir="rtl"><span style="line-height: 18pt; mso-bidi-language: fa;" lang="FA"><span style="font-size: 12pt; color: #000000;"> <br></span></span></p><div class="row" style="padding-top: 10px;">

<div class="col-lg-12 col-md-12 col-sm-12 col-xs-12">

<ul class="bookMoreInfo">

<li class="col-lg-4 col-md-4 col-sm-4 col-xs-12">

<span class="VisitCountHolder">

<span class="fa fa fa-eye"> </span>

<span id="BodyContent2_UVVisitCount1_VisitCountSeparator" class="VisitCountSeparator"> </span>

<span id="BodyContent2_UVVisitCount1_VisitCountCount" class="VisitCountNumber">1945</span>

</span>

</li>

<li class="col-lg-4 col-md-4 col-sm-4 col-xs-12">

<em class="fa fa-download"> </em>

<span id="BodyContent2_Lbl_dlcount">424</span>

</li>

<li class="col-lg-4 col-md-4 col-sm-4 col-xs-12">تاریخ ارسال:

<span id="BodyContent2_Lbl_createdate">1394/07/27</span>

</li>

</ul>

</div>

</div><div id="BodyContent2_dlPDF">

<div class="row" style="padding-top: 10px;">

<div class="col-lg-12 col-md-12 col-sm-12 col-xs-12">

<!--

.UserPassTable tr td {

text-align: right;

background-color: transparent !important;

color: #604e44;

}

.UserPassTable a {

color: #604e44 !important;

}

@media only screen and (max-width: 950px) {

.UserPassTable tr td {

display: block;

width: 100%;

padding-right: 5px;

}

.UserPassTable tr td::before, .UserPassTable tr td::after {

content: " " !important;

width: 0px;

}

table.UserPassTable td:nth-of-type(1)::before {

content: " " !important;

width: 0px;

}

.UserPassTable tr td:nth-child(2n+1), .UserPassTable tr:last-child td:nth-child(2) {

background-color: #239ead;

color: white;

}

.UserPassTable tr td:nth-child(2n), .UserPassTable tr:nth-child(3) td:nth-child(1) {

background-color: #f3f8fb;

color: black;

}

}

-->

</div></div></div><table style="width: 100%;" border="1">

<tbody><tr>

<td>

<table style="width: 100%;" border="1">

<tbody><tr>

<th>Name</th>

<th>Salary</th>

</tr>

<tr>

<td>Ramesh Raman</td>

<td>5000</td>

</tr>

<tr>

<td>Shabbir Hussein</td>

<td>7000</td>

</tr>

</tbody></table>

</td>

</tr>

</tbody></table><table class="table-striped table-bordered UserPassTable" style="width: 100% !important; margin: 0 !important;">

<tbody><tr>

<td class="text-center">

<em class="fa fa-download fa-2x text-center"> </em>

</td>

<td class="text-center">

<a id="BodyContent2_Lnk_dl" href="/UserControls/CNTDL.aspx?Type=ARTA&ID=441">

<span class="text-fa">دریافت این مقاله بصورت PDF</span>

</a>

<a id="BodyContent2_Lnk_source" href="/UserControls/CNTDL.aspx?Type=ARTS&ID=441">

<span class="text-fa">دریافت سورس کد مقاله</span>

</a>

</td>

</tr>

<tr>

<td colspan="2">

<br>

پس از دانلود فایل رمز آن را به دقت وارد نمایید .فایل ها دارای رمز عبور می باشند.

</td>

</tr>

<tr>

<td class="text-center">

<em class="fa fa-key fa-2x"> </em>

</td>

<td class="text-danger">tahlildadeh.com

یا

www.tahlildadeh.com

</td>

</tr>

</tbody></table>

<div class="ipShow">

</div>

پایان بخش ششم آموزش طراحی سایت

آموزش طراحی سایت:قسمت پنجم

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

آموزش Meta Tag در HTML

در این قسمت از آموزش HTML می خواهیم به Meta Tag در HTML و نحوه استفاده از آن در صفحات وب اشاره کنیم.
HTML علاوه بر مشخص کردن اطلاعات مهم به روش های مختلف در مورد یک داکیومنت، به شما اجازه می دهد تا متادیتا را نیز مشخص کنید. عناصر META می توانند برای وارد کردن جفت مقدار/نام استفاده شوند، این جفت ویژگی های داکیومنت HTML مانند نویسنده، تاریخ اتمام، لیست کلمات کلیدی، داکیومنت نویسنده و غیره را ارائه میدهد.
برچسب < meta> برای ارائه ی چنین اطلاعات اضافه ای استفاده می شود. این برچسب یک عنصر خالیست و دارای برچسب بستن نیست اما اطلاعاتی را با ویژگی آن در خود دارد. شما می توانید بر اساس اطلاعاتی که می خواهید در داکیومنت خود نگهداری کنید، یک برچسب یا بیشتر از یک برچسب متا وارد داکیومنت خود کنید. اما به طور کل برچسب های متا وضعیت ظاهری داکیومنت را تحت تاثیر قرار نمی دهند، بنابراین از لحاظ ظاهری استفاده کردن یا نکردن از آنها مشخص نمی شود.

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

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

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

مشخص کردن کلمات کلیدی

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

مثال:

در این مثال برچسب های متا، متادیتا و HTML را با عنوان کلمات کلیدی در مورد داکیومنت وارد می کنیم.

< title >Meta Tags Example< /title >

< meta name="keywords" content="HTML, Meta Tags, Metadata" >

توصیف داکیومنت

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

مثال:

< meta name="keywords" content="HTML, Meta Tags, Metadata" / >

< meta name="description" content="Learning about Meta Tags." / >

بازبینی تاریخ داکیومنت

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

مثال:

< meta name="keywords" content="HTML, Meta Tags, Metadata" / >

< meta name="description" content="Learning about Meta Tags." / >

< meta name="revised" content="Tutorialspoint, 3/7/2014" / >

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

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

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

مثال:

اگر می خواهید صفحه ی وب شما پس از هر 5 ثانیه ریفرش شود، از ترکیب زیر استفاده کنید:

< meta name="keywords" content="HTML, Meta Tags, Metadata" / >

< meta name="description" content="Learning about Meta Tags." / >

< meta name="revised" content="Tutorialspoint, 3/7/2014" / >

< meta http-equiv="refresh" content="5" / >

ریدایرکت Redirect کردن صفحه

می توانید از برچسب برای Redirect کردن صفحه ی خود استفاده کنید، همچنین می توانید دوره ای را مشخص کنید که پس از آن صفحه به طور خودکار Redirect شود.

مثال:

در این مثال صفحه ی جاری پس از 5 ثانیه به صفحه ی دیگر Redirect می شود. اگر می خواهید صفحه فورا Redirect شود، هیچ محتوایی برای آن مشخص نکنید.

< meta name="keywords" content="HTML, Meta Tags, Metadata" / >

< meta name="description" content="Learning about Meta Tags." / >

< meta name="revised" content="Tutorialspoint, 3/7/2014" / >

< meta http-equiv="refresh" content="5" url=http://www.tutorialspoint.com" / >

تنظیم cookies

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

< meta name="keywords" content="HTML, Meta Tags, Metadata" / >

< meta name="description" content="Learning about Meta Tags." / >

< meta name="revised" content="Tutorialspoint, 3/7/2014" / >

< meta http-equiv="cookie" content="userid=xyz; expires=Wednesday, 08-Aug-15 23:59:59 GMT;" / >

اگر تاریخ و زمان انقضا را مشخص نکرده اید، cookie یک session cookie می باشد و وقتی که یوزر از مرورگر خارج شود، پاک خواهد شد.

تنظیم نام نگارنده

می توانید با استفاده از meta tag نام یک نگارنده را برای صفحه ی وب خود تنظیم کنید. یک مثال در این رابطه را در زیر مشاهده می کنید.

مثال:

< meta name="keywords" content="HTML, Meta Tags, Metadata" / >

< meta name="description" content="Learning about Meta Tags." / >

< meta ame="author" content="Mahnaz Mohtashim" / >

تعیین تنظیم کاراکتر

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

مثال:

به طور پیش فرض مرورگرها و سرورهای وب از رمزگزاری ISO-8859-1 برای پردازش صفحات وب استفاده می کنند. در زیر مثالی را می بینید برای تنظیم رمزگزاری UTF-8:

< meta name="keywords" content="HTML, Meta Tags, Metadata" / >

< meta name="description" content="Learning about Meta Tags." / >

< meta name="revised" content="Tutorialspoint, 3/7/2014" / >

< meta http-equiv="cookie" content="userid=xyz; expires=Wednesday, 08-Aug-15 23:59:59 GMT;" / >

برای ارائه ی کاراکترهای چینی سنتی به یک صفحه ی استاتیک، صفحه ی وب باید دارای یک برچسب باشد تا رمزگذاری Big5 را تنظیم کند.

< meta name="keywords" content="HTML, Meta Tags, Metadata" / >

< meta name="description" content="Learning about Meta Tags." / >

< meta ame="author" content="Mahnaz Mohtashim" / >

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

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

آموزش استفاده از comment در html

در این مقاله آموزش Html می خواهیم به چگونگی استفاده از comment در html بپردازیم:
کامنت قطعه ای از کد می باشد که توسط مرورگرها نادیده گرفته می شود. افزودن کامنت به کد HTML خود، تمرین خوبی است، به ویژه در داکیومنت های پیچیده برای نشان دادن بخش هایی از یک داکیومنت به هرکسی که کد را نگاه می کند. کامنت ها به شما و دیگران کمک می کنند تا کد خود را متوجه شوید و قابلیت خواندن آن را افزایش می دهد.
کامنت های HTML بین برچسب های واقع می شوند. بنابراین هر محتوایی که بین این برچسب ها واقع شود، مثل کامنت با آن رفتار خواهد شد و توسط مرورگرها به طور کامل نادیده گرفته خواهد شد.

نمونه یک

<!-- Document Header Starts -->

<title>This is document title</title>

<!-- Document Header Ends -->

این مثال نتیجه ی زیر را بدون نمایش محتوای ارائه شده به عنوان بخشی از کامنت ها، به دنبال دارد.
Document content goes here.....

کامنت های معتبردر مقابل کامنت های نامعتبر

کامنت ها تودرتو نمی شوند، یعنی اینکه یک کامنت نمی تواند در داخل کامنت دیگری قرار بگیرد. خط تیره ی (dash) دوتایی "--" ممکن نیست در داخل یک کامنت ظاهر شود، به جز در مواردی که بخشی از برچسب closing باشد. شما باید مطمئن باشید که هیچ فضای خالی در ابتدای رشته ی کامنت وجود ندارد.

مثال:

در اینجا کامنت ارائه شده یک کامنت معتبر می باشد و توسط مرورگر پاک می شود.

نمونه دو

<!-- This is valid comment -->

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

مثال:

نمونه سه

< !-- This is not a valid comment -->

کامنت های چندخطی

تاکنون فقط کامنت های تک خطی را مشاهده کردیم، اما HTML کامنت های چندخطی را نیز پشتیبانی می کند.
شما می توانید کامنت های چند خطی داشته باشید با استفاده از برچسب آغازگر --!> و پایان دهنده ی ،--> که قبل از اولین خط و در پایان آخرین خط قرار میگیرد.

مثال:

نمونه چهار

<!--

This is a multiline comment and it canکامنت های شرطی

کامنت های شرطی تنها در اینترنت اکسپلورر روی ویندوز کار می کنند، اما توسط مرورگرهای دیگر هم نادیده گرفته می شوند. این کامنت ها در Internet Explorer 5 به بالاتر پشتیبانی می شوند و می توانید از آنها برای دادن دستورات شرطی به ورژن های مختلف IE استفاده کنید.

مثال:

نمونه پنج

<!--[if IE 6]>

.... some HTML here ....

<![endif]-->

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

استفاده از برچسب کامنت

مرورگرهای کمی هستند که استفاده از برچسب را برای کامنت بخشی از کد HTML استفاده می کنند.

مثال:

نمونه شش

<p>This is <comment>not</comment> Internet </p>

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

This is Internet Explorer.

اما اگر در حال استفاده از IE نمی باشد، نتیجه ی زیر حاصل می شود.

This is Internet Explorer.

کد اسکریپت کامنت

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

مثال:

نمونه هفت

<!--

("Hello World!")

//-->

Hello World!

کامنت صفحات طراحی

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

مثال:

نمونه هشت

<style>

<!--

.example {

border: 1px solid #4a7d49;

}

// -->

</style>

span through as many as lines you like.

-->

آموزش درج کردن تصویردر HTML-آموزش Html

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

وارد کردن تصویر

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

src="Image URL" ... attributes-list/>

برچسب یک برچسب خالی می باشد، یعنی تنها می تواند دارای لیستی از ویژگی ها باشد و دارای برچسب closing نمی باشد.

مثال:

برای امتحان کردن مثال، زیر اجازه بدهید فایل html خود یعنی test.htm و فایل تصویر خود یعنی test.png را در یک مسیر قرار دهیم.

نمونه یک

<p>Simple Image Insert</p>

<img src="tahlildadeh.png" alt="tahlildadeh Image">

شما می توانید از فایل تصویر JPEG، PNG یا GIF متناسب با راحتی خود استفاده کنید، اما مطمئن شوید که در ویژگی src نام فایل تصویر را به درستی وارد کردید. نام تصویر همیشه یک مورد هوشمند می باشد.
ویژگی alt یک ویژگی می باشد که اگر تصویر نمایش داده نشود، یک متن جایگزین را برای آن مشخص می کند.

تنظیم موقعیت تصویر

آموزش html css

معمولا ما تمام تصاویر خود را در یک مسیر مجزا قرار می دهیم. بنابراین اجازه بدهید فایل test.htm مربوط به HTML را در مسیر اصلی نگه داشته و یک مسیر فرعی images داخل مسیر اصلی، جایی که تصویر test.png را نگهداری می کنیم، ایجاد کنیم.
با فرض اینکه موقعیت تصویر ما "image/test.png" می باشد، مثال زیر را امتحان کنید:

مثال:

نمونه دو

<p>Simple Image Insert</p>

<img src="images/tahlildadeh.png" <="" pre="">

تنظیم طول و عرض تصویر

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

مثال:

نمونه سه

<p>Setting image width and height</p>

<img src="test.png" alt="Test Image" width="150" height="100">

تنظیم حاشیه ی تصویر

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

مثال:

نمونه چهار

<p>Setting image Border</p>

<img src="test.png" alt="Test Image" border="3">

تنظیم همترازی تصویر

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

مثال:

نمونه پنج

<p>Setting image Alignment</p>

<img src="test.png" alt="Test Image" border="3" align="right">

پایان بخش پنجم آموزش طراحی سایت

آموزش طراحی سایت|آموزش HTML|

سلام با آموزش طراحی سایت در خدمت شما هستیم , در قسمت قبل Canvas آشنا شدیم در قسمت سوم با با آموزش HTML همراه باشید:

آموزش تگ های اصلی در Html

برچسب های تیتر:

هر داکیومنت با یک تیتر آغاز می شود. شما می توانید از اندازه های مختلف برای تیترهای خود استفاده کنید. HTML دارای شش سطح می باشد که از< h1>, < h2>, < h3>, < h4>, < h5> و < h6> عناصر استفاده می کند. در هنگام نمایش هر تیتر مرور گر یک خط قبل و یک خط بعد از تیتر اضافه می کند.

نمونه یک

<h1>This is heading 1</h1>

<h2>This is heading 2</h2>

<h3>This is heading 3</h3>

<h4>This is heading 4</h4>

<h5>This is heading 5</h5>

<h6>This is heading 6</h6>

برچسب پاراگراف:

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

برچسب < p> به روش طراحی متن شما در پاراگراف های مختلف اشاره دارد. هر پاراگراف متن باید بین برچسب بازکننده ی < p> وبستن < /p> قرار بگیرد، همانطور که در مثال زیر مشاهده می کنید:

<p>This is some text in a paragraph.</p>

برچسب شکست لینک

هرزمان که شما از < br /> عنصر استفاده کنید، هر چیزی که آن را دنبال می کند از خط بعد شروع خواهد شد. این برچسب نمونه ای از یک عنصرempty می باشد، زمانی که لازم نیست برچسبی را باز کنید یا ببندید چرا که چیزی برای رفتن بین آنها وجود ندارد.
در بچسب < br />، یک فضای خالی بین کااکترهای br و اسلش جلوی آن وجود دارد. اگر شما این فضا را حذف کنید، مرورگرهای قدیمی تر در اجرای خط شکست مشکل خواهند داشت، در حالیکه اگر اسلش را حذف کنید برچسب < br> باقیمانده در HTML معتبر نمی باشد.

نمونه سه

This text contains<br>a line break.

مرکزگذاری متن

می توانید با استفاده از برچسب < center> می توانید هر محتوایی را در مرکز صفحه یا در مرکز هر سلول از یک جدول قرار دهید.

خطوط افقی

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

<p>This is paragraph one and should be on top</p>

<hr>

<p>This is paragraph two and should be at bottom</p>

و باز برچسب< hr /> مثالی از Empty می باشد که نیازی به باز کردن یا بستن برچسب ندارید زیرا چیزی برای رفتن بین آنها وجود ندارد.
در عنصر < hr /> یک فضای خالی بین کاراکترهای hr و اسلش مقابل آن وجود دارد. اگر این فضا را حذف کنید مرورگرهای قدیمی تر در اجرای خط افقی مشکل خواهند داشت. در حالیکه اگر اسلش مقابل آن را حذف کنید عنصر باقیمانده < hr> می باشد که در HTML فاقد اعتبار می باشد.

حفظ طراحی

گاهی اوقات تمایل دارید که متن فرمت دقیق خود در HTML را دنبال کند، در این موارد می توانید از برچسب پریفرمت < pre> استفاده کنید.
هر متن بین برچسب باز کننده ی < pre> و برچسب بستن < /pre> طراحی متن منبع را حفظ خواهد کرد.

Text in a pre element

is displayed in a fixed-width

font, and it preserves

both spaces and

line breaks

سعی کنید از همان کد بدون نگهداری آن بین برچسب های < pre>...< /pre> استفاده کنید.

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

فضاهای غیرشکست:

فرض کنید می خواهید از عبارت "12 Angry Men." استفاده کنید. در اینجا از مرورگر نمی خواهید عبارت را بین دو خط به صورت 12 Angry و Men بشکند.

An example of this technique appears in the movie "12 Angry Men."

در مواردی که نمی خواهید مرورگر متن را بشکند باید به جای یک فضای عادی از فضای غیر شکست استفاده کنید. برای مثال وقتی "12 Angry Men" را در یک پاراگراف کدگذاری می کنید باید از کدی مانند زیر استفاده کنید:

<p>An example of this technique appears in the movie "12 Angry Men."</p>

عناصر در HTML

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

نابراین در اینجا< p>....< /p> یک عنصر HTML و< h1>...< /h1> عنصر دیگری از HTML می باشد. عناصری از HTML وجود دارند که نیازی به بسته شدن ندارند مانند < img... />, < hr /> و< br /> . این عناصر با عنوان void elements (عناصر خالی) شناخته می شوند.
داکیومنت های HTML دارای درختی از این عناصر می باشند و مشخص می کنند که چگونه داکیومنت ها باید ساخته شوند و چه نوع محتوایی باید در چه بخشی از داکیومنت HTML قرار بگیرد.

برچسب HTML در مقابل عنصر

یک عنصر HTML به وسیله ی یک برچسب شروع کننده تعریف می شود. اگر عنصر دارای محتوای دیگری باشد با یک برچسب بستن تمام می شود.
برای مثال< p> برچسب شروع کننده ی یک پاراگراف می باشد و< /p> برچسب بستن همان پاراگراف می باشد، اما < p>This is paragraph< /p> عنصر یک پاراگراف می باشد.

عناصر تو در توی HTML

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

<title>Nested Elements Example </title>

<h1>This is<i>italic</i> heading</h1>

آموزش Attributeها در HTML-آموزش HTML

ویژگی های زبان HTML

در این مبحث از آموزش های HTML می خواهیم به بررسی برخی از ویژگی های زبان HTML بپردازیم:
برخی از برچسب های HTML مانند برچسب های تیتر و برچسب های پاراگراف، و موارد استفاده ی آنها را مشاهده کردیم. تاکنون از آنها به ساده ترین شکل خود استفاده کرده ایم، اما بیشتر برچسب های HTML می توانند ویژگی هایی داشته باشند که مقداری اطلاعات اضافه می باشد.
یک attribute برای تعریف ویژگی های عنصر HTML استفاده می شود و در داخل برچسب بازکننده ی عنصر قرار می گیرد. همه ی ویژگی ها از دو بخش تشکیل شده اند: name و value.

• Name ویژگی مورد نظر شما برای تنظیم میباشد، به عنوان مثال عنصر پاراگرافp> > در مثال ارائه شده دارای ویژگی می باشد که نام آن align می باشد و شما می توانید از آن برای تنظیم پاراگراف در صفحه استفاده کنید.
• Value همان است که شما می خواهید مقدار ویژگی تنظیم شود و همیشه در داخل گیومه قرار می دهید. مثال زیر سه مقدار ممکن ازیک ویژگی تراز را نشان می دهد: چپ، مرکز و راست.

ویژگی نام ها و ویژگی مقادیر غیرهوشمند می باشند. به هرحال وب جهانی Consortium (W3C) مقادیر ویژگی ها را در HTML 4 با حروف کوچک پیشنهاد می دهد.

مثال:

<title>Align Attribute Example</title>

<p align="left">This is left aligned</p>

<p align="center">This is center aligned</p>

ویژگی های اصلی

چهار ویژگی اصلی که می توانند در اکثر عناصر HTML مورد استفاده قرار بگیرند عبارتند از:

• id
• title
• class
• style

ویژگی id

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

• اگر یک عنصر یک ویژگی را به عنوان تشخیص دهنده ی منحصر به فرد استفاده می کند شناخت تنها آن عنصر و محتوای مربوط به آن ممکن می باشد.
• اگر دارای دو عنصر هم نام در یک صفحه ی وب می باشید، می توانید از عنصر id برای تشخیص این عناصر هم نام استفاده کنید.

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

<p id="html">This para explains what is HTML</p>

<p id="css">This para explains what is Cascading Style Sheet</p>

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

ویژگی title:

این ویژگی یک تیتر پیشنهادی برای عنصر ارائه می دهد. ترکیب مربوط به ویژگی title شبیه به ترکیب توضیح داده شده برای ویژگی id می باشد. رفتار این ویژگی بستگی به عنصری دارد که آن را حمل می کند، گرچه اغلب اوقات وقتی مکان نما روی عنصر قرار می گیرد یا عنصر در حال بارگذاری می باشد، با عنوان یک راهنمای ابزار(tooltip) نمایش داده می شود.

<title>The title Attribute Example</title>

<h3 title="Hello HTML!">Titled Heading Tag </h3>

اکنون سعی کنید مکان نما را روی "Titled Heading Tag Example" بیاورید، خواهید دید که هر تیتری که در کد خود استفاده کرده اید، مانند یک راهنمای ابزار نمایش داده خواهد شد.

ویژگی class:

این ویژگی برای برقراری ارتباط بین یک عنصر با یک صفحه ی طراحی استفاده می شود و گروه عنصر را مشخص می کند. وقتی که را یاد بگیرید Cascading Style Sheet (CSS) در مورد این ویژگی بیشتر فرا خواهید گرفت. اکنون تا همین حد کافیست.
مقدار ویژگی نیز ممکن است لیستی از فضاهای مجزای نام های گروه باشد، برای مثال:

class="className1 className2 className3"

ویژگی style

این ویژگی به شما اجازه می دهد تا قوانین CSS را در داخل عنصر مشخص کنید.

<title>The style Attribute</title>

<p style="font-family:arial; color:#FF0000;">Some </p>

اکنون CSS را یاد نمیگیریم بنابراین اجازه دهید بدون اینکه بیشتر از این خود را در مورد CSS اذیت کنیم، به جلوتر برویم. در اینجا لازم است در مورد ویژگی های HTML بدانید و اینکه چگونه در هنگام طراحی متن مورد استفاده قرار می گیرند.

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

درونی کردن ویژگی ها

سه ویژگی درونی وجود دارند که برای اکثر عناصر HTML استفاده می شوند:

• dir
• lang
• xml:lang

ویژگی dir

این ویژگی به شما اجازه می دهد تا مسیری را به مرورگر نشان دهید که متن در آن باید جریان داشته باشد. ویژگی dir می تواند یکی از دو مقدار باشد، همانطور که در جدول زیر نشان داده شده است:

<title>Display Directions</title>

This is how IE 5 renders right-to-left directed text.

وقتی که ویژگی dir در داخل برچسب html> > استفاده می شود، مشخص می کند که چگونه متن در کل داکیومنت نمایش داده می شود. وقتی در برچسب دیگری مورد استفاده قرار بگیرد، مسیر متن را برای محتوای مربوط به آن برچسب کنترل می کند.
ویژگی lang: این ویژگی به شما کمک می کند تا زبان اصلی استفاده شده در یک داکیومنت را نشان دهید، اما این ویژگی فقط برای سازگاری معکوس با ورژن های قدیمی تر HTML در HTML حفظ شده است. این ویژگی به وسیله ی ویژگی xml:lang در داکیومنت های جدید HTML جایگزین شده است.
مقادیر ویژگی lang کدهای دو کاراکتری زبان استاندارد ISO-639 می باشند. HTML Language Codes: ISO 639 را برای لیست کاملی از کدهای زبان چک کنید.

<title>English Language Page</title>

This page is using English Language

ویژگی xml:lang

این ویژگی جایگزین xhtml برای ویژگی lang می باشد. مقدار ویژگی xml:lang باید یک کد ISO-639 می باشد، همانطور که در بخش قبل بیان شد.

ویژگی های عمومی

در اینجا جدولی را می بینید که برخی دیگر از ویژگی هایی که در برچسب های HTML مفید می باشند،را نشان می دهد.

آموزش قالب بندی در HTML-آموزش HTML

در ادامه مباحث آموزشی HTML قبل، می خواهیم ببینیم چه آیتم هایی در format دادن و قالب بندی صفحات HTML مورد نیاز ما هستند.
اگر با پردازشگر word کار می کنید باید با بولد کردن (bold)، ایتالیک کردن و آندرلاین کردن متن آشنا باشید. این ها فقط سه گزینه از ده گزینه موجود برای چگونگی ظاهر شدن متن در HTML و XHTML می باشند.

بولد کردن متن

هرچیزی که بین عناصر< b>...< /b> قرار می گیرد به صورت بولد ظاهر می شود، مانند مثال زیر:

<p>This text is normal.</p>

<p><b>This text is bold</b>.</p>

<p>The following word uses a <b>bold</b> </p>

ایتالیک کردن متن

هر چیزی که بین عناصر< i>...< /i>قرار بگیرد به صورت ایتالیک ظاهر می شود، مانند مثال زیر:

<p>This text is normal.</p>

<p><i>This text is italic</i>.</p>

<p>The following word uses a <i>italicized</i> </p>

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

آندرلاین کردن متن

هر چیزی که بین عناصر < u>...< /u> قرار بگیرد به صورت آندرلاین ظاهر می شود، مانند مثال زیر:

<p>This is a <u>parragraph</u>.</p>

<p>The following word uses a <u>underlined</u> typeface.</p>

خط کشیدن روی متن

هر چیزی که بین گزینه های < strike>...< /strike> قرار بگیرد، با یک strikethrough نمایش داده می شود که خط باریکی می باشد که روی متن کشیده می شود، همانطور که در مثال زیر مشاهده می کنید:

<p>Version 2.0 is <strike>not yet available!</strike> now available!</p>

فونت monospaced

محتوای عنصر < tt>...< /tt> به فونت monospaced نوشته می شود. اکثر فونت ها با عنوان فونت هایی با عرض متغیر شناخته شده اند، زیرا حروف مختلف دارای عرضهای مختلف هستند ( به عنوان مثال حرف m عریض تر از حرف I می باشد.) به هرحال در فونت monospaced تمام حروف دارای عرض یکسان می باشند.

<p><tt>Teletype text</tt></p>

متن superscript ( چاپ شده در بالا)

محتوای عنصر < sup>...< /sup> در بالا نوشته می شود، فونت استفاده شده برای آن همان فونت کاراکترهای اطراف آن می باشد، اما به اندازه ی نصف یک کاراکتر بالاتر از دیگر کاراکترها نمایش داده می شود.

<p>This is ^{superscripted} text.</p>

متن subscript (چاپ شده در زیر)

محتوای عنصر< sub>...< /sub> در زیر نوشته می شود. اندازه ی فونت استفاده شده برای آن به اندازه ی فونت کاراکترهای اطراف می باشد اما به اندازه ی نصف ارتفاع یک کاراکتر زیر کاراکترهای دیگر نمایش داده می شود.

<p>This is _subscripted text.</p>

متن مندرج

هرچیزی که بین عنصر ... قرار بگیرد به عنوان متن مندرج نمایش داده می شود.

<p>My favorite <ins>color</ins> is red.</p>

متن حذف شده

هر چیزی که بین عنصر < del>...< /del> ظاهر شود با عنوان یک متن حذف شده نمایش داده می شود.

<p>My favorite color is <del>blue</del> red.</p>

متن بزرگتر

محتوای عنصر < big>...< /big> اندازه فونت را بزرگتر از متن اطراف نشان می دهد. مانند مثال زیر:

<p><big>Bigger text</big></p>

متن کوچکتر

محتوای عنصر < small>...< /small> متن را یک سایز کوچکتر از متن اطراف آن نشان می دهد، مانند مثال زیر:

<h2>HTML <small>Small</small> Formatting</h2>

گروه بندی محتوا

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

<div style="color:#0000FF">

<h3>This is a heading</h3>

<p>This is a paragraph.</p>

</div>

از طرف دیگر عنصر < span> فقط می تواند برای گروه بندی داخل خطی عناصر استفاده شود. بنابراین اگر بخشی از جمله یا پاراگراف را دارید که می خواهید با هم در یک گروه قرار دهید، می توانید از عنصر < span> مانند زیر استفاده کنید:

<p>My mother has <span style="color:blue">blue</span> eyes.</p>

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

پایان بخش چهارمآموزش طراحی سایت