¡Descarga Introduccion al Lenguaje HTML y más Guías, Proyectos, Investigaciones en PDF de Programación Informática solo en Docsity!
Introducción al HTML
¿Qué es HTML?
HTML es la abreviatura de HyperText Markup Language , y es el lenguaje que todos los programas navegadores usan para presentar información en la World Wide Web (WWW).
Este es un lenguaje muy sencillo que se basa en el uso de etiquetas , consistentes en un texto ASCII encerrado dentro de un par de paréntesis angulares(<..>). El texto incluido dentro de los paréntesis nos dará una explicación de la utilidad de la etiqueta. Así por ejemplo la etiqueta < TABLE > nos permitirá definir una tabla.
Las etiquetas podrán incluir una serie de atributos o parámetros, en su mayoría opcionales, que nos permitirán definir diferentes posibilidades o características de la misma. Estos atributos quedarán definidos por su nombre (que será explicativo de su utilidad) y el valor que toman separados por un signo de igual. En el caso de que el valor que tome el atributo tenga más de una palabra deberá expresarse entre comillas, en caso contrario no será necesario. Así por ejemplo la etiqueta nos permitirá definir una tabla con borde de tamaño 2.
Entre otras cosas, el manejo de estas etiquetas nos permitirá:
Definir la estructura lógica del documento HTML.
Aplicar distintos estilos al texto ( negrita , cursiva , ...). La inclusión de hiperenlaces , que nos permitirán acceder a otros documentos relacionados con el actual.
La inclusión de imágenes y ficheros multimedia (gráficos, vídeo, audio).
¿Qué vamos a necesitar para crear un documento HTML?
Un procesador de textos para escribir y editar el código HTML. Este podrá ser cualquiera que no formatee el texto, ya que el leguaje HTML está basado en el código ASCCI. Si usamos un procesador como el Word, tendremos que guardar el documento como "sólo texto ".
Un navegador Web como el Explorer , Netscape , Mosaic , etc., el cual se encargará del interpretar el código HTML de nuestro documento y mostrárnoslo en todo su esplendor.
La secuencia de trabajo para crear nuestro documento es:
- Con el procesador de texto crearemos el documento HTML y lo guardaremos con el nombre que deseemos, a excepción de la extensión, que deberá ser necesariamente .htm ó .html.
- Para visualizar nuestro documento HTML abriremos el documento con el programa navegador.
Reglas de formato
Todos los navegadores usan unas reglas básicas para poder mostrar una página web con un buen formato:
2
El espacio en blanco es ignorado. Ya que un documento HTML puede estar en cualquier tipo de fuente y además la ventana del navegador puede ser de cualquier tamaño.
Las etiquetas pueden ser escritas en mayúsculas o en minúsculas. En todo caso se aconseja su escritura en mayúsculas para poder distinguirlas del texto normal.
Existe normalmente una etiqueta de inicio y otra de fin. La etiqueta de fin contendrá el mismo texto que la de inicio añadiéndole al principio una barra inclinada /. La etiqueta afectará por tanto a todo lo que esté incluido entre las etiquetas de inicio y fin. No obstante, existen algunas que no necesitan cierre, ya que en estas etiquetas se presupone su final, como por ejemplo; < P > párrafo, < BR > salto de línea ó < IMG > inclusión de una imagen.
Vemos un ejemplo en la Tabla 1.
Instrucción HTML Resultado
< B >Texto en negrita (^) Texto en negrita
< HI >Texto en cursiva Texto en cursiva
< B >< I >Texto en negrita y cursiva< /B >< /I > Texto en negrita y cursiva
Tabla 1
Estructura de un documento HTML
La estructura básica de un documento HTML es la siguiente:
Indica el inicio del documento
Indica el inicio de la cabecera
Inicio del título del documento
Final del título del documento
Final de la cabecera
Inicio del cuerpo del documento
Instrucciones HTML
Final del cuerpo del documento
Final del documento
Ninguno de estos elementos es obligatorio, pudiendo crear documentos HTML sin incluir estas etiquetas de identificación. No obstante es altamente recomendable la construcción de páginas HTML siguiendo esta estructura, para una buena estructuración y legibilidad del código.
Nuestra primera página HTML
4
Localizando un documento hypertexto
(http):Sintaxis:
http://maquina.dominio:puerto/camino/archivo
Ejemplo1: http://www.google.com
En este ejemplo estamos indicando el servicio al que estamos accediendo (http), la máquina y el dominio, tomándose el resto de parámetros por defecto, de forma que accederemos al directorio raíz del servidor y al documento por defecto de ese directorio, en este caso estamos accediendo a la página de portada de Google
Cabecera y cuerpo del documento
HTML
Cabecera
Cabecera del documento HTML ......
En la cabecera de un documento HTML incluiremos las definiciones generales que afecten a todo el documento, como por ejemplo el título de la página que aparecerá en la parte superior de la ventana del navegador.
Las etiquetas y son las que van a delimitar la cabecera de nuestro documento. Todas la etiquetas de la cabecera son opcionales, aunque se recomienda incluir en todos nuestros documentos la etiqueta correspondiente al título del documento.
A continuación vamos a tratar cada uno de los posibles componentes de la cabecera por separado.
Título del documento
< TITLE > .............. < /TITLE >
El título de nuestro documento viene especificado por las etiquetas: <TITLE> y y, como ya hemos mencionado, este título es el que aparecerá en la ventana de nuestro programa
navegador. Lo normal y recomendable es que el título guarde relación con el contenido de nuestro documento, ya que por ejemplo es utilizado por algunos servidores de búsqueda para poder intuir el contenido de nuestro documento. Veamos un ejemplo en el Código fuente 2.
**** Mi primera página Web ****
Código fuente 2
Indicador de refresco del documento
Esta etiqueta sirve para indicar un documento que deberá sustituir al actual transcurrido un número determinado de segundos. Una posible utilidad de esta etiqueta podría ser para visualizar documentos de forma secuencial, de forma que se empieza por un documento y se pasa al siguiente transcurrido un período de tiempo sin necesidad de que la persona que lee el documento realice ninguna acción.
Veamos un ejemplo en el Código fuente 3.
Teal #008080 Teal
Blue #0000FF Azul
Navy #000080 Azul marino
Lime #00FF00 Lima
White #FFFFFF
Purple #800080 Púrpura
Yellow #FFFF00 Amarillo
Olive #808000 Oliva
Red #FF0000 Rojo
maroon #800000 Marrón
gray #808080 Gris
fuchsia #FF00FF Fucsia
green #008000 Verde
silver #C0C0C0 Plata
aqua #00FFFF Agua
Tabla 2
La etiqueta presenta una serie de atributos que van a afectar a todo el documento en su conjunto. Estos atributos nos van a permitir definir los colores del texto, del fondo, y de los hiperenlaces del documento. Incluso nos permitirán insertar una imagen de fondo en nuestra página.
background="URL". Nos va a permitir mostrar una imagen como fondo de nuestro documento HTML. El camino a esta imagen vendrá especificado por la URL que definamos. Si la imagen no rellena todo el fondo del documento, ésta será reproducida tantas veces como sea necesario hasta completar todo el fondo.
Si insertas el Código fuente 5 en el documento HTML que creamos como ejemplo en el capítulo anterior: Pagina1.htm , este presentará como fondo la imagen " fondo.gif "
Código fuente 5
bgcolor=#rrggbb ó name {bgcolor: Background Color}. Nos va a permitir definir un
8
color para el fondo de nuestro documento. Este atributo será ignorado si previamente hemos utilizado el atributo background.
Inserte el Código fuente 6 en Pagina1.htm y compruebe el resultado.
Código fuente 6
text=#rrggbb ó name. Nos permitirá definir un color para el texto de nuestro documento. Por defecto es negro. Inserte el Código fuente 7 en Pagina1.html y compruebe el resultado
Código fuente 7
Y ahora, inserte el Código fuente 8 en el documento y comprueba el resultado.
Código fuente 8
link=#rrggbb ó name. Indica el color que tendrán los hiperenlaces que no han sido accedidos. Por defecto es azul. Como todavía no sabemos insertar hiperenlaces en nuestro documento vamos a dejar el ejemplo correspondiente para más adelante.
vlink=#rrggbb ó name {vlink: Visited Links}. Indica el color de los hiperenlaces que ya han sido accedidos. Por defecto es púrpura.
Caracteres especiales
Hasta ahora hemos escrito algunos ejemplos de código HTML, pero hemos pasado por alto algunas limitaciones de HTML respecto al uso de caracteres especiales. Una de estas limitaciones es, por ejemplo, el uso de los caracteres < y > , que como ya sabemos indican el inicio y fin de una etiqueta HTML. Pues bien, si quisiéramos escribir estos caracteres como parte normal de un texto, el navegador no sabría si se trata de texto normal o del comienzo y final de una etiqueta, o sea, que se haría un lío.
Como todo tiene solución, existen unos códigos para poder escribir estos caracteres y otros relacionados con las etiquetas los vemos en la Tabla 3.
Símbolo Código
< (menor que) <
> (mayor que) >
10
Esta instrucción HTML, debería producir el siguiente resultado:
"La inspiración existe, pero tiene que encontrarse trabajando". © Pablo Ruíz Picasso.
Para la inclusión de comentarios en nuestra página HTML, podemos usar la etiqueta: . Estos comentarios nos podrán servir para efectuar anotaciones en nuestro documento HTML que ayuden a una mayor comprensión del código. En el Código fuente 10 se muestra un ejemplo de comentario.
Código fuente 10
Espaciado y saltos de línea
En HTML sólo se admite un único espacio en blanco separando cualquier elemento o texto, el resto de espacios serán ignorados por el navegador, al igual que las tabulaciones, retornos de carro, etc. Veamos un ejemplo en la Tabla 6.
Ejemplo Resultado
Esta frase no se verá así en el visor. Esta frase no se^ verá^ así en el^ visor.
Tabla 6
No obstante, sí podremos dar el formato que deseemos a nuestras páginas con el empleo de los siguientes elementos del lenguaje HTML:
**Inclusión de espacios en blanco: **
Nos permitirá la inclusión de más de un espacio en blanco entre dos textos consecutivos, de forma que estos espacios se muestren de forma efectiva en el navegador. Tendremos que incluir tantas expresiones como espacios en blanco se deseen incluir.
Ejemplo Resultado
Texto1 Texto2 Texto1 Texto
Tabla 7
Salto de línea:
{BR: Break}
Nos permite dar un salto a la línea siguiente en el punto donde la etiqueta sea insertada.
Ejemplo Resultado
Esta frase tiene aquí
un salto de línea Esta frase tiene aquí un salto de línea
Tabla 8
Cambio de párrafo: {P: Paragraph}
Permite definir un párrafo, introduciendo normalmente un espacio de separación de dos líneas con el texto siguiente al punto donde hayamos insertado la etiqueta
.
Ejemplo Resultado
Esta frase tiene aquí
un cambio de párrafo
Esta frase tiene aquí
un cambio de párrafo
Tabla 9
La etiqueta de fin párrafo
es opcional, no siendo necesario incluirla. Aunque siempre es recomendable delimitar claramente el inicio y final de un párrafo. Además, cuando usemos esta etiqueta como cerrada
.....
, tenemos la posibilidad de incluirle el atributo align el cual indica al navegador la forma de justificar el texto incluido en el párrafo. El formato sería el siguiente:
**
Texto contenido en el párrafo
Veamos algunos ejemplos en la Tabla 10.
Ejemplo Resultado
Este es un ejemplo de párrafo alineado a la derecha
Este es un ejemplo de párrafo alineado a la derecha
Este es un ejemplo de párrafo centrado
Este es un ejemplo de párrafo centrado
Tabla 10
**Línea Horizontal: ** {HR: Horizontal Rule}
Nos permite insertar una línea horizontal, cuyo tamaño podremos determinar a través de sus atributos. Si no especificamos ningún atributo dibujará una línea que ocupe el ancho de la pantalla del navegador. Su utilidad es la de permitirnos dividir nuestra página en distintas secciones. No será necesaria la etiqueta de fin .
El formato de la etiqueta con sus posibles atributos es:
**
13
Elementos del lenguaje I
Cabeceras y atributos de texto
Cabeceras: ... {H: Heading}
En un documento HTML podemos incluir seis tipos distintos de cabeceras, que van a constituir normalmente el título y los distintos subapartados que forman el documento, aunque podremos utilizarlas en el punto que queramos del documento para resaltar cualquier texto. Estas cabeceras son definidas por las etiquetas y . El texto que componga cada cabecera deberá estar incluido entre las etiquetas de inicio (< Hn >) y fin ( /Hn ) correspondiente. La cabecera será la que muestre el texto de mayor tamaño, este tamaño irá disminuyendo hasta llegar a la cabecera . Como podemos ver en la Tabla 13. Para alinear las cabeceras utilizamos el atributo align. El formato sería: , como muestra la Tabla 14.
Ejemplo Resultado
Cabecera 1 Cabecera^1
Cabecera 2 Cabecera^2
Cabecera 3 Cabecera 3
Cabecera 4 Cabecera^4
Cabecera 5 Cabecera^5
Cabecera 6
Cabecera 6
Tabla 13
Ejemplo Resultado
Cabecera 5 Cabecera^5
Tabla 14
Atributos del texto
Al texto de nuestro documento HTML le podemos aplicar distintos atributos ( negrita , cursiva , subrayado, etc..), al igual que hacemos cuando trabajamos con el procesador de textos en la edición de nuestros documentos. Para aplicar estos atributos disponemos de distintas etiquetas, que aplicarán su efecto al texto incluido entre sus indicadores de inicio y fin. Las vemos en la Tabla 15.
Atributo Etiqueta Ejemplo Resultado
Negrita (^) Texto en negrita
Texto en negrita
Cursiva (^) Texto en cursiva
Texto en cursiva
Teletype (^) Texto en^ modo teletype
Texto en modo teletype
Subrayado (^) Texto subrayado Texto subrayado Tachado (^) Texto tachado Texto tachado
Parpadeo (^) Texto parpadeando
Texto parpadeando
Superíndice (^) Texto en modo superíndice
Texto en modo superíndice
Subíndice (^) Texto en modo subíndice
Texto en modo subíndice
Centrado
Texto centrado
Texto centrado
{B: Bold} {I: Italic} {TT: Teletype} {U: Underlined} {S: Strike} {SUP: Superscript} {SUB: Subscript}
Tabla 15
Alguna de estas etiquetas no es reconocida por determinados navegadores. Así por ejemplo, la etiqueta (Parpadeo) no es implementada por el Explorer. Por lo que según el explorador que estemos utilizando, podremos ver el resultado correctamente o no.
Existen otras etiquetas que nos van a servir para especificar, de manera diferenciada, unidades lógicas de nuestro documento HTML tales como citas, direcciones de correo, etc. En algunos casos el formato obtenido con estas etiquetas de estilo lógico va a ser el mismo que con las anteriores, a las que se les denomina también etiquetas de estilo físico. Algunas etiquetas de estilo lógico las vemos en la Tabla
Etiqueta Ejemplo Resultado
Especifica texto resaltado (igual )
Especifica texto resaltado (igual )
Indica una cita o título (igual )
Indica una cita o título (igual )
<
Texto tachado (igual )
Texto tachado (igual )
Tabla 16
Si queremos aplicar efectos más espectaculares a nuestro documento HTML, debemos variar el tamaño, el color y el tipo de letra del texto. La etiqueta que nos permite todo esto es
Listas
Podemos representar elementos en forma de lista dentro de nuestros documentos de una forma muy sencilla y con una gran versatilidad. Estas listas podrán incluir cualquiera de los elementos HTML e incluso podemos definir listas anidadas, es decir, listas dentro de listas. HTML nos permite crear tres tipos distintos de listas:
Listas no numeradas
Listas numeradas
Listas de definiciones
Listas no numeradas: {UL: Unordered List}
Con este tipo de listas podemos especificar una serie de elementos sin un orden predeterminado, precedidos de una marca o viñeta que nosotros mismos podemos definir. Para la definición de los límites de la lista utilizaremos la etiqueta .... , y para determinar cada uno de los elementos que la componen usaremos la etiqueta . El formato es el siguiente:
Título de la lista
Elemento 1 Elemento 2 .... Elemento n
17
{LH: List Head} {LI: List Item}
Con el atributo type vamos a especificar el tipo de marca o viñeta que antecederá a cada uno de los elementos de la lista. Estas marcas podrán ser: un disco (disk), un círculo (circle) o un cuadrado (square). La etiqueta nos va a servir para especificar un posible título de la lista, siendo esta opcional. Vamos a ver algunos ejemplos en la Tabla 20
Ejemplo
Resultado
Los cinco continentes Europa Asia Africa América Oceanía
Los cinco continentes
Europa
Asia
África
América
Oceanía
Europa Asia Africa América
América del Norte América del Sur
Oceanía
Europa
Asia
África
América
América del Norte
América del Sur
Oceanía
Tabla 20
Listas numeradas: {OL: Ordered List}
Con este tipo de listas podemos especificar una serie de elementos numerados según el lugar que ocupan en la lista. Para la definición de los límites de la lista utilizaremos la etiqueta .... , y para determinar cada uno de los elementos que la componen usaremos la etiqueta . El formato es el siguiente:
Título de la lista
Elemento 1 Elemento 2 .... Elemento n
19
Listas de definiciones: {DL: Definition List}
Estas listas nos van a servir para especificar una serie de términos y sus definiciones correspondientes. Para la definición de la lista usaremos la etiqueta .... , para especificar los términos usaremos la etiqueta y para especificar la definición correspondiente a cada término usaremos la etiqueta . El formato es el siguiente:
Título de la lista Término 1 Definición 1 Término 2 Definición 2 .... Término n Definición n
{DT: Definition Term} {DD: Definition Description}
Vamos a ver un ejemplo en la Tabla 22.
Ejemplo Resultado
París Capital de Francia Roma Capital de Italia Madrid Capital de España
París
Capital de Francia
Roma
Capital de Italia
Madrid
Capital de España
Tabla 22
Hiperenlaces
Los hiperenlaces son enlaces de hipertexto que nos van a permitir acceder de manera directa a otros documentos HTML independientemente de su ubicación, o a otras zonas dentro de nuestro propio documento.
**Enlaces a otras páginas: **
Con este tipo de hiperenlaces vamos a poder acceder tanto a otras páginas que estén ubicadas dentro de nuestro propio sistema como a páginas ubicadas en puntos muy distantes del globo. El formato de este tipo de hiperenlaces es:
Texto del hiperenlace
Con el atributo href vamos a especificar la URL del documento al que se pretende acceder. El texto contenido entre las etiquetas de comienzo y fin nos va a servir para definir el hiperenlace, por lo que debería ser clarificador del contenido del documento con el que vamos a enlazar. Esta definición aparecerá resaltada normalmente en azul y subrayada. En la mayoría de los navegadores esta definición del hiperenlace es sensible, por lo que cuando el cursor pasa por encima del mismo este cambia de aspecto indicándolo.
Veamos un ejemplo en la Tabla 23.
Ejemplo
Resultado
**Página inicial de Villa Eidos
Página inicial de Villa Eidos
Tabla 23
Si situamos el ratón encima del hiperenlace y pulsamos, el navegador accederá a la página Web indicada por href, es decir, accederá a la página situada en http://www.eidos.es.
Igualmente podríamos indicar el hiperenlace por medio de una imagen. Si esta imagen tiene definido un borde, este aparecerá resaltado en color azul. El formato correspondiente sería:
y también texto {IMG: Image} {src: Source}
Veamos un ejemplo en la Tabla 24
Ejemplo
Resultado
** Villa Eidos Villa^ Eidos
Tabla 24
Si pulsamos sobre la imagen, el navegador accederá a la página Web inicial de Villa Eidos.
**Enlaces dentro de la misma página: **
Este tipo de hiperenlaces nos va a permitir marcar distintas zonas del documento activo con el objeto de tener un acceso directo a las mismas. Una buena utilidad de este tipo de enlaces radica en la creación de índices para documentos largos, de forma que si pinchamos en el hiperenlace correspondiente al título de un capítulo determinado, el navegador saltará automáticamente hasta el comienzo de dicho capítulo.
Para la creación de estos hiperenlaces, debemos seguir dos pasos:
