Lección 1: Comenzando

Esta es la página básica que usaremos. No tiene ningún contenido, excepto por un enlace de validación al final de la página:

Página Básica

<!DOCTYPE html>
<html lang="es">
<head>
<meta charset="utf-8">
<title></title>
</head>
<body>

</body>
</html>

Contiene todo lo que un navegador necesita para crear una página web. Define el DOCTYPE, el idioma, el encabezado y el cuerpo o sección de contenido de la página. Cualquier información que el navegador usará para crear la página estará entre < y >. Éstos se llaman corchetes angulares. Los corchetes angulares se utilizan para encerrar etiquetas , que se ven así:

<tipo-de-etiqueta></tipo-de-etiqueta>

La mayoría de las etiquetas se utilizan en parejas, con una etiqueta de apertura y una etiqueta de cierre. Las etiquetas de apertura y cierre son iguales, excepto que la de cierre empieza con </ en lugar de solamente con <.Las etiquetas de apertura y cierre así como con el contenido entre ellos forman una contexto entre ellos en la forman un elemento html.

Comentarios

Los Comentarios contienen información para que la vea el webmaster, pero no para el visitante de la página web (el navegador no los muestra). También se pueden usar para hacer que el navegador ignore temporalmente partes de una página (esto se llama esconder) que contiene errores.

Si quiere crear un comentario use:

<!-- escriba su comentario aquí -->

Hemos marcado nuestra página básica con comentarios indicando dónde añadirá usted el contenido.

Ejercicios:

  1. Vamos a crear nuestra primera página web:
    1. Abra su editor de texto preferido.
    2. Copie y pegue el contenido de Página Básica en su nuevo documento.
    3. Guarde el nuevodocumento como pagina_basica.html.
    4. Agregue estos comentarios abajo de la etiqueta <body> 
               <!-- Comience su contenido aquí... -->

         <!-- Su contenido finaliza aquí... -->
      Usted ahora colocara todo el contenido de su página web entre estos dos comentarios.
    Nota: No haga más cambios a pagina_basica.html. Nosotros copiaremos y nombraremos cada vez que empecemos una nueva página.
  2. Haga una copia de pagina_basica.html y nómbrela index.html. Abra index.html en el navegador web. Tome nota del texto que aparece en la barra de título de la ventana del navegador. Cambiaremos ésto en el siguiente ejercicio.
  3. Cambie el título (entre las etiquetas title) para que diga: ¡Mi Nueva Página en HTML!. Verifique que aparezca en la barra de título de la ventana de su navegador cuando recargue la pagina.

  4. Ponga este mismo texto (¡Mi Nueva Página en HTML!) entre las etiquetas <h1></h1> en el interior del cuerpo de su documento (entre las etiquetas body). ¿Qué sucede cuando hace esto?

    Nota: Cualquier cosa escrita entre <body> y </body> se mostrará en su página, aunque para ser marcado correctamente, todo el contenido debe estar encerrado entre etiquetas. Todo lo que esté entre < > no aparecerá.