Tópicos Avançados em
Programação
Programação Web
Prof. André Pacheco
Prof. André Pacheco
Estrutura de um arquivo HTML
<HTML> sem CSS <HTML> com CSS
Prof. André Pacheco
CSS – Sintaxe
1. Como mostrado na Figura abaixo, uma regra CSS possui duas partes
principais: um seletor e uma ou mais declarações;
2. O seletor normalmente é um elemento HTML que se deseja mudar o
estilo;
3. Cada declaração consiste de uma propriedade e de um valor;
4. Cada propriedade tem um valor ou mais valores.
CSS – Exemplo
Prof. André Pacheco
Código-fonte: Resultado:
<html>
<head>
<style>
body {background-color: yellow;}
h1 {font-size: 30pt;}
h2 {color: blue;}
p {margin-left: 50px;}
</style>
</head>
<body>
<h1>O tamanho deste cabeçalho é de 30 pt</h1>
<h2>Esta cor é azul </h2>
<p>A margem esquerda deste parágrafo é de 50
pixels</p>
</body>
</html>
Prof. André Pacheco
CSS – Declaração de Comentários
Código-fonte:
/* Esta regra muda a cor e o tamanho dos parágrafos do site */
p{
color: red;
font-size: 16pt;
}
Prof. André Pacheco
CSS – Declaração de Comentários
• As cores podem ser representadas por código hexadecimal ou por
uma composição RGB.
Exemplos de códigos hex:
color: #FF0000 red; color: #000000 black;
color: #00FF00 green; color: #FFFFFF branco;
color: #0000FF blue;
Exemplos de composições:
color: rgb(255, 0, 0); color: rgb(0, 0, 0);
color: rgb(0, 255, 0); color: rgb(255, 255, 255);
color: rgb(0, 0, 255);
Prof. André Pacheco
CSS – Maneiras de Integrar o CSS ao HTML
1. Externamente (através de arquivos CSS separado);
2. Internamente (através de código-fonte CSS escrito diretamente no
arquivo HTML);
3. Na própria linha HTML (através do atributo HTML “style”).
CSS – Integrar o CSS ao HTML
Prof. André Pacheco
1. Externamente (através de arquivos CSS separado);
Código-fonte:
<!DOCTYPE html>
<html>
<head>
<link rel="stylesheet" type="text/css" href=“css/[Link]">
</head>
</html>
CSS – Integrar o CSS ao HTML
Prof. André Pacheco
2. Internamente (através de código-fonte CSS escrito
diretamente no arquivo HTML);
Código-fonte:
<!DOCTYPE html>
<html>
<head>
<style>
hr {color: #006400;}
p {margin-left: 20px;}
body {background-image: url("images/[Link]");}
</style>
</head>
</html>
CSS – Integrar o CSS ao HTML
Prof. André Pacheco
3. Na própria linha HTML (através do atributo HTML “style”).
Código-fonte:
<!DOCTYPE html>
<html>
<body>
<p style="color: navy; margin-left: 20px">Parágrafo inicial.</p>
<body>
</html>
Prof. André Pacheco
CSS – Diferença entre class e id
1. É possível associar uma regra CSS em um elemento HTML. Pode ser em
um valor de class ou em um valor de id do elemento.
2. Elemento HTML: <h1>, <p>, <body>...
3. class (podem ser utilizados mais de uma vez):
<p class=“paragrafoTexto”>Exemplo de primeiro texto</p>
<p class=“paragrafoTexto”>Exemplo de segundo texto</p>
4. id (não podem ser utilizado várias vezes é único):
<p id=“parag1”>Exemplo de terceiro texto</p>
Prof. André Pacheco
CSS – Diferença entre class e id
No CSS:
O class é representado pelo operador PONTO:
.<nome_da_regra> { ... }
O id é representado pelo operador CERQUILHA:
#<nome_da_regra> { ... }
Prof. André Pacheco
CSS – Diferença entre class e id
No HTML:
O class é representado pelo atributo class:
<p class=“paragrafoTexto”>Exemplo de primeiro texto</p>
<p class=“paragrafoTexto”>Exemplo de segundo texto</p>
O id é representado pelo atributo id:
<p id=“parag1”>Exemplo de terceiro texto</p>
Prof. André Pacheco
CSS – Principais propriedades
Exemplo de Tag Descrição
color Especifica a cor do texto.
background-color Especifica a cor do plano de fundo.
text-align Alinhamento do texto (center, left, right,
justify).
font-size Tamanho do texto (pt).
font-family Fonte do texto (Arial, Tahoma, etc).
width Comprimento do elemento (px, %).
height Altura do elemento (px, %).
Prof. André Pacheco
CSS – Principais propriedades
Exemplo de Tag Descrição
Maneira abreviada para as quatro bordas
border
(superior, inferior, esquerda, direita).
font-weight Escurecer a fonte (bold).
Espaçamentos entre o conteúdo e as bordas
padding
dos elementos.
Prof. André Pacheco
CSS – Estilizando um parágrafo – outras propriedades
p{
/* tamanho da altura de cada linha */
line-height: 3px;
/* tamanho do espaço entre cada letra */
letter-spacing: 3px;
/* tamanho do espaço entre cada palavra */
word-spacing: 5px;
/* tamanho da margem da primeira linha do texto */
text-indent: 30px;
}
Prof. André Pacheco
CSS – Estilizando bordas de tabelas – outras propriedades
body {
border-color: red;
border-style: solid;
border-width: 1px;
}
Consulte o site a seguir para saber mais propriedades CSS
[Link]
CSS – Exercício
Prof. André Pacheco
1. Cite na coluna da direita o efeito dos comandos CSS mostrados
na coluna da esquerda
Comando CSS Efeito
p { color: red; }
.textoInterno { font-size: 12pt; color: blue; }
#textoExterno {
font-family: Arial,
font-weight: bold; }
#divTopo { width: 90%;}
h2 { padding-top: 40px; }
CSS – Exercício
Prof. André Pacheco
1. RESPOSTAS
Comando CSS Efeito
p { color: red; } O conteúdo de todos os parágrafos HTML (tag <p>)
serão de cor vermelha.
.textoInterno { O conteúdo do elemento HTML de classe
font-size: 12pt; color: blue; } “textoInterno” terá tamanho 12 e cor azul.
#textoExterno { O conteúdo do elemento HTML com ID “textoExterno”
font-family: Arial, terá fonte do tipo Arial e estará em negrito.
font-weight: bold; }
#divTopo { width: 90%; } O elemento HTML com ID “divTopo” terá
comprimento de 90% da tela.
h2 { padding-top: 40px; } Todos os elementos h2 do HTML terão espaçamento
de topo de 40px;
CSS – Exercício
Prof. André Pacheco
2. Utilizando CSS, construa/adeque o site a seguir.
<h2>
<h3>; vermelho
<table>: tamanho da letra 16pt;
tipografia Tahoma; <th> azul; média
itálico; valor da média negrito
Cor do fundo: #f1f1f1
Prof. André Pacheco
CSS – Exercício
3. O link abaixo contém o capítulo de uma apostila interessante da
Caelum que explica diversos recursos avançados do CSS e também
conceitos de CSS 3. A sua tarefa é ler o capítulo e criar um site que
mostre 03 recursos apresentados no capítulo.
[Link]
javascript/css-avancado/
Prof. André Pacheco
HTML – Componentes de Formulários HTML
1. Formulários são usados para enviar e/ou receber dados do
servidor web;
2. Um formulário HTML pode conter os seguintes componentes: text
field, checkbox, radio-button, submit button, select list, textarea,
filedset, label. O HTML5 implementa outros tipos interessantes;
3. A tag que se utiliza para criar um formulário HTML é <form>
</form> deve estar dentro do <body> </body>.
Prof. André Pacheco
HTML – O formulário (form)
Código-fonte:
<!DOCTYPE html>
<html>
<body>
<form action=“[Link]”>
.
.
.
</form>
</body>
</html>
Prof. André Pacheco
HTML – Type TEXT
Código-fonte: Resultado:
<!DOCTYPE html>
<html>
<body>
<form>
<p>Primeiro nome: <input
type="text" name="primeiroNome">
</p>
<p>Último nome: <input
type="text" name="ultimoNome"></p>
</form>
</body>
</html>
Prof. André Pacheco
HTML – Type PASSWORD
Código-fonte: Resultado:
<!DOCTYPE html>
<html>
<body>
<form>
Digite sua senha: <input
type="password"
name="senha"><br/>
</form>
</body>
</html>
Prof. André Pacheco
HTML – Type RADIO
Código-fonte: Resultado:
<!DOCTYPE html>
<html>
<body>
<form>
<input type="radio"
name="genero" value="M">Masculino<br/>
<input type="radio"
name="genero" value="F">Feminino
</form>
</body>
</html>
Prof. André Pacheco
HTML – Type CHECKBOX
Código-fonte: Resultado:
<!DOCTYPE html>
<html>
<body>
<form>
<input type="checkbox" name="veiculo"
value="bicicleta">Eu tenho uma bicleta<br>
<input type="checkbox" name="veiculo"
value="carro">Eu tenho um carro<br>
<input type="checkbox" name="veiculo"
value="barco">Eu tenho um barco<br>
</form>
</body>
</html>
Prof. André Pacheco
HTML – Type SUBMIT
Código-fonte: Resultado:
<!DOCTYPE html>
<html>
<body>
<form name="input" action="html_form_action.asp"
method="get">
E-mail: <input type="text" name="email">
<input type="submit" value="Enviar!">
</form>
</body>
</html>
Prof. André Pacheco
HTML – Type BUTTON
Código-fonte: Resultado:
<!DOCTYPE html>
<html>
<body>
<form action="">
<input type="button" value="Clique-me">
</form>
</body>
</html>
Prof. André Pacheco
HTML – Type HIDDEN
Código-fonte: Resultado:
<!DOCTYPE html>
<html>
<body>
<form action="">
<input type=“hidden"
value=“cadastrarCarro">
</form>
</body>
</html>
Prof. André Pacheco
HTML – Type SELECT – lista drop-down
Código-fonte: Resultado:
<!DOCTYPE html>
<html>
<body>
<form action="">
<select name="universidades">
<option value="ufra">UFRA</option>
<option value="ufpa">UFPA</option>
<option value="uep">UEPA</option>
<option value="unama">UNAMA</option>
</select>
</form></body></html>
Prof. André Pacheco
HTML – Type TEXTAREA
Código-fonte: Resultado:
<!DOCTYPE html>
<html>
<body>
<form>
<textarea rows="10" cols="30">
HTML é uma linguagem de
marcação interpretada pelo navegador de
internet (browser).
</textarea>
</form>
</body>
</html>
Prof. André Pacheco
HTML – Type FIELDSET e LEGEND
Código-fonte: Resultado:
<!DOCTYPE html>
<html>
<body>
<form action="">
<fieldset>
<legend>Informações Pessoais:</legend>
<p>Nome: <input type="text" size="30"></p>
<p>E-mail: <input type="text" size="30"></p>
<p>Idade: <input type="text" size="5"></p>
</fieldset>
</form>
</body>
</html>
Prof. André Pacheco
HTML5 – Type DATALIST – parecido com SELECT
HTML5 adicionou vários tipos de input novos com o objetivo de facilitar
tarefas corriqueiras, que antes exigiam muitas linhas de código. Mas,
infelizmente, não funciona em todos os browsers:
• color • range
• datalist • search
• date • tel
• datetime • time
• datetime-local • url
• email • week
• month
• number
Prof. André Pacheco
HTML5 – Type DATALIST
Código-fonte: Resultado:
<!DOCTYPE html>
<html>
<body>
<form >
<input list="browsers">
<datalist id="browsers">
<option value="Internet Explorer">
<option value="Firefox">
<option value="Chrome"> (outros)
</datalist>
</form></body></html>
Compatilibidade: Não é suportada no Safari ou no IE9 (e anteriores).
Prof. André Pacheco
HTML5 – Type NUMBER
Código-fonte: Resultado:
<!DOCTYPE html>
<html>
<body>
<form>
Quantidade (entre 1 e 5):
<input type="number" name=“qtde"
min=“1” max=“5”>
</form>
</body></html>
Compatilibidade: Não é suportada no IE9 e anteriores. As “setinhas” podem
não funcionar em alguns browsers.
Prof. André Pacheco
HTML5 – Type DATE
Código-fonte: Resultado:
<!DOCTYPE html>
<html>
<body>
<form >
Aniversário:
<input type="date" name=“nasc">
</form>
</body>
</html>
Compatilibidade: Não é suportada no IE. Em alguns browsers, pode mostrar o selecionador de
data quando digita a data no campo. É possível colocar restrições (data máxima (max), data
mínima (min))
Prof. André Pacheco
HTML5 – Type COLOR
Código-fonte: Resultado:
<!DOCTYPE html>
<html>
<body>
<form >
Qual sua cor favorita?
<input type="color" name="favcolor"
value="#ff0000">
</form></body></html>
Compatilibidade: Não é suportada no IE.
Prof. André Pacheco
HTML5 – Type EMAIL
Código-fonte: Resultado:
<!DOCTYPE html>
<html>
<body>
<form>
E-mail:
<input type=“email” name=“email”>
</form>
</body></html>
Compatilibidade: Não é suportada no IE9 e anteriores.
Prof. André Pacheco
HTML5 – Atributo placeholder
Código-fonte: Resultado:
<!DOCTYPE html>
<html>
<body> <form>
<input type="text" name="nome"
placeholder="Nome"><br/><br/>
<input type="text" name="snome"
placeholder="Sobrenome"><br>
</form>
</body>html>
Compatilibidade: Não é suportada no IE9 e anteriores. Não é um novo tipo e
sim um novo atributo do input text.
Prof. André Pacheco
HTML – Exercício
1. Escreva o código HTML para o formulário a seguir
HTML Formulário e CSS – Exercícios
Prof. André Pacheco
2. Crie o formulário a
seguir em HTML(5)
e com CSS:
COR DE FUNDO
DO SITE:
LightBlue
COR DE FUNDO
DO BOTÃO:
SeaGreen