Aprendiendo HTML para crear una pgina Web

Estimado aprendiz, en este material de curso encontrar un PASO A PASO para la construccin de una
pgina web bsica. Este instructivo le permite visualizar por medio de imgenes informativas cada uno
de los movimientos que debe seguir para alcanzar las actividades de Enseanza Aprendizaje
Evaluacin.

Paso 1. Abrir un editor de texto

El primer paso ser abrir un editor de texto.
Existen varios editores bsicos pre-
instalados en los sistemas operativos,
segn usemos Windows, Mac o Linux:

Bloc de Notas (Windows)

TextEdit (Mac)

Ahora deberemos abrir uno de ellos para

poder comenzar.

NOTA: El Bloc de Notas de Windows se

encuentra en: Inicio -> Accesorios -> Bloc
de Notas.
Elaborado por: Mara Paola Abella Martnez. Ingeniera de sistemas.
Centro de Gestin Administrativa y Fortalecimiento Empresarial. Regional Boyac
 Aprendiendo HTML para crear una pgina Web

Paso 2. Como se empieza

Lo primero que deberemos escribir en

nuestro editor ser los siguiente:

Todo lo que se encuentra entre < > son etiquetas de html. La primera etiqueta que debemos poner
es la de html, que nos indicar que lo que estamos creando es un html.

Seguidamente aadimos los

elementos head, title y body en el
documento:

Elaborado por: Mara Paola Abella Martnez. Ingeniera de sistemas.

Centro de Gestin Administrativa y Fortalecimiento Empresarial. Regional Boyac
 Aprendiendo HTML para crear una pgina Web

Nota
Antes de seguir, guardaremos nuestro documento con la extensin .html, por ejemplo, podra
llamarse: miprimerapaginaweb.html.
As cuando la abramos con cualquier navegador [botn derecho sobre el archivo -> abrir con ->
(elegimos el navegador que queramos)] podremos ver cmo nos est quedando:

Elaborado por: Mara Paola Abella Martnez. Ingeniera de sistemas.

Centro de Gestin Administrativa y Fortalecimiento Empresarial. Regional Boyac
 Aprendiendo HTML para crear una pgina Web

Paso 3. Etiquetas bsicas HTML

3.1 Etiquetar encabezados:
Para diferenciar la importancia de varios
encabezados dentro del mismo documento,
utilizaremos los 6 tipos de encabezados
disponibles, del h1 al h6, tal y como se ve a
continuacin:

Elaborado por: Mara Paola Abella Martnez. Ingeniera de sistemas.

Centro de Gestin Administrativa y Fortalecimiento Empresarial. Regional Boyac
 Aprendiendo HTML para crear una pgina Web

Nota
La etiqueta p significa prrafo, es decir, lo que est dentro de esa etiqueta formar un prrafo que se
separar del resto con un salto de lnea implcito en dicha etiqueta.

Nos quedar de la siguiente manera:

Elaborado por: Mara Paola Abella Martnez. Ingeniera de sistemas.

Centro de Gestin Administrativa y Fortalecimiento Empresarial. Regional Boyac
 Aprendiendo HTML para crear una pgina Web

Paso 4. Negrita, cursiva, prrafo y salto de lnea

Negrita: Para poner una palabra o frase
en negrita, la etiqueta ser la b, de este modo: Nos quedar de la siguiente manera:

Elaborado por: Mara Paola Abella Martnez. Ingeniera de sistemas.

Centro de Gestin Administrativa y Fortalecimiento Empresarial. Regional Boyac
 Aprendiendo HTML para crear una pgina Web

Cursiva: Del mismo modo para poner en

cursiva alguna palabra o frase usaremos la Nos quedar de la siguiente manera
etiqueta i, de este modo:

Elaborado por: Mara Paola Abella Martnez. Ingeniera de sistemas.

Centro de Gestin Administrativa y Fortalecimiento Empresarial. Regional Boyac
 Aprendiendo HTML para crear una pgina Web

Prrafo y salto de lnea: Para crear un prrafo, la etiqueta es la p, que ya incluye el salto
de lnea y el salto lo haremos con la etiqueta br. Vemoslo:

Nos quedar de la siguiente

manera:

Elaborado por: Mara Paola Abella Martnez. Ingeniera de sistemas.

Centro de Gestin Administrativa y Fortalecimiento Empresarial. Regional Boyac
 Aprendiendo HTML para crear una pgina Web

Paso 5. Aadir una Imagen

Para aadir una imagen, primero tenemos que saber Nos quedar de la siguiente
dnde est ubicada, el nombre exacto de la carpeta
donde se encuentra, y el nombre exacto de la imagen, por
manera
ejemplo, imaginemos que tenemos dentro de la carpeta
imagenes, otra que se llama, paisajes y dentro de sta la
imagen que queremos colocar, que se llama:
cataratasiguazu.jpg.
As que deberamos escribir lo
siguiente:

Elaborado por: Mara Paola Abella Martnez. Ingeniera de sistemas.

Centro de Gestin Administrativa y Fortalecimiento Empresarial. Regional Boyac