APROG Algoritmia e Programação HTML Introdução Nelson Freire (ISEP DEI-APROG 2014/15) 1/15
O que é o HTML? Sumário Geral 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
Significado de HTML HyperText Markup Language O que é o HTML? 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
Ficheiro de texto Extensão html Exemplo nome_do_ficheiro.html Documento HTML Escrito em HTML Formado por elementos HTML Podem ser encaixados Nelson Freire (ISEP DEI-APROG 2014/15) 4/15
Em Geral Elemento HTML 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> Elemento vazio Sem atributos: <nome_tag> Com atributos: <nome_tag atributo= "valor"> Exemplo: <br> // line break Exemplo: <meta charset= UTF-8 > Atributos Fornecem informação adicional do elemento Especificados na tag inicial Descritos pelo par nome/valor Formato nome="valor" Nelson Freire (ISEP DEI-APROG 2014/15) 5/15
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
Títulos 6 níveis Elementos de Títulos (Cabeçalhos) Definidos Tags de <h1> até <h6> Exemplos Web Browser Mostra com tamanhos diferentes Nelson Freire (ISEP DEI-APROG 2014/15) 7/15
Paragrafo Definido com tag <p> Exemplo Elementos de Texto 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
Interesse Tornar mais legível documento HTML Processador HTML (p.ex., Web Browser) Ignora Não mostra Exemplo Elementos de Comentários Nelson Freire (ISEP DEI-APROG 2014/15) 9/15
Imagem Definido com tag <img> Ficheiro Especificado no atributo src Dimensão Especificado pelos atributos width height Elementos de Imagens Exemplo Nelson Freire (ISEP DEI-APROG 2014/15) 10/15
Link Definido com tag <a> Endereço do link Especificado no atributo href Exemplos Link com texto Link com imagem Elementos de Links Nelson Freire (ISEP DEI-APROG 2014/15) 11/15
Lista Não Ordenada Definido com tag <ul> Itens Definidos com tag <li> Marcados com bullet Elementos de Listas 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
Tabela Definido com tag <table> Atributo border Para mostrar limites das células Dividida em linhas Elementos de Tabelas 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
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 Nelson Freire (ISEP DEI-APROG 2014/15) 14/15
Interesse Garantir visualização pretendida Validação Verificar a sintaxe das tags Ferramenta (p. ex.) http://validator.w3.org/ Validação de Documento HTML HTML é especificado pelo W3C http://www.w3.org/ Versão mais recente HTML 5 Nelson Freire (ISEP DEI-APROG 2014/15) 15/15