HTML (HyperText Markup Language, ) , -. HTML , (). HTML . , HTML ( font), () . HTML. CSS.
HTML , CSS .
HTML, , World Wide Web (World Wide Web Consortium, W3C). , HTML, World Wide Web Consortium http://www.3w.org
HTML. 1999 - HTML 4.01. HTML (DHTML). DHTML (DOM), , , . , JavaScript. HTML , HTML. HTML-.
HTML 5.0 (2012.) , .
HTML Web-, , , . HTML- , , , . HTML- .
HTML- HTML- .html .htm. HTML- Web-, .
HTML () , . , "" "", : <b>, <a>, <img>. :
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
<title> -</title>
</head>
<body>
<h1> </h1>
<p align=center> .</p>
</body>
</html>
|
|
() (). (-) (-), , :
<html> html </html>
. , :
<i> <b> </b> </i>
: , , .
. , , <hr>, . XHTML , , />.
DOCTYPE.
html DOCTYPE, HTML. . HTML (dtd , w3.org) HTML 4.01, DOCTYPE: Strict, HTML 4.01Transitional HTML 4.01Frameset.
(Strict)- , (deprecated), :
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">
(Transitional) HTML:
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
(Frameset) :
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Frameset//EN" "http://www.w3.org/TR/html4/frameset.dtd">
HTML5 DOCTYPE
<!DOCTYPE html>
, ,
() .
< 1= 2=> </>
. , , , . . :
html , . , , , . align=left|right| center. .
HTML , . , . XML XHTML .
|
|
html- <html> </html>, .. <html> , </html> . <head> <body>.
<html>
<head>
</head>
<body>
<!-- , -->
</body>
</html>
<head>
<html>. , , . meta , . .
, <title> </title>, , . :
<html>
<head>
<title> .. </title>
<meta name=author content=Pivovarov>
</head>
<body>
HTML-!
</body>
</html>
<body>
, <body> </body>. , . <html>, <head> <body> . , Web- .
<html>
<head>
<title> </title>
</head>
<body>
<!-- -->
<h1> </h1>
<hr> <!-- -->
<p> </p>
</body>
</html>
<body> , . CSS. <body>:
background | , : body background="(url)() "> , () . GIF JPEG. gif- |
bgcolor | RGB, . : <body bgcolor="#ff0000"> <body bgcolor="red"> |
text | . . : <body text=" "> |
link | ( ). : <body link="" > |
alink | , . : <body alink="" > |
vlink | : <body vlink="" > |
topmargin | : <body topmargin=> |
bottommargin | : <body bottommargin=> |
leftmargin | : <body leftmargin=> |
rightmargin | : <body rightmargin=> |
HTML 5
HTML 5. HTML 4.01 <!DOCTYPE HTML>
<!DOCTYPE html>
|
|
<!--Html-5 , comment -->
<html>
<head>
<meta charset="utf-8">
<title> Html-5 , </title>
</head>
<body>
<header>...</header>
<nav></nav>
<article>
<section>
</section>
</article>
<aside>...</aside>
<footer></footer>
</body>
HTML5 :
header: , , ;
footer: ();
nav: ;
section: , h1-h6, ;
article: ;
aside: , ;
dialog: - ;
figure: , , .
HTML5 , :
header, footer, article, section, nav, menu, hgroup {
display: block;
}
HTML 5 . div span, , nav ( ) footer. , audio video. HTML 5 , HTML 5. , , . HTML 4, font center, HTML 5.
- HTML 5
<!DOCTYPE html>
<!--Html-5 , comment -->
<html>
<head>
<meta charset="utf-8">
<title> Html-5 , </title>
</head>
<body>
<header>
<a href="/"><img src=img/logo.gif alt="home"></a>
<a href="/"><img src=img/webconf09.gif alt="home"></a>
<hgroup>
<h3>Header - </h3> <h6> </h6>
</hgroup>
</header>
<nav>
<ul>
<lh></lh>
<li> </li>
<li> </li>
<li> </li>
</ul></nav>
<article> <h1>Article</h1>
<section>
<h1>-session</h1>
</section>
</article>
<aside><h1>Aside</h1></aside>
<footer><h1>-footer</h1>
<small>©2012 Romanchik Valery<small>
</footer>
</body>
:
Romanchik Valery
HTML
.
, . . <pre> </pre>, , . . HTML . . . , . .
|
|
<p>
, , , HTML- <p>. <p> , . , .
, , <p> align, left, right, center justify, . , :
:
<html> <head>
<title> </title>
</head>
<body>
<p align = center> , . </p>
<p align = left> , . </p>
<p align = justify > , . </p> </body>
</html>
, , , <p> , , .
<br> . <br> clear , (left), (right) (all) . , , <br clear=left> .
, , <nobr> </nobr>. , . . : <nobr>. , - </nobr>. , , <wbr> . : <nobr>. <wbr>, - </nobr>.
&nbsr. , .
<center> . <div> </div> align=center style css.
, HTML- Web- . HTML- , <pre> </pre>. , , .
<hn>
HTML <hn>, n 1 6. 1 , 6 . . align, left, right center. , <p>, . .
:
<html>
<head>
<title> </title>
</head>
<body>
<h1> </h1>
<h2> </h2>
<h3> </h3>
<h4> </h4>
<h5> </h5>
<h6> </h6>
</body>
</html>
, , . HTML- <!-- -->: <!-- -->
|
|
HTML "" "", .. , , , .
:
<i>...</i> | (Italic) |
<b>...</b> | (old) |
<big>...</big> | |
<small>...</small> | |
<sub>...</sub> | |
<sup>...</su> |
:
<html>
<head>
<title> </title>
<body>
<b><small> < /small></ b>
<br><! -->
<p> <sup> </su></p>
</body>
</html>
<u>, <s>,<tt> .
:
<>...</> | |
<strong>...</strong> | |
<ode>...</ode> | (, " ") |
<s>...</s> | |
<d>...</d> | |
<var>...</var> | |
<dfn>...</dfn> | |
<q>...</q> | , |
, "" , : , -, , -, .
<font>
<font >, <basefont>, center . CSS . .
<font color=red size=+3> , 3 </font>
, , . <, >, & HTML , , . .
< | < |
> | > |
& | & |
" | " |
® | |
Copyright | © |
|
<hr> ( shade ). :
<hr noshade> ;
<hr> align, - left, - center right.
size n , n 1 175 ( n=2).
:
<hr width=75% align=right size=30px>
<!-- 75%, , 30px -->
:
<!--: -->
<html>
<head><title> </title></head>
<body>
<b> , <hr>: </b>
<hr>
<p>
<b> , <hr> noshade: </b>
<hr noshade>
<b> 50% : </b>
<hr width=50% align=left><p>
<b> 25% : </b>
<hr width=25% align=center>
<p>
<b> 75% :</b>
<hr width=75% align=right>
</body>
</html>
Web- : , HTML- <img>. , , <img>. , , src.
<img scr=fract.gif>
, , URL. Windows. , , . . , , , . : :
<img src=../fract.gif>
width height . , , . width height , , . , , , Web- .
<img scr=fract.gif width=240 height=260>
, alt. , .
<img scr=fract.gif alt="" width=240 height=260>
align. ( left) ( right), , . absbottom , baseline bottom , absmiddle middle , texttop top . <br> clear, right ( ), left ( ) all ( ).
<img src=fract.gif alt="" width=240 height=260 align=left>
. border . . . hspace vspace.
<img src=fract.gif alt="" width=240 height=260 align=left border=1px>
GIF JPEG. JPEG , . GIF , . , Web- GIF-, 1 "". , , , .
lowsrc , :
<img src="highcar.gif" lowsrc="lowcar.gif">
lowcar.gif, highcar.gif.
HTML5 <figure>. <figcaption>, :
<figure>
<img src="path/to/image" alt="About image" />
<figcaption>
<p>This is an interesting image</p>
</figcaption>
</figure>
HTML, , . <>. <a> href= . name= . target , : target=_blank/_top ; target=_parent ; target=self ; target=_search . title=" . charset= .
<> href, HTML-, . , , , . .
<a href="Minsk.html">Minsk</a>
, , , . :
<a href="Belarus/Minsk.html">Minsk</a>
URL, : protocol: //hostport/path. :
<a href="http://www.w3.org/tr/rec-html40"> html </a>
. <> , , href.
<!--: html--->
<html>
<head><title> </title></head>
<body>
<h1> </h1>
<font size=+1>
<hr>
<h2> :</h2>
<ul>
<li> <a href="pr11.htm"> </a></li>
<li> <a href="pr12.htm"> </a></li>
<li> <a href="pr13.htm"> </a></li>
<li> <a href="pr14.htm"> </a></li>
</ul>
<hr>
,
<a href="mailto:[email protected]">[email protected]</a>
</font>
</body>
</html>
address - . address e-mail ; .
<p> :</p>
<address>
<a href="http://alexander.com/"></a>,
<a href="http://Basilii.com/"></a>,
<a href="http://tusic.ru/"></a>,
</address>
, , . - <> name, . href = . URL , . URL #. , URL .
<!--: -->
<html>
<head><title> </title></head>
<body>
<!-- -->
<ul>
<lh></lh>
<li><a href="#section1"></a></li>
<li><a href="#section2"></a></li>
<li><a href="#section3"> </a></li>
</ul>
<br>
<hr>
... ...
<hr>
<h2><a name="section1"></a></h2><hr>
...section 1...
<hr><!-- -->
<h2><a name="section2"></a></h2><hr>
...section 2...
<hr>
<h3><a name="section3"> </a></h3><hr>
...section 3...
<hr>
<a href="mailto:[email protected]">
<address> - e-mail:[email protected]</address></a>
</body>
</html>
, :
<!--: -->
<html>
<head><title> </title></head>
<body>
<h1>table of contents</h1>
<a href="#section1">introduction</a><br>
<a href="#section2">some background</a><br>
<a href="#section3">the first part</a><br>
...the rest of the table of contents...
<h2 id="section1">introduction</h2> <hr>
...section 1...<hr>
<h2 id="section2">some background</h2><hr>
...section 2...<hr>
<h3 id="section3">the first part</h3><hr>
...section 3...<hr>
... ...
</body></html>
, <> target , . :
_self - , , , , , ; _blank - ; _parent - , , , ; _top - ( , ).
:
<img src="image/img.gif" height="100" width="100">. . :
<html>
<head>
<title> -</title>
</head>
<body>
<a href="sample.html"><img src="image/img.gif" border="0" height="100" width="100"></a>
</body>
</html>
, . . HTML, <> <area>. <> , .
usemap <img> , name <>, #.
<>... </> <area>. , . , , , . , , <>, target , <img>, alt.
shape, : rect ( ), circ, poly default. , , . . coords. , ( ), . , , , , .
:
<html>
<head>
<title> -</title>
</head>
<body>
<img src=map.gif width=300 height=100 border=0 usemap=#map lt=" ">
<map name=map>
<area shape= rect coords="0,0, 100,100" href=linkl.html>
<area shape= rect coords="100,0, 200,100" href=link2.html>
<area shape= rect coords="200,0, 300,100" href=link3.html>
</map>
</body>
</html>
HTML , : , .
<ul>. type (square), (disc) "" (circle). type disc.
<ol>. : type, , start, , . type <ol> 1, I, i, , , , .
<li>. : , type start, , type. <li> , , , .
<ul> <ol>: <li>...</li> .
<!--: -->
<html>
<head>
<title> </title>
</head>
<body>
<h3 align=center> </h3>
<h4> () - :</h4>
<ul>
<lh><b> :</b></lh>
<li> </li>
<li> </li>
<li> </li>
<li> </li>
</ul> <hr>
<h4> () :</h4>
<ol type=1>
<lh><b>, :</b></lh>
<li> </li>
<li> </li>
<li> </li>
</ol> <hr>
<ol type=a>
<lh><b>, :</b></lh>
<li> </li>
<li> </li>
<li> </li>
</ol>
</body>
</html>
<lh> .
, HTML , . . , . <dl>, <dt> <dd>. <dl> , <dt> , a <dd> .
<!--: -->
<html>
<head><title> </title></head>
<body>
<h2 align=center> </h2>
<dl>
<lh><big><b> c </b></big></lh>
<dt><b>"Anchor"</b></dt>
<dd><i>, </i></dd>
<dt><b>"Lamer"</b></dt>
<dd><i> -</i></dd>
<dt><b>"Cookies "</b></dt>
<dd><i>, </i></dd>
</dl>
</body>
</html>
<table>... </table> , . , <tr>. <tr> () <td>. <th> .
, . <td> colspan rowspan.
<table>:
Align - ; Background- ; Bgcolor- ; Border - ; Bordercolor - ; Cellpadding - ; Cellspacing - ; Cols - ; Height - ; Width - .
web-, . , .
. <TABLE>
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/HTML4/loose.dtd">
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=windows-1251">
<title> TABLE</title>
</head>
<body>
<table width="100%" border="0" cellspacing="0" cellpadding="4">
<tr align="center" bgcolor="#999999">
<td colspan="3" style="font-size: 160%; font-family: sans-serif">Lorem
ipsum dolor sit amet</td>
</tr>
<tr>
<td><img src="/images/logo.gif" alt="" width="150" height="70"
border="0" style="background: #CC9"></td>
<td align="right"><img src="/images/title.gif" alt="" width="70"
height="70" style="background: #CF9"></td>
<td>
<a href="One.html">One</a><Br>
<a href="Two.html">Two</a><Br>
<a href="Three.html">Three</a>
</td>
</tr>
<tr>
<td colspan="3">
<table width="100%" border="0" cellpadding="0"
cellspacing="0" bgcolor="#333333">
<tr><td> </td></tr>
</table>
</td>
</tr>
</table>
</body>
</html>
, align bgcolor . , , align <table> , <tr> <td> .
<TABLE> : <CAPTION>, <COL>, <COLGROUP>, <TBODY>, <TFOOT>, <THEAD>.
"" <caption> <th>. <table>... </table> . <td> , .
<!--: -->
<html>
<head><title> </title></head>
<body>
<table border=1>
<caption align=top> </caption>
<tr>
<th></th>
<th></th>
<th></th>
</tr>
<tr>
<td>small</td>
<td> </td>
<td>5</td>
</tr>
<tr>
<td>superman</td>
<td>dinamo</td>
<td>10</td>
</tr>
<tr>
<td>bigman</td>
<td></td>
<td>7</td>
</tr>
</table>
</body></html>
<table> cellpadding cellspacing. . frame rules. <td> colspan rowspan.
<!--: -->
<html>
<head><title> </title></head>
<body bgcolor="white">
<font size=6> </font>
<br>
<hr color="blue">
<br>
<table border=4 cellspacing=3>
<caption><b>C </b> </caption>
<tr>
<th bgcolor="yellow"> 1</th>
<th bgcolor="yellow"> 2</th>
</tr>
<tr>
<td> 1</td>
<td> 2</td>
</tr>
<tr>
<td> 3</td>
<td> 4</td>
</table>
<br>
<hr color="blue">
<br>
<table border="4" cellspacing=3 background="fon01.gif">
<caption> </caption> <tr> <td height="35" bgcolor="#FFCC33" colspan="2"> <center>1x1</center> </td> <td width="50" bgcolor="#336699"> <center>1x2</center> </td> </tr> <tr> <td height="35" width="50" bgcolor="#336699"> <center>2x1</center> </td> <td width="50" bgcolor="#FFCC33"> <center>2x2</center> </td> <td width="50" bgcolor="#336699"> <center>2x3</center> </td> </tr> </table>
<br>
<hr color="blue">
<br>
<table> <tr> <td height="35" bgcolor="#FFCC33"> <center>1x1</center> </td> <td width="50" bgcolor="#336699"> <center>1x2</center> </td> <td width="50" bgcolor="#336699" rowspan="2"> <center>1x3</center> </td> </tr> <tr> <td height="35" width="50" bgcolor="#336699"> <center>2x1</center> </td> <td width="50" bgcolor="#FFCC33"> <center>2x2</center> </td> </tr> </table>
<body></html>
<iframe>
HTML, . HTML 5 .
HTML- <frameset>. <frame>, . HTML- , <frame> src. <frameset>. cols, rows.
<iframe>. , <frame>, , <frameset>, HTML-. <iframe> HTML5
HTML
, HTML- "", , "", .
<form>, . action, method, enctype. : . , . HTML-.
. , . name value. , , , . <input>, type. , text , file , password ; submit, reset button , checkbox radio : -, .
, , . <textarea> , ( ). <textarea> .
, . , HTML, <select> <option>. , . , , ( , ""), , multiple, . , , HTML. -. , , . , JavaScript.
<!--: checkbox radio-->
<html>
<head><title> , checkbox radio </title></head>
<body>
<form>
<h2> </h2>
my street:<input name="street"><br>
city: <input name="city" size="20" maxlength="20" value="minsk"> <br>
zip: <input name="zip" size="5" maxlength="5" value="99999"><br>
</form>
<hr>
<h2> </h2>
<form><!-- -->
<input type="checkbox" name="team" value=""><br>
<input type="checkbox" name="team" value=""><br>
<input type="checkbox" name="team" value=""><br>
</form>
<hr>
<h2> ?</h2>
<form><!-- -->
<input type="radio" name="team" value=""> <br>
<input type="radio" name="team" value=" "> <br>
<input type="radio" name="team" value=""> <br>
</form>
<hr>
<h2> ?</h2>
<form>
<select name=" team ">
<option> </option>
<option> </option>
<option selected> </option>
</select>
</form>
</body>
</html>
HTML5
HTML5 5 . progress . meter . datalist . keygen , . output . : PROGRESS <progress max="100" value="25">25%</progress> METER <meter value="50" min="0" low="20" optimum="50" high="80" max="100"></meter> KEYGEN <keygen name="key" keytype="rsa" challenge="challenge" /> DATLIST datalist c option. input datalist c list. DATALIST <input list="company" /> <datalist id="company"> <option value="BMW"> <option value="Ford"> <option value="Volvo"></datalist> OUTPUT , . <form action="" oninput="out.value=range.value"> <div> <input type="range" name="range" min="0" max="100" value="25" /> </div> <div> <output name="out">25</output> </div> </form> HTML5 13 | ||
email. input.
iPhone/iPad.
URL
url. input.
iPhone/iPad.
TEL
. input.
iPhone/iPad.
SEARCH
<input type= "search" />
DATE
<input type= "date" minmax/>
TIME
<input type= "time" minmax step />
DATETIME
<input type= "datetime" minmax step />
NUMBER
<input type= "number" minmax step />
RANGE
<input type= "range" minmax step />
MONTH
<input type= "month" minmax />
WEEK
<input type= "week" minmax />
COLOR
<input type= "color" />
AUTOFOCUS
. .
<input type= "text" autofocus />
FORM .
<form action="" id=" form ">
<div><input type=" text " name=" login " /></div>
<div><button type=" submit "></button></div>
</form>
<input type=" email " name=" email " form=" form " />
PLACEHOLDER
.
<input type= "password" placeholder= "enter your password" />
off , .
<input type= "text" autocomplete= "off" />
FORMACTION
formaction, formenctype, formmethod, formtarget , ,
<input type= "submit" formmethod = "post" />
formaction .
formenctype enctype .
formmethod - .
<input type= "submit" formmethod = "post" />
formnovalidate NOVALIDATE .
formtar