Aunque el blog está mayormente enfocado al diseño con Photoshop, el HTML también es útil a la hora de pasearnos por internet. No sé vosotros, pero yo suelo pasar mucho tiempo en foros y blogs, sobretodo en foros varios, donde el diseño es una maravilla o vemos tablillas que nos dejan pasmados. ¿Y eso cómo se hace? Con los códigos HTML. Parece complicado, sin embargo una vez los comprendes la cosa va como la seda. No os dejéis intimidar por los códigos, parece que muerden pero al final son muy amables.
Hay dos tipos de elementos HTML en general. Unos pueden usarse de diferentes maneras, otros funcionan como si fueran ambos. Hablamos de:
• Elementos de bloque (block elements): estos pueden contener dentro otros códigos de bloque (divs) o de línea (links) sin problemas, son elementos «grandes».
• Elementos de línea (inline elements): pueden contener dentro otros elementos de línea, sin embargo no podemos meter uno de bloque. Es decir: no podemos incluir un div en un link.
• Elementos de línea (inline elements): pueden contener dentro otros elementos de línea, sin embargo no podemos meter uno de bloque. Es decir: no podemos incluir un div en un link.
Esto conforma el body de nuestro documento HTML.
ELEMENTOS DE BLOQUE
La mejor forma de pensar en los elementos de bloque es que son como cajas, donde uno puede meter dentro de todo, otras cajas más pequeñas, sobres, papeles... Nos permiten incluir muchos otros elementos. Asimismo, una propiedad fundamental de estas «cajas» es que suelen ocupar todo el ancho del lugar donde están metidos, en otras palabras: siempre medirán el 100% del ancho, no importa lo poco que haya en su interior. Para evitar esto (si es que queremos evitarlo) es añadir una anchura determinadas.
Para ello añadimos «width: (número de píxeles que deseemos de anchura)px». Yo, por ejemplo, le voy a poner 140 píxeles de anchura.
• Quedaría de esta manera:
De esta manera no importa lo que escribamos, la anchura y la altura seguirán siendo las mismas.
<--div style="width: 140px;">De esta manera no importa lo que escribamos, la anchura y la altura seguirán siendo las mismas.<--/--div--->
(Los guiones entre los corchetes y el "div" están para que se puedan ver el código, en realidad no los lleva)
Pero todavía está un poco soso, ¿verdad? Sólo con las letras... Para darle un poco más de color explicaré otra manera de jugar con los elementos de bloque: el fondo. Podemos ponerle un color o una imagen de fondo a nuestra caja. En esta ocasión explicaré cómo añadir el color, es tan sencillo que uno se ríe de ello.
Añadimos (siempre separado por un punto y coma de la anterior característica -estas deben estar cerradas por comillas, sino el código no aparecerá correctamente-) «background: (nombre o código RGB del color deseado)».
• El mismo div añadiéndole el «background»:
Se vería de esta manera.
<--div style="background: tomato; width: 140px;">Se vería de esta manera.<--/--div-->
(Los guiones entre los corchetes y el "div" están para que se puedan ver el código, en realidad este no los lleva)
Por supuesto, esto es sólo el principio, hay muchísimas formas de mejorar nuestro diseño u otras clases de elementos que nos ayudan a mejorar la estética, otras características como la barrita de subida y bajada que nos encontramos a la derecha de las páginas, bordes, efectos... El HTML es todo un mundo y esto un insignificante aperitivo.
