{ "name": "Basic HTML and HTML5", "order": 0, "time": "5 hours", "helpRoom": "Help", "challenges": [ { "id": "587d774b367417c4c2512a9b", "title": "Introduction to the Basic HTML and HTML5 Challenges", "description": [ [ "", "", "HTML, or HyperText Markup Language, is a markup language to describe the structure of a web page. It uses a special syntax of elements to organize and give information about your content to the browser. Elements usually have opening and closing tags that surround and give meaning to content. For example, there are different tag options to place around text to show whether it's a heading, a paragraph, or a list.", "" ], [ "", "", "The HyperText part of HTML comes from the early days of the web. Pages usually contained static documents that connected to other documents with hypertext links. As web pages and web applications grow more complex, the W3 Consortium updates HTML. The latest version, or specification, is HTML5.

This section introduces how to use HTML elements to give structure and meaning to your web content.", "" ] ], "releasedOn": "", "challengeSeed": [], "tests": [], "type": "Waypoint", "challengeType": 7, "isRequired": false, "translations": {} }, { "id": "bd7123c8c441eddfaeb5bdef", "title": "Say Hello to HTML Elements", "description": [ "Welcome to freeCodeCamp's coding challenges. These will walk you through web development step-by-step.", "We recommend you do these in order, but feel free to skip around by clicking the map in the menu above.", "Also, if you want to save your progress, you should join our community by creating an account. In just a few minutes, you can join our chat room, forum, and even a local study group in your city.", "First, you'll start by building a simple web page using HTML. You can edit code in your text editor, which is embedded into this web page.", "Do you see the code in your text editor that says <h1>Hello</h1>? That's an HTML element.", "Most HTML elements have an opening tag and a closing tag.", "Opening tags look like this:", "<h1>", "Closing tags look like this:", "</h1>", "Note that the only difference between opening tags and closing tags is that closing tags have a slash after their opening angle bracket.", "Each challenge has tests that you can run at any time by clicking the \"Run tests\" button. Once you get all tests passing (they change from red to green), you can go to the next coding challenge.", "
", "To pass the test on this challenge, change your h1 element's text to say \"Hello World\" instead of \"Hello\". Then click the \"Run tests\" button." ], "challengeSeed": [ "

Hello

" ], "tests": [ { "text": "Your h1 element should have the text \"Hello World\".", "testString": "assert.isTrue((/hello(\\s)+world/gi).test($('h1').text()), 'Your h1 element should have the text \"Hello World\".');" } ], "type": "waypoint", "challengeType": 0, "translations": { "de": { "description": [ "Willkommen bei der ersten Programmier-Challenge von freeCodeCamp!", "Mithilfe des eingebauten text editor kannst du den code bearbeiten.", "Siehst du den Code <h1>Hallo</h1> im Editor? Das ist ein HTML element", "Die meisten HTML Elemente haben einen opening tag und einen closing tag.", "Öffnende Tags sehen so aus:", "<h1>", "Schließende Tags so:", "</h1>", "Beachte, dass der einzige Unterschied zwischen öffnenden und schließenden Tags ist, das schließende 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 h1 Elements von \"Hello\" zu \"Hello World\". Klicke dann den \"Run tests\" Button." ] }, "fr": { "title": "Dites bonjour aux éléments HTML", "description": [ "Bienvenue au premier défi de code de freeCodeCamp.", "Vous pouvez modifier le code dans votre éditeur texte, lequel est disponible dans cette page.", "Voyez-vous le code dans l'éditeur texte qui dit <h1>Hello</h1>? C'est un élément HTML.", "La plupart des éléments HTML ont une balise ouvrante et une balise fermante", "Les balises ouvrantes ont cette apparence :", "<h1>", "Les balises fermantes ont cette apparence :", "</h1>", "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 h1 pour \"Hello World\" plutôt que \"Hello\". Cliquez ensuite sur le bouton \"Run tests\"." ] }, "pt-br": { "title": "Diga Olá aos Elementos HTML", "description": [ "Seja bem vindo ao primeiro desafio de programação do freeCodeCamp!", "Você pode editar o seu código em seu editor de texto, que embutimos aqui nesta página da web.", "Consegue ver o código que diz <h1>Hello</h1> no seu editor de texto? Esse é um elemento HTML.", "A maioria dos elementos HTML tem uma tag de abertura e uma tag de fechamento.", "As tags de abertura são assim: <h1>. E as tags de fechamento são assim: </h1>.", "Note que a única diferença entre as tags de abertura e fechamento é que as de fechamento possuem uma barra (/) depois do sinal de abertura (<).", "Cada desafio possui testes que você pode executar a qualquer momento ao clicar no botão \"Executar testes\". Quando você conseguir passar em todos os testes, poderá avançar para o próximo desafio.", "
", "Para passar nos testes deste desafio, mude o texto do elemento h1 para que diga \"Hello World\" no lugar de \"Hello\". Depois, clique no botão \"Executar testes\"." ] }, "ru": { "title": "Скажи привет HTML-элементам", "description": [ "Добро пожаловать на первое программное испытание freeCodeCamp.", "Вы можете редактировать код в вашем текстовом редакторе, который мы встроили в эту web-страницу.", "Видите этот код в вашем текстовом редакторе: <h1>Hello</h1>? Это HTML элемент.", "Большинство HTML-элементов имеют открывающую метку закрывающую метку.", "Открывающие метки выглядят так:", "<h1>", "Закрывающие метки выглядят следующим образом:", "</h1>", "Обратите внимание, что единственная разница между открывающими и закрывающими метками заключается в наличии косой черты после открывающей треугольной скобки.", "Каждое испытание имеет функцию проверки решения, которую вы можете запустить в любой момент нажатием на кнопку \"Run tests\". Как только ваше решение будет удовлетворять всем требованиям, вы сможете перейти к следующему испытанию.", "
", "Для прохождения этого испытания измените текст элемента h1 с \"Hello\" на \"Hello World\". Затем нажмите кнопку \"Run tests\"." ] } } }, { "id": "bad87fee1348bd9aedf0887a", "title": "Headline with the h2 Element", "description": [ "Over the next two sections, we'll build an HTML5 app that will look something like this:", "\"A", "The h2 element you enter will create an h2 element on the website.", "This element tells the browser about the structure of your website. h1 elements are often used for main headings, while h2 elements are generally used for subheadings. There are also h3, h4, h5 and h6 elements to indicate different and new sections.", "
", "Add an h2 tag that says \"CatPhotoApp\" to create a second HTML element below your \"Hello World\" h1 element." ], "challengeSeed": [ "

Hello World

" ], "tests": [ "assert(($(\"h2\").length > 0), 'message: Create an h2 element.');", "assert(code.match(/<\\/h2>/g) && code.match(/<\\/h2>/g).length === code.match(/

/g).length, 'message: Make sure your h2 element has a closing tag.');", "assert.isTrue((/cat(\\s)?photo(\\s)?app/gi).test($(\"h2\").text()), 'message: Your h2 element should have the text \"CatPhotoApp\".');", "assert.isTrue((/hello(\\s)+world/gi).test($(\"h1\").text()), 'message: Your h1 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:", "\"Ein", "Das eingetragene h2 Element wird ein h2 Element auf der Website erzeugen.", "Dieses Element sagt dem Browser, wie die Struktur deiner Website aufgebaut ist. h1 Elemente werden oft für Hauptüberschriften verwendet, während h2 Elemente üblicherweise für Zwischenüberschriften verwendet werden. Es gibt auch h3, h4, h5 und h6 Elemente die verschiedene und neue Bereiche kennzeichnen.", "
", "Füge unter h1 \"Hello World\" ein zweites HTML Element h2 hinzu, in dem \"CatPhotoApp\" steht." ] }, "fr": { "title": "Un titre avec l'élément h2", "description": [ "Pour les quelques prochains défis, nous construirons une application HTML5 qui ressemblera à ceci :", "\"Une", "L'élément h2 que vous entrerez créera un élément h2 sur le site.", "Cet élément renseigne votre navigateur sur la structure de votre site. Les éléments h1 sont souvent utilisés comme titre, tandis que les éléments h2 sont généralement utilisés comme sous-titres. Il existe également les éléments h3, h4, h5 et h6 qui indiquent une nouvelle et différente section.", "
", "Ajoutez une balise h2 contenant \"CatPhotoApp\" pour créer un second élément HTML sous l'élément h1 contenant \"Hello World\"." ] }, "pt-br": { "title": "Cabeçalho com o Elemento h2", "description": [ "Durante os próximos desafios, construiremos um aplicativo em HTML que se parecerá como este:", "\"Imagem", "O elemento h2 que você criar gerará um elemento h2 na página da web.", "Este elemento indica ao navegador a forma de mostrar o texto que contém.", "Os elementos h2 são ligeiramente menores que os elementos h1. Há também os elementos h3, h4, h5 e h6.", "
", "Adicione uma tag h2 que diga \"CatPhotoApp\" para criar um segundo elemento HTML abaixo de seu elemento h1 chamado \"Hello World\"." ] }, "ru": { "title": "Заголовок с применением элемента h2", "description": [ "В результате прохождения нескольких следующих испытаний, мы построим HTML5 приложение, которое будет похоже на это:", "\"A", "Вводимый вами элемент h2 создаст соответствующий элемент h2 на web-странице.", "Этот элемент сообщает браузеру о структуре вашего web-сайта. Элементы h1 часто применяют в качестве главных заголовков, в то время как элементы h2 обычно используют для обозначения позаголовков. Также существуют элементы h3, h4, h5 и h6 для обозначения отдельных секций.", "
", "Добавьте метку h2 с текстом \"CatPhotoApp\" для создания второго HTML элемента под вашим элементом h1 с текстом \"Hello World\"." ] } } }, { "id": "bad87fee1348bd9aedf08801", "title": "Inform with the Paragraph Element", "description": [ "p elements are the preferred element for normal-sized paragraph text on websites. P is short for \"paragraph\".", "You can create a p element like this:", "<p>I'm a p tag!</p>", "
", "Create a p element below your h2 element, and give it the text \"Hello Paragraph\"." ], "challengeSeed": [ "

Hello World

", "

CatPhotoApp

" ], "tests": [ "assert(($(\"p\").length > 0), 'message: Create a p element.');", "assert.isTrue((/hello(\\s)+paragraph/gi).test($(\"p\").text()), 'message: Your p element should have the text \"Hello Paragraph\".');", "assert(code.match(/<\\/p>/g) && code.match(/<\\/p>/g).length === code.match(/

p element has a closing tag.');" ], "type": "waypoint", "challengeType": 0, "translations": { "de": { "description": [ "p Elemente sind das bevorzugte Element für normale Paragraphentexte auf einer Website. P ist die Abkürzung für \"Paragraph\".", "Du kannst ein p Element so erzeugen:", "<p>Ich bin ein p Element!</p>", "

", "Erstelle ein p Element unter deinem h2 Element und füge den Text \"Hello Paragraph\" ein." ] }, "fr": { "title": "Informez avec l'élément paragraphe", "description": [ "L'élément p est le préféré pour les textes de paragraphes de taille normale. P est l'acronyme de \"paragraphe\",", "Vous pouvez créer un élément p comme ceci :", "<p>Je suis une balise p!</p>", "
", "Créez un élément p sous votre élément h2 et inscrivez-y le texte \"Hello Paragraph\"." ] }, "pt-br": { "title": "Informe com o Elemento Parágrafo", "description": [ "Os elementos p são os preferenciais para criar parágrafos de texto com tamanho normal nas páginas da web. P significa a abreviatura de \"parágrafo\".", "Você pode criar um elemento p assim:", "<p>Sou uma tag p!</p>", "
", "Crie um elemento p abaixo de seu elemento h2, e dê a ele o texto \"Hello Paragraph\"." ] }, "ru": { "title": "Проинформируйте с применением элемента p", "description": [ "Элементы p предпочтительно использовать для обозначения параграфов с текстом нормального размера в web-сайтах. P - сокращение от \"paragraph\".", "Вы можете создать элемент p следующим образом:", "<p>Я метка p!</p>", "
", "Создайте элемент p под вашим элементом h2 и присвойте ему текст \"Hello Paragraph\"." ] } } }, { "id": "bad87fee1348bd9aedf08833", "title": "Fill in the Blank with Placeholder Text", "description": [ "Web developers traditionally use lorem ipsum text 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 kitty ipsum text.", "
", "Replace the text inside your p element with the first few words of this kitty ipsum text: Kitty ipsum dolor sit amet, shed everywhere shed everywhere stretching attack your ankles chase the red dot, hairball run catnip eat the grass sniff." ], "challengeSeed": [ "

Hello World

", "", "

CatPhotoApp

", "", "

Hello Paragraph

" ], "tests": [ "assert.isTrue((/Kitty(\\s)+ipsum/gi).test($(\"p\").text()), 'message: Your p element should contain the first few words of the provided kitty ipsum text.');" ], "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.", "\"Lorem Ipsum\" Text wurde seit dem 16. Jahrhundert von Schriftsetzern als Platzhalter verwendet. Und diese Tradition setzt sich im Web fort.", "Nun gut, fünf Jahrhunderte sind lange genug. Da wir eine CatPhotoApp entwickeln, lass uns stattdessen lieber kitty ipsum text nutzen.", "
", "Ersetze den Text in deinem p Element mit den ersten Wörtern des \"Kitty Ipsum\" Textes: Kitty ipsum dolor sit amet, shed everywhere shed everywhere stretching attack your ankles chase the red dot, hairball run catnip eat the grass sniff." ] }, "fr": { "title": "Remplissez les blancs avec du faux-texte", "description": [ "Les développeurs Web utilisent traditionnellement du lorem ipsum 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ème 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 Kitty ipsum.", "
", "Remplacez le texte à l'intérieur des éléments p avec ces quelques mots du texte Kitty ipsum : Kitty ipsum dolor sit amet, shed everywhere shed everywhere stretching attack your ankles chase the red dot, hairball run catnip eat the grass sniff." ] }, "pt-br": { "title": "Preencha Espaços com Texto de Espaço Reservado", "description": [ "Desenvolvedores web tradicionalmente usam Lorem Ipsum como texto de preenchimento. Lorem Ipsum é chamado assim pois essas são as duas primeiras palavras de uma passagem famosa de Cícero da Roma Antiga.", "O texto Lorem Ipsum tem sido utilizado como texto de espaço reservado por compositores desde o século 16, e esta tradição continua na web.", "Bem, 5 séculos é um tempo longo o bastante. Já que estamos desenvolvendo um aplicativo sobre fotos de gatos (CatPhotoApp), vamos usar algo chamado Kitty Ipsum.", "
", "Substitua o texto dentro do seu elemento p pelas primeiras palavras deste texto Kitty Ipsum: Kitty ipsum dolor sit amet, shed everywhere shed everywhere stretching attack your ankles chase the red dot, hairball run catnip eat the grass sniff." ] }, "ru": { "title": "Заполните пустоты замещающим текстом", "description": [ "Традиционно web-разработчики используют текст lorem ipsum в качестве замещающего текста. Он называется тектсом lorem ipsum по первым двум словам известного пассажа Цицерона из Древнего Рима.", "Текст lorem ipsum применяется в качестве замещающего текста наборщиками с 16-го века, и эта традиция продолжается в сети.", "5 веков довольно долгий период. Так как мы строим приложение CatPhotoApp, давайте используем нечто называемое текстом kitty ipsum.", "
", "Замените текст внутри вашего элемента p первыми двумя словами текста kitty ipsum: Kitty ipsum dolor sit amet, shed everywhere shed everywhere stretching attack your ankles chase the red dot, hairball run catnip eat the grass sniff." ] } } }, { "id": "bad87fee1348bd9aedf08802", "title": "Uncomment HTML", "description": [ "Commenting is a way that you can leave comments within your code without affecting the code itself.", "Commenting is also a convenient way to make code inactive without having to delete it entirely.", "You can start a comment with <!-- and end a comment with -->", "
", "Uncomment your h1, h2 and p elements." ], "challengeSeed": [ "" ], "tests": [ "assert($(\"h1\").length > 0, 'message: Make your h1 element visible on your page by uncommenting it.');", "assert($(\"h2\").length > 0, 'message: Make your h2 element visible on your page by uncommenting it.');", "assert($(\"p\").length > 0, 'message: Make your p element visible on your page by uncommenting it.');", "assert(!/[^fc]-->/gi.test(code.replace(/ *" ], "tests": [ "assert(($(\"h1\").length === 0), 'message: Comment out your h1 element so that it is not visible on your page.');", "assert(($(\"h2\").length > 0), 'message: Leave your h2 element uncommented so that it is visible on your page.');", "assert(($(\"p\").length === 0), 'message: Comment out your p 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 -->.');", "assert((code.match(/<([a-z0-9]){1,2}>/g)[0]===\"

\" && code.match(/<([a-z0-9]){1,2}>/g)[1]===\"

\" && code.match(/<([a-z0-9]){1,2}>/g)[2]===\"

\") , 'message: Do not change the order of the h1 h2 or p in the code.');" ], "type": "waypoint", "challengeType": 0, "translations": { "de": { "description": [ "Denk daran, dass du einen Kommentar mit <!-- anfangen und mit --> wieder beenden werden.", "Hier wirst du deinen Kommentar vor dem h2 Element beenden müssen.", "

", "Kommentiere die h1 und p Elemente aus, aber lasse dein h2 Element unkommentiert." ] }, "fr": { "title": "Commentez du HTML", "description": [ "Souvenez-vous que pour débuter un commentaire, vous devez utiliser <!-- et que pour le terminer, vous devez utiliser -->.", "Ici vous devrez terminer le commentaire juste avant que l'élément h2 commence.", "
", "Commentez les éléments h1 et p, mais laissez l'élément h2 tel quel." ] }, "pt-br": { "title": "Comente o HTML", "description": [ "Lembre-se que para iniciar um comentário você precisa utilizar <!--, e para terminar um comentário é necessário usar -->.", "Aqui, você deverá terminar o comentário antes que seu elemento h2 inicie.", "
", "Comente o elemento h1 e o elemento p, e deixe o elemento h2 sem nenhum comentário." ] }, "ru": { "title": "Закомментируйте HTML", "description": [ "Помните, что для начала комментария вам необходимо использовать <!--, а для завершения комментария - -->", "Тут вам необходимо завершить комментарий до начала вашего элемента h2.", "
", "Закомментируйте ваши элементы h1 и p, но оставьте ваш элемент h2 раскомментированным." ] } } }, { "id": "bad87fed1348bd9aedf08833", "title": "Delete HTML Elements", "description": [ "Our phone doesn't have much vertical space.", "Let's remove the unnecessary elements so we can start building our CatPhotoApp.", "
", "Delete your h1 element so we can simplify our view." ], "challengeSeed": [ "

Hello World

", "", "

CatPhotoApp

", "", "

Kitty ipsum dolor sit amet, shed everywhere shed everywhere stretching attack your ankles chase the red dot, hairball run catnip eat the grass sniff.

" ], "tests": [ "assert(($(\"h1\").length == 0), 'message: Delete your h1 element.');", "assert(($(\"h2\").length > 0), 'message: Leave your h2 element on the page.');", "assert(($(\"p\").length > 0), 'message: Leave your p 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.", "
", "Lösche die Elemente h1, damit wir etwas Ordnung schaffen." ] }, "fr": { "title": "Supprimer des éléments HTML", "description": [ "Notre téléphone n'a pas beaucoup d'espace vertical.", "Enlevons les éléments superflus pour débuter la construction de notre application de photos de chats.", "
", "Supprimez l'élément h1 afin de simplifier l'affichage." ] }, "pt-br": { "title": "Apague Elementos HTML", "description": [ "Nosso celular não possui muito espaço vertical.", "Vamos eliminar os elementos desnecessários para começar a construir nosso CatPhotoApp.", "
", "Apague o elemento h1 para simplificar o nosso espaço." ] }, "ru": { "title": "Удалите HTML-элементы", "description": [ "Наш телефон не очень большой по-вертикали.", "Давайте удалим некоторые ненужные элементы, чтобы мы могли приступить к созданию приложения CatPhotoApp.", "
", "Удалите ваш h1 элемент, чтобы упростить общий вид." ] } } }, { "id": "bad87fee1348bd9aecf08801", "title": "Introduction to HTML5 Elements", "description": [ "HTML5 introduces more descriptive HTML tags. These include header, footer, nav, video, article, section and others.", "These tags make your HTML easier to read, and also help with Search Engine Optimization (SEO) and accessibility.", "The main HTML5 tag helps search engines and other developers find the main content of your page.", "Note
Many of the new HTML5 tags and their benefits are covered in the Applied Accessibility section.", "
", "Create a second p element after the existing p element with the following kitty ipsum text: Purr jump eat the grass rip the couch scratched sunbathe, shed everywhere rip the couch sleep in the sink fluffy fur catnip scratched.", "Wrap the paragraphs with an opening and closing main tag." ], "challengeSeed": [ "

CatPhotoApp

", "", "

Kitty ipsum dolor sit amet, shed everywhere shed everywhere stretching attack your ankles chase the red dot, hairball run catnip eat the grass sniff.

" ], "tests": [ "assert($(\"p\").length > 1, 'message: You need 2 p elements with Kitty Ipsum text.');", "assert(code.match(/<\\/p>/g) && code.match(/<\\/p>/g).length === code.match(/

p elements has a closing tag.');", "assert.isTrue((/Purr\\s+jump\\s+eat/gi).test($(\"p\").text()), 'message: Your p element should contain the first few words of the provided additional kitty ipsum text.');", "assert($('main').length === 1, 'message: Your code should have one main element.');", "assert($(\"main\").children(\"p\").length === 2, 'message: The main element should have two paragraph elements as children.');", "assert(code.match(/

\\s*?

/g), 'message: The opening main tag should come before the first paragraph tag.');", "assert(code.match(/<\\/p>\\s*?<\\/main>/g), 'message: The closing main tag should come after the second closing paragraph tag.');" ], "type": "waypoint", "challengeType": 0, "translations": {} }, { "id": "bad87fee1348bd9aedf08812", "title": "Add Images to Your Website", "description": [ "You can add images to your website by using the img element, and point to a specific image's URL using the src attribute.", "An example of this would be:", "<img src=\"https://www.your-image-source.com/your-image.jpg\">", "Note that in most cases, img elements are self-closing.", "All img elements must have an alt attribute. The text inside an alt attribute is used for screen readers to improve accessibility and is displayed if the image fails to load.", "Let's add an alt attribute to our img example above:", "<img src=\"https://www.your-image-source.com/your-image.jpg\" alt=\"Author standing on a beach with two thumbs up.\">", "

", "Let's try to add an image to our website:", "Insert an img tag, before the h2 element.", "Now set the src attribute so that it points to this url:", "https://bit.ly/fcc-relaxing-cat", "Finally don't forget to give your image an alt text." ], "challengeSeed": [ "

CatPhotoApp

", "
", " ", " ", "

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.

", "
" ], "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 src attribute that points to the kitten image.');", "assert(code.match(/alt\\s*?=\\s*?(\\\"|\\').*(\\\"|\\')/), 'message: Your image element must have an alt attribute.');" ], "type": "waypoint", "challengeType": 0, "translations": { "de": { "description": [ "Du kannst img Elemente verwenden, um Bilder in deine Website einzubauen. Um zur URL des Bildes zu verweisen, benutzt du das src Attribut.", "Ein Beispiel dafür wäre:", "<img src=\"https://www.deine-bild-quelle.com/dein-bild.jpg\">", "Beachte dass in den meisten Fällen img Elemente selbstschließend sind.", "
", "Versuche es mit diesem Bild:", "https://bit.ly/fcc-relaxing-cat" ] }, "fr": { "title": "Ajouter des images à votre site Web", "description": [ "Vous pouvez ajouter des images à votre site Web en utilisant l'élément img et pointer vers une URL d'image spécifique en utilisant l'attribut src.", "Un exemple de cette procédure serait :", "<img src=\"https://www.your-image-source.com/your-image.jpg\">", "Note that in most cases, img elements are self-closing.", "Prenez note que dans la plupart des cas, les éléments img sont auto-fermants.", "
", "Essayez avec cette image :", "https://bit.ly/fcc-relaxing-cat" ] }, "pt-br": { "title": "Adicione Imagens em sua Página Web", "description": [ "Você pode adicionar imagens à sua página da internet com o uso do elemento img, e apontar para a URL específica de uma imagem utilizando o atributo src.", "Um exemplo para isso seria:", "<img src=\"https://www.your-image-source.com/your-image.jpg\">", "Observe que na maior parte dos casos, os elementos img são de fechamento automático.", "
", "Agora, tente fazer isso com essa imagem:", "https://bit.ly/fcc-relaxing-cat" ] }, "ru": { "title": "Добавьте изображения к вашему сайту", "description": [ "Вы можете добавлять изображения к вашему сайту с помощью элемента img и указывать ссылки определённых изображений с помощтю атрибута src.", "Примером добавления мзображения может служить:", "<img src=\"https://www.your-image-source.com/your-image.jpg\">", "Обратите внимание, что в большинстве случаев элементы img являются самозакрывающимися.", "
", "Попробуйте добавить изображение используя следующую ссылку:", "https://bit.ly/fcc-relaxing-cat" ] } } }, { "id": "bad87fee1348bd9aedf08816", "title": "Link to External Pages with Anchor Elements", "description": [ "a elements, also known as anchor elements, are used to link to content outside of the current page.", "Here's a diagram of an a element. In this case, the a element is used in the middle of a paragraph element, which means the link will appear in the middle of a sentence.", "\"a", "Here's an example:", "<p>Here's a <a href=\"http://freeCodeCamp.com\"> link to freeCodeCamp.com</a> for you to follow.</p>", "
", "Create an a element that links to http://freecatphotoapp.com and has \"cat photos\" as its anchor text." ], "challengeSeed": [ "

CatPhotoApp

", "
", " ", " ", " ", " \"A", " ", "

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.

", "
" ], "tests": [ "assert((/cat photos/gi).test($(\"a\").text()), 'message: Your a element should have the anchor text of \"cat photos\".');", "assert(/http:\\/\\/(www\\.)?freecatphotoapp\\.com/gi.test($(\"a\").attr(\"href\")), 'message: You need an a element that links to http://freecatphotoapp.com');", "assert(code.match(/<\\/a>/g) && code.match(/<\\/a>/g).length === code.match(/a element has a closing tag.');" ], "type": "waypoint", "challengeType": 0, "translations": { "de": { "title": "Verlinke externe Seiten mit Anker Elementen", "description": [ "a Elemente, auch bekannt als anchor (Anker) Elemente, werden verwendet um auf Inhalte außerhalb der aktuellen Seite zu verlinken.", "So sieht ein a Element aus. In diesem Fall wird es innerhalb eines Paragraphen Elements verwendet. Das bedeutet dein Link wird innerhalb des Satzes erscheinen.", "\"Eine", "Hier ist ein Beispiel:", "<p>Hier ist ein <a href=\"http://freeCodeCamp.com\"> Link zu freeCodeCamp</a> dem du folgen kannst.</p>", "
", "Erstelle ein a Element, das auf http://freecatphotoapp.com verlinkt und den \"cat photos\" als anchor text (Link-Text) beinhaltet." ] }, "es": { "title": "Enlaza páginas externas con elementos ancla", "description": [ "Los elementos a, también conocidos como elementos ancla, se utilizan para enlazar a contenido fuera de la página actual.", "Aquí está un diagrama de un elemento a. En este caso, el elemento a se utiliza en el medio de un elemento de párrafo, lo que significa que el enlace aparecerá en el medio de una frase. ", " \"un ", "He aquí un ejemplo:", "<p>Aquí está un <a href=\"https://freeCodeCamp.com\"> enlace a freeCodeCamp</a> para que lo sigas.</p>", "
", "Crea un elemento a que se vincule a http://freecatphotoapp.com y tenga como texto de ancla \"fotos de gatos\"." ] }, "pt-br": { "title": "Ligue Páginas Externas com o Elemento Âncora", "description": [ "Os elementos a, também conhecidos como elementos âncora, são utilizados para ligar conteúdo fora da página atual.", "Aqui está um diagrama de um elemento a. Neste caso, o elemento a é utilizado no meio de um elemento de parágrafo, o que significa que o link externo aparecerá no meio de uma frase.", " \"diagrama", "Veja um exemplo:", "<p>Aqui está um <a href=\"https://freeCodeCamp.com\"> link ligado ao freeCodeCamp</a> para que você o siga.</p>", "
", "Crie um elemento a que esteja ligado ao site http://freecatphotoapp.com e tenha como texto de âncora \"fotos de gatos\"." ] }, "ru": { "title": "Присоедините внешние страницы с помощью якорных элементов", "description": [ "Элементы a, также известные как якорные элементы, применяют для связи с содержимым вне текущей страницы.", "Вот диаграмма элемента a. В этом случае, элемент a использован в середине элемента параграфа, что значит, что ссылка появится в середине предложения.", "\"a", "Вот пример:", "<p>Вот <a href=\"http://freeCodeCamp.com\"> ссылка на freeCodeCamp</a> для перехода на ресурс.</p>", "
", "Создайте элемент a, который присоединяет http://freecatphotoapp.com и имеет значение \"cat photos\" в качестве текста якоря." ] } } }, { "id": "bad88fee1348bd9aedf08816", "title": "Link to Internal Sections of a Page with Anchor Elements", "description": [ "In addition to creating external links, anchor elements can also be used to create internal links, which are links that jump to different sections within a webpage.", "The format is similar to an external link except instead of a URL, you'll use the # and a word to describe the section you want to jump to.", "Here's an example:", "<a href=\"#contact\">Go to contact section</a>", "Next, you'll want to create a corresponding anchor link in the HTML where you want the internal link to take users. Instead of using the href attribute, you'll use the name attribute. Here's an example:", "
<h1>Contact</h1>
<a name=\"contact\"></a>
", "Now when users click the \"Go to contact section\" link, they'll be taken to the section of the webpage with the anchor that has the name attribute \"contact\".", "
", "Change your external link to an internal link by changing the href attribute to \"#bottom\" and the anchor text from \"cat photos\" to \"Jump to Bottom\".", "Then add an anchor link with a name attribute set to \"bottom\" after the last paragraph.", "Note
Additional kitty ipsum text has been added to the paragraphs to better show the effect of clicking the internal anchor link to jump to the bottom of the page. Also, this change will only apply to this challenge. The next challenge goes back to showing your external link." ], "challengeSeed": [ "

CatPhotoApp

", "
", " ", " cat photos", " ", " \"A", " ", "

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.

", "

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.

", " ", "
" ], "tests": [ "assert($('a').length == 2, 'message: There should be only two anchor tags on your page.');", "assert($('a').eq(0).attr('href') == \"#bottom\", 'message: The first a tag should have an href attribute set to #bottom.');", "assert($('a').eq(1).attr('name') == \"bottom\", 'message: The second a tag should have a name attribute set to bottom.');" ], "type": "waypoint", "challengeType": 0, "translations": {} }, { "id": "bad87fee1348bd9aede08817", "title": "Nest an Anchor Element within a Paragraph", "description": [ "Again, here's a diagram of an a element for your reference:", "\"a", "Here's an example:", "<p>Here's a <a href=\"https://freeCodeCamp.com\"> link to freeCodeCamp</a> for you to follow.</p>", "Nesting just means putting one element inside of another element.", "
", "Now nest your existing a element within a new p element (just after the existing main element) so that the surrounding paragraph says \"View more cat photos\", but where only \"cat photos\" is a link, and the rest of the text is plain text." ], "challengeSeed": [ "

CatPhotoApp

", "
", " ", " cat photos", " ", " \"A", " ", "

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.

", "
" ], "tests": [ "assert(($(\"a[href=\\\"http://freecatphotoapp.com\\\"]\").length > 0 || $(\"a[href=\\\"http://www.freecatphotoapp.com\\\"]\").length > 0), 'message: You need an a element that links to \"http://freecatphotoapp.com\".');", "assert($(\"a\").text().match(/cat\\sphotos/gi), 'message: Your a element should have the anchor text of \"cat photos\"');", "assert($(\"p\") && $(\"p\").length > 2, 'message: Create a new p element around your a element.');", "assert(($(\"a[href=\\\"http://freecatphotoapp.com\\\"]\").parent().is(\"p\") || $(\"a[href=\\\"http://www.freecatphotoapp.com\\\"]\").parent().is(\"p\")), 'message: Your a element should be nested within your new p 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 p element should have the text \"View more \" (with a space after it).');", "assert(!$(\"a\").text().match(/View\\smore/gi), 'message: Your a element should not have the text \"View more\".');", "assert(code.match(/<\\/p>/g) && code.match(/

/g).length === code.match(/

p elements has a closing tag.');", "assert(code.match(/<\\/a>/g) && code.match(//g).length === code.match(/a elements has a closing tag.');" ], "type": "waypoint", "challengeType": 0, "translations": { "de": { "title": "Umschließe ein Anker Element mit einem Paragraphen", "description": [ "Hier ist nochmal ein Beispiel für ein a Element:", "\"Eine", "Hier ist ein Beispiel:", "<p>Hier ist ein <a href=\"https://freeCodeCamp.com\"> Link zu freeCodeCamp</a> dem du folgen kannst.</p>", "Nesting bedeuted ein Element innerhalb eines anderen Elements zu schreiben", "

", "Jetzt umschließe dein a Element mit einem neuen p Element (direkt nach dem bereits existierenden main Element) indem steht \"View more cat photos\", wo allerdings nur \"cat photos\" ein Link ist und der Rest normaler Text." ] }, "es": { "title": "Anida un elemento de ancla dentro de un párrafo", "description": [ "Una vez más, aquí está un diagrama de un elemento a para tu referencia:", "\"un", "He aquí un ejemplo:", "<p>Aquí hay un <a href=\"https://freeCodeCamp.com\"> enlace a freeCodeCamp</a> para que lo sigas.</p>", "Anidamiento simplemente significa poner un elemento dentro de otro elemento.", "
", "Ahora anida el elemento a existente dentro de un nuevo elemento p (justo después del elemento main 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 ." ] }, "pt-br": { "title": "Aninhe o Elemento Âncora no Interior de um Parágrafo", "description": [ "Outra vez, aqui está um diagrama de um elemento a para você usar como referência.", "\"diagrama", "Veja um exemplo:", "<p>Este é um <a href=\"https://freeCodeCamp.com\"> link ligado ao freeCodeCamp</a> para que você o siga.</p>", "Aninhamento significa ter um elemento no interior de outro elemento.", "
", "Agora, aninhe o elemento a existente dentro de um novo elemento p de forma que o parágrafo diga \"View more cat photos\", mas onde apenas \"cat photos\" seja um link, e o resto seja texto comum." ] }, "ru": { "title": "Создайте вложенный якорный элемент внутри параграфа", "description": [ "Вот диаграмма элемента a:", "\"a", "Вот пример:", "<p>Вот <a href=\"https://freeCodeCamp.com\"> ссылка на freeCodeCamp</a> для перехода на ресурс.</p>", "Вложенность значит установку одного элемента внутрь друго элемента.", "
", "Теперь вложите ваш существующий элемент a внутрь нового элемента p (сразу после существующего элемента main) таким образом, что добавляемый параграф сообщает: \"View more cat photos\", но где только \"cat photos\" является ссылкой, а остальной текст обычный." ] } } }, { "id": "bad87fee1348bd9aedf08817", "title": "Make Dead Links Using the Hash Symbol", "description": [ "Sometimes you want to add a elements to your website before you know where they will link.", "This is also handy when you're changing the behavior of a link using jQuery, which we'll learn about later.", "
", "The current value of the href attribute is a link that points to \"http://freecatphotoapp.com\". Replace the href attribute value with a #, also known as a hash symbol, to create a dead link." ], "challengeSeed": [ "

CatPhotoApp

", "
", "

Click here to view more cat photos.

", " ", " \"A", " ", "

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.

", "
" ], "tests": [ "assert($(\"a\").attr(\"href\") === \"#\", 'message: Your a element should be a dead link with the value of the href attribute set to \"#\".');" ], "type": "waypoint", "challengeType": 0, "translations": { "de": { "title": "Erstelle tote Links mit dem Hash Symbol", "description": [ "Manchmal wirst du a 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 jQuery verändern willst. Das werden wir später noch behandeln.", "
", "Ersetze den Inhalt des href Attributs deines a Elements mit einem #, 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 a 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 jQuery, lo cual aprenderemos más adelante.", "
", "Reemplaza el atributo href de tu elemento a con un #, también conocido como un símbolo de número o de hash, para convertirlo en un vínculo muerto." ] }, "pt-br": { "title": "Crie Links Inativos com o Símbolo Cerquilha", "description": [ "As vezes você pode querer adicionar elementos a em sua página web antes de saber o link que as ligará.", "Isso também é útil quando você desejar mudar o comportamento de um link utilizando jQuery, o que vamos aprender mais adiante.", "
", "Substitua o atributo href de seu elemento a por um #, também conhecido como símbolo de hash ou hashtag. Isso o transformará em um link inativo." ] }, "ru": { "title": "Создайте мёртвые ссылки используя хэш-символ", "description": [ "Иногда вам нужно добавить элементы a к вашему сайту до того, как вы знаете куда будут вести ссылки.", "Также это может оказаться полезно, когда вы меняете поведение ссылки используя jQuery, что мы изучим позже.", "
", "Замените значение атрибута href вашего элемента a на #, известное как хэш-символ, для превращения элемента в мёртвую ссылку." ] } } }, { "id": "bad87fee1348bd9aedf08820", "title": "Turn an Image into a Link", "description": [ "You can make elements into links by nesting them within an a element.", "Nest your image within an a element. Here's an example:", "<a href=\"#\"><img src=\"https://bit.ly/fcc-running-cats\" alt=\"Three kittens running towards the camera.\"></a>", "Remember to use # as your a element's href 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." ], "challengeSeed": [ "

CatPhotoApp

", "
", "

Click here to view more cat photos.

", " ", " \"A", " ", "

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.

", "
" ], "tests": [ "assert($(\"a\").children(\"img\").length > 0, 'message: Nest the existing img element within an a element.');", "assert(new RegExp(\"#\").test($(\"a\").children(\"img\").parent().attr(\"href\")), 'message: Your a element should be a dead link with a href attribute set to #.');", "assert(code.match(/<\\/a>/g) && code.match(//g).length === code.match(/a 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 a Element umschließt.", "
", "Umschließe dein Bild mit einem a Element. Hier ist ein Beispiel:", "<a href=\"#\"><img src=\"https://bit.ly/fcc-running-cats\"></a>", "Vergewissere dich, dass du ein # innerhalb des href Attributs des a 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 a.", "
", "Anida tu imagen dentro de un elemento a. He aquí un ejemplo: ", "<a href=\"#\"><img src=\"https://bit.ly/fcc-running-cats\"/></a>", "Recuerda usar # como atributo href de tu elemento a 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 ." ] }, "pt-br": { "title": "Transforme uma Imagem em um Link", "description": [ "Você pode transformar elementos em links ao aninhá-los com um elemento a.", "
", "Aninhe sua imagem dentro de um elemento a. Temos aqui um exemplo.", "<a href=\"#\"><img src=\"https://bit.ly/fcc-running-cats\"/></a>", "Lembre de usar # como atributo href de seu elemento a para tornar o link inativo." ] }, "ru": { "title": "Превратите изображение в ссылку", "description": [ "Вы можете превратить элементы в ссылки путём их вложения внутрь элементов a.", "
", "Вложите ваше изображение в элемент a. Вот пример:", "<a href=\"#\"><img src=\"https://bit.ly/fcc-running-cats\"></a>", "Не забывайте использовать # в качестве значения атрибута href вашего элемента a для превращения ссылки в мёртвую.", "Как только вы это сделаете, наведите курсор мыши на ваше изображение. При этом курсор должен изменить вид с обычного на используемый при наведении на ссылки. Ваше фото теперь является ссылкой." ] } } }, { "id": "bad87fee1348bd9aedf08827", "title": "Create a Bulleted Unordered List", "description": [ "HTML has a special element for creating unordered lists, or bullet point-style lists.", "Unordered lists start with a <ul> element. Then they contain some number of <li> elements.", "For example: ", "
<ul>
  <li>milk</li>
  <li>cheese</li>
</ul>
", "would create a bullet point-style list of \"milk\" and \"cheese\".", "
", "Remove the last two p elements and create an unordered list of three things that cats love at the bottom of the page." ], "challengeSeed": [ "

CatPhotoApp

", "
", "

Click here to view more cat photos.

", " ", " \"A", " ", "

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.

", "
" ], "tests": [ "assert($(\"ul\").length > 0, 'message: Create a ul element.');", "assert($(\"ul li\").length > 2, 'message: You should have three li elements within your ul element.');", "assert(code.match(/<\\/ul>/gi) && code.match(/