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

[email protected]

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”> *página 5 da apostila

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


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> *página 8 da apostila

TAG <OL> - LISTA ORDENADA

<html>

<head>


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



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


VALOR DAS CORES

As cores em html são especificadas em padrões

alfanuméricos, no modo RGB, com base hexadecimal.

R G B 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 - RESULTADO

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

Technology

Transcript of HTML Principios Básicos