| Both sides previous revision
Previous revision
Next revision
|
Previous revision
|
web_design:letter:attributes [2021/10/05 16:40]
mag [Lesson 1 - Letter] |
web_design:letter:attributes [2023/08/16 09:33] (current)
|
| ====== Web Development ====== | ====== Web Development Lesson 2 - Letter ====== |
| ===== Lesson 2 - Letter ===== | ===== Attributes ===== |
| ==== Attributes ==== | ==== Setup ==== |
| |
| Continue using jsfiddle with the same code from the previous screen. Here it is again. | Continue using jsfiddle with the same code from the previous screen. Here it is again. |
| <code><p>Job Application</p> | <code><p>Medellin, Date</p> |
| <p>Medellin, Date</p> | |
| <p>Name</p> | <p>Name</p> |
| <p>Estimados Senor,</p> | <p>Estimados Senor,</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>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>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>Me encuentro en alta disposición para conversar con ustedes más ampliamente. Espero su llamado para una entrevista y conocernos mejor.</p> |
| </p> | <p>Atentamente,</p> |
| <p> | <p>Murray</p></code> |
| Atentamente, | |
| </p> | |
| <p> | |
| Jane | |
| </p></code> | |
| * Some basic formatting can be done using html tags - we've seen p, em, strong and sup. | * 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. | * More complex formatting is available using attributes. Attributes are parameter:value pairs inside tags, and they apply to everything between the tags. |
| | |
| | ==== Colour ==== |
| * As an example, let's make the first paragraph blue by adding <html>style="color:blue;"</html> inside the <html><p></html> tag as follows. | * As an example, let's make the first paragraph blue by adding <html>style="color:blue;"</html> inside the <html><p></html> tag as follows. |
| <code><p 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></code> | <code><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></code> |
| * Run the code to check the result. | * Run the code to check the result. |
| * We are applying a style, hence <html>style=""</html> | * We are applying a style, hence <html>style=""</html> |
| * Notice the <html>:</html> used to separate the parameter and the value. | * Notice the <html>:</html> used to separate the parameter and the value. |
| * Also notice the <html>;</html> at the end of the pair. | * Also notice the <html>;</html> at the end of the pair. |
| | |
| | ==== Tag: Span ==== |
| | |
| * We can select a section of text to style by using <html><span></html>. Let's make the text 'la escuela pide 400 horas de práctica profesional' red. | * We can select a section of text to style by using <html><span></html>. Let's make the text 'la escuela pide 400 horas de práctica profesional' red. |
| <code><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></code> | <code><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></code> |
| * Run the code to see whether you did it correctly. | * Run the code to see whether you did it correctly. |
| | |
| | ==== Rule: Multiple Parameters ==== |
| | |
| * You can change two styles at the same time by separating them with a <html>;</html> as follows. | * You can change two styles at the same time by separating them with a <html>;</html> as follows. |
| <code><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></code> | <code><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></code> |
| * Now the red text should also be bold because it has a higher <html>font-weight</html>. 300 is very faint and 900 is very heavy. | * Now the red text should also be bold because it has a higher <html>font-weight</html>. 300 is very faint and 900 is very heavy. |
| | |
| | ==== Indent ==== |
| | |
| | * We can indent the first line of a paragraph with <html>text-indent</html>. |
| | <code><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></code> |
| | |
| | ==== Alignment ==== |
| | |
| * 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. | * 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. |
| <code><p style="text-align:right;">Medellin, Date</p></code> | <code><p style="text-align:right;">Medellin, Date</p></code> |
