ELABORACION DE PAGINAS WEB CON LENGUAJES DE MARCAS
2.1 Lenguaje HTML. Etiquetas y atributos.
Este lenguaje es un lenguaje de marcas que se encarga de crear paginas web por medio de codigo de etiquetas y atributos compilados que son interpretados por los navegadores.
2.1.1 Versiones de HTML.
Existen muchas versiones como el HTML que son interpretados por navegadores. Con el !DOCTYPE le indicaremos que tipo de documento es el que estamos escribiendo para la pagina web.
Existen estandares HTML como son el 2.0, 3.2, 4.0, 4.01 que actualmente es el que se utiliza y el la version 5 que saldra dentro poco y que es el sustituto del 4.01.
Las versiones son las siguientes:
HTML 4.01 Strict es el estricto y se usa en el estandar 4.01.
HTML 4.01 Transitional que es la combinacion del todos los HTML y esta preparado para el cambio al strict.
HTML 4.01 Frameset que se utiliza para los frames y esta obsoleto.
2.1.2 Normas de HTML.
Cuando usamos el lenguaje HTML tenemos que seguir una serie de normas o reglas de sintaxis para el codigo del documento para el navegador pueda interpretarlo.
Los documentos HTML esta compuesto por etiquetas y atributos que componen la estructura del documento y estan organizados.
Las etiquetas estan estan anidadas entre <> y da lo mismo si estan en mayusculas o minusculas es igual.
Lo mismo ocurre con los atributos no son sensibles a mayusculas o minusculas y estan anidadas dentro de las etiquetas.
En los valores de los atributos no ocurre lo mismo porque si has guardado un objeto con el nombre, y si quieres que la web lo muestre, el nombre tiene que ser igual cuando lo introduzcas en en codigo de la pagina o de lo contrario no te saldra el archivo en la pagina.
Las etiquetas no deben contener espacios.
Los valores deben estar entre comillas.
Las etiquetas despues de que hayas introducido el valor deben cerrace.
Las etiquetas pueden anirdarse dentro de otras etiquetas.
Es recomendable que las etiquetas este en minusculas tanto para el HTML, XHTML y para las CCS.
2.1.3 Estructura basica de un documento HTML.
El codigo del documento HTML debe de contener el estandar que se dara en el codigo en este caso <html></html> y tambien debe contener una cabecera <head></head> y un cuerpo <body></body>.
El titulo es el titulo del documento que se mostrara en la pestaña del navegador.<title></title>
En la cabecera esta el nombre del titulo de la pagina que se muestra en la pantalla.
El cuerpo es lo que se va a mostrar el contenido de la pagina.
Y por supuesto con la extension .html o .htm.
Los DTD son los tipos de documentos que se encargan de definir la estructuracion de los documentos HTML. Tambien se encarga de identificar si la sintaxis esta correcta. Se demuestran a continuacion algunas declaraciones.
<!DOCTYPE HTML PUBLIC "-//IETF//DTD HTML//EN"> define el documento HTML como HTML 2.0. o 2.0 por lo que debe ser compatible con el navegador y no soporta tablas ni marcos y definida por el IETF.
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 3.2 Final//EN">define el documento como HTML 3.2 y algunos de los navegadores pero para las CSS son limitadas.
El HTML 4 no son recomendables para ser compatibles con las hojas de estilo.
Existen tres DTD:
Transitional es el tipo de DTD que incluye elementos obsoletos del HTML 4 Strict y esta preparado para cambiar al HTML 4 estricto.
Strict es el tipo de DTD que se encarga de indicar que el codigo HTML 4.01 o XHTML es estricto y no incluye etiquetas o atributos que no se utilizan. Recomendado por w3c ya que es compatible con las hojas de estilo e interpretado por los navegadores.
Frameset es el tipo de DTD que se utiliza cuando hay frames en el documento.
2.1.4 Formateo de texto
Son etiquetas que se encargan aplicar los formatos de cabecera, texto, negritas, lineas etc.
Los de cabecera son: del <h6></6> al <h1></h1>.
Los de texto son: <b></b> para la negrita, <i></i> para cursiva, <tt></tt> para letra de maquina de escribir, <sup></sup> para superindice, <sub></sub> para subindice, <big></big> para aumentar la el tamaño del tipo de letra, <small></small> para disminuir el tamaño del tipo de letra.
Los de parrafo son: <p></p> para insertar una linea en blanco despues de un parrafo, <pre></pre> para texto preformateado y con el atributo width para indicar el maximo de caracteres en una linea, <div></div> para dividir una pagina, y con el atributo align para indicar la alineacion de la pagina a dividir, <address></address> para insertar direcciones de correo, <blockquote></blockquote> para justificar el texto que esta entre las etiquetas, y por ultimo <span></span> para tambien para dividir pero no admite atributos de alineacion y se utiliza mucho para las hojas de estilos.
Otras etiquetas como <hr>sirve tanto para insertar una linea horizontal como para cerrar la misma y con el atributo size le indicamos el tamaño de la misma, <br> sirve para saltar un linea a otra, <!--texto del comenario--> sirve para insertar comentarios, el atributo align="left sirve para alinear el texto a la izquierda, align="center" sirve para alinear el texto al centro y align="right" sirve para alinear el texto a la derecha.
Para poner color al texto lo hacemos con la etiqueta <font color="#el codigo del color"></font>
Para poner el tamaño al texto <font size="el numero entre 1 y 7"
Para poner una fuente al texto <font face="nombre de la fuente"></font>.
Para poner color al todo el texto de la pagina <body text="#codigo del color">.
Para poner un color de fondo a la pagina <body bgcolor="#codigo del color">.
Para poner color a los enlaces de la pagina <body link="#codigo del color">.
Para poner el color a los enlaces de la pagina visitada <body vlink="#codigo del color">.
Para poner el color a los enlaces activos de la pagina <body alink="#codigo del color">.
Para insertar listas numeradas <ol> abajo <li> y cerrando con </ol>.
Para insertar listas no numeradas <ul> abajo <li> y se cierra con </ul>.
Para insertar lista de definiciones <dl> abajo <dt> del termino y mas abajo la definicion <dd> y se cierra con </dl>.
2.1.5 Enlaces, links o hipervinculos
Permite insertar enlaces dentro de una pagina para acceder a otra pagina, con la etiqueta <a href="el nombre del fichero de la pagina con su extension">y el nombre del enlace de la pagina a la que quieres acceder y cierras con </a>. Puedes meter direcciones de los buscadores o de direcciones de correo, o parrafos.
2.1.6 Imagenes
Permite insertar imagenes dentro de la pagina con la etiqueta <img src="el nombre de la imagen con su extension">. Los formatos mas utilizados son gif, png y los jpeg y cargan mas rapido, y si la imagen esta dentro de un directorio pones la ruta de la imagen que quieres que se muestre. Tambien se puede crear un enlace a partir de una imagen con la siguiente sintaxis <a href="el nombre del fichero de la pagina">seguido de <img src="el nombre de la imagen con su extension">y cierras con </a>.
Los atributos de imagen son: el ancho de la imagen (width="ancho"), la altura de la imagen (height="alto"), la alineacion (align="alineacion"), (alt="comentario"o "title") si la imegen no carga o si quieres que al pasar el raton visualizes texto, (border="tamaño") para el tamaño de los bordes de la imagen.
2.1.7 Tablas
Permite insertar tablas dentro de una pagina web con la etiqueta <table> y cierras con </table>.
Ahora para insertar la estructura de la tabla por ejemplo una fila podemos hacerlo con la etiqueta <tr> y cerramos con </tr>, para insertar una columna podemos hacerlo con la etiqueta <td> cerrada con </td>. Tambien podemos insertar titulos de las columnas con la etiqueta <th></th>.
Los atributos de las tablas son los siguientes:
Para que la tablas tenga un color de fondo lo haremos con el atributo (bgcolor="#el codigo del color").
Para ponerle color a los bordes de la tabla lo haremos con el atributo (bordercolor="#codigo del color").
Para que el texto de la tabla se ajuste a la celda lo hacemos con el atributo (valign="top, bottom, middle").
Para alinear el texto de la tabla con el atributo (align=left, center, right").
Para insertar una imagen de fondo de fondo mediante un enlace (background="el nombre o ruta de la imagen").
Permite que entre la celda y el contenido haya espacio (cellpadding="numero").
Para que el border de la tabla tenga espacio (cellspacing="numero").
Indica la altura de la tabla en pixeles o porcentaje (height="numero").
Indica la anchura de la tabla en pixeles o porcentaje (width="numero").
Los atributos COLSPAN y ROWSPAN, combinacion de celdas.
Para crear varias filas o columnas deben estar delimitadas por las etiquetas <th> o <td>.
El atributo rowspan sirve combinar varias filas que componen la tabla, por ejemplo rowspan="valor"
El atributo colspan sirve para combinar varias columnas que componen la tabla, por ejemplo colspan="valor".
2.1.8 Frames
Los frames son marcos o ventanas que sirven para dividir un documento zonas, es decir que dentro de una pagina web se abran otros documentos html en la misma pagina por ejemplo publicidad dentro de la pagina o partes de un documeto html de otras paginas web llamadas iframes y sustituta de los frameset. Estas se crean con la etiqueta <frameset> y deben colocarse antes del cuerpo de la pagina, es decir del <body>. Actualmente no se utilizan.
Los atributos son:
El src="enlace o abrir" que sirve para abrir un marco.
El name="nombre" que sirve para darle un nombre al frame.
El frameborder="border" sirve para indicar el tamaño del grosor del borde del marco.
El scrolling="yes | no" sirve para mostrar la barra de desplazamiento.
El bordercolor="#codigodelcolor" sirve para darle color al borde del marco.
El norezise sirve para que no se pueda cambiar el tamaño.
El height="alto" sirve para indicar el alto del marco.
El width="ancho" sirve para indicar el ancho del marco.
Podemos lograr que los iframes no esten a la vista y esto se consigue con los atributos frameborder=0 para que los los elementos no sean distintos a la pagina, background-color para ponerle el color del iframes sea distinto al de la pagina, y tambien scrolling=no para ocultar la barra de desplazamiento.
2.1.9 Formularios
Los formularios sirven para introducir datos que pueden ser personales, encuesta mediante cajas de texto y botones de funcion, es decir que cumplen una determinada funcion cuando lo cliques.
Para introducir un formulario en una pagina web se deben indicar como <form> y cerrarse con </form>
Dentro de esta etiqueta se debe especificar los atributos como por ejemplo el atributo action="acccion a realizar" que sirve para realizar una accion en el formulario como por ejemplo meter una direccion de correo, tambien el atributo method="post o get" que utiliza para el envio del formulario pero el mas utilizado es el post y por ultimo el enctype="text/plain" que sirve para indicarle como se ira la informacion del formulario a la hora de enviarlo como texto plano.
Con la etiqueta <input> le indicaremos los controles del formulario y con el atributo type el tipo de control de formulario que pueden ser de text(texto), password(contraseña), radio(boton de seleccion), checkbox(caja de seleccion), submit(boton de envio), image(seleccion de imagen), reset(boton de reseteo), file y hidden(boton de seleccion de archivos ocultos). Tambien dentro de la etiqueta input se puede añadir el nombre del control(name) que se utiliza siempre y align que sirve para alinear el texto.
Las cajas de texto(text) se introducen los datos del usuario y que son enviados al servidor. El atributo text tiene otros atributos como size="20" que determina la anchura de la caja, y que por defecto es 20.
El atributo maxlenght="numero" que indica si queremos limitar la cantidad de introduccion de caracteres dentro de la caja de texto y si no se pone entonces no hay limitacion.
Con el atributo value="texto o numero" le indicaremos el texto que aparecera por defecto en la caja de texto.
Y con el atributo title="texto" indica un globito explicativo de lo que introduciras en la caja de texto cuando pases el cursor encima.
Cajas de texto(password) para claves que sirve para introducir informacion oculta como por ejemplo una clave.
Botones de seleccion o eleccion(radio) es un control de seleccion que se elige de manera opcional y solo se puede elegir a una sola opcion. Pueden estar apagado(off) o encendido(on) y con el atributo checked name se determina si esta en funcionamiento.
Cajas de seleccion(checkbox) es lo mismo que lo anterior pero de forma cuadrada, tambien es independiente es decir que el nombre(name) es distinto a los demas puede cambiar.
Botones de envio(submit) sirve para enviar la informacion que hayas introducido en el formulario, tambien permite introducir varios del mismo.
Boton de borrado(reset) control que sirve para borrar datos que hayas introducido en el formulario y escribir nuevos datos.
Boton generico(button) control que sirve para una determinada funcion que eligas, las acciones cuando es pulsado solo se pueden indicar con lenguajes de programacion como el script, javascript o vbscript y no con html estandar. Se puede introducir el atributo onclick="codigo script" como por ejemplo onclick="window.close();"> que sirve para cerrar la ventana actual del formulario cuando se pulse, onclick="window.location.replace ('formulario.html o la ruta');"> que sirve para reemplazar o abrir una ventana nueva dentro de una ventana actual, y onclick="window.open ('formulario.html o la ruta');"> que sirve para abrir una nueva ventana.
Con la etiqueta <select></select> que se utiliza para escoger una opcion mediante una lista desplegable.
como por ejemplo <select name="nombre de los campos de la lista desplegable" y para introducir la opcion de la lista desplegable lo hacemos con la etiqueta <option> que a su vez permite introducir el atributo value y el atributo selected y que ademas en funcion de que hayas introducido las opciones determina la anchura de la lista desplegable dependiendo del numero de caracteres introducidos.
Los DTD son los tipos de documentos que se encargan de definir la estructuracion de los documentos HTML. Tambien se encarga de identificar si la sintaxis esta correcta. Se demuestran a continuacion algunas declaraciones.
<!DOCTYPE HTML PUBLIC "-//IETF//DTD HTML//EN"> define el documento HTML como HTML 2.0. o 2.0 por lo que debe ser compatible con el navegador y no soporta tablas ni marcos y definida por el IETF.
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 3.2 Final//EN">define el documento como HTML 3.2 y algunos de los navegadores pero para las CSS son limitadas.
El HTML 4 no son recomendables para ser compatibles con las hojas de estilo.
Existen tres DTD:
Transitional es el tipo de DTD que incluye elementos obsoletos del HTML 4 Strict y esta preparado para cambiar al HTML 4 estricto.
Strict es el tipo de DTD que se encarga de indicar que el codigo HTML 4.01 o XHTML es estricto y no incluye etiquetas o atributos que no se utilizan. Recomendado por w3c ya que es compatible con las hojas de estilo e interpretado por los navegadores.
Frameset es el tipo de DTD que se utiliza cuando hay frames en el documento.
2.1.4 Formateo de texto
Son etiquetas que se encargan aplicar los formatos de cabecera, texto, negritas, lineas etc.
Los de cabecera son: del <h6></6> al <h1></h1>.
Los de texto son: <b></b> para la negrita, <i></i> para cursiva, <tt></tt> para letra de maquina de escribir, <sup></sup> para superindice, <sub></sub> para subindice, <big></big> para aumentar la el tamaño del tipo de letra, <small></small> para disminuir el tamaño del tipo de letra.
Los de parrafo son: <p></p> para insertar una linea en blanco despues de un parrafo, <pre></pre> para texto preformateado y con el atributo width para indicar el maximo de caracteres en una linea, <div></div> para dividir una pagina, y con el atributo align para indicar la alineacion de la pagina a dividir, <address></address> para insertar direcciones de correo, <blockquote></blockquote> para justificar el texto que esta entre las etiquetas, y por ultimo <span></span> para tambien para dividir pero no admite atributos de alineacion y se utiliza mucho para las hojas de estilos.
Otras etiquetas como <hr>sirve tanto para insertar una linea horizontal como para cerrar la misma y con el atributo size le indicamos el tamaño de la misma, <br> sirve para saltar un linea a otra, <!--texto del comenario--> sirve para insertar comentarios, el atributo align="left sirve para alinear el texto a la izquierda, align="center" sirve para alinear el texto al centro y align="right" sirve para alinear el texto a la derecha.
Para poner color al texto lo hacemos con la etiqueta <font color="#el codigo del color"></font>
Para poner el tamaño al texto <font size="el numero entre 1 y 7"
Para poner una fuente al texto <font face="nombre de la fuente"></font>.
Para poner color al todo el texto de la pagina <body text="#codigo del color">.
Para poner un color de fondo a la pagina <body bgcolor="#codigo del color">.
Para poner color a los enlaces de la pagina <body link="#codigo del color">.
Para poner el color a los enlaces de la pagina visitada <body vlink="#codigo del color">.
Para poner el color a los enlaces activos de la pagina <body alink="#codigo del color">.
Para insertar listas numeradas <ol> abajo <li> y cerrando con </ol>.
Para insertar listas no numeradas <ul> abajo <li> y se cierra con </ul>.
Para insertar lista de definiciones <dl> abajo <dt> del termino y mas abajo la definicion <dd> y se cierra con </dl>.
2.1.5 Enlaces, links o hipervinculos
Permite insertar enlaces dentro de una pagina para acceder a otra pagina, con la etiqueta <a href="el nombre del fichero de la pagina con su extension">y el nombre del enlace de la pagina a la que quieres acceder y cierras con </a>. Puedes meter direcciones de los buscadores o de direcciones de correo, o parrafos.
2.1.6 Imagenes
Permite insertar imagenes dentro de la pagina con la etiqueta <img src="el nombre de la imagen con su extension">. Los formatos mas utilizados son gif, png y los jpeg y cargan mas rapido, y si la imagen esta dentro de un directorio pones la ruta de la imagen que quieres que se muestre. Tambien se puede crear un enlace a partir de una imagen con la siguiente sintaxis <a href="el nombre del fichero de la pagina">seguido de <img src="el nombre de la imagen con su extension">y cierras con </a>.
Los atributos de imagen son: el ancho de la imagen (width="ancho"), la altura de la imagen (height="alto"), la alineacion (align="alineacion"), (alt="comentario"o "title") si la imegen no carga o si quieres que al pasar el raton visualizes texto, (border="tamaño") para el tamaño de los bordes de la imagen.
2.1.7 Tablas
Permite insertar tablas dentro de una pagina web con la etiqueta <table> y cierras con </table>.
Ahora para insertar la estructura de la tabla por ejemplo una fila podemos hacerlo con la etiqueta <tr> y cerramos con </tr>, para insertar una columna podemos hacerlo con la etiqueta <td> cerrada con </td>. Tambien podemos insertar titulos de las columnas con la etiqueta <th></th>.
Los atributos de las tablas son los siguientes:
Para que la tablas tenga un color de fondo lo haremos con el atributo (bgcolor="#el codigo del color").
Para ponerle color a los bordes de la tabla lo haremos con el atributo (bordercolor="#codigo del color").
Para que el texto de la tabla se ajuste a la celda lo hacemos con el atributo (valign="top, bottom, middle").
Para alinear el texto de la tabla con el atributo (align=left, center, right").
Para insertar una imagen de fondo de fondo mediante un enlace (background="el nombre o ruta de la imagen").
Permite que entre la celda y el contenido haya espacio (cellpadding="numero").
Para que el border de la tabla tenga espacio (cellspacing="numero").
Indica la altura de la tabla en pixeles o porcentaje (height="numero").
Indica la anchura de la tabla en pixeles o porcentaje (width="numero").
Los atributos COLSPAN y ROWSPAN, combinacion de celdas.
Para crear varias filas o columnas deben estar delimitadas por las etiquetas <th> o <td>.
El atributo rowspan sirve combinar varias filas que componen la tabla, por ejemplo rowspan="valor"
El atributo colspan sirve para combinar varias columnas que componen la tabla, por ejemplo colspan="valor".
2.1.8 Frames
Los frames son marcos o ventanas que sirven para dividir un documento zonas, es decir que dentro de una pagina web se abran otros documentos html en la misma pagina por ejemplo publicidad dentro de la pagina o partes de un documeto html de otras paginas web llamadas iframes y sustituta de los frameset. Estas se crean con la etiqueta <frameset> y deben colocarse antes del cuerpo de la pagina, es decir del <body>. Actualmente no se utilizan.
Los atributos son:
El src="enlace o abrir" que sirve para abrir un marco.
El name="nombre" que sirve para darle un nombre al frame.
El frameborder="border" sirve para indicar el tamaño del grosor del borde del marco.
El scrolling="yes | no" sirve para mostrar la barra de desplazamiento.
El bordercolor="#codigodelcolor" sirve para darle color al borde del marco.
El norezise sirve para que no se pueda cambiar el tamaño.
El height="alto" sirve para indicar el alto del marco.
El width="ancho" sirve para indicar el ancho del marco.
Podemos lograr que los iframes no esten a la vista y esto se consigue con los atributos frameborder=0 para que los los elementos no sean distintos a la pagina, background-color para ponerle el color del iframes sea distinto al de la pagina, y tambien scrolling=no para ocultar la barra de desplazamiento.
2.1.9 Formularios
Los formularios sirven para introducir datos que pueden ser personales, encuesta mediante cajas de texto y botones de funcion, es decir que cumplen una determinada funcion cuando lo cliques.
Para introducir un formulario en una pagina web se deben indicar como <form> y cerrarse con </form>
Dentro de esta etiqueta se debe especificar los atributos como por ejemplo el atributo action="acccion a realizar" que sirve para realizar una accion en el formulario como por ejemplo meter una direccion de correo, tambien el atributo method="post o get" que utiliza para el envio del formulario pero el mas utilizado es el post y por ultimo el enctype="text/plain" que sirve para indicarle como se ira la informacion del formulario a la hora de enviarlo como texto plano.
Con la etiqueta <input> le indicaremos los controles del formulario y con el atributo type el tipo de control de formulario que pueden ser de text(texto), password(contraseña), radio(boton de seleccion), checkbox(caja de seleccion), submit(boton de envio), image(seleccion de imagen), reset(boton de reseteo), file y hidden(boton de seleccion de archivos ocultos). Tambien dentro de la etiqueta input se puede añadir el nombre del control(name) que se utiliza siempre y align que sirve para alinear el texto.
Las cajas de texto(text) se introducen los datos del usuario y que son enviados al servidor. El atributo text tiene otros atributos como size="20" que determina la anchura de la caja, y que por defecto es 20.
El atributo maxlenght="numero" que indica si queremos limitar la cantidad de introduccion de caracteres dentro de la caja de texto y si no se pone entonces no hay limitacion.
Con el atributo value="texto o numero" le indicaremos el texto que aparecera por defecto en la caja de texto.
Y con el atributo title="texto" indica un globito explicativo de lo que introduciras en la caja de texto cuando pases el cursor encima.
Cajas de texto(password) para claves que sirve para introducir informacion oculta como por ejemplo una clave.
Botones de seleccion o eleccion(radio) es un control de seleccion que se elige de manera opcional y solo se puede elegir a una sola opcion. Pueden estar apagado(off) o encendido(on) y con el atributo checked name se determina si esta en funcionamiento.
Cajas de seleccion(checkbox) es lo mismo que lo anterior pero de forma cuadrada, tambien es independiente es decir que el nombre(name) es distinto a los demas puede cambiar.
Botones de envio(submit) sirve para enviar la informacion que hayas introducido en el formulario, tambien permite introducir varios del mismo.
Boton de borrado(reset) control que sirve para borrar datos que hayas introducido en el formulario y escribir nuevos datos.
Boton generico(button) control que sirve para una determinada funcion que eligas, las acciones cuando es pulsado solo se pueden indicar con lenguajes de programacion como el script, javascript o vbscript y no con html estandar. Se puede introducir el atributo onclick="codigo script" como por ejemplo onclick="window.close();"> que sirve para cerrar la ventana actual del formulario cuando se pulse, onclick="window.location.replace ('formulario.html o la ruta');"> que sirve para reemplazar o abrir una ventana nueva dentro de una ventana actual, y onclick="window.open ('formulario.html o la ruta');"> que sirve para abrir una nueva ventana.
Con la etiqueta <select></select> que se utiliza para escoger una opcion mediante una lista desplegable.
como por ejemplo <select name="nombre de los campos de la lista desplegable" y para introducir la opcion de la lista desplegable lo hacemos con la etiqueta <option> que a su vez permite introducir el atributo value y el atributo selected y que ademas en funcion de que hayas introducido las opciones determina la anchura de la lista desplegable dependiendo del numero de caracteres introducidos.
