Tutorial HTML Práctica 1
Upcoming SlideShare
Loading in...5
×

Like this? Share it with your network

Share
  • Full Name Full Name Comment goes here.
    Are you sure you want to
    Your message goes here
    Be the first to comment
    Be the first to like this
No Downloads

Views

Total Views
3,787
On Slideshare
3,770
From Embeds
17
Number of Embeds
3

Actions

Shares
Downloads
67
Comments
0
Likes
0

Embeds 17

http://www.educlic.net 11
http://alejandrocomplementos-iyc.blogspot.com 5
http://introduccionalhatml.blogspot.com 1

Report content

Flagged as inappropriate Flag as inappropriate
Flag as inappropriate

Select your reason for flagging this presentation as inappropriate.

Cancel
    No notes for slide

Transcript

  • 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
  • 2. MÓDULO III SUBMÓDULO III Elaboración de Páginas Web Profra. I.S.C. Karina Delgado Huante 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> Tutorial HTML Práctica 1
  • 3. MÓDULO III SUBMÓDULO III Elaboración de Páginas Web Profra. I.S.C. Karina Delgado Huante þ 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. Tutorial HTML Práctica 1
  • 4. MÓDULO III SUBMÓDULO III Elaboración de Páginas Web Profra. I.S.C. Karina Delgado Huante 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. Tutorial HTML Práctica 1
  • 5. MÓDULO III SUBMÓDULO III Elaboración de Páginas Web Profra. I.S.C. Karina Delgado Huante 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. Tutorial HTML Práctica 1
  • 6. MÓDULO III SUBMÓDULO III Elaboración de Páginas Web Profra. I.S.C. Karina Delgado Huante 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. Tutorial HTML Práctica 1
  • 7. MÓDULO III SUBMÓDULO III Elaboración de Páginas Web Profra. I.S.C. Karina Delgado Huante 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. Tutorial HTML Práctica 1
  • 8. MÓDULO III SUBMÓDULO III Elaboración de Páginas Web Profra. I.S.C. Karina Delgado Huante 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 Tutorial HTML Práctica 1
  • 9. MÓDULO III SUBMÓDULO III Elaboración de Páginas Web Profra. I.S.C. Karina Delgado Huante 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> Tutorial HTML Práctica 1
  • 10. MÓDULO III SUBMÓDULO III Elaboración de Páginas Web Profra. I.S.C. Karina Delgado Huante þ 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