MÓDULO III SUBMÓDULO III
                                    Elaboración de Páginas Web
                                Pr...
MÓDULO III SUBMÓDULO III
                                  Elaboración de Páginas Web
                              Profra...
MÓDULO III SUBMÓDULO III
                                 Elaboración de Páginas Web
                             Profra. ...
MÓDULO III SUBMÓDULO III
                                  Elaboración de Páginas Web
                              Profra...
MÓDULO III SUBMÓDULO III
                                   Elaboración de Páginas Web
                               Prof...
MÓDULO III SUBMÓDULO III
                                 Elaboración de Páginas Web
                             Profra. ...
MÓDULO III SUBMÓDULO III
                                      Elaboración de Páginas Web
                                ...
MÓDULO III SUBMÓDULO III
                                  Elaboración de Páginas Web
                              Profra...
MÓDULO III SUBMÓDULO III
                                  Elaboración de Páginas Web
                              Profra...
MÓDULO III SUBMÓDULO III
                                Elaboración de Páginas Web
                            Profra. I....
Upcoming SlideShare
Loading in...5
×

Tutorial HTML Práctica 1

3,200

Published on

Tutor

Published in: Education, Technology, Design
0 Comments
0 Likes
Statistics
Notes
  • Be the first to comment

  • Be the first to like this

No Downloads
Views
Total Views
3,200
On Slideshare
0
From Embeds
0
Number of Embeds
0
Actions
Shares
0
Downloads
70
Comments
0
Likes
0
Embeds 0
No embeds

No notes for slide

Tutorial HTML Práctica 1

  1. 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. 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. 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. 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. 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. 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. 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. 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. 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. 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

×