Differences

This shows you the differences between two versions of the page.

--- web_design:letter:attributes [2021/10/04 17:20]
mag created
+++ web_design:letter:attributes [2023/08/16 09:33] (current)
@@ Line 1: / Line 1: @@
-====== Web Development ======
+====== Web Development Lesson 2 - Letter ======
-===== Lesson 1 - Letter =====
+===== Attributes =====
-==== Attributes ====
+==== Setup ====
+Continue using jsfiddle with the same code from the previous screen. Here it is again.
+<code><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></code>
+  * 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.
+==== 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.
+<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.
+  * We are applying a style, hence <html>style=""</html>
+  * Inside the inverted commas is the specific style, designated by the parameter value pair, where <html>color</html> is the parameter (the colour of the text) and <html>blue</html> is the value we wish to use.
+  * Notice the <html>:</html> used to separate the parameter and the value.
+  * 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.
+<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.
+==== Rule: Multiple Parameters ====
+  * 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>
+  * 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.
+<code><p style="text-align:right;">Medellin, Date</p></code>
+  * There are many other style attributes, but most are more commonly applied to headings.
+[[web_design:letter:headings|Next: Headings]]

Tech School

User Tools

Site Tools

Differences

Page Tools