HTML


Tutorial HTML, Tags, atributos, listas, tablas.

Introduccion:


HTML significa Hypertext Markup Languaje, o lenguaje de marcas de hipertexto. Los ficheros htm(paginas web) son ficheros de texto, y la forma en que este texto aparece en pantalla viene definida por un conjunto de marcas o tags. La especificación de estos tags la decide un organismo internacional, aunque ultimamente algunos fabricantes como Netscape y Microsoft implementan nuevas capacidades a sus navegadores que no son compatibles con el resto.
El Navegador distingue a los tags del resto del texto porque van dentro de los simbolos <..>.
Por ejemplo la secuencia <i>hola<i> produce en pantalla hola: El tag <i> indica que el texto debe inclinarse, y para cerrar el tag escribimos </i>. Existen muchos tags, pero solo vamos a ver los básicos. Al final del curso se dará bibliografía y enlaces para completar la información. Para crear las paginas html solo hace falta un procesador de textos. Ultimamente es posible hacer documentos htm desde programas como Word o Excel, sin embargo, en este curso solo usaremos el Bloq de Notas de Windows, asi tendremos un control total sobre el codigo generado.

html


IEstructura de un documento html

Un documento html esta dividido en cabecera(HEAD) y cuerpo(BODY). La cabecera tiene información sobre el documento, como el titulo, y el cuerpo es donde va el contenido.
Lo vemos en una pagina sencilla:

<html>
<head>
<TITLE>Nuestra primera pagina</TITLE>
</head>
<body>
<H1>Nuestra primera pagina</H1>
<P>Este es el primer parrafo </P>
<P>Este es el segundo parrafo.</P>
</body>
</html>

listas

Vamos linea a linea:
<html>: indica el comienzo del documento html
<head>: indica el comienzo de la cabecera
<TITLE>Nuestra primera pagina</TITLE>: Comienzo del titulo, el titulo, y final de titulo
</head>: Final de la cabecera
<body>: comienzo del cuerpo del documento
<H1>Nuestra primera pagina</H1>: El tag <H1> indica al navegador que el texto debe estar en negrita y con tamaño de letra grande, y ademas introduce un retorno de carro
<P>Este es el primer parrafo </P>: El tag <P> indica principio de parrafo
</body>: fin de cuerpo del documento
</html>: fin de documento html

Para ver el resultado que produce el codigo, debemos copiarlo en el Bloq de Notas, guardarlo con la extensión .html, y cargarlo en el navegador.


tablas.

Etiquetas y Atributos en HTML:

Son códigos de formateo utilizados en documentos HTML que dan instrucciones al navegador sobre la presentación de texto y de gráficos en una página web.
Un atributo es un apéndice de un rótulo HTML que extiende o califica su significado.
Al ser varias las etiquetas y los atributos en HTML, aqui les dejo dos links donde pueden encontrar la lista de las etiquetas y de los atributos con sus respectivas funciones:


http://roble.pntic.mec.es/apuente/html/paginas/resumen.htm
http://crismattweb.tripod.com/guiahtml/etiqueta.html

La etiqueta <a> por ejemplo se emplea para incluir un enlace en una página. Utilizando sólo la etiqueta <a> no es posible establecer la dirección a la que apunta cada enlace. Como no es viable crear una etiqueta por cada enlace diferente, la solución consiste en personalizar las etiquetas HTML mediante cierta información adicional llamada atributos.

De esta forma, se utiliza la misma etiqueta <a> para todos los enlaces de la página y se utilizan los atributos para indicar la dirección a la que apunta cada enlace.

<html>

<head>
<title>Ejemplo de atributos en las etiquetas</title>
</head>

<body>
<p>
Los enlaces son muy fáciles de indicar:
<a>Soy un enlace incompleto, porque no tengo dirección de destino</a>.
<a href="http://www.google.com">Este otro enlace apunta a la página de Google</a>.
</p>
</body>

</html>


atributos y tags

Listas:

Las listas se definen de forma muy sencilla: se dice dónde empieza la lista, dónde empieza cada punto y dónde acaba la lista. Las etiquetas que se utilicen en cada caso deben aparecer al principio de línea, o al menos sin texto por delante (sólo espacios o tabulaciones). Podemos recurrir a tres tipos distintos de listas, cada una con una presentación diferente: no numeradas, numeradas y listas de definiciones (glosarios).
Las listas se pueden anidar, es decir, en el lugar donde debería ir uno de los términos de la lista se pone una nueva lista, que por supuesto no tiene porqué ser del mismo tipo.

Esto es una lista no numerada:

<ul>
<li>Elemento 1
<li>Elemento 1
<li>Elemento 1
</ul>

Tutorial HTML, Tags, atributos, listas, tablas.


Esto una lista numerada:


<ol>
<li>Elemento 1
<li>Elemento 1
<li>Elemento 1
</ol>



Esto es lo basico de las listas no enumeradas y enumeradas, luego se pueden hacer cosas mas complejas



html


Tablas:


El modelo de tablas de HTML permite a los autores organizar datos -- textos, texto preformateado, imágenes, vínculos, formularios, campos de formularios, otras tablas, etc. -- en filas y en columnas de celdas.

Cada tabla puede tener un título asociado (ver el elemento CAPTION) que proporciona una descripción corta del propósito de de la tabla. Se puede proporcionar también una descripción más larga (por medio del atributo summary) para el provecho de las personas que utilicen agentes de usuario basados en Braille o en voz.

Las filas de una tabla pueden agruparse en secciones de encabezado, pie y cuerpo, (por medio de los elementos THEAD, TFOOT y TBODY, respectivamente). Los grupos de filas conllevan información estructural adicional y los agentes de usuario los pueden representar de modo que se enfatice esta estructura. Los agentes de usuario pueden sacar partido de la división entre encabezado, cuerpo y pie para permitir el desplazamiento de las secciones de cuerpo independientemente de las secciones de cabecera y pie. Cuando se imprimen tablas largas, se puede repetir en cada página la información de cabecera y pie que contienen los datos de la tabla.

Los autores también pueden agrupar columnas para proporcionar información estructural adicional de la que pueden sacar partido los agentes de usuario. Además de esto, los autores pueden declarar propiedades de columnas al comienzo de la definición de la tabla (por medio de los elementos COLGROUP y COL) de tal modo que se permita a los agentes de usuario representar la tabla incrementalmente en lugar de tener que esperar a que lleguen todos los datos de la tabla antes de empezar a representarla. Las celdas de la tabla puede contener o bien información de "encabezado" (ver el elemento TH) o de "datos" (ver el elemento TD). Las celdas pueden ocupar varias filas y columnas. El modelo de tablas de HTML 4 permite a los autores dar un rótulo a cada celda de modo que los agentes de usuario no visuales puedan comunicar más fácilmente información de encabezado de la celda al usuario. Estos mecanismos no sólo ayudan considerablemente a los usuarios con discapacidades visuales, sino que además permiten manejar tablas a navegadores multi-modo sin cables con posibilidades de representación limitadas (p.ej., teléfonos con soporte web). No deberían usarse tablas con la única finalidad de organizar la presentación de los contenidos de un documento (es decir, de crear el "layout" ), ya que esto puede ocasionar problemas cuando se represente en un medio no visual. Además, al incluir gráficos, estas tablas pueden forzar a los usuarios a hacer desplazar horizontalmente la pantalla para ver una tabla diseñada en un sistema con una pantalla más grande. Para minimizar estos problemas, los autores deberían usar hojas de estilo en lugar de tablas para organizar la presentación.

Ejemplos:


listas

tablas.


Bueno aca les dejo el post, proximamente voy a hacer otro, en el cual esten incluidas enlances, imagenes, fondos para la pagina, videos, musica, etc.

Espero que les haya gustado!