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
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
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
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.
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
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%">
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.
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:
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 { ... }
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;}
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; }
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; }
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>
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.
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.
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>
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>
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
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:
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;
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