Tutorial HTML Práctica 1

MÓDULO III SUBMÓDULO III
Elaboración de Páginas Web
Profra. I.S.C. Karina Delgado Huante

TUTORIAL HTML
Práctica 1

HOLA MUNDO EN HTML

En esta primera práctica, haremos la primera página web utilizando código HTML. Es muy
sencillo sólo tienes que seguir los siguientes pasos.

Paso 1. Tienes que abrir un Bloc de notas. Si no sabes cómo hacerlo, haz clic en el botón
Inicio-Todos los programas-Accesorios-Bloc de Notas

3

4

2

1

Si hiciste buen este paso, el bloc de notas se abrirá y se verá así:

Tutorial HTML Práctica 1


Paso 2. A continuación escribe en el bloc de notas el siguiente código:

Este código es muy sencillo pero debes tener en cuenta las siguientes consideraciones:
þ Todas los códigos HTML empiezan con la etiqueta <html> y terminan con la etiqueta
</html>
þ El encabezado de la página debe aparecer dentro de las etiquetas <head> y </head>



þ El texto que aparece entre las etiquetas <title> y </title> aparecerá en la barra de
título de la página.
þ Dentro de las etiquetas <body> y </body> aparecerá el cuerpo de la página. Como
esta es la primera práctica, lo único que aparece es el mensaje HOLA MUNDO EN
HTML

Si quieres entender más el código HTML,
busca en un diccionario Inglés-Español las
siguientes palabras:
Head
Title
Body
Te sorprenderán los resultados

Paso 3. A continuación deberás guardar el archivo, el procedimiento es muy parecido a
cuando guardas cualquier documento, sólo tiene una pequeña diferencia. Haz clic en la
opción Archivo de la barra de menú y en la opción Guardar. Aparecerá el siguiente
cuadro de dialogo:

En este cuadro de dialogo deberás en primer lugar buscar y elegir la ubicación donde
guardarás el archivo. Recuerda que todos los archivos que formarán parte de un sitio web
deben guardarse en la misma ubicación.


Después deberás escribir el nombre del archivo practica1.html, puedes cambiar este
nombre por otro pero deberá ser un nombre corto, sin espacios y de preferencia en
minúsculas. También puedes cambiar la terminación .html por .htm.

Lo siguiente que deberás hacer es cambiar el tipo de archivo. Por default esta la opción
Documento de texto (*.txt) pero deberás cambiarla por Todos los archivos.

1. Busca y elige la
ubicación dónde
guardarás tu archivo

2. Escribe el nombre
del archivo.html

3. Cambia el tipo de
archivo por Todos
los archivos

4. Haz clic e botón
Guardar

Una vez que hayas seleccionado la ubicación, escrito el nombre y cambiado el tipo de
archivo, puedes hacer clic en el botón Guardar.



Una vez guardado el archivo, el
nombre aparecerá en la barra
de título.

En este momento ya puedes cerrar el Bloc de notas, pero recuerda que si haces algún
cambio simplemente te pedirá guardar los cambios.

Paso 4. A continuación deberás localizar tu archivo para abrirlo y ver la página que hiciste.



Antes de abrirlo observa que no tiene
un icono de archivo de texto como
otros archivos del bloc de notas, sino
que tiene un icono del navegador
Internet Explorer.

Puedes abrirlo simplemente haciendo clic sobre él y verás tu primera página web.



Esto es lo que
pusiste dentro de
las etiquetas title

Esto es lo que
pusiste dentro de
las etiquetas body

Paso 5. Si deseas abrir de nuevo tu archivo para ver el código y modificarlo, tienes dos
formas de hacerlo.

a) Localiza el archivo, haz clic derecho sobre él, en el menú contextual que aparece
selecciona la opción Abrir con… y haz clic en Bloc de notas.



1. Clic derecho sobre el archivo

2

3

b) La segunda opción es abrir primero el bloc de notas como hicimos en el paso 1 y
en el menú Archivo, hacer clic en la opción Abrir

1

2


Aparecerá el cuadro de dialogo Abrir pero antes de buscar tu archivo deberás
cambiar el tipo de archivo como lo hiciste en el paso 4, cambiar Documento de
texto (*.txt) por Todos los archivos, después busca tu archivo, selecciónalo y haz clic
en el botón Abrir.

2.busca el archivo

3. selecciona el archivo

4. Haz clic en el botón Abrir

1. cambia el
tipo de
archivo, sino
no podrás
encontrarlo

FELICIDADES, YA TIENES TU PRIMERA PÁGINA WEB. POR EL MOMENTO ES MUY SENCILLA,
PERO POCO A POCO IRÁS APRENDIENDO A USAR MÁS ETIQUETAS QUE HARÁN QUE TU
PÁGINA SE VEA MUCHO MEJOR.

Para seguir practicando con el código, puedes intentar lo siguiente…
þ Cambia el mensaje que aparece entre las etiquetas <title>
<title>Escribe aquí otro nuevo mensaje</title>
þ Agrega más texto entre las etiquetas body
<body>Mi Primera Página Web
¿Qué pasa con el texto si escribes en otra línea?
¿Por qué?
</body>



þ Borra alguna de las etiquetas de cierre, por ejemplo </html>, </head>, </title> o
</body>
þ Intenta escribir todas las etiquetas en mayúsculas
þ Escribe intencionalmente mal alguna etiqueta, por ejemplo <bodi> en vez de <body>

En la siguiente práctica veremos…
þ Comentarios en el código…
þ Cambiar el color, tamaño y el tipo de fuente…
þ Cambiar el color de fondo…
þ Poner encabezados…
þ Alineaciones de texto…
þ Y mucho más…


Tutorial HTML Práctica 1

Recommandé

Recommandé

Contenu connexe

En vedette

En vedette (8)

Similaire à Tutorial HTML Práctica 1

Similaire à Tutorial HTML Práctica 1 (20)

Plus de karina154

Plus de karina154 (15)

Dernier

Dernier (20)

Tutorial HTML Práctica 1