O documento fornece uma introdução sobre HTML, incluindo como criar um documento HTML, editores HTML, conceitos básicos e sintaxe de tags. Também descreve tags fundamentais como <html>, <head>, <body>, além de tags para formatação de texto, imagens, listas, tabelas, frames e links.
2. 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;
3. 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.
5. 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).
6. 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 ‘>’;
7. Introdução
◊ Sintaxe das TAGs
• 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;
8. Introdução
◊ Sintaxe das TAGs
• 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"/>
9. 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.
10. 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.
11. 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>
13. 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.
14. Na prática...
◊ Exemplo 2 - código
<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>
19. Formatação de textos
◊ 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.
22. 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.
25. 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.
28. Organização dos elementos
◊ 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}.
29. Organização dos elementos
◊ Principais atributos de <td> e <th>
• align, valign, bgcolor, background;
• colspan define a quantidade de colunas ocupadas pela
célula.
32. Organização dos elementos
◊ 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.
35. 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.
36. Estruturação da página
◊ 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.
42. Estruturação da página
◊ 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.
45. 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, *}.
50. 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.