درس 9 - به رديف در آوردن متن
اهداف این درس
- به ردیف در آوردن متن
- کنترل بر جاهای دقیق متن و کاراکترها
شروع درس
در درس قبل آموختیم که مرورگر کلیه فضاهای خالی که در صفحه قرار دادیم چشم پوشی می کند ، به هر جهت بعضی از مواردنحوه آرایش کلمات در حمایت از طرح و ترکیب کلی صفحه مهم است . تگ Performat صفحه شما را دقیقا مانند آنچه که در ویرایشگر متنی تایپ نمودید نشان می دهد.
M n o s p a c e d
در ادامه بحث مطالب زیر را دنبال می کنیم :
1- فایل HTML با نام Index.html را در ویرایشگر خود باز کنید و موارد زیر را اضافه کنید .
نام دورهاي اموزشي
نام دوره اموزشي نام مدرس
internet ---
html ---
- نتایج خود را ذخیره کنید و صفحه را مجددا بارگذاری کنید .
مروری بر مطالب
1- در هنگام ترجمه مرورگر تگ Preformat چگونه عمل می کند؟
2- در چه مواقعی از این تگ استفاده می شود؟
درس 10 - کاراکترهای ویژه
اهداف این درس
- نشانه گذاری در HTML
- استفاده از علامات < > در هنگام لزوم در سند
- گذاشتن فاصله اضافی در بین کاراکترها
نشانه های تایید
بعضی اوقات در صفحه نیاز دارید از بعضی کاراکترهای ویژه استفاده کنید که به Iso مشهور هستند و در HTML نشان x مشخص می شوند.
برای دیدن مرجع این نشانه ها به آدرس زیر مراجعه کنید:
Iso characters
http://www.htmlhelp.com/refrence/charset
ممکن است بعضی اوقات مجبور به استفاده از علامت کوچکتر و بزرگتر < > در صفحه باشد که برای اینکه مرورگر آنها را بصورت Code ترجمه نکند .برای نمایش آنها نیاز به استفاده از کاراکترهای ویژه دارید.
< استفاده می شود برای &Lt
> استفاده می شود برای >
& استفاده می شود برای & amp
ایجاد فضای خالی
می دانید که مرورگر از بیشتر فضای خالی که ایجاد می کنید چشم پوشی می کند به هر جهت شاید در طراحی یک صفحه به جایی برسید که بخواهید از بیشتر از یک فضای خالی استفاده کنید. در اینصورت از کاراکتر nbps& استفاده کنید .
مروری بر مطالب
1- برای گذاشتن علامت بزرگتر و کوچکتر چه روشی دارید؟
2- برای گذاشتن فاصله چه می کنید ؟
تمرین
در صفحه وب خود از کاراکترهای ویژه استفاده کنید .
درس 11 - لیستهای تعریف
اهداف این درس
1- ایجاد لیستهای تعریف با متنهای جداگانه
برای تعریف اقلام
2- ایجاد تاریخچه با لیست تعریف
در درس 6 آموختیم که چگونه لیست تعریف ایجاد کنیم . حال می خواهیم نوع سومی از لیست که به لیستهای تعریف معروف است ایجاد کنیم . در قبل در جلوی اقلام لیست از نقطه استفاده نمی کردیم ولی در اینجا جلوی هر قلم از لیست یک نقطه داریم .
قالب HTML این نوع لیست بصورت زیر است :
تگ < dl> و < dl /> بصورت زوج عمل می کند و < dd > و < dt > بصورت فرد
در فایل index.html موارد آموزشی را بصورت لیست تعریف دربیاورید . کار خود را آزمایش کنید .
مروری بر مطالب
1- چه فرقی بین لیست تعریف و لیستهای مرتب و نامرتب وجود دارد؟
2- در چه مواردی باید لیست تعریف بکار برد؟
3- چه فرقی بین دو تگ < dt > و < dd > وجود دارد ؟
تذکر :
شما می توانید لیستهای مرتب و نامرتب را با لیستهای تعریف با هم به کار ببرید .
oxielex
Combinations of metal ions with oxygen Comprises the major ores extracted in mining operations
Hematite
maquetite
corundum
Source آن بصورت زیر است :
درس 12 - آدرسهای زیر نویس و اتصالات email
توانائیها
1- گذاشتن سر فصل و پاورقی برای صفحات
2- ایجاد ابر متن هایی برای ارسال
شروع درس
وجود سر تیتر و پاورقی برای صفحات وب ارزش زیادی دارد و قطعا تاریخ آخرین ویرایش می تواند اهمیت زیادی داشته باشد.
عقیده خوبی برای گذاشتن سر فصل و پاورقی مثبت بین 2 صفحه وب برخی از اطلاعات مفید در این زمینه عبارتست از :
1- سر فصل و موضوع صفحه جاری
2- تاریخ ایجاد سند
3- محفوظ بودن حق کپی
4- اسم و آدرس پست الکترونیکی
5- نام و ابر متن برای اتصال به سازمان یا ارگان
قالب آن بصورت زیر است :
< address > text text text < /address >
فرض کنید شخصی در حال خواندن صفحه شما می باشد و مایل است نکاتی را به شما توصیه کند . شما باید آدرس پست الکترونیکی خود را در صفحه بیاورید و شما می توانید به وسیله یک اتصال از طریق مرورگر این کار را انجام دهید . اکثر مرورگرها ی امروزی این کار را انجام می دهند .
روش انجام این کار گذاشتن ابر متنی با دستور mailto می باشد :
هنگامی که متن Send email کلیک شود مرورگر وب شما صفحه Compose را فراهم آورد و شما می توانید پیامی را در آن تایپ کنید و ممکن است در همه مرورگرها جواب نگیریم . می توانید در صفحه خود از چنین اتصالاتی استفاده کنید.
اگر شما بخواهید یک پیام را به چند نفر ارسال کنید شما می توانید در تگ Mailto آدرسهای زیادی قرار دهید و آنها را با کاما از هم جدا کنید .
send email
برای اضافه کردن پاورقی یا مواردی مثل آدرس سازمان یا شرکت و ... می توانید متن یا آدرس مورد نظر را بین دو تگ < address > و < /address > بیاورید . مثلا :
درس 13 - وارد کردن یک توده متن بطوریکه از بقیه متن متمایز باشد .
وارد کردن تگ blackquotes در صفحه
شروع درس
در زبان نوشتاری کوتیشن می تواند جمله ای را از بقیه متن نوشته شده متمایز سازد HTML نیز این توانایی را دارد
شما می توانید اقلام دیگری مثل لیستها و ... را بوجود آورید .
1- سند index.html را باز کنید .
2- یک توده متن به آن اضافه کنید و آن را داخل کوتیشن قرار دهید .
3- نتایج را ذخیره و صفحه را مجددا بارگذاری کنید .
مروری بر مطالب
1- تگ < blockquote > چه عملی انجام می دهد ؟
2- چرا نیاز به استفاده از تگ < p > قبل از تگ < blockquote > ندارید ؟
درس 14 - گذاشتن بافت براي صفحه
اهداف این درس
1- گذاشتن یک رنگ به عنوان پیش زمینه
2- محاسبه اعداد از مبنای 10 به مبنای 16
3- عوض کردن رنگ فونت و لینکها
4- ایجاد یک پیش زمینه از عکس در صفحه وب
شروع درس
با ایجاد بعضی تغییرات در تگ < body > می توانید رنگی را به عنوان پیش زمینه صفحه خود انتخاب کنید .
Hexadecimal
در مرورگرتان رنگهای زیادی برای استفاده در دسترس دارید . هر رنگی با 3 رنگ سبز و قرمز و آبی معرفی شده است .
(r=255,g=255,b=255) تولید کننده رنگ سفید و مینیمم آنها (r=0,g=0,b=0) تولید کننده رنگ مشکی خواهد بود .
شما به اعداد 102 ، 153 ، 205 نگاه کنید . هر کدام از این اعداد در مبنای 10 هستند که باید به مبنای 16 تبدیل شوند .
اعداد با مبنای 16 برای کامپیوتر قابل فهم هستند . اگر بخواهیم عدد بالا را در مبنای 16 ببریم خواهیم داشت : ff6699
که 66 ارزش رنگ قرمز 99 ارزش رنگ سبز و ff ارزش رنگ آبی را معلوم می کند .
انتخاب رنگ یکپارچه برای background
برای استفاده از رنگ یکپارچه برای background از تگ زیر استفاده می شود :
شما می توانید تغییرات زیر را در تگ ایجاد کنید
پیش زمینه با بافت ویژه
استفاده از رنگ یکپارچه به صفحه شفافیت و تنوع می بخشد . اما می توانید با قرار دادن یک تصویر به عنوان پیش زمینه قدری جلوتر حرکت کنید . شما می توانید از تصاویر کوچک gif.jpeg به عنوان پیش زمینه در صفحات خود استفاده کنید .
نکاتی که باید در نظر بگیرید عبارتند از :
1- برای گذاشتن عکس به عنوان پیش زمینه باید از عکسهای با سایز مناسب کمتر از 10 kb استفاده شود .
2- سعی کنید از عکسهایی که روشن هستند استفاده کنید .
3- صفحاتی که در پیش زمینه آنها از عکس استفاده شده است در هنگام بارگذاری صفحه باید ابتدا عکس آنها بارگذاری شود بنابراین برای ارتباط با سرعت پایین مشکل بوجود می آید .
مروری بر مطالب
1- چگونه از یک رنگ یکپارچه در صفحه خود استفاده می کنید ؟
2- چرا اعداد بصورت ff66cc نوشته می شود ؟
3- چه فرقی بین دو تگوجود دارد ؟
درس 15 - عدم استفاده از تگهای blink و Marquee
عدم استفاده از تگهای < blink > و < Marquee >
اهداف این درس
1- عدم استفاده از تگ < blink >
2- عدم استفاده از تگ < Marquee >
3- دلیل استفاده از HTML استاندارد
شروع درس
وقتی که یک صفحه وب با مرورگر NetScape باز می شود این مرورگر تگی را نمایان می سازد که به لغت یا قسمتی از جمله تاکید خاصی دارد .
این تگ عبارتست از : < blink >wow< /blink >
از آوردن این تگ در صفحات خود اجتناب کنید . زیرا در بیشتر مرورگرهای وب کارآیی ندارد . اگر شما متن زیر را در مرورگر NetScape مشاهده کنید . آن را چشمک زن می بینید .
عکس زیر در یک فایل Gif می باشد . عملی را که باید این متن در مرورگر Netscape انجام شود را به شما نشان می دهد. در اینجا یک فایل Gif آورده شده است. .
اما ! ! ! شرکت مایکروسافت تگی برای ایجاد حرکت در Internet explorer ایجاد کرده است که عبارتست از < marquee >wow < /marquee >
اما اگر آن را مرورگر Netscape نبینید هیچ حرکتی ندارید . پس بهتر است از این 2 تگ در صفحات وب خود استفاده نکنید .
درس 16 - زیبا کردن متن
شما می توانید رنگ و سایز و نوع متن را در HTML تغییر دهید.
اما صبر کنید شما می توانید انواعی از متنهای بالانویس و پایین نویس برای مطالب خنده دار یا ریاضی و شیمی اضافه کنید .
Co2+H2SO4
اهداف این درس
1- عوض کردن سایز بخش مشخصی از یک متن در یک صفحه
2- عوض کردن رنگ مشخصی از یک متن در یک صفحه
3- ایجاد اندیسهای بالا و پایین
4- مشخص کردن نوع قلم
شروع درس
با HTML3,2 و Netscape شما امکانات بیشتری برای ویرایش متن دارید . مخصوصا که می توانید برای فونت خود سایز و رنگ در نظر بگیرید.ویرایش متن می تواند در طرح و نقش صفحه شما تاثیر زیادی داشته باشد اما استفاده بی پروا از آن صفحه ، صفحه شما را دچار تداخل و پارازیت می کند.
شما همچنین می توانید اندیسهای بالا و پایین را برای بیانهای ریاضی و فرمولهای شیمی و پاورقی ها اضافه کنید .
در این درس شما را با اینگونه متن ها آشنا خواهیم کرد و مثالهایی را در این مورد برای شما مطرح خواهیم کرد .
سایز قلم
دستور < font > ....< / font > با Netscape مطرح شد و استفاده می شد برای سایز قلم از 1 تا استفاده می شود 7 از سایز 3 اندازه متن به حالت نرمال در می آید.
رنگ فونت
در درس 14 تگهایی را برای رنگی شدن متن و وارد کردن آن در صفحات وب معرفی کردیم شما همچنین می توانید از تگ فونت برای رنگی کردن قسمتی از متن استفاده کنید . با نوشتن کد رنگ در مبنای 16 یا نوشتن نام رنگ
1- سند Index.html را باز کنید .
2- متن آموزش از راه دور را بصورت زیر ویرایش کنید
3- نتایج را ذخیره و صفحه را مجددا بار گذاری کنید .
تذکر :
صفات size و color در تگ فونت می توانند همجوار باشند .
اندیسهای بالا و پایین
در زمان HTML3 نمی توانستید در صفحه از بیانات ریاضی و فرمولهای شیمی که نیاز به اندیسهای بالا و پایین داشتند استفاده کنید ، اما بعد از آن از این تگ برای گذاشتن اندیس استفاده شد .
تگ HTML عبارت است از :
1- یکی از اسنادی که قبلا ایجاد کردید را باز کنید .
2- تعدادی معادلات شیمی و ریاضی در آن وارد کنید .
مثلا
HTML3.2 شامل توانایی است که نوع قلم را در صفحه مشخص کند . اما ممکن است در همه مرورگرها کارآیی لازم را نداشته باشد .
قالب HTML آن عبارت است از :
اگر مرورگر بازدید کننده از این توانایی تگ فونت پشتیبانی کند و فونتهایی که در این تگ قرار گرفته در کامپیوترخود داشته باشد در این صورت متن به همان صورت در صفحه وب به نمایش در می آید .
اگر شما قصد داشته باشید که از نوع قلم در تگ فونت استفاده کنید باید از قلمی استفاده کنید که استاندارد باشد و یا بیشتر کامپیوترها آن قلم را داشته باشند.
1- سند index.html را در ویرایشگر خود باز کنید .
2- نوشته زیر را بصورت زیر اصلاح کنید .
3- نتایج را ذخیره و صفحه را مجددا بار گذاری کنید .
مروری بر مطالب
1- چگونه اندازه و رنگ قسمتی از متن را در صفحه تغییر می دهید ؟
2- کدام تگهای HTML را می توانید استفاده کنید اگر مرورگر شما از تگ < font > پشتیبانی نکند؟
3- چگونه یک اندیس پایین در HTML ایجاد می کنید ؟
4- چگونه یک توده ای از متن را با فونت مشخص نمایش می دهید ؟
نکات اضافی
تگ < strik > و< strik / > که در HTML 3.2 در دسترسی قرار گرفته است ممکن است در مرورگر شما کار کند . با این دستور می توانید خطی را بر روی متن ایجاد کنید یعنی متنی که بین دو تگ < Strik > و < Strik /> نوشته شود . در روی آن یک خط کشیده می شود.
در اینجا کلمات ما هرانه ای را برای رنگ متن ذکر می کنیم . در درس 14 شما آموختید که چگونه از تگ < Body > توانائیهای آن برای عوض کردن رنگ زمینه و متن و لینکها استفاده می شود اما اگر برای رنگی شدن قسمتی از متن از تگ < font > استفاده کردیم فقط بر روی رنگ متن های ساده اثر می گذارد و بر روی ابر متنها و اتصالات بی تاثیراست و ممکن است ابر متن ها به طور پیش فرض با خط آبی که در زیر آن گذاشته می شود مشخص گردند.
تمرین
از تمامی تگهای گفته شده در صفحه خود استفاده کنید .
درس 17 - ايجاد خط
اهداف این درس
1- ایجاد خط افقی با قاب متفاوت
2- ایجاد خط با پهنای متفاوت
3- ایجاد خط بدون سایه
شروع درس
سایز خط
اولین مورد این است که خطوطی می تواند با پهنای متفاوت در صفحه ظاهر شوند .
N برحسب Pixel می باشد
< hr size=2 >same as< /hr > < hr size=8 >
پهنای خط
ویژگی اختیاری دیگری که در تگ < hr > وجود دارد این است که شما می توانید کنترلی بر طول خط داشته باشید که لازم نیست تا کل طول صفحه ادامه داشته باشد .
< hr width=x >
< hr width=z% >
x عددی بر اساس Pixel می باشد که شامل طول خط است و Z در صدی از طول صفحه جاری می باشد که به طور معمول ما درصد را به شما توصیه می کنیم.
طبیعی است که اگر خواستید چندین خط را در وسط قرار دهید هر کدام از آنها در یک خط جداگانه ظاهر خواهند شد . < p > ...< / p alignment=center >
بیشتر مرورگرها از این تگ پشتیبانی می کنند اما ممکن است بعضی از مرورگرها آن را نادیده بگیرند و از آن چشم پوشی کنند .
حال به آرایش صفحه ساخته شده خود می پردازیم :
1- صفحه index.html را باز کنید .
2- بخش زیر را در آن وارد کنید :
و آن را با عبارات زیر جایگزین کنید
بدون سایه
ممکن است شما نخواهید از سایه در خط استفاده کنید .
مروری بر مطالب
1- چگونه می توانید سایز خط افقی را تغییر دهید؟
2- چگونه می توانید طول خط خود را تغییر دهید؟
3- توانایی صفت noshade در تگ hr چیست ؟
تمرین
در صفحات خود از تگ < hr > استفاده کنید.
درس 18 - Extra Alignment
اهداف این درس
1- ردیف کردن قسمتهای مختلف و مجزا کردن قسمتی از متن
2- بوجود آوردن فضای اضافی در اطراف تصویر
3- بوجود آوردن متنهای توضیحی
شروع درس
به ردیف در آوردن متن
با گسترش روز افزون وب نیاز ما برای کنترل بیشتر طرح و شکل صفحه بیشتر شد . یکی از این نیازها وجود تگهایی برای به ردیف در آوردن متن و یا وسط قرار دادن آن و کنترل آن از بقیه قسمتهای صفحه بود که با Netscape و HTML معرفی شد.
مواردی که بین دو تگ < center > و < center / > قرار می گیرد در وسط صفحه به نمایش گذاشته می شود . اگر بخواهید در این زبان کدگزاری متن یا عکسی را در وسط قرار دهید از صفت align در تگ P و Img استفاده کنید .
1- تمامی سندهای خود را باز کنید .
2- برای هر کدام متنی که بین 2 تگ < h1 > و < h1 / > این صفت را به تگ اضافه کنید .
3- نتایج خود را ذخیره و صفحه را مجددا بارگذاری کنید .
تذکر:
در تگ < hr > صفت alignment نیز برای جای دقیق خط می توان بکار برد
به ردیف در آوردن عکس و متن
در درس( a7 ) آموختیم که چگونه یک عکس را در صفحه قرار می دهیم و چگونه در اطراف عکس متن قرار می دهیم .
با صفت align که در تگ < Img > قرار می گیرد می توانید مشخص کنید که یک عکس در چه موقعیتی از بالا و پایین و کناره های صفحه قرار بگیرد ؟
اینک زمانی رسیده که شما بخواهید قسمتی از متن یا دیگر اقلام بکار رفته شده در صفحه را در زیر عکس بیاورید . ویژگی در تگ
وجود دارد که موقعیت را مشخص می کند .
پیشنهاد ما به شما این است که همیشه از این تگ استفاده کنید . زیرا تراز کردن به فونتی که در مرورگر کاربر وجود دارد و همچنین پهنای پنجره مرورگر وابسته است.
لایه عکس
بعضی اوقات هنگامی که از تراز چپ یا راست در عکس استفاده می کنید متن محاصره می شود ، شما می توانید فضای خالی در اطراف عکس ایجاد کنید.
vspace و hspace که مخفف Vertical space و hovizental space می باشند( فضای عمودی و فضای افقی )، فضایی است بر حسب پیکسل که در بالا ، پایین ، چپ و راست عکس گذاشته می شود. صفت Alignment را در صفحه خود اضافه کنید . سند index.html خود را باز کنید . تصویر قرار داده شده در آن ممکن است زیبا به نظر برسد اما فضای خالی در کناره های عمودی آن زیاد است . سپس دستورات زیر را در آن بکار ببرید . توجه داشته باشید که اندازه واقعی وابسته به نوع متنی که برای مرورگر خود انتخاب کردید شما می توانید سایزی که وابسته به سایز انتخابی کاربران می باشد را تنظیم کنید .
این دستورات عبارتند از
روش دیگر استفاده از تگ فونت
وقتی از علامت منفی استفاده می کنید سایز فونت خیلی بیشتر از حد نرمال و متعارف می شود که در این موارد می توان از تگ فوق نیز استفاده کرد.
< basefont size=5 >
با این تغییرات سایز فونت شما از ابتدا 3 درجه بیشتر می شود شما از این دستور هنگامی باید استفاده کنید که از ابتدا فونتی خارج از استاندارد قرار دهید . اگر بخواهید تنظیمی بین بخشهای کوچکی از صفحه داشته باشید باید از تگ بالا استفاده کنید . با استفاده از تگ فوق برای بالاتر از درجه 5 می توانید به راحتی سایز تمام متن را تغییر دهید
تذکر :
تگ < base font > بسته می شود و تا جایی ادامه دارد که تگ < base font> دیگری استفاده شود .
اگر مرورگر شما از این تگ پشتیبانی کرد شما می توانید از دستورات و تگهای HTML3/0 استفاده کنید
ابتدا تگ < font size=x > را برای آرایش عنوان صفحه استفاده می کنیم .
1- سند index.html را در ویرایشگر متنی خود را باز کنید .
2- در دروس قبل از قالب
برای نشان دادن عنوان صفحه استفاده می کنیم . حال می توانیم از تگ فونت استفاده کنیم .
به آنچه که ما انجام دادیم دقیق نگاه کنید اول سایز A 4 درجه بیشتر از مبنای اولیه ظاهر شد .
بقیه حروف 3 درجه بیشتر از حالت استاندارد و نیز تگهای < b > و < b / > برای برجسته کردن عنوان استفاده کردیم . در پایان چون از تگهای < h1 > تا < h6 > برای شکستن خط استفاده کردیم مجبور به استفاده از تگ
شدیم که عنوان را مجبور به ظاهر شدن در خط جدید کند.
3- اگر خواستیم در جایی از صفحه نقل قولی از کسی داشته باشیم آن را برجسته نشان می دهیم .
4- نتایج خود را ذخیره کنید .
می توانید تفاوت بین استفاده از تگ < font > و < h1 > .... را ببینید
درس 19 - آرایش در جدول
آرایش در جدول
اهداف این درس
1- آرایش جدول در یک صفحه وب با ردیفهای افقی و عمودی در یک نمایش متن در یک صفحه مشبک
2- یکپارچه کردن عکسها و متون
3- ایجاد جدولی با سلولهایی با رنگهای متفاوت
4- ایجاد جداولی که در زمینه آنها از عکس استفاده شده است .
شروع درس
جداول با HTML3 معرفی شد و بعدها با Netscape گسترش پیدا کرد که آرایش را برای المانها و عناصر در صفحه انجام می داد . یکی از بیشترین استفاده های جدول زمانی است که شما می خواهید ستونی از متن را اضافه کنید .
کدهای HTML برای جداول ممکن است خیلی پیچیده به نظر برسد اما ما با ساخت جداول ساده ای کار را شروع می کنیم .
جداول از انتهای چپ با ستونهایی به سمت راست شروع می شوند . سپس ردیف دوم نیز با چنین ستونهایی ادامه دارد و ...
-- > -- > -- > -- > -- > -- > -- > -- > -- > -- > -- > -- > -- > -- > -- > -- > -- > -- > هر کدام از این خانه های مشبک را یک Cell می نامند .
< b >تگ < Table >< /b >
صفت border در تگ Table به مرورگر می فهماند که یک قابی در دور جدول با ضخامت مختلفی که عدد آن بر حسب pixel برابر با مقدار Border قرار می گیرد ، ایجاد کنید هر سطر با تگهای < tr > ... < / tr > ایجاد می شود و اطلاعات هر ردیف با ستونهای آن که با تگ < td > ... < / td > ایجاد می شود توصیف می گردند .
هر تگ < td > ...< / td > می تواند شامل انواعی از تگهای HTML مثل سرفصلها و ابر متنها و تصاویر خطی و غیره باشد ، صفات زیادی را برای تراز کردن اقلام جدول می توانید به کار ببرید .
ردیف ها و ستون ها
جداول ساده و زیبا و مربع شکل هستند . جدولی که در بالا ذکر شد شامل 3 ردیف ستون و 3 سطر می باشد ، با صفات Colspan و Rowspan چه می توان کرد ؟
تذکر :
صفت استفاده شده برای ستون دوم از سطر اول را با هم تلفیق کرده است ، همچنین می توانیم متن را در وسط هر خانه آرایش دهیم
در قبل 2 ستون را با هم تلفیق کردیم و بصورت یک سلول واحد در آوردیم . در اینجا می توانیم 2 سطر را با هم تلفیق کنیم و بصورت واحد در آوریم
اطلاعات یک جدول
1- صفحه lesson2.html را باز کنید .
2- مواردی که بین < pre > ...< / pre > را تماما حذف کنید .
3- این موارد را اضافه کنید :
تذکر : < td >< /tr >< /table >
نگاه کنید به ردیف اول کدها سر فصل جدول تگ< th > و< th / > دقیقا مانند < td > و < td / > عمل می کنند . متنی که بین < th > و < th / > نوشته می شود بطور خودکار بصورت جسم و برجسته به نمایش در می آید .
4- صفحه خود را ذخیره و آن را مجددا بار گذاری کنید .
مواردی را به جدول خود اضافه کنید . توانائیها و صفات دیگری در تگ < table > وجود دارد که باعث آرایش جدول می شود
X ضخامت دیواره خارجی جدول می باشد . صفت Cellpadding فضای خالی بین عناصر جدول از دیواره جدول می باشد . هر چه Y بیشتر باشد خانه جدول بزرگتر خواهد بود . صفت Cellspacing فاصله بین خانه های جدول را تنظیم می کند .
تگ را بصورت فوق در آورید :
1- جدول قبل را بصورت زیر ویرایش کنید
تگ < caption > نیز مابین تگ های < table > و < table /> قرار می گیرد .
2- برای سرگرمی هر متنی که مابین < th > و < th /> قرار می گیرد را تغییر دهید.
3- سپس جدول را به وسط صفحه انتقال دهید . اگر مرورگر شما از تگ < centert > و < center / > پشتیبانی می کند جدول را با این تگ محاصره کنید .
4- نتایج خود را ذخیره و صفحه را مجددا بار گذاری کنید .
5- در آخر می خواهیم یک ستون به طرف چپ اضافه کنیم . حالا می توانیم یک خانه خالی با اضافه کردن تگ < th > < th / > به ردیف اول جدول اضافه کنیم.
6- حال به ردیف دوم از جدول می رویم و خانه ای که 4 ردیف را در هم ادغام کرده به آن اضافه می کنیم .
جدول سایز خود را با محتویاتی که در خانه های جدول قرار داده می شود تعیین می کند ما چند تگ < br > اضافه کردیم تا از پهن شدن خانه های جدول جلوگیری کنیم شاید بخواهید تحقیق کنید که اگر این تگها را حذف کنیم چه پیش می آید ؟
7- در ردیف 6 جدول خانه ای اضافه می کنیم که به اندازه 2 ستون پهنا دارد.
8- نتایج خود را ذخیره و صفحه بارگذاری کنید .
جدول های غیر قابل روئیت ( خیالی )
جدول همراه با قاب دور برای نمودارها و اطلاعات مربوط به اهداف شما مهم می باشد . اصطلاح خیالی را به این خاطر به کار می بریم که برای خواننده روشن نیست که به یک جدول نگاه می کند . جدول خیالی غیر قابل رویت با همان تگ ساخته می شود با این تفاوت که Border آن صفر قرار داده می شود .
< table border= 0 > تمرین :
جداول خود را با تغییر Border به عدد صفر تغییر دهید . نتایج خود را ذخیره کنید .
جدا کردن لسیتهای طولانی
به عنوان یک تمرین در جداول خود از لیستهای متعدد استفاده کنید .
رنگی کردن جداول
اغلب مرورگرها از رنگی کردن جداول پشتیبانی می کنند.
مکان جدول
به تمامی ردیفها و ستونهای ساخته شده رنگ اضافه کنید .
تذکر :
شما می توانید از عکس به جای پیش زمینه جداول خود و پاورقی در سلولهای آن استفاده کنید . تذکر :
کاربرد ندارد در IE و شما می توانید تمامی جداولی که ایجاد کردید را بصورتی تغییر دهید که در پس زمینه آن عکس قرار گرفته باشد .
مروری بر مطالب
1- به چه منظوری المانهای یک صفحه را در جدول قرار می دهند ؟
2- چه فرقی بین تگهای < td / > و < td > و < th > و< th / > وجود دارد.
3- صفات Colspan=X و Rowspan=Y به چه منظوری به کار می رود ؟
4- چگونه یک جدول بدون قاب ایجاد می شود ؟
5- چگونه یک سطر از جدول را رنگی کنیم ؟
6- چگونه یک عکس را پیش زمینه یک جدول کنیم ؟
تمرین :
آموزش داده شده را در صفحات خود بکار ببرید .
درس 20 - نقشه های تصویری
اهداف این درس
1- دانستن تفاوت بین فرآیندهای طرف سرور – طرف مشتری
2- ایجاد تصاویری که هر تکه از آن شما را به قسمتی یا صفحه ای هدایت می کند .
شروع درس
در درس( a 7 ) آموختیم که چگونه می توانیم از تصاویر در صفحات وب خود استفاده کنیم . در اینجا می آموزیم که چگونه یک عکس را بگونه ای در آوریم که هر قطعه از آن بصورت اتصالاتی باشد و شما را به قسمتی از همان سایت و حتی سایتهای دیگر هدایت کند. ایجاد یک نقشه تصویری نیاز به یکسری پردازشهایی از طرف وب سرور دارد که چگونگی آن به قرار زیر است :
1- هنگامی که دیدن کننده صفحه را دید و روی عکس خاص کلیک کرد.
2- مرورگر وب می گوید بر روی من کلیک شده و پیامی را برای وب سرور ارسال می کند که بعضی بر روی مختصات عکس کلیک کردند.
3- وب سرور می گوید که من این مختصات را برای عگس گرفتم . فایل HTML که بدنبال پیدا کردن مختصات عکس می باشد می گوید اگر این مختصات بصورت مستطیل باشد دیدن کننده URL مربوطه را برای وب سرور ارسال می کند سپس سرور اطلاعات را به مرورگر ارسال می کند .
4- مرورگر موافقت می کند و سرور می گوید که به URL مذکور برو .
این از فعالیتهای طرف سرور بود که به سادگی و زیبایی این اعمال جدا را از هم انجام می دهد . اما به آن معنی است که برای کلیک بر روی نقشه های تصویری همیشه باید به وب سرور دسترسی داشت .
تگ نقشه های تصویری برای طرف کلاینت بصورت زیر است :
Img.gif نام عکس و map_nam اتصال آن می باشد . HTML file
ویژگی Coords
نواحی داغی که با مختصات x1 و y1 مختصات افقی و عمودی از گوشه بالا سمت چپ و x2 و y2 مختصات افقی و عمودی از گوشه بالا سمت راست را مشخص می کنند .
1- فایل lesson2.html را باز کنید .
2- تغییرات زیر را در روی پان انجام دهید .
3- دستورات HTML را برای مختصات نقشه بکار ببرید .
4- نتایج خود را ذخیره کنید .
5- حال باید صفحاتی را که به آنجا اتصال درست کردیم ایجاد کنیم .
6- صفات خود را ذخیره کنید .
مروری بر مطالب
1- تگهای < map > و < map / > چه عملی را انجام می دهند ؟
تمرین :
در صفحات خود از نقشه های تصویری استفاده کنید .
درس 21 - Meta tag
در این درس مروری بر 2 نوع meta tag داریم.
این meta tag ها در قسمتهای مختلف سند html ایجاد شده است که مرورگر شما آنها را نشان نمی دهد.انواع زیادی از این meta tag ها داریم که فقط به 2 نوع از کاربردی ترین انها اشاره میکنیم.
مکانی که این تگ در انجا قرار میگیرد مابین دو تگ < head > و .. < head / > می باشد.
استفاده از تگ Meta refresh برای جلو رفتن یک صفحه
این meta tag به شما این امکان را می دهد که صفحه وب شما بعد از یک عدد اختیاری (بر حسب ثانیه)به نمایش در اید.و سپس به طور اتوماتیک به به صفحه دیگر و یا حتی URL دیگری برود.
تذکر)به عنوان یک طراح صفحات وب باید کوشش کنید که بینندگان سایت شما پیام Site not Found را دیدین نکنند..
شما از طریق ابر متن ها میتوانید در صفحات وب گردش کنیدو به صفحات دیگر هدایت شویدولی با استفاده از Meta tag ها شما میتوانید به طور اتوماتیک چرخش کنید.
1-صفحه index.html راباز کنید و در آن تغیرات زیر را انجام دهید
عددی از ثانیه است که این صفحه بعد ازآن مدت به نمایش در می آید .قبل از انکه به صفحه دیگر با URL دیگر برود.
توجه کنید که تمامی رشته هائی که بعد از CONTENT ظاهرمی شوند باید داخل "" قرار بگیرند. توصیف گر تگ
META تمامی این اعمال سخت را برای درست کردن سایت آموزش از راه دور انجام دادید.حال میخواهید مردم بتوانند آن را از میان میلیونها سایت پیدا کنند.
META TAG در پیدا کردن و شناسائی صفحه شما در هنگام SEARCH کاربران به انها کمک خواهد کرد. به هر حال ما قصد نداریم مطالب پیچیده در ارتباط با موتورهای جستجو گر ایراد کنیم.بعضی برنامه نویسان ماهر کدهائی مینویسندکه این کدها سعی میکنندبسیاری از لینکهای وب را شناسائی کنند. و مقداری اطلاعات راجع به هر صفحه را برگردانندودر DATA BASE متمرکز کنند.کار بران تعدادی لغت توصیفی وارد میکنند اگر سایت شما در DATA BASE موجود باشد به کار بر معرفی خواهد شد.
سایت WWW.MCLI.DIST.MARICOPA.EDU/TUT From www.mcli.dist.maricopa.edu/tut برای سایت فوق بدون داشتن Meta tag موتور جستجو مطالب زیر را می آورد:
Writing HTML /ABOUT/FAQ/ALUMNI/REFRENCES/TAGS/LESSONS/ AUGUST1998/VERSION HISTORY /ABOUT THIS TUTORIAL WRITING HTML WAS CEATED TO HELP TEACHERS CEATING LEARNING…
با وارد کردن Meta tag
نتیجه را بصورت زیر می نویسیم : From:http://www.mcli.dist.marcopa.edu/tut/ More than just an HTML reference,this is a structured approach for learning how to create web pages , designed by specialists in learning at the Maricopa Center for Learning & Instruction قالب html برای اضافه کردن این meta tag بصورت زیر است
اگر در حالت ایجاد یک متن توصیفی هستیدباید توجه داشته باشید که ماکسیمم طول این meta tag نباید بیشتر از1024 کاراکتر باشد.
مروری بر مطالب
1-برای اینکه صفحه شما به طور اتوماتیک به صفحه دیگر برود چه باید کرد؟
2-چگونه از تگ meta refresh برای ایجاد 10 ثانیه وقفه و رفتن به صفحه دیگر استفاده میکنید؟
3- چگونه از Meta tag برای افزایش شانس در پیدا شدن صفحه خود در موتورهای جستجو گر استفاده می کنید
تمرین :
در صفحه خود از این دو نوع meta tag استفاده کنید
درس 22 - پنجره Target
اهداف این درس
1- ساختن یک ابر متنی که که با باز شدن آن صفحه جدید در پنجره ای جدید به نمایش در آید .
2- نوشتن قالبی برای HTML بطوریکه تمامی اتصالات در این صفحه مشخص بار گذاری شود .
3- محدودیت در باز شدن پنجره های متعدد.
شروع درس
برای تمامی صفحاتی که بر روی آن کار می کنیم اسنادی داریم که بر روی آنها ابر متن وجود دارد که با کلیک بر روی آنها صفحه جدید بارگذاری می شود و جایگزین مورد قبل می شود . بازدید کننده می تواند با استفاده از دگمه Back بر روی نوار ابزار به صفحه اول باز گردد.
اما ویژگی وجود دارد که برای باز شدن اتصال در یک صفحه جدید به آن نیاز دارید. در این درس ما به تغییرات در تگ < a href > برای مشخص کردن بارگذاری در پنجره ای جدید در مرورگر می پردازیم .
قبل از شروع باید نکاتی را در نظر داشته باشید . اگر مرورگر شما پنجرهای زیادی بصورت باز شده داشته باشد ممکن است دیدن کننده گمراه شود که کدامیک اول باز شده است . پنجره بعضی از مرورگرهای کامپیوتر کاملا مبهم است و نمی توان فهمید کدام پنجره اول باز شده است ؟
صفت TarGet
کد HTML که ما برای Target استفاده می کنیم بصورت زیر است :
در دروس قبل آموختیم که Href اشاره به یک URL دیگر یا یک صفحه وب دیگر دارد . قسمت دیگری از یک تگ نام آن می باشد که ما برای آن ایجاد می کنیم . ما می توانیم یک نام برای Target ایجاد کنیم که معین کننده هویت داخل مرورگر است . با کلیک بر روی یک اتصال چه اتفاقی می افتد ؟
مرورگر شما می گوید که من باید برای این آدرس یک HTML بگیرم http://www.mcli.dist.maricopa.edu/tut/likethis.html و آن را در یک پنجره به نام tutorial جایگیری می کند و چون چنین پنجره ای موجود ندارم یک پنجره جدید ایجاد می کند .
مقادیری که شما می توانید در Target بکار ببرید بصورت زیر است :
1. _Top
3._blank
2. _self
4. _parent که هر کدام معنی خاصی را دارند . بکار بردن مقدار _blank : زیان استفاده از این تگ این است که اگز شما 20 اتصال داشته باشید که تماما Target آنها هم نام باشند پنجره هایی زیادی ایجاد می شود که ممکن است سیستم شما را دچار مشکل کند .
مروری بر مطالب
1- چگونه یک اتصال را مجبور به باز کردن صفحه در صفحه ای جدید می کنید ؟
تمرین
تگهای گفته شده دراین درس را در صفحات خود بکار ببرید.
درس 23 - فریم کردن صفحه
اهداف این درس
1- ایجاد یک صفحه وب با قالبهای متفاوت
2- ایجاد اتصال از یک فریم به قسمتی دیگر از فریم دیگر
3- ایجاد ابر متن هایی که صفحه را کامل از بین ببرد و بعد صفحه دوم را ایجاد کند .
4- ویرایش و صفات حاشیه بندی فرمها
شروع درس
آیا شما تا به حال صفحاتی دیده اید که از قابهای متعدد در آن استفاده شود ؟ فرم صفحه را به 2 سند HTML جداگانه تقسیم می کند که معمولا 2 فرم بصورت متحد با یکدیگر عمل می کنند . در صفحات فرم دار از ابر متن ها نیز استفاده می کنند .
بعضی اوقات در اثر کلیک بر روی لینکها فرم قبلی کاملا از بین می رود و فرم جدید ایجاد می شود ، بعضی اوقات صفحه جدید بر روی همان فرم قبلی ایجاد می شود .
اشکالات فرمها
در صفحاتی که از اسناد متعدد در آن استفاده شده کاربران در هنگام بار گذاری صفحه و نیز در هنگام گرفتن پرینت از صفحات وب با مشکل مواجه می شوند .
ااساس فرم
صفحه ای که در آن از فرم استفاده می شود شامل یک سند اصلی HTML است که آن را برنامه کار می نامند . برای طرح و شکل و به ردیف در آوردن فرمها از صفت استفاده می شود . هر کدام از قابهایی که در یک صفحه فرم از آنها استفاده شده است خود یک سند HTML جداگانه دارند . در ابتدا باید بدانید که صفحه چگونه تقسیم می شود و به هر قاب چقدر فضا اختصاص داده می شود ؟
در قدم اول باید بدانید که صفحه از سطر یا ستون تشکیل شده است
نگاه کنید به مثال 1- که صفحه از 2 سطر و در مثال 2 صفحه از 2 ستون و مثال 3 که صفحه از 2 سطر و 2 ستون تشکیل شده است . در مثال 5 شما 3 سطر مشاهده می کنید که در وسط این سطرها 2 ستون قرار گرفته است و در مثال 6 سطر اول به 2 ستون تقسیم شده است .
حال به دقت به مثال 7 دقت کنید .سطرها و ستونها ایجاد frameset می کند . قالب HTML ایجاد صفحات به صورت زیر است :
تذکر :
هر Frameset معرف و تعریف کننده یک سری سطر یا ستون است
مقادیر X و Y و ... اشاره بر مقداری فضایی دارد که به هر سطر یا ستون اختصاص داده می شود یا بر حسب در صدی از پنجره مرورگر می باشد . برای هرستون ابعاد وابسته به یک سند HTML مشخص است که در قسمت
< =Frame src >
ذکر شده است . مرورگرهایی که نمی توانند قابها را نشان دهند مواردی که بین < Frameset > و < Frameset / > نوشته شده است را نادیده می گیرند و از جهت دیگر مرورگرهایی که امکان نمایش قابها در صفحه را دارند مطالبی که بین < Noframes > و < Noframes /> نوشته شده را نادیده می گیرند .
اعدادی که باید در تگ به جای مقدار Cols و Rows قرار دهید بر حسب پیکسل و یا درصد می باشد .
Source HTML مثال (1)
Sourece مثال 7
تذکر :
این صفحه وب نیاز به 6 سند HTML برای نمایش دارد . دستورات گفته شده برای مرورگرهای با ورژن بالا صادق است . در قسمت بالای فرم Navigation bar قرار گرفته که برای اتصال به صفحات دیگر سایت از آن استفاده می شود . قسمت پایین قاب شامل پاورقی صفحه و نیز اتصالات دیگری که باید در همان قاب جابه جا شود می باشد . در قاب دست چپ در وسط سطر شامل لینکهایی است که باید مطالب آن در همان قاب بارگذاری شود . در فرم دست چپ در میان سطر شامل ابر اتصالاتی است که شامل 3 قسمت متفاوت اصلی در صفحه است . که مطالب آنها باید در قاب راست بارگذاری شوند . این طراحی به ما اجازه می دهد که صفحه اصلی را به مقادیر گسسته تقسیم کنیم .
مروری بر مطالب
1- به چه منظور از تگ < frameset > و < frameset /> استفاده می شود ؟
2- چند سند HTML برای یک صفحه با 3 قاب افقی و 2 قاب عمودی لازم است ؟
3- چگونه اتصالاتی می توان ایجاد کرد که اطلاعات از یک قاب بر روی قابی دیگر بارگذاری شود ؟
تمرین :
تگهای ذکر شده را در صفحات خود بکار ببرید .
تذکر :
برای اینکه به کاربران اجازه داده شود که بتوانند با کشیدن دکمه ماوس سایز قابها را نیز تغییر دهند از Noresize استفاده می شود .
درس 24 - اضافه کردن فرم به صفحات وب
اهداف این درس
1- توصیف استفاده های فرمها در صفحات
شروع درس
فرمها چه هستند ؟ یقینا تا به حال آنها را در صفحات خود دیده اید . فرمها برای اضافه کردن موارد آموزنده در صفحه مورد استفاده قرار می گیرند و اجازه ارتباط کاربران با سایت شما را ممکن می سازند . برای جمع شدن اطلاعات نقش فرمها در جمع آوری انواع مواردی است که کاربران در داخل میدانهای متنی در مرورگر و منوها قرار می دهند و کلیدهای رادیوئی نیز باید در صفحات برای انتخاب موارد فرم جایگزین شوند.
مرورگرها این اطلاعات را می گیرند و آن را با بسته هایی با فرمتهای قابل ارسال در وب سرور پنهان می کنند . در اینجا برنامه های که منتظر اطلاعات فرمها می باشدوجود دارند این برنامه ها اطلاعات فرمها را از حالت مخفی بیرون آورده و بر آنها نظارت کرده و آنها را ذخیره و سپس به دیدن کننده برمی گردانند . در درس بعدی شما خواهید آموخت که چگونه این فرمها را ایجاد کنید .
مروری بر مطالب
1- فرمها چگونه مورد استفاده قرار می گیرند ؟
2- کجا فرمها را می بینید و از آن استفاده می کنید .
درس ٢٤-ب - بوجود آوردن فرم ها
بوجود آوردن فرم ها درس 24/a
اهداف این درس
1- ایجاد میدانهای متنی
2- میدانهایی برای وارد نمودن Password
3- میدانهایی برای ایجاد
Email 4- دکمه های رادیویی
5- دکمه ها
6-ايجاد checkbox
7- منوهای انتخاب شونده
شروع درس
در این درس به معرفی اساس و اجزاء فرمها می پردازیم .
فرمها در صفحه وب با < form > ....< /form > تعریف می شوند . کلیه اجزاء فرمها مثل میدانهای متنی ، کلیدها و ... در بین این 2 تگ قرار خواهند گرفت که قالب HTML آن بصورت زیر است :
ارزش Action یا مقداری که در آن قرار می گیرد موقعیت برنامه یا اسکریپتی است که می خواهد فرآیندی بر روی اطلاعات ارسال شده توسط کاربر را انجام دهد. و صفت Method دارای 2 مقدار Get و Gost می باشد. که آن نیز معرف 2 روشی است که اطلاعات باید برای نرم افزار پردازش کننده ارسال شود . تمامی اجزاء داخل تگ < form > اطلاعات که درون آنها می باشد را ارسال می کنند . هر جزء شامل type می باشد .
برای ایجاد میدانهای متنی که دیدن کننده بتواند درون آنها تایپ کند ، طول پیش فرض است که 20 کاراکتر می باشد . ولی شما می توانید میدانهایی با سایز های دیگر ایجاد کنید . شما می توانید با قرار دادن صفت Maxlenght برای آن یک حد تعریف کنید . متن داخل میدانها هنگام بارگذاری صفحه خالی می شود مگر آنکه شما برای آن رشته متن را در صفت Value تعریف کنید .
ظاهر آن مانند میدان متنی است با این تفاوت که وقتی کاربر درون این میدان تایپ می کند به جای نمایش کاراکترها نقطه یا ستاره نمایش می دهد . میدان متنی Password در هنگام ارسال کوشش به جلو رفتن می کند و بعد از رساندن اطلاعات به سرور کوشش آنها پایان می پذیرد .
Character wide.
میدانهایی که چندین خط دارند و دیدن کننده برای دیدن متن از Scroll استفاده می کند. تگ تعریف کننده سایز میدان به وسیله اعدادی که در صفات Cols و Rows وارد می شوند تعریف می گردند با وارد کردن خصیصه Wrap=Virtual متنی که وارد این میدان می شود ، بطور اتوماتیک شکسته می شود . شما همچنین می توانید متنی را بطور پیش فرض در آن داشته باشید .
کلیدهای رادیوئی (type="Radio")
کلیدهای رادیویی کلیدهایی هستند که از یک گروه کلید همزمان فقط یکی از آنها را می توان انتخاب کرد و اگر یکی از آنها را کلیک کردید و سپس دیگری را کلیک کردید دکمه اول از حالت انتخاب خارج می شود . یک گروه از دکمه های هم رده با گذاشتن یک نام مشترک برای همه آنها بوجود می آیند و مقداری که فرستاده می شود برابر است با مقداری که توسط دکمه رادیویی انتخاب شده است . با گذاشتن خصیصه Checked درآخر تگ یک دکمه این دکمه بصورت پیش فرض در هنگام بارگذاری صفحه انتخاب می گردد.
تذکر :
کلیدهایی که اسم های جداگانه دارند بصورت مستقل از هم عمل می کنند .
این گونه کلیدها شبیه به کلیدهای رادیوئی عمل می کنند اما تحت تاثیر کلیدهای دیگر نیستند . بنابراین شما می توانید بیشتر از یک مورد انتخاب در یک گروه کلید شبیه به هم داشته باشید . توجه کنید که هر Checkbox اسم منحصر به فرد دارد . اگر یک Checkbox علامت نخورده باشد با گذاشتن دکمه ماوس بر روی جایی از پهنای آن و کلیک کردن آن می توانید آن را به حالت انتخاب در آورید و نیز دوباره بر روی آن می توانید آن را از حالت انتخاب خارج کنید . مقداری که برای سرور ارسال می شود برابر با ارزش مقداری است که کنار Checkbox قرار گرفته است اضافه کردن خصیصه Checkbox در این تگ باعث می شود آن مورد بطور پیش فرض انتخاب گردد .
منوهای انتخاب شونده به کاربران این امکان را می دهد که از بین انتخابهای متعدد یکی را انتخاب کنند و تگ تعریف آن < option > و < option / > می باشد .
مقدار این ویژگی در هنگام پردازش بازگردانده می شود با اضافه کردن ویژگی Selected در این تگ این جزء در هنگام بارگذاری صفحه بصورت پیش فرض انتخاب می گردد . اگر چنین ویژگی را به کار نبرید اولین مقدار منو بطور پیش فرض انتخاب می گردد.
به دنبال ایجاد دکمه ها و فرم ها کلید Submit به مرورگر اجازه می دهد که تمامی موارد انتخابی شامل منوهای انتخاب شده ، متنهای وارد شده و ... را جمع آوری و آنها را به جایی که مکان آن در صفت Action آورده شده است ارسال کند و کلید Reset فرم را به حالت اول بر می گرداند .
مروری بر مطالب
1- ساختار یک فرم چیست ؟
2- تفاوت میان کلیدهای رادیول و Checkbox در چیست ؟
3- چگونه منوهای بازشونده در صفحه ایجاد کنیم ؟
4- فرق بین کلیدهای Submit و Reset در چیست ؟
تمرین :
موارد گفته شده و کلیه فرم ها را در صفحات ساخته شده خود به کار ببرید .
درس 25 - چند رسانه ای در صفحات شما
اهداف این درس
1- در نظر گرفتن فاکتورهایی برای ایجاد چند رسانه ای
2- در هنگام چند رسانه ای کردن صفحه چه مواردی را باید برای بازدیدکنندگان در نظر گرفت ؟
شروع درس
تا شروع سال 1993 صفحات وب محدود به متن و چند عکس بودند . امروزه جذابیت و گیرایی زیادی در صفحات بوجود آمده است . می توانید از انواع رسانه ها نظیر کارتون ، ویدئو ، انیمیشن ، حرکات چرخشی ، صدا ، فرمهای بر هم کنشی استفاده کنید . قبل ازاعمال این رسانه ها ، باید دقیقا در نظر بگیرید که چه ارزشی را دارید به صفحه اضافه می کنید .مثلا وجود انیمیشن رقص ممکن است در ابتدا جذاب به نظر برسد ولی با مرور زمان با نگاه کردن به آن ممکن است حواس شما را پریشان کند .
پس سئوالی که به نظر شما می رسد این است که آیا اضافه کردن موارد (sound , video, … ) به صفحه مهم است ؟ در جواب این سئوال ...
هنگامی که شما تصمیم به اضافه کردن چند رسانه ای در صفحه وب خود می کنید در ابتدا باید در نظر بگیرید چه زمانی صرف می شود تا شما اینگونه رسانه ها را ایجاد کنید .
از موارد دیگری که باید در نظر گرفت بازدیدکنندگان می باشند . شما باید از خودتان بپرسید اجراء رسانه ای که در صفحه ایجاد می کنید به چه عاملیتهایی نیاز دارید ؟
و زمانی که سپری شود تا کاربر آن نرم افزار را بر روی سیستم خود نصب کند و سپس سیستم را Restart کند ممکن است سایت شما را فراموش کنند. مطلب بعدی دیگر این است که چه زمانی طول می کشد که صفحه برای کاربر بارگذاری شود . کاربرانی که مجبور به برقراری ارتباط با مودم هستند ممکن است برایشان مقدور نباشد که با صفحه شما ارتباط برقرار کنند ، شما برای اضافه کردن ویدئو به صفحه خود نیاز به استفاده از مرورگرهای ویژه دارید.
مروری بر مطالب
1- برای اضافه کردن چند رسانه ای چه مواردی را در هنگام استفاده از رسانه ها باید در نظر گرفت ؟
2- در نظر گرفتن مواردی که کاربر برای بارگذاری به آن احتیاج دارد برای گرفتن اطلاعات بیشتر می توانید به این دو سایت مراجعه کنید :
http://wdvl.com/md timedia http://www.mcli-dist.maricopa.edu/authoring
25 -ب - اضافه کردن فیلم و صوت -multimedia
1- مشخص کردن فرمتهایی که برای فیلم از آن استفاده می شود .
2- مواردی که برای دیدن فیلم به آن نیاز دارید
3- نوشتن کد HTML برای گذاشتن فیلم در صفحه
Real video و Quick time نیاز به مرورگرهای Plug in دارند . خوشبختانه اکثر مرورگرهای امروزی از این تکنولوژی حمایت می کنند اما بعضی اوقات باید به روز شوندو این به دلیل آن است که ویدئو به پهنای باند زیادی احتیاج دارد. اگر شما بخواهید به عنوان یک طراح از ویدئو در صفحات خود استفاده کنید که با کلیک بر روی آن فیلم به نمایش در بیاید باید به چند تذکر توجه کنید که در این درس بیان خواهیم کرد . برای استفاده از ویدئو در صفحات خود باید از تگ < EMBED > استفاده کنیم که به نوعی شبیه به تگ < IMG > عمل می کنید .
< EMBED src="video.mov" width="320" height="240" > < /Embed >
موارد دیگری که باید رعایت کرد
مروری بر مطالب
1- قالب HTML برای گذاشتن ویدئو در صفحه چیست ؟
2- چه ویژگیهایی در تگ < EMBED > آورده می شود و برای اینکه ویدئو به طور اتوماتیک بارگذاری شود چه باید کرد ؟
اطلاعات اضافی
متاسفانه اکثر اوقات این قالب فیلم در صفحات گیرایی لازم را ندارد و Quick time همیشه فرمت خوبی نیست و می توان از 2 فرمان دیگر AVI و MPEG استفاده کرد.
درس 25 - ج - قالبهاي صوتي مورد استفاده
اهداف این درس
1- از چه قالبهایی برای گذاشتن صدا در صفحات وب استفاده می شود ؟
2- مواردی که در هنگام گذاشتن صوت در پنجره باید رعایت کرد چیست ؟
3- نوشتن یک کد HTML برای گذاشتن صدا در صفحه.
شروع درس
Sound یکی از روشهای خوب برای رسیدن اطلاعات به کاربر می باشد و شما در بیشتر از سایتهای وب می توانید از این امکان استفاده کنید. سئوال این است که چه وقت صدا مفید است ؟ Audio برای ( سخنرانیها ، اخبار و رویدادهای مهم و ... ) مورد استفاده قرار می گیرد و اغلب از پهنای باند کمی استفاده می کند . صدا مانند ویدئو باید از آنالوگ به دیجیتال تبدیل شود . فرمتهای مختلفی برای صداگذاری در صفحه وجود دارد . بعضی از انواع آن عبارتست از :
MIDI , AV , AIFF , LWA , MP3 , ... فرمت ویژه ای بنام MIDI وجود دارد که حجم آن بسیار کم است و نسبت به فایلهای wave ترجیح دارد . برای قرار دادن صدا در صفحه وب از تگ فوق استفاده می شود .
چگونه می توان یک فایل صدا در صفحه قرار داد که در هنگام بارگذاری صفحه بدون اینکه نرم افزار خاصی اجرا شود شروع به پخش صدا شود ؟
مروری بر مطالب
1- انواع فرمتهای صدا که در صفحه بکار می رود را بیان کنید .
2- برای گذاشتن صدا در صفحه از چه کدی استفاده می شود ؟
3- چگونه فایل صدا را برای تکرار متناوب در حلقه قرار دهیم .
پاسخ با نقل قول
علاقه مندی ها (بوک مارک ها)