Embed Size (px)
Citation preview
1
3. Construção de páginas web
3.1. Introdução ao HTML
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
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
4
3.1.1. Tags e elementos
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
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
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
<b> o que eu quero dizer em html </b>Fig. 4.37 Exemplo de uma instrução em HTML
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 <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
9
3.1.2. Estrutura básica de uma página em HTML
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
11
Estrutura básica de uma página em HTML
12
3.1.3. As tags html, head, title e body
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
14
As tags html, head, title e body
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
16
3.1.4. Definições de character entities
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 (;)
18
Definições de character entities Por exemplo, para mostrar o símbolo > deve-
se 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
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
20
Definições de character entities
21
3.1.5. Tags elementares
22
Tags elementaresCabeç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
23
Tags elementaresCabeçalhos (continuação)
24
Tags elementaresPará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
25
Tags elementaresPará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
26
Tags elementaresQuebras 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
27
Tags elementares
28
Tags elementaresDivisões
Para dividir uma página com linhas horizontais utiliza-se a tag <hr>
O quadro 5 define os vários atributos desta tag
29
Tags elementaresDivisões
Comprimento da linhapixels
%
width
Espessura da linhapixels
%
size
Quando o valor é falso, a linha apresenta um relevo, surgindo lisa quando o valor for verdadeiro
true
false
noshade
Especifica a posição da linha horizontalcenter
left
right
align
DescriçãoValorAtributo
30
Tags elementaresDivisõ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
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
32
3.1.6. Listas
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
34
ListasListas 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
35
ListasListas 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
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
37
ListasListas 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
38
ListasListas 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
39
ListasListas 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
40
Listas
41
ListasListas 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
