TUTORIAL PARA HACER TABLAS Y MARCOS

Ver el tema anterior Ver el tema siguiente Ir abajo

TUTORIAL PARA HACER TABLAS Y MARCOS

Mensaje  Artesana el Lun 15 Feb - 11:30

PRELIMINARES

La informática usa una serie de fórmulas que el programa del ordenador entiende y convierte en un texto claro para nosotros. Lo que aparece es la traducción de un lenguaje, que está detrás en la parte oculta que no vemos y que aparece en unas cajas cerradas llamadas etiquetas.

Todas las páginas web están hechas así, pero no tenéis que aprenderlo, solo saber de que estamos hablando. En el editor del foro nos lo van a tener todo ya preparado para que nosotros pinchemos en el sitio adecuado y saldrán ellas solas.

HACER LA TABLA

Para hacer un marco simplemente tenemos que escribir unas etiquetas, cada una de ellas le da una instrucción al ordenador. Siempre empezamos por la orden y siempre terminamos por el cierre de la orden, y siempre estas etiquetas están metidas en una caja formada por estos signos de puntuación, < >, si es lenguaje HTML o si es BBcode estos [  ] También para dar la orden de cerrar, se le pone a la caja este signo delante /.

Es fácil de hacer porque las fórmulas por dificiles y largas que parezcan solo tenemos que copiarlas con el ratón y pegarlas. No hay más que ocuparse de que no haya espacios en blanco y de no dejarnos olvidado ningún símbolo, corchetes o comillas.

LAS IMÁGENES

Las imágenes, sean fotos o dibujos, no se guardan en las páginas como las tenemos en el disco duro de nuestro ordenador, se tienen almacenadas en otra página web, y lo que ponemos dentro de la fórmula correspondiente es la direccion, que se llama URL, o RUTA, de la página donde está guardada. Para verlo es bien fácil, os ponéis sobre la foto, le dáis con botón derecho del ratón y se abre una ventana enorme con un monton de opciones, en vez de  copiar como siempre, pincháis "propiedades" y se abre otra ventana donde aparece toda la información de la foto, tamaño, sistema, y la URL, que es la que necesitamos para ponerla en nuestra fórmula cuando nos la pidan.


TABLA BÁSICA CON BORDE

No tiene más que el marco, el fondo es el que tiene el foro.

Se puede poner el tamaño que se quiera de tabla, donde pone 700 es el ancho, cuidado al poner más, que no cabe en el post, pero menos se puede poner. El tamaño del borde que forma el marco es donde pone "border" y es aquí "20". La tabla crece en sentido vertical según el largo de lo que escribamos, por eso no le he puesto medida del largo, si se necesita se podría poner igual que hemos hecho con el ancho, pero con la palabra "height".

El marco este está conseguido usando el borde, por eso pone: "bordercolor" y aquí es de color verde, veis que pone: "green", cambiando el nombre se puede poner otro color. Si no se le pone ninguno será blanco con efecto de perspectiva.

La etiqueta tr marca la línea, es decir el renglón, cada tr es un renglón y la etiqueta td las divisiones del renglón, es decir el número de divisiones o celdas que tendría cada renglón, si se ponen en un tr dos td habrá dos divisiones una al lado de la otra en la misma línea. Aquí las haremos de un solo tr y un solo td.





TEXTO



Para ver esta tabla de arriba poner esto.

Código:
<center><TABLE borderColor="green" width=700  border="20">
<TR>
<TD>

[center]TEXTO[/center]
 
</TD></TR></TABLE></center>

Si queréis no tener la rayita verde finita que aparece poned cellspacing="0" que es la medida de lo que sería un marco interior:





TEXTO



Código:
<center><TABLE borderColor="green" cellspacing="0" width=700  border="20">
<TR>
<TD>

[center]TEXTO[/center]
 
</TD></TR></TABLE></center>

En el editor de este foro no hace falta, pero en las páginas html se debe dar la orden de saltar renglón con la etiqueta br y se deben también marcar los espacios. Aquí solo tenemos que bajar o separar los renglones con el enter. Un espacio significará un espacio en la tabla.


TABLA BÁSICA CON CENTRO

Veamos ahora una tabla donde el centro tiene su propio color, aquí rosa. El centro sería como el papel donde se escribe o el lienzo donde se pinta el cuadro y es lo que aparece en el "td", si tiene color va introducido con: "bgcolor" y el código o el nombre del color.



TEXTO DEL POEMA

 


Esta tabla se hace poniendo esto:

Código:
<center><TABLE WIDTH="640" border="10"><TR><TD bgcolor="pink">

[center]TEXTO DEL POEMA[/center]

  
</TD></TR></TABLE></CENTER>


TABLA CON BORDE, CUADRO INTERIOR Y CENTRO

Añadimos un marco interior con la instrucción "bgcolor", también ponemos CELLSPACING="30" que es la medida de este nuevo marco, aparte sigue estando el borde de antes, visible o no.

Esta vez ponemos, en el TD, "#FFFFFF", que es el color blanco para el centro de la tabla.

Veis que el color se puede poner con números o con el nombre en inglés y sin el #. Debajo tengo un enlace para ver los nombres y los números de todos los colores.



TEXTO DEL POEMA

 


Esta tabla se hace poniendo esto:

Código:
<center><TABLE bordercolor="#000000" WIDTH="640" CELLSPACING="30" bgcolor="green" border="10"><TR><TD bgcolor="#FFFFFF">

[center]TEXTO DEL POEMA[/center]

  
</TD></TR></TABLE></CENTER>


TABLA CON FOTOS SIN BORDE

Esta tabla tiene fotos en vez de colores, para poner una foto se pone en vez de bgcolor, esto:

BACKGROUND="http://illiweb.com/fa/pbucket.gif?t=1236125367"

La foto se puede poner en el TD que es el fondo de la tabla o en el bgcolor que es el marco interior, no se puede poner en el bordercolor que es el marco del borde exterior. Ese, si no lo queréis poner se deja con un "0" y ya no aparece, si no se le pone color sale blanco por defecto.

La foto es lo que va entre las dos comillas. La dirección de la foto se cambia por la foto que queráis, pero esto no es la foto que va dentro de adorno, esta es la foto del marco o el fondo de la tabla. La foto que se pone de adorno, un ramo de flores o un río o un barco, eso va dentro junto al poema como si no hubiese tabla.

Para ver esto:



TEXTO DEL POEMA

 


Hay que escribir esto:

Código:
<center><TABLE CELLSPACING="30" background="https://imgfast.net/users/1214/25/62/59/album/th/galon_12.jpg" WIDTH="640"><TR><TD BACKGROUND="https://imgfast.net/users/1214/25/62/59/album/th/hojas210.gif">


[center]TEXTO DEL POEMA[/center]

  
</TD></TR></TABLE></CENTER>


TABLA CON FOTOS CON BORDE

Solo lleva además el border y el bordercolor. Si no se le pone bordercolor el color será blanco con efecto sombra.



TEXTO DEL POEMA


 


Código:
<center><TABLE bordercolor="#ffffff" CELLSPACING="30" background="https://imgfast.net/users/1214/25/62/59/album/th/galon_12.jpg" WIDTH="640" border="5"><TR><TD BACKGROUND="https://imgfast.net/users/1214/25/62/59/album/th/hojas210.gif">

<center>TEXTO DEL POEMA</center>

  
</TD></TR></TABLE></CENTER>

La foto que se pone es un trocito pequeño que se multiplica. Esto es el galón antes de multiplicarse:



Código:
https://imgfast.net/users/1214/25/62/59/album/th/galon_12.jpg

y esto es el fondo antes también:



Código:
https://imgfast.net/users/1214/25/62/59/album/th/hojas210.gif

FOTO O IMAGEN QUE NO SE MULTIPLIQUE

Si queremos que el fondo sea una foto que no se multiplique y en la cual podemos escribir como en cualquier otro fondo, hay dos maneras, lo más fácil consiste solo en ponerle a la tabla la medida exacta de la foto o lo que queremos que ocupe:

TEXTO



Código:
<CENTER><TABLE border="14"> <TR><TD background="https://imgfast.net/users/1214/25/62/59/album/alonei10.jpg" width="700" height="600>

[center][b][size=18][color=#CCFFFF]TEXTO[/color][/size][/b][/center]

</TD></TR></TABLE></CENTER>

También podríamos poner una etiqueta para que no se repita sería así:

Código:
background-repeat: no-repeat

Convendría cuando se quiera que la foto esté en un sitio concreto poner la posición:

Código:
background-position: top left

Observad como se usa con esta imagen de las uvas puestas en la esquina superior izquierda:






Tu poema







Código:
<center>
<TABLE CELLSPACING="15" background="http://illiweb.com/fa/pbucket.gif" WIDTH="600"><TR><TD style="background-image: url(https://i47.servimg.com/u/f47/12/37/08/27/uvas_410.png); background-repeat: no-repeat; background-position: top left">



[center][b][color=#2B68B7] Tu poema [/color][/b]

<img src="https://imgfast.net/users/1214/25/62/59/album/lavend10.jpg" width=400> [/center]


</TD></TR></TABLE></CENTER>

MARQUESINAS, TABLAS ASCENDENTES

Se les llama "marquesinas" y siguen a la etiqueta "marquée"

http://www.wikilearning.com/curso_gratis/curso_completo_de_html-multimedia_inline_i/9708-60

Movimiento dentro de la tabla

Se puede personalizar con "up" o "down", según se quiera la dirección del movimiento.







Estrellas

Radiantes nos contemplan las estrellas
desde su alta atalaya en el Parnaso,
componen un mural a cielo raso
de amores, amistades y querellas.

Sagradas como efímeras doncellas,
los magos las invocan a su paso,
augures del triunfo y el fracaso,
expían nuestras faltas sobre ellas.

De reojo, traviesas con sus brillos,
burlando a la farola funcional
espían las ventanas de sus dueños

y en el muro empañado del cristal
perciben, entreabiertos los visillos,
el aliento intangible de los sueños.

Artesana, 6-1-10






Código:
<center><TABLE CELLSPACING="25" CELLPADDING="30" background="http://img14.imageshack.us/img14/1916/franjadoradamakarenna.jpg?t=1219285747" WIDTH="650"><TR><TD BGcolor="#000000">

<center><TABLE CELLSPACING="3" CELLPADDING="10" BGcolor="#f4e884" WIDTH="500"><TR><TD BGcolor="#000000">

<font color="#f4e884"><marquee behavior="scroll" direction="up" scrollamount="2">

[center]Estrellas

Radiantes nos contemplan las estrellas
desde su alta atalaya en el Parnaso,
componen un mural a cielo raso
de amores, amistades y querellas.

Sagradas como efímeras doncellas,
los magos las invocan a su paso,
augures del triunfo y el fracaso,
expían nuestras faltas sobre ellas.

De reojo, traviesas con sus brillos,
burlando a la farola funcional
espían las ventanas de sus dueños

y en el muro empañado del cristal
perciben, entreabiertos los visillos,
el aliento intangible de los sueños.

Artesana, 6-1-10
</marquee>[/center]

</TD></TR></TABLE></center>

</TD></TR></TABLE></center>

Movimiento de la tabla completa.



TU TEXTO



Código:
<marquee behavior="scroll" direction="up" position="center" scrollamount="2"><div align="center"><TABLE BorderColor="#f4e884" CELLSPACING="40" WIDTH="600" background="http://img14.imageshack.us/img14/1916/franjadoradamakarenna.jpg" border="4"> <TR> <TD BGcolor="#030338">

[center]<font color="#f4e884">TU TEXTO</font>[/center]

</TD></TR></TABLE></div></marquee>

ETIQUETAS EXPLICADAS

Bien ya habéis visto como lo hago y en que consiste. Las direcciones de las fotos es lo mismo que sean estas o las vuestras.

Es muy fácil, solo hay que pegar el texto escrito del poema donde pone texto, cambiad las cifras, los colores o las fotos, le dais a "Previsualizar" y si no sale bien solo tenéis que intentarlo otra vez, no se rompe el foro, ni vuestro ordenador, ni pasa nada. Eso sí, tenéis que tener una copia del poema, porque ese sí que se borra si no lo editáis.

Quien quiera copiar las tablas y no complicarse, le da a citar y sale el poema, se copia y se cambia solo el texto, pero no tengáis miedo a hacerlo. Os pongo un diccionario de la orden que da cada etiqueta para que os hagáis más idea.


CUADRO ETIQUETAS HTML

Color: bordercolor=#333399  

Posición: Centro = center; Izquierda = left; derecha = right  

Recordemos estas etiquetas de HTML:

Verticalidad: ALIGN="top" (arriba), ALIGN="middle" (centro), ALIGN="bottom" (abajo)

Horizontabilidad: ALIGN="left" (arriba), ALIGN="center" (centro), ALIGN="rigth" (debajo)

Código:
<div align="center"> que cierra: </div> Tambien se puede poner <div align= "top center">

Abrir tabla y medidas

TABLE borderColor=#00099 height=Nº cellSpacing=Nº width=Nº bgColor=#ffffff border=Nº

Alto de tabla: height=Nº  

Ancho de tabla: width=Nº

Borde de tabla (ancho): border=Nº

Marco interior (ancho): cellSpacing=Nº

Introducción de fotos o de color:

Las fotos se introducen por: background="URL" y los colores por: bgColor="#código del color".
 
Color del borde de la tabla:

borderColor=#fa58ac  (se elige color en la barra de edición del espacio, o en una tabla de colores)  

Todo lo que queramos poner dentro de la tabla, un poema, una foto estará a partir del TD

Foto que es el fondo de la tabla:

TD background=http://www.fiestac.com/fondos/Color15.jpg (se elige URL foto )

Color que es el fondo de la tabla: TD bgColor=#fff000  (se elige color )

Orden de cerrar la tabla: /TD , /TR , /TABLE


NOTA

Recordad:

Estas etiquetas son de HTML, en los foro hay otras etiquetas, las BBCode con corchetes como estos, [de apertura y cierre]


TABLA MÚLTIPLE

Se trata de ir introduciendo tablas unas dentro de la otras, en vez del texto, ponemos otra tabla. El ejemplo lo hacemos con tres tablas.

Es importante saber:

a) Se cierran todas al final.

b) Se juega con los marcos, con los bordes y con los fondos para hacerlo a nuestro gusto.

c) Las medidas deben ir en disminución para que se vean como queremos.

d) En el editor de los foros, las distancias de arriba abajo y los cambios de renglón, es decir entre las barras, se hacen simplemente dejando espacios, no hace falta poner códigos como en las páginas HTML.

e) Aquí hemos puesto tablas del modelo completo, con fondo, marco y borde, pero si queréis solo superponéis tablas del modelo sencillo como la primera, id probando cual os gusta más para cada ocasión.





TEXTO DEL POEMA





Código:

<center><TABLE bordercolor="#000000" WIDTH="700" CELLSPACING="30" bgcolor="green" border="10"><TR><TD bgcolor="#FFFFFF">
<center><TABLE bordercolor="#000000" WIDTH="580" CELLSPACING="30" bgcolor="green" border="10"><TR><TD bgcolor="#FFFFFF">
<center><TABLE bordercolor="#000000" WIDTH="460" CELLSPACING="30" bgcolor="green" border="10"><TR><TD bgcolor="#FFFFFF">

[center]TEXTO DEL POEMA[/center]

</TD></TR></TABLE></CENTER>
</TD></TR></TABLE></CENTER>
</TD></TR></TABLE></CENTER>


NOTA

Es muy importante que, cuando envíes la tabla al foro, esta esté bien cerrada, para ello comprueba que debajo del todo donde dice: "Puedes responder temas en este foro" esté escrito en la izquierda y no en el centro. En esta foto está mal:



En esta otra está bien:



Si lo ves como en la primera foto es necesario revisar las etiquetas ya que alguna se ha quedado abierta.


TABLA CON EL EDITOR DEL FORO

Aparte de esto, en la barra de edición de este foro hay una herramienta para hacer tablas sencillas:

Pincha aquí para ver donde =>:

Cuando se presiona este icono que pone "insertar una tabla" aparece una ventanita con dos casillas arriba y tres cuadraditos debajo. Si ponéis 1 en un casillero, 1 en el otro, después dais al primero de los tres cuadraditos, que dice insertar una tabla y luego al OK, sale esto, que al escribir irá creciendo:

TEXTO
Código:
[table border="1"]
[tr]
[td] [/td]
[/tr]
[/table]

Es decir se hace sola la tabla, solo hay que poner el texto después del "td".

 
TABLAS CON TODOS LOS COLORES

http://www.poesiaartesana.com/t30-elige-aqui-tus-colores-html


ARTESANA TODOS LOS DERECHOS RESERVADOS.

http://artesana.mejorforo.net/f4-ayuda-informtica
http://artesana.mejorforo.net/t249-teora-base-para-hacer-tablas#271

ENLACES DE CURSOS DE HTML

http://www.wikilearning.com/curso_gratis/curso_completo_de_html-multimedia_inline_i/9708-60
http://www.wikilearning.com/curso_gratis/curso_completo_de_html/9708


Invitado, gracias por leerme.

avatar
Artesana
Diamante
Diamante

Distinciones : Llama del foro

Mensajes : 7159

Estatus
-: Administración Administración

http://www.artes-ana.com

Volver arriba Ir abajo

Ver el tema anterior Ver el tema siguiente Volver arriba


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