Web Development

We'll continue to use the code you've been working on in jsfiddle.

<p style="text-align:right;">Medellin, Date</p>
<p>Name</p>
<p>Estimados Senor,</p>
<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>
<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>
<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>

• Headings can also be defined using html tags. Let's add a heading above the first line

<h1>Job Application</h1>

• Notice that the text is much bigger and heavier, as you'd expect from a heading.
• There are 6 levels of heading from <h1> to <h6>. They get smaller as the number gets higher.

• Let's make some changes to the heading style.
• Change the font by adding a font-family style attribute.

<h1 style="font-family:Arial,sans-serif;">Job Application</h1>

• Now make it green.

<h1 style="font-family:Arial,sans-serif; color:green;">Job Application</h1>

• Next, let's make it smaller.

<h1 style="font-family:Arial,sans-serif; color:green; font-size: 1.7em;">Job Application</h1>

• The em is the standard size for normal font, so this is 1.7 times bigger than the letter text (but still smaller than h1 usually is).

• Let's underline the heading.

<h1 style="font-family:Arial,sans-serif; color:green; font-size: 1.7em; text-decoration:underline;">Job Application</h1>

• Let's make it all upper case.

<h1 style="font-family:Arial,sans-serif; color:green; font-size: 1.7em; text-decoration:underline; text-transform:uppercase;">Job Application</h1>

• Here's a different style that looks great in headings. Notice that you need to delete text-transform:uppercase; to get small-caps to work. You can't have both.

<h1 style="font-family:Arial,sans-serif; color:green; font-size: 1.7em; text-decoration:underline; font-variant: small-caps;">Job Application</h1>

• We can also change the height of the line.

<h1 style="font-family:Arial,sans-serif; color:green; font-size: 1.7em; text-decoration:underline; font-variant: small-caps; line-height: 3em;">Job Application</h1>

• Did you notice the extra space above the heading now? That's because the line height is bigger than before.

• Finally, let's add some shadow to the heading.

<h1 style="font-family:Arial,sans-serif; color:green; font-size: 1.7em; text-decoration:underline; font-variant: small-caps; line-height: 2em; text-shadow:2px 2px #ff0000;">Job Application</h1>

• See how you can string many style attributes together?
• This is handy if you want to change the style of one element, but becomes cumbersome if, for example, you want to change the style of all paragraphs in your letter. For that, we'll use CSS, which we'll cover in Lesson 3.
• All the style attributes we've used in this lesson can be used in CSS.

Next: Javascript