HTML - Introdução

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

HTML O que é o 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
Tipo
Elemento HTML
Tag de
(tag inicial + Elemento de Documento + tag final)
Elementos de Documento
<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>

HTML Documento HTML
 Ficheiro de texto
 Extensão html
 Exemplo
nome_do_ficheiro.html
 Escrito em HTML
 Formado por elementos HTML
 Podem ser encaixados

HTML Elemento 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 vazio elemento
 Sem atributos: <nome_tag>  Especificados na tag inicial
 Com atributos: <nome_tag atributo= "valor">  Descritos pelo par nome/valor
 Formato
 Exemplo: <br> // line break
 nome="valor"
 Exemplo: <meta charset=“UTF-8”>

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

HTML Elementos de Texto
 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

HTML Elementos de Comentários
 Interesse
 Tornar mais legível documento HTML
 Processador HTML (p.ex., Web Browser)
 Ignora
 Não mostra
 Exemplo

HTML Elementos de Imagens
 Imagem
 Definido com tag <img>
 Ficheiro
 Especificado no atributo src
 Dimensão
 Especificado pelos atributos
 width
 height
 Exemplo

HTML Elementos de Links
 Link
 Definido com tag <a>
 Endereço do link
 Especificado no atributo href
 Exemplos
 Link com texto
 Link com imagem

HTML Elementos de Listas
 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>

HTML Elementos de Tabelas
 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.

HTML Entidade Espaço Sem Quebras ( )
 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
 Exemplos de Uso
 Texto sem quebra de linha
 Indentação de texto

HTML Validação de Documento HTML
 Interesse
 Garantir visualização pretendida HTML é especificado pelo W3C
 Validação  http://www.w3.org/
 Verificar a sintaxe das tags  Versão mais recente
 Ferramenta (p. ex.)  HTML 5
 http://validator.w3.org/

HTML - Introdução

Enviado por

Dados do documento

Direitos autorais

Formatos disponíveis

Compartilhar este documento

Compartilhar ou incorporar documento

Opções de compartilhamento

Você considera este documento útil?

Este conteúdo é inapropriado?

Direitos autorais:

Formatos disponíveis

HTML - Introdução

Enviado por

Direitos autorais:

Formatos disponíveis

APROG Algoritmia e Programação

Nelson Freire (ISEP–DEI-APROG 2014/15) 1/15

Nelson Freire (ISEP–DEI-APROG 2014/15) 2/15

Nelson Freire (ISEP–DEI-APROG 2014/15) 3/15

Nelson Freire (ISEP–DEI-APROG 2014/15) 4/15

Nelson Freire (ISEP–DEI-APROG 2014/15) 5/15

 Elemento <!DOCTYPE html> // descreve documento do tipo html

Nelson Freire (ISEP–DEI-APROG 2014/15) 7/15

Nelson Freire (ISEP–DEI-APROG 2014/15) 8/15

Nelson Freire (ISEP–DEI-APROG 2014/15) 9/15

Nelson Freire (ISEP–DEI-APROG 2014/15) 10/15

Nelson Freire (ISEP–DEI-APROG 2014/15) 11/15

Nelson Freire (ISEP–DEI-APROG 2014/15) 12/15

Nelson Freire (ISEP–DEI-APROG 2014/15) 13/15

Nelson Freire (ISEP–DEI-APROG 2014/15) 14/15

Nelson Freire (ISEP–DEI-APROG 2014/15) 15/15

Você também pode gostar