diff --git a/curriculum/challenges/arabic/02-javascript-algorithms-and-data-structures/basic-javascript/passing-values-to-functions-with-arguments.md b/curriculum/challenges/arabic/02-javascript-algorithms-and-data-structures/basic-javascript/passing-values-to-functions-with-arguments.md index 53cba6e66a0..b8ff73b450e 100644 --- a/curriculum/challenges/arabic/02-javascript-algorithms-and-data-structures/basic-javascript/passing-values-to-functions-with-arguments.md +++ b/curriculum/challenges/arabic/02-javascript-algorithms-and-data-structures/basic-javascript/passing-values-to-functions-with-arguments.md @@ -9,7 +9,7 @@ dashedName: passing-values-to-functions-with-arguments # --description-- -إن الوسائط (parameters) متغيرات تعمل كعناصر ناقلة للقيم الذي يجب أن تكون مدخلة للوظيفة (function) عند تفعيلها. عندما يتم تعريف الوظيفة، فإنها تُعرَّف عادة مع واحد أو أكثر من وسيط. القيم الفعلية التي تدخل (أو "تمرر") إلى وظيفة عند استدعائها هي معروفة باسم الحجج (arguments). +إن الوسائط (parameters) متغيرات تعمل كعناصر ناقلة للقيم الذي تعطى لوظيفة (function) عند تفعيلها. عندما يتم تعريف وظيفة، فإنها تُعرَّف عادة مع واحد أو أكثر من الوسائط. القيم الفعلية التي تدخل (أو "تمرر") إلى وظيفة عند استدعائها هي معروفة باسم المعطيات (arguments). إليك وظيفة ذات وسيطين، `param1` و `param2`: @@ -19,11 +19,11 @@ function testFun(param1, param2) { } ``` -ثم يمكننا استدعاء `testFun` مثل: `testFun("Hello", "World");`. لقد تمريرنا حجج من نوع مقطع, `Hello` و `World`. داخل الحجة، `param1` سيتساوى مع المقطع `Hello` و `param2` سيتساوى مع المقطع `World`. لاحظ أنه يمكنك تنفيذ `testFun` مرة أخرى مع معطيات (arguments) مختلفة ووسائط (parameters) لتأخذ قيمة المعطيات الجديدة. +ثم يمكننا تفعيل `testFun` مثل: `testFun("Hello", "World");`. لقد مرَّرنا معطيين من نوع مقطع نصي، `Hello` و `World`. داخل الوظيفة، `param1` سيتساوى مع المقطع `Hello` و `param2` سيتساوى مع المقطع `World`. لاحظ أنه يمكنك تنفيذ `testFun` مرة أخرى مع معطيات (arguments) مختلفة ووسائط (parameters) لتأخذ قيمة المعطيات الجديدة. # --instructions-- -
  1. أنشاء وظيفة تسمى functionWithArgs تقبل حجج وتخرج المجموع الخاص بهم إلى وحدة التحكم.
  2. استدعي الوظيفة برقمين كحجتين.
+
  1. أنشئ وظيفة تسمى functionWithArgs تقبل معطييّن وتخرج المجموع الخاص بهم إلى الكونسول.
  2. استدعي الوظيفة برقمين كحجتين.
# --hints-- @@ -55,7 +55,7 @@ if (typeof functionWithArgs === 'function') { assert(logOutput == 16); ``` -يجب عليك استدعاء `functionWithArgs` برقمين بعد تعريفه. +يجب عليك استدعاء `functionWithArgs` برقمين بعد تعريفها. ```js assert( diff --git a/curriculum/challenges/arabic/02-javascript-algorithms-and-data-structures/basic-javascript/return-a-value-from-a-function-with-return.md b/curriculum/challenges/arabic/02-javascript-algorithms-and-data-structures/basic-javascript/return-a-value-from-a-function-with-return.md index 51e9012e576..21dae1b5bec 100644 --- a/curriculum/challenges/arabic/02-javascript-algorithms-and-data-structures/basic-javascript/return-a-value-from-a-function-with-return.md +++ b/curriculum/challenges/arabic/02-javascript-algorithms-and-data-structures/basic-javascript/return-a-value-from-a-function-with-return.md @@ -23,11 +23,11 @@ const answer = plusThree(5); يحتوي `answer` على قيمة `8`. -تأخذ `plusThree` قيمة معطى من `num` وتنتج قيمة تساوي `num + 3`. +تأخذ `plusThree` قيمة من المعطى `num` وتنتج قيمة تساوي `num + 3`. # --instructions-- -أنشئ الوظيفة `timesFive` التي تقبل معطى واحد، وتضربه في `5`، وتنتج قيمة جديدة. +أنشئ الوظيفة `timesFive` التي تقبل معطى واحد، وتضربه في `5`، وتنتج (returns) قيمة جديدة. # --hints-- diff --git a/curriculum/challenges/german/14-responsive-web-design-22/build-a-personal-portfolio-webpage-project/build-a-personal-portfolio-webpage.md b/curriculum/challenges/german/14-responsive-web-design-22/build-a-personal-portfolio-webpage-project/build-a-personal-portfolio-webpage.md index b2b9370f806..84bf7e10112 100644 --- a/curriculum/challenges/german/14-responsive-web-design-22/build-a-personal-portfolio-webpage-project/build-a-personal-portfolio-webpage.md +++ b/curriculum/challenges/german/14-responsive-web-design-22/build-a-personal-portfolio-webpage-project/build-a-personal-portfolio-webpage.md @@ -37,7 +37,7 @@ const el = document.getElementById('welcome-section') assert(!!el); ``` -Your `#welcome-section` element should contain an `h1` element. +Dein `#welcome-section`-Element sollte ein `h1`-Element enthalten. ```js assert.isAbove( diff --git a/curriculum/challenges/german/14-responsive-web-design-22/build-a-survey-form-project/build-a-survey-form.md b/curriculum/challenges/german/14-responsive-web-design-22/build-a-survey-form-project/build-a-survey-form.md index f8310582d45..741cad41df9 100644 --- a/curriculum/challenges/german/14-responsive-web-design-22/build-a-survey-form-project/build-a-survey-form.md +++ b/curriculum/challenges/german/14-responsive-web-design-22/build-a-survey-form-project/build-a-survey-form.md @@ -19,7 +19,7 @@ dashedName: build-a-survey-form 1. Innerhalb des Formular-Elements **musst** du deine E-Mail in ein `input`-Feld mit einer `id` von `email` eingeben 1. Wenn du eine falsch formatierte E-Mail angibst, wird dir ein HTML5-Validierungsfehler ausgegeben 1. Innerhalb des Formulars kannst du eine Zahl in das `input`-Feld, das die `id` von `number` hat, eingeben -1. The number input should not accept non-numbers, either by preventing you from typing them or by showing an HTML5 validation error (depending on your browser). +1. Das Nummernfeld sollte ausschließlich Nummern als Eingabewert akzeptieren – entweder, indem es dich davon abhält, andere Werte einzugeben, oder durch Ausgabe eines HTML5-Validierungsfehlers (abhängig vom Browser). 1. Wenn du eine Nummer eingibst, die außerhalb des Bereichs der Zahleneingabe liegt, wird dir ein HTML5-Validierungsfehler ausgegeben. Der genannte Bereich wird durch die `min`- und `max`-Attribute festgelegt 1. Für die Namen-, E-Mail- und Nummern-Eingabefelder findest du zugehörige `label`-Elemente im Formular, welches den Nutzen jedes Felds der folgenden IDs beschreibt: `id="name-label"`, `id="email-label"`, und `id="number-label"` 1. Für die Namen-, E-Mail- und Nummern-Eingabefelder findest du einen Platzhalter-Text, der eine Beschreibung oder Anweisung für jedes Feld enthält diff --git a/curriculum/challenges/german/14-responsive-web-design-22/build-a-technical-documentation-page-project/build-a-technical-documentation-page.md b/curriculum/challenges/german/14-responsive-web-design-22/build-a-technical-documentation-page-project/build-a-technical-documentation-page.md index 87070436da9..01cff48050b 100644 --- a/curriculum/challenges/german/14-responsive-web-design-22/build-a-technical-documentation-page-project/build-a-technical-documentation-page.md +++ b/curriculum/challenges/german/14-responsive-web-design-22/build-a-technical-documentation-page-project/build-a-technical-documentation-page.md @@ -8,24 +8,24 @@ dashedName: build-a-technical-documentation-page # --description-- -**Objective:** Build an app that is functionally similar to https://technical-documentation-page.freecodecamp.rocks +**Aufgabe:** Erstelle eine Anwendung, die eine ähnliche Funktionalität wie https://technical-documentation-page.freecodecamp.rocks aufweist **User Stories:** 1. Du kannst ein `main`-Element mit einer entsprechenden `id="main-doc"` sehen, das den Hauptinhalt der Seite enthält (technische Dokumentation) -1. Within the `#main-doc` element, you can see several `section` elements, each with a class of `main-section`. Es sollten mindestens 5 sein +1. Innerhalb des `#main-doc`-Elements kannst du mehrere `section`-Elemente sehen, jedes mit einer `main-section`-Klasse. Es sollten mindestens 5 sein 1. Das erste Element innerhalb jeder `.main-section` sollte ein `header`-Element sein, das einen Text enthält, der das Thema dieses Abschnitts beschreibt. -1. Each `section` element with the class of `main-section` should also have an `id` that corresponds with the text of each `header` contained within it. Any spaces should be replaced with underscores (e.g. The section that contains the header "JavaScript and Java" should have a corresponding `id="JavaScript_and_Java"`) -1. The `.main-section` elements should contain at least ten `p` elements total (not each) -1. The `.main-section` elements should contain at least five `code` elements total (not each) -1. The `.main-section` elements should contain at least five `li` items total (not each) +1. Jedes `section`-Element der Klasse `main-section` sollte auch eine `id` haben, die mit dem Text von jedem `header` übereinstimmt. Alle Leerzeichen sollten durch Unterstriche ersetzt werden (z.B. sollte der Abschnitt, der die Überschrift „JavaScript und Java“ enthält, eine entsprechende `id="JavaScript_and_Java"` enthalten) +1. Die `.main-section`-Elemente sollten mindestens zehn `p`-Elemente enthalten (insgesamt) +1. Die `.main-section`-Elemente sollten mindestens fünf `code`-Elemente enthalten (insgesamt) +1. Die `.main-section`-Elemente sollten mindestens fünf `li`-Elemente enthalten (insgesamt) 1. You can see a `nav` element with a corresponding `id="navbar"` 1. Das navbar-Element sollte ein `header`-Element enthalten, das einen Text enthält, der das Thema der technischen Dokumentation beschreibt -1. Additionally, the navbar should contain link (`a`) elements with the class of `nav-link`. There should be one for every element with the class `main-section` -1. The `header` element in the `#navbar` must come before any link (`a`) elements in the navbar -1. Each element with the class of `nav-link` should contain text that corresponds to the `header` text within each `section` (e.g. if you have a "Hello world" section/header, your navbar should have an element which contains the text "Hello world") -1. When you click on a navbar element, the page should navigate to the corresponding section of the `#main-doc` element (e.g. If you click on a `.nav-link` element that contains the text "Hello world", the page navigates to a `section` element with that id, and contains the corresponding header) -1. On regular sized devices (laptops, desktops), the element with `id="navbar"` should be shown on the left side of the screen and should always be visible to the user +1. Additionally, the navbar should contain link (`a`) elements with the class of `nav-link`. Es sollte eines für jedes Element der Klasse `main-section` geben +1. Das `header`-Element in der `#navbar` muss vor jedem Link-Element (`a`) in der Navigationsleiste stehen +1. Jedes Element der Klasse `nav-link` sollte einen Text enthalten, der zu dem entsprechenden `header`-Text jeder `section` passt (wenn du z.B. einen Header bzw. eine Sektion mit „Hello world" hast, sollte deine Navigationsleiste ein Element mit eben jenem Text enthalten) +1. Wenn du auf ein Element der Navigationsleiste klickst, sollte die Seite zu der entsprechenden Sektion des `#main-doc`-Elements navigieren (klickst du z.B. auf ein `.nav-link`-Element, das den Text „Hello World" enthält, sollte die Seite zu einem `section`-Element mit dieser ID navigieren und nun den entsprechenden Header enthalten) +1. Auf Geräten mit regulärer Größe (Laptops, Desktop-PCs) sollte das Element mit der `id="navbar"` auf der linken Seite des Bildschirms angezeigt werden und für den Nutzer immer sichtbar sein 1. Deine technische Dokumentation sollte mindestens eine Media Query verwenden Erfülle die folgenden User Stories und bestehe alle Tests, um dieses Projekt abzuschließen. Gib dem Ganzen deinen persönlichen Stil. Viel Spaß beim Programmieren! @@ -95,7 +95,7 @@ els.forEach(el => { assert(els.length > 0) ``` -Each `.main-section` should have an `id` that matches the text of its first child, having any spaces in the child's text replaced with underscores (`_`) for the id's. +Jede `.main-section` sollte eine `id` haben, die dem Text seines ersten untergeordneten Elementes entspricht, wobei bei den IDs Leerzeichen mit Unterstrichen (`_`) ersetzt werden. ```js const els = document.querySelectorAll('.main-section') @@ -190,7 +190,7 @@ navLinks.forEach((navLink) => { assert(!!header) ``` -Each `.nav-link` should have text that corresponds to the `header` text of its related `section` (e.g. if you have a "Hello world" section/header, your `#navbar` should have a `.nav-link` which has the text "Hello world"). +Jedes `.nav-link`-Element sollte einen Text beinhalten, der dem `header`-Text der jeweiligen `section` entspricht (wenn du z.B. ein "Hello-World"-Sektion/Header hast, sollte dein `#navbar` ein `.nav-link` mit dem Text "Hello World" haben). ```js const headerText = Array.from(document.querySelectorAll('.main-section')).map(el => diff --git a/curriculum/challenges/german/14-responsive-web-design-22/learn-css-animation-by-building-a-ferris-wheel/6169b284950e171d8d0bb16a.md b/curriculum/challenges/german/14-responsive-web-design-22/learn-css-animation-by-building-a-ferris-wheel/6169b284950e171d8d0bb16a.md index d0722daaa4a..387663ae25b 100644 --- a/curriculum/challenges/german/14-responsive-web-design-22/learn-css-animation-by-building-a-ferris-wheel/6169b284950e171d8d0bb16a.md +++ b/curriculum/challenges/german/14-responsive-web-design-22/learn-css-animation-by-building-a-ferris-wheel/6169b284950e171d8d0bb16a.md @@ -9,24 +9,24 @@ dashedName: step-29 Finally, create a new `75%` selector between your `50%` and `100%` selectors. Give this new selector a `background-color` property set to `yellow`. -With that, your animation is much smoother and your Ferris wheel is complete. +Damit ist deine Animation viel flüssiger und dein Ferris-Wheel komplett. # --hints-- -You should create a new `75%` selector in your `@keyframes cabins` rule. +Du solltest einen neuen `75%`-Selektor in deiner `@keyframes cabins`-Regel erstellen. ```js const rules = new __helpers.CSSHelp(document).getCSSRules('keyframes')?.[1]?.cssRules; assert(rules?.[0]?.keyText === '75%' || rules?.[1]?.keyText === '75%' || rules?.[2]?.keyText === '75%' || rules?.[3]?.keyText === '75%' || rules?.[4]?.keyText === '75%'); ``` -Your `75%` selector should be between your `50%` and `100%` selectors. +Dein `75%`-Selektor sollte zwischen deinen `50%`- und `100%`-Selektoren stehen. ```js assert(new __helpers.CSSHelp(document).getCSSRules('keyframes')?.[1]?.cssRules?.[3]?.keyText === '75%'); ``` -Your `75%` selector should have a `background-color` property set to `yellow`. +Dein `75%`-Selektor sollte eine `background-color`-Eigenschaft von `yellow` haben. ```js assert(new __helpers.CSSHelp(document).getCSSRules('keyframes')?.[1]?.cssRules?.[3]?.style?.backgroundColor === 'yellow'); diff --git a/curriculum/challenges/german/14-responsive-web-design-22/learn-css-grid-by-building-a-magazine/6143bb50e8e48c6f5ef9d8d5.md b/curriculum/challenges/german/14-responsive-web-design-22/learn-css-grid-by-building-a-magazine/6143bb50e8e48c6f5ef9d8d5.md index e16c907b427..7b172cf812e 100644 --- a/curriculum/challenges/german/14-responsive-web-design-22/learn-css-grid-by-building-a-magazine/6143bb50e8e48c6f5ef9d8d5.md +++ b/curriculum/challenges/german/14-responsive-web-design-22/learn-css-grid-by-building-a-magazine/6143bb50e8e48c6f5ef9d8d5.md @@ -7,23 +7,23 @@ dashedName: step-21 # --description-- -Within your `aside` element, create two `img` elements, a `blockquote` element, and a third `img` element. Give the `blockquote` element a `class` set to `image-quote`. +Erstelle innerhalb deines `aside`-Elements zwei `img`-Elemente, ein `blockquote`-Element, und ein drittes `img`-Element. Gib dem `blockquote`-Element eine `class` mit dem Wert `image-quote`. # --hints-- -You should create three `img` elements within your `aside` element. +Du solltest drei `img`-Elemente innerhalb deines `aside`-Elements erstellen. ```js assert(document.querySelectorAll('aside img')?.length === 3); ``` -You should create a `blockquote` element within your `aside` element. +Du solltest ein `blockquote`-Element innerhalb deines `aside`-Elements erstellen. ```js assert.exists(document.querySelector('aside blockquote')); ``` -Your `blockquote` element should have a `class` set to `image-quote`. +Dein `blockquote`-Element sollte eine `class` mit dem Wert `image-quote` haben. ```js assert(document.querySelector('aside blockquote')?.classList?.contains('image-quote')); diff --git a/curriculum/challenges/german/14-responsive-web-design-22/learn-css-variables-by-building-a-city-skyline/5d822fd413a79914d39e993b.md b/curriculum/challenges/german/14-responsive-web-design-22/learn-css-variables-by-building-a-city-skyline/5d822fd413a79914d39e993b.md index 4cddf77a3d4..bb545b4808f 100644 --- a/curriculum/challenges/german/14-responsive-web-design-22/learn-css-variables-by-building-a-city-skyline/5d822fd413a79914d39e993b.md +++ b/curriculum/challenges/german/14-responsive-web-design-22/learn-css-variables-by-building-a-city-skyline/5d822fd413a79914d39e993b.md @@ -7,7 +7,7 @@ dashedName: step-115 # --description-- -Copy and paste your whole `sky` class along with all of its properties and values into the media query. You are going to make another color scheme for the skyline that changes it from day to night. +Kopiere und füge deine ganze `sky`-Klasse zusammen mit allen Eigenschaften und Werten in die Media Query ein. Du wirst ein anderes Farbschema für die Silhouette erstellen, welche sie von Tag zu Nacht ändert. Note: You are going to need to scroll past the editable region to copy the class. diff --git a/curriculum/challenges/german/14-responsive-web-design-22/learn-html-forms-by-building-a-registration-form/60f8604682407e0d017bbf7f.md b/curriculum/challenges/german/14-responsive-web-design-22/learn-html-forms-by-building-a-registration-form/60f8604682407e0d017bbf7f.md index cd611b49d4b..03e186600bd 100644 --- a/curriculum/challenges/german/14-responsive-web-design-22/learn-html-forms-by-building-a-registration-form/60f8604682407e0d017bbf7f.md +++ b/curriculum/challenges/german/14-responsive-web-design-22/learn-html-forms-by-building-a-registration-form/60f8604682407e0d017bbf7f.md @@ -1,6 +1,6 @@ --- id: 60f8604682407e0d017bbf7f -title: Step 26 +title: Schritt 26 challengeType: 0 dashedName: step-26 --- diff --git a/curriculum/challenges/german/14-responsive-web-design-22/learn-responsive-web-design-by-building-a-piano/612e8279827a28352ce83a72.md b/curriculum/challenges/german/14-responsive-web-design-22/learn-responsive-web-design-by-building-a-piano/612e8279827a28352ce83a72.md index f13f6677b49..be33dbe88da 100644 --- a/curriculum/challenges/german/14-responsive-web-design-22/learn-responsive-web-design-by-building-a-piano/612e8279827a28352ce83a72.md +++ b/curriculum/challenges/german/14-responsive-web-design-22/learn-responsive-web-design-by-building-a-piano/612e8279827a28352ce83a72.md @@ -7,32 +7,32 @@ dashedName: step-7 # --description-- -Now copy the set of seven `.key` elements, and paste two more sets into the `.keys` div. +Kopiere nun die Menge von sieben `.key`-Elementen und füge zwei weitere Mengen in das `.keys`-div ein. # --hints-- -You should have 21 `.key` elements. +Du solltest 21 `.key`-Elemente haben. ```js const keys = document.querySelectorAll('.key'); assert(keys?.length === 21); ``` -You should have 15 `.black--key` elements. +Du solltest 15 `.black--key`-Elemente haben. ```js const blackKeys = document.querySelectorAll('.black--key'); assert(blackKeys?.length === 15); ``` -All `.key` elements should be within your `.keys` element. +Alle `.key`-Elemente sollten sich innerhalb deines `.keys`-Elements befinden. ```js const keys = document.querySelector('.keys'); assert(keys?.querySelectorAll('.key')?.length === 21); ``` -All `.black--key` elements should be within your `.keys` element. +Alle `.black--key`-Elemente sollten sich innerhalb deines `.keys`-Elements befinden. ```js const keys = document.querySelector('.keys'); diff --git a/curriculum/challenges/german/14-responsive-web-design-22/learn-typography-by-building-a-nutrition-label/615f951dff9317a900ef683f.md b/curriculum/challenges/german/14-responsive-web-design-22/learn-typography-by-building-a-nutrition-label/615f951dff9317a900ef683f.md index 8ed54fdbb80..c69a5fdc62a 100644 --- a/curriculum/challenges/german/14-responsive-web-design-22/learn-typography-by-building-a-nutrition-label/615f951dff9317a900ef683f.md +++ b/curriculum/challenges/german/14-responsive-web-design-22/learn-typography-by-building-a-nutrition-label/615f951dff9317a900ef683f.md @@ -9,7 +9,7 @@ dashedName: step-67 Gib dem `.note`-Selektor eine linke und rechte Padding-Einheit von `8px` und entferne die obere und untere Padding-Einheit. Setze außerdem die `text-indent`-Eigenschaft auf `-8px`. -Mit diesen letzen Änderung ist deine Nährwertkennzeichnung fertig! +With these last changes, your nutrition label is complete! # --hints-- diff --git a/curriculum/challenges/portuguese/16-the-odin-project/top-learn-html-foundations/introduction-to-html-css-question-a.md b/curriculum/challenges/portuguese/16-the-odin-project/top-learn-html-foundations/introduction-to-html-css-question-a.md index aa20f137e89..c1210163db9 100644 --- a/curriculum/challenges/portuguese/16-the-odin-project/top-learn-html-foundations/introduction-to-html-css-question-a.md +++ b/curriculum/challenges/portuguese/16-the-odin-project/top-learn-html-foundations/introduction-to-html-css-question-a.md @@ -1,38 +1,38 @@ --- id: 6374f208de18c50e48ba767b videoId: LGQuIIv2RVA -title: Introduction To HTML and CSS Question A +title: Questão A de Introdução ao HTML e ao CSS challengeType: 15 dashedName: introduction-to-html-and-css-question-a --- # --description-- -HTML and CSS are two languages that work together to create everything that you see when you look at something on the internet. HTML is the raw data that a webpage is built out of. All the text, links, cards, lists, and buttons are created in HTML. CSS is what adds style to those plain elements. HTML puts information on a webpage, and CSS positions that information, gives it color, changes the font, and makes it look great! +O HTML e o CSS são duas linguagens que trabalham em conjunto para criar tudo o que você vê quando está na internet. O HTML são os dados brutos que constituem uma página da web. Todos os textos, links, cards, listas e botões são criados em HTML. O CSS é o que adiciona estilo a esses elementos simples. O HTML coloca informações em uma página da web e o CSS posiciona essas informações, dá cor a elas, muda as fontes, o que dá a elas uma aparência melhor! -Many helpful resources out there keep referring to HTML and CSS as programming languages, but if you want to get technical, labeling them as such is not quite accurate. This is because they are only concerned with presenting information. They are not used to program logic. JavaScript, which you will learn in the next section, is a programming language because it’s used to make webpages do things. Yet, there is quite a lot you can do with just HTML and CSS, and you will definitely need them both. Throughout our curriculum, the following lessons focus on giving you the tools you need to succeed once you reach JavaScript content. +Muitos recursos úteis seguem se referindo ao HTML e ao CSS como linguagens de programação. Se quisermos ser técnicos, no entanto, chamá-las assim não é algo preciso. Isso ocorre porque se tratam apenas de apresentar informações. Elas não são usadas para programar a lógica. O JavaScript, que você aprenderá na próxima seção, é uma linguagem de programação, pois é usada para fazer as páginas da web fazerem coisas. No entanto, há muito que você pode fazer apenas com o HTML e o CSS – e você, definitivamente, vai precisar dos dois. As lições a seguir visam dar a você as ferramentas necessárias para que possa seguir com sucesso ao alcançar o conteúdo do JavaScript. # --question-- ## --assignment-- -Read the HTML vs CSS vs JavaScript article. It is a quick overview of the relationships between HTML, CSS, and JavaScript. +Leia o artigo sobre HTML, CSS e JavaScript (texto em inglês). É uma visão geral rápida das relações entre HTML, CSS e JavaScript. ## --text-- -Which of the following statements is true? +Qual das seguintes afirmações é verdadeira? ## --answers-- -CSS is used to create the basic structure of a webpage, and HTML is used to add style. +O CSS é usado para criar a estrutura básica de uma página web e o HTML é usado para adicionar estilo. --- -HTML is used to create the basic structure of a webpage, and CSS is used to add style. +HTML é usado para criar a estrutura básica de uma página web e o CSS é usado para adicionar estilo. --- -HTML and CSS are used to add style to a webpage, and JavaScript is used to create the basic structure. +O HTML e o CSS são usados para adicionar estilo a uma página da web, enquanto o JavaScript é usado para criar a estrutura básica. ## --video-solution-- diff --git a/curriculum/challenges/portuguese/16-the-odin-project/top-learn-html-foundations/introduction-to-html-css-question-b.md b/curriculum/challenges/portuguese/16-the-odin-project/top-learn-html-foundations/introduction-to-html-css-question-b.md index cd9cf900330..a9af2616543 100644 --- a/curriculum/challenges/portuguese/16-the-odin-project/top-learn-html-foundations/introduction-to-html-css-question-b.md +++ b/curriculum/challenges/portuguese/16-the-odin-project/top-learn-html-foundations/introduction-to-html-css-question-b.md @@ -1,7 +1,7 @@ --- id: 6376327e2724a688c04636e3 videoId: LGQuIIv2RVA -title: Introduction To HTML and CSS Question B +title: Questão B de Introdução ao HTML e ao CSS challengeType: 15 dashedName: introduction-to-html-and-css-question-b --- @@ -9,15 +9,15 @@ dashedName: introduction-to-html-and-css-question-b # --description-- -HTML and CSS are two languages that work together to create everything that you see when you look at something on the internet. HTML is the raw data that a webpage is built out of. All the text, links, cards, lists, and buttons are created in HTML. CSS is what adds style to those plain elements. HTML puts information on a webpage, and CSS positions that information, gives it color, changes the font, and makes it look great! +O HTML e o CSS são duas linguagens que trabalham em conjunto para criar tudo o que você vê quando está na internet. O HTML são os dados brutos que constituem uma página da web. Todos os textos, links, cards, listas e botões são criados em HTML. O CSS é o que adiciona estilo a esses elementos simples. O HTML coloca informações em uma página da web e o CSS posiciona essas informações, dá cor a elas, muda as fontes, o que dá a elas uma aparência melhor! -Many helpful resources out there keep referring to HTML and CSS as programming languages, but if you want to get technical, labeling them as such is not quite accurate. This is because they are only concerned with presenting information. They are not used to program logic. JavaScript, which you will learn in the next section, is a programming language because it’s used to make webpages do things. Yet, there is quite a lot you can do with just HTML and CSS, and you will definitely need them both. Throughout our curriculum, the following lessons focus on giving you the tools you need to succeed once you reach JavaScript content. +Muitos recursos úteis seguem se referindo ao HTML e ao CSS como linguagens de programação. Se quisermos ser técnicos, no entanto, chamá-las assim não é algo preciso. Isso ocorre porque se tratam apenas de apresentar informações. Elas não são usadas para programar a lógica. O JavaScript, que você aprenderá na próxima seção, é uma linguagem de programação, pois é usada para fazer as páginas da web fazerem coisas. No entanto, há muito que você pode fazer apenas com o HTML e o CSS – e você, definitivamente, vai precisar dos dois. As lições a seguir visam dar a você as ferramentas necessárias para que possa seguir com sucesso ao alcançar o conteúdo do JavaScript. # --question-- ## --text-- -Between HTML and CSS, which should you use to add paragraphs of text on a webpage? +Entre o HTML e o CSS, o que você deve usar para adicionar parágrafos de texto em uma página da web? ## --answers-- diff --git a/curriculum/challenges/portuguese/16-the-odin-project/top-learn-html-foundations/introduction-to-html-css-question-d.md b/curriculum/challenges/portuguese/16-the-odin-project/top-learn-html-foundations/introduction-to-html-css-question-d.md index 9e9ee049b75..5f458ca2753 100644 --- a/curriculum/challenges/portuguese/16-the-odin-project/top-learn-html-foundations/introduction-to-html-css-question-d.md +++ b/curriculum/challenges/portuguese/16-the-odin-project/top-learn-html-foundations/introduction-to-html-css-question-d.md @@ -1,34 +1,34 @@ --- id: 637633672724a688c04636e5 videoId: LGQuIIv2RVA -title: Introduction To HTML and CSS Question D +title: Questão D de Introdução ao HTML e ao CSS challengeType: 15 dashedName: introduction-to-html-and-css-question-d --- # --description-- -HTML and CSS are two languages that work together to create everything that you see when you look at something on the internet. HTML is the raw data that a webpage is built out of. All the text, links, cards, lists, and buttons are created in HTML. CSS is what adds style to those plain elements. HTML puts information on a webpage, and CSS positions that information, gives it color, changes the font, and makes it look great! +O HTML e o CSS são duas linguagens que trabalham em conjunto para criar tudo o que você vê quando está na internet. O HTML são os dados brutos que constituem uma página da web. Todos os textos, links, cards, listas e botões são criados em HTML. O CSS é o que adiciona estilo a esses elementos simples. O HTML coloca informações em uma página da web e o CSS posiciona essas informações, dá cor a elas, muda as fontes, o que dá a elas uma aparência melhor! -Many helpful resources out there keep referring to HTML and CSS as programming languages, but if you want to get technical, labeling them as such is not quite accurate. This is because they are only concerned with presenting information. They are not used to program logic. JavaScript, which you will learn in the next section, is a programming language because it’s used to make webpages do things. Yet, there is quite a lot you can do with just HTML and CSS, and you will definitely need them both. Throughout our curriculum, the following lessons focus on giving you the tools you need to succeed once you reach JavaScript content. +Muitos recursos úteis seguem se referindo ao HTML e ao CSS como linguagens de programação. Se quisermos ser técnicos, no entanto, chamá-las assim não é algo preciso. Isso ocorre porque se tratam apenas de apresentar informações. Elas não são usadas para programar a lógica. O JavaScript, que você aprenderá na próxima seção, é uma linguagem de programação, pois é usada para fazer as páginas da web fazerem coisas. No entanto, há muito que você pode fazer apenas com o HTML e o CSS – e você, definitivamente, vai precisar dos dois. As lições a seguir visam dar a você as ferramentas necessárias para que possa seguir com sucesso ao alcançar o conteúdo do JavaScript. # --question-- ## --text-- -What is the difference between HTML, CSS, and JavaScript? +Qual é a diferença entre HTML, CSS e JavaScript? ## --answers-- -HTML is for creating interactive elements, CSS is for the look and feel, and JavaScript is for creating the structure of a webpage. +O HTML serve para criar elementos interativos, o CSS é para a aparência e o JavaScript é para criar a estrutura de uma página da web. --- -CSS is for the look and feel, JavaScript is for creating interactive elements, and HTML is for creating the structure of a webpage. +O CSS é para a aparência, o JavaScript é para criar elementos interativos e o HTML é para criar a estrutura de uma página da web. --- -JavaScript is for the look and feel, CSS is for creating the structure, and HTML is for creating interactive elements of a webpage. +O JavaScript é para a aparência, o CSS é para criar a estrutura e o HTML é para criar elementos interativos de uma página da web. ## --video-solution-- diff --git a/curriculum/challenges/portuguese/16-the-odin-project/top-learn-html-foundations/links-and-images-question-a.md b/curriculum/challenges/portuguese/16-the-odin-project/top-learn-html-foundations/links-and-images-question-a.md index b4d237448f3..1ce94fb92fe 100644 --- a/curriculum/challenges/portuguese/16-the-odin-project/top-learn-html-foundations/links-and-images-question-a.md +++ b/curriculum/challenges/portuguese/16-the-odin-project/top-learn-html-foundations/links-and-images-question-a.md @@ -1,53 +1,53 @@ --- id: 637f704072c65bc8e73dfe36 videoId: tsEQgGjSmkM -title: Links and Images Question A +title: Questão A de Links e imagens challengeType: 15 dashedName: links-and-images-question-a --- # --description-- -To get some practice using links and images throughout this lesson you need an HTML project to work with. +Para fazer alguns exercícios práticos usando links e imagens nesta lição, você precisa de um projeto de HTML para trabalhar. -- Create a new directory named `odin-links-and-images`. +- Crie um diretório chamado `odin-links-and-images`. -- Within that directory, create a new file named `index.html`. +- Dentro desse diretório, crie um arquivo e dê a ele o nome de `index.html`. -- Fill in the usual HTML boilerplate. +- Preencha o boilerplate do HTML de sempre. -- Finally, add the following `h1` to the `body`: `

Homepage

` +- Por fim, adicione o seguinte `h1` ao `body`: `

Homepage

` -## Anchor Elements -To create a link in HTML, you use the anchor element. An anchor element is defined by wrapping the text or another HTML element you want to be a link with an `` tag. Add the following to the `body` of the `index.html` page you created and open it in the browser: +## Elementos de âncora +Para criar um link em HTML, use o elemento de âncora. Um elemento de âncora é definido agregando o texto ou outro elemento do HTML que você que seja um link à tag ``. Adicione o seguinte ao `body` da página `index.html` que você criou e abra a página no navegador: ```html click me ``` -You may have noticed that clicking this link doesn’t do anything. This is because an anchor tag on its own won’t know where you want to link to. You have to tell it a destination to go to. You do this by using an HTML attribute. +Você pode ter notado que, ao clicar nesse link, nada acontece. Isso ocorre porque uma tag de âncora sozinha não saberá para onde você quer ir. Você tem que informar a ela um destino. Você faz isso utilizando um atributo do HTML. -An HTML attribute gives additional information to an HTML element and always goes in the element’s opening tag. An attribute is usually made up of two parts: a name, and a value; however, not all attributes require a value. In your case, you need to add a `href` (hyperlink reference) attribute to the opening anchor tag. The value of the `href` attribute is the destination you want your link to go to. +Um atributo do HTML fornece informações adicionais para um elemento do HTML e sempre vai na tag de abertura do elemento. Um atributo é geralmente composto por duas partes: um nome e um valor. No entanto, nem todos os atributos requerem um valor. No seu caso, você precisa adicionar um atributo `href` (referência de hiperlink) à tag de abertura do elemento de âncora. O valor do atributo `href` é o destino para o qual você quer o seu link vá. -Add the following `href` attribute to the anchor element you created previously and try clicking it again, don’t forget to refresh the browser so the new changes can be applied. +Adicione o atributo `href` abaixo ao elemento âncora que você criou anteriormente e tente clicar novamente. Não se esqueça de atualizar o navegador para que as novas alterações possam ser aplicadas. ```html click me ``` -By default, any text wrapped with an anchor tag without a `href` attribute will look like plain text. If the `href` attribute is present, the browser will give the text a blue color and underline it to signify it is a link. +Por padrão, qualquer texto agregado a uma tag de âncora sem um atributo `href` parecerá texto simples. Se o atributo `href` estiver presente, o navegador dará ao texto uma cor azul e vai sublinhá-lo para representar um link. -It’s worth noting you can use anchor tags to link to any kind of resource on the internet, not just other HTML documents. You can link to videos, pdf files, images, and so on, but for the most part, you will be linking to other HTML documents. +Vale a pena notar que você pode usar tags de âncora para vincular qualquer tipo de recurso na internet, não apenas outros documentos HTML. Você pode vincular vídeos, arquivos em PDF, imagens e assim por diante. Na maioria das vezes, no entanto, você vinculará a tag a outros documentos HTML. # --question-- ## --assignment-- -Watch Kevin Powell’s HTML Links video above. +Assista ao vídeo de Kevin Powell sobre links do HTML acima. ## --text-- -What HTML tag is used to create a link? +Qual é a tag do HTML usada para criar um link? ## --answers-- diff --git a/curriculum/challenges/portuguese/16-the-odin-project/top-learn-html-foundations/links-and-images-question-b.md b/curriculum/challenges/portuguese/16-the-odin-project/top-learn-html-foundations/links-and-images-question-b.md index 07baa2396bb..28fcb9cf10b 100644 --- a/curriculum/challenges/portuguese/16-the-odin-project/top-learn-html-foundations/links-and-images-question-b.md +++ b/curriculum/challenges/portuguese/16-the-odin-project/top-learn-html-foundations/links-and-images-question-b.md @@ -1,53 +1,53 @@ --- id: 637f703572c65bc8e73dfe35 videoId: tsEQgGjSmkM -title: Links and Images Question B +title: Questão B de Links e imagens challengeType: 15 dashedName: links-and-images-question-b --- # --description-- -To get some practice using links and images throughout this lesson you need an HTML project to work with. +Para fazer alguns exercícios práticos usando links e imagens nesta lição, você precisa de um projeto de HTML para trabalhar. -- Create a new directory named `odin-links-and-images`. +- Crie um diretório chamado `odin-links-and-images`. -- Within that directory, create a new file named `index.html`. +- Dentro desse diretório, crie um arquivo e dê a ele o nome de `index.html`. -- Fill in the usual HTML boilerplate. +- Preencha o boilerplate do HTML de sempre. -- finally, add the following `h1` to the `body`: `

Homepage

` +- Por fim, adicione o seguinte `h1` ao `body`: `

Homepage

` -## Anchor Elements -To create a link in HTML, you use the anchor element. An anchor element is defined by wrapping the text or another HTML element you want to be a link with an `` tag. Add the following to the `body` of the `index.html` page you created and open it in the browser: +## Elementos de âncora +Para criar um link em HTML, use o elemento de âncora. Um elemento de âncora é definido agregando o texto ou outro elemento do HTML que você que seja um link à tag ``. Adicione o seguinte ao `body` da página `index.html` que você criou e abra a página no navegador: ```html click me ``` -You may have noticed that clicking this link doesn’t do anything. This is because an anchor tag on its own won’t know where you want to link to. You have to tell it a destination to go to. You do this by using an HTML attribute. An HTML attribute gives additional information to an HTML element and always goes in the element’s opening tag. An attribute is usually made up of two parts: a name, and a value; however, not all attributes require a value. In your case, you need to add a `href` (hyperlink reference) attribute to the opening anchor tag. The value of the `href` attribute is the destination you want your link to go to. Add the following `href` attribute to the anchor element you created previously and try clicking it again, don’t forget to refresh the browser so the new changes can be applied. +Você pode ter notado que, ao clicar nesse link, nada acontece. Isso ocorre porque uma tag de âncora sozinha não saberá para onde você quer ir. Você tem que informar a ela um destino. Você faz isso utilizando um atributo do HTML. Um atributo do HTML fornece informações adicionais para um elemento do HTML e sempre vai na tag de abertura do elemento. Um atributo é geralmente composto por duas partes: um nome e um valor. No entanto, nem todos os atributos requerem um valor. No seu caso, você precisa adicionar um atributo `href` (referência de hiperlink) à tag de abertura do elemento de âncora. O valor do atributo `href` é o destino para o qual você quer o seu link vá. Adicione o atributo `href` abaixo ao elemento âncora que você criou anteriormente e tente clicar novamente. Não se esqueça de atualizar o navegador para que as novas alterações possam ser aplicadas. ```html click me ``` -By default, any text wrapped with an anchor tag without a `href` attribute will look like plain text. If the `href` attribute is present, the browser will give the text a blue color and underline it to signify it is a link. It’s worth noting you can use anchor tags to link to any kind of resource on the internet, not just other HTML documents. You can link to videos, pdf files, images, and so on, but for the most part, you will be linking to other HTML documents. +Por padrão, qualquer texto agregado a uma tag de âncora sem um atributo `href` parecerá texto simples. Se o atributo `href` estiver presente, o navegador dará ao texto uma cor azul e vai sublinhá-lo para representar um link. Vale a pena notar que você pode usar tags de âncora para vincular qualquer tipo de recurso na internet, não apenas outros documentos HTML. Você pode vincular vídeos, arquivos em PDF, imagens e assim por diante. Na maioria das vezes, no entanto, você vinculará a tag a outros documentos HTML. # --question-- ## --text-- -What is an attribute? +O que é um atributo? ## --answers-- -An HTML attribute gives additional information to an HTML element and always goes in the element’s closing tag. +Um atributo do HTML fornece informações adicionais para um elemento do HTML e sempre vai na tag de fechamento do elemento. --- -An HTML attribute is used to tell the browser what the element contains. +Um atributo do HTML é usado para informar ao navegador o que o elemento contém. --- -An HTML attribute gives additional information to an HTML element and always goes in the element’s opening tag. +Um atributo do HTML fornece informações adicionais para um elemento do HTML e sempre vai na tag de abertura do elemento. ## --video-solution-- diff --git a/curriculum/challenges/portuguese/16-the-odin-project/top-learn-html-foundations/links-and-images-question-c.md b/curriculum/challenges/portuguese/16-the-odin-project/top-learn-html-foundations/links-and-images-question-c.md index 09bfb82d64b..8e13fba0bd0 100644 --- a/curriculum/challenges/portuguese/16-the-odin-project/top-learn-html-foundations/links-and-images-question-c.md +++ b/curriculum/challenges/portuguese/16-the-odin-project/top-learn-html-foundations/links-and-images-question-c.md @@ -1,43 +1,43 @@ --- id: 637f703072c65bc8e73dfe34 videoId: tsEQgGjSmkM -title: Links and Images Question C +title: Questão C de Links e imagens challengeType: 15 dashedName: links-and-images-question-c --- # --description-- -To get some practice using links and images throughout this lesson you need an HTML project to work with. +Para fazer alguns exercícios práticos usando links e imagens nesta lição, você precisa de um projeto de HTML para trabalhar. -- Create a new directory named `odin-links-and-images`. +- Crie um diretório chamado `odin-links-and-images`. -- Within that directory, create a new file named `index.html`. +- Dentro desse diretório, crie um arquivo e dê a ele o nome de `index.html`. -- Fill in the usual HTML boilerplate. +- Preencha o boilerplate do HTML de sempre. -- finally, add the following `h1` to the `body`: `

Homepage

` +- Por fim, adicione o seguinte `h1` ao `body`: `

Homepage

` -## Anchor Elements -To create a link in HTML, you use the anchor element. An anchor element is defined by wrapping the text or another HTML element you want to be a link with an `` tag. Add the following to the `body` of the `index.html` page you created and open it in the browser: +## Elementos de âncora +Para criar um link em HTML, use o elemento de âncora. Um elemento de âncora é definido agregando o texto ou outro elemento do HTML que você que seja um link à tag ``. Adicione o seguinte ao `body` da página `index.html` que você criou e abra a página no navegador: ```html click me ``` -You may have noticed that clicking this link doesn’t do anything. This is because an anchor tag on its own won’t know where you want to link to. You have to tell it a destination to go to. You do this by using an HTML attribute. An HTML attribute gives additional information to an HTML element and always goes in the element’s opening tag. An attribute is usually made up of two parts: a name, and a value; however, not all attributes require a value. In your case, you need to add a `href` (hyperlink reference) attribute to the opening anchor tag. The value of the `href` attribute is the destination you want your link to go to. Add the following `href` attribute to the anchor element you created previously and try clicking it again, don’t forget to refresh the browser so the new changes can be applied. +Você pode ter notado que, ao clicar nesse link, nada acontece. Isso ocorre porque uma tag de âncora sozinha não saberá para onde você quer ir. Você tem que informar a ela um destino. Você faz isso utilizando um atributo do HTML. Um atributo do HTML fornece informações adicionais para um elemento do HTML e sempre vai na tag de abertura do elemento. Um atributo é geralmente composto por duas partes: um nome e um valor. No entanto, nem todos os atributos requerem um valor. No seu caso, você precisa adicionar um atributo `href` (referência de hiperlink) à tag de abertura do elemento de âncora. O valor do atributo `href` é o destino para o qual você quer o seu link vá. Adicione o atributo `href` abaixo ao elemento âncora que você criou anteriormente e tente clicar novamente. Não se esqueça de atualizar o navegador para que as novas alterações possam ser aplicadas. ```html click me ``` -By default, any text wrapped with an anchor tag without a `href` attribute will look like plain text. If the `href` attribute is present, the browser will give the text a blue color and underline it to signify it is a link. It’s worth noting you can use anchor tags to link to any kind of resource on the internet, not just other HTML documents. You can link to videos, pdf files, images, and so on, but for the most part, you will be linking to other HTML documents. +Por padrão, qualquer texto agregado a uma tag de âncora sem um atributo `href` parecerá texto simples. Se o atributo `href` estiver presente, o navegador dará ao texto uma cor azul e vai sublinhá-lo para representar um link. Vale a pena notar que você pode usar tags de âncora para vincular qualquer tipo de recurso na internet, não apenas outros documentos HTML. Você pode vincular vídeos, arquivos em PDF, imagens e assim por diante. Na maioria das vezes, no entanto, você vinculará a tag a outros documentos HTML. # --question-- ## --text-- -What attribute tells links where to go to? +Qual atributo diz aos links para onde ir? ## --answers-- diff --git a/curriculum/challenges/portuguese/16-the-odin-project/top-learn-html-foundations/links-and-images-question-d.md b/curriculum/challenges/portuguese/16-the-odin-project/top-learn-html-foundations/links-and-images-question-d.md index 37eebffbabf..50463f3244d 100644 --- a/curriculum/challenges/portuguese/16-the-odin-project/top-learn-html-foundations/links-and-images-question-d.md +++ b/curriculum/challenges/portuguese/16-the-odin-project/top-learn-html-foundations/links-and-images-question-d.md @@ -1,7 +1,7 @@ --- id: 637f702872c65bc8e73dfe33 videoId: ta3Oxx7Yqbo -title: Links and Images Question D +title: Questão D de Links e imagens challengeType: 15 dashedName: links-and-images-question-d --- @@ -9,26 +9,26 @@ dashedName: links-and-images-question-d # --description-- -Generally, there are two kinds of links you will create: +Geralmente, existem dois tipos de links que você criará: -- Links to pages on other websites on the internet +- Links para páginas em outros sites na internet -- Links to pages located on your own websites +- Links para páginas localizadas em seus próprios sites -## Absolute Links -Links to pages on other websites on the internet are called absolute links. A typical absolute link will be made up of the following parts: `protocol://domain/path`. An absolute link will always contain the protocol and domain of the destination. +## Links absolutos +Os links para páginas em outros sites na internet são chamados de links absolutos. Um link absoluto típico será composto das seguintes partes: `protocol://domain/path`. Um link absoluto conterá sempre o protocolo e o domínio do destino. -You’ve already seen an absolute link in action. The link you created to The Odin Project’s About page earlier was an absolute link as it contains the protocol and domain. +Você já viu um link absoluto em ação. O link que você criou para a página About do The Odin Project anteriormente era um link absoluto, pois contém o protocolo e domínio. `https://www.theodinproject.com/about` -## Relative Links -Links to other pages within your own website are called relative links. Relative links do not include the domain name, since it is another page on the same site, it assumes the domain name will be the same as the page you created the link on. +## Links relativos +Os links para outras páginas dentro de seu próprio site são chamados de links relativos. Links relativos não incluem o nome de domínio. Já que estamos falando de outra página no mesmo site, eles assumem que o nome do domínio será o mesmo da página que você criou no link. -Relative links only include the file path to the other page, relative to the page you are creating the link on. This is quite abstract, let’s see this in action using an example. +Os links relativos incluem apenas o caminho do arquivo para a outra página, em relação à página em que você está criando o link. Isso é bastante abstrato. Vamos ver isso em ação usando um exemplo. -Within the `odin-links-and-images` directory, create another HTML file named `about.html` and paste the following code into it: +No diretório `odin-links-and-images`, crie outro arquivo HTML chamado `about.html` e cole o seguinte código dentro dele: ```html @@ -44,7 +44,7 @@ Within the `odin-links-and-images` directory, create another HTML file named `ab ``` -Back in the `index` page, add the following anchor element to create a link to the `about` page: +De volta à página `index`, adicione o seguinte elemento de âncora para criar um link para a página `about`: ```html @@ -55,17 +55,17 @@ Back in the `index` page, add the following anchor element to create a link to t ``` -Open the `index.html` file in a browser and click on the about link to make sure it is all wired together correctly. Clicking the link should go to the `about` page you just created. +Abra o arquivo `index.html` em um navegador e clique no link de about para se certificar de que tudo esteja ligado corretamente. Clicar no link deve enviá-lo para a página `about` na que você acabou de criar. -This works because the `index` and `about` page are in the same directory. That means you can simply use its name (`about.html`) as the link’s `href` value. +Isso funciona porque as páginas `index` e `about` estão no mesmo diretório. Isso significa que você pode simplesmente usar o nome (`about.html`) como o valor do link `href`. -But you will usually want to organize your website directories a little better. Normally you would only have the `index.html` at the root directory and all other HTML files in their own directory. +Você, no entanto, geralmente vai querer organizar os diretórios do site um pouco melhor. Normalmente, você só teria o `index.html` no diretório raiz e todos os outros arquivos HTML em seus próprios diretórios. -Create a directory named `pages` within the `odin-links-and-images` directory and move the `about.html` file into this new directory. +Crie um diretório chamado `pages` dentro do diretório `odin-links-and-images` e mova o arquivo `about.html` para este novo diretório. -Refresh the `index` page in the browser and then click on the `about` link. It will now be broken. This is because the location of the `about` page file has changed. +Atualize a página `index` no navegador e, em seguida, clique no link `about`. Agora, você terá um link quebrado. Isso ocorre porque o local do arquivo da página `about` foi alterado. -To fix this, you just need to update the `about` link `href` value to include the `pages/` directory since that is the new location of the `about.html` file relative to the `index.html` file. +Para corrigir isto, você só precisa atualizar o valor de `href` do link da página `about` para incluir o diretório de `pages/`, já que esse é o novo local de `about.html` em relação ao arquivo `index.html`. ```html @@ -74,9 +74,9 @@ To fix this, you just need to update the `about` link `href` value to include th ``` -Refresh the `index` page in the browser and try clicking the `about` link again, it should now be back in working order. +Atualize a página `index` no navegador e tente clicar no link para `about` novamente. Agora, estará tudo em ordem novamente. -In many cases, this will work just fine; however, you can still run into unexpected issues with this approach. Prepending `./` before the link will in most cases prevent such issues. By adding `./` you are specifying to your code that it should start looking for the file/directory relative to the **current** directory. +Em muitos casos, isso funcionará muito bem. No entanto, com essa abordagem, ainda podemos encontrar problemas inesperados. Adicionar `./` antes do link impedirá, na maioria dos casos, esses problemas. Ao adicionar `./`, você estará especificando para o código que ele deve começar a procurar o arquivo/diretório a partir de sua relação com o **diretório atual**. ```html @@ -89,23 +89,23 @@ In many cases, this will work just fine; however, you can still run into unexpec ## --assignment-- -Watch Kevin Powell’s HTML File Structure video above. +Assista ao vídeo de Kevin Powell sobre a estrutura dos arquivos do HTML acima. ## --text-- -What is the difference between an absolute and a relative link? +Qual é a diferença entre um link absoluto e um relativo? ## --answers-- -An absolute link is a link to another page on the current website. A relative link is a link to another website. +Um link absoluto é um link para outra página no site atual. Um link relativo é um link para outro site. --- -An absolute link is a link to another website. A relative link is a link another page on the current website. +Um link absoluto é um link para outro site. Um link relativo é um link para outra página no site atual. --- -There is no difference between absolute and relative links. +Não há diferença entre um link absoluto e um relativo. ## --video-solution-- diff --git a/curriculum/challenges/portuguese/16-the-odin-project/top-learn-html-foundations/links-and-images-question-e.md b/curriculum/challenges/portuguese/16-the-odin-project/top-learn-html-foundations/links-and-images-question-e.md index ae008078088..02d88e21085 100644 --- a/curriculum/challenges/portuguese/16-the-odin-project/top-learn-html-foundations/links-and-images-question-e.md +++ b/curriculum/challenges/portuguese/16-the-odin-project/top-learn-html-foundations/links-and-images-question-e.md @@ -1,32 +1,32 @@ --- id: 637f702372c65bc8e73dfe32 videoId: 0xoztJCHpbQ -title: Links and Images Question E +title: Questão E de Links e imagens challengeType: 15 dashedName: links-and-images-question-e --- # --description-- -Websites would be fairly boring if they could only display text. Luckily HTML provides a wide variety of elements for displaying all sorts of different media. The most widely used of these is the image element. +Os sites da web seriam muito chatos se apenas pudessem exibir texto. Felizmente, o HTML fornece uma grande variedade de elementos para exibir todos os tipos diferentes de mídias. O mais utilizado é o elemento de imagem. -To display an image in HTML you use the `` element. Unlike the other elements you have encountered, the `` element is self-closing. Empty, self-closing HTML elements do not need a closing tag. +Para exibir uma imagem em HTML, você usa o elemento ``. Diferente dos outros elementos que você encontrou, o elemento `` tem fechamento próprio. Os elementos vazios ou de fechamento próprio do HTML não precisam de uma tag de fechamento. -Instead of wrapping content with an opening and closing tag, it embeds an image into the page using a `src` attribute which tells the browser where the image file is located. The `src` attribute works much like the `href` attribute for anchor tags. It can embed an image using both absolute and relative paths. +Em vez de envolver o conteúdo com uma tag de abertura e fechamento, esse elemento incorpora uma imagem na página usando um atributo `src`, que informa ao navegador onde o arquivo da imagem está localizado. O atributo `src` funciona muito como o atributo `href` para tags de âncora. Ele pode incorporar uma imagem usando caminhos relativos e absolutos. -For example, using an absolute path you can display an image located on The Odin Project site: +Por exemplo, ao usar um caminho absoluto, você pode exibir uma imagem localizada no site do The Odin Project: - + -To use images that you have on your own websites, you can use a relative path. +Para usar imagens que você tem em seus próprios sites, você pode usar um caminho relativo. -- Create a new directory named `images` within the `odin-links-and-images` project. +- Crie um diretório chamado `images` dentro do projeto `odin-links-and-images`. -- Next, download [this image](https://unsplash.com/photos/Mv9hjnEUHR4/download?force=true&w=640) and move it into the `images` directory you just created. +- Em seguida, faça o download [desta imagem](https://unsplash.com/photos/Mv9hjnEUHR4/download?force=true&w=640) e mova-a para o diretório `images` que você acabou de criar. -- Rename the image to `dog.jpg`. +- Renomeie a imagem para `dog.jpg`. -Finally add the image to the `index.html` file: +Por fim, adicione a imagem ao arquivo `index.html`: ```html @@ -39,47 +39,47 @@ Finally add the image to the `index.html` file: ``` -Save the `index.html` file and open it in a browser to view Charles in all his glory. +Salve o arquivo `index.html` e abra-o em um navegador para conhecer o Charles e ver como ele é lindo. -## Parent Directories +## Diretórios pai -What if you want to use the dog image in the `about` page? You would first have to go up one level out of the pages directory into its parent directory so you could then access the images directory. +Como usar a imagem do cachorro na página `about`? Primeiro, você precisa subir um nível no diretório de páginas para o diretório pai para depois poder acessar o diretório de imagens. -To go to the parent directory you need to use two dots in the relative filepath like this: `../.` Let’s see this in action, within the `body` of the `about.html` file, add the following image below the heading you added earlier: +Para subir para o diretório pai, você precisa usar dois pontos no caminho relativo, assim: `../.` Vamos ver isso em ação, dentro do `body` do arquivo `about.html`, adicione a seguinte imagem abaixo do título que você adicionou anteriormente: ```html ``` -To break this down: +Em detalhes: -- First, you are going to the parent directory of the pages directory which is `odin-links-and-images`. +- Primeiro, você vai ao diretório pai do diretório das páginas, que é o `odin-links-and-images`. -- Then, from the parent directory, you can go into the `images` directory. +- Em seguida, a partir do diretório pai, você pode ir para o diretório `images`. -- Finally, you can access the `dog.jpg` file. +- Por fim, você pode acessar o arquivo `dog.jpg`. -Using the metaphor we used earlier, using `../` in a filepath is kind of like stepping out from the room you are currently in to the main hallway so you can go to another room. +Usando a metáfora que usamos anteriormente, usar `../` em um caminho de arquivo é como sair do quarto em que você está no momento, indo para o corredor principal para que você possa chegar à sala. -## `Alt` attribute +## Atributo `Alt` -Besides the `src` attribute, every image element should also have an `alt` (alternative text) attribute. +Além do atributo `src`, cada elemento de imagem deve ter também um atributo `alt` (texto alternativo). -The `alt` attribute is used to describe an image. It will be used in place of the image if it cannot be loaded. It is also used with screen readers to describe what the image is to visually impaired users. +O atributo `alt` é usado para descrever uma imagem. Ele será usado no lugar da imagem, caso ela não possa ser carregada. Ele também é usado com leitores de tela para descrever a imagem para usuários com deficiência visual. -This is how the The Odin Project logo example you used earlier looks with an `alt` attribute included: - +É assim que o logotipo do The Odin Project que você usou anteriormente fica com um atributo `alt` incluído: + # --question-- ## --assignment-- -Watch Kevin Powell’s HTML Images Video above. +Assista ao vídeo de Kevin Powell sobre imagens do HTML acima. ## --text-- -Which tag is used to display an image? +Qual é a tag usada para exibir uma imagem? ## --answers-- diff --git a/curriculum/challenges/portuguese/16-the-odin-project/top-learn-html-foundations/links-and-images-question-g.md b/curriculum/challenges/portuguese/16-the-odin-project/top-learn-html-foundations/links-and-images-question-g.md index 7341f1c7e1a..1e902628478 100644 --- a/curriculum/challenges/portuguese/16-the-odin-project/top-learn-html-foundations/links-and-images-question-g.md +++ b/curriculum/challenges/portuguese/16-the-odin-project/top-learn-html-foundations/links-and-images-question-g.md @@ -1,32 +1,32 @@ --- id: 637f701572c65bc8e73dfe30 videoId: 0xoztJCHpbQ -title: Links and Images Question G +title: Questão G de Links e imagens challengeType: 15 dashedName: links-and-images-question-g --- # --description-- -Websites would be fairly boring if they could only display text. Luckily HTML provides a wide variety of elements for displaying all sorts of different media. The most widely used of these is the image element. +Os sites da web seriam muito chatos se apenas pudessem exibir texto. Felizmente, o HTML fornece uma grande variedade de elementos para exibir todos os tipos diferentes de mídias. O mais utilizado é o elemento de imagem. -To display an image in HTML you use the `` element. Unlike the other elements you have encountered, the `` element is self-closing. Empty, self-closing HTML elements do not need a closing tag. +Para exibir uma imagem em HTML, você usa o elemento ``. Diferente dos outros elementos que você encontrou, o elemento `` tem fechamento próprio. Os elementos vazios ou de fechamento próprio do HTML não precisam de uma tag de fechamento. -Instead of wrapping content with an opening and closing tag, it embeds an image into the page using a `src` attribute which tells the browser where the image file is located. The `src` attribute works much like the `href` attribute for anchor tags. It can embed an image using both absolute and relative paths. +Em vez de envolver o conteúdo com uma tag de abertura e fechamento, esse elemento incorpora uma imagem na página usando um atributo `src`, que informa ao navegador onde o arquivo da imagem está localizado. O atributo `src` funciona muito como o atributo `href` para tags de âncora. Ele pode incorporar uma imagem usando caminhos relativos e absolutos. -For example, using an absolute path you can display an image located on The Odin Project site: +Por exemplo, ao usar um caminho absoluto, você pode exibir uma imagem localizada no site do The Odin Project: - + -To use images that you have on your own websites, you can use a relative path. +Para usar imagens que você tem em seus próprios sites, você pode usar um caminho relativo. -- Create a new directory named `images` within the `odin-links-and-images` project. +- Crie um diretório chamado `images` dentro do projeto `odin-links-and-images`. -- Next, download [this image](https://unsplash.com/photos/Mv9hjnEUHR4/download?force=true&w=640) and move it into the images directory you just created. +- Em seguida, faça o download [desta imagem](https://unsplash.com/photos/Mv9hjnEUHR4/download?force=true&w=640) e mova-a para o diretório de imagens que você acabou de criar. -- Rename the image to `dog.jpg`. +- Renomeie a imagem para `dog.jpg`. -Finally add the image to the `index.html` file: +Por fim, adicione a imagem ao arquivo `index.html`: ```html @@ -39,43 +39,43 @@ Finally add the image to the `index.html` file: ``` -Save the `index.html` file and open it in a browser to view Charles in all his glory. +Salve o arquivo `index.html` e abra-o em um navegador para conhecer o Charles e ver como ele é lindo. -## Parent Directories +## Diretórios pai -What if you want to use the dog image in the `about` page? You would first have to go up one level out of the pages directory into its parent directory so you could then access the images directory. +Como usar a imagem do cachorro na página `about`? Primeiro, você precisa subir um nível no diretório de páginas para o diretório pai para depois poder acessar o diretório de imagens. -To go to the parent directory you need to use two dots in the relative filepath like this: `../.` Let’s see this in action, within the `body` of the `about.html` file, add the following image below the heading you added earlier: +Para subir para o diretório pai, você precisa usar dois pontos no caminho relativo, assim: `../.` Vamos ver isso em ação, dentro do `body` do arquivo `about.html`, adicione a seguinte imagem abaixo do título que você adicionou anteriormente: ```html ``` -To break this down: +Em detalhes: -- First, you are going to the parent directory of the pages directory which is `odin-links-and-images`. +- Primeiro, você vai ao diretório pai do diretório das páginas, que é o `odin-links-and-images`. -- Then, from the parent directory, you can go into the `images` directory. +- Em seguida, a partir do diretório pai, você pode ir para o diretório `images`. -- Finally, you can access the `dog.jpg` file. +- Por fim, você pode acessar o arquivo `dog.jpg`. -Using the metaphor we used earlier, using `../` in a filepath is kind of like stepping out from the room you are currently in to the main hallway so you can go to another room. +Usando a metáfora que usamos anteriormente, usar `../` em um caminho de arquivo é como sair do quarto em que você está no momento, indo para o corredor principal para que você possa chegar à sala. -## Alt attribute +## Atributo alt -Besides the `src` attribute, every image element should also have an `alt` (alternative text) attribute. +Além do atributo `src`, cada elemento de imagem deve ter também um atributo `alt` (texto alternativo). -The `alt` attribute is used to describe an image. It will be used in place of the image if it cannot be loaded. It is also used with screen readers to describe what the image is to visually impaired users. +O atributo `alt` é usado para descrever uma imagem. Ele será usado no lugar da imagem, caso ela não possa ser carregada. Ele também é usado com leitores de tela para descrever a imagem para usuários com deficiência visual. -This is how the The Odin Project logo example you used earlier looks with an alt attribute included: - +É assim que o logotipo do The Odin Project que você usou anteriormente fica com um atributo alt incluído: + # --question-- ## --text-- -How do you access a parent directory in a filepath? +Como você acessa um diretório pai em um caminho de arquivo? ## --answers-- diff --git a/curriculum/challenges/portuguese/16-the-odin-project/top-learn-html-foundations/links-and-images-question-h.md b/curriculum/challenges/portuguese/16-the-odin-project/top-learn-html-foundations/links-and-images-question-h.md index d7337b515b2..b5372f40d55 100644 --- a/curriculum/challenges/portuguese/16-the-odin-project/top-learn-html-foundations/links-and-images-question-h.md +++ b/curriculum/challenges/portuguese/16-the-odin-project/top-learn-html-foundations/links-and-images-question-h.md @@ -1,32 +1,32 @@ --- id: 637f700b72c65bc8e73dfe2f videoId: 0xoztJCHpbQ -title: Links and Images Question H +title: Questão H de Links e imagens challengeType: 15 dashedName: links-and-images-question-h --- # --description-- -Websites would be fairly boring if they could only display text. Luckily HTML provides a wide variety of elements for displaying all sorts of different media. The most widely used of these is the image element. +Os sites da web seriam muito chatos se apenas pudessem exibir texto. Felizmente, o HTML fornece uma grande variedade de elementos para exibir todos os tipos diferentes de mídias. O mais utilizado é o elemento de imagem. -To display an image in HTML you use the `` element. Unlike the other elements you have encountered, the `` element is self-closing. Empty, self-closing HTML elements do not need a closing tag. +Para exibir uma imagem em HTML, você usa o elemento ``. Diferente dos outros elementos que você encontrou, o elemento `` tem fechamento próprio. Os elementos vazios ou de fechamento próprio do HTML não precisam de uma tag de fechamento. -Instead of wrapping content with an opening and closing tag, it embeds an image into the page using a `src` attribute which tells the browser where the image file is located. The `src` attribute works much like the `href` attribute for anchor tags. It can embed an image using both absolute and relative paths. +Em vez de envolver o conteúdo com uma tag de abertura e fechamento, esse elemento incorpora uma imagem na página usando um atributo `src`, que informa ao navegador onde o arquivo da imagem está localizado. O atributo `src` funciona muito como o atributo `href` para tags de âncora. Ele pode incorporar uma imagem usando caminhos relativos e absolutos. -For example, using an absolute path you can display an image located on The Odin Project site: +Por exemplo, ao usar um caminho absoluto, você pode exibir uma imagem localizada no site do The Odin Project: - + -To use images that you have on your own websites, you can use a relative path. +Para usar imagens que você tem em seus próprios sites, você pode usar um caminho relativo. -- Create a new directory named `images` within the `odin-links-and-images` project. +- Crie um diretório chamado `images` dentro do projeto `odin-links-and-images`. -- Next, download [this image](https://unsplash.com/photos/Mv9hjnEUHR4/download?force=true&w=640) and move it into the images directory you just created. +- Em seguida, faça o download [desta imagem](https://unsplash.com/photos/Mv9hjnEUHR4/download?force=true&w=640) e mova-a para o diretório de imagens que você acabou de criar. -- Rename the image to `dog.jpg`. +- Renomeie a imagem para `dog.jpg`. -Finally add the image to the `index.html` file: +Por fim, adicione a imagem ao arquivo `index.html`: ```html @@ -39,59 +39,59 @@ Finally add the image to the `index.html` file: ``` -Save the `index.html` file and open it in a browser to view Charles in all his glory. +Salve o arquivo `index.html` e abra-o em um navegador para conhecer o Charles e ver como ele é lindo. -## Parent Directories +## Diretórios pai -What if you want to use the dog image in the `about` page? You would first have to go up one level out of the pages directory into its parent directory so you could then access the images directory. +Como usar a imagem do cachorro na página `about`? Primeiro, você precisa subir um nível no diretório de páginas para o diretório pai para depois poder acessar o diretório de imagens. -To go to the parent directory you need to use two dots in the relative filepath like this: `../.` Let’s see this in action, within the `body` of the `about.html` file, add the following image below the heading you added earlier: +Para subir para o diretório pai, você precisa usar dois pontos no caminho relativo, assim: `../.` Vamos ver isso em ação, dentro do `body` do arquivo `about.html`, adicione a seguinte imagem abaixo do título que você adicionou anteriormente: ```html ``` -To break this down: +Em detalhes: -- First, you are going to the parent directory of the pages directory which is `odin-links-and-images`. +- Primeiro, você vai ao diretório pai do diretório das páginas, que é o `odin-links-and-images`. -- Then, from the parent directory, you can go into the `images` directory. +- Em seguida, a partir do diretório pai, você pode ir para o diretório `images`. -- Finally, you can access the `dog.jpg` file. +- Por fim, você pode acessar o arquivo `dog.jpg`. -Using the metaphor we used earlier, using `../` in a filepath is kind of like stepping out from the room you are currently in to the main hallway so you can go to another room. +Usando a metáfora que usamos anteriormente, usar `../` em um caminho de arquivo é como sair do quarto em que você está no momento, indo para o corredor principal para que você possa chegar à sala. -## Alt attribute +## Atributo alt -Besides the `src` attribute, every image element should also have an `alt` (alternative text) attribute. +Além do atributo `src`, cada elemento de imagem deve ter também um atributo `alt` (texto alternativo). -The `alt` attribute is used to describe an image. It will be used in place of the image if it cannot be loaded. It is also used with screen readers to describe what the image is to visually impaired users. +O atributo `alt` é usado para descrever uma imagem. Ele será usado no lugar da imagem, caso ela não possa ser carregada. Ele também é usado com leitores de tela para descrever a imagem para usuários com deficiência visual. -This is how the The Odin Project logo example you used earlier looks with an alt attribute included: - +É assim que o logotipo do The Odin Project que você usou anteriormente fica com um atributo alt incluído: + # --question-- ## --assignment-- -Read about the four main image formats that can be used on the web. +Leia sobre os quatro formatos principais de imagens que podem ser usados na web. ## --text-- -What are the four main image formats that you can use for images on the web? +Quais são os quatro formatos principais de imagens que você pode usar na web? ## --answers-- -TIFF, GIF, PNG, and SVG. +TIFF, GIF, PNG e SVG. --- -JPG, PNG, GIF, and SVG. +JPG, PNG, GIF e SVG. --- -JPG, PDF, SVG, and GIF. +JPG, PDF, SVG e GIF. ## --video-solution-- diff --git a/curriculum/challenges/portuguese/16-the-odin-project/top-learn-html-foundations/understand-ordered-and-unordered-list-question-a.md b/curriculum/challenges/portuguese/16-the-odin-project/top-learn-html-foundations/understand-ordered-and-unordered-list-question-a.md index f4625eb7e31..6aea1ca5a35 100644 --- a/curriculum/challenges/portuguese/16-the-odin-project/top-learn-html-foundations/understand-ordered-and-unordered-list-question-a.md +++ b/curriculum/challenges/portuguese/16-the-odin-project/top-learn-html-foundations/understand-ordered-and-unordered-list-question-a.md @@ -1,52 +1,52 @@ --- id: 637f4e3e72c65bc8e73dfe24 videoId: kcHKFZBVtf4 -title: Understand Ordered and Unordered List Question A +title: Questão A sobre Entender listas ordenadas e não ordenadas challengeType: 15 dashedName: understand-ordered-and-unordered-list-question-a --- # --description-- -If you want to have a list of items where the order doesn’t matter, like a shopping list of items that can be bought in any order, then you can use an unordered list. +Se você quer ter uma lista de itens onde a ordem não importa, como uma lista de compras de itens que podem ser comprados em qualquer ordem, então você pode usar uma lista não ordenada. -Unordered lists are created using the `