DEFINICIÓN DE HTML

HTML es un lenguaje de marcado que se utiliza para el desarrollo de páginas de Internet. Se trata de la sigla que

corresponde a HyperText Markup Language, es decir, Lenguaje de Marcas de Hipertexto, que podría ser traducido

como Lenguaje de Formato de Documentos para Hipertexto.

Se trata de un formato abierto que surgió a partir de las etiquetas SGML (Standard Generalized Markup Language).

Concepto traducido generalmente como «Estándar de Lenguaje de Marcado Generalizado» y que se entiende como un

sistema que permite ordenar y etiquetar diversos documentos dentro de una lista. Este lenguaje es el que se utiliza para

especificar los nombres de las etiquetas que se utilizarán al ordenar, no existen reglas para dicha organización, por eso

se dice que es un sistema de formato abierto.

EL HTML se encarga de desarrollar una descripción sobre los contenidos que aparecen como textos y sobre su

estructura, complementando dicho texto con diversos objetos (como fotografías, animaciones, etc).

Es un lenguaje muy simple y general que sirve para definir otros lenguajes que tienen que ver con el formato de los

documentos. El texto en él se crea a partir de etiquetas, también llamadas tags, que permiten interconectar diversos

conceptos y formatos.

Para la escritura de este lenguaje, se crean etiquetas que aparecen especificadas a través de corchetes o paréntesis

angulares: < y >. Entre sus componentes, los elementos dan forma a la estructura esencial del lenguaje, ya que tienen

dos propiedades (el contenido en sí mismo y sus atributos).

Por otra parte, cabe destacar que el HTML permite ciertos códigos que se conocen como scripts, los cuales

brindan instrucciones específicas a los navegadores que se encargan de procesar el lenguaje. Entre los scripts que

pueden agregarse, los más conocidos y utilizados son JavaScript y PHP.

El marcado estructural es el que estipula la finalidad del texto, aunque no define cómo se verá el elemento. El marcado

presentacional, por su parte, es el que se encarga de señalar cómo se verá el texto más allá de su función.

Para conocer el código HTML que utiliza una página web, hay que seleccionar Ver código fuente en nuestro navegador

(como Internet Explorer o Mozilla Firefox). Al elegir esta opción, se abrirá el editor de texto con el código HTML de la

página que se está visualizando.

Breve historia del HTML

Este lenguaje fue desarrollado por la Organización Europea de Investigación Nuclear (CERN) en el año 1945 con la

finalidad de desarrollar un sistema de almacenamiento donde las cosas no se perdieran, que pudieran ser conectadas a

través de hipervínculos. Primeramente crearon un dispositivo llamado «memex», el cual era considerado como un

suplemento para la memoria.

Posteriormente, Douglas Engelbart, diseñó un entorno de trabajo por computadora que recibiría el nombre de oNLine

System que poseía un catálogo para facilitar la tarea de búsqueda dentro de un mismo organismo.

Recién en 1965, Ted Nelson acuñó el término hipervínculo, ideando una estructura que se encontraba conectada de

forma electrónica y que más tarde permitiría la creación de la World Wide Web (1989), un sistema de hipertexto a

través del cual era posible compartir una variada información sirviéndose de Internet (servía para la comunicación entre

investigadores nucleares que formaran parte del CERN).

El norteamericano Tim Berners-Lee fue el primero en proponer una descripción de HTML en un documento que publicó

en 1991. Allí describía veintidós componentes que suponen el diseño más básico y simple del HTML.

El tipo de codificación que se utilizó para el desarrollo de este sistema de hipervínculos debía ser comprendido, tanto

por ordenadores tontos como por mega-estaciones, por eso fue necesario crear uno absolutamente simples, tanto en lo

que respectaba al lenguaje de intercambio (HTML), como el que hacía referencia al protocolo de red (HTTP).

Al día de hoy existen los Editores Web que permiten que los diseñadores, a través de herramientas gráficas que reciben

el nombre de WYSIWYG puedan crear páginas web sin conocer el código html, este se crea de forma automatizada,

dándole estructura a la web y permitiendo que sea más allá del ordenador donde es creada. Entre los recursos que

pueden enlazarse al código HTML se encuentran fotografías, vídeos, archivos de otras webs o incluso de la misma y todo

tipo de contenido que se encuentre subido a la red.

En este articulo os voy a explicar que son y como usar las listas ordenadas, las desordenadas y las
de definiciones en HTML. Las listas se utilizan para enumerar elementos y nos pueden servir para muchas cosas, una de
las mas útiles cuando empecemos a usar CSS sera la de hacer menús con ellas, pero eso lo explicare cuando haga el
curso de CSS. De momento os voy a explicar estos tres tipos de listas y como usarlos.
Las listas desordenadas se caracterizan precisamente por lo que su propio nombre indica, no tienes una numeración y
no tienen un orden establecido. Os pongo un ejemplo de una lista desordenada:

<ul>

<li>Elemento 1 de la lista</li>

<li>Elemento 2 de la lista</li>

<li>Elemento 3 de la lista</li>
</ul>Para hacer una lista desordenada se usa la etiqueta “ul” para iniciarla, luego ponemos cada elemento de la lista con
la etiqueta “li”. Como podéis ver hay que iniciar dichas etiquetas y posteriormente cerrarlas. Al ejecutar el ejemplo
anterior veremos lo siguiente en nuestro navegador:

Si os fijáis añade un circulo antes de cada elemento. Después de cada elemento de la lista hace también un salto de
linea automático para mostrar el siguiente elemento. Cuando lo ejecutéis veréis también que añade antes de cada
elemento una tabulacion o espacio en blanco. El circulo se puede cambiar poniéndole un atributo que se llama “type”
con tres valores posibles que son:

 circle – nos mostrara un circulo vacío antes de cada elemento

 disc – mostrara un circulo relleno antes de cada elemento
 square – mostrara un cuadrado antes de cada elemento
Las listas también se pueden anidar, es decir, poner listas con varios niveles. Esto se hace abriendo una nueva lista
dentro de un “li”, hay que tener cuidado con donde cerramos las etiquetas para hacer una lista anidada. Os pongo un
ejemplo de una lista anidad y cambio también el “type” a “square” y vemos las dos cosas juntas:

<ul type="square">

<li>Elemento 1 de la lista

<ul>

<li>Elemento 1.1 de la lista</li>

<li>Elemento 1.2 de la lista</li>

</ul>

</li>

<li>Elemento 2 de la lista</li>

<li>Elemento 3 de la lista</li>

</ul>

Fijaros bien que en el primer “li”, sin cerrarlo, iniciamos otra lista con “ul” y cerramos el “li” anterior después de cerrar el
“ul” del subnivel, puede parecer difícil pero no lo es, solo tenéis que mirar detenidamente el código HTML y lo veréis.
Podemos poner tantos niveles y subniveles como queramos siempre y cuando vigilemos bien las aperturas y los cierres
de las etiquetas. Esto lo explicare mejor en el video que teneis al final del articulo y lo vereis mas fácil.
Las siguiente listas que vamos a ver son las listas ordenadas. En las ordenadas los elemento van precedidos de una
numeracion, es la unica diferencia. Para hacer una lista ordenada se hace de la siguiente forma:

<ol>
 <li>Elemento 1 de la lista

<ol>

<li>Elemento 1.1 de la lista</li>

<li>Elemento 1.2 de la lista</li>

</ol>

</li>

<li>Elemento 2 de la lista</li>

<li>Elemento 3 de la lista</li>

</ol>

Esta lista que os he puesto es igual que la anterior pero ordenada, solo habría que cambiar la etiqueta “ul” por “ol” y ya
esta. Este ejemplo también tiene una lista anidada como el anterior. Podemos definir el atributo “type” a la lista para
que nos muestre diferentes opciones antes de cada elemento. Los posibles valores del atributo “type” para las listas
ordenadas son:

 1 – nos mostrara numero antes de cada elemento

 a – nos mostrara letras antes de cada elemento
 A – nos mostrara letras mayúsculas antes de cada elemento
 i – nos mostrara numero romanos antes de cada elemento
 I – nos mostrara numero romanos en mayúsculas antes de cada elemento
Esto lo veréis mejor en el vídeo ya que allí probare todos los atributos para que veáis los resultados.

El ultimo tipo de listas que vamos a usar son las listas de definiciones, que aunque no se usan demasiado no esta mal
conocerlas, sirven para enumerar elementos y añadir una descripción de cada uno de ellos. La sintaxis de las listas de
definiciones es así:

<dl>

<dt>Ferrari</dt>

<dd>Es una marca de coches italiana</dd>

<dt>Audi</dt>

<dd>Es una marca de coches alemana</dd>

</dl>

Iniciamos la lista de definiciones con la etiqueta “dl”, luego enumeramos cada elemento con “dt” y la descripción
correspondiente al elemento con “dd”. Como en las anteriores listas hay que tener cuidado con el cierre de las
etiquetas.

ETIQUETAS HTML BÁSICAS: IMÁGENES

Continuamos viendo etiquetas y atributos básicos para la creación de páginas webs. No entramos a describir una a una
todas las etiquetas y atributos de que HTML dispone. Simplemente explicamos las que han venido siendo más utilizadas.
Tener en cuenta que algunas etiquetas o atributos están obsoletas (deprecated), aunque conviene conocerlas por la
difusión que tuvieron.

Incluir imágenes en una página web es muy sencillo, simplemente debemos tener en cuenta que las imágenes tienen
que tener los formatos GIF, JPG o PNG. Las imágenes dentro de una página web se incluyen utilizando la etiqueta <img>,
que no tiene una etiqueta correspondiente de cierre. Ejemplo:

<img src="http://www.aprenderaprogramar.com/images/logo.png" alt="Logotipo APR2">

La etiqueta img dispone de estos atributos, algunos obligatorios, otros opcionales y algunos que ya no se recomienda usar
(deprecated):

ATRIBUTO USO OBSERVACIONES

Este atributo es obligatorio e indica el nombre del archivo de

Obligatorio. Si no se incluye no se
src imagen (entre comillas) o la URL desde la que se va a obtener la
mostrará imagen alguna.
imagen.

Permite controlar la alineación de una imagen con respecto a una

línea de texto adyacente o a otras imágenes en esa línea. Los Atributo obsoleto (deprecated).
align
valores posibles son los ya conocidos left, right, middle, top, Sustituir por CSS.
bottom.

Atributo requerido, se
Entre comillas podremos escribir un texto que se mostrará si la
recomienda incluirlo aunque si
alt imagen no llega a cargar, mientras se carga o, cuando visualizando
no se hace la imagen se
ya la imagen, pasamos el ratón por encima.
mostrará.

Este atributo es opcional pero podemos ponerlo para especificar al

Opcional. Indicar valor en pixeles.
navegador que muestre la imagen con un tamaño específico.
width También se puede indicar con
Significa “ancho de la imagen” que vamos a representar. Si no se
CSS.
escribe, se carga la imagen con el tamaño original.

Opcional. Indicar valor en pixeles.

Al igual que el atributo width, es opcional. Este atributo indica el
height También se puede indicar con
alto de la imagen.
CSS.

Con border especificamos el ancho del borde que rodea la imagen. Atributo obsoleto (deprecated).
border
Si se indica 0 equivale a “sin borde”. Sustituir por CSS.