Escolar Documentos
Profissional Documentos
Cultura Documentos
INTRODUÇÃO
HTML – Hypertext Markup Language;
É uma linguagem de marcação utilizadas para
produzir páginas web;
Formada por sequência de comandos – tags – que
são lidas e interpretadas pelo navegador –
browser;
O HTML trabalha em conjunto com outras
tecnologias, como o JavaScript e CSS
proporcionando páginas mais dinâmicas e
interativas.
CONHECENDO AS TAGS
O que é uma tag?
<html></html>
<meta http-equiv=“content-type”
content=“text/html; charset=utf-8”>
<html>
<head>
<title>Título da página</title>
</head>
<body>
<p>Primeiro parágrafo</p>
<p>Segundo parágrafo</p>
</body>
</html>
TAG <P> - PARÁGRAFO - ATRIBUTOS OPCIONAIS
align: define uma posição de alinhamento para o
elemento que está sendo formatado pela tag.
Os valores podem ser:
left: esquerda;
center: centralizado;
right: direira;
justify: justificado;
Atributos opcionais:
align: define o alinhamento da linha que pode ser:
<html>
<head>
<title>Título da página</title>
</head>
<body>
<h1>HTML</h1>
<hr size="2" width="100%" noshade>
</body>
</html>
TAG <UL> - LISTAS NÃO ORDENADAS
<html>
<head>
<title>Título da página</title>
</head>
<body>
<ul>
<li>Um item da lista</li>
<li>Um outro item da lista</li>
<li>O último item da lista</li>
</ul>
</body>
</html>
TAG <UL> - LISTA NÃO ORDENADA DE
VÁRIOS NÍVEIS
O símbolo que rotula o item é substituído a cada
mudança de nível.
TAG <UL> - LISTA NÃO ORDENADA DE
VÁRIOS NÍVEIS
<body>
<ul>
<li>Documentos avançados</li>
<li>Documentos básicos</li>
<ul>
<li>Formulários</li>
<ul>
<li>CGI</li>
</ul>
<li>Contadores</li>
<li>Relógios</li>
</ul>
<li>Outras informações</li>
</ul>
</body>
TAG <UL> - TYPE
Utilizando TYPE é possível especificar o tipo de
marcador a ser utilizado – square, circle e disc.
<body>
<ul type="circle">
<li>Documentos avançados</li>
<li>Documentos básicos</li>
<li>Outras informações</li>
</ul>
</body>
TAG <OL> - LISTA ORDENADA
<html>
<head>
<title>Título da página</title>
</head>
<body>
<ol>
<li>Primeiro item</li>
<li>Segundo item</li>
<li>Terceiro item</li>
</ol>
</body>
</html>
TAG <OL> - LISTA ORDENADA DE VÁRIOS
NÍVEIS
Este tipo de lista não apresenta uma numeração de
níveis (ex: 1.1, 1.2, 1.1.1.)
TAG <OL> - LISTA ORDENADA DE VÁRIOS
NÍVEIS
<body>
<ol>
<li>Documentos avançados</li>
<li>Documentos básicos</li>
<ol>
<li>Formolários</li>
<ol>
<li>CGI</li>
</ol>
<li>Contadores</li>
<li>Relógios</li>
</ol>
<li>Outras informações</li>
</ol>
</body>
TAG <OL> - TYPE
Com o TYPE na lista ordenada é possível iniciar a
numeração da lista.
<body>
<ol start="5" type="A">
<li>Mato Grosso</li>
<li>Espirito Santo</li>
<li>Paraná</li>
<li>São Paulo</li>
<li>Rio de Janeiro</li>
</ol>
</body>
TAGS <DL> <DT> E <DD> - LISTA DE
DEFINIÇÃO
O texto é formatado como uma lista de termos na
esquerda para direita.
TAGS <DL> <DT> E <DD> - LISTA DE
DEFINIÇÃO
<body>
<dl>
<dt>Internet
<dd>São milhões de
computadores interligados pelo protocolo de
internet TCP/IP que permitem o acesso a
informações e transferência de dados.
<dt>HTML
<dd>HiperText Markup
languagem
</dl>
</body>
VALOR DAS CORES
As cores em html são especificadas em padrões
alfanuméricos, no modo RGB, com base hexadecimal.
RGB
Red – vermelho
Green – verde
Blue – azul
Branco = #FFFFFF
Preto é a ausência de cores = #000000
EXERCÍCIO
Para compreender a utilização simultânea das
tags, vamos fazer uma página, utilizando todas as
tags e formatações de cores que vimos durante a
aula de hoje.
<dt> - Nível 1
<dd> - Nível 2
<dt> - Nível 1
<dd> - Nível 2