html&css 1 - introduction to html
DESCRIPTION
Slides for my in-house HTML & CSS trainning at SAPO. The history of (X)HTML, syntax, structure and some semantic elements. Download for correct background colors/textures!TRANSCRIPT
CSS&DINIS CORREIA 2011
cbn
1HTML
DEFINIÇÃO ESTRUTURA CORPO1 2 3HTML
HTML
DEFINIÇÃO1
H T M Lyper text arkup anguage
DEFINIÇÃO1
LINGUAGEM DE MARKUPFOTO DE ASHLEY.ADCOX c HTTP://FLIC.KR/P/4WVJ5Z
HTMLBREVE HISTÓRIA
1990 2010
TIM BERNERS-LEEFOTO DE LE FEVRE COMMUNICATIONS
HTMLBREVE HISTÓRIA
1990 2010
HTMLBREVE HISTÓRIA
1990HTML HTTP
Web browserWeb server
HTMLBREVE HISTÓRIA
1991HTML Tags
Mailing list www-talk
HTMLBREVE HISTÓRIA
1993Elemento <img>
Código fonte WorldWideWeb
HTMLBREVE HISTÓRIA
1994Novos browsers
Fundada a W3C
HTMLBREVE HISTÓRIA
1995HTML 2.0
Microsoft lança IE
HTMLBREVE HISTÓRIA
1997HTML 3.2
HTMLBREVE HISTÓRIA
1999HTML 4.01
HTMLBREVE HISTÓRIA
2008Primeiro draft HTML5
HTMLBREVE HISTÓRIA
2010Adopção do HTML5
(ainda que não finalizado)
HTMLBREVE HISTÓRIA
2000 ? 2007
HTMLSINTAXE
<p>Um parágrafo</p>
TAG TAG ABERTURA FECHO
HTMLSINTAXE
<p>Um parágrafo</p>
ELEMENTO
HTMLSINTAXE
<p class="summary">Um parágrafo</p>
ATRIBUTO
HTMLSINTAXE
<p id="main" class="summary">Um parágrafo</p>
ATRIBUTO
ATRIBUTO
NESTED ELEMENTSFOTO DE BRADLEY DAVIS c HTTP://FLIC.KR/P/4WQD2J
SINTAXE
<p>Um <strong>parágrafo</strong></p>
ELEMENTOS NESTED
HTML
ESTRUTURA2HTML
HTMLESTRUTURA
<!doctype html><html>
<head><title>Um título</title>
</head><body>
<p>Um parágrafo</p></body>
</html>
HTML
BODY
P
HEAD
TITLE
HTMLESTRUTURA
HTMLESTRUTURA
<!doctype html><html>
<head><title>Um título</title>
</head><body>
<p>Um parágrafo</p></body>
</html>
HTML
BODY
P
HEAD
TITLE
HTMLESTRUTURA
<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>
HTMLESTRUTURA
<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>
HTMLESTRUTURA
<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>
HTMLESTRUTURA
HTMLESTRUTURA
<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>
HTMLESTRUTURA
<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>
HTMLESTRUTURA
<!DOCTYPE>
HTMLESTRUTURA
<!DOCTYPE>1 Rendering mode
2 Validação
HTMLESTRUTURA
<!doctype html>
HTMLESTRUTURA
<!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">
HTMLBREVE HISTÓRIA
2000XHTML 1.0
HTMLESTRUTURA
<P class="summary">Um parágrafo</P>
HTMLESTRUTURA
<P CLASS="summary">Um parágrafo</P>
HTMLESTRUTURA
<P CLASS=summary>Um parágrafo</P>
HTMLESTRUTURA
<P CLASS=summary>Um parágrafo
HTMLESTRUTURA
<p class="summary">Um parágrafo</p>
CORPO3HTML
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
HTMLCORPO
<h1>Notícias</h1>...<h2>Destaques</h2>...<h3>2010 fica para a História como um ano atribulado</h3>
HTMLCORPO
<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>
HTMLCORPO
<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 andtheir DTDs available at the W3C Web site.</p>
</blockquote>
HTMLCORPO
<em> <strong>
HTMLCORPO
<p><em>Atenção:</em> o acesso é restrito.</p>
HTMLCORPO
<p><em>A entrada não autorizada é <strong>expressamente proibida.</strong></em></p>
HTMLCORPO
<ol> <ul> <dl>
ORDENADA NÃOORDENADA
DEFINIÇÃO
HTMLCORPO
<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.
HTMLCORPO
<ul><li>Pão</li><li>Leite</li><li>Ovos</li>
</ul>
• Pão• Leite• Ovos
HTMLCORPO
<dl><dt>Laranja</dt><dd>Fruto produzido pela laranjeira</dd><dt>Maçã</dt><dd>Fruto produzido pela macieira</dd>
</dl>
LaranjaFruto produzido pela laranjeira
MaçaFruto produzido pela macieira
HTMLCORPO
<ol><li>Capítulo 1</li><li>Capítulo 2
<ol><li>Secção 1</li><li>Secção 2</li>
</ol></li><li>Capítulo 3</li>
</ol>
1. Capítulo 1
2. Capítulo 2
1. Secção 1
2. Secção 2
3. Capítulo 3
HTMLCORPO
<img src="fotografia.jpg">
HTML
HTMLCORPO
<img src="fotografia.jpg" />
XHTML
HTMLCORPO
<img src="fotografia.jpg" alt="Vista para o rio">
HTMLCORPO
<img src="fotografia.jpg" alt="" title="Um local privilegiado">
HTMLCORPO
<img src="fotografia.jpg" alt="Vista para o rio" title="Um local privilegiado" width="200" height="140">
HTMLCORPO
<a href="http://www.sapo.pt">Homepage do SAPO</a>
HTMLCORPO
<a href="http://www.sapo.pt"><img src="fotografia.jpg" alt="Vista para o rio" title="Um local privilegiado"
width="200" height="140"></a>
HTMLCORPO
<a href="fotos.html">Página de fotos</a>
HTMLCORPO
<table><tr><td>Célula 1</td><td>Célula 2</td><td>Célula 3</td>
</tr><tr><td>Célula 4</td><td>Célula 5</td><td>Célula 6</td>
</tr></table>
Célula 1 Célula 2 Célula 3
Célula 4 Célula 5 Célula 6
HTMLCORPO
<table><tr><td>Célula 1</td><td>Célula 2</td><td>Célula 3</td>
</tr><tr><td colspan="3">Célula 4</td>
</tr></table>
Célula 1 Célula 2 Célula 3
Célula 4Célula 4Célula 4
HTMLCORPO
<table><tr><td rowspan="2">Célula 1</td><td>Célula 2</td><td>Célula 3</td>
</tr><tr><td>Célula 4</td><td>Célula 5</td>
</tr></table>
Célula 1
Célula 2 Célula 3
Célula 1
Célula 4 Célula 5
HTMLCORPO
<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>
HTMLCORPO
<div> <span>
