Adicionar mídia

Navegamos na Internet em busca de conteúdo interessante e informativo, que geralmente encontramos na forma de texto simples. Para acompanhar este texto simples, o HTML fornece formas de incorporar rich media na forma de imagens, faixas de áudio e vídeos, bem como para incorporar conteúdo de outra página da web sob a forma de um quadro em linha.

A capacidade de incluir imagens, faixas de áudio, vídeos e quadros internos nos sites já existe há algum tempo. O suporte do browser para imagens e quadros em linha geralmente foi bastante bom. E enquanto a capacidade de adicionar faixas de áudio e vídeos a um site existe há anos, o processo foi bastante difícil. Felizmente, esse processo melhorou e é muito mais fácil com o suporte diretamente do HTML.

Hoje, podemos usar livremente imagens, áudio, vídeo e frames inline sabendo que esse conteúdo é suportado em todos os principais browsers.

Adicionar imagens

Para adicionar imagens a uma página, usamos o elemento <img> inline. O elemento <img> é um elemento auto-contendo, ou vazio, o que significa que ele não envolve qualquer outro conteúdo e existe como uma única tag. Para que o elemento <img> funcione, um atributo src e valor devem ser incluídos para especificar a origem da imagem. O valor do atributo src é um URL, geralmente relativo ao servidor onde o site está hospedado.

Em conjunto com o atributo src, o atributo alt (texto alternativo), que descreve o conteúdo de uma imagem, deve ser aplicado. O valor do atributo alt é apanhado pelos motores de busca e tecnologias assistivas para ajudar a transmitir a finalidade de uma imagem. O texto alt será exibido no lugar da imagem se, por algum motivo, a imagem não estiver disponível.

<img src="dog.jpg" alt="A black, brown, and white dog wearing a kerchief">

Adicionar imagem Demo

Formatos de imagem suportados

As imagens vêm numa variedade de diferentes formatos de arquivo, e cada browser pode suportar (ou não suportar) formatos diferentes. Em geral, os formatos suportados mais comuns on-line são imagens gif, jpg e png. Destes, os formatos mais utilizados atualmente são jpg e png. O formato jpg fornece imagens de qualidade com altas pontuações de cores, mantendo um tamanho de arquivo decente, ideal para tempos de carregamento mais rápidos. O formato png é ótimo para imagens com transparências ou baixas contagens de cores. Nós geralmente vemos imagens de jpg usadas para fotografias e imagens png usadas para ícones ou padrões de fundo.

Dimensão das imagens

É importante identificar o tamanho de uma imagem para indicar ao browser quão grande a imagem deve ser antes da página mesmo carregar, assim, o navegador pode reservar espaço para a imagem e renderizar a página mais rapidamente. Existem algumas maneiras diferentes de dimensionar as imagens para que elas funcionem bem numa página. Uma opção é usar os atributos de largura e altura diretamente na tag <img> em HTML.

Além disso, as imagens podem ser dimensionadas usando as propriedades de largura e altura em CSS. Quando os atributos HTML e as propriedades CSS são usados, os atributos CSS terão precedência sobre os atributos HTML.

Especificar uma largura ou altura fará com que a outra dimensão se ajuste automaticamente para manter a relação de aspecto da imagem. Como um exemplo, se queremos que uma imagem seja de 200 pixels de altura, mas é menos especificamente preocupada com a amplitude, podemos ajustar a altura para 200 pixels e a largura da imagem será ajustada de acordo. Definir uma largura e altura também funcionará, no entanto, fazê-lo pode quebrar a relação de aspecto de uma imagem, fazendo com que ela pareça distorcida.

img {

height: 200px;

width: 200px;

}

Dimensão das imagens Demo

Ao usar os atributos de largura e altura diretamente em HTML fornece algum valor semântico, observando o tamanho original da imagem, pode ser difícil gerir as inúmeras imagens que precisam de ser do mesmo tamanho. Neste caso, é prática comum usar CSS para redimensionar as imagens.

Posicionar imagens

Podemos usar várias abordagens diferentes para posicionar imagens numa página web. Por padrão, as imagens são posicionadas como elementos em nível de linha, no entanto, as suas posições podem ser alteradas usando CSS, especificamente o flutuador, a exibição e as propriedades do modelo de caixa, incluindo preenchimento, borda e margem.

Imagens de Posicionamento Inline

O elemento <img> é, por padrão, um elemento de nível in-line. Adicionar uma imagem sem estilos a uma página colocará essa imagem na mesma linha que o conteúdo que a rodeia. Além disso, a altura da linha em que uma imagem aparece será alterada para coincidir com a altura da imagem, o que pode criar grandes lacunas verticais dentro dessa linha.

<p>Gatsby is a black, brown, and white hound mix puppy who loves howling at fire trucks and collecting belly rubs. <img src="dog.jpg" alt="A black, brown, and white dog wearing a kerchief"> Although he spends most of his time sleeping he is also quick to chase any birds who enter his vision.</p>

Imagens de Posicionamento Inline Demo

Deixar imagens intactas no seu posicionamento padrão não é muito comum. Na maioria das vezes, as imagens são exibidas como elementos de nível do bloco ou flutuam para um lado.

Bloquear posicionamento de imagens

Adicionar a propriedade de exibição a uma imagem e definir o seu valor para bloquear força a imagem a ser um elemento de nível do bloco. Isso faz com que a imagem apareça na sua própria linha, permitindo que o conteúdo circundante seja posicionado acima e abaixo da imagem.

img {

display: block;

}

Bloquear posicionamento de imagens Demo

Posicionar imagens Eliminar, Esquerda ou Direita

Às vezes, exibir uma imagem como inline ou block, ou talvez até mesmo inline-block, não é ideal. Podemos querer que a imagem apareça no lado esquerdo ou direito do seu elemento contendo, enquanto todo o outro conteúdo envolve a imagem, conforme necessário. Para fazer isso, usamos a propriedade flutuante com um valor de esquerda ou direita.

Lembrando de volta à Lição 5, "Posicionando Conteúdo", lembramos que a propriedade flutuante foi originalmente destinada a posicionar as imagens à esquerda ou à direita de um elemento contendo. Agora, vamos usá-lo para esse propósito original.

Flutuar uma imagem é um começo, no entanto, todos os outros conteúdos serão alinhados diretamente contra ele. Para fornecer espaço em torno de uma imagem, usaremos a propriedade de margem. Além disso, podemos usar as propriedades de preenchimento, borda e fundo para criar um quadro para a imagem, se desejar.

img {

background: #eaeaed;

border: 1px solid #9799a7;

float: right;

margin: 8px 0 0 20px;

padding: 4px;

}

Demonstração de imagens flutuantes

Quando usar um elemento de imagem vs uma imagem de plano de fundo

Existem duas formas principais de adicionar imagens a uma página Web. Uma maneira, como abordada aqui, é usar o elemento <img> dentro do HTML. Outra maneira é usar a propriedade background ou imagem de fundo dentro do CSS para atribuir uma imagem de fundo a um elemento. Qualquer uma das opções fará o trabalho, no entanto, eles têm casos de uso específico.

O elemento <img> no HTML é a opção preferida quando a imagem que está a ser usada contém o valor semântico e o seu conteúdo é relevante para o conteúdo da página.

A propriedade de plano de fundo ou imagem de plano de fundo dentro de CSS é a opção preferida quando a imagem que está a ser usada faz parte do design ou da interface do utilizdor da página. Como tal, não é diretamente relevante para o conteúdo da página.

O elemento <img> é bastante popular e, quando foi originalmente adicionado à especificação HTML, mudou para sempre a forma como os sites foram criados.

Na prática

Agora que sabemos como adicionar e posicionar imagens numa página, vamos ver o no nosso site da Conferência Styles e ver onde podemos adicionar algumas imagens.

1. Vamos começar a adicionar algumas imagens à nossa página inicial. Especificamente, adicionaremos uma imagem dentro de cada uma das secções do teaser promovendo algumas das nossas páginas.

Antes de entrar no código, vamos criar uma nova pasta chamada "imagens" dentro da nossa pasta "ativos". Então, dentro da pasta "imagens", vamos criar uma outra pasta chamada "casa" especificamente para as nossas imagens da página inicial. Dentro da pasta "casa", adicionaremos três imagens: speakers.jpg, schedule.jpg e venue.jpg. (Para referência, essas imagens podem ser baixadas dentro de um arquivo zip.)

Então, dentro do nosso arquivo index.html, cada secção de teaser tem um elemento <a> envolvendo um elemento <h3> e um <h5>. Vamos mover o elemento <h5> acima do elemento <a> e substituí-lo por um elemento <img>. O valor do atributo src para cada elemento <img> corresponderá à estrutura da pasta e ao nome do arquivo que configuramos, e o valor do atributo alt descreverá o conteúdo de cada imagem.

O HTML para o nosso primeiro provocador, para a página Speakers, ficará assim:

<section class="teaser col-1-3">

<h5>Speakers</h5>

<a href="speakers.html">

<img src="assets/images/home/speakers.jpg" alt="Professional Speaker">

<h3>World-Class Speakers</h3>

</a>

<p>Joining us from all around the world are over twenty fantastic speakers, here to share their stories.</p>

</section>

Continuemos com este padrão para ambos os teasers da página Schedule e Venue.

1. Agora que adicionamos algumas imagens à nossa página inicial, precisamos limpar os seus estilos um pouco e garantir que eles se encaixem corretamente no layout da nossa página.

Como as imagens são elementos de nível interno por padrão, alteremos as nossas imagens dentro das secções do teaser para elementos de nível do bloco. Vamos também definir a sua largura máxima para 100% para garantir que não excedam a largura de suas respectivas colunas. Alterar esse valor de largura é importante porque permite que as nossas imagens se ajustem com a largura das colunas conforme necessário.

Por fim, rodemos os cantos das imagens levemente e apliquemos 22 pixels de margem inferior para as imagens, proporcionando uma pequena sala de respiração.

Uma vez que adicionamos estes novos estilos aos nossos estilos de página inicial existentes (usando a classe teaser como seletor qualificado para os elementos <img>), nosso CSS será assim:

.teaser img {

border-radius: 5px;

display: block;

margin-bottom: 22px;

max-width: 100%

}

1. Em seguida, vamos adicionar imagens de todos os alto-falantes na página Alto-falantes. Começaremos por criar uma pasta "alto-falantes" dentro da nossa pasta "imagens" e colocando imagens de todos os alto-falantes lá.

Dentro do arquivo speakers.html, vamos adicionar um elemento <img> dentro de cada elemento do <speaker> <aside>. Coloque cada elemento <img>dentro do elemento <div> com o valor do atributo da classe da informação do alto-falante, logo acima do elemento <ul>.

O valor de atributo src de cada imagem corresponderá à pasta "alto-falantes" que configuramos e ao nome do orador. O valor do atributo alt será o nome do orador.

O elemento <de lado>, como palestrante, ficará assim:

<aside class="col-1-3">

<div class="speaker-info">

<img src="assets/images/speakers/shay-howe.jpg" alt="Shay Howe"> <ul>

<li><a href="https://twitter.com/shayhowe">@shayhowe</a></li>

<li><a href="http://learn.shayhowe.com/">learn.shayhowe.com</a></li>

</ul>

</div>

</aside>

Este mesmo padrão para adicionar uma imagem deve ser aplicado a todos os outros alto-falantes.

1. Como fizemos com as imagens na nossa página inicial, queremos aplicar alguns estilos às imagens na página Alto-falantes.

Comecemos por aplicar a propriedade do limite do limite com um valor de 50%, transformando as nossas imagens em círculos. A partir daí, vamos definir uma altura fixa de 130 pixels para cada imagem e configurá-los para alinharmos verticalmente até o topo da linha em que residem.

Com a altura e o alinhamento vertical no lugar, apliquemos margens verticais às imagens. Usando uma margem negativa de 66 pixels na parte superior das imagens, separaremos ligeiramente do elemento <aside> e as tornamos centradas verticalmente com a margem superior do elemento <div> com um valor de atributo de classe do alto-falante. Então, aplicar uma margem de 22 pixels na parte inferior da imagem fornece espaço entre a imagem e o elemento <ul> abaixo dela.

Quando adicionamos esses novos estilos aos nossos estilos de página de alto-falantes existentes (usando a classe de informações de alto-falante como seletor qualificado para os elementos <img>), nosso CSS será assim:

.speaker-info img {

border-radius: 50%;

height: 130px;

margin: -66px 0 22px 0;

vertical-align: top;

}

1. Uma vez que estamos usando uma margem negativa agressiva no elemento <img> dentro do elemento <div> com um valor de atributo de classe da informação do alto-falante, precisamos remover o preenchimento na parte superior desse elemento <div>.

Anteriormente, estávamos a usar a propriedade padding com um valor de 22px, colocando assim 22 pixels de preenchimento na parte superior e inferior e 0 pixels de preenchimento à esquerda e à direita do elemento <div>. Vamos trocar essa propriedade e valorizar a propriedade do preenchimento, já que é o único preenchimento que precisamos identificar e usar um valor de 22 pixels.

O novo conjunto de regras de classe de alto-falante parece:

.speaker-info {

border: 1px solid #dfe2e5;

border-radius: 5px;

margin-top: 88px;

padding-bottom: 22px;

text-align: center;

}

Agora, as nossas páginas de casa e orador estão muito bem afiadas.

Adicionar áudio

O HTML5 fornece uma maneira rápida e fácil de adicionar arquivos de áudio a um site por meio do elemento <audio>. Tal como acontece com o elemento <img>, o elemento <audio> aceita um URL de origem especificado pelo atributo src. Ao contrário do elemento <img>, porém, o elemento <audio> requer tags de abertura e de fechO, que discutiremos em breve.

<audio src="jazz.ogg"></audio>

Atributos de áudio

Vários outros atributos podem acompanhar o atributo src no elemento <audio>, os mais populares incluem reprodução automática, controles, loop e pré-carregamento.

Os atributos de reprodução automática, controles e loop são atributos booleanos. Como atributos booleanos, eles não exigem um valor declarado. Em vez disso, quando cada um está presente no elemento <audio>, o seu valor será definido como verdadeiro e o elemento <audio> se comportará de acordo.

Por padrão, o elemento <audio> não é exibido numa página. Se o atributo booleano de reprodução automática estiver presente no elemento <audio>, nada aparecerá na página, mas o arquivo de áudio será executado automaticamente após o carregamento.

<audio src="jazz.ogg" autoplay></audio>

Para exibir o elemento <audio> numa página, o atributo booleano dos controles é necessário. Quando é aplicado ao elemento <audio>, o atributo booleano dos controles exibirá os controles de áudio padrão de um browser, incluindo controles de reprodução e pausa, busca e volume.

<audio src="jazz.ogg" controls></audio>

Atributos de áudio Demo

Quando presente no elemento <audio>, o atributo booleano do loop fará com que um arquivo de áudio seja repetido continuamente, do início ao fim.

Por fim, o atributo de pré-carga para o elemento <audio> ajuda a identificar quais, se houver, informações sobre o arquivo de áudio que devem ser carregadas antes do clipe ser reproduzido. Ele aceita três valores: nenhum, automático e metadados. O valor none não irá pré-carregar qualquer informação sobre um arquivo de áudio, enquanto o valor automático irá pré-carregar todas as informações sobre um arquivo de áudio. O valor dos metadados fica entre valores independentes e auto, já que irá pré-carregar qualquer informação de metadados disponível sobre um arquivo de áudio, como o comprimento do clipe, mas não todas as informações.

Quando o atributo de pré-carga não está presente no elemento <audio>, todas as informações sobre um arquivo de áudio são carregadas, como se o valor fosse definido como automático. Por esse motivo, usar o atributo de pré-carga com um valor de metadados ou nenhum é uma boa ideia quando um arquivo de áudio não é essencial para uma página. Isso ajudará a economizar largura de banda e permitir que as páginas sejam carregadas mais rapidamente.

Fallbacks de Áudio e Fontes Múltiplas

No momento, diferentes browsers suportam diferentes formatos de arquivos de áudio, sendo os três mais populares ogg, mp3 e wav. Para obter o melhor suporte para o browser, precisamos de usar um punhado de recursos de áudio, que serão incluídos nas tags de abertura e fecho de um elemento <audio>.

Para começar, removeremos o atributo src do elemento <audio>. Em vez disso, usaremos o elemento <source>, com um atributo src, junto dentro do elemento <audio> para definir uma nova fonte.

Usando um elemento <source> e um atributo src para cada formato de arquivo, podemos listar um formato de arquivo de áudio após o outro. Usaremos o atributo de tipo para ajudar rapidamente o browser a identificar quais tipos de áudio estão disponíveis. Quando um browser reconhece um formato de arquivo de áudio, ele irá carregar esse arquivo e ignorar todos os outros.

Como foi introduzido no HTML5, alguns browsers podem não suportar o elemento <audio>. Nesse caso, podemos fornecer um link para baixar o arquivo de áudio após qualquer elemento <fonte> no elemento <audio>.

<audio controls>

<source src="jazz.ogg" type="audio/ogg">

<source src="jazz.mp3" type="audio/mpeg">

<source src="jazz.wav" type="audio/wav">

Please <a href="jazz.mp3" download>download</a> the audio file.

</audio>

Para rever o código anterior, o elemento <audio> inclui o atributo booleano dos controles para garantir que o player de áudio seja exibido nos browsers que suportam o elemento. O elemento <audio> não inclui um atributo src e, em vez disso, envolve três elementos diferentes <fonte>. Cada elemento <source> inclui um atributo src que faz referência a um formato de arquivo de áudio diferente e um atributo de tipo para identificar o formato do arquivo de áudio. Como último recurso, se um browser não reconhecer nenhum dos formatos de arquivos de áudio, será exibido o link de âncora para fazer download do elemento.

Além do elemento <audio>, o HTML5 também introduziu o elemento <video>, que partilha algumas semelhanças com o elemento <audio>.

Adicionar Vídeo

Adicionar vídeo em HTML5 é muito parecido com a adição de áudio. Usamos o elemento <video> no lugar do elemento <audio>. Todos os mesmos atributos (src, reprodução automática, controles, loop e pré-carga) e os backups também se aplicam.

Com o elemento <audio>, se o atributo booleano dos controles não for especificado, o clip de áudio não será exibido. Com vídeos, se o atributo booleano dos controles não for especificado, o vídeo será exibido. No entanto, é bastante difícil de visualizar, a menos que o atributo booleano de reprodução automática também seja aplicado. Em geral, a melhor prática aqui é incluir o atributo booleano dos controles, a menos que haja uma boa razão para não permitir que os utilizadores comecem, parem ou reproduzam o vídeo.

Como os vídeos ocupam espaço na página, não faz mal especificar as suas dimensões, o que é mais comum é feito com propriedades de largura e altura em CSS. Isso ajuda a garantir que o vídeo não seja muito grande e permaneça dentro do layout implícito de uma página. Além disso, especificar um tamanho, como as imagens, ajuda o browser a renderizar vídeos mais rapidamente e permite colocar o espaço apropriado para que o vídeo seja exibido.

<video src="earth.ogv" controls></video>

Adicionar Vídeo Demo

Por razões de desempenho, esta demonstração de vídeo é hospedada localmente, no entanto, você ainda pode revisar e editar este código no CodePen.

Personalização de controlos de áudio e vídeo

Por padrão, os controlos do elemento <audio> e <video> são determinados por cada browser de forma independente. Dependendo da concepção de um site, pode ser necessária mais autoridade sobre a aparência do media player. Se for esse o caso, um jogador personalizado pode ser construído, mas exigirá um pouco de JavaScript para funcionar.

Além disso, se um jogador personalizado usa o elemento <img> como controlo, o valor do atributo alt deve indicar de forma explícita que a imagem é um controle e exige que a interação apropriada funcione.

Atributo de cartaz

Um atributo adicional disponível para o elemento <video> é o atributo do poster. O atributo poster permite-nos especificar uma imagem, sob a forma de uma URL, para ser exibida antes de um vídeo ser reproduzido. O exemplo abaixo usa uma captura de tela do vídeo como o poster para o vídeo da Terra.

<video src="earth.ogv" controls poster="earth-video-screenshot.jpg"></video>### Atributo de cartaz Demo

Por razões de desempenho, esta demonstração de vídeo é hospedada localmente, no entanto, você ainda pode revisar e editar este código no CodePen.

### Fallbacks de vídeo

Tal como acontece com o elemento <audio>, os recuos de vídeo também são necessários. O mesmo formato de marcação, com vários elementos <fonte> para cada tipo de arquivo e um recuo de texto simples, também se aplica no elemento <video>.

<video controls>

<source src="earth.ogv" type="video/ogg">

<source src="earth.mp4" type="video/mp4">

Please <a href="earth.mp4" download>download</a> the video.

</video>

Uma opção de retorno adicional que poderia ser usada no lugar de um recuo de texto simples é usar um vídeo embutido do YouTube ou Vimeo. Esses sites de hospedagem de vídeo permitem-nos fazer o upload dos nossos vídeos, fornecendo um player de vídeo padrão e permite-nos inserir os vídeos numa página usando um quadro em linha.

Formatos de arquivo de áudio e vídeo HTML5

O suporte do browser para os elementos <audio> e <video> varia, assim como os formatos de arquivo necessários com esses elementos. Cada browser possui os seus próprios formatos de arquivos de áudio e vídeo preferidos.

Existem algumas ferramentas que ajudam a converter um arquivo de áudio ou vídeo em diferentes formatos, e uma busca rápida proporcionará uma abundância de opções.

Adicionar quadros em linha

Outra maneira de adicionar conteúdo a uma página é incorporar outra página HTML na página atual. Isso é feito usando um quadro inline ou elemento <iframe>. O elemento <iframe> aceita o URL de outra página HTML dentro do valor do atributo src. Isso faz com que o conteúdo da página HTML incorporada seja exibido na página atual. O valor do atributo src pode ser um URL relativo à página em que o elemento <iframe> aparece ou um URL absoluto para uma página inteiramente externa.

Muitas páginas usam o elemento <iframe> para incorporar mídia numa página de um site externo, como Google Maps, YouTube e outros.

<iframe src="https://www.google.com/maps/embed?..."></iframe>

Adicionar demonstração de quadros em linha

Por razões de segurança, o CodePen não permite iframes dentro de amostras de código incorporado, no entanto, você pode revisar e editar este código no seu site.

O elemento <iframe> tem alguns estilos padrão, incluindo uma borda inserida e uma largura e altura. Esses estilos podem ser ajustados usando os atributos HTML frameborder, width e height ou usando as propriedades CSS de limite, largura e altura. As páginas referenciadas dentro do atributo src de um elemento <iframe> são reproduzidas pelas suas próprias regras, pois não herdam nenhum estilo ou comportamento da página em que são referenciados. Qualquer estilo aplicado a uma página que inclua um elemento <iframe> não será herdado pela página referenciada no elemento <iframe>. Além disso, os links dentro da página referenciada no elemento <iframe>serão abertos dentro desse quadro, deixando a página que contém o elemento <iframe> inalterado.

Na prática

Os quadros em linha fornecem uma ótima maneira de adicionar conteúdo dinâmico a uma página. Vamos dar uma chance ao atualizar a página do nosso local com alguns mapas.1. Antes de adicionar mapas ou frames inline, primeiro vamos preparar a nossa página Venue para uma grade de duas colunas. Abaixo da secção principal da página, adicionaremos um elemento <section> com o valor de atributo de classe da linha para identificar uma nova secção da página e incluiremos alguns estilos gerais, como um fundo branco e algum preenchimento vertical .

1. Antes de adicionar mapas ou frames inline, primeiro vamos preparar a nossa página Venue para uma grade de duas colunas. Abaixo da secção principal da página, adicionaremos um elemento <section> com o valor de atributo de classe da linha para identificar uma nova secção da página e incluiremos alguns estilos gerais, como um fundo branco e algum preenchimento vertical .

Diretamente dentro deste elemento <section> vamos adicionar um elemento <div> com o valor de atributo de classe da grade. A classe de grade centra o nosso conteúdo na página e prepara-se para as colunas de um terço e dois terços a seguir. Até agora, a seção principal do nosso arquivo venue.html parece-se com isto:

<section class="row">

<div class="grid">

...

</div>

</section>

1. Dentro do elemento <div> com o valor do atributo de classe da grade, teremos duas novas secções, uma para o local da conferência e outra para o hotel da conferência. Vamos adicionar dois novos elementos <section> e dar a cada um desses elementos <section> uma classe única que corresponde ao seu conteúdo. Usaremos essas classes para adicionar margens na parte inferior de cada seção. Nosso HTML agora deveria ficar assim:

<section class="row">

<div class="grid">

<section class="venue-theatre">

...

</section>

<section class="venue-hotel">

...

</section>

</div>

</section>

1. Agora que temos algumas classes para trabalhar, vamos criar uma nova secção dentro do nosso arquivo main.css para os estilos de página do local. Vamos adicionar uma margem de 66 pixels à parte inferior do elemento <section> com o valor do atributo da classe do local-teatro para inserir algum espaço entre ele e o elemento <section> abaixo dele. Então, adicionaremos uma margem de 22 pixels na parte inferior do elemento <section> com o valor de atributo da classe do venue-hotel para fornecer algum espaço entre ele e o elemento <footer> abaixo dele. A nova secção do local no arquivo main.css parece-se com o seguinte:

/*

========================================

Venue

========================================

*/

.venue-theatre {

margin-bottom: 66px;

}

.venue-hotel {

margin-bottom: 22px;

}

O elemento <section> com o valor de atributo de classe do hotel-venue tem uma margem inferior menor do que o elemento <section> com o valor de atributo de classe do local-teatro porque fica ao lado do preenchimento a partir do fundo do elemento <section> com o atributo de classe da linha. Adicionar essa margem e preenchimento juntos dá nos o mesmo valor que a margem inferior no elemento <section> com o valor do atributo de classe do local-teatro.

1. Agora é hora de criar as duas colunas dentro de cada um dos novos elementos <section>. Vamos começar por adicionar um elemento <div> com um valor de atributo de classe de col-1-3 para estabelecer uma coluna de um terço. Depois disso, adicionaremos um elemento <iframe> com um valor de atributo de classe de col-2-3 para estabelecer uma coluna de dois terços.

Tendo em mente que as classes de coluna criam os elementos <div> e <iframe> em elementos de bloco em linha, precisamos de remover o espaço vazio que irá aparecer entre eles. Para isso, abriremos um comentário HTML diretamente após a tag <div> de fecho, e fecharemos o comentário HTML imediatamente antes da tag <iframe> de abertura.

No total, nosso HTML para as colunas parece assim:

<section class="row">

<div class="grid">

<section class="venue-theatre"> <div class="col-1-3"></div><!--

--><iframe class="col-2-3"></iframe> </section> <section class="venue-hotel">

<div class="col-1-3"></div><!--

--><iframe class="col-2-3"></iframe> </section>

</div>

</section>

1. Dentro de cada um dos elementos <div> com um valor de atributo de classe de col-1-3, vamos adicionar o nome do local dentro de um elemento <h2>, seguido de dois elementos <p>. No primeiro elemento <p> vamos incluir o endereço do local, e no segundo elemento <p> vamos incluir o site do local (dentro de um link de âncora) e o número de telefone.

Dentro de cada um dos parágrafos, vamos usar o elemento de quebra de linha, <br>, para colocar pausas dentro do endereço e entre o site e o número de telefone.

Para o elemento <section> com o valor do atributo de classe do local-teatro, o HTML parece assim:

<section class="venue-theatre">

<div class="col-1-3">

<h2>Chicago Theatre</h2>

<p>175 N State St <br> Chicago, IL 60601</p>

<p><a href="http://www.thechicagotheatre.com/">thechicagotheatre.com</a> <br> (312) 462-6300</p>

</div><!--

--><iframe class="col-2-3"></iframe>

</section>

O mesmo padrão mostrado aqui para o teatro também deve ser aplicado ao hotel (usando, é claro, o endereço adequado, o site e o número de telefone).

1. Podemos pesquisar esses endereços no Google Maps. Uma vez que localizamos um endereço e criamos um mapa personalizado, temos a capacidade de incorporar esse mapa na nossa página. Seguir as instruções no Google Maps sobre como compartilhar e incorporar um mapa nos fornecerá o HTML para um elemento <iframe>.

Vamos copiar o elemento HTML- <iframe>, o atributo src e tudo na nossa página onde reside o nosso elemento <iframe> existente. Faremos isso para cada local, usando dois elementos <iframe> diferentes.

Ao copiar o elemento <iframe> do Google Maps, precisamos garantir que preservemos o atributo e o valor da classe, col-2-3, do nosso elemento <iframe> existente. Também precisamos ter cuidado para não prejudicar o comentário HTML que fecha diretamente antes da nossa tag <iframe> de abertura.

Olhando diretamente para o elemento <section> com o valor do atributo de classe do local-teatro novamente, o HTML parece assim:

<section class="venue-theatre">

<div class="col-1-3">

<h2>Chicago Theatre</h2>

<p>175 N State St <br> Chicago, IL 60601</p>

<p><a href="http://www.thechicagotheatre.com/">thechicagotheatre.com</a> <br> (312) 462-6300</p>

</div><!--

--><iframe class="col-2-3" src="https://www.google.com/maps/embed?pb=!1m5!3m3!1m2!1s0x880e2ca55810a493%3A0x4700ddf60fcbfad6!2schicago+theatre!5e0!3m2!1sen!2sus!4v1388701393606"></iframe>

</section>

1. Por fim, queremos garantir que ambos os elementos <iframe> que fazem referência ao Google Maps compartilhem a mesma altura. Para fazer isso, criaremos uma nova classe, local-mapa, e aplicamos a cada um dos elementos <iframe> ao lado do valor de atributo de classe col-2-3 existente.

O HTML para o elemento<section> com o valor do atributo de classe do local-teatro agora se parece com isto:

<section class="venue-theatre">

<div class="col-1-3">

<h2>Chicago Theatre</h2>

<p>175 N State St <br> Chicago, IL 60601</p>

<p><a href="http://www.thechicagotheatre.com/">thechicagotheatre.com</a> <br> (312) 462-6300</p>

</div><!--

--><iframe class="venue-map col-2-3" src="https://www.google.com/maps/embed?pb=!1m5!3m3!1m2!1s0x880e2ca55810a493%3A0x4700ddf60fcbfad6!2schicago+theatre!5e0!3m2!1sen!2sus!4v1388701393606"></iframe>

</section>

Uma vez que a classe do mapa do local é aplicada a cada elemento <iframe>, vamos criar a regra da classe de mapa do local dentro do nosso arquivo main.css. Inclui a propriedade altura com um valor de 264 pixels.

O conjunto de regras da classe de mapa do local parece assim:

.venue-map {

height: 264px;

}

Agora temos uma página do local, completa com mapas para os diferentes locais da nossa conferência.

Identificação semanticamente de figuras e legendas

Com HTML5 também veio a introdução dos elementos <figure> e <figcaption>. Esses elementos foram criados para marcar semanticamente conteúdo autônomo ou mídia, comum com uma legenda. Antes do HTML5, isso era frequentemente feito usando uma lista ordenada. Enquanto uma lista ordenada funcionava, a marcação não era semanticamente correta.

Figura

O elemento de nível do bloco <figura> é usado para identificar e enrolar conteúdo autónomo, muitas vezes na forma de mídia. Pode envolver imagens, clipes de áudio, vídeos, blocos de código, diagramas, ilustrações ou outros mídias autónomas. Mais de um item de conteúdo autónomo, como imagens múltiplas ou vídeos, pode estar contido no elemento <figura> de cada vez. Se o elemento <figura> for movido da parte principal de uma página para outra localização (por exemplo, na parte inferior da página), não deve interromper o conteúdo ou a legibilidade da página.

<figure>

<img src="dog.jpg" alt="A black, brown, and white dog wearing a kerchief">

</figure>

Figura Demo