آموزش مقدماتی HTML

abc_ramak

عضو جدید
کاربر ممتاز
آموزش مقدماتی HTML



توجه: پیش فرض من برای آموزش اینه که مخاطب هیچ چیزی از برنامه نویسی نمیدونه و اولین باره که کد می نویسه. پس لطفاً اساتید محترم این رشته، خیلی سخت نگیرند. البته از نظرات و پیشنهادات و انتقادات ارزنده شما در پیام خصوصی استقبال میکنم
 
آخرین ویرایش:

abc_ramak

عضو جدید
کاربر ممتاز
معمولا اولین چیزی که باید بدونین اینه:
HTML=HyperText Markup Language
زبان نشانه گذاری ابر متن

زبان پایه برای طراحی و برنامه نویسی تحت وب

محیط های مختلفی برای کار وجود داره که بهترین اونها Dreamweaver هست، ولی بنده ترجیح میدم آموزش مقدماتی رو روی همون note pad خودمون شروع کنیم. در یک کلام: تنبلی و تن پروری ممنوع!

دستوراتی که در HTML استفاده میشن اسمشون tag هست و همگی بین دو علامت "<" و ">" قرار گرفتن. مثل تگ های زیر:
کد:
<b>
<html>
<font>
...
ما توی محیط note pad دستورات رو می نویسیم و با فرمت htm ذخیره می کنیم و بعد با استفاده از یه مرورگر مثل IE اونو اجرا می کنیم. تگهای HTML ترجمه میشن و سایر کلمات و عباراتی که نوشتیم، عیناً در خروجی نمایش داده میشن.

تگ ها دو نو هستند: بعضیهاشون به صورت دوتایی هستن. یعنی وقتی اون تگ رو استفاده کردیم و مطالب رو بعد از اون تگ نوشتیم باید انتهای اون رو مشخص کنیم یا اصطلاحاً اون تگ رو ببندیم. برای بستن تگ از علامت "/" بصورت زیر استفاده می کنیم:
کد:
</تگ>
اکثر تگهای HTML از این نوع هستند، مثل:
کد:
<font>متن</font>
<b>متن</b>
<head>متن</head>
...
اما نوع دیگه تگ ها هستند که به صورت تکی استفاده میشن و نیازی به مشخص کردن انتها ندارن. مثل:
کد:
<br>
<input>
...

امیدوارم خیلی گیج نشده باشین :confused: نگران نباشین. اصلا سخت نیست. اولشه ;)

خوب حالا وارد محیط note pad میشیم تا آموزش عملی رو شروع کنیم :)

اول کدهای زیر رو بنویسید:
کد:
<html>
<body>
Hello HTML
</body>
</html>
خوب شما یه برنامه کوچیک نوشتین. سخت بود؟!
میخواین نتیجه رو ببینین؟ اول باید برنامه ای که نوشتین ذخیره کنین. از منوی file گزینه save رو انتخاب کنین. save as type رو به all files تغییر بدین. مقابل file name بنویسین hello.htm و دکمه save رو بزنین. حالا به شاخه ای که فایل رو ذخیره کردین برین و با دبل کلیک، فایل رو اجرا کنین. به به عجب برنامه ای!! :D

خوب برگردیم به کدهایی که نوشتیم و یه توضیح کوتاه:
1- همه صفحات HTML با تگ <html> شروع میشن و با </html> تموم میشن.
2- بدنه اصلی برنامه بین تگهای <body> و </body> نوشته میشه. اینجا باید بگم که همه کدهای ما شامل بدنه نمیشن. با قسمت های دیگه به زودی آشنا میشیم.
3- ما 5 سطر کد نوشتیم ولی در خروجی فقط کلمه Hello HTML رو میبینیم. چرا؟ :cool:

فکر کنم برای جلسه اول همین قدر کافیه. فعلا به سوال "چرا" جواب بدین تا بعد :gol:
 

افشـین

مدیر بازنشسته
کاربر ممتاز
فکر کنم برای جلسه اول همین قدر کافیه. فعلا به سوال "چرا" جواب بدین تا بعد :gol:

آقا اجازه !
ما هم میشه جواب بدیم ؟ :D

بذارین یه سوال بپرسم که یه خورده این پست از حالت اسپم گونه خارج بشه !

میشه کدهای html باشگاه رو فعال کرد ؟
 

abc_ramak

عضو جدید
کاربر ممتاز
آقا اجازه !
ما هم میشه جواب بدیم ؟ :D

بذارین یه سوال بپرسم که یه خورده این پست از حالت اسپم گونه خارج بشه !

میشه کدهای html باشگاه رو فعال کرد ؟
جواب که ندادین!
سوالتون هم ربطی به بحث نداره. بهتره از مدیرای باشگاه بپرسین.

نه!!!
شما فقط جواب منو بده!!!
اسپم؟! :mad:
 

ژاندارک

عضو جدید
ما 5 سطر کد نوشتیم ولی در خروجی فقط کلمه Hello HTML رو میبینیم. چرا؟ :cool:

فکر کنم برای جلسه اول همین قدر کافیه. فعلا به سوال "چرا" جواب بدین تا بعد :gol:

خوب همونطور که خودتون گفتید تگها ترجمه میشن و مابقی توی خروجی نمایش داده میشن یعنی ما تگها رو توی خروجی نمیبینیم.
درسته؟
 

افشـین

مدیر بازنشسته
کاربر ممتاز
جواب که ندادین!
سوالتون هم ربطی به بحث نداره. بهتره از مدیرای باشگاه بپرسین.

دوست عزیز
منظورم این بود که سوالات رو همه جواب بدن ؟
یا فقط اونایی که دارن html یاد می گیرن ؟

مدیرای باشگاه هم کدهای html رو غیر عمد که غیر فعال نکردن ...
خواستم بدونم روشی یا ترفندی داره که خودمون بتونیم فعالش کنیم ؟
 

abc_ramak

عضو جدید
کاربر ممتاز
2

2

خوب حالا بریم سراغ درس بعدی
چطوره امروز با چند تا تگ آشنا بشیم :razz:

مثلا این چطوره؟
کد:
<font>
متن
</font>
تگ مفیدی هست :)
همونطور که میبینین جزو تگهای دوتایی هست، یعنی باید مابین این تگها متنی نوشته بشه.
اما ببینیم چه کاربردی داره؟
برنامه ای که جلسه قبل نوشتیم رو دوباره بنویسین:
کد:
<html>
<body>
Hello HTML
</body>
</html>
عبارت Hello HTML رو داخل تگ font قرار بدین. اینجوری:
کد:
<html>
<body>
<font>Hello HTML</font>
</body>
</html>
خروجی چه تغییری کرد؟

هیچی ... :razz:
خوب این تگ به تنهایی کاری انجام نمیده. داخل اون باید صفاتی رو تعریف کنیم. مثلا اینها:
کد:
<font family=tahoma size=2 color=red>
Hello HTML
</font>
هر کدوم از عباراتی که داخل تگ نوشتم یه صفت هستند که با فاصله از هم جدا شدند. یعنی من برای تگ font تعداد 3 صفت تعریف کردم. میتونیم هر کدوم از این صفات رو حذف کنیم یا صفات دیگه ای اضافه کنیم.
از کلمات size و color ,.. که به کار بردیم مشخصه که خروجی به چه صورتی خواهد بود. امتحان کنید...
بله کلمه Hello HTML با فونت tahoma و رنگ قرمز و اندازه 2 نمایش داده میشه. با سایر صفات تگ font به زودی آشنا میشیم.

حالا یه تگ پرکاربرد دیگه:
کد:
<B>
متن
</B>
باز هم یه تگ دوتایی.
حتما با کلمه bold در word آشنایی دارید. خوب ایی تگ همونه دیگه. امتحانش کنین ;)
تگهایی هم برای italic و underlined داریم. اینا:
کد:
<I>متن</I>
<U>متن</U>
حتما ازشون استفاده کنین و خروجی ها رو مقایسه کنین.

و اما آخرین تگی که امروز یاد میگیریم:

کد زیر رو بنویسید و خروجی رو ببینید:
کد:
<html>
<body>
Hello HTML
I love You!
</body>
</html>
چی شد؟! چرا اینجوری شد؟! خوب من براتون میگم :D با زدن کلید Enter نمیتونین به سطر پایین برید. حتی برای این کار هم باید از تگ زیر استفاده کنین:
کد:
<br>
این تگ دوتایی نیست و هرجایی از متن که اونو قرار بدین، مثل اینه که Enter رو زدین و به سطر پایین حرکت می کنین. (مخفف کلمه Break)
حالا این تگ رو توی متن بالا قرار بدین تا خروجی درست رو ببینین. اینجوری:
کد:
<html>
<body>
Hello HTML
<br>
I love You!
</body>
</html>


تمرین امروز:
متن زیر رو در خروجی ایجاد کنین:

HTML documents are composed entirely of HTML elements that, in their most general form have three components: a pair of element tags with a "start tag" and "end tag"; some element attributes given to the element within the tags; and finally, all the actual, textual and graphical, information content that will be rendered on the display.​

An HTML element is everything between and including the tags. A tag is a keyword enclosed in angle brackets.



توجه کنین بعضی از کلمات bold یا italic یا underlined هستند و رنگ پاراگراف دوم green هست. :cool:
 

meytim

متخصص محاسبات عددی و MATLAB
کاربر ممتاز
کد:
<html>
<body>
<u>HTML documents</u> are composed entirely of <b>HTML elements</b> that, in their most general form have three components: a pair of element <i>tags</i> with a "start tag" and "end tag"; some element <i>attributes</i> given to the element within the tags; and finally, all the actual, textual and graphical, information <i>content</i> that will be rendered on the display.
<br><br>
<font color=green>An <b>HTML element</b> is everything between and including the tags. A <b>tag</b> is a keyword enclosed in angle brackets.</font>
</body>
</html>
 

abc_ramak

عضو جدید
کاربر ممتاز
کد:
[LEFT]<html>
<body>
<u>HTML documents</u> are composed entirely of <b>HTML elements</b> that, in their most general form have three components: a pair of element <i>tags</i> with a "start tag" and "end tag"; some element <i>attributes</i> given to the element within the tags; and finally, all the actual, textual and graphical, information <i>content</i> that will be rendered on the display.
<br><br>
<font color=green>An <b>HTML element</b> is everything between and including the tags. A <b>tag</b> is a keyword enclosed in angle brackets.</font>
</body>
</html>[/LEFT]

کاملاً درسته ;)

نکته ای که تو نوشتن تگ ها باید بهش توجه کرد اینه که وقتی از چند تگ تو در تو استفاده می کنیم، تگی که زودتر باز شده باید دیرتر بسته بشه و برعکس. همونطور که این دوستمون به خوبی تگ های <font> و <b> رو به صورت تو در تو استفاده کردن. :)
 

sahar68

عضو جدید
کاربر ممتاز
<!doctype html>

<html>
<head>
<style>
#h{color:green;}

</style>



</head>
<body>
<p><u>HTML documents</u>are composed entirely of<b> HTML elements</b> that, in their most general form have three components: a pair of element<i> tags</i> with a "start tag"
and "end tag"; some element<i> attributes </i>given to the element within the tags; and finally, all the actual, textual and graphical, information<i> content </i>that will be rendered on the display.
</p>

<p id="h">An<b> HTML element</b>is everything between and including the tags. A<b> tag</b>s a keyword enclosed in angle brackets
</p>

</body>
</html>
 

abc_ramak

عضو جدید
کاربر ممتاز
<!doctype html>


<html>
<head>
<style>
#h{color:green;}

</style>



</head>
<body>
<p><u>HTML documents</u>are composed entirely of<b> HTML elements</b> that, in their most general form have three components: a pair of element<i> tags</i> with a "start tag"
and "end tag"; some element<i> attributes </i>given to the element within the tags; and finally, all the actual, textual and graphical, information<i> content </i>that will be rendered on the display.
</p>

<p id="h">An<b> HTML element</b>is everything between and including the tags. A<b> tag</b>s a keyword enclosed in angle brackets
</p>

</body>

</html>
خروجی کاملا درسته
ولی سعی کنید با آموزش پیش برید نه جلوتر
هنوز به style نرسیدیم و حتی تگ <p> هم یاد نگرفتیم!! :D

در ضمن کد ها رو مثل من داخل علامت CODE قرار بدین. برای این کار بالای صفحه ی پاسخ، علامت # رو بزنید و داخل اون کدها رو بنویسید. ممنون :)
 

ژاندارک

عضو جدید
خروجی کاملا درسته
ولی سعی کنید با آموزش پیش برید نه جلوتر
هنوز به style نرسیدیم و حتی تگ <p> هم یاد نگرفتیم!! :D

در ضمن کد ها رو مثل من داخل علامت CODE قرار بدین. برای این کار بالای صفحه ی پاسخ، علامت # رو بزنید و داخل اون کدها رو بنویسید. ممنون :)

منظورتون از علامت CODE چیه؟
من اصلآ متوجه این قسمت نشدم : در ضمن کد ها رو مثل من داخل علامت CODE قرار بدین. برای این کار بالای صفحه ی پاسخ، علامت # رو بزنید و داخل اون کدها رو بنویسید
 

A.S.Roma

عضو جدید
کاربر ممتاز
منظورشون این تگه :
 

sahar68

عضو جدید
کاربر ممتاز
خروجی کاملا درسته
ولی سعی کنید با آموزش پیش برید نه جلوتر
هنوز به style نرسیدیم و حتی تگ <p> هم یاد نگرفتیم!! :D

در ضمن کد ها رو مثل من داخل علامت CODE قرار بدین. برای این کار بالای صفحه ی پاسخ، علامت # رو بزنید و داخل اون کدها رو بنویسید. ممنون :)

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

RIG

متخصص C#.net
درسته ما ساکتیم ولی دو تا دستامون زیر چونمونه و دراز کشیدیم و گوش میدیم تا یاد بگیریم البته اگه زودتر درس بدین راستش ممنون میشم بیشتر رو اصل مطلب باشین تا حاشیه
 

abc_ramak

عضو جدید
کاربر ممتاز
معذرت میخوام که دیر به دیر آپ می کنم. متاسفانه خیلی وقت خالی ندارم :(
دو روز هم که قیلتر بودیم و ...
چشم سعی می کنم بیشتر سر بزنم :)
 

abc_ramak

عضو جدید
کاربر ممتاز
3

3

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

حالت کلی یه جدول رو میشه به صورت زیر نوشت:
کد:
<table>
   <tr>   
       <td>
           متن
       </td>
       <td>
           متن
       </td>
   </tr>
   <tr>   
       <td>
           متن
       </td>
       <td>
           متن
       </td>
   </tr>
</table>
تگ <table> که ابتدا و انتهای جدول رو مشخص می کنه. tr مخفف Table Row یک سطر رو ایجاد می کنه. td مخفف Table Data تعداد خونه های یه جدول رو مشخص می کنه. اطلاعاتی که داخل جدول قرار میدیم می تونن هر چیزی باشن، مثل متن یا عکس یا لینک ...

برای مثال، کد زیر رو بنویسین و خروجی اون رو ببینین:
کد:
<table>
   <tr>   
       <td>
           درس اول
       </td>
       <td>
           مقدمه ای بر HTML
       </td>
   </tr>
   <tr>   
       <td>
           درس دوم
       </td>
       <td>
           کار با متن
       </td>
   </tr>
   <tr>   
       <td>
           درس سوم
       </td>
       <td>
           جداول
       </td>
   </tr>
</table>

:warn: چون کدهای بالا کاراکترهای فارسی هم دارند باید موقع ذخیره فایل، گزینه encoding رو روی utf-8 تنظیم کنید :warn:

خروجی رو دیدید؟ خوب به نظر خیلی جالب نمیاد :razz: یه کم تغییرش بدیم..

می خوایم جدولمون رو ببینیم، برای این کار باید یک صفت برای تگ table به صورت زیر تعریف کنیم:
کد:
<table border=1>
...
</table>

یه کم بهتر شد :) لازم به توضیح نیست که border، اندازه خطوط حاشیه جدول رو تعیین می کنه. اندازه پیش فرض اون صفر هست که هیچ حاشیه ای نداره. اعداد بزرگتر رو هم می تونین امتحان کنین.

حالا یه صفت دیگه اضافه کنیم:
کد:
<table border=1 dir="rtl">
...
</table>

امتحان کنین... اینجوری بهتر نشد؟؟ ;)

dir مخفف direction، سمت چینش حروف رو مشخص می کنه. طبیعتاً وقتی متن فارسی می نویسیم باید از راست چین استفاده کنیم.
rtl=right to left و ltr=left to right گزینه هایی هستند که می تونیم استفاده کنیم.
برای راحتی کار می تونین این صفت رو به تگ body اضافه کنین تا کل صفحه ای که طراحی می کنین راست چین بشه:

کد:
<body dir="rtl"
...
</body>

بعداً مفصل تر با جداول و صفاتشون آشنا میشیم.

بریم سراغ تگ بعدی:
کد:
<img src="آدرس عکس">
برای نمایش عکس از این تگ استفاده میشه. آدرس میتونه یه عکس از هارد شما و یا یه آدرس اینترنتی مثل مثال زیر باشه:
کد:
<img src="http://www.www.www.iran-eng.ir/images/smilies/icon_gol.gif">

و اما تگ لینک...
کد:
<a href="آدرس لینک">
متن
</a>

مثال:
کد:
<a href="http://www.www.www.iran-eng.ir/showthread.php?p=1869508#post1869508">
آموزش مقدماتی HTML 
</a>

تمرین: جدولی با سلیقه خودتون و با تعداد سطر و ستون دلخواه طراحی کنید و توی خونه های اون متن و عکس و لینک قرار بدین :cool:
 

ژاندارک

عضو جدید
تمرین: جدولی با سلیقه خودتون و با تعداد سطر و ستون دلخواه طراحی کنید و توی خونه های اون متن و عکس و لینک قرار بدین :cool:
کد:
<table border=1 dir="rtl">
   <tr>   
       <td>
           مهندسی کامپیوتر
       </td>
       <td>
           <img src="<img src="[URL]http://sites.google.com/site/rezan110/RayanehLogo.jpg[/URL]">
       </td>
       <td>
           <a href="[URL]http://www.www.www.iran-eng.ir/forumdisplay.php?f=13[/URL]">
            لینک               
           </a>
       </td>
   </tr>
   <tr>   
       <td>
           مهندسی برق
       </td>
       <td>
           <img src="[URL]http://www.namelectronic.ir/service/images/setlogo1.jpg[/URL]">
       </td> 
       <td>
           <a href="[URL]http://www.www.www.iran-eng.ir/forumdisplay.php?f=6[/URL]">
            لینک               
           </a>
       </td>
   </tr>
   <tr>   
       <td>
           مهندسی مکانیک
       </td>
       <td>
           <img src="[URL]http://www.blogsky.com/users/blogs/logo/pwitgs.gif[/URL]">
       </td>
       <td>
           <a href="[URL]http://www.www.www.iran-eng.ir/forumdisplay.php?f=7[/URL]">
            لینک               
           </a>
       </td>
   </tr>
</table>
 
آخرین ویرایش:

meytim

متخصص محاسبات عددی و MATLAB
کاربر ممتاز
تمرین: جدولی با سلیقه خودتون و با تعداد سطر و ستون دلخواه طراحی کنید و توی خونه های اون متن و عکس و لینک قرار بدین :cool:
کد:
<html dir=rtl>
<head>
<title>I'm stronger than yesterday.</title>
</head>
<body>
<table border=1>
   <tr>   
       <td>
           <a href="http://mmnrecipes.blogspot.com/search/label/%22%D8%AE%D9%88%D8%B4%D8%A8%D8%AE%D8%AA%D9%8A%22%20%D9%88%20%22%D8%AF%D9%84%D8%AA%D8%A7%D9%8A%20%D8%AF%D9%8A%D8%B1%D8%A7%D9%83%22">
               <font size=+2>"خوشبختي" و "دلتاي ديراك"</font>
           </a>
       </td>
       <td>
           <img src="http://www.matheonics.com/img_filters/ft_002.png">
       </td>
   </tr>
   <tr>   
       <td>
           <a href="http://mmnrecipes.blogspot.com/search/label/%D8%A7%D8%AD%D8%B3%D8%A7%D8%B3%20%D8%B1%D9%8A%D8%A7%D8%B6%D9%8A%20%DA%86%D9%8A%D8%B3%D8%AA%D8%9F">
               <font size=+2>احساس رياضي چيست؟</font>
           </a>
       </td>
       <td>
           <img src="http://www.techpin.com/wp-content/uploads/2009/12/cool-math-games.gif">
       </td>
   </tr>
   <tr>   
       <td>
           <a href="http://mmnrecipes.blogspot.com/search/label/%D9%81%D8%B3%D9%8A%D9%84%20%D8%B4%D8%AF%D9%86%20%D9%8A%D8%B9%D9%86%D9%8A%20%DA%86%D9%87%D8%9F">
               <font size=+2>فسيل شدن يعني چه؟</font>
           </a>
       </td>
       <td>
           <img src="http://4.bp.blogspot.com/_vVaU1s52Wgo/SgFLONMw4HI/AAAAAAAAADE/fDJSTy2lJTA/s320/GeoLabPic_1076_2.jpg">
       </td>
   </tr>
   <tr>   
       <td>
           <a href="http://mmnrecipes.blogspot.com">
               <font size=+3><b>شگردهاي عددي</b></font><br>
               در پاسخيابي پرسشهاي مهندسي<br>
               با برنامه‏ريزي MATLAB
           </a>
       </td>
       <td>
           <img src="http://www.picestoon.com/out.php/i101775_MMNRecipesFrontCover.jpg">
       </td>
   </tr>
   <tr>   
       <td>
           <a href="http://www.www.www.iran-eng.ir/showthread.php?t=168187&page=3">
               <font size=+2>آموزش مقدماتي html</font>
           </a>
       </td>
       <td>
           <img src="http://www.techpin.com/wp-content/uploads/2009/11/cool-html-codes.jpg">
       </td>
   </tr>
</table>
</body>
</html>
 

monrose

عضو جدید
کاربر ممتاز
اگه بخوایم کدهایی رو که نوشتیم دوباره بعد از مدتی ببینیم چیکار باید بکنیم:que:
 

RIG

متخصص C#.net
خدا به داده من برسه این تر مبتنی بر وب دارم و هیچی بلد نیستم بچه کار کنین الان وقت ندارم کاراتونو بخونم بعدا" یه دفعه ای save میکنم همه رو . دمتون جیز .
 

RIG

متخصص C#.net
دمت گرم

دمت گرم

:smile:سلام اگه کمکی در باره "مبتنی بر وب" میخای میتونم کمکت کنم.

مهندس من راستش هیچی بلد نیستم فقط میام این دور اطراف چرخی میزنم میرم این ترم امتحانم دارم اینو از صفر هم پایین تر بلدم استاد ما هم cs3 نمیدونم واسه کجاست با زبان اصلی درس میده دیوانه کرده مارو منم تو htmlو .... تعطیلم . البته sahar68 کمک میکنه منو انشالله . اما اگه بشه شما از شما هم کمک میگیرم ممنون
 

Similar threads

بالا