فهرست مطالب
عنوان صفحه
نکاتی در مورد HTML : 1
نشانه های HTML : 3
نشانه های HTML section : 4
نشانه های HTML empty : 5
ایجاد یک صفحه web 5
کار با فونت ها: 6
نوشتن یک متن در صفحه web : 8
تغییر رنگ متن در یک فایل HTML : 9
ساختن صفحه web با front page 10
ایجاد یک سایت web از آغاز: 10
ایجاد یک سایت web جدید: 11
قالب بندی پس زمینه یک صفحه web : 12
درک نشانه ها و صفت های استفاده شده جهت ایجاد form : 14
نکاتی در مورد HTML :
hyprer text markup Language یا html زبان برنامه نویسی کامپیوتر برای شبکه جهانی web می باشد. زمانی که یک سایت وب ایجاد می کنید، جهت قراردادن متون، تصاویر، انیمیشن و صدا و یدئو در صفحات web که سایت را تشکیل می دهند از HTML استفاده می کنید.
بعلاوه، HTML اجاره می دهد تا پیوندهای فرامتن و دکمه های محاوره ای را اضافه کنید که صفحات وب را به صفحات دیگری از سایت وب تان و به سایر سایت های web مرتبط می سازند. طراحی وب یک فرآیند خلاقیت web را با آن ایجاد کنید.
HTML یک زبان علامت گذاری متن نه یک زبان برنامه نویسی است. درتئوری، یک صفحه ایجاد شده با HTML باید توسط هر فردی که یک کامپیوتر دارد، یک مرورگر وب دارد و به اینترنت دسترسی دارد قابل مشاهده باشد.
در عمل توانایی مشاهده تمامی محتویات یک صفحه web به توانائیهای مرورگر بستگی دارد.
مرورگرهای web برنامه هایی می باشند که HTML فایل های صفحه web را تفسیر می کند متون، تصاویر و انیمیشن را برروی صفحه نمایش کامپیوتر بازدید کننده به نمایش می گذارند.
بطور جداگانه یا با کمک سایر برنامه های نصب شده مرورگرها می توانند فایل های صدا و ویدئو رد پخش کنند.
جدیدترین ویرایش مرورگرهای محبوب web ، اینترنت explorer از مایکروسافت و netscope navigator از شرکت netscope است.
برای بازدید کنندگان جهت دسترسی به صفحات web تان نخست آنها باید به اینترنت مرتبط شوند و یک مرورگر وب را آغاز نمایند.
پس از اینکه سرور web یک صفحه web را به کامپیوتر بازدیدکننده ارسال کرد مرورگر html web فایل صفحه web را تفسیر می کند م محتویات فایل را به صورت متن و تصاویر گرافیکی در پنجره برنامه کار بروی مرورگر به نمایش می گذارد.
سرورهای web و مرورگرهای web جهت برقراری ارتباط از (HTTP) hypertext transport porotocol
استفاده می کنند بغیر از انجام سایر عملیات پروتکل HTTP روشن ارسال پیامها بوسیله مرورگرها و سرورهای web و ساختار پیامها را مشخص می کند.
جهت طراحی و ایجاد سایت های web پیچیده فقط باید یک درک اولیه از جریان تقاضا و پاسخ HTTP داشته باشید.
نشانه های HTML :
در ماهیت یک صفحه web یک فایل متن است که حاوی دستورات به شکل کدها و خصایص HTML می باشد. این نشانه ها فرامینی می باشند که مرورگر web بعداً جهت قالب بندی متون و افزودن تصاویر گرافیکی برروی صفحه web از آنها استفاده می کند.
تعدادی نه تمامی فرامین HTML به نشانه شروع و یک نشانه پایان نیاز دارند.
این نشانه ها را نشانه contniner می نامیم. زیرا دستورات نشانه شروع در مورد هر چیزی که صفحه web بین نشانه شروع و نشانه پایان شامل می باشد بکارگرفته می شوند.
یک فرمان HTML با یک نشانه < شروع وسپس نام جهت ایجاد یک نشانه و خصایص شروع می شود و با یک علامت > خاتمه می یابد. جهت ایجاد یک نشانه پایان برای یک نشانه شروع یک علامت(/) در مقابل نشانه قرار می دهیم بنابراین یک نشانه شروع به صورت
<tag name [ attributes]> و یک نشانه پایان بصورت </tag name> می باشند.
نام نشانه به مرورگر web هدف نشانه را می گوید خصایص پس از نام نشانه اطلاعات بیشتری را جهت اجرای دستورات د راختیار مرورگر قرارمی دهند.
برای مثال کد زیر چگونگی شروع و پایان نشانه های paraghraph را نشان می دهند. در این مثال نشانه <p> به مرورگر web دستور می دهد متن را تا نشانه </p> با استفاده از قوانین قالب بندی پیش فرض به نمایش گذارد.
<p> exampel of paragraph</p>
نشانه های HTML section :
جت سازماندهی قسمتهای مختلف HTML که یک صفحه web را تعریف می کنند از یکسری نشانه section استفاده می شود.
انواع نشانه های HTML در هر قسمت صفحه web یک هدف خاص دارند.
-<HTML><head><head این نشانه های شروع و پایان head پس از نشانه های شروع HTML قرار میگیرند و سرآیند صفحه web را مشخص می کند عنوان صفحه web در قسمت سرآیند بین نشانه های <title></titile> قرار می گیرد.
-<body></body> نشانه های شروع و پایان بدنه اصلی پس از قسمت سرآیند صفحات web قرار می گیرند و بدنه اصلی صفحه web را مشخص می کند.
کد زیر محل قرارگرفتن صحیح نشانه ها را نشان می دهد.
<html>
<head>
<title>the web pages title <title>
<head>
<body>
<p>the paragraph of page</p>
</body>
</html>
نشانه های HTML empty :
علاوه بر نشانه های محفظه HTML از یک نوع دوم نشانه با نام نشانه های خالی استفاده می کند.
در حالیکه نشانه های محفظه محتویات صفحه را دربر می گیرند.
نشانه های خالی به یک نشانه پایان نیاز ندارند. برای مثال، در کد زیر جهت حرکت به خط به بعد قبل از به نمایش گذاشتن ورودی بعدی در صفحه از نشانه <br> استفاده شده است.
<html>
<head>
<title>exampel of html</title>
</head>
<p> this text lin 1 < br>
this text line 2 </p>
</body>
</html>
ایجاد یک صفحه web
ایجاد و فایلهای متنی HTML ساده است جهت ایجاد یک فایل HTML ، یک برنامه ویرایشگر متنی را باز کنید و سپس کد HTML را وارد کنید.
پس از وارد نمودن عبارات HTML ، فایل را بعنوان یک فایل متنی با پسوند html ذخیره سازید.
برای مثال کد زیر را در ویرایشگرتان تایپ کنید.
<html>
<head>
<title>example of a simple HTML document < /title>
</head>
<body>
<p> Hello world ! here Iam </p>
</body>
<html>
اکنون کارتان را در یک فایل صفحه web ( با پسوند htm یا html ) برروی دیسک سخت ذخیره سازید. در صورت تمایل یک پوشه با نام HTML examples ایجاد کنید و سپس فایل مثال را در پوشه ایجاد نموده بعنوان test page ,htm تغییر نام دهید و ذخیره سازید.
برای آزمایش اولین صفحه web ، مرورگر web را شروع کنید و سپس ورودی
File ://c:HTML exampls tesr page htm را در فیلد address مرورگر وارد نماید سپس کلید Enter را فشار دهید اکنون اسماً یک نویسنده صفحه web می باشید.
کار با فونت ها:
بازدیدکنندگان سایت web صفحه متنی را با نوع قلم، سبک، رنگ و اندازه کاراکتر پیش خود مشاهده می کنند. مگر اینکه این عناصر را در HTML صفحه web مشخص کرده باشید. مرورگر web بازدیدکننده تنظیم های پیش فرض برای متن به نمایش گذاشته را بوسیله مرورگر کنترل می کنند با استفاده از نشانه های فونت شروع و پایان <font></font> می توانید وضعیت ظاهری متن به نمایش گذاشته شده بوسیله مرورگر web بازدید کننده را کنترل کنید توجه داشته باشید که نشانه های فونت تنزل یافته اند یعنی نسخه هایی که در آینده برای مرورگرهای web ارائه می شوند احتمالاً نشانه <font> را پشتیبانی نخواهند کرد و بهتر است از نشانه <font> و خصایص آن استفاده کنید.
اگرچه می خواهید با استفاده از خصایص در نشانه <font> وضعیت ظاهری متن را تغییر دهید می توانید این تغییرات را با ابعاد قوانین css بدست آورید.
می توانید به خصایص زیر را در نشانه شروع فونت استفاده نمایید.
<font colors"colors"> صفت color رنگ متن را تعریف می کند مقادیر رنگ می تواند اسامی (مانند"red" ،"green" و…) باشد.
یا می توانید اعداد پایه 16 سه تایی( مانند FFOOO # و….) باشد. که مقدار رنگ های مخلوط شده برای قرمز، سبز، آبی را برای مرورگر web مشخص می کند.
<font sizes"#"> صفت size اندازه متن را با استفاده از اعداد -7 تا 7 تعریف می کند. هرچه این مقدار کوچکتر باشد اندازه font کوچکتر می شود.
<font face ,"name"> صفت face را با نوع قلم font را تعریف می کند اگر نوع face در کامپیوتر موجود نباشد آنرا نادیده می گیرد و از پیش فرض استفاده می کند. مرورگر web مقادیر پیش فرض برای رنگ، اندازه، و نوع قلم را کنترل می کند جهت بازگردانیدن متن به مقادیر پیش فرض مرورگر یک نشانه<font> در پایان متن قرار دهید.
<htlm>
<head>
< title> font color example <title>
</head>
<body>
<font colors"ffooo"face , "helvet:ca">
<p>this is red helvet </p></font>
p>this is normal/</p>
</body>
</htlm>
نوشتن یک متن در صفحه web :
برای نوشتن یک متن در صفحه پاراگراف مورد نظر را در علامت <p></p> قرار می دهیم بعد از نشانه
</p> پاراگراف بعدی ما بعد از یک خط خالی قرار می گیرد.
اگر بخواهیم به خط بعدی برویم یک نشانه <br> را قرار می دهیم توجه داشته باشید که نشانه <br> نشانه پایانی ندارد.
تغییر رنگ متن در یک فایل HTML :
در صورت عدم مشخص نمودن رنگ متن در یک صفحه مرورگر web متن را با رنگ پیش فرض مرورگر به نمایش می گذارد. اگر می خواهید رنگ یک لغت یا گروهی از لغات را تغییر دهید از صفت color در نشانه<font> استفاده کنید.
افزودن گرافیک به یک صفحه web از طریق یک نشانه <img> نشاه img اجازه می دهد تا تصویر گرافیکی را بر روی یک صفحه web قرار دهید. یک نشانه <img> حاوی یک خصوصیت src است که نام مسیر فایل گرافیکی را در اختیار مرورگر web قرار می دهد. بنابراین اگر نشانه های تصویری به صورت<img src/,"path/file name"> می باشند. توجه کنید که مقدار خصوصیت src حاوی مسیر و نام فایل است برای مثال کد زیر از مرورگر web می خواهد تاتصویر بر فایل phto.jpg ذخیره شده در پوشه images از سرور web را بدست آورد وبه نمایش بگذارد.
<img src<"images/ photo.jpy"width."300"height,"155">
کد htlm زیر تصویر house ,jpy را به نمایش می گذارد.
<html>
<head>
<title>in=mage of a house<.title>
</head>
<body>
<center><img src,"house .jpy"height."175"></center>
</body>
</html>
ساختن صفحه web با front page
درمرحله اول از منوی file قسمت new وسپس page or web را انتخاب می کنیم یک صفحه ایحاد می شود که همان صفحه web ما است که برای طراحی آماده است.
در زیر صفحه سه گزینه preview,html,normal دیده می شود که برای اضافه کردن فرمانهای html داخل html می رویم.
ایجاد یک سایت web از آغاز:
microsoft front page الگوها و wizard های بسیاری را فراهم کرده است. که می توانید برای ایجاد سایت های web پیچیده با اندکی کار از آنها استفاده کنید.
ولی اگر هیچکدام از این گزینه ها نیاز شما را فراهم نکند چه می توان کرد.
این زمانی است که نیاز به دانستن نحوه ایجاد یک سایت web از آغاز دارید.
ساخت یک سایت web از آغاز درک کاملتری در مورد نحوه کار سایت های web ایجاد شده توسط الگوها و wizard ها به شما می دهد. به عنوان مثال علیرغم اینکه نیاز به دانستن پیچیدگی ساختار نانوبری یک سایت web مبتنی بر front page ندارید اطلاعات پایه ای در مورد نحوه پسوند خوردن صفحات تصمیم در مورد نحوه تغییرات بدون شکستن عناصر را آسان می کنند.
ساده ترین راه برای درک ساختار یک سایتweb ساخت جزءبه جزء آن است.
ایجاد یک سایت web جدید:
تصورکنید که با استفاده از یک wizard سعی در ایجاد یک سایت web کرده اید ولی نتیجه کار شما را ارضاء نکرده است. شاید wizard صفحه هایی را ایجادکرده باشد که نیاز نداشته اید صفحه هایی را که نیاز داشته اید ایجاد ننموده باشید.
می توانید این سایت web را به طرق متعدد تغییر دهید، ولی در مورد نتیجه مطمئن نخواهید بود ئ شلوغی کار شما راعصبی نخواهد کرد ایجاد یک website بصورت دستی و از آغاز شما را با کار مانوس خواهد کرد.
گام های زیر را دنبال کنید:
1- اگر front page باز نیست آن را باز کنید.
2- اگر چهارچوب وظیفه new page web نمایش داده نمی شود در منوی file به new اشاره کرده و سپس روی page or web کلیک کنید تا این چارچوب باز شود.
3- درچارچوب وظیفه new page or web روی empty web کلیک کنید.
جعبه مکالمه web file templates بازمی شود که آیکون empty web انتخاب شده است.
بایستی محل و نام سایت web جدید را مشخص کنید. قبل از نام محل، اسم گرداننده و یا http:// را قید کنید.
4- محل و نام سایت وب جدید خود را به صورت
نام فایل / نام دایرکتوری :c
5-روی ok کلیک کنید.
Front page یک سایت وب جدید و تهی ایجاد کرده و آن را با نام و محل مشخص شده ذخیره می کند.
هنگامی که پردازش خاتمه یافت ساختمان پشتیبانی سایت را در folder list خواهید داشت.
6- کاوشگر windows را باز کرده و سایت web جدید را باز کنید.
7- کاوشگر windows را ببندید.
8- در منوی file روی close web کلیک کنید تا سایت web بسته شود.
قالب بندی پس زمینه یک صفحه web :
1- سایت garden co که در پوشه کاری قرار دارد را باز کنید.
2- در folder list روی فایل index.htm دو بار کلیک کنید تا در پنجره ویرایش نمایش صفحه باز شود.
3- درمنوی format روی back garden کلیک کنید.
جعبه مکالمه page properties باز می شود که برگه back grand می باشد.
4- در بخش colors روی پیکان روبه پایین درانتهای سمت راست کادر background کلیک کنید تا ناحیه انتخاب رنگ باز شود.
5- روی more colors کلیک کنید تا جعبه مکالمه more colores باز شود.
6- رنک را انتخاب کنید.
7- می توانید کد هگزا دسیمال نیز بدهید.
8- به روش دیگر نیز می توانید عمل کنید.
روی format وسپس background کلیک کنید.
9- در بخش formatting از جعبه مکالمه page properties کادر کنترلی back ground picture را انتخاب کنید و با دکمه browse محل فایل انتخاب کنید.
مهترین مطلب جهت درک پردازش فرمهای HTML این است که چه چیزی در کجا رخ می دهد.
زمانیکه یک بازدید کننده یک صفحه web را که در یک form ندارد مشاهده می کند سرور فقط درخواست مرورگر را برای صفحه web و اقلام صفحه مانند گرافیک و انیمیشن پاسخ می دهد.
درک نشانه ها و صفت های استفاده شده جهت ایجاد form :
بطوریکه قبلاً در این فصل ذکر شد علاوه بر فیلدهای متن ، دکمه های رادیویی و کادرهای انتخاب استفاده شده برای درخواست ورود اطلاعات توسط بازدیدکنندگان می توانید زیر دکمه ها، متن تصاویر گرافیکی و سایر شیء های صفحه web را برروی یک form قرار دهید. نشانه های form شروع و پایان (<form></form>)HTML بخش هایی از فایل HTML که باید در form قرار گیرند را د راختیار مرورگر web قرار می دهند.
توجه داشته باشید که form در یک صفحه web یک container است.
برای مثال با خواندن مطالب این فصل چگونگی تعویض مکانهای نگهداری برای فیلدهای ورود اطلاعات و دکمه ها در بین یکسری نشانه های form شروع و پایان را جهت ایجاد فرمهایی که اطلاعات جمع آوری می کنند ارائه می کنیم.
<form name="example form
action="http://www.Nvibznet 2.com
/-scribts/-p2/frmscrpt.cgi"
Mehtod ="post"
Enctype="application /x-www-form-urlancoded">
(uniform resouree Locator )(URL)-action
یا آدرس web که مرورگر web درخواستهای بازدیدکننده را به آن ارسال می کند برای مثال جهت ارسال نتیجه form .
1
22