.:: MundoPC.NET - Sección Webmasters - Dominios Gratis - Buscador informática

:: SECCIONES

:: ENCUESTAS

Si usas Windows ¿qué versión?

Version 2.02

Estás en:

Página principal » webmasters » cursos » web

Curso de creación de sitios web - Lección 1 - Página 2

Nuestra primera página web
Estructura básica de una página web

Nuestra primera página web

Ya estamos en camino para crear nuestra primera página web. Usando Webpage, la verdad es que no es nada complicado; si sabes manejar un procesador de textos, hacer una página es agregar texto, darle formatos, añadir títulos, imágenes...es muy parecido. Si no estás muy acostumbrad@ a este tipo de programas puedes pensar incluso que estás de enhorabuena, porque gracias a este curso aprenderás todas las normas básicas de los procesadores de texto, por lo que te servirá doblemente.

Pasemos a crear por tanto nuestra primera página web. Para ello haz click en el menú FILE nuevamente y selecciona NEW.

Este es el aspecto de WebPage cuando se abre una nueva página:

¿Y ahora qué hacemos?. Bueno, antes de seguir con mas prácticas, veamos un poco de teoría que nos servirá para comenzar con buen pié nuestro sitio web. Toma nota y apréndetelo bien porque lo usarás todos los días...

Estructura básica de una página web

Etiquetas de la cabecera

Un sitio web tiene una estructura muy conocida. De hecho casi todas las cosas en este mundo tienen una estructura parecida. No referimos por ejemplo a nuestro propio cuerpo en el que encontramos nuestra cabeza, nuestro tronco y nuestras extremidades (piernas, brazos). Otro ejemplo podría ser una casa, donde tenemos el tejado, las pareces de la casa y los cimientos. Multitud de ejemplos podemos encontrar con una estructura similar, bien ordenada, donde cada parte es fundamental para que todo "funcione" correctamente.

Una página web, también tiene cabeza, un cuerpo y otras partes que permitirán crear toda la estructura ordenada para que funcione. Para poder separar estas partes, se usan las ETIQUETAS de manera que al verlas, sepamos en qué parte de código nos encontramos (cabeza, cuerpo...).

Toda página web comienza siempre (o casi) con la misma etiqueta, esta es: <html>. Además, acuérdate que casi todas las etiquetas que comiencen con <etiqueta> terminarán con </etiqueta>; fíjate que hemos usado en esta última la barra inclinada "/". Según esto es previsible que si nuestro sitio web comienza con <html> terminará con </html>, pero esto ya lo veremos.

Lo primero que tenemos que hacer a continuación es "la cabeza" de nuestra página. Cabeza en inglés se escribe "HEAD", y será esta palabra precisamente la que se usará para definir la cabeza (o más bien cabecera) de nuestra página web. De esta manera, podríamos seguir nuestra página así:

Nuestra cabeza también tiene ojos, boca... La cabecera de un sitio web, también está formada por varias cosas como son (las más básicas):

Título de nuestro sitio web
Descripción de nuestro sitio web
Palabras clave
Autor del sitio
Y otras cosas...

Así por ejemplo el título se define de la siguiente manera:

<title>Este es el título de mi página web</title>

Fíjate que hemos definido una nueva etiqueta <title>, pero solo sirve para eso, para definir el título de nuestra página. Fíjate también en que se cierra con "/", tal y como hemos explicado antes.

Veamos ahora como se introduce la descripción de nuestro sitio web:

<meta name="description" content="Esta es la descripción de nuestro sitio web">

¡Qué raro! esta etiqueta no se cierra y además tiene cosas raras como "name" y "content" ¿qué está pasando?. Nada raro no te asustes, esta etiqueta es una excepción que solo existe en la cabecera de un sitio web y siempre se escribe igual. Son las etiquetas META, las que nos permiten definir lo que hemos dicho antes: descripción, palabras clave... Y por cierto, es verdad que no se cierra, es una de las pocas que no se cierran. Veamos otras:

<meta name="author" content="Aquí puedes escribir tu nombre">

<meta name="keywords" content="Aquí van tus palabras clave, aquellas que por si solas definen el contenido de tu sitio web y son muy usadas por los buscadores de Internet">

Tranquil@ que por el momento no usaremos más conceptos nuevos en cuanto a la cabecera. Ahora pongamos todas esas cosas juntas ordenadas. Veamos todo lo que hemos hecho hasta ahora:

<html>
<head>
<title>Este es el título de tu sitio web</title>
<meta name="description" content="Esta es la descripción de tu sitio web">
<meta name="author" content="Aquí puedes escribir tu nombre">
<meta name="keywords" content="Aquí van tus palabras clave, aquellas que por si solas definen el contenido de tu sitio web y son muy usadas por los buscadores de Internet">
</head>

Fíjate que hemos añadido al final </head>, esto quiere decir que la etiqueta que abría la cabecera (<head>) se cierra de esa manera. Se pueden poner más cosas en la cabecera, pero podríamos decir que esas son las más importantes.

Etiquetas del cuerpo de página

Bien, después de hacer la cabeza, vamos a hacer el cuerpo. En inglés, cuerpo es "BODY" y esta es el nombre de la nueva etiqueta que vamos a aprender. Se escribe por tanto <body> y la etiqueta que lo cierra es </body>. Dentro se puede poner todo lo que se quiera y se puede complicar mucho la estructura de la página, pero siempre (o casi) dentro de estas dos etiquetas.
Podría decirse que ya hemos creado nuestra primera página; si seguimos con la estructura que hemos escrito antes:

<body>

ESTE ES EL CUERPO DE NUESTRA PÁGINA WEB

</body>
</html>

Fíjate que hemos usado las etiquetas </body> para cerrar el cuerpo de página y como hemos visto antes, la etiqueta </html> para cerrar finalmente nuestra recien creada página web.

Vamos a hacer algo "increible": crear un sitio web muy básico usando únicamente el Bloc de Notas de Windows o cualquier otro editor de texto (no uses por favor Microsoft Word, algo más básico será mucho mejor).
Abre un nuevo documento y teclea todo lo anterior:

Bien, ahora guárdalo en algún directorio o en el escritorio de Windows con el nombre "mipagina.htm" (sin las comillas) y después, haz doble click sobre el fichero recién creado. Se abrirá tu navegador predeterminado y te mostrará lo siguiente:

¿Ves esto? entonces todo perfecto.
El título que pusiste dentro de <title> y </title> se muestra en la parte superior de la ventana ¿lo ves?, y el cuerpo del mensaje, es lo que escribiste entre <body> y <body>.

Índice
Capítulo 1: 1 1A 1B
Capítulo 2: 2 2A 2B
Capítulo 3: 3
Capítulo 4: 4 4A 4B
Capítulo 5: 5 5A 5B
Capítulo 6: 6 6A 6B 6C 6D 6E
Capítulo 7: 7 7A

:: SERVICIOS

Directorio

Foro