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
Lo último comentado
Últimos temas
Avisos
►Nueva medida de avatares: 200 x 200 píxeles, no debe pesar más de 64kb
Los que viven en el foro
Mejores posteadores
KenshinCroft (3923) |
| |||
Noizz Clear (1678) |
| |||
Kisa Shouta (621) |
| |||
Grell Sutcliff (594) |
| |||
Takano Masamune (552) |
| |||
Honjo Kamatari (508) |
| |||
KyoUchiha (503) |
| |||
Ritsu Onodera (401) |
| |||
Chiaki Yoshino (380) |
| |||
Hiroki Kamijou (349) |
|
Usuario del Mes
???
2019
¡Festajamos a...!

El chisme de hoy es:
¿Sabías qué... ?
Recomendación de los usuarios
Tom's Dinner, Suzanne Vega, por Kisa Shouta
Recomendamos Mozilla Firefox para visualizar mejor el foro

→ Foros con gold
Tutoriales del foro
Tutoriales del foro
Tutoriales
del foro
del foro
Índice
1. Cómo poner la fuente en negrita, cursiva, subrayada y rayada
2. Cómo alinear a la izquierda, derecha, centrar y justificar
3. Cómo usar las funciones "citar", "código", "spoiler" y "hide"
4. Cómo usar la función "Insertar tabla"
5. Cómo insertar una lista y una línea
6. Cómo insertar una imagen, alojarla e insertar un enlace
7. Cómo insertar un video de YouTube y Dailymotion, e insertar una animación flash
8. Cómo poner formato a los títulos, cambiar el tamaño de las fuentes y color
9. Cómo elegir la fuente y ver más botones
10. Cómo utilizar la función "sroll" y la función "rand"
11. Utilizar algunas etiquetas html
12. Utilizar etiquetas html y bb code parte II
13. Cómo utilizar la función 'menciones' del foro14. Utilizar etiquetas HTML parte III
2. Cómo alinear a la izquierda, derecha, centrar y justificar
3. Cómo usar las funciones "citar", "código", "spoiler" y "hide"
4. Cómo usar la función "Insertar tabla"
5. Cómo insertar una lista y una línea
6. Cómo insertar una imagen, alojarla e insertar un enlace
7. Cómo insertar un video de YouTube y Dailymotion, e insertar una animación flash
8. Cómo poner formato a los títulos, cambiar el tamaño de las fuentes y color
9. Cómo elegir la fuente y ver más botones
10. Cómo utilizar la función "sroll" y la función "rand"
11. Utilizar algunas etiquetas html
12. Utilizar etiquetas html y bb code parte II
13. Cómo utilizar la función 'menciones' del foro
Última edición por KenshinCroft el Sáb Dic 26, 2015 10:55 pm, editado 20 veces


"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
Fundador


✏ Mensajes : 3923
♥ Importancia : 227
⌛ Desde : 30/04/2014
Re: Tutoriales del foro
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:

-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]
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]
-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:
- Código:
[strike][/strike]
-Si escribimos en medio de esos corchetes, así se verá nuestro texto:
-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
Fundador


✏ Mensajes : 3923
♥ Importancia : 227
⌛ Desde : 30/04/2014
Re: Tutoriales del foro
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:

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

-El primer ícono es este:

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

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:

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:

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:

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:


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


"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
Fundador


✏ Mensajes : 3923
♥ Importancia : 227
⌛ Desde : 30/04/2014
Re: Tutoriales del foro
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:

vamos a localizar estos íconos:

-Ok. Si pasamos el cursor sobre el primero:

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

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

-Ahora veamos el siguiente ícono:

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

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


✏ Mensajes : 3923
♥ Importancia : 227
⌛ Desde : 30/04/2014
Re: Tutoriales del foro
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:

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

-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]
- La segunda:
- Código:
[tr][/tr]
- La tercera:
- Código:
[td][/td]
-Ok, ahora veremos en función la tabla:
Esta es una columna |
- 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 |
- 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 |
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 |
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
Fundador


✏ Mensajes : 3923
♥ Importancia : 227
⌛ Desde : 30/04/2014
Re: Tutoriales del foro
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:

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

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

-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:
- Ventanas
- Mesas
- Sillas
- Bancos
- Cortinas
- 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:
-Vamos por el siguiente ícono:

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


✏ Mensajes : 3923
♥ Importancia : 227
⌛ Desde : 30/04/2014
Re: Tutoriales del foro
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:

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


"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
Fundador


✏ Mensajes : 3923
♥ Importancia : 227
⌛ Desde : 30/04/2014
Re: Tutoriales del foro
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:

-Ok, veamos el primer ícono, que es muy reconocible, es el ícono del sitio web YouTube:

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

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

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


✏ Mensajes : 3923
♥ Importancia : 227
⌛ Desde : 30/04/2014
Re: Tutoriales del foro
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:

-Veamos el primero:

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

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

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


"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
Fundador


✏ Mensajes : 3923
♥ Importancia : 227
⌛ Desde : 30/04/2014
Re: Tutoriales del foro
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:

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:

Es raro que se ilumine o llegues a ocuparlo.
El siguiente ícono:

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

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

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


✏ Mensajes : 3923
♥ Importancia : 227
⌛ Desde : 30/04/2014
Re: Tutoriales del foro
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


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

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

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


✏ Mensajes : 3923
♥ Importancia : 227
⌛ Desde : 30/04/2014
Re: Tutoriales del foro
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:

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


"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
Fundador


✏ Mensajes : 3923
♥ Importancia : 227
⌛ Desde : 30/04/2014
Re: Tutoriales del foro
¡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:
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: "
->Debe ir siempre en medio de "
- " y "
- Código:
<OL><LI>Subforo<LI>Título<LI>Perfil<LI>Actividad<LI>Letras<LI>Acento</OL>
En función:
- Subforo
- Título
- Perfil
- Actividad
- Letras
- 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
Fundador


✏ Mensajes : 3923
♥ Importancia : 227
⌛ Desde : 30/04/2014
Re: Tutoriales del foro
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.

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.

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.

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



Noizz Clear
Fundador


✏ Mensajes : 1678
♥ Importancia : 334
⌛ Desde : 26/01/2016
Re: Tutoriales del foro
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:
- 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. - 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>
- 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. - 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>
- 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
Fundador


✏ Mensajes : 1678
♥ Importancia : 334
⌛ Desde : 26/01/2016
Página 1 de 1.
Permisos de este foro:
No puedes responder a temas en este foro.
|
|
» Resurface RPG - Cambio de Botón [Af. Normal]
» Men Of Letters ( Cambio de Botón)
» Jormungand Boarding School [Cambio de botón - élite]
» Tír na nÓg — Afiliación Élite // Cambio de botón.
» Dixinmortal - Cambio de boton [Foros con Gold]
» Ao no Sekai Rol [Cambio de botón]
» Rol World [Confirmación - Normal]
» ♪ Music is War ♪ | Afiliación normal
» Fanfics Naruto [Hermana]
» Nuestros datos de Afiliación