HTML - Parte 2, Notas de estudo de Matemática

Baixe HTML - Parte 2 e outras Notas de estudo em PDF para Matemática, somente na Docsity!

2 – HTML – Inserindo objetos

Vinicius A. de Souza [email protected]

Sumário

• Imagem.................................................................................................................................................
• Links
  • Links para locais da mesma página.................................................................................................
• Áudio e vídeo.......................................................................................................................................
  • Som de fundo...................................................................................................................................
  • Player de áudio/vídeo.......................................................................................................................
  • Atributos da tag ............................................................................................................
• Letreiro.................................................................................................................................................
  • Principais atributos da tag ......................................................................................
• Atividade A – Marquee com fotos......................................................................................................
• Atividade B - Menu flutuante.............................................................................................................
• Atividade C – Desenvolvimemento de site........................................................................................

c) Altura e largura

Estes atributos especificam a largura e a altura da imagem. Podem ser dados os valores em pixels ou serem proporcionais ao tamanho que a figura ocupará na página. Uma figura com dimensões proporcionais às vezes pode aparecer repuxada na página. Exemplos:

d) Texto explicativo

O atributo ALT exibe uma descrição quando o cursor move-se sobre a imagem. Existem usuários que utilizam navegadores incapazes de exibir imagens ou ajustam o navegador para não carregar imediatamente às imagens, devido á demora no carregamento das páginas. O texto alternativo possibilita que saibam do que se trata a imagem mesmo antes que sejam carregadas. e) Espaços vertical e horizontal

Especifica o espaço vertical (VSPACE) e o espaço horizontal (HSPACE) que pode aparecer entre a imagem e o texto mais próximo ou até mesmo para outra imagem na linha corrente. O valor é dado em pixels. Exemplos:

Abaixo, é mostrado um exemplo de utilização da imagem. Copie o código abaixo para sua página e aproveite para modificar os atributos da tag IMG, testando novas possibilidades. Não se esqueça de configurar corretamente o endereço da imagem que será inserida.

Desenvolvimento Web

A HTML (HyperText Markup Language) é uma linguagem de marcação baseada em texto utilizada para escrevermos páginas que serão lidas por navegadores web. Simplificando, é uma linguagem para escrever páginas web. Para escrevermos páginas, é necessário apenas um editor de texto.

A HTML (HyperText Markup Language) é uma linguagem de marcação baseada em texto utilizada para escrevermos páginas que serão lidas por navegadores web. Simplificando, é uma linguagem para escrever páginas web. Para escrevermos páginas, é necessário apenas um editor de texto.

Atividade 1: Teste outros valores para os atributos da tag .

Links

Um dos principais diferenciais da internet m relação às outras mídias é o conceito de hipertexto, ou seja, é possível criarmos um documento que se vincula a outros documentos por meio de ligações especiais chamadas links (ou hiperlinks). Portanto, é possível criarmos links para páginas do nosso próprio site, páginas externas ao nosso site ou até mesmo arquivos (que ficarão, neste caso, disponíveis para download), além de um link para envio de e-mail. Iremos criar um link utilizando a tag , juntamente com o atributo HREF. Texto exibido

Agora criaremos um link para este destino: Clique para ver o fim Construa o exemplo abaixo para testar (assegure-se de nomear esta página com o nome index.html):

Desenvolvimento Web

Fim do texto

A HTML (HyperText Markup Language) é uma linguagem de marcação baseada em texto utilizada para escrevermos páginas que serão lidas por navegadores web. Simplificando, é uma linguagem para escrever páginas web. Para escrevermos páginas, é necessário apenas um editor de texto.

A HTML (HyperText Markup Language) é uma linguagem de marcação baseada em texto utilizada para escrevermos páginas que serão lidas por navegadores web. Simplificando, é uma linguagem para escrever páginas web. Para escrevermos páginas, é necessário apenas um editor de texto.

Inicio do texto

Áudio e vídeo

O usuário somente poderá ouvir som em uma página se seu browser possuir recursos necessários à execução do respectivo formato de arquivo. Os arquivos MIDI e WAV geralmente são suportados pelos browsers. Já os arquivos em formato MP3 e o Real Áudio requerem instalação, de plug-in, caso o browser não possua. Uma página que contenha arquivos de som precisa ficar hospedada em um servidor devidamente configurado para aceitar tais arquivos. Caso contrário, quando o usuário clicar em links de acesso aos arquivos sonoros será exibida uma página contendo uma série de caracteres estranhos. O mesmo ocorre para os videos.

Som de fundo

Para colocar um som de fundo em sua página, use a tag dentro da tag ou da tag , como mostra o exemplo abaixo.

Som de fundo

Escute a música de fundo!!!

Observação: O atributo LOOP=-1 indica que o som ficará executando indefinidamente.

Player de áudio/vídeo

Para inserir um player de música ou vídeo em sua página html, use a tag juntamente com o atributo SRC, que receberá o endereço do arquivo.

Veja o exemplo abaixo:

Especifica o tipo de movimento que será usado para animar o texto do letreiro. As opções de movimento são:

• SCROLL: Permite ao texto passar continuamente pelo letreiro na direção especificada, entrando por um lado e saindo pelo outro.
• SLIDE: Permite ao texto passar por um dos cantos do letreiro, parando ao chegar no canto oposto e permanecendo na tela.
• ALTERNATE: Permite ao texto passar de um lado a outro das extremidades do letreiro, permanecendo na tela o tempo todo. Exemplo:

Desenvolvimento web

Desenv. Web Desenv. Web Desenv. Web

b) BGCOLOR texto Simplesmente especifica a cor de fundo do letreiro. Obedece às mesmas configurações para cor, ou seja, você pode usar o nome da cor em inglês ou o seu código hexadecimal. c) DIRECTION

Desenvolvimento web

Desenv. Web Desenv. Web Desenv. Web Desenv. Web

d) HEIGHT e WIDTH texto Especificam, respectivamente, a altura e a largura do letreiro. O valor pode ser dado em pixels ou em relação à altura da janela em que a página será exibida. Exemplo:

Desenvolvimento web

Letreiro Letreiro

e) HSPACE e VSPACE texto Definem, respectivamente, as margens à direita e à esquerda do letreiro e acima e abaixo do letreiro. Exemplo:

Atividade A – Marquee com fotos

Podemos utilizar a tag para fazer, por exemplo, um "SlideShow". O procedimento é o mesmo que com texto. Só que agora vamos fazer o MARQUEE “parar” quando passar o mouse por cima, e quando tirar de cima ele voltar a andar. Veja que é fácil, basta colocar os atributo onmouseover="this.stop()" onmouseout="this.start()" dentro do marcador Exemplo:

Antes nós colocávamos um texto dentro das delimitações do marcador, mas agora nós vamos colocar fotos usando marcadores . Veja como fica:

Desenvolvimento web

Neste pequeno slide feito aí em cima foram colocados 5 fotos, e elas estão uma em baixo da outra, por isso a necessidade do marcador
, caso não seja colocado às fotos irão ficar uma do lado da outra. A largura do MARQUEE é de 200 pixels. Repare que foi colocado também o atributo DIRECTION="DOWN" para que as fotos deslizem de cima para baixo na vertical. Em vez de ser de um lado pro outro, na horizontal. Neste exemplo foi usado fotos, mas tudo que colocar dentro dos marcadores será "arrastado" por ele. Qualquer marcador, como Tabelas, Vídeos, Listas, etc.

Atividade B - Menu flutuante

Agora que você aprendeu a utilizar o marquee, crie um menu flutuante, isto é, coloque imagens no marque, sendo que cada imagem é um link para uma página diferente. Modifique o atributo DIRECTION da tag MARQUEE para “right”, de forma que o menu deslize da esquerda para a direita.

Atividade C – Desenvolvimemento de site

Crie um site sobre um tema de sua preferência utilizando o layout abaixo. Tente utilizar todos os conceitos aprendidos nas aulas. Crie quatro páginas html:

1. index.html (deverá conter informações iniciais do site)
2. tags.html (deverá conter um resumo sobre o html e as tags verificas nesta aula e links)
3. videos.html (deverá inserir videos relacionados ao assunto. Utilize o youtube)
4. apostilas.html (deverá conter links para download das apostilas de aula) Algumas sugestões:

• Crie um menu estático com links para as páginas
• Adicione uma imagem na mesma linha do nome do site e adicione um link a esta imagem para o site da escola
• Crie um letreiro no fim da página com o nome do autor do site

Nome do site

Home --- HTML --- Vídeos --- Apostilas Adicione aqui conteúdo Crie aqui um letreiro