HTML Online

HTML Online
HTML Online
Todos os direitos reservados para Alfamídia Prow.
AVISO DE RESPONSABILIDADE
As informações contidas neste material de treinamento são distribuídas “NO ESTADO EM

QUE SE ENCONTRAM”, sem qualquer garantia, expressa ou implícita. Embora todas as
precauções tenham sido tomadas na preparação deste material, a Alfamídia Prow não tem
qualquer responsabilidade sobre qualquer pessoa ou entidade com respeito à
responsabilidade, perda ou danos causados, ou alegadamente causados, direta ou
indiretamente, pelas instruções contidas neste material ou pelo software de computador e
produtos de hardware aqui descritos.
01/2011 – Versão 1.1
Alfamídia Prow
http://www.alfamidia.com.br
2 2011 Alfamídia Prow.

HTML Online
A Alfamídia dá Boas Vindas aos seus clientes e deseja um

excelente treinamento.
Benefícios ao aluno
- Suporte pós-treinamento via e-mail (3 consultas por 90 dias após o término do curso)
para tirar dúvidas do conteúdo ministrado em aula, através do e-mail
matricula@alfamidia.com.br;
- Acesso a extranet www.alunoalfamidia.com.br para verificação de agenda e pontos do

PROGRAMA FIDELIDADE;
- Convênio com o estacionamento do prédio (desconto);
- Avaliações de acompanhamento e final de curso (em cada módulo) durante todo o

treinamento, garantindo a qualidade do curso.
Observações Importantes
- É obrigatório que sejam salvos todos os trabalhos efetuados durante a aula, no servidor
indicado pelo instrutor.
- Não é permitido entrar em sala de aula com alimentos ou bebidas de qualquer espécie ou
fumar nas dependências da Alfamídia;
- Não é permitida a instalação de outros Hardwares ou Softwares que não sejam os

utilizados em treinamento;
- O preenchimento da avaliação final de curso/módulo é condição obrigatória para que o

aluno possa acionar a garantia do curso, conforme previsto na ficha de matrícula;
- Somente será fornecido certificado ao aluno com assiduidade igual ou superior a 75% do
treinamento;
- Qualquer necessidade de alteração na agenda ou cursos contratados inicialmente,

consulte os Termos de Contratação na Ficha de Matrícula;
- Contatos com a Alfamídia podem ser feitos através dos e-mails:
matricula@alfamidia.com.br – dúvidas após contratação
info@alfamidia.com.br – novas contratações

HTML Online
Linguagem HTML
UNIDADE 1 APRESENTAÇÃO .................................................................................................................................... 6

SOBRE O CURSO ...................................................................................................................................... 6
ESTRUTURA DO CURSO ............................................................................................................................ 6
UNIDADE 2 INTRODUÇÃO AO HTML ......................................................................................................................... 7
A LINGUAGEM HTML E A INTERNET ........................................................................................................ 7
CONCEITOS BÁSICOS DE HTML ............................................................................................................... 8
TAGS BÁSICAS ........................................................................................................................................ 9
PERGUNTAS FREQÜENTES ...................................................................................................................... 10
UNIDADE 3 CRIANDO CÓDIGOS COM O DREAMWEAVER..................................................................................... 11
SOBRE O ADOBE DREAMWEAVER ........................................................................................................... 11
ABRINDO O DREAMWEAVER .................................................................................................................. 11
SALVANDO O ARQUIVO ......................................................................................................................... 13
UNIDADE 4 HTML – RECURSOS BÁSICOS ............................................................................................................. 15
EXEMPLO DE HTML COM T AGS BÁSICAS ............................................................................................... 15
TAGS BÁSICAS ...................................................................................................................................... 15
MAIS T AGS BÁSICAS DE HTML ............................................................................................................. 16
TAGS APRESENTADOS ........................................................................................................................... 17
ALINHAMENTOS .................................................................................................................................... 18
FORMATAÇÃO DE TEXTOS ..................................................................................................................... 20
LISTAS .................................................................................................................................................. 22
NOVO EXEMPLO DE LISTAS .................................................................................................................... 23
LISTAS COM SUBNÍVEIS ......................................................................................................................... 24
UNIDADE 5 CORES EM HTML .................................................................................................................................. 26
INTRODUÇÃO A CORES EM HTML .......................................................................................................... 26
UTILIZANDO O VERMELHO..................................................................................................................... 27
UTILIZANDO O VERMELHO COM VERDE.................................................................................................. 27
ALGUNS EXEMPLOS COM TODAS AS CORES ............................................................................................ 28
UNIDADE 6 DEFININDO O CORPO DA PÁGINA...................................................................................................... 29
A TAG BODY ....................................................................................................................................... 29
INSERINDO IMAGENS NO FUNDO DA PÁGINA ........................................................................................... 29
UNIDADE 7 INCLUINDO IMAGENS EM UMA PÁGINA.............................................................................................. 32
A TAG IMG .......................................................................................................................................... 32
ALINHAMENTO DE IMAGENS .................................................................................................................. 33
UNIDADE 8 CRIANDO LINKS................................................................................................................................... 35

HTML Online
A TAG A ............................................................................................................................................... 35
CRIANDO LINKS INTERNOS E EXTERNOS ................................................................................................. 35
UNIDADE 9 CRIANDO TABELAS.............................................................................................................................. 37
AS TAGS TABLE, TR, TD E TH............................................................................................................. 37
ATRIBUTOS ........................................................................................................................................... 38
UNIDADE 10 FORMULÁRIOS .................................................................................................................................. 45
INTRODUÇÃO A FORMULÁRIOS ............................................................................................................... 45
A TAG FORM ....................................................................................................................................... 45
ENTRADA DE TEXTO COMUM - TEXT ..................................................................................................... 46
ENTRADA DE TEXTO PROTEGIDO, SENHA - PASSWORD ......................................................................... 47
ENTRADA OCULTA - HIDDEN ............................................................................................................... 48
ENTRADA DE VÁRIAS LINHAS DE TEXTO - TEXTAREA ........................................................................... 49
MENUS COM OPÇÕES - SELECT ............................................................................................................. 50
LISTAS PAGINÁVEIS - SELECT COM SIZE .............................................................................................. 51
BOTÕES SIM OU NÃO – CHECKBOX ......................................................................................................... 52
BOTÕES COM OPÇÕES - RADIO .............................................................................................................. 53
BOTÕES DE SUBMISSÃO E LIMPEZA - RESET E SUBMIT ........................................................................ 54
ANEXO 1 PRINCIPAIS TAGS .................................................................................................................................... 56
ANEXO 2 FRAMES.............................................................................................. ERRO! INDICADOR NÃO DEFINIDO.

HTML Online
Unidade 1
Organização do Curso
Sobre o Curso
O curso Linguagem HTML para Designers e Programadores apresenta aos alunos as
principais características da linguagem, visando prepará-los tanto para criar páginas
HTML simples quanto entender códigos HTML que venham a encontrar.
Designers dificilmente criarão seus layouts diretamente em HTML, utilizando geralmente
ferramentas de edição de páginas – como Dreamweaver – ou ferramentas de manipulação
de imagens – como o Photoshop e o Fireworks. Entretanto, é comum ser necessário
ajustar os layouts gerados, editando diretamente no HTML, seja para pequenas
modificações, seja para aplicar recursos que a ferramenta não contempla. Este curso
também dá uma base mais aprofundada para entender as potencialidades de ferramentas
de edição de páginas e as restrições de layout impostas pela linguagem HTML.
Para programadores, o curso é fundamental por fornecer uma base para entenderem o
código HTML que é utilizado em aplicações Web escritas em PHP, JavaServer Pages,
Javascript e ASP.
Estrutura do Curso
A primeira unidade apresenta a ferramenta Dreamweaver, uma ferramenta profissional
para edição de páginas HTML. Para este curso, o uso da ferramenta é opcional, podendo
o curso também ser todo ele apresentado utilizando qualquer editor de texto, como o
bloco de notas. A unidade serve, porém, de referência para programadores e designers
que forem utilizar a ferramenta.
As unidades seguintes apresentam vários elementos da linguagem HTML, intercalando
com exercícios e exemplos práticos, para melhor absorção do conteúdo.
Os anexos apresentam, além de tabelas com tags HTML, uma apresentação do recurso de
frames, recurso praticamente obsoleto mas que ainda pode ser encontrado em algumas
páginas HTML.

HTML Online
Unidade 2
Introdução ao HTML
A Linguagem HTML e a Internet
A Internet teve início nos Estados Unidos em 1969 sob o nome de ARPANET. Composta
inicialmente de quatro computadores interligados, ela tinha como finalidade demonstrar
as potencialidades da construção de redes usando computadores dispersos em uma grande
área. Em 1972, 50 universidades e instituições militares já possuíam conexões.
Hoje a Internet é uma arquitetura de software e hardware interligados que são mantidas
por organizações comerciais e governamentais. Uma de suas principais características é
que não possui um proprietário único, responsável pelo seu funcionamento. Existem
apenas associações e grupos que se dedicam a desenvolver protocolos e procedimentos
para suportar a interligação entre os computadores, ratificar padrões e resolver questões
operacionais.
Um dos principais elementos que levaram a popularização da Internet foi a World Wide
Web (teia de abrangência mundial), também conhecida como WWW. Trata-se de uma
nova forma dos usuários navegarem pelas informações e arquivos disponíveis nos vários
computadores ligados a Internet. O modelo WWW é tratar todos os dados da Internet
como hipertexto, isto é, vinculações entre diferentes documentos, para permitir que as
informações sejam exploradas interativamente e não apenas de uma forma linear.
A principal linguagem utilizada na Web é justamente a linguagem HTML (Hypertext
Markup Language) uma linguagem criada com o objetivo de formatar informações de um
texto e definir os hiperlinks entre um texto e outro, ou seja, os pontos de vinculação entre
documentos.
Hoje existem diversas ferramentas que permitem navegar na Internet e visualizar as
páginas HTML, sendo as mais conhecidas o Microsoft Internet Explorer, o Google
Chrome e o Mozilla Firefox. Estas ferramentas são popularmente conhecidas como
navegadores ou browsers.
Da mesma forma, existem também inúmeros editores visuais, dos quais o Adobe
Dreamweaver é o mais utilizado, que gravam arquivos no formato HTML.
Desta forma, é possível criar todo um site e colocá-lo na Internet sem se possuir nenhum
conhecimento em HTML. Para um trabalho profissional, porém, principalmente quando o
site faz uso de recursos mais avançados de programação ou acesso a bancos de dados, a
linguagem HTML começa a se tornar mais importante para o webdesigner, já que este
começa a sentir necessidade de ter um conhecimento mais aprofundado do
funcionamento de seu site.

HTML Online
Conceitos Básicos de HTML

Toda vez que você acessa um site através de um browser você vê páginas na WEB bem
dinâmicas, organizadas, animadas, com informações, imagens, sons, vídeos, entre outros
recursos.
Todas estas páginas possuem um código fonte escrito numa linguagem chamada HTML
(Hyper Text Markup Language). Documentos HTML são arquivos escritos em ASCII (
texto ), que podem ser criados em qualquer editor de texto.
Há diferenças entre os diversos browsers da Web de forma que nem todas as marcações e
seus correspondentes recursos são suportados por todos eles. Quando um browser não
entende uma determinada marcação, ele simplesmente a ignora. Ao criar um documento,
é importante testá-lo com vários browsers.
HTML utiliza marcações específicas e distintas para dizer ao browser como exibir o
documento, chamadas de tags. O HTML não faz diferença entre maiúsculas e minúsculas
(não é "case sensitive"). Então a notação <title> é equivalente a <TITLE> ou <TiTlE>,
porém, com a evolução do HTML para a versão 5, recomenda-se utilizar as minúsculas
para termos um melhor adaptação quando a versão estiver 100% incorporada aos
browsers a partie de 2012 (Previsão para o lançamento oficial para os novos
navegadores).
As marcações do HTML - tags - consistem do sinal (<), (o símbolo de "menor que"),
seguida pelo nome da marcação e fechada por (>) ("maior que").
De um modo geral, as tags aparecem em pares, por exemplo, <H1> Cabeçalho</H1>. O
símbolo que termina uma determinada marcação é igual àquele que a inicia, antecedido
por uma barra (/) e precedido pelo texto referente.
No exemplo, <H1> avisa ao cliente Web para iniciar a formatação do primeiro nível de
cabeçalho e </H1> avisa que o cabeçalho acabou.
Há tags que não exigem o fechamento, funcionando – via de regra – com ou sem a
definição de uma tag de fechamento, como é o caso da tag de definição de parágrafo <p>.
O padrão mais recente de uso do HTML, entretanto, recomenda que esta tag seja sempre
fechada, para termos um padrão mais próximo do utilizado em XHTML.
Outras tags efetivamente não tem marcações de final, como a tag <BR> que apenas
define uma linha em branco, e a tag <HR> que exibe uma linha divisória.
Este tutorial tem por objetivo mostrar como criar e exibir páginas HTML. Tais páginas
são criadas a partir de arquivos texto ASCII, contendo caracteres de marcação da
linguagem HTML. Uma vez criados, estes arquivos são salvos com uma extensão .html
ou .htm

HTML Online
Tags Básicas
A seguir apresentamos as tags básicas de uma página HTML, que são suficientes para
criar uma página mínima. Nas lições seguintes apresentaremos diretamente exercícios
que incluirão novas tags que permitirão controlar diversas características da página.
<HTML>...</HTML>
Toda página HTML deve estar entre o tag de início de um documento HTML e o tag de
fim deste documento.

Este é um tag especial de comentário. Tudo que for colocado dentro deste tag que começa
com uma exclamação é ignorado pelos browsers, podendo ser utilizado para comentários
dentro do código. Usualmente se acrescentam dois traços no início e fim do tag.
Ex: 
<HEAD>...</HEAD>
Envolvem a seção de cabeçalho do documento, no qual são especificadas informações
que não são exibidas na página, como título do documento e informações sobre o assunto
da página.
<TITLE>...</TITLE>
Indica o título do documento para o Browser. Geralmente os Browsers apresentam este
título na barra de título da sua Janela no Windows.
Ex: <head><title>Título da Página</title></head>
<BODY>...</BODY>
Envolvem a seção de corpo do documento. Aqui fica o conteúdo principal da Home Page.
Opcionalmente podemos indicar um arquivo de imagem para formar o fundo, usando a
opção: BACKGROUND.
<BR>
Este tag não contém um correspondente para fechamento. Ele simplesmente indica uma
quebra de linha, o que significa que o texto segue na linha seguinte da página.

HTML Online
Perguntas Freqüentes
HTML é uma linguagem de programação?
Sim e não. Certamente ela possui características de uma linguagem de programação, já
que engloba comandos e diretivas. Mas, ao contrário das demais linguagens de
programação, HTML não controla os recursos físicos do computador. Ela só envia
informações de representação gráfica ao browser, o qual, por sua vez, irá conversar com o
hardware da máquina, transformando seus comandos e diretivas na representação gráfica
solicitada.
Existem limitações no emprego da linguagem HTML?
Sim e muitas. A HTML limita bastante o trabalho dos designers e comunicadores visuais.
Você não pode colocar os parágrafos em qualquer posição da página, não pode definir
qualquer tamanho de corpo. Não pode sequer estabelecer os tipos de fontes que serão
usados para representar textos. Pouco pode ser feito, também, com imagens, exceto
inseri-las em certas posições predefinidas.

HTML Online
Unidade 3
Criando códigos com o
Dreamweaver
Sobre o Adobe Dreamweaver
O Dreamweaver é o software mais utilizado pelos profissionais de web design. Com ele
você desenvolve seus sites com facilidade e tecnologia e pode optar em utilizar tanto um
ambiente para designers quanto um ambiente para desenvolvedores. Nesta unidade
apresentamos um pequeno tutorial que mostra como abrir e editar arquivos HTML em
Dreamweaver.
Se o software não for utilizado no curso de HTML, esta unidade pode ser pulada, mas
ainda assim será de valor para o aluno como referência, se no futuro ele optar pelo
Dreamweaver como ferramenta para manipular códigos HTML.
Abrindo o Dreamweaver
Clique no menu iniciar > Todos os Programas > Adobe Design Premium CS5 ou Adobe
Master Collection CS5 > Adobe Dreamweaver CS5
Caso apareça a tela abaixo escolha Modo Classic na parte superior e para quando for criar
novos arquivos, escolha Create New Html:
Porém, antes de criar um arquivo novo é preciso definir a pasta de trabalho que você irá
gerenciar o seu site, chamamos esta pasta de “Pasta Raiz” ou “Root”.

HTML Online
Clique em Site > New Site conforme a figura abaixo:
No Site Setup do site configure o nome do site e "Advanced"

HTML Online
Coloque as seguintes informações:

Site Name: Meu Site (Para cada site você terá que colocar um novo nome)
Local Root Folder: A sua "Pasta Raiz" (o local onde você vai salvar as suas páginas)
Agora clique no menu File > New e escolha as opções conforme a figura abaixo:
Obs.: Acessando o menu Window > File você visualizara a sua pasta raiz, manipulando
de forma rápida e eficaz seus arquivos.
Salvando o Arquivo
Acesse o menu File > Save (note que o Dreamweaver já direcionou o arquivo à sua pasta
raiz) e salve o seu arquivo com o nome de "primeira_pagina"
Obs: O dreamweaver já coloca a extensão do arquivo automaticamente (.htm, .html,
.XHTM, etc.)

HTML Online
Como neste treinamento vamos trabalhar com códigos na guia primeira_pagina

selecione o botão "code" sua tela ficará conforme abaixo. Editar e salvar arquivos, agora,
segue os mesmos procedimentos mostrados, análogos a outras ferramentas. A medida que
for dominando novas funcionalidades do HTML, explore a interface do Dreamweaver
para se familiarizar com os recursos que a mesma fornece como apoio a edição HTML.

HTML Online
Unidade 4
HTML – Recursos Básicos
Exemplo de HTML com Tags Básicas
Todo documento HTML deve ser identificado como HTML ( <html>...</html> ), ter uma
área de cabeçalho ( <head>...</head> ) com o nome do documento ( <title> </title> ), um
título principal e uma área definida como corpo ( <body>...</body> ) do conteúdo do
documento. Como o exemplo a seguir:
<html>
<head>
<title>Minha primeira página</title>
</head>
<body>

HTML para designers.
<br>Curso de Web Design.
</body>
</html>
Tags Básicas
Seguindo as orientações do instrutor desenvolva o código abaixo utilizando o bloco de
notas ou a ferramenta recomendada pelo instrutor. Salve este arquivo como
exemplo1.htm (lembre que a extensão do arquivo deve ser .htm e não .txt).
<html>
<head>
<title>Minha Home Page</title>
</head>
<body>
Aqui neste espaço desenvolverei minha Home Page!
Aguarde!!
</body>
</html>
Para ver o resultado deste exemplo abra o browser e selecione o nome do arquivo
conforme as instruções do professor ou duplo clique no arquivo. Este procedimento será
repetido nas lições seguintes do curso. O resultado deverá ser semelhante ao mostrado na
figura a seguir.

HTML Online
Mais Tags Básicas de HTML

Em alguns momentos em sua página faz necessário comentar alguns trechos do código
para facilitar na leitura e manutenção da página, por isso adicionamos comentários, ou
seja, palavras ou frases que não são exibidos no browser, apenas são visto como estamos
trabalhando no código fonte.
Na listagem abaixo faremos um novo exemplo e incrementaremos novos tags. Digite a
listagem abaixo e salve com o nome exemplo2.html.


<html>
<head>
<title>Melhorando minha home page</title>
<meta name="author" content="nmbs informática">
<meta name="keywords" content="html, homepages">
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
</head>

<body>
<h1>Este é o título Principal</h1>
<h2>Este é o título Secundário</h2>
<h3>Estou adorando criar páginas</h3>
<hr>
<p>Este é o 1º primeiro paragráfo
<br>Esta é 2ª linha do 1º paragráfo
</p>
<p>Com este recurso inicio um paragráfo

HTML Online
<br>E com este recurso quebro uma linha

</p>
<hr>

</body>
</html>

Veja o resultado no browser.
Tags Apresentados
TAG O QUE FAZ

 Insere comentários nas páginas
<meta> Marcas Metas. Servem para você especificar o
autor, palavras-chaves, descrição da página,
linguagem ou língua padrão do site, entre outros.

HTML Online
Dentro do tag<meta>, tem os comandos name e o

content. No comando name você especifica que
informação você quer dar, e no content você
descreve a informação.
<h1><h2><h3> Marca um título. O tamanho muda de forma
decrescente, ou seja, o número 1 é o maior
<h4><h5><h6>
tamanho do título indo até o menor, 6.
<hr> Insere uma linha horizontal
<p> Marca um parágrafo e acrescenta uma linha em
branco.
<br> Insere uma quebra de linha
Alinhamentos
Assim, como num documento comum, há necessidade de melhorar a aparência do
documento, e a primeira providência a tomar é cuidar do alinhamento do texto. O
Alinhamento padrão que vem configurado nos navegadores é a esquerda. Para entender
isto, digite a listagem abaixo, e salve como exemplo3.html, e acompanhe o conceito de
tag que marcam o alinhamento dos títulos e parágrafos nas páginas.
<html>
<head>
<title>Tags para Alinhamentos</title>
</head>
<body>
<h4 align=center>Título Centralizado</h4>
<h4 align=right>Título À Direita</h4>
<h4 align=left> Título À Esquerda</h4>
<hr>
<p align=center > Parágrafo ao Centro </p>
<p align=right >Parágrafo à direita </p>
<p align=left >Paragráfo à esquerda </p>
<p align=justify >Este é um texto justificado. Na linguagem HTML temos vários tipos de
alinhamentos que você poderá aplicar em sua página. Nesta parte do livro,veremos como
alinhar linhas, parágrafos e cabeçalhos. </p>
<br>
<br>
<hr width=50% align=center >
<blockquote>Texto com mais margem</blockquote >
<blockquote><blockquote>Tem com mais margem ainda </blockquote> </blockquote>
</body>

HTML Online
</html>
Para ver o resultado deste exemplo abra o Mozilla Firefox na página que você criou. Veja
a figura abaixo.
Tags Apresentados
TAG O QUE FAZ

<center> Alinha o trecho (texto, imagem ou tabela ao centro>
align=center, Atribuídos dentro do tag <p> que marca o início de um parágrafo
right, left ou modificam o alinhamento do título.
justify
Center = alinha ao centro
Right = alinha a direita
Left = alinha a esquerda
Justify = faz a justificação do parágrafo
<blockquote> Adiciona uma margem de cerca de um centímetro

<hr> Atributos
Size = define a altura da linha. Exemplo: <hr size=50>

HTML Online
Width = define a largura da linha horizontal.

Exemplo: <hr width=200>ou <hr width=50%>
Noshade = desenha a linha sem a sombra para dar o efeito de três
dimensões. Exemplo: <hr noshade>
Formatação de Textos
Neste exemplo trabalharemos com a formatação das letras bem como cor, tamanho de
fonte e estilo. Para entender isto, digite a listagem abaixo, e salve como exemplo4.html,
<html>
<head>
<title>Formatando Estilos</title>
</head>
<body>
<center>Mudando o Estilo dos Caracteres</center>
<p>
<b>Texto em Negrito</b><br>
<i>Texto em Itálico</i><br>
<u>Texto sublinhado</u><br>
<tt>Texto Monoespaçado</tt><br>
<br><font color=red >Texto em Vermelho</font>
<br><font size=5>Texto em Tamanho 5</font>
<br><font face=verdana>Texto com a letra Verdana</font>
<br><center>
<font color=blue face=verdana size=5><b>Olá Mundo!!!</b></font></center>
<br>Você poderá os atributos para cada tipo de letra!
<br>
<font color=blue size=6>O</font><font color=red size=4>lá Mundo</font>
<br>
<pre>
Estamos progredindo
no curso de HTML.
Este tag permite que todos os espaços feitos no código fonte
sejam respeitados. Certo?
</pre>
</p>
</body>
</html>

HTML Online
Tags Apresentados
TAG O QUE FAZ
<b> Coloca o texto em negrito
<i> Coloca o texto em itálico
<u> Coloca o texto sublinhado
<tt> Coloca o texto em fonte monoespaçada. (fonte Courier,como
máquina de escrever)
<font> Modifica a formatação do texto.
Atributos:
Size = define o tamanho da letra. Ex: <font size=5>Texto</font>
Face = define o estilo da letra. Ex: <font
face=verdana>Texto</font>
Color = define a cor da letra. Ex:<font color=red>Texto</font>
<pre> Marca um trecho formatado com fonte monoespaçada. A

formatação com espaços e entrada de parágrafos é respeitada.
<basefont> Modifica a formatação padrão do texto.
Ex: <basefont size=5>

HTML Online
Listas
Neste exercício trabalharemos com listas ordenadas e marcadores. Assim como em uma
carta ou qualquer outro documento comum, precisamos listar tópicos através de símbolos
ou números.
Para entender isto, digite a listagem a seguir, e salve como exemplo5.html.
<html>
<head>
<title>Listas</title>
</head>
<body>
<h3>Isto é uma lista</h3>

<ol>
<li>Item 1 </li>
<li>Item 2 </li>
<li>Item 3 </li>
</ol>

<hr width=50% size=5 align=left>

<ul>
<li>Item 1 </li>
<li>Item 2 </li>
<li>Item 3 </li>
</ul>

</body>
</html>

HTML Online
Tags Apresentados
TAG O QUE FAZ

<ol> Marca o início e o fim de uma lista ordenada. Recebem na primeira
linha um número ou letra. Devem ser usados com tag <LI>
Atributos
Start = especifica o número a partir do qual os itens começam a ser
contados. Ex: <ol start=3>
Type = modifica o tipo do numerador que pode ser: número, letras ou
algarismo romano.
Ex: <ol type=A> <ol type=I>
<ul> Marca o início e o fim de uma lista não ordenada, ou seja, os itens da
lista recebem símbolos na primeira linha. Devem ser usados com tag
<LI>
Atributos
Type = modifica o tipo do marcador (símbolo), que pode ser:
Circle = um círculo vazio. Ex: <ul type=circle>
Disc = um círculo cheio. Ex: <ul type=disc>
Square = um quadrado cheio Ex: <ul type=square>
Novo Exemplo de Listas

Para fixar melhor o conceito de listas, vamos apresentar um segundo exercício. Digite a
listagem a seguir e salve como exemplo6.html.
<html>
<head>
<title>Listas</title>
</head>
<body>
<h3>Isto é uma listagem iniciando no número 4</h3>
<ol start=4>
<li>Item 1 </li>
<li>Item 2 </li>
<li>Item 3 </li>
</ol>

HTML Online
<h3>Isto é uma listagem com letras</h3>

<ol type=a>
<li>html </li>
<li>para designers </li>
<li>alfamidia </li>
</ol>
<h3>Isto é uma listagem em algarismo romano</h3>
<ol type=i>
<li>html </li>
<li>alfamidia </li>
</ol>
<h3>Esta é uma listagem em algarismo romano a partir do número 3</h3>
<ol type=i start=”3”>
<li>html </li>
<li>alfamidia </li>
</ol>
</body>
</html>
Listas com Subníveis

Vamos terminar esta lição com mais um exemplo. Desta vez, faremos uma listagem com
subníveis.
Para entender isto, digite a listagem a seguir, e salve como exemplo7.html

HTML Online
<html>
<head><title>Listas</title>
</head>
<body>
<h3>Listagem e sublistagem</h3>
<ol>
<li>Item 1
<ul>
<li type=disc>Item 1.1
</ul>
<li> Item 2
<ul>
<li type=square >Item 2.1
<ul>
<li type=circle>Item 2.1.1
</ul>
<li type=circle>Item 2.2
<li type=circle>Item 2.3
</ul>
<li> Item 3
</ol>
</body>
</html>

HTML Online
Unidade 5
Cores em HTML
Introdução a Cores em HTML
O uso de cores em HTML pode ser feito através de duas formas básicas, utilizando o
nome em inglês de algumas cores específicas ou fazendo uso do código hexadecimal
RGB. O segundo método é mais recomendável, pois permite a definição de todas as cores
possíveis em RGB.
Diversas tags HTML permitem a definição de cor, como os tags font, body e outros que
serão vistos ao longo da apostila.
Exemplos de uso de cores em fonte:
<font color=#000000>texto em preto</font>

<font color=#ffffff>texto em branco</font>
<font color=#ff0000>texto em vermelho</font>
Nos exemplos acima, valores diferentes de código permitem a definição de cores

diferentes. É importante entendermos como estas cores são formadas para podermos
manipular estes códigos, porém na prática geralmente será utilizado algum editor visual
para escolher a cor desejada (Adobe Photoshop ou Adobe Fireworks).
As cores são definidas pela composição de 3 pares de algarismos, cada um representando
um valor entre 0 e 255. O primeiro destes pares representa a quantidade de vermelho na
cor, o segundo a quantidade de verde e o terceiro a quantidade de azul.
A primeira dificuldade para entender esta codificação se dá pelos números estarem em
hexadecimal, ou seja, ao invés dos números serem representados com números de 0 a 9,
são representados por estes números mais as letras A,B,C,D,E,F.
Felizmente não é essencial entender o mecanismo matemático para converter os números,
sendo suficiente para a maioria dos casos, possuir uma noção dos números mais
utilizados, como mostra a tabela abaixo:
Número codificado Valor do mesmo em
em hexadecimal decimal
00 0
33 51
66 102
99 153

HTML Online
CC 204
FF 255
Estes números são importantes, pois são os únicos utilizados para criar cores chamadas
web safe, que são as cores exibidas pelos browsers em monitores com 256 cores
configuradas.
Abaixo vamos fazer alguns exercícios para entendermos melhor o uso de cores,
utilizando as tags que já vimos anteriormente.
Utilizando o Vermelho
<html>
<head><title>vermelhos</title>
<body>
<br>
<font color=#330000>vermelho escuro, apenas 51 de vermelho e 0 de verde e azul
</font>
<br>
<font color=#660000>vermelho menos escuro
</font>
<br>
<font color=#990000>vermelhos cada vez mais claros
</font>
<br>
<font color=#cc0000>vermelho claro
</font>
<br>
<font color=#ff0000>o vermelho mais claro e puro possível
</font>
</body>
</html>
Observe o resultado e note que não foi utilizada a cor verde e azul. Obviamente podemos
criar vários tons de vermelho com parcelas menores das outras cores, como vamos ver no
exercício seguinte.
Utilizando o Vermelho com Verde

<html>
<head>
<title>vermelhos e verdes</title>

HTML Online

</head>
<body>
<br><font color=#ff9900>laranja: vermelho com algum verde</font>
<br>< font color =#ffff00>amarelo (vermelho + verde)</font>
<br>< font color =#99ff00>amarelo esverdeado</font>
<br>< font color =#00ff00>verde puro</font>
</body>
</html>
Alguns Exemplos com Todas as Cores

<html>
<head><title>todas as cores</title> </head>
<body>
<br><font color=#999999>cinza</font>
<br>< font color =#000099>azul</font>
<br>< font color =#9966ff>violeta</font>
</body>
</html>

HTML Online
Unidade 6
Definindo o corpo da página
A Tag BODY
Você deve ter observado em alguns sites, que as cores de fundo da página são bem
diversificados, ou em outros casos, uma imagem é adicionado no fundo da página, como
uma marca d’água. Todas estas definições são feitas dentro do tag BODY.
Para entender isto, digite a listagem abaixo, e salve como exemplo8.html,
<html>
<head><title>Página com fundo colorido</title>
</head>
<body bgcolor=#ff9900 text=#0000ff>
<h3>Definida cor de fundo para a página</h3>
</body>
</html>
Observação: Você poderá adicionar a cor que desejar, tanto para o fundo quanto para o
texto. Observe que as cores devem ter um contraste para não prejudicar a leitura.
Dica: Algumas cores funcionam colocando os nomes em inglês como Blue (azul),
Red (vermelho) substitua os códigos Hexadecimais pelos nomes das cores e veja os
resultados
Inserindo Imagens no Fundo da Página

Você também pode colocar uma imagem no fundo da página, que pode estar armazenada
nos formatos GIF, PNG ou JPG. Não é objetivo deste curso abordar o aspecto do
tratamento e manipulação de imagens, por isso faremos uso de imagens criadas na
Alfamídia.
Para entender isto, digite a listagem abaixo, e salve como exemplo9.html,
<html>
<head><title>Inserindo imagem no fundo da página</title>
</head>
<body background=fundo.jpg>
<he align=center>Editora de livros</h1>
<font size=4 face=verdana >

HTML Online
<ul>
<li>Livros</li>
<li>Dicas</li>
<li>Volte sempre</li>
</ul>
</font>
</body>
</html>
Para ver o resultado deste exemplo abra-o no Firefox:

HTML Online
Tags Apresentados
TAG O QUE FAZ
<body> Marca o início e o fim do corpo da página
Atributos
Bgcolor = define a cor do fundo da página
Text = define a cor do texto padrão da página
Background = permite inserir uma imagem como fundo da
página
Bgproperties = fixa a imagem no fundo da página quando a
página é rolada, criando um efeito de marca d’água.

HTML Online
Unidade 7
Incluindo Imagens em uma
Página
A Tag IMG
Neste exercício exercitaremos os tags que permitem a inserção de imagens em sua home
page.
Antes de iniciar o estudo sobre imagens, quero lembrar-lhe que uma imagem só poderá
ser exibida no browser, se ela estiver na mesma pasta, ou então, você deverá apontar o
caminho onde está.
Outro fato é que, você poderá escolher as imagens que desejar, basta substituir o nome da
imagem que está no exemplo pela que você escolheu.
Para entender, digite a listagem abaixo e salve como exemplo10.html.
<html>
<head><title>Imagens</title>
</head>
<body>
<h1>Agora estamos trabalhando com imagens</h1>
<img src= carro.jpg>
<br>O comando acima inseriu a imagem de um carro em sua página.
</body>
</html>

HTML Online
Dica: Você deve ter cuidado para que a imagem esteja no diretório adequado se não
a mesma não aparece
Alinhamento de Imagens
Neste exemplo trabalharemos com o alinhamento da imagem e do texto. Para entender
isto, digite a listagem a seguir, e salve como exemplo11.html
<html>
<head><title>Imagens</title>
</head>
<body>
Note neste exemplo que a imagem <img src=carro.jpg > está entre o texto
<br><hr><br>
<img src= carro.jpg align=top>Neste exemplo a imagem está à esquerda e o texto está no topo.
Observe que quando o texto continua na linha seguinte ele segue para abaixo da imagem
<br><hr><br>
<img src= carro.jpg align=middle>Imagem está à esquerda e o texto no centro, porém a
situação da quebra de linha persiste, com o texto seguindo, na linha seguinte, para abaixo da
imagem.
<br><hr><br>
<img src= carro.jpg align=left>Neste exemplo a imagem ficou alinhada à esquerda, permitindo
que o texto ficasse todo à direita ao redor da imagem. Utilize este recurso toda vez que desejar
que o texto fique ao lado da imagem
<br><hr><br>
<img src= carro.jpg align=right>Neste exemplo a imagem ficou alinhada à direita, permitindo
que o texto ficasse todo à esquerda ao redor da imagem.
</body>
</html>

HTML Online
Acompanhe com o professor como cada comando de alinhamento posiciona de forma

diferente o texto e a imagem.
Tags Apresentados
TAG O QUE FAZ

<img> Insere uma imagem
Atributos
src indica o nome da imagem a ser carregado.
align=middle centraliza o base do texto com o centro da imagem
align=left faz a imagem flutuar a esquerda enquanto o texto
circunda imagem à direita.
align=top alinha o texto no topo
align=right faz a imagem flutuar a direita enquanto o texto
circunda imagem à esquerda.
alt=”n” indica o texto para ser exibido quando o navegador não
exibe a imagem. Sendo que n é o título que identifique a imagem.
Exemplo: <img src=fig.jp alt=”Esta é uma imagem legal”>

HTML Online
Unidade 8
Criando Links
A Tag A
Até este momento foram mostrados comandos para criar uma página isolada. Para
criarmos um site inteiro precisamos ver como criar os links que estabelecem a ligação
entre as páginas.
Ao criarmos sites, estamos produzindo páginas de hipertextos, ou seja, textos que podem
fazer ligações com outros textos, ligando páginas entre si e a WEB. Então, estes pontos
nós chamamos de links ou hyperlinks, âncoras de hipertexto, todos com a mesma função,
de através de um único clique sobre a frase ou imagem conduzir a algum lugar no site ou
na WEB.
O Tag responsável é o <A>, onde dentro deste, através de um atributo colocamos a
referência, ou seja, A URL (Uniform Resource Locator).
Para criar um link usamos a seguinte sintaxe:
SINTAXE: <A HREF=”URL”>Frase que aparece na página</a>
Onde:
<a> tag que marca o início e o fim do link
href= atributo que especifica o nome da referência
“URL” é o nome do local para onde desejar linkar (ir)
Criando Links Internos e Externos

<html>
<hear><title>Estudando links</title></head>
<body>
<h3>Exemplo de links internos</h3>
<a href=exemplo1.html>Exemplo1</a>
<a href=exemplo2.html>Exemplo2</a>
<hr>
<h3>Exemplo de links externos</h3>
<a href=http://www.alfamidia.com.br>Visite o site da alfamídia</a>
<br><a href=http://www.adobe.com>Adobe</a>
<h3>Você também pode usar imagens como links, mas é recomendável utilizar borda=0 para
não aparecer uma moldura de link.</h3>
<a href=exemplo10.html><img src= carro.jpg></a>
</body>
</html>

HTML Online
Veja o resultado na figura a seguir:
Tags Apresentados
TAG O QUE FAZ
<a> Marca o início e o fim de um link
</a>
Atributos
href define a url associada ao link

HTML Online
Unidade 9
Criando TABELAS
As Tags TABLE, TR, TD e TH
Segue abaixo o conjunto de marcações essenciais para desenhar tabelas em HTML.
Alguns atributos podem ser definidos para cada uma dessas marcações. Falaremos desses
atributos mais adiante.
<table></table>
Toda tabela deve ser iniciada com a marcação <table> e encerrada com </table>. Antes e
depois de uma tabela, acontece sempre uma quebra de linha.
ATENÇÃO: Dessa forma a tabela vai aparecer sem bordas, mas dividindo linhas e
células. Para que a tabela apareça com bordas simples, defina dessa forma <table
border></table>.
<tr></tr>
Cada linha de uma tabela deve sempre aparecer entre as marcações <tr> e </tr>. (TR =
Table Row)
<td></td>
Esta é a marcação que define cada célula de uma tabela. As células de uma tabela devem
sempre aparecer entre as marcações de linhas (<tr> e </tr>). Como padrão, o texto nas
células é alinhado à esquerda.
<th></th>
Desta forma são definidos os títulos de uma tabela. Estes podem ser posicionados em
qualquer célula. A diferença entre a marcação de célula e título de célula é que o título
aparece em negrito.

HTML Online
Vamos ver então o exemplo de uma tabela utilizando essas marcações básicas.
<table border>
<tr>
<td>Itens/Mês</td>
<th>Janeiro</th><th>Fevereiro</th><th>Março</th>
</tr>
<tr>
<th>Usuarios</th><td>80</td><td>93</td><td>120</td>
</tr>
<tr>
<th>Linhas</th><td>3</td><td>3</td><td>5</td>
</tr>
</table>
Vai aparecer dessa forma:
Atributos
As marcações das tabelas, podem apresentar resultados diferentes, se acompanhadas de
alguns atributos. Vamos ver os principais:
<BORDER>
Esse atributo aparece junto à marcação TABLE. Caso esse atributo não apareça, a tabela
não terá bordas.
Ou seja, como já vimos, para obter uma tabela com bordas, ela deve ser delimitada pelas
marcações <table border> </table>.
<ALIGN>
Este atributo pode ser aplicado a TR,TH e TD, e controla como será o alinhamento do
texto dentro de uma célula, com relação às bordas laterais.
Aceita os valores left, center, right, respectivamente para alinhar a esquerda, centralizar
ou alinhar a direita.

HTML Online
Veja o exemplo:
<head>
</head>
<table border>
<tr>
<td>Primeira célula</td><td>Segunda célula</td><td>Terceira célula</td>
</tr>
<tr>
<td align=center>centro</td>
<td align=left>esquerda</td>
<td align=right>direita</td>
</tr>
</table>
<VALIGN>
Pode ser aplicado a TR,TH e TD, e define o alinhamento do texto nas células com relação
a borda superior e inferior.
Aceita os valores top, middle e bottom :
<table border>
<tr>
<td> Texto<br>
Para empurrar<br>
A tabela para baixo<br>
</td>
<td valign=top> TOP </td>

<td valign=middle>MIDDLE</td>
<td valign=botton>BOTTOM</td>
</tr>
</table>

HTML Online
<NOWRAP>
Este atributo evita que haja uma quebra de linha dentro de uma célula. Cautela ao utilizá-
lo, para não produzir células muito largas.
<COLSPAN>
Pode ser aplicado a TH ou TD. Define quantas colunas uma célula poderá abranger. Por
padrão cada célula corresponde a uma coluna, ou seja COLSPAN=1.
Vejamos um exemplo
<table border>
<td colspan=3>3colunas</td>
<td>normal</td>
<td>normal</td>
</tr>
<tr>
<td>col 1</td>
<td>col 2</td>
<td>col3</td>
<td>col 4</td>
<td>col 5</td>
</tr>
</table>

HTML Online
<ROWSPAN>
Este atributo pode ser aplicado a células (TH e TD) e define quantas linhas uma mesma
célula pode abranger. Assim como na marcação anterior, o padrão é uma célula
corresponder a uma linha.
Novamente, vamos ver exemplos:
<table border>
<tr>
<td rowspan=3>3 linhas</td>
<td>col 2</td>
<td>col 3</td>
<td>col4</td>
<td>col5</td>
</tr>
<tr>
<td>col 2</td>
<td>col 3</td>
<td>col4</td>
<td>col 5</td>
</tr>
<tr>
<td>col 2</td>
<td>col 3</td>
<td>col4</td>
<td>col 5</td>
</tr>
</table>
Apresenta-se dessa forma
Mais elementos de controle

Vamos ver agora mais um conjunto de extensões que permitem maior controle sobre
tabelas. Estas são especialmente úteis na criação de múltiplas tabelas intercaladas.

HTML Online
BORDER=<value>
Acrescentando um valor ao atributo BORDER é possível colocar tabelas em maior
destaque:
<table border=5>
<tr>
<td>teste1</td> <td>teste2</td> <td>teste3</td>
</tr>
<tr>
</tr>
</table>
CELLSPACING=<value>
Este atributo é aplicável à marcação TABLE. Como padrão, o Netscape 1.1 utiliza espaço
2 entre as células. Este atributo define o espaço entre cada célula na tabela.
<table border cellspacing=5>

<tr>
</tr>
<tr>
</tr>
</table>

HTML Online
CELLPADDING=<value>
Este atributo é aplicado também à marcação TABLE e define a distância entre o texto e a
borda de cada célula.
Veja exemplo:
<table border cellpadding=8>

<tr>
</tr>
<tr>
</tr>
</table>
A tabela mais compacta possível seria definida como: <table border=0 cellspacing=0
cellpadding=0>
WIDTH=<value or percent>
Este atributo pode ser aplicado tanto a TABLE como a TH e TD. A ele tanto pode ser
associado um valor em "pixels" (ponto em tela gráfica), como um valor percentual. Ou
seja, determina o quanto da tela uma tabela ou célula de tabela deverá ocupar.
Vamos ver os exemplos:
<table border width=50%>
<tr>
<td>segunda</td>
<td>terça</td>
<td>quarta</td>
</tr>
<tr>
<td>quinta</td>
<td>sexta</td>
<td>sábado</td>
</tr>
</table>

HTML Online
Segundo exemplo - aplicando width a uma célula:

<table border>
<tr>
<td width="120px">segunda</td>
<td>terça</td>
<td>quarta</td>
</tr>
<tr>
<td>quinta</td>
<td>sexta</td>
<td>sábado</td>
</tr>
</table>

HTML Online
Unidade 10
Formulários
Introdução a Formulários
Até o presente momento vimos diversos recursos do HTML para criar uma página,
definindo seu layout e conteúdo. Neste capítulo apresentaremos a forma principal de
obter dados do usuário e poder assim interagir com ele.
O elemento FORM, da linguagem HTML, é justamente o responsável por tal interação.
Ele provê uma maneira agradável e familiar para coletar dados do usuário através da
criação de formulários com janelas de entrada de textos, botões e outros elementos de
entrada de dados.
Os dados que o usuário preenche em uma página HTML são enviados para o servidor,
para serem então processados por um programa, por exemplo: um CGI em linguagem
PERL ou um página de acesso a banco de dados em ASP ou PHP. Também é possível
processar localmente um campo de formulário utilizando um script em JavaScript ou
VBScript, o que muitas vezes é feito para validar um campo antes do mesmo ser enviado
ao servidor.
Nesta lição iremos nos concentrar em aprender todos os tags HTML de criação de
formulários e a diferença entre eles.
A Tag FORM
Como vimos, um formulário começa com a marcação <FORM> e termina com
</FORM>. Outros itens devem ser especificados:
Primeiro, o formulário precisa saber como enviar a informação para o servidor. Existem
dois métodos, GET e POST.
METHOD="GET"
A maioria dos documentos HTML é recuperada a partir da requisão de uma única URL
ao servidor. Assim, um formulário que utilize este método, envia toda sua informação ao
final da URL ativada.
METHOD="POST"
Este método transmite toda a informação fornecida via formulário, imediatamente após a
URL ativada. Ou seja, quando o servidor recebe uma ativação de um formulário
utilizando POST ele sabe que precisa continuar "ouvindo" para obter a informação. Este é
o melhor método.

HTML Online
Segundo, o formulário precisa saber para onde enviar a informação. Esta é a URL sendo
ativada a partir do formulário, e ela é referenciada através da marcação ACTION. Esta
URL em geral aponta para uma página ASP, PHP ou script CGI que irá receber e
decodificar os resultados. Caso você utilize um script CGI, lembre-se que você está
referenciando um script que reside no mesmo servidor do formulário, portanto não
precisa incluir a URL completa.
ACTION="/cgi-bin/post-query" para um script no seu servidor
ACTION="http://www.processor.com.br/cgi-bin/post-query" para um script no servidor
especificado.
Após você construir estas marcações, seu formulário geralmente terá a seguinte estrutura:
<form method="post" action="praondevaiosdados.ext">

Marcações de campos de entrada e html em geral
</form>
Observe que este formulário utiliza o método POST e envia as informações digitadas para
um script local chamado praondevaiosdados.ext do servidor.
Outra informação importante: cada marcação de entrada em um formulário tem uma
opção NAME associada, de tal forma que o script saiba qual o nome, isto é, como
chamar cada valor digitado. Certamente você pode definir mais de um campo de entrada
textual ou menu dentro de um formulário, mas certifique-se de que cada um possui um
nome diferente.
Entrada de texto comum - TEXT

A forma mais simples de campo de entrada é a marcação text. Este campo permite a
digitação de uma única palavra ou linha de texto, e possui uma largura default de 20
caracteres.
Opções:
VALUE="" OPCIONAL
Utilizando a marcação VALUE você especifica que texto aparecerá no campo quando o
formulário for exibido.
SIZE="" OPCIONAL
Esta marcação altera o tamanho deste campo exibido na tela.
Obs.: o usuário sempre poderá digitar mais caracteres do que o tamanho do campo na
tela, pois o texto irá se deslocar a esquerda dentro do campo.
MAXLENGTH="" OPCIONAL
Se você deseja limitar o número de caracteres que o usuário pode digitar, basta usar esta
marcação. O formulário irá emitir um bip de erro se o usuário tentar digitar além do
permitido em MAXLENGTH.

HTML Online
<form method="post" action="/cgi-bin/post-query">

Qual o seu primeiro nome?
<input type="text" name="primeiro_nome" value="carlos" size="10" maxlength="15">
</form>
Obs.: O valor informado em NAME deve utilizar sublinhado em vez de espaços em

branco. Inserir espaços em branco nestes nomes pode causar problemas no servidor
na decodificação dos valores informados. Se seu formulário possui apenas um
campo de entrada textual, ao teclar ENTER neste campo o formulário será
submetido, como se o usuário tivesse acionado o botão SUBMIT.
Entrada de texto protegido, senha - PASSWORD

Marcações de entrada do tipo password são idênticas aos campos do tipo text, exceto
pelo fato de todos os caracteres serem exibidos como bolinhas de marcação (●) no firefox
em outros browsers também é utilizado o asterisco (*).
Opções:
VALUE="" OPCIONAL
A marcação VALUE especifica um valor default para este campo.
SIZE="" OPCIONAL
Esta troca o tamanho do campo de password exibido na tela.
MAXLENGTH="" OPCIONAL
Limita o número de caracteres que o usuário pode informar como password.

Informe sua senha de acesso (8 caracteres):
<input type="password" value="xpto" name="sua_senha" size="8" maxlength="8">
</form>

HTML Online
Se você pretende utilizar MAXLENGTH para limitar o número de caracteres informados,

tenha certeza de especificar um SIZE com o mesmo tamanho, para fornecer ao usuário o
sentimento de qual a largura do campo. Esta regra não foi utilizada no primeiro exemplo,
que possui SIZE igual a 10, mas MAXLENGTH de 15, o que faz o campo se deslocar
nos últimos 5 caracteres caso o valor informado possua mais do que 10 caracteres.
Mesmo que o valor default VALUE esteja representado por asteriscos, o usuário pode
visualizar o seu valor através da recuperação do fonte do hiperdocumento em HTML
(uma opção comum na maioria dos clientes WWW).
Entrada oculta - HIDDEN

Além da marcação PASSWORD com um valor VALUE default, é possível "esconder"
informação passada dentro de blocos FORM com uma marcação HIDDEN. Esta
informação é recebida pelo script de decodificação no servidor, mas não é diretamente
exibida ao usuário no formulário.
Opções:
VALUE="" OBRIGATÓRIO
Através da marcação VALUE, você deve especificar o texto oculto a ser enviado ao
script processador do formulário.

Sem possibilidade de visualizar nada aqui embaixo.
<input type="hidden" name="nome_oculto" value="form12">
</form>

HTML Online
Mesmo que o valor especificado em HIDDEN VALUE não seja exibido no formulário, o
usuário pode vê-lo através da operação de visualização do fonte do hiperdocumento, da
mesma forma como no campo PASSWORD.
Entrada de várias linhas de texto - TEXTAREA

A marcação TEXTAREA não utiliza o formato convencional INPUT TYPE="text" dos
exemplos anteriores. Ao contrário, uma marcação <TEXTAREA> delimita o seu início e
a marcação </TEXTAREA> o seu fim.
Opções:
ROWS="" OBRIGATÓRIO
Especifica o número de linhas da entrada textual.
COLS="" OBRIGATÓRIO
Especifica o número de colunas da entrada textual.
Texto default OPCIONAL
Se você deseja que um texto seja exibido no campo textual ao abrir o formulário,
simplesmente coloque este texto entre as marcações de início e fim da TEXTAREA.

Por favor, escreva aqui um texto:<br>
<textarea name="critica" rows="3" cols="40">
gostaria de obter mais detalhes sobre
este servidor. grato.
</textarea>
</form>
O usuário dispõe de Scrollbars para digitar além do número de linhas e colunas definidas em
ROWS e COLS.

HTML Online
Menus com opções - SELECT

Menu de opção única.
A marcação SELECT segue a mesma convencão de TEXTAREA. Ou seja, as opções de
menu ficam entre a marcação de início <SELECT> e a de fim </SELECT>.
Opções:
OPTION OBRIGATÓRIO
Especifica uma opção presente no menu.
VALUE="" OPCIONAL
Especifica o valor da opção retornada ao servidor. Se não for definido, o nome da opção é
enviado ao servidor.
SELECTED OPCIONAL
Por default, a primeira OPTION é exibida no menu. Esta marcação estabelece uma opção
de menu a ser exibida inicialmente, quando não se deseja que seja a primeira OPTION.

Onde pretende fazer turismo?
<select name="lugares_para_ver">
<option>Fortaleza
<option value="sul">Porto alegre ou Torres
<option>Rio de janeiro
<option selected>Santos
<option value="amazonia">Manaus
</select>
</form>
Se você possui mais do que 3 ou 4 opções de escolha, e o usuário só pode selecionar uma,
então este elemento de entrada é o melhor. As pessoas frequentemente utilizam vários
RADIOBUTTONS, que veremos a seguir.
O script decodificador, no servidor, provavelmente apreciará uma única palavra para
VALUE, em vez de múltiplas palavras. Você sempre pode utilizar sublinhado para
separar expressões compostas.

HTML Online
Listas pagináveis - SELECT com SIZE

A única diferença entre este elemento de entrada e o anterior SELECT é a introdução da
opção SIZE. Ela especifica quantas linhas com opções de menu serão exibidas na janela.
Opções:
MULTIPLE OPCIONAL
Especifica que múltiplas opções podem ser selecionadas, em oposição ao exemplo
anterior do SELECT, onde apenas uma opção pode ser selecionada no menu.
SIZE="" OBRIGATÓRIO
Número de linhas (opções de menu) exibidas na janela.
OPTION OBRIGATÓRIO
Especifica uma opção da lista.
VALUE="" OPCIONAL
Especifica o valor da opção retornada ao servidor.
Se não for definido, o nome da opção é enviado ao servidor.
SELECTED OPCIONAL
Esta opção determina uma OPTION default para ser selecionada.

Que facilidades deseja no seu quarto?<br>
<select name="opcional" multiple size="5">
<option>Tv LCD
<option value="casal" selected>Cama de Casal
<option>Ar-Condicionado
<option>Fax
<option selected>Modem v.34
<option>Sauna
<option>Lavanderia
<option>Frigo-bar
</select>
</form>

HTML Online
Este elemento de entrada é bom para listas com muitas opções, porque é possível
controlar quantas serão exibidas por vez.
Em alguns clientes WWW, é necessário teclar simultaneamente as teclas CONTROL ou
SHIFT para selecionar múltiplos itens.
Botões sim ou não – Checkbox

Retornando ao formato de INPUT TYPE="", a marcação CHECKBOXES é perfeita
para escolher entre duas opções.
Opções:
VALUE="" OPCIONAL
Especifica o valor da opção enviado ao servidor. Se não for definido, o valor "on" é
enviado ao script decodificador.
CHECKED OPCIONAL
Esta marcação define a opção selecionada por default.

<input type="checkbox" name="boletim" checked>Sim, eu desejo receber o newsletter.
<p>
<input type="checkbox" name="info">Sim, eu gostaria de receber novidades do portal.
</p>
</form>
Este elemento funciona melhor para respostas do tipo "sim/não" ou "on/off".

Você pode simular uma lista SELECT MULTIPLE criando CHECKBOXES com o
mesmo NAME, mas diferentes VALUES

HTML Online
Botões com opções - RADIO

RADIOBUTTONS utilizam uma notação similar a de CHECKBOXES, contudo, apenas
uma opção pode ser escolhida.
Opções:
VALUE="" OBRIGATóRIO
Especifica o valor da opção a ser enviado para o servidor.
Se não for definido, um valor "on" é enviado ao script decodificador.
CHECKED RECOMENDADO
Esta marcação especifica qual botão estará selecionado por default.
Uma vez que uma seleção precisa ser feita, é melhor prover uma opção pre-selecionada.
<head>
</head>
Suas preferências na viagem:
<dl>
<dd>Classe do bilhete:
<input type="radio" name="classe" value="eco">econômica
<input type="radio" name="classe" value="exe">executiva
<input type="radio" name="classe" value="pri" checked>primeira
</dd>
<dd>Localização:
<input type="radio" name="local" value="frente">área fumante
<input type="radio" name="local" value="tras">área não fumante
</dd>
</dl>
</form>
Como já foi mencionado, RADIOBUTTONS não são boas escolhas para listas com
muitos itens, porque o cliente tem problemas para exibir muitos botões. É melhor utilizar
o menu SELECT.

HTML Online
Uma vez que um botão é selecionado, ele não pode ser desmarcado sem selecionar outro
botão que possua o mesmo NAME. A seleção default pode ser restaurada com a
utilização do botão RESET, introduzido a seguir.
Se você utiliza vários RADIOBUTTONS com o mesmo NAME e nenhum VALUES, o
servidor não será capaz de dizer que botão foi selecionado, uma vez que o valor "on" será
retornada para qualquer um deles.
Botões de submissão e limpeza - RESET E SUBMIT

Em vez do usuário corrigir cada INPUT, um botão RESET pode ser utilizado para
restaurar todos os campos a seus valores default, como se nenhuma informação houvesse
sido digitada.
E finalmente, o FORM precisa de uma opção para enviar toda a informação digitada para
o servidor, uma vez que o usuário terminou de preencher os todos os campos de entrada.
O botão SUBMIT transfere toda a informação para a URL especificada no elemento
ACTION.
Opções:
VALUE="" OPCIONAL
Especifica o texto a ser exibido no botão.
Se não for especificado, os textos default "Reset" e "Submit Query" serão colocados nos
botões RESET e SUBMIT, respectivamente.
NAME="" OPCIONAL
Se NAME for definido em um botão SUBMIT, o formulário irá transmitir o valor do
conteúdo do elemento VALUE, permitindo que você tenha múltiplos botões SUBMIT
numa espécie de versão simplificada de um RADIOBUTTONS.
<head>
</head>
<form method="post" action="/cgi-bin/donothing">
Qual o seu primeiro nome? <input type="text"><br>
Aperte este botão: <input type="radio" name="nada"><br>
<input type="reset" value="limpa campos">
<input type="submit">
</form>

HTML Online
Normalmente, o script decodificador retorna um hiperdocumento após ele processar a

informação do formulário. Nem todos os clientes suportam múltiplos botões SUBMIT. É
melhor utilizar apenas um único botão SUBMIT para transmitir a informação digitada no
formulário.

HTML Online
Anexo 1
Principais tags
Marcação Função Características
<HTML></HTML> Delimita o documento Esta marcação deve ser inserida imediatamente no

(início e fim) início e no final de todo arquivo HTML
<HEAD></HEAD> Cabeçalho O cabeçalho de um arquivo html é uma área para

inserção de informações que não serão visíveis na
página HTML, tais como “title” e comentários
<TITLE></TITLE> Título do documento Nome a ser atribuído ao documento HTML, mas

que não será visualizado na página. Deve sempre
aparecer na área definida como “head” do
documento
<! > Comentário Indicação de quaisquer comentários, tais como

nome do autor, data de criação, software utilizado
para autoria, etc. Não é visualizado na página
HTML (só quando solicitadao o “source file”)
Também deve aparecer na área definida como

“head” do documento.
<BODY></BODY> Corpo do documento Delimita o corpo do documento. Vem

imediatamente abaixo da área definida como
“head”. Esta marcação deve ser “fechada”
somente ao final do documento, imediatamente
seguida da marcação </html>

HTML Online
Exemplo de como devem aparecer distribuídas no arquivo as marcações acima citadas:
<html>
<head>
<title> Título do documento</title>
<! autor: Carlos Alberto Busch Júnior>
<! última atualização: 20/04/2001>
</head>
<body>
Blá blá blá ... aqui entra o conteúdo da página ... blá....
</body>
</html>
<BODY Imagem de fundo Insere uma imagem como fundo da

BACKGROUND=““ página (mais ou menos como uma
>  = arquivo imagem ou url “marca d’água).
de arquivo imagem
</BODY> O arquivo deve estar em formato .gif .
Este arquivo pode estar na mesma
máquina (anotar sua path/nome), ou em
outra máquina (indicar por URL)
<BODY Cor padrão de fundo Define uma cor de fundo padrão para a
BGCOLOR=“#rrggbb” página.
> Código de cores RGB
Esta cor pode variar de monitor para monitor.
</BODY>
<BODY Cores do texto do Define a cor para:

TEXT=“#rrggbb” documento
LINK=“#rrggbb” text = texto normal da página
VLINK=“#rrggbb” #rrggbb = código de cores
ALINK=“#rrggbb”> RGB (ver tabela de cores neste link = links da página
documento)
</BODY> vlink = links consultados na página
alink = links ativados na página

HTML Online
<Hy></Hy> Títulos ou Existem seis níveis de cabeçalho na página (não

cabeçalhos na confudir com cabeçalho do documento = head):
página
<h1></h1>, <h2></h2> , etc.
y = número de 1 a
6 Sendo H1 o maior e H6 o menor nível.
Atenção, marcações Hy definem tamanho
relativo do texto, e os colocam em destaque
(normalmente negrito)
<P> Parágrafo Insere uma linha em branco entre dois

parágrafos
<BR> Quebra de linha Faz uma quebra de linha.
<A HREF=“ “> Âncora para Define um link.

hiperlink
texto</a> referencial O link vai aparecer em destaque na página
(normalmente outra cor e sublinhado)
 = URL ou
nome de arquivo
<A HREF=“#“> Âncora interna ou Abre uma âncora para um outro trecho dentro
para seção de uma mesma página, ou para um trecho
texto</a> específica em outro específico em outro documento.
documento
1. Trecho na mesma página
# = código ou
palavra chave Após a âncora de hiperlink referencial, deve
aparecer, entre aspas, o caracter
# e uma palavra ou código chave. Este mesmo

código ou palavra deverá aparecer no “ponto de
chegada” deste link interno, como uma âncora
de nome
(veja próximo item).
2. Link para trecho específico em outro

documento
Deve ser efeito exatamente da mesma forma,

sendo que , antes do caracter #, deverá aparecer
o nome do arquivo que ser pretende ‘ligar’, ou

HTML Online
sua url completa.
<A NAME=“ “> Âncora de nome Este é o ponto de chegada de uma âncora
interna a um documento ou para trecho
= código ou específico em outro documento.
palavra chave
O código ou palavra chave deve ser idêntico
àquele do ponto de partida.
Não altera a visualização do texto.
<A HREF=“MAILTO: Envio de email para Permite que se crie um link que ao ser
endereço selecionado abrirá uma tela de composição de
xyz@algumlugar.br”> especificado mensagem eletrônica a ser enviada para o
endereço digitado após MAILTO:
<UL></UL> Delimita lista não Deve ser escrita ao início e ao final da lista.
numerada
Casa item da lista é antecedido da marcação
<LI>
<OL></OL> Delimita lista Deve ser escrita ao início e ao final da lista.

numerada
Casa item da lista é antecedido da marcação
<LI>
<LI> Cada item de uma

lista numerada ou
não
<DL></DL> Delimita lista de Deve ser escrita ao início e ao final da lista.

definições
Cada item da lista é antecedido da marcação
<DT> ou <DD>, conforme explicado a seguir.
<DT> Entrada de título Insere um título em uma lista de definição. A

em lista de entrada de título vai aparecer alinhada à
definições esquerda da página.
Normalmente vem seguido de um item do tipo

<DD>
<DD> Entrada de Insere uma definição (antecedido ou não por

definição em lista <DT>). Este item vai aparecer numa margem
de definições mais interna à página (como se tivesse uma
tabulação antes).
Fora de listas de definição pode ser utilizado

para produzir este mesmo efeito (Uma

HTML Online
“tabulação)
<PRE></PRE> Texto pré- Mantém a exata formatação do texto digitado.

formatado
<B></B> Negrito
<I></I> Itálico
Endereço Quanto a visualização, normalmente, apenas

coloca o trecho em itálico.
</ADRESS>
<IMG SRC=“”> Inserção de imagem Marcação para inserir uma imagem na página.
Esta imagem deve estar preferencialmente em
 = nome ou URL formato .gif. Pode estar na mesma máquina
de arquivo imagem. (apontar com o nome ou path completa) ou em
outra máquina (apontar com URL)
<IMG ALING=“” Alinhamento de Opcional.

SRC=“”> imagem
Define o alinhamento de uma imagem na
página. Aceita os seguintes valores:
TOP = alinha o texto com o alto da figura
MIDDLE = alinha o texto com o meio da figura
BOTTOM = alinha o texto com o rodapé da

figura
RIGHT = alinha a figura à direita da tela
LEFT = alinha a figura à esquerda da tela. Faz

ainda com que o texto que esteja ao lado
contorne a figura.
<HR> insere linha

horizontal
<HR SIZE=n> Largura da linha Opcional

horizontal
Extensão opcional que define a largura da linha
n= número
<HR WIDTH=n%> Ocupação da tela da Opcional

linha horizontal
Define o quanto da tela uma linha vai ocupar.

HTML Online
n= número

HTML Online

HTML Online

Enviado por

Dados do documento

Direitos autorais

Formatos disponíveis

Compartilhar este documento

Compartilhar ou incorporar documento

Opções de compartilhamento

Você considera este documento útil?

Este conteúdo é inapropriado?

Direitos autorais:

Formatos disponíveis

HTML Online

Enviado por

Direitos autorais:

Formatos disponíveis

HTML Online

Todos os direitos reservados para Alfamídia Prow.

As informações contidas neste material de treinamento são distribuídas “NO ESTADO EM

01/2011 – Versão 1.1

2 2011 Alfamídia Prow.

A Alfamídia dá Boas Vindas aos seus clientes e deseja um

- Acesso a extranet www.alunoalfamidia.com.br para verificação de agenda e pontos do

- Convênio com o estacionamento do prédio (desconto);

- Avaliações de acompanhamento e final de curso (em cada módulo) durante todo o

- Não é permitida a instalação de outros Hardwares ou Softwares que não sejam os

- O preenchimento da avaliação final de curso/módulo é condição obrigatória para que o

- Qualquer necessidade de alteração na agenda ou cursos contratados inicialmente,

- Contatos com a Alfamídia podem ser feitos através dos e-mails:

matricula@alfamidia.com.br – dúvidas após contratação

info@alfamidia.com.br – novas contratações

3 2011 Alfamídia Prow.

UNIDADE 1 APRESENTAÇÃO .................................................................................................................................... 6

4 2011 Alfamídia Prow.

5 2011 Alfamídia Prow.

6 2011 Alfamídia Prow.

7 2011 Alfamídia Prow.

Conceitos Básicos de HTML

8 2011 Alfamídia Prow.

9 2011 Alfamídia Prow.

10 2011 Alfamídia Prow.

11 2011 Alfamídia Prow.

Clique em Site > New Site conforme a figura abaixo:

No Site Setup do site configure o nome do site e "Advanced"

12 2011 Alfamídia Prow.

Coloque as seguintes informações:

13 2011 Alfamídia Prow.

Como neste treinamento vamos trabalhar com códigos na guia primeira_pagina

14 2011 Alfamídia Prow.

15 2011 Alfamídia Prow.

Mais Tags Básicas de HTML

16 2011 Alfamídia Prow.

<br>E com este recurso quebro uma linha

Veja o resultado no browser.

TAG O QUE FAZ

17 2011 Alfamídia Prow.

Dentro do tag<meta>, tem os comandos name e o

18 2011 Alfamídia Prow.

TAG O QUE FAZ

<blockquote> Adiciona uma margem de cerca de um centímetro

19 2011 Alfamídia Prow.

Width = define a largura da linha horizontal.

20 2011 Alfamídia Prow.

<pre> Marca um trecho formatado com fonte monoespaçada. A

21 2011 Alfamídia Prow.

22 2011 Alfamídia Prow.

TAG O QUE FAZ

Novo Exemplo de Listas

23 2011 Alfamídia Prow.

<h3>Isto é uma listagem com letras</h3>

Listas com Subníveis

24 2011 Alfamídia Prow.

25 2011 Alfamídia Prow.

Exemplos de uso de cores em fonte:

<font color=#000000>texto em preto</font>

Nos exemplos acima, valores diferentes de código permitem a definição de cores

26 2011 Alfamídia Prow.

Utilizando o Vermelho com Verde

27 2011 Alfamídia Prow.