آموزش HTML برنامه نویسی تحت وب 2

NOOB · 2010/5/28

به آموزش HTML خوش آمدید
سوالاتتون رو همین جا بنویسید

NOOB · 2010/5/28

پاسخ : آموزش HTML برنامه نویسی تحت وب 2

يک فايل HTML از دو بخش Body و Head ،تشکيل می شود. شکل ساده يک فايل HTML به صورت زير است.

<HTML>

<HEAD>
<TITLE> This is the title</TITLE>
<HEAD/>

<BODY>
This is the the body
<BODY/>

<HTML/>

NOOB · 2010/5/28

پاسخ : آموزش HTML برنامه نویسی تحت وب 2

در برچسب HEAD از برچسب به نامهای TITLE و BASE و META استفاده می شود.

<HEAD>

<TITLE> </TITLE>

<META > </META >

<BASE >

<HEAD/>
TITLE:
برای تعيين لقب صفحه (چيزی که در قسمت Status Bar ديده می شود).

META:
1) برای تعيين نام و منبعی که برنامه توسط آن نوشته شده.

2) بهنگام کردن صفحات web توسط اين برچسب انجام می شود.

3) انتقال به يک صفحه ديگر web در زمان معيين.

مثال برای حالت اول: در اين حالت برای وارد کردن آدرس web خودمان به موتورهای جستجو در web (مثل yahoo و google و ...) از META استفاده می کنيم:

<META name="keyword"{اجباری} content="Hedayat, students,zahiri,yaghoubi,schoolnet")>
<META name="description"{اجباری} content="This is Hedayat high school">

مثال برای حالت دوم و سوم:

<META name="vali"{دلخواه} http_equiv="refresh" content="زمان بر حسب ثانيه">
با اين برچسب صفحه web بعد از 1 دقيقه بهنگام (refresh) خواهد شد.

در مثال بالا اگر در قسمت content به صورت زير عمل کنيم صفحه web بعد از 60 ثانيه به www.schoolnet.ir خواهد رفت:

Content="60; URL= http://www.schoolnet.ir"

BASE:
برای مشخص کردن مبدا آدرس دهی از صفحات web می باشد.

<BASE href="آدرس">

<BASE href="http://www.schoolnet.ir/~zahiri/index.htm">

نکته مهم: در برنامه نويسی HTML برچسب ها به دو صورت با پايان و بی پايان نوشته می شوند.

1. <TAG>…………………………………</TAG> با پايان
2. <TAG> بی پايان

Mehdi.E · 2010/5/28

پاسخ : آموزش HTML برنامه نویسی تحت وب 2

میشه یه بخشم وا3 mysql و database بذاری؟؟ کلا سوال راجع به html کمه!!!!

NOOB · 2010/5/28

پاسخ : آموزش HTML برنامه نویسی تحت وب 2

چشم دوست عزیز
اونا رو هم می ذارم

قسمت دوم يک فايل HTML را Body تشکيل می دهد که دارای Attributeهای زير می باشد.

<BODY bgcolor = “رنگ پس زمينه صفحه”
background = “آدرس عکسی که به عنوان پس زمينه در صفحه وب قرار می گيرد. “
topmargin = “يک فضای خالی بالای صفحه بر حسب پيکسل ايجاد ما کند”
leftmargin = “يک فضای خالی سمت چپ صفحه بر حسب پيکسل ايجاد ما کند”
text ="color” رنگ متن را مشخص می کند
link = “color”
alink = “color” (active link)
vlink = “color” (visited link)>

نکته مهم: در برنامه HTML و در نوشتن تگها بزرگ و يا کوچک نوشتن حروف هيچ تاثيری ندارد.

NOOB · 2010/5/28

پاسخ : آموزش HTML برنامه نویسی تحت وب 2

Font:
با اين برچسب می توانيم مشخصات متن را به دلخواه خود درآوريم و فرمت کلی آن به صورت زير است.

<FONT> ........</FONT>

اين تگ دارای Attributeهای زير می باشد:

1. color: رنگ متن
2. size: اندازه متن
3. face: نوع متن

مثال: می خواهيم کلمه Schoolnet را با فونت نازنين و با اندازه normal و رنگ آبی بنويسيم.

<HTML>

<HEAD>
</HEAD>

<BODY>
<FONT size = "3" color ="blue"> Schoolnet </FONT>
</BODY>

</HTML>

NOOB · 2010/5/28

پاسخ : آموزش HTML برنامه نویسی تحت وب 2

ANCHOR:
در HTML بوسيله تگ <a> … </a> می توانيم يک متن يا عکس را به صفحه ای ديگر پيوند دهيم (Hyper link).مهمترين Attribute در اين تگ، href می باشد.

فرمت کلی اين تگ به صورت زير است.

<a href = “URL”> text/image </a>

مثال: در جمله click here to go to zahiri home page کلمه zahiri را به آدرس index.html لينک کنيم:

<BODY>

<p>
click here to go to
<a href ="http://www.schoolnet.ir"> schoolnet </a>
home page
</p>

</BODY>

نمايش صفحه ای که دارای HTML بالاست...

همانطور که می بينيد کلمه مورد نظر به آدرسی که می خواهيم ، لينک شده است

تگهايی که به وسيله آنها متن را فرم بندی می کنيم:

PARAGRAPH
<P> … </P>: در اين تگ همه موضوعات آن در يک خط نوشته شده يا يک پاراگراف ايجاد می شود که در صورت بوجود آمدن پاراگراف در زير خط اول، خط دوم را با فاصله زياد می نويسد.برای حل اين مشکل از تگ
استفاده می کنيم.
تگ <P> دارای يک Attribute است:

<A align="left/center/right">

BREAK

: اين تگ از تگهايی است که پايان ندارد و آن را هر کجا که قرار دهيم کلمه بعدی را در يک خط پائين تر ولی با کمتر می نويسد.

NO BREAK
<NOBR> … </NOBR>: اگر بخواهيم در آخر خط شکستگی نداشته باشيم بين دو بخشی که شکسته می شود از اين تگ استفاده می کنيم.

مثال: <NOBR>a2</NOBR>

a, 2 را هرگز از هم جدا نمی کند.

HEADING

در HTML دارای شش نوع HEADING هستيم.

<H1> … </H1> بزرگترين
<H2> … </H2>
.
.
<H6> … </H6> کوچکترين

خود اين تگها خاصيت راست چين و چپ چين و يا وسط چين شدن را هم دارند که برای فعال کردن آن از روش زير استفاده می کنيم.

مثال: <H2 align=”center”> vali </H2>

HR
تگ <HR> برای ما تک خط افقی سه بعدی ايجاد می کند و دارای Attributeهای زير می باشد.

<HR align="left/center/right" width=”طول خط بر حسب پيکسل يا درصد”
size=”ضخامت خط بر حسب پيکسل”
noshade: با نوشتن اين کلمه خط سه بعدی نمی شود .
color=”رنگ خط”>

PRE
در HTML هر چيزی را که بين تگ <PRE> … </PRE> به هر صورتی که بنويسيم با همان شکل در صفحه وب نشان می دهد.
مثال:

<PRE> Vali
Ali …
Reza a b cd
</PRE>

اين توشته ها در صفحه وب به اين صورت ديده خواهد شد.

همانطور که می بينيد دقيقا همان طور که متن در HTML، نوشته شده است در صفحه اصلی ديده می شود.

DIV:
برای ما يک بلوک در متن ايجاد می کند.

مثال :-<

DIV style="color: red"> … … </DIV>

استفاده ديگر برای تعيين Direction می باشد که سمت نوشتن را از راست به چپ يا چپ به راست می کند.

<DIV dir="rtl/ltr"> … … </DIV>
rtl= right to left
ltr= left to right

از Attributeهای اين تگ خاصيت align می باشد:

<DIV align=”left/center/right”> … … </DIV>

در قديم از تگهای ديگری نيز برای ويرايش متن استفاده می کردند که اکنون بيشتر آنها منسوخ شده اند واستفاده ای ندارند.
در زير به برخی از آنها اشاره می کنيم:
<em> … </em>: دقيقا کار تگ <I> … </I> را می کند ولی نشان می دهد که از نظر منطقی تاکيدی روی متن می باشد.
<strong> … </strong>: دقيقا کار تگ <B> … </B> را انجام می دهد.
<cite> … </cite>: برای نوشتن اسم مقاله يا کتاب ( آنرا italic می کند)
<code> … </code>: برای نوشتن قطعه برنامه از آن استفاده می شود. (با خط Mono Scape )
<kbd> … </kbd>: ورودی های برنامه را با اين تگ می نوشته اند.(M.S)
<samp> … </samp>: برای نوشتن مثال از اين تگ استفاده می شده.(M.S)
<var> … </var>:متغييرها را Italic می کند.
<tt> … </tt>: متن را Mono Scape می کند.( يک نوع Font است.)
<strike> … </strike>: يک خط وسط متن داخل خود می کشد.

<STRIKE> abc </STRIKE>

که نتيجه کار چنين است.

<blockquote> … </blockquote>:
<big> … </big>: متن که بين آن باشد يک فونت درشتتر می نويسد.
<small> … </small>: متن که بين آن باشد يک فونت کوچکتر می نويسد.
برای درست کردن توان و انديس دو تگ داريم.
مثال: برای توشتن و از دو تگ زير استفاده می کنيم.

a<SUB> 1 </SUB>
a<SUP> 20 </SUP>

که نتيجه کار چنين است

<blink> … </blink>: اين تگ فقط در NetScape کار می کند. متن يا عکس که داخل اين تگ قرار می گيرد در صفحه چشمک می زند.

NOOB · 2010/5/28

پاسخ : آموزش HTML برنامه نویسی تحت وب 2

پایان

armin-m · 2012/8/2

پاسخ : آموزش HTML برنامه نویسی تحت وب 2

سلام دوستان!! داشنم یه نگاهی به آموزش های html می کردم دیدم هیچ کدوم کامل و درس حسابی نیس!!
برای همین توی این تاپیک می خوام آموزش html رو بدم در ضمن منبع این آموزش sampage.ir هست .
html پیشنیازی برای طراحی و برنامه نویسی تحت وب هست!!
سر فصل های کنونی:
مقدمه html
فصل 1 ، ساخت فايل HTML و آشنايي با تگ هاي اوليه
فصل 2 , تگ های ویرایش متن1
فصل 3 , تگ های ویرایش متن2

armin-m · 2012/8/2

پاسخ : آموزش HTML برنامه نویسی تحت وب 2

مقدمه html:

html چیست؟!
html مخفف Hyper text markup language می باشد. اچ تی ام ال پایه ی طراحی وب می باشد ، برای ایجاد هر صفحه ای در وب باید از اچ تی ام ال کمک گرفت!!استفاده از زبان های برنامه نویسی تحت وب (...PHP,JAVA SCRIPT, ASP.NET) بدون کمک HTML غیر ممکن است! همچنین از اچ تی ام ال می توان برای ایجاد و زیبا سازی صفحات وب استفاده کرد.

html را در کجا باید نوشت؟!
در واقع html یک زبان برنامه نویسی نیست!! و تنها یک استانداردی برای ایجاد صفحات وب می باشد و تمامی مرورگر ها این استاندارد ها را عایت می کنند، بنابر این html را می توان به راحتی در محیط ویندوز نوشت و با یک مرور گر آن را باز کرد!!

تگ html چیست؟!
tag درواقع شناسه ها یا همان قوانین HTML هستند! یک تگ همیشه با علامت کوچک تر ریاضی یعنی > و با علامت بزرگتر ریاضی یعنی < به پایان می رسد برای مثال به این تگ توجه کنید:

در فصل بعد چه می آموزیم؟!
در فصل بعد با ایجاد یک فایل html و ساخت اولین صفحه html آشنا خواهیم شد!! همینطور چندین تگ html معرفی می شود!!

armin-m · 2012/8/2

پاسخ : آموزش HTML برنامه نویسی تحت وب 2

فصل 1 ، ساخت فايل HTML و آشنايي با تگ هاي اوليه:
همينطور که در پايان فصل پيش گفتيم اين جلسه مي خوايم يه فايل HTML درست کنيم.

محيطي که توش مي تونيد کد نويسي کنيد Notepad ويندوز هست!!! يه آموزش کوچيک هم درباره ي Notepad ويندوز ميدم ولي ما قراره از از Notepad++ استفاده کنيم و کل آموزش توي Notepad++ انجام ميشه. نرم افزار Notepad++ رو از اینجا مي تونيد دانلود کنيد! حجمش 5.43 مگابايت هست!!

ساخت يک فايل HTML توسط Notepad ويندوز:
ابتدا يک فايل Text درست کنيد ، فايل رو با Notepad باز کنيد از منوي File روي Save As... کليک کنيد. در صفحه ي باز شده در بخش File Name نام فايلتون رو بنويسيد و پسوند html. يا htm. رو در آخر اسمتون اضافه کنيد. در بخش Save As Type گزينه All Files رو انتخاب کنيد و همينطور Encoding رو روي گزينه UTF-8 قرار بديد و روي Save کليک کنيد! لازم به ذکر است که ما قراره کلا توي Notepad++ کار کنيم و اين آموزش رو دادم که فقط بلد باشيد با Notepad معمولي ويندوز هم يه فايل Html درست کنيد!!

آموزش ساخت فايل HTML توسط Notepad++ :
نرم افزار Notepad++ رو باز کنيد از منوي File روي New کليک کنيد تا فايل جديدي ايجاد شود ، سپس روي Language کليک کرده و از منوي H گزينه HTML رو انتخاب کنيد! سپس روي منوي Encoding کليک کرده و UTF-8 رو انتخاب کنيد . اکنون فايلتون رو سيو کنيد! شما يک فايل HTML ساخته ايد!!!

در ضمن مي تونيد اون فايل html رو با مرورگرتون باز کنيد و ببينيدش!! البته يه صفحه سفيد ظاهر ميشه

چون هيچي ننوشتيم توش

خوب در اين جا با چند تا تگ اوليه ميخوايم آشنا شيم:
اولين تگ ، تگ <html> مي باشد ، تگ <html> نشان دهنده شروع کد نويسي به زبان html است!! اين تگ پايان و آغازي دارد يعني يک جا بايد کد نويسي به زبان html شروع شود و جاي ديگر به پايان برسد تمامي تگ هاي HTML که شروع و پايان دارند براي پايان آن با /> شروع مي شود به مثال زير توجه کنيد

کد:

<html>
کد هاي اچ تي ام ال در اين قسمت قرار مي گيرند
</html>

تگ <body> :
هرچيزي که قرار است توي مرورگر نمايش داده شود توي اين تگ قرار مي گيرد. اين تگ هم ، مثل تگ <html> شروع و پايان دارد! به مثال زير توجه شود

کد:

<html>
<body>
اين اولين کار من در وب است
</body>
</html>

اگر اين کد را در فايل html ذخيره کنيد و آن را با مرورگرتان باز کنيد مي بينيد که در گوشه بالا سمت چپ مرورگرتان نوشته "اين اولين کار من در وب است" !!

تگ <head> و <title>
اين تگ مربوط به بار گذاري صفحات CSS , JAVA SCRIPT و غيره مي باشد که ما فعلا با ايناش کار نداريم!! فعلا چيزي که از اين تگ به درد ما مي خوره عنوان صفحه هست!! همون عنواني که بالاي مرورگرتون نوشته شده، براي نوشتن عنوان از تگ <title> هم استفاده مي شود اين تگ هم داراي شروع و پايان مي باشد و هر متني که در بين دو تگ <title> و <title/> قرار بگيرد به عنوان عنوان در مرورگر شناخته مي شود . به مثال زير توجه شود:

کد:

<html>
<head>
<title>
اين يک عنوان است
</title>
</head>
<body>
اين اولين کار من در وب است!
</body>
</html>

اين کد رو امتحان کنيد!!
خوب درس امروزمون تموم شد!!! يکم طولاني شد ببخشيد!!
جلسه بعد با تگ هاي ويرايش متن آشنا ميشيم!!

fdd · 2012/8/2

پاسخ : آموزش HTML برنامه نویسی تحت وب 2

ببخشید از کجا باید notepad++ رو دانلود کنم؟ "اینجا"تون کار نمیکنه!

مهسـا · 2012/8/2

پاسخ : آموزش HTML برنامه نویسی تحت وب 2

به نقل از fdd :
ببخشید از کجا باید notepad++ رو دانلود کنم؟ "اینجا"تون کار نمیکنه!

http://notepad-plus-plus.org/download/v6.1.5.html
من از اینجا خودم دانلودش کردم.

armin-m · 2012/8/2

پاسخ : آموزش HTML برنامه نویسی تحت وب 2

معذرت می خوام لینک کپی نشده بود

ممنون از مهسا که لینک رو قرار داد

zeynab75 · 2012/8/2

پاسخ : آموزش HTML برنامه نویسی تحت وب 2

منم تو آموزشش میتونم کمک کنم

armin-m · 2012/8/2

پاسخ : آموزش HTML برنامه نویسی تحت وب 2

به نقل از ~Dr.Shariati~ :
منم تو آموزشش میتونم کمک کنم

اگه کمک خواتم حتما کمک می گیریم ازتون

فعلا دارم جلسه اول آموزش شبکه رو می نویسم!!

ibtkm · 2012/8/2

پاسخ : آموزش HTML برنامه نویسی تحت وب 2

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

DaMoN SaLvAtOrE · 2012/8/2

پاسخ : آموزش HTML برنامه نویسی تحت وب 2

آقا من یه سوال برام پیش اومد....قبل از تگ <title> تگ <head> رو نوشتی ولی خب بدون تگ هد هم عنوان نوشته میشه،دلیل خاصی داشت که تگ <head> رو نوشتی؟

armin-m · 2012/8/2

پاسخ : آموزش HTML برنامه نویسی تحت وب 2

به نقل از مهدی صفری :
آقا من یه سوال برام پیش اومد....قبل از تگ <title> تگ <head> رو نوشتی ولی خب بدون تگ هد هم عنوان نوشته میشه،دلیل خاصی داشت که تگ <head> رو نوشتی؟

این چیزی نیس تازه

شما کلا هیچی هم ننویسی فقط ببنویسی "این اولین کار من است" نشونش میده

خواستم نگم که گیچ نشید

استاندارد نویسیش اینجوریه برا همین نوشتم

DaMoN SaLvAtOrE · 2012/8/2

پاسخ : آموزش HTML برنامه نویسی تحت وب 2

من متن وسط صفحه رو نگفتم که بدون کد هم نمایش داده میشه

منظورم عنوان سایت بود

آموزش HTML برنامه نویسی تحت وب 2

کاربر فوق‌فعال

کاربر فوق‌فعال

کاربر فوق‌فعال

کاربر فوق‌فعال

کاربر فوق‌فعال

کاربر فوق‌فعال

کاربر فوق‌فعال

کاربر فوق‌فعال

کاربر نیمه‌فعال

کاربر نیمه‌فعال

کاربر نیمه‌فعال

کاربر نیمه‌حرفه‌ای

لنگر انداخته

کاربر نیمه‌فعال

کاربر فوق‌حرفه‌ای

کاربر نیمه‌فعال

کاربر خاک‌انجمن‌خورده

مهدی صفری

کاربر نیمه‌فعال

مهدی صفری