fix(guide): simplify directory structure

guide/spanish/html/tutorials/basic-html/index.md

@@ -0,0 +1,27 @@
+---
+title: Basic HTML
+localeTitle: HTML básico
+---
+## HTML básico
+
+Esto es un talón. [Ayuda a nuestra comunidad a expandirla](https://github.com/freecodecamp/guides/tree/master/src/pages/html/tutorials/basic-html/index.md) .
+
+[Esta guía rápida de estilo ayudará a asegurar que su solicitud de extracción sea aceptada](https://github.com/freecodecamp/guides/blob/master/README.md) .
+
+Estructura de un archivo HTML básico:
+
+```html
+
+<!doctype html> 
+ <html> 
+ 
+  <head> 
+    <title></title> 
+  </head> 
+ 
+  <body> 
+  </body> 
+ </html> 
+```
+
+#### Más información:

guide/spanish/html/tutorials/basic-html/radio-button/index.md

@@ -0,0 +1,24 @@
+---
+title: Radio Button
+localeTitle: Boton de radio
+---
+# Boton de radio
+
+```html
+
+<!DOCTYPE html> 
+ <html> 
+ <body> 
+ 
+ <form action="/action_page.php"> 
+  <input type="radio" name="gender" value="male"> Male<br> 
+  <input type="radio" name="gender" value="female"> Female<br> 
+  <input type="radio" name="gender" value="other"> Other<br> 
+  <input type="submit" value="Submit"> 
+ </form> 
+ 
+ </body> 
+ </html> 
+```
+
+Los botones de radio se pueden usar para seleccionar una sola opción de entre varias opciones. No se le permite elegir 2 o más botones de radio en el mismo campo de selección.

guide/spanish/html/tutorials/center-an-image-using-text-align-center/index.md

@@ -0,0 +1,62 @@
+---
+title: Center an Image Using Text Align Center
+localeTitle: Centrar una imagen usando el centro de alineación de texto
+---
+## Centrar una imagen usando el centro de alineación de texto
+
+Un elemento `<img>` es un elemento en línea (muestra el valor del `inline-block` ). Se puede centrar fácilmente agregando el `text-align: center;` Propiedad CSS al elemento padre que lo contiene
+
+Para centrar una imagen usando `text-align: center;` debe colocar `<img>` dentro de un elemento de nivel de bloque, como un `div` . Dado que la propiedad `text-align` solo se aplica a los elementos de nivel de bloque, coloca `text-align: center;` en el elemento de nivel de bloque de envoltura para lograr un `<img>` centrado horizontalmente.
+
+### Ejemplo
+
+```html
+
+<!DOCTYPE html> 
+ <html> 
+  <head> 
+    <title>Center an Image using text align center</title> 
+    <style> 
+      .img-container { 
+        text-align: center; 
+      } 
+    </style> 
+  </head> 
+  <body> 
+    <div class="img-container"> <!-- Block parent element --> 
+      <img src="user.png" alt="John Doe"> 
+    </div> 
+  </body> 
+ </html> 
+```
+
+**Nota:** El elemento padre debe ser un elemento de bloque. Si no es un elemento de bloque, debe agregar `display: block;` Propiedad CSS junto con la propiedad `text-align` .
+
+```html
+
+<!DOCTYPE html> 
+ <html> 
+  <head> 
+    <title>Center an Image using text align center</title> 
+    <style> 
+      .img-container { 
+        text-align: center; 
+        display: block; 
+      } 
+    </style> 
+  </head> 
+  <body> 
+    <span class="img-container"> <!-- Inline parent element --> 
+      <img src="user.png" alt=""> 
+    </span> 
+  </body> 
+ </html> 
+```
+
+**Demo:** [Codepen](https://codepen.io/aravindio/pen/PJMXbp)
+
+## Documentación
+
+[**alineación de texto** - MDN](https://developer.mozilla.org/en-US/docs/Web/CSS/text-align)
+
+[**\\ ** - MDN](https://developer.mozilla.org/en-US/docs/Web/HTML/Element/img)

guide/spanish/html/tutorials/embedding-youtube-videos/index.md

@@ -0,0 +1,40 @@
+---
+title: Embedding Youtube Videos
+localeTitle: Incrustar videos de Youtube
+---
+## Incrustar videos de Youtube
+
+Probablemente muchas veces haya visto videos incrustados en sus sitios web favoritos. Hoy hablaremos sobre la incorporación de videos de YouTube, lo que es muy fácil de hacer, incluso si usted no tiene ningún conocimiento al respecto. Para esta acción usaremos el elemento `<frame>` , que es muy útil para incrustar otros HTML. Se usa muy a menudo para promocionar algunos productos como adiciones. Tenga en cuenta que no solo está limitado a YouTube, sino que también puede experimentar con otros documentos.
+
+### Elemento `<frame>`
+
+#### Utilizando
+
+Puedes poner fácilmente el video elegido usando el elemento `<frame>` . Pero recuerde, también debe definir la altura y el ancho de su reproductor, por lo que usaremos los atributos `height` y `width` .
+
+¿Qué necesitaremos?
+
+*   Video en YouTube y URL
+*   Elemento `<frame>` (¡No te olvides de cerrarlo!)
+*   Atributos de `width` y `height`
+
+```html
+
+<iframe width="420" height="315" 
+ src="https://www.youtube.com/watch?v=v8kFT4I31es"> 
+ </iframe> 
+```
+
+Los valores insertados se recomiendan, pero puede cambiarlos de la forma que desee.
+
+#### Auto-reproducción
+
+¿Qué deberíamos hacer si queremos que este jugador comience a jugar automáticamente? Simplemente añada a su valor de enlace `?autoplay=1` . Pero tenga cuidado, porque puede ser molesto para muchas personas que visitan su página web.
+
+```html
+
+<iframe width="420" height="315" 
+ src="https://www.youtube.com/watch?v=v8kFT4I31es?autoplay=1"> 
+ </iframe> 
+
+```

guide/spanish/html/tutorials/how-to-create-an-html-button-that-acts-like-a-link/index.md

@@ -0,0 +1,39 @@
+---
+title: How to Create an HTML Button That Acts Like a Link
+localeTitle: Cómo crear un botón HTML que funciona como un enlace
+---
+## Cómo crear un botón HTML que funciona como un enlace
+
+En ocasiones, es posible que desee utilizar un botón para vincular a otra página o sitio web en lugar de enviar un formulario o algo así. Esto es bastante simple de hacer y se puede lograr de varias maneras.
+
+Una forma es simplemente envolver su etiqueta `<button>` en una etiqueta `<a>` :
+
+```html
+
+<a href='https://www.freecodecamp.org/'><button>Link To freeCodeCamp</button></a> 
+```
+
+Esto transforma todo su botón en un enlace.
+
+Una segunda opción es crear su enlace como lo haría normalmente con su etiqueta `<a>` y luego diseñarlo a través de CSS:
+
+```html
+
+<a href='https://www.freecodecamp.org/'>Link To freeCodeCamp</a> 
+```
+
+Una vez que haya creado su enlace, puede usar CSS para que se vea como un botón. Por ejemplo, podría agregar un borde, un color de fondo, algunos estilos para cuando el usuario esté moviendo el enlace ...
+
+Otra forma de agregar un botón es envolver una `input` dentro de las etiquetas de `form` . Especifique la URL de destino deseada en el atributo de acción de formulario.
+
+```html
+
+<form action="http://google.com"> 
+    <input type="submit" value="Go to Google" /> 
+ </form> 
+```
+
+#### Más información:
+
+*   [Guía FreeCodeCamp - botones de estilo](https://guide.freecodecamp.org/css/css-buttons/)
+*   [¿Cómo crear un botón HTML que actúe como un enlace?](https://stackoverflow.com/questions/2906582/how-to-create-an-html-button-that-acts-like-a-link)

guide/spanish/html/tutorials/how-to-horizontally-center-a-div-tag-in-another-div-tag/index.md

@@ -0,0 +1,67 @@
+---
+title: How to Horizontally Center a Div Tag in Another Div Tag
+localeTitle: Cómo centrar horizontalmente una etiqueta Div en otra etiqueta Div
+---
+## Cómo centrar horizontalmente una etiqueta Div en otra etiqueta Div
+
+Centrar horizontalmente un `<div>` dentro de otro `<div>` es bastante fácil.
+
+Comencemos creando dos etiquetas div con las clases "parent" y "child". El padre será nuestro contenedor, y el niño será el `<div>` que estamos centrando horizontalmente.
+
+```html
+
+<!DOCTYPE html> 
+ <html> 
+ <head> 
+  <meta charset="UTF-8"> 
+  <title>How to Horizontally Center a Div Tag in Another Div Tag</title> 
+ </head> 
+ <body> 
+  <div class="parent"> 
+    <div class="child"> 
+      <p>This is the center.</p> 
+    </div> 
+  </div> 
+ </body> 
+ </html> 
+```
+
+Hay un par de maneras en que puede abordar esto, pero para este tutorial, concentrémonos en dos. En la primera, centraremos a nuestro hijo `<div>` utilizando el `margin` y en la segunda, utilizaremos `flexbox` .
+
+### Ejemplo de centrado de una etiqueta div con márgenes
+
+Si especifica un `width` en su div hijo, puede usar el `margin: auto` . Esto centrará a su hijo `<div>` distribuyendo uniformemente los márgenes izquierdo y derecho.
+
+```css
+.parent { 
+  border: 2px solid red; 
+ } 
+ 
+ .centered-child { 
+  width: 50%; 
+  margin: auto; 
+  border: 1px solid black; 
+ } 
+```
+
+### Ejemplo de centrado de una etiqueta Div con Flexbox
+
+Usar flexbox para centrar un `<div>` es ligeramente diferente. Primero, no es necesario que especifique el `width` en su hijo `<div>` . En segundo lugar, en realidad centra el hijo `<div>` aplicando las propiedades css en el `<div>` .
+
+Para centrar a un niño `<div>` usando flexbox, debe usar `display: flex` junto con `justify-content: center` en el padre `<div>` .
+
+```css
+.parent { 
+  display: flex; 
+  justify-content: center; 
+  border: 2px solid red; 
+ } 
+ 
+ .centered-child { 
+  border: 1px solid black; 
+ } 
+```
+
+#### Más información:
+
+[Matriz de soporte de Flexbox](http://caniuse.com/#search=flexbox)

guide/spanish/html/tutorials/how-to-insert-spaces-or-tabs-in-text-using-html-and-css/index.md

@@ -0,0 +1,39 @@
+---
+title: How to Insert Spaces or Tabs in Text Using HTML and CSS
+localeTitle: Cómo insertar espacios o tabulaciones en texto usando HTML y CSS
+---
+## Cómo insertar espacios o tabulaciones en texto usando HTML y CSS
+
+Hay una multitud de formas de insertar espacios usando html. Por simplicidad lo haremos repase uno de estos, que están insertando una etiqueta Span.
+
+## Etiqueta Span
+
+`<span>`
+
+Las etiquetas de `<span>` son etiquetas de cierre automático, lo que significa que no necesitan un `/>` .
+
+## Ejemplo de span
+
+A continuación se muestra un ejemplo de cómo una etiqueta `<span>` inserta un espacio entre el texto.
+
+`<p>Hello may name is <span> James</p>`
+
+Si asigna una clase a su `<span>` entonces podría agregarle algo de css. Al igual que,
+
+`<p>Hello my name is <span class=tab> James</p>`
+
+Luego, ya sea en una hoja de estilo externa o en una hoja de estilo interna, puede dar la `class .tab` Algunas propiedades.
+
+## Ejemplo de clase de span
+
+Por ejemplo
+
+`.tab {padding-left: 2px;}`
+
+También puede dar a `<span>` algunas propiedades de estilo en línea, como se muestra a continuación.
+
+`<p>Hello my name is <span style="padding-left: 2px;"> James</p>`
+
+## Más información
+
+Para más información sobre la etiqueta o sobre; Cómo insertar espacios o tabulaciones en el texto Utilizando HTML y CSS, puede visitar w3schools. https://www.w3schools.com/tags/tag\_span.asp

guide/spanish/html/tutorials/how-to-use-links/index.md

@@ -0,0 +1,39 @@
+---
+title: How to Use Links
+localeTitle: Cómo usar los enlaces
+---
+## Cómo usar los enlaces
+
+En HTML puede usar la etiqueta `<a>` para crear un enlace. Por ejemplo, puede escribir `<a href="https://www.freecodecamp.org/">freeCodeCamp</a>` para crear un enlace al sitio web de freeCodeCamp.
+
+Los enlaces se encuentran en casi todas las páginas web. Los enlaces permiten a los usuarios hacer clic de una página a otra.
+
+Los enlaces HTML son hipervínculos. Puede hacer clic en un enlace y saltar a otro documento.
+
+Cuando mueva el mouse sobre un enlace, la flecha del mouse se convertirá en una pequeña mano.
+
+Nota: Un enlace no tiene que ser texto. Puede ser una imagen o cualquier otro elemento HTML.
+
+En HTML, los enlaces se definen con la etiqueta:
+
+```html
+
+<a href="url">link text</a> 
+```
+
+Ejemplo
+
+```html
+
+<a href="https://www.freecodecamp.org/">Visit our site for tutorials</a> 
+```
+
+El atributo href especifica la dirección de destino (https://www.freecodecamp.org) del enlace.
+
+El texto del enlace es la parte visible (visite nuestro sitio para ver tutoriales).
+
+Al hacer clic en el texto del enlace se enviará a la dirección especificada.
+
+#### Más información:
+
+*   [MDN -](https://developer.mozilla.org/en-US/docs/Web/HTML/Element/a) Referencia de [HTML](https://developer.mozilla.org/en-US/docs/Web/HTML/Element/a)

guide/spanish/html/tutorials/how-to-use-lists/index.md

@@ -0,0 +1,85 @@
+---
+title: How to Use Lists
+localeTitle: Cómo usar las listas
+---
+## Cómo usar las listas
+
+Las listas se utilizan para especificar un conjunto de elementos consecutivos o información relacionada de forma bien formada y semántica, como una lista de ingredientes o una lista de pasos de procedimientos. El marcado HTML tiene tres tipos diferentes de listas: listas **ordenadas** , no **ordenadas** y listas de **descripción** .
+
+### Listas ordenadas
+
+Una lista ordenada se utiliza para agrupar un conjunto de elementos relacionados, en un orden específico. Esta lista se crea con la etiqueta `<ol>` . Cada elemento de la lista está rodeado con la etiqueta `<li>` .
+
+##### Código
+
+```html
+
+<ol> 
+    <li>Mix ingredients</li> 
+    <li>Bake in oven for an hour</li> 
+    <li>Allow to stand for ten minutes</li> 
+ </ol> 
+```
+
+##### Ejemplo
+
+1.  Mezclar los ingredientes
+2.  Hornear en horno durante una hora
+3.  Dejar reposar durante diez minutos.
+
+### Listas Desordenadas
+
+Una lista desordenada se utiliza para agrupar un conjunto de elementos relacionados, sin ningún orden en particular. Esta lista se crea con la etiqueta `<ul>` . Cada elemento de la lista está rodeado con la etiqueta `<li>` .
+
+##### Código
+
+```html
+
+<ul> 
+    <li>Chocolate Cake</li> 
+    <li>Black Forest Cake</li> 
+    <li>Pineapple Cake</li> 
+ </ul> 
+```
+
+#### Ejemplo
+
+*   Pastel de chocolate
+*   Torta del bosque negro
+*   Pastel de piña
+
+### Descripción de listas
+
+Una lista de descripción se utiliza para especificar una lista de términos y sus descripciones. Esta lista se crea con la etiqueta `<dl>` . Cada elemento de la lista está rodeado con la etiqueta `<dd>` .
+
+##### Código
+
+```html
+
+<dl> 
+    <dt>Bread</dt> 
+    <dd>A baked food made of flour.</dd> 
+    <dt>Coffee</dt> 
+    <dd>A drink made from roasted coffee beans.</dd> 
+ </dl> 
+```
+
+##### Salida
+
+Pan de molde
+
+Una comida al horno hecha de harina.
+
+café
+
+Una bebida hecha de granos de café tostados.
+
+#### Lista de estilos
+
+También puede controlar el estilo de la lista. Puede utilizar la propiedad de listas de `list-style` de lista. Su lista puede ser viñetas, cuadradas, en números romanos o puede ser imágenes que desee.
+
+propiedad de `list-style` es una forma abreviada de `list-style-type` `list-style-position` `list-style-image` , `list-style-position` `list-style-image` , `list-style-image` .
+
+#### Más información:
+
+\[Listas HTML · Documentos de plataforma web\] (https://webplatform.github.io/docs/guides/html\_lists/ )

guide/spanish/html/tutorials/images-in-html/index.md

@@ -0,0 +1,51 @@
+---
+title: Images in HTML
+localeTitle: Imágenes en HTML
+---
+## Introducción
+
+Puedes definir imágenes usando la etiqueta `<img>` . No tiene una etiqueta de cierre ya que solo puede contener atributos. Para insertar una imagen, defina la fuente y un texto alternativo que se muestra cuando la imagen no se puede representar.
+
+`src` : este atributo proporciona la url para la imagen presente en su PC / portátil o para ser incluido en otro sitio web. Recuerde que el enlace proporcionado no debe romperse, de lo contrario la imagen no se producirá en su página web.
+
+`alt` : este atributo se utiliza para superar el problema de la imagen rota o la incapacidad de su navegador para no poder producir una imagen en la página web. Este atributo como nombre sugiere proporciona "Alternativa" a la imagen que es un 'TEXTO' que describe la imagen
+
+## Ejemplo
+
+```html
+
+<img src="URL of the Image" alt="Descriptive Title" /> 
+```
+
+### Para definir la altura y el ancho de una imagen, puede utilizar el atributo de altura y anchura:
+
+```html
+
+<img src="URL of the Image" alt="Descriptive Title" height="100" width="150"/> 
+```
+
+### También puede definir el grosor del borde (0 significa que no hay borde):
+
+```html
+
+<img src="URL of the Image" alt="Descriptive Title" border="2"/> 
+```
+
+### Alinear una imagen:
+
+```html
+
+<img src="URL of the Image" alt="Descriptive Title" align="left"/> 
+```
+
+### También puede utilizar estilos dentro de un atributo de estilo:
+
+```html
+
+<img src="URL of the Image" alt="Descriptive Title" style="width: 100px; height: 150px;"/> 
+```
+
+#### Más información
+
+*   Vea la página de freeCodeCamp en la etiqueta `<img>` [aquí](https://guide.freecodecamp.org/html/elements/img-tag) .
+*   Para obtener más detalles sobre las imágenes en HTML, consulte los [documentos de MDN](https://developer.mozilla.org/en-US/docs/Web/HTML/Element/Img)

guide/spanish/html/tutorials/index.md

@@ -0,0 +1,11 @@
+---
+title: Tutorials
+localeTitle: Tutoriales
+---
+## Tutoriales
+
+Esto es un talón. [Ayuda a nuestra comunidad a expandirla](https://github.com/freecodecamp/guides/tree/master/src/pages/html/tutorials/index.md) .
+
+[Esta guía rápida de estilo ayudará a asegurar que su solicitud de extracción sea aceptada](https://github.com/freecodecamp/guides/blob/master/README.md) .
+
+#### Más información:

guide/spanish/html/tutorials/redirect-from-an-html-page/index.md

@@ -0,0 +1,13 @@
+---
+title: Redirect from an HTML Page
+localeTitle: Redirigir desde una página HTML
+---
+## Redirigir desde una página HTML
+
+Si ha cambiado la URL de su página HTML y desea redirigir automáticamente a sus visitantes a la nueva ubicación de la página, puede usar una etiqueta meta dentro del área `<head>` de su antigua página HTML.
+
+`html <head> <meta http-equiv="refresh" content="0; url=http://freecodecamp.org/" /> </head>` En el ejemplo anterior, los visitantes a la página serán redirigidos desde su antigua página html a [http://freecodecamp.org/](http://freecodecamp.org/) . El atributo de `content="0` significa que el navegador redireccionará a la nueva página después de 0 segundos. Cambiar el valor a `content="2` redirigirá después de 2 segundos.
+
+#### Más información:
+
+*   [MDN - Redirecciones en HTTP](https://developer.mozilla.org/en-US/docs/Web/HTTP/Redirections)

guide/spanish/html/tutorials/text-formatting-in-html/index.md

@@ -0,0 +1,61 @@
+---
+title: Text Formatting in HTML
+localeTitle: Formato de texto en HTML
+---
+## Formato de texto en HTML
+
+HTML le proporciona una gran cantidad de elementos útiles para el formato de texto. Permite hacer tu texto: negrita, cursiva, marca y mucho más. Cambiar el estilo de tu texto no es sin ninguna razón: lo principal es hacer que el lector revise algunas notas importantes.
+
+### Audaz y fuerte
+
+Puede cambiar fácilmente el significado de su texto usando el elemento HTML `<b>` . Hace que las palabras estén en negrita, cuya función es seleccionar el fragmento de secuencia. Por ejemplo:
+```
+The most important part of your code is <b>the end</b>, because if you <b>don't close</b> the element, it will affect to <b>everything</b>! 
+```
+
+También puede usar `<strong>` también - también agrega importancia "fuerte" semántica. Su navegador no reconoce una diferencia entre esos dos elementos, pero existe.
+
+### Cursiva y enfatizada
+
+Generalmente se usa cuando se cita algo o se pone una traducción de una palabra en muchos artículos. Los pone en cursiva - solo imagina un poco pateado en las letras correctas. Por ejemplo:
+```
+Theatre - <i>teatos</i>, <i>teates</i> and <i>teatron</i>. 
+```
+
+También puede usar `<em>` , también agrega una importancia semántica "enfatizada". Su navegador no reconoce una diferencia entre esos dos elementos, pero existe.
+
+### Pequeña
+
+Hace que su texto sea más pequeño que el tamaño normal de la fuente usada. El significado de este elemento se cambió en HTML5: representa comentarios laterales y letra pequeña.
+
+`Normal, <small>small</small>, normal, <small>small</small>!`
+
+### Marcado
+
+El elemento `<mark>` hace que su texto sea marcado - en diferentes palabras, hace que su texto esté resaltado. Puede usarlo para decirle a los lectores que es una de las cosas importantes en su artículo. Por ejemplo:
+
+`HTML is full of things and <mark>it's our journey</mark> to get known them better!`
+
+### Eliminado
+
+El elemento `<del>` hace que tu texto sea tachado en el centro. Es útil mostrar cambios en sus documentos.
+
+`WWI started in <del>1913</del> 1914 year.`
+
+### Insertado
+
+La etiqueta `<ins>` hace que su texto se inserte en el artículo. Usar otras palabras que lo hace mucho más fácil de entender - agregó. Muestra una línea debajo del texto insertado.
+
+`HTML isn't boring. <ins>You can make a lot of combinations of elements!</ins>`
+
+### Suscrito
+
+El uso del elemento `<sub>` le proporciona un formato útil como texto con subíndices (mostrándolo más pequeño en la parte inferior). Hay un código de ejemplo:
+
+`This was in 2003 year <sub>(needs a link).`
+
+### Superíndice
+
+Si desea hacer un texto opuesto al subíndice, puede utilizar fácilmente el elemento `<sup>` . Muestra un texto más pequeño en la parte superior.
+
+`10<sup>x+y</sup> = 1000`

guide/spanish/html/tutorials/use-tab-space-instead-of-multiple-non-breaking-spaces-nbsp/index.md

@@ -0,0 +1,11 @@
+---
+title: Use Tab Space Instead of Multiple Non Breaking Spaces Nbsp
+localeTitle: Use el espacio de tabulación en lugar de múltiples espacios sin romper Nbsp
+---
+## Use el espacio de tabulación en lugar de múltiples espacios sin romper Nbsp
+
+En HTML, la forma más común de agregar múltiples espacios es agregando `&nbsp;` para cada espacio. Para agregar un espacio de tabulación, coloque su texto en etiquetas `<pre>` , por ejemplo, `<pre>My Text Here</pre>` y cada pestaña se tratará como ocho espacios. Otra forma de agregar múltiples espacios en HTML sería usar CSS, por ejemplo, `<p style="padding-right: 5px;">My Text Here</p>` .
+
+#### Más información:
+
+*   [MDN - El elemento de texto preformateado](https://developer.mozilla.org/en-US/docs/Web/HTML/Element/pre)