TEMA P1. CURSO BÁSICO DE PROGRAMACIÓN EN LENGUAJE HTML HTML es un acrónimo de HiperText Markup Language que, traducido al español, quiere decir algo así como lenguaje de definición por marcas para hipertexto, es decir, HTML es un lenguaje que permite definir documentos hipertexto a base de ciertas etiquetas que marcan partes de un texto cualquiera dándoles una estructura y/o jerarquía. Para crear un documento hipertexto para la WWW con este lenguaje sólo debemos añadir las etiquetas adecuadas al texto que contiene la información. Un documento hipertexto es aquel que, además de incluir texto e ilustraciones, permite el enlace con otros documentos hipertexto que desarrollan o hacen referencia al mismo tema. 1.1. Sintaxis de las etiquetas HTML HTML es un lenguaje basado en etiquetas. Estas etiquetas aportan al texto información sobre la forma en que será mostrado. Éstas deben seguir unas reglas determinadas, así, se entiende por etiqueta cualquier texto incluido entre los signos: "<" y ">". La primera etiqueta que vamos a aprender es aquella por la que deben empezar todos los documentos que queramos sean considerados HTML; esta es: <HTML> Inicio de documento hipertexto. La segunda etiqueta que aprenderemos será precisamente la última que se debe incluir en un documento HTML indicando el final del documento: </HTML> Fin de documento hipertexto. Como se ve, esta etiqueta es igual a la anterior pero precedida del signo "/", esta será la tónica general en HTML: casi todas las etiquetas tienen la estructura: <etiqueta>... </etiqueta>, "marcando" el texto incluido entre ellas. En las etiquetas HTML no afecta el uso de mayúsculas o minúsculas, es indiferente el uso que se haga de ellas. Por otra parte, si la etiqueta (texto introducido entre los signos "<" y ">") no existe será ignorada (Esto permite que cada visualizador use etiquetas propias y que visualizadores antiguos permitan ver documentos HTML de versiones posteriores). Además del inicio y fin de documento, cualquier documento HTML se divide en dos partes fundamentales: la cabecera y el cuerpo, separadas por las etiquetas: <HEAD> Inicio de la cabecera Dentro de la cabecera se incluye el título del documento marcado por las etiquetas: <TITLE> Inicio del título </TITLE> Fin del título </HEAD> Fin de la cabecera
<BODY> Inicio del cuerpo. Junto con la etiqueta pueden aparecer ciertos atributos, como: BACKGROUND="URL" para seleccionar la imagen indicada como fondo de la página. BGCOLOR="#rrggbb" para seleccionar el color de fondo en formato RGB 24 bits. Existen unos colores predefinidos: red, blue, navy, green, olive, yellow, magenta, purple, cyan, brown, black, gray, teal, white,.. TEXT="#rrggbb" para seleccionar el color para el texto LINK="#rrggbb" para seleccionar el color para el texto que da acceso a un hiperenlace ALINK="#rrggbb" para seleccionar el color para el texto que da acceso a un hiperenlace que se está visitando VLINK="#rrggbb" para seleccionar el color para el texto que da acceso a un hiperenlace visitado Estos se incluyen a continuación de "<BODY" y antes de ">" Dentro del cuerpo se incluye el "grueso" del documento, incluyendo el texto, las imágenes, los enlaces, etc. </BODY> Fin del cuerpo De esta forma queda definida la estructura básica de cualquier documento HTML como sigue: <HTML> <HEAD> <TITLE>... </TITLE> </HEAD> <BODY> </BODY> </HTML> En el cuerpo de un documento HTML, el texto que se incluye carece por completo de formato, es decir, no tienen importancia los avances de línea y/o retornos de carro que incluya, sino que será el visualizador del usuario el que muestre el texto de la forma adecuada en función de los gustos del propio usuario final en cuanto a tamaño y tipo de letra, tamaño de la ventana de visualización, etc. 1.2. Etiquetas HTML de estilo del texto Los estilos son aquellos que determinan exactamente como se presentará el texto al usuario (por ejemplo negrita). De todos los estilos existentes en HTML, los más usuales son: <B> </B> Negrita <I> </I> Cursiva <U> </U> Subrayado
La etiqueta <FONT></FONT> nos permite variar el tamaño y color de un texto determinado con los siguientes atributos: FACE= tipo de letra SIZE= valor COLOR= codigo de color 1.3. Páginas web con FRAMES O MARCOS Los frames es una técnica para subdividir la pantalla del visor en diferentes ventanas. Cada una de estas ventanas se podrá manipular por separado, permitiéndonos mostrar en cada una de ellas una página web diferente. Esto es muy útil para, por ejemplo, mostrar permanentemente en una ventana los diferentes contenidos de nuestra página, y en otra ventana mostrar el contenido seleccionado. Para definir las diferentes subventanas o frames se utilizan las etiquetas <FRAMESET> </FRAMESET> y <FRAME>. La etiqueta <FRAMESET> indica como se va a dividir la ventana principal. Pueden incluirse varias etiquetas <FRAMESET> anidadas con el objeto de subdividir una subdivisión. Los parámetros de <FRAMESET> son ROWS y COLS en función de si la división de la pantalla se realiza por filas (rows) o columnas (cols). Los parámetros rows y cols se acompañan de un grupo de números que indican en puntos o en porcentaje el tamaño de cada una de las subventanas. En caso de utilizar rows los tamaños de las subventanas se entienden indicados de arriba a abajo, es decir, el primer valor será el asignado a la ventana superior, el segundo a la ventana inmediatamente inferior, etc... En el caso de cols los tamaños se aplican de izquierda a derecha. Por ejemplo: <FRAMESET ROWS="25%,50%,25%"> crea tres subventanas horizontales, la primera ocupará un 20% de la ventana principal, la segunda un 50% y la tercera un 25%. <FRAMESET COLS="120,*,100"> crea tres subventanas verticales, la primera y la tercera tendrán un "ancho" fijo de 120 y 100 puntos respectivamente. La segunda ocupará el resto de la ventana principal (*). <FRAMESET COLS= "15%,*" ROWS= 20%,*"> En este caso "anidamos" dos etiquetas. La primera divide la ventana principal en dos subventanas verticales, la primera ocupa un 15% de la ventana principal y la segunda el resto. La segunda etiqueta vuelve a subdividir la primera subventana creada anteriormente, pero esta vez en dos subventanas horizontales, la superior ocupará un 20% de la subventana, y la inferior el resto. La etiqueta <FRAME> indica las propiedades de cada subventana. Es necesario indicar una directiva <FRAME> para cada subventana creada.
Los parámetros de <FRAME> son : NAME = "nombre : Indica el nombre por el que nos referiremos a esa subventana. SRC = "URL" : la ventana mostrará en principio el contenido del documento HTML que se indique. MARGINWIDTH = valor : Indica el margen izquierdo y derecho de la subventana en puntos. MARGINHEIGHT = valor : Indica el margen superior e inferior de la subventana en puntos. SCROLLING = "yes / no / auto : Indica si se aplica una barra de desplazamiento a la subventana en el caso de que la página que se cargue en ella no quepa en los límites de la subventana. el valor "yes" muestra siempre la barra de desplazamiento, "no" no la muestra nunca (la zona de la página que no quepa en la subventana no la veremos), y "auto" la muestra solo en caso de que sea necesario para poder ver la página. NORESIZE : Si se indica este parámetro, el usuario no podrá "redimensionar" las subventanas con el visor. Un usuario que este viendo una pagina con frames puede redimensionarlas seleccionando un borde de la subventana con el cursor y desplazándolo. 1.4. Etiquetas HTML de formato de parrafo En un documento HTML el texto carece de formato, será el tamaño de la ventana del visualizador y el tipo de letra elegido por el usuario el que determine la disposición del texto. No obstante, se dispone de ciertas etiquetas HTML que permiten controlar el aspecto del texto. Las etiquetas de formato más usuales son: (A) ALINEACIÓN <CENTER></CENTER> Alineación centrada del cuerpo <P> Párrafo con alineación: ALIGN=LEFT (izquierda), CENTER (centrado), RIGHT (derecha), JUSTIFY (justificada) <PRE></PRE>Texto preformateado (B) SALTOS DE LÍNEA <BR> Ruptura de línea <HR> Línea horizontal con atributos: SIZE (tamaño vertical), WIDTH (tamaño horizontal), ALIGN (alineamiento), NOSHADE (sin sombra) (C) SANGRADOS <BLOCKQUOTE> </BLOCKQUOTE> Sangrado a la derecha y a la izquierda <DIR> </DIR> Lista de tipo directorio que sirve de sangrado a la izquierda
(D) LISTAS <UL> </UL> Lista sin numerar TYPE=DISK,SQUARE <OL> </OL> Lista numerada TYPE=1,a,A,i,I <LI> </LI> Elemento de la lista <DL></DL> Lista de definiciones <DT> Elemento a definir <DD> Definición 1.5. Etiquetas HTML para crear enlaces Para la creación de enlaces hipertexto disponemos de la pareja de etiquetas: <A...> : Inicio de enlace. </A> : Fin de enlace. Según el tipo de enlace, la etiqueta de enlace (<A...>) puede llevar distintos atributos: (A) ENLACE A UNA DIRECCIÓN DE INTERNET O A UNA PÁGINA WEB DEL SITIO WEB <A HREF="URL"> Que señaliza una referencia a la dirección URL que puede ser: <A HREF= http://www.uv.es"> (dirección de Internet) o <A HREF= index.html"> (página web del sitio web) Un enlace quedará en el documento como: <A HREF=URL">texto</A> donde "texto" aparecerá subrayado en el visualizador para poder pulsar sobre él y saltar. (B) ENLACE A UNA PARTE DE LA PAGINA WEB Consta de dos partes: <A NAME="nombre"> </A> Que da "nombre" a un punto que podrá ser destino de un enlace. <A HREF="URL#nombre">texto</A> Que señaliza el enlace a dicho punto. (C) ENLACE A UN FRAME Al usar Frames, nos encontramos con un problema. Cuando queramos mostrar una página Web debemos indicarle al visor en que subventana queremos que se muestre. Por defecto se mostrará en la ventana donde se encuentre el enlace. Para poder escoger la subventana de destino del Hiperenlace se añade un nuevo parámetro a la directiva <A HREF= > </A>.
Este parámetro se llama TARGET y puede tener los siguientes valores : TARGET = "nombre_ventana" : Muestra el Hiperenlace en la ventana cuyo nombre se indica. TARGET = "_blank" : Abre una nueva copia del visor y muestra el Hiperenlace en ella. TARGET = "_top : Suprime todas las subventanas de la pantalla y muestra el Hiperenlace a pantalla completa. 1.6. Etiquetas HTML para incluir imágenes Para insertar una imagen se usará la etiqueta: <IMG SRC="URL"> La etiquetas pueden incluir además algunos atributos como: ALIGN= : Permite la alineación del texto con la imagen. Puede ser: TOP (arriba), MIDDLE (en el centro), BOTTOM (abajo), LEFT (izquierda), RIGHT (derecha). ALT="texto : Permite incluir un texto alternativo a la imagen que se mostrará en los visualizadores en modo texto y mientras se carga la imagen. BORDER= número (tamaño del border de la imagen) HEIGHT= número (tamaño vertical) y WIDTH= número (tamaño horizontal) HSPACE= número (margen horizontal al texto) y VSPACE= número (margen vertical al texto) 1.7. Etiquetas HTML para crear tablas Una tabla en HTML se encierra entre las etiquetas: <TABLE> y </TABLE>. Tiene los siguientes atributos: BORDER= número : Grosor del borde de la tabla CELLPADDING= número : Espacio entre el border y el contenido de la tabla CELLSPACING= número : Espacio entre las celdas de la tabla WIDTH= número : Anchura de la tabla HEIGHT= número : Altura de la tabla Dentro de la tabla, cada fila queda delimitada por las etiquetas: <TR> y </TR>. Y dentro de cada fila, las celdas (columnas) se delimitan por las etiquetas: <TD> y </TD>, es decir, el contenido de cada celda aparecerá delimitado por estas etiquetas. Las etiquetas usadas en las celdas son: WIDTH= número : Ancho de la columna HEIGHT= número : Altura de la columna VALIGN= número : Alineación vertical de la celda: TOP, MIDDLE, BOTTOM ALIGN= número : Alineación horizontal de la celda: LEFT, CENTER, RIGHT