HTML Parte II. André Tavares da Silva.

Tamanho: px

Começar a partir da página:

Download "HTML Parte II. André Tavares da Silva."

Maria dos Santos Pinheiro Leveck
7 Há anos
Visualizações:

1 HTML Parte II André Tavares da Silva

2 Tag BODY - Formatação Cores de textos da página <BODY TEXT="#rrggbb" LINK="#rrggbb" VLINK="#rrggbb" ALINK="#rrggbb"> text = texto normal da página link = links da página vlink = links consultados na página alink = links ativados na página

3 Tag BODY - Formatação Parâmetro BACKGROUND Imagens como como papel de parede no fundo da página <BODY BACKGROUND = "IMAGEM.GIF"> O fundo da página acompanhará o movimento da tela com <BODY BACKGROUND = "PISO.GIF " BGPROPERTIES= "FIXED"> O fundo da sua página ficará estático e apenas o conteúdo da sua página irá se mover

GIF"> O fundo da página acompanhará o movimento da tela com <BODY BACKGROUND =

4 Tabela - Formatação BORDER = <value> define a largura da borda CELLSPACING = <value> define espaçamento entre células CELLPADDING = <value> define distância entre o texto e a borda das células WIDTH = <value or percent> determina o quanto da tela uma tabela deve ocupar BGCOLOR = <cor> define a cor de fundo da tabela ou da célula

entre o texto e a borda das células WIDTH = <value or percent> determina o quanto

5 Tabela - Formatação <valign> = controla o alinhamento vertical do texto associado a TR, TD ou TH top = alinha com o alto da célula middle = alinha no meio bottom = alinha com a parte de baixo da célula

6 Formatação de textos Tag <HR> Cria uma linha horizontal Quebra entre um item de informação e outro Atributos de largura e altura <HR SIZE=8 WIDTH=80%> WIDTH indica que a linha ocupará 80% da largura da janela do browser SIZE indica que será exibida uma linha com 8 pixels de espessura

WIDTH=80%> WIDTH indica que a linha ocupará 80% da largura da janela

7 Formatação de textos Tags <H1> a </H6> Espécie de cabeçalho com padrões de formatação prontos Negrito e determinado tamanho, além de colocar uma linha em branco após o texto Após o TAG <H> deve vir um número de 1 a 6 indicando o tamanho da fonte Sendo que 1 é o maior tamanho e 6 o menor <H1> Cabeçalho Grande </H1> <H6> Cabeçalho Pequeno </H6>

texto Após o TAG <H> deve vir um número de 1 a 6 indicando o tamanho da fonte Sendo

8 Acentuação / Caracteres Especiais Notações especiais para ser exibidas em tela Iniciam por & (e comercial) e encerram-se com ; (ponto e vírgula) > Maior que > < Menor que < & E comercial & " aspas duplas "

9 Acentuação / Caracteres Especiais Acento agudo: &xacute; onde x é uma letra qualquer Acento grave: &xgrave; Acento circunflexo: &xcirc; Letra com til: &xtilde; Letra com trema: &xuml; Letras unidas: &Aelig; = Æ e æ = æ Letra com argola: Å = Å e å = å Cedilha: ç = ç N com til: Ñ = Ñ e ñ = ñ O cortado: Ø = Ø e ø = ø

&xtilde; Letra com trema: &xuml; Letras unidas: &Aelig; = Æ e æ = æ Letra com

10 Exercício Desenvolva algumas páginas HTML com: textos variados: cabeçalhos (<H>), estilos variados(negrito, itálico, sublinhado), fontes diferentes, tamanhos e cores variados parágrafos, quebra de linha linha horizontal imagem link fundo com cor ou imagem

sublinhado), fontes diferentes, tamanhos e cores variados

11 Frames (quadros) Os frames são divisões da tela do browser em diversas telas (ou "quadros"). Com isso, torna-se possível apresentar mais de uma página por vez: por exemplo, um índice principal em uma parte pequena da tela, e os textos relacionados ao índice em outra parte.

Com isso, torna-se possível apresentar mais de uma página por vez:

12 Frames Não é difícil colocar frames em páginas; porém, nem todos os usuários gostam deles, pois sua navegação não é fácil, além de apresentar problemas para a impressão e a marcação dos documentos interiores aos frames nos bookmarks (favoritos). A alternativa natural para os frames são as tabelas.

problemas para a impressão e a marcação dos documentos interiores aos

13 Frames A tag <FRAMESET> define a divisão da página em quadros e substitui a tag <BODY>. Nela pode haver o atributo cols ou o atributo rows. Se a página for dividida em mais de uma coluna, usa-se o atributo cols e rows caso a página seja dividida em linhas. Nos valores de atributo, é indicado o tamanho de cada linha/coluna. Dentro da formatação de FRAMESET, temos as tags <FRAME> das páginas que serão mostradas nos frames definidos pelo atributo src.

Se a página for dividida em mais de uma coluna, usa-se o atributo cols e rows caso a página seja dividida em

14 Frames <HTML> <HEAD><TITLE>Assunto X</TITLE></HEAD> <FRAMESET COLS="20%, 80%"> <FRAME SRC="indice1.html"> <FRAME SRC="apresenta.html" NAME="principal"> </FRAMESET> </HTML> Assim, no código acima vemos que a página indice1.html será mostrada na primeira coluna (que ocupará 20% da tela), e a página apresenta.html será mostrada na segunda (ocupando 80% da tela).

html" NAME="principal"> </FRAMESET> </HTML> Assim, no código acima vemos que a página

15 Animações, Vídeos e outras mídias Para embutir arquivos de diferentes mídias, como animações em flash e vídeo, usa-se a tag <EMBED></EMBED>. Atributos: src: informa o endereço do objeto a ser inserido na página; type: o tipo do objeto height: a altura do objeto. width: a largura do objeto.

Atributos: src: informa o endereço do objeto a ser inserido na página;

16 Animações, Vídeos e outras mídias Também podem ser usados atributos como: hspace: informa o espaçamento horizontal entre o objeto e o texto. vspace: informa o espaçamento vertical entre o objeto e o texto. hidden: marca o objeto como escondido (true) ou não (false) autostart: executa automaticamente o objeto (true) ou não (false) loop: se o objeto repetirá ao chegar no final (true) ou não (false) pluginspage: caso o plugin necessário para rodar o objeto não estiver instalado, informa qual a página que o usuário deverá baixá-lo.

hidden: marca o objeto como escondido (true) ou não (false) autostart: executa automaticamente o objeto (true) ou não (false) loop:

17 iframe (inline frames) O iframe é uma tag que cria um frame dentro da página HTML, em vez de "dividir" a página. É muito utilizado para exibir um conteúdo específico dentro de uma página como um texto ou arquivo multimídia. <iframe width="420" height="345" src=" frameborder="0" allowfullscreen></iframe>

É muito utilizado para exibir um conteúdo específico dentro de uma página como um

Documentos relacionados

Autoria Web. Professor: Diego Oliveira. Conteúdo 02: Principais Tags HTML

Autoria Web. Professor: Diego Oliveira. Conteúdo 02: Principais Tags HTML Autoria Web Professor: Diego Oliveira Conteúdo 02: Principais Tags HTML Diferença de HTML e XHTML Os elementos XHTML devem estar devidamente aninhados Os documentos XHTML devem estar bem-formados Os nomes