آموزش زبان اچ تی میل یصورت مبتدی
نوشته شده توسط : مسعود

html مخفف Hypertext Markup Language  (زبانی سازنده صفحات وب که مجموعه ای از
فرامین به نام تگ است ) است. اچ تی ام ال معمولاً یک زبان پایه  در طراحی  صفحات وب 

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

پی اچ پی و غیره را یاد بگیرید اولین زبانی که به دنبال آن باید بروید اچ تی ام ال است .

اچ تی ام ال زبان ساده وقابل فهم است وبه راحتی می توان آن را یاد گرفت و  البته امنیت 

آن به زبان هایی چون asp وphp نمی رسد.ولی یادگیری ان برای مقدمه ضروری است .

چون در برنامه هایی چون پی اچ پی کاربرد دارد. برای نوشتن  این  برنامه  ما  فقط به یک 

برنامه ی ساده چون notpad نیاز داریم ما این آموزش را با  یک  کد  ساده  از  اچ تی ام ال

 شروع می کنیم:

<html>
<head>
<title>Title of page</title>
</head>
<body>
<b>This text is bold</b>
</body>
</html>

 

 

کدهای بالا را در notpad نوشته وبا نام test.htm ذخیره کنید  وارد  درایوی که  این  فایل  را 

ذخیره کردید شده و فایل اچ تی ام ال را دابل کلیک کنید نتیجه را خودتان ببینید.
برای شروع اچ تی ام ال از این تگ  سازنده  که  تگ  مکمل  هم  گفته  می شود استفاده 

می شود مکمل به این معنی که یک تگ نیز  نیاز  دارد  این  تگ  محلی  برای  قرار  گرفتن

تگ های متا و کد های جاوا اسکریپت است.تمام محتویات قابل مشاهده ی صفحه ی  وب 

در این تگ قرار می گیرد از جمله متن وتصویر.
برای شروع پاراگراف می توانید به جای <p>this is a test</p> از

<p align="center">this is a test</p> استفاده کنید که متن را به وسط صفحه می برد.
روش دیگه:برای اینکه بخواهیم نوشته ی ما درشت تر بشود از
<h1 align="center">this is a test</h1> استفاده می کنیم.اگر بخواهیم کوچکتر  بشود

 مثلاً h2  می نویسیم .h1 .h2.h3 h4.h5 .h6

برای اینکه متن به سمت چپ برود از left به جای center و  برای  راست  از  right استفاده 

می کنیم برای اینکه رنگ زمینه ی صفحه رو تغییر  بدید از این کد در قسمت body استفاده 

کنید:
 

< body bgcolor="white">

این را هم بگویم که رنگ زمینه در بازدید از سایت  شما  تاثیر دارد .  مثلاً  نباید  از  رنگهای 

خشن چون قرمز و نارنجی استفاده کنید.به عنوان مثال  به  سایت  www.webgozar.com 

بروید تامنظور مرا بهتر بفهمیدالبته برای رنگ های مختلف  می توانیم  از  این  کد  استفاده 

کنیم:
<"body bgcolor="#eaf3ff>برای بدست آوردن  این  رنگ (#eaf3ff)  برای  مثال  در  همان 

سایت وبگذر دکمه ی print screen صفحه کلید رافشاردهید در این موقع یک عکس  از  این 

صفحه گرفته می شود (برای اینکه از یک پنجره عکس بگیرید بعد از انتخاب آن  دکمه ی alt 

 را گرفته و دکمه ی print screenرا فشار دهید)بعد از آن برنامه ی فتوشاپ را باز کرده گزینه

 ی فایل و بعدnew را بزنید و ok کنید.
و بعد edit و paste را بزنید . و ابزاری که  شبیه  قطره  چکان  است  یا Eyedropper Tool را

 انتخاب کرده و طبق شکل روی رنگ مورد نظر راست کلیک کرده و گزینه ی

 copy color as html را انتخاب کنید و در notpad گزینه ی paste را بزنید . حال  اگر  این  کد 

رنگ را امتحان کنید یک رنگ که به آن رنگ تخمه مرغی می گویند رامشاهده می کنید.اگر بخواهیم متن ما ایتالیک نوشته شود متن را در بین <i> </i> می نویسیم.

متحرک کردن متن:

 

<marquee>matn</marquee>


تگ های بدون مکمل: <hr>و<br>و در این مورد دیگر نیازی به مثلاً <br/>نیست.ایجاد یک

 خط زیر متن:  :<hr>

  رفتن متن بعد به سر  سطر: <br>
 

کاربرد فونت:

 

<font face="arial" size="12" color="blue">this is a test</font>

 

لینک :ایجاد لینک در صفحه به روش زیر است:

 

<a href="http://www.bahrami488.loxblog.com">bahrami488</a> ایجاد لینک ایمیل :

برای

 

<a href="abrahimiali488@yahoo.com">connect</a> ی باز شدن صفحه :

طریقه

 

<a href="http://www.bahrami488.loxblog.com" target="_blank">connect</a>

                    

این کد باعث می شود سایت در پنجره ای دیگر باز شود.به موارد زیر توجه کنید . 

self_باعث می شود که سایت در همین پنجره باز شود.parent_در فریم ها فریم  اصلی  را

مشخص می کند.top_  شبیه  self_ است .

 

<img src="D:s[14].jpg"width="50" hight="50" border="0"
title="amozesh" alt="amozesh">

 

توضیح:

 

img src برای قرار دادن عکس در صفحه
D:s[14].jpg آدرس عکس
"width="50
"hight="50 طول و عرض عکس "border="0 اگر به جای  صفر یک را قرار  دهید  خطی  دور 

عکس بوجود می آید.title هنگامی که کرسر ماوس را روی عکس قرار می دهید نوشته ای

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

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

 جستجو نیز تاثیر دارد.چون گوگل در کدهای اچ تی ام ال هم نفوذ می کند واگر عکس شما

 نامی داشته باشد گوگل آن را پیدا می کنداین هم یک لینک عکس که با کلیک کردن آن 

صفحه ای باز می شود:

 

 

<a href="http://www.bahrami488.loxblog.com">
<img border="0" src="D:s[14].jpg"width="50" hight="50"
title="amozesh" alt="amozesh"></a>

 

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

 کد زیر استفاده کنید:

 

<head>
<meta name="description" content="آموزش اچ تی ام ال "
</head>

 

ایجاد یک جدول ساده:

 


<html>
<head>
<title>table</title></head>
<body>
<table border="2" bordercolor="#06a44d">
<tr>
<td>username</td><td>password</td>
</tr>
<tr>
<td>ahmad</td><td>8564</td>
</tr>
<tr>
<td>mohammad</td><td>5647</td>
</tr>
</table>
</body>
</html>

 

<tr>این تگ برای ایجاد ردیف های جدول است.
<td>این تگ برای ایجاد ستون های جدول است.
ایجاد فرم وپرسشنامه:

 


<html>
<head>
<title>porsesh</title>
</head>
<body>
<h2 align="center">لطفاً اطلاعات خود را وارد کنید </h2>
<hr>
<form action="
abrahimiali488@yahoo.com"
method="post">

<b>نام:</b>
<input type="text" name="name" size="18" maxlength="20"><br><br>
<b>ابمیل:</b>
<input type="text"  name="name" size="16" maxlength="20"><br><br>
<b>پسورد:</b>
<input type="password" name="password" size="15" maxlength="10"><br><br>
<b>رشته ی تحصیلی </b>
<select name="انتخاب رشته ی تحصیلی ">
<option value="nomber 1">ادبیات و علوم انسانی
<option value="nomber 2">ریاضی فیزیک
<option value="nomber 3">تجربی
<option selected>فنی و حرفه ای
</select><br>
 <b>کتب درخواستی خود را انتخاب کنید <b><br>
جاوا اسکریپت:
<input type="checkbox" name="book1" value="جاوا اسکریپت ">
<br>
پی اچ پی5 :
<input type="checkbox" name="book2" value="پی اچ پی5 " checked>
<br>
اچ تی ام ال :
<input type="checkbox" name="book3" value="اچ تی ام ال ">
<br>
<b>نظرتان را در مورد این وبلاگ بگویید<b><br>
عالی <input type="radio" name="نظر"  value="عالی "><br>
خوب <input type="radio" name="نظر"  value="خوب" ><br>
متوسط <input type="radio" name="نظر"  value="متوسط "checked><br><br>
<b>توضیحات <b><br>
<textarea rows="5" cols="40" name="توضیحات ">
توضیحات بیشتر را در این قسمت بنویسید
</textarea><br><br>
<input type="submit" value="send" name="submitbutton">
<input type="reset" value="reset" name="resetbutton">
</form>
</body>
</html>


 

در قسمت form action ایمیل فردی را می نویسیم  که  اطلاعات  ما را  دریافت  می کند و

 روش ارسال مطالب ما post است .ما در روش ارسال مطالب داریم یکی post و دیگری get

که روش post از امنیت بالاتری نسبت به get برخوردار است .
input :دستوری است  برای  آغاز کنترل های  متنی  و  کنترل های  متنی  متن هایی مثل

اسامی افراد را دریافت می کنند.
name :برای نامیدن عناصر فرم به کار می رود.
maxlength : برای این است که شما در این قسمت بیش  از  کاراکترهایی  که  تعیین شده

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

 


<input type="text" name="name" size="18" maxlength="20"value="نام">

ولی در اینجا با این دستور می توانید یک نام برای دکمه بگذارید:

 


<input type="submit" value="send" name="submitbutton">                                             

password:این دستور حروف و اعداد را به صورت ستاره در می آورد.

 

<textarea rows="5" cols="40" name="توضیحات ">

 

 

 برای نوشتن یک متن با چند خط از دستور textarea استفاده می شود.

 rows برای سطر و cols برای ستون.

پس این کد پنج سطر و چهل ستون است.

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

checkbox : فرق این دستور با دستور radio این است که ما در دستور checkbox 
از حق انتخاب بیشتری نسبت به radio رادیو  داریم  و  می توانیم  گزینه های  بیشتری  را

 انتخاب کنیم.حال آن که درradio فقط یک گزینه را می شود انتخاب کرد.

reset : این گزینه هم برای بازگشت به حالت اول یا پاک شدن  متن  نوشته  شده ی  شما 

می شود.

برای اینکه به جای دکمه ی submit تصویر قرار دهید از کد زیر استفاده کنید:

 

<input type="image" src="aks.gif" name="aks">

امیدوارم آموزش فوق مورد توجه عزیزان قرار گرفته باشد، در صورت وجود ابهام بنده را در قسمت نظرات مطلع گردانید تا مرتع گردد




:: موضوعات مرتبط: اینتر نت , ,
:: برچسب‌ها: اج تي ميل: قواعد عربي: قواعد ,
:: بازدید از این مطلب : 2396
|
امتیاز مطلب : 0
|
تعداد امتیازدهندگان : 0
|
مجموع امتیاز : 0
تاریخ انتشار : دو شنبه 18 شهريور 1388 | نظرات ()
مطالب مرتبط با این پست
لیست
می توانید دیدگاه خود را بنویسید

<-CommentGAvator->
بازاریابان ایرانی در تاریخ : 1392/8/21/2 - - گفته است :
بسم الله الرحمن الرحيم
سلام دوست عزيز
از شما دعوت می نمایم تا به جمع باشگاه ما بپیوندید
با تقدیم احترام،تیم پشتیبانی باشگاه بزرگ بازاریابان ایرانی
http://www.mci5.com/index.php?refid=4384


نام
آدرس ایمیل
وب سایت/بلاگ
:) :( ;) :D
;)) :X :? :P
:* =(( :O };-
:B /:) =DD :S
-) :-(( :-| :-))
نظر خصوصی

 کد را وارد نمایید:

آپلود عکس دلخواه:








at ShoutJax!">Powered by ShoutJax