Ya dije que el HTML no es tan complicado como parece, pero hacer tablillas es aún más sencillo, pues sólo se necesita imaginación y simples conocimientos básicos.
Para realizar una, sea cual sea el diseño, lo primero es hacer un boceto de lo que queremos en un papel o en el Paint mismo. Se hace con formas simples, lo que buscamos es el esqueleto del diseño. Por ejemplo podría ser un rectángulo alargado de manera vertical con otro más pequeño dentro, una imagen arriba, encabezada por un título y cerrada por abajo con unos bloques rectangulares finitos y los créditos; es decir, esto:
Como veis, no tiene mucha ciencia y el paso siguiente menos todavía. Lo que vamos a hacer es dividir las partes en bloques, o como lo llamamos la última vez: en cajas. Dentro de la caja más grande irán las más pequeñas, como en una muñeca rusa, la más grande se come a las pequeñas.
Lo escribimos encima de la tablilla dibujada, ayuda a ir dándole forma al código e incluso a visualizarlo, puesto que si lo escribimos directamente nos podemos liar. El resultado sería este:
¿Vais perdiendo el miedo?
Como ya dije esto es muy simple, con llevar un poco de organización hasta un novato podría hacer algo precioso, porque los códigos son eso: organización, lo demás es ir aprendiendo nuevas características para añadir o ir quedándose con las ya aprendidas.
Es preferible que vayamos de mayor e menor, siempre de mayor a menor, incluso en las características, que es lo que viene ahora.
Una vez tenemos nuestro esqueleto dibujado junto a las cajas (div), es hora de escribirlo:
Y así el esquelo está completado. Podéis usar el Word o el Bloc de Notas para redactarlo (yo prefiero este segundo), ayudaos también de los colores como hice en el ejemplo.
►¡Vamos a por las propiedades!◄
Lo que tenemos ahora mismo es una estructura muy básica, hace falta darle formato. Continuamos con el mismo ejemplo anterior.
¿Veis donde pone PROPIEDADES? Ahí es donde escribiremos las propiedades CSS que le darán forma a nuestros div. Al final del tutorial pondré páginas donde podéis consultar las propiedades que existen, pero por el momento os diré algunas de las más básicas, las cuales he utilizado en esta tablilla.
>Empezamos por el div que constituirá el fondo, la caja más grande y la cual puse de rojo. Estas son las que yo usé:
• width: 570px; ancho del cuadro.
• margin: 0 auto; sirve para que la tablilla aparezca centrada.
• padding: 10px; La separación con todo lo que vaya en su interior.
• background-color: gainsboro; el color de fondo. En mi caso es Gainsboro.
• border-style: solid dashed: sirve para variar el diseño del borde, en este caso es un borde uniforme por arriba y abajo y fragmentado por los lados.
• border-width: 2px: el ancho del borde.
• border-color: black: el color del borde, esta vez negro.
Este es ahora nuestro código:
Lo que resultaría en esto:
Una vez hecho esto sólo hay que dedicarse en hacer lo mismo en cada uno de los div que hemos colocado. Para servir de ejemplo pondré las características que usé.
En el nombre:
• text-align: center; Para centrar el texto.
• color: slategray; El color de las letras.
• font-family: amatic SC; La fuente, es decir la forma, de las letras.
• font-size: 70px; El tamaño de estas.
• letter-spacing: -1px; Separación entre las letras.
• padding: 2px; Separación entre el texto y lo que irá debajo.
En la forma que lo subraya:
• width: 210px;
• height: 2px; Altura de la forma.
• background: cadetblue;
• oppacity: o.6; Sirve para jugar con la transparencia, para hacerla más o menos visible. Vosotros podéis quitársela si no os gusta.
• margin: 0 auto;
En el subtítulo:
• text-align: center;
• color: darkgray;
• font-family: kristi;
• font-size: 19px;
• letter-spacing: 2px;
En la imagen:
• width: 400px;
• height: 170px;
• border-radius: 100px 100px 100px 100px; Es para redondear los bordes, por si queremos uno más picudo o más redondeado.
Para el fondo del texto:
• width: 410px;
• max-heigth: 400px; Limita la altura máxima, si es menor a 400px (en este caso) la altura se ajusta al texto, es decir, varía. Sino lo entendéis probad a poner un texto muuuuy largo al terminar y luego poned sólo un par de palabras, la altura habrá variado para adaptarse al texto o a lo que haya en su interior.
• overflow: auto; Para añadir scroll (la barrita de subida y bajada).
• background-color: cadetblue;
Para el texto:
• font-family: lato;
• color: darkslategray;
• text´-align: justify; Para que salga en justificar.
• font-size: 12px;
• letter-spacing: 1px;
Para el fondo de los datos (es el mismo en las cinco ocasiones):
• float: center; Posiciona los elementos de forma flotante, y en este caso específicamente en el centro.
• width: 405px;
• height: 23px;
• border-right: solid 3px; Para el borde sólo a la derecha.
• border-left: solid 3px; Para el borde sólo a la izquierda.
• border-color: darkslategray;
• background-color: cadetblue;
Para las letras de datos:
• text-align: center;
• letter-spacing: 1px;
• font-family: amatic sc;
• color: darkslategray;
• font-size: 20px;
Y finalmente para los créditos:
• width: 200px;
• height: 14px;
• background-color: slategray;
• margin: 0 auto;
• font-family: lato;
• font-size: 7px;
• text-align: center;
• color: gainsboro;
Quedaría una cosa así:
Luego, añadí desde la imagen hasta el último de los div de datos un código para centrar todos los elementos:
• <---center--> Así se abre.
• Se coloca al final y se cierra con ello.
También debo avisar que para poner las fuentes que usé se debe añadir el código:
• <-----link href='http://fonts.googleapis.com/css?family=Kristi|Lato:400,100italic|Amatic+SC|Zeyada' rel='stylesheet' type='text/css'----->
Al comienzo de la tablilla, antes de todos los otros códigos. No os preocupéis, yo tampoco sé qué carajos dice, aunque tampoco es que lo haya puesto a lo loco, sino que se consigue yendo a la página Google Fonts. Allí eliges la fuente que más te guste, le das a usar (o añadir a la lista si vas a usar más de una) y la misma página te lo da.
En conjunto sería esto:
Lo que se traduciría en esto una vez lo previsualizáramos en cualquier página web que admita HTML:
Yo ya le añadí la imagen, para ello sólo hay que poner el url de ella en el apartado que dice "url".
Con esto ya sabéis cómo hacer una tablilla, la cual podéis usar para casi cualquier cosa. Si os dáis cuenta esta está hecha con las mismas propiedades una y otra vez, cambia poca cosa de un div a otro, quizá una propiedad, si es que varía algo. Tiene poco, menos de lo que parece; aunque esto es sólo el comienzo.
Las páginas que podéis consultar son:
Antes de terminar con el tutorial os daré un dato curioso. El texto en latín que hay para rellenar el hueco no tiene traducción, se trata del texto que siempre se usa en diseño gráfico para probar la eficacia del diseño, si tiene algún fallo o está correcto.
