آموزش HTML

: آموزشگاه IT; 15 مرداد 1398; بازدید: 944; امتیاز دهی:

( 1 امتیاز )

امتیاز کاربران

HTML چیست؟

HTML مخفف عبارت Hypertext Markup Language است. این زبان در واقع یک نوع زبان نشانه‌گذاری استاندارد برای ایجاد صفحات وب و وب اپلیکیشن‌ها محسوب می‌شود. در واقع HTML را عنصر کلیدی صفحات وب می‌دانند و تمامی زبان‌های برنامه‌نویسی برای طراحی سایت، به شکلی به HTML وابسته هستند. با استفاده از این زبان و CSS و جاوا اسکریپت، تکنولوژی‌های بنیادین برای شبکه جهانی وب تشکیل می‌شود. مرورگرها اسناد HTML را از وب سرور یا مخزن لوکال (Local) دریافت کرده و آن‌ها را به صفحات وب چند رسانه‌ای تبدیل می‌کنند. در واقع HTML ساختار معنایی صفحات وب را تعریف کرده و شامل مشخصات ظاهری سند است.

تگ یا Tag در HTML چیست ؟

به دستورات برنامه نویسی توسط HTML تگ یا TAG گفته میشود و در علامت های “ < ” یا “ > ” قرار میگیرند.این تگ ها به صورت های مختلف نوشته میشوند یک دسته از این تگها تگ هایی هستند که در هر جایی از صفحه ممکن است درج شود مانند تگ <HR> و هر وقت این کد درج شود بلافاصله یک خط افقی درج میگردد.یک سری تگ یا TAG هستند که باید ابتدا و انتهای مشخصی داشته باشند یعنی این تگ ها دارای ابتدا و انتها هستند و از این نوع تگ ها زیاد استفاده میشود مانند تگ <B> که زمانی این تگ باز میشود تا بسته شدن این تگ هر نوشته ای که مابین این دو تگ باشد BOLD میشود و انتهای تمام تگ ها با یک اسلش به پایان میرسد مانند <B/> یک سری تگ دیگر هستند که علاوه بر اینکه ابتدا و انتهای آن مشخص است این تگ ها وجودشان مستلزم داشتن یک سری پارامتر است مانند تگ Font که دارای پارامتر های گوناگون است به صورت مثال:

<Font Face =”Tahoma” Size =20>www.tosinso.com</Font>

اگر کد بالا را خروجی بگیریم میبینیم که آدرس سایت itpro با فونت Tahoma و با اندازه 20 نمایان میگردد.البته تعداد این پارامتر ها میتواند زیاد باشد.

آشنایی با برخی از تگ ها:

تگ <Hn>

از این تگ معمولاً برای استفاده از عناوین استفاده میشود البته به جای n باید یک عدد به کار برده شود این اعداد از 1 تا 6 هستند h1 یعنی بزرگترین حالت و h6 یعنی کوچکترین حالت برای متن ها به کار برده میشود.

تگ <I> یا <em>یا <address>

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

تگ <B> یا <Strong>

این تگ برای Bold کردن متن به کار برده میشود.

تگ <U>

برای نمایش متن به صورت زیر خط دار این تگ به کار می آید

تگ <Strike>

این تگ نیز برای این به کار میرود که یک خط را روی متن میکشد

تگ <Font>

برای اینکه بتوانیم فونت یا قلم یک متن را مشخص کنیم از این تگ استفاده میکنیم ، اما اگر از این تگ استفاده نکنیم مرورگر اینترنت از فونت پیشفرض برای نمایش متن ها نشان میدهد و اگر فونتی را انتخاب کنیم که آن فونت در سیستم موجود نباشد باز هم همان فونت پیشفرض را برای ما به نمایش میگذارد.این تگ نیز دارای پارامتر هایی است مثلاً پارامتر Face برای تعیین نوع فونت به کار میرود شما میتوانید در این پارامتر با کاما چندین فونت را به کار ببرید تا اگر فونت ها در سیستم مقابل موجود نبود از یک فونت دیگر استفاده کند ، یکی دیگر از پارامتر های این تگ پارامتر Size است که اندازه فونت را نمایش میدهد حتی میتوان با استفاده از پارامتر color=red مثلاً رنگ قرمز را برای فونت انتخاب نمود :

تگ <BR>

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

تگ <Center>

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

تگ <P>

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

تگ <Pre>

کلاً HTML با فاصله رابطه خوبی ندارد یعنی فاصله ها را در نظر نمیگیرد و خصوص خالی میان کلمات را نمیبیند و کلمات را پشت سر هم قرار میدهد این تگ که باید پایان هم داشته باشد برای این منظور است که هر کلمه یا پاراگرافی را در این تگ قرار دهید همانگونه که تایپ می شوند نمایش داده میشود و فاصله ها را هم در نظر میگیرد.

تگ <Ul>

این تگ مخفف Unordered List یا لیست هایی که به ترتیب موارد در آنها تاثیر ندارد می باشد هر لیست از آیتم یا مواردی تشکیل شده است که هر یک از این موارد با تگ <Li> (که این تگ نیز دارای پایان است در در داخل تگ <Ul> نوشته میشود .تگ Li مخفف ListItem یا همان موارد لیست است.

تگ <Ol>

این تگ مخفف Ordered List یا لیست هایی که ترتیب موارد در آنها تاثیر دارد می باشد هر لیست از آیتم یا مواردی تشکیل شده است که هر یک از این موارد بین تگ های <Ol> , </Ol> با تگ

<Li> , </Li> نوشته میشود تگ Li مخفف listeItem است.

تگ <bdo>

این تگ نیز دارای انتها است و برای راستچین یا چپ چین نوشتن متن به کار برده میشود اگر

dir="rtl"

تعریف شود حروف از راست به چپ قرار میگیرد یعنی کلمه بر عکس می شود و اگر dir برابر با ltr باشد تغییری در کلمه ایجاد نمی شود

تگ <div> و <span>

این دو تگ از مهمترین تگ های طراحی صفخات وب هستند این دو تگ را برای دسته بندی متون و سپس استایل دادن مناسب به این دسته ها میتوان استفاده نمود یک کلاس در CSS میتواند به div و Span نسبت داده شود و این دو تگ از نظر ظاهری هیچ شکل خاصی ندارند و تنها با استایل شکل ظاهری شان تغییر میکند و تنها تفاوت div نسبت یه span در این است که div جدا کننده صفحه است زیرا div مانند پاراگراف ابتدا و انتهای متن را می بندد.

تگ<sup> و <sub>

از تگ sup برای نمایش توان و از تگ sub برای نمایش اندیس استفاده میشود البته برای فرمول های شیمیایی و ریاضی بیشتر کاربرد دارد

تگ <Object>

از این تگ برای قراردادن یک فایل خارجی در فایل HTML استفاده می شود ، میتوان از این تگ برای قراردادن فایل های فلش و یا انواع فایل های ویدئویی استفاده نمود مثال زیر را ببینید

با پارامتر زیر آدرس فیلم خود را میتوانید معرفی نمایید

با پارامتر زیر فیلم را به صورت خودکار میتوانید پخش کنید

تگ <img>

این تگ از پرکاربرد ترین تگ ها می باشد و از جمله تگ هایی است که پایان ندارد کاربرد این تگ برای نمایش عکس در صفحات وب است استفاده از crs یا source همان آدرس تصویر است و alt نوشته ای است که Tooltip موس برای آن تصویر به نمایش در می آید

تگ <a>

این تگ نیز دارای پایان است و از این تگ برای ایجاد لینک ارتباطی به یک صفحه دیگر استفاده می شود این تگ دارای خاصیت target است که به مکان باز شدن صفحه جدید اشاره دارد و این خاصیت مقادیر Blank یعنی باز شدن در یم صفحه جداگانه و parent یعنی باز شدن در صفحه اصلی و self یعنی باز شدن در همان صفحه و در نهایت top یعنی باز شدن در یک صفحه که بالا تر از صفحات دیگر است را دارا است

ضمناً برای ساختن لینک ایمیل کافی است از دستور زیر استفاده شود:

<a href="mailto:این آدرس ایمیل توسط spambots حفاظت می شود. برای دیدن شما نیاز به جاوا اسکریپت دارید">send feedback</a>

تگ <table>

هر جدول از سط و ستون تشکیل شده است در HTML سطر هر جدول را با تگ <tr> و ستون ها را با تگ <td> یا به عبارتی محتویات داخل هر سلول را مشخص میکنیم. مانند:

<table>

<tr>

</tr>

<tr>

</tr>

</table>

یکی از مشکلاتی که زبان HTML دارد ایستا بودن آن است یعنی شما نمیتوانید هیچ برنامه ای بنویسید که بتواند پردازشی روی مطالب داشته باشد یعنی نمیتوانید صفحه لاگینی داشته باشید که بفهمد آیا کاربر مجاز است برای ورود یا خیر اما برای حل این مشکل ما باید از زبان های ASP.Net یا جاوا اسکریپت یا vb Script را در کنار HTML به کار بگیریم .حتماً شنیدید که با برنامه Notepad هم میتوان برنامه نوشت اما بیایید با هم این داستان را عملی پیاده کنیم یک مثال بسیار ساده برنامه Notepad را باز میکنیم و کد های زیر را داخل این ویرایشگر دوست داشتنی تایپ میکنیم

تگ <a>

Link ها ‌در تمام مرورگرها به شرح زیر نمایش داده می شوند

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

یک لینک بازدید نشده که دارای زیرخط (UnderLine) و به رنگ آبی می باشد.

یک لینک بازدید شده که دارای زیرخط (UnderLine) و به رنگ بنفش می باشد.

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

نکته : url مخفف Uniform Resource Locator است شاید بار ها این نام را شنیده باشید URL یعنی آدرس اما نه آدرسی که ما در کامپیوتر خود داریم بلکه آدرسی که در سطح اینترنت یا صفحات وب شناخته شده است ، یادتان باشد در دنیای وب فاصله معنی نمیدهد یعنی مابین آدرس های اینترنتی یا همان URL هیچ فاصله ای نیست اگر دیدید در آدرستان علامت 20% آمده بدانید که این نمایانگر Space یا همان فاصله است که خود مرورگر این کارکتر را ایجاد میکند.

<a href="http://tosinso.com/"> tosinso.com مشاهده </a>

کد فوق باعث میشود لینک مورد نظر مانند متن روبرو نمایش داده شود : مشاهده tosinso.com

با کلیک بر روی لینک بالا (مشاهده tosinso.com) به صفحه اول سایت انجمن تخصصی فناوری اطلاعات ایران هدایت می شوید ، البته این پیوند ها یا لینک ها الزاماً یک متن میتواند نباشد و نسبت به سیاست کاری شما تغییر کند مثلاً یک تصویر شما میتوانید به یک عکس لینک دهید تا اگر روی عکس کلیک کنید به سایت یا صفحه دیگری منتقل شوید .

از نظر باز شدن صفحه جدید یا target چند حالت برای باز شدن لینک وجود دارد که این خاصیت را target مینامند. به عبارتی دیگر صفت target به صورت خاص عنوان میکند که لینک مورد نظر چطور و کجا باز شود، البته به صورت پیش فرض لینک ها در همان صفحه باز میشوند . به عنوان مثال در زیر لینکی را مشاهده خواهید نمود که target با عنوان Blank نوشته شده و این یعنی پس از کلیک بر روی لینک صفحه جدید در یک پنچره جدید یا یک Tab جدید در همان مرورگر باز خواهد شد.

<a href="http://web.tosinso.com/articles/25276" target="_blank">Visit web.tosinso.com!</a>

نکته : همیشه یک اسلش / به آخر آدرس مورد نظرتان اضافه کنید در این صورت یک باری از روی سرور مورد نظر برداشته اید چون اگر این اسلش را اضافه نکنید خود سرور این کار را خواهد کرد

href="http://www.web.tosinso.com/"

قبلاً خیلی مختصر در مورد لینک های ایمیلی صحبت شده است هنکامی که بر بر روی این لینک ها کلیک میکنید برنامه هایی نظیر Gmail یا Outlook باز شده و منتظر ارسال ایمیل شما میمانند

کد زیر دقیقاً مربوط به ارسال ایمیل در وب سایت ها به کار میرود

<a href="mailto:این آدرس ایمیل توسط spambots حفاظت می شود. برای دیدن شما نیاز به جاوا اسکریپت دارید"> این آدرس ایمیل توسط spambots حفاظت می شود. برای دیدن شما نیاز به جاوا اسکریپت دارید </a>

محتوای داخل تگ a مانند انواع دیگر لینک ها می تواند یک متن هم باشد بنا بر این میتوان از کد زیر هم برای ارسال ایمیل استفاده نمود

کمی پیشرفته تر از کد های فوق را میتوان در کد زیر دید یعنی علاوه بر مشخص کردن آدرس Email دریافت کننده می توان Subject یا موضوع و گزینه های CC و BCC و حتی قسمتی از متن ایمیل را نیز مشخص کرد کد زیر را مد نظر قرار داده و پارامترهای subject، CC ، body راه به دلخواه تغییر دهید با این کار کمک زیادی به کاربر کرده تا بتوانند سریع تر به هدف خود برسند.

<a href="mailto:این آدرس ایمیل توسط spambots حفاظت می شود. برای دیدن شما نیاز به جاوا اسکریپت دارید?subject=Network And Programing CC=این آدرس ایمیل توسط spambots حفاظت می شود. برای دیدن شما نیاز به جاوا اسکریپت دارید&body=Please send me a copy of your new Email!"> Email For Me </a>

ایجاد کردن لینک ها به صورت رنگی

رنگی کردن لینک ها یکی از عناصری است که برای راحتی کاربر بسیار مهم می باشد و کاربر میتواند تشخیص دهد کدام لینک ها را قبلاً باز کرده است ، پس میتوان رنگ این لینک ها را تغییر داد این تغییر می تواند برای تمام لینک های صفحه به صورت یکجا اعمال گردد یا به صورت جزئی و تعدادی از لینک ها این تغییرات را داشته باشد ، اگر رنگ لینک های موجود در صفحه را در تگ <body> معین کنیم. در این صورت رنگی که برای لینک ها در تگ <body> در نظر گرفته می شود بر روی تمام لینک ها تغییر و اعمال میگردد.

ضمناً اگر میخواهید مشخص کنید که چه لینک هایی توسط کاربر کلیک شده است از ویژگی vlink می توان استفاده کرد،که حرف v مخفف visited می باشد. اگر تمایل دارید وقتی نشانگر موس بر روی لینک میرود رنگ لینک تغییر کند و کاربر را متوجه این سازد که این متن یک لینک است از ویژگی alink می توان استفاده کرد. که حرف a مخفف active می باشد.

به عنوان مثال کد زیر را دقت کنید :

<a href="http://tosinso.com" target="_blank">tosinso.com</a>

</body>

اگر بر روی این لینک کلیک کنیم رنگ آن تغییر کرده و ما را از اینکه قبلاً این لینک را بازدید کردیم آگاه می سازد ، همانگونه که در کد فوق دیدید تگ body هم دارای صفت هایی است و همچنین استفاده از رنگ ها هم به صورت درج عدد هایی که نمایانگر رنگ است مشخص میشود و هم نام رنگ که بعداً در بخش های بعدی این مورد را دنبال خواهیم نمود.

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

استفاده از تگ <font>

استفاده از ویژگی style داخل تگ لینک <a>

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

<body>

<a href="http://tosinso.com"><font color ="Blue"> www.tosinso.com</font></a>

</body>

تگ فونت را باید در دو طرف عبارت مورد نظر همراه با انتخاب Color مناسب میتوان تعیین کنیم رنگ لینک مورد نظر چطور باشد

در روش دوم همانگونه که گفتیم میتوان از ویژگی style داخل تگ لینک <a> استفاده نمود مثال زیر را ببینید:

<body>

<a href ="http://tosinso.com" style=color:"red" > www.tosinso.com</a>

</body>

پس با توجه به کد فوق از ویژگی style میتوان برای رنگ هم استفاده نمود ، اما اگر توجه کرده باشید در برخی از سایت ها با استفاده از کلید TAB میتوان بر روی عناصر صفحه یا لینک های موجود بر روی صفحه حرکت کرد اگر میخواهید سایتی کاربر پسند داشته باشید این ویژگی میتواند به افرادی کمک کند که استفاده از موس برایشان زیاد خوشایند نیست پس توسط کیبورد و کلید TAB بر روی لینک ها حرکت میکند ، این ویژگی در tabindex موجود است و این ویژگی در تگ <a> به کار میرود ، در مقابل tabindex عددی قرار میگیرد که مشخص کننده این است که با فشاردادن چند بار tab میتوان به این لینک رسید و دوستان برنامه نویس حتماً در برنامه هایی نظیر C شارپ و Visual studio این مورد را در برنامه های windows Application رعایت میکنند.

<body>

<a href ="http://web.tosinso.com" tabindex ="1" > www.web.tosinso.com</a>

<br/>

<a href ="http://dbo.tosinso.com" tabindex ="2" > www.dbo.tosinso.com</a>

</body>

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

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

href

در مورد این صفت قبلاً هم صحبت شده است و یکی از مهمترین صفت های این تگ به حساب می آید ، این صفت آدرسی که لینک به آن اشاره می کند را مشخص کرده و این آدرس می تواند آدرس صفحه ای مربوط به سایتی دیگر یا در همان مسیر یا مکانی در صفحه جاری و یا آدرس هر نوع فایل دیگری(مانند ارجاع به صفحات دانلود یا انواع فایل ها با پسوند های MKV , jpg , PDF و ... ) باشد.

target

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

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

self : لينک در همان پنجره يا قابی که کليک شده است باز خواهد شد .

parent : لينک در قاب اصلی يا مادر باز خواهد شد .

blank : لينک در يک پنجره جديد باز خواهد شد .

hreflang

یک از کاربرد هایی که لینک ها دارند معرفی منبع برای مطلب مورد نظر است این صفت مشخص کننده نوع زبان به کار رفته در منبعی که لینک به آن اشاره دارد است و یکی از کدهای زبانی مانند

en ,(Farsi) fa , (Ferench)fr مخفف english و... را به عنوان مقدار می پذیرد.

rel یا relationship

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

rev یا reverse

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

start : ابتدا

next : بعدی

pre : صفحه قبلی

index : صفحه آغازين

alternate : يک در ميان

designates : انتخاب شده

contents : صفحه محتویات

section : بخشی از برنامه

chapter : بخش

appendix : ضميمه

help : صفحه يا فايل راهنما

stylesheet : صفحه قالب دهی (CSS)

bookmark : يک لنگر در همان صفحه يا صفحه ای ديگر

name

میتوان یک نام برای پیوند یا لینک خود مشخص کرد و این نام باید Uniq و منحصر به فرد باشد و ضمناً انتخاب نام نباید با اعداد 0-9 و - و _ و : یا . (نقطه) شروع شود.

تگ Table :

قبلاً در بخش اول این دوره آموزشی در باره این تگ اشاره ای شد در این مطلب بیشتر و مفصل تر و البته کاربردی تر در خصوص جداول صحبت میکنیم ، یکی دیگر از تگ های HTML تگ table می باشد که برای درج جدول مورد استفاده قرار میگیرد اجازه بدید با مثالی در نرم افزار Word این کار رو ادامه بدیم ، در نرم افزار Word از منو insert شما میتوانید یک جدول ایجاد کنید

ستون ها را با نام column و ردیف ها یا سطر ها را با row نامگذاری میکنند در HTML ستون ها را با تگ <TD> و سطر ها را با تگ <TR> مینویسند .

ما در نرم افزار Word میتوانیم برخی از سلول ها یا خانه های جدول رو با هم ترکیب کنیم توسط Merge Cells که هم میتوانیم ستون ها را با هم ترکیب کنیم و هم ردیف ها را

گ table دارای attribute زیادی هست که جلوتر خدمتتان توضیح خواهم داد ، پس از نوشتن تگ <table> با هر بار نوشتن تگ <tr> میتوانید یک خط ایجاد کنید پس tr به نشانه table row می باشد پس به ازا< هر چند ردیفی که میخواهید باید tr را اضافه کنید و قبل از اینکه تگ tr بسته شود یعنی در داخل تگ <TR> باید تعداد ستون هایی را مشخص کنید در کد زیر ملاحضه میکنید که در سطر اول ما سه ستون داریم که داخل هر ستون را به x1 تا x3 نام گذاری کردیم. در ادامه کد ها یعنی دقیقاً پس از پایان تگ <tr//> من میخواهم یک ردیف دیگر با سه ستون ایجاد کنم که هر ستون را با y1 تا y3 نام گذاری میکنم ، و در نهایت تگ table را میبندیم.

<body>

<table>

<tr>

</tr>

<tr>

</tr>

</table>

</body>

اشیه های جدول دیده نمیشوند چون جدول ما دارای Border نیست در ادامه جدول را دارای border میکنیم برای این منظور فقط کافی است در جلو تگ table مقدار border را وارد کنیم ، اگر مقدار border برابر 0 باشد یعنی همان تصویر بالایی که بدون حاشیه بود پس توسط کد زیر به جدولمان حاشیه ای به اندازه 2 میدهیم

<body>

<tr>

</tr>

<tr>

</tr>

</table>

</body>

تگ <th> :

این تگ در اولین سطر جدول به کار میرود و مخفف table header است بنابر این میتوانیم سر ستون های table را توسط این تگ مشخص کنیم خاصیت th این است که value خودش را به صورت BOLD نمایش میدهد پس برای عنوان نویسی در جدولمان th گزینه خوبی است در ادامه مثالی را خواهیم دید

<body>

<tr>

</tr>

<tr>

</tr>

</table>

</body>

تگ caption

شما میتوانید یک تیتر یا عنوان فرعی برای جدول خود معرفی کنید بدین صورت که بلافاصله پس از تگ table و قبل از اینکه tr را باز کنید میتوانید از تگ Caption استفاده کنید و این تگ نیز مانند سایر تگ ها در HTML دارای Style می باشد بنابر این وقتی از caption استفاده کنید آن متن در داخل table نمایش داده نمیشود همانند مثال زیر:

<body>

How to Use caption in table...

</caption>

<tr>

</tr>

<tr>

</tr>

</table>

</body>

align

این Attribute جهت align text در داخل جدول هست یعنی جهتی که text در جدول قرار میگیرد یا به عبارتی تمایل text به سمت چپ ، راست یا وسط که این سه جهت به صورت زیر بیان میشود

<body>

<tr>

<td align ="right" width="93">Right cell</td>

<td align="center">Center cell</td>

</tr>

</table>

</body>

توسط خاصیت width نیز جدول را طوری تنظیم کردیم که بتوان حالت چپ چین و راست چین را تشخیص دهیم همین کار را میتوان بر روی جدول های دیگر انجام داد.

valign

این Attribute مخفف Vertical هست یعنی تمایل عمودی Text رو به سه حالت بالا ، پایین و همچنین وسط و به صورت کد زیر بیان میشود

<body>

<tr>

<td valign="bottom">Bottom cell</td>

<td valign="middle" width="102">middle cell</td>

</tr>

</table>

</body>