From 7fb9ca7b07c350b960f7343c1afa618458804764 Mon Sep 17 00:00:00 2001 From: Alexander Date: Tue, 24 Oct 2023 10:14:00 -0600 Subject: [PATCH] es: Update introduction_to_html/getting_started (#16658) Co-authored-by: Graywolf --- .../getting_started/index.md | 519 +++++++++--------- 1 file changed, 257 insertions(+), 262 deletions(-) diff --git a/files/es/learn/html/introduction_to_html/getting_started/index.md b/files/es/learn/html/introduction_to_html/getting_started/index.md index bb650450aed0e3..b9e7791eb95681 100644 --- a/files/es/learn/html/introduction_to_html/getting_started/index.md +++ b/files/es/learn/html/introduction_to_html/getting_started/index.md @@ -1,72 +1,75 @@ --- -title: Empezar con HTML +title: Primeros pasos con HTML slug: Learn/HTML/Introduction_to_HTML/Getting_started +l10n: + sourceCommit: 194ea6cb5ddaf20e4f551cc93574be50b8b4f339 --- {{LearnSidebar}}{{NextMenu("Learn/HTML/Introduction_to_HTML/The_head_metadata_in_HTML", "Learn/HTML/Introduction_to_HTML")}} -En este artículo vamos a exponer lo más básico del HTML. Para comenzar definiremos elementos, atributos y el resto de términos importantes que quizá ya te suenen y qué función cumplen dentro del lenguaje. También explica dónde encajan estos en HTML. Aprenderás cómo se estructuran los elementos HTML, cómo se estructura una página HTML típica y otras características básicas importantes del lenguaje. Por el camino, también iremos practicando con algo de HTML. +En este artículo, cubrimos los conceptos básicos de HTML. Para empezar, este artículo define elementos, atributos y todos los demás términos importantes que puedas haber escuchado. También explica dónde encajan en HTML. Aprenderás cómo se estructuran los elementos HTML, cómo se estructura una página HTML típica y otras características importantes del lenguaje básico. ¡En el camino, también tendrás la oportunidad de jugar con HTML! - +
Prerrequisitos:Requisitos previos: - Conocimientos básicos de informática, - - tener instalado el software básico - - y conocimientos básicos de cómo - - trabajar con archivos - . + Conocimientos informáticos básicos, + software básico instalado, y conocimientos básicos de + trabajar con archivos.
Objetivo: - Familiarizarte con el lenguaje HTML, y adquirir algo de práctica - escribiendo unos pocos elementos HTML. + Para obtener una familiaridad básica con HTML y practicar la escritura de algunos + elementos HTML
-## ¿Qué es el HTML? +## ¿Qué es HTML? -{{Glossary("HTML")}} ("_Hypertext Markup Language_") no es un lenguaje de programación. Es un _lenguaje de marcado_ que le dice a los navegadores web cómo estructurar las páginas web que estás visitando. Puede ser tan complejo o tan simple como desee el desarrollador web. El HTML consiste en una serie de {{Glossary("Element", "elementos")}}, que puedes utilizar para encerrar, delimitar o _marcar_ diferentes partes del contenido para hacer que aparezcan de una cierta manera, o actúen de determinada forma. Las {{Glossary("Tag", "etiquetas")}} que delimitan un fragmento de contenido pueden hacer que dicho contenido enlace con otra página, ponga una palabra en cursiva, etcétera. Por ejemplo, dada la siguiente línea de contenido: +{{glossary("HTML")}} (HyperText Markup Language, por sus siglas en inglés) es un _lenguaje de marcado_ que indica a los navegadores web cómo estructurar las páginas web que visita. Puede ser tan complicado o tan simple como el desarrollador web quiera que sea. HTML consiste en una serie de {{glossary("Element", "elementos")}}, que utiliza para encerrar, envolver o _marcar_ diferentes partes del contenido para que aparezca o actúe de cierta manera. Las etiquetas pueden convertir el contenido en un hipervínculo para conectarse a otra página, poner palabras en cursiva, etc. Por ejemplo, considere la siguiente línea de texto: -``` +```plain Mi gato es muy gruñón ``` -Si queremos que la línea sea independiente de otras, podemos especificar que es un párrafo encerrándola con una etiqueta de elemento de párrafo ({{htmlelement("p")}}): +Si quisiéramos que el texto se mantuviera solo, podríamos especificar que es un párrafo encerrándolo en un elemento de párrafo ({{htmlelement("p")}}): ```html

Mi gato es muy gruñón

``` -> **Nota:** Las etiquetas en HTML no distinguen entre mayúsculas y minúsculas. Así que se pueden escribir tanto en mayúsculas como en minúsculas. Por ejemplo, una etiqueta {{htmlelement("title")}} se puede escribir como ``, `<TITLE>`, `<Title>`, `<TiTle>`, etc., y funcionará correctamente. La mejor práctica, sin embargo, es escribir todas las etiquetas en minúsculas para mantener la coherencia y legibilidad, entre otros motivos. +> **Nota:** Las etiquetas en HTML no distinguen entre mayúsculas y minúsculas. Esto significa que se pueden escribir en mayúsculas o minúsculas. Por ejemplo, una etiqueta {{htmlelement ("title")}} podría escribirse como `<title>`, `<TITLE>`, `<Title>`, `<TiTlE>`, etc., y funcionará. Sin embargo, es una buena práctica escribir todas las etiquetas en minúsculas para mayor coherencia y legibilidad. ## Anatomía de un elemento HTML -Exploremos un poco el elemento párrafo: +Exploremos más a fondo nuestro elemento de párrafo de la sección anterior: -![Anatomía de los elementos HTML](grumpy-cat-small.png) +![Un fragmento de código de ejemplo que demuestra la estructura de un elemento html.<p> Mi gato es muy gruñón</p>.](grumpy-cat-small.png) -Las principales partes de nuestro elemento son: +La anatomía de nuestro elemento es: -- La **etiqueta de apertura**: consiste en el nombre del elemento (en este caso, `p`), encerrado entre **paréntesis angulares** de apertura y cierre. Esta etiqueta de apertura marca dónde comienza el elemento o comienza a tener efecto. En este ejemplo, precede al comienzo del texto del párrafo. -- El **contenido**: Este es el contenido del elemento. En este ejemplo, es el texto del párrafo. -- La **etiqueta de cierre**: Es lo mismo que la etiqueta de apertura, excepto que incluye una barra diagonal antes del nombre del elemento. Esto indica dónde termina el elemento; en este caso, dónde finaliza el párrafo. No incluir una etiqueta de cierre es un error común de principiante, y puede conducir a extraños resultados. +- **La etiqueta de apertura:** Consiste en el nombre del elemento (en este ejemplo, _p_ para el párrafo), envuelto en corchetes angulares de apertura y cierre. Esta etiqueta de apertura marca dónde inicia o comienza a surtir efecto el elemento. En este ejemplo, precede al inicio del texto del párrafo. +- **El contenido:** Este es el contenido del elemento. En este ejemplo, es el texto del párrafo. +- **La etiqueta de cierre:** Esta es la misma que la etiqueta de apertura, excepto que incluye una barra diagonal delante del nombre del elemento. Esto marca donde termina el elemento. No incluir una etiqueta de cierre es un error común para principiantes que puede producir resultados peculiares. -El **elemento** lo conforman la etiqueta de apertura, seguida del contenido, seguido de la etiqueta de cierre. +El elemento es la etiqueta de apertura, seguida del contenido, seguida de la etiqueta de cierre. ### Aprendizaje activo: crear tu primer elemento HTML -Edita la siguiente línea en el área _Entrada_ envolviéndola con las etiquetas `<em>` y `</em>`. Para _abrir el elemento_, coloca la etiqueta de apertura `<em>` al principio de la línea. Para _cerrar el elemento_, coloca la etiqueta de cierre `</em>` al final de la línea. ¡Obtienes una línea en cursiva! Puedes ver tus cambios actualizados automáticamente en la caja de texto de _Salida_. +Edite la siguiente línea en el área "Código editable" envolviéndola con las etiquetas `<em>` y `</em>.` Para _abrir el elemento_, coloque la etiqueta de apertura `<em>` al comienzo de la línea. Para _cerrar el elemento_, coloque la etiqueta de cierre `</em>` al final de la línea. ¡Hacer esto debería darle formato de texto en cursiva a la línea! Consulta la actualización de tus cambios en vivo en el área de*Salida en vivo*. -Si te equivocas, siempre puedes volver al código anterior mediante el botón _Restablecer_. Si te quedas realmente atascado, pulsa el botón _Mostrar la solución_ para ver la solución. +Si comete un error, puede borrar su trabajo utilizando el botón*Restablecer*. Si te quedas realmente atascado, pulsa el botón*Mostrar solución* para ver la respuesta. ```html hidden <h2>Salida en vivo</h2> @@ -74,12 +77,12 @@ Si te equivocas, siempre puedes volver al código anterior mediante el botón _R <h2>Código editable</h2> <p class="a11y-label"> - Pulsa Esc para quitar el foco del área de código (Tab inserta un carácter de + Pulse Esc para alejar el foco del área de código (Tab inserta un carácter de tabulación). </p> <textarea id="code" class="playable-code" style="min-height: 100px;width: 95%"> -Este es mi texto. + Este es mi texto. </textarea> <div class="controls"> @@ -111,18 +114,21 @@ body { ``` ```js hidden -var textarea = document.getElementById("code"); -var reset = document.getElementById("reset"); -var solution = document.getElementById("solution"); -var output = document.querySelector(".output"); -var code = textarea.value; -var userEntry = textarea.value; +const textarea = document.getElementById("code"); +const reset = document.getElementById("reset"); +const solution = document.getElementById("solution"); +const output = document.querySelector(".output"); +const code = textarea.value; +let userEntry = textarea.value; function updateCode() { output.innerHTML = textarea.value; } -reset.addEventListener("click", function () { +const htmlSolution = "<em>Este es mi texto.</em>"; +let solutionEntry = htmlSolution; + +reset.addEventListener("click", () => { textarea.value = code; userEntry = textarea.value; solutionEntry = htmlSolution; @@ -130,7 +136,7 @@ reset.addEventListener("click", function () { updateCode(); }); -solution.addEventListener("click", function () { +solution.addEventListener("click", () => { if (solution.value === "Mostrar solución") { textarea.value = solutionEntry; solution.value = "Ocultar solución"; @@ -141,16 +147,12 @@ solution.addEventListener("click", function () { updateCode(); }); -var htmlSolution = "<em>Este es mi texto.</em>"; -var solutionEntry = htmlSolution; - textarea.addEventListener("input", updateCode); window.addEventListener("load", updateCode); -// captura la tecla de tabulación en el área de texto y en su lugar -// hace que se escriba una tabulación en la posición del cursor - -textarea.onkeydown = function (e) { +// detener la tabulación de la tecla tabulación fuera del área de texto y +// hacer que escriba una tabulación en la posición del cursor en su lugar +textarea.onkeydown = (e) => { if (e.keyCode === 9) { e.preventDefault(); insertAtCaret("\t"); @@ -162,27 +164,27 @@ textarea.onkeydown = function (e) { }; function insertAtCaret(text) { - var scrollPos = textarea.scrollTop; - var caretPos = textarea.selectionStart; + const scrollPos = textarea.scrollTop; + let caretPos = textarea.selectionStart; - var front = textarea.value.substring(0, caretPos); - var back = textarea.value.substring( + const front = textarea.value.substring(0, caretPos); + const back = textarea.value.substring( textarea.selectionEnd, textarea.value.length, ); textarea.value = front + text + back; - caretPos = caretPos + text.length; + caretPos += text.length; textarea.selectionStart = caretPos; textarea.selectionEnd = caretPos; textarea.focus(); textarea.scrollTop = scrollPos; } -// Actualiza el userCode guardado cada vez que el usuario actualiza el código del área de texto +// Actualizar el userCode guardado cada vez que el usuario actualice el código de área de texto -textarea.onkeyup = function () { +textarea.onkeyup = () => { // Solo queremos guardar el estado cuando se muestra el código de usuario, - // no es la solución, por lo que la solución no se guarda sobre el código del usuario + // no la solución, para que la solución no se guarde sobre el código de usuario if (solution.value === "Mostrar solución") { userEntry = textarea.value; } else { @@ -193,102 +195,79 @@ textarea.onkeyup = function () { }; ``` -{{ EmbedLiveSample('Código_reproducible', 700, 400, "", "", "hide-codepen-jsfiddle") }} +{{ EmbedLiveSample('Active_learning_creating_your_first_HTML_element', 700, 400, "", "") }} -### Elementos anidados +### Anidando elementos -Se pueden poner elementos dentro de otros elementos. Esto se llama **anidamiento**. Si quisiéramos decir que nuestro gato es **muy** gruñón, podríamos encerrar la palabra _muy_ en un elemento {{htmlelement("strong")}} para que aparezca destacada. +Los elementos se pueden colocar dentro de otros elementos. Esto se llama _anidamiento_. Si quisiéramos decir que nuestro gato está **muy** gruñón, podríamos envolver la palabra _muy_ en un elemento {{htmlelement("strong")}}, lo que significa que la palabra debe tener un formato de texto fuerte: ```html <p>Mi gato es <strong>muy</strong> gruñón.</p> ``` -Hay una forma correcta e incorrecta de anidar. En el ejemplo anterior, primero abrimos el elemento `p`, luego abrimos el elemento `strong`. Para un anidamiento adecuado, primero debemos cerrar el elemento `strong`, antes de cerrar el `p`. +Hay una forma correcta e incorrecta de anidar. En el ejemplo anterior, abrimos primero el elemento `p`, luego abrimos el elemento `strong`. Para una anidación adecuada, primero debemos cerrar el elemento `strong`, antes de cerrar `p`. El siguiente es un ejemplo de la forma _incorrecta_ de anidar: -```html example-bad +```html-nolint example-bad <p>Mi gato es <strong>muy gruñón.</p></strong> ``` -Los elementos tienen que abrirse y cerrarse correctamente para que estén claramente dentro o fuera el uno del otro. Con el tipo de superposición en el ejemplo anterior, el navegador tiene que adivinar tu intención. Este tipo de adivinanzas puede producir resultados inesperados. - -### Elementos de bloque y elementos en línea - -Hay dos categorías importantes de elementos en HTML — Estos son los elementos de bloque y los elementos en línea. - -- Los elementos de bloque forman un bloque visible en la página. Aparecerán en una línea nueva después de cualquier contenido anterior. Cualquier contenido que vaya después también aparecerá en una línea nueva. Los elementos a nivel de bloque suelen ser elementos estructurales de la página. Por ejemplo, un elemento a nivel de bloque puede representar encabezados, párrafos, listas, menús de navegación o pies de página. Un elemento a nivel de bloque no estaría anidado dentro de un elemento en línea, pero podría estar anidado dentro de otro elemento a nivel de bloque. -- Los elementos en línea están contenidos dentro de elementos de bloque y delimitan solo pequeñas partes del contenido del documento; (no párrafos enteros o agrupaciones de contenido) Un elemento en línea no hará que aparezca una nueva línea en el documento. Suele utilizarse con texto. Por ejemplo es el caso de un elemento {{htmlelement("a")}} (hipervínculo) o elementos de énfasis como {{htmlelement("em")}} o {{htmlelement("strong")}}. - -Considera el siguiente ejemplo: - -```html -<em>primero</em><em>segundo</em><em>tercero</em> - -<p>cuarto</p> -<p>quinto</p> -<p>sexto</p> -``` - -{{htmlelement("em")}} es un elemento en línea. Así, como puedes observar, los tres primeros elementos se sitúan en la misma línea, uno tras otro sin espacio entre ellos. Por otro lado, {{htmlelement("p")}} es un elemento a nivel de bloque. Cada elemento _p_ aparece en una nueva línea, con un espacio arriba y abajo. (El espaciado se debe al [estilo CSS](/es/docs/Learn/CSS/First_steps) predeterminado que el navegador aplica a los párrafos). - -{{ EmbedLiveSample('Elementos_de_bloque_y_elementos_en_línea', 700, 200, "", "") }} - -> **Nota:** HTML5 redefinió las categorías de elementos: consulta [Categorías de contenido de elementos](https://html.spec.whatwg.org/multipage/indices.html#element-content-categories). Si bien estas definiciones son más precisas y menos ambiguas que sus predecesoras, las nuevas definiciones son mucho más complicadas de entender que _block_ e _inline_ . Este artículo seguirá con estos dos términos. - -> **Nota:** Los términos «en bloque» (block) y «en línea» (inline), tal como se usan en este tema, no se deberían confundir con [los tipos de casillas de CSS](/es/docs/Learn/CSS/Introduction_to_CSS/Box_model#Types_of_CSS_boxes) que se conocen con el mismo nombre. Aunque de manera predeterminada están relacionados, el hecho de cambiar el tipo de aspecto visual del CSS no cambia la categoría del elemento ni afecta a aquellos elementos que pueda contener. Una de las razones por las que HTML5 abandonó el uso de estos términos fue para evitar este tipo de confusión. - -> **Nota:** Puedes encontrar referencias útiles que incluyen listas de elementos de bloque y elementos en línea. Consulta [Elementos en bloque](/es/docs/Glossary/Block-level_content) y [Elementos en línea](/es/docs/orphaned/Web/HTML/Inline_elements). +Las **etiquetas tienen que abrirse y cerrarse de manera que estén dentro o fuera la una de la otra**. Con el tipo de superposición en el ejemplo anterior, el navegador tiene que adivinar tu intención. Este tipo de adivinanzas puede dar lugar a resultados inesperados. ### Elementos vacíos -No todos los elementos siguen el patrón de etiqueta de apertura, contenido y etiqueta de cierre. Algunos elementos consisten solo en una etiqueta única, que se utiliza generalmente para insertar/incrustar algo en el documento en el lugar donde se le quiere incluir. Por ejemplo, el elemento {{htmlelement("img")}} inserta una imagen en la página: +No todos los elementos siguen el patrón de una etiqueta de apertura, contenido y una etiqueta de cierre. Algunos elementos consisten en una sola etiqueta, que normalmente se utiliza para insertar/incrustar algo en el documento. Dichos elementos se denominan {{glossary("void element", "elementos vacíos")}}. Por ejemplo, el elemento {{htmlelement ("img")}} incrusta un archivo de imagen en una página: ```html <img - src="https://raw.githubusercontent.com/mdn/beginner-html-site/gh-pages/images/firefox-icon.png" /> + src="https://raw.githubusercontent.com/mdn/beginner-html-site/gh-pages/images/firefox-icon.png" + alt="Icono de Firefox" /> ``` -Este texto mostrará lo siguiente en tu página: +Esto daría como resultado lo siguiente: -{{ EmbedLiveSample('Elementos_vacíos', 700, 300, "", "", "hide-codepen-jsfiddle") }} +{{ EmbedLiveSample('elementos_vacíos', 700, 300, "", "") }} -> **Nota:** Los elementos vacíos en ocasiones también se llaman elementos _nulos_ o _vanos_ (_void elements_). +> **Nota:** En HTML, no es necesario añadir un `/` al final de la etiqueta de un elemento vacío, por ejemplo: `<img src="images/cat.jpg" alt="cat" />`. Sin embargo, también es una sintaxis válida, y puede hacerlo cuando desee que su HTML sea XML válido. ## Atributos -Los elementos también pueden tener atributos. Los atributos tienen este aspecto: +Los elementos también pueden tener atributos. Los atributos se ven así: -![atributo html](grumpy-cat-attribute-small.png) +![etiqueta de párrafo con el atributo 'class="editor-note"' enfatizado](grumpy-cat-attribute-small.png) -Los atributos contienen información extra sobre el elemento que no se mostrará en el contenido. En este caso, el atributo `class` asigna al elemento un identificador que se puede utilizar para dotarlo de información de estilo. +Los atributos contienen información adicional sobre el elemento que no aparecerá en el contenido. En este ejemplo, el atributo **`class`** es un nombre de identificación utilizado para identificar el elemento con información de estilo. -Un atributo debería tener: +Un atributo debe tener: -- Un espacio entre este y el nombre del elemento. (Para un elemento con más de un atributo, los atributos también deben estar separados por espacios). -- El nombre del atributo, seguido por un signo igual. -- Un valor del atributo, rodeado de comillas de apertura y cierre. +- Un espacio entre él y el nombre del elemento. (Para un elemento con más de un atributo, los atributos también deben estar separados por espacios). +- El nombre del atributo, seguido de un signo igual. +- Un valor de atributo, envuelto con comillas de apertura y cierre. -### Aprendizaje activo: Añadir atributos a un elemento +### Aprendizaje activo: añadir atributos a un elemento -Otro ejemplo de un elemento es {{htmlelement("a")}}. Esto significa _ancla_. Una ancla puede convertir el texto que encierra en un hipervínculo. Las anclas pueden tener varios atributos, pero varios son como sigue: +El elemento `<img>` puede tomar una serie de atributos, que incluyen: -- `href` - - : El valor de este atributo indica la dirección web a la que se quiere que apunte el enlace, que será hacia donde nos lleve el navegador cuando se haga clic sobre el elemento. Por ejemplo, `href="https://www.mozilla.org/"`. -- `title` - - : El atributo `title` añade información adicional sobre el enlace, como puede ser el título de la página que vinculas. Por ejemplo, `title="La página de inicio de Mozilla"`. Esta información aparecerá cuando se le pase el ratón por encima. -- `target` - - : El atributo `target` especifica el contexto de navegación que va a usar para mostrar el enlace. Por ejemplo, `target="_blank"` abrirá el enlace en una nueva pestaña. Si quieres mostrar el enlace en la pestaña activa, simplemente omite este atributo. +- `src` + - : El atributo `src` es un atributo **requerido** que especifica la ubicación de la imagen. Por ejemplo: `src="https://raw.githubusercontent.com/mdn/beginner-html-site/gh-pages/images/firefox-icon.png"`. +- `alt` + - : El atributo `alt` especifica una descripción de texto de la imagen. Por ejemplo: `alt="El icono de Firefox"`. +- `width` + - : El atributo `width` especifica el ancho de la imagen con la unidad en píxeles. Por ejemplo: `width="300"`. +- `height` + - : El atributo `height` especifica la altura de la imagen con la unidad en píxeles. Por ejemplo: `height="300"`. -Edita la línea de abajo en el área de _Entrada_ para convertirlo en un enlace a tu sitio web favorito. +Edita la siguiente línea en el área del _Input_ para convertirla en una imagen. -1. Añade el elemento `<a>`. -2. Añade el atributo `href` y el atributo `title`. -3. Especifica el atributo `target` para abrir el enlace en una nueva pestaña. +1. Encuentra tu imagen favorita en línea, haz clic con el botón derecho y pulsa _Copiar enlace/dirección de imagen_. +2. De vuelta en el área de abajo, añade el atributo `src` y rellénalo con el enlace del paso 1. +3. Establece el atributo `alt`. +4. Añade los atributos `width` y `height`. -Los cambios se actualizarán inmediatamente en la zona de _Salida_. Deberías ver un enlace que mostrará el contenido del atributo `title` cuando pases el ratón encima, y que te llevará a la dirección web indicada por el atributo `href` cuando hagas clic. Recuerda que debes incluir un espacio entre el nombre del elemento y cada atributo. +Podrás ver los cambios en vivo en el área de _Salida_. -Si te equivocas, siempre puedes restablecer el código anterior pulsando el botón _Restablecer_. Si te quedas realmente atascado, pulsa el botón _Mostrar la solución_ para ver la solución. +Si comete un error, siempre puede restablecerlo utilizando el botón _Restablecer_. Si te quedas realmente atascado, pulsa el botón _Mostrar solución_ para ver la respuesta. ```html hidden <h2>Salida en vivo</h2> @@ -297,12 +276,12 @@ Si te equivocas, siempre puedes restablecer el código anterior pulsando el bot <h2>Código editable</h2> <p class="a11y-label"> - Pulsa Esc para quitar el foco del área de código (Tab inserta un carácter de + Pulse Esc para alejar el foco del área de código (Tab inserta un carácter de tabulación). </p> <textarea id="code" class="input" style="min-height: 100px;width: 95%"> -&lt;p&gt;Un enlace a mi sitio web favorito.&lt;/p&gt; +<img alt="Debería ser una imagen" > </textarea> <div class="playable-buttons"> @@ -334,18 +313,22 @@ body { ``` ```js hidden -var textarea = document.getElementById("code"); -var reset = document.getElementById("reset"); -var solution = document.getElementById("solution"); -var output = document.querySelector(".output"); -var code = textarea.value; -var userEntry = textarea.value; +const textarea = document.getElementById("code"); +const reset = document.getElementById("reset"); +const solution = document.getElementById("solution"); +const output = document.querySelector(".output"); +const code = textarea.value; +let userEntry = textarea.value; function updateCode() { output.innerHTML = textarea.value; } -reset.addEventListener("click", function () { +const htmlSolution = + '<img src="https://raw.githubusercontent.com/mdn/beginner-html-site/gh-pages/images/firefox-icon.png" alt="Icono de Firefox" width="100" height="100" />'; +let solutionEntry = htmlSolution; + +reset.addEventListener("click", () => { textarea.value = code; userEntry = textarea.value; solutionEntry = htmlSolution; @@ -353,7 +336,7 @@ reset.addEventListener("click", function () { updateCode(); }); -solution.addEventListener("click", function () { +solution.addEventListener("click", () => { if (solution.value === "Mostrar solución") { textarea.value = solutionEntry; solution.value = "Ocultar solución"; @@ -364,17 +347,13 @@ solution.addEventListener("click", function () { updateCode(); }); -var htmlSolution = - '<p>Un enlace a mi <a href="https://www.mozilla.org/" title="La página de inicio de Mozilla" target="_blank">sitio web favorito</a>.</p>'; -var solutionEntry = htmlSolution; - textarea.addEventListener("input", updateCode); window.addEventListener("load", updateCode); -// captura la tecla de tabulación en el área de texto y en su lugar -// hace que se escriba una tabulación en la posición del cursor +// detener la tabulación de la tecla tabulación fuera del área de texto y +// hacer que escriba una tabulación en la posición del cursor en su lugar -textarea.onkeydown = function (e) { +textarea.onkeydown = (e) => { if (e.keyCode === 9) { e.preventDefault(); insertAtCaret("\t"); @@ -386,27 +365,27 @@ textarea.onkeydown = function (e) { }; function insertAtCaret(text) { - var scrollPos = textarea.scrollTop; - var caretPos = textarea.selectionStart; + const scrollPos = textarea.scrollTop; + let caretPos = textarea.selectionStart; - var front = textarea.value.substring(0, caretPos); - var back = textarea.value.substring( + const front = textarea.value.substring(0, caretPos); + const back = textarea.value.substring( textarea.selectionEnd, textarea.value.length, ); textarea.value = front + text + back; - caretPos = caretPos + text.length; + caretPos += text.length; textarea.selectionStart = caretPos; textarea.selectionEnd = caretPos; textarea.focus(); textarea.scrollTop = scrollPos; } -// Actualiza el userCode guardado cada vez que el usuario actualiza el código del área de texto +// Actualizar el userCode guardado cada vez que el usuario actualice el código de área de texto -textarea.onkeyup = function () { +textarea.onkeyup = () => { // Solo queremos guardar el estado cuando se muestra el código de usuario, - // no es la solución, por lo que la solución no se guarda sobre el código del usuario + // no la solución, para que la solución no se guarde sobre el código de usuario if (solution.value === "Mostrar solución") { userEntry = textarea.value; } else { @@ -417,20 +396,20 @@ textarea.onkeyup = function () { }; ``` -{{ EmbedLiveSample('Código_reproducible_2', 700, 400, "", "", "hide-codepen-jsfiddle") }} +{{ EmbedLiveSample('Active_learning_Adding_attributes_to_an_element', 700, 400, "", "") }} ### Atributos booleanos -En ocasiones puedes ver atributos escritos sin valor. Esto está permitido. Estos se denominan atributos booleanos. Los atributos booleanos solo pueden tener un valor, que generalmente es el mismo que el nombre del atributo. Por ejemplo, considera el atributo [`disabled`](/es/docs/Web/HTML/Element/input#disabled), que puedes asignar a los elementos de entrada del formulario. (Usa esto para _deshabilitar_ los elementos de entrada del formulario para que el usuario no pueda realizar entradas. Los elementos desactivados suelen tener una apariencia atenuada). Por ejemplo: +A veces verás atributos escritos sin valores. Esto es totalmente aceptable. Estos se llaman atributos booleanos. Los atributos booleanos solo pueden tener un valor, que generalmente es el mismo que el nombre del atributo. Por ejemplo, considere el atributo [`disabled`](/es/docs/Web/HTML/Element/input#disabled), que puede asignar a los elementos de entrada de formulario. (Utiliza esto para _deshabilitar_ los elementos de entrada del formulario para que el usuario no pueda realizar entradas. Los elementos deshabilitados suelen tener un aspecto grisáceo.) Por ejemplo: -```bash -<input type="text" disabled="disabled"> +```html +<input type="text" disabled="disabled" /> ``` -De manera abreviada, también es posible escribirlo como se describe a continuación (además, se ha incluido un elemento de entrada de formulario no desactivado como referencia, para dar una idea más precisa de lo que sucede): +Como abreviatura, es aceptable escribir esto de la siguiente manera: ```html -<!-- el uso del atributo deshabilitado evita que el usuario final introduzca texto en el cuadro de entrada --> +<!-- el uso del atributo deshabilitado impide que el usuario final introduzca texto en el cuadro de entrada --> <input type="text" disabled /> <!-- se permite la entrada de texto, ya que no contiene el atributo deshabilitado --> @@ -439,73 +418,71 @@ De manera abreviada, también es posible escribirlo como se describe a continuac Como referencia, el ejemplo anterior también incluye un elemento de entrada de formulario no deshabilitado. El HTML del ejemplo anterior produce este resultado: -{{ EmbedLiveSample('Atributos_booleanos', 700, 100, "", "", "hide-codepen-jsfiddle") }} +{{ EmbedLiveSample('Atributos_booleanos', 700, 100, "", "") }} -### Omitir comillas en valores de atributos +### Omitir comillas en torno a los valores de atributo -Cuando observas diferentes páginas web, puedes encontrarte con todo tipo de estilos de etiquetado extraños, que incluyen valores de atributos sin comillas. Esto se permite en ciertas circunstancias, pero interrumpirá la edición en otras. Por ejemplo, si volvemos a revisar el ejemplo del enlace, sería posible escribir una versión básica con solo el atributo `href`, así: +Si observa el código de muchos otros sitios, es posible que encuentre una serie de estilos de marcado extraños, incluidos los valores de atributos sin comillas. Esto está permitido en ciertas circunstancias, pero también puede romper su margen de beneficio en otras circunstancias. El elemento en el fragmento de código a continuación, `<a>`, se llama ancla. Los anclajes encierran texto y los convierten en enlaces. El atributo `href` especifica la dirección web a la que apunta el enlace. Puedes escribir esta versión básica a continuación con _solo_ el atributo `href`, así: ```html -<a href=https://www.mozilla.org/>mi sitio web favorito</a> +<a href=https://www.mozilla.org/>sitio web favorito</a> ``` -Sin embargo, las cosas no funcionarán cuando a este estilo se añada el atributo `title`: +Los anclajes también pueden tener un atributo `title`, una descripción de la página vinculada. Sin embargo, tan pronto como añadimos el `title` de la misma manera que el atributo `href` hay problemas: -```html example-bad -<a href=https://www.mozilla.org/ title=La pagina de Mozilla>mi sitio web favorito</a> +```html-nolint example-bad +<a href=https://www.mozilla.org/ title=Pagina de Mozilla>sitio web favorito</a> ``` -En este punto el navegador interpretará mal el cambio y pensará que el atributo `title` corresponde a tres atributos: un atributo `title` con el valor _La_ y dos atributos booleanos: `Mozilla` y `homepage`. ¡Obviamente, esta no es la intensión! Causará errores o comportamientos inesperados, como puedes ver en el ejemplo en vivo a continuación. ¡Intenta colocar el cursor sobre el enlace para ver el texto del título! +Como se ha escrito anteriormente, el navegador malinterpreta el marcado, confundiendo el atributo `title` con tres atributos: un atributo title con el valor `The`, y dos atributos booleanos, `Mozilla` y `homepage`. ¡Obviamente, esto no es la intención! Causará errores o comportamientos inesperados, como puede ver en el ejemplo en vivo a continuación. ¡Intenta pasar el cursor sobre el enlace para ver el texto del título! -{{ EmbedLiveSample('Omitir_comillas_en_valores_de_atributos', 700, 100, "", "", "hide-codepen-jsfiddle") }} +{{ EmbedLiveSample('Omitir_comillas_en_torno_a_los_valores_de_atributo', 700, 100, "", "") }} -Incluye **siempre** las comillas de atributos. Evita tales problemas y da como resultado un código más legible. +Incluya siempre las comillas de los atributos. Evita tales problemas y da como resultado un código más legible. ### ¿Comillas simples o dobles? -En este artículo todos los atributos se han incluido en comillas dobles. Sin embargo, se pueden ver comillas simples en algún código HTML. Es una cuestión de estilo. Puedes elegir libremente cuál prefieres. Ambas líneas de código son equivalentes: +En este artículo, también notarás que los atributos están entre comillas dobles. Sin embargo, es posible que veas comillas simples en algún código HTML. Es una cuestión de estilo. Puedes elegir libremente cuál prefieres. Ambas opciones son equivalentes: -```html -<a href="http://www.ejemplo.com">Un enlace a mi ejemplo.</a> +```html-nolint +<a href='https://www.example.com'>Un enlace a mi ejemplo.</a> -<a href="http://www.ejemplo.com">Un enlace a mi ejemplo.</a> +<a href="https://www.example.com">Un enlace a mi ejemplo.</a> ``` -Asegúrate de no mezclar ambos tipos de comillas. El siguiente ejemplo muestra un tipo de mezcla de comillas que saldrá mal: +Asegúrate de no mezclar comillas simples y comillas dobles. Este ejemplo (a continuación) muestra una especie de mezcla de comillas que saldrá mal: -```html example-bad -<a href="http://www.ejemplo.com'>Un enlace a mi ejemplo.</a> +```html-nolint example-bad +<a href="https://www.example.com'>Un enlace a mi ejemplo.</a> ``` -Si utilizas un tipo de comillas en tu documento HTML, puedes incluir el otro tipo de comillas para tus valores de atributo sin que esto te cause problemas: +Sin embargo, si utilizas un tipo de comilla, puedes incluir el otro tipo de comilla _dentro_ tus valores de atributo: ```html -<a href="http://www.ejemplo.com" title="¿A que es 'divertido'" - >Un enlace a mi ejemplo.</a -> +<a href="https://www.example.com" title="¿No es 'esto' divertido?"> + Un enlace a mi ejemplo. +</a> ``` -Sin embargo, si deseas anidar unas comillas dentro de otras del mismo tipo (ya sea simples o dobles), tendrás que utilizar entidades HTML para las comillas. Por ejemplo, el siguiente código no va a funcionar: +Para usar comillas dentro de otras comillas del mismo tipo (comillas simples o comillas dobles), use [entidades HTML](#entity_references_including_special_characters_in_html). Por ejemplo, esto se romperá: -```html example-bad -<a href='http://www.ejemplo.com' title='¿A que es 'divertido'?'>Un enlace a mi ejemplo.</a> +```html-nolint example-bad +<a href="https://www.example.com" title="Una referencia "interesante"">Un enlace a mi ejemplo.</a> ``` -Así que tendrás que hacer esto: +En su lugar, debe hacer lo siguiente: -```html -<a href="http://www.ejemplo.com" title="¿A que es 'divertido'?" - >Un enlace a mi ejemplo.</a -> +```html-nolint +<a href="https://www.example.com" title="Una referencia "interesante"">Un enlace a mi ejemplo.</a> ``` ## Anatomía de un documento HTML -Los elementos HTML no son muy útiles por sí mismos. Ahora veremos cómo combinar los elementos individuales para formar una página HTML completa: +Los elementos HTML individualmente no son muy útiles por sí solos. A continuación, examinemos cómo se combinan los elementos para formar una página HTML completa: ```html <!doctype html> -<html> +<html lang="es"> <head> <meta charset="utf-8" /> <title>Mi página de prueba @@ -518,44 +495,42 @@ Los elementos HTML no son muy útiles por sí mismos. Ahora veremos cómo combin Aquí tenemos: -1. ``: El elemento _doctype_. En sus inicios, cuando el HTML llevaba poco tiempo (alrededor de 1991-1992), los _doctypes_ servían como enlaces al conjunto de reglas que la página HTML debía seguir para que fuera considerado buen HTML. Un elemento _doctype_ de aquella época podía parecerse a esto: +1. ``: El tipo de documento. Cuando HTML era joven (1991-1992), los doctype estaban destinados a actuar como enlaces a un conjunto de reglas que la página HTML tenía que seguir para ser considerada un buen HTML. Los doctypes solían parecerse a algo como esto: ```html ``` - En la actualidad se ignora y se considera un legado histórico que hay que incluir para que todo funcione correctamente. `` es la secuencia de caracteres más corta que se acepta como elemento _doctype_ válido. Eso es lo único que realmente necesitas saber. - -2. ``: El elemento ``. Este elemento envuelve todo el contenido de la página. A veces se lo conoce como el elemento raíz. -3. ``: El elemento `<{{htmlelement("head")}}>` (cabecera). Este elemento actúa como contenedor para todos los parámetros que quieras incluir en el documento HTML que _no serán_ visibles a los visitantes de la página. Incluye cosas como palabras clave y la descripción de la página que quieras mostrar en los resultados de búsqueda, así como la hoja de estilo para formatear nuestro contenido, declaraciones de codificación de caracteres y más. Aprenderás más acerca de esto en el siguiente artículo de la serie. -4. ``: Este elemento establece que tu documento HTML usará la codificación UTF-8, que incluye la gran mayoría de caracteres de todos los idiomas humanos escritos. En resumen: puede gestionar cualquier contenido textual que pongas en tu documento. No hay razón para no configurar este valor y te puede ayudar a evitar problemas más adelante. -5. ``: El elemento {{htmlelement("title")}}. Este establece el título de la página, que es el título que aparece en la pestaña del navegador en la que se carga la página. El título de la página también se utiliza para describir la página cuando se marca como favorita. -6. ``: El elemento ``. Contiene todo el contenido que quieres mostrar a los usuarios cuando visitan tu página, ya sea texto, imágenes, vídeos, juegos, pistas de audio reproducibles o cualquier otra cosa. + Más recientemente, el doctype es un artefacto histórico que debe incluirse para que todo lo demás funcione correctamente. `` es la cadena más corta de caracteres que cuenta como un tipo de documento válido. ¡Eso es todo lo que necesitas saber! -### Aprendizaje activo: Añadir algunas características a un documento HTML +2. ``: El elemento {{htmlelement("html")}}. Este elemento envuelve todo el contenido de la página. A veces se le conoce como el elemento raíz. +3. ``: El elemento {{htmlelement("head")}}. Este elemento actúa como un contenedor para todo lo que desea incluir en la página HTML, **que no es el contenido** que la página mostrará a los espectadores. Esto incluye palabras clave y una descripción de la página que aparecería en los resultados de búsqueda, CSS para dar estilo al contenido, declaraciones de conjuntos de caracteres y más. Aprenderás más sobre esto en el próximo artículo de la serie. +4. ``: El elemento {{htmlelement("meta")}}. Este elemento representa metadatos que no pueden ser representados por otros elementos HTML relacionados con metadatos, como {{htmlelement("base")}}, {{htmlelement("link")}}, {{htmlelement("script")}}, {{htmlelement("style")}} o {{htmlelement("title")}}. El atributo [`charset`](/es/docs/Web/HTML/Element/meta#charset) especifica la codificación de caracteres para su documento como UTF-8, que incluye la mayoría de los caracteres de la gran mayoría de los lenguajes humanos escritos. Con esta configuración, la página ahora puede manejar cualquier contenido textual que pueda contener. No hay razón para no configurar esto, y puede ayudar a evitar algunos problemas más adelante. +5. ``: El elemento {{htmlelement("title")}}. Esto establece el título de la página, que es el título que aparece en la pestaña del navegador en la que se carga la página. El título de la página también se utiliza para describir la página cuando está en marcadores. +6. ``: El elemento {{htmlelement("body")}}. Contiene _todo_ el contenido que se muestra en la página, incluidos texto, imágenes, vídeos, juegos, pistas de audio reproducibles o cualquier otra cosa. -Si quieres escribir algo de HTML en tu ordenador local para experimentar, puedes: +### Aprendizaje activo: añadir algunas funciones a un documento HTML -1. Copiar el ejemplo de la página HTML del punto anterior. -2. Crear un archivo nuevo en un editor de texto. -3. Pegar el código en el nuevo archivo de texto. -4. Guardar el archivo como `index.html`. +Si quieres experimentar con escribir algo de HTML en tu ordenador local, puedes: -> **Nota:** También puedes encontrar esta plantilla básica de HTML en el [repositorio GitHub del Área MDN Learning](https://github.com/mdn/learning-area/blob/master/html/introduction-to-html/getting-started/index.html). +1. Copie el ejemplo de página HTML listado anteriormente. +2. Crea un nuevo archivo en tu editor de texto. +3. Pega el código en el nuevo archivo de texto. +4. Guarde el archivo como `index.html`. -Ahora puedes abrir este archivo en un navegador web para ver cómo se ve el código renderizado. Edita el código y actualiza el navegador para ver cuál es el resultado. En principio se verá algo así: +> **Nota:** También puedes encontrar esta plantilla HTML básica en el [repositorio de GitHub del área de aprendizaje de MDN](https://github.com/mdn/learning-area/blob/main/html/introduction-to-html/getting-started/index.html). -![Una sencilla página HTML que dice esta es mi página](template-screenshot.png) +Ahora puede abrir este archivo en un navegador web para ver cómo se ve el código renderizado. Edita el código y actualiza el navegador para ver cuál es el resultado. Inicialmente, la página se ve así: -En este ejercicio, puedes editar el código en tu ordenador como se indica arriba, o puedes editarlo en la ventana editable que tienes a continuación (la ventana editable representa solo el contenido del elemento {{htmlelement("body")}}, en este caso). Intenta reproducir los siguientes pasos: +![Una simple página HTML que dice Esta es mi página](template-screenshot.png)En este ejercicio, puedes editar el código localmente en tu ordenador, como se describió anteriormente, o puedes editarlo en la ventana de muestra a continuación (la ventana de muestra editable representa solo el contenido del elemento {{htmlelement("body")}}, en este caso). Mejora tus habilidades implementando las siguientes tareas: -- Justo debajo de la etiqueta de apertura {{htmlelement("body")}}, añade un título principal para el documento. Este deberá estar dentro de una etiqueta de apertura `

` y una etiqueta de cierre `

`. -- Edita el contenido del párrafo e incluye algún texto sobre algo que te interese. -- Pon las palabras importantes dentro de etiquetas `` de apertura y `` de cierre para que destaquen en negrita. -- Añade un enlace a tu párrafo, como se ha explicado [anteriormente en este mismo artículo](#active_learning_adding_attributes_to_an_element). -- Agrega una imagen a tu documento. Colócala debajo del párrafo, como [se explicó anteriormente en el artículo](#empty_elements). Ganarás puntos extra si consigues enlazar a una imagen diferente (de tu propio ordenador o de cualquier otro lugar de la web). +- Justo debajo de la etiqueta de apertura del elemento {{htmlelement("body")}}, añade un título principal para el documento. Esto debe envolverse dentro de una etiqueta `

` de apertura y `

` de cierre. +- Edita el contenido del párrafo para incluir texto sobre un tema que te parezca interesante. +- Haz que las palabras importantes se destaquen en negrita envolviéndolas dentro de una etiqueta `` de apertura y `` de cierre. +- Añade un enlace a tu párrafo, como [se explicó anteriormente en el artículo](#active_learning_adding_attributes_to_an_element). +- Añade una imagen a tu documento. Colócalo debajo del párrafo, como [se explicó anteriormente en el artículo](#void_elements). Gana puntos de bonificación si consigues vincular a una imagen diferente (ya sea localmente en tu ordenador o en algún otro lugar de la web). -Si te equivocas, siempre puedes restablecer el código anterior pulsando el botón _Restablecer_. Si te quedas realmente atascado, pulsa el botón _Mostrar la solución_ para ver la solución. +Si comete un error, siempre puede restablecerlo utilizando el botón _Restablecer_. Si te quedas realmente atascado, pulsa el botón _Mostrar solución_ para ver la respuesta. ```html hidden

Salida en vivo

@@ -564,12 +539,12 @@ Si te equivocas, siempre puedes restablecer el código anterior pulsando el bot

Código editable

- Pulsa Esc para quitar el foco del área de código (Tab inserta un carácter de + Pulse Esc para alejar el foco del área de código (Tab inserta un carácter de tabulación).

@@ -609,18 +584,22 @@ body { ``` ```js hidden -var textarea = document.getElementById("code"); -var reset = document.getElementById("reset"); -var solution = document.getElementById("solution"); -var output = document.querySelector(".output"); -var code = textarea.value; -var userEntry = textarea.value; +const textarea = document.getElementById("code"); +const reset = document.getElementById("reset"); +const solution = document.getElementById("solution"); +const output = document.querySelector(".output"); +const code = textarea.value; +let userEntry = textarea.value; function updateCode() { output.innerHTML = textarea.value; } -reset.addEventListener("click", function () { +const htmlSolution = + '

Algo de música

Disfruto mucho tocando la batería. Uno de mis bateristas favoritos es Neal Peart, que toca en la banda Rush. Mi álbum favorito de Rush es actualmente Moving Pictures.

Rush Moving Pictures album cover'; +let solutionEntry = htmlSolution; + +reset.addEventListener("click", () => { textarea.value = code; userEntry = textarea.value; solutionEntry = htmlSolution; @@ -628,7 +607,7 @@ reset.addEventListener("click", function () { updateCode(); }); -solution.addEventListener("click", function () { +solution.addEventListener("click", () => { if (solution.value === "Mostrar solución") { textarea.value = solutionEntry; solution.value = "Ocultar solución"; @@ -639,17 +618,13 @@ solution.addEventListener("click", function () { updateCode(); }); -var htmlSolution = - '

Un poco de música

Realmente disfruto tocar la batería. Uno de mis bateristas favoritos es Neal Peart, que toca en la banda Rush. Mi álbum favorito de Rush actualmente es Fotografías de la película.

'; -var solutionEntry = htmlSolution; - textarea.addEventListener("input", updateCode); window.addEventListener("load", updateCode); -// captura la tecla de tabulación en el área de texto y en su lugar -// hace que se escriba una tabulación en la posición del cursor +// detener la tabulación de la tecla tabulación fuera del área de texto y +// hacer que escriba una tabulación en la posición del cursor en su lugar -textarea.onkeydown = function (e) { +textarea.onkeydown = (e) => { if (e.keyCode === 9) { e.preventDefault(); insertAtCaret("\t"); @@ -661,27 +636,26 @@ textarea.onkeydown = function (e) { }; function insertAtCaret(text) { - var scrollPos = textarea.scrollTop; - var caretPos = textarea.selectionStart; + const scrollPos = textarea.scrollTop; + let caretPos = textarea.selectionStart; - var front = textarea.value.substring(0, caretPos); - var back = textarea.value.substring( + const front = textarea.value.substring(0, caretPos); + const back = textarea.value.substring( textarea.selectionEnd, textarea.value.length, ); textarea.value = front + text + back; - caretPos = caretPos + text.length; + caretPos += text.length; textarea.selectionStart = caretPos; textarea.selectionEnd = caretPos; textarea.focus(); textarea.scrollTop = scrollPos; } -// Actualiza el userCode guardado cada vez que el usuario actualiza el código del área de texto - -textarea.onkeyup = function () { +// Actualizar el userCode guardado cada vez que el usuario actualice el código de área de texto +textarea.onkeyup = () => { // Solo queremos guardar el estado cuando se muestra el código de usuario, - // no es la solución, por lo que la solución no se guarda sobre el código del usuario + // no la solución, para que la solución no se guarde sobre el código de usuario if (solution.value === "Mostrar solución") { userEntry = textarea.value; } else { @@ -692,78 +666,99 @@ textarea.onkeyup = function () { }; ``` -{{ EmbedLiveSample('Código_reproducible_3', 700, 600, "", "", "hide-codepen-jsfiddle") }} +{{ EmbedLiveSample('Active_learning_Adding_some_features_to_an_HTML_document', 700, 500) }} -### Los espacios en blanco en HTML +### Espacios en blanco en HTML -En los ejemplos anteriores se han incluido espacios en blanco y saltos de línea en el código. Esto realmente no es necesario. Los dos siguientes fragmentos de código son equivalentes: +En los ejemplos anteriores, es posible que hayas notado que se incluyen muchos espacios en blanco en el código. Este paso es opcional. Estos dos fragmentos de código son equivalentes: -```html -

Los perros son tontos.

+```html-nolint +

Los perros son tontos.

-

Los perros son tontos.

+

Los perros + son + tontos.

``` -No importa cuántos espacios en blanco se utilicen (incluye tanto caracteres de espacio como saltos de línea) el intérprete de HTML reduce cada secuencia de espacio en blanco a un único espacio al interpretar el código. Entonces, ¿por qué utilizar espacios en blanco? La respuesta está en la legibilidad. +No importa cuánto espacio en blanco utilice dentro del contenido del elemento HTML (que puede incluir uno o más caracteres de espacio, o también saltos de línea), el analizador HTML reduce cada secuencia de espacio en blanco a un solo espacio al representar el código. Entonces, ¿por qué usar tanto espacio en blanco? La respuesta es la legibilidad. -Es más fácil comprender lo que está sucediendo en tu código si lo tienes bien formateado. En nuestro HTML cada elemento anidado está sangrado dos espacios más con respecto al exterior. Depende de ti qué estilo de formato utilizas (cuántos espacios para cada nivel de sangría, por ejemplo) pero debes plantearte el uso de algún tipo de formato. +Puede ser más fácil entender lo que está pasando en tu código si lo tienes bien formateado. En nuestro HTML tenemos cada elemento anidado indentado por dos espacios más que el que está dentro. Depende de usted elegir el estilo de formato (cuántos espacios para cada nivel de indentación, por ejemplo), pero debe considerar formatearlo. -## Referencias a entidades: Inclusión de caracteres especiales en HTML +Echemos un vistazo a cómo el navegador representa los dos párrafos anteriores con y sin espacios en blanco: -En HTML, los caracteres `<`, `>`,`"`,`'` y `&` son caracteres especiales. Forman parte de la sintaxis HTML. Entonces, ¿cómo incluye uno de estos caracteres especiales en tu texto? Por ejemplo, si deseas utilizar un signo comercial o menor que, y no hacer que se interprete como código. +{{ EmbedLiveSample('Whitespace_in_HTML', 700, 100) }} -Haces esto con referencias de caracteres. Estos son códigos especiales que representan caracteres, para ser usados en estas circunstancias exactas. Cada referencia de caracter comienza con un signo de ampersand (&) y finaliza con un punto y coma (;). +> **Nota:** El acceso a [innerHTML](/es/docs/Web/API/Element/innerHTML) de los elementos de JavaScript mantendrá intacto todo el espacio en blanco. +> Esto puede arrojar resultados inesperados si el navegador recorta el espacio en blanco. -| Caracter literal | Equivalente de referencia de caracteres | -| ---------------- | --------------------------------------- | -| < | \< | -| > | \> | -| " | \" | -| ' | \' | -| & | \& | +```js +const noWhitespace = document.getElementById("noWhitespace").innerHTML; +console.log(noWhitespace); +// "Los perros son tontos". -El equivalente de referencia de caracter podría recordarse fácilmente porque el texto que utiliza se puede ver como menor que para '\<' , cita para ' \" ' y de manera similar para otros. Para obtener más información sobre la referencia de entidad, consulta [Anexo:Referencias a entidades de caracteres XML y HTML](https://es.wikipedia.org/wiki/Anexo:Referencias_a_entidades_de_caracteres_XML_y_HTML) en (Wikipedia). +const whitespace = document.getElementById("whitespace").innerHTML; +console.log(whitespace); +// "Los perros +// son +// tontos." +``` -Considera los dos siguientes párrafos: +## Referencias de entidades: Incluir caracteres especiales en HTML -```html -

En HTML, defines un párrafo con el elemento

-

.

+En HTML, los caracteres `<`, `>`, `"`, `'` y `&` son caracteres especiales. Son partes de la sintaxis HTML en sí. Entonces, ¿cómo incluyes uno de estos caracteres especiales en tu texto? Por ejemplo, si desea usar un signo ampersand (&) o menor que, y no interpretarlo como código. + +Haces esto con referencias de caracteres. Estos son códigos especiales que representan caracteres, para ser utilizados en estas circunstancias exactas. Cada referencia de carácter comienza con un ampersand (&) y termina con un punto y coma (;). + +| Carácter literal | Referencia de carácter equivalente | +| ---------------- | ---------------------------------- | +| < | `<` | +| > | `>` | +| " | `"` | +| ' | `'` | +| & | `&` | -

En HTML, defines un párrafo con el elemento <p>.

+El equivalente de referencia de carácter podría recordarse fácilmente porque el texto que utiliza puede verse como _menor que (less than, en inglés)_ para '\<', _comilla (quot, en inglés)_ para '\"' y de manera similar para otros. Para obtener más información sobre las referencias de entidades, consulta [Lista de referencias de entidades de caracteres XML y HTML](https://en.wikipedia.org/wiki/List_of_XML_and_HTML_character_entity_references) (Wikipedia). + +En el siguiente ejemplo, hay dos párrafos: + +```html-nolint +

En HTML, se define un párrafo utilizando el elemento

.

+ +

En HTML, se define un párrafo utilizando el elemento <p>.

``` -En la salida en vivo de abajo, puedes ver que el primer párrafo salió mal. El navegador interpreta la segunda instancia de `

` como el inicio de un nuevo párrafo. El segundo párrafo se ve bien porque hemos remplazado `<` y `>` por sus referencias correspondientes. +En la salida en vivo a continuación, puede ver que el primer párrafo ha salido mal. El navegador interpreta la segunda instancia de `

` como comenzar un nuevo párrafo. El segundo párrafo se ve bien porque tiene corchetes angulares con referencias de caracteres. -{{ EmbedLiveSample('Referencias_a_entidades_Inclusión_de_caracteres_especiales_en_HTML', 700, 200) }} +{{ EmbedLiveSample('Entity_references_Including_special_characters_in_HTML', 700, 200, "", "") }} -> **Nota:** En la Wikipedia se puede localizar un listado de todas las referencias de entidades de caracteres HTML disponibles: [Anexo:Referencias a entidades de caracteres XML y HTML](https://es.wikipedia.org/wiki/Anexo:Referencias_a_entidades_de_caracteres_XML_y_HTML). Observa que no necesitas usar ninguna referencia de entidad más para ningún otro de estos símbolos porque los navegadores modernos gestionan estos símbolos correctamente siempre y cuando en tu HTML hayas [establecido la codificación de el juego de caracteres universal UTF-8](/es/docs/Learn/HTML/Introduction_to_HTML/The_head_metadata_in_HTML#specifying_your_document's_character_encoding). +> **Nota:** No es necesario usar referencias de entidad para ningún otro símbolo, ya que los navegadores modernos manejarán bien los símbolos reales siempre que la [codificación de caracteres de tu HTML esté configurada en UTF-8](/es/docs/Learn/HTML/Introduction_to_HTML/The_head_metadata_in_HTML#specifying_your_documents_character_encoding). -## Comentarios HTML +## Comentarios en HTML -En HTML hay un mecanismo para escribir comentarios en el código. Los comentarios son ignorados por el navegador y, por tanto, son invisibles para el usuario. El propósito de los comentarios es permitirte incluir notas en el código para explicar tu lógica o codificación. Esto es muy útil si regresas a un código base después de estar ausente el tiempo suficiente como para no recordarlo por completo. Del mismo modo, los comentarios son invaluables ya que diferentes personas están realizando cambios y actualizaciones. +HTML tiene un mecanismo para escribir comentarios en el código. Los navegadores ignoran los comentarios, lo que hace que los comentarios sean invisibles para el usuario. El propósito de los comentarios es permitirle incluir notas en el código para explicar su lógica o codificación. Esto es muy útil si vuelve a una base de código después de estar ausente el tiempo suficiente para no recordarlo por completo. Del mismo modo, los comentarios son invaluables ya que diferentes personas están haciendo cambios y actualizaciones. -Para convertir en un comentario una sección de contenido de tu archivo HTML, debes delimitarlo con los marcadores especiales ``. Por ejemplo: +Para escribir un comentario en HTML, envuélvalo en los marcadores especiales ``. Por ejemplo: ```html -

No soy un comentario

+

No estoy dentro de un comentario

- + ``` -Como puedes ver a continuación, el primer párrafo aparece, pero el segundo no. +Como puede ver a continuación, solo se muestra el primer párrafo en la salida en vivo. -{{ EmbedLiveSample('Comentarios_HTML', 700, 100, "", "", "hide-codepen-jsfiddle") }} +{{ EmbedLiveSample('HTML_comments', 700, 100, "", "") }} ## Resumen -Has llegado al final del artículo. Espero que hayas disfrutado del recorrido los conceptos básicos del HTML. -En este punto ya deberías entender el lenguaje, cómo funciona en un nivel básico y deberías poder escribir algunos elementos y atributos. También deberías poder escribir algunos elementos y atributos. Los artículos posteriores de este módulo profundizan en algunos de los temas aquí presentados, además de presentar otros conceptos del lenguaje. +¡Has llegado al final del artículo! Esperamos que hayas disfrutado de tu recorrido por los conceptos básicos de HTML. + +En este punto, debes entender cómo se ve HTML y cómo funciona a un nivel básico. También deberías poder escribir algunos elementos y atributos. Los artículos posteriores de este módulo profundizan en algunos de los temas introducidos aquí, así como en la presentación de otros conceptos del lenguaje. -> **Nota:** En este punto, a medida que empieces a aprender más sobre HTML, es posible que también desees comenzar a explorar los conceptos básicos de las Hojas de estilo en cascada (_Cascading style sheets_) o [CSS](/es/docs/Learn/CSS). CSS, es el lenguaje utilizado para estilizar páginas web. (por ejemplo, cambiar fuentes o colores, o alterar el diseño de la página) HTML y CSS funcionan bien juntos, como pronto descubrirás. +- A medida que comiences a aprender más sobre HTML, considera aprender los conceptos básicos de CSS (hojas de estilo en cascada). [CSS](/es/docs/Learn/CSS) es el lenguaje utilizado para dar estilo a las páginas web, como cambiar fuentes o colores o alterar el diseño de la página. HTML y CSS funcionan bien juntos, como pronto descubrirás. -## Ve también +## Vease también -- [Aplicación de color a elementos HTML mediante CSS](/es/docs/Web/HTML/Applying_color) +- [Aplicar color a elementos HTML usando CSS](/es/docs/Web/CSS/CSS_colors/Applying_color) {{NextMenu("Learn/HTML/Introduction_to_HTML/The_head_metadata_in_HTML", "Learn/HTML/Introduction_to_HTML")}}