Está en la página 1de 21

HTML= LENGUAJE DREAMWEAVER

LENGUAJES

DEL SERVIDOR

DEL CLIENTE

PHP JSP

HTML JAVASCRIPT CSS AJAX

PHP JSP
HTML JAVASCRIPT CSS AJAX

BASE DE DATOS

SOLO MANEJA INTERFACES

JSP: JAVA PARA PAGINA MANEJO DE DATOS JAVA: DESARROLLO DE SISTEMAS JAVASCRIPTS: PARA MANEJO DE INTERFACES DE PGINAS. HTML: LENGUAJE DE MARCADO

RECOMENDACIONES DE PAGINAS VARIAS PARA ESTUDIAR http://www.illasaron.com/ http://www.webestilo.com/ http://www.lawebdelprogramador.com/

Estructura del Documento


Todo el contenido de un documento HTML debe encontrarse englobado en el interior de la directiva cerrada <HTML>...</HTML>. Esto indica al navegador que estamos empleando que todo lo que se encuentra entre estas dos marcas, es cdigo HTML y que debe ser int erpretado como tal. La directiva <HTML>...</HTML> contiene en su interior 2 bloques: <HEAD>...</HEAD> que es la directiva que seala la cabecera del documento y, <BODY>...</BODY>, que contiene el cuerpo del documento o para entendernos lo que visualizamos en el navegador con el formato correspondiente. En resumen un fichero de HTML sera de la forma:
<HTML> <HEAD> ... </HEAD> <BODY> ... </BODY> </HTML>

<HEAD> CABECERA DEL DOCUMENTO

Esta cabecera contiene esencialmente informacin del documento. Entre esta directiva podremos poner otras directivas que acontinuacin explico:
y

<BASE>

Se emplea para especificar un directorio de trabajo (o base) distinto del que actualmente estemos trabajando. Cuando un navegador lee un documento, toma como direccin de este documento con una direccin en el que se halla (http://www.miserver.es/directori o/index.html), como refencia base para el resto del documento. Si ahora ussemos una imagene en nuestro documento (ver seccin IMAGENES) con la directiva: <IMG HREF=dibujos/indice.gif> el navegador buscar el dibujo en http://www.miserver.es/directorio/dibujos/indice.gif (ya que para el navegador el directorio base es directorio y la refencia de la imagen, el navegador la hece sobre esta referencia). Suponemos ahora que el documento index.html lo modificamos, y para comprobar que funciona (tras haberlo modificado), lo colocamos en la direccin: http://www.miserver.es/pruebas/index.html.

La imagen que tenemos referenciada como <IMG HREF=dibujos/indice.gif>, ahora ser buscada en http://www.miserver.es/pruebas/dibujos/indice.gif, directorio que seguramente no exista y por lo tanto no veremos la imagen. Aqu es donde entra una de las aplicaciones de la directica <BASE>. Si en el ancabezado indicamos cul es el directorio base o raz de nuestro documento, el resto de referencias a imgenes las podremos seguir manteniendo, de forma que si ponemos:
<HTML> <HEAD> <BASE HREF= http://www.miserver.es/directorio/> ...

podemos cambiar el documento HTML que queramos de directorio, que las referencias de las imgenes las seguir manteniendo.

<META>

Esta es otra directiva que puede incluirse entre las directivas <HEAD>...</HEAD>. Se usa para incluir metainformacin no definida en las restantes directivas HTML. Una aplicacin mucho ms prctica es la construccin de pginas dinmicas con Netsacpe, lo que se ver ms adelante. El siguiente ejemplo, tras cargar el documento, carga otro al cabo de 10 segundos, si el usuario no sigue antes de este prodo de tiempo ningn otro enlace:
<HTML> <HEAD> <META http -equiv=REFRESH content=10;URL=http://www.miserver.es/directorio/siguiente.html > ...

... <META> es una directiva obligatoria en ningn documento HTML, sino que es opcional totalmente.
TRUCO: Podemos hacer con esta directiva, que al finaliz ar la carga de la pgina, en lugar de hacer que tras un tiempo salte a otra, suene una cacnin, en formato .au (Real Audio, reconocido por Netscape).

<TITLE>

Es otra directiva de la cabecera del documento y en este caso es una directiva cerrada a diferencia de las anteriores que eran abierta (<TITLE>...</TITLE>). Esta directiva nos da la opcin de darle un ttulo al documento, y mejor an, permite visualizarlo en el visualizador de la barra del navegador:
<HTML> <HEAD> <TITLE> Documento de Jav ier Gorriz </TITLE> </HEAD> ...

Aunque en principio no se imponen lmites a la longitud de un ttulo, conviene ser razonable y no usar ni nombre largos nombre muy pequeos. En este tipo de directiva, no se puede emplear ninguna directiva que modifique el tipo de texto, es decir, no podem os ponerlo en negrilla, ni subrayado, ni en cursiva, ni cambiarle el color, simplemente no debemos limitar a poner el texto que deseemos. Ninguna modificacin surtir efecto, y por el contrario sern tambin parte del ttulo las distintas directivas que qu eramos emplear para modificar la apariencia del ttulo. Aunque est directiva a diferencia de las anteriores, no es obligatoria, es conveniente poner ttulo a nuestra pgina ya que podremos identificarla en todo momento sin tener que verla por completo, p ara conocer el contenido de la misma.
TRUCO: En Netscape se pueden intentar efectos de scrolling o texto pasante en el ttulo del mismo, separando las distintas lneas con el carcter backspace.

<BODY> CUERPO DEL DOCUMENTO

En el cuerpo del documento se encontrarn todas las directivas HTML as como el texto, las imgenes, sonidos, tablas, listas, etc... Como descripcin grfica, podremos decir que todo lo que aparezca entre las directivas <BODY>...</BODY> ser visualizado de una u otra manera en la pantalla del navegandor. Esta directiva puede alojar en su interior una serie de atributos que suelen hacerla de lo ms interesante en lo que se refiere a la presentacin principal del documento HTML.
y

BACKGROUND="..."

Este atributo define un grfico en formato .jpg o .gif que nos servir de fondo para la pgina de nuestro documento. El grfico que empleemos se pondr en toda el rea de visualizacin del documento, de forma que complete un mosaico en el que repite el motivo que no es otro que la imagen que definimos en esta directiva.

La imagen que nos servir de fondo en nuestra pgina, puede ser puesta con su ruta absoluta de referencia en el servidor, como por ejemplo la ruta absoluta http://www.miservidor.es/fondos/imagen.gif, lo que nos cargara la imagen.gif definida en la ruta de internet http://www.miservidor.es/fondos/, como fondo de nuestra pantalla, o con su ruta relativa como podra ser imagen.gif, que indicara al servidor que dicho imagen GIF, est situada en el mismo directorio del documento que se est cargando en el navegador.
NOTA: En el caso de que nuestro visitante tenga desactivada la opcin de cargar imgenes, el fondo de nuestra pgina no sera cargada, y el fondo que aparecera (en caso de que no lo impidieramos definiendo otro color de fondo), sera de color gris oscuro.

BGCOLOR="..."

Este atributo define el color que aparecer de fondo en nuestra pgina. Por defecto, en el navegado r Netscape, aparecera de color gris oscuro a no ser que se le definiera otro color. Los colores se definiran de dos formas: en formato RGB, o dando el nombre del color deseado en ingls. El formato RGB lo que hace es definir en 3 pares de nmeros hexagesimales, el valor de Rojo (Red), Verde (Green) y Azul (Blue) en cantidad que va desde 0 a 255 (00 -FF en hexagesimal). El conjunto en total nos da un color deternimado que ser el indicativo del que aparecer de fondo en nuestro documento. En el caso de que definamos el color del modo RGB, debemos anteponer una almohadilla (#) de forma que el navegador con esta almohadilla sepa que el siguiente nmero, es un nmero hexagesimal y no una serie de caracteres. Por ejemplo, BGCOLOR="#FF0000" en el atributo <BODY> (<BODY BGCOLOR="#FF0000"> ), nos dar el color de fondo ROJO, el BGCOLOR="#00FF00" el color VERDE y el BGCOLOR="#0000FF" el color AZUL. Existen muchos programas que nos permiten seleccionar el color que deseemos sintener que hacer clculos hexagesimales d el valor RGB del color, por lo que nosotros solo nos debemos de preocupar de elegir el color y colocar el atributo con el valor correspondiente dentro de la directiva <BODY>. La otra forma de definir los valores de los colores (por lo menos en Netscape), es la de otorgar el nombre en Ingles del color que deseemos colocar. Esta opcin tiene el fallo de que no todos los colores estn definidos, y slo los ms bsicos son los definidos. Por ejemplo BGCOLOR="Red", BGCOLOR="Green" y BGCOLOR="Blue", nos dara al igual que antes, colores Rojo, Verde y Azul de fondo de documento

TRUCO: Aunque nuestro visitante tenga predefinido el no cargar las imgenes y por lo tanto no ver nuestro fondo (en caso de que tuvieramos una imagen), si definimos un color al mismo tiempo que definimos una imagen de fondo, si el usuario no ve las imgenes, SI ver el color que predefinamos,permitiendonos definir un color similar al que predomine en el mosaico que genera la imagen que coloc amos de fondo, y dando un efecto similar al que tendra si hubiera cargado la imagen de fondo.

TEXT="..."

Es un atributo de la directiva <BODY>, que nos permite modificar el color del TEXTO general que aparecer en nuestro documento. Es decir, del total del texto que se muestre en la pgina HTML que hagamos. Al igual que el color de fondo podemos definirlo del modo anterior: o bien en RGB o bien con el nombre en ingles del color. Por defecto, si no definimos el color del texto, se mostrar el color NEGRO (por defecto).

LINK="..."

Este atributo define el color de cualquier enlace que aparezca en el documento. Se define al igual que los atributos anteriores. Por defecto el color ser AZUL.

VLINK="..."

Este atributo define el color de cualquier enlace ya visitado que aparezca en el documento. Se define al igual que los atributos anteriores. Por defecto el color ser VIOLETA.

ALINK="..."

Este atributo define el color de cualquier enlace sobre el que mantengamos pulsado el ratn sin soltar, es decir manteniendo sobre el enlace el ratn con el botn pulsado (lo que hara que se habriera ese enlace en otra ventana). Se define al igual que los atributos anteriores. Por defecto el color ser ROJO

EJEMPLOS ESTRUCTURA

<HTML> <HEAD> <TITLE> Estructura mnima de un documento HTML </TITLE> </HEAD> <BODY>

</BODY> </HTML>

Etiquetas basicas de cabeceras <h1> Gigantes </h1> <h2> Grande </h1> <h3> Mediana </h1> <h4> Regular </h1> <h5> Pequea </h1> <h5> Minima </h1>

Esto se usa para las cabeceras dentro del BODY= body Ojo: dentro de una misma etiqueta puedes trabajar cualquier atributo

Lnea Horizontal <hr> Con esta etiqueta se realizara lneas horizontales. Atributos caractersticas lnea horizontal De Ancho <width> ancho de la lnea Ejemplo <hr width= 50% > Color de las Lineas <color= red > Ejemplo: <hr width= 50% color= red > Tambien pudiese usarse los cdigos hexadecimales.

Saltos en lnea (enter) <br> Formato de Texto <b> <i> <u> <em> <big> <small> <tt> <strong> Negrita Cursiva Subrayada Enfatizado Grande Pequeo maquina escribir Fuertes

Ejemplo yo quiero que este nombre Vctor <u> <i> <b> victor </u> </i> </b>

Fuentes <font face= arial > texto </font> Color de la fuente <font color= red > texto </font> Tamao de la fuente <font size= 5 > texto </font> Alineamientos <div align= center > texto </div> justify right left COLOR DE FONDO <body bgcolor= blue >

IMAGEN DE FONDO <body background= nombre de la imagen seguido de. Y la extensin > Ojo: tener en cuenta las medidas de la pgina web de 800 a 900 pixeles de ancho 1200 pixeles de alto Atributos de imagen de fondo Con este atributo podemos colocar fija la imagen de fondo de manera que al mover la pagina para leer la imagen de fondo queda esttica o fija <bg properties= fixed >

Imagen fija

Muy pendientes con las compatibilidades de los navegadores y los cdigos html. Insertar Imagen <img src= nombre de la imagen >

Atributos de imagen al insertar Ancho y alto width= 100 ancho height= 100 alto

También podría gustarte