آموزش جامع html

V.Valizadeh9 · Apr 26, 2010

آموزش html پیشرفته :: ظاهر بندی html

آموزش HTML پیشرفته

ظاهر بندی :: HTML Layout

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

ظاهر بندی HTML - استفاده از جداول :: HTML Layout - Using Tables
یکی از تمرین های متداول با HTML استفاده از جداول برای ظاهر بندی یک صفحه است.
یک بخش از این صفحه مانند صفحات روزنامه به دو ستون قالب بندی شده است. ( عکس پایین رو نگاه کنین!)
همانطور که شما در این صفحه می بینید یک ستون چپ و یک ستون راست وجود دارد. این متن در ستون راست نشان داده خواهد شد
برای تقسیم کردن بخشی از این صفحه به دو ستون از جداول HTML استفاده کرده ایم. حقه استفاده شده در اینجا استفاده از جدول بدون حاشیه است وشاید مقدار کمی cellpadding.
مهم نیست که چقدر متن به این صفحه اضافه می کنید، آن در ستون خودش قرار خواهد گرفت.

همان ظاهر بندی - رنگ اضافه شده :: Same Layout - Color Added

مثال :: Example
برای ظاهربندی صفحه، می توان از سطرها و ستونهای یک جدول استفاده کرد و محتوا را در محل مناسب قرار داد. به کمک این مثال، یک نمونه از این ظاهربندی را می بینید.

mehdi2477 · Apr 26, 2010

کتاب pdf آموزش مقدماتی html

خوب اینم کتاب PDF آموزش مقدماتی HTML با توجه به آموزشهایی است که دوست خوبم Torres 9 در این تایپیک قرار داده اند.

فرمت PDF

حجم 1.1Mb

تعداد صفحات 64

دارای قابلیت BOOK MARK و لینک به وب سایت

دانلود از اینجا

V.Valizadeh9 · Apr 27, 2010

mehdi2477 گفت:
خوب اینم کتاب pdf آموزش مقدماتی html با توجه به آموزشهایی است که دوست خوبم torres 9 در این تایپیک قرار داده اند.
فرمت pdf
حجم 1.1mb
تعداد صفحات 64
دارای قابلیت book mark و لینک به وب سایت
دانلود از اینجا

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

V.Valizadeh9 · Apr 27, 2010

قاب های html

قاب ها :: HTML Frames

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

مثال ها :: Examples
قابهای عمودی
دراین مثال شما سه قاب عمودی با محتوای مختلف، می بینید.
قابهای افقی
این مثال، قابهای افقی را نمایش می دهد.
مثالهای بیشتر، در انتهای این صفحه آمده است)

قاب ها :: Frames
هر پرونده HTML یک قاب نامیده می شود ، و هر قاب نیز مستقل از دیگر قاب هاست. بدی استفاده از قاب ها این است که :

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

تگ Frameset :

تگ <frameset> معرفی می کند که چگونه می شود پنجره را به قابها تقسیم کرد.
هر frameset یک مجموعه از سطرها یا ستون ها را معرفی می کند.

تگ Frame :

تگ <frame> پرونده HTML ای را معرفی می کند که در هر قاب قرار می گیرد.

در مثال پایین یک frameset با دو ستون داریم.
ستون اول با پهنای 25% از پنجره مرورگر ست شده است.ستون دوم با پهنای 75% از پنجره مرورگر ست شده است.
پرونده "HTML "frame_a.html در ستون اول قرار گرفته و پرونده "HTML "frame_b.html در ستون دوم قرار داده شدهاست.

HTML:

<frameset cols="25%,75%">
   <frame src="frame_a.htm">
   <frame src="frame_b.htm">
</frameset>

نکات پایه ای-اطلاعات مفید :: Basic Notes - Useful Tips

اگر یک قاب حاشیه پدیدار داشته باشد کاربر می تواند با کشیدن حاشیه آن ، اندازه آن را تغییر دهد. برای جلوگیری از این عمل کاربر ، شما می توانید "noresize="noresize را به تگ <frame> اضافه کنید. اگر تگ <noframes> را اضافه کنیم ، مرورگر قاب را پشتیبانی نمی کند.
مهم: شما نمی توانید تگ های <body> </body> و <frame> </frame> را با هم استفاده کنید. هر چند اگر شما تگ <noframes> را در مرورگر هایی که قابها را پشتیبانی نمی کنند و حاوی مقداری متن نیز باشد اضافه کنید شما باید متن را بین تگ های <body> </body> قرار دهید.

مثال های بیشتر :: More Examples
تگ noframes
در صورتیکه مرورگر، امکان نمایش قابها را نداشت، به کمک این تگ، می توان نمایش مناسبی را ارایه کرد.
قابهای پیچیده(ترکیبی از قابهای عمودی و افقی)
این مثال، صفحه ای که در آن قابهای عمودی و افقی، با هم وجود دارند را نشان می دهد.
قابی با موجودیت noresize="noresize"
با کنترل این موجودیت، از تغییر اندازه قابها می توان جلوگیری کرد.
قاب محتوا
این مثال روش ساخت یک قاب محتوایی را نشان می دهد. صفحه از دو قاب اصلی ساخته شده که یکی ازآنها، فهرست و دیگری محتوای سرفصل انتخابی را نمایش می دهند. در قاب فهرست، سه فراپیوند به صورت زیر تعریف شده که موجودیت traget هر فرا پیوند به نام قاب محتوا اشاره می کند.

HTML:

<a href ="frame_a.htm" target ="showframe">Frame  a</a><br>
                        <a href ="frame_b.htm" target ="showframe">Frame  b</a><br>
                        <a href ="frame_c.htm" target ="showframe">Frame c</a>

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

تگ های قاب :

V.Valizadeh9 · Apr 27, 2010

فونت ها در html

فونت ها در HTML

تگ <font> در HTML دیگر توصیه نمی شود و حدس میزنم که از نسخه های بعدی HTML حذف شود.
هرچند تعداد زیادی از مردم از آن استفاده کنند ، شما باید سعی کنید که از آن اجتناب کنید وبجای آن از style استفاده کنید.

تگ <font> ا :: The HTML <font> Tag
با کد های HTML مثل این شما می توانیداندازه و نوع خروجی مرورگر را تعیین کنید:

HTML:

<p>
<font size="2" face="Verdana">
This is a paragraph.
</font>
</p>

<p>
<font size="3" face="Times">
This is another paragraph.
</font>
</p>

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

عناصر فونت :: Font Attributes

تگ فونت نباید استفاده شود :: The <font> Tag Should NOT be Used
برچسب font در آخرین نسخه های HTML توصیه نمی شود (HTML4.0,XHTML).
W3C برچسب font را از لیست توصیه هایش حذف کرده است.
زیرا در نسخه های آینده HTML از CSS برای ظاهر بندی ونمایش موجودیت های اجزا HTML استفاده خواهد شد.

روش درست، استفاده از style هاست :: The Right Way to Do It - With Styles
انتخاب نوع فونت متن
این مثال چگونگی انتخاب فونت متن را نشان می دهد.
تغییر اندازه نوشته ها
با این مثال، روش تغییر اندازه متن را می آموزیم.
تغییر رنگ متن
رنگ متن نیز همانند اندازه و نوع آن می تواند تغییر کند. به این مثال نگاه کنید.
تنظیم نوع، اندازه و رنگ متن
یک مثال جامع برای نمایش چگونگی تغییر ظاهر یک متن. ببینید.

V.Valizadeh9 · Apr 27, 2010

چرا از html4.0 استفاده می کنیم؟

چرا از HTML4.0 استفاده می کنیم؟

HTML 3.2 خیلی اشتباه و ایراد داشت!
HTML اصلی هرگز قصد نداشت که حاوی تگ هایی برای قالب بندی یک پرونده باشد.تگ های HTML قصد داشتند محتویات یک پرونده را قالب بندی کنند. مثل:

HTML:

<p>This is a paragraph</p>
 <h1>This is a heading</h1>

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

چه چیز HTML4.0 را بسیار عالی ساخته؟
در HTML4.0 همه قالب بندی ها می تواند از فایل HTML حذف شده و در یک CSS جداگانه قرار گیرد.
چون HTML4.0 ارائه را از ساختار پرونده جدا می کند ، ما باید چیزی را که همیشه نیاز داریم بگیریم: کنترل نهایی ظاهر بندی ارائه بدون از دست دادن محتویات پرونده.

شما باید در این مورد چکاری انجام دهید ؟
از عنصرهای ارائه در میان تگ های HTML استفاده نکنید، اگر می توانید از آن اجتناب کنید.
استفاده از استایل ها را شروع کنید.(در انجمن CSS همچین آموزشی موجود میباشد!)
از تگ هایی که توصیه نمی شوند استفاده نکنید.

خودتان را برای XHTML آماده کنید :
XHTML همان HTML جدید است.
مهمترین چیزی که شما می توانید انجام دهید این است که نوشتن صحیح XHTML4.0 را آغاز کنید.
همچنین شروع به نوشتن برچسب ها با حروف کوچک کنید.
همیشه عناصر برچسب را ببندید.
هرگز یک پاراگراف را بدون <p/> نبندید.
و ...
نکته: HTML4.01 رسمی استفاده از برچسب ها با حروف کوچک را توصیه می کند.

V.Valizadeh9 · Apr 27, 2010

استایل ها در html

استایل ها در HTML

با HTML4.0 همه قالب بندی ها می توانند به یک CSS جداگانه به خارج از پرونده HTML برده شوند.

مثال ها :: Examples
Style ها در Html
این مثال چگونگی آرایش یک html به کمک style ای که به قسمت <head> اضافه شده است را نشان می دهد.
فراپیوند، بدون زیرخط
این مثال روش ساخت یک فراپیوند، که زیر خط ندارد را به کمک عنصر های style نشان می دهد.
استفاده از style خارجی
این مثال روش استفاده از تگ <link> را نشان می دهد. با این روش، style موجود در یک فایل خارجی، به عنوان style صفحه در نظر گرفته می شود.

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

CSS خارجی :: External Style Sheet
یک CSS خارجی زمانی ایده آل است که آن style در بیشتر صفحات استفاده شود.
با یک CSS خارجی شما می توانید ظاهر یک سایت را با تغییر دادن یک فایل تغییر دهید.
هر صفحه باید با استفاده از تگ <link> به CSS پیوند داده شود.
تگ <link> در داخل بخش head قرار می گیرد.

HTML:

<head>
<link rel="stylesheet" type="text/css" href="mystyle.css">
</head>

CSS داخلی :: Internal Style Sheet
یک CSS داخلی باید هنگامی استفاده شود که یک تک پرونده یک style واحد دارد.
شما style داخلی را با تگ style در قسمت head می توانید معرفی کنید

HTML:

<head>
<style type="text/css">
body {background-color: red}
p {margin-left: 20px}
</style>
</head>

Style درون خطی :: Inline Styles
یک style درون خطی باید هنگامی استفاده شود که واحد برای یک رویداد عنصر واحدی خواسته شود.
برای استفاده از style درون خطی شما از عنصر های style در تگ های مناسب استفاده کنید.
عنصر style می تواند حاوی هر خاصیت CSS باشد.
مثال نشان می دهد که چگونه رنگ و چپ چین بودن پاراگراف را تعیین کنید :

HTML:

<p style="color: red; margin-left: 20px">
This is a paragraph
</p>

تگ های استایل :: Style Tags

V.Valizadeh9 · Apr 27, 2010

حروف نهادی در html

حروف نهادی در HTML

بعضی از حروف مانند > در HTML معنی خاصی دارند. بنابراین نمیتوان از آنها در متن استفاده کرد.
برای نمایش حروفی مانند > در متن باید از حروف نهادی استفاده کرد.
یک حرف نهادی از سه قسمت تشکیل میشود :
; یک نام نهادی &
; یک عدد نهادی#&
مثال :
برای نمایش > در مرورگر به جای نوشنم > در فایل HTML باید ;lt& یا ; 60#& را بنویسیم.
فایده استفاده از نام به جای عدد این است که همواره نام بهتر از عدد در خاطر میماند. و ضرر آن این است که همه مرورگر ها نام های نهادی را پشتیبانی نمیکنند ولی اکثر آن ها اعداد نهادی را پشتیبانی میکنند.
در ضمن توجه داشته باشید که نام های نهادی به بزرگی و کوچکی حروف حساس میباشند.
به عنوان مثال :
اگر بخواهید عبارت <b> This Text Is Bold </b> در مرورگر نمایش داده شود، به شیوه زیر عمل کنید :

HTML:

<html>
<body>
<p>
<b> This Text Is Bold </b>
</p>
</body>
</html>

نکته : به طور معمول HTML فاصله ها را نادیده میگیرد؛ مثلا اگر 10 فاصله در متن داشته باشید 9 تای آن ها نادیده گرفته میشوند.
برای قرار دادن چندین فاصله در متن باید از حرف نهادی ;nbsp& استفاده کنید.

حروف نهادی رایج :

تعدادی دیگر از حروف نهادی مورد استفاده :

V.Valizadeh9 · Apr 27, 2010

تیتر ها در html

تیتر ها :: HTML Head

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

عنصر head :
عنصر head حاوی اطلاعات اصلی که همچنین meta-information نیز نامیده می شود در یک پرونده است.

اطلاعات داخل عنصر head :
عناصر داخل عنصر head نباید توسط مرورگر نشان داده شوند.
مطابق HTML استاندارد فقط تگ های کمی بطور قانونی داخل بخش head هستند که عبارتند از , <script> <style> , <title> , <meta> , <link> , <base>
به ساختار ناصحیح زیر دقت کنید :

HTML:

<head>
<p>This is some text</p>
</head>

در این حالت مرورگر دو گزینه دارد:

نمایش متن ، چون داخل عنصر پاراگراف قرار دارد
مخفی کردن متن ، چون داخل برچسب head قرار دارد

اگر شما یک عنصر HTML مثل <h1> و <p> را داخل عنصر head قرار دهید مرورگر باید آن را نمایش دهد هرچند غیر متعارف باشد.

تگ های تیتر :: HTML Head

V.Valizadeh9 · Apr 27, 2010

HTML Meta

مثال ها :
توضیحات صفحه
اطلاعاتی که در قسمت meta نوشته می شوند، شرحی درباره صفحه می دهند. موتورهای جستجو توجه خواصی به این توضیحات دارند.
کلیدواژه های صفحه
کلیدواژه های معرف صفحه، در قسمت meta می آیند. این کلیدواژه ها، شناسه های اصلی متن صفحه می باشند. موتورهای جستجو به کمک این کلید واژه ها، صفحه مناسب را برای ما می یابند.
ارجاع کاربر
در صورتیکه محل سایت شما جا به جا شده، چگونه کاربر را مطلع می کنید؟ این مثال را ببینید.

عنصر meta :

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

کلمات کلیدی برای موتورهای جستجو :
تعدادی از موتورهای جستجو در www از موجودیت های Name , Content در تگ Meta برای اندیس کردن صفحات خود استفاده خواهند کرد.
این عنصر Meta یک توضیح برای صفحه شما فراهم خواهد کرد.

HTML:

<meta name="description" content="Free Web tutorials on HTML, CSS,  XML, and  						XHTML" >

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

HTML:

<meta name="keywords" content="HTML, DHTML, CSS, XML, XHTML,  JavaScript"  />

هدف مشخصه های Name,Content توضیح محتویات صفحه است.
هرچند از زمانی که تعداد زیادی از توسعه دهندگان وب از برچسب های Meta برای spamming استفاده کردند مثل تکرار کلمات کلیدی برای بالا بردن صفحات، تعدادی از موتورهای جستجو استفاده کامل از آن را متوقف کردند.

مشخصه های ناشناخته Meta :
گاهی اوقات شما مشخصه هایی از Meta را می بینید که برای شما ناشناخته اند، مثل این:

HTML:

<meta name="security" content="low" />

سپس شما باید قبول کنید که این یک چیز یکتا در سایت و یا در تالیف سایت است و شاید هیچ ارتباطی به شما ندارد!

V.Valizadeh9 · Apr 27, 2010

HTML Uniform Resource Locators

HTML URLs

لینک های HTML :
هنگامی که شما در یک پرونده HTML بر روی یک لینک کلیک می کنید تگ <a> یک مشخصه به نام href دارد که آدرس آن صفحه در وب در آنجا قرار می گیرد.
مثل این:

HTML:

<a href= "lastpage.htm"> Last Page </a>

URL :
چیزی که URL نامیده می شود در www برای آدرس دهی یک پرونده استفاده می شود.
یک آدرس کامل وب مثل این : http://www.majidonline.com
و از قاعده زیر پیروی میکند :
scheme://host.domain

ort/path/filename
scheme : نوع سرویس اینترنتی را تعریف می کند . بیشتر انواع متداول ، http است.
domain : نام دامنه اینترنتی را تعریف می کند مثل majidonline.com
host : میزبانی دامنه را تعریف می کند. اگر حذف شده باشد میزبان پیش فرض برای http , www است.
port : شماره پورت در میزبان را معرفی می کند. شماره پورت بطور عادی از قلم می افتد. شماره پورت پیش فرض برای http، عدد 80 است.
path : یک مسیر را در سرور معرفی می کند.اگر مسیر حذف شده باشد منابع باید در پوشه ریشه وب سایت باشند.
filename : نام یک پرونده را معرفی می کند. نام فایل پیش فرض ممکن است default.asp , index.asp , index.html یا چیز دیگری وابسته به تنظیمات وب سرور باشد.

نوع سرویس های اینترنتی :
تعدادی از مثال های متداول شماها را می توان در پایین یافت:

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

HTML:

<a href="news:alt.html">HTML  Newsgroup</a>

دانلود با FTP :
کد html زیر یک پیوند برای دانلود فایل می سازد ، مثل این:

[/HTML]پیوند به mail system :

کد html زیر یک پیوند به mail system شما می سازد.

HTML:

<a href="mailto:[email protected]">[email protected]</a>

[/RIGHT]

V.Valizadeh9 · Apr 27, 2010

HTML Scripts

اسکریپت ها را به صفحاتتان اضافه کنید تا آنها را پویاتر و فعال تر بسازید.

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

وارد کردن یک اسکریپت در یک صفحه HTML :
یک اسکریپت در HTML با تگ SCRIPT معرفی می شود.
توجه کنید که برای تعیین زبان اسکریپت نویسی از TYPE استفاده خواهید کرد.

HTML:

<html>
<body>

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

</body>
</html>

اسکریپت بالا این خروجی را خواهد داشت:
!Hello World

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

HTML:

JavaScript:
<script type="text/javascript">
<!--
document.write("Hello World!")
//-->
</script> VBScript:
<script type="text/vbscript">
<!--
document.write("Hello World!")
'-->
</script>

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

HTML:

JavaScript:
        <script type="text/javascript">
        <!--
        document.write("Hello World!")
        //-->
        </script>
        <noscript>Your browser does not support         JavaScript!</noscript>         VBScript:
        <script type="text/vbscript">
        <!--
        document.write("Hello World!")
        '-->
        </script>
        <noscript>Your browser does not support  VBScript!</noscript>

تگ های Scrpit :

V.Valizadeh9 · Apr 27, 2010

مشخصه های استاندارد html 4.0

مشخصه های استاندارد HTML 4.0

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

مشخصه های هسته :

مشخصه های زبان :

مشخصه های کلمات کلیدی :

V.Valizadeh9 · Apr 27, 2010

مشخصه های رویداد در html 4.0

مشخصه های رویداد در HTML 4.0

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

رویدادهای پنجره :
فقط در body,frameset معتبر است.

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

رویدادهای صفحه کلید :

رویدادهای ماوس :

V.Valizadeh9 · Apr 27, 2010

HTML URL-Encoding References

رمز نگاری بر روی URL ها ( آدرس ها ) باعث میشود تا کاراکتر ها به شکل امن تری در اینترنت مخابره شوند.

URL یا آدرس ها :
مرورگرهای اینترنت صفحات وب را از طریق URL ها از وب سرور درخواست میدهند.
URL آدرس یک صفحه وب است مثل : http://www.majidonline.com

رمزنگاری URL ها :
URL ها فقط میتوانند به وسیله ی ACSII ( کد استاندارد امريکايى براى تبادل اطلاعات Interchange American Standard Code for Information ) به اینترنت فرستاده شوند.
از آنجا که اغلب URL ها شمال کاراکترهایی خارج از ACSII هستند، آن ها باید تبدیل شوند.
رمزنگاری URL ها باعث میشود که آنها URL هایی معتبر از نظر ACSII شناخته شوند.
رمزنگاری URL ها کاراکتر های نادرست و نا امن ACSII را به وسیله "%" و با پیروی از 2 تا عدد در مبنای 16 تغییر میدهد.(مثال را در پایین خواهی دید)
مطابق با کاراکتر های روبرو : کلیک کنید ! که در آموزش های بعدی به آن ها اشاره خواهیم کرد.
توجه : URL ها نمیتوانند شامل فضای خالی باشند. معمولا این کار به وسیله رمزنگاری نوسط علامت + انجام میشود.

خودتان امتحان کنید :
اگر شما بر روی دکمه Sumbit زیر کلیک کنید، مرورگر ورودی را قبل از فرستادن به سرور رمز نگاری میکند. صفحه ای که وب سرور نشان میدهد، حاصل ورودی شما است:
عکس روبرو را مساهده کنید و در قسمت مشخص شده آدرس مورد نظر خود را بنویسید و Sumbit را کلیک کنید تا نتیجه را ببینید : http://up.iranblog.com/Files/e4157a31bd9d45ffa45c.png
کلیک کنید !

مثال هایی برای URL های رمزنگاری شده :

در آموزش های بعدی تمامی این کاراکتر ها را قرار خواهم داد.

V.Valizadeh9 · Apr 27, 2010

HTML Web Server

آماده شوید که سایت خود را آپلود کنید

قدم اول شما یک وب سرور شخصی :

گر شما می خواهید دیگران صفحات شما را ببینند باید آنها را نشر دهید ( publish کنید ).
برای publish کردن کارتان شما باید فایل هایتان را در یک وب سرور کپی کنید.
رایانه خودتان اگر به یک شبکه متصل است می تواند بعنوان یک وب سرور عمل کند.
IIS یا PWS شما رابه یک وب سور تبدیل میکند.
PWS در پوشه PWS در CD ویندوز است.

وب سرور شخصی PWS :
PWS هر کامپیوتر ویندوز را به یک سرور تبدیل می کند. PWS نصب آسانی دارد و برای اجرا برنامه های کاربردی وب ایده آل است. PWS برای ایستگاه های کاری بهینه می باشد اما نیازمند یک وب سرور کامل است .آن همچنین ASP را مانند برادر بزرگتر خود IIS اجرا می کند.

چگونه یک وب سرور pws نصب کنیم ؟

نصب ویندوز را مرور کنید تا ببینید pws را نصب کرده اید یا نه
اگر نصب نکرده اید آن را از پوشه pws ویندوز نصب کنید
با توجه به دستورالعمل رفتار کنید و آن را نصب کنید

نکته: نسخه های win xp home edition گزینه pws برای نصب ندارند.

IIS - Internet Information Server :
وب سرور IIS در win2000 ساخته شد که ساختن برنامه های کاربردی بزرگ برای وب را آسان ساخت. IIS و PWS هردو شامل ASP هستند. یک اسکریپت نویسی استاندارد سمت سرور که می تواند برای ساخت صفحات پویا و برنامه های فعل و انفعالی استفاده شود. IIS اکنون برای WIN NT آماده است.

قدم بعدی یک وب سرور حرفه ای :

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

نسخه های وب سرور ویندوز :

Windows Vista Business, Enterprise and Ultimate come with IIS 7
Windows Vista Home Premium comes with IIS 7
Windows Vista Home Edition does not support PWS or IIS
Windows XP Professional comes with IIS 5.1
Windows XP Home Edition does not support IIS or PWS
Windows 2000 Professional comes with IIS 5.0
Windows NT Professional comes with IIS 3 and also supports IIS 4
Windows NT Workstation supports PWS and IIS 3
Windows ME does not support PWS or IIS
Windows 98 comes with PWS
Windows 95 supports PWS

ادامه دارد ...

V.Valizadeh9 · Apr 28, 2010

شما html یاد گرفتید، حالا چی ؟!

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

حالا که شما html را میدانید، قدم بعدی چیست ؟
قدم بعدی یادگیری xhtml و css است.

در آموزش های بعدی به این مطالب خواهیم پرداخت!

V.Valizadeh9 · Apr 28, 2010

مثال ها در html

مثال ها در HTML

مثال برای تگ های پایه در HTML :
یک مثال بسیار ساده از سند HTML
چگونه متن داخل پاراگراف ها نشان داده میشود؟
پاراگراف های بیشتر
استفاده از شکست خطوط
مشکلات شعر (برخی مشکلات با قالب بندی متن)
تگ های تیتر
تیتر در وسط صفحه
قرار دادن یک خط افقی
توضیحات در فایل HTML
اضافه کردن رنگ پس زمینه

مثال برای قالب بندی متن در HTML :
قالب بندی متن
متن تنظیم نشده (خط ها و فضا ها را چگونه کنترل کنیم ؟)
تگ های خروجی کامپیوتر
قرار دادن یک آدرس
اختصارات و کلمات اختصاری
جهت متن
نقل قول کوتاه و بلند
چگونه متن underline و خط دار ایجاد کنیم ؟

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

مثال برای قاب ها در HTML :
نحوه ایجاد یک قاب عمودی با 3 سند مختلف
نحوه ایجاد یک قاب افقی با 3 سند مختلف
نحوه استفاده از تگ <noframes>
نحوه ترکیب قابهای در سطر و ستون
قابهای با noresize = "noresize"
نحوه ایجاد یک قاب navigation :
قاب های داخلی (یک قاب داخی یک سند HTML )
پرش به بخش مشخص شده در داخل قاب
پرش به بخش مشخص شده با قاب navigation

مثال برای جدول ها در HTML :
جداول ساده
حاشیه های مختلف جدول
جدول بدون حاشیه
عنوانها در جدول
سلول های خالی
جدول با عنوان
سلول های جدول که دهانه بیش از یک سطر / ستون
برچسب ها داخل جدول
حاشیه خالی سلول در کنترل فضای سفید بین محتوای سلول و حاشیه
فاصله سلول (کنترل از راه دور بین سلول)
اضافه کردن رنگ پس زمینه یا تصویر پس زمینه به جدول
اضافه کردن رنگ پس زمینه یا تصویر پس زمینه به سلول جدول
مشخصه algin در محتوای یک سلول در جدول
عنصر قاب
عنصر های قاب و حاشیه

مثال برای فهرست ها در HTML :
لیست نامرتب

لیست مرتب

انواع لیست های مرتب

انواع لیست های نامرتب

لیست تو در تو

لیست تو در تو 2

لیست تعریفی

مثال برای فرم ها و ورودی ها در HTML :
نحوه ایجاد زمینه های ورودی

زمینه رمز عبور

چک باکس ها
دکمه های رادیویی
لیست کشویی
یک لیست کشویی دیگر
Textarea (چند خط متن میدان ورودی)

ابجاد یک دکمه

قرعه کشی مرزهای این کشور با عنوان در اطراف اطلاعات

فرم با فیلد های ورودی و دکمه ارسال

فرم را با چک باکس و دکمه ارسال

فرم با radiobuttons و دکمه ارسال

ارسال پست الکترونیکی از فرم

مثال برای عکس ها در HTML :
درج تصاویر

قرار دادن تصاویر از پوشه دیگر یا سرور دیگری

تصویر پس زمینه

ترازبندی تصویر در متن

نشان دادن تصویردر سمت راست / چپ یک پاراگراف

تنظیم تصاویر به اندازه های مختلف

نمایش یک متن جایگزین برای تصویر (در صورتی که مرورگر نمی تواند تصاویر را بارگذاری کند)

ایجاد لینک از تصویر

ایجاد تصویر ، نقشه ، با مناطق قابل کلیک

غیرفعال کردن تصویر در تصویر نقشه

مثال برای تصویر زمینه در HTML :
پس زمینه و رنگ متن خوب

پس زمینه و رنگ متن بد

تصویر پس زمینه خوب

تصویر پس زمینه خوب 2

تصویر پس زمینه بد

مثال برای استایل ها در HTML :
استایل در قسمت تیتر یک سند
لینکی که underline نباشد
لینک به یک استایل خروجی

مثال برای <head> در HTML :
تنظیم عنوان سند

یک هدف برای تمام پیوندها در صفحه

مثال برای <meta> در HTML :
شرح سند

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

تغییر مسیر کاربر به دیگری آدرس

مثال برای اسکریپت ها در HTML :
قرار دادن یک اسکریپت
اسکریپت دستی برای مرورگرهایی که پشتیبانی نمیکنند

V.Valizadeh9 · Apr 28, 2010

امتحان html !!!

در حال حاضر شما HTML را به طور کامل آموخته اید .
از طریق لینک زیر میتوانید به سنجش آموخته های خود بپردازید.:
شروع کردن امتحان !!!
شما باید به 20 تا سوال جوا بدین در آخر هم وضعیت شما مشخص میشه. :green:

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

V.Valizadeh9 · Apr 29, 2010

خوب بالاخره آموزش پیشرفته HTML هم تموم شد و ممنونم که من به همراه آموزش هامو تحمل کردین :green:

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