آموزش مفاهیم~ Html ~

**Aref_2008** · 24-07-2009, 16:54

HTML3.2 خیلی اشتباه بود
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 استفاده نکنید، اگر می توانید از آن اجتناب کنید.از برچسب هایی که توصیه نمی شوند استفاده نکنید.

_______________________________________

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

**Aref_2008** · 24-07-2009, 16:56

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

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

کد:

برای مشاهده محتوا ، لطفا وارد شوید یا ثبت نام کنید

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

کد:

برای مشاهده محتوا ، لطفا وارد شوید یا ثبت نام کنید

style درون خطی

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

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

برچسب های style

<style> یک تعریف style را تعریف می کند
<link> منبع یک مرجع را معرفی می کند
<div> یک بخش در یک پرونده را معرفی می کند.
<span> یک بخش در یک پرونده معرفی می کند.
<font> به جای آن از style استفاده کنید
<basefont> به جای آن از style استفاده کنید
<center> به جای آن از style استفاده کنید

**Aref_2008** · 24-07-2009, 16:58

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

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

<head>
<p>This is some text</p>
</head>
در این حالت مرورگر دو گزینه دارد:
نمایش متن ، چون داخل عنصر پاراگراف قرار دارد
مخفی کردن متن ، چون داخل برچسب head قرار دارد
اگر شما یک عنصر HTML مثل <h1> و <p> را داخل عنصر head قرار دهید مرورگر باید آن را نمایش دهد هرچند غیر متعارف باشد.

برچسب های head

Tag توضیحات
<head> اطلاعاتی را در مورد پرونده معرفی می کند
<title> تیتر پرونده را معرفی می کند
<base> یک URL پایه برای تمام پیوندها در صفحه معرفی می کند
<link> منبع یک مرجع را معرفی می کند
<meta> اطلاعات meta را معرفی می کند.

**Aref_2008** · 24-07-2009, 16:59

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

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

<meta name="description" content="Free Web tutorials on HTML, CSS, XML, and XHTML" >
این عنصر Meta کلمات کلیدی برای صفحه شما تعریف می کند.

<meta name="keywords" content="HTML, DHTML, CSS, XML, XHTML, JavaScript, VBScript" >
هدف موجودیت های Name,Content توضیح محتویات صفحه است. هرچند از زمانی که تعداد زیادی از توسعه دهندگان وب از برچسب های Meta برای spamming استفاده کردند مثل تکرار کلمات کلیدی برای بالا بردن صفحات، تعدادی از موتورهای جستجو استفاده کامل از آن را متوقف کردند.

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

<meta name="security" content="low">
سپس شما باید قبول کنید که این یک چیز یکتا در سایت و یا در تالیف سایت است و شاید هیچ ارتباطی به شما ندارد.

**Aref_2008** · 24-07-2009, 17:02

پیوندهای HTML
هنگامی که شما در یک پرونده HTML بر روی یک پیوند کلیک می کنید برچسب <a> یک موجودیت به نام href دارد که آدرس آن صفحه در وب در آنجا قرار می گیرد ، مثل این:
<a href= "lastpage.htm"> Last Page </a>

URL
چیزی که URL نامیده می شود درwww برای آدرس دهی یک پرونده استفاده می شود.یک آدرس کامل وب مثل این

کد:

برای مشاهده محتوا ، لطفا وارد شوید یا ثبت نام کنید

قواعد نحوی زیر پیروی می کند

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

کد:

برای مشاهده محتوا ، لطفا وارد شوید یا ثبت نام کنید

دسترسی به گروه های خبری
کد HTML زیر یک پیوند به یک گروه خبری می سازد:
<a href="news:alt.html">HTML Newsgroup</a>

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

<a href="mailto:info@html.ir">info@html.ir</a>

**Aref_2008** · 24-07-2009, 17:05

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

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

کد:

برای مشاهده محتوا ، لطفا وارد شوید یا ثبت نام کنید

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

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

کد:

برای مشاهده محتوا ، لطفا وارد شوید یا ثبت نام کنید

کد:

برای مشاهده محتوا ، لطفا وارد شوید یا ثبت نام کنید

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

JavaScript:
<script type="text/javascript">

</script>
<noscript>Your browser does not support JavaScript!</noscript>

کد:

برای مشاهده محتوا ، لطفا وارد شوید یا ثبت نام کنید

برچسب های scriptبرچسب توضیحات
<script> یک اسکریپت تعریف می کند
<noscript> یک متن جایگزین برای زمانی که اسکریپت کار نکند تعریف می کند
<object> یک شی تعریف می کند
<param> تنظیمات زمان اجرا برای اسکریپت تعریف می کند
<applet> به جای آن از object استفاده کنید

**Aref_2008** · 24-07-2009, 17:06

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

کد:

برای مشاهده محتوا ، لطفا وارد شوید یا ثبت نام کنید

**Aref_2008** · 24-07-2009, 17:13

در زیر یک منبع از کاراکترهای اسکی در فرم url-encoding آمده است.مقادیر مبنای 16 می توانند برای نمایش حروف غیر استاندارد و کاراکترهای در مرورگرها و plug-in استفاده شوند.

URL-encoding from %00 to %8fمقدار ASCII URL-encode مقدار ASCII URL-encode مقدار ASCII URL-encode
æ %00 0 %30 ` %60
%01 1 %31 a %61
%02 2 %32 b %62
%03 3 %33 c %63
%04 4 %34 d %64
%05 5 %35 e %65
%06 6 %36 f %66
%07 7 %37 g %67
backspace %08 8 %38 h %68
tab %09 9 %39 i %69
linefeed %0a : %3a j %6a
%0b ; %3b k %6b
%0c < %3c l %6c
c return %0d = %3d m %6d
%0e > %3e n %6e
%0f ? %3f o %6f
%10 @ %40 p %70
%11 A %41 q %71
%12 B %42 r %72
%13 C %43 s %73
%14 D %44 t %74
%15 E %45 u %75
%16 F %46 v %76
%17 G %47 w %77
%18 H %48 x %78
%19 I %49 y %79
%1a J %4a z %7a
%1b K %4b { %7b
%1c L %4c | %7c
%1d M %4d } %7d
%1e N %4e ~ %7e
%1f O %4f %7f
space %20 P %50 € %80
! %21 Q %51 %81
" %22 R %52 ‚ %82
# %23 S %53 ƒ %83
$ %24 T %54 „ %84
% %25 U %55 … %85
& %26 V %56 † %86
' %27 W %57 ‡ %87
( %28 X %58 ˆ %88
) %29 Y %59 ‰ %89
* %2a Z %5a Š %8a
+ %2b [ %5b ‹ %8b
, %2c \ %5c Œ %8c
- %2d ] %5d %8d
. %2e ^ %5e Ž %8e
/ %2f _ %5f %8f

URL-encoding from %90 to %ffمقدار ASCII URL-encode مقدار ASCII URL-encode مقدار ASCII URL-encode
%90 À %c0 ð %f0
‘ %91 Á %c1 ñ %f1
’ %92 Â %c2 ò %f2
“ %93 Ã %c3 ó %f3
” %94 Ä %c4 ô %f4
• %95 Å %c5 õ %f5
– %96 Æ %c6 ö %f6
— %97 Ç %c7 ÷ %f7
˜ %98 È %c8 ø %f8
™ %99 É %c9 ù %f9
š %9a Ê %ca ú %fa
› %9b Ë %cb û %fb
œ %9c Ì %cc ü %fc
%9d Í %cd ý %fd
ž %9e Î %ce þ %fe
Ÿ %9f Ï %cf ÿ %ff
%a0 Ð %d0
¡ %a1 Ñ %d1
¢ %a2 Ò %d2
£ %a3 Ó %d3
%a4 Ô %d4
¥ %a5 Õ %d5
| %a6 Ö %d6
§ %a7 %d7
¨ %a8 Ø %d8
© %a9 Ù %d9
ª %aa Ú %da
« %ab Û %db
¬ %ac Ü %dc
¯ %ad Ý %dd
® %ae Þ %de
¯ %af ß %df
° %b0 à %e0
± %b1 á %e1
² %b2 â %e2
³ %b3 ã %e3
´ %b4 ä %e4
µ %b5 å %e5
¶ %b6 æ %e6
· %b7 ç %e7
¸ %b8 è %e8
¹ %b9 é %e9
º %ba ê %ea
» %bb ë %eb
¼ %bc ì %ec
½ %bd í %ed
¾ %be î %ee
¿ %bf ï %ef

**Aref_2008** · 24-07-2009, 17:15

قدم اول شما یک وب سرور شخصی
اگر شما می خواهید دیگران صفحات شما را ببینند باید آنها را publish کنید
برای publish کردن کارتان شما باید فایل هایتان را در یک وب سرور کپی کنید
رایانه خودتان اگر به یک شبکه متصل است می تواند بعنوان یک وب سرور عمل کند
اگر شما win98 را اجرا می کنید می توانید از PWS استفاده کنید
PWS در پوشه PWS در CD ویندوز است

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

چگونه یک وب سرور pws نصب کنیم
نصب ویندوز را مرور کنید تا ببینید pws را نصب کرده اید یا نه
اگر نصب نکرده اید آن را از پوشه pws ویندوز نصب کنید
با توجه به دستورالعمل رفتار کنید و آن را نصب کنید
نکته: نسخه های win xp home edition گزینه pws برای نصب ندارند.

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

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

**farzad206** · 09-12-2009, 12:08

نوشته شده توسط Aref_2008 [ برای مشاهده لینک ، با نام کاربری خود وارد شوید یا ثبت نام کنید ]

جدول های HTML

جدول ها
جداول بوسیله برچسب<table>معرفی می شوند.هر جدول به سطرها (بوسیله برچسب <tr>)و هر سطر به سلول های داده تقسیم می شود (بوسیله برچسب <td>) حروف td بیانگر داده جدولی (table data) هستند که حاوی سلول داده است.یک سلول داده می تواند حاوی متن ، عکس ، لیست ها ، پاراگراف ها ، فرم ها ، خط های افقی و جدول ها و... باشد.

کد:

برای مشاهده محتوا ، لطفا وارد شوید یا ثبت نام کنید

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

<table border="1">
<tr>
<td>row1,cel1</td>
<td>row1,cel2</td>
</tr>
<tr>
<td>row2,cel1</td>
<td>row2,cel2</td>
</tr>
</table>

سر تیترها در جداول
سرتیترها در یک جدول با برچسب <th>مشخص می شوند.

<table border="1">
<tr>
<th>Heading</th>
<th>Another Heading</th>
</tr>
<tr>
<td>row1,cel1</td>
<td>row1,cel2</td>
</tr>
</table>

سلول های خالی در جداول

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

<table border="1">
<tr>
<td>row1,cell1</th>
<td>row1,cell2</th>
</tr>
<tr>
<td>row2,cel1</td>
<td></td>
</tr>
</table>

این کدها در مرورگر بدین صورت نشان داده می شوند.توجه کنید که حاشیه های اطراف سلول خالی جدول از بین رفته است(موزیلا فایر فاکس(Fire Fox) حاشیه را نشان می دهد.).برای جلوگیری از آن یک فاصله نا مقطوع(;nbsp&) به سلول داده خالی اضافه کنید تا حاشیه را مشخص سازید.

<table border="1">
<tr>
<td>row1,cell1</th>
<td>row1,cell2</th>
</tr>
<tr>
<td>row2,cel1</td>
<td>   </td>
</tr>
</table>

نکته های پایه ای-اطلاعات مفید

عناصر <thead>، <tbody>و <tfoot>به دلیل پشتیبانی بد مرورگر ها به ندرت مورد استفاده قرار می گیرند. انتظار می رود که در نسخه های بعدی XHTML این روند تغییر کند.

برچسب های جدول

<table> یک جدول معرفی می کند
<th> سرتیتر جدول معرفی می کند
<tr> یک سطر جدول معرفی می کند
<td> یک سلول جدول معرفی می کند
<caption> عنوان جدول معرفی می کند
<colgroup> یک گروه از ستون ها معرفی می کند
<col> یک مقدار موجودیت برای یک یا چند ستون معرفی می کند
<thead> سر یک جدول را معرفی می کند
<tbody> بدنه یک جدول را معرفی می کند
<tfoot> پاورقی جدول را معرفی می کند

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

نام تاپيک: آموزش مفاهیم~ Html ~

اختيارات تاپيک

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

HTML styles

HTML Head

HTML META

HTML Uniform Resource Locators

HTML Scripts

موجودیت های استاندارد HTML 4.0

HTML URL-Encoding References

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

جداول تو درتو

Thread Information

Users Browsing this Thread

User Tag List

قوانين ايجاد تاپيک در انجمن