Differences

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

--- web_design:letter:format_text [2021/10/04 18:41]
mag [Formatting Text]
+++ 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 ====
-=== 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><strong></html> before Universidad and <html></strong></html> after Hospitalidad so that the first paragraph looks like this.
+==== 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 ===
+==== Italic ====
   * In the second paragraph, make '400 horas' italic.
@@ Line 17: / Line 28: @@
   * Click 'Run' and check the result.
-=== Superscript ===
+==== Superscript ====
   * Make the TM superscript in the third paragraph.
@@ Line 24: / Line 35: @@
   * Click 'Run' to see what <sup> does.
-=== Nesting Tags ===
+==== 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