Timeman/El rincón de Eric - Especial agosto 2015

0

Votar

Hola a todos los desesperados lectores. Este mes, como es especial (dado que cumplo 20 añitos) he decidido hacer un bien para esta comunidad de SmashPedia mostrándoos algo que seguramente os sirva de mucha ayuda en Wikia.

¿Que qué es? Hace poco empecé (y ya acabé XD) un curso de HTML. ¿Y sabéis qué? ¡Wikia funciona con HTML! Bueno, realmente funciona con una versión adaptada para simplificar el uso a los editores. Pero si algo es cierto es que tener nociones de este lenguaje web facilita el entendimiento de plantilles, tablas y demás coses que quizás no entendías ahora (o quizás sí pero queréis saber por qué exactamente). Sinceramente (excepto algún caso) no recomiendo su uso en las páginas, pero sí que lo recomiendo para vuestros perfiles.

Sin más preámbulos, empecemos. Solo haré la temática básica (aunque las versiones adaptadas de Wikia no las tocaré de nuevo en HTML). Sin embargo, si queréis que profundice algo más solo tenéis que pedírmelo. Obviamente también existen etiquetas HTML que no funcionan en Wikia.

Etiquetas

¿Qué son exactamente? Fácil, es lo que está entre los símbolos “<” y “>”. Debéis tener en cuenta que la mayoría van por parejas (es decir, está el que delimita dónde se empieza a actuar y el que indica dónde acaba, el cual se marca con una barra “/” después del “<” y antes del nombre de la etiqueta). Sin embargo, hay algunas que van Forever Alone individualmente.

Casos de doble etiqueta

• <H1>, <H2>,…,<H6>: es el equivalente en Wikia a las opciones de cabecera, pero con estas etiquetas podemos alterar los atributos de la fuente. El H1 es el más grande y el H6 el más pequeño.
• <TABLE>: bueno, si bien es verdad que es una pareja de etiquetas, esta se trae a toda la familia, pues necesita otras plantillas para ser creadas. Junto con TABLE debe ponerse con las etiquetas <TR>, <TH> y <TD> Lo curioso es que estas subetiquetas, a excepción de la primera, la etiqueta de cierre es opcional, pues considera la siguiente etiqueta como su cierre. A “grosso modo”, <TABLE> crea el espacio donde irá la tabla, <TR> crea una nueva fila, <TH> corresponde a una celda de título y pone en negrita su contenido y <TH> es el contenido normal de una celda. También existe la etiqueta <CAPTION> y su cierre, que permiten colocar un título a la tabla.
• <FONT>: estas estiquetas permiten nada más y nada menos que cambiar la fuente, tamaño y color de lo que haya entre estas. Una herramienta muy guay, pero por desgracia muy limitada en Wikia en cuestión de fuentes.
• <SUP> y <SUB>: permiten escribir como ^superíndice y _subíndice respectivamente.
• <U>: no necesita una vasta descripción ni una gran presentación: estas etiquetas simplemente permiten subrallar un texto.
• <DIV>: crea un espacio para texto. Si ponemos solamente texto y estas etiquetas parece que no hacemos más que perder tiempo y esfuerzo de forma inútil, pero lo chulo es unificar atributos, que se verán más adelante… Lo que hay dentro de estas se conoce como “capa”.

Casos de etiqueta simple

Cabe destacar en este caso que, poniendo el ejemplo de la etiqueta <br>, esta puede escribirse así o de la siguiente forma: <br />. ¿Cambia algo? Absolutamente nada ¿Y pues, por qué existen ambos nombrados? Se podría decir que el segundo caso (el de la barra) está hecho para indicar a los programadores novatos que esa etiqueta es individual y no tiene una etiqueta de cierre (o que lo es ella misma).

• <br>: ¿qué es más fácil, usar la etiqueta o pulsar el Enter? Sí, esa es su función… ¿Entonces por qué se creó? Bueno, esto viene del HTML puro, en el que el Enter funciona igual que el espacio (además de no ser acumulativo, por lo que es lo mismo pulsar una vez el Enter que un millón, ya que el espacio que generará visualmente (en código quedará hechu un asco XD) es el mismo). Sin embargo, la utilidad de este wiki es poder representar el salto de línea de una forma más pulida.
• <hr>: poco usada en este wiki, esta etiqueta. Su función es crear una línea horizontal divisoria. Sencilla y práctica para dividir apartados. Además, es bastante manejable con los atributos (de los que hablaré más adelante), por lo que se convierte en una herramienta muy efectiva.

Casos exclusivos de Wikia

• <nowiki>: ya el nombre indica que los de Wikia fueron los que crearon esta etiqueta. Sirve para mostrar etiquetas, código y otros aspectos sin que se transformen en lo que hacen. Un ejemplo de su uso es si queremos representar la etiqueta br. Si no ponemos las etiquetas nowiki a ambos lados de la br simplemente haría su función de crear un salto de línea, pero si lo ponemos así <nowiki><br></nowiki> pasaremos a ver la etiqueta en sí en vez de su función. Como podréis haber deducido, este par de etiquetas incluso tienen efecto sobre sí mismas. Un claro ejemplo es que yo mismo me he visto obligado a poner esta recursividad para mostraros los efectos. Es el equivalente a las etiquetas <PRE> de HTML (hacen lo mismo, pero las etiquetas NOWIKI suelen ser más limpias).
• <strike>: sencillamente permite mostrar un texto tachado (ya habéis visto varios casos, entre los cuales está este mismo).

Cabe destacar que ambos casos consisten en casos de doble etiqueta (de apertura y cierre).

Parámetros a las etiquetas dadas

• align: compatible con la mayoría de etiquetas que crean algo desde cero. Permite elegir dónde colocar lo que genere la etiqueta. Puede las opciones right, left, center o (caso exclusivo para texto, si no funciona como left) justify. Un ejemplo de uso es <TABLE ALIGN="Right">, que crearía una tabla pegada a la derecha.
• colspan y rowspan: parámetros exclusivos de las tablas, permite fusionar celdas (ojo, celdas, no Zeldas XD), siendo las contiguas a la derecha o hacia abajo respectivamente. Solo pueden usarse en las etiquetas <TH> y <TD>. Un ejemplo es el siguiente: <td colspan=2>ethjsr</td> donde el 2 es el número de celdas que fusiona.
• color: Cambia el color de la letra: puede indicarse por su nombre en inglés (p.e. “aqua”) en hexadecimal (p.e. #15AFF0 o, de forma simplificada, #FF0), mediante la combinación RGB (p.e. “rgb(255,230,15)”, donde cada número va del 0 al 255), mediante la combinación RGBA (p.e. “rgba(255,230,15, 0.3)”, donde el último número va del 0 al 1), mediante la combinación HSL (p.e. “hsl(30,50%,25%)”, donde ) o mediante la combinación HSLA (p.e. “hsla(30,50%,25%,0.3)”).
• bgcolor: permite cambiar de color al fondo de una tabla (y otros elementos, pero aquí solo hemos visto que tenga un fondo la tabla, y las capas usan otro atributo).
• border: hay varios atributos con este nombre y todos ellos alteran las características de los bordes, como border-width (cambia el grosor del borde), border-color (cambia su color) o border-style (cambia la forma en cómo se pinta, como puede ser en 3D o de forma discontinua). Si entre “border” y “width” ponemos “top”, “bottom”, “right” o “left”, los cambios sólo se darán en el lado en el que se indiquen.
• style: permite englobar atributos a una capa (¡¡¡de ahí lo guay de la etiqueta <DIV>!!!) o texto y/o aplicarlos en estos. Algunos atributos que se le pueden dar son background-color (establece un color plano como fondo de la capa), z-index (si hay varias capas que se pisan establece una prioridad, eligiendo quién está encima de quién), width (establece la anchura, o en la etiqueta <hr> lo largo que es la línea que se dibuja), height (establece la altura)… Estos atributos también pueden colocarse en la capa de forma independiente.

Y ahora os voy a sorprender… ¡esto no es HTML! Si bien es verdad que este lenguaje es un complemento para HTML (es decir, no tiene sentido sin HTML), HTML puede funcionar perfectamente sin él, pero con unos resultados “no tan agraciados para la vista”. ¿Y qué lenguaje es este?, te estarás preguntando… Pues se trata de CSS.

Otros

• http://lookingforgroup.wikia.com/wiki/Help:Font Por si quereis saber las fuentes compatibles con Wikia. Vereis que algunas se repiten.
• https://es.ssbwiki.com/wiki/Ayuda:Paleta_de_colores Para que sepáis qué colores soporta Wikia (el HTML normal soporta muchos menos en cuestión de colores por nombre).

Ejemplos de código y resultado

Ahora veréis la magia del HTML en Wikia en vivo y en directo :D. Primero veréis el resultado y después el código que lo ha producido:

Este texto es enorme y naranja (no confundir con un Cheeto)…

Pero este es enano y de color púrpura

---

Aquí se ha creado una capa de fondo aqua…

¡Y permite meter otras etiquetas dentro!

Tabla de ejemplo

Título 1	Título 2
Y… ¡fusion!
Contenido de la casilla 2-1	Yo soy más cool que mi vecina ewe

No, no lo he escrito a mano

¡Sorpresa, no os expliqué esta etiqueta! (simpemente cambia la fuente para mostrar el texto como código de programación)

<H1 style="color:orange">Este texto es enorme y naranja (no confundir con un Cheeto)…</H1> <H6 style="color:purple">Pero este es enano y de color púrpura</H6> <hr ALIGN="center" Width="50%"/> <div style="background-color: aqua"> Aquí se ha creado una capa de fondo aqua… <h1 font="color:red">¡Y permite meter otras etiquetas dentro!</h1> </div> <table border=1 width=70% bgcolor=yellow align=center cursor: help> <caption>Tabla de ejemplo </caption> <tr> <th>Título 1</th> <th>Título 2</th> </tr> <tr> <td colspan=2>Y… ¡fusion!</td> </tr> <tr> <td>Contenido de la casilla 2-1 <td>Yo soy más cool que mi vecina ewe </tr> </table> <font face=script color=red size=4>No, no lo he escrito a mano</font> <samp>¡Sorpresa, no os expliqué esta etiqueta! (simpemente cambia la fuente para mostrar el texto como código de programación)</samp>
Nota: Si sale todo junto es debido a que la etiqueta <nowiki> también suprime cambios de línea (actúa como el editor de texto interpreta el HTML).

Despedida

Para ver el Rincón anterior haz click aquí --------------------------------- Para ver el siguiente Rincón haz click aquí

Ver la lista completa

En fin, espero que hayais disfrutado aprendiendo (sííííííííí, claaaaaroooo, disfrutar aprendieeeendoooo) y que os sirva un poco para animar vuestros perfiles. Como dije, si quereis que cuente algo más o no entendéis algo simplemente decidlo.

Saludos.

Loading comments...