Últimos temas
» [SKIN] Hello? how are you
por Unity Vie Ene 06, 2017 11:55 pm

» Pack 1 de html (personaje + firma)
por Rose Jue Ene 05, 2017 5:19 pm

» [FIRMA] Mikagura Suite
por Natty Mar Dic 27, 2016 9:57 am

» [SKIN] Attack No Titan
por Flowman Jue Dic 15, 2016 8:51 pm

» Owari no seraph's
por Cool Skelleton_95 Mar Nov 15, 2016 2:04 pm

» Simple flutter
por Amaranth Miér Oct 26, 2016 8:54 am

» Duda sobre sorteo de skin
por SS Jue Sep 15, 2016 8:22 pm

» [MOVIL] [ FA ] Haikyuu
por Sarisha Mar Ago 30, 2016 6:07 am

» Pedido grafico
por DangerStRichard Dom Ago 28, 2016 7:09 pm


{TUTORIAL HTML} Traducción del BBCode a Html

Ver el tema anterior Ver el tema siguiente Ir abajo

{TUTORIAL HTML} Traducción del BBCode a Html

Mensaje por Mikae el Dom Jul 31, 2016 8:24 pm


TRADUCCIÓN DEL BBCODE A HTML
¿Recuerdan esos códigos entre corchetes que son muy fáciles de usar, y en los foros los usamos diariamente? Pues es hora de dejarlos de usar ¡Vamos! Eso ya paso de moda. Es hora de aprender que el bbcode en parecido pero algo complejo.

Bases y recordatorios

Empezamos
El BBCode se utiliza de una forma similar al lenguaje HTML: Se utilizan etiquetas entre corchetes de la siguiente manera: Usaremos [etiqueta] para abrir la etiqueta y [/etiqueta] para cerrarla. Es decir, los famosos corchetes serán eliminados para reemplazarlos con elementos HTML. Pues no demoro más. Empecemos

Recomendación: Para que se te resulte más fácil puedes ir probando tus códigos en un http://codepen.io/pen/ en la parte que dice HTML introducirás lo necesario. 

Etiquetas y SIntexis
Para aprender más HTML, debemos aprender cómo hablar sobre HTML. Ya viste que usamos mucho los símbolos.
[/size]
Código:
<>

¿Aclaraciones? Has visto el típico div style entre <>
Pues ese div se le llama etiqueta. Estas siempre vienen dos, es decir una que abre y la otra cierra por ejemplo:

Código:
<div> es la que abre y el </div> es la que cierra.

Recuerda siempre que al abrir etiquetas debes cerrarlas, si no tu código no funcionará o se deformará, tan bien se toma en cuenta que debes cerrarlas en orden correcto.

Código:
<holi1><holi2>¡Algún texto!</holi3></holi1>

Asi como existe la etiqueta div que es muy usada también podremos encontrar etiquetas como a, abbr, acronym, address, applet, area, b, base, basefont, bdo, big, blockquote, body, br, button, caption, center, cite, code, col, colgroup, dd, del, dfn, dir, div, dl, dt, em, fieldset, font, form, frame, frameset, h1, h2, h3, h4, h5, h6, head, hr, html, i, iframe, img, input, ins, isindex, kbd, label, legend, li, link, map, menu, meta, noframes, noscript, object, ol, optgroup, option, p, param, pre, q, s, samp, script, select, small, span, strike, strong, style, sub, sup, table, tbody, td, textarea, tfoot, th, thead, title, tr, tt, u, ul, var. Pero en cierto modo para abasrcar la creación de tablillas les recomiendo el uso de los atributos

div etiqueta se utiliza para agrupar bloques-elementos para dar formato con CSS
p Retorno de línea, con un espacio.
a Viene a ser un Hipervínculo, es decir, permite compartir enlaces
CENTER permite centrar
IMG Cargar imágenes
Comenzamos

Atributos
¿Ya aprendieron a abrir un formato HTML? Pues ahora eso no es todo, aun empezamos con lo mejor. ¿Atributos? ¿Wtf? Pues estos complementan a la etiqueta y le dan una función determinada. El div no trabaja solo, este puede estar acompañado. Para nuestro famoso div se puede utilizar.

class = "propiedades aqui": Establece la clase CSS que se aplica a los estilos del elemento

style = "propiedades aqui": Establece de forma directa los estilos CSS de un elemento

style: Especifica un estilo CSS en línea para un elemento

No solo el div, también el a, el img, etc. Para más ayuda http://crismattweb.tripod.com/guiahtml/etiqueta.html#Atributos
Recuerda que los atributos siempre van al lado derecho de la etiqueta que abre, solo de la que abre.

Aprendiendo a usarlos
Primero que nada elegimos el atributo style="" ya que con este podremos trabajar mejor la zona HTML, y ahora una etiqueta yo por ejemplo uso el div, esta es con la que más frecuencia trabajo para los cuadrados y rellenos de mis tablillas.

01.¿Recuerdas como comenzamos? Abrimos en nuestro code pen una sintaxis y etiqueta seleccionada.
Código:
<div></div>

02. Ya tenemos nuestra base, ahora aplicamos un style, recuerden siempre acompañarlo de  ="" adentro de las comillas es donde irán las propiedades del color, relleno, etc.

Código:
<div style="propiedades aquí"></div>

¿Aún no comprenden del todo? Entonces pasemos a traducir el bbcode al HTML.
¿Qué code normalmente utilizas para colocar imágenes? La respuesta es este
Código:
[img][/img]
¿O me equivoco?
Ese código es fácil de reemplazar, buscamos en etiquetas para imágenes, la única seria img al igual que en el bbcode. Entonces seguimos el primer paso ¿Lo recuerdan?

01. Lo trasladamos a sintaxis, este es uno de los atributos que no necesita cerrarse.
Código:
<img>

02. Sí, vienen los atributos, en la lista que les di anteriormente, pueden buscar que atributo se usa para el img. Este es src que indicara la url de la imagen.
Código:
<img src="url aqui">

Puedes probarlo en tu code pen para que te asegures que si dará resultado.
mikae © 2016
avatar
Mikae

Mensajes : 275

Ver perfil de usuario

Volver arriba Ir abajo

Ver el tema anterior Ver el tema siguiente Volver arriba

- Temas similares

 
Permisos de este foro:
No puedes responder a temas en este foro.