Tutorial HTML Práctica 1

MÓDULO III SUBMÓDULO IIIElaboración de Páginas Web

Profra. I.S.C. Karina Delgado Huante

Tutorial HTML Práctica 1

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 muysencillo 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ónInicio-Todos los programas-Accesorios-Bloc de Notas

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

1

2

3

4




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 detítulo de la página.

þ Dentro de las etiquetas <body> y </body> aparecerá el cuerpo de la página. Comoesta es la primera práctica, lo único que aparece es el mensaje HOLA MUNDO ENHTML

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

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

Si quieres entender más el código HTML,busca en un diccionario Inglés-Español lassiguientes palabras:

HeadTitleBody

Te sorprenderán los resultados




Después deberás escribir el nombre del archivo practica1.html, puedes cambiar estenombre por otro pero deberá ser un nombre corto, sin espacios y de preferencia enminú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ónDocumento de texto (*.txt) pero deberás cambiarla por Todos los archivos.

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

1. Busca y elige laubicación dóndeguardarás tu archivo

2. Escribe el nombredel archivo.html

3. Cambia el tipo dearchivo por Todoslos archivos

4. Haz clic e botónGuardar




En este momento ya puedes cerrar el Bloc de notas, pero recuerda que si haces algúncambio 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.

Una vez guardado el archivo, elnombre aparecerá en la barrade título.




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

Antes de abrirlo observa que no tieneun icono de archivo de texto comootros archivos del bloc de notas, sinoque tiene un icono del navegadorInternet Explorer.




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

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

Esto es lo quepusiste dentro delas etiquetas title

Esto es lo quepusiste dentro delas etiquetas body




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

1. Clic derecho sobre el archivo

2

3

1

2




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

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>

2.busca el archivo

1. cambia eltipo de

archivo, sinono podrás

encontrarlo

3. selecciona el archivo

4. Haz clic en el botón Abrir




þ 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

Education

Transcript of Tutorial HTML Práctica 1