Professional Documents
Culture Documents
: . , .
: .
HTML CSS;
/
;
HTML :
,
, ,
, ,
,
HTML CSS
web
HTML:
HyperText Markup Language
CSS:
Cascading StyleSheets
,
HTML
CSS
:
, :
,
:
, :
,
;
.
.
30 .
.
,
.
.
.
HTML
.html
.. Notepad, vim, emacs, ...
interpret compile
browsers
HTML
.html !
.html .html.txt
Browser
web
browsers
Open Source
Internet Explorer
Microsoft
52%
Trident
Firefox
Mozilla
31%
Gecko
Chrome
10%
Webkit
Safari
Apple
5%
Webkit
Opera
Opera
2%
Presto
100%
web standards
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0
Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1strict.dtd">
<html>
<body>
This is my first web page.
</body>
</html>
DOCTYPE
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0
Strict//EN"
"http://www.w3.org/TR/xhtml1/DTD/xhtml1strict.dtd">
HTML
browser
copy/paste
<html>
</html>
: html
: <html>
: </html>
html
html
<html>
<body>
This is my first web page.
</body>
</html>
html
body
<html>
<body>
This is my first web page.
body
</body>
</html>
body
.
!
<br />
br
<html>:
<html> <head>
<body>, . <title>
<head>.
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0
Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1strict.dtd">
<html>
<head>
<title>y first web page</title>
</head>
<body>
This is my first web page.
</body>
</html>
.
.
, (LIFO).
body html
<html>
<body>
This is my first web page.
</body>
</html>
(parent)
.
(child)
.
(ancestor)
.
(descendant)
A .
: (sibling)
.
<html>
<head>
<title>Page</title>
</head>
<body>
My first web page.
</body>
</html>
HTML .
.
!
<p>:
(: paragraph)
<p> </p>
<p> !</p>
<br />:
(: break)
CSS.
<em>:
(emphasis)
<strong>:
(strong emphasis)
<em>
<strong> .
<strong> <em> !
CSS.
<strong> <em>
.
<h1>: 1 (: headline)
<h2>: 2
<h6>: 6
<h1> 1 .
.
h7.
<h1>
<h2>
<h2>
: , <ol>
: , <ul>
<ol>
<li> </li>
<li> </li>
<li> </li>
</ol>
<li> <ol> <ul>
Formula 1
Photoshop
:
<ol>
<li></li>
<li></li>
<li></li>
<li></li>
<li></li>
<li></li>
<li></li>
</ol>
1.
2.
3.
4.
5.
6.
7.
:
<ul>
<li>Kinder </li>
<li>Kinder Bueno</li>
<li>Happy Hippo</li>
<li> Kinder</li>
<li>Kinder Delice</li>
<li>Kinder Duplo</li>
<li>Kinder Maxi</li>
</ul>
Kinder
Kinder Bueno
Happy Hippo
Kinder
Kinder Delice
Kinder Duplo
Kinder Maxi
HTML!
, , .
<h1> </h1>
<ol>
<li> :
<ul>
<li> </li>
<li> </li>
</ul>
</li>
<li> </li>
<li> </li>
</ol>
1. :
2.
3.
http://www.google.com/
http://www.htmldog.com/guides/htmlbeginner/links/
:
foo http://mysite.gr/bar http://mysite.gr/bar/foo
/foo http://mysite.gr/bar http://mysite.gr/foo
#foo http://mysite.gr/bar http://mysite.gr/bar#foo
=
,
<a href=val>
! </a>
href
href:
<a>:
<a href=http://htmldog.com> HTML!</a>
HTML!
id: .
.
web
JPG
256
PNG
GIF
<img>:
src: ()
alt: ()
width: pixels
height: pixels
<img> .
<img
src=cake.gif
alt=The cake is not a lie
width=200
height=200 />
CSS HTML !
:-)
:
, ,
.
,
, , .
Alan
Turing
Turing Machines
Ludwig
Wittgenstein
Tractatus
Bertrand
Russel
Principia Mathematica
e + 1 = 0
Leonhard
Euler
<table>:
Alan
Turing
Turing Machines
Ludwig
Wittgenstein
Tractatus
Bertrand
Russel
Principia Mathematica
e + 1 = 0
Leonhard
Euler
<tr>: . <table>
Alan
Turing
Turing Machines
Ludwig
Wittgenstein
Tractatus
Bertrand
Russel
Principia Mathematica
e + 1 = 0
Leonhard
Euler
<td>: . <tr>
<tr>:
<td>:
<table>:
<tr>
<td>
<tr>
<table>
<table>
<tr>
<td>
<tr>
<table>
<tr>
<td>Alan</td><td>Turing</td>
<td> </td><td>Turing Machines</td>
</tr>
<tr>
<td>Ludwig</td><td>Wittgenstein</td>
<td></td><td>Tractatus</td>
</tr>
<tr>
<td>Bertrand</td><td>Russel</td>
<td></td><td>Principia Mathematica</td>
</tr>
<tr>
<td></td><td></td>
<td></td><td></td>
</tr>
<tr>
<td>Leonhard</td><td>Euler</td>
<td></td><td>e<sup></sup> + 1 = 0</td>
</tr>
</table>
HTML
!
HTML.
...
CSS