"Welcome to freeCodeCamp! <br><br>Check out the lesson map on the left. We have thousands of coding lessons to help you improve your skills. <br><br>You can earn verified certificates by completing certificate's 5 required projects.<br><br>And yes - all of this is 100% free, thanks to the thousands of campers who donate to our nonprofit.",
"Welcome to freeCodeCamp's HTML coding challenges. These will walk you through web development step-by-step.",
"First, you'll start by building a simple web page using HTML. You can edit <code>code</code> in your <code>code editor</code>, which is embedded into this web page.",
"Do you see the code in your code editor that says <code><h1>Hello</h1></code>? That's an HTML <code>element</code>.",
"The only difference between opening and closing tags is the forward slash after the opening bracket of a closing tag.",
"Each challenge has tests you can run at any time by clicking the \"Run tests\" button. When you pass all tests, you'll be prompted to submit your solution and go to the next coding challenge.",
"Beachte, dass der einzige Unterschied zwischen öffnenden und schließenden Tags ist, dass bei schließenden Tags ein Slash nach der sich öffnenden spitzen Klammer folgt.",
"Jede Challenge hat Tests die du jederzeit starten kannst indem du den \"Run tests\" Button drückst. Wenn alle Tests bestehen kannst du mit der nächsten Challenge fortfahren.",
"Um den Test dieser Challenge zu bestehen, ändere den Text deines <code>h1</code> Elements von \"Hello\" zu \"Hello World\". Klicke dann den \"Run tests\" Button."
"Vous pouvez modifier le <code>code</code> dans votre <code>éditeur texte</code>, lequel est disponible dans cette page.",
"Voyez-vous le code dans l'éditeur texte qui dit <code><h1>Hello</h1></code>? C'est un <code>élément</code> HTML.",
"La plupart des éléments HTML ont une <code>balise ouvrante</code> et une <code>balise fermante</code>",
"Les balises ouvrantes ont cette apparence :",
"<code><h1></code>",
"Les balises fermantes ont cette apparence :",
"<code></h1></code>",
"Notez que la seule différence entre une balise ouvrante et fermante est que la balise fermante a une barre oblique après son chevron ouvrant.",
"Chaque défi contient des tests que vous pouvez éxécuter en cliquant sur le bouton \"Run tests\". Lorsque tous les tests sont réussis, vous pouvez poursuivre avec le défi suivant.",
"Pour réussir le test de ce défi, changez le texte de l'élément <code>h1</code> pour \"Hello World\" plutôt que \"Hello\". Cliquez ensuite sur le bouton \"Run tests\"."
"Bem-vindo(a) aos desafios de programação do freeCodeCamp. Eles vão te guiar pelo desenvolvimento web passo a passo.",
"Nós recomendamos que você os resolva em ordem, mas fique à vontade para navegar pelos desafios clicando em \"map\" no menu acima.",
"Além disso, se você quiser salvar seu progresso, você deve entrar para nossa comunidade criando uma conta. Em apenas alguns minutos, você pode entrar na nossa sala de chat, fórum e até mesmo em um grupo de estudos da sua cidade.",
"Primeiramente, você vai começar construindo uma página da web simples com HTML. Você pode editar o <code>código</code> no seu <code>editor de texto</code>, que está embutido nessa página.",
"Você está vendo o código no seu editor de texto que contém <code><h1>Hello</h1></code>? Esse é um <code>elemento</code> HTML.",
"A maioria dos elementos HTML têm uma <code>tag de abertura</code> e uma <code>tag de fechamento</code>.",
"As tags de abertura são assim:",
"<code><h1></code>",
"As tags de fechamento são assim:",
"<code></h1></code>",
"A única diferença entre tags de abertura e fechamento é que as tags de fechamento possuem uma barra (/) depois do sinal de menor (<).",
"Cada desafio possui testes que você pode rodar a qualquer momento clicando no botão \"Run tests\". Quando seu código passar em todos os testes, você poderá enviar sua solução e avançar para o próximo desafio.",
"Вы можете редактировать <code>код</code> в вашем <code>текстовом редакторе</code>, который мы встроили в эту web-страницу.",
"Видите этот код в вашем текстовом редакторе: <code><h1>Hello</h1></code>? Это HTML <code>элемент</code>.",
"Большинство HTML-элементов имеют <code>открывающую метку</code> <code>закрывающую метку</code>.",
"Открывающие метки выглядят так:",
"<code><h1></code>",
"Закрывающие метки выглядят следующим образом:",
"<code></h1></code>",
"Обратите внимание, что единственная разница между открывающими и закрывающими метками заключается в наличии косой черты после открывающей треугольной скобки.",
"Каждое испытание имеет функцию проверки решения, которую вы можете запустить в любой момент нажатием на кнопку \"Run tests\". Как только ваше решение будет удовлетворять всем требованиям, вы сможете перейти к следующему испытанию.",
"The <code>h2</code> element you will be adding in this step will add a level two heading to the web page.",
"This element tells the browser about the structure of your website. <code>h1</code> elements are often used for main headings, while <code>h2</code> elements are generally used for subheadings. There are also <code>h3</code>, <code>h4</code>, <code>h5</code> and <code>h6</code> elements to indicate different levels of subheadings.",
"Add an <code>h2</code> tag that says \"CatPhotoApp\" to create a second HTML <code>element</code> below your \"Hello World\" <code>h1</code> element."
"assert(($(\"h2\").length > 0), 'message: Create an <code>h2</code> element.');",
"assert(code.match(/<\\/h2>/g) && code.match(/<\\/h2>/g).length === code.match(/<h2>/g).length, 'message: Make sure your <code>h2</code> element has a closing tag.');",
"assert.isTrue((/cat(\\s)?photo(\\s)?app/gi).test($(\"h2\").text()), 'message: Your <code>h2</code> element should have the text \"CatPhotoApp\".');",
"assert.isTrue((/hello(\\s)+world/gi).test($(\"h1\").text()), 'message: Your <code>h1</code> element should have the text \"Hello World\".');"
],
"type":"waypoint",
"challengeType":0,
"translations":{
"de":{
"description":[
"In den nächsten Challenges werden wir eine HTML5 App entwickeln die ungefähr so aussehen wird:",
"Das eingetragene <code>h2</code> Element wird ein <code>h2</code> Element auf der Website erzeugen.",
"Dieses Element sagt dem Browser, wie die Struktur deiner Website aufgebaut ist. <code>h1</code> Elemente werden oft für Hauptüberschriften verwendet, während <code>h2</code> Elemente üblicherweise für Zwischenüberschriften verwendet werden. Es gibt auch <code>h3</code>, <code>h4</code>, <code>h5</code> und <code>h6</code> Elemente die verschiedene und neue Bereiche kennzeichnen.",
"<a href=\"https://i.imgur.com/jOc1JF1.png\" target=\"_blank\" data-lightbox=\"img-enlarge\"><img class=\"img-responsive\" src=\"https://i.imgur.com/jOc1JF1.png\" title=\"Cliquez pour agrandir\" alt=\"Une capture écran de notre application de photo de chats\"></a>",
"L'élément <code>h2</code> que vous entrerez créera un élément <code>h2</code> sur le site.",
"Cet élément renseigne votre navigateur sur la structure de votre site. Les éléments <code>h1</code> sont souvent utilisés comme titre, tandis que les éléments <code>h2</code> sont généralement utilisés comme sous-titres. Il existe également les éléments <code>h3</code>, <code>h4</code>, <code>h5</code> et <code>h6</code> qui indiquent une nouvelle et différente section.",
"Ajoutez une balise <code>h2</code> contenant \"CatPhotoApp\" pour créer un second <code>élément</code> HTML sous l'élément <code>h1</code> contenant \"Hello World\"."
"<a href=\"https://i.imgur.com/jOc1JF1.png\" target=\"_blank\" data-lightbox=\"img-enlarge\"><img class=\"img-responsive\" src=\"https://i.imgur.com/jOc1JF1.png\" title=\"Clique para ampliar\" alt=\"Um screenshot do app de fotos de gatos terminado\"></a>",
"O elemento <code>h2</code> que você vai adicionar vai criar um elemento <code>h2</code> na página.",
"Esse elemento indica ao navegador a estrutura do seu site. Elementos <code>h1</code> são geralmente usados para os títulos principais, enquanto elementos <code>h2</code> são usados para subtítulos. Também existem os elementos <code>h3</code>, <code>h4</code>, <code>h5</code> e <code>h6</code>, que indicam seções novas e diferentes.",
"Adicione uma tag <code>h2</code> com o texto \"CatPhotoApp\" para criar um segundo <code>elemento</code> HTML abaixo do seu elemento <code>h1</code> com o texto \"Hello World\"."
"Вводимый вами элемент <code>h2</code> создаст соответствующий элемент <code>h2</code> на web-странице.",
"Этот элемент сообщает браузеру о структуре вашего web-сайта. Элементы <code>h1</code> часто применяют в качестве главных заголовков, в то время как элементы <code>h2</code> обычно используют для обозначения позаголовков. Также существуют элементы <code>h3</code>, <code>h4</code>, <code>h5</code> и <code>h6</code> для обозначения отдельных секций.",
"Добавьте метку <code>h2</code> с текстом \"CatPhotoApp\" для создания второго HTML <code>элемента</code> под вашим элементом <code>h1</code> с текстом \"Hello World\"."
"assert(($(\"p\").length > 0), 'message: Create a <code>p</code> element.');",
"assert.isTrue((/hello(\\s)+paragraph/gi).test($(\"p\").text()), 'message: Your <code>p</code> element should have the text \"Hello Paragraph\".');",
"assert(code.match(/<\\/p>/g) && code.match(/<\\/p>/g).length === code.match(/<p/g).length, 'message: Make sure your <code>p</code> element has a closing tag.');"
],
"type":"waypoint",
"challengeType":0,
"translations":{
"de":{
"description":[
"<code>p</code> Elemente sind das bevorzugte Element für normale Paragraphentexte auf einer Website. P ist die Abkürzung für \"Paragraph\".",
"Du kannst ein <code>p</code> Element so erzeugen:",
"<code><p>Ich bin ein p Element!</p></code>",
"title":"Проинформируйте с применением элемента p",
"description":[
"Элементы <code>p</code> предпочтительно использовать для обозначения параграфов с текстом нормального размера в web-сайтах. P - сокращение от \"paragraph\".",
"Вы можете создать элемент <code>p</code> следующим образом:",
"Создайте элемент <code>p</code> под вашим элементом <code>h2</code> и присвойте ему текст \"Hello Paragraph\"."
]
}
}
},
{
"id":"bad87fee1348bd9aedf08833",
"title":"Fill in the Blank with Placeholder Text",
"description":[
"Web developers traditionally use <code>lorem ipsum text</code> as placeholder text. The 'lorem ipsum' text is randomly scraped from a famous passage by Cicero of Ancient Rome.",
"Lorem ipsum text has been used as placeholder text by typesetters since the 16th century, and this tradition continues on the web.",
"Well, 5 centuries is long enough. Since we're building a CatPhotoApp, let's use something called <code>kitty ipsum text</code>.",
"Replace the text inside your <code>p</code> element with the first few words of this kitty ipsum text: <code>Kitty ipsum dolor sit amet, shed everywhere shed everywhere stretching attack your ankles chase the red dot, hairball run catnip eat the grass sniff.</code>"
],
"challengeSeed":[
"<h1>Hello World</h1>",
"",
"<h2>CatPhotoApp</h2>",
"",
"<p>Hello Paragraph</p>"
],
"tests":[
"assert.isTrue((/Kitty(\\s)+ipsum/gi).test($(\"p\").text()), 'message: Your <code>p</code> element should contain the first few words of the provided <code>kitty ipsum text</code>.');"
],
"type":"waypoint",
"challengeType":0,
"translations":{
"de":{
"description":[
"Webentwickler nutzen für gewöhnlich \"Lorem Ipsum Text\" als Platzhalter. Es heißt \"Lorem Ipsum\", weil es die ersten zwei Wörter aus einer bekannten Passage von Cicero des alten Roms sind.",
"Ersetze den Text in deinem <code>p</code> Element mit den ersten Wörtern des \"Kitty Ipsum\" Textes: <code>Kitty ipsum dolor sit amet, shed everywhere shed everywhere stretching attack your ankles chase the red dot, hairball run catnip eat the grass sniff.</code>"
]
},
"fr":{
"title":"Remplissez les blancs avec du faux-texte",
"description":[
"Les développeurs Web utilisent traditionnellement du <code>lorem ipsum</code> comme texte de substitution. Le texte lorem ipsum provient d'un extrait de Cicero, de la Rome antique.",
"Le texte lorem ipsum a été utilisé comme faux-texte par des typographes depuis le 16<sup>ème</sup> siècle et cette tradition se poursuit sur le Web.",
"Enfin, 5 siècles est suffisament long. Étant donné que nous fabriquons une application de photos de chats, utilisons plutôt du texte <code>Kitty ipsum</code>.",
"Remplacez le texte à l'intérieur des éléments <code>p</code> avec ces quelques mots du texte Kitty ipsum : <code>Kitty ipsum dolor sit amet, shed everywhere shed everywhere stretching attack your ankles chase the red dot, hairball run catnip eat the grass sniff.</code>"
"Desenvolvedores web tradicionalmente usam <code>lorem ipsum</code> como texto de exemplo. Os textos 'lorem ipsum' são partes retiradas aleatoriamente de uma passagem famosa escrita por Cícero na Roma Antiga.",
"Esses textos têm sido usados como texto de exemplo por tipógrafos desde o século 16, e essa tradição continua na web.",
"Bem, 5 séculos é tempo suficiente. Já que estamos construindo um app de fotos de gatos, vamos usar um novo texto chamado de <code>gatinho ipsum</code>.",
"Substitua o texto dentro do seu elemento <code>p</code> com as primeiras palavras desse gatinho ipsum: <code>Kitty ipsum dolor sit amet, shed everywhere shed everywhere stretching attack your ankles chase the red dot, hairball run catnip eat the grass sniff.</code>"
"Традиционно web-разработчики используют текст <code>lorem ipsum</code> в качестве замещающего текста. Он называется тектсом <code>lorem ipsum</code> по первым двум словам известного пассажа Цицерона из Древнего Рима.",
"Текст <code>lorem ipsum</code> применяется в качестве замещающего текста наборщиками с 16-го века, и эта традиция продолжается в сети.",
"5 веков довольно долгий период. Так как мы строим приложение CatPhotoApp, давайте используем нечто называемое текстом <code>kitty ipsum</code>.",
"Замените текст внутри вашего элемента <code>p</code> первыми двумя словами текста <code>kitty ipsum</code>: <code>Kitty ipsum dolor sit amet, shed everywhere shed everywhere stretching attack your ankles chase the red dot, hairball run catnip eat the grass sniff.</code>"
"Commenting is a way that you can leave comments for other developers within your code without affecting the resulting output that is displayed the end user.",
"<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>",
"assert($(\"h1\").length > 0, 'message: Make your <code>h1</code> element visible on your page by uncommenting it.');",
"assert($(\"h2\").length > 0, 'message: Make your <code>h2</code> element visible on your page by uncommenting it.');",
"assert($(\"p\").length > 0, 'message: Make your <code>p</code> element visible on your page by uncommenting it.');",
"assert(!/[^fc]-->/gi.test(code.replace(/ *<!--[^fc]*\\n/g,'')), 'message: Be sure to delete all trailing comment tags, i.e. <code>--></code>.');"
"<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>",
"assert(($(\"h1\").length === 0), 'message: Comment out your <code>h1</code> element so that it is not visible on your page.');",
"assert(($(\"h2\").length > 0), 'message: Leave your <code>h2</code> element uncommented so that it is visible on your page.');",
"assert(($(\"p\").length === 0), 'message: Comment out your <code>p</code> element so that it is not visible on your page.');",
"assert(code.match(/[^fc]-->/g).length > 1, 'message: Be sure to close each of your comments with <code>--></code>.');",
"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>\") , 'message: Do not change the order of the <code>h1</code> <code>h2</code> or <code>p</code> in the code.');"
"Kommentiere die <code>h1</code> und <code>p</code> Elemente aus, aber lasse dein <code>h2</code> Element unkommentiert."
]
},
"fr":{
"title":"Commentez du HTML",
"description":[
"Souvenez-vous que pour débuter un commentaire, vous devez utiliser <code><!--</code> et que pour le terminer, vous devez utiliser <code>--></code>.",
"Ici vous devrez terminer le commentaire juste avant que l'élément <code>h2</code> commence.",
"Delete your <code>h1</code> element so we can simplify our view."
],
"challengeSeed":[
"<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>"
],
"tests":[
"assert(($(\"h1\").length == 0), 'message: Delete your <code>h1</code> element.');",
"assert(($(\"h2\").length > 0), 'message: Leave your <code>h2</code> element on the page.');",
"assert(($(\"p\").length > 0), 'message: Leave your <code>p</code> element on the page.');"
],
"type":"waypoint",
"challengeType":0,
"translations":{
"de":{
"description":[
"Unser Smartphone hat nicht sehr viel vertikalen Platz.",
"Lass uns die unwichtigen Elemente entfernen, damit wir unsere CatPhotoApp entwickeln können.",
"HTML5 introduces more descriptive HTML tags. These include <code>header</code>, <code>footer</code>, <code>nav</code>, <code>video</code>, <code>article</code>, <code>section</code> and others.",
"These tags make your HTML easier to read, and also help with Search Engine Optimization (SEO) and accessibility.",
"The <code>main</code> HTML5 tag helps search engines and other developers find the main content of your page.",
"<strong>Note</strong><br>Many of the new HTML5 tags and their benefits are covered in the Applied Accessibility section.",
"<hr>",
"Create a second <code>p</code> element after the existing <code>p</code> element with the following kitty ipsum text: <code>Purr jump eat the grass rip the couch scratched sunbathe, shed everywhere rip the couch sleep in the sink fluffy fur catnip scratched.</code>",
"Wrap the paragraphs with an opening and closing <code>main</code> tag."
],
"challengeSeed":[
"<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>"
],
"tests":[
"assert($(\"p\").length > 1, 'message: You need 2 <code>p</code> elements with Kitty Ipsum text.');",
"assert(code.match(/<\\/p>/g) && code.match(/<\\/p>/g).length === code.match(/<p/g).length, 'message: Make sure each of your <code>p</code> elements has a closing tag.');",
"assert.isTrue((/Purr\\s+jump\\s+eat/gi).test($(\"p\").text()), 'message: Your <code>p</code> element should contain the first few words of the provided additional <code>kitty ipsum text</code>.');",
"assert($('main').length === 1, 'message: Your code should have one <code>main</code> element.');",
"assert($(\"main\").children(\"p\").length === 2, 'message: The <code>main</code> element should have two paragraph elements as children.');",
"assert(code.match(/<main>\\s*?<p>/g), 'message: The opening <code>main</code> tag should come before the first paragraph tag.');",
"assert(code.match(/<\\/p>\\s*?<\\/main>/g), 'message: The closing <code>main</code> tag should come after the second closing paragraph tag.');"
"O HTML5 introduziu tags mais descritivas, como <code>header</code> (cabeçalho), <code>footer</code> (rodapé), <code>nav</code> (navegação), <code>video</code> (vídeo), <code>article</code> (artigo), <code>section</code> (seção), entre outras.",
"Essas tags deixam seu HTML mais fácil de ler e também ajudam na otimização para motores de busca (SEO) e acessibilidade.",
"A tag HTML5 <code>main</code> (principal) ajuda mecanismos de busca e outros desenvolvedores a encontrar o conteúdo principal da sua página.",
"<strong>Nota</strong><br>Várias das novas tags HTML5 e seus benefícios são discutidos na seção de Acessibilidade aplicada.",
"<hr>",
"Crie um segundo elemento <code>p</code> depois dos elementos <code>p</code> existentes com o seguinte texto gatinho ipsum: <code>Purr jump eat the grass rip the couch scratched sunbathe, shed everywhere rip the couch sleep in the sink fluffy fur catnip scratched.</code>",
"Coloque tags <code>main</code> de abertura e fechamento ao redor dos parágrafos."
"All <code>img</code> elements <strong>must</strong> have an <code>alt</code> attribute. The text inside an <code>alt</code> attribute is used for screen readers to improve accessibility and is displayed if the image fails to load.",
" <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>"
],
"tests":[
"assert($(\"img\").length > 0, 'message: Your page should have an image element.');",
"assert(new RegExp(\"\\/\\/bit.ly\\/fcc-relaxing-cat|\\/\\/s3.amazonaws.com\\/freecodecamp\\/relaxing-cat.jpg\", \"gi\").test($(\"img\").attr(\"src\")), 'message: Your image should have a <code>src</code> attribute that points to the kitten image.');",
"assert(code.match(/alt\\s*?=\\s*?(\\\"|\\').*(\\\"|\\')/), 'message: Your image element <strong>must</strong> have an <code>alt</code> attribute.');"
],
"type":"waypoint",
"challengeType":0,
"translations":{
"de":{
"description":[
"Du kannst <code>img</code> Elemente verwenden, um Bilder in deine Website einzubauen. Um zur URL des Bildes zu verweisen, benutzt du das <code>src</code> Attribut.",
"Vous pouvez ajouter des images à votre site Web en utilisant l'élément <code>img</code> et pointer vers une URL d'image spécifique en utilisant l'attribut <code>src</code>.",
"Você pode adicionar imagens ao seu site usando o elemento <code>img</code> e apontando para a URL de uma imagem específica no atributo <code>src</code>.",
"Note que na maioria dos casos, elementos <code>img</code> possuem auto-fechamento (não precisam de tag de fechamento).",
"Todos os elementos <code>img</code> <strong>devem</strong> ter um atributo <code>alt</code>. O texto do atributo <code>alt</code> é usado por leitores de tela para melhorar a acessibilidade e é mostrado no lugar da imagem se ela não puder ser carregada.",
"Vamos adicionar um atributo <code>alt</code> ao nosso exemplo acima:",
"<code><img src=\"https://www.a-fonte-da-sua-imagem.com/sua-imagem.jpg\" alt=\"Autor numa praia fazendo joinha.\"></code>",
"Вы можете добавлять изображения к вашему сайту с помощью элемента <code>img</code> и указывать ссылки определённых изображений с помощтю атрибута <code>src</code>.",
"You can use <code>anchor</code> elements to link to content outside of your web page.",
"<code>anchor</code> elements need a destination web address called an <code>href</code> attribute. They also need anchor text. Here's an example:",
"<code><a href=\"https://freecodecamp.org\">this links to freecodecamp.org</a></code>",
"Then your browser will display the text <strong>\"this links to freecodecamp.org\"</strong> as a link you can click. And that link will take you to the web address <strong>https://www.freecodecamp.org</strong>.",
" <img src=\"https://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>",
"assert((/cat photos/gi).test($(\"a\").text()), 'message: Your <code>a</code> element should have the <code>anchor text</code> of \"cat photos\".');",
"assert(/http:\\/\\/(www\\.)?freecatphotoapp\\.com/gi.test($(\"a\").attr(\"href\")), 'message: You need an <code>a</code> element that links to <code>http://freecatphotoapp<wbr>.com</code>');",
"assert(code.match(/<\\/a>/g) && code.match(/<\\/a>/g).length === code.match(/<a/g).length, 'message: Make sure your <code>a</code> element has a closing tag.');"
],
"type":"waypoint",
"challengeType":0,
"translations":{
"de":{
"title":"Verlinke externe Seiten mit Anker Elementen",
"<code>a</code> Elemente, auch bekannt als <code>anchor</code> (Anker) Elemente, werden verwendet um auf Inhalte außerhalb der aktuellen Seite zu verweisen.",
"So sieht ein <code>a</code> Element aus. In diesem Fall wird es innerhalb eines Paragraphen Elements verwendet. Das bedeutet dein Link wird innerhalb des Satzes erscheinen.",
"<a href=\"https://i.imgur.com/hviuZwe.png\" target=\"_blank\" data-lightbox=\"img-enlarge\"><img class=\"img-responsive\" title=\"Click to enlarge\" alt=\"Eine Darstellung wie man Anker Elemente mit dem gleichen Text wie in der folgenden Zeile erstellt\" src=\"https://i.imgur.com/hviuZwe.png\"></a>",
"<code><p>Hier ist ein <a href=\"http://freecodecamp.org\"> Link zu freeCodeCamp</a> dem du folgen kannst.</p></code>",
"Erstelle ein <code>a</code> Element, das auf <code>http://freecatphotoapp.com</code> verweist und den \"cat photos\" als <code>anchor text</code> (Link-Text) beinhaltet."
"title":"Enlaza páginas externas con elementos ancla",
"description":[
"Los elementos <code>a</code>, también conocidos como elementos <code>ancla</code>, se utilizan para enlazar a contenido fuera de la página actual.",
"Aquí está un diagrama de un elemento <code>a</code>. En este caso, el elemento <code>a</code> se utiliza en el medio de un elemento de párrafo, lo que significa que el enlace aparecerá en el medio de una frase. ",
"<a href=\"https://i.imgur.com/hviuZwe.png\" target=\"_blank\" data-lightbox=\"img-enlarge\"> <img class=\"img-responsive\" title=\"Haz clic para ampliar\" alt=\"un diagrama de cómo las etiquetas de ancla se componen con el mismo texto, como en la siguiente línea\" src=\"https://i.imgur.com/hviuZwe.png\"></a> ",
"Crea un elemento <code>a</code> que se vincule a <code>http://freecatphotoapp.com</code> y tenga como <code>texto de ancla</code> \"fotos de gatos\"."
"Elementos <code>a</code>, também conhecidos como elementos <code>âncora</code>, são usados para criar links para conteúdo de fora da página atual.",
"Aqui está um diagrama de um elemento <code>a</code>. Nesse caso, o elemento <code>a</code> é usado no meio de um elemento de parágrafo, o que significa que esse link vai aparecer no meio de uma frase.",
"<a href=\"https://i.imgur.com/QSCIiNH.png\" target=\"_blank\" data-lightbox=\"img-enlarge\"><img class=\"img-responsive\" title=\"Clique para ampliar\" alt=\"um diagrama de como tags âncora são compostas com o mesmo texto assim como na linha seguinte\" src=\"https://i.imgur.com/QSCIiNH.png\"></a>",
"<code><p>Aqui está um <a href=\"http://freecodecamp.org\"> link para o freecodecamp.org</a> para você clicar.</p></code>",
"title":"Присоедините внешние страницы с помощью якорных элементов",
"description":[
"Элементы <code>a</code>, также известные как <code>якорные</code> элементы, применяют для связи с содержимым вне текущей страницы.",
"Вот диаграмма элемента <code>a</code>. В этом случае, элемент <code>a</code> использован в середине элемента параграфа, что значит, что ссылка появится в середине предложения.",
"<a href=\"https://i.imgur.com/hviuZwe.png\" target=\"_blank\" data-lightbox=\"img-enlarge\"><img class=\"img-responsive\" title=\"Click to enlarge\" alt=\"a diagram of how anchor tags are composed with the same text as on the following line\" src=\"https://i.imgur.com/hviuZwe.png\"></a>",
"Создайте элемент <code>a</code>, который присоединяет <code>http://freecatphotoapp.com</code> и имеет значение \"cat photos\" в качестве <code>текста якоря</code>."
]
}
}
},
{
"id":"bad88fee1348bd9aedf08816",
"title":"Link to Internal Sections of a Page with Anchor Elements",
"Anchor elements can also be used to create internal links to jump to different sections within a webpage.",
"To create an internal link, you assign a link's <code>href</code> attribute to a hash symbol <code>#</code> plus the value of the <code>id</code> attribute for the element that you want to internally link to, usually further down the page. You then need to add the same <code>id</code> attribute to the element you are linking to. An <code>id</code> is an attribute that uniquely describes an element.",
"Below is an example of an internal anchor link and its target element:",
"Change your external link to an internal link by changing the <code>href</code> attribute to \"#footer\" and the text from \"cat photos\" to \"Jump to Bottom\".",
"Remove the <code>target=\"_blank\"</code> attribute from the anchor tag since this causes the linked document to open in a new window tab.",
"Then add an <code>id</code> attribute with a value of \"footer\" to the <code><footer></code> element at the bottom of the page."
" <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>",
"assert(typeof $('a').eq(0).attr('target') == typeof undefined || $('a').eq(0).attr('target') == true, 'message: The <code>a</code> tag should not have a <code>target</code> attribute');",
"assert($('a').eq(0).text().match(/Jump to Bottom/gi), 'message: The <code>a</code> text should be \"Jump to Bottom\".');",
"assert($('footer').eq(0).attr('id') == \"footer\", 'message: The <code>footer</code> tag should have an <code>id</code> attribute set to \"footer\".');"
"Além de criar links externos, elementos âncora também podem ser usados para criar links internos, que são links que pulam para diferentes seções dentro de uma mesma página.",
"O formato é parecido com um link externo, só que, ao invés de uma URL no atributo <code>href</code>, você usa o símbolo <code>#</code> e uma palavra para descrever a seção para a qual você quer pular.",
"Aqui está um exemplo:",
"<code><a href=\"#contact\">Ir para a seção de contato</a></code>",
"Em seguida, você precisa criar no seu HTML um elemento âncora correspondente no lugar em que você quer que seus usuários cheguem quando clicarem no seu link interno. Ao invés de usar o atributo <code>href</code>, você deve usar o atributo <code>name</code>. Aqui está um exemplo:",
"Agora, quando seus usuários clicarem no link \"Ir para a seção de contato\", eles serão levados para a seção da página em que está o elemento âncora que tenha \"contact\" no seu atributo <code>name</code>.",
"<hr>",
"Mude seu link externo para um link interno trocando seu atributo <code>href</code> para \"#bottom\" e o texto âncora de \"cat photos\" para \"Pular para o final\".",
"Então, adicione um elemento âncora com o atributo <code>name</code> como \"bottom\" depois do último parágrafo.",
"<strong>Nota</strong><br>Adicionamos mais texto gatinho ipsum para os parágrafos para mostrar melhor o efeito de clicar no link interno para pular para o final da página. Além disso, essa mudança só vai se aplicar para esse desafio. O próximo desafio vai voltar a mostrar seu link externo."
"<blockquote><p><br> Here's a <a href=\"http://freecodecamp.org\"> link to freecodecamp.org</a> for you to follow.<br></p></blockquote>",
"Let's break down the example:",
"Normal text is wrapped in the <code>p</code> element:<br> <code><p> Here's a ... for you to follow. </p></code>",
"Next is the <code>anchor</code> element <code><a></code> (which requires a closing tag <code></a></code>):<br> <code><a> ... </a></code>",
"<code>href</code> is an anchor tag attribute that contains the URL address of the link:<br> <code><a href=\"http://freecodecamp.org\"> ... </a></code>",
"The text, <strong>\"link to freecodecamp.org\"</strong>, within the anchor element called <code>anchor text</code>, will display a link to click:<br> <code><a href=\" ... \">link to freecodecamp.org</a></code>",
"The final output of the example will look like this:<br><p>Here's a <a href=\"http://freecodecamp.org\"> link to freecodecamp.org</a> for you to follow.</p>",
"Now nest your existing <code>a</code> element within a new <code>p</code> element (just after the existing <code>main</code> element). The new paragraph should have text that says \"View more cat photos\", where \"cat photos\" is a link, and the rest of the text is plain text."
" <img src=\"https://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>",
"assert(($(\"a[href=\\\"http://freecatphotoapp.com\\\"]\").length > 0 || $(\"a[href=\\\"http://www.freecatphotoapp.com\\\"]\").length > 0), 'message: You need an <code>a</code> element that links to \"http://freecatphotoapp.com\".');",
"assert($(\"a\").text().match(/cat\\sphotos/gi), 'message: Your <code>a</code> element should have the anchor text of \"cat photos\"');",
"assert($(\"p\") && $(\"p\").length > 2, 'message: Create a new <code>p</code> element around your <code>a</code> element. There should be at least 3 total <code>p</code> tags in your HTML code.');",
"assert(($(\"a[href=\\\"http://freecatphotoapp.com\\\"]\").parent().is(\"p\") || $(\"a[href=\\\"http://www.freecatphotoapp.com\\\"]\").parent().is(\"p\")), 'message: Your <code>a</code> element should be nested within your new <code>p</code> element.');",
"assert(($(\"a[href=\\\"http://freecatphotoapp.com\\\"]\").parent().text().match(/View\\smore\\s/gi) || $(\"a[href=\\\"http://www.freecatphotoapp.com\\\"]\").parent().text().match(/View\\smore\\s/gi)), 'message: Your <code>p</code> element should have the text \"View more \" (with a space after it).');",
"assert(!$(\"a\").text().match(/View\\smore/gi), 'message: Your <code>a</code> element should <em>not</em> have the text \"View more\".');",
"assert(code.match(/<\\/p>/g) && code.match(/<p/g) && code.match(/<\\/p>/g).length === code.match(/<p/g).length, 'message: Make sure each of your <code>p</code> elements has a closing tag.');",
"assert(code.match(/<\\/a>/g) && code.match(/<a/g) && code.match(/<\\/a>/g).length === code.match(/<a/g).length, 'message: Make sure each of your <code>a</code> elements has a closing tag.');"
"<a href=\"https://i.imgur.com/hviuZwe.png\" target=\"_blank\" data-lightbox=\"img-enlarge\"><img class=\"img-responsive\" title=\"Klick zum Vergrößern\" alt=\"Eine Darstellung wie Anker Elemente geschrieben werden mit dem gleichen Text wie in der folgenden Zeile\" src=\"https://i.imgur.com/hviuZwe.png\"></a>",
"<code><p>Hier ist ein <a href=\"https://freecodecamp.org\"> Link zu freeCodeCamp</a> dem du folgen kannst.</p></code>",
"Jetzt umschließe dein <code>a</code> Element mit einem neuen <code>p</code> Element (direkt nach dem bereits existierenden <code>main</code> Element) indem steht \"View more cat photos\", wo allerdings nur \"cat photos\" ein Link ist und der Rest normaler Text."
"<a href=\"https://i.imgur.com/hviuZwe.png\" target=\"_blank\" data-lightbox=\"img-enlarge\"><img class=\"img-responsive\" title=\"Pulse para ampliar\" alt=\"un diagrama de como se componen las etiquetas de anclaje con el texto como en la siguiente línea\" src=\"https://i.imgur.com/hviuZwe.png\"></a>",
"Ahora anida el elemento <code>a</code> existente dentro de un nuevo elemento <code>p</code> (justo después del elemento <code>main</code> que ya tienes) de tal forma que el párrafo que lo rodee diga \"View more cat photos\", pero que sólo \"cat photos\" sea un enlace, y el resto sea texto plano ."
"<a href=\"https://i.imgur.com/QSCIiNH.png\" target=\"_blank\" data-lightbox=\"img-enlarge\"><img class=\"img-responsive\" title=\"Clique para ampliar\" alt=\"um diagrama de como tags âncora são compostas com o mesmo texto assim como na linha seguinte\" src=\"https://i.imgur.com/QSCIiNH.png\"></a>",
"<code><p>Aqui está um <a href=\"https://freecodecamp.org\"> link para o freeCodeCamp</a> para você clicar.</p></code>",
"Agora, aninhe seu elemento <code>a</code> existente a um novo elemento <code>p</code> (logo em seguida do elemento <code>main</code> existente), de forma que o parágrafo ao redor tenha o texto \"View more cat photos\", mas apenas a parte \"cat photos\" seja um link e o resto seja apenas texto."
"<a href=\"https://i.imgur.com/hviuZwe.png\" target=\"_blank\" data-lightbox=\"img-enlarge\"><img class=\"img-responsive\" title=\"Click to enlarge\" alt=\"a diagram of how anchor tags are composed with the same text as on the following line\" src=\"https://i.imgur.com/hviuZwe.png\"></a>",
"Теперь вложите ваш существующий элемент <code>a</code> внутрь нового элемента <code>p</code> (сразу после существующего элемента <code>main</code>) таким образом, что добавляемый параграф сообщает: \"View more cat photos\", но где только \"cat photos\" является ссылкой, а остальной текст обычный."
"You can code together with other campers in your city by joining a local freeCodeCamp study group. <br><br> Click the button below to open our study group directory. <br><br>Find your local study group and click it. This will take you to their Facebook group. <br><br>Click the <bold>Join group</bold> button. <br><br>You'll get a notification from Facebook once the group has accepted you. Then you can go back and introduce yourself. <br><br>If you don't have a Facebook account or don't want to code with other campers in your city, you can skip this step.",
"Una imagen de algunos de nuestros campistas compartiendo en un café local. 3 hombres y 3 mujeres están sentados alrededor de una mesa con portátiles afuera, y están sonriendo y programando.",
"Nuestros Campamentos te ayudan a programar con otros campistas en tu ciudad. Puedes coordinar grupos de estudio o atender eventos de programación locales juntos.",
""
],
[
"https://i.imgur.com/fTFMjwf.gif",
"Un gif mostrándote como puedes pulsar en el enlace inferior, encontrar tu ciudad en la lista de Campamentos, entonces haz clic en el enlace de Facebook para tu ciudad y unirte al grupo de Facebook de tu ciudad.",
"Encuentra tu ciudad en esta lista y haz clic en esta. Esto te llevara al grupo de Facebook del Campamento de tu ciudad. Da clic en el botón de \"Unirse al grupo\" para unirte a el grupo. Alguien del mismo campamento debería aprobarte en breve.",
"title":"Tritt einem Campsite in deiner Stadt bei",
"description":[
[
"https://i.imgur.com/XugIMb4.jpg",
"Ein Foto von einigen Campern bei einem Treffen in einem lokalen Cafe.",
"Unsere Campsites sind Facebook Gruppen die dir helfen dich mit anderen Campern aus deiner Stadt zu treffen. Du kannst diese Gruppen verwenden um an \"Coffee-and-Code\" Treffen, wo du andere Camper in einem Cafe triffst um gemeinsam zu programmieren, teilzunehmen oder zu organisieren",
""
],
[
"https://i.imgur.com/fTFMjwf.gif",
"Ein GIF das zeigt wie du auf den untenstehenden Link klickst, deine Stadt aus der Liste aller Campsites suchst, auf den Facebook Link klickst und der Facebook Gruppe beitrittst.",
"Finde deine Stadt auf dieser Liste und klick sie an. Du wirst auf die Facebook Gruppe des Campsites deiner Stadt geleitet. Klick den \"Gruppe beitreten\" Button um eine Beitrittsanfrage zu stellen. Jemand aus der Gruppe sollte dich in kürzester Zeit annehmen.",
"title":"Unisciti ad un gruppo Free Code Camp nella tua città",
"description":[
[
"https://i.imgur.com/XugIMb4.jpg",
"Una foto di alcuni dei nostri camper riuniti in un bar locale.",
"È possibile programmare insieme ad altri campers nella tua città aderendo ad un gruppo Free Code Camp vicino a te.",
""
],
[
"https://i.imgur.com/fTFMjwf.gif",
"Una gif che mostra come è possibile fare clic sul link qui sotto, e trovare la tua città nella lista dei gruppi locali.",
"Trova la tua città in questa lista e cliccala. Verrai indirizzato alla sua pagina Facebook. Fai clic sul pulsante \" Entra nel gruppo \". Qualcuno del gruppo dovrebbe approvare a breve la tua richiesta. Se la tua città non è in questo elenco, scorri alla parte superiore di questo articolo wiki per le istruzioni su come iniziare un gruppo nella tua città. ",
"freeCodeCamp is a small nonprofit with a big mission: to help you improve your coding skills and expand your career. Help us pay for servers and other costs. Set up a monthly donation you can afford.",
"The current value of the <code>href</code> attribute is a link that points to \"http://freecatphotoapp.com\". Replace the <code>href</code> attribute value with a <code>#</code>, also known as a hash symbol, to create a dead link.",
" <img src=\"https://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>",
"assert($(\"a\").attr(\"href\") === \"#\", 'message: Your <code>a</code> element should be a dead link with the value of the <code>href</code> attribute set to \"#\".');"
],
"type":"waypoint",
"challengeType":0,
"translations":{
"de":{
"title":"Erstelle tote Links mit dem Hash Symbol",
"description":[
"Manchmal wirst du <code>a</code> Elemente zu deiner Website hinzufügen möchten, ohne dass du das Ziel des Links kennst.",
"Das ist auch nützlich, wenn du die Funktion eines Links mit <code>jQuery</code> verändern willst. Das werden wir später noch behandeln.",
"Ersetze den Inhalt des <code>href</code> Attributs deines <code>a</code> Elements mit einem <code>#</code>, auch bekannt als Hash Symbol, um einen toten Link zu erzeugen."
]
},
"es":{
"title":"Haz vínculos muertos utilizando el símbolo de numero",
"description":[
"A veces quieres agregar elementos <code>a</code> a tu sitio web antes de saber qué enlazarán.",
"Esto también es útil cuando estás cambiando el comportamiento de un enlace usando <code>jQuery</code>, lo cual aprenderemos más adelante.",
"Reemplaza el atributo <code>href</code> de tu elemento <code>a</code> con un <code>#</code>, también conocido como un símbolo de número o de <em>hash</em>, para convertirlo en un vínculo muerto."
"O valor atual do atributo <code>href</code> é \"http://freecatphotoapp.com\". Substitua esse valor por <code>#</code>, também conhecido como hashtag, para criar um link morto."
"Замените значение атрибута <code>href</code> вашего элемента <code>a</code> на <code>#</code>, известное как хэш-символ, для превращения элемента в мёртвую ссылку."
]
}
}
},
{
"id":"bad87fee1348bd9aedf08820",
"title":"Turn an Image into a Link",
"description":[
"You can make elements into links by nesting them within an <code>a</code> element.",
"Nest your image within an <code>a</code> element. Here's an example:",
"<code><a href=\"#\"><img src=\"https://bit.ly/fcc-running-cats\" alt=\"Three kittens running towards the camera.\"></a></code>",
"Remember to use <code>#</code> as your <code>a</code> element's <code>href</code> property in order to turn it into a dead link.",
"Place the existing image element within an anchor element.",
"Once you've done this, hover over your image with your cursor. Your cursor's normal pointer should become the link clicking pointer. The photo is now a link."
" <p>Click here to view more <a href=\"#\">cat photos</a>.</p>",
" ",
" <img src=\"https://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>",
"assert(new RegExp(\"#\").test($(\"a\").children(\"img\").parent().attr(\"href\")), 'message: Your <code>a</code> element should be a dead link with a <code>href</code> attribute set to <code>#</code>.');",
"assert(code.match(/<\\/a>/g) && code.match(/<a/g) && code.match(/<\\/a>/g).length === code.match(/<a/g).length, 'message: Make sure each of your <code>a</code> elements has a closing tag.');"
],
"type":"waypoint",
"challengeType":0,
"translations":{
"de":{
"title":"Verlinke ein Bild",
"description":[
"Du kannst jedes Element in einen Link verwandeln, indem du es mit einem <code>a</code> Element umschließt.",
"Vergewissere dich, dass du ein <code>#</code> innerhalb des <code>href</code> Attributs des <code>a</code> Elements nutzt, um daraus einen toten Link zu machen.",
"Sobald du das gemacht hast, kannst du mit der Maus über dein Bild fahren. Der normale Mauszeiger sollte nun zu einer Hand für Links werden. Das Bild ist jetzt ein Link."
]
},
"es":{
"title":"Convierte una imagen en un vínculo",
"description":[
"Puedes convertir elementos en enlaces al anidarlos dentro de un elemento <code>a</code>.",
"Recuerda usar <code>#</code> como atributo <code>href</code> de tu elemento <code>a</code> con el fin de convertirlo en un vínculo muerto.",
"Una vez hayas hecho esto, coloca el cursor sobre tu imagen. El puntero normal de tu cursor debería convertirse en el puntero de enlace. La foto es ahora un vínculo ."
"Você pode transformar elementos em links aninhando-os a um elemento <code>a</code>.",
"Aninhe sua imagem a um elemento <code>a</code>. Aqui está um exemplo:",
"<code><a href=\"#\"><img src=\"https://bit.ly/fcc-running-cats\" alt=\"Três gatinhos correndo em direção à câmera.\"></a></code>",
"Lembre-se de usar <code>#</code> no atributo <code>href</code> do seu elemento <code>a</code> para que o link esteja morto.",
"Не забывайте использовать <code>#</code> в качестве значения атрибута <code>href</code> вашего элемента <code>a</code> для превращения ссылки в мёртвую.",
"Как только вы это сделаете, наведите курсор мыши на ваше изображение. При этом курсор должен изменить вид с обычного на используемый при наведении на ссылки. Ваше фото теперь является ссылкой."
"HTML has a special element for creating <code>unordered lists</code>, or bullet point style lists.",
"Unordered lists start with an opening <code><ul></code> element, followed by any number of <code><li></code> elements. Finally, unordered lists close with a <code></ul></code>",
" <p>Click here to view more <a href=\"#\">cat photos</a>.</p>",
" ",
" <a href=\"#\"><img src=\"https://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>",
"assert($(\"ul\").length > 0, 'message: Create a <code>ul</code> element.');",
"assert($(\"ul li\").length > 2, 'message: You should have three <code>li</code> elements within your <code>ul</code> element.');",
"assert(code.match(/<\\/ul>/gi) && code.match(/<ul/gi) && code.match(/<\\/ul>/gi).length === code.match(/<ul/gi).length, 'message: Make sure your <code>ul</code> element has a closing tag.');",
"assert(code.match(/<\\/li>/gi) && code.match(/<li[\\s>]/gi) && code.match(/<\\/li>/gi).length === code.match(/<li[\\s>]/gi).length, 'message: Make sure your <code>li</code> elements have closing tags.');"
],
"type":"waypoint",
"challengeType":0,
"translations":{
"de":{
"title":"Erstelle eine ungeordnete Liste",
"description":[
"HTML hat ein spezielles Element zum Erstellen von <code>unordered lists</code> (ungeordneten Listen).",
"Ungeordnete Listen starten mit einem <code><ul></code> Element. Dann beinhalten sie eine gewisse Anzahl an <code><li></code> Elementen.",
"Entferne die letzten zwei <code>p</code> Elemente und erstelle eine ungeordnete Liste von drei Dingen die Katzen lieben am Ende der Seite"
]
},
"es":{
"title":"Crea una lista no ordenada con viñetas",
"description":[
"HTML tiene un elemento especial para la creación de <code>listas no ordenadas</code>, o listas con estilo viñeta.",
"Las listas no ordenadas comienzan con un elemento <code><ul></code>. A continuación contienen una cantidad de elementos <code><li>.</code>",
"HTML has another special element for creating <code>ordered lists</code>, or numbered lists.",
"Ordered lists start with an opening <code><ol></code> element, followed by any number of <code><li></code> elements. Finally, ordered lists close with a <code></ol></code>",
"assert.equal($(\"ul li\").length, 3, 'message: You should have three <code>li</code> elements within your <code>ul</code> element.');",
"assert.equal($(\"ol li\").length, 3, 'message: You should have three <code>li</code> elements within your <code>ol</code> element.');",
"assert(code.match(/<\\/ul>/g) && code.match(/<\\/ul>/g).length === code.match(/<ul>/g).length, 'message: Make sure your <code>ul</code> element has a closing tag.');",
"assert(code.match(/<\\/ol>/g) && code.match(/<\\/ol>/g).length === code.match(/<ol>/g).length, 'message: Make sure your <code>ol</code> element has a closing tag.');",
"assert(code.match(/<\\/li>/g) && code.match(/<li>/g) && code.match(/<\\/li>/g).length === code.match(/<li>/g).length, 'message: Make sure your <code>li</code> element has a closing tag.');"
"Geordnete Listen starten mit einem <code><ol></code> Element. Dann enthalten sie eine gewisse Anzahl an <code><li></code> Elementen.",
"assert($(\"input[placeholder]\").length > 0, 'message: Add a <code>placeholder</code> attribute to the existing text <code>input</code> element.');",
"assert($(\"input\") && $(\"input\").attr(\"placeholder\") && $(\"input\").attr(\"placeholder\").match(/cat\\s+photo\\s+URL/gi), 'message: Set the value of your placeholder attribute to \"cat photo URL\".');",
"assert($(\"input[type=text]\").length > 0 && code.match(/<input((\\s+\\w+(\\s*=\\s*(?:\".*?\"|'.*?'|[\\^'\">\\s]+))?)+\\s*|\\s*)\\/?>/gi), 'message: The finished <code>input</code> element should have valid syntax.');"
],
"type":"waypoint",
"challengeType":0,
"translations":{
"de":{
"title":"Füge Platzhalter zu einem Textfeld hinzu",
"description":[
"Platzhaltertexte erscheinen in deinen <code>input</code> Feldern, bevor der Nutzer etwas eingibt.",
"Du kannst Platzhalter auf folgende Weise erstellen:",
"<code><input type=\"text\" placeholder=\"Das ist ein Platzhalter.\"></code>",
"You can build web forms that actually submit data to a server using nothing more than pure HTML. You can do this by specifying an action on your <code>form</code> element.",
"assert($(\"form\") && $(\"form\").children(\"input\") && $(\"form\").children(\"input\").length > 0, 'message: Nest your text input element within a <code>form</code> element.');",
"assert($(\"form\").attr(\"action\") === \"/submit-cat-photo\", 'message: Make sure your <code>form</code> has an <code>action</code> attribute which is set to <code>/submit-cat-photo</code>');",
"assert(code.match(/<\\/form>/g) && code.match(/<form [^<]*>/g) && code.match(/<\\/form>/g).length === code.match(/<form [^<]*>/g).length, 'message: Make sure your <code>form</code> element has well-formed open and close tags.');"
],
"type":"waypoint",
"challengeType":0,
"translations":{
"de":{
"title":"Erstelle ein Formular",
"description":[
"Du kannst Web Formulare bauen, die Daten zu einem Server übertragen – und das nur mit HTML. Das wird möglich, indem du eine Aktion für dein <code>form</code> Element bestimmst.",
"Umschließe dein Textfeld mit einem <code>form</code> Element. Füge anschließend das Attribut <code>action=\"/submit-cat-photo\"</code> hinzu."
]
},
"es":{
"title":"Crea un elemento de formulario",
"description":[
"Puedes construir formularios web que realmente envíen datos a un servidor usando nada más que HTML puro. Puedes hacerlo especificando una acción en tu elemento <code>form</code>.",
"Anida tu campo de texto en un elemento <code>form</code>. Agrega el atributo <code>action=\"/submit-cat-photo\"</code> a este elemento de formulario."
"Você pode construir formulários web que realmente enviam dados para um servidor usando nada mais que HTML puro. Para isso, você precisa especificar uma URL no atributo <code>action</code> do seu elemento <code>form</code>.",
"Вы можете строить web-формы, которые отправляют данные серверу, не ипользуя ничего кроме HTML. Вы можете достичь этого указанием действия в атрибутах элемента <code>form</code>.",
"Вложите ваше текстовое поле в элемент <code>form</code>. Добавьте атрибут <code>action=\"/submit-cat-photo\"</code> к этому элементу формы."
]
}
}
},
{
"id":"bad87fee1348bd9aedd08830",
"title":"Add a Submit Button to a Form",
"description":[
"Let's add a <code>submit</code> button to your form. Clicking this button will send the data from your form to the URL you specified with your form's <code>action</code> attribute.",
"Here's an example submit button:",
"<code><button type=\"submit\">this button submits the form</button></code>",
"assert($(\"form\").children(\"button\").length > 0, 'message: Your form should have a button inside it.');",
"assert($(\"button\").attr(\"type\") === \"submit\", 'message: Your submit button should have the attribute <code>type</code> set to <code>submit</code>.');",
"assert($(\"button\").text().match(/^\\s*submit\\s*$/gi), 'message: Your submit button should only have the text \"Submit\".');",
"assert(code.match(/<\\/button>/g) && code.match(/<button/g) && code.match(/<\\/button>/g).length === code.match(/<button/g).length, 'message: Make sure your <code>button</code> element has a closing tag.');"
"Lass uns nun einen <code>submit</code> Button hinzufügen. Durch einen Klick auf diesen Button werden die Daten des Formulars an die URL gesendet, welche du in dem <code>action</code> Attribut deines Formulars angegeben hast.",
"Füge einen Button zum Senden mit dem Typ <code>submit</code> und \"Submit\" als Text zu deinem <code>form</code> Element hinzu."
]
},
"es":{
"title":"Agrega un botón Enviar a un formulario",
"description":[
"Añadamos un elemento <code>submit</code> a tu formulario. Al hacer clic en este botón enviará los datos del formulario a la URL especificada en el atributo <code>action</code> de tu formulario. ",
"He aquí un ejemplo de un botón de envío:",
"<code><button type=\" submit\">este botón envía el formulario</botón></code>",
"Vamos adicionar um botão de enviar (<code>submit</code>) ao seu formulário. Quando seu usuário clicar nesse botão, os dados do formulário serão enviados para a URL que você especificou no atributo <code>action</code> do seu formulário.",
"Aqui está um botão de exemplo:",
"<code><button type=\"submit\">esse botão envia o formulário</button></code>",
"Давайте добавим кнопку отправки <code>submit</code> к вашей форме. Нажатие на эту кнопку отправит данные из вашей формы по адресу, указанному в атрибуте <code>action</code> вашей формы.",
"Вот пример кнопки отправки:",
"<code><button type=\"submit\">эта кнопка отправляет данные формы</button></code>",
"For example, if you wanted to make a text input field required, you can just add the attribute <code>required</code> within your <code>input</code> element, like this: <code><input type=\"text\" required></code>",
"assert($(\"input\").prop(\"required\"), 'message: Your text <code>input</code> element should have the <code>required</code> attribute.');"
],
"type":"waypoint",
"challengeType":0,
"translations":{
"de":{
"title":"Nutze HTML5 um ein Pflichtfeld zu erstellen",
"description":[
"Du kannst bestimmte Felder eines Formulars zu Pflichtfeldern erklären. Damit ist es deinen Usern nicht mehr möglich, das Formular abzuschicken, ohne die Pflichtfelder auszufüllen.",
"Um zum Beispiel ein Textfeld zum Pflichtfeld zu erklären, kannst du einfach ein <code>required</code> innerhalb deines <code>input</code> Elements hinzufügen: <code><input type=\"text\" required></code>",
"Mache aus deinem <code>input</code> Feld ein Pflichtfeld – \"required\" – damit deine Nutzer das Formular nicht abschicken können, ohne dieses Feld auszufüllen.",
"Probier dann dein Formular ohne einen Text abzuschicken. Siehst du wie dein HTML5 Formular dich darauf hinweißt dass das Feld verpflichtend ist?",
"Beachte: dieses Feld funktioniert nicht in Safari."
]
},
"es":{
"title":"Utiliza HTML5 para especificar campos obligatorios",
"description":[
"Puedes especificar un campo obligatorio en un formulario para que tu usuario no pueda enviar el formulario hasta que lo haya llenado.",
"Por ejemplo, si quieres requerir obligatoriamente un campo de texto, puedes agregar la palabra <code>required</code> dentro de tu elemento <code>input</code>, usarías: <code><input type=\"text\" required></code> ",
"Você pode tornar obrigatórios campos específicos do seu formulário, assim seu usuário não conseguirá enviar os dados sem preencher esses campos.",
"Por exemplo, se você quiser que um campo de texto seja obrigatório, basta adicionar a palavra <code>required</code> ao seu elemento <code>input</code>, assim: <code><input type=\"text\" required></code>",
"Вы можете требовать заполнения определённых полей формы, таким образом пользователь не сможет отправить данные формы до их заполнения.",
"Например, если бы вы хотели сделать заполнение текстового поля обязательным, вы могли бы добавить слово <code>required</code> внутрь вашего элемента <code>input</code>: <code><input type=\"text\" required></code>",
"Сделайте ваше текстовое поле <code>input</code> обязательным <code>required</code> для заполнения, чтобы пользователь не мог отправить данные формы без заполнения этого поля.",
"Далее попробуйте отправить данные формы без ввода какого-либо текста. Видите как ваша HTML5-форма уведомляет вас о том, что поле обязательное для заполнения?",
"You can use <code>radio buttons</code> for questions where you want the user to only give you one answer out of multiple options.",
"Radio buttons are a type of <code>input</code>.",
"Each of your radio buttons should be nested within its own <code>label</code> element. Wrapping an <code>input</code> element inside of a <code>label</code> element makes the label text clickable.",
"It is considered best practice to set a <code>for</code> attribute on the <code>label</code> element, with a value that matches the value of the <code>id</code> attribute of the <code>input</code> element. This allows assistive technologies to create a linked relationship between the label and the child <code>input</code> element. For example:",
"Add a pair of radio buttons to your form. One should have the option of <code>indoor</code> and the other should have the option of <code>outdoor</code>. Both should share the <code>name</code> attribute of <code>indoor-outdoor</code>."
"assert($('input[type=\"radio\"]').length > 1, 'message: Your page should have two radio button elements.');",
"assert($('label > input[type=\"radio\"]').filter(\"[name='indoor-outdoor']\").length > 1, 'message: Give your radio buttons the <code>name</code> attribute of <code>indoor-outdoor</code>.');",
"assert($('label > input[type=\"radio\"]:only-child').length > 1, 'message: Each of your two radio button elements should be nested in its own <code>label</code> element.');",
"assert((code.match(/<\\/label>/g) && code.match(/<label/g) && code.match(/<\\/label>/g).length === code.match(/<label/g).length), 'message: Make sure each of your <code>label</code> elements has a closing tag.');",
"assert($(\"label\").text().match(/indoor/gi), 'message: One of your radio buttons should have the label <code>indoor</code>.');",
"assert($(\"label\").text().match(/outdoor/gi), 'message: One of your radio buttons should have the label <code>outdoor</code>.');",
"assert($(\"label\").parent().get(0).tagName.match('FORM'), 'message: Each of your radio button elements should be added within the <code>form</code> tag.');"
"Füge ein Paar Radiobuttons zu deinem Formular hinzu. Einer sollte die Option <code>indoor</code> und der andere die Option <code>outdoor</code> haben."
]
},
"es":{
"title":"Crea un Conjunto de botones de radio",
"description":[
"Puedes usar <code>botones de radio</code> para las preguntas en las que deseas que el usuario sólo pueda dar una respuesta.",
"Los botones de radio son un tipo del elemento <code>input</code>",
"Cada uno de los botones de radio debe estar anidado dentro de su propio elemento <code>label</code>.",
"Todos los botones de radio relacionados deben tener el mismo atributo <code>name</code>.",
"Agrega un par de botones de radio a tu formulario. Uno debe tener la opción de <code>indoor</code> y el otro debe tener la opción <code>outdoor</code>. "
"Você pode usar <code>botões de opção</code> (botões de rádio) para perguntas em que você quer dar opções ao usuário, mas quer que ele escolha apenas uma.",
"Botões de opção são um tipo de <code>input</code>.",
"Cada um dos botões de opção deve ser aninhado ao seu elemento <code>label</code>.",
"Todos os botões de opção relacionados devem ter o mesmo atributo <code>name</code>.",
"Adicione um par de botões de opção ao seu formulário. Um deles deve ser a opção <code>indoor</code> e o outro deve ser a opção <code>outdoor</code>. Ambos devem ter o atributo <code>name</code> de <code>indoor-outdoor</code>."
"Add to your form a set of three checkboxes. Each checkbox should be nested within its own <code>label</code> element. All three should share the <code>name</code> attribute of <code>personality</code>."
"assert($('input[type=\"checkbox\"]').length > 2, 'message: Your page should have three checkbox elements.');",
"assert($('label > input[type=\"checkbox\"]:only-child').length > 2, 'message: Each of your three checkbox elements should be nested in its own <code>label</code> element.');",
"assert(code.match(/<\\/label>/g) && code.match(/<label/g) && code.match(/<\\/label>/g).length === code.match(/<label/g).length, 'message: Make sure each of your <code>label</code> elements has a closing tag.');",
"assert($('label > input[type=\"checkbox\"]').filter(\"[name='personality']\").length > 2, 'message: Give your checkboxes the <code>name</code> attribute of <code>personality</code>.');"
],
"type":"waypoint",
"challengeType":0,
"translations":{
"de":{
"title":"Erstelle ein paar Checkboxen",
"description":[
"Formulare nutzen Kontrollkästchen, <code>checkboxes</code> meistens für Fragen, die mehrerer Antworten bedürfen.",
"Checkboxen sind eine Art von <code>input</code> Elementen",
"Jedes deiner Checkboxen sollte innerhalb eines eigenen <code>label</code> Elements liegen.",
"Alle zusammengehörende Checkboxes sollten das gleiche <code>name</code> Attribut haben.",
"Füge deinem Formular drei Checkboxen hinzu. Jedes dieser Elemente sollte innerhalb seines eigenen <code>label</code> Elements liegen. Alle sollten das gleiche <code>name</code> Attribut <code>personality</code> teilen."
]
},
"es":{
"title":"Crea un conjunto de casillas de verificación",
"description":[
"Los formularios suelen usar <code>casillas de verificación</code> para preguntas que pueden tener más de una respuesta.",
"Las casillas de verificación son un tipo del elemento <code>input</code>",
"Cada una de tus casillas de verificación debe ser anidada dentro de su propio elemento <code>label</code>.",
"Todas las entradas de casillas de verificación relacionadas deben tener el mismo atributo <code>name</code>.",
"He aquí un ejemplo de una casilla de verificación:",
"Añade a tu formulario un conjunto de tres casillas de verificación. Cada casilla de verificación debe estar anidada dentro de su propio elemento <code>label</code>. Las tres deben tener <code>personality</code> como su atributo <code>name</code>."
"Adicione ao seu formulário um conjunto de três caixas de seleção. Cada caixa deve estar aninhada a seu próprio elemento <code>label</code>. Todas elas devem ter o mesmo atributo <code>name</code> de <code>personality</code>."
"Добавьте набор из трёх флаговых кнопок к вашей форме. Каждый флаг должен быть вложен внутрь собственного элемента <code>label</code>. Все три флага должны иметь одинаковый атрибут <code>name</code>, значение которго равно <code>personality</code>."
]
}
}
},
{
"id":"bad87fee1348bd9aedd08835",
"title":"Check Radio Buttons and Checkboxes by Default",
"description":[
"You can set a checkbox or radio button to be checked by default using the <code>checked</code> attribute.",
"To do this, just add the word \"checked\" to the inside of an input element. For example:",
"Just like any other non-self-closing element, you can open a <code>div</code> element with <code><div></code> and close it on another line with <code></div></code>.",
"Nest your \"Things cats love\" and \"Things cats hate\" lists all within a single <code>div</code> element.",
"Hint: Try putting your opening <code>div</code> tag above your \"Things cats love\" <code>p</code> element and your closing <code>div</code> tag after your closing <code>ol</code> tag so that both of your lists are within one <code>div</code>."
"assert($(\"div\").children(\"p\").length > 1, 'message: Nest your <code>p</code> elements inside your <code>div</code> element.');",
"assert($(\"div\").children(\"ul\").length > 0, 'message: Nest your <code>ul</code> element inside your <code>div</code> element.');",
"assert($(\"div\").children(\"ol\").length > 0, 'message: Nest your <code>ol</code> element inside your <code>div</code> element.');",
"assert(code.match(/<\\/div>/g) && code.match(/<\\/div>/g).length === code.match(/<div>/g).length, 'message: Make sure your <code>div</code> element has a closing tag.');"
"Wie jedes andere Element – das sich nicht selbst schließt – kannst du ein <code>div</code> Element mit <code><div></code> öffnen und mit <code></div></code> wieder schließen.",
"Versuche dein öffnendes <code>div</code> Element überhalb des <code>p</code> Elements von \"Things cats love\" und das schließende <code>div</code> unterhalb des schließenden <code>ol</code> Elements zu platzieren. Damit befinden sich beide Listen innerhalb eines <code>div</code>",
"Al igual que cualquier otro elemento sin cierre automático, puedes abrir una etiqueta <code>div</code> con <code><div></code> y cerrarla en otra línea con <code></div></code> .",
"Trata de poner tu etiqueta de apertura <code>div</code> por encima de elemento <code>p</code> \"Things cat love\", y tu etiqueta de cierre de <code>div</code> después de tu etiqueta de cierre de <code>ol</code>, para que cada una de tus listas estén dentro de un <code>div</code>. ",
"Anida tus listas \"Things cats love\" y \"Things cats hate\" dentro de un solo elemento <code>div</code>."
"O elemento <code>div</code>, também conhecido como elemento de divisão, é um contâiner de propósito geral para outros elementos.",
"O elemento <code>div</code> provavelmente é o elemento HTML mais usado de todos.",
"Da mesma forma que qualquer outro elemento que não tem auto-fechamento, você pode abrir um elemento <code>div</code> com <code><div></code> e fechá-lo em outra linha com <code></div></code>.",
"Tente colocar sua tag <code>div</code> de abertura acima do seu elemento <code>p</code> \"Things cats love\" e sua tag <code>div</code> de fechamento depois da sua tag <code>ol</code> de fechamento, de forma que ambas as suas listas estejam dentro da mesma <code>div</code>.",
"Aninhe as listas \"Things cats love\" e \"Things cats hate\" dentro do mesmo elemento <code>div</code>."
"Как и с любым другим несамозакрывающимся элементом, вы можете открыть элемент <code>div</code> меткой <code><div></code> и закрыть на следующей строке меткой <code></div></code>.",
"Попробуйте разместить открывающую метку <code>div</code> над вашим элементом <code>p</code> с текстом \"Things cats love\", а закрывающую метку <code>div</code> после закрытия элемента <code>ol</code>, таким образом оба ваших списка оказываются внутри одного элемента <code>div</code>.",
"Вложите ваши списки \"Things cats love\" и \"Things cats hate\" внутрь одного элемента <code>div</code>."
]
}
}
},
{
"id":"587d78aa367417b2b2512aed",
"title":"Declare the Doctype of an HTML Document",
"description":[
"The challenges so far have covered specific HTML tags and their uses. However, there are a few elements that give overall structure to your page, and should be included in every HTML document.",
"At the top of your document, you need to tell the browser which version of HTML your page is using. HTML is an evolving language, and is updated regularly. Most major browsers support the latest specification, which is HTML5. However, older web pages may use previous versions of the language.",
"You tell the browser this information by adding the <code><!DOCTYPE ...></code> tag on the first line, where the \"<code>...</code>\" part is the version of HTML. For HTML5, you use <code><!DOCTYPE html></code>.",
"The <code>!</code> and uppercase <code>DOCTYPE</code> is important, especially for older browsers. The <code>html</code> is not case sensitive.",
"Next, the rest of your HTML code needs to be wrapped in <code>html</code> tags. The opening <code><html></code> goes directly below the <code><!DOCTYPE html></code> line, and the closing <code></html></code> goes at the end of the page.",
"Add a <code>DOCTYPE</code> tag for HTML5 to the top of the blank HTML document in the code editor. Under it, add opening and closing <code>html</code> tags, which wrap around an <code>h1</code> element. The heading can include any text."
"assert(code.match(/<!DOCTYPE\\s+?html\\s*?>/gi), 'message: Your code should include a <code><!DOCTYPE html></code> tag.');",
"assert($('html').length == 1, 'message: There should be one <code>html</code> element.');",
"assert(code.match(/<html>\\s*?<h1>\\s*?.*?\\s*?<\\/h1>\\s*?<\\/html>/gi), 'message: The <code>html</code> tags should wrap around one <code>h1</code> element.');"
"Os desafios até agora trataram de tags HTML específicas e seus usos. No entanto, há alguns elementos que determinam a estrutura geral da sua página e devem ser incluídos em todos os documentos HTML.",
"No começo do seu documento, você precisa dizer ao navegador qual versão do HTML sua página está usando. O HTML é uma linguagem em evolução e é atualizado regularmente. A maioria dos navegadores mais populares suporta a última especificação, que é o HTML5. No entanto, páginas mais antigas podem estar usando versões anteriores da linguagem.",
"Você pode dar ao navegador essa informação adicionando a tag <code><!DOCTYPE ...></code> na primeira linha, onde a parte \"<code>...</code>\" é a versão do HTML. Para o HTML5, o código é <code><!DOCTYPE html></code>.",
"O <code>!</code> e o <code>DOCTYPE</code> todo em maiúsculas são importantes, especialmente para navegadores mais velhos. O <code>html</code> não é sensível a maiúsculas e minúsculas.",
"Em seguida, o resto do seu código HTML deve estar delimitado por tags <code>html</code>. A tag <code><html></code> vai diretamente abaixo da linha <code><!DOCTYPE html></code>, e a tag <code></html></code> vai no final da página.",
"Aqui está um exemplo da estrutura de uma página:",
"<blockquote><!DOCTYPE html><br><html><br> <!-- Seu código HTML vai aqui --><br></html></blockquote>",
"<hr>",
"Adicione uma tag <code>DOCTYPE</code> para HTML5 no topo do documento HTML em branco no editor de texto. Abaixo dela, adicione tags <code>html</code> de abertura e fechamento, ao redor de um elemento <code>h1</code>. O texto do <code>h1</code> pode ser qualquer um."
"You can add another level of organization in your HTML document within the <code>html</code> tags with the <code>head</code> and <code>body</code> elements. Any markup with information about your page would go into the <code>head</code> tag. Then any markup with the content of the page (what displays for a user) would go into the <code>body</code> tag.",
"Metadata elements, such as <code>link</code>, <code>meta</code>, <code>title</code>, and <code>style</code>, typically go inside the <code>head</code> element.",
"Edit the markup so there's a <code>head</code> and a <code>body</code>. The <code>head</code> element should only include the <code>title</code>, and the <code>body</code> element should only include the <code>h1</code> and <code>p</code>."
" <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>",
"assert(code.match(/<head>\\s*?<title>\\s*?.*?\\s*?<\\/title>\\s*?<\\/head>/gi), 'message: The <code>head</code> element should wrap around the <code>title</code> element.');",
"assert($('body').children('h1').length == 1 && $('body').children('p').length == 1, 'message: The <code>body</code> element should wrap around both the <code>h1</code> and <code>p</code> elements.');"
"title":"Defina cabeça e corpo de um documento HTML",
"description":[
"Você pode adicionar mais um nível de organização ao seu documento HTML dentro da tag <code>html</code> com os elementos <code>head</code> (cabeça) e <code>body</code> (corpo). Qualquer código com informações sobre a sua página deve estar dentro da tag <code>head</code>. Assim, qualquer código com o conteúdo da sua página (o que aparece para o usuário) deve estar dentro da tag <code>body</code>.",
"Elementos de metadados, como <code>link</code>, <code>meta</code>, <code>title</code> e <code>style</code>, tipicamente aparecem dentro do elemento <code>head</code>.",
"Aqui está um exemplo da estrutura de uma página:",
"<blockquote><!DOCTYPE html><br><html><br> <head><br> <!-- elementos de metadados --><br> </head><br> <body><br> <!-- conteúdo da página --><br> </body><br></html></blockquote>",
"<hr>",
"Edite o código para que tenha uma <code>head</code> e um <code>body</code>. O elemento <code>head</code> deve incluir apenas o <code>title</code>, e o elemento <code>body</code> deve conter apenas o <code>h1</code> e o <code>p</code>."
