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: [email protected]

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>

Rowspan

Colspan

<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" requiredpattern="\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>

ExternaQuando 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>

CSSbody {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;

}

◦ Ficará assim:

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

[email protected]

http://blogvictoradriel.blogspot.com.br/

apresentação feita em 2010

Programação Web com HTML e CSS

Technology

Transcript of Programação Web com HTML e CSS