Differences

This shows you the differences between two versions of the page.

--- web_design:letter:format_text [2021/10/04 17:20]
mag created
+++ web_design:letter:format_text [2023/08/16 09:33] (current)
@@ Line 1: / Line 1: @@
-====== Web Development ======
+====== Web Development Lesson 2 - Letter ======
-===== Lesson 1 - Letter =====
+===== Formatting Text =====
-==== Formatting Text ====
+==== Setup ====
+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>
+==== Bold ====
+  * 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.
+<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.
+  * Add <html><em></html> before '400' and <html></em></html> after 'horas'.
+<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.
+==== Superscript ====
+  * Make the TM superscript in the third paragraph.
+  * Add <html><sup></html> before 'TM' and <html></sup></html> afterwards.
+<code>Hotel Cortez<sup>TM</sup> sabrá</code>
+  * 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]]

Tech School

User Tools

Site Tools

Differences

Page Tools