Programação para Web - HTML e CSS
Enviado por
VANESSAProgramação para Web - HTML e CSS
Enviado por
VANESSAPara verificar qual o caractere digitado, teremos que recorrer a tabela ASC para
verificar o valor da tecla e checar a condição. OBS: Cada tecla do teclado tem um
código correspondente.
No exemplo abaixo, a validação é feita para permitir que apenas caracteres
Esta apostila tem por objetivo mostrar de
numéricos sejam aceitos na entrada de dados.
modo fácil como criar websites utilizando
<label>Nome: </label> as linguagens HTML e CSS; e através do
<input type="text" name="nome" desenvolvimento de exemplos práticos, o
onkeydown="if (event.keyCode< 48 || event.keyCode > leitor conhecerá de forma resumida e
57){alert('Você só pode digitar números neste campo.'); return direta os principais recursos que envolve o
false;}" desenvolvimento de layouts web.
Apostila de
programação
para web:
HTML e CSS
Prof. Msc. Regilan Meira Silva
http://www.regilan.com.br
[email protected].
HORA CERTA NA BARRA DE STATUS DO NAVEGADOR
Sobre este material
Código JavaScript
Esta apostila tem como objetivo auxiliar os estudantes de escolas técnicas e nível
function iniciarrelogio(){
superior, na aprendizagem de criação de websites utilizando as linguagens HTML e CSS. Esta setTimeout('mostrarhora();', 1000);}
apostila não substitui os livros, sua finalidade é criar um roteiro resumido do ensino-
function mostrarhora(){
aprendizagem realizado em sala de aula.
var hora = new Date();
Este material foi construído a partir de slides elaborados para as minhas aulas no IFBA
h = hora.getHours();
Campus Ilhéus e também a partir apostilas, tutoriais, dicas e demais fontes de dados, obtidos m = hora.getMinutes();
a partir de pesquisas em sites de buscas na Internet. s = hora.getSeconds();
window.status = "Olá bem vindo! A hora certa é:" + h + ":"
Por fim, este material é distribuído de forma gratuita, sendo vedado qualquer tipo de + m + ":" + s;
comercialização.
setTimeout('mostrarhora();', 1000);}
No HTML:
<body onload="iniciarrelogio();" >
INPUT TEXT COM TEXTO PADRÃO E VALOR EM BRANCO QUANDO USUÁRIO
CLICAR
Podemos aplicar um efeito simples mas bastante útil para passar informações
ao usuário quando usarmos formulário.
Neste exemplo usaremos um input text, com um texto padrão quando ele
estiver inativo e em branco quando o usuário clicar no campo.
<label>Nome: </label>
<input type="text" name="nome" onblur="this.value='Digite o nome
completo';" onclick="this.value='';"/>
VERIFICANDO CARACTERES AO DIGITAR EM UMA INPUT TEXT
Podemos desenvolver código Javascript para realizar validações no momento
que o usuário digitar alguma caractere em uma input text. Para isso, usaremos o
método onkeydown.
onunload="alert('Obrigado pela visita, volte sempre!');">
Sumário
Podemos permitir que o usuário escolha a cor de fonte do site. Para isso iremos
criar uma página com três inputs do tipo radio. Em cada input usaremos o método
1. INTRODUÇÃO ........................................................................................................................ 3
onclick com o código javascript abaixo:
2. PRIMEIROS ELEMENTOS HTML: PARÁGRAFOS, CABEÇALHOS E LISTAS ............................. 5
COR DE FUNDO
3. O ELEMENTO <IMG> E NOÇÕES FUNDAMENTAIS DE CSS: FORMATAÇÃO DE FONTE E
BACKGROUND............................................................................................................................. 17
3.1. Imagens: <img> ............................................................................................................... 17
3.2. Noções de CSS: regras da sintaxe, formatação de textos e background ...................... 18
k="document.bgColor='blue'"> 3.3. Exercícios práticos .......................................................................................................... 24
Vermelho <input TYPE="radio" onClick="document.bgColor='red'"> 4. LINKS E TABELAS HTML E PROPRIEDADES CSS PARA FORMATAÇÃO DE BORDAS,
Amarelo <input TYPE="radio" onClick="document.bgColor='yellow'"> ESPAÇAMENTO E MARGENS. ..................................................................................................... 26
4.1. Links ................................................................................................................................ 26
JANELA POP-UP PROGRAMADA 4.2. Vídeo e áudio .................................................................................................................. 28
A função setTimeout("instruções",atraso) Executa uma ou mais instruções 4.3. Vídeo e áudio .................................................................................................................. 30
JavaScript após um período de atraso em milissegundos. 4.4. O elemento DIV .............................................................................................................. 32
A função retorna um número de identificação que pode ser passado como 4.5. O box-model CSS: margem, borda e espaçemento ....................................................... 33
argumento do método clearTimeout() para executar a operação imediatamente, 4.6. Exercícios práticos .......................................................................................................... 45
ignorando o tempo que falta. 5. ESTILIZAÇÃO DE TEXTOS, LISTAS E PSEUDO-ELEMENTOS ................................................. 48
5.1. Estilização de textos ....................................................................................................... 48
5.2. Estilização de listas ......................................................................................................... 52
A função clearTimeout(id) cancela a temporização de uma operação
setTimeout() cujo número de identificação foi passado como parâmetro, e faz com que 5.3. Pseudo-elementos .......................................................................................................... 53
as instruções do setTimeout() sejam interpretadas e executadas imediatamente. 5.4. Exercícios práticos .......................................................................................................... 56
6. POSICIONAMENTO E LAYOUT COM CSS ............................................................................ 59
6.1. Posicionamento .............................................................................................................. 59
No exemplo a seguir é criada uma função que abre uma janela e fecha a mesma
em 3 segundos. 6.2. Layout.............................................................................................................................. 63
6.3. Exercícios práticos .......................................................................................................... 66
function abrirJanela(){
janela = window.open("teste.html"); 7. FORMULÁRIOS WEB ........................................................................................................... 69
setTimeout('janela.close();', 3000); 7.1. Exercícios práticos .......................................................................................................... 77
}
8. JAVASCRIPT ......................................................................................................................... 80
8.1. Noções Gerais ................................................................................................................. 80
Para executa-la, usaremos o método onclick da tag body.
8.2. Sintaxe e estrutura ......................................................................................................... 84
8.3. Manipulando objetos HTML com JavaScript ................................................................. 89
8.4. Exemplos práticos ........................................................................................................... 95
1. INTRODUÇÃO ABRIR JANELA DO NAVEGADOR
A JANELA DO BROWSER é manipulável de várias formas através da linguagem
JavaScript. Pode-se alterar dinamicamente várias de suas características como
O sistema com o qual está construído a web se chama hipertexto e é um emaranhado
tamanho, aparência e posição. Para abrir uma janela usamos o método
de páginas conectadas com links. A web não só se limita a apresentar textos e links, também
window.open(). Veja exemplo:
pode nos oferecer imagens, vídeos, áudio e todo tipo de apresentações, chegando a ser o
serviço mais rico em meios da Internet. Por esta razão, para nos referir ao sistema que
implementa o web (hipertexto), foi acunhado um novo termo que é hipermídia, fazendo
window.open
referência a que o web permite conteúdos multimídia.
A construção de páginas web baseiam-se nas linguagem XHTML + CSS + JAVASCRIPT,
que são linguagens utilizadas para estruturar e formatar o conteúdo de um website. Quando
<body
vemos uma página web em nosso navegador, ou cliente web, ela parece ser uma só entidade, onload="window.open('teste.html','pagina','top=400,left=400,widt
mas não é assim. Uma página WEB é composta por uma infinidade de diferentes arquivos, h=50,height=50');" >
como são as imagens, os possíveis vídeos e o mais importante: o código fonte.
O código das páginas está escrito em uma linguagem chamada HTML, que indica JANELA DE ALERTA APÓS CARREGAMENTO OU SAÍDA DO NAVEGADOR
basicamente onde colocar cada texto, cada imagem ou cada vídeo e a forma que terão ao
serem colocados na página.
Cascading Style Sheets (ou simplesmente CSS) é uma linguagem de estilo utilizada para Podemos inserir uma mensagem de alerta ao carregar uma página ou quando o
definir a apresentação de documentos escritos em uma linguagem de marcação, como HTML usuário sair dela. Usamos os métodos onunload ou onload da tag body.
ou XML. Seu principal benefício é prover a separação entre o formato e o conteúdo de um
documento.Ao invés de colocar a formatação dentro do documento, o desenvolvedor cria um
link (ligação) para uma página que contém os estilos, procedendo de forma idêntica para todas <body
as páginas de um portal. Quando quiser alterar a aparência do portal basta portanto modificar onload="alert('Bem vindo');"
apenas um arquivo. Cabem a CSS todas as funções de apresentação de um documento e ao onunload="alert('Obrigado pela visita, volte sempre!');">
HTML todas as funções de marcação e estruturação de conteúdos. Uma página web é
composta então de CSS + HTML. MENSGEM DE CONFIRMAÇÃO
JavaScript é uma linguagem de programação criada principalmente para as funções de
validação de formulários no lado cliente (programa navegador) e interação com a página.
Para exibir uma mensagem de confirmação usamos a função
Assim, foi feita como uma linguagem de script. Javascript tem sintaxe semelhante à do
Java, mas é totalmente diferente no conceito e no uso. Podemos fazer com JavaScript as
seguintes operações: Veja exemplo:
Adicionar mensagens que rolam na tela ou alterar as mensagens na linha de
status do navegador.
function abrirJanela(){
Validar os conteúdos de um formulário e fazer cálculos. if (confirm("Tem certeza que deseja abrir esta página?"))
Exibir mensagens para o usuário, tanto como parte de um pagina da Web {
como em caixas de alertas. window.open("teste.html");
Fazer animações de imagens ou criar imagens que mudam quando você move }
o mouse sobre elas. }
Detectar o navegador em utilização e exibir conteúdo diferente para
navegadores diferentes.
<body
Detectar plug-ins instalados e notificar o usuário se um plug-ins foi exigido.
onload="alert('Bem vindo');"
Etc.
Esta apostila tem o objetivo de apresentar os recursos presentes na linguagem HTML,
CSS e Javascript para a criação de websites estáticos, sendo assim voltada a parte introdutória
dos estudos relacionados ao desenvolvimento para web.
8.4. Exemplos práticos
Neste tópico veremos alguns exemplos práticos em JavaScript:
Abrir uma janela popup
Janela de alerta após o carregamento /saída da página
Mensagem de Confirmação
Cor de fundo
Janela pop-up programada
Hora certa na barra de status
Input text com texto padrão e valor em branco quando usuário clicar
Verificando caracteres ao digitar em uma input text
2. PRIMEIROS ELEMENTOS HTML: PARÁGRAFOS, CABEÇALHOS E LISTAS
A finalidade da (X)HTML, desde sua invenção, é a de ser uma linguagem de marcação e
estruturação de hipertextos. Um documento é visto como um conjunto de eventos
concorrentes dependentes de tempo (áudio, vídeo, etc.), conectados por webs ou hiperlinks. O
HTML fornece a base para a construção de sistemas hipertexto padronizados, consistindo de
documentos que aplicam os padrões de maneira particular. Para escrever (X)HTML existem
elementos que são representados por tags ou etiquetas.
Tags são pares de sinais destinados a englobar conteúdos e têm finalidade informar ao
navegador sobre qual o tipo de conteúdo está nela contido.
Observe a marcação a seguir:
<tag inicial> Nonon OnoNonono </tag final>
A sintaxe geral da HTML segue o modelo mostrado acima, ou seja, uma marcação
indicando o início e outra mostrando o fim de um conteúdo. As marcas inicial e final são
chamadas de tags, que, além de delimitar conteúdos, informam a natureza desses conteúdos.
Um par de tags constitui um elemento.
Observe a marcação (X)HTML para um parágrafo:
O tipo Date é um tipo de objeto usado para representar datas. Para criar data
<p> Texto de um parágrafo </p> que represente a data e hora atuais, chame-o usando new, da forma.
aquiAgora = new Date();
Escrevem-se as tags de abertura e de fechamento entre os sinais: e usa-se
uma barra invertida \ logo após o sinal para indicar a tag de fechamento. Para utilizar as informações de um Date, invoca-se os seus métodos sobre o
Existem alguns elementos que são representados por uma tag. São os elementos objeto criado. Métodos podem ser invocados a partir de um objeto Date como no
vazios, assim chamados por não englobarem conteúdos. Tais elementos são empregados na exemplo a seguir:
marcação para acrescentar informação ao documento. Há um elemento (X)HTML destinado a dia = umDia.getDay();
causar uma quebra de linha em um texto, para forçar um quebra de linha existe o elemento hora = umDia.getHours();
ano = umDia.getYear();
sinal de fechamento da tag e o espaço em branco antes da mesma. document.writeln("Horário de Greenwich: " +
umDia.toGMTString());
Exemplo tag :
<p>Texto na primeira linha <br />Texto na segunda linha</p>
A tabela a seguir relaciona os métodos dos objetos do tipo Date, os tipos de
retorno (se houver) e suas ações.
Atributos são informações adicionais sobre um elemento HTML. Os atributos são
definidos dentro da tag de abertura do elemento. No exemplo a seguir, o atributo style é
utilizado para um elemento parágrafo.
Exemplo:
Parágrafo na cor vermelha </p>
O código HTML de cabeçalhos mostrado acima será apresentado assim no navegador:
Código JavaScript:
OBS: A função parseFloat converte uma string para um valor numérico com
casa decimal. Este é um cabeçalho de nível 1
Este é um cabeçalho de nível 2
<script language=JavaScript>
function soma() { Este é um cabeçalho de nível 3
a = document.f1.val1.value; Este é um cabeçalho de nível 4
b = document.f1.val2.value;
document.f1.val3.value = parseFloat(a) + parseFloat(b); Este é um cabeçalho de nível 5
} Este é um cabeçalho de nível 6
</script>
OBS: Quanto menor o número do cabeçalho, maior será o tamanho da fonte
Código HTML:
Para separar blocos de texto em paragráfos, usamos o elemento paragrafo: <p>.
<body> Exemplo:
<h1>Somador JavaScript</h1>
<form <body>
facilmente justificados à esquerda, ao centro ou à direita,
especificando tal justificação no interior da etiqueta por meio
de um atributo align. Um atributo não é mais do que um parâmetro
</form> incluído no interior da etiqueta que ajuda a definir o
</body> funcionamento da etiqueta de uma forma mais pessoal.
</p>
<p>
JavaScript possui várias funções e objetos nativos, que são procedimentos que
permitem realizar tarefas úteis no dia-dia, como conversão de tipos, cálculos com atributo align toma determinados valores que são escritos entre
datas, funções matemáticas, entre outras. aspas. Em algumas ocasiões necessitamos especificar alguns
atributos para o funcionamento correto da etiqueta. Em outros
Todas recebem parâmetros com os dados sobre os quais devem operar. Podem casos, o próprio navegador toma um valor definido por padrão.
ser chamadas de qualquer lugar. Por exemplo: Para o caso de align, o valor padrão é left.
</p>
</body>
A função acima converte uma String para a sua representação númerica.
Ignora qualquer coisa depois do ponto decimal ou depois de um caractere que não é
número.
Essa propriedade armazena os objetos Form em uma coleção ordenada de
propriedades (vetor). Todos os índices usados nos vetores em JavaScript iniciam a
2.3. Tags para listas: <ul>, <ol> a <li>
contagem em 0, portanto, document.forms[0], refere-se ao primeiro formulário de
uma página.
Existe três tipos de listas: Cada formulário pode então ser recuperado através de seu índice:
Listas numeradas, ou classificadas, geralmente marcadas com números; frm1 = document.forms[0];
Listas com marcadores, ou listas não classificadas; frm2 = document.forms[1];
Listas de glossário, nas quais cada item na lista tem um termo e uma definição para
ele, e que é organizada de forma que o termo esteja de alguma forma selecionado
Se houver, por exemplo, dentro de um bloco <form>...</form> 5 componentes,
ou destacado.
entre botões, campos de texto e caixas de seleção, existirão 5 objetos em JavaScript
As listas numeradas são listas nas quais cada item é numerado sequencialmente. Para dos tipos Text, Button e Select.
a lista numeradas utiliza-se a tag <ol>...</ol>. Para os itens lista utiliza-se a tag <li>...</li>.
Exemplo:
Independente do tipo de componente de formulário, eles podem ser acessados
na ordem em que aparecem no código, através da propriedade elements, de Form:
texto = document.forms[0].elements[1];
<body>
<p> Instalando o seu novo sistema operacional. </p>
<ol> Os vetores são necessários apenas quando um objeto não tem nome. Se tiver
<li> Insira o CD-ROM no seu drive de CD-ROM. </li> um nome (definido no código HTML, através do atributo NAME do descritor
<li> Selecione EXECUTAR. </li> correspondente), o ideal é usá-lo já que independe da ordem dos componentes, e
<li> Digite a letra para o drive do seu CD-ROM. </li> pode fornecer mais informações como por exemplo, o tipo do objeto
<li> Siga as instruções do programa de instalação. </li>
<li> Reinicie o seu computador depois de instalar todos os Exemplo de manipulação de objetos do HTML através do atributo name:
arquivos.</li> <form name="f1">
<li> Cruze os dedos </li> <input type=button name="botao1" value="Botão 1">
</ol> <input type=text name="campoTexto" value="Texto Muito Velho">
</body> </form>
Agora é possível ter acesso ao campo de textos em JavaScript usando nomes,
O código HTML da lista acima será apresentado assim no navegador: em vez de índices de vetores:
texto = document.f1.campoTexto;
textoVelho = texto.value; // lendo a propriedade value...
Instalando o seu novo sistema operacional texto.value = "Novo Texto";
1. Insira o CD-ROM no seu drive de CD-ROM.
O código do slide anterior também poderia ter sido escrito da forma, com os
2. Selecione EXECUTAR. mesmos resultados:
3. Digite a letra para o drive do seu CD-ROM. textoVelho = document.f1.campoTexto.value;
document.f1.campoTexto.value = "Novo Texto";
4. Siga as instruções do programa de instalação.
5. Reinicie o seu computador depois de instalar todos os A seguir veremos o exemplo para somar 2 números. O layout HTML terá a
arquivos. seguinte estrutura.
Exemplo break e continue: 6. Cruze os dedos
O atributo start, aplicado a tag <ol> indica o valor inicial da lista que é será sempre um
valor numérico.
Exemplo:
<li>
Insira o CD-ROM no seu drive de CD-ROM. </li>
<li>
Selecione EXECUTAR. </li>
<li>
Digite a letra para o drive do seu CD-ROM. </li>
<li>
Siga as instruções do programa de instalação. </li>
<li>
Reinicie o seu computador depois de instalar todos os
arquivos.</li>
<li> Cruze os dedos </li>
</ol>
Em JavaScript também temos a estrutura Array(vetores).O tipo Array representa
coleções de qualquer tipo, na forma de vetores ordenados e indexados. Para criar um
novo vetor em JavaScript, é preciso usar o operador new e o construtor Array(): As listas não classificadas, são listas nas quais cada item é representado por
marcadores (bullets). Para a lista não-classificadas utiliza-se a tag <ul>...</ul> e para os itens
direcao = new Array(4); lista utiliza-se a tag <li>...</li>. Exemplo:
<body>
Vetores começam em 0(zero) e terminam em length 1. length é a única <p> Coisas que eu gostaria de fazer de manhã. </p>
propriedade do tipo Array. Esta propriedade ontém um número com o comprimento <ul>
do vetor. Os elementos do vetor são acessíveis através de índices passados entre <li> Tomar uma xícara de café. </li>
colchetes ([ e ]). <li> Ver o sol nascer. </li>
<li> Ouvir o canto dos pássaros. </li>
Para acessar qualquer um dos elementos do vetor, por exemplo, usa-se o nome <li> Ouvir o vento assobiando nas árvores. </li>
da variável seguida do índice do elemento entre colchetes: <li> Amaldiçoar os barulhos de construção por trazerem o
mau humor.</li>
x = direcao[2]; // copia o conteúdo do terceiro elemento de
</ul>
direcao em x
</body>
8.3. Manipulando objetos HTML com JavaScript
O código HTML apresentado acima, será apresentado assim no navegador:
Todos os objetos criados em HTML estão automaticamente disponíveis em Coisas que eu gostaria de fazer de manhã.
JavaScript, mesmo que um nome não seja atribuído a eles.
Tomar uma xícara de café.
Por exemplo, se há três blocos <form>...</form> em uma página, há três
objetos do tipo Form no JavaScript Ver o sol nascer.
Ouvir o canto dos pássaros.
Se eles não tem nome, pode-se ter acesso a eles através da propriedade forms
Ouvir o vento assobiando nas árvores.
definida em document.
Amaldiçoar os barulhos de construção por trazerem o mau for: As estruturas for e while são usadas para repetições baseadas em condições. O
humor. bloco for contém de três parâmetros : uma inicialização, uma condição e um
incremento. A sintaxe é a seguinte:
Uma lista de glossário possue duas partes.
Um termo;
for(inicialização; condição; incremento) {
A definição do termo.
// instruções a serem realizadas enquanto condição for true
}
Para o termo usa-se a tag <dt> e para a definição do termo usa-se a tag <dd>. Toda
lista de glossário é indicada entre as tags <dl>...</dl>. Exemplo: Por exemplo:
for (i = 0; i < 10; i = i + 1) {
<body> }
<dl>
<dt> Manjericão </dt>
<dd> A primeira coisa realizada no bloco for é a inicialização e é feita uma vez
Anual. Pode crescer até quatro pés de altura, o apenas. A condição é testada cada vez que o loop é reiniciado. O incremento é
perfume de suas pequenas flores brancas é paradisíaco. realizado no final de cada loop.
</dd>
<dt> Orégano </dt> while: O mesmo que foi realizado com for pode ser realizado com uma estrutura
<dd> while, da forma:
Perene. Espalha raízes no subsolo e é difícil de ser
evitado quando se estabelece.
</dd> while(condição) {
</dl> // instruções a serem realizadas enquanto condição for true
</body> incremento;
}
O código HTML apresentado acima, será apresentado assim no navegador: Veja como fica o o exemplo de repetição mostrado através do comando for e
agora usando while:
Manjericão
i = 0
Anual. Pode crescer até quatro pés de altura, o perfume de while (i < 10) {
suas pequenas flores brancas é paradisíaco.
i++;
Orégano }
Perene. Espalha raízes no subsolo e é difícil de ser evitado
break e continue: Para sair a força de loops em cascata existem ainda as
quando se estabelece. instruções break e continue.
break : sai da estrutura de loops e prossegue com a instrução seguinte.
continue: deixa a execução atual do loop e reinicia com a passagem seguinte.
Quando o interpretador encontra os caracteres /*, ignora tudo o que
aparecer pela frente, inclusivecaracteres de nova-linha, até encontrar a
seqüência */.
Comentários:
/* Esta função retorna a
* média dos argumentos passados
*/
function media(a, b)
{
return (a + b)/2; // a e b devem ser números
}
Variáveis são usadas para armazenar valores temporários na maior parte das
instruções em JavaScript. Para definir uma variável, basta escolher um nome que não Figura 3. Site folha.com.br
seja uma palavra reservada e lhe atribuir um valor:
preco = 12.6;
2.4. Exercícios práticos
produto = "Livro";
Uma variável também pode ser declarada sem que receba um valor. Para isto é Questão 01. Com base nas TAGS já estudas, desenvolver o código HTML para a
necessário usar a palavra-chave var: estrutura abaixo. Observações: Utilize lista de definição para os termos e definição
var preco; das doenças listas
A linguagem não é rigorosa em relação a tipos de dados e portanto não é
preciso declarar os tipos das variáveis antes de usá-las, como ocorre em outras
linguagens. ABCDEFGHIJKLMNOPQRSTUVWXYZ
O tipo de dados é alocado no momento da inicialização, ou seja, se na definição I (1 - 7):
de uma variável ela receber uma string, JavaScript a tratará como string até que ela
receba um novo tipo através de outra atribuição Icterícia
Pigmentação amarelada da pele e mucosas devido ao aumento da concentração
O escopo ou alcance de uma variável depende do contexto onde é definida ou de bilirrubina no sangue. Pode ser acompanhada de sintomas como colúria (ver),
declarada. Uma variável declarada ou definida pela primeira vez dentro de um bloco prurido, etc. Associa-se a doenças hepáticas e da vesícula biliar, ou à hemólise
tem escopo local ao bloco e não existe fora dele. Variáveis declaradas ou definidas fora (ver).
de qualquer bloco são globais e são visíveis em todo o programa ou página HTML. Imunodeficiência
Distúrbio do sistema imunológico que se caracteriza por um defeito congênito
Exemplo variáveis globais: ou adquirido em um ou vários mecanismos que interferem na defesa normal de
um indivíduo perante infecções ou doenças tumorais.
<script> Impetigo
global = 3; // escopo: toda a pagina Infecção da pele e mucosas, produzida por uma bactéria chamada Estreptococo,
function func() { e caracterizada pela presença de lesões avermelhadas, com formação posterior
local = 5; // escopo: somente o bloco atual de bolhas que contém pus e que, ao romper-se, deixam uma crosta cor de mel.
global = 10; Pode ser transmitida por contato entre as pessoas, como em creches.
Imunização 8.2. Sintaxe e estrutura
Processo mediante o qual se adquire, de forma natural ou artificial, a capacidade
de defender-se perante uma determinada agressão bacteriana, viral ou Como a maior parte das linguagens de programação, o código JavaScript é
parasitária. O exemplo mais comum de imunização é a vacinação contra diversas expresso em formato texto. O texto do código pode representar instruções, grupos de
doenças (sarampo, coqueluche, gripe, etc.). instruções, organizadas em blocos e comentários. Dentro das instruções, pode-se
Inconsciência
manipular valores de diversos tipos, armazená-los em variáveis e realizar diversas de
Distúrbio no estado de alerta, no qual existe uma incapacidade de reconhecer e
reagir perante estímulos externos. Pode apresentar-se em tumores, infecções e operações com eles.
infartos do sistema nervoso central, assim como também em intoxicações por Instruções compostas (seqüências de instruções que devem ser tratadas como
substâncias endógenas ou exógenas.
um grupo) são agrupadas em blocos delimitados por chaves ({ e }), como mostrado
Incontinência
Incapacidade de controlar o esvaziamento da bexiga ou do reto. Como resultado abaixo:
produz-se perda de urina ou matéria fecal involuntariamente. As pessoas com function xis() {
incontinência podem apresentar um defeito adquirido ou congênito no var x = 0;
mecanismo esfincteriano, ou alguma anormalidade neurológica que as impeça de while (x < 10) {
reconhecer o estado de plenitude da bexiga ou reto e de promover esvaziamento x = x + 1;
destes quando for conveniente. . }
Infarto }
Morte de um tecido por irrigação sangüínea insuficiente. O exemplo mais
conhecido é o infarto do miocárdio, no qual se produz a obstrução das artérias
coronárias com conseqüente lesão irreversível do músculo cardíaco. Blocos são usados em JavaScript na definição de funções e estruturas de
controle de fluxo. Blocos são tratados como uma única instrução e podem ser
<< Anterior Próximo >>
definidos dentro de outros blocos.
No exemplo anterior, o bloco da função xis() contém duas instruções. A
segunda é um bloco (while) que contém uma instrução. As outras instruções não
Questão 02. Em outra página HTML, desenvolver um código HTML para a estrutura
pertencem a bloco algum.
abaixo:
As chaves que definem um bloco são caracteres separadores. Podem ser
LEI Nº 8.112, DE 11 DE DEZEMBRO DE colocadas em qualquer lugar após a declaração da estrutura que representam. Não
precisam estar na mesma linha. Pode haver qualquer número de caracteres
1990 terminadores de linha antes ou depois:
function media(a, b)
O PRESIDENTE DA REPÚBLICA;
{
return (a + b)/2;
Faço saber que o Congresso Nacional decreta e eu sanciono a seguinte lei:
}
TÍTULO II
Do Provimento, Vacância, Remoção, Redistribuição e Substituição Os formatos maiúsculo e minúsculo de um caractere são considerados
SEÇÃO I - Disposições Gerais caracteres distintos em JavaScript.
Art. 5. São requisitos básicos para investidura em cargo público: Por exemplo function, Function e FUNCTION são três nomes distintos e
tratados diferentemente em JavaScript.
I. a nacionalidade brasileira;
II. o gozo dos direitos políticos; Há duas formas de incluir comentários em JavaScript:
III. a quitação com as obrigações militares e eleitorais;
IV. o nível de escolaridade exigido para o exercício do cargo; Qualquer texto que aparece depois de duas barras (//) é ignorado pelo
V. a idade mínima de dezoito anos; interpretador até o final da linha.
VI. aptidão física e mental.ível do músculo cardíaco.
3. O ELEMENTO <IMG> E NOÇÕES FUNDAMENTAIS DE CSS: FORMATAÇÃO DE FONTE E A linguagem JavaScript permitem a captura de eventos disparados pelo usuário,
BACKGROUND como o arrasto de um mouse, o clique de um botão, etc. Quando ocorre um evento,
um procedimento de manuseio do evento é chamado. O que cada procedimento irá
fazer pode ser determinado pelo programador.
3.1. Imagens: <img>
Os atributos de eventos se aplicam a elementos HTML específicos e e sempre
Para inserir uma imagem em um documento web, utilizamos a tag <img>>. O
elemento <img> insere imagens que são apresentadas juntamente com os textos presente no JavaScript. Por exemplo:
documento. Um atributo SRC especificando o caminho físico onde encontra-se a imagem deve
estar presente, da seguinte forma:
<form>
<input type="button"
onclick="alert('oh não, você acionou o sistema de
Podemos referenciar imagens do nosso próprio servidor, ou imagens localizadas em autodestruição!')"
outro servidor. As imagens usadas na Web são armazenadas em arquivos com extensão *.gif, value="não aperte este botão">
*.jpg (ou *.jpeg), *.png. </form>
Outros atributos podem ser definidos sobre a origem, colocação e comportamento da
imagem: Como relação ao código acima, tudo o que aparece entre as aspas duplas do
atributo onclick é JavaScript. onclick é um atributo HTML, criado como extensão para
ALT: Indica um texto alternativo, descrevendo brevemente a imagem, que é
dar suporte ao evento de clicar o botão.
apresentado no lugar da imagem nos browsers texto, ou quando se desabilita o carregamento
de imagens em browsers gráficos. É recomendável que esteja sempre presente O código JavaScript que está em negrito será interpretado quando o usuário
apertar o botão com o mouse (onclick).
TITLE: O atributo title permite que seja configurado um texto que será exibido quando
o cursor do mouse estiver sobre a imagem. A instrução alert() cria uma janela de alerta (acima) com a mensagem passada
como parâmetro (entre parênteses e aspas no código em negrito).
WIDTH e HEIGHT: Atributos de dimensão (largura e altura respectivamente) da
imagem, em pixels. Uma das vantagens de se usar esses atributos é que o browser pode O código acima, quando executado no navegador aparecerá semelhante a
montar mais rapidamente as páginas, por saber de antemão o espaço que deverá ser imagem abaixo:
reservado a elas.
BORDER: Cria uma borda ao redor da imagem. Para retirar a borda, configure com
valor 0(zero). Quanto maior o valor, mais larga será a borda.
ALIGN: O atributo align permite alinhar a imagem com um texto.
LEFT: a figura é desenhada como uma imagem alinhada à esquerda, com o
texto fluindo ao seu redor.
RIGHT: a figura é desenhada como uma imagem alinhada à direita.
TOP: a parte superior do texto ao redor é alinhada com a parte superior da
imagem.
MIDDLE: a linha de base do texto ao redor é alinhada com a parte central da
imagem.
BOTTOM: A linha de base do texto ao redor é alinhada com a parte inferior da
imagem.
A forma mais prática de usar JavaScript é embutindo o código na página dentro 3.2. Noções de CSS: regras da sintaxe, formatação de textos e background
de um bloco delimitado pelos descritores HTML <script> e </script>. 3.2.1. Regras da sintaxe CSS
Pode haver vários blocos <script> em qualquer lugar da página. Folhas de estilo em cascata é um mecanismo simples para adicionar estilos (por
exemplo: fontes, cores, espaçamentos) aos documentos web. Segundo os idealizadores da
WEB, não cabe à HTML fornecer informações ao agente do usuário sobre a apresentação dos
<script> elementos. Por exemplo: cores de fontes, tamanho de textos, posicionamento e todo o
... instruções JavaScript ... aspecto visual de um documento não deve ser função da HTML. Cabem às CSS todas as
</script>
funções de apresentação de um documento. Sendo assim um website é formado por (X)HTML
+ CSS. Entre as vantagens de se utilizar CSS merece destacar:
O descritor <script> possui um atributo language que informa o tipo e versão da Facilidade de manutenção: definição de estilos que se apliquem a toda página
linguagem utilizada. O atributo language é necessário para incluir blocos em outras ou website. As mudanças são feitas de forma centralizada
linguagens como VBScript. É opcional para JavaScript: Novas possibilidades de apresentação visual: muitas funcionalidades
<script language="vbscript"> ...código em vbscript... </script> permitidas pela CSS não são suportadas pelo HTML
<script language="javascript"> ...código javascript... </script> Diminuição do tempo de download: não é necessário incluir tags de
<script> ... código formatação na página de forma que a leitura do código fonte fica mais fácil
Muitas vezes é necessário realizar um mesmo tipo de tarefa mais de uma vez.
Uma regra CSS é uma declaração que segue uma sintaxe própria e que define como
Para esse tipo de problema JavaScript permite que o programador crie funções que
será aplicado estilo a um ou mais elementos HTML . Um conjunto de regras CSS formam uma
podem ser chamadas de outras partes da página várias vezes.
Folha de Estilos. Uma regra CSS, na sua forma mais elementar, compõe-se de três partes: um
Se várias páginas usam as mesmas funções JavaScript definidas pelo autor da seletor, uma propriedade e um valor e tem a sintaxe conforme mostrado abaixo:
página, uma boa opção é colocá-las em um arquivo externo e importá-lo nas páginas seletor{propriedade:valor;}
que precisarem delas.
Seletor: é o elemento HTML identificado por sua tag, ou por uma classe, ou
deve ter descritores HTML, como <script>). Por exemplo, suponha que o arquivo por uma ID, ou etc., e para o qual a regra será válida (por exemplo: <p>, <h1>,
biblio.js possua o seguinte código JavaScript: <form>, .minhaclasse, etc...);
Propriedade: é o atributo do elemento HTML ao qual será aplicada a regra (por
exemplo: font, color, background, etc...).
function soma(a, b)
Valor: é a característica específica a ser assumida pela propriedade (por
{
exemplo: letra tipo arial, cor azul, fundo verde, etc...)
return a + b;
} Na sintaxe de uma regra CSS, escreve-se o seletor e a seguir a propriedade e valor
separados por dois pontos e entre chaves { }.
Quando mais de uma propriedade for definida na regra, deve-se usar ponto-e-vírgula
para separá-las.
Para carregar esta função e permitir que seja usada em outra página, usa-se o
atributo src do descritor <script>: Veja exemplos:
p {
font-size: 12px;
<script LANGUAGE=JavaScript SRC="biblio.js" >
}
resultado = soma(5, 6);
body
</script>
{
color: #000000; 8. JAVASCRIPT
background: #FFFFFF;
font-weight: bold; 8.1. Noções Gerais
}
JAVASCRIPT É UMA LINGUAGEM de programação interpretada criada em 1995,
No exemplo abaixo, o seletor é o corpo da página(body), a propriedade é a cor do como uma extensão do HTML para o browser Navigator 2.0. Hoje existem
texto e o valor é a cor azul. implementações JavaScript nos browsers dos principais fabricantes.
body { Programas em JavaScript são interpretados linha-por-linha enquanto o browser
color: #0000CC; carrega a página ou executa uma rotina.
}
JavaScript é baseada em objetos. Trata suas estruturas básicas, propriedades
do browser e os elementos de uma página HTML como objetos (entidades com
Se o valor for uma palavra composta, deverá estar entre aspas duplas " ", ou simples ': propriedades e comportamentos) e permite que sejam manipulados através de
h3 {
eventos do usuário programáveis, operadores e expressões.
font-family: "Comic Sans MS"
}
Com JavaScript pode-se fazer diversas coisas que não é possível com HTML:
Realizar operações matemáticas e computação.
Abrir janelas do browser, trocar informações entre janelas, manipular
Para maior legibilidade das folhas de estilo, é uma boa prática escrever cada
propriedades do browser como o histórico, barra de estado, plug-ins e
declaração (propriedade e valor) em linhas distintas. Veja exemplo:
applets.
Interagir com o conteúdo do documento, alterando propriedades da
p {text-align: right;color: #FF0000;}
página, dos elementos HTML e tratando toda a página como uma
estrutura de objetos.
Interagir com o usuário através do tratamento de eventos
Essa prática não é obrigatória! A regra abaixo tem o mesmo efeito da regra acima e
ambas as sintaxes estão corretas:
p { Para editar código JavaScript, é necesspario apenas um simples editor de texto,
text-align: right; como o Bloco de Notas do Windows.
color: #FF0000; }
Pode-se também usar um editor HTML. Alguns editores colocam cores ou dão
destaque ao código JavaScript. Outros até permitem a geração de código ou a
Uma regra CSS pode ser aplicada a vários seletores ao mesmo tempo. Para isso separe verificação de sintaxe.
cada seletor com uma vírgula. No exemplo abaixo agrupamos todos os elementos cabeçalho. A
cor de todos os cabeçalhos será verde.
Há três maneiras de incluir JavaScript em uma página Web:
h1, h2, h3, h4, h5, h6 { Dentro de blocos HTML <script> ... </ script > em várias partes da
color: #00FF00; página.
} Em um arquivo externo, importado pela página: para definir funções
que serão usadas por várias páginas de um site.
Dentro de descritores HTML sensíveis a eventos: para tratar eventos do
Nos exemplos já apresentados, usamos as próprias tags HTML como seletor. Seletores
usuário em links, botões e componentes de entrada de dados, durante a
CSS não estão restritos às tags, e podem ser diversas entidades da marcação ou a combinação
exibição da página.
delas. Seletores podem ser atributos do HTML e seus valores, combinações de tags, entre
outros.
Em um site com CSS é comum criar um objeto chamado classe e definir as regras CSS
azul claro com texto na cor preta. A outra célula da mesma linha deverá ter cor de independente de uma tag HTML.
fundo azul escuro
As classes podem ser aplicadas a qualquer elemento HTML. Podemos ainda aplicar
O campo UF, deverá vir com as siglas de todos os Estados Brasileiros para o usuário
estilos diferentes para o mesmo tipo de elemento do HTML, usando classes diferentes para
escolher
cada um deles.
O campo Est. Civil deverá vir com os seguintes dados: Solteiro, Casado, Viúvo e
Divorciado No CSS a sintaxe consiste na combinação do sinal de ponto (.) imediatamente seguido
O campo senha deverá ter os dados escondidos. Ou seja, ao digitar os valores para do nome da classe.No código HTML deverá ser criado um atributo para a classe (class)
Pode-se ainda usar o nome do elemento HTML para completar a grafia do seletor.
A sintaxe de uma classe é representada da seguinte forma:
.nome_da_classe{propriedade:valor;}
Ou:
elemento_html.nome_da_classe{propriedade:valor;}
O objetivo de criar uma classe é aplicar uma regra comum a somente alguns tipos em
diferentes seletores. No CSS a sintaxe consiste na combinação do sinal de ponto (.)
imediatamente seguido do nome da classe.
No código HTML deverá ser criado um atributo para a classe (class). Pode-se ainda usar
o nome do elemento HTML para completar a grafia do seletor. Veja exemplo a seguir:
formatacao1
{
color:#0099FF;
border-color:#000000;
border:thin;
}
p.formatacao2
{
color:#99CC33;
border-color:#00FF00;
border:medium;
}
OBS: Todas as imagens utilizadas na página acima estão em uma pasta compactada junto
com a atividade. No documento HTML as regras são aplicadas conforme abaixo:
formatação.</p>
> este parágrafo com a segunda
formatação. </p>
Outro seletor bastante utilizado é o seletor ID. Este seletor difere do seletor de classe, Questão 03. Construir um formulário em HTML e aplicar as regra css de forma que fique
por ser ÚNICO. Um seletor ID deve ser aplicado a UM e somente UM elemento HTML dentro semelhante a imagem abaixo:
do documento.
A sintaxe do seletor ID é semelhante a do seletor classe, a diferença é que usamos o
Veja a sintaxe abaixo:
#nome_do_id{propriedade:valor;}
No documento HTML, aplicamos o seletor ID através do atributo ID, conforme exemplo
abaixo:
sporte"> Parágrafos relativo a esportes.</p>
Você pode inserir comentários nas CSS para explicar seu código, e principalmente
ajudá-lo a relembrar de como você estruturou e qual a finalidade de partes importantes do
código.
Para adicionar comentários ao código CSS utilizamos a seguinte sintaxe:
/* COMENTÁRIOS DE UMA LINHA */
/* COMENTÁRIOS
DE MÚLTIPLAS
LINHAS */
3.2.2. Métodos de vinculação do CSS ao HTML
As folhas de estilos são vinculadas no documento HTML de três formas.
Estilo Externo (linkadas ou importadas);
Estilo Interno;
Estilo Inline.
Uma folha de estilo é dita externa, quando as regras CSS estão declaradas em um
documento a parte do documento HTML. A folha de estilo é um arquivo separado do arquivo
html e que tem a extensão .css
Uma folha de estilo externa é ideal para ser aplicada a várias páginas. Com uma folha Questão 04. Desenvolver o seguinte formulário de cadastro com as seguintes características.
de estilo externa , podemos alterar a aparência de um site inteiro mudando um arquivo
7.1. Exercícios práticos apenas (o arquivo da folha de estilo). Para incluir um arquivo externo .css a um documento
html, usamos a tag <link> entre as tags <head> </head> de acordo com a seguinte sintaxe:
Questão 01. O formulário a seguir é um formulário padrão para comentários em Blogs. Utilize
as tags de formulário para desenvolvê-lo conforme abaixo: <head>
</head>
Uma folha de estilo é dita interna, quando as regras CSS estão declaradas no próprio
documento HTML.
Uma folha de estilo interna, é ideal para ser aplicada a uma única página, dessa forma
podemos alterar a aparência de somente um documento.
No estilo interno as regras são declaradas na seção <head> do documento com a tag
de estilo <style> e são aplicadas no documento inteiro.
Veja a sintaxe abaixo:
<head>
<style type="text/css">
p{
color:#993366;
}
Questão 02. O formulário abaixo representa uma página de cadastro de um usuário em um
</style>
sistema interno de uma universidade. Utilize as tags de formulário para desenvolvê-lo
</head>
conforme abaixo:
Uma folha de estilo é dita inline, quando as regras CSS estão declaradas dentro da tag
do elemento HTML. No estilo inline as regras são aplicadas diretamente nas tags html e
modifica os atributos de uma tag específica no documento, com isto ele perde muitas das
vantagens de folhas de estilo pois mistura o conteúdo com a apresentação. Veja exemplo:
<p style="color:#0066CC;font-size:20px">
Regilan Meira
</p>
Como as definições de estilo podem ser feita de formas por métodos diferentes,
podem existir situações onde os estilos são conflitantes. Neste caso existe uma prevalência nos
métodos segundo a regra abaixo:
Prevalência em métodos de especificação:
1. Externo
2. Interno >
3. Inline
Prevalência na seleção de métodos: Alguns novos tipos de componentes de entrada surgiram com a HTML 5,
listaremos a seguir alguns dos principais:
1. Seletor
2. Class
3. ID
date:
3.2.3. Propriedades de fontes e background
As propriedades para as fontes, definem as características das letras que constituem os
textos dentro dos elementos HTML. Elas são representadas de acordo com a relação abaixo:
font-style: efeito de inclinação; ex.: normal, italic;
font-variant: transforma letras minúsculas em letras maiúsculas; onde as
anteriormente em maiúsculo ficarão um pouco maiores das que estavam em
minúsculo; ex.: normal, small-caps;
font-weight: intensidade (espessura) da fonte; ex.: 100..900,normal, bold, bolder
lighter, normal, bold, bolder, lighter. number:
font-size: tamanho da fonte; ex.: small, medium, large, smaller, larger, 10, 10%;
font-family lista com os nomes da fontes que devem ser utilizadas nos textos por
<input type="number" min="1" max="5">
font: atalho para especificar as propriedades anteriores em um único local.
range:
Exemplos:
h4 { font-style: italic; }
h2 { font-variant: small-caps; } <input type="range" min="0" max="10">
body { font-weight: bold; }
search:
h1 { font-size: 15pt; }
p { font-family: serif; }
h6 { font-family: Arial, Verdana, Helvetica; }
h5 { font: italic normal bold 14pt Arial; }
<input type="search" />
time:
A propriedade background define as características do fundo dos elementos HTML. Elas
são representadas de acordo com a relação abaixo:
color : cor do texto;
background-color : cor de fundo; ex.: cor, transparent;
Considere a marcação HTML: background-image : imagem que será utilizada como fundo do elemento; e as
propriedades a seguir poderão ser usadas;
background-attachment: define se a imagem ficará fixa ou se acompanhará a rolagem
<input type="submit" value="Enviar"> da área de apresentação; ex.: fixed,scroll;
background-repeat: como a imagem será repetida se o tamanho dela for menor que a
área de apresentação; ex.: no-repeat, repeat, repeat-x, repeat-y;
O código acima produz o seguinte resultado
background-position: posição inicial da imagem na área de apresentação; ex.: 10%
20%, 100 200, left, center, right, top,center, bottom;
background: atalho para especificar as propriedades anteriores em um único local.
Considere a marcação HTML abaixo: Exemplo:
a {
<form> color: #0000FF;
Nome:<br> <input type="text" size="53"> <br> background-color: #FFFF00;
Comentário:<br> <textarea name="identificador" rows="10" }
cols="50"> Texto da Caixa de Formulário body
textarea </textarea> {
<br> background-image: url(fundo.gif);
<input type="submit" value="Enviar"> background-repeat: no-repeat;
</form> background-attachment: scroll;
background-position: center top;
}
A marcação HTML apresentada no slide anterior produz o seguinte resultado: h3
{
background: #0000FF url(fundo.gif) no-repeat scroll center
top;
}
3.3. Exercícios práticos
Questão 01. Criar uma regra CSS para formatação de parágrafo abaixo com as
seguintes configurações:
Cor da fonte Amarela
Espessura da fonte: 900
Estilo Itálico
Caso seja necessário substituir o botão de submit por uma imagem que tenha a
Tipo de fonte Arial
Cor de fundo verde
Para a regra acima você deverá criá-la utilizando as três formas vistas em aula:
a. Método externo A tag <option> representa os itens da lista, que será visível assim que o usuário
b. Método interno clicar na lista
c. Método inline
Também é possível estabelecer uma escolha-padrão, através do atributo
Questão 02. Em relação às propriedades de background, criar uma classe para cada SELECTED
regra CSS abaixo: <option selected> creme </option>
a. Cor de fundo de uma página azul claro
b. Cor de fundo de um parágrafo em verde claro Com o atributo SIZE, escolhe-se quantos itens da lista serão mostrados (no
c. Colocar uma imagem de fundo que permita a repetição em qualquer estilo e
exemplo, SIZE=4):
que não acompanhe o deslocamento da página
d. Colocar uma imagem de fundo e repeti-la na vertical <select name="sabor" size=4>
e. Colocar uma imagem de fundo e não repeti-la
f. Colocar uma imagem de fundo sem repeti-la e centralizada
g. Formatar o fundo de uma página na cor amarela, uma figura de fundo, sem Veja o resultado da marcação acima:
repetição, centralizada e que acompanhe o deslocamento da página
Ao final crie uma página HTML com vários elementos (cabeçalho ou parágrafos) para
testar cada uma das regras acima.
Questão 03. Em relação às propriedades de fonte, criar um id para cada uma das
regras CSS abaixo:
a. Tipo de letra Arial e cor vermelha Com o atributo MULTIPLE, define-se que se pode selecionar mais de um item
b. Tipo de letra Times, com tamanho 22 e na cor verde (pressionando a tecla Shift do teclado enquanto se selecionam os itens):
c. Tipo de letra Comic Sans Serif, com tamanho 20, na cor azul e estilo itálico <select name="sabor" size=4 multiple>
d. Formatar a fonte de uma página na cor amarela, em negrito, de tamanho 14,
com espessura média e tipo de letra Verdana
A tag responsável pela criação do botão de envio é o <input> e os seus
atributos são:
Ao final crie uma página HTML com vários elementos (cabeçalho ou parágrafos) para
testar cada uma das regras acima. type:
o indica que a função desse botão e de enviar o
formulário.
o indica que os dados preenchidos serão todos
apagados e o formulário não será enviado.
o esse type não tem nenhuma função e
normalmente é utilizado em conjunto com um comportamento
de Javascript que será acionado pelo evento onClick.
text: texto que aparecerá no botão.
name= texto para identificar esse input.
Considere a marcação HTML abaixo: 4. LINKS E TABELAS HTML E PROPRIEDADES CSS PARA FORMATAÇÃO DE BORDAS,
ESPAÇAMENTO E MARGENS.
Digite um comentário: <br>
<form> Neste capítulo conheceremos como fazer a ligação de nossas páginas através de links,
<textarea name="identificador" rows="10" cols="50"> Texto organizar dados em tabelas e também o model-box do CSS(margem, borda e espaçamentos.
da Caixa de Formulário Um resumo dos elementos que iremos aprender:
textarea </textarea>
</form>
Html:
A marcação acima, produz o seguinte resultado:
Áudio e Vídeo: <embed />
Tabelas: <table> <tr> <td> </td> </tr></table>
Divs: <div> </div>
CSS
Margin: margem
Padding: espaçamento interno
Border: bordas
As tags <select>...</select> apresentam uma lista com diversos itens que 4.1. Links
podem ser selecionados.
É possível configurar essa tag para aceitar uma seleção simples ou múltiplas
Um link é uma conexão para uma página externa ao documento. Pode direcionar o
seleções.
visitante para outra página do mesmo site ou conduzí-lo à uma página externa ao site. Os links
Dentro de <select>...</select> fica as tags <option> responsáveis por têm sua sintaxe geral conforme a seguinte marcação abaixo:
apresentarem os itens da lista, e o atributo value guarda o valor quando o item é
selecionado. Regilan </a>
Veja a marcação HTML abaixo: A referência ao documento pode ser feita por:
<select name="sabor"> Caminho Absoluto: corresponde ao endereço completo do documento, utilizado
<option>abacaxi</option> quando os documentos estão em servidores diferentes.
<option>creme</option>
Exemplo:
<option>morango</option>
<option>chocolate</option> <a href = http://maquina/diretorio/pagina.html>
</select>
Caminho Relativo: quando o documento a ser acessado está no mesmo servidor que a
A marcação acima, produz o seguinte resultado: página atual
Exemplo:
Para criar um link com uma página utilizaremos a tag <a> e alguns atributos como href <input name="esporte" value="natacao" type="checkbox"
e target checked="checked">Natação<br>
<a href="endereço da página">texto que será o link</a>
Ex.: ão aceita múltiplas seleções como o checkbox, logo a
pergunta feita ao usuário e que será respondida através da seleção de um dos campos
<a href="c:\site\casa.html">Minha casa</a>
rádio só poderá ter uma resposta possível.
O atributo HREF determina a localização do arquivo da sua página ou do local da WEB Considere a marcação HTML abaixo:
a que o link se referencia. Você tem mais de 30 anos?<br/>
<form>
A URL (Uniforme Resource Locator) é o endereço do link. O texto entre as tags
Sim <input type="radio" name="cor" value="sim">
aparecerá sublinhado, indicando que é um link de hipertexto. Não <input type="radio" name="cor" value="nao">
O atributo TARGET refere-se a forma como o link será aberto: na mesma página ou em </form>
nova página no navegador.
Podemos colocar uma imagem e configurá-la como link para outra página. Para isso A marcação HTML do slide anterior, produz o seguinte resultado:
usaremos a tag <a> com a tag <img>
Veja exemplo:
<html>
<head><title>Instituto Federal da Bahia</title></head>
<body> Assim como acontece na checkbox, pode ser usado o atributo CHECKED, que
<h3>Clique na imagem abaixo para ir ao site do IFBahia
marca uma escolha inicial, isto é, se o usuário não escolher nenhuma opção, o
</h3>
formulário irá considerar a alternativa "pré-escolhida".
<a href="http://www.ifbahia.edu.br">
<img src="logomarca_ifbahia.png"/> A marcação TEXTAREA não utiliza o formato convencional INPUT TYPE="text"
</a> dos exemplos anteriores.
<br><br>
Ao contrário, uma marcação <TEXTAREA> delimita o seu início e a marcação
</body> </TEXTAREA> o seu fim.
</html>
<textarea> </textarea>
Uma âncora é um ponto de referência ou endereço que será acessado por um link.
O tamanho da caixa de texto é determinada pelos atributos de colunas (cols) e
Uma âncora é usada dentro do documento para marcar o início de uma seção do de linhas ( rows).
documento.
O atributo name é responsável por identificar esse campo.
Suponha que seu texto seja muito grande, o que tornaria trabalhoso para quem estiver
vendo a página conseguir se movimentar entre um tópico e outro. Então faça o seguinte:
etc...
</a>
Depois disso escreva a parte da página que você quer associar a esse Nome. Agora crie
usuário pode ter mais de uma resposta possível. um link para chegar até esta parte, usando a tag :
<a href="#nome">clique aqui</a>
Ao clicar na mensagem "Clique Aqui" de sua página , o usuário irá até a parte que você
nomeou.
O sinal de cerquilha/tralha (#) é necessário para a âncora, pois avisa ao browser para
Considere a marcação HTML abaixo: procurar o link no documento atual !!!
Esportes que você pratica:<br> 4.2. Vídeo e áudio
<input name="esporte" value="futebol"
type="checkbox">Futebol<br>
Existem vários modos de colocar um vídeo ou arquivo de áudio em seu site. A inserção
<input name="esporte" value="volei"
de vídeo depende bastante do tipo de arquivo de vídeo que temos para inserir em uma página
type="checkbox">Vôlei<br>
e se o plugin daquele formato está instalado no navegador.
<input name="esporte" value="natacao"
type="checkbox">Natação<br> Uma forma simples de adicionar Áudio e Vídeo é utilizando a tag <embed>
<input name="esporte" value="basquete"
type="checkbox">Basquete<br>
<input name="esporte" value="tenis"
type="checkbox">Tênis<br>
O HTML5 introduz o suporte de mídia embutido por meio dos elementos <audio> e
<input name="esporte" value="bocha"
<video>, oferecendo a possibilidade de incorporar facilmente mídia em documentos HTML.
type="checkbox">Atletismo<br>
Estes elementos são independentes da instalação de plug-ins e desde que o navegador
utilizado suporte HTML os arquivos de áudio e vídeo serão carregados sem a necessidade de
Note que o nome do campo (NAME) é o mesmo para toda a lista de valores.
instalação de plug-ins.
Além disso pode ser usado o atributo CHECKED, que marca uma escolha inicial,
isto é, se o usuário não escolher nenhuma opção, o formulário irá considerar a
alternativa "pré-escolhida". Para adicionar áudio ou vídeo utilizamos respectivamente as tags:
A marcação HTML apresentanda anteriormente produz o seguinte resultado
Estes elementos possuem os seguintes atributos:
controls: Mostra os controles padrão para o áudio/vídeo na página.
autoplay : Faz com que o áudio/vídeo reproduza automaticamente.
loop : Faz com que o áudio/vídeo repita automaticamente.
width e height: largura e altura do elemento
Caso você queira adicionar o atributo checked para o esporte natação, a
marcação HTML é:
Exemplo: O atributo name identifica o campo através de um nome
<video src="Inteligence Ep01.mp4" controls="controls" O atributo size representa a largura da caixa
O maxlength representa o número máximo de caracteres a serem
digitados
O atributo value representa o conteúdo da caixa de texto
Quando INPUT não apresenta atributos, é assumido que TYPE=TEXT (valor
padrão);
Veja a marcação HTML:
ou
A marcação acima produz o resultado:
Alguns sites como por exemplo o YouTube disponibiliza a incorporação de vídeos. No
caso do YouTube devemos exibir o código de incorporação para incluí-lo em nossa página
HTML. Configurando o atributo type com o valor password, a entrada de texto passa a
ter os caracteres escondidos por asteriscos, como se pode ver no exemplo:
Para isto basta clicar com o botão direito sobre o vídeo e depois em Ver código de
incorporação. Em seguida copiamos o código HTML exibido e colamos em nossa página HTML. Login: <input type=text name="login"><br>
Password: <input type=password name="senha">
A marcação acima produz o resultado:
Esse é um campo que permite ao usuário a escolha de várias opções diante de
uma série de alternativas.
7. FORMULÁRIOS WEB 4.3. Vídeo e áudio
Um dos recursos mais interessantes da linguagem Html é a possibilidade de Tabelas são utilizadas para apresentação de dados em forma de linhas e colunas.
criar formulários eletrônicos.
O elemento para se inserir uma tabela é <table>; para iniciar uma linha devemos
Usando um formulário o usuário pode interagir com o servidor, enviando dados introduzir a tag <tr> e para uma célula (alguns preferem dizer coluna) <td>.
que serão processados no servidor e posteriormente devolvidos ao cliente.
Todos estes comandos são encerrados como </table> , </tr> e </td> respectivamente.
Esses comandos são os principais responsáveis pela viabilização da troca de
Existe ainda o comando <th> </th> que permite criar uma coluna de título(cabeçalho
informações entre o cliente e o servidor. Eles podem ser usados em qualquer tipo de
da tabela).
atividade.
<table>
Os formulários são iniciados com a tag de abertura <form> e encerrados com a
<tr>
tag de fechamento </form>. <td> </td>
É muito importante que todo o conteúdo do corpo do formulário esteja entre </tr>
</table>
essas duas tags de abertura e fechamento.
<form> </form>
Estas tags definem que o conteúdo que está entre elas deve ser organizado na forma
Os formulários podem conter qualquer formatação - parágrafos, listas, tabelas,
de tabela. Para a formatação da tabela podem ser colocados junto da tag <TABLE> os
imagens - exceto outros formulários.
seguintes atributos abaixo:
Em especial, colocamos dentro da marcação de <FORM> as formatações para
campos de entrada de dados, que são três:
align=(left/center/right): alinhamento da tabela em relação ao documento.
<input>
bgcolor: define uma cor para o segundo plano da tabela.
<select>
border=n: coloca uma borda com espessura n (padrão: sem borda).
<textarea>
cellspacing=n: espaçamento entre as células
A forma mais simples de campo de entrada é a marcação text utilizando a tag cellpading=n: espaçamento entre a borda de uma célula e seu conteúdo (padrão:
<input>. 1).
cols=n: número de colunas de uma tabela. permite o carregamento mais rápido de
A tag <input> tem um atributo TYPE, ao qual atribuímos seis valores diferentes
tabela muito grandes.
para gerar seis tipos diferentes de entrada de dados:
width=n/n%: largura da tabela.
Text
Radio
Checkbox Para criar uma linha em uma tabela, utilizamos a tag: <tr> ... </tr>. A abertura de uma linha da
Password tabela, possui as seguintes opções:
Hidden align=(left/center/right): alinhamento horizontal do conteúdo, tornando-se padrão
File para toda linha.
valign=(top/middle/bottom/baseline): alinhamento vertical do conteúdo, tornando-se
padrão para toda linha.
Além do atributo type, a tag <input> apresenta os seguintes atributos: bgcolor: define uma cor para o segundo plano para a linha.
<tr> </tr>
Uma tabela é formadas por linhas que são representadas pela tag <tr> e por células
(colunas) que são representadas pelas tags <th> ou <td>
A tag <th> ... <th> cria uma célula/coluna de título.
A tag <td> ... <td> é utilizada para o conteúdo de uma célula.
As tags <th> e <td> também possuem os mesmos atributos da tag table: align,border,width,
bgcolor, etc.
<td> </td>
<th> </th>
Exemplo de código de criação de tabela com 2 linhas e 3 colunas:
<table border=1>
<tr>
<td>primeira coluna </td>
<td>segunda coluna </td>
<td>terceira coluna </td>
</tr>
<tr>
<td> primeira coluna</td>
<td>segunda coluna </td>
<td>terceira coluna </td>
<tr>
</table>
É possível englobar colunas e linhas, através dos atributos colspan (para colunas) e
rowspan (para linhas). Estes atributos são muito importantes pois nos possibilitam remodelar a
disposição das células dentro da tabela.
Veja exemplo:
<table border=2 cellpadding=2>
<tr>
<td colspan=2>exemplo do uso do colspan
</td>
<tr>
<td>célula 1</td> <td>célula 2
</td>
</tr>
</table>
b)
Apesar dos atributos HTML, presente nos elementos para criação de tabelas, estarem
disponíveis para formatação de cores, bordas, espaçamento, largura, altura e outros, a
recomendação é que TODAS AS FORMATAÇÕES POSSÍVEIS SEJAM REALIZADAS ATRAVÉS DO
CSS.
Veremos ainda neste capítulo os elemtnos CSS para formatação de bordas, margens e
espaçamentos e que podem ser aplicadas a formatação de tabelas.
4.4. O elemento DIV
A tag DIV define uma divisão ou um seção em um documento HTML.
DIV na verdade não causa nenhuma diferença visual no código. Ele é considerado um
"container", ou seja, uma espécie de "caixa" não visual que você pode, através de script,
alterar o conteúdo dele, alterando o código HTML dinamicamente. Ou então é usado para
aplicar um estilo (css) em todo o bloco HTML contido dentro do
Os sites atuais estão sendo produzidos, com a utilização de uma coleção de mais e
mais elementos div, em substituição as antigas tabelas que eram usadas para criar o layout de
c) um site. Para cada div é criada uma classe ou id no código css que contém o estilo de uma
determinada div no documento HTML. Nos próximos capítulos estudaremos com criar layouts
com DIVs e regras CSS.
#le As caixas podem conter ou estar contidas dentro de outras caixas. As caixas CSS são
{ constituídas por 04 (quatro) áreas retangulares, que se desenvolvem de dentro para fora, na
width:200px; ordem listada abaixo:
height:500px;
background-color:#F00; conteúdo;
} espaçamentos (padding);
bordas (border);
margens (margin).
O centro e a lateral direita possui a seguinte codificação CSS
#centro
{
width:400px;
height:500px;
background-color:#0FF;
position:absolute;
top:160px;
left:200px;
}
#ld
{
width:200px;
height:500px;
background-color:#630;
position:absolute;
top:160px;
left:600px;
}
Resultado:
Neste momento, vale ressaltar sobre as unidades de medidas que podem ser relativas
ou absolutas.
Unidades absolutas são unidades de medida de comprimento definidas nos sistemas
de medidas pela física , a citar centímetros, milímetros, polegadas, etc. São indicadas para
serem usadas quando as mídias de exibição são conhecidas. Como um navegador apresenta
um documento de acordo com as configurações do monitor do usuário, este tipo de medida é
inviável já que o desenvolvedor não tem como saber antecipadamente ou controlar as
configurações.
Exemplos de medidas absolutas são:
in = polegada Em nosso exemplo construiremos um layout 3 colunas. A estrutura HTML para
cm = centímetro definir as seções do layout consistirá de divs e para cada div será definida regras CSS
mm = milímetro para posiciona-las.
pt = ponto
<div id="containerGeral">
<div id="cabecalho"> </div>
<div id="menu"> </div>
div { margin: 2.5cm; } <div id="le"> </div>
h4 { margin: 2mm; } <div id="centro"> </div>
p { font-size: 10pt; } <div id="ld"> </div>
.classe { padding: 3pt; } <div id="rodape"> </div>
hr { width: 14pt; } </div>
h1 { margin: 1in; }
O código do containerGeral e do cabeçalho ficará assim:
#containerGeral
As unidades de medida relativas são aquelas que tomam como base um valor de
{
referência e são mais apropriadas para ajustes de uso em diferentes tipos de mídia. As quatro
position:relative;
unidades de medida relativa são:
width:800px;
em = 1em é igual ao tamanho de fonte definido para o elemento em questão height:auto;
border:1px solid #000;
ex = 1ex é igual a altura da letra xis minúscula(x) da fonte definida
margin:0 auto;
px = ao dispositivo (midia) de exibição;
}
%: ... a uma medida previamente definida.
#cabecalho
Exemplos: {
width:800px;
div { margin: 1.5em; } height:130px;
h4 { margin: 2ex; } background-color:#06F;
p { font-size: 14px; } }
.classe { padding: 90%; }
h1 { line-height: 1.2em }
O containerGeral deverá ter uma regra de posicionamento. Usaremos o
p { font-size: 10px } posicionamento do fluxo do documento, posicionamento relative.
A regra margin: 0 auto; configurará a margem superior e inferior para o valor 0
Voltando ao modelo de caixa(box-model), uma box é constituída por partes distintas: e a esquerda e direita para automática, neste caso a página ficará centralizada.
A margin é invisível, não possui cor de fundo e não esconde elementos. O menu, rodapé e lateral esquerda ficará assim:
A border permite visualizar os limites visíveis da box. #menu,#rodape
O padding define o espaço entre o conteúdo e o border. {
width:800px;
height:30px;
A única parte visível da box apresentada na imagem seria o border, portanto toda a
background-color:#0F6;
zona a tracejado não estaria visível. Veja exemplo do código CSS de uma classe chamada .box: }
.box
{
width: 100px;
</div> height: 50px;
border: 10px solid #ccc;
padding: 20px;
Se definirmos uma regra CSS position: relative para a div1 e position: absolute margin: 20px;
para a div2, a partir de agora a div2 se posicionará absolutamente em relação a div1, }
não mais em relação ao body da página.
Dessa forma ao configurarmos as propriedades: left, top, bottom e right, elas Agora o código HTML:
serão configuradas em relação a div1.
<p class="box">CONTEÚDO</p>
O esquema de posicionamento FIXO, posiciona um elemento fixadamente na
página em relação a janela, ou seja, independente de a pagina conter um scroll ou não,
o elemento sempre ficará visível ao usuário em relação as medidas definidas.
O posicionamento fixo é definido pelo valor fixed da propriedade position.
Assim: elemento {position:fixed }.
Da mesma forma que o posicionamento relativo e absoluto, deverá também ser
configurado as propriedades left,right,top e bottom.
6.2. Layout
O primeiro passo para construir um layout css é definir como será o design da
página. O design de uma página pode ser feito em ferramentas(Fireworks, CorelDrawn,
Photoshop) apropriadas pra criação de design de páginas WEB ou mesmo em uma
folha de papel.
A PROPRIEDADE PARA MARGENS, define um valor para espessura das margens dos
elementos HTML.
As propriedades para margens são as listadas abaixo:
margin-top: define a margem superior;
margin-right: define a margem direita;
margin-bottom: define a margem inferior;
margin-left: define a margem esquerda;
margin: maneira abreviada para todas as margens
Os valores possíveis para as propriedades das margens são:
auto: valor default da margem
length: uma medida reconhecida pelas CSS (px, pt, em, cm, ...)
%: porcentagem da largura do elemento pai
Exemplos: Especificando position:relative podemos utilizar top ou bottom, right ou left
.box
para posicionar os elementos na página em relação ao lugar que ele ocuparia no fluxo
{ do documento. Veja a regra CSS para a posição relative para o exemplo apresentado
margin-top: 20px; anteriormente.
margin-right: 30mm;
margin-bottom: 5pt;
margin-left: 3in; #pos1{
} position:relative;
top:100px;
left:0px;}
São válidos valores negativos para margem, com o objetivo de sobrepor um elemento.
É possível também declarar de forma única a ordem das margens: superior, direita, inferior e #pos2{
esquerda. position:relative;
top:100px;
A PROPRIEDADE MARGIN admite a sintaxe abreviada, a qual consiste em declarar uma
left:0px;}
lista de valores separados por um espaço, conforme mostrado.
Há quatro modos de se declarar abreviadamente as margens:
O que será exibido com as regras acima?
margin: valor1 - as 4 margens terão valor1;
Quando foi utilizado o posicionamento absoluto, as imagens apareceram
margin: valor1 , valor2 - margem superior e inferior terão valor1 - margem direita
sobrepostas, já que elas estavam posicionadas a 0px do elemento que as contém(o
e esquerda terão valor2
body).
margin: valor1 , valor2 , valor3 - margem superior terá valor1 - margem direita e
esquerda terão valor2 - margem inferior terá valor3 Com o posicionamento relativo, a primeira imagem aparecerá a 0(zero) px do
margin: valor1 , valor2 , valor3 , valor4 - margens superior, direita, inferior e elemento anterior(body), e a segunda imagem aparecerá a 0px do elemento
esquerda nesta ordem. anterior(imagem1).
Exemplos da propriedade margin com a sintaxe abreviada:
.box
{
margin: 20px /* margem de 20px nos quatro lados */
margin: 15px 10px /* margem superior e inferior de 15px e
direita e esquerda de 10px */
margin: 15px 5px 10px /* margem superior 5px, direita e
esquerda 5px e inferior de 10px */
margin: 15px 5px 10px 20px /* margem superior 5px, direita
5px, inferior 10px e esquerda de 20px */
}
A PROPRIEDADE PARA ESPAÇAMENTOS, define um valor para os espaçamentos entre Considere a seguinte marcação HTML:
o conteúdo e as bordas dos elementos HTML.
As propriedades para margens são as listadas abaixo:
<div id="div1">
padding-top: define a espaçamento superior; <div id="div2"></div>
padding-right: define a espaçamento direita;
padding-bottom: define a espaçamento inferior;
padding-left: define a espaçamento esquerda;
padding: maneira abreviada para todas os espaçamentos
Os valores possíveis para as propriedades dos espaçamentos são:
auto: valor default do espaçamento
length: uma medida reconhecida pelas CSS (px, pt, em, cm, ...)
%: porcentagem da largura do elemento pai
Exemplos:
.box
Para que as imagens não sejam sobrepostas, podemos alterar o código CSS
{
para a seguinte forma:
padding-top: 20px;
padding-right: 30px;
padding-bottom: 5px;
#pos2{ padding-left: 10px;
position:absolute; }
top:100px;
left:143px;}
A propriedade padding também admite a sintaxe abreviada, a qual consiste em
declarar uma lista de valores separados por um espaço. Há quatro modos de se declarar
Como a imagem apresenta largura de 143px, o posicionamento a esquerda da abreviadamente os espaçamentos:
segunda imagem estará configurado com 143px, de forma que aparecerá logo em
seguida a apresentação da primeira imagem. padding: valor1 - os 4 espaçamentos terão valor1;
padding : valor1 , valor2 - espaçamento superior e inferior terão valor1 -
espaçamento direita e esquerda terão valor2
padding : valor1 , valor2 , valor3 - espaçamento superior terá valor1 -
espaçamento direita e esquerda terão valor2 - espaçamento inferior terá valor3
padding : valor1 , valor2 , valor3 , valor4 - espaçamento superior, direita, inferior e
esquerda nesta ordem.
Exemplos da propriedade padding com a sintaxe abreviada:
.box
{
padding: 20px /* espaçamento de 20px nos quatro lados */
padding : 15px 10px /* espaçamento superior e inferior de
15px e direita e esquerda de 10px */
padding : 15px 5px 10px /* espaçamento superior 5px,
direita e esquerda 5px e inferior de 10px */
padding : 15px 5px 10px 20px /* espaçamento superior 5px, Podemos também alterar as referências do elemento posicionado, mudando as
direita 5px, inferior 10px e esquerda de 20px */ propriedades para right(direita) e bottom (inferior). Dessa forma, podemos fazer
} combinações para os quatro cantos da tela.
Qualquer unidade de medida CSS pode ser usada para posicionar, inclusive
A PROPRIEDADE BORDER define a espessura, a cor e o estilo das bordas do box. As
medidas relativas como são aquelas expressas em porcentagens.
propriedades para as bordas são as listadas abaixo:
Considere a marcação HTML a seguir. Para marcação HTML foi desenvolvida
border-width: espessura da borda
duas regras CSS.
border-style: estilo da borda
border-color: cor da borda Marcação HTML
Cada uma destas três características da borda pode ser declarada separadamente para
cada lado do box, conforme o slide a seguir: <img id="pos2" src="posicionamento.png"/>
Regra CSS
Borda superior:
#pos1
border-top-width: espessura da borda superior {position:absolute;
border-top-style: estilo da borda superior top:100px;
border-top-color: cor da borda superior left:0px;
}
Borda direita:
border-right-width: espessura da borda direita
#pos2{
border-right-style: estilo da borda direita position:absolute;
border-right-color: cor da borda direita top:100px;
left:0px;
Borda inferior:
}
border-bottom-width: espessura da borda inferior
border-bottom-style: estilo da borda inferior
O que será exibido com as regras acima?
border-bottom-color: cor da borda inferior
Borda esquerda:
Como as duas id criadas possuem posicionamento absoluto, e o
border-left-width: espessura da borda esquerda
posicionamento a esquerda é de 100px, as imagens se sobrepõem, ou seja são
border-left-style: estilo da borda esquerda
posicionadas uma em cima da outra.
border-left-color: cor da borda esquerda
Podemos ainda abreviar a propriedade border da seguinte forma:
border-top: maneira abreviada para todas as propriedades da borda superior
border-right: maneira abreviada para todas as propriedades da borda direita
border-bottom: maneira abreviada para todas as propriedades da borda inferior
border-left: maneira abreviada para todas as propriedades da borda esquerda
border: maneira abreviada para todas as quatro bordas
6. POSICIONAMENTO E LAYOUT COM CSS Os valores possíveis para a propriedade border são:
color:
6.1. Posicionamento código hexadecimal: #FFFFFF
código rgb: rgb(255,235,0)
nome da cor: red, blue, green...etc
Existem quatro tipos de posicionamento em CSS: estático, relativo, absoluto e width:
fixo. A propriedade CSS que possibilita posicionar um elemento qualquer é a
propriedade positivon. Esta propriedade deverá receber um dos valores referentes aos thin: borda fina
quatro tipo de posicionamento CSS. medium: borda média
thick: borda grossa
O posicionamento estático é definido pelo valor static da propriedade position. length: uma medida reconhecida pelas CSS (px, pt, em, cm, ...)
Assim: elemento { position: static }.
Um elemento posicionado estaticamente segue o fluxo normal dos elementos
da página, ou seja, se posiciona abaixo do elemento imediatamente anterior e acima Podemos aplicar oito estilos(style) para bordas ou declarar o valor none para definir a
do imediatamente posterior, quando nenhum destes está posicionado de outra forma ausência de bordas. O estilo de cada uma é apresentado na imagem abaixo.
que não a estática.
Como o posicionamento estático é o padrão, não é necessário escrever regras
para esse tipo de posicionamento.
O posicionamento absoluto é definido pelo valor absolute da propriedade
position. Assim: elemento{ position:absolute }
Quando um elemento é posicionado absolutamente, sua posição é computada
posição é computada com relação ao elemento body.
Na regra CSS, ao definir a posição absolute utilizamos as propriedades (left )
que define o quanto a imagem dista da margem esquerda e a propriedade (top) que
define o quanto a imagem dista do topo.
img
{
position:absolute;
top:100px;
left:100px;
}
Exemplos da propriedade border: Cor do texto vermelho
Fonte verdana de tamanho 12px
A borda inferior os itens do da lista serão traçadas, de espessura 1px e cor vermelha;
p {
border-style: solid; Após criar a regra acima, você deverá criar outra regra css
border-bottom-style: dashed; (efeito hover) de forma que ao passar o mouse sobre os
border-color:#00FF33 elementos da lista, a imagem de marcador da lista, a borda
border-top-color:#FF00BB inferior o texto estejam na cor verde.
border-bottom-width: 10px;
border-top-width: 0px; border-right-width: 0px; Para testar a regra acima, crie uma lista não numerada com
border-left-width: 0px; 5 itens: Exemplo:
}
1 Kg de Batatas
2 Ovos
Podemos declarar todas as três propriedades das bordas em uma regra única. A
1 Xícara de Leite
sintaxe geral é:
200 gramas de farinha de trigo
border: size style color 1 colher de sopa de manteiga
Exemplo:
p { border: thick groove #FF0033 } Questão 06: O site Globo.Com utiliza um efeito hover para adicionar uma borda a uma
imagem e sublinhar o texto relativo a um link que irá direcionar a uma outra página.
A seguir será apresentado uma série de efeitos em cabeçalhos que podem ser
Veja exemplo:
realizados através da configuração de bordas.
BORDA SIMPLES:
h1
{
border-bottom-style:solid;
border-bottom-width:1px;
border-bottom-color:#009966;
}
BORDA DUPLA:
h1
{
border-bottom-style:solid;
border-bottom-width:1px; Utilizando o exemplo acima, crie uma página HTML que produza o mesmo efeito
border-bottom-color:#009966;
apresentado.
BORDAS COM ESTILOS DIFERENTES E FUNDO: 5.4. Exercícios práticos
h1
{ Questão 01. Criar uma regra CSS para formatação de parágrafos utilizando as
background-color:#CCCCCC; seguintes configurações:
border-bottom-style:solid;
border-bottom-width:2px; Borda Esquerda: Espessura de 20em, na cor verde e estilo solid.
border-bottom-color:#009966; Borda Direita: Espessura de 20em, na cor vermelha e estilo solid.
border-top-style:dotted; Largura: 60%
border-top-width:2px; Altura: 400px;
border-top-color:#009966; Tamanho da fonte: 12px;
} Espaçamento entre letras: 3em;
Espaçamento entre palavras: 4ex;
Altura dos blocos: 3em;
Alinhamento do texto: justificado
Tipo de fonte Verdana
Endentação do texto: 25px;
BORDAS COM IMAGEM DE FUNDO: Por fim adicione aos pseudo-elementos :firstletter e :firstline, as
seguintes configurações:
h3 :firstletter
{ Tamanho da Fonte: 36px
border-bottom-style:solid; Cor da fonte: azul
border-bottom-width:2px; Decoração do texto: overline
border-bottom-color:#999999;
padding-left:25px; :firstline
background-image:url(square_arrow.gif); Decoração do texto: underline
background-repeat:no-repeat; Capitalização do texto: todos os caracteres em caixa alta
}
Questão 02. Criar regras css para os seguintes links:
a) Link em estado inicial sem sublinhado
b) Link em estado inicial com sublinhado acima do texto, em estado ativo com
uma linha passando ao meio do texto, e em estado visitado com sublinhado
BORDAS PERSONALIZADAS: abaixo do texto
c) Link em estado inicial na cor laranja e em estado hover na cor verde e
sublinhado
h2
{ d) Link em estado inicial com bordas com estilo solida e cor azul, fundo preto e
background-position:left bottom; cor da fonte branco; e em estado hover com bordas com estilo pontilhadas e
background-image:url(estrela.png); cor preto, fundo branco e cor da fonte preto
background-repeat:repeat-x; e) Link em estado inicial de cor vermelha; estado visitado em itálico e negrito na
padding-bottom:15px; cor laranja; estado hover sublinhado, e quando o usuário clicar no link a cor
}
deverá ser amarelo.
Após ter retirado o sublinhado do link no seu estado inicial, é comum definir um estilo
devolvendo o sublinhado quando o usuário passa o ponteiro do mouse sobre ele. Para isso
usaremos as pseudoclasses hover e active.
a:hover,a:active
{
text-decoration:underline; A propriedade border-radius disponibilizada na versão CSS 3 permite criar bordas
} arredondadas.
Como exemplo usaremos uma DIV e configuramos o código Css para apresentação da
Além de alterar o sublinhado, podemos alterar cor, fundo, fonte entre outras borda.
propriedades css usando estas pseudoclasses.
#bordasArredondadas
Efeitos rollover: para criar um efeito rollover simples podemos definir uma cor de {
fundo para o estado hover do link. Veja na regra css abaixo: width:400px;
height:150px;
background-color:#09F;
border-radius:10px;
a:link,a:visited
}
{
text-decoration:none;
border-width:1px; <div id="bordasArredondadas">
border-color:#000000;
border-style:solid;
background-color:#009900; Assim como as propriedades margin, padding e border, é possível definir valores
color:#FFFF00 diferentes para cada canto:
}
border-radius-topleft: para o canto superior esquerdo
border-radius-topright: para o canto superior direito
a:hover,a:active
{ border-radius-bottomright: para o canto inferior direito
text-decoration:none;
border-width:1px; border-radius-bottomleft: para o canto inferior esquerdo
border-color:#000000;
border-style:solid;
background-color:#FFFF00; As bordas arredondadas não ficam restritas ao elemento DIV, elas podem ser usadas
color:#009900 em botões, campos de formulário, parágrafos, caixas de destaque em uma página de textos,
} entre outros.
As propriedades estudadas também podem ser empregas para estilização de tabelas:
table
{
border-style:solid;
border-color:#0066FF;
OBSERVAÇÃO IMPORTANTE: As pseudoclasses podem ser utilizadas em qualquer border-width:2px;
seletor css. Podem ser aplicados várias regras CSS aos efeitos HOVER em links, a citar: }
tr td,tr th
Alterar plano de fundo {
Alterar tamanho da fonte do texto border-style:solid;
Alterar fonte border-color:#0099FF;
border-width:1px; p:first-line
} {
color: #0000FF;
font-variant: small-caps;
text-decoration:overline;
font-family:"Courier New", Courier, monospace;
}
O elemento âncora juntamente com o atributo href têm a função de criar links em um
documento. Para estilizarmos links em uma página, é fundamental a utilização de pseudo-
classes.
As pseudo-classes são elementos que complementam seletores e a maioria das
pseudo-classes são dinâmicas, ou seja, o efeito produzidos por elas depende de interação com
o usuário.
São quatro as pseudoclasses para links:
Pseudoclasses Estado do link
4.6. Exercícios práticos
a:link Link no estado inicial
Questão 01. Criar uma regra CSS para formatação de parágrafo com as seguintes
configurações: a:visited Link visitado
a:hover Estado do link quando o usuário passa o ponteiro
Largura do parágrafo: 150px;
do mouse sobre ele
Altura do parágrafo: 100px;
Cor da fonte branca a:active Estado do link quando o usuário clica sobre ele
Tipo de fonte Arial
Cor de fundo verde
Borda Superior: Espessura de 2px, na cor azul e estilo dashed. Efeitos sublinhados: os navegadores normalmente apresentam links não visitados na
Borda Esquerda: Espessura de 2px, na cor amarela e estilo dotted. cor em tonalidade azul, os visitados na cor púrpura e também os destacam com um
Borda Inferior: Espessura de 2px, na cor vermelha e estilo double. sublinhado.
Borda Direita: Sem borda Para retirar o sublinhado padrão dos links, teremos que usar a propriedade text-
Espaçamento Superior e Esquerda: 10px decoration definida como o valor none.
Ao final adicione um texto ao parágrafo e verifique se o resultado apresentado está de
acordo com a formatação sugerida.
a:link,a:visited
Questão 02. Em relação às propriedades de margens, criar regras CSS de forma que o {
text-decoration:none;
resultado a ser apresentado seja semelhante a imagem a seguir:
}
OBS: Todas as imagens utilizadas na página acima estão em uma pasta compactada junto
com a atividade.
Por último, existe a propriedade list-style-position que define a posição do box que
contém o marcador da lista em relação ao box principal do elemento li. Os valores possíveis
são: outside,inside ou inherit.
5.3. Pseudo-elementos
Pseudo-classes e pseudo-elementos são usados em CSS, para adicionar efeitos a um
seletor, ou a parte de um seletor.
A sintaxe dos pseudo-elementos é: Questão 03. Utilizando Divs/Tabelas e regras CSS, cria uma página HTML para
seletor:pseudo-elemento {propriedade: valor;}
apresentar um menu conforme a imagem abaixo:
Configure as propriedades: border e padding de forma que o menu seja
Na estilização de textos, os dois pseudoelementos mais comuns são: apresentado semelhante a imagem lateral.
first-letter Altere também as propriedades de fonte e cor para os títulos do menu e configure a
first-line cor da borda a direita da mesma cor usada para os títulos do menu.
Adicione também links externos ou internos (OBS: De livre escolha) para cada um
O pseudo-elemento first-letter é usado para obter um efeito especial na primeira letra dos itens do menu.
de um texto.
Questão 04. Utilizando tabelas e regras CSS, crie uma página HTML que apresente o resultado
p:first-letter mostrado na imagem a seguir:
{
font-size:300%;
color:#6666FF ;
font-weight:bold;
border-width:2px;
border-style:solid;
border-color:#009966;
}
O pseudo-elemento first-line é usado para obter um efeito especial na primeira linha
de um texto.
Questão 05. Utilizando tabelas e regras CSS, crie uma página HTML que apresente o resultado 5.2. Estilização de listas
mostrado na imagem a seguir:
HTML aceita listas que podem ser numeradas e não numeradas, sendo possível,
inclusive, incluir sub-itens nas listas.
As listas não numeradas são declaradas no HTML pelas tags <ul> <li>
Listas numeradas utilizam-se as tags <ol> <li>
Além da utilização para marcar listas de informações, este elemento é utilizado
também para a criação de menus CSS, que estudaremos em próximos capítulos
Para alterar a aparência do marcador de uma lista, usamos a propriedade: list-style-
type. Podemos alterar para três tipos: glifos, sistema númerico, sistem alfabético.
Exemplo:
ul
{
list-style-type:circle;
}
OBSERVAÇÃO: Podemos retirar os marcadores padrão de lista com o uso do valor
none, como mostrado abaixo:
ol, ul{list-style-type:circle;}
Além dos tipos padrões de marcador de uma lista, podemos definir uma pequena
imagem como marcador de uma lista. Essa propriedade substitui automaticamente o
marcador padrão por uma imagem construída.
Veja exemplo da regra css abaixo:
ul
{
list-style-type:none;
list-style-image:url(target.png);
font-weight:bold;
color:#FF0000;
}
A propriedade letter-spacing controla o espaçamento entre letras de um texto. Veja 5. ESTILIZAÇÃO DE TEXTOS, LISTAS E PSEUDO-ELEMENTOS
exemplo:
p
{ 5.1. Estilização de textos
letter-spacing:10px;
}
As propriedades para textos, definem as características dos textos inseridos dentro dos
elementos HTML:
color: cor do texto;
text-align: alinhamento do texto;
text-decoration: decoração do texto;
text-indent: recuo do texto;
text-transform: forma das letras;
direction: direção do texto;
letter-spacing: espaçamento entre letras;
A propriedade word-spacing controla o espaçamento entre as palavras de um texto. word-spacing: espaçamento entre palavras;
p
{
word-spacing:30px; Em relação ao alinhamento, temos a propriedade text-align que controla o
} posicionamento horizontal do conteúdo de um elemento nível de bloco. Os valores possíveis
são:
left
right,
Center
justify
inherit(um valor herdado).
A propriedade line-height controla a altura dos blocos contidos dentro de um elemento nível Esta propriedade coloca os textos às esquerda, direita, centralizado ou justificados em
de bloco. relação ao container onde está localizado. No exemplo abaixo, foi criado quatro classes para
p alterar o alinhamento do texto através da propriedade text-align:
{
line-height:30px;
} .centro
{text-align:center;}
.direita
{text-align:right;}
.esquerdo
{text-align:left;}
.justificado
{text-align:justify;}
Outra propriedade de alinhamento é a text-indent que define uma endentação para Outro efeito em texto é a propriedade text-transform que controle os efeitos de
primeira linha do texto contida em um bloco. Para configurá-lo, adicionamos um medida CSS capitalização dos textos. Os valores possíveis dessa propriedade são:
de comprimento,porcentagem ou um valor herdado.
none;
CSS capitalize(primeiro caractere em caixa alta);
.exemplo{text-indent:100px;} uppercase(todos os caracteres em caixa alta);
lowercase(caracteres em caixa baixa)
inherit
HTML:
<p
Exemplo:
Além de controlar espaçamentos e alinhar textos, podemos utilizar as propriedades
CSS para adicionar uma série de efeitos em textos. A primeira propriedade a ser estudada é a p{text-transform:capitalize;}
propriedade text-decoration que causa um efeito decorativo no texto. Os valores possíveis
desse efeito são:
A propriedade text-shadow é utilizado para aplicar uma sombra a um texto.
none(sem decoração)
Underline A propriedade text-shadow é usada da seguinte maneira:
Overline
line-through
text-shadow: 2px 2px 2px #00f;
blink.
Os dois primeiros valores são as coordenadas top left, para onde a sombra será
No CSS: projetada. O terceiro valor é o efeito blur da sombra e q quarto valor é a cor da sombra.
.linhacortando{text-decoration:line-through;} Por último temos ainda a propriedade direction controla a direção do texto e apresenta os
.duaslinhas{text-decoration: overline underline;} seguintes valores:
.piscar{text-decoration:blink;}
ltr: texto escrito da esquerda para a direita
rtl: texto escrito da direita para a esquerda
No HTML:
Exemplo:
<p class="linhacortando">Linha cortando</p>
<p class="duaslinhas">Duas linhas</p> p{
<p class="piscar">Piscar</p> direction:rtl;
}
Resultado no Navegador:
As regras CSS dispõem de mecanismos para controle de espaçamentos em fontes e
textos, seja na vertical quanto na horizontal. Para controlar o espaçamento entre letras e
parágrafos de um texto utilizamos as propriedades:
letter-spacing;
word-spacing;
line-height
OBS: poderá ser configurado um valor negativo para esta propriedade.
Você também pode gostar
- 5 - Apostila - Criando Soluções WebAinda não há avaliações5 - Apostila - Criando Soluções Web8 páginas
- Apostila Caelum - HTML, CSS, Javascript e PHPAinda não há avaliaçõesApostila Caelum - HTML, CSS, Javascript e PHP277 páginas
- Formulários HTML: Criação e EstilizaçãoAinda não há avaliaçõesFormulários HTML: Criação e Estilização29 páginas
- Guia Prático de HTML para IniciantesAinda não há avaliaçõesGuia Prático de HTML para Iniciantes12 páginas
- Guia Prático de HTML: Estrutura e ExercíciosAinda não há avaliaçõesGuia Prático de HTML: Estrutura e Exercícios30 páginas
- Finalização de Sítio para InternetAinda não há avaliaçõesFinalização de Sítio para Internet32 páginas
- ? Aula 03 - Aplicando Condicionais No Projeto - Interatividade Com DOM.Ainda não há avaliações? Aula 03 - Aplicando Condicionais No Projeto - Interatividade Com DOM.10 páginas
- Concurso Público Da Universidade Federal Fluminense - Edital #96 - 2025 - Comprovante de Solicitação de Inscrição Via InternetAinda não há avaliaçõesConcurso Público Da Universidade Federal Fluminense - Edital #96 - 2025 - Comprovante de Solicitação de Inscrição Via Internet1 página
- Projeto de Extensão em Medicina VeterináriaAinda não há avaliaçõesProjeto de Extensão em Medicina Veterinária5 páginas
- Ciranda: Cultura e Festival no AmazonasAinda não há avaliaçõesCiranda: Cultura e Festival no Amazonas3 páginas
- Como Fazer Maquetes para Feira EscolarAinda não há avaliaçõesComo Fazer Maquetes para Feira Escolar10 páginas
- Observação de Bebês na PsicanáliseAinda não há avaliaçõesObservação de Bebês na Psicanálise5 páginas
- Transporte e Logística Resumo CompletoAinda não há avaliaçõesTransporte e Logística Resumo Completo19 páginas
- Plano de Aula de Ciências: Matéria e Energia no 9º AnoAinda não há avaliaçõesPlano de Aula de Ciências: Matéria e Energia no 9º Ano4 páginas
- Aloimunização e Doença Hemolítica PerinatalAinda não há avaliaçõesAloimunização e Doença Hemolítica Perinatal24 páginas
- Praticas Pedagógicas 3 Do 7 PeriodoAinda não há avaliaçõesPraticas Pedagógicas 3 Do 7 Periodo2 páginas
- Impactos Climáticos nos Mais PobresAinda não há avaliaçõesImpactos Climáticos nos Mais Pobres3 páginas
- Dinamica de Fim de Ano para Integrar Grupos e EquipesAinda não há avaliaçõesDinamica de Fim de Ano para Integrar Grupos e Equipes3 páginas
- Minuta Contrato Prestacao Servicos MedicosAinda não há avaliaçõesMinuta Contrato Prestacao Servicos Medicos4 páginas
- Análise Literária Do Poema Um Sonho em Um SonhoAinda não há avaliaçõesAnálise Literária Do Poema Um Sonho em Um Sonho4 páginas
- Criação da Autarquia Setec em CampinasAinda não há avaliaçõesCriação da Autarquia Setec em Campinas8 páginas
