chore(i18n,curriculum): update translations (#42487)
* chore(i18n,curriculum): update translations * chore: Italian to italian Co-authored-by: Nicholas Carrigan <nhcarrigan@gmail.com>
This commit is contained in:
camperbot
GitHub
@ -0,0 +1,113 @@
|
||||
---
|
||||
id: bad87fee1348bd9aedd08830
|
||||
title: Adicionar um botão de envio a um formulário
|
||||
challengeType: 0
|
||||
videoUrl: 'https://scrimba.com/p/pVMPUv/cp2Nkhz'
|
||||
forumTopicId: 16627
|
||||
dashedName: add-a-submit-button-to-a-form
|
||||
---
|
||||
|
||||
# --description--
|
||||
|
||||
Vamos adicionar um botão do tipo `submit` ao seu formulário. Ao clicar neste botão, enviaremos os dados inseridos para o URL que você especificou no atributo `action` de seu formulário.
|
||||
|
||||
Aqui está um exemplo de um botão do tipo enviar (submit):
|
||||
|
||||
```html
|
||||
<button type="submit">this button submits the form</button>
|
||||
```
|
||||
|
||||
# --instructions--
|
||||
|
||||
Adicione um botão do tipo `submit` e com o texto `Submit` como o último elemento de seu elemento `form`.
|
||||
|
||||
# --hints--
|
||||
|
||||
O elemento `form` precisa ter um elemento `button` dentro dele.
|
||||
|
||||
```js
|
||||
assert($('form').children('button').length > 0);
|
||||
```
|
||||
|
||||
O botão enviar deve ter o atributo `type` definido como `submit`.
|
||||
|
||||
```js
|
||||
assert($('button').attr('type') === 'submit');
|
||||
```
|
||||
|
||||
O botão enviar deve ter apenas o texto `Submit`.
|
||||
|
||||
```js
|
||||
assert(
|
||||
$('button')
|
||||
.text()
|
||||
.match(/^\s*submit\s*$/gi)
|
||||
);
|
||||
```
|
||||
|
||||
O elemento `button` deve ter uma tag de fechamento.
|
||||
|
||||
```js
|
||||
assert(
|
||||
code.match(/<\/button>/g) &&
|
||||
code.match(/<button/g) &&
|
||||
code.match(/<\/button>/g).length === code.match(/<button/g).length
|
||||
);
|
||||
```
|
||||
|
||||
# --seed--
|
||||
|
||||
## --seed-contents--
|
||||
|
||||
```html
|
||||
<h2>CatPhotoApp</h2>
|
||||
<main>
|
||||
<p>Click here to view more <a href="#">cat photos</a>.</p>
|
||||
|
||||
<a href="#"><img src="https://www.bit.ly/fcc-relaxing-cat" alt="A cute orange cat lying on its back."></a>
|
||||
|
||||
<p>Things cats love:</p>
|
||||
<ul>
|
||||
<li>cat nip</li>
|
||||
<li>laser pointers</li>
|
||||
<li>lasagna</li>
|
||||
</ul>
|
||||
<p>Top 3 things cats hate:</p>
|
||||
<ol>
|
||||
<li>flea treatment</li>
|
||||
<li>thunder</li>
|
||||
<li>other cats</li>
|
||||
</ol>
|
||||
<form action="https://www.freecatphotoapp.com/submit-cat-photo">
|
||||
<input type="text" placeholder="cat photo URL">
|
||||
</form>
|
||||
</main>
|
||||
```
|
||||
|
||||
# --solutions--
|
||||
|
||||
```html
|
||||
<h2>CatPhotoApp</h2>
|
||||
<main>
|
||||
<p>Click here to view more <a href="#">cat photos</a>.</p>
|
||||
|
||||
<a href="#"><img src="https://www.bit.ly/fcc-relaxing-cat" alt="A cute orange cat lying on its back."></a>
|
||||
|
||||
<p>Things cats love:</p>
|
||||
<ul>
|
||||
<li>cat nip</li>
|
||||
<li>laser pointers</li>
|
||||
<li>lasagna</li>
|
||||
</ul>
|
||||
<p>Top 3 things cats hate:</p>
|
||||
<ol>
|
||||
<li>flea treatment</li>
|
||||
<li>thunder</li>
|
||||
<li>other cats</li>
|
||||
</ol>
|
||||
<form action="https://www.freecatphotoapp.com/submit-cat-photo">
|
||||
<input type="text" placeholder="cat photo URL">
|
||||
<button type="submit">Submit</button>
|
||||
</form>
|
||||
</main>
|
||||
```
|
||||
@ -0,0 +1,93 @@
|
||||
---
|
||||
id: bad87fee1348bd9aedf08812
|
||||
title: Adicionar imagens ao seu site
|
||||
challengeType: 0
|
||||
videoUrl: 'https://scrimba.com/p/pVMPUv/c8EbJf2'
|
||||
forumTopicId: 16640
|
||||
dashedName: add-images-to-your-website
|
||||
---
|
||||
|
||||
# --description--
|
||||
|
||||
Você pode adicionar imagens ao seu site usando o elemento `img` e apontar o caminho (URL) da imagem usando o atributo `src`.
|
||||
|
||||
Exemplo:
|
||||
|
||||
```html
|
||||
<img src="https://www.freecatphotoapp.com/your-image.jpg">
|
||||
```
|
||||
|
||||
Observe que os elementos `img` fecham em si mesmos.
|
||||
|
||||
Todos os elementos `img` **precisam** ter um atributo `alt`. O texto de um atributo `alt` é usado por leitores de tela para melhorar a acessibilidade. Ele é exibido se a imagem não puder ser carregada.
|
||||
|
||||
**Observação:** usar um atributo `alt` vazio é uma prática recomendada se a imagem for meramente ilustrativa.
|
||||
|
||||
Preferencialmente, o atributo `alt` não deve conter caracteres especiais, a menos que isso seja necessário.
|
||||
|
||||
Vamos adicionar um atributo `alt` ao nosso exemplo `img` acima:
|
||||
|
||||
```html
|
||||
<img src="https://www.freecatphotoapp.com/your-image.jpg" alt="A business cat wearing a necktie.">
|
||||
```
|
||||
|
||||
# --instructions--
|
||||
|
||||
Tente adicionar uma imagem ao seu site:
|
||||
|
||||
Dentro do elemento `main` existente, insira um elemento `img` antes dos elementos `p` existentes.
|
||||
|
||||
Agora defina o atributo `src` para que ele aponte para o URL `https://www.bit.ly/fcc-relaxing-cat`
|
||||
|
||||
Por fim, não se esqueça de dar ao elemento `img` um atributo `alt` com um texto adequado.
|
||||
|
||||
# --hints--
|
||||
|
||||
A página deve ter um elemento de imagem.
|
||||
|
||||
```js
|
||||
assert($('img').length);
|
||||
```
|
||||
|
||||
A imagem deve ter um atributo `src` que aponte para o caminho da imagem do gatinho.
|
||||
|
||||
```js
|
||||
assert(/^https:\/\/(www\.)?bit\.ly\/fcc-relaxing-cat$/i.test($('img').attr('src')));
|
||||
```
|
||||
|
||||
O atributo `alt` do elemento de imagem não deve estar vazio.
|
||||
|
||||
```js
|
||||
assert(
|
||||
$('img').attr('alt') &&
|
||||
$('img').attr('alt').length &&
|
||||
/<img\S*alt=(['"])(?!\1|>)\S+\1\S*\/?>/.test(
|
||||
__helpers.removeWhiteSpace(code)
|
||||
)
|
||||
);
|
||||
```
|
||||
|
||||
# --seed--
|
||||
|
||||
## --seed-contents--
|
||||
|
||||
```html
|
||||
<h2>CatPhotoApp</h2>
|
||||
<main>
|
||||
|
||||
|
||||
<p>Kitty ipsum dolor sit amet, shed everywhere shed everywhere stretching attack your ankles chase the red dot, hairball run catnip eat the grass sniff.</p>
|
||||
<p>Purr jump eat the grass rip the couch scratched sunbathe, shed everywhere rip the couch sleep in the sink fluffy fur catnip scratched.</p>
|
||||
</main>
|
||||
```
|
||||
|
||||
# --solutions--
|
||||
|
||||
```html
|
||||
<h2>CatPhotoApp</h2>
|
||||
<main>
|
||||
<a href="#"><img src="https://www.bit.ly/fcc-relaxing-cat" alt="A cute orange cat lying on its back."></a>
|
||||
<p>Kitty ipsum dolor sit amet, shed everywhere shed everywhere stretching attack your ankles chase the red dot, hairball run catnip eat the grass sniff.</p>
|
||||
<p>Purr jump eat the grass rip the couch scratched sunbathe, shed everywhere rip the couch sleep in the sink fluffy fur catnip scratched.</p>
|
||||
</main>
|
||||
```
|
||||
@ -0,0 +1,108 @@
|
||||
---
|
||||
id: bad87fee1348bd9aedf08830
|
||||
title: Adicionar texto placeholder a um campo de texto
|
||||
challengeType: 0
|
||||
videoUrl: 'https://scrimba.com/p/pVMPUv/cKdJDhg'
|
||||
forumTopicId: 16647
|
||||
dashedName: add-placeholder-text-to-a-text-field
|
||||
---
|
||||
|
||||
# --description--
|
||||
|
||||
O texto placeholder é o conteúdo exibido dentro do elemento `input` antes da inserção de texto por parte do usuário.
|
||||
|
||||
Você pode criar um texto placeholder da seguinte maneira:
|
||||
|
||||
```html
|
||||
<input type="text" placeholder="this is placeholder text">
|
||||
```
|
||||
|
||||
**Observação:** lembre-se de que os elementos `input` fecham em si mesmos.
|
||||
|
||||
# --instructions--
|
||||
|
||||
Defina o valor do `placeholder` do elemento `input` de texto para "cat photo URL".
|
||||
|
||||
# --hints--
|
||||
|
||||
Você deve adicionar um atributo `placeholder` ao elemento `input` de texto que já existe.
|
||||
|
||||
```js
|
||||
assert($('input[placeholder]').length > 0);
|
||||
```
|
||||
|
||||
Você deve definir o valor do atributo `placeholder` para `cat photo URL`.
|
||||
|
||||
```js
|
||||
assert(
|
||||
$('input') &&
|
||||
$('input').attr('placeholder') &&
|
||||
$('input')
|
||||
.attr('placeholder')
|
||||
.match(/cat\s+photo\s+URL/gi)
|
||||
);
|
||||
```
|
||||
|
||||
O elemento `input` final não deve ter uma tag de fechamento.
|
||||
|
||||
```js
|
||||
assert(!code.match(/<input.*\/?>.*<\/input>/gi));
|
||||
```
|
||||
|
||||
O elemento `input` final deve ter uma sintaxe válida.
|
||||
|
||||
```js
|
||||
assert($('input[type=text]').length > 0);
|
||||
```
|
||||
|
||||
# --seed--
|
||||
|
||||
## --seed-contents--
|
||||
|
||||
```html
|
||||
<h2>CatPhotoApp</h2>
|
||||
<main>
|
||||
<p>Click here to view more <a href="#">cat photos</a>.</p>
|
||||
|
||||
<a href="#"><img src="https://www.bit.ly/fcc-relaxing-cat" alt="A cute orange cat lying on its back."></a>
|
||||
|
||||
<p>Things cats love:</p>
|
||||
<ul>
|
||||
<li>cat nip</li>
|
||||
<li>laser pointers</li>
|
||||
<li>lasagna</li>
|
||||
</ul>
|
||||
<p>Top 3 things cats hate:</p>
|
||||
<ol>
|
||||
<li>flea treatment</li>
|
||||
<li>thunder</li>
|
||||
<li>other cats</li>
|
||||
</ol>
|
||||
<input type="text">
|
||||
</main>
|
||||
```
|
||||
|
||||
# --solutions--
|
||||
|
||||
```html
|
||||
<h2>CatPhotoApp</h2>
|
||||
<main>
|
||||
<p>Click here to view more <a href="#">cat photos</a>.</p>
|
||||
|
||||
<a href="#"><img src="https://www.bit.ly/fcc-relaxing-cat" alt="A cute orange cat lying on its back."></a>
|
||||
|
||||
<p>Things cats love:</p>
|
||||
<ul>
|
||||
<li>cat nip</li>
|
||||
<li>laser pointers</li>
|
||||
<li>lasagna</li>
|
||||
</ul>
|
||||
<p>Top 3 things cats hate:</p>
|
||||
<ol>
|
||||
<li>flea treatment</li>
|
||||
<li>thunder</li>
|
||||
<li>other cats</li>
|
||||
</ol>
|
||||
<input type="text" placeholder="cat photo URL">
|
||||
</main>
|
||||
```
|
||||
@ -0,0 +1,104 @@
|
||||
---
|
||||
id: bad87fee1348bd9aedd08835
|
||||
title: Marcar botões e caixas de seleção por padrão
|
||||
challengeType: 0
|
||||
videoUrl: 'https://scrimba.com/p/pVMPUv/cWk3Qh6'
|
||||
forumTopicId: 301094
|
||||
dashedName: check-radio-buttons-and-checkboxes-by-default
|
||||
---
|
||||
|
||||
# --description--
|
||||
|
||||
É possível deixar selecionada uma caixa ou um botão de seleção por padrão usando o atributo `checked`.
|
||||
|
||||
Para fazer isso, basta adicionar a palavra `checked` dentro de um elemento input. Por exemplo:
|
||||
|
||||
```html
|
||||
<input type="radio" name="test-name" checked>
|
||||
```
|
||||
|
||||
# --instructions--
|
||||
|
||||
Faça com que seu primeiro radio button e sua primeira checkbox estejam selecionados por padrão.
|
||||
|
||||
# --hints--
|
||||
|
||||
O primeiro radio button de seu formulário deve estar selecionado por padrão.
|
||||
|
||||
```js
|
||||
assert($('input[type="radio"]').prop('checked'));
|
||||
```
|
||||
|
||||
A primeira checkbox de seu formulário deve estar selecionada por padrão.
|
||||
|
||||
```js
|
||||
assert($('input[type="checkbox"]').prop('checked'));
|
||||
```
|
||||
|
||||
# --seed--
|
||||
|
||||
## --seed-contents--
|
||||
|
||||
```html
|
||||
<h2>CatPhotoApp</h2>
|
||||
<main>
|
||||
<p>Click here to view more <a href="#">cat photos</a>.</p>
|
||||
|
||||
<a href="#"><img src="https://www.bit.ly/fcc-relaxing-cat" alt="A cute orange cat lying on its back."></a>
|
||||
|
||||
<p>Things cats love:</p>
|
||||
<ul>
|
||||
<li>cat nip</li>
|
||||
<li>laser pointers</li>
|
||||
<li>lasagna</li>
|
||||
</ul>
|
||||
<p>Top 3 things cats hate:</p>
|
||||
<ol>
|
||||
<li>flea treatment</li>
|
||||
<li>thunder</li>
|
||||
<li>other cats</li>
|
||||
</ol>
|
||||
<form action="https://www.freecatphotoapp.com/submit-cat-photo">
|
||||
<label for="indoor"><input id="indoor" type="radio" name="indoor-outdoor" value="indoor"> Indoor</label>
|
||||
<label for="outdoor"><input id="outdoor" type="radio" name="indoor-outdoor" value="outdoor"> Outdoor</label><br>
|
||||
<label for="loving"><input id="loving" type="checkbox" name="personality" value="loving"> Loving</label>
|
||||
<label for="lazy"><input id="lazy" type="checkbox" name="personality" value="lazy"> Lazy</label>
|
||||
<label for="energetic"><input id="energetic" type="checkbox" name="personality" value="energetic"> Energetic</label><br>
|
||||
<input type="text" placeholder="cat photo URL" required>
|
||||
<button type="submit">Submit</button>
|
||||
</form>
|
||||
</main>
|
||||
```
|
||||
|
||||
# --solutions--
|
||||
|
||||
```html
|
||||
<h2>CatPhotoApp</h2>
|
||||
<main>
|
||||
<p>Click here to view more <a href="#">cat photos</a>.</p>
|
||||
|
||||
<a href="#"><img src="https://www.bit.ly/fcc-relaxing-cat" alt="A cute orange cat lying on its back."></a>
|
||||
|
||||
<p>Things cats love:</p>
|
||||
<ul>
|
||||
<li>cat nip</li>
|
||||
<li>laser pointers</li>
|
||||
<li>lasagna</li>
|
||||
</ul>
|
||||
<p>Top 3 things cats hate:</p>
|
||||
<ol>
|
||||
<li>flea treatment</li>
|
||||
<li>thunder</li>
|
||||
<li>other cats</li>
|
||||
</ol>
|
||||
<form action="https://www.freecatphotoapp.com/submit-cat-photo">
|
||||
<label for="indoor"><input id="indoor" type="radio" name="indoor-outdoor" value="indoor" checked> Indoor</label>
|
||||
<label for="outdoor"><input id="outdoor" type="radio" name="indoor-outdoor" value="outdoor"> Outdoor</label><br>
|
||||
<label for="loving"><input id="loving" type="checkbox" name="personality" value="loving" checked> Loving</label>
|
||||
<label for="lazy"><input id="lazy" type="checkbox" name="personality" value="lazy"> Lazy</label>
|
||||
<label for="energetic"><input id="energetic" type="checkbox" name="personality" value="energetic"> Energetic</label><br>
|
||||
<input type="text" placeholder="cat photo URL" required>
|
||||
<button type="submit">Submit</button>
|
||||
</form>
|
||||
</main>
|
||||
```
|
||||
@ -0,0 +1,76 @@
|
||||
---
|
||||
id: bad87fee1348bd9aedf08804
|
||||
title: Comentários no HTML
|
||||
challengeType: 0
|
||||
videoUrl: 'https://scrimba.com/p/pVMPUv/cGyGbca'
|
||||
forumTopicId: 16782
|
||||
dashedName: comment-out-html
|
||||
---
|
||||
|
||||
# --description--
|
||||
|
||||
Para iniciar um comentário, lembre-se de que é preciso usar `<!--`. Para encerrá-lo, utilize `-->`
|
||||
|
||||
Neste exercício, você vai precisar encerrar o comentário antes do elemento `h2` iniciar.
|
||||
|
||||
# --instructions--
|
||||
|
||||
Comente os elementos `h1` e `p`, mas deixe o elemento `h2` fora do comentário.
|
||||
|
||||
# --hints--
|
||||
|
||||
O elemento `h1` deve estar comentado para não ser exibido na página.
|
||||
|
||||
```js
|
||||
assert($('h1').length === 0);
|
||||
```
|
||||
|
||||
O elemento `h2` não deve ser comentado para poder ser exibido na página.
|
||||
|
||||
```js
|
||||
assert($('h2').length > 0);
|
||||
```
|
||||
|
||||
O elemento `p` deve estar comentado para não ser exibido na página.
|
||||
|
||||
```js
|
||||
assert($('p').length === 0);
|
||||
```
|
||||
|
||||
Todos os comentários devem ser fechados com `-->`.
|
||||
|
||||
```js
|
||||
assert(code.match(/[^fc]-->/g).length > 1);
|
||||
```
|
||||
|
||||
Você não deve mudar a ordem dos elementos `h1`, `h2` e `p` no código.
|
||||
|
||||
```js
|
||||
assert(
|
||||
code.match(/<([a-z0-9]){1,2}>/g)[0] === '<h1>' &&
|
||||
code.match(/<([a-z0-9]){1,2}>/g)[1] === '<h2>' &&
|
||||
code.match(/<([a-z0-9]){1,2}>/g)[2] === '<p>'
|
||||
);
|
||||
```
|
||||
|
||||
# --seed--
|
||||
|
||||
## --seed-contents--
|
||||
|
||||
```html
|
||||
<!--
|
||||
<h1>Hello World</h1>
|
||||
|
||||
<h2>CatPhotoApp</h2>
|
||||
|
||||
<p>Kitty ipsum dolor sit amet, shed everywhere shed everywhere stretching attack your ankles chase the red dot, hairball run catnip eat the grass sniff.</p>
|
||||
-->
|
||||
```
|
||||
|
||||
# --solutions--
|
||||
|
||||
```html
|
||||
<!--<h1>Hello World</h1>-->
|
||||
<h2>CatPhotoApp</h2>
|
||||
<!--<p>Kitty ipsum dolor sit amet, shed everywhere shed everywhere stretching attack your ankles chase the red dot, hairball run catnip eat the grass sniff.</p> -->
|
||||
```
|
||||
@ -0,0 +1,102 @@
|
||||
---
|
||||
id: bad87fee1348bd9aedf08827
|
||||
title: Criar uma lista não ordenada de itens
|
||||
challengeType: 0
|
||||
videoUrl: 'https://scrimba.com/p/pVMPUv/cDKVPuv'
|
||||
forumTopicId: 16814
|
||||
dashedName: create-a-bulleted-unordered-list
|
||||
---
|
||||
|
||||
# --description--
|
||||
|
||||
O HTML tem um elemento especial para a criação de <dfn>listas não ordenadas</dfn> ou listas ao estilo itemizado.
|
||||
|
||||
Listas não ordenadas começam com o elemento `<ul>`, seguido por uma quantidade qualquer de elementos `<li>`. Por fim, são fechadas com a tag `</ul>`.
|
||||
|
||||
Por exemplo:
|
||||
|
||||
```html
|
||||
<ul>
|
||||
<li>milk</li>
|
||||
<li>cheese</li>
|
||||
</ul>
|
||||
```
|
||||
|
||||
cria uma lista de estilo itemizado de `milk` e `cheese`.
|
||||
|
||||
# --instructions--
|
||||
|
||||
Remova os dois últimos elementos `p` e crie uma lista não ordenada de três coisas que os gatos adoram na parte inferior da página.
|
||||
|
||||
# --hints--
|
||||
|
||||
Crie um elemento `ul`.
|
||||
|
||||
```js
|
||||
assert($('ul').length > 0);
|
||||
```
|
||||
|
||||
Você precisa de três elementos `li` dentro de seu elemento `ul`.
|
||||
|
||||
```js
|
||||
assert($('ul li').length > 2);
|
||||
```
|
||||
|
||||
O elemento `ul` deve ter uma tag de fechamento.
|
||||
|
||||
```js
|
||||
assert(
|
||||
code.match(/<\/ul>/gi) &&
|
||||
code.match(/<ul/gi) &&
|
||||
code.match(/<\/ul>/gi).length === code.match(/<ul/gi).length
|
||||
);
|
||||
```
|
||||
|
||||
Os elementos `li` devem ter tags de fechamento.
|
||||
|
||||
```js
|
||||
assert(
|
||||
code.match(/<\/li>/gi) &&
|
||||
code.match(/<li[\s>]/gi) &&
|
||||
code.match(/<\/li>/gi).length === code.match(/<li[\s>]/gi).length
|
||||
);
|
||||
```
|
||||
|
||||
Os elementos `li` não devem estar vazios ou ter espaços em branco.
|
||||
|
||||
```js
|
||||
assert($('ul li').filter((_, item) => !$(item).text().trim()).length === 0);
|
||||
```
|
||||
|
||||
# --seed--
|
||||
|
||||
## --seed-contents--
|
||||
|
||||
```html
|
||||
<h2>CatPhotoApp</h2>
|
||||
<main>
|
||||
<p>Click here to view more <a href="#">cat photos</a>.</p>
|
||||
|
||||
<a href="#"><img src="https://www.bit.ly/fcc-relaxing-cat" alt="A cute orange cat lying on its back."></a>
|
||||
|
||||
<p>Kitty ipsum dolor sit amet, shed everywhere shed everywhere stretching attack your ankles chase the red dot, hairball run catnip eat the grass sniff.</p>
|
||||
<p>Purr jump eat the grass rip the couch scratched sunbathe, shed everywhere rip the couch sleep in the sink fluffy fur catnip scratched.</p>
|
||||
</main>
|
||||
```
|
||||
|
||||
# --solutions--
|
||||
|
||||
```html
|
||||
<h2>CatPhotoApp</h2>
|
||||
<main>
|
||||
<p>Click here to view more <a href="#">cat photos</a>.</p>
|
||||
|
||||
<a href="#"><img src="https://www.bit.ly/fcc-relaxing-cat" alt="A cute orange cat lying on its back."></a>
|
||||
|
||||
<ul>
|
||||
<li>milk</li>
|
||||
<li>mice</li>
|
||||
<li>catnip</li>
|
||||
</ul>
|
||||
</main>
|
||||
```
|
||||
@ -0,0 +1,106 @@
|
||||
---
|
||||
id: bad87fee1348bd9aede08830
|
||||
title: Criar um elemento de formulário
|
||||
challengeType: 0
|
||||
forumTopicId: 16817
|
||||
dashedName: create-a-form-element
|
||||
---
|
||||
|
||||
# --description--
|
||||
|
||||
Você pode criar formulários que enviam dados a um servidor usando apenas HTML puro. Você pode fazer isso especificando o atributo `action` ao elemento `form`.
|
||||
|
||||
Por exemplo:
|
||||
|
||||
```html
|
||||
<form action="/url-where-you-want-to-submit-form-data">
|
||||
<input>
|
||||
</form>
|
||||
```
|
||||
|
||||
# --instructions--
|
||||
|
||||
Coloque o elemento `input` que já existe dentro de um elemento `form` e insira `"https://www.freecatphotoapp.com/submit-cat-photo"` no atributo `action` do elemento `form`.
|
||||
|
||||
# --hints--
|
||||
|
||||
O elemento `input` existente deve ficar dentro do elemento `form`.
|
||||
|
||||
```js
|
||||
const inputElem = document.querySelector('form input');
|
||||
assert(
|
||||
inputElem.getAttribute('type') === 'text' &&
|
||||
inputElem.getAttribute('placeholder') === 'cat photo URL'
|
||||
);
|
||||
```
|
||||
|
||||
O elemento `form` deve ter o atributo `action` definido como `https://www.freecatphotoapp.com/submit-cat-photo`
|
||||
|
||||
```js
|
||||
const action = $('form').attr('action');
|
||||
assert(action.match(/^https:\/\/(www\.)?freecatphotoapp\.com\/submit-cat-photo$/i))
|
||||
```
|
||||
|
||||
O elemento `form` deve ter as tags de abertura e fechamento corretas.
|
||||
|
||||
```js
|
||||
assert(
|
||||
code.match(/<\/form>/g) &&
|
||||
code.match(/<form [^<]*>/g) &&
|
||||
code.match(/<\/form>/g).length === code.match(/<form [^<]*>/g).length
|
||||
);
|
||||
```
|
||||
|
||||
# --seed--
|
||||
|
||||
## --seed-contents--
|
||||
|
||||
```html
|
||||
<h2>CatPhotoApp</h2>
|
||||
<main>
|
||||
<p>Click here to view more <a href="#">cat photos</a>.</p>
|
||||
|
||||
<a href="#"><img src="https://www.bit.ly/fcc-relaxing-cat" alt="A cute orange cat lying on its back."></a>
|
||||
|
||||
<p>Things cats love:</p>
|
||||
<ul>
|
||||
<li>cat nip</li>
|
||||
<li>laser pointers</li>
|
||||
<li>lasagna</li>
|
||||
</ul>
|
||||
<p>Top 3 things cats hate:</p>
|
||||
<ol>
|
||||
<li>flea treatment</li>
|
||||
<li>thunder</li>
|
||||
<li>other cats</li>
|
||||
</ol>
|
||||
<input type="text" placeholder="cat photo URL">
|
||||
</main>
|
||||
```
|
||||
|
||||
# --solutions--
|
||||
|
||||
```html
|
||||
<h2>CatPhotoApp</h2>
|
||||
<main>
|
||||
<p>Click here to view more <a href="#">cat photos</a>.</p>
|
||||
|
||||
<a href="#"><img src="https://www.bit.ly/fcc-relaxing-cat" alt="A cute orange cat lying on its back."></a>
|
||||
|
||||
<p>Things cats love:</p>
|
||||
<ul>
|
||||
<li>cat nip</li>
|
||||
<li>laser pointers</li>
|
||||
<li>lasagna</li>
|
||||
</ul>
|
||||
<p>Top 3 things cats hate:</p>
|
||||
<ol>
|
||||
<li>flea treatment</li>
|
||||
<li>thunder</li>
|
||||
<li>other cats</li>
|
||||
</ol>
|
||||
<form action="https://www.freecatphotoapp.com/submit-cat-photo">
|
||||
<input type="text" placeholder="cat photo URL">
|
||||
</form>
|
||||
</main>
|
||||
```
|
||||
@ -0,0 +1,135 @@
|
||||
---
|
||||
id: bad87fee1348bd9aedf08835
|
||||
title: Criar um grupo de caixas de seleção
|
||||
challengeType: 0
|
||||
videoUrl: 'https://scrimba.com/p/pVMPUv/cqrkJsp'
|
||||
forumTopicId: 16821
|
||||
dashedName: create-a-set-of-checkboxes
|
||||
---
|
||||
|
||||
# --description--
|
||||
|
||||
Os formulários normalmente usam <dfn>caixas de seleção</dfn> para perguntas que tenham mais de uma resposta.
|
||||
|
||||
As caixas de seleção são um tipo de `input`.
|
||||
|
||||
Cada uma das caixas de seleção deve estar dentro de seu próprio elemento `label`. Ao envolver um elemento `input` em um elemento `label`, este último vai estar automaticamente associado ao input da caixa de seleção em questão.
|
||||
|
||||
Todos os inputs de caixa de seleção correspondentes a uma mesma pergunta devem ter o atributo `name` de mesmo valor.
|
||||
|
||||
É uma prática recomendada definir claramente a relação entre o `input` de uma caixa de seleção e seu elemento `label` correspondente por meio da definição do atributo `for` no elemento `label`, de modo que este atributo corresponda ao atributo `id` associado ao elemento `input`.
|
||||
|
||||
Aqui vemos um exemplo de caixa de seleção:
|
||||
|
||||
```html
|
||||
<label for="loving"><input id="loving" type="checkbox" name="personality"> Loving</label>
|
||||
```
|
||||
|
||||
# --instructions--
|
||||
|
||||
Adicione ao formulário um grupo de três caixas de seleção. Cada caixa de seleção deve estar dentro de seu próprio elemento `label`. As três devem compartilhar o atributo `name` de valor `personality`.
|
||||
|
||||
# --hints--
|
||||
|
||||
A página deve ter três elementos de caixa de seleção.
|
||||
|
||||
```js
|
||||
assert($('input[type="checkbox"]').length > 2);
|
||||
```
|
||||
|
||||
Cada uma das três caixas de seleção deve estar dentro de seu próprio elemento `label`.
|
||||
|
||||
```js
|
||||
assert($('label > input[type="checkbox"]:only-child').length > 2);
|
||||
```
|
||||
|
||||
Verifique se cada um dos elementos `label` tem uma tag de fechamento.
|
||||
|
||||
```js
|
||||
assert(
|
||||
code.match(/<\/label>/g) &&
|
||||
code.match(/<label/g) &&
|
||||
code.match(/<\/label>/g).length === code.match(/<label/g).length
|
||||
);
|
||||
```
|
||||
|
||||
As caixas de seleção devem ter o atributo `name` com o valor de `personality`.
|
||||
|
||||
```js
|
||||
assert(
|
||||
$('label > input[type="checkbox"]').filter('[name="personality"]').length > 2
|
||||
);
|
||||
```
|
||||
|
||||
Todas as suas caixas de seleção dever ser adicionadas dentro da tag `form`.
|
||||
|
||||
```js
|
||||
assert($('label').parent().get(0).tagName.match('FORM'));
|
||||
```
|
||||
|
||||
# --seed--
|
||||
|
||||
## --seed-contents--
|
||||
|
||||
```html
|
||||
<h2>CatPhotoApp</h2>
|
||||
<main>
|
||||
<p>Click here to view more <a href="#">cat photos</a>.</p>
|
||||
|
||||
<a href="#"><img src="https://www.bit.ly/fcc-relaxing-cat" alt="A cute orange cat lying on its back."></a>
|
||||
|
||||
<p>Things cats love:</p>
|
||||
<ul>
|
||||
<li>cat nip</li>
|
||||
<li>laser pointers</li>
|
||||
<li>lasagna</li>
|
||||
</ul>
|
||||
<p>Top 3 things cats hate:</p>
|
||||
<ol>
|
||||
<li>flea treatment</li>
|
||||
<li>thunder</li>
|
||||
<li>other cats</li>
|
||||
</ol>
|
||||
<form action="https://www.freecatphotoapp.com/submit-cat-photo">
|
||||
<label for="indoor"><input id="indoor" type="radio" name="indoor-outdoor"> Indoor</label>
|
||||
<label for="outdoor"><input id="outdoor" type="radio" name="indoor-outdoor"> Outdoor</label><br>
|
||||
<input type="text" placeholder="cat photo URL" required>
|
||||
<button type="submit">Submit</button>
|
||||
</form>
|
||||
</main>
|
||||
```
|
||||
|
||||
# --solutions--
|
||||
|
||||
```html
|
||||
<h2>CatPhotoApp</h2>
|
||||
<main>
|
||||
<p>Click here to view more <a href="#">cat photos</a>.</p>
|
||||
|
||||
<a href="#"><img src="https://www.bit.ly/fcc-relaxing-cat" alt="A cute orange cat lying on its back."></a>
|
||||
|
||||
<p>Things cats love:</p>
|
||||
<ul>
|
||||
<li>cat nip</li>
|
||||
<li>laser pointers</li>
|
||||
<li>lasagna</li>
|
||||
</ul>
|
||||
<p>Top 3 things cats hate:</p>
|
||||
<ol>
|
||||
<li>flea treatment</li>
|
||||
<li>thunder</li>
|
||||
<li>other cats</li>
|
||||
</ol>
|
||||
<form action="https://www.freecatphotoapp.com/submit-cat-photo">
|
||||
<label for="indoor"><input id="indoor" type="radio" name="indoor-outdoor"> Indoor</label>
|
||||
<label for="outdoor"><input id="outdoor" type="radio" name="indoor-outdoor"> Outdoor</label><br>
|
||||
<label for="playful"><input id="playful" type="checkbox" name="personality">Playful</label>
|
||||
<label for="lazy"><input id="lazy" type="checkbox"
|
||||
name="personality">Lazy</label>
|
||||
<label for="evil"><input id="evil" type="checkbox"
|
||||
name="personality">Evil</label><br>
|
||||
<input type="text" placeholder="cat photo URL" required>
|
||||
<button type="submit">Submit</button>
|
||||
</form>
|
||||
</main>
|
||||
```
|
||||
@ -0,0 +1,160 @@
|
||||
---
|
||||
id: bad87fee1348bd9aedf08834
|
||||
title: Criar um grupo de botões de seleção
|
||||
challengeType: 0
|
||||
forumTopicId: 16822
|
||||
dashedName: create-a-set-of-radio-buttons
|
||||
---
|
||||
|
||||
# --description--
|
||||
|
||||
Você pode usar <dfn>botões de seleção</dfn> para perguntas onde você queira que o usuário dê apenas uma resposta dentre várias opções.
|
||||
|
||||
Os botões de seleção são um tipo de `input`.
|
||||
|
||||
Cada um dos botões de seleção deve estar dentro de seu próprio elemento `label`. Ao envolver um elemento `input` em um elemento `label`, este último vai estar automaticamente associado ao input do botão de seleção em questão.
|
||||
|
||||
Todos os botões de seleção correspondentes a uma mesma pergunta devem ter o atributo `name` de mesmo valor para criar um grupo de botões de seleção. Ao criar um grupo de botões de seleção, ao selecionar qualquer um dos botões, os outros serão desmarcados automaticamente, garantindo que apenas uma resposta seja fornecida pelo usuário.
|
||||
|
||||
Aqui vemos um exemplo de botão de seleção:
|
||||
|
||||
```html
|
||||
<label>
|
||||
<input type="radio" name="indoor-outdoor">Indoor
|
||||
</label>
|
||||
```
|
||||
|
||||
É uma prática recomendada definir o atributo `for` no elemento `label` contendo um valor equivalente ao do atributo `id` do elemento `input`. Isso permite que tecnologias assistivas criem uma relação entre o label e o elemento `input`. Por exemplo:
|
||||
|
||||
```html
|
||||
<input id="indoor" type="radio" name="indoor-outdoor">
|
||||
<label for="indoor">Indoor</label>
|
||||
```
|
||||
|
||||
Também podemos alocar o elemento `input` dentro das tags `label`:
|
||||
|
||||
```html
|
||||
<label for="indoor">
|
||||
<input id="indoor" type="radio" name="indoor-outdoor">Indoor
|
||||
</label>
|
||||
```
|
||||
|
||||
# --instructions--
|
||||
|
||||
Adicione dois botões de seleção ao formulário, cada um associado ao seu próprio elemento `label`. Em um, coloque o texto `indoor`. No outro, coloque o texto `outdoor`. Ambos devem ter o atributo `name` definido como `indoor-outdoor` para que seja criado um grupo de botões de seleção.
|
||||
|
||||
# --hints--
|
||||
|
||||
A página deve ter dois inputs do tipo `radio`.
|
||||
|
||||
```js
|
||||
assert($('input[type="radio"]').length > 1);
|
||||
```
|
||||
|
||||
Os botões de seleção devem ter o atributo `name` com o valor de `indoor-outdoor`.
|
||||
|
||||
```js
|
||||
assert($('input[type="radio"]').filter("[name='indoor-outdoor']").length > 1);
|
||||
```
|
||||
|
||||
Cada um dos dois botões de seleção deve estar dentro de seu próprio elemento `label`.
|
||||
|
||||
```js
|
||||
assert($('label > input[type="radio"]:only-child').length > 1);
|
||||
```
|
||||
|
||||
O elemento `label` deve ter uma tag de fechamento.
|
||||
|
||||
```js
|
||||
assert(
|
||||
code.match(/<\/label>/g) &&
|
||||
code.match(/<label/g) &&
|
||||
code.match(/<\/label>/g).length === code.match(/<label/g).length
|
||||
);
|
||||
```
|
||||
|
||||
Um dos botões de seleção deve ter o elemento label com o texto `indoor`.
|
||||
|
||||
```js
|
||||
assert(
|
||||
$('label')
|
||||
.text()
|
||||
.match(/indoor/gi)
|
||||
);
|
||||
```
|
||||
|
||||
Um dos botões de seleção deve ter o elemento label com o texto `outdoor`.
|
||||
|
||||
```js
|
||||
assert(
|
||||
$('label')
|
||||
.text()
|
||||
.match(/outdoor/gi)
|
||||
);
|
||||
```
|
||||
|
||||
Os botões de seleção dever ser adicionados dentro da tag `form`.
|
||||
|
||||
```js
|
||||
assert($('label').parent().get(0).tagName.match('FORM'));
|
||||
```
|
||||
|
||||
# --seed--
|
||||
|
||||
## --seed-contents--
|
||||
|
||||
```html
|
||||
<h2>CatPhotoApp</h2>
|
||||
<main>
|
||||
<p>Click here to view more <a href="#">cat photos</a>.</p>
|
||||
|
||||
<a href="#"><img src="https://www.bit.ly/fcc-relaxing-cat" alt="A cute orange cat lying on its back."></a>
|
||||
|
||||
<p>Things cats love:</p>
|
||||
<ul>
|
||||
<li>cat nip</li>
|
||||
<li>laser pointers</li>
|
||||
<li>lasagna</li>
|
||||
</ul>
|
||||
<p>Top 3 things cats hate:</p>
|
||||
<ol>
|
||||
<li>flea treatment</li>
|
||||
<li>thunder</li>
|
||||
<li>other cats</li>
|
||||
</ol>
|
||||
<form action="https://www.freecatphotoapp.com/submit-cat-photo">
|
||||
<input type="text" placeholder="cat photo URL" required>
|
||||
<button type="submit">Submit</button>
|
||||
</form>
|
||||
</main>
|
||||
```
|
||||
|
||||
# --solutions--
|
||||
|
||||
```html
|
||||
<h2>CatPhotoApp</h2>
|
||||
<main>
|
||||
<p>Click here to view more <a href="#">cat photos</a>.</p>
|
||||
|
||||
<a href="#"><img src="https://www.bit.ly/fcc-relaxing-cat" alt="A cute orange cat lying on its back."></a>
|
||||
|
||||
<p>Things cats love:</p>
|
||||
<ul>
|
||||
<li>cat nip</li>
|
||||
<li>laser pointers</li>
|
||||
<li>lasagna</li>
|
||||
</ul>
|
||||
<p>Top 3 things cats hate:</p>
|
||||
<ol>
|
||||
<li>flea treatment</li>
|
||||
<li>thunder</li>
|
||||
<li>other cats</li>
|
||||
</ol>
|
||||
<form action="https://www.freecatphotoapp.com/submit-cat-photo">
|
||||
<label for="indoor"><input id="indoor" type="radio" name="indoor-outdoor"> Indoor</label>
|
||||
<label for="outdoor"><input id="outdoor" type="radio" name="indoor-outdoor"> Outdoor</label><br>
|
||||
<input type="text" placeholder="cat photo URL" required>
|
||||
<button type="submit">Submit</button>
|
||||
</form>
|
||||
</main>
|
||||
```
|
||||
@ -0,0 +1,89 @@
|
||||
---
|
||||
id: bad87fee1348bd9aedf08829
|
||||
title: Criar um campo de texto
|
||||
challengeType: 0
|
||||
videoUrl: 'https://scrimba.com/p/pVMPUv/c2EVnf6'
|
||||
forumTopicId: 16823
|
||||
dashedName: create-a-text-field
|
||||
---
|
||||
|
||||
# --description--
|
||||
|
||||
Agora vamos criar um formulário web.
|
||||
|
||||
Os elementos `input` são uma maneira conveniente de obter informações de seu usuário.
|
||||
|
||||
Você pode criar um input de texto dessa forma:
|
||||
|
||||
```html
|
||||
<input type="text">
|
||||
```
|
||||
|
||||
Observe que os elementos `input` fecham em si mesmos.
|
||||
|
||||
# --instructions--
|
||||
|
||||
Crie um elemento `input` do tipo `text` abaixo das listas.
|
||||
|
||||
# --hints--
|
||||
|
||||
A página deve ter um elemento `input` do tipo `text`.
|
||||
|
||||
```js
|
||||
assert($('input[type=text]').length > 0);
|
||||
```
|
||||
|
||||
# --seed--
|
||||
|
||||
## --seed-contents--
|
||||
|
||||
```html
|
||||
<h2>CatPhotoApp</h2>
|
||||
<main>
|
||||
<p>Click here to view more <a href="#">cat photos</a>.</p>
|
||||
|
||||
<a href="#"><img src="https://www.bit.ly/fcc-relaxing-cat" alt="A cute orange cat lying on its back."></a>
|
||||
|
||||
<p>Things cats love:</p>
|
||||
<ul>
|
||||
<li>cat nip</li>
|
||||
<li>laser pointers</li>
|
||||
<li>lasagna</li>
|
||||
</ul>
|
||||
<p>Top 3 things cats hate:</p>
|
||||
<ol>
|
||||
<li>flea treatment</li>
|
||||
<li>thunder</li>
|
||||
<li>other cats</li>
|
||||
</ol>
|
||||
|
||||
|
||||
</main>
|
||||
```
|
||||
|
||||
# --solutions--
|
||||
|
||||
```html
|
||||
<h2>CatPhotoApp</h2>
|
||||
<main>
|
||||
<p>Click here to view more <a href="#">cat photos</a>.</p>
|
||||
|
||||
<a href="#"><img src="https://www.bit.ly/fcc-relaxing-cat" alt="A cute orange cat lying on its back."></a>
|
||||
|
||||
<p>Things cats love:</p>
|
||||
<ul>
|
||||
<li>cat nip</li>
|
||||
<li>laser pointers</li>
|
||||
<li>lasagna</li>
|
||||
</ul>
|
||||
<p>Top 3 things cats hate:</p>
|
||||
<ol>
|
||||
<li>flea treatment</li>
|
||||
<li>thunder</li>
|
||||
<li>other cats</li>
|
||||
</ol>
|
||||
<form>
|
||||
<input type="text">
|
||||
</form>
|
||||
</main>
|
||||
```
|
||||
@ -0,0 +1,157 @@
|
||||
---
|
||||
id: bad87fee1348bd9aedf08828
|
||||
title: Criar uma lista ordenada
|
||||
challengeType: 0
|
||||
videoUrl: 'https://scrimba.com/p/pVMPUv/cQ3B8TM'
|
||||
forumTopicId: 16824
|
||||
dashedName: create-an-ordered-list
|
||||
---
|
||||
|
||||
# --description--
|
||||
|
||||
O HTML tem um elemento especial para a criação de <dfn>listas ordenadas</dfn>, ou listas numeradas.
|
||||
|
||||
Listas ordenadas têm um elemento `<ol>` inicial, seguido por uma quantidade qualquer de elementos `<li>`. Por fim, listas ordenadas são fechadas com uma tag `</ol>`.
|
||||
|
||||
Por exemplo:
|
||||
|
||||
```html
|
||||
<ol>
|
||||
<li>Garfield</li>
|
||||
<li>Sylvester</li>
|
||||
</ol>
|
||||
```
|
||||
|
||||
criaria uma lista numerada com `Garfield` e `Sylvester`.
|
||||
|
||||
# --instructions--
|
||||
|
||||
Crie uma lista ordenada com as três coisas que os gatos mais odeiam.
|
||||
|
||||
# --hints--
|
||||
|
||||
Você deve ter uma lista ordenada para as `Top 3 things cats hate:`
|
||||
|
||||
```js
|
||||
assert(/Top 3 things cats hate:/i.test($('ol').prev().text()));
|
||||
```
|
||||
|
||||
Você deve ter uma lista não ordenada para `Things cats love:`
|
||||
|
||||
```js
|
||||
assert(/Things cats love:/i.test($('ul').prev().text()));
|
||||
```
|
||||
|
||||
Você deve ter apenas um elemento `ul`.
|
||||
|
||||
```js
|
||||
assert.equal($('ul').length, 1);
|
||||
```
|
||||
|
||||
Você deve ter apenas um elemento `ol`.
|
||||
|
||||
```js
|
||||
assert.equal($('ol').length, 1);
|
||||
```
|
||||
|
||||
Você precisa de três elementos `li` dentro do elemento `ul`.
|
||||
|
||||
```js
|
||||
assert.equal($('ul li').length, 3);
|
||||
```
|
||||
|
||||
Você precisa de três elementos `li` dentro do elemento `ol`.
|
||||
|
||||
```js
|
||||
assert.equal($('ol li').length, 3);
|
||||
```
|
||||
|
||||
O elemento `ul` deve ter uma tag de fechamento.
|
||||
|
||||
```js
|
||||
assert(
|
||||
code.match(/<\/ul>/g) &&
|
||||
code.match(/<\/ul>/g).length === code.match(/<ul>/g).length
|
||||
);
|
||||
```
|
||||
|
||||
O elemento `ol` deve ter uma tag de fechamento.
|
||||
|
||||
```js
|
||||
assert(
|
||||
code.match(/<\/ol>/g) &&
|
||||
code.match(/<\/ol>/g).length === code.match(/<ol>/g).length
|
||||
);
|
||||
```
|
||||
|
||||
O elemento `li` deve ter uma tag de fechamento.
|
||||
|
||||
```js
|
||||
assert(
|
||||
code.match(/<\/li>/g) &&
|
||||
code.match(/<li>/g) &&
|
||||
code.match(/<\/li>/g).length === code.match(/<li>/g).length
|
||||
);
|
||||
```
|
||||
|
||||
Os elementos `li` da lista não ordenada não devem estar vazios.
|
||||
|
||||
```js
|
||||
$('ul li').each((i, val) =>
|
||||
assert(__helpers.removeWhiteSpace(val.textContent))
|
||||
);
|
||||
```
|
||||
|
||||
Os elementos `li` da lista ordenada não devem estar vazios.
|
||||
|
||||
```js
|
||||
$('ol li').each((i, val) =>
|
||||
assert(!!__helpers.removeWhiteSpace(val.textContent))
|
||||
);
|
||||
```
|
||||
|
||||
# --seed--
|
||||
|
||||
## --seed-contents--
|
||||
|
||||
```html
|
||||
<h2>CatPhotoApp</h2>
|
||||
<main>
|
||||
<p>Click here to view more <a href="#">cat photos</a>.</p>
|
||||
|
||||
<a href="#"><img src="https://www.bit.ly/fcc-relaxing-cat" alt="A cute orange cat lying on its back."></a>
|
||||
|
||||
<p>Things cats love:</p>
|
||||
<ul>
|
||||
<li>cat nip</li>
|
||||
<li>laser pointers</li>
|
||||
<li>lasagna</li>
|
||||
</ul>
|
||||
<p>Top 3 things cats hate:</p>
|
||||
|
||||
</main>
|
||||
```
|
||||
|
||||
# --solutions--
|
||||
|
||||
```html
|
||||
<h2>CatPhotoApp</h2>
|
||||
<main>
|
||||
<p>Click here to view more <a href="#">cat photos</a>.</p>
|
||||
|
||||
<a href="#"><img src="https://www.bit.ly/fcc-relaxing-cat" alt="A cute orange cat lying on its back."></a>
|
||||
|
||||
<p>Things cats love:</p>
|
||||
<ul>
|
||||
<li>cat nip</li>
|
||||
<li>laser pointers</li>
|
||||
<li>lasagna</li>
|
||||
</ul>
|
||||
<p>Top 3 things cats hate:</p>
|
||||
<ol>
|
||||
<li>hate 1</li>
|
||||
<li>hate 2</li>
|
||||
<li>hate 3</li>
|
||||
</ol>
|
||||
</main>
|
||||
```
|
||||
@ -0,0 +1,70 @@
|
||||
---
|
||||
id: 587d78aa367417b2b2512aed
|
||||
title: Declarar o doctype de um documento HTML
|
||||
challengeType: 0
|
||||
videoUrl: 'https://scrimba.com/p/pVMPUv/cra98AJ'
|
||||
forumTopicId: 301095
|
||||
dashedName: declare-the-doctype-of-an-html-document
|
||||
---
|
||||
|
||||
# --description--
|
||||
|
||||
Os desafios, até o momento, trataram de elementos HTML específicos e de seus usos. No entanto, existem alguns elementos que garantem uma estrutura global à sua página, devendo ser incluídos em todos os documentos HTML.
|
||||
|
||||
Na parte superior do documento, você precisa informar ao navegador qual a versão do HTML você está utilizando. O HTML é uma linguagem em evolução, sendo atualizada regularmente. A maior parte dos navegadores mais conhecidos dá suporte à especificação mais recente, o HTML5. Páginas da web mais antigas, contudo, podem utilizar versões anteriores da linguagem.
|
||||
|
||||
Você informa isso ao navegador adicionando a tag `<!DOCTYPE ...>` na primeira linha, onde a parte que diz `...` é a versão do HTML. Para o HTML5, use apenas `<!DOCTYPE html>`.
|
||||
|
||||
O `!` e o `DOCTYPE` em letras maiúsculas são importantes, especialmente em navegadores mais antigos. O `html` não diferencia maiúsculas de minúsculas.
|
||||
|
||||
Em seguida, o resto do seu código HTML precisa ser colocado dentro de tags `html`. A tag de abertura `<html>` vai diretamente abaixo da linha que diz `<!DOCTYPE html>`, enquanto a tag de fechamento `</html>` vai ao final da página.
|
||||
|
||||
Aqui vemos um exemplo da estrutura inicial de uma página. Seu código HTML é colocado no espaço entre as duas tags `html`.
|
||||
|
||||
```html
|
||||
<!DOCTYPE html>
|
||||
<html>
|
||||
|
||||
</html>
|
||||
```
|
||||
|
||||
# --instructions--
|
||||
|
||||
Adicione uma tag `DOCTYPE` na parte superior do documento HTML em branco no editor de código para utilizar a versão 5 do HTML. Abaixo dela, adicione as tags `html` de abertura e de fechamento, que ficarão ao redor do elemento `h1`. O cabeçalho pode incluir qualquer texto.
|
||||
|
||||
# --hints--
|
||||
|
||||
O código deve incluir a tag `<!DOCTYPE html>`.
|
||||
|
||||
```js
|
||||
assert(code.match(/<!DOCTYPE\s+?html\s*?>/gi));
|
||||
```
|
||||
|
||||
Deve haver um elemento `html`.
|
||||
|
||||
```js
|
||||
assert($('html').length == 1);
|
||||
```
|
||||
|
||||
As tags `html` devem estar ao redor do elemento `h1`.
|
||||
|
||||
```js
|
||||
assert(code.match(/<html>\s*?<h1>\s*?.*?\s*?<\/h1>\s*?<\/html>/gi));
|
||||
```
|
||||
|
||||
# --seed--
|
||||
|
||||
## --seed-contents--
|
||||
|
||||
```html
|
||||
|
||||
```
|
||||
|
||||
# --solutions--
|
||||
|
||||
```html
|
||||
<!DOCTYPE html>
|
||||
<html>
|
||||
<h1> Hello world </h1>
|
||||
</html>
|
||||
```
|
||||
@ -0,0 +1,140 @@
|
||||
---
|
||||
id: 587d78aa367417b2b2512aec
|
||||
title: Definir head e body de um documento HTML
|
||||
challengeType: 0
|
||||
videoUrl: 'https://scrimba.com/p/pVMPUv/cra9bfP'
|
||||
forumTopicId: 301096
|
||||
dashedName: define-the-head-and-body-of-an-html-document
|
||||
---
|
||||
|
||||
# --description--
|
||||
|
||||
Você pode adicionar mais um nível de organização ao seu documento HTML dentro das tags `html` com os elementos `head` e `body`. A marcação com informações sobre sua página é inserida na tag `head`. Por outro lado, toda a marcação com conteúdo da página (o que é exibido para o usuário) é inserida na tag `body`.
|
||||
|
||||
Elementos de metadados, como `link`, `meta`, `title` e `style`, normalmente vão dentro do elemento `head`.
|
||||
|
||||
Aqui vemos um exemplo de layout de página:
|
||||
|
||||
```html
|
||||
<!DOCTYPE html>
|
||||
<html>
|
||||
<head>
|
||||
<meta />
|
||||
</head>
|
||||
<body>
|
||||
<div>
|
||||
</div>
|
||||
</body>
|
||||
</html>
|
||||
```
|
||||
|
||||
# --instructions--
|
||||
|
||||
Edite a marcação para que haja um elemento `head` e um elemento `body`. O elemento `head` deve conter apenas o elemento `title`, enquanto o elemento `body` deve conter apenas os elementos `h1` e `p`.
|
||||
|
||||
# --hints--
|
||||
|
||||
Deve haver apenas um elemento `head` na página.
|
||||
|
||||
```js
|
||||
const headElems = code.replace(/\n/g, '').match(/\<head\s*>.*?\<\/head\s*>/g);
|
||||
assert(headElems && headElems.length === 1);
|
||||
```
|
||||
|
||||
Deve haver apenas um elemento `body` na página.
|
||||
|
||||
```js
|
||||
const bodyElems = code.replace(/\n/g, '').match(/<body\s*>.*?<\/body\s*>/g);
|
||||
assert(bodyElems && bodyElems.length === 1);
|
||||
```
|
||||
|
||||
O elemento `head` deve ser filho do elemento `html`.
|
||||
|
||||
```js
|
||||
const htmlChildren = code
|
||||
.replace(/\n/g, '')
|
||||
.match(/<html\s*>(?<children>.*)<\/html\s*>/);
|
||||
let foundHead;
|
||||
if (htmlChildren) {
|
||||
const { children } = htmlChildren.groups;
|
||||
|
||||
foundHead = children.match(/<head\s*>.*<\/head\s*>/);
|
||||
}
|
||||
assert(foundHead);
|
||||
```
|
||||
|
||||
O elemento `body` deve ser filho do elemento `html`.
|
||||
|
||||
```js
|
||||
const htmlChildren = code
|
||||
.replace(/\n/g, '')
|
||||
.match(/<html\s*>(?<children>.*?)<\/html\s*>/);
|
||||
let foundBody;
|
||||
if (htmlChildren) {
|
||||
const { children } = htmlChildren.groups;
|
||||
foundBody = children.match(/<body\s*>.*<\/body\s*>/);
|
||||
}
|
||||
assert(foundBody);
|
||||
```
|
||||
|
||||
O elemento `head` deve envolver o elemento `title`.
|
||||
|
||||
```js
|
||||
const headChildren = code
|
||||
.replace(/\n/g, '')
|
||||
.match(/<head\s*>(?<children>.*?)<\/head\s*>/);
|
||||
let foundTitle;
|
||||
if (headChildren) {
|
||||
const { children } = headChildren.groups;
|
||||
foundTitle = children.match(/<title\s*>.*?<\/title\s*>/);
|
||||
}
|
||||
assert(foundTitle);
|
||||
```
|
||||
|
||||
O elemento `body` deve envolver os elementos `h1` e `p`.
|
||||
|
||||
```js
|
||||
const bodyChildren = code
|
||||
.replace(/\n/g, '')
|
||||
.match(/<body\s*>(?<children>.*?)<\/body\s*>/);
|
||||
let foundElems;
|
||||
if (bodyChildren) {
|
||||
const { children } = bodyChildren.groups;
|
||||
const h1s = children.match(/<h1\s*>.*<\/h1\s*>/g);
|
||||
const ps = children.match(/<p\s*>.*<\/p\s*>/g);
|
||||
const numH1s = h1s ? h1s.length : 0;
|
||||
const numPs = ps ? ps.length : 0;
|
||||
foundElems = numH1s === 1 && numPs === 1;
|
||||
}
|
||||
assert(foundElems);
|
||||
```
|
||||
|
||||
# --seed--
|
||||
|
||||
## --seed-contents--
|
||||
|
||||
```html
|
||||
<!DOCTYPE html>
|
||||
<html>
|
||||
<title>The best page ever</title>
|
||||
|
||||
<h1>The best page ever</h1>
|
||||
<p>Cat ipsum dolor sit amet, jump launch to pounce upon little yarn mouse, bare fangs at toy run hide in litter box until treats are fed. Go into a room to decide you didn't want to be in there anyway. I like big cats and i can not lie kitty ipsum dolor sit amet, shed everywhere shed everywhere stretching attack your ankles chase the red dot, hairball run catnip eat the grass sniff. Meow i could pee on this if i had the energy for slap owner's face at 5am until human fills food dish yet scamper. Knock dish off table head butt cant eat out of my own dish scratch the furniture. Make meme, make cute face. Sleep in the bathroom sink chase laser but pee in the shoe. Paw at your fat belly licks your face and eat grass, throw it back up kitty ipsum dolor sit amet, shed everywhere shed everywhere stretching attack your ankles chase the red dot, hairball run catnip eat the grass sniff.</p>
|
||||
|
||||
</html>
|
||||
```
|
||||
|
||||
# --solutions--
|
||||
|
||||
```html
|
||||
<!DOCTYPE html>
|
||||
<html>
|
||||
<head>
|
||||
<title>The best page ever</title>
|
||||
</head>
|
||||
<body>
|
||||
<h1>The best page ever</h1>
|
||||
<p>Cat ipsum dolor sit amet, jump launch to pounce upon little yarn mouse, bare fangs at toy run hide in litter box until treats are fed. Go into a room to decide you didn't want to be in there anyway. I like big cats and i can not lie kitty ipsum dolor sit amet, shed everywhere shed everywhere stretching attack your ankles chase the red dot, hairball run catnip eat the grass sniff. Meow i could pee on this if i had the energy for slap owner's face at 5am until human fills food dish yet scamper. Knock dish off table head butt cant eat out of my own dish scratch the furniture. Make meme, make cute face. Sleep in the bathroom sink chase laser but pee in the shoe. Paw at your fat belly licks your face and eat grass, throw it back up kitty ipsum dolor sit amet, shed everywhere shed everywhere stretching attack your ankles chase the red dot, hairball run catnip eat the grass sniff.</p>
|
||||
</body>
|
||||
</html>
|
||||
```
|
||||
@ -0,0 +1,56 @@
|
||||
---
|
||||
id: bad87fed1348bd9aedf08833
|
||||
title: Excluir elementos HTML
|
||||
challengeType: 0
|
||||
videoUrl: 'https://scrimba.com/p/pVMPUv/ckK73C9'
|
||||
forumTopicId: 17559
|
||||
dashedName: delete-html-elements
|
||||
---
|
||||
|
||||
# --description--
|
||||
|
||||
A tela do nosso telefone não possui muito espaço vertical.
|
||||
|
||||
Vamos remover os elementos desnecessário para podermos começar a construir nosso CatPhotoApp.
|
||||
|
||||
# --instructions--
|
||||
|
||||
Exclua o elemento `h1` para poder simplificar a visualização.
|
||||
|
||||
# --hints--
|
||||
|
||||
O elemento `h1` deve ser excluído.
|
||||
|
||||
```js
|
||||
assert(!code.match(/<h1>/gi) && !code.match(/<\/h1>/gi));
|
||||
```
|
||||
|
||||
O elemento `h2` deve estar na página.
|
||||
|
||||
```js
|
||||
assert(code.match(/<h2>[\w\W]*<\/h2>/gi));
|
||||
```
|
||||
|
||||
O elemento `p` deve estar na página.
|
||||
|
||||
```js
|
||||
assert(code.match(/<p>[\w\W]*<\/p>/gi));
|
||||
```
|
||||
|
||||
# --seed--
|
||||
|
||||
## --seed-contents--
|
||||
|
||||
```html
|
||||
<h1>Hello World</h1>
|
||||
|
||||
<h2>CatPhotoApp</h2>
|
||||
|
||||
<p>Kitty ipsum dolor sit amet, shed everywhere shed everywhere stretching attack your ankles chase the red dot, hairball run catnip eat the grass sniff.</p>
|
||||
```
|
||||
|
||||
# --solutions--
|
||||
|
||||
```html
|
||||
<h2>CatPhotoApp</h2><p>Kitty ipsum dolor sit amet, shed everywhere shed everywhere stretching attack your ankles chase the red dot, hairball run catnip eat the grass sniff.</p>
|
||||
```
|
||||
@ -0,0 +1,50 @@
|
||||
---
|
||||
id: bad87fee1348bd9aedf08833
|
||||
title: Preencher um espaço vazio com um texto placeholder
|
||||
challengeType: 0
|
||||
videoUrl: 'https://scrimba.com/p/pVMPUv/cgR7Dc7'
|
||||
forumTopicId: 18178
|
||||
dashedName: fill-in-the-blank-with-placeholder-text
|
||||
---
|
||||
|
||||
# --description--
|
||||
|
||||
Desenvolvedores da web normalmente utilizam o texto <dfn>lorem ipsum</dfn> como placeholder. O texto lorem ipsum é composto de partes retiradas aleatoriamente de um escrito famoso de Cícero, da Roma antiga.
|
||||
|
||||
O texto lorem ipsum vem sendo usado como texto placeholder por tipógrafos desde o século XVI. Essa é uma tradição que continua a ser utilizada na web.
|
||||
|
||||
Quem somos nós para discutir com cinco séculos de tradição? Como estamos construindo um aplicativo de fotos de gatos (CatPhotoApp), vamos usar um texto chamado "kitty ipsum".
|
||||
|
||||
# --instructions--
|
||||
|
||||
Substitua o texto dentro do elemento `p` pelas primeiras palavras desse texto: `Kitty ipsum dolor sit amet, shed everywhere shed everywhere stretching attack your ankles chase the red dot, hairball run catnip eat the grass sniff.`
|
||||
|
||||
# --hints--
|
||||
|
||||
O elemento `p` deve conter as primeiras palavras do texto "kitty ipsum" fornecido.
|
||||
|
||||
```js
|
||||
assert.isTrue(/Kitty(\s)+ipsum/gi.test($('p').text()));
|
||||
```
|
||||
|
||||
# --seed--
|
||||
|
||||
## --seed-contents--
|
||||
|
||||
```html
|
||||
<h1>Hello World</h1>
|
||||
|
||||
<h2>CatPhotoApp</h2>
|
||||
|
||||
<p>Hello Paragraph</p>
|
||||
```
|
||||
|
||||
# --solutions--
|
||||
|
||||
```html
|
||||
<h1>Hello World</h1>
|
||||
|
||||
<h2>CatPhotoApp</h2>
|
||||
|
||||
<p>Kitty ipsum dolor sit amet, shed everywhere shed everywhere stretching attack your ankles chase the red dot, hairball run catnip eat the grass sniff</p>
|
||||
```
|
||||
@ -0,0 +1,70 @@
|
||||
---
|
||||
id: bad87fee1348bd9aedf0887a
|
||||
title: Título com o elemento h2
|
||||
challengeType: 0
|
||||
videoUrl: 'https://scrimba.com/p/pVMPUv/cE8Gqf3'
|
||||
forumTopicId: 18196
|
||||
dashedName: headline-with-the-h2-element
|
||||
---
|
||||
|
||||
# --description--
|
||||
|
||||
Durante as próximas lições, construiremos aos poucos um aplicativo para fotos de gatos em HTML5.
|
||||
|
||||
O elemento `h2` que você vai adicionar nesta etapa dará um título de nível dois à página da web.
|
||||
|
||||
Este elemento informa ao navegador sobre a estrutura do seu site. Elementos `h1` geralmente são usados para os títulos principais, enquanto os elementos `h2` geralmente são usados para subtítulos. Também existem elementos `h3`, `h4`, `h5` e `h6` para indicar níveis diferentes de subtítulos.
|
||||
|
||||
# --instructions--
|
||||
|
||||
Adicione a tag `h2` com o texto "CatPhotoApp" para criar um segundo elemento HTML abaixo do elemento `h1` que contém o texto "Hello World".
|
||||
|
||||
# --hints--
|
||||
|
||||
Você deve criar um elemento `h2`.
|
||||
|
||||
```js
|
||||
assert($('h2').length > 0);
|
||||
```
|
||||
|
||||
O elemento `h2` deve ter uma tag de fechamento.
|
||||
|
||||
```js
|
||||
assert(
|
||||
code.match(/<\/h2>/g) &&
|
||||
code.match(/<\/h2>/g).length === code.match(/<h2>/g).length
|
||||
);
|
||||
```
|
||||
|
||||
O elemento `h2` deve conter o texto `CatPhotoApp`.
|
||||
|
||||
```js
|
||||
assert.isTrue(/cat(\s)?photo(\s)?app/gi.test($('h2').text()));
|
||||
```
|
||||
|
||||
O elemento `h1` deve conter o texto `Hello World`.
|
||||
|
||||
```js
|
||||
assert.isTrue(/hello(\s)+world/gi.test($('h1').text()));
|
||||
```
|
||||
|
||||
O elemento `h1` deve estar antes do elemento `h2`.
|
||||
|
||||
```js
|
||||
assert(code.match(/<h1>\s*?.*?\s*?<\/h1>\s*<h2>\s*?.*?\s*?<\/h2>/gi));
|
||||
```
|
||||
|
||||
# --seed--
|
||||
|
||||
## --seed-contents--
|
||||
|
||||
```html
|
||||
<h1>Hello World</h1>
|
||||
```
|
||||
|
||||
# --solutions--
|
||||
|
||||
```html
|
||||
<h1>Hello World</h1>
|
||||
<h2>CatPhotoApp</h2>
|
||||
```
|
||||
@ -0,0 +1,64 @@
|
||||
---
|
||||
id: bad87fee1348bd9aedf08801
|
||||
title: Informar com o elemento de parágrafo
|
||||
challengeType: 0
|
||||
videoUrl: 'https://scrimba.com/p/pVMPUv/ceZ7DtN'
|
||||
forumTopicId: 18202
|
||||
dashedName: inform-with-the-paragraph-element
|
||||
---
|
||||
|
||||
# --description--
|
||||
|
||||
Elementos `p` são os preferidos para textos de parágrafos em sites. `p` é a abreviação de "parágrafo".
|
||||
|
||||
Você pode criar um elemento de parágrafo da seguinte forma:
|
||||
|
||||
```html
|
||||
<p>I'm a p tag!</p>
|
||||
```
|
||||
|
||||
# --instructions--
|
||||
|
||||
Crie um elemento `p` abaixo do elemento `h2` e dê a ele o texto `Hello Paragraph`.
|
||||
|
||||
**Observação:** é uma convenção que todas as tags HTML sejam escritas em letras minúsculas (por exemplo, `<p></p>` em vez de `<P></P>`).
|
||||
|
||||
# --hints--
|
||||
|
||||
Seu código deve ter um elemento `p` válido.
|
||||
|
||||
```js
|
||||
assert($('p').length > 0);
|
||||
```
|
||||
|
||||
O elemento `p` deve conter o texto `Hello Paragraph`.
|
||||
|
||||
```js
|
||||
assert.isTrue(/hello(\s)+paragraph/gi.test($('p').text()));
|
||||
```
|
||||
|
||||
O elemento `p` deve ter uma tag de fechamento.
|
||||
|
||||
```js
|
||||
assert(
|
||||
code.match(/<\/p>/g) &&
|
||||
code.match(/<\/p>/g).length === code.match(/<p/g).length
|
||||
);
|
||||
```
|
||||
|
||||
# --seed--
|
||||
|
||||
## --seed-contents--
|
||||
|
||||
```html
|
||||
<h1>Hello World</h1>
|
||||
<h2>CatPhotoApp</h2>
|
||||
```
|
||||
|
||||
# --solutions--
|
||||
|
||||
```html
|
||||
<h1>Hello World</h1>
|
||||
<h2>CatPhotoApp</h2>
|
||||
<p>Hello Paragraph</p>
|
||||
```
|
||||
@ -0,0 +1,98 @@
|
||||
---
|
||||
id: bad87fee1348bd9aecf08801
|
||||
title: Introdução aos elementos do HTML5
|
||||
challengeType: 0
|
||||
videoUrl: 'https://scrimba.com/p/pVMPUv/cBkZGpt7'
|
||||
forumTopicId: 301097
|
||||
dashedName: introduction-to-html5-elements
|
||||
---
|
||||
|
||||
# --description--
|
||||
|
||||
O HTML5 apresenta tags HTML mais descritivas. Essas tags incluem `main`, `header`, `footer`, `nav`, `video`, `article` e `section`, entre outras.
|
||||
|
||||
Essas tags conferem uma estrutura descritiva ao seu HTML, tornam seu HTML mais fácil de ler e ajudam com a otimização dos mecanismos de busca (SEO) e com a acessibilidade. A tag `main` do HTML5 ajuda os mecanismos de busca e outros desenvolvedores a encontrar o conteúdo principal de sua página.
|
||||
|
||||
Vemos abaixo um exemplo de uso de um elemento `main` com dois elementos filhos dentre dele:
|
||||
|
||||
```html
|
||||
<main>
|
||||
<h1>Hello World</h1>
|
||||
<p>Hello Paragraph</p>
|
||||
</main>
|
||||
```
|
||||
|
||||
**Observação:** muitas das novas tags HTML5 e seus benefícios são abordadas na seção Acessibilidade Aplicada.
|
||||
|
||||
# --instructions--
|
||||
|
||||
Crie um segundo elemento `p` com o texto de kitty ipsum a seguir: `Purr jump eat the grass rip the couch scratched sunbathe, shed everywhere rip the couch sleep in the sink fluffy fur catnip scratched.`
|
||||
|
||||
Em seguida, crie um elemento `main` e coloque os dois elementos `p` dentro do elemento `main`.
|
||||
|
||||
# --hints--
|
||||
|
||||
Você deve ter 2 elementos `p` contendo o texto Kitty Ipsum.
|
||||
|
||||
```js
|
||||
assert($('p').length > 1);
|
||||
```
|
||||
|
||||
Cada elemento `p` deve ter uma tag de fechamento.
|
||||
|
||||
```js
|
||||
assert(
|
||||
code.match(/<\/p>/g) &&
|
||||
code.match(/<\/p>/g).length === code.match(/<p/g).length
|
||||
);
|
||||
```
|
||||
|
||||
O elemento `p` deve conter as palavras do texto `kitty ipsum text` fornecido.
|
||||
|
||||
```js
|
||||
assert.isTrue(/Purr\s+jump\s+eat/gi.test($('p').text()));
|
||||
```
|
||||
|
||||
O seu código deve ter um elemento `main`.
|
||||
|
||||
```js
|
||||
assert($('main').length === 1);
|
||||
```
|
||||
|
||||
O elemento `main` deve ter dois elementos de parágrafo como filhos.
|
||||
|
||||
```js
|
||||
assert($('main').children('p').length === 2);
|
||||
```
|
||||
|
||||
A tag de abertura `main` deve vir antes da primeira tag de parágrafo.
|
||||
|
||||
```js
|
||||
assert(code.match(/<main>\s*?<p>/g));
|
||||
```
|
||||
|
||||
A tag de fechamento `main` deve vir depois da segunda tag de fechamento de parágrafo.
|
||||
|
||||
```js
|
||||
assert(code.match(/<\/p>\s*?<\/main>/g));
|
||||
```
|
||||
|
||||
# --seed--
|
||||
|
||||
## --seed-contents--
|
||||
|
||||
```html
|
||||
<h2>CatPhotoApp</h2>
|
||||
|
||||
<p>Kitty ipsum dolor sit amet, shed everywhere shed everywhere stretching attack your ankles chase the red dot, hairball run catnip eat the grass sniff.</p>
|
||||
```
|
||||
|
||||
# --solutions--
|
||||
|
||||
```html
|
||||
<h2>CatPhotoApp</h2>
|
||||
<main>
|
||||
<p>Kitty ipsum dolor sit amet, shed everywhere shed everywhere stretching attack your ankles chase the red dot, hairball run catnip eat the grass sniff.</p>
|
||||
<p>Purr jump eat the grass rip the couch scratched sunbathe, shed everywhere rip the couch sleep in the sink fluffy fur catnip scratched.</p>
|
||||
</main>
|
||||
```
|
||||
@ -0,0 +1,78 @@
|
||||
---
|
||||
id: bad87fee1348bd9aedf08816
|
||||
title: Criar links para páginas externas com elementos de âncora
|
||||
challengeType: 0
|
||||
videoUrl: 'https://scrimba.com/p/pVMPUv/c8EkncB'
|
||||
forumTopicId: 18226
|
||||
dashedName: link-to-external-pages-with-anchor-elements
|
||||
---
|
||||
|
||||
# --description--
|
||||
|
||||
Você pode usar elementos `a` (*âncora*) para vincular conteúdos externos à sua página da web.
|
||||
|
||||
Os elementos `a` precisam de um endereço (link) que é colocado no atributo `href`. Eles também precisam de um texto que servirá de "âncora". Aqui está um exemplo:
|
||||
|
||||
```html
|
||||
<a href="https://www.freecodecamp.org">this links to freecodecamp.org</a>
|
||||
```
|
||||
|
||||
Então o seu navegador exibirá o texto `this links to freecodecamp.org` como um "link" que você pode clicar. E esse link levará você para o endereço `https://www.freecodecamp.org`.
|
||||
|
||||
# --instructions--
|
||||
|
||||
Crie um elemento `a` que vincule a `https://www.freecatphotoapp.com` e que tenha "cat photos" como seu texto de âncora.
|
||||
|
||||
# --hints--
|
||||
|
||||
O elemento `a` deve ter o texto `cat photos` como âncora.
|
||||
|
||||
```js
|
||||
assert(/cat photos/gi.test($('a').text()));
|
||||
```
|
||||
|
||||
Você precisa de um elemento `a` que se vincule ao endereço `https://www.freecatphotoapp.com`
|
||||
|
||||
```js
|
||||
assert(/^https?:\/\/(www\.)?freecatphotoapp\.com\/?$/i.test($('a').attr('href')));
|
||||
```
|
||||
|
||||
O elemento `a` deve ter uma tag de fechamento.
|
||||
|
||||
```js
|
||||
assert(
|
||||
code.match(/<\/a>/g) &&
|
||||
code.match(/<\/a>/g).length === code.match(/<a/g).length
|
||||
);
|
||||
```
|
||||
|
||||
# --seed--
|
||||
|
||||
## --seed-contents--
|
||||
|
||||
```html
|
||||
<h2>CatPhotoApp</h2>
|
||||
<main>
|
||||
|
||||
|
||||
|
||||
<img src="https://www.bit.ly/fcc-relaxing-cat" alt="A cute orange cat lying on its back.">
|
||||
|
||||
<p>Kitty ipsum dolor sit amet, shed everywhere shed everywhere stretching attack your ankles chase the red dot, hairball run catnip eat the grass sniff.</p>
|
||||
<p>Purr jump eat the grass rip the couch scratched sunbathe, shed everywhere rip the couch sleep in the sink fluffy fur catnip scratched.</p>
|
||||
</main>
|
||||
```
|
||||
|
||||
# --solutions--
|
||||
|
||||
```html
|
||||
<h2>CatPhotoApp</h2>
|
||||
<main>
|
||||
|
||||
<img src="https://www.bit.ly/fcc-relaxing-cat" alt="A cute orange cat lying on its back.">
|
||||
|
||||
<a href="https://www.freecatphotoapp.com">cat photos</a>
|
||||
<p>Kitty ipsum dolor sit amet, shed everywhere shed everywhere stretching attack your ankles chase the red dot, hairball run catnip eat the grass sniff.</p>
|
||||
<p>Purr jump eat the grass rip the couch scratched sunbathe, shed everywhere rip the couch sleep in the sink fluffy fur catnip scratched.</p>
|
||||
</main>
|
||||
```
|
||||
@ -0,0 +1,120 @@
|
||||
---
|
||||
id: bad88fee1348bd9aedf08816
|
||||
title: Link para seções internas de uma página com elementos de âncora
|
||||
challengeType: 0
|
||||
videoUrl: 'https://scrimba.com/p/pVMPUv/cyrDRUL'
|
||||
forumTopicId: 301098
|
||||
dashedName: link-to-internal-sections-of-a-page-with-anchor-elements
|
||||
---
|
||||
|
||||
# --description--
|
||||
|
||||
Os elementos `a` (*âncora*) também podem ser usados para criar vínculos internos, para saltar para seções diferentes de sua pagina da web.
|
||||
|
||||
Para criar um link interno, você associa o atributo `href` do link para um símbolo de hash `#`, em combinação com o valor do atributo `id` do elemento ao qual você deseja vincular internamente, que geralmente fica mais abaixo na página. Você, então, precisará adicionar o mesmo atributo `id` ao elemento que está sendo vinculado ao link. `id` é um atributo que descreve um único elemento.
|
||||
|
||||
Abaixo, vemos um exemplo de um link vinculado a um elemento interno da página:
|
||||
|
||||
```html
|
||||
<a href="#contacts-header">Contacts</a>
|
||||
...
|
||||
<h2 id="contacts-header">Contacts</h2>
|
||||
```
|
||||
|
||||
Quando os usuários clicam no link `Contacts`, eles são levados à seção da página que contem o texto **Contacts**.
|
||||
|
||||
# --instructions--
|
||||
|
||||
Troque o link externo por um link interno mudando o atributo `href` para o valor `"#footer"` e o texto de `cat photos` para `Jump to Bottom`.
|
||||
|
||||
Remova o atributo `target="_blank"` da tag de âncora, pois ele faz com que o documento vinculado abra em uma nova aba do navegador.
|
||||
|
||||
Em seguida, adicione o atributo `id` com o valor de `footer` ao elemento `<footer>` na parte inferior da página.
|
||||
|
||||
# --hints--
|
||||
|
||||
Deve haver apenas uma tag de âncora em sua página.
|
||||
|
||||
```js
|
||||
assert($('a').length == 1);
|
||||
```
|
||||
|
||||
Deve haver apenas um elemento `footer` em sua página.
|
||||
|
||||
```js
|
||||
assert($('footer').length == 1);
|
||||
```
|
||||
|
||||
A tag `a` deve ter o atributo `href` definido com o valor de "#footer".
|
||||
|
||||
```js
|
||||
assert($('a').eq(0).attr('href') == '#footer');
|
||||
```
|
||||
|
||||
A tag `a` não deve ter o atributo `target`
|
||||
|
||||
```js
|
||||
assert(
|
||||
typeof $('a').eq(0).attr('target') == typeof undefined ||
|
||||
$('a').eq(0).attr('target') == true
|
||||
);
|
||||
```
|
||||
|
||||
O texto de `a` deve ser "Jump to Bottom".
|
||||
|
||||
```js
|
||||
assert(
|
||||
$('a')
|
||||
.eq(0)
|
||||
.text()
|
||||
.match(/Jump to Bottom/gi)
|
||||
);
|
||||
```
|
||||
|
||||
A tag `footer` deve ter um atributo `id` com o valor "footer".
|
||||
|
||||
```js
|
||||
assert($('footer').eq(0).attr('id') == 'footer');
|
||||
```
|
||||
|
||||
# --seed--
|
||||
|
||||
## --seed-contents--
|
||||
|
||||
```html
|
||||
<h2>CatPhotoApp</h2>
|
||||
<main>
|
||||
|
||||
<a href="https://www.freecatphotoapp.com" target="_blank">cat photos</a>
|
||||
|
||||
<img src="https://www.bit.ly/fcc-relaxing-cat" alt="A cute orange cat lying on its back.">
|
||||
|
||||
<p>Kitty ipsum dolor sit amet, shed everywhere shed everywhere stretching attack your ankles chase the red dot, hairball run catnip eat the grass sniff. Purr jump eat the grass rip the couch scratched sunbathe, shed everywhere rip the couch sleep in the sink fluffy fur catnip scratched. Kitty ipsum dolor sit amet, shed everywhere shed everywhere stretching attack your ankles chase the red dot, hairball run catnip eat the grass sniff.</p>
|
||||
<p>Purr jump eat the grass rip the couch scratched sunbathe, shed everywhere rip the couch sleep in the sink fluffy fur catnip scratched. Kitty ipsum dolor sit amet, shed everywhere shed everywhere stretching attack your ankles chase the red dot, hairball run catnip eat the grass sniff. Purr jump eat the grass rip the couch scratched sunbathe, shed everywhere rip the couch sleep in the sink fluffy fur catnip scratched.</p>
|
||||
<p>Meowwww loved it, hated it, loved it, hated it yet spill litter box, scratch at owner, destroy all furniture, especially couch or lay on arms while you're using the keyboard. Missing until dinner time toy mouse squeak roll over. With tail in the air lounge in doorway. Man running from cops stops to pet cats, goes to jail.</p>
|
||||
<p>Intently stare at the same spot poop in the plant pot but kitten is playing with dead mouse. Get video posted to internet for chasing red dot leave fur on owners clothes meow to be let out and mesmerizing birds leave fur on owners clothes or favor packaging over toy so purr for no reason. Meow to be let out play time intently sniff hand run outside as soon as door open yet destroy couch.</p>
|
||||
|
||||
</main>
|
||||
|
||||
<footer>Copyright Cat Photo App</footer>
|
||||
```
|
||||
|
||||
# --solutions--
|
||||
|
||||
```html
|
||||
<h2>CatPhotoApp</h2>
|
||||
<main>
|
||||
|
||||
<a href="#footer">Jump to Bottom</a>
|
||||
|
||||
<img src="https://www.bit.ly/fcc-relaxing-cat" alt="A cute orange cat lying on its back.">
|
||||
|
||||
<p>Kitty ipsum dolor sit amet, shed everywhere shed everywhere stretching attack your ankles chase the red dot, hairball run catnip eat the grass sniff. Purr jump eat the grass rip the couch scratched sunbathe, shed everywhere rip the couch sleep in the sink fluffy fur catnip scratched. Kitty ipsum dolor sit amet, shed everywhere shed everywhere stretching attack your ankles chase the red dot, hairball run catnip eat the grass sniff.</p>
|
||||
<p>Purr jump eat the grass rip the couch scratched sunbathe, shed everywhere rip the couch sleep in the sink fluffy fur catnip scratched. Kitty ipsum dolor sit amet, shed everywhere shed everywhere stretching attack your ankles chase the red dot, hairball run catnip eat the grass sniff. Purr jump eat the grass rip the couch scratched sunbathe, shed everywhere rip the couch sleep in the sink fluffy fur catnip scratched.</p>
|
||||
<p>Meowwww loved it, hated it, loved it, hated it yet spill litter box, scratch at owner, destroy all furniture, especially couch or lay on arms while you're using the keyboard. Missing until dinner time toy mouse squeak roll over. With tail in the air lounge in doorway. Man running from cops stops to pet cats, goes to jail.</p>
|
||||
<p>Intently stare at the same spot poop in the plant pot but kitten is playing with dead mouse. Get video posted to internet for chasing red dot leave fur on owners clothes meow to be let out and mesmerizing birds leave fur on owners clothes or favor packaging over toy so purr for no reason. Meow to be let out play time intently sniff hand run outside as soon as door open yet destroy couch.</p>
|
||||
|
||||
</main>
|
||||
|
||||
<footer id="footer">Copyright Cat Photo App</footer>
|
||||
```
|
||||
@ -0,0 +1,58 @@
|
||||
---
|
||||
id: bad87fee1348bd9aedf08817
|
||||
title: Tornar links inativos usando o símbolo de hash
|
||||
challengeType: 0
|
||||
videoUrl: 'https://scrimba.com/p/pVMPUv/cMdkytL'
|
||||
forumTopicId: 18230
|
||||
dashedName: make-dead-links-using-the-hash-symbol
|
||||
---
|
||||
|
||||
# --description--
|
||||
|
||||
Às vezes, você desejará adicionar elementos `a` ao seu site antes de saber para onde eles levarão.
|
||||
|
||||
Isso também é útil quando você está mudando o comportamento de um link usando `JavaScript`, linguagem que aprenderemos mais tarde.
|
||||
|
||||
# --instructions--
|
||||
|
||||
O valor atual do atributo `href` é um link que aponta para "`https://www.freecatphotoapp.com`. Substitua o valor do atributo `href` por um `#`, também conhecido como símbolo de hash, para criar um link inativo.
|
||||
|
||||
Por exemplo: `href="#"`
|
||||
|
||||
# --hints--
|
||||
|
||||
Seu elemento `a` deve ser um link inativo com o valor do atributo `href` definido como "#".
|
||||
|
||||
```js
|
||||
assert($('a').attr('href') === '#');
|
||||
```
|
||||
|
||||
# --seed--
|
||||
|
||||
## --seed-contents--
|
||||
|
||||
```html
|
||||
<h2>CatPhotoApp</h2>
|
||||
<main>
|
||||
<p>Click here to view more <a href="https://www.freecatphotoapp.com" target="_blank">cat photos</a>.</p>
|
||||
|
||||
<img src="https://www.bit.ly/fcc-relaxing-cat" alt="A cute orange cat lying on its back.">
|
||||
|
||||
<p>Kitty ipsum dolor sit amet, shed everywhere shed everywhere stretching attack your ankles chase the red dot, hairball run catnip eat the grass sniff.</p>
|
||||
<p>Purr jump eat the grass rip the couch scratched sunbathe, shed everywhere rip the couch sleep in the sink fluffy fur catnip scratched.</p>
|
||||
</main>
|
||||
```
|
||||
|
||||
# --solutions--
|
||||
|
||||
```html
|
||||
<h2>CatPhotoApp</h2>
|
||||
<main>
|
||||
<p>Click here to view more <a href="#" target="_blank">cat photos</a>.</p>
|
||||
|
||||
<img src="https://www.bit.ly/fcc-relaxing-cat" alt="A cute orange cat lying on its back.">
|
||||
|
||||
<p>Kitty ipsum dolor sit amet, shed everywhere shed everywhere stretching attack your ankles chase the red dot, hairball run catnip eat the grass sniff.</p>
|
||||
<p>Purr jump eat the grass rip the couch scratched sunbathe, shed everywhere rip the couch sleep in the sink fluffy fur catnip scratched.</p>
|
||||
</main>
|
||||
```
|
||||
@ -0,0 +1,163 @@
|
||||
---
|
||||
id: bad87fee1348bd9aede08817
|
||||
title: Inserir um elemento de âncora em um parágrafo
|
||||
challengeType: 0
|
||||
forumTopicId: 18244
|
||||
dashedName: nest-an-anchor-element-within-a-paragraph
|
||||
---
|
||||
|
||||
# --description--
|
||||
|
||||
Você pode incluir links dentro de outros elementos de texto.
|
||||
|
||||
```html
|
||||
<p>
|
||||
Here's a <a target="_blank" href="https://www.freecodecamp.org"> link to www.freecodecamp.org</a> for you to follow.
|
||||
</p>
|
||||
```
|
||||
|
||||
Vamos dividir o exemplo em partes. O texto normal está dentro do elemento `p`:
|
||||
|
||||
```html
|
||||
<p> Here's a ... for you to follow. </p>
|
||||
```
|
||||
|
||||
Em seguida, temos o elemento de *âncora* `<a>` (que exige uma tag de fechamento `</a>`):
|
||||
|
||||
```html
|
||||
<a> ... </a>
|
||||
```
|
||||
|
||||
`target` é um atributo da tag de âncora que especifica onde abrir o link. O valor `_blank` especifica que o link deve ser aberto em uma nova aba. O atributo `href` da tag de âncora contém o endereço URL do link:
|
||||
|
||||
```html
|
||||
<a href="https://www.freecodecamp.org" target="_blank"> ... </a>
|
||||
```
|
||||
|
||||
O texto, `link to www.freecodecamp.org`, dentro do elemento `a`, é chamado de <dfn>texto âncora</dfn> e exibirá o link que pode ser clicado:
|
||||
|
||||
```html
|
||||
<a href=" ... " target="...">link to freecodecamp.org</a>
|
||||
```
|
||||
|
||||
O resultado final do exemplo ficará assim:
|
||||
|
||||
Aqui está um link <a href="https://www.freecodecamp.org" target="_blank">para www.freecodecamp.org</a> para você clicar.
|
||||
|
||||
# --instructions--
|
||||
|
||||
Insira o elemento `a` dentro de um novo elemento `p`. O novo parágrafo deve ter um texto que diz `View more cat photos`, onde `cat photos` é um link, enquanto o restante é texto sem formatação.
|
||||
|
||||
# --hints--
|
||||
|
||||
Você deve ter apenas um elemento `a`.
|
||||
|
||||
```js
|
||||
assert(
|
||||
$('a').length === 1
|
||||
);
|
||||
```
|
||||
|
||||
O elemento `a` deve direcionar para "`https://www.freecatphotoapp.com`".
|
||||
|
||||
```js
|
||||
assert(
|
||||
$('a[href="https://www.freecatphotoapp.com"]').length === 1
|
||||
);
|
||||
```
|
||||
|
||||
O texto âncora do elemento `a` deve ser `cat photos`
|
||||
|
||||
```js
|
||||
assert(
|
||||
$('a')
|
||||
.text()
|
||||
.match(/cat\sphotos/gi)
|
||||
);
|
||||
```
|
||||
|
||||
Você deve criar um novo elemento `p`. Deve haver pelo menos 3 tags `p` no seu código HTML.
|
||||
|
||||
```js
|
||||
assert($('p') && $('p').length > 2);
|
||||
```
|
||||
|
||||
O elemento `a` deve ser incluído em seu novo elemento `p`.
|
||||
|
||||
```js
|
||||
assert(
|
||||
$('a[href="https://www.freecatphotoapp.com"]').parent().is('p')
|
||||
);
|
||||
```
|
||||
|
||||
O elemento `p` deve ter o texto `View more` (com um espaço depois dele).
|
||||
|
||||
```js
|
||||
assert(
|
||||
$('a[href="https://www.freecatphotoapp.com"]')
|
||||
.parent()
|
||||
.text()
|
||||
.match(/View\smore\s/gi)
|
||||
);
|
||||
```
|
||||
|
||||
O elemento `a` <em>não</em> deve conter o texto `View more`.
|
||||
|
||||
```js
|
||||
assert(
|
||||
!$('a')
|
||||
.text()
|
||||
.match(/View\smore/gi)
|
||||
);
|
||||
```
|
||||
|
||||
Todos os elementos `p` devem ter uma tag de fechamento.
|
||||
|
||||
```js
|
||||
assert(
|
||||
code.match(/<\/p>/g) &&
|
||||
code.match(/<p/g) &&
|
||||
code.match(/<\/p>/g).length === code.match(/<p/g).length
|
||||
);
|
||||
```
|
||||
|
||||
Cada elemento `a` deve ter uma tag de fechamento.
|
||||
|
||||
```js
|
||||
assert(
|
||||
code.match(/<\/a>/g) &&
|
||||
code.match(/<a/g) &&
|
||||
code.match(/<\/a>/g).length === code.match(/<a/g).length
|
||||
);
|
||||
```
|
||||
|
||||
# --seed--
|
||||
|
||||
## --seed-contents--
|
||||
|
||||
```html
|
||||
<h2>CatPhotoApp</h2>
|
||||
<main>
|
||||
|
||||
<a href="https://www.freecatphotoapp.com" target="_blank">cat photos</a>
|
||||
|
||||
<img src="https://www.bit.ly/fcc-relaxing-cat" alt="A cute orange cat lying on its back.">
|
||||
|
||||
<p>Kitty ipsum dolor sit amet, shed everywhere shed everywhere stretching attack your ankles chase the red dot, hairball run catnip eat the grass sniff.</p>
|
||||
<p>Purr jump eat the grass rip the couch scratched sunbathe, shed everywhere rip the couch sleep in the sink fluffy fur catnip scratched.</p>
|
||||
</main>
|
||||
```
|
||||
|
||||
# --solutions--
|
||||
|
||||
```html
|
||||
<h2>CatPhotoApp</h2>
|
||||
<main>
|
||||
<p>View more <a target="_blank" href="https://www.freecatphotoapp.com">cat photos</a></p>
|
||||
|
||||
<img src="https://www.bit.ly/fcc-relaxing-cat" alt="A cute orange cat lying on its back.">
|
||||
|
||||
<p>Kitty ipsum dolor sit amet, shed everywhere shed everywhere stretching attack your ankles chase the red dot, hairball run catnip eat the grass sniff.</p>
|
||||
<p>Purr jump eat the grass rip the couch scratched sunbathe, shed everywhere rip the couch sleep in the sink fluffy fur catnip scratched.</p>
|
||||
</main>
|
||||
```
|
||||
@ -0,0 +1,121 @@
|
||||
---
|
||||
id: bad87fee1348bd9aede08835
|
||||
title: Inserir diversos elementos em um único elemento div
|
||||
challengeType: 0
|
||||
videoUrl: 'https://scrimba.com/p/pVMPUv/cNW4kC3'
|
||||
forumTopicId: 18246
|
||||
dashedName: nest-many-elements-within-a-single-div-element
|
||||
---
|
||||
|
||||
# --description--
|
||||
|
||||
O elemento `div`, também conhecido como elemento de divisão, é um container para outros elementos.
|
||||
|
||||
O elemento `div` é, provavelmente, o elemento de HTML mais utilizado de todos.
|
||||
|
||||
Assim como os outros elementos que precisam de fechamento, você pode abrir um elemento `div` com `<div>` e fechá-lo em outra linha com `</div>`.
|
||||
|
||||
# --instructions--
|
||||
|
||||
Insira suas listas que dizem "Things cats love" e "Top 3 things cats hate" dentro de um único elemento `div`.
|
||||
|
||||
Dica: experimente colocar a tag de abertura da `div` acima do elemento `p` que diz "Things cats love" e a tag de fechamento da `div` após a tag de fechamento do elemento `ol` para que as duas listas estejam dentro do elemento `div`.
|
||||
|
||||
# --hints--
|
||||
|
||||
Os elementos `p` deve estar dentro do elemento `div`.
|
||||
|
||||
```js
|
||||
assert($('div').children('p').length > 1);
|
||||
```
|
||||
|
||||
O elemento `ul` deve estar dentro do elemento `div`.
|
||||
|
||||
```js
|
||||
assert($('div').children('ul').length > 0);
|
||||
```
|
||||
|
||||
O elemento `ol` deve estar dentro do elemento `div`.
|
||||
|
||||
```js
|
||||
assert($('div').children('ol').length > 0);
|
||||
```
|
||||
|
||||
O elemento `div` deve ter uma tag de fechamento.
|
||||
|
||||
```js
|
||||
assert(
|
||||
code.match(/<\/div>/g) &&
|
||||
code.match(/<\/div>/g).length === code.match(/<div>/g).length
|
||||
);
|
||||
```
|
||||
|
||||
# --seed--
|
||||
|
||||
## --seed-contents--
|
||||
|
||||
```html
|
||||
<h2>CatPhotoApp</h2>
|
||||
<main>
|
||||
<p>Click here to view more <a href="#">cat photos</a>.</p>
|
||||
|
||||
<a href="#"><img src="https://www.bit.ly/fcc-relaxing-cat" alt="A cute orange cat lying on its back."></a>
|
||||
|
||||
<p>Things cats love:</p>
|
||||
<ul>
|
||||
<li>cat nip</li>
|
||||
<li>laser pointers</li>
|
||||
<li>lasagna</li>
|
||||
</ul>
|
||||
<p>Top 3 things cats hate:</p>
|
||||
<ol>
|
||||
<li>flea treatment</li>
|
||||
<li>thunder</li>
|
||||
<li>other cats</li>
|
||||
</ol>
|
||||
|
||||
<form action="https://www.freecatphotoapp.com/submit-cat-photo">
|
||||
<label for="indoor"><input id="indoor" type="radio" name="indoor-outdoor" value="indoor" checked> Indoor</label>
|
||||
<label for="outdoor"><input id="outdoor" type="radio" name="indoor-outdoor" value="outdoor"> Outdoor</label><br>
|
||||
<label for="loving"><input id="loving" type="checkbox" name="personality" value="loving" checked> Loving</label>
|
||||
<label for="lazy"><input id="lazy" type="checkbox" name="personality" value="lazy"> Lazy</label>
|
||||
<label for="energetic"><input id="energetic" type="checkbox" name="personality" value="energetic"> Energetic</label><br>
|
||||
<input type="text" placeholder="cat photo URL" required>
|
||||
<button type="submit">Submit</button>
|
||||
</form>
|
||||
</main>
|
||||
```
|
||||
|
||||
# --solutions--
|
||||
|
||||
```html
|
||||
<h2>CatPhotoApp</h2>
|
||||
<main>
|
||||
<p>Click here to view more <a href="#">cat photos</a>.</p>
|
||||
|
||||
<a href="#"><img src="https://www.bit.ly/fcc-relaxing-cat" alt="A cute orange cat lying on its back."></a>
|
||||
<div>
|
||||
<p>Things cats love:</p>
|
||||
<ul>
|
||||
<li>cat nip</li>
|
||||
<li>laser pointers</li>
|
||||
<li>lasagna</li>
|
||||
</ul>
|
||||
<p>Top 3 things cats hate:</p>
|
||||
<ol>
|
||||
<li>flea treatment</li>
|
||||
<li>thunder</li>
|
||||
<li>other cats</li>
|
||||
</ol>
|
||||
</div>
|
||||
<form action="https://www.freecatphotoapp.com/submit-cat-photo">
|
||||
<label for="indoor"><input id="indoor" type="radio" name="indoor-outdoor" value="indoor" checked> Indoor</label>
|
||||
<label for="outdoor"><input id="outdoor" type="radio" name="indoor-outdoor" value="outdoor"> Outdoor</label><br>
|
||||
<label for="loving"><input id="loving" type="checkbox" name="personality" value="loving" checked> Loving</label>
|
||||
<label for="lazy"><input id="lazy" type="checkbox" name="personality" value="lazy"> Lazy</label>
|
||||
<label for="energetic"><input id="energetic" type="checkbox" name="personality" value="energetic"> Energetic</label><br>
|
||||
<input type="text" placeholder="cat photo URL" required>
|
||||
<button type="submit">Submit</button>
|
||||
</form>
|
||||
</main>
|
||||
```
|
||||
@ -0,0 +1,60 @@
|
||||
---
|
||||
id: bd7123c8c441eddfaeb5bdef
|
||||
title: Conhecer os elementos HTML
|
||||
challengeType: 0
|
||||
videoUrl: 'https://scrimba.com/p/pVMPUv/cE8Gpt2'
|
||||
forumTopicId: 18276
|
||||
dashedName: say-hello-to-html-elements
|
||||
---
|
||||
|
||||
# --description--
|
||||
|
||||
Bem-vindo aos desafios sobre HTML da freeCodeCamp. Eles guiarão você no aprendizado sobre desenvolvimento web.
|
||||
|
||||
Em primeiro lugar, você construirá uma página simples usando HTML. Você poderá editar o código em seu editor, que se encontra incorporado a esta página.
|
||||
|
||||
Você consegue ver no seu editor de código um código que diz `<h1>Hello</h1>`? Ele é um elemento HTML.
|
||||
|
||||
A maioria dos elementos HTML tem uma tag de abertura e uma tag de fechamento.
|
||||
|
||||
As tags de abertura seguem este formato:
|
||||
|
||||
```html
|
||||
<h1>
|
||||
```
|
||||
|
||||
As de fechamento, por outro lado, são assim:
|
||||
|
||||
```html
|
||||
</h1>
|
||||
```
|
||||
|
||||
A única diferença entre as tags de abertura e de fechamento é a barra inclinada para frente (/) após o sinal de menor (<) da tag de fechamento.
|
||||
|
||||
Cada desafio possui testes que você pode executar a qualquer momento clicando no botão "Run tests". Ao passar em todos os testes, será sugerido que você envie a solução e vá para o próximo desafio.
|
||||
|
||||
# --instructions--
|
||||
|
||||
Para passar no teste deste desafio, mude o texto do elemento `h1` para que ele exiba `Hello World`.
|
||||
|
||||
# --hints--
|
||||
|
||||
O elemento `h1` deve conter o texto `Hello World`.
|
||||
|
||||
```js
|
||||
assert.isTrue(/hello(\s)+world/gi.test($('h1').text()));
|
||||
```
|
||||
|
||||
# --seed--
|
||||
|
||||
## --seed-contents--
|
||||
|
||||
```html
|
||||
<h1>Hello</h1>
|
||||
```
|
||||
|
||||
# --solutions--
|
||||
|
||||
```html
|
||||
<h1>Hello World</h1>
|
||||
```
|
||||
@ -0,0 +1,80 @@
|
||||
---
|
||||
id: bad87fee1348bd9aedf08820
|
||||
title: Transformar uma imagem em um link
|
||||
challengeType: 0
|
||||
videoUrl: 'https://scrimba.com/p/pVMPUv/cRdBnUr'
|
||||
forumTopicId: 18327
|
||||
dashedName: turn-an-image-into-a-link
|
||||
---
|
||||
|
||||
# --description--
|
||||
|
||||
Você pode transformar elementos em links colocando-os dentro de um elemento `a`.
|
||||
|
||||
Coloque a imagem dentro de um elemento `a`. Exemplo:
|
||||
|
||||
```html
|
||||
<a href="#"><img src="https://www.bit.ly/fcc-running-cats" alt="Three kittens running towards the camera."></a>
|
||||
```
|
||||
|
||||
Lembre-se de usar `#` como valor da propriedade `href` no elemento `a` para transformá-lo em um link inativo.
|
||||
|
||||
# --instructions--
|
||||
|
||||
Coloque o elemento de imagem existente dentro do elemento `a` (*de âncora*).
|
||||
|
||||
Uma vez feito isso, passe o cursor do mouse sobre a imagem. O ponteiro do cursor vai se transformar no ponteiro para clicar em links. A foto agora é um link.
|
||||
|
||||
# --hints--
|
||||
|
||||
O elemento `img` deve estar dentro do elemento `a`.
|
||||
|
||||
```js
|
||||
assert($('a').children('img').length > 0);
|
||||
```
|
||||
|
||||
O elemento `a` deve ser um link inativo com o atributo `href` definido com o valor `#`.
|
||||
|
||||
```js
|
||||
assert(new RegExp('#').test($('a').children('img').parent().attr('href')));
|
||||
```
|
||||
|
||||
Todos os elementos `a` devem ter uma tag de fechamento.
|
||||
|
||||
```js
|
||||
assert(
|
||||
code.match(/<\/a>/g) &&
|
||||
code.match(/<a/g) &&
|
||||
code.match(/<\/a>/g).length === code.match(/<a/g).length
|
||||
);
|
||||
```
|
||||
|
||||
# --seed--
|
||||
|
||||
## --seed-contents--
|
||||
|
||||
```html
|
||||
<h2>CatPhotoApp</h2>
|
||||
<main>
|
||||
<p>Click here to view more <a href="#">cat photos</a>.</p>
|
||||
|
||||
<img src="https://www.bit.ly/fcc-relaxing-cat" alt="A cute orange cat lying on its back.">
|
||||
|
||||
<p>Kitty ipsum dolor sit amet, shed everywhere shed everywhere stretching attack your ankles chase the red dot, hairball run catnip eat the grass sniff.</p>
|
||||
<p>Purr jump eat the grass rip the couch scratched sunbathe, shed everywhere rip the couch sleep in the sink fluffy fur catnip scratched.</p>
|
||||
</main>
|
||||
```
|
||||
|
||||
# --solutions--
|
||||
|
||||
```html
|
||||
<h2>CatPhotoApp</h2>
|
||||
<main>
|
||||
<p>Click here to view more <a href="#">cat photos</a>.</p>
|
||||
|
||||
<a href="#"><img src="https://www.bit.ly/fcc-relaxing-cat" alt="A cute orange cat lying on its back."></a>
|
||||
|
||||
<p>Kitty ipsum dolor sit amet, shed everywhere shed everywhere stretching attack your ankles chase the red dot, hairball run catnip eat the grass sniff.</p>
|
||||
<p>Purr jump eat the grass rip the couch scratched sunbathe, shed everywhere rip the couch sleep in the sink fluffy fur catnip scratched.</p>
|
||||
</main>
|
||||
```
|
||||
@ -0,0 +1,70 @@
|
||||
---
|
||||
id: bad87fee1348bd9aedf08802
|
||||
title: Remover comentário no HTML
|
||||
challengeType: 0
|
||||
videoUrl: 'https://scrimba.com/p/pVMPUv/cBmG9T7'
|
||||
forumTopicId: 18329
|
||||
dashedName: uncomment-html
|
||||
---
|
||||
|
||||
# --description--
|
||||
|
||||
Comentar é uma forma de deixar comentários para outros desenvolvedores dentro de seu código sem afetar o resultado exibido para o usuário final.
|
||||
|
||||
Também é uma maneira conveniente de deixar código inativo sem ter de excluí-lo completamente.
|
||||
|
||||
Comentários em HTML começam com `<!--` e terminam em `-->`
|
||||
|
||||
# --instructions--
|
||||
|
||||
Remova seus elementos `h1`, `h2` e `p` dos comentários.
|
||||
|
||||
# --hints--
|
||||
|
||||
O elemento `h1` deve estar visível na página ao retirá-lo do comentário.
|
||||
|
||||
```js
|
||||
assert($('h1').length > 0);
|
||||
```
|
||||
|
||||
O elemento `h2` deve estar visível na página ao retirá-lo do comentário.
|
||||
|
||||
```js
|
||||
assert($('h2').length > 0);
|
||||
```
|
||||
|
||||
O elemento `p` deve estar visível na página ao retirá-lo do comentário.
|
||||
|
||||
```js
|
||||
assert($('p').length > 0);
|
||||
```
|
||||
|
||||
Não devem restar tags de comentário visíveis na página (por exemplo, `-->`).
|
||||
|
||||
```js
|
||||
assert(!$('*:contains("-->")')[1]);
|
||||
```
|
||||
|
||||
# --seed--
|
||||
|
||||
## --seed-contents--
|
||||
|
||||
```html
|
||||
<!--
|
||||
<h1>Hello World</h1>
|
||||
|
||||
<h2>CatPhotoApp</h2>
|
||||
|
||||
<p>Kitty ipsum dolor sit amet, shed everywhere shed everywhere stretching attack your ankles chase the red dot, hairball run catnip eat the grass sniff.</p>
|
||||
-->
|
||||
```
|
||||
|
||||
# --solutions--
|
||||
|
||||
```html
|
||||
<h1>Hello World</h1>
|
||||
|
||||
<h2>CatPhotoApp</h2>
|
||||
|
||||
<p>Kitty ipsum dolor sit amet, shed everywhere shed everywhere stretching attack your ankles chase the red dot, hairball run catnip eat the grass sniff.</p>
|
||||
```
|
||||
@ -0,0 +1,86 @@
|
||||
---
|
||||
id: bad87fee1348bd9aedc08830
|
||||
title: Tornar um campo de entrada obrigatório usando HTML5
|
||||
challengeType: 0
|
||||
videoUrl: 'https://scrimba.com/p/pVMPUv/cMd4EcQ'
|
||||
forumTopicId: 18360
|
||||
dashedName: use-html5-to-require-a-field
|
||||
---
|
||||
|
||||
# --description--
|
||||
|
||||
Você pode tornar obrigatórios campos específicos do formulário para que o usuário não possa enviar o formulário sem que o tenha preenchido.
|
||||
|
||||
Por exemplo, se você quer tornar um campo de inserção de texto obrigatório, simplesmente adicione o atributo `required` em seu elemento `input` da seguinte maneira: `<input type="text" required>`
|
||||
|
||||
# --instructions--
|
||||
|
||||
Torne o `input` de texto em um campo `required`, para que seu usuário não possa enviar o formulário sem preencher este campo.
|
||||
|
||||
Em seguida, tente enviar seu formulário sem inserir informação alguma nele. Consegue ver como o formulário no HTML5 notifica você de que o campo é obrigatório?
|
||||
|
||||
# --hints--
|
||||
|
||||
O elemento `input` do tipo de texto deve ter o atributo `required`.
|
||||
|
||||
```js
|
||||
assert($('input').prop('required'));
|
||||
```
|
||||
|
||||
# --seed--
|
||||
|
||||
## --seed-contents--
|
||||
|
||||
```html
|
||||
<h2>CatPhotoApp</h2>
|
||||
<main>
|
||||
<p>Click here to view more <a href="#">cat photos</a>.</p>
|
||||
|
||||
<a href="#"><img src="https://www.bit.ly/fcc-relaxing-cat" alt="A cute orange cat lying on its back."></a>
|
||||
|
||||
<p>Things cats love:</p>
|
||||
<ul>
|
||||
<li>cat nip</li>
|
||||
<li>laser pointers</li>
|
||||
<li>lasagna</li>
|
||||
</ul>
|
||||
<p>Top 3 things cats hate:</p>
|
||||
<ol>
|
||||
<li>flea treatment</li>
|
||||
<li>thunder</li>
|
||||
<li>other cats</li>
|
||||
</ol>
|
||||
<form action="https://www.freecatphotoapp.com/submit-cat-photo">
|
||||
<input type="text" placeholder="cat photo URL">
|
||||
<button type="submit">Submit</button>
|
||||
</form>
|
||||
</main>
|
||||
```
|
||||
|
||||
# --solutions--
|
||||
|
||||
```html
|
||||
<h2>CatPhotoApp</h2>
|
||||
<main>
|
||||
<p>Click here to view more <a href="#">cat photos</a>.</p>
|
||||
|
||||
<a href="#"><img src="https://www.bit.ly/fcc-relaxing-cat" alt="A cute orange cat lying on its back."></a>
|
||||
|
||||
<p>Things cats love:</p>
|
||||
<ul>
|
||||
<li>cat nip</li>
|
||||
<li>laser pointers</li>
|
||||
<li>lasagna</li>
|
||||
</ul>
|
||||
<p>Top 3 things cats hate:</p>
|
||||
<ol>
|
||||
<li>flea treatment</li>
|
||||
<li>thunder</li>
|
||||
<li>other cats</li>
|
||||
</ol>
|
||||
<form action="https://www.freecatphotoapp.com/submit-cat-photo">
|
||||
<input type="text" required placeholder="cat photo URL">
|
||||
<button type="submit">Submit</button>
|
||||
</form>
|
||||
</main>
|
||||
```
|
||||
@ -0,0 +1,148 @@
|
||||
---
|
||||
id: 5c6c06847491271903d37cfd
|
||||
title: Usar o atributo value nos inputs do tipo radio e checkbox
|
||||
challengeType: 0
|
||||
forumTopicId: 301099
|
||||
dashedName: use-the-value-attribute-with-radio-buttons-and-checkboxes
|
||||
---
|
||||
|
||||
# --description--
|
||||
|
||||
Quando um formulário é enviado, os dados vão para um servidor, e este, por sua vez, irá identificar os valores de cada input. Os inputs do tipo `radio` e `checkbox` têm seus valores identificados a partir do atributo `value`.
|
||||
|
||||
Por exemplo:
|
||||
|
||||
```html
|
||||
<label for="indoor">
|
||||
<input id="indoor" value="indoor" type="radio" name="indoor-outdoor">Indoor
|
||||
</label>
|
||||
<label for="outdoor">
|
||||
<input id="outdoor" value="outdoor" type="radio" name="indoor-outdoor">Outdoor
|
||||
</label>
|
||||
```
|
||||
|
||||
Aqui, temos dois inputs do tipo `radio`. Quando o usuário envia o formulário com a opção `indoor` selecionada, os dados do formulário incluirão a linha: `indoor-outdoor=indoor`. Essas informações vêm dos atributos `name` e `value` do input "indoor".
|
||||
|
||||
Se você omitir o atributo `value`, o formulário enviado usa o valor padrão, que é `on`. Neste cenário, mesmo que o usuário clicasse na opção "indoor" e enviasse o formulário, os dados resultantes do formulário seriam `indoor-outdoor=on`, o que não é útil. Por isso, o atributo `value` precisa ser definido com algo que identifique a opção.
|
||||
|
||||
# --instructions--
|
||||
|
||||
Dê a cada um dos inputs do tipo `radio` e do tipo `checkbox` o atributo `value`. Use o texto do label do input, em letras minúsculas, como o valor do atributo.
|
||||
|
||||
# --hints--
|
||||
|
||||
Um dos botões de seleção (radio) deve ter o atributo `value` definido com o valor de `indoor`.
|
||||
|
||||
```js
|
||||
assert(
|
||||
$('label:contains("Indoor") > input[type="radio"]').filter("[value='indoor']")
|
||||
.length > 0
|
||||
);
|
||||
```
|
||||
|
||||
Um dos botões de seleção (radio) deve ter o atributo `value` definido com o valor de `outdoor`.
|
||||
|
||||
```js
|
||||
assert(
|
||||
$('label:contains("Outdoor") > input[type="radio"]').filter(
|
||||
"[value='outdoor']"
|
||||
).length > 0
|
||||
);
|
||||
```
|
||||
|
||||
Uma das caixas de seleção (checkbox) deve ter o atributo `value` definido com o valor de `loving`.
|
||||
|
||||
```js
|
||||
assert(
|
||||
$('label:contains("Loving") > input[type="checkbox"]').filter(
|
||||
"[value='loving']"
|
||||
).length > 0
|
||||
);
|
||||
```
|
||||
|
||||
Uma das caixas de seleção (checkbox) deve ter o atributo `value` definido com o valor de `lazy`.
|
||||
|
||||
```js
|
||||
assert(
|
||||
$('label:contains("Lazy") > input[type="checkbox"]').filter("[value='lazy']")
|
||||
.length > 0
|
||||
);
|
||||
```
|
||||
|
||||
Uma das caixas de seleção (checkbox) deve ter o atributo `value` definido com o valor de `energetic`.
|
||||
|
||||
```js
|
||||
assert(
|
||||
$('label:contains("Energetic") > input[type="checkbox"]').filter(
|
||||
"[value='energetic']"
|
||||
).length > 0
|
||||
);
|
||||
```
|
||||
|
||||
# --seed--
|
||||
|
||||
## --seed-contents--
|
||||
|
||||
```html
|
||||
<h2>CatPhotoApp</h2>
|
||||
<main>
|
||||
<p>Click here to view more <a href="#">cat photos</a>.</p>
|
||||
|
||||
<a href="#"><img src="https://www.bit.ly/fcc-relaxing-cat" alt="A cute orange cat lying on its back."></a>
|
||||
|
||||
<p>Things cats love:</p>
|
||||
<ul>
|
||||
<li>cat nip</li>
|
||||
<li>laser pointers</li>
|
||||
<li>lasagna</li>
|
||||
</ul>
|
||||
<p>Top 3 things cats hate:</p>
|
||||
<ol>
|
||||
<li>flea treatment</li>
|
||||
<li>thunder</li>
|
||||
<li>other cats</li>
|
||||
</ol>
|
||||
<form action="https://www.freecatphotoapp.com/submit-cat-photo">
|
||||
<label for="indoor"><input id="indoor" type="radio" name="indoor-outdoor"> Indoor</label>
|
||||
<label for="outdoor"><input id="outdoor" type="radio" name="indoor-outdoor"> Outdoor</label><br>
|
||||
<label for="loving"><input id="loving" type="checkbox" name="personality"> Loving</label>
|
||||
<label for="lazy"><input id="lazy" type="checkbox" name="personality"> Lazy</label>
|
||||
<label for="energetic"><input id="energetic" type="checkbox" name="personality"> Energetic</label><br>
|
||||
<input type="text" placeholder="cat photo URL" required>
|
||||
<button type="submit">Submit</button>
|
||||
</form>
|
||||
</main>
|
||||
```
|
||||
|
||||
# --solutions--
|
||||
|
||||
```html
|
||||
<h2>CatPhotoApp</h2>
|
||||
<main>
|
||||
<p>Click here to view more <a href="#">cat photos</a>.</p>
|
||||
|
||||
<a href="#"><img src="https://www.bit.ly/fcc-relaxing-cat" alt="A cute orange cat lying on its back."></a>
|
||||
|
||||
<p>Things cats love:</p>
|
||||
<ul>
|
||||
<li>cat nip</li>
|
||||
<li>laser pointers</li>
|
||||
<li>lasagna</li>
|
||||
</ul>
|
||||
<p>Top 3 things cats hate:</p>
|
||||
<ol>
|
||||
<li>flea treatment</li>
|
||||
<li>thunder</li>
|
||||
<li>other cats</li>
|
||||
</ol>
|
||||
<form action="https://www.freecatphotoapp.com/submit-cat-photo">
|
||||
<label for="indoor"><input id="indoor" type="radio" name="indoor-outdoor" value="indoor"> Indoor</label>
|
||||
<label for="outdoor"><input id="outdoor" type="radio" name="indoor-outdoor" value="outdoor"> Outdoor</label><br>
|
||||
<label for="loving"><input id="loving" type="checkbox" name="personality" value="loving"> Loving</label>
|
||||
<label for="lazy"><input id="lazy" type="checkbox" name="personality" value="lazy"> Lazy</label>
|
||||
<label for="energetic"><input id="energetic" type="checkbox" name="personality" value="energetic"> Energetic</label><br>
|
||||
<input type="text" placeholder="cat photo URL" required>
|
||||
<button type="submit">Submit</button>
|
||||
</form>
|
||||
</main>
|
||||
```
|
||||
Reference in New Issue
Block a user