Este documento introduce los conceptos básicos de diseño web, incluyendo multimedia, HTML, editores de texto, páginas web, hipertexto y la estructura básica de un documento HTML. Explica que el multimedia permite acceso a múltiples formas de información, HTML se usa para crear páginas web, y la estructura típica de una página web contiene una sección de encabezado y una sección de cuerpo.

1. DISEÑO Y PROGRAMACIÓN WEB I
TEMA 1
INTRODUCCIÓN
MULTIMEDIA
Es una colección de tecnologías basadas en la utilización de la computadora
que da al usuario la capacidad de acceder y procesar información en
por los menos tres de las siguientes formas; texto, gráficas, imagen
fija, imagen con movimiento y audio. Cuando se permite al usuario
controlar ciertos elementos y el momento en que deben presentarse,
se le llama Multimedia Interactiva. Si se incluye una estructura de
elementos relacionados a través de los cuales el usuario puede
navegar, entonces hablamos de Hypermedia.
HTML
Para crear páginas web con HTML necesitas la Herramienta adecuada. Para
la creación de páginas existen dos tipos, las herramientas visuales y las de
texto:
• Visuales: tienen la ventaja de que son muy rápidas y cómodas de
usar. Desventaja: a veces producen unas páginas poco compatibles y
pueden ser poco flexibles.
• Editores de texto: desventaja: más trabajo que las anteriores.
Ventajas: realmente aprendes y comprendes el HTML, puedes
producir páginas más compatibles y todo lo que se puede hacer con
html lo puedes hacer. Esta es la opción que Utilizaremos en este
Curso.
Para este curso nos quedamos con la segunda opción: los editores de texto.
Para esta tarea nos vale cualquier editor de texto; la única condición es que
sea texto sin formato. Qué editores cumplen esto:
Notepad (bloc de notas de Windows): es un editor muy sencillo sin apenas
opciones. Ventajas: si tienes Windows lo tienes instalado.
Paginas Web
Las página WEB o página hipertexto es el soporte más utilizado para
publicar la información en la World Wide Web. Las páginas WEB pueden
presentarse con texto, gráficos, imágenes, sonido, etc. Lo más
característicos de las páginas WEB son los enlaces. Estos aparecen
normalmente resaltados (subrayados y color diferente) y en todo caso se
identifican por el cambio del puntero del ratón (habitualmente de una flecha
a una mano con el dedo índice extendido).

2. ¿Qué es la World Wide Web o la Web?
La World Wide Web consiste en ofrecer una interfase simple y consistente
para acceder a la inmensidad de los recursos de Internet. Es la forma más
moderna de ofrecer información. el medio más potente. La información se
ofrece en forma de páginas electrónicas.
El World Wide Web o WWW o W3 o simplemente Web, permite saltar de un
lugar a otro en pos de lo que no interesa. Lo más interesante es que con
unas pocas ordenes se puede mover por toda la Internet.
Hipertexto
Hipertexto son datos que contienen enlaces (links) a otros datos.
En el lenguaje Web, un documento de hipertexto no es solo algo que
contiene datos, sino que además contiene enlaces a otros documentos.
Un ejemplo simple de hipertexto es una enciclopedia que al final de un tema
tiene referencias de algún tema en especial o referencias bibliográficas a
otros textos.
En Hipertexto, el ordenador hace que seguir esas referencias sea facilísimo.
Esto implica que el lector se puede saltar la estructura secuencial del texto
y seguir lo que más le gusta.
El hipertexto no esta limitado a datos textuales, podemos encontrar dibujos
del elemento especificado, sonido o vídeo referido al tema. Estos
documentos que tienen gran variedad de datos, como sonido, vídeo, texto,
en el mundo del hipertexto se llama hipermedia.
Qué es HTML
HTML (HyperText Markup Language) es un lenguaje que se utiliza para la
creación de páginas web. Es muy fácil de usar y está basado en lo que se
llaman etiquetas (o tags, en inglés). Las etiquetas definen la forma del
documento HTML.
Características
• Permite crear lenguajes de codificación descriptivos
• Define una estructura de documentos jerárquica, con elementos y
componentes interconectados.
• Proporciona una especificación formal completa del documento
• Soporta un conjunto flexible de juegos de etiquetas
• Los documentos generados por el son legibles.
ETIQUETAS
Son textos que indican una acción y Funcionan de la siguiente manera:
< Etiqueta > Este es el inicio de una etiqueta.
</ Etiqueta> Este es el cierre de una etiqueta.

3. Las letras de la etiqueta pueden estar en mayúsculas o minúsculas,
indiferentemente.
Lo que haya entre ambas etiquetas estará influenciada por ellas. Por
ejemplo, todo el documento HTML debe estar entre las etiquetas <HTML>
y </HTML>:
LA ETIQUETA HTML
Esta es la etiqueta que contiene a TODO el documento html. La etiqueta
<html> indica el comienzo del documento y </html> el final. No debe
haber etiquetas fuera de estas dos (excepto un par de excepciones que ya
veremos).
HEAD
Esta etiqueta contiene la cabecera (o encabezamiento) del documento. Esta
cabecera contiene entre otras cosas el título de la página. La cabecera
contiene información que no se muestra con la página (exceptuando el
título), es la información que usan los navegadores y buscadores de
Internet para mostrar o indexar las páginas.
TITLE
El título de la página. Este se muestra en la barra de tareas (en Windows),
no en la propia página. También se muestra en la parte superior de la
ventana del navegador.
BODY
Aquí es donde va el texto de la página, y las imágenes, y las tablas y todo
lo que le pongamos. El contenido de body es lo que se muestra en el
navegador.
ESTRUCTURA BASICA DE UN DOCUMENTO HTML
Por tanto, la estructura de un documento HTML queda de esta manera:
<HTML> INDICA EL COMIENZO DE LA PAGINA
<HEAD> INDICA EL COMIENZO DEL ENCABEZADO
<TITLE> Título de la página </TITLE> ESTE ES EL ENCABEZADO
</HEAD> FIN DEL ENCABEZADO
<BODY> COMIENZO DEL CUERPO DE LA PAGINA
[Aquí van las etiquetas que visualizan la página]
</BODY> FIN DEL CUERPO DE LA PAGINA
</HTML> FINAL DE LA PAGINA

4. Ejercicio #1
Realice con lo avanzado en clases la Siguiente página Web
Escribiendo en el Bloc de Notas
Para guardar nuestro archivo, seleccionas 'Archivo', 'Guardar como...', y en
el campo 'Nombre de archivo:' colocas el nombre que desees con la
extensión html. Por ejemplo: mipagina.html (no te olvides de la
extensión .html)
Luego Ingresas al Internet Explorer y allí Abres el Archivo Mipagina.Html y
se Vera Asi
TITULO
CUERPO DE
LA PÁGINA