.


:




:

































 

 

 

 


HTML




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>&copy;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 , , . .

 
< &lt;
> &gt;
& &amp;
" &quot;
&reg;
Copyright &copy;
&nbsp;

 

<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> , &lthr&gt: </b>

<hr>

<p>

<b> , &lthr&gt 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>&nbsp;</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

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





:


: 2016-07-29; !; : 822 |


:

:

,
==> ...

1759 - | 1524 -


© 2015-2024 lektsii.org - -

: 0.775 .