Programaowebcomhtmlecss 130711144227 Phpapp02

Victor Adriel de J.
Oliveira
Cincia da Computao UESC
Associao Empresa Jnior de Computao
Programao Web:
[HTML/CSS (tableless), jQuery, PHP, Smarty]
Contato: victorajoliveira@gmail.com
Introduo
W3C
HTML
Introduo
Sintaxe
XHTML
HTML 5
CSS
Sintaxe
Propriedades
Novidades
A funo da linguagem de marcao, nesse

caso o (X)HTML, definir a estrutura e a
semntica. O CSS foi criado com o objetivo de
se separar o contedo das informaes de
estilo.
Nesse curso estudaremos a utilizao do
HTML e do CSS alm das novidades
decorrentes do surgimento do HTML 5 e do
CSS 3.
O Consrcio World Wide Web (W3C) uma

comunidade internacional que desenvolve
padres com o objetivo de garantir o
crescimento da web e responsvel pela
definio das especificaes do CSS.
Motor de renderizao um software que

transforma contedo em linguagem de
marcao e informaes de formatao
(como CSS) em um contedo formatado para
ser exibido na tela.
Gecko Firefox
WebKit Chrome e Safari
Trident Internet Explorer
Presto - Opera
A HTML - HyperText Markup Language

(Linguagem de Marcao de Hipertexto)
uma linguagem de marcao usada para a
construo de pginas na web.
O HTML baseado no conceito de Hipertexto.
Hipertexto so conjuntos de elementos ou
ns ligados por conexes. Estes elementos
podem ser palavras, imagens, vdeos, udio,
documentos etc.
Todo documento HTML apresenta etiquetas,

elementos entre os sinais < e >.
Esses elementos so os comandos de
formatao da linguagem. A maioria das
etiquetas tem sua correspondente de
fechamento:
<etiqueta>...</etiqueta>
As etiquetas servem para definir a formatao

de uma poro do documento, e assim
marcamos onde comea e termina o texto
com a formatao especificada por ela.
Alguns elementos so chamados vazios,
pois no marcam uma regio de texto,
apenas inserem algum elemento no
documento:
<etiqueta>
Uma etiqueta formada por comandos,

atributos e valores:
<img src=../imgs/imagem.png />
comando
atributo
valor
Estrutura bsica:
<!DOCTYPE HTML>
<html>
<head>
<title>Ttulo do Documento</title>
</head>
<body>
texto, imagem, links, ...
</body>
</html>
Copie a estrutura bsica do HTML em um

arquivo de texto e salve com o nome index e
a extenso .html
Essa pgina ser utilizada posteriormente.

<body>
<h1>This
<h2>This
<h3>This
<h4>This
<h5>This
<h6>This
</body>
is
is
is
is
is
is
heading
heading
heading
heading
heading
heading
1</h1>
2</h2>
3</h3>
4</h4>
5</h5>
6</h6>
<b>
- Define o texto como negrito
<big> - Define o texto como grande
<em> - Define o texto como nfase
<i>
- Define o texto como itlico
<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 sees
Uma ncora dentro de um documento HTML:

<a name=topo">Topo da pgina</a>
Crie um link para o Topo da pgina" 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 pgina HTML
<tr> - Linha
<td> - Coluna
<th> - Coluna/Linha Ttulo
<caption> - Ttulo da tabela
<thead> - Cabealho 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>Ms</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 no ordenada
<li> - Define um item de uma tabela
<dl> - Define uma lista de definio
<dt> - Define um item da lista de definio
<dd> - Define a descrio de um item da
lista de descrio
Faa a seguinte lista ordenada:
<ul>
<li>HTML</li>
<li>CSS</li>
<li>JavaScript</li>
</ul>
Depois converta para uma lista no ordenada.
Agora transforme-a em uma lista de

descrio:
HTML
- Linguagem de Marcao
CSS
- Folhas de Estilo em Cascata
JavaScript
- Linguagem de script
No estudaremos o uso de formulrios, isso

dever ser estudado em PHP ou Ruby.
Veremos a construo de um formulrio
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 mtodo

GET para o envio dos dados.
O fluxo de dados separado do endereo
URL atravs de um ponto de interrogao (?).
Esta forma de endereamento e separao
pode ser observada no campo de endereos
do navegador aps o formulrio ter sido
enviado. Voc ver algo como:
(...)index.html?firstname=Furiqueiro&pwd=031286
&sex=male&veiculo=html&veiculo+=css
<frameset rows="25%,75%">
<frame src="frame_a.htm" />
<frame src="frame_b.htm" />
<noframe>
<body>
...
</body>
</noframe>
</frameset>
framespacing
espaamento entre frames (em pixel)
frameborder
existncia de bordas entre frames (boolean)
src
caminho da pgina HTML a ser exibida no frame
noresize
impede redimensionamento do frame
scrolling
habilita barra de rolagem (yes ou no)
uma verso mais rigorosa e limpa do HTML.

Praticamente idntica ao HTML 4.01
O XHTML 1.0 tornou-se uma recomendao
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 minsculo;
E devem conter o elemento raz.
Os nomes dos atributos devem estar em

letras minsculas
Errado:
<table WIDTH="100%">
Certo:
<table width="100%">
Os valores dos atributos devem estar entre

aspas
Errado:
<table WIDTH=100%>
Certo:
<table width="100%">
Abreviao de atributo proibido
Errado:
<input readonly>
<input disabled>
Certo:
<input readonly="readonly" />
<input disabled="disabled" />
O DOCTYPE correto para pginas XHTML:
<!DOCTYPE html PUBLIC

"-//W3C//DTD XHTML 1.0 Transitional//EN
"http://www.w3.org/TR/xhtml1/DTD/xhtml1transitional.dtd">
Enquanto o W3C focava suas atenes para a

criao da segunda verso do XHTML, um
grupo chamado Web Hypertext Application
Technology Working Group (WHATWG)
trabalhava em uma verso do HTML que
trazia mais flexibilidade para a produo 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 so apenas visuais
<frameset>, <frame> e <noframe>

por que ferem os princpios de acessibilidade e
usabilidade:
At agora nunca houve um padro para

reproduo de udio em uma pgina web. O
HTML5 especifica o elemento <audio>
<audio src="mus.oga" controls="true"

autoplay="true" />
Atualmente, existem trs 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>
Oferea um contedo alternativo:
<audio controls="true" autoplay="true">

<source src="mus.oga" />
<source src="mus.mp3" />
<source src="mus.wma" />
<p>Faa o <a href="mus.mp3">download
da msica</a>.</p>
</audio>
O uso de vdeo semelhante ao de udio. O

HTML5 especifica o elemento <video>
<video src="u.ogv" width="400" height="300" />
Atualmente, existem trs formatos

suportados para o elemento de vdeo:
Ogg e o MPEG 4.
Compatibilidade com os navegadores:
Origens alternativas de vdeo:
<video controls="true" autoplay="true"

width="400" height="300">
<source src="u.ogv" />
<source src="u.mp4" />
<source src="u.wmv" />
<p>Faa o <a href="u.mp4">download do
vdeo</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 expresses regulares de
validao, 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 no editvel</p>
<p contenteditable="true"> Edite-me... </p>
CSS uma linguagem de estilo utilizada para

descrever a apresentao de um documento
escrito em uma linguagem de marcao.
A funo da linguagem de marcao definir

a estrutura e a semntica. O CSS foi criado
com o objetivo de se separar o contedo das
informaes de estilo.
Cascading Style Sheets (Folhas de estilo em

cascata)
Existem trs mtodos para utilizao do CSS:
Inline
Quando as regras CSS esto declaradas dentro da
tag do elemento XHTML.
<p style=color:black; margin: 5px;>
Aqui um pargrafo de cor preta com 5px nas 4
margens.
</p>
Incorporada ou interna
Quando as regras CSS esto declaradas no prprio

documento XHTML, na seo <head> do
documento com a tag de estilo <style>.
<head>
<style type=text/css>
body {
background: black;
}
</style>
</head>
Externa
Quando as regras CSS esto declaradas em um

documento a parte do documento XHTML em um
arquivo separado do arquivo html e que tem a
extenso .css
<head>
...
<link rel=stylesheet type=text/css href=estilo.css/>
...
</head>
Vantagens da sua utilizao:
Facilidade de manuteno;
Novas possibilidades de apresentao visual;
Criao de sites tableless;
Diminuio do tempo de download;
Permite o controle em sistemas que no exibem
informaes em tela;
Usaremos a folha de estilos externa. Crie um

arquivo com extenso .CSS e o nome estilo.
A seguir importe a folha de estilos no head
da pgina HTML:
<head>
...
<link rel=stylesheet type=text/css href=estilo.css/>
...
</head>
Herana
<html>
<head>
</head>
<body>
<! Todo o pargrafo ser sublinhado -->
<p style=font-style:italic;>
Inicio do paragrafo.
<br />
<a href=outrapagina.html> Link </a>
<br />
Fim do paragrafo.
Esse link tambm ficar sublinhado
</body>
</html>
Rule-Set
composta por um seletor e um bloco de

declarao
ELEMENTO {
[bloco de declaraes]
}
Ex:
p{
font-family: Arial;
}
Seletores
De tipos de elementos:
A { font-weight: bold; }
De elementos mltiplos:
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

pgina 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-padro 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 centmetros;
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 combinaes
(entre 00 e FF)
Ex: p { color: #FF0000; }
#RGB Abreviao da notao #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 padro VGA com 16

cores
Ex: p { color: red; }
Font
Seletor { font: [estilo] [variao] [peso]
[tamanho]/[altura] [famlia] }
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-defundo] [repetio] [anexo] [posio] }
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 mltiplas 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 Contedo
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>Introduo</h1>
<h2>Programao 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:"Seo " counter(secao) ". ";
}
h2:before {
counter-increment:subsecao;
content:counter(secao) "." counter(subsecao) " ";
}
Tableless
Menu vertical
Menu horizontal
Boto
Rollover
Menu Drop-Down
Menu com abas
Hack
1 Passo
Escolha os containers do layout, ou seja, as divs
principais que sero criadas;
No se esquea 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 visualizao de como os

containers interagem entre si a cada um deles
ser definida uma largura e uma altura e
tambm 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 visualizao.
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
renderizao;
Definimos a propriedade text-aling para centralizar
nosso layout. A propriedade no ir centralizar o
texto, mas sim a DIV geral;
Definimos font e cor padro;
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 prxima DIV a ser posicionada a DIV

geral, pois ela contm as demais DIVs:
Deve-se estabelecer a largura mxima do seu
layout;
Se seu site dor dinmica defina a altura como
automtica, assim evitando que o contedo
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 navegao horizontal,
definimos uma altura mxima para tal:
#nav{
height: 25px;
background-color: green;
}
8 Passo
O alinhamento do menu vertical ser feito pela
direita e no inline como as outras divs. Alm de
definir altura e largura da mesma:
#menu{
float: right;
width: 180px;
height: 100px;
background-color: yellow;
}
9 Passo
Para posicionar o contedo preciso definir as
margens direita e esquerda. A margem direita deve
ser maior do que o menu da direita, pois a
DIVconteudo no 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 flutuao das divs
anteriores para no 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 contedo no topo:

<div id=topo>
<h1>Nome do site</h1>
</div>
Inserindo contedo em nav:

<div id=nav">
<ul>
<li><a href="#">Home</a></li>
<li><a href="#">Servios</a></li>
<li><a href="#">Produtos</a></li>
<li><a href="#">Contato</a></li>
</ul>
</div>
Inserindo contedo em menu:
<div id="menu">
<h3>Servios</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 contedo na DIV conteudo:
<div id=conteudo>
<h2>Cabealho</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>
Inserindo contedo na DIV rodape:

<div id=rodape">
<p>Copyright SINFORM 2010</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 boto 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 atravs de

uma lista no ordenada, com cada um dos
sub-menus constitudos por outra lista no
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
vo 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;
}
Tambm conhecido como comentrio

condicional, a estrutura bsica a mesma
dos comentrios HTML:

Assim, todos os demais navegadores

interpretaro como um comentrio normal e
sero ignorados.
O Internet Explorer, foi projetado para

reconhecer a sintaxe especial






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)
Implementado pelo Webkit
border-top-right-radius: 8px;
border-top-left-radius: 8px;
border-bottom-right-radius: 8px;
border-bottom-left-radius: 8px;
-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
combinaes de cores... O que faz a diferena
no final a criatividade somada ao
conhecimento tcnico.
Victor Adriel de J. Oliveira

victorajoliveira@gmail.com
http://blogvictoradriel.blogspot.com.br/
apresentao feita em 2010

Programaowebcomhtmlecss 130711144227 Phpapp02

Enviado por

Dados do documento

Título original

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

Programaowebcomhtmlecss 130711144227 Phpapp02

Enviado por

Direitos autorais:

Formatos disponíveis

Victor Adriel de J.

A funo da linguagem de marcao, nesse

O Consrcio World Wide Web (W3C) uma

Motor de renderizao um software que

A HTML - HyperText Markup Language

Todo documento HTML apresenta etiquetas,

As etiquetas servem para definir a formatao

Uma etiqueta formada por comandos,

Copie a estrutura bsica do HTML em um

Essa pgina ser utilizada posteriormente.

<a href="url">texto link</a>

Link para sees

Uma ncora dentro de um documento HTML:

Crie um link para o Topo da pgina" dentro

<img src="url" alt=texto sobre a imagem"/>

Coloque uma imagem em sua pgina HTML

<ol> - Define uma lista ordenada

Faa a seguinte lista ordenada:

Depois converta para uma lista no ordenada.

Agora transforme-a em uma lista de

No estudaremos o uso de formulrios, isso

<label>Gostaria de aprender:</label><br />

Note que por default utilizado o mtodo

uma verso mais rigorosa e limpa do HTML.

HTML: Exibir elementos

Elementos XHTML devem estar aninhados;

Os nomes dos atributos devem estar em

Os valores dos atributos devem estar entre

Abreviao de atributo proibido

O DOCTYPE correto para pginas XHTML:

<!DOCTYPE html PUBLIC

Enquanto o W3C focava suas atenes para a

<center>, <font>, <big>, <u> e <s>

<frameset>, <frame> e <noframe>

At agora nunca houve um padro para

<audio src="mus.oga" controls="true"

Atualmente, existem trs formatos

Compatibilidade com os navegadores:

Origens alternativas de udio:

<audio controls="true" autoplay="true">

Oferea um contedo alternativo:

<audio controls="true" autoplay="true">

O uso de vdeo semelhante ao de udio. O

<video src="u.ogv" width="400" height="300" />

Atualmente, existem trs formatos

Compatibilidade com os navegadores:

Origens alternativas de vdeo:

<video controls="true" autoplay="true"

<input name="val" type="number" value="12.4"

E-mail: <br />

<input type="submit" value="Enviar" />

Placeholder com HTML5:

CSS uma linguagem de estilo utilizada para

A funo da linguagem de marcao definir

Cascading Style Sheets (Folhas de estilo em

Quando as regras CSS esto declaradas no prprio

Quando as regras CSS esto declaradas em um

Vantagens da sua utilizao:

Usaremos a folha de estilos externa. Crie um

composta por um seletor e um bloco de

A[title~=abc] { color: blue; }

Crie os seguintes elementos no body da

Agora teste os seletores: