html&css 2 - intermediate html
DESCRIPTION
Slides for my in-house HTML & CSS trainning at SAPO. Tables, forms (the basics), more semantic HTML elements, presentational elements to avoid, generic containers, validation.TRANSCRIPT
CSS&DINIS CORREIA 2011
cbn
2HTML
HISTÓRIA
SINTAXEESTRUTURA
DOCTYPE (X)HTML
ELEMENTOS
HISTÓRIA
SINTAXEESTRUTURA
DOCTYPE (X)HTML
ELEMENTOS
HTML XHTMLVS.
HTML XHTML
<P class=RESUMO>Um parágrafo.</P>
<img SRC=foto.jpg alt="">
<p class="resumo">Um parágrafo.</p>
<img src="foto.jpg" alt="" />
HTML XHTML
<p class="resumo">Um parágrafo.</p>
<img src="foto.jpg" alt="" />
<p class="resumo">Um parágrafo.</p>
<img src="foto.jpg" alt="">
(X)HTML
HTML XHTML<!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 HTML 4.01 Frameset//EN" "http://www.w3.org/TR/html4/frameset.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">
<!DOCTYPE html PUBLIC "-‐//W3C//DTD XHTML 1.0 Frameset//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-‐frameset.dtd">
http://bit.ly/html_doctype
HTML5<!doctype html>
ELEMENTOS
PARÁGRAFOS
LISTAS
CITAÇÕES
TÍTULOS
ÊNFASE
IMAGENS
LINKSTABELAS
p
h1 h2 ... h6
ol ul dl
blockquote qimga
table
em strong
TABELAStable
<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><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>
FORMULÁRIOSform
<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>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>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>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>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>
<input type="text">
<input type="button">
<input type="password">
<input type="checkbox">
<input type="file">
<input type="hidden">
<input type="image">
<input type="radio">
<input type="reset">
<input type="submit">
<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>
MAIS ELEMENTOS
AUTORaddress
CÓDIGOpre code var
<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>
ABREVIATURASabbr 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>
DEFINIÇÕESdfn
<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>
QUEBRAS DE LINHAbr
<p>Rua das Descobertas, 3<br>1200-‐000 Lisboa
</p>
ALTERAÇÕESdel 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>
A NÃO USAR...
FOTO DE THOMAS HAWK c HTTP://FLIC.KR/P/3CYZH
font
s strike
b
u
MUITOS OUTROS...
font
s strike
b
u
CSSstrong em
del insCSS
CONTAINERSdiv 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 id="container"> <ul class="nav"> ... </ul> <div id="login"> ... </div> <div id="conteudo">
... </div> <div id="extras"> ... </div>
<div id="rodape"> ... </div> </div>
"DIV-ITIS"FOTO DE D. SHARON PRUITT c HTTP://FLIC.KR/P/76TB38
VALIDAÇÃO
http://validator.w3.org
<!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>
EXERCÍCIO