PW00 - Programação Web html e estilo CSS.pdf

Programação Web
(HTML CSS)
prof.silvano.oliveira@gmail.com

Quem valida o documento?
http://validator.w3.org/
Prof Silvano Oliveira (Programação Web) 2

Quem valida o documento?

No DOCTYPE found!

Tipos de documentos
Declaração do tipo é parecido com
<!DOCTYPE HTML PUBLIC “-//W3C//DTD HTML
4.01 Transitional//EN”
“http://www.w3.org/TR/html4/loose.dtd”>
<!DOCTYPE HTML SYSTEM>

Tipos de documentos

Documentos bem formados
<!DOCTYPE ... >
<html xmlns=”...”>
<head>
<title>...</title>
...
</head>
<body>
...
</body>
</html>

Modelo mínimo de documento
<!DOCTYPE ...>
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<title>Título do documento</title>
</head>
<body>
Conteúdo do documento
</body>
</html>

CSS – Folha de Estilo em Cascata

Definição
CSS = Cascade Style Sheet = Folha de Estilo
em Cascata
Do site do W3C:
“Folhas de estilo em cascata é um
mecanismo simples para adicionar estilos
(por exemplo: fontes, cores, espaçamentos)
aos documentos web”

Estilos dentro do HTML
<nometag style=“propriedade:valor;">
Cor de Fundo
<body style="background-color:powderblue;">
<h1>Isto é um cabeçalho</h1>
<p>Isto é um parágrafo.</p>
</body>

 Cor do Texto
<body>
<h1 style="color:blue;">Isto é um cabeçalho</h1>
<p style="color:red;">Isto é um parágrafo.</p>
</body>
 Tipo da fonte
<body>
<h1 style="font-family:verdana;"> Isto é um cabeçalho </h1>
<p style="font-family:courier;"> Isto é um parágrafo.</p>
</body>

Tamanho da fonte
<h1 style="font-size:300%;"> Isto é um cabeçalho
</h1>
<p style="font-size:160%;"> Isto é um parágrafo.</p>
Alinhamento da fonte
<h1 style="text-align:center;"> Isto é um cabeçalho
</h1>
<p style="text-align:center;"> Isto é um parágrafo.</p>

Sintaxe CSS
•Regra CSS
seletor {propriedade: valor}
Regra CSS
Declaração
Exemplos:
body{background-color: blue}
OU
body{background-color: ligthgrey}

Regra CSS
Seletor: é o alvo da CSS, define onde será
aplicada a regra CSS
Declaração: determina os parâmetros da
estilização
Propriedade: define qual propriedade do
elemento será estilizado
Valor: é a quantificação ou qualificação da
propriedade

Prioridade dos estilos
As folhas de estilos podem ser inseridas de três
formas:
1. Escrita diretamente na tag.
2. Escrita no cabeçalho da página web.
3. Escrita em um arquivo externo, sendo acessado
pela página web.
A ordem de prioridade é 1 – 2 – 3

CSS inline (embutida)
<h2 style="background-color:blue;">Cabeçalho estilizado</h2>
<p style=“font-family:Arial; color:purple”>Parágrafo bonito</p>
Colocar a cor da fonte do h2 como branco

Onde colocar isso?
<head>
<title>Exercício CSS</title>
<style type="text/css">
h1 {
text-align: center
}
</style>
</head>
<body>
<h2 style="background-color: blue; color:white">Cabeçalho estilizado</h2>
<p style=“font-family:Arial; color:purple”>Parágrafo bonito</p>
</body>

Seletores podem compartilhar declarações
<head>
h1, h2 {
text-align: center
}
</style>
</head>
<body>
</body>

Uma declaração pode definir mais de uma
propriedade
<head>
h1, h2{
text-align: center;
color: red;
}
</style>
</head>
<body>
<h1>Cabeçalho H1</h1>
</body>

Uma declaração pode definir mais de uma
propriedade
<head>
h1, h2{
text-align: center;
color: red;
}
p {font-size: 30px; }
</style>
</head>
<body>
</body>

Reutilizando folhas de estilo
h1, h2{text-align: center;
color: red;}
h1 {
color: sienna;
font-family: arial
}
h2 {margin-left: 80px}
ol {
color: blue;
font-family: verdana
}
</style>
h1, h2{text-align: center;
color: red;}
h1 {
color: sienna;
font-family: arial
}
ol {
color: blue;
}
estilo.css

Reutilizando folhas de estilo
<head>
<style>
...
</style>
<link type="text/css“ rel="stylesheet” href="estilo.css" />
</head>

Comentários em Arquivos CSS
/* formata a tag de cabeçalhos */
h1, h2 {
text-align: center; /* texto centralizado
*/
color: red; /* texto com cor vermelha */
}

Mais exemplos em estilo.css
h1 {
color: sienna;
font-family: arial
}
ol {
color: blue;
}

Exemplo estilo.html
<head>
<link type="text/css“ rel="stylesheet” href = "estilo.css" />
</head>
<body>
<ol>
<li>Primeira opção</li>
<li>Segunda opção</li>
</ol>
</body>

Somente tag body
<body>
<h2 style="background-color: blue; color:white">Cabeçalho
estilizado</h2>
<p style=“font-family:Arial; color:purple”>Parágrafo
bonito</p>
<ol>
<li>Primeira opção</li>
<li>Segunda opção</li>
</ol>
</body>

Crie uma nova página com este conteúdo: classe.html
Disciplina Professor(es)
Programação Web Silvano
Algoritmos Joberth
Português Silveira
Matemática Jairo
Redes Silvano
Prog Estruturada Wanderson
Química Antonio
POO Joberth

Classes de estilo
•Não estamos restritos somente aos elementos
XHTML (tags) para aplicar regras de estilo
•Podemos “inventar” um nome e com ele criar
uma classe que definirá essas regras CSS
elemento.classe {propriedade: valor}

Criando a classe
h1 {
color: sienna;
font-family: arial
}
ol {
color: blue;
}
tr.cor-um{background-color: gray}
tr.cor-dois{background-color: lightblue}
Adicione isso na sua folha de ESTILO.CSS

Utilizando a classe
<table border="1px">
<tr><th>Disciplina</th> <th>Professor(es)</th> </tr>
...
<tr class="cor-um"><td>Redes</td> <td>Débora</td></tr>
<tr class="cor-dois"><td>Eletricidade</td> <td>Jean</td></tr>
<tr class="cor-um"><td>Eletrônica</td> <td>Filipe</td></tr>
<tr class="cor-dois"><td>POO</td> <td>André</td></tr>
...
 </table>
Adicione na sua tabela de professores

Classes genéricas
•Omitindo a tag XHTML, define-se uma classe
que pode ser usada com qualquer tag
•Adicione no Classe.html no fim do arquivo.
<h2 class="cor-um">Objetivos</h2>
<h2 class="cor-dois">Bases Tecnológicas</h2>
.cor-um{background-color: red}
.cor-dois{background-color: orange}
Adicione isso
na sua folha de
ESTILO.CSS

Seletor ID
● Pode-se também definir estilos utilizando o seletor id
# (especificando ou não a tag)
● Para usar basta ter uma tag com o atributo id=”links”
●<h2 id="links">Links Importantes</h2>
#links{text-decoration: underline}
Adicione em ESTILO.CSS

Seletor class ou id ?
● Um atributo id e seu respectivo nome (valor) deve
ser único no documento
● Por ser exclusivo, o atributo id é genericamente
chamado de identificador
● A especificidade de um seletor id é maior do que a
de um seletor class

Cascateando estilos
 Pode-se restringir ainda mais o uso de estilos, aproveitando-se da sua
natureza em cascata
p i {
letter-spacing: 5px;
color: red;
}
#titulo h1 {
text-transform: capitalize
}
 Exemplo:
<p>Bases <i>Tecnológicas</i></p>
Adicione em ESTILO.CSS

Pseudoclasses
● Permitem associar efeitos especiais a
seletores ou a parte de seletores
seletor: pseudoclasse {
propriedade: valor
}

Pseudoclasses
:hover - quando o mouse passa sobre o elemento.
:active - ativamos o elemento, ex. clicando sem soltar o botão do
mouse sobre um link (não existe em todos os elementos).
:visited - quando o link é visitado.
:focus - quando elemento recebe foco.
:link - estado inicial do link.
 Ex.:
th: hover {
background-color: yellow;
}
Acrescentar
ao Estilo.css

Pseudoclasses
Observação
:link e :visited: só podem ser aplicados a tag <a>

Exemplo
 Para melhor visualização e exemplificação dos conceitos contidos
neste slide vamos criar uma página web bem simples constituída de:
 um cabeçalho título (<h1>);
 um cabeçalho subtítulo (<h3>) ;
 dois parágrafos (<p>) ;
 Criar arquivo BoxCSS.html
<body>
<h1>Cabeçalho Título</h1>
<h3>Cabeçalho Subtítulo</h3>
<p>Primeiro parágrafo</p>
<p>Segundo parágrafo</p>
</body>

Exemplo
 As CSS considera e trata todos dos elementos
HTML como se fossem caixas
 Essas “caixas” são as unidades básicas de
formatação CSS

Entendendo as caixas CSS
 As caixas CSS são constituídas por 04 (quatro)
áreas retangulares, listadas abaixo:
 conteúdo;
 espaçamentos (padding);
 bordas (border);
 margens (margin).

Crie um Estilo3.CSS
h1 {
background-color: #cc9;
border: 10px solid #f00;
padding: 5px;
}
h3 {
background-color: #fc9;
border: 20px solid #039;
padding: 15px;
}

Adicione ao Estilo3.CSS
p.um {
background-color: #ff9;
border: 5px solid #f0f;
padding: 5px;
text-align: justify;
}
p.dois {
background-color: #cff;
border: 2px solid #039;
padding: 10px;
text-align: justify;
}
Obs.: classes .um e .dois para o primeiro e segundo
parágrafos do HTML

Caixas...

Características das caixas
 Margens (margin): são sempre transparentes e
largura padrão definida pelo navegador
 Bordas (border): são transparentes e larguras
iguais a zero
 Espaçamentos (padding): transparentes e iguais a
zero
 O fundo (background): está por trás do conteúdo e
do espaçamento

Características das caixas
 Margens, bordas e espaçamentos pode ter
diferentes espessuras para cada um dos lados
 Espessura igual a zero não será exibido
 Cores e tipos das margens podem ser diferentes
para cada lado
 A cor ou imagem de fundo pode definida para ser
colocadas atrás do conteúdo e espaçamento

Margens sobrepostas

Cores

Objetivo final

Começando do começo

Ops...

Tag Meta
 Tag meta: fornece informações sobre a página
 Exemplos de Atributos:
name: especifica o nome da meta informação
content: especifica o valor da meta informação
http-equiv: especifica parâmetros do cabeçalho HTTP

Cores

Cores
Fonte: http://maujor.com/tutorial/cores.php

RGB
● R – Red
● G – Green
● B – Blue
Fonte: http://pt.wikipedia.org/wiki/RGB

Representando as cores
● Representação numérica inteira (0 a 255)
– RGB(rrr, ggg, bbb) → mistura de uma quantidade rrr de vermelho
com ggg de verde e com bbb de azul.
– Branco – RGB(255,255,255)
– Azul – RGB(0,0,255)
– Vermelho – RGB(255,0,0)
– Verde – RGB(0,255,0)
– Amarelo – RGB(255,255,0)
– Magenta – RGB(255,0,255)
– Ciano – RGB(0,255,255)
– Preto - RGB(0,0,0)

● Representação percentual (0% a 100%)
– rgb(r%, g%, b%) → mistura de uma quantidade r% de vermelho com g%
de verde e com b% de azul.
– Branco →RGB(100%, 100%, 100%)
– Azul →RGB(0, 0, 100%)
– Vermelho →RGB(100%, 0%, 0%)
– Verde →RGB(0%, 100%, 0%)
– Amarelo →RGB(100%, 100%, 0%)
– Magenta →RGB(100%, 0%, 100%)
– Ciano →RGB(0%, 100%, 100%)
– Preto →RGB(0%, 0%, 0%)
● Não misture

● Representação em hexadecimal (0 a F)
● 0, 1, 2, 3, 4, 5, 6, 7, 8, 9, A, B, C, D, E, F
– #RRGGBB → mistura de uma quantidade RR de vermelho com GG de
verde e com BB de azul.
– Branco → #FFFFFF
– Azul → #0000FF
– Vermelho → #FF0000
– Verde → #00FF00
– Amarelo → #FFFF00
– Magenta → #FF00FF
– Ciano → #00FFFF
– Preto → #000000

● Representação em hexadecimal abreviada (0 a F)
● 0, 1, 2, 3, 4, 5, 6, 7, 8, 9, A, B, C, D, E, F
– #RGB → mistura de uma quantidade RR de vermelho com GG de verde e
com BB de azul.
– Branco → #FFF
– Azul → #00F
– Vermelho → #F00
– Verde → #0F0
– Amarelo → #FF0
– Magenta → #F0F
– Ciano → #0FF
– Preto → #000

Testando todas representações

Unidades de medidas

Unidades de Medidas
div { margin: 1.5em; }
h4 { margin: 2ex; }
p { font-size: 14px; }
.classe { padding: 90%; }
hr { width: 14pt; }
h1 { margin: 1pc; }
h2 { font-size: 4mm; }
p.classe { padding: 0.3cm; }
h5.classe { padding: 0.5in; }

Formulários

➢ Os formulários em HTML são usados para
selecionar diferentes tipos de entradas do usuário
➢ São bastante utilizados para realizar buscas e
introduzir dados pessoais
➢ São delimitados pelas tags
<form>
:
</form>
Formulários

Input (Entrada)
É a tag mais utilizada em formulário
Conjunto de campos e botões
<form>
<input>
<input>
...
<input>
</form>
Formulários

➢ Input (Entrada)
➢ O tipo é dado através do atributo type
<input type=“text”>
➢ Tipos da tag <input>
➢ text – quando se deseja digitar letras, números, etc
➢ radio – quando se deseja oferecer opções para escolha
única
➢ checkbox – múltiplas escolhas
➢ password – campo de senha
➢ button – botão
➢ submit – botão para envio de dados
➢ reset – limpa todos os campos do formulário
Formulários

➢ Input (Entrada)
➢ A tag <label> pode ser usada para atribuir um título ao
campo do formulário
<label> Nome: </label>
Formulários

<html>
<head>
<title>Meu primeiro formulário</title>
</head>
<body>
<form>
</form>
</body>
</html>
Formulários

<html>
<head>
</head>
<body>
<form>
<input type=“text”> <br>
<label> Sobrenome: </label>
</form>
</body>
</html>
Formulários

➢ Os formulários são utilizados para repassar dados para outras
páginas web
➢ Quando o formulário é enviado, os dados são empacotados e
enviados para um servidor web que processará os dados
através de scripts
➢ São páginas por exemplo, PHP, ASP, JSP...
➢ O atributo name identifica o dado quando ele for
empacotado e enviado através da web
➢ Por isso, cada campo do formulário deve ter este atributo
Atributo Name

<html>
<head>
</head>
<body>
<form>
<input type=“text” name=“nome”> <br>
<label> Sobrenome: </label>
<input type=“text” name=“sobrenome”>
</form>
</body>
</html>
Formulários

➢ No tipo de botões “radio” um outro atributo é
necessário
➢ Atributo value
➢ As opções de um conjunto de elementos
rádio são agrupadas através do atributo
name
➢ Apenas uma das opções com o mesmo valor
do atributo name pode ser selecionada
...
<label> Sexo: </label>
<input type=“radio” value=“Masculino” name=“sexo”>
Masculino <br>
<input type=“radio” value=“Feminino” name=“sexo”> Feminino
<br>
...
Continuando com os tipos de Input

...
<label> Login: </label>
<input type=“text” name=“login”><br>
<label> Senha: </label>
<input type=“password” name=“senha”>
...
Password

Do mesmo modo que os radio buttons,
nos checkbox, as opções de um
conjunto de elementos são agrupadas
através do atributo name.
...
<label>Onde estuda:</label> <br>
<input type="checkbox" name="onde_estuda" value="IEMA"> IEMA <br>
<input type="checkbox" name="onde_estuda" value="UEMA"> UEMA
<br>
<input type="checkbox" name="onde_estuda" value="IFMA"> IFMA <br>
<input type="checkbox" name="onde_estuda" value="Outro"> Outro...
...
Checkbox – Caixas de Seleção

➢ O formulário, ao ser criado, é com a intenção de enviar os dados
para algum processamento
➢ O tipo “submit” cria um botão para que os dados possam ser
enviados para o destino
Submit
...
<input type="checkbox" name="onde_estuda" value="UEMA"> UEMA <br>
<br><br>
<input type=“submit" name=“enviar" value=“enviar“>
...

➢ Mas enviar para onde?
➢ Há um atributo action a ser inserido na tag <form> quando o
formulário é criado que deve indicar para onde os dados serão
submetidos. Ao ser pressionado o botão do tipo submit, os dados
são enviados.
Submit
<form action=“processa_dados.html”>
...
<br><br>
</form>

➢ Mas enviar para onde?
➢ Outro atributo que é importante para o envio de dados é o
parâmetro method. Ele indica de que modo os dados do
formulário serão empacotados.
Submit
<form action=“processa_dados.html” method=“GET”>
...
<br><br>
</form>

➢ Os métodos existentes são GET e POST. Ambos cumprem a mesma
tarefa, mas de maneiras diferentes
➢ POST: empacota as variáveis e as envia de forma oculta para o
servidor
➢ GET: também empacota as variáveis, porém anexa os valores
antes de enviá-las para o servidor
http://www.teste.com.br/processa_dados.php?nome=Alba&sobrenome=
Lopes
http://www.cinemark.com.br/horarios/?cidade=22&cine1=681&filme1=&x
=22&y=12
Submit

➢O tipo “reset” faz com que o formulário volte ao estado
inicial (vazio ou com o valor que for especificado no
atributo value)
Reset
...
<input type="checkbox" name="onde_estuda" value="Outro"> Outro... <br><br>
<input type=“reset" name=“limpar" value=“limpar“>
</form>

➢ O tipo “image” tem a mesma função que o submit,
porém ao invés do botão, pode-se utilizar uma
imagem
➢ Mesmos atributos do elemento <img>
Image
...
<input type=“reset" name=“limpar" value=“limpar“>
<input type=“image" src=“imagens/botao_enviar.png” name=“enviar" alt=“enviar>
</form>

➢ O elemento <textarea> cria um elemento de texto com mais de
uma linha de digitação
Textarea
...
Observações<br>
<textarea name=“observacoes”></textarea>
</form>

➢ O elemento <textarea> cria um elemento de
texto com mais de uma linha de digitação
Textarea
...
Observações<br>
<textarea name=“observacoes” rows=“4” cols=“20”></textarea>
</form>

➢ Para iniciar o campo com algum texto, basta
colocar entre as tags de abertura e
fechamento
Textarea
Observações<br>
<textarea name=“observacoes” rows=“4” cols=“20”>Texto inicial qualquer...
</textarea>
</form>

 O elemento <select> cria um controle de menu na
página web
 <select> e </select> delimita o bloco de opções (cria a caixinha do menu)
 <option> e </option> cria cada uma das opções
Select

<form action=“processa_dados.html”
method=“GET”>
...
<select>
<option> Nova Cruz </option>
<option> Serrinha </option>
<option> Montanhas </option>
<option> Brejinho</option>
<option> Monte Alegre</option>
<option> Natal</option>
</select>
...
</form>
Select

• Os elementos <fieldset> e
<legend> criam uma borda
que contorna o formulário e
uma legenda,
respectivamente
Fieldset e Legend

Fieldset e Legend
<fieldset>
<legend>Exemplo de Formulário </legend>
...
<select>
<option> Nova Cruz </option>
<option> Serrinha </option>
<option> Montanhas </option>
<option> Brejinho</option>
<option> Monte Alegre</option>
<option> Natal</option>
</select>
...
</fieldset>
</form>

• Criar uma página processa_dados.html que exiba
uma mensagem:
• “Seus dados foram recebidos com sucesso!”
• Testar a submissão do formulário.
• A página processa_dados.html deve estar no
action do formulário criado
• Ao clicar no botão Enviar, a página deve ser
redirecionada para processa_dados.html
Fieldset e Legend

Fieldset e Legend

• Você foi contratado para
construir um site de uma
empresa de pesquisa de
opinião.
• A empresa está atualmente
trabalhando com opiniões
para os próximos candidatos
a prefeito da sua cidade.
• Você deve criar um
formulário para coletar os
dados da pesquisa como o
modelo seguinte:
Exercício de Fixação

• Crie uma página para ser
redirecionada quando o botão
de “Enviar” for pressionado.

 Nova versão de HTML
 T
rouxe inovações como validação automática
formulário
de campos de
 Inclui novos tipos
 email
 url
 Datas e horas
 Number
 tel
de campo (type)
Novidades de HTML 5 para formulários

 Atributo: required
 Define que um campo de deve ser obrigatoriamente preenchido antes
de realizar submit do form
 Ex: type=“text”
Novos tipos de dados e atributos

 Atributo: required
 Define que um campo de deve ser obrigatoriamente preenchido antes
de realizar submit do form
 Ex: type=“radio”

 Tipo: email
 Define que o campo receberá um valor referente a um e-mail e faz
validação
e-mail
caso o valor digitado não tenha todas as características de um

 Tipo: number
 Define que o valor do campo deve ser numérico

 Atributo: min
 Define que um valor mínimo para um campo numérico

 Atributo: max
 Define que um valor máximo para um campo numérico

 Tipo: date
 Formata o campo em estilo de data

 Atributo: placeholder
 Informa um texto inicial de auxílio de preenchimento de um campo

Campo de telefone
<label>Telefone</label>
<input type="tel" name="telefone" size="20" maxlength="20" />

Criar uma página HTML com um formulário de matrícula de alunos em uma escola
(matricula.html). Este formulário deve conter os seguintes campos:
Nome do Aluno (texto de máximo 50 caracteres)
Data de nascimento
E-mail
T
elefone (máximo 8 caractere numéricos + DDD + ramal)
Série (select de 1º ao ano do Ensino Médio)
T
urno preferencial (botão de rádio manhã / tarde / noite)
Atividades extra-curriculares (checkbox com teatro / música / ballet / pintura / judô / futebol)
T
odos os campos devem ser de preenchimento obrigatório.
Utilize legend e fieldset para organizar seu formulário
Ao clicar no botão Submit, a página deve ser direcionada para uma página de
confirmação (sucesso.html)
4º

PW00 - Programação Web html e estilo CSS.pdf

Recomendados

Recomendados

Mais conteúdo relacionado

Semelhante a PW00 - Programação Web html e estilo CSS.pdf

Semelhante a PW00 - Programação Web html e estilo CSS.pdf (20)

Mais de Silvano Oliveira

Mais de Silvano Oliveira (20)

PW00 - Programação Web html e estilo CSS.pdf