آموزش و ترفندهای کامپیوتر
شما در این وبلاگ میتوانید ترفند های کامپیوتر ورجستری وهمچنین آموزشهای بعضی از نرم افزارها وقسمتهای مهم کامپیوتر را یاد بگیرید.آموزش و ترفندهای کامپیوتر
شما در این وبلاگ میتوانید ترفند های کامپیوتر ورجستری وهمچنین آموزشهای بعضی از نرم افزارها وقسمتهای مهم کامپیوتر را یاد بگیرید.HTML آموزش
HTML آموزش
ھمه صفحات وب با استفاده از دستورالعمل ھایی ساخته شده اند که به آنھا برچسب
است Hyper Text Markup Language گویند که مخفف کلمه HTML ھا یا تگ ھای
شامل : HTML اصلی ترین تگ ھا و بدنه یک فایل
<html> نشان گر نوع فایل
<head> قسمت سر یا فرم کلی صفحه
<title> </title> عنوان صفحه
</head>
<body> قسمت بدنه یا بخش قابل نمایش در مرورگر
</body>
</html>
نکته ١:پس از شروع ھر تگ لازم است با علامت / پایان آن را اعلام کنید
نکته ٢:بھتر است کدھا را با حروف کوچک بنویسید
استفاده نمود و ھنگام ذخیره سازی Notepad نکته ٣:برای نوشتن کدھا میتوان از برنامه
استفاده نمایید UTF_ ذخیره کرده و از 8 .html آن را با پسوند
سایر تگ ھا
<b> تگ
این تگ باعث می شوند متن مورد نظر پر رنگ شود مثال:
<html>
<head>
<title> Test </title>
</head>
<body>
<b> سلام دنیا </b>
</body>
</html>
<small></smallبرای ایتالیک کردن و از < <i></i> به جای این تگ می توان از تگ ھای
برای کوچک کردن متن استفاده کرد
<br> تگ
میباشد یعنی باعث میشود متن شما به سطر بعد منتقل شود Enter این تگ مانند کلید
زی به تگ بسته ندارد این تگ نیا
<html>
<head>
<title> Test </title>
</head>
<body>
سلام دنیا <br>
این یک تست است <br>
</body>
</html>
عنوان ھا
<h بزرگترین عنوان و < 6 <h ایجاد می شوند که< 1 <h تا < 6 <h عنوان ھا توسط تگ ھای< 1
کوچترین عنوان را ایجاد می کند
<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>
<p> تگ
این تگ باعث ایجاد یک پاراگراف می شود
<html>
<head>
<title> Test </title>
</head>
<body>
<p> سلام دنیا </p>
<p> این یک تست است </p>
</body>
</html>
<center> تگ
این تگ باعث می شود متن یا ھرچیز دیگری در وسط صفحه قرار بگیرد <html>
<head>
<title> Test </title>
</head>
<body>
<center>
این یک تست است
</center>
</body>
</html>
<hr> تگ
این تگ باعث ایجاد یک خط افقی می شود ونیازی به تگ بسته ندارد
<html>
<head>
<title> Test </title>
</head>
<body>
<p> سلام دنیا
<hr>
این یک تست است </p>
</body>
</html>
توضیحات
نوشتن توضیحات در یک صفحه باعث میشود برای ویرایش ھای مجدد آن فایل کمتر دچار
دردسر شویم در ضمن مرورگر توضیحات را نادیده گرفته و آن ھا را نمایش نمیدھد
<html>
<head>
<title> Test </title>
</head>
<body>
<-- این یک تست است --!>
<p> سلام دنیا </p>
</body>
</html>
فونتھا
استفاده نمود <font> ع سایز ورنگ فونت می توان از برچسب برای تعیین نو
<font face= Tahoma> این یک تست است </font> تعیین نوع فونت
<font size= این یک تست است < 2 </font> سایز فونت
<font color=red> این یک تست است </font> رنگ فونت
<font face=Tahoma size=2 color=red> این یک تست است </font> به صورت کلی
تصاویر
استفاده می کنیم این تگ ھم شامل <img> برای ایجاد یک تصویر در صفحه از تگ
پارامترھایی از قبیل آدرس تصویر و حاشیه وغیره می باشد این تگ نیازی به تگ بسته
ندارد
<img src="/image/logo.png"> آدرس عکس جھت نمایش در مرورگر
<img src="/image/logo.png" border= حاشیه دور عکس < 0
<img src="/image/logo.png" alt="test"> نوشتن توضیحات برای عکس
<img src="/image/logo.png" width=70 height= تعیین سایز تصویر < 60
یک مثال
<html>
<head>
<title> Test </title>
</head>
<body>
سلام دنیا <br>
<img src="/image/logo.png" width=70 height=60>
</body>
</html>
align ویژگی
با این ویژگی می توان تراز شدن متن وتصویر را تنظیم کرد
<body>
این یک
<img src="/image/logo.png" width=70 height=60 align="middle">
تست است
</body>
لینک ھا
جھت ایجاد یک پیوند یا لینک با صفحه یا فایل دیگر استفاده می شود <a> از تگ
این تگ ھم شامل مشخصاتی نظیر آدرس مقصد و نوع نمایش میباشد
<a href="http://gallery25.wordpress.com/">Barkhord</a>
آدرس و عنوانی جھت نمایش درصفحه
<a href=http://gallery25.wordpress.com/ target="_blank ">Barkhord</a>
نوع نمایش یعنی باعث میشود لینک در پنجره ای جدید باز شود
_parent لینک در ھمان قاب باز خوا ھد شد
_top ( لینک در ھمان پنجره باز خواھد شد (برای خارج شدن از قاب
_self لینک در ھمان پنجره باز خواھد شد
لینک به یک آدرس ایمیل
<a href= "mailto:mfatemian@gmail.com"> تماس </a>
ساخت لینک بر روی تصاویر
<a href=" http://gallery25.wordpress.com"><img src="/image/logo.png"></a>
به جای عنوان از آدرس یک عکس استفاده کنید
فھرست ھا
فھرست بدون شماره
<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>
درفھرستھا type
با استفاده از این مشخصه میتوان شکلی را که درکنار فھرستھای بدون شماره و یا اعداد
فھرستھای شماره دار را به نوع دلخواه تغییر داد
Disc ,circle,square نوع شکل ھا دایره توپر- دایره توخالی و مربع
abc , ABC , i ii iii , I II III اعداد
<body>
<ul type="circle">
<li> ایران </li>
<li> آمریکا </li>
<li> ژاپن </li>
</ul>
</body>
استفاده از رنگ ھا
<body bgcolor="red">
<body bgcolor="#FF0000">
<body bgcolor="rgb(255,0,0)">
استفاده از تصویر پس زمینه
<body background="logo.jpg">
جدول ھا
برای ایجاد جداول استفاده میشود <table> از تگ
برای ساخت ستون ھا استفاده میشود <td> برای ساخت سطرھا و از تگ <tr> و از تگ
ھم برای نمایش یک عنوان برای ستون ھا استفاده میشود <th> از تگ
<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>
جھت ایجاد حاشیه برای جدول استفاده می شود Border از صفت
میتوان یک عنوان برای جدول انتخاب نمود <caption> با تگ
<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.php" method="post">
<input type="text" name="user">
<input type="submit" value=" <"ارسال
<input type="reset" value=" <"انصراف
Submit استفاده از دکمه ھای تصویری به جای
<input type="image" src="ok.gif" name="send">
ایجاد دکمه ای جھت جستجو u1583 در کامپیوتر کاربر
<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>
<marquee> تگ
با استفاده از این تگ می توان یک متن متحرک ایجاد کرد
<marquee direction=right scrollamount=" این یک تست است <" 3 </marquee>
میتوان جھت حرکت متن را تعیین کرد Direction با استفاده از
سرعت حرکت متن را تعیین میکنیم Scrollamount با استفاده از
وع فونت ورنگ ھم قابل اعمال است سایر تنظیمات نیز مانند ن
نحوه قرار دادن فایل ھای فلش
<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> تگ
را Target با استفاده از این تگ میتوان به طور کلی برای لینک ھای صفحه مشخصه
اعمال کرد
<head>
<base target="_blank">
</head>
<link> تگ
را به سند ا چت یا مال پیوند زد CSS با استفاده از این تگ می توان یک فایل
میتوان ظاھر یک صفحه را به طور کلی کنترل کرد CSS با فایل ھای
<head>
<link rel="stylesheet" type="text/css" href="test.css">
</head>
<style> تگ
را به طور مستقیم در صفحه وارد کرد CSS با استفاده از این تگ می توان کدھای
<html>
<head>
<title> Test </title>
<style type="text/css">
body{background-image:url(logo.jpg)}
p{margin-right:20px}
</style>
</head>
<body>
</body>
</html>
<meta تگ <
با استفاده از این تگ توضیحات کلی را مربوط به صفحه وارد میکنیم این توضیحات را
معمولا موتورھای جستجوگر استفاده میکنند
این دستور نوع سند و پشتیبانی از استاندارد یونیکد را بیان میکند
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
</head>
این دستور توضیحاتی را درباره صفحه اضافه میکند
<head>
<meta name="description" content=" <"این یک صفحه برای تست می باشد
<title> Test </title>
</head>
دستور زیر کلمات کلیدی صفحه شما را مشخص میکند
<head>
<meta name="keywords" content=" <"تست , آموزش
<title> Test </title>
</head>
با استفاده ازاین دستور بعد از ٧ ثانیه مرورگر به آدرس جدید می رود
<head>
<meta http-equiv="refresh" content="7,url=http://gallery25.wordpress.com"/>
<title> Test </title>
</head>
