Scribd
Cargar
25 vistas8 páginas

Introducción Al HTML

Cargado por

lmaclovi
Derechos de autor
© © All Rights Reserved
Nos tomamos en serio los derechos de los contenidos. Si sospechas que se trata de tu contenido, reclámalo aquí.
Formatos disponibles
Descarga como DOCX, PDF, TXT o lee en línea desde Scribd
25 vistas8 páginas

Introducción Al HTML

Cargado por

lmaclovi
Derechos de autor
© © All Rights Reserved
Nos tomamos en serio los derechos de los contenidos. Si sospechas que se trata de tu contenido, reclámalo aquí.
Formatos disponibles
Descarga como DOCX, PDF, TXT o lee en línea desde Scribd
Está en la página 1/ 8

Creación de paginas web

CENTRO DE CAPACITACION PARA EL TRABAJO INDUSTRIAL No. 155

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 <TABLE
border=2> 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:
1. 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 o .html.
2. 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.
Creación de paginas web
CENTRO DE CAPACITACION PARA EL TRABAJO INDUSTRIAL No. 155

Vemos un ejemplo en la Tabla 1.

Instrucción HTML Resultado

Estructura de un documento HTML


La estructura básica de un documento HTML es la siguiente:
<HTML> Indica el inicio del documento
<HEAD> Indica el inicio de la cabecera
<TITLE> Inicio del título del documento
</TITLE> Final del título del documento
</HEAD> Final de la cabecera
<BODY> Inicio del cuerpo del documento
Instrucciones HTML
</BODY> Final del cuerpo del documento
</HTML> 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


Una vez que conocemos la estructura básica de un documento HTML, vamos a crear una página
HTML muy sencillita.
1. Lo primero será abrir el procesador de textos que hayamos elegido y copiar el Código fuente
1.
<HTML>
<HEAD>
<TITLE> Mi primera página HTML </TITLE>
</HEAD>
<BODY>
Esta es mi primera página <B>HTML</B>
</BODY>
</HTML>
Código fuente 1

2. Una vez tecleado el código, guardamos el documento como Pagina1.htm, y procedemos a abrirlo
con el navegador correspondiente. El resultado será:
Esta es mi primera página HTML
Creación de paginas web
CENTRO DE CAPACITACION PARA EL TRABAJO INDUSTRIAL No. 155

Forma del URL


El URL (Uniform Resource Locator) nos va 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.
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.
Creación de paginas web
CENTRO DE CAPACITACION PARA EL TRABAJO INDUSTRIAL No. 155

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 <HEAD>
......
</HEAD>
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 <HEAD> y </HEAD> son las que van a delimitar la cabecera de nuestro documento.
Todas las etiquetas de la cabecera son opcionales, aunque se recomienda incluir en todos nuestros
documentos la etiqueta <TITLE> 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 </TITLE> y, como
ya hemos mencionado, este título es el que aparecerá en la ventana de nuestro programa 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.
<TITLE>Mi primera página Web</TITLE>
Código fuente 2

Cuerpo
Cuerpo del documento HTML: <BODY>
......
</BODY>
En el cuerpo de un documento HTML es donde incluiremos las distintas instrucciones del lenguaje
junto con el contenido en sí de nuestra página Web: textos, imágenes, enlaces a otras páginas, etc..
Las etiquetas <BODY> y </BODY> son las que van a delimitar el cuerpo de nuestro documento.
Esta posee una serie de argumentos que nos van a permitir variar las características del documento
en su conjunto, como por ejemplo el color del texto o del color de fondo de nuestra página web.
Antes de analizar los componentes y atributos de BODY vamos a ver como se especifican los
colores en un documento HTML.
Creación de paginas web
CENTRO DE CAPACITACION PARA EL TRABAJO INDUSTRIAL No. 155

Estos se pueden especificar por su nombre (name) o por su código de color, que es un número
compuesto de tres pares de cifras hexadecimales que nos indican la proporción de los colores
primarios (rojo, verde y azul) que forman el color deseado (#rrggbb):

La etiqueta <BODY> 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.
<BODY background="URL" bgcolor="#rrggbb ó name" text="name" link="name" vlink="name" >
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 Pagina1.htm,
este presentará como fondo la imagen "fondo.gif"
<BODY background="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.
<BODY bgcolor="blue">
Código fuente 6
Creación de paginas web
CENTRO DE CAPACITACION PARA EL TRABAJO INDUSTRIAL No. 155

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
<BODY text="red">
Código fuente 7

Y ahora, inserte el Código fuente 8 en el documento y comprueba el resultado.


<BODY bgcolor="yellow" text="navy">
Código fuente 8

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.

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.
Creación de paginas web
CENTRO DE CAPACITACION PARA EL TRABAJO INDUSTRIAL No. 155

Para los navegadores actuales, podemos escribir nuestro código HTML de manera directa sin tener
en cuenta estos códigos, pero nunca podemos asegurar que las personas que accedan a nuestras
páginas con otros navegadores puedan leerlas correctamente. Así que lo más adecuado es el empleo
de los mismos. Otros símbolos especiales aparecen en la Tabla 5.

Veamos un ejemplo en el Código fuente 9.


&quot;La inspiraci&oacute;n existe, pero tiene que encontrarse trabajando&quot;.
&copy; Pablo Ru&iacute;z Picasso.
Código fuente 9

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.
<!-- Esto es un comentario y no será mostrado por el navegador -->
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.

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: &nbsp;
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 &nbsp; como espacios en blanco se deseen incluir.
Creación de paginas web
CENTRO DE CAPACITACION PARA EL TRABAJO INDUSTRIAL No. 155

Salto de línea: <BR> {BR: Break}


Nos permite dar un salto a la línea siguiente en el punto donde la etiqueta sea insertada.

También podría gustarte