Baixe o app para aproveitar ainda mais
Leia os materiais offline, sem usar a internet. Além de vários outros recursos!
Aula - HTML5
Faça como milhares de estudantes: teste grátis o Passei Direto
Esse e outros conteúdos desbloqueados
16 milhões de materiais de várias disciplinas
Impressão de materiais
Agora você pode testar o
Passei Direto grátis
Faça como milhares de estudantes: teste grátis o Passei Direto
Esse e outros conteúdos desbloqueados
16 milhões de materiais de várias disciplinas
Impressão de materiais
Agora você pode testar o
Passei Direto grátis
Faça como milhares de estudantes: teste grátis o Passei Direto
Esse e outros conteúdos desbloqueados
16 milhões de materiais de várias disciplinas
Impressão de materiais
Agora você pode testar o
Passei Direto grátis
Faça como milhares de estudantes: teste grátis o Passei Direto
Esse e outros conteúdos desbloqueados
16 milhões de materiais de várias disciplinas
Impressão de materiais
Agora você pode testar o
Passei Direto grátis
Compartilhar
Prévia do material em texto
Introdução ao Desenvolvimento Web Adaptado de Prof. Maria Adelina Raupp Sganzerla HTML5 O padrão HTML foi desenvolvido pelo W3C ou pelo World Wide Web Consortium em 1997. Como já vimos, em HTML, as tags são usadas para definir estruturas de texto; Tags e elementos são definidos usando os caracteres <e>. O HTML tem visto muitas atualizações ao longo do tempo, e atualmente, a versão HTML mais recente é HTML5. HTML5 é, naturalmente, uma linguagem de marcação, mas adicionou uma infinidade de recursos para o original HTML e erradicou alguns dos rigores que estava presente no XHTML. A principal diferença entre HTML e HTML5 pode ser que nem áudio e nem vídeo sejam um componente de HTML, enquanto que ambos podem ser considerados partes integrantes do HTML5. A estrutura básica do HTML5 continua sendo a mesma das versões anteriores, há apenas algumas exceções na escrita do Doctype, onde este deve ter como primeira linha de código do documento antes da tag <html>. O Doctype (que não é uma tag HTML) indica para o navegador qual especificação de código utilizar <!DOCTYPE HTML>. Na tag <html> o atributo lang passa a ser necessário para que se saiba qual é a linguagem principal do documento. Observa-se que o atributo lang não é restrito à tag <html>, podendo ser utilizado também em qualquer outro elemento para indicar o idioma do texto representado, no nosso caso Português brasileiro <HTML lang=”pt-br”>. A tag <head> mantém os metadados (que são informações sobre a página e o conteúdo ali publicado) da página web, assim ela traz a tag <meta> que define quais são as informações correspondentes, por exemplo, qual é o formato dos caracteres utilizados na página (segundo uma tabela de caracteres padrão, de âmbito internacional). Para saber mais sobre esse formato acesse esse link: http://www.linhadecodigo.com.br/artigo/3534/como- declarar-charset-em-html-e-outras-linguagens.aspx. A Figura 1 apresenta a estrutura básica de um código HTML5, para uma página web em língua portuguesa. Figura 1 – Estrutura básica do HTML5 Observe que no navegador não existe diferença na interpretação, conforme é demostrado na Figura 2. http://www.linhadecodigo.com.br/artigo/3534/como-declarar-charset-em-html-e-outras-linguagens.aspx http://www.linhadecodigo.com.br/artigo/3534/como-declarar-charset-em-html-e-outras-linguagens.aspx Introdução ao Desenvolvimento Web Adaptado de Prof. Maria Adelina Raupp Sganzerla Figura 2 – Visualização no navegador da estrutura básica do HTML5 É importante ressaltar que os áudios, vídeos e animações foram tratados de maneira diferente pelos principais navegadores, ao longo dos anos. Diferentes formatos foram suportados e alguns ainda requerem programas auxiliares adicionais (plug-ins) para serem executados. Multimídia Os aspectos multimídia de uma página web vêm sendo aperfeiçoados, explorados e utilizados pelos usuários e, para tanto, é necessário possuir elementos disponíveis para trabalhar-se com tal perspectiva. Assim, alguns elementos são apresentados, principalmente aqueles relacionados a áudio e vídeo. Os elementos de multimídia (como áudio ou vídeo) são armazenados em arquivos de mídia. Os arquivos multimídia possuem formatos e extensões diferentes, sendo os mais comuns: .swf, .wav, .mp3, .mp4, .mpg, .wmv e .avi. O MP4 é o novo e futuro formato para vídeo na Internet, também recomendado pelo YouTube, suportado pelo Flash Players e pelo HTML5. Conforme é apresentado pelo site w3schools (2020), para inserir vídeo em uma página web, é necessário utilizar o elemento video, definido por meio da tag: <video width="320" height="240" controls> <source src="Filme.mp4" type="video/mp4"> Seu navegador não suporta o formato do vídeo. </video> Observe o código apresentado na Figura 3. Introdução ao Desenvolvimento Web Adaptado de Prof. Maria Adelina Raupp Sganzerla Figura 3 – Código para inserção de vídeo O atributo controls adiciona controles de vídeo, como reprodução, pausa e volume. Já width (altura) e height (largura) configuram o tamanho do vídeo a ser apresentado. O elemento <source> permite especificar arquivos de vídeo alternativos que o navegador pode escolher. O navegador usará o primeiro formato reconhecido. E por fim, o texto entre as tags <video> e </video> será exibido somente nos navegadores que não suportam o elemento <video>. A Figura 4 apresenta a visualização pelo navegador FireFox. Figura 4 – Visualização do vídeo pelo navegador Para inserir áudio em uma página web, utiliza-se o elemento audio, definido por meio da tag: <audio controls> <source src="Persona.mp3" type="audio/mpeg"> Seu navegador não suporta esse formato de áudio. </audio> Introdução ao Desenvolvimento Web Adaptado de Prof. Maria Adelina Raupp Sganzerla O atributo controls adiciona controles de áudio, como reprodução, pausa e volume. O elemento <source> permite especificar arquivos de áudio alternativos que o navegador pode escolher, caso necessário, porém o navegador usará para reproduzir o primeiro formato reconhecido. O texto entre as tags <audio> e </audio> será exibido apenas em navegadores que não suportam o <audio> elemento. A Figura 5 apresenta o código para a inserção de áudio. Figura 5 – Código para inserção de áudio A Figura 6 apresenta a visualização pelo navegador Firefox da inserção de áudio. Figura 6 – Código para inserção de áudio Bibliografia HTML5. Um guia de referência para os desenvolvedores web. Disponível em: http://tableless.com.br/html5/?chapter=11. Acesso em: 20 de abr. de 2020. W3SCHOOLS. The world's largest web developer site. Disponível em: https://www.w3schools.com/html/html_media.asp. Acesso em: 20 de abr. de 2020.
Materiais relacionados
Perguntas relacionadas
Compartilhar