diff --git a/challenges/01-front-end-development-certification/html5-and-css.json b/challenges/01-front-end-development-certification/html5-and-css.json index 5baa909e72..0ce9216e7a 100644 --- a/challenges/01-front-end-development-certification/html5-and-css.json +++ b/challenges/01-front-end-development-certification/html5-and-css.json @@ -46,6 +46,17 @@ "Sobald du eine Challenge abgeschlossen hast und alle Tests erfolgreich sind, wird der Button \"Go to my next challenge\" aktiv. Klicke auf diesen – oder drücke Steuerung (Control) und gleichzeitig Enter – um zur nächsten Challenge zu gehen.", "Um den Button \"Go to my next challenge\" dieser Lektion zu aktivieren, ändere den Inhalt des h1 Tags von \"Hello\" zu \"Hello World\"." ], + "namePtBR": "Diga Olá aos Elementos HTML", + "descriptionPtBR": [ + "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\"." + ], "type": "waypoint" }, { @@ -85,6 +96,15 @@ "Dieses Element sagt dem Browser, wie der darin enthaltene Text gerendert wird.", "h2 Elemente sind ein wenig kleiner als h2 Elemente. Es gibt auch h3, h4, h5 und h6 Elemente." ], + "namePtBR": "Cabeçalho com o Elemento h2", + "descriptionPtBR": [ + "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\"." + ], "type": "waypoint" }, { @@ -118,6 +138,13 @@ "p Elemente sind das bevorzugte Element für normalen Paragraphen-Text 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>" ], + "namePtBR": "Informe com o Elemento Parágrafo", + "descriptionPtBR": [ + "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\"." + ], "type": "waypoint" }, { @@ -159,6 +186,13 @@ "Dies ist auch ein guter Weg, um Code inaktiv zu machen ohne diesen komplett löschen zu müssen.", "Du kannst einen Kommentar mit <!-- starten und ihn mit --> wieder beenden." ], + "namePtBR": "Descomente o HTML", + "descriptionPtBR": [ + "\"Comentar\" é uma forma de deixar anotações em seu código sem afetá-lo.", + "Comentar também é um jeito conveniente de deixar seu código inativo sem precisar apagá-lo por completo.", + "Você pode iniciar um comentário com <!-- e terminar seu comentário com -->.", + "Remova o comentário dos elementos h1, h2 e p." + ], "type": "waypoint" }, { @@ -197,6 +231,12 @@ "Denk daran, dass du einen Kommentar mit <!-- anfangen und mit --> wieder beenden kannst.", "Hier wirst du deinen Kommentar vor dem h2 Element beenden müssen." ], + "namePtBR": "Comente o HTML", + "descriptionPtBR": [ + "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." + ], "type": "waypoint" }, { @@ -234,6 +274,13 @@ "Nun gut, fünf Jahrhunderte sind lange genug. Da wir eine CatPhotoApp entwickeln, lass uns stattdessen lieber \"Kitty Ipsum\" nutzen!", "Hier sind die ersten paar Wörter von \"Kitty Ipsum\", die du kopieren und an die richtige Stelle einfügen kannst: Kitty ipsum dolor sit amet, shed everywhere shed everywhere stretching attack your ankles chase the red dot, hairball run catnip eat the grass sniff." ], + "namePtBR": "Preencha Espaços com Texto de Espaço Reservado", + "descriptionPtBR": [ + "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." + ], "type": "waypoint" }, { @@ -269,6 +316,12 @@ "Unser Smartphone hat nicht sehr viel vertikalen Raum.", "Lass uns die unwichtigen Elemente entfernen, damit wir unsere CatPhotoApp bauen können." ], + "namePtBR": "Apague Elementos HTML", + "descriptionPtBR": [ + "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." + ], "type": "waypoint" }, { @@ -306,6 +359,15 @@ "Wir können das bewerkstelligen, indem wir den \"style\" des h2 Elements ändern.", "So könntest du die Textfarbe des h2 Elements in Blau ändern: <h2 style=\"color: blue\">CatPhotoApp</h2>" ], + "namePtBR": "Substitua a Cor do Texto", + "descriptionPtBR": [ + "Agora vamos substituir a cor de parte do nosso texto.", + "Podemos fazer isso mudando o style do elemento h2.", + "A propriedade de estilo responsável pela cor do texto se chama \"color\".", + "Você pode mudar a cor do texto de seu elemento h2 para azul assim:", + "<h2 style=\"color: blue\">CatPhotoApp</h2>", + "Mude o estilo do elemento h2 para que seu texto fique com a cor vermelha." + ], "type": "waypoint" }, { @@ -358,6 +420,19 @@ "Innerhalb des Style Elements kannst du einen CSS Selektor oder \"selector\" für alle h2 Elemente erstellen. Wenn du zum Beispiel alle h2 Elemente Rot färben willst, schreibst du: <style>h2 {color: red;}</style>", "Beachte, dass du öffnende und schließende geschwungene Klammern ({ und }) um jeden Style setzen solltest. Außerdem sollten deine Styles innerhalb dieser Klammern stehen. Zum Schluss benötigst du am Ende jedes Styles ein Semikolon." ], + "namePtBR": "Use Seletores CSS para Estilizar Elementos", + "descriptionPtBR": [ + "Com o CSS, existem centenas de propriedades que você pode utilizar para modificar a forma de como um elemento pode ser visto em uma página da internet.", + "Quando você usou o <h2 style=\"color: red\">CatPhotoApp<h2>, você deu ao elemento h2 um estilo inline.", + "Essa é uma forma de adicionar estilos a um elemento, mas o jeito recomendado para isso é utilizar Folhas de Estilo em Cascata (Cascading Style Sheets, CSS).", + "Acima de seu código, crie um elemento style como esse: <style></style>", + "Dentro do elemento style, é possível criar um seletor CSS para todos os elementos h2. Por exemplo, se você quiser que todos os elementos h2 tenham a cor vermelha, seu elemento style será assim:", + "<style>", + "  h2 {color: red;}", + "</style>", + "Observe que é importante utilizar as chaves de abertura e de fechamento ({ e }) ao redor do estilo de cada elemento. Também é necessário que o estilo de seu elemento esteja entre as tags de abertura e fechamento. Por fim, não se esqueça de adicionar o ponto-e-vírgula no final de cada um dos estilos de seu elemento.", + "Apague o atributo style de seu elemento h2 e então crie um elemento style CSS. Adicione o CSS necessário para fazer com que todos os elementos h2 tenham a cor azul." + ], "type": "waypoint" }, { @@ -419,6 +494,22 @@ "Beachte, dass Klassen in deinem CSS style Element mit einem Punkt beginngen sollten. In deinen Klassen-Deklarationen von HTML Elementen sollten diese nicht mit einem Punkt beginnen.", "Anstatt ein neues style Element zu erstellen, versuche die h2 Style-Deklaration von deinem bereits bestehenden Style Element zu entfernen und sie mit der Klassen-Deklaration \".red-text\" zu ersetzen." ], + "namePtBR": "Use Classes CSS para Estilizar Elementos", + "descriptionPtBR": [ + "As classes são estilos reutilizáveis que podem ser adicionadas a elementos HTML.", + "Aqui está um exemplo de como declarar uma classe com CSS:", + "<style>", + "  .blue-text {", + "    color: blue;", + "  }", + "</style>", + "Veja que criamos uma classe CSS chamada \"blue-text\" no interior da tag <style>.", + "Você pode aplicar uma classe a um elemento HTML assim:", + "<h2 class=\"blue-text\">CatPhotoApp</h2>", + "Note que em seu elemento style CSS, as classes devem começar com um ponto. Já nos elementos HTML, as declarações de classes não devem começar com o ponto.", + "Ao invés de criar um novo elemento style, tente eliminar a declaração de estilo de h2 dos elementos de estilo existentes, e troque ela pela declaração de classe .red-text.", + "Crie uma classe CSS chamada red-text e então a aplique em seu elemento h2." + ], "type": "waypoint" }, { @@ -467,6 +558,17 @@ "Du kannst Klassen zu HTML Elementen hinzufügen, indem du zum Beispiel class=\"deine-klasse\" innerhalb des öffnenden Tags schreibst.", "Du weißt, es gehört ein Punkt vor CSS Klassen: .red-text { color: blue; }. Aber diese Klassen-Deklarationen brauchen keinen Punkt: <h2 class=\"blue-text\">CatPhotoApp<h2>" ], + "namePtBR": "Estilize Múltiplos Elementos com uma Classe CSS", + "descriptionPtBR": [ + "Lembre-se que é possível adicionar classes a elementos HTML ao utilizar class=\"sua-classe-aqui\" dentro da tag de abertura do elemento.", + "Relembre também que os seletores de classes CSS exigem um ponto em seu início, assim:", + ".blue-text {", + "  color: blue;", + "}", + "Contudo, não se esqueça que as declarações de classes em elementos não utilizam ponto, assim:", + "<h2 class=\"blue-text\">CatPhotoApp<h2>", + "Adicione a classe red-text aos seus elementos h2 e p." + ], "type": "waypoint" }, { @@ -515,6 +617,15 @@ "Zuerst erstellst du ein zweites p Element mit dem folgenden 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.", "Versuche nun beiden p Elementen die Schriftgröße von 16 Pixeln (16px) zu geben. Du kannst das innerhalb des selben <style> Tags machen, welches wir für deine \"red-text\" Klasse erstellt haben." ], + "namePtBR": "Mude o Tamanho da Fonte de um Elemento", + "descriptionPtBR": [ + "O tamanho da fonte é controlado pela propriedade CSS \"font-size\", como aqui:", + "h1 {", + "  font-size: 30px;", + "}", + "Crie um segundo elemento p que tenha o seguinte texto Kitty Ipsum: Purr jump eat the grass rip the couch scratched sunbathe, shed everywhere rip the couch sleep in the sink fluffy fur catnip scratched.", + "Dentro da mesma tag <style> que criamos para sua classe red-text, modifique o font-size dos elementos p para que tenha um tamanho de 16 pixels (16px)." + ], "type": "waypoint" }, { @@ -561,6 +672,15 @@ "Du kannst einem Element mit \"font-family\" eine Schriftart zuweisen.", "Wenn du zum Beispiel deinem h2 Element die Schriftart \"Sans-serif\" zuweisen willst, kannst du das mit dem folgenden CSS tun: h2 { font-family: Sans-serif; }" ], + "namePtBR": "Defina a Fonte para um Elemento", + "descriptionPtBR": [ + "Você pode estabelecer o estilo de fonte para um elemento ao utilizar a propriedade font-family.", + "Por exemplo, se você quiser estabelecer o estilo de fonte de seu elemento h2 como Sans-serif, você poderá utilizar o seguinte código em CSS:", + "h2 {", + "  font-family: Sans-serif;", + "}", + "Faça com que todos os elementos p utilizem o estilo de fonte Monospace." + ], "type": "waypoint" }, { @@ -614,6 +734,14 @@ "<link href=\"http://fonts.googleapis.com/css?family=Lobster\" rel=\"stylesheet\" type=\"text/css\">", "Jetzt kannst du \"Lobster\" als font-family Attribut zu deinem h2 Element hinzufügen." ], + "namePtBR": "Importe uma Fonte a Partir do Google Fonts", + "descriptionPtBR": [ + "Agora, vamos importar e aplicar um estilo de fonte por meio do Google Fonts.", + "Primeiro, faça um chamado ao Google Fonts para poder utilizar a fonte chamada Lobster e carregá-la em seu HTML.", + "Para fazer isso, copie o código abaixo e insira-o na parte superior de seu editor de texto:", + "<link href=\"http://fonts.googleapis.com/css?family=Lobster\" rel=\"stylesheet\" type=\"text/css\">", + "Agora, estableça Lobster como o valor para font-family em seu elemento h2." + ], "type": "waypoint" }, { @@ -673,6 +801,16 @@ "Es gibt verschiedene Schriftarten, die jedem Browser standardmäßig zur Verfügung stehen. Das sind unter anderem \"Monospace\", \"Serif\" und \"Sans-Serif\". Probiere deinem h2 Element gleichzeitig die Schriftart \"Lobster\" und als Alternative \"Monospace\" zu geben.", "Jetzt versuche den Aufruf von Google Fonts in deinem HTML auszukommentieren, sodass \"Lobster\" nicht zur Verfügung steht. Beachte, wie nun die Schriftart \"Monospace\" geladen wird." ], + "namePtBR": "Especifique como as Fontes Devem se Degradar", + "descriptionPtBR": [ + "Existem diversas fontes que estão disponíveis por padrão nos navegadores de internet, incluindo Monospace, Serif e Sans-Serif.", + "No entanto, quando uma fonte não está disponível, podemos dizer ao navegador que \"degrade\" a outro tipo de fonte.", + "Por exemplo, se você deseja que um elemento use a fonte Helvetica, e que degrade para a fonte Sans-Serif quando a Helvetica não estiver disponível, você pode utilizar o seguinte CSS:", + "p {", + "  font-family: Helvetica, Sans-Serif;", + "}", + "Agora, comente o seu chamado para a fonte do Google, para que a fonte Lobster não esteja disponível. Note como a fonte degrada para Monospace." + ], "type": "waypoint" }, { @@ -729,6 +867,15 @@ "Ein Beispiel dafür wäre <img src=\"www.bild-quelle.com/bild.jpg\"/>. Beachte, dass img Elemente in den meisten Fällen selbstschließend sind.", "Versuche es mit diesem Bild: https://bit.ly/fcc-relaxing-cat" ], + "namePtBR": "Adicione Imagens em sua Página Web", + "descriptionPtBR": [ + "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=\"http://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" + ], "type": "waypoint" }, { @@ -787,6 +934,17 @@ "Die Breite eines Elements wird mit dem CSS Attribut width kontrolliert. Wie bei Schriftarten verwenden wir Pixel (px) um die Größe zu definieren.", "Wenn wir also die CSS Klasse \"larger-image\" erstellen wollen, um HTML Elementen eine Breite von 500 Pixeln zu verleihen, verwenden wir: <style> .larger-image { width: 500px; } </style>" ], + "namePtBR": "Dê um Tamanho para suas Imagens", + "descriptionPtBR": [ + "O CSS possui uma propriedade chamada width, que controla a largura de um elemento. Da mesma forma que com as fontes, vamos utilizar px (pixels) como medida para especificar a largura de nossa imagem.", + "Por exemplo, se queremos criar uma classe CSS chamada larger-image que dê aos elementos HTML uma largura de 500px, vamos usar:", + "<estilo>", + "  .larger-image{", + "    width: 500px;", + "  }", + "</style>", + "Crie uma classe chamada smaller-image e a utilize para mudar o tamanho da imagem para que ela tenha apenas 100 pixels de largura." + ], "type": "waypoint" }, { @@ -857,6 +1015,21 @@ "CSS Rahmen haben Attribute wie Style, Color und Width.", "Wenn wir nun einen roten, 5 Pixel dicken Rahmen um ein HTML Element setzen wollen, würden wir so vorgehen: <style> .thin-red-border { border-color: red; border-width: 5px; border-style: solid; } </style>" ], + "namePtBR": "Adicione Bordas ao Redor de seus Elementos", + "descriptionPtBR": [ + "As bordas em CSS possuem propriedades como style, color e width", + "Por exemplo, se queremos criar uma borda com tamanho de 5 pixels de cor vermelha ao redor de um elemento HTML, podemos utilizar esta classe:", + "<style>", + "  .thin-red-border {", + "    border-color: red;", + "    border-width: 5px;", + "    border-style: solid;", + "  }", + "</style>", + "Crie uma classe chamada thick-green-border que insira uma borda verde de 10 pixels de largura com um estilo solid ao redor de um elemento HTML, e então adicione essa classe em sua foto com o gato.", + "Lembre que você pode aplicar diversas classes a um elemento separando cada uma das classes com um espaço, dentro do atributo class. Por exemplo:", + "<img class=\"clase1 clase2\">" + ], "type": "waypoint" }, { @@ -927,6 +1100,12 @@ "Das Bild hat nun spitze Ecken. Wir können diese Ecken mit dem CSS Attribut border-radius abrunden.", "Du kannst einen border-radius mit Pixeln deklarieren. Das beeinflusst die Rundung der Ecken. Füge dieses Attribut zu deiner thick-green-border Klasse hinzu und setze es auf 10 Pixel." ], + "namePtBR": "Insira Bordas Arredondadas com o Border Radius", + "descriptionPtBR": [ + "Sua foto com o gato possui cantos pontiagudos. Podemos arredondar os cantos com uma propriedade CSS chamado border-radius.", + "Você pode especificar um border-radius com pixels. Adicione um border-radius de 10px para a sua foto.", + "Nota: Este desafio permite várias soluções possíveis. Por exemplo, você pode adicionar o border-radius tanto para a classe .thick-green-border como para a classe .smaller-image." + ], "type": "waypoint" }, { @@ -987,6 +1166,11 @@ "Gib deinem Katzenfoto einen border-radius von 50 %.", "Du kannst einem border-radius neben Pixeln auch Prozentwerte zuweisen." ], + "namePtBR": "Deixe as Imagens Circulares com o Border Radius", + "descriptionPtBR": [ + "Assim como pixels, você também pode usar o border-radius com porcentagens.", + "Dê para a sua foto de gato um border-radius de 50%." + ], "type": "waypoint" }, { @@ -1057,6 +1241,15 @@ "\"Ein", "Hier ist ein Beispiel: <p>Hier ist ein <a href=\"http://freecodecamp.com\"> Link zum Free Code Camp</a> für dich zum Folgen.</p>" ], + "namePtBR": "Ligue Páginas Externas com o Elemento Âncora", + "descriptionPtBR": [ + "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=\"http://freecodecamp.com\"> link ligado ao Free Code Camp</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\"." + ], "type": "waypoint" }, { @@ -1133,6 +1326,15 @@ "Hier ist nochmal ein Beispiel für ein a Element: \"Ein", "So könnte es aussehen: <p>Hier ist ein <a href=\"http://freecodecamp.com\"> Link zum Free Code Camp</a> für dich zum Folgen.</p>" ], + "namePtBR": "Aninhe o Elemento Âncora no Interior de um Parágrafo", + "descriptionPtBR": [ + "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=\"http://freecodecamp.com\"> link ligado ao Free Code Camp</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." + ], "type": "waypoint" }, { @@ -1197,6 +1399,12 @@ "Das ist auch nützlich, wenn du die Funktion eines Links mit jQuery verändern willst. Das werden wir noch behandeln.", "Ersetze den Inhalt des href Attributs deines a Elements mit einem Hash Symbol um einen toten Link zu erzeugen." ], + "namePtBR": "Crie Links Inativos com o Símbolo Cerquilha", + "descriptionPtBR": [ + "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." + ], "type": "waypoint" }, { @@ -1268,6 +1476,13 @@ "Vergewissere dich, dass du ein Hash Symbol (#) 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." ], + "namePtBR": "Transforme uma Imagem em um Link", + "descriptionPtBR": [ + "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=\"http://bit.ly/fcc-running-cats\"/></a>", + "Lembre de usar # como atributo href de seu elemento a para tornar o link inativo." + ], "type": "waypoint" }, { @@ -1337,6 +1552,14 @@ "alt Attribute sind nützlich um Personen – und Web Crawlers wie Google – zu sagen was in einem Foto abgebildet wird. Das ist extrem wichtig, damit blinde oder visuell eingeschränkte Menschen den Inhalt der Website verstehen.", "Du kannst das alt Attribut direkt in das Img Element einfügen: <img src=\"www.bild-quelle.com/bild.jpg\" alt=\"Dein Alt Text.\"/>" ], + "namePtBR": "Dê Acessibilidade a uma Imagem com Texto Alternativo", + "descriptionPtBR": [ + "Os atributos alt, também conhecidos como texto alternativo, serão apresentados caso se por qualquer motivo o navegador não possa mostrar a imagem. Os atributos alt também são importantes para que usuários cegos ou com alguma deficiência visual possam entender o que uma imagem retrata. Além disso, os motores de busca também examinam os atributos alt.", + "Em resumo: Todas as imagem devem ter um atributo alt!", + "Você pode adicionar um atributo alt já no elemento img assim:", + "<img src=\"www.your-image-source.com/your-image.jpg\" alt=\"seu texto alternativo\">", + "Adicione um atributo alt com o texto A cute orange cat lying on its back para a nossa foto com o gato." + ], "type": "waypoint" }, { @@ -1413,6 +1636,18 @@ "ungeordnete Listen starten mit einem <ul> Element. Dann beinhalten sie eine gewisse Anzahl an <li> Elementen.", "Als Beispiel: <ul><li>Milch</li><li>Käse</li></ul> würde eine ungeordnete Liste für \"Milch\" und \"Käse\" erstellen." ], + "namePtBR": "Crie uma Lista Não Ordenada com Marcadores", + "descriptionPtBR": [ + "O HTML possui um elemento especial para a criação de listas não ordenadas, ou listas com marcadores.", + "As listas não ordenadas iniciam com um elemento <ul>. Logo após, possuem uma série de elementos <li>.", + "Por exemplo:", + "<ul>", + "  <li>leite</li>", + "  <li>queijo</li>", + "</ul>", + "Isso criará uma lista com marcadores que tem como elementos \"leite\" e \"queijo\".", + "Apague os dois últimos elementos p e no final da página crie uma lista não ordenada com três coisas que os gatos adoram." + ], "type": "waypoint" }, { @@ -1497,6 +1732,18 @@ "Geordnete Listen starten mit einem <ol> Element. Dann enthalten sie eine gewisse Anzahl an <li> Elementen.", "Als beispiel: <ol><li>hydrogen</li><li>Helium</li></ol> würde eine nummerierte Liste aus \"Hydrogen\" und \"Helium\" erstellen." ], + "namePtBR": "Crie uma Lista Ordenada", + "descriptionPtBR": [ + "O HTML possui um elemento especial para a criação de listas ordenadas, ou listas numeradas.", + "As listas ordenadas iniciam com um elemento <ol>. Logo após, contém uma série de elementos <li>.", + "Por exemplo:", + "<ol>", + "  <li>Garfield</li>", + "  <li>Sylvester</li>", + "</ol>", + "Isso criará uma lista numerada com \"Garfield\" e \"Sylvester\".", + "Crie uma lista ordenada com as três coisas que os gatos mais odeiam." + ], "type": "waypoint" }, { @@ -1576,6 +1823,15 @@ "Eingabefelder sind ein guter Weg, um Daten von Nutzern zu erhalten.", "So kannst du eines erstellen: <input type=\"text\">. Beachte, dass input Elemente selbstschließend sind." ], + "namePtBR": "Crie um Campo de Texto", + "descriptionPtBR": [ + "Agora vamos criar um formulário web.", + "Os campos de texto são uma forma conveniente de obter uma resposta do usuário.", + "Você pode criar um assim:", + "<input type=\"text\">", + "Note que os elementos input são de fechamento automático.", + "Crie um elemento input de tipo text abaixo de suas listas." + ], "type": "waypoint" }, { @@ -1653,6 +1909,13 @@ "Platzhalter erscheinen in input Feldern, bevor der Nutzer etwas eingibt.", "Du kannst Platzhalter auf folgende Weise erstellen: <input type=\"text\" placeholder=\"Das ist ein Platzhalter.\">" ], + "namePtBR": "Adicione Texto Indicativo a um Campo de Texto", + "descriptionPtBR": [ + "O texto indicativo é o que aparece em um campo de texto antes que um usuário tenha escrito algo.", + "Você pode criar um texto indicativo assim:", + "<input type=\"text\" placeholder=\"isso é um texto indicativo\">", + "Estabeleça o valor do texto indicativo do seu campo de texto como \"cat photo URL\"." + ], "type": "waypoint" }, { @@ -1731,6 +1994,13 @@ "Du kannst Web Formulare bauen, die Daten zu einem Server übertragen – und das nur mit HTML. Das wird möglich, indem du eine Aktion für dein form Element bestimmst.", "Zum Beispiel: <form action=\"/url-wohin-du-deine-formular-daten-senden-willst\"></form>" ], + "namePtBR": "Crie um Elemento de Formulário", + "descriptionPtBR": [ + "É possível construir formulários web que realmente enviem dados a um servidor utilizando nada além de HTML puro. Você pode fazer isso especificando uma ação em seu elemento form.", + "Por exemplo:", + "<form action=\"/url-para-onde-você-quer-enviar-os-dados-do-formulário\"></form>", + "Aninhe seu campo de texto em um elemento form. Adicione o atributo action=\"/submit-cat-photo\" para este elemento de formulário." + ], "type": "waypoint" }, { @@ -1812,6 +2082,13 @@ "Lass uns nun eine Schaltfläche zum Senden zu deinem Formlar hinzufügen. Durch einen Klick auf diese Schaltfläche werden die Daten des Formulars an die URL gesendet, welche du in dem action Attribut deines Formulars angegeben hast.", "Hier ist ein Beispiel einer solchen Schaltfläche: <button type=\"submit\">Diese Schaltfläche überträgt die Daten des Formulars.</button>" ], + "namePtBR": "Inclua um Botão de Enviar a um Formulário", + "descriptionPtBR": [ + "Vamos inserir um elemento submit ao seu formulário. Ao clicar neste botão, os dados inseridos serão enviados para a URL especificada no atributo action do formulário.", + "Aqui está um exemplo de um botão de enviar:", + "<button type=\" submit\">este botão enviará o formulário</button>", + "Adicione um botão de enviar ao seu elemento form com o tipo submit e com o texto \"Submit\"." + ], "type": "waypoint" }, { @@ -1892,6 +2169,13 @@ "Du kannst bestimmte Felder eines Formulars als Pflichtfelder deklarieren. Damit ist es deinen Nutzern nicht mehr möglich, das Formular abzuschicken, ohne die Pflichtfelder auszufüllen.", "Um zum Beispiel ein Textfeld als Pflichtfeld zu deklarieren, kannst du einfach ein \"required\" innerhalb deines input Elements hinzufügen: <input type=\"text\" required>" ], + "namePtBR": "Use HTML5 para Especificar Campos Obrigatórios", + "descriptionPtBR": [ + "Você pode especificar um campo como obrigatório para que seu usuário não consiga enviar o formulário até que o tenha completado.", + "Por exemplo, se você quiser tornar obrigatório um campo de texto, basta adicionar a palavra required dentro de seu elemento input assim: <input type=\"text\" required>", + "Faça com que seu campo de texto seja obrigatório, de forma que o usuário não possa enviar o formulário sem ter completado esse campo.", + "Após isso, tente enviar o formulário sem digitar nenhum texto no campo. Percebe como seu formulário HTML5 mostra que o campo é obrigatório?" + ], "type": "waypoint" }, { @@ -1985,6 +2269,16 @@ "Alle Optionsfelder mit Bezug zueinander sollten das gleiche name Attribut teilen.", "Ein Beispiel eines Optionsfeldes: <label><input type=\"radio\" name=\"indoor-outdoor\"> Indoor</label>" ], + "namePtBR": "Crie um Conjunto de Botões de Seleção", + "descriptionPtBR": [ + "É possível utilizar botões de seleção (botões de rádio) para perguntas nas quais o usuário deverá selecionar apenas uma resposta, dentre várias possíveis.", + "Os botões de seleção são um tipo de elemento input", + "Cada um dos botões de seleção deve estar contido dentro de seu próprio elemento label.", + "Todos os botões de seleção relacionados devem ter o mesmo atributo name.", + "Temos aqui um exemplo de um botão de seleção/rádio:", + "<label><input type=\"radio\" name=\"indoor-outdoor\"> Indoor</label>", + "Adicione um par de botões de seleção ao seu formulário. Um deles deve ter a opção indoor enquanto o outro deve ter a opção outdoor." + ], "type": "waypoint" }, { @@ -2075,6 +2369,16 @@ "Formulare nutzen Kontrollkästchen meistens für Fragen, die mehrerer Antworten bedürfen.", "Als Beispiel: <label><input type=\"checkbox\" name=\"personality\"> liebevoll</label>" ], + "namePtBR": "Crie um Conjunto de Caixas de Seleção", + "descriptionPtBR": [ + "Os formulários costumam utilizar caixas de seleção para perguntas que podem ter mais de uma resposta.", + "As caixas de seleção são um tipo de elemento input", + "Cada uma de suas caixas de seleção deve ser aninhada dentro do próprio elemento label.", + "Todas as caixas de seleção relacionadas devem ter o mesmo atributo name.", + "Veja aqui um exemplo de uma caixa de verificação:", + "<label><input type=\"checkbox\" name=\"personality\"> Carinhoso</label>", + "Adicione ao seu formulário um conjunto de três caixas de verificação. Cada uma delas deve estar aninhada dentro de seu próprio elemento label. As três devem compartilhar o atributo name." + ], "type": "waypoint" }, { @@ -2160,6 +2464,13 @@ "Das kannst du erreichen, indem beiden das Attribut checked beigefügt wird.", "Um das zu bewerkstelligen, füge einfach \"checked\" innerhalb eines Eingabefeldes hinzu. Als Beispiel: <input type=\"radio\" name=\"test-name\" checked>" ], + "namePtBR": "Deixe Botões e Caixas de Seleção Ativados por Padrão", + "descriptionPtBR": [ + "É possível deixar um botão ou caixa de seleção ativado por padrão ao utilizar o atributo checked.", + "Para isso, basta você acrescentar a palavra \"checked\" no interior de um elemento de entrada. Por exemplo:", + "<input type=\"radio\" name=\"nome-de-teste\" checked>", + "Estabeleça como marcados por padrão o primeiro dos seus botões de seleção/rádio e a primeira caixa de seleção." + ], "type": "waypoint" }, { @@ -2252,6 +2563,14 @@ "Wie jedes andere Element – das sich nicht selbst schließt – kannst du ein div Element mit <div> öffnen und mit </div> wieder schließen.", "Versuche deine öffnende div Auszeichnung überhalb des p Elements von \"Things cats love\" und das schließende div unterhalb der schließenden ol Auszeichnung zu platzieren. Damit befinden sich beide Listen innerhalb eines div" ], + "namePtBR": "Aninhe Muitos Elementos Dentro de um só Elemento Div", + "descriptionPtBR": [ + "O elemento div, também conhecido como elemento de divisão, é um contentor de propósito geral para outros elementos.", + "O elemento div é provavelmente o elemento HTML mais utilizado. Ele é útil para adicionar o CSS de suas próprias declarações de classe para todos os elementos que o contém.", + "Da mesma forma que qualquer outro elemento sem fechamento automático, você deve abrir uma tag div com <div> e fechá-la em outra linha com </div>.", + "Tente colocar sua tag de abertura div acima do elemento p \"Things cat love\", e sua tag de fechamento de div depois da tag de fechamento do ol, para que cada uma de suas listas esteja dentro de um div.", + "Aninhe suas listas \"Things cats love\" e \"Things cats hate\" no interior de um único elemento div." + ], "type": "waypoint" }, { @@ -2336,6 +2655,15 @@ "  background-color: green;", "}", "Crea una clase llamada gray-background con la propiedad background-color en gris (gray). Asigna esta clase a tu elemento div ." + ], + "namePtBR": "Dê uma Cor de Fundo a um Elemento Div", + "descriptionPtBR": [ + "Você pode acrescentar uma cor de fundo de um elemento com a propriedade background-color.", + "Por exemplo, se você quiser que a cor de fundo de um elemento seja verde (green), dentro de seu elemento style seria assim:", + ".green-background {", + "  background-color: green;", + "}", + "Crie uma classe chamada gray-background com a propriedade background-color em cinza (gray). Depois, adicione essa classe ao seu elemento div." ] }, { @@ -2424,6 +2752,15 @@ "He aquí un ejemplo de cómo le das la identificación cat-photo-app a tu elemento h2:", "<h2 id=\"cat-photo-app\">", "Dale a tu elemento form la id cat-photo-form." + ], + "namePtBR": "Estabeleça a ID de um Elemento", + "descriptionPtBR": [ + "Além das classes, cada elemento HTML também pode ter um atributo de identificação chamado id.", + "Existem várias vantagens ao utilizar atributos id, e você aprenderá mais sobre elas quando começar a utilizar jQuery.", + "Os atributos id devem ser únicos. Os navegadores não o obrigarão a isso, mas isso é amplamente reconhecido como uma boa prática. Assim, não dê um mesmo atributo id a mais de um elemento.", + "Veja aqui um exemplo de como dar a id cat-photo-app ao seu elemento code>h2:", + "<h2 id=\"cat-photo-app\">", + "Dê ao seu elemento form a id cat-photo-form." ] }, { @@ -2516,6 +2853,16 @@ "}", "Ten en cuenta que dentro de tu elemento style, siempre referencias clases poniendo un . en frente de sus nombres. Y siempre referencias identificaciones poniendo un # frente a sus nombres. ", "Trata de darle a tu formulario, que ahora tiene el atributo id en cat-photo-form, un fondo verde." + ], + "namePtBR": "Use um Atributo ID para Estilizar um Elemento", + "descriptionPtBR": [ + "Algo interessante sobre os atributos id é que, da mesma forma que com as classes, é possível dar estilos a eles usando CSS.", + "Aqui está um exemplo de como você pode usar seu elemento com atributo id em cat-photo-element e dar a ele a cor de fundo verde.", + "#cat-photo-element {", + "  background-color: green;", + "}", + "Note que dentro de seu elemento style, você deve sempre referenciar uma classe colocando um . logo antes de seu nome. Já com uma id, você deve referenciar colocando um # antes de seu nome.", + "Dê ao seu formulário, que agora possui o atributo code>id em cat-photo-form, um fundo verde." ] }, { @@ -2587,6 +2934,16 @@ "Wir sehen in diesem Beispiel, dass sich die grüne Box und die rote Box innerhalb der gelben Box befinden. Beachte, dass die rote Box mehr padding hat als die grüne Box.", "Wenn du den Innenabstand der grünen Box – also padding – erhöhst, wird sich die Entfernung zwischen dem Text \"padding\" und dem Rahmen darum erhöhen." ], + "namePtBR": "Ajuste o Preenchimento de um Elemento", + "descriptionPtBR": [ + "Agora vamos deixar nosso aplicativo de fotos de gatos um pouco de lado, e aprender mais sobre dar estilos em HTML.", + "Você provavelmente já deve ter notado, mas todos os elementos HTML são, essencialmente, pequenos retângulos.", + "Três propriedades importantes controlam o espaço ao redor de cada elemento HTML: preenchimento (padding), margem (margin) e borda (border).", + "O preenchimento (padding) de um elemento controla a quantidade de espaço entre o elemento e sua borda (border).", + "Aqui, podemos ver que o quadro verde e o quadro vermelho se aninham dentro do quadro amarelo. Leve em conta que o quadro vermelho tem mais preenchimento (padding) que o quadro verde.", + "Quando você aumenta o preenchimento da caixa verde, a distância entre o texto padding e a borda ao seu redor também será maior.", + "Mude o preenchimento (padding) da caixa verde para que coincida com a de seu quadrado vermelho." + ], "type": "waypoint" }, { @@ -2654,6 +3011,13 @@ "Die grüne und die rote Box befinden sich beide erneut innerhalb der gelben Box. Beachte, dass die rote Box mehr margin aufweist als ihr Erzfeind – die grüne Box.", "Wenn du den Außenabstand – margin – der grünen Box erhöhst, wird sich der Abstand zwischen ihrem Rahmen und den benachbarten Elementen vergrößern." ], + "namePtBR": "Ajuste a Margem de um Elemento", + "descriptionPtBR": [ + "A margem (margin) de um elemento controla a quantidade de espaço entre a borda (border) e os elementos ao seu redor.", + "Aqui, podemos ver que a caixa verde e a caixa vermelha se aninham dentro da caixa amarela. Note que a caixa vermelha possui a margem maior que a caixa verde, fazendo com que ela pareça menor.", + "Quando você aumenta a margem (margin) da caixa verde, a distância entre a borda e os elementos ao seu redor também aumentará.", + "Mude a margem (margin) da caixa verde para que coincida com a margem da caixa vermelha." + ], "type": "waypoint" }, { @@ -2720,6 +3084,13 @@ "Wenn du dem Außenabstand eines Elements einen negativen Wert zuweist, wird das Element größer.", "Versuche den Außenabstand auf einen negativen Wert wie bei der roten Box zu setzen." ], + "namePtBR": "Adicione uma Margem Negativa a um Elemento", + "descriptionPtBR": [ + "A margem de um elemento controla a quantidade de espaço entre a borda do elemento e os elementos ao seu redor.", + "Se você estabelece a margem de um elemento com um valor negativo, o elemento ficará maior.", + "Tente estabelecer a margem (margin) a um valor negativo como o da caixa vermelha.", + "Mude a margem (margin) da caixa verde para -15px, de forma que ocupe toda a largura horizontal da caixa amarela que a rodeia." + ], "type": "waypoint" }, { @@ -2787,6 +3158,12 @@ "Manchmal wirst du einem Element unterschiedlichen Innenabstand – also padding – auf jeder Seite geben wollen.", "CSS erlaubt dir den Innenabstand eines Elements auf allen Seiten einzeln mit den Eigenschaften padding-top, padding-right, padding-bottom und padding-left zu steuern." ], + "namePtBR": "Dê Valores Diferentes de Preenchimento a Cada Lado de um Elemento", + "descriptionPtBR": [ + "As vezes pode ser que você queira personalizar um elemento para que tenha um preenchimento (padding) diferente em cada um de seus lados.", + "O CSS permite controlar o preenchimento (padding) de um elemento em todos os quatro lados: superior, direito, inferior e esquerdo, com as propriedades padding-top, padding-right, padding-bottom e padding-left.", + "Dê para a caixa verde um preenchimento (padding) de 40px nas partes superior e esquerda, e de apenas 20px em suas partes inferior e direita." + ], "type": "waypoint" }, { @@ -2853,6 +3230,12 @@ "Gib der grünen Box einen Außenabstand – also margin – von 40 Pixeln auf der oberen und linken Seite, aber nur 20 Pixel auf der unteren und rechten Seite.", "CSS erlaubt dir ebenfalls den Außenabstand auf jeder Seite einzeln mit den Eigenschaften margin-top, margin-right, margin-bottom und margin-left zu steuern." ], + "namePtBR": "Dê Valores Diferentes de Margem a Cada Lado de um Elemento", + "descriptionPtBR": [ + "Talvez você queira personalizar um elemento para que possua uma margem (margin) diferente em cada um de seus lados.", + "O CSS permite controlar a margem de um elemento em todos os seus quatro lados: superior, direito, inferior e esquerdo, com as propriedades margin-top, margin-right, margin-bottom e margin-left.", + "Dê para a caixa verde uma margem (margin) de 40px nas partes superior e esquerda, e de apenas 20px nas partes inferior e direita." + ], "type": "waypoint" }, { @@ -2919,6 +3302,13 @@ "Anstatt die Eigenschaften padding-top, padding-right, padding-bottom und padding-left zu verwenden, kannst du sie alle in einer Zeile schreiben: padding: 10px 20px 10px 20px;", "Diese vier Werte funktionieren wie eine Uhr: oben, rechts, unten und links. Sie bedeuten exakt das selbe wie die seitenspezifischen Anweisungen." ], + "namePtBR": "Use Notação em Sentido Horário para Especificar o Preenchimento de um Elemento", + "descriptionPtBR": [ + "Ao invés de especificar as propriedades padding-top, padding-right, padding-bottom e padding-left de um elemento, você pode especificar todas elas em uma só linha, assim:", + "padding: 10px 20px 10px 20px;", + "Estes quatro valores funcionam como um relógio: cima, direita, baixo e esquerda, e produzirão o mesmo resultado das quatro instruções de preenchimento.", + "Use a notação em sentido horário para dar para a classe \".green-box\" um preenchimento de 40px nas partes superior e esquerda, mas de apenas 20px em sua parte inferior e ao lado direito." + ], "type": "waypoint" }, { @@ -2987,6 +3377,14 @@ "Anstatt die Eigenschaften margin-top, margin-right, margin-bottom und margin-left zu verwenden, kannst du alle in eine Zeile schreiben: margin: 10px 20px 10px 20px;", "Diese vier Werte funktionieren wieder wie eine Uhr: oben, rechts, unten und links. Sie meinen exakt das gleiche wie die seitenspezifischen Anweisungen." ], + "namePtBR": "Use Notação em Sentido Horário para Especificar a Margem de um Elemento", + "descriptionPtBR": [ + "Vamos praticar isso outra vez, mas desta vez será com a margem (margin).", + "Ao invés de especificar as propriedades margin-top, margin-right, margin-bottom, e margin-left de um elemento, você pode especificar todas elas em apenas uma linha assim:", + "margin: 10px 20px 10px 20px;", + "Estes quatro valores funcionam como um relógio: cima, direita, baixo e esquerda, e produzirão o mesmo resultado das quatro instruções de margem.", + "Use a notação em sentido horário para dar para a classe \".green-box\" uma margem de 40px nas partes superior e esquerda, mas de apenas 20px em sua parte inferior e ao lado direito." + ], "type": "waypoint" }, { @@ -3019,6 +3417,16 @@ "body {", "  background-color: black;", "}" + ], + "namePtBR": "Dê Estilo ao Elemento Body em HTML", + "descriptionPtBR": [ + "Agora vamos recomeçar e falar sobre herança em CSS.", + "Cada página HTML possui um corpo (body).", + "Podemos demonstrar que o elemento (body) existe aqui, ao dar a ele uma cor de fundo (background-color) preta.", + "Podemos fazer isso adicionando o seguinte ao nosso elemento style:", + "body {", + "  background-color: black;", + "}" ] }, { @@ -3057,6 +3465,14 @@ "En primer lugar, crea un elemento h1 con el texto Hello World", "Después, vamos a darle a todos los elementos de tu página el color verde (green) añadiendo color: green; a la declaración de estilo de tu elemento body.", "Por último, da a tu elemento body el tipo de letra Monospace añadiendo font-family: Monospace; a la declaración del estilo de tu elemento body." + ], + "namePtBR": "Herde Estilos do Elemento Body", + "descriptionPtBR": [ + "Já demonstramos que cada página HTML possui um corpo (body), e que podemos dar estilo a ele através do CSS.", + "Observe que você pode dar estilo ao seu elemento body como a qualquer outro elemento HTML, e que todos os outros elementos herdarão os estilos de seu elemento body.", + "Em primeiro lugar, crie um elemento h1 com o texto Hello World", + "Depois, dê a todos os elementos de sua página uma cor verde (green) adicionando color: green; na declaração de estilo de seu elemento body.", + "Por último, dê ao seu elemento body o tipo de fonte Monospace adicionando font-family: Monospace; na declaração de estilo de seu elemento body." ] }, { @@ -3093,6 +3509,14 @@ "Vamos a ver lo que sucede cuando creamos una clase que hace rosado el texto y luego lo aplicamos a un elemento. ¿Anulará (override) nuestra clase la propiedad CSS color: green del elemento body?", "Crea una clase CSS llamada pink-text que le da a un elemento el color rosado.", "Ponle a tu elemento h1 la clase de pink-text." + ], + "namePtBR": "Priorize um Estilo Sobre o Outro", + "descriptionPtBR": [ + "As vezes os elementos HTML recebem múltiplos estilos que entram em conflito entre si.", + "Por exemplo, o elemento h1 não pode ser verde e rosa ao mesmo tempo.", + "Vamos ver o que acontece quando criamos uma classe que faz com que o texto seja rosa e então o aplicamos a um elemento. Isso irá sobrepor (override) a propriedade CSS color: green do elemento body de nossa classe?", + "Crie uma classe CSS chamada pink-text, que dê a cor rosa a um elemento.", + "Depois, adicione a classe pink-text ao seu elemento h1." ] }, { @@ -3138,6 +3562,17 @@ "La aplicación de múltiples atributos de clase a un elemento HTML se hace usando espacios entre ellos así:", "class=\"class1 class2\"", "Nota: No importa lo que ordenan las clases se enumeran en el." + ], + "namePtBR": "Sobreponha Estilos com CSS Posterior", + "descriptionPtBR": [ + "Nossa classe \"pink-text\" anulou a declaração CSS de nosso elemento body!", + "Acabamos de demonstrar que nossas classes irão sobrepor o CSS do elemento body. Sendo assim, nossa seguinte pergunta lógica é: O que podemos fazer para sobrepor a nossa classe pink-text?", + "Crie uma classe tradicional com CSS chamada texto-azul, que possa dar a um elemento a cor azul. Tenha a certeza de deixá-la abaixo de sua declaração da classe pink-text.", + "Aplique a classe blue-text ao seu elemento h1, além da classe pink-text, e vamos ver qual delas ganhará.", + "Lembre que a adição de vários atributos de classe a um elemento HTML se faz utilizando espaços entre ambos, assim:", + "class=\"class1 class2\"", + "Nota: A ordem em que as classes são listadas em HTML não tem importância.", + "Contudo, a ordem de declarações de classe no <style> é importante. A segunda declaração sempre terá precedência pela primeira. Já que .blue-text é declarado depois, ele irá sobrepor os atributos de .pink-text." ] }, { @@ -3193,6 +3628,17 @@ "  color: brown;", "}", "Nota: No importa si usted declara este css encima o debajo de la clase de texto de color rosa, ya atributo id siempre tendrá prioridad." + ], + "namePtBR": "Sobreponha a Declaração de Classes Estilizando Atributos ID", + "descriptionPtBR": [ + "Acabamos de demonstrar que os navegadores fazem a leitura do CSS de cima para baixo. Isso significa que, em caso de um conflito, o navegador utilizará a última declaração CSS.", + "Mas ainda não terminamos, pois existem outras formas para sobrepor CSS. Você se lembra dos atributos id?", + "Vamos sobrepor suas classes pink-text e blue-text, e fazer com que seu elemento h1 seja laranja. Faremos isso aplicando uma id para o elemento h1 e então estilizando essa id.", + "Dê ao seu elemento h1 o atributo id de nome orange-text. Relembre que os atributos id são assim:", + "#brown-text {", + "  color: brown;", + "}", + "Nota: Não importa se você declara este CSS acima ou abaixo da classe de texto cor de rosa, já que atributos id sempre terão prioridade." ] }, { @@ -3240,6 +3686,14 @@ "Utiliza un estilo en línea para tratar de hacer blanco nuestro elemento h1. Recuerda, los estilos en línea se ven así: ", "<h1 style=\"color: green\">", "Deja las clases blue-text y pink-text en tu elemento h1." + ], + "namePtBR": "Sobreponha a Declaração de Classes com Estilos Inline", + "descriptionPtBR": [ + "Certo, nós demonstramos que declarações de id sobrepoem as declarações de classe, independente do lugar onde são declarados em seu elemento style no CSS.", + "Existem outras formas em que você pode sobrepor CSS. Você se lembra de estilos inline?", + "Use um estilo inline para tentar fazer com que nosso elemento h1 tenha a cor branca. Relembre que estilos inline são assim:", + "<h1 style=\"color: green\">", + "Deixe as classes blue-text e pink-text em seu elemento h1." ] }, { @@ -3292,6 +3746,16 @@ "Vamos a añadir la palabra clave !important a tu declaración del color de pink-text para estar 100% seguros que tu elemento h1 será rosado.", "Un ejemplo de cómo hacer esto es:", "color: red !important;" + ], + "namePtBR": "Sobreponha Todos os Outros Elementos Utilizando Important", + "descriptionPtBR": [ + "Isso! Demonstramos que os estilos inline irão sobrepor todas as declarações CSS de seu elemento style.", + "Mas, espere! Há uma última forma de sobrepor com CSS. Este é o método mais poderoso de todos. Contudo, antes de colocá-lo em prática, vamos falar sobre os motivos que podem fazer você querer sobrepor CSS.", + "Em diversas situações, você usará bibliotecas CSS. Pode ser que essas bibliotecas sobreponham acidentalmente o seu próprio CSS. Por isso, quando você precisar estar seguro de que um elemento possui um CSS específico, você poderá utilizar !important.", + "Certo, vamos voltar para a nossa declaração de classe pink-text. Relembre que nossa classe pink-text foi sobreposta pelas declarações de classe posteriores, por declarações id e por estilos inline.", + "Vamos adicionar nossa palavra-clave !important para sua declaração de cor de pink-text para que possamos estar 100% seguros que seu elemento h1 será sempre cor de rosa.", + "Um exemplo para fazer isso é:", + "color: red !important;" ] }, { @@ -3322,6 +3786,13 @@ "El sistema Decimal se refiere al que nos permite representar cantidades empleando los dígitos del cero al nueve - los números que la gente usa en la vida cotidiana. El sistema Hexadecimal incluye estos 10 dígitos más las letras A, B, C, D, E y F. Esto significa que Hexadecimal tiene un total de 16 dígitos posibles, en lugar de las 10 posibles que nos da nuestro sistema numérico normal en base 10. ", "Con CSS, utilizamos 6 dígitos hexadecimales para representar los colores. Por ejemplo, #000000 es el valor más bajo posible, y representa el color negro. ", "Reemplaza la palabra black en el color de fondo (background-color) de nuestro elemento body por su representación hexadecimal #000000" + ], + "namePtBR": "Use Código Hexadecimal para Especificar Cores", + "descriptionPtBR": [ + "Você sabia que existem outras formas para representar as cores em CSS? Uma dessas formas é com o que chamamos de código hexadecimal, ou código hex para abreviar.", + "O sistema Decimal nos permite representar quantidades numéricas com os dígitos de zero a nove - assim como nós os utilizamos durante o nosso dia a dia. Já o sistema Hexadecimal inclui estes 10 dígitos e também as letras A, B, C, D, E e F. Isso significa que o Hexadecimal possui um total de 16 dígitos possíveis, ao invés dos 10 possíveis que podemos usar com nosso sistema numérico normal de base 10.", + "No CSS, utilizamos 6 dígitos hexadecimais para representar as cores. Por exemplo, #000000 é o valor mais baixo possível, e representa a cor preta.", + "Substitua a palavra black na cor de fundo (background-color) de nosso elemento body pela sua representação hexadecimal #000000." ] }, { @@ -3350,6 +3821,12 @@ "0 es el dígito más bajo en código hexadecimal, y representa una completa ausencia de color.", "F es el dígito más alto en código hexadecimal, y representa el máximo brillo posible.", "Volvamos blanco el color de fondo (background-color) de nuestro elemento body, cambiando su código hexadecimal por #FFFFFF" + ], + "namePtBR": "Use Código Hexadecimal Para dar a Cor Branca a Elementos", + "descriptionPtBR": [ + "0 é o dígito mais baixo em código hexadecimal, e representa a completa ausência de cor.", + "F é o dígito mais alto em código hexadecimal, e representa o máximo de claridade possível.", + "Vamos fazer com que a cor de fundo (background-color) em nosso elemento body seja branca, mudando seu código hexadecimal para #FFFFFF." ] }, { @@ -3382,6 +3859,14 @@ "Los códigos hexadecimales siguen el formato rojo-verde-azul (red-green-blue) o formato rgb. Los dos primeros dígitos del código hexadecimal representan la cantidad de rojo en el color. El tercer y cuarto dígitos representan la cantidad de verde. El quinto y sexto representan la cantidad de azul .", "Así que para conseguir el rojo absolutamente más brillante, basta que uses F para el primer y segundo dígitos (el dígito más alto posible) y 0 para el tercero, cuarto, quinto y sexto dígitos (el dígito más bajo posible).", "Haz que el color de fondo (background-color) del elemento body sea rojo dándole el código hexadecimal #FF0000" + ], + "namePtBR": "Use Código Hexadecimal Para dar a Cor Vermelha a Elementos", + "descriptionPtBR": [ + "Talvez você esteja se perguntando o motivo para usar 6 dígitos para representar uma cor ao invés de apenas um ou dois. Este motivo é que ao usar 6 dígitos, temos acesso a uma enorme variedade de cores.", + "Para que você tenha uma ideia, ter 16 valores e 6 posições significa que temos 16 elevado a 6. Isso dá um total de mais de 16 milhões de cores possíveis.", + "Os códigos hexadecimais seguem o formato vermelho-verde-azul (red-green-blue), ou formato rgb. Os dois primeiros dígitos do código hexadecimal representam a quantidade de vermelho na cor. O terceiro e o quarto representam a quantidade de verde. Já o quinto e o sexto representam a quantidade de azul.", + "Sendo assim, para conseguir um vermelho brilhante, basta que você use F (o dígito mais alto possível) para o primeiro e o segundo dígitos, e 0 (o dígito mais baixo possível) para o terceiro, quarto, quinto e sexto dígito.", + "Faça com que a cor de fundo (background-color) do elemento body seja vermelho, ao dar o código hexadecimal #FF0000." ] }, { @@ -3410,6 +3895,12 @@ "Recuerda que el código hexadecimal sigue el formato rojo-verde-azul o rgb. Los dos primeros dígitos del código hexadecimal representan la cantidad de rojo en el color. El tercer y cuarto dígitos representan la cantidad de verde. El quinto y sexto representar la cantidad de azul.", "Así que para conseguir el verde absoluto más brillante, sólo usas F en el tercer y cuarto dígitos (el dígito más alto posible) y 0 para todos los otros dígitos (el dígito más bajo posible). ", "Haz que el color de fondo (background-color) del elemento body sea verde, dándole el código hexadecimal #00FF00" + ], + "namePtBR": "Use Código Hexadecimal para dar a Cor Verde a Elementos", + "descriptionPtBR": [ + "Relembre que códigos hexadecimais seguem o formato vermelho-verde-azul (red-green-blue), ou formato rgb. Os dois primeiros dígitos do código hexadecimal representam a quantidade de vermelho na cor. O terceiro e o quarto representam a quantidade de verde. Já o quinto e o sexto representam a quantidade de azul.", + "Sendo assim, para conseguir um verde brilhante, basta que você use F (o dígito mais alto possível) para o terceiro e o quarto dígito, e 0 (o dígito mais baixo possível) para todos os outros dígitos.", + "Faça com que a cor de fundo (background-color) do elemento body seja verde ao dar o código hexadecimal #00FF00." ] }, { @@ -3438,6 +3929,12 @@ "Los códigos hexadecimales siguen el formato rojo-verde-azul o rgb. Los dos primeros dígitos del código hexadecimal representan la cantidad de rojo en el color. El tercer y cuarto dígitos representan la cantidad de verde. El quinto y sexto representar la cantidad de azul .", "Así que para conseguir el azul absoluto más brillante, utilizamos F para la quinta y sexta cifras (el dígito más alto posible) y 0 para todos los otros dígitos (el dígito más bajo posible ). ", "Haz que el color de fondo (background-color) del elemento body sea azul, dándole el código hexadecimal #0000FF" + ], + "namePtBR": "Use Código Hexadecimal para dar a Cor Azul a Elementos", + "descriptionPtBR": [ + "Relembre que códigos hexadecimais seguem o formato vermelho-verde-azul (red-green-blue), ou formato rgb. Os dois primeiros dígitos do código hexadecimal representam a quantidade de vermelho na cor. O terceiro e o quarto representam a quantidade de verde. Já o quinto e o sexto representam a quantidade de azul.", + "Para conseguir o azul mais brilhante, utilizamos F (o dígito mais alto possível) no quinto e no sexto dígito, e 0 (o dígito mais baixo possível) para todos os outros dígitos.", + "Faça com que a cor de fundo (background-color) do elemento body seja azul usando o código hexadecimal #0000FF." ] }, { @@ -3466,6 +3963,12 @@ "A partir de estos tres colores puros (rojo, verde y azul), podemos crear 16 millones de colores.", "Por ejemplo, el naranja es rojo puro, mezclado con un poco de verde, y sin azul.", "Haz que el color de fondo del elemento body sea anaranjado, dándole el código hexadecimal #FFA500" + ], + "namePtBR": "Use Código Hexadecimal para Misturar Cores", + "descriptionPtBR": [ + "A partir dessas três cores puras (vermelho, verde e azul), podemos criar 16 milhões de cores.", + "Por exemplo, o laranja é vermelho puro misturado com um pouco de verde, e sem nada de azul.", + "Faça com que a cor de fundo do elemento body seja alaranjada, usando o código hexadecimal #FFA500." ] }, { @@ -3494,6 +3997,12 @@ "A partir de estos tres colores puros (rojo, verde y azul), podemos crear 16 millones de colores.", "También podemos crear diferentes tonos de gris mezclando uniformemente los tres colores.", "Haz que el color de fondo del elemento body sea gris, dándole el código hexadecimal #808080" + ], + "namePtBR": "Use Código Hexadecimal dar a Cor Cinza a Elementos", + "descriptionPtBR": [ + "A partir dessas três cores puras (vermelho, verde e azul), podemos criar 16 milhões de cores.", + "Também podemos criar tons de cinza diferentes ao misturar essas três cores.", + "Faça com que a cor de fundo do elemento body seja cinza, usando o código hexadecimal #808080." ] }, { @@ -3520,6 +4029,11 @@ "descriptionEs": [ "También podemos crear otros tonos de gris mezclando uniformemente los tres colores. Podemos ir muy cerca del verdadero negro. ", "Haz que el color de fondo del elemento body sea gris oscuro dandole el código hexadecimal #111111" + ], + "namePtBR": "Use Código Hexadecimal dar Tons de Cinza a Elementos", + "descriptionPtBR": [ + "Também podemos criar tons de cinza diferentes ao misturar essas três cores. Podemos chegar muito perto de um fundo completamente preto.", + "Faça com que a cor de fundo do elemento body seja cinza escuro através do código hexadecimal #111111." ] }, { @@ -3550,6 +4064,13 @@ "Por ejemplo, el rojo, que es #FF0000 en código hexadecimal, se puede abreviar a #F00. Es decir, un dígito para el rojo, un dígito para el verde, un dígito para el azul. ", "Esto reduce el número total de posibles colores a alrededor de 4.000. Pero los navegadores interpretarán #FF0000 y #F00 como exactamente el mismo color. ", "Adelante, intente usar #F00 para volver rojo el color de fondo del elemento body." + ], + "namePtBR": "Use Código Hexadecimal Abreviado", + "descriptionPtBR": [ + "Muitas pessoas se sentem confusas com as possibilidades de mais de 16 milhões de cores. Além disso, é difícil lembrar de códigos hexadecimais. Por sorte, podemos abreviá-lo.", + "Por exemplo, o vermelho que é #FF0000 em código hexadecimal pode ser abreviado a #F00. Isso quer dizer que podemos usar um dígito para vermelho, um dígito para verde e um dígito para azul.", + "Fazer isso reduz o número total de possíveis cores para ao redor de 4.000. Apesar disso, os navegadores interpretarão #FF0000 e #F00 exatamente como a mesma cor.", + "Continue, tente usar #F00 para fazer com que a cor de fundo do elemento body seja vermelha." ] }, { @@ -3588,6 +4109,17 @@ "En lugar de utilizar seis dígitos hexadecimales, con rgb especificas el brillo de cada color con un número entre 0 y 255.", "Si haces la matemática, 16 veces 16 es 256 valores totales. Así que rgb, que comienza a contar desde cero, tiene exactamente el mismo número de valores posibles que el código hexadecimal.", "Remplacemos el código hexadecimal del color de fondo de nuestro elemento body por el valor RGB para el negro: rgb(0, 0, 0)" + ], + "namePtBR": "Use Valores RBG para Colorir Elementos", + "descriptionPtBR": [ + "Outra forma em que você pode representar cores em CSS é utilizando valores rgb.", + "O valor RGB para preto é assim:", + "rgb(0, 0, 0)", + "O valor RGB para branco é assim:", + "rgb(255, 255, 255)", + "Ao invés de utilizar 6 dígitos hexadecimais, com rgb você especifica o brilho de cada cor com um número entre 0 e 255.", + "Se você fizer a matemática, 16 vezes 16 é igual a 256 valores totais. Sendo assim, o rgb, que começa a contar desde zero, tem exatamente o mesmo número de valores possíveis que o código hexadecimal.", + "Vamos substituir o código hexadecimal da cor de fundo do nosso elemento body pelo valor RGB para preto: rgb(0, 0, 0)." ] }, { @@ -3622,6 +4154,15 @@ "rgb(255, 255, 255)", "En lugar de utilizar seis dígitos hexadecimales, con rgb especificas el brillo de cada color con un número entre 0 y 255.", "Cambia el color de fondo del elemento body del valor RGB para el negro al valor rgb para el blanco: rgb(255, 255, 255)" + ], + "namePtBR": "Use Valores RGB para Dar a Cor Branca a Elementos", + "descriptionPtBR": [ + "O valor RGB para preto é assim:", + "rgb(0, 0, 0)", + "O valor RGB para branco é assim:", + "rgb(255, 255, 255)", + "Ao invés de utilizar 6 dígitos hexadecimais, com rgb você especifica o brilho de cada cor com um número entre 0 e 255.", + "Substitua o código hexadecimal da cor de fundo do nosso elemento body que possui o valor RGB para preto, pelo valor rgb para branco: rgb(255, 255, 255)." ] }, { @@ -3650,6 +4191,12 @@ "Al igual que con el código hexadecimal, puedes representar diferentes colores en RGB mediante el uso de combinaciones de diferentes valores.", "Estos valores siguen el patrón de RGB: el primer número representa rojo, el segundo número representa el verde, y el tercer número representa azul.", "Cambia el color de fondo del elemento body al rojo usando su valor RGB: rgb(255, 0, 0)" + ], + "namePtBR": "Use Valores RBG para Dar a Cor Vermelha a Elementos", + "descriptionPtBR": [ + "Da mesma forma que com códigos em hexadecimal, você pode representar cores diferentes em RGB através do uso de combinações com diferentes valores.", + "Esses valores seguem o padrão de RGB: O primeiro número representa vermelho, o segundo representa verde, e o terceiro representa azul.", + "Mude a cor de fundo do elemento body para vermelho usando seu valor RGB: rgb(255, 0, 0)." ] }, { @@ -3674,6 +4221,10 @@ "nameEs": "Usa RGB para colorear de verde los elementos", "descriptionEs": [ "Ahora cambia el color de fondo del elemento body a verde usando su valor RGB: rgb (0, 255, 0)" + ], + "namePtBR": "Use Valores RBG para Dar a Cor Verde a Elementos", + "descriptionPtBR": [ + "Agora, mude a cor de fundo do elemento body para verde usando seu valor RGB: rgb (0, 255, 0)." ] }, { @@ -3698,6 +4249,10 @@ "nameEs": "Usa RGB para colorear de azul los elementos", "descriptionEs": [ "Cambia el color de fondo del elemento body a azul usando su valor RGB: rgb(0, 0, 255)" + ], + "namePtBR": "Use Valores RBG para Dar a Cor Azul a Elementos", + "descriptionPtBR": [ + "Agora, mude a cor de fundo do elemento body para azul usando seu valor RGB: rgb(0, 0, 255)." ] }, { @@ -3724,6 +4279,11 @@ "descriptionEs": [ "Al igual que con el código hexadecimal, puedes mezclar los colores en RGB mediante el uso de combinaciones de diferentes valores.", "Cambia el color de fondo del elemento body a anaranjado usando su valor RGB: rgb(255, 165, 0)" + ], + "namePtBR": "Use Valores RBG para Misturar Cores", + "descriptionPtBR": [ + "Assim como com código hexadecimal, você pode misturar as cores com RGB através do uso de combinações de valores diferentes.", + "Mude a cor de fundo do elemento body para alaranjado usando seu valor RGB: rgb(255, 165, 0)." ] } ]