17. HTML 4, XHTML, HTML5
● Html 4, CSS 2
Maneiro mas limitado
● Xhtml
Similar a html mas mais bem formatado (não pegou)
● Html 5, CSS 3
Maneirão
http://www.w3schools.com/
20. DOCTYPE
HTML 5 (Maneiro)
<!DOCTYPE html>
HTML 4
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML
4.01//EN" "http://www.w3.
org/TR/html4/strict.dtd">
XHTML 1.1
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML
1.1//EN" "http://www.w3.
org/TR/xhtml11/DTD/xhtml11.dtd">
22. INDEX.HTML
● Nome do arquivo principal index.html
● Servidores web reconhecem
automáticamente
● Segredo do sucesso: Identação
23. DIV
● Define uma divizão, seção ou bloco do
documento.
● Normalmente usado como agrupador.
● Trabalha relacionado com formatação CSS.
● Por padrão é um quebrador de linha display:
block.
29. CLASSES COM CLASSE
Não usar:
● mainDiv
● redDiv
● right
Usar:
● main
● principal
● secundaria
SIGNIFICADO
OBJETIVO
SEMÂNTICA
30. UNINDO HTML E CSS
..
<title>Título</title>
<link rel="stylesheet" href="
main.css" type="text/css" media="
all">
</head>
<body>
<div class="main">
Conteúdo</div>...
31. SPAN
● Muito similar a div, mas não é um bloco.
● Sem display:block;
● Normalmente utilizado para diferenciar uma
parte do texto visualmente.
<span>Outro conteúdo</span>
Mais a frente discutiremos a parte do display.
33. SEÇÕES HTML 5
Principalmente utilizadas para SEO. Comportamanto semelhante a div.
header
Cabeçalho
footer
Rodapé
section
Seção qualquer
article
Um artigo.
aside
Sidebar, menu lateral
details
Detalhes que podem ser escondidos ou mostrados
dialog
Diálogo/popup.
summary
Cabeçalho para details.
nav
Navegação, engloba links. Normalmente usado para o menu principal.
34. SUPORTAR O COME COLA
CSS:
header, nav, article, footer,
address {
display: block;
}
Javascript (depois, depois...):
document.createElement("article");
document.createElement("footer");
document.createElement("header");
document.createElement("hgroup");
document.createElement("nav");
37. NA PRÁTICA
● As diferentes seções não são tão diferentes
assim.
● São mais usadas para organização e
semantica.
● Uma página organizada é aumenta a
“manutenibilidade”, ou seja capacitade de
manutenção.
● Uma página com boa semântica permite que
o motor dos buscadores façam uma melhor
interpretação da página.
45. Parágrafo (p)
<p>Conteúdo <span>dentro</span> do
parágrado<p>
Usado normalmente para colocar conteúdo
textual como notícias e posts de blogs.
Pode receber filhotes.
Tem o mesmo problema de alinhamento dos h’
s
46. Artigo ( article, hr, br)
Passível de uso em conjunto com article e h’s,
formando uma boa estrutura para um post.
<article>
<h1>Título muito interessante</h1>
<p>Conteúdo cheio de showdebolise!</p>
<hr>
<p>Conteúdo de outro parágrado.<p>
</article>
47. Comentário
<!-- Este é um comentário não serve
para quase nada.-->
●
●
●
●
●
●
Utilizado somente para código
Browser ignora
Utilizado para destacar autor
Pegadinhas (vaga de emprego)
Uso não recomendado pelo pagespeed.
Utilize comentários na linguagem do
servidor.
55. Ordenada com tipo
<h2>Ordenada com tipo</h2>
<ol type="I”>
<li>Café</li>
1) 1 - Número
<li>Xá</li>
2) A - Alfabética
<li>Leite</li>
3) a - Alfa. minus.
<li>Refrigerante</li>
4) I - Romano
5) i - Romano minus.
<li>Cerveja</li>
</ol>
61. Tabelas : tags
Tag
Descrição
table
Tabela
th
Cabeçalho (table header)
tr
Linha (table row)
td
Célula ( cell)
caption
Título
colgroup
Grupo de colunas
col
Usado com colgroup
thead
Cabeçalho da tabela
tbody
Corpo da tabela
tfoot
Rodapé da tabela
sumary
Sumário (não é renderizado)