امتیاز موضوع:
  • 1 رأی - میانگین امتیازات: 5
آموزش تگ های مهم و کاربردی HTML
#1
سلام
تصمیم دارم در این تاپیک با تعدادی از تگ های HTML آشناتون کنم. اما قبلش یه مقدمه ای بگم که اصلا HTML چی هست، در پست بعدی میریم سراغ تگ ها.
HTML (اچ تی ام ال) مخفف عبارت Hyper Text Markup Language یا زبان نشانه گذاری فوق متن هست.
حتما می دونید که وقتی شما یه آدرسی رو در نوار آدرس مرورگرتون وارد می کنین (مثلا http://www.yahoo.com) و اینتر می زنین یه درخواستی رو به یه سروری ارسال کردین. به این درخواست میگن HTTP Request. در اینجا شما سرویس گیرنده یا client (کلاینت) هستین. در سرور یه سری کدها اجرا میشه (مثلا کدهای PHP یا ASP یا ...) و بعد نتیجه اون کدها به صورت HTML به مرورگر بر میگرده (HTTP Responce) و شما می تونین یه صفحه ای رو ببینین. به عبارت دیگر کدهای سمت سرور برای مرورگر قابل فهم نیست و مرورگر فقط HTML میفهمه و اونا رو برای شما نمایش میده و شما می تونین مثلا یه متن، عکس یا جدول رو در صفحه ببینین.

[تصویر:  136941170223359_http3.png]

پس HTML در چیدمان صفحات وب به ما کمک می کنه.
HTML یه زبان برنامه نویسی به حساب نمیاد و یک زبان نشانه گذاری هست. از یه سری تگ (Tag) تشکیل شده و هر تگ میتونه خصوصیاتی داشته باشه.
برای نمایش هر عنصر مثل جدول، لینک، عکس و ... باید از تگ مخصوصش استفاده کرد. مرورگر با رسیدن به اون تگ اونو میفهمه و برای شما نمایشش میده.
خب، حالا کدهای HTML رو کجا بنویسیم؟
تو یه ویرایشگر ساده مثل Notepad ولی باید فایل رو با پسوند html ذخیره کنیم تا نتیجه رو ببینیم.
اگر با ادامه آموزش موافقین با تشکراتون اعلام کنین.
روزتان را با تکه شکسته های دیروز آغاز نکنید. هر روزی که بیدار می شویم، اولین روز از باقی عمرمان است.
پاسخ
#2
بسیار مطلب مهم ، جالب و کاربردی ای هست
با تشکر از angel عزیز موضوع مهم شد.

تماس با مدیریت انجمن...

Ei8ht.ir@gmail.com

admin@ei8ht.ir
پاسخ
#3
منظور از تگ چیه؟
یک تگ همیشه با علامت کوچکتر ریاضی یعنی این علامت > آغاز میشه و با علامت بزرگتر < به پایان می رسه.
مثلا <b> تگی هست که برای bold کردن متن استفاده میشه. متنی رو که میخوایم bold بشه به این صورت می نویسیم:

کد:
<b>This is a text.</b>

به <b> تگ ابتدایی (opening tag) و به </b> تگ پایانی (closing tag) میگن. اغلب تگ های HTML تگ پایانی هم نیاز دارن ولی چند تاشون از این قاعده مستثنا هستن مثل <img> که بعد دربارش توضیح میدم. بریم سر اصل مطلب:

notepad رو باز کنید و این کدها رو داخلش بنویسید:

کد:
<html>
<title>MY website</title>
<body>
<h1>My First Heading</h1>
<p>My first paragraph.</p>
</body>
</html>

فایل رو با پسوند html ذخیره کنید. (در پنجره save as در کادر نام فایل پسوندش رو هم بنویسید مثلا a.html)
حالا یه فایل HTML دارین. بازش کنین و نتیجه رو ببینین.
می بینین که متنی که بین <title> و </title> نوشته شده در نوار عنوان ظاهر شده و چیزایی که بین <body> و </body> نوشته شده بدنه صفحه رو ساخته.

1) تیترها

تگ های <h6>، <h5>، <h4>، <h3>، <h2>، <h1> برای تیترها (heading) استفاده میشن.
متن بین <h1> و </h1> نوشته میشه نسبت به متنی که بین <h2> و </h2> نوشته میشه بزرگتره و به همین ترتیب تا آخر. یعنی h6 از همه کوچیکتره.
این کد رو در قسمت body بنویسین تا نتیجه رو ببینین:

کد:
<h1>This is a heading</h1>
<h2>This is a heading</h2>
<h3>This is a heading</h3>

2) پاراگراف ها

پاراگراف ها در HTML با تگ <p> تعریف میشن.

کد:
<p>This is a paragraph</p>
<p>This is another paragraph</p>

مرورگرها به صورت خودکار یک خط خالی قبل و بعد از هر پاراگراف قرار میدن.

نکته: HTML فاصله (space) و اینتر نمیشناسه. یعنی این دو تا متن یه جور نمایش داده میشن و تو یک خط:
کد:
HTML is good
HTML is                     good

پس اگر بخوایم متنی رو در خط بعد بنویسیم چیکار باید بکنیم؟ میتونیم از تگ <br> استفاده کنیم. این تگ حکم اینتر رو داره. اگر بخوایم کد بالا رو طوری بنویسیم که دو جمله پشت سر هم نوشته نشه، باید این طوری بنویسیم:

کد:
HTML is good<br>HTML is good

<br> از تگ هایی هست که تگ پایانی لازم نداره.

البته راه دیگه ای هم برای این کار وجود داره، یعنی اگر بخوایم به HTML بفهمونیم که یک متن رو دقیقا به همون شیوه ای که نوشتیم نمایش بده (با فاصله ها و اینتر) باید اون متن رو بین تگ <pre> و </pre> قرار بدیم.

3) درج لینک (پیوند)

برای قرار دادن لینک از تگ <a> استفاده می کنیم. همونطور که می دونید هر لینکی یه عنوان داره و یه آدرس که اگر رو عنوانش کلیک بشه، منتقل میشیم به اون آدرس. این کدها رو در body بنویسین تا بهتر متوجه بشین:

کد:
<a href="http://www.ei8ht.ir">F@RID Forum</a>
یا اینجوری:
کد:
To visit our forum click<a href="http://www.ei8ht.ir">here</a>

همونطور که دیدید فقط قسمتی که میخوایم لینک بشه رو بین <a> و </a> میذاریم. متن هایی که بین هیچ تگی نمیذاریم همونجوری نوشته میشه.
تگ <a> نسبت به تگ هایی که تا حالا دیدیم یه تفاوتی داره. یه چیزایی اضافه تر داره. اون href که می بینید یک خاصیته. هر تگی ممکنه چند تا خاصیت داشته باشه که با یک فاصله از هم جدا میشن.
روزتان را با تکه شکسته های دیروز آغاز نکنید. هر روزی که بیدار می شویم، اولین روز از باقی عمرمان است.
پاسخ
#4
4) درج عکس

در HTML برای قرار دادن تصویر از تگ <img> استفاده میشه. <img> نیازی به تگ پایانی نداره.
این کد رو در قسمت body بنویسید:

کد:
<img src="image1.jpg" alt="Ei8ht Forum" width="304" height="228">

در اینجا تگ img چهار تا خاصیت داره. خاصیت هایی مثل width، height و alt اختیاری اند ولی src باید حتما ذکر بشه.
src: مسیر و اسم عکس مورد نظر
در اینجا که مسیر تصویر ذکر نشده و فقط اسمشو می بینین به این خاطره که عکسمون دقیقا تو همون مسیریه که فایل HTML مون هست. مثلا هر دو تو درایو D هستن.
فرض کنید عکس مورد نظر تو درایو e، فولدر images باشه. باید اینجوری بنویسیم:

کد:
<img src="e:\images\image1.jpg">

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

width و height هم که به ترتیب پهنا و ارتفاع عکس رو تعیین می کنن.

خب، در این پست، تگ <img> و در پست قبلی تگ <a> آموزش داده شد. به عنوان تمرین می تونید یک عکس رو به صورت لینک نمایش بدید، یعنی اگر روی عکس کلیک شد، بریم به سایت گوگل. اگر کسی مطالب رو خونده، کد پیشنهادی شو بنویسه. تا پست بعد ...
روزتان را با تکه شکسته های دیروز آغاز نکنید. هر روزی که بیدار می شویم، اولین روز از باقی عمرمان است.
پاسخ
#5
دوستان ، مدیران و کاربران عزیز سعی کنین در این تاپیک ها و تاپیک های مشابه شرکت داشته باشین به دردتون میخوره.

این هم جواب تمرین...

کد:
<a href="http://google.com"><img src="1.jpg" width="238" height="118" border="0"></a>

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

تماس با مدیریت انجمن...

Ei8ht.ir@gmail.com

admin@ei8ht.ir
پاسخ
#6
با تشکر از Farid عزیز. جواب کاملا درسته.
و پوزش بخاطر وقفه پیش اومده در تاپیک

5) درج جدول

جدول ها در HTML با تگ <table> تعریف میشن.
هر جدول چندین سطر داره که با تگ <tr> (مخفف table row) تعریف می کنیم.
هر سطر از چند خونه یا سلول ساخته میشه که با تگ <td> (مخفف table data) تعریف میشه.
حواسمون هست که هر کدوم از این تگ ها تگ پایانی هم دارن. مثلا یه سطر که تموم شد باید </tr> بذاریم یا تعریف جدول که تموم شد </table> میذاریم.
این کد رو بنویسین و نتیجه رو ببینین:

کد:
<html>
<body>

<table border="1">
  <tr>
    <td>January</td>
    <td>$100</td>
  </tr>
  <tr>
    <td>February</td>
    <td>$80</td>
  </tr>
</table>

</body>
</html>


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

تگ <th>
بهتره جدول یه سطری داشته باشه که عنوان هر ستون رو نشون بده (اولین سطر جدول)
برای این منظور به جای استفاده از <td> از <th> استفاده می کنیم. (مخفف table header)
همون کد بالا رو یه تغییر میدیم تا فرق بین <td> و <th> رو به خوبی متوجه بشیم:

کد:
<html>
<body>

<table border="1">
  <tr>
    <th>Month</th>
    <th>Savings</th>
  </tr>
  <tr>
    <td>January</td>
    <td>$100</td>
  </tr>
  <tr>
    <td>February</td>
    <td>$80</td>
  </tr>
</table>

</body>
</html>


تگ <caption>
این کد رو در قسمت body بنویسید:

کد:
<table border="1">
  <caption>Monthly savings</caption>
  <tr>
    <th>Month</th>
    <th>Savings</th>
  </tr>
  <tr>
    <td>January</td>
    <td>$100</td>
  </tr>
</table>

تگ <caption> برای این استفاده میشه که جدولمون یه عنوان کلی داشته باشه.

ادامه دارد ...
روزتان را با تکه شکسته های دیروز آغاز نکنید. هر روزی که بیدار می شویم، اولین روز از باقی عمرمان است.
پاسخ
#7
فراموش کردم در پست قبل بگم که در هر خونه جدول (داخل تگ <td>) به غیر از متن معمولی می تونیم هر چیزی مثل عکس، لینک یا حتی یه جدول دیگه قرار بدیم.

6) لیست ها

در HTML دو نوع لیست می تونیم تعریف کنیم: لیست مرتب و لیست نامرتب

کد:
یک لیست مرتب
1.    The first list item
2.    The second list item
3.    The third list item    

یک لیست نامرتب
•    List item
•    List item
•    List item


لیست نامرتب
برای تعریف این نوع لیست از تگ <ul> (مخفف Unordered List) استفاده میشه.
و برای تعریف هر آیتم لیست از تگ <li> (مخفف List item).
هر آیتم لیست با یک دایره توپر نشون داده میشه. (این پیش فرضشه. میشه با دایره توخالی و مربع هم نمایش داده بشه که در مثال بعدی می بینیم)
این کد رو امتحان کنید:

کد:
<html>
<body>

<h4>An Unordered List:</h4>
<ul>
  <li>Coffee</li>
  <li>Tea</li>
  <li>Milk</li>
</ul>

</body>
</html>

باید در مرورگرتون یه همچین چیزی ببینید:

کد:
An Unordered List:
•    Coffee
•    Tea
•    Milk

خب، حالا چطور میشه شکل بالت ها رو عوض کرد؟ مثلا به جای دایره توپر، مربع گذاشت؟
کافیه به یکی از خاصیت های تگ ul به نام type مقدار بدیم.
مقادیری که می تونه بپذیره:
disc: دایره توپر (اینکه پیش فرضشه و اگر مشخص نکنیم هم همینطوری نمایش داده میشه)
circle: دایره توخالی
square: مربع
این کد رو امتحان کنید (در قسمت body قرار بگیره):

کد:
<ul type="square">
<li>Apples</li>
<li>Bananas</li>
<li>Lemons</li>
<li>Oranges</li>
</ul>

لیست مرتب
یک لیست مرتب با تگ <ol> (مخفف Ordered List) شروع میشه.
هر آیتم لیست هم با تگ <li>. (مثل لیست های نامرتب)
در اینجا هر آیتم با اعداد شماره گذاری میشه. (چون ترتیب مهمه دیگه)
اینم مثالش:

کد:
<ol>
<li>Coffee</li>
<li>Milk</li>
</ol>

باید همچین چیزی ببینید:

کد:
1.    Coffee
2.    Milk

در لیست های مرتب هم می تونیم خاصیت type رو داشته باشیم. مقادیری که می تونه بپذیره: a A i I 1
1: (1, 2, 3, 4, …) پیش فرض
a: (a, b, c, d, …) حروف کوچک الفبا
A: (A, B, C, D, …) حروف بزرگ الفبا
i: (i, ii, iii, iv, …) اعداد رومی کوچک
I: (I, II, III, IV) اعداد رومی بزرگ
اینم مثال:

کد:
<ol type="I">
  <li>Coffee</li>
  <li>Tea</li>
  <li>Milk</li>
</ol>

در لیست های مرتب، ممکنه یه وقت بخوایم شماره اجزای لیستمون از عددی به غیر از 1 شروع بشه. برای این منظور باید خاصیت start تگ ol رو مقدار بدیم.

کد:
<ol start="50">
  <li>Coffee</li>
  <li>Tea</li>
  <li>Milk</li>
</ol>

در اینجا شماره گذاری لیست از 50 شروع میشه نه از 1.

تا اینجا که راحت بود. می تونیم لیست های تو در تو هم داشته باشیم.
به عنوان تمرین همچین لیستی رو ایجاد کنین:

[تصویر:  137469588030465_Untitled.jpg]
روزتان را با تکه شکسته های دیروز آغاز نکنید. هر روزی که بیدار می شویم، اولین روز از باقی عمرمان است.
پاسخ
#8
با سلام اینم جواب تمرین.. ادامه بدین :39:

کد:
<html>
<body>

<h4>A nested List:</h4>
<ul>
  <li>Coffee</li>
  <li>Tea
<ul type="circle">
<li>Black tea</li>
<li>Green tea</li>
</ul>
</li>
  <li>Milk</li>
</ul>



</body>

تماس با مدیریت انجمن...

Ei8ht.ir@gmail.com

admin@ei8ht.ir
پاسخ
#9
7) فرم ها

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

[تصویر:  137555986540237_Untitled.jpg]

حالا ببینیم هر کدوم از این اجزا یا همون کنترل ها چی هست و چه جوری تولید میشه.

1) Text: برای تعریف ورودی یک خطی

2) Password: برای تعریف فیلد پسورد (در ظاهر شبیه text هست ولی فرقشون با هم اینه که وقتی کاربر فیلد password رو وارد میکنه ورودی نشون داده نمیشه و بجاش علامت * می بینیم.)

3) Textarea: برای تعریف ورودی های طولانی تر (چند خطی)

4) Checkbox: برای تعریف checkbox (امکان انتخاب چند گزینه توسط کاربر وجود داره)

5) Radio botton: برای تعریف دکمه رادیویی (فقط امکان انتخاب یک گزینه وجود داره)

6) Submit button: ارسال داده های فرم به یک صفحه دیگر

7) Reset button: دکمه reset که اگر کاربر فرم رو اشتباه پر کرد از این دکمه استفاده میکنه تا همه چی به حالت اول برگرده.


برای تعریف فرم از تگ <form> استفاده میشه.
برای تعریف هر یک از اجزای داخلش از <input> استفاده میشه که خاصیت type شون با هم متفاوته.
حالا همین فرمی که عکسش در بالا هست رو می سازیم:

کد:
<html>
<head>
<title>Form1</title>
</head>
<body>
<form method=post action="http://iaum.com">
<b>please fill the form below:</b>
<br><br>
username:<input type="text"><br>
password:<input type="password"><br>
E-mail:<input type="text"><br>
<textarea>write your comments here</textarea><br><br>
what colors do you like?<br>
<input type="checkbox" value="yes">red <input type="checkbox" value="yes" checked>yellow <input type="checkbox" value="yes">blue
<br><br>
what is your favorite color?<br>
<input type="radio" value=1 name="color_radio">red
<input type="radio" value=1 name="color_radio">green
<input type="radio" value=1 name="color_radio">brown
<input type="radio" value=1 name="color_radio">black
<br><br>
<input type="submit" value="submit">
<input type="reset" value="reset">
</form>
</body>
</html>

خاصیت های تگ form

Action: اون آدرسیه که وقتی کاربر دکمه ثبت رو زد، داده های فرم به اونجا ارسال میشه.
Method: روش ارسال داده رو مشخص میکنه که معمولا یا get هست یا post.
در روش get (پیش فرض) داده های فرم به انتهای url اضافه میشن و فرستاده میشن.
بذارین با یه فرم ساده تر توضیح بدم.

کد:
<form method="get" action="http://www.yahoo.com">
username:<input type="text" name="un"><br>
password:<input type="password" name="pass"><br>
<input type="submit" value="submit">
<input type="reset" value="reset">
</form>

فرم بالا رو ایجاد کنین و بعد اون دو تا فیلد رو پر کنین و دکمه submit رو بزنین. حالا به url ی که در نوار آدرس مرورگرتون می بینین دقت کنین. باید شبیه این باشه:
http://www.ei8ht.ir/?un=ali&pass=123
در اینجا داده ها به انتهای url اضافه شده و برای صفحه ei8ht.ir ارسال شده.
همونطور که می بینین امنیت این روش پایینه. چون پسورد طرف رو داره نشون میده.
پس در مواقعی که فیلد پسورد داریم تو فرممون، نباید از روش get استفاده کنیم.
بعلاوه در روش get در حجم اطلاعات هم محدودیت وجود داره.
پس زمانی که داده های حساسی داشته باشیم یا حجم بالایی از داده ها رو بخوایم بفرستیم باید از post استفاده کنیم.


ادامه دارد ...
روزتان را با تکه شکسته های دیروز آغاز نکنید. هر روزی که بیدار می شویم، اولین روز از باقی عمرمان است.
پاسخ


پرش به انجمن:


کاربرانِ درحال بازدید از این موضوع: 1 مهمان