You are on page 1of 63

HTML 1

: . , .
: .


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

Google

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>, <head>, <title> <body>



<head>: meta-
<title>:
<body>:

<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>

(: ordered list, unordered list)


<li>: (: list item)
HTML .

<ol>
<li> </li>
<li> </li>
<li> </li>

</ol>


<li> <ol> <ul>

<ol> <ul> <li>

Formula 1

e-mail

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>

<a href=val> !</a>

href



href:

<a>:


<a href=http://htmldog.com> HTML!</a>

HTML!


id: .
.

<a href=#names> </a>

<h2 id=names> </h2>

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

You might also like