3. Construção de páginas web 3.1. Introdução ao HTML 1
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
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
3.1.1. Tags e elementos 4
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
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
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 <b> o que eu quero dizer em html </b> Fig. 4.37 Exemplo de uma instrução em HTML 7
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 <u> e </u> e, ao mesmo tempo, coloca a negrito a palavra html, que se encontra entre as tags <b> e </b> <u> O que eu quero dizer em <b>html</b></u> Fig. 4.37 Exemplo de uma tag aninhada dentro de outra 8
3.1.2. Estrutura básica de uma página em HTML 9
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
Estrutura básica de uma página em HTML 11
3.1.3. As tags html, head, title e body 12
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
As tags html, head, title e body 14
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
3.1.4. Definições de character entities 16
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
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
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
Definições de character entities 20
3.1.5. Tags elementares 21
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
Tags elementares Cabeçalhos (continuação) 23
Tags elementares Parágrafos Os parágrafos são criados em HTML através da utilização da tag <p>, 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 <p> e para o fim a tag </p> Tal como na tag anterior, tem-se, opcionalmente, o atributo align, que pode assumir os valores: left, right, center e justifiy 24
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
Tags elementares Quebras de linha As quebras de linha são criadas em HTML através da utilização da tab <br> e utilizadas quando se pretende forçar uma mudança de linha, num determinado ponto do texto, sem criarmos um parágrafo A tag <br> 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
Tags elementares 27
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
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
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
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
3.1.6. Listas 32
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
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
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 4.56 35
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
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
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 4.56 38
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
Listas 40
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