-
آموزش html به زبان ساده
سلام به سروران گرامي
پس از مشورت با دوست عزيزم Payman_62 تصميم گرفتم آموزش html به زبان ساده رو براي شما خوبان اينجا قرار بدم...
آموزش HTML
ھمه صفحات وب با استفاده از دستورالعمل ھایی ساخته شده اند که به آنھا برچسب ها يا تگ هاي html
كه مخفف كلمه
Hyper Text Markup Language
است...
اصلی ترین تگ ھا و بدنه یک فایل HTML شامل:
[html]<html> نشان گر نوع فایل
<head> قسمت سر یا فرم کلی صفحه
<title> </title> عنوان صفحه
</head>
<body> قسمت بدنه یا بخش قابل نمایش در مرورگر
</body>
</html>[/html]
نکته ١:پس از شروع ھر تگ لازم است با علامت / پایان آن را اعلام کنید.
نکته ٢:بھتر است کدھا را با حروف کوچک بنویسید.
نکته ٣:برای نوشتن کدھا میتوان از برنامه Notepad
استفاده نموده و ھنگام ذخیره سازی آن را با پسوند html. ذخیره کرده و از UTF-8 استفاده كنيد...
(آموزش هر تگ در يك پست مجزا انجام ميشه تا دوستان سردرگم نشن...)
شاد باشيد:40:
يا حق (:
-
تگ <b>
این تگ باعث می شوند متن مورد نظر پر رنگ شود مثال:
[html]<html>
<head>
<title> Test </title>
</head>
<body>
<b> ياسين قاسمي </b>
</body>
</html>[/html]
به جای این تگ می توان از تگ ھای <i></i> برای ایتالیک کردن و از <small></small> برای کوچک کردن متن استفاده کرد.
يا حق (:
-
تگ <br>
این تگ مانند کلید Enter
میباشد یعنی باعث میشود متن شما به سطر بعد منتقل شود
این تگ نیازی به تگ بسته ندارد
[html]<html>
<head>
<title> Test </title>
</head>
<body>
سلام ياس <br>
این یک تست است <br>
</body>
</html>[/html]
يا حق (:
-
سلام.
ممنون به خاطر این عمل مفیدت، مرسی ولی:
یاسین جان جای درستش اینجاست:
کد:
http://forum.p30world.com/forumdisplay.php?f=45
یا
کد:
http://forum.p30world.com/forumdisplay.php?f=125
-
خب پست شما مفهومي نداره!!!!!!
چون تاپيك ايجاد شده
حداقل كاري كه ميتونستيد بكنيد اين بود كه گزارش بدين كه انتقال بدن!
مديراي محترم پست بنده و ايشون رو حذف بفرماييد و اگر صلاح بود انتقال بدين
با تشكر
يا حق (:
-
عنوان ها
عنوان ها توسط تگ هاي <h1> تا <h6> ايجاد ميشوند كه <h1> بزرگترين عنوان و <h6> كوچكترين عنوان را ايجاد ميكند.
[html]<html>
<head>
<title> Test </title>
</head>
<body>
<h این یک تست است< 1 </h1>
<h این یک تست است< 2 </h2>
<h این یک تست است< 3 </h3>
<h این یک تست است< 4 </h4>
<h این یک تست است< 5 </h5>
<h این یک تست است< 6 </h6>
</body>
</html>[/html]
يا حق (:
-
تگ <p>
این تگ باعث ایجاد یک پاراگراف می شود.
[html]<html>
<head>
<title> Test </title>
</head>
<body>
<p> ياسين قاسمي </p>
<p> این یک تست است </p>
</body>
</html>[/html]
يا حق (:
-
تگ <center>
این تگ باعث می شود متن یا ھرچیز دیگری در وسط صفحه قرار بگیرد.
[html]<html>
<head>
<title> Test </title>
</head>
<body>
<center>
این یک تست است
</center>
</body>
</html>[/html]
يا حق (:
-
تگ <hr>
این تگ باعث ایجاد یک خط افقی می شود ونیازی به تگ بسته ندارد.
[html]<html>
<head>
<title> Test </title>
</head>
<body>
<p> ياسين قاسمي
<hr>
این یک تست است </p>
</body>
</html>[/html]
يا حق (:
-
توضیحات
نوشتن توضیحات در یک صفحه باعث میشود برای ویرایش ھای مجدد آن فایل کمتر دچار
دردسر شویم در ضمن مرورگر توضیحات را نادیده گرفته و آن ھا را نمایش نمیدھد.
[HTML]<html>
<head>
<title> Test </title>
</head>
<body>
<-- این یک تست است --!>
<p> ياسين قاسمي </p>
</body>
</html>[/HTML]
يا حق (:
-
تگ <IMG> :
میتوان گفت که این تگ یکی از تگهای پرکاربرد میباشد از این تگ به منظور قرار دادن تصاویر در صفحه وب استفاده میشود.این تگ دارای پارامترهای بسیاری میباشد که برای بهتر عمل کردن این تگ مورد استفاده قرار می گیرند.
اولین پارامتر این تگ پارامتر Src میباشد که محل قرار گیری آدرس فایل تصویری میباشد.
<Img Src="/Image/Cat.jpg">
پارامتر دیگر این Border میباشد . بوسیله این پارامتر میتوان حاشیه دور تصویر موردنظر را تنظیم نمود.در مثال زیر N مقدار یک عدد دلخواه شما میباشد.
<Img Src="/Image/Cat.jpg" Border=N>
و در نهایت بوسیله پارامترهای Width و Height میتوان طول و عرض تصویر را تنظیم نمود.در مثال زیر N مقدار عدد دلخواه شما برای تنظیم تصویر میباشد.
<Img Src="/Image/Cat.jpg" Border=N Width=N Height=N>
يا حق (:
-
فونتھا
برای تعیین نوع سایز و رنگ فونت می توان از برچسب <font>
استفاده نمود ...
تعيين نوع فونت
<font face=tahoma>
اين يك تست است
<font/>
سايز فونت
<font size=2>
اين يك تست است
<font/>
رنگ فونت
<font color=red>
اين يك تست است
<font/>
يك مثال بصورت كلي:
<font face=Tahoma size=2 color=red>
ياسين قاسمي
<font/>
[html]<font face= Tahoma> این یک تست است </font> تعیین نوع فونت
<font size= این یک تست است < 2 </font> سایز فونت
<font color=red> این یک تست است </font> رنگ فونت
<font face=Tahoma size=2 color=red> این یک تست است </font> به صورت کلی[/html]
تمرين كنيد تا حرفه اي بشين!
يا حق (:
-
تگ <A> :
از این تگ برای ایجاد پیوند یا همان لینک در صفحات وب استفاده میشود.بوسیله پیوندها یا همان لینکها میتوان به صفحات دیگر رفت و یا کارهای دیگری را انجام داد. به مثال زیر توجه نمایید.بوسیله کد زیر شما یک پیوند ایجاد میکنید در قسمت مقابل پارامتر Herf آدرس فایل مقصد یا هر چیز دیگر نوشته میشود و در قسمت بعد همانطور که میبینید متن پیوند نوشته میشود.
<a href="http://ya30n.ir/">click here</a>
آدرس و عنوانی جھت نمایش درصفحه
<a href=http://ya30n.ir/ target="_blank ">click here</a>
نوع نمایش یعنی باعث میشود لینک در پنجره ای جدید باز شود
لینک در ھمان قاب باز خوا ھد شد...parent_
لینک در ھمان پنجره باز خواھد شد (برای خارج شدن از قاب)...top_
لینک در ھمان پنجره باز خواھد شد...self_
يا حق (:
-
لینک به یک آدرس ایمیل
<"a href= "mailto:softestan@gmail.com>
تماس با من
<a/>
ساخت لینک بر روی تصاویر
<a href=" http://ya30n.ir"><img src="/image/logo.png"></a>
به جای عنوان از آدرس یک عکس استفاده کنید.
يا حق (:
-
ولی خودمونیما جاش اینجا نیست :31: اصلا هیچ وره نمیخوره :31:
ادامه کارت رو اینجا بده :
کد:
http://www.forum.p30world.com/forumdisplay.php?f=45
-
فھرست ھا
فھرست بدون شماره
<html>
<head>
<title> Test </title>
<head/>
<body>
<ul>
<li/> ایران <li>
<li/> آمریکا <li>
<li/> دبي <li>
<ul/>
<body/>
<html/>
فھرست شماره دار
<body>
<ol>
<li/> ایران <li>
<li/> آمریکا <li>
<li/> دبي <li>
<ol/>
<body/>
فھرست ھای توضیح دار
<body>
<dl>
<dt/> ایران <dt>
<dd/> آسیا <dd>
<dt/> آمریکا <dt>
<dd/> آمریکای شمالی <dd>
<dt/> فرانسه <dt>
<dd/> اروپا <dd>
<dl/>
<body/>
[html]فھرست بدون شماره
<html>
<head>
<title> Test </title>
</head>
<body>
<ul>
<li> ایران </li>
<li> آمریکا </li>
<li> ژاپن </li>
</ul>
</body>
</html>
فھرست شماره دار
<body>
<ol>
<li> ایران </li>
<li> آمریکا </li>
<li> ژاپن </li>
</ol>
</body>
فھرست ھای توضیح دار
<body>
<dl>
<dt> ایران </dt>
<dd> آسیا </dd>
<dt> آمریکا </dt>
<dd> آمریکای شمالی </dd>
<dt> فرانسه </dt>
<dd> اروپا </dd>
</dl>
</body>[/html]
يا حق (:
-
type در فھرستھا
با استفاده از این مشخصه میتوان شکلی را که درکنار فھرستھای بدون شماره و یا اعداد
فھرستھای شماره دار را به نوع دلخواه تغییر داد.
نوع شکل ھا دایره توپر- دایره توخالی و مربع Disc ,circle,square
اعداد:
abc , ABC , i ii iii , I II III
[html]<body>
<ul type="circle">
<li> ایران </li>
<li> آمریکا </li>
<li> ژاپن </li>
</ul>
</body>[/html]
با اشكال ديگه هم تمرين كنين تا خوب ياد بگيريد...
يا حق (:
-
استفاده از رنگ ھا
[html]<body bgcolor="red">
<body bgcolor="#FF0000">
<body bgcolor="rgb(255,0,0)">[/html]
استفاده از تصویر پس زمینه
[html]<body background="logo.jpg">[/html]
يا حق (:
-
جدول ھا
از تگ <table>
برای ایجاد جداول استفاده میشود . و از تگ <tr>
برای ساخت سطرھا و از تگ <td>
برای ساخت ستون ھا استفاده میشود
از تگ <th>
ھم برای نمایش یک عنوان برای ستون ھا استفاده میشود .
[HTML]<html>
<head>
<title> Test </title>
</head>
<body>
<table border=1>
<caption> تست </caption>
<th> ستون ١ </th>
<th> ستون ٢ </th>
<tr>
<td>row 1,cell 1</td>
<td>row 1,cell 2</td>
</tr>
<tr>
<td>row 2,cell 1</td>
<td>row 2,cell 2</td>
</tr>
</table>
</body>
</html>[/HTML]
از صفت Border جھت ایجاد حاشیه برای جدول استفاده می شود
با تگ <caption> میتوان یک عنوان برای جدول انتخاب نمود
يا حق (:
-
تگ <form>
توسط این تگ میتوان عناصری جھت دریافت اطلاعات از کاربر ساخت
تگ <input>
در تگ فرم می توان از این تگ استفاده نمود و انواع دکمه ھای رادیویی و فیلد ھا را
ساخت.
يا حق (:
-
ایجاد Textbox
[HTML]<html>
<head>
<title> Test </title>
</head>
<body>
<form>
<input type="text" name="firstname">
نام:
<br>
<input type="text" name="lastname">
نام خانوادگی:
</form>
</body>
</html>[/HTML]
يا حق (:
-
ایجاد دکمه ھای رادیویی
[HTML]<form>
<input type="radio" name="s" value="male"> مرد <br>
<input type="radio" name="s" value="female"> زن <br>
</form>[/HTML]
دوستان هنوز خيلي از كدها مونده
شما با اينها تمرين كنيد تا خوب خوب ياد بگيريد
انشالله اونها رو هم بزودي معرفي ميكنم كه تكميل بشه...
يا حق (:
-
ایجاد جعبه انتخاب
[HTML]<form>
<input type="checkbox" name="male"> گزینه ١ <br>
<input type="checkbox" name="female"> گزینه ٢ <br>
</form>[/HTML]
يا حق (:
-
ایجاد یک دکمه
[HTML]<form>
<input type="button" name="Button1"><br>
<input type="button" name="Button2"><br>
یا
<button>OK</button>
</form>[/HTML]
يا حق (:
-
ساخت تکست باکس برای کلمه عبور
[HTML]<form>
<input type="text" name="user"> نام کاربری <br>
<input type="password" name="pass"> رمزعبور
</form>[/HTML]
يا حق (:
-
Text area
[HTML]<form>
<textarea name="text1" rows="5" cols"20">
این یک تست است
</textarea>
</form>[/HTML]
يا حق (:
-
Dropdown
[HTML]<form>
<select name="country">
<option value="Iran"> ایران
<option value="USA"> آمریکا
<option value="Italy"> ایتالیا
</select>
</form>[/HTML]
يا حق (:
-
ایجاد دکمه ارسال
مشخصه Action
آدرس محل ارسال فایل را مشخص می کند ...
[HTML]<form name="input" action="action.php" method="post">
<input type="text" name="user">
<input type="submit" value=" <"ارسال
<input type="reset" value=" <"انصراف[/HTML]
يا حق (:
-
استفاده از دکمه ھای تصویری به جای submit
[HTML]<input type="image" src="ok.gif" name="send">[/HTML]
يا حق (:
-
ایجاد دکمه ای جھت جستجو در کامپیوتر کاربر
[HTML]<form>
<input type="file" value="file">
</form>[/HTML]
يا حق (:
-
ایجاد یک حاشیه برای فرم
[HTML]
<html>
<head>
<title> Test </title>
</head>
<body>
<fieldset>
<legend> اطلاعات </legend>
<form>
<input type="text" name="user">
</form>
</fieldset>
</body>
</html>[/HTML]
يا حق (:
-
قاب ھا
با استفاده از قاب ھا می توانید بیش از یک فایل HTML را در پنجره مرورگر نمایش دھید.
تگ <frameset>
این تگ مشخص کننده این است که پنجره مرورگر چگونه بین قاب ھا تقسیم شود.
تگ <frame>
این تگ مشخص کننده قاب ھا یا ھمان فایل ھای اچ تی ام ال است.
[HTML]<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>[/HTML]
در این مثال مرورگر ما به ۴ قاب که ھرکدام ٢۵ ٪ از فضای مرورگر را اشغال می کند تبدیل میشود
برای جلوگیری از تغییر سایز ھرقاب توسط کاربران عنصر noresize را به
<frame> اضافه میکنیم...
<"frame src="test.html" noresize="noresize>
يا حق (:
-
تگ <iframe>
با استفاده از این تگ می توان یک فایل اچ تی ام ال را در داخل یک قاب در ھرکجای متن
قرار دھید.
[HTML]<html>
<head>
<title> Test </title>
</head>
<body>
<iframe src="test.html">
</iframe>
این یک تست است
</body>
</html>[/HTML]
يا حق (:
-
تگ <marquee>
با استفاده از این تگ می توان یک متن متحرک ایجاد کرد.
[HTML]<marquee direction=right scrollamount=" ياسين قاسمي <" 3 </marquee>[/HTML]
با استفاده از Direction میتوان جھت حرکت متن را تعیین کرد.
با استفاده از Scrollamount سرعت حرکت متن را تعیین میکنیم.
سایر تنظیمات نیز مانند نوع فونت ورنگ ھم قابل اعمال است.
يا حق (:
-
نحوه قرار دادن فایل ھای فلش
[HTML]<object>
<embed type="application/x-shockwave-flash" src="/flash/test.swf"
width="128" height="128">
</object>[/HTML]
يا حق (:
-
تگ <script>
از این تگ برای زمانی استفاده می شود که بخواھیم ازکدھای جاوا اسکریپ ویا غیره
درفایل خود استفاده کنیم این تگ ھم شامل پارامترھای مختلفی چون نوع زبان آدرس و
غیره میشود.
[HTML]<script language="javascript" src="test.js">
</script>[/HTML]يا حق (:
-
تگ <base>
با استفاده از این تگ میتوان به طور کلی برای لینک ھای صفحه مشخصه Target را
اعمال کرد.
[HTML]<head>
<base target="_blank">
</head>[/HTML]
يا حق (:
-
تگ <link>
با استفاده از این تگ می توان یک فایل CSS را به سند اچ تی ام ال پیوند زد.
با فایل ھای CSS میتوان ظاھر یک صفحه را به طور کلی کنترل کرد.
[HTML]<head>
<link rel="stylesheet" type="text/css" href="test.css">
</head>[/HTML]
يا حق (:
-
تگ <style>
با استفاده از این تگ می توان کدھای CSS را به طور مستقیم در صفحه وارد کرد.
[HTML]<html>
<head>
<title> Test </title>
<style type="text/css">
body{background-image:url(logo.jpg)}
p{margin-right:20px}
</style>
</head>
<body>
</body>
</html>[/HTML]
يا حق (:
-
تگ <meta>
با استفاده از این تگ توضیحات کلی را مربوط به صفحه وارد میکنیم این توضیحات ر ا
معمولا موتورھای جستجوگر استفاده میکنند.
این دستور نوع سند و پشتیبانی از استاندارد یونیکد را بیان میکند.
[HTML]<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
</head>[/HTML]
يا حق (:
