Mostrando entradas con la etiqueta html. Mostrar todas las entradas
Mostrando entradas con la etiqueta html. Mostrar todas las entradas

sábado, 20 de septiembre de 2014

HTML fácil y para todos V: Códigos para los colores

Después de mucho tiempo retomo este tutorial de HTML para finalizarlo y empezar con HTML5.



Post relacionados:

HTML fácil y para todos: Introducción a HTML
HTML fácil y para todos II: HEAD, elementos y BODY
HTML fácil y para todos III: Tamaños, fuentes, colores y párrafos.
HTML fácil y para todos IV: Elementos de los párrafos.

Códigos hexadecimales para los colores.

Estos códigos se pueden utilizar como valor de atributo en los elementos <FONT COLOR> y <BODY BGCOLOR FGCOLOR TEXT LINK VLINK ALINK>. Algunos no funcionarán en ciertos visualizadores, así como si Windows no está configurado con 256 colores al menos.

Estos colores están basada en mezclas cromáticas RGB, os sonara de COREL o Phothoshop, es decir, se mezclan ciertas cantidades de los tres colores básicos (rojo verde y azul), para conseguir el color deseado.

La cantidad de cada color está definida por el código que utilizamos, que tiene seis dígitos en hexadecimal.


La sintaxis para cambiar el fondo de la página (background) a color rojo sería así: <BODY BGCOLOR=#FF0000>

Códigos RGB

Recordad que todos estos códigos su nombre viene en ingles, ya que todo el html y programación se trabaja con este idioma.

White rgb=#FFFFFF
Red rgb=#FF0000
Green rgb=#00FF00
Blue rgb=#0000FF
Magenta rgb=#FF00FF 
Cyan rgb=#00FFFF
Yellow rgb=#FFFF00
Black rgb=#000000
Aquamarine rgb=#70DB93
Baker's Chocolate rgb=#5C3317
Blue Violet rgb=#9F5F9F
Brass rgb=#B5A642
Bright Gold rgb=#D9D919
Brown rgb=#A62A2A
Bronze rgb=#8C7853
Bronze II rgb=#A67D3D
Cadet Blue rgb=#5F9F9F
Cool Copper rgb=#D98719
Copper rgb=#B87333 
Coral rgb=#FF7F00
Corn Flower Blue rgb=#42426F
Dark Brown rgb=#5C4033 
Dark Green rgb=#2F4F2F
Dark Green Copper rgb=#4A766E
Dark Olive Green rgb=#4F4F2F
Dark Orchid rgb=#9932CD
Dark Purple rgb=#871F78
Dark Slate Blue rgb=#6B238E
Dark Slate Grey rgb=#2F4F4F
Dark Tan rgb=#97694F
Dark Turquoise rgb=#7093DB
Dark Wood rgb=#855E42
Dim Grey rgb=#545454
Dusty Rose rgb=#856363
Feldspar rgb=#D19275
Firebrick rgb=#8E2323
Forest Green rgb=#238E23
Gold rgb=#CD7F32 
Goldenrod rgb=#DBDB70
Grey rgb=#C0C0C0
Green Copper rgb=#527F76
Green Yellow rgb=#93DB70
Hunter Green rgb=#215E21
Indian Red rgb=#4E2F2F
Khaki rgb=#9F9F5F
Light Blue rgb=#C0D9D9
Light Grey rgb=#A8A8A8
Light Steel Blue rgb=#8F8FBD
Light Wood rgb=#E9C2A6
Lime Green rgb=#32CD32
Mandarian Orange rgb=#E47833
Maroon rgb=#8E236B
Medium Aquamarine rgb=#32CD99
Medium Blue rgb=#3232CD
Medium Forest Green rgb=#6B8E23
Medium Goldenrod rgb=#EAEAAE
Medium Orchid rgb=#9370DB
Medium Sea Green rgb=#426F42
Medium Slate Blue rgb=#7F00FF
Medium Spring Green rgb=#7FFF00
Medium Turquoise rgb=#70DBDB
Medium Violet Red rgb=#DB7093
Medium Wood rgb=#A68064
Midnight Blue rgb=#2F2F4F
Navy Blue rgb=#23238E
Neon Blue rgb=#4D4DFF
Neon Pink rgb=#FF6EC7
New Midnight Blue rgb=#00009C
New Tan rgb=#EBC79E
Old Gold rgb=#CFB53B
Orange rgb=#FF7F00
Orange Red rgb=#FF2400
Orchid rgb=#DB70DB
Pale Green rgb=#8FBC8F
Pink rgb=#BC8F8F
Plum rgb=#EAADEA
Quartz rgb=#D9D9F3
Rich Blue rgb=#5959AB
Salmon rgb=#6F4242
Scarlet rgb=#8C1717
Sea Green rgb=#238E68
Semi-Sweet Chocolate rgb=#6B4226
Sienna rgb=#8E6B23
Silver rgb=#E6E8FA
Sky Blue rgb=#3299CC
Slate Blue rgb=#007FFF
Spicy Pink rgb=#FF1CAE
Spring Green rgb=#00FF7F
Steel Blue rgb=#236B8E
Summer Sky rgb=#38B0DE
Tan rgb=#DB9370
Thistle rgb=#D8BFD8
Turquoise rgb=#ADEAEA
Very Dark Brown rgb=#5C4033
Very Light Grey rgb=#CDCDCD
Violet rgb=#4F2F4F
Violet Red rgb=#CC3299
Wheat rgb=#D8D8BF
Yellow Green rgb=#99CC32

Redes sociales donde puedes seguirme, comentarme o saludarme:


miércoles, 9 de julio de 2014

Ya me metí en un buclé ¿usar o no usar dreamweaver?

Hoy en este post quiero trasladaros mis dudas. Siempre me ha gustado personalizar mi plantilla y pude hacerlo aprendiendo un poco de HTML, es cierto que en lo que más me apoye fue en photoshop para crear botones y crear fondos, y el html lo toque para cosas muy concretas. Hace tiempo que quiero dar un paso más y no sé si empezar con Dreamweaver. Este programa ha sido creado por Adobe y sirve básicamente para crear plantillas y diseño de páginas web. 

Mis dudas vienen de que buscando opiniones hay mucha gente que me dice que es complicado, que hay otros mejores y más sencillos para empezar, etc. No sé que hacer ¿qué me aconsejáis?

Mi idea es comenzar con un programa para hacer plantillas y enseñaros a vosotros mientras yo aprendo, ya que cuando empecé el tutorial de HTML dije necesito algo más y pensé en este programa.

Así que espero vuestras opiniones y consejos.

sábado, 15 de febrero de 2014

HTML fácil y para todos IV: Elementos de los párrafos.

En este post continuare con los elementos que acompañan a los párrafos. Visualmente habrá cosas que os mostrare con una imagen, pero al final de estos post tendréis un PDF (gratis) descargable que os dejare para que lo veáis todo muy bien.




Como dije al principio de estos post o curso, estoy resumiendo a partir de todos los apuntes que tengo de HTML porque quiero que sepáis lo más básico, ya que cuando finalice empezare con HTML5. Así que continuo con los elementos que acompañan a los párrafos.

El elemento <P> admite cuatro atributos de alineación:


  • ALIGN=LEFT (por defecto, osea derecha)
  • ALIGN=RIGHT (izquierda)
  • ALIGN=CENTER (centrado)
  • ALIGN=JUSTIFY (justificado)

Se escribirán así:

<P ALIGN=LEFT>
Texto 1 Texto 1 Texto 1 Texto 1 Texto 1 Texto 1 Texto 1 Texto 1
Texto 1 Texto 1 Texto 1 Texto 1 Texto 1 Texto 1 Texto 1 Texto 1 </P>

<P ALIGN=RIGHT>

Texto 2 Texto 2 Texto 2 Texto 2 Texto 2 Texto 2 Texto 2 Texto 2
Texto 2 Texto 2 Texto 2 Texto 2 Texto 2 Texto 2 Texto 2 Texto 2 </P>

<P ALIGN=CENTER>

Texto 3 Texto 3 Texto 3 Texto 3 Texto 3 Texto 3 Texto 3 Texto 3
Texto 3 Texto 3 Texto 3 Texto 3 Texto 3 Texto 3 Texto 3 Texto 3 </P>

<P ALIGN=JUSTIFY>
Texto 4 Texto 4 Texto 4 Texto 4 Texto 4  Texto 4 Texto 4 Texto 4
Texto 4 Texto 4 Texto 4 Texto 4 Texto 4  Texto 4 Texto 4 Texto 4 </P>

Y este sería el resultado:



Haced clic sobre la imagen para verla más grande.

Otro elemento que se comporta de forma parecida a <BR> es <DIV>. Recordemos que <BR> se utilizaba para que no se creara una linea de sepación entre texto y texto.
Cuidado recordad que <BR> sólo elimina espacios estando así:
<P>Texto 1 Texto 1 Texto 1 Texto 1 Texto 1 Texto 1 Texto 1 Texto 1 Texto 1 Texto 1 <BR> Texto 2 Texto 2 Texto 2 Texto 2 Texto 2 Texto 2 Texto 2 Texto 2 </P>

<DIV> admite los mismos atributos que <P>:


  • ALIGN=LEFT 
  • ALIGN=RIGHT 
  • ALIGN=CENTER
Se escribe así:

<DIV ALIGN=LEFT>
texto1 texto1 texto1 texto1 texto1 texto1 texto1 texto1 texto1
texto1 texto1 texto1 texto1 texto1 texto1 texto1 texto1 texto1
texto1 texto1 texto1 texto1 texto1 texto1 texto1 texto1 texto1
texto1 texto1 texto1 texto1 texto1 texto1 texto1 texto1 texto1
</DIV>

<DIV ALIGN=RIGHT>
texto2 texto2 texto2 texto2 texto2 texto2 texto2 texto2 texto2
texto2 texto2 texto2 texto2 texto2 texto2 texto2 texto2 texto2
texto2 texto2 texto2 texto2 texto2 texto2 texto2 texto2 texto2
texto2 texto2 texto2 texto2 texto2 texto2 texto2 texto2 texto2
texto2 texto2 texto2 texto2 texto2 texto2 texto2 texto2 texto2
< /DIV>

<DIV ALIGN=CENTER>
texto3 texto3 texto3 texto3 texto3 texto3 texto3 texto3 texto3
texto3 texto3 texto3 texto3 texto3 texto3 texto3 texto3 texto3
texto3 texto3 texto3 texto3 texto3 texto3 texto3 texto3 texto3
texto3 texto3 texto3 texto3 texto3 texto3 texto3 texto3 texto3
</DIV>

Fíjate en que aquí sí se utiliza el cierre </DIV>. Este sería el resultado:




Haced clic sobre la imagen para verla más grande.

<DIV> se utiliza para definir bloques especiales definidos con instrucciones de estilo como son bordes, tamaño, situación, alineación, color, etc...



Como veis en esta imagen en la parte del HTML del post, aparece este elemento, donde indica como esta situada y alineada una imagen. También he marcado <br/> que funciona como separador o para dar espacios y que no debemos confundir con <BR> como elemento que rompe un espacio. Tened mucho ojo con esto.

Otro elemento muy parecido a <DIV>, aunque se diferencian en muchas cosas es <SPAN>, que se utiliza para las hojas de estilo y del cual hablare en otro post.

<BLOCKQUOTE> que sirve para presentar párrafos adentrados (como si estuviesen tabulados).

Se escribirá así:

<BLOCKQUOTE>
texto texto texto texto texto texto texto texto texto texto
texto texto texto texto texto texto texto texto texto texto
<BLOCKQUOTE>
texto texto texto texto texto texto texto texto texto texto
texto texto texto texto texto texto texto texto texto texto
</BLOCKQUOTE>
</BLOCKQUOTE>


<HR> (por Horizontal Rule), que es un separador de textos, y seria como una recta horizontal.

Admite: WIDTH y SIZE. El primero define la longitud de la línea y el segundo su anchura. No es obligado usar los dos a la vez.

Por ejemplo se utilizaría así: <HR WIDTH=400 SIZE=5> (La longitud no esta definida en cm sino en  pixeles)

Además se puede indicar su posición respecto a los márgenes de la ventana mediante: 

  • ALIGN=CENTER (por defecto) 
  • ALIGN=LEFT
  • ALIGN=RIGHT.

Por ejemplo: <HR WIDTH=80% SIZE=5 ALIGN=LEFT>





jueves, 13 de febrero de 2014

HTML fácil y para todos III: Tamaños, fuentes, colores y párrafos.

Tamaños y tipos de fuente en HTML

Para definir distintos tamaños de letra, en HTML se utiliza el elemento  <Hx> </Hx> donde x es un número que puede variar entre 1 y 6, siendo 1 el tamaño mayor.

Se escribirán así:


<H1> Texto de prueba (H1)</H1>
<H2> Texto de prueba (H2)</H2>
<H3> Texto de prueba (H3)</H3>
<H4> Texto de prueba (H4)</H4>
<H5> Texto de prueba (H5)</H5>

y este sería el resultado:


Texto de prueba (H1)

Texto de prueba (H2)

Texto de prueba (H3)

Texto de prueba (H4)

Texto de prueba (H5)

No hay que olvidar poner el cierre </Hx> a cada elemento utilizado.

Este tipo de elemento se suele utilizar para escribir encabezamientos, ya que después del cierre automáticamente el visualizador inserta un salto de párrafo.

Otra forma de cambiar los tamaños de letra es utilizar el elemento <FONT > con el atributo VALOR, que es un número entre 1 y 7. 
El valor por defecto del texto es 3. 

La diferencia entre <Hx> </Hx> y  <FONT > es que no se produce un salto de párrafo después de cada cambio, por lo que pueden hacerse cosas como esta:

<FONT SIZE=3>A</font><FONT SIZE=4>A</font><FONT SIZE=5>A</font>
<FONT SIZE=6>A</font><FONT SIZE=7>A</font><FONT SIZE=6>A</font>
<FONT SIZE=5>A</font><FONT SIZE=4>A</font><FONT SIZE=3>A</FONT>

Dará como resultado algo así más o menos para que os hagais una idea:


AAAAAAAAA

Otro atributo del elemento <FONT> que permite elegir tipos de letra entre los varios de que dispone por defecto Windows. Se trata del atributo FACE. Este atributo permite cambiar el tipo de letra que el diseñador de la página quiere que vea el cliente, sin importar el que por defecto tenga establecido el visualizador.

Si escribes

<FONT FACE="arial">Texto de prueba con tipo ARIAL</FONT>

Se verá: Texto de prueba con tipo ARIAL
<FONT FACE="courier">Texto de prueba con tipo COURIER</FONT>
Se verá: Texto de prueba con tipo COURIER
Este atributo es compatible con todos los demás, como color y tamaño. 
Por ejemplo, si escribes
<FONT FACE="arial" SIZE=5 COLOR="red">Texto de prueba con tipo ARIAL</FONT>

Se verá: Texto de prueba  con tipo ARIAL

Nota: Se pueden hacer todas la combinaciones que quieras, pero hay que tener en cuenta que si en el servidor, maquina cliente no está instalada una determinada fuente, ésta no se verá yen su lugar aparecerá la fuente por defecto del visualizador. Es decir que si nosotros queremos poner en Blogger una fuente "rara" o poco conocida, y ellos no trabajan con ella, nos aparecerá la que tengan predefinida. No es interesante por tanto, definir tipos raros, que probablemente, no llegarán a verse nunca.

Pequeño resumen de los elementos que hemos dado:
  • <Hx> </Hx> donde X sera un número siendo 1 el de mayor tamaño. Se usa para encabezamientos e inserta un salto de párrafo.
  • <FONT > que puede ir seguido de los elementos size o face. No inserta saltos de párrafo.

a) <FONT SIZE=x></FONT> lo usaremos para dar tamaño a nuestro texto (sustituir la X por un valor del 1-7).
b) <FONT FACE="nombre de fuente"></FONT>

Nota: Habreis observado que más arriba pongo font en minúscula, se puede de las dos formas aunque en blogger me lo toma en minúscula.



Color en HTML

En el apartado anterior ya di una pista de como se introduce el color, pero ahora lo volveremos a tratar.

Se puede controlar el color del texto utilizando el elemento <FONT> con el atributo COLOR="xxx", donde "xxx" es el nombre en inglés del color que se desea. Así que si hemos olvidado los colores en Ingles deberemos repasarlos.

Hay que tener presente que algunos no se verán o se verán mal si la máquina o el servidor no soporta.

Si escribes:

<FONT COLOR="red">Texto ROJO </FONT>

Veremos esto: Texto ROJO

<FONT COLOR="green">Texto VERDE </FONT>

Veremos esto: Texto VERDE

Como veis es muy sencillo y no nos va a costar nada aprender como se hace.

Párrafos en HTML

Para definir los párrafos se utiliza el elemento <P> </P> (por Paragraph). Aunque a menudo no se utiliza el cierre </P>, ya que el texto continuará normalmente hasta que encuentre otro párrafo <P>, pero es conveniente acostumbrarse a ponerlo siempre.

<P> Texto 1 Texto 1 Texto 1 Texto 1 Texto 1 Texto 1 Texto 1 Texto 1 
Texto 1 Texto 1 </P> 
<P> Texto 2 Texto 2 Texto 2 Texto 2 Texto 2 Texto 2 Texto 2 Texto 2 </P> 

Y visualmente quedaría más o menos así:

Texto 1 Texto 1 Texto 1 Texto 1 Texto 1 Texto 1 Texto 1 Texto 1 Texto 1 Texto 1 

Texto 2 Texto 2 Texto 2 Texto 2 Texto 2 Texto 2 Texto 2 Texto 2 

Osea lo que hace este elemento es crear un bloque de separación. Si no se quiere dejar esa línea vacía entre los dos párrafos puede utilizarse el elemento <BR> (por BReak). Es decir, que el elemento <BR> es un separador, no un indicador de bloque.

Se escribirá así:

<P>Texto 1 Texto 1 Texto 1 Texto 1 Texto 1 Texto 1 Texto 1 Texto 1 
Texto 1 Texto 1 <BR> 
Texto 2 Texto 2 Texto 2 Texto 2 Texto 2 Texto 2 Texto 2 Texto 2 </P>

y este sería el resultado:

Texto 1 Texto 1 Texto 1 Texto 1 Texto 1 Texto 1 Texto 1 Texto 1 Texto 1 Texto 1 
Texto 2 Texto 2 Texto 2 Texto 2 Texto 2 Texto 2 Texto 2 Texto 2


Y para que no se haga pesado lo vamos a dejar aquí. En el próximo post hablare de los tipos de párrafos y algunas "cositas" más que son interesantes del mundo HTML.




lunes, 10 de febrero de 2014

HTML fácil y para todos II: HEAD, elementos y BODY

En este post hablare de HEAD y sus elementos, que es un apartado relativamente corto y BODY. No incluiré los elementos más importantes de BODY, que en principio si quería pero se me quedo en tocho post y borre y lo puse para el siguiente, para que no se os haga muy largo y los enseñare en el post HTML fácil y para todos III: Tamaños, tipos de letras, texto de colores, párrafos y saltos de linea.

HEAD 

  • Es la primera de las dos partes en que se estructura un documento HTML.
  • En ella reside información acerca del documento, y generalmente no se ve cuando se navega por él. 

En la cabeza (head) se pone el elemento <TITLE> que es una breve descripción que identifica la página. Es decir, lo que el navegador guarda en el "Bookmarks" (libro de marcas, marcadores o libro de direcciones).

También guarda el caché, que servirá para mostrar la página, cuando sea buscada otra vez, sin necesidad de conectarse de nuevo al servidor de origen.

No hay que confundir el elemento <TITLE> con el nombre del fichero.

También puede utilizarse otro elemento: META

Por ejemplo, si se escribe:

<HEAD>
<TITLE>Head de un documento </TITLE>
<META HTTP-EQUIV="Refresh" CONTENT="10">
</HEAD>

Esto hace que el visualizador vuelva a cargar la página activa al cabo de 10 segundos.
También puede hacerse a un servidor. Así:

<HEAD>
<TITLE>Head de un documento </TITLE>
<META HTTP-EQUIV="Refresh" CONTENT="10; URL=http://miservidor/mipagina.htm">
</HEAD>

Utiliza esto con precaución. Si sabes que el contenido de la página no va a cambiar, es inútil hacer esto, y si lo haces contra un servidor, puedes sobrecargarlo. Este elemento, sólo tendrá utilidad en casos muy especiales.

Otra opción es impedir directamente que el navegador guarde en caché la página. Esto es especialmente útil cuando se trabaja con formularios que consultan datos dinámicos:

<HEAD>
<TITLE>Head de un documento </TITLE>
<META HTTP-EQUIV="Expires" CONTENT="no-cache">
</HEAD>

Si tienes interés en que tus páginas aparezcan en los grandes buscadores de Internet, y puedan ser encontradas con facilidad, puedes poner las palabras clave que contiene la página separadas por comas. Por ejemplo:

<HEAD>
<TITLE>Head de un documento </TITLE>
<META NAME="keywords" CONTENT="HTML, internet  ">
</HEAD>

Este otro sirve para que los buscadores puedan ofrecer un breve resumen de los contenidos de tu página:

<HEAD>
<TITLE>Head de un documento </TITLE>
<META NAME="description" CONTENT="Manual para escribir HTML.">
</HEAD>

El siguiente es importante con los nuevos navegadores, ya que le indica la tabla de caracteres que se ha empleado al escribir la página. De no usarlo, puede ocurrir que el navegador no muestre correctamente los caracteres especiales no ascii, tales como acentos, letras de alfabetos no occidentales, etc., que se hayan quedado sin codificar de la forma típica en html.

<HEAD>
<TITLE>Head de un documento </TITLE>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1">
</HEAD>

Los charset más habituales suelen ser: 

<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1">
<meta http-equiv="Content-Type" content="text/html; charset=utf-8 / html5">
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-15">
<meta http-equiv="Content-Type" content="text/html; charset=windows-1252">

Puedes poner todos los elementos <META> que creas necesarios, pero sin repetirlos.

Nota: Como veis lo que llamamos ahora SEO, no es algo tan nuevo hace muchos años que se tiene en cuenta en el lenguaje HTML.

Para los que no sepáis que es el "caché", viene a ser la copia que se hace el navegador de las páginas que visitamos. Así cuando vuelves a solicitar la misma página, en lugar de pedirla de nuevo al servidor, te mostrará la que tiene guardada en el disco. A esta área del disco donde el navegador va poniendo las páginas visitadas, se le denomina caché. 

El tamaño de la caché lo puedes modificar desde las opciones de configuración del navegador, e incluso puedes darle tamaño cero, con lo que siempre que veas una página, ésta habrá sido solicitada al servidor independientemente de lo que digan las instrucciones META.

Hay otros elementos que pueden aparecer en HEAD, como ISINDEX, NEXTID, LINK o BASE, pero son de uso muy especializado y poco corriente, algunos ya en desuso, y ninguno obligatorio (<TITLE> sí lo es). 




BODY

  • Es la segunda y última de las dos partes en que se estructura un documento HTML. 
  • Por supuesto es obligatoria, ya que es aquí donde reside el verdadero contenido de la página, y por tanto, al contrario que HEAD sí se ve cuando navegamos por ella.


Se escibirá asi:

<BODY>
texto texto texto texto texto texto texto texto texto texto texto texto
texto texto texto texto texto texto texto texto texto texto texto texto
</BODY>

El elemento BODY tiene parámetros que permiten modificar los márgenes por defecto. Lo malo es que cada navegador los interpreta de una manera. 

Internet Explorer utiliza uno para cada cual:


  leftmargin="pixels", para el margen izquierdo 
  topmargin="pixels", para el margen superior 
  rightmargin="pixels", para el margen derecho 
  bottommargin="pixels", para el margen inferior

Pixels es el número de pixels que se quiere mover cada margen hacia el interior de la página. Estos parámetros también son accesibles desde instrucciones de estilo.

El color, es otro elemento de BODY, que tomarán los links que pongamos en la página. Por ejemplo, para hacer que los links sean amarillos antes de ser visitados, azul-verde cuando son activados, y verdes después de haber sido utilizados, se escribe:

<BODY LINK="#FFFF00" VLINK="#22AA22" ALINK="#0077FF">

Nota: Aquí muestro lo que considero más importante y básico, hay manuales más amplios y en el PDF donde recoja todos estos post incluiré extras pero sin convertirlo en un manual de 100 páginas, ya que me parece excesivo para los que nos iniciamos en HTML.


Post relacionados:




AdnFriki

http://myway.i-barakaldo.com/

http://gerardfoz.blogspot.com.es/



Si tenéis dudas y queréis preguntarme algo
podéis escribirme comentario en el post.

También me podéis seguirme por mis redes sociales
que aparecen aquí a la derecha, 
en ellas también acepto preguntas y comentarios.

Si os gusta el blog 
hacer clic en Friend Connect
o
seguirme en +g



viernes, 7 de febrero de 2014

Tamaños de Imágenes

Aprovechando la duda de una nueva compañera bloguera, que os invito a seguir, su blog es muy original y cuenta historias mediante unos personajes SIM, he escrito este post.

A veces nos ha pasado que subimos una imagen y se nos sale de los margenes de nuestro blog. Blogger cuando subimos una imagen, si picamos sobre ella nos da estas opciones de tamaño: pequeño, grande, extra grande o tamaño original. A veces estas opciones se ajustarán a nuestros gustos y otras no, y para ello debemos hacer lo siguiente.



Entraremos a la pestaña que esta al lado de redactar, es decir a la pestaña de HTML y buscaremos la linea subraya de la imagen que voy a poner a continuación.




De todas estas lineas sólo nos interesara la altura (height) y la anchura (width). Por ejemplo mi compañera sólo quería cambiar el ancho que se salía del margen, así que sólo deberá cambiar lo que se encuentra en el recuadro, es decir, los números. Por ejemplo en mi plantilla no puedo poner imágenes superiores a 600 de ancho, por eso siempre las cambio a 500 o 500 y algo para que no se salgan de los margenes.








Si tenéis dudas y queréis preguntarme algo
podéis escribirme comentario en el post.

También me podéis seguirme por mis redes sociales
que aparecen aquí a la derecha, 
en ellas también acepto preguntas y comentarios.

Si os gusta el blog 
hacer clic en Friend Connect
o
seguirme en +g

HTML fácil y para todos: Introducción a HTML

En estos días mis post irán dirigidos a HTML. Sé que a muchos les gustara este tema ya que lo podrán usar para mejorar sus plantillas de Blogger o página web. 

Para confeccionar estos post voy a usar los apuntes que tengo de la academia de informática donde trabaje y manuales que descargue para aprender. Así que espero que les sea útil y que puedan sino es aprender conocer un poco el mundo HTML.

Al finalizar esta serie de post dejare un PDF con todo lo que he dado para que lo podáis tener a mano y usarlo. Sera un manual gratuito ya que mis post están dirigidos para que todos podamos aprender cosas nuevas y poderlas utilizar.

Muchos cuando empezamos nuestro blog y vemos HTML decimos qué sera eso, sera un elemento para los programadores...etc. También tenemos miedo y optamos por pasar de ello, pero con el tiempo nuestras necesidades como blogueros nos pide mejorar nuestro blog, hacerlo más visible, más practico, que conecte con nuestras redes sociales en definitiva le queremos dar nuestro toque personal. Para ello tenemos que empezar por lo básico que es el lenguaje que usan las páginas, y eso es el HTML explicado de una manera sencilla.



En algunos manuales se suele empezar con una introducción teórica haciendo referencia a la historia, yo me saltare esa parte y mi introducción comenzara hablando de lo practico, como es la estructura.

Las páginas HTML están estructuradas en dos partes: 
  • HEAD (cabecera) 
  • BODY (cuerpo).

Ejemplo de página:

Si escribes:

<!Tipo de documento>
<HTML>
<HEAD>
<TITLE> Documento de prueba </TITLE>
</HEAD>

<!-- Esto es un comentario-->

El tipo de documento no es obligatorio, es decir que la página se verá igual tanto si lo escribes como si no. Sólo sirve como identificación del tipo de contenido del fichero.

Cuando un visualizador recibe un fichero, antes de mostrarlo necesita saber el tipo de contenido que éste tiene, a fin de procesarlo adecuadamente. No es lo mismo recibir un documento de texto que una fotografía en formato GIF, o un vídeo en formato MPG, o si lo que estamos intentando es transferir un fichero. 

Si el fichero procede de un servidor http remoto, (es decir un servidor web; http es el nombre del protocolo que utilizará el servicio invocado), éste se encargará de decirle al visualizador cuanto necesite saber, pero si lo que hay que procesar es un fichero local, la única forma de saberlo es por la extensión del fichero.

La extensión de un fichero son las tres o cuatro letras (depende del sistema operativo con el que se trabaje) que hay después del nombre del fichero y que están separadas del mismo por un punto.

Las extensiones de 4 o más letras son típicas de sistemas operativos como UNIX o LINUX y las de 3 o menos de Windows
Por ejemplo, la extensión .html funciona en Windows igual que la .htm 


Sobre los tipos de extensiones hablaremos en otro momento, ya que es un tema extenso y aunque es importante en este post sólo quiero hacer una introducción.

Los documentos HTML los puedes escribir con lo que quieras...menos directamente en la plantilla de blogger, ya que si te confundes puedes perder la antigua configuración que tenías. Por eso mi consejo es primero escribirlo en un word, después ir a blogger, hacer una copia de seguridad de nuestro blog y una vez hecho esto ya tocar el HTML. 

Recordar que siempre que los realices en word, no debes olvidar guardarlos en modo Solo Texto. Es decir, que si utilizas, por ejemplo, Word de Windows o de MAC, por defecto estos programas salvan en formato Word. Y aunque luego los renombres como documentos .htm o .html, el formato interno sigue siendo Word.

Tampoco vale dejarlos con la extensión .txt que les dejan la mayoría de editores al salvarlos en modo Solo Texto. No serían interpretados correctamente. Por lo tanto si tienen extensión .txt (y por supuesto son .txt), entonces puedes renombrarlos a .htm, o bien en el momento de guardarlos en formato Solo Texto no dejar la extensión por defecto .txt y darle ya directamente la extensión .htm.

Algunos procesadores de texto ya incluyen entre sus tipos el .htm. Si es así, lo que hacen es eliminar la codificación propia, y convertirla a elementos de HTML. Por ejemplo, si tienes un texto en itálica, automáticamente es convertido al elemento <I>, etc.. El problema de los editores avanzados de texto y de la mayoría de programas asistentes para escribir HTML es que generan un código bastante "sucio", difícil de corregir o modificar después. No es que no funcione, pero como el programa no sabe cual es la finalidad del texto escrito, por defecto le pone todo lo que sabe por si acaso, aplicando el dicho de "mejor que sobre..."

Mañana hablaré de la cabecera del documento; tamaños y tipos de letras, texto de colores, párrafos, saltos de linea..etc.







martes, 17 de septiembre de 2013

Poner un enlace a una imágen.

Tenemos que obtener la url de la imagen que funcionará como link, para ello la subimos a un alojamiento de imágenes o al propio Blogger.

Una vez obtenida la url de nuestra imagen, la colocamos en este sencillo código, donde dice URL_DE_IMAGEN y en el mismo código, colocamos la página que queremos linkar, es decir, la dirección web que se abrirá al pinchar sobre la imagen, en URL_DE_WEB:


<a href="URL_DE_WEB"><img src="URL_DE_IMAGEN"></a>

Para que el enlace al pinchar en la imagen se abra en página nueva, añadiremos el target="_blank"al final del enlace:


<a href="URL_DE_WEB"target="_blank"><img src="URL_DE_IMAGEN"></a>

Nota: Estos códigos sólo funcionan si los ponemos en la parte de HTML no en redactar 




Esta es la imagen que he subido cuya url se obtiene tocando botón derecho en copiar url de imagen 

https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEj1cVeejSjSrtby-LCdaZjXee0WwbW8c4xog0bvTx4i30UbpjlVnvkVoyV7hAwbLpTXC483I2rp_F94CyrKbUIvpJ8Shmo_3pnHDmccuZUi_br__e-VPKKmS_d6DfjiosyNu5gZm8BlP8tW/s1600/tuitter.JPG


A continuación lo sustituimos en la formula anterior y también añadimos la dirección donde queremos que se dirija.

<a href="https://twitter.com/stravaganza"target="_blank"><img src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEj1cVeejSjSrtby-LCdaZjXee0WwbW8c4xog0bvTx4i30UbpjlVnvkVoyV7hAwbLpTXC483I2rp_F94CyrKbUIvpJ8Shmo_3pnHDmccuZUi_br__e-VPKKmS_d6DfjiosyNu5gZm8BlP8tW/s1600/tuitter.JPG"></a>

Si no quereis que se habrá en otra pestaña sólo teneis que quitar el "target="_blank"