1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
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>
|