#Aula Nº 2 – Marcação XHTML
webstandards.samus.com.br
webstandards.samus.com.br/aulas/aula2.pdf
Vinicius Fiorio Custódio
[email protected]
#Objetivo
Descrever os principais elementos da
XHTML, Quando, Porque e onde
utilizar.
Apresentar as diferenças de Sintaxe e
definições da XHTML para HTML
Focaremos em aplicações reais.
#Ambiente de Desenvolvimento
Para computadores do laboratório:
Iniciar o XAMPP
c:\ws\xampp\xampp\
Iniciar o Netbeans 6.8 M1
Pasta dos projetos:
c:\ws\xampp\xampp\htdocs\
#Criando Projeto (netbeans)
Criação do Projeto:
File > New Project > PHP > PHP Application
Pasta: c:\ws\xampp\xampp\htdocs\
Nome do Projeto: ws2
Encoding: ISO-8859-1
Acessando o Projeto no navegador:
http://localhost/ws2/
Funcionando?
#Tags Removidas/Desuso
Várias tags estão em desuso (mesmo
que elas ainda funcionem) outras são
desencorajadas.
Ex.:
<marquee>
Quem sabe porque Marquee esta em
desuso?
</marquee>
#Definições 1 - Elementos
Elementos
Descrevem dados, podem conter textos e outros
elementos.
Elementos que descrevem dados:
<p>Paragrafo</p>
<a href=”#” title=”oi”>Link</a>
Elementos Vazios:
<br />
<hr />
Elementos vazios devem ser fechados após espaço
#Definições 2 - Tags
Fechamento de Elementos:
Obrigatório, deve ser na ordem
inversa de abertura.
<div><span>Correto</span></div>
<div><span>Errado</div></span>
#Definições 3 -Atributos
Localizado nas tags de abertura,
objetivo de fornecer mais
informações sobre um elemento.
Ex.:
<div>Tag Boba</div>
<div title=”Mouse em cima!”>
Tag Legal
</div>
#Dica -Atributos
SEMPRE utilize o Netbeans para
visualizar e inserir os atributos, evite
erros e seja feliz:
ctrl + spaço
Dentro da tag de abertura e veja a lista de atributos daquela tag
#Definições 4 – Caracteres
Especiais
Caracteres especiais:
Devem ser representados pelo código
código, são iniciados por “&” e
terminados em “;”.
No Netbeans digite “&” depois
ctrl+espaço e veja exemplos de
caracteres
#Definições 5 – Letras
minusculas
Não é aceito tags escritas com o letra
maiúscula, arranque o Caps Look do
seu teclado
Correto
<div>Legal</div>
Errado
<DIV>bobeira</DiV>
#Definições 6 – Elementos
InLine X Block
Elementos “Bloco” ocupam toda a
largura disponível, podem conter
elementos Inline e outros elementos
Bloco
Elementos “InLine” ocupam apenas a
largura deles, só podem conter
elementos inline
#Definições 7 – Comece
sempre por um Block
Após o <body> é esperado qualquer elemento Block,
então logo após a declaração do <body> é errado iniciar
o Body com textos e elementos inline
<body>
<div>Isso ta correto</div>
</body>
<body>
<span>Isso ta errado</span>
</body>
#Atributos Comuns
Atributos comuns entre as tags, e etremamente
importantes:
class=”nome-da-classe”
id=”nome-unico”
style=”css-inline”
title=”Texto de Ajuda”
Ex.:
<div class=”titulo” id=”titulo-1”>
Bem vindo ao site
</div>
#Atributos Comuns
Atributos comuns entre as tags, e etremamente
importantes:
class=”nome-da-classe”
id=”nome-unico”
style=”css-inline” (evite
title=”Texto
Ex.:
usar css in-line)
de Ajuda”
<div class=”titulo” id=”titulo-1”>
Bem vindo ao site
</div>
#Tags - Headers
Teoricamente definem os 6 possíveis niveis de
titulos e cabeçalhos de uma página:
<h1>Titulo
<h2>Titulo
<h3>Titulo
<h4>Titulo
<h5>Titulo
<h6>Titulo
com
com
com
com
com
com
h1</h1>
h2</h2>
h3</h3>
h4</h4>
h5</h5>
h6</h6>
#Tags - Tabelas
Utilizadas para dados tabulares como
relatórios e planilhas. Existem tags não
muito usadas que são essenciais para
organizar, definir o funcionamento das
tabelas.
Não utilize tabelas para o posicionamento
de elementos gráficos.
#Tags – Tabelas 2
<table>
<colgroup>
<col class="coluna1"></col>
<col class="coluna2"></col>
</colgroup>
<thead>
<tr>
<th>Nome</th>
<th>E-Mail</th>
</tr>
</thead>
<tfoot>
<tr>
<th>Nome</th>
<th>E-mail</th>
</tr>
</tfoot>
<tbody>
<tr>
<td>Vinicius Fiorio Custódio</td>
<td>[email protected]</td>
</tr>
</tbody>
</table>
#Tags - Listas
Usado para listas de itens e Tópicos, podem ser
ordenadas ou não. Uma de suas principais
características é Aninhar Tópicos
<ul>
<li>Capítulo 1</li>
<li>
<ol>
<li>O dia em que a terra parou</li>
<li>Medo da chuva</li>
<li>Judas</li>
<li>Como vovó já dizia</li>
</ol>
</li>
</ul>
#Tags – Links e Âncoras
O famoso Hyperlink, normalmente usado com o
atributo href=”” para referenciar um arquivo ou
parte do mesmo documento.
<a href=”http://samus.com.br”>
Acesse o site
</a>
<a href=”#ancora”>Sou uma âncora</a>
<div id=”ancora”>
Posso ser referenciado
</div>
#Tags – Imagens
Exibe imagens e mapas de imagens na tela, o
caminho pode ser relativo ou não, utilize sempre
o atributo “alt” (alternative text)
Ex.:
<img src=”pato.jpg” alt=”PatoFoto” />
#Tags - Containers
São elementos que podem representar
“qualquer coisa”, não possuem nenhuma
característica especial e são as tags mais
utilizadas no código por ter mais liberdade de
formatação css.
Container Block
<div>Container 1</div>
Container InLine
<span>Container 2</span>
#Mão na Massa
Desenvolvendo nosso exemplo prático:
http://webstandards.samus.com.br