#Aula Nº 2 Marcação XHTML webstandards.samus.com.br webstandards.samus.com.br/aulas/aula2.pdf Vinicius Fiorio Custódio

Tamanho: px

Começar a partir da página:

Download "#Aula Nº 2 Marcação XHTML webstandards.samus.com.br webstandards.samus.com.br/aulas/aula2.pdf Vinicius Fiorio Custódio"

William Quintanilha Oliveira
7 Há anos
Visualizações:

1 #Aula Nº 2 Marcação XHTML webstandards.samus.com.br webstandards.samus.com.br/aulas/aula2.pdf Vinicius Fiorio Custódio samus@samus.com.br

2 #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.

3 #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\

4 #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 Acessando o Projeto no navegador: Funcionando?

5 #Estrutura Padrão Assumiremos que todos os exemplos e tags da apresentação estão sendo escritos dentro da tag <body> da estrutura padrão do XHTML apresetada anteriomente. <?xml version="1.0" encoding="iso "?> <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" " <html xmlns=" <head> <meta http-equiv="content-type" content="text/html; charset=iso "/> <title>exemplos</title> </head> <body> <div> Escreva os exemplos aqui </div> </body> </html>

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

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

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

9 #Definições 3 -Atributos Localizado nas tags de abertura, tem como objetivo fornecer mais informações sobre um elemento. Ex.: <div>tag Boba</div> <div title= Mouse em cima! > Tag Legal </div>

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

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

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

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

14 #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 com textos e elementos inline <body> <div>isso ta correto</div> </body> <body> <span>isso ta errado</span> </body>

15 #Atributos Comuns Atributos comuns entre as tags, são os mais 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>

16 #Tags - Headers Teoricamente definem os 6 possíveis níveis de títulos e cabeçalhos de uma página: <h1>título com h1</h1> <h2>título com h2</h2> <h3>título com h3</h3> <h4>título com h4</h4> <h5>título com h5</h5> <h6>título com h6</h6>

17 #Tags - Tabelas Utilizadas para dados tabulares como relatórios e planilhas. Existem tags não muito usadas que são essenciais para organizar e definir o funcionamento das tabelas. Não utilize tabelas para o posicionamento de elementos gráficos.

18 #Tags Tabelas 2 <table> <colgroup> <col class="coluna1"></col> <col class="coluna2"></col> </colgroup> <thead> <tr> <th>nome</th> <th> </th> </tr> </thead> <tfoot> <tr> <th>nome</th> <th> </th> </tr> </tfoot> <tbody> <tr> <td>vinicius Fiorio Custódio</td> <td>samus@samus.com.br</td> </tr> </tbody> </table>

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

20 #Tags Links e Âncoras O famoso Hyperlink, normalmente usado com o atributo href= para referenciar um arquivo ou parte do mesmo documento. <a href= > Acesse o site </a> <a href= #ancora >Sou uma âncora</a> <div id= ancora > Posso ser referenciado </div>

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

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

23 #Tags - Outras <br /> Quebra de Linha <strong>destaque</strong> <b>bold</b> <hr /> Traço <fieldset> <legend>legenda</legend> </fieldset> <p>paragrafo</p> Para tags de formulário veja no arquivo de exemplo

24 #Mão na Massa Desenvolvendo nosso exemplo prático:

Documentos relacionados

#Aula Nº 4 XHTML+CSS webstandards.samus.com.br webstandards.samus.com.br/aulas/aula4.pdf Vinicius Fiorio Custódio samus@samus.com.

#Aula Nº 4 XHTML+CSS webstandards.samus.com.br webstandards.samus.com.br/aulas/aula4.pdf Vinicius Fiorio Custódio samus@samus.com.br #Objetivo Revisar os conceitos mais importantes da XHTML e do CSS. Desenvolver