DISENO DE PAGINA WEB UNIDAD II

DISEÑO DE PAGINA WEB UNIDAD II: INTRODUCCION AL LENGUAJE HTML UNIDAD II: INTRODUCCION AL LENGUAJE HTML 2.1 LOS LENGUAJES DE MARCAS 2.2 EL LENGUAJE HTML CARACTERISTICAS 2.3 ELEMENTOS BASICOS DE HTML 2.4 ETIQUETAS HTML

2.5 IMÁGENES EN UNA PAGINA WEB 2.5.1 ATRIBUTOS 2.5.2 CARACTERISTICAS 2.5.3 FORMATOS 2.5.4 PROCESAMIENTO DE LAS IMÁGENES 2.6 CREACION DE TABLAS

INGENIERIA EN SISTEMAS COMPUTACIONALES

2.7 APLICACIONES DE LAS TABLAS EN UNA PAGINA WEB

2.8 HOJAS DE ESTILO 2.8.1 PROPIEDADES

LIC. LORENZO BASTAR MARTINEZ FRANCISCO JAVIER MARTINEZ LOPEZ

2.8.2 APLICACIONES 2.9 MULTIMEDIA. INCLUIR OBJETOS EN UNA PAGINA WEB

7° CUATRIMESTRE

2.10 FRAMES. CARACTERISTICAS Y

21/NOVIEMBRE/2015

ELEMENTOS PARA INCLUIRLOS 2.11 LOS LENGUAJES DE SCRIPTS 2.12 LAS PAGINAS WEB DINAMICAS

INTRODUCCION

HTML es el lenguaje en el que se construyen las páginas web. Estas páginas constituyen un gran aliado como medio de comunicación, capaz de llegar a millones de personas. Antes de comenzar a crear nuestras páginas web,

conviene revisar algunos

conceptos básicos que casi forman parte de nuestra vida cotidiana, pero en los que no siempre nos hemos parado a pensar de forma más reposada.

1

INDICE INTRODUCCION ........................................................................................................................ 1 2.1 LOS LENGUAJES DE MARCAS ............................................................................................... 3 2.2 EL LENGUAJE HTML CARACTERISTICAS ................................................................................. 4 2.3 ELEMENTOS BASICOS DE HTML ........................................................................................... 5 2.4 ETIQUETAS HTML ................................................................................................................ 7 2.5 IMÁGENES EN UNA PAGINA WEB ........................................................................................ 8 2.5.1 ATRIBUTOS ...................................................................................................................... 8 2.5.2 CARACTERISTICAS .......................................................................................................... 10 2.5.3 FORMATOS .................................................................................................................... 11 2.5.4 PROCESAMIENTO DE LAS IMÁGENES .............................................................................. 12 2.6 CREACION DE TABLAS ....................................................................................................... 13 2.7 APLICACIONES DE LAS TABLAS EN UNA PAGINA WEB ......................................................... 14 2.8 HOJAS DE ESTILO............................................................................................................... 15 2.8.1 PROPIEDADES ................................................................................................................ 16 2.8.2 APLICACIONES................................................................................................................ 20 2.9 MULTIMEDIA. INCLUIR OBJETOS EN UNA PAGINA WEB ...................................................... 21 2.10 FRAMES. CARACTERISTICAS Y ELEMENTOS PARA INCLUIRLOS........................................... 24 2.11 LOS LENGUAJES DE SCRIPTS ............................................................................................. 25 2.12 LAS PAGINAS WEB DINAMICAS ........................................................................................ 27 CONCLUSION .......................................................................................................................... 28 BIBLIOGRAFIA......................................................................................................................... 29

2

2.1 LOS LENGUAJES DE MARCAS Un lenguaje de marcado o lenguaje de marcas es una forma de codificar un documento que, junto con el texto, incorpora etiquetas o marcas que contienen información adicional acerca de la estructura del texto o su presentación.

El lenguaje de marcas más extendido es el HTML ("HyperText Markup Language", Lenguaje de marcado de hipertexto), fundamento del World Wide Web (entramado de comunicación de alcance mundial). Los lenguajes de marcado suelen confundirse con lenguajes de programación. Sin embargo, no son lo mismo, ya que el lenguaje de marcado no tiene funciones aritméticas o variables, como sí poseen los lenguajes de programación. Históricamente, el marcado se usaba y se usa en la industria editorial y de la comunicación, así como entre autores, editores e impresores.

Un ejemplo de cómo funciona el lenguaje de marcado puede observarse en el dictado de viva voz de un documento a una persona que lo transcribe a máquina: Ponga estilo de carta. Ponga comillas, ponga mayúsculas, Estimado Juan, ponga dos puntos, aparte, sangría, ponga primera letra mayúscula, te escribo esta carta, ponga negrillas, de forma muy urgente, cierre negrilla, ya que no me has enviado... etc".

3

2.2 EL LENGUAJE HTML CARACTERISTICAS

HTML es un lenguaje de marcas orientado a la publicación de documentos en Internet. La mayoría de las marcas son semánticas. Es un lenguaje extensible, al que se le pueden añadir nuevas características, marcas y funciones, dependiendo de la experiencia y la habilidad del programador. Los documentos HTML están formados por una serie de bloques de texto (titulares, párrafos, listas...). La interpretación de estas entidades se deja al navegador. HTML es un lenguaje estructurado. HTML utiliza etiquetas o marcas, que consisten en breves instrucciones de comienzo y final, mediante las cuales se determina la forma en la que debe aparecer el texto en el navegador, así como las imágenes y demás elementos.

4

2.3 ELEMENTOS BASICOS DE HTML Los elementos son la estructura básica de HTML. Los elementos tienen dos propiedades básicas: atributos y contenido. Cada atributo y contenido tiene ciertas restricciones para que se considere válido al documento HTML. Un elemento generalmente tiene una etiqueta de inicio (p.ej. ) y una etiqueta de cierre (p.ej.). Los atributos del elemento están contenidos en la etiqueta de inicio y el contenido está ubicado entre las dos etiquetas (p.ej. Contenido). Algunos elementos, tales como , no tienen contenido ni llevan una etiqueta de cierre. Debajo se listan varios tipos de elementos de marcado usados en HTML. Estructura general de una línea de código en el lenguaje de etiquetas HTML El marcado estructural describe el propósito del texto. Por ejemplo, Golfestablece a "Golf" como un encabezamiento de segundo nivel, el cual se mostraría en un navegador de una manera similar al título "Marcado HTML" al principio de esta sección. El marcado estructural no define cómo se verá el elemento, pero la mayoría delos navegadores web han estandarizado el formato de los elementos. Un formato específico puede ser aplicado al texto por medio de hojas de estilo en cascada. El marcado presentacional describe la apariencia del texto, sin importar su función. Por ejemplo, negrita indica que los navegadores web visuales deben mostrar el texto en negrita pero no indica qué deben hacer los navegadores web que muestran el contenido de otra manera (por ejemplo, los que leen el texto en voz alta). En el caso denegrita e itálica, existen elementos que se ven de la misma manera pero tienen una naturaleza más semántica: enfásis fuerte yénfasis.

5

Es fácil ver cómo un lector de pantalla debería interpretar estos dos elementos. Sin

embargo,

son

equivalentes

a

sus

correspondientes

elementos

presentacionales: un lector de pantalla no debería decir más fuerte el nombre de un libro, aunque éste esté en itálicas en una pantalla. La mayoría del marcado presentacional ha sido desechada con HTML 4.0, en favor de Hojas de estilo encascada. El marcado hipertextual se utiliza para enlazar partes del documento con otros documentos o con otras partes del mismo documento. Para crear un enlace es necesario utilizar la etiqueta de ancla junto con el atributo href, que establecerá la dirección URL a la que apunta el enlace. Por ejemplo, un enlace a la Wikipedia sería de la forma Wikipedia. También se pueden crear enlaces sobre otros objetos, tales como imágenes .

6

2.4 ETIQUETAS HTML El lenguaje HTML es un lenguaje de marcas, estas marcas serán fragmentos de texto destacado de una forma especial que permiten la definición de las distintas instrucciones de HTML, tanto los efectos a aplicar sobre el texto como las distintas estructuras del lenguaje. A estas marcas las denominaremos etiquetas y serán la base principal del lenguaje HTML. En documento HTML será un fichero texto con etiquetas que variarán la forma de su presentación. Una etiqueta será un texto incluido entre los símbolos menor que < y mayor que >.. El texto incluido dentro de los símbolos será explicativo de la utilidad de la etiqueta. Por ejemplo:



Letra Negrita, del inglés Bold (negrita).

Definirá una tabla.

Inclusión de una Imagen.

Existe normalmente una etiqueta de inicio y otra de fin, la de fin contendrá el mismo texto que la de inicio añadiéndole al principio una barra inclinada /. El efecto que define la etiqueta tendrá validez para todo lo que este incluido entre las etiquetas de inicio y fin, ya sea texto plano o otras etiquetas HTML. http://www.virtualnauta.com/html-etiquetas

7

2.5 IMÁGENES EN UNA PAGINA WEB Bien sea para ilustrar la información contenida en nuestras páginas o para integrar un largo texto o, por que no, por cuestiones estéticas, es prácticamente imposible evitar colocar alguna que otra imagen en nuestras páginas. Al emplear las imágenes debemos guiarnos por unas cuantas reglas básicas: Procurar que las imágenes sirvan para algo, que den información. Esta es una de las razones por las que debemos usar los atributos ALT. No pasarnos. La página no debe pesar demasiado. Un visitante que ve como la página tarda en cargarse más de 15 o 20 seg lo más probable es que se vaya y, lo que es peor, que no vuelva. Procurar un equilibrio entre tamaño del archivo de imagen y calidad de ésta. A veces una imagen muy grande requiere una compresión tal que al final tenemos una calidad pésima. En estos casos debemos plantearnos el tipo de imagen a usar.

2.5.1 ATRIBUTOS Generalmente las imágenes son guardadas en archivos del tipo GIF para dibujos y JPG para las fotos. En este tema nos limitaremos a explicar como insertar y alinear en nuestra página una imagen determinada. La etiqueta que emplearemos para insertar una imagen en la página web es (image). Esta etiqueta no tiene cierre y tenemos que especificar donde se encuentra la imagen que queremos colocar en la página, gracias al atributo src (source). Sería algo así:

8

Para especificar la ruta de la imagen haremos lo mismo que hicimos para los enlaces. Otros atributos de la etiqueta son: El atributo alt muestra durante la carga de la imagen un descripción de esta, con lo que el navegante se puede hacer una idea de lo que vera en ese lugar. Este atributo no es indispensable pero si es muy útil para imágenes que tarden en cargarse. Incluso en aquellos navegadores que tienen desactivado el mostrar imágenes como por ejemplo los que usan los invidentes que leerán el texto del atributo alt. Los atributos height y width son los que definen la altura y anchura de la imagen en píxeles. Es conveniente especificar las dimensiones de las imágenes porque de este modo el navegador le reserva un espacio en la página y nos deja ir leyendo el texto tranquilamente mientras se cargan las imágenes. Para saber cuales son las dimensiones de las imágenes pinchamos en ellas con el botón derecho, entonces se despliega un menú y elegimos propiedades. De esta forma se abre una ventana en la que nos especifica cual es el alto y ancho de la imagen. Una cuestión importante es no redimensionar la imagen reduciendo el valor de estos atributos, partiendo de una imagen muy grande, porque lo único que conseguiremos es aumentar el tiempo de carga, para ello es mejor emplear programas específicos de diseño gráfico. El atributo border nos mide el tamaño en píxel del cuadro que rodea la imagen, de esta forma podemos recuadrar la imagen si lo deseamos. Este atributo es principalmente útil cuando queremos eliminar el borde que aparece cuando la imagen sirve de enlace. En este caso, debemos especificar border=” 0”. Los atributos vspace y hspace sirven para indicar el espacio libre, en píxeles, que hay entre la imagen y otros elementos que la rodean, como por ejemplo el texto, otras imágenes, etc.

9

El atributo lowsrc este atributo le indica al navegador que primero tiene que cargar una imagen de baja resolución, con lo que se cargara más rápidamente. Y luego cargara la imagen real con mucha más calidad, de esta forma el navegante siempre vera la imagen. Este atributo esta en desuso, porque tenemos que incluir en la página dos imágenes iguales una con menos y otra con más resolución. Por ejemplo, el código fuente de una imagen que tiene unas dimensiones de 28 de ancho y 21 de alto y un borde de 3 píxeles sería: Como podemos adivinar una imagen, al igual que ya vimos con el texto, sirve como enlace. Un ejemplo del código que tendríamos que emplear sería:

2.5.2 CARACTERISTICAS En Internet se utilizan principalmente dos tipos de archivos gráficos GIF y JPG, pensados especialmente para optimizar el tamaño que ocupan en disco, ya que los archivos pequeños se transmiten más rápidamente por la Red. El formato de archivo GIF se usa para las imágenes que tengan dibujos, mientras que el formato JPG se usa para las fotografías. Los dos comprimen las imágenes para guardarlas. La forma de comprimir la imagen que utiliza cada formato es lo que los hace ideales para unos u otros propósitos. Adicionalmente, se puede usar un tercer formato gráfico en las páginas web, el PNG. Este formato no tiene tanta aceptación como el GIF o JPG por varias razones, entre las que destacan el desconocimiento del formato por parte de los desarrolladores, que las herramientas habituales para tratar gráficos (como por ejemplo Photoshop) generalmente no lo soportaban y que los navegadores antiguos también tienen problemas para visualizarlas.

10

Sin embargo, el formato se comporta muy bien en cuanto a compresión y calidad del gráfico conseguido, por lo que resulta muy útil en infinidad de casos. Todos estos problemas han pasado y ya sólo Internet Explorer 6 tiene algunos fallos cuando trata con PNG, pero la aceptación actual es más que suficiente para incorporarlo a nuestras posibilidades reales de trabajo con formatos y optimización de archivos.

2.5.3 FORMATOS

11

2.5.4 PROCESAMIENTO DE LAS IMÁGENES La inclusión de imágenes en páginas web es un aspecto fundamental en el diseño. El tratamiento previo de las imágenes antes de incluirlas es muy importante si queremos obtener un buen resultado. Las acciones que se realizan con mayor frecuencia sobre las imágenes consisten en recortarlas, cambiar su tamaño y formato, ajustar el brillo, el contraste y los colores, aplicar filtros y efectos y crear transparencias. Antes de comenzar debemos saber que existen dos formatos que podemos usar en la web: GIF y JPG. Si nuestra imagen se haya en otro formato, tendremos que transformarla a uno de éstos. Podremos identificar el formato de una imagen comprobando su extensión. Es importante que el tamaño de la imagen (la cantidad de espacio o memoria que ocupa) sea la mínima posible ya que así la carga de la página será más ágil. Según el tipo de imagen que sea será recomendable usar un formato u otro. Para imágenes con pocos colores como los iconos, botones y dibujos en general usaremos el formato GIF (hasta 256 colores distintos a la vez). Para imágenes con muchos colores (miles o millones) como las fotografías usaremos el JPG. Ambos formatos emplean técnicas de compresión para que la imagen no ocupe demasiado espacio de almacenamiento. Las imágenes fotográficas suelen mucho espacio (decenas o cientos de kilobytes), por ello el JPG permite seleccionar el grado de compresión a aplicar; sin embargo debemos andarnos con ojo, pues este formato basa su compresión en la pérdida de calidad de la imagen que, si bien es inapreciable hasta un 60% ó 70%, si bajamos más podemos llegar a obtener una imagen muy mala. Los iconos y dibujos suelen ser de un tamaño bastante inferior (unos pocos kilobytes) y la compresión de los GIF es automática.

12

2.6 CREACION DE TABLAS En HTML, una poderosa herramienta a la hora de mostrar cierto tipo de información son las tablas. Hay muchos sitios que por su naturaleza no usan tablas aunque existen algunas ocasiones en que el papel de las tablas se vuelve esencial. El fin de las tablas es preferentemente contener datos ordenados en celdas (filas y columnas). En principio, no deben ser usadas para crear divisiones de cara a mostrar una página web, es decir, es preferible que una página web no esté dividida en distintos espacios usando tablas. Para maquetar una página web y dividirla en distintos espacios se usarán otras herramientas (capas, elementos flotantes, etc.). Las tablas pueden ser consideradas como un grupo de filas donde cada una de ellas contiene un grupo de celdas. Una tabla puede ser insertada en un documento HTML usando tres elementos básicos: el elemento TABLE (estructura contenedora principal), el elemento TR (contenedor de fila) y el elemento TD (celda). Cuando el contenido de una celda debe ser vacío, deberías usar una espacio en blanco (que en HTML se escribe como) como su contenido. Esto hará que tu página se visualice correctamente, ya que algunos navegadores tienen problemas representando celdas vacías.

13

2.7 APLICACIONES DE LAS TABLAS EN UNA PAGINA WEB Una tabla en Html no es más que un modo de presentar una serie de datos que guardan cierto orden y relación entre ellos. Un ejemplo de tabla es la siguiente:

Como ves, usando tablas puedes organizar los datos de modo que aparezcan ordenados en filas y columnas. También puedes hacer que aparezca un borde alrededor de cada dato y, como puedes ver en la imagen de abajo, combinar algunas celdas:

Una vez entendido esto, puedes imagina las aplicaciones que se le pueden dar. Desde por ejemplo colocar datos ordenadamente, como en el ejemplo anterior, hasta usarla para darle forma a una web, si en lugar de meros datos, lo que colocas en cada celda son imágenes y conjuntos de datos. Por ejemplo, puedes colocar una imagen de fondo en la primera fila con aspecto de borde superior, otra con aspecto de borde inferior en la fila de abajo, un menú en una celda lateral, y dejar los textos principales de la web para las celdas de la parte central, tal que así:

14

2.8 HOJAS DE ESTILO Las hojas de estilo (style sheets) son conjuntos de instrucciones, a veces en forma de archivo anexo, que se asocian a los archivos de texto y se ocupan de los aspectos de formato y de presentación de los contenidos: tipo, fuente y tamaño de letras, alineación y posicionamiento del texto, colores y fondos, etc. Las hojas de estilo permiten liberar la composición del texto de los aspectos visuales y favorecen que se estructure y anote mediante códigos que permiten un tratamiento más eficaz de los contenidos. El uso adecuado de las hojas de estilo es uno de los aspectos clave de la edición digital. Las hojas de estilo son una herramienta de gran utilidad de los programas de tratamiento de textos, como OpenOffice.org o Microsoft Word. Asimismo, constituyen una parte esencial de los lenguajes de marcas para edición digital: LaTeX, XML y XHTML. Dos lenguajes de hojas de estilo son CSS y XSL.

15

2.8.1 PROPIEDADES Propiedades de fuente Propiedad fontfamily

font-style fontweight

font-size

fontvariant font

Valor Fuente específica (Arial, Times, Verdana) Familia (serif, sans-serif, fantasy, monospace, cursive) normal, italic, oblique lighter, normal, bold o bolder. Valor numérico (100, 200, 300, 400, 500, 600, 700, 800, 900) xx-small, x-small, small, medium, large, x-large, xxlarge Tamaño en puntos (pt), cm, % normal, small-caps

Descripción Define uno o más nombres de fuentes o familias de fuentes. Si se definen múltiples fuentes, se utilizará la primera que se encuentre en el sistema del usuario.

font: Verdana, Arial, bold italic 8px;

Acceso directo a todas las propiedades

Define el estilo de la escritura Define el grosor de la fuente

Define el tamaño de la fuente

Define una variante (mayúsculas chicas)

Textos y párrafos Propiedad color line-height text-align text-indent textdecoration textshadow

texttransform whitespace

word-

Valor "#RRGGBB" line-height: 12pt; left, center, right o justify text-indent: 5px; blink (parpadeo), underline (subrayado), line-through (tachado), overline (línea sobre el texto) o none (sin decoración) text-shadow: 1px 2px 4px black;

uppercase (mayúscula), lowercase (minúscula) o capitalize (primea letra en mayúscula) normal (el texto continuará en la próxima línea), pre (el texto aparecerá con los espacios en blanco que se ingresaron), nowrap (el texto no continuará) word-spacing: 6px;

16

Descripción Define el color del texto Define el espacio entre las líneas Define la alineación del texto Define la sangría Define la decoración

Define una sombra paralela del texto y representa, respectivamente, la sombra hacia la derecha, hacia abajo, radio de desenfoque y color. Define la capitalización del texto

División de palabras

Define cuánto espacio insertar entre las

spacing width height

palabras Define el ancho de un texto o una imagen

en puntos (pts), pulgadas ("), centímetros, píxeles (px) o en % en puntos (pts), pulgadas ("), centímetros, píxeles (px) o en %

Define la altura de un texto o una imagen

Colores de fondo Propiedad background-color backgroundimage backgroundrepeat backgroundattachment backgroundposition background

Valor "#RRGGBB" url(http://url)

Descripción Define el color de fondo Define la imagen de fondo

repeat, repeat-x, repeat-y, no-repeat scroll, fixed

Define cómo se repite la imagen de fondo

top, middle, bottom, left, center o right background: url(test.jpg) fixed repeat;

Especifica si la imagen de fondo se quedará en su lugar cuando la pantalla se desplace Posiciona la imagen con respecto a la esquina superior izquierda Acceso directo a las propiedades de fondo

Márgenes Propiedad margin-top margin-right margin-bottom margin-left margin

Ejemplo margin-top: 5px; margin-right: 0.5em; margin-bottom: 2pt; margin-left: 0; margin: 5px 0.5em 2pt 0;

Descripción Valor del margen superior Valor del margen derecho Valor del margen inferior Valor del margen izquierdo Acceso directo a las propiedades de márgenes

Bordes Propiedad border[-top -left bottom -right]-width border[-top -left bottom -right]-color border[-top -left bottom -right]-style border-collapse Border

Valor en puntos (pts), pulgadas ("), centímetros, píxeles (px) o en % border-left-color: #RRGGBB; solid (sólido), dashed (con trazos), dotted (con puntos), double (dos líneas) o ridge (tridimensional) collapse separate border: 1px 0 0 2px dotted green;

17

Descripción Grosor del borde (para la ubicación dada) Color del borde (para la ubicación dada) Estilo del borde (para la ubicación dada) Agrega o elimina el efecto "3D" Acceso directo global a las propiedades de bordes

Tablas Propiedad bordercollapse borderspacing captionside empty-cells

Valor separate o collapse

tablelayout

fixed (independiente del contenido de la celda) o auto (depende del contenido de la celda) always (siempre antes de cada celda) o once (sólo una vez)

speakheaders

border-spacing: 4px;

Descripción Combina los bordes de las celdas (collapse), no los combina (separate) Espacio de las celdas

top, bottom, left o right

Ubica la leyenda de la tabla

show o collapse

Muestra (show) u oculta (collapse) las celdas vacías Ancho fijo o variable

Propiedad destinada para los ciegos y minusválidos visuales que indica cómo actúa el sonido al leer las celdas de encabezado de las tablas

Relleno Propiedad padding-top padding-right padding-bottom padding-left padding

Valor padding-top: 3px; padding-right: 0.25em; padding-bottom: 0; padding-left: 2pt; padding: 3px 0.25em 0 2pt;

Descripción Relleno entre el elemento y el borde superior Relleno entre el elemento y el borde derecho Relleno entre el elemento y el borde inferior Relleno entre el elemento y el borde izquierdo Acceso directo a las propiedades de relleno

Listas Propiedad list-style-type list-styleimage list-styleposition list-style

Valor decimal, upper-roman, lower-latin, disc, circle, square o none list-style-image: url(image.png); inside o outside

18

Descripción Tipo de viñetas y numeración Personaliza las viñetas con una imagen Especifica la sangría de las viñetas Acceso directo a las propiedades de lista

Presentación de la página Propiedad @page size margin-top margin-right marginbottom margin-left marks

page-breakbefore page-breakafter orphans

widows

Valor @page(size: portrait) auto, landscape o portrait margin-top: 3 cm; margin-right: 1,5 cm; margin-bottom: 1 cm;

Descripción Define la presentación de impresión Formato de impresión Margen superior Margen derecho Margen inferior

margin-left: 2 cm; crop (marcas de recorte), cross (marcas cruzadas), none (sin marcas) Always, avoid

Margen izquierdo Marcas de recorte y marcas cruzadas

Always, avoid

Inserta un salto de página después de un elemento

orphans: 2;

Evita que haya líneas huérfanas al final de una página. Define la cantidad mínima de líneas de un elemento que quedan en la parte inferior de una página antes del salto de página. Evita que haya líneas viudas al final de una página. Define la cantidad mínima de líneas de un elemento que quedan en la parte superior de una página después de un salto de página.

widows: 1;

Inserta un salto de página antes de un elemento

http://es.ccm.net/contents/css-2026809048#158

19

2.8.2 APLICACIONES Las Hojas de estilo son una herramienta muy poderosa a utilizar

por los

diseñadores de sitios web. Ellas ofrecen una gran consistencia en los diseños de las páginas por brindar un mayor control sobre el esquema y diseño de un correcto acabado de una página Web Inventadas en 1997, las Hojas de Estilo en Cascada o Cascading Style Sheets (CSS), son estudiadas y usadas por una extensa cantidad de diseñadores de Web, pues representan una manera más confortable de desarrollar su trabajo. Los estilos resuelven un problema común [3]. La etiqueta HTML se diseñó originalmente para definir el contenido de un documento. Sus etiquetas, por ejemplo, nos dicen cuándo es un título, párrafo, o tabla, al usar etiquetas como , , u otras. De esta forma los dos visualizadores mayores de páginas Web (Netscape e Internet Explorer)continuaron adicionando nuevas etiquetas HTML y atributos, como los atributos del color de la etiqueta ; creando con esto una gran dificultad a los creadores de sitios Web, debido a la no estandarización de etiquetas y atributos. Las Hojas de Estilo en Cascada constituyen un mecanismo que ha sido específicamente desarrollado para facilitar el trabajo de los diseñadores de páginas Web. Este trabajo se realiza con el objetivo de mostrar la importancia del uso de hojas de estilo en las aplicaciones Web. Se presentan ejemplos básicos y se discute los beneficios en el funcionamiento y estandarización de los resultados visuales de las páginas Web. También se tratan aspectos que deben contemplarse para el diseño de páginas Web con la utilización de hojas de estilo.

20

2.9 MULTIMEDIA. INCLUIR OBJETOS EN UNA PAGINA WEB Las características multimedia de HTML permiten a los autores incluir en sus páginas imágenes, aplicaciones (programas que se descargan automáticamente y se ejecutan en la máquina del usuario), videoclips, y otros documentos HTML en sus páginas. Por ejemplo, para incluir una imagen PNG en un documento, los autores pueden escribir: Aquí tienen un primer plano del Gran Cañón: Esto es un primer plano del Gran Cañón. Las versiones anteriores de HTML permitían a los autores incluir imágenes (por medio de IMG) y aplicaciones (por medio de APPLET). Estos elementos tienen varias limitaciones: 

No sirven para resolver el problema más general de cómo incluir tipos de medios nuevos y futuros.



El elemento APPLET sólo funciona con aplicaciones basadas en Java. Este elemento está desaprobado en favor de OBJECT.



Plantean problemas de accesibilidad.

Para solucionar estos problemas, HTML 4 introduce el elemento OBJECT, que ofrece una solución universal para la inclusión de objetos genéricos. El elemento OBJECT permite a los autores HTML especificar todo lo que necesita un agente de usuario para la representación de un objeto: código fuente, valores iniciales, y datos en tiempo de ejecución.

21

En esta especificación, el término "objeto" se utiliza para describir las cosas que la gente quiere colocar en los documentos HTML; otros términos usados habitualmente son: applets, plug-ins, controladores de medios, etc. El nuevo elemento OBJECT asume así algunas de las tareas realizadas por los elementos existentes. Considérese la siguiente tabla de funcionalidades: Tipo de inclusión

Elemento específico

Elemento genérico

Imagen

IMG

OBJECT

Aplicación

APPLET (Desaprobado) OBJECT

Otro documento HTML IFRAME

OBJECT

La tabla indica que cada tipo de inclusión tiene una solución específica y una general. El elemento genérico OBJECT servirá como solución de implementación de los tipos de medios futuros. Para incluir imágenes, los autores pueden usar el elemento OBJECT o el elemento IMG. Para incluir aplicaciones, los autores deberían usar el elemento OBJECT ya que el elemento APPLET está desaprobado. Para incluir un documento HTML en otros, los autores pueden usar o bien el nuevo elemento IFRAME o bien el elemento OBJECT. En ambos casos, el documento incluido sigue siendo independiente del documento principal. Los agentes de usuario visuales pueden presentar el documento incluido en una ventana diferenciada del documento principal. Consulte las notas sobre documentos incluidos para una comparación entre OBJECT e IFRAME en lo que a inclusión de documentos se refiere.

22

Las imágenes y otros objetos incluidos pueden tener hipervínculos asociados a ellos, tanto a través de los mecanismos de vinculación estándar, como también a través de mapas de imágenes. Un mapa de imágenes especifica las regiones geométricas activas de un objeto incluido, y asigna un vínculo a cada región. Cuando se activan, estos vínculos pueden hacer que se abra un documento, que se ejecute un programa en el servidor, etc. En las secciones siguientes, hablamos sobre los distintos mecanismos que están a disposición de los autores para inclusiones multimedia y para crear mapas de imágenes de dichas inclusiones.

23

2.10 FRAMES. CARACTERISTICAS Y ELEMENTOS PARA INCLUIRLOS Los frames (en inglés frame = cuadro, bastidor o marco) es un elemento implementado por Netscape, que permite dividir la pantalla en varias áreas independientes unas de otras, y por tanto con contenidos distintos, aunque puedan estar relacionados. No hay límites para el contenido de cada una de estas áreas: tienen las mismas propiedades que la pantalla completa normal, tal y como la conocemos. No hay que confundir los frames con las tablas. Su apariencia, a veces, puede ser similar, pero mientras el contenido de la celda de una tabla es fijo, en un área de pantalla creado por el elemento FRAME se dispone de todos los recursos del HTML. Es una zona viva. Las páginas que contienen una definición de FRAME no pueden contener el elemento BODY ni ninguno de los elementos que habitualmente aparecen en el BODY antes del elemento FRAMESET que es el que define la creación del FRAME. Si esto no se cumple, el FRAME será ignorado. Algunos visualizadores no soportan los frames. Para que nuestra página con frames no resulte opaca a ellos, se utilizará el elemento NOFRAMES que permite ofrecer un texto alternativo en entorno normal. Los frames permiten una flexibilidad de presentación extraordinaria, y para contenidos muy complejos, de difícil estructura por los medios convencionales del HTML, son casi insustituibles. De nuevo se presenta la duda de para qué visualizador es preferible programar nuestro WWW. Por supuesto, los frames son parametrizables en cuanto a tamaño y número de áreas, si éstas se pueden redimensionar por el usuario o son fijas, si tienen o no barras de scrolling, se pueden anidar, relacionar sus contenidos, etc.

24

2.11 LOS LENGUAJES DE SCRIPTS Un script es un programa que puede acompañar un documento HTML o estar contenido en su interior. Las instrucciones del programa se ejecutan cuando se carga el documento, o cuando se produce alguna circunstancia tal como la activación de un enlace por parte del usuario. Este segundo tipo de acciones, desencadenan lo que se conocen como eventos. Gracias a los scripts se pueden realizar algunas mejoras como: 

Generación dinámica del documento en el momento de la carga.



Validación de datos introducidos en un formulario, así como el rellenado automático de aquellos controles del mismo que lo precisen.



Controlar los eventos que se producen en la página: Un elemento toma el foco, un elemento es activado con el ratón, etc.

Podemos distinguir 2 tipos de scripts en un documento HTML: 1. El primero es el que se ejecuta durante la descarga de la página en el navegador. Existe la posibilidad de incluir contenido específico para aquellos navegadores que no incluyen scripts entre sus características. 2. El segundo tipo son los ejecutados cada vez que un usuario (o el navegador) genera lo que se llama un "evento". Por ejemplo la pulsación de un botón en un formulario.

25

Ejemplos de algunos lenguajes de script son: 

VBScript: Implementación de Visual Basic para crear aplicaciones para Internet Explorer.



JScript: Implementación de Microsoft del lenguaje de scripting basado en Java.



JavaScript: Lenguaje de elaboración de scripts para incrustarse en archivos HTML, que es con diferencia el lenguaje de script más usado en Internet.



ActionScript: Lenguaje de script de Macromedia para la aplicación Flash.



ECMAScript: Lenguaje de scripting que soporta el estándar ECMA-262 (European Computer Manufacturers Association).

Existe un estándar para los lenguajes para Internet: la especificación de lenguaje ECMA 262 (ECMAScript Edition 3). Todos los programas de guiones comentados anteriormente, cumplen o intentan cumplir, dichas especificaciones. El estándar ECMAScript describe un lenguaje de secuencias de comandos de Web que puede mejorar y dar vida a los proyectos Web. Aunque no tienen las mismas características que los lenguajes de altas prestaciones orientados a objetos, como puede ser C++, los lenguajes de guiones cumplen muy bien su cometido en el medio para el que se han creado (Internet).

26

2.12 LAS PAGINAS WEB DINAMICAS Las páginas web dinámicas son aquellas en las que la información presentada se genera a partir de una petición del usuario de la página. Contrariamente a lo que ocurre con las páginas estáticas, en las que su contenido se encuentra predeterminado, en las páginas dinámicas la información aparece inmediatamente después de una solicitud echa por el usuario. Esto se hace posible porque una página dinámica tiene asociada una Base de Datos desde la que se permite visualizar la información contenida en ella. Otra de las ventajas de éste tipo de páginas es que permiten almacenar y hacer actualizaciones de la información contenida en la misma, así cómo también modificaciones dinámicas de la estructura y del diseño por parte de su propietario. Para la creación de este tipo de páginas, además de la existencia de una Base de Datos asociada a las mismas deberán utilizarse etiquetas HTML y algún lenguaje de programación que se ejecute “del lado del servidor”, es decir, que esté alojado en el mismo servidor en el que está alojada la página web. Los lenguajes utilizados para la generación de este tipo de páginas son principalmente: Perl CGI, PHP , JSP y ASP . Los manejadores de bases de datos que pueden trabajar con páginas dinámicas son principalmente: PostgresSQL, MySQL , Oracle y Microsoft SQL Server.

27

CONCLUSION

HTML es el idioma internacional de la Red. Es un simple lenguaje que permite a los publicadores web crear páginas complejas de texto e imágenes, que pueden ser vistas por cualquiera, sin que importe que clase de ordenador o navegador se esté usando.

El lenguaje HTML puede ser creado y editado con cualquier editor de textos básico, como puede ser Gedit en Linux, el Blog de notas de Windows, o cualquier otro editor que admita texto sin formato como GNU Emacs, Microsoft Wordpad, entre otros.

Un elemento muy importante del lenguaje HTML son los atributos de cada etiqueta, que representan opciones que modifican su comportamiento por defecto. Los atributos se incluyen junto con la etiqueta correspondiente, dentro de los símbolos . Las etiquetas de final nunca incluyen atributos.

Los

atributos

pueden

tener

asignado

un

valor

característico,

que

se

incluye con el formato nombre=”…”. Este valor puede ser una opción dentro de una lista de posibilidades prefijadas, un nombre de fichero, un número, etc. Por lo general, siempre se debe incluir el valor entre dobles comillas, de forma que se respete la integridad de la información.

HTML utiliza etiquetas o marcas, que consisten en breves instrucciones de comienzo y final, mediante las cuales se determinan la forma en la que debe aparecer en su navegador el texto, así como también las imágenes y los demás elementos, en la pantalla del ordenador. Toda etiqueta se identifica porque está encerrada entre los signos “menor que” y “mayor que” (< >), y algunas tienen atributos que pueden tomar algún valor.

28

BIBLIOGRAFIA http://www.itpn.mx/recursosisc/8semestre/programacionweb/Unidad%20II.pdf http://www.tutorialhtml.net/manualHTML/caracteristicas-html.php http://es.scribd.com/doc/27909473/HTML-Elementos-Basicos#scribd http://www2.uca.es/serv/sc/manual-html/etiquet.htm http://creatuweb.espaciolatino.com/guia/imagenes.htm http://larevistainformatica.com/imagenes-atributos.htm http://www.desarrolloweb.com/articulos/19.php http://aprenderaprogramar.com/index.php?option=com_content&view=article&id=516:c rear-tablas-html-colspan-y-rowspan-unir-celdas-horizontal-y-vertical-tr-td-th-caption-otitulo-cu00719b&catid=69:tutorial-basico-programador-web-html-desdecero&Itemid=192 http://www.comocreartuweb.com/curso-de-html/mas-codigo-html/las-tablas.html https://es.wikipedia.org/wiki/Hoja_de_estilo http://es.ccm.net/contents/158-css-hojas-de-estilo http://www.rcim.sld.cu/revista_19/articulo_pdf/hojasestilocascada.pdf https://www.uv.es/jac/guia/frame.htm http://www.internetmania.net/int0/int61.htm http://www.buyto.es/general-diseno-web/que-es-una-pagina-web-dinamica-para-quesirve-una-pagina-web-dinamica

29