Ante todo buenos días comunidad, seguramente muchos de ustedes se han preguntado en algún momento,"¿como esos users pueden crear esas paginas con esos diseños tan geniales?", si no sabes a que me refiero es a algo como esto, o este, estos diseños pueden ser aplicados tanto en artículos como en el perfil de usuario, para ello se necesita una mezcla especial de dos elementos en el diseño web hoy en día, HTML y CSS.

¿vale y eso con que se come?

Bueno para eso es este tutorial, para empezar debemos saber que función cumple cada uno.

Frontend-Development

¿fron que?, si suena a chino, pero en el desarrollo web moderno es la parte que se dedica a la programación de todo lo que el usuario puede tocar y ver (diseño, interactividad y estructura de una pagina web), para esto se trabaja solo con 3 lenguajes, HTML (Estructura),CSS (Diseño) y JavaScript o Js (interactividad).

El objetivo de estas guías es solo enfocarnos en el diseño así que solo cubriré HTML y CSS, cada una en una guía aparte. Debo acotar que esta guía será extensa, y puede que compleja (es "avanzado"), por lo tanto dedicare una para cada lenguaje.

¿por donde empezamos?

Lo primero es entender el entorno de trabajo, para estás guías es imposible trabajar con el editor de texto de wikia en modo visual, es obligatorio irnos a editor fuente (o source como también se le conoce). Una vez tenemos nuestro editor pre-definido podemos empezar a trabajar.

Un poco de historia

HTML corresponde a las siglas en ingles de "HiperText Markup Language" y lo podríamos traducir al español como "Lenguaje de Marcado de Hipertexto". Sus orígenes se remontan al año 1980, cuando el físico Tim Berners-Lee, trabajador del CERN propuso un nuevo sistema de "hipertexto" para compartir documentos. De allí en adelante el lenguaje evoluciono hasta lo que es hoy (es una historia muy extensa e interesante, pero ponerla toda me abarcaría toda la guía, puedes indagar más en wikipedia).

Algo a denotar es que HTML a diferencía de un lenguaje de scripting o programación que usa secuencias de comandos para realizar procesos, es un lenguaje de marcado, esto significa que usa "etiquetas" para identificar el contenido.

Etiquetas

La estructura de un documento HTML ha sido comparada como un sándwich. Así como el sándwich tiene dos rebanadas de pan, el documento HTML tiene "etiquetas" html de apertura y de cierre.

Estas etiquetas, como el pan del sándwich envuelven a todo lo demás.

Quizás en este momento estés más confundido que al principio, pero vamos por partes, en ese ejemplo estoy llamando a la etiqueta p (parrafo), básicamente cuando el navegador lea el archivo sabrá que todo lo que haya en medio de etiqueta de apertura y la etiqueta de cierre es un párrafo y lo mostrará como tal.

De hecho tú mismo puedes probarlo ahora mismo, si escribes en el editor lo siguiente, signo menor que "<" luego la p, después signo mayor que ">", luego el contenido que quieras mostrar como párrafo y luego el cierre, si eres listo de habrás dado cuenta de que las etiquetas de cierre es exactamente la misma que las de apertura solo que tienen una barra después del menor que.

HTML cuenta con un extensa cantidad de etiquetas que pueden ser colocadas en un archivo, sin embargo como este tutorial está orientado a wikia hay un pequeño gran problema... veamos.

Estructura

Si estuviéramos haciendo nuestra propia página web, necesitaríamos hacer algo así.

<html>
    <head>
      esto no lo usaremos
    </head>
     <body>
       esto es lo que normalmente vemos como un articulo XD
    </body>
</html>

HTML cuenta con una etiqueta llamada head, la misma es la cabecera del archivo, acá irían todos los elementos no visuales que ayudan a que la página funcione, el body es todo lo que se puede ver y donde etiquetas como p se pueden usar, cual es el problema, un articulo en si no es una pag. web y por lo tanto no podemos usar todas las características de html, ya que Wikia por defecto solo nos permite usar las etiquetas que estén en el body. Si esto se te hace muy abstracto recuerda que HTML es como un sándwich, en el caso de nuestro articulo (esta misma pag por ejemplo) nuestros panes serían las etiquetas body, aunque no las podemos ver (y por lo tanto no las podemos declarar) están allí.

Como decía, está limitación nos hará tener que ver solo elementos que puedan ser vistos. Pero viendo el lado positivo será mucho más sencillo entender como va esto.

mucha palabrería, que puedo meter en el body entonces?

Pues todo lo que se puede ver, Imágenes, Encabezados, Párrafos, Listas, Citas, Hipervinculos etc. Y todas las veremos en este curso ;).

Ahora sí, empecemos a la práctica

Para empezar no es necesario que coloques una etiqueta p en cada párrafo que vayas a escribir (sería lo idílico pero tanto tú como yo sabemos que esto no va a ser así), recuerda que HTML solo nos sirve para darle una estructura bien definida a nuestras paginas, por lo tanto las etiquetas nos sirven para mejorar la forma en como se estructura nuestro contenido.

Párrafos

Estos ya los vimos, pero no está de más ahondar en ellos. Para crear un párrafo, simplemente se escribe dentro de un elemento p entre sus etiquetas de apertura y cierre. (mirar en la galería imagen 1 y 2)

nota: los navegadores automáticamente agregaran una linea antes y después del párrafo.

Ahora bien, podemos hacer esto un poco más divertido agregando un salto de linea, esto nos permite saltar a la siguiente linea (¿enserio?) sin la necesidad de tener que declarar un nuevo párrafo, veamos.

(mirar en galería imagen 3 y 4).

Si estás atento, habrás notado que el atributo de salto de linea br, no posee una etiqueta de cierre, esto es así porque es un elemento HTML vacío (esto lo veremos más adelante). De hecho hay algunas etiquetas que también tienen está condición.

Formatos de Texto

En HTML, hay una lista de elementos que especifican el estilo del texto. Los elementos de formato fueron diseñados para mostrar tipos especiales de texto.

(ejemplos en la galería imagen 5 y 6).

Como ves, los exploradores muestran la etiqueta strong como una etiqueta b (negrita), y a la etiqueta em como la etiqueta i (cursiva). Sin embargo, los significados de estas etiquetas difieren: b, e i definen el texto en negrita y en cursiva respectivamente, mientras que strong y em indican que el texto es "importante".

Encabezados HTML

HTML incluye seis niveles de encabezados, los cuales están clasificados de acuerdo a su importancia.

Estos son h1,h2,h3,h4,h5 y h6.

En la Galería pueden ver en la imagen 7 un ejemplo de su uso, a su vez en la imagen 8 como se verá en nuestra página.

Lineas Horizontales

También llamados separadores, nos permiten dividir nuestra página en secciones (visualmente hablando) acá debo dejar algo como acotación, wikia ya trae por defecto una forma de agregar estos elementos, pero aun así podemos invocarlos con HTML.

En la galería en la imagen 9 y 10 podrán ver ejemplos de las dos formas.En el ejemplo la parte de arriba es como sería en html, es decir con la etiqueta vacía hr y abajo se puede ver el ejemplo de como lo hace wikia con cuatro guiones juntos. Cualquiera de las dos formas es válida, eso si, este es un elemento del que no hay que abusar en nuestras páginas.

Comentarios

No, no son los que te van a dejar en tú pagina por verse kawaii, hablo de los comentarios en código, en programación se define como un comentario a una linea de código que no se va a ejecutar.

Esto naturalmente lleva a dos posibilidades.

Documentar el código:
Testear

Veamos los ejemplos en las imágenes 11 y 12. Si te diste cuenta las líneas que tenía la etiqueta de comentario no ese ejecutaron, incluso después de que la cerré más abajo después de el otro párrafo (cabe destacar que como dije el segundo párrafo no se mostró).

Atributos

Los atributos proveen de información adicional sobre algún elemento o etiqueta, a la vez que lo modifican. La mayoría de los atributos tienen un valor; El valor modificara el atributo.

En el ejemplo en la imagen 13 y 14, podemos ver como, el valor del "center" indica que el contenido dentro del elemento p debería estar alineado hacia el centro. El atributo align es usado para especificar cómo alinear el texto. por lo tanto el Atributo align puede recibir los valores, "center", "left" o "right".

Por poner un ejemplo, podemos modificar la linea horizontal para que tenga un ancho de 50 pixeles. Esto se puede hacer utilizando el atributo width. (imagen 15 y 16)

Sin embargo el ancho de un elemento también puede ser modificado usando el signo de porcentaje. La diferencia es que no es lo mismo decir 50px de la pantalla a que cubra un 50% de está.

Una etiqueta puede tener uno o varios atributos, cada uno de ellos separados por un espacio. Quizás te estés preguntando ¿y cuantos atributos existen?, pues la respuesta corta es que muchos, cada etiqueta tiene una cierta cantidad, pero hay atributos que se comparten en varías etiquetas. Si te interesa saber más acerca de esto acá hay una lista de todos los atributos de html4 (lo que podemos usar acá en wikia).

OJO: hay ciertos atributos y etiquetas que no podrás usar acá en wikia, pero no te preocupes wikia ya tiene elementos para compensar esto. Por ahora te recomiendo que solo uses las etiquetas que menciono en este curso, ya que todas las he probado y se que funcionan ( con ello sus respectivos atributos), a su vez existen atributos que no son necesario usarlos ya, debido a que css (cuando lo veamos) hará todo esto mucho mejor.

Listas

Todos en algún momento hemos tenido que listar algo, HTML nos permite listar objetos de dos formas, por medio de "listas ordenadas" y "listas no ordenadas".

Ordenada

Una lista ordenada empieza con la etiqueta ol (ordained list o en español las siglas de lista ordenada XD) a su vez cada item dentro de la lista es definido por una etiqueta li.(imagen 17 y 18).

Es ordenada porque todos los items dentro de ella obtienen un número desde el 1 hasta n (Siendo n el item máximo que coloques).

No ordenada

Una lista no ordenada comienza con la etiqueta ul (unordained list). (imagen 19 y 20)

A diferencia de la lista ordenada, acá los items serán marcados con viñetas.

Tablas

Con HTML podemos crear tablas, estás son definidas usando la etiqueta table a su vez estas son divididas en filas con la etiqueta tr y estás filas son divididas en columnas con la etiqueta td (es acá donde van los datos de la tabla).

Las etiquetas de datos de la tabla (td) actúan como contenedores de datos dentro de la tabla. Estas pueden almacenar todo tipo de elementos HTML como texto, imágenes,listas, otras tablas y demás.(imágenes 21 y 22)

Sin embargo para poder ver la forma de nuestra tabla hay que agregar un atributo a la etiqueta table, en concreto el atributo border. En realidad lo que estamos haciendo es agregar un borde a la tabla, aunque no le coloquemos uno la misma mostrara los datos de forma ordenada. El atributo border recibe como valor un número entero entre comillas, cuanto mayor sea el número que le asignes mas grueso será el borde de la tabla.(imágenes 23 y 24)

Las celdas (td) de una tabla pueden expandirse entre dos o más columnas, para esto se le tienen que pasar a la etiqueta td un argumento, si queremos extender de forma horizontal llamaremos al argumento colspan, este espera un número entero entre comillas este indica cuantas celdas se va a expandir. A su vez si quieres expandir las celdas es de forma vertical se debe utilizar el argumento rowspan, este funciona exactamente igual que el colspan pero en vertical.(imágenes 25,26,27 y 28)

Como ves, los atributos rowspan y colspan nos permiten jugar con la tablas a gusto. Una tabla de HTML puede recibir muchos otros parámetros, como el width para definir su anchura, o el align para definir su alineación en el documento. Sin embargo nuestras tablas son bastante feas para que engañarnos jaja, pero esto puede corregirse, si usamos el atributo bgcolor en alguna etiqueta td, podemos establecer de que color será el fondo de esa casilla de la tabla. Mas sin embargo esto puede muy bonito a la hora de personalizar nuestras tablas es ineficiente. Lo ideal tanto para manejar el borde como el background de nuestras tablas es hacerlo por medio de CSS, pero eso no lo haremos por ahora. sin embargo si aun así quieres experimentar el como se vería tu tabla con diferentes colores puedes hacer lo siguiente, en la etiqueta td después de un espacio coloca bgcolor="color en ingles que quieras usar", por color en ingles me refiero a colores puros, "red", "white", "black" etc.

Más adelante veremos como HTML maneja el color.

Hay aun una última etiqueta por ver. La etiqueta th nos permite crear el encabezado de una tabla. La forma de usarlas es igual a las td, es decir en medio de dos etiquetas tr. Para que veas el potencial de las tablas en tus artículos he preparado un ejemplo sencillo, un horario.

Mi horario de código

Hora	Lunes	Martes	Miércoles	Jueves	Viernes
8:00-8:30 AM	Aprender
9:00-10:00 AM		Practicar
1:00-1:30 PM			Jugar
3:45-5:00 PM				Programar
6:00-6:15 PM					Discutir

A poco no quieres hacer la tuya propia jaja, las tablas tienen una infinita cantidad de propósitos, el hecho de que las puedas usar para representar cualquier tipo de información las hace muy versátiles, el límite lo estableces tú, ah por cierto el código es muy extenso para una captura, te reto a que hagas tu propia versión con lo que te he enseñado (pd: lo único diferente lo que dice lunes, martes, miércoles, etc es una serie de etiquetas th). Para Culminar este capitulo debo acotar una última cosa, si bien las tablas pueden ser hechas en HTML wkia nos permite crear tablas también de una forma un tanto diferente, utilizando llaves ({) y barras (|), las dos funcionan exactamente igual, de hecho lo único que ahorrarías haciendo una tabla en wikia son 2 líneas de código, eso si, la única ventaja que tienen las tablas de wikia es que ya tienen una clase definida por defecto que hace referencia al css de la wiki y le da un diseño por default, así que por esa parte tendrías que escribir menos, pero aun así si te interesa hacer todo tú mismo HTML es tu mejor opción. (no te preocupes por todo eso de las clases aun no es momento de eso jiji).

Elementos en linea (inline) y elementos en bloque (Block)

Ya casi terminamos esta guía, :( admito que me pone hasta un poco triste jaja, bueno vamos a lo importante, este es quizás el tema más importante de toda la guía, así que enserio espero que entiendan.

En HTML, la mayoría de los elementos son definidos a nivel de bloque(Block) o en linea (inline). Los elementos a nivel de bloque empiezan desde una nueva línea. ejemplos de estos pueden ser el h1, li, ol, ul, p, pre, table, div etc.

Los elementos en linea son normalmente desplegados sin los saltos de linea. ejemplos de estos son, b, strong, em, span, etc.

Ahora ¿que es eso del div?, el elemento div es un elemento a nivel de bloque que es a menudo utilizado como "contenedor" para otros elementos HTML. Cuando es usado en conjunto con el CSS, el elemento div nos permite darle estilo a bloques de contenido; Es decir, si recuerdas al comienzo de este curso dije que la estructura de HTML era similar a un sandwich, div son los panes que pueden cubrir una gran cantidad de elementos dentro de el, esto nos permite que podamos darle estilo a todo lo que el contenga porque todo forma parte de ese bloque, supongamos que yo quiero hacer que está letra sea de color verde pero no quiero que el siguiente párrafo sea verde también, si yo encierro este párrafo en un div y le pongo el estilo para que sea verde, solo esté será verde.

Para este ejemplo me tomaré la libertad de agregar un poco de CSS, sin embargo solo quiero que se fijen en el comportamiento del articulo. (imagen 29 y 30) Como ves, utilizando el div puedo cómodamente crear bloques o secciones de código con diferentes estilos.

Ahora bien el otro elemento que mencione, span (no confundir con spam), es un elemento de linea cuyo uso más frecuente es para contenedor de algún texto. A su vez cuando se usa junto con CSS, el elemento span puede darle estilo a partes del texto.

De nuevo me tomare la libertad de usar CSS, pero recalco solo me interesa que veas el comportamiento. (imagen 31 y 32) Como ves en el ejemplo, "seccione" el encabezado en dos partes abriendo y cerrando el span e incluso pude darle estilo a una parte especifica del texto.

Como última acotación, puedes insertar muchos elementos de linea dentro de un elemento de bloque, pero jamás podrás meter un elemento de bloque en un elemento de linea.

Ahora mismo estas etiquetas no proveen mucha funcionalidad, pero cuando empecemos la guía de CSS tendrán mucho más poder y utilidad.

Colores HTML

¡Sí!, HTML también nos permite dar color, ciertos atributos como bgcolor, color, etc , con capaces de recibir valores que definan el color de la etiqueta que estemos usando. Ya hemos visto que podemos usar color absolutos siempre y cuando coloquemos su nombre en ingles, "red", "green", "blue" etc. pero esta paleta es sumamente limitada.

HTML puede aceptar colores en valores hex (hexadecimales) "¿hexa que?", hexadecimales, para hacer la historia corta, existen muchas formas de representar los números, nosotros usamos el lenguaje decimal, se le dice decimal porque posee diez dígitos (0,1,2,3,4,5,6,7,8,9), con estos puedes representar cualquier número decimal que te de la gana, pues resulta y pasa que existen otros sistemas de numeración, quizás el más conocido es el binario (0,1), pero en ciencias de la computación tenemos dos más, los octales (0,1,2,3,4,5,6,7) y lo hexadecimales, estos últimos hacen referencia al 16 y su uso más común es para definir colores.

El problema con los hex es que si te fijas solo tenemos diez dígitos numéricos ( del 0 al 9), entonces ¿donde están los otros 6?, quizás algún listillo pensó que bueno debe seguir con el 10, pues no, el 10 es la unión de dos dígitos, el 1 y el 0, los programadores decidieron usar entonces letras, cada letra representa un numero mayor al otro, y empieza en orden alfabético desde la a hasta la f. Entonces nuestros hexadecimales quedarían tal que así (0,1,2,3,4,5,6,7,8,9,A,B,C,D,E,F). Como pueden ver hay 16 valores, siendo el 0 el nivel más bajo y F el nivel más alto.

Los colores son especificados en combinaciones de rojo, verde y azul claro, este el tan conocido RGB, el RGB puede ser usado en HTML junto con el hex.

Los valores hexadecimales son escritos con el símbolo de un numeral (#), seguido por tres o seis caracteres hexadecimales.

Rgb — lo que quiere decir rgb, es cuanto de rojo, verde y azul se mezclan para crear otro color.

Todas las combinaciones posibles de colores de rojo,verde y azul suman más de ¡16 millones!, tienes colores de sobra para aburrirte, los ejemplos más clásicos podrían ser el negro (#000000) o el blanco (#FFFFFF). Son demasiadas como para aprenderlas todas, pero, para eso existen webs que nos permiten elegir el color que queramos y nos muestran el código hex para meterlo en nuestro código.

"Vale pero aún no lo pillo", mira es simple, si lo notas los hex (como colores) tienen 6 dígitos, los primeros 2 representan la cantidad de rojo, los 2 de en medio nos dicen la cantidad de verde y los 2 del final nos dicen cuanto azul. Si recuerdas la charla del principio, los hex no son más que otra forma de escribir números, por ejemplo para obtener el rojo absoluto, sería tan sencillo como poner esto (#FF0000) FF hex es igual a 255 en decimal, es decir le estamos diciendo ponle 255 de rojo y nada de verde y azul. Usando esta lógica puedes conseguir otros colores, como el verde absoluto, (#00FF00) o el azul absoluto (#0000FF).

Pero mucha palabrería y poca practica, ¿que les parece si los vemos en acción?, mira las imágenes 33 y 34.Utilice un div y algo de CSS pero como ven no use el valor "blue" para establecer el fondo, ni el white para la letra, solo use valores hex.

Pero como decía, son muchas combinaciones, así que es bueno tener alguna web que permita hacer estos cálculos por nosotros, | está es la que yo más uso.

¡Fin del Curso!

Lamentablemente ya les he enseñado todo lo que wikia puede soportar de HTML en sus artículos, muy pronto seguiremos con la guía de CSS, y podremos terminar de darle estilo a nuestras páginas ;)

¡happy coding! y declara variables... no la guerra :D