User Tools

Site Tools


web_design:letter:format_text

Web Development Lesson 2 - Letter

Formatting Text

Setup

Continue to use the jsfiddle from the previous lesson. If you need it again, here it is.

<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>

Bold

  • Let's try another HTML tag. Add <strong> before Universidad and </strong> after Hospitalidad so that the first paragraph looks like this.
<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>
  • What do you think <strong> does? It makes the text between the tags bold.

Italic

  • In the second paragraph, make '400 horas' italic.
  • Add <em> before '400' and </em> after 'horas'.
<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>
  • Click 'Run' and check the result.

Superscript

  • Make the TM superscript in the third paragraph.
  • Add <sup> before 'TM' and </sup> afterwards.
Hotel Cortez<sup>TM</sup> sabrá
  • Click 'Run' to see what <sup> does.

Rule: Nesting Tags

  • It's possible to apply more than one tag to text. Notice that the <em> tag pair is inside the <p> tag pair.
  • We do the same for em and strong. Let's do this for the word 'Hospitalidad'.
<strong>Universidad Nacional de <em>Hospitalidad</em></strong>
  • Click 'Run' to see the result. The word 'Hospitalidad should be both bold and italicised.
  • You cannot mix the tag order. <strong><em></strong></em> is incorrect. The results will be unpredictable.

Next: Attributes

web_design/letter/format_text.txt · Last modified: 2023/08/16 09:33 (external edit)