In this lesson you will:

1. learn about HTML tags
2. create a document with basic styling
3. create a simple Javascript program
4. use jsfiddle to test HTML, CSS and JS code

• Basic computer skills

1. Open jsfiddle in your browser.
2. Pegar el text abajo en HTML de jsfiddle. Change 'Jane' to your name.

   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

3. Click 'Run' in the top left of the screen. The result appears at the bottom right.
   • Notice that the text isn't broken up into paragraphs. The browser ignores line breaks, tabs, double spaces and other document formatting information. We need to add this using tags. Write <p> at the beginning of every paragraph, and </p> at the end of every paragraph. Like this:

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

4. Click 'Run' again and observe the result.
   • <p> means 'paragraph'
   • Every HTML opening tag <p> must have a matching closing tag </p>. The closing tag always includes the '/' symbol.
5. Let's try another tag. Add <b> before Universidad and </b> after Hospitalidad so that the first paragraph looks like this.

   <p>Soy estudiante del penúltimo año de Hotelería en la <b>Universidad Nacional de Hospitalidad</b>, 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 <b> does? It makes the text between the tags bold.
6. In the second paragraph, make '400 horas' italic.
   • Add <i> before '400' and </i> after 'horas'.

     <p>Como saben, la escuela pide <i>400 horas</i> de práctica profesional en empresas especializadas en el área de estudios del alumno, para optar por el título profesional.</p>

7. Click 'Run' and check the result.

In this lesson you learnt the following:

• Tools
  • jsfiddle
• HTML tags
  • <p>
  • <h1>-<h6>
  • <b>
  • <i>
  • <span>
• HTML text attributes
  • font-size
  • font-family
  • color
  • background-color
  • text-align
  • text-decoration
  • text-transform
  • font-variant
  • text-indent
  • line-height
  • text-shadow