initial commit

10 files changed, 1814 insertions, 0 deletions

diff --git a/files/es/learn/getting_started_with_the_web/css_basics/index.html b/files/es/learn/getting_started_with_the_web/css_basics/index.html
new file mode 100644
index 0000000000..af79920af3
--- /dev/null
+++ b/files/es/learn/getting_started_with_the_web/css_basics/index.html
@@ -0,0 +1,283 @@
+---
+title: CSS básico
+slug: Learn/Getting_started_with_the_web/CSS_basics
+tags:
+  - CSS
+  - Codificacion/Scripting
+  - Estilos/Styling
+  - Principiante
+  - Web
+  - aprende
+translation_of: Learn/Getting_started_with_the_web/CSS_basics
+---
+<div>{{LearnSideBar}}</div>
+
+<div>{{PreviousMenuNext("Learn/Getting_started_with_the_web/HTML_basics", "Learn/Getting_started_with_the_web/JavaScript_basics","Learn/Getting_started_with_the_web")}}</div>
+
+<div class="summary">
+<p>CSS (<em>Hojas de Estilo en Cascada</em>) es el código que usas para dar estilo a tu página web. <em>CSS Básico</em> te lleva a través de lo que tú necesitas para empezar. Contestará a preguntas del tipo: ¿Cómo hago mi texto rojo o negro? ¿Cómo hago que mi contenido se muestre en tal y tal lugar de la pantalla? ¿Cómo decoro mi página web con imágenes de fondo y colores?</p>
+</div>
+
+<h2 id="Entonces_¿qué_es_CSS_realmente">Entonces ¿qué es CSS, realmente?</h2>
+
+<p>Como HTML, CSS (<em>Cascading Style Sheets</em>) u Hojas de estilo en cascada en español, no es realmente un lenguaje de programación, tampoco es un lenguaje de marcado. Es un <em>lenguaje de hojas de estilo,</em> es decir, te permite aplicar estilos de manera selectiva a elementos en documentos HTML. Por ejemplo, para seleccionar <strong>todos</strong> los elementos de párrafo en una página HTML y volver el texto dentro de ellos de color rojo, has de escribir este CSS:</p>
+
+<pre class="brush: css notranslate">p {
+  color: red;
+}</pre>
+
+<p>Vas a probarlo: pega estas tres líneas de CSS en un nuevo archivo en tu editor de texto y guarda este archivo como <code>style.css</code> en tu directorio <code>styles</code> (estilos).</p>
+
+<p>Pero aún debes aplicar el CSS a tu documento HTML, de otra manera el estilo CSS no cambiará cómo tu navegador muestra el documento HTML. (Si no has seguido nuestro proyecto, lee <a href="/es/docs/Learn/Getting_started_with_the_web/Manejando_los_archivos">Manejo de archivos</a> y <a href="/es/docs/Learn/Getting_started_with_the_web/HTML_basics">HTML básico</a> para averiguar qué necesitas hacer primero.)</p>
+
+<ol>
+ <li>Abre tu archivo <code>index.html</code> y pega la siguiente línea en algún lugar dentro del {{htmlelement("head")}}, es decir, entre las etiquetas <code>&lt;head&gt;</code> y <code>&lt;/head&gt;</code>:
+
+  <pre class="brush: html notranslate">&lt;link href="styles/style.css" rel="stylesheet" type="text/css"&gt;</pre>
+ </li>
+ <li>Guarda el archivo <code>index.html</code> y cárgalo en tu navegador. Debes ver algo como esto:</li>
+</ol>
+
+<p><img alt="Un logo de Mozilla y algunos párrafos. El texto del párrafo ha sido estilizado en rojo por nuestro css." src="https://mdn.mozillademos.org/files/9435/website-screenshot-styled.png" style="display: block; height: 832px; margin: 0px auto; width: 711px;">Si tu texto del párrafo ahora es rojo, ¡felicitaciones, ya has escrito tu primer CSS de forma exitosa!</p>
+
+<h3 id="Anatomía_de_una_regla_CSS">Anatomía de una regla CSS</h3>
+
+<p>Observa el código CSS de arriba, un poco más a detalle:</p>
+
+<p><img alt="Partes de una declaracion de css" src="https://mdn.mozillademos.org/files/11925/csspartes.png" style="display: block; height: 480px; margin: 0px auto; width: 850px;"></p>
+
+<p>La estructura completa es llamada <strong>regla predeterminada</strong> (pero a menudo «regla» para abreviar). Nota también los nombres de las partes individuales:</p>
+
+<dl>
+ <dt>Selector</dt>
+ <dd>El elemento HTML en el que comienza la regla. Esta selecciona el(los) elemento(s) a dar estilo (en este caso, los elementos {{htmlelement("p")}} ). Para dar estilo a un elemento diferente, solo cambia el selector.</dd>
+ <dt>Declaración</dt>
+ <dd>Una sola regla como <code>color: red;</code> especifica a cuál de las <strong>propiedades</strong> del elemento quieres dar estilo.</dd>
+ <dt>Propiedades</dt>
+ <dd>Maneras en las cuales puedes dar estilo a un elemento HTML. (En este caso, <code>color</code> es una propiedad del elemento {{htmlelement("p")}} ). En CSS, seleccionas qué propiedad quieres afectar en tu regla.</dd>
+ <dt>Valor de la propiedad</dt>
+ <dd>A la derecha de la propiedad, después de los dos puntos (:), tienes el <strong>valor de la propiedad</strong>, para elegir una de las muchas posibles apariencias para una propiedad determinada (hay muchos valores para <code>color</code> además de <code>red</code>).</dd>
+</dl>
+
+<p>Nota las otras partes importantes de la sintaxis:</p>
+
+<ul>
+ <li>Cada una de las reglas (aparte del selector) deben estar encapsuladas entre llaves (<code>{}</code>).</li>
+ <li>Dentro de cada declaración, debes usar los dos puntos (<code>:</code>) para separar la propiedad de su valor.</li>
+ <li>Dentro de cada regla, debes usar el punto y coma (<code>;</code>) para separar una declaración de la siguiente.</li>
+</ul>
+
+<p>De este modo para modificar varios valores de propiedad a la vez, solo necesitas escribirlos separados por punto y coma (;), así:</p>
+
+<pre class="brush: css notranslate">p {
+  color: red;
+  width: 500px;
+  border: 1px solid black;
+}</pre>
+
+<h3 id="Seleccionar_varios_elementos">Seleccionar varios elementos</h3>
+
+<p>También puedes seleccionar varios elementos y aplicar una sola regla a todos ellos. Incluye varios selectores separados por comas (,). Por ejemplo:</p>
+
+<pre class="brush: css notranslate">p,li,h1 {
+  color: red;
+}</pre>
+
+<h3 id="Diferentes_tipos_de_selectores">Diferentes tipos de selectores</h3>
+
+<p>Existen muchos tipos diferentes de selectores. Antes, solo viste los <strong>selectores de elementos</strong>, los cuales seleccionan todos los elementos de un tipo dado en los documentos HTML. Sin embargo puedes hacer selecciones más específicas que esas. En seguida están algunos de los tipos de selectores más comunes:</p>
+
+<table class="standard-table">
+ <thead>
+  <tr>
+   <th scope="col">Nombre del selector</th>
+   <th scope="col">Qué selecciona</th>
+   <th scope="col">Ejemplo</th>
+  </tr>
+ </thead>
+ <tbody>
+  <tr>
+   <td>Selector de elemento (llamado algunas veces selector de etiqueta o tipo)</td>
+   <td>Todos los elementos HTML del tipo especificado.</td>
+   <td><code>p</code><br>
+    Selecciona <code>&lt;p&gt;</code></td>
+  </tr>
+  <tr>
+   <td>Selector de identificación (ID)</td>
+   <td>El elemento en la página con el ID especificado (en una página HTML dada, solo se permite un único elemento por ID).</td>
+   <td><code>#mi-id</code><br>
+    Selecciona <code>&lt;p id="mi-id"&gt;</code> y <code>&lt;a id="mi-id"&gt;</code></td>
+  </tr>
+  <tr>
+   <td>Selector de clase</td>
+   <td>Los elementos en la página con la clase especificada (una clase puede aparecer varias veces en una página).</td>
+   <td><code>.mi-clase</code><br>
+    Selecciona <code>&lt;p class="mi-clase"&gt;</code> y <code>&lt;a class="mi-clase"&gt;</code></td>
+  </tr>
+  <tr>
+   <td>Selector de atributo</td>
+   <td>Los elementos en una página con el atributo especificado.</td>
+   <td><code>img[src]</code><br>
+    Selecciona <code>&lt;img src="mimagen.png"&gt;</code> pero no <code>&lt;img&gt;</code></td>
+  </tr>
+  <tr>
+   <td>Selector de pseudoclase</td>
+   <td>Los elementos especificados, pero solo cuando esté en el estado especificado, por ejemplo cuando el puntero esté sobre él.</td>
+   <td><code>a:hover</code><br>
+    Selecciona <code>&lt;a&gt;</code>, pero solo cuando el puntero esté sobre el enlace.</td>
+  </tr>
+ </tbody>
+</table>
+
+<p>Existen muchos más selectores para explorar, y podrás encontrar una lista más detallada en la <a href="/es/docs/Learn/CSS/Building_blocks/Selectores_CSS">guía de Selectores</a>.</p>
+
+<h2 id="Fuentes_y_texto">Fuentes y texto</h2>
+
+<p>Ahora que has explorado lo básico de CSS, empieza por añadir información y algunas reglas más a tu archivo <code>style.css</code> para que tu ejemplo se vea bonito. Primero, haz que tus fuentes y texto luzcan un poco mejor.</p>
+
+<ol>
+ <li>Antes que nada, regresa y busca las <a href="/es/docs/Learn/Getting_started_with_the_web/What_will_your_website_look_like#Fuente">fuentes de Google Fonts</a> que guardaste en un lugar seguro. Agrega el elemento {{htmlelement("link")}}<code>...</code> en algún lugar del <em>head</em> de tu archivo <code>index.html</code> (de nuevo, en cualquier lugar entre las etiquetas {{htmlelement("head")}} y <code>&lt;/head&gt;</code>). Debe verse algo así:
+
+  <pre class="brush: html notranslate">&lt;link href="https://fonts.googleapis.com/css2?family=Open+Sans" rel="stylesheet" type="text/css"&gt;</pre>
+ </li>
+ <li>Luego, borra la regla existente en tu archivo <code>style.css</code>. Fue una buena prueba, pero el texto en rojo en realidad no se ve muy bien.</li>
+ <li>
+  <p>Añade las siguientes líneas (que se muestran a continuación), sustituyendo la asignación de <code>font-family</code> por tu selección de <code>font-family</code> que obtuviste en <a href="/es/docs/Learn/Getting_started_with_the_web/What_will_your_website_look_like#Fuente">¿Cuál será la apariencia de tu sitio Web?</a> La propiedad <code>font-family</code> se refiere a la(s) fuente(s) que deseas usar en tu texto. Esta regla define una fuente base global y un tamaño de fuente para usar en toda la página. Dado que {{htmlelement("html")}} es el elemento primario (o padre) de toda la página, todos los elementos contenidos dentro de él heredan las propiedades <code>font-size</code> y <code>font-family</code>):</p>
+
+  <pre class="brush: css notranslate">html {
+  font-size: 10px; /* px quiere decir 'píxeles': el tamaño de la fuente base es ahora de 10 píxeles de altura */
+  font-family: "Open Sans", sans-serif; /* Este debe ser el resto del resultado que obtuviste de Google fonts */
+}</pre>
+
+  <div class="note">
+  <p><strong>Nota</strong>: se ha añadido un comentario para explicar qué significa «px». Todo lo que está en un documento de CSS entre <code>/*</code> y <code>*/</code> es un <strong>comentario en CSS</strong>, el cual el navegador descarta cuando carga el código. Este es un espacio donde puedes escribir notas útiles sobre lo que estás haciendo.</p>
+  </div>
+ </li>
+ <li>Ahora escoge el tamaño de fuente para los elementos que contienen texto dentro del cuerpo del HTML ({{htmlelement("h1")}}, {{htmlelement("li")}}, y {{htmlelement("p")}}). También centra el texto del título, escoge un ancho de línea y espaciado entre letras en el contenido del texto para hacerlo un poco más legible:
+  <pre class="brush: css notranslate">h1 {
+  font-size: 60px;
+  text-align: center;
+}
+
+p, li {
+  font-size: 16px;
+  line-height: 2;
+  letter-spacing: 1px;
+}</pre>
+ </li>
+</ol>
+
+<p>Puedes ajustar estos valores en px para lograr que tu diseño luzca como desees, pero por lo general tu diseño debe verse así:</p>
+
+<p><img alt="Un logo de Mozilla y algunos párrafos. se ha establecido una fuente sans-serif, se han ajustado los tamaños de las fuentes, la altura de las líneas y el espaciado de las letras, y se ha centrado el encabezamiento de la página principal." src="https://mdn.mozillademos.org/files/9447/website-screenshot-font-small.png" style="display: block; height: 1020px; margin: 0px auto; width: 921px;"></p>
+
+<h2 id="Cajas_cajas_todo_se_trata_de_cajas">Cajas, cajas, todo se trata de cajas</h2>
+
+<p>Una cosa que notarás sobre la escritura de CSS es que trata mucho sobre cajas —ajustando su tamaño, color, posición, etc—. Puedes pensar en la mayoría de los elementos HTML de tu página como cajas apiladas una sobre la otra.</p>
+
+<p><img alt="Una gran pila de cajas o cajones puestos uno encima del otro." src="https://mdn.mozillademos.org/files/9441/boxes.jpg" style="display: block; height: 463px; margin: 0px auto; width: 640px;"></p>
+
+<p>No es de extrañar que el diseño de CSS esté basado principalmente en el <em>modelo de caja</em>. Cada una de las cajas que ocupa espacio en tu página tiene propiedades como estas:</p>
+
+<ul>
+ <li><code>padding</code> (relleno), el espacio alrededor del contenido. En el ejemplo siguiente, es el espacio alrededor del texto del párrafo.</li>
+ <li><code>border</code> (marco), la línea que se encuentra fuera del relleno.</li>
+ <li><code>margin</code> (margen), el espacio fuera del elemento que lo separa de los demás.</li>
+</ul>
+
+<p><img alt="tres cajas puestas una dentro de otra. De fuera a dentro están etiquetadas con el margen, el borde y el relleno" src="https://mdn.mozillademos.org/files/9443/box-model.png" style="display: block; height: 450px; margin: 0px auto; width: 574px;"></p>
+
+<p>En esta sección también se utiliza:</p>
+
+<ul>
+ <li><code>width</code> (ancho del elemento)</li>
+ <li><code>background-color</code>, el color de fondo del contenido y del relleno</li>
+ <li><code>color</code>, el color del contenido del elemento (generalmente texto)</li>
+ <li><code>text-shadow</code>: coloca una sombra difuminada en el texto dentro del elemento</li>
+ <li><code>display</code>: selecciona el modo de visualización para el elemento (no te preocupes de esto por ahora)</li>
+</ul>
+
+<p>Bien, ¡continúa y agrega más código CSS a la página! Sigue añadiendo estas reglas nuevas al final de la página, y no temas experimentar cambiando los valores para ver cómo resulta.</p>
+
+<h3 id="Cambiar_el_color_de_la_página">Cambiar el color de la página</h3>
+
+<pre class="brush: css notranslate">html {
+  background-color: #00539F;
+}</pre>
+
+<p>Esta regla asigna un color de fondo a la página entera. Puedes cambiar el código de color por cualquiera <a href="/es/docs/Learn/Getting_started_with_the_web/What_will_your_website_look_like#Color_de_tema">como el que elegiste usar en tu proyecto</a>.</p>
+
+<h3 id="Dar_estilo_al_cuerpo_del_documento">Dar estilo al cuerpo del documento</h3>
+
+<pre class="brush: css notranslate">body {
+  width: 600px;
+  margin: 0 auto;
+  background-color: #FF9500;
+  padding: 0 20px 20px 20px;
+  border: 5px solid black;
+}</pre>
+
+<p>Ahora tienes varias declaraciones en el elemento <a href="/es/docs/Web/HTML/Element/body">body</a>. Revisa una por una:</p>
+
+<ul>
+ <li><code>width: 600px;</code> — esto hará que el cuerpo siempre tenga 600 píxeles de ancho.</li>
+ <li><code>margin: 0 auto;</code> — cuando seleccionas dos valores dentro de propiedades como <code>margin</code> o <code>padding</code>, el primer valor afectará los lados superior (top) <strong>e</strong> inferior (bottom) (en este caso haciéndolo en 0), y el segundo valor los lados izquierdo (left) <strong>y</strong> derecho (right) (aquí, <code>auto</code> es un valor especial que divide el espacio disponible entre derecha e izquierda). Puedes usar esta propiedad con uno, dos, tres o cuatro valores como se explica en la <a href="/es/docs/Web/CSS/padding#Sintaxis">sintaxis de padding</a>.</li>
+ <li><code>background-color: #FF9500;</code> — como antes, este selecciona el color de fondo de un elemento. Se ha usado un naranja rojizo para el elemento <code>body</code> en contraste con el azul oscuro del elemento {{htmlelement("html")}}. Sigue y experimenta. Siéntete libre de usar <code>white</code> o cualquiera que sea de tu agrado.</li>
+ <li><code>padding: 0 20px 20px 20px;</code> — tienes 4 valores puestos en el relleno, para dar un poco de espacio alrededor del contenido. Esta vez no pondrás relleno en la parte de arriba de <code>body</code>, 20 píxeles a la izquierda, abajo y derecha. Los valores se ponen: arriba, derecha, abajo e izquierda, en ese orden. Como con <code>margin</code> usar esta propiedad con uno, dos, tres o cuatro valores como se explica en la <a href="/es/docs/Web/CSS/padding#Sintaxis">sintaxis de padding</a>.</li>
+ <li><code>border: 5px solid black;</code> — este simplemente pone un borde de 5 píxeles de ancho, continuo y de color negro alrededor del elemento <code>body</code>.</li>
+</ul>
+
+<h3 id="Posicionar_y_dar_estilo_al_título_principal_de_la_página">Posicionar y dar estilo al título principal de la página</h3>
+
+<pre class="brush: css notranslate">h1 {
+  margin: 0;
+  padding: 20px 0;
+  color: #00539F;
+  text-shadow: 3px 3px 1px black;
+}</pre>
+
+<p>Puedes haber notado que hay un hueco horrible en la parte superior de <em>body</em>. Esto sucede porque los navegadores vienen con estilos por defecto, ¡incluso cuando aún no se ha aplicado ningún archivo CSS! Esto podría parecer una mala idea, pero se quiere que aun una página sin estilizar sea legible. Para deshacerte de este espacio elimina el estilo por defecto, agregando <code>margin: 0;</code>.</p>
+
+<p>Enseguida, se ha puesto un relleno arriba y abajo del título de 20 píxeles, y se hizo que el color del texto sea el mismo que el color de fondo de <code>html</code>.</p>
+
+<p>Una propiedad muy interesante que se ha usado aquí es <code>text-shadow</code>, que aplica una sombra al texto del elemento. Sus cuatro valores son como sigue:</p>
+
+<ul>
+ <li>El primer valor en píxeles asigna el <strong>desplazamiento horizontal</strong> de la sombra desde el texto —qué tan lejos la mueve a la derecha—. Un valor negativo la moverá a la izquierda.</li>
+ <li>El segundo valor en píxeles asigna el <strong>desplazamiento vertical</strong> de la sombra desde el texto —qué tan lejos la mueve hacia abajo—. En este ejemplo, un valor negativo la desplazaría hacia arriba.</li>
+ <li>El tercer valor en píxeles asigna <strong>radio de desenfoque</strong> de la sombra —un valor grande es igual a una sombra borrosa—.</li>
+ <li>El cuarto valor asigna el color base de la sombra.</li>
+</ul>
+
+<p>Una vez más, trata de experimentar con diferentes valores para ver cómo resulta.</p>
+
+<h3 id="Centrar_la_imagen">Centrar la imagen</h3>
+
+<pre class="brush: css notranslate">img {
+  display: block;
+  margin: 0 auto;
+}</pre>
+
+<p>Finalmente, centra la imagen para hacer que luzca mejor. Puedes usar nuevamente el truco de <code>margin: 0 auto</code> que usaste antes para <code>body</code>, pero existen diferencias que requieren que hagas algo más para que el código CSS funcione.</p>
+
+<p>El elemento {{htmlelement("body")}} es un elemento en nivel de bloque (<strong>block-level</strong>), lo que significa que tomará espacio en la página y que puede tener otros valores de espacio aplicables como margen. Las imágenes, por otra parte, son elementos <strong>inline</strong>, lo que quiere decir que no puedes aplicarles márgenes, debes dar a la imagen un comportamiento de <em>block-level</em> usando <code>display: block;</code>.</p>
+
+<div class="blockIndicator note">
+<p><strong>Nota</strong>: las instrucciones anteriores asumen que estás usando una imagen más pequeña que el ancho establecido en <code>body</code> (600 píxeles). Si tu imagen es más grande, desbordará el cuerpo, derramándose en el resto de la página. Para solucionar esto, puedes hacer lo siguiente: 1) reducir el ancho de la imagen usando un <a href="https://es.wikipedia.org/wiki/Editor_de_gráficos_rasterizados">editor gráfico</a>, o 2) usar CSS para dimensionar la imagen estableciendo la propiedad {{cssxref("width")}} en el elemento <code>&lt;img&gt;</code> con un valor menor.</p>
+</div>
+
+<div class="note">
+<p><strong>Nota</strong>: no te preocupes si aún no entiendes <code>display: block;</code> y la diferencia entre un elemento de bloque y un elemento <em>inline</em>. Lo entenderás en tanto estudies CSS a profundidad. Puedes encontrar más en cuanto a los diferentes valores disponibles para <em>display</em> en la <a href="/es/docs/Web/CSS/display">página de referencia de display</a>.</p>
+</div>
+
+<h2 id="Conclusión">Conclusión</h2>
+
+<p>Si has seguido las instrucciones de esta publicación, deberías terminar con una página que luce algo así (también puedes <a href="http://mdn.github.io/beginner-html-site-styled/">ver nuestra versión aquí</a>):</p>
+
+<p><img alt="El logo de Mozilla centrado con título y párrafos. Ahora se ve muy bien de estilo, con un fondo azul para toda la página y un fondo naranja para la franja de contenido principal centrada." src="https://mdn.mozillademos.org/files/9455/website-screenshot-final.png" style="display: block; height: 1084px; margin: 0px auto; width: 940px;"></p>
+
+<p>Si te atoraste, puedes comparar tu trabajo con el <a href="https://github.com/mdn/beginner-html-site-styled/blob/gh-pages/styles/style.css">código del ejemplo finalizado en GitHub</a>.</p>
+
+<p>Aquí, solo has arañado la superficie de CSS. Si quieres encontrar más, puedes ir a la <a href="/es/docs/Learn/CSS">página de aprendizaje de CSS</a>.</p>
+
+<p>{{PreviousMenuNext("Learn/Getting_started_with_the_web/HTML_basics", "Learn/Getting_started_with_the_web/JavaScript_basics","Learn/Getting_started_with_the_web")}}</p>
diff --git a/files/es/learn/getting_started_with_the_web/cómo_funciona_la_web/index.html b/files/es/learn/getting_started_with_the_web/cómo_funciona_la_web/index.html
new file mode 100644
index 0000000000..546baf0309
--- /dev/null
+++ b/files/es/learn/getting_started_with_the_web/cómo_funciona_la_web/index.html
@@ -0,0 +1,100 @@
+---
+title: Cómo funciona la web
+slug: Learn/Getting_started_with_the_web/Cómo_funciona_la_Web
+tags:
+  - Cliente
+  - DNS
+  - HTTP
+  - IP
+  - Infraestructura
+  - Internet
+  - Principiante
+  - Protocolos
+  - Servidor
+  - TCP
+  - Web
+translation_of: Learn/Getting_started_with_the_web/How_the_Web_works
+---
+<div>{{LearnSidebar()}}</div>
+
+<div>{{PreviousMenu("Learn/Getting_started_with_the_web/Publishing_your_website", "Learn/Getting_started_with_the_web")}}</div>
+
+<div class="summary">
+<p><em>Cómo funciona la web</em> proporciona una vista simplificada de lo que sucede cuando ves una página web en un navegador web de tu computador o teléfono.</p>
+</div>
+
+<p>Esta teoría no es esencial para escribir código web a corto plazo, pero en poco tiempo empezarás a beneficiarte realmente al entender lo que está sucediendo en el fondo.</p>
+
+<h2 id="Los_clientes_y_servidores">Los clientes y servidores</h2>
+
+<p>Las computadoras conectadas a la web se llaman <strong>clientes</strong> y <strong>servidores</strong>. Un diagrama simplificado de cómo interactúan se vería así:</p>
+
+<p><img alt="" src="https://mdn.mozillademos.org/files/17299/Cliente-Servidor.png" style="height: 123px; width: 336px;"></p>
+
+<ul>
+ <li>Los clientes son dispositivos de los usuarios conectados a Internet (por ejemplo, tu ordenador conectado a la red Wi-Fi o el teléfono conectado a la red de telefonía móvil) y el software que se encuentra disponible y permite acceder a Internet en dichos dispositivos (normalmente, un navegador web como Firefox o Chrome).</li>
+ <li>Los servidores son computadores que almacenan páginas web, sitios o aplicaciones. Cuando un dispositivo cliente quiere acceder a una página web, una copia de la página web se descarga desde el servidor en el equipo cliente y se muestra en el navegador web del usuario.</li>
+</ul>
+
+<h2 id="Las_otras_partes_de_la_caja_de_herramientas">Las otras partes de la caja de herramientas</h2>
+
+<p>El cliente y el servidor que describimos anteriormente, no cuentan toda la historia. Hay muchas otras partes involucradas y vamos a describirlas a continuación.</p>
+
+<p>Por ahora, imaginemos que la web es un camino. En un extremo de la carretera, está el cliente, que es como tu casa. En el extremo opuesto del camino, está el servidor, que es una tienda en la que deseas comprar algo.</p>
+
+<p><img alt="" src="https://mdn.mozillademos.org/files/9749/road.jpg" style="display: block; height: 427px; margin: 0px auto; width: 640px;"></p>
+
+<p>Además del cliente y el servidor, también tenemos que saludar a:</p>
+
+<ul>
+ <li><strong>Tu conexión a Internet</strong>: permite enviar y recibir datos en la web. Básicamente es el recorrido entre tu casa y la tienda.</li>
+ <li><strong>TCP/IP</strong>: <strong>Protocolo de Control de Transmisión</strong> y <strong>Protocolo de Internet</strong>, son los protocolos de comunicación que definen cómo deben viajar los datos a través de la web. Esto es, los medios de transporte que te permiten hacer un pedido, ir a la tienda y comprar los productos. En nuestro ejemplo, podría ser un coche, una bicicleta o tus propios pies.</li>
+ <li><strong>DNS: </strong>los servidores del <strong>Sistema de Nombres de Dominio</strong> (DNS, por sus siglas en inglés), son como una libreta de direcciones de sitios web. Cuando escribes una dirección web en el navegador, el navegador busca los DNS antes de recuperar el sitio web. El navegador necesita averiguar en qué servidor vive el sitio web y así enviar los mensajes HTTP al lugar correcto (ver más abajo). Esto es como buscar la dirección de la tienda para que puedas llegar a ella.</li>
+ <li><strong>HTTP: </strong><span class="st">el <strong>Protocolo de Transferencia de Hipertexto</strong></span> es un protocolo de aplicación que define un idioma para que los clientes y servidores se puedan comunicar. Esto es como el idioma que utilizas para ordenar tus compras.</li>
+ <li><strong>Archivos componentes</strong>: un sitio web se compone de muchos archivos diferentes, que son como las diferentes partes de los productos que comprarás en la tienda. Estos archivos se dividen en dos tipos principales:
+  <ul>
+   <li><strong>Archivos de código</strong>: los sitios web se construyen principalmente con HTML, CSS y JavaScript, aunque te encontrarás con otras tecnologías más adelante.</li>
+   <li><strong>Recursos: </strong>este es un nombre colectivo para el resto de materiales que conforman un sitio web, como imágenes, música, video, documentos de Word, archivos PDF, etc.</li>
+  </ul>
+ </li>
+</ul>
+
+<h2 id="Entonces_¿qué_sucede_exactamente">Entonces, ¿qué sucede exactamente?</h2>
+
+<p>Cuando escribes una dirección web en el navegador (usando nuestra analogía para ir a la tienda):</p>
+
+<ol>
+ <li>El navegador va al servidor DNS y encuentra la dirección real del servidor donde el sitio web vive (encontrar la dirección de la tienda).</li>
+ <li>El navegador envía un mensaje de petición HTTP al servidor, pidiéndole que envíe una copia de la página web para el cliente (ir a la tienda y hacer un pedido). Este mensaje y todos los datos enviados entre el cliente y el servidor, se envían a través de tu conexión a Internet usando TCP/IP.</li>
+ <li>Siempre que el servidor apruebe la solicitud del cliente, el servidor enviará al cliente un mensaje «200 OK», que significa, «¡por supuesto que puedes ver ese sitio web! Aquí está.», y comenzará a enviar los archivos de la página web al navegador como una serie de pequeños trozos llamados <em>paquetes de datos</em> (la tienda te entrega tus productos y los llevas de regreso a casa).</li>
+ <li>El navegador reúne los pequeños trozos, forma un sitio web completo y te lo muestra (llegas a casa con tus nuevas compras).</li>
+</ol>
+
+<h2 id="Explicación_de_los_DNS">Explicación de los DNS</h2>
+
+<p>Las direcciones webs reales no son las agradables y fácilmente recordables secuencias que tecleas en la barra de direcciones para encontrar tus sitios webs favoritos. En realidad, se trata de secuencias de números, algo como 63.245.217.105.</p>
+
+<p>Lo anterior se llama <a href="/es/docs/Glossary/IP_Address">dirección IP</a> y representa un lugar único en la web. Sin embargo, no es muy fácil de recordar, ¿verdad? Por eso se inventaron los servidores de nombres de dominio. Estos son servidores especiales que hacen coincidir una dirección web tecleada desde tu navegador («mozilla.org», por ejemplo) con la dirección real del sitio web (IP).</p>
+
+<p>Los sitios webs se pueden acceder directamente a través de sus direcciones IP. Intenta acceder a la página web de Mozilla escribiendo <strong><code>63.245.217.105</code></strong> en la barra de dirección de una nueva pestaña en tu navegador. Puedes encontrar la dirección IP de un sitio web escribiendo su dominio en una herramienta como <a href="https://ipinfo.info/html/ip_checker.php">IP Checker</a>.</p>
+
+<p><img alt="Un nombre de dominio es más que otra forma de una dirección IP" src="https://mdn.mozillademos.org/files/8405/dns-ip.png" style="height: 160px; width: 330px;"></p>
+
+<h2 id="Explicación_de_los_paquetes">Explicación de los paquetes</h2>
+
+<p>Anteriormente hemos utilizado el término <em><strong>paquetes</strong></em> para describir el formato en que los datos se envían desde el servidor al cliente. ¿Qué significa esto? Básicamente, que los datos se envían a través de la web como miles de trozos pequeños, permitiendo que muchos usuarios pueden descargar la misma página web al mismo tiempo. Si los sitios web fueran enviados como grandes trozos, sólo un usuario podría descargarlos a la vez, lo que volvería a la web muy ineficiente y poco divertida.</p>
+
+<h2 id="Ver_también">Ver también</h2>
+
+<ul>
+ <li><a href="/es/docs/Learn/Common_questions/How_does_the_Internet_work">¿Cómo funciona Internet</a></li>
+ <li><a href="https://dev.opera.com/articles/http-basic-introduction/">HTTP: Un protocolo de nivel de aplicación </a>(en inglés)</li>
+ <li><a href="https://dev.opera.com/articles/http-lets-get-it-on/">HTTP: Trabajemos con él</a> (en inglés)</li>
+ <li><a href="https://dev.opera.com/articles/http-response-codes/">Códigos de respuesta: HTTP</a>  (en inglés)</li>
+</ul>
+
+<h2 id="Crédito">Crédito</h2>
+
+<p>Foto de la calle: Street Composing, por <a href="https://www.flickr.com/photos/kdigga/">Kevin </a>D.</p>
+
+<p>{{PreviousMenu("Learn/Getting_started_with_the_web/Publishing_your_website", "Learn/Getting_started_with_the_web")}}</p>
diff --git a/files/es/learn/getting_started_with_the_web/html_basics/index.html b/files/es/learn/getting_started_with_the_web/html_basics/index.html
new file mode 100644
index 0000000000..e4e4f856a3
--- /dev/null
+++ b/files/es/learn/getting_started_with_the_web/html_basics/index.html
@@ -0,0 +1,224 @@
+---
+title: 'HTML:  básico'
+slug: Learn/Getting_started_with_the_web/HTML_basics
+tags:
+  - Aprendizaje
+  - HTML
+  - Principiante
+  - Web
+translation_of: Learn/Getting_started_with_the_web/HTML_basics
+---
+<p>{{LearnSideBar}}</p>
+
+<p>{{PreviousMenuNext("Learn/Getting_started_with_the_web/Dealing_with_files", "Learn/Getting_started_with_the_web/CSS_basics","Learn/Getting_started_with_the_web")}}</p>
+
+<p>El Lenguaje de Marcado de Hipertexto (HTML) es el código que se utiliza para estructurar y desplegar una página web y sus contenidos. Por ejemplo, sus contenidos podrían ser párrafos, una lista con viñetas, o imágenes y tablas de datos. Como lo sugiere el título, este artículo te dará una comprensión básica de HTML y cúal es su función.</p>
+
+<h2 id="Entonces_¿qué_es_HTML_en_realidad">Entonces, ¿qué es HTML en realidad?</h2>
+
+<p>HTML no es un lenguaje de programación; es un <em>lenguaje de marcado</em> que define la estructura de tu contenido. HTML consiste en una serie de elementos que usarás para encerrar diferentes partes del contenido para que se vean o comporten de una determinada manera. Las etiquetas de encierre pueden hacer de una palabra o una imagen un hipervínculo a otro sitio, se pueden cambiar palabras a cursiva, agrandar o achicar la letra, etc. Por ejemplo, toma la siguiente línea de contenido:</p>
+
+<pre class="notranslate">Mi gato es muy gruñon</pre>
+
+<p>Si quieres especificar que se trata de un párrafo, podrías encerrar el texto con la etiqueta de párrafo ({{htmlelement("p")}}):</p>
+
+<pre class="notranslate">&lt;p&gt;Mi gato es muy gruñon&lt;/p&gt;</pre>
+
+<h3 id="Anatomía_de_un_elemento_HTML">Anatomía de un elemento HTML</h3>
+
+<p>Explora este párrafo en mayor profundidad.</p>
+
+<p><img alt="elementos de gato gruñon" src="https://mdn.mozillademos.org/files/11913/htmlexp.png" style="display: block; height: 255px; margin: 0px auto; width: 821px;"></p>
+
+<p>Las partes principales del elemento son:</p>
+
+<ol>
+ <li><strong>La etiqueta de apertura</strong>: consiste en el nombre del elemento (en este caso, p), encerrado por <strong>paréntesis angulares</strong> (&lt; &gt;) de apertura y cierre. Establece dónde comienza o empieza a tener efecto el elemento —en este caso, dónde es el comienzo del párrafo—.</li>
+ <li><strong>La etiqueta de cierre</strong>: es igual que la etiqueta de apertura, excepto que incluye una barra de cierre (/) antes del nombre de la etiqueta. Establece dónde termina el elemento —en este caso dónde termina el párrafo—.</li>
+ <li><strong>El contenido</strong>: este es el contenido del elemento, que en este caso es sólo texto.</li>
+ <li><strong>El elemento</strong>: la etiqueta de apertura, más la etiqueta de cierre, más el contenido equivale al elemento.</li>
+</ol>
+
+<p>Los elementos pueden también tener atributos, que se ven así:</p>
+
+<p><img alt="atributo html" src="https://mdn.mozillademos.org/files/11915/htmlatributos.png" style="display: block; height: 156px; margin: 0px auto; width: 1287px;"></p>
+
+<p>Los atributos contienen información adicional acerca del elemento, la cual no quieres que aparezca en el contenido real del elemento. Aquí <code>class</code> es el <em>nombre</em> del atributo y <code>editor-note</code> el <em>valor</em> del atributo. En este caso, el atributo <code>class</code> permite darle al elemento un nombre identificativo, que se puede utilizar luego para apuntarle al elemento información de estilo y demás cosas.</p>
+
+<p>Un atributo debe tener siempre:</p>
+
+<ol>
+ <li>Un espacio entre este y el nombre del elemento (o del atributo previo, si el elemento ya posee uno o más atributos).</li>
+ <li>El nombre del atributo, seguido por un signo de igual (<strong>=</strong>).</li>
+ <li>Comillas de apertura y de cierre, encerrando el valor del atributo.</li>
+</ol>
+
+<p>Los atributos siempre se incluyen en la etiqueta de apertura de un elemento, nunca en la de cierre.</p>
+
+<div class="blockIndicator note">
+<p><strong>Nota</strong>: el atributo con valores simples que no contengan espacios en blanco ASCII (o cualesquiera de los caracteres <code>"</code> <code>'</code> <code>`</code> <code>=</code> <code>&lt;</code> <code>&gt;</code>) pueden permanecer sin entrecomillar, pero se recomienda entrecomillar todos los valores de atributo, ya que esto hace que el código sea más consistente y comprensible.</p>
+</div>
+
+<h3 id="Anidar_elementos">Anidar elementos</h3>
+
+<p>Puedes también colocar elementos dentro de otros elementos —esto se llama <strong>anidamiento</strong>—. Si, por ejemplo, quieres resaltar una palabra del texto (en el ejemplo la palabra «muy»), podemos encerrarla en un elemento {{htmlelement("strong")}}, que significa que dicha palabra se debe enfatizar:</p>
+
+<pre class="notranslate">&lt;p&gt;Mi gato es &lt;strong&gt;muy&lt;/strong&gt; gruñon.&lt;/p&gt;</pre>
+
+<p>Debes asegurarte que los elementos estén correctamente anidados: en el ejemplo de abajo, creaste la etiqueta de apertura del elemento {{htmlelement("p")}} primero, luego la del elemento {{htmlelement("strong")}}, por lo tanto, debes cerrar esta etiqueta primero, y luego la de &lt;p&gt;. Esto es incorrecto:</p>
+
+<pre class="notranslate">&lt;p&gt;Mi gato es &lt;strong&gt;muy gruñon.&lt;/p&gt;&lt;/strong&gt;</pre>
+
+<p>Los elementos deben abrirse y cerrarse ordenadamente, de forma tal que se encuentren claramente dentro o fuera el uno del otro. Si estos se encuentran solapados, el navegador web tratará de adivinar lo que intentas decirle, pero puede que obtengas resultados inesperados. Así que, ¡no lo hagas!</p>
+
+<h3 id="Elementos_vacíos">Elementos vacíos</h3>
+
+<p>Algunos elementos no poseen contenido, y son llamados <strong>elementos vacíos</strong>. Toma, por ejemplo, el elemento {{htmlelement("img")}} de nuestro HTML:</p>
+
+<pre class="notranslate">&lt;img src="images/firefox-icon.png" alt="Mi imagen de prueba"&gt;</pre>
+
+<p>Posee dos atributos, pero no hay etiqueta de cierre <code>&lt;/img&gt;</code> ni contenido encerrado. Esto es porque un elemento de imagen no encierra contenido al cual afectar. Su propósito es desplegar una imagen en la página HTML, en el lugar en que aparece.</p>
+
+<h3 id="Anatomía_de_un_documento_HTML">Anatomía de un documento HTML</h3>
+
+<p>Hasta ahora has visto lo básico de elementos HTML individuales, pero estos no son muy útiles por sí solos. Ahora verás cómo los elementos individuales son combinados para formar una página HTML entera. Vuelve a visitar el código de tu ejemplo en <code>index.html</code> (que viste por primera vez en el artículo <a href="/es/docs/Learn/Getting_started_with_the_web/Manejando_los_archivos">Manejo de archivos</a>):</p>
+
+<pre class="notranslate">&lt;!DOCTYPE html&gt;
+&lt;html&gt;
+  &lt;head&gt;
+    &lt;meta charset="utf-8"&gt;
+    &lt;title&gt;Mi pagina de prueba&lt;/title&gt;
+  &lt;/head&gt;
+  &lt;body&gt;
+    &lt;img src="images/firefox-icon.png" alt="Mi imagen de prueba"&gt;
+  &lt;/body&gt;
+&lt;/html&gt;</pre>
+
+<p>Tienes:</p>
+
+<ul>
+ <li><code>&lt;!DOCTYPE html&gt;</code> — el tipo de documento. Es un preámbulo requerido. Anteriormente, cuando HTML era joven (cerca de 1991/2), los tipos de documento actuaban como vínculos a un conjunto de reglas que el código HTML de la página debía seguir para ser considerado bueno, lo que podía significar la verificación automática de errores y algunas otras cosas de utilidad. Sin embargo, hoy día es simplemente un artefacto antiguo que a nadie le importa, pero que debe ser incluido para que todo funcione correctamente. Por ahora, eso es todo lo que necesitas saber.</li>
+ <li><code>&lt;html&gt;&lt;/html&gt;</code> — el elemento {{htmlelement("html")}}. Este elemento encierra todo el contenido de la página entera y, a veces, se le conoce como el elemento raíz (<em>root element</em>).</li>
+ <li><code>&lt;head&gt;&lt;/head&gt;</code> — el elemento {{htmlelement("head")}}. Este elemento actúa como un contenedor de todo aquello que quieres incluir en la página HTML que <em>no</em> es contenido visible por los visitantes de la página. Incluye cosas como palabras clave ({{Glossary("keyword", "keywords")}}), una descripción de la página que quieres que aparezca en resultados de búsquedas, código CSS para dar estilo al contenido, declaraciones del juego de caracteres, etc.</li>
+ <li><code>&lt;meta charset="utf-8"&gt;</code> — {{htmlelement("meta")}}. Este elemento establece el juego de caracteres que tu documento usará en <code>utf-8</code>, que incluye casi todos los caracteres de todos los idiomas humanos. Básicamente, puede manejar cualquier contenido de texto que puedas incluir. No hay razón para no establecerlo, y puede evitar problemas en el futuro.</li>
+ <li><code>&lt;title&gt;&lt;/title&gt;</code> — el elemento {{htmlelement("title")}} establece el título de tu página, que es el título que aparece en la pestaña o en la barra de título del navegador cuando la página es cargada, y se usa para describir la página cuando es añadida a los marcadores o como favorita.</li>
+ <li><code>&lt;body&gt;&lt;/body&gt;</code> — el elemento {{htmlelement("body")}}. Encierra <em>todo</em> el contenido que deseas mostrar a los usuarios web que visiten tu página, ya sea texto, imágenes, videos, juegos, pistas de audio reproducibles, y demás.</li>
+</ul>
+
+<h2 id="Imágenes">Imágenes</h2>
+
+<p>Presta atención nuevamente al elemento <em>imagen</em> {{htmlelement("img")}}:</p>
+
+<pre class="notranslate">&lt;img src="images/firefox-icon.png" alt="Mi imagen de prueba"&gt;</pre>
+
+<p>Como ya se dijo antes, incrusta una imagen en la página, en la posición en que aparece. Lo logra a través del atributo <code>src</code> (source), el cual contiene el <em>path (ruta o ubicación)</em> de tu archivo de imagen.</p>
+
+<p>También se incluye un atributo <code>alt</code> (alternative) el cual contiene un texto que debería describir la imagen, y que podría ser accedido por usuarios que no pueden ver la imagen, quizás porque:</p>
+
+<ol>
+ <li>Son ciegos o tienen deficiencias visuales. Los usuarios con impedimentos visuales usualmente utilizan herramientas llamadas <em>Lectores de pantalla (Screen Readers),</em> los cuales les leen el texto contenido en el atributo alt.</li>
+ <li>Se produjo algún error en el código que impide que la imagen sea cargada. Como ejemplo, modifica deliberadamente la ubicación dentro del atributo <code>src</code> para que este sea incorrecto. Si guardas y recargas la página, deberías ver algo así en lugar de la imagen:</li>
+</ol>
+
+<p><img alt="atributo html" src="https://mdn.mozillademos.org/files/11917/image.png" style="height: 36px; width: 108px;"></p>
+
+<p>La frase clave acerca del texto alt de arriba es «texto que debería describir la imagen». El texto alt debe proporcionarle al lector la suficiente información como para que este tenga una buena idea de qué muestra la imagen. Por lo que tu texto actual «Mi imagen de prueba» no es para nada bueno. Un texto mucho mejor para el logo de Firefox sería: <em>«El logo de Firefox: un zorro en llamas rodeando la Tierra»</em>.</p>
+
+<p>Prueba a dar con mejores textos alt para tu imagen.</p>
+
+<div class="blockIndicator note">
+<p><strong>Nota</strong>: Descubre más acerca de la accesibilidad en el <a href="/es/docs/Web/Accessibility">módulo de aprendizaje sobre la accesibilidad</a>.</p>
+</div>
+
+<h2 id="Marcado_de_texto">Marcado de texto</h2>
+
+<p>Esta sección cubrirá algunos de los elementos HTML básicos que usarás para el marcado de texto.</p>
+
+<h3 id="Encabezados">Encabezados</h3>
+
+<p>Los elementos de encabezado permiten especificar que ciertas partes del contenido son encabezados, o subencabezados del contenido. De la misma forma que un libro tiene un título principal, y que a su vez puede tener títulos por cada capítulo individual, y subtítulos dentro de ellos, un documento HTML puede tenerlos también. HTML posee seis niveles de encabezados, {{htmlelement("h1")}}–{{htmlelement("h6")}}, aunque probablemente solo llegues a usar 3-4 como mucho:</p>
+
+<pre class="notranslate">&lt;h1&gt;Mi título principal&lt;/h1&gt;
+&lt;h2&gt;Mi título de nivel superior&lt;/h2&gt;
+&lt;h3&gt;Mi subtítulo&lt;/h3&gt;
+&lt;h4&gt;Mi sub-subtítulo&lt;/h4&gt;</pre>
+
+<p>Intenta ahora añadir un título apropiado para tu página HTML, antes de tu elemento {{htmlelement("img")}}.</p>
+
+<div class="blockIndicator note">
+<p><strong>Nota</strong>: verás que el encabezamiento de nivel 1 tiene un estilo implícito. No utilices elementos de encabezado para hacer el texto más grande o más oscuro, porque este elemento se utiliza por <a href="/es/docs/Learn/Accessibility/HTML#Contenido_del_texto">accesibilidad</a> y otras <a href="/es/docs/Learn/HTML/Introduction_to_HTML/HTML_text_fundamentals#¿Por_qué_necesitamos_estructura">razones como el posicionamiento en buscadores</a> (<em>Search Engine Optimization, SEO</em>). Intenta crear una secuencia significativa de encabezados en tus páginas, sin saltarte niveles.</p>
+</div>
+
+<h3 id="Párrafos">Párrafos</h3>
+
+<p>Como se explicó más arriba, los elementos {{htmlelement("p")}} se utilizan para encerrar párrafos de texto; los usarás frecuentemente para el marcado de contenido de texto regular:</p>
+
+<pre class="notranslate">&lt;p&gt;Este es un simple parrafo&lt;/p&gt;</pre>
+
+<p>Agrega uno o algunos párrafos a tu texto de ejemplo (deberías tenerlo de cuando estudiaste <a href="/es/docs/Learn/Getting_started_with_the_web/What_will_your_website_look_like"><em>¿Cuál será la apariencia de tu sitio web?</em></a>), colocados directamente debajo del elemento &lt;img&gt;.</p>
+
+<h3 id="Listas">Listas</h3>
+
+<p>Mucho del contenido web está dado por listas, así que HTML tiene elementos especiales para ellas. El marcado de listas se realiza siempre en al menos dos elementos. Los dos tipos de listas más comunes son las listas ordenadas y las desordenadas:</p>
+
+<ol>
+ <li><strong>Las listas desordenadas</strong> son aquellas en las que el orden de los items no es relevante, como en una lista de compras. Estas son encerradas en un elemento {{htmlelement("ul")}} (<em>unordered list</em>).</li>
+ <li><strong>Las listas ordenadas</strong> son aquellas en las que el orden sí es relevante, como en una receta. Estas son encerradas en un elemento {{htmlelement("ol")}} (<em>ordered list</em>).</li>
+</ol>
+
+<p>Cada elemento de la lista se coloca dentro de un elemento {{htmlelement("li")}} <em>(list item</em>).</p>
+
+<p>Por ejemplo, si quieres transformar parte del siguiente párrafo en una lista:</p>
+
+<pre class="notranslate">&lt;p&gt;En Mozilla, somos una comunidad de tecnólogos, pensadores, y constructores que trabajan juntos... &lt;/p&gt;</pre>
+
+<p>Podrías hacer lo siguiente:</p>
+
+<pre class="notranslate">&lt;p&gt;En Mozilla, somos una comunidad de&lt;/p&gt;
+
+&lt;ul&gt;
+  &lt;li&gt;tecnólogos&lt;/li&gt;
+  &lt;li&gt;pensadores&lt;/li&gt;
+  &lt;li&gt;constructores&lt;/li&gt;
+&lt;/ul&gt;
+
+&lt;p&gt;trabajando juntos... &lt;/p&gt;</pre>
+
+<p>Intenta agregar una lista ordenada o desordenada en tu página de ejemplo<strong>.</strong></p>
+
+<h2 id="Vínculos">Vínculos</h2>
+
+<p>Los vínculos o enlaces son muy importantes —son los que hacen de la web, la web—. Para implementar un vínculo, necesitas usar un vínculo simple — {{htmlelement("a")}} — la <em>a</em> es la abreviatura de la palabra inglesa «anchor» («<em>ancla</em>»). Para convertir algún texto dentro de un párrafo en un vínculo, sigue estos pasos:</p>
+
+<ol>
+ <li>Elige algún texto. Nosotros elegimos «Manifesto Mozilla».</li>
+ <li>Encierra el texto en un elemento &lt;a&gt;, así:
+  <pre class="notranslate">&lt;a&gt;Manifesto Mozilla&lt;/a&gt;</pre>
+ </li>
+ <li>Proporciónale al elemento &lt;a&gt; un atributo href, así:
+  <pre class="notranslate">&lt;a href=""&gt;Manifesto Mozilla&lt;/a&gt;</pre>
+ </li>
+ <li>Completa el valor de este atributo con la dirección web con la que quieras conectar al vínculo:
+  <pre class="notranslate">&lt;a href="https://www.mozilla.org/es-AR/about/manifesto/"&gt;Manifesto Mozilla&lt;/a&gt;</pre>
+ </li>
+</ol>
+
+<p>Podrías obtener resultados inesperados si al comienzo de la dirección web omites la parte <code>https://</code> o <code>http://</code> llamada <em>protocolo</em>. Así que luego del marcado del vínculo, haz clic en él para asegurarte que te dirige a la dirección deseada.</p>
+
+<div class="blockIndicator note">
+<p><code>href</code> podría parecer, en principio, una opción un tanto oscura para un nombre de atributo. Si tienes problemas para recordarla, recuerda que se refiere a <em><strong>h</strong>ypertext <strong>ref</strong>erence</em> (referencia de hipertexto).</p>
+</div>
+
+<p>Ahora agrega un vínculo a tu página, si es que aún no lo hiciste.</p>
+
+<h2 id="Conclusión">Conclusión</h2>
+
+<p>Si lograste seguir todas las instrucciones de este artículo, deberías terminar con una página que se vea así (también puedes <a href="http://mdn.github.io/beginner-html-site/">verla aquí</a>):<br>
+ <br>
+ <img alt="Una captura de pantalla de la página web que muestra el logo de Firefox, un encabezado que dice «mozilla es genial» y dos párrafos de texto de relleno." src="https://mdn.mozillademos.org/files/9351/finished-test-page-small.png" style="display: block; height: 838px; margin: 0px auto; width: 716px;"></p>
+
+<p>Si te estancas en algún paso, puedes comparar tu trabajo con el <a href="https://github.com/mdn/beginner-html-site/blob/gh-pages/index.html">código de ejemplo terminado</a> en Github.</p>
+
+<p>Aquí realmente solo has rasguñado la superficie de HTML. Para aprender más, ve a la <a href="/es/Learn/HTML">página de Aprendizaje HTML</a>.</p>
+
+<p>{{PreviousMenuNext("Learn/Getting_started_with_the_web/Dealing_with_files", "Learn/Getting_started_with_the_web/CSS_basics","Learn/Getting_started_with_the_web")}}</p>
diff --git a/files/es/learn/getting_started_with_the_web/index.html b/files/es/learn/getting_started_with_the_web/index.html
new file mode 100644
index 0000000000..05cadcde6c
--- /dev/null
+++ b/files/es/learn/getting_started_with_the_web/index.html
@@ -0,0 +1,68 @@
+---
+title: Primeros pasos en la Web
+slug: Learn/Getting_started_with_the_web
+tags:
+  - CSS
+  - Diseño
+  - Guía
+  - HTML
+  - Index
+  - Novato
+  - Principiante
+  - edición
+  - editor
+  - 'l10n:priority'
+  - teoria
+  - Índice
+translation_of: Learn/Getting_started_with_the_web
+---
+<div>{{LearnSidebar}}</div>
+
+<div class="summary">
+<p><em>Introducción a la Web</em> es una serie concisa que te presenta los aspectos prácticos del desarrollo web. Configurarás las herramientas que necesitas para construir una sencilla página web y publicar tu propio código.</p>
+</div>
+
+<h2 id="La_historia_de_tu_primer_sitio_web">La historia de tu primer sitio web</h2>
+
+<p>Es mucho trabajo crear un sitio web profesional, así que si eres nuevo en el desarrollo web, te animamos a que empieces poco a poco. No crearás otro Facebook de inmediato, pero no es difícil tener tu propio sitio web sencillo en línea, así que comenzaremos por ahí.</p>
+
+<p>Al trabajar en orden a través de los artículos que se enumeran a continuación, pasarás de la nada a tener tu primera página web en línea. ¡Comencemos nuestro viaje!</p>
+
+<h3 id="web.linkesdocsLearnGetting_started_with_the_webInstalling_basic_softwareInstalación_de_software_básico">{{web.link("/es/docs/Learn/Getting_started_with_the_web/Installing_basic_software","Instalación de software básico")}}</h3>
+
+<p>Cuando se trata de herramientas para crear un sitio web, hay mucho para elegir. Si recién estás comenzando, es posible que te sientas confundido por la variedad de editores de código, marcos de desarrollo y herramientas de prueba que existen. En {{web.link("/es/docs/Learn/Getting_started_with_the_web/Installing_basic_software", "Instalación de software básico")}}, te mostramos paso a paso cómo instalar solo el software que necesitas para comenzar un desarrollo web básico.</p>
+
+<h3 id="web.linkesdocsLearnGetting_started_with_the_webWhat_will_your_website_look_like¿Cuál_será_la_apariencia_de_tu_sitio_web">{{web.link("/es/docs/Learn/Getting_started_with_the_web/What_will_your_website_look_like","¿Cuál será la apariencia de tu sitio web?")}}</h3>
+
+<p>Antes de comenzar a escribir el código para tu sitio web, primero lo debes planificar. ¿Qué información estás mostrando?, ¿qué fuentes y colores estás usando?, en {{web.link("/es/docs/Learn/Getting_started_with_the_web/What_will_your_website_look_like", "¿cuál será la apariencia de tu sitio web?")}}, describimos un método simple que puedes seguir para planificar el contenido y modelado de tu sitio.</p>
+
+<h3 id="web.linkesdocsLearnGetting_started_with_the_webDealing_with_filesManejo_de_archivos">{{web.link("/es/docs/Learn/Getting_started_with_the_web/Dealing_with_files","Manejo de archivos")}}</h3>
+
+<p>Un sitio web consta de muchos archivos: texto del contenido, código, hojas de estilo, contenido multimedia, etc. Cuando estás creando un sitio web, necesitas ensamblar estos archivos en una estructura sensata y asegurarte de que se puedan comunicar entre sí. {{web.link("/es/docs/Learn/Getting_started_with_the_web/Dealing_with_files", "Manejo de archivos")}} explica cómo configurar una estructura de archivos sensible para tu sitio web y qué problemas debes tener en cuenta.</p>
+
+<h3 id="web.linkesdocsLearnGetting_started_with_the_webHTML_basicsConceptos_básicos_de_HTML">{{web.link("/es/docs/Learn/Getting_started_with_the_web/HTML_basics","Conceptos básicos de HTML")}}</h3>
+
+<p>El lenguaje de marcado de hipertexto (HTML) es el código que utilizas para estructurar tu contenido web y darle significado y propósito. Por ejemplo, ¿mi contenido es un conjunto de párrafos o una lista de viñetas?, ¿tengo imágenes insertadas en mi página?, ¿tengo una tabla de datos?; Sin abrumarte, {{web.link("/es/docs/Learn/Getting_started_with_the_web/HTML_basics", "conceptos básicos de HTML")}} proporciona suficiente información para familiarizarte con HTML.</p>
+
+<h3 id="web.linkesdocsLearnGetting_started_with_the_webCSS_basicsConceptos_básicos_de_CSS">{{web.link("/es/docs/Learn/Getting_started_with_the_web/CSS_basics","Conceptos básicos de CSS")}}</h3>
+
+<p>Hojas de estilo en cascada (CSS) es el código que utilizas para aplicar estilo a tu sitio web. Por ejemplo, ¿desea que el texto sea negro o rojo?, ¿dónde se debe dibujar el contenido en la pantalla?, ¿qué imágenes de fondo y colores se deben utilizar para decorar tu sitio web?, {{web.link("/es/docs/Learn/Getting_started_with_the_web/CSS_basics", "Conceptos básicos de CSS")}} te indica lo que necesitas para empezar.</p>
+
+<h3 id="web.linkesdocsLearnGetting_started_with_the_webJavaScript_basicsConceptos_básicos_de_JavaScript">{{web.link("/es/docs/Learn/Getting_started_with_the_web/JavaScript_basics","Conceptos básicos de JavaScript")}}</h3>
+
+<p>JavaScript es el lenguaje de programación que utilizas para agregar funciones interactivas a tu sitio web. Algunos ejemplos podrían ser juegos, cosas que suceden cuando se presionan botones o se ingresan datos en formularios, efectos de estilo dinámico, animación y mucho más. {{web.link("/es/docs/Learn/Getting_started_with_the_web/JavaScript_basics", "Conceptos básicos de JavaScript")}} te da una idea de lo que es posible con este interesante lenguaje y cómo empezar.</p>
+
+<h3 id="web.linkesdocsLearnGetting_started_with_the_webPublishing_your_websitePublicar_tu_sitio_web">{{web.link("/es/docs/Learn/Getting_started_with_the_web/Publishing_your_website","Publicar tu sitio web")}}</h3>
+
+<p>Una vez que hayas terminado de escribir el código y organizado los archivos que componen tu sitio web, lo debes poner todo en línea para que la gente lo pueda encontrar. {{web.link("/es/docs/Learn/Getting_started_with_the_web/Publishing_your_website", "Publica tu código de ejemplo")}} describe cómo publicar tu código de ejemplo en línea con el mínimo esfuerzo.</p>
+
+<h3 id="web.linkesdocsLearnGetting_started_with_the_webHow_the_Web_worksCómo_funciona_la_web">{{web.link("/es/docs/Learn/Getting_started_with_the_web/How_the_Web_works","Cómo funciona la web")}}</h3>
+
+<p>Cuando accedes a tu sitio web favorito, suceden muchas cosas complicadas en segundo plano que quizás no conozcas. {{web.link("/es/docs/Learn/Getting_started_with_the_web/How_the_Web_works", "Cómo funciona la web")}} describe lo que sucede cuando ves una página web en tu dispositivo favorito.</p>
+
+<h2 id="Ve_también">Ve también</h2>
+
+<ul>
+ <li><a href="https://www.youtube.com/playlist?list=PLo3w8EB99pqLEopnunz-dOOBJ8t-Wgt2g">La web desmitificada</a>: Una gran serie de videos que explican los fundamentos de la web, dirigida a completamente novatos en el desarrollo web. Creada por <a href="https://twitter.com/JeremiePat">Jérémie Patonnier</a>.</li>
+ <li>{{web.link("/es/docs/Learn/Getting_started_with_the_web/The_web_and_web_standards", "La web y sus estándares")}}: Este artículo proporciona algunos útiles antecedentes sobre la web: cómo surgió, qué son las tecnologías web estándar, cómo trabajan juntas, por qué "desarrollador web" es una gran carrera para elegir y qué tipo de mejores prácticas aprenderás a través del curso.</li>
+</ul>
diff --git a/files/es/learn/getting_started_with_the_web/instalacion_de_software_basico/index.html b/files/es/learn/getting_started_with_the_web/instalacion_de_software_basico/index.html
new file mode 100644
index 0000000000..84ffdcf666
--- /dev/null
+++ b/files/es/learn/getting_started_with_the_web/instalacion_de_software_basico/index.html
@@ -0,0 +1,83 @@
+---
+title: Instalación de software básico
+slug: Learn/Getting_started_with_the_web/Instalacion_de_software_basico
+tags:
+  - Aprender
+  - Configuración
+  - Herramientas
+  - Navegadores
+  - Novato
+  - Principiantes
+  - aprende
+  - buscador
+  - editor de textos
+  - instalar
+  - 'l10n:priority'
+translation_of: Learn/Getting_started_with_the_web/Installing_basic_software
+---
+<div>{{LearnSidebar}}</div>
+
+<div>{{NextMenu("Learn/Getting_started_with_the_web/What_will_your_website_look_like", "Learn/Getting_started_with_the_web")}}</div>
+
+<div class="summary">
+<p>La <em>Instalación de software básico</em>, te muestra las herramientas que necesitas para hacer el desarrollo web simple, y la forma de instalarlas correctamente.</p>
+</div>
+
+<h2 id="¿Qué_herramientas_usan_los_profesionales">¿Qué herramientas usan los profesionales?</h2>
+
+<ul>
+ <li><strong>Una computadora</strong>. Tal vez esto suena obvio para algunas personas, pero habrá quien esté leyendo este artículo desde el móvil o una computadora de biblioteca. Para el desarrollo web serio, es mejor invertir en un equipo de escritorio o portátil con Windows, Mac o Linux.</li>
+ <li><strong>Un editor de texto</strong>, para escribir código. Puedes usar un editor de texto libre (ej. <a href="http://brackets.io/">Brackets</a>, <a href="https://atom.io/">Atom</a>, <a href="https://notepad-plus-plus.org/">Notepad++</a>, <a href="https://www.sublimetext.com/">Sublime Text</a>, <a href="https://www.gnu.org/software/emacs/">GNU Emacs</a>, <a href="https://www.vim.org/">VIM</a>, <a href="https://code.visualstudio.com/">Visual Studio Code</a>, <a href="https://www.jetbrains.com/webstorm/">WebStorm</a>) o un editor híbrido (<a href="https://www.adobe.com/products/dreamweaver.html">Dreamweaver</a>). Los editores de documentos de oficina no son adecuados para esto, pues dependen de elementos ocultos que interfieren con los motores de renderizado usados por los navegadores.</li>
+ <li><strong>Navegadores web</strong>, para probar el código. Actualmente los navegadores más usados son <a href="https://www.mozilla.org/en-US/firefox/new/">Firefox</a>, <a href="https://www.google.com/chrome/browser/">Chrome</a>, <a href="http://www.opera.com/">Opera</a>, <a href="https://www.apple.com/safari/">Safari</a>, <a href="https://vivaldi.com/es/">Vivaldi</a>, <a href="http://windows.microsoft.com/en-us/internet-explorer/download-ie">Internet Explorer</a> y <a href="https://www.microsoft.com/en-us/windows/microsoft-edge">Microsoft Edge</a>. También debes comprobar cómo funciona tu web en dispositivos móviles y en cualquier navegador antiguo que tu público objetivo pueda estar usando aún (tal como IE 6–8.)</li>
+ <li><strong>Un editor de gráficos o imágenes</strong>, como <a href="http://www.gimp.org/">GIMP</a>, <a href="http://www.getpaint.net/">Paint.NET</a> o <a href="https://www.adobe.com/products/photoshop.html">Photoshop</a>, para crear imágenes para tus páginas web.</li>
+ <li><strong>Un sistema de control de versiones</strong>, para administrar archivos en servidores, colaborar en un proyecto con un equipo, compartir código y recursos, y evitar conflictos de edición. Hoy en día <a href="http://git-scm.com/">Git</a> es el sistema de control de versiones más popular y el servicio de alojamiento de código <a href="https://github.com/">GitHub</a>, basado en Git, también es muy popular.</li>
+ <li><strong>Un programa de FTP</strong>, para cargar páginas web en un servidor para el público (Git está reemplazando cada vez más a FTP para ese fin). Hay un montón de estos programas disponibles incluyendo <a href="https://cyberduck.io/">Cyberduck</a>, <a href="http://fetchsoftworks.com/">Fetch</a> y <a href="https://filezilla-project.org/">FileZilla</a>.</li>
+ <li><strong>Un sistema de automatización</strong>, como <a href="http://gruntjs.com/">Grunt</a> o <a href="http://gulpjs.com/">Gulp</a> para realizar tareas repetitivas de forma automática, por ejemplo minimización de código y ejecución de pruebas.</li>
+ <li>Bibliotecas, marcos de desarrollo (<code>frameworks</code>), etc., para acelerar la escritura de funciones comunes. Una biblioteca tiende a ser un archivo JavaScript o CSS existente que proporciona una funcionalidad lista para usar para que la utilices en tu código. Un framework tiende a llevar esta idea más allá, ofreciendo un sistema completo con alguna sintaxis personalizada para que puedas escribir una aplicación web basada en él.</li>
+ <li>¡Muchas más herramientas!</li>
+</ul>
+
+<h2 id="Ahora_mismo_¿qué_herramientas_necesitas_realmente">Ahora mismo: ¿qué herramientas necesitas realmente?</h2>
+
+<p>Esto parece una lista espeluznante pero, afortunadamente, puedes comenzar a trabajar en el desarrollo web sin saber nada de la mayoría de estas herramientas. En este artículo solo tendrás que configurar lo mínimo: un editor de texto y algunos navegadores web modernos.</p>
+
+<h3 id="Instalación_de_un_editor_de_texto">Instalación de un editor de texto</h3>
+
+<p>Probablemente ya tengas un editor de texto básico instalado en tu computadora. De manera predeterminada Windows incluye el {{Interwiki("wikipedia", "Bloc de notas")}} y OS X viene con {{Interwiki("wikipedia", "TextEdit")}}. Las <em>distros</em> (versiones) de Linux varían: Ubuntu viene con {{Interwiki("wikipedia", "Gedit")}}; distribuciones basadas en KDE suelen traer <a href="http://kate-editor.org/">Kate</a> o <a href="https://es.wikipedia.org/wiki/KWrite">Kwrite</a>.</p>
+
+<p>Para el desarrollo Web, probablemente hay cosas mejores que el Bloc de notas o TextEdit. Una recomendación puede ser empezar con <a href="http://brackets.io">Brackets</a>, un editor gratuito que ofrece vistas previas en vivo y sugerencias de código.</p>
+
+<h3 id="Instalación_de_navegadores_web_modernos">Instalación de navegadores web modernos</h3>
+
+<p>Por ahora, solo tendrás que instalar un par de navegadores web de escritorio para poner a prueba tu código. Selecciona tu sistema operativo y pulsa los enlaces pertinentes para descargar los instaladores de tus navegadores preferidos:</p>
+
+<ul>
+ <li>Linux: <a href="https://www.mozilla.org/es-ES/firefox/new/">Firefox</a>, <a href="https://www.google.com/chrome/browser/">Chrome</a>, <a href="http://www.opera.com/es/">Opera</a>, <a href="https://vivaldi.com/es/">Vivaldi</a>.</li>
+ <li>Windows: <a href="https://www.mozilla.org/es-ES/firefox/new/">Firefox</a>, <a href="https://www.google.com/chrome/browser/">Chrome</a>, <a href="http://www.opera.com/es/">Opera</a>, <a href="https://vivaldi.com/es/">Vivaldi</a>, <a href="http://windows.microsoft.com/en-us/internet-explorer/download-ie">Internet Explorer</a> (si tienes Windows 8 o superior, puedes instalar IE 10 o posterior, de lo contrario, deberías instalar un navegador alternativo).</li>
+ <li>Mac: <a href="https://www.mozilla.org/es-ES/firefox/new/">Firefox</a>, <a href="https://www.google.com/chrome/browser/">Chrome</a>, <a href="http://www.opera.com/es/">Opera</a>, <a href="https://vivaldi.com/es/">Vivaldi</a>, <a href="https://www.apple.com/safari/">Safari</a> (Safari de manera predeterminada viene con iOS y OS X)</li>
+</ul>
+
+<p>Antes de continuar, deberías instalar al menos dos de estos navegadores y tenerlos disponibles para pruebas.</p>
+
+<div class="blockIndicator note">
+<p><strong>Nota</strong>: Internet Explorer no es compatible con algunas funciones web modernas y es posible que no puedas ejecutar tu proyecto. Por lo general, no necesitas preocuparte por hacer que tus proyectos web sean compatibles con él, ya que muy pocas personas todavía lo usan; ciertamente, no te preocupes demasiado por él mientras aprendes. En ocasiones, es posible que te encuentres con un proyecto que requiera soporte.</p>
+</div>
+
+<h3 id="Instalación_de_un_servidor_web_local">Instalación de un servidor web local</h3>
+
+<p>Algunos ejemplos necesitarás ejecutarlos a través de un servidor web para que funcionen exitosamente. Puedes encontrar cómo hacer esto en {{web.link("/es/docs/Learn/Common_questions/set_up_a_local_testing_server", "¿Cómo se configura un servidor de prueba local?")}}</p>
+
+<p>{{NextMenu("Learn/Getting_started_with_the_web/What_will_your_website_look_like", "Learn/Getting_started_with_the_web")}}</p>
+
+<h2 id="En_este_módulo">En este módulo</h2>
+
+<ul>
+ <li id="Instalacion_de_software_basico">{{web.link("/es/Learn/Getting_started_with_the_web/Instalacion_de_software_basico", "Instalación de software básico")}}</li>
+ <li id="Como_se_vera_tu_sitio_web">{{web.link("/es/Learn/Getting_started_with_the_web/What_will_your_website_look_like", "¿Cómo se verá tu sitio web?")}}</li>
+ <li id="Manejo_de_archivos">{{web.link("/es/Learn/Getting_started_with_the_web/Manejando_los_archivos", "Manejo de archivos")}}</li>
+ <li id="Conceptos_basicos_de_HTML">{{web.link("/es/Learn/Getting_started_with_the_web/HTML_basics", "Conceptos básicos de HTML")}}</li>
+ <li id="Conceptos_basicos_de_CSS">{{web.link("/es/Learn/Getting_started_with_the_web/CSS_basics", "Conceptos básicos de CSS")}}</li>
+ <li id="Conceptos_basicos_de_JavaScript">{{web.link("/es/Learn/Getting_started_with_the_web/JavaScript_basics", "Conceptos básicos de JavaScript")}}</li>
+ <li id="Publicar_tu_sitio_web">{{web.link("/es/Learn/Getting_started_with_the_web/Publishing_your_website", "Publicar tu sitio web")}}</li>
+ <li id="Como_funciona_la_web">{{web.link("/es/docs/Learn/Getting_started_with_the_web/Cómo_funciona_la_Web", "Cómo funciona la Web")}}</li>
+</ul>
diff --git a/files/es/learn/getting_started_with_the_web/javascript_basics/index.html b/files/es/learn/getting_started_with_the_web/javascript_basics/index.html
new file mode 100644
index 0000000000..78fa13eccb
--- /dev/null
+++ b/files/es/learn/getting_started_with_the_web/javascript_basics/index.html
@@ -0,0 +1,456 @@
+---
+title: Fundamentos de JavaScript
+slug: Learn/Getting_started_with_the_web/JavaScript_basics
+tags:
+  - Aprender
+  - CodingScripting
+  - JavaScript
+  - Novato
+  - Principiante
+  - Web
+  - 'l10n:priority'
+translation_of: Learn/Getting_started_with_the_web/JavaScript_basics
+---
+<div>{{LearnSidebar}}</div>
+
+<div>{{PreviousMenuNext( "Learn/Getting_started_with_the_web/CSS_basics","Learn/Getting_started_with_the_web/Publishing_your_website","Learn/Getting_started_with_the_web")}}</div>
+
+<div class="summary">
+<p>JavaScript es el lenguaje de programación que debes usar para añadir características interactivas a tu sitio web, (por ejemplo, juegos, eventos que ocurren cuando los botones son presionados o los datos son introducidos en los formularios, efectos de estilo dinámicos, animación, y mucho más). Este artículo te ayudará a comenzar con este lenguaje extraordinario y te dará una idea de qué es posible hacer con él.</p>
+</div>
+
+<h2 id="¿Qué_es_JavaScript_realmente">¿Qué es JavaScript realmente?</h2>
+
+<p>{{Glossary("JavaScript")}} es un robusto lenguaje de programación que se puede aplicar a un documento {{Glossary("HTML")}} y usarse para crear interactividad dinámica en los sitios web. Fue inventado por Brendan Eich, cofundador del proyecto Mozilla, Mozilla Foundation y la Corporación Mozilla.</p>
+
+<p>Puedes hacer casi cualquier cosa con JavaScript. Puedes empezar con pequeñas cosas como carruseles, galerías de imágenes, diseños fluctuantes, y respuestas a las pulsaciones de botones. Con más experiencia, serás capaz de crear juegos, animaciones 2D y gráficos 3D, aplicaciones integradas basadas en bases de datos ¡y mucho más!</p>
+
+<p>JavaScript por sí solo es bastante compacto aunque muy flexible, y los desarrolladores han escrito gran cantidad de herramientas encima del núcleo del lenguaje JavaScript, desbloqueando una gran cantidad de funcionalidad adicional con un mínimo esfuerzo. Esto incluye:</p>
+
+<ul>
+ <li>Interfaces de Programación de Aplicaciones del Navegador ({{Glossary("API","APIs")}}) — APIs construidas dentro de los navegadores que ofrecen funcionalidades como crear dinámicamente contenido HTML y establecer estilos CSS, hasta capturar y manipular un vídeo desde la cámara web del usuario, o generar gráficos 3D y muestras de sonido.</li>
+ <li>APIs de terceros, que permiten a los desarrolladores incorporar funcionalidades en sus sitios de otros proveedores de contenidos como Twitter o Facebook.</li>
+ <li>Marcos de trabajo y librerías de terceros que puedes aplicar a tu HTML para que puedas construir y publicar rápidamente sitios y aplicaciones.</li>
+</ul>
+
+<p>Ya que se supone que este artículo es solo una introducción ligera a JavaScript, la intención no es confundirte en esta etapa hablando en detalle sobre cuál es la diferencia entre el núcleo del lenguaje JavaScript y las diferentes herramientas listadas arriba. Puedes aprender todo eso en detalle más tarde, en el <a href="/es/docs/Learn/JavaScript">Área de Aprendizaje en MDN</a>, y en el resto de MDN.</p>
+
+<p>Debajo se presentan algunos aspectos del núcleo del lenguaje y también jugarás con unas pocas características de la API del navegador. ¡Diviértete!</p>
+
+<h2 id="Ejemplo_«¡Hola_Mundo!»">Ejemplo «<em>¡Hola Mundo!</em>»</h2>
+
+<p>La sección de arriba suena realmente emocionante, y debería serlo. JavaScript es una de las tecnologías web más emocionantes, y cuando comiences a ser bueno en su uso, tus sitios web entrarán en una nueva dimensión de energía y creatividad.</p>
+
+<p>Sin embargo, sentirse cómodo con JavaScript es un poco más difícil que sentirse cómodo con HTML y CSS. Deberás comenzar poco a poco y continuar trabajando en pasos pequeños y consistentes. Para comenzar, mostraremos cómo añadir JavaScript básico a tu página, creando un «<em>¡Hola Mundo!</em>» de ejemplo (<a href="https://es.wikipedia.org/wiki/Hola_mundo">el estándar en los ejemplos básicos de programación</a>).</p>
+
+<div class="warning">
+<p><strong>Importante</strong>: si no has venido siguiendo el resto de nuestro curso, <a href="https://github.com/mdn/beginner-html-site-styled/archive/gh-pages.zip">descarga este código de ejemplo</a> y úsalo como punto de partida.</p>
+</div>
+
+<ol>
+ <li>Primero, ve a tu sitio de pruebas y crea una carpeta llamada <code>scripts</code>. Luego, dentro de la nueva carpeta de scripts, crea un nuevo archivo llamado <code>main.js</code> y guárdalo.</li>
+ <li>A continuación, abre tu archivo <code>index.html</code> e introduce el siguiente código en una nueva línea, justo antes de la etiqueta de cierre <code>&lt;/body&gt;</code>:
+  <pre class="brush: html notranslate"><font><font>&lt;script src="scripts/main.js"&gt;&lt;/script&gt;</font></font></pre>
+ </li>
+ <li>Esto hace básicamente el mismo trabajo que el elemento {{htmlelement("link")}} para CSS: aplica el código JavaScript a la página, para que pueda actuar sobre el HTML (y CSS, o cualquier cosa en la página).</li>
+ <li>Ahora añade el siguiente código al archivo <code>main.js</code>:
+  <pre class="brush: js notranslate">const miTitulo = document.querySelector('h1');
+miTitulo.textContent = '¡Hola mundo!';</pre>
+ </li>
+ <li>Finalmente, asegúrate de que has guardado los archivos HTML y JavaScript, y abre <code>index.html</code> en el navegador. Deberías ver algo así: <img alt="" src="https://mdn.mozillademos.org/files/9543/hello-world.png" style="display: block; height: 236px; margin: 0px auto; width: 806px;"></li>
+</ol>
+
+<div class="note">
+<p><strong>Nota</strong>: la razón por la que has puesto el elemento {{htmlelement("script")}} casi al final del documento HTML es porque <strong>el navegador carga el HTML en el orden en que aparece en el archivo</strong>.</p>
+
+<p>Si se cargara primero JavaScript y se supone que debe afectar al HTML que tiene debajo, podría no funcionar, ya que ha sido cargado antes que el HTML sobre el que se supone debe trabajar. Por lo tanto, colocar el JavaScript cerca del final de la página es normalmente la mejor estrategia. Para aprender más sobre enfoques alternativos, mira <a href="/es/docs/Learn/JavaScript/First_steps/Qué_es_JavaScript#Estrategias_de_carga_de_scripts">Estrategias de carga de scripts</a>.</p>
+</div>
+
+<h3 id="¿Qué_ha_ocurrido">¿Qué ha ocurrido?</h3>
+
+<p>El texto del título ha sido cambiado por <em>¡Hola mundo!</em> usando JavaScript. Hiciste esto primero usando la función <code>{{domxref("Document.querySelector", "querySelector()")}}</code> para obtener una referencia al título y almacenarla en una variable llamada <code>miTitulo</code>. Esto es muy similar a lo que hiciste con CSS usando selectores —quieres hacer algo con un elemento, así que tienes que seleccionarlo primero—.</p>
+
+<p>Después de eso, estableciste el valor de la propiedad {{domxref("Node.textContent", "textContent")}} de la variable <code>miTitulo</code> (que representa el contenido del título) como <em>¡Hola mundo!</em></p>
+
+<div class="note">
+<p><strong>Nota</strong>: Las dos características que has utilizado en este ejercicio forman parte de la API del <a href="/es/docs/Web/API/Document_Object_Model">Modelo de Objeto de Documento (DOM)</a>, que tiene la capacidad de manipular documentos.</p>
+</div>
+
+<h2 id="Curso_intensivo_de_fundamentos_del_lenguaje">Curso intensivo de fundamentos del lenguaje</h2>
+
+<p>Ahora se explicarán algunas de las funciones básicas del lenguaje JavaScript para que puedas comprender mejor cómo funciona todo. Mejor aún, estas características son comunes para todos los lenguajes de programación. Si puedes entender esos fundamentos, deberías ser capaz de comenzar a programar en casi cualquier cosa.</p>
+
+<div class="warning">
+<p><strong>Importante</strong>: en este artículo, trata de introducir las líneas de código de ejemplo en la consola de tu navegador para ver lo que sucede. Para más detalles sobre consolas JavaScript, mira <a href="/es/docs/Learn/Common_questions/What_are_browser_developer_tools">Descubre las herramientas de desarrollo de los navegadores</a>.</p>
+</div>
+
+<h3 id="Variables">Variables</h3>
+
+<p>Las {{Glossary("Variable", "Variables")}} son contenedores en los que puedes almacenar valores. Primero debes declarar la variable con la palabra clave <code><a href="/es/docs/Web/JavaScript/Reference/Statements/var">var</a></code> (menos recomendado) o <code><a href="/es/docs/Web/JavaScript/Reference/Statements/let">let</a></code>, seguida del nombre que le quieras dar. Se recomienda más el uso de <code>let</code> que de <code>var</code> (más adelante se profundiza un poco sobre esto):</p>
+
+<pre class="brush: js notranslate">let nombreDeLaVariable;</pre>
+
+<div class="note">
+<p><strong>Nota</strong>: todas las líneas en JS deben acabar en punto y coma (;) para indicar que es ahí donde termina la declaración. Si no los incluyes puedes obtener resultados inesperados. Sin embargo, algunas personas creen que es una buena práctica tener punto y coma al final de cada declaración. Hay otras reglas para cuando se debe y no se debe usar punto y coma. Para más detalles, vea <a href="http://news.codecademy.com/your-guide-to-semicolons-in-javascript/">Guía del punto y coma en JavaScript</a> (en inglés).</p>
+</div>
+
+<div class="note">
+<p><strong>Nota</strong>: puedes llamar a una variable con casi cualquier nombre, pero hay algunas restricciones (ver <a href="/es/docs/Web/JavaScript/Guide/Grammar_and_Types#Variables">este artículo sobre las reglas existentes</a>). Si no estás seguro, puedes <a href="https://mothereff.in/js-variables">comprobar el nombre de la variable</a> para ver si es válido.</p>
+</div>
+
+<div class="note">
+<p><strong>Nota</strong>: JavaScript distingue entre mayúsculas y minúsculas. <code>miVariable</code> es una variable distinta a <code>mivariable</code>. Si estás teniendo problemas en tu código, revisa las mayúsculas y minúsculas.</p>
+</div>
+
+<div class="note">
+<p><strong>Nota</strong>: para más detalles sobre la diferencia entre <code>var</code> y <code>let</code>, vea <a href="/es/docs/Learn/JavaScript/First_steps/Variables#Diferencia_entre_var_y_let">Diferencia entre var y let</a>.</p>
+</div>
+
+<p>Tras declarar una variable, puedes asignarle un valor:</p>
+
+<pre class="brush: js notranslate">nombreDeLaVariable = 'Bob';</pre>
+
+<p>Puedes hacer las dos cosas en la misma línea si lo necesitas:</p>
+
+<pre class="brush: js notranslate">let nombreDeLaVariable = 'Bob';</pre>
+
+<p>Puedes obtener el valor de la variable llamándola por su nombre:</p>
+
+<pre class="brush: js notranslate">nombreDeLaVariable;</pre>
+
+<p>Después de haberle dado un valor a la variable, puedes volver a cambiarlo:</p>
+
+<pre class="brush: js notranslate">let nombreDeLaVariable = 'Bob';
+nombreDeLaVariable = 'Steve';</pre>
+
+<p>Advierte que las variables tienen distintos <a href="/es/docs/Web/JavaScript/Data_structures">tipos de datos</a>:</p>
+
+<table class="standard-table">
+ <thead>
+  <tr>
+   <th scope="row">Variable</th>
+   <th scope="col">Explicación</th>
+   <th scope="col">Ejemplo</th>
+  </tr>
+ </thead>
+ <tbody>
+  <tr>
+   <th scope="row">{{Glossary("String","String")}}</th>
+   <td>Esto es una secuencia de texo conocida como cadena. Para indicar que la variable es una cadena, debes escribirlo entre comillas.</td>
+   <td><code>let miVariable = 'Bob';</code></td>
+  </tr>
+  <tr>
+   <th scope="row">{{Glossary("Number")}}</th>
+   <td>
+    <p>Esto es un número. Los números no tienen comillas.</p>
+   </td>
+   <td><code>let miVariable = 10;</code></td>
+  </tr>
+  <tr>
+   <th scope="row">{{Glossary("Boolean")}}</th>
+   <td>Tienen valor verdadero/falso. <code>true</code>/<code>false</code> son palabras especiales en JS, y no necesitan comillas.</td>
+   <td><code>let miVariable = true;</code></td>
+  </tr>
+  <tr>
+   <th scope="row">{{Glossary("Array")}}</th>
+   <td>Una estructura que te permite almacenar varios valores en una sola referencia.</td>
+   <td><code>let miVariable = [1,'Bob','Steve',10];</code><br>
+    Llama a cada miembro del array así: <code>miVariable[0]</code>, <code>miVariable[1]</code>, etc.</td>
+  </tr>
+  <tr>
+   <th scope="row">{{Glossary("Object")}}</th>
+   <td>
+    <p>Básicamente cualquier cosa. Todo en JavaScript es un objeto y puede ser almacenado en una variable. Mantén esto en mente mientras aprendes.</p>
+   </td>
+   <td><code>let miVariable = document.querySelector('h1');</code><br>
+    Todos los ejemplos anteriores también.</td>
+  </tr>
+ </tbody>
+</table>
+
+<p>Entonces, ¿para qué necesitamos las variables? Las variables son necesarias para hacer cualquier cosa interesante en programación. Si los valores no pudieran cambiar, entonces no podrías hacer nada dinámico, como personalizar un mensaje de bienvenida de un usuario que visita tu página, cambiar la imagen que se muestra en una galería de imágenes, etc.</p>
+
+<h3 id="Comentarios">Comentarios</h3>
+
+<p>Puedes escribir comentarios entre el código JavaScript, igual que puedes en CSS. El navegador ignora el texto marcado como comentario. En JavaScript, los comentarios de una sola línea se escriben así:</p>
+
+<pre class="brush: js notranslate">// Esto es un comentario</pre>
+
+<p>Pero también puedes escribir comentarios en más de una línea, igual que en CSS:</p>
+
+<pre class="brush: js notranslate">/*
+Esto es un comentario
+de varias líneas.
+*/</pre>
+
+<h3 id="Operadores">Operadores</h3>
+
+<p>Un {{Glossary("operator", "operador")}} es básicamente un símbolo matemático que puede actuar sobre dos valores (o variables) y producir un resultado. En la tabla de abajo aparecen los operadores más simples, con algunos ejemplos para probarlos en la consola del navegador.</p>
+
+<table class="standard-table" style="height: 679px; width: 702px;">
+ <thead>
+  <tr>
+   <th scope="row">Operador</th>
+   <th scope="col">Explicación</th>
+   <th scope="col">Símbolo(s)</th>
+   <th scope="col">Ejemplo</th>
+  </tr>
+ </thead>
+ <tbody>
+  <tr>
+   <th scope="row">Suma/concatena</th>
+   <td>Se usa para sumar dos números, o juntar dos cadenas en una.</td>
+   <td><code>+</code></td>
+   <td><code>6 + 9;<br>
+    "Hola " + "mundo!";</code></td>
+  </tr>
+  <tr>
+   <th scope="row">Resta, multiplicación, división</th>
+   <td>Estos hacen lo que esperarías que hicieran en las matemáticas básicas.</td>
+   <td><code>-</code>, <code>*</code>, <code>/</code></td>
+   <td><code>9 - 3;<br>
+    8 * 2; // La multiplicación en JS es un asterisco<br>
+    9 / 3;</code></td>
+  </tr>
+  <tr>
+   <th scope="row">Operador de asignación</th>
+   <td>Los has visto anteriormente: asigna un valor a una variable.</td>
+   <td><code>=</code></td>
+   <td><code>let miVariable = 'Bob';</code></td>
+  </tr>
+  <tr>
+   <th scope="row">identidad/igualdad</th>
+   <td>Comprueba si dos valores son iguales entre sí, y devuelve un valor de <code>true</code>/<code>false</code> (booleano).</td>
+   <td><code>===</code></td>
+   <td><code>let miVariable = 3;<br>
+    miVariable === 4;</code></td>
+  </tr>
+  <tr>
+   <th scope="row">Negación, distinto (no igual)</th>
+   <td><br>
+    En ocasiones utilizado con el operador de identidad, la negación es en JS el equivalente al operador lógico NOT — cambia <code>true</code> por <code>false</code> y viceversa.</td>
+   <td><code>!</code>, <code>!==</code></td>
+   <td>
+    <p>La expresión básica es <code>true</code>, pero la comparación devuelve <code>false</code> porque lo hemos negado:</p>
+
+    <p><code>let miVariable = 3;<br>
+     !miVariable === 3;</code></p>
+
+    <p>Aquí estamos comprobando "<code>miVariable</code> NO es igual a 3". Esto devuelve <code>false</code>, porque <code>miVariable</code> ES igual a 3.</p>
+
+    <p><code><code>let miVariable = 3;</code><br>
+     miVariable !== 3;</code></p>
+   </td>
+  </tr>
+ </tbody>
+</table>
+
+<p>Hay muchos operadores por explorar, pero con esto será suficiente por ahora. Mira <a href="/es/docs/Web/JavaScript/Reference/Operators">Expresiones y operadores</a> para ver la lista completa.</p>
+
+<div class="note">
+<p><strong>Nota</strong>: mezclar tipos de datos puede dar lugar a resultados extraños cuando se hacen cálculos, así que asegúrate de que relacionas tus variables correctamente y de que recibes los resultados que esperabas. Por ejemplo, teclea: <code>"3" + "25"</code> en tu consola. ¿Por qué no obtienes lo que esperabas? Porque las comillas convierten los números en "strings" (el término inglés para denominar cadenas de caracteres) y de este modo has acabado con los "strings" concatenados entre sí, y no con los números sumados. Si tecleas: <code>35 + 25</code>, obtendrás el resultado correcto.</p>
+</div>
+
+<h3 id="Condicionales">Condicionales</h3>
+
+<p>Las condicionales son estructuras de código que permiten comprobar si una expresión devuelve <em>true</em> o no, y después ejecuta un código diferente dependiendo del resultado. La forma de condicional más común es la llamada <code>if... else</code>. Entonces, por ejemplo:</p>
+
+<pre class="brush: js notranslate">let helado = 'chocolate';
+if (helado === 'chocolate') {
+  alert('¡Sí, amo el helado de chocolate!');
+} else {
+  alert('Awwww, pero mi favorito es el de chocolate...');
+}</pre>
+
+<p>La expresión dentro de <code>if (... )</code> es el criterio — este usa al operador de identidad (descrito arriba) para comparar la variable <code>helado</code> con la cadena <code>chocolate</code> para ver si las dos son iguales. Si esta comparación devuelve <code>true</code>, el primer bloque de código se ejecuta. Si no, ese código se omite y se ejecuta el segundo bloque de código después de la declaración <code>else</code>.</p>
+
+<h3 id="Funciones">Funciones</h3>
+
+<p>Las {{Glossary("Function", "funciones")}} son una manera de encapsular una funcionalidad que quieres reutilizar, de manera que puedes llamar esa función con un solo nombre, y no tendrás que escribir el código entero cada vez que la utilices. Ya has visto algunas funciones más arriba, por ejemplo:</p>
+
+<ol>
+ <li>
+  <pre class="brush: js notranslate"><code>let</code> nombreDeLaVariable = document.querySelector('h1');</pre>
+ </li>
+ <li>
+  <pre class="brush: js notranslate">alert('¡Hola!');</pre>
+ </li>
+</ol>
+
+<p>Estas funciones <code>document.querySelector</code> y <code>alert</code> están integradas en el navegador para poder utilizarlas en cualquier momento.</p>
+
+<p>Si ves algo que parece un nombre de variable, pero tiene paréntesis —<code>()</code>— al final, probablemente es una función. Las funciones con frecuencia toman {{Glossary("Argument", "argumentos")}} —pedazos de datos que necesitan para hacer su trabajo—. Estos se colocan dentro de los paréntesis, y se separan con comas si hay más de uno.</p>
+
+<p>Por ejemplo, la función <code>alert()</code> hace aparecer una ventana emergente dentro de la ventana del navegador, pero necesitas asignarle una cadena como argumento para decirle qué mensaje se debe escribir en la ventana emergente.</p>
+
+<p>Las buenas noticias son que podemos definir nuestras propias funciones —en el siguiente ejemplo escribimos una función simple que toma dos números como argumentos y los multiplica entre sí—:</p>
+
+<pre class="brush: js notranslate">function multiplica(num1,num2) {
+  <code>let</code> resultado = num1 * num2;
+  return resultado;
+}</pre>
+
+<p>Trata de ejecutar la función anterior en la consola. Después trata de usar la nueva función algunas veces, p.ej:</p>
+
+<pre class="brush: js notranslate">multiplica(4, 7);
+multiplica(20, 20);
+multiplica(0.5, 3);
+</pre>
+
+<div class="note">
+<p><strong>Nota</strong>: la sentencia <a href="/es/docs/Web/JavaScript/Reference/Statements/return"><code>return</code></a> le dice al navegador que devuelva la variable <code>resultado</code> fuera de la función, para que esté disponible para su uso. Esto es necesario porque las variables definidas dentro de funciones, solo están disponibles dentro de esas funciones. Esto se conoce como «{{Glossary("Scope", "ámbito")}} (<em>scope</em> en inglés) de la variable». Lee más sobre <a href="/es/docs/Web/JavaScript/Guide/Grammar_and_types#%C3%81mbito_de_variable">ámbito o alcance de la variable</a>.</p>
+</div>
+
+<h3 id="Eventos">Eventos</h3>
+
+<p>Para crear una interacción real en tu sitio web, debes usar eventos. Estos son unas estructuras de código que captan lo que sucede en el navegador, y permite que en respuesta a las acciones que suceden se ejecute un código. El ejemplo más obvio es un clic (<a href="/es/docs/Web/Events/click">click event</a>), que se activa al hacer clic sobre algo. Para demostrar esto, prueba ingresando lo siguiente en tu consola, luego da clic sobre la página actual:</p>
+
+<pre class="brush: js notranslate">document.querySelector('html').onclick = function() {
+    alert('¡Ouch! ¡Deja de pincharme!');
+}
+</pre>
+
+<p>Hay muchas maneras de enlazar un evento a un elemento; aquí hemos seleccionado el elemento {{htmlelement("html")}} y le asignamos a su propiedad <code><a href="/es/docs/Web/API/GlobalEventHandlers/onclick">onclick</a></code> una función anónima (función sin nombre) que contiene el código que se ejecutará cuando el evento suceda.</p>
+
+<p>Nota que</p>
+
+<pre class="brush: js notranslate">document.querySelector('html').onclick = function(){};
+</pre>
+
+<p>es equivalente a</p>
+
+<pre class="brush: js notranslate"><code>let</code> miHTML = document.querySelector('html');
+miHTML.onclick = function(){};
+</pre>
+
+<p>es solo un modo más corto de escribirlo.</p>
+
+<h2 id="Sobrecargar_tu_sitio_web_de_ejemplo">Sobrecargar tu sitio web de ejemplo</h2>
+
+<p>Ahora vas a repasar un poco lo básico de JavaScript. Añadirás un par de funcionalidades a tu sitio para demostrar lo que puedes hacer.</p>
+
+<h3 id="Añadir_un_cambiador_de_imagen">Añadir un cambiador de imagen</h3>
+
+<p>En esta sección añadirás otra imagen a tu sitio usando la DOM API y agregarás un poco de código para cambiar entre imágenes al hacer clic.</p>
+
+<ol>
+ <li>Primero que todo, busca una imagen que te guste para tu sitio. Asegúrate que sea del mismo tamaño que la primera, o lo más cerca posible.</li>
+ <li>Guarda tu imagen en tu carpeta <code>images</code>.</li>
+ <li>Renombra esta imagen «firefox2.png» (sin las comillas).</li>
+ <li>Ve a tu archivo <code>main.js</code> y agrega el siguiente JavaScript (si tu JavaScript de <em>«Hola Mundo»</em> está aún allí, bórralo).
+  <pre class="brush: js notranslate"><code>let </code>miImage = document.querySelector('img');
+miImage.onclick = function () {
+    <code>let </code>miSrc = miImage.getAttribute('src');
+    if (miSrc === 'images/firefox-icon.png') {
+      miImage.setAttribute('src','images/firefox2.png');
+    } else {
+      miImage.setAttribute('src', 'images/firefox-icon.png');
+    }
+}</pre>
+ </li>
+ <li>Guarda todos los archivos y carga <code>index.html</code> en tu navegador. Ahora cuando hagas clic en la imagen, ¡esta debe cambiar por otra!</li>
+</ol>
+
+<p>Esto fue lo que sucedió: se almacena una referencia a tu elemento {{htmlelement("img")}} en la variable <code>miImage</code>. Luego, haces que esta propiedad del manejador de evento <code>onclick</code> de la variable sea igual a una función sin nombre (una función «anónima»). Ahora, cada vez que se haga clic en la imagen:</p>
+
+<ol>
+ <li>El código recupera el valor del atributo <code>src</code> de la imagen.</li>
+ <li>El código usa una condicional para comprobar si el valor <code>src</code> es igual a la ruta de la imagen original:
+  <ol>
+   <li>Si es así, el código cambia el valor de <code>src</code> a la ruta de la segunda imagen, forzando a que se cargue la otra imagen en el elemento {{htmlelement("img")}}.</li>
+   <li>Si no es así (significa que ya fue modificada), se cambiará el valor de <code>src</code> nuevamente a la ruta de la imagen original, regresando a como era en un principio.</li>
+  </ol>
+ </li>
+</ol>
+
+<h3 id="Añadir_un_mensaje_de_bienvenida_personalizado">Añadir un mensaje de bienvenida personalizado</h3>
+
+<p>Ahora añadirás un poco más de código, para cambiar el título de la página o incluir un mensaje personalizado de bienvenida para cuando el usuario ingrese por primera vez. Este mensaje de bienvenida permanecerá luego de que el usuario abandone la página y estará disponible para cuando regrese. Lo guardarás usando <a href="/es/docs/Web/API/Web_Storage_API">Web Storage API</a>. También se incluirá una opción para cambiar el usuario y por lo tanto también el mensaje de bienvenida en cualquier momento que se requiera.</p>
+
+<ol>
+ <li>En <code>index.html</code>, agrega el siguiente código antes del elemento {{htmlelement("script")}}:
+
+  <pre class="brush: html notranslate">&lt;button&gt;Cambiar de usuario&lt;/button&gt;</pre>
+ </li>
+ <li>En <code>main.js</code>, agrega el siguiente código al final del archivo, exactamente como está escrito. Esto toma referencia al nuevo botón que se agregó y al título y los almacena en variables:
+  <pre class="brush: js notranslate"><code>let</code> miBoton = document.querySelector('button');
+<code>let</code> miTitulo = document.querySelector( 'h1');</pre>
+ </li>
+ <li>Ahora agrega la siguiente función para poner el saludo personalizado, lo que no causará nada aún, pero arreglarás esto en un momento:
+  <pre class="brush: js notranslate">function estableceNombreUsuario() {
+    <code>let</code> miNombre = prompt('Por favor, ingresa tu nombre.');
+    localStorage.setItem('nombre', miNombre);
+    miTitulo.textContent = 'Mozilla es genial,' + miNombre;
+}</pre>
+  La función <code>estableceNombreUsuario()</code> contiene una función <a href="/es/docs/Web/API/Window/prompt"><code>prompt()</code></a>, que crea un cuadro de diálogo como lo hace <code>alert()</code>; la diferencia es que <code>prompt()</code> pide al usuario un dato, y almacena este dato en una variable cuando el botón <strong>Aceptar </strong>del cuadro de diálogo es presionado. En este caso, pedirás al usuario que ingrese su nombre. Luego, llamarás la API <code>localStorage</code>, que nos permite almacenar datos en el navegador y recuperarlos luego. Usarás la función <code>setItem()</code> de localStorage, que crea y almacena un dato en el elemento llamado <code>'nombre'</code>, y coloca este valor en la variable <code>miNombre</code> que contiene el nombre que el usuario ingresó. Finalmente, establecerás el <code>textContent</code> del título a una cadena, más el nombre de usuario recientemente almacenado.</li>
+ <li>Luego, agregarás este bloque <code>if ... else</code>. Se podría llamar a esto el código de inicialización, como se ha establecido para cuando carga la app por primera vez:
+  <pre class="brush: js notranslate">if (!localStorage.getItem('nombre')) {
+    estableceNombreUsuario();
+}
+else {
+    <code>let</code> nombreAlmacenado = localStorage.getItem('nombre');
+    miTitulo.textContent = 'Mozilla es genial,' + nombreAlmacenado;
+}</pre>
+  La primera línea de este bloque usa el operador de negación (NO lógico representado por <code>!</code>) para comprobar si el elemento <code>'nombre'</code> existe. Si no existe, la función <code>estableceNombreUsuario()</code> se iniciará para crearlo. Si ya existe (como por ejemplo cuando el usuario ya ingresó al sitio), se recupera el dato del nombre usando <code>getItem()</code> y se fija mediante <code>textContent</code> del título a la cadena, más el nombre del usuario, como hiciste dentro de <code>estableceNombreUsuario()</code>.</li>
+ <li>Finalmente, agrega abajo el evento <code>onclick</code> que manipulará el botón, de modo que cuando sea pulsado se inicie la función <code>estableceNombreUsuario()</code>. Esto permitirá al usuario establecer un nuevo nombre cada vez que lo desee al pulsar el botón:
+  <pre class="brush: js notranslate">miBoton.onclick = function() {
+    <code>estableceNombreUsuario</code>();
+}</pre>
+ </li>
+</ol>
+
+<p>Ahora cuando visites tu sitio por primera vez, este te pedirá tu nombre y te dará un mensaje personalizado de bienvenida. Puedes cambiar cuantas veces quieras el nombre al presionar el botón. Y como un bonus añadido, ya que el nombre se almacena en el localStorage, este permanecerá después de que cierre el sitio, ¡manteniendo ahí el mensaje personalizado cuando abras el sitio la próxima vez!</p>
+
+<h3 id="¿Un_nombre_de_usuario_nulo">¿Un nombre de usuario nulo?</h3>
+
+<p>Cuando ejecutes el ejemplo y obtengas el cuadro de diálogo que solicita que introduzcas tu nombre de usuario, intenta pulsar el botón <em>Cancelar</em>. Deberías terminar con un título que diga que <em>Mozilla es genial, null</em>. Esto sucede porque, cuando cancelas el mensaje, el valor se establece como <code>null</code>. Null (nulo) es un valor especial en JavaScript que se refiere a la ausencia de un valor.</p>
+
+<p>Además, prueba a dar clic en <em>Aceptar</em> sin introducir un nombre. Deberías terminar con un título que diga que <em>Mozilla es genial</em>, por razones bastante obvias.</p>
+
+<p>Para evitar estos problemas, podrías comprobar que el usuario no ha introducido un nombre en blanco. Actualiza tu función <code>estableceNombreUsuario()</code> a lo siguiente:</p>
+
+<pre class="brush: js notranslate">function estableceNombreUsuario() {
+  let miNombre = prompt('Introduzca su nombre.');
+  if(!miNombre) {
+    estableceNombreUsuario();
+  } else {
+    localStorage.setItem('nombre', miNombre);
+    miTitulo.innerHTML = 'Mozilla is genial, ' + miNombre;
+  }
+}</pre>
+
+<p>En el lenguaje humano, esto significa que si <code>miNombre</code> no tiene ningún valor, ejecute <code>estableceNombreUsuario()</code> de nuevo desde el principio. Si tiene un valor (si la afirmación anterior no es verdadera), entonces almacene el valor en <code>localStorage</code> y establézcalo como el texto del título.</p>
+
+<h2 id="Conclusión">Conclusión</h2>
+
+<p>Si has seguido las instrucciones en este artículo, tendrás una página que luzca como esta (también puede <a href="http://mdn.github.io/beginner-html-site-scripted/">ver nuestra versión aquí</a>):</p>
+
+<p><img alt="" src="https://mdn.mozillademos.org/files/9539/website-screen-scripted.png" style="display: block; height: 995px; margin: 0px auto; width: 800px;"></p>
+
+<p>Si tuviste problemas, siempre puedes comparar su trabajo con el <a href="https://github.com/mdn/beginner-html-site-scripted/blob/gh-pages/scripts/main.js">código terminado del ejemplo en GitHub</a>.</p>
+
+<p>Aquí solo has rozado la superficie de JavaScript. Si has disfrutado aprendiendo y deseas avanzar más, visita la <a href="/es/docs/Web/JavaScript/Guide">Guía de JavaScript</a>.</p>
+
+<h2 id="Ve_también">Ve también</h2>
+
+<dl>
+ <dt><a href="/es/docs/Learn/JavaScript">JavaScript</a></dt>
+ <dd>Sumérgete en JavaScript con mucho más detalle.</dd>
+ <dt><a href="https://learnjavascript.online/">Aprende JavaScript</a></dt>
+ <dd>¡Este es un excelente material para los aspirantes a desarrolladores web! Aprende JavaScript en un entorno interactivo, con lecciones cortas y pruebas interactivas, guiadas por una evaluación automatizada. Las primeras 40 lecciones son gratis. El curso completo está disponible por un pequeño pago único (en inglés).</dd>
+</dl>
+
+<p>{{PreviousMenuNext( "Learn/Getting_started_with_the_web/CSS_basics","Learn/Getting_started_with_the_web/Publishing_your_website","Learn/Getting_started_with_the_web")}}</p>
+
+<h2 id="En_este_módulo">En este módulo</h2>
+
+<ul>
+ <li id="Installing_basic_software"><a href="/es/Learn/Getting_started_with_the_web/Installing_basic_software">Instalación de software básico</a></li>
+ <li id="What_will_your_website_look_like"><a href="/es/Learn/Getting_started_with_the_web/What_will_your_website_look_like">¿Cómo será tu sitio web?</a></li>
+ <li id="Dealing_with_files"><a href="/es/Learn/Getting_started_with_the_web/Dealing_with_files">El trato con archivos</a></li>
+ <li id="HTML_basics"><a href="/es/Learn/Getting_started_with_the_web/HTML_basics">Conceptos básicos de HTML</a></li>
+ <li id="CSS_basics"><a href="/es/Learn/Getting_started_with_the_web/CSS_basics">Conceptos básicos de CSS</a></li>
+ <li id="JavaScript_basics"><a href="/es/Learn/Getting_started_with_the_web/JavaScript_basics">Conceptos básicos de JavaScript</a></li>
+ <li id="Publishing_your_website"><a href="/es/Learn/Getting_started_with_the_web/Publishing_your_website">Publica tu sitio web</a></li>
+ <li id="How_the_web_works"><a href="/es/Learn/Getting_started_with_the_web/How_the_Web_works">Como funciona la web</a></li>
+</ul>
diff --git a/files/es/learn/getting_started_with_the_web/la_web_y_los_estandares_web/index.html b/files/es/learn/getting_started_with_the_web/la_web_y_los_estandares_web/index.html
new file mode 100644
index 0000000000..daf6e77d18
--- /dev/null
+++ b/files/es/learn/getting_started_with_the_web/la_web_y_los_estandares_web/index.html
@@ -0,0 +1,172 @@
+---
+title: La web y los estándares web
+slug: Learn/Getting_started_with_the_web/La_web_y_los_estandares_web
+tags:
+  - Estándares web
+  - Front-end
+  - Interfáz de Usuario
+  - Novato
+  - Principiante
+  - Web
+  - aprende
+translation_of: Learn/Getting_started_with_the_web/The_web_and_web_standards
+---
+<p dir="ltr">{{learnsidebar}}</p>
+
+<p dir="ltr">Este artículo proporciona algunos antecedentes útiles sobre la Web — cómo surgió, qué son las tecnologías web estándar, cómo funcionan juntas, por qué "desarrollador web" es una gran carrera para elegir y qué tipos de mejores prácticas aprenderás a través de este curso.</p>
+
+<h2 dir="ltr" id="Breve_historia_de_la_web">Breve historia de la web</h2>
+
+<p dir="ltr">Mantendremos esto muy breve, ya que hay muchos artículos (más) detallados de la historia de la web, a los que enlazaremos más adelante (también intenta buscar "historia de la web" en tu motor de búsqueda favorito y ve lo que obtienes, si estás interesado en más detalles).</p>
+
+<p dir="ltr">A fines de la década de 1960, las fuerzas armadas de EE. UU. desarrollaron una red de comunicación llamada {{Glossary("Arpanet")}}. Esta se puede considerar una precursora de la Web, ya que trabajó en la {{interwiki("wikipedia", "conmutación de paquetes")}} y presentó la primera implementación de la {{interwiki("wikipedia", "Familia de protocolos de internet")}} TCP/IP. Estas dos tecnologías forman la base de la infraestructura sobre la que se construye Internet.</p>
+
+<p dir="ltr">En 1980, Tim Berners-Lee (a menudo denominado TimBL) escribió un programa de block de notas llamado ENQUIRE, que presentaba el concepto de enlaces entre diferentes nodos. ¿Te suena familiar?</p>
+
+<p dir="ltr">Avanzó rápidamente hasta 1989, y TimBL escribió <a href="https://www.w3.org/History/1989/proposal.html" rel="noopener">Gestión de la información: una propuesta</a> e hipertexto en el CERN; estas dos publicaciones juntas proporcionaron los antecedentes de cómo funcionaría la web. Recibieron una buena cantidad de interés, suficiente para convencer a los jefes de TimBL de que le permitieran seguir adelante y creara un sistema de hipertexto global.</p>
+
+<p dir="ltr">A finales de 1990, TimBL había creado todo lo necesario para ejecutar la primera versión de la web: {{web.link("/es/docs/Web/HTTP", "HTTP")}}, {{web.link("/es/docs/Web/HTML", "HTML")}}, el primer navegador web, que se llamaba {{interwiki("wikipedia", "WorldWideWeb")}}, un servidor HTTP y algunas páginas web para mirar.</p>
+
+<p dir="ltr">En los años siguientes, la web explotó, se lanzaron varios navegadores, se instalaron miles de servidores web y se crearon millones de páginas web. Bien, este es un muy sencillo resumen de lo que sucedió, pero les prometí un breve resumen.</p>
+
+<p dir="ltr">Un último dato importante para compartir es que en 1994, TimBL fundó el {{interwiki("wikipedia", "World Wide Web Consortium")}} (W3C), una organización que reúne a representantes de muchas empresas de tecnología diferentes para trabajar juntos en la creación de especificaciones de tecnología web. Después de eso, siguieron otras tecnologías como {{web.link("/es/docs/Web/CSS", "CSS")}} y {{web.link("/es/docs/Web/JavaScript", "JavaScript")}}, y la web comenzó a parecerse más a la web que conocemos hoy.</p>
+
+<h2 dir="ltr" id="Estándares_web">Estándares web</h2>
+
+<p dir="ltr"><strong>Los estándares web</strong> son las tecnologías que utilizamos para crear sitios web. Estos estándares existen como extensos documentos técnicos llamados <em>especificaciones</em>, que detallan exactamente cómo debería funcionar la tecnología. Estos documentos no son muy útiles para aprender a usar las tecnologías que describen (es por eso que tenemos sitios como <em>MDN Web Docs</em>), sino que están pensados ​​para que los utilicen los ingenieros de software para implementar esas tecnologías (generalmente en los navegadores web).</p>
+
+<p dir="ltr">Por ejemplo, el <a href="https://html.spec.whatwg.org/multipage/" rel="noopener">lleno de vida Estándar HTML</a> describe exactamente cómo se debe implementar HTML (todos los elementos HTML y sus APIs asociadas y otras tecnologías circundantes).</p>
+
+<p dir="ltr">Los estándares web son creados por organismos de estándares — instituciones que invitan a grupos de personas de diferentes compañías de tecnología a unirse y acordar cómo deberían funcionar las tecnologías de la mejor manera posible para cumplir con todos sus casos de uso. El W3C es el organismo de estándares web más conocido, pero hay otros como <a href="https://whatwg.org/" rel="noopener">WHATWG</a> (que fueron responsables de la modernización del lenguaje HTML), <a href="https://www.ecma-international.org/" rel="noopener">ECMA</a> (que publica el estándar para ECMAScript, en el que se basa JavaScript), <a href="https://www.khronos.org/" rel="noopener">Khronos</a> (que publica tecnologías para gráficos 3D, como WebGL) y otras.</p>
+
+<h3 dir="ltr" id="Estándares_abiertos">Estándares "abiertos"</h3>
+
+<p dir="ltr">Uno de los aspectos clave de los estándares web, que TimBL y el W3C acordaron desde el principio, es que la web (y las tecnologías web) deben ser libres tanto para contribuir como para usar, y no estar gravadas por patentes/licencias. Por lo tanto, cualquiera puede escribir el código para crear un sitio web de forma gratuita y cualquiera puede contribuir al proceso de creación de estándares, donde se escriben las especificaciones.</p>
+
+<p dir="ltr">Debido a que las tecnologías web se crean abiertamente, en colaboración entre muchas empresas diferentes, significa que ninguna empresa las puede controlar, lo cual es algo realmente bueno. No querrías que una sola empresa decidiera repentinamente poner toda la web detrás de un muro de pago, o lanzar una nueva versión de HTML que todos tienen que comprar para continuar creando sitios web, o peor aún, simplemente decidiendo que ya no están interesados, y simplemente apagarlas.</p>
+
+<p dir="ltr">Esto permite que la web siga siendo un recurso público de libre acceso.</p>
+
+<h3 dir="ltr" id="No_rompas_la_web">No rompas la web</h3>
+
+<p dir="ltr">Otra frase que escucharás sobre los estándares web abiertos es "no rompas la web" — la idea es que cualquier tecnología web nueva que se introduzca debe ser compatible con versiones anteriores (es decir, los sitios web antiguos seguirán funcionando) y compatibles con versiones posteriores (las tecnologías futuras a su vez serán compatibles con las que tenemos actualmente). A medida que avances en el material de aprendizaje que se presenta aquí, comenzarás a aprender cómo se hace posible esto con un trabajo de diseño e implementación muy inteligente.</p>
+
+<h2 id="Ser_desarrollador_web_es_bueno">Ser desarrollador web es bueno</h2>
+
+<p>La industria web es un mercado muy atractivo para ingresar si estás buscando trabajo. Las cifras publicadas recientemente dicen que actualmente hay alrededor de 19 millones de desarrolladores web en el mundo, y esa cifra se establecerá en más del doble en la próxima década. Y al mismo tiempo, hay una escasez de habilidades en la industria, entonces, ¿qué mejor momento para aprender sobre desarrollo web?</p>
+
+<p>Sin embargo, no todo es diversión y juegos — crear sitios web es una propuesta más complicada de lo que solía ser, y tendrás que dedicar algo de tiempo a estudiar todas las diferentes tecnologías que necesitas usar, todas las técnicas y las mejores prácticas que necesitas conocer y todos los patrones típicos que se te pedirá que implementes. Te tomará unos meses comenzar realmente a involucrarte en él, y luego deberás seguir aprendiendo para que tu conocimiento se mantenga actualizado con todas las nuevas herramientas y funciones que aparecen en la plataforma web, y seguir practicando y perfeccionando tu oficio.</p>
+
+<p><em>Lo único constante es el cambio.</em></p>
+
+<p>¿Esto suena difícil? No te preocupes: nuestro objetivo es brindarte todo lo que necesitas saber para comenzar, y las cosas serán más fáciles. Una vez que aceptes el cambio constante y la incertidumbre de la web, comenzarás a disfrutar. Como parte de la comunidad web, tendrás toda una red de contactos y material útil para ayudarte, y comenzarás a disfrutar de las posibilidades creativas que brinda.</p>
+
+<p>Ahora eres un creativo digital. Disfruta de la experiencia y el potencial de ganarte la vida.</p>
+
+<h2 id="Descripción_de_las_tecnologías_web_modernas">Descripción de las tecnologías web modernas</h2>
+
+<p>Hay una serie de tecnologías que debes aprender si deseas ser un desarrollador web front-end. En esta sección las describiremos brevemente. Para obtener una explicación más detallada de cómo funcionan juntas algunas de ellas, lee nuestro artículo {{web.link("/es/docs/Learn/Getting_started_with_the_web/How_the_Web_works", "Cómo funciona la web")}}.</p>
+
+<h3 id="Navegadores">Navegadores</h3>
+
+<p>Probablemente estés leyendo estas palabras dentro de un navegador web en este mismo momento (a menos que las hayas impreso o estés utilizando tecnología de asistencia, como un lector de pantalla para leerlas). Los navegadores web son los programas de software que la gente usa para consumir la web e incluyen <a href="https://www.mozilla.org/es-MX/firefox/" rel="noopener">Firefox</a>, <a href="https://www.google.com/intl/es-419/chrome/" rel="noopener">Chrome</a>, <a href="https://www.opera.com/es" rel="noopener">Opera</a>, <a href="https://www.apple.com/mx/safari/" rel="noopener">Safari</a> y <a href="https://www.microsoft.com/es-es/edge" rel="noopener">Edge</a>.</p>
+
+<h3 id="HTTP">HTTP</h3>
+
+<p>El Protocolo de transferencia de hipertexto, o {{web.link("/es/docs/Web/HTTP/Basics_of_HTTP", "HTTP")}}, es un protocolo de mensajería que permite a los navegadores web comunicarse con los servidores web (donde se almacenan los sitios web). Una conversación típica es algo así como</p>
+
+<pre class="brush: bash notranslate">"Hola servidor web. ¿Me puedes dar los archivos que necesito para renderizar bbc.co.uk"?
+
+"Seguro navegador web — aquí los tienes"
+
+[Descarga archivos y renderiza la página web]</pre>
+
+<p>La sintaxis real de los mensajes HTTP (llamados peticiones y respuestas) no es tan legible para los humanos, pero esto te da una idea básica.</p>
+
+<h3 id="HTML_CSS_y_JavaScript">HTML, CSS y JavaScript</h3>
+
+<p>{{web.link("/es/docs/Web/HTML", "HTML")}}, {{web.link("/es/docs/Web/CSS", "CSS")}} y {{web.link("/es/docs/Web/JavaScript", "JavaScript")}} son las tres tecnologías principales que utilizarás para crear un sitio web:</p>
+
+<ul>
+ <li>
+  <p>El lenguaje de marcado de hipertexto, o <strong>HTML</strong>, es un lenguaje de marcado que consta de diferentes elementos en los que puedes ajustar (marcar) el contenido para darle significado (semántica) y estructura. El HTML simple se ve así:</p>
+
+  <pre class="brush: html notranslate"><code>&lt;h1&gt;Este es un encabezado de alto nivel&lt;/h1&gt;
+
+&lt;p&gt;Este es un párrafo de texto.&lt;/p&gt;
+
+&lt;img src="cat.jpg" alt="Una imagen de mi gato"&gt;</code></pre>
+
+  <p>Si adoptamos una analogía de la construcción de casas, HTML sería como los cimientos y las paredes de la casa, que le dan estructura y la mantienen unida.</p>
+ </li>
+ <li>
+  <p>Hojas de estilo en cascada (<strong>CSS</strong> por "<em>Cascading Style Sheets</em>") es un lenguaje basado en reglas que se utiliza para aplicar estilos a tu HTML, por ejemplo, establecer colores del texto y del fondo, agregar bordes, animar cosas o diseñar una página de cierta manera. Como un sencillo ejemplo, el siguiente código convertirá nuestro párrafo HTML en rojo:</p>
+
+  <pre class="notranslate">p  {
+  color: red;
+}</pre>
+
+  <p>En la analogía de la casa, CSS es como la pintura, el papel tapiz, las alfombras y los cuadros que usarías para hacer que la casa se vea bien.</p>
+ </li>
+ <li>
+  <p><strong>JavaScript</strong> es el lenguaje de programación que usamos para agregar interactividad a los sitios web, desde el cambio de estilo dinámico hasta la obtención de actualizaciones desde el servidor, pasando por gráficos complejos en 3D. El siguiente JavaScript simple almacenará en la memoria una referencia a nuestro párrafo y cambiará el texto dentro de él:</p>
+
+  <pre class="brush: js notranslate">let pElem = document.querySelector('p');
+pElem.textContent =  '¡Cambiamos el texto!';</pre>
+
+  <p>En la analogía de la casa, JavaScript es como la cocina, el televisor, el microondas o la secadora de pelo — las cosas que le dan a tu casa una útil funcionalidad.</p>
+ </li>
+</ul>
+
+<h3 id="Herramientas">Herramientas</h3>
+
+<p>Una vez que hayas aprendido las tecnologías "sin procesar" que se pueden usar para crear páginas web (como HTML, CSS y JavaScript), pronto comenzarás a encontrar varias herramientas que puedes usar para hacer tu trabajo más fácil y/o más eficiente. Algunos ejemplos incluyen:</p>
+
+<ul>
+ <li>Las {{web.link("/es/docs/Learn/Common_questions/What_are_browser_developer_tools", "herramientas de desarrollo")}} dentro de los navegadores modernos que se pueden usar para depurar tu código.</li>
+ <li>{{web.link("/es/docs/Learn/Tools_and_testing/Cross_browser_testing", "Herramientas de prueba")}} que puedes usar para ejecutar pruebas y mostrar si tu código se está comportando como lo esperabas.</li>
+ <li>Bibliotecas y marcos de desarrollo construidos sobre JavaScript que te permiten crear ciertos tipos de sitios web de manera mucho más rápida y efectiva.</li>
+ <li>Las llamadas "Linternas" (<code>Linters</code> en inglés), que toman un conjunto de reglas, examinan tu código y resaltan los lugares donde no has seguido las reglas correctamente.</li>
+ <li>Minificadores, que eliminan todos los espacios en blanco de tus archivos de código fuente para que sean más pequeños y, por lo tanto, se descarguen del servidor más rápidamente.</li>
+</ul>
+
+<h3 id="Marcos_de_desarrollo_y_lenguajes_de_lado_del_servidor">Marcos de desarrollo y lenguajes de lado del servidor</h3>
+
+<p>HTML, CSS y JavaScript son lenguajes de la interfaz del usuario ("<code>front-end</code>" o del lado del cliente), lo cual significa que los ejecuta el navegador para producir la interfaz del sitio web que los usuarios pueden utilizar.</p>
+
+<p>Hay otra clase de lenguajes llamados lenguajes de la interfaz de admiración ("<code>back-end</code>" o de lado del servidor), lo cual significa que se ejecutan en el servidor antes de que el resultado se envíe al navegador para que se muestre. Un uso típico de un lenguaje de lado del servidor es obtener algunos datos de una base de datos y generar algo de HTML para contener los datos, antes de enviar el HTML al navegador para mostrárselo al usuario.</p>
+
+<p>Los lenguajes de lado del servidor de ejemplo incluyen ASP.NET, Python, PHP y NodeJS.</p>
+
+<h2 id="Mejores_prácticas_web">Mejores prácticas web</h2>
+
+<p>Hemos hablado brevemente sobre las tecnologías que utilizarás para crear sitios web. Ahora analicemos las mejores prácticas que debes emplear para asegurarte de que estás utilizando esas tecnologías de la mejor manera posible.</p>
+
+<p>Al hacer desarrollo web, la principal causa de incertidumbre proviene del hecho de que no sabes qué combinación de tecnologías utilizará cada usuario para ver tu sitio web:</p>
+
+<ul>
+ <li>El usuario 1 podría estar mirándolo en un iPhone, con una pantalla pequeña y estrecha.</li>
+ <li>El usuario 2 puede estar mirándolo en una computadora portátil con Windows con un monitor de pantalla ancha adjunto.</li>
+ <li>El usuario 3 puede ser ciego y usar un lector de pantalla para leerle la página web.</li>
+ <li>El usuario 4 podría estar usando una máquina de escritorio realmente antigua que no puede ejecutar navegadores modernos.</li>
+</ul>
+
+<p>Debido a que no sabes exactamente qué usarán tus usuarios, debes diseñar a la defensiva — hacer que tu sitio web sea lo más flexible posible, de modo que todos los usuarios anteriores puedan hacer uso de él, incluso si no todos obtienen la misma experiencia. En resumen, estamos tratando de hacer que la web funcione para todos, tanto como sea posible.</p>
+
+<p>Encontrarás los siguientes conceptos en algún momento de tus estudios.</p>
+
+<ul>
+ <li><strong>Compatibilidad entre navegadores</strong> — es la práctica de intentar asegurarte de que tu página web funcione en tantos dispositivos como sea posible. Esto incluye el uso de tecnologías compatibles con todos los navegadores, brindando mejores experiencias a los navegadores que pueden manejarlas (mejora progresiva) y/o escribiendo código para que vuelvas a una experiencia más simple pero aún utilizable en navegadores más antiguos (degradación elegante). También implica muchas pruebas para ver si algo falla en ciertos navegadores, y luego más trabajo para corregir esas fallas.</li>
+ <li><strong>Diseño web receptivo</strong> — es la práctica de hacer que tu funcionalidad y diseños sean flexibles para que se puedan adaptar automáticamente a diferentes navegadores. Un ejemplo obvio es un sitio web que se presenta de una forma en un navegador de pantalla ancha en el escritorio, pero que se muestra como un diseño de una sola columna más compacto en los navegadores de teléfonos móviles. Intenta ajustar el ancho de la ventana de tu navegador ahora y ve qué sucede.</li>
+ <li><strong>Rendimiento</strong> — significa hacer que los sitios web se carguen lo más rápido posible, pero también hacerlos intuitivos y fáciles de usar para que los usuarios no se sientan frustrados y vayan a otro lugar.</li>
+ <li><strong>Accesibilidad</strong> — significa hacer que tus sitios web sean utilizables por la mayor cantidad posible de personas (los conceptos relacionados son diversidad e inclusión y diseño inclusivo). Esto incluye a personas con impedimentos visuales, auditivos, cognitivos o físicos. También va más allá de las personas con discapacidad — ¿qué pasa con los jóvenes o los ancianos, las personas de diferentes culturas, las personas que utilizan dispositivos móviles o las personas con conexiones de red lentas o poco fiables?</li>
+ <li><strong>Internacionalización</strong> — significa hacer que los sitios web sean utilizables por personas de diferentes culturas, que hablan diferentes idiomas al tuyo. Hay consideraciones técnicas aquí (como alterar tu diseño para que aún funcione bien para idiomas de derecha a izquierda, o incluso verticales) y humanas (tal como usar un lenguaje simple, sin jerga para que las personas que tienen tu idioma ya que su segundo o tercer idioma es más probable que entienda tu texto).</li>
+ <li><strong>Privacidad y seguridad</strong>. Estos dos conceptos están relacionados pero son diferentes. La privacidad se refiere a permitir que las personas realicen sus negocios de manera privada y no espiarlos o recopilar más datos de los estrictamente necesarios. La seguridad se refiere a la construcción de tu sitio web de una manera segura para que los usuarios malintencionados no puedan robar la información contenida en él o de tus usuarios.</li>
+</ul>
+
+<h2 dir="ltr" id="Ve_también">Ve también</h2>
+
+<ul dir="ltr">
+ <li>{{interwiki("wikipedia", "Historia de la World Wide Web")}}</li>
+ <li>{{web.link("/es/docs/Learn/Common_questions/How_does_the_Internet_work", "¿Cómo funciona la internet?")}}</li>
+</ul>
diff --git a/files/es/learn/getting_started_with_the_web/manejando_los_archivos/index.html b/files/es/learn/getting_started_with_the_web/manejando_los_archivos/index.html
new file mode 100644
index 0000000000..0c7f8c4121
--- /dev/null
+++ b/files/es/learn/getting_started_with_the_web/manejando_los_archivos/index.html
@@ -0,0 +1,120 @@
+---
+title: Manejo de archivos
+slug: Learn/Getting_started_with_the_web/Manejando_los_archivos
+tags:
+  - Archivos
+  - Guía
+  - HTML
+  - Novato
+  - Principiante
+  - Scripting
+  - Sitios Web
+  - 'l10n:priority'
+  - teorias
+translation_of: Learn/Getting_started_with_the_web/Dealing_with_files
+---
+<div>{{LearnSidebar}}</div>
+
+<div>{{PreviousMenuNext("Learn/Getting_started_with_the_web/What_will_your_website_look_like", "Learn/Getting_started_with_the_web/HTML_basics", "Learn/Getting_started_with_the_web")}}</div>
+
+<div class="summary">
+<p>Un sitio web consta de muchos archivos: texto del contenido, código, hojas de estilo, contenido multimedia, etc. Cuando estás creando un sitio web, necesitas ensamblar estos archivos en una estructura sensible en tu computadora local, asegurarte de que puedan comunicarse entre sí y hacer que todo su contenido se vea bien antes de que eventualmente {{web.link("/es/Learn/Getting_started_with_the_web/Publishing_your_website", "los cargues en un servidor")}}. El <em>manejo de archivos</em> analiza algunos problemas que debes tener en cuenta, para que puedas configurar una estructura de archivos adecuada para tu sitio web.</p>
+</div>
+
+<h2 id="¿Dónde_debería_estar_tu_sitio_web_en_tu_computadora">¿Dónde debería estar tu sitio web en tu computadora?</h2>
+
+<p>Cuando estés trabajando en un sitio web localmente en tu computadora, debes mantener todos los archivos relacionados en un solo directorio que refleje la estructura de archivos del sitio web publicado en el servidor. Este directorio se puede ubicar en cualquier lugar que desees, pero debes colocarlo en algún lugar donde lo puedas encontrar fácilmente, tal vez en tu escritorio, en tu directorio de inicio o en la raíz de tu disco duro.</p>
+
+<ol>
+ <li>Elige un lugar para almacenar los proyectos de tus sitios web. Dentro del lugar elegido, crea un nuevo directorio llamado <code>proyectosweb</code> (o algo similar). Aquí es donde vivirán todos los proyectos de tus sitios web.</li>
+ <li>Dentro de este primer directorio, crea otro directorio para almacenar tu primer sitio web. Llámalo <code>pruebasitio</code> (o algo más imaginativo).</li>
+</ol>
+
+<h2 id="Una_acotación_sobre_la_envoltura_y_el_espaciado">Una acotación sobre la envoltura y el espaciado</h2>
+
+<p>Notarás que a lo largo de este artículo, te pedimos que nombres los directorios y archivos completamente en minúsculas sin espacios. Esto es porque:</p>
+
+<ol>
+ <li>Muchas computadoras, particularmente los servidores web, distinguen entre mayúsculas y minúsculas. Entonces, por ejemplo, si colocas una imagen en tu sitio web en <code>pruebasitio/MiImagen.jpg</code> y luego, en un archivo diferente intentas invocar la imagen como <code>pruebasitio/miimagen.jpg</code>, puede que no funcione.</li>
+ <li>Los navegadores, servidores web y lenguajes de programación no manejan los espacios de manera consistente. Por ejemplo, si usas espacios en tu nombre de archivo, algunos sistemas pueden tratar el nombre de archivo como dos nombres de archivo. Algunos servidores reemplazarán las áreas en tus nombres de archivo con "%20" (el código de caracteres para espacios en URI), lo cual provocará que todos tus enlaces se rompan. Es mejor separar las palabras con guiones, en lugar de guiones bajos: <code>mi-archivo.html</code> vs. <code>mi_archivo.html</code>.</li>
+</ol>
+
+<p>La respuesta corta es que debes usar un guión para los nombres de tus archivos. El motor de búsqueda de Google trata un guión como un separador de palabras, pero no considera un guión bajo de esa manera. Por estos motivos, es mejor adquirir el hábito de escribir los nombres de los directorios y archivos en minúsculas, sin espacios y con palabras separadas por guiones, al menos hasta que sepas lo que estás haciendo. De esa manera, tropezarás con menos problemas en el futuro.</p>
+
+<h2 id="¿Qué_estructura_debe_tener_tu_sitio_web">¿Qué estructura debe tener tu sitio web?</h2>
+
+<p>A continuación, veamos qué estructura debería tener tu sitio de prueba. Las cosas más comunes que tendrás en cualquier proyecto de sitio web que crees son un archivo de índice HTML y directorios para contener imágenes, archivos de estilo y archivos de script. Crea estos ahora:</p>
+
+<ol>
+ <li><code><strong>index.html</strong></code>: Este archivo generalmente tendrá el contenido de tu página de inicio, es decir, el texto y las imágenes que las personas ven cuando visitan tu sitio por primera vez. Usando tu editor de texto, crea un nuevo archivo llamado <code>index.html</code> y guárdalo dentro de tu directorio <code>pruebasitio</code>.</li>
+ <li>Directorio <strong><code>images</code></strong>: Este directorio contendrá todas las imágenes que utilices en tu sitio. Crea un directorio llamado <code>images</code>, dentro de tu directorio <code>pruebasitio</code>.</li>
+ <li>Directorio <strong><code>styles</code></strong>: Este directorio contendrá el código CSS que se utiliza para aplicar estilo al contenido (por ejemplo, configurar el texto y los colores de fondo). Crea un directorio llamado <code>styles</code>, dentro de tu directorio <code>pruebasitio</code>.</li>
+ <li>Directorio <strong><code>scripts</code></strong>: Este directorio contendrá todo el código JavaScript utilizado para agregar funcionalidad interactiva a tu sitio (por ejemplo, botones que cargan datos cuando se hace clic en ellos). Crea un directorio llamado <code>scripts</code>, dentro de tu directorio <code>pruebasitio</code>.</li>
+</ol>
+
+<div class="note">
+<p><strong>Nota</strong>: En las computadoras con Windows, es posible que tengas problemas para ver los nombres de los archivos, porque de manera predeterminada, Windows tiene activada una opción llamada <strong>Ocultar extensiones para tipos de archivos conocidos</strong>. Generalmente, la puedes desactivar yendo al Explorador de Windows, seleccionando la opción <strong>Opciones de directorio...</strong>, desmarcando la casilla de verificación <strong>Ocultar extensiones para tipos de archivo conocidos</strong> y luego haciendo clic en <strong>Aceptar</strong>. Para obtener información más específica sobre tu versión de Windows, puedes buscar en la web.</p>
+</div>
+
+<h2 id="Rutas_de_archivo">Rutas de archivo</h2>
+
+<p>Para que los archivos se comuniquen entre sí, debes proporcionar una ruta de archivo entre ellos, básicamente una ruta, para que un archivo sepa dónde está otro. Para demostrarlo, insertaremos un poco de HTML en nuestro archivo <code>index.html</code> y haremos que muestre la imagen que elegiste en el artículo {{web.link("/es/docs/Learn/Getting_started_with_the_web/What_will_your_website_look_like#Imágenes", "¿Cómo se verá tu sitio web?")}}</p>
+
+<ol>
+ <li>Copia la imagen que elegiste anteriormente en tu directorio <code>images</code>.</li>
+ <li>Abre tu archivo <code>index.html</code> e inserta el siguiente código en el archivo exactamente como se muestra. Por ahora, no te preocupes por lo que significa todo esto; veremos las estructuras con más detalle más adelante en la serie.
+  <pre class="brush: html notranslate">&lt;!DOCTYPE html&gt;
+&lt;html&gt;
+  &lt;head&gt;
+    &lt;meta charset="utf-8"&gt;
+    &lt;title&gt;Mi página de prueba&lt;/title&gt;
+  &lt;/head&gt;
+  &lt;body&gt;
+    &lt;img src="" alt="Mi imagen de prueba"&gt;
+  &lt;/body&gt;
+&lt;/html&gt;</pre>
+ </li>
+ <li>La línea <code>&lt;img src="" alt="Mi imagen de prueba"&gt;</code> es el código HTML que inserta una imagen en la página. Necesitamos decirle al HTML dónde está la imagen. La imagen está dentro del directorio <em>images</em>, que está en el mismo directorio que <code>index.html</code>. Para recorrer la estructura del archivo desde <code>index.html</code> hasta nuestra imagen, la ruta del archivo que necesitamos es <code>images/nombre-archivo-imagen</code>. Por ejemplo, nuestra imagen se llama <code>firefox-icon.png</code>, por lo que la ruta del archivo es <code>images/firefox-icon.png</code>.</li>
+ <li>Inserta la ruta del archivo en tu código HTML entre las comillas dobles del código <code>src=""</code>.</li>
+ <li>Guarda tu archivo HTML, luego cárgalo en tu navegador web (haz doble clic en el archivo). ¡Deberías ver tu nueva página web mostrando tu imagen!</li>
+</ol>
+
+<p><img alt="Una captura de pantalla del sitio web básico que muestra solo el logotipo de Firefox: un zorro en llamas envolviendo el mundo" src="https://mdn.mozillademos.org/files/9229/website-screenshot.png" style="display: block; height: 542px; margin: 0px auto; width: 690px;"></p>
+
+<p>Algunas reglas generales para las rutas de archivo:</p>
+
+<ul>
+ <li>Para vincular a un archivo destino en el mismo directorio que el archivo HTML de invocación, simplemente usa el nombre del archivo, p. ej. <code>mi-imagen.jpg</code>.</li>
+ <li>Para hacer referencia a un archivo en un subdirectorio, escribe el nombre del directorio delante de la ruta, más una barra inclinada, p. ej. <code>subdirectorio/mi-imagen.jpg</code>.</li>
+ <li>Para vincular a un archivo destino en el directorio <strong>arriba</strong> del archivo HTML que lo invoca, escribe dos puntos. Por ejemplo, si <code>index.html</code> estuviera dentro de un subdirectorio de <code>pruebasitio</code> y <code>mi-imagen.jpg</code> estuviera dentro de <code>pruebasitio</code>, puedes hacer referencia a <code>mi-imagen.jpg</code> desde <code>index.html</code> utilizando <code>../mi-imagen.jpg</code>.</li>
+ <li>Los puedes combinar tanto como desees, por ejemplo, <code>../subdirectorio/otro-subdirectorio/mi-imagen.jpg</code>.</li>
+</ul>
+
+<p>Por ahora, esto es todo lo que necesitas saber.</p>
+
+<div class="note">
+<p><strong>Nota</strong>: El sistema de archivos de Windows tiende a utilizar barras invertidas, no barras diagonales, p. ej. <code>C:\windows</code>. Esto no importa en HTML, incluso si estás desarrollando tu sitio web en Windows, debes usar barras diagonales en tu código.</p>
+</div>
+
+<h2 id="¿Qué_más_se_debería_hacer">¿Qué más se debería hacer?</h2>
+
+<p>Eso es todo por ahora. La estructura de tu directorio debería verse así:</p>
+
+<p><img alt="Una estructura de archivos en mac os x finder, que muestra un directorio de imágenes con una imagen, directorios de estilos y scripts vacíos, y un archivo index.html" src="https://mdn.mozillademos.org/files/9231/file-structure.png" style="display: block; height: 577px; margin: 0px auto; width: 929px;"></p>
+
+<p>{{PreviousMenuNext("Learn/Getting_started_with_the_web/What_will_your_website_look_like", "Learn/Getting_started_with_the_web/HTML_basics", "Learn/Getting_started_with_the_web")}}</p>
+
+
+
+<h2 id="En_este_módulo">En este módulo</h2>
+
+<ul>
+ <li id="Instalacion_de_software_basico">{{web.link("/es/Learn/Getting_started_with_the_web/Instalacion_de_software_basico", "Instalación de software básico")}}</li>
+ <li id="Como_se_vera_tu_sitio_web">{{web.link("/es/Learn/Getting_started_with_the_web/What_will_your_website_look_like", "¿Cómo se verá tu sitio web?")}}</li>
+ <li id="Manejo_de_archivos">{{web.link("/es/Learn/Getting_started_with_the_web/Manejando_los_archivos", "Manejo de archivos")}}</li>
+ <li id="Conceptos_basicos_de_HTML">{{web.link("/es/Learn/Getting_started_with_the_web/HTML_basics", "Conceptos básicos de HTML")}}</li>
+ <li id="Conceptos_basicos_de_CSS">{{web.link("/es/Learn/Getting_started_with_the_web/CSS_basics", "Conceptos básicos de CSS")}}</li>
+ <li id="Conceptos_basicos_de_JavaScript">{{web.link("/es/Learn/Getting_started_with_the_web/JavaScript_basics", "Conceptos básicos de JavaScript")}}</li>
+ <li id="Publicar_tu_sitio_web">{{web.link("/es/Learn/Getting_started_with_the_web/Publishing_your_website", "Publicar tu sitio web")}}</li>
+ <li id="Como_funciona_la_web">{{web.link("/es/docs/Learn/Getting_started_with_the_web/Cómo_funciona_la_Web", "Cómo funciona la Web")}}</li>
+</ul>
diff --git a/files/es/learn/getting_started_with_the_web/publishing_your_website/index.html b/files/es/learn/getting_started_with_the_web/publishing_your_website/index.html
new file mode 100644
index 0000000000..9dbfe88d7e
--- /dev/null
+++ b/files/es/learn/getting_started_with_the_web/publishing_your_website/index.html
@@ -0,0 +1,195 @@
+---
+title: Publicar tu sitio web
+slug: Learn/Getting_started_with_the_web/Publishing_your_website
+tags:
+  - Aprender
+  - Aprendiz
+  - Dropbox
+  - FTP
+  - GitHub
+  - Publicacion
+  - Sitio Web
+  - Web
+  - Web Hosting
+  - publicar
+  - web server
+translation_of: Learn/Getting_started_with_the_web/Publishing_your_website
+---
+<p>{{LearnSidebar()}}</p>
+
+<p>{{PreviousMenuNext("Learn/Getting_started_with_the_web/JavaScript_basics", "Learn/Getting_started_with_the_web/How_the_Web_works","Learn/Getting_started_with_the_web")}}</p>
+
+<div class="summary">
+<p>Una vez que termines de escribir tu código y organizar los archivos que forman parte de tu sitio, debes ponerlo en línea para que la gente pueda consultarlo. Este artículo muestra cómo conseguir de manera sencilla que tu código esté en línea.</p>
+</div>
+
+<h2 id="¿Cuáles_son_las_opciones">¿Cuáles son las opciones?</h2>
+
+<p>Publicar un sitio no es un tema sencillo, principalmente porque hay muchas maneras diferentes de hacerlo. En este artículo no se trata de ver todos los modos posibles. En su lugar, discutiremos los pros y contras de tres amplias estrategias desde el punto de vista de un principiante, y luego debes seleccionar qué método usarás.</p>
+
+<h3 id="Obtener_alojamiento_y_un_nombre_de_dominio">Obtener alojamiento y un nombre de dominio</h3>
+
+<p>Si deseas un control total sobre tu sitio web publicado, probablemente necesitarás gastar dinero para comprar:</p>
+
+<ul>
+ <li><em>Alojamiento </em>(<em>Hosting</em>) — espacio de almacenamiento alquilado en el <a href="/es/docs/Learn/Common_questions/Que_es_un_servidor_WEB">servidor web</a> de una compañia de alojamientos. Pones los archivos de tu sitio web en este espacio, y el servidor web suministra el contenido a los usuarios que lo solicitan.</li>
+ <li>Un <a href="/es/docs/Learn/Common_questions/What_is_a_domain_name">nombre de dominio</a> — dirección única mediante la cual la gente puede encontrar tu sitio web, como <code>https://www.mozilla.org</code>, o <code>https://es.wikipedia.org/</code>. Puedes tomar en alquiler el nombre de tu dominio durante algunos años en un <strong>registrador de dominio</strong>.</li>
+</ul>
+
+<p>Muchos sitios web profesionales toman esta opción.</p>
+
+<p>Además, necesitarás un programa de <a href="/es/docs/Glossary/FTP">protocolo de transferencia de archivo</a> (<em>File Transfer Protocol</em>, FTP) para transferir los archivos que conforman tu sitio web al servidor (mira más detalles de<a href="/es/docs/Learn/Common_questions/Cuanto_cuesta#Software"> cuánto puede costar: software</a>). Los programas FTP varían ampliamente, pero en general tienes que conectarte a tu servidor web contratado mediante detalles proporcionados por tu empresa de alojamiento (por ejemplo: nombre de usuario, contraseña, nombre del <em>host</em>). Una vez conectado con el servidor web el programa te mostrará tus archivos locales y los archivos del servidor web en dos ventanas y te proporcionará una forma de transferir los archivos de un lado a otro.</p>
+
+<p><img alt="" src="https://mdn.mozillademos.org/files/9469/ftp.jpg" style="display: block; height: 487px; margin: 0px auto; width: 800px;"></p>
+
+<h4 id="Consejos_para_elegir_alojamienoto_y_dominio">Consejos para elegir alojamienoto y dominio</h4>
+
+<ul>
+ <li>En MDN no promovemos empresas comerciales de alojamiento o resgistradoras de nombre de dominio específicas. Para encontrarlas basta con buscar «alojamiento web» o «<em>hosting</em> web» y «nombres de dominio». A veces las empresas proporcionan ambos en un paquete único. Los registradores acostumbran a facilitar la manera de comprobar si el nombre de dominio que deseas para tu sitio está disponible.</li>
+ <li>El <a href="/es/docs/Glossary/ISP">proveedor de servicio de Internet</a> (ISP) de tu casa u oficina puede proporcionar algún alojamiento limitado para un pequeño sitio web. <span id="result_box" lang="es"><span class="alt-edited">El conjunto de características disponibles será limitado, pero podría ser perfecto para tus primeros experimentos; </span></span>¡ponte en contacto con ellos y pregunta!</li>
+ <li>Hay servicios gratiuitos disponibles como <a href="https://neocities.org/">Neocities</a>, <a href="https://www.blogger.com">Blogspot</a>, y <a href="https://es.wordpress.com/">Wordpress</a>. <span id="result_box" lang="es"><span>Una vez más, obtienes lo que pagas, pero son ideales para tus experimentos iniciales.</span> <span>Los servicios gratuitos en su mayoría no requieren software de FTP para transferencias de archivos pues permiten arrastrar y soltar archivos justo dentro de su interfaz web.</span></span></li>
+ <li><span lang="es"><span>Muchas compañías proporcionan alojamiento y dominio simultáneamente.</span></span></li>
+</ul>
+
+<h3 id="Utilizar_una_herramienta_en_línea_como_GitHub_o_Dropbox">Utilizar una herramienta en línea como GitHub o Dropbox</h3>
+
+<p>Algunas herramientas te permiten publicar tu sitio en línea:</p>
+
+<ul>
+ <li><a href="https://github.com/">GitHub</a> es un sitio de «codificación social». Te permite cargar repositorios de código para almacenarlos en el <strong>sistema de control de versiónes</strong> de <a href="http://git-scm.com/">Git</a>. De esta manera puedes colaborar en proyectos de código pues por defecto el sistema es de código abierto, lo que significa que cualquier persona en el mundo puede encontrar tu código en GitHub, usarlo, aprender de él y mejorarlo. ¡Puedes hacer esto con el código de otra persona también! Git es un <a href="https://git-scm.com/book/es/v2/Inicio---Sobre-el-Control-de-Versiones-Acerca-del-Control-de-Versiones">sistema de control de versiones</a> muy popular y GitHub es una comunidad muy importante y útil por lo que la mayor parte de empresas de tecnología ahora lo usan en su proceso laboral. GitHub tiene una característica muy útil llamada <a href="https://pages.github.com">GitHub Pages</a>, que te permite exponer el código de tu sitio web en vivo en la web.</li>
+ <li><a href="https://www.dropbox.com/">Dropbox</a> es un sistema de almacenamiento de archivos que te permite guardar los archivos en la web y tenerlos disponibles desde cualquier ordenador. Cualquier persona con una conexión a Internet puede acceder a cualquier carpeta de Dropbox que esté accesible al público. Si esa carpeta contiene los archivos del sitio web, estos serán visualizados como un sitio web de forma automática.</li>
+ <li><a href="https://cloud.google.com/appengine/">Google App Engine</a> es una poderosa plataforma que permite construir y ejecutar aplicaciones en la infraestructura de Google, ya sea que necesites construir una aplicación web de varios niveles desde cero o alojar un sitio web estático. Para obtener más información consulta <a href="/en-US/docs/Learn/Common_questions/How_do_you_host_your_website_on_Google_App_Engine">¿Cómo se aloja un sitio web en Google App Engine?</a> (en inglés).</li>
+</ul>
+
+<p>A diferencia de la mayoría de alojamientos (servicios de <em>hosting</em>), tales herramientas son por lo general libres de utilizar, pero solo permiten un conjunto de funciones limitadas.</p>
+
+<h3 id="Utilizar_un_entorno_basado_en_web_como_CodePen">Utilizar un entorno basado en web como CodePen</h3>
+
+<p>Existe un número de aplicaciones web que emulan un entorno de desarrollo de sitios web, permitiendo que ingreses tu código HTML, CSS y Javascript y luego muestran los resultados de dicho código como un sitio web, ¡todo en una pestaña del navegador! En términos generales, estas herramientas son bastante sencillas, geniales para aprender, buenas para compartir código (por ejemplo, si quieres compartir con alguien una técnica o pedir ayuda en la depuración del código) y gratuitas para las funciones básicas. Además, mantienen tu página renderizada en una única dirección web. Sin embargo, las características básicas son muy limitadas y estas aplicaciones usualmente no proveen espacio de almacenamiento para recursos (como imágenes).</p>
+
+<p>Prueba con algunos de estos ejemplos y observa cuál es el que mejor se adapta a tu gusto:</p>
+
+<ul>
+ <li><a href="http://jsfiddle.net/">JSFiddle</a></li>
+ <li><a href="https://glitch.com/">Glitch</a></li>
+ <li><a href="http://jsbin.com/">JS Bin</a></li>
+ <li><a href="https://codepen.io/">CodePen</a></li>
+</ul>
+
+<p><img alt="" src="https://mdn.mozillademos.org/files/9471/jsbin-screen.png" style="display: block; height: 849px; margin: 0px auto; width: 1392px;"></p>
+
+<h2 id="Publicar_a_través_de_GitHub">Publicar a través de GitHub</h2>
+
+<p>Explicados estos tres métodos veamos ahora cómo publicar fácilmente, de forma muy visual e intuitiva, o bien por medio de comandos, tu sitio a través de <a href="https://pages.github.com/">GitHub Pages</a> (en inglés).</p>
+
+<h3 id="De_manera_visual_y_sin_necesidad_de_más_herramientas">De manera visual y sin necesidad de más herramientas</h3>
+
+<p>Esta no es la única manera, pero sí la que te permite poner manos a la obra inmediatamente.</p>
+
+<ol>
+ <li>Si aún no lo has hecho<a href="https://github.com/join"> da de alta una cuenta en GitHub</a>. Es simple y sencillo, solo debes verificar tu dirección de correo electrónico.</li>
+ <li>Una vez registrado, ingresa a tu cuenta en GitHub.com con tu usuario y contraseña suministrados al crear tu cuenta.</li>
+ <li>A continuación, necesitas crear un nuevo repositorio para tus archivos. Haz clic en el signo más (+) en la parte superior derecha de la página inicial de GitHub y selecciona <em>New Repository</em> (Nuevo repositorio).</li>
+ <li>En esta página, en la casilla <em>Repository name</em> (Nombre del repositorio), ingresa <kbd><em>usuario</em>.github.io</kbd>,<em> </em>donde <em>usuario</em> es tu nombre de usuario. Así por ejemplo, nuestro amigo Bob Smith ingresaría <kbd><em>bobsmith.github.io</em></kbd>. <img alt="" src="https://mdn.mozillademos.org/files/9479/github-create-repo.png" style="display: block; height: 849px; margin: 0px auto; width: 1392px;"></li>
+ <li>Opcionalmente escribe una corta descripción de tu sitio web en el campo <em>Description</em> para que recuerdes cuál es la temática que tratarás en él y selecciona la casilla de verificación <em>Public</em> (Público) si quieres que cualquier persona pueda ver los resultados de las ediciones que haces al sitio web que estás creando.</li>
+ <li>Marca la casilla de verificación <em>Initialize this repository with a README</em> (Inicializar este repositorio con un README (LÉAME)). Esto te permitirá clonar inmediatamente el repositorio a tu equipo. ¡Si vas a transferir tus archivos desde tu equipo al servidor de GitHub a través de un cliente de FTP (como se explica en la sección <em><a href="/es/docs/Learn/Getting_started_with_the_web/Publishing_your_website#Subir_tus_archivos_a_Github_a_través_de_la_línea_de_comandos">Subir tus archivos a GitHub a través de la línea de comandos</a></em>, a continuación), <u>no debes realizar este paso</u>!</li>
+ <li>Da clic en <em>Create repository</em> (Crear repositorio).</li>
+ <li>Arrastra y suelta el contenido de la carpeta de tu sitio web en tu repositorio. Cuando termines de pasar el contenido haz clic en <em>Commit changes</em> (Confirmar cambios).
+  <div class="blockIndicator note">
+  <p><strong>Nota</strong>: cerciórate que tu carpeta tiene un archivo de nombre <kbd>index.html</kbd></p>
+  </div>
+ </li>
+ <li>En tu navegador desplázate a <kbd>username.github.io</kbd> para ver tu sitio web en línea. Por ejemplo, para el nombre de usuario Bob Smith, escribe <kbd>bobsmith.github.io</kbd>.
+
+
+  <div class="blockIndicator note">
+  <p><strong>Nota</strong>: puede que tu página web tarde unos minutos en entrar en funcionamiento. Si tu sitio web no se muestra inmediatamente, espera unos minutos e inténtalo de nuevo.</p>
+  </div>
+ </li>
+</ol>
+
+<h3 id="Subir_tus_archivos_a_GitHub_a_través_de_la_línea_de_comandos">Subir tus archivos a GitHub a través de la línea de comandos</h3>
+
+<p>No estamos diciendo que esta es la única manera, o la mejor, de publicar tu sitio, pero es gratis, decentemente simple y abarca algunas nuevas habilidades que encontrarás útiles en adelante.</p>
+
+<p>Antes que nada, <a href="http://git-scm.com/downloads">descarga e instala Git</a> en tu equipo. Este paso es necesario si vas a trabajar con los archivos de tu página web en él y luego los transferirás al servidor de GitHub.</p>
+
+<p>Sigue los pasos <strong>1 a 5</strong> y el <strong>7</strong> (recuerda omitir el 6) detallados en la anterior sección <em><a href="/es/docs/Learn/Getting_started_with_the_web/Publishing_your_website#De_manera_visual_y_sin_necesidad_de_m%C3%A1s_herramientas">De manera visual y sin necesidad de más herramientas</a></em>. Una vez hayas dado clic en <em>Create repository</em> (Crear repositorio) verás la siguiente ventana (¡no la cierres, más adelante necesitarás copiar información de allí!):</p>
+
+<p><img alt="" src="https://mdn.mozillademos.org/files/9481/github-populate-repo.png" style="display: block; height: 849px; margin: 0px auto; width: 1392px;"></p>
+
+<p>En este punto ya estarás listo para poder utilizar la línea de comandos para subir los archivos de tu repositorio a GitHub. Una <em>línea de órdenes o de comandos</em> es una ventana donde escribes comandos que realizarán tareas como crear archivos y ejecutar programas, en lugar de utiizar la interfaz gráfica de usuario. Se debe parecer a algo como esto:</p>
+
+<p><img alt="" src="https://mdn.mozillademos.org/files/9483/command-line.png" style="display: block; height: 478px; margin: 0px auto; width: 697px;"></p>
+
+<div class="note">
+<p><strong>Nota</strong>: si no te sientes cómodo utilizando la línea de comandos, podrías considerar usar <a href="http://git-scm.com/downloads/guis">Git graphical user interface</a> para realizar la misma tarea.</p>
+</div>
+
+<p><span id="command-line">Todos los sistemas operativos vienen con una herramienta de línea de comandos:</span></p>
+
+<ul>
+ <li><strong>Windows</strong>: se puede acceder al <strong>Intérprete de comandos</strong> desde el menú que se presenta al pulsar <em>Win + X </em>(o abre el menú pulsando el botón secundario del ratón sobre el botón Inicio de Windows en la parte inferior izquierda del escritorio). Advierte que Windows tiene sus propias sintaxis de comandos diferente a las de Linux y MacOS X, así que los siguientes comandos pueden variar para tu máquina.</li>
+ <li><strong>MacOS X</strong>: <strong>Terminal</strong> puede ser hallada en Aplicaciones<em> &gt; Utilidades</em>.</li>
+ <li><strong>Linux</strong>: usualmente puedes abrir una terminal con <em>Ctrl + Alt + T</em>. Si esto no funciona, busca <strong>Terminal </strong>en la barra de aplicaciones o en el menú.</li>
+</ul>
+
+<p>Aunque este procedimiento pueda parecer un poco aterrador al principio no te preocupes, pronto te darás cuenta de lo básico. Darás órdenes al equipo en el terminal escribiendo un comando y presionando <kbd>Intro</kbd>.</p>
+
+<ol>
+ <li>Apunta la línea de comandos a tu directorio <code>sitio-prueba</code> (o como quiera que hayas llamado al directorio que contiene tu sitio web). Para esto utiliza el comando <code>cd</code> (es decir, <em>«change directory»</em>, «<em>cambiar de directorio»</em>). Aquí viene lo que deberías teclear si has ubicado tu sitio web en un directorio llamado <code>sitio-prueba</code> en tu escritorio:
+
+  <pre class="brush: bash notranslate">cd Desktop/sitio-prueba</pre>
+
+  <p>En Windows sería:</p>
+
+  <pre class="notranslate">cd %USERPROFILE%\Desktop\sitio-prueba</pre>
+ </li>
+ <li>Cuando la línea de comandos esté apuntando dentro del directorio de tu sitio web, teclea el siguiente comando, que indica a la herramienta de <code>git</code> que transforme el directorio en un repositorio de Git:
+  <pre class="brush: bash notranslate">git init</pre>
+ </li>
+ <li class="syntaxbox">
+  <p>A continuación, regresa a la ventana del sitio de GitHub que dejaste abierta. En esa página, la sección que interesa es <em>…or push an existing repository from the command line</em>. Deberías ver dos líneas de código listadas en esa sección. Copia toda la primera línea, pégala en la línea de comandos y presiona <kbd>Intro</kbd>. El comando debería verse similar a:</p>
+
+  <pre class="brush: bash notranslate">git remote add origin https://github.com/bobsmith/bobsmith.github.io.gi</pre>
+ </li>
+ <li>A continuación, ingresa los siguientes dos comandos, presionando <kbd>Intro</kbd> después de cada uno. Estos preparan el código para cargar a GitHub y pedir a Git administrar estos archivos.
+  <pre class="brush: bash notranslate">git add --all <kbd>Intro</kbd>
+git commit -m 'agregando archivos a mi repositorio' <kbd>Intro</kbd></pre>
+ </li>
+ <li>Finalmente, envía el codigo a GitHub tomando de la página web de GitHub en la que estás el segundo de los dos comandos del paso 3 e introdúcelo en el terminal:
+  <pre class="brush: bash notranslate">git push -u origin master</pre>
+ </li>
+ <li>Ahora cuando vayas a la direccion de red de tu página GitHub (<em>usuario.github.io</em>) en una nueva pestaña del navegador ¡deberías ver tu sitio en línea! Envíala por correo-e a tus amigos y presume de tu maestría.</li>
+</ol>
+
+<div class="note">
+<p><strong>Nota</strong>: has tocado apenas la superficie de Git. Si te quedas atascado la <a href="https://help.github.com/es/github/working-with-github-pages/getting-started-with-github-pages">ayuda de GitHub en español</a> te será de gran apoyo.</p>
+</div>
+
+<h3 id="Conocer_más_de_GitHub">Conocer más de GitHub</h3>
+
+<p>Si deseas hacer más cambios a tu sitio y enviarlos a GitHub, <span id="result_box" lang="es"><span>luego de modificar los archivos, debes ingresar los siguientes comandos (presionando <kbd>Intro</kbd> después de cada uno) para enviar esos cambios a GitHub:</span></span></p>
+
+<pre class="notranslate">git add --all <kbd>Intro</kbd>
+git commit -m '<em>otro commit</em>' <kbd>Intro</kbd>
+git push <kbd>Intro</kbd></pre>
+
+<p>Puedes reemplazar el texto <em>otro commit</em> con un mensaje más descriptivo respecto a los cambios que hiciste.</p>
+
+<h2 id="Conclusión">Conclusión</h2>
+
+<p>En este punto, deberías tener tu página web de ejemplo disponible en una dirección web única. ¡Bien hecho!</p>
+
+<p><img alt="" src="https://mdn.mozillademos.org/files/9485/hosted-final-site.png" style="display: block; height: 1049px; margin: 0px auto; width: 878px;"></p>
+
+<h3 id="Ver_también">Ver también</h3>
+
+<ul>
+ <li><a href="/es/docs/Learn/Common_questions/Que_es_un_servidor_WEB">¿Qué es un servidor web?</a></li>
+ <li><a href="/es/docs/Learn/Common_questions/What_is_a_domain_name">¿Qué es un nombre de dominio?</a></li>
+ <li><a href="/es/docs/Learn/Common_questions/Cuanto_cuesta">¿Cuánto cuesta hacer algo en la web?</a></li>
+ <li><a href="http://alignedleft.com/resources/cheap-web-hosting">Cheap or free static web hosting </a>(Alojamiento web estático barato o gratuito) <em>de Scott Murray</em> tiene algunas ideas útiles sobre servicios disponibles aunque el sitio ya está algo desactualizado (en inglés).</li>
+</ul>
+
+<p>{{PreviousMenuNext("Learn/Getting_started_with_the_web/JavaScript_basics", "Learn/Getting_started_with_the_web/How_the_Web_works","Learn/Getting_started_with_the_web")}}</p>
diff --git a/files/es/learn/getting_started_with_the_web/what_will_your_website_look_like/index.html b/files/es/learn/getting_started_with_the_web/what_will_your_website_look_like/index.html
new file mode 100644
index 0000000000..fb6ced116f
--- /dev/null
+++ b/files/es/learn/getting_started_with_the_web/what_will_your_website_look_like/index.html
@@ -0,0 +1,113 @@
+---
+title: ¿Cuál será la apariencia de tu sitio Web?
+slug: Learn/Getting_started_with_the_web/What_will_your_website_look_like
+tags:
+  - Activos
+  - Aprender
+  - Composición
+  - Contenido
+  - Desaprobado
+  - Diseño
+  - Fuentes
+  - Imagenes
+  - Novato
+  - Planificar
+  - Principiante
+  - Tipos de Letra
+  - paso a paso
+translation_of: Learn/Getting_started_with_the_web/What_will_your_website_look_like
+---
+<div>{{LearnSidebar}}</div>
+
+<div>{{PreviousMenuNext("Learn/Getting_started_with_the_web/Installing_basic_software", "Learn/Getting_started_with_the_web/Dealing_with_files", "Learn/Getting_started_with_the_web")}}</div>
+
+<div class="summary">
+<p><em>¿Cómo se verá tu sitio web?</em>, analiza el trabajo de planificación y diseño que debes realizar para tu sitio web antes de escribir el código, incluyendo: "¿qué información ofrece mi sitio web?", "¿qué tipos de letra y colores quiero?" y "¿qué hace mi sitio?".</p>
+</div>
+
+<h2 id="Lo_primero_es_lo_primero_planificación">Lo primero es lo primero: planificación</h2>
+
+<p>Antes de hacer nada, necesitas algunas ideas. ¿Qué debería hacer realmente tu sitio web?; Un sitio web puede hacer básicamente cualquier cosa, pero, en tu primer intento, debes mantener las cosas simples. Comenzarás creando una página web simple con un encabezado, una imagen y algunos párrafos.</p>
+
+<p>Para comenzar, deberás responder estas preguntas:</p>
+
+<ol>
+ <li><strong>¿De qué trata tu sitio web?</strong>, ¿te gustan los perros, Nueva York o Pac-Man?</li>
+ <li><strong>¿Qué información presentas sobre el tema?</strong>; Escribe un título y algunos párrafos y piensa en una imagen que te gustaría mostrar en tu página.</li>
+ <li><strong>¿Cómo se ve tu sitio web</strong>, en términos simples de alto nivel?, ¿cuál es el color de fondo?, ¿qué tipo de letra es apropiado: formal, caricaturesca, atrevida y fuerte, sutil?</li>
+</ol>
+
+<div class="note">
+<p><strong>Nota</strong>: Los proyectos complejos necesitan pautas detalladas que incluyan todos los detalles de los colores, los tipos de letra, el espacio entre los elementos de una página, el estilo de escritura adecuado, etc. Esto, a veces, se denomina guía de diseño, sistema de diseño o libro de marcas, y puedes ver un ejemplo en el <a href="https://design.firefox.com/photon/">Sistema de diseño de fotones de Firefox</a>.</p>
+</div>
+
+<h2 id="Haz_un_bosquejo_de_tu_diseño">Haz un bosquejo de tu diseño</h2>
+
+<p>A continuación, toma papel y lápiz y dibuja aproximadamente cómo deseas que se vea tu sitio. Para tu primera página web simple, no hay mucho que esbozar, pero deberías adquirir el hábito de hacerlo ahora. Realmente ayuda, ¡no tienes que ser Van Gogh!</p>
+
+<p><img alt="Bosquejo" src="https://mdn.mozillademos.org/files/9239/website-drawing-scan.png" style="display: block; height: 460px; margin: 0px auto; width: 640px;"></p>
+
+<div class="note">
+<p><strong>Nota</strong>: Incluso en sitios web reales y complejos, los equipos de diseño suelen comenzar con bocetos en papel y luego crean maquetas digitales utilizando un editor de gráficos o tecnologías web.</p>
+
+<p>Los equipos web suelen incluir tanto un diseñador gráfico como un diseñador de {{Glossary("UX", "experiencia de usuario")}} (UX). Los diseñadores gráficos ensamblan las imágenes del sitio web. Los diseñadores de experiencia de usuario tienen un papel algo más abstracto al abordar cómo los usuarios experimentarán e interactuarán con el sitio web.</p>
+</div>
+
+<h2 id="Elige_tus_activos">Elige tus activos</h2>
+
+<p>En este punto, es bueno comenzar a reunir el contenido que eventualmente aparecerá en tu página web.</p>
+
+<h3 id="Texto">Texto</h3>
+
+<p>Aún debes tener los párrafos y el título de antes. Mantenlos cerca.</p>
+
+<h3 id="Color_del_tema">Color del tema</h3>
+
+<p>Para elegir un color, ve al <a href="https://developer.mozilla.org/es/docs/Web/CSS/CSS_Colors/Color_picker_tool">Selector de color</a> y busca un color que te guste . Al hacer clic en un color, verás un extraño código de seis caracteres como <code>#660066</code>. Eso se llama <em>código hexadecimal</em> (abreviatura de hexadecimal) y representa tu color. Copia el código en un lugar seguro por ahora.</p>
+
+<p><img alt="Color del tema" src="https://mdn.mozillademos.org/files/8975/Screenshot%20from%202014-11-03%2017:40:49.png" style="border-style: solid; border-width: 1px; height: 262px; width: 448px;"></p>
+
+<h3 id="Imágenes">Imágenes</h3>
+
+<p>Para elegir una imagen, ve a <a href="https://www.google.com/imghp?gws_rd=ssl">Imágenes Google</a> y busca algo adecuado.</p>
+
+<ol>
+ <li>Cuando encuentres la imagen que deseas, haz clic en la imagen para obtener una vista ampliada de la misma.</li>
+ <li>Haz clic con el botón derecho en la imagen (Ctrl+clic en una Mac), elige <em>Guardar imagen como...</em> y elige un lugar seguro para guardar tu imagen. Alternativamente, copia la dirección web de la imagen de la barra de direcciones de tu navegador para su posterior uso.</li>
+</ol>
+
+<p><img alt="Imágenes" src="https://mdn.mozillademos.org/files/16599/updated-google-images.png" style="border-style: solid; border-width: 1px; display: block; margin: 0px auto;"></p>
+
+<p>Ten en cuenta que la mayoría de las imágenes en la web, incluidas las de Imágenes Google, están protegidas por derechos de autor. Para reducir tu probabilidad de violar los derechos de autor, puedes utilizar el filtro de licencias de Google. Haz clic en el botón <em>Herramientas</em> y luego en la opción <em>Derechos de uso</em> resultante que aparece a continuación. Debes elegir una opción como <em>Etiquetado para reutilización</em>.</p>
+
+<p><img alt="Etiquetado para reutilización" src="https://mdn.mozillademos.org/files/16598/updated-google-images-licensing.png" style="border-style: solid; border-width: 1px; display: block; margin: 0px auto;"></p>
+
+<h3 id="Tipos_de_letra">Tipos de letra</h3>
+
+<p>Para elegir un tipo de letra:</p>
+
+<ol>
+ <li>Ve a <a href="http://www.google.com/fonts">Google Fonts</a> y desplázate hacia abajo en la lista hasta que encuentres una que te guste. También puedes utilizar los controles de la derecha para filtrar aún más los resultados.</li>
+ <li>Haz clic en el icono "más" (Agregar a) junto al tipo de letra que desees.</li>
+ <li>Haz clic en el botón "<em>*Familia seleccionada</em>" en el panel en la parte inferior de la página ("*" depende de cuántos tipos de letra hayas seleccionado).</li>
+ <li>En el cuadro emergente, puedes ver y copiar las líneas de código que Google te brinda en tu editor de texto para guardarlas para más adelante.</li>
+</ol>
+
+<p><img alt="Archivos de tipo de letra" src="https://mdn.mozillademos.org/files/13871/font1.png" style="border-style: solid; border-width: 1px; height: 359px; width: 600px;"></p>
+
+<p><img alt="Tipos de letra" src="https://mdn.mozillademos.org/files/13873/font2.png" style="border-style: solid; border-width: 1px; height: 608px; width: 600px;"></p>
+
+<p>{{PreviousMenuNext("Learn/Getting_started_with_the_web/Installing_basic_software", "Learn/Getting_started_with_the_web/Dealing_with_files", "Learn/Getting_started_with_the_web")}}</p>
+
+<h2 id="En_este_módulo">En este módulo</h2>
+
+<ul>
+ <li id="Instalacion_de_software_basico">{{web.link("/es/docs/Learn/Getting_started_with_the_web/Instalacion_de_software_basico", "Instalación de software básico")}}</li>
+ <li id="Cual_sera_la_apariencia_de_tu_sitio_web">{{web.link("/es/docs/Learn/Getting_started_with_the_web/Cual_sera_la_apariencia_de_tu_sitio_web", "Cuál será la apariencia de tu sitio web")}}</li>
+ <li id="Manejo de archivos">{{web.link("/es/docs/Learn/Getting_started_with_the_web/Dealing_with_files", "Manejo de archivos")}}</li>
+ <li id="Conceptos_basicos_de_HTML">{{web.link("/es/docs/Learn/Getting_started_with_the_web/HTML_basics", "Conceptos básicos de HTML")}}</li>
+ <li id="Conceptos_basicos_de_CSS">{{web.link("/es/docs/Learn/Getting_started_with_the_web/CSS_basics", "Conceptos básicos de CSS")}}</li>
+ <li id="Conceptos_basicos_de_JavaScript">{{web.link("/es/docs/Learn/Getting_started_with_the_web/JavaScript_basics", "Conceptos básicos de JavaScript")}}</li>
+ <li id="Publicar_tu_sitio_web">{{web.link("/es/docs/Learn/Getting_started_with_the_web/Publishing_your_website", "Publicar tu sitio web")}}</li>
+ <li id="Como_funciona_la_web">{{web.link("/es/docs/Learn/Getting_started_with_the_web/Cómo_funciona_la_Web", "Cómo funciona la Web")}}</li>
+</ul>