DISEÑO Y PROGRAMACIÓN WEB I

TEMA 1INTRODUCCIÓ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).

¿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.

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 HTMLEsta 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).

HEADEsta 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.

TITLEEl 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.

BODYAquí 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

Ejercicio #1Realice con lo avanzado en clases la Siguiente página WebEscribiendo 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