Respira Web: mayo 2011

lunes, 30 de mayo de 2011

71 - HTML - Listas anidadas

Una manera común y de utilidad de conseguir esquemas de forma sencilla, es colocar una lista dentro de otra lista.

Dentro de una lista podemos utilizar cualquier otra forma de lista, es decir, no tenemos por qué mantener el mismo tipo de lista. Podemos incluir listas de definición, numeradas. etc.

Código de Ejemplo:

Programa 52

Representación en el navegador:

Si en las listas no ordenadas, no especificamos el tipo de viñeta mediante el atributo “type”, el navegador cambiará automáticamente en cada anidamiento de la viñeta el nivel de profundidad.

Código de Ejemplo:

Programa 53

Representación en el navegador:

sábado, 28 de mayo de 2011

70 - HTML - listas y párrafos

En una lista los elementos de la misma pueden ser uno o más párrafos. De esta forma se obtiene un sangrado respecto a los márgenes.

Esta técnica está aprobada, ya que se recomienda utilizar tablas u hojas de estilo para realizar la misma tarea.

Código de ejemplo con elementos detallados:

<html>

<head>

<title>Listas y Párrafos</title>

</head>

<body>

<ul>

<li>¿listas y párrafos?

Una forma de obtener párrafos con un margen respecto a los bordes es utilizar listas y párrafos. Aunque normalmente se recomienda utilizar tablas u hojas de estilo para realizar esta tarea.

Con esta herramienta y las que hemos visto anteriormente ya podemos ir dando forma a nuestra página web, permitiéndonos diseñar hojas bonitas y diferenciables. En los próximos temas seguiremos viendo cada vez más, como poder diseñar hojas con un aspecto muy profesional

</li>

<li>¿Qué es JavaScript?

JavaScript es un lenguaje basado en objetos de scripts compacto. Hay que aclarar que no es un lenguaje orientado a objetos.

Con JavaScript podemos realizar aplicaciones de propósito general a través de la web y aunque no está diseñado para el desarrollo de grandes aplicaciones es suficiente para la implementación de aplicaciones web completas o interfaces web hacia otras más complejas.

</li>

</ul>

</body>

</html>

Programa 50

Representación en el navegador:

¿listas y párrafos?

Una forma de obtener párrafos con un margen respecto a los bordes es utilizar listas y párrafos. Aunque normalmente se recomienda utilizar tablas u hojas de estilo para realizar esta tarea.

Con esta herramienta y las que hemos visto anteriormente ya podemos ir dando forma a nuestra página web, permitiéndonos diseñar hojas bonitas y diferenciables. En los próximos temas seguiremos viendo cada vez más, como poder diseñar hojas con un aspecto muy profesional

¿Qué es JavaScript?

JavaScript es un lenguaje basado en objetos de scripts compacto. Hay que aclarar que no es un lenguaje orientado a objetos.

Con JavaScript podemos realizar aplicaciones de propósito general a través de la web y aunque no está diseñado para el desarrollo de grandes aplicaciones es suficiente para la implementación de aplicaciones web completas o interfaces web hacia otras más complejas.

Código de ejemplo sin detallar elementos:

<html>

<head>

<title>Listas y Párrafos</title>

</head>

<body>

<ul>

¿listas y párrafos?

Una forma de obtener párrafos con un margen respecto a los bordes es utilizar listas y párrafos. Aunque normalmente se recomienda utilizar tablas u hojas de estilo para realizar esta tareas.

¿Qué es JavaScript?

JavaScript es un lenguaje basado en objetos de scripts compacto. Hay que aclarar que no es un lenguaje orientado a objetos.

</ul>

</body>

</html>

Programa 51

Representación en el navegador:

¿listas y párrafos?

Una forma de obtener párrafos con un margen respecto a los bordes es utilizar listas y párrafos. Aunque normalmente se recomienda utilizar tablas u hojas de estilo para realizar esta tareas.

¿Qué es JavaScript?

JavaScript es un lenguaje basado en objetos de scripts compacto. Hay que aclarar que no es un lenguaje orientado a objetos.

jueves, 26 de mayo de 2011

69 - HTML - Listas descriptivas <dl><dt>...</dt><dd>...</dd></dl>

Las listas descriptivas, son listas que van de dos en dos, un elemento es el término en sí, y el otro elemento es la descripción del término. La lista se define con el termino <dl>.

Para definir un término se utiliza la etiqueta <dt>, y para su definición se utiliza >dd>.

La definición tiene un sangrado con respecto al término.

Código de ejemplo:

<html>

<head>

<title>Ejemplo de lista Descriptiva</title>

</head>

<body>

<dl>

<dd>término para definir lista descriptiva</dd>

<dd>etiqueta utilizada para definir un término de una lista descriptiva</dd>

<dd>etiqueta utilizada para la definición de un término</dd>

<dd>dirección http de una web</dd>

</dl>

</body>

</html>

Programa 49

Representación en el navegador:

término para definir lista descriptiva

etiqueta utilizada para definir un término de una lista descriptiva

etiqueta utilizada para la definición de un término

url

dirección http de una web

martes, 24 de mayo de 2011

68 - HTML - Listas no ordenadas - <ul><li>...</li></ul>

Una lista no ordenada está compuesta por elementos que son precedidos por un disco, un cuadrado o un circulo (viñeta).

Se definen mediante el elemento <ul>, que lleva etiquetas de apertura y de cierre.

Cada uno de estos elementos, presentan además un sangrado, y tienen la posibilidad de anidarse.

Para la separación de cada elemento de la lista se utiliza la etiqueta <li>, que también tiene inicio y fin.

La viñeta por defecto es el disco pero puede configurarse con la etiqueta type, para utilizar el cuadrado o el circulo.

Código de ejemplo:

<html>

<head>

<title>Ejemplo de lista NO ordenada - Lista de tareas</title>

<HTML>

</head>

<body>

<ul>

<li>Jugar a la lotería</li>

<li>Cobrar lo ganado en la lotería</li>

<li>Comprar coche con lo ganado en la lotería</li>

</ul>

</body>

</html>

Programa 48

Representación en el navegador:

Jugar a la lotería
Cobrar lo ganado en la lotería
Comprar coche con lo ganado en la lotería

domingo, 22 de mayo de 2011

67 - HTML - Listas ordenadas - <ol><li>...</li></ol>

Una lista ordenada está compuesta, valga la redundancia, por elementos ordenados.

Estos elementos están indexados, manteniendo un orden continuo, y cada elemento va precedido por su orden en la lista.

Los elementos se definen igual que en las listas no ordenadas con:

<li> ... </li>.

El orden en este tipo de listas no es necesaria y únicamente numérico, se puede cambiar su aspecto con el atributo "type"

Código de ejemplo:

<html>

<head>

<title>Ejemplo de lista ordenada - Números ganadores:</title>

<HTML>

</head>

<body>

<ol>

</ol>

</body>

</html>

Programa 47

Representación en el navegador:

12578
31567
25698

viernes, 20 de mayo de 2011

66 - HTML - Introducción a Lista

Mucho hemos visto ya sobre HTML, y mucho nos queda por ver aún.
Ya sabemos muchas cosas en cuanto a colores, tamaños y fuentes, pero nos toca ver cómo dar formato a listas, algo muy útil, para ordenar la información en nuestra Web.
El formato de listas nos permite entre sus posibilidades, anidar una lista dentro de otra y cambiar la viñeta indicativa, lo que nos permitirá utilizar números con distintos formatos o pequeños iconos.
Podemos obtener tres tipos de listas, las que utilizan una pequeña viñeta, las numeradas y las listas de definiciones.
Como decíamos antes las etiquetas pueden ser anidadas, pero debemos ser rigurosos y estrictos para mantener su estructura.
Las listas deben tener al menos un elemento. A continuación mostramos algunos ejemplos de listas, más adelante explicaremos como poder hacer esto.
Ejemplo de lista numerada - números ganadores:

12578
31567
25698

Ejemplo de lista no ordenada:

Hacer las compras
Revisar los e-mails
Visitar clientes
Tomar un café

miércoles, 18 de mayo de 2011

65 - HTML - Anidado correcto de etiquetas

Debemos tener mucho cuidado cuando escribimos código, de no anidar incorrectamente las etiquetas.

Las etiquetas se pueden anidar, produciendo un efecto combinado sobre el contenido, pero se debe ser cuidadoso y seguir una estructura rigurosa y estricta.

Las etiquetas se deben cerrar siempre en orden contrario a como se abren. De no hacerlo así, indudablemente se verá afectado el efecto esperado sobre el contenido

En la imagen podéis ver como en el comentario de etiquetas mal anidadas, se ha cerrado la etiqueta antes que las demás que fueron abiertas antes.

lunes, 16 de mayo de 2011

64 - HTML - Atributo - ID

Con ID podemos "etiquetar", o identificar de manera única un elemento del documento.

El nombre de un ID debe ser único en el documento, el nombre tampoco puede contener espacios, ya que sería interpretado como que se le asignan dos nombres.

Los nombres asignados a ID, deben empezar por una letra, mayúscula o minúscula. También se admiten guiones.

Código : Renglón, identificado como primer-renglón

Resultado: asigna un nombre o ID a un elemento del documento, para poder hacer referencia a él por ejemplo al aplicar una hoja de estilos (css).

Pasemos al Código de ejemplo:

<html>

<head>

<title>Aplicación de ID</title>

</head>

<body>

Renglón, identificado como primer-renglón

</body>

</html>

Programa 46

El ejemplo en el navegador:

Renglón, identificado como primer-renglón

Nota: Como podréis observar, no hay resultados en la representación para el usuario, pero si hay una marca para el programador poder hacer referencia a ella.

sábado, 14 de mayo de 2011

63 - HTML - atributos del lenguaje - dir

Hemos visto antes el atributo "lang", y ahora veremos el atributo "dir", que nos permite especificar la dirección del texto.

Los valores de dir pueden ser:

LTR (left-to-right) : de izquierda a derecha
RTL (right-to-left) : de derecha a izquierda

Este atributo es útil para idiomas que se escriben de derecha a izquierda como el hebreo. El atributo "lang" para el hebreo es lang="he".

código : <... lang="código idioma" dir="rtl">
resultado: selecciona una dirección del texto.

Pasemos al Código de ejemplo: http://bobuu.blogspot.com

<html>
<head>
 <title>Documento multilingue</title>
<HTML>
</head>
 <body>
 ...Interpretado como hebreo...
 ...Interpretado como hebreo de izq. a derecha...
 ...Interpretado como hebreo de derecha a izq....
</body>
</html>

El ejemplo en el navegador:

...Interpretado como hebreo...

...Interpretado como hebreo de izq. a derecha...

...Interpretado como hebreo de derecha a izq....

Nota: El atributo "dir" es obligatorio, pero no el "lang".

jueves, 12 de mayo de 2011

62 - HTML - atributos del lenguaje - lang

Utilizar un atributo que especifique el idioma base del valor de los atributos, es útil entre otras cosas para:

- Controlar la presentación.

- Ayudar a los sintetizadores de voz.

- Ayudar a los buscadores.

- Ayudar a los verificadores de gramática y ortografía.

- Ayudar a elegir a un agente de usuario, variaciones de un signo para tipografía de alta calidad.

Con "lang" podemos especificar el valor del idioma base de los atributos y del texto.

Código : <... lang="código idioma">

Resultado: selecciona un idioma para el texto y los atributos.

Algunos de los valores de este atributo son los siguientes:

lang="en" es el código de idioma para inglés.

lang="en-US" para la variación estadounidense del inglés.

lang="es" para español.

lang="fr" para francés.

lang="de" para alemán.

lang="it" para italiano.

lang="ja" para japonés.

Código de ejemplo:

<html>

<head>

<title>Documento multilingue</title>

</head>

<body>

...Interpretado como inglés...

...Interpretado como español...

...Interpretado de nuevo como inglés...

...Texto en ingles interrumpido por algo en alemán

Aquí vuelve a empezar en inglés...

</body>

</html>

Programa 44

El ejemplo en el navegador:

martes, 10 de mayo de 2011

61 - HTML - color de fondo y color de texto - bgcolor

Continuamos con las opciones que nos permiten darle alegría a nuestra web, esta vez vemos como asignar un color de fondo. Para esto utilizaremos el atributo "bgcolor".

La etiqueta <body> admite los atributos "bgcolor" y "text", con lo que podremos seleccionar para nuestra web, un color de fondo y un color de texto diferente a los que nos asigna el sistema por defecto.

Código : <body bgcolor="color" text="color">

Resultado: muestra la página y el texto con los colores seleccionados.

Pasemos al Código de ejemplo:

<html>

<head>

<title>Fuente - Colores</title>

</head>

Se muestra Texto color amarillo sobre

fondo de la página color verde.

</body

</html>

Programa 43

El ejemplo en el navegador:

domingo, 8 de mayo de 2011

60 - HTML - Estilos y efectos de fuentes - Color

Vamos a profundizar un poco más en la forma de dar color al texto, como ya hemos visto anteriormente (Ver Pág 51) para alegrar nuestra web, o resaltar nuestros textos con colores.

Para indicar el color de un texto se utiliza la propiedad "font" con el atributo "color".

Código : Rojo

Resultado: muestra el texto entre las etiquetas en color rojo.

Hay dos formas de indicar el valor de la propiedad color, la primer en sus valores RGB (red, green, blue) rojo, verde, azul. Es decir que combinando estos valores se obtienen los diferentes colores. Y la otra forma es con sus nombres en inglés.

Pasemos al Código de ejemplo utilizando los valores RGB:

<html>

<head>

<title>Fuente - Colores utilizando los códigos RGB</title>

</head>

<body>

Negro

Plata

Gris

Blanco <- Blanco

Marron

Rojo

Purpura

Fucsia

Verde

Verde lima

Verde Oliva

Amarillo

Azul Marino

Azul

Azul Verdoso

Celeste

</body>

</html>

Programa 41

El ejemplo en el navegador:
Negro
Plata
Gris
Blanco <- Blanco
Marron
Rojo
Purpura
Fucsia
Verde
Verde lima
Verde Oliva
Amarillo
Azul Marino
Azul
Azul Verdoso
Celeste

Y ahora el mismo ejemplo pero dándole a los atributos de color su valor en inglés, su representación en el explorador es la misma que para los valores RGB de antes.

Pasemos al Código de ejemplo utilizando los valores de los colores en inglés:

<html>

<head>

<title>Fuente - Colores utilizando los códigos en inglés</title>

</head>

<body>

Negro

Plata

Gris

Blanco <- Blanco

Marron

Rojo

Purpura

Fucsia

Verde

Verde lima

Verde Oliva

Amarillo

Azul Marino

Azul

Azul Verdoso

Celeste

</body>

</html>

Programa 42

El resultado en el navegador es el mismo que utilizando los codigos RGB.

Nota: Se aconseja utilizar estos colores que son los que la mayoría de los navegadores incluyen en su paleta de colores, aunque se pueden hacer cientos de variedades utilizando las combinaciones rgb, no todos los colores obtenidos se encuentran en las paletas de colores de los navegadores con lo que podrían no obtenerse los resultados deseados.

viernes, 6 de mayo de 2011

59 - HTML - Estilos y efectos de fuentes subíndice

Como vimos, la opción "sup" muestra en formato superíndice, pues bien hoy vemos la opción que se utiliza para mostrar un texto en formato subíndice (fuente pequeña debajo de la línea de texto).

Código : Texto

Resultado: muestra el texto entre las etiquetas en formato grande.

Pasemos al Código de ejemplo:

<html>

<head>

<title>Fuente en formato subíndice</title>

</head>

<body>

Este es un texto normal

Este es un texto en subíndice

Aquí un texto normal subíndice para ver la diferencia

Otro ejemplo, la fórmula del agua: H2O

</body>

</html>

Programa 40

El ejemplo en el navegador:

Este es un texto normal
_{Este es un texto en subíndice}
Aquí un texto normal _subíndice para ver la diferencia
Otro ejemplo, la fórmula del agua: H₂O

miércoles, 4 de mayo de 2011

58 - HTML - Estilos y efectos de fuentes superindice

La opción se utiliza para mostrar un texto en formato superíndice.

Código : Texto

Resultado : muestra el texto entre las etiquetas en formato grande.

Pasemos al Código de ejemplo:

<html>

<head>

<title>Fuente en formato superindice</title>

</head>

<body>

Este es un texto normal

Este es un texto en superindice

Aqui un texto normal superindice para ver la diferencia

Otro ejemplo: 22 + 22 = 8

</body>

</html>

Programa 39

El ejemplo en el navegador:

Este es un texto normal
^{Este es un texto en superindice}
Aquí un texto normal ^superindice para ver la diferencia
Otro ejemplo: 2² + 2² = 8

lunes, 2 de mayo de 2011

57 - HTML - Estilos y efectos de fuentes pequeño

La opción se utiliza para mostrar un texto en formato pequeño.

Código : Texto

Resultado : muestra el texto entre las etiquetas en formato grande.

Pasemos al Código de ejemplo:

<html>

<head>

<title>Fuente en formato pequeño</title>

</head>

<body>

Este es un texto normal

Este es un texto pequeño

</body>

</html>

Programa 38

El ejemplo en el navegador:

Este es un texto normal
Este es un texto pequeño

Estamos trabajando en la edición en papel: Reserva ya tu libro.
Envíos a todo el mundo.

Respira Web

lunes, 30 de mayo de 2011

71 - HTML - Listas anidadas

sábado, 28 de mayo de 2011

70 - HTML - listas y párrafos

jueves, 26 de mayo de 2011

69 - HTML - Listas descriptivas <dl><dt>...</dt><dd>...</dd></dl>

martes, 24 de mayo de 2011

68 - HTML - Listas no ordenadas - <ul><li>...</li></ul>

domingo, 22 de mayo de 2011

67 - HTML - Listas ordenadas - <ol><li>...</li></ol>

viernes, 20 de mayo de 2011

66 - HTML - Introducción a Lista

miércoles, 18 de mayo de 2011

65 - HTML - Anidado correcto de etiquetas

lunes, 16 de mayo de 2011

64 - HTML - Atributo - ID

sábado, 14 de mayo de 2011

63 - HTML - atributos del lenguaje - dir

jueves, 12 de mayo de 2011

62 - HTML - atributos del lenguaje - lang

martes, 10 de mayo de 2011

61 - HTML - color de fondo y color de texto - bgcolor

domingo, 8 de mayo de 2011

60 - HTML - Estilos y efectos de fuentes - Color

viernes, 6 de mayo de 2011

59 - HTML - Estilos y efectos de fuentes <sub></sub> subíndice

miércoles, 4 de mayo de 2011

58 - HTML - Estilos y efectos de fuentes <sup></sup> superindice

lunes, 2 de mayo de 2011

57 - HTML - Estilos y efectos de fuentes <small></small> pequeño