Manual HTML

MANUAL BÁSICO DE CREACIÓN DE PÁGINAS WEB

MANUAL BÁSICO DE CREACIÓN DE PÁGINAS WEB 7

INTRODUCCIÓN 7

EL LENGUAJE HTML. 8

MI PRIMER DOCUMENTO HTML. 8

CARACTERÍSTICAS GENERALES DEL LENGUAJE HTML.. 9

Marcas y atributos. 9

Concatenación de marcas. 10

CUATRO NORMAS FUNDAMENTALES 10

HTML es simplemente texto 10

Igualdad de mayúsculas y minúsculas. 10

No importan los tabuladores, ni los saltos de línea 10

Caracteres especiales 10

ESTRUCTURA DE UN DOCUMENTO HTML. 11

COMANDOS BÁSICOS DE HTML 12

Definición de párrafos: P 12

Ruptura de líneas: BR. 12

Titulos de encabezamiento 12

Dando estilo al texto 13

Tipos de letras 13

Tamaño del texto. 13

Colores del texto. 15

Listas 15

Listas ordenadas: OL. 15

Listas desordenadas: UL. 16

Listas de definición: DL. 16

Texto preformateado: PRE. 17

Centrando texto. 17

Líneas horizontales. 18

Comentarios no visibles en la pantalla 18

ENLACES: A. 19

Enlaces a otras zonas de la misma página 20

Enlaces a otras páginas 22

Enlaces a una zona de otra página 23

IMÁGENES 23

Principales formatos gráficos en Internet. 24

Formato GIF. 24

Formato JPEG. 24

Inclusión de imágenes 25

Tamaño de las imágenes. 25

Escalado de imágenes. 25

Bordes de la imagen. 25

Alineación de texto con las imágenes. 26

Imágenes con texto alternativo. 26

Uso de imágenes como enlaces. 26

Imágenes como fondo de un documento. 26

Mapas sensitivos. 27

TABLAS 28

Título de la tabla. 28

Bordes de la tabla. 29

Cabeceras de filas y de columnas. 29

Tamaño de la tabla. 29

Justificación de la tabla. 30

Espacio dentro de las celdas. 30

Forma de las celdas individuales. 30

Justificación del texto de las celdas. 30

Celdas de diferentes tamaños. 31

Celdas irregulares. 31

Color de cada celda. 32

Texto en una solo línea. 32

EDITORES Y CONVERSORES 32

Editores 33

Conversores 34

PUBLICAR LAS PÁGINAS EN INTERNET. 34

DIRECCIONES INTERNET DE INTERÉS. 35

BIBLIOGRAFÍA. 35

MANUAL BÁSICO DE CREACIÓN DE PÁGINAS WEB

INTRODUCCIÓN

Este manual está pensado para aprender los conceptos básicos necesarios para construir sus propias páginas Web. Para quien quiera ampliar sus conocimientos se suministran también unas referencias de consulta a otros sitios del Web.

En su confección se ha procurado seguir siempre un criterio eminentemente práctico. Para mejor asimilar los conceptos tratados, se propone al final de cada apartado un ejemplo práctico.

Primeras herramientas: Para comenzar sólo son necesarios dos elementos:

• Un editor de texto. Vale cualquiera, siempre que no formatee el texto. Por ello, los más adecuados son los más sencillos (como por ej., El block de notas de). Si se utilizan procesadores como el Word, se deben guardar los ficheros como 'Sólo Texto', para que no introduzca órdenes de formateo, que pueden provocar errores al cargarlo en el navegador.

• Un visualizador o navegador del Web: Netscape, MSI Explorer, Mosaic, etc.

El editor de texto lo usaremos para ir escribiendo los documentos HTML, que será posteriormente interpretado por el navegador, con lo que iremos comprobando los cambios y añadidos que vayamos efectuando.

Existen ciertos programas que nos ayudan a automatizar este proceso, pero es muy conveniente comenzar a hacerlo de una manera manual, para comprender bien la estructura del lenguaje HTML

Método de trabajo: Con el editor de texto crearemos un fichero con el nombre que queramos (p. ej. ejemplo1), pero que debe tener necesariamente la extensión .html (o .htm si nuestro sistema operativo no soporta extensiones de más de tres letras).

Habrá un fichero distinto para cada apartado; conviene crear un directorio específico en su ordenador e irlos guardando en él, para poder repasar lo aprendido, aparte de que pueden ser necesarios para ejecutar otros ejemplos prácticos.

EL LENGUAJE HTML.

HTML es un lenguaje que se utiliza para la creación de páginas en la WWW. Por página entenderemos el documento que aparece en el visualizador.

HTML se compone de una serie de comandos, que son interpretados por el visualizador, o programa que utilizamos para navegar por el WWW. En última instancia es el visualizador el que ejecuta todas las órdenes contenidas en el código HTML, de forma que un visualizador puede estar capacitado para unas prestaciones, pero no para otras. Así, podremos especificar que una página tenga una imagen de fondo, o un texto parpadeando, pero si nuestro visualizador no está capacitado para esas funciones, no podremos verlas.

En esta guía se expondrán los comandos fundamentales de HTML.

MI PRIMER DOCUMENTO HTML.

Siga las siguientes instrucciones atentamente; ellas le permitirán crear un documento HTML en su ordenador; este archivo no será visible para otros usuarios de Internet.

Le recomiendo que cree un directorio en su ordenador para almacenar las páginas web que vaya haciendo al aprender; y que practique un tiempo antes de poner páginas en Internet.

1. Abra el editor de textos: en Windows abra el Block de Notas

2. Teclee lo siguiente:

<HTML>

<HEAD>

<TITLE>Ejemplo 1 - Mi primera pagina Web</TITLE>

</HEAD>

<BODY>

<CENTER><H1>Mi primera pagina Web</H1></CENTER>

<HR>

Esta es mi primera pagina, aunque todavía es muy sencilla. <BR>Como el lenguaje HTML no es difícil, pronto estaré en condiciones de hacer cosas mas interesantes.

<P> Aquí va un segundo párrafo.</P>

</BODY>

</HTML>

3. Grabe este archivo con el nombre: ejemplo1.html

4. Abra el visualizador. No necesita conectarse a Internet para ver las páginas en su computador. Puede trabajar Off-line

5. Elija "Archivo/Abrir página" en la barra de menú del navegador.

6. Seleccione el archivo ejemplo1.html que acaba de crear.

Las líneas en blanco y las indentaciones del texto se han puesto para mayor claridad, pero no son necesarias. De hecho, podría estar todo en una sola línea. Lo importante es el orden correcto de las etiquetas. Por cierto, una etiqueta puede estar anidada dentro de otra. Véase en el ejemplo cómo lo está la etiqueta <CENTER> dentro de la etiqueta <H1>. Es muy importante, en estos casos, que las etiquetas de inicio y de cierre vayan en el orden correcto, pues de lo contrario se producirían errores.

Obsérvese además la falta de los acentos. Se hablará más adelante sobre el motivo de ello.

¡Usted ha creado su primer documento HTML!.

CARACTERÍSTICAS GENERALES DEL LENGUAJE HTML..

Marcas y atributos.

El lenguaje HTML se estructura utilizando marcas o etiquetas o comandos (a partir de ahora utilizaremos indistintamente uno de 3 términos para denominar a los elementos que se estructura HTML). La forma general de una marca es la de un comando HTML encerrado entre dos signos de menor y mayor como a continuación se muestra:

<marca [atributos]> ......................................[</marca>]

El mecanismo de funcionamiento de estas marcas es muy sencillo. Cuando el visualizador encuentra el signo menor (<), examina todos los caracteres hasta que encuentra el final de la marca - el símbolo mayor (>). Entonces, interpreta el contenido de la marca, y aplica esa propiedad al texto que viene a continuación.

Hay marcas que se aplican a todo el documento HTML, o sólo desde el punto en que son insertadas hasta el final del documento. Otras se aplican exclusivamente a un fragmento del texto. En ese caso, el final de la aplicación se especifica con la misma marca precedida de la barra inclinada hacia atrás (/).

Las marcas pueden contener de forma opcional u obligatoria, lo que se denominan atributos o modificadores. Los atributos matizan el significado de la marca, y que se expresan de la siguiente forma:

<marca atrib1=“valor1” atrib2=“valor2”..............>

El valor de los atributos se expresan encerrados entre comillas.

En la mayor parte de los visualizadores es posible omitir las comillas y colocar directamente el valor del atributo. Esta práctica. a pesar de estar extendida, no es muy aconsejable ya que no está normalizada, y no esta soportada por la totalidad de los visualizadores.

Algunos atributos sólo viene definidos por su nombre (no tienen valor); son los atributos llamados compactos.

Concatenación de marcas.

Las marcas se pueden anidar o encadenar una a continuación de otra, de forma que se pueden aplicar simultáneamente varias propiedades a una misma porción de documento. Así el texto encerrado en las marcas:

<MARCA1><MARCA2> Texto </MARCA2></MARCA1>

queda afectado tanto por las propiedades de la MARCA1 como por los de la MARCA2. Todas las

...