manual html basico gutiecuador

Manual HTML

UNIVERSIDAD CENTRAL DEL ECUADOR

Básico

Gutiérrez R. José Luis

La world wide web tiene una arquitectura cliente / servidor. Un programa cliente que se ejecuta en tu ordenador , solicita información de un programa servidor que se ejecuta en una máquina en cualquier otro lugar. El servidor envía la informción solicitada de vuelta a través de la red al programa navegador, el cual la interpreta para mostrarla en la pantalla.

Internet se fundamenta en el protocolo TCP/IP, sobre el cual se construyen otros protocolos de aplicación. En el caso de la world wide web, el protocolo utilizado es el HTTP (Hipertext Transfer Protocol).

Cuando el navegador recibe la información, la interpreta para mostrarla en la pantalla. Las páginas que se visualizan están formadas, fundamentalmente, por textos e imágenes, con una estructura y un formato específicos. El HTML (Hipertext Markup Language)

¿Que es el HTML?

Existen herramientas muy interesantes para aumentar la productividad de escribir HTML que se desee. Se trata de unos editores de texto, como cualquier otro, que están preparados para escribir HTML y por lo tanto ofrecen multitud de ayudas a los diseñadores: Pueden tener abiertos y editar varios ficheros a la vezDependiendo del programa escogido tendremos unas herramientas y ayudas u otras dependiendo de la necesidad. Algunos ejemplos son:

Notepad++, gratuito y código libre. Home Site, que estaba bien, aunque Adobe hace años que no lo

actualiza. UltraEdit, que es un editor para programadores de los más populares. Arachnophilia, que funciona en todos los sistemas operativos.

Editores de texto para código HTML

El HTML describe el aspecto visual que debe tener una página mediante la utilización de etiquetas (tags). Las etiquetas le indicarán al navegador la posición relativa de los elementos de la página, su tamaño, las tipografías y colores a utilizar, etc.

El concepto de etiqueta (tag)Conceptos Básicos

Las etiquetas pueden especificar, por ejemplo, que cierta palabra aparezca en negrita. Pero si queremos que cierta palabra aparezca de color rojo, necesitamos suministrar un parámetro: el color. La mayoría de las etiquetas tienen parámetros para indicar múltiples aspectos del formato, como el color, el tamaño, etc.

El concepto de argumento

Toda página HTML debe comenzar por la etiqueta <html> y terminar con </html>. Todo lo que figure entre estas etiquetas será interpretado por el navegador como un documento HTML. Lo que quede fuera de ellas será, en la mayoría de los casos, ignorado. El documento HTML se divide siempre en dos partes: cabecera y cuerpo.

Estructura básica HTML

La Cabecera.- La cabecera figura entre las etiquetas <head> y </head>. En ella se especifica el título, el autor, y otras características del documento que no se muestran físicamente en la página y que sirven para facilitar su indexación.Cuerpo.- El cuerpo es la parte del documento que se circunscribe entre las etiquetas <body> y </body>. En esta parte se incluye la página propiamente dicha.Teniendo esto en cuenta podemos construir ya nuestra primera página HTML con los elementos mínimos necesarios para que sea interpretada correctamente por un navegador:

Creación de párrafosToda página HTML está compuesta, principalmente, por párrafos de texto combinados con otros elementos, como pueden ser imágenes, tablas o formularios. La inserción de párrafos ser realiza mediante la utilización de la étiqueta y su correspondiente cierre, .

Podemos modificar la justificación del texto mediante el parámetro align, que puede tomar los valores left (alineación izquierda), center (alineación centrada) y right (alineación derecha).

Si se desea dejar poco espacion entre párrafos se pueden insertar saltos de línea mediante la etiqueta . A diferencia del tag ... , esta etiqueta no tiene cierre.

Formato al textoPara elegir el tipo de letra que desea utilizar en un párrafo, basta con incluirlo entre ... . Por ejemplo, si queremos escribir ¡Hola! con letra Century Gothic utilizamos el siguiente código:

Si queremos cambiar el color, emplearemos ... , donde color es un número que indica el color. Este número está codificado en hexadecimal, y utiliza 256 bits para cada uno de los colores primarios (rojo, verde y azul). En hexadecimal con dos caracteres (de 0 a 9 y de la A a la F) se representan valores de 256 bits. Así, el color blanco se expresa como #FFFFFF y el negro como #000000.

Finalmente, si lo que queremos es modificar el tamaño, le etiqueta a usar es ... , donde tamaño es un número que puede indicar el tamaño absoluto (con rango de 1 a 7) o el relativo.

Uso de ListasUna forma común de expresar una relación de datos es en forma de listas. Las listas en HTML pueden ser de dos tipos: desordenadas y ordenadas.

Las listas desordenadas vienen entre las etiquetas <UL> y </UL> (unordened lists). Cada elemento deberá estar precedido por las etiquetas <LI> y </LI> (list item). El ejemplo anterior de listas desordenadas se escribiría así:

Listas Desordenadas

Listas OrdenadasPor otro lado, las listas ordenadas (ordened lists) se construyen de la misma forma, si bien en lugar de las etiquetas <UL> y </UL> deberemos escribir <OL> y </OL>.

Uso de Imágenes

En este ejemplo indicamos que el fondo de nuestra página sea la imagen fondo.jpg. Esta imagen debe existir en la misma carpeta que contenga la página HTML. Si queremos ordenar los archivos en diferentes carpetas, podemos indicar dónde se encuentra nuestra imagen.

Inserción de imagen en el documento

Fondo del documento:

La imagen aparecerá en el lugar donde se encuentre la etiqueta. Mediante el uso de otros parámetros podemos especificar la alineación del texto alrededor de la imagen, el tamaño de la misma y otras características. Vamos a ver los más utilizados:align: permite especificar la alineación de la imagen y del texto alrededor de la imagen. Puede tomar los valores left, right,top, texttop, middle, absmiddle, baseline.

Insertar Audio y VideoInsertar Audio:

Insertar Video:

Añadir una música de fondo a una página tiene pros y contras, si el sonido es apropiado al contenido de la página, puede hacerla más atractiva en contrapartida la descarga del archivo de sonido supone una carga que puede ralentizar la visualización de la página, la etiqueta a utilizarce es: <bgsoung> a la que se le debe acompañar con el src del archivo a reproducir.

Flash (. Swf) y MOV (. Mov) los tipos de archivos también son compatibles con el tag <embed>.. Swf - Tipos de Macromedia Flash File - compresión muy alta, ideal para la web!.. Wmv - Ventana de Microsoft Medios de tipos de archivos de vídeo - de buena calidad, la compresión variable.. Mov - Apple Quick Time Movie formato - buena calidad, la compresión variable.. Mpeg - el estándar aceptado para los archivos de vídeo web creadas por el Grupo de Expertos de Imágenes en movimiento - buena calidad, la compresión variable.

GRACIAS POR TU ATENCIÓN

manual html basico gutiecuador

Education