2.5. ELEMENTOS BÁSICOS: TEXTO, VÍNCULOS, LISTAS, TABLAS, OBJETOS, IMÁGENES Y APLICACIONES.

El HTML (HipertText Markup Language) ó Lenguaje de enlaces hipertexto es un sistema que se encarga de definir tipos de documentos estructurados y lenguajes de marcas para representar esos mismos documentos. El término HTML se suele referir a ambas cosas, tanto al tipo de documento como al lenguaje de marcas.

Como cualquier página web está soportada por un archivo de texto, se pueden elaborar, editar o modificar directamente con el bloc de notas, aunque existen programas editores profesionales de páginas web como Adobe Dreanweaver CS5 y programas gratuitos de edición básica como Freelabs, que permiten editarlas con algunas funciones automatizadas a través de botones y menús.

A continuación se presenta una breve descripción de HTML 5, si usted desea conocer más a detalle puede visitar las múltiples páginas en el internet o consultar la guía oficial en w3c.

Sintaxis

Caracteres:

Cualquier cadena de caracteres imprimibles que no represente un marcado se representa literalmente, aunque los espacios y tabuladores se reducen a un solo carácter cuando no están dentro de un bloque preformateado <pre>.

Marcadores, marcas o etiquetas (tags):

Los marcadores delimitan elementos de un documento como cabeceras, párrafos, etc. La mayoría de los marcadores constan de una marca inicial < …> , que da el nombre y atributos del elemento, seguida del contenido ó secuencia de caracteres y una marca final </…>.
Las marcas iniciales se escriben entre los símbolos ‘<‘ y ‘>‘ (menor y mayor) y las finales entre ‘</‘ y ‘>‘ (menor, barra y mayor). Por ejemplo, <h1>Hola Mundo</h1>, indica que ‘Hola Mundo’ es una cabecera de nivel uno.
Algunos elementos sólo tienen una marca inicial (por ejemplo el tag <hr> que representa una línea horizontal y <br> inserta un salto de línea donde se coloque. Puede colocar tantas como desee y se insertará un salto de línea por cada una de ellas. ).

Nombres de etiquetas

Los nombres consisten en una letra seguida de letras, dígitos, puntos o guiones. Los ejemplos <h1> y <hr> anteriores son ejemplos de nombres de etiquetas. La longitud de un nombre esta limitada a 72 caracteres en la definición del HTML. Los nombres de elementos y atributos no distinguen entre mayúsculas y minúsculas, pero los nombres de entidades (la representación alternativa de los caracteres) sí.
En las marcas, el nombre del elemento debe comenzar inmediatamente después del <.

Atributos:

Cuando una marca inicial admite atributos, éstos se escriben a continuación del nombre del elemento. Generalmente los atributos tienen la forma nombre, signo igual, valor del atributo aunque en algunos casos basta con el nombre del atributo. Se pueden poner espacios en blanco antes y después del signo igual.

El valor de un atributo puede ser una cadena de caracteres entre comillas (simples o dobles) que no contenga el símbolo de fin de marca ‘>‘ o un nombre como los definidos en el apartado anterior. Por ejemplo, en <img src=’foto.gif’>, img src es el nombre de la marca que se refiere a insertar una imagen en la página web; y “foto.gif” es el valor que hace referencia al nombre específico de la imagen que queremos incluir.

Comentarios :

Una declaración de comentarios comienza con <!–, le siguen uno o varios comentarios y termina con –>. Las etiquetas de comentariose visualizan dentro del código html pero no tiene una traducción hacia el formato final. Es decir, no se visualiza en el navegador cliente.

Formateo de párrafos o bloques:

El inicio de un párrafo se indica con el tag <p> y su final con el tag </p>. El espaciado y los retornos de línea son ignorados por los navegadores que interpretan html.

Para agregar un retorno de línea es necesario usar el tag único <br>.

Elemento <hr /> inserta un línea además de un retorno de línea

<blockquote> y <blockquote> Este tag se usa para escribir una cita textual o un párrafo exacto y que éste se diferencie del resto del texto. El efecto que nos muestra es que crea un margen izquierdo yderecho del texto, para que se diferencie de los demás.

<p>La pareja mexicana de Paola Espinosa y Alejandra Orozco se colgó la medalla de plata en la prueba de plataforma de 10 metros sincronizado de los Juegos Olímpicos de Londres 2012, mientras que la dupla ganadora fue la integrada por las chinas Chen Roulin y Wang Hao.</p>
<br> <p>El binomio Espinoza-Orozco sumó 343.32 puntos, por 368.40 de las chinas, en tanto que el bronce fue para las canadienses Roseline Filion y Meaghan Benfeito, con 337.62.</p>

Efecto visual

La pareja mexicana de Paola Espinosa y Alejandra Orozco se colgó la medalla de plata en la prueba de plataforma de 10 metros sincronizado de los Juegos Olímpicos de Londres 2012, mientras que la dupla ganadora fue la integrada por las chinas Chen Roulin y Wang Hao.

El binomio Espinoza-Orozco sumó 343.32 puntos, por 368.40 de las chinas, en tanto que el bronce fue para las canadienses Roseline Filion y Meaghan Benfeito, con 337.62.

Etiquetas de caracteres y tipos de letra:

El lenguaje HTML permite asignar formatos de tipos de letra y caracteres. Existen diversos marcadores para indicar que una palabra o frase tiene una connotación especial y es obligatorio poner los marcadores de cierre al final del texto afectado. Estos son algunos de los más utilizados.

Lenguaje HTML	Resultado en navegador
<b>texto en negrita</b>	texto en negrita
<i>texto en cursiva o itálica</i>	texto en cursiva o itálica
<u>texto subrayado</u>	texto subrayado
<b><i><u>combinando las tres anteriores</u></i></b>	combinando las tres anteriores
<tt>fuente tipo de máquina de escribir</tt>	Fuente tipo de máquina de escribir
Subíndice. Por ejemplo H<sub>2</sub>O	H2O
Superíndice. Por ejemplo x<sup>2</sup>	x2

Tipos de letras

La etiqueta <font> en HTML es obsoleta. Se supone que se eliminara en futuras versiones de HTML. A pesar de su uso cotidiano, evitalo en favor de las hojas de estilos.

Para un documento completo podría usar las fuentes de google con un línea en el head como está:

Imagenes

Colocar imágenes en nuestra web produce unos resultados asombrosos de una manera muy fácil. El tag básico para colocar una imagen es “img“. Este tag, a diferencia de la gran mayoría de los tags de html, no necesita un cierre. El atributo “src” es imprescindible para poder colocar una imagen. Este atributo es el que indica dónde se encuentra alojada la imagen que queremos mostrar. Se escribe así: <img src=”ruta”>, donde “ruta” es la dirección o la url dónde se encuentra situada la imagen. Solo es posible cargar imagenes gif, jpg y png.

Código	Efecto visual
<img alt =” src=’images/moneda.jpg’>

El tag <img> tiene dos atributos que debemos considerar alt y title, básicamente los dos cumplen la misma función, mostrar un título al estar el mouse sobre la imagen. No todos los navegadores soportan ambos, por ejemplo iExplorer solo soporta title. Para fines de validación es necesario incluir alt=”.

Si la imagen es usada como hipervinculo, el valor por defecto es 1px. Si no requerimos el bordees necesario agregar el atributo border=’0′ sobre todo si usamos iExplorer de preferencia en una hoja de estilo. Por ejemplo.

img {
   border: 0px;
}

Hiperenlaces

Es la piedra angular de HTML, este tag se utiliza para crear hipervínculos: el texto en cual podemos hacer clic en un navegador para ir a otra página web. La sintaxis es la siguiente:

href

Este atributo específica la localización de un recurso de la Web, definiendo así un vínculo entre el elemento actual (el origen del vínculo) y el destino del vínculo definido por este atributo. El destino de un vinculo puede ser: una página web interna o externa, o un título, imagen, parrafo dentro de la misma página con el vinculo de origen (enlaces internos)

target

Destino del hiperenlace

_self: Abrir el enlace en la misma ventana que se encuentra el documento actual (valor por defecto). En el caso que existe un iframe, la ventana se abrira en el mismo marco

_blank:independientemente de si el enlace esta o no dentro de un iframe, el valor ‘_blank’ creará una ventana nueva

<a href='www.itver.edu.mx'>I.T.V</a>

Enlaces internos

Primero hay que definir el punto objetivo de la vinculación ( Por ejemplo: <a name=”maracuya“>) y a continuación se hace referencia en las partes que necesitamos a dicho punto (Por ejemplo: <a href=”#maracuya“>

<a href='#maracuya'>Maracuyá</a>
<a href='#macadamia'>Nuez de Macadamia</a>
<a href='#chaya'>Chaya</a>
El <a name='maracuya'>maracuyá</a>. . .

Convertir una imagen interna en un hipervínculo

Basta incluir el tagde imagen (img) con todos sus atributos entre los tag de ancla (<a href=….></a> ).El resultado obtenido es poder pulsar directamente sobre la imagen para acceder al hipervínculo.

Código	Efecto visual
<a href='http://www.itver.edu.mx'> <img src='itv.jpg'></a>

Listas

Listas desordenadas

Están englobadas por las etiquetas <ul>…</ul> (unordered list). Cada uno de los elementos de la lista comenzará con una etiqueta <li>.

<ul>
<li>Café</li>
<li>Leche</li>
<li>Té</li>
</ul>

Café
Leche
Té

Listas numeradas u ordenadas

Se engloban por las tags <ol>…..</ol> y cada elemento de la lista estará encabezado por la tag <li>.

<ol>
<li>Café</li>
<li>Leche</li>
<li>Té</li>
</ol>

Café
Leche
Té

Listas de glosario

Este tipo de lista denominado ‘definition list’ requiere tres tags(<dl>, <dt> y <dd>) para destacar el texto en cuestión. el tag puede utilizarse para construir definiciones (por ejemplo: recetas).

Para construir una lista, el texto debe escribirse entre los tags de definición de listas <dl> y </dl>. Los tags <dt> y su correspondiente </dt> son un definición de término y <dd> así como su correspondiente </dd> son una descripción.

Fresas flameadas
<dl>
<dt>Ingredientes</dt>
 <dd>10 fresas frescas</dd>
 <dd>1 onza de ron oscuro</dd>
 <dd>1/2 taza de azúcar</dd>
 <dd>Mantequilla amarilla</dd>
<dt>Preparación</dt>
 <dd>Poner a cocinar las fresas con un poco de mantequilla.</dd>
 <dd>Agregar el azúcar hasta que se disuelva.</dd>
 <dd>Por último adicionar el ron y flamear unos pocos minutos.</dd>
 <dd>Servir en una copa con helado de vainilla o solo,
 disfrútelo y me invitan!!!</dd>
</dl>

Las listas a su vez pueden anidarse, esto es colocarse unas dentro de otras. Los márgenes de cada lista, los tipos de letra, numeración, colores, etc. podrán ser ajustados desde una hoja de estilos CSS. Por ejemplo:

ol {
font: 18px times;
font-weight: bold;
list-style-type: decimal;
margin-left: 40px;
padding-left: 10px;
margin-bottom: 20px;
}

ol li {
margin: 0 0 5px 0;
font-size: 95%;
 text-align:justify;
line-height: 150%;
}
ul {
margin:0px 4px 8px 16px;
padding: 0;
list-style: url("imagenes/list-disc-orange.png");
}
ul li {
margin: 0 0 5px 0;
font-size: 95%;
 text-align:justify;
line-height: 150%;
}
ul ul {
 list-style: url("imagenes/list-disc-blue.png");
}
ul ul li {
margin: 0 0 2px 0;
font-size: 95%;
line-height: 150%;
}

Multimedia

El nuevo elemento html5 permite el uso de diferentes formatos de archivo puesto que los formatos que soportan los diferentes navegadores no son parte del estándar sino que depende de la implementación de cada fabricante. Puedes guiarte con esta tabla para comprobar que formatos soportan los navegadores más usados de forma nativa:

Códec	Tipo	IE >=9	Firefox	Chrome	Safari	Opera
Ogg Vorbis	Libre (BSD)	no	si	si	no	si
WAV PCM	Privativo (Microsoft, IBM)	no	si	si	si	si
MP3	Privativo (En disputa)	si	no	si	no	si en Linux y FreeBSD
AAC	Bajo patente AAC	si	no	si	si	si en Linux y FreeBSD

Una solución mediatica es

<audio controlsc>
<source src='archivo.ogg' type='audio/ogg' />
<source src='archivo.mp3' type='audio/mpeg' />
</audio>

Claro que esta solución nos lleva a duplicar la capacidad de almacenamiento. Quizas la mejor solución sea mediante javascript

Tablas

Una tabla HTML5 puede ser considerada de manera simple como un grupo de filas donde cada una de ellas contiene un grupo de celdas. Las tablas, así como toda estructura en documentos HTML, son definidas usando tags.

Una tabla simple puede ser insertada en un documento HTML usando tres tags: el tag HTML table (principal contenedor), el tag HTML tr (fila contenedora) y el tag HTML td (celda simple). Adenás de los tags thead y tbody,

Ejemplo:

Código

Efecto visual

Celda 1	Celda 2	Celda 3
Celda 4	Celda 5	Celda 6
Celda 7	Celda 8	Celda 9

Las tablas en html 5 no usan atributos de presentación. Como los atributos de presentación van siendo desaprobados con cada versión del estándar HTML, y dado que los mismos efectos pueden lograrse usando hojas de estilo, recomendamos evitar el uso de atributos de presentación tales como “border”.

Las celdas vacías igual deben ser declaradas utilizando sus respectivos tags para lograr correctitud en el código. Cuando el contenido de una celda debe ser vacío, use siempre un espacio en blanco ( ) en su lugar.

Esto hará que tu página sea compatible, dado que algunos navegadores tienen problemas al mostrar celdas vacías.

Ejemplo: Campeones FIFA

<body>
<p>Campeones del futbol en los mundiales
   la FIFA</p>
<p>desde (1930 - 2022).</p>
<table>
 <tr>
   <th>Año</th>
   <th>Lugar</th>
   <th>Campeón</th>
   <th>Marcador</th>
   <th>Subcampeón</th>
 </tr>
   <tr>
      <th>1930</th>
      <td>Uruguay</td>
      <td>Uruguay</td>
      <td>4-2</td>
      <td>Argentina</td>
</tr>
...
</table>
</body>

Agrupación

Una tabla HTML puede agruparse horizontalmente en tres grupos: el encabezado (tag HTML thead), el cuerpo (tag HTML tbody) y el pie (tag HTML tfoot). Cada uno de estos tags encierra un grupo de filas. Estas divisiones ayudan a hacer las tablas fáciles de comprender, especialmente cuando deben ser mostradas en más de una página (por ejemplo, cuando una tabla larga se imprime). En dicho caso, los encabezados y pies pueden ser mostrados en cada página.

Dentro del elemento table se pueden utilizar atributos de suma utilidad: sumary=”…”, title=”…”, class=”…”, id=”…”, lang=”…”.

Estos atributos proporcionan una buenas dosis de semántica a una tabla.

Ejemplo: Campeones NFL

<caption> Le pone título a nuestras tablas
<colspan> comprime varias celdas en una sola

<table>
<caption>Campeones NFL</caption>
<thead>
<tr bcolor='#ff9900'>
 <th>Temporada</th>
   <th>Campeón</th>
  <th>Marcador</th>
  <th>Subcampeón</th>
  <th>Estadio</th>
</tr>
</thead>
<tbody>
<tr><td>1967</td><td>Green Bay Packers(1)</td><td>35-10</td>
<td>Kansas City Chiefs</td><td>L. A. Memorial Coliseum</td></tr>
<tr><td>1968</td><td>Green Bay Packers(2)</td><td>33-14</td>
<td>Oakland Raiders</td><td>Miami Orange Bowl Stadium</td></tr>
<tr><td colspan='5'>( ) : Indica la posición ocupada en su conferencia</td>
</tr>
</tbody>
</table>

Ejemplo: Records Olímpicos Atlestimo Masculino

<body>
<br>
<table>
<tr>
  <th><img alt='' src='imagenes/logo.png'></th>
  <th>Tabla de records olímpicos en Atletismo Masculino</th>
  <th><img alt='' src='imagenes/logo.png'></th>
</tr>
</table>
<br>
<br>
<table>
<thead>
  <tr>
    <th>Prueba</th>
    <th>Fecha</th> 
    <th>Sede</th>
    <th>Mascota</th>
    <th>Atleta</th>
    <th>Record</th>
    <th>Bandera</th>
  </tr>
</thead>
<tbody>
  <tr>
    <td>100 m</td>
    <td>2008-08-16</td>
    <td>Pekín</td>
    <td><img alt='Pekín' src='imagenes/pekin_fuwafr.gif'></td>
    <td>Usain Bolt</td>
    <td>9:69 seg</td> 
    <td><img alt='Jamaica' src='imagenes/jm.gif'></td>
  </tr>
</tbody>
</table>
</body>

Ejemplo: Liga de Campeones

La tabla se muestra en bicolor (Renglones pares e impares) mediante jQuery y CSS ( Hojas de estilo) solo es una prueba del potencial de jQuery

<body>
 <table class='stripeMe'>
    <caption>Campeones UEFA Champion League</caption>
    <thead>
 <tr>
  <th>Temporada</th>
  <th>Campeón</th>
  <th>Escudo</th>
  <th>Bandera</th>
  <th>Resultado</th>
  <th>Subcampeón</th>
        <th>Escudo</th>
  <th>Bandera</th>
  <th>Sede</th>
  <th>Fecha</th>
 </tr>
 </thead>
 <tbody>
<tr>
  <td>1955-1956</td>
  <td>Real Madrid</td>
  <td><img alt='' src='imagenes/realmadrid.png'></td>
  <td><img alt='España' src='imagenes/bespana.jpeg' title='España'></td>
  <td>4-3</td> 
  <td>Stade de Reims</td>
  <td><img alt='' src='imagenes/stade_reims.png'></td> 
  <td><img alt='Francia' src='imagenes/bfrancia.jpeg' title='Francia'></td> 
  <td>Parcdes Princes, París, Francia</td>
  <td>1956-06-13</td>
</tr>
<tr>
  <td>1956-1957</td>
  <td>Real Madrid</td>
  <td><img alt='' src='imagenes/realmadrid.png'></td>
  <td><img alt='España' src='imagenes/bespana.jpeg' title='España'></td>
  <td>3-0</td>
  <td>ACF Fiorentina</td> 
  <td><img alt='' src='imagenes/acf_fiorentina.png'>
  </td><td><img alt='Italia' src='imagenes/bitalia.jpeg' title='Italia'></td>
  <td>Santiago Bernabéu, Madrid, España</td>
  <td>1957-05-30</td>
</tr>
...
</tbody>
</table>
</body>

Estado del tiempo

Usando enlaces a otra página para obtener el pronostico del tiempo de nuestra ciudad.

La línea cinco es una llamada a una hoja de estilo.

Observe que las líneas 1,2,3 y 12hacen referencia a la misma cadena. No cambie un solo carácter de está cadena o su página dejara de funcionar.

<div id='cont_20734acf0b5889ceb71df7b1ca7f7c1a'>
<span id='h_20734acf0b5889ceb71df7b1ca7f7c1a'>
<a id='a_20734acf0b5889ceb71df7b1ca7f7c1a' 
href='http://www.tiempo.com/'
target='_blank'
style='color:#656565;
font-family:Arial;
font-size:14px;'>Tiempo
</a> en Veracruz
</span>
<script 
src='http://www.tiempo.com/wid_loader/20734acf0b5889ceb71df7b1ca7f7c1a'>
</script>
</div>

iframes

Un iframe es un marco flotante que puede estar colocado en cualquier parte de la página. Las propiedades de un iframe son:

Propiedad scrolling,scrolling=’auto’: automático, scrolling=’YES’:forzado, scrolling=’NO’: Valor por defecto.
Propiedad frameborder: 0 sin borde, 1 o superior ancho del marco
Altura y su ancho: height=’390′ width=’640′

Buscar este blog

Programación web