Desenvolvimento FRONT-END I
HTML
Professor: Charles Bastos
Slide 02
charlesbastos@souunisuam.com.br
Página: 1
Sumário
❑ HTML
❑ Árvore DOM
Página: 2
1. HTML
❑ O QUE É ?
É a abreviatura de "HyperText Mark-up Language".
O HTML é uma linguagem para publicação de conteúdo (texto, imagem, vídeo, áudio e etc)
na Web. Estes elementos conectados formam uma grande rede de informação. Eles não
estão conectados linearmente como se fossem textos de um livro, onde um assunto é
ligado ao outro seguidamente. A conexão feita em um hipertexto é algo imprevisto que
permite a comunicação de dados, organizando conhecimentos e guardando informações
relacionadas
Página: 3
1. HTML
❑ VERSÕES
Página: 4
1. HTML
❑ ARQUIVOS HTML
▪ Todo arquivo com extensão .html é um arquivo que possui conteúdo html.
▪ É possível misturar conteúdo html com conteúdos de outras linguagens de programação.
O PHP e o JSP, por exemplo, fazem isso. Neste caso, a extensão do arquivo não é mais
html.
Página: 5
1. HTML
❑ TAGS
Tags são rótulos usados para informar ao navegador como deve ser apresentado o website.
Todas as tags têm o mesmo formato: começam com um sinal de menor "<" e acabam com
um sinal de maior ">".
Genericamente falando, existem dois tipos de tags - tags de abertura: <comando> e tags de
fechamento: </comando>. A diferença entre elas é que na tag de fechamento existe um
barra "/".
Página: 6
1. HTML
❑ EXEMPLO DE TAG
Página: 7
1. HTML
❑ ESTRUTURA DE DOCUMENTOS HTML
Página: 8
1. HTML
❑ EXEMPLO:
Página: 9
1. HTML
❑ PRINCIPAIS TAGS DO HTML 4.01
formulário subtítulo conteúdo tabela
estrutura
<form> <h1> <img> <table>
<html>
<input> <h2> <a href> <tr>
<head>
<textarea> <h3> <script> <th>
<body>
<h4> <pre> <td>
<h5> <frameset>
<h6> <frame>
lista separadores formatação agrupamento
<iframe>
<ul> <hr> <em> outros <link> <div>
<ol> <br> <strong> <meta> <meta> <span>
<li> <p> <title> <b>
<font>
Página: 10
1. HTML
❑ PROPRIEDADES DE ELEMENTOS
✔ Páginas HTML são constituídas de elementos <tag> e cada elemento possui um
conjunto de propriedades, conforme mostrado em vermelho a seguir.
<a href=“http://www.atletico.com.br”> Site do Atlético-MG</a>
Propriedade Valor da propriedade
✔ Os valores da propriedade devem ser delimitados por aspas:“ ou apóstrofos:’
Página: 11
1. HTML
❑ PROPRIEDADES DE ELEMENTOS
✔ Outras propriedades de exemplo:
<a href=“http://www.atletico.com.br”> Site do Atlético-MG</a>
<font size=“12px” color=“black”>
<body bgcolor=“#fff667”></body>
<table border=“1”></table>
✔ OBSERVAÇÃO: Recursos de formatação de layout atualmente ficam em arquivos
CSS.
Página: 12
1. HTML
❑ <!DOCTYPE>
▪ O Doctype determina o tipo do documento html.
▪ Ele deve vir antes da tag <html>
▪ Ele é expresso através de DTDs (Document Type Definition)
▪ O HTML 4.01 especifica três tipos de documento: Strict, Transitional e Frameset.
Página: 13
1. HTML
❑ <!DOCTYPE>
▪ DTD HTML Strict
É usada em conjunto com estilos CSS ("Cascading Style Sheets"). Usa-se do seguinte modo:
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN“ "http://www.w3.org/TR/html4/strict.dtd">
▪ DTD HTML Transitional
Esta DTD deve ser usada quando somos obrigados a manter a compatibilidade com
browsers que não suportam os estilos CSS na perfeição.
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
Página: 14
1. HTML
❑ <!DOCTYPE>
▪ DTD HTML Frameset
A DTD HTML Frameset deve ser usada quando o documento contém molduras ("frames").
Esta DTD consiste na DTD Transitional mais os elementos relacionados com as molduras
("frames"). Usa-se do seguinte modo:
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Frameset//EN" "http://www.w3.org/TR/html4/frameset.dtd">
Página: 15
1. HTML
❑ TAG <html>
▪ É o elemento raiz de um documento HTML
Página: 16
1. HTML
❑ TAG <head>
▪ Cabeçalho de um documento HTML
▪ É carregado antes do corpo do documento
▪ Onde normalmente ficam informações de metadados <meta>, título da página <title> e
arquivos importados como css e js.
Página: 17
1. HTML
❑ TAG <title>
▪ Contém o título da página.
▪ É um elemento da tag <head>
<title>Primeira Página</title>
Página: 18
1. HTML
❑ TAG <meta>
▪ Descreve metadados de uma página html.
<meta http-equiv="content-type" content="text/html;charset=UTF-8">
<meta name="description" content="Free Web tutorials">
<meta name="keywords" content="HTML,CSS,XML,JavaScript">
<meta name="author" content="Marcelo Loutfi">
Página: 19
1. HTML
❑ TAG <body>
▪ Descreve o corpo de uma página html.
▪ Todas as tags de estrutura da página devem ser criadas no escopo da tag <body>
Página: 20
1. HTML
❑ PROPRIEDADES DA TAG <body>
▪ Através de atributos de <BODY>, podemos definir cores para os textos, links e para o
fundo das páginas, bem como uma imagem de fundo (marca d’água):
▪ <BODY BGCOLOR="#rrggbb" TEXT="#rrggbb" LINK="#rrggbb“ ALINK="#rrggbb“
VLINK="#rrggbb" BACKGROUND="URL">
Página: 21
1. HTML
❑ PROPRIEDADES DA TAG <body>
BGCOLOR
cor de fundo (quando não é indicada, o browser irá mostrar uma cor
padrão, geralmente o cinza ou branco; alguns editores poderão
estabelecer o branco para o fundo da página)
TEXT
cor dos textos da página (padrão: preto)
LINK
cor dos links (padrão: azul)
ALINK
cor dos links, quando acionados (padrão: vermelho)
VLINK
cor dos links, depois de visitados (padrão: azul escuro ou roxo)
Página: 22
1. HTML
❑ TÍTULOS E SUBTÍTULOS
Página: 23
1. HTML
❑ SEPARADORES
▪ <p>: Parágrafo
▪ <br>: Quebra de linha
▪ <hr>: Linha horizontal
Página: 24
1. HTML
❑ LISTAS NÃO NUMERADAS
▪ São equivalentes às listas com marcadores do MS Word:
Página: 25
1. HTML
❑ LISTAS NUMERADAS
▪ A numeração aparece antes do texto conforme mostrado após execução do código
abaixo:
Página: 26
1. HTML
❑ ÂNCORAS <a>
▪ Com HTML é possível fazermos ligações de uma região de texto (ou imagem) a um outro
documento. Nestas páginas, temos visto exemplos dessas ligações: o browser destaca
essas regiões e imagens do texto, indicando que são ligações de hipertexto - também
chamadas hypertext links ou hiperlinks ou simplesmente links.
Página: 27
1. HTML
❑ ÂNCORAS <a>
▪ arq_destino: é o URL do documento de destino;
▪ âncora: é o texto ou imagem que servirá de ligação hipertexto do documento sendo
apresentado para o documento de destino.
Página: 28
1. HTML
❑ IMAGENS <img>
▪ A tag <IMG> insere imagens que são apresentadas junto com os textos. Um atributo SRC
deve estar presente, da seguinte forma:
Página: 29
1. HTML
❑ IMPORTAÇÃO DE SCRIPTS <script>
▪ A tag <SCRIPT> é utilizada para incluir uma linguagem de SCRIPT junto ao conteúdo html,
exemplo:
HTML 4.01
HTML 5
Página: 30
1. HTML
❑ TEXTOS PRÉ FORMATADOS <pre>
▪ A tag <PRE> é utilizada para incluir textos pré-formatados exemplo:
Página: 31
1. HTML
❑ FRAME E FRAMESET (curiosidade, não será cobrado)
▪ A tag <FRAMESET> e <FRAME> são usadas juntas:
❑ O uso de frames permite que diferentes arquivos HTML componham a mesma página, permitindo
dividir o espaço da janela do navegador em colunas e/ou linhas e controlar o seu tamanho,
determinando quantas serão as subdivisões e qual será sua distribuição na tela.
❑ É importante ressaltar que cada uma destas "partes da tela" é ocupada por arquivos diferentes,
totalmente independentes.
❑ Portanto, o uso dos frames possibilita apresentar mais de uma página em cada tela. Por exemplo, um
índice em uma parte pequena dela e os textos relacionados ao índice em outra parte. (Ex: Muitas Dicas,
repare que há uma coluna à esquerda, independente do conteúdo à direita).
Página: 32
1. HTML
❑ FRAME E FRAMESET (curiosidade, não será cobrado)
Exemplos de Frames:
Página: 33
1. HTML
❑ FRAME E FRAMESET (curiosidade, não será cobrado)
Geralmente uma página com frames é constituída de dois ou três elementos básicos:
❑ A página cujo nome é frameset. Ela contém os tags que especificam como as diferentes páginas
aparecerão dentro da janela do navegador; ou seja,tem atributos que definem a divisão do espaço da
janela do browser em colunas ou linhas.
❑ As páginas internas normais, denominadas frames, que aparecerão de acordo com as instruções
contidas no código do frameset.
Cada uma destas marcações - <frameset> e <frame> - aceita extensões, valores e atributos.
Página: 34
1. HTML
❑ FRAME E FRAMESET (curiosidade, não será cobrado)
▪ Características de um Frame:
A página frameset é um arquivo HTML que, ao invés de conter os tags <BODY> e
</BODY> os quais indicam o conteúdo do documento, possui os tags <FRAMESET> e
</FRAMESET>.
Página: 35
1. HTML
❑ FRAME E FRAMESET (curiosidade, não será cobrado)
Página: 36
1. HTML
❑ FRAME E FRAMESET (curiosidade, não será cobrado)
IMPORTANTE: Essas tags foram descontinuadas no HTML 5
Página: 37
1. HTML
❑ FRAMES INTERNOS <iframe>
▪ A tag <IFRAME> é utilizada para definir quadros que podem ser adicionados no conteúdo
de uma página HTML, exibindo o conteúdo de uma outra página.
▪ Exemplo:
Página: 38
1. HTML
❑ LIGANDO RECURSOS EXTERNOS <link>
▪ A tag <LINK> é utilizada para relacionar a página html a recursos externos.
▪ Exemplo:
Página: 39
1. HTML
❑ TABELA <table>
▪ Para começar a criar tabelas utilizamos a tag <TABLE>:
▪ Dentro dessa tag colocamos as outras tags, os textos, imagens entre outros, ou seja,
utilizamos as tags
▪ <TR> para definir linha na tabela e as tags
▪ <TD> para definir a coluna da mesma.
Página: 40
1. HTML
❑ TABELA <table>
▪ Exemplo:
Página: 41
1. HTML
❑ TABELA <table>
▪ Propriedades usadas para expandir a tabela:
▪ rowspan: expande a linha
▪ colspan: expande a coluna
Página: 42
1. HTML
❑ TABELA <table>
▪ Exemplo com colspan:
Página: 43
1. HTML
❑ TABELA <table>
▪ Exemplo com rowspan:
Página: 44
2. Árvore DOM
❑ ÁRVORE DOM:
✔ Uma página HTML possui o formato de uma árvore, conforme mostrado a seguir:
• Essa árvore gerada é chamada de
DOM (Document Object Model).
Ela pode ter elementos e
propriedades manipulados.
Página: 45
EXERCÍCIO
1 – Refaça os exercícios propostos pelo professor em sala de aula
Página: 46
Dúvidas
