HTML Principios Básicos

HTML – AULA 1
Microlins - Web e Design – Capítulo 1
Rondonópolis 07 de Maio de 2011

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>

Essa TAG indica o começo e o final do
documento HTML.
- Instruções - códigos - que possuem
funções especificas.
- Códigos interpretados pelo navegador.

ESTRUTURA BÁSICA DO DOCUMENTO HTML
<html>
<head>
<title>Título da página</title>
</head>
<body>
Corpo da pagina
</body>
</html>
*página 3 da apostila

- Escrevam a estrutura utilizando o bloco de notas e
salvem com o nome de index.html

 <html></html> - indica o início e o fim da
estrutura HTML;
 <head></head> - indica onde começa e termina
o cabeçalho do documento html, que contém
informações específicas e que não são exibidas no
navegador, apesar de existirem e possuírem
enorme importância;
 <title></title> - contém o título da página;

 <body><body> - é o corpo do documento HTML,
é onde são inseridos todos os elementos – textos,
links, imagens - que queremos que apareçam na
nossa página.


- O navegador interpretou o código HTML e exibiu o layout da página.


- Para visualizar o código da página:
Clique com o botão direito do mouse > exibir código fonte.

AS TAGS HTML E SEUS ATRIBUTOS
O HTML possui tags além das
apresentadas na estrutura básica do
documento;
 Com as tags, podemos formatar a nossa
página, por exemplo, determinar fontes,
especificar cores e aplicar imagens no
fundo da página;
 Veremos a seguir algumas Tags e as
suas funções.

TAG <META>
 Ordena informações no cabeçalho da página <head>
e define o que ele contém;
 Fornece informações que podem ser utilizadas pelos
mecanismos de busca na web.

<meta http-equiv=“content-type”
content=“text/html; charset=utf-8”>

http-equiv: Faz uma correspondência com campos de
cabeçalho do protocolo HTTP. Uma ação é desencadeada
quando lidos pelo navegador;
content: Especifica meta-informação para que seja
associada com o valor especificado no http-equiv.

MAS O QUE É PROTOCOLO HTTP?

 • Hyper Text Transfer Protocol é o protocolo usado na
World Wide Web para a distribuição e recuperação de
informação.
 A troca de informações entre um browser e um servidor
Web é toda feita através desse protocolo, que foi criado
especificamente para a World Wide Web – www.

 Outro exemplo de <meta>

<meta http-equiv=“refresh” content=“10;
url=http://google.com”>

ATRIBUTOS DA TAGS <BODY>
 <body></body> - Corpo da nossa página;

<body bgcolor=“#000000” text=“#FFFFFF”>
Corpo da página
</body>

- bgcolor: especifica a cor do fundo da página
- – em hexadeciaml;

- text: especifica a cor do texto da página;

 link: especifica a cor do link do documento;
 vlink: especifica a cor do link visitado;
 alink: especifica a cor do link ativo;
 background: indica a cor ou o endereço de uma
imagem que será aplicada no fundo da página;
 bottommargin: especifica o tamanho da margem
inferior do documento;
 topmargin: especifica o tamanho da margem superior
do documento;
 leftmargin: especifica o tamanho da margem esquerda
do documento;
 rightmargin: especifica o tamanho da margem direita
do documento;

<body bgcolor=“#000000” text=“#FFFFFF”
link=“#3300cc” vlink=“#FF0000”
alink=“#0066CC” leftmargin=“15”
topmargin=“15” rightmargin=“12”
bottommargin=“12”>
Corpo da página
</body>


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>
</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>

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>
</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;

 style: os valores do estilo alteram as propriedades
da apresentação do texto, como cor, tamanho,
estilo do texto, etc.

<html>
<head>
</head>
<body>
<p align="center"
style="color:#006; font-family:Arial, sans-
serif; font-size:14px;">Primeiro
parágrafo</p>
<p>Segundo parágrafo</p>
</body>
</html>

TAG <BR> - QUEBRA DE LINHAS
 <br> Utilizado quando é necessário que se faça
uma quebra de linha em uma frase.

TAG <BR> - QUEBRA DE LINHAS
<html>
<head>
</head>
<body>
<p>Casa da colina <br> Av. 21 de
Junho, 66 <br> Bairro Centro <br>CEP:
16560-000</p>
</body>
</html>


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:

 left, center ou right;

 width: determina a largura da linha em pixels;

 noshade: especifica se a linha deve ser sólida.

TAG <HR> - LINHA HORIZONTAL

<html>
<head>
</head>
<body>
<h1>HTML</h1>
<hr size="2" width="100%" noshade>
</body>
</html>


TAG <UL> - LISTAS NÃO ORDENADAS

<html>
<head>
</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">
</ul>
</body>

TAG <OL> - LISTA ORDENADA

<html>
<head>
</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>
<ol>
<li>Formolários</li>
<ol>
<li>CGI</li>
</ol>
<li>Contadores</li>
<li>Relógios</li>
</ol>
</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.

 Para isso, vamos dividir por seções e criar a página
por partes.

 O Resultado deverá ser semelhante a este:

EXERCÍCIO
 Parte 1 – Bloco do H1:

 <h1> - Primeira aula de HTML;

 <p> - Conhecemos durante a aula de hoje a utilização
das TAGS básicas do HTML;

 <center> que envolverá e centralizará a tag <p>
abaixo;

 <p> com style="color:#c1e904; font-
size:14px;” - Mas vamos praticar para aprender;

 <hr> com size="2" width="100%" noshade

EXERCÍCIO
 Parte 2 – Bloco do H2:

 <h2> - Vimos como utilizar a tag BR para quebrar
linhas;

 <p> com style="color:#06F000;” -
Microlins<br>Curso de Web e Design<br>Horario:
<br>16:00 - 19:00 horas;


EXERCÍCIO
 Parte 3 - Bloco do H3

 <h3> - Hoje é sabado;

 <p> com style="color:#F93;“ - Conhecemos
também como utilizar as listas não ordenadas;

 <ul> com type="square“ que envolverá as tags
<li>

 <li> - Primeiro, segundo, terceiro, quarto, quinto;


EXERCÍCIO
 Parte 4 – Bloco do H4

 <center> que envolverá a tag <h4>;

 <h4> - E também aprendemos a utilizar as listas ordenadas;

 <p> com style="color:#090000“ - Quais são os
módulos do curso?

 <ol> com start="1" type="I“ e que envolverá as tags
<li>

 <li> - Corel Draw, Photoshop, Flash, HTML, Dreamweaver;


EXERCÍCIO

 <h5> - Vimos o que é uma lista de definição;

 <dl> que envolverá as tags <dt> e <dd>;

 <dt> - Nível 1
 <dd> - Nível 2
 <dt> - Nível 1
 <dd> - Nível 2


EXERCÍCIO

 <h6> - As cores são no padrão RGB;

 <center> que envolverá as tags <p>;

 <p> com style="color:#F00“ – RED;

 <p> com style="color:#060“ – GREEN;

 <p> com style="color:#00F“ – BLUE.

HTML Principios Básicos

Mais conteúdo relacionado

Mais procurados

Semelhante a HTML Principios Básicos

Último

HTML Principios Básicos