CURSO: TECNOLOGÍAS DE LA INFORMACIÓN Y LA COMUNICACIÓN PARA LA CREACIÓN DE MATERIAL EDUCATIVO SESIÓN 5. BLOG HTML
SESIÓN 5: BLOG HTML
En esta sesión veremos los fundamentos de la programación HTML, el uso de etiquetas, el uso de atributos. Usaremos los conceptos adquiridos para modificar las etiquetas en un blog.
Aprendizaje Esperado
El participante tendrá las nociones de creación de páginas web con HTML, lo cual le permitirá realizar ediciones en código en su Blog, para insertar enlaces, tablas, contenido en flash, imágenes, etc. Actividad 01: ¿Qué es HTML?
HTML, siglas de HyperText Markup Language («lenguaje de marcado de hipertexto»), es el lenguaje de marcado predominante para la elaboración de páginas web. Es usado para describir la estructura y el contenido en forma de texto, así como para complementar el texto con objetos tales como imágenes. HTML se escribe en forma de «etiquetas»(en inglés tags), rodeadas por corchetes angulares (<,>). Principalmente hay tres tipos de etiquetas.
Etiqueta cerrada <CENTER> Mi página Web </CENTER> Etiqueta abierta <BR> Etiqueta con parámetros <BODY bgcolor="#FFFFFF"> </BODY>
A continuación con tu navegador preferido ingresa a http://www.blogger.com/, luego da click derecho y selecciona la opción Ver código fuente de página y analiza las etiquetas que encuentras en esta página. Para complementar está información revisa el documento Aprender el lenguaje HTML.
Actividad 02: Creando una tabla.
La forma más sencilla de tener total control sobre nuestra página es diseñando una tabla en la cual encajaremos nuestro diseño web. El código para crear una tabla es: <table width="200" height="100" cellspacing='10' cellpadding='5' align='center' border="1"> <tr> <td width="200" height="50">&nbsp;</td> <td width="200" height="50">&nbsp;</td> <td width="200" height="50">&nbsp;</td> </tr> <tr> <td width="200" height="50">&nbsp;</td> <td width="200" height="50">&nbsp;</td> <td width="200" height="50">&nbsp;</td> </tr> </table> Analicemos este código: <table width="200" border="1">
height="100"
cellspacing='10'
cellpadding='5'
align='center'
</table> Este código indica el inicio y el fin de la tabla, indicándonos el ancho de la tabla =200, una altura de =100, el espaciado entre celdas es =10, el espaciado entre el contorno de la celda y el contenido de la celda =5, la alineación de la tabla en la página =center (centrado) y el grosor del borde =1, para que no se muestre borde el valor deberá ser 0. Todo lo que se encuentre dentro pertenecerá a la tabla
<tr> </tr> Este código nos indicará el inicio y fin de la fila (row). Todo lo que este dentro de este código pertenecerá a dicha fila. Tener en cuenta que no tiene una numeración de fila. <td width="200" height="50">&nbsp;</td> Este código nos indica los valores de la celda ancho=200, altura = 50. Cabe resaltar que estos valores serán proporcionales al tamaño de la tabla y a los valores dados a las demás celdas. Una tabla nos ayuda muchísimo al momento de organizar la página visualmente, pero para poder tener un mejor uso del espacio uniremos en ocasiones diferentes celdas. Las uniremos con estos códigos rowspan: Indica el número de filas que ocupará la celda. Por defecto ocupa una sola fila. colspan: Indica el número de columnas que ocupará la celda. Por defecto ocupa una sola columna. Podemos indicar que una celda ocupará dos espacios de columna reemplazando el código: <td width="200" height="50">&nbsp;</td> <td width="200" height="50">&nbsp;</td> con el siguiente código: <td height="50" colspan="2">&nbsp;</td> Similarmente podemos crear celdas que ocuparían dos espacios de fila con el siguiente código: <td width="200" rowspan="2">&nbsp;</td> También podremos crear una celda que ocupe 2 columnas y 2 filas. <td colspan="2" rowspan="2">&nbsp;</td> En la tabla original tenía 6 celdas, ¿si decido unir todas las celdas cual sería el código resultante? <table width="200" height="100" cellspacing='10' cellpadding='5' align='center' border="1">
</table> Puedes probar la edición de código en la página: http://www.lawebera.es/recursos/herramientas/probar_codigo_html.php No te olvides de dar click en ver resultado para comprobar tu respuesta. Una forma sencilla de crear tablas es introduciendo los valores en el formulario de esta página web: http://www.entraenlared.com/recursos_promocion_web/creacion_tabla.asp Actividad 03: Ingresemos a Blogger
Ingresa blogger y crea un nuevo blog que usaremos de pruebas. Ingreso a blogger 1) Abre el navegador de tu preferencia. 2) En la barra de direcciones escribe http://www.blogger.com 3) Identifícate con tu cuenta. Esto te llevará http://www.blogger.com/home 4) En esa página crea un Nuevo Blog.
a
la
página
Título: Prueba + Nombre del participante Dirección: prueba + iniciales del participante Plantilla: Seleccionar la plantilla que más le guste. Al finalizar dar click en el botón “Crear Blog” Actividad 04: Crear una entrada en el blog
Ingresemos al blog que creamos en la actividad 03, dando click en el enlace Prueba + Nombre completo
Ahora daremos click en el botón
.
En la nueva ventana que nos aparece las opciones de colocar nuestra entrada directamente con las herramientas gráficas (opción Redactar) o escribir el código en HTML (opción HTML)
.
Para fines prácticos usaremos la plantilla Prueba.txt y copiaremos todo el contenido teniendo la opción HTML habilitada. <table width="635" height="385" border="1"> <tr> <td width="100"><a href="http://www.ipnm.edu.pe/"><img src="http://dl.dropbox.com/u/12352176/logo_ipnm.png" width="83" height="62" alt="IPNM" /></a></td> <td width="400" colspan="2">&nbsp;</td> <td width="100">&nbsp;</td> </tr> <tr> <td>&nbsp;</td> <td colspan="2"><center> <strong>Titular </strong> </center></td> <td width="100">&nbsp;</td>
</tr> <tr> <td colspan="2"><strong>Subtítulo</strong></td> <td colspan="2" rowspan="2">Imagen</td> </tr> <tr> <td colspan="2">Texto</td> </tr> <tr> <td height="21">&nbsp;</td> <td colspan="2">&nbsp;</td> <td width="100">&nbsp;</td> </tr> <tr> <td colspan="2" rowspan="2">Imagen</td> <td height="30" colspan="2"><strong>Subtítulo</strong></td> </tr> <tr> <td colspan="2">Texto</td> </tr> <tr> <td height="21">&nbsp;</td> <td colspan="2">Autor: Título Nombre Completo (Ej.: Ing. Hugo Quijandría Lezameta</td> <td>&nbsp;</td> </tr> </table> Después de copiar la plantilla volveremos a la opción redactar. Como se puede observar está plantilla tiene 2 secciones diferenciadas.
En la primera escribiremos una referencia sobre nosotros, y colocará una imagen de Ud. personal o grupal. En la segunda sección hará una descripción de su institución educativa y colocará una imagen de su colegio o de la zona que lo rodea. Grabar Entrada
En este pequeño menú reemplazaremos la indicación Título de la entrada por nuestro nombre completo.
El Botón Guardar, como su nombre lo indica guardará los últimos cambios realizados, pero no publicará la entrada. El Botón Vista previa, nos mostrará cómo está quedando la entrada en nuestro blog El Botón cerrar, cerrará la entrada. El botón Publicar, se usa para publicar el trabajo. No olvidar que en la plantilla se ha colocado el borde en 1 para mayor facilidad durante la edición, pero antes de publicar hay que restablecer el valor a 0, con lo cual presentará un mejor acabado. En clase se verá con detenimiento los botones pertenecientes a la sección redactar.
Publicar en tu comunidad de facebook el enlace de tu blog y comentar los blog de tus compañeros.