HTML Parte I

I.P.V.C. E.S.C.
E
Cibernutica 2002/2003
pag. 1
CIBERNUTICA CIBERNUTICA
Criao de pginas para a Web em Hipertexto
Formadora: Cristina Fernandes 1
I.P.V.C. E.S.C.E
3. Constituio de um documento HTML

Estrutura bsica de um documento HTML:
- comea com o tag <HTML> e finaliza com o tag </HTML> - a maioria dos tags HTML aparecem aos pares ( o segundo precedido por /) - um documento HTML constitudo por duas seces: - o cabealho (header) - <HEAD> </HEAD> => proporciona informao sobre o documento ao servidor WEB - o corpo do documento - <BODY> </BODY> => nesta seco est o contedo do documento
pag. 2
I.P.V.C. E.S.C.E
Um documento HTML divide-se em 2 partes essenciais: cabealho e corpo.
<html> <head> </head>

TAGS CABEALHO DO DOCUMENTO
pag. 3
<body>
..
CORPO DO DOCUMENTO
</body> </html>
3
I.P.V.C. E.S.C.E
Actividade 1 - a primeira pgina
<html> <head> <title>Estrutura de uma pgina em HTML</title> </head> <body> Esta a minha primeira pgina em HTML!!! </body> </html>
Vamos criar esta pgina HTML no bloco de notas. Uma pgina HTML pode ser criada em qualquer editor de texto (Bloco de Notas, WordPad, etc), desde que seja salvo no formato ASCII.
pag. 4
Ao guardar no Bloco de Notas modificar a extenso .txt para .htm ou .html. Se o documento, no formato .txt se chama Index.txt altere-o para Index.htm ou Index.html.
I.P.V.C. E.S.C.E
3.1. Ttulos e Pargrafos

Um pargrafo fica entre as tags <P> e </P> - e automaticamente distribudo entre os lados da janela do Browser - o seu alinhamento pode ser: esquerda, centrado, ou direita
pag. 5
I.P.V.C. E.S.C.E
A linguagem HTML permite definir uma hierarquia de ttulos num documento com seis nveis. Nvel 1 => mais elevado - tag <H1> </H1> Nvel 6 => menos elevado - tag <H6> </H6>
pag. 6
I.P.V.C. E.S.C.E
3.2. Quebras de Linha

Mudana de linha sem introduzir um espao entre linhas (sem criar novo pargrafo) - cdigo <BR>
pag. 7
I.P.V.C. E.S.C.E
3.3. Separadores Horizontais

linhas horizontais no corpo do documento => dividir visualmente o texto em seces - cdigo <HR>
pag. 8
I.P.V.C. E.S.C.E
3.4. Formatao de Caracteres

Tipo de Letra - cdigo <FONT> e atributo FACE se o tipo de letra especificado no estiver disponvel no sistema cliente, o texto ser apresentado com o tipo de letra definido pelo Browser como tipo de letra por defeito Tamanho da Letra - cdigo <FONT> e atributo SIZE - SIZE = inteiro de 1 a 7 (1 mais pequeno, 7 maior)
pag. 9
I.P.V.C. E.S.C.E
Cor dos Caracteres - cdigo <FONT> e atributo COLOR Estilos - negrito <B> </B>; itlico <I> </I>; sublinhado <U> </U> Caracteres mono-espaados - os caracteres ocupam o mesmo espao <TT> </TT>
pag. 10
10
I.P.V.C. E.S.C.E
pag. 11
11
I.P.V.C. E.S.C.E
Cores
As cores podem ser escritas (em ingls) ou colocar o cdigo correspondente. Porm, para escrever s aceito 16 cores, que so: Preto = black - cdigo = #000000 Branco = white - cdigo = #FFFFFF Azul = blue - cdigo = #0000FF Amarelo = yellow - cdigo = #FFFF00 Verde = green - cdigo = #008000 Lima = lime - cdigo = #00ff00 Marron = maroon - cdigo = #800000 Oliva = olive - cdigo = #808000 Azul Celeste = aqua - cdigo = #00ffff Lils = fuchsia - cdigo = #ff00ff Cinza = gray - cdigo = #808080 Azul escuro = navy - cdigo = #000080 Roxo = purple - cdigo = #800080 Verde escuro = teal - cdigo = #008080 Cinza claro = silver - cdigo = #c0c0c0 Vermelho = red - cdigo = #FF0000 Mas, pode-se definir varias tonalidades e cores, basta ter a lista de cdigos das cores.
pag. 12
12
I.P.V.C. E.S.C.E
Estilos Lgicos - em HTML esto previstos um conjunto de estilos lgicos que um Browser especifica - o criador da pgina no controla as definies dos estilo lgico que um qq Browser utilizar
Um estilo lgico definido pelo cliente (Browser) que ir interpretar a pgina
pag. 13
13
I.P.V.C. E.S.C.E
3.5. Listas
Listas com marcas
- cdigo da lista UL (Unordered List) <UL> </UL> - cada elemento da lista precedido por <LI>
Listas numeradas
- cdigo OL (Ordered List) <OL> </OL> - cada elemento da lista precedido por <LI>
pag. 14
14
I.P.V.C. E.S.C.E
3.6. Hiperligaes em Texto

Bloco de Texto
constitui
Origem de um Hiperligao
- um caracter, uma palavra ou uma frase - aparece sublinhado e numa cor diferente - o ponteiro do rato transforma-se numa pequena mo - para que se estabelea a hiperligao, necessrio indicar o endereo de destino
<A HREF=Endereo>Texto em que o utilizador pode executar o clique</A>
pag. 15
15
Tipos de Endereos:
- Endereos Directos - o destino identificado por um endereo completo, i.e., independente da localizao do documento onde est a hiperligao - Endereos Relativos - o destino identificado por um endereo relativo, i.e., que tem em conta a localizao do documento onde est a hiperligao - localizar ficheiros na mesma directoria - localizar ficheiros numa directoria de nvel superior na hierarquia - localizar ficheiros numa sub-directoria - hiperligaes dentro do mesmo documento
I.P.V.C. E.S.C.E
pag. 16
16
I.P.V.C. E.S.C.E
pag. 17
17
I.P.V.C. E.S.C.E
Hiperligaes dentro do mesmo documento - bastante utilizada em documentos longos Marca (bookmark) - objecto que pode ser colocado em qualquer parte de um documento e que pode ser alvo de uma hiperligao que esteja no mesmo documento ou em outro documento. - uma marca pode ser associada a texto
pag. 18
18
hiperligaes para marcas
marcas
I.P.V.C. E.S.C.E
3.7. Imagens
Incluir um ficheiro de imagem no corpo de um documento HTML - cdigo <IMG>, acompanhado pelos Atributos: SRC - define o caminho para o ficheiro imagem (nome da imagem+extenso) ALT - texto alternativo que deve aparecer quando no for possvel apresentar a imagem ALIGN - posicionamento da imagem relativamente ao texto possvel criar uma Hiperligao a partir de uma imagem - tal como um bloco de texto, uma imagem pode constituir a origem de uma hiperligao
pag. 19
19
WIDTH define a largura da imagem HEIGHT define a altura da imagem
I.P.V.C. E.S.C.E
3.8. Som e Vdeo SOM - a referncia a um ficheiro de som feita tal como a utilizada para qualquer ficheiro html
- a indicao da extenso do ficheiro de som (wav) indica ao Browser o formato em que o ficheiro est gravado e qual a aplicao que o deve executar
Vdeo - usa-se o cdigo <IMG> com o atributo DYNSRC. Outros atributos:

- LOOP - nmero de vezes que a sequncia de vdeo executada enquanto a pgina estiver aberta - CONTROLS - disponibiliza um conjunto de controlos sobre a execuo do ficheiro de vdeo - LOOPDELAY - intervalo de tempo (milisegundos) entre cada execuo do ficheiro de vdeo - HEIGHT e WIDTH - altura e cumprimento da zona de visualizao do vdeo - START - controlo da execuo do ficheiro de vdeo START=FILEOPEN - o ficheiro executado logo aps a abertura da pgina START=MOUSEOVER - o ficheiro executado quando o ponteiro do rato passar sobre o ficheiro
pag. 20
Criar Hiperligao a partir de um ficheiro de vdeo - como um bloco de texto/ imagem, um ficheiro de vdeo pode constituir a origem de uma hiperligao - a extenso do ficheiro (avi) permite ao Browser identificar o seu formato e activar a aplicao que executa o ficheiro
20
I.P.V.C. E.S.C.E
3.9. Tabelas
- so constitudas por linhas e colunas de clulas as quais contm tudo o que uma pgina pode conter - so uma boa soluo para organizar dados ou para organizar o layout (aspecto) de uma pgina Criao de Tabelas em HTML: - directamente em HTML uma tarefa montona e muito sujeita a erros - aconselhvel a utilizao de um Editor de Pgina HTML capaz de gerar automaticamente o cdigo a partir do desenho da tabela. Operaes: - definir uma ttulo (CAPTION) - unir/dividir clulas - inserir/remover linhas/colunas - contornos e sombreados de clulas - largura/altura mnima da tabela/clula - ...
pag. 21
21
I.P.V.C. E.S.C.E
3.10. Frames
As Frames constituem uma das formas mais utilizadas para organizar a informao contida em vrios documentos HTML. A utilizao de Frames permite dividir a janela do Browser em vrias reas independentes, cujos contedos provm de ficheiros html (um para cada rea)
pag. 22
22
o contedo desta Frame dado em funo da hiperligao seleccionada na Frame ao Lado Pgina de Frames - uma pgina que subdivide a janela do Browser em regies chamadas Frames Frame - uma sub-janela de uma Pgina de Frames, cujo contedo uma pgina html O contedo da Frame determinado por uma hiperligao que est noutra Frame Target Frame - o nome da Frame onde ir ser apresentada a pgina alvo de um hiperligao Initial Page - uma das propriedades de uma Frame e que indica qual a pgina a ser apresentada na Frame no momento da sua abertura.
I.P.V.C. E.S.C.E
Pgina de Frames
framepg.html
Pgina de Frames - uma pgina que subdivide a janela do Browser em regies chamadas Frames => especifica como a janela do Browser dividida em Frames
pag. 23
23
I.P.V.C. E.S.C.E
Frame contents
contedo dado pela pgina(s)
Indice.html
pag. 24
24
Frame main
contedo dado pela pgina(s)
Abertura.html Item1.html Item2.html Item3.html
Frame contents
Frame main

HTML Parte I

Загружено:

Сведения о документе

Авторское право

Доступные форматы

Поделиться этим документом

Поделиться или встроить документ

Параметры публикации

Этот документ был вам полезен?

Это неприемлемый материал?

Авторское право:

Доступные форматы

HTML Parte I

Загружено:

Авторское право:

Доступные форматы

I.P.V.C. E.S.C.

Criao de pginas para a Web em Hipertexto

Formadora: Cristina Fernandes 1

3. Constituio de um documento HTML

Um documento HTML divide-se em 2 partes essenciais: cabealho e corpo.

<html> <head> </head>

Actividade 1 - a primeira pgina

3.1. Ttulos e Pargrafos

3.2. Quebras de Linha

3.3. Separadores Horizontais

3.4. Formatao de Caracteres

Um estilo lgico definido pelo cliente (Browser) que ir interpretar a pgina

3.6. Hiperligaes em Texto

hiperligaes para marcas

WIDTH define a largura da imagem HEIGHT define a altura da imagem

Vdeo - usa-se o cdigo <IMG> com o atributo DYNSRC. Outros atributos:

contedo dado pela pgina(s)

contedo dado pela pgina(s)

Abertura.html Item1.html Item2.html Item3.html

Вам также может понравиться