HTML - Hypertext Markup Language

HTML - Hypertext Markup Language
a linguagem de descrio de documentos

usada na Web. Ela orientada por marcadores
ou TAGs.
Jairson Monteiro - Ano Lectivo 2017-2018 CEMAM

TAGs so 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 incio 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 sees bsicas:
HEAD
Contm parmetros de configurao do documento.
BODY
Contm o documento em si.

A estrutura de um documento HTML
<HTML> <html>
<HEAD> <head>
<TITLE>Ttulo da Pagina</TITLE> <title>Minha Pagina</title>
</HEAD> </head>
<BODY> <body>
*** Contedo da Home Page *** Ola meu nome e xxxxx. Eu fao
</BODY> parte da turma 12 XX CEMAM.
</HTML> Hoje a minha primeira aula de
HTML.
</body>
</html>
TAGs 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 endereo da imagem)
Formatao de Texto
Quebra de linha e pargrafo:
br quebra de linha
p pargrafo
Principal atributo da TAG p:
align (serve para aplicar o alinhamento do pargrafo)
O align assume um conjunto de valores como sendo:
center, left, right, justify, caso no seja definido, o
valor padro left
Formatao de Texto
Alm das TAGs <CENTER>...</CENTER> e <BLINK>...</BLINK> existem as
seguintes TAGs que podem ser utilizadas para a formatao de um texto.
<B>...</B> - Aplica o estilo negrito.
<I>...</I> - Aplica o estilo itlico.
<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

Formatao de Texto
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

Ttulos e Subttulos
Para demarcar ttulos e subttulos, use as TAGs de
HEADER (H1 a H6), juntamente com as opes
CENTER ou BLINK.
As TAGs Align, BLINK tm a funo de deixar o

cabealho ou texto centralizado e pulsante
(piscando), respetivamente.
Inserindo uma Linha divisria
TAG <HR> Insere uma linha horizontal no Browser. HR Horizontal Line
Sintaxe:
<HR WIDTH=n% ALIGN=posio 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 no a exibem...)
NOSHADE - Linha slida... Sem efeitos
Ex:
<HR SIZE=7> insere uma linha de largura 7 (pixels):
<HR WIDTH=50%> insere uma linha que ocupa 50% do espao horizontal disponvel:
<HR WIDTH=30% ALIGN=RIGHT NOSHADE> insere uma linha de comprimento 30% (do
espao horizontal disponvel), alinhada direita, sem efeito tridimensional:
<HR SIZE=70 WIDTH=2 ALIGN=LEFT> insere uma linha de largura 70 (pixels),
comprimento 2 (pixels), alinhada esquerda.
10
Criando Listas em documento HTML
A linguagem HTML contm elementos que permitem criar listas de
definies, listas ordenadas e listas no ordenadas como os que so
utilizados nos aplicativos de edio de textos.
Tipos de Listas
1. Listas Ordenadas (<OL>)

a. Atributos de OL
2. Listas no Ordenadas (>UL>)
a. Atributos de UL
3. Listas de Definio 11
1. Listas ordenadas
Listas ordenadas so tambm denominadas listas numeradas, pois, quando um navegador
encontra uma TAG, iniciando uma lista ordenada, ele passa a mostrar cada item utilizando
nmeros, 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> Maro </li>
12
</ol>
Atributos de Listas ordenadas
Type: indica tipo de caractere que far a marcao [i|I|a|A|1]
Start: indica onde deve comear a numerao ou as letras da lista. [valor]
Ex: Cdigo 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>
13
2. Listas No ordenadas (numerada)
Listas no ordenadas so muito parecidas com as ordenadas. A nica diferena o fato de elas no
definirem explicitamente uma ordem, como no caso as numeradas. Eles so formados por
smbolos, que podem ser bola, quadrado, e uma bola vazia. Elas so iniciadas com a TAG <UL> e
so respectivamente terminadas com </UL>. E seus elementos so 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> Maro </li>
</ul>
14
Atributos de Listas No ordenadas
Type: (tipo de caractere que far a marcao [square|circ|disc]
Sintaxe: Onde:
<UL>: incio da lista pontuada;
TYPE=formato: o formato do marcador pode ser:
<UL TYPE=formato>
- disc: o marcador um ponto (padro utilizado pelos
<LI> Tpico 1
navegadores, no precisa indicar)
<LI> Tpico 2
- square: o marcador um quadrado
<LI> Tpico 3
- circle: o marcador um crculo
</UL>
<LI>: tpicos da lista, no necessrio encerrar com a TAG </LI>;
</UL>: fim da lista pontuada
15
Exemplo de Lista no Ordenada
<HTML>
<HEAD>
<TITLE>Criando Listas em HTML</TITLE>
</HEAD>
<BODY>
<H3>Lista No Ordenada - Tipo Predefinio / Disc
</H3>
<UL>
<LI>Tpico 1</LI>
<LI>Tpico 2</LI>
<LI>Tpico 3</LI>
</UL>
</BODY>
</HTML> 16
Listas Intercaladas
Podem ser utilizadas para criar listas hierarquicas, juntando listas ordenadas
e no numeradas. utilizado para melhor organizar a estrutura de tpicos.
Exemplo
1. Informtica
i. Hardware
A. Dispositivos de Entrada
o Teclado
o Rato
o Scaner
o Leitor cdigo Barra
B. Dispositivos de Saida
Monitor
a) CRT
b) LCD
Impressora
Colunas de Som
C. Mistos
Pen drive
Aparelhos Multifunes
ii. Software
I. Sistema Operativo 17
II. Outros Aplicativos

Exemplo2
Exemplo1 <html>
<body>
<html> <h4>Uma lista aninhada:</h4>
<body> <ul>
<h4>Uma Lista de Definio:</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>
18
</html>
3. Listas de Definies
O comando <DL> (Definition List) utilizado para criar listas de definies
que se parece um glossrio de termos. Cada termo da lista deve ser
especificado com o comando <DT> (Definition Term) e a explicao de cada
comando especificada com o comando <DD> (Definition Description) :
Onde:
<DL>
<DT> termo1 a ser definido
<DD> definio do termo1
<DT> termo2 a ser definido
<DD> definio do termo2
</DL> 19
Exemplo de Listas de Definio
<HTML>
<HEAD>
<TITLE>Criando Listas em HTML</TITLE>
</HEAD>
<BODY>
<H3>Lista Descritiva</H3>
<DL>
<DT><B>Listas No Ordenadas</B>
<DD>As listas no ordenadas inserem marcadores na frente de cada item.
<DT><B>Listas Ordenadas</B>
<DD>As listas ordenadas inserem nmeros ou letras na frente de cada item.
<DT><B>Listas Descritivas</B>
<DD>As listas descritivas so diferentes das outras listas. Cada item de uma lista descritiva
possui dois componentes: um tpico e uma descrio.
</DL>
</BODY>
</HTML>
20
INSERO DE IMAGENS
A tag utilizado para a incluso de imagens

o: <IMG>
Vrios atributos devem ser definidos
sobre a origem, colocao 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=nmero e WIDTH=nmero
HSPACE=nmero e VSPACE=nmero (em pixels):
Especifica o espao em branco extra ou as margens ao
redor da imagem.
HSPACE o espao horizontal e VSPACE o espao

<img src=araras.jpg width=160 height=132 border=0 Alt=Somos irresistiveis>

IMAGEM DE FUNDO
Podem ser includas tambm 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 ...>

HTML - Hypertext Markup Language

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

Enviado por

Direitos autorais:

Formatos disponíveis

HTML - Hypertext Markup Language

a linguagem de descrio de documentos

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 visiveis

Principais atributos de <body>

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

As TAGs Align, BLINK tm a funo de deixar o

SIZE=n - Grossura da linha horizontal

1. Listas Ordenadas (<OL>)

TAG <OL> </OL> Ordered List

Ex: Cdigo em Html

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

II. Outros Aplicativos

A tag utilizado para a incluso de imagens

HSPACE o espao horizontal e VSPACE o espao

Jairson Monteiro - Ano Lectivo 2017-2018 CEMAM

Jairson Monteiro - Ano Lectivo 2017-2018 CEMAM

Você também pode gostar