مقدمه ای در 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> استفاده کنید که در این حالت متن نوشته شده در آن خانه بصورت ضخیم ظاهر شده و از بقیه متمایز می شود.

colspan, rowspan

گاهی اوقات شما نیاز دارید تا چند خانه در یک ردیف یا یک ستون از جدول را ترکیب کنید تا یک خانه درست شود و بطور مثال یک تیتر و عنوان در آن قرار دهید که برای ترکیب خانه های یک ستون از خصوصیت rowspan=" " و برای یک ردیف از colspan=" " در تگ <td> استفاده می کنید و مقدار آنرا برابر با تعداد خانه هایی که باید یکی شوند، قرار می دهید.

caption

بطور معمول هر جدول دارای یک اسم و یا یک توضیح می باشد که آنرا با تگ <caption></caption> در می ان تگهای <table></table> مشخص می کنند. این تگ دارای خصوصیت align=" "  می باشد با کلمات top, bottom, left, center, right مقداردهی می شود.

thead, tbody, tfoot

اگر جدول شما دارای ستونها و ردیفهای زیادی است پس تکرار خصوصیات در هر تگ مربوطه بسیار دشوار است. شما می توانید بصورت گروهی این خصوصیات را کنترل کنید. برای کنترل ردیفها باید آنها را به سه قسمت تقسیم کرد، قسمت سرشامل فقط خانه های ردیف اول، بدنه شامل همه ردیفهای وسط و قسمت انتهایی شامل فقط خانه های آخرین ردیف، که قسمت سر را با <thead></thead> ، قسمت بدنه را با <tbody></tbody> و قسمت انتهایی را با <tfoot></tfoot> کنترل می کنیم. این تگ دارای خصوصیت align نیز می باشد.

colgroup

همچنین با تگ <colgroup></colgroup> می توانید خصوصیات کلیه ستونهای یک جدول را کنترل کنید که این تگ علاوه بر خصوصیات گفته شده در این بخش دارای خصوصیت span=" " نیز می باشد که توسط آن تعداد ستونهایی که باید کنترل شوند را تعیین می کنید.

summery

یک خصوصیت دیگر نیز برای تگ <table> هست بنام summery=" " که توصیفی از جدول می باشد ولی در جایی نمایش داده نمی شود. این خصوصیت برای مرورگرهایی که فقط متن را نمایش می دهند و یا مرورگرهای مخصوص افراد ناتوان ، مفید می باشد که بهتر است از آن استفاده کنید.

 به این موضوع هم توجه داشته باشید که شما می توانید داخل یک جدول، جدول دیگری هم درست کنید یعنی داخل هرخانه جداگانه یک جدول بسازید که به این روشNested table  گفته می شود.

______________________________________________________

<form> تگ

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

<input> تگ

در تگ فرم می توان از این تگ استفاده نمود و انواع دکمه ھای رادیویی و فیلد ھا ر ا

ساخت

Textbox ایجاد

<html>

<head>

<title> Test </title>

</head>

<body>

<form>

<input type="text" name="firstname">

نام:

<br>

<input type="text" name="lastname">

نام خانوادگی:

</form>

</body>

</html>

ایجاد دکمه ھای رادیویی

<form>

<input type="radio" name="s" value="male"> مرد <br>

<input type="radio" name="s" value="female"> زن <br>

</form>

 

ایجاد جعبه انتخاب

<form>

<input type="checkbox" name="male"> گزینه ١ <br>

<input type="checkbox" name="female"> گزینه ٢ <br>

</form>

 

 

ایجاد یک دکمه

<form>

<input type="button" name="Button1"><br>

<input type="button" name="Button2"><br>

یا

<button>OK</button>

</form>

ساخت تکست باکس برای کلمه عبور

<form>

<input type="text" name="user"> نام کاربری <br>

<input type="password" name="pass"> رمزعبور

</form>

 

Text area

<form>

<textarea name="text1" rows="5" cols"20">

این یک تست است

</textarea>

</form>

Dropdown

<form>

<select name="country">

<option value="Iran"> ایران

<option value="USA"> آمریکا

<option value="Italy"> ایتالیا

</select>

</form>

ایجاد دکمه ارسال

آدرس می کند محل ارسال فایل را مشخص Action مشخصه

<form name="input" action="action.asp" method="post">

<input type="text" name="user">

<input type="submit" value=" <"ارسال

<input type="reset" value=" <"انصراف

Submit استفاده از دکمه ھای تصویری به جای

<input type="image" src="ok.gif" name="send">

ایجاد دکمه ای جهت جستجو در کامپیوتر کاربر

<form>

<input type="file" value="file">

</form>

ایجاد یک حاشیه برای فرم

<html>

<head>

<title> Test </title>

</head>

<body>

<fieldset>

<legend> اطلاعات </legend>

<form>

<input type="text" name="user">

</form>

</fieldset>

</body>

</html>

 

 

 

 

قاب هارا در پنجره مرورگر نمایش دھید HTML با استفاده از قاب ھا می توانید بیش از یک فایل را نمایش دهید.

<frameset> تگ

این تگ مشخص کننده این است که پنجره مرورگر چگونه بین قاب ھا تقسیم شود

<frame> تگ

این تگ مشخص کننده قاب ھا یا ھمان فایل ھای اچ تی ام ال است

<html>

<head>

<title> Test </title>

<frameset cols="25%,25%,25%,25%">

<frame src="test1.html">

<frame src="test2.html">

<frame src="test3.html">

<frame src="test4.html">

</frameset>

</head>

<body>

</body>

</html>

در این مثال مرورگر ما به ۴ قاب که ھرکدام ٢۵ ٪ از فضای مرورگر را اشغال می کند تبدیل

<frame> رابه noresize میشود برای جلوگیری از تغییر سایز ھرقاب توسط کاربران عنصر

اضافه میکنیم

<frame src="test.html" noresize="noresize">

<iframe> تگ

با استفاده از این تگ می توان یک فایل اچ تی ام ال را در داخل یک قاب در ھرکجای متن

قرار دھید

<html>

<head>

<title> Test </title>

</head>

<body>

<iframe src="test.html">

</iframe>

این یک تست است

</body>

</html>

 

نحوه قرار دادن فایل ھای فلش

<object>

<embed type="application/x-shockwave-flash" src="/flash/test.swf"

width="128" height="128">

</object>

 

 

<script> تگ

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

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

غیره میشود

<script language="javascript" src="test.js">

</script>

<base> تگ

لینک ھای صفحه مشخصه

<head>

<base target="_blank">

</head>

<link> تگ

جهت افزودن فایل css

<head>

<link rel="stylesheet" type="text/css" href="test.css">

</head>

افزودن فایل صوتی به زمینه صفحه :

با اضافه کردن تگ <bgsound> به سورس کد صفحه وب، می  توانید آهنگ یا صدایی را در زمی نه صفحه وارد کنید تا هنگامی که بیننده صفحه را باز می  کند آن فایل بدون نیاز به برنامه کاربردی دیگری  پخش شود. این تگ در حال حاضر کاربردی ندارد چون فقط مرورگراینترنت اکسپلورر نسخه های 5.5 به پایین آنرا پشتیبانی می  کنند. این تگ دارای دو خصوصیت ، src برای آدرس دهی فایل صوتی و loop برای کنترل تکرار دفعات پخش می  باشد.

<bgsound src=”mymusic.mid” loop=”2”>

______________________________________________________

 <meta>

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

http-equiv=” “, name=” “ , content=” “

برای معرفی کلمات کلیدی سایت باید خصوصیت  http-equiv=”keyword” قرار دهیم و کلمات مورد نظر را در خصوصیت content=” “  وارد کنیم،

<meta http-equiv=”keyword” content=”html, web, amoozesh, amouzesh”>

همچنین می توانید نوع رمزگذاری encoding مرورگر را در این قسمت معین کنید که برای بکار بردن حروف فارسی باید از utf-8 استفاده کنید که در قسمت فارسی نویسی توضیح خواهم داد.

<meta http-equiv=”content-type” content=”text/html;charset=utf-8”>

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

<meta name=”author” content=”your-name”>

اگر شما نمی خواهید که صفحه ای در هارد دیسک کاربر سایت شما ذخیره شود تا بتوان آنرا بصورت offline  هم ببینند، از این تگ باید استفاده کنید:

<meta name=”pragma” content=”no-cache”>

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

<meta http-equiv=”refresh” content=”5”>

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

<meta http-equiv=”refresh” content=”5;url=http://www.sitename.com/page01.htm”>

______________________________________________________

 

تعیین الگو و style :

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

برای تعیین و تعریف یک الگو ابتدا باید selector را مشخص و بنویسیم مانند h1 سپس خصوصیات و مقادیر آنها را بین دو علامت { } بگذاریم که طرز نوشتن خصوصیت و مقدار آن بین { } به این ترتیب می باشد:

ابتدا خصوصیت را نوشته سپس علامت :   می گذاریم  و بعد مقدار مشخصه آنرا می نویسیم ،

h1 { color:green }

اگر بخواهیم چند خصوصیت را به یک selector  نسبت دهیم ، بعد از هر کدام یک ;   می گذاریم،

h1 { color:green; text-align:center }

 

______________________________________________________

روشهای تعریف الگو و style :

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

1- به عنوان یک الگوی خارجی که اطلاعات در یک فایل نوشته می شود و با پسوند  .css ذخیره می شود که در تگ <link> داخل قسمت head آدرس دهی و فراخوانده می شود.

2- style را می توانیم در قسمت  head نوشته و جاسازی کنیم که با تگهای<style></style> مشخص می شوند.

3- با قرار دادن style به عنوان خصوصیت در یک تگ و مقدار دهی آن. مانند تگ زیر:

<div style=”color:green”>

 

نکته: اگر برای یک selector به چند روش style تعیین شود، آن الگویی که به تگ نزدیکتر است اجرا خواهد شد، پس طبق این اصل روش سوم نسبت به بقیه موثرتر است.

 

 


موضوعات مرتبط:

برچسب‌ها:


تاريخ : | | نویسنده : مدیر |
.: Weblog Themes By SlideTheme :.