Baúl de Recursos: HTML

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

lunes, 17 de agosto de 2015

HTML: Flechas

En HTML se pueden incluir flechas, como se muestra en la siguiente tabla:

←	←
→	→
↑	↑
↓	↓
↔	↔
⇐	⇐
⇒	⇒
⇑	&uArr;
⇓	&dArr;
⇔	⇔
↵	&crarr;

viernes, 10 de julio de 2015

HTML: Alfabeto Griego

En HTML se puede incluir cualquier letra del alfabeto, como se muestra en la siguiente tabla:

α	α
β	β
γ	γ
δ	δ
ε	ε
ζ	ζ
η	η
θ	θ
ι	ι
κ	κ
λ	λ
μ	μ
ν	ν
ξ	ξ
ο	ο
π	π
ρ	ρ
σ	σ
τ	τ
υ	υ
φ	φ
χ	χ
ψ	ψ
ω	ω

Α	Α
Β	Β
Γ	Γ
Δ	Δ
Ε	Ε
Ζ	Ζ
Η	Η
Θ	Θ
Ι	Ι
Κ	Κ
Λ	Λ
Μ	Μ
Ν	Ν
Ξ	Ξ
Ο	&Omicron
Π	Π
Ρ	Ρ
Σ	Σ
Τ	Τ
Υ	Υ
Φ	Φ
Χ	Χ
Ψ	Ψ
Ω	Ω

alfa

beta

gamma

delta

épsilon

dseta

eta

theta

iota

kappa

lambda

ómicron

rho

sigma

tau

úpsilon

phi

chi

psi

omega

viernes, 17 de octubre de 2014

CSS: Cómo incorporar CSS en nuestras páginas

Para incorporar CSS a nuestras páginas HTML tenemos tres opciones, todas igualmente efectivas.

1. En la misma etiqueta HTML

En este caso se hace uso del atributo style que se puede agregar a cualquier etiqueta HTML. Permite colocar diferentes estilos a etiquetas iguales.

 <html>
   <head>
     <title>Ejemplos CSS</title>
   </head>
   <body>
     <p style="font-color: #ff0000">Texto rojo</p>

     <p style="font-color: gold">Texto dorado</p> 
   </body>
 </html>

2. Dentro de la página HTML

Se incorporan diversos estilos dentro de las etiquetas style, en forma general.

 <html>
   <head>
     <title>Ejemplos CSS</title>
 
     <style type="text/css">
       p {font-color: #00ff00;}
     </style>
 
   </head>
   <body>
     <p>Texto de color</p>
   </body>
 </html>

3. Uso de un archivo de estilos externo.

Los estilo son definidos en un archivo con extensión .css que es linqueado desde nuestra página.

 p {
    font-color: #00ff00;
 }

 <html>
   <head>
     <title>Esjemplos CSS</title>
     <link rel="stylesheet" type="text/css" href="estilos.css" />
   </head>
   <body>
     <p>Texto de color</p>
   </body>
 </html>

Cualquiera sea la opción que utilices, tendrás en tus manos la manera de definir los colores y diseñopar hacer única tu página.

jueves, 9 de octubre de 2014

En varios blogs he visto barras de progreso cuando se desea mostrar gráficamente el avance de algo, ya sea un reto o una meta a cumplir.

Por eso me puse a buscar en internet cómo crear una y me llevé una gran sorpresa al ver lo sencillo que era.

Código HTML

El siguiente es un ejemplo con el código correspondiente, para aquellos que tienen algún conocimiento de HTML. Destaqué en rojo lo mínimo que querrán modificar para personalizar su barra:

34 / 100 páginas. 34% cumplido!

<div style="background: #FFFFFF; border: 1px solid #000000; height: 15px; width: 200px;">
<div style="background: #006699; font-size: 8px; height: 15px; line-height: 8px; width: 34%;">
<br /></div>
</div>
34 / 100 páginas. 34% cumplido!

Generador del código

Para aquellos que no desean meterse con el código, existe una página que, ingresando unos pocos datos, generará el código final para que podamos copiarlo y pegarlo en nuestro blog. He acá los pasos a seguir:

1. Ingresar a esta página.

2. Buscar el ejemplo de la barra de progreso, un poco más abajo.

3. En Create Your Own! ingresar nuestros datos:

    a. En Current Word Count ingresar el valor que llevamos

    b. En Total Word Goal ingresar el valor total al que queremos llegar

    c. En Progress Bar Color ingresar el color de la barra de progreso. Si no sabemos de colores en hexadecimal, simplemente hacemos click en Pick Color for your Word Meter y seleccionamos el color en la ventanita que se abrirá.

4. Presionar Calculate

5. Más abajo se mostrará la barra de progreso que hemos creado y, en un recuadro, el código que deberemos copiar y pegar en nuestro blog.
Si estás en Blogspot, nos vamos a Diseño, agregamos por un gadget de tipo HTML/javaScript y en él copiamos el código.

Y listo!!!

sábado, 8 de septiembre de 2012

CSS: Listas (<li>, <ol> y <ul>)

Es muy fácil cambiar el aspecto de nuestras listas numeradas y con viñetas haciendo uso de nuestro buen amigo CSS. A continuación doy varios ejemplos de esto.

Sin estilos

Las siguientes son dos listas que no tienen definido ningún tipo de estilo, tal como las muestran los navegadores por defecto. Las primeras son numeradas, usando <ol>, y las segundas son listas con viñetas, usando <ul>:

<ol>
  <li>Perro</li>
  <li>Gato</li>
  <li>Pato</li>
</ol>

Perro
Gato
Pato

<ul>
  <li>Rojo</li>
  <li>Verde</li>
  <li>Lila</li>
</ul>

Rojo
Verde
Lila

Tipo de Viñeta

Para cambiar el tipo de viñeta a mostrar (por defecto el círculo negro y los números decimales) se usa la propiedad list-style-type.
Sus valores posibles pueden ser de tres tipos: numéricos y alfabéticos (ambos para <ol>) ó gráficos (para <ul>):

valores numéricos	decimal \| decimal-leading-zero \| lower-roman \| upper-roman \| armenian \| georgian
valores alfabéticos	lower-latin \| upper-latin \| lower-alpha \| lower-greek
valores gráficos	circle \| square \| disc

Si no se desea usar ninguna viñeta, se debe emplear el valor none.
Los siguientes son ejemplos usando cada uno de ellos.

`<ol style="list-style-type: decimal;"> <li>Perro</li> <li>Gato</li> <li>Pato</li> </ol>`	Perro Gato Pato
`<ol style="list-style-type: decimal-leading-zero;"> <li>Perro</li> <li>Gato</li> <li>Pato</li> </ol>`	Perro Gato Pato
`<ol style="list-style-type: lower-roman;"> <li>Perro</li> <li>Gato</li> <li>Pato</li> </ol>`	Perro Gato Pato
`<ol style="list-style-type: upper-roman;"> <li>Perro</li> <li>Gato</li> <li>Pato</li> </ol>`	Perro Gato Pato
`<ol style="list-style-type: armenian;"> <li>Perro</li> <li>Gato</li> <li>Pato</li> </ol>`	Perro Gato Pato
`<ol style="list-style-type: georgian;"> <li>Perro</li> <li>Gato</li> <li>Pato</li> </ol>`	Perro Gato Pato
`<ol style="list-style-type: lower-latin;"> <li>Perro</li> <li>Gato</li> <li>Pato</li> </ol>`	Perro Gato Pato
`<ol style="list-style-type: upper-latin;"> <li>Perro</li> <li>Gato</li> <li>Pato</li> </ol>`	Perro Gato Pato
`<ol style="list-style-type: lower-alpha;"> <li>Perro</li> <li>Gato</li> <li>Pato</li> </ol>`	Perro Gato Pato
`<ol style="list-style-type: lower-greek;"> <li>Perro</li> <li>Gato</li> <li>Pato</li> </ol>`	Perro Gato Pato
`<ul style="list-style-type: disc;"> <li>Rojo</li> <li>Verde</li> <li>Lila</li> </ul>`	Rojo Verde Lila
`<ul style="list-style-type: square;"> <li>Rojo</li> <li>Verde</li> <li>Lila</li> </ul>`	Rojo Verde Lila
`<ul style="list-style-type: circle;"> <li>Rojo</li> <li>Verde</li> <li>Lila</li> </ul>`	Rojo Verde Lila

Imágen de la Viñeta

Si las opciones anteriores no son suficientes, también se puede utilizar una imágen propia para usarla como viñeta.
Para ello se usa la propiedad list-style-image que usa el valor url.

<ul style="list-style-image:

   url('http://3.bp.blogspot.com/s1600/rojo.gif');">
<li>Rojo</li>
<li>Lila</li>
</ul>

Rojo
Lila

Valor inicial

Para el caso de las listas numeradas, podemos definir el valor incial. Es decir, no necesariamente tienen que partir con 1 o A.
Para ello usamos simplemente value en la etiqueta <li>, al cual le asignamos el valor de inicio.

<ol>
  <li value="5">Perro</li>
  <li>Gato</li>
  <li value="15">Pato</li>
  <li>Rana</li> 
</ol>

Perro
Gato
Pato
Rana

sábado, 1 de septiembre de 2012

CSS: Hojas de Estilo en Cascada

Para los que nos gusta que nuestras páginas web tengan un toque propio, en el que somos nostros los que definimos cada detalle de su aspecto, CSS se vuelve indispensable. Sobre todo si nos gusta ahorrar tiempo y no repetir nada que no sea necesario.

Muchos ya sabrán qué es y para qué sirve CSS pues ha estado entre nostros desde mediado de los años 90. Por eso no entraré en detalle, para ello hay bastante material en internet.

Simplemente diré que su nombre proviene de Cascading Style Sheets, que traducido sería Hojas de Estilo en Cascada.

El estilo que deseamos aplicar a nuestros documentos HTML/XHTML puede ser incluído dentro de éste o adjuntarse como un archivo separado. En el primer caso, podemos definir estilos generales al comienzo del documento, o particulares, dentro de la misma etiqueta HTML/XHTML. Cualquiera sea el caso, lo que hacemos es definir para las etiquetas HTML/XHTML ciertos parámetros que determinarán, por ejemplo, color, tamaño, ancho, alineación, etc.

También hay que tener en cuenta que existen algunas diferencias al usar CSS con HTML o con XHTML, aunque son mínimas.

Donde sí podemos encontrar diferencias significaticas es al visualizar nuestras páginas con diferentes navegadores (Firefox, Opera, Safari, Internet Explorer, etc.) y esto se debe a que cada navegador posee sus propios valores por defecto para las etiquetas CSS. El cómo solucionar este problemita, lo veremos en una entrada más adelante.

Para saber cómo usar CSS, les invito a ver la entrada Cómo incorporar CSS en nuestras páginas.

Por ahora les dejo algunas páginas donde podemos encontrar información muy detallada y actualizada sobre el tema:

Página oficial de W3C: http://www.w3.org/
Especificaciones de CSS2: http://www.w3.org/TR/2008/REC-CSS2-20080411/
CSS 2.1: http://www.w3.org/TR/CSS21/cover.html#minitoc

sábado, 21 de abril de 2012

Colores RGB

Cuando deseamos definir un color, ya sea en CSS o en algún programa de dibujo, es casi seguro que usaremos una de estas formas:

RGB hexadecimal
RGB decimal
RGB porcentual
nombre clave

Los valores RGB se componen de tres partes, la primera corresponde al rojo, la siguiente al verde y la última al azúl (por eso el nombre RGB, del inglés Red-Green-Blue).

Para RGB hexadecimal se usan valores dentro del rango 00 - FF.
En el caso de RGB decimal son valores decimales dentro del rango 0 - 255.
Para RGB porcentual se utiliza un porcentaje dentro del rango 0% - 100%.

Por ejemplo, para el color rojo, los valores RGB serían los siguientes:

Hexadecimal: ff0000
Decimal: 255, 0, 0
Porcentual: 100%, 0%, 0%

La siguiente es un tabla donde se muestran algunos colores con sus correspondientes valores RGB hexadecimal y decimal.

#00ff00

rgb(0,255,0)

00ff66

rgb(0,255,102)

00ffcc

rgb(0,255,204)

00ccff

rgb(0,255,255)

0066ff

rgb(0,102,255)

0033ff

rgb(0,51,255)

0000ff

rgb(0,0,255)

Los siguientes son algunos colores que pueden ser definidos por sus nombres, en inglés:

Black	Gray	Silver	White	Red
Fuchsia	Purple	Maroon	Navy	Blue
Teal	Aqua	Olive	Green	Lime
Yellow	Orange	Salmon	Pink	Tan

La siguiente es una página externa donde podrás encontrar más colores con sus nombres y valores RGB: Nombre de colores.

Baúl de Recursos

Páginas