آموزش HTML > فصل ششم

[Search]

درس 21 - **** tag

در این درس مروری بر 2 نوع **** tag داریم.
این **** tag ها در قسمتهای مختلف سند html ایجاد شده است که مرورگر شما آنها را نشان نمی دهد.انواع زیادی از این **** tag ها داریم که فقط به 2 نوع از کاربردی ترین انها اشاره میکنیم.
مکانی که این تگ در انجا قرار میگیرد مابین دو تگ < head > و .. < head / > می باشد.
استفاده از تگ **** refresh برای جلو رفتن یک صفحه
این **** tag به شما این امکان را می دهد که صفحه وب شما بعد از یک عدد اختیاری (بر حسب ثانیه)به نمایش در اید.و سپس به طور اتوماتیک به به صفحه دیگر و یا حتی URL دیگری برود.
تذکر)به عنوان یک طراح صفحات وب باید کوشش کنید که بینندگان سایت شما پیام Site not Found را دیدین نکنند..
شما از طریق ابر متن ها میتوانید در صفحات وب گردش کنیدو به صفحات دیگر هدایت شویدولی با استفاده از **** tag ها شما میتوانید به طور اتوماتیک چرخش کنید.
1-صفحه index.html راباز کنید و در آن تغیرات زیر را انجام دهید عددی از ثانیه است که این صفحه بعد ازآن مدت به نمایش در می آید .قبل از انکه به صفحه دیگر با URL دیگر برود.
توجه کنید که تمامی رشته هائی که بعد از CONTENT ظاهرمی شوند باید داخل "" قرار بگیرند. توصیف گر تگ
**** تمامی این اعمال سخت را برای درست کردن سایت آموزش از راه دور انجام دادید.حال میخواهید مردم بتوانند آن را از میان میلیونها سایت پیدا کنند.
**** TAG در پیدا کردن و شناسائی صفحه شما در هنگام SEARCH کاربران به انها کمک خواهد کرد. به هر حال ما قصد نداریم مطالب پیچیده در ارتباط با موتورهای جستجو گر ایراد کنیم.بعضی برنامه نویسان ماهر کدهائی مینویسندکه این کدها سعی میکنندبسیاری از لینکهای وب را شناسائی کنند. و مقداری اطلاعات راجع به هر صفحه را برگردانندودر DATA BASE متمرکز کنند.کار بران تعدادی لغت توصیفی وارد میکنند اگر سایت شما در DATA BASE موجود باشد به کار بر معرفی خواهد شد.
سایت WWW.MCLI.DIST.MARICOPA.EDU/TUT From www.mcli.dist.maricopa.edu/tut برای سایت فوق بدون داشتن **** tag موتور جستجو مطالب زیر را می آورد:
Writing HTML /ABOUT/FAQ/ALUMNI/REFRENCES/TAGS/LESSONS/ AUGUST1998/VERSION HISTORY /ABOUT THIS TUTORIAL WRITING HTML WAS CEATED TO HELP TEACHERS CEATING LEARNING…
با وارد کردن **** tag
نتیجه را بصورت زیر می نویسیم : From:OpenDNS 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 برای اضافه کردن این **** tag بصورت زیر است


اگر در حالت ایجاد یک متن توصیفی هستیدباید توجه داشته باشید که ماکسیمم طول این **** tag نباید بیشتر از1024 کاراکتر باشد.

مروری بر مطالب


1-برای اینکه صفحه شما به طور اتوماتیک به صفحه دیگر برود چه باید کرد؟
2-چگونه از تگ **** refresh برای ایجاد 10 ثانیه وقفه و رفتن به صفحه دیگر استفاده میکنید؟
3- چگونه از **** tag برای افزایش شانس در پیدا شدن صفحه خود در موتورهای جستجو گر استفاده می کنید

تمرین :

در صفحه خود از این دو نوع **** tag استفاده کنید

[Search]

اهداف این درس

1- ساختن یک ابر متنی که که با باز شدن آن صفحه جدید در پنجره ای جدید به نمایش در آید .
2- نوشتن قالبی برای HTML بطوریکه تمامی اتصالات در این صفحه مشخص بار گذاری شود .
3- محدودیت در باز شدن پنجره های متعدد.

شروع درس

برای تمامی صفحاتی که بر روی آن کار می کنیم اسنادی داریم که بر روی آنها ابر متن وجود دارد که با کلیک بر روی آنها صفحه جدید بارگذاری می شود و جایگزین مورد قبل می شود . بازدید کننده می تواند با استفاده از دگمه Back بر روی نوار ابزار به صفحه اول باز گردد.
اما ویژگی وجود دارد که برای باز شدن اتصال در یک صفحه جدید به آن نیاز دارید. در این درس ما به تغییرات در تگ < a href > برای مشخص کردن بارگذاری در پنجره ای جدید در مرورگر می پردازیم .
قبل از شروع باید نکاتی را در نظر داشته باشید . اگر مرورگر شما پنجرهای زیادی بصورت باز شده داشته باشد ممکن است دیدن کننده گمراه شود که کدامیک اول باز شده است . پنجره بعضی از مرورگرهای کامپیوتر کاملا مبهم است و نمی توان فهمید کدام پنجره اول باز شده است ؟

صفت TarGet

کد HTML که ما برای Target استفاده می کنیم بصورت زیر است :

در دروس قبل آموختیم که Href اشاره به یک URL دیگر یا یک صفحه وب دیگر دارد . قسمت دیگری از یک تگ نام آن می باشد که ما برای آن ایجاد می کنیم . ما می توانیم یک نام برای Target ایجاد کنیم که معین کننده هویت داخل مرورگر است . با کلیک بر روی یک اتصال چه اتفاقی می افتد ؟


مرورگر شما می گوید که من باید برای این آدرس یک HTML بگیرم Some people و آن را در یک پنجره به نام tutorial جایگیری می کند و چون چنین پنجره ای موجود ندارم یک پنجره جدید ایجاد می کند .
مقادیری که شما می توانید در Target بکار ببرید بصورت زیر است :
1. _Top
3._blank
2. _self

4. _parent که هر کدام معنی خاصی را دارند . بکار بردن مقدار _blank : زیان استفاده از این تگ این است که اگز شما 20 اتصال داشته باشید که تماما Target آنها هم نام باشند پنجره هایی زیادی ایجاد می شود که ممکن است سیستم شما را دچار مشکل کند .

مروری بر مطالب

1- چگونه یک اتصال را مجبور به باز کردن صفحه در صفحه ای جدید می کنید ؟
تمرین
تگهای گفته شده دراین درس را در صفحات خود بکار ببرید.

[Search]

اهداف این درس

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 استفاده می شود .

[Search]

اهداف این درس

1- توصیف استفاده های فرمها در صفحات

شروع درس

فرمها چه هستند ؟ یقینا تا به حال آنها را در صفحات خود دیده اید . فرمها برای اضافه کردن موارد آموزنده در صفحه مورد استفاده قرار می گیرند و اجازه ارتباط کاربران با سایت شما را ممکن می سازند . برای جمع شدن اطلاعات نقش فرمها در جمع آوری انواع مواردی است که کاربران در داخل میدانهای متنی در مرورگر و منوها قرار می دهند و کلیدهای رادیوئی نیز باید در صفحات برای انتخاب موارد فرم جایگزین شوند.
مرورگرها این اطلاعات را می گیرند و آن را با بسته هایی با فرمتهای قابل ارسال در وب سرور پنهان می کنند . در اینجا برنامه های که منتظر اطلاعات فرمها می باشدوجود دارند این برنامه ها اطلاعات فرمها را از حالت مخفی بیرون آورده و بر آنها نظارت کرده و آنها را ذخیره و سپس به دیدن کننده برمی گردانند . در درس بعدی شما خواهید آموخت که چگونه این فرمها را ایجاد کنید .

مروری بر مطالب

1- فرمها چگونه مورد استفاده قرار می گیرند ؟
2- کجا فرمها را می بینید و از آن استفاده می کنید .

[Search]

بوجود آوردن فرم ها درس 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 در چیست ؟

تمرین :

موارد گفته شده و کلیه فرم ها را در صفحات ساخته شده خود به کار ببرید .

[Search]

اهداف این درس

1- در نظر گرفتن فاکتورهایی برای ایجاد چند رسانه ای
2- در هنگام چند رسانه ای کردن صفحه چه مواردی را باید برای بازدیدکنندگان در نظر گرفت ؟

شروع درس

تا شروع سال 1993 صفحات وب محدود به متن و چند عکس بودند . امروزه جذابیت و گیرایی زیادی در صفحات بوجود آمده است . می توانید از انواع رسانه ها نظیر کارتون ، ویدئو ، انیمیشن ، حرکات چرخشی ، صدا ، فرمهای بر هم کنشی استفاده کنید . قبل ازاعمال این رسانه ها ، باید دقیقا در نظر بگیرید که چه ارزشی را دارید به صفحه اضافه می کنید .مثلا وجود انیمیشن رقص ممکن است در ابتدا جذاب به نظر برسد ولی با مرور زمان با نگاه کردن به آن ممکن است حواس شما را پریشان کند .
پس سئوالی که به نظر شما می رسد این است که آیا اضافه کردن موارد (sound , video, … ) به صفحه مهم است ؟ در جواب این سئوال ...




هنگامی که شما تصمیم به اضافه کردن چند رسانه ای در صفحه وب خود می کنید در ابتدا باید در نظر بگیرید چه زمانی صرف می شود تا شما اینگونه رسانه ها را ایجاد کنید .
از موارد دیگری که باید در نظر گرفت بازدیدکنندگان می باشند . شما باید از خودتان بپرسید اجراء رسانه ای که در صفحه ایجاد می کنید به چه عاملیتهایی نیاز دارید ؟
و زمانی که سپری شود تا کاربر آن نرم افزار را بر روی سیستم خود نصب کند و سپس سیستم را Restart کند ممکن است سایت شما را فراموش کنند. مطلب بعدی دیگر این است که چه زمانی طول می کشد که صفحه برای کاربر بارگذاری شود . کاربرانی که مجبور به برقراری ارتباط با مودم هستند ممکن است برایشان مقدور نباشد که با صفحه شما ارتباط برقرار کنند ، شما برای اضافه کردن ویدئو به صفحه خود نیاز به استفاده از مرورگرهای ویژه دارید.

مروری بر مطالب

1- برای اضافه کردن چند رسانه ای چه مواردی را در هنگام استفاده از رسانه ها باید در نظر گرفت ؟
2- در نظر گرفتن مواردی که کاربر برای بارگذاری به آن احتیاج دارد برای گرفتن اطلاعات بیشتر می توانید به این دو سایت مراجعه کنید :
http://wdvl.com/md timedia http://www.mcli-dist.maricopa.edu/authoring

[Search]

1- مشخص کردن فرمتهایی که برای فیلم از آن استفاده می شود .
2- مواردی که برای دیدن فیلم به آن نیاز دارید
3- نوشتن کد HTML برای گذاشتن فیلم در صفحه
Real video و Quick time نیاز به مرورگرهای Plug in دارند . خوشبختانه اکثر مرورگرهای امروزی از این تکنولوژی حمایت می کنند اما بعضی اوقات باید به روز شوندو این به دلیل آن است که ویدئو به پهنای باند زیادی احتیاج دارد. اگر شما بخواهید به عنوان یک طراح از ویدئو در صفحات خود استفاده کنید که با کلیک بر روی آن فیلم به نمایش در بیاید باید به چند تذکر توجه کنید که در این درس بیان خواهیم کرد . برای استفاده از ویدئو در صفحات خود باید از تگ < EMBED > استفاده کنیم که به نوعی شبیه به تگ < IMG > عمل می کنید .
< EMBED src="video.mov" width="320" height="240" > < /Embed >
موارد دیگری که باید رعایت کرد
توصيهارزشويژگيهاي embedنياز به آدرس کامل فايل داريد مسير فايل ويدئو SRCفيلم يا بطور اتوماتيک به نمايش در مي آيد يا کاربر بايد بر روي دکمه کليک کند ابعاد فيلم true/false Width heightفيلم کنترل بار را در بالاي صفحه ايجاد کند يا خير True / false Controllerبا کليک بر روي فيلم محل براي ديدن کننده ارسال شودURLhref به مرورگر اجازه مي دهند فيلم را در پنجره جديد نشان دهد نام پنجره Targetفيلم در حلقه تکرار شود True/falseLoopبراي کاربر ارسال شود Quicktime در صورت نداشتن URLPlug in spage

مروری بر مطالب

1- قالب HTML برای گذاشتن ویدئو در صفحه چیست ؟
2- چه ویژگیهایی در تگ < EMBED > آورده می شود و برای اینکه ویدئو به طور اتوماتیک بارگذاری شود چه باید کرد ؟

اطلاعات اضافی

متاسفانه اکثر اوقات این قالب فیلم در صفحات گیرایی لازم را ندارد و Quick time همیشه فرمت خوبی نیست و می توان از 2 فرمان دیگر AVI و MPEG استفاده کرد.

[Search]

اهداف این درس

1- از چه قالبهایی برای گذاشتن صدا در صفحات وب استفاده می شود ؟
2- مواردی که در هنگام گذاشتن صوت در پنجره باید رعایت کرد چیست ؟
3- نوشتن یک کد HTML برای گذاشتن صدا در صفحه.

شروع درس

Sound یکی از روشهای خوب برای رسیدن اطلاعات به کاربر می باشد و شما در بیشتر از سایتهای وب می توانید از این امکان استفاده کنید. سئوال این است که چه وقت صدا مفید است ؟ Audio برای ( سخنرانیها ، اخبار و رویدادهای مهم و ... ) مورد استفاده قرار می گیرد و اغلب از پهنای باند کمی استفاده می کند . صدا مانند ویدئو باید از آنالوگ به دیجیتال تبدیل شود . فرمتهای مختلفی برای صداگذاری در صفحه وجود دارد . بعضی از انواع آن عبارتست از :
MIDI , AV , AIFF , LWA , MP3 , ... فرمت ویژه ای بنام MIDI وجود دارد که حجم آن بسیار کم است و نسبت به فایلهای wave ترجیح دارد . برای قرار دادن صدا در صفحه وب از تگ فوق استفاده می شود .

چگونه می توان یک فایل صدا در صفحه قرار داد که در هنگام بارگذاری صفحه بدون اینکه نرم افزار خاصی اجرا شود شروع به پخش صدا شود ؟

مروری بر مطالب

1- انواع فرمتهای صدا که در صفحه بکار می رود را بیان کنید .
2- برای گذاشتن صدا در صفحه از چه کدی استفاده می شود ؟
3- چگونه فایل صدا را برای تکرار متناوب در حلقه قرار دهیم .