Color en las tablas con HTML

Publicado: agosto 14, 2010 en Uncategorized

EL COLOR DE LAS TABLAS

Para ponerle color a una celda utilizamos el atributo bgcolor=”aqui ponemos el nombre o número del color”

EJEMPLO

Vamos a realizar una tabla de dos filas y dos columnas, con borde de tamaño “1” y de largo el 50% del ancho de página. Y le ponemos a una celda fondo rojo con el atributo bgcolor=”red” y a otra fondo azul

<table border=”1″ cellpadding=”0″ cellspacing=”0″ width=”50%”>
<tr>
<td width=”50%” bgcolor=”red”></td>
<td width=”50%” bgcolor=”blue”></td>
</tr>
<tr>
<td width=”50%”></td>
<td width=”50%”></td>
</tr>
</table>

El resultado que veremos:

COLOR DEL FONDO DE LA TABLA

Para darle color a toda la tabla es suficiente con poner el atributo bgcolor”” dentro de la instrucción de tabla. Para poner fondo amarillo bgcolor=”yellow”

<table border=”1″ cellpadding=”0″ cellspacing=”0″ width=”50%” bgcolor=”yellow”>

EJEMPLO

Una tabla de tres filas y dos columnas con un largo del 75%.
Y  fondo amarillo

<table border=”1″ cellpadding=”0″ cellspacing=”0″ width=”75%” bgcolor=”yellow”>

<tr>
<td width=”50%”> </td>
<td width=”50%”> </td>
</tr>

<tr>
<td width=”50%”> </td>
<td width=”50%”> </td>
</tr>
<tr>
<td width=”50%”> </td>
<td width=”50%”> </td>
</tr>
</table>

Atributos de tablas en HTML

Publicado: agosto 14, 2010 en Uncategorized

AMAÑO DE LAS COLUMNAS Y MARGENES DE LAS CELDAS DE LAS TABLAS

FIJAR EL TAMAÑO DE LAS COLUMNAS

El mismo atributo utilizado para definir el tamaño de la tabla se utiliza para definir o fijar el tamaño de las columnas.

Definimos el tamaño de la columna con WIDTH

Por ejemplo, queremos que en una tabla de dos columnas, la primera columna ocupe el 20 por ciento de la tabla y la segunda el 80 por ciento.

Pondremos Width=20% en las celdas de la primera columna y Width=80% en las celdas de la segunda columna.

EL MARGEN DE LAS CELDAS

Podemos asignar márgenes a las celdas, de forma que lo que pongamos dentro no quede pegado a los bordes de la celda.

Para el margen de las celdas utilizamos el atributo cellpadding=”aqui ponemos el número”

EJEMPLO

Realizaremos una tabla de 2 por 3

A) Una tabla con dos filas y tres columnas, con borde de la tabla 1 y el ancho de la tabla un 75% del ancho de la página.

B) Las celdas con  un margen de 15 píxeles y el tamaño de las celdas un 10% del tamaño de la tabla la primera columna, un 20% del tamaño de la tabla la segunda columna y un 70% del tamaño de la tabla la tercera columna.

C) Pondremos dentro de las celdas las letras a,b,c,d,e,f

Quedaría

<table border=”1″ cellpadding=”15″ cellspacing=”0″ width=”75%”>

<tr>

<td width=”10%”>a</td>

<td width=”20%”>b</td>

<td width=”70%”>c</td>

</tr>

<tr>

<td width=”10%”>d</td>

<td width=”20%”>e</td>

<td width=”70%”>f</td>

</tr>

</table>

Y el resultado

a b c
d e f

Tablas en HTML

Publicado: agosto 14, 2010 en Uncategorized

Las páginas web necesitan tener los elementos  que colocamos ordenados y que se mantengan ordenados en los distintos navegadores.

Para definir el orden o la estructura de una página web se utilizan tablas con bordes ocultos. La mayoría de las páginas importantes se estructuran utilizando tablas ocultas.

Vamos a realizar una tabla con los bordes visibles

A) Las tablas comienzan con <table> y terminan con </table>

B) Definimos el borde de la tabla. Las tablas que se utilizan para ordenar los elementos sulen tener bordes invisibles para los navegadores y empleamos border=”0″. Si queremos un borde visible asignamos otro número al atributo borde. Nosotros en el primer ejemplo vamos a utilizar un borde visible border=”1″

C) Definimos el tamaño de la tabla. Podemos definirlo como porcentaje del ancho de la página utilizando width

WIDTH=”100%” nos genera una tabla que ocupa todo el ancho de la página que estamos creando.

WIDTH=”50%” genera una tabla con la mitad del ancho del documento que creamos.

Podemos igualmente definir el tamaño de la tabla en número de pixel

WITH=”100″ ahora al no poner el % serán 100 pixel de larga la tabla y no el 100% del documento

D) Tenemos que definir las filas que lleva la tabla

<TR>   </TR>

E) Y definimos las columnas utilizando

<TD>   </TD>

Estas instrucciones de columna las pondremos dentro de las de fila.

EJEMPLO

Vamos a construir una tabla con el borde visible de tamaño el 100 por 100 del ancho del documento con dos filas y tres columnas.

Por tanto utilizamos al principio el “tag”  <table> y al final </table>.

Definimos el borde border=”1″ y el ancho witdh=”100%”

Definimos la primera fila con <tr> y </tr> y dentro las tres columnas <td> </td>

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

Y hacemos lo mismo con la segunda fila y sus tres columnas

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

Las instrucciones para construir la tabla nos queda. Recuerda que da igual que las instrucciones se escriban en mayúsculas o minúsculas. Los espacios en blanco no afectan al resultado por tanto es lo mismo poner <tr> <td></td><td></td><td></td> </tr> en una columna como lo ponemos a continuación.

<table border=”1″ witdh=”100%”>
<TR>
<td></td>
<td></td>
<td></td>
</TR>
<TR>
<td></td>
<td></td>
<td></td>
</TR>
</Table>

Y el resultado.

Como poner un enlace con HTML

Publicado: agosto 14, 2010 en Uncategorized

Lo más característico de Internet es ser un medio que no es lineal sino hipertexto es decir que utiliza enlaces para movernos entre distintos niveles o páginas.

La instrucción para un enlace es de la forma <A HREF=”aqui ponemos la dirección a la que queremos que apunte el enlace”>el texto que queremos  que se vea en el documento</A>

EJEMPLO

Queremos enlazar con la página 100mejores.com y que el texto que se vea sea “La mejor selección de enlaces”

<A HREF=”http://www.100mejores.com/”>La mejor selección de enlaces”</A>

La mejor selección de enlaces

Recordar que los enlaces externos a otras páginas deben llevar la dirección completa de la página.

Para insertar imágenes utilizamos <img src=”aquí ponemos la dirección de la imagen”>

Este tag no tiene tag de cierre.

En Internet tenemos numerosas páginas que proporcionan imágenes gratis. Por ejemplo

http://www.gifmania.com/

Nos vamos a gifmania para obtener una imagen de una ejecutiva

Seleccionamos mujeres y ejecutivas.

Nos situamos sobre la imagen y pulsamos el botón DERECHO

Lo guardamos con el nombre de fichero ejecutiva y guardar como tipo de fichero GIF. Podemos guardarlo con varios tipos de ficheros, elegimos los gif por ocupar poco espacio y dar pocos problemas de compatibilidad.

Si lo guardamos en el MISMO directorio que el fichero HTML que estamos creando la instrucción para insertar la imagen de la ejecutiva nos queda:

<img src=”ejecutiva.gif”>

Es MUY IMPORTANTE tener cuidado con las direcciones de la imágenes. Si las imágenes están en un directorio y el fichero html que estamos creando en otro directorio, la dirección de la imagen debe indicar la localización de la imagen en el otro directorio.

Cuando hemos puesto imágenes en un fichero HTML y al enviarlo al servidor de Internet no aparecen suele ser por dos motivos:

A) Hemos enviado el fichero HTML a Internet pero no los ficheros con las imágenes.

B) Al enviarlo al servidor la dirección donde el programa busca la imagen es distinta de donde realmente esta la imagen. Para comprobar si donde esta la imagen coincide con la dirección que tiene la página nos colocamos sobre la imagen (o sobre donde debería estar) y pulsando el botón DERECHO en el menú que aparece pulsamos propiedades.

Para insertar imágenes animadas se hace todo igual que para insertar imágenes. Simplemente elegimos una imagen animada para enlazar. Por ejemplo en la misma página de http://www.gifmania.com/

Seleccionamos una imagen animada

La guardamos con el nombre ejecutivaanimada

La instrucción para insertar la imagen queda:

<img src=”ejecutivaanimada.gif”>

Y el resultado

Lo recomendable es MANTENER LA MISMA ESTRUCTURA DE DIRECTORIOS en el disco duro de nuestro ordenador y en el servidor de Internet. Al mover los ficheros en el disco duro y posteriormente enviarlo al servidor puede que la dirección de la imagen no coincida con la localización de la imagen.

Creando una web page con HTML

Publicado: agosto 14, 2010 en Uncategorized

Vamos a realizar nuestra primera página  utilizando los códigos html que denominaremos “La Primera” y en la que aparezca escrito “soy un fenómeno”

Tenemos que crear un fichero en el que podremos las instrucciones y lo guardamos como fichero con terminación .htm

A) Todas las páginas html comienzan con el código de inicio <html> y terminan con el código </html>

Así que ponemos

<html>

</html>

B) Las páginas html se dividen en un encabezado y un cuerpo. Para el encabezamiento tenemos que poner los “tags”

<head>

</head>

Tenemos que ponerlo dentro de las instrucciones inicial y final de página (paso A) por lo tanto nos queda

<html>

<head>

</head>

</html>

C) Igualmente insertamos las instrucciones para el cuerpo de la página <body> y </body>

Con lo que nos queda

<html>

<head>

</head>

<body>

</body>

</html>

Podemos dejar líneas en blanco para comprender con más claridad la estructura del programa que estamos escribiendo. las líneas en blanco serán ignoradas cuando se ejecute el fichero html

D) Le ponemos título a la página con la instrucción <title> </title> que tenemos que poner dentro del encabezado (entre head y head)

<html>

<head>
<title>Mi primera Pagina</title>
</head>

<body>
</body>
</html>

E) Vamos a poner el texto en negrilla “Soy un fenómeno”. La instrucción para negrilla es <b> y <b/>. Y el texto hay que colocarlo dentro del cuerpo (entre body y body) de la página.

Por tanto nos queda

<html>

<head>

<title>Mi primera Pagina</title>

</head>

<body>

Soy el mejor

</body>

</html>

DAR FORMATO A LAS LETRAS

Cambiar los atributos de las letras  utilizamos el comando <font> </font> (fuente o tipo de letra). El color o el tamaño son atributos del elemento tipo de letra.

Podemos dar distintos atributos a las letras.

A) TAMAÑO DEL TEXTO

* Si queremos poner las letras de distinto tamaño empleamos el atributo

SIZE=””.

* Dentro de las comillas pondremos “+” para aumentar el tamaño y “-” para disminuirlo

EJEMPLO 1

<FONT SIZE=”+1″>este texto se ve con mayor tamaño</FONT>

El resultado:

este texto se ve con mayor tamaño

EJEMPLO 2

Si queremos aun mayor tamaño ponemos un número mayor. Voy a probar con 4

<FONT SIZE=”+4″>este texto se ve muy grande</FONT>

este texto se ve muy grande

EJEMPLO 3

Para disminuir el tamaño ponemos -1

<FONT SIZE=”-1″>al poner -1 disminuye el tamaño</FONT>

Al poner -1 disminuye el tamaño

Podemos  poner el texto en negrilla, en cursiva o subrayado

PONER EL TEXTO EN NEGRILLA

Para poner el texto en negrilla utilizamos el tag “b” (de bold)

Soy el  <b>mejor</b> de la clase

Soy el mejor de la clase

PONER EL TEXTO EN CURSIVA

Para ponerlo en cursiva utilizamos “i” (de italian)

Poner un <i>texto en cursiva</i>

Poner un texto en cursiva

PONER EL TEXTO SUBRAYADO

Para subrayado

Ahora toca el <u>subrayado</u> de parte de la frase

Ahora toca el subrayado de parte de la frase

La instrucción para poner color a las letras es

<FONT COLOR=”entre estas comillas va el nombre o el número del color”>aquí el texto al que queremos dar color</FONT>

EJEMPLO 1

Para poner el texto en rojo

<FONT COLOR=”RED”>este texto se pone rojo</font>

El resultado si lo ponemos dentro de los códigos del fichero  html será

este texto se pone rojo

EJEMPLO 2

Para poner el texto en azul

<FONT COLOR=”BLUE”>este texto se pone en azul</font>

este texto se pone en azul

Codigo HTML

Publicado: agosto 14, 2010 en Uncategorized

Para confeccionar una página web lo único que se necesita es un editor de texto. Existen editores especializados en crear ficheros HTML

Podemos utilizar Notepad, WordPad o el que queramos. Es preferible utilizar Notepad o un editor especializado para generar ficheros de Html que en editor más avanzado que puede incluir códigos no deseados.

Seguramente tienes uno de estos programas en tu ordenador. Si no sabes donde esta pulsa en la esquina inferior izquierda “Inicio” y “Buscar”

Escribimos el nombre del fichero que estoy buscando en este caso Notepad y pulsamos “Buscar Ahora”

*

Y pulsamos dos veces sobre sobre el fichero de Notepad

Existen editores gratuitos en Internet. Por ejemplo en la página de Internet

http://www.softonic.com/ En la sección de programación tienes editores gratuitos para de
Pasos para crear la página web:

1. Abrir el programa editor de texto.

2. Escribir los códigos o “tags”. Escribimos los comandos como escribimos en un procesador de textos. Y guardamos el fichero que creamos como fichero de texto.A lo largo de este curso veremos los diferentes códigos.

*

Una vez abierto el programa editor de texto voy escribiendo los códigos o “tags”
*

Las instrucciones, códigos o “tags” de html van entre dos signos . Las instrucciones es indiferente si se escriben en mayúsculas o minúsculas.
*

Tenemos que poner un código de inicio y uno de cierre.

Ejemplo: Poner texto en negrilla

La instrucción para que un texto se ponga en negrilla es Soy magnífico

La instrucción de cierre tiene que llevar el signo /

Por lo tanto:

A) Ponemos el código de inicio para poner el texto en negrilla

B) A continuación el texto que queremos que aparezca en negrilla y

C) Al final el código de cierre

3. Guardar el fichero. Es recomendable que cree un directorio en el disco duro de su ordenador para guardar ordenadas los ficheros que iremos generando.

1.

Para guardar el fichero tenemos que ponerle un nombre y como extensión htm. html o shtml. Es decir nombre, punto y htm. Por ejemplo miprimerapagina.htm
2.

Es preferible no poner acentos, “ñ” ni simbolos extraños para evitar problemas de compatibilidad
3.

No ponerle espacios en blanco al nombre del fichero.
4.

Y guardar como documento de TEXTO. Formato de texto ASCII. Volveremos a ver esta cuestión.

Una vez guardado el fichero podemos ver como queda utilizando el mismo programa con el que ve esta página. El resultado cuando veamos con el navegador el documento será

Soy magnífico

Puede ver como quedaría el fichero pulsando el enlace miprimerapagina. Para volver pulse Atrás en su navegador
miprimerapagina.htm

Si utiliza una versión avanzada de Internet Explorer, puede ver los códigos de la página. Una vez que este en miprimerapagina pulse en la Barra superior:

*

Pulsamos Archivo
*

Y pulsamos Modificar con Microsoft Front Page. Esperamos unos segundos.

Y pulsamos sobre la pestaña HTML que se encuentra en la parte inferior derecha.

Algebra

Publicado: agosto 7, 2010 en Uncategorized

Pagina con resto de información: http://www.elosiodelosantos.com/sergiman/div/algebra.html

Aquí encontrarás todos los ejercicios y recursos para el estudio del álgebra, con los que contamos hasta el momento.
Los ejercicios están en formato .xls por lo que necesitas el programa Excel para utilizarlos. En cuanto a las calculadoras o Calculadoras, están en Shockwave por lo que es probable que al entrar a usarlas tengas que “bajar” el programa, este proceso es gratuito y tarda muy poco.
Recuerda que todos nuestros recursos son gratuitos y que puedes utilizarlos las veces que quieras y compartirlos con tus amigos.
Esperamos que te sean muy útiles.

Rectas

Publicado: agosto 7, 2010 en Uncategorized

Rectas

Rectas

Una recta tiene una dimensión: longitud.

Se designan mediante dos de sus puntos o mediante una letra minúscula.

Dos puntos determinan una recta.

Rectas

Una recta indica una dirección y dos sentidos contrarios, según se recorra la recta de izquierda a derecha o de derecha izquierda.

Tipos de recta

Secantes

Rectas

Dos rectas secantes se cortan en un punto.

Paralelas

Rectas

Dos rectas paralelas no se cortan en ningún punto.

Coincidentes

Rectas

Dos rectas son coincidentes si todos sus puntos son comunes.

Perpendiculares

Rectas

Dos rectas son perpendiculares cuando al cortarse forman cuatro ángulos rectos .

Coincidentes

Rectas

Dos rectas son coincidentes si todos sus puntos son comunes.

Semirrectas

Rectas

Una semirrecta es cada una de las partes en que queda dividida una recta por uno cualquiera de sus puntos.

Potenciación

Publicado: agosto 7, 2010 en Uncategorized

Página interactiva: http://www.educa.madrid.org/web/cp.severoochoa.torrejondeardoz/enlacesmatematicas.htm

La potenciación es una forma abreviada de escribir un producto formado por varios factores iguales.

7 · 7 · 7 · 7 = 74

Base

La base de una potencia es el número que multiplicamos por sí mismo, en este caso el 7.

Exponente

El exponente de una potencia indica el número de veces que multiplicamos la base, en el ejemplo es el 4.

Potencias de exponente natural

1. Un número elevado a 0 es igual a 1.

a0 = 1

60 = 1

2. Un número elevado a 1 es igual a sí mismo.

a1 = a

61 = 6

3. Producto de potencias con la misma base:

Es otra potencia con la misma base y cuyo exponente es la suma de los exponentes.

am · a n = am+n

35 · 32 = 35+2 = 37

4. División de potencias con la misma base:

Es otra potencia con la misma base y cuyo exponente es la diferencia de los exponentes.

am : a n = am – n

35 : 32 = 35 – 2 = 33

5. Potencia de una potencia:

Es otra potencia con la misma base y cuyo exponente es el producto de los exponentes.

(am)n = am · n

(35)3 = 315

6. Producto de potencias con el mismo exponente:

Es otra potencia con el mismo exponente y cuya base es el producto de las bases.

an · b n = (a · b) n

25 · 45 = 85

7. Cociente de potencias con el mismo exponente:

Es otra potencia con el mismo exponente y cuya base es el cociente de las bases.

an : bn = (a : b)n

64 : 34 = 24

Signo de una potencia de base entera

Para determinar el signo de la potencia de un número entero tendremos en cuenta que:

1. Las potencias de exponente par son siempre positivas.

base negativa

26 = 64

(−2)6 = 64

2. Las potencias de exponente impar tiene el mismo signo de la base.

base negativa

23 = 8

(−2)3 = −8

Potencias de exponente negativo

La potencia de un número entero con exponente negativo es igual al inverso del número elevado a exponente positivo.

potencia

ejemplo

Potencias de exponente negativo

ejercicio

Potencias de fracciones

Para elevar una fracción a una potencia se eleva tanto el numerador como el denominador al exponente.

potencia

potencia

Potencias fraccionarias de exponente negativo

Una potencia fraccionaria de exponente negativo es igual a la inversa de la fracción elevada a exponente positivo.

exponente entero

exponente entero

inverso

inverso

Potencias de exponente fraccionario

Potencias de exponente racional

Potencias de exponente racional

Potencias de exponente fraccionario y negativo

Potencias de exponente racional
youtube=
[ youtube= http://www.youtube.com/watch?v=Qcs1syl5X18%5D