jueves, 31 de enero de 2013

html: frames

Buenos días,
Para distribuir la información en la pantalla se solía trabajar con tablas, así nos salía de manera correcta en nuestro navegador.
Pero lo normal es trabajar con marcos, os dejo un enlace donde nos lo explica muy claramente.

Ojo el código de los marcos debemos meterlo entre la etiqueta head y la de body, quedando la estructura de la siguiente manera:

<html >
<head>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" />
<title>Documento sin t&iacute;tulo</title>
</head>
          <frameset rows="80,*">
    <frame src="titulo.html"/>
 <frameset cols="80,*" frameborder="no" border="0"                    framespacing="0">
  <frame src="index.html" name="leftFrame" scrolling="No" noresize="noresize" id="leftFrame" title="menu" />
  <frame src="inicio.html" name="contenido" />
    </frameset>
          </frameset>
          <noframes>
          <body>
          </body>
          </noframes>
 </html> 

EJERCICIO:
el trabajo que hemos realizado hasta ahora lo vamos a distribuir con marcos de maneras que la página tendrá tres marcos. 

  • Un marco arriba que será el título. Ocupa todo el ancho y el 20% de la pantalla de alto.
  • Un marco izquierda que ocupar el 20% del ancho que será el índice
  • Un marco central que será donde aparecerá la página seleccionada en el índice
Ojo para que cada vez que pinchemos en un enlace del indice nos lo muestre en la página central deberemos utilizar en las etiquetas <a href la propiedad target indicando en que ventana deberá abrirse. En el ejemplo de arriba deberemos poner algo así:
<a href="capitulo1.html" target="contenido"> capitulo1</a>
habiéndole dado al marco central en nombre contenido mediante la etiqueta name="Contenido" cuando creamos el frame
deberá quedar algo del estilo:





Un saludo

martes, 29 de enero de 2013

html: texto y tablas

Para dar formato al texto, acompañando a la etiqueta <font></font>podemos utilizar:

  • size: tamaño absoluto 1-7
  • Face: tipo de letra, separandola por coma, podemos poner varios tipos, que se elegirán por orden de aparición.
  • Etiqueta <sub></sub> para poner el texto como subindice
Para  crear tablas utilizamos:
  • Etiqueta <table> </table> para definir las tablas.
  • Etiqueta <tr> </tr> para definir las características de la fila.
  • Etiqueta <td> </td> para definir las caraterísticas de la celda.
  • Atributo WIDTH para el ancho
  • Atributo BORDER para poner el borde
  • Atributo CELLSPACING define la separación entre las celdas en pixeles.
  • Atributo CELLPADDING número pixeles entre borde y contenido.
  • Atributo WIDTH y HEIGHT, ancho y alto, en pixeles o porcentaje.
  • Atributo ALIGN alineación right, left, center.
  • Atributo VALIGN alineación en vertical, top, botton, middle.
  • Atributo BGCOLOR, color de fondo.
  • Atributo BACKGROUND, imagen de fondo de la tabla.
Para unir celdas utilizamos:
  • COLSPAN, para unir columnas.
  • ROWSPAN, para unir filas
EJERCICIO: 
Con todo esto, haz un nuevo punto en el indice que se llame tablero y que nos envíe a un archivo nuevo, tablero.html. En este archivo nuevo crea una tabla, que ejerza de tablero de ajedrez, con las celdas en blanco y negro, poniendo imágenes de los buenos del señor de los anillos en un extremo y en el otro los malos. En la fila de los peones deberá aparecer el nombre en mayúsculas de los personajes que aparecene en la imágen: 
  • Nombre de los malos, letra arial, tamaño 3
  • Nombre de los buenos, letra helvetica, tamaño 4
  • La letras en color rojo.

Un saludo

jueves, 24 de enero de 2013

html: 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
 


martes, 22 de enero de 2013

html: enlaces a páginas del ordenador 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  copiandolo 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 envie al inicio de cada campitulo, y en el final de cada capitulo un enlace que nos permita volver al inicio

Un saludo








domingo, 20 de enero de 2013

html: 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

martes, 15 de enero de 2013

Formato de los caracteres

Buenos días,
en el primer ejercicio deberemos cambiar el formato de las letras y en el segundo ejercicio utilizaremos caracteres especiales para escribir las comillas y las eñes.


Aspecto de la letra


Para esto utilizaremos strong, b, blink, font, sup, sub

Ejercicio caracteres extendidos



Un saludo

jueves, 10 de enero de 2013

HTML

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

martes, 8 de enero de 2013

Trabajo final de impress y prezi

Feliz año a todos,
tenemos pendientes el trabajo final de impress y el de prezi.
Para el de impress, cómo a la mayoría os pesa mucho da problemas, lo que podéis hacer es colgarlo en drive y en slideshare. En una entrada que se llame impress, incrustamos la presentación de slideshare y debajo damos opción de descargar la carpeta comprimida que hemos subido a drive (puede ser site, dropbox ...)
Para prezi una vez acabada la presentación la incrustaremos en una entrada que se titule "trabajo final de Prezi"
Un saludo