¡Descarga Introducción a la creación de páginas web con HTML: etiquetas y ejemplos y más Apuntes en PDF de Sistemas Distribuidos solo en Docsity!
Este texto está diseñado para enseñar a confeccionar páginas web a través del uso directo del lenguaje HTML.
El objetivo es adiestrar al lector en las técnicas para confeccionar páginas web para Internet/Intranet, así como enseñar los fundamentos sintácticos del lenguaje HTML.
Los requisitos previos son: estar familiarizado con los aspectos básicos de Internet/Intranet, estar familiarizado con la navegación por la web, conocer el sistema operativo Windows a nivel de usuario.
L L ENENGGUUAAJJEE
HTHTMMLL
Iniciación
Índice
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 , ...).
Lenguaje HTML © Grupo EIDOS
- 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:
- 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
Lenguaje HTML © Grupo EIDOS
Forma del URL
El URL( Uniform Resource Locator ) nos van a permitir localizar y acceder a cualquier recurso de la red desde nuestro programa navegador. A través de los URL podremos referenciar cualquier fichero que deseemos incluir en nuestro documento HTML. Cada elemento de Internet vendrá definido por su URL correspondiente, independientemente del tipo de servidor en el que se encuentre.
La forma general del URL es:
Tipo de servicio: //maquina.dominio:puerto/camino/archivo
El Tipo de servicio, como su propio nombre indica, hace referencia a alguno de los servicios de Internet. El servicio correspondiente al WWW es http (HiperText Transport Protocol), protocolo para la transmisión de hipertexto. Por lo que cualquier referencia a un documento HTML debería comenzar por http:// .Otros servicios son: ftp, news, telnet o mailto.
La máquina.dominio indica el nombre del servidor en que se encuentra el documento al que estamos haciendo referencia, junto con el dominio al que pertenece dicho servidor.
El puerto es opcional, y lo normal es no ponerlo, indicándose sólo en el caso de que el servidor utilice un puerto distinto al puerto por defecto.
El camino indica la ruta de directorios que hay que seguir para encontrar el documento que estamos referenciando.
Finalmente especificaremos el nombre del archivo en que está guardado el documento en cuestión. Si no indicamos un archivo, accederemos al archivo por defecto del directorio al que estemos referenciando.(En el caso del servicio http este archivo por defecto suele ser default.htm ó default.html).
Vamos a ver a continuación algunos ejemplos de URL' s, accediendo a distintos servicios de la WWW.
Localizando un documento hypertexto (http):
Sintaxis:
http://maquina.dominio:puerto/camino/archivo
Ejemplo1: http://www.eidos.es
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 Villa Eidos.
Ejemplo2: http://www.eidos.es/vulcan/informa.htm
Con esta URL estamos accediendo al fichero informa.htm que se encuentra en el directorio vulcan del servidor www.eidos.es.
© Grupo EIDOS 1. Introducción al HTML
Localización de un fichero por el servicio FTP (ftp:File Transfer
Protocol)
Sintaxis :
ftp://maquina.dominio:puerto/camino/archivo
Ejemplo: ftp:// ftp.jet.es/pub/auto_ftp/
En este caso, estamos accediendo al servicio ftp (protocolo de transferencia de archivos), ftp.jet.es. En este caso no estamos indicando ningún archivo, con lo que se referenciará un índice con los contenidos del directorio: /pub/auto_ftp/.
Accediendo a un grupo de noticias (news):
Sintaxis:
news:GRUPO
Ejemplo: news:jet.es
En este ejemplo estamos accediendo al grupo de noticias del servidor de news jet.es.
Accediendo a una dirección e-mail (mailto):
Sintaxis:
mailto: Destinatario_1, Destinatario_2,...,Destinatario_n
Ejemplo: mailto:[email protected]
Enviará un mail a la dirección de correo electrónico indicada.
Localización de un archivo cualquiera (file):
Sintaxis:
file://maquina.dominio:puerto/camino/archivo
Ejemplo: file://c:/windows/
En este caso estamos accediendo a la carpeta Windows de la unidad C: de nuestro ordenador local.
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
Lenguaje HTML © Grupo EIDOS
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.
Código fuente 3
Si insertamos esta instrucción en la cabecera de nuestro página HTML, transcurridos 5 segundos ésta se refrescará con la página Web de portada de: "Villa Eidos".
Indicador de la URL base del documento
Con esta etiqueta indicamos la localización de los ficheros a los que se hace referencia en nuestra página Web. Si no incluimos esta etiqueta el navegador entenderá que dichos ficheros se encuentran en el mismo lugar donde reside nuestra página Web.
Vemos un ejemplo en el Código fuente 4.
Código fuente 4
Si especificamos como URL base de nuestro documento HTML la indicada en este ejemplo y posteriormente hacemos referencia en nuestra página a un fichero llamado "aula.htm", se entenderá que la localización del fichero es "http://www.eidos.es/vulcan/aula.htm".
Lenguaje HTML © Grupo EIDOS
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 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.
© Grupo EIDOS 2. Cabecera y cuerpo del documento HTML
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) >
& (ampersand) &
" (comillas) "
Tabla 3
Para las letras específicas del idioma castellano: las vocales acentuadas, la ñ, la ü y los signos ¿ y ¡, existen los códigos que muestra la Tabla 4.
Letra Código Letra Código Letra Código
á á Á Á ñ ñ
é é É É Ñ Ñ
í í Í Í ü ü
© Grupo EIDOS 2. Cabecera y cuerpo del documento HTML
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
.
_Lenguaje HTML © Grupo EIDOS_
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:
**
- align = left / right / center. Permite establecer la alineación de la línea a la izquierda, a la derecha o centrarla.
- noshade. No muestra la sombra de la línea, evitando el efecto de tres dimensiones.
- size=n. Indica el grosor de la línea en pixels.
- width=n ó n%. Especificará el ancho de la línea, este se podrá especificar en pixels (n) o en tanto por ciento del ancho de la ventana (n%). Vamos a ver algunos ejemplos en la Tabla
