HTML - How To

2009.03.04 HTML/XHTML

<title>HTML/XHTML</title>

<html>

<head>

</head>

<body>

</body>

</html>


André Torgal – Lisboa, Portugal - 2009-03-04

<html>

<head>

<title>HTML</title>

<meta name=”author”

content=”André Torgal”><meta name="geo.placename"

content="Lisboa, Portugal" /><meta name="DC.Date.Created"

content="2009-03-04">...

</head>

<body>

...


HOW-TO

XHTMLHTML

FAIL

COOL


HTML::State Of The Art

Estrutura

Semântica

Conteúdo

Usabilidade

Acessibilidade

SEO

...

Declarações

#referências

<estrutura><semântica>

... Contéudo

...</semântica>

</estrutura>


HTML::Apenas HTML

Estrutura

Semântica

Conteúdo

Declarações

#referências


... Contéudo

...</semântica>

</estrutura>


XHTML1.0

STRICT2000

HTML XHTML

1986 1998

HTML 4.0.1

STRICT1999

SGML XML


Declarações

#referências


... Conteúdo

...</semântica>

</estrutura>

COMPONENTES MARKUP

ELEMENT TYPE

TAG

ATTRIBUTE / VALUE

ELEMENT

CONTENT MODEL

DOCUMENT STRUCTURE

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 parOPENING 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/fecharseja 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-TAGporque 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 />


http://stackoverflow.com/questions/348736/xhtml-is-writing-self-closing-tags-for-elements-not-traditionally-empty-bad-pra


ATTRIBUTES

Cada ELEMENT TYPE tem um conjunto de ATTRIBUTES possíveis

Ex: id, class

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

</tag>


HTML

Os TAGS ou ATTRIBUTES não são case-sensitive

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

TAGS / ATTRIBUTES

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

</Tag>


XHTML

Os TAGS e ATTRIBUTES são case-sensitive

(usar minúsculas sempre!)

TAGS / ATTRIBUTES

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

</tag>


HTML

Alguns ATTRIBUTES de alguns TAGSpodem ser minimizados

TAGS / ATTRIBUTES

<option value=“pt” selected>Portugal

</option>


XHTML

Nenhum ATTRIBUTE pode ser minimizado

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

TAGS / ATTRIBUTES

<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 .. H6

P

BLOCKQUOTE

UL, OL, DL

ADDRESS

TABLE

<h1>welcome</h1><p>foo</p><div>bar</div>

welcome

foo

bar


INLINE LEVEL

SPAN

A

STRONG, EM

IMG

CITE, CODE

INPUT

SELECT

<p>Lorem Ipsum <span>alfa</span> <em>beta</em>.</p>

Lorem Ipsum alfa beta.


CONTAINER / CONTENTS

Cada ELEMENT pode conter + ELEMENTS...

<tag id=“foo” class=“bar”><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>

</span>

<p><p>....</p>

</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>


MARKUP (FORMS)

Form

FORM, FIELDSET

Controls

INPUT type=“hidden|text|radio|checkbox|file|password|submit|reset”

TEXTAREA

SELECTtype=“multiple”


FORGOTTEN “TAGS”

LABEL

DL, DT, DD

<label for=“userpass”>Password</label><input type= “password” id=“userpass” />

<dl><dt></dt><dd></dd>

</dl>

XHTML


DOCUMENT STRUCTURE

<!DOCTYPE ... >

<html>

<head>

...

</head>

<body>

...

</body>

</html>

Declarações

Cabeçalho

Conteúdo


HEADER

TITLE

META

<title>Password</title>

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

<meta httpequiv="ContentType" content="text/html; charset=UTF8" />

XHTML


HEADER

SCRIPT

LINK

<script type="text/javascript" src="/js/foo.js" />

<link rel="alternate" type="application/rss+xml" title="Feed" href="http://example.com/rss" />

<link rel="shortcut icon" href="http://example.com/fav.ico" />

<link rel="stylesheet" type="text/css" href="http://example.com/style/main.css" />

XHTML


DECLARAÇÕES

!DOCTYPE - indica ao browser o tipo de documento (qual o standard seguido)

<!DOCTYPE HTML PUBLIC "//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">

HTML

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


DECLARAÇÕES

No caso de XHTML... Declaração XML com indicação do encoding

Elemento HTML tem que conter atributo NAMESPACE

<!DOCTYPE html PUBLIC "//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1strict.dtd">

<html xmlns="http://www.w3.org/1999/xhtml" lang="pt" xml:lang="pt">

XHTML


DECLARAÇÕES

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="1.0" encoding="UTF8"?>

XHTML

QUIRKS MODE - WTF!?


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 FAIL


<h3>Ingredientes</h3>

<p>....</p>

<img ... />

<h2>Relacionados</h2>

<p>....</p>

<h1>Todos os Bolos do Mundo</h1>


DIVITIS FAIL

<div class=“receitaWrapper”><div class= “receita”>

<div class= “receitaContent”>

<div class=“title”><h2>Bolo de Nozes</h2>

</div><div class=“subtitle”>

<h3>Ingredientes</h3><p class=“link”>

<a href=“/more”><span class= “more” ...


SEMÂNTICA (1) FAIL

<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>


SEMÂNTICA (2) FAIL

<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>


NÃO-CONTEÚDO FAIL

<a href=“/about” class=“header”><img src=“about.png” />

</a>

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

</div>

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


COMENTÁRIOS COOL

STDOUT/STDERR



<div class=“receitas”>...

</div>




STANDARDS COOL

Validador W3Chttp://validator.w3.org/check

DTD Recomendadoshttp://www.w3.org/QA/2002/04/valid-dtd-list.html

Web-Standards Projecthttp://www.webstandards.org/

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

http://validator.w3.org/check

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

http://www.webstandards.org/

http://h3h.net/2005/12/xhtml-harmful-to-feelings/

http://www.456bereastreet.com/archive/200501/the_perils_of_using_xhtml_properly/


EDITORES TEXTO COOL

Open Syntax-highlight Auto-complete Auto-format

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

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


EXTENSÕES FF COOL

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

http://www.youtube.com/results?q=firebug

http://users.skynet.be/mgueury/mozilla/

https://addons.mozilla.org/en-US/firefox/addon/60


REFERÊNCIAS COOL

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

http://www.w3.org/html/

http://www.w3schools.com/xhtml/

http://en.wikipedia.org/wiki/Html


EXEMPLOS BONS/MAUS COOL

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/

http://www.csszengarden.com/


MESTRES COOL

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

http://www.alistapart.com/topics/code/htmlxhtml/

http://www.456bereastreet.com/

http://perguntem.ao.andr3.net/

HTML - How To

Technology

margarina e

htmlxhtmlnocontedo fail

contedo o bodydentro

element types tagshttp

tm contedo por natureza

um ah e tal

obrigar o browser

acar e amasse muito