..آموزش HTMLو XHTML..

F@tima s332

عضو جدید
کاربر ممتاز
سلام

تواین تاپیک قصدآموزش گام به گامhtmlرو داریم

خودم هم همراه بااین تاپیک میخوام html رو یاد بگیرم

ازدوستانی هم که htmlمیدونندخواهش میشه به ماکمک کنند

دوستان سوالاتتونو دراین زمینه همین جا بپرسید


اگه میخواید ادامه آموزش رو بذارید حتماآموزشتون همراه باتصویرباشه

و

سعی کنید به زبان ساده توضیحش بدید




 
آخرین ویرایش:

F@tima s332

عضو جدید
کاربر ممتاز
قسمت اول

قسمت اول

HTMLچیست؟

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

HTMLبه نویسندگانش امکانات زیررامی دهد:

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

htmlمخفف عبارت زیر میباشد:

Hyper Text Markup Language

XHTML

XHTMLازنظرساختاری بانسخ قبلی تفاوتی نکرده است وتنهادارای اصول وقوانین خاصی است تاکمبودهای HTMLرابرطرف کند.XHTMLمخفف عبارت
eXtensible Hyper Text Markup Languageوبه معنی HTMLقابل توسعه(توسعه پذیر)است
XHTMLفقط شامل قوانین واصولی است که طراحان وب باید درهنگام طراحی هایشان ازآن ها پیروی کنند.به عنوان مثال یکی ازاین قوانین این است که درXHTMLدستورات میبایست حتمابه صورت کوچک نوشته شوند(درواقع دستورات case sensitiveبوده ونسبت به حروف حساس هستند)درحالی که خود HTMLچنین محدودیتی راندارد.


اطلاعات وب در فايلهايی به نام Web Page قرار می گيرند که آنها نيز در رايانه هايی به نام Web Server قرار دارند و رايانه ها برای ديدن صفحات وب از استانداردی ارتباطی به نام HTTP (Hyper Text Transfer Protocol ) استفاده می کنند. رايانه های متصل به وب اطلاعات موجود در Web Page ها را از طريق برنامه هايی با نام مرورگر وب (Web Browser) نشان می دهند. معمول ترين مرورگرها که مورد استفاده قرار می گيرند Internet Explorer وNetscape Navigator می باشند.


ساختارTagها(برچسب):

Tagهاازسه قسمت تشکیل شدن:

1-یک علامت کوچکتر(>)
2-نام تگ
3-یک علامت بزرگتر(<)
<tagname>


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


<tagname>content</tagname>
ساختاراصلی یک صفحه ی وب:

هرصفحه ی وب(html)باتگ<html>شروع وباتگ<html/>خاتمه میابد.

درداخل عنصرhtmlدوعنصراصلی قرار میگیرد:

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

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

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

خوب حالا میتونیدمتن زیر رو دربرنامه Notepadبنویسیدواجراکنید

به این صورت که :
1-متن بالا رو در برنامه Notepadبنویسید:




2-سندخودرابانامLesson1.htmlذخیره کنیدودرفولدرخاص مورد نظر خودتون نگهداری کنید.




3-حالا ازمرورگرخودتون منوی فایل open Fileروبزنیدوسندی که ذخیرش کردید بازکنید




نکته:<b>......<b/>برای بولدیا پررنگ کردن به کار میره هرچی به جای ..نوشته بشه پررنگ نشون داده میشه

برای ایجاد یک صفحه ی وب به هیچ ابزار خاصی نیاز نیست می تواین ازهریک ازبرنامه های واژه پردازمانند:Notepad،Wordpad،Texteditوحتی Microsoft wordاستفاده کردهرچندبرنامه های

قدرتمندی مانندAdobe Dream weaverوMicrosoft web expressionبرای این کار وجوددارد
 
آخرین ویرایش:

Miss World

کاربر حرفه ای
کاربر ممتاز
نکات قسمت اول:
_ بر خلاف اون چیزی که خیلیا فکر میکنند در واقع html یک زبان برنامه نویسی نیست بلکه یه زبان نشانه گذاریه.به همین خاطره که نمیشه باهاش یک وب سایت کامل ساخت و حتما باید از css برای استایل بندیش استفاده بشه وباphp ترکیب بشه تا بشه ازش یک وب سایت پویا در اورد.

ـ برای ذخیره سازی اسنادی که به زبان فارسی در ویرایش گر خود تایپ کرده اید لازم است بعداز زدن بر روی گزینهsave از قسمت Encoding عبارت UTF_8 را انتخاب نمائید و سپس ذخیره کنید. با این کار تمامی مرورگرها متن فارسی شما را نمایش میدهند.

ـ برای اینکه تاکیید بیشتری بر روی قسمتی از متن داشته باشید بوسیله تگ های <I>...</I> & <b>...</b> میتوانید این تاکیید را انجام دهید
ـ برای اشاره به قسمت خاصی از متن میتوانید از تگ <tt>....</tt> استفاده نمائید
I مخفف کلمه ی italic
tt مخفف کلمه ی typewriter
 
آخرین ویرایش:

F@tima s332

عضو جدید
کاربر ممتاز
قسمت دوم

قسمت دوم

صفت هادرHTML

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

Name:نام صفتی که میخواهید کنترلش کنید.مثلا صفت alignبرای تگpنحوه چینش متن پاراگراف راکنترل میکنه

Value:مقداری استکه برای صفت تعیین میشود.مثلا مقدارrightبرای صفت alignباعث راست چین شدن متن پاراگراف میشود..وباید داخل کوتیشن ها قرار بگیرندوباعلامت =به نام صفت هامنتسب میشوند
عناصرمیتونندچندین صفت داشته باشند اما نباید صفت های مشابهی داشته باشند

<tagname attrobute1='value' attribute2='value'.....>content</tagname>

مثال زیرپاراگراف راراست چین میکند:



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




dir:جهت گیری متن داخل یک عنصر راکنترل میکند.این صفت دومقدارrtlبرای جهت گیری ازسمت راست به چپ وltrبرای جهت گیری ازچپ به راست رابه عنوان مقدارمیپذیرد.مقدارپیش فرض این صفتltrاست


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


lang:ازاین صفت معمولا برای تعیین زبان اصلی به کاررفته درصفحه وبرای تگ<html>استفاده میشود.شمامیتوانیداین صفت رابرای هرنوع عنصر دیگری که زبان آن غیرازآن چیزی است که درتگ<html>تعریف شده است نیزاستفاده کنید.مقداری که این صفت میپذیرد یکی ازکدهای زبانی مانندen,fa,fr,...خواهدبود



style:ازاین صفت برای تعیین یکسری قواعدومقادیرشان که درزبان CSSتعریف میشوندبرای یک عنصر میتوان استفاده نمود.




title:این صفت مقداری ازنوع رشته ساده رادریافت کرده وآن رابه صورتtooltipهنگامی که نشانگرموس برروی عنصرقرار گیردنمایش میدهد




conteneditable:این صفت که یکی ازمقادیرtrueوfalseرااختیارمیکندمشخص میکندکه آیاعنصرمورد نظرقابل ویرایش توسط کاربرباشد یا خیر؟








hidden:این صفت برای مخفی کردن عناصراستفاده میشودویکی ازدومقدارtrueوfalseکهtrueمعنی مخفی شدن عنصراست را به عنوان مقدارمیپذیرد.عناصرhiddenدرصفحه نمایش داده میشوند.ازاین صفت میتوان برای مخفی نگه داشتن یک عنصر ازدید کاربرتازمان برقراری یک شرط استفادهنمود.دراین حالت جاوا اسکریپ میتواندباحذف یا تغییراین صفت عنصررا مجددانمایش دهد.



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


نکته:برای دیدن کدهرصفحه برروی مرورگرتان ازمنوی viewگزینه opensourceروبزنید.
 

F@tima s332

عضو جدید
کاربر ممتاز
سوال

سوال

1-تمام اون کدهایی که نوشتم به جز اونایی که عکس مرورگر رو گذاشتم فقط This is a paragraph رونشون میدادند وهیچ تغییری توشون به وجود نمیومدمثلا راست چین کردن استفاده ازrtlو..
مشکل ازکد نوشتنم یا همینطوری درسته؟
2- تصویر مثال hidden

بنظرم فقط باید نوشته فارسی مشخص بشه .درسته؟کجا رو اشتباه نوشتم؟
 

Miss World

کاربر حرفه ای
کاربر ممتاز
1-تمام اون کدهایی که نوشتم به جز اونایی که عکس مرورگر رو گذاشتم فقط This is a paragraph رونشون میدادند وهیچ تغییری توشون به وجود نمیومدمثلا راست چین کردن استفاده ازrtlو..
مشکل ازکد نوشتنم یا همینطوری درسته؟
2- تصویر مثال hidden

بنظرم فقط باید نوشته فارسی مشخص بشه .درسته؟کجا رو اشتباه نوشتم؟

فاطمه جان صفت hidden تا وقتی شرط نذاشتی نباید نشون داده بشه.پس اگه این کدو اینجوری بنویسی کلا چیزی نمایش داده نمیشه.فقط این کدو بین دوتا جمله بکار ببر که نبودشو بهتر احساس کنی:
<p hidden="true" this is </p>
 

F@tima s332

عضو جدید
کاربر ممتاز
قسمت سوم [1]

قسمت سوم [1]

آشنایی با انواع تگ های قالب بندی متن

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

تگ <b>: متن داخل یک عنصر b در صفحه به صورت ضخیم نمایش داده خواهد شد. در کد زیر عبارتbold در صفحه به صورت ضخیم نمایش داده خواهد شد:




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





تگ <u>: این عنصر محتوای خود را به صورت زیر خط دار(underline) نمایش می دهد. هرچند این عنصر جزء عناصر منسوخ شده به حساب می آید اما هنوز همه مرورگرها از آن به خوبی پشتیبانی می کنند.




تگ <s> و <strike> : این دو تگ محتوای خود را به صورت خط خورده نشان می دهند. در واقع یک خط نازک بر روی متن ایجاد میکنند






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




 

F@tima s332

عضو جدید
کاربر ممتاز
قسمت سوم [1]

قسمت سوم [1]

تگ <sub> : محتوای این عنصر به صورت زیرنویس (اندیس) نشان داده خواهد شد. زیر نویس ها معمولا به اندازه نصف ارتفاع یک کاراکتر از بقیه کاراکتر ها قرار میگیرند و کمی کوچکتر از متون اطرافشان هستند.





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




استفاده ازاین تگ به صورت تودرتوموجب اثرمضاعف خواهدشد:






تگ <small> : این عنصر دقیقا عکس عنصر <big> عمل می کند و محتوایش را یک واحد کوچکتر از متون اطرافش نمایش می دهد.





تگ <del> و <ins> : از تگ <del> برای مشخص کردن تغییراتی که نشان می دهد نویسنده صفحه، محتوایی که از قبل در صفحه موجود بوده است را حذف کرده است، استفاده می شود. این تگ در مقابل تگ <ins> که وظیفه مشخص کردن محتوایی که به تازگی به صفحه اضافه شده است را دارد، قرار میگیرد. تگ <del> موجب نمایش خطی بر روی محتوای خود و تگ <ins> موجب نمایش زیر خط دار متن محتوای خود خواهد شد.




تگ <abbr> و <acronym> : از این تگ ها برای تعیین عبارت های کامل کلماتی که به صورت مختصر و کوتاه شده در صفحه ذکر شده اند استفاده می شود. هر دو این تگ ها از صفت title برای تعیین عبارت کامل این گونه کلمات پشتیبانی می کنند. مثال زیر یک نمونه از کاربرد تگ <abbr> به همراه صفت title آن را نشان می دهد:






 

F@tima s332

عضو جدید
کاربر ممتاز
قسمت سوم [2]

قسمت سوم [2]

ایجادتیترهابااستفاده ازتگ های <hn>

X(HTML)از6سطح تیتر(Heading)هاپشتیبانی میکند.این 6سطح باتگ های<h1>,<h2>,<h3>,<h4>,<h5>,<h6>ایجاد میشود.مرورگرهاعنصر<h1>رادربزرگترین وعنصر<h6>رادرکوچکترین اندازه ازبین این 6سطح نمایش میدهند.





هر6عنصرفوق دارای صفت های زیرهستند

align class id style title dir lang

align:این صفت نحوه چینش متن داخل headingراکنترل میکند
left: هدینگ درسمت چپ صفحه (یاعنصری که headingدرآن قرار دارد)قرار میگیرد.
center:هدینگ دروسط صفحه (یاعنصری که headingدرآن قراردارد)قرار میگیرد
right:هدینگدرسمت راست صفحه (یاعنصری که headingدرآن قرار دارد)قرار میگیرد.
justify:متن داخل headingراازهردوطرف ترازمیکند.
title:این صفت که جزصفت های عمومی محسوب میشود رشته ای رابه عنوان مقدار میپذیرد وآنرا به صورت tooltipنمایش میدهد.
dir:این صفت جهت گیری متن داخل headingهاراکنترل میکند ومیتواند یکی از مقادیر rtlبرای جهت گیری راست به چپ وltrباری جهت گیری چپ به راست را میپذیرد





ایجاد پاراگراف بااستفاده ازتگ<p>:

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





تگ </br>برای ایجاد شکست خط:

هرآنچه که بعداز</br>قرارامیگیرد ازیک خط جدید شروع میشود.این عنصر جزعناصر تهی بوده وبه تگ پایانی احتیاج ندارد.درنسخه های قدیمی htmlاز<br>به جای </br>میتوانید استفاده کنید





تگ <nobr>:

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

تگ های <pre>و<code>:

گاهی اوقات میخواهیم متنمان دقیقا به همان شکلی که نوشته میشود درصفحه نمایش داده شود وازفاصله های خالی,فاصله های Tabوشکست های خط چشم پوشی نشود.هرآنچه که بین تگ<pre>و<pre/>به همان شکلی که درsourceصفحه نوشته شده است درصفحه نشان داده خواهد شد.این تگ معمولا به همراه تگی بانام <code>که متن داخل آن به یکی ازفونت های ازنوع monospaceهمانندcourier newنشان داده میشودبه کار میرود.(فونت های نوع monospaceفونت هایی هستند که هرکاراکتر آنهابه یک اندازه فضااشغال میکنند.)
بیشترین استفاده ازاین تگ ها درنمایش کدهای کامپیوتری وبرنامه نویسی است .




 

F@tima s332

عضو جدید
کاربر ممتاز
قسمت سوم [2]

قسمت سوم [2]

تگ </hr>:

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





width:بااین صفت میتوان عناصرموجوددرصفحه را کنترل کرد.به دوطریق میتوان به این گونه صفات مقداردهی کرد.یکی بر حسبpxودیگری برحسب درصد که نسبت به پهنای کل صفحه (یا عنصری که hrدرآن قرار دارد)سنجیده میشود.

color:
این قاعده رنگ خط را مشخص میکند.صفاتی ازاین دست درHTMLکه یک رنگ را به عنوان مقدار میپذیردرامیتوان به سه روش مقداردهی نمود:

استفاده از نام رنگ ها:

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

Black,silver,gray,white,maroon,red,purple,fushia,green,lime,olive,yellow,navy,blue,teal,aqua

استفاده از تابعrgb:

درHTMLتابعی به نامrgbوجوددارد که به ترتیب سه رنگ قرمز,سبز,آبی رابه عنوان مقدارمیپذیرد.این مقادیریااعدادصحیح هستندیابه صورت درصد بیان میشوند.به طورمثال:
rgb(0%,63%,100%) یا(rgb(0,160,255
دراولین عبارت عدد255معادل 100%است.درمدرنگ RGBمحدوده اعداد صحیح بین0تا255است.

استفاده ازمبنای هگزادسیمال(16)رنگ ها:

رنگ هارامیتوان برمبنای عبارت متناظرآن ها در مبنای16به کاربرد.دراین عبارت میتوان سه عدددرمبنای 16رانوشت.عدداول معرف رنگ قرمز,عدددوم معرف رنگ سبز,عددسوم معرف رنگ آبی است.دقت داشته باشیدکه این اعداد میتوانندازدوحرف تشکیل شده باشندزیرااعداددر مبنای 16ازحروف
AتاFنیز میتوانندتشکیل شوندفرم کلی این نوع عبارت ها به شکلrrggbb# است.
برای مثال عبارت 000000 #معرف رنگ سیاه و0000ff #معرف رنگ آبی است.

size:

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

noshade:

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

نکته:صفت های Booleanبه صفت هایی گفته میشودکه درنسخه های قدیمی HTML(نسخه های قبل ازXHTML)مقداری را نمیپذیرند وذکرنام آن ها برای استفاده از آن ها کافی است
مثلا:noshadeامادرنسخهXHTMLمی بایست این گونه صفت ها را نیز مقدار دهی کنیم ومقدار آن ها نام خود آن ها خواهد بودمثلا:noshade="noshade"
align
محل قرار گرفتن خط در صفحه راکنترل میکندو میتواند یکی از مواردright,center,leftرابه عنوان مقدار بپذیرد.





تگ<blink>

متن داخل این عنصر درمرورگر به صورت چشمک زن در خواهد آمد.این تگ تنها در مرورگرهای
Firefox,Googlechrome,operaپشتیبانی میشودوIEازآن شتیبانی نمی کند



تگ<center>

ازاین تگ برای وسط چین کردن هرنوع عنصری استفاده میشود.برای این کار کافی است تگ باز<center>راقبل و تگ بسته<center/>رابعدازعنصرموردنظرتان را قرار دهید







تگ<font>

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

face:

ازاین صفت برای مشخص کردن فونت خاصی استفاده میشود.یعنی اگر بخواهیم متنی را با فونت خاصی نمایش دهیم از تگ<font>همراه بااین صفت استفاده میکنیم.این صفت لیستی از فونتهاکه با ,(کاما)از هم جدا شده اند را به عنوان مقدار میپذیرد. اگر اولین فونت برروی سیستم کاربرنصب نبود,فونت دوم ,فونت دوم نصب نبود,فونت سوم و..برروی متن اعمال میشود.

size:

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

مقادیر مطلق:مقادیری بین 1تا7که دراین مورد هر اندازه ازاندازه قبلی خود بزرگتر خواهد بود.

مقادیر نسبی:مقادیری بین-7تا+7که در این صورت اندازه فونت نسبت به اندازه فونت مشخص شده در تگ </basefont>سنجیده خواهد شد.اگرعددمشخص شده مثبت باشد به این معنی است که به همان تعدادبه اندازه مشخص شده در</basefont>اضافه واگرعددمشخص شده منفی باشد به این معنی است که به همان تعداد ازاندازه مشخص شده در</basefont>کم شود وسپس برروی متن اعمال گردد.

color:

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






تگ<basefont>

ازاین تگ تهی که حتما باید در قسمت headاستفاده شود برای تعیین اندازه ونوع و رنگ fontپایه صفحه استفاده میشود.بیشترین استفاده ازاین تگ برای تعیین اندازه
fontپایه صفحه است تاتمام اندازه های نسبی صفحه تگهای
<font>داخل صفحه نسبت به آن سنجیده شود.درصورتی که اندازه خاصی در تگ <basefontتعیین نشود اندازه به صورت پیش فرض 3درنظرگرفته میشود.این تگ از تمام صفت های تگ
<font>(یعنیsize,face,color)باهمان نوع مقادیرپشتیبانی میکند جز اینکه به صفت sizeآن فقط میتوان مقادیر مطلق دادومقادیر نسبی مجاز نیستند

تگ<marquee>

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

width:

عرض محدودهmarqueeرابرحسب درصد یا پیکسل مشخص میکند

Height:

ارتفاع محدوده marqueeرابرحسب درصد یاپیکسل مطرح میکند

Bgcolor:

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

Behavior:

نحوه رفتاریا حرکت محتویاتmarqueeرامشخص میکندکه میتواند یکی از مقادیر زیر باشد

scroll:متن ازیک طرف واردوازطرف دیگر خارج میشود

slide:متن ازیک طرف وارد ودر طرف دیگر می ایستد

Alternate:متن (محتویات)داخل marqueeیک حرکترفتوبرگشتی درسطحآن خواهد داشت

scrollamount:اگرحرکت متن بوسیله تگmarqueeرامانندقدم زدن درنظر بگیریم این صفت فاصله بین هرقدم راکنترل میکند.این صفت مقداری عددی برحسبpxرامیپذیرد

scrolldelay:این صفت تاخیرزمانی بین هرقدم رابرحسب میلی ثانیه مشخص میکند.مقدار 1000برای این صفت به مغنی تاخیر یک ثانیه ای برای هر قدم خواهد بود

loop:تعدادتکرارحرکت متن راکنترل میکند و میتواند یک عددصحیح باشد.درصورتی که بخواهید حرکت بی نهایتبار تکرار شود آن را برابر با یکعددمنفی(مثلا-1)یاعبارتinfiniteقرار بدهید

Direction:جهت حرکت محتویاتmarqueeرامشخص میکندومیتواند یکی از مقادیر زیر باشد:

up:حرکت به سمت بالا

Down:حرکت به سمت پایین

Right:حرکت به سمت راست

Left:حرکت به سمت چپ

hspace:میزان فاصله طرف های راست وچپ ومحدوده marqueeنسبت به عناصر اطراف رابرحسب pxیادرصدکنترل میکند

vspace:میزان فاصله طرف های بالا وپایین ومحدوده marqueeنسبت به عناصر اطراف رابرحسب pxیادرصدکنترل میکند

truespeed:معمولا مرورگرها مقادیرکمتراز60برای صفت scrolldelayرادرنظرنمیگیرندوآن را به 60گرد کرده وسپس اعمال می کنند. ما میتوانیم بابه کارگیری صفت truespeedکه جزصفت هایboolean
نیزهست ازاین تبدیل جلوگیری نماییم.درواقع بااستفاده ازاین صفت میتوانیم مرورگرها را مجبور کنیم تادقیقا همان عددی را که درصفت scrolldelayمشخص کرده ایم درحرکت متن تاثیر بدهند






عناصر بلاکی ودرون خطی:

عناصر بلاکی عناصری هستند که همیشه از یک خط جدید شروع میشوند و می توانند حاوی عناصربلاکی ودرون خطی دیگرباشند.در واقع اینگونه عناصر حالت بلاکی داشته وهمیشه درابتداوانتها ی خود یک خط خالی ایجاد میکنند.عناصری همچون
p,h1,.....h6,o1,u1,pre,hrازاین دست هستند
درمقابل عناصر درون خطی هستند که معمولا برای نمایش یک متن ساده استفاده میشوندو هیچ گاه ازخط جدید شروع نمیشوند.اینگونه عناصر فقط میتوانند شامل عناصر درون خطی دیگر باشند(ونمیتوانندحاوی بلاکی دیگر باشند)ازاین نوع عناصر میتوان به عناصری همچون
sub,big,small,a,imageاشاره کرد
البته نوع سومی ازعناصر نیزوجود دارد که اصلا نمایش داده نمیشود وتنها یکسری اطلاعات درمورد صفحه را فراهم می کنند. برای مثال :
<style>برای تعریف قواعدcssتگ<meta>برای اطلاعاتی درمورد صفحه و تگ <head>برای مشخص کردن قسمت سر صفحه

 
آخرین ویرایش:

F@tima s332

عضو جدید
کاربر ممتاز
قسمت چهارم[1]

قسمت چهارم[1]

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

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

تگ <a> :
از این تگ برای ایجاد لینک ها استفاده می شود. محتوای یک عنصر a می تواند یک متن ساده، یک عکس یا ترکیبی از این دو باشد.





accesskey : از این صفت می توان برای تعریف کردن یک کاراکتر از صفحه کلید به عنوان میانبر برای دسترسی به یک لینک استفاده کرد. نحوه دسترسی و استفاده از یک لینک بر اساس میانبر آن در مرورگر های مختلف متفاوت است در IE از کلید ترکیبی Alt+accesskey در مرورگرهای Firefox و Google Chrome از کلید های ترکیبی Alt+Shift+accesskey

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

hreflang : زبان به کار رفته در منبعی که لینک به آن اشاره می کند را مشخص میکند. این صفت یکی از کدهای زبانی مانند en , fa , fr و… را به عنوان مقدار می پذیرد.

name : نامی برای لینک مشخص میکند. این نام باید در صفحه یکتا باشد. نامی که انتخاب می شود نباید با اعداد ۰-۹، -، _، : یا . (نقطه) شروع شود. بلکه باید نام را با یکی از حروف A-Z یا a-z آغاز کنیم.

rel : این صفت که مخفف عبارت relationship است رابطه صفحه مقصد با صفحه مبدا لینک را مشخص میکند.

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

start next prev content index glossary copyright appendix help

tabindex : بوسیله این صفت می توان ترتیب پیمایش لینک ها در صفحه که با استفاده از کلید Tab صفحه کلید انجام می شود را مشخص میکند. مقداری که این صفت میگیرد میتواند عددی بین ۰ تا ۳۲۷۶۷ باشد.

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

* blank_ : لینک را در صفحه ای جدید باز میکند.
* self_ : لینک را در همان صفحه باز میکند.
* top_ : صفحه را در پنجره ای بدون فریم باز میکند ( غالبا متل self_ عمل میکند.)
* parent_ : لینک را در frameset پدر تگ frame باز خواهد کرد.
* نام یک فریم( پنجره ) لینک را در پنجره ای با نام مشخص باز میکند.





اجزای تشکیل دهنده آدرس ها

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

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



بخش اول URL طرح (پروتکل) نامیده میشود. این بخش به مرورگر می گوید چگونه با فایلی که می خواهد آن را باز کند رفتار کند. از متداول ترین طرح هایی که وجود دارند می توان به http ، ftp ، mailto و … اشاره کرد.

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

آدرس ها را به دو دسته اصلی تقسیم میکنند:

آدرس های مطلق و نسبی

آدرس های مطلق : به آدرس هایی که در آن ها تمام اجزای یک آدرس اینترنتی همچون نام پروتکل (طرح)، جداکننده ها، عبارت WWW ، نام سایت و دامنه ذکر می شود. به عنوان مثال آدرس زیر یک آدرس مطلق است:
http://www.www.www.iran-eng.ir/newreply.php


آدرس های نسبی : نوع دوم آدرس ها، آدرس های نسبی هستند که معمولا در آن ها از آوردن نام پروتکل، نام سایت و دامنه چشم پوشی می شود. به عنوان مثال آدرس های زیر نمونه هایی از آدرس های نسبی هستند.

/images/logo.gif

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

در مورد آدرس های نسبی ذکر چند نکته ضروری است :

برای دسترسی به فایلی که در یک مسیر بالاتر از فایل اصلی قرار دارد از /.. استفاده می شود:

<a href="../test.html"> Click Here </a>

برای دسترسی به فایل هایی که در دایرکتوری اصلی سایت قرار دارد از / استفاده میشود:

<a href="/home.html"> Go To Home Page </a>

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

<a href="./logo.gif"> My Logo </a>

 

F@tima s332

عضو جدید
کاربر ممتاز
قسمت چهارم[2]

قسمت چهارم[2]

تگ <base> : از این تگ، که جزء تگ های تهی است و حتما باید در قسمت Head صفحه هم قرار بگیرد برای تعریف کردن یک آدرس پایه برای تمام لینک های نسبی صفحه استفاده میشود. همچنین با استفاده از این تگ می توان یک هدف مشخص برای باز شدن لینک ها را هم مشخص نمود. اگر تعداد زیادی لینک ها در صفحه به آدرس مشخصی اشاره می کنند استفاده از تگ base برای جلوگیری از کد نویسی اضافه پیشنهاد می شود. این تگ دو صفت href و target را داراست که صفت href آن باید حتما از نوع آدرس های مطلق باشد.


لینک های ایمیلی

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





در مثال فوق همانطور که مشاهده میکنید مقدار صفت href با عبارت mailto شروع شده و به دنبال آن کاراکتر “:” آمده و پس از آن آدرس ایمیلی که میخواهید ایمیل به آن ارسال شود آمده است. محتوای عنصر a مانند انواع دیگر لینک ها می تواند هر چیز دیگر باشد. بنابراین مثال فوق را می توان به صورت زیر نیز نوشت :




در هنگام ایجاد لینک های ایمیلی علاوه بر مشخص کردن آدرس ایمیل دریافت کننده حتی می توان موضوع، آدرس سایر دریافت کنندگان (یعنی گزینه های CC و BCC ) و بخشی از متن ایمیل را نیز مشخص کرد. برای این کار کافی است کد فوق را به صورت زیر تغییر داده و از پارامترهایی همچون subject، CC ، body پس از آدرس اصلی ایمیل استفاده کنید:





اکنون پس از کلیک بر روی لینک فوق برنامه ارسال ایمیل که معمولا یا Gmail و یا برنامه Microsoft Office Outlook و یا Yahoo-mailمی باشد به صورت زیر و با مشخصات پیش فرض تعیین شده باز خواهد شد:




لینک های لنگری

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

برای ایجاد لینک های لنگری باید از دو عنصر a استفاده کرد. یکی در بخشی از صفحه که میخواهیم کاربر به آن نقطه هدایت شود به این لینک ، مقصد لنگر می گویند. و دیگری لینکی که با کلیک کردن بر روی آن به محل لینک مقصد هدایت می شویم که غالبا به آن مبدا لنگر می گویند.
در هنگام ایجاد مقصد لنگر می بایست به جای استفاده از صفت href در تگ a از صفت name یا id برای نامگذاری آن استفاده کرد. ما از این نام در لنگر برای جهش به آن بخش بهره می بریم . حال در تگ a مبدا لنگر می بایست در صفت href از کاراکتر # و به دنبال آن نامی که برای مقصد انتخاب شده است استفاده کنیم. به کد زیر دقت کنید که متن همین جلسه است که با استفاده از لینک های لنگری ساخته شده :
نتیجه کد در مرورگر:






سپس به طور مثال با کلیک بر روی لینک، به قسمت لینک های دانلود خواهید رفت:


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

<"a href="page.html#anchorname>


استفاده میشود، و اگر مقصد لنگر روی یک صفحه روی یک سرور(سایت) دیگر قرار گرفته باشد می بایست از دستور:

<"a href="http://www.sitename.com/path/page.html#anchorname>

استفاده شود.

مقصد لنگر می تواند هر عنصر دیگری غیر از عنصر a باشد. در این حالت نیز می بایست از صفت name یا id در این عنصر با یک مقدار مجزا در کل صفحه استفاده کرد. به طور مثال اگر مقصد لنگر ما یک تیتر باشد می توان از کد زیر استفاده کرد:

در لینک مقصد:
<h1 name="titr1"> this is a Heading</h1>

و در لینک مبدا از کد:

<a href="#titr1"> Heading1 </a>


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

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





 

F@tima s332

عضو جدید
کاربر ممتاز
قسمت پنجم

قسمت پنجم

تگ </ img>

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



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

* right : عکس را در سمت راست متون اطرافش قرار می دهد.
* left : عکس را در سمت چپ متون اطرافش قرار می دهد.
* top : قسمت بالای عکس با خطی که در آن قرار دارد تراز خواهد شد.
* middle : میانه های(وسط) عکس با خطی که در آن قرار دارد تراز خوهد شد.
* bottom : قسمت پایینی عکس با خطی که در آن قرار دارد تراز خوهد شد.

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

border : میزان ضخامت حاشیه عکس را با عددی بر حسب px مشخص می کند.

height : ارتفاع عکس را بر حسب px یا درصد بیان میکند.

width : عرض عکس بر حسب px یا درصد بیان می کند.

hspace: میزان فاصله سمت چپ و راست عکس نسبت به عناصر اطراف را کنترل میکند.

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

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

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

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





درج توضیحات در HTML


همانند بسیاری از زبان های برنامه نویسی امکان گنجاندن توضیحات در صفحات HTML نیز وجود دارد. معمولا از توضیحات در HTML برای خواناتر کردن کدها و مشخص کردن نقاط ابتدایی و انتهایی بخش های صفحه استفاده می شود. یک توضیح در HTML به شکل زیر است:
<-- this is a comment --!>

همانطور که می بینید یک توضیح با !> و با < ختم می شود. در حقیقت متنی که بین دو -- ابتدایی و دو -- انتهایی قرار میگیرد توسط مرورگر ها به عنوان comment تعبیر خواهد شد.

دفت داشته باشید که بین دو -- ابتدایی و انتهایی نباید -- دیگر قرار گیرد. به عنوان مثال دستور زیر نادرست است:

<-- this is a -- comment --!>

یک دستور comment میتواند حاوی بیش از یک متن به عنوان توضیحات باشد. به عنوان مثال دستور زیر دو comment را تعریف میکند:

<-- this is a -- -- comment --!>

در دستور فوق this is a یک comment ، و عبارت comment ، یک comment دیگر است.

نکته:دقت داشته باشید که تعداد کاراکترهای -- در یک comment صحیح باید همیشه مضربی از ۴ باشد.

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

<--<h2>This paragraph not Display in page</h2>--!>

اما نمی توان از comment هابرای از کار انداختن صفت های داخل یک تگ استفاده کرد. به عنوان مثال کد زیر نمی تواند از عملی که صفت title انجام می دهد. جلوگیری کند:

<p <!-- title="my paragraph" -->> This is a Pragraph </p>
 

Similar threads

بالا