HTML - Hypertext Markup Language PDF

HTML - Hypertext Markup Language
HTML é a abreviatura de HyperText Markup

Language, ou seja, Linguagem de Marcação de
Hipertexto. Resumindo em uma frase: o HTML é
uma linguagem para publicação de conteúdo
(texto, imagem, vídeo, áudio e etc.) na Web.
Jairson Monteiro - Ano Lectivo 2017-2018 CEMAM

HTML - Hypertext Markup Language
Os dois objetivos básicos de HTML são:
1. Formatação do conteúdo de uma página

Web
2. Criar ligações entre várias páginas

TAGs são os comandos utilizados pela
linguagem HTML.
➢ Cada TAG informa ao Browser, como deverá formatar o
texto e deve estar dentro dos sinais menor (<) e maior
(>). Exemplo: <HTML>, <BODY>, etc.
➢ Os TAGs podem ser únicos ou duplos, com início e fim.
Exemplos:
➢ TAG único: <BR> TAG duplo: <P>....</P>
INICIANDO UM DOCUMENTO
Todo o documento HTML fica contido entre os TAGS:

<HTML> e </HTML>. Temos duas seções básicas:
HEAD
Contém parâmetros de configuração do documento.
BODY
Contém o documento em si.

A estrutura de um documento HTML
<HTML> <html>
<HEAD> <head>
<TITLE>Título da Pagina</TITLE> <title>Minha Pagina</title>
</HEAD> </head>
<BODY> <body>
*** Conteúdo da Home Page *** Ola meu nome e xxxxx. Eu faço
</BODY> parte da turma 12º XX CEMAM.
</HTML> Hoje é a minha primeira aula de
HTML.
</body>
</html>
TAG’s fundamentais
 <body> …</body>
Body e a TAG onde ficam escritos todos os elementos

visiveis da pagina: textos, links, imagens, formularios, etc.
Principais atributos de <body>

 Bgcolor (utilizado para definer a cor de fundo da pagina).
 Background (indicado para inserir uma imagem para o

plano de fundo, deve ser inserido o endereço da imagem)
Formatação de Texto
Quebra de linha e parágrafo:
 br – quebra de linha
 p – parágrafo
Principal atributo da TAG p:
 align (serve para aplicar o alinhamento do parágrafo)
O align assume um conjunto de valores como sendo:
center, left, right, justify, caso não seja definido, o
valor padrão é left
Além das TAGs <CENTER>...</CENTER> e <BLINK>...</BLINK> existem as
seguintes TAGs que podem ser utilizadas para a formatação de um texto.
 <B>...</B> - Aplica o estilo negrito.
 <I>...</I> - Aplica o estilo itálico.
 <U>...</U> - Aplica o estilo sublinhado (nem todos os browser o
reconhecem).
 <S>...</S> - Faz com que o texto fique rasurado.
 <SUP>...</SUP> - Faz com que o texto fique .
sobrescrito
 <SUB>...</SUB> - Faz com que o texto fique subscrito.

 <font>...</font> - define propriedades do tipo de letra

Principais atributos da TAG font
 Size – permite definir o tamanho da letra (1,…,7) sendo o 1 o

menor tamanho.
 Color – permite definir a cor da letra
 Face – Permite atribuir o tipo de letra a ser utilizado

Títulos e Subtítulos
Para demarcar títulos e subtítulos, use as TAGs de

HEADER (H1 a H6), juntamente com as opções
CENTER ou BLINK.
As TAGs Align, BLINK têm a função de deixar o
cabeçalho ou texto centralizado e pulsante
(piscando), respetivamente.
Inserindo uma Linha divisória
TAG <HR> Insere uma linha horizontal no Browser. HR – Horizontal Line
Sintaxe:
<HR WIDTH=”n%” ALIGN=”posição” SIZE=”n” NOSHADE COLOR=”#RRGGBB”>
SIZE=“n” - Grossura da linha horizontal

WIDTH=“%” - Define o quanto da tela a linha vai ocupar (largura). Pode ser tambem em
numero
ALIGN=“xxx” - Alinhamento
COLOR=#rrggbb - Cor da linha (alguns navegadores não a exibem...)
NOSHADE - Linha sólida... Sem efeitos
Ex:
<HR SIZE=7> insere uma linha de largura 7 (pixels):
<HR WIDTH=50%> insere uma linha que ocupa 50% do espaço horizontal disponível:
<HR WIDTH=30% ALIGN=RIGHT NOSHADE> insere uma linha de comprimento 30% (do
espaço horizontal disponível), alinhada à direita, sem efeito tridimensional:
<HR SIZE=70 WIDTH=2 ALIGN=LEFT> insere uma linha de largura 70 (pixels), comprimento
2 (pixels), alinhada à esquerda.
11
Criando Listas em documento HTML
A linguagem HTML contém elementos que permitem criar listas de
definições, listas ordenadas e listas não ordenadas como os que são
utilizados nos aplicativos de edição de textos.
❑ Tipos de Listas
1. Listas Ordenadas (<OL>)

a. Atributos de OL
2. Listas não Ordenadas (>UL>)
a. Atributos de UL
3. Listas de Definição 12
1. Listas ordenadas
Listas ordenadas são também denominadas listas numeradas, pois, quando um navegador
encontra uma TAG, iniciando uma lista ordenada, ele passa a mostrar cada item utilizando
números, como 1, 2, 3, e assim sucessivamente.
TAG <OL> … </OL> Ordered List

Toda Lista possui itens
TAG <LI> … </LI>, onde LI significa List Item
<OL> marca inicio de uma lista ordenada
ExempLo: Lista
<LI> lista cada um dos itens da lista a ser criada
</OL> Termina a lista Meses do Ano
<ol>
<li> Janeiro </li>
<li> Fevereiro </li>
<li> Março </li>
13
</ol>
Atributos de Listas ordenadas
✓ Type: indica tipo de caractere que fará a marcação [i|I|a|A|1]
✓Start: indica onde deve começar a numeração ou as letras da lista. [valor]
Ex: Código em Html

<ol>
1. Primeiro item <li> Primeiro Item </li>
h. Sub-item <ol type=“a” start=“8”>
2. Segundo item <li> Sub-item</li></ol>
3. Terceiro item <li> Segundo Item </li>
<li> Terceiro Item </li>
</ol>
14
2. Listas Não ordenadas (numerada)
Listas não ordenadas são muito parecidas com as ordenadas. A única diferença é o fato de elas não
definirem explicitamente uma ordem, como é no caso as numeradas. Eles são formados por
símbolos, que podem ser bola, quadrado, e uma bola vazia. Elas são iniciadas com a TAG <UL> e
são respectivamente terminadas com </UL>. E seus elementos são que nem as numeradas: com
<LI>.
TAG <UL> … </UL> Unordered List Exemplo: Lista Meses do Ano

TAG <LI> … </LI>, onde LI significa List Item <ul>
<li> Janeiro </li>
<UL> <li> Fevereiro </li>
<LI>
</UL>
<li> Março </li>
</ul>
15
Atributos de Listas Não ordenadas
✓ Type: (tipo de caractere que fará a marcação [square|circ|disc]
Sintaxe: Onde:
<UL>: início da lista pontuada;
<UL TYPE=”formato”> TYPE=”formato”: o formato do marcador pode ser:
<LI> Tópico 1 - disc: o marcador é um ponto (padrão utilizado pelos
<LI> Tópico 2 navegadores, não precisa indicar)
<LI> Tópico 3 - square: o marcador é um quadrado
</UL> - circle: o marcador é um círculo

<LI>: tópicos da lista, não é necessário encerrar com a TAG </LI>;
</UL>: fim da lista pontuada 16
Exemplo de Lista não Ordenada
<HTML>
<HEAD>
<TITLE>Criando Listas em HTML</TITLE>
</HEAD>
<BODY>
<H3>Lista Não Ordenada - Tipo Predefinição / Disc
</H3>
<UL>
<LI>Tópico 1</LI>
<LI>Tópico 2</LI>
<LI>Tópico 3</LI>
</UL>
</BODY>
</HTML> 17
Listas Intercaladas
Podem ser utilizadas para criar listas hierarquicas, juntando listas ordenadas
e não numeradas. É utilizado para melhor organizar a estrutura de tópicos.
Exemplo
1. Informática
i. Hardware
A. Dispositivos de Entrada
o Teclado
o Rato
o Scaner
o Leitor código Barra
B. Dispositivos de Saida
▪ Monitor
a) CRT
b) LCD
▪ Impressora
▪ Colunas de Som
C. Mistos
• Pen drive
• Aparelhos Multifunções
ii. Software
I. Sistema Operativo 18
II. Outros Aplicativos

Exemplo2
Exemplo1 <html>
<body>
<html> <h4>Uma lista aninhada:</h4>
<body> <ul>
<h4>Uma Lista de Definição:</h4> <li>Café</li>
<dl> <li>Chá
<dt>Café</dt> <ul>
<dd>Bebida quente e negra</dd> <li>Chá preto</li>
<dt>Leite</dt> <li>Chá verde</li>
<dd>Bebida fria e branca</dd> </ul>
</dl> </li>
</body> <li>Leite</li>
</html> </ul>
</body> 19
</html>
3. Listas de Definições
O comando <DL> (Definition List) é utilizado para criar listas de definições
que se parece um glossário de termos. Cada termo da lista deve ser
especificado com o comando <DT> (Definition Term) e a explicação de cada
comando especificada com o comando <DD> (Definition Description) :
Onde:
<DL>
<DT> termo1 a ser definido
<DD> definição do termo1
<DT> termo2 a ser definido
<DD> definição do termo2
</DL> 20
Exemplo de Listas de Definição
<HTML>
<HEAD>
<TITLE>Criando Listas em HTML</TITLE>
</HEAD>
<BODY>
<H3>Lista Descritiva</H3>
<DL>
<DT><B>Listas Não Ordenadas</B>
<DD>As listas não ordenadas inserem marcadores na frente de cada item.
<DT><B>Listas Ordenadas</B>
<DD>As listas ordenadas inserem números ou letras na frente de cada item.
<DT><B>Listas Descritivas</B>
<DD>As listas descritivas são diferentes das outras listas. Cada item de uma lista descritiva
possui dois componentes: um tópico e uma descrição.
</DL>
</BODY>
</HTML>
21
INSERÇÃO DE IMAGENS
A tag utilizado para a inclusão de imagens é o:

<IMG>
Vários atributos devem ser definidos sobre a origem,
colocação e comportamento da imagem. Uma parte
deles é opcional.

Atributos da imagem:
SRC
SRC="local da imagem“
ALT
ALT="legenda“
ALIGN=LEFT, RIGHT, TOP, MIDDLE ou BOTTOM
HEIGHT=número e WIDTH=número
HSPACE=número e VSPACE=número (em pixels):
Especifica o espaço em branco extra ou as margens ao redor da imagem.
HSPACE é o espaço horizontal e VSPACE é o espaço vertical.
<img src=“araras.jpg” width=“160” height=“132” border=“0” Alt=“Somos irresistiveis”>

IMAGEM DE FUNDO
Podem ser incluídas também imagens de fundo, para isso utilize novamente a tag BODY,
agora com o atributo BACKGROUND. Por exemplo:
<BODY BGCOLOR=#FFFFFF BACKGROUND ="imagem.gif“ TEXT=#000000 ...>

TABELAS
TAG <TABLE>…</TABLE>
• Estas tags definem que o conteúdo que está entre elas deve ser organizado na
forma de tabela.
• Para a formatação da tabela podem ser colocados junto da tag <TABLE> os
seguintes atributos abaixo, sendo n: tamanho em pixels e n%: tamanho em
percentagem relativo ao tamanho da tabela.

ATRIBUTOS DA TABELA
ALIGN=(LEFT/CENTER/RIGHT): Alinhamento da tabela em relação ao documento.

BGCOLOR: Define uma cor para o segundo plano da tabela.
BORDER=n: coloca o limite com espessura n (padrão: sem limite).
CELLSPACING=n: espaçamento entre as células (padrão: 2).

CELLPADING=n: espaçamento entre os limites de uma célula e seu conteúdo
(padrão: 1).
WIDTH=n/n%: Largura da tabela.

Depois de definida a estrutura da tabela podemos colocar as tags que posicionarão o conteúdo da tabela.
Abaixo mostramos somente o “esqueleto” de uma tabela com células de título (tag <TH>…</TH>) e 2
linhas e 2 colunas de dados. O conteúdo da tabela é colocado entre o tags <TD>…</TD>.
<TABLE> 

<TR> 
<TH>…</TH> 
<TH>…</TH> 
</TR> 
<TD>…</TD> 
</TABLE> 

TAG <TR>…</TR>
Abertura de uma linha da tabela, possui as seguintes opções:

ALIGN=(LEFT/CENTER/RIGHT): Alinhamento horizontal do conteúdo,
tornando-se padrão para toda linha.
VALIGN=(TOP/MIDDLE/BOTTOM/BASELINE): Alinhamento vertical do
conteúdo, tornando-se padrão para toda linha.
BGCOLOR: Define uma cor para o segundo plano para a linha.

TAG <TD>…</TD> E <TH>…</TH>
Cria uma célula na tabela, a tag de célula título (<TH>…</TH>) também possui as mesmas
opções mostradas abaixo. ALIGN=(LEFT/CENTER/RIGHT): Alinhamento horizontal do
conteúdo, tornando-se padrão para toda linha.
VALIGN=(TOP/MIDDLE/BOTTOM/BASELINE): Alinhamento vertical do conteúdo,
tornando-se padrão para toda linha.
BGCOLOR: Define uma cor para o segundo plano para a linha.
BORDER=n: coloca uma borda com espessura n (padrão: sem borda).
COLSPAN=n: número de colunas que a célula sobrepõe.
ROWSPAN=n: número de linhas que a célula sobrepõe.
WIDTH=n/n%: Largura da célula.

Exercício – Elaborar uma tabela com a mesma estrutura

LINKS OU HIPERLIGAÇÕES
Uma das tags mais importantes é o que permite fazer links, ou seja, fazer
referência a um outro recurso da WEB ou a um ponto específico da sua
página.
<A HREF="URL">Texto que aparece no link</A>
O atributo HREF determina a localização do arquivo da sua página ou do

local da WEB a que o link se referencia. A URL (Uniforme Resource
Locator) é o endereço do link. O texto entre as tags aparecerá sublinhado,
indicando que é um link de hipertexto.

Nota: as cores dos link podem ser mudadas utilizando-se os seguintes
atributos dentro do
tag <BODY>:
LINK = cor: modifica a cor do link;
VLINK = cor: modifica a cor do link já visitado.
ALINK - cor dos links, quando acionados (padrão: vermelho)
Exemplos:
<A HREF="http://www.abola.pt">Link para a página do jornal abolaA>
<A HREF="exemplo.html">Link para o arquivo exemplo.html, da sua página</A>
<A HREF="exemplo.html"><IMG SRC="icone.gif"></A>
<A HREF="mailto: Jairson.monteiro@gmail.com">E-mail para o professor</A>
Atributos podem ainda ser usados na tag <A>.
Por exemplo:
TARGET=" ": Especifica o carregamento de um link em uma
janela de destino. Ele é usado muitas vezes com o tag FRAME.
Ele pode assumir diversos valores:
_top Carrega o link no corpo inteiro da janela
_blank Carrega o link em uma janela em branco
_self Carrega o link na mesma janela dele
FRAME

FRAME
São molduras que dividem a janela do browser, possibilitando
exibir mais de um documento html ao mesmo tempo.
<html>
<head><title>Frames</title></head>
<frameset cols=“200,*,20%”>
Criar uma página
<frame src=“menu.html”>
com Frame <frame src=“bbbb.html”>
<frame src=“aaaa.html”>
</frameset>
Jairson Monteiro - Ano Lectivo 2017-2018 CEMAM </html>
<html>
<frameset cols=“200,20%,*”>
<frame src=“bbbb.html”>
</frameset>
</html> Está-se a criar uma página dividida em 3
colunas em que a:
1ª Coluna tem tamanho 200 pixel
2ª Coluna tem tamanho 20%
Jairson Monteiro - Ano Lectivo 2017-2018 CEMAM 3ª coluna ocupa o restante espaço disponível
<html>
<frameset cols=“200,20%,*”>
</frameset>
</html> Na 1ª coluna será apresentada o
documento menu.html

<html>
<frameset rows=“20%,*”>
<frame src=“cabeçalho.html”>
</frameset>
</html>
Está-se a criar uma página dividida em 2
linhas em que a:
1ª linha tem tamanho 20%
2ª linha ocupa o restante espaço disponível
<html>
<frameset rows=“20%,*”>
<frame src=“cabeçalho.html”>
</frameset>
</html>
Na 1ª linha será apresentada o
documento menu.html

Atributos da Frame
NAME="janela"
NAME serve para atribuir um nome à frame e poderá ser utilizado em
hiperligações para a identificar.
SRC="url"
SRC descreve o URL do documento que deverá fornecer o conteúdo da
frame.
SCROLLING="YES|NO|AUTO"
Define se a frame deverá, ou não, ter barras de deslocamento
("scrollbars").
NORESIZE
Este atributo indica que o utilizador não deve ter permissão para
alterar manualmente a dimensão da frame.
<FRAMESET COLS="75,*" FRAMEBORDER=0>
<FRAME SRC="menu.html" NAME="menu">
<FRAME SRC=“principal.html" NAME=“principal">
</FRAMESET>
Para que todos as hiperligações contidos na frame menu sejam carregados

na frame principal, deve-se utilizar o atributo TARGET na hiperligação
criada.
<A HREF=“produtos.html" TARGET=“principal">...</A>

HTML - Hypertext Markup Language 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

HTML - Hypertext Markup Language PDF

Enviado por

Direitos autorais:

Formatos disponíveis

HTML - Hypertext Markup Language

HTML é a abreviatura de HyperText Markup

Jairson Monteiro - Ano Lectivo 2017-2018 CEMAM

1. Formatação do conteúdo de uma página

Jairson Monteiro - Ano Lectivo 2017-2018 CEMAM

Todo o documento HTML fica contido entre os TAGS:

Jairson Monteiro - Ano Lectivo 2017-2018 CEMAM

Body e a TAG onde ficam escritos todos os elementos

Principais atributos de <body>

 Background (indicado para inserir uma imagem para o

 <SUB>...</SUB> - Faz com que o texto fique subscrito.

Jairson Monteiro - Ano Lectivo 2017-2018 CEMAM

 Size – permite definir o tamanho da letra (1,…,7) sendo o 1 o

 Color – permite definir a cor da letra

 Face – Permite atribuir o tipo de letra a ser utilizado

Jairson Monteiro - Ano Lectivo 2017-2018 CEMAM

Para demarcar títulos e subtítulos, use as TAGs de

SIZE=“n” - Grossura da linha horizontal

1. Listas Ordenadas (<OL>)

TAG <OL> … </OL> Ordered List

Ex: Código em Html

TAG <UL> … </UL> Unordered List Exemplo: Lista Meses do Ano

</UL> - circle: o marcador é um círculo

II. Outros Aplicativos

A tag utilizado para a inclusão de imagens é o:

Jairson Monteiro - Ano Lectivo 2017-2018 CEMAM

Jairson Monteiro - Ano Lectivo 2017-2018 CEMAM

Jairson Monteiro - Ano Lectivo 2017-2018 CEMAM

• Para a formatação da tabela podem ser colocados junto da tag <TABLE> os

seguintes atributos abaixo, sendo n: tamanho em pixels e n%: tamanho em

percentagem relativo ao tamanho da tabela.

Jairson Monteiro - Ano Lectivo 2017-2018 CEMAM

ALIGN=(LEFT/CENTER/RIGHT): Alinhamento da tabela em relação ao documento.

CELLSPACING=n: espaçamento entre as células (padrão: 2).

Jairson Monteiro - Ano Lectivo 2017-2018 CEMAM

<TABLE>

Jairson Monteiro - Ano Lectivo 2017-2018 CEMAM

Abertura de uma linha da tabela, possui as seguintes opções:

Jairson Monteiro - Ano Lectivo 2017-2018 CEMAM

Jairson Monteiro - Ano Lectivo 2017-2018 CEMAM

Jairson Monteiro - Ano Lectivo 2017-2018 CEMAM

O atributo HREF determina a localização do arquivo da sua página ou do

Jairson Monteiro - Ano Lectivo 2017-2018 CEMAM

Jairson Monteiro - Ano Lectivo 2017-2018 CEMAM

Jairson Monteiro - Ano Lectivo 2017-2018 CEMAM

Jairson Monteiro - Ano Lectivo 2017-2018 CEMAM

Para que todos as hiperligações contidos na frame menu sejam carregados

<A HREF=“produtos.html" TARGET=“principal">...</A>

Jairson Monteiro - Ano Lectivo 2017-2018 CEMAM

Você também pode gostar