منوی برگه ها
TwitterRssFacebook
منوی دسته ها

ارسال شده توسط در تاریخ ۱۴ آبا ۱۳۹۳ در طراحی وب | ۰ دیدگاه

آموزش جامع HTML » (قسمت چهارم):

 

سلام به همه دوستانی که تا اینجا با ما همراه بودند . بدون مقدمه برویم تا به ادامه بحث بپردازیم:

 

توضیح کوتاه در مورد URL:

هر فایل و یا حتی هر المان و عنصر (مثل یک تصویر) که در صفحات وب به کار برده می شود دارای یک آدرس است که در نوار آدرس مرورگر خود میتوانید با ایجاد تغییرات در سایت ها و کلیک بر روی هر المانی این تغییر را در آدرس url نوار آدرس مشاهده کنید.

اما با مشاهده تصویر زیر خواهید فهمید که یک url از چه اجزایی تشکیل شده است:

 

1

 

اما آدرس ها را به دو دسته مطلق و نسبی در نظر می گیریم:

 

آدرس های مطلق:

آدرس هایی که در آن از پرتکل و نام دامنه استفاده شده است آدرس های مطلق نام دارد که نمونه ای از این آدرس ها در زیر وجود دارد:

http://www.tuts.ir

آدرس های نسبی:

اما آدرس هایی را که در آن از جدا کننده ها و عبارت www و نام دامنه استفاده نشده را آدرس های نسبی می گویند مثل آدرس زیر:

 

Image/logo.png

که این آدرس در واقع مسیر قرار گرفتن تصویر لوگوی سایت را نشان می دهد و یک آدرس نسبی نام دارد.

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

 

تگ <base>:

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

این تگ از دو صفت target و href پشتیبانی می کند که href آن حتما باید از نوع مطلق باشد.

 

لینک های ایمیلی:

قطعا برای شما هم پیش آمده زمانی که روی یک لینک کلیک کرده باشید و صفحه ای برای شما باز می شود که امکانات ارسال ایمیل برای شما فرآهم می شود. به اینگونه لینک ها , لینک های ایمیلی گفته می شود.

شکل کلی استفاده از این نوع لینک ها به صورت زیر می باشد:

<a href=”mailto:name@example.com”>name@example.com </a>

 

در مثال فوق آدرسی که بعد از : آمده است در واقع همان آدرس ایمیلی است که قصد ارسال به آن را دارید. مثال فوق را می توان به صورت زیر نوشت:

<a href=”mailto:name@example.com”> E-mail us </a>

در مثال فوق با کلیک بر روی عبارت بین تگ <a> معمولا یک صفحه ارسال ایمیل مایکروسافت به صورت زیر باز می شود.

 

2

 

لینک های لنگری:

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

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

دقت داشته باشید که برای ایجاد لینک مقصد لنگری باید به جای استفاده از صفت href در تگ <a> از صفت  id برای نام گذاری استفاده می کنیم.

لینک های دانلودی:

این نوع لینک هم که دیگر نیاز به معرفی ندارد شما کاربران به خوبی با این لینک آشنا هستید چرا که این لینک زمانی به کار می رود که  کاربران یک فایلی را از سرورمان دانلود کنند و این لینک است که با کلیک بر روی آن اگر دانلود منیجر داشته باشید به دانلود هدایت می شوید و اگر نه توسط خود مرورگر به دانلود فایل هدایت می شوید:

 

<a href=”itcom.pnuab.ac.ir/ebooks/html_learning.zip” >Click to  download </a>

  

بسیار خوب کار با لینک ها هم به پایان خود رسید و از این لحظه به یادگیری کار با تصاویر می پردازیم:

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

 

آشنایی با تگ <img/>

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

 img   src=”image1.jpg”    alt=”this is a rose flower”      border=”۲”     with=”۱۰۰> 

 </   height=”۲۰۰   ”

 

مثال فوق یک نمونه از به کار بردن تصاویر در صفحات وب است که داخل تگ <img/>   از صفت های مربوط به این تگ استفاده شده است که در ادامه با این صفت ها آشنا می شوید:

 

align

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

Right : برای قرار گرفتن تصاویر در سمت راست متون است.

 

Left : برای قرار گرفتن تصاویر در سمت چپ متون است.

 

Top : قسمت بالای عکس با خطی که در آن قرار دارد تراز می گردد.

 

 

alt

این صفت را حتما برای تصاویر خود بکار ببرید چرا که وظیفه این صفت این است که در صورتی که به هر دلیل تصاویر شما نمایان نشد یک متن را برای معرفی این تصویر نشان می دهد این مورد جزو مواردی است که موتورهای جست و جو از روی اطلاعات این صفت می فهمند که تصاویر شما مربوط به چه مطابی است و بسیار برای بهینه سازی سایت توصیه می شود که حتما از این صفت استفاده کنید و به عنوان مقدار مانند مثال فوق از یک خط توضیح حتی فارسی برای تصاویر خود تعیین کنید.

 

 border

این صفت برای این است که میزان ضخامت حاشیه تصاویر خود را بر حسب px تعیین کنید.

 

height

این صفت هم برای تعیین ارتفاع عکس بر حسب px تعیین شده است.

 

hspace

 

برای تعیین میزان فاصله تصویر با عناصر سمت چپ و راست عکس است.

Vspace

برای تعیین میزان فاصله تصویر با عناصر بالا و پایین تصویر است.

 

Src

این صفت را می توان اصلی ترین صفت این تگ مهم دانست چرا که برای تعیین آدرس لینک تصویر مورد نظر تعیین می شود که در مثال فوق هم می توانید ببینید. به یاد داشته باشید که هم از آدرس های مطلق و هم از آدرس های نسبی برای این مقدار دهی به این صفت می توانید استفاده کنید.

 

Width

درست حدس زدید برای تعیین عرض تصویر خود به کار می رود (بر حسب px)

 

 

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

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

 

<“a href=”default.asp>
<“img    src=”smiley.gif”    alt=”HTML tutorial”    style=”width:42px;height:42px;border:0>
</a>

 

درج توضیحات در HTML

لازم است که در صفحات html گاهی اوقات از توضیحات در کدهای صفحات برای فهم خود برنامه نویس استفاده می شود که در واقع باید این نوشتار که ممکن است یا کد باشد و یا توضیحات به صورتی باشد که توسط مرورگر قابل فهم نباشد و یه جورایی مرورگر آن ها را در نظر نگیرد بنابر این به صورت زیر قابل بیان است:

<!- – this is a comment  – ->

در مثال فوق خواهید دید که اگر به جای عبارت this is a comment هر نوع عبارت دیگری چه کد و یا چه نوشتار و… توسط مرورگر در نظر گرفته نمی شود.

 

کار با لیست ها

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

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

 

اما لیست ها به سه قسمت تقسیم می شود :

 

  • لیست های مرتب:

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

 

  • One
  • Two
  • Tree

.

.

.

  • لیست های نامرتب:

برای نشان دادن این گونه لیست ها لازم نیست که از شمارش استفاده شود و عموما برای نمایش متون از  دایره های توپر و یا مربع و یا دایره استفاده می شود.

  • Eggs
  • Cheese
  • Milk
  • Papadums
  • Tickle-me Elmo

 

  • لیست های تعریفی:

 

این نوع لیست ها زمانی استفاده می گردد که به صورت زیر از یک عنوان  و سپس توضیح آن برای عنوان به کار می رود.

 

3

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

تگ <ol> برای ایجاد لیست های مرتب:

از این تگ خاص برای ایجاد همان لیست های مرتبی که در بالا مثال زدیم به کار می رود و برای اینکه آیتم های تگ ها را ایجاد کنیم باید آن ها را در بین تگ های <li> قرار دهیم.

اما صفت های این تگ را در زیر می بینید:

 

صفت type

این صفت برای تعیین شکل کنار هر آیتم برای شمارش تعیین می شود که مقادیر زیر را پشتیبانی می کند.

 

a  »   برای نمایش حروف کوچک انگلیسی

A  »   برای نمایش حروف بزرگ انگلیسی

i  »   برای نمایش حروف کوچک انگلیسی

I »   برای نمایش حروف کوچک رومی

۱ »   برای نمایش اعداد به عنوان شمارش

<“ol type=”1 >
<li>Apples</li>

 <li>Bananas</li>

 <li>Lemons</li>

 <li>Oranges</li>
<ol/>

نتیجه کد فوق به صورت زیر است:

4

تگ <ul> برای ایجاد لیست های نامرتب:

نحوه به کار گیری این تگ که برای لیست های نا مرتب است هم دقیقا مانند مثال فوق به کار می رود ولی با این تفاوت که به جای <ol> از <ul> استفاده می کنیم:

در اینجا چند صفت این تگ را می بینیم:

 

صفت type

این صفت برای تعیین شکل کنار هر آیتم برای شمارش تعیین می شود که مقادیر زیر را پشتیبانی می کند.

Circle » یک دایره تو خالی را برای آیتم تعیین می کند.

Disc »  یک دایره تو پر را برای آیتم تعیین می کند.

Square » یک مربع تو پر را برای آیتم تعیین می کند.

 

<h2>Unordered List without Bullets</h2>

<“ul style=”list-style-type:none>

 <li>Apples</li>

 <li>Bananas</li>

 <li>Lemons</li>

 <li>Oranges</li>

<ul/>

نتیجه کد فوق :

 

5

تگ <dl> برای ایجاد لیست های تعریفی:

این تگ هم برای تعیین لیست های تعریفی به کار می رود باید عناوین را بین تگی با عنوان <dt> و خود تعاریف را بین <dd> قرار می دهیم:

<h2>A Description List</h2>

<dl>

  <dt>Coffee</dt>

  <dd>- black hot drink</dd>

  <dt>Milk</dt>

  <dd>- white cold drink</dd>

<dl/>

نتیجه کد فوق به صورت زیر است:

 

6

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

بسیار خوب فکر می کنم این پست هم تا همینجا به پایان خودش رسیده تا پست بعدی خدانگهدار

 

با تشکر از استاد احمد بادپی

 

دیدگاهتان را بنویسید

نشانی ایمیل شما منتشر نخواهد شد. بخش‌های موردنیاز علامت‌گذاری شده‌اند *

Time limit is exhausted. Please reload CAPTCHA.

Pin It on Pinterest

Share This

Share This

Share this post with your friends!