Usos adicionales de una Imagen HTML, función y estética.

CONTINUACIÓN...

Usar una imagen como enlace

Para usar una imagen como enlace, simplemente anida la etiqueta <img> dentro de la etiqueta <a>:

<a href="tutorial.html">
 <img src="iconoHTML.gif" alt="animación con el icono de HTML" style="width:42px;height:42px;border:0;">
</a>

Nota: se añade “border:0;” para prevenir que IE9 (y versiones anteriores) muestren un borde alrededor de la imagen (cuando la imagen es un enlace).

Hacer que una imagen flote dentro de un texto

Usa la propiedad CSS float para permitir que una imagen flote (o en un sentido no muy preciso, que la imagen se muestre) ya sea a la izquierda o a la derecha dentro de un elemento:

<p>
<img src="sonriente.gif" alt="Cara sonriente" style="float:right;width:42px;height:42px;"> La imagen flotara a la derecha del texto.
</p>

<p>
<img src="sonriente.gif" alt="Cara sonriente" style="float:left;width:42px;height:42px;"> La imagen flotara a la izquierda del texto.
</p>

Dependiendo de la posición en donde insertes la imagen, entre el texto, y de la cantidad de texto que tenga el elemento que en este ejemplo es un párrafo, el uso de esta propiedad CSS se apreciara mejor.

Nota: El antiguo atributo HTML align fue desaprobado en la versión HTML4 y no es soportado por la versión HTML5…. Hablando de otro tema, el colocar una imagen entre una oración especifica no es igual a hacer lo que se trata en el tema, ni se visualizan del mismo modo.

Mapa de la imagen

Usa la etiqueta <map> para crear un mapa de la imagen. En un mapa se establece que aéreas de la imagen podrán ser cliqueadas.

El atributo name de la etiqueta <map> y el atributo usemap de la etiqueta <img> son los atributos asociados, que se usan para crear la relación entre la imagen y el mapa.

La etiqueta <map> contendrá un cierto número de etiquetas <area>, que son las que definen las áreas de la imagen encima de las cuales se puede hacer clic:

<img src="planetas.gif" alt="Planetas" usemap="#mapadeplanetas" style="width:145px;height:126px;">

<map name="mapadeplanetas">
 <area shape="rect" coords="0,0,82,126" alt="Sol" href="sol.htm">
 <area shape="circle" coords="90,58,3" alt="Mercurio" href="mercurio.htm">
 <area shape="circle" coords="124,58,8" alt="Venus" href="venus.htm">
</map>

Expliquemos este ejemplo:

El atributo shape

Define que figura encierra mejor el área, es decir, la figura elegida no debe necesariamente igualar el perímetro del area.

El atributo coords

Define las coordenadas que se usaran para dibujar la figura elegida dentro del cuadrante con eje “y” invertido que representa la imagen:

• <area figura="rectangulo" coordenadas="(primero la esquina superior izquierda) x,y, (segundo la esquina inferior derecha) x,y" ……>
• <area figura="circulo" coordenadas="(primero el el punto central) x,y, (segundo el diámetro de la circunferencia) c" ……>

---

Resumen de lo aprendido

• Usa el elemento HTML <img> para definifir una imagen
• Usa el atributo HTML src para definir el URL de la imagen
• Usa el atributo HTML alt para definir un texto alternativo para una imagen, para cuando esta no se muestre por alguna razón
• Usa los atributos HTML width y height para definir el tamaño de la imagen
• (alternativamente) Usa las propiedades CSS width y height para definir el tamaño de la imagen
• Usa la propiedad CSS float para que la imagen flote
• Usa el elemento HTML <map> para definir el mapa de una imagen
• Usa el elemento HTML <area> para definir las areas cliqueables del mapa de una imagen
• Usa el atributo usamap del elemento HTML <img> para referirte a un mapa de la imagen

Nota: cargar las imágenes lleva tiempo. Las imágenes grandes pueden ralentizar tu pagina. Usa las imágenes cuidadosamente.

fin de imágenes - expandido, a continuación mas temas...

Atributos básicos de una Imagen HTML, esta se enlaza no se inserta

Imágenes expandido

---

Imagenes JPG

Imagenes GIF

Imagenes PNG

---

Sintaxis

En HTML, las imágenes se definen con la etiqueta <img>.

El elemento <img> es una elemento vacio, no tiene una etiqueta de final. Lo único que contiene, dentro de la etiqueta <a>, son atributos.

El atributo src especifica el URL (dirección web) de la imagen:

<img src="url" alt="algun_texto" style="width:ancho;height:alto;">

Ejemplo:

<!DOCTYPE html>
<html>
 <body>
  <h2>Una Montaña Espectacular</h2>
  <img src="foto_montaña.jpg" alt="Panorama montañoso" style="width:304px;height:228px;">
 </body>
</html>

El atributo alt

El atributo alt provee un texto alternativo para una imagen, si el usuario por alguna razón no puede visualizarla (a causa de una conexión lenta, un error en el atributo src, o si el usuario un lector de pantalla).

Si un navegador no puede encontrar una imagen, mostrara el valor del atributo alt:

<img src="HTML5.gif" alt="el icono de la versión 5 de HTML" style="width:128px;height:128px;">

El atributo alt se requiere para que una pagina web sea validada correctamente.

---

Lectores de pantalla

Un lector de pantalla es un programa software que lee el código HTML, convierte el texto, y hace posible que el usuario “escuche” el contenido. Los lectores de pantalla son útiles para personas ciegas, con problemas visuales, o sin capacidad de aprendizaje.

---

El tamaño de la imagen – ancho y alto

Puede usar el atributo style para especificar el ancho y el alto de una imagen.

Los valores se pueden especificar en pixeles, colocando px luego del valor:

<img src="html5.gif" alt="Icono de HTML5" style="width:128px;height:128px;">

Alternativamente, puedes usar los atributos width y height. Con estos, la medida por defecto es el pixel:

<img src="html5.gif" alt="Icono de HTML5" width="128" height="128">

Nota: siempre especifica el ancho y el alto de una imagen. Si el ancho y el alto no se especifican, la pagina parpadeara (se reajustara) al cargar las imágenes.

Los atributos width y height, o el atributo style?

Ambas formas son validas en HTML5.

Sin embargo, te sugiero usar el atributo style. Esto previene que las hojas de estilo internas o las externas cambien el tamaño actual u original de las imágenes:

<!DOCTYPE html>
<html>
 <head>
  <style>
   img { 
    width:100%; 
   }
  </style>
 </head>
 <body>
  <img src="html5.gif" alt="Icono de HTML5" style="width:128px;height:128px;">
  <img src="html5.gif" alt="Icono de HTML5" width="128" height="128">
 </body>
</html>

---

Cuando las imágenes están dentro de otra carpeta

Si no se especifica lo contrario, el navegador espera encontrar dicha imagen en la misma carpeta en donde se encuentra la pagina web del momento.

Sin embargo, es común almacenar las imágenes en una subcarpeta. En tal caso, debes incluir el nombre de la carpeta en el atributo src:

<img src="/imagenes/html5.gif" alt="Icono de HTML5" style="width:128px;height:128px;">

Cuando las imágenes están en otro servidor.

Algunos sitios web almacenan sus imágenes en servidores de imágenes…

Pero lo importante en cuanto a este otro tema es que tienes acceso a imágenes de cualquier dirección web del mundo:

<img src="https://www.cualquiersitio.com/imagenes/animales/reptiles/acuaticos/caiman_yacare.jpg" alt="un caiman" style="width:200px;height:142px;">

Podrás leer mas sobre las rutas de archivo en una sección posterior dedicada a las rutas de archivo en HTML.

---

Imágenes animadas

El estándar GIF es tanto para imágenes como para animaciones:

<img src=" https://www.ejemplo.com/enciclopedia/animaciones/planetas/tierra.gif" alt="Tierra Rotativa" style="width:48px;height:48px;">

PARTE 2, a continuación...

Usa como Enlaces otros elementos HTML

Enlaces HTML - expandido

---

CONTINUACIÓN...

Usar imágenes como si fuesen enlaces

Es común usar imágenes como enlaces:

<a href="tutorialHTML5.asp">
 <img src="sonriente.gif" alt="imagen que enlaza al tutorial de HTML5" style="width:42px;height:42px;border:0;">
</a>

Nota: border:0; se añade para prevenir que IE9 (y sus versiones anteriores) muestre un borde alrededor de la imagen (cuando la imagen es un enlace).

---

Creando un marcapaginas

Los marcapaginas HTML se usan para permitirles a los lectores saltarse a partes específicas de una pagina Web.

Los marcapaginas pueden ser utiles si tu pagina web es muy extensa.

Para beneficarte de los marcapaginas en tu página, primero debes añadir el marcapaginas al elemento deseado, y luego crear un enlace que refiera hacia dicha señal o marcapaginas.

Cuando el enlace se cliquea, la pagina se desplazara a la locación que tiene el marcapaginas.

Ejemplo:

Primero, crea un marcapaginas utilizando el atributo id:

<h2 id="tips">Seccion con tips utiles para ti</h2>

Luego, crea un enlace que refiera hacia dicho marcapaginas, desde la misma pagina:

<a href="#tips">Dale un vistazo a la seccion de tips</a>

O, crea un enlace que te mande hasta el marcapaginas, desde otra pagina:

<a href="tutorialHTML5.html#tips"> Dale un vistazo a la seccion previa de tips</a>

Rutas ajenas a la página web actual

Las páginas externas pueden ser referenciadas con una URL absoluta o con una ruta relativa a la corriente o presente pagina web:

• Este ejemplo usa una URL absoluta para enlazarse a una pagina web externa, es decir, un archivo HTML independiente, el cual puede o no estar almacenado localmente, aunque usar una URL absoluta en el primer caso no es algo que se aconseje, lo veremos luego:

  <a href="http://www.ejemplo.com/html/tutorial.html">Tutorial HTML</a>

• Este ejemplo se enlaza a una pagina web externa, es decir, un archivo HTML independiente, que está almacenado localmente, alojado en la carpeta “html” del presente sitio web, termino NO igual a “pagina web”, una página web se encuentra dentro de un sitio web, los dos son términos abstractos distintos, pero el segundo termino(sitio web), podríamos decir que se refiere a una configuración de hardware y software, que forma un servidor o computador dedicado, sobre la cual funciona o se establece un sitio web:

  <a href="/html/tutorial.html">Tutorial HTML</a>

  Para quien esté familiarizado a su disco duro, en el ejemplo de arriba se omite lo que va justo antes de “/html” a razón de que se entiende similar a “C:\html\tutorial.html”, en donde “C:” que es la raíz de todo, puede omitirse “\html\tutorial.html” y equivaldría al contenedor físico-lógico para las páginas web del servidor, es decir, vagamente hablando, equivaldría al sitio web mismo “www.ejemplo.com\html\tutorial.html”. No es lo mismo “html\tutorial.html” que “\html\tutorial.html”, lo veremos luego. Puedes sustituir las “\”s por “/”s a fin facilitar la comprensión.

• Este ejemplo enlaza a una pagina web externa, es decir, un archivo HTML independiente, que está almacenado localmente, alojado en la misma carpeta en donde se encuentra la presente pagina web:

  <a href="tutorial.html">Tutorial HTML</a>

Así que agrega algunos marcapaginas, y suma funcionalidad a tu pagina.

Podrás leer mas sobre las rutas de archivo en una sección posterior, dedicada a las rutas de archivo en HTML.

---

Resumen de lo aprendido

• Usa el elemento <a>para definir un enlace
• Usa el atributo href para definir la dirección del enlace
• Usa el atributo target para definir en donde se abrirá el documento enlazado
• Usa el elemento <img> adentro de un elemento <a>, para usar la imagen como un enlace
• Usa el atributo id (id=“valor”) para definir marcapaginas en una pagina
• Usa el atributo href (href=“#valor”) para enlazar hacia un marcapaginas

final de Enlaces HTML - expandido, a continuación mas temas...

Estiliza el Enlace HTML según su estado mas presentar lo enlazado

Enlaces HTML

Los enlaces se hallan en casi todas las paginas web. Los enlaces le permiten a los usuarios hacerse camino de una pagina a otra, a base de clicks.

Hiperenlaces

Los enlaces HTML son hiperenlaces.

Puedes hacer click sobre un enlace y pasar a otro documento.

Cuando mueves el puntero encima de un enlace, el puntero se convertirá en una mano pequeña.

Nota: un enlace no tiene por que ser texto. Puede ser una imagen o cualquier otro elemento HTML.

Sintaxis

En HTML, los enlaces se definen con la etiqueta <a>:

<a href="url">texto del enlace</a>

Ejemplo:

<a href="http://www.ejemplo.com/html/">Visita nuestro tutorial de HTML</a>

El atributo href específica la dirección de destino (http://www.ejemplo.com/html/) del enlace.

El texto del enlace es la parte visible (Visita nuestro tutorial de HTML).

Hacer un clic encima del texto del enlace, te enviara a la dirección especificada.

Nota: sin un barra inclinada hacia adelante (/) colocada al final de una dirección que apunta a una subcarpeta (en el ejemplo, la carpeta llamada html), tu podrías generar dos peticiones al servidor (computador dedicado). Muchos servidores añadirán automáticamente una barra inclinada hacia delante a la dirección, y luego crearan una petición nueva.

---

Enlaces locales

El ejemplo de arriba usa una URL absoluta (una dirección web completa).

Un enlace local enlaza al mismo “sitio web” en donde se encuentra, y se especifica con una URL relativa (sin http://www. ...):

<a href="imagenes_html.asp">Hablemos de las imágenes en HTML</a>

---

Los colores HTML de los enlaces

Por defecto, un enlace se mostrara según lo siguiente, en todos los navegadores:

• Un enlace no visitado esta azul y subrayado
• Un enlace visitado esta purpura y subrayado
• Un enlace activado esta rojo y subrayado, hasta soltar el clic

Tú puedes cambiar la apariencia por defecto de estos, aplicando estilos:

<style>
a:link    {color:green; background-color:transparent; text-decoration:none}

a:visited {color:pink; background-color:transparent; text-decoration:none}

a:hover   {color:red; background-color:transparent; text-decoration:underline}

a:active  {color:yellow; background-color:transparent; text-decoration:underline}
</style>

Expliquemos este ejemplo:

a:link

Indica que vamos a dar estilo al elemento <a>, específicamente a su apariencia inicial.

a:visited

Indica que vamos a dar estilo al elemento <a>, específicamente a su apariencia luego de ser visitado su enlace.

a:hover

Indica que vamos a dar estilo al elemento <a>, específicamente a su apariencia cuando el puntero esta encima.

a:active

Indica que vamos a dar estilo al elemento <a>, específicamente a su apariencia cuando se hace un clic encima o se mantiene presionado.

Todo esto con lenguaje CSS y dentro de un elemento HTML <style>.

---

El atributo target

El atributo target específica en donde se mostrara o abrirá el destino del enlace.

El atributo target puede tener uno de los siguientes valores:

• _blank – el documento enlazado se abre en una ventana o pestaña nueva
• _self – el documento enlazado se abre en la misma ventana/pestaña en donde el enlace fue cliqueado (esta viene por defecto)
• _parent – el documento enlazado se abre en el cuadro o división que contiene a esta otra
• _top – el documento enlazado se muestra o abre en la división o cuadro principal, que está en el tope de la jerarquía dentro de la ventana
• El nombrededivision – el documento enlazado se abre en una división o cuadro que cuenta con un nombre

Este ejemplo abrirá el documento enlazado en una nueva ventana/pestaña del navegador:

<a href="http://www.ejemplo.com/" target="_blank">Visita el sitio web Ejemplo y vuélvete uno!</a>

Consejo: si tu pagina está confinada dentro de un subdivisión, tu puedes usar target=”_top” para sacarla de cuales quiera subdivisiones que existan dentro de la ventana del navegador:

<a href="http://www.ejemplo.com/html/" target="_top">Ya creamos un tutorial de HTML5!</a>

PARTE 2, a continuación...

Da Estilo al documento HTML entero con estas propiedades CSS, elementos y atributos html

Estilos en HTML – con CSS

---

Dando estilo con CSS en HTML

CONTINUACIÓN...

Bordes CSS

La propiedad CSS border coloca un borde alrededor de un elemento HTML:

p {
 border: 1px solid powderblue;
}

Acolchado o relleno CSS

La propiedad CSS padding establece un relleno o acolchado (un espacio) entre el texto y el borde de un elemento:

p {
 border: 1px solid powderblue;
 padding: 30px;
}

Márgenes CSS

La propiedad CSS margin define un margen (otro espacio) luego de, fuera de, o exterior a el borde de un elemento:

p {
 border: 1px solid powderblue;
 margin: 50px;
}

---

El atributo id

Para aplicar un estilo específico a un elemento especial, añade el atributo id al elemento:

<p id="p01">Soy distinto</p>

Luego define un estilo para el elemento que tiene ese id específico:

#p01 {
 color: blue;
}

Nota: el id de un elemento debería ser único dentro de una página, de modo que el seleccionador de ids (#id (#p01, en el caso anterior)) se utilice para seleccionar ¡un único elemento!

El atributo class

Para aplicar un estilo a un tipo especial de elementos, añade un atributo class al elemento:

<p>Este es un parrafo.</p>
<p>Este es un párrafo.</p>

<p class="presunción">Ella y yo somos distintos</p>

<p>Este es un párrafo.</p>

<p class="presunción ">El y yo somos distintos</p>

Luego define un estilo para los elementos que pertenecen a esa clase especifica:

p.presunción {
 color: red;
}

---

Referencias externas

Las hojas de estilo externas pueden ser referenciadas con una URL absoluta o con una ruta relativa a la corriente o presente pagina web:

• Este ejemplo usa una URL absoluta para enlazarse a una hoja de estilo externa, en el sentido de que el código CSS no está dentro del archivo HTML, vea arriba los temas previos para más información, sino en un archivo propiamente CSS, el cual puede o no estar almacenado localmente, aunque usar una URL absoluta en el primer caso no es algo que se aconseje, lo veremos luego:

  <link rel="stylesheet" href="http://www.ejemplo.com/html/estilos.css">

• Este ejemplo se enlaza a una hoja de estilo externa, en el sentido de que el código CSS no está dentro del archivo HTML, vea arriba los temas previos para mas información, sino en un archivo propiamente CSS que está almacenado localmente, alojada en la carpeta “css” del presente sitio web, termino NO igual a “pagina web”, una página web se encuentra dentro de un sitio web, los dos son términos abstractos distintos, pero el segundo termino(sitio web), podríamos decir que se refiere a una configuración de hardware y software, que forma un servidor o computador dedicado, sobre la cual funciona o se establece un sitio web:

  <link rel="stylesheet" href="/css/estilos.css">

  Para quien esté familiarizado a su disco duro, en el ejemplo de arriba se omite lo que va justo antes de “/css” a razón de que se entiende similar a “C:\css\estilos.css”, en donde “C:” que es la raíz de todo, puede omitirse “\css\estilos.css” y equivaldría al contenedor físico-lógico para las páginas web del servidor, es decir, vagamente hablando, equivaldría al sitio web mismo “www.ejemplo.com\css\estilos.css”. No es lo mismo “css\estilos.css” que “\css\estilos.css”, lo veremos luego. Puedes sustituir las “\”s por “/”s a fin facilitar la comprensión.

• Este ejemplo enlaza a una hoja de estilo externa, en el sentido de que el código CSS no está dentro del archivo HTML, vea arriba los temas previos para mas información, sino en un archivo propiamente CSS que está almacenado localmente, alojada en la misma carpeta en donde se encuentra la presente pagina web:

  <link rel="stylesheet" href="estilos.css">

Podrás leer mas sobre las rutas de archivo en una sección posterior dedicada a las rutas de archivo en HTML.

---

Resumen de lo aprendido

• Usa el atributo HTML style para la estilización en línea
• Usa el elemento HTML <style> para definir código CSS interno, que no es en línea
• Usa el elemento HTML <link> para referir un archivo CSS independiente y/o externo
• Usa el elemento HTML <head> para anidar los elementos <style> y <link>
• Usa la propiedad CSS color para los colores de texto
• Usa la propiedad CSS font-family para los tipos de letra
• Usa la propiedad CSS font-size para los tamaños de texto
• Usa la propiedad CSS border para los bordes de los elementos
• Usa la propiedad CSS padding para espaciar hacia dentro de los bordes de los elementos
• Usa la propiedad CSS margin para espaciar hacia fuera de los bordes de los elementos

Etiquetas HTML relacionadas al estilo

Etiqueta	Descripción
<style>	Define información de estilo para un documento HTML
<link>	Define un enlace entre un documento HTML y un recurso externo tal, como una hoja de estilo

---

final de Estilos en HTML – con CSS, a continuación mas temas...

Aplica Estilo, a la letra por ejemplo, en HTML empleando codigo CSS

Estilos en HTML – con CSS

---

Dando estilo con CSS en HTML

CSS significa Hojas de Estilo en Cascada.

CSS describe como se deben mostrar los elementos HTML en la pantalla, en el papel, o en otro medio.

CSS nos ahorra un montón de trabajo. Con este puedes controlar el diseño visual de varias páginas web con una sola instancia de este lenguaje de diseño grafico.

El código CSS puede ser añadido a los elementos HTML de 3 maneras:

• En línea – al usar el atributo style en los elementos HTML
• Interna – al usar un elemento <style> en la sección <head>
• Externa – al usar un archivo CSS externo

Lo manera más común de añadir el código CSS, es desde archivos CSS independientes que contienen el código CSS o en otras palabras, los estilos para la pagina o páginas web. Sin embargo, acá usaremos la estilización interna y en línea, porque para una demostración resulta más fácil, y es más sencillo como para que lo intentes en esta guía de HTML (HTML5).

Aviso: podrás aprender mucho más sobre CSS en nuestra futura guía de CSS.

CSS en línea

Un código CSS en línea se usa para aplicar un estilo único a un elemento HTML individual.

Un código CSS en línea emplea el atributo style de un elemento HTML.

Este ejemplo establece el color del texto del elemento <h1> como azul:

<h1 style="color:blue;">
 Este es un encabezado azul
</h1>

CSS interno

Un código CSS interno se usa para definir un estilo para una pagina HTML individual.

Un código CSS interno se define en la sección <head> de una pagina HTML, dentro de un elemento <style>:

<!DOCTYPE html>
<html>
 <head>
  <style>
   body {background-color: powderblue;}
   h1   {color: blue;}
   p    {color: red;}
  </style>
 </head>

 <body>
  <h1>
   Este es un encabezado
  </h1>
  <p>
   Este es un parrafo.
  </p>
 </body>
</html>

CSS externo

Se utiliza una hoja de estilo externa para definir el estilo de muchas páginas HTML.

Al usar una hoja de estilo externa, tú puedes cambiar la apariencia de todo un sitio web ¡con solo cambiar un archivo!

Para usar una hoja de estilo externa, añade un enlace hacia ella en la sección <head> de una página HTML:

<!DOCTYPE html>
<html>
 <head>
  <link rel="stylesheet" href="estilos.css">
 </head>
 <body>
 <h1>
  Este es un encabezado
 </h1>
 <p>
  Este es un parrafo.
 </p>
 </body>
</html>

Una hoja de estilo externa puede ser escrita en cualquier editor de texto. El archivo no debe contener ningún código HTML, y debe ser guardado con la extensión “.css”.

Abajo se muestra como luce el archivo CSS de arriba, “estilos.css”:

body {
 background-color: powderblue;
}

h1 {
 color: blue;
}

p {
 color: red;
}

---

Tipos de letra CSS

Estas 3 propiedades te permitiran estilizar tus fuentes (tipos de letra):

• La propiedad CSS color define el color de texto que se usara.
• La propiedad CSS font-family define el tipo de letra que se usara.
• La propiedad CSS font-size define el tamaño de texto que se usara.

Ejemplo:

<!DOCTYPE html>
<html>
 <head>
  <style>
   h1 {
    color: blue;
    font-family: verdana;
    font-size: 300%;
   }
   p  {
    color: red;
    font-family: courier;
    font-size: 160%;
   }
  </style>
 </head>
 <body>
  <h1>Este es un encabezado</h1>

  <p>Este es un parrafo.</p>
 </body>
</html>

PARTE 2, a continuación...

Los Colores en HTML

En HTML, un color puede ser especificado mediante su nombre (el nombre del color), su valor RVA (RGB, en ingles), o su valor Hex (hexadecimal) compuesto.

Nombres de color

En HTML, un color puede ser especificado mediante su nombre (el nombre del color):

Color	Nombre (los nombres deben ser ingleses)
	Blue
	Orange
	Cyan
	Yellow
	Red

HTML soporta 140 nombres de color, estándares.

Valores RVA (RGB, en ingles)

En HTML, un color también puede ser especificado mediante su valor RVA (RGB, en ingles), valor que responde a esta fórmula: rva(rojo, verde, azul).

Cada parámetro (rojo, verde, y azul) puede tener un valor de 0 a 255, el cual indica la intensidad del color en donde se encuentra o el color que representa en la formula.

Por ejemplo: rva(255, 0, 0), se muestra como rojo, porque el rojo en la formula esta en su valor más alto (255) y los otros colores están en 0.

Para mostrar el color negro, todos los parámetros de color deben estar en 0, así: rva(0, 0, 0).

Para mostrar el color blanco, todos los parámetros de color deben estar en 255, así: rva(255, 255, 255).

Ejemplo:

Color	RVA (RGB, en ingles; solo entendera el ingles, no lo pongas en español)
	rgb(0,255,255)
	rgb(0,0,255)
	rgb(0,255,0)
	rgb(255,0,0)
	rgb(255,255,0)

Los varios tonos del color gris muchas veces se obtienen al usar valores iguales en las 3 fuentes de luz, es decir los parámetros de la formula:

Color	RVA (RGB, en ingles; solo entendera el ingles, no lo pongas en español)
	rgb(255,255,255)
	rgb(200,200,200)
	rgb(128,128,128)
	rgb(90,90,90)
	rgb(0,0,0)

Valores Hex (hexadecimales) compuestos

En HTML, un color también puede ser especificado mediante su valor Hex (hexadecimal) compuesto, que se especifica de la siguiente manera: # RRVVAA. En donde RR (rojo), VV (verde) y AA (azul) son, cada grupo, valores hexadecimales de 00 a FF (lo mismo que en el sistema decimal, de 0-255... es decir, los rangos inclusivos, son equivalentes de acuerdo a la conversión).

Por ejemplo, #FF0000 se muestra como rojo, porque el rojo está en su valor más alto (FF) y los otros colores están en su valor más bajo (00).

Color	Hex
	#00FF00
	#FFFF00
	#FF0000
	#00FFFF
	#0000FF

Los varios tonos del color gris muchas veces se obtienen al usar valores iguales en las 3 fuentes de luz, es decir los parámetros de la formula:

Color	Hex
	#000000
	#404040
	#808080
	#CCCCCC
	#FFFFFF

Comentarios en HTML

Comentarios

---

Las etiquetas para comentar se usan para insertar comentarios en el código fuente HTML de la página web.

---

Etiquetas HTML para comentar

Puedes añadir comentarios a tu fuente de HTML (al código fuente de la pagina web, o código HTML) usando la siguiente sintaxis:

<!--
 Escribe tus comentarios acá
-->

Nota que hay un signo de exclamación (!) en la etiqueta de apertura (<!--), pero no lo hay en la etiqueta de cierre (-->).

Observación: los comentarios no son mostrados por el navegador, pero ayudan o pueden ayudar a documentar tu código fuente HTML.

En los comentarios puedes colocar notificaciones y recordatorios, y estos dentro del mismo código HTML:

<!--
 Este es un comentario
-->
<p>
Este es un párrafo.
</p>

<!--
 Recuerda añadir más información acá
-->

Los comentarios son también grandiosos para depurar el código HTML, porque puedes encerrar en un comentario líneas de código, una a la vez, para buscar la causa de algún error que puedas tener. Ademas de poder poner información útil según lo que se ha dicho arriba:

<!--
No mostrar esto por el momento
 <img border="0" src="foto_cordillera.jpg" alt="cordillera">
-->

---

Comentarios condicionales

Quizá te topes con los comentarios condicionales dentro del código HTML:

<!--[if IE 9]>
   ....algún código HTML va acá....
<![endif]-->

Los comentarios condicionales hacen que las etiquetas HTML dentro de ellos sean ejecutadas solamente por Internet Explorer (navegador web de Microsoft).

Elementos HTML para código informático

Elementos para código informático.

---

Formateo del código informático

Con HTML normalmente se tiene un tamaño de letra y un espaciado variables.

Esto no es lo ideal cuando se está presentado código de computadora o informático.

Los elementos <kbd>, <samp>, y <code> se muestran con un tamaño de letra y un espaciado fijo.

---

El elemento <kbd>

Los datos de entrada que se requieren del usuario a través del teclado van aca.

El elemento <kbd> se emplea para indicar que comandos, datos, o información le requiere al usuario un programa que presenta una interfaz con campos para la entrada o ingreso de comandos, datos, o información a través del teclado; y como ingresarlos:

<p>
 Para visualizar el contenido del archivo, sin tener el permiso para editarlo habilitado. Escriba o ingrese en el campo llamado “escucha”, la siguiente secuencia (sustituyendo “Archivo” con el nombre del archivo que desea acceder):
</p>

<p>
 <kbd>
  Archivo | Abrir...
 </kbd>
</p>

El elemento <samp>

Los datos de salida que produce, presenta, o reporta un computador van aca.

El elemento <samp> se emplea para mostrar el tipo de datos de salida que produce, presenta, o reporta un programa de computadora, como una muestra o prueba:

<samp>
 demo.ejemplo.com inicioDeSesion: 12 Abr 09:10:17
 Linux 2.6.10-grsec+gg3+e+fhs6b+nfs+gr0501+++p3+c4a+gr2b-reslog-v6.189
</samp>

El elemento <code> para código de programacion

El elemento <code> se emplea para presentar una pieza de código de programación:

<code>
 var x = 5;
 var y = 6;

 document.getElementById("demo").innerHTML = x + y;
</code>

Ten en cuenta que el elemento <code> no preserva los espacios en blanco extras y los saltos de línea.

Para contrarestar esto, puedes poner el elemento <code> dentro de un elemento <pre>:

<pre>
 <code>
  var x = 5;
  var y = 6;

  document.getElementById("demo").innerHTML = x + y;
 </code>
</pre>

El elemento <var> para las Variables

El elemento <var> se emplea para las variables.

La variable podría estar en una expresión matemática o en un caso de programación:

<p>
 Einstein escribio: <var>E</var> = <var>m</var><var>c</var><sup>2<sup>.
</p>

---

Resumen de lo aprendido

Etiqueta	Descripción
<code>	Define una pieza de código de programación
<kbd>	Define los datos de entrada que se requieren del usuario a través del teclado
<samp>	Define los datos de salida que produce, presenta, o reporta un computador
<var>	Define una variable
<pre>	Define texto preformateado

Elementos HTML de citación y mención

Elementos de citación y mención

El elemento <q> para citaciones cortas

El elemento <q> se emplea para citaciones cortas.

Los navegadores generalmente insertan las comillas correspondientes al texto.

Ejemplo:

<p>
 Dichas organizaciones han hecho eco del objetivo de Teletón que es: <q>La rehabilitación integral de niños, niñas y jóvenes con discapacidad motora.</q>
</p>

El elemento <blockquote> para citaciones extensas

El elemento <blockquote> se emplea para citar secciones de fuentes externas.

Los navegadores por lo general aplican una sangría a los elementos <blockquote>, es decir a su contenido.

Ejemplo:

<p>
 Esta es una cita del sitio web de Teletón:
</p>

<blockquote cite="http://www.teleton.cl/teleton/quienes-somos/historia/">
 Teletón es la obra más importante que se ha realizado en favor de los niños y jóvenes con discapacidad; no sólo por trabajar en su rehabilitación, sino por haber producido en el país un cambio cultural en pro de la dignidad de las personas con discapacidad y de sus derechos.
</blockquote>

El elemento <abbr> para las Abreviaciones

El elemento <abbr> se emplea para las abreviaciones o los acrónimos.

Al marcar las abreviaciones, le estaras brindando información útil a los navegadores, a los sistemas de traducción y a los motores de búsqueda.

Ejemplo:

<p>
 La <abbr title="Red Informatica Mundial, en español">WWW</abbr> se desarrollo entre marzo de 1989 y diciembre de 1990.
</p>

El elemento <address> para la información de contacto

El elemento <address> se emplea para la información de contacto (autor/propietario) de un documento o un articulo.

El elemento <address> por lo general se muestra en cursiva. La mayoría de los navegadores añadirán un salto de línea antes y después del elemento, es decir su contenido.

Ejemplo:

<address>
 Escrito por Max Riss.<br>
 Visitanos en: www.unsitioweb.com<br>
 Apartado postal 564, Disneyland, Florida, USA<br>
</address>

El elemento <cite> para el titulo de un trabajo o una obra

El elemento <cite> se emplea para colocar el titulo de un trabajo o una obra.

Los navegadores por lo general muestran los elementos <cite> en cursiva.

Ejemplo:

<p>
 <cite>El Grito</cite> de Edvard Munch. Pintado en 1893.
</p>

El elemento <bdo> para la reescritura bi-direccional

El elemento <bdo> se emplea para la reescritura bi-direccional de algún texto.

El elemento <bdo> se usa para cambiar la dirección u orientación en la que está escrito un texto.

Ejemplo:

<bdo dir="rtl">
 Este texto sera escrito o se mostrara de derecha a izquierda
</bdo>

---

Resumen de lo aprendido

Etiqueta	Descripción
<abbr>	Define una abreviación o acrónimo
<address>	Define la información de contacto del autor/propietario de un documento
<bdo>	Define texto con dirección
<blockquote>	Define un sección de texto citada de otra fuente
<cite>	Define el titulo de una obra o un trabajo
<q>	Define una citación corta y en linea

Formateo del texto en el lenguaje HTML

Formateo del texto

Este texto está en negrita

Este texto está en cursiva

Esto es un _subindice y esto es un ^superindice

---

Elementos de formateo

En el capitulo anterior, aprendiste sobre el atributo style.

HTML también tiene elementos especiales para el texto con una significancia especial.

HTML emplea elementos como <b> y <i> para dar formato al texto que se quiere presentar, por ejemplo en negrita o cursiva.

Los elementos de formateo se diseñaron para diferenciar el texto que es singular por alguna razón:

• <b> - Texto en negrita
• <strong> - Para un texto que es semánticamente importante
• <i> - Texto en cursiva
• <em> - Para un texto que es semánticamente importante
• <mark> - Marca o resalta el texto
• <small> - Empequeñece el texto
• <del> - Indica que el texto ha sido considerado como algo erróneo o inadecuado
• <ins> - Indica que el texto ha sido insertado o añadido
• <sub> - Hace del texto un Subíndice
• <sup> - Hace del texto un Superíndice

---

Los elementos <b> y <strong>

El elemento <b> se emplea para texto que debería visualizarse en negrita, que no tiene importancia extra alguna:

<b>
 Este texto esta en negrita
</b>

El elemento <strong> se emplea para texto de mayor importancia, es decir que es semánticamente “más” importante:

<strong>
 Este texto es de mayor importancia
</strong>

Los elementos <i> y <em>

El elemento <i> se emplea para texto que debería visualizarse en cursiva, que no tiene importancia extra alguna:

<i>
 Este texto esta en cursiva
</i>

El elemento <em> se emplea para distinguir o enfatizar texto que además es semánticamente importante:

<em>
 Este texto esta enfatizado
</em>

Nota: los navegadores muestran <strong> como muestran <b>, y muestran <em> como muestran <i>. Sin embargo, existe una diferencia en el significado de estas etiquetas: <b> e <i> hacen que el texto se muestre en negrita y en cursiva, pero <strong> y <em> implican que el texto es “importante”.

El elemento <small>

El elemento <small> se emplea para texto pequeño:

<h2>
 Formato <small>pequeño</small> en HTML
</h2>

El elemento <mark>

El elemento <mark> se emplea para texto que se desea marcar o resaltar:

<h2>
 Formato <mark>Resaltado</mark> en HTML
</h2>

El elemento <del>

El elemento <del> indica que el texto ha sido considerado como algo erróneo o inadecuado:

<p>
 Mi color favorito es <del>azul</del> rojo.
</p>

El elemento <ins>

El elemento <ins> indica que el texto ha sido insertado o añadido:

<p>
 Mi color <ins>favorito</ins> es el rojo.
</p>

El elemento <sub>

El elemento <sub> hace del texto un Subíndice:

<p>
 Este es un <sub>subíndice</sub>.
</p>

El elemento <sup>

El elemento <sup> hace del texto un Superíndice:

<p>
 Este es un <sup>superíndice</sup>.
</p>

---

Resumen de lo aprendido

Etiqueta	Descripción
<b>	Texto en negrita
<em>	Texto enfatizado o diferenciado
<i>	Texto en cursiva
<small>	Texto pequeño
<strong>	Texto importante
<sub>	Texto como subíndice
<sup>	Texto como superíndice
<ins>	Texto insertado o añadido
<del>	Texto errado o inadecuado, que probablemente se ha sustituido
<mark>	Texto marcado/resaltado

• Usa el atributo style para dar estilo a los elementos HTML
• Usa background-color para el color de fondo
• Usa color para los colores de texto
• Usa font-family para los tipos de fuente del texto
• Usa font-size para los tamaños de texto
• Usa text-align para la alineación del texto

Introduccion al estilo en HTML

Estilos

El atributo style

Dar estilo a un elemento HTML, puede hacerse con el atributo style.

El atributo style emplea la sintaxis siguiente:

<nombredeetiqueta style="propiedad:valor;">

La propiedad es una propiedad CSS. El valor es un valor CSS.

Aprenderás más sobre CSS luego, en esta guía.

Color de fondo

Lo propiedad background-color define el color de fondo para un elemento HTML.

Este ejemplo establece el color de fondo de una pagina como azul pálido:

<body style="background-color:powderblue;">
 <h1>Este es un encabezado</h1>

 <p>Este es un párrafo.</p>
</body>

Color de texto

La propiedad color define el color de texto para un elemento HTML:

<h1 style="color:blue;">Este es un encabezado</h1>

<p style="color:red;">Este es un párrafo.</p>

Tipos de letra

La propiedad font-family define el tipo de letra que se usara para un elemento HTML:

<h1 style="font-family:verdana;">Este es un encabezado</h1>

<p style="font-family:courier;">Este es un párrafo.</p>

Tamaño de texto

La propiedad Font-size define el tamaño de texto para un elemento HTML:

<h1 style="font-size:300%;">Este es un encabezado</h1>

<p style="font-size:160%;">Este es un párrafo.</p>

Alineación de texto

La propiedad text-align define la alineación horizontal del texto para un elemento HTML:

<h1 style="text-align:center;">Encabezado Centrado</h1>

<p style="text-align:center;">Párrafo centrado.</p>

El atributo HTML ' lang '

El atributo lang

El lenguaje del documento puede ser declarado en la etiqueta <html>.

El lenguaje se declara con el atributo lang.

El declarar un lenguaje es algo importante para las aplicaciones de accesibilidad (los lectores de pantalla) y los motores de búsqueda:

<!DOCTYPE html>
<html lang="en-US">

 <body>

  ...

 </body>

</html>

Las primeras dos letras especifican el lenguaje (en : english_ingles). Si hay diferentes dialectos, se emplean dos letras mas (US : United States_Estados Unidos).

---

Resumen de lo aprendido

• Todos los elementos HTML pueden tener atributos
• El atributo title provee información suplementaria en forma de “descripción emergente”
• El atributo href provee dirección a los enlaces
• Los atributos width y height proveen información sobre el tamaño de las imágenes
• El atributo alt provee texto para los lectores de pantalla

Aprenderás más sobre las etiquetas y los atributos HTML en las siguientes secciones de esta guía.

Etiqueta	Descripción
<html>	Define la raíz de un documento HTML
<body>	Define el cuerpo del documento
<head>	Un contenedor para todos los elementos de cabecera (titulo, archivos de procesamiento por lotes, estilos, información extra, y mas)
<h1> a <h6>	Definen los encabezados HTML
<hr>	Define un cambio temático en el contenido

Etiqueta	Descripción
<p>	Define un párrafo
<br>	Inserta un único salto de linea
<pre>	Define un texto preformateado

Líneas horizontales HTML

Líneas horizontales

La etiqueta <hr> define un cambio temático dentro de una página HTML, y es más frecuentemente mostrado como una línea horizontal.

El elemento <hr> se usa para separar el contenido (o definir un cambio) dentro de una página HTML:

<h1>Este es el encabezado 1</h1>

<p>Esto es un poco de texto.</p>
<hr>
<h2>Este es el encabezado 2</h2>

<p>Esto es un poco de otro texto.</p>
<hr>

Enlaces HTML

Enlaces

Los enlaces HTML se definen con la etiqueta <a>:

<a href="https://www.digamos.com">
 Este es un enlace
</a>

Aprenderás mas sobre los enlaces y la etiqueta <a> posteriormente en esta guía..

---

El atributo href

El destino hacia donde nos envía el enlace se especifica con el atributo href.

<a href="https://www.ejemplo.com">
 Este es un enlace
</a>

Imágenes en HTML

Imágenes

Las imágenes HTML se definen con la etiqueta <img>.

El archivo de origen (src), el texto alternativo (alt), el ancho, el alto se pasan con atributos.

Ejemplo:

<img src="brillantemente.jpg" alt="creativo.com" width="104" height="142">

---

El atributo src

Especifica la URL de una imagen.

Los atributos para el tamaño

• El atributo width

  Especifica el ancho de una imagen.

  El tamaño de la imagen se especifica en pixeles: width=“104” significa que la imagen tendrá un ancho de 104 pixeles de pantalla.

• El atributo height

  Especifica el alto de una imagen.

  El tamaño de la imagen se especifica en pixeles: height=“142” significa que la imagen tendrá un ancho de 142 pixeles de pantalla.

El atributo alt

El atributo alt específica un texto alternativo que se usara cuando una imagen no puede ser mostrada por una u otra razón.

El valor del atributo puede ser leído por los lectores de pantalla. De este modo, alguien que “escuche” la pagina web, es decir una persona ciega, puede “oír” el elemento.

<img src="luna.jpg" alt="imagen de una luna" width="104" height="142">

---

Aprenderás más sobre imágenes y la etiqueta <img> posteriormente en esta guía.

Los elementos HTML <br> y <pre>

El elemento <br> y el elemento <pre>

---

El problema del poema

Este poema:

<p>
  Si tus ojos fueran luceros.

  Si tus labios fueran el mar.

  No habría paisaje más hermoso.

  Yo te quisiera admirar.
</p>

Se mostrara en el navegador como se muestra aca abajo... En una sola línea.

Si tus ojos fueran luceros. Si tus labios fueran el mar. No habría paisaje más hermoso. Yo te quisiera admirar.

---

El elemento <br>

El elemento <br> define un salto de línea.

Usa <br> si quieres un salto de línea (una nueva línea) que NO empiece un nuevo párrafo:

Ejemplo:

<p>
Si tus ojos fueran luceros.<br>Si tus labios fueran el mar.<br>No habría paisaje más hermoso.<br>Yo te quisiera admirar.
</p>

Se mostrara en el navegador como se muestra aca abajo.

Si tus ojos fueran luceros.
Si tus labios fueran el mar.
No habría paisaje más hermoso.
Yo te quisiera admirar.

La etiqueta <br> es una etiqueta vacia, lo que significa que no tiene etiqueta de final.

El elemento <pre>

El elemento <pre> define texto preformateado.

El texto dentro un elemento <pre> se muestra con un tipo de letra de ancho fijo (tipo de letra monoespaciado, usualmente Courier), y preserva los espacios y los saltos de línea.

Ejemplo:

<pre>
  Si tus ojos fueran luceros.

  Si tus labios fueran el mar.

  No habría paisaje más hermoso.

  Yo te quisiera admirar.
</pre>

Se mostrara en el navegador como se muestra aca abajo.

  Si tus ojos fueran luceros.

  Si tus labios fueran el mar.

  No habría paisaje más hermoso.

  Yo te quisiera admirar.

Párrafos HTML

Parrafos

El elemento <p> define un párrafo.

Los párrafos HTML se definen con la etiqueta <p>:

<p>Este es un párrafo.</p>
<p>Este es otro párrafo.</p>

Nota: los navegadores automáticamente añaden algunos espacios en blanco (un margen) antes y después de un párrafo.

---

Cuando hay que presentar un texto con formato especial, existen dos elementos que, dependendiendo del caso, te seran utiles... Acontinuacion, en la siguiente pagina.

---

El atributo title

Aca abajo, se le añade un atributo title al elemento <p>. El valor del atributo title se mostrara como una descripción emergente cuando el puntero pasa sobre el párrafo:

<p title="Soy una descripcion emergente">
Este es un parrafo.
</p>

Encabezados HTML

Encabezados

Los encabezados son importantes dentro de los documentos HTML.

Los encabezados HTML se definen con las etiquetas del rango <h1> hasta <h6>.

Con <h1> se define el encabezado más importante. Con <h6> se define el encabezado menos importante:

<!DOCTYPE html>
<html>

 <body>
  <h1>Este es el encabezado 1</h1>
  <h2>Este es el encabezado 2</h2>
  <h3>Este es el encabezado 3</h3>
  <h4>Este es el encabezado 4</h4>
  <h5>Este es el encabezado 5</h5>
  <h6>Este es el encabezado 6</h6>
 </body>

</html>

Nota: los navegadores añaden automáticamente algunos espacios en blanco (un margen) antes y después de un encabezado.

---

Los encabezados son importantes

Los motores de búsqueda usan los encabezados para indexar la estructura y el contenido de tus páginas web.

Los usuarios ojean tus páginas mediante sus encabezados. Es importante usar encabezados que indiquen la estructura del documento.

Los encabezados <h1> deberían ser usados como encabezados principales, seguidos por los encabezados <h2>, luego los menos importantes <h3>, y así sucesivamente.

Nota: usa los encabezados HTML únicamente para esto. No uses los encabezados para hacer el texto GRANDE o convertirlo a negrita.

Los atributos HTML

Los atributos brindan información suplementaria sobre los elementos HTML.

Acá abajo hay una lista alfabética de algunos atributos frecuentemente usados en HTML:

Atributo	Descripción
alt	Especifica un texto alternativo para una imagen, cuando la imagen no puede ser mostrada
disabled	Especifica que el elemento de entrada debe estar deshabilitado
href	Especifica la URL (la dirección web) de un enlace
id	Especifica un id único para el elemento
src	Especifica la URL (la dirección web) de una imagen
style	Especifica un estilo CSS en linea para el elemento
title	Especifica información extra sobre un elemento (la cual se muestra como una descripción emergente)

---

• Todos los elementos HTML pueden tener atributos
• Los atributos brindan información suplementaria sobre un elemento
• Los atributos siempre se especifican en la etiqueta de inicio
• Los atributos usualmente se colocan de la siguiente manera: nombre=“valor”

---

Te sugerimos que coloques entre comillas los valores de atributo

El estándar HTML5 no requiere que los valores de atributo estén entre comillas.

El atributo href, usado anteriormente, puede ser escrito como:

<a href=http://www.sitioficticio.com>

W3C recomienda que se coloquen las comillas, y lo demanda en tipos de documento más estrictos como XHTML.

Algunas veces es necesario usar comillas. Este ejemplo no mostrara correctamente el atributo title, porque el valor del atributo contiene un espacio:

<p title=Sobre Unicef>

Usar comillas es lo más común. Omitirlas puede producir errores.

Comillas simples o dobles?

Usar comillas dobles alrededor de los valores de atributo es lo más común en HTML, sin embargo las comillas simples pueden usarse también.

En algunos casos, cuando el valor mismo del atributo contiene comillas dobles, es necesario usar comillas simples:

<p title='Juan "La Escopeta" Ruiz'>

O viceversa:

<p title=" Juan 'La Escopeta' Ruiz">

Te sugiero que uses atributos en letra minuscula

El estándar HTML5 no requiere que los nombres de atributo estén en letra minúscula.

El atributo title puede ser escrito con letra minúscula y/o mayúscula como Title o TITLE.

W3C recomienda el uso de letra minúscula en HTML, y lo demanda en tipos de documento más estrictos como XHTML.

Cosas a tener en cuenta al usar el lenguaje HTML

Cosas a tener en cuenta

No olvides la etiqueta de final

La mayoría de los navegadores mostrara el contenido de los elementos HTML correctamente aun si olvidas la etiqueta de final:

<html>

 <body>
  <p>Este es un párrafo.
  <p>Este es otro párrafo.
 </body>

</html>

El ejemplo de arriba se muestra bien en la mayoría de los navegadores, pero no te confíes en ello.

Nota: omitir la etiqueta de final puede producir resultados o errores inesperados.

Los elementos HTML vacios

Los elementos HTML sin contenido se llaman elementos vacios.

<br> es un elemento vacio sin una etiqueta de cierre (la etiqueta <br> define que se desea un salto de linea).

Los elementos vacios pueden ser “cerrados” en la etiqueta de apertura como se muestra a continuación: <br/>.

HTML5 no requiere que los elementos vacios sean cerrados. Pero si quieres ser más estricto, o si necesitas hacer tu documento legible por analizadores XML, debes cerrar todos los elementos HTML apropiadamente.

Usa etiquetas en letra minúscula

No importa si las etiquetas HTML se escriben con mayúsculas o minúsculas: <P> significa lo mismo que <p>.

El estándar HTML5 no requiere que las etiquetas estén con letra minúscula, pero W3C recomienda que se use letra minúscula en HTML, y lo demanda para los tipos de documento más estrictos como XHTML.

Elementos HTML anidados

Los elementos HTML pueden ser anidados (los elementos pueden contener elementos).

Todos los documentos HTML consisten de elementos HTML anidados.

Este ejemplo contiene cuatro elementos anidados:

<!DOCTYPE html>
<html>

 <body>
  <h1>Mi Primer Encabezado</h1>
  <p>Mi primer párrafo.</p>
 </body>

</html>

Explicando el ejemplo:

1. El elemento <html> define al documento entero.

   Tiene una etiqueta de inicio <html> y una etiqueta de final </html>.

   El contenido del elemento es otro elemento HTML (el elemento <body>).

   <html>
   
    <body>
     <h1>Mi Primer Encabezado</h1>
     <p>Mi primer párrafo.</p>
    </body>
   
   </html>
   




2. El elemento <body> define el cuerpo del documento.

   Tiene una etiqueta de inicio <body> y una etiqueta de final </body>.

   El contenido del elemento es, otros dos elementos HTML (<h1> y <p>).

   <body>
    <h1>Mi Primer Encabezado</h1>
    <p>Mi primer párrafo.</p>
   </body>
   




3. El elemento <h1> define a un encabezado.

   Tiene una etiqueta de inicio <h1> y una etiqueta de final </h1>.

   El contenido del elemento es: Mi Primer Encabezado.

   <h1>Mi Primer Encabezado</h1>
   




4. El elemento <p> define a un párrafo.

   Tiene una etiqueta de inicio <p> y una etiqueta de final </p>.

   El contenido del elemento es: Mi primer párrafo.

   <p>Mi primer párrafo.</p>
   

---

Visualizacion

No puedes tener seguridad de cómo se visualizara la pagina.

Pantallas grandes o pequeñas, y ventanas con tamaña modificado crearan diferentes resultados.

Con HTML, no puedes cambiar el resultado añadiendo espacios extras o líneas extras al código HTML.

El navegador removerá cualquier espacio y línea extra cuando despliegue o muestra la pagina:

<p>
Este parrafo
contiene varias lineas
en el codigo fuente,
pero el navegador 
lo ignora.
</p>

<p>
Este parrafo
contiene         varios espacios
en el codigo         fuente,
pero el        navegador 
lo ignora.
</p>

Te mostraremos la solucion mas adelante. Mientras tanto se cuidadoso al escribir tu codigo HTML y evitaras muchos dolores de cabeza. Puedes tambien ir visualizando tu pagina pero no es obligatorio pues adelante resolveremos estos posibles errores de visualizacion

Bonus - HTML

Bonus

Como ver el codigo fuente HTML de la pagina

Alguna vez has visto una página web y te has preguntado “¡Eh!, ¿Como hicieron eso?”.

Para descubrirlo, has click derecho en la pagina y elige “Ver código fuente de pagina” (en Chrome) o “Ver código fuente” (en IE), o algo similar en otro navegador. Esto abrirá un ventana que contendrá el código HTML de la página.

Desde un dispositivo movil

Tenes que hacerlo directamente en la barra de direcciones del navegador movil de internet, escribiendo el nombre del esquema que nos permite ver, en la mayoria de exploradores, el codigo de una pagina web: "view-source" (ver-fuente). Colocalo, seguido por dos puntos (:), antes de la direccion que quieras curiosear tecnicamente hablando. Como dato temprano; un esquema no es un protocolo, aunque a veces el duo tenga en comun el nombre o en otras palabras, uno implique al otro, como por ejemplo el esquema http y su medio de interaccion, el protocolo HTTP. Temas que veremos luego.

Para comenzar a usar HTML

Para comenzar

La declaracion <!DOCTYPE>

La declaracion <!DOCTYPE> representa el tipo de archivo, y ayuda al navegador a mostrar correctamente las paginas web.

Solo debe aparecer una vez, al principio de la página (antes que cualquier etiqueta HTML).

No importa si la declaración se escribe con mayúsculas o minúsculas.

La declaración <!DOCTYPE> para HTML es:

<!DOCTYPE html>

---

No te preocupes si en estos ejemplos se usan etiquetas que no has aprendido.

Aprenderás sobre ellas en los capítulos siguientes.

---

Los documentos HTML

Todos los documentos HTML deben empezar con una declaración del tipo de documento: <!DOCTYPE html>.

El documento HTLM en si comienza con <html> y termina con </html>.

La parte visible del documento HTML está entre <body> y </body>.

Ejemplo:

<!DOCTYPE html>
<html>

<body>
<h1>Mi Primer Encabezado</h1>
<p>Mi primer parrafo.</p>
</body>

</html>

---

El elemento <head>

El elemento <head> no tiene relación alguna con los encabezados HTML.

El elemento <head> es un contenedor de metadatos (información extra). Los metadatos HTML son información sobre el documento HTML. Los metadatos no se muestran.

El elemento <head> se coloca entre la etiqueta <html> y la etiqueta <body>:

<!DOCTYPE html>
<html>

<head>
<title>Mi Primera Pagina Con HTML</title>
<meta charset="UTF-8">
</head>

<body>
.
.
.

Nota: los metadatos típicamente definen el titulo del documento, el conjunto de caracteres, los estilos, enlaces, archivos de procesamiento por lotes, y otra información extra.

Entonces, cómo funciona HTML?

---

Etiquetas HTML

Las etiquetas HTML son los nombres de los elementos y están entre corchetes angulares:

<nombredeetiqueta>el contenido va aqui...</nombredeetiqueta>

• Las etiquetas HTML normalmente vienen en pares, como <p> and </p>
• La primera etiqueta de un par es la etiqueta de inicio, la segunda etiqueta es la etiqueta de final
• La etiqueta de final se escribe como la etiqueta de inicio, pero con una una barra diagonal insertada antes del nombre de la etiqueta.

Consejo: a la etiqueta de inicio también se le llama etiqueta de apertura, y a la de final etiquete de cierre.

Los elementos HTML

Un element HTML generalmente consiste de una etiqueta de inicio y una etiqueta de final, con el contenido colocado en medio de ellas:

<nombredeetiqueta>El contenido va aquí...</nombredeetiqueta>

El elemento HTML es todo lo anterior, desde la etiqueta de inicio hasta la etiqueta de final inclusive:

<p>Mi primer párrafo.</p>

Etiqueta de inicio	Contenido del elemento	Etiqueta de final
<h1>	Mi Primer Encabezado	</h1>
<p>	Mi primer parrafo.	</p>
<br>

A los elementos HTML que no tienen un contenido se les llama “elementos vacios”. Los elementos vacios no tienen una etiqueta de final, tal como el elemento <br> (el cual indica que se desea un salto de línea).

La estructura de una pagina HTML

Abajo hay una visualización de la estructura de una página HTML:

<html>

<head>

<title>titulo de pagina</title>

</head>

<body>

<h1>este es un encabezado</h1>

<p>este es un párrafo.</p>

<p>este es otro párrafo.</p>

</body>

</html>

Observacion: solo el contenido dentro de la sección <body> se muestra en un navegador. (las áreas celestes en el ejemplo de arriba)

¿Qué programas usaré para trabajar con HTML?

Que programas usaré?

Editor de texto

Escribe HTML con Notepad o Textedit

Las paginas web pueden ser creadas y modificadas con editores profesionales de HTML. Sin embargo, para aprender HTML te recomiendo un simple editor de texto como notepad (PC) o textedit (Mac).

Creo que usar un editor de texto simple es un buen modo de aprender HTML.

Sigue los cuatro pasos de abajo para crear tu primer pagina web con notepad o textedit.

Paso 1:

Abre Notepad (PC)

Windows 8 o posteriores:

Abre la pantalla de inicio (el símbolo de ventana en la esquina inferior izquierda de tu pantalla). Teclea bloc de notas.

Windows 7 o anteriores:

Abre inicio > todos los programas > accesorios > bloc de notas

Abre Textedit (Mac)

Abre buscador > aplicaciones > textedit

También debes cambiar algunas de las preferencias para que la aplicación guarde los documentos correctamente.

En Preferencias > formato > elige “texto plano”. Luego bajo “abrir y guardar”, chequea la caja que dice “ignorar los comandos para texto enriquecido en documentos HTML”.

Y luego crea un nuevo documento donde colocar el código.

Paso 2:

Escribe algo de HTML

Escribe o copia algo de html al notepad.

<!DOCTYPE html>
<html>

<body>
<h1>Mi Primer Encabezado</h1>
<p>Mi primer parrafo.</p>
</body>

</html>

Paso 3:

Guarda la pagina html

Guarda el archivo en tu computadora. Selecciona en el menú archivo > guardar como

Nombra el archivo “índice.htm” y configura la codificación en UTF-8 (la cual es la codificación preferida para los archivos html).

Puedes usar ya sea .htm o .html como extensión de archivo. No hay diferencia, depende de ti.

Paso 4:

Ve la pagina web en tu navegador

Abre el archivo html guardado, en tu navegador favorito (haz doble click sobre el archivo, o click derecho – y elige “abrir con”).

El resultado se verá bastante como este:

Navegador web

El propósito de un navegador web (chrome, IE, FireFox, Safari) es leer los archivos HTML y mostrarlos.

El navegador no muestra las etiquetas HTML, pero si las usa para determinar cómo mostrar el documento:

Un simple documento HTML

<!DOCTYPE html>
<html>

<head>
<title>Titulo de la Pagina</title>
</head>

<body>
<h1>Este es un Encabezado</h1>
<p>Este es un parrafo.</p>
</body>

</html>

Explicando el ejemplo

1. La declaración <!DOCTYPE html> define que este documento será HTML5
2. El elemento <html> es el elemento raíz de una página HTML
3. El elemento <head> contiene información EXTRA sobre el documento
4. El elemento <title> especifica un titulo para el documento/archivo
5. El elemento <body> contiene el contenido de la pagina que será visible
6. El elemento <h1> define un encabezado mayor o más grande
7. El elemento <p> define un párrafo

¿Por qué debo aprender lenguaje HTML?

Por qué debo aprender este lenguaje

Primero

Con HTML puedes crear tu propio sitio web.

Segundo

Esta guía te enseña todo lo concerniente a HTML.
HTML es fácil de aprender – lo disfrutaras.

---

Hay ejemplos en cada una de los secciones

Esta guía de HTML contendrá cientos de ejemplos con HTML.
Con un editor como “Notepad” o similares, puedes editar el código HTML, y crear un archivo para lanzarlo al navegador web y asi ver el resultado.

Ejemplo:

<!DOCTYPE html>
<html>

<head>
<title>Titulo de la Pagina</title>
</head>

<body>
<h1>Este es un Encabezado</h1>
<p>Este es un parrafo.</p>
</body>

</html>

Copia y guarda este codigo, luego abrelo en tu navegador para ver como funciona

¿Qué hay tras una pagina web? entre otras cosas, HTML

Lenguaje de Marcado para el Hyper Texto - HTML

---

HTML en breve

QUE ES HTML?

HTML es el lenguaje estándar de marcado para crear páginas Web.

1. HTML significa Lenguaje de Marcado de HiperTexto
2. HTML describe la estructura de las páginas web usando marcas
3. Los elementos de HTML son los bloques de construcción de las paginas HTML
4. Los elementos HTML se representan con etiquetas
5. Las etiquetas HTML designan partes del contenido como se muestra a continuación:
   • “encabezado”,
   • “parrafo”,
   • “tabla”, etcétera.
6. Los navegadores web no muestran las etiquetas HTML, pero si las usan para organizar el contenido de la pagina.

---

Versiones del HTML

Desde los primeros días de la web hasta hoy día, han habido ya varias versiones de HTML:

Version	Año
HTML	1991
HTML 2.0	1995
HTML 3.2	1997
HTML 4.01	1999
XHTML	2000
HTML 5	2014

Bienvenido

Bienvenido

a La Sede digital en esta era histórica, "La Era de la Información". Una PrograNación para todos, una Web de EQUIDAD, o verdaderamente mundial. Recursos gratuitos para aprender los lenguajes informáticos, y contenidos relevantes: Tendencias, noticias... todo para todos

y esta vez en español