3. Construção de páginas web Introdução ao HTML

Transcrição

1 3. Construção de páginas web 3.1. Introdução ao HTML 1

2 Introdução ao HTML O HTML, HyperText Markup Language, foi desenvolvido para especificar a organização lógica de um documento com extensões de hipertexto, já que os documentos de HTML têm de ser visualizados em muitos e variados browsers, com muitas e variadas capacidades Assim, o HTML permite marcar secções de texto como sendo títulos ou parágrafos, deixando a interpretação destes elementos para o browser Quer isto dizer que, enquanto um browser identa o início de parágrafo, outro poderá deixar uma linha em branco de forma a destacá-lo 2

3 Introdução ao HTML A maioria dos sistemas operativos distingue este tipo de documento através da extensão html ou htm, pelo que, quando se tenta abrir um ficheiro deste tipo, imediatamente é activado o browser predefinido, de forma a poder visualizá-lo Antes de mais, e para começar a desenvolver documentos em HTML, é necessário utilizar um editor de texto que não introduza formatações Pode-se utilizar o Bloco de notas ou um dos editores já apresentados no início desta unidade 3

4 Tags e elementos 4

5 Tags e elementos Todos os comandos de HTML são criados através do uso de tags As tags são comandos ou instruções embutidos no documento e têm identificadores de início e de fecho, para dar a conhecer ao browser onde começa e acaba o texto que deverá ser formatado pela referida tag Há, contudo, algumas tags que não têm identificação de fecho A maioria das instruções têm uma tag de abertura e uma tag de fecho 5

6 Tags e elementos Cada tag está contida entre os sinais de menor < e maior > Normalmente, a tag de fecho é idêntica à de abertura, exceptuando o símbolo /, que aparece logo a seguir ao sinal de menor A seguir é exemplificada uma tag de abertura e uma tag de fecho: <body> - Tag de abertura do corpo do documento </body> - Tag de fecho do corpo do documento 6

7 Tags e elementos Apesar de ser indiferente definir as tags em maiúsculas ou em minúsculas, é recomendado que estas apareçam sempre em minúsculas, já que este é um requisito do XHTML e do DHTML É importante garantir a presença das tags de fecho, já que os browsers mais actuais poderão interpretar o texto incorrectamente se estas não estiverem definidas Uma instrução de HTML consiste em três elementos básicos e pela seguinte ordem: a tag de abertura, o conteúdo e a tag de fecho o que eu quero dizer em html Fig Exemplo de uma instrução em HTML 7

8 Tags e elementos Por outro lado, uma instrução HTML pode conter outras instruções dentre desta Na figura 4.38 é exemplificada uma instrução que sublinha toda a frase entre as tags e e, ao mesmo tempo, coloca a negrito a palavra html, que se encontra entre as tags e O que eu quero dizer em html Fig Exemplo de uma tag aninhada dentro de outra 8

9 Estrutura básica de uma página em HTML 9

10 Estrutura básica de uma página em HTML A figura 4.39 mostra a estrutura básica de uma página em HTML, composta pelos blocos head (cabeçalho do documento) e body (corpo do documento) O cabeçalho do documento define informações acerca do próprio documento, tal como o título ou as relações com outros documentos O corpo do documento contém informações e instruções de como este deve ser mostrado pelo browser 10

11 Estrutura básica de uma página em HTML 11

12 As tags html, head, title e body 12

13 As tags html, head, title e body As tags <html> e </html> servem para indicar ao browser onde começa e termina um documento em html As tags <head> e </head> indicam o início e o fim de um bloco de documento Este bloco situa-se num documento html antes do bloco body O quadro 3 apresenta algumas tags que podem ser colocadas apenas neste bloco: base, link, meta, title, style e script 13

14 As tags html, head, title e body 14

15 As tags html, head, title e body As tags <body> e </body> delimitam o corpo do documento Estas contêm as tags e o texto que formam o conteúdo principal da página web, por exemplo, cabeçalhos, parágrafos, listas, imagens e hiperligações, entre outros 15

16 Definições de character entities 16

17 Definições de character entities Alguns caracteres têm um significado próprio para o HTML e, por isso, são caracteres reservados, como, por exemplo, o símbolo < Para se poder mostrar estes caracteres é necessário recorrer ao uso de character entities O character entity é composto por: E comercial (&), o nome ou o número da entidade precedido de cardinal (#) e o símbolo ponto e vírgula (;) 17

18 Definições de character entities Por exemplo, para mostrar o símbolo > devese escrever > (greater than) ou > Apesar de ser mais simples utilizar a primeira forma, alguns browsers podem ter alguma dificuldade em entender o character entity, pelo que é mais seguro utilizar o formato numérico No caso específico dos caracteres portugueses acentuados, a utilização de character entities é a melhor forma de assegurar que estes são correctamente mostrados 18

19 Definições de character entities Normalmente, o browser reduz a um os espaços entre as palavras Para que estes apareçam, terá de se usar o character entity (non-breaking space) tantas vezes quanto os espaços pretendidos Convém referir que os códigos distinguem maiúsculos dos minúsculos O quadro 4 apresenta alguns exemplos de character entities 19

20 Definições de character entities 20

21 Tags elementares 21

22 Tags elementares Cabeçalhos O HTML tem seis níveis de cabeçalhos, identificados com as tags H1, H2 H6, do maior para o menor tamanho Não existe uma hierarquia predefinida mas, como é óbvio, os cabeçalhos devem ser colocados por níveis de importância, de maneira a criar alguma consistência no documento Tem, opcionalmente, o atributo align, que pode assumir os valores: left, right, center e justify As figuras 4.40 e 4.41 mostram, respectivamente, o código HTML e o resultado produzido por este num browser, quando se utilizam as tags para cabeçalhos 22

23 Tags elementares Cabeçalhos (continuação) 23

24 Tags elementares Parágrafos Os parágrafos são criados em HTML através da utilização da tag , porque em HTML as mudanças de linha não têm qualquer expressão aquando da visualização do texto num browser Assim, sempre que se queria delimitar um parágrafo de um texto, utiliza-se para início a tag e para o fim a tag Tal como na tag anterior, tem-se, opcionalmente, o atributo align, que pode assumir os valores: left, right, center e justifiy 24

25 Tags elementares Parágrafos (continuação) As figuras 4.42 e 4.43 mostram, respectivamente, o código HTML e o resultado produzido por este num browser quando se utilizam as tags para parágrafos 25

26 Tags elementares Quebras de linha As quebras de linha são criadas em HTML através da utilização da tab e utilizadas quando se pretende forçar uma mudança de linha, num determinado ponto do texto, sem criarmos um parágrafo A tag não tem tag de fecho nem qualquer conteúdo, por isso é uma tag vazia As figuras 4.44 e 4.45 mostram, respectivamente, o código HTML e o resultado produzido por este num browser, quando se utiliza a tag para quebra de linha 26

27 Tags elementares 27

28 Tags elementares Divisões Para dividir uma página com linhas horizontais utiliza-se a tag <hr> O quadro 5 define os vários atributos desta tag 28

29 Tags elementares Divisões Atributo Valor Descrição align center Especifica a posição da linha horizontal left right noshade true false size pixels Quando o valor é falso, a linha apresenta um relevo, surgindo lisa quando o valor for verdadeiro Espessura da linha % width pixels Comprimento da linha % 29

30 Tags elementares Divisões As figuras 4.46 e 4.47 mostram, respectivamente, o código HTML e o resultado produzido por este num browser, quando se utiliza a tag <hr> para criar linhas horizontais na página 30

31 Tags elementares Comentários Para colocar comentários ou referências num documento sem se desejar que estes apareçam, utiliza-se a tag de abertura <!- e a tag de fecho -> (figura 4.48), que não possuem quaisquer atributos 31

32 Listas 32

33 Listas Em HTML é possível criar listas de três tipos diferentes: numeradas (ordenadas), com marcadores (desordenadas) ou de definições As listas numeradas e com marcadores actuam de forma semelhante A diferença entre elas é que as primeiras são precedidas por números sequenciais e as segundas são precedidas por marcas As listas de definições são constituídas por vários itens e as suas respectivas definições 33

34 Listas Listas ordenadas As listas ordenadas são delimitadas pelas tags <ol> e </ol> e cada um dos seus itens é delimitado pelas tags <li> e </li> As figuras 4.49 e 4.50 exemplificam a aplicação destas tags 34

35 Listas Listas ordenadas Tal como na lista ordenada, é possível alterar o símbolo disc, que é apresentado por defeito Através do atributo type, estes valores podem ser alterados para outros, tal como mostra a figura

36 Listas A figura 4.52 exemplifica a aplicação das tags para a criação de listas ordenadas e a figura 4.53 mostra o seu resultado 36

37 Listas Listas desordenadas As listas desordenadas são delimitadas pelas tags <ul> e </ul> e cada um dos seus itens é delimitado pelas tags <li> e </li> As figuras 4.54 e 4.55 exemplificam a aplicação destas tags 37

38 Listas Listas desordenadas Tal como na lista ordenada, é possível alterar o símbolo disc, que é apresentado por defeito Através do atributo type, estes valores podem ser alterados para outros, tal como mostra a figura

39 Listas Listas de definições As listas de definições são delimitadas pelas tags <dl> e </dl> Por sua vez, cada um dos seus itens é delimitado pelas tags <dt> e </dt> e, por fim, cada uma das suas definições é delimitada pelas tags <dd> e </dd> As figuras 4.57 e 4.58 exemplificam a aplicação destas tags 39

40 Listas 40

41 Listas Listas de definições (continuação) Na criação das listas nas tags <li>, das listas ordenadas e desordenadas, e <dd>, das listas de definições, é possível inserir outras tags, como de mudança de parágrafo ou de linha, links, imagens e outras listas 41