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

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

3. 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.
DISEÑO DE PAGINAS WEB-GMC-10° Página 3

4. 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 DE PAGINAS WEB-GMC-10° Página 4

5. 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
DISEÑO DE PAGINAS WEB-GMC-10° Página 5

6. 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>
DISEÑO DE PAGINAS WEB-GMC-10° Página 6

7. 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.
DISEÑO DE PAGINAS WEB-GMC-10° Página 7

8. 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&uacute;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>
DISEÑO DE PAGINAS WEB-GMC-10° Página 8

9. 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.
DISEÑO DE PAGINAS WEB-GMC-10° Página 9

10. BIBLIOGRAFIA
http://es.wikipedia.org/wiki/Dise%C3%B1o_web
http://www.juntadeandalucia.es/averroes/iesgaviota/informatica/html.html#SECTION1000
DISEÑO DE PAGINAS WEB-GMC-10° Página 10