Tu web de informática

atras

1.1 Introducción

adelante

¿Qué programa usar?

Lo primero para crear una web es decidir cómo la vamos a crear. Yo os voy a proponer tres programas distintos y vosotros elegís cuál queréis, pero todos os valdrán para seguir el curso:

  1. El bloc de notas. Aunque parezca mentira este programa se puede utilizar para crear tu web, aunque con otros programas puede resultar más rápido. Ojo, no confundáis el bloc de notas con el WordPad.
  2. El html-kit. Éste es el programa gratuito que recomendamos para usar. Aquí tenéis un tutorial sobre cómo configurarlo, podeis hacerlo si quereis y una vez configurado volver aquí.
  3. Dreamweaver, es un programa muy bueno para crear webs, pero a diferencia del anterior no es gratuito.

Estructuración de una web

Una web está formada por varias páginas, por ejemplo, en esta web tenemos la página principal, la sección de crear webs, todas las páginas de tutoriales de esta sección, la sección de animación,... Pero, ¿qué página se abre primero cuando escribes la url de tu página web? Pues se abre la página que se llame index.

Las páginas pueden ir en muchos formatos dependiendo del tipo de código que tengan: html, php, asp,... En este curso trataremos el código html, por lo que todas las páginas que creemos tendrán la extensión html.

De esta forma, vamos a empezar creando una página que se llame index.html , que como ya he dicho, por tener ese nombre será la que se abrirá al escribir el nombre de la web. Si usais el bloc de notas la creáis dándole a guardar como y llamándola index.html, y si usais el html-kit se explicó cómo se crea en el tuto indicado arriba.

El código html

Vamos a empezar a escribir el código en la página index.html que hemos creado. El código html está formado siempre por etiquetas que abrimos y cerramos cuando corresponda. Las etiquetas siempre son <loquesea> para abrir algo y </loquesea> para cerrarlo. De esta forma para abrir el código html ponemos <html> al principio, y al final del todo ponemos </html>:

<html>
</html>

En medio de estas dos etiquetas irá todo el código html. Una web está formada por dos cosas, una las cosas que no se ven (el título de la web, la descripción, las palabras clave,...) y otro las cosas que se ven en la web (por ejemplo el contenido o el logo). Las cosas que no se ven se meten dentro del llamado head, y las que se ven dentro del llamdo body. Primero abrimos el head, donde pondremos todo lo que no se ve, y luego el body, donde pondremos lo que se ve. De esta forma los códigos de nuestras webs siempre tendrán la siguiente estructura:

<html>
<head>

Aquí va todo lo que no se ve

</head>
<body>

Aquí va lo que se ve

</body>
</html>

Vamos a empezar viendo cosas de las que no se ven. Una es un código que nos permite poder escribir todos los carácteres españoles (incluyendo la eñe y las tildes). Este es un código que sólo se abre y no se cierra, puesto que dentro de él no se puede poner nada. El código es <meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1"> y lo agregamos en el head por lo tanto. Otro es el título de la página, el títutlo que aparece arriba del todo, en la barra del navegador. El título se mete entra las etiquetas <title> y </title>. De esta forma nuestro código va quedando de la siguiente forma:

<html>
<head>

<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1">
<title>Éste es el título de la página</title>

</head>
<body>

Aquí va lo que se ve

</body>
</html>

Este código es importante guardarlo, puesto que todas las páginas que creemos van a tener esa estructura, todas tienen un head y un body, y dentro del head el title y el otro código. Ahora guardad el index.html en la carpeta en la que hayais decidido almacenar toda vuestra web. Es importante que tengas una carpeta exclusiva para la web, para no mezclar archivos.

Si ahora abres tu index.html en tu explorador de internet verás que aparece la frase que hay en el body, y que arriba del todo aparece el título que le has puesto. Esta ha sido tu primera creación html (en html-kit puedes hacer una previsualización de la web pulsando en Preview.

Inciso: navegadores

Antes de seguir con el curso cabe mencionar a los exploradores de internet. Normalmente la gente usa el internet explorer, pero existen otros navegadores como firefox u ópera que también son muy usados. A lo largo de vuestra creación de webs os dareis cuenta que no siempre se ve igual en todos los exploradores, por lo que conviene tener al menos dos de ellos para poder comprobar que vuestra web se ve bien en ellos. A continuación os dejo los links de descarga de los tres más usados:

  1. Descargar iexplorer
  2. Descargar Mozilla Firefox
  3. Descargar Ópera
atras
adelante

Volver a crear webs>>


Creada el 13/04/08 18:01
Copyright © - Todos los derechos reservados - Página creada por Juanma