tutorial html

TUTORIAL
HTML
HOJAS DE ESTILO (css)






Carlos Alberto Vanegas
Ingeniero de Sistemas
Especialista en Ingeniería de Software
Maestría en Ingeniería de Sistemas
Profesor Universidad Distrital Francisco José de Caldas


Carlos Alberto Vanegas
Ingeniero de Sistemas
Especialista en Ingeniería de Software
Maestría en Ingeniería de Sistemas
Profesor Universidad DistritalFrancisco José de Caldas




Bogotá Julio / 2012
Contenido


































1. LENGUAJE DE MARCADO DE HIPERTEXTO (HTML)

El World Wide Web (WWW) es un sistema que contiene una cantidad de información casi infinita. Pero esta información debe estar ordenada de alguna forma de manera que sea posible encontrar lo que se busca. La unidad básicadonde está almacenada esta información son las páginas Web. Estas páginas se caracterizan por que pueden contener texto, imágenes, animaciones, sonido y video.
Una de las características más importantes de las páginas Web es que son hipertexto. Esto quiere decir que las páginas no son elementos aislados, sino que están unidas a otras mediante enlaces de hipertexto.

El lenguaje HTML (Hiper TextMarkup Language), es un conjunto o serie de etiquetas incluidas en archivos de texto que definen la estructura de una página Web y sus vínculos con otros documentos. Los navegadores de Internet leen estos archivos de texto e interpretan las etiquetas para determinar cómo se puede desplegar una página Web.

1.1 Crear archivos de texto con instrucciones HTML

Para crear un archivo texto quecontenga instrucciones HTML (Una vez hemos escrito el código se deberá guardar el archivo (con formato de texto) con la extensión .html) se tienen varias opciones:

1) Programas creados para desarrollo de páginas Web: son programas o editores de código HTML ( crean archivos con código excedente o basura), entre los que se pueden citar:
MacroMedia Dreamweaver
Microsoft FrontPage
HotDog
MicrosoftWord
HTML Editor
Quanta
BlueFish
HomeSite

2) Utilizar un editor de texto: aunque esta opción es más lenta, se aprende a utilizar etiquetas HTML sin depender de ningún programa. Se pueden citar:
Bloc de notas
gEdit, Kate, JEdit
OmmWriter

1.2 Estructura de las etiquetas HTML

Toda etiqueta HTML debe estar encerrada entre < y >. El formato de una etiqueta HTML es:

Apertura de unaetiqueta:
Contenido de la etiqueta: texto, grafico, etiqueta, etc.
Cierre de la etiqueta:

Un ejemplo podría ser:

Texto a mostrar en un párrafo


1.3 Estructura básica de un documento HTML
Un documento HTML ha de estar delimitado por la etiqueta y . Dentro de este documento se pueden asimismo distinguir dos partes principales:
El encabezado: delimitado por lasetiquetas y , donde se colocarán etiquetas de índole informativo como por ejemplo, el titulo de una página.
El cuerpo: delimitado por las etiquetas y , que será donde se colocará el contenido (texto, imágenes, videos, etc.) delimitados a su vez por otras etiquetas.
1.4 Visualizar una página Web

Para visualizar una página web se deben realizar los siguientes pasos:

a. Tener o crear elarchivo de texto con las etiquetas HTML: Como ejemplo, se creará un archivo de texto con etiquetas HTML que permita mostrar un mensaje en un navegador. En un editor de texto escriba el siguiente código:




Bienvenidos al curso de Ingeniería Web



b. Guardar el archivo de texto: Al tener el archivo de texto con las etiquetas HTML, se deberá guardar dicho archivo con unnombre permitido y con extensión html o htm. Para el ejemplo, guarde el archivo con el nombre primerhtml.hmtl.

c. Abrir o ejecutar el archivo html: para ejecutar el archivo, se puede realizar alguno de los siguientes pasos:
Seleccione el archivo html, pulse el botón derecho del mouse y dé clic sobre la opción Abrir.
O
Abra el navegador Internet Explorer, en la opción Archivo seleccione Abrir y...