Programação Web com HTML e CSS

 Victor Adriel de J. Oliveira
 Ciência da Computação – UESC
 Associação Empresa Júnior de Computação
 Programação Web:
[HTML/CSS (tableless), jQuery, PHP, Smarty]
 Contato: victorajoliveira@gmail.com

 Introdução
 W3C
 HTML
◦ Introdução
◦ Sintaxe
◦ XHTML
◦ HTML 5
 CSS
◦ Sintaxe
◦ Propriedades
◦ Novidades

 A função da linguagem de marcação, nesse
caso o (X)HTML, é definir a estrutura e a
semântica. O CSS foi criado com o objetivo de
se separar o conteúdo das informações de
estilo.
 Nesse curso estudaremos a utilização do
HTML e do CSS além das novidades
decorrentes do surgimento do HTML 5 e do
CSS 3.

 O Consórcio World Wide Web (W3C) é uma
comunidade internacional que desenvolve
padrões com o objetivo de garantir o
crescimento da web e é responsável pela
definição das especificações do CSS.

 Motor de renderização é um software que
transforma conteúdo em linguagem de
marcação e informações de formatação
(como CSS) em um conteúdo formatado para
ser exibido na tela.
 Gecko – Firefox
 WebKit – Chrome e Safari
 Trident – Internet Explorer
 Presto - Opera

 A HTML - HyperText Markup Language
(Linguagem de Marcação de Hipertexto) é
uma linguagem de marcação usada para a
construção de páginas na web.
 O HTML é baseado no conceito de Hipertexto.
Hipertexto são conjuntos de elementos – ou
nós – ligados por conexões. Estes elementos
podem ser palavras, imagens, vídeos, áudio,
documentos etc.

 Todo documento HTML apresenta etiquetas,
elementos entre os sinais ‘<‘ e ‘>’.
Esses elementos são os comandos de
formatação da linguagem. A maioria das
etiquetas tem sua correspondente de
fechamento:
<etiqueta>...</etiqueta>

 As etiquetas servem para definir a formatação
de uma porção do documento, e assim
marcamos onde começa e termina o texto
com a formatação especificada por ela.
Alguns elementos são chamados “vazios”,
pois não marcam uma região de texto,
apenas inserem algum elemento no
documento:
<etiqueta>

 Uma etiqueta é formada por comandos,
atributos e valores:
<img src=“../imgs/imagem.png” />
atributocomando valor

 Estrutura básica:
<!DOCTYPE HTML>
<html>
<head>
<title>Título do Documento</title>
</head>
<body>
texto, imagem, links, ...
</body>
</html>

 Copie a estrutura básica do HTML em um
arquivo de texto e salve com o nome index e
a extensão .html
 Essa página será utilizada posteriormente.

…
<body>
<h1>This is heading 1</h1>
</body>

 <b> - Define o texto como negrito
 <big> - Define o texto como “grande”
 <em> - Define o texto como “ênfase”
 <i> - Define o texto como itálico
 <small> - Define o texto como “pequeno”
 <strong>- Define o texto como “forte”
 <sub> - Define o texto como subscrito
 <sup> - Define o texto como sobrescrito

…
<body>
<p><b>Texto - bold</b></p>
<p><strong>Texto - strong</strong></p>
<p><big>Texto - big</big></p>
<p><i>Texto - italic</i></p>
<p><em>Texto - emphasized</em></p>
<p><code>Texto - code</code></p>
<p>Texto <sub> subscrito</sub>
e texto<sup> sobrescrito</sup></p>
</body>

 <a href="url">texto link</a>
 Especificando URLs
◦ URL relativa
 background-image: URL(img1.png);
 background-image: URL(../arquivo.jpg);
◦ URL absoluta
 background-image: URL(http://www.site.com/nw.jpg);

 Link para seções
 Uma âncora dentro de um documento HTML:
◦ <a name=“topo">Topo da página</a>
 Crie um link para o “Topo da página" dentro
do mesmo documento:
◦ <a href="#topo">Ir para o topo</a>

 <img src="url" alt=“texto sobre a imagem"/>
 Coloque uma imagem em sua página HTML

 <tr> - Linha
 <td> - Coluna
 <th> - Coluna/Linha Título
 <caption> - Título da tabela
 <thead> - Cabeçalho da tabela
 <tbody> - Corpo da tabela
 <tfoot> - Rodapé da tabela

<table border="1">
<tfoot>
<tr><td>Soma</td><td>R$160</td></tr>
</tfoot>
<thead>
<tr><th>Mês</th><th>Quantia</th></tr>
</thead>
<tbody>
<tr><td>Janeiro</td><td>R$150</td></tr>
<tr><td>Fevereiro</td><td>R$10</td></tr>
</tbody>
</table>

 <ol> - Define uma lista ordenada
 <ul> - Define uma lista não ordenada
 <li> - Define um item de uma tabela
 <dl> - Define uma lista de definição
 <dt> - Define um item da lista de definição
 <dd> - Define a descrição de um item da
lista de descrição

 Faça a seguinte lista ordenada:
<ul>
<li>HTML</li>
<li>CSS</li>
<li>JavaScript</li>
</ul>
 Depois converta para uma lista não ordenada.

 Agora transforme-a em uma lista de
descrição:
HTML
- Linguagem de Marcação
CSS
- Folhas de Estilo em Cascata
JavaScript
- Linguagem de script

 Não estudaremos o uso de formulários, isso
deverá ser estudado em PHP ou Ruby.
 Veremos a construção de um formulário
simples em HTML e o uso de alguns campos.

<form>
<label>Nome:</label><br />
<input type="text" name="firstname"/><br />
<label>Password:</label> <br />
<input type="password" name="pwd" /><br />
<label>Sexo:</label> <br />
<input type="radio" name="sex" value="male" />
Masculino<br />
<input type="radio" name="sex" value="female"
/> Feminino<br /><br />

<label>Gostaria de aprender:</label><br />
<input type="checkbox" name="learn "
value="html" /> HTML
<br />
<input type="checkbox" name=“learn" value="css"
/> CSS
<br /><br />
<input type=“reset" value=“Limpar" />
<input type="submit" value=“Enviar" />
</form>

 Note que por default é utilizado o método
GET para o envio dos dados.
 O fluxo de dados é separado do endereço
URL através de um ponto de interrogação (?).
Esta forma de endereçamento e separação
pode ser observada no campo de endereços
do navegador após o formulário ter sido
enviado. Você verá algo como:
(...)index.html?firstname=Furiqueiro&pwd=031286
&sex=male&veiculo=html&veiculo+=css

 framespacing
◦ espaçamento entre frames (em pixel)
 frameborder
◦ existência de bordas entre frames (boolean)
 src
◦ caminho da página HTML a ser exibida no frame
 noresize
◦ impede redimensionamento do frame
 scrolling
◦ habilita barra de rolagem (yes ou no)

 É uma versão mais rigorosa e limpa do HTML.
Praticamente idêntica ao HTML 4.01
 O XHTML 1.0 tornou-se uma recomendação
da W3C desde 26 de janeiro de 2000.

HTML: Exibir elementos
XHTML: Descrever elementos
 Elementos XHTML devem estar aninhados;
 Todos os elementos devem ser fechados;
 Devem ser escritos em minúsculo;
 E devem conter o elemento raíz.

 Os nomes dos atributos devem estar em
letras minúsculas
 Errado:
◦ <table WIDTH="100%">
 Certo:
◦ <table width="100%">

 Os valores dos atributos devem estar entre
aspas
 Errado:
◦ <table WIDTH=100%>
 Certo:
◦ <table width="100%">

 Abreviação de atributo é proibido
 Errado:
◦ <input readonly>
◦ <input disabled>
 Certo:
◦ <input readonly="readonly" />
◦ <input disabled="disabled" />

 O DOCTYPE correto para páginas XHTML:
<!DOCTYPE html PUBLIC
"-//W3C//DTD XHTML 1.0 Transitional//EN“
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-
transitional.dtd">

 Enquanto o W3C focava suas atenções para a
criação da segunda versão do XHTML, um
grupo chamado Web Hypertext Application
Technology Working Group (WHATWG)
trabalhava em uma versão do HTML que
trazia mais flexibilidade para a produção de
websites e sistemas baseados na web.
 O WHATWG inclue a AOL, Apple, Google, IBM,
Microsoft, Mozilla, Nokia, Opera.

<!DOCTYPE HTML>
<html lang="pt-br">
<head>
<meta charset="UTF-8">
<link rel="stylesheet" type="text/css" href="estilo.css">
<title></title>
</head>
<body>
...
</body>
</html>

 <center>, <font>, <big>, <u> e <s>
por que seus efeitos são apenas visuais
 <frameset>, <frame> e <noframe>
por que ferem os princípios de acessibilidade e
usabilidade:

 Até agora nunca houve um padrão para
reprodução de áudio em uma página web. O
HTML5 especifica o elemento <audio>
<audio src="mus.oga" controls="true"
autoplay="true" />

 Atualmente, existem três formatos
suportados para o elemento de áudio:
 Ogg Vorbis, MP3 e WAV.
 Compatibilidade com os navegadores:

 Origens alternativas de áudio:
<audio controls="true" autoplay="true">
<source src="mus.oga" />
<source src="mus.mp3" />
<source src="mus.wma" />
</audio>

 Ofereça um conteúdo alternativo:
<audio controls="true" autoplay="true">
<source src="mus.oga" />
<source src="mus.mp3" />
<source src="mus.wma" />
<p>Faça o <a href="mus.mp3">download
da música</a>.</p>
</audio>

 O uso de vídeo é semelhante ao de áudio. O
HTML5 especifica o elemento <video>
<video src="u.ogv" width="400" height="300" />

 Atualmente, existem três formatos
suportados para o elemento de vídeo:
 Ogg e o MPEG 4.
 Compatibilidade com os navegadores:

 Origens alternativas de vídeo:
<video controls="true" autoplay="true"
width="400" height="300">
<source src="u.ogv" />
<source src="u.mp4" />
<source src="u.wmv" />
<p>Faça o <a href="u.mp4">download do
vídeo</a>.</p>
</video>

 Novos tipos
◦ tel
◦ search
◦ email
◦ url
◦ number
◦ range

 Exemplos:
<input name="val" type="number" value="12.4"
step="0.2" min="0" max="20" />
<input name="val" type="range" value="12.4"
step="0.2" min="0" max="20" />

 Exemplos
E-mail: <br />
<input type="email“ name="user_email" />
<br />
Homepage: <br />
<input type="url" name="user_url" />
<br />

Date:
<input type="date" name="user_date" />
<br />
Month:
<input type="month" name="user_date" />
<br />
Week:
<input type="week" name="user_date" />
<br />

Time:
<input type="time" name="user_date" />
<br />
Date and time:
<input type="datetime" name="user_date" />
<br />
<input type="submit" value="Enviar" />

 Placeholder antes:
<input name=“srch" value="Search here"
onfocus=“if(this.value=='Search here')
this.value=‘’”>
 Placeholder com HTML5:
<input name="srch" placeholder="Search here">

 Autofocus:
◦ <input name="login" autofocus >
 Required
◦ <input name="login" required>
 Pattern
◦ nos permite definir expressões regulares de
validação, sem Javascript

 Pattern
<form>
<label for="CEP">CEP:
<input name="CEP" id="CEP" required
pattern="d{5}-?d{3}" />
</label>
<input type="submit" value="Enviar" />
</form>

 section
 nav
 article
 aside
 hgroup
 header
 footer
 time

 subject
 itemprop
 item
 hidden
 draggable
 Contenteditable
◦ Exemplo:
<p>Texto não editável</p>
<p contenteditable="true"> Edite-me... </p>

 CSS é uma linguagem de estilo utilizada para
descrever a apresentação de um documento
escrito em uma linguagem de marcação.
 A função da linguagem de marcação é definir
a estrutura e a semântica. O CSS foi criado
com o objetivo de se separar o conteúdo das
informações de estilo.

 Cascading Style Sheets (Folhas de estilo em
cascata)
 Existem três métodos para utilização do CSS:
Inline
◦ Quando as regras CSS estão declaradas dentro da
tag do elemento XHTML.
<p style=“color:black; margin: 5px;”>
Aqui um parágrafo de cor preta com 5px nas 4
margens.
</p>

Incorporada ou interna
◦ Quando as regras CSS estão declaradas no próprio
documento XHTML, na seção <head> do
documento com a tag de estilo <style>.
<head>
<style type=“text/css”>
body {
background: black;
}
</style>
</head>

Externa
Quando as regras CSS estão declaradas em um
documento a parte do documento XHTML em um
arquivo separado do arquivo html e que tem a
extensão .css
<head>
...
<link rel=“stylesheet” type=“text/css” href=“estilo.css”/>
...
</head>

 Vantagens da sua utilização:
◦ Facilidade de manutenção;
◦ Novas possibilidades de apresentação visual;
◦ Criação de sites “tableless”;
◦ Diminuição do tempo de download;
◦ Permite o controle em sistemas que não exibem
informações em tela;

 Usaremos a folha de estilos externa. Crie um
arquivo com extensão .CSS e o nome estilo.
 A seguir importe a folha de estilos no head
da página HTML:
<head>
...
<link rel=“stylesheet” type=“text/css” href=“estilo.css”/>
...
</head>

 Herança
<html>
<head>
</head>
<body>
<!– Todo o parágrafo será sublinhado -->
<p style=“font-style:italic;”>
Inicio do paragrafo.
<br />
<a href=“outrapagina.html”> Link </a>
<br />
Fim do paragrafo.
</body>
</html>
Esse link também ficará sublinhado

 Rule-Set
◦ É composta por um seletor e um bloco de
declaração
ELEMENTO {
[bloco de declarações]
}
Ex:
p {
font-family: Arial;
}

 Seletores
◦ De tipos de elementos:
 A { font-weight: bold; }
◦ De elementos múltiplos:
 H1, H2, H3 { font-weight: bold; }
◦ Universal:
 * { font-weight: bold; }

◦ De elementos adjacentes:
 H1 + p { font-weight: bold; }
◦ De elementos descendentes:
 TABLE p { font-weight: bold; }
◦ CLASS
 .nomeclass { ... }
◦ ID
 #nomeid { ... }

◦ Atributo
 A[target] { color: blue; }
 img[width=“100”] { color: blue; }
 A[title~=“abc”] { color: blue; }
 A[title|=“sinf”] { color: blue; }

 Crie os seguintes elementos no body da
página HTML:
<h1>Titulo H1</h1>
<h2>Titulo H2</h2>
<h3>Titulo H3</h3>
<p>Parte do par <span>Span do paragraf</span></p>
<p>outro paragrafo</p>
<p class="green">outro paragrafo</p>
<p id="blue">outro paragrafo</p>
<a>Link inativo</a>
<a title="teste abc">Link inativo</a>
<a title="sinform">Link inativo</a>

 Agora teste os seletores:
a{color:red;}
H2,H3{margin-left:50px;}
*{font-style:italic;}
H3 + p { font-weight: bold; }
p span { font-size:25px; }
.green{color:green;}
#blue{color:blue;}
A[title~="abc"] { text-decoration:underline; }
A[title|="sinform"] { text-decoration:blink;}

 Pseudoclasses
◦ :link
 A:link { color: black; }
◦ :visited
 A:visited { color: blue; }
◦ :active
 A:active { color: yellow; }
◦ :hover
 A:hover { color: red; }

 Vamos testar o uso das pseudoclasses
 Primeiro crie um elemento link em body:
<a href="#">Teste Pseudoclasses</a>

 Agora crie o CSS em head:
<style type="text/css">
a { font-weight:bold; }
a:link { color: black; }
a:visited { color: blue; }
a:active { background:green ;}
a:hover { color: red; }
</style>

 Unidades de Medida
◦ Unidades de tamanho relativo:
 % - relativa ao tamanho-padrão ou ao tamanho
herdado de uma medida;
 em – relativo ao tamanho da propriedade font-size de
um elemento;
 px – define o tamanho de um pixel do monitor.
Ex: p { font-size: 13px; }

◦ Unidades de tamanho absoluto:
 cm – define medidas em centímetros;
 in – define medidas em polegadas (2,54 cm);
 pt – define medidas em pontos (1/72 polegadas).
Ex: table { margin-left: 2cm; }

 HTML:
<h1>Titulo H1</h1>
<h2>Titulo H2</h2>
<h3>Titulo H3</h3>
<p>Parte do par</p>
<span>Span do paragraf</span>
<br/>
<a>Link</a>

 CSS
h1 { margin-left:10%; }
h2 { margin-left:10em; }
h3 { margin-left:10px; }
p { margin-left:5cm; }
span { margin-left:5in; }
a { margin-left:5pt; }

 Especificando URLs
◦ URL relativa
 background-image: URL(img1.png);
 background-image: URL(../arquivo.jpg);
◦ URL absoluta
 background-image: URL(http://www.site.com/nw.jpg);

 Especificando cores
◦ #RRGGBB – Cada par possui até 256 combinações
(entre 00 e FF)
Ex: p { color: #FF0000; }
◦ #RGB – Abreviação da notação #RRGGBB
Ex: p { color: #F00; }
◦ rgb(R, G, B) – Cada cor varia entre 0 e 255
Ex: p { color: rgb(255, 0, 0); }

◦ VGA name – Utiliza nomes do padrão VGA com 16
cores
Ex: p { color: red; }

 Font
◦ Seletor { font: [estilo] [variação] [peso]
[tamanho]/[altura] [família] }
Ex: body { font: bold small-caps 12pt/14pt Arial }

 Font
◦ font-family
 serif
 sans-serif
 cursive
 fantasy
 monospace
Ex: body { font-family: “Verdana”, Arial, sans-serif; }

◦ font-size
 p { font-size: 12px; }
◦ font-style
 p { font-style : italic; }
◦ font-variant
 p { font-variant : small-caps; }
◦ font-weight
 p { font-weight : bold; }

 Text
◦ letter-spacing
 p { letter-spacing: 0.4em; }
◦ text-align (left, center, right, justify)
 p { text-align : center; }
◦ text-decoration (none, underline, overline, blink)
 p { text-decoration : blink; }

◦ word-spacing
 p { word-spacing : 0.4em; }
◦ text-transform (capitalize, uppercase, lowercase)
 p { text-transform : uppercase; }

 Background
◦ Seletor { background: [cor-de-fundo] [imagem-de-
fundo] [repetição] [anexo] [posição] }
Ex: body { background: #fff url(img.png) repeat-x
fixed top right}

 Background
◦ background-color
 body { background-color: #000; }
◦ background-image
 body { background-image : url(figura.jpg); }
◦ background-repeat
 body { background-repeat : repeat-x; }

◦ background-attachment
 body { background-attachment : fixed; }
◦ background-position
 body { background-position : 20% 20%; }

Utilizando múltiplas imagens em uma
<html>
<head>
<style type="text/css">
div {
height:48px;
width:48px;
background:url(twitter.png);
}
div:hover {
background-position:100%;
}
</style>
</head> ...

…
<body>
<div></div>
</body>
</html>

 Margin
◦ Seletor { margin: [ valor1[ valor2 [ valor3 [ valor4 ]]]] }
Ex: div { margin: 5px 2px 0px 25px; }

◦ margin-top
 p { margin-top: 2px; }
◦ margin-right
 p { margin-right : 25px; }
◦ margin-bottom
 p { margin-bottom : 3cm; }
◦ margin-left
 p { margin-left : 1em; }

 Padding
◦ Seletor { padding: [ valor1[ valor2 [ valor3 [ valor4 ]]]] }
Ex: div { padding : 5px 2px 0px 25px; }

◦ padding-top
 p { padding-top: 2px; }
◦ padding-right
 p { padding-right : 25px; }
◦ padding-bottom
 p { padding-bottom : 3cm; }
◦ padding-left
 p { padding-left : 1em; }

 Geradores de Conteúdo
◦ Content
 A:before { content: “Teste ”;}
◦ Counter-increment
 H2:before { counter-increment: cont 5;}
◦ Counter-reset
 Body { counter-reset: cont}

 HTML:
<p>teste</p>
<p>teste</p>
<p>teste</p>
<p>teste</p>
<p>teste</p>
<p>teste</p>
<p>teste</p>

 CSS:
body{counter-reset: cont;}
p:before{
counter-increment:cont;
content:counter(cont) " - ";
}

 HTML
<h1>Introdução</h1>
<h2>Programação Web com CSS</h2>
<h1>HTML</h1>
<h2>O que é</h2>
<h2>Sintaxe</h2>
<h1>W3C</h1>
<h2>Qual sua utilidade</h2>
<h1>CSS</h1>
<h2>Utilidade</h2>
<h2>Sintaxe</h2>
<h2>Propriedades</h2>

 CSS
body {counter-reset:secao;}
h1 {counter-reset:subsecao;}
h1:before {
counter-increment:secao;
content:"Seção " counter(secao) ". ";
}
h2:before {
counter-increment:subsecao;
content:counter(secao) "." counter(subsecao) " ";
}

 Tableless
◦ Menu vertical
◦ Menu horizontal
 Botão
 Rollover
 Menu Drop-Down
 Menu com abas
 Hack

 1º Passo
◦ Escolha os containers do layout, ou seja, as divs
principais que serão criadas;
◦ Não se esqueça que as margens entre um container
e outro contam na soma da largura do seu layout.

 2º Passo
◦ Nomeie os containers de acordo com suas
finalidades. No nosso exemplo adotaremos os
seguintes nomes para as DIVs principais do layout:
 geral
 topo
 nav
 menu
 conteudo
 rodape

 3º Passo
◦ Crie as DIVs vazias para representar os containers
<div id=“geral">
<div id=“topo"></div>
<div id=“nav"></div>
<div id="menu"></div>
<div id="conteudo"></div>
<div id=“rodape"></div>
</div>

 Para facilitar a visualização de como os
containers interagem entre si a cada um deles
será definida uma largura e uma altura e
também uma cor de fundo;
 Lembre-se que é importante que você teste
em diversos navegadores cada vez que
termine uma etapa;
 Vamos definir a altura de todas as DIVs
apenas para efeito de visualização.

 A primeira regra CSS a criar é referente ao
body, pois ele é o pai de todas as DIVs:
◦ Primeiro precisamos zerar as propriedades margin
e padding, pois cada navegador tem uma forma de
renderização;
◦ Definimos a propriedade text-aling para centralizar
nosso layout. A propriedade não irá centralizar o
texto, mas sim a DIV geral;
◦ Definimos font e cor padrão;
◦ E neste exemplo definimos uma cor de fundo para
visualizar melhor.

 Nossa regra CSS para o body:
body{
margin: 0;
padding: 0;
font: 12px arial, helvetica, sans-serif;
text-align: center;
color: #505367;
background-color: #D6D6D6;
}

 A próxima DIV a ser posicionada é a DIV
geral, pois ela contém as demais DIVs:
◦ Deve-se estabelecer a largura máxima do seu
layout;
◦ Se seu site dor dinâmica defina a altura como
automática, assim evitando que o conteúdo
ultrapasse os limites do layout.

 Nossa regra CSS para geral:
#geral{
margin: 10px auto;
width: 650px;
height: auto;
text-align: left;
background-color: red;
border: 1px solid black;
}

 6º Passo
◦ Para posicionar o topo, definimos apenas a altura e
a largura:
#topo{
height: 45px;
background-color: fuchsia;
}

 7º Passo
◦ Posicionando o menu de navegação horizontal,
definimos uma altura máxima para tal:
#nav{
height: 25px;
background-color: green;
}

 8º Passo
◦ O alinhamento do menu vertical será feito pela
direita e não inline como as outras divs. Além de
definir altura e largura da mesma:
#menu{
float: right;
width: 180px;
height: 100px;
background-color: yellow;
}

 9º Passo
◦ Para posicionar o conteúdo é preciso definir as
margens direita e esquerda. A margem direita deve
ser maior do que o menu da direita, pois a
DIVconteudo não poderá ultrapassá-lo:
#conteudo{
margin-right: 200px;
margin-left: 20px;
height: 200px;
background-color: aqua;
}

 10º Passo
◦ Para o rodapé utilizaremos a propriedade clear:both
para equalizar qualquer elemento anteriomente
flutuado. Ou seja, ele limpa a flutuação das divs
anteriores para não interferir no posicionamento do
rodapé:
#rodape{
clear: both;
height: 20px;
background-color: lime;
}

 Terminada a etapa de posicionamento,
removeremos a altura definida para as DIVs e
deixaremos como auto (height:auto;).
 A seguir vamos inserir algum texto dentro
dos containers.

 Inserindo conteúdo no topo:
<div id=“topo“>
<h1>Nome do site</h1>
</div>
 Inserindo conteúdo em nav:
<div id=“nav">
<ul>
<li><a href="#">Home</a></li>
<li><a href="#">Serviços</a></li>
<li><a href="#">Produtos</a></li>
<li><a href="#">Contato</a></li>
</ul>
</div>

 Inserindo conteúdo em menu:
<div id="menu">
<h3>Serviços</h3>
<ul>
<li><a href="#">Websites</a></li>
<li><a href="#">Internet</a></li>
<li><a href="#">Intranet</a></li>
<li><a href="#">Extranet</a></li>
</ul>
</div>

 Inserindo conteúdo na DIV conteudo:
<div id=“conteudo”>
<h2>Cabeçalho</h2>
<p>Lorem ipsum dolor sit amet, consectetuer
adipiscing elit, sed diam nonummy nibh euis mod
tincidunt ut laoreet dolore magna al. </p>
<p> Ut wisi enim ad minim veniam, quis nostrud
exerci tation ullamcorper suscipit lobortis nisl ut
aliquip ex ea commodo. </p>
</div>

 Estilizando body e elementos em geral:
h2 {
color: #B52C07;
font: 120% georgia, times, "times new roman", serif;
font-weight: bold;
}
p {
color: #5B5E0E;
font: 106% georgia, times, "times new roman", serif;
}

 Estilizando o topo:
#topo{
height: 45px;
margin-top:-15px;
background-image: url(topo.jpg);
background-repeat: no-repeat;
border-bottom: 1px solid #fff;
position: relative;
color:#fff;
}

 Estilizando o nav (menu horizontal):
#nav{
background-color: #9FA41D;
color: #272900;
padding: 2px 0;
margin-bottom: 22px;
}
#nav li{
display: inline;
padding: 0 10px;
border-right: 1px solid #C4C769;
}

#nav li a{
text-decoration: none;
color: #272900;
}
#nav li a:hover{
text-decoration: none;
color: #fff;
}

 Estilizando o menu (direita):
#menu{
float: right;
width: 165px;
border-left: 1px solid #C5C877;
padding-left: 15px;
}
#menu ul{
margin-right: 10px;
padding-left: 0;
list-style-type: none;
line-height: 165%;
}

 Estilizando o rodape:
#rodape{
clear: both;
color: #272900;
border-top: 1px dashed #9FA41D;
text-align: center;
font-size: 10px;
}

 O efeito de botão é dado ao menu usando as
bordas outset e inset:
#menu li {
border:3px outset #060;
margin-bottom:2px;
}
#menu li:active {
border:3px inset #060;
}

 Ao passar o cursor sobre o menu o
background é alterado.
#menu a{
display:block;
}
#menu li a:hover {
background-color:#006600;
color:#fff;
}

 Criaremos a estrutura do menu através de
uma lista não ordenada, com cada um dos
sub-menus constituídos por outra lista não
ordenada dentro da primeira

<div id="menu">
<ul>
<li><a href="#">Section 1</a></li>
<li><a href="#">Section 3</a>
<ul>
</ul>
</li>
</ul>
</div>

 Estilo:
#nav li ul {
position: absolute;
left: 0px;
top: 15px;
background-color: #9FA41D;
display: none;
}
#nav li ul li a {
margin-left:-40px;
display:block;
}

#nav ul li {
position: relative;
display: inline;
margin:5px;
padding: 0px 2px 0px 2px;
border-right:none;
}
#nav li:hover ul {
display:block;
}

 Nosso menu ficará assim:
 Para isso precisaremos de quatro imagens...

 Duas para a aba em seu estado normal:
 E duas para a aba corrente:

Mas, porque usaremos duas imagens para cada
estado da aba?
O fato é que se aba expandir as imagens
deslizam para os lados preenchendo o novo
vão maior com mais trecho da imagem
direita:

Vamos chamar nossa div de “header”:
<div id="header">
<ul>
<li><a href="#">Home</a></li>
<li id="current"><a href="#">News</a></li>
<li><a href="#">Products</a></li>
<li><a href="#">About</a></li>
<li><a href="#">Contact</a></li>
</ul>
</div>

 Estilo:
#header {
float:left;
width:100%;
font-size:93%;
background:url(Nova%20pasta/bg.gif)
repeat-x bottom;
}

#header ul {
margin:0;
padding:0;
list-style:none;
padding:10px 10px 0;
}
#header li {
float:left;
background:url(Nova%20pasta/norm_left.png)
no-repeat left top;
margin:0;
padding:0 0 0 9px;
}

#header a {
display:block;
background:url(Nova%20pasta/norm_right.png)
no-repeat right top;
padding:5px 15px 4px 6px;
}
#header #current {
background-image:
url(Nova%20pasta/norm_left_on.png);
}

#header #current a {
background-image:
url(Nova%20pasta/norm_right_on.png);
padding-bottom:5px;
}

 Também conhecido como comentário
condicional, a estrutura básica é a mesma
dos comentários HTML:

 Assim, todos os demais navegadores
interpretarão como um comentário normal e
serão ignorados.

 O Internet Explorer, foi projetado para
reconhecer a sintaxe especial
<!--[if IE]>
 Ele processa o if e interpreta o conteúdo do
comentário condicional como se fosse um
conteúdo normal da página.

 Especificado pela W3C (CSS3)
◦ box-shadow:1px 1px 5px #000;
 Implementado pelo Webkit
◦ -webkit-box-shadow:1px 1px 5px #000;
 Implementado pelo Mozilla
◦ -moz-box-shadow:1px 1px 5px #000;

 Especificado pela W3C (CSS3)
◦ border-top-right-radius: 8px;
◦ border-top-left-radius: 8px;
◦ border-bottom-right-radius: 8px;
◦ border-bottom-left-radius: 8px;
 Implementado pelo Webkit
◦ -webkit-border-top-right-radius: 8px;
◦ -webkit-border-top-left-radius: 8px;
◦ -webkit-border-bottom-left-radius: 8px;
◦ -webkit-border-bottom-right-radius: 8px;
 Implementado pelo Mozilla
◦ -moz-border-radius: 8px 8px 8px 8px;

PRONTO,
PODE CONTINUAR SOZINHO...
http://www.maujor.com
Fique atento às novidades, testem os exemplos
dados nos sites que falam sobre o tema,
leiam sobre o assunto e pratiquem, testem
combinações de cores... O que faz a diferença
no final é a criatividade somada ao
conhecimento técnico.

Victor Adriel de J. Oliveira
victorajoliveira@gmail.com
http://blogvictoradriel.blogspot.com.br/
apresentação feita em 2010

Programação Web com HTML e CSS

Recomendados

Mais conteúdo relacionado

Mais procurados (20)

Destaque (20)

Semelhante a Programação Web com HTML e CSS (20)

Mais de Victor Adriel Oliveira (8)

Último (6)

Programação Web com HTML e CSS