feat: add Spanish and language parser
This commit is contained in:
Beau Carnes
committed by
mrugesh mohapatra
mrugesh mohapatra
parent
c2a45b58be
commit
e3f9dc4b86
@@ -1,23 +1,17 @@
|
||||
---
|
||||
id: bad87fee1348bd9aedd08830
|
||||
title: Add a Submit Button to a Form
|
||||
localeTitle: Agregar un botón de envío a un formulario
|
||||
challengeType: 0
|
||||
guideUrl: 'https://spanish.freecodecamp.org/guide/certificates/add-a-submit-button-to-a-form'
|
||||
videoUrl: ''
|
||||
localeTitle: Agregar un botón de envío a un formulario
|
||||
---
|
||||
|
||||
## Description
|
||||
<section id='description'>
|
||||
Agreguemos un botón de <code>submit</code> a su formulario. Al hacer clic en este botón, los datos de su formulario se enviarán a la URL que especificó con el atributo de <code>action</code> su formulario.
|
||||
Aquí hay un ejemplo de botón de envío:
|
||||
<code><button type="submit">this button submits the form</button></code>
|
||||
</section>
|
||||
<section id="description"> Agreguemos un botón de <code>submit</code> a su formulario. Al hacer clic en este botón, los datos de su formulario se enviarán a la URL que especificó con el atributo de <code>action</code> su formulario. Aquí hay un ejemplo de botón de envío: <code><button type="submit">this button submits the form</button></code> </section>
|
||||
|
||||
## Instructions
|
||||
<section id='instructions'>
|
||||
Agregue un botón como el último elemento de su elemento de <code>form</code> con un tipo de <code>submit</code> y "Enviar" como texto.
|
||||
</section>
|
||||
<section id="instructions"> Agregue un botón como el último elemento de su elemento de <code>form</code> con un tipo de <code>submit</code> y "Enviar" como texto. </section>
|
||||
|
||||
## Tests
|
||||
<section id='tests'>
|
||||
@@ -26,11 +20,11 @@ Agregue un botón como el último elemento de su elemento de <code>form</code> c
|
||||
tests:
|
||||
- text: Su formulario debe tener un botón en su interior.
|
||||
testString: 'assert($("form").children("button").length > 0, "Your form should have a button inside it.");'
|
||||
- text: El botón de envío debe tener el atributo <code class = "notranslate"> type </code> establecido en <code class = "notranslate"> submit </code>.
|
||||
- text: Su botón de envío debe tener el <code>type</code> atributo establecido para <code>submit</code> .
|
||||
testString: 'assert($("button").attr("type") === "submit", "Your submit button should have the attribute <code>type</code> set to <code>submit</code>.");'
|
||||
- text: Su botón de enviar solo debe tener el texto "Enviar."
|
||||
- text: Su botón de enviar solo debe tener el texto "Enviar".
|
||||
testString: 'assert($("button").text().match(/^\s*submit\s*$/gi), "Your submit button should only have the text "Submit".");'
|
||||
- text: Asegúrese de que su elemento <code class = "notranslate"> button </code> tenga una etiqueta de cierre.
|
||||
- text: Asegúrese de que el elemento de su <code>button</code> tenga una etiqueta de cierre.
|
||||
testString: 'assert(code.match(/<\/button>/g) && code.match(/<button/g) && code.match(/<\/button>/g).length === code.match(/<button/g).length, "Make sure your <code>button</code> element has a closing tag.");'
|
||||
|
||||
```
|
||||
@@ -65,6 +59,7 @@ tests:
|
||||
<input type="text" placeholder="cat photo URL">
|
||||
</form>
|
||||
</main>
|
||||
|
||||
```
|
||||
|
||||
</div>
|
||||
|
||||
@@ -1,33 +1,17 @@
|
||||
---
|
||||
id: bad87fee1348bd9aedf08812
|
||||
title: Add Images to Your Website
|
||||
localeTitle: Añadir imágenes a su sitio web
|
||||
challengeType: 0
|
||||
guideUrl: 'https://spanish.freecodecamp.org/guide/certificates/add-images-to-your-website'
|
||||
videoUrl: ''
|
||||
localeTitle: Añadir imágenes a su sitio web
|
||||
---
|
||||
|
||||
## Description
|
||||
<section id='description'>
|
||||
Puede agregar imágenes a su sitio web usando el elemento <code>img</code> , y apuntar a la URL de una imagen específica usando el atributo <code>src</code> .
|
||||
Un ejemplo de esto sería:
|
||||
<code><img src="https://www.your-image-source.com/your-image.jpg"></code>
|
||||
Tenga en cuenta que los elementos <code>img</code> se cierran automáticamente.
|
||||
Todos los elementos <code>img</code> <strong>deben</strong> tener un atributo <code>alt</code> . El texto dentro de un atributo <code>alt</code> se usa para que los lectores de pantalla mejoren la accesibilidad y se muestra si la imagen no se carga.
|
||||
Nota: Si la imagen es puramente decorativa, usar un atributo <code>alt</code> vacío es una buena práctica.
|
||||
Idealmente, el atributo <code>alt</code> no debe contener caracteres especiales a menos que sea necesario.
|
||||
Vamos a añadir un <code>alt</code> atributo a nuestra <code>img</code> ejemplo anterior:
|
||||
<code><img src="https://www.your-image-source.com/your-image.jpg" alt="Author standing on a beach with two thumbs up."></code>
|
||||
</section>
|
||||
<section id="description"> Puede agregar imágenes a su sitio web usando el elemento <code>img</code> y apuntar a la URL de una imagen específica usando el atributo <code>src</code> . Un ejemplo de esto sería: <code><img src="https://www.your-image-source.com/your-image.jpg"></code> Tenga en cuenta que los elementos <code>img</code> se cierran automáticamente. Todos los elementos <code>img</code> <strong>deben</strong> tener un atributo <code>alt</code> . El texto dentro de un atributo <code>alt</code> se usa para que los lectores de pantalla mejoren la accesibilidad y se muestra si la imagen no se carga. Nota: si la imagen es puramente decorativa, usar un atributo <code>alt</code> vacío es una buena práctica. Idealmente, el atributo <code>alt</code> no debe contener caracteres especiales a menos que sea necesario. Agreguemos un atributo <code>alt</code> a nuestro ejemplo de <code>img</code> anterior: <code><img src="https://www.your-image-source.com/your-image.jpg" alt="Author standing on a beach with two thumbs up."></code> </section>
|
||||
|
||||
## Instructions
|
||||
<section id='instructions'>
|
||||
Intentemos agregar una imagen a nuestro sitio web:
|
||||
Inserte una etiqueta <code>img</code> , antes del elemento <code>h2</code> .
|
||||
Ahora establezca el atributo <code>src</code> para que apunte a esta url:
|
||||
<code>https://bit.ly/fcc-relaxing-cat</code>
|
||||
Finalmente, no se olvide de darle a su imagen un texto <code>alt</code> .
|
||||
</section>
|
||||
<section id="instructions"> Intentemos agregar una imagen a nuestro sitio web: inserte una etiqueta <code>img</code> , antes del elemento <code>h2</code> . Ahora establezca el atributo <code>src</code> para que apunte a esta url: <code>https://bit.ly/fcc-relaxing-cat</code> Finalmente, no se olvide de darle a su imagen un texto <code>alt</code> . </section>
|
||||
|
||||
## Tests
|
||||
<section id='tests'>
|
||||
@@ -36,9 +20,9 @@ Finalmente, no se olvide de darle a su imagen un texto <code>alt</code> .
|
||||
tests:
|
||||
- text: Tu página debe tener un elemento de imagen.
|
||||
testString: 'assert($("img").length > 0, "Your page should have an image element.");'
|
||||
- text: Su imagen debe tener un atributo <code clase = "notranslate"> src </code> que apunta a la imagen del gatito.
|
||||
- text: Tu imagen debe tener un atributo <code>src</code> que apunte a la imagen del gatito.
|
||||
testString: 'assert(new RegExp("\/\/bit.ly\/fcc-relaxing-cat|\/\/s3.amazonaws.com\/freecodecamp\/relaxing-cat.jpg", "gi").test($("img").attr("src")), "Your image should have a <code>src</code> attribute that points to the kitten image.");'
|
||||
- text: Su elemento de imagen <strong> debe </strong> tener un atributo <code clase = "notranslate"> alt </code>.
|
||||
- text: Su elemento de imagen <strong>debe</strong> tener un atributo <code>alt</code> .
|
||||
testString: 'assert(code.match(/alt\s*?=\s*?(\"|\").*(\"|\")/), "Your image element <strong>must</strong> have an <code>alt</code> attribute.");'
|
||||
|
||||
```
|
||||
@@ -58,6 +42,7 @@ tests:
|
||||
<p>Kitty ipsum dolor sit amet, shed everywhere shed everywhere stretching attack your ankles chase the red dot, hairball run catnip eat the grass sniff.</p>
|
||||
<p>Purr jump eat the grass rip the couch scratched sunbathe, shed everywhere rip the couch sleep in the sink fluffy fur catnip scratched.</p>
|
||||
</main>
|
||||
|
||||
```
|
||||
|
||||
</div>
|
||||
|
||||
@@ -1,23 +1,17 @@
|
||||
---
|
||||
id: bad87fee1348bd9aedf08830
|
||||
title: Add Placeholder Text to a Text Field
|
||||
localeTitle: Añadir texto de marcador de posición a un campo de texto
|
||||
challengeType: 0
|
||||
guideUrl: 'https://spanish.freecodecamp.org/guide/certificates/add-placeholder-text-to-a-text-field'
|
||||
videoUrl: ''
|
||||
localeTitle: Añadir texto de marcador de posición a un campo de texto
|
||||
---
|
||||
|
||||
## Description
|
||||
<section id='description'>
|
||||
texto de marcador de posición es lo que se muestra en su elemento de <code>input</code> antes de que su usuario haya ingresado algo.
|
||||
Puede crear texto de marcador de posición de la siguiente manera:
|
||||
<code><input type="text" placeholder="this is placeholder text"></code>
|
||||
</section>
|
||||
<section id="description"> El texto de marcador de posición es lo que se muestra en su elemento de <code>input</code> antes de que su usuario haya ingresado algo. Puede crear texto de marcador de posición de la siguiente forma: <code><input type="text" placeholder="this is placeholder text"></code> </section>
|
||||
|
||||
## Instructions
|
||||
<section id='instructions'>
|
||||
Establezca el valor del <code>placeholder</code> de <code>placeholder</code> de su <code>input</code> texto en "URL de foto de gato".
|
||||
</section>
|
||||
<section id="instructions"> Establezca el valor de <code>placeholder</code> de <code>placeholder</code> de su <code>input</code> texto en "URL de foto de gato". </section>
|
||||
|
||||
## Tests
|
||||
<section id='tests'>
|
||||
@@ -26,7 +20,7 @@ Establezca el valor del <code>placeholder</code> de <code>placeholder</code> de
|
||||
tests:
|
||||
- text: Agregue un atributo de <code>placeholder</code> al elemento de <code>input</code> texto existente.
|
||||
testString: 'assert($("input[placeholder]").length > 0, "Add a <code>placeholder</code> attribute to the existing text <code>input</code> element.");'
|
||||
- text: Establezca el valor de su atributo de marcador de posición en "URL de foto de gato".
|
||||
- text: Establezca el valor de su atributo de marcador de posición en "URL de foto de gato".
|
||||
testString: 'assert($("input") && $("input").attr("placeholder") && $("input").attr("placeholder").match(/cat\s+photo\s+URL/gi), "Set the value of your placeholder attribute to "cat photo URL".");'
|
||||
- text: El elemento de <code>input</code> terminado debe tener una sintaxis válida.
|
||||
testString: 'assert($("input[type=text]").length > 0 && code.match(/<input((\s+\w+(\s*=\s*(?:".*?"|".*?"|[\^"">\s]+))?)+\s*|\s*)\/?>/gi), "The finished <code>input</code> element should have valid syntax.");'
|
||||
@@ -61,6 +55,7 @@ tests:
|
||||
</ol>
|
||||
<input type="text">
|
||||
</main>
|
||||
|
||||
```
|
||||
|
||||
</div>
|
||||
|
||||
@@ -1,22 +1,16 @@
|
||||
---
|
||||
id: bad87fee1348bd9aedd08835
|
||||
title: Check Radio Buttons and Checkboxes by Default
|
||||
localeTitle: Comprobar botones de radio y casillas de verificación por defecto
|
||||
challengeType: 0
|
||||
videoUrl: ''
|
||||
localeTitle: Comprobar botones de radio y casillas de verificación por defecto
|
||||
---
|
||||
|
||||
## Description
|
||||
<section id='description'>
|
||||
Puede configurar una casilla de verificación o un botón de opción para que se marque de forma predeterminada utilizando el atributo <code>checked</code> .
|
||||
Para hacer esto, simplemente agregue la palabra "marcado" al interior de un elemento de entrada. Por ejemplo:
|
||||
<code><input type="radio" name="test-name" checked></code>
|
||||
</section>
|
||||
<section id="description"> Puede configurar una casilla de verificación o un botón de opción para que se marque de forma predeterminada utilizando el atributo <code>checked</code> . Para hacer esto, simplemente agregue la palabra "marcado" al interior de un elemento de entrada. Por ejemplo: <code><input type="radio" name="test-name" checked></code> </section>
|
||||
|
||||
## Instructions
|
||||
<section id='instructions'>
|
||||
Establezca el primero de sus <code>radio buttons</code> y el primero de sus <code>checkboxes</code> de <code>checkboxes</code> para que ambos estén marcados de forma predeterminada.
|
||||
</section>
|
||||
<section id="instructions"> Configure el primero de sus <code>radio buttons</code> y el primero de sus <code>checkboxes</code> de <code>checkboxes</code> para que ambos estén marcados de forma predeterminada. </section>
|
||||
|
||||
## Tests
|
||||
<section id='tests'>
|
||||
@@ -66,6 +60,7 @@ tests:
|
||||
<button type="submit">Submit</button>
|
||||
</form>
|
||||
</main>
|
||||
|
||||
```
|
||||
|
||||
</div>
|
||||
|
||||
@@ -1,21 +1,16 @@
|
||||
---
|
||||
id: bad87fee1348bd9aedf08804
|
||||
title: Comment out HTML
|
||||
localeTitle: Comentar fuera de HTML
|
||||
challengeType: 0
|
||||
videoUrl: ''
|
||||
localeTitle: Comentar fuera de HTML
|
||||
---
|
||||
|
||||
## Description
|
||||
<section id='description'>
|
||||
Recuerde que para iniciar un comentario, debe usar <code><!--</code> y para finalizar un comentario, debe usar <code>--></code>
|
||||
Aquí deberá finalizar el comentario antes de que comience su elemento <code>h2</code> .
|
||||
</section>
|
||||
<section id="description"> Recuerde que para iniciar un comentario, debe usar <code><!--</code> y para finalizar un comentario, debe usar <code>--></code> Aquí deberá finalizar el comentario antes de que comience su elemento <code>h2</code> . </section>
|
||||
|
||||
## Instructions
|
||||
<section id='instructions'>
|
||||
Comente su elemento <code>h1</code> y su elemento <code>p</code> , pero no su elemento <code>h2</code> .
|
||||
</section>
|
||||
<section id="instructions"> Comente su elemento <code>h1</code> y su elemento <code>p</code> , pero no su elemento <code>h2</code> . </section>
|
||||
|
||||
## Tests
|
||||
<section id='tests'>
|
||||
@@ -28,7 +23,7 @@ tests:
|
||||
testString: 'assert(($("h2").length > 0), "Leave your <code>h2</code> element uncommented so that it is visible on your page.");'
|
||||
- text: Comenta tu elemento <code>p</code> para que no se vea en tu página.
|
||||
testString: 'assert(($("p").length === 0), "Comment out your <code>p</code> element so that it is not visible on your page.");'
|
||||
- text: 'Asegúrese de cerrar cada uno de sus comentarios con <code>--></code> .'
|
||||
- text: Asegúrese de cerrar cada uno de sus comentarios con <code>--></code> .
|
||||
testString: 'assert(code.match(/[^fc]-->/g).length > 1, "Be sure to close each of your comments with <code>--></code>.");'
|
||||
- text: No cambie el orden de <code>h1</code> <code>h2</code> o <code>p</code> en el código.
|
||||
testString: 'assert((code.match(/<([a-z0-9]){1,2}>/g)[0]==="<h1>" && code.match(/<([a-z0-9]){1,2}>/g)[1]==="<h2>" && code.match(/<([a-z0-9]){1,2}>/g)[2]==="<p>") , "Do not change the order of the <code>h1</code> <code>h2</code> or <code>p</code> in the code.");'
|
||||
@@ -50,6 +45,7 @@ tests:
|
||||
|
||||
<p>Kitty ipsum dolor sit amet, shed everywhere shed everywhere stretching attack your ankles chase the red dot, hairball run catnip eat the grass sniff.</p>
|
||||
-->
|
||||
|
||||
```
|
||||
|
||||
</div>
|
||||
|
||||
@@ -1,24 +1,16 @@
|
||||
---
|
||||
id: bad87fee1348bd9aedf08827
|
||||
title: Create a Bulleted Unordered List
|
||||
localeTitle: Crear una lista desordenada con viñetas
|
||||
challengeType: 0
|
||||
videoUrl: ''
|
||||
localeTitle: Crear una lista desordenada con viñetas
|
||||
---
|
||||
|
||||
## Description
|
||||
<section id='description'>
|
||||
HTML tiene un elemento especial para crear <code>unordered lists</code> o listas de estilo de punto de viñeta.
|
||||
listas desordenadas comienzan con un elemento <code><ul></code> apertura, seguido de cualquier número de elementos <code><li></code> . Finalmente, las listas desordenadas se cierran con un <code></ul></code>
|
||||
Por ejemplo:
|
||||
<blockquote><ul><br> <li>milk</li><br> <li>cheese</li><br></ul></blockquote>
|
||||
crearía una lista de estilo de punto de bala de "leche" y "queso".
|
||||
</section>
|
||||
<section id="description"> HTML tiene un elemento especial para crear <code>unordered lists</code> , o listas de estilo de punto de bala. Las listas desordenadas comienzan con un elemento <code><ul></code> apertura, seguido de cualquier número de elementos <code><li></code> . Por último, las listas no ordenadas se cierran con <code></ul></code> Por ejemplo: <blockquote> <ul> <br> <li> leche </li> <br> <li> queso </li> <br> </ul> </blockquote> crearía una lista de estilo de punto de bala de "leche" y "queso". </section>
|
||||
|
||||
## Instructions
|
||||
<section id='instructions'>
|
||||
Elimine los dos últimos elementos <code>p</code> y cree una lista desordenada de tres cosas que los gatos adoran al final de la página.
|
||||
</section>
|
||||
<section id="instructions"> Elimina los dos últimos elementos <code>p</code> y crea una lista desordenada de tres cosas que los gatos adoran al final de la página. </section>
|
||||
|
||||
## Tests
|
||||
<section id='tests'>
|
||||
@@ -53,6 +45,7 @@ tests:
|
||||
<p>Kitty ipsum dolor sit amet, shed everywhere shed everywhere stretching attack your ankles chase the red dot, hairball run catnip eat the grass sniff.</p>
|
||||
<p>Purr jump eat the grass rip the couch scratched sunbathe, shed everywhere rip the couch sleep in the sink fluffy fur catnip scratched.</p>
|
||||
</main>
|
||||
|
||||
```
|
||||
|
||||
</div>
|
||||
|
||||
@@ -1,22 +1,16 @@
|
||||
---
|
||||
id: bad87fee1348bd9aede08830
|
||||
title: Create a Form Element
|
||||
localeTitle: Crear un elemento de formulario
|
||||
challengeType: 0
|
||||
videoUrl: ''
|
||||
localeTitle: Crear un elemento de formulario
|
||||
---
|
||||
|
||||
## Description
|
||||
<section id='description'>
|
||||
Puede crear formularios web que realmente envíen datos a un servidor usando nada más que HTML puro. Puedes hacer esto especificando una acción en tu elemento de <code>form</code> .
|
||||
Por ejemplo:
|
||||
<code><form action="/url-where-you-want-to-submit-form-data"></form></code>
|
||||
</section>
|
||||
<section id="description"> Puede crear formularios web que en realidad envíen datos a un servidor usando nada más que HTML puro. Puedes hacer esto especificando una acción en tu elemento de <code>form</code> . Por ejemplo: <code><form action="/url-where-you-want-to-submit-form-data"></form></code> </section>
|
||||
|
||||
## Instructions
|
||||
<section id='instructions'>
|
||||
Anide el campo de texto dentro de un elemento de <code>form</code> y agrega el atributo <code>action="/submit-cat-photo"</code> al elemento de formulario.
|
||||
</section>
|
||||
<section id="instructions"> Anida el campo de texto dentro de un elemento de <code>form</code> y agrega el atributo <code>action="/submit-cat-photo"</code> al elemento de formulario. </section>
|
||||
|
||||
## Tests
|
||||
<section id='tests'>
|
||||
@@ -60,6 +54,7 @@ tests:
|
||||
</ol>
|
||||
<input type="text" placeholder="cat photo URL">
|
||||
</main>
|
||||
|
||||
```
|
||||
|
||||
</div>
|
||||
|
||||
@@ -1,26 +1,16 @@
|
||||
---
|
||||
id: bad87fee1348bd9aedf08835
|
||||
title: Create a Set of Checkboxes
|
||||
localeTitle: Crear un conjunto de casillas de verificación
|
||||
challengeType: 0
|
||||
videoUrl: ''
|
||||
localeTitle: Crear un conjunto de casillas de verificación
|
||||
---
|
||||
|
||||
## Description
|
||||
<section id='description'>
|
||||
formularios suelen utilizar <code>checkboxes</code> de <code>checkboxes</code> para preguntas que pueden tener más de una respuesta.
|
||||
casillas de verificación son un tipo de <code>input</code>
|
||||
Cada una de sus casillas de verificación se puede anidar dentro de su propio elemento de <code>label</code> . Al ajustar un elemento de <code>input</code> dentro de un elemento de <code>label</code> , asociará automáticamente la entrada de la casilla de verificación con el elemento de etiqueta que lo rodea.
|
||||
Todas las entradas de las casillas de verificación relacionadas deben tener el mismo atributo de <code>name</code> .
|
||||
Se considera una buena práctica definir explícitamente la relación entre una <code>input</code> casilla de verificación y su <code>label</code> correspondiente estableciendo el atributo <code>for</code> en el elemento de <code>label</code> para que coincida con el atributo <code>id</code> del elemento de <code>input</code> asociado.
|
||||
Aquí hay un ejemplo de una casilla de verificación:
|
||||
<code><label for="loving"><input id="loving" type="checkbox" name="personality"> Loving</label></code>
|
||||
</section>
|
||||
<section id="description"> Los formularios suelen utilizar <code>checkboxes</code> de <code>checkboxes</code> para preguntas que pueden tener más de una respuesta. Las casillas de verificación son un tipo de <code>input</code> Cada una de sus casillas de verificación se puede anidar dentro de su propio elemento de <code>label</code> . Al ajustar un elemento de <code>input</code> dentro de un elemento de <code>label</code> , asociará automáticamente la entrada de la casilla de verificación con el elemento de etiqueta que lo rodea. Todas las entradas de la casilla de verificación relacionadas deben tener el mismo atributo de <code>name</code> . Se considera una buena práctica definir explícitamente la relación entre una <code>input</code> casilla de verificación y su <code>label</code> correspondiente estableciendo el atributo <code>for</code> en el elemento de <code>label</code> para que coincida con el atributo <code>id</code> del elemento de <code>input</code> asociado. Aquí hay un ejemplo de una casilla de verificación: <code><label for="loving"><input id="loving" type="checkbox" name="personality"> Loving</label></code> </section>
|
||||
|
||||
## Instructions
|
||||
<section id='instructions'>
|
||||
Agregue a su formulario un conjunto de tres casillas de verificación. Cada casilla de verificación debe estar anidada dentro de su propio elemento de <code>label</code> . Los tres deben compartir el atributo de <code>name</code> de la <code>personality</code> .
|
||||
</section>
|
||||
<section id="instructions"> Agregue a su formulario un conjunto de tres casillas de verificación. Cada casilla de verificación debe estar anidada dentro de su propio elemento de <code>label</code> . Los tres deben compartir el atributo de <code>name</code> de la <code>personality</code> . </section>
|
||||
|
||||
## Tests
|
||||
<section id='tests'>
|
||||
@@ -29,11 +19,11 @@ Agregue a su formulario un conjunto de tres casillas de verificación. Cada casi
|
||||
tests:
|
||||
- text: Su página debe tener tres elementos de casilla de verificación.
|
||||
testString: 'assert($("input[type="checkbox"]").length > 2, "Your page should have three checkbox elements.");'
|
||||
- text: Cada uno de sus tres elementos de casilla de verificación debe estar anidado en su propio elemento <code clase = "notranslate"> etiqueta </code>.
|
||||
- text: Cada uno de los tres elementos de la casilla de verificación debe estar anidado en su propio elemento de <code>label</code> .
|
||||
testString: 'assert($("label > input[type="checkbox"]:only-child").length > 2, "Each of your three checkbox elements should be nested in its own <code>label</code> element.");'
|
||||
- text: Asegúrese de que cada uno de sus elementos <code class = "notranslate"> label </code> tenga una etiqueta de cierre.
|
||||
- text: Asegúrese de que cada uno de los elementos de su <code>label</code> tenga una etiqueta de cierre.
|
||||
testString: 'assert(code.match(/<\/label>/g) && code.match(/<label/g) && code.match(/<\/label>/g).length === code.match(/<label/g).length, "Make sure each of your <code>label</code> elements has a closing tag.");'
|
||||
- text: Dé a sus casillas de verificación el atributo <code clase = "notranslate"> nombre </code> de <code clase = "notranslate"> personalidad </code>.
|
||||
- text: Dale a tus casillas el <code>name</code> atributo de <code>personality</code> .
|
||||
testString: 'assert($("label > input[type="checkbox"]").filter("[name="personality"]").length > 2, "Give your checkboxes the <code>name</code> attribute of <code>personality</code>.");'
|
||||
|
||||
```
|
||||
@@ -71,6 +61,7 @@ tests:
|
||||
<button type="submit">Submit</button>
|
||||
</form>
|
||||
</main>
|
||||
|
||||
```
|
||||
|
||||
</div>
|
||||
|
||||
@@ -1,27 +1,16 @@
|
||||
---
|
||||
id: bad87fee1348bd9aedf08834
|
||||
title: Create a Set of Radio Buttons
|
||||
localeTitle: Crear un conjunto de botones de radio
|
||||
challengeType: 0
|
||||
videoUrl: ''
|
||||
localeTitle: Crear un conjunto de botones de radio
|
||||
---
|
||||
|
||||
## Description
|
||||
<section id='description'>
|
||||
Puede usar <code>radio buttons</code> para preguntas en las que desea que el usuario solo le dé una respuesta entre múltiples opciones.
|
||||
botones de radio son un tipo de <code>input</code> .
|
||||
Cada uno de sus botones de radio puede estar anidado dentro de su propio elemento de <code>label</code> . Al envolver un elemento de <code>input</code> dentro de un elemento de <code>label</code> , asociará automáticamente la entrada del botón de opción con el elemento de etiqueta que lo rodea.
|
||||
Todos los botones de opción relacionados deben tener el mismo atributo de <code>name</code> para crear un grupo de botones de opción. Al crear un grupo de radio, la selección de cualquier botón de radio deseleccionará automáticamente los otros botones dentro del mismo grupo, lo que garantiza que el usuario solo proporcione una respuesta.
|
||||
Aquí hay un ejemplo de un botón de radio:
|
||||
<blockquote><label> <br> <input type="radio" name="indoor-outdoor">Indoor <br></label></blockquote>
|
||||
Se considera una buena práctica establecer un atributo <code>for</code> en el elemento de <code>label</code> , con un valor que coincida con el valor del atributo <code>id</code> del elemento de <code>input</code> . Esto permite que las tecnologías de asistencia creen una relación vinculada entre la etiqueta y el elemento de <code>input</code> secundario. Por ejemplo:
|
||||
<blockquote><label for="indoor"> <br> <input id="indoor" type="radio" name="indoor-outdoor">Indoor <br></label></blockquote>
|
||||
</section>
|
||||
<section id="description"> Puede usar <code>radio buttons</code> para preguntas en las que desea que el usuario solo le dé una respuesta entre múltiples opciones. Los botones de radio son un tipo de <code>input</code> . Cada uno de sus botones de radio puede estar anidado dentro de su propio elemento de <code>label</code> . Al envolver un elemento de <code>input</code> dentro de un elemento de <code>label</code> , asociará automáticamente la entrada del botón de opción con el elemento de etiqueta que lo rodea. Todos los botones de opción relacionados deben tener el mismo atributo de <code>name</code> para crear un grupo de botones de opción. Al crear un grupo de radio, la selección de cualquier botón de radio deseleccionará automáticamente los otros botones dentro del mismo grupo, lo que garantiza que el usuario solo proporcione una respuesta. Aquí hay un ejemplo de un botón de radio: <blockquote> <label> <br> <input type = "radio" name = "indoor-outdoor"> Indoor <br> </label> </blockquote> Se considera una buena práctica establecer un atributo <code>for</code> en el elemento de <code>label</code> , con un valor que coincida con el valor del atributo <code>id</code> del elemento de <code>input</code> . Esto permite que las tecnologías de asistencia creen una relación vinculada entre la etiqueta y el elemento de <code>input</code> secundario. Por ejemplo: <blockquote> <label for = "indoor"> <br> <input id = "indoor" type = "radio" name = "indoor-outdoor"> Indoor <br> </label> </blockquote></section>
|
||||
|
||||
## Instructions
|
||||
<section id='instructions'>
|
||||
Agregue un par de botones de opción a su formulario, cada uno anidado en su propio elemento de etiqueta. Uno debe tener la opción de <code>indoor</code> y la otra debe tener la opción de <code>outdoor</code> . Ambos deben compartir el atributo de <code>name</code> de <code>indoor-outdoor</code> para crear un grupo de radio.
|
||||
</section>
|
||||
<section id="instructions"> Agregue un par de botones de opción a su formulario, cada uno anidado en su propio elemento de etiqueta. Uno debe tener la opción de <code>indoor</code> y la otra debe tener la opción de <code>outdoor</code> . Ambos deben compartir el atributo de <code>name</code> de <code>indoor-outdoor</code> para crear un grupo de radio. </section>
|
||||
|
||||
## Tests
|
||||
<section id='tests'>
|
||||
@@ -30,17 +19,17 @@ Agregue un par de botones de opción a su formulario, cada uno anidado en su pro
|
||||
tests:
|
||||
- text: Tu página debe tener dos elementos de botón de radio.
|
||||
testString: 'assert($("input[type="radio"]").length > 1, "Your page should have two radio button elements.");'
|
||||
- text: Ponga a sus botones de radio el atributo <code class = "notranslate"> name </code> de <code class = "notranslate"> indoor-outdoor </code>.
|
||||
- text: Dale a tus botones de radio el atributo de <code>name</code> de <code>indoor-outdoor</code> .
|
||||
testString: 'assert($("label > input[type="radio"]").filter("[name="indoor-outdoor"]").length > 1, "Give your radio buttons the <code>name</code> attribute of <code>indoor-outdoor</code>.");'
|
||||
- text: Cada uno de sus dos elementos de botón de opción debe estar anidado en su propio elemento <code class = "notranslate"> label </code>.
|
||||
- text: Cada uno de sus dos elementos de botón de radio debe estar anidado en su propio elemento de <code>label</code> .
|
||||
testString: 'assert($("label > input[type="radio"]:only-child").length > 1, "Each of your two radio button elements should be nested in its own <code>label</code> element.");'
|
||||
- text: Asegúrese de que cada uno de sus elementos <code class = "notranslate"> label </code> tenga una etiqueta de cierre.
|
||||
- text: Asegúrese de que cada uno de los elementos de su <code>label</code> tenga una etiqueta de cierre.
|
||||
testString: 'assert((code.match(/<\/label>/g) && code.match(/<label/g) && code.match(/<\/label>/g).length === code.match(/<label/g).length), "Make sure each of your <code>label</code> elements has a closing tag.");'
|
||||
- text: Uno de los botones de radio debe tener la etiqueta <código clase = "notranslate"> interior </code>.
|
||||
- text: Uno de sus botones de radio debe tener la etiqueta <code>indoor</code> .
|
||||
testString: 'assert($("label").text().match(/indoor/gi), "One of your radio buttons should have the label <code>indoor</code>.");'
|
||||
- text: Uno de los botones de radio debe tener la etiqueta <code clase = "notranslate"> outdoor </code>.
|
||||
- text: Uno de sus botones de radio debe tener la etiqueta <code>outdoor</code> .
|
||||
testString: 'assert($("label").text().match(/outdoor/gi), "One of your radio buttons should have the label <code>outdoor</code>.");'
|
||||
- text: Cada uno de los elementos de su botón de opción debe agregarse dentro de la etiqueta <code class = "notranslate"> form </code>.
|
||||
- text: Cada uno de los elementos de su botón de opción debe agregarse dentro de la etiqueta de <code>form</code> .
|
||||
testString: 'assert($("label").parent().get(0).tagName.match("FORM"), "Each of your radio button elements should be added within the <code>form</code> tag.");'
|
||||
|
||||
```
|
||||
@@ -76,6 +65,7 @@ tests:
|
||||
<button type="submit">Submit</button>
|
||||
</form>
|
||||
</main>
|
||||
|
||||
```
|
||||
|
||||
</div>
|
||||
|
||||
@@ -1,24 +1,16 @@
|
||||
---
|
||||
id: bad87fee1348bd9aedf08829
|
||||
title: Create a Text Field
|
||||
localeTitle: Crear un campo de texto
|
||||
challengeType: 0
|
||||
videoUrl: ''
|
||||
localeTitle: Crear un campo de texto
|
||||
---
|
||||
|
||||
## Description
|
||||
<section id='description'>
|
||||
Ahora vamos a crear un formulario web.
|
||||
Los elementos de entrada son una forma conveniente de obtener información de su usuario.
|
||||
Puede crear una entrada de texto como esta:
|
||||
<code><input type="text"></code>
|
||||
Tenga en cuenta que <code>input</code> elementos de <code>input</code> se cierran automáticamente.
|
||||
</section>
|
||||
<section id="description"> Ahora vamos a crear un formulario web. Los elementos de entrada son una forma conveniente de obtener información de su usuario. Puede crear una entrada de texto como esta: <code><input type="text"></code> Tenga en cuenta que <code>input</code> elementos de <code>input</code> se cierran automáticamente. </section>
|
||||
|
||||
## Instructions
|
||||
<section id='instructions'>
|
||||
Crea un elemento de <code>input</code> de <code>text</code> de tipo debajo de tus listas.
|
||||
</section>
|
||||
<section id="instructions"> Cree un elemento de <code>input</code> de <code>text</code> de tipo debajo de sus listas. </section>
|
||||
|
||||
## Tests
|
||||
<section id='tests'>
|
||||
@@ -59,6 +51,7 @@ tests:
|
||||
|
||||
|
||||
</main>
|
||||
|
||||
```
|
||||
|
||||
</div>
|
||||
|
||||
@@ -1,47 +1,39 @@
|
||||
---
|
||||
id: bad87fee1348bd9aedf08828
|
||||
title: Create an Ordered List
|
||||
localeTitle: Crear una lista ordenada
|
||||
challengeType: 0
|
||||
videoUrl: ''
|
||||
localeTitle: Crear una lista ordenada
|
||||
---
|
||||
|
||||
## Description
|
||||
<section id='description'>
|
||||
HTML tiene otro elemento especial para crear <code>ordered lists</code> o listas numeradas.
|
||||
listas ordenadas comienzan con un elemento <code><ol></code> apertura, seguido de cualquier número de elementos <code><li></code> . Finalmente, las listas ordenadas se cierran con un <code></ol></code>
|
||||
Por ejemplo:
|
||||
<blockquote><ol><br> <li>Garfield</li><br> <li>Sylvester</li><br></ol></blockquote>
|
||||
crearía una lista numerada de "Garfield" y "Sylvester".
|
||||
</section>
|
||||
<section id="description"> HTML tiene otro elemento especial para crear <code>ordered lists</code> o listas numeradas. Las listas ordenadas comienzan con un elemento <code><ol></code> apertura, seguido de cualquier número de elementos <code><li></code> . Finalmente, las listas ordenadas se cierran con <code></ol></code> Por ejemplo: <blockquote> <ol> <br> <li> Garfield </li> <br> <li> Sylvester </li> <br> </ol> </blockquote> crearía una lista numerada de "Garfield" y "Sylvester". </section>
|
||||
|
||||
## Instructions
|
||||
<section id='instructions'>
|
||||
Crea una lista ordenada de las 3 cosas principales que los gatos odian más.
|
||||
</section>
|
||||
<section id="instructions"> Crea una lista ordenada de las 3 cosas principales que los gatos odian más. </section>
|
||||
|
||||
## Tests
|
||||
<section id='tests'>
|
||||
|
||||
```yml
|
||||
tests:
|
||||
- text: 'Debería tener una lista ordenada para "3 cosas que odian los gatos:"'
|
||||
- text: 'Deberías tener una lista ordenada para "3 cosas que odian los gatos:"'
|
||||
testString: 'assert((/Top 3 things cats hate:/i).test($("ol").prev().text()), "You should have an ordered list for "Top 3 things cats hate:"");'
|
||||
- text: Deberías tener una lista desordenada para "Cosas que los gatos aman:"
|
||||
- text: 'Deberías tener una lista desordenada para "Cosas que los gatos aman:"'
|
||||
testString: 'assert((/Things cats love:/i).test($("ul").prev().text()), "You should have an unordered list for "Things cats love:"");'
|
||||
- text: Debes tener solo un elemento <code clase = "notranslate"> ul </code>.
|
||||
- text: Deberías tener solo un elemento <code>ul</code> .
|
||||
testString: 'assert.equal($("ul").length, 1, "You should have only one <code>ul</code> element.");'
|
||||
- text: Debería tener solo un elemento <code clase = "notranslate"> ol </code>.
|
||||
- text: Debes tener un solo elemento <code>ol</code> .
|
||||
testString: 'assert.equal($("ol").length, 1, "You should have only one <code>ol</code> element.");'
|
||||
- text: Debería tener tres elementos <code class = "notranslate"> li </code> dentro de su elemento <code class = "notranslate"> ul </code>.
|
||||
- text: Debes tener tres elementos <code>li</code> dentro de tu elemento <code>ul</code> .
|
||||
testString: 'assert.equal($("ul li").length, 3, "You should have three <code>li</code> elements within your <code>ul</code> element.");'
|
||||
- text: Debería tener tres elementos <code class = "notranslate"> li </code> dentro de su elemento <code class = "notranslate"> ol </code>.
|
||||
- text: Debes tener tres elementos <code>li</code> dentro de tu elemento <code>ol</code> .
|
||||
testString: 'assert.equal($("ol li").length, 3, "You should have three <code>li</code> elements within your <code>ol</code> element.");'
|
||||
- text: Asegúrese de que su elemento <code class = "notranslate"> ul </code> tenga una etiqueta de cierre.
|
||||
- text: Asegúrese de que su elemento <code>ul</code> tenga una etiqueta de cierre.
|
||||
testString: 'assert(code.match(/<\/ul>/g) && code.match(/<\/ul>/g).length === code.match(/<ul>/g).length, "Make sure your <code>ul</code> element has a closing tag.");'
|
||||
- text: Asegúrese de que su elemento <code class = "notranslate"> ol </code> tenga una etiqueta de cierre.
|
||||
- text: Asegúrese de que su elemento <code>ol</code> tenga una etiqueta de cierre.
|
||||
testString: 'assert(code.match(/<\/ol>/g) && code.match(/<\/ol>/g).length === code.match(/<ol>/g).length, "Make sure your <code>ol</code> element has a closing tag.");'
|
||||
- text: Asegúrese de que su elemento <code class = "notranslate"> li </code> tenga una etiqueta de cierre.
|
||||
- text: Asegúrese de que su elemento <code>li</code> tenga una etiqueta de cierre.
|
||||
testString: 'assert(code.match(/<\/li>/g) && code.match(/<li>/g) && code.match(/<\/li>/g).length === code.match(/<li>/g).length, "Make sure your <code>li</code> element has a closing tag.");'
|
||||
|
||||
```
|
||||
@@ -69,6 +61,7 @@ tests:
|
||||
<p>Top 3 things cats hate:</p>
|
||||
|
||||
</main>
|
||||
|
||||
```
|
||||
|
||||
</div>
|
||||
|
||||
@@ -1,26 +1,16 @@
|
||||
---
|
||||
id: 587d78aa367417b2b2512aed
|
||||
title: Declare the Doctype of an HTML Document
|
||||
localeTitle: Declarar el doctype de un documento HTML
|
||||
challengeType: 0
|
||||
videoUrl: ''
|
||||
localeTitle: Declarar el doctype de un documento HTML
|
||||
---
|
||||
|
||||
## Description
|
||||
<section id='description'>
|
||||
Los desafíos hasta ahora han cubierto elementos HTML específicos y sus usos. Sin embargo, hay algunos elementos que le dan una estructura general a su página y deberían incluirse en cada documento HTML.
|
||||
En la parte superior de su documento, debe indicar al navegador qué versión de HTML está usando su página. HTML es un lenguaje en evolución, y se actualiza regularmente. La mayoría de los principales navegadores son compatibles con la última especificación, que es HTML5. Sin embargo, las páginas web más antiguas pueden usar versiones anteriores del idioma.
|
||||
Usted le dice al navegador esta información agregando la etiqueta <code><!DOCTYPE ...></code> en la primera línea, donde la parte " <code>...</code> " es la versión de HTML. Para HTML5, utiliza <code><!DOCTYPE html></code> .
|
||||
El <code>!</code> y el <code>DOCTYPE</code> mayúsculas es importante, especialmente para los navegadores más antiguos. El <code>html</code> no distingue entre mayúsculas y minúsculas.
|
||||
A continuación, el resto de su código HTML debe estar envuelto en etiquetas <code>html</code> . La apertura <code><html></code> va directamente debajo de la línea <code><!DOCTYPE html></code> , y el cierre <code></html></code> va al final de la página.
|
||||
Aquí hay un ejemplo de la estructura de la página:
|
||||
<blockquote><!DOCTYPE html><br><html><br> <!-- Your HTML code goes here --><br></html></blockquote>
|
||||
</section>
|
||||
<section id="description"> Los desafíos hasta ahora han cubierto elementos HTML específicos y sus usos. Sin embargo, hay algunos elementos que le dan estructura general a su página y deben incluirse en cada documento HTML. En la parte superior de su documento, debe indicar al navegador qué versión de HTML está usando su página. HTML es un lenguaje en evolución, y se actualiza regularmente. La mayoría de los principales navegadores son compatibles con la última especificación, que es HTML5. Sin embargo, las páginas web más antiguas pueden usar versiones anteriores del idioma. Usted le dice al navegador esta información agregando la etiqueta <code><!DOCTYPE ...></code> en la primera línea, donde la parte " <code>...</code> " es la versión de HTML. Para HTML5, utiliza <code><!DOCTYPE html></code> . El <code>!</code> y el <code>DOCTYPE</code> mayúsculas es importante, especialmente para los navegadores más antiguos. El <code>html</code> no distingue entre mayúsculas y minúsculas. A continuación, el resto de su código HTML debe estar envuelto en etiquetas <code>html</code> . La apertura <code><html></code> va directamente debajo de la línea <code><!DOCTYPE html></code> , y el cierre <code></html></code> va al final de la página. Aquí hay un ejemplo de la estructura de la página: <blockquote> <! DOCTYPE html> <br> <html> <br> <! - Su código HTML va aquí -> <br> </html> </blockquote></section>
|
||||
|
||||
## Instructions
|
||||
<section id='instructions'>
|
||||
Agregue una etiqueta <code>DOCTYPE</code> para HTML5 en la parte superior del documento HTML en blanco en el editor de código. Debajo de él, agregue etiquetas <code>html</code> apertura y cierre, que envuelven un elemento <code>h1</code> . El encabezado puede incluir cualquier texto.
|
||||
</section>
|
||||
<section id="instructions"> Agregue una etiqueta <code>DOCTYPE</code> para HTML5 en la parte superior del documento HTML en blanco en el editor de código. Debajo de él, agregue etiquetas <code>html</code> apertura y cierre, que envuelven un elemento <code>h1</code> . El encabezado puede incluir cualquier texto. </section>
|
||||
|
||||
## Tests
|
||||
<section id='tests'>
|
||||
|
||||
@@ -1,23 +1,16 @@
|
||||
---
|
||||
id: 587d78aa367417b2b2512aec
|
||||
title: Define the Head and Body of an HTML Document
|
||||
localeTitle: Definir la cabeza y el cuerpo de un documento HTML
|
||||
challengeType: 0
|
||||
videoUrl: ''
|
||||
localeTitle: Definir la cabeza y el cuerpo de un documento HTML
|
||||
---
|
||||
|
||||
## Description
|
||||
<section id='description'>
|
||||
Puede agregar otro nivel de organización en su documento HTML dentro de las etiquetas <code>html</code> con los elementos de <code>head</code> y <code>body</code> . Cualquier marca con información sobre su página irá a la etiqueta de <code>head</code> . Luego, cualquier marca con el contenido de la página (lo que se muestra para un usuario) entraría en la etiqueta del <code>body</code> .
|
||||
Los elementos de metadatos, como <code>link</code> , <code>meta</code> , <code>title</code> y <code>style</code> , por lo general van dentro de la <code>head</code> del elemento.
|
||||
Aquí hay un ejemplo del diseño de una página:
|
||||
<blockquote><!DOCTYPE html><br><html><br> <head><br> <!-- metadata elements --><br> </head><br> <body><br> <!-- page contents --><br> </body><br></html></blockquote>
|
||||
</section>
|
||||
<section id="description"> Puede agregar otro nivel de organización en su documento HTML dentro de las etiquetas <code>html</code> con los elementos de <code>head</code> y <code>body</code> . Cualquier marca con información sobre su página irá a la etiqueta de <code>head</code> . Luego, cualquier marca con el contenido de la página (lo que se muestra para un usuario) se colocará en la etiqueta del <code>body</code> . Los elementos de metadatos, como <code>link</code> , <code>meta</code> , <code>title</code> y <code>style</code> , por lo general van dentro de la <code>head</code> del elemento. Aquí hay un ejemplo del diseño de una página: <blockquote> <! DOCTYPE html> <br> <html> <br> <head> <br> <! - Elementos de metadatos -> <br> </head> <br> <body> <br> <! - contenidos de la página -> <br> </body> <br> </html> </blockquote></section>
|
||||
|
||||
## Instructions
|
||||
<section id='instructions'>
|
||||
Edita el marcado para que haya una <code>head</code> y un <code>body</code> . La <code>head</code> elemento sólo debe incluir el <code>title</code> , y el <code>body</code> elemento sólo debe incluir la <code>h1</code> y <code>p</code> .
|
||||
</section>
|
||||
<section id="instructions"> Edite el marcado para que haya una <code>head</code> y un <code>body</code> . La <code>head</code> elemento sólo debe incluir el <code>title</code> , y el <code>body</code> elemento sólo debe incluir la <code>h1</code> y <code>p</code> . </section>
|
||||
|
||||
## Tests
|
||||
<section id='tests'>
|
||||
@@ -55,6 +48,7 @@ tests:
|
||||
<p>Cat ipsum dolor sit amet, jump launch to pounce upon little yarn mouse, bare fangs at toy run hide in litter box until treats are fed. Go into a room to decide you didn't want to be in there anyway. I like big cats and i can not lie kitty ipsum dolor sit amet, shed everywhere shed everywhere stretching attack your ankles chase the red dot, hairball run catnip eat the grass sniff. Meow i could pee on this if i had the energy for slap owner's face at 5am until human fills food dish yet scamper. Knock dish off table head butt cant eat out of my own dish scratch the furniture. Make meme, make cute face. Sleep in the bathroom sink chase laser but pee in the shoe. Paw at your fat belly licks your face and eat grass, throw it back up kitty ipsum dolor sit amet, shed everywhere shed everywhere stretching attack your ankles chase the red dot, hairball run catnip eat the grass sniff.</p>
|
||||
|
||||
</html>
|
||||
|
||||
```
|
||||
|
||||
</div>
|
||||
|
||||
@@ -1,21 +1,16 @@
|
||||
---
|
||||
id: bad87fed1348bd9aedf08833
|
||||
title: Delete HTML Elements
|
||||
localeTitle: Eliminar elementos HTML
|
||||
challengeType: 0
|
||||
videoUrl: ''
|
||||
localeTitle: Eliminar elementos HTML
|
||||
---
|
||||
|
||||
## Description
|
||||
<section id='description'>
|
||||
Nuestro teléfono no tiene mucho espacio vertical.
|
||||
Eliminemos los elementos innecesarios para que podamos comenzar a construir nuestra CatPhotoApp.
|
||||
</section>
|
||||
<section id="description"> Nuestro teléfono no tiene mucho espacio vertical. Vamos a eliminar los elementos innecesarios para que podamos comenzar a construir nuestra CatPhotoApp. </section>
|
||||
|
||||
## Instructions
|
||||
<section id='instructions'>
|
||||
Borre su elemento <code>h1</code> para que podamos simplificar nuestra vista.
|
||||
</section>
|
||||
<section id="instructions"> Borre su elemento <code>h1</code> para que podamos simplificar nuestra vista. </section>
|
||||
|
||||
## Tests
|
||||
<section id='tests'>
|
||||
@@ -44,6 +39,7 @@ tests:
|
||||
<h2>CatPhotoApp</h2>
|
||||
|
||||
<p>Kitty ipsum dolor sit amet, shed everywhere shed everywhere stretching attack your ankles chase the red dot, hairball run catnip eat the grass sniff.</p>
|
||||
|
||||
```
|
||||
|
||||
</div>
|
||||
@@ -55,9 +51,7 @@ tests:
|
||||
## Solution
|
||||
<section id='solution'>
|
||||
|
||||
|
||||
```js
|
||||
var code = "<h2>CatPhotoApp</h2><p>Kitty ipsum dolor sit amet, shed everywhere shed everywhere stretching attack your ankles chase the red dot, hairball run catnip eat the grass sniff.</p>"
|
||||
// solution required
|
||||
```
|
||||
|
||||
</section>
|
||||
|
||||
@@ -1,22 +1,16 @@
|
||||
---
|
||||
id: bad87fee1348bd9aedf08833
|
||||
title: Fill in the Blank with Placeholder Text
|
||||
localeTitle: Rellene el espacio en blanco con el texto del marcador de posición
|
||||
challengeType: 0
|
||||
videoUrl: ''
|
||||
localeTitle: Rellene el espacio en blanco con el texto del marcador de posición
|
||||
---
|
||||
|
||||
## Description
|
||||
<section id='description'>
|
||||
Los desarrolladores web tradicionalmente usan el <code>lorem ipsum text</code> como texto de marcador de posición. El texto 'lorem ipsum' se raspa al azar de un famoso pasaje de Cicerón de la Antigua Roma.
|
||||
El texto de Lorem ipsum ha sido utilizado como texto de marcador de posición por tipógrafos desde el siglo XVI, y esta tradición continúa en la web.
|
||||
Bueno, 5 siglos es lo suficientemente largo. Ya que estamos construyendo un CatPhotoApp, usemos algo que se llama <code>kitty ipsum text</code> .
|
||||
</section>
|
||||
<section id="description"> Los desarrolladores web tradicionalmente usan el <code>lorem ipsum text</code> como texto de marcador de posición. El texto 'lorem ipsum' se raspa al azar de un famoso pasaje de Cicerón de la Antigua Roma. El texto de Lorem ipsum ha sido utilizado como texto de marcador de posición por los tipógrafos desde el siglo XVI, y esta tradición continúa en la web. Bueno, 5 siglos es lo suficientemente largo. Ya que estamos construyendo un CatPhotoApp, usemos algo que se llama <code>kitty ipsum text</code> . </section>
|
||||
|
||||
## Instructions
|
||||
<section id='instructions'>
|
||||
Reemplace el texto dentro de su elemento <code>p</code> con las primeras palabras de este texto de 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>
|
||||
</section>
|
||||
<section id="instructions"> Reemplace el texto dentro de su elemento <code>p</code> con las primeras palabras de este texto de 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> </section>
|
||||
|
||||
## Tests
|
||||
<section id='tests'>
|
||||
@@ -41,6 +35,7 @@ tests:
|
||||
<h2>CatPhotoApp</h2>
|
||||
|
||||
<p>Hello Paragraph</p>
|
||||
|
||||
```
|
||||
|
||||
</div>
|
||||
|
||||
@@ -1,22 +1,16 @@
|
||||
---
|
||||
id: bad87fee1348bd9aedf0887a
|
||||
title: Headline with the h2 Element
|
||||
localeTitle: Titular con el elemento h2
|
||||
challengeType: 0
|
||||
videoUrl: ''
|
||||
localeTitle: Titular con el elemento h2
|
||||
---
|
||||
|
||||
## Description
|
||||
<section id='description'>
|
||||
En las próximas lecciones, construiremos una aplicación web de fotos de gatos HTML5 pieza por pieza.
|
||||
El elemento <code>h2</code> que agregará en este paso agregará un encabezado de nivel dos a la página web.
|
||||
Este elemento le dice al navegador acerca de la estructura de su sitio web. <code>h1</code> elementos <code>h1</code> se usan a menudo para los encabezados principales, mientras que los elementos <code>h2</code> se usan generalmente para los subtítulos. También hay elementos <code>h3</code> , <code>h4</code> , <code>h5</code> y <code>h6</code> para indicar diferentes niveles de subtítulos.
|
||||
</section>
|
||||
<section id="description"> En las próximas lecciones, construiremos una aplicación web de fotos de gatos HTML5 pieza por pieza. El elemento <code>h2</code> que agregará en este paso agregará un encabezado de nivel dos a la página web. Este elemento le dice al navegador acerca de la estructura de su sitio web. <code>h1</code> elementos <code>h1</code> se usan a menudo para los encabezados principales, mientras que los elementos <code>h2</code> se usan generalmente para los subtítulos. También hay elementos <code>h3</code> , <code>h4</code> , <code>h5</code> y <code>h6</code> para indicar diferentes niveles de subtítulos. </section>
|
||||
|
||||
## Instructions
|
||||
<section id='instructions'>
|
||||
Agregue una etiqueta <code>h2</code> que diga "CatPhotoApp" para crear un segundo <code>element</code> HTML debajo de su elemento <code>h1</code> "Hello World".
|
||||
</section>
|
||||
<section id="instructions"> Agregue una etiqueta <code>h2</code> que diga "CatPhotoApp" para crear un segundo <code>element</code> HTML debajo de su elemento <code>h1</code> "Hello World". </section>
|
||||
|
||||
## Tests
|
||||
<section id='tests'>
|
||||
@@ -43,6 +37,7 @@ tests:
|
||||
|
||||
```html
|
||||
<h1>Hello World</h1>
|
||||
|
||||
```
|
||||
|
||||
</div>
|
||||
|
||||
@@ -1,23 +1,16 @@
|
||||
---
|
||||
id: bad87fee1348bd9aedf08801
|
||||
title: Inform with the Paragraph Element
|
||||
localeTitle: Informar con el elemento de párrafo
|
||||
challengeType: 0
|
||||
videoUrl: ''
|
||||
localeTitle: Informar con el elemento de párrafo
|
||||
---
|
||||
|
||||
## Description
|
||||
<section id='description'>
|
||||
elementos
|
||||
<code>p</code> son el elemento preferido para el texto de párrafo en sitios web. <code>p</code> es la abreviatura de "párrafo".
|
||||
Puedes crear un elemento de párrafo como este:
|
||||
<code><p>I'm ap tag!</p></code>
|
||||
</section>
|
||||
<section id="description"> <code>p</code> elementos <code>p</code> son el elemento preferido para el texto de párrafo en sitios web. <code>p</code> es la abreviatura de "párrafo". Puedes crear un elemento de párrafo como este: <code><p>I'm ap tag!</p></code> </section>
|
||||
|
||||
## Instructions
|
||||
<section id='instructions'>
|
||||
Crea un elemento <code>p</code> debajo de tu elemento <code>h2</code> y dale el texto "Hola párrafo".
|
||||
</section>
|
||||
<section id="instructions"> Crea un elemento <code>p</code> debajo de tu elemento <code>h2</code> y dale el texto "Hola Párrafo". </section>
|
||||
|
||||
## Tests
|
||||
<section id='tests'>
|
||||
@@ -43,6 +36,7 @@ tests:
|
||||
```html
|
||||
<h1>Hello World</h1>
|
||||
<h2>CatPhotoApp</h2>
|
||||
|
||||
```
|
||||
|
||||
</div>
|
||||
|
||||
@@ -1,24 +1,16 @@
|
||||
---
|
||||
id: bad87fee1348bd9aecf08801
|
||||
title: Introduction to HTML5 Elements
|
||||
localeTitle: Introducción a los elementos HTML5
|
||||
challengeType: 0
|
||||
videoUrl: ''
|
||||
localeTitle: Introducción a los elementos HTML5
|
||||
---
|
||||
|
||||
## Description
|
||||
<section id='description'>
|
||||
HTML5 introduce etiquetas HTML más descriptivas. Estos incluyen <code>header</code> , <code>footer</code> , <code>nav</code> , <code>video</code> , <code>article</code> , <code>section</code> y otros.
|
||||
Estas etiquetas hacen que su HTML sea más fácil de leer, y también ayudan con la optimización del motor de búsqueda (SEO) y la accesibilidad.
|
||||
La etiqueta HTML5 <code>main</code> ayuda a los motores de búsqueda y otros desarrolladores a encontrar el contenido principal de su página.
|
||||
<strong>Nota</strong> <br> Muchas de las nuevas etiquetas HTML5 y sus beneficios se tratan en la sección de accesibilidad aplicada.
|
||||
</section>
|
||||
<section id="description"> HTML5 introduce etiquetas HTML más descriptivas. Estos incluyen <code>header</code> , <code>footer</code> , <code>nav</code> , <code>video</code> , <code>article</code> , <code>section</code> y otros. Estas etiquetas hacen que su HTML sea más fácil de leer y también ayudan con la optimización del motor de búsqueda (SEO) y la accesibilidad. La etiqueta <code>main</code> HTML5 ayuda a los motores de búsqueda y otros desarrolladores a encontrar el contenido principal de su página. <strong>Nota</strong> <br> Muchas de las nuevas etiquetas HTML5 y sus beneficios se tratan en la sección de accesibilidad aplicada. </section>
|
||||
|
||||
## Instructions
|
||||
<section id='instructions'>
|
||||
Cree un segundo elemento <code>p</code> después del elemento <code>p</code> existente con el siguiente texto de ipsum del gatito: <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>
|
||||
Envuelva los párrafos con una etiqueta <code>main</code> apertura y cierre.
|
||||
</section>
|
||||
<section id="instructions"> Cree un segundo elemento <code>p</code> después del elemento <code>p</code> existente con el siguiente texto de kitty 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> Envuelva los párrafos con una etiqueta <code>main</code> apertura y cierre. </section>
|
||||
|
||||
## Tests
|
||||
<section id='tests'>
|
||||
@@ -53,6 +45,7 @@ tests:
|
||||
<h2>CatPhotoApp</h2>
|
||||
|
||||
<p>Kitty ipsum dolor sit amet, shed everywhere shed everywhere stretching attack your ankles chase the red dot, hairball run catnip eat the grass sniff.</p>
|
||||
|
||||
```
|
||||
|
||||
</div>
|
||||
|
||||
@@ -1,24 +1,16 @@
|
||||
---
|
||||
id: bad87fee1348bd9aedf08816
|
||||
title: Link to External Pages with Anchor Elements
|
||||
localeTitle: Enlace a páginas externas con elementos de anclaje
|
||||
challengeType: 0
|
||||
videoUrl: ''
|
||||
localeTitle: Enlace a páginas externas con elementos de anclaje
|
||||
---
|
||||
|
||||
## Description
|
||||
<section id='description'>
|
||||
Puede usar elementos de <code>anchor</code> para vincular contenido fuera de su página web.
|
||||
elementos de <code>anchor</code>
|
||||
necesitan una dirección web de destino denominada atributo <code>href</code> . También necesitan texto de anclaje. Aquí hay un ejemplo:
|
||||
<code><a href="https://freecodecamp.org">this links to freecodecamp.org</a></code>
|
||||
Entonces su navegador mostrará el texto <strong>"esto enlaza a freecodecamp.org"</strong> como un enlace que puede hacer clic. Y ese enlace lo llevará a la dirección web <strong>https://spanish.freecodecamp.org</strong> .
|
||||
</section>
|
||||
<section id="description"> Puede usar elementos de <code>anchor</code> para vincular contenido fuera de su página web. <code>anchor</code> elementos de <code>anchor</code> necesitan una dirección web de destino denominada atributo <code>href</code> . También necesitan texto de anclaje. Aquí hay un ejemplo: <code><a href="https://freecodecamp.org">this links to freecodecamp.org</a></code> Luego, su navegador mostrará el texto <strong>"este enlace a freecodecamp.org"</strong> como un enlace en el que puede hacer clic. Y ese enlace lo llevará a la dirección web <strong>https://www.freecodecamp.org</strong> . </section>
|
||||
|
||||
## Instructions
|
||||
<section id='instructions'>
|
||||
Crear una <code>a</code> elemento que une a <code>http://freecatphotoapp.com</code> y tiene "fotos del gato" como su <code>anchor text</code> .
|
||||
</section>
|
||||
<section id="instructions"> Crear una <code>a</code> elemento que une a <code>http://freecatphotoapp.com</code> y tiene "fotos del gato" como su <code>anchor text</code> . </section>
|
||||
|
||||
## Tests
|
||||
<section id='tests'>
|
||||
@@ -27,7 +19,7 @@ Crear una <code>a</code> elemento que une a <code>http://freecatphotoapp.com</co
|
||||
tests:
|
||||
- text: Su <code>a</code> elemento debe tener el <code>anchor text</code> de fotos "gato".
|
||||
testString: 'assert((/cat photos/gi).test($("a").text()), "Your <code>a</code> element should have the <code>anchor text</code> of "cat photos".");'
|
||||
- text: 'Es necesario un <code>a</code> elemento que une a <code>http://freecatphotoapp .com</code> '
|
||||
- text: 'Es necesario un <code>a</code> elemento que une a <code>http://freecatphotoapp .com</code>'
|
||||
testString: 'assert(/http:\/\/(www\.)?freecatphotoapp\.com/gi.test($("a").attr("href")), "You need an <code>a</code> element that links to <code>http://freecatphotoapp<wbr>.com</code>");'
|
||||
- text: Asegúrese de que su <code>a</code> elemento tiene una etiqueta de cierre.
|
||||
testString: 'assert(code.match(/<\/a>/g) && code.match(/<\/a>/g).length === code.match(/<a/g).length, "Make sure your <code>a</code> element has a closing tag.");'
|
||||
@@ -52,6 +44,7 @@ tests:
|
||||
<p>Kitty ipsum dolor sit amet, shed everywhere shed everywhere stretching attack your ankles chase the red dot, hairball run catnip eat the grass sniff.</p>
|
||||
<p>Purr jump eat the grass rip the couch scratched sunbathe, shed everywhere rip the couch sleep in the sink fluffy fur catnip scratched.</p>
|
||||
</main>
|
||||
|
||||
```
|
||||
|
||||
</div>
|
||||
|
||||
@@ -1,26 +1,16 @@
|
||||
---
|
||||
id: bad88fee1348bd9aedf08816
|
||||
title: Link to Internal Sections of a Page with Anchor Elements
|
||||
localeTitle: Enlace a las secciones internas de una página con elementos de anclaje
|
||||
challengeType: 0
|
||||
videoUrl: ''
|
||||
localeTitle: Enlace a las secciones internas de una página con elementos de anclaje
|
||||
---
|
||||
|
||||
## Description
|
||||
<section id='description'>
|
||||
Los elementos de anclaje también se pueden usar para crear enlaces internos para saltar a diferentes secciones dentro de una página web.
|
||||
Para crear un enlace interno, asigna el atributo <code>href</code> un enlace a un símbolo de hash <code>#</code> más el valor del atributo <code>id</code> para el elemento al que desea enlazar internamente, generalmente más abajo en la página. A continuación, deberá agregar el mismo atributo de <code>id</code> al elemento al que se está vinculando. Un <code>id</code> es un atributo que describe de forma única un elemento.
|
||||
A continuación se muestra un ejemplo de un enlace de anclaje interno y su elemento de destino:
|
||||
<blockquote><a href="#contacts-header">Contacts</a><br>...<br><h2 id="contacts-header">Contacts</h2></blockquote>
|
||||
Cuando los usuarios hacen clic en el enlace de Contactos, serán llevados a la sección de la página web con el elemento del encabezado de <b>Contactos</b> .
|
||||
</section>
|
||||
<section id="description"> Los elementos de anclaje también se pueden usar para crear enlaces internos para saltar a diferentes secciones dentro de una página web. Para crear un enlace interno, asigna el atributo <code>href</code> un enlace a un símbolo de hash <code>#</code> más el valor del atributo <code>id</code> para el elemento al que desea enlazar internamente, generalmente más abajo en la página. A continuación, deberá agregar el mismo atributo de <code>id</code> al elemento al que se está vinculando. Un <code>id</code> es un atributo que describe de forma única un elemento. A continuación se muestra un ejemplo de un enlace de anclaje interno y su elemento de destino: <blockquote> <a href="#contacts-header"> Contactos </a> <br> ... <br> <h2 id = "contacts-header"> Contacts </h2> </blockquote> Cuando los usuarios hacen clic en el enlace de Contactos, serán llevados a la sección de la página web con el elemento del encabezado de <b>Contactos</b> . </section>
|
||||
|
||||
## Instructions
|
||||
<section id='instructions'>
|
||||
Cambie su enlace externo a un enlace interno cambiando el atributo <code>href</code> a "# footer" y el texto de "fotos del gato" a "Saltar a la parte inferior".
|
||||
Elimine el atributo <code>target="_blank"</code> de la etiqueta de anclaje ya que esto hace que el documento vinculado se abra en una nueva pestaña de ventana.
|
||||
Luego agregue un atributo <code>id</code> con un valor de "pie de página" al elemento <code><footer></code> en la parte inferior de la página.
|
||||
</section>
|
||||
<section id="instructions"> Cambie su enlace externo a un enlace interno cambiando el atributo <code>href</code> a "# footer" y el texto de "fotos del gato" a "Saltar a la parte inferior". Elimine el atributo <code>target="_blank"</code> de la etiqueta de anclaje ya que esto hace que el documento vinculado se abra en una nueva pestaña de ventana. Luego, agregue un atributo <code>id</code> con un valor de "pie de página" al elemento <code><footer></code> en la parte inferior de la página. </section>
|
||||
|
||||
## Tests
|
||||
<section id='tests'>
|
||||
@@ -29,15 +19,15 @@ Luego agregue un atributo <code>id</code> con un valor de "pie de página&q
|
||||
tests:
|
||||
- text: Solo debe haber una etiqueta de anclaje en su página.
|
||||
testString: 'assert($("a").length == 1, "There should be only one anchor tag on your page.");'
|
||||
- text: Debe haber solo una etiqueta <code class = "notranslate"> footer </code> en su página.
|
||||
- text: Solo debe haber una etiqueta de <code>footer</code> en tu página.
|
||||
testString: 'assert($("footer").length == 1, "There should be only one <code>footer</code> tag on your page.");'
|
||||
- text: 'La etiqueta <code class = "notranslate"> a </code> debe tener un atributo <code class = "notranslate"> href </code> establecido en "#footer".'
|
||||
- text: 'La <code>a</code> etiqueta debe tener un <code>href</code> atributo establecido en "#footer".'
|
||||
testString: 'assert($("a").eq(0).attr("href") == "#footer", "The <code>a</code> tag should have an <code>href</code> attribute set to "#footer".");'
|
||||
- text: La etiqueta <code class = "notranslate"> a </code> no debe tener el atributo <code class = "notranslate"> target </code>
|
||||
- text: La <code>a</code> etiqueta no debe tener un <code>target</code> atributo
|
||||
testString: 'assert(typeof $("a").eq(0).attr("target") == typeof undefined || $("a").eq(0).attr("target") == true, "The <code>a</code> tag should not have a <code>target</code> attribute");'
|
||||
- text: El <code class = "notranslate"> un texto </code> debe ser "Jump to Bottom."
|
||||
- text: El <code>a</code> texto debe ser "Saltar a Pie de página".
|
||||
testString: 'assert($("a").eq(0).text().match(/Jump to Bottom/gi), "The <code>a</code> text should be "Jump to Bottom".");'
|
||||
- text: La etiqueta <code class = "notranslate"> footer </code> debe tener un atributo <code class = "notranslate"> id </code> establecido en "footer."
|
||||
- text: La etiqueta de <code>footer</code> debe tener un atributo de <code>id</code> establecido en "pie de página".
|
||||
testString: 'assert($("footer").eq(0).attr("id") == "footer", "The <code>footer</code> tag should have an <code>id</code> attribute set to "footer".");'
|
||||
|
||||
```
|
||||
@@ -65,6 +55,7 @@ tests:
|
||||
</main>
|
||||
|
||||
<footer>Copyright Cat Photo App</footer>
|
||||
|
||||
```
|
||||
|
||||
</div>
|
||||
|
||||
@@ -1,29 +1,23 @@
|
||||
---
|
||||
id: bad87fee1348bd9aedf08817
|
||||
title: Make Dead Links Using the Hash Symbol
|
||||
localeTitle: Haz enlaces muertos usando el símbolo de hash
|
||||
challengeType: 0
|
||||
videoUrl: ''
|
||||
localeTitle: Haz enlaces muertos usando el símbolo de hash
|
||||
---
|
||||
|
||||
## Description
|
||||
<section id='description'>
|
||||
veces que desea agregar <code>a</code> los elementos a su sitio web antes de saber donde van a unir.
|
||||
Esto también es útil cuando está cambiando el comportamiento de un enlace usando <code>JavaScript</code> , que conoceremos más adelante.
|
||||
</section>
|
||||
<section id="description"> A veces desea agregar <code>a</code> elementos a su sitio web antes de saber donde van a unir. Esto también es útil cuando está cambiando el comportamiento de un enlace usando <code>JavaScript</code> , que conoceremos más adelante. </section>
|
||||
|
||||
## Instructions
|
||||
<section id='instructions'>
|
||||
El valor actual del atributo <code>href</code> es un enlace que apunta a "http://freecatphotoapp.com". Reemplace el valor del atributo <code>href</code> con un <code>#</code> , también conocido como símbolo de hash, para crear un enlace muerto.
|
||||
Por ejemplo: <code>href="#"</code>
|
||||
</section>
|
||||
<section id="instructions"> El valor actual del atributo <code>href</code> es un enlace que apunta a "http://freecatphotoapp.com". Reemplace el valor del atributo <code>href</code> con un <code>#</code> , también conocido como símbolo de hash, para crear un enlace muerto. Por ejemplo: <code>href="#"</code> </section>
|
||||
|
||||
## Tests
|
||||
<section id='tests'>
|
||||
|
||||
```yml
|
||||
tests:
|
||||
- text: 'Su <code>a</code> elemento debe ser un vínculo roto con el valor de la <code>href</code> atributo establecido en '#'.'
|
||||
- text: 'Su <code>a</code> elemento debe ser un vínculo roto con el valor de la <code>href</code> atributo establecido en "#".'
|
||||
testString: 'assert($("a").attr("href") === "#", "Your <code>a</code> element should be a dead link with the value of the <code>href</code> attribute set to "#".");'
|
||||
|
||||
```
|
||||
@@ -45,6 +39,7 @@ tests:
|
||||
<p>Kitty ipsum dolor sit amet, shed everywhere shed everywhere stretching attack your ankles chase the red dot, hairball run catnip eat the grass sniff.</p>
|
||||
<p>Purr jump eat the grass rip the couch scratched sunbathe, shed everywhere rip the couch sleep in the sink fluffy fur catnip scratched.</p>
|
||||
</main>
|
||||
|
||||
```
|
||||
|
||||
</div>
|
||||
|
||||
@@ -1,35 +1,23 @@
|
||||
---
|
||||
id: bad87fee1348bd9aede08817
|
||||
title: Nest an Anchor Element within a Paragraph
|
||||
localeTitle: Anidar un elemento de anclaje dentro de un párrafo
|
||||
challengeType: 0
|
||||
videoUrl: ''
|
||||
localeTitle: Anidar un elemento de anclaje dentro de un párrafo
|
||||
---
|
||||
|
||||
## Description
|
||||
<section id='description'>
|
||||
Puede anidar enlaces dentro de otros elementos de texto.
|
||||
<blockquote><p><br> Here's a <a target="_blank" href="http://freecodecamp.org"> link to freecodecamp.org</a> for you to follow.<br></p></blockquote>
|
||||
Desglosemos el ejemplo:
|
||||
El texto normal se ajusta en el elemento <code>p</code> : <br> <code><p> Here's a ... for you to follow. </p></code>
|
||||
siguiente es el elemento de <code>anchor</code> <code><a></code> (que requiere una etiqueta de cierre <code></a></code> ): <br> <code><a> ... </a></code>
|
||||
<code>target</code> es un atributo de etiqueta de anclaje que especifica dónde abrir el enlace y el valor <code>"_blank"</code> especifica que se abra el enlace en una nueva pestaña
|
||||
<code>href</code> es un atributo de etiqueta de anclaje que contiene la URL Dirección del enlace: <br> <code><a href="http://freecodecamp.org"> ... </a></code>
|
||||
El texto, <strong>"link to freecodecamp.org"</strong> , dentro del elemento de <code>anchor text</code> llamado <code>anchor text</code> , mostrará un enlace para hacer clic: <br> <code><a href=" ... ">link to freecodecamp.org</a></code>
|
||||
La salida final del ejemplo se verá así: <br><p> Aquí hay un <a target="_blank" href="http://freecodecamp.org">enlace a freecodecamp.org</a> para que lo sigas. </p>
|
||||
</section>
|
||||
<section id="description"> Puedes anidar enlaces dentro de otros elementos de texto. <blockquote> <p> <br> Aquí hay un enlace <a target="_blank" href="http://freecodecamp.org"> a freecodecamp.org </a> para que lo siga. <br> </p> </blockquote> Desglosemos el ejemplo: el texto normal está envuelto en el elemento <code>p</code> : <br> <code><p> Here's a ... for you to follow. </p></code> siguiente es el elemento de <code>anchor</code> <code><a></code> (que requiere una etiqueta de cierre <code></a></code> ): <br> <code><a> ... </a></code> <code>target</code> es un atributo de etiqueta de anclaje que especifica dónde abrir el enlace y el valor <code>"_blank"</code> especifica que se abra el enlace en una nueva pestaña <code>href</code> es un atributo de etiqueta de anclaje que contiene la dirección URL de el enlace: <br> <code><a href="http://freecodecamp.org"> ... </a></code> El texto, <strong>"link to freecodecamp.org"</strong> , dentro del elemento de <code>anchor text</code> llamado <code>anchor text</code> , mostrará un enlace para hacer clic: <br> <code><a href=" ... ">link to freecodecamp.org</a></code> El resultado final del ejemplo se verá así: <br><p> Aquí hay un <a target="_blank" href="http://freecodecamp.org">enlace a freecodecamp.org</a> para que lo sigas. </p></section>
|
||||
|
||||
## Instructions
|
||||
<section id='instructions'>
|
||||
Ahora nido de su actual <code>a</code> elemento dentro de un nuevo <code>p</code> elemento (justo a continuación de la <code>main</code> elemento). El nuevo párrafo debe tener un texto que diga "Ver más fotos de gatos", donde "fotos de gatos" es un enlace, y el resto del texto es texto sin formato.
|
||||
</section>
|
||||
<section id="instructions"> Ahora nido de su actual <code>a</code> elemento dentro de un nuevo <code>p</code> elemento (justo a continuación de la <code>main</code> elemento). El nuevo párrafo debe tener un texto que diga "Ver más fotos de gatos", donde "fotos de gatos" es un enlace, y el resto del texto es texto sin formato. </section>
|
||||
|
||||
## Tests
|
||||
<section id='tests'>
|
||||
|
||||
```yml
|
||||
tests:
|
||||
- text: 'Es necesario un <code>a</code> elemento que une a 'http://freecatphotoapp.com'.'
|
||||
- text: 'Es necesario un <code>a</code> elemento que une a "http://freecatphotoapp.com".'
|
||||
testString: 'assert(($("a[href=\"http://freecatphotoapp.com\"]").length > 0 || $("a[href=\"http://www.freecatphotoapp.com\"]").length > 0), "You need an <code>a</code> element that links to "http://freecatphotoapp.com".");'
|
||||
- text: Su <code>a</code> elemento debe tener el texto de anclaje de fotos "gato"
|
||||
testString: 'assert($("a").text().match(/cat\sphotos/gi), "Your <code>a</code> element should have the anchor text of "cat photos"");'
|
||||
@@ -66,6 +54,7 @@ tests:
|
||||
<p>Kitty ipsum dolor sit amet, shed everywhere shed everywhere stretching attack your ankles chase the red dot, hairball run catnip eat the grass sniff.</p>
|
||||
<p>Purr jump eat the grass rip the couch scratched sunbathe, shed everywhere rip the couch sleep in the sink fluffy fur catnip scratched.</p>
|
||||
</main>
|
||||
|
||||
```
|
||||
|
||||
</div>
|
||||
|
||||
@@ -1,23 +1,16 @@
|
||||
---
|
||||
id: bad87fee1348bd9aede08835
|
||||
title: Nest Many Elements within a Single div Element
|
||||
localeTitle: Anidar muchos elementos dentro de un único elemento div
|
||||
challengeType: 0
|
||||
videoUrl: ''
|
||||
localeTitle: Anidar muchos elementos dentro de un único elemento div
|
||||
---
|
||||
|
||||
## Description
|
||||
<section id='description'>
|
||||
El elemento <code>div</code> , también conocido como elemento de división, es un contenedor de propósito general para otros elementos.
|
||||
El elemento <code>div</code> es probablemente el elemento HTML más utilizado de todos.
|
||||
Al igual que cualquier otro elemento que no se cierre automáticamente, puede abrir un elemento <code>div</code> con <code><div></code> y cerrarlo en otra línea con <code></div></code> .
|
||||
</section>
|
||||
<section id="description"> El elemento <code>div</code> , también conocido como elemento de división, es un contenedor de propósito general para otros elementos. El elemento <code>div</code> es probablemente el elemento HTML más utilizado de todos. Al igual que cualquier otro elemento que no se cierre automáticamente, puede abrir un elemento <code>div</code> con <code><div></code> y cerrarlo en otra línea con <code></div></code> . </section>
|
||||
|
||||
## Instructions
|
||||
<section id='instructions'>
|
||||
Anide sus listas de "Cosas que los gatos aman" y "Cosas que los gatos odian", todo dentro de un único elemento <code>div</code> .
|
||||
Sugerencia: intente colocar su etiqueta <code>div</code> apertura sobre el elemento <code>p</code> "Things cats love" y su etiqueta <code>div</code> cierre después de su etiqueta <code>ol</code> cierre para que ambas listas estén dentro de una <code>div</code> .
|
||||
</section>
|
||||
<section id="instructions"> Anida las listas de "Cosas que los gatos aman" y "Cosas que los gatos odian", todo dentro de un único elemento <code>div</code> . Sugerencia: intente colocar la etiqueta <code>div</code> apertura sobre el elemento <code>p</code> "Things cats love" y la etiqueta <code>div</code> cierre después de la etiqueta <code>ol</code> cierre para que ambas listas estén dentro de una <code>div</code> . </section>
|
||||
|
||||
## Tests
|
||||
<section id='tests'>
|
||||
@@ -72,6 +65,7 @@ tests:
|
||||
<button type="submit">Submit</button>
|
||||
</form>
|
||||
</main>
|
||||
|
||||
```
|
||||
|
||||
</div>
|
||||
|
||||
@@ -1,29 +1,16 @@
|
||||
---
|
||||
id: bd7123c8c441eddfaeb5bdef
|
||||
title: Say Hello to HTML Elements
|
||||
localeTitle: Diga hola a los elementos HTML
|
||||
challengeType: 0
|
||||
videoUrl: ''
|
||||
localeTitle: Diga hola a los elementos HTML
|
||||
---
|
||||
|
||||
## Description
|
||||
<section id='description'>
|
||||
Bienvenido a los desafíos de codificación HTML de freeCodeCamp. Estos te guiarán paso a paso a través del desarrollo web.
|
||||
Primero, comenzarás construyendo una página web simple usando HTML. Puede editar el <code>code</code> en su <code>code editor</code> , que está incrustado en esta página web.
|
||||
¿Ve el código en su editor de código que dice <code><h1>Hello</h1></code> ? Eso es un <code>element</code> HTML.
|
||||
La mayoría de los elementos HTML tienen una <code>opening tag</code> y una <code>closing tag</code> .
|
||||
Las etiquetas de apertura tienen este aspecto:
|
||||
<code><h1></code>
|
||||
etiquetas de cierre tienen este aspecto:
|
||||
<code></h1></code>
|
||||
La única diferencia entre las etiquetas de apertura y cierre es la barra diagonal posterior al soporte de apertura de una etiqueta de cierre.
|
||||
Cada desafío tiene pruebas que puede ejecutar en cualquier momento haciendo clic en el botón "Ejecutar pruebas". Cuando pase todas las pruebas, se le solicitará que envíe su solución y pase al siguiente desafío de codificación.
|
||||
</section>
|
||||
<section id="description"> Bienvenido a los desafíos de codificación HTML de freeCodeCamp. Estos te guiarán paso a paso a través del desarrollo web. Primero, comenzarás construyendo una página web simple usando HTML. Puede editar el <code>code</code> en su <code>code editor</code> , que está incrustado en esta página web. ¿Ve el código en su editor de código que dice <code><h1>Hello</h1></code> ? Eso es un <code>element</code> HTML. La mayoría de los elementos HTML tienen una <code>opening tag</code> y una <code>closing tag</code> . Las etiquetas de apertura tienen este aspecto: <code><h1></code> etiquetas de cierre tienen este aspecto: <code></h1></code> La única diferencia entre las etiquetas de apertura y cierre es la barra inclinada hacia delante después del corchete de apertura de una etiqueta de cierre. Cada desafío tiene pruebas que puede ejecutar en cualquier momento haciendo clic en el botón "Ejecutar pruebas". Cuando pase todas las pruebas, se le solicitará que envíe su solución y pase al siguiente desafío de codificación. </section>
|
||||
|
||||
## Instructions
|
||||
<section id='instructions'>
|
||||
Para pasar la prueba en este desafío, cambie el texto de su elemento <code>h1</code> para que diga "Hola mundo".
|
||||
</section>
|
||||
<section id="instructions"> Para pasar la prueba en este desafío, cambia el texto de tu elemento <code>h1</code> para que diga "Hola mundo". </section>
|
||||
|
||||
## Tests
|
||||
<section id='tests'>
|
||||
@@ -44,6 +31,7 @@ tests:
|
||||
|
||||
```html
|
||||
<h1>Hello</h1>
|
||||
|
||||
```
|
||||
|
||||
</div>
|
||||
|
||||
@@ -1,24 +1,16 @@
|
||||
---
|
||||
id: bad87fee1348bd9aedf08820
|
||||
title: Turn an Image into a Link
|
||||
localeTitle: Convertir una imagen en un enlace
|
||||
challengeType: 0
|
||||
videoUrl: ''
|
||||
localeTitle: Convertir una imagen en un enlace
|
||||
---
|
||||
|
||||
## Description
|
||||
<section id='description'>
|
||||
Se puede hacer elementos en enlaces anidando dentro de un <code>a</code> elemento.
|
||||
Nido de su imagen dentro de un <code>a</code> elemento. Aquí hay un ejemplo:
|
||||
<code><a href="#"><img src="https://bit.ly/fcc-running-cats" alt="Three kittens running towards the camera."></a></code>
|
||||
Recuerda usar <code>#</code> como la propiedad <code>href</code> <code>a</code> elemento para convertirlo en un enlace muerto.
|
||||
</section>
|
||||
<section id="description"> Puede hacer que los elementos en los enlaces por los nidos de ellos dentro de un <code>a</code> elemento. Nido de su imagen dentro de un <code>a</code> elemento. Aquí hay un ejemplo: <code><a href="#"><img src="https://bit.ly/fcc-running-cats" alt="Three kittens running towards the camera."></a></code> Recuerda usar <code>#</code> como propiedad <code>href</code> <code>a</code> elemento para convertirlo en un enlace muerto. </section>
|
||||
|
||||
## Instructions
|
||||
<section id='instructions'>
|
||||
Coloque el elemento de imagen existente dentro de un elemento de anclaje.
|
||||
Una vez que hayas hecho esto, desplázate sobre tu imagen con el cursor. El puntero normal de su cursor debe convertirse en el enlace que hace clic en el puntero. La foto es ahora un enlace.
|
||||
</section>
|
||||
<section id="instructions"> Coloque el elemento de imagen existente dentro de un elemento de anclaje. Una vez que hayas hecho esto, desplázate sobre tu imagen con el cursor. El puntero normal de su cursor debe convertirse en el enlace que hace clic en el puntero. La foto es ahora un enlace. </section>
|
||||
|
||||
## Tests
|
||||
<section id='tests'>
|
||||
@@ -51,6 +43,7 @@ tests:
|
||||
<p>Kitty ipsum dolor sit amet, shed everywhere shed everywhere stretching attack your ankles chase the red dot, hairball run catnip eat the grass sniff.</p>
|
||||
<p>Purr jump eat the grass rip the couch scratched sunbathe, shed everywhere rip the couch sleep in the sink fluffy fur catnip scratched.</p>
|
||||
</main>
|
||||
|
||||
```
|
||||
|
||||
</div>
|
||||
|
||||
@@ -1,22 +1,16 @@
|
||||
---
|
||||
id: bad87fee1348bd9aedf08802
|
||||
title: Uncomment HTML
|
||||
localeTitle: Descomentar HTML
|
||||
challengeType: 0
|
||||
videoUrl: ''
|
||||
localeTitle: Descomentar HTML
|
||||
---
|
||||
|
||||
## Description
|
||||
<section id='description'>
|
||||
comentarios son una forma en la que puede dejar comentarios para otros desarrolladores dentro de su código sin afectar el resultado resultante que se muestra al usuario final.
|
||||
comentarios también son una forma conveniente de desactivar el código sin tener que eliminarlo por completo.
|
||||
comentarios en HTML comienzan con <code><!--</code> , y terminan con un <code>--></code>
|
||||
</section>
|
||||
<section id="description"> El comentar es una forma en que puede dejar comentarios para otros desarrolladores dentro de su código sin afectar el resultado resultante que se muestra al usuario final. El comentar también es una forma conveniente de desactivar el código sin tener que eliminarlo por completo. Los comentarios en HTML comienzan con <code><!--</code> , y terminan con <code>--></code> </section>
|
||||
|
||||
## Instructions
|
||||
<section id='instructions'>
|
||||
Descomenta tus elementos <code>h1</code> , <code>h2</code> <code>p</code> .
|
||||
</section>
|
||||
<section id="instructions"> Descomenta tus elementos <code>h1</code> , <code>h2</code> <code>p</code> . </section>
|
||||
|
||||
## Tests
|
||||
<section id='tests'>
|
||||
@@ -49,6 +43,7 @@ tests:
|
||||
|
||||
<p>Kitty ipsum dolor sit amet, shed everywhere shed everywhere stretching attack your ankles chase the red dot, hairball run catnip eat the grass sniff.</p>
|
||||
-->
|
||||
|
||||
```
|
||||
|
||||
</div>
|
||||
|
||||
@@ -1,22 +1,16 @@
|
||||
---
|
||||
id: bad87fee1348bd9aedc08830
|
||||
title: Use HTML5 to Require a Field
|
||||
localeTitle: Usa HTML5 para requerir un campo
|
||||
challengeType: 0
|
||||
videoUrl: ''
|
||||
localeTitle: Usa HTML5 para requerir un campo
|
||||
---
|
||||
|
||||
## Description
|
||||
<section id='description'>
|
||||
Puede requerir campos de formulario específicos para que su usuario no pueda enviar su formulario hasta que él o ella los haya completado.
|
||||
Por ejemplo, si desea hacer que un campo de entrada de texto sea obligatorio, simplemente puede agregar el atributo <code>required</code> dentro de su elemento de <code>input</code> , de esta manera: <code><input type="text" required></code>
|
||||
</section>
|
||||
<section id="description"> Puede requerir campos de formulario específicos para que su usuario no pueda enviar su formulario hasta que él o ella los haya completado. Por ejemplo, si desea hacer que un campo de entrada de texto sea obligatorio, simplemente puede agregar el atributo <code>required</code> dentro de su elemento de <code>input</code> , como este: <code><input type="text" required></code> </section>
|
||||
|
||||
## Instructions
|
||||
<section id='instructions'>
|
||||
Haga que su <code>input</code> texto sea un campo <code>required</code> , para que su usuario no pueda enviar el formulario sin completar este campo.
|
||||
Luego intente enviar el formulario sin ingresar ningún texto. ¿Ves cómo tu formulario HTML5 te notifica que el campo es obligatorio?
|
||||
</section>
|
||||
<section id="instructions"> Haga que su <code>input</code> texto sea un campo <code>required</code> , de modo que su usuario no pueda enviar el formulario sin completar este campo. Luego intente enviar el formulario sin ingresar ningún texto. ¿Ves cómo tu formulario HTML5 te notifica que el campo es obligatorio? </section>
|
||||
|
||||
## Tests
|
||||
<section id='tests'>
|
||||
@@ -59,6 +53,7 @@ tests:
|
||||
<button type="submit">Submit</button>
|
||||
</form>
|
||||
</main>
|
||||
|
||||
```
|
||||
|
||||
</div>
|
||||
|
||||
Reference in New Issue
Block a user