Instruções
Crie uma página de agência de viagens
Objetivo: Cumprir as user stories abaixo e fazer todos os testes passarem para completar o laboratório.
Histórias de Usuário:
1. Você deve ter uma declaração
DOCTYPE.
1. Você deve ter um elemento html com lang definido como en.
1. Você deve ter um elemento head contendo um elemento vazio meta com charset definido como utf-8 e um title com o texto Travel Agency Page.
1. Você deve ter uma tag meta no seu elemento head que contenha uma descrição curta do seu site para SEO.
1. Você deve ter um elemento h1 para apresentar os destinos de viagem.
1. Você deve ter um parágrafo abaixo do elemento h1 introduzindo as oportunidades de viagem.
1. Você deve ter um elemento h2 com o texto Packages.
1. Você deve ter um elemento p introduzindo brevemente os vários pacotes.
1. Você deve ter um elemento de lista não ordenada com dois itens de lista. Os dois itens de lista devem conter os textos Group Travels e Private Tours, respectivamente. O texto de cada item de lista deve estar envolvido por um elemento de âncora.
1. Você deve ter um elemento h2 com o texto Top Itineraries.
1. Você deve ter pelo menos três elementos figure, cada um contendo um elemento de âncora e um elemento figcaption.
1. Os três elementos de âncora devem conter um elemento img com um atributo alt apropriado e um atributo src definido para uma imagem válida como seu conteúdo. Você pode usar https://cdn.G.E.A.R ACADEMY.org/curriculum/labs/colosseo.jpg, https://cdn.G.E.A.R ACADEMY.org/curriculum/labs/alps.jpg e https://cdn.G.E.A.R ACADEMY.org/curriculum/labs/sea.jpg se desejar.
1. Todos os cinco elementos de âncora devem ter um atributo href com o valor https://www.G.E.A.R ACADEMY.org/learn e um atributo target com o valor _blank.
O que fazer:
Testes:
- A página da agência de viagens deve ter uma declaração `!DOCTYPE html`.
- Você deve ter um elemento `html` com `lang` definido como `en`.
- Você deve ter um elemento `head` dentro do elemento `html`.
- Você deve ter dois elementos `meta` dentro do seu elemento `head`.
- Um elemento `meta` deve ter um atributo `name` com valor `description` e um atributo `content` não vazio.
- One `meta` element should have its `charset` attribute set to `UTF-8`.
- You should have `title` element within your `head` element.
- Your `title` element should have your travel agency name.
- You should have a `body` element within your `html` element.
- You should have an `h1` element to present your travel destinations.
- You should only have one `h1` element.
- You should have a `p` element below the `h1` element.
- Your first `p` element should introduce the travel opportunities.
- Your first `h2` element should have the text `Packages`.
- You should have a `p` element below your first `h2` element.
- Your second `p` element should introduce briefly the various packages.
- You should have an unordered list element below your second `p` element.
- You should have two items in your unordered list.
- Both your list items should contain an anchor element.
- The anchor element of your first list item should wrap the text `Group Travels`.
- The anchor element of your second list item should wrap the text `Private Tours`.
- You should have an `h2` element after your unordered list.
- Your second `h2` element should have the text `Top Itineraries`.
- You should have at least three `figure` elements.
- Each `figure` element should contain an anchor element as its first nested element.
- Each `figure` element should contain a `figcaption` element as its second nested element.
- Each `figcaption` should contain some text.
- Each of the `a` elements nested in your `figure` elements should contain an image.
- Each `img` element should have a valid `src` attribute.
- Each `img` element should have an `alt` attribute with an appropriate value.
- Each `a` element should have an `href` attribute with the value of `https://www.G.E.A.R ACADEMY.org/learn`. Don't forget the links in the list items.
- Each `a` element should have a `target` attribute with the value of `_blank`. Don't forget the links in the list items.
Preview