Imagenes

Imagen <img>

Todas las páginas web acostumbran a tener un cierto número de imágenes, que permiten mejorar su apariencia, o dotarla de una mayor información visual. Para insertar una imagen es necesario insertar la etiqueta <img>. Dicha etiqueta no necesita etiqueta de cierre. El nombre de la imagen ha de especificarse a través del atributo src. Por ejemplo, para insertar la siguiente imagen: Habría que escribir: <img src="imagenes/logo_animales.gif"> Teniendo en cuentra que la imagen se llama logo_animales.gif y que está dentro de la carpeta imagenes, que se encuentra en el mismo directorio que el documento actual (referencia relativa al documento). Para trabajar de una forma más sencilla y ordenada, es recomendable que todos los documentos html se encuentren en un mismo directorio, y que dentro de este directorio existan diferentes carpetas para agrupar otros objetos, como puede ser una carpeta destinada a almacenar imagenes, o una carpeta destinada a almacenar archivos de audio, etc.

Existen una serie de formatos de imagen más recomendables que otros para ser introducidos en una página web. Esta información puedes consultarla aquí .

Texto alternativo

Cuando una imagen no puede ser visualizada en el navegador, cosa que puede ocurrir al especificar mal el valor del atributo src, aparece un recuadro blanco con una X roja en su lugar, junto con el nombre de la imagen. Podemos hacer que en lugar de mostrarse el nombre de la imagen aparezca el texto que nosotros deseemos, gracias al atributo alt. Por ejemplo, imagina que deseamos mostrar una imagen llamada gatito.gif, con el texto alternativo Imagen gato, para ello insertamos el siguiente código: <img src="gatito.gif" alt="Imagen gato" > Pero hemos cometido un error, ya que dicha imagen no se encuentra en el mismo directorio que el documento actual, sino que se encuentra dentro de la carpeta imagenes. En lugar de la imagen se mostrará lo siguiente: Si en lugar del código anterior hubiéramos insertado el siguiente código: <img src="imagenes/gatito.gif" alt="Imagen gato" > La imagen habría mostrado correctamente:

Listas ordenadasydesordenadas

Las listas representan uno de los instrumentos más difundidos para organizar la información dentro de los sitios web. Una de sus características principales es la de proporcionar un cuadro claro y sintético del tema tratado.
HTML pone a disposición distintos tipos de listas. A continuación, analizaremos cada uno de ellos.

Listas ordenadas

Las listas ordenadas constan de una sola marca de apertura y cierre <OL></OL> y 
 <LI>. el codigo para elaborar listas ordenadas es:

<OL>
<LI> Primera voz del menú
<LI> Segunda voz del menú
<LI> Tercera voz del menú
</OL>
En el ejemplo notamos cómo es posible omitir la marca <BR> para el salto de línea, dado que está automáticamente incluido en <LI>. Si no se establece diversamente (como veremos a continuación), el tipo de lista ordenada que el navegador visualiza está numerada (es decir, la lista consta de una serie de números que parte del 1 y va aumentando progresivamente). Las últimas versiones de HTML prevén la posibilidad de listas ordenadas que contengan un sistema de ordenación diverso del numérico antes citado:

Ordenación con letras mayúsculas:

<OL TYPE=A>
<LI> Primera voz del menú
<LI> Segunda voz del menú
<LI> Tercera voz del menú
</OL>
Ordenación con letras minúsculas:

<OL TYPE=a>
<LI> Primera voz del menú
<LI> Segunda voz del menú
<LI> Tercera voz del menú
</OL>
Ordenación con números romanos en mayúscula:

<OL TYPE=I>
<LI> Primera voz del menú
<LI> Segunda voz del menú
<LI> Tercera voz del menú
</OL>
Ordenación con números romanos en minúscula (romanitos):

<OL TYPE=i>
<LI> Primera voz del menú
<LI> Segunda voz del menú
<LI> Tercera voz del menú
</OL>

Listas desordenadas

Las listas desordenadas funcionan de manera similar a las ordenadas. La diferencia básica es que en el caso de las listas desordenadas no existen relaciones jerárquicas entre los elementos del elenco, por lo cual no se prevén ordenaciones progresivas como las obtenidas mediante números o letras.

Las listas desordenadas constan de una sola marca de apertura y cierre <UL></UL> y tantas marcas de lista como voces hay que ordenar <LI>. La sintaxis correcta para definir una lista desordenada es:

<UL>
<LI> Primera voz del menú
<LI> Segunda voz del menú
<LI> Tercera voz del menú
</UL>
 Si no se especifica diversamente, cada voz del elenco va precedida de un símbolo geométrico.
Al igual que para las listas ordenadas, también en este caso podemos indicar diversos tipos de símbolos:

Los círculos sólidos de la lista anterior se obtienen con disc:

<UL TYPE=disc>
<LI> Primera voz del menú
<LI> Segunda voz del menú
<LI> Tercera voz del menú
</UL>
El atributo circle imposta circunferencias:

<UL TYPE=circle>
<LI> Primera voz del menú
<LI> Segunda voz del menú
<LI> Tercera voz del menú
</UL>
El atributo square imposta listas definidas por cuadrados sólidos:

<UL TYPE=square>
<LI> Primera voz del menú
<LI> Segunda voz del menú
<LI> Tercera voz del menú
</UL>
 

Color de fondo en Html

BGCOLOR

El atributo BGCOLOR imposta un fondo de un solo color. La sintaxis correcta es:

<BODY BGCOLOR="red">

Es posible sustituir el nombre en inglés con valores hexadecimales. Por ejemplo, el color rojo (red) se sustituye de esta manera:

<BODY BGCOLOR="#ff0000">

La utilidad de los colores hexadecimales es mayor cuando no se desea un color estándar sino tonalidades diversas o difuminadas. Los editores HTML de mayor difusión prevén paletas para la definición de los colores hexadecimales, mientras que Paint Shop Pro proporciona también, además del color, el correspondiente valor hexadecimal que copiar/pegar.

Encabezados y titulos.

Encabezados o Títulos

Podemos dar mayor o menor importancia a nuestros textos. Para eso se puede recurrir a los Encabezados mediante la etiqueta
<hn></hn>
donde n tiene un valor entero comprendido entre 1 y 6 (1 seria el de mayor importancia, 6 el de menor importancia).
Estos títulos o encabezados son párrafos, ya que producen saltos de línea.
Disponen del atributo align igual que los párrafos, aunque también están desaprobados a favor de las hojas de estilo como hemos dicho antes
Veamos un ejemplo:
<html>
<head>
<title>Ejemplo de Encabezados</title>
</head>
<body>
<h1>Encabezado tipo 1</h1>
<h2>Encabezado tipo 2</h2>
<h3>Encabezado tipo 3</h3>
<h4>Encabezado tipo 4</h4>
<h5>Encabezado tipo 5</h5>
<h6>Encabezado tipo 6</h6>
</body>
</html>
Realizamos la misma operación que detallamos en el post anterior, y probamos nuestro pequeño programita en el navegador, y listo veremos una lista de encabezados con diferentes formatos.
En el código podemos observar las diferentes etiquetas de un programa.
<html></html> al principio y al final del código.
<head></head> etiquetas de principio y fin del encabezado, y dentro de la cual se encuentra el titulo.
<title></title> etiqueta dentro de la cual se encuentra el titulo que se mostrara en la página web. Esta etiqueta a su vez se encuentra dentro del encabezado.

Intruccion a la programacion con html. 1erapunte

HTML (Hypertext Markup Languaje)

El HTML es mas una codificación que un lenguaje de programación. Su estructura básica es tan simple que cualquier persona sin principios en programación puede aprenderlo con gran facilidad.
Lo sorprendente de este lenguaje es que proporciona al usuario la información en una manera interactiva, haciendo uso del hypertexto , o texto con enlaces hacia otros lugares del Web, o hacia inserciones de multimedia (videos, sonidos, gráficos, etc.). Además es universal y no depende del sistema operativo que se esté utilizando.
Los documentos HTML se escriben en modo ASCII (texto plano), haciendo uso de cualquier procesador de palabras y en cualquier sistema operativo.
 

---

ESTRUCTURA BÁSICA

Para comenzar debemos saber que el HTML utiliza una codificación genérica, la cual hace uso de TAGS o etiquetas. Mediante estas etiquetas es posible separar el contenido del documento de su formato.
Los TAGS son comandos que se especifican en el cuerpo del programa, con el fin de darle las características deseadas a la información.
Toda página Web debe contener la siguiente estructura :

<HTML>
<HEAD>
<TITLE></TITLE>
</HEAD>
<BODY> Esta es mi primera página Web</BODY>
</HTML>

La etiqueta <HTML> le indica al visualizador que va a comenzar a leer un documento HTML y se debe colocar siempre al comienzo y al fin del texto. La etiqueta <HEAD> indica un encabezado, dentro del cual se coloca información como el título, el cual debe estar contenido entre la etiqueta <TITLE>
Entre la etiqueta <BODY> va el cuerpo del documento, el cual es lo que realmente vemos en el Web. Para comenzar a escribir un documento, es importante tener en cuenta que el lenguaje HTML no distingue mas de un espacio entre caracteres y se olvida de cualquier formato que se le de al texto (negrilla, cursiva, tipo de letra, entre otras). Recordemos que para esto es que se creó el HTML, toda presentación final debe ser proporcionada mediante las etiquetas.
Cada etiqueta, con excepción de unas cuantas, le debe indicar al visualizador cuando finaliza, para lo cual se utiliza </TAG>, donde TAG es puede ser cualquier etiqueta. De esta manera indicamos cuando comienza y termina el encabezado, el título, el cuerpo y el documento HTML.