Web Development Lesson 2 - Letter

Continue using jsfiddle with the same code from the previous screen. Here it is again.

<p>Medellin, Date</p>
<p>Name</p>
<p>Estimados Senor,</p>
<p>Soy estudiante del penúltimo año de Hotelería en la <strong>Universidad Nacional de <em>Hospitalidad</em></strong>, 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 <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>
<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 Cortez<sup>TM</sup> 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>

• Some basic formatting can be done using html tags - we've seen p, em, strong and sup.
• More complex formatting is available using attributes. Attributes are parameter:value pairs inside tags, and they apply to everything between the tags.

• As an example, let's make the first paragraph blue by adding style="color:blue;" inside the <p> tag as follows.

<p style="color:blue;">Soy estudiante del penúltimo año de Hotelería en la <strong>Universidad Nacional de <em>Hospitalidad</em></strong>, y quiero mostrarles mi interés en formar parte de su compañía a través de un contrato de prácticas.</p>

• Run the code to check the result.
• We are applying a style, hence style=""
• Inside the inverted commas is the specific style, designated by the parameter value pair, where color is the parameter (the colour of the text) and blue is the value we wish to use.
• Notice the : used to separate the parameter and the value.
• Also notice the ; at the end of the pair.

• We can select a section of text to style by using <span>. Let's make the text 'la escuela pide 400 horas de práctica profesional' red.

<p>Como saben, <span style="color:red;">la escuela pide <em>400 horas</em> de práctica profesional</span> en empresas especializadas en el área de estudios del alumno, para optar por el título profesional.</p>

• Run the code to see whether you did it correctly.

• You can change two styles at the same time by separating them with a ; as follows.

<p>Como saben, <span style="color:red; font-weight: 700;">la escuela pide <em>400 horas</em> de práctica profesional</span> en empresas especializadas en el área de estudios del alumno, para optar por el título profesional.</p>

• Now the red text should also be bold because it has a higher font-weight. 300 is very faint and 900 is very heavy.

• We can indent the first line of a paragraph with text-indent.

<p style="text-indent:50px;">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>

• Let's try something different. The location and date are normally located at the top right of a letter. Let's move it there now.

<p style="text-align:right;">Medellin, Date</p>

• There are many other style attributes, but most are more commonly applied to headings.

Next: Headings