| Both sides previous revision
Previous revision
Next revision
|
Previous revision
|
web_design:letter:format_text [2021/10/04 18:36]
mag |
web_design:letter:format_text [2023/08/16 09:33] (current)
|
| ====== Web Development ====== | ====== Web Development Lesson 2 - Letter ====== |
| ===== Lesson 1 - Letter ===== | ===== Formatting Text ===== |
| ==== Formatting Text ==== | ==== Setup ==== |
| |
| === Bold === | Continue to use the jsfiddle from the previous lesson. If you need it again, here it is. |
| | <code><p>Medellin, Date</p> |
| | <p>Name</p> |
| | <p>Estimados Senor,</p> |
| | <p>Soy estudiante del penúltimo año de Hotelería en la Universidad Nacional de Hospitalidad, y quiero mostrarles mi interés en formar parte de su compañía a través de un contrato de prácticas.</p> |
| | <p>Como saben, la escuela pide 400 horas de práctica profesional en empresas especializadas en el área de estudios del alumno, para optar por el título profesional.</p> |
| | <p>Podrán ver que una de mis mayores fortalezas está en el área de alimentos y bebidas, ya que he participado en diferentes entrenamientos y estudios paralelos, que me han llevado a innovar nuevas formas de ofrecer el servicio y experiencia del cliente, y estoy segura que el Hotel CortezTM sabrá sacar el máximo provecho, cuando vea el aumento de experiencias positivas que sus clientes experimentarán.</p> |
| | <p>Me encuentro en alta disposición para conversar con ustedes más ampliamente. Espero su llamado para una entrevista y conocernos mejor.</p> |
| | <p>Atentamente,</p> |
| | <p>Murray</p></code> |
| |
| * Let's try another tag. Add <html><b></html> before Universidad and <html></b></html> after Hospitalidad so that the first paragraph looks like this. | ==== Bold ==== |
| |
| <code><p>Soy estudiante del penúltimo año de Hotelería en la <b>Universidad Nacional de Hospitalidad</b>, y quiero mostrarles mi interés en formar parte de su compañía a través de un contrato de prácticas.</p></code> | * Let's try another HTML tag. Add <html><strong></html> before Universidad and <html></strong></html> after Hospitalidad so that the first paragraph looks like this. |
| * What do you think <html><b></html> does? It makes the text between the tags **bold**. | |
| |
| === Italic === | <code><p>Soy estudiante del penúltimo año de Hotelería en la <strong>Universidad Nacional de Hospitalidad</strong>, y quiero mostrarles mi interés en formar parte de su compañía a través de un contrato de prácticas.</p></code> |
| | * What do you think <html><strong></html> does? It makes the text between the tags **bold**. |
| | |
| | ==== Italic ==== |
| |
| * In the second paragraph, make '400 horas' italic. | * In the second paragraph, make '400 horas' italic. |
| * Add <html><i></html> before '400' and <html></i></html> after 'horas'. | * Add <html><em></html> before '400' and <html></em></html> after 'horas'. |
| <code><p>Como saben, la escuela pide <i>400 horas</i> de práctica profesional en empresas especializadas en el área de estudios del alumno, para optar por el título profesional.</p></code> | <code><p>Como saben, la escuela pide <em>400 horas</em> de práctica profesional en empresas especializadas en el área de estudios del alumno, para optar por el título profesional.</p></code> |
| * Click 'Run' and check the result. | * Click 'Run' and check the result. |
| |
| === Superscript === | ==== Superscript ==== |
| |
| * Make the TM superscript in the third paragraph. | * Make the TM superscript in the third paragraph. |
| <code>Hotel Cortez<sup>TM</sup> sabrá</code> | <code>Hotel Cortez<sup>TM</sup> sabrá</code> |
| * Click 'Run' to see what <sup> does. | * Click 'Run' to see what <sup> does. |
| | |
| | ==== Rule: Nesting Tags ==== |
| | * It's possible to apply more than one tag to text. Notice that the <html><em></html> tag pair is inside the <html><p></html> tag pair. |
| | * We do the same for //em// and **strong**. Let's do this for the word 'Hospitalidad'. |
| | <code><strong>Universidad Nacional de <em>Hospitalidad</em></strong></code> |
| | * Click 'Run' to see the result. The word 'Hospitalidad should be both bold and italicised. |
| | * You cannot mix the tag order. <html><strong><em></strong></em></html> is incorrect. The results will be unpredictable. |
| | |
| | [[web_design:letter:attributes|Next: Attributes]] |
