Scribd
Carregar
56 visualizações13 páginas

Guia Básico de HTML para Iniciantes

O documento descreve as principais tags HTML e seus atributos, incluindo <body>, <p>, <img>, <a>, <table> e outras. Ele fornece detalhes sobre como cada tag funciona e quais atributos podem ser usados.

Enviado por

Formador
Direitos autorais
© © All Rights Reserved
Levamos muito a sério os direitos de conteúdo. Se você suspeita que este conteúdo é seu, reivindique-o aqui.
Formatos disponíveis
Baixe no formato PDF, TXT ou leia on-line no Scribd
56 visualizações13 páginas

Guia Básico de HTML para Iniciantes

O documento descreve as principais tags HTML e seus atributos, incluindo <body>, <p>, <img>, <a>, <table> e outras. Ele fornece detalhes sobre como cada tag funciona e quais atributos podem ser usados.

Enviado por

Formador
Direitos autorais
© © All Rights Reserved
Levamos muito a sério os direitos de conteúdo. Se você suspeita que este conteúdo é seu, reivindique-o aqui.
Formatos disponíveis
Baixe no formato PDF, TXT ou leia on-line no Scribd

Apontamentos de HTML

HTML
Tags e seus atributos

Os comandos em HTML são chamados de tags.


Os tags são envolvidos pelos sinais < > ou </ >. Entre os sinais < > são especificados os TAGS
propriamente ditos .
Os Tags podem ser escritos com letras maiúsculas ou minúsculas.

O formato genérico de um tag é :

<TAG> .... </TAG>

Abre o tag Fecha o tag

Estrutura básica de um documento HTML:

<HTML>

<HEAD>

<TITLE>
</TITLE>

</HEAD>
<BODY>
...
</BODY>
</HTML>

<HTML> ... < / HTML > Delimita a área onde serão colocados os TAGS HTML .
<HEAD> ... </HEAD> Define a área de cabeçalho, com elemento que não vão ser
visualizáveis na página. Não é necessário ter este TAG para a página funcionar.
<TITLE> ... </TITLE> - Será usado dentro do tag <HEAD>. Coloca um título que aparecerá na
barra de título do browser.
<BODY> ... </BODY>. Será o corpo da página. Define a área visível do documento. Onde
serão colocados todos os comandos , textos e imagens da página

Nota:
Todos os atributos de um tag são colocados do lado direito do tag antes do caracter >.
Ex:
<Font size=”4” face=”Times New Roman” color=#ff00ff>

Tag font Atributos do tag font

Formadora: Ivone Faria 1


Apontamentos de HTML

Comando Atributo O que faz?


<body> Define a área visível da página.
Coloca a imagem como imagem
Background=”[Link]”
de fundo da página.
A imagem de fundo não se mexe
Bgproperties=fixed
junto com o texto.
Bgcolor=#00ff00 Cor de fundo da página.
Link=#00ff66 Cor dos links.
Alink=#00ff66 Cor dos links activos.
Vlink=#00ff66 Cor dos links visitados.
<b> texto </b> Coloca o texto a negrito (bold).
<i> texto </i> Coloca o texto a itálico.
<u> texto </u> O texto fica sublinhado.
Coloca o texto em estilo
<tt> texto </tt>
monoespaço.
n={1,...,6} Cria um cabeçalho no
documento em que 1 é o maior
tamanho e 6 o menor.
<Hn>...</Hn>
<H1>...</H1> - Cabeçalho grande
<H6>...</H6> - Cabeçalho
pequeno
Align=”left, center ou right”
<p>...</p> Parágrafo.
Align=”left, center ou right”
Coloca características na font do
<Font>texto</Font>
texto.
Coloca o tipo de letra para
Face=”Times New Roman”
‘Times New Roman’
Color=#2f4f2f Coloca cor no texto.
Size=”n” n={1…7} tamanho das letras
Destina-se à introdução de um
<a> ... </a>
Link.
Necessita deste parâmetro para
Href
funcionar
<a href=”[Link] Cria um link para um site
<a Cria um link para o envio de
href=“[Link] correio
Cria um link para a página
<a href=“[Link]”>
[Link] dentro do meu site.
Faz um link para um alvo com o
<a href=”#tartaruga”> o nome é
âncoras nome tartaruga dentro da
inventado
mesma página
Cria um alvo com o nome
<a name=”tartaruga”>
tartaruga
<hr> Insere uma linha horizontal
Size=n n={1,...,100} Define a altura da linha
Width=n% Define a largura
Align=left, right ou center Alinha a linha horizontal
color Atribui cor à linha
<br> Insere uma quebra de linha
<img> Insere uma imagem
Indica para inserir no conteúdo
da página a imagem
src=”[Link]”
correspondente ao ficheiro
[Link]

Formadora: Ivone Faria 2


Apontamentos de HTML

Se quisermos definir uma largura


Width=”200”
para a imagem.
Se quisermos definir uma largura
Height=”200”
para a imagem.
Texto que aparece na imagem,
Alt=”texto” quando passamos com o rato
por cima
Insere uma borda em torno da
Border=n n=valor em pixels
imagem
<table> ... </table> Cria uma tabela.
Insere uma borda em torno das
Border=n n=valor em pixels
linhas e colunas da tabela.
Bordercolor=#00ff66 Coloca uma única cor na borda.
Define a cor da sombra mais
Bordercolorlight=#ff0000
clara da borda.
Define a cor da sombra mais
Bordercolordark=#000000
escura da borda.
Width=n% Especifica a largura da tabela.
Height=n% Especifica a altura da tabela.
Bgcolor=#ff6600 Atribui cor de fundo.
Alinha a tabela em relação ao
Align=Left, right ou center
documento.
<tr> ... </tr> Inicia uma linha.
<td> ... </td> Inicia uma coluna.
Alinhamento horizontal do
Align=left, right ou center
conteúdo das células.
Alinhamento vertical dentro das
Valign=top, bottom ou middle
células de uma linha.
Estrutura para construir uma
tabela é a seguinte:
<table>
<tr>
<td>A</td>
<td>B</td>
</tr>
<tr>
<td>A1</td>
<td>B2</td>
</tr>
</table>
fica:
A B
A1 B2

Marca o inicio e o fim de uma


<OL> ... </OL>
lista ordenada.
Para colocação de cada
elemento de uma lista (ordenada
ou não):
(Lista ordenada)
<ol>
<LI> <LI> elemento 1
<LI> elemento 2
<OL>
ficaria:
1. elemento 1
2. elemento 2

Formadora: Ivone Faria 3


Apontamentos de HTML

Type=a ou A ou i ou I Coloca-se a letra a ou A


conforme se queira os elementos
da lista em maiúsculas ou
minúsculas. também dá com
numeração romana.
Ordem alfabética ou numeração romana <Ol type=a>
<LI> elemento 1
<LI> elemento 2
<OL>
ficaria:
a. elemento 1
b. elemento 2
Coloca-se o elemento que
especifica o número a partir da
qual os itens da lista começam a
Start= 3
ser contados.
Neste caso começa a contar a
partir do terceiro elemento
Marca o inicio e o fim de uma
lista não ordenada.
Os elementos destas listas em vez
de receberem letras ou números
<UL> ... </UL>
recebem formas gráficas. Estas
formas podem ser um círculo
vazio, um círculo a cheio ou um
quadrado.
Coloca-se circle / Disc / square,
type="circle” conforme se queira o tipo de lista
representada por circulos, pontos
type=" disc” Tem de ser escrito com
ou quadrados:
letras minúsculas.
• Circle
type="square" o Disc
§ Square

EXEMPLOS DE CÓDIGO PARA:


Inserir uma imagem:

<p align="center">

<img src="[Link]" >

</p>

Inserir uma frase a itálico, a negrito (bold) e sublinhada, com cor verde e o tipo de letra é
Times New Roman:

<b><i><u>
<font face="Times New Roman" color="#008000">
Frase de experiência
</font>
</u></i></b>

Inserir uma palavra como link:

Formadora: Ivone Faria 4


Apontamentos de HTML

EX.: a palavra árvore pode ser uma palavra qualquer, neste caso a palavra árvore vai
funcionar como link:

Link para a página [Link]

<a href="[Link]"> árvore </a>

Link para um endereço de correio (ex: igsfaria@[Link]):

<a href="[Link]
árvore
</a>

Link para um URL qualquer:


Exemplo para o site [Link]

<a href="[Link]
árvore
</a>

Inserir uma imagem como link:


EX.: a imagem golfinho pode ser uma palavra qualquer, neste caso a imagem do golfinho
vai funcionar como link:

Link para a página [Link]

<a href="[Link]">
<img src="[Link]" >
</a>

Link para um endereço de correio (ex: [Link]@[Link]):

<a href="[Link]
<img src="[Link]" >
</a>

Link para um URL qualquer:


Exemplo para o site [Link]

<a href="[Link]
<img src="[Link]" >
</a>

Conclusão: O que estiver entre <a href=”......”> e </a> será o link.

Formadora: Ivone Faria 5


Apontamentos de HTML

TABELAS:
Para construir uma tabela do tipo:
2 colunas e 3 linhas.

A
1

B
2
C 3

A célula situada na 1ª linha da 1ª coluna é constituída pela letra A com alinhamento em


cima e à esquerda.
A célula situada na 1ª linha da 2ª coluna é constituída pelo número 1 com alinhamento ao
meio e à esquerda.

A célula situada na 2ª linha da 1ª coluna é constituída pela letra B com alinhamento ao


meio e à esquerda.
A célula situada na 2ª linha da 2ª coluna é constituída pelo número 2 com alinhamento em
baixo e ao centro.

A célula situada na 3ª linha da 1ª coluna é constituída pela letra C com alinhamento ao


meio e à esquerda.
A célula situada na 3ª linha da 2ª coluna é constituída pelo número 3 C com alinhamento ao
meio e à esquerda.
Tal como na figura:

Código:

<table border="1" width="40%" height="40%" bgcolor="#CCFFFF">

<tr>
<td width="50%" bgcolor="#CCFFCC" valign="top" align="left">A</td>
<td width="50%">1</td>
</tr>

<tr>
<td width="50%">B</td>
<td width="50%" bgcolor="#FFFFCC" valign="bottom" align="center">2</td>
</tr>

<tr>
<td width="50%">C</td>
<td width="50%">3</td>
</tr>

</table>

Formadora: Ivone Faria 6


Apontamentos de HTML

FRAMES

Construção de FRAMES:
Antes da construção de frames tem-se que ter em atenção alguns pontos sobre a página
de frames a construir.

à Esta página de Frames é constituída por duas colunas e em que a segunda


coluna é constituída por duas linhas.

à Esta página de Frames é constituída por duas linhas, em que a segunda


linha é constituída por duas colunas.

à Esta página de frames é constituída por três linhas em que a segunda linha
é constituída por 2 colunas.

Construção da página de frames do tipo:

<frameset cols=”25%,*”>

<frame name=”esquerda”
src=”[Link]” 1ª coluna
noresize
frameborder=”no”>

<frameset rows= ”20%,*” > estou a indicar que a 2ª coluna é constituída por
duas linhas

<frame name=”cima”
src=”cabeç[Link]”
noresize 1ª linha
scrolling=”no”
frameborder=”yes”>

<frame name=”conteúdo”
src=”[Link]”
noresize 2ª linha
scrolling=”no”
frameborder=”no”>

</frameset>

Formadora: Ivone Faria 7


Apontamentos de HTML

Construção da página de frames do tipo:

<frameset rows = ”25%,*” > estou a indicar que a página de frames é constituída
por 2 linhas.

<frame name=”cima”
src=”pá[Link]” 1ª linha
noresize
frameborder=”no”>

<frameset cols=”25%,*”> estou a indicar que a 2ª linha é constituída por duas


colunas

<frame name=”esquerda”
src=”[Link]”
noresize 1ª coluna
scrolling=”no”
frameborder=”yes”>

<frame name=”conteúdo”
src=”conteú[Link]”
noresize 2ª coluna
scrolling=”no”
frameborder=”no”>

</frameset>

Construção da página de frames do tipo:

<frameset rows=”25%,*,25%”> estou a indicar que a página de frames é


constituída por 3 linhas.

<frame name=”cima”
src=”pá[Link]” 1ª linha
noresize
frameborder=”no”>

<frameset cols=”25%,*”> estou a indicar que a 2ª linha é constituída por duas


colunas

<frame name=”esquerda”
src=”[Link]”
noresize 1ª coluna da 2ª linha
scrolling=”no”
frameborder=”yes”>

Formadora: Ivone Faria 8


Apontamentos de HTML

<frame name=”conteúdo”
src=”conteú[Link]”
noresize 2ª coluna da 2ª linha
scrolling=”no”
frameborder=”no”>

<frame name=”baixo”
src=”rodapé.html” 3ª linha
noresize
frameborder=”yes”>
</frameset>

Significado:

FRAMESET Faz com que esta área seja tratada como não
contida dentro do tag <BODY>
Faz a divisão da frame.
ROWS Parâmetro que divide a frame em linhas,
Ex: FRAMESET ROWS =”90,*”
90 refere-se à largura da primeira frame e *
refere-se à segunda frame que vai ocupar o resto
do espaço disponível no ecrã.
COLS Parâmetro que divide a frame em colunas,
Ex: FRAMESET COLS =”160,*”
160 refere-se à largura da primeira frame e *
refere-se à segunda frame que vai ocupar o resto
do espaço disponível no ecrã.
SCROLLING Toma os valores YES ou NO caso se queira barras
de deslocamento ou não.
NAME Nome da frame. Será preciso o nome quando se
fizer um link para uma frame (<a
href=”[Link]” target=”conteúdo” à assim
a página [Link] será aberta na frame
com o nome conteúdo.)
SRC Onde é indicada a página que por defeito
aparece na frame quando se abre o site.
NORESIZE Não deixa o utilizador redimensionar a frame.
FRAME SRC Aqui põe-se a página que queremos que
apareça na Frame.
/FRAMESET Fim do código da página de frames.

Formadora: Ivone Faria 9


Apontamentos de HTML

FORMULÁRIOS

Para construir o seguinte formulário (ver código na página seguinte):

Temos que colocar o formulário entre <FORM>.....</FORM>. mas para validar


o formulário para que os seus dados sejam enviados para um endereço de
correio terá de escrever o seguinte:
<form method="POST" action="[Link] onSubmit=""
enctype="text/plain">

Formadora: Ivone Faria 10


Apontamentos de HTML

<form method="POST" action="[Link] type="text" à Quer dizer que


onSubmit="" enctype="text/plain"> estamos a construir uma linha de
texto.
Nome: <input type="text" name="Nome" size="70"><br> name="Nome" à Nome que vai
Morada:<input type="text" name="Morada" size="84"><br> aparecer antes do conteúdo do
Telefone:<input type="text" name="T3" size="10"> que se escrever na caixa,
Ou quando recebermos o formulário
<input type="text" name="T4" size="10"><br> por correio.
ex.: Nome: Ivone Santos
Onde pretende frequentar o curso:<br> size="70" à Número de
<select size="1" name="local" multiple> caracteres que a caixa
<option>Lisboa</option> apresenta. (Comprimento da
<option>Amadora</option> caixa).
<option>Porto</option>
<option>Massamá</option>
</select><br> select à Para a construção de
uma caixa de selecção.
Curso que pretende frequentar:<br> size="1" à N.º de opções que vão
<select size="1" name="curso"> aparecer de cada vez
<option>Contabilidade</option> multiple à Com esta opção não
<option>Informática</option> vai abrir uma caixa com todas as
<option>Direito</option> opções, mas faz um rolamento
<option>Matemática</option> das opções na caixa.
<option>Design</option>
</select><br>

Turno preferido:<br> type="radio" à Para a construção


<input type="radio" value="Manha" checked de um botão de uma única
name="turno">Manhã<br> escolha:
<input type="radio" name="turno" value="tarde">Tarde<br> value="Manha" à Nome para se
<input type="radio" name="turno" poder identificar a escolha. Neste
value="pós-laboral">Pós-
Laboral<br> caso seria “manhã”.
Checked à Para o caso de
Onde viu o nosso anúncio:<br> querermos esta opção
<input type="checkbox" name="jornal" value="anuncio"> seleccionada previamente.
Jornal<br> name="turno" à Nome do grupo
<input type="checkbox" name="radio" value=" anuncio "> a que pertence as opções.
Rádio<br>
<input type="checkbox" name="comboio" value=" anuncio ">
Comboio<br> type="checkbox" à Construção
<input type="panfleto" name="panfleto" value=" anuncio "> de opções de múltipla escolha.
Panfleto na caixa de correio<br> Name à nome da opção.
Value à Nome do grupo a que
Sugestões:<br> pertence as opções.
<textarea rows="4" name="S1" cols="46">
</textarea>
Textarea à define uma área
Botões apagar e limpar dados: para escrever texto com mais de
uma linha.
Rows àdefine a largura da caixa
<input type="submit" value="Enviar Dados" name="B1"> de texto.
Cols à define o comprimento da
<input type="reset" value="Apagar Dados" name="B2"> caixa de texto.

</form> type="submit" à botão enviar


type="reset" à botão de apagar
dados.

Formadora: Ivone Faria 11


Apontamentos de HTML

GLOSSÁRIOS
<BODY>
<DL>

<DT>TITULO 1
<DD>elemento 1
<DD>elemento 2

<DT>TITULO 2
<DD>elemento 1
<DD>elemento 2

<DL>
<DT>TITULO 2.1
<DD>elemento 1
<DD>elemento 2

<DL>
<DT>TITULO 2.1.1
<DD>elemento 1
<DD>elemento 1
</DL>

<DT>TITULO 2.2
<DD>elemento 1
<DD>elemento 2
</DL>

<DT>TITULO 3
<DD>elemento 1
<DD>elemento 2
</DL>
</BODY>

FICA:
TITULO 1
elemento 1
elemento 2
TITULO 2
elemento 1
elemento 2
TITULO 2.1
elemento 1
elemento 2
TITULO 2.1.1
elemento 1
elemento 1
TITULO 2.2
elemento 1
elemento 2
TITULO 3
elemento 1
elemento 2

Cada DL é um avanço que se faz à texto. Tem-se que fechar DL (</DL>) para
recuar. Para recuar duas vezes feche DL duas vezes (</DL> </DL>).

Formadora: Ivone Faria 12


Apontamentos de HTML

SOM e VIDEO:

SOM:

Podemos colocar música na página. Há a possibilidade de quem estiver a navegar, possa


parar a música através de um pequeno controle tipo aparelhagem.

formatos aceites: mid. Midi, wav, au

Imagine que queria colocar a música [Link] como background:

<bgsound src="[Link]" loop="-1" >

Se quiser colocar música na página não como background como conteúdo com controlos:
<embed src="[Link]" width="300" height="300" loop="-1" >

quanto menor menos botões tem quanto menor mais fina é a caixa

experimente por exemplo: width="70" height="25"

Se quisesse que a música toca-se apenas 2 vezes, então, seria loop=2. Para a música nunca
parar de tocar colocaria loop=-1 ou loop=infinite.

VIDEO:

Colocar um filme:

<img dynsrc="[Link]" loop="infinite" >

formatos aceites: avi, mpeg, mpg.

Utilize width e height se quiser alterar o tamanho.

Formadora: Ivone Faria 13

Você também pode gostar