Trabajo 10

Diseño de Páginas web

Presentado Por:

Lizeth. M. Herrera Celis

Curso:

10°C

Presentado A:

Felipe Guzmán

Gimnasio Monseñor Manuel María Camargo

Área: Tecnología de informática

Bogotá 09 de agosto de 2012

TABLA DE CONTENIDO

• Objetivos……………………………………………………………….3

• Introducción…………………………………………………………...4

• Diseño Páginas Web…………………………………………………5

• Lenguaje HTML……………………………………………………….6

• Estructura Básica……………………………………………………..6

• Imágenes………………………………………………………………7

• Enlaces…………………………………………………………………7

• Tablas…………………………………………………………………..8

• Conclusión…………………………………………………………….9

• Bibliografía……………………………………………………………10

DISEÑO DE PAGINAS WEB-GMC-10° Página 2

OBJETIVOS

• Reconocer el lenguaje HTML como fundamento del diseño de páginas web.

• Conocer y aplicar la estructura básica para la construcción de páginas y

obtener un buen resultado para la misma.

• Lograr expresar elementos como imágenes, diagramas, tablas etc. en

lenguaje html.

• Obtener la información necesaria para la realización de páginas web

básicas con el fin de ir encontrando y desarrollando nuevos elementos par nutrir la pagina cada vez mas hasta encontrar los niveles ams avanzados de la misma.


INTRODUCCION

El diseño de páginas web es un medio de expresión, tanto de información como de entretenimiento, a las que estamos expuestos día a día, demostrando así mismo que es una herramienta muy utilizada entre las nuevas generaciones. Por lo tanto buscamos garantizar la buena utilización de las mismas con la comprensión básica de la construcción de estas y lograr aplicarlas a los diferentes campos de la vida.

HTML, puede que no sea un lenguaje muy reconocido pero si el principal fundamento para el desarrollo y diseño de una página web, pues a partir de ellas el programador es capaz de analizar la información y transformarla contribuyendo la formación de elementos tales como imágenes, texto, enlaces, tablas, diagramas y muchos mas aspectos que dan una buena expectativa para el público.

Es así como a partir de esta tesis se presentaran las temáticas más relevantes y las estructuras básicas para la construcción de estas en el programa de mayor acceso: “bloc de notas” un amplio programados que demostrara como se transforman ciertos códigos a grandes expectativas.


DISEÑO PAGINAS WEB

El diseño web es una actividad que consiste en la planificación, diseño e implementación de sitios web. No es simplemente una aplicación del diseño convencional, ya que requiere tener en cuenta la navegabilidad, interactividad, usabilidad, arquitectura de la información y la interacción de medios como el audio, texto, imagen, enlaces y vídeo. Se lo

considera dentro del diseño multimedia.

Para el diseño de páginas web debemos tener en cuenta tres etapas:

• La primera, es el diseño visual de la información que se desea editar. En esta etapa se trabaja distribuyendo el texto, los gráficos, los vínculos a otros documentos y otros objetos multimedia que se consideren pertinentes. Es importante que antes de trabajar sobre el computador se realice un bosquejo o pre diseño sobre el papel. Esto facilitará tener un orden claro sobre el diseño.

• La segunda, es la estructura y relación jerárquica de las páginas del sitio web, una vez que se tiene este boceto se pasa a 'escribir' la página web. Para esto, y fundamentalmente para manejar los vínculos entre documentos, se creó el lenguaje de marcación de hipertexto o HTML. Los enlaces que aparecen subrayados en este documento y otros de Wikipedia son ejemplos de hipertexto, puesto que al pulsar sobre ellos conducen a otras páginas con información relacionada. La importancia de la estructura y arborescencia web radica en que los visitantes no siempre entran por la


página principal o inicial y en ese caso el sitio debe darle la respuesta a lo que busca rápido, además permitirle navegar por el sitio.

• La tercera, etapa consiste en el posicionamiento en buscadores o SEO.

Ésta consiste en optimizar la estructura del contenido para mejorar la posición en que aparece la página en determinada búsqueda. Etapa no gustosa por los diseñadores gráficos, porque a diferencia del texto, aún para el año 2012 no se pueden tener nuevos resultados en los buscadores con sitios muy gráficos.

LENGUAJE HTML

HTML significa HyperText Markup Language. Es el lenguaje en que se escriben los millones de documentos que hoy existen en el World Wide Web. Cuando accedemos a uno de estos documentos, el cliente (Netscape, IE, Mosaic, Lynx, Mozilla) los interpreta y los muestra.

El lenguaje HTML se basa en la sintaxis SGML (Standard Generalized Markup Language). Esto quiere decir que los diferentes elementos (párrafos, encabezamientos, tablas, listas, ...) de un documento para la WWW se señalan intercalando etiquetas que indican al navegador cómo debe mostrarlo.

Una etiqueta HTML consiste en un signo menor "<", un nombre de una directiva (orden o comando para el navegador), seguido de los parámetros o atributos y un signo mayor ">".

ESTRUCTURA BASICA

Todas las páginas web tienen la siguiente estructura:

<html>

<head>

<title>Primera página</title>

</head>

<body>

</body>

</html>


En la primer linea encontramos la etiqueta <html>. Esta le indica al cliente que comienza un documento HTML.

Luego viene <head>, la cabecera, donde se pone información sobre el documento, que no se ve en la pantalla del navegador. Aquí puede ir el título <title> del documento, es lo que veremos como título de la ventana en los navegadores que lo permitan y como se conocerá nuestra página en algunos buscadores y en la lista de favoritos de los usuarios

Tras la cabezera viene <body>, el cuerpo, que es donde se coloca la información que queremos mostrar en la pantalla principal del navegador.

IMÁGENES:

Para incluir gráficos e imágenes en nuestras páginas utilizaremos la etiqueta <img> de esta manera:

<img src="fichero_grafico" alt="descripcion">

• El parámetro src especifica el nombre del fichero que contiene el gráfico.

Los formatos estándar en la red son el GIF y el JPG. La últimas versiones de Netscape y Explorer aceptan también el formato PNG.

• El parámetro alt especifica el texto que se mostrará en lugar del gráfico en

aquellos navegadores que no sean capaces de mostrarlos (como el Lynx) o en el supuesto de que el usuario los haya desactivado. Es por todo eso que conviene ponerlo siempre. Además algunos navegadores lo muestran cuando pasamos el ratón por encima de la imagen.

ENLACES:

El HTML es un lenguaje para hipertexto. Existen múltiples formatos de hipertexto (por ejemplo, los ficheros de ayuda de Windows) y lo que tienen en común es que todos poseen enlaces.

Para incorporar un enlace hay que utilizar esta etiqueta <a>. Todo lo que encerremos entre <a> y </a>, ya sea texto o imágenes, será considerado como enlace y sufrirá dos modificaciones:

El texto aparecerá subrayado y de un color distinto al habitual, y las imágenes estarán rodeadas por un borde del mismo color que el del texto del enlace.


Al pulsar sobre el enlace, se abrirá en el navegador el documento al que apuntaba el enlace.

En el enlace debemos especificar una dirección. Lo haremos de la siguiente manera:

<a href="dirección">Púlsame</a>

TABLAS

Las tablas son posiblemente la manera más clara de organizar la información. También es el modo más adecuado de maquetar texto y gráficos de una manera algo más controlada que con los parámetros align.

• La tabla está contenida entre las etiquetas <table> y </table>.• Cada fila de la tabla está delimitada por <tr> y </tr>

• Cada celda está determinada por las etiquetas <td> y </td>.

• Las etiquetas <th> y </th> sirven para indicar que el texto contenido es la cabecera de la columna. Las cabeceras de la tabla no son obligatorias.

• La etiquetas <caption> y </caption> delimitan el título de la tabla.

No es necesario definir de antemano cuantas filas o columnas tendrá la tabla, basta con colocar tantas celdas como queramos. La distribución de las celdas la ajustaremos con las etiquetas que delimitan las filas.

Una tabla con 2 filas y 3 columnas se declarará así:

<table>

<tr> <td>1,a</td> <td>1,b</td> <td>1,c</td> </tr>

<tr> <td>2,a</td> <td>2,b</td> <td>2,c</td> </tr>

</table>


CONCLUSION

De esta forma y luego de haber presentado los elementos básicos para la construcción de páginas web podemos concluir afirmando que dicha temática no es difícil es simplemente lograr comprender y analizar cada código para así aplicarlo al caso correcto depende lo que se necesite y a su vez demostrar que las expectativas cada vez son mas solidas.


BIBLIOGRAFIA

http://es.wikipedia.org/wiki/Dise%C3%B1o_web

http://www.juntadeandalucia.es/averroes/iesgaviota/informatica/html.html#SECTION1000


http://www.juntadeandalucia.es/averroes/iesgaviota/informatica/html.html#SECTION1000

http://es.wikipedia.org/wiki/Dise%C3%B1o_web

Documents

Trabajo 10