HTML چیست؟

مقدمه ای در HTML  HTML چیست؟

اجزای تشکیل دهنده یک صفحه وب دارای خصوصیتی مشترک بوده و آن کد تولید کننده آن صفحات می باشد  که البته به زبان خاصی نوشته می شوند این زبان  Hypertext Markup Language یا همان HTML می  باشد. که مختصراً در خصوص آنها توضیحاتی ارائه می شود .

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

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

Language : به معنای زبان بوده و در این عبارت معرف وجود زبانی با قابلیت نشانه گذاری توسط متن ها و فوق متن ها می باشد .

  عناصر تشکیل دهندهHTML : HTML دارای عناصر مختلفی می باشد که از آن جمله می توان به موارد زیر اشاره کرد : 1- فرم : فرم ها همان عناصر اولیه یا صفحاتی هستند که کاربر با آنها در ارتباط می باشد . 2-   متن ها : عناصر پر مصرف و ساده که عمده صفحات وب را شامل می شود . 3- لینک ها (ابرمتن ها) : این عناصر متونی هستند که قابلیت اتصال به یک فرم یا آدرس دیگر را دارند . 4- تصاویر: تصاویر در صفحات وب از اعضای اصلی بوده که می تواند جلوه ای ویژه در صفحات ایجاد نماید . 5- جدول ها : جداول نیز به منظور دسته بندی و ایجاد ساختار های متناسب نیز کاربرد ویژه ای در صفحات وب دارد . 6- چند رسانه ای (مولتی مدیا) : هر چند این عناصر در HTML اولیه موجود نبوده است ولی در نسخه های بعدی اضافه شده و می توان امکاناتی نظیر صوت و یا تصویر را در صفحات وب ایجاد کرد . 7- عناصری نظیر کدهای فلش یا جاوا و یا عناصری نظیر استیل شیت ها نیز سایر عناصر موجود در صفحات وب می باشند که از ذکر موردی آنها در اینجا خودداری می شود .

 

شروع کار :

با توجه به ذکر مختصری از HTML حال برای آغاز چه باید کرد ؟ در پاسخ به این سوال به ابزارهایی جهت ایجاد صفحات وب نیاز داریم که عبارتند از :

1- یک محیط متن جهت ایجاد فایل HTML نظیر Notepad  (این ساده ترین محیطی است که می توان بوسیله آن کد HTML را ایجاد کرد اما محیط هایی نظیر Microsoft FrontPage و یا سایر زبان های پشتیانی کننده از html نظیر Microsoft Visual Studio می توانداین امکانات را فراهم کند ) .

2- یک Web Browser نظیر Internet Explorer و یا Opera که بتوان صفحه ایجاد شده را در آن مشاهده نمود .

 

به این ترتیب می توان یک صفحه وب ساده را ایجاد نمود . در زیر یک کد ساده جهت ایجاد یک صفحه وب ذکر شده است که جزئیات آن را در ادامه توضیح می دهیم .

 

 

<html>

 

<head>

                                <title>Page 1</title>

</head>

 

 

<body>

                                <p>Welcome to HTML</p>

</body>

 

</html>

 

 

 

نکته : نرم افزار Notepad را باز کرده و متن فوق را درون آن بنویسید سپس آن را با یک نام دلخواه و پسوند htm یا html ذخیره کنید . در ادامه بر روی فایل ذخیره شده را اجرا کنید تا نتیجه کار را ببینید .

 

ایجاد یک صفحه وب بوسیله html به سادگی فوق می باشد قابل ذکر است که به دستورات فوق در  html تگ می گویند نظیر تگ <head> که البته تگها می توانند بصورت جفت و یا مستقل باشند نظیر تگ head  که جفت است و به <head> تگ head باز و به تگ </head> تگ head بسته گفته می شود .

توجه : همه تگ ها در html در میان علامت <> قرار می گیرند .

 

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

 

 

تگهای HTML

<html>  </html>

این جفت تگ به عنوان آغاز و پایان کدنویسی html می باشد ، یعنی با تگ باز آن کدنویسی آغاز و با تگ پایان آن انتهای کدنویسی خواهد بود سایر کدها بایستی حتماً در میان این دو تگ قرار بگیرد .

______________________________________________________

<head>  </head>

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

______________________________________________________

<title>  </title>

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

______________________________________________________

<body>  </body>

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

______________________________________________________

<b>  </b>

عبارت درون این جفت تگ بصورت ذخیم (bold) نشان داده می شود

______________________________________________________

<p>  </p>

عبارت درون این جفت تگ به عنوان یک پاراگراف مشخص می شوند . این تگ دارای خصوصیتی است (align)که نوع چیدمان را در صفحه مشخص می کند که عبارتست از :

1-   راست چین یا right

2-   چپ چین یا left

3-   وسط چین یا center

در مثال زیر از این خاصیت استفاده شده است .

<p align="center" >  Welcome to HTML  </p>

به این ترتیب عبات Welcome to HTML در وسط صفحه وب نشان داده می شود .

______________________________________________________

<h1>  </h1>

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

برای آنکه تغییرات این تگ را متوجه شوید مثال قبل را درون این جفت تگ قرار داده و سپس صفحه مربوطه را ذخیره کنید .

<body>

            <h1>

            <p>Welcome to HTML</p>

            </h1>

</body>

ساختار بدنه (body) به شرح فوق تغییر می کند .

سایر سایزبندی در صفحات وب از شماره 1 تا 7 می باشد به شرح زیر :

<h1> Welcome</h1>

<h2> Welcome </h2>

<h3> Welcome </h3>

<h4> Welcome </h4>

<h5> Welcome </h5>

<h6> Welcome </h6>

<h7> Welcome </h7>

 

که خروجی آن به صورت مقابل است .

Welcome

Welcome

Welcome

Welcome

Welcome

Welcome

Welcome

 

 

 

 

 

______________________________________________________

<hr>

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

______________________________________________________

<marquee>  </marquee>

عبارت درون این جفت تگ با توجه به تنظیمات مربوطه بصورت افقی درون صفحه حرکت می کند مثال زیر را ببینید : (تغییرات فقط درون بدنه است)

<body>

            <h1>

            <p align="justify">Welcome to HTML</p>

            </h1>

            <hr>

            <marquee> this is example </marquee>

            <hr>

</body>

 

 

این تگ دارای خصوصیات زیر می باشد :

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

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

bgcolor=" " رنگ زمی نه آن تگ را مشخص می کند که یا نام رنگ یا کد هگز آنرا می نویسید.

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

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

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

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

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

<body>

            <h7>

            <p align="justify">Welcome to HTML</p>

            </h7>

            <hr>

            <marquee behavior="alternate" direction="right" scrolldelay="60">

                        this is example

            </marquee>

            <hr>

</body>

 

______________________________________________________

<!--     --  >

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

______________________________________________________

<a href="www.yahoo.com"> this is link of yahoo web site </a>

جفت تگ فوق یک لینک را ایجاد می کنند ، بگونه ای که در مقابل herf=" " آدرس اینترنتی و درمیان دو تگ باز و بسته مشابه فوق متنی را که تمایل دارید نمایش داده شود . بدین ترتیب شما متنی را درون صفحه خود ایجاد کرده اید که به سایت یاهو لینک داده شده است .

<body>

            <hr>

            <a href="www.yahoo.com"> this is link of yahoo web site </a>

</body>

 

 

______________________________________________________

<img src="pic01.jpg">

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

<body>

            <h7>    <p align="justify">Welcome to HTML</p>   </h7>

            <marquee> this is example </marquee>

            <hr>

            <!--

                        this is comment

            -->

            <img src="D:/images/pic01.jpg">

</body>

 

 

 

سایر خصوصیات این تگ به شرح زیر است :

 Height, Width

این تگ خصوصیات دیگری هم دارد، یکی از آنها که کاربرد زیادی هم دارد خصوصیات طول height و عرض width  می باشد که توسط آنها اندازه یک عکس را داخل صفحه می توانید کنترل کنید. مقیاس اندازه گیری طول و عرض بر حسب پیکسل Pixel  می باشد، اگر شما این خصوصیات را کنترل نکنید عکس در اندازه اصلی خود ظاهر می شود. بطور مثال شما می خواهید عکسی را وارد کنید که در صفحه باید به اندازه 100×100 فضا اشغال کند:

<img src="images/pic01.jpg" height="100" width="100">

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

Alignment

شما می توانید محل قرارگرفتن عکس را نسبت به عناصر اطراف خودش با خصوصیت align=" "تعیین کنید و می توانید کلمات left , right , top , middle , bottom  را برای این خصوصیت بکار برید . مثلا بصورت زیر

<img src="images/pic01.jpg"  align="middle">

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

<center><img src="images/pic01.jpg"></center>

 Border

اگر مایل هستید برای عکس کادر بگذارید می توانید از خصوصیت border=" "   استفاده کنید و آنرا برابر با یک عدد قرار دهید که هر چه این عدد بزرگتر باشد ، کادر دور عکس هم ضخیم تر است به صورت پیش فرض border="0"  است یعنی هیچ کادری مشاهده نمی شود.

Alt

 تا حالا متوجه شدید که در یک وب سایت هنگامی که نشانگر موس بر روی یک عکس که قرار می گیرد یک کادر متنی کوچک باز شده بنام tool tip و اطلاعاتی را راجع به آن عکس می دهد؟ پس شما هم اینکار را انجام دهید، خصوصیت alt="  "  را داخل تگ گذاشته و هر متنی را که جلویش بنویسید در صفحه هنگامی که موس بر روی عکس قرار گیرد ، زیرنشانگر نمایان می شود. بهتر است که شما همی شه این کار را انجام دهید چون مرورگرهایی وجود دارد که عکس را نمایش نمی دهد پس با اینکار بیننده از حضور آن عکس خبر دار می شود.

<img src="images/pic01.jpg"  alt="this is a picture">

hspace, vspace

 دو خصوصیت دیگر هست که حاشیه و فضای خالی دور عکس را کنترل می کند، hspace=" "برای حاشیه چپ و راست عکس وvspace=" " برای بالا و پایین. عددی را که وارد می کنید در مقیاس پیکسل است.

______________________________________________________

Image link

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

<a href="www.yahoo.com">  <img src="images/pic01.jpg">  </a>

______________________________________________________

<bdo>  </bdo>

این تگ جهت رعایت نوشتاری از راست به چپ و یا از چپ به راست می باشد که برای ما فارسی زبانان بسیار با ارزش است ایت تگ دارای خصوصیتdir=""  می باشد و با ltr یعنی از چپ به راست و rtl یعنی از راست به چپ مقدار دهی می شود.

______________________________________________________

<font>  </font>


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

face=" "  این خصوصیت نوع فونت را تعیین می کند که باید برابر با یکی از فونتهای استاندارد سیستم باشد .

 size=" "اندازه هر حرف را تعیین می کند که از اعداد یک تا هفت با علامت مثبت به نشانه افزاینده و با علامت منفی به نشانه کاهش سایز استفاده می شود .

  color=" "برای تعیین رنگ حروف از خاصیت استفاده می شود .

<big>  </big>

<small>  </small>

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

______________________________________________________

 <i>  </i> 

 برای نوشتن حروف بصورت کج italic  این تگ را بکار می بریم.

______________________________________________________

<u>  </u>

  این تگ خطی زیر کلمات خواهد کشیدو مخفف کلمه Underline است .

______________________________________________________

<strong>  </strong>

  این تگ هم مانند  <b> عمل می کند و متن را ذخیم تر نشان می دهد.

______________________________________________________

<acronym>   </acronym>

 کاربرد این تگ برای مختصرنویسی است یعنی اگر یک کلمه مانند HTML  دارید با استفاده از آن می  توانید کلمات کامل را در یک کادر کوچک به اسم tooltip  قرار دهید بطوریکه وقتی نشانه گرموس روی آن کلمه باشد این کادر باز شده و آنها را نمایش می دهد.کلمات کامل را باید در خصوصیت title=" "  قرار دهید.

<acronym title="Hypertext Markup Language"> HTML </acronym>

______________________________________________________

<del>  </del>

هنگامی که بخواهید یک مطلب را حذف کنید از این تگ استفاده می کنید و یک خطی روی متن بین آنها کشیده می شود که بطور معمول با تگ <ins> بکار می رود. این تگ دارای دو خصوصیت منحصر می باشد، cite=" " که می تواند آدرس یک فایل باشد تا توضیحی راجع به علت حذف آن مطلب بدهد و date=" " که تاریخ و زمان حذف را معین می کند.

______________________________________________________

لیست ها:

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

<ol>

<li> list 1

<li> list 2

</ol>

برای درست کردن لیست در یک صفحه از این تگها باید استفاده کنیم، بدین صورت که در آغاز قسمتی که می خواهیم لیست درست کنیم تگ <ol>را که مخفف ordered list می باشد را می نویسیم تا مرورگر بفهمد لیست از آنجا آغاز می  شود و سپس در ابتدای هر گزینه از لیستمان تگ <li>را اضافه می کنیم و در انتهای گزینه ها تگ پایان دهنده </ol>را می نویسیم.

Type : نوع شماره گذاری را مشخص می کند مثلا اعداد از 1 به بعد یا حروف رومی و غیره

<ol type="i">

______________________________________________________

 <ul>  <li>  </ul>

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

<ul type="disc">

______________________________________________________

<dl>  <dt> <dd>  </dl>

آخرین مدل، لیستهای توصیفی هستند که برای تعریف و توصیف یک کلمه بکار می روند که کلمه مشخص را با تگ <dt> و توصیف آنرا با <dd> بکار می برند.

<dl>
       <dt> Html         
<dd> Hypertext Markup Language.   
</dl>

______________________________________________________

Anchor

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

<a name="top">

در بین دو علامت " " و به جای کلمه top  هر اسمی  می توانید بکار برید این نکته را در ذهن داشته باشید که این تگ درمرورگر ظاهر نمی شود.اما تگ دیگری که نیاز است خود کد لینک است و بجای نوشتن آدرس فایل در خصوصیت href  شما نامی  را که انتخاب کردید به اضافه علامت # را می نویسید:

<a href="#top">top of the page</a>

 

______________________________________________________

mailto

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

<a href="mailto:email_address"> my email </a>

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

<a href="mailto:teacher.esoftware@gmail.com"> teacher.esoftware @gmail.com </a>

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

<a href="mailto: teacher.esoftware@gmail.com?subject=Test&body=Hello my friends"> teacher.esoftware@gmail.com </a>

______________________________________________________

تگ جدول :

جدولها یکی از بهترین و مفیدترین عنصرها در صفحات وب می باشند، با استفاده از آنها ما می  توانیم اطلاعات و عناصررا در یک صفحه سازمان دهی و مرتب کنیم . کلیه اطلاعات یا عناصر دیگر وب را می توانیم داخل ردیف ها یا ستون های یک جدول قرار دهیم بدون آنکه خطوط جدول مشخص باشد و یا در صورت نیاز خطوط آنها نمایان می شود. کمتر کسی را پیدا می کنید که از این  عنصر استفاده نکند و زمانیکه تجربه کافی برای طراحی یک سایت بدست آوردید به اهمیت این عنصر پی خواهید برد.تگ مشخصه جدول <table></table> می باشد. اما برای اضافه کردن ردیف به یک جدول از<tr></tr>و برای ستون از تگ <td></td> استفاده می کنیم. پس ساختار کلی یک جدول بدین  صورت می باشد:

<table>
     <tr>

   <td>this is a table1.</td>  

   <td>this is a table2.</td>  

    </tr>
</table>

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

border

خب برای اینکه بتوانیم یک جدول را در مرورگر خود ببینیم باید با خصوصیت  border=" " آشنا شویم. این خصوصیت دور جدول یک کادردرست می کند البته اگر این خصوصیت را برابربا صفر قرار دهیم یا آنرا ننویسیم کادر دور جدول در مرورگر نمایان نخواهد شد و هر چه عدد بزرگتری بگذاریم کادر ضخیم تری خواهیم داشت، در ضمن رنگ کادرهم با   bordercolor=" "  که برابر با عدد هگز رنگ است تعیین می شود. border ویژگیهای دیگری هم دارد، به طور مثال شما می توانید خصوصیت  frame=" "  را به تگ <table>  اضافه کرده و آنرا برابر با یکی از کلمات void, above, below, hsides, vsides,lhs, rhs, box  قرار دهید تا کادر دور جدول را کنترل کنید. این کلمات هر کدام یک قسمت از کادر را نمایان می کنند.

rule

ویژگی دیگری هم هست ولی بهتره اول یک جدول درست کنید تا مطلب جا بیافتد، برنامه Notepad را باز کنید و کد زیر را وارد کرده و به اسم Table.htm  ذخیره کنید:

<table border="4" bordercolor="#ff0000">
  <tr>
       <td>cell 01</td>

       <td>cell 02</td>
  </tr>
  <tr>
       <td>cell 03</td>

     <td>cell 04</td>
  </tr>
</table>

حالا خصوصیت rules=" "را به تگ<table> اضافه کنید و هر بار یکی از کلمات all, none, groups, rows, cols  را جلوی آن قرار دهید و فایل را دوباره ذخیره کنید تا تاثیر این خصوصیت را ببینید .

Alignment

  می توانید با استفاده از خصوصیت align=" "که در تگ  <td>می نویسید محل قرارگرفتن یک عنصر مانند متن را تعیین کنید که می توانید این خصوصیت را با کلمات    left, right, center, justify  مقداردهی کنید .

height, width

با خصوصیات height=" " , width=" "  هم اندازه طول و عرض یک جدول را می توان کنترل کرد که باید آنها را برابر با عدد در مقیاس پیکسل قرار دهید در ضمن شما می توانید از درصد % هم استفاده کنید مانند width="90%"  که این جدول نود درصد عرض یک صفحه را اشغال می کند.

bgcolor

 برای تعیین رنگ زمینه یک جدول ازbgcolor=" "  که با عدد هگز رنگها مقدار دهی می شود استفاده می کنیم. این خصوصیت را در تگ های <tr> و <td> هم می  توانید بکار برید .

cellspacing, cellpadding

 تگ <table> دو خصوصیت دیگر هم دارد که شما با بکار بردن آنها می توانید فاصله بین خانه های جدول را از هم کنترل کنید یعنی فضای خالی بین خانه ها اضافه کنید، این خصوصیت این است   cellspacing=" "و دیگری فاصله بین متن داخل یک خانه در جدول با لبه های چارچوب آن خانه است که خصوصیت cellpadding=" "  این وظیفه را به عهده دارد. هرچه مقداردهی عددی آنها بزرگتر باشد فاصله ها بیشتر خواهد بود

 header: <th> </th>

حالا که با درست کردن ردیف و ستون در جدول آشنا شدید، می توانید برای هر ستون و ردیف عنوان گذاری کنید و یک تیتر به بالای ستون یا به ابتدای یک ردیف اضافه کنید. در هر قسمت که شما به یک تیتر و عنوان نیاز داشتید   بجای   تگ <td> </td> از تگ <th> </th> استفاده کنید که در این حالت متن نوشته شده در آن خانه

/ 0 نظر / 60 بازدید