XHTML y CSS #2 ~ Crear tu Primera P?gina Web

El contenido de cada tutorial será poco extenso y se centrará en lo importante. Así, ni te cansas de leer, ni me canso de escribir. Soy persona y me equivoco, así que no dudes en corregirme o ampliar información si ves que se me pira algo muy importante.
Yo trabajaré con el browser de Google (Chrome) por temas de compatibilidad.
Tema: Crear tu Primera Página Web
Profesora: Tsuka/MoonTIK23
Agradecimientos: Bucky y easydisplayname
Fecha: 23/11/2011

En el anterior tutorial, instalamos el editor de texto Notepad++ para poder trabajar de una forma cómoda y amena.

Aunque siempre se abra el último documento que hayamos modificado, o, en su defecto, uno en blanco, os enseñaré algo poco obvio y difícil de averiguar por uno mismo: ¡crear un nuevo documento!

Tienes tres opciones, por si te parecía una hazaña difícil:

~ La primera y más inmediata, es el shortcut Ctrl+N.
~ Luego puedes seleccionar el primer símbolo de la barra de harramientas, empezando por la izquierda.
~ Finalmente, puedes desplegar el menú Archivo y seleccionar Nuevo.

Ahora que ya tienes tu archivo virgen, recomiendo seleccionar el lenguaje con el que vas a programar puesto que Notepad++ cuenta con funciones específicas para cada uno de ellos.

Ahora, adentrémonos de lleno en el temario. Aclaro que es posible que, en estos primeros tutoriales, eche mano de la Wizard´s Law. Algo así cómo "creételo por el momento y ya lo entenderás". También he de aclarar que el vocabulario específico lo traduciré la primera vez, pero, de ahí en adelante, usaré la palabra anglosajona porque es más corta y soy una vaga. Bueno, y también para que te acostumbres a ella.

Lo primero que debes saber, es que todas las páginas webs están compuestas por tags (etiquetas). Son cómo el perímetro de las piezas de un puzzle; totalmente necesarias. Por ejemplo, si quieres incrustar una imagen en tu página, deberás usar la tag de la imagen. Si quieres insertar un enlace, la tag del enlace y, así, sucesivamente. Vamos, que la estructura de tu web no será más que un conjunto interrelacionado de tags.

¿Y cómo son? Por ejemplo, la tag del párrafo es <p>, la de cursiva <em*> (sin el asterisco), la de negrita <strong>... ¿Ves algún patrón que compartan todas ellas? Por si acaso, te diré que son los símbolos menor que (<) y mayor que (>).

Abre un documento nuevo porque vas a escribir tu primera tag. Usaré la Wizard´s Law con esta primera. Ya sabes, créetelo y ya lo entenderás.

<!doctype html>

Repito, no entraré en ella con profundidad por el momento. Lo único que debes saber es que esta tag es una tag especial que se debe colocar siempre, una vez al inicio de la página, que le dice al browser: ¡eh! éste es el tipo de documento que vas a tener que leer. Volveremos más tarde a ella, así que si no lo pillas, no te suicides. Simplemente ponla y punto.

Lo próximo que vas a tener que escribir es la tag de <html>. Seguidamente, iría el resto de nuestro código html:

<!doctype html>

<html>

Ahora bien, este tipo de etiqueta necesita una compañera que le indique al browser de dónde a dónde va. <!doctype html> no la necesita porque... Bueno, digamos, por el momento, que no la necesita. ¿Sabes quién va a ser esa compañera? ¿No?

<!doctype html>

<html>

</html>

Es ella misma, pero con una slash (/) directamente después del menor que (<). ¡Eh, browser! Ya no hace falta que sigas leyendo porque aquí acaba mi código. Pronto te harás con ellas y el escribirlas será automático. Lo mismo te pasará con nuestras dos siguientes tags: <head> (cabeza) y <body> (cuerpo). Ambas tienen una tag con slash para indicar dónde finalizan.

<head> define el bloque del encabezado. La información del browser, la información técnica y otras muchas cosas que no se ven cuando entras en una página web... Con excepción del título de nuestra página, Wizard´s Law.

!doctype html>

<html>
  <head>
 
  </head>
</html>

<body>, en cambio, es lo visible. Las imágenes, el texto, los enlaces... Todo lo demás.

<!doctype html>

<html>
  <head>
 
  </head>
  <body>
 
  </body>
</html>

Si te fijas, unas etiquetas engloban a otras. Todas las tags son subordinadas de <html>. <head> y <body>, digamos, son coordinadas. Están a la misma altura; una detrás de otra.

Y ya, sin comerlo ni beberlo, tienes hecha la estructura más básica de una página web. Si lo tradujeramos con reglas mnemotécticas, para que lo entiendas mejor y te acuerdes de todo, sería cómo si le mandaras a alguien unas instrucciones que debe seguir. Éstas deben ser claras, ordenadas, con inicio y final:

Mira, browser, vas a tener que leer un documento de html (<!doctype html>). Comenzarás a leer aquí (<html>) y acabarás aquí (</html>). Ésto (<head></head>) es lo que necesitas saber para que todo vaya rodado y, ésto otro (<body></body>), es lo que tiene que rodar.

Bien, ¿no?

Según mis planes, el tutorial acabaría aquí, pero lo voy a alargar un poco. Te presento a las tags <title></title> (título) que se sitúan dentro de <head></head>. El título que quieras darle a tu página, deberás colocarlo entre ambas tags del título:

<!doctype html>

<html>
  <head>
   <title>Título</title>
  </head>
 
  <body>
 
  </body>
</html>

¿Te gustaría ver cómo ha quedado? Para ello, antes hay que guardar la página. Al ser nuestra página principal (home page, main page...) debemos llamarla index y vigilar que la extensión sea *.html.

Crea una carpeta nueva en tu escritorio y guarda allí todo lo relacionado al curso. Para abrir la página, debes hacer doble click en tu archivo index.html

También puedes ir al ménu Ejecutar de la barra de menús de Notepad++, una vez hayas guardado, y elegir tu browser Launch in X. Si no cierras la página y haces cambios en tu código, podrás refrescarla presionando F5 o el botón Refresh de tu brower.

Y así acaba nuestro segundo tutorial. Ya tienes hecha tu página web. Ahora, poco a poco, te enseñaré a personalizarla.

XHTML y CSS #2 ~ Crear tu Primera P?gina Web
8 Puntos Score: 4/10
Visitas: 1119 Favoritos: 2
Ver los usuarios que votaron...
3 Comentarios XHTML y CSS #2 ~ Crear tu Primera P?gina Web
Gracias,espero tu proximo tutorial   +5
Para dejar un comentario Registrate! o.. eres ya usuario? Accede!