CLASE 4 - BLOGS Y HTML GRADO DÉCIMO

¿QUÉ ES HTML? ¿Qué es HTML? El HTML es el lenguaje que se usa para escribir las páginas web. Con este lenguaje se introduce todo lo que nosotros deseamos que aparezca en nuestra página web ( textos, imágenes, video, audio.. etc ) y... una serie de instrucciones o marcas ( tags ) que le van a decir a los navegadores ( Browser ), como se tiene que ver nuestra página. El trabajo que tienen que hacer los navegadores es sencillo, transforman el contenido que hemos escrito ( textos, imágenes, video, audio.. etc ), en la imagen que verás en la pantalla de tu ordenador.

¿QUÉ ES HTML? ¿HTML y Blogs? Todo lo que vemos en internet está estructurado mediante código HTML (el cuerpo), incluyendo nuestro blog. Teniendo en cuenta esto, podemos modificar parte de nuestro blog usando código HTML para lograrlo, y ya que ese es su lenguaje nativo, no hay que hacer muchos cambios.

Ahora vamos a ver ejemplos de cómo modificar algunos aspectos de nuestro blog, usando código HTML, el cual puede incluso contener otros lenguajes para maximizar sus efectos. Blogger Antes de iniciar, veamos cuales son las opciones que nos da Blogger para agregar este código HTML: HTML - APLICACIÓN

HTML – DÓNDE AGREGARLO? OPCIÓN 1 Buscaremos la pestaña «plantilla» y en nuestra plantilla actual hacemos clic sobre «editar HTML»

HTML – DÓNDE AGREGARLO? OPCIÓN 1 Y dentro de esta ventana, buscaremos el lugar donde agregaremos nuestro código

HTML – DÓNDE AGREGARLO? OPCIÓN 2 En la pestaña «diseño» agregaremos un gadget desde la opción «añadir un gadget»

HTML – DÓNDE AGREGARLO? COLOCA TÍTULO OPCIONAL AQUÍ COLOCAS EL CÓDIGO QUE DESEAS AGREGAR PARA QUE SEA VISIBLE OPCIÓN 2 Buscaremos el gadget «HTML/Javascript» Y lo agregamos, y luego:

HTML – QUÉ AGREGAR? barra de título del navegador en movimiento Para implementarlo en tu blog, simplemente tienes que ir a Diseño> Edición de HTML y sin expandir plantillas de artilugios buscamos pulsando conjuntamente las teclas: (Ctrl+F) y localizamos: y justo encima pegas el siguiente código: var txt="AQUÍ EL TÍTULO DEL BLOG"; var espera=100; var refresco=null; function rotulo_title() { document.title=txt; txt=txt.substring(1,txt.length)+txt.charAt(0); refresco=setTimeout("rotulo_title()",espera);} rotulo_title(); Tan solo debes poner en donde esta rojo el titulo de tu blog y también puedes modificar la velocidad en el numero 100 a mayor numero, el titulo de tu blog ira mas despacio.

HTML – QUÉ AGREGAR? Botón Spoiler en Blogger El spoiler tiene la función de ocultar y mostrar texto o imágenes, y es muy útil a la hora de querer reducir espacio en las entradas o solamente si quieres que el texto o la imagen solo se vea al pulsarlo. Lo primero que necesitaremos es el código: AQUI EL CONTENIDO QUE QUIERAS OCULTAR

HTML – QUÉ AGREGAR? Botón Spoiler en Blogger El texto en rojo lo puedes modificar por el texto,link o lo que quieras poner. Copia el código y pégalo en la una entrada en Edición de HTML en el lugar de la entrada donde quieres mostrarlo.

HTML – QUÉ AGREGAR? Como poner música en tu blog. Si quieres que los visitantes de tu blog escuchen música mientras visitan la pagina, aquí tienes una forma muy fácil de poner la canción: Paso 1. Ir a Paso 2. Buscar el tema que quieras poner en tu post o blog. Paso 3. Copias lo que está debajo de donde dice "Pon esta canción en tu web". Paso 4. Ir a la pestaña Diseño en tu blog y agrégalo con el gadget «HTML/Javascript» Paso 5. Guárdalo, y ya estará. Como alternativa, puedes pegarlo en una nueva entrada, o en una de las que ya tienes, pero tendrás el problema de que cambiará de lugar, según las entradas que crees.

HTML – QUÉ AGREGAR? Como poner música en tu blog. Buscas la canción y al lado de la canción hacemos clic y seleccionamos «compartir» Copiamos todo este código

HTML – QUÉ AGREGAR? Dividir en columnas el texto de la entrada Este truco es de mucha utilidad cuando tenemos un texto muy largo: Texto de la columna (lado izquierdo) Texto de la columna (lado derecho) Al crear una nueva entrada pegamos este código en edición HTML y el texto que esta en verde o naranja lo cambiaremos por el texto que queramos poner en esa entrada.

HTML – QUÉ AGREGAR? Dividir en columnas el texto de la entrada Si quieres agregar imágenes, este es el código: Texto de la columna (lado izquierdo) Texto de la columna (lado derecho) Tengan en cuenta: las imágenes deben ser pequeñas, ej: 300 x 300 pixeles

HTML – QUÉ AGREGAR? Opción columnas Opción columnas con imágenes

TRABAJO EN CLASE Aplicaremos los códigos (scripts) a nuestro blogs, y por cada entrada creada. Consultaremos en internet sobre un nuevo script para agregar a nuestro blog y lo aplicaremos ya sea en una entrada o en todo el blog. Al final, crearemos una entrada donde explicaremos los códigos que hemos ingresado y que hace cada uno (incluyendo el nuevo).