Your SlideShare is downloading. ×
Trabajo 10
Trabajo 10
Trabajo 10
Trabajo 10
Trabajo 10
Trabajo 10
Trabajo 10
Trabajo 10
Trabajo 10
Trabajo 10
Upcoming SlideShare
Loading in...5
×

Thanks for flagging this SlideShare!

Oops! An error has occurred.

×
Saving this for later? Get the SlideShare app to save on your phone or tablet. Read anywhere, anytime – even offline.
Text the download link to your phone
Standard text messaging rates apply

Trabajo 10

349

Published on

0 Comments
0 Likes
Statistics
Notes
  • Be the first to comment

  • Be the first to like this

No Downloads
Views
Total Views
349
On Slideshare
0
From Embeds
0
Number of Embeds
2
Actions
Shares
0
Downloads
0
Comments
0
Likes
0
Embeds 0
No embeds

Report content
Flagged as inappropriate Flag as inappropriate
Flag as inappropriate

Select your reason for flagging this presentation as inappropriate.

Cancel
No notes for slide

Transcript

  • 1. Diseño de Páginas web Presentado Por: Lizeth. M. Herrera Celis Curso: 10°C Presentado A: Felipe GuzmánGimnasio 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……………………………………………………………10DISEÑ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. INTRODUCCIONEl diseño de páginas web es un medio de expresión, tanto de información comode entretenimiento, a las que estamos expuestos día a día, demostrando asímismo que es una herramienta muy utilizada entre las nuevas generaciones. Porlo tanto buscamos garantizar la buena utilización de las mismas con lacomprensión básica de la construcción de estas y lograr aplicarlas a los diferentescampos de la vida.HTML, puede que no sea un lenguaje muy reconocido pero si el principalfundamento para el desarrollo y diseño de una página web, pues a partir de ellasel programador es capaz de analizar la información y transformarla contribuyendola formación de elementos tales como imágenes, texto, enlaces, tablas, diagramasy 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 ylas estructuras básicas para la construcción de estas en el programa de mayoracceso: “bloc de notas” un amplio programados que demostrara como setransforman 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 loconsidera 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 laDISEÑ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 HTMLHTML significa HyperText Markup Language. Es el lenguaje en que se escribenlos millones de documentos que hoy existen en el World Wide Web. Cuandoaccedemos 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 MarkupLanguage). Esto quiere decir que los diferentes elementos (párrafos,encabezamientos, tablas, listas, ...) de un documento para la WWW se señalanintercalando 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 unsigno mayor ">". ESTRUCTURA BASICATodas 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 quecomienza un documento HTML.Luego viene <head>, la cabecera, donde se pone información sobre eldocumento, 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 losnavegadores que lo permitan y como se conocerá nuestra página en algunosbuscadores y en la lista de favoritos de los usuariosTras la cabezera viene <body>, el cuerpo, que es donde se coloca la informaciónque 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 quetodos poseen enlaces.Para incorporar un enlace hay que utilizar esta etiqueta <a>. Todo lo queencerremos entre <a> y </a>, ya sea texto o imágenes, será considerado comoenlace y sufrirá dos modificaciones:El texto aparecerá subrayado y de un color distinto al habitual, y las imágenesestará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 apuntabael enlace.En el enlace debemos especificar una dirección. Lo haremos de la siguientemanera:<a href="dirección">Púlsame</a> TABLASLas 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 maneraalgo 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 laajustaremos 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. CONCLUSIONDe esta forma y luego de haber presentado los elementos básicos para laconstrucción de páginas web podemos concluir afirmando que dicha temática noes 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 lasexpectativas cada vez son mas solidas.DISEÑO DE PAGINAS WEB-GMC-10° Página 9
  • 10. BIBLIOGRAFIAhttp://es.wikipedia.org/wiki/Dise%C3%B1o_webhttp://www.juntadeandalucia.es/averroes/iesgaviota/informatica/html.html#SECTION1000DISEÑO DE PAGINAS WEB-GMC-10° Página 10

×