---
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>&lt;head&gt;</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>