Pagimas Web

COMO HACER UNA PAGINA WEB

BASE DE DATOS

PRESENTADO POR:

JOSÉ RAFAEL MARTÍNEZ MEDINA

PRESENTADO A:

LUZ MARGARITA ECHAVARRÍA

UNIVERSIDAD ANTONIO NARIÑO

INGENIERÍA, ARQUITECTURAS, URBANISMOS Y AFINES

BASE DE DATOS

2013

COMO CREAR UNA PAGINA WEB

Las páginas web en la actualidad son las herramientas más grandes de consultas y en las cuales encontramos todo tipo de información. Por esto quiero enseñar cómo se crea una página web partiendo desde cero. En este proceso utilizaremos muchas herramientas que las mencionaré a medida que las usemos. Pero antes quiero dar un concepto breve pero sustancioso de lo que es una página web.

DEFINICIÓN: Una página web, (página electrónica que es el término recomendado por la Real Academia Española) es un documento de textos electrónico adaptado para la World Wide Web (www) (que se puede traducir como Red Global Mundial pero es más conocida como la internet) y que puede ser accedida por un navegador web. El formato más usado por los creadores de páginas web es el lenguaje de HTML. El navegador web es la aplicación capaz de interpretar el código programado en HTML.

Características de una página web

Aunque inicialmente mencionamos que las páginas web están compuestas por texto electrónico, también puede contener módulos multimedia (imágenes, videos, animaciones, etc.) también puede contener híper-enlaces (link), hojas y datos de estilo que le indican cómo debe visualizarse y algunas incluso poseen aplicaciones para que sea más interactiva.

En resumen una página web es una excelente herramienta de presentación ya sea de una empresa, una organización y hasta de una persona. Las páginas web pueden reflejar lo que deseamos y la podemos crear a nuestro antojo dejando volar nuestra imaginación.

Ya que conocemos lo que es en contexto una página web y ya estamos conociendo como es su funcionamiento. A continuación veremos cómo crear una página web.

PARA EMPEZAR:

Para iniciar debemos elegir que lenguaje vamos a emplear en nuestro proceso de creación de nuestra página web y como había mencionado antes el más usado es HTML, pues este mismo usaremos para nuestro trabajo. Últimamente han aparecido nuevas alternativas que facilitan la programación de páginas Web. Son los editores HTML.

Podemos dividir estos editores en tres grupos:

• Asistentes: ayudan a crear el código HTML e incluyen plantillas de código prefabricadas, por ejemplo: HotDog™ (Win), HomeSite™ (Win), HTML Editor™ (Mac), Quanta™ (Linux, KDE) o Bluefish™, (Linux, GNOME).

• Conversores: son programas con otra función que la de la programación Web pero que permiten convertir a HTML. Son ejemplos de conversores Microsoft Word ™,Quark XPress™ y PageMaker™.

• Editores WYSIWYG (What You See Is What You Get, lo que ves es lo que obtienes): estos editores permiten crear páginas web sin escribir código HTML como si se tratase de un programa de dibujo por ordenador. Algunos ejemplos de este tipo de editores son Macromedia Dreamweaver™, HotMetal™ o Microsoft Frontpage™.4

Ahora bien debemos conocer un poco de este nuevo lenguaje. Así que hablaremos un poco del mismo.

HTML

HiperText Markup Language que traducido es leguaje hipertexto de marcas esta basado en etiquetas, básicamente es un conjunto de etiquetas que sirven para definir el texto y otros elementos que incorporan la página web. Dichas etiquetas van contenidas entre los signos < y > por ejemplo <title>. Toda etiqueta tiene una de apertura y una de cierre, esta última se marca con el signo /. Por ejemplo <title> es la marca de apertura mientras que </title> seria la marca de cierre. Y entre la apertura y el cierre es donde introducimos la etiqueta que queremos que aparezca en nuestra página web.

Las etiquetas se componen de las siguientes partes:

• Identificador

• Atributos

• Valor

Hay etiquetas que pueden tener varios atributos y otras que no tienen, como la que estudiamos en el ejemplo anterior.

Estructura básica de una página hecha en HTML.

Este es el modelo que toda página HTML sigue.

 Todo lo que contenga la página estará demarcada dentro de la etiqueta <html> y </html>

 La página por lo general está dividida en dos grandes bloques principales: que son la cabecera identificado por <head> y </head>. (Aquí es donde se encuentra la información sobre la página, es decir, el título.) Y el cuerpo identificado por <body> y </body> (Es donde se encuentra el contenido de la página y lo que vera el usuario. Estos textos, imágenes, enlaces, etc.)

 Para crear encabezados podemos emplear las etiquetas h1, h2, h3… según el nivel del encabezado.

 Para hacer un salto de línea utilizamos <br/>

 Para caracteres especiales es conveniente representarlos con sus entidades HTML. Ejemplo para la á se usa &aacute; para é &eacute; para ñ &ntilde.

 Imágenes: Es quizás el elemento más usado en las páginas web. Los formatos admitidos por el lenguaje son jpg, gif y png. Y son llamados desde la página que creamos.

La etiqueta de imagen es <img/> y la estructura es la siguiente:

<img src=”archivo.gif” hegiht=”35” width=”40” alt=”Descripcion”/>

Dónde:

• Src es la ruta al archivo de imagen.

• height y width es el alto y ancho de la imagen.

• Alt es el texto que se mostrara si no se puede cargar la imagen.

 Divisiones: esta nos permite colocar el contenido de la página en la posición que deseemos se representa así: <div>. Ejemplo: <div style="float: right"><img src="archivo.jpg" width="150" height="150" alt="No se encuentra esta imagen" /></div>

Vemos que la parte roja nos indica que la imagen quede flotando a la derecha de la página.

Hipertexto: Una vez visto como introducir distintos tipos de texto y párrafos así como insertar imágenes en una página, lo único que queda por aprender para ser capaces de crear una página Web bastante completa son los enlaces hipertexto. Con ellos se pueden activar frases o palabras de la página para que al pulsar sobre ellas se salte a cualquier otra página de Internet que decidamos.

Estos enlaces hipertexto (en inglés links) no son más que unas zonas (habitualmente palabras o frases) especiales de nuestro texto que ofrecen la posibilidad de pulsar sobre ellas para ir a otras páginas. El concepto del hipertexto no es nuevo, la mayoría de los lectores lo habrán usado ya en la ayuda de Windows o en otros muchos sistemas, lo realmente novedoso que ofrecen estos enlaces en el WWW es la posibilidad de pulsar y navegar hasta páginas que se encuentren en el otro extremo de la tierra. El navegante puede moverse de España a Japón con una única pulsación sobre el texto adecuado. En seguida se verá lo sencillo que es incluir esta impresionante tecnología en una página web.

Los enlaces pueden clasificarse en dos tipos, los internos o locales y los externos:

a) Los enlaces internos son aquellos que enlazan las páginas que componen un mismo sitio web (web site).

Todas estas páginas estarán (generalmente) en el mismo servidor WWW, y por tanto estarán también en el mismo ordenador. Por esta razón sólo será necesario indicar en nuestro código el nombre del archivo donde está la página que queremos enlazar y el directorio en el que se encuentra. Un ejemplo dirección de un enlace interno es: /hobbies/index.html

b) 2. Los enlaces externos permiten saltar desde una página hasta otra puede estar en cualquier otro lugar del mundo en otro servidor web. Al crear estos enlaces es necesario especificar la dirección completa de Internet (la URL) de la página que queremos enlazar. Por ejemplo: http://www.otroservidor.com/hobbies/index.html

Por último, cabe resaltar que aunque la mayoría de las veces los links se usan para enlazar una páginas con otras también pueden usarse con imágenes, sonido, vídeo y prácticamente cualquier tipo de fichero. Esta etiqueta, de nombre sencillo, es la que va a permitir incluir en las páginas enlaces hipertexto. Su atributo ’href’ permite indicar cuál es la página a la que debe saltar el usuario al pulsar sobre el texto adecuado. El texto del enlace será aquel que se introduzca entre la instrucción de inicio y la instrucción de final de la etiqueta y debe ser resaltado por el navegador para que el usuario sepa que puede pulsar en él. La estructura de un link es: <a href="dirección_URL"> Texto que será sensible (hipertexto) </a>.

Texto pre formateado.

En ocasiones es interesante mantener los espacios o saltos de línea de un párrafo tal y como están en el código HTML. Para conseguir esto hay que alterar el comportamiento habitual del navegador que, como se ha visto, ignora este formato. Un ejemplo muy simple que muestra esto es la firma de páginas con dibujos de texto como el de la figura

Se podría crear una imagen con él e insertarla en el documento, pero este es un dibujo hecho con caracteres y podría aprovecharse para que pudiese verse también con navegadores que trabajan en modo texto como Lynx.

Algo importante en este caso ya que interesa que TODO el mundo vea la firma, además de que el tenerla como texto hace más

...