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 ( ) 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 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
Download
