Html Extremo: septiembre 2010

Atributos de las Celdas

jueves, 30 de septiembre de 2010 en 22:55

Veamos a continuación algunos atributos útiles para la construcción de nuestras tablas. Empecemos viendo atributos que nos permiten modificar una celda en concreto o toda una línea:

align	Justifica el texto de la celda del mismo modo que si fuese el de un párrafo.
valign	Podemos elegir si queremos que el texto aparezca arriba (top), en el centro (middle) o abajo (bottom) de la celda.
bgcolor	Da color a la celda o línea elegida.
bordercolor	Define el color del borde.

Otros atributos que pueden ser únicamente asignados a una celda y no al conjunto de celdas de una línea son:

background	Nos permite colocar un fondo para la celda a partir de un enlace a una imagen.
height	Define la altura de la celda en pixels o porcentaje.
width	Define la anchura de la celda en pixels o porcentaje.
colspan	Expande una celda horizontalmente.
rowspan	Expande una celda verticalmente.

Muy útil también es el uso de tablas anidadas. De la misma forma que podíamos incluir listas dentro de otras listas, las tablas pueden ser incluidas dentro de otras. Así, podemos incluir una tabla dentro de la celda de otra. El modo de funcionamiento sigue siendo el mismo aunque la situación puede complicarse si el número de tablas embebidas dentro de otras es elevado.

Consejo: Páginas como DesarrolloWeb.com y muchas otras (La mayoría de las páginas avanzadas) que basan su diseño en tablas, realizan anidaciones de tablas constantemente para meter unos elementos de la página dentro de otros. Se pueden anidar tablas sin límite, sin embargo, en el caso de Netscape 4 hay que tener cuidado con el número de tablas que anidamos, porque a medida que metemos una tabla dentro de otra y otra dentro de esta y otra más, aumentando el grado de anidación sucesivamente... podemos encontrar problemas en su visualización y puede que la página tarde un poco de tiempo más en mostrarse en pantalla.

Este sería el código:

<html>
<head>
<tittle>Tablas anidadas</tittle>
</head>
<body>
<center>
Tablas anidadas
<table cellspacing="10" cellpadding="10" border="3">
<tr>
    <td align="center">
     Celda de la tabla principal
    </td>
    <td align="center">
         <table cellspacing="2" cellpadding="2" border="1">
         <tr>
             <td>Tabla anidada, celda 1</td>
             <td>Tabla anidada, celda 2</td>
         </tr>
         <tr>
             <td>Tabla anidada, celda 3</td>
             <td>Tabla anidada, celda 4</td>
         </tr>
         </table>
    </td>
</tr>
</table>
</center>
</body>
</html>
El documento html quedaria de la siguiente manera:

Atributos de las tablas

en 22:40

Además de los atributos específicos de cada celda o línea, las tablas pueden ser adicionalmente formateadas a partir de los atributos que nos ofrece la propia etiqueta <table>. He aquí aquellos que pueden parecernos en un principio importantes:
Imprimir

align	Alinea horizontalmente la tabla con respecto a su entorno.
background	Nos permite colocar un fondo para la tabla a partir de un enlace a una imagen.
bgcolor	Da color de fondo a la tabla.
border	Define el número de pixels del borde principal.
bordercolor	Define el color del borde.
cellpadding	Define, en pixels, el espacio entre los bordes de la celda y el contenido de la misma.
cellspacing	Define el espacio entre los bordes (en pixels).
height	Define la altura de la tabla en pixels o porcentaje.
width	Define la anchura de la tabla en pixels o porcentaje.

Los atributos que definen las dimensiones, height y width, funcionan de una manera análoga a la de las celdas tal y como hemos visto en el capitulo anterior. Contrariamente, el atributo align no nos permite justificar el texto de cada una de las celdas que componen la tabla, sino más bien, justificar la propia tabla con respecto a su entorno.

TABLAS COLUMNAS COMBINADAS

en 22:37

<html>

<head>

<title> table columnas combinadas</title>

</head>

<body>
<center>
<big><big>Tablas con columnas combinadas</big></big>
<table border="1" >
<tr>
<td rowspan="3">Campo unificado</td>
<td>Campo 2</td>
<td>Campo 3</td>
</tr>
<tr>
<td>Campo 5</td>
<td>Campo 6</td>
</tr>
<tr>
<td>Campo 8</td>
<td>Campo 9</td>
</tr>
</table>

</center>

</body>

</html>

La página web quedaría de la siguiente manera:

Imprimir

TABLAS CELDAS COMBINADAS

en 22:30

<html>
<head>
<title> tabla con celdas combiandas</title>
</head>
<body>
<CENTER>
<big><big>PRUEBA TABLA</big></big>
<TABLE border="2">
<TR>
<th></th>
<TH>Lunes</TH>
<TH>Martes</TH>
<TH>Miercoles</TH>
<TH>Jueves</TH>
<TH>Viernes</TH>
<TH>Sabado</TH>
<TH>Domingo</TH>
</TR>
<TR border="2">
<Td>M</Td>
<Td colspan="2">se combinan</Td>
<Td>&nbsp</Td>
<Td>&nbsp</Td>
<Td>&nbsp</Td>
<Td>&nbsp</Td>
<Td>&nbsp</Td>
</TR>
<tr>
<Td>F</Td>
<Td>&nbsp</Td>
<Td>&nbsp</Td>
<Td>&nbsp</Td>
<Td>&nbsp</Td>
<Td>&nbsp</Td>
<Td>&nbsp</Td>
<Td>&nbsp</Td>
</TR>
</TABLE>
</CENTER>
</body>
</html>

Imprimir

TABLAS

en 22:21

La tabla, como su nombre lo dice es, un esquema en el cual se pueden agregar elementos y presenta una mejor estructura y visualización de las cosas.

Las tablas poseen diferentes etiquetas:

<tr></tr>: esta etiqueta sirve para crear las filas de la tabla

<td></td>: esta etiqueta sirve para crear las columnas de las tablas

<th></th>: esta etiqueta sirve para colcar los títulos a las columanas de las tablas

Pero ¿Cómo se crea una tabla?

Se Utilizan las etiquetas <table></table> y dentro de ellas se colocan las demás. Para comenzar se deben crear la fila y luego dentro de esta crear las columnas. Ejemplo: crearemos una fila con 3 columnas

Hay que tomar simper en cuenta que al crear una table la primer fila es la que posee los titulos de las columnas entonces seria de la siguiente forma:

Ejemplo: supongamos el siguiente documento .html

<html>

<head>

<title> tabla </title>

</head>

<body>

<big><big>PRUEBA TABLA</big></big>

<TR>
<th></th>
<TH>Lunes</TH>
<TH>Martes</TH>
<TH>Miercoles</TH>
<TH>Jueves</TH>
<TH>Viernes</TH>
<TH>Sabado</TH>
<TH>Domingo</TH>
</TR>

</CENTER>

</body>

</html>

&nbsp, esto hace que las celdas posean espacio en blanco

La página web quedaría de la siguiente manera:

¿QUE ES HMTL?

en 9:20

HTML, siglas de HyperText Markup Language (Lenguaje de Marcado de Hipertexto), es el lenguaje de marcado predominante para la elaboración de páginas web. Es usado para describir la estructura y el contenido en forma de texto, así como para complementar el texto con objetos tales como imágenes. HTML se escribe en forma de "etiquetas", rodeadas por corchetes angulares (<,>). HTML también puede describir, hasta un cierto punto, la apariencia de un documento, y puede incluir un script (por ejemplo Java script), el cual puede afectar el comportamiento de navegadores web y otros procesadores de HTML.

El HTML, Hyper Text Markup Language (Lenguaje de marcación de Hipertexto) es el lenguaje de marcas de texto utilizado normalmente en la www (World Wide Web). Fue creado en 1986 por el físico nuclear Tim Berners-Lee; el cual tomo dos herramientas preexistentes: El concepto de Hipertexto (Conocido también como link o ancla) el cual permite conectar dos elementos entre si y el SGML (Lenguaje Estándar de Marcación General) el cual sirve para colocar etiquetas o marcas en un texto que indique como debe verse. HTML no es propiamente un lenguaje de programación como C++, Visual Basic, etc., sino un sistema de etiquetas. HTML no presenta ningún compilador, por lo tanto algún error de sintaxis que se presente éste no lo detectará y se visualizara en la forma como éste lo entienda.

El entorno para trabajar HTML es simplemente un procesador de texto, como el que ofrecen los sistemas operativos Windows (Bloc de notas), UNIX (el editor vi o ed) o el que ofrece MS Office (Word). El conjunto de etiquetas que se creen, se deben guardar con la extensión .htm o .html

Estos documentos pueden ser mostrados por los visores o "browsers" de paginas Web en Internet, como Netscape Navigator, Mosaic, Opera y Microsoft Internet Explorer.

También existe el HTML Dinámico (DHTML), que es una mejora de Microsoft de la versión 4.0 de HTML que le permite crear efectos especiales como, por ejemplo, texto que vuela desde la página palabra por palabra o efectos de transición al estilo de anuncio publicitario giratorio entre página y página.

HISTORIA DE HTML

en 9:19

Primeras especificaciones
La primera descripción de HTML disponible públicamente fue un documento llamado HTML Tags (Etiquetas HTML), publicado por primera vez en Internet por Tim Berners-Lee en 1991.1 2 Describe 22 elementos comprendiendo el diseño inicial y relativamente simple de HTML. Trece de estos elementos todavía existen en HTML 4.3
Berners-Lee consideraba a HTML una ampliación de SGML, pero no fue formalmente reconocida como tal hasta la publicación de mediados de 1993, por la IETF, de una primera proposición para una especificación de HTML: el boceto Hypertext Markup Language de Berners-Lee y Dan Connolly, el cual incluía una Definición de Tipo de Documento SGML para definir la gramática.4
El boceto expiró luego de seis meses, pero fue notable por su reconocimiento de la etiqueta propia del navegador Mosaic usada para insertar imágenes sin cambio de línea, reflejando la filosofía del IETF de basar estándares en prototipos con éxito. 5 Similarmente, el boceto competidor de Dave Raggett HTML+ (Hypertext Markup Format) (Formato de marcaje de hipertexto), de 1993 tardío, sugería, estandarizar características ya implementadas tales como tablas
1986. Publicación de la ISO 8879 que presenta el Standard General Markup Language, origen del HTML.

1989. Tim Berners-Lee, a la sazón en el Centro Europeo de Investigaciones Nucleares presenta su artículo Information Management: A Proposal dedicándose de lleno al desarrollo de un sistema que permitiera el acceso en línea de manera uniforme a la información disponible en muchos recursos distintos, y que pudiese funcionar en máquinas que conectadas por redes basadas en TCP/IP.

1990-1991. Tim Berners-Lee define el HTML como un subconjunto de SGML (Standard Generalized Markup Language), que más tarde se llamará nivel 0; soporta encabezados, listas y anclas. Se crea el nombre World Wide Web.

1991. Tim Berners-Lee introduce el primer visor de HTML, LineMode, que trabaja en modo texto y sólo en plataformas UNIX. El Centro Europeo de Investigaciones Nucleares realiza la apertura del primer sitio con acceso público de World Wide Web el 17 de mayo (http://info.cern.ch)

1992. Dan Connolly produce la primera Definición de Tipo de Documento (DTD) para el lenguaje, llamada HTML 1.0, agregando a la definición original atributos para modificar el estilo físico del texto. Se distribuye Viola, primer visor gráfico de Web y disponible sólo para X.11.

1993. Un nuevo visor que soporta un mayor nivel, Lynx, es producido por la Universidad de Kansas, si bien lee sólo texto. Aparece Mosaic, desarrollado por el Centro Nacional para Aplicaciones de Supercomputadoras, es el primer visor de Web en entorno gráfico que se hace disponible para computadoras personales, lo que lo hace inmediatamente popular. A fines de año, comienzan a aparecer los primeros artículos sobre WWW en diarios y revistas de circulación masiva. Tim Berners-Lee utiliza el trabajo del año anterior de Connolly para presentar el borrador de la primera norma (RFC -Recommendation for Comments) de HTML para Internet.

1994. La Universidad Técnica de Graz desarrolla un servidor y clientes con mayores prestaciones para HTML, Hyper-G, que no tiene gran éxito. Cello, primer visor de HTML que no requiere TCP/IP presentado por la Escuela de Leyes de la Universidad de Cornell. Dan Connolly y Karen Olson Muldrow redefinen el HTML para el nivel 2.0, que ahora soporta formularios. Un grupo de programadores que desarrollaran el Mosaic producen un nuevo visor de World Wide Web, Netscape (también conocido como Mozilla), que tiene una amplia aceptación entre los usuarios, pero que soporta elementos de programación que equivalen a una degeneración del HTML (tamaños de letra, fondos). Se define un equivalente para los modelos en tres dimensiones del HTML, el VRML (Virtual Reality Modeling Language), que permite moverse dentro de los ambientes definidos. En este mismo año se realizan la Primera y Segunda conferencias internacionales de WWW, en Ginebra y Chicago, respectivamente. Se crea la W3 Organization.

1995. Dave S. Raggett (Hewlett-Packard, Inglaterra) comienza a compilar la normativa del nuevo nivel del lenguaje, el HTML 3.0, cuya principal novedad es el soporte de tablas. Microsoft produce su primer visor de Internet, el cual también utiliza elementos de HTML degenerados. Una nueva versión de Netscape, Navigator 2.0, agrega soporte de encuadres. Sun Microsystems produce el primer visor de World Wide Web con soporte de un lenguaje de programación, HotJava. Se celebran la Tercera y Cuarta conferencias internacionales de WWW, en Boston y Darmstadt respectivamente, y la conferencia de WWW para Asia y el Pacífico en Wagga-Wagga.

1996. Netscape Communications y Microsoft presentan las nuevas versiones de sus visores que soportan gran parte del nivel de HTML 3.0. Aparecen visores no comerciales que implementan la norma completa de HTML 3.0. Se formaliza un nuevo nivel para la modelación en tres dimensiones, VRML 3.0, que permite interactuar con los objetos definidos. Se celebra la Quinta conferencia internacional de WWW en Rocquencourt.

1997. D. Raggett presenta, en enero, la versión normalizada del 3.2. En julio, aparece la versión 4.0, experimental.

1998. HTML 4.0.

COMENZANDO DESDE CERO EN HTML

en 9:18

Ya que comprendimos que html es usado para crear páginas web, pero nos hacemos las preguntas ¿Cómo se ocupa html para hacer una pagina web? ¿Tengo que descargar algo? ¿Que necesito?
Para crear una página web se pueden utilizar varios programas especializados en esto, como por ejemplo, el Microsoft Front Page o el Macromedia Dreamweaver . Otra forma de diseñar un archivo .html, es copiar todo en el Bloc de Notas del Windows, ya que este sencillo programa cumple con un requisito mínimo que es la posibilidad de trabajar con las etiquetas con las que trabaja este lenguaje, además existen programas como NotePad ++ que es de mucha utilidad para realizar código html.
Cualquiera de estas opciones nos servirá para hacer nuestras páginas web, pero este blog esta enfocado en creación de páginas web desde el block de notas.
Algo de mucha importancia es saber que cuando hemos terminado el documento debemos colocarle la extensión .html para que nuestra pagina web pueda ser detectado por el navegador principal del sistema operativo, nuestros archivos deben ser guardados con el siguiente formato: nombrearchivo.hml
COMO COMENZAR
Para comenzar se debe saber que la mayoría de etiquetas en html tienen una etiqueta de cierre, ¿Cómo es esto?, Si nos fijamos en la estructura del documento html, las etiquetas están en pares y las segunda posee una pleca, esta es la etiqueta de cierre. Ejemplo:
<html> </html>
Otro aspecto que es importante es que las etiquetas las podemos escribir con minúsculas o mayúsculas, es decir, podemos escribir una etiqueta con mayúscula y su etiqueta de cierre con minúscula y no habrá problemas al hacerlo. Ejemplo:
<HTML> </html>

Lo primero que debemos saber es que todo documento .html tiene una estructura fundamental y básica. Esta estructura es muy parecida a la que posee un Reporte, es decir, posee Encabezado y Cuerpo, para que se entienda mejor lo describiremos a continuación:
ESTRUCTURA DOCUMENTO .hmtl
<html>
<head>
</head>
<body>
</body>
</html>
Un documento de HTML empieza con la etiqueta <HTML>, que es la que encerrará el documento actual. Contiene dos secciones primordiales: la cabecera y el cuerpo encerradas respectivamente por los elementos <HEAD> (cabeza) y <BODY> (cuerpo).La cabecera puede contener información y siempre contiene el titulo del documento encerrado por el elemento <TITLE>(se describirá posteriormente). En el cuerpo se encuentra todo el contenido del documento, ya sea, texto, imágenes, sonidos, hipervínculos, etc.

Etiqueta Html

en 9:17

Define el inicio del documento HTML, le indica al navegador que lo que viene a continuación debe ser interpretado como código HTML

ETIQUETA HEAD

en 9:16

Define la cabecera del documento HTML, esta cabecera suele contener información sobre el documento que no se muestra directamente al usuario

ETIQUETA BODY

en 9:15

Define el contenido principal o cuerpo del documento. Esta es la parte del documento html que se muestra en el navegador; dentro de esta etiqueta pueden definirse propiedades comunes a toda la página, como color de fondo y márgenes

ETIQUETA TITTLE (TITULO)

en 9:14

Define el título de la página. Por lo general, el título aparece en la barra de título encima de la ventana, esta etiqueta se coloco el head del documento .html
Ejemplo: supongamos el siguiente documento .html
<html>
<head>
<title> Prueba de la etiqueta tittle </title>
</head>
<body>
</body>
</html>
Nuestra página web tendría que verse de la siguiente forma:

Si observamos el titulo de nuestra pagina web es lo que colocamos dentro de las etiquetas
<tittle></tittle>. (hay que considerar que con cada navegador cambia la presentación del titulo de las paginas web

ETIQUETA BR (SALTO DE LINEA)

en 9:13

El salto de línea es una etiqueta que es utiliza para dejar espacio entre elemento ya sea texto, imágenes etc. Esta etiqueta no posee etiqueta de cierre
Ejemplo: supongamos el siguiente documento .html
<html>
<head>
<title> Prueba salto de linea </title>
</head>
<body>
Prueba <br> de <br> salto <br> de <br> linea
</body>
</html>
La pagina web quedaría de la siguiente manera:

ETIQUETA B (NEGRITA)

en 9:12

En html el texto puede tener formato como en cualquier editor de texto. Negrita resalta el texto, esta etiqueta se utiliza dentro del cuerpo del documento .html
Ejemplo: supongamos el siguiente documento .html
<html>
<head>
<title> Prueba de la etiqueta Negrita </title>
</head>
<body>
Texto sin Negrita
<br>
<b>Esto hace negrita la letra</b>
</body>
</html>
La página web quedaría de la siguiente manera:

Al investigar la etiqueta <B></B> encontramos que ya no estaba siendo aprobada, se recomienda entonces el uso de la etiqueta <strong> <strong>

ETIQUETA STRONG (NEGRITA)

en 9:11

Posee la misma utilidad de la etiqueta <b></b>.
Ejemplo: supongamos el siguiente documento .html
<html>
<head>
<title> Prueba de la etiqueta strong </title>
</head>
<body>
Texto sin Negrita
<br>
<strong>Esto hace negrita la letra</strong>
</body>
</html>
La página web quedaría de la siguiente manera:

Se observa que produce el mismo resultado que la etiqueta <b></b>

ETIQUETA i (ITALICA O CURSIVA)

en 9:10

Esta etiqueta esta desaprobada pero daremos ejemplo de ella, para efecto de conocimiento.
Ejemplo: supongamos el siguiente documento .html
<html>
<head>
<title> Prueba de Cursiva </title>
</head>
<body>
Texto sin Cursiva
<br>
<i>texto con Cursiva</i>
</body>
</html>
La página web quedaría de la siguiente manera:

Al investigar la etiqueta <i></i> encontramos que ya no estaba siendo aprobada, se recomienda entonces el uso de la etiqueta <em></em>

ETIQUETA EM (ITALICA O CURSIVA)

en 9:09

Esta etiqueta produce el mismo efecto de la etiqueta <i></i>.
Ejemplo: supongamos el siguiente documento .html
<html>
<head>
<title> Prueba de cursiva em </title>
</head>
<body>
Texto sin Cursiva
<br>
<em>texto con Cursiva</em>
</body>
</html>
La página web quedaría de la siguiente manera:

ETIQUETA SMALL

en 9:08

Hace mas pequeña la letra sin asignarle un valor especifico
Ejemplo: supongamos el siguiente documento .html
<html>
<head>
<title> Prueba Small </title>
</head>
<body>
Normal    <br>
<small>Pequeño</small>    <br>
<small><small>+ Pequeño </small></small>    <br>
<small><small><small>++ Pequeño </small></small></small>    <br>
<small><small><small><small>+++Pequeño </small></small></small></small><br>
</body>
</html>
La página web quedaría de la siguiente manera:

ETIQUETA U (SUBRAYADO)

en 9:07

Subraya el texto que se encuentra dentro de las etiquetas.
Ejemplo: supongamos el siguiente documento .html
<html>
<head>
<title> Prueba Subrayado</title>
</head>
<body>
Texto sin subrayar
<br>
<u>texto subrayado</u>
</body>
</html>
La página web quedaría de la siguiente manera:

ETIQUETA S (TACHADO)

en 9:05

Tacha el texto que se encuentra dentro de la etiqueta
Ejemplo: supongamos el siguiente documento .html
<html>
<head>
<title> Prueba Tachado del</title>
</head>
<body>
Texto sin tachar
<br>
<s>texto tachado</s>
</body>
</html>
La página web quedaría de la siguiente manera:

ETIQUETA DEL (TACHADO)

en 9:04

Posee el mismo efecto de la etiqueta <s></s>
Ejemplo: supongamos el siguiente documento .html
<html>
<head>
<title> Prueba Tachado del</title>
</head>
<body>
Texto sin tachar
<br>
<del>texto tachado</del>
</body>
</html>
La página web quedaría de la siguiente manera:

ETIQUETA CENTER (CENTRAR)

en 9:02

Esta etiqueta se utiliza para alinear el texto hacia el centro de la pagina web. Todo lo que esta dentro de estas etiquetas las elineara hacia el centro no importa si son diferentes tipos de etiquetas si estan dentro de la etiqueta centrar las centrara
Ejemplo: supongamos el siguiente documento .html
<html>
<head>
<title> Prueba centrar </title>
</head>
<body>
TEXTO SIN CENTRAR
<center>TEXTO CENTRADO</CENTER>
</body>
</html>
La página web quedaría de la siguiente manera:

ETIQUETA BIG

miércoles, 29 de septiembre de 2010 en 9:27

Esta etiqueta aumenta el tamaño de la letra sin necesidad de especificar su valor.

Ejemplo: supongamos el siguiente documento .html
<html>
<head>
<title> Prueba BIG </title>
</head>
<body>
Normal    <br>
<big>Grande</big>    <br>
<big><big>+Grande</big></big>    <br>
<big><big><big>++Grande</big></big></big>    <br>
<big><big><big><big>+++Grande</big></big></big></big>    <br>
</body>
</html>
La página web quedaría de la siguiente manera:

MINI TUTORIAL CSS

en 9:10

MINI TUTORIAL CSS

Comenzando con HTML + CSS

• 1. HTML

• 2. Añadir color

• 3. Añadir tipo de letra

• 4. Barra de navegación

• 5. Dar estilo a los enlaces

• 6. Línea horizontal

• 7. CSS externa

Este breve tutorial está pensado para aquellas personas que quieren comenzar a utilizar CSS y nunca han escrito una hoja de estilos CSS.

No explica mucho sobre CSS. Se centra en cómo crear un archivo HTML, un archivo CSS y cómo hacer que los dos funcionen juntos. Una vez finalizado este tutorial, podréis leer cualquiera de los otros tutoriales para darle más estilo a los archivos HTML y CSS. También podréis utilizar un editor de HTML o CSS, para desarrollar sitios Web más avanzados.

Paso 1: Escribir el código HTML

en 9:09

Paso 1: Escribir el código HTML

Para este tutorial, te sugiero que utilices las herramientas más sencillas. Por ejemplo, Notepad (Windows), TextEdit (Mac) o HTML Kit, serán suficiente. Una vez comprendido lo básico, probablemente se quieran utilizar herramientas más complicadas, o incluso programas comerciales como Style Master, Dreamweaver o GoLive. Pero para el desarrollo de una primera hoja de estilos, es mejor no distraerse con características avanzadas de otras herramientas.
No utilices procesadores de texto como Microsoft Word u OpenOffice. Con ellos, normalmente se generan archivos que los navegadores no pueden interpretar. Para HTML y CSS, lo único que necesitamos son archivos en texto plano.
El paso 1 consiste en abrir tu editor de texto (Notepad, TextEdit, HTML Kit o el que desees), comenzar con una ventana vacía y escribir lo siguiente:
<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01//EN">
<html>
<head>
<title>Mi primera página con estilo</title>
</head>

<body>


<ul class="navbar">
<li><a href="indice.html">Página principal</a>
<li><a href="meditaciones.html">Meditaciones</a>
<li><a href="ciudad.html">Mi ciudad</a>
<li><a href="enlaces.html">Enlaces</a>
</ul>


<h1>Mi primera página con estilo</h1>

<p>¡Bienvenido a mi primera página con estilo!

<p>No tiene imágenes, pero tiene estilo.
También tiene enlaces, aunque no te lleven a
ningún sitio…

<p>Debería haber más cosas aquí, pero todavía no sé
qué poner.


<address>Creada el 5 de abril de 2004<br>
por mí mismo.</address>

</body>
</html>
En realidad, no es necesario escribir el código: puedes copiarlo y pegarlo directamente en un editor.
La primera línea que aparece en el archivo HTML, le dice al navegador el tipo de HTML (DOCTYPE significa DOCument TYPE - en español: TIPO de DOCumento). En este caso, se trata de la versión 4.01 de HTML.
Las palabras que se encuentran entre < y > se llaman etiquetas (tags) y, como puedes ver, el documento está entre las etiquetas <html> y </html>. Entre <head> y </head> hay espacio para diferentes tipos de información que no aparecerán en la pantalla. Hasta ahora, el documento sólo contiene el título pero posteriormente también se añadirá la hoja de estilos de CSS.
El <body> es dónde se sitúa el texto del documento. En un principio, cualquier cosa que se coloque ahí será mostrado, excepto el texto que esté dentro de las siguientes etiquetas , las cuales muestran el contenido situado en ese lugar como un comentario de referencia para nosotros mismos. El navegador la ignorará.
De las etiquetas del ejemplo, <ul> crea una “lista desordenada”, es decir, una lista en la cual los elementos no están numerados. La etiqueta <li> indica el comienzo de un “elemento lista”. <p> es un “párrafo”. Y <a> es un “enlace”, que es lo que crea un hipervínculo.

Editor mostrando el código HTML.
Si quieres saber lo que significan los nombres que están entre <…>, un buen sitio para empezar es Comenzando con HTML. Realizaré algunos comentarios sobre la estructura de la página HTML que estamos utilizando de ejemplo.
• “ul” representa una lista con un hipervínculo por cada elemento. Esto mostrará nuestro “menú de navegación del sitio” con enlaces a otras páginas (ficticias) del sitio Web. Supuestamente, todas las páginas de nuestro sitio Web tienen un menú similar.
• Los elementos “h1” y “p” componen el único contenido de esta página, mientras que la firma al final (“address”) será la misma para todas las páginas del sitio.
Observa que no he cerrado los elementos "li" y "p". En HTML (pero no en XHTML), se pueden omitir las etiquetas </li> y </p>, que fue lo que hice aquí, precisamente para hacer el texto más sencillo de leer. Pero si se prefiere pueden ser añadidas.
Vamos a suponer que va a ser una página de un sitio Web que tendrán varias páginas similares. Como es frecuente en páginas Web, ésta tiene un menú con enlaces a otras páginas en el sitio ficticio, un contenido único y una firma.
Ahora, selecciona “Guardar como…” del menú Archivo, ve hasta un directorio/carpeta donde quieras guardar el documento (el escritorio puede ser una opción) y guarda el archivo como “mipagina.html”. No cierres todavía el editor, lo necesitarás otra vez.
Después, abre el archivo en un navegador de la siguiente forma: encuentra el archivo con tu administrador de archivos (Windows Explorer, Finder o Firefox) y haz clic, o doble clic, sobre el archivo “mipagina.html”. El archivo HTML debería abrirse en tu navegador predeterminado. (Si no se abre el documento, abre el navegador y arrastra el archivo sobre él).
Como puedes ver, la página tiene un aspecto bastante aburrido...

Paso 2: Añadir algunos colores

en 9:08

Paso 2: Añadir algunos colores

Probablemente estés viendo texto negro sobre un fondo blando, pero esto depende de cómo esté tu navegador configurado. Para que la página tenga algo más de encanto podemos añadir algunos colores. (Deja el navegador abierto, lo utilizaremos más tarde).
Comenzaremos con una hoja de estilo interna en el archivo HTML. Más adelante, pondremos el HTML y el CSS en archivos diferentes. La separación de estos archivos es recomendable ya que facilita la utilización de la misma hoja de estilo para diferentes archivos HTML: sólo tienes que escribir la hoja de estilo una vez. Pero en este paso, vamos a dejarlo todo en el mismo archivo.
Necesitamos añadir un elemento <style> en el archivo HTML. La hoja de estilo estará en el interior de ese elemento. Volvamos entonces a la ventana del editor y añadamos las siguientes cinco líneas en la parte de la cabecera del archivo:

<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01//EN">
<html>
<head>
<title>Mi primera página con estilo</title>
<style type="text/css">
body {
    color: purple;
    background-color: #d8da3d }
</style>
</head>

<body>
[etc.]
Las líneas que tienes que añadir están marcadas en rojo. La primera línea dice que eso es una hoja de estilo y que está escrita en CSS ("text/css"). La segunda línea indica que hemos añadido estilo al elemento "body". La tercera línea establece el color del texto como morado y la siguiente línea lo que hace es darle al fondo una especie de amarillo verdoso.
Las hojas de estilo en CSS están compuestas de reglas. Cada regla tiene tres partes:
1.    el selector (en el ejemplo sería: “body”), el cual le dice al navegador la parte del documento que se verá afectada por la regla;
2.    la propiedad (en el ejemplo, 'color' y 'background-color' son ambas propiedades), las cuales especifican qué aspecto del diseño va a cambiarse;
3.    y el valor ('purple' y '#d8da3d'), el cual da el valor para la propiedad.
El ejemplo muestra que es posible combinar las reglas. Hemos establecido dos propiedades, por lo que podemos tener dos reglas separadas:
body { color: purple }
body { background-color: #d8da3d }
ya que las dos reglas van a afectar al elemento body, sólo tenemos que escribir "body" una vez, y poner juntas las propiedades y valores. Para obtener más información sobre selectores, revisa el capítulo 2 de Lie & Bos.
El fondo del elemento body será el fondo para todo el documento. A los otros elementos (p, li, address…) no se les ha dado ningún fondo en concreto, por lo que de forma predeterminada no tendrán ninguno (o serán transparentes). La propiedad 'color' establece el color del texto que se encuentra en el elemento body, pero los otros elementos que se encuentran dentro de body heredarán ese color, a no ser que se especifique lo contrario. (Más adelante añadiremos más colores).
Ahora guarda el archivo (utiliza “Guardar” del menú Archivo) y vuelve a la ventana del navegador. Si haces clic en "Actualizar", la página "aburrida" que se mostraba al principio, pasará a ser una página con colores (pero aún sigue siendo muy aburrida). Aparte de la lista de enlaces que se encuentra al principio, el texto debería tener ahora el color morado sobre un fondo de color amarillo verdoso.

Paso 3: Añadir tipo de letra

en 8:30

Paso 3: Añadir tipo de letra

Otra cosa que es muy fácil de hacer es añadir diferentes tipos de letra para los diversos elementos de la página. Veamos el texto con el tipo de letra “Georgia”, excepto la cabecera h1, que irá con “Helvetica”.
En la Web, nunca puedes estar seguro de los tipos de letra que los usuarios tienen en sus ordenadores, por lo que añadiremos algunas alternativas: si Georgia no está disponible, Times New Roman o Times también pueden valer, y si ninguna de esas está presente, el navegador puede utilizar cualquier otro tipo de letra conserifs. Si Helvetica no está, Geneva, Arial y SunSans-Regular son bastante similares, y si ninguna de estas funciona, el navegador puede escoge cualquier otro tipo de letra que no sea serif.
Añade en el editor de texto las siguientes líneas:
<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01//EN">
<html>
<head>
<title>Mi primera página con estilo</title>
<style type="text/css">
body {
font-family: Georgia, "Times New Roman",
          Times, serif;
    color: purple;
    background-color: #d8da3d }
h1 {
    font-family: Helvetica, Geneva, Arial,
          SunSans-Regular, sans-serif }
</style>
</head>

<body>
[etc.]
Si guardas otra vez el archivo y haces clic en "Actualizar" en el navegador, deberían aparecer tipos de letra diferentes para el encabezado y para el otro texto.

Paso 4: Añadir una barra de navegación

en 8:29

Paso 4: Añadir una barra de navegación

La lista que aparece al principio de la página HTML será más adelante un menú de navegación. Algunos sitios Web tienen un menú al principio o en un lado de la página, y éste debería tenerlo también. Pondremos uno a la izquierda, ya que es más interesante ponerlo ahí que arriba…
El menú ya está en la página HTML. Es la lista <ul> que se encuentra al principio. Los enlaces que tiene no funcionan ya que nuestro "sitio Web", hasta el momento, sólo tiene una página, pero eso no es importante ahora. Por supuesto, en un sitio Web real no debería haber ningún enlace roto.
Tenemos que mover la lista a la izquierda y colocar el resto del texto un poco más hacia la derecha, para dejar espacio para el menú. Las propiedades de CSS que vamos a utilizar son 'padding-left' (para mover el texto del elemento body) y 'position' (para mover el menú).
Hay otras formas de hacerlo,pero, por el momento, ésta está bien.
En la ventana del editor, añade las siguientes líneas al archivo HTML:

<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01//EN">
<html>
<head>
<title>Mi primera página con estilo</title>
<style type="text/css">
body {
padding-left: 11em;
    font-family: Georgia, "Times New Roman",
          Times, serif;
    color: purple;
    background-color: #d8da3d }
ul.navbar {
    position: absolute;
    top: 2em;
    left: 1em;
    width: 9em }
h1 {
    font-family: Helvetica, Geneva, Arial,
          SunSans-Regular, sans-serif }
</style>
</head>

<body>
[etc.]
Si guardas otra vez el archivo y lo actualizas en el navegador, deberías tener la lista de enlaces a la izquierda del texto principal. Ahora el resultado parece mucho más interesante ¿verdad?

Paso 5: Dar estilo a los enlaces

en 8:28

Paso 5: Dar estilo a los enlaces

El menú de navegación todavía parece una lista en lugar de un menú. Vamos a cambiar su aspecto. Quitaremos los puntos que indican los diferentes elementos de la lista y moveremos los elementos a la izquierda, donde estaban antes los puntos. También le daremos a cada elemento un fondo blanco y un cuadrado negro. (¿Por qué? Por nada en particular, sólo porque podemos hacerlo).
No hemos especificado el color de los enlaces, vamos a añadirlo también: utilizaremos el azul para aquellos enlaces que el usuario no ha visitado todavía, y morado para los enlaces que ya ha visitado:
<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01//EN">
<html>
<head>
<title>Mi primera página con estilo</title>
<style type="text/css">
body {
    padding-left: 11em;
    font-family: Georgia, "Times New Roman",
          Times, serif;
    color: purple;
    background-color: #d8da3d }
ul.navbar {
list-style-type: none;
    padding: 0;
    margin: 0;
    position: absolute;
    top: 2em;
    left: 1em;
    width: 9em }
h1 {
    font-family: Helvetica, Geneva, Arial,
          SunSans-Regular, sans-serif }
ul.navbar li {
    background: white;
    margin: 0.5em 0;
    padding: 0.3em;
    border-right: 1em solid black }
ul.navbar a {
    text-decoration: none }
a:link {
    color: blue }
a:visited {
    color: purple }
</style>
</head>

<body>
[etc.]
Normalmente, los navegadores muestran los hipervínculos subrayados y con color. Los colores son parecidos a los que especificamos aquí: azul para enlaces a páginas que no has visitado todavía (o visitaste hace mucho tiempo), morado para páginas que ya has visitado.
En HTML, los hipervínculos se crean con elementos <a>, por lo que para especificar el color, necesitamos añadir una regla de estilo para "a". Para diferenciar los enlaces visitados de los no visitados, CSS proporciona dos "pseudo-classes" (:link y :visited). Se llaman “pseudo-classes” para distinguirlas de los atributos de clase, que aparecen directamente en HTML, por ejemplo, class="navbar".

Paso 6: Añadir una línea horizontal

en 8:27

Paso 6: Añadir una línea horizontal

El último elemento a añadir en la hoja de estilo es una regla horizontal para separar el texto de la firma que se encuentra al final. Utilizaremos 'border-top' para añadir una línea punteada encima del elemento <address>:
<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01//EN">
<html>
<head>
<title>Mi primera página con estilo</title>
<style type="text/css">
body {
    padding-left: 11em;
    font-family: Georgia, "Times New Roman",
          Times, serif;
    color: purple;
    background-color: #d8da3d }
ul.navbar {
    list-style-type: none;
padding: 0;
    margin: 0;
    position: absolute;
    top: 2em;
    left: 1em;
    width: 9em }
h1 {
    font-family: Helvetica, Geneva, Arial,
          SunSans-Regular, sans-serif }
ul.navbar li {
    background: white;
    margin: 0.5em 0;
    padding: 0.3em;
    border-right: 1em solid black }
ul.navbar a {
    text-decoration: none }
a:link {
    color: blue }
a:visited {
    color: purple }
address {
margin-top: 1em;
    padding-top: 1em;
    border-top: thin dotted }
</style>
</head>

<body>
[etc.]
Ahora, ya hemos terminado de darle estilo a la página. Lo siguiente es ver cómo se pone la hoja de estilo en un archivo diferente para que de esta forma otras páginas puedan utilizar el mismo estilo.

Paso 7: Poner la hoja de estilo en un archivo separado

en 8:26

Paso 7: Poner la hoja de estilo en un archivo separado

Ahora tenemos un archivo HTML con una hoja de estilo en su interior. Pero si nuestro sitio crece desearemos añadir más páginas que compartan el mismo estilo. Hay un método más adecuado que copiar la hoja de estilo dentro de cada página y que es: colocar la hoja de estilo en un archivo separado, haciendo que todas las páginas estén enlazadas a esa hoja.
Para separar la hoja de estilo del archivo HTML, necesitamos crear otro archivo de texto, que esté vacío. Puedes escoger "Nuevo" del menú Archivo del editor para crear una ventana vacía.
Después, corta y pega en la nueva ventana todo lo que hay dentro del elemento <style> del archivo HTML. No copies las etiquetas <style> y </style>. Éstas pertenecen a HTML, no a CSS. En la nueva ventana del editor, deberías tener la hoja de estilo completa:

body {
padding-left: 11em;
font-family: Georgia, "Times New Roman",
Times, serif;
color: purple;
background-color: #d8da3d }
ul.navbar {
list-style-type: none;
padding: 0;
margin: 0;
position: absolute;
top: 2em;
left: 1em;
width: 9em }
h1 {
font-family: Helvetica, Geneva, Arial,
SunSans-Regular, sans-serif }
ul.navbar li {
background: white;
margin: 0.5em 0;
padding: 0.3em;
border-right: 1em solid black }
ul.navbar a {
text-decoration: none }
a:link {
color: blue }
a:visited {
color: purple }
address {
margin-top: 1em;
padding-top: 1em;
border-top: thin dotted }
Elige “Guardar como…” del menú Archivo, comprueba que está en el mismo directorio/carpeta que el archivo mipagina.html, y guarda la hoja de estilo como “miestilo.css”.
Vuelve a la ventana que muestra el código HTML. Borra todo lo que hay desde la etiqueta <style> hasta </style>, ambas inclusive, y reemplázalo por un elemento <link> de la siguiente forma:
<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01//EN">
<html>
<head>
<title>Mi primera página con estilo</title>
<link rel="stylesheet" href="miestilo.css">
</head>

<body>
[etc.]
De esta forma, se le indicará al navegador que la hoja de estilo se encuentra en el archivo llamado "miestilo.css". Al no especificarse ningún directorio, el navegador mirará en el mismo directorio en el que se encuentra el archivo HTML.
Si has guardado el archivo HTML y lo has actualizado en el navegador, no deberías apreciar ningún cambio en el aspecto de la página. Ésta sigue guardando el mismo estilo, pero ahora viene establecido por el archivo externo.

Resultado final
El siguiente paso es poner ambos archivos, mipagina.html y miestilo.css, en vuestro sitio Web. (Quizá queráis primero cambiarlos un poco…), pero la forma de realizar esto depende de vuestro proveedor de Internet.

INSERTAR FLASH EN UNA PAGINA WEB

en 7:41

INSERTAR FLASH EN UNA PAGINA WEB

A muchos usuarios les trae de cabeza insertar una animación Flash, un archivo swf, en su web, pero es algo muy sencillo. Lo primero que hay que tener en cuenta es que el archivo debe tener la extensión swf, no valen archivos .fla o .swi o cualquier otro formato, debe ser siempre .swf.
Una vez tenemos el archivo .swf, lo copiaremos al mismo directorio donde está nuestro archivo .html, para simplificar las cosas. Por último, nos queda poner un código exactamente donde queremos que aparezca la animación. Este es el código:

<object classid="clsid:D27CDB6E-AE6D-11cf-96B8-444553540000" codebase="http://download.macromedia.com/pub/shockwave/cabs/flash/swflash.cab#version=6,0,29,0" width="32" height="32">
<param name="movie" value="archivo.swf" />
<param name="quality" value="high" />
<embed src="archivo.swf" quality="high" pluginspage="http://www.macromedia.com/go/getflashplayer" type="application/x-shockwave-flash" width="32" height="32"></embed>
</object>

En el código hay varias cosas que debes cambiar, según tu animación. Primero, el archivo, en el ejemplo puedes ver "archivo.swf" en dos lugares, debes cambiar ambos por el nombre de tu archivo. En segundo lugar, debes cambiar el tamaño, si te fijas, verás dos pares de "width" y "height" que tienen un valor de 32 píxeles. Debes cambiarlos todos para ponerlos al tamaño que quieres darle a tu animación.
Con este código, si un usuario no tuviese el plug-in necesario para reproducir animaciones flash este código le indicaría donde bajarlo.

Html Extremo

Aviso