TECNOLOGIA E PROGRAMAÇÃO WEB

Transcrição

1 TECNOLOGIA E PROGRAMAÇÃO WEB AULA 6 - MÓDULO 2 Formulários, vídeo e áudio LICENCIATURA EM AUDIOVISUAL E MULTIMÉDIA /2017 DOCENTE: Joana Souza / jsouza@escs.ipl.pt

2 HTML - Formulários Em HTML os formulários são elementos que permitem ao utilizador inserir informação que poderá ser submetida para uma aplicação. Os formulários podem conter vários elementos de input como caixas de texto, listas de selecção ou caixa para upload de ficheiros. <form action= index.html method= GET > </form> Quando declaramos um formulário devemos definir os seguintes atributos: action - permite definir o url para onde será submetido o formulário method - permite definir o método http através do qual a informação será enviada (pode ser GET ou POST).

3 HTML - Formulários Input de texto Um input do tipo text permite apresentar um campo para introdução de texto <input type= text name= phone placeholder= Telefone required> Um elemento input do tipo text apresenta na página um campo de introdução de texto. Atributos type - define o tipo de input. name - define o nome da variável que vai guardar o valor inserido. placeholder - define o texto a apresentar quando o campo está vazio. required - define se o campo é de preenchimento obrigatório.

4 HTML - Formulários Input de Um input do tipo permite inserir um campo para introdução de . <input type= name= correio placeholder= required> Atributos type - define o tipo de input. name - define o nome da variável que vai guardar o valor inserido. placeholder - define o texto a apresentar quando o campo está vazio. required - define se o campo é de preenchimento obrigatório.

5 HTML - Formulários Textarea Um elemento textarea permite apresentar uma caixa para inserção de texto. <textarea name= subject placeholder= Assunto required> </textarea> Atributos name - define o nome da variável que vai guardar o valor inserido. placeholder - define o texto a apresentar quando o campo está vazio. required - define se o campo é de preenchimento obrigatório.

6 HTML - Formulários Submit O input do tipo submit permite apresentar um botão que ao ser clicado irá submeter o formulário em que estiver contido. <input type= submit value= Enviar > Atributos type - define o tipo de input. value - define o texto a ser apresentado no botão. Outros tipos de inputs

7 HTML - Vídeo Video Uma das novidades do HTML5 é a possibilidade de incluir vídeo num documento HTML sem ter de recorrer a aplicações ou plugins externos. <video poster="images/cover.jpg" controls> <source src="video.mp4" type="video/mp4" /> <source src="video.ogg" type='video/ogg' /> <source src="video.webm" type='video/webm' /> </video> Através da tag <video> podemos mostrar um vídeo na nossa página definindo uma ou mais sources do ficheiro de vídeo. Atributos poster -permite definir a imagem a apresentar quando o vídeo está parado. controls - permite definir se os controlos de vídeo são visíveis

8 HTML - Vídeo <video poster="images/cover.jpg" controls> <source src="video.mp4" type="video/mp4" /> <source src="video.ogg" type='video/ogg' /> <source src="video.webm" type='video/webm' /> </video> A declaração de múltiplas sources pode resolver problemas relacionados com a compatibilidade dos browsers com os vários formatos de vídeo.

9 HTML - Áudio Áudio O HTML5 permite incluir áudio num documento HTML sem ter de recorrer a aplicações ou plugins externos. <audio controls> <source src="music/song.ogg" type="audio/ogg"> <source src="music/song.mp3" type="audio/mpeg"> </audio> Através da tag <audio> podemos mostrar um player de áudio na nossa página definindo uma ou mais sources do ficheiro de áudio. Atributos controls - permite definir se os controlos de vídeo são visíveis

10 CSS3 border-radius Define o arredondamento dos cantos de um elemento div{ border-radius: 5px; } Definir o arredondamentos diferentes para as várias direcções div{ border-top-left-radius: 10px; border-top-right-radius: 20px; border-bottom-right-radius: 10px; border-bottom-left-radius: 20px; } div{ border-radius: 10px 20px 10px 20px; }

11 CSS3 background-size Define a dimensão de uma imagem de fundo div{ background-size: cover; } background-attachment Define se uma imagem de fundo é fixa em relação ao scroll da janela div{ background-attachment: fixed; }

12 Exercício Download