World Wide Web

Este servicio, también conocido como WWW o simplemente Web, nació en 1990, y supuso una nueva forma de comunicación que reunía tanto texto como gráficos, y poco a poco eclipsó a los servicios anteriores, hasta el punto que hay quien identifica Internet con WWW.
El WWW tiene tres elementos fundamentales: el HTML, que es de lo que se va a hablar aquí, el browser, la aplicación con la que has accedido a esta página y los URL, las direcciones de las distintas web.

Organización de un Sitio Web

Para hacer una buena presentación Web lo ideal es crearnos un boceto inicial de la estructura.
Objetivos
Lo primero que debemos hacer es fijarnos los objetivos que queremos alcanzar según la información que vayamos a aportar. Para crear nuestra primera página, estos objetivos deberían no ser muy pretenciosos o tener un sentido únicamente personal.
Tener claros los objetivos nos ayudara a no plasmar contenidos confusos o innecesarios.
Contenidos
Una vez que tenemos los objetivos, hay que organizar el contenido por temas o secciones, Es conveniente que los temas sean razonablemente cortos y si fuera necesario divida en subtemas. Si por el contrario tenemos temas muy cortos, lo correcto sería agruparlos bajo un encabezado de temas algo más general.
Estructura
La estructura de un conjunto de páginas web es muy importante, ya que una buena estructura permitirá al lector visualizar todos los contenidos de una manera fácil y clara, mientras que un conjunto de páginas web con una mala estructura producirá en el lector una sensación de estar perdido, no encontrará rápidamente lo que busca y terminará por abandonar nuestro sitio.

No cree páginas que sean un callejón sin salida.
Al menos cada página Web ha de tener un enlace por el cual se pueda continuar la navegación. Si le es posible facilite un índice con el contenido del sitio.
Si quiere captar la atención del navegante, no haga la página más grande de una pantalla. En general es una buena costumbre no hacer páginas de tamaño mayor a una pantalla y media.
De esta manera evitará muchos problemas y facilitará la lectura de las páginas. Las páginas de tamaño una pantalla y media son cómodas de leer y no saturan al lector con demasiada información.

Menúes/Barras de Navegación
Para poder navegar por un Sitio es necesario que sus páginas esten relacionadas. Para ello debemos crear una barra de navegación como la que puedes visualizar arriba de estas líneas.
Su función es permitirle al visitante navegar por un mismo Sitio.
Una vez que tenemos definida la estructura del Sitio, sabremos cuales serán las secciones más importantes, entonces crearemos una tabla con tantas celdas como secciones tengamos y en cada una de las celdas haremos el correspondiente vínculo a la página principal de la sección elegida.
Por ejemplo, como puedes ver, nuestra barra de navegación o menú consta de siete secciones, el vínculo "Etiquetas/Tags" se dirige a la página principal de la carpeta que contiene todas las páginas que hablan de Etiquetas y así con el resto de las secciones

Por último, terminada nuestra barra de navegación debemos aplicarla en TODAS nuestras páginas, es decir copiar y pegar.

Tablas

Las tablas nos permiten representar y ordenar cualquier elemento de nuestra presentación en diferentes filas y columnas de modo que podamos resumir grandes cantidades de información de una manera que puede representarse rápida y fácilmente.
El contenido de una tabla lo debemos desarrollar entre las etiquetas <table>.....</table>.
Las tablas se definen fila a fila, celda a celda, comenzando desde la celda superior izquierda. Las columnas se calcularán automáticamente según las celdas que hay en cada fila.
Cada fila de la tabla se indica mediante las etiquetas <tr>.....</tr>.
Las etiquetas <th> y <td> con sus correspondientes etiquetas de cierre, indican las filas individuales dentro de cada fila. Las etiquetas <th>.....</th> indican que se trata de celdas que sirven como encabezado de tabla y suelen visualizarse en negrita.
Las etiquetas <td>.....</td> indican que se trata de celdas comunes.
Código que genera
Ver ejemplo
Alineación de celdas
Una vez colocadas las celdas, hay que alinear los datos dentro de cada celda.
Así, dentro de cada etiqueta de celda podemos encontrar:
El atributo align= que define horizontalmente los datos al margen izquierdo (left), al derecho (right) o centrado (center).

El atributo valign= que define verticalmente los datos en la parte superior (top), en la parte inferior (bottom) o centrado (middle).

Celdas extendidas

Para crear una celda que abarque varias filas o columnas, debemos colocar en las etiquetas <th> o <td> los siguientes atributos:

rowspan= más un valor, para indicar el número de filas que se quiere abarcar.

colspan= más un valor, para indicar el número de columnas que se quiere abarcar.
Si opta por poner celdas extendidas en su presentación web, puede complicarse bastante.
Nuestra recomendación: Tome lápiz y papel y dibuje la tabla con todas las filas y columnas que se quieren formar porque así tendrá mucho más claro los valores que debe asignar a los atributos rowspan y colspan y las etiquetas a las que hay que asignarlos.
<td colspan="2">
Fusionará la celda en cuestión con su vecina derecha.

Esta celda tiene un colspan="2"
Celda normal	Otra celda

Del mismo modo,
<td rowspan="2">

Esta celda tiene rowspan="2", por eso tiene fusionada la celda de abajo	Celda Normal
	Otra celda normal

Expandirá la celda hacia abajo fusionándose con la celda inferior.

Espaciado
Podemos modificar el aspecto de la tabla cambiando el ancho de los bordes, el espaciado entre celdas y el ancho de las mismas.
width= Acompaña a <table> y especifica el ancho de la tabla, tanto en número de pixeles como en porcentaje respecto al ancho de la pantalla. También puede acompañar a las etiquetas <th> o <td> para especificar el ancho de las columnas.
Border= Anteriormente, ya hemos hablado de este atributo. Ahora le diremos que puede darle un valor que indicará el ancho del borde en pixeles. Border="0" indicaría la ausencia de borde.
Cellspacing= Suele acompañar a la etiqueta <table>. Indica el número de pixeles que separan cada celda. El valor predeterminado suele ser 2.
Cellpadding= También acompaña a la etiqueta <table>. Indica el espacio en pixeles entre el borde de la celda y su contenido. El valor predeterminado suele ser 1.

Vínculos - Enlaces - Links

Navegar en Internet es como navegar en el océano, si no llevamos una buena brújula o si no sabemos el lugar al que queremos ir, lo mas seguro es que nos perderemos en este océano digital. Al seguir un vínculo, lo hacemos para aumentar una información, ver una imagen o reproducir un sonido o video. Esta capacidad de ir uniendo páginas con otras páginas es lo que le da a Internet su dinamismo. La etiqueta <A> es la que da la propiedad de hipertexto a una página HTML.
Los vínculos entre varias páginas están dados por esta etiqueta.
Etiquetas como <IMG> ó <P>, entre otras, pueden estar contenidas dentro de <A> para crear vínculos con imágenes o texto respectivamente.

Las palabras vínculo, hipervínculo y link son sinónimos. Etiqueta de cierre: </A><A HREF="..."><P>Texto</P></A> hace del párrafo un hipervínculo.
<A HREF="..."><IMG></A> hace de la imagen un hipervínculo.Observemos que el atributo HREF a sido utilizado en la sintaxis por considerarlo parte esencial de la etiqueta <A>. Para crear un vínculo desde una página hacia otra dentro del mismo sitio, debemos utilizar el atributo HREF de la etiqueta A.
A continuación se explicará la forma de trabajar con directorios y subdirectorios.También se puede crear un vínculo hacia otra parte de la misma página.
Por ejemplo, si el texto es muy extenso se utilizarán estos enlaces si necesitamos volver al principio de la página.
Se coloca <a href =# arriba> (simbolo numeral + cualquier palabra) en la parte de la página donde se supone se desea subir, y luego en la parte superior, siempre dentro del BODY, se coloca <a="arriba"> (debe ser la misma palabra que pusimos abajo)

<A HREF="DEFAULT.HTM"> crea un vínculo hacia la página "DEFAULT.HTM" que se encuentra en el mismo directorio que la página que contiene el vínculo.<A HREF="../DEFAULT.HTM"> crea un vínculo hacia la página "DEFAULT.HTM" que se encuentra en un directorio anterior a la página que contiene el vínculo.
<A HREF="DIRECTORIO/DEFAULT.HTM"> crea un vínculo hacia la página "DEFAULT.HTM" que se encuentra en el subdirectorio "DIRECTORIO".

Listas

Junto con encabezados y párrafos, son otro de los elementos HTML más comunes. Pueden darse cinco tipos diferentes de listas, cada uno con etiquetas distintas aunque con alguna en común:
Listas numeradas u ordenadas: Se engloban por las etiquetas <ol>.....</ol> y cada elemento de la lista estará encabezado por la etiqueta <li> que puede o no llevar la etiqueta de cierre </li>. Es conveniente que cada elemento de la lista esté en una línea nueva aunque todo seguido consiga en la presentación el mismo efecto. Cuando el navegador interpreta una lista ordenada, numera y sangra cada elemento en forma secuencial, aunque se introduzcan modificaciones.
Listas con viñetas o sin orden: Se engloban por las etiquetas <ul>.....</ul> y cada elemento de la lista, también estará encabezado por la etiqueta <li>. El resultado es que el navegador inserta viñetas (marcadores) delante de cada elemento.

Menú: Englobadas por las etiquetas <menu>.....</menu> y cada elemento encabezado por la etiqueta <li>.
Directorio: Englobadas por las etiquetas <dir>.....</dir> y cada elemento encabezado por la etiqueta <li>.
Listas de definición: Cada elemento de la lista está compuesto por un término y una definición y cada una de estas partes tiene su propia etiqueta. Estas listas se engloban con las etiquetas <dl>.....</dl>. Para el término se usa la etiqueta <dt> y para la definición la etiqueta <dd>. Generalmente el navegador colocará término y definición en dos líneas diferentes pero esto se puede evitar añadiendo a la etiqueta de apertura el atributo compact: <dl compact>.
Listas anidadas: Consiste en poner una lista dentro de otra, de manera que la lista secundaria sangre respecto a la principal. Puede jugar con los diferentes tipos de lista pero recuerde estructurar bien las etiquetas: Las etiquetas de la lista principal englobarán todo el conjunto de las listas y las etiquetas de las listas secundarías se cerraran antes de volver a la lista principal. Ahora quizá le empiece a convenir sangrar el propio código conforme lo va escribiendo en HTML.

Código que se genera

Ver ejemplo

Fuentes

La etiqueta <FONT> permitirá asignar la fuente, color y tamaño al texto contenido en ella.
Por ejemplo:
<P><FONT FACE="ARIAL", COURIER, HELVETICA" COLOR="#FF00FF" SIZE="3">Mi Primera Página Web</FONT></P>

Se vería así:
Mi primera Página Web
FACE
El atributo FACE permite establecer la fuente a utilizar.
Es posible utilizar hasta tres nombres de fuentes separadas por comas.
La necesidad de hacer esto es debido a que, en el momento de cargar el documento en el navegador, este busca la primera fuente dentro del sistema; si no la encuentra continua con la segunda, etc. Debemos de tener cuidado de solo utilizar fuentes "estándar", que puedan ser encontradas en cualquier sistema. Las mas comunes son:
Arial
Courier
Helvetica
Sans-Serif
Times New Roman
Verdana

SIZE
Sobre el tamaño, solo hace falta decir que los posibles valores que SIZE puede tomar son:
1, 2, 3, 4, 5, 6, 7: Tamaños fijos.
+1, +2, +3, +4, +5, +6, +7: Incrementos Relativos
-1, -2, -3, -4, -5, -6, -7: Decrementos Positivos

Cabe hacer notar que los tamaños pueden ser no interpretados como deseamos por el navegador.< Tamaño 1 Tamaño 2 Tamaño 3 Tamaño 4 Tamaño 5 Tamaño 6 Tamaño 7
Tamaño +1 Tamaño +2 Tamaño +3 Tamaño +4
Tamaño -1 Tamaño -2 Tamaño -3 Tamaño -4 Tamaño -5 Tamaño -6 Tamaño -7

Partes de un documento HTML

Sintaxis

Producir un documento Web no es una tarea demasiado compleja, pues no requiere del conocimiento de lenguajes de programación, sino, simplemente, del dominio de un conjunto de instrucciones (en inglés) que constituyen el código HTML. Estas se conocen como Tags / Etiquetas.
Así, las instrucciones que se encuentran dentro del documento, al ser cargadas por el Navegador/Browser, encargado de interpretarlas, mostrarán como resultado al navegante, una nueva página.
Todo documento HTML ha de estar delimitado por la etiqueta <html> y </html>.
Dentro de este documento, podemos asimismo distinguir dos partes principales:
- El encabezado, delimitado por <head> y </head> donde colocaremos etiquetas de índole informativo como por ejemplo el titulo de nuestra página.
- El cuerpo, flanqueado por las etiquetas <body> y </body>, que será donde colocaremos nuestro texto e imágenes delimitados a su vez por otras etiquetas.
El resultado es un documento con la siguiente estructura:
<html>
<head>
Etiquetas y contenidos del encabezado
Datos que no aparecen en nuestra página pero que son importantes para catalogarla: Titulo, palabras clave,...
</head>
<body>
Etiquetas y contenidos del cuerpo
Parte del documento que será mostrada por el navegador: Texto e imágenes
</body>
</html>

Imágenes

Las imágenes son mucho más impactantes y pueden transmitir un mensaje mejor y de una forma más clara y rápida que el texto.Pero piense que no todas las personas poseen un navegador gráfico.
Evite en lo posible usar imágenes de fondo en sus páginas Web, si desea usar imágenes de fondo elija unas que contengan poca información visual, de manera que el texto se pueda leer con facilidad.
Recuerde incluir el atributo ALT="descripción" en todas las imágenes.
Incluir imágenes en una presentación web es muy sencillo, solo debe tener en cuenta que las imágenes tienen que tener los formatos GIF, JPG o PNG.
Las imágenes en línea, se especifican a partir de la etiqueta <img> que no tiene una etiqueta correspondiente de cierre pero que puede acompañarse de los siguientes atributos:
SRC= Este atributo es obligatorio e indica el nombre del archivo de imagen (entre comillas) o la URL que se va a representar.

ALIGN= 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 tres valores posibles son los ya conocidos left, right, top, middle y bottom.

ALT= Es la alternativa que se estableció cuando todavía existían visualizadores de solo texto. Entre comillas podremos escribir un texto que suplantara a esta imagen si no se carga o mientras se carga o cuando, visualizando ya la imagen, pasamos el ratón por encima.

WIDTH= Este atributo es opcional pero es recomendable ponerlo para ayudar al navegador a representar la imagen, significa el ancho de la imagen que vamos a representar.

HEIGHT= Al igual que el atributo WIDTH, es opcional y recomendable ponerlo, este significa el alto de la imagen.

BORDER= Con BORDER especificamos el ancho de un borde que rodea la imagen.

<IMG SRC="/graficos/bebe1.jpg" WIDTH=140 HEIGHT=210 BORDER=0 ALT="Un bebé">
Ejemplo:

<HTML>
<HEAD>
<TITLE>Ejemplo 1</TITLE>
</HEAD>
<BODY>
<H1>Imágenes</H1>
<IMG SRC="/graficos/bebe1.jpg" WIDTH=140 HEIGHT=210 BORDER=0 ALT="Un bebé" ALIGN="RIGHT">
<IMG SRC="/graficos/bebe1.jpg" WIDTH=140 HEIGHT=210 BORDER=3 ALT="Un bebé" ALIGN="LEFT">
Un texto cualquiera.
</BODY>
</HTML>

Fuente: www.abc.gov.ar

Estimulando la Inteligencia Colectivamente

Esta es la Mente Colectiva

ADN, Reproducción Celular y Síntesis de Proteínas en imágenes

Campaña contra el acoso escolar

Como programar una pagina web en HTML

World Wide Web

Organización de un Sitio Web

Tablas

Vínculos - Enlaces - Links

Listas

Fuentes

Partes de un documento HTML

Sintaxis

Imágenes

Tenes que tener cuenta en gmail

Idea