Tutoriales del foro

Saludos gente!! Aquí nuestro primer tutorial.

-Tenemos nuestra barra de herramientas o de edición de mensaje:



-Bueno, ahora enfoquémonos en estos íconos encerrados en el recuadro rojo:



-Ok, el primer ícono: B, se llama "Negrita", es para engrosar, por así decirlo, la fuente con la que escribimos. Sirve para remarcar títulos, o algo que deseemos resaltar de manera muy llamativa.
-Si le dan clic, en su mensaje aparece lo siguiente:

Código:

[b][/b]

. En medio de este código, si ponen una letra o un título se verá así:

Título
-Para usar este código sin dar clic al ícono, aquí les dejo el código, sencillo de usar:

Código:

[b][/b]

-También lo pueden construir ustedes mismos: en su teclado usan los corchetes [], en medio de cada uno escriben una "b" minúscula, y en la última pareja de corchetes, antes de "b", usan la diagonal /, para cerrar así el código.

-Bien, vayamos al segundo ícono I, se llama "Cursiva", o también se le conoce cómo "Itálica". Al usarlo, nos hace la fuente precisamente, en cursiva, es decir, ladea o inclina nuestra fuente un poco más a la derecha; por eso luce así:

Tutorial número uno

-Sí le damos clic al ícono, en nuestro espacio del mensaje aparece esto:

Código:

[i][/i]

-En medio de esos corchetes con la i y la /i, nuestro texto se transforma así:

Foro La Pluma y la Ficción

-El código lo pueden usar, está más arriba.


-Ahora el siguiente ícono: U, se llama subrayar. Si damos clic en este ícono, en nuestro espacio para el mensaje, se verá así:

Código:

[u][/u]

-Si escribimos en medio de esos corchetes, nuestro texto lucirá así:

Foro La Pluma y la Ficción


-Por último este ícono: S, que nos pone una raya a nuestro texto. Al darle clic, nos muestra este código en el espacio de nuestro mensaje:

Código:

[strike][/strike]

-Si escribimos en medio de esos corchetes, así se verá nuestro texto:

Foro La Pluma y la Ficción


-Antes de cerrar, un detalle que no deben olvidar; para que se visualice nuestrp texto según el código que hayamos elegido, es muy, muy importante escribir en medio de los corchetes, así:

Código:

[b]Aquí escribes[/b]
[u]Aquí escribes[/u]
[i]Aquí escribes[/i]
[strike]Aquí escribes[/strike]

-No debes salirte de esos corchetes, ya que, como se cierra el código con una diagonal "/", significa que, cualquier texto que escribamos después de esta diagonal, ya no le aplica el efecto del código, y lo que esté antes de la diagonal "/", se ve modificado por el código.

Saludos!! Bueno aquí les explicaré cómo alinear tanto texto como imágenes (también se puede las tablas, pero lo veremos más adelante) a distintas direcciones: izquierda, derecha, centrar y justificar.

-Para empezar, estas alineaciones las hemos visto en Office o en los procesadores de texto, ¿verdad? Cuando trabajamos en Word, se encuentran esas opciones en nuestra barra de herramientas, así que estamos familiarizados con su función. Pero aquí, en el foro se necesita saber de unos códigos para verlas en función.

-Vamos a nuestra barra de herramientas de nuestro mensaje:


-Bien, localizamos esta sección de íconos:


-El primer ícono es este: , si colocamos el cursor sobre dirá su nombre: "Alineado a la izquierda". Pues cómo lo indica su nombre, es para linear a la izquierda un texto o una imagen.

-Bien, presionamos sobre este ícono y aparecerá en nuestro espacio para escribir el siguiente código:

Código:

[left][/left]

Entre corchetes, muy importante escribir o colocar un elemento en medio de ellos []Aquí el contenido[/], de lo contrario no surtirá efecto. Un ejemplo si escribimos fuera de los corchetes:

hoy.

Vemos que la frase entera no está alineada a la izquierda, sólo el contenido que se encuentra en medio de los corchetes: Un día como.

Lo esencial es tener siempre en cuenta que lo que está dento de los corchetes, tendrá un efecto en específico.

-Vamos a alinear un texto a la izquierda poniendo todo entre corchetes:

Código:

[left]Estoy buscando a mi Samurái, ¿usted lo ha visto? Es un hombre serio, bien parecido. su expresión es fría, pero su espíritu es tan noble que podría confundirle con su mirada, pues ha batallado tanto que debe endurecer el rostro.[/left]

Así luce cuando lo vemos en nuestro espacio para escribir, pero una vez que lo publicamos, no se ven esos corchetes, sino así:


-Ahora, esto mismo sucederá si nos vamos al siguiente ícono: , "Centrado". Nos acomodara todo al centro:


De igual forma, el siguiente ícono: , Alineado a la derecha:


Y lo mismo con el último ícono: , Justificado:


-No abordaré en sí el tema de cómo subir imágenes al foro o dónde cargarlas, ya que lo veremos más adelante. Pero, sí es importante decirles que se puede alinear las imágenes con estos íconos:

Código:

[img]Aquí URL de la imagen[/img]

Este es el código para visualizar imágenes en tus mensajes, lo mismo, debe ir entre esos corchetes. Copiamos la URL de una imagen, por ejemplo esta:



No está alineada en un sitio específico, pero si ponemos los corchetes de uno delos ícono para alinear, se verá así:

Código:

[left][img]http://i38.servimg.com/u/f38/19/10/16/49/aver610.jpg[/img][/left]

Lo vemos de esta manera en nuestro espacio para escribir; una vez publicado se ve así:

Para la izquieda


Para el centro


Para la derecha:


Justificado:

-También te puedes generar el código sin escribir dando clic a este ícono:

, que se llama: "Insertar una imagen". Debes tener antes copiada la URL de la imagen. La pegas en el espacio que dice: "URL", das clic en "Insertar" y listo, te aparecerá tu imagen dentro del código:

Código:

[img]http://i38.servimg.com/u/f38/19/10/16/49/slide210.jpg[/img]

Así se ve, pero una vez que lo publicas:





Pues ahí lo tienen. Es sencillo de usar las ailneaciones, y les servirá de mucho.

-Saludos!! Esta vez les explicaré la función, y cómo usar, estos íconos:

-Bien, en nuestra barra de herramientas de mensaje:



vamos a localizar estos íconos:



-Ok. Si pasamos el cursor sobre el primero: , verán que les dará el nombre de: "Citar". Es precisamente para dejar citas ya sea de un libro, portal de internet, o un dato que deseas recalcar que fue dicho por alguien.

-Si damos clic sobre este ícono, verás que aparecerá un espacio dónde dice: "Autor" (Opcional), es para dar crédito a los dueños del contenido que estás tomando prestado y quieres darlo a conocer en el foro. Es muy importante dejar el autor cuándo el contenido no es tuyo.

-En ese mismo recuadro se encuentra un botón que dice "Insertar". Damos clic y aparecerá lo siguiente:

Código:

[quote][/quote]

-Ese código de "quote" significa "cita" en inglés, es para recalcar de manera especial ese contenido. Por ejemplo:

La filosofía (del latín philosophĭa, y este del griego antiguo φιλοσοφία, «amor por la sabiduría») es el estudio de una variedad de problemas fundamentales acerca de cuestiones como la existencia, el conocimiento, la verdad, la moral, la belleza, la mente y el lenguaje. Al abordar estos problemas, la filosofía se distingue del misticismo, el esoterismo, la mitología y la religión por su énfasis en los argumentos racionales por sobre los argumentos de autoridad, y de la ciencia porque generalmente lleva adelante sus investigaciones de una manera no empírica, sea mediante el análisis conceptual, los experimentos mentales, la especulación u otros métodos a priori, aunque sin desconocer la importancia de los datos empíricos.

Fuente: Wikipedia

-Vemos ahí que he citado la definición de Filosofía según el sitio web "Wikipedia". Como esa definición no es mía, entonces pongo la fuente.

-Si pongo la cita de un autor, entonces luce así:

Código:

[quote="Miguel de Cervantes Saavedra"]Aquí la cita[/quote]

Bien, ahora coloquemos el contenido dónde debe ser. Recuerden, entre los corchetes:

Miguel de Cervantes Saavedra escribió:En un lugar de la Mancha, de cuyo nombre no quiero acordarme, no ha mucho tiempo que vivía un hidalgo de los de lanza en astillero, adarga antigua, rocín flaco y galgo corredor. Una olla de algo más vaca que carnero, salpicón las más noches, duelos y quebrantos los sábados, lentejas
los viernes, algún palomino de añadidura los domingos, consumían las tres partes de su hacienda. El resto della concluían sayo de velarte, calzas de velludo para las fiestas con sus pantuflos de lo mismo, los días de entre semana se honraba con su vellori de lo más fino.

El ingenioso Hidalgo Don Quijote de La Mancha

Veremos que dice el nombre del autor de la cita, el contenido y yo le añadí la fuente. Pueden hacerlo simplemente escribiendo todo dentro de los corchetes:

Código:

[quote][/quote]

-Ahora veamos el siguiente ícono: , se llama "Código". Sirve para dejar precisamente códigos ya sea en HTML o BBCode, que son los código que utilizamos en corchetes.

-Por ejemplo. Si yo les quiero dar a conocer una ficha que deben llenar para un caso particular de un tema en el foro, se los dejo en código para que lo hagan automático y no manual. Es decir, ya les doy transformado un texto.

Cualquier código debe ir entre estos corchetes "code".

Código:

[b]Nombre de Usuario[/b]
[b]Nombre de fanfic[/b]
[b]Enlace directo al Fanfic[/b]

Ahí está ese código de ejemplo. Si yo doy clic en "Seleccionar todo el contenido", se selecciona todo y si lo pego en mi mensaje, luce así:

Nombre de Usuario
Nombre de fanfic
Enlace directo al Fanfic

Ya no es necesario escribie manualmente el código para hacer negrita la fuente.

O bien, un código HTML:

Código:

<div style="width: 300px; height: 90px; background-color: #A86E6E; border: 3px solid #6C1111; box-shadow: 1px 1px 1px 1px #000000; font-family: Tahoma; color: #FFFFFF; font-size: 20px; text-align: center; text-shadow: 1px 1px 1px #000000; padding-top: 6px;">Esto se puede lograr con un código HTML</div>

Copiamos este código y luce así:



-Incluso también podemos dejar una imágen:

Código:

[img]http://illiweb.com/fa/pbucket.gif[/img]

Copiamos el contenido, y luce así, una vez que lo pegas en tu mensaje:



-Ahora veamos el siguiente ícono: , "Spoiler". Es para esconder contenido que no quieres mostrar por varias razones:

• Para no estropear la trama de un libro, serie o película, que alguien no ha visto
• Para ocultar contenido que tú consideras algo incómodo para otros.
• Para no demorar la carga de imágenes y videos, etc.

-Si damos clic aparecerá lo siguiente: "Insertar". Bien damos clic y en nuestro mensaje aparecen los corchetes:

Código:

[spoiler][/spoiler]

Ocultemos un video (Para subir un video, debes copiar la URL, y luego das clic aquí, en la barra de herramientas en el ícono que dice "YouTube", y pegas la URL de tu video):

Código:

[spoiler][youtube]GuJQSAiODqI[/youtube][/spoiler]

Así luce cuando lo tenemos en nuestro mensaje, una vez qué lo publicas se ve así:

Spoiler:

Damos clic en la etiqueta que dice "spoiler" y les mostrará el contenido.

-Puedes ocultar también una imagen:

Spoiler:

-O algo que quieres revelar pero que puede afectar a otros:

En la película "La Lista de Schindler" Oskar lloró al final porque:

Spoiler:

No pudo salvar a la niña que vestía el abrigo rojo.

-Bien, pasemos al último ícono: , "Oculto". Es parecido al spoiler, pero su contenido sólo pueden verlo los usuarios del foro, no es para los invitados.

-Se trata de un contenido muy exclusivo para los usuarios del foro. Por ejemplo:

• Premios
• Códigos propios del foro
• Temas especiales u otro contenido de la misma índole

-Si le dan clic, verán este código: "hide", que significa "esconder":

Código:

[hide][/hide]

Bien, vamos a ocultar esta imagen:




-No lo verán prácticamente escondido porque son miembros del foro, pero los invitados sí encontrarán la imagen en modo oculto.






Pues hemos llegado al fin de este tutorial.

-Saludos gente!! Ahora veremos la función "Insertar tabla". Bien, localizemos nuestra barra de herramientas de nuestro mensaje, esta:



-Ahora, en esa barra, ubicamos el siguiente ícono:

, llamado "Insertar tabla".

-Una vez que le demos clic, aparece lo siguiente:

Código:

[table][tr][td][/td][/tr][/table]

Bien, vamos a definir cada etiqueta de "insertar tabla":

• La primera:
  

  Código:

  [table][/table]

  , esta etiqueta encierra el cuerpo de la tabla, todo lo que vaya dentro de ella, será la constitución de esta. Si no esta dentro de la etiqueta "table", no surtira efecto alguno el elemento o elemenos que queramos encerrar dentro de una tabla.
  
• La segunda:
  

  Código:

  [tr][/tr]

  , la etiqueta "tr" es la fila que contendrá las celdas. Es decir: en una misma línea o hilera pueden ir cuantas celdas queramos.
  
• La tercera:
  

  Código:

  [td][/td]

  , la etiqueta "td", es la que encierra una celda o columna. Pueden ir tantas etiquetas "td" o columnas en una misma fila o etiqueta "tr".

-Ok, ahora veremos en función la tabla:

Esta es una columna

-La pregunta es, ¿cómo saber dónde ira la columna? Bien, como dijimos que todo va dentro de la etiqueta "table", entonces, la fila y la columna también, es necesario para crear una tabla:

Código:

[table][tr][td]Esto es una columna[/td][/tr][/table]

Como puedes ver, la etiqueta "table" encierra a las demás, luego viene la etiqueta "tr" que es la que define la fila, todo lo que vaya dentro de la etiqueta "tr" irá en la misma fila. Y luego viene la etiqueta "td", que es la columna, dónde van los datos de la tabla.

-Veamos si agregamos otra columna:

Código:

[table][tr][td]Columna 1[/td][td]Columna 2[/td][/tr][/table]

Las columnas siguen dentro de la etiqueta "tr", porque van en la misma fila. Ahora en función:

Columna 1

Columna 2

-Bien agreguemos otra fila:

Código:

[table][tr][td]Columna-Fila 1[/td][/tr][tr][td]Columna-Fila 2[/td][/tr][/table]

Todo está dentro de la etiqueta "table", pero una etiqueta "td", que es la columna está dentro de una etiqueta "tr", y otra columna ("td") se halla dentro de otra etiqueta "tr". En función luce así:

Columna-Fila 1

Columna-Fila 2

-Adornemos nuestra tabla con letras en negrita, itálica, subrayado y colores:

Columna 1 -Datos de esta primer columna	Columna dos Datos columna dos	Columna tres Datos columna tres
Columna-Fila 2 Datos columna	Columna tres Datos columna tres	Datos fila tres

-¿Cómo ponemos colores a nuestra tabla? El truco esta en esto:

Código:

[table][/table]

En esa etiqueta, la primera "table" deben ir datos así:

Código:

[table border="1" bgcolor="red" bordercolor="white"][tr][td][/td][/tr][/table]

-Ok, vamos a ver los atributos:

• "border", es precisamente el borde que rodea nuestra tabla. Tiene un grosor. Este grosor para que surta efecto debe ir entre "" comillas y después del =.
  
• bgcolor, es el color de fondo o del cuerpo de nuestra tabla. Debes escribir los colores en inglés, y lo mismo, entre "" comillas y después del signo =.
  
• bordercolor, es el color del border, de igual forma que el atributo anterior, debe estar escrito en inglés, ir entre comillas y luego del signo =.

-Ojo, estos atributos deben ir dentro de la primera "table", como se ve en el código.

-Puedes agregar más atributos sólo dentro de esa etiqueta.

-También puedes centrar tu tabla, sí, ocupando la alineación: izquierda, derecha, centro, justificado.

Centrado:


Izquierda


Derecha

Justificado

-Para que surja efecto, recuerda poner entre las etiquetas de alineación, todo el cuerpo de tu tabla:

Izquierda:

Código:

[left][table bgcolor="orange" border="1" bordercolor="white"][tr][td][b]Columna 1[/b]
-Datos de esta primer columna[/td]
[td][b][color=#0033cc]Columna dos[/color][/b]
Datos columna dos[/td]
[td][i]Columna tres[/i]
[b]Datos columna tres[/b][/td]
[/tr]
[tr][td][b][color=#FFFFFF]Columna-Fila 2[/color][/b]
Datos columna[/td]
[td][i]Columna tres[/i]
[b]Datos columna tres[/b][/td]
[td][i]Datos fila tres[/i][/td]
[/tr]
[/table][/left]

Centrado:

Código:

[center][table bgcolor="orange" border="1" bordercolor="white"][tr][td][b]Columna 1[/b]
-Datos de esta primer columna[/td]
[td][b][color=#0033cc]Columna dos[/color][/b]
Datos columna dos[/td]
[td][i]Columna tres[/i]
[b]Datos columna tres[/b][/td]
[/tr]
[tr][td][b][color=#FFFFFF]Columna-Fila 2[/color][/b]
Datos columna[/td]
[td][i]Columna tres[/i]
[b]Datos columna tres[/b][/td]
[td][i]Datos fila tres[/i][/td]
[/tr]
[/table][/center]

Derecha:

Código:

[right][table bgcolor="orange" border="1" bordercolor="white"][tr][td][b]Columna 1[/b]
-Datos de esta primer columna[/td]
[td][b][color=#0033cc]Columna dos[/color][/b]
Datos columna dos[/td]
[td][i]Columna tres[/i]
[b]Datos columna tres[/b][/td]
[/tr]
[tr][td][b][color=#FFFFFF]Columna-Fila 2[/color][/b]
Datos columna[/td]
[td][i]Columna tres[/i]
[b]Datos columna tres[/b][/td]
[td][i]Datos fila tres[/i][/td]
[/tr]
[/table][/right]

Justificado:

Código:

[justify][table bgcolor="orange" border="1" bordercolor="white"][tr][td][b]Columna 1[/b]
-Datos de esta primer columna[/td]
[td][b][color=#0033cc]Columna dos[/color][/b]
Datos columna dos[/td]
[td][i]Columna tres[/i]
[b]Datos columna tres[/b][/td]
[/tr]
[tr][td][b][color=#FFFFFF]Columna-Fila 2[/color][/b]
Datos columna[/td]
[td][i]Columna tres[/i]
[b]Datos columna tres[/b][/td]
[td][i]Datos fila tres[/i][/td]
[/tr]
[/table][/justify]

-Te los dejo en código para que veas cómo debe ir cada elemento, ya que así se ve siempre que escribes en tu mensaje, pero al publicarlo, luce cómo lo acomodaste.

-Debes asegurarte de que cada elemento ocupe el lugar que le corresponde para lograr el efecto que tú deseas.






Eso ha sido todo por hoy.

Saludos gente!! Ahora veremos las funciones: "Lista" e "Insertar una línea".

-Ok, en nuestra barra de herramientas, localizamos el siguiente bloque de íconos:



Que se llaman (si pasas el cursor sobre ellos): "Lista", "Lista ordenada e "Insertar una línea".

-Veamos el primero: , "Lista". Bien, damos clic sobre el y veremos lo siguiente:

Código:

[list][*][/list]

Ese código, servira para ordenar, en forma de lista, los elementos que deseamos. Pero, ¿cómo funciona? Ok. Primero, debemos tener siempre en cuenta que todo elementro dentro de un conjunto de corchetes, tendrá un efecto determinado.  Segundo, el asterístico entre los corchetes nos servirá de guía para ir formando nuestra lista.
Veamos un ejemplo:

Código:

[list][*]A. Cuaderno [*]B. Lapices [*]C. Borradores [*]D. Pegamento [*]E. Cinta adhesiva[/list]

Como podemos ver, ese asterísco debe ir antes de cada elemento para formar la lista, ahora luce así:

• A. Cuaderno
  
• B. Lapices
  
• C. Borradores
  
• D. Pegamento
  
• E. Cinta adhesiva
  

-Puedes ordenar lo que desees: texto, imágenes, enlaces, tablas, videos. Vamos a ver unos ejemplos.
Ordenemos imágenes:

Código:

[list][*]A. [img]http://i19.servimg.com/u/f19/19/10/16/49/utemas12.png[/img] [*][img]http://i19.servimg.com/u/f19/19/10/16/49/esacti10.png[/img] [*][img]http://i19.servimg.com/u/f19/19/10/16/49/tutori10.png[/img][/list]

Así es, el código IMG debe ir entre el conjunto de corchetes "list", y el asterístico entre corchetes, antes de cada elemento a ordenar. Luce así:

• A.
  
• B.
  
• C.
  

-Ahora veamos el siguiente ícono: , "Lista ordenada", es para enlistar elementos pero con una númeración. Si vas a enlistar 10 elementos, pues estarán ordenados desde el 1 hasta el 10.

-Si damos clic sobre el ícono, aparece lo siguiente:

Código:

[list=1][*][/list]

-¿Qué pasa aquí? ¿Ves de nuevo el asterístico? Esta vez, este asterístico te dará el número por defecto. Es decir, si lo ponemos delante de un elemento, lo ordenará según vayas enlistando esos elementos. Si al primer elemento de tu lista le antepones este asterísto, éste lo llamara "1", al siguiente "2", y así hasta terminar la lista.

Un ejemplo:

Código:

[list=1][*]Ventanas[*]Mesas[*]Sillas[*]Bancos[*]Cortinas[*]Puertas[/list]

Ahora veamos ya en función:

1. Ventanas
   
2. Mesas
   
3. Sillas
   
4. Bancos
   
5. Cortinas
   
6. Puertas
   

Ok, si advirtieron, ese asterístico es un número en secuencia, así, el primer asterístico es el 1, el siguiente el 2 y así hasta terminar. Recuerda, va delante de cada elemento para que surja efecto.

-De igual forma puedes enumerar lo que desees. Por ejemplo:

Código:

[list=1][*][img]http://i38.servimg.com/u/f38/19/10/16/49/nenca110.jpg[/img][*][img]http://i38.servimg.com/u/f38/19/10/16/49/nenca210.jpg[/img][*][img]http://i38.servimg.com/u/f38/19/10/16/49/nenca310.jpg[/img][/list]

Estas imágenes, que van antecedidas del asterístico. En función:

1. 
   
2. 
   
3. 
   

-Vamos por el siguiente ícono: , "Insertar una línea".

-Si damos clic, veremos lo siguiente:

Código:

[hr]

Así es, ese "hr" entre corchetes nos dará un salto de línea. Ok, veamos, un One-shot mío:

En este momento, yace dormido, abrazando su Katana, una costumbre en él. Ninguna novedad, llevamos cinco meses juntos, y él continúa aferrado a su Katana. ¿Y yo? ¿Cómo estoy? Me es imposible conciliar el sueño… ¡Yo no he matado a nadie, él sí, no es justo! ¿Será que la conciencia de un asesino es capaz de dominar sus propias memorias, como para lograr dormir sin recordarlas? No lo sé, tal vez estoy juzgándolo demasiado. Ni siquiera sé su edad. Sé su nombre, me lo proporcionó él mismo, en la posada, aquella mañana siguiente a la lluvia de sangre.

Como vemos luce "normal", como debe ser, en prosa. Pero si yo meto el código "hr" en medio de ese párrafo, miren lo qué sucede:

Código:

En este momento, yace dormido, abrazando su Katana, una costumbre en él. Ninguna novedad, llevamos cinco meses juntos, y él continúa aferrado a su Katana. ¿Y yo? ¿Cómo estoy? Me es imposible conciliar el sueño… ¡Yo no he matado a nadie, él sí, no es justo! [hr]¿Será que la conciencia de un asesino es capaz de dominar sus propias memorias, como para lograr dormir sin recordarlas? No lo sé, tal vez estoy juzgándolo demasiado. Ni siquiera sé su edad. Sé su nombre, me lo proporcionó él mismo, en la posada, aquella mañana siguiente a la lluvia de sangre.

¿Ven el "hr"? Sí, desde ahí: "¿Será? hasta el final del párrafo, "de sangre", habrá un salto de línea. Luce así:

En este momento, yace dormido, abrazando su Katana, una costumbre en él. Ninguna novedad, llevamos cinco meses juntos, y él continúa aferrado a su Katana. ¿Y yo? ¿Cómo estoy? Me es imposible conciliar el sueño… ¡Yo no he matado a nadie, él sí, no es justo!

---

¿Será que la conciencia de un asesino es capaz de dominar sus propias memorias, como para lograr dormir sin recordarlas? No lo sé, tal vez estoy juzgándolo demasiado. Ni siquiera sé su edad. Sé su nombre, me lo proporcionó él mismo, en la posada, aquella mañana siguiente a la lluvia de sangre.

¿Ves cómo hay un salto de línea entre ese párrafo? Ahora creé dos párrafos.

-Puedes usarlo dónde desees, pero se presta más obviamente para texto.

Cómo insertar una imagen, alojarla e insertar un enlace

-Saludos gente!! Esta vez, vamos a ver cómo insertar una imagen, cómo alojarla en el servidor del foro y cómo insertar enlaces.

-Bien, en nuestra barra de herramientas, localizamos este bloque de íconos:



Cada ícono tiene su nombre. Y el primero: , "Alojar una imagen", sirve para dejar una imagen en el servidor del foro. Te da una URL que debes copiar e insertar en tus mensajes o dónde desees, sin tener tú que buscar un lugar para alojar archivos.

-Ok, le damos clic y aparece un cuadro de diálogo como el siguiente:

• Dónde dice: "File", que es "archivo" damos clic en "Examinar".
• Te manda a tu PC. Buscas la imagen que deseas alojar.
• Más abajo, hay la opción de redimensionar la imagen. De todas formas, el foro redimensiona las imagenes de mayor magnitud a 600 x 500 pixeles.
• La opción "URL", si la seleccionas, te proporciona un espacio donde debes dejar la URL de tu imagen.
• Una vez copiada la URL en el espacio, das clic en enviar, y te transforma esa URL en la del servidor, además de alojarla en éste.

-Bien, vamos a alojar la imagen en este servidor. Subimos desde nuestra PC. Ahora, vemos que una vez que carga la imagen, nos da tres URL:

• La primera: Miniatura, es para, precisamente, cargar una versión más pequeña de nuestra imagen. Ejemplo: (debes copiar tal y como te da el servidor la URL)
  
  

  Código:

  [url=http://www.servimg.com/view/19101649/91][img]http://i19.servimg.com/u/f19/19/10/16/49/th/407px-10.jpg[/img][/url].

  
  
  
  Te da la URL del servidor dónde está alojada la imagen.
  
  También puedes ocupar este tipo de versión dónde desees.
  
• La segunda URL: Imagen: (copias tal y cómo esta la URL)
  
  

  Código:

  [url=http://www.servimg.com/view/19101649/91][img]http://i19.servimg.com/u/f19/19/10/16/49/407px-10.jpg[/img][/url]

  
  
  
  Nos da la imagen, en su tamaño normal, pero también, el enlace sobre ella del servidor dónde está alojada.
  
  
• La tercera: Dirección de la imagen, solamente te proporciona la URL (que esta última es la que más nos importa), que puedes colgar dónde desees.
  
  

  Código:

  [img]http://i19.servimg.com/u/f19/19/10/16/49/407px-10.jpg[/img]

  
  El código: IMG es para insertar imágenes.
  
  Ahora en función:
  
  
  
  
  -Bien, pasemos al siguiente ícono: , "Insertar una imagen". Ok, debes tener antes en un espacio para alojar archivos, como: One Drive, Photobucket, Gmail, Dropbox, Imageshark, Tripod, entre otros, alojada ya tu imagen, ya que vamos a necesitar la URL. O bien, copiar la URL desde cualquier sitio en internet.
  
  -Ok, copiamos la URL, venimos a nuestro foro, damos clic al ícono "Insertar una imagen", y aparece un cuadro de diálogo:
  
  
  • "URL": aquí pegamos la URL de nuestra imagen.
  • La segunda opción: Ancho, espara determinar la medida de ancho de nuestra imagen. Es más que nada para imágenes de magnitudes muy grandes.
  • De igual forma, Alto, modifica a nuestro gusto, el alto de nuestra imagen.
  • Sin embargo, como ya señalé, el foro dimensiona automáticamente a las imágenes de dimensiones muy grandes a: 600 x 500, una medida apreciable.
  
  
  -Copiemos una URL para insertarla en este mensaje. Damos clic al ícono "Insertar una imagen", pegamos la URL en el espacio que lo solicita:
  
  

  Código:

  [img]http://i38.servimg.com/u/f38/19/10/16/49/nenca210.jpg[/img]

  
  Así luce cuando lo insertamos en nuestro mensaje. Ahora, en función:
  
  
  
  -Si adviertes, hay dos opciones encima de la imagen, una dice:
  
  
  • "Ampliar imagen", precisamente la hace más grande, pero no a su tamaño original.
  • La segunda es: "Clic para ver su tamaño original", te envía a otra ventana para apreciar el tamaño máximo de la imagen.
  
  
  Sólo se da esto con imagenes muy grandes.
  
  
  -Veamos el último ícono de este bloque: , Insertar una URL. Este sirve para dejar enlaces externos, o también internos, del mismo foro, en nuestros mensajes.
  
  -Para dejar un enlace, debemos copiar una dirección web. Damos clic en el ícono mencionado, y nos da estos espacios:
  
  
  • "ULR": aquí pegamos la dirección web.
  • "Descripción "opcional": aquí es para dejar el nombre del sitio web.
  
  
  -Copiemos la URL del foro. Damos al ícono "Insertar una URL", pegamos en el espacio de "URL", la dirección del foro:
  
  

  Código:

  [url=http://foroplumayficcion.foroactivo.mx/forum]http://foroplumayficcion.foroactivo.mx/forum[/url]

  
  -El código que "URL", es para dejar enlaces. Recuerda, debe ir entre los corchetes para que surta efecto.
  
  -Ahora en función:
  
  https://foroplumayficcion.foroactivo.mx/forum
  
  -Como puedes ver, nos da la URL tal y como la copiamos. ¿Qué pasa si usamos la opción "Descripción"'?
  
  -Bien, volvamos a copiar la dirección web del foro:
  
  

  Código:

  [url=http://foroplumayficcion.foroactivo.mx/forum]http://foroplumayficcion.foroactivo.mx/forum[/url][/url]

  
  -Esta vez, ocupemos la "Descripción":
  
  

  Código:

  [url=http://foroplumayficcion.foroactivo.mx/forum]Visita La Pluma y la Ficción[/url]

  
  -La descripción aparece entre los corchetes "URL", seguido este de la dirección web, y cierra con otro corchete "URL".
  
  -Bien, ahora en función:
  
  Visita La Pluma y la Ficción
  
  -Puedes añadir la descripción a tu gusto. Y también puedes personalizar la fuente, sólo de la descripción:
  
  

  Código:

  [url=http://foroplumayficcion.foroactivo.mx/forum][i]Visita La Pluma y la Ficción[/i][/url]

  
  
  Aquí la pusimos en cursiva:
  
  Visita La Pluma y la Ficción.
  
  En Negrita:
  
  

  Código:

  [url=http://foroplumayficcion.foroactivo.mx/forum][b]Visita La Pluma y la Ficción[/b][/url]

  
  Visita La Pluma y la Ficción
  
  En subrayado:
  
  

  Código:

  [url=http://foroplumayficcion.foroactivo.mx/forum][u]Visita La Pluma y la Ficción[/u][/url]

  
  Visita La Pluma y la Ficción
  
  -También podemos insertar una imagen con enlace:
  
  
  • Primero, copiemos una dirección web.

    Código:

    [url=http://foroplumayficcion.foroactivo.mx/forum]http://foroplumayficcion.foroactivo.mx/forum[/url]

  • Vamos a sustituir la dirección web, esta: [*url=https://foroplumayficcion.foroactivo.mx/forum]https://foroplumayficcion.foroactivo.mx/forum[/url], por la dirección o URL de una imagen:

    Código:

    [url=http://foroplumayficcion.foroactivo.mx/forum][img]http://i38.servimg.com/u/f38/19/10/16/49/nenca210.jpg[/img][/url]

    .
  • Como puedes ver, la imagen va entre el código "IMG". Y listo!!
  
  
  En función:
  
  
  
  
  
  
  
  
  
  
  
  Fin del tutorial.
  
  

-Saludos!! Ahora veremos cómo insertar videos y una animación flash.

-Bien, primero vamos a localizar en nuestra barra de edición (o de herramientas) de mensaje, el siguiente bloque de iconos:


-Ok, veamos el primer ícono, que es muy reconocible, es el ícono del sitio web YouTube: . Bien, antes que nada, debemos tener YouTube abierto, buscamos un video que queramos compartir.

-Una vez que esté el video en reproducción o en pausa,  copiamos la URL. Damos clic al botón de YouTube en nuestra barra de edición de mensaje, aquí en el foro, y pegamos la URL en el espacio indicado.

-Damos clic en "Insertar", y veremos lo siguiente:

Código:

[youtube]zTuD8k3JvxQ[/youtube]

-Esos corchetes de "YouTube" es el código que nos permite visualizar aquí en el foro, directamente un video.

-Ya en función (lo pongo en spoiler para no tardar la carga de la página):

Spoiler:

-Ahora bien, si queremos modificar el tamaño del video, debemos copiar el código de inserción.

-Escojamos otro video, ahora con el clic derecho sobre éste, tomamos la opción: "Copiar el código de inserción".

-Una vez que tengamos copiado el código lo pegamos directamente en el espacio del mensaje:

Código:

<iframe width="640" height="360" src="https://www.youtube.com/embed/W6bT7Y-WfoY?feature=player_detailpage" frameborder="0" allowfullscreen></iframe>

-Ahí, tenemos las etiquetas "width" y "height". Bien:

• Width: significa en inglés "ancho"
  
• Height: significa "largo".

-Vamos a darle una anchura y altura menor de que el mismo video nos da por defecto:

Código:

<iframe width="300" height="260" src="https://www.youtube.com/embed/W6bT7Y-WfoY?feature=player_detailpage" frameborder="0" allowfullscreen></iframe>

-Como pueden ver, le cambiamos el tamaño; en anchura dice: 300, y en altura 260.

-Un ejemplo de cómo luce en tamaño normal:

Spoiler:

-Ahora con el tamaño modificado:

Spoiler:

-En la plataforma Dailymotion, tenemos también el ícono: en nuestra barra de edición.

-Si le damos clic, nos pedira la URL, la cual debemos tener ya previamente copiada.

-Pegamos la URL en el espacio que nos pide el foro:

Código:

[dailymotion]x2nmfws[/dailymotion]

-Vemos la URL de nuestro video entre la etiqueta "dailymotion".

-En función:

Spoiler:

-Ahora, si queremos modificar el tamaño del video de Dailymotion, debemos hacer lo mismo: copiar el código de inserción o de incrustado. Recuerda, con clic derecho.

-Lo pegamos directamente en el espacio de mensaje:

Código:

<iframe frameborder="0" width="480" height="270" src="//www.dailymotion.com/embed/video/x2nmfws" allowfullscreen></iframe><br /><a href="http://www.dailymotion.com/video/x2nmfws_volcano-calbuco-erupts-in-chile_fun" target="_blank">Volcano Calbuco Erupts in Chile</a> <i>por <a href="http://www.dailymotion.com/storyfulviral" target="_blank">storyfulviral</a></i>

-Modificamos la anchura y altura a nuestro gusto:

Código:

<iframe frameborder="0" width="300" height="200" src="//www.dailymotion.com/embed/video/x2nmfws" allowfullscreen></iframe><br /><a href="http://www.dailymotion.com/video/x2nmfws_volcano-calbuco-erupts-in-chile_fun" target="_blank">Volcano Calbuco Erupts in Chile</a> <i>por <a href="http://www.dailymotion.com/storyfulviral" target="_blank">storyfulviral</a></i>

-En función:

Sin modificar tamaño:

Spoiler:

Volcano Calbuco Erupts in Chile por storyfulviral

Con tamaño modificado:

Spoiler:

Volcano Calbuco Erupts in Chile por storyfulviral

-En cuanto las animaciones flash, localicemos el último ícono: .

-Todas las animaciones flash deben tener por terminación .swf. Podemos buscarlas en internet (bien, hacerlas con un programa especial para este tipo de animaciones y subirlas a un servidor), sólo pon en tu buscador: "Animaciones flash".

-Copiamos la URL de la animación, y damos clic sobre el ícono de nuestra barra de edición, llamado "Flash":

Código:

[flash(500,500)]http://www.creatupropiaweb.com/recursos/relojes/relojes_2/digital_sonido_clicks.swf[/flash]

-Vemos que el cuadro de diálogo tiene las opciones de modificar la anchura y altura. Podemos cambiarlas a nuestro gusto. El tamaño por defecto es de 500 pixeles de ancho por 500 pixeles de alto.

-En función, dejo ya una animación flash con un tamaño modificado:

Spoiler:

Fin del tutorial.

¡Saludos! Bienvenidos a otro nuevo tutorial, esta vez veremos cómo cambiar el formato a los títulos, cambiar el tamaño de la fuente y el color:

-Bien, localicemos en nuestra barra de edición, el siguiente bloque de íconos:



-Veamos el primero: , que si colocamos el cursor sobre éste, nos dara el nombre: Formato de los títulos.

-Si damos clic, nos despliega tres opciones: H2, H3 y H4. Que es la medida para los encabezados.

• H2
• H3
• H4

-Damos clic al primero: H2:

Código:

[h2][/h2]

-Recuerden, que siempre debe ir nuestro elemento al que queremos modificar en medio de las etiquetas con corchetes.

-Esa etiqueta "H2", nos dará el formato de un encabezado de buen tamaño:

¡Bienvenidos!

-Si elegimos la opción "H3":

¡Bienvenidos!

-Vemos que nos da el título de formato en mayúsculas.

-Si elegimos la opción "H4":

¡Bienvenidos!

Nos convierte en negritas la fuente, para resaltar un título sobre el resto del texto.

-Más que nada esta función de formato a los títulos sirve para jerarquizar los títulos y subtítulos de un texto o de nuestro post.



-Ahora veamos el siguiente ícono: , se llama Tamaño de fuente. Precisamente va cambiar el tamaño de nuestra fuente o texto.

-Si le damos clic, nos mostrará los diferentes tamaños:

• 10
• 13
• 16
• 18
• 24

-Si elegimos cualquiera, veremos el código en nuestro espacio de mensaje:

Código:

[size=16][/size]

-Ahí vemos la indicacíon: "size", que se traduce del inglés como "tamaño" y el número "16". Significa que nuestra fuente tendrá ese tamaño:

Código:

[size=16]La pluma y la ficción[/size]

-Vemos que para que surta efecto, debe, por ley, todo elemento estar dentro de las etiquetas con corchetes, de lo contrario, no obtendremos la vista que deseamos.

-Ahora en función:

La Pluma y la Ficción.

-Un truquillo que te voy a mostrar. El foro nos ofrece esas medidas, pero en ocasiones, necesitamos otras. Entonces, por ejemplo, si quieres una fuente de mayor tamaño a 24, haz lo siguiente:

Código:

[size=24][/size]

-Donde dice "24", escribe un número mayor a este, por ejemplo: 28;

Código:

[size=28][/size]

-Ahora escribe tu texto con este nuevo formato, así:

Código:

[size=28]La Pluma y la Ficción.[/size]

-En función:

La Pluma y la Ficción

-Ahora, si no queremos una fuente tan grande, por ejemplo una de tamaño 14, hacemos lo mismo:

Código:

[size=13][/size]

-Modificamos el número en nuestro código:

Código:

[size=14][/size]

-Y listo:

La Pluma y la Ficción

-Quieres un tamaño menor a 10, haces lo mismo:

Código:

[size=10][/size]

-Quitamos el 10 y lo modificamos por un número menor:

Código:

[size=8][/size]

-En función:

La Pluma y la Ficción



-Pasemos al último ícono: , Color, su nombre es realmente claro, nos dará una gama de colores muy variada para elegir a nuestro gusto.

-Si damos clic, veremos los siguientes colores:



-Si colocamos el cursor sobre cada uno, nos mostrá el código con este signo "#" antes de cada código. Se llama a este signo "#", almohadilla.

-Bien, si elegimos un color, este es el código que nos da:

Código:

[color=#006633][/color]

-Para que nuestro texto tenga el color que deseamos, debemos siempre y por ley, escribir dentro de las etiquetas con corchetes. En este caso la etiqueta "color" es la que dará este efecto.

-Si escribimos el texto dentro de ese código nuestro texto;

Código:

[color=#006633]La Pluma y la Ficción[/color]

-Lucirá así cuando lo publiques:

La Pluma y la Ficción

-Ahora si quieres darle un color a cada letra, veamos cómo:

Código:

[color=#3399cc]L[/color][color=#99cc00]a[/color] [color=#cc99cc]P[/color][color=#3399cc]l[/color][color=#cc9900]u[/color][color=#cc6600]m[/color][color=#ff6600]a[/color] [color=#ff99ff]y[/color] [color=#cc33cc]l[/color][color=#ff3333]a[/color] [color=#6666cc]F[/color][color=#996633]i[/color][color=#ff0099]c[/color][color=#9999ff]c[/color][color=#99cc33]i[/color][color=#cc3300]ó[/color][color=#660000]n[/color]

-¿Qué hicimos?, bien, si ves, cada letra está dentro de una etiqueta "color", sólo están separadas por elementos, ya que si pegas todo, así se va a ver y no con espacios. ¿Qué separamos? Los artículos y sustantivos, es decir, lo que escribes:

La Pluma y la Ficción

Es decir, van pegados:

• La, se separa de:
• Pluma, se separa de:
• y, se separa de:
• la, se separa de:
• Ficción.

-En función:

La Pluma y la Ficción.





Fin del tutorial.

Cómo elegir la fuente y ver más botones

Saludos!! Bienvenidos a otro nuevo tutorial. Está vez, veremos cómo elegir una fuente y ver los botones escondidos.

-Primero, localicemos en nuestra barra de edición, el siguiente bloque de íconos:



-Vamos a ver el primer ícono: , llamado Fuente. Precisamente es para cambiar de fuente en tu mensaje o tema.

El foro tiene la fuente "Tahoma", pero si quieres utilizar otra, da clic al ícono "Fuente". Se desplegará una lista con las fuentes instaladas en el foro:

• Arial
• Arial Black
• Comic Sans MS
• Courier New
• Georgia
• Impact
• Sans-serif
• Serif
• Times New Roman
• Trebuchet MS
• Verdana

-Bien, para elegir una, por ejemplo: Courier New, damos clic al ícono "Fuente", seleccionados la fuente con el nombre: Courier New, veremos el siguiente código:

Código:

[font=Courier New][/font]

-El código "font" es el que nos va permitir cambiar de fuente a nuestro mensaje. Ojo, recuerda que cualquier elemento para modificar debe estar dentro de las etiquetas con corchetes para que surja el efecto deseado.

-Bien, ahora escribimos dentro de ese código nuestro mensaje para que veamos la nueva fuente:

Código:

[font=Courier New]Foro La Pluma y la Ficción[/font]

-En función:

Foro La Pluma y la Ficción

-Cualquier texto puede ser modificado en cualquier fuente, siempre y cuando esté dentro del código:

Código:

[font=Arial]Foro La Pluma y la Ficción[/font]

Foro La Pluma y la Ficción ----->En fuente Arial

Código:

[font=Comic Sans MS]Foro La Pluma y la Ficción[/font]

Foro La Pluma y la Ficción ------>En fuente Comic Sans MS

Código:

[font=Impact]Foro La Pluma y la Ficción[/font]

Foro La Pluma y la Ficción ------->En fuente Impact


El siguiente ícono: , llamado Suprimir el formateo del texto, es para anular todo formato que pusiste a tu mensaje: como letra en itálica, color, centrado, fuente, etc.

Es raro que se ilumine o llegues a ocuparlo.


El siguiente ícono: , llamado Más/Menos botones, tiene la función de ocultar y descubrir algunos botones:

-Si no lo presionamos, nuestra barra de edición luce así:



-Pero si damos clic, muestra los botones o íconos ocultos:



-Vemos más íconos (algunos de ellos, los trataré más adelante), veamos el primero de ellos: , llamado Índice, es para colocar nuestro texto en formaro índice.

-Damos clic, y vemos el siguiente código:

Código:

[sub][/sub]

-Sub, es el código que nos va permitir ver nuestro texto en ese formato. Algo parecido, o que recuerda a la función de los procesadores de texto: subíndice y superíndice.

-Escribimos en medio de ese código:

Código:

[sub]Foro La Pluma y la Ficción[/sub]

-Ahora en función:

_{Foro La Pluma y la Ficción}

-En un texto:

La pluma y La Ficción es un foro que nació con la intención de conocer y compartir fanfics, _{de todo tipo de fandoms}, ya que la escritura es un arte que nos une. Pero no sólo la escritura, sino también el anime, la música, los videojuegos, el cine y más. En este foro encontrarás espacios para compartir lo que te gusta, divertirte y aprender que de la pluma y la ficción, se crean grandes historias.

Vemos que el texto se hace pequeño, pero en una posición inferior.

-Ahora, el otro ícono: , llamado Exponente. Lo veremos en función con el mismo texto:

Código:

La pluma y La Ficción es un foro que nació con la intención de conocer y compartir fanfics, [sup]de todo tipo de fandoms[/sup], ya que la escritura es un arte que nos une. Pero no sólo la escritura, sino también el anime, la música, los videojuegos, el cine y más. En este foro encontrarás espacios para compartir lo que te gusta, divertirte y aprender que de la pluma y la ficción, se crean grandes historias.

-Vemos ahora que el código es: sup, y no sub.

-En función:

La pluma y La Ficción es un foro que nació con la intención de conocer y compartir fanfics, ^{de todo tipo de fandoms}, ya que la escritura es un arte que nos une. Pero no sólo la escritura, sino también el anime, la música, los videojuegos, el cine y más. En este foro encontrarás espacios para compartir lo que te gusta, divertirte y aprender que de la pluma y la ficción, se crean grandes historias.

-Más que nada es para usarlos como referencias que desees anotar al final de tu mensaje, cómo las notas al pie de página.






Fin del tutorial.

Saludos gente!! Ahora vamos a ver la función scroll (que les va gustar mucho) y la función rand.

-Bien, primero, en nuestra barra de edición de mensaje, localicemos el siguiente bloque de íconos (recuerden presionar este botón para descubrir los botones ocultos):



-Vamos a ver el primer ícono, que se llama "Desplazamiento horizontal": .

-Si le damos clic veremos el siguiente código:

Código:

[scroll][/scroll]

"Scroll", es el código que nos va permitir desplazar nuestro texto o imagen de forma horizontal:

Código:

[scroll]Una vez que me besas, me es imposible detenerme o eludir ese cosmos que tú creas.[/scroll]

-Ahí vemos nuestro texto en medio del código "scroll" (no olvides que para que surta efecto siempre debe ir el elemento a modificar en medio de los códigos con corchetes).

-Vamos a verlo en función:

Una vez que me besas, me es imposible detenerme o eludir ese cosmos que tú creas.

-Ahora, probemos con una imagen:

Código:

[scroll][img]http://i19.servimg.com/u/f19/19/10/16/49/unapru12.png[/img][/scroll]

-Así luce cuando lo vemos en nuestro espacio de mensaje. En función:



-Vamos a probar el Dezplazamiento vertical: . Demos clic y aparecerá el siguiente código:

Código:

[updown][/updown]

-"Updown", que nos desplazará nuestro texto o imagen de arriba-abajo:

Código:

[updown]Son las seis, te dijo que a las siete. ¿Por qué llegas antes? ¿Por qué tan presto? Sí, de verdad quieres solucionar las cosas. Estás enamorado…Pero también lo odio. Está será su última oportunidad. Si me convence, continuamos, de lo contario, lo termino.[/updown]

-Nuestro texto está entre el código "updown", vamos a verlo en función:

Son las seis, te dijo que a las siete. ¿Por qué llegas antes? ¿Por qué tan presto? Sí, de verdad quieres solucionar las cosas. Estás enamorado…Pero también lo odio. Está será su última oportunidad. Si me convence, continuamos, de lo contario, lo termino.

-¿Y una imagen? También se puede:

Código:

[updown][img]http://i19.servimg.com/u/f19/19/10/16/49/estadi10.jpg[/img][/updown]

-La URL de nuestra imagen esta en medio del código entre corchetes, "updown", en función:




-Ahora, vamos con el último ícono: , se llama "Aleatorio", nos permitirá elegir al azar un número.

-Damos clic a este ícono y veremos el siguiente código:

Código:

[rand][/rand]

-"Rand", es a lo random. Para que funcione, hagamos lo siguiente:

Código:

[rand]1,10[/rand]

-Vemos ahí unos números: "1,10", quiere decir que nos van a dar un número aleatorio que sólo se encuentra del 1 al 10. Y puedes poner el rango que quieras:

• 1 al 100
• 20 al 50
• 1 al 30, etc.

-Ojo, cada vez que edites tu mensaje que contenga este código, te va a dar un nuevo número. Para detener el efecto random, debes poner un "*" asterístico en el primer corchete de rand, así:

Código:

[rand*][/rand]

-Veamos en función el código "rand":

Número aleatorio (1,20) : 10

Fin de tutorial.

¡Saludos y bienvenidos a otro tutorial! Esta vez les daré una lista rápida de etiquetas html que les vendrán bien, sin usar algunas herramientas del editor de mensaje, es decir, esta barra:



Muy bien, empecemos:



->Para poner una imagen:

Código:

[code]<img src="AQUí URL DE IMAGEN"></img>[/code]

Donde dice URL de la image, ahí pegan la dirección web de su imagen, que la pueden obtener con el clic derecho de su mouse.



->Para alinear al centro:

Código:

<center>AQUí LO QUE VAS A CENTRAR</center>

BIENVENIDOS


->Para poner un enlace:

Código:

<a href="AQUÍ LA URL DEL ENLACE">OPCIONAL SI QUIERES DARLE NOMBRE AL ENLACE o URL</a>

Es decir, url sin nombre:

https://foroplumayficcion.foroactivo.mx/forum?akata

Con nombre en enlace:

Código:

<a href="http://foroplumayficcion.foroactivo.mx/forum?akata">Foro La Pluma y la Ficción</a>

Foro La Pluma y la Ficción

URL con imagen:

Código:

<a href="URL DE TU ENLACE"><img src="URL DE TU IMAGEN"></a>

Así se ve en el código:

Código:

<a href="http://foroplumayficcion.foroactivo.mx/forum?akata"><img src="http://i18.servimg.com/u/f18/18/85/47/33/loscla10.jpg"></a>

En función:



Darle un título al enlace cuando pasa el cursor encima de él:

Sin imagen:

Código:

<a href="http://foroplumayficcion.foroactivo.mx/forum?akata" title="NOMBRE DE TU ENLACE">URL</a>

En función:

https://foroplumayficcion.foroactivo.mx/forum?akata

Darle título al enlace cuando pasa el cursor encima de él y con imagen:

Código:

<a href="http://foroplumayficcion.foroactivo.mx/forum?akata" title="AQUí NOMBRE DEL ENLACE"><img src="http://i18.servimg.com/u/f18/18/85/47/33/loscla10.jpg"></a>

En función:




->Enlistar con viñeta:

Código:

<UL><LI>CONTENIDO</UL>

Cada contenido o elemento que vas a enlistar debes hacerlo anteponiendo SIEMPRE "LI" y entre los símbolos "< >", de lo contrario, no funcionará. Tampoco olvides cerrar tu lista con: "/UL" igual: entre símbolos "< >", sino, te causará problemas al momento de publicar.

Se ve así en el código:

Código:

<UL><LI>Enero<LI>Febrero<LI>Marzo<LI>Abril<LI>Mayo</UL>

En función:

• Enero
• Febrero
• Marzo
• Abril
• Mayo

->Poner letras en negrita:

Código:

<strong>AQUÍ LO QUE VA EN NEGRITAS</strong>

AQUÍ LO QUE VA EN NEGRITAS

->Poner letra itálica:

Código:

<em>AQUÍ TU TEXTO</em>

En función:

Foro La Pluma y la Ficción

->Poner un tachado:

Código:

<strike>AQUÍ TU TEXTO</strike>

En función:

La Pluma y la ficción

->Para subrayar:

Código:

<u>AQUÍ TU TEXTO</u>

En función:

La Pluma y la Ficción


->Hacer una tabla

Vamos a definir aquí unos elementos:

• "table": Es el cuerpo de la tabla
• "tr": es una fila
• "td": es una columna.

Código:

<table><tr><td></td></tr></table>

En ese código apenas tenemos una columna y una fila, para tener dos filas y más columnas, hagan lo siguiente:

Código:

<table><tr><td>COLUMNA 1</td><td>COLUMNA 2</td><td>COLUMNA 3</td></tr><tr><td>COLUMNA 4</td><td>COLUMNA 5</td><td>COLUMNA 6</td></tr></table>

Las etiqueta "tr" como pueden ver, puede contener varias etiquetas "td", que son las columnas, ahora en función:

COLUMNA 1	COLUMNA 2	COLUMNA 3
COLUMNA 4	COLUMNA 5	COLUMNA 6

Darle un fondo de color a la tabla:

Código:

<table bgcolor= "#número del color"><tr><td></td></tr></table>

*El número del color lo consiguente dando clic al ícono de color en la barra de edición, y seleccionado el color de su preferencia, quitan todo lo demás y solo copian el número del color. SIEMPRE DEBE IR EL SIMBOLO "#" ANTES DEL NÚMERO DE COLOR. O bien, lo pueden buscar en la web, pongan "Colores Html", y les saldrán páginas que les ayudarán a obtener el número del color.

En función:

Columna 1

Columna 2

Clumna 3

Darle fondo y borde a una tabla:

Código:

<table bgcolor= "#número del color" border="3"><tr><td></td></tr></table>

*En "border", es donde va el número de grosor que quieres para tu tabla; si escribes 0, obviamente no te mostrará ningún borde, a partir del número 1 sí.

En función:

COLUMNA     1

Columna     2

Columna     3

->Para salto de renglón o línea:

Código:

<br>

Por ejemplo:

La Pluma y la Ficción

Sí realizamos el salto de línea:

Código:

La Pluma y<br>la Ficción

Ese código "br", lo colocamos dónde queremos hacer el salto de línea, ahora en función:

La Pluma y
La ficción







Fin del tutorial.

Utilizar etiquetas html y BBcode parte II


¡Saludos! Bienvenidos a este tutorial. Aquí les voy a enseñar cómo disminuir el tamaño de una imagen, cómo manipular un texto y cómo usar viñetas con números

• Disminuir el tamaño de una imagen

¿Cuántas veces hemos querido cambiar el tamaño a una imagen sin tener que recurrir a un programa de edición? Pues bueno, vamos a ver cómo editar el tamaño de una imagen aquí mismo:

Tenemos nuestra imagen:


Esta imagen mide 250 píxeles de ancho por 250 píxeles de largo, es un cuadrado. Vamos a hacerla de 190 x 190, así:

Código:

<img src="AQUÍ URL DE LA IMAGEN" style="width: 190px; height: 190px;">

• "Width", es ancho en inglés
• "Height", es largo en inglés.

Como ven, ese código nos permite cambiar el tamaño de una imagen sin tener que editarla en nuestra PC. El código deben escribirlo  tal y cómo está.

Veamos ya en función:



Pero, ¿qué pasa cuándo la imagen no tiene una medida regular? Es decir, de un lado es más ancha o larga.


La imagen mide: 600 píxeles de ancho y 997 píxeles de largo. Vamos a disminuirla de tamaño:

Código:

<img src="http://i21.servimg.com/u/f21/18/85/47/33/soul_f10.jpg" style="width: 400px; height: 650px;">

Ya tenemos el código con las medidas modificadas. No es necesario estar investigando el tamaño de la imagen, pero si debes estimar una medida aproximada para que no te quede tan mal. En ese caso, puedes utilizar la función: "Previsualizar", para ir viendo cómo te va quedando la imagen antes de publicarla.

Vamos a ver la imagen modificada:




Es muy importante cerrar las comillas y mantener dentro de ellas los elementos a modificar o los correspondientes, De lo contrario, tus modificaciones no resultarán efecto.


En código bb

Código:

[img]AQUÍ LA URL DE LA IMAGEN[/img]

En la primera etiqueta "img", vamos a meter la medida modificada:

Código:

[img(160px,160px)]http://i68.servimg.com/u/f68/18/85/47/33/ima-co10.jpg[/img]

En función:



Vemos que sólo agregamos la medida, los píxeles y se separan por comas: el ancho es el que va primero, luego una coma y le sigue el largo.

• Modificar un texto:

->Vamos a aprender cómo modificar el color, el tamaño, alineación, grosor, tachado y sombra.


Cambiar color

Código:

<span style="color: #0E2F71;">AQUÍ TU TEXTO</span>

Como podemos ver, antes del código del color, va el signo gato o almohadilla: "#". También las comillas deben cerrarse y mantener dentro de ellas los elementos a modificar. La etiqueta "span" debe siempre también estar cerrada, de lo contrario estropearás tu texto.

Vamos a verlo en funcionamiento:

La Pluma y la ficción


Cambiar el grosor o hacer letra en negritas:

Código:

<span style="font-weight: bold;">AQUÍ TU TEXTO</span>

"Weight", en inglés es peso, lo que significa el grosor de nuestra fuente. Podemos ponerle un cierto porcentaje o dejarle en todo el grosor.

Código:

<span style="font-weight: 200;">AQUÍ TU TEXTO</span>

Foro La Pluma y la Ficción

La cantidad va desde los 100 hasta los 900. Si quieres poner todo el grosor, escribe: "bold":

Código:

<span style="font-weight: bold";>AQUÍ TU TEXTO</span>

Vamos a ver en función:

La Pluma y la Ficción


Cambiar el tamaño

Vamos a hacer pequeño o muy grande nuestro texto, aquí el código:

Código:

<span style="font-size: 27px;">AQUÍ TU TEXTO</span>

• La indicación: "font-size", es la que marca de qué tamaño va ir nuestro texto.
• Literalmente se traduce "tamaño de fuente".

En función:

La Pluma y la Ficción

Vamos a hacer más pequeño nuestro texto:

Código:

<span style="font-size=10px;">AQUÍ TU TEXTO</span>

Le estamos indicando que ahora mida 10 píxeles de altura, en función

La Pluma y la Ficción


Darle sombra al texto

La sombra se la podemos dar de los colores que queramos

Código:

<span style="text-shadow: 0px 1px 0px #286C99;">AQUÍ TU TEXTO</span>

• "text-shadow", es precisamente la indicación "sombra de texto" para darle ese efecto a nuestra fuente.
• Los píxeles, que se dividen en tres dimensiones: "0px 0px 0px", nos dejarán manipular el grosor y relieve de nuestra sombra. Puedes hacer las mezclas que quieras.

Vamos a ver unos ejemplos:

->Sombra suave:

Código:

<span style="text-shadow: 1px 0px 1px #286C99;">La Pluma y la Ficción</span>

La Pluma y la Ficción

->Relieve:

Código:

<span style="text-shadow: 0px 2px 0px #286C99;">La Pluma y la Ficción</span>

La Pluma y la Ficción

->Relieve 2

Código:

<span style="text-shadow: 2px 2px 0px #286C99;">La Pluma y la Ficción</span>

La Pluma y la Ficción

->Más sombra

Código:

<span style="text-shadow: 2px 2px 3px #286C99;">La Pluma y la Ficción</span>

La Pluma y la Ficción

Letras capitalizadas

Código:

<span style="font-variant: small-caps;">AQUÍ TU TEXTO</span>

• La indicación: "font-variant", o "variante de fuente",  nos dará el efecto, junto a la orden: "small-caps", que es la capitalización de la fuente.

En función:

La Pluma y la Ficción

Darle sombra, alineación, tamaño de fuente y color al texto

Vamos a ver todas las indicaciones en una sola:

Código:

[center]<span style="font-size: 20px;  color: #D23845; font-weight: bold; text-shadow: 0px 1px 0px #000000; font-variant: small-caps;">AQUÍ TU TEXTO</span>[/center]

• Para alinear ya sea izquierda, derecha o centro, deberán ir esas indicaciones fuera de la etiqueta "span", cómo se ve en el ejemplo.
• Como pueden ver, hemos ocupado todas esas indicaciones que nos harán más guay nuestro texto.

Vamos a ver en función:


A la izquierda:

Código:

[left]<span style="font-size: 20px; align: center; color: #D23845; font-weight: bold; text-shadow: 0px 1px 0px #000000; font-variant: small-caps;">La Pluma y la Ficción</span>[/left]

A la derecha

Código:

[right]<span style="font-size: 20px; align: center; color: #D23845; font-weight: bold; text-shadow: 0px 1px 0px #000000; font-variant: small-caps;">La Pluma y la Ficción</span>[/right]

• Lista ordenada con números

Es muy sencillo, vamos a ocupar el siguiente código:

Código:

<OL><LI></OL>

->La indicación: "

", será cada número, siempre en mayúsculas
->Debe ir siempre en medio de "

" y "

, cómo se ve a continuación:

Código:

<OL><LI>Subforo<LI>Título<LI>Perfil<LI>Actividad<LI>Letras<LI>Acento</OL>

En función:

1. Subforo
2. Título
3. Perfil
4. Actividad
5. Letras
6. Acento

Fin del tutorial

¡Hey, qué tal! Bienvenidos a otro tutorial. Esta vez más pequeño y sencillo. ¿Habrás tutoriales? Sí, ya les estaré enseñando a utilizar más etiquetas html y algo de css. Bueno, Foroactivo se va actualizando, y esta vez les traigo cómo utilizar la función 'Menciones' que ha abierto Foroactivo. No es tan nuevo, pero sí que causa impresión.

Paso número uno:

Necesitamos obviamente el nombre de algún usuario.  No importa si no está en tu lista de amigos. Bien, yo voy a elegir el de KenshinCroft.

Paso número dos:

Aquí viene lo bueno: el código es el siguiente:

Código:

@"Nombre del usuario"

Código:

@Nombredeusuario

Ojo: las comillas van cuando el nombre del usuario lleva un espacio, así= "Grell Sutcliff", "Alba Meira"

Es todo, siguiendo este patrón, podrás hacer las menciones que quieras. Si no te sabes sacar el "@", te dejo la siguiente combinación en tu teclado, yo me lo sé así:

Control (o Ctrl) + Atl + 2

si se lo saben de otro modo, adelante.

Paso número tres:

Empleemos el código, así:

Código:

@KenshinCroft

@KenshinCroft

Con un nombre de usuario que tiene espacios:

Código:

@"Alba Meira"

@Alba Meira


FIN DEL TUTORIAL


Lo he obtenido de la asistencia de Foroactivo, puedes verlo aquí:

http://asistencia.foroactivo.com/t144359-nueva-funcionalidad-menciones-y-hashtag-en-foroactivo

¡Hey, qué tal! Hoy les voy a dejar unas etiquetas html para luego enseñarles cómo usarlas y formas códigos más complejos. Algo como esto y más cosillas que sé. ¡Ah! Pero antes aclaro, yo no estudié nada de esto, que me haya metido a una escuela a tomar un curso sobre esto, no. Fue por estar de curiosa, buscando y leyendo hasta que pude entender parte del mundo html, que es muy extenso y de verdad que necesita un estudio en forma. Se puede decir que soy una aficionada, así que no esperen los súper códigos y más, porque no sé cómo van ya en más avanzado o más complicado. Sin embargo, me sé unas cuantas cosas y es lo que voy a enseñarles.

Bueno, empecemos:

1. Div: esta etiquera "div" es el contenedor de todo nuestro código html. Nos permitira almacenar cuántas etiquetas html deseemos. Siempre y cuando lo hagamos dentro del div. Puede haber muchos div y cada uno, con sus etiquetas correspondientes, que construirán un código. Por ejemplo, el de arriba:
   
   

   Código:

   <div style="width: 500px; height: 100px; background-color: #DADADA; border: 20px solid #3C1F39;">
</div>

   
   Ese div, tiene otras etiquetas que le dan la orden de cómo conformar el código que yo he hecho. Si un div no tiene nada dentro, es decir, entre estas comillas:
   
   

   Código:

   <div style="AQUÍ"></div>

   
   no aparecerá absolutamenta nada cuando lo publiquemos o lo estemos ocupando.  Bien, otros div que se los mencionaré más adelante, ahora sería muy complicado y enredoso.
   
   Todo debe ir entre las balizas div:
   
   

   Código:

   <div style="AQUÍ"></div>

   
   Si no cierras con esta baliza "/div", tu código no surtirá efecto y además, tendrás muchos problemas, porque todos los otros código que tengas, también se verán afectados. Por eso es muy importante remarcar: todo lo que quieras poner cómo código va dentro de sus respectivas balizas.
   
   
2. Width: Significa en inglés "ancho" o "grosor". Esto determinará que tan ancho vamos a querer nuestra tablilla, cuadro o imagen que pongamos mediante html.  El ancho se pone en píxeles, es nuestra unidad de medida en html. Por ejemplo:
   
   

   Código:

   <div style="width: 200px; height: 30px; background-color: #902121;"></div>

   
   
   En el código puedes ver que puse cómo medida en width: 200px, se abrevia píxeles así "px". Cómo se menciona en el tutorial de más arriba, se puede redimensionar así también una imagen (ver aquí), pero más adelante te enseñaré cómo ocuparlo ya dentro de una baliza div. Le pongo background y height para que se pueda visualizar el ejemplo, ya que si se deja solamente "width", no verás nada.
   
   Es muy importante que entre cada etiqueta pongas un punto y coma: ; y las comillas siempre van después de la etiqueta, así:
   
   

   width: 100px;

   
   Ahora veamos el ejemplo andar:
   
   
   
   
   
   Este mide 200 píxeles, ahora vamos a hacer uno de 500:
   
   
   

   Código:

   <div style="width: 500px; height: 30px;background-color: #902121;"></div>

   
   
   
   
   
3. Height: Significa "alto" o "altura" en inglés. Si hay un ancho debe haber un alto. Con esta etiqueta podremos determinar mejor la medida de lo que vamos a necesitar. Por ejemplo:
   
   

   Código:

   <div style="width: 400px; height: 200px; background-color: #000000;"></div>

   
   
   
   
   Así se ve ya en función.
   
   Si quieres hacer cuadrado, debe poner el width y el height de la misma medida. Luego te enseñaré cómo hacer un círculo.
   
   
4. Background-color y Background-image: Ambas etiquetas se refieren al fondo ya sea de color o para poner una imagen. Por ejemplo, para el color:
   
   

   Código:

   <div style="width: 400px; height: 200px; background-color: #000000;"></div>

   
   Vamos a necesitar usar colores en código html (que en lo personal me gusta más este modo, es más fácil de manejar y te aprendes los código más rápido, en mi opinión) o RGB. Para el html debes ocupar el gatillo, este símbolo antes del código: "#"; así: "#000000". Para ocuparlo en RGB, debes poner las iniciales "rgb" y entre parentesís los códigos del color, cada conjunto de números va separado con una coma. Veamos un ejemplo:
   
   En html:
   
   

   Código:

   <div style="width: 400px; height: 200px; background-color: #000000;"></div>

   
   
   
   
   En rgb:
   
   

   Código:

   <div style="width: 400px; height: 200px; background-color: rgb(105,54,54);"></div>

   
   
   
   
   
   ¿Dónde consigues esos códigos? Puedes buscarlos en internet simplemente cómo "colores html". Yo te recomiendo esta página, ya que te da ambos códigos en rgb y html:
   
   http://html-color-codes.info/codigos-de-colores-hexadecimales/
   
   Ahora veamos el background-image: vamos a poner una imagen como fondo de una tablilla que haré. Para que funcione, debes siempre poner la url directa de la imagen, esa que termina en .gif, .png o .jpg . ¡Ah, pero antes! El código "background-image", debe ir seguido de dos puntos, luego las letras "url" y finalmente un parentesís, donde pegarás la url de la imagen, así:
   
   

   "background-image: url(AQUÍ URL DE TU IMAGEN);"

   
   Veamos un ejemplo:
   
   

   Código:

   <div style="width: 450px; height: 200px; background-image: url(https://i58.servimg.com/u/f58/19/10/16/49/grell210.gif);"></div>

   
   Bien, vamos a verlo en funcionamiento:
   
   
   
   
   Con este modo, proteges un poco las imágenes, ya que si dan clic izquierdo, no verán la url directa.Otra ventaja, es que puedes manipular el tamaño de la imagen sin distorsionarla, pero, veremos cómo se va recortando:
   
   
   

   Código:

   <div style="width: 250px; height: 120px; background-image: url(https://i58.servimg.com/u/f58/19/10/16/49/grell210.gif);"></div>

   
   
   
   
   ¿Ves? No luce completa. No pierde calidad de imagen, pero parece recortada.
   
   Bueno, vamos a ocupar esta imagen dentro de una tablilla:
   
   
   

   Código:

   <div style="width: 495px; height: 250px; border: 20px solid #3C1F39;background-image: url(https://i58.servimg.com/u/f58/19/10/16/49/grell210.gif);">
</div>


   
   
   
   
   
   
   Puedes escribir encima de la imagen, o hacer que aparezcan las letras con pasar el cursor, pero, eso lo veremos más adelante. Puedes ocupar imágenes estáticas:
   
   

   Código:

   <div style="width: 370px; height: 550px;  border: 20px solid #3C1F39;background-image: url(https://i58.servimg.com/u/f58/19/10/16/49/ren10.jpg);">
</div>

   
   
   
   
   
   
   
5. Border: Es evidente, hablamos del borde, es para decorar nuestro código y que resalte. Hay varios tipos de borde y colores, por supuesto. Y, puedes elegir qué parte bordear o ponerle un borde, ya sea a los lados, arriba o abajo, o enmarcar todo el objeto.  La medida o mejor dicho, grosor de nuestro marco, utilizamos la misma unidad de medida: píxeles.
   Para hacer nuestro borde tenemos lo siguiente:
   
   

   Código:

   "border: 10px solid #000000;"

   
   Veamos parte por parte:  los 10px es el grosor, mientras más pixeles pongamos, más grueso se verá nuestro marco; "solid", es una propiedad de nuestro borde, es el estilo, lo explicaré enseguida; y finalmente tenemos el código html del color.  Debe ir en ese orden ¡eh! : primero medida en píxeles, luego el estilo del borde y finalmente el código html del color.
   
   Los estilos de borde que me sé (son muy básicos además) son:
   
   
   • Solid: es el más sencillo, es este:
     
     
   • Dotted: son pequeñas líneas separadas, dan el aspecto como si estuviera cosido o fuera de costura:  
     
     Hay un pequeño truco en este borde, si le das menos grosor, esas pequeñas líneas lucen más estéticas (para mí gusto):
     
   • Dashed: este es de puntitos, se ve también genial con menos grosor:
     
     
     
     y con menos grosor, de un pixel:
     
     
     
     
   • Groove: este le da más volumen, como si tuviera relieve:
     
     
     
     
     
   • Double: precisamente luce cómo si tuviera dos bordes:
     
     
     
     
     Para que se luzca, debes darle un grosor mínimo de 3 píxeles, de lo contrario, se vera plano, como el primer estilo "solid".
     
   
   
   Ahora, vamos a ocupar cada estilo en un cuadro hecho en html:
   
   Con double:
   
   

   Código:

   <div style="width: 100px; height: 100px; border: 5px double #E30C42; background-color: #000000;"></div>

   
   
   
   
   Con solid:
   
   

   Código:

   <div style="width: 100px; height: 100px; border: 5px solid #E30C42; background-color: #000000;"></div>

   
   
   
   
   Con groove:
   
   

   Código:

   <div style="width: 100px; height: 100px; border: 5px groove #E30C42; background-color: #000000;"></div>

   
   
   
   
   Con dotted:
   
   

   Código:

   <div style="width: 100px; height: 100px; border: 5px dotted #E30C42; background-color: #000000;"></div>

   
   
   
   
   Con dashed:
   
   

   Código:

   <div style="width: 100px; height: 100px; border: 5px dashed #E30C42; background-color: #000000;"></div>

   
   
   
   
   Estos mismos borders, los puedes ocupar con una imagen:
   
   
   
   
   ¿Qué pasa si sólo quiero poner el borde izquierdo? Bueno, ahora lo veremos:
   
   
   • Border-left: borde izquierdo
   • Border-right: borde derecho
   • Border-top: Borde superior
   • Border-bottom: borde inferior
   • Border: es enmarcar todo
   
   
   En código, vamos a ver cómo ocupar cada uno:
   
   

   Código:

   <div style="width: 450px; height: 200px; border-left: 5px double #E30C42; background-image: url(https://i58.servimg.com/u/f58/19/10/16/49/seta_s10.jpg);"></div>

   
   
   En lugar de poner solo "border", le agregas "left" con un guión y listo, ahora se verá así:
   
   
   
   
   Con el borde derecho:
   
   

   Código:

   <div style="width: 450px; height: 200px; border-right: 5px solid #E30C42; background-image: url(https://i58.servimg.com/u/f58/19/10/16/49/seta_s10.jpg);"></div>

   
   
   
   
   Con el borde superior:
   
   

   Código:

   <div style="width: 450px; height: 200px; border-top: 5px solid #E30C42; background-image: url(https://i58.servimg.com/u/f58/19/10/16/49/seta_s10.jpg);"></div>

   
   
   
   
   Con el borde inferior:
   
   

   Código:

   <div style="width: 450px; height: 200px; border-bottom: 5px dashed #E30C42; background-image: url(https://i58.servimg.com/u/f58/19/10/16/49/seta_s10.jpg);"></div>

   
   
   
   
   ¿Y puedo sólo enmarcar arriba y abajo? Sí, debes agregar border-top y border-bottom, así; incluso puedes modificar el estilo, color  y grosor del otro borde:
   
   

   Código:

   <div style="width: 450px; height: 600px; border-bottom: 5px dashed #B6A20E; border-top: 10px groove #E30C42; background-image: url(https://i58.servimg.com/u/f58/19/10/16/49/8c4f5810.jpg);"></div>

   
   
   
   
   Lo mismo si es para los lados:
   
   

   Código:

   <div style="width: 450px; height: 600px; border-left: 5px dashed #B6A20E; border-right: 10px groove #E30C42; background-image: url(https://i58.servimg.com/u/f58/19/10/16/49/8c4f5810.jpg);"></div>

   
   
   
   
   Puedes manipular los bordes cómo tú quieras, arriba-izquierda, derecha-arriba y más.
   
   

Bueno, hasta aquí esta parte, continuaremos con más etiquetas que van dentro de nuestro div para modificar todo lo que quieras tu propio código html. Espero que esto que te he dado, te sirva de mucho.


Fin del tutorial