Coimbra PDF

HTML Curso Bsico
HTML
CURSO BSICO
Aprenda os conceitos iniciais de HTML em

alguns minutos.
So Paulo Brasil
1
HTML Curso Bsico
ndice
1 - INTRODUO
2 - TAGS
3 - EDITORES
4 - SALVANDO UMA PAGINA HTML
5 - INICIANDO UMA PGINA
6 - CONSTRUINDO UMA PGINA HTML
7 - TEXTOS
8 - CORES
9 - LISTAS
10 - IMAGENS
11 - LINKS
10
12 - TABELAS
11
13 - FORMULRIOS
12
So Paulo Brasil
2
HTML Curso Bsico
1 - Introduo
HTML a sigla de Hyper Text Markup
Language (Linguagem de marcao
de hipertexto), ou seja, a linguagem
usada para criar pginas Web.
seja executada, necessrio que ela

seja salvada como arquivo HTML,
veja a figura 1.
Figura 1 - Salvando
2 - Tags
Tags so os comandos usados para a
construo de sua pgina na web,
elas podem ser abertas, como <BR>,
ou fechadas, como <p></p>. As tags
que possuem / sempre servem para
fechar uma tag antes aberta
(</font>).
3 - Editores
Para construo de sua pgina na
web, podem ser utilizados editores de
texto simples, como Word, Wordpad,
ou mais simples ainda, o Bloco de
Notas. Porm, existem editores muito
mais sofisticados e fceis de usar,
como o FrontPage, e mais sofisticados
e fceis ainda, os Macromedia
Dreamweaker e seus similares.
4 - Salvando uma pgina

HTML
5 - Iniciando uma pgina

HTML
O corpo bsico de uma pgina HTML,
composto pelas tags,
<HTML></HTML> e
<BODY></BODY>. No h
necessidade de as tags estarem em
letra maiscula, ou minscula, porm
organizar as tags, mais fcil para a
localizao em um cdigo.
Esto certos por exemplo:
<HTML>
<BODY>
</BODY>
</HTML>
<HTML>
<body>
</body>
</HTML>
<HtMl>
<bodY>
</BodY>
</HTml>
Em qualquer que seja o editor de

texto, possvel construir uma pgina
HTML, porm para que essa pgina
So Paulo Brasil
3
HTML Curso Bsico

Mas, para manter organizao,
recomenda-se, uma configurao
padro.
Por exemplo:
<HTML>
<BODY>
</BODY>
</HTML>
6 - Construindo Uma pgina

HTML
Para se construir uma pgina HTML,
necessrio primeiramente abrir o
editor, aqui, ns vamos usar sempre
o Bloco de Notas.
Primeiramente, digita-se os comandos
bsicos.
<HTML>
<BODY>
</BODY>
</HTML>
Para se colocar um ttulo na pgina
(veja figura 2.1), necessrio digitarse as tags <HEAD> e <TITLE>, que
vai fora da tag <BODY>.
<HTML>
<HEAD>
<TITLE>Primeira Pgina
</TITLE>
</HEAD>
<BODY>
</BODY>
</HTML>,
A pgina ser exibida assim.
Figura 2.1 Ttulo da Pgina
Na tag body, pode ser adicionada as

configuraes padres da pgina.
Atributo bgcolor
Serve para alterar a cor de fundo da
pgina HTML.
<BODY bgcolor=#000055>
= Define a cor de fundo (Veja mais
sobre as cores no captulo 8) da
pgina. Veja figura 2.2
Figura 2.2 O atributo bgbolor, e a cor

definida com ele pelo cdigo, resultam no
fundo azul da pgina.
Atributo background
Serve para adicionar uma imagem
como pano de fundo da pgina HTML.
<BODY
background=imagem_fundo.jpg>
= Define a imagem
Imagem_fundo.jpg, como pano de
fundo da pgina HTML. Veja a Figura
2.3.
So Paulo Brasil
4
HTML Curso Bsico
Figura 2.3 Repare que como a imagem

menor que o fundo, ela se repete, e isso
acontece quantas vezes forem preciso.
Atributo text
Serve para definir a cor do texto
padro da pgina HTML.
<BODY text=#CC0000> =
Define a cor padro de tudo aquilo
que for escrito na pgina HTML como
texto, sem configuraes. Veja Figura
2.4.
<H1>Aqui ser Exibido o texto com

a cor padro da pgina, e no maior
tamanho possvel</H1>
<H2>Aqui ser exibido um texto
menor...</H2>
<H3>...aqui ser exibido um texto
menor...</H3>
menor...</H4>
menor...</H5>
<H6>...E aqui ser exibido o menor
texto possvel com a tag
<Hx></H6> (Veja a figura 3.1).
Figura 3.1 Todos os tamanhos possveis do

H
Pargrafos
Figura 2.4 Repare que o texto no comeo

da pgina est vermelho.
7 - Textos
H vrios tipos de forma de se fazer
textos em pginas HTML. A mais
simples delas com a tag <Hx> (x,
corresponde a um nmero de 1 a 6,
sendo 1 o maior e seis o menor).
Por Exemplo:
Observe que com o H, no

necessrio que se mude de pargrafo,
mas caso voc prefira usar uma tag
que no seja o H, ou no usar tags,
preciso que voc use uma quebra de
linhas, pois o HTML, no quebra de
linha no mesmo momento que voc
digita a tecla Enter. Veja a figura
3.2.
Por Exemplo:
<H1>Observe que se eu no aciono
nenhum comando para quebra de
linha o
HTML, no
quebra
So Paulo Brasil
5
HTML Curso Bsico

de
linha
automaticamente, mesmo que eu
parta a pala
vra ao meio</H1>
Veja a figura 3.2.
Figura 3.2 Mesmo quebrando a linha com a

palavra ao meio no cdigo, o HTML, no
quebra a linha no visual.
Para quebrar a linha, usa-se a tag

<BR>, que simplesmente quebra a
linha, ou a tag <P></P>, que cria
um pargrafo.
Por Exemplo:
O texto vai aqui, e eu uso o <BR>
br para quebrar a linha
<P>Quando eu uso o p, eu no
preciso quebrar linha,</P>
pois o pargrafo que comea depois,
j outro
Veja a Figura 3.3.
baixo, e quando se usa o <P></P>, a linha

de baixo pulada, como em um poema.
A tag <P></P>, ainda serve para

configurar pginas.
Por Exemplo:
<P align=Center>Alinha o texto
escrito aqui ao centro da pgina</P>
Veja Figura 3.4.
Figura 3.4 Observe o texto alinhado ao

centro da pgina.
Obs.: Os Alinhamentos podem ser:

Comando
Posio
align=left
Esquerda - Padro
align=right
align = center
Direita
Centro
Atributo font
Alm de todos os atributos para se
escrever textos no HTML, h o mais
til de todos, o atributo font.
Nele pode conter a formatao de
letra, tamanho e cor.
Por Exemplo:
<font color="#AA0000" face="arial"
size="12">Onde Face a letra, Size,
o tamanho da letra e color a cor
da letra</font> Veja na figura 3.5.
Figura 3.3 Observe que quando se usa o

<BR>, a linha simplesmente passa a ser a de
So Paulo Brasil
6
HTML Curso Bsico
Figura 3.5 Atributo Font
Comentrio
Para se fazer um comentrio em uma
pgina HTML, ou seja escrever um
texto que no ser exibido no grfico,
mas sim no cdigo, e fundamental
para manter aquela organizao
citada no comeo da apostila.
Por Exemplo:
<!Voc adiciona esse comentrio
em qualquer parte do seu cdigo, e
ele no ser exibido no grfico -!>
Veja figura 3.6 e 3.7
Voc pode no HTML, formatar uma

palavra, frase ou letra, como negrito,
itlico, sublinhado, subscrito e
sobrescrito.
Para isso, usa-se os comandos:
Formatao
Comando
Negrito
<B></B>
Itlico
<I></I>
Sublinhado
<U></U>
Subscrito
<SUB></SUB>
Sobrescrito
<SUP></SUP>
Por Exemplo:
Esse o texto, e essa palavra est
em <B>Negrito</B>, essa est em
<I>Itlico</I>, essa
<U>sublinhada</U>, essa
<SUB>subscrita</SUB>, e essa
<SUP>sobrescrita</SUP>.
Veja Figura 3.6.
Figura 3.6 Cdigo com um comentrio.
Figura 3.6 As formataes podem ser

atribudas a palavras, frases ou letras.
8 Cores
Figura 3.7 Grfico, observe que o

comentrio adicionado no aparece.
Estilos de caracteres
Numa pgina HTML, as cores so

fundamentais para decorar a pgina.
No HTML, as cores podem ser
nomeadas pelo nome (em Ingls),
como White para branco, green, para
verde, blue, para azul e assim por
diante. Podem ser codificadas, por
nmeros decimais, como 255,160,200,
So Paulo Brasil
7
HTML Curso Bsico

ou nmeros hexadecimais, como,
FFAA00, na verdade os cdigos so
como uma misturas de cores RGB
(Red Vermelho, Green Verde,
Blue Azul), ento se o cdigo
decimal, for 185,0,0, sinal de que a
cor vermelha, pois ele adicionou
185 ao vermelho, 0 ao verde e 0
tambm ao azul, se o cdigo
hexadecimal for 006600, deduz-se
que a cor verde, pois os dois
primeiros nmeros (que
correspondem ao vermelho
RRGGBB), so 0, os dois nmeros do
meio, so 6 e os dois nmeros finais
so 0. Para escrever uma cor, mais
fcil usar-se cdigos, e mais fcil
ainda usar os cdigos hexadecimais.
Na tag body, bgcolor, define a cor do
pano de fundo da pgina e text, a cor
do texto padro na pagina, na tag
font, color define a cor do texto. Para
se escrever uma cor codificada, usase # antes do cdico, e dentro das
aspas, por exemplo, #550000
Figura 4.1 Uma lista numerada.
<UL>
<LI>Introduo
<LI>Dedicatria
<LI>Capitulo 1
</UL>
A Lista acima ser exibida conforme
mostrada na figura 4.2, onde <UL>,
a tag que define lista no-ordenada,
ou seja, tpicos, e <LI>, a tag que
define os itens da lista.
9 Listas
As listas so muito teis, servem para
organizar assuntos em tpicos,
nmeros, ou menus.
Por Exemplo:
<OL>
<LI>Introduo
<LI>Dedicatria
<LI>Capitulo 1
</OL>
mostrada na figura 4.1, onde <OL>,
a tag que define lista ordenada, ou
seja, numerada, e <LI>, a tag que
Figura 4.2 Observe que os nmeros deram

lugar aos tpicos.
<DL>
<DT>Introduo</DT>
<DD>Aqui vai a introduo do
livro</DD>
<DT>Dedicatria</DT>
<DD>Aqui vai a dedicatria do
livro</DD>
</DL>
So Paulo Brasil
8
HTML Curso Bsico

mostrada na figura 4.3, onde <UL>,
a tag que define lista no-ordenada,
ou seja, tpicos, e <LI>, a tag que
Figura 5.1 Observe que a foto carregou em

seu tamanho original.
Figura 4.3 Observe que a lista deu lugar a

itens detalhados.
Para corrigir isso, h os atributos

HEIGHT e WIDTH, que significam
altura e largura respectivamente.
Por Exemplo:
<img src="foto.jpg" height=120
width=120>. Veja a figura 5.2.
10 Imagens
Em uma pgina HTML, imagens so
essenciais. Para inserir imagens,
basta que ela seja de preferncia GIF,
ou JPG, no obrigatrio, mas
recomenda-se o uso de imagens GIF,
apenas para botes e cones, pois ela
possui uma definio de apenas 256
cores e o uso de imagens JPG, para a
insero de imagens fotogrficas, pois
ela possui uma definio de 16,7
milhes de cores.
A tag imagem
Na tag imagem, pode-se definir o
tamanho, o alinhamento, a borda, etc.
Por Exemplo:
<img src=foto.jpg>, onde foto.jpg,
o nome da imagem, ou <img
src=c:/foto.jpg>, onde c: o
destino da imagem, e foto.jpg, o
nome da imagem. Veja figura 5.1.
Figura 5.2 Observe que a foto foi reduzida

para o tamanho 120px por 120px.
Voc pode tambm, posicionar

apenas a imagem.
Por Exemplo:
Essa a Foto <img src="foto.jpg"
align=right width="200"
height="200">Alinha a Figura a
direita. Veja na Figura 5.3.
So Paulo Brasil
9
HTML Curso Bsico
Figura 5.3 Observe que a imagem est

alinhada a esquerda.
Voc pode tambm adicionar borda a

sua imagem.
Por Exemplo:
Essa a Foto<img src="foto.jpg"
align=left width=200 height=200
border=15>. Veja na figura 5.4.
Figura 5.5 Observe que a imagem ficou

bem abaixo do escrito, e bem longe da borda.
11 Links
Na web, o link fundamental. Para
navegar de uma pgina para outra,
fundamental o linkamento.
A tag que define o linkamento, a
<A href=link></A>.
Por Exemplo:
<A href=pagina2.html>V para a
pgina 2</A> Veja a Figura 6.1.
Figura 5.4 Observe que a figura ganhou

uma borda.
Voc pode definir tambm o

espaamento com os atributos hspace
(para horizontal) e vspace (para
Vertical) em pixels.
Por Exemplo:
Essa a Foto<img src="foto.jpg"
align=left width=200 height=200
hspace=125 vspace=150>. Observe
a figura 5.5.
Figura 6.1 Observe que a frase linkada,

est sublinhada e em azul.
As cores no link pode ser mudada

com os comandos link (Cor dos Links),
alink (Cor de um link que foi
pressionado) e vlink (Cor de um link
j visitado), podem ser colocados no
body.
Por Exemplo:
So Paulo Brasil
10
HTML Curso Bsico

<BODY text="#880000"
link=#AAAA00 vlink=00DD00
alink=#0000AA>
<H1>
pgina 2</A><BR>
<A href=pagina3.html>V Para a
Pgina 3</A><BR>
pgina 4</A>
</H1>
</BODY>. Veja a figura 6.2.
Figura 6.3 Observe que ao clicar no link, o

Outlook Express Abre uma Janela.
12 Tabela
Figura 6.2 Observe que o link nunca clicado,

est verde escuro, o j clicado, verde claro, e
o que est pressionado, azul.
Pode-se tambm linkar figuras, basta

substituir a frase, pelo destino da
figura.
Por Exemplo:
<A href=pgina2.html><img
src=foto.jpg></A>.
Voc pode mandar um e-mail, usando
o link.
Por Exemplo:
<a
href=mailto:email@servidor.com>Env
ia o e-mail para o destino
email@servidor.com. Veja a figura 6.3.
Para manter aquela organizao j

citada antes, tambm na parte grfica,
necessrio a criao de tabelas,
para que imagens e textos fiquem
organizados em harmonia em sua
pgina, para isso, usa-se a tag
<table>.
Na tag table, atributos como align,
alinha a tabela na tela, border, coloca
uma borda na tabela. Essa tag possui
sub tags, <TR></TR>, que
representa as linhas, e devem vir
dentro da table, e podem usar tags
como align, para alinhar o contedo
da clula, e a tag <TD></TD>, que
representa as colunas e devem vir
dentro da tag <TR>.
Por Exemplo:
<table align=center border=3>
<tr align=center>
<td>Esse o
texto</td>
<td><img
src="foto.jpg" width=60
height=60></td>
</tr>
So Paulo Brasil
11
HTML Curso Bsico

<tr align=right>
<td>Texto</td>
<td>mais texto</td>
</tr>
</table>. Veja a Figura 7.1.
Figura 7.2 Observe que foi inserido uma

figura na linha de baixo, e que a clula da
segunda coluna da linha de cima foi mesclada.
O mesmo pode ser feito com linhas, usando o
comando rowspam.
Figura 7.1 Observe que a tabela est
alinhada ao centro, e que h borda e uma
figura, tudo no local especificado.
Pode-se mesclar clulas.

Por Exemplo:
<table align=center border=3>
<tr align=center>
<td>Esse o
texto</td>
<td colspan=2
align=center><img src="foto.jpg"
width=60 height=60></td>
</tr>
<tr align=right>
<td>Texto</td>
<td>mais texto</td>
<td><img
src="img.jpg" width=60
height=60></td>
</tr>
</table>. Veja a Figura 7.2.
13 - Formulrios
Para criar formulrios, usa-se uma tag
chamada <FORM></FORM>. Existem
vrios atributos para essa tag que
vamos estudar nesse capitulo.
Por Exemplo:
<FORM action=destino
method=get / post>
Campo de Texto (Incluso dentro da
tag form)
Esse, como todos os campos
inserido pela tag input.
Por Exemplo:
Entre com o Nome:<input
type=text name=nome
size=20>. Onde Type a definio
de que esse campo um campo de
texto e size, o tamanho do campo.
Veja a Figura 8.1.
So Paulo Brasil
12
HTML Curso Bsico
Figura 8.1 Observe que h o escrito e

depois o campo do formulrio, e que o
campo bem maior que o padro.
Campo de Senha (Incluso na tag

form)
Por Exemplo:
Entre com a senha:<input
type=password name=senha
size=10>Veja a figura 8.2.
Figura 8.2 Observe que o campo da senha

a metade do campo do nome, e que no
lugar de letras, h * no campo senha.
Voc pode adicionar ainda botes de

radio, caixas de seleo, lista ou
menus, campos de textos com vrias
linhas, boto simples, boto de envio
e reset e boto com imagem.
Vamos ver:
<form action="" method="post">
<p>CheckBox</p>
<input type="checkbox"
name="bd">Banco de Dados<BR>
name="wd">Web Design<BR>
name="prog">Programao<BR>
<!Onde type o tipo, name o
nome, e o escrito o que vai
aparecer--!>
<BR>
<p>Radio Button</p>
<input type="radio"
name="Masc"
value=masc>Masculino<BR>
<input type="radio"
name="fem"
value=fem>Feminino<BR>
<BR>
<p>Menu</p>
<select name="cor" size="1">
<option value="amarelo"
selected>Amarelo
<option
value="Vermelho">Vermelho
<option value="verde">Verde
</select>
<!Onde Select a tag que cria a
chackbox, e option so as opes--!>
<BR>
<textarea name="obs" rows="10"
cols="100">
Aqui vai o texto
</textarea>
<!Onde textarea a tag que cria o
campo de escrita, e Aqui vai o texto,
o texto que comea escrito no
campo--!>
<BR>
<input type="button"
value="Boto">
<input type="Submit"
value="Enviar">
<input type="reset" value="Limpar">
<input type="image"src="foto.jpg"
width=60 height=30 align=center
value="&Boto">.
So Paulo Brasil
13

Coimbra PDF

Enviado por

Dados do documento

Título original

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

Coimbra PDF

Enviado por

Direitos autorais:

Formatos disponíveis

HTML Curso Bsico

Aprenda os conceitos iniciais de HTML em

HTML Curso Bsico

4 - SALVANDO UMA PAGINA HTML

5 - INICIANDO UMA PGINA

6 - CONSTRUINDO UMA PGINA HTML

HTML Curso Bsico

seja executada, necessrio que ela

4 - Salvando uma pgina

5 - Iniciando uma pgina

Em qualquer que seja o editor de

HTML Curso Bsico

6 - Construindo Uma pgina

Figura 2.1 Ttulo da Pgina

Na tag body, pode ser adicionada as

Figura 2.2 O atributo bgbolor, e a cor

HTML Curso Bsico

Figura 2.3 Repare que como a imagem

<H1>Aqui ser Exibido o texto com

Figura 3.1 Todos os tamanhos possveis do

Figura 2.4 Repare que o texto no comeo

Observe que com o H, no

HTML Curso Bsico

Figura 3.2 Mesmo quebrando a linha com a

Para quebrar a linha, usa-se a tag

baixo, e quando se usa o <P></P>, a linha

A tag <P></P>, ainda serve para

Figura 3.4 Observe o texto alinhado ao

Obs.: Os Alinhamentos podem ser:

Figura 3.3 Observe que quando se usa o

HTML Curso Bsico

Figura 3.5 Atributo Font

Voc pode no HTML, formatar uma

Figura 3.6 Cdigo com um comentrio.

Figura 3.6 As formataes podem ser

Figura 3.7 Grfico, observe que o

Numa pgina HTML, as cores so

HTML Curso Bsico

Figura 4.1 Uma lista numerada.

Figura 4.2 Observe que os nmeros deram

HTML Curso Bsico

Figura 5.1 Observe que a foto carregou em

Figura 4.3 Observe que a lista deu lugar a

Para corrigir isso, h os atributos

Figura 5.2 Observe que a foto foi reduzida

Voc pode tambm, posicionar

HTML Curso Bsico

Figura 5.3 Observe que a imagem est

Voc pode tambm adicionar borda a

Figura 5.5 Observe que a imagem ficou

Figura 5.4 Observe que a figura ganhou

Voc pode definir tambm o

Figura 6.1 Observe que a frase linkada,

As cores no link pode ser mudada

HTML Curso Bsico

Figura 6.3 Observe que ao clicar no link, o

Figura 6.2 Observe que o link nunca clicado,

Pode-se tambm linkar figuras, basta

Para manter aquela organizao j

HTML Curso Bsico

Figura 7.2 Observe que foi inserido uma

Pode-se mesclar clulas.

HTML Curso Bsico