{ "name": "Basic HTML and HTML5", "order": 0, "time": "5 hours", "helpRoom": "Help", "challenges": [ { "id": "bd7123c8c441eddfaeb5bdef", "title": "Say Hello to HTML Elements", "description": [ "Welcome to Free Code Camp's first coding challenge.", "You can edit code in your text editor, which we've 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, you can advance to the next 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 Free Code Camp!", "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 Free Code Camp.", "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 Free Code Camp!", "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": [ "Добро пожаловать на первое программное испытание Free Code Camp.", "Вы можете редактировать код в вашем текстовом редакторе, который мы встроили в эту 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 few challenges, 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": "bad87fee1348bd9aecf08801", "title": "Introduction to HTML5 Elements", "description": [ "HTML5 introduces more descriptive HTML tags. These include

,