آموزی زبان HTML با شیوه Encoding

سیناساندیس · 13 سپتامبر 2012

در اینجا می خواهیم به ساختار شناسه ها یا همان تگها (tag) در HTML بپردازیم. یک تگ همیشه با علامت کوچکتر ریاضی یعنی این علامت > آغاز می شود و با علامت بزرگتر < به پایان می رسد. مثلاً تگی که باعث ایجاد زیرخط کلمات می شود اینطور نوشته می شود: این علامت را قبل از متنی که می خواهیم زیر آن خط کشیده شود قرار می دهیم. به این تگ ، تگ ابتدایی (Opening tag) می گویند، که عملیاتی را که شما می خواهید آغاز کنید شروع می کند. به منظور پایان دادن به زیرخط باید از یک تگ پایانی استفاده کنید. یک تگ پایانی با این علامت شروع می شود: /> بقیه تگ مانند تگ ابتدایی می باشد. برای درک بهتر این مطلب به مثال زیر توجه کنید:
Tags and their position
اگر بخواهید متن بالا را با زیرخط در مرورگر خود ببینید باید آنرا مطابق خط روبرو در ویرایشگر متن خود بنویسید:
tags and their position
نتیجه را به این صورت می بینید:
Tags and their position

سیناساندیس · 13 سپتامبر 2012

در HTML همه تگها به یک تگ پایانی نیاز ندارند. برای مثال تگی که برای وارد کردن عکس استفاده می شود از این قبیل تگهاست، که به این صورت می باشد:
<img src="myimage.gif">
البته بعداً در مورد این تگ توضیح خواهیم داد در اینجا فقط برای مثال این تگ را آوردیم. موارد دیگری هم با این وضعیت وجود دارند مثلاً که برای رفتن به خط بعدی استفاده می شود، <hr> که برای ایجاد یک خط افقی به کار می رود و که برای رفتن به پاراگراف بعدی استفاده می شود.
در ضمن نیاز نیست که حتماً تگها با حروف بزرگ نوشته شوند. مثلاً همان است. البته در نسخه های جدیدتر HTML توصیه می شود کدهای HTML با حروف کوچک نوشته در XHTML هم نوشتن کدها با حروف کوچک الزامی است. فضای خالی هم بین تگها تأثیری ندارد. مثلاً :
 متن زیرخط دار 
کد بالا همان نتیجه ای را می دهد که کد زیر دارد:
متن زیرخط دار
به این طریق هم اگر نوشته شود فرقی نمی کند:

متن زیرخط دار

سیناساندیس · 13 سپتامبر 2012

قالب پایه ای یک فایل HTML مانند زیر است. ببینید می توانید کاری را که تگهای این کد انجام می دهند حدس بزنید؟ البته همه آنها را بعداً توضیح می دهیم.

<html>
<head>
<title>html قالب اصلی</title>
</head>
<body>
هر چیزی که اینجا قرار گیرد در صفحه شما قابل دیدن است
</body>
</html>
برای درک بهتر این قسمت سعی کنید تگها را به صورت جفتی در نظر بگیرید (از جایی که باز می شوند تا جایی که بسته می شوند) اولین تگ <html> است که علامت شروع یک متن HTML است و تگ پایانی آن <html/> است که همانطور که ممکن است حدس زده باشید نشانه پایان متن HTML است. هر چیزی در HTML باید بین این دو تگ قرار گیرد. مانند متن، دیگر تگها، عکسها و... چون این دو تگ نشان دهنده آغاز و پایان صفحه شما هستند.

سیناساندیس · 13 سپتامبر 2012

تگ بعدی <head> است. این تگ مشخص کننده بخشی است که شما باید عنوان صفحه، کلمات کلیدی، و دیگر توضیحات خود برای این صفحه را در آن قرار دهید. این بخش با <head/> به پایان می رسد. در مثال بالا تنها قسمت HEAD عنوان صفحه بود که با TITLE مشخص می شود.

سیناساندیس · 13 سپتامبر 2012

تگ <title> به شما اجازه می دهد برای صفحه خود یک عنوان برگزینید. این قسمت مورد استفاده موتورهای جستجو قرار می گیرد و همان متنی است که به هنگام مشاهده صفحه در نوار عنوان مرورگر نشان داده می شود. تا هنگامی که این تگ در قسمت BODY قرار نگیرد در متن شما نشان داده نمی شود. برای پایان دادن به تگ عنوان از این تگ استفاده می شود: <title/> در مثال بالا عنوانی که برای صفحه نشان داده می شود قالب اصلی HTML است.

سیناساندیس · 13 سپتامبر 2012

تگ <body> بخشی را آغاز می کند که در صفحه مرورگر شما به نمایش در می آید. این قسمت جایی است که ما باید کار اصلی خود را در آن انجام دهیم. برای پایان دادن به این تگ از <body/> استفاده می کنیم. در مثال بالا متنی که در صفحه مرورگر دیده می شود به صورت زیر است (البته در اینجا برای نوشته زیر رنگ و فونت نیز انتخاب شده که در قسمتهای بعد به آنها خواهیم پرداخت) :
هر چیزی که اینجا قرار گیرد در صفحه شما قابل دیدن است
چیزی که در اینجا می بینیم متنی است که به صورت ساده نوشته شده و در طرف چپ صفحه قرار دارد.
در درس بعد در مورد چگونگی کار کردن با متنها بحث می کنیم.

سیناساندیس · 13 سپتامبر 2012

در این درس به کار با متنها می پردازیم. ابتدا با این تگ شروع می کنیم:
1- این تگ باعث می شود کلماتی که بین این تگ و تگ پایانی آن قرار دارند به صورت پر رنگ و بولد (Bold) دیده شوند. به مثال زیر توجه کنید:
متنی که اینجا قرار بگیرد به صورت بولد نمایش داده می شود
مثال بالا به صورت زیر دیده می شود:
متنی که اینجا قرار بگیرد به صورت بولد نمایش داده می شود

سیناساندیس · 13 سپتامبر 2012

بیایید با تگهای دیگری ادامه دهیم:
2- زیرخط Underline
این متن با زیر خط مشاهده می شود
این هم نتیجه:
این متن با زیر خط مشاهده می شود

سیناساندیس · 13 سپتامبر 2012

- حروف کج Italic
این متن به صورت مورب دیده می شود
و نتیجه به این صورت است:
این متن به صورت مورب دیده می شود

سیناساندیس · 13 سپتامبر 2012

- حروف خط خورده:
<strike>این متن به صورت خط خورده دیده می شود</strike>
متن در مرورگر به این صورت دیده می شود:
این متن به صورت خط خورده دیده می شود
5- وسط چین:
<center>این متن در وسط خط نوشته می شود</center>
نتیجه کد:
این متن در وسط خط نوشته می شود
شما می توانید بیشتر از یک فرمان را برای یک متن اجرا کنید. مثلاً وقتی که می خواهید متنی به صورت پر رنگ و کج نوشته شود. برای این کار هر دو تگ ابتدایی را برای متن در ابتدای آن و تگهای پایانی را در جایی که می خواهیم پایان پر رنگی و کجی متن باشد قرار می دهیم.
با این مثال توجه کنید:
این متن به صورت کج و پر رنگ دیده می شود
نتیجه هم به این صورت دیده می شود:
این متن به صورت کج و پر رنگ دیده می شود

سیناساندیس · 13 سپتامبر 2012

یا ترتیب قرار گرفتن تگهای پایانی مهم است؟ در پاسخ باید گفت در مثال بالا خیر، اما مواردی وجود دارد که ترتیب قرار گرفتن تگها مهم است مثلاً قرار گرفتن تگ پایانی <HTML/> قبل از <BODY/> اشتباه است. شما با تمرین و تجربه می توانید این نکته را فرا بگیرید. شما می توانید برای جلو گیر از اشتباه HTML را به صورت زیر بنویسید:


این متن به صورت پر رنگ و کج دیده می شود


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

سیناساندیس · 13 سپتامبر 2012

همان طور که دیدید متن بولد و ایتالیک زودتر از متن زیرخط دار به پایان رسید و این به این دلیل است که تگهای پایانی بولد ()و ایتالیک () زود تر نوشته شدند و انتهای متن فقط توسط تگ زیرخط () تحت تأثیر قرار دارد.
متنها به صورت پیش فرض در سمت چپ صفحه به نمایش در می آیند. اما با استفاده از <CENTER> می توان آنها را در وسط صفحه به نمایش در آورد. این تگ را هم می توان با دیگر تگها ترکیب کرد و نتایج جابی گرفت. به مثال زیر توجه کنید:
<center>به این مثال توجه کنید</center>
و این هم نتیجه آن:
به این مثال توجه کنید
شما با تمرین این بخش می توانید آمادگی ورود به درس بعد که در مورد سرفصل، پاراگراف، و خطوط است را به دست آورید.

سیناساندیس · 13 سپتامبر 2012

از تگهای سر فصل (HEADING) برای تیتر و عنوان مطالب استفاده می شود. به این مثالها توجه کنید:
<h1>سرفصل بزرگ</h1>
سرفصل بزرگ
<h2>سرفصل 2</h2>
سرفصل 2
<h3>سرفصل 3</h3>
سرفصل 3
<h4>در حال کوچک شدن</h4>
در حال کوچک شدن
<h5>کوچکتر</h5>
کوچکتر
<h6>بسیار کوچک</h6>
بسیار کوچک
از دستورات بالا می توانید برای عنوان مطالب استفاده کنید.

سیناساندیس · 13 سپتامبر 2012

قتی که تگ در متنی وارد می شود بقیه آن خط به خط بعد منتقل می شود. در حقیقت تگ یا همان Line Break کاری مشابه فشردن کلید Enter به همراه Shift را انجام می دهد. قابل ذکر است که این تگ نیازی به تگ پایانی ندارد. به یک مثال توجه کنید:
This is the first line Here is the second line
نتیجه مثال بالا به اینگونه است:
This is the first line
Here is the second line
مرورگر اصولاً تا وقتی که به کمبود فضا برای یک خط بر نخورد به خط بعدی نمی رود. اما تگ مرورگر را مجبور می کند به خط بعدی برود.مثلاً متن زیر را در ویرایشگر متن خود بنویسید و به صورت html ذخیره کنید، فقط یک خط را در مرورگر خود خواهید دید:
من،
یک خط
جدید می خواهم
نتیجه به این صورت خواهد بود:
من، یک خط جدید می خواهم
برای اینکه نتیجه ای مشابه متن نوشته شده در ویرایشگر متن داشته باشیم، باید متن را به این صورت بنویسیم:
من، 
یک خط 
جدید می خواهم
این هم نتیجه:
من،
یک خط
جدید می خواهم

سیناساندیس · 13 سپتامبر 2012

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

این هم پاراگراف جدید

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

پاراگراف اول


پاراگراف دوم 
ادامه پاراگراف دوم

این متن همان نتیجه ای را دارد که متن زیر دارد:
 پاراگراف اول

پاراگراف دوم 
ادامه پاراگراف دوم

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

سیناساندیس · 13 سپتامبر 2012

در این قسمت از درس به سراغ کار با فونتها و اندازه آنها می رویم.
اندازه فونت را می توان با دستور زیر تعیین کرد:
متنی که می خواهیم اندازه آنرا تعیین کنیم
به جای «x» عددی با علامت منفی یا مثبت قرار می گیرد. وقتی که می خواهیم یک متن بزرگتر دیده شود از علامت مثبت و زمانی که می خواهیم متن کوچکتر شود از علامت منفی استفاده می کنیم. به مثال زیر توجه کنید:
این متن بزرگتر دیده می شود
این هم نتیجه تغییر سایز فونت:
این متن بزرگتر دیده می شود
برای کوچکتر کردن متن نیز به همین صورت عمل می کنیم:
این متن کوچکتر دیده می شود
این هم متن کوچک شده:
این متن کوچکتر دیده می شود

سیناساندیس · 13 سپتامبر 2012

ن هم تعدادی مثال برای درک بهتر مطالب:
این متن با اندازه 4 نوشته شده است
این متن با اندازه 4 نوشته شده است
این متن با اندازه 3 نوشته شده است
این متن با اندازه 3 نوشته شده است
این متن با اندازه 2 نوشته شده است
این متن با اندازه 2 نوشته شده است
این متن با اندازه 1 نوشته شده است
این متن با اندازه 1 نوشته شده است
این متن با اندازه 1- نوشته شده است
این متن با اندازه 1- نوشته شده است
این متن با اندازه 2- نوشته شده است
این متن با اندازه 2- نوشته شده است
این متن با اندازه 3- نوشته شده است
این متن با اندازه 3- نوشته شده است

سیناساندیس · 13 سپتامبر 2012

برای تغییر رنگ متنها نیز می توانیم به روش زیر عمل کنیم، با این فرمان :

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

سیناساندیس · 13 سپتامبر 2012

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

سیناساندیس · 13 سپتامبر 2012

فرض کنید می خواهید رنگ و اندازه متنی را همراه با هم تغییر دهید. برای این کار می توانید از دو تگ استفاده کنید. اما به خاطر داشته باشید که هر دو را ببندید. مانند زیر:
متن بزرگ و طلایی
متن بزرگ و طلایی
همچنین می توانید از شناسه های size و color در یک تگ استفاده کنید. مانند زیر:
متن بزرگ و طلایی
متن بزرگ و طلایی
شما می توانید رنگ فونت را در تگ body تعریف کنید که بعداً به آن می پردازیم.

آموزی زبان HTML با شیوه Encoding

Registered User

Registered User

Registered User

Registered User

Registered User

Registered User

Registered User

Registered User

Registered User

Registered User

Registered User

Registered User

Registered User

Registered User

Registered User

Registered User

Registered User

Registered User

Registered User

Registered User

بک‌لینک