Aula Nº 4 – XHTML+CSS

Transcrição

#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)
<head>
</head>
<body>
<p>
</p>
</body>
</html>
#Estrutura XHTML (xmlns)
Namespace
<head>
</head>
<body>
<p>
</p>
</body>
</html>
#Estrutura XHTML
(Content-Type e Metas)
<head>
<meta http-equiv="Content-Type"
content="text/html; charset=ISO-8859-1"/>
</head>
<body>
<p>
</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;
}
de elementos - clear
Define restrições ao posicionamento,
de acordo com o elemento colocado
anteriormente.
CSS:
.clear {
clear: both;
}
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

Aula Nº 4 – XHTML+CSS

Transcrição

Documentos relacionados

Aula Nº 1 – Introdução

WySiWYg - WordPress.com

Paulo Jean Alves da Silva [email protected]

Correcção Teste_3

CSS CASCADING STYLE SHEETS

html

10. CSS

Apostila de XHTML

Apostila html e xhtml

Layouts de páginas com HTML e CSS

Cascading Style Sheets II

Introdução ao desenvolvimento Web usando HTML, CSS e PHP

Seção do Cabeçalho - profª msc. elizabete munzlinger

Web Design: Responsivo e Adaptativo

Apostila de Introduç˜ao ao CSS - Universidade Federal Fluminense

CSS

Carlos André Gomes dos Santos

Guia Visual para... Re-encodar um DVD9 com o “Rebuilder AIO

Folha de Estilos em Cascata Cascading Style Sheet

Imagens em HTML

Ricardo Terra rterrabh [at] gmail.com - DCC

Java Server Faces