Beruflich Dokumente
Kultur Dokumente
Mayza de Oliveira
@mayzaoliveira
Mayza.deoliveira@gmail.com
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”>
*página 5 da apostila
*página 5 da apostila
IMPORTANTE: TOP, BOTTOM, LEFT E RIGHT
TAG <H> - NÍVEIS DE TÍTULOS
<h> Utilizada para formatar um título ou tópico de
uma seção.
Disponibiliza 6 níveis - <h1></h1> - <h6></h6>
TAG <H> - NÍVEIS DE TÍTULOS
<html>
<head>
<title>Título da página</title>
</head>
<body>
<h1>Nível 1</h1>
<h2>Nível 2</h2>
<h3>Nível 3</h3>
<h4>Nível 4</h4>
<h5>Nível 5</h5>
<h6>Nível 6</h6>
</body>
</html>
*página 6 da postila
TAG <CENTER> - CENTRALIZAR
<center> Utilizada para centralizar blocos de
texto, tabelas e etc.
TAG <CENTER> - CENTRALIZAR
<html>
<head>
<title> Título da página
</title>
</head>
<body>
<center><h3>Frase centralizada
na página</h3></center>
</body>
</html>
*página 6 da apostila
TAG <P> - PARÁGRAFO
<p> Delimita parágrafos e insere o espaço de uma
linha em branco entre eles.
TAG <P> - PARÁGRAFO
<html>
<head>
<title>Título da página</title>
</head>
<body>
<p>Primeiro parágrafo</p>
<p>Segundo parágrafo</p>
</body>
</html>
*página 6 da apostila
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;
*página 7 da apostila
TAG <HR> - LINHA HORIZONTAL
<hr> Cria uma linha horizontal no documento,
também utilizada para separar seções de
informação.
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>
*página 7 da apostila
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>
*página 7 da apostila
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>
*página 8 da apostila
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>
*página 8 da apostila
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>
*página 8 da apostila
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>
*página 8 da apostila
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>
*página 9 da apostila
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>
*página 9 da apostila
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
*página 9 da apostila
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