SlideShare uma empresa Scribd logo
 Victor Adriel de J. Oliveira
 Ciência da Computação – UESC
 Associação Empresa Júnior de Computação
 Programação Web:
[HTML/CSS (tableless), jQuery, PHP, Smarty]
 Contato: victorajoliveira@gmail.com
 Introdução
 W3C
 HTML
◦ Introdução
◦ Sintaxe
◦ XHTML
◦ HTML 5
 CSS
◦ Sintaxe
◦ Propriedades
◦ Novidades
 A função da linguagem de marcação, nesse
caso o (X)HTML, é definir a estrutura e a
semântica. O CSS foi criado com o objetivo de
se separar o conteúdo das informações de
estilo.
 Nesse curso estudaremos a utilização do
HTML e do CSS além das novidades
decorrentes do surgimento do HTML 5 e do
CSS 3.
 O Consórcio World Wide Web (W3C) é uma
comunidade internacional que desenvolve
padrões com o objetivo de garantir o
crescimento da web e é responsável pela
definição das especificações do CSS.
 Motor de renderização é um software que
transforma conteúdo em linguagem de
marcação e informações de formatação
(como CSS) em um conteúdo formatado para
ser exibido na tela.
 Gecko – Firefox
 WebKit – Chrome e Safari
 Trident – Internet Explorer
 Presto - Opera
 A HTML - HyperText Markup Language
(Linguagem de Marcação de Hipertexto) é
uma linguagem de marcação usada para a
construção de páginas na web.
 O HTML é baseado no conceito de Hipertexto.
Hipertexto são conjuntos de elementos – ou
nós – ligados por conexões. Estes elementos
podem ser palavras, imagens, vídeos, áudio,
documentos etc.
 Todo documento HTML apresenta etiquetas,
elementos entre os sinais ‘<‘ e ‘>’.
Esses elementos são os comandos de
formatação da linguagem. A maioria das
etiquetas tem sua correspondente de
fechamento:
<etiqueta>...</etiqueta>
 As etiquetas servem para definir a formatação
de uma porção do documento, e assim
marcamos onde começa e termina o texto
com a formatação especificada por ela.
Alguns elementos são chamados “vazios”,
pois não marcam uma região de texto,
apenas inserem algum elemento no
documento:
<etiqueta>
 Uma etiqueta é formada por comandos,
atributos e valores:
<img src=“../imgs/imagem.png” />
atributocomando valor
 Estrutura básica:
<!DOCTYPE HTML>
<html>
<head>
<title>Título do Documento</title>
</head>
<body>
texto, imagem, links, ...
</body>
</html>
 Copie a estrutura básica do HTML em um
arquivo de texto e salve com o nome index e
a extensão .html
 Essa página será utilizada posteriormente.
…
<body>
<h1>This is heading 1</h1>
<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>
 <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
<frameset rows="25%,75%">
<frame src="frame_a.htm" />
<frame src="frame_b.htm" />
<noframe>
<body>
...
</body>
</noframe>
</frameset>
 framespacing
◦ espaçamento entre frames (em pixel)
 frameborder
◦ existência de bordas entre frames (boolean)
 src
◦ caminho da página HTML a ser exibida no frame
 noresize
◦ impede redimensionamento do frame
 scrolling
◦ habilita barra de rolagem (yes ou no)
 É uma versão mais rigorosa e limpa do HTML.
Praticamente idêntica ao HTML 4.01
 O XHTML 1.0 tornou-se uma recomendação
da W3C desde 26 de janeiro de 2000.
HTML: Exibir elementos
XHTML: Descrever elementos
 Elementos XHTML devem estar aninhados;
 Todos os elementos devem ser fechados;
 Devem ser escritos em minúsculo;
 E devem conter o elemento raíz.
 Os nomes dos atributos devem estar em
letras minúsculas
 Errado:
◦ <table WIDTH="100%">
 Certo:
◦ <table width="100%">
 Os valores dos atributos devem estar entre
aspas
 Errado:
◦ <table WIDTH=100%>
 Certo:
◦ <table width="100%">
 Abreviação de atributo é proibido
 Errado:
◦ <input readonly>
◦ <input disabled>
 Certo:
◦ <input readonly="readonly" />
◦ <input disabled="disabled" />
 O DOCTYPE correto para páginas XHTML:
<!DOCTYPE html PUBLIC
"-//W3C//DTD XHTML 1.0 Transitional//EN“
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-
transitional.dtd">
 Enquanto o W3C focava suas atenções para a
criação da segunda versão do XHTML, um
grupo chamado Web Hypertext Application
Technology Working Group (WHATWG)
trabalhava em uma versão do HTML que
trazia mais flexibilidade para a produção de
websites e sistemas baseados na web.
 O WHATWG inclue a AOL, Apple, Google, IBM,
Microsoft, Mozilla, Nokia, Opera.
<!DOCTYPE HTML>
<html lang="pt-br">
<head>
<meta charset="UTF-8">
<link rel="stylesheet" type="text/css" href="estilo.css">
<title></title>
</head>
<body>
...
</body>
</html>
 <center>, <font>, <big>, <u> e <s>
por que seus efeitos são apenas visuais
 <frameset>, <frame> e <noframe>
por que ferem os princípios de acessibilidade e
usabilidade:
 Até agora nunca houve um padrão para
reprodução de áudio em uma página web. O
HTML5 especifica o elemento <audio>
<audio src="mus.oga" controls="true"
autoplay="true" />
 Atualmente, existem três formatos
suportados para o elemento de áudio:
 Ogg Vorbis, MP3 e WAV.
 Compatibilidade com os navegadores:
 Origens alternativas de áudio:
<audio controls="true" autoplay="true">
<source src="mus.oga" />
<source src="mus.mp3" />
<source src="mus.wma" />
</audio>
 Ofereça um conteúdo alternativo:
<audio controls="true" autoplay="true">
<source src="mus.oga" />
<source src="mus.mp3" />
<source src="mus.wma" />
<p>Faça o <a href="mus.mp3">download
da música</a>.</p>
</audio>
 O uso de vídeo é semelhante ao de áudio. O
HTML5 especifica o elemento <video>
<video src="u.ogv" width="400" height="300" />
 Atualmente, existem três formatos
suportados para o elemento de vídeo:
 Ogg e o MPEG 4.
 Compatibilidade com os navegadores:
 Origens alternativas de vídeo:
<video controls="true" autoplay="true"
width="400" height="300">
<source src="u.ogv" />
<source src="u.mp4" />
<source src="u.wmv" />
<p>Faça o <a href="u.mp4">download do
vídeo</a>.</p>
</video>
 Novos tipos
◦ tel
◦ search
◦ email
◦ url
◦ number
◦ range
 Exemplos:
<input name="val" type="number" value="12.4"
step="0.2" min="0" max="20" />
<input name="val" type="range" value="12.4"
step="0.2" min="0" max="20" />
 Exemplos
E-mail: <br />
<input type="email“ name="user_email" />
<br />
Homepage: <br />
<input type="url" name="user_url" />
<br />
Date:
<input type="date" name="user_date" />
<br />
Month:
<input type="month" name="user_date" />
<br />
Week:
<input type="week" name="user_date" />
<br />
Time:
<input type="time" name="user_date" />
<br />
Date and time:
<input type="datetime" name="user_date" />
<br />
<input type="submit" value="Enviar" />
 Placeholder antes:
<input name=“srch" value="Search here"
onfocus=“if(this.value=='Search here')
this.value=‘’”>
 Placeholder com HTML5:
<input name="srch" placeholder="Search here">
 Autofocus:
◦ <input name="login" autofocus >
 Required
◦ <input name="login" required>
 Pattern
◦ nos permite definir expressões regulares de
validação, sem Javascript
 Pattern
<form>
<label for="CEP">CEP:
<input name="CEP" id="CEP" required
pattern="d{5}-?d{3}" />
</label>
<input type="submit" value="Enviar" />
</form>
 section
 nav
 article
 aside
 hgroup
 header
 footer
 time
 subject
 itemprop
 item
 hidden
 draggable
 Contenteditable
◦ Exemplo:
<p>Texto não editável</p>
<p contenteditable="true"> Edite-me... </p>
 CSS é uma linguagem de estilo utilizada para
descrever a apresentação de um documento
escrito em uma linguagem de marcação.
 A função da linguagem de marcação é definir
a estrutura e a semântica. O CSS foi criado
com o objetivo de se separar o conteúdo das
informações de estilo.
 Cascading Style Sheets (Folhas de estilo em
cascata)
 Existem três métodos para utilização do CSS:
Inline
◦ Quando as regras CSS estão declaradas dentro da
tag do elemento XHTML.
<p style=“color:black; margin: 5px;”>
Aqui um parágrafo de cor preta com 5px nas 4
margens.
</p>
Incorporada ou interna
◦ Quando as regras CSS estão declaradas no próprio
documento XHTML, na seção <head> do
documento com a tag de estilo <style>.
<head>
<style type=“text/css”>
body {
background: black;
}
</style>
</head>
Externa
Quando as regras CSS estão declaradas em um
documento a parte do documento XHTML em um
arquivo separado do arquivo html e que tem a
extensão .css
<head>
...
<link rel=“stylesheet” type=“text/css” href=“estilo.css”/>
...
</head>
 Vantagens da sua utilização:
◦ Facilidade de manutenção;
◦ Novas possibilidades de apresentação visual;
◦ Criação de sites “tableless”;
◦ Diminuição do tempo de download;
◦ Permite o controle em sistemas que não exibem
informações em tela;
 Usaremos a folha de estilos externa. Crie um
arquivo com extensão .CSS e o nome estilo.
 A seguir importe a folha de estilos no head
da página HTML:
<head>
...
<link rel=“stylesheet” type=“text/css” href=“estilo.css”/>
...
</head>
 Herança
<html>
<head>
</head>
<body>
<!– Todo o parágrafo será sublinhado -->
<p style=“font-style:italic;”>
Inicio do paragrafo.
<br />
<a href=“outrapagina.html”> Link </a>
<br />
Fim do paragrafo.
</body>
</html>
Esse link também ficará sublinhado
 Rule-Set
◦ É composta por um seletor e um bloco de
declaração
ELEMENTO {
[bloco de declarações]
}
Ex:
p {
font-family: Arial;
}
 Seletores
◦ De tipos de elementos:
 A { font-weight: bold; }
◦ De elementos múltiplos:
 H1, H2, H3 { font-weight: bold; }
◦ Universal:
 * { font-weight: bold; }
◦ De elementos adjacentes:
 H1 + p { font-weight: bold; }
◦ De elementos descendentes:
 TABLE p { font-weight: bold; }
◦ CLASS
 .nomeclass { ... }
◦ ID
 #nomeid { ... }
◦ Atributo
 A[target] { color: blue; }
 img[width=“100”] { color: blue; }
 A[title~=“abc”] { color: blue; }
 A[title|=“sinf”] { color: blue; }
 Crie os seguintes elementos no body da
página HTML:
<h1>Titulo H1</h1>
<h2>Titulo H2</h2>
<h3>Titulo H3</h3>
<p>Parte do par <span>Span do paragraf</span></p>
<p>outro paragrafo</p>
<p class="green">outro paragrafo</p>
<p id="blue">outro paragrafo</p>
<a>Link inativo</a>
<a title="teste abc">Link inativo</a>
<a title="sinform">Link inativo</a>
 Agora teste os seletores:
a{color:red;}
H2,H3{margin-left:50px;}
*{font-style:italic;}
H3 + p { font-weight: bold; }
p span { font-size:25px; }
.green{color:green;}
#blue{color:blue;}
A[title~="abc"] { text-decoration:underline; }
A[title|="sinform"] { text-decoration:blink;}
 Pseudoclasses
◦ :link
 A:link { color: black; }
◦ :visited
 A:visited { color: blue; }
◦ :active
 A:active { color: yellow; }
◦ :hover
 A:hover { color: red; }
 Vamos testar o uso das pseudoclasses
 Primeiro crie um elemento link em body:
<a href="#">Teste Pseudoclasses</a>
 Agora crie o CSS em head:
<style type="text/css">
a { font-weight:bold; }
a:link { color: black; }
a:visited { color: blue; }
a:active { background:green ;}
a:hover { color: red; }
</style>
 Unidades de Medida
◦ Unidades de tamanho relativo:
 % - relativa ao tamanho-padrão ou ao tamanho
herdado de uma medida;
 em – relativo ao tamanho da propriedade font-size de
um elemento;
 px – define o tamanho de um pixel do monitor.
Ex: p { font-size: 13px; }
◦ Unidades de tamanho absoluto:
 cm – define medidas em centímetros;
 in – define medidas em polegadas (2,54 cm);
 pt – define medidas em pontos (1/72 polegadas).
Ex: table { margin-left: 2cm; }
 HTML:
<h1>Titulo H1</h1>
<h2>Titulo H2</h2>
<h3>Titulo H3</h3>
<p>Parte do par</p>
<span>Span do paragraf</span>
<br/>
<a>Link</a>
 CSS
h1 { margin-left:10%; }
h2 { margin-left:10em; }
h3 { margin-left:10px; }
p { margin-left:5cm; }
span { margin-left:5in; }
a { margin-left:5pt; }
 Especificando URLs
◦ URL relativa
 background-image: URL(img1.png);
 background-image: URL(../arquivo.jpg);
◦ URL absoluta
 background-image: URL(http://www.site.com/nw.jpg);
 Especificando cores
◦ #RRGGBB – Cada par possui até 256 combinações
(entre 00 e FF)
Ex: p { color: #FF0000; }
◦ #RGB – Abreviação da notação #RRGGBB
Ex: p { color: #F00; }
◦ rgb(R, G, B) – Cada cor varia entre 0 e 255
Ex: p { color: rgb(255, 0, 0); }
◦ VGA name – Utiliza nomes do padrão VGA com 16
cores
Ex: p { color: red; }
 Font
◦ Seletor { font: [estilo] [variação] [peso]
[tamanho]/[altura] [família] }
Ex: body { font: bold small-caps 12pt/14pt Arial }
 Font
◦ font-family
 serif
 sans-serif
 cursive
 fantasy
 monospace
Ex: body { font-family: “Verdana”, Arial, sans-serif; }
◦ font-size
 p { font-size: 12px; }
◦ font-style
 p { font-style : italic; }
◦ font-variant
 p { font-variant : small-caps; }
◦ font-weight
 p { font-weight : bold; }
 Text
◦ letter-spacing
 p { letter-spacing: 0.4em; }
◦ text-align (left, center, right, justify)
 p { text-align : center; }
◦ text-decoration (none, underline, overline, blink)
 p { text-decoration : blink; }
◦ word-spacing
 p { word-spacing : 0.4em; }
◦ text-transform (capitalize, uppercase, lowercase)
 p { text-transform : uppercase; }
 Background
◦ Seletor { background: [cor-de-fundo] [imagem-de-
fundo] [repetição] [anexo] [posição] }
Ex: body { background: #fff url(img.png) repeat-x
fixed top right}
 Background
◦ background-color
 body { background-color: #000; }
◦ background-image
 body { background-image : url(figura.jpg); }
◦ background-repeat
 body { background-repeat : repeat-x; }
◦ background-attachment
 body { background-attachment : fixed; }
◦ background-position
 body { background-position : 20% 20%; }
Utilizando múltiplas imagens em uma
<html>
<head>
<style type="text/css">
div {
height:48px;
width:48px;
background:url(twitter.png);
}
div:hover {
background-position:100%;
}
</style>
</head> ...
…
<body>
<div></div>
</body>
</html>
 Margin
◦ Seletor { margin: [ valor1[ valor2 [ valor3 [ valor4 ]]]] }
Ex: div { margin: 5px 2px 0px 25px; }
◦ margin-top
 p { margin-top: 2px; }
◦ margin-right
 p { margin-right : 25px; }
◦ margin-bottom
 p { margin-bottom : 3cm; }
◦ margin-left
 p { margin-left : 1em; }
 Padding
◦ Seletor { padding: [ valor1[ valor2 [ valor3 [ valor4 ]]]] }
Ex: div { padding : 5px 2px 0px 25px; }
◦ padding-top
 p { padding-top: 2px; }
◦ padding-right
 p { padding-right : 25px; }
◦ padding-bottom
 p { padding-bottom : 3cm; }
◦ padding-left
 p { padding-left : 1em; }
 Geradores de Conteúdo
◦ Content
 A:before { content: “Teste ”;}
◦ Counter-increment
 H2:before { counter-increment: cont 5;}
◦ Counter-reset
 Body { counter-reset: cont}
 HTML:
<p>teste</p>
<p>teste</p>
<p>teste</p>
<p>teste</p>
<p>teste</p>
<p>teste</p>
<p>teste</p>
 CSS:
body{counter-reset: cont;}
p:before{
counter-increment:cont;
content:counter(cont) " - ";
}
 HTML
<h1>Introdução</h1>
<h2>Programação Web com CSS</h2>
<h1>HTML</h1>
<h2>O que é</h2>
<h2>Sintaxe</h2>
<h1>W3C</h1>
<h2>Qual sua utilidade</h2>
<h1>CSS</h1>
<h2>Utilidade</h2>
<h2>Sintaxe</h2>
<h2>Propriedades</h2>
 CSS
body {counter-reset:secao;}
h1 {counter-reset:subsecao;}
h1:before {
counter-increment:secao;
content:"Seção " counter(secao) ". ";
}
h2:before {
counter-increment:subsecao;
content:counter(secao) "." counter(subsecao) " ";
}
 Tableless
◦ Menu vertical
◦ Menu horizontal
 Botão
 Rollover
 Menu Drop-Down
 Menu com abas
 Hack
 1º Passo
◦ Escolha os containers do layout, ou seja, as divs
principais que serão criadas;
◦ Não se esqueça que as margens entre um container
e outro contam na soma da largura do seu layout.
 2º Passo
◦ Nomeie os containers de acordo com suas
finalidades. No nosso exemplo adotaremos os
seguintes nomes para as DIVs principais do layout:
 geral
 topo
 nav
 menu
 conteudo
 rodape
 3º Passo
◦ Crie as DIVs vazias para representar os containers
<div id=“geral">
<div id=“topo"></div>
<div id=“nav"></div>
<div id="menu"></div>
<div id="conteudo"></div>
<div id=“rodape"></div>
</div>
 Para facilitar a visualização de como os
containers interagem entre si a cada um deles
será definida uma largura e uma altura e
também uma cor de fundo;
 Lembre-se que é importante que você teste
em diversos navegadores cada vez que
termine uma etapa;
 Vamos definir a altura de todas as DIVs
apenas para efeito de visualização.
 A primeira regra CSS a criar é referente ao
body, pois ele é o pai de todas as DIVs:
◦ Primeiro precisamos zerar as propriedades margin
e padding, pois cada navegador tem uma forma de
renderização;
◦ Definimos a propriedade text-aling para centralizar
nosso layout. A propriedade não irá centralizar o
texto, mas sim a DIV geral;
◦ Definimos font e cor padrão;
◦ E neste exemplo definimos uma cor de fundo para
visualizar melhor.
 Nossa regra CSS para o body:
body{
margin: 0;
padding: 0;
font: 12px arial, helvetica, sans-serif;
text-align: center;
color: #505367;
background-color: #D6D6D6;
}
 A próxima DIV a ser posicionada é a DIV
geral, pois ela contém as demais DIVs:
◦ Deve-se estabelecer a largura máxima do seu
layout;
◦ Se seu site dor dinâmica defina a altura como
automática, assim evitando que o conteúdo
ultrapasse os limites do layout.
 Nossa regra CSS para geral:
#geral{
margin: 10px auto;
width: 650px;
height: auto;
text-align: left;
background-color: red;
border: 1px solid black;
}
 6º Passo
◦ Para posicionar o topo, definimos apenas a altura e
a largura:
#topo{
height: 45px;
background-color: fuchsia;
}
 7º Passo
◦ Posicionando o menu de navegação horizontal,
definimos uma altura máxima para tal:
#nav{
height: 25px;
background-color: green;
}
 8º Passo
◦ O alinhamento do menu vertical será feito pela
direita e não inline como as outras divs. Além de
definir altura e largura da mesma:
#menu{
float: right;
width: 180px;
height: 100px;
background-color: yellow;
}
 9º Passo
◦ Para posicionar o conteúdo é preciso definir as
margens direita e esquerda. A margem direita deve
ser maior do que o menu da direita, pois a
DIVconteudo não poderá ultrapassá-lo:
#conteudo{
margin-right: 200px;
margin-left: 20px;
height: 200px;
background-color: aqua;
}
 10º Passo
◦ Para o rodapé utilizaremos a propriedade clear:both
para equalizar qualquer elemento anteriomente
flutuado. Ou seja, ele limpa a flutuação das divs
anteriores para não interferir no posicionamento do
rodapé:
#rodape{
clear: both;
height: 20px;
background-color: lime;
}
◦ 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>
 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-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 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>
 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.
<!--[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]-->
<!--[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]-->
 Especificado pela W3C (CSS3)
◦ box-shadow:1px 1px 5px #000;
 Implementado pelo Webkit
◦ -webkit-box-shadow:1px 1px 5px #000;
 Implementado pelo Mozilla
◦ -moz-box-shadow:1px 1px 5px #000;
 Especificado pela W3C (CSS3)
◦ border-top-right-radius: 8px;
◦ border-top-left-radius: 8px;
◦ border-bottom-right-radius: 8px;
◦ border-bottom-left-radius: 8px;
 Implementado pelo Webkit
◦ -webkit-border-top-right-radius: 8px;
◦ -webkit-border-top-left-radius: 8px;
◦ -webkit-border-bottom-left-radius: 8px;
◦ -webkit-border-bottom-right-radius: 8px;
 Implementado pelo Mozilla
◦ -moz-border-radius: 8px 8px 8px 8px;
PRONTO,
PODE CONTINUAR SOZINHO...
http://www.maujor.com
Fique atento às novidades, testem os exemplos
dados nos sites que falam sobre o tema,
leiam sobre o assunto e pratiquem, testem
combinações de cores... O que faz a diferença
no final é a criatividade somada ao
conhecimento técnico.
Victor Adriel de J. Oliveira
victorajoliveira@gmail.com
http://blogvictoradriel.blogspot.com.br/
apresentação feita em 2010

Mais conteúdo relacionado

Mais procurados

Curso de Desenvolvimento Web - Módulo 02 - CSS
Curso de Desenvolvimento Web - Módulo 02 - CSSCurso de Desenvolvimento Web - Módulo 02 - CSS
Curso de Desenvolvimento Web - Módulo 02 - CSS
Rodrigo Bueno Santa Maria, BS, MBA
 
Introdução sobre desenvolvimento web
Introdução sobre desenvolvimento webIntrodução sobre desenvolvimento web
Introdução sobre desenvolvimento web
Rodrigo Rodrigues
 
Curso de Desenvolvimento Web - Módulo 03 - JavaScript
Curso de Desenvolvimento Web - Módulo 03 - JavaScriptCurso de Desenvolvimento Web - Módulo 03 - JavaScript
Curso de Desenvolvimento Web - Módulo 03 - JavaScript
Rodrigo Bueno Santa Maria, BS, MBA
 
Apresentação HTML e CSS
Apresentação HTML e CSSApresentação HTML e CSS
Apresentação HTML e CSS
ledsifes
 
Aula 2 – Introdução a HTML - conceitos básicos e estrutura
Aula 2 – Introdução a HTML - conceitos básicos e estruturaAula 2 – Introdução a HTML - conceitos básicos e estrutura
Aula 2 – Introdução a HTML - conceitos básicos e estrutura
André Constantino da Silva
 
HTML - Aula 01 - Estrutura básica e tags básicas no html
HTML - Aula 01 - Estrutura básica e tags básicas no htmlHTML - Aula 01 - Estrutura básica e tags básicas no html
HTML - Aula 01 - Estrutura básica e tags básicas no html
Tiago Luiz Ribeiro da Silva
 
Aula 1 linguagem html (1)
Aula 1   linguagem html (1)Aula 1   linguagem html (1)
Aula 1 linguagem html (1)
Kaoru Hatake
 
Minicurso de HTML básico - Atualizado para HTML5
Minicurso de HTML básico - Atualizado para HTML5Minicurso de HTML básico - Atualizado para HTML5
Minicurso de HTML básico - Atualizado para HTML5
Jose Augusto Cintra
 
Introdução ao HTML
Introdução ao HTMLIntrodução ao HTML
Introdução ao HTML
Vinícius Roggério da Rocha
 
Introdução ao desenvolvimento Web
Introdução ao desenvolvimento WebIntrodução ao desenvolvimento Web
Introdução ao desenvolvimento Web
Sérgio Souza Costa
 
html, css e java script - renato araujo
html, css e java script - renato araujohtml, css e java script - renato araujo
html, css e java script - renato araujo
orenatoaraujo
 
Introdução ao CSS
Introdução ao CSSIntrodução ao CSS
Introdução ao CSS
Leonardo Soares
 
CSS
CSSCSS
01 Introdução à programação web
01 Introdução à programação web01 Introdução à programação web
01 Introdução à programação web
Centro Paula Souza
 
Minicurso de JavaScript (Portuguese)
Minicurso de JavaScript (Portuguese)Minicurso de JavaScript (Portuguese)
Minicurso de JavaScript (Portuguese)
Bruno Grange
 
Apresentação para aula de HTML básico
Apresentação para aula de HTML básicoApresentação para aula de HTML básico
Apresentação para aula de HTML básico
Silvio Sales do Nascimento Júnior
 
Programacao para Web I Plano de Ensinodoc
Programacao para Web I Plano de EnsinodocProgramacao para Web I Plano de Ensinodoc
Programacao para Web I Plano de Ensinodoc
DESIGN DIGITAL UNIARA 2012
 
Aula01-JavaScript
Aula01-JavaScriptAula01-JavaScript
Aula01-JavaScript
Jorge Ávila Miranda
 
Web design responsivo e adaptativo - HTML5/CSS3
Web design responsivo e adaptativo - HTML5/CSS3Web design responsivo e adaptativo - HTML5/CSS3
Web design responsivo e adaptativo - HTML5/CSS3
Heraldo Gonçalves Lima Junior
 
HTML+&+CSS++Fundamentos.pdf
HTML+&+CSS++Fundamentos.pdfHTML+&+CSS++Fundamentos.pdf
HTML+&+CSS++Fundamentos.pdf
Cesar Braz
 

Mais procurados (20)

Curso de Desenvolvimento Web - Módulo 02 - CSS
Curso de Desenvolvimento Web - Módulo 02 - CSSCurso de Desenvolvimento Web - Módulo 02 - CSS
Curso de Desenvolvimento Web - Módulo 02 - CSS
 
Introdução sobre desenvolvimento web
Introdução sobre desenvolvimento webIntrodução sobre desenvolvimento web
Introdução sobre desenvolvimento web
 
Curso de Desenvolvimento Web - Módulo 03 - JavaScript
Curso de Desenvolvimento Web - Módulo 03 - JavaScriptCurso de Desenvolvimento Web - Módulo 03 - JavaScript
Curso de Desenvolvimento Web - Módulo 03 - JavaScript
 
Apresentação HTML e CSS
Apresentação HTML e CSSApresentação HTML e CSS
Apresentação HTML e CSS
 
Aula 2 – Introdução a HTML - conceitos básicos e estrutura
Aula 2 – Introdução a HTML - conceitos básicos e estruturaAula 2 – Introdução a HTML - conceitos básicos e estrutura
Aula 2 – Introdução a HTML - conceitos básicos e estrutura
 
HTML - Aula 01 - Estrutura básica e tags básicas no html
HTML - Aula 01 - Estrutura básica e tags básicas no htmlHTML - Aula 01 - Estrutura básica e tags básicas no html
HTML - Aula 01 - Estrutura básica e tags básicas no html
 
Aula 1 linguagem html (1)
Aula 1   linguagem html (1)Aula 1   linguagem html (1)
Aula 1 linguagem html (1)
 
Minicurso de HTML básico - Atualizado para HTML5
Minicurso de HTML básico - Atualizado para HTML5Minicurso de HTML básico - Atualizado para HTML5
Minicurso de HTML básico - Atualizado para HTML5
 
Introdução ao HTML
Introdução ao HTMLIntrodução ao HTML
Introdução ao HTML
 
Introdução ao desenvolvimento Web
Introdução ao desenvolvimento WebIntrodução ao desenvolvimento Web
Introdução ao desenvolvimento Web
 
html, css e java script - renato araujo
html, css e java script - renato araujohtml, css e java script - renato araujo
html, css e java script - renato araujo
 
Introdução ao CSS
Introdução ao CSSIntrodução ao CSS
Introdução ao CSS
 
CSS
CSSCSS
CSS
 
01 Introdução à programação web
01 Introdução à programação web01 Introdução à programação web
01 Introdução à programação web
 
Minicurso de JavaScript (Portuguese)
Minicurso de JavaScript (Portuguese)Minicurso de JavaScript (Portuguese)
Minicurso de JavaScript (Portuguese)
 
Apresentação para aula de HTML básico
Apresentação para aula de HTML básicoApresentação para aula de HTML básico
Apresentação para aula de HTML básico
 
Programacao para Web I Plano de Ensinodoc
Programacao para Web I Plano de EnsinodocProgramacao para Web I Plano de Ensinodoc
Programacao para Web I Plano de Ensinodoc
 
Aula01-JavaScript
Aula01-JavaScriptAula01-JavaScript
Aula01-JavaScript
 
Web design responsivo e adaptativo - HTML5/CSS3
Web design responsivo e adaptativo - HTML5/CSS3Web design responsivo e adaptativo - HTML5/CSS3
Web design responsivo e adaptativo - HTML5/CSS3
 
HTML+&+CSS++Fundamentos.pdf
HTML+&+CSS++Fundamentos.pdfHTML+&+CSS++Fundamentos.pdf
HTML+&+CSS++Fundamentos.pdf
 

Destaque

Javascript, HTML5 e CSS3
Javascript, HTML5 e CSS3Javascript, HTML5 e CSS3
Javascript, HTML5 e CSS3
Tim Koch-Grünberg
 
HTML5 Básico: Multimídia 1 (aula 3)
HTML5 Básico: Multimídia 1 (aula 3)HTML5 Básico: Multimídia 1 (aula 3)
HTML5 Básico: Multimídia 1 (aula 3)
Gustavo Zimmermann
 
Introdução a HTML, CSS, JS, Ajax
Introdução a HTML, CSS, JS, AjaxIntrodução a HTML, CSS, JS, Ajax
Introdução a HTML, CSS, JS, Ajax
Gabriel Kamimura Yano
 
HTML5 Básico: Formulários (aula 2)
HTML5 Básico: Formulários (aula 2)HTML5 Básico: Formulários (aula 2)
HTML5 Básico: Formulários (aula 2)
Gustavo Zimmermann
 
CSS3: CSS3 (aula 2)
CSS3: CSS3 (aula 2)CSS3: CSS3 (aula 2)
CSS3: CSS3 (aula 2)
Gustavo Zimmermann
 
JavaScript: Estruturas (aula 2)
JavaScript: Estruturas (aula 2)JavaScript: Estruturas (aula 2)
JavaScript: Estruturas (aula 2)
Gustavo Zimmermann
 
JavaScript: Introdução e Operadores (aula 1)
JavaScript: Introdução e Operadores (aula 1)JavaScript: Introdução e Operadores (aula 1)
JavaScript: Introdução e Operadores (aula 1)
Gustavo Zimmermann
 
CSS3: Start (aula 1)
CSS3: Start (aula 1)CSS3: Start (aula 1)
CSS3: Start (aula 1)
Gustavo Zimmermann
 
Farol: Os 4 ciclos
Farol: Os 4 ciclosFarol: Os 4 ciclos
Farol: Os 4 ciclos
Gustavo Zimmermann
 
Web Development with HTML5, CSS3 & JavaScript
Web Development with HTML5, CSS3 & JavaScriptWeb Development with HTML5, CSS3 & JavaScript
Web Development with HTML5, CSS3 & JavaScript
Edureka!
 
Servlets
ServletsServlets
Aula 7 – linguagem HTML - Frames
Aula 7 – linguagem HTML - FramesAula 7 – linguagem HTML - Frames
Aula 7 – linguagem HTML - Frames
André Constantino da Silva
 
The State of Front End Web Development 2011
The State of Front End Web Development 2011The State of Front End Web Development 2011
The State of Front End Web Development 2011
Pascal Rettig
 
Português: Gramática
Português: GramáticaPortuguês: Gramática
Português: Gramática
Simaoalmeida2102
 
Aprender CSS (UFCD0154) v2
Aprender CSS (UFCD0154) v2Aprender CSS (UFCD0154) v2
Aprender CSS (UFCD0154) v2
Afonso Gomes
 
Precisa testar? - Parte 1
Precisa testar? - Parte 1Precisa testar? - Parte 1
Precisa testar? - Parte 1
Fernando Fabricio
 
Html frames
Html framesHtml frames
Html frames
nobel mujuji
 
Fichas de html 2014
Fichas de html 2014Fichas de html 2014
Fichas de html 2014
Lucy Espinoza
 
Cae software científico e de engenharia
Cae   software científico e de engenhariaCae   software científico e de engenharia
Cae software científico e de engenharia
Jaime Teixeira
 
curso de html
curso de htmlcurso de html
curso de html
markuszakeu
 

Destaque (20)

Javascript, HTML5 e CSS3
Javascript, HTML5 e CSS3Javascript, HTML5 e CSS3
Javascript, HTML5 e CSS3
 
HTML5 Básico: Multimídia 1 (aula 3)
HTML5 Básico: Multimídia 1 (aula 3)HTML5 Básico: Multimídia 1 (aula 3)
HTML5 Básico: Multimídia 1 (aula 3)
 
Introdução a HTML, CSS, JS, Ajax
Introdução a HTML, CSS, JS, AjaxIntrodução a HTML, CSS, JS, Ajax
Introdução a HTML, CSS, JS, Ajax
 
HTML5 Básico: Formulários (aula 2)
HTML5 Básico: Formulários (aula 2)HTML5 Básico: Formulários (aula 2)
HTML5 Básico: Formulários (aula 2)
 
CSS3: CSS3 (aula 2)
CSS3: CSS3 (aula 2)CSS3: CSS3 (aula 2)
CSS3: CSS3 (aula 2)
 
JavaScript: Estruturas (aula 2)
JavaScript: Estruturas (aula 2)JavaScript: Estruturas (aula 2)
JavaScript: Estruturas (aula 2)
 
JavaScript: Introdução e Operadores (aula 1)
JavaScript: Introdução e Operadores (aula 1)JavaScript: Introdução e Operadores (aula 1)
JavaScript: Introdução e Operadores (aula 1)
 
CSS3: Start (aula 1)
CSS3: Start (aula 1)CSS3: Start (aula 1)
CSS3: Start (aula 1)
 
Farol: Os 4 ciclos
Farol: Os 4 ciclosFarol: Os 4 ciclos
Farol: Os 4 ciclos
 
Web Development with HTML5, CSS3 & JavaScript
Web Development with HTML5, CSS3 & JavaScriptWeb Development with HTML5, CSS3 & JavaScript
Web Development with HTML5, CSS3 & JavaScript
 
Servlets
ServletsServlets
Servlets
 
Aula 7 – linguagem HTML - Frames
Aula 7 – linguagem HTML - FramesAula 7 – linguagem HTML - Frames
Aula 7 – linguagem HTML - Frames
 
The State of Front End Web Development 2011
The State of Front End Web Development 2011The State of Front End Web Development 2011
The State of Front End Web Development 2011
 
Português: Gramática
Português: GramáticaPortuguês: Gramática
Português: Gramática
 
Aprender CSS (UFCD0154) v2
Aprender CSS (UFCD0154) v2Aprender CSS (UFCD0154) v2
Aprender CSS (UFCD0154) v2
 
Precisa testar? - Parte 1
Precisa testar? - Parte 1Precisa testar? - Parte 1
Precisa testar? - Parte 1
 
Html frames
Html framesHtml frames
Html frames
 
Fichas de html 2014
Fichas de html 2014Fichas de html 2014
Fichas de html 2014
 
Cae software científico e de engenharia
Cae   software científico e de engenhariaCae   software científico e de engenharia
Cae software científico e de engenharia
 
curso de html
curso de htmlcurso de html
curso de html
 

Semelhante a Programação Web com HTML e CSS

Introdução de web
Introdução de webIntrodução de web
Introdução de web
Sedu
 
Html completo
Html completoHtml completo
Html completo
EMSNEWS
 
O que é html
O que é htmlO que é html
O que é html
Eduardo Kiefer
 
Fundamentos e Desenvolvimento de Interface Web com HTML5 & CSS3
Fundamentos e Desenvolvimento de Interface Web com HTML5 & CSS3 Fundamentos e Desenvolvimento de Interface Web com HTML5 & CSS3
Fundamentos e Desenvolvimento de Interface Web com HTML5 & CSS3
Cristofer Sousa
 
Curso de XHTML
Curso de XHTMLCurso de XHTML
Curso de XHTML
Marco Pinheiro
 
XHTML Básico
XHTML BásicoXHTML Básico
XHTML Básico
Ester Razzo Fischer
 
RCOM 11º Ano - HTML
RCOM 11º Ano - HTMLRCOM 11º Ano - HTML
RCOM 11º Ano - HTML
Escola Secundária de Vizela
 
Apoio1020 apostila html
Apoio1020 apostila htmlApoio1020 apostila html
Apoio1020 apostila html
Reinaldo Vieira dos Santos
 
Trabalho de HTML, CSS e JavaScript - Eduardo Bertolucci - UNOPAR 2010
Trabalho de HTML, CSS e JavaScript - Eduardo Bertolucci - UNOPAR 2010Trabalho de HTML, CSS e JavaScript - Eduardo Bertolucci - UNOPAR 2010
Trabalho de HTML, CSS e JavaScript - Eduardo Bertolucci - UNOPAR 2010
Eduardo Bertolucci
 
HTML5 e CSS3 - Recursos mais utilizados
HTML5 e CSS3 - Recursos mais utilizadosHTML5 e CSS3 - Recursos mais utilizados
HTML5 e CSS3 - Recursos mais utilizados
Caio Gomes
 
HTML + CSS
HTML + CSSHTML + CSS
HTML + CSS
Pedro Gaspar
 
HTML - HyperText Markup Language - Review
HTML - HyperText Markup Language - ReviewHTML - HyperText Markup Language - Review
HTML - HyperText Markup Language - Review
Israel Messias
 
HTML Básico
HTML BásicoHTML Básico
HTML
HTML HTML
Apresentação do Curso Primeiros Passos na Web com HTML e CSS - Profite e Univ...
Apresentação do Curso Primeiros Passos na Web com HTML e CSS - Profite e Univ...Apresentação do Curso Primeiros Passos na Web com HTML e CSS - Profite e Univ...
Apresentação do Curso Primeiros Passos na Web com HTML e CSS - Profite e Univ...
Uni Buscapé Company
 
Aula html5
Aula html5Aula html5
Aula html5
Rodrigo Gidra
 
Html
HtmlHtml
Html
HtmlHtml
Curso HTML módulo 2
Curso HTML módulo 2Curso HTML módulo 2
Curso HTML módulo 2
Michel Bernardes de Jesus
 
Criação de sites
Criação de sitesCriação de sites
Criação de sites
Kundan Narendra
 

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

Introdução de web
Introdução de webIntrodução de web
Introdução de web
 
Html completo
Html completoHtml completo
Html completo
 
O que é html
O que é htmlO que é html
O que é html
 
Fundamentos e Desenvolvimento de Interface Web com HTML5 & CSS3
Fundamentos e Desenvolvimento de Interface Web com HTML5 & CSS3 Fundamentos e Desenvolvimento de Interface Web com HTML5 & CSS3
Fundamentos e Desenvolvimento de Interface Web com HTML5 & CSS3
 
Curso de XHTML
Curso de XHTMLCurso de XHTML
Curso de XHTML
 
XHTML Básico
XHTML BásicoXHTML Básico
XHTML Básico
 
RCOM 11º Ano - HTML
RCOM 11º Ano - HTMLRCOM 11º Ano - HTML
RCOM 11º Ano - HTML
 
Apoio1020 apostila html
Apoio1020 apostila htmlApoio1020 apostila html
Apoio1020 apostila html
 
Trabalho de HTML, CSS e JavaScript - Eduardo Bertolucci - UNOPAR 2010
Trabalho de HTML, CSS e JavaScript - Eduardo Bertolucci - UNOPAR 2010Trabalho de HTML, CSS e JavaScript - Eduardo Bertolucci - UNOPAR 2010
Trabalho de HTML, CSS e JavaScript - Eduardo Bertolucci - UNOPAR 2010
 
HTML5 e CSS3 - Recursos mais utilizados
HTML5 e CSS3 - Recursos mais utilizadosHTML5 e CSS3 - Recursos mais utilizados
HTML5 e CSS3 - Recursos mais utilizados
 
HTML + CSS
HTML + CSSHTML + CSS
HTML + CSS
 
HTML - HyperText Markup Language - Review
HTML - HyperText Markup Language - ReviewHTML - HyperText Markup Language - Review
HTML - HyperText Markup Language - Review
 
HTML Básico
HTML BásicoHTML Básico
HTML Básico
 
HTML
HTML HTML
HTML
 
Apresentação do Curso Primeiros Passos na Web com HTML e CSS - Profite e Univ...
Apresentação do Curso Primeiros Passos na Web com HTML e CSS - Profite e Univ...Apresentação do Curso Primeiros Passos na Web com HTML e CSS - Profite e Univ...
Apresentação do Curso Primeiros Passos na Web com HTML e CSS - Profite e Univ...
 
Aula html5
Aula html5Aula html5
Aula html5
 
Html
HtmlHtml
Html
 
Html
HtmlHtml
Html
 
Curso HTML módulo 2
Curso HTML módulo 2Curso HTML módulo 2
Curso HTML módulo 2
 
Criação de sites
Criação de sitesCriação de sites
Criação de sites
 

Mais de Victor Adriel Oliveira

Design and Application of Experiments and User Studies
Design and Application of Experiments and User StudiesDesign and Application of Experiments and User Studies
Design and Application of Experiments and User Studies
Victor Adriel Oliveira
 
Working on Non-Conventional User Interfaces
Working on Non-Conventional User InterfacesWorking on Non-Conventional User Interfaces
Working on Non-Conventional User Interfaces
Victor Adriel Oliveira
 
eScanner
eScannereScanner
User Experience
User ExperienceUser Experience
User Experience
Victor Adriel Oliveira
 
Programação Web com jQuery
Programação Web com jQueryProgramação Web com jQuery
Programação Web com jQuery
Victor Adriel Oliveira
 
Programação Web com jQuery
Programação Web com jQueryProgramação Web com jQuery
Programação Web com jQuery
Victor Adriel Oliveira
 
Acessibilidade em Sistemas para a Web
Acessibilidade em Sistemas para a WebAcessibilidade em Sistemas para a Web
Acessibilidade em Sistemas para a Web
Victor Adriel Oliveira
 
eScanner
eScannereScanner

Mais de Victor Adriel Oliveira (8)

Design and Application of Experiments and User Studies
Design and Application of Experiments and User StudiesDesign and Application of Experiments and User Studies
Design and Application of Experiments and User Studies
 
Working on Non-Conventional User Interfaces
Working on Non-Conventional User InterfacesWorking on Non-Conventional User Interfaces
Working on Non-Conventional User Interfaces
 
eScanner
eScannereScanner
eScanner
 
User Experience
User ExperienceUser Experience
User Experience
 
Programação Web com jQuery
Programação Web com jQueryProgramação Web com jQuery
Programação Web com jQuery
 
Programação Web com jQuery
Programação Web com jQueryProgramação Web com jQuery
Programação Web com jQuery
 
Acessibilidade em Sistemas para a Web
Acessibilidade em Sistemas para a WebAcessibilidade em Sistemas para a Web
Acessibilidade em Sistemas para a Web
 
eScanner
eScannereScanner
eScanner
 

Programação Web com HTML e CSS

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