بخش پنجم:طرز ساختن لیست ها و لینک ها

هزار تا پوزش بابت تاخیر......برخی اوقات مشغله های آدمی تن را رها نمیسازد.

ادامه گفتار:

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

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

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

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

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



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

 

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



• 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.





طرز ساختن لینک ها

لینک چیست؟
 لینکها یا همان نقاط پیوند صفحات هم،  یک نوع متن به حساب می آیند، فقط تنها فرقی که بین آنها وجود دارد در این است که هنگامیکه با موس بر روی آنها میرویم نشانگر موس شکل دست به خود گرفته تا ما بر روی آن کلیک کنیم، البته در بیشتر مواقع رنگ آن هم با متن های معمولی فرق دارد. پس از کلیک کردن روی لینکها، ما  به صفحات دیگر یا حتی به سایتی دیگر هدایت میشویم. تگ مخصوص لینک میباشد که با خصوصیت href آدرس دهی میشود که آن لینک به کجا وصل خواهد شد. به طور مثال اگر ما بخواهیم یک لینک درست کنیم که به سایت yahoo  متصل   شود بدین صورت عمل میکنیم،
Yahoo'>www.yahoo.com">Yahoo website
 که در مرورگر لینک زیر ظاهر میشود و ما را به سمت سایت یاهو حرکت میدهد دقت کنید فقط متنی که مابین دو تگ آغاز کننده یعنی و تگ پایان دهنده   نوشته شود در مرورگر به شکل لینک ظاهر میشود و قابل کلیک است
Yahoo website
همانطور که مشاهده میکنید به صورت پیش فرض رنگ لینکها آبی بوده و زیر آنها خط کشیده میشود که در بخش Style Sheet شما یاد خواهید گرفت تا این خط را برداشته یا رنگ آن را تغییر دهید. لینکها را می توان به دو دسته داخلی و خارجی تقسیم کرد، همانطور که از اسمشان پیداست لینکهای داخلی نقاط پیوند داخل یک صفحه یا صفحات مختلف یک وب سایت میباشند و لینکهای خارجی  نقاط پیوند بین دو سایت مختلف میباشند.
Absolute and Relative
لینکهای داخلی به دو صورت نوشته میشوند، یا باید آدرس کامل وب سایت و فایل را نوشت مانند:
http://www.mysite.com/page01.htm"> Page01
 به این مدل لینک absolute  میگویند.
و یا اینکه فقط اسم فایل را بنویسیم البته اگر آن فایل داخل یک دایرکتوری است باید ابتدا اسم آن دایرکتوری را نوشته سپس نام فایل را مینویسیم. به فرض  مثال اگر لینک ما قرار است به یک صفحه به اسم   Page01.htm  در دایرکتوری بنام htmlpages  متصل شود مجموعه کدی که باید نوشته شود بدین صورت است:
Page01
به این مدل relative  می گویند.
دقت کنید دوستان وقتی صفحه ای که قرار است به این لینک ما پیوند داده شود دردایرکتوری پایین تر از این صفحه قرار دارد اینگونه عمل میشود اما اگر لینک ما  در صفحه ای قرار دارد که قرار است به یک صفحه در دایرکتوری بالاتر از آن متصل شود می توانیم به جای اسم دایرکتوری بالاتر از دو نقطه کنار هم( .. ) استفاده کنیم،
page02
به طور ساده می توان گفت که اگر این صفحه قرار است به صفحه ای داخل دو فولدر تو در تو متصل شود باید اسم فولدر اول بعد اسم فولدر داخل فولدر اول سپس اسم آن فایل یا صفحه را مینویسیم  ولی اگر در آن صفحه بخواهیم یک لینک بگذاریم که به این صفحه پیوند داده شود جای فولدر داخلی و فولدر اول میتوانیم دو نقطه بگذاریم و سپس اسم این فایل را بنویسیم یعنی بدین شکل:
this page
target
تگ لینک خصوصیتی دارد که توسط آن می توانید محل باز شدن و یا نمایش صفحه ای که می خواهید به آن پیوند دهید را کنترل کند که آن صفحه در همان پنجره  یا در یک پنجره جدید باز شود. این خصوصیت target نام دارد که باید برابر با یکی از مقادیر _blank , _self , _top , _parent  قرار گیرد.
target="_blank"
این مقدار یک پنجره جدید در مرورگر باز کرده و صفحه مربوط به آن لینک را نمایش میدهد.
_self
اطلاعات صفحه مربوط به آن لینک در همان فریم که لینک قرار دارد نمایش داده میشود.
_parent
صفحه مورد نظر در همان پنجره مرورگر باز خواهد شد ، نه در پنجره جدید.
_top
صفحه مربوط به این لینک هیچگاه در پنجره ای که فریم دارد باز نخواهد شد.
Anchor
 یک نوع لینک هم هست که دو نقطه را در داخل یک صفحه بهم متصل میکند که به آن anchor  می گویند. کاربردهای گوناگونی دارد ولی بیشترین کاربرد این نوع لینک برای مواقعی است که  طول یک صفحه از سایت زیاد شده و در انتهای همان صفحه شما یک لینک می گذارید تا با کلیک کردن بر روی آن بیننده سایت شما به بالای همان صفحه هدایت شود. برای اینکار دو سری تگ لازم است که باید بنویسید، یکی جایی است که میخواهید لینک به آن متصل شود که باید آن نقطه از صفحه را نامگذاری کنید و این اسم باید داخل همان صفحه تک باشد یعنی در جای دیگر بکار نبرده باشید و تگ آن به این صورت است:

در بین دو علامت " " و به جای کلمه top  هر اسمی میتوانید بکار برید این نکته را در ذهن داشته باشید که این تگ درمرورگر ظاهر نمیشود.اما تگ دیگری که نیاز است خود کد لینک است وبجای نوشتن آدرس فایل در خصوصیت href  شما نامی را که انتخاب کردید به اضافه علامت # را مینویسید:
top of the page
در مورد لینکهای خارجی یعنی لینکهایی که به سایتهای دیگر وصل میشوند باید از مدل absolute  استفاده کنید و آدرس کامل را بنویسید:
http://www.sitename.com/page01.html"> link to another site
نکته:  نوشتن پروتکل http://  اجباری نیست و میتوانید از نوشتن آن صرف نظر کنید.
mailto
 علاوه بر این لینکها شما میتوانید برای آدرسهای ایمیل هم لینک درست کنید که تگ آن به صورت زیر میباشد:
mailto:email_address"> my email
کلمه mailto:  به مرورگر میفهماند که باید یک ایمیل به آدرس بعد از آن فرستاده شود. البته این لینکها برای بیننده هایی که ایمیل هایشان را با برنامه هایی مانند Outlook express  چک میکنند ، مفید است چون وقتی که روی این نوع لینک کلیک شود برنامه پیش فرض مدیریت ایمیل در سیستم عامل کاربر باز میشود پس برای بیننده هایی که آدرس ایمیل یاهو دارند این کد مفید نیست بهتر است که آدرس کامل ایمیل را نوشته و به صورت یک لینک درست کنید تا برای کلیه بینندگان سایت مفید باشد، مانند مثال زیر:
mailto:[e-mail]"> [e-mail]
البته شما میتوانید حتی موضوع و متن ایمیل را تعیین کنید. اگر قصد همچین کاری را دارید پس باید بلافاصله بعد ازآدرس ایمیل داخل تگ یک علامت سوال اضافه کنید تا مرورگر بفهمد که این آدرس ادامه دارد و بعد از علامت سوال کلمه subject=  را مینویسید که این کلمه نشانگر موضوع ایمیل است و هرچیزی که جلوی آن نوشته شود به عنوان موضوع ایمیل در برنامه مشخصه نمایان خواهد شد و اگر متن ایمیل هم بخواهید نوشته شود باید بعد از موضوعی که نوشتید علامت &  را بگذارید وسپس کلمه  body= را که نشانگر متن ایمیل است و در جلوی علامت مساوی هر متنی را میتوانید وارد کنید. بر فرض مثال میخواهید که ایمیل با موضوع Test و متن Hello my friends  به آدرس ایمیل فرستاده شود:
mailto:[e-mail]?subject=Test&body=Hello my friends"> [e-mail]
 توجه داشته باشید که اگر میخواهید این کد را امتحان کنید اول باید برنامه پیش فرض مدیریت ایمیل مانند نرم افزار Outlook  را برای آدرس ایمیل خود تنظیم کنید.