Html IV: body, imágenes y listados

Sabiendo que las siguientes instrucciones que podemos utilizar dentro de la etiqueta body:

• bgcolor
• background
• text
• link
• vlink
• alink
• marginwidth
• marginheight

y las  etiquetas  para meter una imagen y sus instrucciones son:

• img scr
• alt
• height
• width
• align
• border
• hspace
• vspace

además,vimos cómo hacer que sea un enlace, al ponerla dentro de <a href="" ><img scr...></a>

con esto deberemos hacer el siguiente ejercicio:

• En el ejercicio de enlaces, último realizado, poner color de fondo negro, letra en blanco, los enlaces en rojo, los usados en azul y los activos en amarillo.
• Meteremos la imagen de una casita para volver al indice.

Y teniendo en cuenta que las etiquetas para crear listas son:

• <ul></ul> listas con puntos
• type para cambiar el tipo de punto
• <li> para crear un punto nuevo
• <ol></ol> listas con números
• type="1"   o  "i" o  "I" o  "a" o  "A"
• <dl></dl> listas especiales

Realiza el siguiente ejercicio en la página del índice del señor de los anillos:

Crea el siguiente listado:

1.  CAPITULO 1
• Parte 1
• Parte 2
2. CAPITULO 2
• Parte1
• Parte2

Y en cada uno de los puntos que nos envíe al sitio correspondiente. Si queremos que nos envíe a una parte determinada de nuestra página, a un ancla, se lo deberemos decir mediante la siguiente etiqueta:

 <a href="capitulo1.html#parte1">Parte 1</a>

Un saludo

 

Campus científicos de verano

OS dejó el enlace para solicitar participar en campus científicos en verano

Html III: enlaces a otros archivos y anclas

Hasta ahora hemos visto los enlaces para ir a páginas que se encuentran en otros ordenadores o servidores.
Tenemos otras posibilidades:

• Página que se encuentran en nuestro ordenador.
• Anclas

1.- Página que se encuentran en nuestro ordenador.
Para páginas que se encuentren en nuestro ordenador sería de la siguiente manera:
<a href= "capitulo1.html">ir al capitulo 1</a>
En el ejemplo de arriba, vemos que en vez de la url de la página, ponemos el nombre del archivo.

2.-Si la página es muy larga para evitar que la gente tenga que leer todo para llegar a la información que le interesa utilizamos anclas.

Las anclas se definen de la siguiente manera:

 <a name="capitulo1"> 

y para que en nuestra página se mueva hasta el punto indicado deberemos poner:

<a href="#capitulo1">Ir al capitulo1</a>

EJERCICIO 1:

haz el siguiente ejercicio utilizando las anclas y poniendo todos los textos en una sola página

EJERCÍCIO 2:

Crea el ejercício anterior en una sola página utilizando anclas. Para que la separación sea grande, introduce mas texto  copiándolo de la siguiente página o mete imágenes mediante la etiqueta <img src="url de la imagen">.

En esta práctica crea un indice que te envíe al inicio de cada capitulo, y en el final de cada capitulo un enlace que nos permita volver al inicio

Un saludo

Html II: enlaces

Un enlace es una zona de texto o gráfico que si son pulsados nos envían a otra parte de la página o a una página diferente de internet. Esas páginas pueden estar en el ordenador o repartidas por internet.
Todo lo que encerremos con la etiqueta <a> </a> será considerado enlace. veamos un ejemplo:

<a href="www.google.com"> ir a google</a>

Href es necesario para indicar la página a la que enviaremos cuando se pinche en el enlace.

Teniendo en cuenta esto realiza los siguientes ejercicios:

Un saludo

Html I: comenzamos

Buenos días, comenzamos con la programación en html para la creación de páginas web.

Cómo ya hemos comentado antes, para trabajar vamos a tener tres opciones:

• utilizar un editor on line de html:  http://htmledit.squarefree.com/
• Utilizar el blog de notas gedit y una navegador para ver cómo van quedando las páginas.
• La opción mas recomendada: un editor visual de archivos HTML nos vendrá muy bien para poder ver la apariencia que está tomando cada página y poder realizar las diferentes modificaciones, sin tener que recurrir al navegador permanentemente, aunque no es del todo imprescindible. En nuestro caso nos inclinaremos por emplear la aplicación BlueGriffon, que es gratuita, multiplataforma y de código abierto. Existen otras alternativas, pero ésta es la que más se ajusta a nuestras necesidades.
• Os dejo en enlace para la descarga de la aplicación.http://bluegriffon.org/freshmeat/1.5.1/setup-bluegriffon.exe
• Podemos también descargarnos la versión portable:http://bluegriffon.org/freshmeat/1.5.1/bluegriffon-win32.zip
  Es un archivo comprimido que tenemos que descomprimirlo en nuestro usb

Recomiendo en principio para los primeros ejercicios la tercera opción. Posteriormente cuando hagamos nuestra página web propia la segunda opción.

Primer ejercicio.

Para esta primera práctica utilizaremos las instrucciones html, head, body, p, align, tittle, pre width,br,div, blockquote.

Un saludo

Presentaciones móvil

DECK

Una vez descargada la app en nuestro dispositivo móvil para crear una presentación realizaremos los siguientes pasos:

1. Abrimos la app y pinchamos en crear.
   
2. Nos sale una plantilla con diferentes puntos sobre los que trabajaremos. Cada punto es una diapositiva.
   
3. Si queremos eliminar algún punto pincharemos en el icono del cubo de basura arriba a la izquierda y eliminaremos la diapositiva que no queramos.
   
4. Si queremos meter algún elemento en nuestras diapositivas pulsaremos sobre el signo + que aparece a la derecha. Los elementos que podremos introducir son:
   
1. Imagen. Solo permite hasta 3mb de tamaño de imagen
   
2. Gráfico.
   
3. Diagrama.
   
4. Tabla.
   
5. Si queremos sobre escribir en la diapositiva pulsaremos sobre la zona donde aparece el texto.
   
6. Para reorganizar las diapositivas pulsaremos sobre el el icono de la imagen.
7. Una vez acabada la diapositiva la podremos exportar pinchando en los tres puntos que aparecen arriba a la izquierda
   
   y publicarla de la misma manera en que lo hemos hecho con los elementos multimedia anteriores.
   

APP PRESENTACIONES GOOGLE

Creación de presentaciones mediante la app presentaciones google.

Abrimos la app y lo primero que nos salen son las presentaciones que hemos realizado con el móvil y un símbolo de mas que nos permitirá crear nuevas

Si tenemos sincronizado el dispositivo nos permitirá abrirla desde el móvil o desde drive. 

Para ver una presentación creada simplemente pincharemos sobre ella. Si queremos crear una nueva presentación lo que haremos será pulsar al signo mas con circulo rojo. Nos saldrá la primera diapositiva. Al hacer doble click sobre los objetos nos permitirá insertar texto y nos salen las diferentes opciones.
En los iconos de arriba vemos que podemos hacer, deshacer, ver la presentación, añadir editores e insertar diferentes objetos

Al hacer click sobre objeto o doble click tambien nos aparece arriba el icono de formato donde podremos cambiar lo que nos interese como colores, tipo letras, etc. En la parte de abajo de la pantalla nos aparecen las diferentes opciones en cada caso

 una vez que nuestra diapositiva está acabada pincharemos fuera y abajo a la izquierda nos aparecerá la opción de añadir nuevas diapositivas saliéndonos todas las opciones posibles.

 Seleccionamos el tipo que queremos y seguiremos jugando.

 Si sólo hacemos un click se ilumina el marco y nos permite jugar con sus opciones apareciéndonos en la parte de abajo de la pantalla

 En cualquier diapositiva pinchando en el mas que aparece al lado de la A de formato nos permite insertar diferentes elementos como texto, imagen, forma, lineas

 y si movemos hacia abajo aparecerá también la opción de insertar tablas

 Seleccionamos el número de filas y columnas apareciendo en la pantalla. Ahora tenemos que jugar con el click y doble click para seleccionar la tabla o las celdas y poder escribir

 Una vez acabada la presentación podremos ver las opciones de compartir pinchando en los tres puntos de arriba a la derecha. Seleccionamos compartir y exportar eligiendo la opción deseada.

Publicación presentaciones realizadas en el blog del aula.
Si pinchamos en obtener enlace, se copia en el portapapeles y lo publicaremos enviándolo por correo del mismo modo realizado en las apps anteriores

Publicación presentaciones realizadas en el blog del aula.
Proyectos uso móviles y las apps aprendidas en el aula.

1. Presentación centro con móvil, otra presentación realizada con WPS