Apostila de HTML

Prévia do material em texto

APRENDENDO HTML E CSS 
 na prática 
 
 
 
 Autora: Profª. Danielle Costa 
 
 
 
 
 
 
 
 
 
Formiga, MG 
2013 
 
 
DESENVOLVIMENTO WEB PROF. DANIELLE COSTA 
 
 2
Índice 
 
 
 
A Linguagem HTML ................................................................................................................. 3 
Introdução ................................................................................................................................ 3 
Estrutura da página .................................................................................................................. 3 
Estrutura do documento HTML .............................................................................................. 3 
Formatação do Texto ............................................................................................................... 5 
Definição de Listas .................................................................................................................. 7 
Imagens .................................................................................................................................. 10 
Tabelas ................................................................................................................................... 11 
Hyperlinks ............................................................................................................................. 12 
Formulários ............................................................................................................................ 14 
Frames ................................................................................................................................... 19 
Tags especiais ........................................................................................................................ 22 
Elementos Div ....................................................................................................................... 25 
 
CSS (Cascading Style Sheets) - Folhas de estilo em cascata ................................................ 27 
Introdução .............................................................................................................................. 27 
Como criar estilos .................................................................................................................. 27 
Seletores ................................................................................................................................ 28 
As folhas de estilo ................................................................................................................. 29 
Modelo de caixa em CSS ...................................................................................................... 31 
Layers .................................................................................................................................... 39 
Vantagens e Desvantagens .................................................................................................... 39 
Atributos do CSS ................................................................................................................... 39 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
DESENVOLVIMENTO WEB PROF. DANIELLE COSTA 
 
 3
A Linguagem HTML 
 
Introdução 
 
HTML (Hypertext1 Markup Language) - é uma linguagem padrão de marcação (tags) de 
hipertexto, não-proprietário, para exibição de conteúdo no World Wide Web da Internet. 
Não é considerada uma linguagem de programação porque não possui comandos para tomada 
de decisões (if..then..else), estruturas de repetição (do..while, repeat..while), funções etc. 
 
Compõe-se de diretivas (tags e atributos) que são interpretadas pelos navegadores. Ao 
interpretar as diferentes diretivas temos a apresentação de uma página seguindo a formatação 
de texto, cores e imagens definida pelo “autor”. 
Página - é um hipertexto no WWW que associa diferentes tipos de mídia como textos, 
imagens, áudio e vídeo, conectados por hiperlinks. Pode ser única ou estar ligada a outras 
páginas formando um sistema de informações ou um website. Vale a pena ressaltar que uma 
página html é composta de texto e deve ser salva como htm ou html. 
Página principal ou Home Page - A página de entrada ou página inicial. 
 
Editores gráficos - O uso dos editores permitem que o autor crie uma página sem conhecer os 
códigos da linguagem HTML. São exemplos de editores HTML: Adobe Dreamweaver, Nvu, 
Edit Plus, Microsoft FrontPage e Mozilla Composer,etc. Além de Editores existem também 
programas Assistentes que transformam documentos gerados em MSWord, PowerPoint e 
Excel em páginas HTML. 
 
 
Estrutura da página 
 
<HTML> e </HTML> - São tags que dizem que o documento é do tipo html, ou seja, uma 
página web. 
 
Estrutura do documento HTML 
 
• cabeçalho <HEAD> e </HEAD> - aqui especifica-se o título da página <TITLE> e 
</TITLE>, será apresentado na barra superior do navegador. 
 
• Corpo <BODY> e </BODY> - aqui especifica-se: cores de fundo, texto, links, e o 
início do documento. Tudo que estiver entre essas tags é interpretado como “corpo” do 
documento e será exibido pelo navegador 
 
Propriedades aplicadas a tag body, se não forem aplicadas assumem um valor padrão: 
 
1
 Um hipertexto contém um conjunto de textos interligados e recursivos, ele não começa em lugar algum 
nem tem final e apresenta várias seqüências de leitura. 
 
DESENVOLVIMENTO WEB PROF. DANIELLE COSTA 
 
 4
 
• bgcolor - cor de fundo para a página 
• background - imagem nos formatos .jpg ou .gif usada de fundo da página 
• text - define uma cor para o texto 
• link - define uma cor para os links 
• vlink - define cor para os link já visitados 
• alink - define a cor para o link na hora que for ativado 
• topmargin -controla a distância do corpo do texto e a margem superior 
• bottommargin - controla a distância do corpo do texto e a margem inferior 
• leftmargin - controla a distância do corpo do texto e a margem esquerda 
• rightmargin - controla a distância do corpo do texto e a margem direita 
 
Exemplo 1 
<BODY BACKGROUND=nome_imagem BGCOLOR=nome_cor 
TEXT=nome_cor LINK=nome_cor VLINK=nome_cor ALINK=nome_cor> 
 
Exemplo 2 
<BODY BACKGROUND=nome_imagem BGCOLOR=#RRGGBB 
TEXT=#RRGGBB LINK=#código_cor VLINK=#RRGGBB 
ALINK=#RRGGBB > 
 
A Figura 1 abaixo exibe o código HTML visualizado por meio do navegador. 
 
 
 
Figura 1 – Código de uma página HTML 
DESENVOLVIMENTO WEB PROF. DANIELLE COSTA 
 
 5
Formatação do Texto 
 
O texto pode ser formatado com as tags de tamanho, itálico, negrito e fonte monoespaçada, 
sobrescrito e subscrito. Para todas elas é necessário delimitar o início e o fim do texto a ser 
formatado. 
 
• Cor e fonte : 
<font color = nome_cor> Texto </font> 
<font face = tipo_letra > Texto </font> 
<font size =+n>Texto </font> , onde n seria o incremento ao tamanho original. 
 
 Tabela 1 – Cores 
Nome da cor (português) Nome da cor (inglês) Hexadecimal 
Bege Beige #F5F5DC 
Preta Black #000000 
Azul Blue #0000FF 
Ouro Gold #FFD700 
Verde Green #008000 
Cinza Gray #808080 
Amarela Yellow #FFFF00 
Magenta Magenta #FF00FF 
Marrom Brown#A52A2A 
Laranja Orange #FFA500 
Vermelha Red #FF0000 
Rosa Pink #FFC0CB 
Púrpura Purple #800080 
Branca White #FFFFFF 
 
 
 
Tipos de fonte definidas pela linguagem HTML: 
 
• Cabeçalhos : 
<H1> Tamanho H1</H1> 
<H2> Tamanho H2</H2> 
<H3> Tamanho H3</H3> 
<H4> Tamanho H4</H4> 
<H5> Tamanho H5</H5> 
<H6> Tamanho H6</H6> 
Exemplo 3: h6, h5, h4, h3, h2, h1 
 
DESENVOLVIMENTO WEB PROF. DANIELLE COSTA 
 
 6
• Outros estilos : 
<B> Texto em Negrito ( Bold ) </B> 
 --Texto em Negrito ( Bold ) 
<I> Texto em Itálico </I> 
--Texto em Itálico 
<TT> Texto com fonte monoespaçada </TT> 
--Texto com fonte monoespaçada 
<U> Texto sublinhado </u> 
Texto sublinhado 
<SUP> Texto sobrescrito </SUP> 
--
Texto sobrecrito 
<SUB> Texto subscrito </SUB> -- Texto subscrito 
 
Acentuação e Caracteres Especiais 
 
A codificação2 permite a qualquer equipamento interpretar os códigos e exibir na tela o 
caractere desejado. Funcionamento: 
• Primeiro o caractere "&" 
• Seguido da letra que deverá ser acentuada, pode ser minúscula ou maiúscula 
• Veja a tabela abaixo e coloque o código do acento desejado 
• Acrescente o caractere " ; " ( ponto de vírgula ) 
 
Exemplo 4 : 
 diário = di&aacute;rio 
 natação = nata&ccedil;&atilde;o 
 
 
Acentos 
 
 
 
 
Caracteres Especiais 
 
 
 
 
Disposição do Texto na Página 
 
Diretivas para uma formatação básica de um texto em uma página: 
 
<CENTER>: centraliza o texto em relação à página 
<BR>: quebra de linha, iniciando o texto seguinte na linha logo abaixo 
<P>: força o fim de um parágrafo, ou seja, pula uma linha antes de iniciar outro parágrafo 
 
2
 HTML não diferencia maiúsculas ou minúsculo nos identificadores de tags e nome de atributos 
Agudo Grave Circunflexo Til Trema Cedilha 
&_acute &_grave &_circ &_tilde &_uml; &_cedil; 
E < > (c) Espaço em Branco 
&amp &lt &gt &copy &nbsp 
DESENVOLVIMENTO WEB PROF. DANIELLE COSTA 
 
 7
<HR>: régua horizontal; inclui uma linha horizontal no texto, separando o texto em blocos 
width = _% comprimento. Ex. width=50% 
size = _ espessura do traço. Ex. size=6 
<PRE> : respeita a formatação original do texto inserido na página 
 
 
Definição de Listas 
 
Listas são utilizadas para organizar seu texto em uma relação de itens e subitens, ordenados ou 
não. Tipos de listas: Listas ordenadas, listas não-ordenadas e listas de definição. 
 
Listas Ordenadas 
<ol> - inicia uma lista 
type - define o tipo de numeração da lista que pode ser: 
A - Letras maiúsculas 
a - Letras minúsculas 
I - Algarismos romanos 
1 - Números arábicos 
</ol> - finaliza a lista 
<li> - determina um item da lista 
 
Exemplo 5: 
Código html <ol type=”1”> 
<li>Primeiro 
<li>Segundo 
<li>Terceiro 
</ol> 
No browser 1. Primeiro 
2. Segundo 
3. Terceiro 
 
Listas Não Ordenadas 
<ul> - marca o início da lista 
type - define o tipo de marcador de cada item da lista que pode ser: 
disc - pequeno disco sólido 
square - quadrado preenchido 
circle - círculo cheio 
</ul>- marca o final da lista 
<li> - determina um item da lista 
 
Exemplo 6: 
Código html <ul type=”disc”> 
<li>Primeira 
<ul> 
<li>Filha 
<li>Filha 
</ul> 
<li>Segunda 
<li>Terceira 
</ul> 
No browser 
 
• Primeira 
� Filha 
� Filha 
• Segunda 
• Terceira 
DESENVOLVIMENTO WEB PROF. DANIELLE COSTA 
 
 8
Listas de Definição 
<dl> marca o início da lista 
<dt>indica termo a ser definido 
<dd>indica a definição do termo acima 
 
Exemplo 7: 
Código html <dl> 
<dt> LW 
<dd>Linguagem Web 
<dt>ED 
<dd>Estrutura de Dados 
</dl> 
No browser 
 
LW 
Linguagem Web 
ED 
Estrutura de Dados 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
DESENVOLVIMENTO WEB PROF. DANIELLE COSTA 
 
 9
Exercícios de fixação: 
 
1) Crie uma página chamada ex1.html e deixe-a com o seguinte layout: 
a) O texto “Aula de HTML” deve ter tamanho 4 e ficar centralizado. 
b) Após o texto incluir uma Linha Horizontal tamanho 2 e cor Cinza. 
c) O texto “Estrutura da página” deve ser em fonte Arial, tamanho 3 e cor Azul. 
d) O texto “Estrutura do Documento” deve ser em fonte Arial, Negrito, tamanho 3 e 
cor Verde. 
e) O texto “Formatação de Texto” deve ser em fonte Arial, Itálico, tamanho 3, cor 
vermelha. 
f) O texto “Disposição do texto nas páginas” deve ser em texto pré-formato, fonte 
Arial, tamanho 5 e cor Magenta. 
 
2) Crie uma página chamada ex2.html e deixe-a com o seguinte layout: 
a) O cabeçalho “Definição de Listas:” deve ter tamanho 4. 
b) Após o cabeçalho incluir uma linha horizontal tamanho 2 e cor cinza. 
c) Crie as listas com os seguintes itens: 
1. Lista Ordenada 
1. Primeiro Item da lista ordenada 
2. Segundo Item da lista ordenada 
2. Lista não Ordenada 
� Primeiro Item da lista não ordenada 
� Segundo Item da lista não ordenada 
3. Lista de Definição 
 E1 
 Exemplo1 
 
Cada item deve ter fonte tamanho 2, alternar as cores das linhas em Verde e Vermelho. 
 
3) Utilizar a página do ex1.html e inserir os comandos necessários para que a mesma 
tenha uma cor de fundo. Altere o exemplo para receber como fundo uma imagem 
"fundo.gif". 
 
 Comandos mínimos para se criar uma página HTML: 
<html> 
 <head><title></title></head> 
 <body> 
 </body> 
</html 
DESENVOLVIMENTO WEB PROF. DANIELLE COSTA 
 
 10
Imagens 
 
A tag <img> inclui uma imagem dentro de um documento HTML. Elas podem ser usadas 
Em conjunto com alguns parâmetros como: 
 
border para determinar a moldura da imagem. 
Exemplo 8: Imagem com borda: 
 
<IMG border=6 SRC=”imagens/figura.gif”> 
 
width para determinar a largura da imagem 
height para determinar a altura da imagem 
Exemplo 9: Imagem com limitação de Altura e Comprimento: 
 
<IMG width=50 height=90 SRC=”figura.gif”> 
 
Alinhar um texto em relação a uma imagem. Parâmetros de alinhamento : 
align=left para alinhar a imagem a esquerda do texto. 
Exemplo 10: Imagem com texto alinhado a esquerda 
 
Texto que acompanha a figura. 
 
 
 
 
 
<IMG align=left SRC=”figura.gif”> Texto 
 
Outros alinhamentos: 
align=right para alinhar a imagem a direita do texto 
<IMG align=right SRC=”figura.gif”> 
align=top para alinhar o texto com o topo da imagem. 
<IMG align=top SRC=”figura.gif”>. 
align=bottom para alinhar o texto com a parte inferior da imagem. 
<IMG align=bottom SRC=”figura.gif>. 
align=middle para alinhar o texto com o meio da imagem. 
Imagem com texto alinhado a meia altura da imagem 
<IMG align=middle SRC=”figura.gif”> 
DESENVOLVIMENTO WEB PROF. DANIELLE COSTA 
 
 11
Tabelas 
 
Além do propósito original de exibir dados tabulados, as tabelas3 passaram a ser usadas com 
sucesso para posicionar elementos nas páginas. As tags <TABLE> </TABLE> identificam a 
tabela, especifica a espessura da borda com o parâmetro BORDER. 
 
<th>... </th> “table head” define o cabeçalho de cada coluna 
<tr> ... </tr> “table row” delimita a linha 
<td> ... </td> “tabledata” delimita cada elemento da tabela, cada célula. 
 
Atributos que podem ser usados nas tabelas: 
colspan : específica quantas colunas da tabela a célula ocupará 
rowspan : específica quantas linhas da tabela a célula ocupará 
width : define a largura exata da célula 
height : define a altura exata da célula 
align : alinhamento horizontal ( right, center, left ) 
valign : alinhamento vertical ( top, middle, bottom ) 
cellspacing: define o espaço entre as células 
 
Exemplo 11: 
<table border=4 height =”300”> <th>Coluna 1</th><th>Coluna 2</th> 
<tr><td width = “150”>linha1, coluna 1</td><td> linha 1, coluna 2</td></tr> 
<tr><td width = “150”>linha 2, coluna 1</td><td>linha 2, coluna 2</td></tr> 
</table> 
 
Resultado na tabela: 
Coluna 1 Coluna 2 
linha 1, coluna 1 linha 1, coluna 2 
linha 2, coluna 1 linha 2, coluna 2 
 
Exemplo 12: 
 
<table border=4> 
<th colspan=2>Colunas 1 e 2</th> 
<tr><td>linha1, coluna 1</td><td> linha 1, coluna 2</td></tr> 
<tr><td>linha 2, coluna 1</td><td>linha 2, coluna 2</td></tr> 
<th rowspan=3>3 linhas</th> 
<td>uma linha</td> 
<tr><td>duas linhas</td></tr> 
<tr><td>três linhas</td></tr> 
</table> 
 
 
 
3
 Dica: Planeje cada tabela antes de iniciar a codificação. Faça um esboço no papel para ter idéia da estrutura. O 
esquecimento de uma tag pode comprometer a estrutura da tabela. O ideal é escrever a tag de fechamento sempre 
após a tag de abertura, antes de incluir o conteúdo. 
DESENVOLVIMENTO WEB PROF. DANIELLE COSTA 
 
 12
Resultado na tabela: 
Colunas 1 e 2 
linha 1, coluna 1 linha 1, coluna 2 
linha 2, coluna 1 linha 2, coluna 2 
 
3 linhas 
uma linha 
duas linhas 
três linhas 
 
 
Hyperlinks 
 
A idéia central dos hyperlinks é proporcionar liberdade ao usuário para navegar entre 
diferentes documentos, clicando em termos ou frases que levem a outros documentos. 
 
Fazer links para outros documentos ( páginas, imagens, sons, etc ), através da tag <A> </A>, 
chamadas de âncoras (anchor tag). Informar o HREF(endereço de onde está a página que será 
acessada ) e o TEXTO/IMAGEM que indicará o link. 
 
< A HREF=http://endereço/documento> texto/imagem </A> 
 
Referência a outro documento pode ser feita por : 
 
� Caminho Absoluto : corresponde ao endereço completo do documento, 
utilizado quando os documentos estão em servidores ou pastas diferentes. 
< A HREF=http://máquina/diretório/pagina.html > texto/imagem </A> 
 
� Caminho Relativo : quando o documento a ser acessado está no mesmo 
servidor ou pasta que a página atual. 
< A HREF=../outra-página.html > texto/imagem </A> 
 
Um link “mailto” permite que os usuários enviem mensagens para um endereço de e-mail 
definido, clicando no hyperlink. 
 
 
Exemplo 13 
 
<html> 
 <head> 
 <title> Usando Hyperlinks </title> 
 </head> 
 <body> 
 <A HREF=”ex1.html” > Exercício de Fixação 1 </A><br> 
 <A HREF=”ex2.html” > Exercício de Fixação 2 </A><br> 
 <A HREF=”mailto:aluno1@ifmg.edu.br”> E-mail </A> 
</body> 
</html 
DESENVOLVIMENTO WEB PROF. DANIELLE COSTA 
 
 13
Exercícios de fixação: 
 
4) Crie uma página chamada ex4.html e deixe-a com o seguinte layout: 
 
 
 
5) No ex4.html adicione hyperlinks nos nomes dos alunos. Cada hyperlink deve 
direcionar para a página pessoal de cada aluno. 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
DESENVOLVIMENTO WEB PROF. DANIELLE COSTA 
 
 14
Formulários 
 
Os formulários em uma página Web permitem coletar informações dos usuários que visitam 
uma página. Usando campos de entrada de textos, menus e botões é possível colher dados para 
diversos fins.Também definimos que ação será tomada assim que o formulário for preenchido 
e enviado. 
 
É preciso saber que o HTML oferece apenas os meios para receber as informações do usuário 
e enviá-las a um servidor ou endereço de e-mail. O HTML não provê meios para tratar ou 
armazenar essas informações. Para manipular e validar os dados inseridos pelo usuário antes 
de enviá-los ao servidor é preciso ainda de uma linguagem de script cliente-side (do lado do 
cliente) como o Javascript por exemplo. 
 
 
Definição do Formulário 
 
Um formulário é definido pelas tags <form>e</form>. 
A tag de formulário mais usada é a tag <input>. O tipo de input é especificado com o atributo 
type. Os tipos de input mais comumente usados são explicados abaixo. 
 
Campos Tipo Texto 
<FORM> 
Nome:<INPUT TYPE=TEXT NAME="Nome"> 
Senha:<INPUT TYPE=PASSWORD 
NAME="Senha" > 
</FORM> 
 
Alguns Atributos 
VALUE- inicializa o campo com um valor definido. 
 
MAXLENGTH – define a quantidade máxima de 
caracteres permitidos no campo 
 
DIABLED – desabilita o campo para digitação 
 
<FORM> 
Nome: <INPUT TYPE=TEXT NAME="Nome" 
VALUE="Danielle Costa"> 
Senha:<INPUT TYPE=PASSWORD 
NAME="Senha" MAXLENGTH="8"> 
</FORM> 
 
DESENVOLVIMENTO WEB PROF. DANIELLE COSTA 
 
 15
SIZE- Delimita o tamanho do espaço para entrada do 
valor nos campos. 
 
 
<FORM> 
Nome: <INPUT TYPE=TEXT NAME="Nome" 
SIZE=30 > 
Senha:<INPUT TYPE=PASSWORD 
NAME="Senha"> 
</FORM> 
 
 
Campos Tipo Múltipla Escolha 
<FORM> 
Frutas : 
<INPUT TYPE=CHECKBOX NAME="fruta" 
VALUE="Abacaxi">Abacaxi 
<INPUT TYPE=CHECKBOX NAME="fruta" 
VALUE="Morango">Morango 
<INPUT TYPE=CHECKBOX NAME="fruta" 
VALUE="Limão">Limão 
<INPUT TYPE=CHECKBOX NAME="fruta" 
VALUE="Pera">Pera 
<INPUT TYPE=CHECKBOX NAME="fruta" 
VALUE="Laranja">Laranja 
</FORM> 
 
O atributo CHECKED serve para inicializar um item 
como já escolhido. 
 
 
 
Campos Tipo Escolha Única 
<FORM> 
Estado Civil : 
<INPUT TYPE=RADIO NAME="estciv" 
VALUE="Solteiro">Solteiro 
<INPUT TYPE=RADIO NAME="estciv" 
VALUE="Casado">Casado 
<INPUT TYPE=RADIO NAME="estciv" 
VALUE="Viuvo">Viuvo 
<INPUT TYPE=RADIO NAME="estciv" 
VALUE="Divorciado">Divorciado 
<INPUT TYPE=RADIO NAME="estciv" 
VALUE="Outros">Outros 
</FORM> 
 
 
DESENVOLVIMENTO WEB PROF. DANIELLE COSTA 
 
 16
Botões de Ação 
SUBMIT - Envia os dados preenchidos no formulário 
para o servidor, iniciando a execução do programa 
especificado no atributo ACTION. 
 
RESET - Reinicializa o formulário com os valores 
previamente definidos. O atributo VALUE define a 
mensagem sobre o botão. 
 
FILE - Exibe a janela para procura de um arquivo 
 
HIDDEN - Além dos campos definidos no formulário 
que estão visíveis e serão preenchidos pelo visitante 
podemos definir campos não visíveis que estarão 
passando parâmetros para o programa a ser executado. 
 
<FORM> 
<INPUT TYPE=SUBMIT VALUE="Enviar"> 
<INPUT TYPE=RESET VALUE="Cancelar"> 
</FORM> 
 
 
Botões de Seleção 
SELECT- é utilizada juntamente com a diretiva 
<OPTION> para definir uma lista de valores a serem 
selecionados. 
Pode-se definir um valor como padrão usando o 
atributo <OPTION SELECTED>valor 
O atributo SIZE é utilizado para se apresentar mais 
de um valor na página. 
 
<FORM> 
<SELECT NAME="plataforma" SIZE=3> 
<OPTION>PC 
<OPTION>Workstation 
<OPTION>Alpha 
<OPTION>Mainframe IBM 
</SELECT> 
</FORM> 
 
 
Àrea de Texto 
A Diretiva TEXTAREA define uma área para entrada de textos. Os atributos COLS e 
ROWS definem o tamanho da janela. 
 
<FORM><TEXTAREA COLS=60 ROWS=10 NAME="texto">Área para entrada de texto 
</TEXTAREA> 
</FORM> 
DESENVOLVIMENTO WEB PROF. DANIELLE COSTA 
 
 17
 
 
 
Passagem de parâmetros pelo formulário 
 
O atributo METHOD define o método de acesso a URL onde está o script, programa a ser 
executado no servidor, especificado pelo atributo ACTION. 
 
<FORM METHOD=GET/POST4 ACTION= script ></FORM> 
 
Exemplo 14: 
 
<html> 
 <head> 
 <title> Usando tipo oculto </head> 
 <body> 
 <form method=post action= teste.js> 
 <input type=submit name=”enviar” value="enviar informações"> 
 </form> 
</body> 
</html> 
 
 
 
 
 
 
 
 
4
 O método GET envia os dados do formulário em pares/valor anexados à URL descrita em action, separando 
cada campo como caractere “?”. Não é recomendado quando não se deseja que o usuário veja o que está sendo 
enviado. O método POST envia os dados ocultos no corpo da mensagem. 
DESENVOLVIMENTO WEB PROF. DANIELLE COSTA 
 
 18
Exercícios de fixação: 
 
6) Construa um formulário HTML com os seguintes campos: 
a) Nome: Texto, usuário pode digitar no máximo 20 caracteres. 
b) Idade: Caixa de seleção com os itens: 
Entre 0 e 20 
Entre 21 e 29 
Entre 30 e 35 
36 ou Mais 
Sexo: Dois botões de radio, tendo um radio o value “Masculino” e outro radio com o 
value “Feminino”. 
c) E-Mail: Texto, usuário pode digitar no máximo 40 caracteres. 
d) Observações: TextArea com sete linhas e 40 colunas. 
 
7) Construa o código HTML para o formulário mostrado abaixo. 
 
DESENVOLVIMENTO WEB PROF. DANIELLE COSTA 
 
 19
Frames 
 
Frames ou quadros permitem a divisão da tela de exposição do navegador em diferentes áreas. 
Assim, é possível, por exemplo, que se determine uma área da tela para ser a página principal 
eoutras áreas para menus ou links. 
 
O Frameset ou conjunto de frames, indica como será estruturado cada quadro na tela em 
termos de Linhas (rows) e colunas (cols), e quais páginas deverão ser apresentadas em cada 
um desses quadros. 
 
É possível ainda definir atributos em nosso Frameset que controlam a visualização e 
navegação coordenada entre os frames. 
 
Atributos de controle 
 
• Margem: 
 marginwidth : determina as margens direita e esquerda do frame 
 marginheight : determina as margens superior e inferior do frame 
 
• Barra de rolagem : 
Scrolling : determina se o frame terá barra de rolagem se necessário ou não. 
Eliminação da barra de rolagem 
< FRAME src = ... SCROLLING = "NO" > 
 
• Alteração da estrutura : 
Os navegadores permitem que o visitante altere a posição dos frames. Para tanto o 
atributo noresize inibe esta possibilidade e torna os frames fixos conforme definido. 
< FRAME src = ... NORESIZE> 
 
• Bordas : 
É possível definir se nossa estrutura de quadros será apresentada ressaltando-se as bordas 
entre os frames ou não usando os atributos frameborder e border. 
 
Eliminação das bordas dos frames: 
< FRAMESET src = ... FRAMEBORDER="NO" > 
 
Eliminação do espaço entre os frames : 
< FRAMESET src = .... FRAMEBORDER="NO" BORDER="0"> 
 
Direcionamento 
 
O atributo target (alvo) é o que indica onde uma página deverá ser apresenta assim que o 
visitante clica em um link . Por definição uma nova página será apresentada na mesma área 
onde está link. 
Para redirecionar a página para outra área temos as possibilidades a seguir que devem constar 
na definição no link ( <a href=pagina.html target= ... > ) : 
 
DESENVOLVIMENTO WEB PROF. DANIELLE COSTA 
 
 20
target="nome da área " : carrega a página na área especificada. 
target=_top : limpa a tela e abre a nova página ocupando toda a tela. 
target=_blank : abre uma nova janela para exibir a página. 
target=_self : carrega a página na mesma área do link. Opção é default. 
 
Exemplo 15: 
 
Como montar dois frames em coluna: 
<FRAMESET COLS="x, y"> 
<FRAME SRC="col1.html"> 
<FRAME SRC="col2.html"> 
</FRAMESET> 
 
Dois frames em linha: 
<FRAMESET ROWS="x, y"> 
<FRAME SRC="lin1.html"> 
<FRAME SRC="lin2.html"> 
</FRAMESET> 
 
Para montar esta estrutura abaixo, deve-se criar primeiro dois frames em coluna e compor a 
segunda coluna com dois frames em linha: 
<FRAMESET COLS="x, y"> 
<FRAME SRC="col1.html"> 
<FRAMESET ROWS="x, y"> 
<FRAME SRC="lin1.html"> 
<FRAME SRC="lin2.html"> 
</FRAMESET> 
</FRAMESET> 
 
Para montar esta estrutura abaixo, deve-se criar primeiro dois frames em linha e compor a 
segunda linha com dois frames em coluna: 
<FRAMESET ROWS="x, y"> 
<FRAME SRC="lin1.html"> 
<FRAMESET COLS="x, y"> 
<FRAME SRC="col1.html"> 
<FRAME SRC="col2.html"> 
</FRAMESET> 
</FRAMESET> 
 
 
 
 
 
 
 
 
DESENVOLVIMENTO WEB PROF. DANIELLE COSTA 
 
 21
Exercícios de Fixação 
 
8) Construa a página abaixo utilizando frames. 
 
 
 
9) Altere o exercício anterior para exibir bordas e depois barra de rolagem. 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
DESENVOLVIMENTO WEB PROF. DANIELLE COSTA 
 
 22
Tags especiais 
 
Músicas 
 
Inserir música em uma página web é relativamente fácil nos dias de hoje. No passado, várias 
tags tinham de ser usadas porque os navegadores não tinham um padrão uniforme para 
arquivos de mídia incorporados. 
 
A música é inserida em uma página o uso da tag <embed>. Há outras maneiras de ligar a 
música, mas incorporar agora é considerado o padrão para a mídia de inserção. A tag 
<embed> não requer um marca de fechamento. Os seus controles, incluindo Play, Stop, Pause 
e volume, já estão incluídos. 
 
Para personalizar a aparência do player certifique-se de definir os seguintes atributos. 
 
• width - a largura do player de mídia. 
• height - a altura do player de mídia. 
• hidden - determina se o media player é visível. Se esse valor é definido como "true", o 
media player não será exibido. Recomenda-se usar esse atributo apenas se você sabe que 
seus visitantes não vão querer a opção de parar a música que está tocando em sua página 
web (Os valores são "true" ou "false"). 
• autostart - permite o player para começar automaticamente (os valores são "true" e 
"falso"). 
• loop - define se o arquivo de mídia vai repetir (os valores são "true" e "falso"). 
• volume - define o volume do arquivo de mídia (os valores variam de "0" a "100"). 
 • src - define a localização do arquivo para incorporar na página. 
 
 
Exemplo 16: 
 
<html> 
<head><title> Player de música</title></head> 
<body> 
<p>Para parar a música pressione Stop/Pause</p> 
<embed src="beethoven.mid" width="360" height="165" autostart="true" loop="false" 
volume=”60”> 
</body> 
</html> 
 
 
Vídeos 
 
Os arquivos de vídeo, incluindo vídeos do YouTube, são incorporados em um documento 
HTML usando a tag <embed>. O atributo src define o arquivo de vídeo para incorporar na 
página. 
 
DESENVOLVIMENTO WEB PROF. DANIELLE COSTA 
 
 23
Flash (.swf) e (Mov) também são tipos de arquivo suportados pela tag <embed>. 
• swf - tiposde arquivo Macromedia Flash - compressão muito alta, ótimo para a web. 
• wmv - Microsoft Window Media - de boa qualidade, compressão variável. 
• mov - formato da Apple filme Quick Time - de boa qualidade, compressão variável. 
• mpeg - O padrão aceito para arquivos da web filme criado pelo Moving Pictures Expert 
Group de boa qualidade, compressão variável. 
 
É possível também simplesmente colocar a URL de seus arquivos de mídia no valor do 
atributo href, bem como o conceito de imagens "thumbnailing". 
 
Exemplo 17: 
 
<html> 
<head><title> Vídeo em flash</title></head> 
<body> 
<p>Para parar o vídeo pressione Stop/Pause</p> 
<a href="http://www.tizag.com/pics/flash/motiontween1easy.swf"> 
motiontween1easy.swf </a> 
</body> 
</html> 
 
Vídeos do YouTube podem ser incluídos em documentos HTML, e o Google oferece o código 
para fazê-lo. 
 
Exemplo 18: 
 
<html> 
<head><title> Vídeo do YouTube</title></head> 
<body> 
<p>Para parar o vídeo pressione Stop/Pause</p> 
<object width="425" height="344"><param name="movie" value=" 
http://www.youtube.com/v/opVb89Cmrtkamp;hl=enamp;fs=1”> 
</param> <param name="allowFullScreen" value="true></param> 
</param><param name="allowscriptaccess" value="always"></param> 
<embed src="http://www.youtube.com/v/opVb89Cmrtk&hl=en&fs=1" type="application/x-
shockwave-flash" allowscriptaccess="always" allowfullscreen="true" width="425" 
height="344"> 
<embed src="http://www.youtube.com/v/opVb89Cmrtk&hl=en&fs=1"type="application/x-
shockwave-flash" allowscriptaccess="always" allowfullscreen="true" width="425" 
height="344”> 
</embed> 
</object> 
</body> 
</html> 
 
 
 
DESENVOLVIMENTO WEB PROF. DANIELLE COSTA 
 
 24
Exercícios de Fixação 
 
10) Altere o exercício anterior para exibir no índice músicas e vídeos. 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
DESENVOLVIMENTO WEB PROF. DANIELLE COSTA 
 
 25
Elementos Div 
 
A tag <div> nada mais é do que uma unidade de recipiente que encapsula outros elementos da 
página e divide o documento HTML em seções. Os desenvolvedores da Web usam elementos 
<div> para agrupar elementos HTML e aplicar estilos CSS a elementos de uma só vez. Por 
exemplo, envolvendo um conjunto de elementos de parágrafo em um elemento <div>, o 
desenvolvedor pode tirar proveito de estilos CSS e aplicar uma fonte de todos os parágrafos de 
uma só vez, aplicando um estilo de fonte para a marca <div> em vez de codificar o mesmo 
estilo de cada elemento do parágrafo. 
Existem muitos layouts de blogs baseados em tags "div", justamente porque você pode 
atribuír-lhes altura/largura e a distância do canto superior esquerdo da janela do navegador 
esquerda/superior. Mais as opções de fundo ou cor de fundo, e jogar o conteúdo lá dentro e 
está tudo pronto! Mas cuidado: Não são todos os navegadores que interpretam bem estes 
códigos todos. 
 
Exemplo 19: 
 
<html> 
<head><title> Exemplo de tag div</title></head> 
<body> 
<div id="myDiv" name="myDiv" title="Examplo Div Elemento" style="font-family: 
Helvetica; font-size: 12pt; border: 1px solid black;"> 
 <div id="subDiv1" name="subDiv1" title="Subdivision Div Element" style="color: 
#FF0000; border: 1px dotted black;"> 
 <h5>Seção 1</h5> 
 <p>O site é dividido em seções. </p> 
 <p>Cada seção tem seu significado e carrega informações de diversos assunt</p> 
 </div> 
 <br /> 
 <div id="subDiv2" name="subDiv2" title="Subdivisao Div Elemento" style="color: 
#FF00FF;border: 1px dashed black;"> 
 <h5>Seção 2</h5> 
 <p>Este parágrafo será seu parágrafo de conteúdo..</p> 
 <p>Este outro parágrafo será o de artigos.</p> 
 </div> 
</div> 
</body> 
</html> 
 
 
 
 
 
DESENVOLVIMENTO WEB PROF. DANIELLE COSTA 
 
 26
Exercícios de Fixação 
 
11) Imagine que exista uma seção chamada NOTÍCIAS: 
1. 
2. 
3. ... 
Dentro dessa seção há 3 colunas de assuntos diversos que dividem as chamadas 
1. 
2. 
3. ... 
4. 
5. 
6. ... 
7. 
8. 
9. ... 
Suponha que cada uma colunas seja de um assunto diferente, por exemplo: Esporte, Política e 
Educação. Crie uma página HTML utilizando a tag <div> para dividir as colunas em 3 seções 
diferentes. 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
DESENVOLVIMENTO WEB PROF. DANIELLE COSTA 
 
 27
CSS (Cascading Style Sheets) - Folhas de estilo em cascata 
 
Introdução 
 
Todo documento escrito utiliza certos elementos de desenho para formatar seções de texto a 
fim de manter a mesma aparência, seguir um padrão. Por exemplo, um elemento de desenho 
Heading 1 é geralmente alguma fonte grande que identifica todas as principais divisões de 
tópicos de um capítulo, artigo ou página da web. Um elemento de desenho Heading 2 
identifica todos os títulos dos subtópicos. A HTML inclui uma tag para praticamente todos os 
elementos de desenho comumente utilizados. 
 
No passado, a tag <H1> em quase todos os web sites parecia a mesma, o texto preto era 
consideravelmente maior que o corpo do texto normal. Se você quisesse fazer seus próprios 
títulos diferenciados, tinha que formatar cada tag de título individualmente, utilizando tags 
<FONT> ou similares. 
 
As folhas de estilo em cascata mudam tudo isso. Com uma folha de estilo, é possível fazer 
uma "declaração global", como "quero que todos os meus títulos <H1> sejam verdes". É 
preciso dizer isso somente uma vez e cada título <H1> em seu site será verde. Se depois 
decidir que azul é uma cor melhor, não é preciso voltar e alterar cada tag <H1> para a cor 
azul. Em vez disso, basta alterar o estilo - a "regra" - para "quero que todos os meus títulos 
<H1> sejam azuis". 
 
Como criar estilos 
 
As formatações do CSS são normalmente aplicadas aos elementos (tags) do HTML, como, por 
exemplo, nos elementos table, p, h1 ou body. No CSS esses elementos são chamados 
seletores. 
 
Cada estilo criado é definido como uma regra CSS. Cada regra deve utilizar a seguinte sintaxe: 
elemento {atributo1: valor; atributo2: valor ...} 
Elemento - descreve o elemento de design ao qual o estilo será aplicado. 
Atributo5 - o aspecto específico do elemento que você quer usar como estilo. Deve ser um 
nome de atributo CSS válido, como o atributo font-size. 
Valor - a configuração aplicada ao atributo. Deve ser uma configuração válida para o atributo 
em questão, como 20pt para font-size. 
Atributo: valor - parte da declaração da regra. É possível atribuir múltiplas declarações 
separando-as por ponto-e-vírgula (;). 
 
5
 O w3c apresenta um guia de referência completo de atributos CSS. O guia está disponível no endereço: 
http://www.w3c.br/divulgacao/guiasreferencia/css2/ 
DESENVOLVIMENTO WEB PROF. DANIELLE COSTA 
 
 28
Exemplo 1 
H2 {font-size: 24pt; color: blue} 
Todos os títulos de nível 2 (tags <H2>) devem ter tamanho de 24 pontos e cor azul; 
 
Seletores 
 
Existem diversas maneiras de selecionar o conteúdo que deve receber alguma informação de 
estilo: 
 
Seletor de elementos múltiplos 
Elemento1, Elemento2... {atributo1: valor; atributo2: valor...} 
H1, H2, H3 {font-weight:bold} 
/* Faz com que o conteúdo dos elementos H1, H2, H3 fiquem em negrito */ 
 
Seletor universal 
*{atributo1: valor; atributo2: valor ...} 
/* Faz com que o conteúdo dos elementos fiquem em negrito */ 
*{color:#00FF00} 
 
Seletor de elementos adjacentes 
Elemento1 + Elemento2 {atributo1: valor; atributo2: valor ...} 
H1+P {border-style:solid; border-width:5px} 
/* Faz com que o conteúdo do elemento P fique em negrito, mas somente quando estiver logo 
após um elemento H1 */ 
 
Seletor de elementos filhos 
Elemento1> Elemento2 {atributo1: valor; atributo2: valor ...} 
DIV>P {font-weight:bold} 
/* Faz com que o conteúdo dos parágrafos que estiverem dentro de algum DIV, fiquem em 
negrito */ 
 
Seletor HTML: Class 
. NomeDaClasse {atributo1: valor; atributo2: valor ...}, ou 
Elemento.NomeDaClasse {atributo1: valor; atributo2: valor ...} 
<html> 
<head><title></title> 
<STYLE TYPE=”TEXT/CSS”> 
.conteudo{font-style:italic; 
 Font-size:24 
 } 
</STYLE> 
</head> 
<body><p class=”conteudo”>Bem vindo a página! Tamanho da fonte 24</p> 
 <p>Texto normal</p> 
</body> 
</html> 
DESENVOLVIMENTO WEB PROF. DANIELLE COSTA 
 
 29
Seletor HTML: Id 
#NomeDoIdentificador {atributo1: valor; atributo2: valor ...} 
<html> 
<head><title></title> 
<STYLE TYPE=”TEXT/CSS”> 
#cabeçalho{font-style:italic} 
</STYLE> 
</head> 
<body><p id=”cabeçalho”>Bem vindo a página!</p> 
 <p>Texto normal</p> 
</body> 
</html> 
 
As folhas de estilo 
É possível definir regras de CSS de três formas. São elas: 
Externo - Externo significa que você coloca as regras de CSS em um arquivo separado, e 
então sua página HTML pode fazer um link para esse arquivo. Essa abordagem lhe permite 
definir regras em um ou mais arquivos que podem ser aplicadas em alguma página do seu web 
site. 
Exemplo 2 
Arquivo meu_estilo.css 
H1 {font-family: 'Comic Sans MS'; 
 font-size: 36pt; 
 color: blue 
} 
H2 {font-family: 'Courier'; 
 margin-left: 0.5in 
} 
 
<html> <title>Exemplo Estilo Externo</title> 
<head> 
 
<LINK REL="STYLESHEET" HREF="meu_estilo.css" TYPE="text/css"> 
 
</head> 
<body><H1>Texto com a primeira formatação em css 
 <H2>Texto com a segunda formatação em css 
</body> 
</html> 
Sempre que quiser utilizar esses estilos em uma nova página, basta colocar uma tag <LINK> 
no cabeçalho que referencia meu_estilo.css. 
DESENVOLVIMENTO WEB PROF. DANIELLE COSTA 
 
 30
<LINK REL="STYLESHEET" HREF="meu_estilo.css" TYPE="text/css"> 
Você deve inserir este texto entre as tags <HEAD>...</HEAD> e colocar a localização correta 
do seu arquivo e seu nome. 
Incorporado - Incorporado significa que você especifica as regras de CSS no cabeçalho do 
documento. As regras incorporadas afetam somente a página atual. 
Se quiser criar um conjunto de estilos que se aplicam a uma única página, pode-se configurar 
os estilos exatamente como no Exemplo 2 dos estilos externos, mas em vez de colocar as tags 
<STYLE>...</STYLE> e as regras em um arquivo separado, coloque estas tags na própria 
página HTML. A estrutura básica de uma página da web que utiliza estilos incorporados é 
semelhante ao seguinte código: 
Exemplo 3 
 
<html><head><title>Exemplo Estilo Incorporado</title> 
 
<STYLE TYPE="text/css"> 
P {background-color: #FFFFFF; 
 font-family:'Comic Sans MS'; 
 font-size: 14pt} 
</STYLE> 
 
 </head><body></body> 
</html> 
 
Inline - Inline significa que você especifica as regras de CSS dentro da tag de HTML. Essas 
regras afetam somente a tag atual. 
 
Os estilos inline afetam somente a tag atual e não outras tags na página e tampouco outros 
documentos. A sintaxe para definir um estilo inline é a seguinte: 
Exemplo 4 
<A STYLE="color: green; text-decoration: none" HREF="http://www.seusite.com"> 
Note que em vez das tags <STYLE>...</STYLE>, você apenas utiliza um atributo STYLE 
dentro da tag para definir o estilo. E, em vez de colocar as regras de CSS entre colchetes, você 
as coloca entre aspas, separando-as com ponto-e-vírgula como de costume. 
As definições de estilo aplicáveis a um documento podem se originar de três lugares 
diferentes: 
Desenvolvedor: o desenvolvedor define as regras de apresentação do documento 
DESENVOLVIMENTO WEB PROF. DANIELLE COSTA 
 
 31
Usuário: caso o browser permita, o leitor pode definir suas regras de apresentação. 
Browser: o próprio browser possui um conjunto de regras que são utilizadas quando nenhum 
outro estilo for definido. São as regras “default” do browser. 
Dessa maneira uma parte do documento pode receber estilos conflitantes de diversas origens. 
O browser gera um único “CSS virtual” e utilizando as regras de prevalência a seguir. 
 Menor importância ⇔ Maior importância 
Origem Estilo default do 
browser 
Estilo do usuário Estilo do 
desenvolvedor 
Métodos Externo Incorporado Inline 
Elementos seletor class id 
 
 
Utilizando a tag <DIV> 
 
As tags HTML <DIV>...</DIV> podem ser usadas para formatar um grande bloco de texto, 
uma divisão, abrangendo diversos parágrafos e outros elementos. Desta forma essas tags são 
boa opção para definir estilos que afetam grandes seções de um texto em uma página. 
Exemplo 5 
<STYLE TYPE="text/css"> 
DIV.sidebar {font=family: "Arial"; 
 font-size: 12pt; 
 text-align: right; 
 background-color: #C0C0C0; 
 margin-left: 1in; 
 margin-right: 1in} 
</STYLE> 
Ao colocar na tag <DIV> o atributo CLASS, você estará fazendo com que todos os elementos 
que estejam englobados nesta tag sigam estes padrões. 
 
Modelo de caixa em CSS 
 
 
O modelo de caixa em CSS, descreve os boxes que estão sendo geradas pelos elementos 
HTML. O modelo de caixa contém ainda opções detalhadas de ajuste de margens, bordas, 
padding e conteúdo para cada elemento. O diagrama abaixo mostra como o modelo de caixa é 
construída: 
 
 
DESENVOLVIMENTO WEB PROF. DANIELLE COSTA 
 
 32
 
 
• Padding: espaço que pode existir entre o conteúdo e suas bordas. 
• Border: designa o limite do elemento. 
• Margin: pode existir e separa o elemento de outros da mesma página. 
• Largura do elemento: é determinada pela largura do conteúdo. 
• Largura da caixa: é determinada pela soma das larguras do conteúdo, mais as larguras. 
• Ocupadas pelas linhas de contorno (border), pelo espaço em branco (padding) e pelas 
larguras das margens. 
 
A ilustração mostra que cada um dos elementos é cercado por caixas que podem ser ajustadas 
com o CSS. 
O exemplo abaixo contém dois elementos: <h1> e <p>. O modelo de caixa para os dois 
elementos podem ser ilustradas como se segue: 
 
<h1> Artigo 1: </h1> 
<p> Todos os seres humanos nascem livres 
e iguais em dignidade e direitos. São dotados de razão e consciência 
e devem agir em relação umas às outras com espírito de fraternidade </ p> 
 
 
 
 
 
DESENVOLVIMENTO WEB PROF. DANIELLE COSTA 
 
 33
Bordas CSS 
As propriedades de borda permitem-lhe especificar o estilo, a cor, e a largura de um elemento 
border. Em HTML usamos tabelas para criar bordas em torno de um texto, mas com as 
propriedades de borda na CSS podemoscriar bordas com belos efeitos, e elas podem ser 
aplicadas a qualquer elemento. 
Exemplo 6: Cor das bordas 
 
<html> 
<head> 
<style type="text/css"> 
p.one 
{ 
border-style: solid; 
border-color: #0000ff 
} 
p.two 
{ 
border-style: solid; 
border-color: #ff0000 
#0000ff 
} 
p.three 
{ 
border-style: solid; 
border-color: #ff0000 
#00ff00 #0000ff 
} 
p.four 
{ 
border-style: solid; 
border-color: #ff0000 
#00ff00 #0000ff 
rgb(250,0,255) 
} 
</style> 
 
</head> 
<body> 
<p class="one"><b>Observação:</b> A 
propriedade "border-color" não é 
reconhecida no Internet Explorer se 
for usada sozinha. Use a propriedade 
"border-style" para configurar as bordas 
antes no Internet Explorer.</p> 
<p class="two">Some text</p> 
DESENVOLVIMENTO WEB PROF. DANIELLE COSTA 
 
 34
<p class="three"><b>Observação:</b> O 
Netscape 4 não suporta a propriedade 
"border-color". Use a propriedade "border" 
para configurar as bordas e as cores no 
Netscape.</p> 
<p class="four">Algum texto.</p> 
</body> 
</html> 
 
Exemplo 7:Estilo das bordas 
 
<html> 
<head> 
<style type="text/css"> 
p.dotted {border-style: dotted} 
p.dashed {border-style: dashed} 
p.solid {border-style: solid} 
p.double {border-style: double} 
p.groove {border-style: groove} 
p.ridge {border-style: ridge} 
p.inset {border-style: inset} 
p.outset {border-style: outset} 
</style> 
</head> 
<body> 
<p>A propriedade "border-style" não é 
reconhecida pelo Netscape 4.</p> 
<p>O Netscape 6 suporta todos os estilos 
de bordas.</p> 
<p>O Internet Explorer 5.5 suporta todos 
os estilos de bordas. O Internet Explorer 
4.0 - 5.0 não suporta os valores "dotted" 
e "dashed".</p> 
 
<p class="dotted"> 
Uma borda pontilhada</p> 
 
<p class="dashed"> 
Um borda tracejada</p> 
 
<p class="solid"> 
Uma borda sólida</p> 
 
<p class="double"> 
Uma borda dupla</p> 
 
<p class="groove"> 
DESENVOLVIMENTO WEB PROF. DANIELLE COSTA 
 
 35
Uma borda com canaleta</p> 
 
<p class="ridge"> 
Uma borda saliente</p> 
 
<p class="inset"> 
Uma borda rebaixada</p> 
 
<p class="outset"> 
Uma borda em relêvo</p> 
 
</body> 
</html> 
 
Exemplo 8: Largura das bordas 
 
<html> 
<head> 
 
<style type="text/css"> 
p.one 
{ 
border-style: solid; 
border-width: 5px 
} 
p.two 
{ 
border-style: solid; 
border-width: 5px 10px 
} 
p.three 
{ 
border-style: solid; 
border-width: 5px 10px 1px 
} 
p.four 
{ 
border-style: solid; 
border-width: 5px 10px 1px medium 
} 
</style> 
 
</head> 
<body> 
 
<p class="one"> 
A propriedade "border-width" não é 
DESENVOLVIMENTO WEB PROF. DANIELLE COSTA 
 
 36
reconhecida no Internet Explorer se 
for usada sozinha. Use a propriedade 
"border-style" para especificar as 
bordas antes no Internet Explorer. 
</p> 
<p class="two"> 
Algum texto. 
</p> 
<p class="three"> 
Algum texto. 
</p> 
<p class="four"> 
Algum texto. 
</p> 
 
</body> 
</html> 
 
Margem em CSS 
As propriedades de margem definem o espaço em volta dos elementos. É possível usar valores 
negativos para sobrepor o conteúdo. As margens superior, direita, inferior, e esquerda podem 
ser mudadas independentemente usando propriedades separadas. Uma propriedade de margem 
estenográfica pode também ser usada para mudar todas as margens de uma só vez. 
Como primeiro exemplo, vamos olhar se define as margens para o documento, ou seja, para o 
elemento <body>. A ilustração abaixo mostra como queremos que as margens da página. 
 
 
DESENVOLVIMENTO WEB PROF. DANIELLE COSTA 
 
 37
body { 
 margin-top: 100px; 
 margin-right: 40px; 
 margin-bottom: 10px; 
 margin-left: 70px; 
 } 
Ou 
body { 
 margin: 100px 40px 10px 70px; 
 } 
 
Exemplo 9 
<html> 
<head> 
 
<style type="text/css"> 
p.margin {margin: 2cm 4cm 3cm 4cm} 
</style> 
 
</head> 
 
<body> 
 
<p> 
Este é um parágrafo 
</p> 
<p class="margin"> 
Este é um parágrafo com margens 
</p> 
 
<p> 
Este é um parágrafo 
</p> 
 
</body> 
</html> 
 
Enchimento em CSS 
As propriedades de enchimento definem o espaço entre a borda do elemento e o conteúdo do 
elemento. Valores negativos não são permitidos. O enchimento superior, direito, inferior, e 
esquerdo podem ser mudados independentemente usando propriedades separadas. Uma 
DESENVOLVIMENTO WEB PROF. DANIELLE COSTA 
 
 38
propriedade de enchimento estenográfica é também criada para controlar múltiplos lados de 
uma só vez. 
Exemplo 10 
 
<html> 
<head> 
 
<style type="text/css"> 
td {padding: 1.5cm} 
td.twovalues {padding: 0.5cm 2.5cm} 
</style> 
 
</head> 
 
<body> 
 
<table border="1"> 
<tr> 
<td> 
Esta é uma célula de tabela com 
enchimento em cada lado. 
</td> 
</tr> 
</table> 
 
<br> 
 
<table border="1"> 
<tr> 
<td class="twovalues"> 
Esta é uma célula de tabela com 
enchimento em cada lado. Os 
enchimentos superior e inferior têm 
o mesmo valor (0,5cm), enquanto que 
os enchimentos esquerdo e direito têm 
outro valor (2,5). 
</td> 
</tr> 
</table> 
 
</body> 
</html> 
 
 
DESENVOLVIMENTO WEB PROF. DANIELLE COSTA 
 
 39
Layers 
 
Algumas das limitações das páginas Web é a dificuldade de se posicionar texto ou imagem 
precisamente em uma página e de sobrepor elementos HTML. Uma maneira de implementar 
layers é controlá-los através folhas de estilo. 
 
Vantagens e Desvantagens 
A grande vantagem na utilização do css é a separação lógica da estruturação e da formatação 
das informações e redução do tamanho e de tempo de carregamento das páginas. Mas é 
importante ressaltar que diferentes navegadores interpretam o css de forma diferente 
principalmente as versões antigas. 
 
Atributos do CSS 
 
A Tabela 2 a seguir descreve os principais atributos que podem ser utilizados nos aquivos css. 
 
Tabela 2 – Atributos css 
Atributo de CSS O que ele formata 
background Cor de fundo, imagem, transparência. 
background-attachment Rolagem do fundo / Marca d'água. 
background-image Imagem de fundo. 
background-color Cor de fundo ou transparência. 
background-position Posicionamento da imagem de fundo. 
background-repeat Configuração lado-a-lado da imagem de fundo. 
Border Largura, estilo e cor de todas as 4 bordas. 
border-bottom Largura, estilo e cor da borda inferior. 
border-bottom-color Cor da citada borda. 
border-bottom-style Estilo da citada borda. 
border-bottom-width Largura da citada borda. 
border-color Cor das 4 bordas. 
border-left Largura, estilo e cor da borda esquerda. 
border-left-color Cor da borda citada. 
border-left-style Estilo da borda citada. 
border-left-width Largura da borda citada. 
border-right Largura, estilo e cor da borda direita. 
border-right-color Cor da borda citada. 
border-right-style Estilo da borda citada. 
border-right-width Largura da borda citada. 
DESENVOLVIMENTO WEB PROF. DANIELLE COSTA 
 
 40
border-style Estilo de todas as 4 boras. 
border-top Largura, estilo e cor da borda superior. 
border-top-color Cor da borda citada. 
border-top-style Estilo da borda citada. 
border-top-widthLargura da borda citada. 
border-width Largura de todas as 4 bordas. 
Clear Elementos flutuantes à esquerda ou à direita de um elemento. 
Clip Parte visível de um elemento. 
Color Cor de primeiro plano. 
Cursor Tipo de ponteiro do mouse. 
Display Se o elemento é exibido e o espaço é 
reservado para ele. 
Filter Tipo de filtro aplicado ao elemento. 
Float Se o elemento flutua. 
Font Estilo, variante, peso, tamanho e altura da linha do tipo de fonte. 
@font-face Incorporação da fonte ao arquivo HTML. 
font-family Tipo de fonte. 
font-size Tamanho da fonte. 
font-style Fonte itálico. 
Fonte-variant Fonte bold. 
font-weight Peso da fonte de claro a negrito. 
Height Altura exibida ao elemento. 
@import Folha de estilo a importar. 
Left Posição do elemento em relação a margem 
esquerda da página. 
letter-spacing Distância entre as letras. 
line-height Distância entre linhas de base. 
list-style Tipo, imagem e posição do estilo da lista. 
list-style-image Marcador de item de lista. 
list-style-position Posição do marcador de item da lista. 
list-style-type Marcador de item de lista alternativo. 
Margin Tamanho de todas as 4 margens. 
margin-left Tamanho da margem esquerda. 
margin-right Tamanho da margem direita. 
margin-bottom Tamanho da margem inferior. 
margin-top Tamanho da margem superior. 
DESENVOLVIMENTO WEB PROF. DANIELLE COSTA 
 
 41
Overflow Exibição de imagens que são maiores do que 
suas molduras. 
Padding Espaço em torno de um elemento em todos os lados. 
Padding-bottom Espaço a partir da margem inferior de um 
elemento. 
Padding-left Espaço à esquerda do elemento. 
Padding-right Espaço à direita do elemento. 
Padding-top Espaço a partir da margem superior do 
elemento. 
page-break-after Inserir quebra de página depois de um 
elemento. 
page-break-before Inserir quebra de página antes de um 
elemento. 
Position Como o elemento é posicionado na página. 
text-align Alinhamento do texto. 
text-decoration Sublinhado, sobrelinhado ou riscado. 
text-indent Recuo da primeira linha do parágrafo. 
text-transform Transformação para todas maiúsculas, 
minúsculas ou inicial maiúscula. 
Top Posição do elemento em relação a parte 
superior da página. 
vertical-align Alinhamento vertical do elemento. 
Visibility Se elemento é visível ou invisível. 
Width Largura do elemento. 
z-index Posição do elemento na pilha 
 
 
 
Exercícios de fixação: 
 
1) Comece com algumas modificações simples em amostra1.html e css_teste 
a) modifique a cor da fonte e do background nas tags H1, H2, e H3 
b) modifique o tamanho das fontes nos parágrafos para 12pt 
 
2) Agora veja os resultados no arquivo css_teste.html, usando o seu navegador. 
a) modifique a largura da borda nos elementos de borda das classes .primeiro e .ultimo 
para "thin" 
b) modifique o estilo da borda do elemento H1 para "solid" 
 
3) Agora tente acrescentar novas classes: 
DESENVOLVIMENTO WEB PROF. DANIELLE COSTA 
 
 42
a) crie uma classe chamada .highlight - ajuste a cor do background para amarelo 
(#FFFF00) 
b) crie uma classe chamada .minhaclasse - ajuste a font-family para "monospace", o 
tamanho para "large", a cor para verde (#00FF00), e o background para preto 
(#000000) 
c) modifique o arquivo css_teste.html para poder acomodar as novas classes. Você vai 
poder vê-las usando qualquer tag com um atributo de classe ajustado para o nome da 
classe (sem o ponto inicial) - exemplo: <div class=" minhaclasse">esta é a classe 
minhaclasse</div>