HTML&CSS 1 - Introduction to HTML

HTML 1
& CSS
DINIS CORREIA 2011
cbn

HTML

1 2 3
DEFINIÇÃO ESTRUTURA CORPO

H T M L
yper text arkup anguage

1
DEFINIÇÃO

LINGUAGEM DE MARKUP
FOTO DE ASHLEY.ADCOX c HTTP://FLIC.KR/P/4WVJ5Z

HTML
BREVE HISTÓRIA

1990 2010

TIM BERNERS-LEE
FOTO DE LE FEVRE COMMUNICATIONS

HTML
BREVE HISTÓRIA

1990
HTML
HTTP
Web browser
Web server

HTML
BREVE HISTÓRIA

1991
HTML Tags
Mailing list www-talk

HTML
BREVE HISTÓRIA

1993
Elemento <img>
Código fonte WorldWideWeb

HTML
BREVE HISTÓRIA

1994
Novos browsers

Fundada a W3C

HTML
BREVE HISTÓRIA

1995
HTML 2.0

Microsoft lança IE

HTML
BREVE HISTÓRIA

1997
HTML 3.2

HTML
BREVE HISTÓRIA

1999
HTML 4.01

HTML
BREVE HISTÓRIA

2008
Primeiro draft HTML5

HTML
BREVE HISTÓRIA

2010
Adopção do HTML5
(ainda que não finalizado)

HTML
BREVE HISTÓRIA

2000 ? 2007

HTML
SINTAXE

<p>Um
parágrafo</p>

TAG TAG
ABERTURA FECHO

HTML
SINTAXE

<p>Um
parágrafo</p>

ELEMENTO

HTML
SINTAXE

<p
class="summary">Um
parágrafo</p>

ATRIBUTO

HTML
SINTAXE

<p
id="main"
class="summary">Um
parágrafo</p>

ATRIBUTO

ATRIBUTO

NESTED ELEMENTS
FOTO DE BRADLEY DAVIS c HTTP://FLIC.KR/P/4WQD2J

HTML
SINTAXE

<p>Um
<strong>parágrafo</strong></p>

ELEMENTOS NESTED

HTML
ESTRUTURA

HTML

HEAD <!doctype
html>
<html>
<head>
TITLE
<title>Um
título</title>
</head>
<body>
BODY <p>Um
parágrafo</p>
</body>
</html>
P

HTML
ESTRUTURA

<head>
<title>Um
título</title>

<meta
name="description"
content="A
descrição
da
página">
<meta
name="keywords"
content="vídeos,fotos,pesquisa">

<link
type="text/css"
rel="stylesheet"
href="style.css">
<script
type="text/javascript"
src="script.js"></script>
</head>

HTML
ESTRUTURA

<!DOCTYPE>

HTML
ESTRUTURA

<!DOCTYPE>
1 Rendering mode

2 Validação

HTML
ESTRUTURA

<!doctype
html>

HTML
ESTRUTURA

<!DOCTYPE
HTML
PUBLIC
"-‐//W3C//DTD
HTML
4.01//EN"

"http://www.w3.org/TR/html4/strict.dtd">

<!DOCTYPE
HTML
PUBLIC
"-‐//W3C//DTD
HTML
4.01
Transitional//EN"

"http://www.w3.org/TR/html4/loose.dtd">

<!DOCTYPE
html
PUBLIC
"-‐//W3C//DTD
XHTML
1.0
Strict//EN"

"http://www.w3.org/TR/xhtml1/DTD/xhtml1-‐strict.dtd">

<!DOCTYPE
html
PUBLIC
"-‐//W3C//DTD
XHTML
1.0
Transitional//EN"

"http://www.w3.org/TR/xhtml1/DTD/xhtml1-‐transitional.dtd">

HTML
BREVE HISTÓRIA

2000
XHTML 1.0

HTML
ESTRUTURA

<P
class="summary">Um
parágrafo</P>

HTML
ESTRUTURA

<P
CLASS="summary">Um
parágrafo</P>

HTML
ESTRUTURA

<P
CLASS=summary>Um
parágrafo</P>

HTML
ESTRUTURA

<P
CLASS=summary>Um
parágrafo

HTML
ESTRUTURA

<p
class="summary">Um
parágrafo</p>

HTML
CORPO

1 Block level 2 Inline

HTML
CORPO

<p>Um
<strong>parágrafo</strong></p>

HTML
CORPO

<p>

Um

parágrafo

</p>

=
<p>Um
parágrafo</p>

HTML
CORPO

<h1>

<h2>

<h3>

<h4>

<h5>

<h6>

HTML
CORPO

<h1>Notícias</h1>
...
<h2>Destaques</h2>
...
<h3>2010
fica
para
a
História
como
um
ano

atribulado</h3>

HTML
CORPO

<p>O
actor
nasceu
a
7
de
Fevereiro
de
1946,
em
Warrington,

Cheshire,
e
teve
desde
logo
um
promissor
percurso
teatral,

como
actor
e
professor.</p>

<p>Após
vários
papéis
em
televisão,
Postlethwaite
estreou-‐se

no
cinema
em
1977
num
minúsculo
papel
em
«O
Duelo».</p>

HTML
CORPO

<blockquote
cite="http://www.w3.org/TR/html401/">
<p>This
document
obsoletes
previous
versions
of
HTML
4.0,
although
W3C
will
continue
to
make
those
specifications
and
their
DTDs
available
at
the
W3C
Web
site.</p>
</blockquote>

HTML
CORPO

<em>

<strong>

HTML
CORPO

<p><em>Atenção:</em>
o
acesso
é
restrito.</p>

HTML
CORPO

<p><em>A
entrada
não
autorizada
é
<strong>expressamente

proibida.</strong></em></p>

HTML
CORPO

<ol>

<ul>

<dl>

ORDENADA NÃO DEFINIÇÃO
ORDENADA

HTML
CORPO

<ol>
<li>Pré-‐aqueça
o
forno.</li>
<li>Coloque
o
recipiente
no
forno.</li>
<li>Deixe
cozinhar
durante
30
min.</li>
</ol>

1. Pré-aqueça o forno.
2. Coloque o recipiente no forno.
3. Deixe cozinhar durante 30 min.

HTML
CORPO

<ul>
<li>Pão</li>
<li>Leite</li>
<li>Ovos</li>
</ul>

• Pão
• Leite
• Ovos

HTML
CORPO

<dl>
<dt>Laranja</dt>
<dd>Fruto
produzido
pela
laranjeira</dd>
<dt>Maçã</dt>
<dd>Fruto
produzido
pela
macieira</dd>
</dl>

Laranja
Fruto produzido pela laranjeira
Maça
Fruto produzido pela macieira

HTML
CORPO

<ol>
<li>Capítulo
1</li>
<li>Capítulo
2 1. Capítulo 1
<ol> 2. Capítulo 2
<li>Secção
1</li>
<li>Secção
2</li> 1. Secção 1
</ol> 2. Secção 2
</li> 3. Capítulo 3
<li>Capítulo
3</li>
</ol>

HTML
CORPO

<img
src="fotografia.jpg">

HTML

HTML
CORPO

<img
src="fotografia.jpg"
/>

XHTML

HTML
CORPO

<img
alt="Vista
para
o
rio">

HTML
CORPO

<img
alt=""
title="Um
local

privilegiado">

HTML
CORPO

<img
alt="Vista
para
o
rio"

title="Um
local
privilegiado"
width="200"
height="140">

HTML
CORPO

<a
href="http://www.sapo.pt">Homepage
do
SAPO</a>

HTML
CORPO

<a
href="http://www.sapo.pt"><img

alt="Vista
para
o
rio"
title="Um
local
privilegiado"

width="200"
height="140"></a>

HTML
CORPO

<a
href="fotos.html">Página
de
fotos</a>

HTML
CORPO

<table>
<tr>
<td>Célula
1</td>
<td>Célula
2</td> Célula 1 Célula 2 Célula 3
<td>Célula
3</td>
</tr>
<tr>
<td>Célula
4</td>
<td>Célula
<td>Célula
6</td>
</tr>
</table>

HTML
CORPO

<table>
<tr>
<td>Célula
1</td>
<td>Célula
<td>Célula
3</td>
</tr>
<tr>
<td
colspan="3">
Célula
4</td> Célula 4
</tr>
</table>

HTML
CORPO

<table>
<tr>
<td
rowspan="2">
Célula
1</td> Célula 2 Célula 3
<td>Célula
2</td>
<td>Célula
3</td>
</tr> Célula 1
<tr>
<td>Célula
4</td> Célula 4 Célula 5
<td>Célula
5</td>
</tr>
</table>

HTML
CORPO
<form
action="script.php">

<ul>

<li>

<label
for="name">Nome:</label>

<input
type="text"
name="nome"
id="nome"
value="">

</li>

<li>

<label
for="email">Email:</label>

<input
type="text"
name="email"
id="email"
value="">

</li>

<li>

<label
for="comments">Comentário:</label>

<textarea
name="comentario"
id="comentario"
cols="25"
rows="3"></textarea>

</li>

<li>

<input
type="submit"
value="Enviar">

</li>

</ul>
</form>

HTML
CORPO

<div>

<span>

HTML&CSS 1 - Introduction to HTML

HTML&CSS 1 - Introduction to HTML

Recommended

Recommended

More Related Content

Featured

Featured (20)

HTML&CSS 1 - Introduction to HTML