تبليغاتX
Learning About Computer & Internet
خانهایمیلآرشیوRss
Search

طراحی صفحات وب 

موضوع: HTML یکشنبه نوزدهم آذر 1385 8:30

چنانچه قصد داريد برنامه نويسي را شروع كنيدمناسب است كه به نكات زير توجه نماييد.
? در دنياي اينترنت از پروتكل هاي مختلف (پروتكل-Protocol- زبان قابل فهم بين كامپيوترها است)استفاده ميشود. دو پروتكل زير بيشترين كاربرد را در كار يك برنامه نويس دارد.
1- پروتكل HTTP (Hyper text Transfer Protocol)
عمدتا از اين پروتكل براي ارسال درخواستها و پاسخها كه بين مرورگر –Browser- وسرور وب انجام ميشود استفاده مي گردد . ابتدا مرورگر درخواستي را براي سرور مي فرستد . سرور درخواست را بررسي كرده وجواب آن را براي مرورگر ارسال ميكند . web server مشهور IISوApachi ميباشد.
2- پروتكل FTP (File Transfer Protocol)
هنگاميكه بخواهيد فايلهاي آماده شده براي سايت را به مكان اصلي آنها بر روي يك سرور وب (web host) منتقل كنيد كه اين سرور از لحاظ مكاني دور از دسترس شما قرار دارد (مثلا شما در ايران هستيد وسرور شما در كانادا مي باشد ) از اين پرووتكل براي رد وبدل فايلها بين كامپيوترها استفاده مي كنيد . ابزارهايي براي اين كار تهيه شده است.
? اسكريپت نويسي (كدهاي برنامه نويسي است كه شما در كنار HTML هاي خود قرار مي دهيد تا كيفيت وتوان سايت را افزايش دهند )كه معمولا براي يك سايت صورت مي گيرد به دو دسته زير تقسيم ميشوند.
1- اسكريپت نويسي طرف مرورگر (Client) كه عمدتا با زبان javascript نوشته ميشود . علت استفاده از اين زبان ، پشتيباني اكثر مروگر ها از آن ميباشد. زبان ديگر اسكريپت نويسي طرف مرورگر VBScript است كه فقط مرورگر Internet Explorer با آن مي تواند كار كند .
برنامه اي كه شما مي نويسيد توسط مرورگر اجرا خواهد شد . اين برنامه ها نمي توانند كاري خارج از محيط مرورگر انجام دهند (مثلا نميتوانند فايلي ساخته يا فايلي را از روي هارد كاربر پاك كنند)
2- اسكريپت نويسي طرف سرور (Server) كه قابليتهاي آن بسيار بيشتر از نوع قبلي است و بر روي كامپيوتر سرور web اجرا مي شوند و نتايج آنها به صورت html يا xml براي مرورگر استفاده مي شود .مثلا اگر بخواهيد از بانكهاي اطلاعاتي در سايت خود استفاده كنيد يا e-mail كاربران را دريافت كرده و در بانك خود ذخيره كنيد يا e-mail هايي را براي كاربران خود بفرستيد ، با يستي از اسكريپت طرف سرور استفاده كنيد. براي نوشتن اين اسكريپتها زبانهاي مختلفي وجود دارد كه از جمله آنها موارد زير هستند.
- ASP (Active Server Page) بر روي كامپيوترهاي ويندوز و سرور وب
IIS (Internet Information Server) كار ميكند .
- JPS (Java Server Page) بر روي كامپيوترهاي ويندوز و IIS يا Unixو Linux و Apachi (سرور وب) كار مي كند.
- PHP بر روي كامپيوترهاي ويندوز و IIS و Unixو Linux و Apachi كار مي كتد .
- Perl بر روي كامپيوترهاي ويندوز و IIS و Unixو Linux و Apachi كار مي كتد .
- CFML (Cold Fusion Markup Languege) كه با سرور Cold Fusion محصول شركت ماكرومديا كار مي كند و بر روي كامپيوترهاي ويندوز وUnix قابل استفاده است.
در بررسي هاي انجام شده نشان مي دهد كه اگر بخواهيد يك كار مشخص را با زبانهاي فوق بنويسيد بيشترين حجم كد نويسي را در PHP و كمترين حجم كدنويسي را در CFML خواهيد داشت.
هنگام انتخاب زبان دقت به نكته زير بسيار بسيار مهم است.
چون برنامه هايي كه مي نويسيد بر روي سرور وب (Web Host) اجرا خواهند شد لذا بايستي مطمئن شويد كه سرور نهايي اينترنت شما از كداميك از اين زبانها پشتيباني ميكند.
در بين اين زبانها ASP و PHP در ايران بيشتر استفاده شده است. چون ويندوز وIIS وASP محصول شرمت مايكروسافت هستند لذا با هم بيشتر سازگار بوده و سرعت بيشتري نسبت PHP روي ويندوز و IIS ارائه مي دهند. ولي PHP بر روي سرور Unixو Linux و Apachi با كارايي بسيار بالايي كار مي كند. ASP نميتواند روي سرورهاي Linux و Apachi كار مي كند.
نكته: علاوه بر زبانهاي اسكريپت نويسي طرف سرور ، امكان استفاده از فايلهايي باينري CGI كه همان DLL ها وEXE ها هستند نيز وجود دارد.
اين نوع از فايلها چون Visual Cttو Visual Basicو Delphi و مانند اينها ساخته شده و در سرور وب نصب مي شوند. اين روش قديمي بوده و در حال حاضر كاربرد كمي دارد.
قوانين اصلي براي تهيه يك سايت:
1- بايستي ابتدا تحليل وتراحي شده و به خوبي سازماندهي شود . تعيين ساختار سايت و اهداف آن قدم اول خواهد بود .
2- طراحي صفحات بايستي به گونه اي باشد كه كاربر سريعا به موضوع مورد نظر برسد.
3- بگونه اي طراحي شود كه امكان Update سايت براي شما يا مدير سايت راحتر باشد.
4- روشهاي مختلفي براي حركت بين صفحات (navigation) را در اختيار بازديد كننده قرار دهد.
5- از درج ليستها و منوهاي با طول رياد خودداري شود.
نكات فني :
1- ساختار روبرو نمونه اي از ساختار مناسب براي يك سايت چند زبانه است.
2- تا جايي كه ممكن است سايت را Flat طراحي كنيد تا آدرس دهي كوتاه شده و FTP آن راحتتر شود.
3- از فهرستهاي مجازي –Virtual Directory- استفاده كنيد.
4- تقسيم بندي فايل بستگي به كاربرد ومحتويات آن دارد . مثلا تقسيم بندي فيزيكي بر اساس محصولات يا بر اساس نوع محتويات مانند Sample , Reference , Resource
براي ساخت Virtual Directory مراحل زير را طي كنيد.
1- برنامه Internet Services Managerرا از آدرسControl Panel\Administrative Tools اجرا كنيد.
2- منويVirtual Directory IIS\Default Web Site\New\ را اننتخاب كنيد.
3- نام فهرست مجازي را وارد كنيد.
4- آدرس فيزيكي مرتبط با نام مجازي را مشخص كنيد.
5- مجوزهاي دسترسي به اين فهرست را تعيين كنيد.
براي اطلاعات بيشتر به help برنامه IIS مراجعه كنيد.
مثلا نام مجازي فهرست D:\Site\ Download را Download مي گذاريد. براي اشاره به فايلهاي درون اين مسير از URL زير استفاره مي كنيد.
http://localhost/ Download/…
Frame يا بدون فريم:
مزاياي استفاده از فريم ها
1- navigate بين صفحات را آسان كرده و يك نقطه مرجع براي كل سايت بوجود مي آورد.
2- صفحه را به چند بخش تقسيم مي كند و ميتواند طراحي وساخت صفحات را ساده نمايد.
3- سبب Loud شدن سريعتر صفحات مي شود چرا كه بعضي ازبخشهاي صفحه نياز به Loud مجدد ندارد.
4- بهترين را ه براي ساخت Control Panel است.
معايب استفاده از فريم ها
1- بخشهايي از صفحه بصورت ثابت درآمده و از فضاي فعال صفحه مي كاهد.
2- گاهي اوقات پيچيدگي برنامه نويسي طرف سرور و طرف مرورگر را افزايش مي دهد.
3- براي اولين بار كه كاربر به سايت وصل ميشود بار بيشتري را روي سرور قرار مي دهد چرا كه در آن واحد چندين فايل html يا asp وغيره بايستي براي مرورگر فرستاده مي شود .
4- فريم ها با همه مرورگرها سازگار نيستند.
براي آنكه بتوان در مرورگرهايي كه امكان نمايش فريم ها را ندارند امكاناتي را فراهم نمود مي توان به صورت زير يك HTML تهيه كرد.
.
.
.
<Frameset …>
</ Frameset>
<NoFrames>
متن مورد نظر براي مرورگرهايي كه امكان كار با فريم ها را ندارند ويك Link براي رفتن به صفحه بدون فريم
</ NoFrames>
براي ايجاد سايت دو نسخه از آن نياز است يا بهتر است دو نسخه باشد.
1- نسخه اول كه نسخه آزمايشي بوده و بر روي كامپيوتر محلي خود ساخته ميشود. هر گونه تغيير وتحولي را ابتدا روي اين نسخه انجام داده و وقتي صفحه اي كامل شد يا بخشي از سايت تكميل گرديد به مكان اصلي آن سرور Remote است انتقال دهيد.
2- نسخه نهايي كه در سرور اصلي قرار ميگيرد و بازديدكنندگان ازآن استفاده مي كنند در بيشتر حالات اين سرور دور از دسترس قرار دارد.
براي انتقال نسخه آزمايشي يا صفحات تكميل شده به سرور اصلي (remote) از FTP استفاده مي شود.
ابزارهايي كه معمولا براي FTP استفاده ميكنند شامل WS-FTP و Cute-FTP و Windows Commander و Explorer ويندوز مي باشد.
بعضي از برنامه ها مانند Front Page و remote r مي تواند يك سايت remoteرا خوانده و ساختار آن را ايجاد نموده و سپس با تغيير هر فايل آن را به سرور اصلي FTP كنند.
براي FTP كردن حداقل سه پارامتر زير نيازاست.
1- نام سرور ftp مانند ftp.yahoo.com
2- نام كاربر Username
3- رمز عبور Password
ابزارهاي مورد استفاده در طراحي صفحات
معروفترين ابزارها براي ساخت فايلهاي css , javascript , asp , html وغيره موارد زير هستند. البته FrontPage در زمينه html توانايي زيادي داردولي در بقيه موارد ضعف دارد.
1- Front Page
2- Dreamweavermx
3- Code Charge
4- ASP Edite
كدام مرورگر ؟
با بررسي هاي انجام شده و آمارهاي موجود در اينترنت بيشترين مرورگر استفاده شده در اينترنت Internet Explorer با نسخه هاي 6.0 , 5.0 , 4.0 مي باشد كه حدود 75% كاربران را پوشش مي دهد. 25% بقيه را Netscape و Opera وغيره هستند.
با توجه به اينكه javascript و استفاده از امكانات خاص اسكريپت نويسي (DOM) در اين مرورگرها متفاوت است لذا بنظر مي رسد اگر بنظر مي رسد اگر سرمايه گذاري براي Internet Explorer شود نتيجه بهتري خواهد داشت . البته بعضي ها كدهاي javascriptرا براي انواع مرورگرها مي نويسند تا بر روي همه آنها كار كند . اين زحمت زيادي به دنيال خواهد داشت.
بعضي از tag هاي خاص كه در بخش <HEADE> صفحه html قرار مي گيرند.
1- تك META يكي از tag هاي مهم اين بخش از صفحه Html است . اولين نوع آن ، نوع كاراكترهاي درون صفحه را تعيين ميكند.

<META HTTP-EQUIV = "Content-Type" CONTENT="text/html;charset= window-1256">

سبب مي شود صفحه html داراي داده هاي سازگار با Codepage استاندارد 1256 شود. اين كد پيج براي صفحاتي بكار مي روند كه داده هاي آن فارسي يا عربي استاندارد Unicode هستند.
براي تايپ اين نوع حروف مي توانيد از ويندوزها ي2000 يا XP كه صفحه كليد فارسي يا عربي دارند استفاده كنيد. چنانچه به اين روش عمل كنيد ، صفحات توليد شده شما بر روي هر نوع كامپيوتري كه ازسيستم Unicode استاندارد پشتيباني مي كنند قابل ديدن خواهد بود بدون آنكه نياز به نصب فونت باشد براي صفحات انگليسي از windows-1252 استفاده مي شود.
2- مدل دوم META سبب ميشود تا صفحه شما در موتورهاي جستجو مانند yahoo يا google بدرستي ايندكس شوند و هنگام جستجو جوابهاي صحيح توليد شود.

<META NAME ="KEYWORDS" LANG= "EN" CONTENT="food , travel , family">

آنچه درون CONTENT مي آيد كليدواژه هاي مربوط به متون صفحه است.
3- مدل سوم META سبب مي شود صفحه شما بطور اتوماتيك بعد از n ثانيه مجدد Load شده و Refreshشود.

<META NAME = "REFRESH" CONTENT="10 , http://MySite/file.htm">

شماره 10 تعيين مي كند ككه بعد از 10 ثانيه صفحه جاري ، جاي خود را به صفحه اي با آدرس URL ذكر شده بدهد.
در پايان اميد است اين نكات به طراحي شما كمك كرده باشد.
با آرزوي موفقيت
نوشته شده توسط هادی قنبری | لینک ثابت |

CSS 

موضوع: HTML یکشنبه نوزدهم آذر 1385 8:30

تمامي tag هاي HTML خواصي دارند كه بوسيله آنها مي توان نحوه نمايش آنها را تغيير داده يا تنظيم نمود . از جمله اين خواص (Attributes) ميتوان به فونت ، رنگ ، مكان نمايش وغيره اشاره نمود. اين attribute ها از سه طريق زير قابل تعريف هستند.
1- هنگامي كه HTML tag نوشته مي شود attribute هاي آن ذكر شود. مثال:

<IMG SRC = "cone . gif">

2- بوسيله CSS بخشي از attribute ها قابل تنظيم هستند. مثال:

<p style = "font family : Arial" > This is a sample </p>

اين روش به سه شكل قابل اجرا مي باشد كه بعدا توضيح داده مي شود.
3- بوسيله javaScript وبرنامه نويسي مي توان خواص (Property) ها هر شي موجود در صفحه HTML را تغيير داد. با توجه به اينكه در محيط مرورگر (browser) همه چيز به عنوان شي (object) در نظر گرفته مي شود لذا قابليت اشاره به خواص شي به خواندن يا نوشتن آنها فراهم شده است. اين بحث به Document Object Model (DOM) معروف است كه در فصل javaScript توضيح داده خواهد شد.
مزاياي استفاده از CSS چيست؟
1- سبب مي شود تا به راحتي بتوان شكل و شمايل صفحه HTML يا تمام صفحات يك سايت را با سرعت هر چه بيشتر تغيير داد. به عبارت ديگر ميتوان يك مركز كنترل به وجود آورد.
2- اگر از CSS به نحو خوبي استفاده شود سبب كاهش حجم صفحات سايت و كمتر شدن حجم download صفحات براي كاربران مي گردد. در نتيجه سرعت سايت بيشتر شده و كارايي آن افزايش مي يابد.
3- ميتواند سرعت توليد صفحات HTML را افزايش دهد. اين كار بوسيله ساخت الگوها(Template) و استفاده مكرر از آنها عملي مي شود.
CSS و Browser
مرورگرهاي موجود كه عمدتا Internet Explorer و Netscape و Opera هستند سعي كرده اند تا از استانداردهاي CSS1 و CSS2 استفاده كنند.ولي بهر حال اختلافاتي با هم دارند. آنچه كه از اين به بعد توضيح داده مي شود در ارتباط با IE 4.0 به بعد مي باشد. اين نوع مرورگرها ونسخه هاي بعدي آن بيشترين نوع مرورگرهاي استفاده شده در سطح اينترنت هستند.
انواع Style Sheets
CSS به سه روش زير مي تواند با صفحات HTML بكار رود.
1- Inline Style Sheets ، در اين حالت style مورد نظر به يك tag خاص اضافه شده و تنها بر روي محتويات همان tag تاثير مي گذارد. اين نوع Style Sheets از اولويت اول برخوردار بوده و دو روش ديگر را خنثي مي كند. مثال :
<p style ="font: 12pt Arial">
Inline Style Sheets Test
</p>

2- Embeded Style Sheets : در اين حالت CSS ها در يك محل در فايل HTML جمع شده ومي تواند تعاريف ساده يا پيچيده داشته باشد. ميزان تعريف CSS ها بستگي به نياز شما دارد . اين روش از اولويت كمتري نسبت به روش قبل برخوردار بوده ولي اولويت آن نسبت به روش بعدي (Linked Style Sheets) بيشتر است و تعاريف آن را خنثي مي كند. مثال:
<style>
H1 {font : 28pt Arial Black }
H2 {font : 20pt Arial Red }
P {font : 10pt Times }
</style>

اين style در بخش <HEADE>…</HEADE> صفحه HTML قرار مي كيرد.
3- Linked Style Sheets: در اين روش تمام تعاريف CSS در فايلي با پسوند (.CSS) قرار ميگيرد. سپس هر فايلي كه نيازبه اين تعاريف دارد آنرا بصورت زير به خود متصل مي كند

<link rel = "style sheet" href = "My Style.css" type = "text/css">

اين tag در محدوده <HEADE>…</HEADE> صفحه HTML مورد نظر قرار مي گيرد .
فايل My Style.css ميتواند مشابه زير باشد.

BODY{background : # FFFFFF : color : # FFFFOO : margin-top : 10px ; margin-left : 0.75in ; margin-right : 0.75in}
P { font-family : 12pt Arial , Times , Serif ;}
H1 {Color : # OOFFFF }
H2 {Color : # FFOOFF }
H3 {Color : # OOFFOO }

نحوه نگارش CSS
براي نوشتن يك تعريف Style Sheets بايستي اول براي مرورگر تعيين نمود كه اين تعاريف را بر روي كدام tag يا كدام دسته از tag ها اعمال كند. لذا انتخاب كننده (Selector) مطرح ميشود.
مدل اول از Selector ها اصطلاحا type selector مي نامند. در اين حالت بر روي عناصر خاصي از HTML اعمال مي شوند. بعنوان مثال

H1 {font family : Arial }
H2 {font-color : blue }
P {font-family : Times , Serif , font-size : 10pt

در اين مثالها P, H1 , H2 بعنوان Selector هستند وآنچه كه درون علامتهاي {} است تعاريفي است كه بر روي tag هاي نوع Selector اعمال مي شود. مثالهاي ديگر :

H1, H2 , H3 {font-family : Arial , Times , Serif}
H4 , H5 , H6 {Color : blue ;font-weight : bold}

مدل دوم از Selector ها را اصطلاحا Attribute Selector مي نامند . در اين حالت يكسري Attribute هايي به tag هاي HTML اضافه شده وبراي آن tag كار خاصي انجام ميدهد. در اين مثال ALT يك Attribute است كه به IMG tag اضافه شده است.

<IMG SRC = "jpboton.jpg" ALT = "Button for Jumping">

از ديگر حالتهاي اين مدل مي توان به ID و CLASS اشاره كرد.
Class Attribute گروهي از عناصر هستند كه همه آنها داراي مقدار مشابهي براي Attribute CLASS خود مي باشند. هر tag اي كه در محدوده و باشد مي تواند يك كلاس داشته باشد. وقتي به يك عنصر ، كلاس داده شود تمام نمونه هاي آن عنصر مي توانند از كلاس استفاده كنند. مثال:


<style>
Spanish {font-family :"American Type writer" , zar}
English {font-family : Arial , Helvetica , Sanserif }
<style> <P class = "spanish"> Estas palabras se expersen en Espanoles </p>
<P class = "english"> This word are expressed in English </p>


اين نوع از كلاسها ميتوانند به هر tag اي اضافه شوند.

<H1 class = "Spanish"> Bienvenidos </H1>
<H3 class = "English"> Welcome </H3>

چنانچه بخواهيد انواعي از كلاسهاي يك tag خاص (مثلا H1) را داشته باشيد مي توانيد به صورت زير عمل كنيد.

H1.blue {font-color : blue}
H1.red { font-color : red}
H1.green { font-color : green}

و به صورت زير ميتوان از آنها استفاده كرد.

<H1 class = "blue"> Water </H1>
<H1 class = "red"> Blood </H1>
<H1 class = "green"> Leaf </H1>

براي آنكه بتوان يك كلاس را به چندين tag هاي مختلف اعمال كرد بايستي از ذكر نام tag هنگام تعبيف كلاس خود داري كرد. در مثال زير اولين اولين كلاس فقط به tag هاي H3 اعمال مي شود ولي كلاس دوم به هر نوع tag اي كه از اين كلاس استفاده كند اعمال مي گردد.

H3. English {font-family : Arial , Times , Serif ; font-size : 12pt}
. English { font-family : Arial , Times , Serif ; font-size : 12pt}

بهترين مدل از CSS در كلاس پياده سازي مي شود و قدرت انعطاف زيادي دارد. به راحتي ميتواند طداحي را تغيير دهد.
ID Attribute طراحي شده است تا فقط بر روي يك عنصر اعمال شود. بايستي يك ID selector را همانند روش class تعريف كرد ولي در ابتداي تعريف آن يك علامت # و به دنبال آن نام مي آيد.

# reserved {color : black}
<em id ="reserved">word</em>

در مورد كلاسها يك نوع خاص به نام شبه كلاس Pseudo-class نيز وجود دارد. اين نوع از كلاسها ، اشاره به زير مجموعه هاي يك tag مي كنند. مثلا در مورد لينك (A) شبه كلاسهاي زير وجود دارد.

A : link {color : green }
A : visited {color : red }
A : active {color : blue }

مدل ديگري ازSelector ها را اصطلاحا Contextual Selector مي نامند. گاهي اوقات لازم است يك style هنگامي به يك عنصر اعمال شود كه داراي عنصر parent خاصي باشد.
مثلا مي خواهيد به <P>هاي درون <DIV> يك style خاصي اضافه كنيد. كه نبايستي به <P>هاي خارج از <DIV> اضافه شود. اين مدل از Selector ها به صورت زير تعريف مي شوند.
به تمام tag هاي <P> اعمال مي شود . P{font-Size : 12pt}
فقط به tag هاي <P> درون <DIV> اعمال مي شود. DIV P{ font-Size : 10pt}
به متون EM درون OL و درون P اعمال مي شود. P OL EM { font-weight : bold}
به متون EM درون H1 يا درون H2 اعمال ميشود. H1 EM , H2 EM {font-color : red}
در مورد attribute , font هاي زير وجود دارد.

Font-Style , font-weight , line-height , font-variant , font font-family, font-Size ,


در مورد رنگ حالتها زير قابل استفاده است.

H1 { font-color : rgb (80 , 200 , 200)}
H1 { font-color : rgb (# 5DC8FA)}
H1 { font-color : rgb (31% , 78% , 98%)}
H1 { font-color : # 2030FF}
آدرس چند سايت در ارتباط با طراحي وب

www.htmlhelp.com
www.mvd.com
www.webreference.com
www.tappi.org
www.fontsite.com
www.virtual-coach.com
جدول زير ارث بري برخي از CSS attribute را نشان مي دهد. آنهايي كه ارث مي برندچنانچه در محدوده يك parent tag (مانند BODY) قرار گيرند از آن ارث برده و خود را هماهنگ مي كنند.
موارد كه ارث مي برند شامل

Color , font , font-family, font-Size , font-weight , line-height , font-variant ,
Letter-spacing , line-height , text-align , text-internet , text transform
Word-spacing , list-style , list-style-position , list-style-type , white-space.
مواردي كه ارث نمي برند شامل :
Margin , margin-left (-right ,-top , -bottom), padding , padding-left (-right ,-top , -bottom), text-decoration , vertical-align , background , background-attachment , background-color , background-image , background-position , background-repeat , border , border-color , border-left (-right ,-top , -bottom) , border-left-width (-right- ,-top- , -bottom-) , border-style , border-width , clear , display , float , height , width.
توليد CSS ها بوسيله ابزارها
برنامه هاي مختلفي هستند كه ابزار توليدCSS را دارند. از مهمترين آنها موارد زير هستند.

1- Microsoft Front Page
2- Macromedia Dream Weaver
3- Adobe Go Live
4- Web Express
5- Home Site
6- Hot Metal
7- Hot Dog
8- Adobe Page Mill
9- Symantec visual page
10- Top Style Pro

نوشته شده توسط هادی قنبری | لینک ثابت |

مرجع فنی نکات وب 

موضوع: HTML یکشنبه نوزدهم آذر 1385 8:29

Anchor پيوند، لينک، (لنگر كشتي)
Attribute شناسه، نشان، صفت
Browser, user agent مرورگر، شبکه نورد، بروزر
Caption عنوان ، سرلوحه
Character نويسه، کاراکتر، دخشه
Client سرويس گيرنده، مشتري ، ارباب رجوع
DHTML اچتمل ديناميک، FAQ
Division, Div بخش، قسمت، دسته بندي
Download گرفتن اطلاعات از وب سرور
Document سند، متني اچتمل
Edit ويرايش
Element المان، عنصر
Explorer جستجوگر، مكتشف
Extention انشعاب فايل
FAQ بيشترين سؤالات پرسيده شده در مورد يک موضوع
Font قلم، خانواده حروف
Format قالب، فرمت
Frame قاب، چهارچوب
Frameset مجموعه اي از فريمها
FTP استانداردي براي مبادله فايل (File Transfer Protocol)
href آدرس متن مختلط (hyerlink reference)
IP Internet Protocol
JavaScript جاوا اسکريپت، زباني براي اسکريپت نويسي
HTTP استاندارد تبادل ابر متن ها (Hypertext Transfer Protocol)
Hyper text ابر متن، متن مختلط
List فهرست
Link پيوند، لينک
Online آنلاين، سرخط
Padding لايه گذاري، لفافه
Page, Web page صفحه، متن
Publish انتشار، بردن اطلاعات روي وب سرور
Protocol استاندارد ارتباطي، فهرست پروتوکلهاي مهم در اينترنت
Robot نرم افزاري خودکار در وب
Site. Web site پايگاه، سايت
Script اسکريپت، دستخط، متن نمايشنامه
Spacing فاصله گذاري ، فاصله
Span محدوده، گستره، وجب
Target هدف و مقصد
Table جدول، آرايه
Tag تگ، برچسب
TCP/IP نوعي استاندارد ارتباطي (Transmission Control Protocol/Internet Protocol)
Unicode استانداري براي محيط هاي چند زبانه
Upload بردن اطلاعات روي وب سرور، معمولا با کمک نرم افزارهاي FTP انجام ميپذيرد.
URL آدرس اينترنتي، خلاصه شده Uniform Resource Locator
User, Surfer کاربر، وبگرد، بازديدکننده
Weblog وب نويسي، تارنگاري
Webmaster مديريت سايت
Web Server سرويس دهنده وب، نرم افزاري که وظيفه اصليش دادن سرويس به درخواستهاي دريافت شده از وب ميباشد.
Web, WWW وب، تار عنکبوت جهاني، خلاصه شده World Wide Web

  •  سايتهائي مرجع براي يادگيري اچتمل :

    1) Welcome to HTML School
    2) Getting Started
    3) Authoring HTML Basics
    4) Getting started with HTML
    5) A Beginner's Guide to HTML
    6) HTML Tutorial
    7) HTML Tag Quick Reference Guide
    8) HTML FAQ Knowledge Base
    9) HTML 4.01 Specification


    • نوشته شده توسط هادی قنبری | لینک ثابت |

    تگ های اصلی و جانبی 

    موضوع: HTML یکشنبه نوزدهم آذر 1385 8:28

    تگهاي اصلي (Basic Tags)
    <html></html> ايجاد سندي اچتمل
    <head></head> ايجاد اطلاعات شناسنامه اي سند مانند عنوان و ...
    <body></body> ايجاد بدنه و قسمت قابل مشاهده سند اچتمل

    تگهاي ناحيه Header
    <title></title> تعيين عنوان سند

    شناسه هاي مهم تگ body
    <body bgcolor=?> تعيين رنگ زمينه بر اساس نام رنگ يا معادل هگز
    <body text=?> تعيين رنگ نوشته بر اساس نام رنگ يا معادل هگز
    <body link=?> تعيين رنگ پيوندها بر اساس نام رنگ يا معادل هگز
    <body vlink=?> تعيين رنگ پيوندهاي بازديدشده بر اساس نام رنگ
    <body alink=?> تعيين رنگ پيوند فعال بر اساس نام رنگ يا معادل هگز

    تگهاي متن و نوشته
    <pre></pre> نمايش متن هاي از قبل فرمت شده (preformatted)
    <hl></hl> ايجاد بزرگترين سر تيتر
    <h6></h6> ايجاد کوچکترين سر تيتر
    <b></b> ايجاد متن توپر
    <i></i> ايجاد متن مورب و ايتاليک
    <tt></tt> ايجاد متن از نوع تله تايپي
    <cite></cite> ايجاد citation معمولا ايتاليک
    <em></em> نمايش تاکيد شده متن (توپر يا مورب)
    <strong></strong> نمايش تاکيد شده متن (توپر يا مورب)
    <font size=?></font> تعيين اندازه قلم از 1 تا 7
    <font color=?></font> تعيين رنگ قلم بر اساس نام رنگ يا مقدار هگز آن

    پيوندها
    <a href="URL"></a> ايجاد پيوند
    <a href="mailto:EMAIL"></a> ايجاد پيوندي از نوع mailto
    <a name="NAME"></a> ايجاد پيوندي نامگذاري شده در يک سند
    <a href="#NAME"></a> ارجاع به يک پيوند نامگذاري شده

    فرمت دهي
    <p></p> ايجاد پاراگرافي جديد
    <p align=?> ترازبندي پاراگراف در سمت left, right, or center
    <br> رفتن سر سطر جديد
    <blockquote> </blockquote> عنوان سازي متن
    <dl></dl> ايجاد فهرستهاي تعريفي
    <dt> ايجاد عنصري از يک فهرست تعريفي
    <dd> ايجاد شرح و توصيف يک عنصر فهرست تعريفي
    <ol></ol> ايجاد فهرستهاي مرتب
    <li></li> ايجاد يک قلم اطلاعاتي از يک فهرست
    <ul></ul> ايجاد فهرستي نامرتب
    <div align=?> تگي براي فرمت دهي بلوکي بزرگ از کدهاي اچتمل
    المانهاي گرافيکي
    <img src="name"> ايجاد يک تصوير
    <img src="name" align=?> تراز بندي تصوير (left, right, center; bottom, top, middle)
    <img src="name" border=?> تعيين ضخامت مرز يک تصوير
    <hr> درج خطي افقي
    <hr size=?> تعيين ارتفاع خط افقي
    <hr width=?> تعيين عرض خط بر اساس مقدار واقعي يا درصدي
    <hr noshade> ايجاد خطي افقي بدون سايه

    جداول
    <table></table> ايجاد جدول
    <tr></tr> ايجاد رديف در جداول
    <td></td> ايجاد خانه هاي جداول
    <th></th> ايجاد عنوان ستونهاي يک جدول

    شناسه هاي جداول
    <table border=#> تعيين مقدار ضخامت مرزهاي يک جدول
    <table cellspacing=#> تعيين فاصله بين خانه هاي جدول
    <table cellpadding=#> تعيين فاصله بين محتواي يک خانه و مرزهاي آن
    <table width=# or %> تعيين عرض جدول بر اساس پيکسل و يا درصدي
    <tr align=?> or <td align=?> تعيين ترازبندي خانه هاي جدول (left, center, right)
    <tr valign=?> or <td valign=?> ترازبندي عمودي خانه هاي جدول (top, middle, bottom)
    <td colspan=#> تعيين تعداد ستون هائي که بايد يکي شوند.
    <td rowspan=#> تعيين تعداد سطر هائي که بايد يکي شوند.
    <td nowrap> باعث جلوگيري از شکسته شدن متن در خانه جدول ميشود.

    فريمها
    <frameset></frameset> تعريف و ايجاد مجموعه اي از فريمها
    <frameset rows="value,value"> شناسه اي براي تعريف رديفهاي يک مجموعه فريم بر اساس اندازه واقعي بر حسب پيکسل و يا ابعاد درصدي
    <frameset cols="value,value"> شناسه اي براي تعريف ستونها يک مجموعه فريم بر اساس اندازه واقعي بر حسب پيکسل و يا ابعاد درصدي
    <frame> تعريف فريمي از مجموعه فريمها
    <noframes></noframes> تعيين متني که بايد در صورت عدم پشتيباني مرورگر از فريمها بايد نمايش داده شود.

    شناسه هاي فريمها
    <frame src="URL"> تعيين سند اچتمل داخل فريم
    <frame name="name"> تعيين نام براي يک فريم
    <frame marginwidth=#> تعيين عرض حاشيه راست و چپ فريم
    <frame marginheight=#> تعريف طول حاشيه بالا و پايين فريم بر اساس پيکسل
    <frame scrolling=VALUE> تعيين اينکه فريمي از Scroll bar استفاده کند يا نه. مقادير ممکن: yes، no و auto (حالت پيش فرض)
    <frame noresize> سبب جلوگيري از تغيير اندازه يک فريم ميشود.

    فرمها
    <form></form> ايجاد يک فرم
    <select multiple name="NAME" size=?></select> ايجاد يک منوي کرکره اي و تعيين تعداد اقلامي که قبل از scrolling نمايش داده خواهند شد.
    <option> تعيين هر يک از اقلام منو کرکره اي
    <select name="NAME"></select> ايجاد منوي کرکره اي
    <option> تعيين هر يک از اقلام منو کرکره اي
    <textarea name="NAME" cols=40 rows=8></textarea> ايجاد الماني براي ورود متن در بيش از يک خط با تعيين تعداد سطر و ستون ناحيه
    <input type="checkbox" name="NAME"> ايجاد چک باکسي با تعيين متن و عنوان آن
    <input type="radio" name="NAME" value="x"> ايجاد راديو باتن با تعيين متن و عنوان آن
    <input type=text name="foo" size=20> ايجاد الماني براي ورود متن با حداکثر يک سطر به همراه تعيين ابعاد بر اساس نويسه
    <input type="submit" value="NAME"> ايجاد دکمه اي از نوع ارسال و Submit
    <input type="image" border=0 name="NAME" src="name.gif"> ايجاد دکمه اي از نوع ارسال با کمک يک تصوير
    <input type="reset"> ايجاد دکمه خلاصي !! يا Reset

    نوشته شده توسط هادی قنبری | لینک ثابت |

    رنگ ها در HTML 

    موضوع: HTML یکشنبه نوزدهم آذر 1385 8:27

    در زبان اچتمل رنگها بر اساس ترکيب سه منبع نوري قرمز(Red)، سبز(Green) و آبي(Blue) تعريف ميشوند و هر منبع نوري شدتي بين 0 تا 255 را ميتواند داشته باشد. در اين استاندارد نور سفيد رنگي است حاصل از تداخل سه منبع نوري با شدت کامل يعني 255 و رنگ سياه حاصل تداخل سه نور با شدت 0 خواهد بود.(در واقع هر نقطه رنگي يا پيکسل بر روي صفحه مانيتور حاصل برخورد سه اشعه نوري قرمز، سبز و آبي ساخته شده توسط لامپ تصوير ميباشد.)

    توجه داشته باشيد که مطابق تعريف ذکر شده امکان استفاده از 256 x 256 x 256 يا حدود 16 ميليون (16,777,216) رنگ مختلف وجود داشته و در شناسه هاي مختلف به يکي از سه روش زير قادر به تعيين رنگ متن يا ناحيه اي خواهيد بود:

    1. استفاده از مقادير شدت نور در مبناي 16 با فرمت #RRGGBB که RR، GG, BB مقادير مبناي شانزده نورهاي قرمز، سبز و آبي ميباشند.
    2. استفاده از مقادير شدت نور در مبناي 10 با فرمت rgb(RRR,GGG,BBB) که RRR، GGG, BBB مقادير مبناي ده نورهاي قرمز، سبز و آبي ميباشند.
    3. استفاده از نامهاي استاندارد رنگها مانند red ، green و ... مطابق جدول انتهائي اين صفحه
    جدول زير حاوي جندين مثال و رنگ ترکيبي در مبناي ده و شانزده ميباشد:

    Color مبناي 16 (Color HEX) مبناي 10 (Color RGB) نام رنگ
       #000000 rgb(0,0,0) Black
       #FF0000 rgb(255,0,0) Red
       #00FF00 rgb(0,255,0) Lime
       #0000FF rgb(0,0,255) Blue
       #FFFF00 rgb(255,255,0) Yellow
       #00FFFF rgb(0,255,255) Cyan
       #FF00FF rgb(255,0,255) Fuchsia
       #FFFFFF rgb(255,255,255) White
       #C0C0C0 rgb(192,192,192) Silver


    مثالهائي از نحوه استفاده از رنگها در اچتمل:
    <p style="color:#FF00FF">Hello!</p> استفاده از مقدار در مبناي 16
    <p style="color:rgb(255,0,255)">Hello!</p> استفاده از مقدار در مبناي 10
    <p style="color:Fuchsia">Hello!</p> استفاده از نام رنگ
    body{ color: #444400; } تعيين رنگ نوشته المان body در Style sheet ها
    body{ background-color:#FFFFFF; } تعيين رنگ زمينه صفحه در Style sheet ها
    HR { color : #EEEECC;} تعيين رنگ خطوط افقي در Style sheet ها
    a:link {color:#c00B09;} تعيين رنگ پيوندها در Style sheet ها
    p {color:Yellow;} تعيين رنگ متون پاراگرافها در Style sheet ها


    جدول رنگهاي پايه اچتمل بر اساس مقادير هگز

    #EEEEEE   #DDDDDD   #CCCCCC   #BBBBBB   #AAAAAA   #999999  
    #888888   #777777   #666666   #555555   #444444   #333333  
    #000000   #000033   #000066   #000099   #0000CC   #0000FF  
    #330000   #330033   #330066   #330099   #3300CC   #3300FF  
    #660000   #660033   #660066   #660099   #6600CC   #6600FF  
    #990000   #990033   #990066   #990099   #9900CC   #9900FF  
    #CC0000   #CC0033   #CC0066   #CC0099   #CC00CC   #CC00FF  
    #FF0000   #FF0033   #FF0066   #FF0099   #FF00CC   #FF00FF  
    #003300   #003333   #003366   #003399   #0033CC   #0033FF  
    #333300   #333333   #333366   #333399   #3333CC   #3333FF  
    #663300   #663333   #663366   #663399   #6633CC   #6633FF  
    #993300   #993333   #993366   #993399   #9933CC   #9933FF  
    #CC3300   #CC3333   #CC3366   #CC3399   #CC33CC   #CC33FF  
    #FF3300   #FF3333   #FF3366   #FF3399   #FF33CC   #FF33FF  
    #006600   #006633   #006666   #006699   #0066CC   #0066FF  
    #336600   #336633   #336666   #336699   #3366CC   #3366FF  
    #666600   #666633   #666666   #666699   #6666CC   #6666FF  
    #996600   #996633   #996666   #996699   #9966CC   #9966FF  
    #CC6600   #CC6633   #CC6666   #CC3399   #CC66CC   #CC66FF  
    #FF6600   #FF6633   #FF6666   #FF6699   #FF66CC   #FF66FF  
    #009900   #009933   #009966   #009999   #0099CC   #0099FF  
    #339900   #339933   #339966   #339999   #3399CC   #3399FF  
    #669900   #669933   #669966   #669999   #6699CC   #6699FF  
    #999900   #999933   #999966   #999999   #9999CC   #9999FF  
    #CC9900   #CC9933   #CC9966   #CC9999   #CC99CC   #CC99FF  
    #FF9900   #FF9933   #FF9966   #FF9999   #FF99CC   #FF99FF  
    #00CC00   #00CC33   #00CC66   #00CC99   #00CCCC   #00CCFF  
    #33CC00   #33CC33   #33CC66   #33CC99   #33CCCC   #33CCFF  
    #66CC00   #66CC33   #66CC66   #66CC99   #66CCCC   #66CCFF  
    #99CC00   #99CC33   #99CC66   #99CC99   #99CCCC   #99CCFF  
    #CCCC00   #CCCC33   #CCCC66   #CCCC99   #CCCCCC   #CCCCFF  
    #FFCC00   #FFCC33   #FFCC66   #FFCC99   #FFCCCC   #FFCCFF  
    #00FF00   #00FF33   #00FF66   #00FF99   #00FFCC   #00FFFF  
    #33FF00   #33FF33   #33FF66   #33FF99   #33FFCC   #33FFFF  
    #66FF00   #66FF33   #66FF66   #66FF99   #66FFCC   #66FFFF  
    #99FF00   #99FF33   #99FF66   #99FF99   #99FFCC   #99FFFF  
    #CCFF00   #CCFF33   #CCFF66   #CCFF99   #CCFFCC   #CCFFFF  
    #FFFF00   #FFFF33   #FFFF66   #FFFF99   #FFFFCC   #FFFFFF  

     

    جدول رنگهاي نامگذاري شده و مقادير معادل هگز آن به ترتيب حروف الفباء

    Aliceblue
    #F0F8FF     		  Antiquewhite
    #FAEBD7     		  Aqua
    #00FFFF    		  
    Aquamarine
    #7FFFD4     		  Azure
    #F0FFFF     		  Beige
    #F5F5DC     		 
    Bisque
    #FFE4C4     		  Black
    #000000     		  Blanchedalmond
    #FFEBCD     		 
    Blue
    #0000FF     		  Blueviolet
    #8A2BE2     		  Brown
    #A52A2A     		 
    Burlywood
    #DEB887     		  Cadetblue
    #5F9EA0     		  Chartreuse
    #7FFF00     		 
    Chocolate
    #D2691E     		  Coral
    #FF7F50     		  Cornflowerblue
    #6495ED     		 
    Cornsilk
    #FFF8DC     		  Crimson
    #DC143C     		  Cyan
    #00FFFF     		 
    Darkblue
    #00008B     		  Darkcyan
    #008B8B     		  Darkgoldenrod
    #B8860B     		 
    Darkgray
    #A9A9A9     		  Darkgreen
    #006400     		  Darkkhaki
    #BDB76B     		 
    Darkmagenta
    #8B008B     		  Darkolivegreen
    #556B2F     		  Darkorange
    #FF8C00     		 
    Darkorchid
    #9932CC     		  Darkred
    #8B0000     		  Darksalmon
    #E9967A     		 
    Darkseagreen
    #8FBC8F     		  Darkslateblue
    #483D8B     		  Darkslategray
    #2F4F4F     		 
    Darkturquoise
    #00CED1     		  Darkviolet
    #9400D3     		  Deeppink
    #FF1493     		 
    Deepskyblue
    #00BFFF     		  Dimgray
    #696969     		  Dodgerblue
    #1E90FF     		 
    Firebrick
    #B22222     		  Floralwhite
    #FFFAF0     		  Forestgreen
    #228B22     		 
    Fuchsia
    #FF00FF     		  Gainsboro
    #DCDCDC     		  Ghostwhite
    #F8F8FF     		 
    Gold
    #FFD700     		  Goldenrod
    #DAA520     		  Gray
    #808080     		 
    Green
    #008000     		  Greenyellow
    #ADFF2F     		  Honeydew
    #F0FFF0     		 
    Hotpink
    #FF69B4     		  Indianred
    #CD5C5C     		  Indigo
    #4B0082     		 
    Ivory
    #FFFFF0     		  Khaki
    #F0E68C     		  Lavender
    #E6E6FA     		 
    Lavenderblush
    #FFF0F5     		  Lawngreen
    #7CFC00     		  Lemonchiffon
    #FFFACD     		 
    Lightblue
    #ADD8E6     		  Lightcoral
    #F08080     		  Lightcyan
    #E0FFFF     		 
    Lightgoldenrodyellow
    #FAFAD2     		  Lightgreen
    #90EE90     		  Lightgrey
    #D3D3D3     		 
    Lightpink
    #FFB6C1     		  Lightsalmon
    #FFA07A     		  Lightseagreen
    #20B2AA     		 
    Lightskyblue
    #87CEFA     		  Lightslategray
    #778899     		  Lightsteelblue
    #B0C4DE     		 
    Lightyellow
    #FFFFE0     		  Lime
    #00FF00     		  Limegreen
    #32CD32     		 
    Linen
    #FAF0E6     		  Magenta
    #FF00FF     		  Maroon
    #800000     		 
    Mediumaquamarine
    #66CDAA     		  Mediumblue
    #0000CD     		  Mediumorchid
    #BA55D3     		 
    Mediumpurple
    #9370D8     		  Mediumseagreen
    #3CB371     		  Mediumslateblue
    #7B68EE     		 
    Mediumspringgreen
    #00FA9A     		  Mediumturquoise
    #48D1CC     		  Mediumvioletred
    #C71585     		 
    Midnightblue
    #191970     		  Mintcream
    #F5FFFA     		  Mistyrose
    #FFE4E1     		 
    Moccasin
    #FFE4B5     		  Navajowhite
    #FFDEAD     		  Navy
    #000080     		 
    Oldlace
    #FDF5E6     		  Olive
    #808000     		  Olivedrab
    #688E23     		 
    Orange
    #FFA500     		  Orangered
    #FF4500     		  Orchid
    #DA70D6     		 
    Palegoldenrod
    #EEE8AA     		  Palegreen
    #98FB98     		  Paleturquoise
    #AFEEEE     		 
    Palevioletred
    #D87093     		  Papayawhip
    #FFEFD5     		  Peachpuff
    #FFDAB9     		 
    Peru
    #CD853F     		  Pink
    #FFC0CB     		  Plum
    #DDA0DD     		 
    Powderblue
    #B0E0E6     		  Purple
    #800080     		  Red
    #FF0000     		 
    Rosybrown
    #BC8F8F     		  Royalblue
    #4169E1     		  Saddlebrown
    #8B4513     		 
    Salmon
    #FA8072     		  Sandybrown
    #F4A460     		  Seagreen
    #2E8B57     		 
    Seashell
    #FFF5EE     		  Sienna
    #A0522D     		  Silver
    #C0C0C0     		 
    Skyblue
    #87CEEB     		  Slateblue
    #6A5ACD     		  Slategray
    #708090     		 
    Snow
    #FFFAFA     		  Springgreen
    #00FF7F     		  Steelblue
    #4682B4     		 
    Tan
    #D2B48C     		  Teal
    #008080     		  Thistle
    #D8BFD8     		 
    Tomato
    #FF6347     		  Turquoise
    #40E0D0     		  Violet
    #EE82EE     		 
    Wheat
    #F5DEB3     		  White
    #FFFFFF     		  Whitesmoke
    #F5F5F5     		 
    Yellow
    #FFFF00     		  YellowGreen
    #9ACD32     		     


    نوشته شده توسط هادی قنبری | لینک ثابت |

    قلم ها 

    موضوع: HTML یکشنبه نوزدهم آذر 1385 8:19

    با وجوديکه هنوز بعضي از اچتمل کاران از تگ <font> براي تعيين نام و نوع قلم، رنگ و اندازه متون استفاده ميکنند ولي در استاندارد جديد اچتمل (نسخه 4) و همچنين XHTML از تگ <font> پشتيباني نميشود و استفاده از Style Sheet ها به عنوان جايگزين معرفي شده است.

    تگ <font>

    در نسخه هاي 3.2 و قبلي تر زبان اچتمل از تگ <font> براي تعيين نام قلم، رنگ و اندازه متون استفاده ميشود. در اين تگ شناسه face نام قلم ، شناسه size انداره قلم و شناسه color معرف رنگ متن خواهد بود. مثالهاي زير کاربرد تگ <font> خدابيامرز را نشان ميدهند:

    کد اچتمل نمايش کد روبرو توسط مرورگر
    <p>
<font size="2" face="Verdana">
This is a paragraph.
</font>
</p>

    This is a paragraph. 

    <p dir="rtl">
<font size="1" face="Times" color="#FF9900">
متني با قلم Times و اندازه 1 و رنگ FF9900
</font>
</p>

    متني با قلم Times و اندازه 1 و رنگ FF9900 

    <p dir="rtl">
<font size="2" face="Tahoma" color="red">
اين متني با قلم Tahoma و اندازه 2 و رنگ قرمز 
</font>
</p>

    متني با قلم Tahoma و اندازه 2 و رنگ قرمز

    شناسه هاي تگ <font>
    Attribute Example کاربرد
    size="number" size="2" تعيين اندازه قلم
    size="+number" size="+1" افزايش اندازه قلم
    size="-number" size="-1" کاهش اندازه قلم
    face="face-name" face="Times" تعيين نام قلم
    color="color-value" color="#eeff00" تعيين رنگ قلم
    color="color-name" color="red" تعيين رنگ قلم

    *** بيان مختصر عملکرد تگ <font> در اين دروس فقط جهت اطلاع بوده و استفاده از آنها در طراحي صفحات اچتمل توصيه نميشود.

    ديگر از تگ <font> استفاده نکنيد!

    تگ <font> از رده خارج محسوب ميشود و کنسرسيوم جهاني تعيين استانداردهاي وب (World Wide Web Consortium, W3C) اين تگ را از مجموعه تگهاي استاندارد اچتمل کنار گذاشته است و اکيدا توصيه ميشود که از Style Sheet ها براي تعريف هر گونه خواص نمايشي و آرايشي (layout & Presentation) المانها در اچتمل استفاده شود.

    روش صحيح تعيين نام قلم، اندازه و رنگ متون با کمک Style Sheet ها:

    هر چند که مبحث و کلاسهاي درس Style Sheet ها در "مدرسه وب" در دست تهيه بوده و اميدواريم که بزودي ارائه شوند ولي تا قبل از آن استفاده از شناسه اي به نام style در بسياري از المانها کار گشا خواهد بود. مثالهاي ساده زير نحوه تعيين نام قلم، اندازه و رنگ متون را با کمک شناسه style به نمايش خواهند گذاشت:

    تعيين نام قلم
    مثالي در مورد تعيين نام قلم در يک استيل درجا (inline)

    تعيين اندازه قلم
    مثالي در مورد تعيين اندازه قلم در يک استيل درجا (inline)

    تعيين رنگ قلم
    مثالي در مورد تعيين رنگ قلم در يک استيل درجا (inline)

    تعيين نام، اندازه و رنگ قلم
    مثالي در مورد تعيين نام، اندازه و رنگ قلم در يک استيل درجا (inline)

    مثال کاربردي در مورد Style Sheet ها
    مثالي در مورد نحوه تعريف استيلهاي مختلف نمايش متون در جداول

    تگ <span>
    تگ <span> سبب تعريف محدوده و گستره اي مشخص ميشود. تمامي المان هائي که درون تگهاي <span> و <span/> قرار خواهند گرفت خواص آنرا به ارث خواهند برد، خواصي از قبيل استيل (Style) و يا سمت و جهت نمايش متون(dir).
    بر خلاف تگ هاي <p> و <div> مرورگرها هيچ سطر جديدي به اول يا آخر المان <span> اضافه نمي کنند.

    مثال:
    کد اچتمل نمايش کد روبرو توسط مرورگر
    <p>Some text <span style="color:#0000AF;">another text</span> again text...</p>

    Some text another text again text...

    id, class, title, style, dir, lang شناسه هاي استاندارد المان span

    مثالهائي از نحوه استفاده از المان span و Style sheet ها:
    روش قديمي روش صحيح
    <font color="#FF00FF">Hello!</font> <span style="color:#FF00FF">Hello!</span>
    <font color="rgb(255,0,255)">Hello!</font> <span style="color:rgb(255,0,255)">Hello!</span>
    <font style="color:Fuchsia">Hello!</font> <span style="color:Fuchsia">Hello!</span>
    <font color="#FF00FF" size="3">Hello!</font> <span style="color:#FF00FF;font-size:100%">Hello!</span>

    تگ <div>
    تگ <div> سبب تعريف محدوده و گستره اي مشخص ميشود. تمامي المان هائي که درون تگهاي <div> و <div/> قرار خواهند گرفت خواص آنرا به ارث خواهند برد، خواصي از قبيل استيل (Style) و يا سمت و جهت نمايش متون(dir).
    بر خلاف تگ <span> مرورگرها يک سطر جديد به اول و آخر المان <div> اضافه مي کنند.

    مثال:
    کد اچتمل نمايش کد روبرو توسط مرورگر
    <p>Some text <div style="color:#0000AF;">another text</div> again text...</p>

    Some text

    another text
    again text...

    id, class, title, style, dir, lang شناسه هاي استاندارد المان div

    تعيين جهت نمايش متون
    مثالي در مورد استفاده از تگ div و اعمال "جهت نمايش متون" به بخشي از صفحه اچتمل

    Start Tag Purpose کاربرد
    <div> Defines a division/section in a document تعريف بخش و ناحيه اي از صفحه اچتمل
    <span> Defines a section in a document تعريف بخش و ناحيه اي از صفحه اچتمل

    مرجع : HTML 4.01 Specification - فهرست عناصر - فهرست شناسه ها

    نوشته شده توسط هادی قنبری | لینک ثابت |

    فرم ها 

    موضوع: HTML یکشنبه نوزدهم آذر 1385 8:19

    از طريق استفاده از عنصر <form> و چند تگ مرتبط قادر به دريافت اطلاعات از بازديدکنندگان صفحاتتان و يا تبادل اطلاعات بين صفحات مختلف خواهيد شد. با کمک اين گروه از تگ ها قادر به نمايش باکسهاي ورود اطلاعات متن (text fields) ، چک باکسها (check-boxes) ، راديو باتونها (radio-buttons) و ... شده و همچنين امکان گذاشتن دکمه هاي ارسال (submit button) و يا حذف (reset) را خواهيد داشت. اين فصل با شرح تگ هاي form و input و ... به چگونگي ايجاد ارتباط با بازديدکنندگان و گرفتن اطلاعات از آنها بصورت لاتين و يا فارسي خواهد پرداخت.

    توجه داشته باشيد که براي پردازش اطلاعات دريافتي از کاربر بايد با يکي از زبانهاي cgi از قبيل ASP، perl، PHP، CFM ، JSP يا Java آشنائي داشته باشيد. مثالهاي cgi مدرسه وب از ربان اسکريپت Perl استفاده ميکنند.

    مثالها:

    وروديهاي متن يا Text fields
    مثالي ساده در مورد ايجاد text field ها . با کمک text field ها کاربران قادر به وارد کردن و تايپ متن خواهند شد.

    وروديهاي رمز عبور يا Password fields

    مثالي ساده در مورد ايجاد password field ها . با کمک password field ها کاربران قادر به ورود رمز عبور يا پسورد خواهند شد.

    مثالهاي بيشتر

    فرمها (Forms)

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

    درون تگ فرم گروه زيادي از عناصر و تگهاي مختلف قابل استفاده هستند از قبيل عناصر ورود متن يک سطري(text fields)، عناصر ورود متنهاي چند سطري (Textarea)، منوهاي drop-down و radio buttons و ...


    تگ Input

    به عنوان پر مصرف ترين تگ مربوط به ورود اطلاعات بايد از تگ <input> نام برد. در اين تگ شناسه اي به نام type به تعيين نوع اطلاعات ورودي اختصاص دارد. مقادير ممکن براي اين شناسه به قرار زيرند:
    text , checkbox , radio , password , hidden , submit , reset , button , file , image
    در ادامه به شرح بعضي از type هاي کاربردي خواهيم پرداخت:

    وروديهاي متن (Text Fields)

    اگر ميخواهيد که بازديدکننده اطلاعاتي از قبيل متن، اعداد و ... را وارد کند از شناسه اي با مقدار "text" استفاده ميشود.

    کد اچتمل نمايش توسط مرورگر
    <form>
First name: 
<input type="text" name="firstname">
<br>
Last name: 
<input type="text" name="lastname">
</form>
    First name:
    Last name: 
    <form dir="rtl" >
نـــــــــــــــام:
<input type="text" name="firstname">
<br>
نام خانوادگي:
<input type="text" name="lastname">
</form>
    نـــــــــــــــام:
    نام خانوادگي:

    توجه داشته باشيد که تگ <form> چيزي را به نمايش نخواهد گذاشت بلکه تگهاي درون آن توسط مرورگر نمايش داده خواهند شد. در مثال فارسي بالا به شناسه dir و مقدار rtl آن توجه داشته باشيد.لازم به يادآوري است که اغلب مرورگرها در حالت پيش فرض براي وروديهاي متن اندازه 20 کاراکتر را در نظر ميگيرند و اگر ميخواهيد که اندازه پيش فرض وروديهاي متن را تغيير دهيد بايد از شناسه اي به نام size استفاده کنيد.

    وروديهاي Radio Buttons

    اگر ميخواهيد که بازديدکننده گزينه اي را از بين چند گزينه محدود انتخاب کند، از مقدار "radio" براي شناسه type استفاده کنيد:

    کد اچتمل نمايش توسط مرورگر
    <form>
<input type="radio" name="sex" value="male"> Male
<br>
<input type="radio" name="sex" value="female"> Female
</form>
    Male
    Female 
    <form dir="rtl">
<input type="radio" name="sex" value="male"> مرد
<br>
<input type="radio" name="sex" value="female"> زن
</form>
    مرد
    زن

    همانطور که مشاهده ميشود فقط امکان يکي از گزينه ها براي کاربر ميسر است.

    وروديهاي Checkboxes

    اگر ميخواهيد که بازديدکننده يک يا چند گزينه را از بين چند گزينه محدود انتخاب کند، از مقدار "checkbox" براي شناسه type استفاده کنيد:

    کد اچتمل نمايش توسط مرورگر
    <form>
<input type="checkbox" name="bike">
I have a bike
<br>
<input type="checkbox" name="car">
I have a car
</form>
    I have a bike
    I have a car 
    <form dir="rtl">
<input type="checkbox" name="bike">
دوچرخه دارم
<br>
<input type="checkbox" name="car">
ماشين دارم
</form>
    دوچرخه دارم
    ماشين دارم
    شناسه Action و دکمه Submit در فرمها ( Form's Action Attribute & Submit Button)

    در فرمها براي ارسال اطلاعات کسب شده از دکمه اي به نام ارسال يا Submit Button استفاده ميشود و در اثر کليک کاربر بروي اين دکمه "Submit" ، اطلاعات درون فرم به فايلي ديگر ارسال خواهند شد. براي تعيين مقصد ارسال اطلاعات بايد درون تگ form از شناسه اي به نام action استفاده کنيد. مقدار شناسه action آدرس يا url فايلي ا