خلاصه ای از HTML

خلاصه ای از نکات HTML با توضیح مختصر به همراه مثال .

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

مشاهده بخش اول

مشاهده بخش دوم

* تگ <hn>

از تگهای سر فصل (HEADING) برای تیتر و عنوان مطالب استفاده می شود. به این مثالها توجه کنید:

<h1>سرفصل بزرگ</h1>

<h2>سرفصل 2</h2>

<h3>سرفصل 3</h3>

<h4>سرفصل 4</h4>

<h5>سرفصل 5</h5>

<h6>بسیار کوچک</h6>

پیش نمایش :

سرفصل بزرگ

سرفصل 2

سرفصل 3

سرفصل 4

سرفصل 5

بسیار کوچک

---

* تگ Break Line :

وقتی که تگ <br> در متنی وارد می شود بقیه آن خط به خط بعد منتقل می شود.

البته بهتره برای استاندارد تر بودن کدها و هماهنگی با XHTML تگ هایی که تگ پایانی ندارن رو یه اسلش به آخر تگ اضافه کنید مثلا <br>  رو بنویسید </ br>  یا <... img> رو بنویسید </ ... img>

مثال :

First line <br>
Second line <br />
Third line

پیش نمایش :

First line
Second line
Third line

---

* تگ <font>

از این تگ برای تعیین فرمت و تغییر در متن استفاده می شود که بعضی از مهمترین خصیصه (شناسه) (Attribute) های آن در زیر آمده است :

» size : برای تعیین سایز متنی که بین تگ فونت قرار گرفته است .

» color : تعیین رنگ که مقدار آن میتواند نام رنگ یا کد رنگ مربوطه باشد .

» face : تعیین نوع فونت که مقدار آن ، نام فونت مورد نظر است .

تذکر : فونتی که تعیین میکنین  برای اجرا شدن باید روی کامپیوتر افراد قرار داشته باشه ، پس سعی کنید از فونت های استاندارد که روی همه کامپیوتر ها وجود دارند استفاده کنید .

» dir : برای رفع مشکل چپ به راست یا راست به چپ کردن نماد ها (با توجه به زبانی که مینویسین) استفاده میشه که دو مقدار rtl و ltr رو میگیره .

وقتی یه متن فارسی مینویسین مقدار رو برابر rtl قرار بدین .  (right to left)

مثال (تفاوت rtl و ltr ) :

<font size="3" face="Tahoma" color="green" dir="rtl">
<font color="red">
پرسپولیس
</font>
سروره !
</font>

<br />

<font size="3" face="Tahoma" color="green" dir="ltr">
<font color="#ff0000">
پرسپولیس
</font>
سروره !
</font>

پیش نمایش :

پرسپولیس سروره !
پرسپولیس سروره !

---

* تگ <img>

برای قرار دادن عکس در صفحه به کار میرود .

برخی از خصیصه (شناسه) های مهم :

» src : حاوی آدرس عکس که میتواند بر روی کامپیوتر یا روی فضای اینترنت باشد .

» align : برای تنظیم نحوه قرار گرفتن عکس در صفحه و همچنین نوشتن متن در کنار عکس ، که میتواند پارامتر های center , right , left و ... را بپذیرد . (از این شناسه در تگ های زیادی استفاده میشود) 

نکته : برای قرار دادن عناصر html مانند عکس ، جدول و ... در وسط صفحه ، سمت راست و ... میتوان از تگ <center>  یا تگ زیر نیز استفاده کرد :

<"div align="center>

...

<div/>

در کل از تگ <div> برای افزودن ویژگی هایی به یک قسمت از صفحه html استفاده میشه .

» alt : استفاده از متن جایگزین برای تصاویر . موقعی که مرورگر به هر دلیلی نتواند عکس را باز کند (مثلا تصویر از روی اینترنت پاک شده باشد یا پایین بودن سرعت اینترنت) این متن بجای عکس نمایش داده خواهد شد . همچنین در موتورهای جستجو برای پیدا کردن عکس ، این متن ایندکس میشود .

» title : با قرار گرفتن ماوس بر روی تصویر ، متنی که درون این تگ استفاده شده ، درون یک کادر کنار ماوس نمایش داده میشود .

» width و height : تغییر نمایش طول و عرض تصویر برحسب پیکسل هستند

» vspace و hspace : به ترتیب فاصله افقی و عمودی تصویر با اجزای کناری (مانند متن) را برحسب پیکسل مشخص می کنند .

مثال :

<div align="center">
<img src="http://s3.picofile.com/file/7386898602/flower.jpg" alt="Flower-Picture" title="for example" width="220" height="160" />
</div>

پیش نمایش :

---

ایجاد لینک :

تگ <a> نشانه لینک است. شناسه href مشخص کننده آدرس لینک می باشد .

چند شناسه مهم دیگر :

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

» target : مکان باز شدن لینک را تعیین میکند . پراستفاده ترین مقدار آن blank_ میباشد که باعث میشود لینک در یک پنجره جدید باز شود . همچنین اگر در صفحه از فریم استفاده شده باشد نام آن فریم را وارد میکنیم تا لینک درون آن فریم باز شود .

مثال :

<a href="http://itzenderood.blogsky.com" target="_blank" title="صفحه اصلی">
وبلاگ دانشجویان آی تی دانشگاه اصفهان
</a>

پیش نمایش :

وبلاگ دانشجویان آی تی دانشگاه اصفهان

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

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

اگر بخواهید رنگ پیشفرض لینکها  را در صفحه خود تغییر دهید (مانند تغییر رنگ پیش فرض متن) باید تگ body را پیدا کنید.

در تگ body شناسه link را که مقدار آن کد هگزادسیمال رنگ مورد نظر یا نام آن است وارد کنید .

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

با شناسه های alink و vlink همین کار را می توانید برای لینکهای فعال (active) - یعنی لینکی که الان درون آن قرار دارید - و لینکهای بازدید شده (visited) تکرار کنید.

مانند زیر: 

<body link="red" alink="yellow" vlink="violet">

پیش نمایش :

نداریم !

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

ساختن لینک با استفاده از تصاویر

کافیست از تگ <img> بین تگ <a> استفاده کنیم .
اغلب مرورگرها به تصاویری که به عنوان لینک استفاده می شوند یک خط حاشیه (border) در لبه های تصویر اضافه می کنند. برای اینکه این خط دیده نشود شناسه border=0 را به تگ img اضافه می کنیم :

<a href="http://itzenderood.blogsky.com" target="_blank">
<img src="picture_Address" border="0" />
</a>

ساختن لینک برای آدرس ایمیل :

اگر لینک ، یک آدرس ایمیل بود به جای عبارت //:http از :mailto استفاده می کنیم . 

اگر روی این نوع لینک کلیک کنید مرورگر شما پنجره ای تازه (پیشفرض نرم افزار Outlook) برای ارسال ایمیل باز می کند که آدرس دریافت کننده در آن تایپ شده است.

شما میتوانید همچنین یک موضوع هم برای ایمیل در لینک قرار دهید تا بیننده مجبور نباشد خودش چیزی بنویسد .
این کار ار می توانید با افزودن علامت سوال به انتهای آدرس ایمیل و نوشتن =subject بعد از آن انجام دهید. مانند زیر:

<a href="mailto:[e-mail]?subject=this is the subject">متن لینک</a>

با کلیک کردن بر روی این لینک صفحه ای برای فرستادن ایمیل باز می شود که قسمت آدرس(to) و قسمت موضوع (subject) در آن کامل شده است و آماده ارسال است.

به جز اضافه کردن موضوع شما می توانید چیزهای دیگری را هم اضافه کنید.

برای مثال شما میتوانید یک رونوشت (Carbon Copy) از پیام را به همراه آن برای کس دیگری بفرستید. یا یک نسخه مخفی را برای دیگری بفرستید. یا هر دوی اینها را به کار ببرید و باهم ترکیب کنید و...

برای فرستادن یک رونوشت از ایمیل باید بعد از علامت سوال از فرمان =cc استفاده کرده و بعد آدرس ایمیل کسانی که قرار است رونوشت را دریافت کنند بنویسید. (اگر بیش از یک آدرس ایمیل بود آن ها را با , (کاما) از هم جدا کنید) مثلا :

<a href="mailto:[e-mail]?cc=[e-mail], [e-mail]">متن لینک</a>

اگر می خواهید بیش از یکی از این فرمانها را در یک لینک استفاده کنید باید بعد از علامت سوال ؟ و فرمان اول ، بقیه ی فرمان ها را با علامت & از یکدیگر جدا کنید .

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

<a href="mailto:[e-mail]?subject=learn html&cc=[e-mail]">متن لینک</a>

پیش نمایش :

متن لینک

---

شناسه های دیگر تگ <body> :

وقتی که شما یک صفحه HTML می نویسید می توانید شناسه های زیادی به تگ <body> اضافه کنید .

اگر از شناسه ای استفاده نکنید این گزینه مطابق پیش فرض مرورگر تنظیم می شود. در زیر توضیحی برای برخی از شناسه های تگ <body> آورده شده است :

» bgcolor : این شناسه رنگ زمینه صفحه شما را تغییر می دهد. فقط کافیست اسم رنگی را که می خواهید یا معادل هگزادسیمال آنرا وارد کنید . گزینه پیش فرض این ویژگی معمولاً سفید یا خاکستری است.

» text : رنگ پیشفرض متن را در صفحه شما مشخص میکند . گزینه پیش فرض این ویژگی مشکی است.

» background : این شناسه یک عکس را به عنوان زمینه برای صفحه شما قرار می دهد. اگر شما از این شناسه استفاده کنید تصویر زمینه ای که انتخاب کرده اید جایگزین هر رنگی که به عنوان زمینه انتخاب کرده بودید می شود. اگر از این شناسه استفاده نکنید مرورگر از رنگی که به عنوان زمینه انتخاب کرده اید استفاده می کند و در صورت عدم انتخاب رنگ از رنگ پیش فرض خود استفاده می کند.

» link : این شناسه رنگ تمام لینکهای باز نشده در صفحه را تغییر می دهد. گزینه پیش فرض برای لینکهای باز نشده معمولاً رنگ آبی است. (قبلا هم گفته شد)

» alink : این شناسه رنگ لینکهای فعال را در صفحه شما تعیین می کند. این لینکها آنهایی هستند که به وسیله کاربر بر روی آنها کلیک شده است. (قبلا هم گفته شد)

» vlink : این شناسه رنگ لینکهای باز شده را در صفحه تعیین می کند. گزینه پیش فرض این ویژگی بنفش است. (قبلا هم گفته شد)

مثال :

<body bgcolor="green" text="blue" link="yellow" alink="red" vlink="white" background="image.gif">

---

ایجاد کامنت :

توضیحات ( کامنتها ) می توانند وقتی که در حال نوشتن صفحه خود هستید به شما کمک کنند و در مرورگر به کاربران نمایش داده نمیشوند . دقیقا مانند */ یا // در سی پلاس پلاس . برای ایجاد کامنت بصورت زیر عمل میکنیم :

مثال :

<!--
این یک کامنت است
که در مرورگر نمایش داده نمی شود
-->

پیش نمایش :

انتظار که نداشتید چیزی نمایش داده بشه ؟!

---

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

* تگ <marquee> : برای ایجاد متن (عنصر) متحرک در صفحه استفاده میشود

این تگ نیز میتواند خصوصیاتی داشته باشد ، از جمله :

» loop : حاوی یک عدد است برای تعیین تعداد حرکت متن (اگر infinite یا 1- وارد کنید تا وقتی که صفحه باز است این حرکت انجام می شود)

» bgcolor : تعیین رنگ پس زمینه

» direction : جهت حرکت متن از بالا یا پایین یا سمت چپ یا راست (میتواند پارامترهای up , down , right , left را بپذیرد)

» width : می توانید عرض متن متحرک خود را تعیین کنید. در این شناسه می توانید از مقیاس پیکسل و یا در صد استفاده کنید.

» height : ارتفاع متن متحرک (اگر direction را up یا down انتخاب کرده اید)

مثال :

<marquee direction="right" loop="infinite" bgcolor="yellow" width="50%">
متن خود را اینجا بنویسید
</marquee>

پیش نمایش :

متن خود را اینجا بنویسید

نکته 1 : برای متوقف کردن و دوباره شروع به حرکت کردن متن با حرکت ماوس بر روی آن ، می توان از دو متد ()stop و ()start جاوا اسکریپت با استفاده از دو رویداد onmouseout و onmouseover کمک گرفت .

ابتدا این دو مورد رو بدونید :

onmouseover=script : وقتی ماوس بر روی عنصر مورد نظر قرار بگیره script (کد جاوا اسکریپت) اجرا میشه .

onmouseout=script : وقتی ماوس از روی عنصر مورد نظر کنار بره script (کد جاوا اسکریپت) اجرا میشه .

مثال :

<marquee direction="right" loop="infinite" bgcolor="#FFCCCC" width="50%" onmouseover="this.stop()" onmouseout="this.start()">
ماوس را بر روی این متن قرار دهید
</marquee>

پیش نمایش :

ماوس را بر روی این متن قرار دهید

نکته 2 : بجای متن میتونید عناصر دیگه ای مثل عکس یا ... نیز قرار بدید .

---

* تگ <blink> :
با استفاده از این تگ میتونید متنی رو بصورت چشمک زن دربیارید . البته ممکنه روی بعضی از مرورگرها مثل نسخه های قدیمی تر IE کار نکنه .
اگه این تگ به جا استفاده بشه می تونه توجه بیننده رو به نکته خاصی جلب کنه اما اگه به جا استفاده نشه می تونه  آزار دهنده باشه.
مثال :

this is an
<blink>
<font color="red">
Important
</font>
</blink>
message !

پیش نمایش :

this is an Important message !

امیدوارم مفید باشن

ادامه دارد ...