Brazilian Portuguese translation of Basic HTML and HTML5 (#15439)
* Brazilian Portuguese translation of Basic HTML and HTML5 * Basic HTML and HTML reviewed
This commit is contained in:
Nathália Oliveira
committed by
mrugesh mohapatra
mrugesh mohapatra
parent
39988eb40b
commit
e905b7ee72
@ -27,7 +27,25 @@
|
||||
"type": "Waypoint",
|
||||
"challengeType": 7,
|
||||
"isRequired": false,
|
||||
"translations": {}
|
||||
"translations": {
|
||||
"pt-br": {
|
||||
"title": "Introdução aos desafios básicos de HTML e HTML5",
|
||||
"description": [
|
||||
[
|
||||
"",
|
||||
"",
|
||||
"HTML, do inglês HyperText Markup Language (Linguagem de Marcação de Hipertexto), é uma linguagem de marcação usada para descrever a estrutura de uma página da web. Ela usa uma sintaxe especial de elementos para organizar seu conteúdo e dar ao seu navegador informações sobre ele. Esses elementos geralmente possuem tags (marcadores) de abertura e fechamento que delimitam uma parte do conteúdo e dão significado a ela. Por exemplo, para delimitar texto, existem diferentes opções de tags que mostram se esse texto é um título, um parágrafo ou uma lista.",
|
||||
""
|
||||
],
|
||||
[
|
||||
"",
|
||||
"",
|
||||
"A parte de \"hipertexto\" do HTML vem dos primórdios da web. As páginas geralmente eram documentos estáticos que se conectavam a outros documentos por meio de links de hipertexto. Conforme as páginas e aplicações web ficam mais complexas, o consórcio W3 atualiza o HTML. A última versão, ou especificação, é o HTML5.<br><br>Essa seção apresenta como usar os elementos do HTML para dar estrutura e significado ao seu conteúdo na web.",
|
||||
""
|
||||
]
|
||||
]
|
||||
}
|
||||
}
|
||||
},
|
||||
{
|
||||
"id": "bd7123c8c441eddfaeb5bdef",
|
||||
@ -94,17 +112,22 @@
|
||||
]
|
||||
},
|
||||
"pt-br": {
|
||||
"title": "Diga Olá aos Elementos HTML",
|
||||
"title": "Diga oi para os elementos HTML",
|
||||
"description": [
|
||||
"Seja bem vindo ao primeiro desafio de programação do freeCodeCamp!",
|
||||
"Você pode editar o seu <code>código</code> em seu <code>editor de texto</code>, que embutimos aqui nesta página da web.",
|
||||
"Consegue ver o código que diz <code><h1>Hello</h1></code> no seu editor de texto? Esse é um elemento HTML.",
|
||||
"A maioria dos elementos HTML tem uma <code>tag de abertura</code> e uma <code>tag de fechamento</code>.",
|
||||
"As tags de abertura são assim: <code><h1></code>. E as tags de fechamento são assim: <code></h1></code>.",
|
||||
"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.",
|
||||
"Bem-vindo(a) aos desafios de programação do freeCodeCamp. Eles vão te guiar pelo desenvolvimento web passo a passo.",
|
||||
"Nós recomendamos que você os resolva em ordem, mas fique à vontade para navegar pelos desafios clicando em \"map\" no menu acima.",
|
||||
"Além disso, se você quiser salvar seu progresso, você deve entrar para nossa comunidade criando uma conta. Em apenas alguns minutos, você pode entrar na nossa sala de chat, fórum e até mesmo em um grupo de estudos da sua cidade.",
|
||||
"Primeiramente, você vai começar construindo uma página da web simples com HTML. Você pode editar o <code>código</code> no seu <code>editor de texto</code>, que está embutido nessa página.",
|
||||
"Você está vendo o código no seu editor de texto que contém <code><h1>Hello</h1></code>? Esse é um <code>elemento</code> HTML.",
|
||||
"A maioria dos elementos HTML têm uma <code>tag de abertura</code> e uma <code>tag de fechamento</code>.",
|
||||
"As tags de abertura são assim:",
|
||||
"<code><h1></code>",
|
||||
"As tags de fechamento são assim:",
|
||||
"<code></h1></code>",
|
||||
"A única diferença entre tags de abertura e fechamento é que as tags de fechamento possuem uma barra (/) depois do sinal de menor (<).",
|
||||
"Cada desafio possui testes que você pode rodar a qualquer momento clicando no botão \"Run tests\". Quando seu código passar em todos os testes, você poderá enviar sua solução e avançar para o próximo desafio.",
|
||||
"<hr>",
|
||||
"Para passar nos testes deste desafio, mude o texto do elemento <code>h1</code> para que diga \"Hello World\" no lugar de \"Hello\". Depois, clique no botão \"Executar testes\"."
|
||||
"Para passar no teste desse desafio, mude o texto do seu elemento <code>h1</code> para \"Hello World\"."
|
||||
]
|
||||
},
|
||||
"ru": {
|
||||
@ -171,15 +194,14 @@
|
||||
]
|
||||
},
|
||||
"pt-br": {
|
||||
"title": "Cabeçalho com o Elemento h2",
|
||||
"title": "Título com o elemento h2",
|
||||
"description": [
|
||||
"Durante os próximos desafios, construiremos um aplicativo em HTML que se parecerá como este:",
|
||||
"<a href=\"//i.imgur.com/jOc1JF1.png\" target=\"_blank\" data-lightbox=\"img-enlarge\"><img class=\"img-responsive\" src=\"//i.imgur.com/jOc1JF1.png\" title=\"Clique para aumentar\" alt=\"Imagem do aplicativo CatPhotoApp finalizado\"></a>",
|
||||
"O elemento <code>h2</code> que você criar gerará um elemento <code>h2</code> na página da web.",
|
||||
"Este elemento indica ao navegador a forma de mostrar o texto que contém.",
|
||||
"Os elementos <code>h2</code> são ligeiramente menores que os elementos <code>h1</code>. Há também os elementos <code>h3</code>, <code>h4</code>, <code>h5</code> e <code>h6</code>.",
|
||||
"Nas próximas duas seções, nós vamos construir um app HTML5 que vai ficar mais ou menos assim:",
|
||||
"<a href=\"//i.imgur.com/jOc1JF1.png\" target=\"_blank\" data-lightbox=\"img-enlarge\"><img class=\"img-responsive\" src=\"//i.imgur.com/jOc1JF1.png\" title=\"Clique para ampliar\" alt=\"Um screenshot do app de fotos de gatos terminado\"></a>",
|
||||
"O elemento <code>h2</code> que você vai adicionar vai criar um elemento <code>h2</code> na página.",
|
||||
"Esse elemento indica ao navegador a estrutura do seu site. Elementos <code>h1</code> são geralmente usados para os títulos principais, enquanto elementos <code>h2</code> são usados para subtítulos. Também existem os elementos <code>h3</code>, <code>h4</code>, <code>h5</code> e <code>h6</code>, que indicam seções novas e diferentes.",
|
||||
"<hr>",
|
||||
"Adicione uma tag <code>h2</code> que diga \"CatPhotoApp\" para criar um segundo <code>elemento</code> HTML abaixo de seu elemento <code>h1</code> chamado \"Hello World\"."
|
||||
"Adicione uma tag <code>h2</code> com o texto \"CatPhotoApp\" para criar um segundo <code>elemento</code> HTML abaixo do seu elemento <code>h1</code> com o texto \"Hello World\"."
|
||||
]
|
||||
},
|
||||
"ru": {
|
||||
@ -237,13 +259,13 @@
|
||||
]
|
||||
},
|
||||
"pt-br": {
|
||||
"title": "Informe com o Elemento Parágrafo",
|
||||
"title": "Informe com o elemento de parágrafo",
|
||||
"description": [
|
||||
"Os elementos <code>p</code> 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\".",
|
||||
"Elementos <code>p</code> são os elementos preferenciais para parágrafos de texto de tamanho normal em sites. P é a abreviação de \"parágrafo\".",
|
||||
"Você pode criar um elemento <code>p</code> assim:",
|
||||
"<code><p>Sou uma tag p!</p></code>",
|
||||
"<code><p>Eu sou uma tag p!</p></code>",
|
||||
"<hr>",
|
||||
"Crie um elemento <code>p</code> abaixo de seu elemento <code>h2</code>, e dê a ele o texto \"Hello Paragraph\"."
|
||||
"Crie um elemento <code>p</code> abaixo do seu elemento <code>h2</code>, e dê a ele o texto \"Hello Paragraph\"."
|
||||
]
|
||||
},
|
||||
"ru": {
|
||||
@ -301,13 +323,13 @@
|
||||
]
|
||||
},
|
||||
"pt-br": {
|
||||
"title": "Preencha Espaços com Texto de Espaço Reservado",
|
||||
"title": "Preencha o vazio com texto de exemplo",
|
||||
"description": [
|
||||
"Desenvolvedores web tradicionalmente usam <code>Lorem Ipsum</code> 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 <code>Kitty Ipsum</code>.",
|
||||
"Desenvolvedores web tradicionalmente usam <code>lorem ipsum</code> como texto de exemplo. Os textos 'lorem ipsum' são partes retiradas aleatoriamente de uma passagem famosa escrita por Cícero na Roma Antiga.",
|
||||
"Esses textos têm sido usados como texto de exemplo por tipógrafos desde o século 16, e essa tradição continua na web.",
|
||||
"Bem, 5 séculos é tempo suficiente. Já que estamos construindo um app de fotos de gatos, vamos usar um novo texto chamado de <code>gatinho ipsum</code>.",
|
||||
"<hr>",
|
||||
"Substitua o texto dentro do seu elemento <code>p</code> pelas primeiras palavras deste texto Kitty Ipsum: <code>Kitty ipsum dolor sit amet, shed everywhere shed everywhere stretching attack your ankles chase the red dot, hairball run catnip eat the grass sniff.</code>"
|
||||
"Substitua o texto dentro do seu elemento <code>p</code> com as primeiras palavras desse gatinho ipsum: <code>Kitty ipsum dolor sit amet, shed everywhere shed everywhere stretching attack your ankles chase the red dot, hairball run catnip eat the grass sniff.</code>"
|
||||
]
|
||||
},
|
||||
"ru": {
|
||||
@ -372,11 +394,11 @@
|
||||
"pt-br": {
|
||||
"title": "Descomente o HTML",
|
||||
"description": [
|
||||
"\"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 <code><!--</code> e terminar seu comentário com <code>--></code>.",
|
||||
"Comentar é uma forma de deixar comentários no meio do seu código sem afetar o código em si.",
|
||||
"Comentar também é uma forma conveniente de deixar uma parte do código inativa sem ter que deletá-la completamente.",
|
||||
"Você pode começar um comentário com <code><!--</code> e terminá-lo com <code>--></code>",
|
||||
"<hr>",
|
||||
"Remova o comentário dos elementos <code>h1</code>, <code>h2</code> e <code>p</code>."
|
||||
"Descomente seus elementos <code>h1</code>, <code>h2</code> e <code>p</code>."
|
||||
]
|
||||
},
|
||||
"ru": {
|
||||
@ -439,10 +461,10 @@
|
||||
"pt-br": {
|
||||
"title": "Comente o HTML",
|
||||
"description": [
|
||||
"Lembre-se que para iniciar um comentário você precisa utilizar <code><!--</code>, e para terminar um comentário é necessário usar <code>--></code>.",
|
||||
"Aqui, você deverá terminar o comentário antes que seu elemento <code>h2</code> inicie.",
|
||||
"Lembre-se de que, para começar um comentário, você precisa usar <code><!--</code> e para terminá-lo, você precisa usar <code>--></code>",
|
||||
"Aqui, você vai precisar terminar o comentário antes do começo do seu elemento <code>h2</code>.",
|
||||
"<hr>",
|
||||
"Comente o elemento <code>h1</code> e o elemento <code>p</code>, e deixe o elemento <code>h2</code> sem nenhum comentário."
|
||||
"Comente seus elementos <code>h1</code> e <code>p</code>, mas deixe seu elemento <code>h2</code> descomentado."
|
||||
]
|
||||
},
|
||||
"ru": {
|
||||
@ -498,12 +520,12 @@
|
||||
]
|
||||
},
|
||||
"pt-br": {
|
||||
"title": "Apague Elementos HTML",
|
||||
"title": "Delete elementos HTML",
|
||||
"description": [
|
||||
"Nosso celular não possui muito espaço vertical.",
|
||||
"Vamos eliminar os elementos desnecessários para começar a construir nosso CatPhotoApp.",
|
||||
"Nosso celular não tem muito espaço vertical.",
|
||||
"Vamos remover os elementos desnecessários para podermos começar a construir nosso app de fotos de gatinhos.",
|
||||
"<hr>",
|
||||
"Apague o elemento <code>h1</code> para simplificar o nosso espaço."
|
||||
"Delete seu elemento <code>h1</code> para podermos simplificar nossa tela."
|
||||
]
|
||||
},
|
||||
"ru": {
|
||||
@ -545,7 +567,20 @@
|
||||
],
|
||||
"type": "waypoint",
|
||||
"challengeType": 0,
|
||||
"translations": {}
|
||||
"translations": {
|
||||
"pt-br": {
|
||||
"title": "Introdução aos elementos HTML5",
|
||||
"description": [
|
||||
"O HTML5 introduziu tags mais descritivas, como <code>header</code> (cabeçalho), <code>footer</code> (rodapé), <code>nav</code> (navegação), <code>video</code> (vídeo), <code>article</code> (artigo), <code>section</code> (seção), entre outras.",
|
||||
"Essas tags deixam seu HTML mais fácil de ler e também ajudam na otimização para motores de busca (SEO) e acessibilidade.",
|
||||
"A tag HTML5 <code>main</code> (principal) ajuda mecanismos de busca e outros desenvolvedores a encontrar o conteúdo principal da sua página.",
|
||||
"<strong>Nota</strong><br>Várias das novas tags HTML5 e seus benefícios são discutidos na seção de Acessibilidade aplicada.",
|
||||
"<hr>",
|
||||
"Crie um segundo elemento <code>p</code> depois dos elementos <code>p</code> existentes com o seguinte texto gatinho ipsum: <code>Purr jump eat the grass rip the couch scratched sunbathe, shed everywhere rip the couch sleep in the sink fluffy fur catnip scratched.</code>",
|
||||
"Coloque tags <code>main</code> de abertura e fechamento ao redor dos parágrafos."
|
||||
]
|
||||
}
|
||||
}
|
||||
},
|
||||
{
|
||||
"id": "bad87fee1348bd9aedf08812",
|
||||
@ -607,15 +642,21 @@
|
||||
]
|
||||
},
|
||||
"pt-br": {
|
||||
"title": "Adicione Imagens em sua Página Web",
|
||||
"title": "Adicione imagens à sua página web",
|
||||
"description": [
|
||||
"Você pode adicionar imagens à sua página da internet com o uso do elemento <code>img</code>, e apontar para a URL específica de uma imagem utilizando o atributo <code>src</code>.",
|
||||
"Um exemplo para isso seria:",
|
||||
"<code><img src=\"https://www.your-image-source.com/your-image.jpg\"></code>",
|
||||
"Observe que na maior parte dos casos, os elementos <code>img</code> são de fechamento automático.",
|
||||
"Você pode adicionar imagens ao seu site usando o elemento <code>img</code> e apontando para a URL de uma imagem específica no atributo <code>src</code>.",
|
||||
"Um exemplo disso seria:",
|
||||
"<code><img src=\"https://www.a-fonte-da-sua-imagem.com/sua-imagem.jpg\"></code>",
|
||||
"Note que na maioria dos casos, elementos <code>img</code> possuem auto-fechamento (não precisam de tag de fechamento).",
|
||||
"Todos os elementos <code>img</code> <strong>devem</strong> ter um atributo <code>alt</code>. O texto do atributo <code>alt</code> é usado por leitores de tela para melhorar a acessibilidade e é mostrado no lugar da imagem se ela não puder ser carregada.",
|
||||
"Vamos adicionar um atributo <code>alt</code> ao nosso exemplo acima:",
|
||||
"<code><img src=\"https://www.a-fonte-da-sua-imagem.com/sua-imagem.jpg\" alt=\"Autor numa praia fazendo joinha.\"></code>",
|
||||
"<hr>",
|
||||
"Agora, tente fazer isso com essa imagem:",
|
||||
"<code>https://bit.ly/fcc-relaxing-cat</code>"
|
||||
"Vamos tentar adicionar uma imagem ao nosso site:",
|
||||
"Insira uma tag <code>img</code>, antes do elemento <code>h2</code>.",
|
||||
"Agora coloque essa URL no seu atributo <code>src</code>:",
|
||||
"<code>https://bit.ly/fcc-relaxing-cat</code>",
|
||||
"Finalmente, não esqueça de dar à sua imagem um texto <code>alt</code>."
|
||||
]
|
||||
},
|
||||
"ru": {
|
||||
@ -689,15 +730,15 @@
|
||||
]
|
||||
},
|
||||
"pt-br": {
|
||||
"title": "Ligue Páginas Externas com o Elemento Âncora",
|
||||
"title": "Crie links para páginas externas com elementos âncora",
|
||||
"description": [
|
||||
"Os elementos <code>a</code>, também conhecidos como elementos <code>âncora</code>, são utilizados para ligar conteúdo fora da página atual.",
|
||||
"Aqui está um diagrama de um elemento <code>a</code>. Neste caso, o elemento <code>a</code> é utilizado no meio de um elemento de parágrafo, o que significa que o link externo aparecerá no meio de uma frase.",
|
||||
"<a href=\"//i.imgur.com/hviuZwe.png\" target=\"_blank\" data-lightbox=\"img-enlarge\"> <img class=\"img-responsive\" title=\"Clique para ampliar\" alt=\"diagrama de como as tags de âncora se compõem com o texto, como na próxima linha\" src=\"//i.imgur.com/hviuZwe.png\"></a>",
|
||||
"Veja um exemplo:",
|
||||
"<code><p>Aqui está um <a href=\"https://freeCodeCamp.com\"> link ligado ao freeCodeCamp</a> para que você o siga.</p></code>",
|
||||
"Elementos <code>a</code>, também conhecidos como elementos <code>âncora</code>, são usados para criar links para conteúdo de fora da página atual.",
|
||||
"Aqui está um diagrama de um elemento <code>a</code>. Nesse caso, o elemento <code>a</code> é usado no meio de um elemento de parágrafo, o que significa que esse link vai aparecer no meio de uma frase.",
|
||||
"<a href=\"//i.imgur.com/QSCIiNH.png\" target=\"_blank\" data-lightbox=\"img-enlarge\"><img class=\"img-responsive\" title=\"Clique para ampliar\" alt=\"um diagrama de como tags âncora são compostas com o mesmo texto assim como na linha seguinte\" src=\"//i.imgur.com/QSCIiNH.png\"></a>",
|
||||
"Aqui está um exemplo:",
|
||||
"<code><p>Aqui está um <a href=\"http://freeCodeCamp.com\"> link para o freeCodeCamp.com</a> para você clicar.</p></code>",
|
||||
"<hr>",
|
||||
"Crie um elemento <code>a</code> que esteja ligado ao site <code>http://freecatphotoapp.com</code> e tenha como <code>texto de âncora</code> \"fotos de gatos\"."
|
||||
"Crie um elemento <code>a</code> que vá para <code>http://freecatphotoapp.com</code> e tenha \"cat photos\" como seu <code>texto âncora</code>."
|
||||
]
|
||||
},
|
||||
"ru": {
|
||||
@ -751,7 +792,24 @@
|
||||
],
|
||||
"type": "waypoint",
|
||||
"challengeType": 0,
|
||||
"translations": {}
|
||||
"translations": {
|
||||
"pt-br": {
|
||||
"title": "Crie links para seções internas de uma página com elementos âncora",
|
||||
"description": [
|
||||
"Além de criar links externos, elementos âncora também podem ser usados para criar links internos, que são links que pulam para diferentes seções dentro de uma mesma página.",
|
||||
"O formato é parecido com um link externo, só que, ao invés de uma URL no atributo <code>href</code>, você usa o símbolo <code>#</code> e uma palavra para descrever a seção para a qual você quer pular.",
|
||||
"Aqui está um exemplo:",
|
||||
"<code><a href=\"#contact\">Ir para a seção de contato</a></code>",
|
||||
"Em seguida, você precisa criar no seu HTML um elemento âncora correspondente no lugar em que você quer que seus usuários cheguem quando clicarem no seu link interno. Ao invés de usar o atributo <code>href</code>, você deve usar o atributo <code>name</code>. Aqui está um exemplo:",
|
||||
"<blockquote><h1>Contato</h1><br><a name=\"contact\"></a></blockquote>",
|
||||
"Agora, quando seus usuários clicarem no link \"Ir para a seção de contato\", eles serão levados para a seção da página em que está o elemento âncora que tenha \"contact\" no seu atributo <code>name</code>.",
|
||||
"<hr>",
|
||||
"Mude seu link externo para um link interno trocando seu atributo <code>href</code> para \"#bottom\" e o texto âncora de \"cat photos\" para \"Pular para o final\".",
|
||||
"Então, adicione um elemento âncora com o atributo <code>name</code> como \"bottom\" depois do último parágrafo.",
|
||||
"<strong>Nota</strong><br>Adicionamos mais texto gatinho ipsum para os parágrafos para mostrar melhor o efeito de clicar no link interno para pular para o final da página. Além disso, essa mudança só vai se aplicar para esse desafio. O próximo desafio vai voltar a mostrar seu link externo."
|
||||
]
|
||||
}
|
||||
}
|
||||
},
|
||||
{
|
||||
"id": "bad87fee1348bd9aede08817",
|
||||
@ -815,15 +873,15 @@
|
||||
]
|
||||
},
|
||||
"pt-br": {
|
||||
"title": "Aninhe o Elemento Âncora no Interior de um Parágrafo",
|
||||
"title": "Aninhe um elemento âncora a um parágrafo",
|
||||
"description": [
|
||||
"Outra vez, aqui está um diagrama de um elemento <code>a</code> para você usar como referência.",
|
||||
"<a href=\"//i.imgur.com/hviuZwe.png\" target=\"_blank\" data-lightbox=\"img-enlarge\"><img class=\"img-responsive\" title=\"Clique para ampliar\" alt=\"diagrama de como são as tags de âncora com o texto como na linha seguinte\" src=\"//i.imgur.com/hviuZwe.png\"></a>",
|
||||
"Novamente, aqui está um diagrama de um elemento <code>a</code> para você usar como referência:",
|
||||
"<a href=\"//i.imgur.com/QSCIiNH.png\" target=\"_blank\" data-lightbox=\"img-enlarge\"><img class=\"img-responsive\" title=\"Clique para ampliar\" alt=\"um diagrama de como tags âncora são compostas com o mesmo texto assim como na linha seguinte\" src=\"//i.imgur.com/QSCIiNH.png\"></a>",
|
||||
"Veja um exemplo:",
|
||||
"<code><p>Este é um <a href=\"https://freeCodeCamp.com\"> link ligado ao freeCodeCamp</a> para que você o siga.</p></code>",
|
||||
"<code>Aninhamento</code> significa ter um elemento no interior de outro elemento.",
|
||||
"<code><p>Aqui está um <a href=\"https://freeCodeCamp.com\"> link para o freeCodeCamp</a> para você clicar.</p></code>",
|
||||
"<code>Aninhar</code> significa colocar um elemento dentro de outro.",
|
||||
"<hr>",
|
||||
"Agora, aninhe o elemento <code>a</code> existente dentro de um novo elemento <code>p</code> 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."
|
||||
"Agora, aninhe seu elemento <code>a</code> existente a um novo elemento <code>p</code> (logo em seguida do elemento <code>main</code> existente), de forma que o parágrafo ao redor tenha o texto \"View more cat photos\", mas apenas a parte \"cat photos\" seja um link e o resto seja apenas texto."
|
||||
]
|
||||
},
|
||||
"ru": {
|
||||
@ -886,12 +944,12 @@
|
||||
]
|
||||
},
|
||||
"pt-br": {
|
||||
"title": "Crie Links Inativos com o Símbolo Cerquilha",
|
||||
"title": "Crie links mortos com hashtags",
|
||||
"description": [
|
||||
"As vezes você pode querer adicionar elementos <code>a</code> 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 <code>jQuery</code>, o que vamos aprender mais adiante.",
|
||||
"Às vezes você vai querer adicionar elementos <code>a</code> ao seu site antes de saber para onde eles vão linkar.",
|
||||
"Isso também é útil para quando você está mudando o comportamento de um link usando <code>jQuery</code>, que nós vamos aprender mais tarde.",
|
||||
"<hr>",
|
||||
"Substitua o atributo <code>href</code> de seu elemento <code>a</code> por um <code>#</code>, também conhecido como símbolo de <em>hash</em> ou hashtag. Isso o transformará em um link inativo."
|
||||
"O valor atual do atributo <code>href</code> é \"http://freecatphotoapp.com\". Substitua esse valor por <code>#</code>, também conhecido como hashtag, para criar um link morto."
|
||||
]
|
||||
},
|
||||
"ru": {
|
||||
@ -959,13 +1017,15 @@
|
||||
]
|
||||
},
|
||||
"pt-br": {
|
||||
"title": "Transforme uma Imagem em um Link",
|
||||
"title": "Transforme uma imagem em um link",
|
||||
"description": [
|
||||
"Você pode transformar elementos em links ao aninhá-los com um elemento <code>a</code>.",
|
||||
"Você pode transformar elementos em links aninhando-os a um elemento <code>a</code>.",
|
||||
"Aninhe sua imagem a um elemento <code>a</code>. Aqui está um exemplo:",
|
||||
"<code><a href=\"#\"><img src=\"https://bit.ly/fcc-running-cats\" alt=\"Três gatinhos correndo em direção à câmera.\"></a></code>",
|
||||
"Lembre-se de usar <code>#</code> no atributo <code>href</code> do seu elemento <code>a</code> para que o link esteja morto.",
|
||||
"<hr>",
|
||||
"Aninhe sua imagem dentro de um elemento <code>a</code>. Temos aqui um exemplo.",
|
||||
"<code><a href=\"#\"><img src=\"https://bit.ly/fcc-running-cats\"/></a></code>",
|
||||
"Lembre de usar <code>#</code> como atributo <code>href</code> de seu elemento <code>a</code> para tornar o link inativo."
|
||||
"Coloque a imagem existente dentro de um elemento âncora.",
|
||||
"Depois de fazer isso, coloque o cursor do mouse sobre sua imagem. O seu cursor normal deve virar um cursor de clique. A foto agora é um link."
|
||||
]
|
||||
},
|
||||
"ru": {
|
||||
@ -1038,18 +1098,15 @@
|
||||
]
|
||||
},
|
||||
"pt-br": {
|
||||
"title": "Crie uma Lista Não Ordenada com Marcadores",
|
||||
"title": "Crie uma lista não ordenada com marcadores",
|
||||
"description": [
|
||||
"O HTML possui um elemento especial para a criação de <code>listas não ordenadas</code>, ou listas com marcadores.",
|
||||
"As listas não ordenadas iniciam com um elemento <code><ul></code>. Logo após, possuem uma série de elementos <code><li>.</code>",
|
||||
"O HTML tem um elemento especial para criar <code>listas não ordenadas</code>, ou listas com marcadores.",
|
||||
"Listas não ordenadas começam com um elemento <code>ul</code> e contêm diversos elementos <code>li</code> aninhados a ele.",
|
||||
"Por exemplo: ",
|
||||
"<code><ul></code>",
|
||||
" <code><li>leite</li></code>",
|
||||
" <code><li>queijo</li></code>",
|
||||
"<code></ul></code>",
|
||||
"Isso criará uma lista com marcadores que tem como elementos \"leite\" e \"queijo\".",
|
||||
"<blockquote><ul><br> <li>leite</li><br> <li>queijo</li><br></ul></blockquote>",
|
||||
"criaria uma lista com marcadores contendo \"leite\" e \"queijo\".",
|
||||
"<hr>",
|
||||
"Apague os dois últimos elementos <code>p</code> e no final da página crie uma lista não ordenada com três coisas que os gatos adoram."
|
||||
"Remova os dois últimos elementos <code>p</code> e crie no final da página uma lista não ordenada de três coisas que gatos adoram."
|
||||
]
|
||||
},
|
||||
"ru": {
|
||||
@ -1132,18 +1189,15 @@
|
||||
]
|
||||
},
|
||||
"pt-br": {
|
||||
"title": "Crie uma Lista Ordenada",
|
||||
"title": "Crie uma lista ordenada",
|
||||
"description": [
|
||||
"O HTML possui um elemento especial para a criação de <code>listas ordenadas</code>, ou listas numeradas.",
|
||||
"As listas ordenadas iniciam com um elemento <code><ol></code>. Logo após, contém uma série de elementos <code><li>.</code>",
|
||||
"O HTML tem um elemento especial para criar <code>listas ordenadas</code>, ou listas numeradas.",
|
||||
"Listas ordenadas começam com um elemento <code>ol</code> e contêm diversos elementos <code>li</code> aninhados a ele.",
|
||||
"Por exemplo:",
|
||||
"<code><ol></code>",
|
||||
" <code><li>Garfield</li></code>",
|
||||
" <code><li>Sylvester</li></code>",
|
||||
"<code></ol></code>",
|
||||
"Isso criará uma lista numerada com \"Garfield\" e \"Sylvester\".",
|
||||
"<blockquote><ol><br> <li>Garfield</li><br> <li>Frajola</li><br></ol></blockquote>",
|
||||
"criaria uma lista numerada contendo \"Garfield\" e \"Frajola\".",
|
||||
"<hr>",
|
||||
"Crie uma lista ordenada com as três coisas que os gatos mais odeiam."
|
||||
"Crie uma lista ordenada com as 3 coisas que os gatos mais odeiam."
|
||||
]
|
||||
},
|
||||
"ru": {
|
||||
@ -1226,15 +1280,15 @@
|
||||
]
|
||||
},
|
||||
"pt-br": {
|
||||
"title": "Crie um Campo de Texto",
|
||||
"title": "Crie um campo de texto",
|
||||
"description": [
|
||||
"Agora vamos criar um formulário web.",
|
||||
"Os campos de texto são uma forma conveniente de obter uma resposta do usuário.",
|
||||
"Campos de texto são uma forma conveniente de obter dados do seu usuário.",
|
||||
"Você pode criar um assim:",
|
||||
"<code><input type=\"text\"></code>",
|
||||
"Note que os elementos <code>input</code> são de fechamento automático.",
|
||||
"Note que elementos <code>input</code> têm auto-fechamento.",
|
||||
"<hr>",
|
||||
"Crie um elemento <code>input</code> de tipo <code>text</code> abaixo de suas listas."
|
||||
"Crie um elemento <code>input</code> de tipo <code>text</code> abaixo das suas listas."
|
||||
]
|
||||
},
|
||||
"ru": {
|
||||
@ -1312,13 +1366,13 @@
|
||||
]
|
||||
},
|
||||
"pt-br": {
|
||||
"title": "Adicione Texto Indicativo a um Campo de Texto",
|
||||
"title": "Adicione um placeholder a um campo de texto",
|
||||
"description": [
|
||||
"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:",
|
||||
"<code><input type=\"text\" placeholder=\"isso é um texto indicativo\"></code>",
|
||||
"O placeholder é o texto que aparece no seu <code>input</code> quando ele está vazio.",
|
||||
"Você pode adicionar um placeholder ao seu campo de texto assim:",
|
||||
"<code><input type=\"text\" placeholder=\"esse é o placeholder\"></code>",
|
||||
"<hr>",
|
||||
"Estabeleça o valor do <code>texto indicativo</code> do seu campo de texto como \"cat photo URL\"."
|
||||
"Coloque o placeholder \"cat photo URL\" no seu <code>input</code> de texto."
|
||||
]
|
||||
},
|
||||
"ru": {
|
||||
@ -1394,13 +1448,13 @@
|
||||
]
|
||||
},
|
||||
"pt-br": {
|
||||
"title": "Crie um Elemento de Formulário",
|
||||
"title": "Crie um elemento de formulário",
|
||||
"description": [
|
||||
"É 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 <code>form</code>.",
|
||||
"Você pode construir formulários web que realmente enviam dados para um servidor usando nada mais que HTML puro. Para isso, você precisa especificar uma URL no atributo <code>action</code> do seu elemento <code>form</code>.",
|
||||
"Por exemplo:",
|
||||
"<code><form action=\"/url-para-onde-você-quer-enviar-os-dados-do-formulário\"></form></code>",
|
||||
"<code><form action=\"/url-para-onde-voce-quer-enviar-os-dados\"></form></code>",
|
||||
"<hr>",
|
||||
"Aninhe seu campo de texto em um elemento <code>form</code>. Adicione o atributo <code>action=\"/submit-cat-photo\"</code> para este elemento de formulário."
|
||||
"Aninhe o seu campo de texto a um elemento <code>form</code>. Adicione o atributo <code>action=\"/submit-cat-photo\"</code> a esse <code>form</code>."
|
||||
]
|
||||
},
|
||||
"ru": {
|
||||
@ -1479,13 +1533,13 @@
|
||||
]
|
||||
},
|
||||
"pt-br": {
|
||||
"title": "Inclua um Botão de Enviar a um Formulário",
|
||||
"title": "Adicione um botão de enviar a um formulário",
|
||||
"description": [
|
||||
"Vamos inserir um elemento <code>submit</code> ao seu formulário. Ao clicar neste botão, os dados inseridos serão enviados para a URL especificada no atributo <code>action</code> do formulário.",
|
||||
"Aqui está um exemplo de um botão de enviar:",
|
||||
"<code><button type=\" submit\">este botão enviará o formulário</button></code>",
|
||||
"Vamos adicionar um botão de enviar (<code>submit</code>) ao seu formulário. Quando seu usuário clicar nesse botão, os dados do formulário serão enviados para a URL que você especificou no atributo <code>action</code> do seu formulário.",
|
||||
"Aqui está um botão de exemplo:",
|
||||
"<code><button type=\"submit\">esse botão envia o formulário</button></code>",
|
||||
"<hr>",
|
||||
"Adicione um botão de enviar ao seu elemento <code>form</code> com o tipo <code>submit</code> e com o texto \"Submit\"."
|
||||
"Adicione um botão de enviar ao seu elemento <code>form</code> com tipo <code>submit</code> e com texto \"Submit\"."
|
||||
]
|
||||
},
|
||||
"ru": {
|
||||
@ -1565,13 +1619,14 @@
|
||||
]
|
||||
},
|
||||
"pt-br": {
|
||||
"title": "Use HTML5 para Especificar Campos Obrigatórios",
|
||||
"title": "Use HTML5 para tornar campos obrigatórios",
|
||||
"description": [
|
||||
"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 <code>required</code> dentro de seu elemento <code>input</code> assim: <code><input type=\"text\" required></code>",
|
||||
"Você pode tornar obrigatórios campos específicos do seu formulário, assim seu usuário não conseguirá enviar os dados sem preencher esses campos.",
|
||||
"Por exemplo, se você quiser que um campo de texto seja obrigatório, basta adicionar a palavra <code>required</code> ao seu elemento <code>input</code>, assim: <code><input type=\"text\" required></code>",
|
||||
"<hr>",
|
||||
"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?"
|
||||
"Torne seu campo de texto obrigatório, de forma que seu usuário não consiga enviar o formulário sem preencher esse campo.",
|
||||
"Então, tente enviar o formulário sem preencher esse campo. Viu como o formulário HTML5 avisa que o campo é obrigatório?",
|
||||
"<strong>Nota</strong><br>Esse campo não funciona no Safari."
|
||||
]
|
||||
},
|
||||
"ru": {
|
||||
@ -1664,16 +1719,16 @@
|
||||
]
|
||||
},
|
||||
"pt-br": {
|
||||
"title": "Crie um Conjunto de Botões de Seleção",
|
||||
"title": "Crie um conjunto de botões de opção",
|
||||
"description": [
|
||||
"É 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 <code>input</code>",
|
||||
"Cada um dos botões de seleção deve estar contido dentro de seu próprio elemento <code>label</code>.",
|
||||
"Todos os botões de seleção relacionados devem ter o mesmo atributo <code>name</code>.",
|
||||
"Temos aqui um exemplo de um botão de seleção/rádio:",
|
||||
"Você pode usar <code>botões de opção</code> (botões de rádio) para perguntas em que você quer dar opções ao usuário, mas quer que ele escolha apenas uma.",
|
||||
"Botões de opção são um tipo de <code>input</code>.",
|
||||
"Cada um dos botões de opção deve ser aninhado ao seu elemento <code>label</code>.",
|
||||
"Todos os botões de opção relacionados devem ter o mesmo atributo <code>name</code>.",
|
||||
"Aqui está um exemplo de um botão de opção:",
|
||||
"<code><label><input type=\"radio\" name=\"indoor-outdoor\"> Indoor</label></code>",
|
||||
"<hr>",
|
||||
"Adicione um par de botões de seleção ao seu formulário. Um deles deve ter a opção <code>indoor</code> enquanto o outro deve ter a opção <code>outdoor</code>."
|
||||
"Adicione um par de botões de opção ao seu formulário. Um deles deve ser a opção <code>indoor</code> e o outro deve ser a opção <code>outdoor</code>. Ambos devem ter o atributo <code>name</code> de <code>indoor-outdoor</code>."
|
||||
]
|
||||
},
|
||||
"ru": {
|
||||
@ -1767,16 +1822,16 @@
|
||||
]
|
||||
},
|
||||
"pt-br": {
|
||||
"title": "Crie um Conjunto de Caixas de Seleção",
|
||||
"title": "Crie um conjunto de caixas de seleção",
|
||||
"description": [
|
||||
"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 <code>input</code>",
|
||||
"Cada uma de suas caixas de seleção deve ser aninhada dentro do próprio elemento <code>label</code>.",
|
||||
"Formulários geralmente usam <code>caixas de seleção</code> (checkboxes) para perguntas que podem ter mais de uma resposta.",
|
||||
"Caixas de seleção são um tipo de <code>input</code>.",
|
||||
"Cada uma das suas caixas de seleção deve estar aninhada a seu próprio elemento <code>label</code>.",
|
||||
"Todas as caixas de seleção relacionadas devem ter o mesmo atributo <code>name</code>.",
|
||||
"Veja aqui um exemplo de uma caixa de verificação:",
|
||||
"<code><label><input type=\"checkbox\" name=\"personality\"> Carinhoso</label></code>",
|
||||
"Aqui está um exemplo de uma caixa de seleção: ",
|
||||
"<code><label><input type=\"checkbox\" name=\"personality\"> Amável</label></code>",
|
||||
"<hr>",
|
||||
"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 <code>label</code>. As três devem compartilhar o atributo <code>name</code>."
|
||||
"Adicione ao seu formulário um conjunto de três caixas de seleção. Cada caixa deve estar aninhada a seu próprio elemento <code>label</code>. Todas elas devem ter o mesmo atributo <code>name</code> de <code>personality</code>."
|
||||
]
|
||||
},
|
||||
"ru": {
|
||||
@ -1862,13 +1917,13 @@
|
||||
]
|
||||
},
|
||||
"pt-br": {
|
||||
"title": "Deixe Botões e Caixas de Seleção Ativados por Padrão",
|
||||
"title": "Faça botões de opção e caixas de seleção estarem marcados por padrão",
|
||||
"description": [
|
||||
"É possível deixar um botão ou caixa de seleção ativado por padrão ao utilizar o atributo <code>checked</code>.",
|
||||
"Para isso, basta você acrescentar a palavra \"checked\" no interior de um elemento de entrada. Por exemplo:",
|
||||
"<code><input type=\"radio\" name=\"nome-de-teste\" checked></code>",
|
||||
"Você pode fazer uma caixa de seleção ou botão de opção estar marcado por padrão usando o atributo <code>checked</code>.",
|
||||
"Para fazer isso, apenas insira a palavra \"checked\" em um elemento <code>input</code>. Por exemplo:",
|
||||
"<code><input type=\"radio\" name=\"test-name\" checked></code>",
|
||||
"<hr>",
|
||||
"Estabeleça como marcados por padrão o primeiro dos seus <code>botões de seleção/rádio</code> e a primeira <code>caixa de seleção</code>."
|
||||
"Faça o primeiro dos seus <code>botões de opção</code> e a primeira das suas <code>caixas de seleção</code> estarem ambos marcados por padrão."
|
||||
]
|
||||
},
|
||||
"ru": {
|
||||
@ -1957,14 +2012,14 @@
|
||||
]
|
||||
},
|
||||
"pt-br": {
|
||||
"title": "Aninhe Muitos Elementos Dentro de um só Elemento div",
|
||||
"title": "Aninhe diversos elementos a um único elemento div",
|
||||
"description": [
|
||||
"O elemento <code>div</code>, também conhecido como elemento de divisão, é um contentor de propósito geral para outros elementos.",
|
||||
"O elemento <code>div</code> é provavelmente o elemento HTML mais utilizado.",
|
||||
"Da mesma forma que qualquer outro elemento sem fechamento automático, você deve abrir uma tag <code>div</code> com <code><div></code> e fechá-la em outra linha com <code></div></code>.",
|
||||
"O elemento <code>div</code>, também conhecido como elemento de divisão, é um contâiner de propósito geral para outros elementos.",
|
||||
"O elemento <code>div</code> provavelmente é o elemento HTML mais usado de todos.",
|
||||
"Da mesma forma que qualquer outro elemento que não tem auto-fechamento, você pode abrir um elemento <code>div</code> com <code><div></code> e fechá-lo em outra linha com <code></div></code>.",
|
||||
"<hr>",
|
||||
"Tente colocar sua tag de abertura <code>div</code> acima do elemento <code>p</code> \"Things cat love\", e sua tag de fechamento de <code>div</code> depois da tag de fechamento do <code>ol</code>, para que cada uma de suas listas esteja dentro de um <code>div</code>.",
|
||||
"Aninhe suas listas \"Things cats love\" e \"Things cats hate\" no interior de um único elemento <code>div</code>."
|
||||
"Tente colocar sua tag <code>div</code> de abertura acima do seu elemento <code>p</code> \"Things cats love\" e sua tag <code>div</code> de fechamento depois da sua tag <code>ol</code> de fechamento, de forma que ambas as suas listas estejam dentro da mesma <code>div</code>.",
|
||||
"Aninhe as listas \"Things cats love\" e \"Things cats hate\" dentro do mesmo elemento <code>div</code>."
|
||||
]
|
||||
},
|
||||
"ru": {
|
||||
@ -2006,7 +2061,22 @@
|
||||
],
|
||||
"type": "waypoint",
|
||||
"challengeType": 0,
|
||||
"translations": {}
|
||||
"translations": {
|
||||
"pt-br": {
|
||||
"title": "Declare o DOCTYPE de um documento HTML",
|
||||
"description": [
|
||||
"Os desafios até agora trataram de tags HTML específicas e seus usos. No entanto, há alguns elementos que determinam a estrutura geral da sua página e devem ser incluídos em todos os documentos HTML.",
|
||||
"No começo do seu documento, você precisa dizer ao navegador qual versão do HTML sua página está usando. O HTML é uma linguagem em evolução e é atualizado regularmente. A maioria dos navegadores mais populares suporta a última especificação, que é o HTML5. No entanto, páginas mais antigas podem estar usando versões anteriores da linguagem.",
|
||||
"Você pode dar ao navegador essa informação adicionando a tag <code><!DOCTYPE ...></code> na primeira linha, onde a parte \"<code>...</code>\" é a versão do HTML. Para o HTML5, o código é <code><!DOCTYPE html></code>.",
|
||||
"O <code>!</code> e o <code>DOCTYPE</code> todo em maiúsculas são importantes, especialmente para navegadores mais velhos. O <code>html</code> não é sensível a maiúsculas e minúsculas.",
|
||||
"Em seguida, o resto do seu código HTML deve estar delimitado por tags <code>html</code>. A tag <code><html></code> vai diretamente abaixo da linha <code><!DOCTYPE html></code>, e a tag <code></html></code> vai no final da página.",
|
||||
"Aqui está um exemplo da estrutura de uma página:",
|
||||
"<blockquote><!DOCTYPE html><br><html><br> <!-- Seu código HTML vai aqui --><br></html></blockquote>",
|
||||
"<hr>",
|
||||
"Adicione uma tag <code>DOCTYPE</code> para HTML5 no topo do documento HTML em branco no editor de texto. Abaixo dela, adicione tags <code>html</code> de abertura e fechamento, ao redor de um elemento <code>h1</code>. O texto do <code>h1</code> pode ser qualquer um."
|
||||
]
|
||||
}
|
||||
}
|
||||
},
|
||||
{
|
||||
"id": "587d78aa367417b2b2512aec",
|
||||
@ -2039,7 +2109,19 @@
|
||||
],
|
||||
"type": "waypoint",
|
||||
"challengeType": 0,
|
||||
"translations": {},
|
||||
"translations": {
|
||||
"pt-br": {
|
||||
"title": "Defina cabeça e corpo de um documento HTML",
|
||||
"description": [
|
||||
"Você pode adicionar mais um nível de organização ao seu documento HTML dentro da tag <code>html</code> com os elementos <code>head</code> (cabeça) e <code>body</code> (corpo). Qualquer código com informações sobre a sua página deve estar dentro da tag <code>head</code>. Assim, qualquer código com o conteúdo da sua página (o que aparece para o usuário) deve estar dentro da tag <code>body</code>.",
|
||||
"Elementos de metadados, como <code>link</code>, <code>meta</code>, <code>title</code> e <code>style</code>, tipicamente aparecem dentro do elemento <code>head</code>.",
|
||||
"Aqui está um exemplo da estrutura de uma página:",
|
||||
"<blockquote><!DOCTYPE html><br><html><br> <head><br> <!-- elementos de metadados --><br> </head><br> <body><br> <!-- conteúdo da página --><br> </body><br></html></blockquote>",
|
||||
"<hr>",
|
||||
"Edite o código para que tenha uma <code>head</code> e um <code>body</code>. O elemento <code>head</code> deve incluir apenas o <code>title</code>, e o elemento <code>body</code> deve conter apenas o <code>h1</code> e o <code>p</code>."
|
||||
]
|
||||
}
|
||||
},
|
||||
"ru": {}
|
||||
}
|
||||
]
|
||||
|
||||
Reference in New Issue
Block a user