لينک چيست؟Yahoo website

 لينکها يا همان نقاط پيوند صفحات هم،  يک نوع متن به حساب مي آيند، فقط تنها فرقي که بين آنها وجود دارد در اين است که هنگاميکه با موس بر روي آنها ميرويم نشانگر موس شکل دست به خود گرفته تا ما بر روي آن کليک کنيم، البته در بيشتر مواقع رنگ آن هم با متن هاي معمولي فرق دارد. پس از کليک کردن روي لينکها، ما  به صفحات ديگر يا حتي به سايتي ديگر هدايت ميشويم. تگ مخصوص لينک > ميباشد که با خصوصيت href آدرس دهي ميشود که آن لينک به کجا وصل خواهد شد. به طور مثال اگر ما بخواهيم يک لينک درست کنيم که به سايت yahoo  متصل   شود بدين صورت عمل ميکنيم،

Yahoo website

 که در مرورگر لينک زير ظاهر ميشود و ما را به سمت سايت ياهو حرکت ميدهد دقت کنيد فقط متني که مابين دو تگ آغاز کننده يعني و تگ پايان دهنده  نوشته شود در مرورگر به شکل لينک ظاهر ميشود و قابل کليک است

همانطور که مشاهده ميکنيد به صورت پيش فرض رنگ لينکها آبي بوده و زير آنها خط کشيده ميشود که در بخش Style Sheet شما ياد خواهيد گرفت تا اين خط را برداشته يا رنگ آن را تغيير دهيد. لينکها را مي توان به دو دسته داخلي و خارجي تقسيم کرد، همانطور که از اسمشان پيداست لينکهاي داخلي نقاط پيوند داخل يک صفحه يا صفحات مختلف يک وب سايت ميباشند و لينکهاي خارجي  نقاط پيوند بين دو سايت مختلف ميباشند.

Absolute and Relativetarget فريم که لينک قرار دارد نمايش داده ميشود.

لينکهاي داخلي به دو صورت نوشته ميشوند، يا بايد آدرس کامل وب سايت و فايل را نوشت مانند:

Page01

 به اين مدل لينک absolute  ميگويند.

و يا اينکه فقط اسم فايل را بنويسيم البته اگر آن فايل داخل يک دايرکتوري است بايد ابتدا اسم آن دايرکتوري را نوشته سپس نام فايل را مينويسيم. به فرض  مثال اگر لينک ما قرار است به يک صفحه به اسم   Page01.htm  در دايرکتوري بنام htmlpages  متصل شود مجموعه کدي که بايد نوشته شود بدين صورت است:

Page01

به اين مدل relative  مي گويند.

دقت کنيد دوستان وقتي صفحه اي که قرار است به اين لينک ما پيوند داده شود دردايرکتوري پايين تر از اين صفحه قرار دارد اينگونه عمل ميشود اما اگر لينک ما  در صفحه اي قرار دارد که قرار است به يک صفحه در دايرکتوري بالاتر از آن متصل شود مي توانيم به جاي اسم دايرکتوري بالاتر از دو نقطه کنار هم( .. ) استفاده کنيم،

page02

به طور ساده مي توان گفت که اگر اين صفحه قرار است به صفحه اي داخل دو فولدر تو در تو متصل شود بايد اسم فولدر اول بعد اسم فولدر داخل فولدر اول سپس اسم آن فايل يا صفحه را مينويسيم  ولي اگر در آن صفحه بخواهيم يک لينک بگذاريم که به اين صفحه پيوند داده شود جاي فولدر داخلي و فولدر اول ميتوانيم دو نقطه بگذاريم و سپس اسم اين فايل را بنويسيم يعني بدين شکل:

this page

تگ لينک خصوصيتي دارد که توسط آن مي توانيد محل باز شدن و يا نمايش صفحه اي که مي خواهيد به آن پيوند دهيد را کنترل کند که آن صفحه در همان پنجره  يا در يک پنجره جديد باز شود. اين خصوصيت target نام دارد که بايد برابر با يکي از مقادير _blank , _self , _top , _parent  قرار گيرد.

Anchor mailto

 يک نوع لينک هم هست که دو نقطه را در داخل يک صفحه بهم متصل ميکند که به آن anchor  مي گويند. کاربردهاي گوناگوني دارد ولي بيشترين کاربرد اين نوع لينک براي مواقعي است که  طول يک صفحه از سايت زياد شده و در انتهاي همان صفحه شما يک لينک مي گذاريد تا با کليک کردن بر روي آن بيننده سايت شما به بالاي همان صفحه هدايت شود. براي اينکار دو سري تگ لازم است که بايد بنويسيد، يکي جايي است که ميخواهيد لينک به آن متصل شود که بايد آن نقطه از صفحه را نامگذاري کنيد و اين اسم بايد داخل همان صفحه تک باشد يعني در جاي ديگر بکار نبرده باشيد و تگ آن به اين صورت است:

">

top of the page

در مورد لينکهاي خارجي يعني لينکهايي که به سايتهاي ديگر وصل ميشوند بايد از مدل absolute  استفاده کنيد و آدرس کامل را بنويسيد:

link to another site

نکته:  نوشتن پروتکل http://  اجباري نيست و ميتوانيد از نوشتن آن صرف نظر کنيد.

 علاوه بر اين لينکها شما ميتوانيد براي آدرسهاي ايميل هم لينک درست کنيد که تگ آن به صورت زير ميباشد:

my email

کلمه mailto:  به مرورگر ميفهماند که بايد يک ايميل به آدرس بعد از آن فرستاده شود. البته اين لينکها براي بيننده هايي که ايميل هايشان را با برنامه هايي مانند Outlook express  چک ميکنند ، مفيد است چون وقتي که روي اين نوع لينک کليک شود برنامه پيش فرض مديريت ايميل در سيستم عامل کاربر باز ميشود پس براي بيننده هايي که آدرس ايميل ياهو دارند اين کد مفيد نيست بهتر است که آدرس کامل ايميل را نوشته و به صورت يک لينک درست کنيد تا براي کليه بينندگان سايت مفيد باشد، مانند مثال زير:

my_email@domain.com

البته شما ميتوانيد حتي موضوع و متن ايميل را تعيين کنيد. اگر قصد همچين کاري را داريد پس بايد بلافاصله بعد ازآدرس ايميل داخل تگ يک علامت سوال اضافه کنيد تا مرورگر بفهمد که اين آدرس ادامه دارد و بعد از علامت سوال کلمه subject=  را مينويسيد که اين کلمه نشانگر موضوع ايميل است و هرچيزي که جلوي آن نوشته شود به عنوان موضوع ايميل در برنامه مشخصه نمايان خواهد شد و اگر متن ايميل هم بخواهيد نوشته شود بايد بعد از موضوعي که نوشتيد علامت &  را بگذاريد وسپس کلمه  body= را که نشانگر متن ايميل است و در جلوي علامت مساوي هر متني را ميتوانيد وارد کنيد. بر فرض مثال ميخواهيد که ايميل با موضوع Test و متن Hello my friends  به آدرس ايميل فرستاده شود:

my_email@domain.com

 توجه داشته باشيد که اگر ميخواهيد اين کد را امتحان کنيد اول بايد برنامه پيش فرض مديريت ايميل مانند نرم افزار Outlook  را براي آدرس ايميل خود تنظيم کنيد.

ليستها هم جزو عنصر متن در html  ميباشند که بخاطر زياد بودن تگهاي متن مجبورم آنها را از هم جدا کنم. سه نوع ليست وجود دارد، يکي ليستهاي  با ترکيب منظم (Ordered list) و ليست با ترکيب نا منظم  (Unordered list) وديگري ليستهاي توصيفي (Definition list) . شايد اين نوع نامگذاري بخاطر وجود اعداد يا حروف بترتيب در ليست منظم است که در ديگري فقط  نقطه هاي توپر هست که ترتيبي را نميتوان براي آنها در نظر گرفت. در هر صورت تگهاي آن به شرح زير ميباشند:

براي درست کردن ليست در يک صفحه از اين تگها بايد استفاده کنيم، بدين صورت که در آغاز قسمتي که ميخواهيم ليست درست کنيم تگ

را که مخفف ordered list ميباشد را مينويسيم تا مرورگر بفهمد ليست از آنجا شروع ميشود و سپس در ابتداي هر گزينه از ليستمان تگ
1. را اضافه ميکنيم و در انتهاي گزينه ها تگ پايان دهنده

اگر دقت کنيد به صورت پيش فرض اعداد 1,2,3 به ابتداي گزينه هاي ليست مان اضافه ميشود. شما ميتوانيد خصوصيت type را به تگ

اضافه کنيد و آنرا با A, a  که به صورت حروف کوچک يا بزرگ انگليسي و يا با I, i   که با اعداد رومي است مقدار دهي کنيد. به طور مثال اگر ميخواهيد ترتيب ليست شما با اعداد رومي کوچک باشد بدين صورت تگ را کامل ميکنيد:
i">

1. Item 01
   
2. Item 02
   
3. Item 03
   

مثال

 

مثال

اين تگ را unordered list مينامند و مانند تگهاي بالا براي درست کردن ليست در يک صفحه ميباشد با اين تفاوت که بجاي حروف و اعداد از دايره يا مربع هاي توپر استفاده ميکند که مانند بالا ميتوانيد از خصوصيت  type که با کلمات” disc”, “circle”, “square”  مقدار دهي ميشود استفاده کنيد.

disc">

• Item 01
  
• Item 02
  
• Item 03
  

 

 شما ميتوانيد براي درست کردن يک ليست که داراي چند گزينه است و هر گزينه هم چند زير مجموعه دارد از مخلوط اين دو نوع ليست استفاده کنيد که به اين حالت Nested list  گفته ميشود.

بر فرض مثال ما يک ليست داريم که چهار گزينه دارد و هر کدام از آنها دو رنگ سفيد و سياه دارند:



1. Item 01
   • Black
   • White
   
   
2. Item 02
   • Black
   • White
   
   
3. Item 03
   • Black
   • White
   
   
4. Item 04
   • Black
   • White
   
   

مثال

مثال

آخرين مدل، ليستهاي توصيفي هستند که براي تعريف و توصيف يک کلمه بکار ميروند که کلمه مشخص را با تگ

و توصيف آنرا با
بکار ميبرند.
 


Html

HyperText Markup Language.

 


:: موضوعات مرتبط: ليست ها , ,
:: برچسب‌ها: طرز ساختن ليست هاhtml , آموزش کدنویسی Html , آموزش اچ تی ام ال ,
:: بازدید از این مطلب : 708
|
امتیاز مطلب : 120
|
تعداد امتیازدهندگان : 32
|
مجموع امتیاز : 32

همانطور که دربخشهاي قبل گفته شد، هرمتني را بين تگهاي وارد کنيد بعد از ذخيره آن فايل با پسوند.html يا.htm  و هنگام نمايش فايل در مرورگر آنرا مشاهده خواهيد کرد که متن مورد نظر با تنظيمات مرورگر نمايان خواهد شد. ولي ما با استفاده از تگهاي اين عنصر کنترل نمايش نوشته ها را بدست خود ميگيريم تا همان چيزي که مورد نظر ما است نشان داده شوند. تگهاي متن را ميتوان  به دو دسته تقسيم کرد، تگهاي اوليه که بيشتر وظيفه خط بندي، پاراگراف بندي و يا تنظيمات در ارتباط با متن را به عهده دارند و تگهايي که شکل و آرايش حروف را کنترل ميکنند که به آنها formatting مي گويند. بهتر است که Notepad  يا هر برنامه ويرايشگر متن را که داريد باز کنيد و هر کدام از اين تگها را امتحان کنيد تا کاربرد آنها در ذهن شما جاي گيرد.

 
براي خط بندي از اين تگ استفاده ميشود و متن بعد از آن به يک خط پايين تر منتقل ميشود که نيازي به تگ پايان دهنده هم ندارد.
مثال

...

<hr>
 اين تگ روي خود متن کاري صورت نميدهد و فقط با ترسيم يک خط افقي آنها را از هم جدا ميکند که داراي خصوصيات زير ميباشد.رنگ خط که ميتوانيد اسم رنگ يا کد هگز رنگ را بنويسيد.

 width=" "طول خط را کنترل ميکند که هم با عدد در مقياس پيکسل و هم با درصد ميتوان مقدار دهي کرد.

align=" " که محل قرار گيري خط در يک سطر را کنترل ميکند.

 color=" "

size=" " اين خصوصيت ضخامت خط را تعيين ميکند که هرچه عدد بزرگتر باشد ، ضخامت بيشتر است. بصورت پيش فرض خط داراي سايه ميباشد و اگر خصوصيت noshade را به تگ اضافه کنيد ديگر سايه را نشان نميدهد.مثال

 
اين تگ هم مانند تگ بالا ميباشد با اين تفاوت که مخصوص يک کلمه يا حتي يک حرف ميباشد چون مانند div  متن را از بقيه جدا نميکند و داراي خصوصيت style=" " ميباشد که بر فرض هنگام قرار گرفتن موس روي يک کلمه زمينه آن رنگي شود. مثال

<marquee>>
متن بين اين دو تگ متحرک خواهد شد و داراي خصوصيات زير ميباشد، البته اين تگ ممکن است در همه مرورگرها عمل نکند ولي در مرورگر اينترنت اکسپلورر (IE) مشکلي براي نمايش ندارد. خصوصيات اين تگ عبارتند از : رنگ زمينه آن تگ را مشخص ميکند که يا نام رنگ يا کد هگز آنرا مينويسيد.

 align=" "محل قرار گرفتن متن را تعيين ميکند که با کلمات top, middle, bottom  مقدار دهي ميشود.

 behavior=" "اين خصوصيت نحوه حرکت متن را کنترل ميکند که آنرا برابر با scroll  اگر قرار دهيم، متن بصورت متناوب از يکطرف صفحه وارد و از طرف ديگر خارج ميشود و اگر برابر با alternate  قرار دهيم ، متن از صفحه خارج نميشود و در عرض مرورگر حرکت ميکند، همچنين اگر برابر با slide  باشد ، متن از يکطرف وارد صفحه شده و در طرف ديگرميايستد.

bgcolor=" "

  direction=" "جهت ورود متن به صفحه را کنترل ميکند و با کلمات left, right, top, down  که از چپ ، راست، بالا و پايين ميتواند وارد شود.

  height=" "ارتفاع کادر marquee را به عدد در مقياس پيکسل يا به درصد تعيين ميکند.

hspace=" "   حاشيه چپ و راست را کم وزياد ميکند.

 loop=" "تعداد چرخش متن را کنترل ميکند.

 scrolldelay=" " سرعت حرکت متن را تعيين ميکند.

vspace=" "   حاشيه بالا و پايين متن را مشخص ميکند.

width=" "   عرض کادر را کنترل ميکند.

مثال

 <-- !.....-->  
از اين تگ براي افزودن نظريه يا هر نوشته ديگري که نميخواهيد در مرورگر نمايش داده شود و يا عملي را انجام دهد استفاده ميکنيد که بجاي نقطه چين هر متني را ميتوانيد وارد کنيد .
اين تگ فقط مخصوص مشخص کردن متن ازطرف چپ يا راست که داراي خصوصيت dir=” “ ميباشد و با ltr يعني از چپ به راست و rtl يعني از راست به چپ مقدار دهي ميشود.

قسمت مقدماتي آموزش جاوااسکريپت به پايان رسيد و همانطور که مشاهده کرديد دستورات اين زبان، توضيح داده شد تا با استفاده از آنها بتوانيد اسکريپتهايي براي صفحات وب خود بنويسيد و يا اگر با اسکريپتي برخورد کرديد، کاملاً آنرا درک کنيد و مطابق نياز خود آن را اصلاح کنيد. فراموش نکنيد که اين دستورات و کدها را مرتب تمرين کرده و اسکريپتهاي جديد و ساده براي خود بسازيد تا اين زبان در ذهن شما قرار گيرد. بهترين راه به خاطر سپردن دستورات جاوااسکريپت خلق کدهايي براي خودتان و ديگران است.

هرگاه خواستيد که اسکريپتي خلق کنيد، ابتدا آنرا در ذهن خود بررسي کنيد که اين اسکريپت چه کاري بايد انجام دهد و چه نتيجه اي را مي خواهيد از آن بگيريد، سپس افکارتان را روي کاغذ پياده کنيد با جزئيات کامل که چه اطلاعاتي را بايد دريافت کنيد و توسط چه دستوراتي آنرا پيش ببريد و در آخر چه نتيجه اي بايد بدهد.

هنگام خلق يک اسکريپت نکاتي را بايد در نظر داشته باشيد:

سعي کنيد بعد از هر خط علامت ; را بگذاريد تا پايان آن خط مشخص شود.

document.write ( " text string " );
document.write ( myFunction ) ;

جاوااسکريپت case sensetive است يعني به حروف کوچک و بزرگ حساس است و بين آنها فرق مي گذارد. در جاوااسکريپت myFunction با myfunction تفاوت دارد.

دقت کنيد کليه علامتها مانند پرانتز، آکلاد و کروشه در هر جا که مي نويسيد بايد دوباره آنها را ببنديد.

( { [ ..... ] } )

جاوااسکريپت فاصله هاي اضافي را در نظر نمي گيرد، پس شما مي توانيد براي خوانا بودن کد خود فاصله هايي را اضافه کنيد. دو خط زير تفاوتي با هم ندارند:

var name="value";
var name = " value " ;

در نظر داشته باشيد که يک خط کد جاوااسکريپت حتماً بايد در يک خط نوشته شود و نمي توانيد ادامه آنرا در خط بعدي بنويسيد، مگر اينکه به انتهاي صفحه برسيد و خود به خود به ابتداي خط بعد هدايت شويد. اما در ميان رشته هاي متني با گذاشتن علامت \ مي توانيد به خط بعد رفته و ادامه دهيد.

document.write ( " Hello \
my friends! " ) ;

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

document.write( " text " ) ;   //  your comment

اگر هم نظريه يا توضيح شما بيشتر از چند کلمه است مي توانيد به صورت زير عمل کنيد:

/* This is a comment
block. It contains
several lines */

لازم بذکر است که اين توضيحات و نظريات در صفحه نمايش داده نمي شوند.

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