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

Tamanho: px

Começar a partir da página:

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

Helena Bandeira Canário
8 Há anos
Visualizações:

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

2 #Objetivo Revisar os conceitos mais importantes da XHTML e do CSS. Desenvolver um projeto real utilizando os conceitos usados, apresentando técnicas de posicionamento de elementos

3 #Ambiente de Desenvolvimento IDE: Eclipse Galileo (tbm poderá ser utilizado o Netbenas) c:\ws\eclipse\eclipse.exe Workspace: c:\ws\ Criando o Projeto: File > New Project > Web > Static Web Project Nome do Projeto: ws4

$exe Workspace: c:\ws\ Criando o Projeto: File > New$

4 #Revisão - XHTML Revisão sobre a estrutura dos documentos XHTML e suas principais tags

5 #Estrutura XHTML (xml) <?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>hello Title</title> </head> <body> <p> Hello World of Web Standards </p> </body> </html>

org/tr/xhtml1/dtd/xhtml1-strict.dtd"> <html xmlns="http://www.w3.

6 #Estrutura XHTML (doctype) <?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>hello Title</title> </head> <body> <p> Hello World of Web Standards </p> </body> </html>

7 #Estrutura XHTML (xmlns) Namespace <?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>hello Title</title> </head> <body> <p> Hello World of Web Standards </p> </body> </html>

8 #Estrutura XHTML (Content-Type e Metas) <?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>hello Title</title> </head> <body> <p> Hello World of Web Standards </p> </body> </html>

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

nome-unico style= css-inline title= Texto de Ajuda Ex.

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

h1</h1> <h2>título com h2</h2> <h3>título com h3</h3>

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

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

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

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

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

utilizadas no código por ter mais liberdade de formatação css.

16 #Revisão - CSS Revisão sobre a sintaxe CSS, Seletores e principais propriedades

17 #Incluindo o CSS no HTML Inclua as folhas de estilo utilizando a tag <link>. Esta tag é usada para outras coisas por isso o atributo rel é obrigatório <link rel="stylesheet" href="file.css" /> Atributo Type é opicional <link rel="stylesheet" type="text/css" href="file.css" />

18 #Sintaxe Sintaxe é simples e intuitiva. seletor { propriedade: valor da propriedade; }.seletor { color: red; }

19 #O que é um Seletor? Um código que faz referencia à um elemento do seu documento XHTML, podendo ser um elemento da HTML ou um Identificador informado (Classe ou ID). Ex.: body {}.titulo {} #menu {}

20 #O que é uma propriedade Qualquer estilo que pode ser aplicado a um seletor. Ex.: font-size: 11px; color: #f3f3f3; width: 80%; border: 5px solid black; background-image: url('tits.jpg');

21 #Tipos de seletores - HTML Utiliza-se o nome de qualquer elemento da HTML CSS: body { color: red; } HTML: <body> Eu vou ser um texto vermelho </body>

22 #Tipos de seletores - Classe Seletores de classe utilizam o ponto:. + nome da classe CSS:.preto { color: black; }.titulo { font-weight: bold; font-size: 14px; } HTML: <div class= titulo >Eu sou titulo</div>

23 #Tipos de seletores - ID Seletores de ID utilizam tralha: # + nome do elemento CSS: #menu { background-color: purple; color: white; } HTML: <div id= menu > Menu Legal </div>

24 #Seletor universal Seleciona todos os elementos. Usado em alguns casos bem específicos CSS: * { margin: auto; color: black; }

25 #Técnicas de Posicionamento de elementos - float Define o local onde um elemento aparecerá em outro elemento. CSS:.left { float: left; }

26 #Técnicas de Posicionamento de elementos - clear Define restrições ao posicionamento, de acordo com o elemento colocado anteriormente. CSS:.clear { clear: both; }

27 #Técnicas de Posicionamento de elementos - margin Com o margin auto é possível posicionar dinamicamente o conteúdo (mais comum é centralizar). CSS:.auto { margin: auto; }

28 #Mão na Massa tuitter Desenvolvimento de uma página XHTML bem estruturada a partir de um Projeto Gráfico

29 #Resultado do Projeto Gráfico

30 #Guia para o desenvolvimento

31 #Resultado Final Esperado

Documentos relacionados

#Aula Nº 3 Estilo CSS webstandards.samus.com.br webstandards.samus.com.br/aulas/aula3.pdf Vinicius Fiorio Custódio samus@samus.com.

#Aula Nº 3 Estilo CSS webstandards.samus.com.br webstandards.samus.com.br/aulas/aula3.pdf Vinicius Fiorio Custódio samus@samus.com.br #Objetivo Apresentar os conceitos de utilização do CSS, Sintaxe, Seletores