HTML - Dei-Isep

Propaganda

APROG
Algoritmia e Programação
HTML
Introdução
Nelson Freire (ISEP–DEI-APROG 2014/15)
1/15
HTML
Sumário Geral
 O que é o HTML?
 Documento HTML
 Elemento HTML
 Estrutura Básica de Documento HTML
 Elementos
 Títulos (cabeçalhos)
 Parágrafos
 Comentários
 Imagens
 Links
 Listas
 Tabelas
 Entidade Espaço Sem Quebras
 Validação de Documento HTML
Nelson Freire (ISEP–DEI-APROG 2014/15)
2/15
O que é o HTML?
HTML
 Significado de HTML
 HyperText Markup Language
 Linguagem de anotação de hipertexto
// texto com hiperligações
 Usada nas páginas WEB
 Não é linguagem de programação
 Objetivo
 Descrever o conteúdo de documentos para serem processados automaticamente
 P. ex., por Web Browsers (Internet Explorer, Firefox, Safari, Chrome, etc.)
 Descrição de conteúdo do documento (elementos do documento)
 Feita com tags
 Tag = nome entre parentesis angulares : <nome_tag>, </nome_tag>, <nome_tag/>
 Exemplos
Tag
Tipo
de
Elementos de Documento
Elemento HTML
(tag inicial + Elemento de Documento + tag final)
<h1>
Título de Nível 1 //secção
<h1>Isto é um título de nível 1</h1>
<h2>
Título de Nível 2 //secção
<h2>Isto é um título de nível 2</h2>
<p>
Parágrafo
<p>Isto é um parágrafo.</p>
Nelson Freire (ISEP–DEI-APROG 2014/15)
3/15
Documento HTML
HTML
 Ficheiro de texto
 Extensão html
 Exemplo
nome_do_ficheiro.html
 Escrito em HTML
 Formado por elementos HTML
 Podem ser encaixados
Nelson Freire (ISEP–DEI-APROG 2014/15)
4/15
Elemento HTML
HTML
 Em Geral
 Descreve um Elemento de Documento
 Exemplos: título de secção, parágrafo, tabela, imagem, etc
 Formato
 Elemento com conteúdo
 Sem atributos: <nome_tag> conteúdo </nome_tag>
// inclui tags: inicial e final
 Com atributos: <nome_tag atributo1= "valor1" atributo2="valor2"> conteúdo </nome_tag>
 Exemplo: <p> Isto é um parágrafo </p>
 Exemplo: <table border=“1” > … </table>
Atributos
 Fornecem informação adicional do
elemento
 Elemento vazio
 Sem atributos: <nome_tag>
 Especificados na tag inicial
 Com atributos: <nome_tag atributo= "valor">
 Descritos pelo par nome/valor
 Exemplo: <br>
// line break
 Exemplo: <meta charset=“UTF-8”>
Nelson Freire (ISEP–DEI-APROG 2014/15)
 Formato
 nome="valor"
5/15
HTML
Estrutura Básica de Documento HTML
 Elemento <!DOCTYPE html>
// descreve documento do tipo html
 Elemento html
 Delimitado pelas tags <html> ... </html>
//tag inicial e final ... ou abertura e fecho
 Descreve documento HTML
 Contém
 Elemento head
// descreve definições do documento. Ex: título, tabela de carateres, ...
 Elemento body
// descreve conteúdo do documento (visualizado)
 Elemento meta
 Define metadados (informação sobre dados)
 Exemplo – codificação dos carateres
 HTML 5:
<meta charset="UTF-8">
 Elemento <!– Conteúdo do documento a visualizar--> // descreve comentário. Ignorado por processador
Nelson Freire (ISEP–DEI-APROG 2014/15)
6/15
HTML
Elementos de Títulos (Cabeçalhos)
 Títulos
 6 níveis
 Definidos
 Tags de <h1> até <h6>
 Exemplos
Web Browser
Mostra
com tamanhos
diferentes
Nelson Freire (ISEP–DEI-APROG 2014/15)
7/15
Elementos de Texto
HTML
 Paragrafo
 Definido com tag <p>
 Exemplo
 Mudança de Linha
 Definido com tag <br/>
 Elemento vazio (sem conteúdo)
 Fechado na tag inicial
// termina com … barra
 Linha Horizontal
 Definido com tag <hr/>
 Interesse
 Separar conteúdo
Nelson Freire (ISEP–DEI-APROG 2014/15)
8/15
Elementos de Comentários
HTML
 Interesse
 Tornar mais legível documento HTML
 Processador HTML (p.ex., Web Browser)
 Ignora
 Não mostra
 Exemplo
Nelson Freire (ISEP–DEI-APROG 2014/15)
9/15
Elementos de Imagens
HTML
 Imagem
 Definido com tag <img>
 Ficheiro
 Especificado no atributo src
 Dimensão
 Especificado pelos atributos
 width
 height
 Exemplo
Nelson Freire (ISEP–DEI-APROG 2014/15)
10/15
Elementos de Links
HTML
 Link
 Definido com tag <a>
 Endereço do link
 Especificado no atributo href
 Exemplos
 Link com texto
 Link com imagem
Nelson Freire (ISEP–DEI-APROG 2014/15)
11/15
Elementos de Listas
HTML
 Lista Não Ordenada
 Definido com tag <ul>
 Itens
 Definidos com tag <li>
 Marcados com bullet
 Lista Ordenada
 Definida com tag <ol>
 Itens
 Definidos com tag <li>
 Lista de Definições
 Definida com tag <dl>
 Itens são pares termo/definição
 Termo
tag <dt>
 Definição tag <dd>
Nelson Freire (ISEP–DEI-APROG 2014/15)
12/15
Elementos de Tabelas
HTML
 Tabela
 Definido com tag <table>
 Atributo border
 Para mostrar limites das células
 Dividida em linhas
 Linha
 Definida com tag <tr>
 Dividida em células
 Tipos
 Cabeçalhos
 Dados
 Célula de Cabeçalho
 Definida com tag <th>
 Para conter cabeçalhos da tabela
 Célula de Dados
 Definida com tag <td>
 Pode conter: texto, link, imagem, etc.
Nelson Freire (ISEP–DEI-APROG 2014/15)
13/15
HTML
Entidade Espaço Sem Quebras (&nbsp;)
 Representa
 Espaço sem quebras
// tradução de non-breaking space
 Interesse
 Obrigar browser a não quebrar a linha de texto no ponto ocupado pelo &nbsp;
 Exemplos de Uso
 Texto sem quebra de linha
 Indentação de texto
Nelson Freire (ISEP–DEI-APROG 2014/15)
14/15
HTML
Validação de Documento HTML
 Interesse
 Garantir visualização pretendida
 Validação
 Verificar a sintaxe das tags
 Ferramenta (p. ex.)
 http://validator.w3.org/
Nelson Freire (ISEP–DEI-APROG 2014/15)
HTML é especificado pelo W3C
 http://www.w3.org/
 Versão mais recente
 HTML 5
15/15