1- El código HTML elemental
Para comenzar sigue los siguientes pasos:
➔ Crea en el Escritorio una carpeta llamada sitio y dentro de ella crea
un nuevo documento de texto, renómbralo a index.html, asegúrate de que
no tenga la extensión de archivo .txt.
Se supone que tienes desactivado en el Panel de Control -> Opciones
de Carpeta -> Ocultar las extensiones de archivo, si no te será
imposible.
➔ Arrastra el archivo creado index.html encima del Bloc de notas y
suéltalo, en el pegarás el código que se muestra en esta página a
continuación.
Cada vez que pegues algo nuevo, guarda los cambios y ejecuta (dos clics)
el archivo, que se abrirá con tu navegador instalado, de esa manera
podrás comprobar como se ve tu página.
Copia y pega el siguiente código:
<html>
<head>
<title>Mi Primera Pagina</title>
</head>
<body>
Esta es mi primera página web
</body>
</html>
Ya tienes tu primera página web.
Una sencilla explicación del código anterior.
Cada elemento que va entre los signos < y > es un tag o etiqueta,
donde quiera que hay un tag algo sucederá en la representación del
documento, algunas veces visualmente y otras de manera oculta.
• La etiqueta <html> le indica a tu navegador que tu documento es una página web y debe representarla como tal.
• Las etiquetas <title> encierran el título de la página, es
imprescindible su uso, se muestra en la barra superior del navegador.
• Los elementos que se encuentran entre las dos etiquetas <head>
que es el encabezado, contiene datos e información para el
funcionamiento la página, que el usuario no ve.
• En el espacio comprendido entre las etiquetas <body> es el que contiene todo el contenido que quieres visualizar.
2- Agregarle un título o encabezado a la página web
Ahora vamos a agregarle un titulo en letras grandes y un subtitulo,
copia y pega por supuesto en la siguiente línea después del <body>:
<h1>Mi Página</h1>
<h3>Esta es mi primera página web</h3>
3- Agregarle una imagen a la página web
Ahora insertas una imagen que copiaste previamente en tu carpeta sitio y la renombraste imagen.jpg:
<img src="imagen.jpg" alt="Esta es mi casa">
4- Agregarle un link o vínculo a un sitio web
Ahora un vínculo que te llevara a Google o el lugar que especifiques, ponlo en la parte del <body> que gustes:
<a href="http://www.google.com/">Para ir a Google</a>
5- Agregar texto o contenido al cuerpo de la página
Ahora le toca el texto con el contenido de la pagina (con el tag <p> le estas indicando que es un párrafo):
<p>Aqui todo lo que quieras escribir.</p>
Despues una pequeña lista de menú con vínculos a otras páginas que crearás después en tu sitio:
<ul>
<li><a href="página1.html">Otra pagina</a></li>
<li><a href="página2.html">Otra mas</a></li>
<li><a href="about.html">Acerca de mi</a></li>
</ul>
