HTML&CSS 2 - Intermediate HTML

HTML 2
& CSS
DINIS CORREIA 2011
cbn

HISTÓRIA
ESTRUTURA
SINTAXE
DOCTYPE (X)HTML
ELEMENTOS

HTML XHTML
<P
class=RESUMO> <p
class="resumo">
Um
parágrafo.</P> Um
parágrafo.</p>

<img
SRC=foto.jpg
alt=""> <img
src="foto.jpg"
alt=""
/>

HTML XHTML
<p
class="resumo"> <p
class="resumo">
Um
parágrafo.</p> Um
parágrafo.</p>

<img
src="foto.jpg"
alt=""> <img
src="foto.jpg"
alt=""
/>

HTML XHTML
<!DOCTYPE
HTML
PUBLIC
"-‐//W3C//DTD
HTML
<!DOCTYPE
html
PUBLIC
"-‐//W3C//DTD
XHTML

4.01//EN" 1.0
Strict//EN"

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

<!DOCTYPE
HTML
PUBLIC
"-‐//W3C//DTD
HTML
<!DOCTYPE
html
PUBLIC
"-‐//W3C//DTD
XHTML

4.01
Transitional//EN"
1.0
Transitional//EN"

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

<!DOCTYPE
HTML
PUBLIC
"-‐//W3C//DTD
HTML
<!DOCTYPE
html
PUBLIC
"-‐//W3C//DTD
XHTML

4.01
Frameset//EN"
1.0
Frameset//EN"

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

PARÁGRAFOS p
TÍTULOS h1
h2
...
h6
LISTAS ol
ul
dl
ÊNFASE em
strong
CITAÇÕES blockquote
q
IMAGENS img
LINKS a
TABELAS table

<table>
<tr>
<td>Nome
do
rio</td>
<td>Comprimento</td>
<td>Nascente</td>
</tr>
<tr>
<td>Tejo</td>
<td>1007
km</td>
<td>Espanha</td>
</tr>
<tr>
<td>Douro</td>
<td>850
km</td>
<td>Espanha</td>
</tr>
<tr>
<td>Sado</td>
<td>180
km</td>
<td>Portugal</td>
</tr>
</table>

<table>
<caption>Rios
de
Portugal</caption>
<tr>
<th>Nome
do
rio</th>
<th>Comprimento</th>
<th>Nascente</th>
</tr>
<tr>
<td>Tejo</td>
<td>1007
km</td>
<td>Espanha</td>
</tr>
<tr>
<td>Douro</td>
<td>850
km</td>
<td>Espanha</td>
</tr>
<tr>
<td>Sado</td>
<td>180
km</td>
<td>Portugal</td>
</tr>
</table>

<table
summary="Resumo
do
principais
rios
de
Portugal">
<caption>Rios
de
Portugal</caption>
<thead>
<tr>
<th
scope="col">Nome
do
rio</th>
<th
scope="col">Comprimento</th>
<th
scope="col">Nascente</th>
</tr>
</thead>
<tfoot>
<tr>
<td
colspan="3">Dados
de
2009.</td>
</tr>
</tfoot>
<tbody>
<tr>
<th
scope="row">Tejo</th>
<td>1007
km</td>
<td>Espanha</td>
</tr>
<tr>
<th
scope="row">Douro</th>
<td>850
km</td>
<td>Espanha</td>
</tr>
<tr>
<th
scope="row">Sado</th>
<td>180
km</td>
<td>Portugal</td>
</tr>
</tbody>
</table>

<form>
Nome:
<input
type="text"
name="nome"
id="nome"
value="">

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

Comentário:
<textarea
name="comentario"
id="comentario"
cols="25"

rows="3"></textarea>

<input
type="submit"
value="enviar">
</form>

<form
action="script.php"
method="post">
<p>
<label
for="nome">Nome:</label>
<input
type="text"
name="nome"
id="nome"
value=""
/>
</p>
<p>
<label
for="email">Email:</label>
<input
type="text"
name="email"
id="email"
value=""
/>
</li>
<p>
<label
for="comentario">Comentário:</label>
<textarea
name="comentario"
id="comentario"
cols="25"

rows="3"></textarea>
</p>
<p>
<input
type="submit"
value="submit"
/>
<input
type="reset"
value="reset"
/>
</p>
</form>

<address>
<span>Dinis
Correia</span>,

<span
class="email">dinis.correia@co.sapo.pt</span>
</address>

<p>A
função
<code>run()</code>
em
JavaScript</p>

<p>A
função
<code>run()</code>
em
JavaScript</p>

<pre>
<code>
sub
slurp
{

my
$filename
=
foo;

my
$file

=
new
$filename;

if
(
defined
$file
)
{

return
<$file>;

}

return
bar;
};
</code>
</pre>

<p>A
função
<code>run()</code>
em
JavaScript</p>

<pre>
<code>
sub
slurp
{

my
$filename
=
foo;

my
$file

=
new
$filename;

if
(
defined
$file
)
{

return
<$file>;

}

return
bar;
};
</code>
</pre>

<p>O
valor
de
<var>x</var>
é
2.</p>

ABREVIATURAS
abbr

acronym

<p>Estamos
a
aprender
<abbr
title="Hypertext
Markup

Language">HTML</abbr>.</p>

<p>Conferência
da
<acronym
title="Organização
das
Nações

Unidas">ONU</acronym>
chamada
a
fixar
novos
objectivos</p>

<p><dfn>HTML</dfn>:
O
HTML
é
a
linguagem
usada
para

descrever
o
conteúdo
das
páginas
web.</p>

SUBSCRITO,
SOBRESCRITO
sub

sup

<p>A
fórmula
química
da
água
é
H<sub>2</sub>O.</p>

<p>
Rua
das
Descobertas,
3<br>
1200-‐000
Lisboa
</p>

ALTERAÇÕES
del

ins

<p>O
Presidente
da
República,
Mário
Soares,
anunciou...</p>

<p>O
Presidente
da
República,
<del>Mário
Soares</del>,

anunciou...</p>

<p>O
Presidente
da
República,
<del>Mário
Soares</del>

<ins>Aníbal
Cavaco
Silva</ins>,
anunciou...</p>

FOTO DE THOMAS HAWK c HTTP://FLIC.KR/P/3CYZH

font
b
s
strike
u

MUITOS OUTROS...

font CSS
b strong
em
s
strike del
ins
u CSS

CONTAINERS
div

span

<p>Estamos
fartos
de
jobs
for
the
boys,
sublinhou

Francisco
Louçã.</p>

<p>Estamos
fartos
de
<span
lang="en">jobs
for
the
boys</
span>,
sublinhou
Francisco
Louçã.</p>

<p><q>Estamos
fartos
de
<span
lang="en">jobs
for
the

boys</span></q>,
sublinhou
Francisco
Louçã.</p>

"DIV-ITIS"
FOTO DE D. SHARON PRUITT c HTTP://FLIC.KR/P/76TB38

<!DOCTYPE
html
PUBLIC
"-‐//W3C//DTD
XHTML
1.0
Strict//EN"
"http://
www.w3.org/TR/xhtml1/DTD/xhtml1-‐strict.dtd">
<html
xmlns="http://www.w3.org/1999/xhtml"
lang="en">

<head>

<title>Validar
o
HTML</title>

</head>

<body>

<h2>Cavaco
Silva
recusa
falar
sobre
FMI</h2>

<p>O
actual
Presidente
da
República
não
quis
prestar
declarações
por
<a

href="http://sapo.pt/"
colspan="3">ser
domingo</a>.</p>

<h3>Eleições</h3>

<p>Cavaco
fazia
continua
em
campanha
para
as
eleições
presidenciais.

<h3>Campanha</h3>

<p>Saiba
por
onde
ainda
vai
passar
Cavaco
Silva:</p>

<ul>

<li>Maia</li>

<li>Coimbra</li>

<li>Silves<li>

<li>Freixo
de
Espada
à
Cinta</li>

</ul>

</body>

HTML&CSS 2 - Intermediate HTML

Recomendados

Recomendados

Mais conteúdo relacionado

Mais procurados

Mais procurados (20)

Semelhante a HTML&CSS 2 - Intermediate HTML

Semelhante a HTML&CSS 2 - Intermediate HTML (20)

Mais de Dinis Correia

Mais de Dinis Correia (6)

HTML&CSS 2 - Intermediate HTML