3. construção de páginas web - marco soares · construção de páginas web 3.1. introdução ao...
TRANSCRIPT
![Page 1: 3. Construção de páginas web - Marco Soares · Construção de páginas web 3.1. Introdução ao HTML. 2 Introdução ao HTML O HTML, HyperText Markup Language, foi desenvolvido](https://reader035.vdocuments.net/reader035/viewer/2022080721/5f7a665e278834011f3474b5/html5/thumbnails/1.jpg)
1
3. Construção de páginas web
3.1. Introdução ao HTML
![Page 2: 3. Construção de páginas web - Marco Soares · Construção de páginas web 3.1. Introdução ao HTML. 2 Introdução ao HTML O HTML, HyperText Markup Language, foi desenvolvido](https://reader035.vdocuments.net/reader035/viewer/2022080721/5f7a665e278834011f3474b5/html5/thumbnails/2.jpg)
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
![Page 3: 3. Construção de páginas web - Marco Soares · Construção de páginas web 3.1. Introdução ao HTML. 2 Introdução ao HTML O HTML, HyperText Markup Language, foi desenvolvido](https://reader035.vdocuments.net/reader035/viewer/2022080721/5f7a665e278834011f3474b5/html5/thumbnails/3.jpg)
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
![Page 4: 3. Construção de páginas web - Marco Soares · Construção de páginas web 3.1. Introdução ao HTML. 2 Introdução ao HTML O HTML, HyperText Markup Language, foi desenvolvido](https://reader035.vdocuments.net/reader035/viewer/2022080721/5f7a665e278834011f3474b5/html5/thumbnails/4.jpg)
4
3.1.1. Tags e elementos
![Page 5: 3. Construção de páginas web - Marco Soares · Construção de páginas web 3.1. Introdução ao HTML. 2 Introdução ao HTML O HTML, HyperText Markup Language, foi desenvolvido](https://reader035.vdocuments.net/reader035/viewer/2022080721/5f7a665e278834011f3474b5/html5/thumbnails/5.jpg)
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
![Page 6: 3. Construção de páginas web - Marco Soares · Construção de páginas web 3.1. Introdução ao HTML. 2 Introdução ao HTML O HTML, HyperText Markup Language, foi desenvolvido](https://reader035.vdocuments.net/reader035/viewer/2022080721/5f7a665e278834011f3474b5/html5/thumbnails/6.jpg)
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
![Page 7: 3. Construção de páginas web - Marco Soares · Construção de páginas web 3.1. Introdução ao HTML. 2 Introdução ao HTML O HTML, HyperText Markup Language, foi desenvolvido](https://reader035.vdocuments.net/reader035/viewer/2022080721/5f7a665e278834011f3474b5/html5/thumbnails/7.jpg)
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
![Page 8: 3. Construção de páginas web - Marco Soares · Construção de páginas web 3.1. Introdução ao HTML. 2 Introdução ao HTML O HTML, HyperText Markup Language, foi desenvolvido](https://reader035.vdocuments.net/reader035/viewer/2022080721/5f7a665e278834011f3474b5/html5/thumbnails/8.jpg)
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
![Page 9: 3. Construção de páginas web - Marco Soares · Construção de páginas web 3.1. Introdução ao HTML. 2 Introdução ao HTML O HTML, HyperText Markup Language, foi desenvolvido](https://reader035.vdocuments.net/reader035/viewer/2022080721/5f7a665e278834011f3474b5/html5/thumbnails/9.jpg)
9
3.1.2. Estrutura básica de uma página em HTML
![Page 10: 3. Construção de páginas web - Marco Soares · Construção de páginas web 3.1. Introdução ao HTML. 2 Introdução ao HTML O HTML, HyperText Markup Language, foi desenvolvido](https://reader035.vdocuments.net/reader035/viewer/2022080721/5f7a665e278834011f3474b5/html5/thumbnails/10.jpg)
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
![Page 11: 3. Construção de páginas web - Marco Soares · Construção de páginas web 3.1. Introdução ao HTML. 2 Introdução ao HTML O HTML, HyperText Markup Language, foi desenvolvido](https://reader035.vdocuments.net/reader035/viewer/2022080721/5f7a665e278834011f3474b5/html5/thumbnails/11.jpg)
11
Estrutura básica de uma página em HTML
![Page 12: 3. Construção de páginas web - Marco Soares · Construção de páginas web 3.1. Introdução ao HTML. 2 Introdução ao HTML O HTML, HyperText Markup Language, foi desenvolvido](https://reader035.vdocuments.net/reader035/viewer/2022080721/5f7a665e278834011f3474b5/html5/thumbnails/12.jpg)
12
3.1.3. As tags html, head, title e body
![Page 13: 3. Construção de páginas web - Marco Soares · Construção de páginas web 3.1. Introdução ao HTML. 2 Introdução ao HTML O HTML, HyperText Markup Language, foi desenvolvido](https://reader035.vdocuments.net/reader035/viewer/2022080721/5f7a665e278834011f3474b5/html5/thumbnails/13.jpg)
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
![Page 14: 3. Construção de páginas web - Marco Soares · Construção de páginas web 3.1. Introdução ao HTML. 2 Introdução ao HTML O HTML, HyperText Markup Language, foi desenvolvido](https://reader035.vdocuments.net/reader035/viewer/2022080721/5f7a665e278834011f3474b5/html5/thumbnails/14.jpg)
14
As tags html, head, title e body
![Page 15: 3. Construção de páginas web - Marco Soares · Construção de páginas web 3.1. Introdução ao HTML. 2 Introdução ao HTML O HTML, HyperText Markup Language, foi desenvolvido](https://reader035.vdocuments.net/reader035/viewer/2022080721/5f7a665e278834011f3474b5/html5/thumbnails/15.jpg)
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
![Page 16: 3. Construção de páginas web - Marco Soares · Construção de páginas web 3.1. Introdução ao HTML. 2 Introdução ao HTML O HTML, HyperText Markup Language, foi desenvolvido](https://reader035.vdocuments.net/reader035/viewer/2022080721/5f7a665e278834011f3474b5/html5/thumbnails/16.jpg)
16
3.1.4. Definições de character entities
![Page 17: 3. Construção de páginas web - Marco Soares · Construção de páginas web 3.1. Introdução ao HTML. 2 Introdução ao HTML O HTML, HyperText Markup Language, foi desenvolvido](https://reader035.vdocuments.net/reader035/viewer/2022080721/5f7a665e278834011f3474b5/html5/thumbnails/17.jpg)
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 (;)
![Page 18: 3. Construção de páginas web - Marco Soares · Construção de páginas web 3.1. Introdução ao HTML. 2 Introdução ao HTML O HTML, HyperText Markup Language, foi desenvolvido](https://reader035.vdocuments.net/reader035/viewer/2022080721/5f7a665e278834011f3474b5/html5/thumbnails/18.jpg)
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
![Page 19: 3. Construção de páginas web - Marco Soares · Construção de páginas web 3.1. Introdução ao HTML. 2 Introdução ao HTML O HTML, HyperText Markup Language, foi desenvolvido](https://reader035.vdocuments.net/reader035/viewer/2022080721/5f7a665e278834011f3474b5/html5/thumbnails/19.jpg)
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
![Page 20: 3. Construção de páginas web - Marco Soares · Construção de páginas web 3.1. Introdução ao HTML. 2 Introdução ao HTML O HTML, HyperText Markup Language, foi desenvolvido](https://reader035.vdocuments.net/reader035/viewer/2022080721/5f7a665e278834011f3474b5/html5/thumbnails/20.jpg)
20
Definições de character entities
![Page 21: 3. Construção de páginas web - Marco Soares · Construção de páginas web 3.1. Introdução ao HTML. 2 Introdução ao HTML O HTML, HyperText Markup Language, foi desenvolvido](https://reader035.vdocuments.net/reader035/viewer/2022080721/5f7a665e278834011f3474b5/html5/thumbnails/21.jpg)
21
3.1.5. Tags elementares
![Page 22: 3. Construção de páginas web - Marco Soares · Construção de páginas web 3.1. Introdução ao HTML. 2 Introdução ao HTML O HTML, HyperText Markup Language, foi desenvolvido](https://reader035.vdocuments.net/reader035/viewer/2022080721/5f7a665e278834011f3474b5/html5/thumbnails/22.jpg)
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
![Page 23: 3. Construção de páginas web - Marco Soares · Construção de páginas web 3.1. Introdução ao HTML. 2 Introdução ao HTML O HTML, HyperText Markup Language, foi desenvolvido](https://reader035.vdocuments.net/reader035/viewer/2022080721/5f7a665e278834011f3474b5/html5/thumbnails/23.jpg)
23
Tags elementaresCabeçalhos (continuação)
![Page 24: 3. Construção de páginas web - Marco Soares · Construção de páginas web 3.1. Introdução ao HTML. 2 Introdução ao HTML O HTML, HyperText Markup Language, foi desenvolvido](https://reader035.vdocuments.net/reader035/viewer/2022080721/5f7a665e278834011f3474b5/html5/thumbnails/24.jpg)
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
![Page 25: 3. Construção de páginas web - Marco Soares · Construção de páginas web 3.1. Introdução ao HTML. 2 Introdução ao HTML O HTML, HyperText Markup Language, foi desenvolvido](https://reader035.vdocuments.net/reader035/viewer/2022080721/5f7a665e278834011f3474b5/html5/thumbnails/25.jpg)
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
![Page 26: 3. Construção de páginas web - Marco Soares · Construção de páginas web 3.1. Introdução ao HTML. 2 Introdução ao HTML O HTML, HyperText Markup Language, foi desenvolvido](https://reader035.vdocuments.net/reader035/viewer/2022080721/5f7a665e278834011f3474b5/html5/thumbnails/26.jpg)
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
![Page 27: 3. Construção de páginas web - Marco Soares · Construção de páginas web 3.1. Introdução ao HTML. 2 Introdução ao HTML O HTML, HyperText Markup Language, foi desenvolvido](https://reader035.vdocuments.net/reader035/viewer/2022080721/5f7a665e278834011f3474b5/html5/thumbnails/27.jpg)
27
Tags elementares
![Page 28: 3. Construção de páginas web - Marco Soares · Construção de páginas web 3.1. Introdução ao HTML. 2 Introdução ao HTML O HTML, HyperText Markup Language, foi desenvolvido](https://reader035.vdocuments.net/reader035/viewer/2022080721/5f7a665e278834011f3474b5/html5/thumbnails/28.jpg)
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
![Page 29: 3. Construção de páginas web - Marco Soares · Construção de páginas web 3.1. Introdução ao HTML. 2 Introdução ao HTML O HTML, HyperText Markup Language, foi desenvolvido](https://reader035.vdocuments.net/reader035/viewer/2022080721/5f7a665e278834011f3474b5/html5/thumbnails/29.jpg)
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
![Page 30: 3. Construção de páginas web - Marco Soares · Construção de páginas web 3.1. Introdução ao HTML. 2 Introdução ao HTML O HTML, HyperText Markup Language, foi desenvolvido](https://reader035.vdocuments.net/reader035/viewer/2022080721/5f7a665e278834011f3474b5/html5/thumbnails/30.jpg)
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
![Page 31: 3. Construção de páginas web - Marco Soares · Construção de páginas web 3.1. Introdução ao HTML. 2 Introdução ao HTML O HTML, HyperText Markup Language, foi desenvolvido](https://reader035.vdocuments.net/reader035/viewer/2022080721/5f7a665e278834011f3474b5/html5/thumbnails/31.jpg)
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
![Page 32: 3. Construção de páginas web - Marco Soares · Construção de páginas web 3.1. Introdução ao HTML. 2 Introdução ao HTML O HTML, HyperText Markup Language, foi desenvolvido](https://reader035.vdocuments.net/reader035/viewer/2022080721/5f7a665e278834011f3474b5/html5/thumbnails/32.jpg)
32
3.1.6. Listas
![Page 33: 3. Construção de páginas web - Marco Soares · Construção de páginas web 3.1. Introdução ao HTML. 2 Introdução ao HTML O HTML, HyperText Markup Language, foi desenvolvido](https://reader035.vdocuments.net/reader035/viewer/2022080721/5f7a665e278834011f3474b5/html5/thumbnails/33.jpg)
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
![Page 34: 3. Construção de páginas web - Marco Soares · Construção de páginas web 3.1. Introdução ao HTML. 2 Introdução ao HTML O HTML, HyperText Markup Language, foi desenvolvido](https://reader035.vdocuments.net/reader035/viewer/2022080721/5f7a665e278834011f3474b5/html5/thumbnails/34.jpg)
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
![Page 35: 3. Construção de páginas web - Marco Soares · Construção de páginas web 3.1. Introdução ao HTML. 2 Introdução ao HTML O HTML, HyperText Markup Language, foi desenvolvido](https://reader035.vdocuments.net/reader035/viewer/2022080721/5f7a665e278834011f3474b5/html5/thumbnails/35.jpg)
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
![Page 36: 3. Construção de páginas web - Marco Soares · Construção de páginas web 3.1. Introdução ao HTML. 2 Introdução ao HTML O HTML, HyperText Markup Language, foi desenvolvido](https://reader035.vdocuments.net/reader035/viewer/2022080721/5f7a665e278834011f3474b5/html5/thumbnails/36.jpg)
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
![Page 37: 3. Construção de páginas web - Marco Soares · Construção de páginas web 3.1. Introdução ao HTML. 2 Introdução ao HTML O HTML, HyperText Markup Language, foi desenvolvido](https://reader035.vdocuments.net/reader035/viewer/2022080721/5f7a665e278834011f3474b5/html5/thumbnails/37.jpg)
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
![Page 38: 3. Construção de páginas web - Marco Soares · Construção de páginas web 3.1. Introdução ao HTML. 2 Introdução ao HTML O HTML, HyperText Markup Language, foi desenvolvido](https://reader035.vdocuments.net/reader035/viewer/2022080721/5f7a665e278834011f3474b5/html5/thumbnails/38.jpg)
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
![Page 39: 3. Construção de páginas web - Marco Soares · Construção de páginas web 3.1. Introdução ao HTML. 2 Introdução ao HTML O HTML, HyperText Markup Language, foi desenvolvido](https://reader035.vdocuments.net/reader035/viewer/2022080721/5f7a665e278834011f3474b5/html5/thumbnails/39.jpg)
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
![Page 40: 3. Construção de páginas web - Marco Soares · Construção de páginas web 3.1. Introdução ao HTML. 2 Introdução ao HTML O HTML, HyperText Markup Language, foi desenvolvido](https://reader035.vdocuments.net/reader035/viewer/2022080721/5f7a665e278834011f3474b5/html5/thumbnails/40.jpg)
40
Listas
![Page 41: 3. Construção de páginas web - Marco Soares · Construção de páginas web 3.1. Introdução ao HTML. 2 Introdução ao HTML O HTML, HyperText Markup Language, foi desenvolvido](https://reader035.vdocuments.net/reader035/viewer/2022080721/5f7a665e278834011f3474b5/html5/thumbnails/41.jpg)
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