ApresentacaoOfficial Aula4 XHTML e CSS

#Aula N 4 XHTML+CSS
webstandards.samus.com.br webstandards.samus.com.br/aulas/aula4.pdf
Vinicius Fiorio Custdio samus@samus.com.br
#Objetivo
Revisar os conceitos mais importantes da XHTML e do CSS. Desenvolver um projeto real utilizando os conceitos usados, apresentando tcnicas 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
#Reviso - XHTML
Reviso 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, so 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 possveis nveis de ttulos e cabealhos de uma pgina: <h1>Ttulo <h2>Ttulo <h3>Ttulo <h4>Ttulo <h5>Ttulo <h6>Ttulo 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 relatrios e planilhas. Existem tags no muito usadas que so essenciais para organizar e definir o funcionamento das tabelas. No utilize tabelas para o posicionamento de elementos grficos.
Usado para listas de itens e Tpicos, podem ser ordenadas ou no. Uma de suas principais caractersticas Aninhar Tpicos
<ul> <li>Captulo 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 - Listas
#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 no, utilize sempre o atributo alt (alternative text) Ex.: <img src=pato.jpg alt=PatoFoto />
#Tags - Containers
So elementos que podem representar qualquer coisa. No possuem nenhuma caracterstica especial e so as tags mais utilizadas no cdigo por ter mais liberdade de formatao css.
Container Block
<div>Container 1</div>
Container InLine
<span>Container 2</span>
#Reviso - CSS
Reviso 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 obrigatrio
<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 cdigo 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 especficos
CSS:
* { margin: auto; color: black; }
#Tcnicas de Posicionamento
de elementos - float
Define o local onde um elemento aparecer em outro elemento.
CSS:
.left { float: left; }
Define restries ao posicionamento, de acordo com o elemento colocado anteriormente.
CSS:
de elementos - clear
.clear { clear: both; }
de elementos - margin
Com o margin auto possvel posicionar dinamicamente o contedo (mais comum centralizar).
CSS:
.auto { margin: auto; }
#Mo na Massa tUitter

Desenvolvimento de uma pgina XHTML bem estruturada a partir de um Projeto Grfico
#Resultado do Projeto Grfico
#Guia para o desenvolvimento
#Resultado Final Esperado

ApresentacaoOfficial Aula4 XHTML e CSS

Enviado por

Dados do documento

Direitos autorais

Formatos disponíveis

Compartilhar este documento

Compartilhar ou incorporar documento

Opções de compartilhamento

Você considera este documento útil?

Este conteúdo é inapropriado?

Direitos autorais:

Formatos disponíveis

ApresentacaoOfficial Aula4 XHTML e CSS

Enviado por

Direitos autorais:

Formatos disponíveis

#Aula N 4 XHTML+CSS

#Estrutura XHTML (xml)

#Estrutura XHTML (doctype)

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">

#Estrutura XHTML (xmlns) Namespace

#Estrutura XHTML (Content-Type e Metas)

<meta http-equiv="Content-Type" content="text/html; charset=ISO-8859-1"/>

#Tags Links e ncoras

#Incluindo o CSS no HTML

body {} .titulo {} #menu {}

#O que uma propriedade

#Tipos de seletores - HTML

body { color: red; }

<body> Eu vou ser um texto vermelho </body>

#Tipos de seletores - Classe

.preto { color: black; } .titulo { font-weight: bold; font-size: 14px; }

<div class=titulo>Eu sou titulo</div>

#menu { background-color: purple; color: white; }

<div id=menu> Menu Legal </div>

* { margin: auto; color: black; }

.left { float: left; }

.clear { clear: both; }

.auto { margin: auto; }

#Mo na Massa tUitter

#Resultado do Projeto Grfico

#Guia para o desenvolvimento

#Resultado Final Esperado

Você também pode gostar