(de clic sobre la imagen para verla mejora)
Actividad en clase
- Las etiquetas básicas de HTML aquí mostradas, deben ir en el cuaderno.
- La página Web de la segunda imagen, fue la utilizada para orientar el trabajo del Taller 1, donde se trabajó hasta el primer párrafo, se marcó con nombre completo y curso en un segundo párrafo y luego se insertó la imagen entre estos dos párrafos.
- El trabajo finalizará utilizando Google Drive, donde se creará la carpeta de la asignatura y en ella la subcarpeta Taller 1, que contendrá los 2 archivos de este taller: el archivo de la página web y la imagen descargada que se utilizará en la página.
Paso a paso para los estudiantes que están atrasados y desean ponerse al día o estudiar:
1. Recuerde que en cada clase debe crear la carpeta que contendrá el trabajo de ese día. En este caso debe crear la carpeta Taller 1 en su dispositivo de almacenamiento.
2. Abra el programa Bloc de notas (Inicio > Todos los programa > Accesorios > Bloc de notas).
3. Digite en el Bloc de Notas el siguiente código exactamente:
<html>
<head>
<title>HTML Facilito</title>
</head>
<body>
<h1>Aprendiendo Lenguaje HTML</h1>
</body>
</html>
4. Guarde el documento con el nombre Taller 1 - apellidos en la carpeta creada (Taller 1). Guardar no significa cerrar el archivo, solo guárdelo correctamente y minimice el Bloc de Notas.
5. Abra su carpeta y observe que el archivo quedó bien guardado. Además observe que el ícono que tiene asignado es un ícono de una hojita el cual corresponde a un archivo creado en Bloc de Notas (archivo de texto plano). Minimice la carpeta y manténgala abierta para estar verificando siempre que lo que se guarde quede en el lugar que se quiere, en este caso, en la carpeta Taller 1.
6. Ahora utilice la opción Guardar como... para guardar el archivo nuevamente pero ahora asignándole al nombre la extensión .html (formato de página web) inmediatamente despues de lo que digitó como nombre de archivo (sin espacios y con punto, no coma o guión). El nombre debe quedar Taller 1 - apellidos.html
7. Vuelva a maximizar la carpeta y observe que ahora debe tener 2 archivos (el de texto y la página web). En este taller se generó el primer archivo (el de texto) solo para que ustesd vea la diferencia, pero en los próximos talleres ese documento de texto plano (.txt) no debe quedar, siempre se debe guardar el código HTML con esa extensión (.html) para que quede con formato de página web.
8. Ahora vuelva al documento del código, el que está digitando en el Bloc de notas y complete el código con lo que haga falta según lo indicado a continuación:
<html>
<head>
<title>HTML Facilto</title>
</head>
<body>
<hr>
<h1>Aprendiendo Lenguaje HTML</h1>
<hr>
<h2>Formatos de texto en HTML</h2>
<p>La forma más <strong>fácil</strong> de cambiar el formato de texto cuando se trata de <ins>una palabra</ins> o una <ins>frase</ins> en un párrago, es encerrando esa fracción de texto con las etiquetas para modificar su formato.
<p>Presentado por: <strong><em><ins>Nombre completo y curso</ins></em></strong>
</body>
</html>
9. Guarde su código nuevamente con Ctrl + G, de clic sobre la página web que está visualizando con el navegador y de clic en Ctrl + R o en F5 para actualizar los cambios y ver las modificaciones hechas. Revise y corrija de ser necesario, si alguna parte del código no se ve reflejado en la página web debe ser porque alguna etiqueta quedó mal digitada.
10. Ahora vualva al código y entre los dos párrafos creados digite una nueva etiqueta. De enter para separar los párrafos y allí digite el siguiente código que es el que corresponde para insertar una imagen.
<p><img src="carita.jpg">
11. Guarde el archivo con Ctrl + G y minimice el programa (no actualice todavía la página web porque no ha conseguido la imagen y eso lo va a hacer en el siguiente punto).
12. Con ayuda de Google, busque una imagen de una carita, más o menos de 300 X 300 pixeles y descárguela en la carpeta Taller 1 con el nombre carita. Al escribir el nombre de la imagen cuando la esté descargando recuerde verificar el formato de la imagen debajo del nombre del archivo que está asignando, ya que puede ser una imagen JPEG (.jpg), una imagen PNG (.png), una imagen GIF (.gif), etc. Lo más común es que sea JPEG, pero debe confirmar. El nombre debe quedar bien asignado a la imagen para que corresponda con el que se digitó en el código HTML.
13. Ahora si, vaya al navegador y actualice la página web con Ctrl + R o con F5 para ver los cambios. Si la imagen no sale debe verificar que esté guardando como página web y en el lugar correcto (carpeta Taller 1) y que además la imagen también esté guardada en esa carpeta y que los nombres de la imagen tanto en el código como en la carpeta sean iguales y del mismo formato.
14. Ya terminada la página web de hoy lo que se debe hacer es subir los dos archivos que se tiene a Google Drive (el que está asociado a su cuenta de correo electrónico de GMail). Ingrese a Google Drive y cree una carpeta llamada Informática (botón Nuevo, Crear Carpeta, digitar el nombre Informática y clic en Crear).
15. Antes de ingresar a la carpeta Informática compártala con la profesora. De clic derecho sobre ella y elija, del menú contextual, la opción Compartir. De la ventana que se abre, en la casilla Personas digite informaticajdsm@gmail.com, verifique que escribió bien el correo y de clic en Enviar.
16. Ahora si ingrese a la carpeta Informática y cree otra carpeta allí llamada Taller 1. Luego ingrese a esa carpeta Taller 1 y suba los 2 archivos (la página y la imagen), esto lo hace también con el botón Nuevo, con la opción Subir archivo. Espere a que se cargue y listo, ha finalizado su primer taller de HTML, recuerde cerrar su Drive y su correo electrónico.
1. Recuerde que en cada clase debe crear la carpeta que contendrá el trabajo de ese día. En este caso debe crear la carpeta Taller 1 en su dispositivo de almacenamiento.
2. Abra el programa Bloc de notas (Inicio > Todos los programa > Accesorios > Bloc de notas).
3. Digite en el Bloc de Notas el siguiente código exactamente:
<html>
<head>
<title>HTML Facilito</title>
</head>
<body>
<h1>Aprendiendo Lenguaje HTML</h1>
</body>
</html>
4. Guarde el documento con el nombre Taller 1 - apellidos en la carpeta creada (Taller 1). Guardar no significa cerrar el archivo, solo guárdelo correctamente y minimice el Bloc de Notas.
5. Abra su carpeta y observe que el archivo quedó bien guardado. Además observe que el ícono que tiene asignado es un ícono de una hojita el cual corresponde a un archivo creado en Bloc de Notas (archivo de texto plano). Minimice la carpeta y manténgala abierta para estar verificando siempre que lo que se guarde quede en el lugar que se quiere, en este caso, en la carpeta Taller 1.
6. Ahora utilice la opción Guardar como... para guardar el archivo nuevamente pero ahora asignándole al nombre la extensión .html (formato de página web) inmediatamente despues de lo que digitó como nombre de archivo (sin espacios y con punto, no coma o guión). El nombre debe quedar Taller 1 - apellidos.html
7. Vuelva a maximizar la carpeta y observe que ahora debe tener 2 archivos (el de texto y la página web). En este taller se generó el primer archivo (el de texto) solo para que ustesd vea la diferencia, pero en los próximos talleres ese documento de texto plano (.txt) no debe quedar, siempre se debe guardar el código HTML con esa extensión (.html) para que quede con formato de página web.
8. Ahora vuelva al documento del código, el que está digitando en el Bloc de notas y complete el código con lo que haga falta según lo indicado a continuación:
<html>
<head>
<title>HTML Facilto</title>
</head>
<body>
<hr>
<h1>Aprendiendo Lenguaje HTML</h1>
<hr>
<h2>Formatos de texto en HTML</h2>
<p>La forma más <strong>fácil</strong> de cambiar el formato de texto cuando se trata de <ins>una palabra</ins> o una <ins>frase</ins> en un párrago, es encerrando esa fracción de texto con las etiquetas para modificar su formato.
<p>Presentado por: <strong><em><ins>Nombre completo y curso</ins></em></strong>
</body>
</html>
9. Guarde su código nuevamente con Ctrl + G, de clic sobre la página web que está visualizando con el navegador y de clic en Ctrl + R o en F5 para actualizar los cambios y ver las modificaciones hechas. Revise y corrija de ser necesario, si alguna parte del código no se ve reflejado en la página web debe ser porque alguna etiqueta quedó mal digitada.
10. Ahora vualva al código y entre los dos párrafos creados digite una nueva etiqueta. De enter para separar los párrafos y allí digite el siguiente código que es el que corresponde para insertar una imagen.
<p><img src="carita.jpg">
11. Guarde el archivo con Ctrl + G y minimice el programa (no actualice todavía la página web porque no ha conseguido la imagen y eso lo va a hacer en el siguiente punto).
12. Con ayuda de Google, busque una imagen de una carita, más o menos de 300 X 300 pixeles y descárguela en la carpeta Taller 1 con el nombre carita. Al escribir el nombre de la imagen cuando la esté descargando recuerde verificar el formato de la imagen debajo del nombre del archivo que está asignando, ya que puede ser una imagen JPEG (.jpg), una imagen PNG (.png), una imagen GIF (.gif), etc. Lo más común es que sea JPEG, pero debe confirmar. El nombre debe quedar bien asignado a la imagen para que corresponda con el que se digitó en el código HTML.
13. Ahora si, vaya al navegador y actualice la página web con Ctrl + R o con F5 para ver los cambios. Si la imagen no sale debe verificar que esté guardando como página web y en el lugar correcto (carpeta Taller 1) y que además la imagen también esté guardada en esa carpeta y que los nombres de la imagen tanto en el código como en la carpeta sean iguales y del mismo formato.
14. Ya terminada la página web de hoy lo que se debe hacer es subir los dos archivos que se tiene a Google Drive (el que está asociado a su cuenta de correo electrónico de GMail). Ingrese a Google Drive y cree una carpeta llamada Informática (botón Nuevo, Crear Carpeta, digitar el nombre Informática y clic en Crear).
15. Antes de ingresar a la carpeta Informática compártala con la profesora. De clic derecho sobre ella y elija, del menú contextual, la opción Compartir. De la ventana que se abre, en la casilla Personas digite informaticajdsm@gmail.com, verifique que escribió bien el correo y de clic en Enviar.
16. Ahora si ingrese a la carpeta Informática y cree otra carpeta allí llamada Taller 1. Luego ingrese a esa carpeta Taller 1 y suba los 2 archivos (la página y la imagen), esto lo hace también con el botón Nuevo, con la opción Subir archivo. Espere a que se cargue y listo, ha finalizado su primer taller de HTML, recuerde cerrar su Drive y su correo electrónico.
