Bienvenidos


¡Bienvenidos, usuarios! Aquí nos encanta leer y compartir fanfics de todo tipo, sobre anime, videojuegos, de creación propia, poesía, películas, series y más. Para los que gustan desafiarse o entrar en concursos, aquí los hay, cada mes tenemos un concurso para que demuestres tu talento en escritura. ¿Te gusta el yuri, yaoi o lemmon? En nuestro foro hay espacio para estos hermosos géneros. Si te gustan los videojuegos, tenemos un lugar para hablar sobre ellos, así como de música, anime, películas, libros y off-topic. ¿Dudas al momento de escribir? Visita nuestro "Taller de escritura". ¿Quieres crear tu publicidad, fanclub o concurso? Claro que puedes, recorre cada subforo con libertad. ¡No te quedes con las ganas! Entra y diviértete.

Staff del foro

KENSHINCROFT
Web master
Contacto

NOIZZ CLEAR
Administrador general
Contacto


Enlaces importantes

Tutoriales del foro
Ficha de fanfics
Registra tus creaciones
Entrar a un grupo
Los Clásicos
Registro de Fanclubs

Temas más recientes
Últimos temas
» Escuela sin Arte - Academia de Superhéroes [Rol Priv. | Kiyori/Rainia/Violette]
Tutoriales del foro EmptySáb Ago 17, 2019 8:39 pm por Rainia Black

» Tráilers de películas
Tutoriales del foro EmptySáb Ago 17, 2019 7:43 pm por Rainia Black

» Diez palabras que empiecen con...
Tutoriales del foro EmptySáb Ago 17, 2019 7:40 pm por Rainia Black

» Di la siguiente palabra
Tutoriales del foro EmptySáb Ago 17, 2019 7:36 pm por Rainia Black

» Rimas para todos
Tutoriales del foro EmptySáb Ago 17, 2019 7:28 pm por Rainia Black

» Registro de cuentas y personajes
Tutoriales del foro EmptySáb Ago 17, 2019 11:13 am por Rainia Black

» [Afiliación Élite - Confirmación] Tirnaill, foro de Rol Medieval
Tutoriales del foro EmptySáb Ago 17, 2019 10:15 am por Invitado

» REGLAS GENERALES - Pasa a leer y a firmar
Tutoriales del foro EmptySáb Ago 17, 2019 9:58 am por Rainia Black

» ¡Hey, esto se acentúa!
Tutoriales del foro EmptySáb Ago 10, 2019 2:59 pm por Ushio Kazama

» ¿Cuál será la canción de la semana?
Tutoriales del foro EmptySáb Ago 10, 2019 1:48 pm por Ushio Kazama

» Feudal Paradise - Afiliación Élite -
Tutoriales del foro EmptySáb Ago 10, 2019 11:53 am por Noizz Clear


Avisos


►Nueva medida de avatares: 200 x 200 píxeles, no debe pesar más de 64kb

Los más activos
Mejores posteadores
KenshinCroft (3924)
Tutoriales del foro EmptyTutoriales del foro IyyJI6Tutoriales del foro IyyeYf 
Noizz Clear (1654)
Tutoriales del foro EmptyTutoriales del foro IyyJI6Tutoriales del foro IyyeYf 
Kisa Shouta (621)
Tutoriales del foro EmptyTutoriales del foro IyyJI6Tutoriales del foro IyyeYf 
Grell Sutcliff (594)
Tutoriales del foro EmptyTutoriales del foro IyyJI6Tutoriales del foro IyyeYf 
Takano Masamune (552)
Tutoriales del foro EmptyTutoriales del foro IyyJI6Tutoriales del foro IyyeYf 
KyoUchiha (503)
Tutoriales del foro EmptyTutoriales del foro IyyJI6Tutoriales del foro IyyeYf 
Honjo Kamatari (498)
Tutoriales del foro EmptyTutoriales del foro IyyJI6Tutoriales del foro IyyeYf 
Ritsu Onodera (401)
Tutoriales del foro EmptyTutoriales del foro IyyJI6Tutoriales del foro IyyeYf 
Chiaki Yoshino (380)
Tutoriales del foro EmptyTutoriales del foro IyyJI6Tutoriales del foro IyyeYf 
Hiroki Kamijou (349)
Tutoriales del foro EmptyTutoriales del foro IyyJI6Tutoriales del foro IyyeYf 


Usuario del Mes




???
2018


¡El festejado es...!


El chisme de hoy es:

¿Sabías qué... ?



Recomendación de los usuarios


America - You Can Do Magic, por Hiroki Kamijou

Recomendamos Mozilla Firefox para visualizar mejor el foro

→ Foros con gold

Crisom Village

Foro de rol Yaoi

Ir al foro

Feudal Inuyasha

Foro de rol medieval, basado en Inuyasha

Ir al foro

Crónicas de la Torre

Foro de rol basado en la trilogía Las Crónicas de la Torre

Ir al foro

Sailor Moon Crystal

Foro de rol basado Sailor Moon

Ir al foro

Superheroes World

Foro de rol basado en las películas de superhéroes de Marvel y DC

Ir al foro

Enjoy the Silence 4.0

Foro de RPG apocalíptico y zombie

Ir al foro

One Piece Legacy

Foro de rol basado en One Piece

Ir al foro

Jormungand Internado

Foro de rol Yaoi

Ir al foro

El Rincón de tus libros

Foro literario y de escritura

Ir al foro

Academia Lioncourt

Foro basado en Vampire Knight

Ir al foro

Twisted Fairytales

Foro basado los cuentos de hadas

Ir al foro

Idarion Terra

Foro de rol

Ir al foro

Tir n'aill

Foro de rol medieval y ficción

Ir al foro

Voracious Minds

Foro de rol yaoi, yuri, hetero y más +18

Ir al foro

Hayate School

Foro de rol yaoi

Ir al foro

Rol World

Foro de rol libre

Ir al foro

Loving Pets!

Foro de rol yaoi, yuri y hetero

Ir al foro

Pokémon Ysiel

Foro RPG basado en la franquicia Pokémon

Ir al foro

Instituto Sweet Amoris

Foro de rol basado en Corazón de Melón

Ir al foro

Music is war

Foro de rol realista

Ir al foro

Through the veil

Foro de rol basado en Harry Potter

Ir al foro


Tutoriales del foro

Ver el tema anterior Ver el tema siguiente Ir abajo

default Re: Tutoriales del foro

Mensaje por KenshinCroft el Dom Nov 30, 2014 4:16 pm

Cómo poner la fuente en negrita, cursiva, subrayada y rayada

Saludos gente!! Aquí nuestro primer tutorial.

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

Tutoriales del foro Tuto1

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

Tutoriales del foro Tuto2

-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.










"Contemplar toda la belleza que posees, transmuta mi voluntad en la enajenación de un chiquillo al descubrir la grandeza del océano." KenshinCroft
KenshinCroft
KenshinCroft
Fundador
Fundador
♥ Importancia : 225
⌛ Desde : 30/04/2014
☛ Me encuentro en : En el mundo de la Ficción
→ Me dedico a : Escritor

Volver arriba Ir abajo

default Re: Tutoriales del foro

Mensaje por KenshinCroft el Jue Mar 12, 2015 12:50 pm

Cómo alinear a la izquierda, derecha, centrar y justificar


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:

Tutoriales del foro Tuto1

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

Tutoriales del foro Tuto310

-El primer ícono es este: Tutoriales del foro Tuto410, 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:

Un día como
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í:

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.

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

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.

De igual forma, el siguiente ícono: Tutoriales del foro Tuto610, Alineado a la derecha:

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.

Y lo mismo con el último ícono: Tutoriales del foro Tuto710, Justificado:

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.

-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:

Tutoriales del foro Aver610

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

Tutoriales del foro Aver610

Para el centro

Tutoriales del foro Aver610

Para la derecha:

Tutoriales del foro Aver610

Justificado:

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

Tutoriales del foro Tuto810, 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:

Tutoriales del foro Slide210



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










"Contemplar toda la belleza que posees, transmuta mi voluntad en la enajenación de un chiquillo al descubrir la grandeza del océano." KenshinCroft
KenshinCroft
KenshinCroft
Fundador
Fundador
♥ Importancia : 225
⌛ Desde : 30/04/2014
☛ Me encuentro en : En el mundo de la Ficción
→ Me dedico a : Escritor

Volver arriba Ir abajo

default Re: Tutoriales del foro

Mensaje por KenshinCroft el Vie Mar 13, 2015 4:55 pm

Cómo usar las funciones: "citar", "code", "spoiler" y "hide"


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

-Bien, en nuestra barra de herramientas de mensaje:

Tutoriales del foro Tuto1

vamos a localizar estos íconos:

Tutoriales del foro Tuto910

-Ok. Si pasamos el cursor sobre el primero: Tutoriales del foro Tuto1010, 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: Tutoriales del foro Tuto1110, 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í:

Esto se puede lograr con un código HTML


-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:

Tutoriales del foro Slide4%20copy_zpsxbt0e7sk

-Ahora veamos el siguiente ícono: Tutoriales del foro Tuto1210, "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:
Tutoriales del foro Slide310

-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: Tutoriales del foro Tuto1310, "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.










"Contemplar toda la belleza que posees, transmuta mi voluntad en la enajenación de un chiquillo al descubrir la grandeza del océano." KenshinCroft
KenshinCroft
KenshinCroft
Fundador
Fundador
♥ Importancia : 225
⌛ Desde : 30/04/2014
☛ Me encuentro en : En el mundo de la Ficción
→ Me dedico a : Escritor

Volver arriba Ir abajo

default Re: Tutoriales del foro

Mensaje por KenshinCroft el Jue Mar 19, 2015 11:22 am

Cómo usar la función "Insertar una tabla"


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

Tutoriales del foro Tuto1

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

Tutoriales del foro Tuto1410, 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 1Columna 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:

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

Izquierda

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

Derecha
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

Justificado

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
-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.










"Contemplar toda la belleza que posees, transmuta mi voluntad en la enajenación de un chiquillo al descubrir la grandeza del océano." KenshinCroft
KenshinCroft
KenshinCroft
Fundador
Fundador
♥ Importancia : 225
⌛ Desde : 30/04/2014
☛ Me encuentro en : En el mundo de la Ficción
→ Me dedico a : Escritor

Volver arriba Ir abajo

default Re: Tutoriales del foro

Mensaje por KenshinCroft el Jue Mar 26, 2015 2:51 pm

Cómo insertar una lista y una línea


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

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

Tutoriales del foro Tuto1510

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

-Veamos el primero: Tutoriales del foro Tuto1610, "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. Tutoriales del foro Utemas12
  • B. Tutoriales del foro Esacti10
  • C. Tutoriales del foro Tutori10


-Ahora veamos el siguiente ícono: Tutoriales del foro Tuto1710, "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. Tutoriales del foro Nenca110
  2. Tutoriales del foro Nenca210
  3. Tutoriales del foro Nenca310


-Vamos por el siguiente ícono: Tutoriales del foro Tuto1810, "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.










"Contemplar toda la belleza que posees, transmuta mi voluntad en la enajenación de un chiquillo al descubrir la grandeza del océano." KenshinCroft
KenshinCroft
KenshinCroft
Fundador
Fundador
♥ Importancia : 225
⌛ Desde : 30/04/2014
☛ Me encuentro en : En el mundo de la Ficción
→ Me dedico a : Escritor

Volver arriba Ir abajo

default Re: Tutoriales del foro

Mensaje por KenshinCroft el Vie Abr 03, 2015 3:32 pm

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:

Tutoriales del foro Tuto1910

Cada ícono tiene su nombre. Y el primero: Tutoriales del foro Tuto2010, "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:

Tutoriales del foro Tuto2310

  • 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:

Tutoriales del foro Tuto2410

  • 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].

    Tutoriales del foro 407px-10

    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]

    Tutoriales del foro 407px-10

    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:

    Tutoriales del foro 407px-10


    -Bien, pasemos al siguiente ícono: Tutoriales del foro Tuto2110, "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:

    Tutoriales del foro Nenca210

    -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: Tutoriales del foro Tuto2210, 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:

    http://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=http://foroplumayficcion.foroactivo.mx/forum]http://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:

    Tutoriales del foro Nenca210









    Fin del tutorial.











"Contemplar toda la belleza que posees, transmuta mi voluntad en la enajenación de un chiquillo al descubrir la grandeza del océano." KenshinCroft
KenshinCroft
KenshinCroft
Fundador
Fundador
♥ Importancia : 225
⌛ Desde : 30/04/2014
☛ Me encuentro en : En el mundo de la Ficción
→ Me dedico a : Escritor

Volver arriba Ir abajo

default Re: Tutoriales del foro

Mensaje por KenshinCroft el Sáb Abr 25, 2015 8:44 pm

Cómo insertar un video de YouTube y Dailymotion, e insertar una animación flash


-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:

Tutoriales del foro Tuto2510

-Ok, veamos el primer ícono, que es muy reconocible, es el ícono del sitio web YouTube: Tutoriales del foro Tuto2610. 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: Tutoriales del foro Tuto2710 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:

Con tamaño modificado:

Spoiler:


-En cuanto las animaciones flash, localicemos el último ícono: Tutoriales del foro Tuto2810.

-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.










"Contemplar toda la belleza que posees, transmuta mi voluntad en la enajenación de un chiquillo al descubrir la grandeza del océano." KenshinCroft
KenshinCroft
KenshinCroft
Fundador
Fundador
♥ Importancia : 225
⌛ Desde : 30/04/2014
☛ Me encuentro en : En el mundo de la Ficción
→ Me dedico a : Escritor

Volver arriba Ir abajo

default Re: Tutoriales del foro

Mensaje por KenshinCroft el Mar Abr 28, 2015 12:46 pm

Cómo poner formato a los títulos, cambiar el tamaño de las fuentes y color


¡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:

Tutoriales del foro Tuto2910

-Veamos el primero: Tutoriales del foro Tuto3010, 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: Tutoriales del foro Tuto3110, 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: Tutoriales del foro Tuto3210, 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:

Tutoriales del foro Colore10

-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.










"Contemplar toda la belleza que posees, transmuta mi voluntad en la enajenación de un chiquillo al descubrir la grandeza del océano." KenshinCroft
KenshinCroft
KenshinCroft
Fundador
Fundador
♥ Importancia : 225
⌛ Desde : 30/04/2014
☛ Me encuentro en : En el mundo de la Ficción
→ Me dedico a : Escritor

Volver arriba Ir abajo

default Re: Tutoriales del foro

Mensaje por KenshinCroft el Jue Mayo 07, 2015 11:48 am

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:

Tutoriales del foro Tuto3310

-Vamos a ver el primer ícono: Tutoriales del foro Tuto3410, 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: Tutoriales del foro Tuto3510, 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: Tutoriales del foro Tuto3610, 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í:

Tutoriales del foro Tuto3910

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

Tutoriales del foro Tuto010

-Vemos más íconos (algunos de ellos, los trataré más adelante), veamos el primero de ellos: Tutoriales del foro Tuto3710, 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: Tutoriales del foro Tuto3810, 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.










"Contemplar toda la belleza que posees, transmuta mi voluntad en la enajenación de un chiquillo al descubrir la grandeza del océano." KenshinCroft
KenshinCroft
KenshinCroft
Fundador
Fundador
♥ Importancia : 225
⌛ Desde : 30/04/2014
☛ Me encuentro en : En el mundo de la Ficción
→ Me dedico a : Escritor

Volver arriba Ir abajo

default Re: Tutoriales del foro

Mensaje por KenshinCroft el Jue Mayo 28, 2015 10:29 am

Cómo utilizar la función "scroll" y la función "rand"


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 Tutoriales del foro Tuto3610 para descubrir los botones ocultos):

Tutoriales del foro Tuto4310

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

-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:

Tutoriales del foro Unapru12

-Vamos a probar el Dezplazamiento vertical: Tutoriales del foro Tuto4110. 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:

Tutoriales del foro Estadi10


-Ahora, vamos con el último ícono: Tutoriales del foro Tuto4210, 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.










"Contemplar toda la belleza que posees, transmuta mi voluntad en la enajenación de un chiquillo al descubrir la grandeza del océano." KenshinCroft
KenshinCroft
KenshinCroft
Fundador
Fundador
♥ Importancia : 225
⌛ Desde : 30/04/2014
☛ Me encuentro en : En el mundo de la Ficción
→ Me dedico a : Escritor

Volver arriba Ir abajo

default Re: Tutoriales del foro

Mensaje por KenshinCroft el Sáb Sep 12, 2015 7:27 pm

UTILIZAR ALGUNAS ETIQUETAS HTML


¡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:

Tutoriales del foro Tuto3310

Muy bien, empecemos:

Deben escribir las etiquetas html tal y cómo estan en su mensaje, no necesitan de presionar alguna herramienta del panel de edición de su mensaje, las etiquetas html se meten o se escriben directamente.


->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:

http://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:

http://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 1COLUMNA 2COLUMNA 3
COLUMNA 4COLUMNA 5COLUMNA 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 1Columna 2Clumna 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     1Columna     2Columna     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.










"Contemplar toda la belleza que posees, transmuta mi voluntad en la enajenación de un chiquillo al descubrir la grandeza del océano." KenshinCroft
KenshinCroft
KenshinCroft
Fundador
Fundador
♥ Importancia : 225
⌛ Desde : 30/04/2014
☛ Me encuentro en : En el mundo de la Ficción
→ Me dedico a : Escritor

Volver arriba Ir abajo

default Re: Tutoriales del foro

Mensaje por KenshinCroft el Sáb Dic 26, 2015 10:47 pm


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:

Tutoriales del foro Ima-co10

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.

Tutoriales del foro Soul_f10

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:

Tutoriales del foro Ima-co10

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:

La Pluma y la Ficció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]

La Pluma y la Ficción

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]

La Pluma y la Ficción



  • 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










  • "Contemplar toda la belleza que posees, transmuta mi voluntad en la enajenación de un chiquillo al descubrir la grandeza del océano." KenshinCroft
    KenshinCroft
    KenshinCroft
    Fundador
    Fundador
    ♥ Importancia : 225
    ⌛ Desde : 30/04/2014
    ☛ Me encuentro en : En el mundo de la Ficción
    → Me dedico a : Escritor

    Volver arriba Ir abajo

    default Re: Tutoriales del foro

    Mensaje por Noizz Clear el Vie Feb 24, 2017 1:37 pm

    Cómo utilizar la función 'menciones' del foro

    ¡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 Cool


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

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







    Noizz Clear
    Noizz Clear
    Fundador
    Fundador
    ♥ Importancia : 332
    ⌛ Desde : 26/01/2016
    ☛ Me encuentro en : En todo el foro
    → Me dedico a : Administrador del Foro

    Volver arriba Ir abajo

    default Re: Tutoriales del foro

    Mensaje por Noizz Clear el Jue Abr 27, 2017 11:15 pm

    UTILIZAR ETIQUETAS HTML  PARTE III

    ¡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







    Noizz Clear
    Noizz Clear
    Fundador
    Fundador
    ♥ Importancia : 332
    ⌛ Desde : 26/01/2016
    ☛ Me encuentro en : En todo el foro
    → Me dedico a : Administrador del Foro

    Volver arriba Ir abajo

    default Re: Tutoriales del foro

    Mensaje por Contenido patrocinado

    Contenido patrocinado

    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.