User Tools

Site Tools


web_design:letter:format_text

This is an old revision of the document!


Web Development

Lesson 1 - Letter

Formatting Text

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

Medellin, Date
Name

Estimados Senor,
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.

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.
 
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.
 
Me encuentro en alta disposición para conversar con ustedes más ampliamente. Espero su llamado para una entrevista y conocernos mejor.
Atentamente,
Jane

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.

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.1633454846.txt.gz · Last modified: 2023/08/16 09:33 (external edit)