Aula Nº 4 – XHTML+CSS
Transcrição
Aula Nº 4 – XHTML+CSS
#Aula Nº 4 – XHTML+CSS webstandards.samus.com.br webstandards.samus.com.br/aulas/aula4.pdf Vinicius Fiorio Custódio [email protected] #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 #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” #Revisão - XHTML Revisão sobre a estrutura dos documentos XHTML e suas principais tags #Estrutura XHTML (xml) <?xml version="1.0" encoding="ISO-8859-1"?> <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd"> <html xmlns="http://www.w3.org/1999/xhtml"> <head> <meta http-equiv="Content-Type" content="text/html; charset=ISO-88591"/> <title>Hello Title</title> </head> <body> <p> Hello World of Web Standards </p> </body> </html> #Estrutura XHTML (doctype) <?xml version="1.0" encoding="ISO-8859-1"?> <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd"> <html xmlns="http://www.w3.org/1999/xhtml"> <head> <meta http-equiv="Content-Type" content="text/html; charset=ISO-88591"/> <title>Hello Title</title> </head> <body> <p> Hello World of Web Standards </p> </body> </html> #Estrutura XHTML (xmlns) Namespace <?xml version="1.0" encoding="ISO-8859-1"?> <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd"> <html xmlns="http://www.w3.org/1999/xhtml"> <head> <meta http-equiv="Content-Type" content="text/html; charset=ISO-88591"/> <title>Hello Title</title> </head> <body> <p> Hello World of Web Standards </p> </body> </html> #Estrutura XHTML (Content-Type e Metas) <?xml version="1.0" encoding="ISO-8859-1"?> <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd"> <html xmlns="http://www.w3.org/1999/xhtml"> <head> <meta http-equiv="Content-Type" content="text/html; charset=ISO-8859-1"/> <title>Hello Title</title> </head> <body> <p> Hello World of Web Standards </p> </body> </html> #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> #Tags - Headers Teoricamente definem os 6 possíveis níveis de títulos e cabeçalhos de uma página: <h1>Título <h2>Título <h3>Título <h4>Título <h5>Título <h6>Título 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 e definir o funcionamento das tabelas. Não utilize tabelas para o posicionamento de elementos gráficos. #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> #Revisão - CSS Revisão sobre a sintaxe CSS, Seletores e principais propriedades #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" /> #Sintaxe Sintaxe é simples e intuitiva. seletor { propriedade: valor da propriedade; } .seletor { color: red; } #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 {} #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'); #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> #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> #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> #Seletor universal Seleciona todos os elementos. Usado em alguns casos bem específicos CSS: * { margin: auto; color: black; } #Técnicas de Posicionamento de elementos - float Define o local onde um elemento aparecerá em outro elemento. CSS: .left { float: left; } #Técnicas de Posicionamento de elementos - clear Define restrições ao posicionamento, de acordo com o elemento colocado anteriormente. CSS: .clear { clear: both; } #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; } #Mão na Massa – tUitter Desenvolvimento de uma página XHTML bem estruturada a partir de um Projeto Gráfico #Resultado do Projeto Gráfico #Guia para o desenvolvimento #Resultado Final Esperado
Documentos relacionados
Aula Nº 1 – Introdução
tabelas. É simples, tabelas devem ser usadas para elementos tabulares.
Leia maishtml
por ser a primeira linguagem de alto nível desenvolvida. Foi a partir dela que surgiram outras; portanto, FORTRAN é considerada a raiz que deu origem à árvore das lingua...
Leia maisIntrodução ao desenvolvimento Web usando HTML, CSS e PHP
deixamos aqui, é: NÃO USE FRAMES. No máximo, use inline frames (iframes) e em casos específicos onde sejam, de fato, interessantes. Quer um bom exemplo de uso de iframes? Gmail. No quadro abaixo, i...
Leia mais