اموزش مقدمانی html

بخش سوم

( HTML Links )

در این درس با پیوندها ( Links ) ، تگ های مربوطه مخصوصا تگ Anchor یا A و نحوه به کار گیری آنها آشنا خواهید شد. همچنین شناسه های بسیار مهم href ،target و name تشریح خواهند شد.

در محیط وب، صفحات اچتمل با کمک پیوندها به یکدیگر متصل (Link ) میشوند. اصطلاح ابرمتن           (Hyper Text ) در مقابل متن خطی (Linear ) قرار دارد. در یک متن معمولی خواندن به شکل خطی و از ابتدا به انتها میباشد و در مقابل در یک متن مختلط (Hyper ) با کمک پیوندها میتوان از یک متن به هر صفحه دیگر در وب متصل شد.این کار با کمک عنصری معلوم الحال! به نام A یا Anchor میسر میگردد.

تگ Anchor و شناسهhref

ادامه مطلب…

برای ایجاد پیوند به صفحات دیگر از تگ <a > استفاده میشود. پیوندها میتوانند به بخش دیگری از همان صفحه، صفحات دیگر وب، تصاویر، فایلهای صوتی یا حتی فیلم ها و … اشاره کنند.
فرم کلی یک پیوند به قرار زیر است:

در مثال بالا تگ <a > برای ایجاد پیوندی به صفحه ای دیگر که آدرس اینترنتی آن url میباشد بکار رفته است. برای تعیین مقصد و یا آدرس صفحه جدید از شناسه ای به نام href که همان hyerlink reference میباشد، استفاده میشود و مقدار این شناسه در واقع همان آدرس اینترنتی صفحه مقصد است. بخش قابل رویت پیوند و در واقع متــنــی (و یا تصویری ) که توسط مرورگر نمایش داده خواهد شد و بازدیدکننده روی آن کلیک خواهد کرد میان تگهای <a > و قرار داده میشود و هر چند که در مثال بالا این بخش متن “Some Text” است ولی میتواند حتی یک تصویر باشد.

برای نمونه کد اچتمل زیر پیوندی به سایت google.com ایجاد خواهد کرد:

و مرورگر پیوند بالا را به شکل زیر نمایش داده و در اثر کلیک روی پیوند توسط بازدیدکننده، مرورگر به سایت Google خواهد رفت.

شناسه target در پیوندها:

با کمک شناسه target امکان تعیین مقصد پیوند جدید فراهم میشود. در مثال بالا پس از کلیک روی پیوند، مرورگر سایت google.com را باز کرده و جایگزین سایت فعلی خواهد شد. اگر میخواهید که مرورگر پیوند را در صفحه ای جدید باز کند باید از شناسه target و مقدار “_blank” برای آن استفاده کنید . مثال زیر سبب باز شدن سایت google.com در پنجره جدیدی خواهد شد:

شناسه Name :

با کمک شناسه name میتوانید پیوندها را نام گذاری کنید.پیوندهای نامگذاری شده امکان حرکت میان قسمتهای مختلف یک صفحه یا page را فراهم میکنند. در اینصورت مثلا برای رفتن به آخر یک متن دیگر نیازی به Scrool down کردن تمامی صفحه نیست و کافی است که بازدیدکننده روی پیوندی که به آخر صفحه اشاره میکند کلیک کند.

استفاده از پیوندهای نامگذاری شده شامل دو مرحله است:

۱- ایجاد یک پیوند نامگذاری شده (این قسمت به عنوان لنگر کار خواهد کرد.) :

فرم کلی یک پیوند نام گذاری شده به قرار زیر است:

وظیفه شناسه name تعیین نام برای پیوند است و مقدارآن همان نام پیوند میباشد. نام پیوند هم هر نام لاتینی میتواند باشد. در فرم کلی بالا، نام پیوند label و متنی که بعنوان پیوند نمایش داده میشود عبارت “Text to be displayed” خواهد بود. مثال زیر به ایجاد یک پیوند نامگذاری شده با نام top میپردازد:

۲- ایجاد یک پیوند به پیوند نامگذاری شده دیگر:

برای دادن لینک به پیوندی نام گذاری شده، کافی است که پیوندی معمولی ایجاد کرده و در قسمت href آن ابتدا url مقصد و سپس نویسه # و در نهایت نام پیوند نامگذاری شده را درج کنید. مثال زیر ایجاد پیوندی است که به لینک نامگذاری شده ای به نام top اشاره میکند:

در اثر کلیک روی پیوند بالا مرورگر مستقیما به ابتدای بخش top صفحه index.htm خواهد رفت.

اگر مقصد پیوند در همان صفحه قرار دارد نیازی به قید url نیست و فقط نویسه # و سپس نام پیوند کافی است:

چند نکته کاربردی در مورد پیوندها:

*** یکی از کاربردهای رایج پیوندهای نام گذاری شده در صفحات و متونی میباشد که فهرست و یا لیستی از اقلام نمایش داده شده است، مانند بخش سرفصل مطالب، فهرست FAQ و یا … در همین صفحه در دو مورد از پیوندهای نامگذاری شده استفاده شده است، آیا میتوانید آنها را بیابید؟!

*** اگر مرورگر نتواند یک پیوند نامگذاری شده را بیابد ابتدای صفحه مقصد را نمایش خواهد داد.

مرجع : HTML 4.01 Specification – فهرست عناصر – فهرست شناسه ها

ط) جداول ( Tables)

در این درس با المان جدول ( Table ) ، سلولها یا خانه ها، مرز و border در جداول و تگ های مربوطه مخصوصا تگهای TABLE ، TD , TR آشنا خواهید شد. توجه داشته باشید که جداول یکی از مهمترین المانهای آرایش و layout میباشند.

جدولها

برای تعریف جداول از تگ <table> استفاده میشود. یک جدول از یک یا چند سطر که با کمک تگ <tr> تعریف میشوند، تشکیل میشود. هر ردیف یا row از یک یا چند سلول، خانه یا cell تشکیل گردیده که با کمک تگ <td> ایجاد میشوند. نام های td و tr به ترتیب خلاصه شده table row و table data میباشند.
محتوی یک سلول میتواند متن، تصویر، فهرستها، جداول دیگر، پاراگرافها و … باشد.

مثال زیر جدولی است با دو سطر و سه ستون :

جدولها و شناسه border و dir :

··· در مثال بالا شناسه border مرز جدول را مشخص میکند، مقدار ۱ مرزی با ضخامت یک پیکسل را نمایش خواهد داد و مقدار صفر جدول را بدون مرز نمایش خواهد داد. توجه داشته باشید که حالت پیش فرض یعنی جدولی بدون شناسه border ، جداول بدون مرز را نمایش خواهد داد.

··· در مثال بالا شناسه dir یا direction و مقدار rtl برای آن، سبب تعیین نمایش جهت متون از راست به چپ خواهد شد و چو ن در داخل تک table تعریف شده است به تمامی سلولهای جدول اعمال خواهذ شد.

··· ساده ترین جدول ممکن در اچتمل، جدولی است با یک سطر و یک ستون!

سرستون در جداول (Headings)

سرستونها در جداول با کمک تگ <th> تعریف میشوند. مثال زیر نحوه تعریف سرستونها را در جداول نمایش میدهد:

همانطوریکه مشاهده میکنید سر ستونها مانند سلولهای معمولی جداول تعریف میشوند و فقط به جای td از th استفاده شده و لی در نمایش محتوای سر ستونها bold یا توپر نمایش داده خواهند شد.

خانه های خالی در جداول (Empty Cells)

اگر محتوای خانه ای از یک جدول خالی باشد چه چیزی باید نمایش داده شود؟ بسته به مرورگری که استفاده میکنید نتیجه نمایش متفاوت است و مثلا در مثال زیر خانه خالی جدول بدون مرز نمایش داده خواهد شد:

در اینگونه موارد برای رفع مشکل کافی است که از non-breaking space ( ) یا همان نویسه و کاراکتر قاصله و بلانک استفاده شود و در مورد مثال ذکر شده مرورگر جدول را به شکل زیر نمایش خواهد داد:

توجه داشته باشید که اینبار مرزهای خانه خالی جدول بدرستی ترسیم گردیده اند.

چند نکته اساسی در مورد جداول:

··· در جداول، ردیفها، خانه ها و سر ستونها از تعداد زیادی از شناسه ها میتوانید استفاده کنید که شرح همگی آنها از حوصله این دوره مقدماتی خارج است و توصیه میشود که از مثالهای زیر و جدول واقع در انتهای این صفحه برای مطالعه هر چه بیشتر در مورد جزئیات شناسه ها استفاده شود.

··· شناسه dir قابل استفاده در بسیاری از تگها ( مثلا table ، tr ، td ، th ) میباشد. با کمک شناسه dir و مقدار rtl برای آن، جهت نمایش متون فارسی از “راست به چپ” تعیین میگردد. توجه داشته باشید که مقدار شناسه dir به صورت موروثی از table به tr و th و از tr و th به td خواهد رسید.مثلا برای تعیین مقدار rtl برای تمامی خانه های یک جدول کافی است که فقط شناسه مزبور را در تگ table قید کنید و نیازی به قید آن در تمامی خانه های جدول نیست. البته میتوانید که در مورد یک ردیف خاص و یا یک خانه خاص شناسه dir را موردی تعیین کنید.

تگهای جداول

منبع :article-computer.blogfa.com/