Conceitos Básicos de HTML e CSS

Conceitos Básicos
Uma página HTML é um arquivo-texto simples (ASCII) contendo o texto da página e os

comandos HTML que definem a formatação da mesma.
Os comandos são indicados entre marcadores chamados "tags" que vêm entre os símbolos
de < e >.
A maioria dos comandos vem aos pares, sendo que a cada abertura corresponde um fechamento
e cada fechamento é uma repetição do comando de abertura precedido por /.
Exemplo: <head> </head>
Existem exceções quanto a necessidade de um par de comandos, como no caso do espaçamento
simples entre linhas <br>, que não precisa ser fechado.
(!)
XHTML:
Em XHTML, toda tag é fechada, inclusive o <br>. Nesse caso, o uso correto é <br />.
Os comandos podem ser digitados tanto em letras maiúsculas quanto em letras minúsculas ou
numa mistura dos dois casos.
(!)
XHTML:
Em XHTML, toda tag é escrita em letra minúscula. Esse padrão será adotado dentro desse
curso, dessa maneira produzindo um código HTML mais correto e mais simples de ser migrado
para XHTML
Alguns comandos possuem parâmetros (como a cor, por exemplo). Esses parâmetros são
separados por um espaço e colocados entre aspas.
Exemplo: <body bgcolor="red"> </body>
Espaços extras em branco, tabulações, quebras de linha e marcas de final de linha são ignorados
dentro do código de uma página, ou seja: não é deixando um espaço maior entre dois comandos
que se obtém o efeito de uma linha em branco na tela.
Um arquivo de uma página HTML deve ser gravado com a extensão .htm ou html.
Sendo a página HTML um arquivo texto, pode ser criada ou editada em qualquer editor de
textos simples como, por exemplo, o Bloco de Notas do Windows.
Existem no mercado, inúmeros editores de páginas HTML já no formato WYSWYG ("What
you see is what you get", algo semelhante a "O que você está vendo ao criar a página é o que
terá ao visualizá-la no navegador"). Neste caso a página é montada num ambiente amigável
onde não é preciso entrar diretamente com os comandos.
Isto não implica, no entanto, na não necessidade de se conhecer HTML. Quem conhece a
linguagem HTML consegue compreender o código gerado pelos editores de páginas Web e com
isto:
▪ desenvolve páginas limpas em termos de codificação que são carregadas rapidamente;

▪ pode escolher a alternativa mais adequada para problemas comuns de layout de página;
▪ tem uma intimidade maior com os comandos, sua sintaxe e semântica;
▪ tem em mente como estruturar o site como um todo, diante das possibilidades
oferecidas pela linguagem.
Estrutura de uma página

Uma página é delimitada pelos comandos <html> </html>. Desta forma, estes são
respectivamente o primeiro e último dos comandos do código.
Toda página é composta por um cabeçalho e um corpo sendo que na codificação, o cabeçalho
vem antes do corpo.
Comandos do cabeçalho: <head> </head>
Comandos do corpo: <body> </body>
O exemplo a seguir exibe o código de uma página que já pode ser visualizada no browser.
<html>
<head>
</head>
<body>
</body>
</html>
Para testar cada código apresentado no exemplo:
▪ No Bloco de Notas
▪ Digite o código
(!)
No menu Arquivo, acione o comando Salvar como, salvando o arquivo com a extensão .htm.
Atente para que na caixa de seleção, "Salvar como tipo", a opção "Todos os arquivos" esteja
selecionada. Caso contrário será acrescentada automaticamente a extensão .txt ao final do nome
do arquivo.
Tipo de Documento
Atualmente existem vários tipos de HTML e XHTML (HTML 4.01 Strict, HTML 4.01
Transitional, XHTML 1.0 Strict, etc.). Para que o navegador interprete de maneira correta o seu
código e exiba a sua página conforme o seu planejamento, é necessário declarar o seu Doctype
(Definição do Tipo de Documento).
Essa declaração é fundamental para que o navegador processe o seu código de maneira rápida e
correta e é inserida logo no início do documento (antes mesmo da marcação HTML).
Veja o exemplo da marcação para XHTML 1.0 Transitional:
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
Sem a declaração acima, vários códigos são processados de maneira errada pelo navegador, que
interpreta o seu HTML de maneira "genérica".
Cabeçalho (Head)
Delimitado pelos comandos <head> e </head>, o cabeçalho da página contém informações
sobre a página que não serão visualizadas no navegador, porém por web robots e
buscadores.
Principais marcadores do cabeçalho da página
<title> Título da página </title>

Identifica o texto a ser exibido na barra de títulos da página.
Quando o usuário entra em uma ferramenta de busca (como Yahoo, Cadê, etc.) procurando por
um assunto específico, o conteúdo do marcador <title> de uma página é a primeira coisa a ser
vasculhada. Daí a importância em escolher títulos coesos para as páginas e que consigam
traduzir o conteúdo da página em poucas palavras.
Além disso, quando o usuário escolhe uma página para colocar em sua lista de Favoritos do
browser, é o título da página que aparecerá na lista. Caso a página não tenha o marcador <title>
setado ou se ele não contiver nada, o browser assumirá o nome do arquivo.
Exemplo:
<title>IFSULDEMIAS – Polo Circuito das Águas. Formando Técnicos e cidadãos

conscientes </title>
<meta name="description" content="conteúdo da pagina" />

Resume o conteúdo da página. Este marcador também é utilizado pelas Ferramentas de Busca
no cadastramento do site.
(!)
As ferramentas de busca trabalham com "web robots": programas que vasculham a Internet
procurando novos sites e cadastrando suas informações. Também chamados de spiders,
procuram essa meta tag para saber qual é a melhor classificação para cadastrar o site nessas
ferramentas de busca. Quando não encontram essas informações, normalmente os robôs usam
um critério próprio para cadastrar o site, que varia de acordo com o robô e com a ferramenta de
busca. Alguns deles, quando não encontram estas tags utilizam os primeiros 200 ou 300
caracteres da página.
Exemplo:
<meta name="description" content="Site da People Computacao. Empresa de
Treinamento em informatica para iniciantes e profissionais. Microsoft Solution
Provider. Centro Autorizado Microsoft ATEC (Authorized Technical Education
Center). Centro autorizado de exames Sylvan Prometric.">
<meta name="keywords" content="palavras-chave da pagina" />

Apresenta as palavras-chave da página. Este marcador também é utilizado pelas Ferramentas de
Busca no cadastramento do site. É importante atentar para as palavras que se escolhe como
chave. Se o site, por exemplo, for de uma empresa de treinamento em informática da região de
Campinas, mas a palavra Campinas não for colocada como chave, um internauta procurando por
esse tipo de empresa não a encontrará no mecanismo de busca.
Exemplo:
<meta name="keywords" content="treinamento, informatica, cursos de informatica
para iniciantes, cursos de informatica para profissionais, integração de
sistemas, exames Sylvan Prometric, ATEC, CTEC, calendario de cursos, conteudo
programatico, certificação profissional Microsoft, franquias de treinamento,
Campinas.">
(!)
Buscadores como o Google dão grande importância para marcações de palavras-chave,
descrição e título da página.
Se você quer ficar bem posicionado em um buscador, não deixe de se preocupar com essas
marcações.
Corpo (Body) - Imagem de fundo

Delimitado pelos marcadores <body> e </body>, o corpo é a parte da página que contém
informações que serão visualizadas na tela.
Principais atributos do marcador body
<body background="Url_da_imagem">
Especifica a imagem (GIF ou JPEG) utilizada para preencher o fundo da tela. É importante
observar se o endereço da imagem esteja correto.
(!)
O caminho do arquivo pode ser absoluto ou relativo. A maioria dos sites utiliza endereços
relativos para as imagens, já que a utilização de caminhos relativos não prende o site a uma
determinada estrutura de diretórios na raiz.
Exemplo:
<body background="img/fundo.gif">
<body background="http://www.umsite.com.br/img/fundo.gif">
A imagem escolhida como fundo da página ocupará toda a região da tela, ou seja, mesmo sendo
uma imagem pequena, esta será repetida por toda a página, cobrindo toda a sua extensão.
É possível tirar proveito do fato da imagem de fundo ser ladrilhada na página. Uma página com
uma faixa lateral, por exemplo, pode ter como imagem de fundo um arquivo pequeno e de
carregamento leve, que ao ser repetido, comporá o fundo desejado.
A imagem original e o resultado de sua inserção como fundo da página
Corpo (Body) - Cor de fundo
<body bgcolor="cor" >

Especifica a cor de fundo da página. O valor que entrará pode ser uma constante ou um número
hexadecimal correspondente aos valores RGB da cor.
Exemplo:
<body bgcolor="red">
<body bgcolor="#996633">
<body text="cor" link="cor" vlink="cor" alink="cor" topmargin="0" leftmargin="0">

Especifica respectivamente as cores para:
▪ texto geral da página ou foreground (text);
▪ links não visitados (link);
▪ links já visitados (vlink);
▪ link no momento em que é ativado (alink);
▪ topmargin - margem superior;
▪ leftmargin - margem esquerda.
Exemplo:
<body bgcolor="#000000" link="#FFFF00" vlink="#FF00FF" alink="#00FF00">
CSS:
A propriedade de imagem de fundo pode ser declarada utilizando a linguagem de estilos de
texto CSS. Dessa maneira é possível controlar a repetição, posição e obter mais controle do seu
layout.
Cores (tanto do fundo, quanto do texto) e margens também podem ser declaradas utilizando
CSS.
No desenvolvimento web moderno, CSS é sempre preferencial sobre o HTML na formatação da
aparência da página.
Parágrafos e quebra de linha
<p>Texto</p>
Delimita um parágrafo, que é uma unidade de composição de texto muito importante para a
leitura e entendimento.
Exemplo:
<html>
<head>
</head>
<body>
Testando sem colocar parágrafo.
Ver se sem o marcador sai na linha debaixo.
<p>Agora com o marcador de parágrafo.</p>

Linha seguinte.
</body>
</html>
O marcador de parágrafo possui um atributo opcional align para configurar o alinhamento do

parágrafo.
O atributo align pode conter os valores left (esquerda), center (centro), right (direita)
ou justify (justificado).
Exemplo:
<p align="center">Texto do parágrafo</p>
<br>
Quebra de linha. Marcador utilizado para separar uma linha da outra sem criar um espaço em
branco entre as duas e preservando o mesmo parágrafo.
É importante observar que o marcador <br> deve vir no final da linha que se quer separar.
Lembre-se que ao utilizar XHTML, o marcador é fechado dessa maneira: <br />
Exemplo:
<html>
<head>
</head>
<body>
Testando sem colocar parágrafo.
<p>Agora com o marcador de parágrafo.</p>
Agora com quebra de linha.<br>
Linha seguinte.
</body>
</html>
<div></div>
A tag div é utilizada para a marcação de blocos, de textos, figuras, listas, etc. É a tag mais
importante ao utilizar o método de desenvolvimento conhecido como Tableless (essa forma de
desenvolvimento será explorada numa próxima unidade).
Em HTML "tradicional" essa marcação configura o alinhamento de um texto. Útil quando se
quer alinhar um conjunto de parágrafos. O parâmetro align pode conter um dos
valores: left(esquerda), center (centro), right (direita) ou justify (justificado).
Exemplo:
<html>
<head>
</head>
<body>
<div align="center">
<p>Primeiro parágrafo</p>
<p>Segundo parágrafo</p>
<p>Terceiro parágrafo</p>
</div>
</body>
</html>
Formatação de texto
<font face="nome_da_fonte" size="tamanho_da_fonte" color="cor_da_fonte"></font>

Configura a tipografia, tamanho e cor do texto, sendo que não há necessidade da utilização de
todos os atributos juntos.
FACE: configura a fonte usada.
Exemplo:
<font face="Arial">Formatação de texto</font>

Também podem ser nomeadas até três fontes para o atributo face. Se a primeira fonte nomeada
não estiver disponível, a segunda é utilizada e assim sucessivamente. Se nenhuma das três
fontes especificadas estiver disponível, o browser usa sua própria fonte default para a família
daquela fonte.
Exemplo:
<font face="Arial,Verdana,Times New Roman">definindo fontes </font>
SIZE: configura o tamanho da fonte.

Seus tamanhos são (em HTML e o equivalente em pontos):
Tabela de tamanho
COLOR: configura a cor da fonte.
Exemplo:
<font face="Verdana" size="3" color="#C71585">Formatação de texto </font>
(!)
A formatação de texto utilizando a marcação Font foi declarada como "morta" em 1999 pelo
W3, que recomenda o uso de CSS para a formação de textos. Essa recomendação não é
injustificada, visto que grande parte do código utilizado em um web site é para a exibição de
textos e a marcação de Font é muito redundante.
Em um web site com 100 páginas é comum encontrar 1000 marcações de Font, que podem ser
substituídas por uma única marcação de CSS. Além disso, a manutenção da formatação do texto
(mudanças na cor, por exemplo) é muito mais simples com o CSS, sem haver a necessidade de
desligar temporariamente o web site.
Títulos
Identifica títulos, usados para dividir seções do texto. Existem 6 níveis de títulos, numerados de
H1 a H6, que são exibidos em fonte maior que a do texto normal. Os marcadores de título
podem ser alinhados pelo atributo align.
<h1>Aqui vai o título</h1>
Exemplo:
<h1>Título de nível 1</h1>
(!)
A marcação de títulos tem uma grande importância semântica na construção de um web site. Os
buscadores, leitores para deficientes visuais e outros dispositivos atribuem uma hierarquia e
importância diferente para cada título. Essa hierarquia vai muito além do tamanho do texto e é
extremamente importante na definição de tópicos.
O tamanho de um título pode ser redefinido com a linguagem CSS.
Estilos
Os estilos comuns utilizados nas páginas Web são: negrito, itálico e sublinhado.
Exemplos:
<p><b>negrito</b></p>
<p><i>itálico</i></p>
<p><u>sublinhado</u></p>
<p><sup></sup></p>
(!)
O negrito também pode ser utilizado com a marcação .
O itálico também pode ser utilizado com a marcação
Listas
As listas são muito utilizadas para a criação de menus de navegação. Existem dois tipos de listas
em HTML, as ordenadas e as desordenadas. Em softwares como o Microsoft Word, essas listas
são chamadas de Numeradores e Marcadores (respectivamente).
Exemplos:
<p>Essa é uma lista com marcadores</p>
<ul>
<li>Primeiro item</li>
<li>Segundo item</li>
<li>Terceiro item</li>
</ul>
<p>Essa é uma lista com numeradores</p>
<ol>
<li>Primeiro item</li>
<li>Segundo item</li>
<li>Terceiro item</li>
</ol>
(!)
Utilizando a linguagem CSS é possível criar menus sofisticados com os marcadores de lista.
Texto semanticamente correto

Existe uma preocupação muito grande na produção de textos com a semântica correta em
HTML. Esse tipo de texto é mais intercambiável entre serviços de web (como o RSS).
Um texto formatado de maneira correta é mais reconhecível por navegadores, mais simples de
ser editado e com a possibilidade de ser exibido de maneira diferente por diversos web sites, que
podem aplicar os seus próprios estilos de texto (formatando assim a aparência conforme o
planejamento de design do próprio web site).
Algumas dicas para a criação de um texto correto:
▪ substitua todas as tags Font por estilos CSS;

▪ sempre respeite a hierarquia de títulos. Exemplo: Só utilize um H3 dentro de um H2, e
não depois de um H1;
▪ não crie mais do que um título principal (h1) na sua página;
▪ o negrito é utilizado para criar destaques. O itálico para citações e palavras de língua
estrangeira;
▪ parágrafos são unidades de composição e não "textos separados por espaço";
▪ o texto semanticamente correto não tem "aparência", apenas conteúdo;
▪ as definições de cor, alinhamento, fundo e tipografia são declaradas em CSS;
▪ escrever algo semântico é utilizar uma tag no contexto certo para a qual ela foi criada.
Veja um exemplo de texto com a formação correta:
<div>
<h1>HTML</h1>
<p><b>HTML</b> (acrônimo para a <i>HyperText Markup Language</i>, que
significa Linguagem de Marcação de Hipertexto) é uma linguagem de
marcação utilizada para produzir páginas na Web</p>
<h2>História</h2>
<p><b>Tim Berners-Lee</b> criou o HTML original (e outros protocolos
associados como o HTTP) em uma estação <i>NeXTcube</i> usando o
ambiente de desenvolvimento NeXTSTEP.</p>
<p>As primeiras versões do HTML foram definidas com regras sintáticas
flexíveis, o que ajudou aqueles sem familiaridade com a publicação na
Web. Atualmente a sintaxe do HTML é muito mais rígida, permitindo um
código mais preciso. Através do tempo, a utilização de ferramentas para
autoria de HTML aumentou, assim como a tendência em tornar a sintaxe
cada vez mais rígida. Apesar disso, pois questões histórias, os
navegadores ainda hoje conseguem interpretar páginas web que estão
longe de ser um código HTML válido.</p>
<h2>Etiquetas</h2>
Todo documento HTML apresenta ,<b>etiquetas</b>, elementos entre
parênteses angulares (sinais de maior e menor) (< e >); esses elementos
são os comandos de formatação da linguagem. A maioria das etiquetas tem

sua correspondente de fechamento:<br/>
<i><etiqueta>...</etiqueta></i></p>
<p>Isso é necessário porque as etiquetas servem para definir a
formatação de uma porção do documento, e assim marcamos onde começa e
termina o texto com a formatação especificada por ela.</p>
</div>
Esse código gera algo como:
Tabelas
Conceitos Básicos
As tabelas são utilizadas como um recurso essencial para o layout geral da página,
principalmente para posicionar imagens e texto. Elas são compostas de linhas e colunas e o
conteúdo de cada célula pode ser texto, imagem ou até mesmo outra tabela.
No HTML semanticamente correto, a tabela deve ser utilizada apenas para guardar dados
tabulares, como os resultados de um campeonato, um calendário ou uma lista de preços.
Uma tabela é delimitada pelos marcadores <table> </table>, sendo que dentro destes
marcadores são colocadas as linhas e as colunas da tabela.
<table>
<tr> indica o início de uma nova linha na tabela
<td> indica uma coluna na tabela
</td> indica o final daquela coluna na tabela.
</tr> indica o final da linha na tabela
</table> indica o final da própria tabela.
Existe um marcador para a criação de cabeçalhos na tabela. Esse marcador é o <th> e é utilizado
ao invés do <td>.
Exemplo de uma tabela com duas linhas e três colunas:
<html>
<head>
<title>Tabela</title>
</head>
<body>
<table border="1">
<tr>
<td> Primeira coluna</td>
<td> Segunda coluna</td>
<td> Terceira coluna</td>
</tr>
<tr>
<td> Primeira coluna</td>
<td> Segunda coluna</td>

<td> Terceira coluna</td>
</tr>
</table>
</body>
</html>
Tabela com 2 linhas x 3 colunas
Principais atributos de uma tabela
<table border="espessura_da_borda">
Especifica a presença ou ausência de borda na tabela bem como a espessura. No caso de uma
tabela sem bordas não é necessário colocar o atributo border.
<table width="largura_da_tabela" height="altura_da_tabela">

Indica o tamanho da tabela. Este tamanho pode ser relativo ao tamanho da página em que a
tabela será exibida, ou absoluto.
Uma tabela de tamanho relativo é chamada "tabela elástica" e se estica de acordo com o
tamanho da página em que é exibida. Neste caso a largura e altura da tabela são fornecidas
tendo a porcentagem como unidade de medida. 100% indica uma tabela que ocupará a tela toda.
Exemplo:
<table width="50%" height="100%">

Uma tabela de tamanho absoluto permanece fixa independentemente da resolução da página em
que está sendo exibida. É útil quando existem imagens que não podem separar-se, alinhadas
dentro de uma tabela. Neste caso a largura e altura da tabela são fornecidas tendo o pixel como
unidade de medida.
Exemplo:
<table width="50" height="100">
<table align="posicionamento">
Especifica o posicionamento do texto a circundar a tabela. O alinhamento pode ser left
(esquerda) ou right (direita). Nos casos em que não se deseja que o texto circunde a tabela não é
preciso colocar o atributo align.
Exemplo de texto flutuando à esquerda da tabela (align="left")
Texto flutuando à direita da tabela
<table cellpadding="valor em pixel">

Especifica o deslocamento do texto em relação às bordas de cada célula da tabela.
Exemplo:
<table border="1" cellpadding="20">

Exemplo de deslocamento de texto em relação às bordas de cada célula
<table cellspacing="valor em pixel">
Especifica o espaçamento entre cada célula da tabela.
Exemplo:
<table border="1" cellspacing="10">
Exemplo de espaçamento entre as células da tabela

<table bgcolor="cor">
Especifica uma cor de fundo para a tabela. A cor pode ser declarada pelo seu nome ou,
preferencialmente, pelo seu código hexadecimal.
Exemplo:
<table bgcolor="#ccff00">
<table background="imagem">
Especifica uma imagem de fundo para a tabela. A imagem de fundo será repetida, como um
ladrilho.
Exemplo:
<table background="img/fundo.gif">
Principais atributos de uma célula

Com exceção dos atributos border, cellspacing e cellpadding, que são atributos exclusivos da
tabela, cada célula possui os demais atributos, a saber:
▪ cor de fundo e imagem de fundo;

▪ largura e altura.
Além disto, cada célula pode ter seu conteúdo alinhado horizontalmente e verticalmente.
<tr align="valor" > ou <td align="valor" >

Alinhamento Horizontal: Valores podem ser LEFT (esquerda), RIGHT (direita) ou CENTER
(centro).
<tr valign="valor"> ou <td valign="valor">

Alinhamento Vertical: Valores podem ser TOP (topo da célula), MIDDLE (região mediana da
célula), BASELINE (alinha a linha de base do texto da célula com o texto da linha), BOTTOM
(alinha o conteúdo da célula com a região inferior da célula).
Exemplo:
<html>
<head>
<title>Tabela</title>
</head>
<body>
<table border="1" width="600" height="200">
<tr>
<td valign="top"> Primeira coluna</td>
<td valign="middle"> Segunda coluna</td>
<td valign="bottom"> Terceira coluna</td>
</tr>
<tr>
<td align="left"> Primeira coluna</td>
<td align="center"> Segunda coluna</td>
<td align="right"> Terceira coluna</td>
</tr>
</table>
</body>
</html>
Exemplo de alinhamento vertical e horizontal das células
Links
A tag <a href>

Ao navegar pela Internet o usuário se depara com palavras geralmente escritas em azul e
sublinhadas, sobre as quais o cursor assume o formato de uma mãozinha. Ao clicar nestes locais
podem-se acessar informações diferentes, tais como:
▪ um email;
▪ uma outra página no mesmo site;
▪ arquivos de vários tipos;
▪ outro site.
Esta poderosa capacidade de conexão de idéias através de links - talvez a maior qualidade da
internet - é proporcionada pela linguagem HTML através do marcador âncora de hipertexto,
representado por <a> </a>.
Dentro desta tag é preciso colocar a referência ao arquivo destino, que se dá através do
atributo href.
<a href="referência_ao_arquivo_destino" > texto_ou_imagem_origem</a>

Observe que o texto ou a imagem, que servirão de origem para o link aparecendo em destaque
na página, deverão vir entre o par de marcadores <a> e </a>
Exemplos:
<html>
<head>
</head>
<body>
<p><a href="mailto:nome@provedor.com.br">Link para um

email</a></p>
<p><a href="index.html">Link para uma página</a></p>
<p><a href="documento.doc">Link para uma arquivo do

Word</a></p>
<p><a href="http://www.people.com.br">Link para um site</a></p>
</body>
</html>
Formulários
Conceitos Básicos
Formulários estão presentes na Internet para possibilitar cadastros, pesquisas, envio de
comentários, aumentando o poder de interação com os visitantes dos sites.
Um formulário HTML é uma página Web que contém, além de texto, elementos especiais
chamados controles, representados por caixas de checagem, botões tipo rádio, caixas de seleção,
campos de texto, etc.
Usuários preenchem os campos de um formulário submetendo-o em seguida a algum agente de
processamento. Neste momento, todas as informações fornecidas são enviadas a um programa,
escritas especialmente para processar esses dados de acordo com alguma necessidade ou
especificação.
Em alguns casos os dados são gravados em um banco de dados, em outros, por exemplo, uma
nova página é construída, em outros as informações são encaminhadas via e-mail.
A Tag <form> e seus principais atributos

A área de um formulário, na codificação HTML da página, é delimitada pelo par de marcadores
<form> e </form>.
Exemplo:
<html>
<head>
<title> Exemplo de Formulário </title>
</head>
<body>
<form>
Aqui irão entrar os campos do formulário.
</form>
</body>
</html>
<form name="nome_do_formulario" method="valor"

action="tratador_do_formulario">
Elementos do_formulário
</form>
Delimita um formulário na página. Todos os elementos do formulário devem vir entre este par
de marcadores.
▪ NAME: especifica o nome do formulário. Útil em casos de validação de campos, por

exemplo, quando se utiliza uma linguagem de scripts como JavaScript;
▪ METHOD: método que define como os dados serão transmitidos para o programa que
irá processá-los.
Deve ter os valores GET ou POST, sendo que a diferença entre estes dois valores está no modo
como os dados são empacotados. Normalmente o método Post é utilizado em formulários de
postagem de dados (como num cadastro ou em formulários de contato). O método Get é
utilizado na consulta de dados (como num formulário de busca).
▪ ACTION: indica o endereço do programa que receberá os dados do formulário.
Exemplos:
<form name="maladireta" method="post" action="maladireta.asp">
<form method="get" action="/busca_simples.asp" >
<form name="contato" action="http://hotwired.com/cgi-bin/FomMail.pl"
method="post">
Principais campos de um formulário:
▪ Caixa de Texto
▪ Senha
▪ Caixa de texto com várias linhas
▪ Botão Limpar/Enviar
▪ Campos Escondidos
▪ Botões de escolha (rádio e caixa de seleção)
Caixa de Texto
<input type="text" name="nomedocampo" value="valorinicial"

size="comprimentodocampo" maxlength="quantidade máxima de caracteres">
O valor TEXT (texto) no atributo TYPE indica que o campo será de texto, ou seja, um campo
onde o usuário poderá entrar com dados.
Exemplo:
<html>
<head>
</head>
<body>
<form>
<p>Nome: <input type="text" name="nome" size="50"
maxlength="50"></p>
</form>
</body>
</html>
Exemplo de Caixa de Texto
Senha
<input type="password" name="nomedocampo" size="comprimentodocampo">

Para o valor PASSWORD (senha) no atributo TYPE aplicam-se todos os atributos do tipo
TEXT, mas todas as letras digitadas aparecem mascaradas
Exemplo:
<html>
<head>

</head>
<body>
<form>
<p>Senha: <input type="password" name="senha" size="20"
maxlength="20"></p>
</form>
</body>
</html>
Exemplo de campo de senha
Caixa de texto com várias linhas
<textarea name="nomedocampo" rows="numero_de_linhas"

cols="numero_de_colunas"> </textarea>
O marcador TEXTAREA (área de texto) permite definir um campo de texto com várias linhas.
▪ ROWS: define o número de linhas da caixa de texto;

▪ COLS: define quantos caracteres (colunas) cada linha possui;
▪ NAME: define o nome da caixa de texto.
Exemplo:
<html>
<head>
</head>
<body>
<form>
<p>Comentário: <br>
<textarea name="comentario" rows="3" cols="20"></textarea></p>
</form>
</body>
</html>
Exemplo de campo de comentário
Botão Limpar/Enviar
<input type="tipo" value="texto_que_aparece_no_botão ">

O valor RESET no atributo TYPE define um botão que limpa todos os campos, devolvendo os
mesmos valores de quando a página foi carregada.
No atributo VALUE, pode-se definir o que estará escrito no botão. Caso nenhum valor seja
definido, aparecerá somente "Reset".
O valor SUBMIT no atributo TYPE define um botão que aciona o envio das informações
preenchidas no formulário ao programa interpretador.
O atributo VALUE define o que estará escrito no botão. Caso nenhum valor seja definido,
aparecerá somente "Submit".
Exemplo:
<html>
<head>
</head>
<body>
<form>
<p>Nome: <input type="text" name="nome" size="50"></p>
<p>Senha: <input type="password" name="senha" size="20"></p>
<p>Comentário: <br>
<textarea name="comentario" rows="3" cols="20"></textarea></p>
<input type="reset" value="Apagar"> <input type="submit" value="Enviar">
</form>
</body>
</html>
Exemplo de formulário com botões limpar e enviar
Campos Escondidos
<input type="hidden" name="nome" value="valor">

O valor HIDDEN (escondido) no parâmetro TYPE define dados que devem ser passados ao
programa interpretador, embora não estejam visíveis na página.
▪ NAME: identifica o dado.

▪ VALUE: define o valor que deve ser passado.
Exemplo:
<html>
<head>
</head>
<body>
<form>
<p>Entre com seu nome: <input type="text" ></p>
<input type="hidden" name="subject" value="Cadastro">
</form>
</body>
</html>
Botões de escolha (rádio e caixa de seleção)
<input type="radio" name="nome" value="valor">
<input type="checkbox" name="nome" value="valor">

O valor Radio ou Checkbox (rádio ou caixa de seleção) no parâmetro TYPE define o tipo de
botão de escolha.
O botão do tipo radio permite a escolha de apenas um item enquanto o botão do
tipo checkbox permite a escolha de várias opções.
Exemplo:
<html>
<head>
</head>
<body>
<form>
<p>Qual o seu sexo?:<br>
<input type="radio" name="sexo" value="Feminino">Feminino<br>
<input type="radio" name="sexo" value="Masculino">Masculino</p>
<p>como ficou sabendo desse Web Site (você pode marcar mais de uma
opção)?:<br>
<input type="checkbox" name="Email" value="Email">Email<br>
<input type="checkbox" name="Televisão" value="Televisão"> Televisão <br>
<input type="checkbox" name="Revista" value=" Revista "> Revista <br>
<input type="checkbox" name="Outros" value="Outros">Outros</p>
</form>
</body>
</html>
É importante que dentro de um mesmo conjunto de seleções, o valor name seja igual.
Processamento do formulário
De nada adianta construir um formulário e não ter como processá-lo.
Existem várias tecnologias ligadas ao processamento de um formulário e aqui serão citadas duas
delas como exemplo:
▪ Active Server Pages ou ASP, tecnologia da Microsoft.
Neste caso o programador precisa inserir no código HTML da página, comandos que consigam
acessar o servidor e executar as tarefas exigidas.
A página que contém comandos ASP passa a ter a extensão .asp e não mais .html. Mas pelo fato
dos scripts serem executados no servidor, o usuário não consegue ver nenhuma codificação em
sua máquina.
Quando utilizada esta tecnologia para processamento de um formulário, o atributo ACTION do
marcador FORM indicará o arquivo .asp correspondente ao processamento do formulário.
Exemplo:
<form name="maladireta" method="post" action="maladireta.asp">
▪ Scripts CGI.
Neste caso o programador precisa escrever scripts CGI ou utilizar CGIs pré-fabricados,
disponíveis gratuitamente na Rede, que processem as informações de forma transparente.
Exemplo:
<form name="cadastro" method="post" action="FormMail.pl">
Processando um formulário na prática

Utilizando os marcadores e elementos relativos a formulários e havendo uma maneira de
processar o formulário é possível então, criar qualquer formulário na Web.
Será utilizado como exemplo um programa CGI fornecido pelo Yahoo!Geocities Brasil
(http://br.geocities.com).
Para criar o formulário não é necessário estar conectado.
Para testar o formulário é preciso hospedar a página no computador servidor, ou seja, em sua
área no geocities.
Como funciona o CGI no geocities
Assim que o botão submit é clicado o programa CGI é acessado, em seguida os dados
preenchidos no formulário são enviados para um e-mail previamente especificado no momento
em que foi efetuado o cadastro do membro.
Para que o programa CGI funcione corretamente é necessário configurar o formulário, para que
algumas informações sejam enviadas juntamente com os dados do formulário. Configure o
formulário da seguinte forma:
▪ no atributo ACTION do marcador <FORM> é preciso colocar o endereço do programa

CGI para que o formulário possa ser processado.
<form method="post" action="http://br.geocities.yahoo.com/forms" >
Existem 4 campos HIDDEN que precisam ser acrescentados ao formulário:
▪ login: indica o ID (identificação de membro) para que o CGI saiba para qual endereço
de e-mail deve enviar os dados.
Exemplo:
<input type="hidden" name="login" value="htmlecss">
▪ subject: campo onde se pode especificar o assunto do formulário. Isso aparecerá como o
assunto do e-mail que você receberá.
Exemplo:
<input type="hidden" name="subject" value="Resultado do formulário">
▪ next_url: onde se pode especificar a página que é exibida após o usuário clicar no botão
"enviar". Caso este campo não seja especificado, o usuário receberá uma mensagem padrão
mostrando o conteúdo final do e-mail.
Exemplo:
<input type="hidden" name="next_url"
value="http://br.geocities.com/htmlecss/agradece.htm">
▪ required_fields: neste campo são colocados os nomes dos campos do formulário que
devem ser preenchidos obrigatoriamente pelo visitante, ou seja, os campos obrigatórios.
Exemplo:
<input type="hidden" name="required_fields" value="nome,email">
Veja abaixo o exemplo de um formulário completo:
<html>
<head>
<title>Exemplo de uso de CGI em formulários</title>
</head>
<body>
<p align="center"><font face="Arial" size="2" color="#FF0000">P A R T I C I P E
</font></p>
Sua opinião é muito importante.
<br>
<form method="post" action="http://br.geocities.yahoo.com/forms" >
<input type="hidden" name="login" VALuE="cursohtmlpeople">
<input type="hidden" name="subject" value="Resultado do formulário">
<input type="hidden" name="next_url"
value="http://br.geocities.com/cursohtmlpeople/agradece.htm">
<input type="hidden" name="required_fields" value="nome,email">
E-mail: <input type="text" name="email" size="40">
<br>
Nome: <input type="text" name="nome" size="40">
<p>
Comentário: <br>
<textarea name="comentarios" rows="5" cols="40"></TEXTAREA>
<p>
<input type="submit" value="Enviar">
<input type="reset" value="Limpar">
</form>
</body>
</html>
Exemplo de formulário
Publicando um Site
Cadastro em um serviço de hospedagem

Agora, o projeto prático está finalizado e será publicado na Internet, através de um servidor de
hospedagem gratuita, o Geocities, localizado no endereço "http://br.geocities.com".
▪ ao entrar no site Geocities, faça seu cadastro;

▪ clique em Construa seu site.
Página de entrada do Geocities
▪ leia o Termo de Serviço.
É apresentada uma página contendo uma série de campos de formulário que devem ser
preenchidos para cadastramento.
Página de cadastro do Geocities
Mesmo antes da transferência de arquivos é possível visitar a página e verificar que o espaço já
se encontra disponível.
Upload dos arquivos - FTP
A transferência de arquivos é feita via FTP. Para isto é preciso ter instalado na máquina um
programa deste tipo.
No site http://www.baixaki.com.br é possível encontrar vários programas free para FTP.
Será utilizado como exemplo o programa "WS FTP LE".
É preciso configurar um perfil de usuário para poder se conectar e fazer o upload dos arquivos
para o servidor do hospedeiro:
▪ Host Name: ftp.br.geocities.com

▪ User ID: Refere ao login do usuário, escolhido no momento do cadastramento
▪ Password: a senha criada ou recebida no momento do cadastramento
Exemplo de configuração de uma sessão de ftp no WS FTP
Depois de digitado todas as informações necessárias, clique no botão Aplicar para gravar os
dados..
Para fazer a conexão com o servidor clique no botão OK.
Upload dos arquivos - FTP (cont.)
Logo que se inicia a conexão, é apresentada uma tela com duas janelas. Na janela da esquerda
aparecem as pastas e arquivos do computador local, e na janela da direita as pastas e arquivos do
computador remoto (servidor).
▪ Para fazer o upload de arquivos ou pastas do computador local para o servidor, basta
selecionar os arquivos da janela da esquerda, e clicar no botão que se encontra no centro
entre as duas janelas.
▪ Para fazer download de arquivos ou pastas do servidor para o computador local, basta
fazer a operação contrária. Ou seja, selecionar os arquivos ou pastas na janela da direita, e clicar
no botão .
Tela para transferência dos arquivos
O status das operações aparecerá na área abaixo das janelas.
Para fechar uma conexão basta clicar no botão Close.
Tanto no caso do Geocities, utilizado como exemplo, quanto em alguns outros servidores, já
aparecerá uma página "index.html" que representa a home page. Esta página poderá ser
substituída por outra de mesmo nome.
Agora é só visitar o site e checar se tudo funciona perfeitamente.
Um dos inconvenientes do serviço de hospedagem gratuita de sites Geocities está no fato de que
a cada página visitada é aberta uma pequena janela com o logotipo ou propaganda do servidor.
A linguagem CSS
CSS
CSS (Cascading SyleSheets ou Folhas de Estilos em Cascata) é uma tecnologia padronizada
pela W3C (nasceu em meados de 1996), que não é parte do HTML padrão, mas sim um
conjunto de novas tags que ajudam a ter um melhor controle sobre o layout e o gerenciamento
do site.
Por que usar CSS em páginas Web

Todo documento escrito utiliza certos elementos de design para formatar seções de texto a fim
de manter a mesma aparência, seguindo assim um padrão.
As Folhas de Estilos em Cascata permitem uma versatibilidade maior na programação do layout
de páginas Web sem aumentar o seu tamanho em Kb, pois oferece várias possibilidades que
antes eram conseguidas com a utilização de gifs e jpgs. Basicamente, o CSS permite ao designer
um controle maior sobre os atributos tipográficos de uma home page, como tamanho e cor das
fontes, espaçamento entre linhas e caracteres, margem do texto, entre outros.
Devido às grandes vantagens advindas do uso do CSS, a maioria dos grandes sites está usando-a
em suas páginas.
Apêndice A - Veja um exemplo abrangente do porque utilizar CSS.
Versões e compatibilidade
Como já mencionado, existe um grupo voltado para buscar um mínimo de padronização na
Internet, especificamente na World Wide Web.
Este grupo é chamado Word Wide Web Consortium ou W3C e pode ser encontrado no endereço
www.w3.org.
Os níveis de CSS são: Nível 1 e Nível 2. A diferença básica é que na CSS 2 foi implementado o
recurso de posicionamento e colocação de elementos em camadas, permitindo a sobreposição de
texto sobre texto ou texto sobre figuras.
O W3C recomenda em muitos casos que as folhas de estilo sejam usadas em vez das tags
padrão do HTML e isso pode ser verificado na própria documentação da HTML quando se
encontra uma tag ou parâmetro marcado com "deprecated".
O CSS é suportado pelos browsers Microsoft Internet Explorer e Netscape Navigator, nas
versões 4 ou posteriores. É importante deixar bem claro que, embora seja essa uma
especificação padrão do W3C, nem todos os browsers e versões apresentam os mesmos
resultados e também podem não ter alguma característica implementada.
Assim, torna-se importante ainda o uso dos principais browsers do mercado para testar os
recursos do CSS.
Conceitos básicos
Para que uma folha de estilo possa definir a aparência de um documento, o browser precisa
saber que ela existe. A tag <style> e </style> determinam o início da style sheet.
Cada estilo que você cria é 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. A mesma tag
HTML, mas sem os sinais de maior e menor. Também podem ser utilizadas classes
personalizadas.
▪ Atributo - O aspecto específico do elemento usado 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
atributo em questão, como 20pt para font-size.
Exemplo:
<style type="text/css">

</style>
É permitido declarar mais de um atributo para um elemento. Essas declarações são separadas
por um ";". Entretanto é comum colocar o mesmo ";" ao declarar apenas um atributo.
Métodos de uso das folhas de estilo

Existem quatro (4) maneiras para incluir estilos CSS às páginas:
▪ Estilo In-Line: método utilizado para aplicar o estilo em elementos individuais na

página. Normalmente utilizado em casos de exceções a uma regra já declarada.
▪ Folhas de Estilo incorporadas: método utilizado para aplicar estilo em qualquer
elemento da página, por serem incorporados a tag <head>.
▪ Folhas de estilo externas: método que permite usar uma folha de estilo em várias
páginas HTML.
▪ Importação de estilo: método que permite importar uma folha de estilo de outro
arquivo. A importação de um style sheet é parecida com o método anterior, a diferença é que
você não pode combinar o método de link com outros métodos de inserções de estilos, mas a
importação pode ser combinada.
▪ Estilo in line
▪ Método utilizado para aplicar o estilo em elementos individuais na página. Este estilo
é definido no corpo do código HTML através do atributo STYLE.
▪
▪ Exemplo de método In-Line
▪ Exemplo:
▪
▪ <html>
▪ <head>
▪ </head>
▪ <body>
▪ <h1 style="font-family:Impact;background:yellow;color:red">
▪ Este é um titulo HTML usando CSS</h1>
▪ <p style="color:green">Cascading Style Sheet</p>
▪ </body>
▪ </html>
Folhas de Estilo Incorporadas
▪ Método utilizado para aplicar estilo em qualquer elemento da página, por serem
incorporados a tag <head>. Quando o style sheet é incluído desta maneira, as definições
colocadas ali valem para toda a extensão daquele arquivo HTML. O atributo type="text/css"
quer dizer que o estilo se trata de um tipo MIME, para que os browsers que não suportam CSS
ignorem o código.
<html>
<head>

</style>
</head>
<body>
<h1>
Este é um titulo HTML usando CSS</h1>
<p>Cascading Style Sheet</p>
</body>
</html>
Exemplo utilizando método Folhas de estilo Incorporadas
Folhas de Estilo Externas

Com este método, pode-se fazer com que várias páginas HTML usem estilos definidos em um
único arquivo central. A grande vantagem deste método é que, se você quiser fazer uma
mudança nos estilos da página, basta alterar em um único local e todas as páginas vinculadas a
ela serão alteradas também.
Exemplo:
<html>
<head>
<link rel="stylesheet" href="estilos.css" type="text/css">
</head>
<body>
<h1>
Este é um titulo HTML usando CSS</h1>
</body>
</html>
Agora para criar o arquivo CSS:

h1{font-family:impact;background:yellow;color=red}
p{color=green}
Salve o arquivo como estilos.css.
Exemplo utilizando método Externa
Importação de estilos
A importação de um style sheet é parecida com o método anterior. A diferença é que não se
pode combinar o método de link com outros métodos de inserções de estilos, mas a importação
pode ser combinada.
Exemplo:
<html>
<head>

</style>
</head>
<body>
<h1>
Este é um título HTML usando CSS</h1>
</body>
</html>
Exemplo utilizando método Importação
Medidas utilizadas
Na definição das várias propriedades das folhas de estilo, diversas medidas podem ser usadas,
sendo que algumas são relativas e outras absolutas.
px - número de pixels. É relativo à resolução do monitor ou outro dispositivo onde a página será
exibida. Exemplo: 100 pixels em uma tela com resolução de 640x480 resulta em um tamanho
maior que os mesmos 100 pixels em uma tela com resolução de 800x600.
in - polegadas.
cm -centímetros
mm - milímetros
pt - pontos.
pc - paicas
em - pontos. Esta unidade é igual ao tamanho em pontos de uma fonte. No exemplo abaixo, ela
se refere ao tamanho do "elemento pai":
p {font-size: 10pt}
b {font-size: 1.5em}
Neste caso, qualquer texto na tag <B> inclusa numa tag <P> terá um tamanho de 15 pontos
(1.5em x 10 pt)
Cores
Nas tags padrão HTML pode-se usar as cores declarando o seu nome: aqua, black, blue, fuchsia,
gray, green, lime, maroon, navy, olive, purple, red, silver, teal, white, yellow, etc. ou através de
seus códigos RGB em formato hexadecimal.
Além dessas notações que podem ser usadas para a CSS, outras notações estão disponíveis, as
quais podem facilitar muito o trabalho do desenvolvedor.
Exemplos:
{color: #ff0000;} - representa FF para vermelho, 00 para verde e 00 para azul
{color: rgb (255,120,60);} - os valores vão de 0 a 255
{color: rgb(100%,15%,40%);} - representa 100% para vermelho, 15% de verde e 40% de azul.
Definindo o tipo de CSS
Você pode escolher como utilizará o CSS. Existem vários tipos como: seletores, classes,
redefinir tags, seletores contextuais, seletores de links, etc.
Classes
Todos os elementos dentro do elemento body podem ser agrupados em classes, as quais podem
ser ligadas à folha de estilo que aumentam o poder de controle sobre os elementos.
Imagine que em um primeiro parágrafo queira colocar o texto na cor vermelha, no segundo
parágrafo verde e no terceiro cinza.
Exemplo:
<html>
<head>

</style>
</head>
<body>
<p class=" primeiro">Primeiro parágrafo</p>

<p class=" segundo">Segundo parágrafo</p>
<p class=" terceiro">Terceiro parágrafo</p>
</body>
</html>
Exemplo de Classe
O nome da classe, que pode ser qualquer um (não numérico), é identificado pelo ".".
Classes Únicas
Em certas situações, apenas um item dentro código é de uma determinada classe (como o topo
de um site, por exemplo) e para isso existem um identificação de classe única. A diferença para
classe tradicional (declarada com o ".") é que enquanto a classe comum pode ser usada por
diversas tags, a classe única só pode ser utilizada uma vez.
Imagine que em um layout exista um parágrafo que serve para identificar o preço de um produto
(mostrado apenas uma vez na página) e esse preço é exibido em vermelho
Exemplo:
<html>
<head>

</style>
</head>
<body>
<p>Notebook HP</p>
<p id="preço">R$ 3500,00</p>
</body>
</html>
O nome da classe única, que pode ser qualquer um (não numérico), é identificado pelo "#".
Redefinindo Tags
Ao redefinir uma tag HTML em CSS, ela é automaticamente formatada pelos estilos definidos.
Imagine que em um documento html você tenha várias ocorrências da tag <p>, e quer que todos
estes parágrafos fiquem com a mesma formatação. Então você redefine a tag <p>.
Exemplo:
<html>
<head>

</style>
</head>
<body>
<p>Primeiro parágrafo</p>
<p>Segundo parágrafo</p>
<p>Terceiro parágrafo</p>
</body>
</html>
Exemplo de tag redefinida
As declarações devem ser dadas da mais geral para a mais específica. As tags herdarão as
propriedades da declaração geral, tendo como mudança a declaração específica.
Os estilos CSS podem ser combinados, para otimização do código, declarando vários atributos
ao mesmo tempo para vários elementos.
Imagine que num determinado documento todo o texto é formatado com a fonte Arial, porém
cada tag (h1, h2 e p) possuem uma cor e tamanhos específicos. Imagine ainda que exista um
tipo de parágrafo especial que tem a cor diferente (porém ainda possui o valor semântico de um
parágrafo comum). Para isso são utilizadas declarações de redefinição de tag e classe, como no
exemplo a seguir:
<html>
<head>

</style>
</head>
<body>
<h1>Css é fundamental</h1>
<p>Todo o texto pode ser formatado com CSS, sem perder a sua função original.</p>
<h2>A semântica é importante para o código</h2>
<p class="destaque">Cada tag tem a sua função específica</p>
<p>Os parágrafos possuem função diferente dos títulos, apesar de poderem dividir
propriedades e atributos</p>
</body>
</html>
Propriedades de texto
As propriedades de texto definem como um texto será aplicado. Os elementos são:
▪ Endentação
▪ Alinhamento
▪ Espaçamento
▪ Caixa alta e baixa
▪ Espaçamentos entre linhas
Endentação
Text-indent
▪ Esta propriedade define a tabulação de um texto e seus valores podem ser dados em
diversas unidades de medida. O valor pode ser negativo, mas deve obedecer aos limites
impostos por cada browser.
Exemplo:
<html>
<head>
<title>Definindo indentação</title>

</style>
</head>
<body>
<p class="pixel">Neste parágrafo é utilizada a propriedade text-indent</p>
<p class="pontos">Neste parágrafo é utilizada a propriedade text-indent</p>
</body>
</html>
Exemplo da propriedade text-indent
Alinhamento
Text-align
▪ Esta propriedade define o alinhamento do texto.
Exemplo:
<html>
<head>
<title>Definindo Alinhamento</title>

</style>
</head>
<body>
<p class="centro">Neste parágrafo é utilida a propriedade text- align</p>
<p class="direita">Neste parágrafo é utilizada a propriedade text- align</p>
</body>
</html>
Exemplo da propriedade text-align
Espaçamento
Letter-spacing
▪ Esta propriedade define espaçamento entre as letras.
Exemplo:
<html>
<head>
<title>Definindo Espaçamento</title>

</style>
</head>
<body>
<p class="palavra">People</p>
</body>
</html>
Exemplo da propriedade letter-spacing
Caixa alta e baixa

Text-transform
▪ Esta propriedade define a caixa dos caracteres de um trecho de texto. O texto pode ficar
em maiúsculo, minúsculo ou com a primeira letra de cada palavra em maiúscula.
Seus valores-chave são:
▪ uppercase - todas as letras do texto serão em maiúsculas.;

▪ lowercase - todas as letras do texto serão em minúsculas.;
▪ capitalize - a primeira letra de cada palavra estará em maiúscula;
▪ none - nenhum.
Exemplo:
<html>
<head>
<title>Definindo caixa</title>

</style>
</head>
<body>
<p class="capitais"> Testando uma propriedade</p>
<p class="maiusculas"> Testando uma propriedade</p>
</body>
</html>
Exemplo da propriedade text-transform
Espaçamentos entre linhas

Line-height
▪ Esta propriedade define o espaçamento entre linhas de um parágrafo.
Exemplo:
<html>
<head>
<title>Definindo Espaço entre as linhas</title>

</style>
<body>
<h2>Espaçamento entre linhas Espaçamento entre linhas Espaçamento entre linhas
Espaçamento entre linhas Espaçamento entre linhas Espaçamento entre linhas

Espaçamento entre linhas Espaçamento entre linhas Espaçamento entre linhas </h2>
</body>
</html>
Exemplo da propriedade line-height
Propriedades de Cores e Fontes

Cor do elemento
As propriedades de cores e fontes definem cores e as configurações de tipografia para texto.
Color
▪ Esta propriedade permite definir uma cor para um elemento.
Exemplo:
<html>
<head>
<title>Definindo cor</title>
>
</style>
</head>
<body>
<h1>Titulo da página</h1>
<p>Definindo Fontes</p>
</body>
</html>
Exemplo da propriedade color
Propriedades de Fontes
As propriedades de fontes definem como as fontes serão aplicadas no texto.
Tipo de fonte
font-family
▪ Esta propriedade permite colocar como valores uma lista de fontes para as quais é dada
uma ordem de prioridade.
Exemplo:
.classe {font-family: Verdana,Arial,Helvetica,sans-serif;}

De acordo com a classe definida no exemplo anterior, as fontes serão aplicadas no texto e
disponibilizadas para o usuário se ele tiver essas fontes instaladas no computador, seguindo a
prioridade da classe (primeiro testará Verdana, em seguida Arial e assim sucessivamente, a
primeira fonte da lista que for encontrada será utilizada).
Caso o usuário não possua essas fontes, o tipo genérico "sans-serif", que designa fonte sem
serifa, será aplicado.
Exemplo:
<html>
<head>
<title>Tipo da fonte</title>

</style>
</head>
<body>
<p class="titulo"><b>Definindo Fontes</b></p>
<p class="texto">Testando fontes</p>
</body>
</html>
Exemplo da propriedade font-family
Quando utilizar fontes que levam em seu nome mais de uma palavra, deve colocá-la entre aspas.
Se as aspas forem omitidas, qualquer espaço, anterior ou posterior ao nome da fonte será
ignorado.
Estilo de fonte
font-style
▪ Esta propriedade define o estilo da fonte. Os valores para esta propriedade são:
▪ italic - usa o estilo itálico;
▪ oblique - exibe o estilo obliquo;
▪ normal - exibe a fonte no estilo normal.
Exemplo:
<html>
<head>
<title>Estilo da fonte</title>

</style>
</head>
<body>
<h1>Neste parágrafo é utilizada a propriedade font-style</h1>
</body>
</html>
Exemplo da propriedade font-style
Tipos de negrito
font-weight
▪ Esta propriedade permite definir a quantidade de negrito que será usada nos textos. Os
valores são:
▪ normal - exibe os caracteres no estilo normal;
▪ 100/200/300/400/500/600/700/800/900 - define quantidade de negrito que será aplicada;
▪ bold - usa o índice 700;
▪ bolder - usa o próximo índice de negrito disponível a partir do que esteja sendo usado;
▪ lighter - usa o índice anterior de negrito disponível a partir do que esteja sendo usado.
Exemplo:
<html>
<head>
<title>Definindo negrito</title>

</style>
</head>
<body>
<p class="n900">Esse trecho mostra o índice 900</p>
<p class="nbold"> Esse trecho mostra o índice bold</p>
</body>
</html>
Exemplo de propriedade font-weight
Tamanho da fonte
font-size
▪ Esta propriedade define o tamanho da fonte. Os valores são:

▪ xx-small/s-small/small/médium/large/x-large/xx-large - definem uma escala
crescente no tamanho da fonte, além das medidas padrão.
Exemplo:
<html>
<head>
<title>Definindo tamanho</title>

</style>
</head>
<body>
<p>100 pontos</p>
<p><b>Este texto está com 30 pontos</b></p>
</body>
</html>
Exemplo da propriedade font-size

É possível declarar um atributo para uma tag "filha". No último exemplo, a tag b, encontrada
dentro da tag p recebeu um atributo diferente.
Propriedades de Margens
Propriedades da Margem externa
As propriedades de margens permitem definir as margens em volta de um elemento. Suas
propriedades são:
▪ margin-top - define a margem superior da caixa;

▪ margin-bottom - define a margem inferior da caixa;
▪ margin-left - define a margem esquerda da caixa;
▪ margin-right - define a margem direita da caixa.
Exemplo:
<html>
<head>

</style>
</head>
<body>
<p class="paragrafo">Neste espaço digite qualquer coisa. Neste espaço digite
qualquer coisa. Neste espaço digite qualquer coisa. Neste espaço digite qualquer
coisa. Neste espaço digite qualquer coisa. Neste espaço digite qualquer coisa.
Neste espaço digite qualquer coisa. Neste espaço digite qualquer coisa. Neste
espaço digite qualquer coisa. </p>
<p class="paragrafo2">Neste espaço digite qualquer coisa. Neste espaço digite
qualquer coisa. Neste espaço digite qualquer coisa. Neste espaço digite qualquer
coisa. Neste espaço digite qualquer coisa. Neste espaço digite qualquer coisa.
Neste espaço digite qualquer coisa. Neste espaço digite qualquer coisa. Neste
espaço digite qualquer coisa. </p>
</body>
</html>
Exemplo das propriedades de margem externa
Propriedades de Margem interna

Essa propriedade define o espaço entre o elemento e suas bordas. Suas propriedades são:
▪ padding-top - margem interna superior;

▪ padding-bottom - margem interna inferior;
▪ padding-left - margem interna esquerda;
▪ padding-right - margem interna direita.
Exemplo:
<html>
<head>

</style>
</head>
<body>
<h2>Exemplo de um texto</h2>
</body>
</html>
Exemplo das propriedades da margem interna

As declarações de margem interna e margem externa (assim como as bordas) podem ser
abreviadas. Por exemplo:
p {margin:10px;} - margem 10 pixels para todos os lados do parágrafo;
p {margin:10px 20px;} - margem 10 pixels para o alto e para baixo e 20 pixels para a esquerda
e direita;
p {margin:10px 20px 30px 40px;} - margem 10 pixels no alto, 20 pixels à direita, 30 pixels
abaixo e 40 pixels à esquerda. A declaração é feita em sentido horário, partindo do alto.
Formatação de texto, incluindo parágrafos e títulos
<html>
<head>

</style>
</head>
<body>
<h1>Css é fundamental</h1>
<p>Todo o texto pode ser formatado com CSS, sem perder a sua função original.</p>
<h2>A semântica é importante para o código</h2>
<p>Cada tag tem a sua função específica</p>
<p>Os parágrafos possuem função diferente dos títulos, apesar de poderem dividir
propriedades e atributos</p>
</body>
</html>
Propriedades de Fundos
Cor de fundo
As propriedades de fundo definem cores e imagens de fundo para elementos do HTML.
background-color
▪ Esta propriedade define a cor de fundo do elemento que está usando esta propriedade,
como o fundo de um texto ou uma página.
Exemplo1:
<html>
<head>
<title>Definindo cor de fundo</title>

</style>
</head>
<body>
<h1>teste de cor de fundo</h1>
</body>
</html>
Exemplo1 da propriedade background-color
Imagem de fundo
background-image
▪ Esta propriedade permite usar uma imagem, como fundo de uma página.
Exemplo:
<html>
<head>
<title>Definindo imagem de fundo</title>

</style>
<body>
<p>Há uma imagem para o fundo da página</p>
</body>
</html>
Exemplo da propriedade background-image
Repetição da imagem de fundo

background-repeat
▪ background-repeat - Esta propriedade permite definir como a imagem do fundo será

repetida. Com esta propriedade dá para controlar a taxa de preenchimento da tela com a imagem
de fundo.
▪ repeat - repete a imagem na horizontal e vertical;

▪ repeat-x - repete a imagem apenas na horizontal;
▪ repeat-y - repete a imagem apenas na vertical;
▪ no-repeat - não repete a imagem;
▪ center - centraliza a imagem dentro do selecionador; quando usado em x, centraliza
horizontalmente, e em y, verticalmente.
Exemplo:
<html>
<head>
<title>Definindo repetição</title>

</style>
</head>
<body>
<p>testando</p>
</body>
</html>
Exemplo da propriedade background-repeat
Posição da imagem de fundo

Background-position
▪ Essa propriedade permite definir a posição da imagem. O valor padrão para essa
propriedade é scroll, que permite que a imagem desapareça conforme a barra de rolagem é
usada.
elemento {propriedade:valorxy;}
▪ top - alinha a imagem como o topo do elemento selecionador. Só vale para substituir y;
▪ left - alinha a imagem com o canto esquerdo do elemento selecionador. Só vale para
substituir x;
▪ right - alinha a imagem como o canto direito do selecionador. Só é válido na
substituição de x;
▪ bottom - alinha a imagem com a parte inferior do selecionador. Só vale para y;
▪ center - centraliza a imagem dentro do selecionador; quando usado em x, centraliza
horizontalmente, e em y, verticalmente.
Exemplo:
<html>
<head>
<title>Definindo posição</title>

</style>
</head>
<body>
<p>Tudo vale a pena quando a alma não é pequena</p>
</body>
</html>
Exemplo da propriedade background-position

Fixando a imagem de fundo
background-attachment
▪ Esta propriedade fixa a imagem de fundo de forma que ela continue aparecendo, mesmo
se o internauta utilizar a barra de rolagem para visualizar o restante da página.
elemento {propriedade:valor;}
Existem dois valores para essa propriedade:
▪ fixed - a imagem é fixa na janela;

▪ scroll - a imagem é movimentada à medida que o usuário movimenta a página.
Exemplo:
<html>
<head>
title>Fixando imagem de fundo</title>

</style>
</head>
<body>
<p align="center"><a href="pagina.htm">Teste</a></p>
</body>
</html>
Efeitos
Text-decoration
▪ Esta propriedade define diversos efeitos de texto.
▪ none - nenhum efeito;

▪ underline - sublinhado;
▪ overline - faz com que a linha seja exibida acima do texto;
▪ line-through - traça uma linha através do texto.
Exemplo:
<html>
<head>
<title>Definindo Efeitos</title>

</style>
</head>
<body>
<p class="sublinhado"> Testando uma propriedade</p>
<p class="riscado"> Testando uma propriedade</p>

<p class="sobre"> Testando uma propriedade</p>
<p class="nada"> Testando uma propriedade</p>
</body>
</html>
Exemplo da propriedade text-decoration
▪ Para tirar o sublinhado do link de texto:
Exemplo:
<html>
<head>

</style>
</head>
<body>
<p align="center"><a href="pagina.htm">Teste</a></p>
</body>
</html>
Bordas (Parte 1)
Propriedade de Bordas
Essa propriedade permite colocar bordas ao redor de qualquer conteúdo dentro de uma página.
Os valores para esta propriedade são:
Exemplo:
<html>
<head>

</style>
</head>
<body>
<p class="titulo">Titulo da página</p>
<p class="texto">Este texto aparecerá com bordas em sua volta</p>
</body>
</html>
Exemplo da propriedade border-width
Parte 2
Também pode ser usada a propriedade border-width que permite definir a espessura da borda
superior, direita, inferior e esquerda (nesta ordem).
Exemplo:
<html>
<head>
.titulo {border-width: 4pt 15pt 4pt 15pt;

border-color: red;
</style>
</head>
<body>
<p class="titulo">Título</p>
</body>
</html>
Exemplo usando a propriedade border-width com valores
Parte 3
Exemplo:
<html>
<head>

</style>
</head>
<body>
<p class="titulo">Título</p>
</body>
</html>
Exemplo da propriedade de borda border-color
Parte 4
Exemplo:
<html>
<head>
.solido {border-color: black;
border-style: solid;
border-width: 10pt;}
.dupla {border-color: green;
border-style: double;
.groove {border-color: orange;
border-style: groove;
.outset {border-color: yellow;

border-style: outset;
.inset { border-color: red;
border-style: inset;
</style>
<body>
<p class="solido">Texto</p>
<p class="dupla">Texto</p>
<p class="groove">Texto</p>
<p class="outset">Texto</p>
<p class="inset">Texto</p>
</body>
</html>
Exemplo da propriedade style-border
As bordas podem ser declaradas de maneira abreviada. Por exemplo:
P {border:10px solid #006600;} - Borda de 10 pixels, do tipo sólida e de cor verde.

Conceitos Básicos de HTML e CSS

Transféré par

Informations du document

Description originale:

Copyright

Formats disponibles

Partager ce document

Partager ou intégrer le document

Options de partage

Avez-vous trouvé ce document utile ?

Ce contenu est-il inapproprié ?

Droits d'auteur :

Formats disponibles

Conceitos Básicos de HTML e CSS

Transféré par

Droits d'auteur :

Formats disponibles

Conceitos Básicos

Uma página HTML é um arquivo-texto simples (ASCII) contendo o texto da página e os

▪ desenvolve páginas limpas em termos de codificação que são carregadas rapidamente;

Estrutura de uma página

Para testar cada código apresentado no exemplo:

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"

<title> Título da página </title>

<title>IFSULDEMIAS – Polo Circuito das Águas. Formando Técnicos e cidadãos

<meta name="description" content="conteúdo da pagina" />

<meta name="description" content="Site da People Computacao. Empresa de

Treinamento em informatica para iniciantes e profissionais. Microsoft Solution

Provider. Centro Autorizado Microsoft ATEC (Authorized Technical Education

Center). Centro autorizado de exames Sylvan Prometric.">

<meta name="keywords" content="palavras-chave da pagina" />

<meta name="keywords" content="treinamento, informatica, cursos de informatica

para iniciantes, cursos de informatica para profissionais, integração de

sistemas, exames Sylvan Prometric, ATEC, CTEC, calendario de cursos, conteudo

programatico, certificação profissional Microsoft, franquias de treinamento,

Corpo (Body) - Imagem de fundo

Corpo (Body) - Cor de fundo

<body bgcolor="cor" >

<body text="cor" link="cor" vlink="cor" alink="cor" topmargin="0" leftmargin="0">

<body bgcolor="#000000" link="#FFFF00" vlink="#FF00FF" alink="#00FF00">

Parágrafos e quebra de linha

Testando sem colocar parágrafo.

Ver se sem o marcador sai na linha debaixo.

<p>Agora com o marcador de parágrafo.</p>

O marcador de parágrafo possui um atributo opcional align para configurar o alinhamento do

<p align="center">Texto do parágrafo</p>

Testando sem colocar parágrafo.

<p>Agora com o marcador de parágrafo.</p>

Agora com quebra de linha.<br>

<font face="nome_da_fonte" size="tamanho_da_fonte" color="cor_da_fonte"></font>

<font face="Arial">Formatação de texto</font>

<font face="Arial,Verdana,Times New Roman">definindo fontes </font>

SIZE: configura o tamanho da fonte.

<font face="Verdana" size="3" color="#C71585">Formatação de texto </font>

<h1>Título de nível 1</h1>

<p>Essa é uma lista com marcadores</p>

<p>Essa é uma lista com numeradores</p>

Texto semanticamente correto

▪ substitua todas as tags Font por estilos CSS;

Veja um exemplo de texto com a formação correta:

<p><b>HTML</b> (acrônimo para a <i>HyperText Markup Language</i>, que

significa Linguagem de Marcação de Hipertexto) é uma linguagem de

marcação utilizada para produzir páginas na Web</p>

<p><b>Tim Berners-Lee</b> criou o HTML original (e outros protocolos

associados como o HTTP) em uma estação <i>NeXTcube</i> usando o

ambiente de desenvolvimento NeXTSTEP.</p>

<p>As primeiras versões do HTML foram definidas com regras sintáticas

flexíveis, o que ajudou aqueles sem familiaridade com a publicação na

Web. Atualmente a sintaxe do HTML é muito mais rígida, permitindo um

código mais preciso. Através do tempo, a utilização de ferramentas para

autoria de HTML aumentou, assim como a tendência em tornar a sintaxe

cada vez mais rígida. Apesar disso, pois questões histórias, os

navegadores ainda hoje conseguem interpretar páginas web que estão

longe de ser um código HTML válido.</p>

Todo documento HTML apresenta ,<b>etiquetas</b>, elementos entre

parênteses angulares (sinais de maior e menor) (< e >); esses elementos

são os comandos de formatação da linguagem. A maioria das etiquetas tem

<p>Isso é necessário porque as etiquetas servem para definir a

formatação de uma porção do documento, e assim marcamos onde começa e

termina o texto com a formatação especificada por ela.</p>