X
تبلیغات
رایتل

به وبلاگ برنامه نویسی خوش آمدید.

برنامه نویس وب و نرم افزار تحت دسکتاپ

ایمیل rss feeds friendfa
  • آموزش برنامه نویسی وب
  • آموزش html و css
  • آموزش php و mysql
  • jquery
  • java
دکمه ی بعدی اسلاید شو دکمه ی قبلی اسلاید شو


آموزش اچ تی ام ال

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

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

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

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

.و یادگیری ان برای مقدمه ضروری است .

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

برنامه ی ساده چون 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="blue">

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

خشن چون قرمز و نارنجی استفاده کنید.به عنوان مثال  به  سایت  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.barnamenevisi.blogsky.com">barnamenevisi</a>

برای ایجاد لینک ایمیل :


<a href="mailto:email@barnamenevisi.blogsky.com">connect</a>

طریقه ی باز شدن صفحه :

 

<a href="http://www.barnamenevisi.blogsky.com" target="_blank">connect</a>

                    

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

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

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


<img src="D:\s[14].jpg"width="50" hight="50" border="0"
title="آموزش" alt="آموزش">


توضیح:


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

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

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

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

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

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

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




<a href="http://www.barnamenevisi.blogsky.com">
<img border="0" src="D:\s[14].jpg"width="50" hight="50"
title="آموزش" alt="آموزش"></a>



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



<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="mailto:name@barnamenevisi.blogsky.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 :دستوری است برای دریافت متن.

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"> 

آموزش اچ تی ام ال ما در اینجا به پایان رسید امیدوارم از مطالب این وبلاگ خوشتان آمده 

 باشد ضمنا ًمشکلاتتان را می توانید  اینجا برای  ما ارسال کنید در دفعات بعد به ادامه ی 

 آموزش طراحی صفحات وب خواهیم پرداخت.

کاربر وبلاگ نوشته شده توسط راوندی در تاریخ چهارشنبه 12 اسفند‌ماه سال 1388 ساعت 12:14 ب.ظ  چاپ 

نظرات (15)


پنج‌شنبه 4 شهریور‌ماه سال 1389 ساعت 11:21 ق.ظ
سلام کارت عالیه امیدوارم که موفق باشی
امتیاز: 8 مثبت 6 منفی

شنبه 22 آبان‌ماه سال 1389 ساعت 10:17 ب.ظ
عالی بود واقعا به دردم خورد مرسی دمت گرم ترکوندی
امتیاز: 8 مثبت 4 منفی

چهارشنبه 9 شهریور‌ماه سال 1390 ساعت 07:14 ب.ظ
این اموزشاتون برای تنظیم قالبم فوق العاده مفید بودن. ممنونم.
فقط یه چیز می مونه که نگفتین و اونم چطور می تونم رنگ یه متنی رو تغییر بدم؟
یعنی مثلا اگه کد ما این باشه:
<h1 align="center">this is a test</h1>
چطور میتونم رنگ this is a test رو تغییر بدم؟
بازم ازتون ممنونم
امتیاز: 6 مثبت 6 منفی
پاسخ:
<h1 align="center"><font face="tahoma" color="red">this is a

test</font></h1>
می تونی به جای red از کد هم استفاده کنی.
مثل : #FF0000

سه‌شنبه 9 خرداد‌ماه سال 1391 ساعت 08:57 ب.ظ
بینهایت تشکر
عالی بود
امتیاز: 9 مثبت 5 منفی

دوشنبه 27 آذر‌ماه سال 1391 ساعت 06:03 ب.ظ
tnx alot
امتیاز: 6 مثبت 5 منفی

پنج‌شنبه 30 خرداد‌ماه سال 1392 ساعت 09:17 ق.ظ
vagean ali bood kheyli be dardam khord. bazam merci.
امتیاز: 5 مثبت 4 منفی

پنج‌شنبه 13 تیر‌ماه سال 1392 ساعت 01:07 ب.ظ
با نام خدا با سلام مطلب خوبی بود.
امتیاز: 2 مثبت 2 منفی

سه‌شنبه 15 مرداد‌ماه سال 1392 ساعت 03:10 ب.ظ
سلام ادامه بده
امتیاز: 2 مثبت 1 منفی

یکشنبه 1 دی‌ماه سال 1392 ساعت 10:41 ق.ظ
سلام
خسته نباشی واقعا کمکم کرد ممنون
ادامه بده
امتیاز: 4 مثبت 2 منفی

شنبه 10 اسفند‌ماه سال 1392 ساعت 12:09 ب.ظ
خیلی عالی بود ممنون
امتیاز: 4 مثبت 2 منفی

شنبه 9 فروردین‌ماه سال 1393 ساعت 12:57 ب.ظ
اگه میشه اموزش فلش هم بزارید
امتیاز: 3 مثبت 1 منفی
پاسخ:
بلد نیستم . وقتی یاد گرفتم حتماً آموزشش رو میذارم.

سه‌شنبه 28 مرداد‌ماه سال 1393 ساعت 11:54 ق.ظ
سلام دوست عزیز مشکل من اینه که وقتی کد های پرشنامه رو به نوت پد میدم و بعد اجراش میکنم یه سری حروف بی معنا نمایش داده میشه و اینکه من نمی تونم موقع کد نویسی از زبان فارسی استفاده کنم برای حل این مشکل کمکم کنید و فکر هم کنم که به خاطر کد هایی که شما دادید که در بینشان حروف فارسی هم هست این مشکل برای من پیش اومده (یعنی کدهام به حالت بی معنا در اومده) .
ممنون
امتیاز: 2 مثبت 1 منفی
پاسخ:
اگه کدهای کتاب منو کپی زدی که کاریش نمیشه کرد. چون مشکل از ورد هست. ولی اگه از روی وبلاگم کپی زدی که حتما utf-8 رو انتخاب نمیکنی.

دوشنبه 7 اردیبهشت‌ماه سال 1394 ساعت 10:05 ب.ظ
سلام راستش من میخوام یه سایت طراحی کنم و اصول اولیه هم آشنایی دارم ولی برای اینکه یه کاره جامع بشه و بشه ازش استفاده کرد کمک نیاز دارم میخواستم کمکم کنید
امتیاز: 0 مثبت 1 منفی
پاسخ:
سلام
به چه کمکی نیاز دارید؟

سه‌شنبه 8 اردیبهشت‌ماه سال 1394 ساعت 07:57 ب.ظ
راستش من دقیقا نمیدونم کدها اچ تی ام ال رو چه جور بزارم کنار هم که در کل یه سایت بشه وقتی کلید cotorol+u را میزنم میتونم کد های صفحه های یک سایت و ببینم ولی خیلی جاهاش واسم نامعلوم و اینکه دقیقا نمیدونم بعضی هاش چی کار میکنن کمکم کنید یا یه جایی رو معرفی کنید که به طور کامل مشکلم رو حل کنه
مرسی
امتیاز: 2 مثبت 0 منفی
پاسخ:
شما باید html یاد بگیری توی اینترنت کلی در این مورد آموزش هست. کافیه فقط جستجو کنید.

شنبه 19 فروردین‌ماه سال 1396 ساعت 02:52 ق.ظ
سلامیه سوالی داشتم .اگه بخوام یه کلمه ای رو با رنگ دلخواه در وسط صفحه نمایش دهم چه کدی باید بزنم.در واقع میخام جز ساختار کلی سایتم باشه.(html)
امتیاز: 0 مثبت 0 منفی
پاسخ:
شما به جای اینکه سوال کنید اگه یه جستجویی کرده بودید تا حالا به جواب رسیده بودید:
https://www.w3schools.com/cssref/tryit.asp?filename=trycss_text-align
https://www.w3schools.com/html/tryit.asp?filename=tryhtml_styles_intro


برای نمایش آواتار خود در این وبلاگ در سایت Gravatar.com ثبت نام کنید. (راهنما)
نام:
ایمیل(پنهان می ماند):
وب/وبلاگ:
متن نظر:
لبخند


 درباره من
عکس پروفایل

سلام ، من محمدرضا هستم ، و اهل راوند کاشان. برنامه نویس وبسایت هستم . اگر میخواهید سایتی طراحی کنید با من تماس بگیرید ، می تونید توی وبلاگ بهم پیام بدید . متشکرم.
  بایگانی

دسته‌ها

 جدیدترین یادداشت‌ها
مشکل نمایش border با کلیک روی texbox یا کلیک روی لینک
رفع خطای ()Fatal error: Cannot redeclare jdate
گرفتن پشتیبان از بانک اطلاعاتی با کمک mysqldump
چگونه برنامه نویس شویم؟
افزونه ای برای عکس گرفتن از سایت
مشکل ویرایشگر ckeditor با ایجکس
قالب وبلاگ برنامه نویسی
اجرا نشدن فایل جاوا در cmd
اخطار عدم پشتیبانی از FULLTEXT در قسمت phpmyadmin
رنگی کردن کد در برنامه ی word و صفحات وب با کمک notepad++
طریقه ی ثبت دامین ir
کتاب آموزش آسان و کاربردی php و mysql
لینک گذاشتن روی بخشی از تصویر
چند مطلب اضافه شده به کتاب آموزش سریع و آسان jquery
کتاب آموزش سریع و آسان jquery
اخطار no privileges در برنامه ی wamp 2.4 در قسمت ایجاد دیتابیس
گرادینت gradient برای همه ی مرورگرها
کنفرانس برنامه نویسان php
مشکل قالب های میهن بلاگ
کتاب آموزش ++C
کتاب آموزش tkinter به زبان ساده
مترجم قالب
گرد کردن div در مرورگر اکسپلورر
ضبط صدا با کمک جاوا اسکریپت ، جی کوئری ، php و فلش
لینک های آموزش برنامه نویسی
حفره ی امنیتی در مرورگر اکسپلورر
نمایش عکس از روی سایت در برنامه ی جاوا
نمایش لینک به صورت تصادفی
برنامه ی شکلک های الفورآی
گذاشتن پسورد روی پوشه در سایت
لیست کامل عناوین یادداشت‌ها
 موارد دیگر

آمار تعداد کل بازدید ها : 435945
rss feeds

Powered By

www.barnamenevisi.blogsky.com

Copyright © 2014 barnamenevisi.blogsky.com