Aula

Introdução
◊ Criando um documento HTML
•
•
•
•

Menu Iniciar > Programas > Acessórios > Bloco de notas;
No Bloco de notas: Arquivo > Salvar como...;
Alterar o tipo de arquivo para: Todos os arquivos;
Salvar o arquivo com extensão .html;

Edição de Documentos HTML
Existem editores HTML chamados
WYSIWYG (what you see is what you get
–
o que você ve é o que você tem). São
ambientes de edição com um resultado
final das marcações (pois o resultado final
depende do browser usado para visitar a
página). Alguns bastante conhecidos são
o Dreamweaver e o Nvu.

Edição de Documentos HTML
Além dos outros editores especificos para
HTML. Editores de texto bastante
utilizados,como o Word,entre outros,
permitem a exportação de seus
documentos próprios para o formato
HTML (Menu, Salvar como,Salvar_como
Tipo).

Introdução
◊ Conceitos básicos sobre HTML
• Sigla para HyperText Markup Language (Linguagem de
Marcação de Hipertexto);
• HTML é a linguagem utilizada na comunicação entre o
desenvolvedor de uma página WEB e o navegador (Internet
Explorer, Mozilla Firefox, Safari, ...);
• A HTML utiliza identificadores que são chamados de TAG.
Essas TAGs indicam ao navegador o elemento a ser exibido;
• Cada TAG apresenta uma lista de atributos que podem
definir as propriedades dos elementos como aparência,
tamanho, posição, cores, fontes, etc.

◊ Sintaxe das TAGs
• As TAGs são palavras definidas, em inglês, e são escritas
entre os sinais ‘<’ e ‘>’;

Introdução
• As TAGs são palavras definidas, em inglês, e são escritas
entre os sinais ‘<’ e ‘>’;
• As TAGs devem ser abertas e fechadas para que o
navegador saiba de onde e até onde está definido o elemento.
Para se fechar uma TAG é utilizado o sinal ‘/’. Algumas
poucas TAGs não necessitam ser fechadas, sendo
recomendado a inserção do sinal ‘/’ na TAG de abertura;
• Exemplos:
<tag> ... </tag>
<tag/>

- TAG aberta e fechada;
- TAG que não precisa ser fechada;

Introdução
• Os atributos de uma TAG são inseridos dentro da TAG de
abertura e seus valores devem estar entre aspas
simples ou dupla.
• Exemplos:
<tag atr1='prop1'> ... </tag>
<tag atr1='prop1' atr2="prop2"/>

TAGs fundamentais
◊ <html> e </html>
• Usadas em toda página WEB, são a primeira e a última TAGs
a serem inseridas num documento HTML. Entre elas fica
escrita toda a página.

◊ <head> e </head>
• head (cabeça) é uma TAG de cabeçalho. Nela são inseridas
as primeiras configurações da página a serem utilizadas
durante a interpretação feita pelo navegador. Algumas dessas
configurações são as folhas de estilo, CSS (Cascading Style
Sheets), o título da página e scripts de execução;
• <title> e </title>  title (título) é a TAG que define o
título da página e fica inserida dentro de head.

TAGs fundamentais
◊ <body> e </body>
• body (corpo) é a TAG onde ficam escritos todos os
elementos visíveis da página: textos, links, imagens,
formulários e etc.

◊ Principais atributos de <body>
• bgcolor
 conjunto de cores: {blue, red, yellow, green, ...};
 utilizado para definir a cor de fundo; as cores também
podem ser representadas com codificação hexadecimal;
o número de cores distintas disponíveis utilizando o
sistema RGB (Reb-Green-Blue) de cores (sistema mais
simples) supera 16mi.
• background
 seleciona uma imagem para plano de fundo;
 deve ser inserido o endereço da imagem.

Na prática...
◊ Exemplo 1 - código
<html>
<head>
<title>Este é o título</title>
</head>
<body bgcolor='orange'>
Olá.

Eu faço parte do corpo da página.
</body>
</html>

Na prática...
◊ Exemplo 1 - página

Formatação de textos
◊ Quebra de linha e parágrafo
• <br>
• <p> e </p>

 quebra de linha;
 parágrafo.

◊ Principal atributo de <p>
• align
 conjunto de valores: {center, left, right, justify};
 utilizado para alinhar um texto;
 caso não seja definido, o valor padrão é left.

Na prática...
<body>
Um parágrafo com quebra de linhas alinhado ao
centro:<p align='center'>"Quem crer pudera, tempo em
fora, no meu verso,<br/>Se o vosso alto valor eu
proclamasse nele?<br/>Então – e sabe-o o céu – como
em tumba, ao inverso,<br/>Vossa vida aí oculto e o
mais que em vós excele.<br/>Dissesse eu o que minha
alma em vossos olhos sente,<br/>Vossas graças, fiel,
todas enumerasse,<br/>E o futuro diria: Este poeta
mente;<br/>Beleza assim não há da terra sobre a
face".</p>
</body>

Na prática...

◊

Títulos
•
•
•
•
•
•

<h1>
<h2>
<h3>
<h4>
<h5>
<h6>

e
e
e
e
e
e

</h1>
</h2>
</h3>
</h4>
</h5>
</h6>

◊ Principal atributo
• align.

 título maior;

 título menor.

Na prática...
<body>
<h1>Título 1 (esquerda)</h1>
<h2 align='left'>Título 2 (esquerda)</h2>
<h3 align='center'>Título 3 (centro)</h3>
<h4 align='center'>Título 4 (centro)</h4>
<h5 align='right'>Título 5 (direita)</h5>
<h6 align='right'>Título 6 (direita)</h6>
</body>

Na prática...

◊ Formatações gerais
•
•
•
•

<b> e </b>
<i> e </i>
<u> e </u>
<s> e </s>

• <font> e </font>






negrito;
itálico;
sublinhado;
riscado;

 define propriedades da fonte como,
tamanho, cor, fundo.

◊ Principais atributos de <font>
• size

 conjunto de tamanhos: {1, ..., 7}, sendo 1 o
menor tamanho;
 utilizado para definir o tamanho do texto;

• color

 mesmo conjunto de cores do atributo bgcolor;
 utilizado para definir a cor da letra.

Na prática...
<body>
<h4>Formatações gerais:</h4>
Negrito: <b>texto</b><br/>
Itálico: <i>texto</i><br/>
Sublinhado: <u>texto</u><br/>
Riscado: <s>texto</s><br>
<font color='red' size='2'>Vermelho tamanho
2</font><br/>
<font color='#0000FF' size='5'>Azul tamanho 5</font>
</body>

Na prática...

Trabalhando com figuras
◊

Inserção

• <img>  insere uma figura.

◊ Principais atributos
•
•
•
•
•

align;
src
border
height
width






indica onde está a imagem;
define a espessura da borda;
define a altura;
define a largura.

Na prática...
<body background='fundo_exemplo.jpg'>
<img src='imagem/sol.jpg' border='2px'/>
<img src='imagem/sol.jpg' height='100px'
width='200px;'/>
<img src='imagem/sol.jpg' height='150px'/>
</body>

Na prática...

Organização dos elementos
◊ Listas

• <ul> e </ul>  lista não-ordenada (Unordered List);
• <ol> e </ol>  lista ordenada (Ordered List);
• <li> e </li>  item da lista (List Item);
 deve ser utilizado dentro da ol ou da ul.

◊ Principal atributo das listas
• type
 conjunto de tipos: {1, a, A, i, I, circle, disc, square};
 utilizado para definir o marcador a ser utilizado na lista;
 a TAG ol utiliza apenas os valores {1, a, A, i, I};
 a TAG ul utiliza apenas os valores {circle, disc,
square};
 a TAG li utiliza qualquer um dos tipos apresentados.
 pode-se usar o type como none para que não mostre
nenhum marcador.

Na prática...
<ol type='i'>
<li>Cores:
<ul type='square'>
<li>Vermelho</li>
<li>Verde</li>
<li>Azul</li>
</ul>
</li>
<li>Símbolos
<ul>
<li>Quadrado</li>
<li type='disc'>Triângulo</li>
<li>Ponto</li>
</ul>
</li>
</ol>

Na prática...

◊ Tabelas
•
•
•
•

<table> e </table>
<tr> e </tr>
<td> e </td>
<th> e </th>






tabela;
linha da tabela (Table Row);
célula (Table Data Cell);
célula cabeçalho (Table Header
Cell).

◊ Principais atributos de <table>
• border, width, bgcolor, background.

◊ Principais atributos de <tr>
• align, bgcolor;
• valign  alinha o conteúdo do elemento verticalmente;
 conjunto de valores: {bottom, middle,
baseline, top}.

◊ Principais atributos de <td> e <th>
• align, valign, bgcolor, background;
• colspan  define a quantidade de colunas ocupadas pela
célula.

Na prática...
<table border='1px'>
<tr>
<th colspan='3'>Dados</th>
</tr>
<tr>
<th>Nome</th>
<th>Sobrenome</th>
<th>Idade</th>
</tr>
<tr>
<td>Fernanda</td>
<td>Diniz Santana</td>
<td>22</td>
</tr>
</table>

Na prática...

◊ Atributos de espaçamento de <table>
• cellspacing
• cellpadding

 define o espaço entre as células de uma
tabela;
 define o espaço entre o conteúdo de uma
célula e sua borda.

Na prática...
<table border='1px' cellspacing='60px'
cellpadding='20px'>
<tr>
<td>Célula 1</td>
<td>Célula 2</td>
</tr>
<tr>
<td>Célula 3</td>
<td>Célula 4</td>
</tr>
</table>

Na prática...

Estruturação da página
◊ Frames
• <frameset> e </frameset>
 define a disposição dos frames (quadros) na página;
* Não pode ser usado junto com a tag body;
• <frame> e </frame>
 cria um frame;
 deve ser usado dentro da tag frameset.

◊ Principais atributos de <frameset>
• border;
• cols  define quantas colunas conterão frames, informando
suas larguras respectivamente.

◊ Principais atributos de <frame>
• src;
• name

 define um nome para o elemento;

• frameborder

 define se o frame terá borda ou não;
 conjunto de valores: {no, yes};

• noresize

 matém fixo o tamanho do frame.

Na prática...
<html>
<head>
<title>Título</title>
</head>
<frameset cols='30%,55%,15%' border='5px'>
<frame name='frame1' src='pagina1.html'
frameborder='no' noresize/>
<frame name='frame2' src='pagina2.html'
frameborder='no'/>
<frame name='frame3' src='pagina3.html'/>
</frameset>
</html>

Na prática...
◊ Exemplo 9 – código de pagina1.html
<html>
<head>
</head>
<body bgcolor='orange'>
Página 1<br/>
Laranja
</body>
</html>

Na prática...
<html>
<head>
</head>
<body bgcolor='blue'>
Página 2<br/>
Azul
</body>
</html>

Na prática...
<html>
<head>
</head>
<body bgcolor='yellow'>
Página 3<br/>
Amarelo
</body>
</html>

Na prática...

◊ Frames
• <iframe> e </iframe>
 tag que permite inserir frames dentro da tag body;
 uma vez que não se pode utilizar frameset junto com
body deve-se usar iframe quando precisar inserir
algum frame em body.

◊ Principais atributos de <iframe>
• frameborder, height, name, src, width.

Na prática...
◊ Exemplo 10 – código
<body>
<table width='700px' border='1px'>
<tr height='300px'>
<td width='150px' valign='top'>
Fora do frame!
</td>
<td>
<iframe src='pagina1.html' width='100%'
height='100%' frameborder='no'></iframe>
</td>
</tr>
</table>
</body>

Na prática...

Interatividade da página
◊ Link
• <a> e </a>
 tag que permite inserir links ná página;
 com esta tag torna-se possível a navegação em uma
página web.

◊ Principais atributos de <a>
• href
• target

 indica a página ou arquivo a ser aberto;
 indica aonde a página ou arquivo deve ser
aberto;
 conjunto de valores: {_self, _blank, *}.

Na prática...
◊ Exemplo 11 – código
<table width='700px' border='1px'>
<tr height='300px'>
<td width='150px' valign='top'>
<a href='pagina1.html' target='meuFrame'>Página
1</a><br/>
<a href='paginaLink.html'
target='meuFrame'>Página com link</a>
</td>
<td>
<iframe name='meuFrame' src='pagina1.html'
width='100%' height='100%'
frameborder='no'></iframe>
</td>
</tr>
</table>

Na prática...
◊ Exemplo 11 – código de paginaLink.html
<html>
<head>
</head>
<body>
<a href='pagina3.html' target='_self'>
Abrir página 3
</a>
</body>
</html>

Na prática...

Definição
O HTML5 é a nova versão do HTML4
Esta nova versão traz consigo importantes mudanças
quanto ao papel do HTML no mundo da Web, através de
novas funcionalidades como semântica e acessibilidade.
Com novos recursos, antes só possíveis por meio de
outras tecnologias. Sua essência tem sido melhorar a
linguagem com o suporte para as mais recentes
multimídias, enquanto a mantém facilmente legível por
seres humanos e consistentemente compreendida por
computadores e outros dispositivos (navegadores,
parsers, etc). O HTML5 será o novo padrão para HTML,
XHTML, e HTML DOM.

Referência

http://www.w3c.br/pub/Cursos/CursoHTML5/htm
http://www.linhadecodigo.com.br/artigo/81/ht
ml-b%C3%A1sico.aspx
http://www.criarweb.com/html/
http://pt-br.html.net/tutorials/html/
http://codigofonte.uol.com.br/videos/htmlxhtml/
http://www.extremaonline.com/html.html

Aula

Mais conteúdo relacionado

Mais procurados

Destaque

Semelhante a Aula

Aula