Вы находитесь на странице: 1из 46
HTML – AULA 1 Microlins - Web e Design – Capítulo 1 Rondonópolis 07 de

HTML AULA 1

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

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

e Design – Capítulo 1 Rondonópolis 07 de Maio de 2011 Mayza de Oliveira @mayzaoliveira Mayza.deoliveira@gmail.com

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

interativas.

páginas

mais

dinâmicas

e

outras tecnologias, como o JavaScript e CSS proporcionando interativas. páginas mais dinâmicas e

CONHECENDO AS TAGS

O que é uma tag?

<html></html>

Essa TAG indica o começo e o final documento HTML.

- Instruções

funções especificas. - Códigos interpretados pelo navegador.

do

códigos

que

possuem

-

-

HTML. - Instruções funções especificas. - Códigos interpretados pelo navegador. do códigos que possuem - -

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

*página 3 da apostila - Escrevam a estrutura utilizando o bloco de notas e salvem com

ESTRUTURA BÁSICA DO DOCUMENTO HTML

<html></html>

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

da

indica

o

início

e

o

fim

-

nossa página.

os elementos – textos, links, imagens - que queremos que apareçam na da indica o início

ESTRUTURA BÁSICA DO DOCUMENTO HTML

E STRUTURA B ÁSICA DO D OCUMENTO HTML - O navegador interpretou o código HTML e

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

E STRUTURA B ÁSICA DO D OCUMENTO HTML - O navegador interpretou o código HTML e

ESTRUTURA BÁSICA DO DOCUMENTO HTML

- Para visualizar o código da página:
- Para visualizar o código da página:

Clique com o botão direito do mouse > exibir código fonte.

D OCUMENTO HTML - Para visualizar o código da página: Clique com o botão direito do

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.

fontes, especificar cores e aplicar imagens no fundo da página;  Veremos a seguir algumas Tags

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.

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=“refreshcontent=“10;

url=http://google.com”>

*página 5 da apostila

<meta http-equiv =“ refresh ” content =“10; url =http://google.com” > *página 5 da apostila

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;

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

ATRIBUTOS DA TAGS <BODY>

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;

o tamanho da margem esquerda do documento;  rightmargin: especifica o tamanho da margem direita do

ATRIBUTOS DA TAGS <BODY>

<body bgcolor=“#000000” text=“#FFFFFF”

link=“#3300cc” vlink=“#FF0000” alink=“#0066CC” leftmargin=“15” topmargin=“15” rightmargin=“12”

bottommargin=“12”>

Corpo da página </body>

*página 5 da apostila

=“15” rightmargin =“12” bottommargin =“12”> Corpo da página </body > *página 5 da apostila

IMPORTANTE: TOP, BOTTOM, LEFT E RIGHT

I MPORTANTE : 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>

ou tópico de uma seção.  Disponibiliza 6 níveis - <h1></h1> - <h6></h6>
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

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.

T AG <CENTER> - C ENTRALIZAR  <center> Utilizada para centralizar blocos de texto, tabelas e

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

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.

<P> - P ARÁGRAFO  <p> Delimita parágrafos e insere o espaço de uma linha em
<P> - P ARÁGRAFO  <p> Delimita parágrafos e insere o espaço de uma linha em

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

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;

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

estilo do texto, etc.

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

TAG <P> - PARÁGRAFO - ATRIBUTOS OPCIONAIS

T AG <P> - P ARÁGRAFO - A TRIBUTOS O PCIONAIS

TAG <P> - PARÁGRAFO - ATRIBUTOS OPCIONAIS

<html>

<head> <title>Título da página</title> </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>

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.

- Q UEBRA DE L INHAS  <br> Utilizado quando é necessário que se faça uma
- Q UEBRA DE L INHAS  <br> Utilizado quando é necessário que se faça uma

TAG <BR> - QUEBRA DE LINHAS

<html>

<head> <title>Título da página</title> </head>

<body>

<p>Casa da colina <br> Av. 21 de Junho, 66 <br> Bairro Centro <br>CEP:

16560-000</p>

</body>

</html>

*página 7 da apostila

Bairro Centro <br> CEP: 16560-000 </p> </body> </html> *página 7 da apostila

TAG <HR> - LINHA HORIZONTAL

<hr>

Cria uma linha horizontal no documento,

também

utilizada

informação.

para

separar

seções

de

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.

ou right ;  width : determina a largura da linha em pixels;  noshade :

TAG <HR> - LINHA HORIZONTAL

<h1>HTML</h1> </body>
<h1>HTML</h1>
</body>

<html>

<head> <title>Título da página</title> </head> <body>

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

</html>

*página 7 da apostila

<body> <hr size ="2" width ="100%" noshade> </html> *página 7 da apostila

TAG <UL> - LISTAS NÃO ORDENADAS

<head> <title>Título da página</title> </head> <body> <ul>
<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>

</html>

*página 7 da apostila

último item da lista</li> </ul> </body> <html> </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.

N ÃO O RDENADA DE V ÁRIOS N ÍVEIS  O símbolo que rotula o item
N ÃO O RDENADA DE V ÁRIOS N ÍVEIS  O símbolo que rotula o item

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

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

</li> <li> Outras informações </li> </ul> </body> *página 8 da apostila

TAG <OL> - LISTA ORDENADA

</head> <body> <ol> <li>Primeiro item</li> <li>Segundo
</head>
<body>
<ol>
<li>Primeiro item</li>
<li>Segundo item</li>
<li>Terceiro item</li>
</ol>
</body>

<html> <head> <title>Título da página</title>

</html>

*página 8 da apostila

<html> <head> <title> Título da página </title> </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.)

O RDENADA DE V ÁRIOS N ÍVEIS  Este tipo de lista não apresenta uma numeração
O RDENADA DE V ÁRIOS N ÍVEIS  Este tipo de lista não apresenta uma numeração

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

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

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.

E <DD> - L ISTA DE D EFINIÇÃO  O texto é formatado como uma lista
E <DD> - L ISTA DE D EFINIÇÃO  O texto é formatado como uma lista

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

</body>

</dl>

*página 9 da apostila

de dados. <dt> HTML <dd> HiperText Markup languagem </body> </dl> *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.

Red vermelho

Green verde

Blue azul

R G B

Branco = #FFFFFF

Preto é a ausência de cores = #000000

*página 9 da apostila

 Blue – azul R G B  Branco = #FFFFFF  Preto é a ausência

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:

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

EXERCÍCIO - RESULTADO

E XERCÍCIO - R ESULTADO

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

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

<hr> com size="4" width="100%" noshade

> Horario: < br> 16:00 - 19:00 horas;  < hr> com size="4" width="100%" noshade

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="squareque envolverá as tags

<li>

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

<hr> com size="6" width="100%" noshade

- Primeiro, segundo, terceiro, quarto, quinto ;  <hr> com size="6" width="100%" noshade

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;

<hr> com size="9" width="100%" noshade

- Corel Draw, Photoshop, Flash, HTML, Dreamweaver;  <hr> com size="9" width="100%" noshade

EXERCÍCIO

Parte 5 Bloco do H5

<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

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

- Nível 1  <dd> - Nível 2  <hr> com size="2" width="100%" noshade

EXERCÍCIO Parte 6 Bloco do H6

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

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