HTML - How To

<html>
<head>

<title>HTML/XHTML</title>
</head>
<body>

</body>
</html>

2009.03.04 HTML/XHTML

<html>
André Torgal – Lisboa, Portugal - 2009-03-04
<head>
<title>HTML</title>
<meta name=”author”
Torgal”>
content=”André
<meta name=quot;geo.placenamequot;
Portugalquot; />
content=quot;Lisboa,
<meta name=quot;DC.Date.Createdquot;
content=quot;2009-03-04quot;>
...
</head>
<body>
...

HOW-TO

HTML XHTML

FAIL

COOL


HTML::State Of The Art
Estrutura
 Declarações

Semântica
 #referências
Conteúdo

<estrutura>
<semântica>
Usabilidade

...
Contéudo
Acessibilidade

...
SEO </semântica>

</estrutura>
...



HTML::Apenas HTML
Estrutura
 Declarações

Semântica
 #referências
Conteúdo

<estrutura>
<semântica>
...
Contéudo
...
</semântica>
</estrutura>


HTML XHTML

SGML XML
1986 1998

HTML XHTML
4.0.1 1.0
STRICT STRICT
1999 2000


COMPONENTES
MARKUP

Declarações
ELEMENT TYPE

#referências
TAG

<estrutura> ATTRIBUTE / VALUE

<semântica>
ELEMENT
... 
Conteúdo
CONTENT MODEL

...
</semântica> DOCUMENT STRUCTURE

</estrutura>
DECLARATIONS


COMMENTS



MARKUP
Processo de “marcar” o conteúdo com TAGS


Conjunto de TAGS de um documento.


“Ah e tal, é preciso meter aí um <BR />

“Ah e tal, é preciso mexer no markup”


ELEMENT TYPES / TAGS
Cada ELEMENT TYPE tem o seu TAG


Cada elemento é definido por um par

OPENING TAG + CLOSING TAG

<tag>
...conteúdo...
</tag>


HTML
Alguns ELEMENT TYPE

podem dispensar CLOSING-TAG

(mas não é aconselhável)

<h1>Carpe Diem!
<p>Lorem ipsum dolor sit amet.
<p>Et pluribus unum.


XHTML
Todos os ELEMENT têm que abrir/fechar

seja qual fôr o seu ELEMENT TYPE

(regra “well-formed” do XML)

<h1>Carpe Diem!</h1>
<p>Lorem ipsum dolor sit amet.</p>
<p>Et pluribus unum.</p>


HTML
Alguns ELEMENT TYPE

não têm CLOSING-TAG
porque nunca têm conteúdo

<br>
<hr>
<img src= “/media/logo.png”>


XHTML
Nos elementos sem conteúdo omite-se o

CLOSING-TAG e dizem-se AUTO-CLOSING

(só se “deve” aplicar a elementos que não têm
conteúdo por natureza... porquê?)

<link type=“text/css” href=“/style/x.css” />
<br />
<img src= “/media/logo.png” />
<div />

ATTRIBUTES
Cada ELEMENT TYPE tem um conjunto de

ATTRIBUTES possíveis
Ex: id, class


<tag id=“foo” class=“bar”>
...conteúdo...
</tag>


TAGS / ATTRIBUTES
HTML
Os TAGS ou ATTRIBUTES

não são case-sensitive

(mas é aconselhável só usar minúsculas)

<Tag ID=“foo” class=“bar”>
...conteúdo...
</Tag>


TAGS / ATTRIBUTES
XHTML
Os TAGS e ATTRIBUTES são case-sensitive


(usar minúsculas sempre!)

...conteúdo...
</tag>


TAGS / ATTRIBUTES
HTML
Alguns ATTRIBUTES de alguns TAGS

podem ser minimizados

<option value=“pt” selected>
Portugal
</option>


TAGS / ATTRIBUTES
XHTML
Nenhum ATTRIBUTE pode ser minimizado


(usa-se o valor igual ao nome do atributo)

<option value=“pt” selected=“selected”>
Portugal
</option>


CONTENT MODEL
O elemento principal do conteúdo é o BODY


Dentro deste, cada ELEMENT TYPE é:
BLOCK LEVEL

 INLINE LEVEL

<body>
...conteúdo...
</body>


BLOCK LEVEL
DIV <h1>welcome</h1>
H1 .. H6 <p>foo</p>
<div>bar</div>
P
BLOCKQUOTE
UL, OL, DL
welcome
ADDRESS
foo
TABLE
bar


INLINE LEVEL
SPAN <p>Lorem Ipsum
A <span>alfa</span>
<em>beta</em>.
STRONG, EM
</p>
IMG
CITE, CODE
Lorem Ipsum alfa beta.
INPUT
SELECT


CONTAINER / CONTENTS
Cada ELEMENT pode conter + ELEMENTS...


<tag>
    <tag>
        ...conteúdo...
    </tag>
</tag>
</tag>


CONTAINER / CONTENT MODEL
...mas apenas de terminados ELEMENT TYPE


- BODY só pode conter BLOCK LEVEL
- INLINE LEVEL não pode conter BLOCK
- ... e várias outras regras específicas

✗ ✗
<span> <p>
<p>...</p> <p>....</p>
</span> </p>


MARKUP (BÁSICO)
Texto


H1.6 P, SPAN, EM, STRONG, BLOCKQUOTE, ABBR
Listas/Items


UL, OL, LI, DL, DT, DD
Links


A
Secções


DIV


MARKUP - TEXTO
<h1>Bolo de Nozes</h1>
<h2>Preparação</h2>
<p>Deite num recipiente 100g de margarina
e 100g de açúcar e amasse muito bem até
amolecer.</p>
<p><img src= “/media/bolo1.jpg” /></p>
<p>...</p>


MARKUP - LISTAS
...
<h2>Ingredientes</h2>
<ul>
<li>99 ovos</li>
<li>31 nozes</li>
...
</ul>


MARKUP - LINKS
...
<h2>Receitas Relacionadas</h2>
<ul>
<li><a href= “/receitas/foo”>foo</a></li>
<li><a href= “/receitas/foo”>foo</a></li>
...
</ul>


FORGOTTEN “TAGS” XHTML
LABEL

<label for=“userpass”>Password</label>
<input type= “password” id=“userpass” />

DL, DT, DD

<dl>
<dt></dt>
<dd></dd>
</dl>


DOCUMENT STRUCTURE
<!DOCTYPE ... > Declarações
<html>
<head>
...
Cabeçalho
</head>
<body>
Conteúdo
...
</body>
</html>

HEADER XHTML
TITLE

<title>Password</title>

META

<meta name=“keywords”
content=“foo, bar, baz, lorem, ipsum, nozes” />

<meta httpequiv=quot;ContentTypequot;
content=quot;text/html; charset=UTF8quot; />


HEADER XHTML
SCRIPT

<script type=quot;text/javascriptquot; src=quot;/js/foo.jsquot; />

LINK

<link rel=quot;alternatequot; type=quot;application/rss+xmlquot;
  title=quot;Feedquot; href=quot;http://example.com/rssquot; />

<link rel=quot;shortcut iconquot;
   href=quot;http://example.com/fav.icoquot; />

<link rel=quot;stylesheetquot; type=quot;text/cssquot;
   href=quot;http://example.com/style/main.cssquot; />


DECLARAÇÕES HTML
!DOCTYPE - indica ao browser o tipo de

documento (qual o standard seguido)

<!DOCTYPE HTML PUBLIC
quot;//W3C//DTD HTML 4.01//ENquot;
quot;http://www.w3.org/TR/html4/strict.dtdquot;>


DECLARAÇÕES XHTML
No caso de XHTML...

Declaração XML com indicação do encoding


Elemento HTML tem que conter atributo NAMESPACE


<!DOCTYPE html PUBLIC
    quot;//W3C//DTD XHTML 1.0 Strict//ENquot;
    quot;http://www.w3.org/TR/xhtml1/DTD/xhtml1strict.dtdquot;>

<html xmlns=quot;http://www.w3.org/1999/xhtmlquot;
    lang=quot;ptquot; xml:lang=quot;ptquot;>


DECLARAÇÕES XHTML
No caso de XHTML...

Declaração <?xml ?> opcional se encoding = UTF-8


Se usada a declaração IE6 entra em QUIRKS MODE!


Encoding não é = UTF-8 !?


<?xml version=quot;1.0quot; encoding=quot;UTF8quot;?>

QUIRKS MODE - WTF!?


FAIL
QUIRKS MODE?
Obrigar o browser a apresentar o

documento segundo as regras (?)
quebradas pré-standards (IE 5.5)

Usar a declaração <?xml ... ?>

IE6 entra em QUIRKS MODE!

Não declarar <!DOCTYPE ... >

Praticamento todos os browsers passam a QUIRKS MODE


FAIL
TRANSITIONAL
Usar HTML deprecated (HTML 3.2, 1997)


FONT, CENTER, B, I, IFRAME, ...


bgcolor=“pink”


target=“_blank”


style=“...”


name=“...”



FAIL
(DES)ESTRUTURADO
<p>....</p>
<img ... />
<h2>Relacionados</h2>
<p>....</p>
<h1>Todos os Bolos do Mundo</h1>


FAIL
DIVITIS
<div class=“receitaWrapper”>
<div class= “receita”>
<div class= “receitaContent”>
<div class=“title”>
</div>
<div class=“subtitle”>
<p class=“link”>
<a href=“/more”>
<span class= “more” ...


FAIL
SEMÂNTICA (1)
<div class=“receita”>
<p class=“title”>Bolo de Nozes</p>
<strong class=“texto”>
Deite num recipiente 100g de margarina e
100g de açúcar e amasse
<span class=“strong”>muito bem</span>
até amolecer.<br />
Junte...
</strong>
<blockquote class=“danger”>...</blockquote>
</div>


FAIL
SEMÂNTICA (2)
<div class=“roundedBox”>
<h2 class=“shadow”>Bolo de Nozes</h2>
<p class=“gray”>
Deite num recipiente 100g de margarina e
100g de açúcar e amasse
<strong class=“yellowItalic”>muito
bem</strong> até amolecer.
</p>
<a class=“orangeBig” href=“...”>...</a>
</div>


FAIL
NÃO-CONTEÚDO
<a href=“/about” class=“header”>
<img src=“about.png” />
</a>

<div class=“title”>
<img src=“receitas.png” />
</div>

<a href=“/about”>...</a> | <a ...


COOL
COMENTÁRIOS
STDOUT/STDERR






<div class=“receitas”>
...
</div>

COOL
STANDARDS
Validador W3C

http://validator.w3.org/check

DTD Recomendados

http://www.w3.org/QA/2002/04/valid-dtd-list.html

Web-Standards Project

http://www.webstandards.org/

XTHML vs content-type

http://h3h.net/2005/12/xhtml-harmful-to-feelings/
http://www.456bereastreet.com/archive/200501/the_perils_of_using_xh


COOL
EDITORES TEXTO
Open


Syntax-highlight


Auto-complete


Auto-format


Save as “desktop/test.(x)html”


Abrir no(s) browser(s) ;-)



COOL
EXTENSÕES FF
FIREBUG (inspect/test html, css, js, headers, ...)

http://www.youtube.com/results?q=firebug

TIDY (validate html - error/warn - line# + why?)

http://users.skynet.be/mgueury/mozilla/

WEB-DEVELOPER (enable/disable css, js, ...)

https://addons.mozilla.org/en-US/firefox/addon/60


COOL
REFERÊNCIAS
W3C (specs completos, linguagem muito técnica)

http://www.w3.org/html/

W3SCHOOLS (rápido, incompleto, impreciso...)

http://www.w3schools.com/xhtml/

WIKIPEDIA (ah pois...)

http://en.wikipedia.org/wiki/Html


COOL
EXEMPLOS BONS/MAUS
WWW (inspect/test html, css, js, headers, ...)

Dicas que estamos perante um bom exemplo:
MARKUP válido (check tidy!)

 MARKUP mínimo
 MARKUP semântico
 MARKUP comentado

Exemplo máximo: bom MARKUP não precisa de

ser alterado quando muda o layout:
a.k.a. link do costume: http://www.csszengarden.com/


COOL
MESTRES
ALA (A List Apart)

http://www.alistapart.com/topics/code/htmlxhtml/

456BEREASTREET (Roger Johansson)

http://www.456bereastreet.com/

Muitos mais...

http://perguntem.ao.andr3.net


HTML - How To

Recomendados

Recomendados

Mais conteúdo relacionado

Mais de SAPO Sessions

Mais de SAPO Sessions (9)

HTML - How To