Mi Primera Pagina ~ Profe Pedro Rojas 3B

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>

Profe Pedro Rojas 3B

martes, 24 de mayo de 2016