 Victor Adriel de J. Oliveira
 Ciência da Computação – UESC
 Associação Empresa Júnior de Computação
 Programação Web:...
 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 obj...
 O Consórcio World Wide Web (W3C) é uma
comunidade internacional que desenvolve
padrões com o objetivo de garantir o
cres...
 Motor de renderização é um software que
transforma conteúdo em linguagem de
marcação e informações de formatação
(como C...
 A HTML - HyperText Markup Language
(Linguagem de Marcação de Hipertexto) é
uma linguagem de marcação usada para a
constr...
 Todo documento HTML apresenta etiquetas,
elementos entre os sinais ‘<‘ e ‘>’.
Esses elementos são os comandos de
formata...
 As etiquetas servem para definir a formatação
de uma porção do documento, e assim
marcamos onde começa e termina o texto...
 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, ...
 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á u...
…
<body>
<h1>This is heading 1</h1>
<h2>This is heading 2</h2>
<h3>This is heading 3</h3>
<h4>This is heading 4</h4>
<h5>T...
 <b> - Define o texto como negrito
 <big> - Define o texto como “grande”
 <em> - Define o texto como “ênfase”
 <i> - D...
…
<body>
<p><b>Texto - bold</b></p>
<p><strong>Texto - strong</strong></p>
<p><big>Texto - big</big></p>
<p><i>Texto - ita...
 <a href="url">texto link</a>
 Especificando URLs
◦ URL relativa
 background-image: URL(img1.png);
 background-image: ...
 Link para seções
 Uma âncora dentro de um documento HTML:
◦ <a name=“topo">Topo da página</a>
 Crie um link para o “To...
 <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...
<table border="1">
<tfoot>
<tr><td>Soma</td><td>R$160</td></tr>
</tfoot>
<thead>
<tr><th>Mês</th><th>Quantia</th></tr>
</t...
 Rowspan
 Colspan
 <ol> - Define uma lista ordenada
 <ul> - Define uma lista não ordenada
 <li> - Define um item de uma tabela
 <dl> - D...
 Faça a seguinte lista ordenada:
<ul>
<li>HTML</li>
<li>CSS</li>
<li>JavaScript</li>
</ul>
 Depois converta para uma lis...
 Agora transforme-a em uma lista de
descrição:
HTML
- Linguagem de Marcação
CSS
- Folhas de Estilo em Cascata
JavaScript
...
 Não estudaremos o uso de formulários, isso
deverá ser estudado em PHP ou Ruby.
 Veremos a construção de um formulário
s...
<form>
<label>Nome:</label><br />
<input type="text" name="firstname"/><br />
<label>Password:</label> <br />
<input type=...
<label>Gostaria de aprender:</label><br />
<input type="checkbox" name="learn "
value="html" /> HTML
<br />
<input type="c...
 Note que por default é utilizado o método
GET para o envio dos dados.
 O fluxo de dados é separado do endereço
URL atra...
<frameset rows="25%,75%">
<frame src="frame_a.htm" />
<frame src="frame_b.htm" />
<noframe>
<body>
...
</body>
</noframe>
...
 framespacing
◦ espaçamento entre frames (em pixel)
 frameborder
◦ existência de bordas entre frames (boolean)
 src
◦ c...
 É 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
...
HTML: Exibir elementos
XHTML: Descrever elementos
 Elementos XHTML devem estar aninhados;
 Todos os elementos devem ser ...
 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" ...
 O DOCTYPE correto para páginas XHTML:
<!DOCTYPE html PUBLIC
"-//W3C//DTD XHTML 1.0 Transitional//EN“
"http://www.w3.org/...
 Enquanto o W3C focava suas atenções para a
criação da segunda versão do XHTML, um
grupo chamado Web Hypertext Applicatio...
<!DOCTYPE HTML>
<html lang="pt-br">
<head>
<meta charset="UTF-8">
<link rel="stylesheet" type="text/css" href="estilo.css"...
 <center>, <font>, <big>, <u> e <s>
por que seus efeitos são apenas visuais
 <frameset>, <frame> e <noframe>
por que fer...
 Até agora nunca houve um padrão para
reprodução de áudio em uma página web. O
HTML5 especifica o elemento <audio>
<audio...
 Atualmente, existem três formatos
suportados para o elemento de áudio:
 Ogg Vorbis, MP3 e WAV.
 Compatibilidade com os...
 Origens alternativas de áudio:
<audio controls="true" autoplay="true">
<source src="mus.oga" />
<source src="mus.mp3" />...
 Ofereça um conteúdo alternativo:
<audio controls="true" autoplay="true">
<source src="mus.oga" />
<source src="mus.mp3" ...
 O uso de vídeo é semelhante ao de áudio. O
HTML5 especifica o elemento <video>
<video src="u.ogv" width="400" height="30...
 Atualmente, existem três formatos
suportados para o elemento de vídeo:
 Ogg e o MPEG 4.
 Compatibilidade com os navega...
 Origens alternativas de vídeo:
<video controls="true" autoplay="true"
width="400" height="300">
<source src="u.ogv" />
<...
 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" val...
 Exemplos
E-mail: <br />
<input type="email“ name="user_email" />
<br />
Homepage: <br />
<input type="url" name="user_ur...
Date:
<input type="date" name="user_date" />
<br />
Month:
<input type="month" name="user_date" />
<br />
Week:
<input typ...
Time:
<input type="time" name="user_date" />
<br />
Date and time:
<input type="datetime" name="user_date" />
<br />
<inpu...
 Placeholder antes:
<input name=“srch" value="Search here"
onfocus=“if(this.value=='Search here')
this.value=‘’”>
 Place...
 Autofocus:
◦ <input name="login" autofocus >
 Required
◦ <input name="login" required>
 Pattern
◦ nos permite definir ...
 Pattern
<form>
<label for="CEP">CEP:
<input name="CEP" id="CEP" required
pattern="d{5}-?d{3}" />
</label>
<input type="s...
 section
 nav
 article
 aside
 hgroup
 header
 footer
 time
 subject
 itemprop
 item
 hidden
 draggable
 Contenteditable
◦ Exemplo:
<p>Texto não editável</p>
<p contenteditable...
 CSS é uma linguagem de estilo utilizada para
descrever a apresentação de um documento
escrito em uma linguagem de marcaç...
 Cascading Style Sheets (Folhas de estilo em
cascata)
 Existem três métodos para utilização do CSS:
Inline
◦ Quando as r...
Incorporada ou interna
◦ Quando as regras CSS estão declaradas no próprio
documento XHTML, na seção <head> do
documento co...
Externa
Quando as regras CSS estão declaradas em um
documento a parte do documento XHTML em um
arquivo separado do arquivo...
 Vantagens da sua utilização:
◦ Facilidade de manutenção;
◦ Novas possibilidades de apresentação visual;
◦ Criação de sit...
 Usaremos a folha de estilos externa. Crie um
arquivo com extensão .CSS e o nome estilo.
 A seguir importe a folha de es...
 Herança
<html>
<head>
</head>
<body>
<!– Todo o parágrafo será sublinhado -->
<p style=“font-style:italic;”>
Inicio do p...
 Rule-Set
◦ É composta por um seletor e um bloco de
declaração
ELEMENTO {
[bloco de declarações]
}
Ex:
p {
font-family: A...
 Seletores
◦ De tipos de elementos:
 A { font-weight: bold; }
◦ De elementos múltiplos:
 H1, H2, H3 { font-weight: bold...
◦ De elementos adjacentes:
 H1 + p { font-weight: bold; }
◦ De elementos descendentes:
 TABLE p { font-weight: bold; }
◦...
◦ Atributo
 A[target] { color: blue; }
 img[width=“100”] { color: blue; }
 A[title~=“abc”] { color: blue; }
 A[title|=...
 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...
 Agora teste os seletores:
a{color:red;}
H2,H3{margin-left:50px;}
*{font-style:italic;}
H3 + p { font-weight: bold; }
p s...
 Pseudoclasses
◦ :link
 A:link { color: black; }
◦ :visited
 A:visited { color: blue; }
◦ :active
 A:active { color: y...
 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: bl...
 Unidades de Medida
◦ Unidades de tamanho relativo:
 % - relativa ao tamanho-padrão ou ao tamanho
herdado de uma medida;...
◦ Unidades de tamanho absoluto:
 cm – define medidas em centímetros;
 in – define medidas em polegadas (2,54 cm);
 pt –...
 HTML:
<h1>Titulo H1</h1>
<h2>Titulo H2</h2>
<h3>Titulo H3</h3>
<p>Parte do par</p>
<span>Span do paragraf</span>
<br/>
<...
 CSS
h1 { margin-left:10%; }
h2 { margin-left:10em; }
h3 { margin-left:10px; }
p { margin-left:5cm; }
span { margin-left:...
 Especificando URLs
◦ URL relativa
 background-image: URL(img1.png);
 background-image: URL(../arquivo.jpg);
◦ URL abso...
 Especificando cores
◦ #RRGGBB – Cada par possui até 256 combinações
(entre 00 e FF)
Ex: p { color: #FF0000; }
◦ #RGB – A...
◦ 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/1...
 Font
◦ font-family
 serif
 sans-serif
 cursive
 fantasy
 monospace
Ex: body { font-family: “Verdana”, Arial, sans-s...
◦ font-size
 p { font-size: 12px; }
◦ font-style
 p { font-style : italic; }
◦ font-variant
 p { font-variant : small-c...
 Text
◦ letter-spacing
 p { letter-spacing: 0.4em; }
◦ text-align (left, center, right, justify)
 p { text-align : cent...
◦ word-spacing
 p { word-spacing : 0.4em; }
◦ text-transform (capitalize, uppercase, lowercase)
 p { text-transform : up...
 Background
◦ Seletor { background: [cor-de-fundo] [imagem-de-
fundo] [repetição] [anexo] [posição] }
Ex: body { backgrou...
 Background
◦ background-color
 body { background-color: #000; }
◦ background-image
 body { background-image : url(figu...
◦ background-attachment
 body { background-attachment : fixed; }
◦ background-position
 body { background-position : 20%...
Utilizando múltiplas imagens em uma
<html>
<head>
<style type="text/css">
div {
height:48px;
width:48px;
background:url(tw...
…
<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 : 3c...
 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-botto...
 Geradores de Conteúdo
◦ Content
 A:before { content: “Teste ”;}
◦ Counter-increment
 H2:before { counter-increment: co...
 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>
<...
 CSS
body {counter-reset:secao;}
h1 {counter-reset:subsecao;}
h1:before {
counter-increment:secao;
content:"Seção " count...
 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 marge...
 2º Passo
◦ Nomeie os containers de acordo com suas
finalidades. No nosso exemplo adotaremos os
seguintes nomes para as D...
 3º Passo
◦ Crie as DIVs vazias para representar os containers
<div id=“geral">
<div id=“topo"></div>
<div id=“nav"></div...
 Para facilitar a visualização de como os
containers interagem entre si a cada um deles
será definida uma largura e uma a...
 A primeira regra CSS a criar é referente ao
body, pois ele é o pai de todas as DIVs:
◦ Primeiro precisamos zerar as prop...
 Nossa regra CSS para o body:
body{
margin: 0;
padding: 0;
font: 12px arial, helvetica, sans-serif;
text-align: center;
c...
 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...
 Nossa regra CSS para geral:
#geral{
margin: 10px auto;
width: 650px;
height: auto;
text-align: left;
background-color: r...
 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;
backgr...
 8º Passo
◦ O alinhamento do menu vertical será feito pela
direita e não inline como as outras divs. Além de
definir altu...
 9º Passo
◦ Para posicionar o conteúdo é preciso definir as
margens direita e esquerda. A margem direita deve
ser maior d...
 10º Passo
◦ Para o rodapé utilizaremos a propriedade clear:both
para equalizar qualquer elemento anteriomente
flutuado. ...
◦ Ficará assim:
 Terminada a etapa de posicionamento,
removeremos a altura definida para as DIVs e
deixaremos como auto (height:auto;).
...
 Inserindo conteúdo no topo:
<div id=“topo“>
<h1>Nome do site</h1>
</div>
 Inserindo conteúdo em nav:
<div id=“nav">
<ul...
 Inserindo conteúdo em menu:
<div id="menu">
<h3>Serviços</h3>
<ul>
<li><a href="#">Websites</a></li>
<li><a href="#">Int...
 Inserindo conteúdo na DIV conteudo:
<div id=“conteudo”>
<h2>Cabeçalho</h2>
<p>Lorem ipsum dolor sit amet, consectetuer
a...
 Inserindo conteúdo 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-we...
 Estilizando o topo:
#topo{
height: 45px;
margin-top:-15px;
background-image: url(topo.jpg);
background-repeat: no-repeat...
 Estilizando o nav (menu horizontal):
#nav{
background-color: #9FA41D;
color: #272900;
padding: 2px 0;
margin-bottom: 22p...
#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;
}
#...
 Estilizando o rodape:
#rodape{
clear: both;
color: #272900;
border-top: 1px dashed #9FA41D;
text-align: center;
font-siz...
 O efeito de botão é dado ao menu usando as
bordas outset e inset:
#menu li {
border:3px outset #060;
margin-bottom:2px;
...
 Ao passar o cursor sobre o menu o
background é alterado.
#menu a{
display:block;
}
#menu li a:hover {
background-color:#...
 Criaremos a estrutura do menu através de
uma lista não ordenada, com cada um dos
sub-menus constituídos por outra lista ...
<div id="menu">
<ul>
<li><a href="#">Section 1</a></li>
<li><a href="#">Section 2</a></li>
<li><a href="#">Section 3</a>
<...
 Estilo:
#nav li ul {
position: absolute;
left: 0px;
top: 15px;
background-color: #9FA41D;
display: none;
}
#nav li ul li...
#nav ul li {
position: relative;
display: inline;
margin:5px;
padding: 0px 2px 0px 2px;
border-right:none;
}
#nav li:hover...
 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 ...
Vamos chamar nossa div de “header”:
<div id="header">
<ul>
<li><a href="#">Home</a></li>
<li id="current"><a href="#">News...
 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%20p...
#header a {
display:block;
background:url(Nova%20pasta/norm_right.png)
no-repeat right top;
padding:5px 15px 4px 6px;
}
#h...
#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...
 O Internet Explorer, foi projetado para
reconhecer a sintaxe especial
<!--[if IE]>
 Ele processa o if e interpreta o co...
<!--[if IE]> De acordo com o comentário
condicional este
é o Internet Explorer<br> <![endif]-->
<!--[if IE 5]> De acordo c...
<!--[if IE 5.5]> De acordo com o comentário
condicional este é o Internet Explorer 5.5<br>
<![endif]-->
<!--[if gte IE 5]>...
 Especificado pela W3C (CSS3)
◦ box-shadow:1px 1px 5px #000;
 Implementado pelo Webkit
◦ -webkit-box-shadow:1px 1px 5px ...
 Especificado pela W3C (CSS3)
◦ border-top-right-radius: 8px;
◦ border-top-left-radius: 8px;
◦ border-bottom-right-radius...
PRONTO,
PODE CONTINUAR SOZINHO...
http://www.maujor.com
Fique atento às novidades, testem os exemplos
dados nos sites que ...
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
Programação Web com HTML e CSS
Programação Web com HTML e CSS
Programação Web com HTML e CSS
Upcoming SlideShare
Loading in...5
×

Programação Web com HTML e CSS

3,978

Published on

Oficina realizada em 2011. Apresenta as linguagens HTML/XHTML/HTML5 e CSS/CSS3. Contém vários exercícios práticos e demos além de referências úteis.

Published in: Technology
2 Comments
8 Likes
Statistics
Notes
No Downloads
Views
Total Views
3,978
On Slideshare
0
From Embeds
0
Number of Embeds
0
Actions
Shares
0
Downloads
313
Comments
2
Likes
8
Embeds 0
No embeds

No notes for slide

Programação Web com HTML e CSS

  1. 1.  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
  2. 2.  Introdução  W3C  HTML ◦ Introdução ◦ Sintaxe ◦ XHTML ◦ HTML 5  CSS ◦ Sintaxe ◦ Propriedades ◦ Novidades
  3. 3.  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.
  4. 4.  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.
  5. 5.  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
  6. 6.  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.
  7. 7.  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>
  8. 8.  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>
  9. 9.  Uma etiqueta é formada por comandos, atributos e valores: <img src=“../imgs/imagem.png” /> atributocomando valor
  10. 10.  Estrutura básica: <!DOCTYPE HTML> <html> <head> <title>Título do Documento</title> </head> <body> texto, imagem, links, ... </body> </html>
  11. 11.  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.
  12. 12. … <body> <h1>This is heading 1</h1> <h2>This is heading 2</h2> <h3>This is heading 3</h3> <h4>This is heading 4</h4> <h5>This is heading 5</h5> <h6>This is heading 6</h6> </body>
  13. 13.  <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
  14. 14. … <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>
  15. 15.  <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);
  16. 16.  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>
  17. 17.  <img src="url" alt=“texto sobre a imagem"/>  Coloque uma imagem em sua página HTML
  18. 18.  <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
  19. 19. <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>
  20. 20.  Rowspan  Colspan
  21. 21.  <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
  22. 22.  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.
  23. 23.  Agora transforme-a em uma lista de descrição: HTML - Linguagem de Marcação CSS - Folhas de Estilo em Cascata JavaScript - Linguagem de script
  24. 24.  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.
  25. 25. <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 />
  26. 26. <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>
  27. 27.  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
  28. 28. <frameset rows="25%,75%"> <frame src="frame_a.htm" /> <frame src="frame_b.htm" /> <noframe> <body> ... </body> </noframe> </frameset>
  29. 29.  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)
  30. 30.  É 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.
  31. 31. 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.
  32. 32.  Os nomes dos atributos devem estar em letras minúsculas  Errado: ◦ <table WIDTH="100%">  Certo: ◦ <table width="100%">
  33. 33.  Os valores dos atributos devem estar entre aspas  Errado: ◦ <table WIDTH=100%>  Certo: ◦ <table width="100%">
  34. 34.  Abreviação de atributo é proibido  Errado: ◦ <input readonly> ◦ <input disabled>  Certo: ◦ <input readonly="readonly" /> ◦ <input disabled="disabled" />
  35. 35.  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">
  36. 36.  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.
  37. 37. <!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>
  38. 38.  <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:
  39. 39.  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" />
  40. 40.  Atualmente, existem três formatos suportados para o elemento de áudio:  Ogg Vorbis, MP3 e WAV.  Compatibilidade com os navegadores:
  41. 41.  Origens alternativas de áudio: <audio controls="true" autoplay="true"> <source src="mus.oga" /> <source src="mus.mp3" /> <source src="mus.wma" /> </audio>
  42. 42.  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>
  43. 43.  O uso de vídeo é semelhante ao de áudio. O HTML5 especifica o elemento <video> <video src="u.ogv" width="400" height="300" />
  44. 44.  Atualmente, existem três formatos suportados para o elemento de vídeo:  Ogg e o MPEG 4.  Compatibilidade com os navegadores:
  45. 45.  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>
  46. 46.  Novos tipos ◦ tel ◦ search ◦ email ◦ url ◦ number ◦ range
  47. 47.  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" />
  48. 48.  Exemplos E-mail: <br /> <input type="email“ name="user_email" /> <br /> Homepage: <br /> <input type="url" name="user_url" /> <br />
  49. 49. Date: <input type="date" name="user_date" /> <br /> Month: <input type="month" name="user_date" /> <br /> Week: <input type="week" name="user_date" /> <br />
  50. 50. Time: <input type="time" name="user_date" /> <br /> Date and time: <input type="datetime" name="user_date" /> <br /> <input type="submit" value="Enviar" />
  51. 51.  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">
  52. 52.  Autofocus: ◦ <input name="login" autofocus >  Required ◦ <input name="login" required>  Pattern ◦ nos permite definir expressões regulares de validação, sem Javascript
  53. 53.  Pattern <form> <label for="CEP">CEP: <input name="CEP" id="CEP" required pattern="d{5}-?d{3}" /> </label> <input type="submit" value="Enviar" /> </form>
  54. 54.  section  nav  article  aside  hgroup  header  footer  time
  55. 55.  subject  itemprop  item  hidden  draggable  Contenteditable ◦ Exemplo: <p>Texto não editável</p> <p contenteditable="true"> Edite-me... </p>
  56. 56.  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.
  57. 57.  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>
  58. 58. 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>
  59. 59. 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>
  60. 60.  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;
  61. 61.  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>
  62. 62.  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
  63. 63.  Rule-Set ◦ É composta por um seletor e um bloco de declaração ELEMENTO { [bloco de declarações] } Ex: p { font-family: Arial; }
  64. 64.  Seletores ◦ De tipos de elementos:  A { font-weight: bold; } ◦ De elementos múltiplos:  H1, H2, H3 { font-weight: bold; } ◦ Universal:  * { font-weight: bold; }
  65. 65. ◦ De elementos adjacentes:  H1 + p { font-weight: bold; } ◦ De elementos descendentes:  TABLE p { font-weight: bold; } ◦ CLASS  .nomeclass { ... } ◦ ID  #nomeid { ... }
  66. 66. ◦ Atributo  A[target] { color: blue; }  img[width=“100”] { color: blue; }  A[title~=“abc”] { color: blue; }  A[title|=“sinf”] { color: blue; }
  67. 67.  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>
  68. 68.  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;}
  69. 69.  Pseudoclasses ◦ :link  A:link { color: black; } ◦ :visited  A:visited { color: blue; } ◦ :active  A:active { color: yellow; } ◦ :hover  A:hover { color: red; }
  70. 70.  Vamos testar o uso das pseudoclasses  Primeiro crie um elemento link em body: <a href="#">Teste Pseudoclasses</a>
  71. 71.  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>
  72. 72.  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; }
  73. 73. ◦ 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; }
  74. 74.  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>
  75. 75.  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; }
  76. 76.  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);
  77. 77.  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); }
  78. 78. ◦ VGA name – Utiliza nomes do padrão VGA com 16 cores Ex: p { color: red; }
  79. 79.  Font ◦ Seletor { font: [estilo] [variação] [peso] [tamanho]/[altura] [família] } Ex: body { font: bold small-caps 12pt/14pt Arial }
  80. 80.  Font ◦ font-family  serif  sans-serif  cursive  fantasy  monospace Ex: body { font-family: “Verdana”, Arial, sans-serif; }
  81. 81. ◦ 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; }
  82. 82.  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; }
  83. 83. ◦ word-spacing  p { word-spacing : 0.4em; } ◦ text-transform (capitalize, uppercase, lowercase)  p { text-transform : uppercase; }
  84. 84.  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}
  85. 85.  Background ◦ background-color  body { background-color: #000; } ◦ background-image  body { background-image : url(figura.jpg); } ◦ background-repeat  body { background-repeat : repeat-x; }
  86. 86. ◦ background-attachment  body { background-attachment : fixed; } ◦ background-position  body { background-position : 20% 20%; }
  87. 87. 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> ...
  88. 88. … <body> <div></div> </body> </html>
  89. 89.  Margin ◦ Seletor { margin: [ valor1[ valor2 [ valor3 [ valor4 ]]]] } Ex: div { margin: 5px 2px 0px 25px; }
  90. 90. ◦ margin-top  p { margin-top: 2px; } ◦ margin-right  p { margin-right : 25px; } ◦ margin-bottom  p { margin-bottom : 3cm; } ◦ margin-left  p { margin-left : 1em; }
  91. 91.  Padding ◦ Seletor { padding: [ valor1[ valor2 [ valor3 [ valor4 ]]]] } Ex: div { padding : 5px 2px 0px 25px; }
  92. 92. ◦ padding-top  p { padding-top: 2px; } ◦ padding-right  p { padding-right : 25px; } ◦ padding-bottom  p { padding-bottom : 3cm; } ◦ padding-left  p { padding-left : 1em; }
  93. 93.  Geradores de Conteúdo ◦ Content  A:before { content: “Teste ”;} ◦ Counter-increment  H2:before { counter-increment: cont 5;} ◦ Counter-reset  Body { counter-reset: cont}
  94. 94.  HTML: <p>teste</p> <p>teste</p> <p>teste</p> <p>teste</p> <p>teste</p> <p>teste</p> <p>teste</p>
  95. 95.  CSS: body{counter-reset: cont;} p:before{ counter-increment:cont; content:counter(cont) " - "; }
  96. 96.  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>
  97. 97.  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) " "; }
  98. 98.  Tableless ◦ Menu vertical ◦ Menu horizontal  Botão  Rollover  Menu Drop-Down  Menu com abas  Hack
  99. 99.  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.
  100. 100.  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
  101. 101.  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>
  102. 102.  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.
  103. 103.  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.
  104. 104.  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; }
  105. 105.  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.
  106. 106.  Nossa regra CSS para geral: #geral{ margin: 10px auto; width: 650px; height: auto; text-align: left; background-color: red; border: 1px solid black; }
  107. 107.  6º Passo ◦ Para posicionar o topo, definimos apenas a altura e a largura: #topo{ height: 45px; background-color: fuchsia; }
  108. 108.  7º Passo ◦ Posicionando o menu de navegação horizontal, definimos uma altura máxima para tal: #nav{ height: 25px; background-color: green; }
  109. 109.  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; }
  110. 110.  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; }
  111. 111.  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; }
  112. 112. ◦ Ficará assim:
  113. 113.  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.
  114. 114.  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>
  115. 115.  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>
  116. 116.  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>
  117. 117.  Inserindo conteúdo na DIV rodape: <div id=“rodape"> <p>Copyright © SINFORM 2010</p> </div>
  118. 118.  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; }
  119. 119.  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; }
  120. 120.  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; }
  121. 121. #nav li a{ text-decoration: none; color: #272900; } #nav li a:hover{ text-decoration: none; color: #fff; }
  122. 122.  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%; }
  123. 123.  Estilizando o rodape: #rodape{ clear: both; color: #272900; border-top: 1px dashed #9FA41D; text-align: center; font-size: 10px; }
  124. 124.  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; }
  125. 125.  Ao passar o cursor sobre o menu o background é alterado. #menu a{ display:block; } #menu li a:hover { background-color:#006600; color:#fff; }
  126. 126.  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
  127. 127. <div id="menu"> <ul> <li><a href="#">Section 1</a></li> <li><a href="#">Section 2</a></li> <li><a href="#">Section 3</a> <ul> <li><a href="#">Section 1</a></li> <li><a href="#">Section 2</a></li> </ul> </li> <li><a href="#">Section 4</a></li> </ul> </div>
  128. 128.  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; }
  129. 129. #nav ul li { position: relative; display: inline; margin:5px; padding: 0px 2px 0px 2px; border-right:none; } #nav li:hover ul { display:block; }
  130. 130.  Nosso menu ficará assim:  Para isso precisaremos de quatro imagens...
  131. 131.  Duas para a aba em seu estado normal:  E duas para a aba corrente:
  132. 132. 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:
  133. 133. 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>
  134. 134.  Estilo: #header { float:left; width:100%; font-size:93%; background:url(Nova%20pasta/bg.gif) repeat-x bottom; }
  135. 135. #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; }
  136. 136. #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); }
  137. 137. #header #current a { background-image: url(Nova%20pasta/norm_right_on.png); padding-bottom:5px; }
  138. 138.  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.
  139. 139.  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.
  140. 140. <!--[if IE]> De acordo com o comentário condicional este é o Internet Explorer<br> <![endif]--> <!--[if IE 5]> De acordo com o comentário condicional este é o Explorer 5<br> <![endif]--> <!--[if IE 5.0]> De acordo com o comentário condicional este é o Internet Explorer 5.0<br> <![endif]-->
  141. 141. <!--[if IE 5.5]> De acordo com o comentário condicional este é o Internet Explorer 5.5<br> <![endif]--> <!--[if gte IE 5]> De acordo com o comentário condicional este é o Internet Explorer 5 ou maior<br> <![endif]--> <!--[if lt IE 6]> De acordo com o comentário condicional este é o Internet Explorer versão menor que 6<br> <![endif]-->
  142. 142.  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;
  143. 143.  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;
  144. 144. 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.
  145. 145. Victor Adriel de J. Oliveira victorajoliveira@gmail.com http://blogvictoradriel.blogspot.com.br/ apresentação feita em 2010
  1. A particular slide catching your eye?

    Clipping is a handy way to collect important slides you want to go back to later.

×