diff options
Diffstat (limited to 'files/es/learn/html/introduction_to_html')
13 files changed, 4067 insertions, 0 deletions
diff --git a/files/es/learn/html/introduction_to_html/advanced_text_formatting/index.html b/files/es/learn/html/introduction_to_html/advanced_text_formatting/index.html new file mode 100644 index 0000000000..49758ede67 --- /dev/null +++ b/files/es/learn/html/introduction_to_html/advanced_text_formatting/index.html @@ -0,0 +1,696 @@ +--- +title: Formateo de texto avanzado +slug: Learn/HTML/Introduction_to_HTML/Advanced_text_formatting +tags: + - CodingScripting + - Guía + - HTML + - Lista de descripción + - Novato + - Principiante + - Texto + - abreviatura + - aprende + - cita + - semántica +translation_of: Learn/HTML/Introduction_to_HTML/Advanced_text_formatting +original_slug: Learn/HTML/Introduccion_a_HTML/Advanced_text_formatting +--- +<div>{{LearnSidebar}}</div> + +<div>{{PreviousMenuNext("Learn/HTML/Introduction_to_HTML/Creating_hyperlinks", "Learn/HTML/Introduction_to_HTML/Document_and_website_structure", "Learn/HTML/Introduction_to_HTML")}}</div> + +<p class="summary">Hay muchos otros elementos en HTML para dar formato al texto, que no expusimos en el artículo {{web.link("/es/docs/Learn/HTML/Introduction_to_HTML/HTML_text_fundamentals", "Fundamentos de texto HTML")}}. Los elementos descritos en este artículo son menos conocidos, pero aún así es muy útil conocerlos (no obstante, no es una lista completa de ninguna manera). Aquí aprenderás cómo marcar citas, listas de descripción, código de computadora y otro texto relacionado, subíndices y superíndices, información de contacto y mucho más.</p> + +<table class="learn-box standard-table"> + <tbody> + <tr> + <th scope="row">Prerrequisitos:</th> + <td>Estar familiarizado con HTML, cubierto en {{web.link("/es/docs/Learn/HTML/Introduction_to_HTML/Getting_started", "Empezar con HTML")}}. Aplicación de formato a texto en documentos HTML, según lo expuesto en la sección {{web.link("/es/docs/Learn/HTML/Introduction_to_HTML/HTML_text_fundamentals", "Fundamentos de texto HTML")}}.</td> + </tr> + <tr> + <th scope="row">Objetivo:</th> + <td>Aprender a utilizar elementos HTML menos conocidos para marcar características semánticas avanzadas.</td> + </tr> + </tbody> +</table> + +<h2 id="Listas_de_descripciones">Listas de descripciones</h2> + +<p>En los fundamentos del texto HTML, explicamos cómo {{web.link("/es/Learn/HTML/Introduction_to_HTML/HTML_text_fundamentals#Lists", "marcar listas básicas")}} en HTML, pero no mencionamos el tercer tipo de lista con la que te encontrarás ocasionalmente: <strong>listas de descripción</strong>. El propósito de estas listas es marcar un conjunto de elementos y sus descripciones asociadas, como términos y definiciones, o preguntas y respuestas. Veamos un ejemplo de un conjunto de términos y definiciones:</p> + +<pre class="brush: bash notranslate">soliloquio +En las obras dramáticas, corresponde a cuando un personaje se habla a sí mismo para representar sus pensamientos o sentimientos internos y, en el proceso, transmitirlos a la audiencia (pero no a otros personajes). +monólogo +En las obras dramáticas, corresponde a cuando un personaje habla de sus pensamientos en voz alta para compartirlos con el público y cualquier otro personaje presente. +aparte +En las obras dramáticas, corresponde a cuando un personaje comparte un comentario solo con la audiencia para dar efecto cómico o dramático. Suele ser un sentimiento, un pensamiento o información adicional.</pre> + +<p>Las listas de descripción utilizan un contenedor diferente al de los otros tipos de listas — {{HTMLElement("dl")}} («<em><b>d</b>escription <b>l</b>ist</em>» o lista de descripciones); además, cada término está envuelto en un elemento {{HTMLElement("dt")}} («<em><b>d</b>escription <b>t</b>erm</em>» o término a describir), y cada descripción está envuelta en un elemento {{HTMLElement("dd")}} («<em><b>d</b>escription <b>d</b>efinition</em>» o definición de descripción). Para redondear esta información veamos un ejemplo:</p> + +<div id="listas-de-descripciones-ejemplo-activo-1"> +<pre class="brush: html notranslate"><dl> + <dt>soliloquio</dt> + <dd>En las obras dramáticas, corresponde a cuando un personaje se habla a sí mismo para representar sus pensamientos o sentimientos internos y, en el proceso, transmitirlos a la audiencia (pero no a otros personajes).</dd> + <dt>monólogo</dt> + <dd>En las obras dramáticas, corresponde a cuando un personaje habla de sus pensamientos en voz alta para compartirlos con el público y cualquier otro personaje presente.</dd> + <dt>aparte</dt> + <dd>En las obras dramáticas, corresponde a cuando un personaje comparte un comentario solo con la audiencia para dar efecto cómico o dramático. Suele ser un sentimiento, un pensamiento o información adicional.</dd> +</dl></pre> +</div> + +<p>Los estilos predeterminados del navegador mostrarán listas de descripciones con las descripciones sangradas un poco más que los términos.</p> + +<p>{{ EmbedLiveSample('listas-de-descripciones-ejemplo-activo-1', '100%', '285px', '', '', 'hide-codepen-jsfiddle') }}</p> + +<p>Ten en cuenta que un solo término puede tener múltiples descripciones, por ejemplo:</p> + +<div id="listas-de-descripciones-ejemplo-activo-2"> +<pre class="brush: html notranslate"><dl> + <dt>aparte</dt> + <dd>En las obras dramáticas, corresponde a cuando un personaje comparte un comentario solo con la audiencia para dar efecto cómico o dramático. Suele ser un sentimiento, un pensamiento o información adicional.</dd> + <dd>Si la obra es impresa, es una sección de contenido que se relaciona con el tema, pero no encaja directamente en el flujo principal de contenido, de modo que se presenta por separado (a menudo en una caja de texto en el margen).</dd> +</dl></pre> +</div> + +<p>{{ EmbedLiveSample('listas-de-descripciones-ejemplo-activo-2', '100%', '193px', '', '', 'hide-codepen-jsfiddle') }}</p> + +<h3 id="Aprendizaje_activo_Marcar_un_conjunto_de_definiciones">Aprendizaje activo: Marcar un conjunto de definiciones</h3> + +<p>Es hora de practicar las listas de descripciones; agrega elementos al texto sin formato en el campo <em>Código editable</em> para que aparezca como una lista de descripción en el campo <em>Salida en vivo</em>. Puedes usar tus propios términos y descripciones si lo deseas.</p> + +<p>Si cometes un error, siempre puedes restablecer el código anterior pulsando el botón <em>Restablecer</em>. Si te quedas realmente encallado, pulsa el botón <em>Mostrar solución</em> para ver una buena propuesta.</p> + +<div class="hidden"> +<h6 id="Código_reproducible">Código reproducible</h6> + +<pre class="brush: html notranslate"><h2>Salida en vivo</h2> + +<div class="output" style="min-height: 50px;"> +</div> + +<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 tabulación).</p> + +<textarea id="code" class="input" style="min-height: 100px; width: 95%"> +Tocino +El pegamento que une al mundo. +Huevos +El pegamento que une el pastel. +Café +La bebida que hace que el mundo funcione por la mañana. +Un color marrón claro.</textarea> + +<div class="playable-buttons"> + <input id="reset" type="button" value="Restablecer"> + <input id="solution" type="button" value="Mostrar solución"> +</div></pre> + +<pre class="brush: css notranslate">html { + font-family: sans-serif; +} + +h2 { + font-size: 16px; +} + +.a11y-label { + margin: 0; + text-align: right; + font-size: 0.7rem; + width: 98%; +} + +body { + margin: 10px; + background: #f5f9fa; +}</pre> + +<pre class="brush: js notranslate">const textarea = document.getElementById('code'); +const reset = document.getElementById('reset'); +const solution = document.getElementById('solution'); +const output = document.querySelector('.output'); +const code = textarea.value; +const userEntry = textarea.value; + +function updateCode() { + output.innerHTML = textarea.value; +} + +reset.addEventListener('click', function() { + textarea.value = code; + userEntry = textarea.value; + solutionEntry = htmlSolution; + solution.value = 'Mostrar solución'; + updateCode(); +}); + +solution.addEventListener('click', function() { + if(solution.value === 'Mostrar solución') { + textarea.value = solutionEntry; + solution.value = 'Ocultar solución'; + } else { + textarea.value = userEntry; + solution.value = 'Mostrar solución'; + } + updateCode(); +}); + +const htmlSolution = '<dl>\n <dt>Tocino</dt>\n <dd>El pegamento que une al mundo.</dd>\n <dt>Huevos</dt>\n <dd>El pegamento que une el pastel.</dd>\n <dt>Café</dt>\n <dd>La bebida que hace que el mundo funcione por la mañana.</dd>\n <dd>Un color marrón claro.</dd>\n</dl>'; +const 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){ + if (e.keyCode === 9) { + e.preventDefault(); + insertAtCaret('\t'); + } + + if (e.keyCode === 27) { + textarea.blur(); + } +}; + +function insertAtCaret(text) { + const scrollPos = textarea.scrollTop; + const caretPos = textarea.selectionStart; + + 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; + 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(){ + // 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 + if(solution.value === 'Mostrar solución') { + userEntry = textarea.value; + } else { + solutionEntry = textarea.value; + } + + updateCode(); +};</pre> +</div> + +<p>{{ EmbedLiveSample('Código_reproducible', 700, 350, "", "", "hide-codepen-jsfiddle") }}</p> + +<h2 id="Citas">Citas</h2> + +<p>HTML también dispone de elementos para el marcado de citas; cual elemento utilices depende de si estás marcando la cita como un bloque o como un elemento en línea.</p> + +<h3 id="Cita_en_bloque_independiente_blockquote">Cita en bloque independiente (<em>blockquote</em>)</h3> + +<p>Si una sección de contenido a nivel de bloque (ya sea un párrafo, varios párrafos, una lista, etc.) se cita en otro lugar, debes envolverla dentro de un elemento {{HTMLElement("blockquote")}} para indicarlo, e incluye una URL que apunte a la fuente de la cita dentro de un atributo {{HTMLAttrxRef("cite", "blockquote")}}. Por ejemplo, el siguiente marcado tomado de la página del elemento <code><blockquote></code> de MDN:</p> + +<pre class="brush: html notranslate"><p>El <strong>elemento HTML <code>&lt;blockquote&gt;</code></strong> (o <em>elemento HTML de cita +en bloque independiente</em>) indica que el texto al que delimita es una cita ampliada.</p></pre> + +<p>Para convertir esto en una cita en bloque independiente, simplemente harías lo siguiente:</p> + +<div id="blockquote-ejemplo-en-vivo"> +<pre class="brush: html notranslate"><p>A continuación se muestra una cita en bloque independiente...</p> +<blockquote cite="https://developer.mozilla.org/es/docs/Web/HTML/Element/blockquote"> + <p>El <strong>elemento HTML <code>&lt;blockquote&gt;</code></strong> (o <em>elemento HTML de cita + en bloque independiente</em>) indica que el texto al que delimita es una cita ampliada.</p> +</blockquote></pre> +</div> + +<p>El estilo predeterminado del navegador lo mostrará como un párrafo con sangría, para indicar que se trata de una cita; el párrafo anterior a la cita sirve para demostrarlo.</p> + +<p>{{EmbedLiveSample('blockquote-ejemplo-en-vivo', '100%', '117px', '', '', 'hide-codepen-jsfiddle')}}</p> + +<h3 id="Citas_en_línea">Citas en línea</h3> + +<p>Las citas en línea funcionan exactamente de la misma manera, excepto que usan el elemento {{HTMLElement("q")}}. Por ejemplo, el siguiente fragmento de marcado contiene una cita <code><q></code> de la página MDN:</p> + +<pre class="brush: html notranslate"><p>El elemento de cita — <code>&lt;q&gt;</code> — se <q cite="https://developer.mozilla.org/en-US/docs/Web/HTML/Element/q">utiliza en +para citas breves que no requieren saltos de párrafo.</q></p></pre> + +<p>El estilo predeterminado del navegador lo representará como texto normal entre comillas para indicar una cita, así:</p> + +<p>{{ EmbedLiveSample('Citas_en_línea', '100%', '78px', '', '', 'hide-codepen-jsfiddle')}}</p> + +<h3 id="Citas_2">Citas</h3> + +<p>El contenido del atributo {{HTMLAttrxRef("cite", "blockquote")}} suena útil, pero desafortunadamente los navegadores, lectores de pantalla, etc. no hacen mucho con él. No hay forma de hacer que el navegador muestre el contenido de <code>cite</code> sin escribir tu propia solución usando JavaScript o CSS. Si deseas que la fuente de la cita esté disponible en la página, lo debes hacer en el texto a través de un enlace o de alguna otra forma apropiada.</p> + +<p>Hay un elemento {{HTMLElement("cite")}}, pero está destinado a contener el título del recurso que se cita, p. ej. el nombre del libro. Sin embargo, no hay razón por la que no puedas vincular el texto dentro de <code><cite></code> a la fuente de la cita de alguna manera:</p> + +<pre class="brush: html notranslate"><p>De acuerdo con <a href="https://developer.mozilla.org/es/docs/Web/HTML/Element/blockquote"> +<cite>página de citas en bloque independiente de MDN</cite></a>: +</p> + +<blockquote cite="https://developer.mozilla.org/es/docs/Web/HTML/Element/blockquote"> + <p>El <strong>elemento HTML <code>&lt;blockquote&gt;</code></strong> (o <em>elemento HTML de cita + en bloque independiente</em>) indica que el texto al que delimita es una cita ampliada.</p> +</blockquote> + +<p>El elemento de cita — <code>&lt;q&gt;</code> — se <q cite="https://developer.mozilla.org/en-US/docs/Web/HTML/Element/q">utiliza en +citas breves que no requieren saltos de párrafo.</q> -- <a href="https://developer.mozilla.org/en-US/docs/Web/HTML/Element/q"> +<cite>página q de MDN</cite></a>.</p></pre> + +<p>Las citas se escriben en cursiva de forma predeterminada.</p> + +<p>{{ EmbedLiveSample('Citas_2', '100%', '179px', '', '', 'hide-codepen-jsfiddle') }}</p> + +<h3 id="Aprendizaje_activo_¿Quién_dijo_eso">Aprendizaje activo: ¿Quién dijo eso?</h3> + +<p>¡Es hora de otro ejemplo de aprendizaje activo! En este ejemplo, nos gustaría que:</p> + +<ol> + <li>Conviertas el párrafo del medio en una cita en bloque independiente, que incluya un atributo <code>cite</code>.</li> + <li>Conviertas "La necesidad de eliminar el diálogo interno negativo" en el tercer párrafo en una cita en línea e incluya un atributo <code>cite</code>.</li> + <li>Envuelvas el título de cada fuente en etiquetas <code><cite></code> y conviertas cada una en un enlace a esa fuente.</li> +</ol> + +<p>Las fuentes de citación que necesitas son:</p> + +<ul> + <li>http://www.brainyquote.com/quotes/authors/c/confucius.html para la citas de Confucio</li> + <li>http://www.affirmationsforpositivethinking.com para "La necesidad de eliminar el diálogo interno negativo".</li> +</ul> + +<p>Si cometes un error, siempre puedes restablecer el código anterior pulsando el botón <em>Restablecer</em>. Si te quedas realmente encallado, pulsa el botón <em>Mostrar solución</em> para ver una buena propuesta.</p> + +<div class="hidden"> +<h6 id="Código_reproducible_2">Código reproducible 2</h6> + +<pre class="brush: html notranslate"><h2>Salida en vivo</h2> + +<div class="output" style="min-height: 50px;"> +</div> + +<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 tabulación).</p> + +<textarea id="code" class="input" style="min-height: 150px; width: 95%"> +<p>Hola y bienvenido a mi página de motivación. Como dice el sitio de citas de Confucio:</p> +<p>No importa qué tan lento vayas siempre que no te detengas.</p> +<p>También me encanta el concepto de pensamiento positivo y La necesidad de eliminar el diálogo interno negativo (como se menciona en Afirmaciones para el pensamiento positivo).</p> +</textarea> + +<div class="playable-buttons"> + <input id="reset" type="button" value="Restablecer"> + <input id="solution" type="button" value="Mostrar solución"> +</div></pre> + +<pre class="brush: css notranslate">html { + font-family: sans-serif; +} + +h2 { + font-size: 16px; +} + +.a11y-label { + margin: 0; + text-align: right; + font-size: 0.7rem; + width: 98%; +} + +body { + margin: 10px; + background: #f5f9fa; +}</pre> + +<pre class="brush: js notranslate">const textarea = document.getElementById('code'); +const reset = document.getElementById('reset'); +const solution = document.getElementById('solution'); +const output = document.querySelector('.output'); +const code = textarea.value; +const userEntry = textarea.value; + +function updateCode() { + output.innerHTML = textarea.value; +} + +reset.addEventListener('click', function() { + textarea.value = code; + userEntry = textarea.value; + solutionEntry = htmlSolution; + solution.value = 'Mostrar solución'; + updateCode(); +}); + +solution.addEventListener('click', function() { + if(solution.value === 'Mostrar solución') { + textarea.value = solutionEntry; + solution.value = 'Ocultar solución'; + } else { + textarea.value = userEntry; + solution.value = 'Mostrar solución'; + } + updateCode(); +}); + +const htmlSolution = '<p>Hola y bienvenido a mi página de motivación. Como dice <a href="http://www.brainyquote.com/quotes/authors/c/confucius.html"><cite>el sitio de citas de Confucio:</cite></a>:</p>\n\n<blockquote cite="http://www.brainyquote.com/quotes/authors/c/confucius.html">\n<p>No importa qué tan lento vayas siempre que no te detengas.</p>\n</blockquote>\n\n<p>También me encanta el concepto de pensamiento positivo y <q cite="http://www.affirmationsforpositivethinking.com">La necesidad de eliminar el diálogo interno negativo</q> (como se menciona en <a href="http://www.affirmationsforpositivethinking.com"><cite>Afirmaciones para el pensamiento positivo</cite></a>).</p>'; +const 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){ + if (e.keyCode === 9) { + e.preventDefault(); + insertAtCaret('\t'); + } + + if (e.keyCode === 27) { + textarea.blur(); + } +}; + +function insertAtCaret(text) { + const scrollPos = textarea.scrollTop; + const caretPos = textarea.selectionStart; + + 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; + 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(){ + // 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 + if(solution.value === 'Mostrar solución') { + userEntry = textarea.value; + } else { + solutionEntry = textarea.value; + } + + updateCode(); +};</pre> +</div> + +<p>{{ EmbedLiveSample('Código_reproducible_2', 700, 450, "", "", "hide-codepen-jsfiddle") }}</p> + +<h2 id="Abreviaturas">Abreviaturas</h2> + +<p>Otro elemento bastante común que encontrarás cuando busques en la Web es {{HTMLElement("abbr")}} — se usa para envolver una abreviatura o acrónimo, y proporcionar una expansión completa del término (incluida dentro de un atributo {{HTMLAttrxRef("title")}}. Veamos un par de ejemplos:</p> + +<div id="ejemplo-de-abreviaturas-en-vivo"> +<pre class="brush: html notranslate"><p>Usamos <abbr title="Lenguaje de marcado de hipertexto">HTML</abbr> para estructurar nuestros documentos web.</p> + +<p>Creo que el <abbr title="Reverendo"">Rev.</abbr> Green lo hizo en la cocina con la motosierra.</p></pre> +</div> + +<p>Estos saldrán con un aspecto similar a este (la expansión aparecerá en una descripción emergente cuando se coloque el cursor sobre el término):</p> + +<p>{{EmbedLiveSample('ejemplo-de-abreviaturas-en-vivo', '100%', '94px', '', '', 'hide-codepen-jsfiddle')}}</p> + +<div class="note"> +<p><strong>Nota</strong>: Hay otro elemento, {{HTMLElement("acronym")}}, que básicamente hace lo mismo que <code><abbr></code>, y se diseñó específicamente para acrónimos en lugar de las abreviaturas. Sin embargo, este ha caído en desuso — no era compatible con los navegadores ni con <code><abbr></code>, y <code><abbr></code> tiene una función tan similar que se consideró inútil conservar ambos. Solo utiliza <code><abbr></code>.</p> +</div> + +<h3 id="Aprendizaje_activo_Marcar_una_abreviatura">Aprendizaje activo: Marcar una abreviatura</h3> + +<p>Para esta simple tarea de aprendizaje activo, nos gustaría que simplemente marcaras una abreviatura. Puedes usar el ejemplo que encontrarás a continuación o reemplazarla por una de tu elección. </p> + +<div class="hidden"> +<h6 id="Código_reproducible_3">Código reproducible</h6> + +<pre class="brush: html notranslate"><h2>Salida en vivo</h2> + +<div class="output" style="min-height: 50px;"> +</div> + +<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 tabulación).</p> + +<textarea id="code" class="input" style="min-height: 50px; width: 95%"> +<p>La NASA sin duda hace un interesante trabajo.</p> +</textarea> + +<div class="playable-buttons"> + <input id="reset" type="button" value="Restablecer"> + <input id="solution" type="button" value="Mostrar solución"> +</div></pre> + +<pre class="brush: css notranslate">html { + font-family: sans-serif; +} + +h2 { + font-size: 16px; +} + +.a11y-label { + margin: 0; + text-align: right; + font-size: 0.7rem; + width: 98%; +} + +body { + margin: 10px; + background: #f5f9fa; +}</pre> + +<pre class="brush: js notranslate">const textarea = document.getElementById('code'); +const reset = document.getElementById('reset'); +const solution = document.getElementById('solution'); +const output = document.querySelector('.output'); +const code = textarea.value; +const userEntry = textarea.value; + +function updateCode() { + output.innerHTML = textarea.value; +} + +reset.addEventListener('click', function() { + textarea.value = code; + userEntry = textarea.value; + solutionEntry = htmlSolution; + solution.value = 'Mostrar solución'; + updateCode(); +}); + +solution.addEventListener('click', function() { + if(solution.value === 'Mostrar solución') { + textarea.value = solutionEntry; + solution.value = 'Ocultar solución'; + } else { + textarea.value = userEntry; + solution.value = 'Mostrar solución'; + } + updateCode(); +}); + +const htmlSolution = '<p>La <abbr title="Administración Nacional de Aeronáutica y del Espacio">NASA</abbr> sin duda hace un interesante trabajo.</p>'; +const 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){ + if (e.keyCode === 9) { + e.preventDefault(); + insertAtCaret('\t'); + } + + if (e.keyCode === 27) { + textarea.blur(); + } +}; + +function insertAtCaret(text) { + const scrollPos = textarea.scrollTop; + const caretPos = textarea.selectionStart; + + 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; + 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(){ + // 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 + if(solution.value === 'Mostrar solución') { + userEntry = textarea.value; + } else { + solutionEntry = textarea.value; + } + + updateCode(); +};</pre> +</div> + +<p>{{ EmbedLiveSample('Código_reproducible_3', 700, 300, "", "", "hide-codepen-jsfiddle") }}</p> + +<h2 id="Marcar_la_información_de_contacto">Marcar la información de contacto</h2> + +<p>HTML tiene un elemento para marcar la información de contacto — {{HTMLElement("address")}}. Este simplemente envuelve tus datos de contacto, por ejemplo:</p> + +<pre class="brush: html notranslate"><address> + <p>Chris Mills, Manchester, The Grim North, Reino Unido</p> +</address></pre> + +<p>También podrías incluir un marcado más complejo y otras formas de información de contacto, por ejemplo:</p> + +<pre class="brush: html notranslate"><address> + <p> + Chris Mills<br> + Manchester<br> + The Grim North<br> + Reino Unido + </p> + + <ul> + <li>Tel: 01234 567 890</li> + <li>Email: me@grim-north.co.uk</li> + </ul> +</address></pre> + +<p>Ten en cuenta que algo como esto también estaría bien, si la página vinculada contuviera la información de contacto:</p> + +<pre class="brush: html notranslate"><address> + <p>Página escrita por <a href="../authors/chris-mills/">Chris Mills</a>.</p> +</address></pre> + +<h2 id="Superíndice_y_subíndice">Superíndice y subíndice</h2> + +<p>En ocasiones, necesitarás utilizar superíndice y subíndice al marcar elementos como fechas, fórmulas químicas y ecuaciones matemáticas para que tengan el significado correcto. Los elementos {{HTMLElement("sup")}} y {{HTMLElement("sub")}} se ocupan de ello. Por ejemplo:</p> + +<pre class="brush: html notranslate"><p>Nací el 25<sup>th</sup> de mayo de 2001.</p> +<p>La fórmula química de la cafeína es C<sub>8</sub>H<sub>10</sub>N<sub>4</sub>O<sub>2</sub>.</p> +<p>If x<sup>2</sup> es 9, x debe ser igual 3 o -3.</p></pre> + +<p>La salida de este código se ve así:</p> + +<p>{{ EmbedLiveSample('Superíndice_y_subíndice', '100%', '141px', '', '', 'hide-codepen-jsfiddle') }}</p> + +<h2 id="Representación_del_código_informático">Representación del código informático</h2> + +<p>Hay una serie de elementos disponibles para marcar código informático usando HTML:</p> + +<ul> + <li>{{HTMLElement("code")}}: Para marcar fragmentos genéricos de código informático.</li> + <li>{{HTMLElement("pre")}}: Para respetar los espacios en blanco (en general, en los bloques de código) — si utilizas la sangría o diversos espacios en blanco consecutivos dentro de un texto, los navegadores los ignorarán y no se mostrarán en la página. Sin embargo, si delimitas el texto con las etiquetas <code><pre></pre></code>, los espacios en blanco se representarán de forma idéntica a como se ven en tu editor de texto.</li> + <li>{{HTMLElement("var")}}: Para marcar específicamente nombres de variables.</li> + <li>{{HTMLElement("kbd")}}: Para marcar entradas de teclado (y de otro tipo) en el ordenador.</li> + <li>{{HTMLElement("samp")}}: Para marcar la salida de un programa de ordenador.</li> +</ul> + +<p>Veamos algunos ejemplos. Deberías intentar jugar con estos (intenta obtener una copia de nuestro archivo de ejemplo <a href="https://github.com/mdn/learning-area/blob/master/html/introduction-to-html/advanced-text-formatting/other-semantics.html">other-semantics.html</a>):</p> + +<pre class="brush: html notranslate"><pre><code>var para = document.querySelector('p'); + +para.onclick = function() { + alert('¡Guau!, ¡deja de apretar!'); +}</code></pre> + +<p>No debes utilizar elementos de presentación como <code>&lt;font&gt;</code> y <code>&lt;center&gt;</code>.</p> + +<p>En el ejemplo de JavaScript anterior, <var>para</var> representa un elemento de párrafo.</p> + + +<p>Selecciona todo el texto con <kbd>Ctrl</kbd>/<kbd>Cmd</kbd> + <kbd>A</kbd>.</p> + +<pre>$ <kbd>ping mozilla.org</kbd> +<samp>PING mozilla.org (63.245.215.20): 56 bytes de datos +64 bytes de 63.245.215.20: icmp_seq=0 ttl=40 time=158.233 ms</samp></pre></pre> + +<p>El código anterior se verá así:</p> + +<p>{{ EmbedLiveSample('Representación_del_código_informático','100%',300, "", "", "hide-codepen-jsfiddle") }}</p> + +<h2 id="Marcar_horas_y_fechas">Marcar horas y fechas</h2> + +<p>HTML también proporciona el elemento {{HTMLElement("time")}} para marcar horas y fechas en un formato legible por la máquina. Por ejemplo:</p> + +<pre class="brush: html notranslate"><time datetime="2016-01-20">20 Enero 2016</time> +</pre> + +<p>¿Por qué es útil esto? Bueno, hay muchas formas diferentes en que los humanos escriben las fechas. La fecha anterior se podría escribir como:</p> + +<ul> + <li>20 Enero 2016</li> + <li>20th January 2016</li> + <li>Ene 20 2016</li> + <li>20/01/16</li> + <li>01/20/16</li> + <li>El 20 del mes que viene</li> + <li><span lang="fr">20e Janvier 2016</span></li> + <li><span lang="ja">2016年1月20日</span></li> + <li>... y así sucesivamente ...</li> +</ul> + +<p>Pero estas diferentes formas no las pueden reconocer fácilmente las computadoras — ¿qué pasaría si quisieras tomar automáticamente las fechas de todos los eventos en una página e insertarlas en un calendario? El elemento {{HTMLElement("time")}} te permite adjuntar una fecha/hora inequívoca y legible por la máquina para este propósito.</p> + +<p>El ejemplo básico anterior solo proporciona una fecha simple legible por la máquina, pero hay muchas otras opciones que son posibles, por ejemplo:</p> + +<pre class="brush: html notranslate"><!-- Fecha simple estándar --> +<time datetime="2016-01-20">20 Enero 2016</time> +<!-- Solo año y mes --> +<time datetime="2016-01">Enero 2016</time> +<!-- Solo mes y día --> +<time datetime="01-20">20 Enero 2016</time> +<!-- Solo tiempo, horas y minutos --> +<time datetime="19:30">19:30</time> +<!-- ¡También puedes hacer segundos y milisegundos! --> +<time datetime="19:30:01.856">19:30:01.856</time> +<!-- Fecha y hora --> +<time datetime="2016-01-20T19:30">7.30pm, 20 Enero 2016</time> +<!-- Fecha y hora con desplazamiento de zona horaria --> +<time datetime="2016-01-20T19:30+01:00">7.30pm, 20 Enero 2016 es 8.30pm en Francia</time> +<!-- Llamar a un número de semana específico --> +<time datetime="2016-W04">La cuarta semana de 2016</time> +</pre> + +<h2 id="¡Pon_a_prueba_tus_habilidades!">¡Pon a prueba tus habilidades!</h2> + +<p>Has llegado al final de este artículo, pero ¿puedes recordar la información más importante? Puedes encontrar más pruebas para verificar que has retenido esta información antes de continuar; consulta {{web.link("/es/docs/Learn/HTML/Introduction_to_HTML/Test_your_skills:_Advanced_HTML_text", "Pon a prueba tus habilidades: Texto HTML avanzado")}}.</p> + +<h2 id="Resumen">Resumen</h2> + +<p>Esto marca el final de nuestro estudio de la semántica del texto HTML. Ten en cuenta que lo que has visto durante este curso no es una lista exhaustiva de elementos de texto HTML — quisimos tratar de cubrir los aspectos esenciales y algunos de los más comunes que verás en la naturaleza, o al menos podrían resultarte interesantes. Para encontrar muchos más elementos HTML, puedes echarle un vistazo a nuestra {{web.link("/es/docs/Web/HTML/Element", "referencia de elementos HTML")}} (la {{web.link("/es/docs/Web/HTML/Element#Inline_text_semantics", "La sección Semántica de texto en línea")}} sería un gran lugar para comenzar). En el próximo artículo veremos los elementos HTML que usarás para estructurar las diferentes partes de un documento HTML.</p> + +<p>{{PreviousMenuNext("Learn/HTML/Introduction_to_HTML/Creating_hyperlinks", "Learn/HTML/Introduction_to_HTML/Document_and_website_structure", "Learn/HTML/Introduction_to_HTML")}}</p> + +<h2 id="En_este_módulo">En este módulo</h2> + +<ul> + <li>{{web.link("/es/docs/Learn/HTML/Introduction_to_HTML/Getting_started", "Empezar con HTML")}}</li> + <li>{{web.link("/es/docs/Learn/HTML/Introduction_to_HTML/The_head_metadata_in_HTML", "¿Qué hay en el «head»? Metadatos en HTML")}}</li> + <li>{{web.link("/es/docs/Learn/HTML/Introduction_to_HTML/HTML_text_fundamentals", "Fundamentos de texto HTML")}}</li> + <li>{{web.link("/es/docs/Learn/HTML/Introduction_to_HTML/Creating_hyperlinks", "Crear hipervínculos")}}</li> + <li>{{web.link("/es/docs/Learn/HTML/Introduction_to_HTML/Advanced_text_formatting", "Formateo de texto avanzado")}}</li> + <li>{{web.link("/es/docs/Learn/HTML/Introduction_to_HTML/Document_and_website_structure", "Estructura web y documentación")}}</li> + <li>{{web.link("/es/docs/Learn/HTML/Introduction_to_HTML/Debugging_HTML", "Depurar HTML")}}</li> + <li>{{web.link("/es/docs/Learn/HTML/Introduction_to_HTML/Marking_up_a_letter", "Marcado para una carta")}}</li> + <li>{{web.link("/es/docs/Learn/HTML/Introduction_to_HTML/Structuring_a_page_of_content", "Estructuración del contenido de una página")}}</li> +</ul> diff --git a/files/es/learn/html/introduction_to_html/creating_hyperlinks/index.html b/files/es/learn/html/introduction_to_html/creating_hyperlinks/index.html new file mode 100644 index 0000000000..6a1307c5e5 --- /dev/null +++ b/files/es/learn/html/introduction_to_html/creating_hyperlinks/index.html @@ -0,0 +1,347 @@ +--- +title: Crear hipervínculos +slug: Learn/HTML/Introduction_to_HTML/Creating_hyperlinks +tags: + - Aprender + - CodingScripting + - Guía + - HTML + - HTTP + - Novato + - Principiante + - Title + - URL + - enlace + - hiperenlaces + - hipervínculos + - href + - referencia absoluta + - referencia relativa + - título + - urls +translation_of: Learn/HTML/Introduction_to_HTML/Creating_hyperlinks +original_slug: Learn/HTML/Introduccion_a_HTML/Creating_hyperlinks +--- +<div>{{LearnSidebar}}</div> + +<div>{{PreviousMenuNext("Learn/HTML/Introduction_to_HTML/HTML_text_fundamentals", "Learn/HTML/Introduction_to_HTML/Advanced_text_formatting", "Learn/HTML/Introduction_to_HTML")}}</div> + +<p class="summary">Los hipervínculos (o enlaces) son elementos verdaderamente importantes — son los que hacen que la web sea <em><strong>web</strong></em>. Este artículo expone la sintaxis necesaria para crear un enlace, además contiene un catálogo de buenas prácticas para crearlos.</p> + +<table class="learn-box standard-table"> + <tbody> + <tr> + <th scope="row">Prerrequisitos:</th> + <td>Estar familiarizado con HTML, cubierto en {{web.link("/es/docs/Learn/HTML/Introduction_to_HTML/Getting_started", "Empezar con HTML")}}. Aplicación de formato a texto en documentos HTML, según lo expuesto en la sección {{web.link("/es/docs/Learn/HTML/Introduction_to_HTML/HTML_text_fundamentals", "fundamentos de texto HTML")}}.</td> + </tr> + <tr> + <th scope="row">Objetivo:</th> + <td>Aprender a implementar un <em>hipervínculo</em> de forma efectiva y enlazar múltiples archivos.</td> + </tr> + </tbody> +</table> + +<h2 id="¿Qué_es_un_hipervínculo">¿Qué es un hipervínculo?</h2> + +<p>Los hipervínculos son una de las innovaciones más interesantes que ofrece la Web. Han formado parte de esta desde el principio, pero hacen que la web sea <em>web </em>: Los hipervínculos nos permiten vincular documentos a otros documentos o recursos, vincular a partes específicas de documentos o hacer que las aplicaciones estén disponibles en una dirección web. Prácticamente cualquier contenido web se puede convertir en un enlace que, al pulsarlo (activarlo), dirija el navegador a la dirección web a la que apunta el enlace ({{Glossary("URL")}}).</p> + +<div class="note"> +<p><strong>Nota</strong>: Una URL puede apuntar a archivos HTML, archivos de texto, imágenes, documentos de texto, archivos de audio o vídeo, y cualquier otra cosa que se pueda mostrar en la web. Si el navegador no sabe cómo manejar el archivo, te preguntará si lo quieres abrir (en cuyo caso la tarea de abrirlo y manejarlo se transferirá a la aplicación nativa instalada en el dispositivo) o si lo quieres descargar (en cuyo caso podrás ocuparte de él más tarde).</p> +</div> + +<p>El sitio web de la BBC, por ejemplo, contiene una gran cantidad de enlaces que apuntan a multitud de noticias en diferentes zonas de el sitio (funcionalidad de navegación), zonas de acceso/registro (herramientas de usuario) y otras.</p> + +<p><img alt="Portada de bbc.co.uk, que muestra muchas noticias y la funcionalidad del menú de navegación" src="https://mdn.mozillademos.org/files/12405/bbc-homepage.png" style="display: block; margin: 0 auto;"></p> + +<h2 id="Anatomía_de_un_enlace">Anatomía de un enlace</h2> + +<p>Un enlace básico se crea incluyendo el texto (o cualquier otro contenido, ve {{anch("Convertir bloques de contenido en enlaces")}}), que queramos convertir en un enlace usando un elemento ancla {{HTMLElement("a")}}, dándole un atributo {{HTMLAttrxRef("href", "a")}} (también conocido como «<strong><em>Hypertext Reference</em></strong>», «<strong><em>target</em></strong>» u <strong>objetivo</strong>) que contendrá la dirección web hacia dónde queremos que apunte el enlace.</p> + +<pre class="brush: html notranslate"><p>Crea un enlace a +<a href="https://www.mozilla.org/es-ES/">la página de inicio de Mozilla</a>. +</p></pre> + +<p>Este código producirá el siguiente resultado:</p> + +<p>Crea un enlace a <a class="ignore-external" href="https://www.mozilla.org/es-ES/">la página de inicio de Mozilla</a>.</p> + +<h3 id="Añadir_información_de_asistencia_con_el_atributo_title">Añadir información de asistencia con el atributo <code>title</code></h3> + +<p>Otro atributo que posiblemente quieras agregar a tus enlaces es <code>title</code>. El título contiene información adicional sobre el enlace, como qué tipo de información contiene la página o cosas que debes tener en cuenta en el sitio web.</p> + +<pre class="brush: html notranslate"><p>Crea un enlace a +<a href="https://www.mozilla.org/es-ES/" + title="El mejor lugar para encontrar más información acerca de la misión de Mozilla + y cómo contribuir">la página de inicio de Mozilla</a>. +</p></pre> + +<p>Este código producirá el siguiente resultado (el título se mostrará al pasar el ratón sobre el texto del enlace):</p> + +<p>Crea un enlace a <a class="ignore-external" href="https://www.mozilla.org/es-ES/" title="El mejor lugar para encontrar más información sobre la misión de Mozilla y cómo contribuir">la página de inicio de Mozilla</a>.</p> + +<div class="note"> +<p><strong>Nota</strong>: El título de un enlace solo será visible al pasar el ratón por encima, lo cual significa que los usuarios que naveguen usando los controles de sus teclados, o pantallas táctiles, tendrán dificultades para acceder a la información proporcionada por el título. Si la información del título es verdaderamente importante para el uso de la página, deberemos presentar el título de manera que sea accesible a todos los usuarios, por ejemplo incluyéndola como parte del texto del enlace.</p> +</div> + +<h3 id="Aprendizaje_activo_crea_tu_propio_ejemplo_de_enlace">Aprendizaje activo: crea tu propio ejemplo de enlace</h3> + +<p>Es momento del aprendizaje activo — crea un documento HTML con tu editor de código (nuestra <a href="https://github.com/mdn/learning-area/blob/master/html/introduction-to-html/getting-started/index.html">plantilla de aprendizaje</a> te hará la tarea más llevadera).</p> + +<ul> + <li>En el cuerpo del HTML (<code>body</code>), añade uno o más párrafos o cualquier otro tipo de contenido de los que ya conoces.</li> + <li>Convierte algún texto en enlaces.</li> + <li>Incluye atributos de título (<code>title</code>).</li> +</ul> + +<h3 id="Convertir_bloques_de_contenido_en_enlaces">Convertir bloques de contenido en enlaces</h3> + +<p>Como hemos mencionado anteriormente, puedes convertir cualquier contenido en un enlace, incluso {{web.link("/es/docs/Learn/HTML/Getting_started#Elementos_de_bloque_y_elementos_en_línea", "Elementos de bloque y elementos en línea")}}. Si quieres convertir una imagen en un enlace, simplemente usa el elemento {{HTMLElement("a")}} encerrando el elemento {{HTMLElement("img")}} entre <code><a></code> y <code></a></code>.</p> + +<pre class="brush: html notranslate"><a href="https://www.mozilla.org/es-ES/"> + <img src="mozilla-image.png" alt="Logotipo de Mozilla que dirige a la página inicial de Mozilla"> +</a></pre> + +<div class="note"> +<p><strong>Nota</strong>: Encontrarás mucho más sobre el manejo de imágenes en próximos artículos en esta web.</p> +</div> + +<h2 id="Primer_acercamiento_a_URLs_y_rutas">Primer acercamiento a URLs y rutas</h2> + +<p>Para comprender completamente a dónde apuntan los enlaces, necesitas conocer las URLs y las rutas. En esta sección encontrarás la información que necesitas sobre el tema.</p> + +<p>Una localizadora uniforme de recursos (URL, de las iniciales en inglés de «<em>Uniform Resource Locator</em>») es simplemente una secuencia de caracteres de texto que definen donde está situado algo en la web. Por ejemplo, la página de Mozilla está ubicada en <code>https://www.mozilla.org/es-ES/</code>.</p> + +<p>Las URLs utilizan rutas para encontrar los archivos. Las rutas especifican dónde se encuentra el archivo que buscas dentro del sistema de archivos. Veamos un ejemplo de una estructura de directorios (ve el directorio <a href="https://github.com/mdn/learning-area/tree/master/html/introduction-to-html/creating-hyperlinks">creating-hyperlinks</a>).</p> + +<p><img alt="Una estructura de directorios simple. El directorio principal se llama creating-hyperlinks y contiene dos archivos llamados index.html y contacts.html, y dos directorios llamados projects y pdfs, que contiene un archivo index.html y un archivo project-brief.pdf, respectivamente" src="https://mdn.mozillademos.org/files/12409/simple-directory.png" style="display: block; margin: 0 auto;"></p> + +<p>Al directorio <strong>raíz</strong> de esta estructura de directorios lo hemos llamado <code>creating-hyperlinks</code>. Al trabajar en modo local en una web, habrá un directorio que contendrá toda la información. En nuestro ejemplo, dentro de la raíz, encontramos el archivo <code>index.html</code> y el archivo <code>contacts.html</code>. En una web real, <code>index.html</code> es el punto de entrada a la web, lo que se conoce como <em>página de inicio</em>.</p> + +<p>Observamos también dos directorios dentro de nuestro directorio raíz que son: <code>pdfs</code> y <code>projects</code>. Cada uno de ellos tiene archivos en su interior — un archivo PDF (<code>project-brief.pdf</code>) y un archivo <code>index.html</code>, respectivamente. Observa que es posible tener sin problemas dos archivos <code>index.html</code> en un proyecto siempre y cuando se encuentren alojados en ubicaciones diferentes de nuestra estructura de archivos — muchos sitios web lo hacen. El segundo <code>index.html</code> será la página de inicio para la información relativa a los proyectos.</p> + +<ul> + <li> + <p><strong>En el mismo directorio</strong>: Si queremos incluir un hipervínculo dentro del archivo <code>index.html</code> (el <code>index.html</code> del nivel más alto) que apunte al archivo <code>contacts.html</code>, simplemente especificaremos el nombre del archivo al que hacemos referencia, porque se encuentra en el mismo directorio en el que se encuentra el archivo <code>index.html</code> desde donde lo queremos llamar. Por lo tanto, usamos la URL <code>contacts.html</code> — veamos el código:</p> + + <pre class="brush: html notranslate"><p>¿Quieres contactar con un miembro específico del personal? +Encuentra los detalles en nuestra <a href="contacts.html">página de contactos</a>.</p></pre> + </li> + <li> + <p><strong>Bajando por la estructura de subdirectorios</strong>: Si queremos incluir un hipervínculo dentro del archivo <code>index.html</code> (el <code>index.html</code> de nivel más alto) que apunta a <code>projects/index.html</code>, debemos bajar hasta el directorio <code>projects</code> antes de indicar al archivo al que queremos enlazar. Para ello especificamos el nombre del directorio y le añadimos una barra inclinada hacia adelante, y a continuación el nombre del archivo. Por lo tanto, utilizaremos la URL <code>projects/index.html</code>:</p> + + <pre class="brush: html notranslate"><p>Visita mi <a href="projects/index.html">página de inicio del proyecto</a>.</p></pre> + </li> + <li> + <p><strong>Subiendo por nuestro sistema de directorios</strong>: Si ahora queremos incluir un hipervínculo dentro del archivo <code>projects/index.html</code> que apunte a <code>pdfs/project-brief.pdf</code>, hay que subir un nivel en nuestro sistema de directorios, para luego bajar al directorio <code>pdf</code>. Para «Subir un nivel» utilizamos los dos puntos — (<code>..</code>) — por lo que usamos la URL <code>../pdfs/project-brief.pdf</code>:</p> + + <pre class="brush: html notranslate"><p>Un enlace a mi<a href="../pdfs/project-brief.pdf">resumen del proyecto</a>.</p></pre> + </li> +</ul> + +<div class="note"> +<p><strong>Nota</strong>: Podemos combinar más de una instancia de estas características y generar URLs más complejas, si es necesario, por ejemplo: <code>../../../ruta/compleja/a/mi/archivo.html</code>.</p> +</div> + +<h3 id="Fragmentos_de_documento">Fragmentos de documento</h3> + +<p>Es posible apuntar hacia una parte concreta de un documento HTML en vez de a todo un documento. Para ello hay que asignar previamente un atributo {{HTMLAttrxRef("id")}} al elemento hacia el que apuntamos. Esto se debe hacer en el encabezado y quedará así:</p> + +<pre class="brush: html notranslate"><h2 id="Dirección_de_envío">Dirección de envío</h2></pre> + +<p>Posteriormente para hacer referencia a este <code>id</code> concreto, lo añadiremos al final de la URL precedido por una almohadilla — veamos el ejemplo:</p> + +<pre class="brush: html notranslate"><p>¿Quieres mandarnos una carta? Aquí tienes nuestra <a href="contacts.html#Dirección_de_envío">Dirección de envío</a>.</p></pre> + +<p>También podemos usar esta referencia a un fragmento de documento para apuntar hacia otra <em>parte del mismo documento</em>:</p> + +<pre class="brush: html notranslate"><p>La <a href="#Dirección_de_envío">Dirección de envío de la empresa</a> se encuentra al final de esta página.</p></pre> + +<h3 id="URLs_absolutas_y_relativas">URLs absolutas y relativas</h3> + +<p>Dos términos que encontrarás en la Web son <strong>URL absoluta</strong> y <strong>URL relativa:</strong></p> + +<p><strong>URL absoluta</strong>: Hace referencia a una dirección definida por su ubicación absoluta en la web, esta incluye el {{Glossary("protocol", "protocolo")}} y el {{Glossary("domain name", "nombre del dominio")}}. Por ejemplo, si subes una página de inicio <code>index.html</code> a un directorio llamado <code>projects</code> que se encuentra dentro de la raíz de un servidor web, y el dominio del sitio web es <code>http://www.example.com</code>, se podrá acceder a la página desde <code>http://www.example.com/projects/index.html</code> (o simplemente <code>http://www.example.com/projects/</code>, ya que la mayoría de los servidores web buscan la página de inicio <code>index.html</code> para cargarla por omisión si no se les especifica otra en la URL).</p> + +<p>Una URL absoluta siempre apuntará a la misma dirección, sin importar desde dónde se utilice.</p> + +<p>Una <strong>URL relativa</strong>: Hace referencia a una dirección que depende de la posición del archivo desde donde se utiliza — son las que vimos en la sección anterior. Por ejemplo, si desde un archivo ubicado en <code>http://www.example.com/projects/index.html</code> queremos enlazar hacia un archivo PDF ubicado en el mismo directorio, la URL sería simplemente el nombre del archivo (por ejemplo: <code>project-brief.pdf</code>) no necesitamos más información. Si el archivo PDF está situado en un subdirectorio dentro de <code>projects</code> llamado <code>pdfs</code>, la URL relativa es: <code>pdfs/project-brief.pdf</code> (la URL absoluta equivalente sería: <code>http://www.example.com/projects/pdfs/project-brief.pdf</code>).</p> + +<p>Una URL relativa hará referencia a diferentes direcciones según dónde se encuentre el archivo desde el cual se utiliza — por ejemplo, si movemos nuestro archivo <code>index.html</code> del directorio <code>projects</code> a la raíz del sitio web (el nivel más alto, no cualquiera de los otros directorios), la URL relativa <code>pdfs/project-brief.pdf</code> ahora hará referencia a <code>http://www.example.com/pdfs/project-brief.pdf</code>, en lugar de a <code>http://www.example.com/projects/pdfs/project-brief.pdf</code>.</p> + +<p>Por supuesto, la ubicación del archivo <code>pdfs/project-brief.pdf</code> y del directorio <code>pdfs</code> no cambian de repente cuando mueves el archivo <code>index.html</code>; esto hará que tus enlaces apunten a un sitio equivocado y no funcionarán correctamente al hacer clic en ellos. ¡Por lo tanto debes tener cuidado!</p> + +<h2 id="Buenas_prácticas_en_el_uso_de_los_enlaces">Buenas prácticas en el uso de los enlaces</h2> + +<p>Hay algunas buenas prácticas que debemos respetar cuando escribimos enlaces. Veamos cuáles son.</p> + +<ul> +</ul> + +<h3 id="Redacción_clara_del_enlace">Redacción clara del enlace</h3> + +<p>Es fácil rellenar de enlaces una página, sin más. Pero esto no basta. Hay que lograr que nuestros enlaces sean <em>accesibles</em> para todo tipo de lectores, sin importar el contexto o las herramientas que prefieran. Por ejemplo:</p> + +<ul> + <li>Los usuarios de lectores de pantalla suelen saltar de enlace a enlace en la página y los leen todos sin contexto.</li> + <li>Los motores de búsqueda utilizan el texto de los enlaces para indizar los archivos buscados, por lo que es una buena idea incluir palabras clave al definir el texto de los enlaces para describir de forma efectiva el sitio al que apuntan.</li> + <li>Los usuarios visuales suelen echar un vistazo rápido a la página y leen solo lo que les interesa, en lugar de leer todo el texto palabra por palabra, y sus miradas van directamente a las características destacadas de la página, como son los enlaces. Este tipo de usuarios encuentra útiles los textos descriptivos que estos contienen.</li> +</ul> + +<p>Veamos un ejemplo concreto:</p> + +<p><em><strong>Buen</strong> texto en un enlace</em>: <a href="https://firefox.com">Descargar Firefox</a></p> + +<pre class="brush: html notranslate"><p><a href="https://firefox.com/"> + Descargar Firefox +</a></p></pre> + +<p><em><strong>Mal</strong> texto en un enlace</em>: <a href="https://firefox.com/">Pulsar aquí</a> para descargar Firefox</p> + +<pre class="brush: html notranslate"><p><a href="https://firefox.com/"> + Haz clic aquí +</a> +para descargar Firefox</p> +</pre> + +<p>Otras indicaciones:</p> + +<ul> + <li>No repetir la URL como parte del texto — Las URLs suenan horrible, y todavía suenan peor si las lee un lector de pantalla, letra por letra.</li> + <li>No escribir «<em>link</em>» o «<em>link a</em>» o «enlace» o «enlace a» en el texto del enlace porque es redundante. Los lectores automáticos indican que hay un enlace al encontrarlo. Los usuarios también saben que hay un enlace, porque normalmente se suele cambiar el color del texto y se subraya (no hay que romper esta convención, porque los usuarios están acostumbrados a ella).</li> + <li>Redacta la etiqueta del enlace de la manera más breve y concisa posible — los textos de enlace largos son especialmente molestos para los usuarios que utilizan lectores automáticos, porque tienen que escuchar todo el texto del enlace.</li> + <li>Minimiza los casos en los que varias copias del mismo texto están vinculadas a diferentes lugares. Esto puede causar problemas a los usuarios de lectores de pantalla, si hay una lista de enlaces fuera de contexto que están etiquetados como "haz clic aquí", "haz clic aquí", "haz clic aquí".</li> +</ul> + +<h3 id="Utiliza_enlaces_relativos_siempre_que_sea_posible">Utiliza enlaces relativos siempre que sea posible</h3> + +<p>A partir de las indicaciones anteriores podemos llegar a pensar que es mejor utilizar referencias absolutas en todos los casos; después de todo, estas no se rompen cuando la página se traslada como ocurre con las referencias relativas. Sin embargo, debes utilizar enlaces relativos siempre que sea posible cuando enlaces a otras ubicaciones dentro del <em>mismo sitio web</em>. Cuando vinculas a otro sitio web, deberás utilizar un vínculo absoluto.</p> + +<ul> + <li>Primero, porque el código es mucho más fácil de leer — las URLs relativas suelen ser mucho más cortas que las absolutas, lo que hace que el código sea mucho más fácil de leer.</li> + <li>Segundo, resulta más eficiente utilizar URLs relativas cuando sea posible. Cuando usas una URL absoluta, el navegador comienza buscando la ubicación real del servidor en el Sistema de nombres de dominio ({{Glossary("DNS")}}), consulta {{web.link("/es/docs/Learn/Getting_started_with_the_web/How_the_Web_works", "Cómo funciona la web")}} para obtener más información). Entonces va a ese servidor y busca el archivo solicitado. En cambio, con una URL relativa, el navegador simplemente busca el archivo solicitado en el mismo servidor. Si usas URLs absolutas donde las URLs relativas lo harían, constantemente estás haciendo que tu navegador haga un trabajo adicional, lo cual significa que funcionará de manera menos eficiente.</li> +</ul> + +<h3 id="Indica_claramente_los_recursos_no_HTML">Indica claramente los recursos no HTML</h3> + +<p>Cuando damos referencias a recursos para descargarlos (como documentos en formato PDF o Word) o para reproducirlos (como archivos de audio o vídeo) o que tengan un efecto inesperado (una ventana emergente) hay que indicarlo para no confundir al usuario.</p> + +<p>Por ejemplo:</p> + +<ul> + <li>Si tienes una conexión con poco ancho de banda, pulsas un enlace y comienza a descargar un archivo pesado de forma inesperada.</li> + <li>Si no tienes instalado el reproductor Flash, pulsas un enlace y te conduce a una página que requiere Flash.</li> +</ul> + +<p>Veamos algunos ejemplos, para ver qué texto puede ser aconsejable en estos casos:</p> + +<pre class="brush: html notranslate"><p><a href="http://www.example.com/large-report.pdf"> + Descarga el informe de ventas (PDF, 10MB) +</a></p> + +<p><a href="http://www.example.com/video-stream/"> + Reproduce el vídeo (el flujo de datos se abre en una pestaña independiente, calidad HD) +</a></p> + +<p><a href="http://www.example.com/car-game"> + Juega al juego del automóvil (requiere Flash) +</a></p></pre> + +<h3 id="Utiliza_el_atributo_download_al_enlazar_una_descarga">Utiliza el atributo <code>download</code> al enlazar una descarga</h3> + +<p>Si queremos hacer referencia a una descarga en lugar de a algo que abra el navegador, disponemos del atributo <code>download</code> para proporcionar un nombre predeterminado al archivo a guardar. Veamos un ejemplo con un enlace a la descarga de la versión para Windows de Firefox:</p> + +<pre class="brush: html notranslate"><a href="https://download.mozilla.org/?product=firefox-latest-ssl&os=win64&lang=es-MX" + download="firefox-latest-64bit-installer.exe"> + Descarga la última versión de Firefox para Windows (64 bits) (Español, es-MX) +</a></pre> + +<h2 id="Aprendizaje_activo_crear_un_menú_de_navegación">Aprendizaje activo: crear un menú de navegación</h2> + +<p>Para este ejercicio, deberás crear lo que se conoce como <em>web multipágina</em>: un menú de navegación con enlaces a distintas páginas. Esta es una manera común de crear páginas web — usamos la misma estructura en todas las páginas, incluida la que contiene el menú de navegación. Cuando los usuarios pulsen los enlaces tendrán la sensación de que están en la misma página y que solo cambia el contenido mostrado.</p> + +<p>Tendrás que hacer copias locales, en el mismo directorio, de las cuatro siguientes páginas (revisa el directorio <a href="https://github.com/mdn/learning-area/tree/master/html/introduction-to-html/navigation-menu-start">navigation-menu-start</a> para el listado completo):</p> + +<ul> + <li><a href="https://github.com/mdn/learning-area/blob/master/html/introduction-to-html/navigation-menu-start/index.html">index.html</a></li> + <li><a href="https://github.com/mdn/learning-area/blob/master/html/introduction-to-html/navigation-menu-start/projects.html">projects.html</a></li> + <li><a href="https://github.com/mdn/learning-area/blob/master/html/introduction-to-html/navigation-menu-start/pictures.html">pictures.html</a></li> + <li><a href="https://github.com/mdn/learning-area/blob/master/html/introduction-to-html/navigation-menu-start/social.html">social.html</a></li> +</ul> + +<p>A continuación:</p> + +<ol> + <li>Añade una lista no ordenada en el lugar adecuado de la página, que contenga los nombres de las páginas a las que enlazas. Un menú de navegación normalmente es una lista de enlaces (<em>links</em>), por lo que esto es semánticamente correcto.</li> + <li>Convierte cada nombre en un enlace a esa página.</li> + <li>Copia el menú de navegación en cada una de las páginas.</li> + <li>En cada página, elimina solo el enlace que hace referencia a sí mismo (es confuso y no tiene sentido que una página se llame a sí misma, y la falta del enlace actúa como recordatorio de la página en la que se está en cada momento).</li> +</ol> + +<p>El ejercicio terminado debería crear una página como la siguiente:</p> + +<p><img alt="Un ejemplo de un menú de navegación HTML simple, con inicio, imágenes, proyectos y elementos del menú social" src="https://mdn.mozillademos.org/files/12411/navigation-example.png" style="display: block; margin: 0 auto;"></p> + +<div class="note"> +<p><strong>Nota</strong>: Si ahora encallas, o no estás seguro de haberlo conseguido, revisa el directorio <a href="https://github.com/mdn/learning-area/tree/master/html/introduction-to-html/navigation-menu-marked-up">navigation-menu-marked-up</a> para ver la respuesta correcta.</p> +</div> + +<h2 id="Enlace_a_correo_electrónico">Enlace a correo electrónico</h2> + +<p>Es posible crear enlaces o botones que, cuando se pulsan, abren un nuevo correo saliente en lugar de enlazar a un recurso o página. Esto se consigue con el elemento ancla {{HTMLElement("a")}} y el elemento <code>mailto:</code> seguido del esquema de la URL.</p> + +<p>En su forma más básica, un enlace <code>mailto:</code> simplemente contiene la dirección de correo electrónico de los destinatarios. Por ejemplo:</p> + +<pre class="brush: html notranslate"><a href="mailto:nowhere@mozilla.org">Enviar correo electrónico a ninguna parte</a> +</pre> + +<p>Esto da como resultado un enlace que se ve así: <a href="mailto:nowhere@mozilla.org"> Enviar correo electrónico a ninguna parte</a>.</p> + +<p>De hecho, incluso el atributo con la dirección de correo electrónico es opcional. Si lo omites y tu ({{HTMLAttrxRef("href", "a")}} simplemente es "mailto:", aparecerá una nueva ventana de correo saliente en el gestor de correo sin la dirección del destinatario. Esto es útil cuando queremos compartir enlaces que los usuarios puedan pulsar para enviar un correo electrónico y elegir un destinatario posteriormente.</p> + +<h3 id="Especificar_detalles">Especificar detalles</h3> + +<p>Además de la dirección de correo electrónico, puedes proporcionar otra información. De hecho, puedes incluir cualquier campo estándar contenido en el encabezado de cualquier mensaje en la URL <code>mailto</code> que proporciones. Los más utilizados son el «<code>subject</code>» (asunto), «<code>cc</code>» (con copia a) o «<code>bcc</code>» (copia oculta), y «<code>body</code>» (cuerpo del mensaje, que no es realmente un campo de la cabecera, pero permite especificar un mensaje breve para el nuevo correo electrónico). Cada campo y su valor se especifican como un argumento de la consulta.</p> + +<p>Veamos un ejemplo que incluye estos campos:</p> + +<pre class="brush: html notranslate"><a href="mailto:nowhere@mozilla.org?cc=name2@rapidtables.com&bcc=name3@rapidtables.com&subject=The%20subject%20of%20the%20email&body=The%20body%20of%20the%20email"> + Enviar un correo electrónico cc, bcc, asunto y cuerpo +</a></pre> + +<div class="note"> +<p><strong>Nota</strong>: Los valores de cada campo deben tener la URL codificada, es decir, sin caracteres no imprimibles (caracteres invisibles, tabulaciones, retornos de carro y saltos de página) y espacios con codificación porcentual (%20) {{Interwiki("wikipedia", "Código porciento")}}. También hay que tener en cuenta el uso del signo de interrogación (?) para separar la URL principal de los valores de los campos, y el símbolo ampersand (&) para separar cada campo dentro del enlace <code>mailto:</code>. Esta es la notación de consulta URL estándar. Lee {{web.link("/es/docs/Learn/HTML/Forms/Sending_and_retrieving_form_data#The_GET_method", "el método GET")}} para comprender mejor qué notación de consulta URL se usa comúnmente.</p> +</div> + +<p>A continuación otros ejemplos de utilización de enlaces <code>mailto</code>:</p> + +<ul> + <li><a href="mailto:">mailto:</a></li> + <li><a href="mailto:nowhere@mozilla.org">mailto:nowhere@mozilla.org</a></li> + <li><a href="mailto:nowhere@mozilla.org,nobody@mozilla.org">mailto:nowhere@mozilla.org,nobody@mozilla.org</a></li> + <li><a href="mailto:nowhere@mozilla.org?cc=nobody@mozilla.org">mailto:nowhere@mozilla.org?cc=nobody@mozilla.org</a></li> + <li><a href="mailto:nowhere@mozilla.org?cc=nobody@mozilla.org&subject=This%20is%20the%20subject">mailto:nowhere@mozilla.org?cc=nobody@mozilla.org&subject=This%20is%20the%20subject</a></li> +</ul> + +<h2 id="¡Pon_a_prueba_tus_habilidades!">¡Pon a prueba tus habilidades!</h2> + +<p>Has llegado al final de este artículo, pero ¿puedes recordar la información más importante? Encuentra más ejercicios con los que comprobar que has retenido esta información antes de seguir adelante; consulta {{web.link("/es/docs/Learn/HTML/Introduction_to_HTML/Test_your_skills:_Links", "Pon a prueba tus habilidades: Enlaces")}}.</p> + +<h2 id="Resumen">Resumen</h2> + +<p>Eso es todo en cuanto a enlaces, ¡por ahora! Volveremos a ellos más tarde en este curso cuando comencemos a usar estilos. Lo siguiente en HTML, será aprender la semántica de texto para usar algunas características avanzadas/inusuales que nos serán utilidad — Formato de texto avanzado será la próxima parada.</p> + +<p>{{PreviousMenuNext("Learn/HTML/Introduction_to_HTML/HTML_text_fundamentals", "Learn/HTML/Introduction_to_HTML/Advanced_text_formatting", "Learn/HTML/Introduction_to_HTML")}}</p> + +<h2 id="En_este_módulo">En este módulo</h2> + +<ul> + <li>{{web.link("/es/docs/Learn/HTML/Introduction_to_HTML/Getting_started", "Empezar con HTML")}}</li> + <li>{{web.link("/es/docs/Learn/HTML/Introduction_to_HTML/The_head_metadata_in_HTML", "¿Qué hay en el «head»? Metadatos en HTML")}}</li> + <li>{{web.link("/es/docs/Learn/HTML/Introduction_to_HTML/HTML_text_fundamentals", "Fundamentos de texto HTML")}}</li> + <li>{{web.link("/es/docs/Learn/HTML/Introduction_to_HTML/Creating_hyperlinks", "Crear hipervínculos")}}</li> + <li>{{web.link("/es/docs/Learn/HTML/Introduction_to_HTML/Advanced_text_formatting", "Formateo de texto avanzado")}}</li> + <li>{{web.link("/es/docs/Learn/HTML/Introduction_to_HTML/Document_and_website_structure", "Estructura web y documentación")}}</li> + <li>{{web.link("/es/docs/Learn/HTML/Introduction_to_HTML/Debugging_HTML", "Depurar HTML")}}</li> + <li>{{web.link("/es/docs/Learn/HTML/Introduction_to_HTML/Marking_up_a_letter", "Marcado para una carta")}}</li> + <li>{{web.link("/es/docs/Learn/HTML/Introduction_to_HTML/Structuring_a_page_of_content", "Estructuración del contenido de una página")}}</li> +</ul> diff --git a/files/es/learn/html/introduction_to_html/debugging_html/index.html b/files/es/learn/html/introduction_to_html/debugging_html/index.html new file mode 100644 index 0000000000..d647a6db17 --- /dev/null +++ b/files/es/learn/html/introduction_to_html/debugging_html/index.html @@ -0,0 +1,172 @@ +--- +title: Depurar el HTML +slug: Learn/HTML/Introduction_to_HTML/Debugging_HTML +tags: + - Error + - Guía + - HTML + - Principiante + - Validación + - Validador + - depurar + - programar +translation_of: Learn/HTML/Introduction_to_HTML/Debugging_HTML +original_slug: Learn/HTML/Introduccion_a_HTML/Debugging_HTML +--- +<div>{{LearnSidebar}}</div> + +<div>{{PreviousMenuNext("Learn/HTML/Introduction_to_HTML/Document_and_website_structure", "Learn/HTML/Introduction_to_HTML/Marking_up_a_letter", "Learn/HTML/Introduction_to_HTML")}}</div> + +<p class="summary">Escribir HTML es fácil, pero ¿qué pasa si algo va mal y desconocemos dónde está el error de codificación? En este artículo veremos varias herramientas que nos ayudarán a arreglar errores en HTML.</p> + +<table class="learn-box standard-table"> + <tbody> + <tr> + <th scope="row">Prerrequisitos:</th> + <td>Estar familiarizado con los principios básicos de HTML, como los vistos en el apartado <a href="/es/docs/Learn/HTML/Introduccion_a_HTML/iniciar">Empezar con el HTML</a>, <a href="/es/docs/Learn/HTML/Introduccion_a_HTML/texto">Conocimientos básicos de aplicación de formato a textos con HTML</a> y <a href="/es/docs/Learn/HTML/Introduccion_a_HTML/Creating_hyperlinks">Creación de hiperenlaces</a>.</td> + </tr> + <tr> + <th scope="row">Objetivo:</th> + <td>Aprender el funcionamiento básico de las herramientas de depuración de problemas de código en HTML.</td> + </tr> + </tbody> +</table> + +<h2 id="Depurar_no_debe_asustarnos">Depurar no debe asustarnos</h2> + +<p>Cuando escribimos cualquier tipo de código, normalmente todo va bien, hasta ese fatídico momento en el que ocurre un error, hemos hecho algo mal y el código no funciona, o no funciona del todo, no lo suficientemente bien. Por ejemplo, el dibujo siguiente muestra un error de {{glossary("compile","compilación")}} de un programa sencillo escrito en lenguaje <a href="https://www.rust-lang.org/">Rust</a>.</p> + +<p><img alt="A console window showing the result of trying to compile a rust program with a missing quote around a string in a print statement. The error message reported is error: unterminated double quote string." src="https://mdn.mozillademos.org/files/12435/error-message.png" style="display: block; height: 520px; margin: 0px auto; width: 711px;">En el ejemplo, el mensaje de error es fácilmente comprensible: "unterminated double quote string" (comillas sin cerrar en el texto). Si analizamos el listado de código, observamos que en <code>println!(Hello, world!");</code> faltan una comillas. Pero, los mensajes de error pueden complicarse con facilidad y su interpretación ser menos sencilla a medida que los programas aumentan en tamaño, e incluso casos sencillo pueden llegar a intimidar a alguien que no sabe nada de Rust.</p> + +<p>Sin embargo, la depuración no nos debe asustar; la clave para sentirnos cómodos con la escritura y la depuración de cualquier lenguaje o código es la familiaridad, tanto con el lenguaje como con las herramientas.</p> + +<h2 id="HTML_y_depuración">HTML y depuración</h2> + +<p>HTML no es tan complicado de entender como Rust; HTML no se compila por separado antes de que el navegador lo analice (se interpreta, no se compila). Y la sintaxis de los {{glossary("element","elementos")}} de HTML es mucho más sencilla de entender que la de cualquier lenguaje de programación real como Rust, {{glossary("JavaScript")}} o {{glossary("Python")}}. La forma en que los navegadores ejecutan HTML es más <strong>permisiva</strong> que la de los otros lenguajes, cosa que es buena y mala a la vez.</p> + +<h3 id="Código_permisivo">Código permisivo</h3> + +<p>¿Qué queremos decir con <em>permisivo</em>? Bien, normalmente cuando hacemos algo mal al codificar, suele haber dos tipos de error:</p> + +<ul> + <li><strong>Errores sintácticos</strong>: Son errores de escritura en el código que impiden que el programa funcione, como el error en Rust de arriba. Suelen ser fáciles de arreglar si estamos familiarizados con las herramientas adecuadas y sabemos el significado de los mensajes de error.</li> + <li><strong>Errores lógicos</strong>: En estos errores la sintaxis es correcta, pero el código no hace lo que debería, por lo que el programa funciona de forma incorrecta. Estos errores son, por lo general, más difíciles de solucionar que los sintácticos, porque no hay mensajes de error que nos avisen de ellos.</li> +</ul> + +<p>HTML en sí mismo no suele producir errores sintácticos porque los navegadores son permisivos con ellos; o sea, el código se sigue ejecutando ¡aun si hay errores! Los navegadores disponen de reglas internas para saber cómo interpretar los errores de marcado incorrecto que encuentran, y seguirán funcionando aunque no produzcan el resultado esperado. Esto puede también ser un problema, por supuesto.</p> + +<div class="note"> +<p><strong>Nota</strong>: La ejecución de HTML es permisiva porque cuando se creó la web por primera vez, se decidió que el hecho de permitir que la gente publicara su contenido era más importante que el hecho de que la sintaxis fuera totalmente correcta. La web no sería tan popular como lo es hoy en día si se hubiera sido más estricto desde el primer momento.</p> +</div> + +<h3 id="Aprendizaje_activo_Estudio_del_código_permisivo">Aprendizaje activo: Estudio del código permisivo</h3> + +<p>Es hora de estudiar la naturaleza permisiva del código HTML por nosotros mismos.</p> + +<ol> + <li>En primer lugar, hagamos una copia de nuestro <a href="https://github.com/mdn/learning-area/blob/master/html/introduction-to-html/debugging-html/debug-example.html">ejemplo-demo a depurar</a> y guardémoslo de forma local. Está escrito para generar diversos errores que deberemos descubrir (se dice que el marcado de HTML está <strong>mal formado</strong>, en contraposición a un marcado <strong>bien formado</strong>).</li> + <li>A continuación, abrámoslo en un navegador; veremos lo siguiente:<img alt="A simple HTML document with a title of HTML debugging examples, and some information about common HTML errors, such as unclosed elements, badly nested elements, and unclosed attributes. " src="https://mdn.mozillademos.org/files/12437/badly-formed-html.png" style="display: block; margin: 0 auto;"></li> + <li>No parece que esté bien; veamos el código fuente para ver qué podemos hacer (solo mostramos el contenido del <body>): + <pre class="brush: html notranslate"><h1>HTML debugging examples</h1> + +<p>What causes errors in HTML? + +<ul> + <li>Unclosed elements: If an element is <strong>not closed properly, + then its effect can spread to areas you didn't intend + + <li>Badly nested elements: Nesting elements properly is also very important + for code behaving correctly. <strong>strong <em>strong emphasised?</strong> + what is this?</em> + + <li>Unclosed attributes: Another common source of HTML problems. Let's + look at an example: <a href="https://www.mozilla.org/>link to Mozilla + homepage</a> +</ul></pre> + </li> + <li>Veamos qué problemas podemos descubrir: + <ul> + <li>El elemento {{htmlelement("p")}} y el {{htmlelement("li")}} no tienen etiquetas de cierre. Si comprobamos el resultado, no parece que haya generado un efecto grave en la representación del lenguaje de marcado, porque es fácil deducir que donde un elemento acaba, debería comenzar otro.</li> + <li>El primer elemento {{htmlelement("strong")}} no tiene etiqueta de cierre. Este resulta ser un poco más problemático porque no es fácil deducir dónde se supone que termina el elemento. De hecho, el énfasis fuerte se ha aplicado al resto del texto.</li> + <li>Esta sección está mal anidada: <code><strong>strong <em>strong emphasised?</strong> what is this?</em></code>. No es fácil de explicar la forma en que ha sido interpretado, debido al problema anterior.</li> + <li>Al valor del atributo {{htmlattrxref("href","a")}} le faltan las comillas de cierre. Esto parece haber causado el problema más grave: el enlace ha desaparecido totalmente.</li> + </ul> + </li> + <li>Ahora veamos lo que el navegador ha mostrado en contraposición al código fuente. Para ello podemos usar las herramientas de desarrollo del navegador. Si no estamos familiarizados con el uso de estas herramientas, echemos un vistazo rápido a <a href="/es/docs/Learn/Common_questions/What_are_browser_developer_tools">Descubrir las herramientas de desarrollo del navegador</a>, y luego continuaremos.</li> + <li>En el inspector de objetos (DOM), puedes comprobar la apariencia de cada elemento: <img alt="The HTML inspector in Firefox, with our example's paragraph highlighted, showing the text "What causes errors in HTML?" Here you can see that the paragraph element has been closed by the browser." src="https://mdn.mozillademos.org/files/12439/html-inspector.png" style="display: block; margin: 0 auto;"></li> + <li>Vamos a explorar nuestro código en detalle con el inspector de objetos DOM para ver cómo el navegador ha arreglado nuestros errores de código HTML (lo hemos hecho con Firefox; otros navegadores modernos deberían conducir al mismo resultado): + <ul> + <li>Se han añadido etiquetas de cierre a los párrafos y las líneas de las listas.</li> + <li>Al no estar claro el final del elemento <code><strong></code>, el navegador lo ha aplicado individualmente a todos los bloques de texto siguientes, a cada uno le ha añadido su etiqueta <code>strong</code> propia, desde donde está ¡hasta el final del documento!</li> + <li>El navegador ha arreglado el anidamiento incorrecto del modo siguiente: + <pre class="brush: html notranslate"><strong>strong + <em>strong emphasised?</em> +</strong> +<em> what is this?</em></pre> + </li> + <li>El enlace a cuyo atributo le faltan las comillas del final ha sido ignorado. La última lista la ha dejado como sigue: + <pre class="brush: html notranslate"><li> + <strong>Unclosed attributes: Another common source of HTML problems. + Let's look at an example: </strong> +</li></pre> + </li> + </ul> + </li> +</ol> + +<h3 id="Validación_HTML">Validación HTML</h3> + +<p>Con el ejemplo anterior podemos asegurarnos de que nuestro HTML está bien formado, pero ¿cómo? En el ejemplo siguiente podemos comprobar que es bastante fácil buscar entre las líneas y encontrar los errores en documentos pequeños; pero, ¿qué pasa cuando trabajamos con documentos HTML grandes y complejos?</p> + +<p>La mejor estrategia es comenzar por pasar tu página HTML por el <a href="https://validator.w3.org/">servicio de validación de etiquetas</a>; fue creado y está mantenido por el W3C, organización que se encarga de definir las especificaciones de HTML, CSS y otras tecnologías web. Esta página web toma un documento HTML como entrada, lo procesa, y genera un informe de dónde están los errores en el documento.</p> + +<p><img alt="The HTML validator homepage" src="https://mdn.mozillademos.org/files/12441/validator.png" style="display: block; margin: 0 auto;"></p> + +<p>Para validar el HTML, podemos proporcionar al validador una dirección web a la que apuntar, subirle un archivo HTML, o directamente introducirle el código HTML que queremos que revise.</p> + +<h3 id="Aprendizaje_activo_Validación_de_un_documento_HTML">Aprendizaje activo: Validación de un documento HTML</h3> + +<p align="left">Vamos a probar de validar nuestro <a href="https://github.com/mdn/learning-area/blob/master/html/introduction-to-html/debugging-html/debug-example.html">documento ejemplo</a>.</p> + +<ol> + <li>Primero, cargamos el <a href="https://validator.w3.org/">servicio de validación</a> en una pestaña del navegador, si no lo tenemos ya.</li> + <li>Hacemos clic en la subpestaña <a href="https://validator.w3.org/#validate_by_input">Validate by Direct Input</a>.</li> + <li>Copiamos el código del documento ejemplo (no solo el <code>body</code>) y lo pegamos en el cuadro de texto grande.</li> + <li>Hacemos clic en el botón <em>Check</em>.</li> +</ol> + +<p>Esto debería proporcionar una lista de errores y otras informaciones:</p> + +<p><img alt="A list of of HTML validation results from the W3C markup validation service" src="https://mdn.mozillademos.org/files/12443/validation-results.png" style="display: block; margin: 0 auto;"></p> + +<h4 id="Interpretación_de_los_mensajes_de_error">Interpretación de los mensajes de error</h4> + +<p>La lista de mensajes de error que nos presenta el validador suele ayudar, pero a veces, no resultan muy útiles; con un poco de práctica aprenderemos a interpretar la lista para arreglar nuestro código. Veamos los mensajes de error y su significado. Observamos que cada mensaje se presenta con un número de línea y de columna, para ayudar a localizar el error más fácilmente.</p> + +<ul> + <li>"<span>Consider adding a </span><code>lang</code><span> attribute to the </span><code>html</code><span> start tag to declare the language of this document.": No se trata de un error, sino de una advertencia (warning). La <a class="external external-icon" href="https://www.w3.org/International/questions/qa-html-language-declarations" rel="noopener">recomendación</a> es definir siempre un idioma, y este "warning" explica cómo hacerlo..</span></li> + <li>"End tag <code>li</code> implied, but there were open elements" (2 instancias): Estos mensajes indican que un elemento que ha sido abierto debe ser cerrado. La etiqueta de cierre se supone, pero no está ahí. La información de la línea/columna apunta a la primera línea después de donde debería estar la etiqueta de cierre; es una buena pista para ver qué pasa.</li> + <li>"Unclosed element <code>strong</code>": Un elemento {{htmlelement("strong")}} no ha sido cerrado, y la línea/columna apunta directamente al lugar del error.</li> + <li>"End tag <code>strong</code> violates nesting rules": Este apunta a elementos que están incorrectamente anidados, y la línea/columna nos indica donde están.</li> + <li>"End of file reached when inside an attribute value. Ignoring tag": Esta es bastante enigmática; se refiere al hecho de que el valor de un atributo no ha sido bien construido, posiblemente cerca del final del archivo porque el final aparece dentro del valor del atributo. El hecho de que el navegador no muestre el enlace nos debería dar una buena pista de qué elemento es el erróneo.</li> + <li>"End of file seen and there were open elements": Este es un poco ambiguo, pero básicamente se refiere al hecho de que hay elementos abiertos que necesitan ser cerrados adecuadamente. Los números de línea apuntan a las últimas líneas del archivo, y este mensaje de error viene con una línea de código que indica un ejemplo de un elemento abierto: + <pre class="notranslate">example: <a href="https://www.mozilla.org/>link to Mozilla homepage</a> ↩ </ul>↩ </body>↩</html></pre> + + <div class="note"> + <p><strong>Nota</strong>: Un atributo al que le falten las comillas de cierre puede ser un elemento abierto, porque el resto del documento será interpretado como si fuera parte de este atributo.</p> + </div> + </li> + <li>Unclosed element <code>ul</code>: Este no ayuda mucho, porque el elemento {{htmlelement("ul")}} está cerrado correctamente. Este error se debe a que el elemento {{htmlelement("a")}} no ha sido cerrado, ya que faltan las comillas de cierre.</li> +</ul> + +<p><span>No debemos preocuparnos si no podemos corregir todos los mensajes de error; es práctico tratar de arreglar unos pocos errores cada vez y volver a pasar el validador para ver los que quedan. A veces, al arreglar unos cuantos se arreglan automáticamente otros muchos; con frecuencia muchos errores los causa uno solo en un efecto dominó.</span></p> + +<p><span>Sabremos que todos los errores están arreglados cuando veamos el mensaje siguiente: </span></p> + +<p><img alt='Banner that reads "The document validates according to the specified schema(s) and to additional constraints checked by the validator."' src="https://mdn.mozillademos.org/files/12445/valid-html-banner.png" style="display: block; margin: 0 auto;"></p> + +<h2 id="Resumen">Resumen</h2> + +<p>Pues hasta aquí una introducción al depurado de HTML, que nos proporcionará habilidades para cuando comencemos a depurar CSS, JavaScript y otros lenguajes más adelante en nuestros trabajos. Este apartado también constituye el final de la introducción al módulo de artículos de aprendizaje de HTML; ahora podemos hacer los test de prueba: el primero de los cuales está en el enlace siguiente.</p> + +<p>{{PreviousMenuNext("Learn/HTML/Introduction_to_HTML/Document_and_website_structure", "Learn/HTML/Introduction_to_HTML/Marking_up_a_letter", "Learn/HTML/Introduction_to_HTML")}}</p> diff --git a/files/es/learn/html/introduction_to_html/document_and_website_structure/index.html b/files/es/learn/html/introduction_to_html/document_and_website_structure/index.html new file mode 100644 index 0000000000..14d5394700 --- /dev/null +++ b/files/es/learn/html/introduction_to_html/document_and_website_structure/index.html @@ -0,0 +1,299 @@ +--- +title: Estructura web y documentación +slug: Learn/HTML/Introduction_to_HTML/Document_and_website_structure +tags: + - CodingScripting + - Composición + - Diseño + - Formato + - Guía + - HTML + - Presentación + - Principiante + - Sitio + - Sitio Web + - bloques + - pagina + - programar + - semántica +translation_of: Learn/HTML/Introduction_to_HTML/Document_and_website_structure +original_slug: Learn/HTML/Introduccion_a_HTML/estructura +--- +<div>{{LearnSidebar}}</div> + +<div>{{PreviousMenuNext("Learn/HTML/Introduction_to_HTML/Advanced_text_formatting", "Learn/HTML/Introduction_to_HTML/Debugging_HTML", "Learn/HTML/Introduction_to_HTML")}}</div> + +<p class="summary">Además de definir partes individuales de tu página (como un párrafo o una imagen), {{Glossary("HTML")}} también dispone de elementos de bloque que se pueden utilizar para estructurar las distintas áreas de tu sito web (tal como el encabezado, el menú de navegación o la parte del contenido principal. En este artículo veras cómo planificar una estructura básica de página web y escribirás el HTML que representa esa estructura.</p> + +<table class="learn-box standard-table"> + <tbody> + <tr> + <th scope="row">Prerrequisitos:</th> + <td>Estar familiarizado con HTML, cubierto en {{web.link("/es/docs/Learn/HTML/Introduction_to_HTML/Getting_started", "Empezar con HTML")}}. Aplicación de formato a texto en documentos HTML, según lo expuesto en la sección {{web.link("/es/docs/Learn/HTML/Introduction_to_HTML/HTML_text_fundamentals", "Fundamentos de texto HTML")}}. Funcionamiento de los hipervínculos, cubierto en {{web.link("/es/docs/Learn/HTML/Introduction_to_HTML/Creating_hyperlinks", "Crear hipervínculos")}}.</td> + </tr> + <tr> + <th scope="row">Objetivo:</th> + <td>Aprender a estructurar tu documento usando atributos semánticos y construir la estructura de una página web sencilla.</td> + </tr> + </tbody> +</table> + +<h2 id="Partes_básicas_de_un_documento">Partes básicas de un documento</h2> + +<p>Las páginas web pueden y se deben diferenciar las unas de las otras, pero todas tienden a contener elementos comunes parecidos, a menos que estén destinadas a mostrar un vídeo o un juego a pantalla completa, o que formen parte de un proyecto artístico concreto o, simplemente, que estén mal estructuradas; estos elementos comunes son:</p> + +<dl> + <dt>encabezado:</dt> + <dd>Normalmente formado por una gran franja que cruza la parte superior de la página con un <strong>gran título</strong>, un logotipo y quizás un lema. Esta parte suele permanecer invariable mientras navegas entre las páginas de un mismo sitio web.</dd> + <dt>barra de navegación:</dt> + <dd>Son los enlaces a las secciones principales del sitio web. Normalmente está formada por un menú con botones, enlaces o pestañas. Al igual que el <em>encabezado</em>, este contenido suele permanecer invariable en las diferentes páginas del sitio; tener un menú inconsistente en tu página web conducirá a los usuarios a la confusión y frustración. Muchos diseñadores web consideran que el menú de navegación forma parte del encabezado y que no posee un componente individual, aunque no es necesario que sea así; de hecho, algunos argumentan que tener ambos componentes por separado es mejor por motivos de {{web.link("/es/docs/Learn/Accessibility", "accesibilidad")}} porque los lectores de pantalla pueden leer mejor ambos elementos si están separados.</dd> + <dt>contenido principal:</dt> + <dd>Es la gran parte central de la página y contiene la mayor parte del contenido particular de una página web concreta; por ejemplo, el video que quieres ver, la narración que quieres leer, el mapa que quieres consultar, los titulares de las noticias, etc. ¡Esta es la parte que definitivamente debe variar mucho de una página a otra de tu sitio web!</dd> + <dt>barra lateral:</dt> + <dd>Suele incluir algún tipo de información adicional, enlaces, citas, publicidad, etc. Normalmente está relacionada con el contenido principal de la página (por ejemplo, en una página de noticias, la barra lateral podría contener la biografía del autor o enlaces a artículos relacionados), pero en otras ocasiones encontraras elementos recurrentes como un menú de navegación secundario.</dd> + <dt>pie de página:</dt> + <dd>Es la parte inferior de la página, que generalmente contiene la letra pequeña, el copyright o la información de contacto. Es el sitio donde se coloca la información común (al igual que en el encabezado), pero esta información no suele ser tan importante o es secundaria con respecto a la página en sí misma. El pie también se suele usar para propósitos {{Glossary("SEO")}}, e incluye enlaces de acceso rápido al contenido más popular.</dd> +</dl> + +<p>Una página web «típica» se podría parecer a esta:</p> + +<p><img alt="Un ejemplo de estructura de sitio web simple con un encabezado principal, menú de navegación, contenido principal, barra lateral y pie de página." src="https://mdn.mozillademos.org/files/12417/sample-website.png" style="display: block; margin: 0 auto;"></p> + +<h2 id="HTML_para_dar_estructura_al_contenido">HTML para dar estructura al contenido</h2> + +<p>El ejemplo no es muy atractivo, pero puede servir para ilustrar un ejemplo de diseño de una página web típica. Puedes encontrar sitios con más columnas, algunas mucho más complejas, pero esta servirá para hacerte una idea general sobre el tema. Con el CSS adecuado podrás usar muchos más elementos para decorar las distintas secciones y conseguir que queden como deses, pero como se comentó anteriormente, necesitas respetar ciertas normas semánticas, y <em>utilizar el elemento adecuado para cada tipo de sección</em>.</p> + +<p>La parte visual no lo es todo. Utilizarás diferentes fuentes y colores para llamar la atención de los usuarios sin discapacidad visual de las partes más importantes del contenido, como el menú de navegación y sus enlaces correspondientes, pero ¿qué ocurre con los usuarios con discapacidad visual que no pueden distinguir los colores llamativos o el tamaño grande de las fuentes?</p> + +<div class="note"> +<p><strong>Nota</strong>: Los daltónicos representan alrededor del <a href="http://www.color-blindness.com/2006/04/28/colorblind-population/">4% de la población mundial</a> (aproximadamente 1 de cada 12 hombres y 1 de cada 200 mujeres son daltónicos). Los invidentes y las personas con discapacidad visual representan aproximadamente el 4-5% de la población mundial (en 2012 había {{Interwiki("wikipedia", "Discapacidad visual")}} 285 millones de personas con alguna de estas características en el mundo, mientras que el total de la población estaba {{Interwiki("wikipedia", "World_human_population#/media/File:World_population_history.svg", "alrededor de los 7,000 millones")}}.</p> +</div> + +<p>En tu código HTML puedes crear secciones de contenido basadas en su <em>funcionalidad</em> — puedes usar elementos que representen sin ambigüedad las diferentes secciones de contenido descritas, de forma que las tecnologías de accesibilidad y los lectores de pantalla puedan reconocer esos elementos y asistir en tareas como «encontrar el menú de navegación», o «encontrar el contenido principal». Como se mencionó anteriormente en el curso, hay una serie de {{web.link("/es/Learn/HTML/Introduction_to_HTML/HTML_text_fundamentals#Por_qué_necesitamos_estructura", "consecuencias por no usar la estructura de elementos y semántica adecuada para hacer el trabajo correctamente")}}.</p> + +<p>HTML dispone de etiquetas adecuadas que puedes usar para establecer estas secciones semánticas, por ejemplo:</p> + +<ul> + <li><strong>encabezado</strong>: {{HTMLElement("header")}}.</li> + <li><strong>menú de navegación </strong>: {{HTMLElement("nav")}}.</li> + <li><strong>contenido principal</strong>: {{HTMLElement("main")}}, con varias subsecciones (además de la barra lateral) representadas por los elementos {{HTMLElement("article")}}, {{HTMLElement("section")}}, y {{HTMLElement("div")}}.</li> + <li><strong>barra lateral</strong>: {{HTMLElement("aside")}}; a menudo colocada dentro de {{HTMLElement("main")}}.</li> + <li><strong>pie de página</strong>: {{HTMLElement("footer")}}.</li> +</ul> + +<h3 id="Aprendizaje_activo_El_código_del_ejemplo_anterior">Aprendizaje activo: El código del ejemplo anterior</h3> + +<p>El ejemplo de página web que se muestra arriba se consigue a partir del siguiente código (disponible en el <a href="https://github.com/mdn/learning-area/blob/master/html/introduction-to-html/document_and_website_structure/index.html">repositorio Github</a>). Observa el ejemplo anterior, y a continuación échale un vistazo al código de abajo para identificar las secciones marcadas en el ejemplo.</p> + +<pre class="brush: html notranslate"><!DOCTYPE html> +<html> + <head> + <meta charset="utf-8"> + + <title>El título de mi página</title> + <link href="https://fonts.googleapis.com/css?family=Open+Sans+Condensed:300|Sonsie+One" rel="stylesheet" type="text/css"> + <link rel="stylesheet" href="style.css"> + + <!-- las tres siguientes líneas son un truco para obtener elementos semánticos de HTML5 que funcionan en versiones de Internet Explorer antiguas --> + <!--[if lt IE 9]> + <script src="https://cdnjs.cloudflare.com/ajax/libs/html5shiv/3.7.3/html5shiv.js"></script> + <![endif]--> + </head> + + <body> + <!-- Aquí empieza el encabezado principal que se mantendrá en todas las páginas del sitio web --> + + <header> + <h1>Encabezado</h1> + </header> + + <nav> + <ul> + <li><a href="#">Inicio</a></li> + <li><a href="#">Nuestro equipo</a></li> + <li><a href="#">Proyectos</a></li> + <li><a href="#">Contacto</a></li> + </ul> + + <!-- Un formulario de búsqueda es una forma no-lineal de hacer búsquedas en un sitio web. --> + + <form> + <input type="search" name="q" placeholder="Buscar"> + <input type="submit" value="¡Vamos!"> + </form> + </nav> + + <!-- Aquí está el contenido principal de nuestra página --> + <main> + + <!-- Contiene un artículo --> + <article> + <h2>Título del artículo</h2> + + <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Donec a diam lectus. Set sit amet ipsum mauris. Maecenas congue ligula as quam viverra nec consectetur ant hendrerit. Donec et mollis dolor. Praesent et diam eget libero egestas mattis sit amet vitae augue. Nam tincidunt congue enim, ut porta lorem lacinia consectetur.</p> + + <h3>Subsección</h3> + + <p>Donec ut librero sed accu vehicula ultricies a non tortor. Lorem ipsum dolor sit amet, consectetur adipisicing elit. Aenean ut gravida lorem. Ut turpis felis, pulvinar a semper sed, adipiscing id dolor.</p> + + <p>Pelientesque auctor nisi id magna consequat sagittis. Curabitur dapibus, enim sit amet elit pharetra tincidunt feugiat nist imperdiet. Ut convallis libero in urna ultrices accumsan. Donec sed odio eros.</p> + + <h3>Otra subsección</h3> + + <p>Donec viverra mi quis quam pulvinar at malesuada arcu rhoncus. Cum soclis natoque penatibus et manis dis parturient montes, nascetur ridiculus mus. In rutrum accumsan ultricies. Mauris vitae nisi at sem facilisis semper ac in est.</p> + + <p>Vivamus fermentum semper porta. Nunc diam velit, adipscing ut tristique vitae sagittis vel odio. Maecenas convallis ullamcorper ultricied. Curabitur ornare, ligula semper consectetur sagittis, nisi diam iaculis velit, is fringille sem nunc vet mi.</p> + </article> + + <!-- el contenido aparte también se puede anidar dentro del contenido principal --> + <aside> + <h2>Relacionado</h2> + + <ul> + <li><a href="#">Oh, me gusta estar junto al mar</a></li> + <li><a href="#">Oh, me gusta estar junto al mar</a></li> + <li><a href="#">Aunque en el norte de Inglaterra</a></li> + <li><a href="#">Nunca deja de llover</a></li> + <li><a href="#">Oh, bueno...</a></li> + </ul> + </aside> + + </main> + + <!-- Y aquí está nuestro pie de página principal que se utiliza en todas las páginas de nuestro sitio web --> + + <footer> + <p>©Copyright 2050 de nadie. Todos los derechos revertidos.</p> + </footer> + + </body> +</html></pre> + +<p>Tómate tu tiempo para revisar el código y comprenderlo — Los comentarios en el código también te ayudarán a entenderlo. No te pedimos que hagas mucho más en este artículo, porque la clave para entender el diseño del documento es escribir una estructura HTML conocida y posteriormente desarrollar su apariencia con CSS. Estudiaremos el diseño CSS como parte del tema CSS.</p> + +<h2 id="Elementos_de_diseño_HTML_en_detalle">Elementos de diseño HTML en detalle</h2> + +<p>Es bueno entender el significado global de todos los elementos definitorios de las secciones HTML en detalle; es algo en que trabajarás gradualmente a medida que comiences a tener más experiencia en el desarrollo web. En el enlace {{web.link("/es/docs/Web/HTML/Element", "referencia de elementos HTML")}} podemos entrar en un gran nivel de detalle. Por el momento, estas son las definiciones principales que deberíamos tratar de entender:</p> + +<ul> + <li>{{HTMLElement('main')}} encierra el contenido particular a esta página. Utilizaremos <code><main></code> solamente una vez para cada página y lo situaremos directamente dentro del elemento {{HTMLElement('body')}}. Es mejor que no lo anidemos en otros elementos.</li> + <li>{{HTMLElement('article')}} encuadra un bloque de contenido que tiene sentido por sí mismo aparte del resto de la página (por ejemplo una entrada en un blog).</li> + <li>{{HTMLElement('section')}} es parecido al elemento <code><article></code>, pero se usa más para agrupar cada parte de la página que, por su funcionalidad, constituye una sección en sí misma (por ejemplo un minimapa o un conjunto de titulares y resúmenes). Se considera una buena práctica comenzar cada una de estas secciones con un título de encabezado ({{web.link("/es/Learn/HTML/Howto/Set_up_a_proper_title_hierarchy", "heading")}}); observa que podemos subdividir artículos (<code><article></code>) en distintas secciones (<code><section></code>), o también secciones en distintos artículos, dependiendo del contexto.</li> + <li>{{HTMLElement('aside')}} incluye contenido que no está directamente relacionado con el contenido principal, pero que puede aportar información adicional relacionada indirectamente con él (resúmenes, biografías del autor, enlaces relacionados, etc.).</li> + <li>{{HTMLElement('header')}} representa un grupo de contenido introductorio. Si este es «<em>hijo</em>» de un elemento {{HTMLElement('body')}}, se convertirá en el <strong>encabezado</strong> principal del sitio web, pero si es hijo de un elemento {{HTMLElement('article')}} o un elemento {{HTMLElement('section')}}, entonces simplemente será el <strong>encabezado</strong> particular de cada sección (por favor, no lo confundas con {{web.link("/es/docs/Learn/HTML/Introduction_to_HTML/The_head_metadata_in_HTML#Añadir_un_título","títulos y encabezados")}}).</li> + <li>{{HTMLElement('nav')}} contiene la funcionalidad de navegación principal de la página. Los enlaces secundarios, etc., no entrarán en la navegación.</li> + <li>{{HTMLElement('footer')}} representa un grupo de contenido al final de una página.</li> +</ul> + +<h3 id="Envolturas_no_semánticas">Envolturas no semánticas</h3> + +<p>A veces hay situaciones en las que no encuentras un elemento semántico adecuado para agrupar ciertos elementos o englobar cierto contenido. Podrías querer agrupar ciertos elementos para referirte a ellos como una entidad que comparta cierto {{Glossary("CSS")}} o {{Glossary("JavaScript")}}. Para casos como esos, HTML dispone del elemento {{HTMLElement("div")}} y del elemento {{HTMLElement("span")}}. Preferentemente estos elementos se deberán utilizar con sus atributos ({{HTMLAttrxRef('class')}}), para conferirles algún tipo de etiquetado que permita determinarlos con facilidad.</p> + +<p>{{HTMLElement("span")}} es un elemento no-semántico que se utiliza en el interior de una línea. Se utiliza cuando no se nos ocurre el uso de ningún otro elemento semántico de texto en el que incluir el contenido, o si no se desea añadir ningún significado específico. Por ejemplo:</p> + +<pre class="brush: html notranslate"><p>El rey volvió ebrio a su habitación alrededor de la 01:00, y sin duda la cerveza no le ayudaba +cuando cruzó tambaleante la puerta <span class="editor-note">[nota del editor: en este instante de la +representación, deberían atenuarse las luces]</span>.</p></pre> + +<p>En este caso, la nota del editor solo proporciona información extra para el director de la obra; se supone que estos elementos no incluyen contenido extra importante. Para los usuarios sin discapacidad visual, quizás debamos usar CSS para diferenciar sutilmente estas notas del texto principal.</p> + +<p>{{HTMLElement("div")}} es un elemento de bloque no-semántico; lo utilizaras cuando no se te ocurra el uso de otro elemento semántico mejor, o si no deseas añadir ningún significado concreto. Por ejemplo, imagina un carrito de compras que puedes pulsar en cualquier momento durante tu estancia en una tienda virtual:</p> + +<pre class="brush: html notranslate"><div class="shopping-cart"> + <h2>Carrito de compras</h2> + <ul> + <li> + <p><a href=""><strong>Pendientes de plata</strong></a>: $99.95.</p> + <img src="../products/3333-0985/" alt="Pendientes de plata"> + </li> + <li> + ... + </li> + </ul> + <p>Importe total: $237.89</p> +</div></pre> + +<p>Este no es un elemento lateral (<code><aside></code>) porque no necesariamente está relacionado con el contenido principal de la página (en realidad quieres que se pueda ver desde cualquier página). Ni siquiera se puede incluir en una sección (<code><section></code>) porque su contenido no forma parte del contenido principal de la página. Por lo tanto, un elemento <code><div></code> es el adecuado en este caso. Hemos incluido un <strong>encabezado</strong> para indicar a los lectores de pantalla donde van a encontrarlo.</p> + +<div class="warning"> +<p><strong>Atención</strong>: Los elementos <code>div</code> son tan prácticos y simples que es fácil usarlos en exceso. Como no conllevan valor semántico, enmarañan el código HTML. Debemos tener cuidado de usarlos solo cuando no halles una solución mejor y reducir su uso al mínimo, porque de otro modo complicarás el mantenimiento y actualización de los documentos.</p> +</div> + +<h3 id="Saltos_de_línea_y_líneas_horizontales">Saltos de línea y líneas horizontales</h3> + +<p>Dos elementos que debes conocer y utilizarás ocasionalmente son {{HTMLElement("br")}} y {{HTMLElement("hr")}}:</p> + +<p>El elemento {{HTMLElement("br")}} genera un salto de línea en un párrafo; es la única manera de representar series de líneas cortas, como una dirección postal o un poema. Por ejemplo:</p> + +<div id="line-break-live-sample"> +<pre class="brush: html notranslate"><p>Había una vez un hombre llamado O'Dell<br> +A quién le encantaba escribir HTML<br> +Pero su estructura era mala, su semántica era triste<br> +y su marcado no se interpretó muy bien.</p></pre> +</div> + +<p>Sin el elemento {{HTMLElement("br")}}, todo el párrafo se habría presentado como una sola línea larga (como ya hemos dicho con anterioridad en este curso, {{web.link("/es/docs/Learn/HTML/Introduction_to_HTML/Getting_started#Los_espacios_en_blanco_en_HTML", "HTML ignora la mayoría del espacio en blanco")}}); con estos elementos {{HTMLElement("br")}} en el código, las líneas quedan:</p> + +<p>{{EmbedLiveSample('line-break-live-sample', '100%', '125px', '', '', 'hide-codepen-jsfiddle')}}</p> + +<p>Los elementos {{HTMLElement("hr")}} generan una regla horizontal en el documento que denota un cambio en la temática del texto (como un cambio de tema o de escena). Visualmente tiene el aspecto de una línea horizontal. Por ejemplo:</p> + +<div id="Ejemplo_en_vivo_línea_horizontal"> +<pre class="brush: html notranslate"><p>Ron fue acorralado en una esquina por las bestias abisales que merodeaban. Asustado, pero decidido a proteger a sus amigos, levantó su varita y se preparó para la batalla, con la esperanza de que su llamada de socorro hubiera llegado a alguien.</p> +<hr> +<p>Mientras tanto, Harry estaba sentado en su casa, mirando su declaración de regalías y pensando en cuándo saldría la próxima serie derivada, cuando de pronto voló por su ventana una carta de socorro y aterrizó en su regazo. La leyó vagamente y suspiró; "Será mejor que vuelva al trabajo entonces", reflexionó.</p></pre> +</div> + +<p>Quedará así:</p> + +<p>{{EmbedLiveSample('Ejemplo_en_vivo_línea_horizontal', '100%', '185px', '', '', 'hide-codepen-jsfiddle')}}</p> + +<h2 id="Planificación_de_una_página_web_sencilla">Planificación de una página web sencilla</h2> + +<p>Una vez has planificado el contenido de una página web sencilla, el paso lógico siguiente es intentar trabajar en el contenido para todo el sitio web, las páginas que necesitas y la forma de disponer las conexiones entre ellas para producir la mejor experiencia de usuario a los visitantes. Esto se conoce con el nombre de ({{Glossary("Arquitectura de la información")}}). Una web grande y compleja necesitará mucha planificación, pero para una web sencilla compuesta por unas cuantas páginas, el proceso puede ser sencillo, ¡y divertido!.</p> + +<ol> + <li>Ten en cuenta que habrá varios elementos comunes en muchas (si no en todas las) páginas, tal como el menú de navegación y el contenido del pie de página. Si la web está dedicada a un negocio, por ejemplo, sería una buena idea disponer de la información de contacto en el pie de página en todas las páginas. Anota lo que deseas tener en común en cada página. <img alt="las características comunes del sitio de viajes para ir en cada página: título y logotipo, contacto, derechos de autor, términos y condiciones, selección de idioma, política de accesibilidad" src="https://mdn.mozillademos.org/files/12423/common-features.png" style="border-style: solid; border-width: 1px; display: block; height: 375px; margin: 0px auto; width: 600px;"></li> + <li>A continuación, esboza un esquema sencillo de cuál podría ser la estructura deseada de la apariencia de cada página (podría ser algo tan sencillo como el siguiente dibujo). Anota los bloques principales. <img alt="Un diagrama simple de una estructura de sitio de ejemplo, con un encabezado, un área de contenido principal, dos barras laterales opcionales y un pie de página" src="https://mdn.mozillademos.org/files/12429/site-structure.png" style="border-style: solid; border-width: 1px; display: block; height: 232px; margin: 0px auto; width: 600px;"></li> + <li>Ahora, elabora una lista completa con todo el resto del contenido de tu sitio web que no sea común a todas las páginas. <img alt="Una larga lista de todas las funciones que podrías incluir en tu sitio de viajes, desde buscar, hasta ofertas especiales e información específica del país" src="https://mdn.mozillademos.org/files/12425/feature-list.png" style="border-style: solid; border-width: 1px; display: block; height: 1066px; margin: 0px auto; width: 600px;"></li> + <li>A continuación, trata de ordenar todo este contenido por grupos, para hacerte una idea de las partes que podrían ir juntas en las diferentes páginas. Esto es muy similar a una técnica llamada {{Glossary("Clasificación de tarjetas")}}. <img alt="Los elementos que deberían aparecer en un sitio de vacaciones ordenados en 5 categorías: Búsqueda, Especiales, Información específica del país, Resultados de búsqueda y Compra cosas" src=" https://mdn.mozillademos.org/files/12421/card-sorting.png" style="border-style: solid; border-width: 1px; display: block; height: 579px; margin: 0px auto; width: 600px;"></li> + <li>Ahora trata de esquematizar un mapa de tu sitio — dibuja un globo para cada página de tu sitio web y dibuja líneas que identifiquen el flujo de datos entre las distintas páginas. La página de inicio normalmente estará ubicada en el centro y enlazará con el resto de páginas; la mayoría de las páginas de una web sencilla estarán enlazadas desde el menú de navegación principal, aunque puede haber excepciones. También puedes incluir notas sobre cómo se pueden presentar las cosas. <img alt="Un mapa del sitio que muestra la página de inicio, la página del país, los resultados de búsqueda, la página de ofertas especiales, la página de pago y la página de compra" src="https://mdn.mozillademos.org/files/12427/site-map.png" style="border-style: solid; border-width: 1px; display: block; height: 872px; margin: 0px auto; width: 600px;"></li> +</ol> + +<h3 id="Aprendizaje_activo_Creación_de_un_mapa_del_sitio_web">Aprendizaje activo: Creación de un mapa del sitio web</h3> + +<p>Intenta llevar a cabo el ejercicio anterior para crear tu propia página web. ¿Qué contenido le vas a dar a tu sitio web?</p> + +<div class="note"> +<p><strong>Nota</strong>: Guarda este esquema para utilizarlo más adelante.</p> +</div> + +<h2 id="¡Pon_a_prueba_tus_habilidades!">¡Pon a prueba tus habilidades!</h2> + +<p>Has llegado al final de este artículo, pero ¿puedes recordar la información más importante? Puedes encontrar una evaluación detallada que pruebe estas habilidades al final del módulo; consulta {{web.link("/es/docs/Learn/HTML/Introduction_to_HTML/Structuring_a_page_of_content", "Estructurar el contenido de una página")}}. ¡Recuerda leer primero el siguiente artículo de la serie y no solo saltarlo!</p> + +<h2 id="Resumen">Resumen</h2> + +<p>En este punto, deberías tener una mejor idea sobre cómo estructurar una página/sitio web. En el último artículo de este módulo, se explica cómo depurar HTML.</p> + +<h2 id="Ve_también">Ve también</h2> + +<ul> + <li>{{web.link("/es/docs/Web/Guide/HTML/Using_HTML_sections_and_outlines", "Uso de secciones y esquemas HTML")}}: Guía avanzada de elementos semánticos HTML5 y el algoritmo de esquema HTML5.</li> +</ul> + +<p>{{PreviousMenuNext("Learn/HTML/Introduction_to_HTML/Advanced_text_formatting", "Learn/HTML/Introduction_to_HTML/Debugging_HTML", "Learn/HTML/Introduction_to_HTML")}}</p> + +<h2 id="En_este_módulo">En este módulo</h2> + +<ul> + <li>{{web.link("/es/docs/Learn/HTML/Introduction_to_HTML/Getting_started", "Empezar con HTML")}}</li> + <li>{{web.link("/es/docs/Learn/HTML/Introduction_to_HTML/The_head_metadata_in_HTML", "¿Qué hay en el «head»? Metadatos en HTML")}}</li> + <li>{{web.link("/es/docs/Learn/HTML/Introduction_to_HTML/HTML_text_fundamentals", "Fundamentos de texto HTML")}}</li> + <li>{{web.link("/es/docs/Learn/HTML/Introduction_to_HTML/Creating_hyperlinks", "Crear hipervínculos")}}</li> + <li>{{web.link("/es/docs/Learn/HTML/Introduction_to_HTML/Advanced_text_formatting", "Formateo de texto avanzado")}}</li> + <li>{{web.link("/es/docs/Learn/HTML/Introduction_to_HTML/Document_and_website_structure", "Estructura web y documentación")}}</li> + <li>{{web.link("/es/docs/Learn/HTML/Introduction_to_HTML/Debugging_HTML", "Depurar HTML")}}</li> + <li>{{web.link("/es/docs/Learn/HTML/Introduction_to_HTML/Marking_up_a_letter", "Marcado para una carta")}}</li> + <li>{{web.link("/es/docs/Learn/HTML/Introduction_to_HTML/Structuring_a_page_of_content", "Estructuración del contenido de una página")}}</li> +</ul> diff --git a/files/es/learn/html/introduction_to_html/getting_started/index.html b/files/es/learn/html/introduction_to_html/getting_started/index.html new file mode 100644 index 0000000000..331be30043 --- /dev/null +++ b/files/es/learn/html/introduction_to_html/getting_started/index.html @@ -0,0 +1,768 @@ +--- +title: Empezar con HTML +slug: Learn/HTML/Introduction_to_HTML/Getting_started +tags: + - Atributos + - Elemento + - Guía + - HTML + - Principiante + - comentários +translation_of: Learn/HTML/Introduction_to_HTML/Getting_started +original_slug: Learn/HTML/Introduccion_a_HTML/iniciar +--- +<div>{{LearnSidebar}}</div> + +<div>{{NextMenu("Learn/HTML/Introduction_to_HTML/The_head_metadata_in_HTML", "Learn/HTML/Introduction_to_HTML")}}</div> + +<p class="summary">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.</p> + +<table class="learn-box standard-table"> + <tbody> + <tr> + <th scope="row">Prerrequisitos:</th> + <td>Conocimientos básicos de informática, {{web.link("/es/docs/Learn/Getting_started_with_the_web/Installing_basic_software", "tener instalado el software básico")}} y conocimientos básicos de cómo {{web.link("/es/docs/Learn/Getting_started_with_the_web/Dealing_with_files", "trabajar con archivos")}}.</td> + </tr> + <tr> + <th scope="row">Objetivo:</th> + <td>Familiarizarte con el lenguaje HTML, y adquirir algo de práctica escribiendo unos pocos elementos HTML.</td> + </tr> + </tbody> +</table> + +<h2 id="¿Qué_es_el_HTML">¿Qué es el HTML?</h2> + +<p>{{Glossary("HTML")}} ("<em>Hypertext Markup Language</em>") no es un lenguaje de programación. Es un <em>lenguaje de marcado</em> 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 <em>marcar</em> 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:</p> + +<pre class="brush: bash notranslate">Mi gato es muy gruñón</pre> + +<p>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")}}):</p> + +<pre class="brush: html notranslate"><p>Mi gato es muy gruñón</p></pre> + +<div class="note"> +<p><strong>Nota</strong>: 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 <code><title></code>, <code><TITLE></code>, <code><Title></code>, <code><TiTle></code>, 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.</p> +</div> + +<h2 id="Anatomía_de_un_elemento_HTML">Anatomía de un elemento HTML</h2> + +<p>Exploremos un poco el elemento párrafo:</p> + +<p><img alt="Anatomía de los elementos HTML" src="https://mdn.mozillademos.org/files/11913/htmlexp.png" style="display: block; height: 255px; margin: 0px auto; width: 821px;"></p> + +<p>Las principales partes de nuestro elemento son:</p> + +<ul> + <li>La <strong>etiqueta de apertura</strong>: consiste en el nombre del elemento (en este caso, <code>p</code>), encerrado entre <strong>paréntesis angulares</strong> 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.</li> + <li>El <strong>contenido</strong>: Este es el contenido del elemento. En este ejemplo, es el texto del párrafo.</li> + <li>La <strong>etiqueta de cierre</strong>: 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.</li> +</ul> + +<p>El <strong>elemento</strong> lo conforman la etiqueta de apertura, seguida del contenido, seguido de la etiqueta de cierre.</p> + +<h3 id="Aprendizaje_activo_crear_tu_primer_elemento_HTML">Aprendizaje activo: crear tu primer elemento HTML</h3> + +<p>Edita la siguiente línea en el área <em>Entrada</em> envolviéndola con las etiquetas <code><em></code> y <code></em></code>. Para <em>abrir el elemento</em>, coloca la etiqueta de apertura <code><em></code> al principio de la línea. Para <em>cerrar el elemento</em>, coloca la etiqueta de cierre <code></em></code> 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 <em>Salida</em>.</p> + +<p>Si te equivocas, siempre puedes volver al código anterior mediante el botón <em>Restablecer</em>. Si te quedas realmente atascado, pulsa el botón <em>Mostrar la solución</em> para ver la solución.</p> + +<div class="hidden"> +<h6 id="Código_reproducible">Código reproducible</h6> + +<pre class="brush: html notranslate"><h2>Salida en vivo</h2> +<div class="output" style="min-height: 50px;"> +</div> + +<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 tabulación).</p> + +<textarea id="code" class="playable-code" style="min-height: 100px;width: 95%"> + Este es mi texto. +</textarea> + +<div class="controls"> + <input id="reset" type="button" value="Restablecer" /> + <input id="solution" type="button" value="Mostrar solución" /> +</div> +</pre> + +<pre class="brush: css notranslate">html { + font-family: 'Open Sans Light',Helvetica,Arial,sans-serif; +} + +h2 { + font-size: 16px; +} + +.a11y-label { + margin: 0; + text-align: right; + font-size: 0.7rem; + width: 98%; +} + +body { + margin: 10px; + background: #f5f9fa; +} +</pre> + +<pre class="brush: js notranslate">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; + +function updateCode() { + output.innerHTML = textarea.value; +} + +reset.addEventListener('click', function() { + textarea.value = code; + userEntry = textarea.value; + solutionEntry = htmlSolution; + solution.value = 'Mostrar solución'; + updateCode(); +}); + +solution.addEventListener('click', function() { + if(solution.value === 'Mostrar solución') { + textarea.value = solutionEntry; + solution.value = 'Ocultar solución'; + } else { + textarea.value = userEntry; + solution.value = 'Mostrar solución'; + } + 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){ + if (e.keyCode === 9) { + e.preventDefault(); + insertAtCaret('\t'); + } + + if (e.keyCode === 27) { + textarea.blur(); + } +}; + +function insertAtCaret(text) { + var scrollPos = textarea.scrollTop; + var caretPos = textarea.selectionStart; + + var front = (textarea.value).substring(0, caretPos); + var back = (textarea.value).substring(textarea.selectionEnd, textarea.value.length); + textarea.value = front + text + back; + caretPos = 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(){ + // 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 + if(solution.value === 'Mostrar solución') { + userEntry = textarea.value; + } else { + solutionEntry = textarea.value; + } + + updateCode(); +};</pre> +</div> + +<p>{{ EmbedLiveSample('Código_reproducible', 700, 400, "", "", "hide-codepen-jsfiddle") }}</p> + +<h3 id="Elementos_anidados">Elementos anidados</h3> + +<p>Se pueden poner elementos dentro de otros elementos. Esto se llama <strong>anidamiento</strong>. Si quisiéramos decir que nuestro gato es <strong>muy</strong> gruñón, podríamos encerrar la palabra <em>muy</em> en un elemento {{htmlelement("strong")}} para que aparezca destacada.</p> + +<pre class="brush: html notranslate"><p>Mi gato es <strong>muy</strong> gruñón.</p></pre> + +<p>Hay una forma correcta e incorrecta de anidar. En el ejemplo anterior, primero abrimos el elemento <code>p</code>, luego abrimos el elemento <code>strong</code>. Para un anidamiento adecuado, primero debemos cerrar el elemento <code>strong</code>, antes de cerrar el <code>p</code>.</p> + +<p>El siguiente es un ejemplo de la forma <em>incorrecta</em> de anidar:</p> + +<pre class="example-bad brush: html notranslate"><p>Mi gato es <strong>muy gruñón.</p></strong></pre> + +<p>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.</p> + +<h3 id="Elementos_de_bloque_y_elementos_en_línea">Elementos de bloque y elementos en línea</h3> + +<p>Hay dos categorías importantes de elementos en HTML — Estos son los elementos de bloque y los elementos en línea.</p> + +<ul> + <li>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.</li> + <li>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")}}.</li> +</ul> + +<p>Considera el siguiente ejemplo:</p> + +<pre class="brush: html notranslate"><em>primero</em><em>segundo</em><em>tercero</em> + +<p>cuarto</p><p>quinto</p><p>sexto</p> +</pre> + +<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 <em>p</em> aparece en una nueva línea, con un espacio arriba y abajo. (El espaciado se debe al {{web.link("/es/docs/Learn/CSS/Introduction_to_CSS", "estilo CSS")}} predeterminado que el navegador aplica a los párrafos).</p> + +<p>{{ EmbedLiveSample('Elementos_de_bloque_y_elementos_en_línea', 700, 200, "", "") }}</p> + +<div class="note"> +<p><strong>Nota</strong>: HTML5 redefinió las categorías de elementos: consulta <a href="https://html.spec.whatwg.org/multipage/indices.html#element-content-categories">Categorías de contenido de elementos</a>. 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 <em>block</em> e <em>inline </em>. Este artículo seguirá con estos dos términos.</p> +</div> + +<div class="note"> +<p><strong>Nota</strong>: Los términos «en bloque» (block) y «en línea» (inline), tal como se usan en este tema, no se deberían confundir con {{web.link("/es/docs/Learn/CSS/Introduction_to_CSS/Box_model#Types_of_CSS_boxes", "los tipos de casillas de CSS")}} 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.</p> +</div> + +<div class="note"> +<p><strong>Nota</strong>: Puedes encontrar referencias útiles que incluyen listas de elementos de bloque y elementos en línea. Consulta {{web.link("/es/docs/Web/HTML/Block-level_elements", "Elementos en bloque")}} y {{web.link("/es/docs/Web/HTML/Elementos_en_línea", "Elementos en línea")}}.</p> +</div> + +<h3 id="Elementos_vacíos">Elementos vacíos</h3> + +<p>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:</p> + +<pre class="brush: html notranslate"><img src="https://raw.githubusercontent.com/mdn/beginner-html-site/gh-pages/images/firefox-icon.png"></pre> + +<p>Este texto mostrará lo siguiente en tu página:</p> + +<p>{{ EmbedLiveSample('Elementos_vacíos', 700, 300, "", "", "hide-codepen-jsfiddle") }}</p> + +<div class="note"> +<p><strong>Nota</strong>: Los elementos vacíos en ocasiones también se llaman elementos <em>nulos</em> o <em>vanos</em> (<em>void elements</em>).</p> +</div> + +<h2 id="Atributos">Atributos</h2> + +<p>Los elementos también pueden tener atributos. Los atributos tienen este aspecto:</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 extra sobre el elemento que no se mostrará en el contenido. En este caso, el atributo <code>class</code> asigna al elemento un identificador que se puede utilizar para dotarlo de información de estilo.</p> + +<p>Un atributo debería tener:</p> + +<ul> + <li>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).</li> + <li>El nombre del atributo, seguido por un signo igual.</li> + <li>Un valor del atributo, rodeado de comillas de apertura y cierre.</li> +</ul> + +<h3 id="Aprendizaje_activo_Añadir_atributos_a_un_elemento">Aprendizaje activo: Añadir atributos a un elemento</h3> + +<p>Otro ejemplo de un elemento es {{htmlelement("a")}}. Esto significa <em>ancla</em>. Una ancla puede convertir el texto que encierra en un hipervínculo. Las anclas pueden tener varios atributos, pero varios son como sigue:</p> + +<ul> + <li><strong><code>href</code></strong>: 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, <code>href="https://www.mozilla.org/"</code>.</li> + <li><strong><code>title</code></strong>: El atributo <code>title</code> añade información adicional sobre el enlace, como puede ser el título de la página que vinculas. Por ejemplo, <code>title="La página de inicio de Mozilla"</code>. Esta información aparecerá cuando se le pase el ratón por encima.</li> + <li><strong><code>target</code></strong>: El atributo <code>target</code> especifica el contexto de navegación que va a usar para mostrar el enlace. Por ejemplo, <code>target="_blank"</code> abrirá el enlace en una nueva pestaña. Si quieres mostrar el enlace en la pestaña activa, simplemente omite este atributo.</li> +</ul> + +<p>Edita la línea de abajo en el área de <em>Entrada</em> para convertirlo en un enlace a tu sitio web favorito.</p> + +<ol> + <li>Añade el elemento <code><a></code>.</li> + <li>Añade el atributo <code>href</code> y el atributo <code>title</code>.</li> + <li>Especifica el atributo <code>target</code> para abrir el enlace en una nueva pestaña.</li> +</ol> + +<p>Los cambios se actualizarán inmediatamente en la zona de <em>Salida</em>. Deberías ver un enlace que mostrará el contenido del atributo <code>title</code> cuando pases el ratón encima, y que te llevará a la dirección web indicada por el atributo <code>href</code> cuando hagas clic. Recuerda que debes incluir un espacio entre el nombre del elemento y cada atributo.</p> + +<p>Si te equivocas, siempre puedes restablecer el código anterior pulsando el botón <em>Restablecer</em>. Si te quedas realmente atascado, pulsa el botón <em>Mostrar la solución</em> para ver la solución.</p> + +<div class="hidden"> +<h6 id="Código_reproducible_2">Código reproducible 2</h6> + +<pre class="brush: html notranslate"><h2>Salida en vivo</h2> + +<div class="output" style="min-height: 50px;"> +</div> + +<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 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; +</textarea> + +<div class="playable-buttons"> + <input id="reset" type="button" value="Restablecer"> + <input id="solution" type="button" value="Mostrar solución"> +</div></pre> + +<pre class="brush: css notranslate">html { + font-family: sans-serif; +} + +h2 { + font-size: 16px; +} + +.a11y-label { + margin: 0; + text-align: right; + font-size: 0.7rem; + width: 98%; +} + +body { + margin: 10px; + background: #f5f9fa; +}</pre> + +<pre class="brush: js notranslate">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; + +function updateCode() { + output.innerHTML = textarea.value; +} + +reset.addEventListener('click', function() { + textarea.value = code; + userEntry = textarea.value; + solutionEntry = htmlSolution; + solution.value = 'Mostrar solución'; + updateCode(); +}); + +solution.addEventListener('click', function() { + if(solution.value === 'Mostrar solución') { + textarea.value = solutionEntry; + solution.value = 'Ocultar solución'; + } else { + textarea.value = userEntry; + solution.value = 'Mostrar solución'; + } + 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 + +textarea.onkeydown = function(e){ + if (e.keyCode === 9) { + e.preventDefault(); + insertAtCaret('\t'); + } + + if (e.keyCode === 27) { + textarea.blur(); + } +}; + +function insertAtCaret(text) { + var scrollPos = textarea.scrollTop; + var caretPos = textarea.selectionStart; + + var front = (textarea.value).substring(0, caretPos); + var back = (textarea.value).substring(textarea.selectionEnd, textarea.value.length); + textarea.value = front + text + back; + caretPos = 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(){ + // 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 + if(solution.value === 'Mostrar solución') { + userEntry = textarea.value; + } else { + solutionEntry = textarea.value; + } + + updateCode(); +};</pre> +</div> + +<p>{{ EmbedLiveSample('Código_reproducible_2', 700, 400, "", "", "hide-codepen-jsfiddle") }}</p> + +<h3 id="Atributos_booleanos">Atributos booleanos</h3> + +<p>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 {{htmlattrxref("disabled", "input")}}, que puedes asignar a los elementos de entrada del formulario. (Usa esto para <em>deshabilitar</em> los elementos de entrada del formulario para que el usuario no pueda realizar entradas. Los elementos desactivados suelen tener una apariencia atenuada). Por ejemplo:</p> + +<pre class="brush: bash notranslate"><input type="text" disabled="disabled"></pre> + +<p>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):</p> + +<pre class="brush: html notranslate"><!-- el uso del atributo deshabilitado evita 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 --> +<input type="text"> +</pre> + +<p>Como referencia, el ejemplo anterior también incluye un elemento de entrada de formulario no deshabilitado. El HTML del ejemplo anterior produce este resultado:</p> + +<p>{{ EmbedLiveSample('Atributos_booleanos', 700, 100, "", "", "hide-codepen-jsfiddle") }}</p> + +<h3 id="Omitir_comillas_en_valores_de_atributos">Omitir comillas en valores de atributos</h3> + +<p>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 <code>href</code>, así:</p> + +<pre class="brush: html notranslate"><a href=https://www.mozilla.org/>mi sitio web favorito</a></pre> + +<p>Sin embargo, las cosas no funcionarán cuando a este estilo se añada el atributo <code>title</code>:</p> + +<pre class="example-bad brush: html notranslate"><a href=https://www.mozilla.org/ title=The Mozilla homepage>mi sitio web favorito</a></pre> + +<p>En este punto el navegador interpretará mal el cambio y pensará que el atributo <code>title</code> corresponde a tres atributos: un atributo <code>title</code> con el valor <em>The</em> y dos atributos booleanos: <code>Mozilla</code> y <code>homepage</code>. ¡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!</p> + +<p>{{ EmbedLiveSample('Omitir_comillas_en_valores_de_atributos', 700, 100, "", "", "hide-codepen-jsfiddle") }}</p> + +<p>Incluye <strong>siempre</strong> las comillas de atributos. Evita tales problemas y da como resultado un código más legible.</p> + +<h3 id="¿Comillas_simples_o_dobles">¿Comillas simples o dobles?</h3> + +<p>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:</p> + +<pre class="brush: html notranslate"><a href="http://www.ejemplo.com">Un enlace a mi ejemplo.</a> + +<a href='http://www.ejemplo.com'>Un enlace a mi ejemplo.</a></pre> + +<p>Asegúrate de no mezclar ambos tipos de comillas. El siguiente ejemplo muestra un tipo de mezcla de comillas que saldrá mal:</p> + +<pre class="example-bad brush: html notranslate"><a href="http://www.ejemplo.com'>Un enlace a mi ejemplo.</a></pre> + +<p>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:</p> + +<pre class="brush: html notranslate"><a href="http://www.ejemplo.com" title="¿A que es 'divertido'">Un enlace a mi ejemplo.</a></pre> + +<p>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:</p> + +<pre class="example-bad brush: html notranslate"><a href='http://www.ejemplo.com' title='¿A que es 'divertido'?'>Un enlace a mi ejemplo.</a></pre> + +<p>Así que tendrás que hacer esto:</p> + +<pre class="brush: html notranslate"><a href='http://www.ejemplo.com' title='¿A que es &apos;divertido&apos;?'>Un enlace a mi ejemplo.</a></pre> + +<h2 id="Anatomía_de_un_documento_HTML">Anatomía de un documento HTML</h2> + +<p>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:</p> + +<pre class="brush: html notranslate"><!DOCTYPE html> +<html> + <head> + <meta charset="utf-8"> + <title>Mi página de prueba</title> + </head> + <body> + <p>Esta es mi página</p> + </body> +</html></pre> + +<p>Aquí tenemos:</p> + +<ol> + <li><code><!DOCTYPE html></code>: El elemento <em>doctype</em>. En sus inicios, cuando el HTML llevaba poco tiempo (alrededor de 1991-1992), los <em>doctypes</em> servían como enlaces al conjunto de reglas que la página HTML debía seguir para que fuera considerado buen HTML. Un elemento <em>doctype</em> de aquella época podía parecerse a esto: + + <pre class="brush: bash notranslate"><!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" +"http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"></pre> + En la actualidad se ignora y se considera un legado histórico que hay que incluir para que todo funcione correctamente. <code><!DOCTYPE html></code> es la secuencia de caracteres más corta que se acepta como elemento <em>doctype</em> válido. Eso es lo único que realmente necesitas saber.</li> + <li><code><html></html></code>: El elemento <code><html></code>. Este elemento envuelve todo el contenido de la página. A veces se lo conoce como el elemento raíz.</li> + <li><code><head></head></code>: El elemento <code><{{htmlelement("head")}}></code> (cabecera). Este elemento actúa como contenedor para todos los parámetros que quieras incluir en el documento HTML que <em>no serán</em> 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.</li> + <li><code><meta charset="utf-8"></code>: 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.</li> + <li><code><title></title></code>: 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.</li> + <li><code><body></body></code>: El elemento <code><body></code>. 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.</li> +</ol> + +<h3 id="Aprendizaje_activo_Añadir_algunas_características_a_un_documento_HTML">Aprendizaje activo: Añadir algunas características a un documento HTML</h3> + +<p>Si quieres escribir algo de HTML en tu ordenador local para experimentar, puedes:</p> + +<ol> + <li>Copiar el ejemplo de la página HTML del punto anterior.</li> + <li>Crear un archivo nuevo en un editor de texto.</li> + <li>Pegar el código en el nuevo archivo de texto.</li> + <li>Guardar el archivo como <code>index.html</code>.</li> +</ol> + +<div class="note"> +<p><strong>Nota</strong>: También puedes encontrar esta plantilla básica de HTML en el <a href="https://github.com/mdn/learning-area/blob/master/html/introduction-to-html/getting-started/index.html">repositorio GitHub del Área MDN Learning</a>.</p> +</div> + +<p>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í:</p> + +<p><img alt="Una sencilla página HTML que dice esta es mi página" src="https://mdn.mozillademos.org/files/12279/template-screenshot.png" style="display: block; height: 365px; margin: 0px auto; width: 595px;">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:</p> + +<ul> + <li>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 <code><h1></code> y una etiqueta de cierre <code></h1></code>.</li> + <li>Edita el contenido del párrafo e incluye algún texto sobre algo que te interese.</li> + <li>Pon las palabras importantes dentro de etiquetas <code><strong></code> de apertura y <code></strong></code> de cierre para que destaquen en negrita.</li> + <li>Añade un enlace a tu párrafo, como se ha explicado {{web.link("/es/docs/Learn/HTML/Introduction_to_HTML/Getting_started#Active_learning_Adding_attributes_to_an_element", "anteriormente en este mismo artículo")}}.</li> + <li>Agrega una imagen a tu documento. Colócala debajo del párrafo, como {{web.link("/es/Learn/HTML/Introduction_to_HTML/Getting_started#Empty_elements", "se explicó anteriormente en el artículo")}}. Ganarás puntos extra si consigues enlazar a una imagen diferente (de tu propio ordenador o de cualquier otro lugar de la web).</li> +</ul> + +<p>Si te equivocas, siempre puedes restablecer el código anterior pulsando el botón <em>Restablecer</em>. Si te quedas realmente atascado, pulsa el botón <em>Mostrar la solución</em> para ver la solución.</p> + +<div class="hidden"> +<h6 id="Código_reproducible_3">Código reproducible 3</h6> + +<pre class="brush: html notranslate"><h2>Salida en vivo</h2> + +<div class="output" style="min-height: 50px;"> +</div> + +<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 tabulación).</p> + +<textarea id="code" class="input" style="min-height: 100px;width: 95%"> + &lt;p&gt;Esta es mi página&lt;/p&gt; +</textarea> + +<div class="playable-buttons"> + <input id="reset" type="button" value="Restablecer"> + <input id="solution" type="button" value="Mostrar solución"> +</div></pre> + +<pre class="brush: css notranslate">html { + font-family: sans-serif; +} + +h1 { + color: blue; +} + +h2 { + font-size: 16px; +} + +.a11y-label { + margin: 0; + text-align: right; + font-size: 0.7rem; + width: 98%; +} + +img { + max-width: 100%; +} + +body { + margin: 10px; + background: #f5f9fa; +}</pre> + +<pre class="brush: js notranslate">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; + +function updateCode() { + output.innerHTML = textarea.value; +} + +reset.addEventListener('click', function() { + textarea.value = code; + userEntry = textarea.value; + solutionEntry = htmlSolution; + solution.value = 'Mostrar solución'; + updateCode(); +}); + +solution.addEventListener('click', function() { + if(solution.value === 'Mostrar solución') { + textarea.value = solutionEntry; + solution.value = 'Ocultar solución'; + } else { + textarea.value = userEntry; + solution.value = 'Mostrar solución'; + } + updateCode(); +}); + +var htmlSolution = '<h1>Un poco de música</h1><p>Realmente disfruto <strong>tocar la batería</strong>. Uno de mis bateristas favoritos es Neal Peart, que toca en la banda <a href="https://en.wikipedia.org/wiki/Rush_%28band%29" title="artículo de Wikipedia de">Rush</a>.\ Mi álbum favorito de Rush actualmente es <a href="http://www.deezer.com/album/942295">Fotografías de la película</a>.</p>\ <img src="http://www.cygnus-x1.net/links/rush/images/albums/sectors/sector2-movingpictures-cover-s.jpg">'; +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){ + if (e.keyCode === 9) { + e.preventDefault(); + insertAtCaret('\t'); + } + + if (e.keyCode === 27) { + textarea.blur(); + } +}; + +function insertAtCaret(text) { + var scrollPos = textarea.scrollTop; + var caretPos = textarea.selectionStart; + + var front = (textarea.value).substring(0, caretPos); + var back = (textarea.value).substring(textarea.selectionEnd, textarea.value.length); + textarea.value = front + text + back; + caretPos = 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(){ + // 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 + if(solution.value === 'Mostrar solución') { + userEntry = textarea.value; + } else { + solutionEntry = textarea.value; + } + + updateCode(); +};</pre> +</div> + +<p>{{ EmbedLiveSample('Código_reproducible_3', 700, 600, "", "", "hide-codepen-jsfiddle") }}</p> + +<h3 id="Los_espacios_en_blanco_en_HTML">Los espacios en blanco en HTML</h3> + +<p>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:</p> + +<pre class="brush: html notranslate"><p>Los perros son tontos.</p> + +<p>Los perros son + tontos.</p></pre> + +<p>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.<br> + <br> + 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.</p> + +<h2 id="Referencias_a_entidades_Inclusión_de_caracteres_especiales_en_HTML">Referencias a entidades: Inclusión de caracteres especiales en HTML</h2> + +<p>En HTML, los caracteres <code><</code>, <code>></code>,<code>"</code>,<code>'</code> y <code>&</code> 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.</p> + +<p>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 (;).</p> + +<table class="standard-table"> + <thead> + <tr> + <th scope="col">Caracter literal</th> + <th scope="col">Equivalente de referencia de caracteres</th> + </tr> + </thead> + <tbody> + <tr> + <td><</td> + <td>&lt;</td> + </tr> + <tr> + <td>></td> + <td>&gt;</td> + </tr> + <tr> + <td>"</td> + <td>&quot;</td> + </tr> + <tr> + <td>'</td> + <td>&apos;</td> + </tr> + <tr> + <td>&</td> + <td>&amp;</td> + </tr> + </tbody> +</table> + +<p>El equivalente de referencia de caracter podría recordarse fácilmente porque el texto que utiliza se puede ver como menor que para '&lt;' , cita para ' &quot; ' y de manera similar para otros. Para obtener más información sobre la referencia de entidad, consulta {{interwiki("wikipedia", "Anexo:Referencias a entidades de caracteres XML y HTML")}} en (Wikipedia).<br> + <br> + Considera los dos siguientes párrafos:</p> + +<pre class="brush: html notranslate"><p>En HTML, defines un párrafo con el elemento <p>.</p> + +<p>En HTML, defines un párrafo con el elemento &lt;p&gt;.</p></pre> + +<p>En la salida en vivo de abajo, puedes ver que el primer párrafo salió mal. El navegador interpreta la segunda instancia de <code><p></code> como el inicio de un nuevo párrafo. El segundo párrafo se ve bien porque hemos remplazado <code><</code> y <code>></code> por sus referencias correspondientes.</p> + +<p>{{ EmbedLiveSample('Referencias_a_entidades_Inclusión_de_caracteres_especiales_en_HTML', 700, 200) }}</p> + +<div class="note"> +<p><strong>Nota</strong>: En la Wikipedia se puede localizar un listado de todas las referencias de entidades de caracteres HTML disponibles: {{interwiki("wikipedia", "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 {{web.link("/es/docs/Learn/HTML/Introduction_to_HTML/The_head_metadata_in_HTML", "establecido la codificación de el juego de caracteres universal UTF-8", "#Specifying_your_document's_character_encoding")}}.</p> +</div> + +<h2 id="Comentarios_HTML">Comentarios HTML</h2> + +<p>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.</p> + +<p>Para convertir en un comentario una sección de contenido de tu archivo HTML, debes delimitarlo con los marcadores especiales <code><!--</code> y <code>--></code>. Por ejemplo:</p> + +<pre class="brush: html notranslate"><p>No soy un comentario</p> + +<!-- <p>¡Yo sí!</p> --></pre> + +<p>Como puedes ver a continuación, el primer párrafo aparece, pero el segundo no.</p> + +<p>{{ EmbedLiveSample('Comentarios_HTML', 700, 100, "", "", "hide-codepen-jsfiddle") }}</p> + +<h2 id="Resumen">Resumen</h2> + +<p>Has llegado al final del artículo. Espero que hayas disfrutado del recorrido los conceptos básicos del HTML.<br> + 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.</p> + +<div class="note"> +<p><strong>Nota</strong>: 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 (<em>Cascading style sheets</em>) o {{web.link("/es/docs/Learn/CSS", "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.</p> +</div> + +<h2 id="Ve_también">Ve también</h2> + +<ul> + <li>{{web.link("/es/docs/Web/HTML/Applying_color", "Aplicación de color a elementos HTML mediante CSS")}}</li> +</ul> + +<div>{{NextMenu("Learn/HTML/Introduction_to_HTML/The_head_metadata_in_HTML", "Learn/HTML/Introduction_to_HTML")}}</div> + +<div></div> + +<h2 id="En_este_módulo">En este módulo</h2> + +<ul> + <li><a href="/es/docs/Learn/HTML/Introduction_to_HTML/Getting_started">Empezar con HTML</a></li> + <li><a href="/es/docs/Learn/HTML/Introduction_to_HTML/The_head_metadata_in_HTML">¿Qué hay en la cabecera? Metadatos en HTML</a></li> + <li><a href="/es/docs/Learn/HTML/Introduction_to_HTML/HTML_text_fundamentals">Fundamentos de texto HTML</a></li> + <li><a href="/es/docs/Learn/HTML/Introduction_to_HTML/Creating_hyperlinks">Creando hipervínculos</a></li> + <li><a href="/es/docs/Learn/HTML/Introduction_to_HTML/Advanced_text_formatting">Formateo de texto avanzado</a></li> + <li>{{web.link("/es/docs/Learn/HTML/Introduction_to_HTML/Document_and_website_structure", "Estructura web y documentación")}}</li> + <li><a href="/es/docs/Learn/HTML/Introduction_to_HTML/Debugging_HTML">Depurar HTML</a></li> + <li>{{web.link("/es/docs/Learn/HTML/Introduction_to_HTML/Marking_up_a_letter", "Marcando para una carta")}}</li> + <li>{{web.link("/es/docs/Learn/HTML/Introduction_to_HTML/Structuring_a_page_of_content", "Estructuración del contenido de una página")}}</li> +</ul> diff --git a/files/es/learn/html/introduction_to_html/html_text_fundamentals/index.html b/files/es/learn/html/introduction_to_html/html_text_fundamentals/index.html new file mode 100644 index 0000000000..26c7cf3963 --- /dev/null +++ b/files/es/learn/html/introduction_to_html/html_text_fundamentals/index.html @@ -0,0 +1,971 @@ +--- +title: Fundamentos de texto en HTML +slug: Learn/HTML/Introduction_to_HTML/HTML_text_fundamentals +tags: + - CodingScripting + - Encabezados + - Estructuras + - Guía + - HTML + - Introducción a HTML + - Novato + - Principiante + - Párrafos + - Texto + - aprende + - semántica +translation_of: Learn/HTML/Introduction_to_HTML/HTML_text_fundamentals +original_slug: Learn/HTML/Introduccion_a_HTML/texto +--- +<div>{{LearnSidebar}}</div> + +<div>{{PreviousMenuNext("Learn/HTML/Introduction_to_HTML/The_head_metadata_in_HTML", "Learn/HTML/Introduction_to_HTML/Creating_hyperlinks", "Learn/HTML/Introduction_to_HTML")}}</div> + +<p class="summary">Una de las principales funciones de HTML es dar al texto estructura y significado (también conocido como {{Glossary("semantics", "semántica")}}), de forma que un navegador pueda mostrarlo correctamente. Este articulo explica la forma en que se puede usar {{Glossary("HTML")}} para estructurar una página de texto añadiendo encabezados y párrafos, enfatizando palabras, creando listas y más.</p> + +<table class="learn-box standard-table"> + <tbody> + <tr> + <th scope="row">Prerrequisitos:</th> + <td>Estar familiarizado con el HTML básico, que se expone en {{web.link("/es/docs/Learn/HTML/Introduction_to_HTML/Getting_started", "Empezar con HTML")}}.</td> + </tr> + <tr> + <th scope="row">Objetivo:</th> + <td>Aprender a marcar una página de texto básica para darle estructura y significado, incluidos párrafos, encabezados, listas, efectos de énfasis y citas.</td> + </tr> + </tbody> +</table> + +<h2 id="Conceptos_básicos_Encabezados_y_párrafos">Conceptos básicos: Encabezados y párrafos</h2> + +<p>La mayor parte del texto estructurado está compuesto por encabezados y párrafos, independientemente de si lees una historia, un periódico, un libro de texto, una revista, etc.</p> + +<p><img alt="Un ejemplo de la portada de un periódico, que muestra el uso de un encabezado, subtítulos y párrafos de nivel superior." src="https://mdn.mozillademos.org/files/12371/newspaper_small.jpg" style="display: block; margin: 0 auto;"></p> + +<p>El contenido estructurado simplifica la experiencia en la lectura y se disfruta más.</p> + +<p>En HTML, cada párrafo tiene que estar delimitado por un elemento {{HTMLElement("p")}}, como en este ejemplo:</p> + +<pre class="brush: html notranslate"><p>Soy un párrafo, ¡desde luego que lo soy!</p></pre> + +<p>Cada sección tiene que estar delimitada por un elemento de encabezado:</p> + +<pre class="brush: html notranslate"><h1>Yo soy el título de la historia</h1></pre> + +<p>Hay seis elementos de encabezado: {{HTMLElement("h1")}}, {{HTMLElement("h2")}}, {{HTMLElement("h3")}}, {{HTMLElement("h4")}}, {{HTMLElement("h5")}} y {{HTMLElement("h6")}}. Cada elemento representa un nivel de contenido diferente en el documento; <code><h1></code> representa el título principal, <code><h2></code> representa el subtítulo, <code><h3></code> representa el subtítulo del subtítulo, y así sucesivamente.</p> + +<h3 id="Cómo_establecer_la_estructura_jerárquica">Cómo establecer la estructura jerárquica</h3> + +<p>Por ejemplo, en esta historia, <code><h1></code> representa el título de la historia, <code><h2></code> representará el título de cada capítulo y <code><h3></code> las diferentes secciones del capítulo, y así sucesivamente.</p> + +<pre class="brush: html notranslate"><h1>El agujero aplastante</h1> + +<p>Por Chris Mills</p> + +<h2>Capítulo 1: La oscura noche</h2> + +<p>Era una noche oscura. En algún lugar, un búho ululó. La lluvia azotó el ...</p> + +<h2>Capítulo 2: El silencio eterno</h2> + +<p>Nuestro protagonista ni susurrar pudo al ver esa sombría figura ...</p> + +<h3>El espectro habla</h3> + +<p>Habían pasado varias horas más, cuando de repente el espectro se incorporó y exclamó: "¡Por favor, ten piedad de mi alma!"</p></pre> + +<p>Realmente es a tu elección lo que cada elemento involucrado represente, siempre y cuando la jerarquía tenga sentido. Solo es necesario que tengas en cuenta unas pocas buenas prácticas mientras creas la estructura:</p> + +<ul> + <li>Preferentemente debes usar solo un <code><h1></code> por página; este es el nivel de título superior, y todos los demás se sitúan por debajo de él en la jerarquía.</li> + <li>Asegúrate de que usas los títulos en el orden correcto en la jerarquía. No uses los <code><h3></code> para representar subtítulos, seguidos de los <code><h2></code> para representar los subtítulos de los subtítulos; eso no tiene sentido y provocará resultados extraños.</li> + <li>De los seis niveles de títulos disponibles, debes procurar no usar más de tres por página, a menos que creas que es realmente necesario. Los documentos con muchos niveles (es decir, una jerarquía de títulos muy profunda) son de difícil manejo y navegación. En esos casos se recomienda, si es posible, separar el contenido en varias páginas.</li> +</ul> + +<h3 id="¿Por_qué_necesitamos_estructura">¿Por qué necesitamos estructura?</h3> + +<p>Para responder a esta cuestión, echemos un vistazo a <a href="https://github.com/mdn/learning-area/blob/master/html/introduction-to-html/html-text-formatting/text-start.html">text-start.html</a>; el apartado inicial de nuestro ejemplo en curso para este artículo (una buena receta de hummus). Debes guardar una copia de este archivo en tu ordenador porque después la necesitarás para los ejercicios prácticos. El cuerpo (<code><body></code>) de este documento incluye varios elementos de contenido que no están marcados de ninguna manera pero están separados por saltos de línea (se ha pulsado <strong>Intro</strong>/<strong>Retorno</strong> para continuar en la siguiente línea).</p> + +<p>Sin embargo, cuando abres el documento en tu navegador, verás que el texto aparece... ¡como una masa enorme!</p> + +<p><img alt="Una página web que muestra un muro de texto sin formato, porque no hay elementos en la página para estructurarlo." src="https://mdn.mozillademos.org/files/12972/text-no-formatting.png" style="display: block; height: 420px; margin: 0px auto; width: 594px;"></p> + +<p>Esto se debe a que no hay elementos que den estructura al contenido, por lo que el navegador no sabe qué es un encabezado y qué es un párrafo. Además:</p> + +<ul> + <li>Los usuarios que miran una página web tienden a escanearla rápidamente para encontrar el contenido relevante que hay en ella y a menudo empiezan por leer los encabezados para comenzar. (Solemos <a href="http://www.nngroup.com/articles/how-long-do-users-stay-on-web-pages/">pasar muy poco tiempo en una página web</a>). Si no pueden ver nada útil en unos segundos, es probable que se sientan frustrados y se vayan a otro sitio.</li> + <li>Los motores de búsqueda que indizan tu página consideran el contenido de los títulos como palabras clave importantes e influyen en la puntuación de búsqueda de la página. Sin encabezados, tu página tendrá un rendimiento bajo en términos de optimización de motores de búsqueda {{Glossary("SEO")}}.</li> + <li>Las personas con discapacidad visual severa no suelen leer páginas web: en lugar de ello, las escuchan. Lo hacen con un software llamado {{interwiki("wikipedia", "Lector de pantalla")}}. Este software proporciona acceso rápido a un contenido textual dado. Entre las diversas técnicas que emplean, leen los encabezados para proporcionar un esquema del documento que permite a los usuarios encontrar rápidamente la información que quieren. Si no hay encabezados disponibles, se ven obligados a escuchar el documento entero. </li> + <li>Para aplicar estilos al contenido con {{Glossary("CSS")}}, o para que haga cosas interesantes con {{Glossary("JavaScript")}}, necesitas tener elementos que delimiten el contenido relevante para que CSS/JavaScript se puedan focalizar en este efectivamente.</li> +</ul> + +<p>Por lo tanto, debemos dar a nuestro contenido una estructura definida.</p> + +<h3 id="Aprendizaje_Activo_Dar_estructura_a_nuestro_contenido">Aprendizaje Activo: Dar estructura a nuestro contenido</h3> + +<p>Pasemos directamente a un ejemplo real. En el ejemplo de abajo, añade elementos al texto en bruto en el campo <em>Código editable</em> para que en el campo <em>Salida en vivo</em> aparezcan como un encabezado y dos párrafos.</p> + +<p>Si te equivocas, siempre puedes restablecer el código anterior pulsando el botón <em>Restablecer</em>. Si encallas, pulsa el botón <em>Mostrar solución</em> para ver la respuesta...</p> + +<div class="hidden"> +<h6 id="Código_reproducible">Código reproducible</h6> + +<pre class="brush: html notranslate"><h2>Salida en vivo</h2> + +<div class="output" style="min-height: 50px;"> +</div> + +<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 tabulación).</p> + +<textarea id="code" class="input" style="min-height: 100px; width: 95%">Mi breve relato Soy estadístico y mi nombre es Trish. + +Mis piernas son de cartón y estoy casada con un pez.</textarea> + +<div class="playable-buttons"> + <input id="reset" type="button" value="Restablecer"> + <input id="solution" type="button" value="Mostrar solución"> +</div></pre> + +<pre class="brush: css notranslate">html { + font-family: sans-serif; +} + +h2 { + font-size: 16px; +} + +.a11y-label { + margin: 0; + text-align: right; + font-size: 0.7rem; + width: 98%; +} + +body { + margin: 10px; + background: #f5f9fa; +}</pre> + +<pre class="brush: js notranslate">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; + +function updateCode() { + output.innerHTML = textarea.value; +} + +reset.addEventListener('click', function() { + textarea.value = code; + userEntry = textarea.value; + solutionEntry = htmlSolution; + solution.value = 'Mostrar solución'; + updateCode(); +}); + +solution.addEventListener('click', function() { + if(solution.value === 'Mostrar solución') { + textarea.value = solutionEntry; + solution.value = 'Ocultar solución'; + } else { + textarea.value = userEntry; + solution.value = 'Mostrar solución'; + } + updateCode(); +}); + +var htmlSolution = '<h1>Mi breve relato</h1>\n<p>Soy estadístico y mi nombre es Trish.</p>\n<p>Mis piernas son de cartón y estoy casada con un pez.</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 + +textarea.onkeydown = function(e){ + if (e.keyCode === 9) { + e.preventDefault(); + insertAtCaret('\t'); + } + + if (e.keyCode === 27) { + textarea.blur(); + } +}; + +function insertAtCaret(text) { + var scrollPos = textarea.scrollTop; + var caretPos = textarea.selectionStart; + + var front = (textarea.value).substring(0, caretPos); + var back = (textarea.value).substring(textarea.selectionEnd, textarea.value.length); + textarea.value = front + text + back; + caretPos = 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(){ + // 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 + if(solution.value === 'Mostrar solución') { + userEntry = textarea.value; + } else { + solutionEntry = textarea.value; + } + + updateCode(); +};</pre> +</div> + +<p>{{ EmbedLiveSample('Código_reproducible', 700, 400, "", "", "hide-codepen-jsfiddle") }}</p> + +<h3 id="¿Por_qué_necesitamos_semántica">¿Por qué necesitamos semántica?</h3> + +<p>Contamos con la semántica para todo lo que nos rodea. Nos basamos en experiencias previas para conocer la función de cada objeto cotidiano; cuando miramos un objeto, sabemos cuál debe ser su función. Entonces, por ejemplo, esperamos que un semáforo en rojo signifique "alto" y que un semáforo en verde signifique "avance". Las cosas se pueden complicar muy rápidamente si se aplica la semántica incorrecta. (¿Algún país usa rojo para significar "avance"? Esperemos que no).</p> + +<p>De manera similar, debemos asegurarnos de que utilizamos los elementos adecuados y damos a nuestro contenido el significado y función correctos y la apariencia adecuada. En este mismo sentido, el elemento {{HTMLElement("h1")}} es un elemento semántico que da al texto al que delimita la función (o significado) de un <em>titular de primer nivel en tu página</em>.</p> + +<pre class="brush: html notranslate"><h1>Este es un titular de primer nivel</h1></pre> + +<p>De manera predeterminada, el navegador le asignará una fuente de gran tamaño para darle el aspecto de un titular (aunque se le podrá dar el estilo que se quisiera usando CSS). Lo más importante es que su valor semántico se va a usar de diferente manera, por ejemplo, por los motores de búsqueda y los lectores de pantalla (como se mencionó antes).</p> + +<p>Por otra parte, podrías hacer que cualquier elemento <em>parezca</em> un titular de primer rango. Considera lo siguiente:</p> + +<pre class="brush: html notranslate"><span style="font-size: 32px; margin: 21px 0;">¿Es este un titular de primer rango?</span></pre> + +<p>Este es un elemento {{HTMLElement("span")}}. No tiene semántica. Se usa para delimitar contenido cuando se le quiere aplicar CSS (o tratarlo con JavaScript) sin proporcionarle ningún significado extra (encontrarás más información sobre este tipo de elemento más adelante en el curso). Hemos aplicado CSS a este elemento para que parezca un titular de primer nivel, pero al no tener valor semántico, no tiene ninguna de las ventajas añadidas que hemos descrito antes. Es una buena idea usar el elemento HTML apropiado para cada tarea.</p> + +<h2 id="Listas">Listas</h2> + +<p>Ahora volvamos nuestra atención hacia las listas. Las listas están en todos los aspectos de nuestra vida: desde la lista de compras a la lista de instrucciones que sigues inconscientemente para llegar a casa todos los días, o las listas de instrucciones que sigues en estos tutoriales. Las listas están en todos lados en la web también y hay tres diferentes tipos de las que nos vamos a ocupar.</p> + +<h3 id="Listas_no_ordenadas">Listas no ordenadas</h3> + +<p>Las listas no ordenadas se usan para marcar listas de artículos cuyo orden no es importante. Tomemos como ejemplo una lista de compras:</p> + +<pre class="brush: bash notranslate">leche +huevos +pan +hummus</pre> + +<p>Cada lista desordenada comienza con un elemento {{HTMLElement("ul")}} («<em>unordered list</em>») que delimita todos los elementos de la lista:</p> + +<pre class="brush: html notranslate"><ul> +leche +huevos +pan +hummus +</ul></pre> + +<p>El siguiente paso es delimitar cada artículo de la lista con un elemento {{HTMLElement("li")}} («<em>list item</em>»).</p> + +<pre class="brush: html notranslate"><ul> + <li>leche</li> + <li>huevos</li> + <li>pan</li> + <li>hummus</li> +</ul></pre> + +<h4 id="Aprendizaje_activo_marcar_una_lista_no_ordenada">Aprendizaje activo: marcar una lista no ordenada</h4> + +<p>Edita el siguiente ejemplo para crear tu propia lista HTML no ordenada.</p> + +<div class="hidden"> +<h6 id="Código_reproducible_2">Código reproducible</h6> + +<pre class="brush: html notranslate"><h2>Salida en vivo</h2> + +<div class="output" style="min-height: 50px;"> +</div> + +<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 tabulación).</p> + +<textarea id="code" class="input" style="min-height: 100px; width: 95%">leche +huevos +pan +hummus</textarea> + +<div class="playable-buttons"> + <input id="reset" type="button" value="Restablecer"> + <input id="solution" type="button" value="Mostrar solución"> +</div></pre> + +<pre class="brush: css notranslate">html { + font-family: sans-serif; +} + +h2 { + font-size: 16px; +} + +.a11y-label { + margin: 0; + text-align: right; + font-size: 0.7rem; + width: 98%; +} + +body { + margin: 10px; + background: #f5f9fa; +}</pre> + +<pre class="brush: js notranslate">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; + +function updateCode() { + output.innerHTML = textarea.value; +} + +reset.addEventListener('click', function() { + textarea.value = code; + userEntry = textarea.value; + solutionEntry = htmlSolution; + solution.value = 'Mostrar solución'; + updateCode(); +}); + +solution.addEventListener('click', function() { + if(solution.value === 'Mostrar solución') { + textarea.value = solutionEntry; + solution.value = 'Ocultar solución'; + } else { + textarea.value = userEntry; + solution.value = 'Mostrar solución'; + } + updateCode(); +}); + +var htmlSolution = '<ul>\n<li>leche</li>\n<li>huevos</li>\n<li>pan</li>\n<li>hummus</li>\n</ul>'; +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){ + if (e.keyCode === 9) { + e.preventDefault(); + insertAtCaret('\t'); + } + + if (e.keyCode === 27) { + textarea.blur(); + } +}; + +function insertAtCaret(text) { + var scrollPos = textarea.scrollTop; + var caretPos = textarea.selectionStart; + + var front = (textarea.value).substring(0, caretPos); + var back = (textarea.value).substring(textarea.selectionEnd, textarea.value.length); + textarea.value = front + text + back; + caretPos = 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(){ + // 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 + if(solution.value === 'Mostrar solución') { + userEntry = textarea.value; + } else { + solutionEntry = textarea.value; + } + + updateCode(); +};</pre> +</div> + +<p>{{ EmbedLiveSample('Código_reproducible_2', 700, 400, "", "", "hide-codepen-jsfiddle") }}</p> + +<h3 id="Listas_ordenadas">Listas ordenadas</h3> + +<p>Las listas ordenadas son aquellas en las que el orden de los elementos <em>sí</em> importa. Tomemos como ejemplo una lista de instrucciones para seguir un itinerario:</p> + +<pre class="brush: bash notranslate">Conduce hasta el final de la calle +Gira a la derecha +Sigue derecho por las dos primeras glorietas +Gira a la izquierda en la tercer glorieta +El colegio está a la derecha, 300 metros más adelante</pre> + +<p>La estructura de marcado es la misma que para las listas no ordenadas, excepto que debes delimitar los elementos de la lista con una etiqueta {{HTMLElement("ol")}} («ordered list»), en lugar de <code><ul></code>:</p> + +<pre class="brush: html notranslate"><ol> + <li>Conduce hasta el final de la calle</li> + <li>Gira a la derecha</li> + <li>Sigue derecho por las dos primeras glorietas</li> + <li>Gira a la izquierda en la tercer glorieta</li> + <li>El colegio está a tu derecha, 300 metros más adelante</li> +</ol></pre> + +<h4 id="Aprendizaje_activo_Marcar_una_lista_ordenada">Aprendizaje activo: Marcar una lista ordenada</h4> + +<p>Edita el siguiente ejemplo para crear tu propia lista ordenada en HTML.</p> + +<div class="hidden"> +<h6 id="Código_reproducible_3">Código reproducible</h6> + +<pre class="brush: html notranslate"><h2>Salida en vivo</h2> + +<div class="output" style="min-height: 50px;"> +</div> + +<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 tabulación).</p> + +<textarea id="code" class="input" style="min-height: 200px; width: 95%">Conduce hasta el final de la calle +Gira a la derecha +Sigue derecho por las dos primeras glorietas +Gira a la izquierda en la tercer glorieta +La escuela está a tu derecha, 300 metros por más adelante</textarea> + +<div class="playable-buttons"> + <input id="reset" type="button" value="Restablecer"> + <input id="solution" type="button" value="Mostrar solución"> +</div></pre> + +<pre class="brush: css notranslate">html { + font-family: sans-serif; +} + +h2 { + font-size: 16px; +} + +.a11y-label { + margin: 0; + text-align: right; + font-size: 0.7rem; + width: 98%; +} + +body { + margin: 10px; + background: #f5f9fa; +}</pre> + +<pre class="brush: js notranslate">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; + +function updateCode() { + output.innerHTML = textarea.value; +} + +reset.addEventListener('click', function() { + textarea.value = code; + userEntry = textarea.value; + solutionEntry = htmlSolution; + solution.value = 'Mostrar solución'; + updateCode(); +}); + +solution.addEventListener('click', function() { + if(solution.value === 'Mostrar solución') { + textarea.value = solutionEntry; + solution.value = 'Ocultar solución'; + } else { + textarea.value = userEntry; + solution.value = 'Mostrar solución'; + } + updateCode(); +}); + +var htmlSolution = '<ol>\n<li>Conduce hasta el final de la calle</li>\n<li>Gira a la derecha</li>\n<li>Sigue derecho por las dos primeras glorietas</li>\n<li>Gira a la izquierda en la tercer glorieta</li>\n<li>La escuela está a tu derecha, 300 metros más adelante</li>\n</ol>'; +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){ + if (e.keyCode === 9) { + e.preventDefault(); + insertAtCaret('\t'); + } + + if (e.keyCode === 27) { + textarea.blur(); + } +}; + +function insertAtCaret(text) { + var scrollPos = textarea.scrollTop; + var caretPos = textarea.selectionStart; + + var front = (textarea.value).substring(0, caretPos); + var back = (textarea.value).substring(textarea.selectionEnd, textarea.value.length); + textarea.value = front + text + back; + caretPos = 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(){ + // 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 + if(solution.value === 'Mostrar solución') { + userEntry = textarea.value; + } else { + solutionEntry = textarea.value; + } + + updateCode(); +};</pre> +</div> + +<p>{{ EmbedLiveSample('Código_reproducible_3', 700, 400, "", "", "hide-codepen-jsfiddle") }}</p> + +<h3 id="Aprendizaje_activo_marcar_la_página_de_tu_receta">Aprendizaje activo: marcar la página de tu receta</h3> + +<p>Llegados a este punto del artículo, tienes toda la información necesaria para marcar la página de ejemplo con tu receta. Puedes escoger entre guardar una copia local del archivo inicial <a href="https://github.com/mdn/learning-area/blob/master/html/introduction-to-html/html-text-formatting/text-start.html">text-start.html</a> y trabajar en él, o hacerlo sobre el ejemplo editable de abajo. Probablemente sea mejor trabajar en tu copia local porque podrás guardar tu progreso, mientras que si lo haces sobre el ejemplo editable, los cambios se perderán la próxima vez que cargues la página. Ambos métodos tienen pros y contras.</p> + +<div class="hidden"> +<h6 id="Código_reproducible_4">Código reproducible</h6> + +<pre class="brush: html notranslate"><h2>Salida en vivo</h2> + +<div class="output" style="min-height: 50px;"> +</div> + +<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 tabulación).</p> + +<textarea id="code" class="input" style="min-height: 200px; width: 95%">Receta rápida de hummus + + Esta receta hace un hummus rápido y sabroso, sin ensuciar. Ha sido adaptada de varias recetas diferentes que he leído a lo largo de los años. + + El hummus es una deliciosa pasta espesa que se usa mucho en platos griegos y del Medio Oriente. Es muy sabroso con ensalada, carne a las brasas y pan de pitta. + + Ingredientes + + 1 lata (400g) de garbanzos (garbanzos) + 175g de tahini + 6 tomates secos + Medio pimiento rojo + Una pizca de pimienta de cayena + 1 diente de ajo + Una pizca de aceite de oliva + + Instrucciones + + Retira la piel del ajo y pica en trozos grandes. + Retira todas las semillas y el tallo del pimiento y pica en trozos grandes. + Agrega todos los ingredientes en un procesador de alimentos. + Procesa todos los ingredientes en una pasta + Si deseas un hummus "grueso", procésalo corto tiempo + Si deseas un hummus "suave", procésalo por más tiempo + + Para un sabor diferente, puedes intentar mezclar en una pequeña medida de limón y cilantro, ají, lima y chipotle, harissa y menta, o espinacas y queso feta. Pruébalo y confirma que esté en su punto. + + Almacenamiento + + Refrigera el hummus terminado en un recipiente sellado. Deberías poder usarlo durante aproximadamente una semana después de haberlo hecho. Si comienza a burbujear, definitivamente debes desecharlo. + + El hummus es apto para congelar; debes descongelarlo y usarlo en un par de meses.</textarea> + +<div class="playable-buttons"> + <input id="reset" type="button" value="Restablecer"> + <input id="solution" type="button" value="Mostrar solución"> +</div></pre> + +<pre class="brush: css notranslate">html { + font-family: sans-serif; +} + +h2 { + font-size: 16px; +} + +.a11y-label { + margin: 0; + text-align: right; + font-size: 0.7rem; + width: 98%; +} + +body { + margin: 10px; + background: #f5f9fa; +}</pre> + +<pre class="brush: js notranslate">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; + +function updateCode() { + output.innerHTML = textarea.value; +} + +reset.addEventListener('click', function() { + textarea.value = code; + userEntry = textarea.value; + solutionEntry = htmlSolution; + solution.value = 'Mostrar solución'; + updateCode(); +}); + +solution.addEventListener('click', function() { + if(solution.value === 'Mostrar solución') { + textarea.value = solutionEntry; + solution.value = 'Ocultar solución'; + } else { + textarea.value = userEntry; + solution.value = 'Mostrar solución'; + } + updateCode(); +}); + +var htmlSolution = '<h1>Receta rápida de hummus</h1>\n\n<p>Esta receta hace un hummus rápido y sabroso, sin ensuciar. Ha sido adaptada de varias recetas diferentes que he leído a lo largo de los años.</p>\n\n<p>El hummus es una deliciosa pasta espesa que se usa mucho en platos griegos y del Medio Oriente. Es muy sabroso con ensalada, carne a las brasas y pan de pitta.</p>\n\n<h2>Ingredientes</h2>\n\n<ul>\n<li>1 lata (400g) de garbanzos (garbanzos)</li>\n<li>175g de tahini</li>\n<li>6 tomates secos</li>\n<li>Medio pimiento rojo</li>\n<li>Una pizca de pimienta de cayena</li>\n<li>1 diente de ajo</li>\n<li>Una pizca de aceite de oliva</li>\n</ul>\n\n<h2>Instrucciones</h2>\n\n<ol>\n <li>Retira la piel del ajo y pica en trozos grandes.</li>\n<li>Retira todas las semillas y el tallo del pimiento, y pica en trozos grandes.</li>\n<li>Agrega todos los ingredientes en un procesador de alimentos.</li>\n<li>Procesa todos los ingredientes en una pasta.</li>\n<li>Si deseas un hummus "grueso", procésalo corto tiempo.</li>\n<li>Si deseas un hummus "suave", procésalo por más tiempo.</li>\n</ol>\n\n<p>Para un sabor diferente, puedes intentar mezclar una pequeña medida de limón y cilantro, ají, lima y chipotle, harissa y menta, o espinacas y queso feta. Pruébalo y confirma que esté en su punto.</p>\n\n<h2>Almacenamiento</h2>\n\n<p>Refrigera el hummus terminado en un recipiente sellado. Deberías poder usarlo durante aproximadamente una semana después de haberlo hecho. Si comienza a burbujear, definitivamente debes desecharlo.</p>\n\n<p>El hummus es adecuado para congelar; debes descongelarlo y usarlo en un par de meses.</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 + +textarea.onkeydown = function(e){ + if (e.keyCode === 9) { + e.preventDefault(); + insertAtCaret('\t'); + } + + if (e.keyCode === 27) { + textarea.blur(); + } +}; + +function insertAtCaret(text) { + var scrollPos = textarea.scrollTop; + var caretPos = textarea.selectionStart; + + var front = (textarea.value).substring(0, caretPos); + var back = (textarea.value).substring(textarea.selectionEnd, textarea.value.length); + textarea.value = front + text + back; + caretPos = 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(){ + // 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 + if(solution.value === 'Mostrar solución') { + userEntry = textarea.value; + } else { + solutionEntry = textarea.value; + } + + updateCode(); +};</pre> +</div> + +<p>{{ EmbedLiveSample('Código_reproducible_4', 700, 400, "", "", "hide-codepen-jsfiddle") }}</p> + +<p>Si encallas, siempre puedes pulsar el botón <em>Mostrar solución</em> o comprobar el ejemplo completo <a href="https://github.com/mdn/learning-area/blob/master/html/introduction-to-html/html-text-formatting/text-complete.html">text-complete.html</a> en nuestro repositorio de Github.</p> + +<h3 id="Listas_anidadas">Listas anidadas</h3> + +<p>Es perfectamente correcto anidar una lista dentro de otra. Posiblemente quieras tener subelementos bajo elementos de rango superior. Tomemos la segunda lista de nuestro ejemplo de la receta:</p> + +<pre class="brush: html notranslate"><ol> + <li>Pela el ajo y picarlo en trozos gruesos.</li> + <li>Retira las semillas y el tallo del pimiento, y cortarlo en trozos gruesos.</li> + <li>Mete todos los alimentos en un procesador de alimentos.</li> + <li>Pica todos los ingredientes hasta conseguir una pasta.</li> + <li>Si deseas un hummus "grueso", procésalo corto tiempo.</li> + <li>Pica durante más tiempo si se desea obtener un hummus "suave".</li> +</ol></pre> + +<p>Puesto que los dos últimos elementos están estrechamente relacionados con el elemento anterior (se leen como subinstrucciones u opciones que encajan bajo ese elemento), puede tener sentido anidarlos dentro de su propia lista no ordenada e introducir esa lista bajo el cuarto elemento. Tendría el siguiente aspecto:</p> + +<pre class="brush: html notranslate"><ol> + <li>Pela el ajo y picarlo en trozos gruesos.</li> + <li>Retira las semillas y el tallo del pimiento, y cortarlo en trozos gruesos.</li> + <li>Mete todos los alimentos en un procesador de alimentos.</li> + <li>Procesa todos los ingredientes hasta conseguir una pasta. + <ul> + <li>Si deseas un hummus "grueso", procésalo corto tiempo.</li> + <li>Pica durante más tiempo si se desea obtener un hummus "suave".</li> + </ul> + </li> +</ol></pre> + +<p>Vuelve al ejemplo anterior y reescribe la lista de este modo.</p> + +<h2 id="Énfasis_e_importancia">Énfasis e importancia</h2> + +<p>En el lenguaje humano, a menudo enfatizamos ciertas palabras para alterar el significado de una frase, y a menudo queremos destacar ciertas palabras como importantes o diferentes en algún sentido. HTML nos dota de diversos elementos semánticos que nos permiten destacar contenido textual con tales efectos, y en esta sección veremos los más comunes.</p> + +<h3 id="Énfasis">Énfasis</h3> + +<p>Cuando queremos dar énfasis al lenguaje hablado, <em>acentuamos</em> ciertas palabras y así alteramos sutilmente el significado de lo que decimos. De manera similar, en el lenguaje escrito ponemos palabras en cursiva para destacarlas. Por ejemplo, las dos siguientes frases tienen diferente significado:</p> + +<p>Me alegro de que no llegues tarde.</p> + +<p>Me <em>alegro</em> de que no llegues <em>tarde</em>.</p> + +<p>La primera frase suena aliviada porque la persona no llega tarde. Por el contrario, la segunda suena sarcástica y un tanto pasivo-agresiva, expresa molestia porque la persona ha llegado algo tarde.</p> + +<p>En HTML usamos el elemento {{HTMLElement("em")}} («<em>emphasis</em>») para marcar estos casos. El documento logra entonces transmitir una lectura más interesante y además así lo reconocen los lectores de pantalla, que lo expresan con un diferente tono de voz. El navegador, de manera predeterminada, aplica el estilo de letra itálica, pero no debes utilizar esta etiqueta solamente para establecer el estilo de letra itálica. Para usar ese estilo, debes utilizar únicamente la etiqueta del elemento {{HTMLElement("span")}} y algo de CSS u otra etiqueta con el elemento {{HTMLElement("i")}} (ve abajo).</p> + +<pre class="brush: html notranslate"><p>Me <em>alegro</em> de que no llegues <em>tarde</em>.</p></pre> + +<h3 id="Importancia_fuerte">Importancia fuerte</h3> + +<p>Para enfatizar palabras importantes al hablar solemos acentuarlas, y al escribir lo hacemos en estilo <strong>negrita</strong>. Por ejemplo:</p> + +<p>Este líquido es <strong>altamente tóxico</strong>.</p> + +<p>Cuento contigo. <strong>¡No llegues tarde!</strong></p> + +<p>En HTML usamos el elemento {{HTMLElement("strong")}} (importancia fuerte) para marcar tales expresiones. El documento resulta entonces más útil, y de nuevo los lectores de pantalla reconocen estos elementos y el tono de voz cambia a uno más fuerte. El estilo negrita es el que aplican los navegadores por omisión, pero no debes usar esta etiqueta solamente para aplicar este estilo. Para hacer eso usa el elemento {{HTMLElement("span")}} y CSS, o un elemento {{HTMLElement("b")}} (ve más abajo).</p> + +<pre class="brush: html notranslate"><p>Este líquido es <strong>altamente tóxico</strong>.</p> + +<p>Cuento contigo. <strong>¡No llegues tarde!</strong></p></pre> + +<p>Puedes anidar elementos de énfasis dentro de elementos de importancia y viceversa si lo deseas:</p> + +<pre class="brush: html notranslate"><p>Este líquido es <strong>altamente tóxico</strong> — +si lo bebes, <strong>podrías <em>morir</em></strong>.</p></pre> + +<h3 id="Aprendizaje_activo_¡Seamos_importantes!">Aprendizaje activo: ¡Seamos importantes!</h3> + +<p>En esta sección de aprendizaje activo te proporcionamos un ejemplo editable. Practica un poco añadiendo algo de <em><strong>énfasis</strong></em> e <strong><em>importancia</em></strong> a las palabras que creas que lo necesitan.</p> + +<div class="hidden"> +<h6 id="Código_reproducible_5">Código reproducible</h6> + +<pre class="brush: html notranslate"><h2>Salida en vivo</h2> + +<div class="output" style="min-height: 50px;"> +</div> + +<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 tabulación).</p> + +<textarea id="code" class="input" style="min-height: 200px; width: 95%"><h1>Aviso importante</h1> +<p>El domingo 9 de enero de 2019, fue vista una pandilla de góticos + robando varios gnomos de jardín de un + centro comercial en el centro de Milwaukee. Todos ellos + vistiendo monos verdes y tontos sombreros, y + al parecer estaban pasando un buen rato. Si alguien + tiene alguna información sobre este incidente, por favor + póngase en contacto con la policía ahora.</p></textarea> + +<div class="playable-buttons"> + <input id="reset" type="button" value="Restablecer"> + <input id="solution" type="button" value="Mostrar solución"> +</div></pre> + +<pre class="brush: css notranslate">html { + font-family: sans-serif; +} + +h2 { + font-size: 16px; +} + +.a11y-label { + margin: 0; + text-align: right; + font-size: 0.7rem; + width: 98%; +} + +body { + margin: 10px; + background: #f5f9fa; +}</pre> + +<pre class="brush: js notranslate">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; + +function updateCode() { + output.innerHTML = textarea.value; +} + +reset.addEventListener('click', function() { + textarea.value = code; + userEntry = textarea.value; + solutionEntry = htmlSolution; + solution.value = 'Mostrar solución'; + updateCode(); +}); + +solution.addEventListener('click', function() { + if(solution.value === 'Mostrar solución') { + textarea.value = solutionEntry; + solution.value = 'Ocultar solución'; + } else { + textarea.value = userEntry; + solution.value = 'Mostrar solución'; + } + updateCode(); +}); + +var htmlSolution='<h1>Aviso importante</h1>\n<p>El <strong>domingo 9 de enero de 2019</strong>, fue vista una pandilla de <em>góticos</em> robando <strong>varios <em>gnomos</em> de jardín</strong> de un centro comercial en el centro de <strong>Milwaukee</strong>. Todos ellos vistiendo <em>monos verdes</em> y <em>tontos sombreros</em>, y al parecer estaban pasando un buen rato. Si alguien tiene <strong>alguna</strong> información sobre este incidente, póngase en contacto con la policía <strong>ahora</strong>.</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 + +textarea.onkeydown = function(e){ + if (e.keyCode === 9) { + e.preventDefault(); + insertAtCaret('\t'); + } + + if (e.keyCode === 27) { + textarea.blur(); + } +}; + +function insertAtCaret(text) { + var scrollPos = textarea.scrollTop; + var caretPos = textarea.selectionStart; + + var front = (textarea.value).substring(0, caretPos); + var back = (textarea.value).substring(textarea.selectionEnd, textarea.value.length); + textarea.value = front + text + back; + caretPos = 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(){ + // 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 + if(solution.value === 'Mostrar solución') { + userEntry = textarea.value; + } else { + solutionEntry = textarea.value; + } + + updateCode(); +};</pre> +</div> + +<p>{{ EmbedLiveSample('Código_reproducible_5', 700, 400, "", "", "hide-codepen-jsfiddle") }}</p> + +<h3 id="Cursiva_negrita_subrayado...">Cursiva, negrita, subrayado...</h3> + +<p>Los elementos que hemos comentado hasta ahora tienen asociada una semántica clara. La situación con {{HTMLElement("b")}} (negrita o «<b>bold</b>»), {{HTMLElement("i")}} (cursiva o «<i>italic</i>») y{{HTMLElement("u")}} (subrayado o «<u>underline</u>») es algo más complicada. Surgieron para que las personas pudieran escribir textos en negrita, cursiva o subrayado en un tiempo en el que pocos navegadores o ninguno admitían el CSS. Elementos como estos, que solo afectan a la presentación y no a la semántica, se conocen como <strong>elementos de presentación</strong> y no se deberían usar porque, como hemos visto, la semántica es muy importante para la accesibilidad y el SEO, entre otros aspectos.</p> + +<p>HTML5 redefinió los elementos <code><b></code>, <code><i></code> y <code><u></code> con roles semánticos nuevos un tanto confusos.</p> + +<p>Esta es la regla de oro: el uso de <code><b></code>, <code><i></code> o <code><u></code> resulta adecuado cuando transmiten el significado que suele transmitir el uso tradicional de las negritas, itálicas o el subrayado, si no hay ningún otro elemento que resulte más adecuado. Sin embargo, siempre resulta crítico mantener una actitud orientada a la accesibilidad. El concepto de itálica no es demasiado útil para las personas que usan lectores de pantalla o para las personas que utilizan un sistema de escritura distinto del alfabeto latino.</p> + +<ul> + <li>{{HTMLElement('i')}} se usa para transmitir el significado que tradicionalmente transmite la itálica: extranjerismos, clasificaciones taxonómicas, conceptos técnicos, un pensamiento...</li> + <li>{{HTMLElement('b')}} se usa para transmitir el significado que tradicionalmente transmite la negrita: palabras clave, nombres de productos, frases principales...</li> + <li>{{HTMLElement('u')}} se usa para transmitir el significado que tradicionalmente conlleva el subrayado: nombres propios, errores ortográficos...</li> +</ul> + +<div class="note"> +<p>Una observación prudente acerca del subrayado: <strong>La gente suele asociar estrechamente el subrayado con los hipervínculos.</strong> Por ello en la web es mejor reservar el subrayado para los enlaces. Utiliza el elemento {{HTMLElement('u')}} cuando resulte apropiado semánticamente, pero considera usar CSS para cambiar el subrayado predeterminado por algo más adecuado en la web. El siguiente ejemplo ilustra cómo lo puedes hacer.</p> +</div> + +<pre class="brush: html notranslate"><!-- nombres científicos --> +<p> + El colibrí garganta de rubí (<i>Archilochus colubris</i>) + es el colibrí más común en el este de América del Norte. +</p> + +<!-- extranjerismos --> +<p> + El menú era un mar de palabras exóticas como <i lang="uk-latn">vatrushka</i>, + <i lang="id">nasi goreng</i> y <i lang="fr">soupe à l'oignon</i>. +</p> + +<!-- un error ortográfico reconocido --> +<p> + Algún día aprenderé a <u>deletrear</u> mejor. +</p> + +<!-- Palabras clave destacadas en una serie de instrucciones --> +<ol> + <li> + <b>Corta</b> dos piezas de la hogaza de pan. + </li> + <li> + <b>Inserta</b> una rodaja de tomate y una hoja de + lechuga entre las rebanadas de pan. + </li> +</ol></pre> + +<h2 id="¡Pon_a_prueba_tus_habilidades!">¡Pon a prueba tus habilidades!</h2> + +<p>Has llegado al final de este artículo, pero ¿puedes recordar la información más importante? Encontrarás más ejercicios con los que comprobar que has retenido esta información antes de seguir adelante en {{web.link("/es/docs/Learn/HTML/Introduction_to_HTML/Test_your_skills:_HTML_text_basics", "Pon a prueba tus habilidades: Prueba de conocimientos básicos de HTML")}}.</p> + +<h2 id="Resumen">Resumen</h2> + +<p>¡Eso es todo por ahora! Este artículo debería haberte dado una buena idea de cómo comenzar a marcar texto en HTML y te ha presentado algunos de los elementos más importantes en este ámbito. Hay muchos más elementos semánticos para desarrollar en esta área, y veremos muchos más en nuestro artículo {{web.link("/en-US/docs/Learn/HTML/Introduction_to_HTML/Advanced_text_formatting", "Formateo de texto avanzado")}}, más adelante en el curso. En el siguiente artículo, veremos en detalle cómo {{web.link("/es/docs/Learn/HTML/Introduction_to_HTML/Creating_hyperlinks", "crear hipervínculos")}}, posiblemente el más importante elemento en la web.</p> + +<p>{{PreviousMenuNext("Learn/HTML/Introduction_to_HTML/The_head_metadata_in_HTML", "Learn/HTML/Introduction_to_HTML/Creating_hyperlinks", "Learn/HTML/Introduction_to_HTML")}}</p> + +<h2 id="En_este_módulo">En este módulo</h2> + +<ul> + <li>{{web.link("/es/docs/Learn/HTML/Introduction_to_HTML/Getting_started", "Empezar con HTML")}}</li> + <li>{{web.link("/es/docs/Learn/HTML/Introduction_to_HTML/The_head_metadata_in_HTML", "¿Qué hay en el «head»? Metadatos en HTML")}}</li> + <li>{{web.link("/es/docs/Learn/HTML/Introduction_to_HTML/HTML_text_fundamentals", "Fundamentos de texto HTML")}}</li> + <li>{{web.link("/es/docs/Learn/HTML/Introduction_to_HTML/Creating_hyperlinks", "Crear hipervínculos")}}</li> + <li>{{web.link("/es/docs/Learn/HTML/Introduction_to_HTML/Advanced_text_formatting", "Formateo de texto avanzado")}}</li> + <li>{{web.link("/es/docs/Learn/HTML/Introduction_to_HTML/Document_and_website_structure", "Estructura web y documentación")}}</li> + <li>{{web.link("/es/docs/Learn/HTML/Introduction_to_HTML/Debugging_HTML", "Depurar HTML")}}</li> + <li>{{web.link("/es/docs/Learn/HTML/Introduction_to_HTML/Marking_up_a_letter", "Marcado para una carta")}}</li> + <li>{{web.link("/es/docs/Learn/HTML/Introduction_to_HTML/Structuring_a_page_of_content", "Estructuración del contenido de una página")}}</li> +</ul> diff --git a/files/es/learn/html/introduction_to_html/index.html b/files/es/learn/html/introduction_to_html/index.html new file mode 100644 index 0000000000..cbbb3806eb --- /dev/null +++ b/files/es/learn/html/introduction_to_html/index.html @@ -0,0 +1,78 @@ +--- +title: Introducción a HTML +slug: Learn/HTML/Introduction_to_HTML +tags: + - CodingScripting + - Enlaces + - Estructura + - HTML + - Introducción a HTML + - Texto + - semántica +translation_of: Learn/HTML/Introduction_to_HTML +original_slug: Learn/HTML/Introduccion_a_HTML +--- +<div>{{LearnSidebar}}</div> + +<p class="summary">En su corazón, {{glossary("HTML")}} es un lenguaje muy sencillo compuesto de {{Glossary("Element", "elementos")}}, que se pueden aplicar a piezas de texto para darles un significado diferente en un documento (¿Esto es un párrafo? ¿Esto es una lista con viñetas? ¿Esto es parte de una tabla?), estructura un documento en secciones lógicas (¿Tiene una cabecera? ¿Tres columnas de contenido? ¿Un menú de navegación?), e incrusta contenido como imágenes y vídeos en una página. Este módulo introducirá los dos primeros de estos, e introduce conceptos fundamentales y la sintaxis que necesitas para entender HTML.</p> + +<div class="in-page-callout webdev"> +<h3 id="¿Quieres_transformarte_en_un_desarrollador_de_la_interfaz_de_usuario_web">¿Quieres transformarte en un desarrollador de la interfaz de usuario web?</h3> + +<p>Hemos elaborado un curso que incluye toda la información esencial que necesitas para trabajar hacia tu objetivo.</p> + +<p><a class="cta primary" href="/docs/Learn/Front-end_web_developer">Empieza aquí</a></p> +</div> + +<h2 id="Prerrequisitos">Prerrequisitos</h2> + +<p>Antes de empezar este módulo, no necesitas conocimientos previos de HTML, pero deberías estar, por lo menos, familiarizado con el uso básico de computadoras, y usar la Web pasivamente (es decir, sólo revisándola y consumiendo el contenido). Debes tener configurado un entorno de trabajo básico (como se detalla en {{web.link("/es/docs/Learn/Getting_started_with_the_web/Installing_basic_software", "Instalación de software básico")}}), y comprender cómo crear y administrar archivos (como se detalla en {{web.link("/es/docs/Learn/Getting_started_with_the_web/Dealing_with_files", "Manejo de archivos")}}). Ambos son parte de nuestro módulo completo {{web.link("/es/docs/Learn/Getting_started_with_the_web", "Introducción a la web")}} para principiantes.</p> + +<div class="note"> +<p><strong>Nota</strong>: Si estás trabajando en una computadora, tablet u otro dispositivo en donde no tengas la capacidad de crear tus propios archivos, podrías probar (en su mayoría) el código de los ejemplos en un programa para escribir código en línea como <a href="http://jsbin.com/">JSBin</a> o <a href="">Glitch</a>.</p> +</div> + +<h2 id="Guías">Guías</h2> + +<p>Este módulo contiene los siguientes artículos, que te llevarán a través de toda la teoría básica de HTML, y te proporcionarán una amplia oportunidad de probar algunas habilidades.</p> + +<dl> + <dt><a href="/es/docs/Learn/HTML/Introduction_to_HTML/Getting_started">Empezar con HTML</a></dt> + <dd>Cubre las bases absolutas de HTML, para que puedas empezar — definimos elementos, atributos, y todas los otros términos importantes que puedas haber escuchado, y en donde encajan en el lenguaje. También mostramos cómo está estructurado un elemento HTML, cómo está estructurada una página HTML típica, y explica otras características importantes. <span id="result_box" lang="es">En el camino, vamos a tener un juego con algo de HTML, ¡para alimentar tu intereses!</span></dd> + <dt><a href="/es/docs/Learn/HTML/Introduction_to_HTML/The_head_metadata_in_HTML">¿Qué hay en la cabecera? Metadatos en HTML</a></dt> + <dd>La cabecera de un documento HTML es la parte que <strong>no</strong> se muestra en el navegador web cuando se carga una página. Esta contiene información como el título ({{htmlelement("title")}}) de la página, enlaces a {{glossary("CSS")}} (si quieres estilizar tu contenido HTML con CSS), enlaces a favicons personalizados, y metadatos (que son los datos sobre el HTML, como quién lo escribió, y palabras clave que describen el documento).</dd> + <dt><a href="/es/docs/Learn/HTML/Introduction_to_HTML/HTML_text_fundamentals">Fundamentos de texto HTML</a></dt> + <dd>Uno de los principales trabajos de HTML es darle significado al texto (también conocido como <strong>semántica</strong>) para que el navegador sepa cómo mostrarlo correctamente. Este artículo trata cómo usar HTML para convertir un bloque de texto en una estructura de encabezados y párrafos, agregar énfasis o importancia a las palabras, crear listas y más.</dd> + <dt><a href="/es/docs/Learn/HTML/Introduction_to_HTML/Creating_hyperlinks">Creando hipervínculos</a></dt> + <dd>Los hipervínculos realmente son importantes — estos son los que hacen la Web. Este artículo muestra la sintaxis requerida para hacer un enlace, y explica las mejores prácticas sobre enlaces.</dd> + <dt><a href="/es/docs/Learn/HTML/Introduction_to_HTML/Advanced_text_formatting">Formateo de texto avanzado</a></dt> + <dd>Hay muchos otros elementos en HTML para formatear texto, que no hemos tratado en los artículos {{web.link("/es/docs/Learn/HTML/Introduction_to_HTML/HTML_text_fundamentals", "fundamentos de texto HTML")}}. Los siguientes elementos son menos conocidos, pero sigue siendo útil conocerlos. Aquí aprenderás sobre el marcado de citas, listas de descripción, código de computadoras y otros textos relacionados, <span id="result_box" lang="es"><span> subíndices y superíndices, información de contacto, y mucho más</span>.</span></dd> + <dt>{{web.link("/es/docs/Learn/HTML/Introduction_to_HTML/Document_and_website_structure", "Estructura web y documentación")}}</dt> + <dd>Así como definimos las partes individuales de tu página (como "un párrafo" o "una imagen"), HTML también se usa para definir las áreas de tu sitio web (como "la cabecera", "el menú de navegación", "la columna de contenido principal"). Este artículo trata sobre cómo planear una estructura básica del sitio web, y escribir el HTML para representar esa estructura.</dd> + <dt><a href="/es/docs/Learn/HTML/Introduction_to_HTML/Debugging_HTML">Depurar HTML</a></dt> + <dd>Escribir HTML está bien, pero ¿Qué pasa si algo está mal, y no puedes encontrar en dónde está el error en el código? Este artículo introducirá algunas herramientas que te podrán ayudar.</dd> +</dl> + +<h2 id="Evaluaciones">Evaluaciones</h2> + +<p>Las siguientes evaluaciones probarán tu entendimiento de las bases de HTML cubiertas en las guías anteriores.</p> + +<dl> + <dt>{{web.link("/es/docs/Learn/HTML/Introduction_to_HTML/Marking_up_a_letter", "Marcando para una carta")}}</dt> + <dd><span id="result_box" lang="es">Todos aprendemos a escribir una carta, tarde o temprano; ¡Este también es un ejemplo útil para poner a prueba nuestras habilidades de formato de texto! Así que en esta evaluación se te dará una carta a la cual le tendrás que dar un marcado HTML.</span></dd> + <dt>{{web.link("/es/docs/Learn/HTML/Introduction_to_HTML/Structuring_a_page_of_content", "Estructuración del contenido de una página")}}</dt> + <dd>Esta evaluación prueba tu capacidad para usar HTML para estructurar el contenido de una sencilla página, esta tiene una cabecera, pie de página, menú de navegación, contenido principal, y una barra lateral.</dd> +</dl> + +<h2 id="Ve_también">Ve también</h2> + +<dl> + <dt><a href="https://teach.mozilla.org/activities/web-lit-basics/">Bases de la alfabetización Web 1</a></dt> + <dd>Un curso excelente de la fundación Mozilla que explora y pone a prueba muchas de las habilidades sobre las cuales hablamos en el módulo de <em>Introducción a HTML</em>. Los estudiantes se familiarizan con la lectura, escritura y participan de la web en este módulo de seis partes. Descubre los fundamentos de la web a través de la producción y colaboración.</dd> +</dl> + +<div class="note"> +<h2 id="Retroalimentación">Retroalimentación</h2> + +<p>Ayúdanos a mejorar nuestras guías y tutoriales como esta respondiendo {{web.link("https://www.surveygizmo.com/s3/4871248/MDN-Guides-Survey", "nuestra encuesta aquí")}}.</p> +</div> diff --git a/files/es/learn/html/introduction_to_html/marking_up_a_letter/index.html b/files/es/learn/html/introduction_to_html/marking_up_a_letter/index.html new file mode 100644 index 0000000000..5e1f868f5a --- /dev/null +++ b/files/es/learn/html/introduction_to_html/marking_up_a_letter/index.html @@ -0,0 +1,89 @@ +--- +title: Marcando una Carta +slug: Learn/HTML/Introduction_to_HTML/Marking_up_a_letter +tags: + - Cabecera + - Codificación + - Enlaces + - Evaluación + - Principiante + - Texto +translation_of: Learn/HTML/Introduction_to_HTML/Marking_up_a_letter +original_slug: Learn/HTML/Introduccion_a_HTML/Marking_up_a_letter +--- +<div>{{LearnSidebar}}</div> + +<div>{{PreviousMenuNext("Learn/HTML/Introduction_to_HTML/Debugging_HTML", "Learn/HTML/Introduction_to_HTML/Structuring_a_page_of_content", "Learn/HTML/Introduction_to_HTML")}}</div> + +<p class="summary">Todos aprendemos a escribir una carta más tarde o más temprano; es también práctico practicar con nuestras habilidades para dar forma a los textos. En esta prueba deberás demostrar tus habilidades para dar forma a textos, incluyendo enlaces, además pondremos a prueba tu familiaridad con algunos contenidos de encabezamiento <code><head></code> en HTML.</p> + +<table class="learn-box standard-table"> + <tbody> + <tr> + <th scope="row">Prerrequisitos:</th> + <td>Antes de intentar este examen deberías haber trabajado los artículos <a href="/en-US/docs/Learn/HTML/Introduction_to_HTML/Getting_started">Getting started with HTML</a>, <a href="/en-US/docs/Learn/HTML/Introduction_to_HTML/The_head_metadata_in_HTML">What's in the head? Metadata in HTML</a>, <a href="/en-US/docs/Learn/HTML/Introduction_to_HTML/HTML_text_fundamentals">HTML text fundamentals</a>, <a href="/en-US/docs/Learn/HTML/Introduction_to_HTML/Creating_hyperlinks">Creating hyperlinks</a>, y <a href="/en-US/docs/Learn/HTML/Introduction_to_HTML/Advanced_text_formatting">Advanced text formatting</a>.</td> + </tr> + <tr> + <th scope="row">Objetivos:</th> + <td>Probar las habilidades básicas y avanzadas de formateo de texto e hyperlinks, y el conocimiento de los encabezamientos en HTML.</td> + </tr> + </tbody> +</table> + +<h2 id="Punto_de_partida">Punto de partida</h2> + +<p>Para comenzar esta prueba, deberemos copiar <a href="https://github.com/mdn/learning-area/blob/master/html/introduction-to-html/marking-up-a-letter-start/letter-text.txt">el texto que deberemos trabajar</a>, y el <a href="https://github.com/mdn/learning-area/blob/master/html/introduction-to-html/marking-up-a-letter-start/css.txt">CSS que necesitaremos incluir</a> en nuestro HTML. Crearemos un archivo nuevo <code>.html</code> usando nuestro editor de texto (o alternativamente usaremos otros como <a class="external external-icon" href="http://jsbin.com/">JSBin</a> o <a class="external external-icon" href="https://thimble.mozilla.org/">Thimble</a> para hacer nuestra prueba).</p> + +<h2 id="Resumen_del_proyecto_a_desarrollar">Resumen del proyecto a desarrollar</h2> + +<p>En este proyecto tu tarea será publicar una carta que debe estar alojada en la intranet de una universidad. La carta es la respuesta de un compañero investigador a un posible estudiante de postgrado en relación a su deseo de trabajar en la universidad.</p> + +<p>Semánticas de bloque/estructurales:</p> + +<ul> + <li>Estructura el documento completo incluyendo los elementos (doctype), {{htmlelement("html")}}, {{htmlelement("head")}} y {{htmlelement("body")}}.</li> + <li>Incluye los elementos correspondientes de marcado en la carta tales como párrafos y títulos, a excepción de los siguientes. Hay un título principal (la línea que comienza por "Re:") y tres títulos secundarios.</li> + <li>Las fechas de comienzo de los semestres, las materias y los bailes exóticos deben ser marcados con los correspondientes tipos de lista.</li> + <li>Colocar las dos direcciones dentro de elementos {{htmlelement("address")}}. Cada línea de la dirección debe comenzar en una línea nueva, pero no en un párrafo nuevo.</li> +</ul> + +<p>Semánticas intralínea:</p> + +<ul> + <li>Los nombres de remitente y destinatario (también "Tel" e "Email") deben ser marcado con importancia (strong).</li> + <li>Deberás usar los elementos apropiados en las cuatro fechas contenidas en el documento para que puedan ser leidas por los motores de lectura automática.</li> + <li>La primera dirección y la primera fecha en la carta deben ser asignadas a un atributo de clase llamado "sender-column"; el código CSS lo añadirás posteriormente para que quede bien alineado, como debe ser en un formato de carta clásico.</li> + <li>Deberás utilizar el elemento apropiado para los cinco acrónimos/abreviaciones contenidos en el texto principal, proporcionándoles las extensiones correspondientes.</li> + <li>Marca apropiadamente los seis sub/superíndices.</li> + <li>Los símbolos de los grados, los mayor que y los símbolos de multiplicar deben ser marcados usando las referencias correctas.</li> + <li>Marca al menos dos palabras en el texto con fuerte importancia/énfasis.</li> + <li>Hay dos lugares donde deberíamos añadir hyperlinks; añádelos con títulos. Como sitio donde apuntan simplemente usa: http://example.com.</li> + <li>Marca con el elemento apropiado el lema de la universidad y la cita del autor.</li> +</ul> + +<p>El encabezamiento del documento:</p> + +<ul> + <li>El juego de caracteres del documento deberá ser utf-8 usando una etiqueta meta adecuada.</li> + <li>El autor de la carta debe estar especificado con la etiqueta meta correspondiente.</li> + <li>El CSS proporcionado deberá estar incluido dentro de la etiqueta adecuada.</li> +</ul> + +<h2 id="Pistas_y_recomendaciones">Pistas y recomendaciones</h2> + +<ul> + <li>Utiliza el <a href="https://validator.w3.org/">Validador de HTML W3C HTML</a> para validar tu HTML; recibirás puntos de bonificación si se valida.</li> + <li>No necesitas conocer CSS para hacer este ejercicio; solo debes poner el CSS proporcionado en el elemento HTML adecuado.</li> +</ul> + +<h2 id="Example">Example</h2> + +<p>The following screenshot shows an example of what the letter might look like after being marked up.</p> + +<p><img alt="" src="https://mdn.mozillademos.org/files/12291/letter-screengrab.png" style="border: 1px solid black; display: block; margin: 0px auto;"></p> + +<h2 id="Evaluación">Evaluación</h2> + +<p>Si estás haciendo esta prueba como parte de un curso organizado, deberías entregar tu trabajo al profesor para que lo corrija. Si estás auto-aprendiendo puedes conseguir la guía de corrección fácilmente pidiendola en el <a href="https://discourse.mozilla-community.org/t/learning-web-development-marking-guides-and-questions/16294">Hilo del area de aprendizaje</a>, o en el canal IRC de <a href="irc://irc.mozilla.org/mdn">#mdn</a> en <a href="https://wiki.mozilla.org/IRC">Mozilla IRC</a>. Intenta hacerlo primero — no ganarás nada haciendo trampas.</p> + +<p>{{PreviousMenuNext("Learn/HTML/Introduction_to_HTML/Debugging_HTML", "Learn/HTML/Introduction_to_HTML/Structuring_a_page_of_content", "Learn/HTML/Introduction_to_HTML")}}</p> diff --git a/files/es/learn/html/introduction_to_html/structuring_a_page_of_content/index.html b/files/es/learn/html/introduction_to_html/structuring_a_page_of_content/index.html new file mode 100644 index 0000000000..3e86e166dd --- /dev/null +++ b/files/es/learn/html/introduction_to_html/structuring_a_page_of_content/index.html @@ -0,0 +1,106 @@ +--- +title: Estructuración de una Página de contenido +slug: Learn/HTML/Introduction_to_HTML/Structuring_a_page_of_content +tags: + - Aprendizaje + - Diseño + - Escribir Código + - Estructuración + - Evaluación + - HTML + - Principiante + - Prototipado + - semántica +translation_of: Learn/HTML/Introduction_to_HTML/Structuring_a_page_of_content +original_slug: Learn/HTML/Introduccion_a_HTML/Estructuración_de_una_página_de_contenido +--- +<div>{{LearnSidebar}}</div> + +<div>{{PreviousMenu("Learn/HTML/Introduction_to_HTML/Marking_up_a_letter", "Learn/HTML/Introduction_to_HTML")}} </div> + +<p class="summary"><span id="result_box" lang="es"><span>La estructuración de una página de contenido lista para su uso mediante CSS es una habilidad muy importante para dominar, por lo que en esta evaluación verá su capacidad para pensar en cómo podría finalizar una página buscando y eligiendo la semántica estructural adecuada para construir</span> <span>un diseño en la parte superior.</span></span></p> + +<div id="gt-res-content"> +<div dir="ltr" style="zoom: 1;"> </div> +</div> + +<table class="learn-box standard-table"> + <tbody> + <tr> + <th scope="row">Prerequisitos:</th> + <td><span id="result_box" lang="es"><span>Antes de intentar esta evaluación, usted debería haber trabajado ya en el resto del curso, con un énfasis particular en la </span></span><a href="/en-US/docs/Learn/HTML/Introduction_to_HTML/Document_and_website_structure">Estructura del Documento y del Sitio Web.</a><a href="https://developer.mozilla.org/es/docs/Learn/HTML/Introduccion_a_HTML/estructura">.</a></td> + </tr> + <tr> + <th scope="row">Objetivo:</th> + <td><span id="result_box" lang="es"><span>Probar el conocimiento de las estructuras de páginas web y cómo representar un prototipado de diseño prospectivo en el marcado.</span></span></td> + </tr> + </tbody> +</table> + +<h2 id="Punto_de_partida">Punto de partida</h2> + +<p>Para comenzar esta evaluación, debería tomar el <a href="https://github.com/mdn/learning-area/blob/master/html/introduction-to-html/structuring-a-page-of-content-start/assets.zip?raw=true"> archivo zip que contiene todos los activos de inicio</a>. El archivo zip contiene:</p> + +<ul> + <li>El HTML que necesitas para añadir marcado estructural.</li> + <li>CSS para dar el estilo a tu marcado.</li> + <li>Las imágenes que serán utilizadas en la página.</li> +</ul> + +<p>Crée el ejemplo en su ordenador personal, o como alternativa utilize un sitio como <a class="external external-icon" href="http://jsbin.com/">JSBin</a> o <a class="external external-icon" href="https://thimble.mozilla.org/">Thimble</a> para hacer su evaluación.</p> + +<h2 id="Breve_Proyecto">Breve Proyecto</h2> + +<p>Para este proyecto, su tarea es tomar el contenido de la página principal de un sitio web de observación de aves y añadir elementos estructurales a la misma para que pueda tener un diseño de página aplicado a ella. Necesita tener:</p> + +<ul> + <li> Un encabezado que abarca todo el ancho del sitio que contiene el título principal de la página, el logotipo del sitio y el menú de navegación. El título y el logotipo aparecen lado a lado una vez que se aplica el estilo, y la navegación aparece debajo de esos dos elementos.</li> + <li> Un área de contenido principal que contiene dos columnas: un bloque principal para contener el texto de bienvenida y una barra lateral para contener miniaturas de imágenes.</li> + <li> Un pie de página que contiene información sobre derechos de autor y créditos.</li> +</ul> + +<p>Debe agregar una presentación adecuada para:</p> + +<ul> + <li>El encabezado</li> + <li>El menú de navegación</li> + <li>El contenido principal</li> + <li>El texto de bienvenida</li> + <li>La barra lateral de imágenes</li> + <li>El pié de página</li> +</ul> + +<p>También debería:</p> + +<ul> + <li> Aplicar el CSS proporcionado a la página agregando otro elemento {{htmlelement ("link")}} justo debajo del existente que se proporciona al principio.</li> +</ul> + +<h2 id="Consejos">Consejos</h2> + +<ul> + <li>Utilize el <a href="https://validator.w3.org/">validador de HTML W3C </a> para validar su HTML; Obtendrá puntos de bonificación si valida tanto como sea posible (la línea "googleapis" es una línea utilizada para importar fuentes personalizadas en la página del servicio Google Fonts, no se valida, así que no te preocupes. )</li> + <li>No necesita saber CSS para hacer esta evaluación; Sólo tiene que poner el CSS proporcionado dentro de un elemento HTML.</li> + <li>El CSS proporcionado está diseñado para que cuando se agreguen los elementos estructurales correctos al marcado, aparezcan verdes en la página representada.</li> + <li>Si se está quedando atascado y no puede imaginar ni qué elementos poner ni donde ponerlos , a menudo ayuda a dibujar un diagrama de bloques simple del diseño de página, y escribir en los elementos que usted piensa que debe envolver cada bloque.</li> +</ul> + +<h2 id="Ejemplo">Ejemplo</h2> + +<p>La siguiente captura de pantalla muestra un ejemplo de cómo podría verse la letra después de haber sido marcada.</p> + +<p><img alt='The finished example for the assessment; a simple webpage about birdwatching, including a heading of "Birdwatching", bird photos, and a welcome message' src="https://mdn.mozillademos.org/files/12449/example-page.png" style="display: block; margin: 0 auto;"></p> + +<h2 id="Evaluación">Evaluación</h2> + +<p>Si está siguiendo esta evaluación como parte de un curso organizado, debe ser capaz de dar su trabajo a su maestro / mentor para el marcado. Si usted está aprendiendo por si mismo, entonces puede obtener la guía de marcado con bastante facilidad preguntando sobre ello en la lista de correo<a href="https://lists.mozilla.org/listinfo/dev-mdc"> dev-mdc</a> , o en el canal IRC <a href="irc://irc.mozilla.org/mdn">#mdn</a> en <a href="https://wiki.mozilla.org/IRC">Mozilla IRC</a>. Pruebe a hacer el ejercicio primero - ¡No hay nada que ganar por hacer trampa!</p> + +<p>{{PreviousMenu("Learn/HTML/Introduction_to_HTML/Marking_up_a_letter", "Learn/HTML/Introduction_to_HTML")}}</p> + +<div class="s3gt_translate_tooltip" id="s3gt_translate_tooltip" style="position: absolute; left: 61px; top: 1812px; opacity: 0.7;"> +<div class="s3gt_translate_tooltip_mini" id="s3gt_translate_tooltip_mini_logo" title="Traducir texto seleccionado"> </div> + +<div class="s3gt_translate_tooltip_mini" id="s3gt_translate_tooltip_mini_sound" title="Reproducir"> </div> + +<div class="s3gt_translate_tooltip_mini" id="s3gt_translate_tooltip_mini_copy" title="Copy text to Clipboard"> </div> +</div> diff --git a/files/es/learn/html/introduction_to_html/test_your_skills_colon__advanced_html_text/index.html b/files/es/learn/html/introduction_to_html/test_your_skills_colon__advanced_html_text/index.html new file mode 100644 index 0000000000..908d34bcc6 --- /dev/null +++ b/files/es/learn/html/introduction_to_html/test_your_skills_colon__advanced_html_text/index.html @@ -0,0 +1,68 @@ +--- +title: 'Pon a prueba tus habilidades: texto HTML avanzado' +slug: Learn/HTML/Introduction_to_HTML/Test_your_skills:_Advanced_HTML_text +translation_of: Learn/HTML/Introduction_to_HTML/Test_your_skills:_Advanced_HTML_text +original_slug: Learn/HTML/Introduccion_a_HTML/Test_your_skills:_Advanced_HTML_text +--- +<div>{{learnsidebar}}</div> + +<p><span class="tlid-translation translation" lang="es"><span title="">El objetivo de esta prueba de habilidad es evaluar si ha entendido nuestras </span></span> <u><a href="/es/docs//en-US/docs/Learn/HTML/Introduction_to_HTML/Advanced_text_formatting">formato de texto avanzado</a></u> articulo.</p> + +<div class="blockIndicator note"> +<p><strong>NOTA</strong>:<span class="tlid-translation translation" lang="es"><span title="">Puede probar soluciones en los editores interactivos a continuación;</span> <span title="">sin embargo, puede resultar útil descargar el código y utilizar una herramienta en línea como</span></span> <a href="https://codepen.io/">CodePen</a>, <a href="https://jsfiddle.net/">jsFiddle</a>, o <a href="https://glitch.com/">Glitch </a><span class="tlid-translation translation" lang="es"><span title="">trabajar en las tareas.</span></span><br> + <br> + <span class="tlid-translation translation" lang="es"><span title="">Si se atasca, pídanos ayuda; consulte la</span></span> {{anch("Assessment or further help")}} section at the bottom of this page.</p> +</div> + +<h2 id="Texto_HTML_avanzado_1"><span class="tlid-translation translation" lang="es"><span title="">Texto HTML avanzado 1</span></span></h2> + +<p><span class="tlid-translation translation" lang="es"><span title="">En esta tarea, queremos que convierta los animales proporcionados y sus definiciones en una lista de descripción.</span><br> + <br> + <span title="">Intente actualizar el código en vivo a continuación para recrear el ejemplo terminado:</span></span></p> + +<p>{{EmbedGHLiveSample("learning-area/html/introduction-to-html/tasks/advanced-text/advanced-text1.html", '100%', 700)}}</p> + +<div class="blockIndicator note"> +<p><a href="/es/docs/https://github.com/mdn/learning-area/blob/master/html/introduction-to-html/tasks/advanced-text/advanced-text1-download.html">Descarga el puno de partida para esta tarea</a> to work in your own editor or in an online editor.</p> +</div> + +<h2 id="Texto_HTML_avanzado_2"><span class="tlid-translation translation" lang="es"><span title="">Texto HTML avanzado 2</span></span></h2> + +<p><span class="tlid-translation translation" lang="es"><span title="">En esta tarea, queremos que agregue algo de semántica al HTML proporcionado de la siguiente manera:</span></span></p> + +<ul> + <li><span class="tlid-translation translation" lang="es"><span title="">Convierta el segundo párrafo en una cita a nivel de bloque e indique semánticamente que la cita se toma de</span></span> <a href="/en-US/docs/Learn/Accessibility">Accesibilidad</a>.</li> + <li><span class="tlid-translation translation" lang="es"><span title="">Marque semánticamente "HTML" y "CSS" como acrónimos, proporcionando expansiones como información sobre herramientas.</span></span></li> + <li><span class="tlid-translation translation" lang="es"><span title="">Asocia semánticamente fechas legibles por máquina con las fechas en el texto.</span></span></li> + <li><span class="tlid-translation translation" lang="es"><span title="">Utilice subíndice y superíndice para proporcionar la semántica correcta para las fórmulas químicas y fechas, y hacer que se muestren correctamente.</span></span></li> +</ul> + +<p><span class="tlid-translation translation" lang="es"><span title="">Intente actualizar el código en vivo a continuación para recrear el ejemplo terminado:</span></span></p> + +<p>{{EmbedGHLiveSample("learning-area/html/introduction-to-html/tasks/advanced-text/advanced-text2.html", '100%', 700)}}</p> + +<div class="blockIndicator note"> +<p><a href="/es/docs/https://github.com/mdn/learning-area/blob/master/html/introduction-to-html/tasks/advanced-text/advanced-text2-download.html">Descarga el punto de partida para esta tarea </a><span class="tlid-translation translation" lang="es"><span title="">para trabajar en su propio editor o en un editor en línea.</span></span></p> +</div> + +<h2 id="Evaluación_o_ayuda_adicional"><span class="tlid-translation translation" lang="es"><span title="">Evaluación o ayuda adicional</span></span></h2> + +<div class="text-wrap tlid-copy-target"> +<div class="result-shield-container tlid-copy-target"><span class="tlid-translation translation" lang="es"><span title="">Puede practicar estos ejemplos en los editores interactivos anteriores.</span><br> +<br> +<span title="">Si desea que se evalúe su trabajo, o está atascado y desea pedir ayuda:</span></span></div> + +<div class="result-shield-container tlid-copy-target"></div> +</div> + +<ol> + <li><span class="tlid-translation translation" lang="es"><span title="">Pon tu trabajo en un editor que se pueda compartir en línea, como</span></span> <a href="https://codepen.io/">CodePen</a>, <a href="https://jsfiddle.net/">jsFiddle</a>, o <a href="https://glitch.com/">Glitch</a>. <span class="tlid-translation translation" lang="es"><span title="">Puede escribir el código usted mismo o utilizar los archivos de punto de inicio vinculados en las secciones anteriores.</span></span></li> + <li><span class="tlid-translation translation" lang="es"><span title="">Escriba una publicación solicitando evaluación y / o ayuda en el</span></span> <a class="external external-icon" href="https://discourse.mozilla.org/c/mdn/learn" rel="noopener">MDN Discourse forum Learning category</a>. <span class="tlid-translation translation" lang="es"><span title="">Tu publicación debe incluir:</span></span> + <ul> + <li><span class="tlid-translation translation" lang="es"><span title="">Un título descriptivo como "Se busca evaluación para la prueba de habilidad de texto avanzado HTML 1".</span></span></li> + <li><span class="tlid-translation translation" lang="es"><span title="">Detalles de lo que ya ha probado y lo que le gustaría que hiciéramos, p. Ej.</span> <span title="">si está atascado y necesita ayuda, o quiere una evaluación.</span></span></li> + <li><span class="tlid-translation translation" lang="es"><span title="">Un enlace al ejemplo que desea evaluar o con el que necesita ayuda, en un editor que se puede compartir en línea (como se mencionó en el paso 1 anterior).</span> <span title="">Esta es una buena práctica para entrar: es muy difícil ayudar a alguien con un problema de codificación si no puede ver su código.</span></span></li> + <li><span class="tlid-translation translation" lang="es"><span title="">Un enlace a la página de la tarea o evaluación real, para que podamos encontrar la pregunta con la que desea ayuda.</span></span></li> + </ul> + </li> +</ol> diff --git a/files/es/learn/html/introduction_to_html/test_your_skills_colon__html_text_basics/index.html b/files/es/learn/html/introduction_to_html/test_your_skills_colon__html_text_basics/index.html new file mode 100644 index 0000000000..c84019c672 --- /dev/null +++ b/files/es/learn/html/introduction_to_html/test_your_skills_colon__html_text_basics/index.html @@ -0,0 +1,73 @@ +--- +title: 'Prueba tus habilidades: Texto básico HTML' +slug: Learn/HTML/Introduction_to_HTML/Test_your_skills:_HTML_text_basics +tags: + - Aprendizaje + - HTML + - Principiante + - Prueba tus habilidades + - Texto +translation_of: Learn/HTML/Introduction_to_HTML/Test_your_skills:_HTML_text_basics +original_slug: Learn/HTML/Introduccion_a_HTML/Prueba_tus_habilidades:_Texto_básico_HTML +--- +<div>{{learnsidebar}}</div> + +<p>El objetivo de esta prueba de habilidad es evaluar si has comprendido el artículo <a href="/es/docs/Learn/HTML/Introduccion_a_HTML/texto">Fundamentos de texto en HTML</a>.</p> + +<div class="blockIndicator note"> +<p><strong>Nota:</strong> Puedes intentar resolverlo en los editores interactivos de más abajo, sin embargo puede ser muy úytil descargar el código y usar una herramienta en línea como <a href="https://codepen.io/">CodePen</a>, <a href="https://jsfiddle.net/">jsFiddle</a>, o <a href="https://glitch.com/">Glitch</a> para trabajar en las tareas.<br> + <br> + Si te atascas, entonces pídenos ayuda — busca en la sección {{anch("Assessment or further help")}} al final de esta página.</p> +</div> + +<h2 id="Texto_básico_HTML_1">Texto básico HTML 1</h2> + +<p>En esta tarea queremos que etiquetes el HTML entregado utilizando elementos semánticos de encabezado y párrafo. Intenta actualizando el código más abajo para recrear el ejemplo terminado:</p> + +<p>{{EmbedGHLiveSample("learning-area/html/introduction-to-html/tasks/basic-text/basic-text1.html", '100%', 700)}}</p> + +<div class="blockIndicator note"> +<p><a href="https://github.com/mdn/learning-area/blob/master/html/introduction-to-html/tasks/basic-text/basic-text1-download.html">Descarga el punto de inicio de esta tarea</a> para trabajar en tu propio editor o en un editor en línea.</p> +</div> + +<h2 id="Texto_básico_HTML_2">Texto básico HTML 2</h2> + +<p>En esta tarea necesitamos que cambies la primera lista no marcada en una lista no ordenada, y la segunda en una lista ordenada.</p> + +<p>Intenta actualizando el código más abajo para recrear el ejemplo terminado:</p> + +<p>{{EmbedGHLiveSample("learning-area/html/introduction-to-html/tasks/basic-text/basic-text2.html", '100%', 700)}}</p> + +<div class="blockIndicator note"> +<p><a href="https://github.com/mdn/learning-area/blob/master/html/introduction-to-html/tasks/basic-text/basic-text2-download.html">Descarga el punto de inicio de esta tarea</a> para trabajar en tu propio editor o en un editor en línea.</p> +</div> + +<h2 id="Texto_básico_HTML_3">Texto básico HTML 3</h2> + +<p>En esta tarea se te entrega un párrafo, y tu objetivo es usar algunos elementos en línea para marcar algunas palabras con importancia, y otras con énfasis</p> + +<p>Intenta actualizando el código más abajo para recrear el ejemplo terminado:</p> + +<p>{{EmbedGHLiveSample("learning-area/html/introduction-to-html/tasks/basic-text/basic-text3.html", '100%', 700)}}</p> + +<div class="blockIndicator note"> +<p><a href="https://github.com/mdn/learning-area/blob/master/html/introduction-to-html/tasks/basic-text/basic-text3-download.html">Descarga el punto de inicio de esta tarea</a> para trabajar en tu propio editor o en un editor en línea.</p> +</div> + +<h2 id="Evaluación_o_ayuda_adicional">Evaluación o ayuda adicional</h2> + +<p>Puedes practicar estos ejemplos en los editores interactivos que se encuentran más arriba.</p> + +<p>Si deseas que tu trabajo sea evaluado, o estás atorado y quieres solicitar ayuda:</p> + +<ol> + <li>Pon tu trabajo en un editor en línea con capacidad de compartir como <a href="https://codepen.io/">CodePen</a>, <a href="https://jsfiddle.net/">jsFiddle</a>, o <a href="https://glitch.com/">Glitch</a>. Puedes escribir el código por ti mismo, o usar los archivos de punto de inicio enlazados en las secciones superiores.</li> + <li>Escribe una publicación solicitando evaluacion y/o ayuda en el <a class="external external-icon" href="https://discourse.mozilla.org/c/mdn/learn" rel="noopener">MDN Discourse forum Learning category</a>. Tu publicación debería incluir: + <ul> + <li>Un título descriptivo como "Solicito evaluacion para la prueba de habilidad de texto básico HTML 1".</li> + <li>Detalles de lo que ya has intentado, y que te gustaría que hiciéramos, por ejemplo, si estas atascado y necesitas ayuda, o quieres una evaluación.</li> + <li>Un enlace al ejemplo que quieres que sea evaluado o por el que necesitas ayuda en un editor en linea con capacidad de compartir (como se mencionó en el paso 1 más arriba). Esta es una buena práctica - Es muy dificil ayudar a alguien con un problema de codificación si no puedes ver su código.</li> + <li>Un enlace a la tarea o página de evaluacion actual, para que podamos encontrar la pregunta con la cual necesitas ayuda.</li> + </ul> + </li> +</ol> diff --git a/files/es/learn/html/introduction_to_html/test_your_skills_colon__links/index.html b/files/es/learn/html/introduction_to_html/test_your_skills_colon__links/index.html new file mode 100644 index 0000000000..20e3e0f363 --- /dev/null +++ b/files/es/learn/html/introduction_to_html/test_your_skills_colon__links/index.html @@ -0,0 +1,100 @@ +--- +title: 'Prueba tus habilidades: Enlaces' +slug: Learn/HTML/Introduction_to_HTML/Test_your_skills:_Links +translation_of: Learn/HTML/Introduction_to_HTML/Test_your_skills:_Links +original_slug: Learn/HTML/Introduccion_a_HTML/Prueba_tus_habilidades:_Enlaces +--- +<div>{{learnsidebar}}</div> + +<p>El objetivo de esta pueba de habilidad es evaluar si has comprendido nuestro artículo <a href="/en-US/docs/Learn/HTML/Introduction_to_HTML/Creating_hyperlinks">Creando hipervínculos</a>.</p> + +<div class="blockIndicator note"> +<p><strong>Nota</strong>: Puedes intentar resolver esta prueba en los editores interactivos más abajo, sin embargo, puede ser útil descargar el código y usar una herramienta en línea como <a href="https://codepen.io/">CodePen</a>, <a href="https://jsfiddle.net/">jsFiddle</a>, o <a href="https://glitch.com/">Glitch</a> para trabajar en las tareas.<br> + <br> + Si te atascas, pide ayuda — mira la sección {{anch("Evaluación o ayuda adicional")}} al final de esta página.</p> +</div> + +<h2 id="Enlaces_1">Enlaces 1</h2> + +<p>En esta tarea necesitamos tu ayuda para completar los enlaces en nuestra página de información sobre Ballenas:</p> + +<ul> + <li>El primer enlace debería estar vinculado a una página llamada <code>whales.html</code>, que está en el mismo directorio que la página actual.</li> + <li>También queremos agregarle un cuadro de información ("tooltip") cuando pase el puntero sobre el enlace, que le diga al usuario que la página incluye informacion sobre las Ballenas azules y las Ballenas blancas.</li> + <li>El segundo enlace deberá convertirse en un vínculo que abra un correo electrónico en la aplicación de correo por defecto del usuario, con el destinatario "whales@example.com".</li> + <li>Conseguirás un punto de bonificación si tambien configuras que la línea del asunto del correo electrónico tenga como texto predeterminado "Preguntas sobre Ballenas".</li> +</ul> + +<div class="blockIndicator note"> +<p><strong>Nota:</strong> El primer enlace en el ejemplo tiene el atributo <code>target="_blank"</code> , así que cuando haces click en él, abre la página en una pestaña nueva. Esto no es estrictamente una buena práctica, pero lo hemos hecho aquí para que la página no se abra en el <code><iframe></code> incrustado, ¡eliminando el código de ejemplo en el proceso!</p> +</div> + +<p>Intenta actualizar el código en vivo más abajo para mostrar el ejemplo terminado:</p> + +<p>{{EmbedGHLiveSample("learning-area/html/introduction-to-html/tasks/links/links1.html", '100%', 700)}}</p> + +<div class="blockIndicator note"> +<p><a href="https://github.com/mdn/learning-area/blob/master/html/introduction-to-html/tasks/links/links1-download.html">Descarga el inicio de esta tarea</a> para trabajar en tu propio editor o en un editor en línea.</p> +</div> + +<h2 id="Enlaces_2">Enlaces 2</h2> + +<p>En esta tarea queremos que completes los cuatro enlaces para que se dirijan al lugar apropiado:</p> + +<ul> + <li>El primer enlace debería vincular a una imagen llamada <code>blue-whale.jpg</code>, que se encuentra en una carpeta llamada <code>blue</code> dentro de la carpeta actual.</li> + <li>El segundo enlace debería vincular a una imagen llamada <code>narwhal.jpg</code>, que se encuentra en una carpeta llamada <code>narwhal</code>, que se encuentra en un nivel de carpetas sobre la carpeta actual.</li> + <li>El tercer enlace deberia vincular al sitio de búsqueda de imágenes de Google del Reino Unido. La URL base es <code>https://www.google.co.uk</code>, y la búsqueda de imágenes se ubica en un subdirectorio llamado <code>imghp</code>.</li> + <li>El cuarto enlace debería vincular al párrafo más al final de la página actual. Que tiene la ID <code>bottom</code>.</li> +</ul> + +<div class="blockIndicator note"> +<p><strong>Nota:</strong> Los primeros tres enlaces en el ejemplo tienen el atributo <code>target="_blank"</code> especificado en ellos, abren la página enlazada en una nueva pestaña del navegador. Esto no es estrictamente una buena práctica, pero hemos hecho esto aquí para que las páginas no se abran dentro del <code><iframe></code> incrustado, ¡eliminando el código de ejemplo en el proceso!</p> +</div> + +<p>Intenta actualizar el código en vivo más abajo para mostrar el ejemplo terminado:</p> + +<p>{{EmbedGHLiveSample("learning-area/html/introduction-to-html/tasks/links/links2.html", '100%', 700)}}</p> + +<div class="blockIndicator note"> +<p><a href="https://github.com/mdn/learning-area/blob/master/html/introduction-to-html/tasks/links/links2-download.html">Descarga el inicio de esta tarea</a> para trabajar en tu propio editor o en un editor en línea.</p> +</div> + +<h2 id="Enlaces_3">Enlaces 3</h2> + +<p>Los siguientes enlaces dirigen a una página informativa acerca de los Narvales, una dirección de correo electrónico de soporte, y un documento PDF cuyo tamaño es 4MB. En esta tarea queremos que:</p> + +<ul> + <li>Tomes los párrafos existentes con enlaces pobremente escritos, y los reescribas para que tengan un buen texto de enlace.</li> + <li>Agregues una advertencia a cualquier enlace que necesite una advertencia.</li> +</ul> + +<div class="blockIndicator note"> +<p><strong>Nota:</strong> Los primeros tres enlaces en el ejemplo tienen el atributo <code>target="_blank"</code> especificado en ellos, abren la página enlazada en una nueva pestaña del navegador. Esto no es estrictamente una buena práctica, pero hemos hecho esto aquí para que las páginas no se abran dentro del <code><iframe></code> incrustado, ¡eliminando el código de ejemplo en el proceso!</p> +</div> + +<p>Intenta actualizar el código en vivo más abajo para mostrar el ejemplo terminado:</p> + +<p>{{EmbedGHLiveSample("learning-area/html/introduction-to-html/tasks/links/links3.html", '100%', 700)}}</p> + +<div class="blockIndicator note"> +<p><a href="https://github.com/mdn/learning-area/blob/master/html/introduction-to-html/tasks/links/links3-download.html">Descarga el inicio de esta tarea</a> para trabajar en tu propio editor o en un editor en línea.</p> +</div> + +<h2 id="Evaluación_o_ayuda_adicional">Evaluación o ayuda adicional</h2> + +<p>Puedes practicar estos ejemplos en los editores interactivos que se encuentran más arriba.</p> + +<p>Si deseas que tu trabajo sea evaluado, o estás atorado y quieres solicitar ayuda:</p> + +<ol> + <li>Pon tu trabajo en un editor en línea con capacidad de compartir como <a href="https://codepen.io/" rel="noopener">CodePen</a>, <a href="https://jsfiddle.net/" rel="noopener">jsFiddle</a>, o <a href="https://glitch.com/" rel="noopener">Glitch</a>. Puedes escribir el código por ti mismo, o usar los archivos de punto de inicio enlazados en las secciones superiores.</li> + <li>Escribe una publicación solicitando evaluacion y/o ayuda en el <a href="https://discourse.mozilla.org/c/mdn/learn" rel="noopener">MDN Discourse forum Learning category</a>. Tu publicación debería incluir: + <ul> + <li>Un título descriptivo como "Solicito evaluacion para la prueba de habilidad de texto básico HTML 1".</li> + <li>Detalles de lo que ya has intentado, y que te gustaría que hiciéramos, por ejemplo, si estas atascado y necesitas ayuda, o quieres una evaluación.</li> + <li>Un enlace al ejemplo que quieres que sea evaluado o por el que necesitas ayuda en un editor en linea con capacidad de compartir (como se mencionó en el paso 1 más arriba). Esta es una buena práctica - Es muy dificil ayudar a alguien con un problema de codificación si no puedes ver su código.</li> + <li>Un enlace a la tarea o página de evaluacion actual, para que podamos encontrar la pregunta con la cual necesitas ayuda.</li> + </ul> + </li> +</ol> diff --git a/files/es/learn/html/introduction_to_html/the_head_metadata_in_html/index.html b/files/es/learn/html/introduction_to_html/the_head_metadata_in_html/index.html new file mode 100644 index 0000000000..6dd14ce1e1 --- /dev/null +++ b/files/es/learn/html/introduction_to_html/the_head_metadata_in_html/index.html @@ -0,0 +1,300 @@ +--- +title: ¿Qué hay en la cabecera? Metadatos en HTML +slug: Learn/HTML/Introduction_to_HTML/The_head_metadata_in_HTML +tags: + - Cabecera + - CodingScripting + - Guía + - HTML + - Meta + - Metadatos + - Novato + - Principiante + - favicon + - head + - lang + - metadata +translation_of: Learn/HTML/Introduction_to_HTML/The_head_metadata_in_HTML +original_slug: Learn/HTML/Introduccion_a_HTML/Metados_en +--- +<div>{{LearnSidebar}}</div> + +<div>{{PreviousMenuNext("Learn/HTML/Introduction_to_HTML/Getting_started", "Learn/HTML/Introduction_to_HTML/HTML_text_fundamentals", "Learn/HTML/Introduction_to_HTML")}}</div> + +<p class="summary">El elemento {{Glossary("Head", "head")}} de un documento HTML es la parte que no se muestra en el navegador cuando se carga la página. Contiene información como el título ({{htmlelement("title")}}) de la página, enlaces al {{Glossary("CSS")}} (si quieres aplicar estilo a tu contenido HTML con CSS), enlaces para personalizar <code>favicon</code>, y otros metadatos (datos sobre el HTML, como quién lo escribió y palabras claves importantes que describen el documento). En este artículo abarcaremos todo esto y más, para darte bases sólidas en el manejo del marcado y otro código que debería estar presente en tu cabecera.</p> + +<table class="learn-box standard-table"> + <tbody> + <tr> + <th scope="row">Prerrequisitos:</th> + <td>Estar familiarizado con el HTML básico, que se expone en {{web.link("/es/docs/Learn/HTML/Introduction_to_HTML/Getting_started", "Empezar con el HTML")}}.</td> + </tr> + <tr> + <th scope="row">Objetivo:</th> + <td>Aprender acerca de la cabecera HTML {{Glossary("Head", "head")}}, cuál es su propósito, los elementos más importantes que puede contener, y qué efecto puede tener sobre el documento HTML.</td> + </tr> + </tbody> +</table> + +<h2 id="¿Qué_hay_en_la_cabecera_HTML">¿Qué hay en la cabecera HTML?</h2> + +<p>Vamos a revisar el {{web.link("/es/docs/Learn/HTML/Introduction_to_HTML/Getting_started#Anatomy_of_an_HTML_document", "documento HTML que se revisó en el artículo anterior")}}:</p> + +<pre class="brush: html notranslate"><!DOCTYPE html> +<html> + <head> + <meta charset="utf-8"> + <title>Mi página de prueba</title> + </head> + <body> + <p>Esta es mi página</p> + </body> +</html></pre> + +<p>La cabecera HTML es el contenido del elemento {{htmlelement("head")}} — a diferencia del contenido del elemento {{htmlelement("body")}} (que sí se muestra en la página cuando se carga en el navegador), el contenido de la cabecera no se muestra en la página. Por el contrario, la función de la cabecera es contener los {{Glossary("Metadata", "metadatos")}} del documento. En el ejemplo anterior, la cabecera es bastante reducida:</p> + +<pre class="brush: html notranslate"><head> + <meta charset="utf-8"> + <title>Mi página de prueba</title> +</head> </pre> + +<p>En páginas más grandes, sin embargo, la cabecera puede llegar a contener bastantes elementos. Prueba a ir a algunos de tus sitios web favoritos y comprueba el contenido de la cabecera usando las {{web.link("/es/docs/Learn/Common_questions/What_are_browser_developer_tools", "herramientas para el desarrollador")}}. Nuestro objetivo aquí no es mostrarte cómo usar todo lo que puedes incluir en la cabecera, sino enseñarte cómo usar los elementos principales que vas a incluir en la cabecera y que te familiarices con ellos. Empecemos.</p> + +<h2 id="Añadir_un_título">Añadir un título</h2> + +<p>Ya hemos visto el elemento {{htmlelement("title")}} en acción — se puede usar para poner un título al documento. Sin embargo, esto se puede confundir con el elemento {{htmlelement("h1")}}, que se utiliza para poner un encabezado de nivel superior al cuerpo de tu contenido — esto también se conoce como el título de la página. ¡Pero son cosas diferentes!</p> + +<ul> + <li>El elemento {{htmlelement("h1")}} aparece en la página cuando se carga en el navegador — en general debería haber uno solo por página, para especificar el título del contenido de tu página (el título de tu historia, el título de la noticia, o de lo que sea apropiado según el uso que le des).</li> + <li>El elemento {{htmlelement("title")}} es un metadato que representa el título de todo el documento HTML (no del contenido del documento).</li> +</ul> + +<h3 id="Aprendizaje_activo_Análisis_de_un_ejemplo_sencillo">Aprendizaje activo: Análisis de un ejemplo sencillo</h3> + +<ol> + <li>Para comenzar este aprendizaje activo, te proponemos ir a nuestro repositorio de GitHub y descargues una copia de nuestra página <a href="https://github.com/mdn/learning-area/blob/master/html/introduction-to-html/the-html-head/title-example.html">title-example.html</a>. Lo puedes hacer de las siguientes maneras: + + <ol> + <li>Copia y pega el código de la página en un archivo de texto nuevo en tu editor de código, luego guárdalo en un lugar conveniente.</li> + <li>Presiona el botón "Raw" en la página de GitHub, lo cual hace que aparezca el código sin procesar (posiblemente en una nueva pestaña del navegador). A continuación, en el menú de tu navegador elige <em>Archivo → Guardar página como...</em> y selecciona un lugar adecuado para guardar el archivo.</li> + </ol> + </li> + <li>Ahora abre el archivo en tu navegador. Deberías ver algo como esto: + <p><img alt="Una sencilla página web con el título configurado a <title> element, y el <h1> configurado a <h1> element." src="https://mdn.mozillademos.org/files/12323/title-example.png" style="display: block; margin: 0 auto;">Ahora debería quedar claro dónde aparece el contenido de <code><h1></code> y dónde aparece el contenido de <code><title></code>.</p> + </li> + <li>También podrías probar a abrir el código en tu editor de código, editar el contenido de estos elementos y luego actualizar la página en tu navegador. Juega un poco con ello.</li> +</ol> + +<p>El contenido del elemento <code><title></code> también se usa de otras formas. Por ejemplo, si intentas marcar la página como favorita (<strong>Marcadores → Marcar esta página</strong>, o el icono en forma de estrella de Firefox), verás que el nombre que se sugiere para el marcado es el contenido del elemento <code><title></code>.</p> + +<p><img alt="Se está marcando una página web en Firefox; el nombre del marcador se ha completado automáticamente con el contenido del elemento <title>" src="https://mdn.mozillademos.org/files/12337/bookmark-example.png" style="display: block; margin: 0 auto;"></p> + +<p>El contenido de <code><title></code> también se usa en el resultado de las búsquedas, como verás a continuación.</p> + +<h2 id="Metadatos_el_elemento_<meta>">Metadatos: el elemento <meta></h2> + +<p>Los metadatos son datos que describen datos, y HTML tiene una forma «oficial» de introducir metadatos en un documento — el elemento {{htmlelement("meta")}}. Por supuesto, el resto de los elementos de los que hablaremos en este artículo también se podrían considerar metadatos. Hay muchos diferentes tipos de elementos <code><meta></code> que se pueden incluir en el <head> de tu página, pero no vamos a intentar explicarlos todos en esta etapa porque resultaría demasiado confuso. En lugar de ello vamos a explicar algunas cuestiones con las que seguramente te vas a encontrar, solo para que te hagas una idea.</p> + +<h3 id="La_codificación_de_caracteres_de_tu_documento">La codificación de caracteres de tu documento</h3> + +<p>El ejemplo que vimos arriba incluía esta línea:</p> + +<pre class="brush: html notranslate"><meta charset="utf-8"></pre> + +<p>Este elemento simplemente especifica la codificación de caracteres del documento — es decir, el conjunto de caracteres que el documento puede usar. <code>utf-8</code> es un conjunto de caracteres universal que incluye casi todos los caracteres de casi cualquier idioma humano. Esto significa que tu página web podrá gestionar la visualización de cualquier idioma; por lo tanto, resulta una buena idea configurarlo en cada página web que crees. Por ejemplo, tu página podría gestionar inglés y japonés sin problemas:</p> + +<p><img alt="Una página web que contiene caracteres en inglés y japonés, con la codificación de caracteres establecida en universal o utf-8. Ambos idiomas se muestran bien." src=" https://mdn.mozillademos.org/files/12343/correct-encoding.png" style="display: block; margin: 0 auto;">Si configuras tu codificación de caracteres en <code>ISO-8859-1</code>, por ejemplo (el juego de caracteres para el alfabeto latino), la representación de tu página puede aparecer desordenada:</p> + +<p><img alt="una página web que contiene caracteres en inglés y japonés, con la codificación de caracteres configurada en latín. Los caracteres japoneses no se muestran correctamente" src="https://mdn.mozillademos.org/files/12341/bad-encoding.png" style="display: block; height: 365px; margin: 0px auto; width: 604px;"></p> + +<div class="note"> +<p><strong>Nota</strong>: Algunos navegadores (Chrome, por ejemplo) automáticamente arreglan la codificación de caracteres incorrecta, de modo que según el navegador que uses, puede que no te topes con este problema. Aun así, deberías incluir una codificación de caracteres <code>utf-8</code> en tu página web para evitar que se presenten potenciales problemas con otros navegadores.</p> +</div> + +<h3 id="Aprendizaje_activo_Experimenta_con_la_codificación_de_caracteres">Aprendizaje activo: Experimenta con la codificación de caracteres</h3> + +<p>Para probar esto, vuelve a visitar la plantilla HTML simple que obtuviste en la sección anterior sobre <code><title></code> (la página <a href="https://github.com/mdn/learning-area/blob/master/html/introduction-to-html/the-html-head/title-example.html">title-example.html</a>) e intenta cambiar el valor de la propiedad <code>meta charset</code> por <code>ISO-8859-1</code> y añade el japonés a tu página. Este es el código que usamos:</p> + +<pre class="brush: html notranslate"><p>Ejemplo en japonés: ご飯が熱い。</p></pre> + +<h3 id="Añadir_un_autor_y_descripción">Añadir un autor y descripción</h3> + +<p>Muchos elementos <code><meta></code> incluyen atributos <code>name</code> y <code>content</code>:</p> + +<ul> + <li><code>name</code> especifica el tipo de metadato del que se trata; es decir, qué tipo de información contiene.</li> + <li><code>content</code> especifica el contenido del metadato en sí.</li> +</ul> + +<p>Dos de esos metadatos que resultan útiles de incluir en tu página definen al autor de la página y proporcionan una descripción concisa de la página. Veamos un ejemplo:</p> + +<pre class="brush: html notranslate"><meta name="author" content="Chris Mills"> +<meta name="description" content="El área de aprendizaje de MDN pretende +proporcionar a los recién llegados a la web todo lo que deben +saber para empezar a desarrollar páginas web y aplicaciones web."></pre> + +<p>Especificar un autor resulta ventajoso por diversos motivos: es útil saber quién escribió la página para poder ponerte en contacto con el autor si tienes preguntas sobre el contenido. Algunos sistemas de gestión de contenido tienen herramientas para extraer automáticamente la información del autor de la página y ponerla a disposición para tales fines.</p> + +<p>Especificar una descripción que incluya palabras clave relacionadas con el contenido de tu página resulta útil porque tiene el potencial de hacer que la página aparezca más arriba en las búsquedas relevantes que efectúan los motores de búsqueda (tales actividades se denominan optimizaciones del motor de búsqueda ({{web.link("/es/docs/Glossary/SEO", "Optimización de motores de búsqueda")}}) o {{Glossary("SEO")}}.)</p> + +<h3 id="Aprendizaje_activo_El_uso_de_la_descripción_en_los_motores_de_búsqueda">Aprendizaje activo: El uso de la descripción en los motores de búsqueda</h3> + +<p>La descripción también se usa en las páginas de resultados del motor de búsqueda. Repasemos un ejercicio para explorar esto:</p> + +<ol> + <li>Ve a la página de inicio de <a href="https://developer.mozilla.org/es/">Mozilla Developer Network</a>.</li> + <li>Observa el código fuente de la página (<kbd>Ctrl</kbd>+clic o clic con el botón derecho en la página y selecciona la opción del menú <strong>Ver código fuente de la página</strong>).</li> + <li>Encuentra la etiqueta del metadato <strong>description</strong>. Se verá más o menos así (aunque puede cambiar con el tiempo): + <pre class="brush: html notranslate"><meta name="description" content="The Mozilla Developer + Network (MDN) proporciona información sobre tecnologías + de código abierto que incluyen HTML, CSS y APIs tanto para sitios web como para aplicaciones HTML5. + También documenta productos Mozilla como el sistema operativo Firefox."></pre> + </li> + <li>Ahora busca "Mozilla Developer Network" en tu motor de búsqueda favorito (nosotros hemos utilizado Google). Observarás que efectivamente merece la pena que tener el contenido de la descripción <code><meta></code> y el elemento <code><title></code> que se utiliza en la búsqueda. + <p><img alt='Resultado de búsqueda en Yahoo para "Mozilla Developer Network"' src="https://mdn.mozillademos.org/files/16074/mdn-search-result.png" style="border-style: solid; border-width: 1px; display: block; height: 982px; margin: 0px auto; width: 1302px;"></p> + </li> +</ol> + +<div class="note"> +<p><strong>Nota</strong>: En Google verás algunas subpáginas relevantes de MDN enumeradas debajo del enlace principal a la página principal de MDN (se trata de los llamados <strong>sitelinks</strong> y se pueden configurar con las <a href="http://www.google.com/webmasters/tools/">Herramientas de administrador de Google</a>), una forma de mejorar los resultados para tu sitio con el motor de búsqueda de Google.</p> +</div> + +<div class="note"> +<p><strong>Nota</strong>: Muchas características <code><meta></code> ya no se usan. Por ejemplo, los motores de búsqueda ignoran el elemento <code><meta></code> (<code><meta name="keywords" content="pon, tus, palabras clave, aquí"></code>), que se supone que facilita palabras clave para motores de búsqueda de forma que se determine la relevancia de esa página según diferentes términos de búsqueda, porque los <strong>spammers</strong> rellenaban la lista de palabras clave con cientos de palabras clave que sesgaban los resultados.</p> +</div> + +<h3 id="Otros_tipos_de_metadatos">Otros tipos de metadatos</h3> + +<p>Al navegar por la web también puedes encontrar otros tipos de metadatos. Muchas de las funciones que verás en los sitios web son creaciones propietarias diseñadas para proporcionar a ciertos sitios (como los sitios de redes sociales) información específica que puedan usar.</p> + +<p>Por ejemplo, <a href="http://ogp.me/">Open Graph Data</a> es un protocolo de metadatos que Facebook inventó para proveer metadatos más ricos para los sitios web. En las fuentes de código de MDN, encontrarás esto:</p> + +<pre class="brush: html notranslate"><meta property="og:image" content="https://developer.cdn.mozilla.net/static/img/opengraph-logo.dc4e08e2f6af.png"> +<meta property="og:description" content="The Mozilla Developer Network (MDN) proporciona información +sobre tecnologías Open Web, incluidas HTML, CSS y APIs para ambos sitios web +y aplicaciones HTML5. También documenta productos Mozilla, como el sistema operativo Firefox."> +<meta property="og:title" content="Mozilla Developer Network"></pre> + +<p>Un efecto de esto es que cuando desde Facebook enlazas a un MDN, el enlace aparece con una imagen y una descripción, lo que resulta en una experiencia más enriquecedora para los usuarios.</p> + +<p><img alt="Datos abiertos del protocolo de gráficos de la página de inicio de MDN como se muestra en Facebook, mostrando una imagen, título y descripción." src="https://mdn.mozillademos.org/files/12349/facebook-output.png" style="display: block; margin: 0 auto;"></p> + +<p>Twitter también tiene sus metadatos propios, las <a href="https://developer.twitter.com/en/docs/tweets/optimize-with-cards/overview/abouts-cards">Twitter Cards</a>, que tienen un efecto similar cuando la URL del sitio se muestra en twitter.com. Por ejemplo:</p> + +<pre class="brush: html notranslate"><meta name="twitter:title" content="Mozilla Developer Network"></pre> + +<h2 id="Agregar_iconos_personalizados_a_tu_sitio">Agregar iconos personalizados a tu sitio</h2> + +<p>Para enriquecer un poco más el diseño de tu sitio puedes añadir en tus metadatos referencias a iconos personalizados, que se mostrarán en determinados contextos. El más común de ellos es el <strong>favicon</strong> (abreviatura de <strong><em>favorite icon</em></strong> —<strong>icono </strong>«<strong>favorito</strong>», referido al uso que se le da en las listas de «favoritos» o de marcadores («<strong>bookmarks</strong>»).</p> + +<p>El humilde <code>favicon</code> ha existido durante muchos años. Es el primer icono de este tipo: un icono cuadrado de 16 píxeles que se utiliza en varios lugares. Es posible que veas (según el navegador) <code>favicon</code>s que se muestran en la pestaña del navegador que contiene cada página abierta y junto a las páginas marcadas en el panel de marcadores.</p> + +<p>Para añadir un <code>favicon</code> a tu página:</p> + +<ol> + <li>Guárdalo en el mismo directorio que la página <strong>index</strong> de tu sitio, en formato <code>.ico</code> (la mayoría de los buscadores admiten <code>favicon</code> en los formatos más comunes como <code>.gif</code> o <code>.png</code>, pero usar el formato <em>ICO</em> garantiza que funcionará hasta en Internet Explorer 6.)</li> + <li>Añade la siguiente línea de referencia en el {{HTMLElement("head")}} de tu HTML: + <pre class="brush: html notranslate"><link rel="shortcut icon" href="favicon.ico" type="image/x-icon"></pre> + </li> +</ol> + +<p>Los navegadores modernos usan <code>favicon</code>s en diversos lugares, como en la etiqueta de la página que está abierta y en el panel de favoritos cuando la añades a tu lista de páginas favoritas:</p> + +<p><img alt="El panel de marcadores de Firefox, que muestra un ejemplo marcado con un favicon junto a él." src="https://mdn.mozillademos.org/files/12351/bookmark-favicon.png" style="display: block; margin: 0 auto;"></p> + +<p>Hoy día hay un montón de otros tipos de iconos a tener presentes. Por ejemplo, los encontrarás en el código fuente de la página de inicio de MDN:</p> + +<pre class="brush: html notranslate"><!-- iPad de tercera generación con pantalla de alta resolución: --> +<link rel="apple-touch-icon-precomposed" sizes="144x144" href="https://developer.cdn.mozilla.net/static/img/favicon144.a6e4162070f4.png"> +<!-- iPhone con pantalla de alta resolución: --> +<link rel="apple-touch-icon-precomposed" sizes="114x114" href="https://developer.cdn.mozilla.net/static/img/favicon114.0e9fabd44f85.png"> +<!-- iPad de primera y segunda generación: --> +<link rel="apple-touch-icon-precomposed" sizes="72x72" href="https://developer.cdn.mozilla.net/static/img/favicon72.8ff9d87c82a0.png"> +<!-- Dispositivos iPhone sin pantalla Retina, iPod Touch y Android 2.1+: --> +<link rel="apple-touch-icon-precomposed" href="https://developer.cdn.mozilla.net/static/img/favicon57.a2490b9a2d76.png"> +<!-- favicon básico --> +<link rel="shortcut icon" href="https://developer.cdn.mozilla.net/static/img/favicon32.e02854fdcf73.png"></pre> + +<p>Los comentarios explican para qué se usa cada icono (estos elementos abarcan situaciones como aportar un buen icono de alta resolución para usarlo cuando la página web se guarda en la página de inicio de un iPad).</p> + +<p>No te preocupes demasiado sobre la implementación de todos estos tipos de iconos por el momento; se trata de una característica bastante avanzada y no se espera que tengas conocimientos de ello para avanzar en el curso. El propósito principal aquí es darte a conocer estos elementos por si te los encuentras mientras examinas el código fuente de otros sitios web.</p> + +<div class="note"> +<p><strong>Nota</strong>: Si tu sitio web utiliza una política de seguridad de contenido (<em>content security policy o CSP</em>) para mejorar la seguridad, la política afecta al <code>favicon</code>. Si te encuentras con problemas como que el <code>favicon</code> no se carga, comprueba que la respuesta a {{HTTPHeader("Content-Security-Policy")}} del <code>header</code> <a href="">Content-Security-Policy</a> para la <a href="https://developer.mozilla.org/en-US/docs/Web/HTTP/Headers/Content-Security-Policy/img-src"> directriz <code>img-src</code></a> en la cabecera no impide el acceso a este.</p> +</div> + +<h2 id="Aplicar_CSS_y_JavaScript_a_HTML">Aplicar CSS y JavaScript a HTML</h2> + +<p>Prácticamente todos los sitios web usan {{Glossary("CSS")}} para darles un buen aspecto y {{Glossary("JavaScript")}} para añadir funcionalidades interactivas, como reproductores de vídeo, mapas, juegos y demás. La manera más habitual de añadir CSS y JavaScript a una página web es con los elementos <code><link></code> y el elemento <code><script></code>, respectivamente.</p> + +<ul> + <li> + <p>El elemento {{HTMLElement("link")}} siempre debe ir dentro del {{HTMLElement("header")}} de tu documento. Este toma dos atributos, <code>rel="stylesheet"</code>, que indica que es la hoja de estilo del documento, y <code>href</code>, que contiene la ruta al archivo de la hoja de estilo:</p> + + <pre class="brush: html notranslate"><link rel="stylesheet" href="my-css-file.css"></pre> + </li> + <li> + <p>El elemento <code><script></code> también debería ir en el <code>head</code>, y debería incluir un atributo <code>src</code> con la ruta al JavaScript que quieres cargar, y <code>defer</code>, que básicamente le dice al navegador que cargue el JavaScript al mismo tiempo que el HTML de la página. Esto es útil porque hace que todo el HTML se cargue antes de ejecutar el JavaScript, para que no haya errores porque el JavaScript ha intentado acceder a un elemento HTML que todavía no existe. De hecho hay múltiples formas de gestionar la carga del JavaScript en una página, pero esta es «a prueba de bombas» para los navegadores modernos (para el resto de las formas, lee el artículo {{web.link("/en-US/docs/Learn/JavaScript/First_steps/What_is_JavaScript#Script_loading_strategies", "Estrategias de carga de scripts")}}).</p> + + <pre class="brush: html notranslate"><script src="my-js-file.js"></script></pre> + + <div class="blockIndicator note"> + <p><strong>Nota</strong>: El elemento <code><script></code> puede parecer un elemento vacío pero no lo es, y por lo tanto necesita una etiqueta de cierre. En vez de apuntar a un archivo de <code>script</code> externo, también puedes colocar tu código dentro del elemento <code><script></code>.</p> + </div> + </li> +</ul> + +<h3 id="Aprendizaje_activo_aplicar_CSS_y_JavaScript_a_una_página">Aprendizaje activo: aplicar CSS y JavaScript a una página</h3> + +<ol> + <li>Para iniciar este aprendizaje activo, haz una copia de nuestros archivos <a href="https://github.com/mdn/learning-area/blob/master/html/introduction-to-html/the-html-head/meta-example.html">meta-example.html</a>, <a href="https://github.com/mdn/learning-area/blob/master/html/introduction-to-html/the-html-head/script.js">script.js</a> y <a href="https://github.com/mdn/learning-area/blob/master/html/introduction-to-html/the-html-head/style.css">style.css</a>, y guárdalos en un mismo directorio de tu ordenador. Asegúrate de que se guardan con los nombres y extensiones correctas.</li> + <li>Abre el archivo HTML tanto en tu navegador como en tu editor de texto.</li> + <li>Sigue la información facilitada anteriormente y añade los elementos <code><link></code> y <code><script></code> a tu HTML para aplicarle CSS y JavaScript.</li> +</ol> + +<p>Si lo has hecho correctamente, al guardar tu HTML y actualizar tu navegador, deberías poder ver que las cosas han cambiado:</p> + +<p><img alt="Ejemplo que muestra una página con CSS y JavaScript aplicados. El CSS ha hecho que la página se vuelva verde, mientras que JavaScript ha agregado una lista dinámica a la página" src="https://mdn.mozillademos.org/files/12359/js-and-css.png" style="display: block; margin: 0 auto;"></p> + +<ul> + <li>El JavaScript ha añadido una lista vacía a la página. Ahora, cuando haces clic en cualquier sitio de la lista, aparece un cuadro de diálogo que te solicita que introduzcas el texto para un nuevo elemento de la lista. Cuando pulsas el botón OK, se añade a la lista el elemento con el texto nuevo. Cuando haces clic a un elemento de la lista aparece un cuadro de diálogo que te permite cambiar el texto del elemento.</li> + <li>El CSS ha pintado el fondo de verde y ha agrandado el texto. También ha aplicado estilo a algún contenido que el JavaScript ha añadido a la página (la barra roja con el borde negro es el estilo que el CSS ha aplicado a la lista generada con JavaScript).</li> +</ul> + +<div class="note"> +<p><strong>Nota</strong>: Si te encallas en este ejercicio y no logras ejecutar los archivos CSS/JS, comprueba tu página de ejemplo <a href="https://github.com/mdn/learning-area/blob/master/html/introduction-to-html/the-html-head/css-and-js.html">css-and-js.html</a>.</p> +</div> + +<h2 id="Establecer_el_idioma_principal_del_documento">Establecer el idioma principal del documento</h2> + +<p>Por último, merece la pena mencionar que puedes (y realmente deberías) especificar el idioma de tu página. Esto se puede hacer añadiendo el atributo {{web.link("/es/docs/Web/HTML/Global_attributes/lang", "lang")}} a la etiqueta de apertura del HTML (como se ve en el <a href="https://github.com/mdn/learning-area/blob/master/html/introduction-to-html/the-html-head/meta-example.html">meta-example.html</a> y se muestra abajo).</p> + +<pre class="brush: html notranslate"><html lang="es-MX"></pre> + +<p>Esto resulta útil en muchos sentidos. Los motores de búsqueda indizarán tu documento HTML de modo más efectivo si estableces el idioma (permitiendo, por ejemplo, que aparezca correctamente en los resultados del idioma especificado), y resulta útil para que las personas con discapacidad visual que utilizan los lectores de pantalla (por ejemplo, la palabra «six» existe tanto en francés como en inglés, pero su pronunciación es diferente).</p> + +<p>También puedes establecer que las subsecciones de tu documento se reconozcan en diferentes idiomas. Por ejemplo, podemos establecer que nuestra sección de japonés se reconozca como japonés, de la siguiente manera:</p> + +<pre class="brush: html notranslate"><p>Ejemplo Japonés: <span lang="ja">ご飯が熱い。</span>.</p></pre> + +<p>El estándar {{interwiki("wikipedia", "ISO_639-1")}} define estos códigos. Puedes encontrar más información sobre ello en <a href="https://www.w3.org/International/articles/language-tags/">Etiquetas de idioma en HTML y XML</a>.</p> + +<h2 id="Resumen">Resumen</h2> + +<p>Esto marca el final de nuestra guía rápida del {{Glossary("head")}} de HTML — aún hay muchas más cosas que puedes hacer aquí, pero una guía exhaustiva puede ser aburrida y confusa a estas alturas, ¡y nosotros queremos darte una idea de las cuestiones más comunes con las que te encontrarás aquí por ahora! En el siguiente artículo veremos los fundamentos de texto de HTML.</p> + +<p>{{PreviousMenuNext("Learn/HTML/Introduction_to_HTML/Getting_started", "Learn/HTML/Introduction_to_HTML/HTML_text_fundamentals", "Learn/HTML/Introduction_to_HTML")}}</p> + +<h2 id="En_este_módulo">En este módulo</h2> + +<ul> + <li>{{web.link("/es/docs/Learn/HTML/Introduction_to_HTML/Getting_started", "Empezar con HTML")}}</li> + <li>{{web.link("/es/docs/Learn/HTML/Introduction_to_HTML/The_head_metadata_in_HTML", "¿Qué hay en el «head»? Metadatos en HTML")}}</li> + <li>{{web.link("/es/docs/Learn/HTML/Introduction_to_HTML/HTML_text_fundamentals", "Fundamentos de texto HTML")}}</li> + <li>{{web.link("/es/docs/Learn/HTML/Introduction_to_HTML/Creating_hyperlinks", "Creando hipervínculos")}}</li> + <li>{{web.link("/es/docs/Learn/HTML/Introduction_to_HTML/Advanced_text_formatting", "Formateo de texto avanzado")}}</li> + <li>{{web.link("/es/docs/Learn/HTML/Introduction_to_HTML/Document_and_website_structure", "Estructura web y documentación")}}</li> + <li>{{web.link("/es/docs/Learn/HTML/Introduction_to_HTML/Debugging_HTML", "Depurar HTML")}}</li> + <li>{{web.link("/es/docs/Learn/HTML/Introduction_to_HTML/Marking_up_a_letter", "Marcado para una carta")}}</li> + <li>{{web.link("/es/docs/Learn/HTML/Introduction_to_HTML/Structuring_a_page_of_content", "Estructuración del contenido de una página")}}</li> +</ul> |