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

[Search]

درس 8 - LINK ( اتصال )


URL- چیست ؟

قدرت واقعی وب در توانایی آن در ایجاد ابر متن هایی است که وابسته به اطلاعات است که آن اطلاعات بصورتهای صوت و عکس و ... انیمیشن در یک کامپیوتر راه دور قرار داده شده است www پهناور از یک آدرس شناخته شده بنام URL که مخفف Uniform Resource Location است برای مشخص کردن موقعیت مکان خود استفاده می کند.
این اتصالات ابرمتن معمولا با خطی در زیر آن مشخص شده اند.
a ) اتصال به یک فایل محلی

اهداف این درس

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

شروع درس

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

اتصال به فایلهای محلی

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

برای لنگرگاه لینک استفاده می شود و href برای ارجاع دادن ابرمتن مطلب یا عکسی که از آن به عنوان اتصال استفاده می شود بعد از بسته شدن اولین تگ و قبل از شروع < a / > قرار می گیرد . معمولا متونی که دارای اتصال هستند با خطی در زیر آنها مشخص می شوند .
حال مراحل زیر را برای ساختن یک اتصال دنبال کنید:
1- ابتدا فایل Lesson1.html را باز کنید .
2- در زیر لغت آموزش از راه دور متن زیر را وارد کنید .
"در اینجا ما سعی می کنیم شما را با بزرگترین سایتهای آموزش از راه دور آشنا کنیم و برخی از آنها را ترجمه و برای استفاده شما در سایت بکار ببریم" .
3- حال عبارات زیر را وارد کنید: در این صفحه شما طراحی صفحات وب را مطالعه خواهید کرد و ما در اینجا به
امیدواریم استفاده لازم را ببرید . جمله آموزش HTML را می توانید در یک سند HTML ثانوی با نام Lesson2.html ذخیره شده ببینید که در مراحل 5 و 6 آن را دنبال می کنیم .
4- سند خود را ذخیره کنید .
5- حال بوسیله ویرایشگر متنی یک ویرایشگر جدید باز کنید.
6- متون زیر را وارد کنید .

در اینجا بر عناوین آموزش HTML که از مهمترین آنها ساختن ابر متن ها می باشد می پردازیم :

7- این فایل را با نام Lesson2.html ذخیره کنید.
8- دوباره فایل Lesson1.html را بارگذاری کنید .
9- هنگامی که روی آموزش HTML کلیک کنید به صفحه 2 که در مورد آموزش HTML می باشد هدایت می شوید .

اتصال به یک تصویر :

در درس 7 توضیح دادیم که چگونه یک عکس خطی را در صفحه وب نمایش دهیم . با تگ anchor شما می توانید یک اتصال برای نمایش فایل گرافیکی ایجاد کنید . هنگامی که این اتصال انتخاب شود فایل گرافیکی برای نمایش فایل گرافیکی به کامپیوتر شما آورده می شود . ساده ترین روش آن است که تصویر و سند شما در یک شاخه باشند . با یک اتصال ساده بر روی یک متن فایل گرافیکی به نمایش در آید.

حال مراحل زیر را برای اضافه کردن یک اتصال به فایل گرافیکی در سند خود دنبال می کنیم :
1- یک عکس در کامپیوتر خود قرار دهید .
2- فایل Lesson2.html را باز کنید .
متن زیر را به آن اضافه کنید :
برای آموزش بهتر از یک سری تصاویر استفاده می کنیم . با دیدن
آموزش مفیدتر خواهد بود.
3- ذخیره مراحل انجام شده
4- کلیک بر روی اتصال که در مرحله 3 ایجاد شد.
5- تصویر نمایش داده می شود .

اتصال به شاخه های دیگر

نوع دیگر اتصال ، اتصال به فایل در شاخه ای به جز آن شاخه ای که سند اصلی ما در آن قرار دارد. مثلا در آموزش ما ممکن است از تصاویر پیشنهادی استفاده کنیم که همه آنها را در شاخه تصویر ذخیره می کنیم و سندهای HTML را در شاخه سند ، بنابراین در اینجا از اتصال شاخه به شاخه استفاده می کنیم .
مراحل زیر را انجام دهید :
1- در کامپیوتر خود شاخه ای به نام Picture ایجاد کنید .
2- فایل گرافیکی Lesson2.gif را به یک شاخه جدید منتقل کنید .
3- فایل Lesson2.html را در ویرایشگر خود باز کنید .
4- تگ زیر را به سند خود اضافه کنید :
5- سند خود را ذخیره کنید و دوباره بارگذاری کنید .

اتصال در شاخه های تودرتو

ممکن است برای آدرس دهی در اتصالات مجبور به استفاده از فولدرهای تو در تو شویم :
< a href ="…/…/home.html" >back to home< /a >
هر کدام از این مسیرها که با / جدا شده اند یک URL می باشند که به مرورگر برای نمایش عکس در صفحه کمک می کنند .
1- ابتدا یک فولدر با نام آموزش ایجاد کنید .
2- دو فایل HTML شناخته شده خود را به این فولدر انتقال دهید .
3- تصاویر خود به نامهای Lesson1.jpg و Lesson2.jpg را در فولدر Picture انتقال دهید. سپس فولدرهای Picture و Amozesh را به فولدر Work انتقال دهید.
4- فایل Lesson1.html را باز کنید .
5- به اتصال درون این فایل توجه کنید.

6- تگ < Img > را ویرایش کنید .

7- اعمال خود را ذخیره کنید .



یک تغییر کوچک

روش نرمال و معمولی برای ذخیره سازی اسناد این است که معمولا سند اول را با نام Index.html ذخیره می کنند پس بهتر است فایل Lesson1.html را Rename کرده و آن را با نام index.html ذخیره کنید.

چرا باید چنین کنید ؟

فرض کنید شما کار خود را به اتمام رساندید و آماده هستید تا صفحات را بصورت وب ببینید. URL سایت شما OpenDNS می باشد. و فایل مورد نظر شما در این شاخه ذخیره شده است : AskMySite Domain Name Strategy, Global Domain Registration, Domain Monitoring Service /courses /geolgy /lesson1.html بنابراین URL آن عبارتست از :
OpenDNS بطور معمولی نامی که برای صفحات وب بطور پیش فرض در نظر گرفته می شود index.html است .

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

1- چه مراحلی را برای ایجاد یک اتصال محلی دنبال می کنید ؟
2- چه مراحلی را برای نمایش یک عکس در پنجره جدید دنبال می کند.
3- چگونه اسناد اتصالات را در شاخه های متعدد نگهداری می کنند ؟
4- اهمیت نامگذاری index.html در چیست ؟

توضیحات اضافی

شما می توانید از این روش برای Down load کردن نرم افزارهای مختلف نیز استفاده کنید . روش انجام آن بصورت زیر است :

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

[Search]

اهداف این درس

1- شناسایی وظیفه یک URL
2- تشخیص ساختار یک URL
3- امتحان یک اتصال به یک URL

تذکر:

برای این درس شما نیاز به فایل متنی HTML ندارید.
URL چیست ؟

Uniform Resource Location -URL آدرسی است که www از آن برای پیدا کردن فایلها و اسناد کامپیوترها در روی اینترنت از آن استفاده می کند در مرورگر شما URL این سند در قسمت آدرس با مرورگر شما تایپ شده است . یک مرورگر URL شامل قسمتهای زیر است :
1- معین کننده هویت
2- معین کننده هویت و آدرس
3- مسیر کامل فایل منحصر به فرد
URL چیزی است که شما برای ساختن یک اتصال از یک صفحه وبی که خودتان ایجاد کرده اید برای اتصال به اطلاعات دیگر قابل دسترسی بر روی اینترنت به آن احتیاج پیدا خواهید کرد .

ساختار URL چگونه بنا می شود ؟

- چگونگی ایجاد یک URL
ساختار یک سند URL بصورت زیر است : Type:\\inter.net.address/directory/…/filename کلمه Type (نوع ) اشاره بر نوع Internet server دارد که شروع کننده یک URL است .
http برای web server است که مخفف است که مخفف hyper text transfer prorocol می باشد .سایت اینترنتی گوفر اطلاعات شاخه ها و منوهای منتقل شده می باشد.

FTP

مخفف کلمات File Transfer protocol که به FTP ناشناس شهرت دارد و آرشیوی از فایلهاست .

Telnet

ایجاد یک جلسه Telnet برای دسترسی به کامپیوتر را دور وقتی مرورگر وب خود را انتخاب می کنید برای Telnet آماده خواهد شد و یک برنامه خارجی را به یک سایت مشخص اتصال پیدا می کند.

WAIS

مخفف کلمات Area Indexed server سروری برای جستجو موضوعات و اسناد جهت دار با استفاده از لغات کلیدی .

File

فایلها بر روی کامپیوتر شما (فلاپی ، هارد دیسک ، ... ) این نوع آدرس دهی همیشه با :// دنبال می شود و آدرس اینترنت یک کامپیوتر راه دور مانند آدرس فوق
Host.Domain.Domain.Domain

برای مثال:

Machine department.college.edu
123.45.6.78
office.company.com
agency.branch.gov
machine . organization.country
توجه داشته باشید که یک URL می تواند شما را به هر سایت ، شاخه ، زیر شاخه ، فایل متنی ، تصویر و فیلم یا صدا و یا هر سایتی که آرایش شده برای ترسیم عمومی متصل کند. بهترین روش برای پیدا کردن URL های مختلف حرکت دادن ماوس و لینک کردن آن بر روی ابر متن های در صفحه می باشد . اگر به قسمت بالای مرورگر خود دقت کنید URL می توانید در آن قسمت به نمایش در آید . همچنین شما به وسیله URL می توانید به سایتهای بزرگ نظیر Yahoo و ... دسترسی پیدا کنید.

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

1- هدف ایجاد URL برای www چیست ؟
2- در کجای صفحه وب می توان URL ها را پیدا کرد ؟
3- ساختار اصلی یک URL چیست ؟
4- وقتی به وسیله یک ابرمتن اتصال به جایی پیدا می کنید URL را چگونه می بینید ؟

تمرین

بر روی ابر متن های یک سایت کلیک کنید و عوض شدن URL ها در قسمت بالای صفحه را بررسی کنید .

[Search]

اهداف این درس

1- ایجاد یک اتصال به یک سایت دیگر اینترنت
2- ایجاد یک URL در سند HTML برای استفاده و اتصال از طریق سایت شما

شروع درس

HTML برای اتصال به اینترنت
اتصال به یک سایت اینترنتی ترکیبی است از دو مبحث اتصال به یک فایل محلی درس (8a ) و هر آنچه که در درس (8a ) در مورد URL آموختیم قالب HTML کلی این اتصال بصورت زیر است :

URL آدرس سایتی است که شما می خواهید از آن دیدن کنید .link
یک رشته لینک فعال که بصورت ابرمتن در مرورگر وب نشان داده می شود ، معمولا اما نه همیشه با خط آبی که در زیر آن کشیده شده مشخص می شود. وقتی یک بیننده بر روی ابر متن کلیک می کند مرورگر وب به یک سایت دیگر بوسیله یک URL اتصال پیدا می کند . توجه داشته باشید که URL می تواند شما را به www و FTP و Gopher ، متن و عکس و ... متصل کند . می خواهیم یک ابرمتن در سایت ایجاد کنیم برای دسترسی به سایتهایی که در مورد آموزش از راه دور می باشد .
1- فایل Index.html را باز کنید.
2- متن زیر را اضافه کنید :

برای دیدن سایتهای آموزش از راه دور
3- ذخیره سند خود

تذکر :

برای اینکه در سایت خود اتصالی داشته باشید که شما را به یک عکس در یک سایت اینترنتی دیگر متصل کند باید آدرس کامل آن عکس را در URL خود ذکر کنید.

روش آسان برای وارد کردن یک URL در یک تگ

از آنجایی که ماهیت یک صفحه وب و آدرس آن در قسمت آدرس بار ظاهر می شود و شما می توانید روی آدرس بار بر روی آدرس کلیک کرده و آن را انتخاب کنید و گزینه Copy را انتخاب کنید سپس مراحل زیر را انجام دهید .
1- فایل index.html را باز کنید .
2- متن زیر را وارد کنید .

3- به آدرس www.webtraning.com متصل شوید.
4- در این صفحه وب از آدرس بار URL را انتخاب کنید .
5- از منوی Edit گزینه Copy را انتخاب کنید .
6- حال به سند index.html خود باز گردید.
7- ماوس را مابین index.html در جایی که می خواهیم URL را وارد کنیم قرار می دهیم و سپس Paste کنید .

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

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

تمرین

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

[Search]

تگ < name >


اهداف این درس

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

شروع درس

Anchor name یک نشانه مخفی ، برای اشاره به یک بخش خاصی از یک سند HTML و نیز می تواند برای اتصال به قسمتی از یک صفحه دیگر کاربرد داشته باشد . برای مثال می توانیم در یک صفحه ( در اینجا ) یک اتصال درست کنیم که با کلیلک بر روی آن به قسمت آخر صفحه پرش پیدا کنید .
قالب HTML آن عبارتست از
< a name="name" >Text to link to < /a >

نوشتن و ایجاد یک لینک (Name Anchor)

هنگامی که می خواهید یک ( Name Anchor ) ایجاد کنید مراحل زیر را دنبال کنید .

کاراکتر "#" به مرورگر شما می فهماند که باید در داخل سند به دنبال Anchor name باشد . اضافه کردن یک name anchor به index.html که در قبل ساختید.
1- سند index.html را باز کنید .
2- در بالای این متن را اضافه کنید .

3- در یک روش یکسان مانند بالا موارد زیر را نیز انتخاب کنید .

4- اگر صفحه را مجددا بارگذاری کنید از تغییراتی که انجام دادید چیزی دیده نمی شود و از چشم کاربر مخفی است .
اضافه کردن اتصالات (Name Anchor) به همان سند
1- باز کردن فایل Index.html
2- موارد زیر را اضافه کنید .
3- سند خود را ذخیره کنید و آن را مجددا بارگذاری کنید .
در پایان ما می خواهیم که هر کدام از موارد لیست بالا بصورت ابرمتنی باشند که ما را به قسمتی از همین صفحه هدایت کنند .
1- صفحه index.html را در ویرایشگر متنی باز کنید .
2- اولین مورد را بصورت فوق تغییر دهید .

3- نتایج خود را ذخیره و صفحه را مجددا بارگذاری نمایید.

اضافه کردن یک اتصال Anchor name به یک سند دیگر

شما میتوانید یک اتصال ایجاد کنید که به وسیله آن به قسمتی از یک سند دیگر هدایت شوید که دستور آن بصورت زیر است :

اگر چنین سندی در صفحه دیگری وجود داشته باشد
برای ایجاد چنین لینکی مراحل زیر را دنبال کنید :
1- سند Lesson1.html را که در قبل ایجاد کردید باز کنید .
2- در بین تگ و متن زیر را وارد کنید :

3- اسناد خود را ذخیره کرده و صفحه را مجددا بارگذاری کنید .
وقتی که بر روی ابر متن Return to training the web کلیک می کنیم و در صفحه Index.html در قسمت آموزش آن می شوید .

آزمایش







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

1- چگونه یک تگ Anchor name را می شناسید؟
2- مراحل ایجاد یک لینک به قسمت دیگر از یک صفحه چیست؟
3- چگونه این لینک را برای اتصال به قسمت صفحه دیگر آرایش می کنید؟
4- تفاوت بین تگ های زیر چیست ؟


تمرین

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

[Search]

اهداف این درس

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

شروع درس


دکمه های اتصال

از درس قبل آموختید که چگونه یک ابر متن در سند خود ایجاد کنید که بیننده را به اطلاعات وابسته اتصال دهد. همچنین در درس (a 7) آموختید که چگونه یک عکس خطی را بصورت لینک در آورید . اگر بیاد بیاورید در درسهای قبل که یک رشته متن در Index.html -Lesson1.html را به صفحه دوم Lesson2.html اتصال دادیم که توضیح داده شد( در مورد آموزش از راه دور) حال در این صفحه می خواهیم بدانیم که چگونه یک دکمه اضافه کنیم که با اتصال بر روی آن ما را به صفحه اول بر گرداند.
به دستور زیر توجه کنید :
< a href="filex.html" >< img src="qraphic.gif" >go to document< /a >
دو صفحه وب شما رشته متن Go to Document و تصویر هر دو بصورت ابراتصال عمل می کنند و با کلیک بر روی آن به مرورگر می فهمانید که باید به صفحه filex.html باز گردد . معمولا متنها و عکسهایی که با حالت ابر اتصال باشند در صفحه متمایز هستند. امروزه خیلی از مرورگرها می توانند رنگ ابر متن را تغییر دهند . معمولا شما می توانید شناسایی کنید یک نامه ابرمتن در صفحه وب را به وسیله کشیدن ماوس روی آن تغییر رنگ می دهد و نیز هنگامی که یکبار بر روی متن کلیک کنید در بازگشت رنگ ابرمتن های بازدید شده تغییر کرده است از نقطه نظر یک طراح وب پیشنهاد می کنیم که وقتی می خواهید از تصویر به عنوان یک اتصال استفاده کنید . همچنین در تگ < Img> از صفات دیگری مثل attribute و Alt نیز استفاده می شود . کاربر با بارگذاری عکس را متوقف می کند حال می خواهیم یک اتصال گرافیکی ایجاد کنیم . در ابتدا باید در جایی از کامپیوتر خود عکس را ذخیره کنید .
1- صفحه Lesson1.html را باز کنید.
2- در بالای صفحه تغییرات زیر را ایجاد کنید :

3- نتایج خود را ذخیره و صفحه را مجددا بار گذاری کنید .
حال دوباره به سند Lesson1.html باز گردید.
1- صفحه Lesson1.html را باز کنید .
2- تغییرات زیر را در صفحه انجام دهید :

تذکر :

در تگ < Img src > از صفات height و width برای کوچک کردن تصویر استفاده کنید بطوریکه با کلیک روی آن عکس بزرگ به نمایش در آید .


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

1- چگونه یک دکمه گرافیکی در صفحه ایجاد می کنید ؟

تمرین

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

[Search]

اهداف این درس

- به ردیف در آوردن متن
- کنترل بر جاهای دقیق متن و کاراکترها

شروع درس

در درس قبل آموختیم که مرورگر کلیه فضاهای خالی که در صفحه قرار دادیم چشم پوشی می کند ، به هر جهت بعضی از مواردنحوه آرایش کلمات در حمایت از طرح و ترکیب کلی صفحه مهم است . تگ Performat صفحه شما را دقیقا مانند آنچه که در ویرایشگر متنی تایپ نمودید نشان می دهد.
M n o s p a c e d
در ادامه بحث مطالب زیر را دنبال می کنیم :
1- فایل HTML با نام Index.html را در ویرایشگر خود باز کنید و موارد زیر را اضافه کنید .


نام دورهاي اموزشينام دوره اموزشينام مدرسinternet---html---- نتایج خود را ذخیره کنید و صفحه را مجددا بارگذاری کنید .

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

1- در هنگام ترجمه مرورگر تگ Preformat چگونه عمل می کند؟
2- در چه مواقعی از این تگ استفاده می شود؟