HTML Learning

HTML
HTML . HTML .

.
HTML
(www,WorldWideWeb)
.
www
WebPage WebServer
HTTP(HyperTextTransferProtocol).
WebPage (WebBrowser) .
InternetExplorerNetscapeNavigator.
HTML
(HyperTextMarkupLanguage):
<p>Thisisaparagraph.</p>
HTML
HTML (Tag) html htm
Notepad. HTML.
Windows Notepad :
<html>
<head>
<title>Titleofpage</title>
</head>
<body>
Thisismyfirsthomepage.<b>Thistextisbold</b>
</body>
</html>
Test.htm"
Browse File Choose "Test.htm"
Open .:
"D:\MyDocuments\Test.htm". OK
.
HTML
. :
HTML <html> . HTML .
</html> . HTML .
<head> </head> .
<title> </title> . <body>
</body>. <b> </b>.
:HTML
WYSIWYG
HTML
(WhatYou See Is WhatYouGet) FrontPage : ClarisHomePage AdobePageMill

.
HTML.
HTML
HTML > < .
<b> </b>
. <b> <B>
. HTML
. W3C (World Wide Web Consortium)
XHTML.
HTML
<b>Thistextisbold</b>
<b> </b> textisbold This

.
<body> </body>
.
<body>
Thisismyfirsthomepage.<b>Thistextisbold</b>
></body

(Attribute) . HTML
.
<body> . bgcolor
:
<bodybgcolor="red">
<table>. border
:
<tableborder="0">
name="value" :.
.
HTML
<h1> <h6> <h1> <h6> .

HTML..
<html>
<body>
<h1>Thisisaheading</h1>
</body>
></html

<p> HTML
.
<html>
<body>
<p>Thisisaparagraph</p>
<p>Thisisanotherparagraph</p>
</body>
</html>
<br>
. <br>.
<html>
<body>
<p>This<br>isapara<br>graphw ithlinebreaks</p>
</body>
</html>
HTML
HTML <! This is a
)(comment>. HTML
HTML
.
<html>
<body>
<!Thisisacomment>
</html>
</body>
<hr> ..
<html>
<body>
<p>
Thehrtagdefinesahorizontalrule:
<hr>
Thisisaparagraph</p>
</body>
</html>
* HTML
..
. .
* HTML .
HTML .
* (<p>) <br>
<br> HTML.

<html>
HTML.
<body>
HTML.
<h1><h6>
<p>
<br>
<hr>
<!>
HTML .
HTML
HTML
.

<b>
<big>
<em>
<i>
<small>
<strong>
<sub>
<sup>
<ins>
<del>

<code>
<kbd>
<samp>
<tt>
<var>
<pre>

<abbr>
<acronym>
<address>
<bdo>
<blockquote>
<q>
<cite>
<dfn>
.HTML
<html>
<body>
<br>
<strong>Thistextisstrong</strong>
<br>
<big>Thistextisbig</big>
<br>
<em>Thistextisemphasized</em>
<br>
<i>Thistextisitalic</i>
<br>
<small>Thistextissmall</small>
<br>
Thistextcontains<sub>subscript</sub>
<br>
Thistextcontains<sup>superscript</sup>
</body>
</html>
.HTML *
<html>
<body>
<del>Thistextisdeleted.</del>
<br>
<ins>Thistextisinserted.</ins>
</body>
</html>
. *
<html>
<body>
<code>Computercode</code>
<br>
<kbd>Keyboardinput</kbd>
<br>
<tt>Teletypetext</tt>
<br>
<samp>Sampletext</samp>
<br>
<var>Computervariable</var>
</body>
</html>
.<pre> *
<html>
<body>
<pre>
Thisis
preformattedtext.
Itpreservesbothspaces
andlinebreaks.
fori=1to10
printi
nexti
</pre>
</body>
</html>
*

.
<html>
<body>
<abbrtitle="UnitedNations">UN</abbr>
<br>
<acronymtitle="WorldWideWeb">
WWW</acronym>
</body>
></html
10
* HTML.
<html>
<body>
<address>
MNikfazan<br>
BOX1645553367<br>
Tehran<br>
Iran
</address>
</body>
</html>
* <bdo> .
.
<html>
<body>
<bdodir="rtl">
HereissomeHebrew text
</bdo>
</body>
></html
11
* <blockquote>
. <q> HTML
.
<html>
<body>
Herecomesalongquotation:
<blockquote>
Thisisalongquotation.Thisisa
longquotation.Thisisalong
quotation.Thisisalongquotation.
</blockquote>
Herecomesashortquotation:
<q>
Thisisashortquotation
</q>
</body>
</html>
*.
12
<html>
<body>
<cite>Thisisacitation</cite>
<br>
<dfn>Thisisadefinitionterm</dfn>
</body>
</html>
.
HTML .
HTML
.
HTML
< HTML . <
. :
&
&#
< < HTML &lt &#60 .
.
. <b>This text is bold</b>
.
<html>
<body>
<p>
</p>
</body>
></html
13
. HTML
.&nbsp
&#160
&nbsp
nonbreakingspace
&#60
&lt
lessthan
<
&#62
&gt
greaterthan
>
&#38
&amp
ampersand
&
&#34
&quot
quotationmark
"
apostrophe
'
&#39
&#161
&iexcl
invertedexclamationmark
&#162
&cent
cent
&#163
&pound
pound
&#165
&yen
yen
&#169
&copy
copyright
&#171
&laquo
anglequotationmark(left)
&#174
&reg
registeredtrademark
&#176
&deg
degree
&#177
&plusmn
plusorminus
&#178
&sup2
superscript2
&#179
&sup3
superscript3
&#181
&micro
micro
&#185
&sup1
superscript1
14
&#187
&raquo
anglequotationmark(right)
&#188
&frac14
fraction1/4
&#189
&frac12
fraction1/2
&#190
&frac34
fraction3/4
&#191
&iquest
invertedquestionmark
&#215
&times
multiplication
&#247
&divide
division
HTML
. Name HEX RGB
.
<bodybgcolor="#000000">
<bodybgcolor="rgb(0,0,0)">
<bodybgcolor="black">
Name
.256256256 16 rgb .
.
ColorRGB
ColorHEX
ColorName
rgb(0,0,0)
#000000
black
rgb(255,0,0)
#FF0000
red
rgb(0,255,0)
#00FF00
lime
rgb(0,0,255)
#0000FF
blue
rgb(255,255,0)
#FFFF00
yellow
rgb(0,255,255)
#00FFFF
aqua
rgb(255,0,255)
#FF00FF
fuchsia
rgb(192,192,192)
#C0C0C0
silver
rgb(255,255,255)
#FFFFFF
white
Color
ColorHEX
ColorName
#000000
RGB(0,0,0)
#404040
RGB(64,64,64)
#808080
RGB(128,128,128)
#C0C0C0
RGB(192,192,192)
#E8E8E8
RGB(232,232,232)
15
Color
RGB(255,255,255)
#FFFFFF
<html>
<bodybgcolor="#FFFF00">
</body>
</html>
<html>
<bodybgcolor="rgb(0,255,0)">
</body>
</html>
HTML
HTML <font>.
FrontPage .
(CSS) . <font>
. <font> face size color
.
size="number"
size="2"
size="+number"
size="+1"
size="number"
size="1"
face="facename"
face="Times"
color="colorvalue"
color="#eeff00"
color="colorname"
color="red"
16
<html>
<body>
<p>
<fontsize="2"face="Verdana"
color="#ff00ff">
Thisisaparagraph.
</f ont>
</p>
<p>
<fontsize="5"face="Times"
color="blue">
Thisisanotherparagraph.
</f ont>
</p>
</body>
</html>
HTML
<a> href
HTML <a> a anchor
) .(
: HTML..
<ahref="url">Texttobedisplayed</a>
href
(hyperlink) . Yahoo.
<ahref="http://www.yahoo.com/">VisitYAHOO!</a>
!VisitYAHOO :
target
target .
Yahoo.
<ahref="http://www.yahoo.com/"
target="_blank">VisitYAHOO!</a>
Target
target="_blank".
target="_self".
17
(parentframe)
target="_parent"
).(.
)
target="_top"
(
name
name .
.:
<aname="label">Texttobedisplayed</a>
#
. test1.htm
<p>Thisisatext.Thisisatext.Thisisatext.</p>
<aname="tips">ReadtheUsefulTipssection</a>
test2.htm
<ahref="test1.htm#tips">
ReadtheUsefulTipssection</a>
test2.htm test1.htm tips .

.
test.htm UsefulTips tips
.
18
<ahref="#tips">UsefulTips</a>
<p>Thisisatext.<br>Thisisatext.<br>Thisisatext.</p>
<aname="tips">ReadtheUsefulTipssection</a>
EMail
EMail
: .
<p>MyEMailadressis:you@yourname.com</p>
EMail EMail
...
:
<a
href="mailto:you@yourname.com?Subject=Hello%20again">
SendMail</a>
19
<html>
<body>
<p>Thisisamailtolink:
<ahref="mailto:
elearning@tehranedu.org?cc=someoneelse@tehranedu.org&
bcc=andsomeoneelse2@tehranedu.org&
subject=Conference&
body=You%20are%20invited%20to%20a%20big%20
Sendmail!</a>
</p>
<body>
<html>
tes
OutlookExpress
.
:
* /
html yourname.com href="http://www.yourname.com/html"
/
href="http://www.yourname.com/html/" :
* .
.
* href 20%
.
HTML
<img> src
HTML <img> .
.
(src(source.
<imgsrc="http://www.you.com/product.gif">
HTML <imgsrc="product.gif">
. img .
.
<td><imgsrc="product.gif"></td>
product.gif).(
alt
20
<imgsrc="boat.gif"alt="BigBoat">
Big Boat
alt
. :
<bodybackground="background.jpg">
background.jpg .
.
.
..
<html>
<bodybackground="background.jpg">
<p>thisisatest.
thisisatest.
thisisatest.
thisisatest.</p>
</body>
</html>
align
..
21
<html>
<body>
<p>
Animage<imgsrc="test.bmp"align="middle">
inthetext
</p>
<p>
Animage
<imgsrc="test.bmp"align="top">
inthetext
</p>
<p>
Animage
<imgsrc="test.bmp"align="bottom">
inthetext
</p>
</body>
</html>
align
..
<html>
<body>
<p>
<imgsrc="test.bmp"align="left">
Aparagraphw ithanimage.Thealign
attributeoftheimageissetto"lef t".
Theimagew illfloattotheleftofthistext.
</p>
<p>
<imgsrc="test.bmp"align="right">
Aparagraphw ithanimage.Thealign
attributeoftheimageissetto"right".
Theimagew illfloattotherightofthistext.
</p>
</body>
</html>
. height width
.
22
<html>
<body>
<imgsrc="hackman.gif"w idth="20"height="20">
<imgsrc="hackman.gif">
<imgsrc="hackman.gif"w idth="70"height="70">
</body>
</html>
<map> <area>.
.
shape.
* shape="circle" coords . coords="39,
41, 32" . href
<a>
.
* shape="rect" coords="77, 12, 112,72"
.
* shape="polygon" :
.coords="146,7,124,68,193,64,183,53,184,20"
<map> name <img>
<map> <img> usemap
<map> . <map> # .:
usemap="#picture"
<html>
<body>
<mapname="picture">
<areahref="circle.htm"shape="circle"
coords="30,33,27"alt="circle">
<areahref="rectangle.htm"shape="rect"
coords="64,6,95,60"alt="rectangle">
<areahref="polygon.htm"shape="polygon"
coords="126,1,106,56,166,53,158,46,158,15"
alt="polygon">
</map>
<imgborder="0"src="picture.gif"
usemap="#picture">
<body>
><html
23
buttonnext.gif nextpage.htm.
<ahref="nextpage.htm"><imgsrc="buttonnext.gif"></a>
HTML
HTML <table> . <tr>
<td> .
..
* border="1".
<html>
<body>
<tableborder="1">
<tr>
<td>row 1,cell 1</td>
</tr>
<tr>
</tr>
</table>
</body>
</html>
<html>
<body>
<table>
<tr>
</tr>
<tr>
</tr>
</table>
</body>
></html
24
border
border .
. border
.
<th>..
<html>
<body>
<tableborder="1">
<tr>
<th>Heading</th>
<th>AnotherHeading</th>
</tr>
<tr>
</tr>
<tr>
</tr>
</table>
</body>
</html>
caption >
<html>
<body>
<tableborder="1">
<caption>Caption</caption>
<tr>
</tr>
<tr>
</tr>
</table>
</body>
</html>
25
.
(<td/><td>).
&nbsp <td/>nbsp&<td> <td/><td>

.
colspan
.
<html>
<body>
<tableborder="1">
<tr>
<th>Name</th>
<thcolspan="2">Telephone</th>
</tr>
<tr>
<td>BillGates</td>
<td>55577854</td>
<td>55577855</td>
</tr>
</table>
</body>
</html>
rowspan
.
26
<html>
<body>
<tableborder="1">
<tr>
<th>FirstName:</th>
<td>BillGates</td>
</tr>
<tr>
<throw span="2">Telephone:</th>
<td>55577854</td>
</tr>
<tr>
<td>55577855</td>
</tr>
</table>
</body>
</html>
cellpadding
. .
<html>
<body>
<tableborder="1"cellpadding="10">
<tr><td>First</td>
<td>Row </td>
</tr>
<tr>
<td>Second</td>
<td>Row </td>
</tr>
</table>
</body>
</html>
cellspacing
. .
27
<html>
<body>
<tableborder="1"cellspacing="10">
<tr>
<td>First</td>
<td>Row </td>
</tr>
<tr>
<td>Second</td>
<td>Row </td></tr>
</table>
</body>
</html>
.bgcolor*
<html>
<body>
<tableborder="1"bgcolor="red">
<tr>
<tdbgcolor="#00ff00">First</td>
<td>Row </td>
</tr>
<tr>
<td>Second</td>
<td>Row </td></tr>
</table>
</body>
</html>
*width
.pixel
. background *
28
<html>
<body>
<tableborder="1"height="200"w idth="200"background="background.jpg">
<tr>
<tdbackground="test.bmp">First</td>
<td>Row </td>
</tr>
<tr>
<td>Second</td>
<td>Row </td></tr>
</table>
</body>
</html>
*align
valign justify
.
<html>
<body>
<tableborder="1"height="200"w idth="300"
<tr>
<tdalign="lef t">First</td>
<tdalign="center">Second</td>
<tdalign="right">Third</td>
</tr>
<tr>
<tdvalign="top">First</td>
<tdvalign="middle">Second</td>
<tdvalign="bottom">Third</td>
</table>
</body>
</html>
<tdalign="left/center/right/justify">MakeUp</td>
<tdvalign="top/middle/bottom">MakeUp</td>
below above void box border frame *

. .rhslhs vsideshsides
29
<h4>Withframe="border":</h4>
<tableframe="border">
<tr>
<td>First</td><td>Row </td>
</tr>
<tr>
<td>Second</td><td>Row </td>
</tr>
</table>
<h4>Withframe="box":</h4>
<tableframe="box">
<tr>
</tr>
<tr>
</tr>
</table>
<h4>Withframe="void":</h4>
<tableframe="void">
<tr>
</tr>
<tr>
</tr>
</table>
30
<h4>Withframe="above":</h4>
<tableframe="above">
<tr>
</tr>
<tr>
</tr>
</table>
<h4>Withframe="below ":</h4>
<tableframe="below ">
<tr>
</tr>
<tr>
</tr>
</table>
<h4>Withframe="hsides":</h4>
<tableframe="hsides">
<tr>
</tr>
<tr>
</tr>
</table>
31
<h4>Withframe="vsides":</h4>
<tableframe="vsides">
<tr>
</tr>
<tr>
</tr>
</table>
<h4>Withframe="lhs":</h4>
<tableframe="lhs">
<tr>
</tr>
<tr>
</tr>
</table>
<h4>Withframe="rhs":</h4>
<tableframe="rhs">
<tr>
</tr>
<tr>
</tr>
</table>
HTML .
(layout) .
.
.
HTML
HTML.
<ul> <li>
. .
32
<html>
<body>
<ul>
<li>Coffee</li>
<li>Milk</li>
</ul>
</body>
</html>
... .
.
<html>
<body>
<ul>
<li><p>Thisisaparagraph.Thisisaparagraph.Thisisaparagraph.Thisisaparagraph.</p></li>
<li><tableborder="1"><tr>
</tr><tr>
</tr></table></li>
</ul>
</body>
</html>
.
<ol> <li> .
.
<html>
<body>
<ol>
<li>Coffee</li>
<li>Milk</li>
</ol>
</body>
</html>
33
.
<dl> <dt>
<dd> ..
<html>
<body>
<dl>
<dt>Coffee</dt>
<dd>Blackhotdrink</dd>
<dt>Milk</dt>
<dd>Whitecolddrink</dd>
</dl>
</body>
</html>
type

. (disc , circle , square)
"iiiiii" "ABC""abc" "IIIIII"IiAa.

type.
<html>
<body>
<h4>Squarebulletslist:</h4>
<ultype="square">
<li>Apples</li>
<li>Bananas</li>
<li>Lemons</li>
<li>Oranges</li>
</ul>
</body>
</html>
type
34
<html>
<body>
<h4>Romannumberslist:</h4>
<oltype="I">
<li>Apples</li>
<li>Bananas</li>
<li>Lemons</li>
<li>Oranges</li>
</ol>
</body>
</html>
)
(.
<html>
<body>
<ul>
<li>Coffee</li>
<li>Tea
<ul>
<li>Blacktea</li>
<li>Greentea</li>
</ul>
</li>
<li>Milk</li>
</ul>
</body>
</html>
HTML
HTML .
. <form>.
<input>
<input>.
type="text"
. .
. 20
size .(size=40)
35
<html>
<body>
<form>
Firstname:
<inputtype="text"name="firstname">
<br>Lastname:
<inputtype="text"name="lastname">
</form>
</body>
</html>

type="radio" .
. checked input
.
<inputtype="radio"name="s"value="male"checked>
<html>
<body>
<form>
<inputtype="radio"name="s"value="male">Male<br>
<inputtype="radio"name="s"value="female">Female
</form>
</body>
</html>
type="checkbox" . . checked
input.
><inputtype="checkbox"name="bike"checked
36
<html>
<body>
<form>
<inputtype="checkbox"name="bike">
Ihaveabike<br>
<inputtype="checkbox"name="car">
Ihaveacar
</form>
</body>
</html>

* .
type="password".
<html>
<body>
<form>
Username:
<inputtype="text"name="user"><br>
Passw ord:
<inputtype="passw ord"name="pass">
</form>
</body>
</html>
type="button" value="text" .
<button>.
.
JavaScript .
37
<html>
<body>
<form>
<input
type="button"value="Button1">
<br><br>
<button>Button2</button>
</form>
</body>
</html>
dropdown
. . <select>
<option> .
selected <option>
..
<html>
<body>
<form>
<selectname="cars">
<optionvalue="volvo">Volvo
<optionvalue="saab">Saab
<optionvalue="fiat">Fiat
<optionvalue="audi">Audi
</select>
</form>
</body>
</html>
textarea
.
. .
<textarea>
rows cols .
38
<html>
<body>
<form>
<textareaname="text1"row s="5"cols="20">
Thecatw asplayinginthegarden.
</textarea>
</form>
</body>
</html>
<fieldset> <legend>
.
<html>
<body>
<fieldset>
<legend>Healthinformation:</legend>
<form>
Height<inputtype="text"size="3">
Weight<inputtype="text"size="3">
</form>
</fieldset>
</body>
</html>
action
Submit . action
. ASP
CGI. method="get"
ASP CGI....
<html>
<body>
<formname="input"action="action.asp"method="get">
Username:
<inputtype="text"name="user">
<inputtype="submit"value="Submit">
</form>
</body>
></html
39
.
<inputtype="reset">.
(Frame)HTML
HTML .
HTML .
.
<frameset>
HTML . Frameset
.
.
<frame>
HTML .
. %25 %50 . frame_a.htm
frame_b.htmframe_c.htm.
<html>
<framesetcols="25%,50%,25%">
<framesrc="frame_a.htm">
<framesrc="frame_b.htm">
<framesrc="frame_c.htm">
</frameset>
</html>
cols
<html>
<framesetrow s="25%,50%,25%">
</frameset>
</html>
frame_b.htm frame_a.htm
frame_c.htm
40
.
noresize <frame>.
<iframe>
HTML.
<iframe> .
.
<html>
<body>
<iframesrc="frame_c.htm">
</iframe>
Someolderbrow sersdon'tsupportiframes.Iftheydon't,theif ramew illnot
bevisible.
</body>
</html>
<html>
<framesetrow s="50%,50%">
<framesetcols="25%,75%">
</frameset>
</frameset>
</html>
)
. contents.htm
. frame_c.htm
.
<ahref="frame_a.htm"target="showframe">Framea</a>
<br>
<ahref="frame_b.htm"target="showframe">Frameb</a>
<br>
<ahref="frame_c.htm"target="showframe">Framec</a>
: Framea frame_a.htm
.
41
<html>
<framesetcols="120,*">
<framesrc="contents.htm">
<framesrc="f rame_c.htm"name="show frame">
</frameset>
</html>
<frame>
. <noframe>
.
HTML
<head>
HTML . <head>
. HTML <head>
<title>: <base> <link> <meta> <style> .<script>
<title>
. Thetitle
..
<html>
<head>
<title>Thetitle</title>
</head>
<body>
<p>Thistextisdisplayed</p>
</body>
</html>
<base>
42
target .
<a> . target .
<head><basetarget="_blank"></head>
HTML Yahoo
.
<ahref="http://www.yahoo.com"target="_blank">
Thislink</a>
<ahref="http://www.yahoo.com">Thislink</a>
<meta>
<meta> .
.HTML name
content . .

meta .
.
HTML.
<metaname="description"
content="ThispageisatutorialsonHTML.">
HTML.
<metaname="keywords"
content="HTML,CSS,JavaScript,VBScript">
meta .
. youname.com
yournewname.com
meta httpequiv content:
<metahttpequiv="Refresh"
content="5url=http://www.yournewname.com">
5 content
0 .
:
<ahref="http://www.yournewname.com">
http://www.yournewname.com</a>
< link>
43
CSS CSS . Cascading Style Sheets

.
.
CSS .
)<link> (<head> CSS
.
<head>
<linkrel="stylesheet"
type="text/css"href="mystyle.css">
</head>
mystyle.css
. CSS notepad
HTML CSScss. . CSS
:
hr{color:sienna}
p{marginleft:20px}
body{backgroundimage:url("images/back40.gif")}
<style>
CSS . CSS
HTML. <style> .:
<head>
<styletype="text/css">
hr{color:sienna}
p{marginleft:20px}
body{backgroundimage:url("images/back40.gif")}
</style>
</head>
.
<script>
vbscript javascript ... HTML
.
*java MyScripts.js.
<scriptlanguage="javascript"src="MyScripts.js">
</script>
java HTML.
<scripttype="text/javascript">
document.write("HelloWorld!")
</script>
!www.arsanjan.blogfa.com
44

HTML Learning

Încărcat de

Informații document

Drepturi de autor

Formate disponibile

Partajați acest document

Partajați sau inserați document

Opțiuni de partajare

Vi se pare util acest document?

Este necorespunzător acest conținut?

Drepturi de autor:

Formate disponibile

HTML Learning

Încărcat de

Drepturi de autor:

Formate disponibile

HTML

(WhatYou See Is WhatYouGet) FrontPage : ClarisHomePage AdobePageMill

<b> </b> textisbold This

<h1> <h6> <h1> <h6> .

< < HTML &lt &#60 .

test2.htm test1.htm tips .

&nbsp <td/>nbsp&<td> <td/><td>

below above void box border frame *

"iiiiii" "ABC""abc" "IIIIII"IiAa.

meta httpequiv content:

CSS CSS . Cascading Style Sheets

S-ar putea să vă placă și