Apostila HTML

Prof.
Claudio Buranelo
Agosto/2013
Apostila de HTML
Apostila de HTML
Introduo
Comeando sua pgina
Todo documento HTML apresenta elementos
entre parnteses angulares (< e >). Esses
elementos so as etiquetas (tags) de HTML, que
so os comandos de formatao da linguagem. A
maioria das etiquetas tem sua correspondente de
fechamento, representada com uma barra ( / ):
Comeando sua pgina
<etiqueta>...</etiqueta>
Isso necessrio porque as etiquetas servem para definir
a formatao de uma poro de texto, e assim marcamos
onde comea e onde termina o texto com a formatao
especificada por ela.
Alguns elementos so chamados vazios, pois no
marcam uma regio de texto, apenas inserem alguma
coisa no documento, no havendo a necessidade do
fechamento:
<etiqueta>
Todos os elementos podem ter atributos:
<etiqueta atributo1=valor1 atributo2=valor2>...</etiqueta>

HTML um recurso muito simples e acessvel para a
produo de documentos. Nesta apostila, ser possvel
aprender grande parte de seus elementos.
Documento HTML Bsico e seus
Componentes
A estrutura de um documento HTML apresenta
os seguintes componentes:
Seo <HEAD>
<HEAD> contm informaes sobre o documento. O
elemento <TITLE>, por exemplo, define um ttulo, que
mostrado no alto da janela do browser. Exemplo:

<HEAD> <TITLE> Pgina do Fulano de Tal </TITLE>
</HEAD>

Todo documento WWW deve ter um ttulo; esse ttulo
referenciado em buscas pela rede, dando uma identidade
ao documento. Ao adicionar uma pgina aos seus
Favoritos (Bookmarks), o ttulo da pgina se torna a
ncora de atalho para ela. Por isso sugerido que os
ttulos dos documentos sejam sugestivos, evitando-se
ttulos genricos como "Introduo", por exemplo. O
ttulo tambm bastante significativo para a listagem de
uma pgina nos resultados de pesquisas nos sites de
busca da Internet.
Seo <BODY>
Tudo que estiver contido em <BODY> ser mostrado na janela principal do
browser, sendo apresentado ao leitor. <BODY> pode conter cabealhos,
pargrafos, listas, tabelas, links para outros documentos, imagens, formulrios,
animaes, vdeos, sons e scripts embutidos.
Atributos de <BODY>
Atravs de atributos de <BODY>, podemos definir cores para os textos, links e
para o fundo das pginas, bem como uma imagem de fundo (marca dgua):
<BODY BGCOLOR="#rrggbb" TEXT="#rrggbb" LINK="#rrggbb"
ALINK="#rrggbb"
VLINK="#rrggbb" BACKGROUND="URL">
Onde:
BGCOLOR: Background Color, ou seja, cor de fundo da pgina. Quando no
indicada a cor de
fundo, o browser ir mostrar uma cor padro, geralmente cinza ou branco.
TEXT: Cor dos textos da pgina (padro: preto).
LINK: Cor dos links (padro: azul).
ALINK: Cor dos links quando acionados, clicados (padro: vermelho).
VLINK: Cor dos links depois de visitados (padro: azul escuro ou roxo).
Seo <BODY>
Seus valores so dados em hexadecimal, equivalentes a
cores no padro RGB (Red, Green, Blue). Existem tabelas
de cores com esses valores, mas grande parte dos
editores j oferece uma interface bem amigvel atravs da
qual escolhemos as cores desejadas, sem nos
preocuparmos com nmeros esdrxulos tais como
#FF80A0.
Browsers que seguem a definio de HTML 3.2 em diante,
tambm aceitam 16 nomes de cores, tirados da paleta
VGA do Windows - por exemplo, podemos escrever
BGCOLOR="BLUE".
Porm, browsers mais antigos no apresentaro as cores
indicadas. BACKGROUND: Indica o URL3 da imagem a
ser replicada no fundo da pgina, como uma marca
dgua. Para efeitos de design, possvel fixar a imagem
de fundo, para que ela no se mova junto com o texto ao
se rolar a pgina. Esse efeito no padro e funciona no
Internet Explorer.
Cores
Cores - As cores so introduzidas atravs do
elemento <FONT>, usando o sistema RGB para
cores (da mesma forma que vimos para cores de
documentos), como mostrado no exemplo a
seguir:
<FONT COLOR="red"> Texto </FONT>
Produzir na pgina: a palavra Texto escrita na
cor vermelha.
Assim, um trecho de texto pode ter uma cor
diferente da definio geral de cores, feita
atravs dos atributos de <BODY>.
Tamanhos
Tamanho - Veja a formatao a seguir:
<FONT SIZE=3> Texto </FONT>
Produzir na pgina: a palavra Texto como o tamaho
3.
Este comando permite que o autor do documento
altere o tamanho das letras em trechos especficos
de texto. O tamanho bsico dos textos 3 (padro).
Podemos indicar tamanhos relativos a esse, por
exemplo:
<FONT SIZE=+2> Letra maior </FONT>
Letra normal
<FONT SIZE=-2> Letra menor </FONT>
Letra maior Letra normal Letra menor
Fontes
Fontes - Uma evoluo que permite a escolha da
fonte para os textos, o atributo FACE:
<FONT FACE="Arial"> Texto </FONT>
Produzir: a palavra Texto com a fonte (tipo de
letra) Arial.
Mais exemplos:
<FONT FACE="Verdana" COLOR="blue"> Fonte
Verdana Azul </FONT>
Fonte Verdana Azul
Cabealhos
H seis nveis de cabealhos em HTML, de <H1>
a <H6>:
<H1> Este um cabealho de nvel 1 </H1>
Alinhamento de cabealhos
Os cabealhos tm atributos de alinhamento:
<H2 ALIGN=CENTER>Cabealho
centralizado</H2>
Cabealho centralizado
<H3 ALIGN=RIGHT>Cabealho alinhado
direita</H3>
Cabealho alinhado direita
<H4 ALIGN=LEFT>Cabealho alinhado
esquerda (default=padro)</H4>
Cabealho alinhado esquerda
(default=padro)
Separadores
As quebras de linha do texto fonte no so
significativas na apresentao de documentos
em HTML. Para organizar os textos, precisamos
de separadores, apresentados a seguir.
Quebra de linha
Quando queremos mudar de linha, usamos o
elemento <BR>. Isso s necessrio quando
queremos uma quebra de linha em determinado
ponto, pois os browsers j quebram as linhas
automaticamente para apresentar os textos.
Com sucessivos <BR>, podemos inserir diversas
linhas em branco nos documentos. Esse
elemento tem um atributo especial, que ser
apresentado no item sobre insero de imagens.
Pargrafos
Para separar blocos de texto, usamos o elemento
<P>, por exemplo:
Pargrafo 1; <P> Pargrafo 2.
que produz o seguinte:
Pargrafo1;
Pargrafo2.
Linha Horizontal
<HR> insere uma linha horizontal
<HR SIZE=7> insere uma linha de largura 7
(pixels)
<HR WIDTH=50%> insere uma linha que ocupa
50% do espao horizontal disponvel
<HR WIDTH=30% ALIGN=RIGHT NOSHADE>
insere uma linha de comprimento 30% (do
espao horizontal disponvel), alinhada direita,
sem efeito tridimensional
<HR SIZE=70 WIDTH=2 ALIGN=LEFT> insere
uma linha de largura 70 (pixels), comprimento 2
(pixels), alinhada esquerda (o Netscape,
aparentemente, no aceita esta formatao de
<HR>):

Listas em HTML
H vrios tipos de listas em HTML, sendo estas
as mais usadas e corretamente apresentadas
pelos browsers:
Listas de Definio
Estas listas so chamadas tambm Listas de
Glossrio, uma vez que tm o seguinte formato:
<DL>
<DT> termo a ser definido
<DD> definio
<DT> termo a ser definido
<DD> definio
</DL>
Listas em HTML
Listas no-numeradas
So equivalentes s listas com marcadores do
MS-Word, por exemplo:
<UL>
<LI> item de uma lista
<LI> item de uma lista, que pode ser to grande quanto se
queira, sem que seja necessrio se preocupar
com a formatao das margens de texto
<LI> item
</UL>
Listas em HTML
Listas Numeradas
<OL>
<LI> item de uma lista numerada
<LI> item de uma lista numerada, que pode ser to grande
quanto se queira, sem que seja necessrio se
preocupar com a formatao das margens de texto
<LI> item de lista numerada
</OL>
Programao HTML: o padro CSS.
Apostila de HTML
Apresentao
Histria e Significado
Por que usar ?
Como usar ?
Orientaes ao Desenvolvedor
Quando o HTML foi criado, a inteno era de
"jogar contedo para o usurio e no formatar a
informao. Como tudo na vida evolui, assim
ocorreu com o HTML. O cdigo passou a ser
usado tambm como controle da aparncia do
documento, tornando a linguagem complexa, e
assim, mais difcil de entender. Outro problema
encontrado foi a compatibilidade com alguns
navegadores, o que dificultava a visualizao dos
sites na poca. Era comum voc encontrar nos
sites a mensagem: "Site melhor visualizado com
o navegador X"
Em 1994, Hakon Lie diante dessas dificuldades,
props a criao do CSS ou Cascading Style Sheets
para facilitar a formatao da informao.
Em 1996, eles lanaram a recomendao oficial pelo
W3C do CSS Level 1 (CSS 1). Dois anos depois, no
dia 12 de Maio de 1998 foi lanada a recomendao
do CSS Level 2, a segunda verso das Folhas de
Estilos para Web.
A sigla CSS (Cascading Style Sheets) se refere a
uma linguagem de estilos que define o layout de
documentos escritos, geralmente, em linguagem
HTML. O CSS define e controla, por exemplo, os
parmetros de texto e figuras, alm de
posicionamento dos elementos, imagens de fundo e
etc. O HTML estrutura o contedo da pagina e o CSS
formata esse contedo.
Por que usar ?
A principal vantagem do uso do CSS e o fato de
separarmos a apresentao da webpage do seu
contedo, o que facilita a edio tanto do texto
como do layout. Ele possibilita a construo de
um s contedo com varias formas de
apresentao, mexendo-se apenas em uma linha
do cdigo html. Outra vantagem em seu uso e
devido ao maior campo de opes e preciso
que o CSS nos oferece. Apesar das diversidades
em navegadores e constantes atualizaes,
atualmente, a maioria dos navegadores oferecem
suporte ao CSS, diminuindo cada vez mais o
numero dos que no oferecem.
Como usar ?
Estrutura Bsica
Primeiramente, e preciso ter em mente que qualquer modelo CSS s
ser visto e aproveitado quando usado em um cdigo HTML ou
semelhantes.
O CSS possui sua prpria sintaxe, com algumas de suas propriedades
parecidas as do HTML. Na sua forma mais simples, e composto por 3
partes:
seletor {propriedade: valor}

seletor - tag em HTML que tera tal valor aplicado aquela propriedade
citada. Cada seletor possui mais de uma propriedade que pode vir a ser
modicada e pode ser aplicado a uma classe. Ex: <p>, <body>, <h1>,
<img>, ...

propriedade - atributo que ser modicado ao receber tal valor. Ex: size,
color, font,...

valor - caracterstica que a propriedade ira assumir. Ex: 3, red, tahoma.
Quando os valores forem numricos, ha a opo de determina-los em
pixels, centmetros ou porcentagens.
Exemplo
estilo.css:
p.right {
text-align: right
}
p.left {
text-align: left
}

Em CSS, no utilizamos tags de iniciao e
termino do documento.
Exemplo
exemplo.html:

<html>
<head>
<title> Bem-vindo! </title>
<link rel= "stylesheet" type= "text/css" href=
"CSS/estilo.css" />
</head>
<body>
<p class="left"> Começando na esquerda...
</p>
<p class="right"> indo para a direita! </p>
</body>
</html>
Orientaes ao Desenvolvedor
Comentrios
Comentrios so utilizados para explicar o
cdigo, sendo assim, so essenciais para ajudar
o desenvolvedor a achar erros ou modicar reas
espeas do site.
O navegador ira ignorar linhas comentadas, logo,
elas no faro parte da sua formatao e no
influenciara no tempo de execuo do site. Em
CSS, as linhas comentadas comeam com "/*"e
terminam com "*/".
Ex:
/* mudando a cor do plano de fundo */
background {color:#00FF00}
Propriedades Bsicas
Cores
Esta e a propriedade mais comum, pois se aplica a
muitos seletores. As cores no CSS obedecem o
padro hexadecimal RGB e as mais bsicas podem
tambm ser designadas pelo nome.
Ex: /* pondo cor ao texto */
p {color:red}
Propriedades Bsicas
Plano de fundo
O corpo de um documento geralmente vem preenchido por uma cor ou
figura. A partir da propriedade "background", no s ele, mas como
qualquer outro elemento pode ter o plano de fundo modicado.
background-color - Preenchera o documento com a cor desejada.
background-image - O valor atributo a esta propriedade, devera ser o
nome do arquivo da figura, que devera estar localizada na mesma pasta
da folha de estilos ou com o caminho ate a imagem especificado.
Quando o plano de fundo e preenchido por uma imagem, surgem mais
propriedades a serem especificadas.
background-position - A posio da imagem na pagina. Top, center ou
bottom combinados com left, center e right.
background-repeat Opo usada para repetir a imagem pelo plano de
fundo.
Ex:
body {
background-color: #FFFFFF; background-image: url("imagem.gif");
background-position: bottom right; background-repeat: no-repeat
}
Propriedades Bsicas
Texto
O texto pode ter caractersticas alteradas em CSS
que no poderiam ser alteradas em HTML.
Podemos citar como exemplo, o espaamento
entre as linhas. Com o uso do CSS e de suas
propriedades, podemos caracterizar textos em
qualquer elemento do HTML.

Propriedades Bsicas
Texto
color - Define a cor do texto.
text-ident - Define a distncia de recuo do texto no inicio
do paragrafo.
line-height - Define o espaamento entre as linhas.
text-align - Define o alinhamento do texto, que pode ser ao
centro, a direita, a esquerda ou no estilo justificado.
text-decoration - Define a decorao de um texto e feita
com os seguintes valores:
underline (sublinhado), overline (sobrelinhado), line-through (uma
linha em cima do texto) e blink (faz piscar o texto).
text-transform - Dene uma transformac~ao ao texto, que
podem ser as seguintes:
- torna-las todas maisculas - uppercase;
- todas minsculas - lowercase;
- todas as primeiras letras maisculas - capitalize.
Propriedades Bsicas
Texto
Exemplo:
estilo.css:
h1 { color: #DDA0DD; text-decoration: underline;
text-transform: uppercase }
h2 {color: #3366FF; text-decoration: line-through;
text-transform: none }
p { text-ident: 1cm; line-height: 2px; text-align:
center }
Propriedades Bsicas
Texto
Exemplo:
<html>
<head> <title> Bem-vindo! </title>
<link rel= "stylesheet" type= "text/css" href= "estilo.css" />
</head>
<body>
<h1> Textos </h1>
<h2> Mudanças </h2>
<p> "Se você quer transformar o mundo, experimente primeiro promover
o seu aperfeiçoamento pessoal e realizar inovaêões no seu
próprio interior.Estas atitudes se refletirão em mudanças
positivas no seu ambiente familiar.Deste ponto em diante, as mudanças se
expandirão em proporções cada vez maiores. Tudo o que
fazemos produz efeito, causa algum impacto.
</p>
</body>
</html>
Propriedades Bsicas - Fonte
Muitas das funes apresentadas no captulo so
bem especificas e impossveis de serem
aplicadas pelo HTML. Como no captulo anterior,
todas as propriedades so aplicadas a seletores
relacionados a textos, como <p> e <h1>.
font-family - Refere-se a famlia da fonte. O valor pode ter
o nome especifico da fonte (Verdana, comic saens) ou de
fontes genricas (menospace, serif). Vale lembrar que a
fonte escolhida devera estar instalada na maquina do
usurio.
font-size - Pode-se escolher o tamanho da fonte usando
valores numricos ou nomenclaturas: x-small, xx-small, x-
large, xx-large, small, medium, large, smaller e larger.
font-style - Ha 3 opes: normal, italic e oblique, que se
referem a letras em sua fonte normal na vertical, letras
inclinadas e letras obliquas, respectivamente.
font-weight - Define a intensidade de negrito que a fonte
vai receber. Pode assumir 3 opes: bold, bolder e lighter
ou valores numricos.
font-variant - Varia o tamanho das letras maisculas
quando recebe o valor small-caps.
Exemplo:
estilo.css:
h1 { color: #DDA0DD;font-family: arial; font-weight:
bold;}
h2 { color: #3366FF; font-family: arial; font-variant:
small-caps; }
p.1 { font-family: serif; font-size: x-small; font-style: italic
}
p.2 { font-family: sans-serif; font-size: 90%; font-style:
oblique }
Exemplo:
exemplo.html:
<html>
<head> <title> Bem-vindo! </title>
<link rel= "stylesheet" type= "text/css" href= "estilo.css" />
</head>
<body>
<h1> Textos </h1>
<h2> Mudanas </h2>
<p class="1"> Teste de P1."</p>
<h2> Determinao </h2>
<p class="2"> Texto de Determinao" </p>
</body>
</html>
Exerccio
1. Dentro da pasta com o seu nome, crie uma subpasta
chamada css. Utilize apenas letras minsculas em
todas as pastas e arquivos que criarmos durante o
exerccio.
2. Crie um documento HTML em um arquivo chamado
testando-css.html dentro da pasta css. Todos os
pargrafos desse documento devem ser exibidos em
negrito, com cor azul e com fonte 20px. Defina uma
regra CSS para formatar os pargrafos.
3. Para organizar melhor o contedo e a formatao da
pgina criada no exerccio anterior, crie um arquivo CSS
chamado regras-de-formatacao.css na pasta css.
4. Modifique o arquivo testando-css.html para aplicar as
regras de formatao criadas no exerccio anterior.
font-weight : bold ;
font-size : 20 px;
color : #0000 FF;
Programao HTML: Tags e Tipos de
Seletores
Apostila de HTML
Apresentao
Tags HTML
Link
ncora
Imagens
Tabela
Tipos de seletores
Tags HTML
Link
Normalmente, um site formado por um conjunto
de pginas que esto interligadas de alguma
forma. Para permitir que um usurio navegue de
uma pgina para outra, devemos utilizar os links.
Um link pode fazer a ligao de uma pgina para
outra do mesmo site (link interno) ou para uma
pgina de outro site (link externo).

<html >
<head >
<title >Exemplo de uso da tag a</ title >
</ head >
<body >
<p><a href =" pagina2 . html ">Exemplo de link relativo </a></p>
<p><a href =" outros / pagina3 . html ">Outro exemplo de link relativo
</a></p>
<p><a href =" http :// www . k19 . com .br">Exemplo de link absoluto
</a></p>
</ body >
</ html >
Link
Alm do atributo href, podemos utilizar o atributo
target para informar onde o documento deve ser
aberto. Os possveis valores para o atributo
target so:
_blank - em uma nova janela ou aba
_self - na mesma janela ou frame do documento
que contmo link
_parent - em um frame que seja o pai do frame no
qual o link se encontra
_top - na mesma janela do documento que contm
o link

<a href =" pagina1 . html " target =" _blank ">Abre em
outra janela / aba </a>
Exerccio Link
Crie dois documentos HTML em arquivos
chamados pagina1.html e pagina2.html dentro
da pasta html e em seu corpo crie quatro links:
um que aponte para uma pgina externa e outros
trs que apontem para uma pgina interna de
maneiras diferentes. Lembre-se de criar tambm
a pgina para a qual o seu link interno ir
apontar.
ncora
Alm de criar links para outras pginas, podemos
criar links para uma determinada seo dentro da
prpria pgina na qual o link se encontra ou
dentro de outra pgina. Esse recurso chama-se
ancoragem, pois as sees para as quais
queremos criar um link devem possuir uma
ncora.
ncora
<html >
<head >
<title >Exemplo de uso da tag a como ncora </ title >
</ head >
<body >
<p><a href ="# mais_info ">Veja mais informaes
</a></p>
<p><a href =" pagina2 . html # outra_ancora ">ncora
em outra pgina </a></p>
...
<a name =" mais_info ">Mais informaes </a>
</ body >
Exerccio - ncora
Crie um documento HTML em um arquivo
chamado ancora-pagina1.html na pasta html
que contenha um link que aponta para uma
ncora dentro da prpria pgina. Dica: insira um
contedo suficientemente grande para que a
barra de rolagem vertical do navegador aparea
e coloque a ncora no final da pgina.
Imagens
Certamente, os sites na internet seriam muito
entediantes se no fosse possvel adicionar
imagens ao contedo das pginas. Como no
queremos que as nossas pginas fiquem muito
montonas, neste captulo, utilizaremos a tag img
para melhorar um pouco a aparncia das pginas
com algumas imagens.
A tag img possui o atributo src que utilizaremos
para informar qual imagem queremos carregar
dentro de um documento HTML. O valor do
atributo pode ser o caminho absoluto ou relativo
de uma imagem.
<img src =" logo-large.png " />
Tabelas
Suponha que voc esteja desenvolvendo o site
de uma empresa e precisa apresentar alguns
relatrios em pginas HTML. Considere que os
dados desses relatrios so obtidos de planilhas
eletrnicas. Da surge a necessidade de definir
dados de forma tabular em HTML.
Para resolver esse problema, podemos utilizar o
elemento table do HTML. Esse elemento permite
apresentar um conjunto de dados na forma de
tabelas. Veja o exemplo:
<table >
<tr >
<th >Marca </th > <th >Modelo </th > <th >Ano </th >
</tr >
<tr >
<td >Toyota </td > <td >Corolla </td > <td >2010 </td > </tr >
<tr >
<td >Honda </td > <td >Civic </td > <td >2011 </td >
</tr >
<tr >
<td >Mitsubishi </td > 27 <td >Lancer </td > 28 <td >2012
</td >
</tr >
<tr >
<td colspan ="3">ltima atualizao : 06/2012 </td >
</tr >
</ table >
<table >
<thead >
<tr >
<th >Marca </th >
<th >Modelo </th >
<th >Ano </th >
</tr >
</ thead >
<tfoot >
<tr >
<td colspan ="3">ltima
atualizao : 06/2012 </td >
</tr >
</ tfoot >
<tbody >
<tr >
<td >Toyota </td >
<td >Corolla </td >
<td >2010 </td >
</tr >
<tr >
<td >Honda </td >
<td >Civic </td >
<td >2011 </td >
</tr >
<tr >
<td >Mitsubishi </td >
<td >Lancer </td >
<td >2012 </td >
</tr >
</ tbody >
</ table >
Tabelas
Perceba que a tag table no utilizada sozinha.
Ela necessita de pelo menos um ou mais
elementos tr que, por sua vez, necessitam de
pelo menos umou mais elementos th ou td.
O que significam essas tags?
tr - define uma linha da tabela
th - define uma clula de cabealho
td - define uma clula
thead - define o cabealho da tabela
tfoot - define o rodap da tabela
tbody - define o corpo da tabela
Exerccio - Tabela
Crie uma pgina HTML em um arquivo chamado
tabela.html na pasta html que contenha uma
tabela de acordo com a imagem abaixo:

Tipos de Seletores
Seletor universal
Seletor de tipo
Seletor de descendentes
Seletor de filhos
Seletor de irmo adjacente
Seletor de atributos
Seletor de id
Seletor de classe
Seletor universal
O seletor universal seleciona todos os elementos
de um documento HTML.
No exemplo a seguir, faremos com que todos os
elementos tenham margem igual a 0px.

* { 2margin : 0px; }
Seletor de tipo
O seletor de tipo seleciona todos os elementos
com tag igual ao tipo indicado na declarao da
regra CSS.

textarea { border : 1px solid red ; }
Seletor de descendentes
Chamamos de seletor de descendentes a
seleo de um ou mais elementos fazendo o uso
de outros seletores separados por espaos. Um
espao indica que os elementos selecionados
pelo seletor sua direita so filhos diretos ou
indiretos dos elementos selecionados pelo
seletor sua esquerda.
No exemplo a seguir iremos selecionar todos os
elementos que possuem a tag input e que sejam
filhos diretos ou indiretos de elementos com a tag
p.

p input { border : 1px solid red ; }
Seletor de filhos
Chamamos de seletor de filhos a seleo de um
ou mais elementos fazendo o uso de outros
seletores separados pelo caractere >. Um
caractere > indica que os elementos
selecionados pelo seletor sua direita so filhos
diretos dos elementos selecionados pelo seletor
sua esquerda.
elementos que possuem a tag a e que sejam
filhos diretos de elementos coma tag p.

p > a { color : green ; }
Seletor de irmo adjacente
Chamamos de seletor de irmo adjacente a
seleo de um ou mais elementos fazendo o uso
de outros seletores separados pelo caractere +.
Um caractere + indica que os elementos
selecionados pelo seletor sua direita sejam
irmos e imediatamente precedidos pelos
elementos selecionados pelo seletor sua
esquerda.
elementos que possuem a tag input e que sejam
irmos e imediatamente precedidos por
elementos com a tag label.
label + input { color : green ; }
Seletor de atributos
O seletor de atributos seleciona um ou mais
elementos que possuam o atributo ou o atributo
juntamente com o seu valor da mesma forma como
indicada pelo seletor na declarao da regra CSS. Os
atributos so informados dentro de colchetes [].
No exemplo abaixo iremos selecionar todos os
elementos que possuam o atributo name igual a
cidade.
*[ name = cidade ] { font - weight : italic ; }

Se desejarmos tambm podemos informar apenas o
atributo. No exemplo a seguir iremos selecionar todos
os elementos com a tag img que possuam o atributo
title.
img [ title ] { width : 100 px; }
Seletor de id
O seletor de id seleciona um nico elemento cujo
atributo id possui o valor indicado pelo seletor na
declarao da regra CSS. No exemplo abaixo
iremos selecionar o elemento cujo atributo id
possui o valor cidade. Repare que o seletor de id
comea como caractere #.

# cidade { font - weight : bold ; }
Seletor de classe
O seletor de classe seleciona todos os elementos
cujo atributo class possui o valor indicado pelo
seletor na declarao da regra CSS.
No exemplo abaixo iremos selecionar todos os
elementos cujo atributo class possui o valor
ttulos. Repare que o seletor de classe comea
com o caractere . (ponto).

. titulos { font - size : 40 px; }
Exerccios de Seletores
Para testar o funcionamento de alguns seletores,
crie um documento html em um arquivo chamado
seletores.html. Alm disso, defina algumas
regras de formatao em um arquivo CSS
chamado seletores.css. Salve esses arquivos
na pasta css.
Formulrio.
Apostila de HTML
Recados
Entrega de todos os exerccios via e-mail no dia
27/09/2013
Atividade dia 27/09/2013 Questes para
entregar
Avaliao Bimestral dia 04/10/2013
Entrega de ATPS dia 11/10/2013
Apresentao
Tags HTML
Form
Input
Select
Textarea
Label
Tags HTML
Form
Desde o momento em que comearmos a falar sobre os
elementos de formulrio utilizaremos a tag form. A tag
form ir definir, de fato, o nosso formulrio. Todos os
elementos de formulrio devem ser filhos diretos ou
indiretos de um elemento com a tag form para que os
dados vinculados a esses elementos sejam enviados.
O papel do formulrio enviar os dados contidos nele
para algum lugar, mas para onde? O atributo action
quem diz para onde os dados de um formulrio deve ser
enviado. Alm disso, devemos informar a maneira como
queremos que esses dados sejam enviados, ou seja, se
queremos que eles sejam enviados atravs de uma
requisio do tipo GET ou POST (mtodos de envio
definidos no protocolo HTTP).
Tag Input
A tag input permite que o elemento que a contenha
assuma diversas formas dependendo do seu atributo
type. O atributo type pode receber os seguintes
valores:
text - cria uma caixa de texto de uma linha.
password - cria uma caixa de texto de uma linha
escondendo os caracteres digitados.
checkbox - cria uma caixa que assume dois estados:
checado e "deschecado". Em conjunto com o atributo
name possvel que se crie um grupo de checkboxes
no qual umou mais checkboxes seja "checado".
radio - cria uma caixa que assume dois estados:
checado e "deschecado". Em conjunto com o atributo
name possvel que se crie um grupo de radios no qual
apenas um radio seja "checado".
Tag Input
button - cria umboto. Atravs do atributo value
definimos o texto do boto.
submit - cria umboto para o envio do formulrio.
Atravs do atributo value definimos o texto do boto.
file - cria um boto que, ao ser clicado, abre uma
caixa de dilogo para a escolha de um arquivo no
computador do usurio.
reset - cria um boto que descarta todas as
alteraes feitas dentro de um formulrio. Atravs do
atributo value definimos o texto do boto.
image - cria um boto para o envio do formulrio.
Deve ser utilizado em conjunto com o atributo src
para que uma imagem de fundo seja utilizada no
boto.
hidden - cria um elemento que no fica visvel para o
usurio, porm pode conter um valor que ser
enviado pelo formulrio.
<html >
<head >
<meta http - equiv =" Content - Type " content =" text / html ;
charset =UTF -8">
<title >Exemplo de uso da tag input </ title >
</ head >
<body >
<form action =" pagina . html " method =" get ">
<p>
text :
<input type =" text " />
</p>
<p>
password :
<input type =" password " />
</p>
<p>
checkboxes :
<input type =" checkbox " name =" checkgroup " />
</p>
<p>
radios :
<input type =" radio " name =" checkgroup " />
</p>
<p>
button :
<input type =" button " value =" Boto " />
</p>
<p>
submit :
<input type =" submit " value =" Enviar " />
</p>
<p>
file :
<input type =" file " />
</p>
<p>
reset :
<input type =" reset " value =" Descartar alteraes " />
</p>
<p>
image :
<input
type =" image " src =" colocar o endereo da imagem " />
</p>
<p>
hidden :
<input type =" hidden " value =" valor escondido " />
</p>
</ form >
</ body >
</html>
Tag Select
A tag select permite ao usurio escolher um ou
mais itens de uma lista. O atributo multiple,
quando presente, informa ao navegador que
mais de um item pode ser selecionado.
<html >
<head >
<meta http - equiv =" Content - Type "
content =" text / html ; charset =UTF -8">
<title >Exemplo de uso da tag select </
title >
</ head >
<body >
<form action =" pagina . html " method ="
get ">
<p>
Selecione uma cidade :
<select >
<option value ="sao - paulo ">So Paulo
</ option >
<option value ="rio -de - janeiro ">Rio de
Janeiro </ option >
<option value ="porto - alegre ">Porto
Alegre </ option >
<option value =" curitiba ">Curitiba </
option >
</ select >
</p>
<p>
Selecione uma ou mais categorias de
produtos ( mantenha a tecla
" control " (ou " command " no Mac )
pressionada para escolher mais de uma
categoria ):
<select multiple =" multiple ">
<option value =" desktops ">Desktops </
option >
<option value =" notebooks ">Notebooks
</ option >
<option value =" tablets ">Tablets </
option >
<option value =" celulares ">Celulares </
option >
</ select >
</p>
</ form >
</ body >
</ html >
Exerccio
1. Crie um documento HTML em um arquivo
chamado formulario.html na pasta html com
diversos elementos de formulrio e para cada
elemento crie um rtulo. Cada rtulo deve focar
o elemento de formulrio correspondente.
tag textarea
A tag textarea exibe uma caixa de texto na qual o
usurio poder inserir um texto qualquer. A
diferena para a tag input com o atributo type
com o valor text que a tag textarea permite a
insero de textos mais longos e com quebras de
linha.
<html >
<head >
<meta http - equiv =" Content - Type " content =" text / html ;
charset =UTF -8">
<title >Exemplo de uso da tag textarea </ title >
</ head >
<body >
<p>
textarea :
<textarea >
</ textarea >
</p>
</ form >
</ body >
</ html >
tag label
Em alguns dos exemplos anteriores foram
inseridos textos ao lado dos elementos de
formulrio apresentados. Podemos pensar
nesses textos como rtulos de cada elemento e
exatamente para esse fim que devemos utilizar a
tag label do HTML.
Alm de servir como rtulo, a tag label auxilia o
usurio a interagir comos elementos do
formulrio.
Utilizando o atributo for podemos fazer com que
um elemento do formulrio receba o foco.
<head >
<meta http - equiv =" Content - Type " content =" text /
html ; charset =UTF -8">
<title >Exemplo de uso da tag label </ title >
</ head >
<body >
<p>
<label for =" nome ">Nome :</ label >
<input type =" text " id=" nome " />
</p>
</ form >
</ body >
</ html >
Exerccio
1. Crie um documento HTML em um arquivo
chamado formulario.html na pasta html com
diversos elementos de formulrio e para cada
elemento crie um rtulo. Cada rtulo deve focar
o elemento de formulrio correspondente.
2. Em um documento HTML, crie um formulrio
que utilize as tags input, select, label e textarea.
Tente utilizar todos os tipos do elemento input
vistos nesta aula.
FRAME
Apostila de HTML
Apresentao
Frame
Estrutura
Sintaxe
Atributos
Exemplos
Exerccio

Imagens

Frame - Estrutura
Frame - Estrutura
Frame - Sintaxe
Frame Atributo Row
Frame Atributo Row - Exemplo
Frame Atributo Cols
Frame - Link
Frame atributos
Frame atributos
Frame atributos
Exerccios
Criar pginas em A. Em cada uma deve existir texto e
pelo menos uma figura, alm do fundo.
1. com dois frames verticais, de mesmo tamanho. Salvar
em A:\htm1.html.
2. com trs frames verticais, de tamanho diferente.
Salvar em A:\htm2.html.
3. com dois frames horizontais, de mesmo tamanho.
4. com trs frames horizontais, de tamanho diferente.
5. com trs frames, sendo s 1 coluna, com os tamanhos
que desejar. Salvar em A:\htm5.html.
6. com trs frames, sendo s 1 linha, com os tamanhos
que desejar. Salvar em A:\htm6.html.

Imagens
Comando e Exerccio
Comando
<img src =" http :// www . k19 . com .br/ css / img
/main - header - logo . png " />

Exerccio
Crie um documento HTML em um arquivo chamado
imagem.html na pasta html que contenha alguns
elementos IMG.
Programao JavaScript.
Apostila de HTML
Apresentao
Introduo
Declarao de variveis
Operadores
Controle de Fluxo
Exerccios

Introduo
Para que possamos criar uma pgina que possua
um comportamento e oferecer aos nossos
usurios um site mais interativo e dinmico, com
certeza trabalharemos com a linguagem
JavaScript.
Um cdigo JavaScript pode ser inserido em um
documento HTML de duas formas: colocando o
cdigo JavaScript como filho de um elemento
com a tag script ou utilizando o atributo src de um
elemento com a tag script no qual devemos
passar o caminho relativo ou absoluto para um
arquivo que contenha o cdigo JavaScript.
Introduo
Declarao de Variveis
Em JavaScript podemos declarar e inicializar
uma varivel da seguinte maneira:
var numero = 0;
var numeroComCasasDecimais = 1.405;
var texto = Varivel com um texto ;
var outroTexto = " Outra varivel com um texto ";
var valorBooleano = true ;
Operadores
Para manipular os valores das variveis de um
programa, devemos utilizar os operadores
oferecidos pela linguagem de programao
adotada. A linguagem JavaScript possui diversos
operadores e os principais so categorizados da
seguinte forma:
Aritmtico (+, -, *, /, %)
Atribuio (=, +=, -=, *=, /=, %=)
Relacional (==, !=, <, <=, >, >=)
Lgico (&&, ||)
Exemplo de Aritmtico
Exemplo de Atribuio
Simples =
Incremental +=
Decremental -=
Multiplicativa *=
Divisria /=
Modular %=

Exemplo de Relacional
Igualdade ==
Diferena !=
Menor <
Menor ou igual
<=
Maior >
Maior ou igual
>=
Exemplo de Lgico
E lgico
&&
OU lgico
||
Controle de fluxo
if e else
Para verificar uma determinada condio e decidir
qual bloco de instrues deve ser executado,
devemos aplicar o comando if.

O comando if permite que valores booleanos sejam testados. Se o
valor passado como parmetro para o comando if for true, o bloco do if
executado. Caso contrrio, o bloco do else executado.
O parmetro passado para o comando if deve ser um valor booleano,
caso contrrio o cdigo no compila. O comando else e o seu bloco
so opcionais.
Controle de fluxo
While
Atravs do comando while, possvel definir quantas
vezes um determinado trecho de cdigo deve ser
executado pelo computador.

A varivel contador indica o nmero de vezes que a mensagem Bom
Dia foi impressa na tela. O operador ++ incrementa a varivel
contador a cada rodada.
O parmetro do comando while tem que ser um valor booleano. Caso
contrrio, ocorrer um erro na execuo do script.
Controle de fluxo
for
O comando for anlogo ao while. A diferena entre
esses dois comandos que o for recebe trs
argumentos.
Exerccios
1. Crie uma pasta chamada javascript na sua pasta
de exerccios. Crie uma pgina HTML vinculada a
um arquivo JavaScript, que imprima na pgina o
seu nome 100 vezes. Salve os documentos na
pasta javascript e em seguida abra o arquivo
HTML no navegador.
2. Crie um documento HTML vinculado a um
documento JavaScript que percorra todos os
nmeros de 1 at 100. Para os nmeros mpares,
deve ser impresso um *, e para os nmeros pares,
deve ser impresso dois **. Veja o exemplo abaixo:
*
**
*
**
*
**
JavaScript: variveis e tipo de dados
Apostila de HTML
Apresentao
Variveis
Declarando variveis
Nomeando variveis
Coero
Tipos de Dados
Exerccios

Variveis - Declarando
A primeira vez que uma varivel aparece no
script a sua declarao. A primeira meno da
varivel a configura na memria, para que mais
tarde voc possa fazer referncia a ela no seu
script. Voc deve declarar variveis antes de us-
las. Para fazer isso, use a palavra-chave var.
Simples
var count;
Outras formas
var count, amount, level;
var count = 0, amount = 100;
Se voc no inicializar sua varivel na
instruo var, ela usar automaticamente o
valor undefined.
Variveis - Nomeando
A linguagem JavaScript faz distino entre
maisculas e minsculas. Isso significa que um nome
de varivel, como myCounter, diferente do nome de
varivel MYCounter. Nomes de variveis podem ser
de qualquer comprimento. As regras para a criao
de nomes de varivel legais so as seguintes:
O primeiro caractere deve ser uma letra ASCII (em
maiscula ou minscula) ou um caractere de
sublinhado (_).Observe que um nmero no pode ser
usado como o primeiro caractere.
Os caracteres subsequentes devem ser letras,
nmeros ou sublinhados (_).
O nome da varivel no deve ser uma palavra
reservada.
Variveis - Nomeando
Veja a seguir alguns exemplos de nomes de varivel
vlidos:
_pagecount
Part9
Number_Items

Veja a seguir alguns exemplos de nomes de varivel
invlidos:
99Balloons
Alpha&Beta

Quando quiser declarar uma varivel e inicializ-la, mas
no quiser dar a ela um valor especfico, atribua o
valor null.Veja um exemplo.
var bestAge = null;
var muchTooOld = 3 * bestAge;
Variveis - Nomeando
Se voc declarar uma varivel sem lhe atribuir um valor, ela ter
o valor undefined. Veja um exemplo.
var currentCount;
var finalCount = 1 * currentCount;

O valor null se comporta como o nmero 0,
enquanto undefined se comporta como o valor
especial NaN (no um nmero). Se voc comparar um
valor null e um valor undefined, ver que eles so iguais.

possvel declarar uma varivel sem usar a palavra-
chave var na declarao e atribuir um valor para ela. Trata-se de
uma declarao implcita.
noStringAtAll = "";

No possvel usar uma varivel que nunca tenha sido
declarada.
var area = length * width;
Variveis - Coero
A linguagem JavaScript uma linguagem imprecisamente
tipada, ao contrrio de linguagens solidamente tipadas como
C++. Isso significa que variveis JavaScript no tm nenhum
tipo predeterminado. Em vez de isso, o tipo de uma varivel o
tipo do seu valor. Esse comportamento permite que voc trate
um valor como se ele fosse de um tipo diferente.

Em JavaScript, voc pode realizar operaes em valores de
diferentes tipos sem causar uma exceo. O intrprete
JavaScript converte implicitamente, ou fora, um dos tipos de
dados no outro e, em seguida, realiza a operao. As regras
para coero de valores boolianos, de cadeia de caracteres e de
nmero so as seguintes:
Se voc adicionar um nmero e uma cadeia de caracteres, o
nmero ser forado para uma cadeia de caracteres.
Se voc adicionar um booliano e uma cadeia de caracteres, o
booliano ser forado para uma cadeia de caracteres.
Se voc adicionar um nmero e um booliano, o booliano ser
forado para um nmero.

Variveis - Coero
No exemplo a seguir, um nmero adicionado a uma
cadeia de caracteres resulta em uma cadeia de
caracteres.

Cadeias de caracteres so convertidas
automaticamente em nmeros equivalentes para fins
de comparao. Para converter explicitamente uma
cadeia de caracteres em um nmero inteiro, use
a funo parseInt. Para converter explicitamente uma
cadeia de caracteres em um nmero, use a funo
parseFloat.
Tipo de Dados
Primrios
Compostos
Especiais
Cadeia de Caracteres
Nmero
Booleano
Nulo
Indefinido

Tipo de Dados
Primrios
Os tipos de dados primrios (primitivos) so:
String
Nmero
Booleano

Tipo de Dados
Compostos
Os tipos de dados compostos (de referncia) so:
Object
Matriz

Tipo de Dados
Especiais
Os tipos de dados especiais so:
Nulo
Indefinido

Tipo de Dados
Cadeia de Caracteres
Um valor de cadeia de caracteres uma cadeia de zero
ou mais caracteres Unicode (letras, dgitos e sinais de
pontuao). Tipos de dados de cadeia de caracteres
so usados para representar texto em JavaScript. Voc
inclui literais de cadeia de caracteres em seus scripts ao
delimit-los por aspas simples ou duplas. Aspas duplas
podem estar contidas em cadeias de caracteres
delimitadas por aspas simples, enquanto aspas simples
podem estar contidas em cadeias de caracteres
delimitadas por aspas duplas. Veja a seguir alguns
exemplos de cadeias de caracteres:
"Happy am I; from care I'm free!"
'"Avast, ye lubbers!" roared the technician.'
"45"
'c'
Tipo de Dados
Cadeia de Caracteres continuando
Observe que JavaScript no tem um tipo para
representar um nico caractere. Para representar
um nico caractere em JavaScript, voc cria uma
cadeia de caracteres que consiste em apenas um
caractere. Uma cadeia de caracteres que contm
zero caracteres ("") uma cadeia de caracteres
vazia (de comprimento zero).
O JavaScript fornece sequncias de escape que
voc pode incluir em cadeias de caracteres para
criar os caracteres que no podem ser digitados
diretamente. Por exemplo, \t especifica um
caractere de tabulao. Para obter mais
informaes, consulte Caracteres especiais
(JavaScript).

Tipo de Dados
Nmero
Valores Inteiros
Valores inteiros podem ser nmeros inteiros positivos,
nmeros inteiros negativos e 0. Eles podem ser representados
na base 10 (decimal), na base 16 (hexadecimal) e na base 8
(octal). A maioria dos nmeros em JavaScript escrita em
decimal.
Valores de Ponto Flutuante
Valores de ponto flutuante podem ser nmeros inteiros com
uma parte decimal. Alm de isso, eles podem ser expressos
em notao cientfica. Ou seja, um "e" em maiscula ou
minscula usado para representar "dez potncia
de". JavaScript representa nmeros usando o padro de ponto
flutuante IEEE 754 de oito bytes para representao
numrica. Isso significa que voc pode escrever nmeros de
no mximo 1,79769x10
308
e de no mnimo 5x10
-324
.Um nmero
que contm um ponto decimal e um nico "0" antes desse
ponto decimal interpretado como um nmero de ponto
flutuante decimal.
Tipo de Dados
Booleano
Enquanto os tipos de dados cadeia de caracteres e
nmero podem ter um nmero praticamente
ilimitado de valores diferentes, o tipo de dados
booliano s pode ter dois. Eles so os
literais true e false. Um valor booliano um valor
verdadeiro: especifica se a condio verdadeira
ou no.

Tipo de Dados
Nulo
O tipo de dados null tem apenas um valor em
JavaScript: null. A palavra-chave null no pode ser
usada como o nome de uma funo ou varivel.
Uma varivel que contm null no contm nenhum
Nmero, Cadeia de Caracteres, Booliano, Matriz ou
Objeto. Voc pode apagar o contedo de uma varivel
(sem a excluir) atribuindo o valor null.
Observe que, em JavaScript, null no o mesmo que 0
(como no caso de C e C++). Observe tambm que o
operadortypeof em relatrios do JavaScript relatar
valores null como sendo do tipo Object, e no do
tipo null. Esse comportamento potencialmente confuso
serve para compatibilidade com verses anteriores.

Tipo de Dados
Indefinido
O valor undefined retornado quando voc usa
uma propriedade do objeto que no existe, ou uma
varivel que tenha sido declarada, mas que nunca
tenha tido um valor atribudo a ela.
voc pode verificar se uma varivel existe
comparando-a a undefined, embora seja possvel
verificar se o tipo undefined comparando o tipo
de varivel cadeia de caracteres "indefinida". O
exemplo a seguir mostra como descobrir se a
varivel x foi declarada:

Tipo de Dados
Indefinido - continuando

Tipo de Dados
Indefinido - continuando
Voc tambm pode comparar o valor indefinido a null. Esta
comparao ser true se a propriedade
forsomeObject.propnull ou se a
propriedade someObject.prop no existir.

someObject.prop == null;

Para descobrir se uma propriedade de objeto
existe, voc pode usar o operador in:
if ("prop" in someObject) // someObject has the property
'prop'

Exerccios
Escrever no caderno uma declarao de varivel
para cada tipo de dados.
Fonte das informaes
Microsoft - Referncias de API
http://msdn.microsoft.com/pt-
br/library/ie/7wkd9z69(v=vs.94).aspx
K9 Treinamentos
http://www.k19.com.br/downloads/apostilas

Apostila HTML

Uploaded by

Document Information

Original Title

Copyright

Available Formats

Share this document

Share or Embed Document

Sharing Options

Did you find this document useful?

Is this content inappropriate?

Copyright:

Available Formats

Apostila HTML

Uploaded by

Copyright:

Available Formats

Prof.

You might also like