Multimídia e embedding

Tradução em progresso.

Nós vimos muito sobre texto até aqui nesse curso, mas a internet seria muito chata se usassemos apenas texto. Vamos começar a ver como fazer a internet criar vida, com conteúdo mais interessante! Esse módulo explora como usar HTML para incluir multimídia em sua pagina web,usando as diferentes formas de inclusão de imagens , e como adicionar video, audio, e até paginas da web inteiras.

Pré-requisitos

Antes de iniciar esse módulo, você deve ter um conhecimento razoável de HTML, como previamente abrangido em introdução a HTML. Se você não estudou esse módulo (ou algo similar), estude-o primeiro e depois retorne!

Nota: Se você está trabalhando em um computador/tablet/outro dispositivo onde você não tem a habilidade de criar seus próprios arquivos, você pode testar (maior parte) dos exemplos de códigos em um programa online para codar tais como JSBin ou Thimble.

Guias

Esse módulo contém os seguintes artigos, que vão passar por todos os fundamentos para inserir multimídia em páginas da web.

Imagens em HTML
Existem outros tipos de multimídia para considerar, porém é lógico começar com o modesto elemento <img> , usado para inserir uma simples imagem em uma página da web. Nesse artigo vamos aprender a usar esse elemento com mais profundidade, incluindo os básicos, anotando com legendas usando <figure>  e como se relaciona com imagens de fundo em CSS.
Conteúdo em áudio e video
Agora nós iremos aprender como usar os elementos HTML5 <video>  e  <audio> , para inserir video e audio em nossa página; incluindo o basico, fornecendo acesso a diferentes tipos de arquivo para navegadores diferentes, adicionando legenda , e como adicionar alternativas para navegadores mais antigos.
From <object> to <iframe> — other embedding technologies
At this point we'd like to take somewhat of a sideways step, looking at a couple of elements that allow you to embed a wide variety of content types into your webpages: the <iframe><embed> and <object> elements. <iframe>s are for embedding other web pages, and the other two allow you to embed PDFs, SVG, and even Flash — a technology on its way out, but which you may still see semi-regularly.
Adding vector graphics to the Web
Vector graphics can be very useful in certain situations. Unlike regular formats like PNG/JPG, they don't distort/pixelate when zoomed in — they can remain smooth when scaled. This article introduces you to what vector graphics are, and how to include the popular SVG format in web pages.
Responsive images
With so many differerent device types now able to browse the Web — from mobile phones to desktop computers — an essential concept to master in the modern web world is responsive design. This refers to the creation of webpages that can automatically change their features to suit different screen sizes, resolutions, etc. This will be looked at in much more detail in a CSS module later on, but for now we'll look at the tools HTML has available to create responsive images, including the <picture> element.

Assessments

The following assessments will test your understanding of the HTML basics covered in the guides above:

Mozilla splash page
In this assessment, we'll test your knowledge of some of the techniques discussed in this module's articles, getting you to add some images and video to a funky splash page all about Mozilla!

See also

Add a hitmap on top of an image
Image maps provide a mechanism to make different parts of an image link to different places (think of a map, linking through to further information about each different country you click on.) This technique can sometimes be useful.
Web literacy basics 2

An excellent Mozilla foundation course that explores and tests some of the skills talked about in the Multimedia and embedding module. Dive deeper into the basics of composing webpages, designing for accessibility, sharing resources, using online media, and working open.

Etiquetas do documento e colaboradores

 Colaboradores desta página: MatheusKozaku
 Última atualização por: MatheusKozaku,