• arte
  
  1. dibujo
  2. escultura
  
  

• politica
  1. españa
  2. internacional


• deporte

enlazar a una determinada posición de un documento

Siempre debemos indicar el punto al que llegar:

<a name="nombre_referencia">texto al que se llegará</a>
Hemos puesto este código al final del documento para que se aprecie que realmente funciona


enlazar a posición dentro del mismo documento:

<a href="#nombre_referencia">descripción del vínculo al que llegaremos</a>
descripción del vínculo al que llegaremos

Ej: índice


enlazar a posición de otro documento HTML:

<a href="URL#nombre_referencia">descripción del vínculo que se encuentra en otro documento al que llegaremos</a>


Ejemplos de diseño

<a href="http://cur1nf.blogspot.com/2007/09/diseo.html#ejs">Ejemplos de diseño</a>













































texto al que se llegará

tablas con formato

Podemos dar un sencillo formato a nuestra tabla:

Texto en blanco sobre fondo negro con borde blanco

<table border="1" bordercolor="white" bgcolor="black"><td><font color="white">Texto en blanco sobre fondo negro con borde blanco</font></td></tr></table><br /><br />



O complicarnos mucho mas la vida:

Podemos poner en nuestra tabla:

• un borde de grosor 3 y color fucsia
• un fondo de color negro


• que ocupe una altura del 10% del ancho de la ventana del navegador


• establecer 4 espacios entre una celda y otra

En nuestras celdas:

• cambiar el color de la letra para que la prima celda sea blanca y la segunda azul


• indicar la alineación horizontal y vertical, la primera alinear a la izquierda y arriba y la segunda a la derecha y abajo

<table bordercolor="fuchsia" bgcolor="black" border="3" width="350" height="100" cellspacing="4" cellspadding="8"><td align="left" valign="top"><span><font color="white"><b>1ªcolumna</b></font></span></td><td align="right" valign="bottom"><span><font color="aqua"><b>2ªcolumna</b></span></font></td></table>

1ªcolumna

2ªcolumna

OJO!!! pq si pasamos a la pestaña de 'Redactar' blogger nos puede traducir nuestra tabla a CSS y ya no se mostrará de igual modo. Ej:

bg border="3" cellspadding="8" style="color:black;"

Solución: ctrl+z antes de publicar para que volvamos a la pestaña de Edición de HTML sin hacernos la transformacion a CSS!!!!
<table border height="100" cellspacing="4" width="350" bg border="3" cellspadding="8" style="color:black;"><tbody><tr><td valign="top" align="left"><span style="font-size:+2;"><span style="color:white;"><b>1ªcolumna</b></span></span></td><td valign="bottom" align="right"><span style="font-size:+2;"><span style="color:aqua;"><b>2ªcolumna</b></span></span></td></tr></tbody></table>

1ªcolumna

2ªcolumna

Pero si la tabla es enorme puede ser tedioso tratar con tantos atributos.
SOLUCIÓN: CSS

tablas html empleando CSS

REDEFINIR ETIQUETAS

1. Añadir nuevos estilos a nuestra plantilla, dando formato a etiquetas existentes: table, td

   
   table {
     border: 1px solid black; 
     width: 350px;
   }
   td {
     border: 1px solid black; 
     padding: 5px;
   }
   

   
   table {<br /> border: 1px solid black; <br /> width: 350px;<br />}<br />td {<br /> border: 1px solid black; <br /> padding: 5px;<br />}
   
   


2. Comprobar que nuestra tabla sin estilo ahora si que dispone de él

Ojo!!! se aplicará a todas las tablas que ya han sido creadas.

Ej: problemas si redefinimos (li) y disponemos de tablas ordenadas y no ordenadas

NUEVAS ETIQUETAS

1. Añadir nuevos estilos a nuestra plantilla , creando nuestras propias etiquetas

   
   td.LeftAlignHdr {
     font-weight: bold;
     text-align: left;
     background-color: #CCCCCC;
   }
   td.CenterAlignHdr {
     font-weight: bold;
     text-align: center;
     background-color: #CCCCCC;
   }
   td.LeftAlign {
     font-weight: normal;
     text-align: left;
   }
   td.CenterAlign {
     font-weight: normal;
     text-align: center;
   }
   

   
   <br />td.LeftAlignHdr {<br /> font-weight: bold;<br /> text-align: left;<br /> background-color: #CCCCCC;<br />}<br />td.CenterAlignHdr {<br /> font-weight: bold;<br /> text-align: center;<br /> background-color: #CCCCCC;<br />}<br />td.LeftAlign {<br /> font-weight: normal;<br /> text-align: left;<br />}<br />td.CenterAlign {<br /> font-weight: normal;<br /> text-align: center;<br />}
   


2. Crear una tabla con esos nuevos estilos CSS resulta más sencillo y menos tedioso que crear la tabla con estilos HTML:
   <TABLE>
  <tr>
    <td class="LeftAlignHdr">
      CONCEPTO</td>
    <td class="CenterAlignHdr">
      2006</td>
    <td class="CenterAlignHdr">
      2007</td>
  </tr>
  <tr>
    <td class="LeftAlign">
      luz</td>
    <td class="CenterAlign">
      200</td>
    <td class="CenterAlign">
      300</td>
  </tr>
  <tr>
    <td class="LeftAlign">
      agua</td>
    <td class="CenterAlign">
      100</td>
    <td class="CenterAlign">
      200</td>
  </tr>
  <tr>
    <tr>
      <td class="LeftAlign">
        internet</td>
      <td class="CenterAlign">
        500</td>
      <td class="CenterAlign">
        600</td>
    </tr>
    <tr>
      <td class="LeftAlign">
        gas</td>
      <td class="CenterAlign">
        900</td>
      <td class="CenterAlign">
        950</td>
    </tr>
    <td class="LeftAlign">
      basuras</td>
    <td class="CenterAlign">
      80</td>
    <td class="CenterAlign">
      90</td>
  </tr>
  <tr>
    <td class="LeftAlign">
      IBI</td>
    <td class="CenterAlign">
      500</td>
    <td class="CenterAlign">
      600</td>
  </tr>
  <tr>
    <td class="LeftAlign">
      comunidad</td>
    <td class="CenterAlign">
      300</td>
    <td class="CenterAlign">
      400</td>
  </tr>
</TABLE>
   
   

   CONCEPTO	2006	2007
   luz	200	300
   agua	100	200
   internet	500	600
   gas	900	950
   basuras	80	90
   IBI	500	600
   comunidad	300	400

   
   
   <TABLE> <tr> <td class="LeftAlignHdr">CONCEPTO</td> <td class="CenterAlignHdr">2006</td> <td class="CenterAlignHdr">2007</td> </tr> <tr> <td class="LeftAlign">luz</td> <td class="CenterAlign">200</td> <td class="CenterAlign">300</td> </tr> <tr> <td class="LeftAlign">agua</td> <td class="CenterAlign">100</td> <td class="CenterAlign">200</td> </tr> <tr> <tr> <td class="LeftAlign">internet</td> <td class="CenterAlign">500</td> <td class="CenterAlign">600</td> </tr> <tr> <td class="LeftAlign">gas</td> <td class="CenterAlign">900</td> <td class="CenterAlign">950</td> </tr> <td class="LeftAlign">basuras</td> <td class="CenterAlign">80</td> <td class="CenterAlign">90</td> </tr> <tr> <td class="LeftAlign">IBI</td> <td class="CenterAlign">500</td> <td class="CenterAlign">600</td> </tr> <tr> <td class="LeftAlign">comunidad</td> <td class="CenterAlign">300</td> <td class="CenterAlign">400</td> </tr> </TABLE>
   

listas con y sin saltos de linea

HTML CON SALTOS DE LINEA:

1. 
   ¿Qué es un blog?


2. Decidir temática:
   
   
   
   • 
     Criterios para decidir el objetivo de tu blog
   
   
   • 
     Buscar blogs por temas.
     Rankings
   
   
   • 
     Centralizar la consulta de tus blogs favoritos
   
   


3. 
   Crear tu blog
   :
   acceso, parametrización,
   publicación..

HTML SIN SALTOS DE LINEA:

1. ¿Qué es un blog?
2. Decidir temática:
   • Criterios para decidir el objetivo de tu blog
   • Buscar blogs por temas. Rankings
   • Centralizar la consulta de tus blogs favoritos
3. Crear tu blog : acceso, parametrización, publicación..

diseño

Elementos HTML no soportados por el editor de blogger:

• texto subrayado = <u>, no es lo mismo que un link



• líneas



• no interpretar etiquetas



• más de un espacio en blanco



• comentarios: <!-texto oculto->
  ojo!! un guión mas para ocultar etiquetas


• tablas



• subíndices y superíndices: A₀=x²+4



• Texto en movimiento: <marquee>
  movimiento desde el boliche

movimiento en el bloque

movimiento de lado a lado





Atributos y combinación de elementos HTML no soportados por el editor de blogger:

• sangrar a distintos niveles



• enlazar a una determinada posición de un documento



• listas anidadas, cambiar los boliches ..
  
  
• Más combinaciones de colores



• manipulación de imágenes

Ejs de diseños:

http://www.smashingmagazine.com/2007/08/28/45-excellent-blog-designs/

no interpretar etiquetas

símbolos especiales = &# o atajo
< = &#60; = &lt;
> = &#62; = &gt;
ayudarse de 'reemplazar'


Solución óptima, insertar en área de texto, pero no respeta saltos de línea:
<textarea cols=50 rows=2 >
<u>texto subrayado</u>
texto normal
<textarea cols=50 rows=2 >
<u><br />texto subrayado</u><br />texto normal<br />


No usar, tendremos problemas:
<plaintext>

más de un espacio en blanco

solución más simple:
<pre>texto en el que se respetan   espacios y saltos de linea</pre>

texto en el que se respetan   espacios y saltos de linea

símbolo especial = &nbsp; pero ojo al cambiar a la pestaña redactar!!!
texto en el que se respetan   espacios
texto en el que se respetan   espacios


tabla sin bordes


imágenes transparentes


insertar en área de texto:
<textarea cols=50 rows=2 >
texto en el que se respetan espacios y saltos de linea

reglas básicas html

Obligatorio:

• delimitar el ámbito de las etiquetas (salvo excepciones)
• etiqueta interna se cierra antes que externa
• etiquetas a nivel de bloque pueden contener etiquetas a nivel de línea, pero no al revés
• etiquetas no sensitivas a mayúsculas

Pero no está de más cumplir además con XHTML:

• Cerrar todos los tags, ie: <p> ... </p>, <li> ... </li>
• Incluir marca de cierre para tags vacíos, ie: <hr />, <br />
• Poner entre comillas todos los atributos, ie: <img src="miimagen.gif" />
• Todos los tags en minúsculas
• Terminar con </html>
  

CSS

• comentarios: <!-linea oculta->
  
  /*parrafo oculto*/

aplicar estilos CSS

temas documentación

Me gustaría que que me indicarais los temas de los que necesitais disponer de documentación, bien porque la veis básica y quereis repasarla en un futuro o porque quereis profundizar más en ese tema y en el curso no da tiempo de abarcar tanto.

Vuestros comentarios me ayudarán a preparar una documentación más acorde con vuestros intereses. Intentaré preparárosla bien en formato electrónico o en papel según el caso.

líneas

Lineas = <hr>


Después del código "hr" especificar el color de línea:
<hr color="fuchsia">

---

Controlar el grosor de la línea especificando tras el color, el grosor deseado:
<hr color="fuchsia" size=1>

---

Controlar el largo de la línea después de especificar el grosor:
<hr color="fuchsia" size=1 width="250">

---

cambiar los boliches de las listas

1. ¿Qué es un blog?


2. Decidir temática:


• Criterios para decidir el objetivo de tu blog


• Buscar blogs por temas. Rankings


• Centralizar la consulta de tus blogs favoritos




3. Crear tu blog: acceso, parametrización, publicación..

<br /> <ol><br /> <li>¿Qué es un blog?</li><br /> <li>Decidir temática:</li><br /> <ul><li class="Sq">Criterios para decidir el objetivo de tu blog</li><br /> <li class="Sq">Buscar blogs por temas. Rankings</li><br /> <li class="Sq">Centralizar la consulta de tus blogs favoritos</li><br /> </ul><br /> <li>Crear tu blog: acceso, parametrización, publicación..</li><br /> </ol><br />

listas anidadas

1. ¿Qué es un blog?


2. Decidir temática:
   
   • Criterios para decidir el objetivo de tu blog
   
   
   • Buscar blogs por temas. Rankings
   
   
   • Centralizar la consulta de tus blogs favoritos
   
   
3. Crear tu blog: acceso, parametrización, publicación..

HTML CON SALTOS DE LINEA -> pbs:

<ol>
<li>
<a href="http://cur1nf.blogspot.com/2007/09/qu-es-un-blog.html">¿Qué es un blog?</a></li>
<li> Decidir temática:
<ul>
<li>
<a href="http://cur1nf.blogspot.com/2007/09/criterios-para-decidir-el-objetivo-de.html">Criterios para decidir el objetivo de tu blog</a></li>
<li>
<a href="http://cur1nf.blogspot.com/2007/09/buscar-blogs-por-temas.html">Buscar blogs por temas</a>.
<a href="http://cur1nf.blogspot.com/2007/09/rankings.html">Rankings</a></li>
<li>
<a href="http://cur1nf.blogspot.com/2007/09/centralizar-la-consulta-de-tus-blogs.html">Centralizar la consulta de tus blogs favoritos</a></li>
</ul></li>
<li>
<a href="http://cur1nf.blogspot.com/2007/09/crear-tu-blog.html">Crear tu blog</a>
:
<a href="http://cur1nf.blogspot.com/2007/09/acceso.html">acceso</a>, parametrización,
<a href="http://cur1nf.blogspot.com/2007/09/publicacion.html">publicación</a>..</li>
</ol>




HTML SIN SALTOS DE LINEA -> se puede copiar y pegar en la pestaña 'Edición de HTML' de alguno de vuestros posts:


<ol> <li> <a href="http://cur1nf.blogspot.com/2007/09/qu-es-un-blog.html">¿Qué es un blog?</a></li> <li> Decidir temática: <ul> <li> <a href="http://cur1nf.blogspot.com/2007/09/criterios-para-decidir-el-objetivo-de.html">Criterios para decidir el objetivo de tu blog</a></li> <li> <a href="http://cur1nf.blogspot.com/2007/09/buscar-blogs-por-temas.html">Buscar blogs por temas</a>. <a href="http://cur1nf.blogspot.com/2007/09/rankings.html">Rankings</a></li> <li> <a href="http://cur1nf.blogspot.com/2007/09/centralizar-la-consulta-de-tus-blogs.html">Centralizar la consulta de tus blogs favoritos</a></li> </ul></li> <li> <a href="http://cur1nf.blogspot.com/2007/09/crear-tu-blog.html">Crear tu blog</a> : <a href="http://cur1nf.blogspot.com/2007/09/acceso.html">acceso</a>, parametrización, <a href="http://cur1nf.blogspot.com/2007/09/publicacion.html">publicación</a>..</li> </ol>

Así es como se muestran las listas creadas con esos fragmentos de código HTML

tablas

tablas html sin formato

tablas html con formato

tablas html empleando CSS

añadir tablas a las plantillas

ejemplo de tabla creada desde plantilla de entrada

Tiempo estimado:	10 minutos
Nivel:	medio

Hemos creado una tabla añadiendo codigo html a la plantilla de los posts

tablas html sin formato

OJO!!! Ninguna de las tablas que creemos se visualizarán como tales en la vista previa. Debemos fiarnos del aspecto de la pestaña de redactar

nota: el html no tiene ningun salto de linea, son para visualizar mejor el html:

Tabla de 3 columnas:

<table>
   <tr>
      <td>1ª Columna</td>
      <td>2ª Columna</td>
      <td>3ª Columna</td>
   </tr>
</table>

1ª Columna

2ª Columna

3ª Columna

OJO!!! si no añadimos propiedades, nadie diría que es una tabla...
SOLUCIÓN: añadir borde

<table border="1">
   <tr>
      <td>1ª Columna</td>
      <td>2ª Columna</td>
      <td>3ª Columna</td>
   </tr>
</table>

1ª Columna

2ª Columna

3ª Columna

Podemos tener casillas bajo nuestras columnas:

<table border="1">
   <tr>
      <td>1ª Columna</td>
      <td>2ª Columna</td>
      <td>3ª Columna</td>
   </tr>
   <tr>
      <td>Casilla bajo 1ª Columna = 1ª Columna de la 2ª fila</td>
      <td>Casilla bajo 2ª Columna = 2ª Columna de la 2ª fila</td>
      <td>Casilla bajo 3ª Columna = 3ª Columna de la 2ª fila</td>
   </tr>
</table>

1ª Columna	2ª Columna	3ª Columna
Casilla bajo 1ª Columna = 1ª Columna de la 2ª fila	Casilla bajo 2ª Columna = 2ª Columna de la 2ª fila	Casilla bajo 3ª Columna = 3ª Columna de la 2ª fila

Podemos resaltar los encabezados de columnas:

<table border="1">
   <tr>
      <th>1ª Columna</th>
      <th>2ª Columna</th>
      <th>3ª Columna</th>
   </tr>
   <tr>
      <td>Casilla bajo 1ª Columna = 1ª Columna de la 2ª fila</td>
      <td>Casilla bajo 2ª Columna = 2ª Columna de la 2ª fila</td>
      <td>Casilla bajo 3ª Columna = 3ª Columna de la 2ª fila</td>
   </tr>
</table>

1ª Columna	2ª Columna	3ª Columna
Casilla bajo 1ª Columna = 1ª Columna de la 2ª fila	Casilla bajo 2ª Columna = 2ª Columna de la 2ª fila	Casilla bajo 3ª Columna = 3ª Columna de la 2ª fila

Podemos poner un título que se ajuste al ancho de nuestra tabla:

<table border="1">
   <caption>Esta es una tabla de 2 filas x 3 columnas que va a contener estadísticas de visitas a mi blog</caption>
   <tr>
      <th>1ª Columna</th>
      <th>2ª Columna</th>
      <th>3ª Columna</th>
   </tr>
   <tr>
      <td>Casilla bajo 1ª Columna = 1ª Columna de la 2ª fila</td>
      <td>Casilla bajo 2ª Columna = 2ª Columna de la 2ª fila</td>
      <td>Casilla bajo 3ª Columna = 3ª Columna de la 2ª fila</td>
   </tr>
</table>

Esta es una tabla de 2 filas x 3 columnas que va a contener estadísticas de visitas a mi blog

1ª Columna	2ª Columna	3ª Columna
Casilla bajo 1ª Columna = 1ª Columna de la 2ª fila	Casilla bajo 2ª Columna = 2ª Columna de la 2ª fila	Casilla bajo 3ª Columna = 3ª Columna de la 2ª fila

<table border="1"><caption>Esta es una tabla de 2 filas x 3 columnas que va a contener estadísticas de visitas a mi blog</caption><tr><th>1ª Columna</th><th>2ª Columna</th><th>3ª Columna</th></tr><tr><td>Casilla bajo 1ª Columna = 1ª Columna de la 2ª fila</td><td>Casilla bajo 2ª Columna = 2ª Columna de la 2ª fila</td><td>Casilla bajo 3ª Columna = 3ª Columna de la 2ª fila</td></tr></table>


Ej: podemos crear una tabla para añadirla a la plantilla de entrada!!!!!

Tiempo estimado:	minutos
Nivel:	avanzado medio bajo

OJO con tener la tentación de poner cada etiqueta en una linea!!!!!
Pues nos encontraremos con muchas lineas en blanco antes de mostrar la misma:
<table border="1">
<tr>
<td>Tiempo estimado:</td>
<td>minutos</td>
</tr>
<tr>
<td>Nivel:</td>
<td>avanzado medio bajo</td>
</tr>
</table>

Tiempo estimado:	minutos
Nivel:	avanzado medio bajo

SOLUCIÓN: usar editores HTML para complicarnos un poco menos la vida.
Ej: pspad

aplicar estilos CSS

la clase crazytext en acción.

Esto es un cuadro con borde y relleno

Éste es un color horrible.

dar permisos

En las siguientes imágenes puede verse como convertir a un autor en administrador y como se visualiza en blogger la nueva situación:

NOTA: Si no se aprecian las imágenes, situarse sobre cada una de ellas, dar al botón derecho del ratón y escoger abrir vinculo en una ventana nueva

blog grupal

1. Crear el blog. Por ejemplo: sanadrian
2. Invitar a nuevo autoress. Tan solo necesitamos conocer su mail
3. Dar permisos a los autores con mucho ojo
4. Eliminar a los autores que ya no vayan a seguir participando en el blog cooperativo

eliminar a un autor

 

Existen 2 formas de eliminar a un autor de un blog:

 - el propio autor decide no seguir siéndolo

 - el administrador elimina al autor

permisos

MUCHO OJO!!!!

No pasa nada por invitar a un autor a que escriba
en tu blog, pues se trata de algo inofensivo,
como mucho puede crear post que no sean de tu agrado

Pero si le permites administrar tu blog,
le dejas entrar hasta la cocina
e incluso podría suprimir tu blog
en solo un minuto!!!
o podria eliminar tus permisos administrativos, perdiendo el control de tu blog

---

Express yourself instantly with MSN Messenger! MSN Messenger

mis fotos

imágenes

Google

Flickr

PhotoBucket

ImageShack

TinyPic

Village Photos

pruebas comentarios

En este post se puede probar a ir dejando comentarios segun las distintas opciones de configuración de la pestaña comentarios

prueba

Tiempo estimado: minutos.
Nivel: avanzado medio bajo

Estoy dando un curso en forem san adrian

He comprado

• patatas
• peras

El presidente del Gobierno, José Luis Rodríguez Zapatero, declaró anoche, a
pregunta de la vecina de San Adrián Ana Rosa Jiménez Mazo, que «Navarra ha sido,
es y será lo que quieran los navarros» y que no habla con el dirigente de
Batasuna, Arnaldo Otegi . Zapatero hizo esta declaración en en el programa de
RTVE Tengo una pregunta para usted, en el que también intervino un vecino de
Pamplona, Jesús Cerdán Litago. Durante las dos horas del programa el presidente
respondió a 42 preguntas.

Fuente:
http://www.diariodenavarra.es/actualidad/noticia.asp?not=2007032802343990&dia=20070328&seccion=nacional&seccionB=politica&type=RSS

Promoción

Ideas para aunmentar tus visitas


Configuración -> Publicación -> Enviar Pings = Sí
weblogs




Crear un contador de visitas: monitorizar desde qué enlaces llegan los lectores

technorati

licencias

http://creativecommons.org/license/



















curso informática by
cur1nf is licensed under a
Creative Commons Reconocimiento-No comercial-Compartir bajo la misma licencia 2.5 España License.

Based on a work at
cur1nf.blogspot.com.

personalizar tu blog

Antes de hacer cualquier cambio en la plantilla, hay que hacer una copia de seguridad de la misma!!!!


Plantillas:

Descargarse nuevas plantillas


Añadir código:

Poner música en nuestro blog con Finetune

Añadir artilugios: juegos, contadores, previsión del tiempo, relojes..
Explicación detallada de los pasos a la que habría que añadir: eliminar la publicidad del código html antes de publicar (contenido de la etiqueta noscript)

Letrero luminoso en movimiento


Eliminar elementos:

Quitar la barra de blogger.
Ojo!! si la quitamos no podemos buscar en nuestro blog y solo podremos acceder a 'Personalizar' desde 'Panel' o desde el icono del lapicero si está habilitada la edición rápida pero no desde cualquier post

Eliminar 'Ver mi perfil completo'


Organizar elementos:

Crear categorías

Crear categorías horizontales

Crear secciones

Categorías ordenadas por criterios distintos a la fecha.html


Modificar elementos:

Artículo de blog expandible

Cambiar el tipo de letra por defecto

Cambiar el tamaño de la letra por defecto

Links abiertos en nueva página

Cambiar titulo


nueva versión de blogger

artículo de blog expandible

Ej de blog que mejoraría con esta característica:
http://www.lariberaenfiestas.com/

Pasos:

1. Archivo -> Habilitar páginas de entrada
2. http://nofancyname.blogspot.com/2005/02/making-expandable-blog-posts-in.html

ejemplo de parrafos anidados

EJEMPLO DE PARRAFOS

este es el parrafo externo este es el parrafo externoeste es el parrafo
externoeste es el parrafo externoeste es el parrafo externoeste es el parrafo
externoeste es el parrafo externoeste es el parrafo externoeste es el parrafo
externoeste es el parrafo externoeste es el parrafo externoeste es el parrafo
externoeste es el parrafo externoeste es el parrafo externo

este es el parrafo internoeste es el parrafo internoeste es el parrafo
internoeste es el parrafo internoeste es el parrafo internoeste es el
parrafo
internoeste es el parrafo internoeste es el parrafo
interno