En este artículo voy a resumir lo que és HTML. Después de leer este artículo probablemente no necesitarás volver a buscar nada más acerca de HTML al menos que quieras hacer cosas muy avanzadas o salga una nueva versión de HTML como por ejemplo HTML 5.

Índice

Este artículo es un poco largo y tal vez ya sabes algunas cosas, es por esta razón que mejor poner un índice, sin embargo considero que te haría bien leer todo el tutorial:

• • ¿Qué es HTML?
    • Elementos o tags
    • Atributos
    • Eventos
    • Comentarios
    • Caracteres especiales
    • Saltos de línea
    • Extensión html
  • Páginas web
    • Doctype
    • Estructura básica
    • Marcos o Frames
    • Anchors o Bookmarks
    • Formularios
    • Meta tags
    • Favicon
  • Incluyendo Javascript
    • Embebido
    • Incluido
    • Enlazado
    • No Script
    • Algunos trucos
    • Cerrar la ventana
    • Detectar carga completa
  • Inclyendo CSS
    • Embebido
    • Incluido
    • Enlazado
    • Colores y fondos
    • Posicionamiento
    • Fuentes
  • Tags comunes
    • a
    • div
    • span
    • p
    • h1, h2, h3, h4, h5, h6
    • pre
    • code
    • hr
    • br
    • input
    • textarea
    • sup
    • sub
    • select, option, optgroup
    • ul, li
    • ol, li
    • table, tr, td, th
    • img
    • strong
    • fieldset
  • Trucos básicos
    • Refrescar
    • Redireccionar
    • Desactivando el cache

Regresar al índice¿Qué es HTML?

HTML o HyperText Markup Language es el lenguaje predominante en las páginas web. HTML simplemente es un estándar que establece una serie de normas de tal forma que podamos redactar documentos estructurados compuestos por diferentes partes.

En el fondo, HTML simplemente especifica una serie de elementos también conocidos como tags que permiten representar partes de un documento. Por ejemplo si quiero agregar una tabla HTML me dice que debo agregar el elemento <table>.

HTML se parece a un documento XML pero es bastante más flexible en varios aspectos, sin embargo lo correcto siempre es escribir HTML como si fuera XML para asegurarnos de que no existan anidaciones incorrectas como por ejemplo <code><strong>hola</code></strong> que será válido para HTML pero no en XML. Debido a esto surge el lenguaje XHTML que es una mezcla de HTML y XHTML. Personalmente, lo único que escribo es XHTML porqué es bastante más ordenado.

HTML ha ido evolucionando y ahora está por salir su versión HTML 5, que a mi parecer es un HTML moderno y acomodado perfectamente a las páginas web de hoy. Creeme, si sabes HTML no vas a tener ningún problema en pasarte a HTML 5.

NOTA: HTML simplemente sirve para almacenar contenido de forma estructurada. Por más de que es posible decorar el contenido (colores, fondos, tipos de letra, etc), HTML no debería encargarse de ello sino que lo debería hacer CSS. Si te acostumbras a trabajar bajo esta idea, tu contenido será muy flexible a cambios y podrás dar mejor mantenimiento a tus aplicaciones.

Por ejemplo: Agrégale al url de copstone un parámetro get de la siguiente forma: ?theme=disableall, es decir, ingresa a http://copstone.com/?theme=disableall para que veas cómo se ve copstone sin hoja de estilos (CSS). Esto nos da bastante flexibilidad en el diseño y podemos rápidamente cambiar los colores, ubicación de elementos, etc con solo cambiar nuestra hoja de estilos (CSS).

Regresar al índiceElementos o Tags

Todos los documentos HTML están compuestos en su totalidad por Elementos o Tags. Los Tags deben tener un "tag de apertura" y un "tag de cierre".

Un ejemplo típico es:

<strong>Hola mundo</strong>

En este ejemplo puedes ver que el tag se llama "strong" y que los tags se deben escribir entre <> y al cerrar deberás ponerle un / antes del nombre del tag. En este caso este ejemplo muestra el texto "Hola Mundo" en negritas.

Es posible anidar tags siempre y cuando respetes el orden de apertura con el de cierre como por ejemplo:

<strong><i><u>Hola Mundo</u></i></strong>

En este ejemplo, el texto Hola Mundo está dentro de 3 tags anidados produciendo el siguiente resultado:

Hola Mundo

También es posible escribir tags que no tengan contenido y por lo tanto se pueden escribir de dos formas:

<hr></hr>

<hr />

Si te fijas en el primer ejemplo no tiene mucho sentido colocar un tag de cierre porque no hay nada entre el tag de apertura y el tag de cierre, es por esta razón que algunos tags se pueden escribir como en el segundo ejemplo.

Regresar al índiceAtributos

Adicionalmente, los tags pueden ir acompañados de atributos. En el caso de que los atributos no sean especificados se tomarán los valores por defecto.

Los atributos se deben colocar dentro del tag de apertura y en la forma nombre="valor". El valor puede estar escrito entre comillas dobles o simples.

Un ejemplo típico es:

<a href="http://copstone.com" title="Llevame a copstone">Ir a copstone</a>

En este ejemplo el tag se llama "a" y tiene dos atributos "href" y "title".

Los diferentes tags tienen diferentes atributos y con la práctica te vas a ir acostumbrando a cuales son pero existen 4 atributos que deberías conocer ya que están en todos los tags:

<span style="color:white; background-color:red;">Hola Mundo</span>

Hola <span style="color:white; background-color:red;">Mundo</span>.
Como <span style="color:white; background-color:red;">te</span> va

Hola <span class="resaltado">Mundo</span>.
Como <span class="resaltado">te</span> va

.resaltado {
  color:white;
  background-color:red;
}

Regresar al índiceEventos

Los eventos son muy parecidos a los atributos en cuanto a la forma como se escriben, sin embargo no definen como se ve un elemento sino como se comporta.

Por lo general los eventos se programan en conjunto con Javascript para producir resultados. Sin Javascript los eventos casi no tienen sentido ya que como HTML no es dinámico no podrá responder a los eventos sin la ayuda de Javascript.

Un ejemplo típico es el de detectar clic en una porción de texto y mostrar una alerta:

<span style="color:red;" onclick="alert('Hola mundo');">Di Hola Mundo</span>

El código anterior produce el siguiente resultado: Di Hola Mundo

Los eventos para cada tag varían, inclusive varían entre navegadores, pero puedes encontrar una lista bastante completa para cada tag en http://www.quackit.com/html/tags/.

Regresar al índiceComentarios

Muchas veces es necesario colocar comentarios en nuestro código, por lo que los comentarios en HTML son muy útiles.

Un comentario en HTML comienza con <!-- y termina con –>. Este comentario se puede expandir a través de múltiples líneas.

<strong>Hola</strong> Mundo!!!! <!-- Comienza -->
<!--
  Comentario
  largo para ejemplo
-->
<strong>Chao</strong> Mundo!!!! <!-- Termina -->

En HTML no existen comentarios de línea.

Regresar al índiceCaracteres especiales

Cuando trabajas con HTML tienes que tener mucho cuidado con los caracteres que utilices y el encoding que utilices. Por ejemplo si quisiera escribir un acento sobre la letra a (á) lo que normalmente haría es colocar la letra de forma directa. Sin embargo si mi encoding no es correcto es posible que la letra á se vea como una letra extraña o hasta un cuadrado.

HTML proporciona un medio para escribir caracteres especiales. Por ejemplo la letra á acentuada se puede escribir é por lo que la palabra árbol en HTML se podría escribir árbol.

Otro ejemplo en el que son útiles los caracteres especiales es para escribir el caractér < ya que al ser un caractér igual al que marca el inicio de un tag es posible que se confunda y malogre nuestro HTML. En este caso nos conviene utilizar < que es equivalente a <.

Así como existen reemplazos para á y < lo existen para muchos otros caracteres y símbolos y puedes encontrar una lista bastante completa en http://www.w3schools.com/tags/ref_entities.asp

Regresar al índiceSaltos de línea

En HTML, por defecto, no existen los saltos de línea, es decir, yo puedo escribir 5 palabras una debajo de otra en un documento de texto y estas se van a mostrar una al lado de la otra cuando visualice mi página web.

Por ejemplo si yo escribo mi HTML de la siguiente forma:

Hola
Mundo
Hola
Mundo

El resultado será Hola Mundo Hola Mundo.

Para realizar saltos de línea tenemos que incluir un tag de tipo salto de línea llamado br cada vez que queramos realizar un salto de línea.

Hola<br />
Mundo<br />
Hola<br />Mundo

El resultado será

Hola
Mundo
Hola
Mundo

A parte de los saltos de línea, cuando escribimos un texto muy largo (esté o no en varias líneas) automáticamente se agregarán los saltos de línea cuando se exceda el tamaño de la página, a esto se le conoce como WordWrap. Este efecto lo puedes evitar de dos formas:

1. Puedes reemplazar los espacios en blanco por &nbsp;

   Por ejemplo la línea Hola mundo Hola mundo se partirá en una o más líneas si la ventana es muy chica, sin embargo la línea Hola mundo Hola mundo no se partirá pero se verá exactamente igual que la primera.

2. Puedes agrupar el texto dentro de un tag span y agregar el estilo white-space: nowrap;

Regresar al índiceExtensión html

Por lo general la extensión que utilizan los archivos HTML es .html y algunas veces se utiliza la abreviación .htm. Sin embargo esto no tiene nada que ver con el archivo en sí ya que es puro texto lo que hace que sea una página web es la interpretación que se le da del mismo.

Dicho esto, es posible configurar un servidor web para que sirva páginas de tipo .copstone como HTML y funcionará de la misma forma que una página que tiene extensión .html

Regresar al índicePáginas web

Como HTML es el lenguaje más usado en el desarrollo de páginas web, tiene sentido describir como se declara y escribe una página web y todas sus partes.

Regresar al índiceDoctype

Los documentos HTML deben comenzar con un Document Type Declaration (doctype) que indica al navegador cómo se debe visualizar la página. El doctype se introdujo para evitar que los navegadores renderizen el contenido como mejor les parezca y lo renderizen según el doctype que hemos colocado que asocia a tu página web con un DTD.

El Doctype en una página web debería ser la primera instrucción y no debería haber nada antes del doctype, ni siquiera espacios en blanco si quieres que tu página se muestre correctamente.

La sintaxis básica de un tag doctype es la siguiente:

<!DOCTYPE root-element [SYSTEM OR PUBLIC FPI] "uri" [<!-- internal declarations -->]>

Existen muchas formas de declarar un doctype pero lo más importante que debes fijarte es en lo siguiente:

Existen dos versiones principales HTML y XHTML. Esto depende si tu página está escrita en HTML o XHTML. Por lo general es una buena costumbre siempre escribir tus páginas en XHTML.

Existen tres tipos básicos Strict, Transitional y Frameset. Strict no permite utilizar atributos y tags antiguos mientras que Transitional si los permite dándo más flexibilidad a tu página. Frameset es el doctype a utilizar si tienes una página con frames.

Dicho esto lo único que me queda es mostrarte algunos ejemplos de doctype:

Para HTML

Strict

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">

Transitional

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">

Frameset

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Frameset//EN" "http://www.w3.org/TR/html4/frameset.dtd">

Para XHTML

Strict

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">

Transitional (ESTE ES EL MÁS USADO)

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">

Frameset

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Frameset//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-frameset.dtd">

Existen bastantes otros tipos de doctype pero creo que estos son los únicos que necesitas saber por el momento. Si necesitas saber más acerca de doctype simplemente haz una búsqueda en internet y deberías poder encontrar más información.

Regresar al índiceEstructura básica

Una página web tiene la siguiente estructura básica:

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html>

	<head>
	</head>

	<body>
	</body>

</html>

Como puedes ver, comienza con un doctype (el de tu elección). Todo el contenido de la página web se encuentra dentro del tag html y se separa en dos partes head y body. Dentro del tag head se coloca todo el contenido que no es visible pero es necesario para la página como por ejemplo el título, la descripción, el autor, inclusión de CSS y/o Javascript, etc. Dentro del tag body se coloca todo el contenido que es visible y se mostrará en la página.

Como dice el manual del buen programador comencemos con una página que diga Hola Mundo.

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html>

	<head>
		<title>Bienvenido a Hola Mundo</title>
	</head>

	<body>
		<h1>Hola Mundo</h1>
	</body>

</html>

En este ejemplo puedes notar que he agregado un tag title en el head. Este texto "Bienvenido a Hola Mundo" no se mostrará en la página pero si aparecerá en la barra de título de tu navegador. (El tag title es muy importante ya que los buscadores lo utilizan para mostrar tu página dentro de sus resultados). Además he agregado un tag h1 dentro del body para que aparezca el texto "Hola Mundo" en mi página web en letras grandes.

De aquí en adelante ya depende de que contenido y tags pongas en el body para poder crear páginas web.

Regresar al índiceMarcos o Frames

Un Marco o un Frame es como una sub ventana dentro de tu ventana principal. En una página puedes tener cuantos frames quieras e inclusive frames dentro de frames, ya depende del nivel de complejidad que quieras manejar.

Lo interesante de los frames es que cada frame puede apuntar a una página web diferente dándote bastante flexibilidad en el desarrollo. Por ejemplo podrías tener un frame que apunte a tu página que solamente muestra el menú y otro frame que apunte a la página que tiene el contenido.

Para entender como utilizar Frames primero tienes que entender como funcionan dos tags Frameset y Frame.

Frameset

Un frameset es un contenedor de frames. El frameset es el que definirá las dimensiones y posicionamiento de cada frame.

El frameset tiene dos atributos importantes: cols y rows que permiten definir el ancho y alto de los frames que contiene. Es importante que tengas en cuenta que el frameset ocupa toda la ventana y las dimensiones de ancho y alto se calculan en proporción a esto.

Un frameset puede contener a otros frameset de tal forma que puedes complicar la vista como quieras.

Frame

El frame es el contenedor de la página en sí y siempre deberá estar dentro de un frameset. Un frame, a través de sus atributos puede definir si permitirá que se cambie su tamaño, si tiene bordes, si tiene barra de desplazamiento etc.

El atributo más importante del frame es src que indica la ruta de la página que deberá mostrar.

Ejemplos

En lugar de explicarte a detalle cada una de las alternativas con frames, simplemente voy a mostrarte una serie de ejemplos y sus resultados. En lugar de crear mis propias páginas voy a referenciar a páginas conocidas en mis frames.

Ten en cuenta que tu página web con frames ya no tiene un body tag sino que ahora tiene un frameset tag. Además ten en cuenta que el doctype cambia a ser frameset.

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Frameset//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-frameset.dtd">
<html>
	<head>
		<title>Ejemplo 1</title>
	</head>

	<frameset cols="25%,*,120px">
	  <frame src="http://www.google.com" />
	  <frame src="http://copstone.com" />
	  <frame src="http://www.yahoo.com" />
	</frameset>
</html>

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Frameset//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-frameset.dtd">
<html>
	<head>
		<title>Ejemplo 2</title>
	</head>

	<frameset rows="25%,*,120px">
	  <frame src="http://www.google.com" />
	  <frame src="http://copstone.com" />
	  <frame src="http://www.yahoo.com" />
	</frameset>
</html>

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Frameset//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-frameset.dtd">
<html>
	<head>
		<title>Ejemplo 3</title>
	</head>

	<frameset cols="25%, *">
	  <frame src="http://www.google.com" />
	  <frameset rows="25%, *">
	  	<frame src="http://www.yahoo.com" />
	  	<frame src="http://copstone.com" />
	  </frameset>
	</frameset>
</html>

Cuando trabajas con frames puedes colocarle a cada frame el atributo name para tener una forma de identificarlos. Una vez hecho esto puedes asignar el nombre al atributo target de tus tags a para que puedas abrir una página en un frame haciendo clic en el enlace desde otro frame. Aquí te dejo un ejemplo.

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Frameset//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-frameset.dtd">
<html>
	<head>
		<title>Ejemplo 4</title>
	</head>

	<frameset cols="25%, *">
	  <frame src="menu.html" />
	  <frame src="http://copstone.com" name="miframe" />
	</frameset>
</html>

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html>
	<head>
		<title>Menu</title>
	</head>
	<body>
		<h1>Menu</h1>
		<a href="http://copstone.com" target="miframe">Copstone</a><br/>
		<a href="http://www.google.com" target="miframe">Google</a><br/>
		<a href="http://www.yahoo.com" target="miframe">Yahoo</a><br/>
	</body>
</html>

Advertencia

Cuando trabajas con marcos tienes que tener mucho cuidado de comunicarlas correctamente para evitar problemas de seguridad. En general no te recomiendo trabajar con Frames al menos que sea estrictamente indispensable.

IFrame

Existe un tipo adicional de Frame que puedes utilizar dentro de tu tag body en una página convencional para mostrar el contenido de otra página. Aquí te dejo un ejemplo que muestra la página de copstone dentro de otra página.

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html>
	<head>
		<title>Bienvenido a Hola Mundo</title>
	</head>
	<body>
		<h1>Este es copstone</h1>
		<iframe src="http://www.copstone.com"></iframe>
		<h1>Un blog de programación</h1>
	</body>
</html>

Regresar al índiceAnchors o Bookmarks

Muchas veces puedes tener páginas que tengan una gran cantidad de contenido y quieres agregarle la posibilidad de poner links que te lleven a partes de la página, como por ejemplo el índice de este post y los links "Regresar al índice".

Para poder crear esto lo primero que tienes que hacer es crear anchors o también llamados bookmarks en tu página. Para crear un anchor lo único que tienes que hacer es agregar un tag de tipo a y colocarle un valor a su atributo name.

<a name="parte1"></a>

El anchor lo puedes ubicar en cualquier lugar de tu página y no necesariamente tiene que tener un contenido, simplemente ten en cuenta que el navegador te llevará hasta la posición dónde se encuentra el anchor así que ubícalo bien. Si quieres también puedes usar tus links normales como anchors.

Ahora simplemente agrégale #parte1 a tu url (http://localhost/index.html#parte1) para que cuando cargue la página se dirija automáticamente a esta parte. Ten en cuenta que si el navegador no puede bajar lo suficiente es probable que la parte1 aparezca a la mitad de la pantalla en lugar de en la parte de arriba.

Además, ahora puedes agregar links a tu página para dirigirte a otras partes de la misma. Por ejemplo voy a mostrarte como agregar un link que te lleve a la parte1 de esta página.

<a href="#parte1">Ir a la parte 1</a>

Regresar al índiceFormularios

Los formularios en las páginas web, son muy útiles cuando necesitamos solicitar información al usuario. Esta información puede ser llenada a través de formularios web.

Un formulario encierra a todo su contenido dentro del tag form. Este tag tiene dos atributos importantes: action que define la página a dónde se enviará la información y method que define si el método será post o get.

El método get envía los valores en el url (ejemplo localhost/index.html?s=abc&d=efg) mientras que el post los envía en la petición (invisibles para el usuario). Además el método post permite recibir muchas más cosas que solo texto (imágenes, videos, etc).

Dentro del tag form pueden existir muchos otros tags, sin embargo solamente los tags de ingreso de datos que tengan el atributo name serán enviados al enviar la solicitud.

Aquí te muestro un formulario simple para el ingreso de usuario y contraseña y así te puedas dar una idea de como funcionan los formularios.

<form action="autentica.html" method="POST">
	<strong>Usuario:</strong>
	<input type="text" name="usuario" value="" />
	<br/>

	<strong>Contraseña:</strong>
	<input type="password" name="clave" value="" />
	<br/>

	<input type="submit" value="Ingresar" />
	<input type="reset" value="Limpiar" />
</form>

Debería existir una página autentica.html que se encargue de procesar los valores enviados pero para esto necesitamos hablar sobre lenguajes web dinámicos como PHP o ASP. No es la idea de este artículo entrar en mucho detalle sobre formularios así que no lo haré en esta ocasión y más adelante iré profundizando en el tema con otros artículos.

Regresar al índiceMeta tags

Los meta tags son una especie de tags que no son visibles para el usuario y que van en la sección head de la página web.

Con los meta tags como su nombre lo dice definen los meta datos (es decir datos acerca de los datos de la página, valga la redundancia). Estos son utilizados por los buscadores principalmente para obtener información de la página y así poder indexar mejor las mismas. Además permiten especificar idiomas, tipos de codificación y otras cosas más que son de vital importancia para que los navegadores como IE, Firefox, Chrome, etc. puedan mostrar de forma correcta nuestro contenido.

Aquí te dejo con unos cuantos meta tags que deberías tener en cuenta:

<head>
	<!-- Define el encoding de la página -->
	<meta http-equiv="Content-Type" content="text/html;charset=UTF-8" />

	<!-- Descripción corta de la página para ser usada por los buscadores -->
	<meta name="description" content="Mi primera pagina web con HTML" />

	<!-- Palabras claves (no todos los buscadores lo usan) -->
	<meta name="keywords" content="HTML,primera,web" />

	<!-- El autor de la página -->
	<meta name="author" content="Copstone Admin" />

	<title>Ejemplo 4</title>
</head>

Regresar al índiceFavicon

El Favicon es el ícono que aparece al lado de cada una de las páginas web en la barra de título de tu navegador. Si miras tu navegador puedes ver que el favicon de copstone es:

Para agregar un favicon lo primero que necesitas es un ícono (ten en cuenta que no es una imagen con extensión .ico sino que es in ícono con extensión .ico así que no pruebes cambíandole la extensión a un archivo .jpg)

Una vez que tengas el ícono cópialo a la raíz de tu servidor web con el nombre favicon.ico. Esto debería ser suficiente para que ahora todas tus páginas utilicen ese ícono. Sin embargo, vamos a asegurarnos de que esté agregado en todos los navegadores agregando un tag link al head de la página:

<head>
	<link rel="shortcut icon" href="http://localhost/favicon.ico"/>
</head>

Lo único que deberías cambiar es la ruta de dónde se encuentra tu favicon.ico. El atributo rel="shortcut icon" es necesario para que el navegador sepa que este es el favicon.

Regresar al índiceIncluyendo Javascript

Javascript es el lenguaje de programación que utilizan la gran mayoría de páginas web para realizar efectos visuales o ajax en el lado cliente. Javascript solo se ejecuta del lado cliente, es decir, en la máquina del usuario.

En este artículo no hablaré mucho de Javascript y de la potencia que este tiene, lo único que mostraré es como incluirlo en tus páginas web. Existen tres principales formas de incluirlo en tus páginas puede ser embebido, incluido o enlazado.

Regresar al índiceEmbebido

La forma más simple es agregar código javascript directamente en los atributos de los tags como se muestra en la sección de Eventos.

La gran ventaja de este método es que se puede agregar javascript de forma rápida. El problema con este método es que no permite reutilizar código.

Regresar al índiceIncluido

Otra forma es incluyendo el código mediante tags de tipo script. Estos tags por lo general van en la sección head de la página pero pueden estar en cualquier lado de la página.

<html>
	<head>
		<script type="text/javascript">
			function saluda() {
				alert("Hola mundo");
			}
		</script>
	</head>

	<body>
		<a onclick="saluda();">DI HOLA</a>
	</body>
</html>

En este ejemplo, al hacer clic sobre el texto "DI HOLA" se llamará a la función saluda que ha sido incluida en el head.

Este método es muy común ya que permite reutilización dentro de la misma página. Además este método permite generar javascript de forma automática con lenguajes como PHP y hacer que las páginas respondan de manera distinta cada vez.

Regresar al índiceEnlazado

La última forma de incluir código javascript es a través de un enlace a otro archivo. Para esto es necesario contar con otro archivo, por lo general con extensión .js (javascript) que contenga el código a incluir. El archivo javascript, llamémoslo funciones.js, debería tener lo siguiente:

function saluda() {
	alert("Hola mundo");
}

y debemos agregar este archivo en la sección head de nuestra página a través de un enlace en el tag script:

<html>
	<head>
		<script type="text/javascript" src="http://localhost/funciones.js"></script>
	</head>

	<body>
		<a onclick="saluda();">DI HOLA</a>
	</body>
</html>

Este ejemplo debería funcionar igual que los dos anteriores.

Esta es la mejor forma de agregar javascript que no sea dinámico debido a que al estar en un archivo adicional le das la oportunidad al navegador a guardarlo en caché y así acelerar la velocidad de carga de tu página. Además, al estar en un archivo por separado es más fácil hacer una modificación y que todos los documentos que incluyan a este archivo se actualicen.

Regresar al índiceNo Script

Por más de que Javascript está presente en la gran mayoría de navegadores y son muy pocas las personas que no lo tienen activado por defecto en su navegador (se pierden de mucho), es necesario que podamos detectar cuando una página no tiene activado javascript.

El tag noscript es un tag que solamente se mostrará en el caso de que el navegador no tenga activado javascript. En este caso puedes mostrarle un mensaje al usuario diciéndole que esta página necesita javascript para funcionar correctamente. Te muestro un ejemplo:

<html>
	<head>
		<script type="text/javascript" src="http://localhost/funciones.js"></script>
	</head>

	<body>
		<a onclick="saluda();">DI HOLA</a>
		<noscript>
				<br/>
				Si hubieras activado javascript
				aparecería un mensaje cuando haces clic
		</noscript>
	</body>
</html>

Prueba activando y desactivando javascript en tu navegador para que veas la diferencia.

Regresar al índiceAlgunos trucos

Este artículo no es para enseñar Javascript pero te dejo con dos trucos sencillos para que los puedas agregar a tus páginas:

Regresar al índiceCerrar la ventana

Crear un link que cierre la ventana.

<a onclick="window.close();">Cerrar la ventana</a>

Regresar al índiceDetectar carga completa

Muchas veces es necesario detectar cuando la página terminó de cargar por completo como imágenes, videos y texto para recién hacer algo. En este caso cuando la página terminó de cargar voy a mostrar un mensaje que diga "Página cargada". Para esto hay que interceptar el evento onload del tag body.

<html>
	<head>
		<title>Detectar carga completa</title>
	</head>

	<body onload="alert('Página cargada');">
		<h1>Hola Mundo</h1>
	</body>
</html>

Regresar al índiceInclyendo CSS

CSS o Cascading Style Sheet es un lenguaje de presentación utilizado para definir como se visualiza una página web.

No puedo enfatizar más el hecho de que tus páginas web deberían estar separadas de tal forma que el HTML sólo se utilice para estructurar el contenido de la página y el CSS se encargue de posicionar y darle color a la página. Si separas la presentación del contenido será mucho más fácil modificar tu página y reposicionar los elementos dentro de la misma.

Para que te des una idea puedes ver copstone sin CSS en el siguiente link http://copstone.com/?theme=disableall. Como puedes ver, las imágenes, tipos de letras, colores y hasta posicionamiento de los elementos de la página no existen dentro del HTML sino que se agregan al momento de incluir mis hojas de estilo CSS lo cuál facilita bastante el hecho de cambiar colores y demás.

Regresar al índiceEmbebido

La forma más simple es agregar estilo es directamente en el atributo style de los tags como se muestra en la sección de Atributos.

La gran ventaja de este método es que no se puede reutilizar el estilo y tendríamos que agregarlo varias veces para producir resultados iguales a lo largo de la página.

Regresar al índiceIncluido

Otra forma es incluyendo los estilos mediante tags de tipo style. Estos tags por lo general van en la sección head de la página pero pueden estar en cualquier lado de la página. Existen varias formas de modificar los estilos de los elementos de la página y aquí te muestro tres. El primero #menu sirve para aplicar el formato al elemento que tiene como atributo id el valor menu. El segundo .resaltado sirve para aplicar el formato a todos los elementos que tengan como atributo class el valor resaltado. El tercero span sirve para aplicar formato a todos los elementos de tipo span.

<html>
	<head>
		<style type="text/css">
			#menu {
				border:3px solid red;
				background-color:silver;
				padding:10px;
				font-size:14px;
				color:blue;
			}
			.resaltado {
				background-color:red;
				color:white;
				font-weight:bold;
			}
			span {
				border-top:1px solid silver;
				border-left:1px solid silver;
				border-right:1px solid gray;
				border-bottom:1px solid gray;
				background-color:blue;
				color:white;
			}
		</style>
	</head>

	<body>
		<h1>Hola Mundo</h1>
		<div id="menu">
			<span>Opciones</span>
			<span>Otros</span>
			<span>Contactenos <a class="resaltado">aqui</a></span>
			<span>Acerca de</span>
		</div>

		<p>
			Esta es una página que muestra las <span>características</span>
			de las hojas de estilo <a class="resaltado">CSS</a> para la visualización
			de las páginas web.
		</p>
	</body>
</html>

Este método es muy común ya que permite reutilización dentro de la misma página. Además este método permite generar estilos de forma automática con lenguajes como PHP y hacer que las páginas respondan de manera distinta cada vez.

Regresar al índiceEnlazado

La última forma de incluir CSS es a través de un enlace a otro archivo. Para esto es necesario contar con otro archivo, por lo general con extensión .css (cascading style sheet) que contenga el código a incluir. El archivo css, llamémoslo estilos.css, debería tener lo siguiente:

#menu {
	border:3px solid red;
	background-color:silver;
	padding:10px;
	font-size:14px;
	color:blue;
}
.resaltado {
	background-color:red;
	color:white;
	font-weight:bold;
}
span {
	border-top:1px solid silver;
	border-left:1px solid silver;
	border-right:1px solid gray;
	border-bottom:1px solid gray;
	background-color:blue;
	color:white;
}
 

y debemos agregar este archivo en la sección head de nuestra página a través de un enlace en el tag link:

<html>
	<head>
		<link rel="stylesheet" type="text/css" href="http://localhost/estilos.css" />
	</head>

	<body>
		<h1>Hola Mundo</h1>
		<div id="menu">
			<span>Opciones</span>
			<span>Otros</span>
			<span>Contactenos <a class="resaltado">aqui</a></span>
			<span>Acerca de</span>
		</div>

		<p>
			Esta es una página que muestra las <span>características</span>
			de las hojas de estilo <a class="resaltado">CSS</a> para la visualización
			de las páginas web.
		</p>
	</body>
</html>

Este ejemplo debería funcionar igual al anterior.

Esta es la mejor forma de agregar css que no sea dinámico debido a que al estar en un archivo adicional le das la oportunidad al navegador a guardarlo en caché y así acelerar la velocidad de carga de tu página. Además, al estar en un archivo por separado es más fácil hacer una modificación y que todos los documentos que incluyan a este archivo se actualicen.

Regresar al índiceColores y fondos

A continuación voy a listar algunos de los atributos de CSS que puedes utilizar para modificar los colores del texto y del fondo.

Regresar al índicePosicionamiento

A continuación voy a listar algunos de los atributos de CSS que puedes utilizar para modificar el posicionamiento del texto y de los elementos en sí.

Regresar al índiceFuentes

A continuación voy a listar algunos de los atributos de CSS que puedes utilizar para modificar el tipo de texto.

Regresar al índiceTags comunes

La lista de tags disponibles en HTML es un poco amplia y muchos de los tags realmente no se utilizan o se utilizan muy poco. Es por eso que no voy a colocarlos todos aquí pero puedes encontrar la lista completa junto con todos sus atributos y eventos en http://www.quackit.com/html/tags/.

Sin embargo, voy a hacer algo bastante práctico. Voy a poner ejemplos de los tags más comunes junto con el código HTML utilizado para producir cada uno de tal forma que puedas visualizarlos y si te interesa investigar sobre alguno en particular puedes ver el código HTML que proporciono.

Regresar al índicea

<a href="http://copstone.com" title="Ir a copstone">Pon tu mouse encima</a>
<br/>
<a href="http://copstone.com" target="_blank">Copstone en ventana nueva</a>
<br/>
<a href="http://copstone.com" style="text-decoration:none;">Sin subrayado</a>

Regresar al índicediv

<div>
	<div style="border:1px solid #00ff00;background-color:#e7ffe7;width:80px;height:105px;float:left;">
		Menu de opciones
	</div>
	<div style="border:1px solid #0000ff;background-color:#e8e8ff;margin-left:85px;height:30px;">
		Barra de titulo
	</div>
	<div style="border:1px solid #ccc;background-color:#efefef;margin-left:85px;margin-top:5px;height:70px;">
		Contenido
	</div>
	<div style="clear:both;"><!-- para arreglar los float -->
</div>

Regresar al índicespan

En <span style="color:green">copstone</span> tratamos
de <span style="color:purple">servirte mejor</span> todo el tiempo.

Regresar al índicep

<p style="text-align:center;">Este es el primer párrafo y el texto está alineado al centro ...
	Nam varius euismod fermentum. Integer vulputate diam eu tortor commodo cursus.
Vestibulum at tellus mi. Nunc tristique erat id orci viverra tincidunt vehicula lacus consectetur.</p>

<p style="text-align:right;">Este es el segundo párrafo y el texto está alineado a la derecha ...
	Nam varius euismod fermentum. Integer vulputate diam eu tortor commodo cursus.
Vestibulum at tellus mi. Nunc tristique erat id orci viverra tincidunt vehicula lacus consectetur.</p>

<p style="text-align:justify;">Este es el tercer párrafo y el texto está justificado ...
	Nam varius euismod fermentum. Integer vulputate diam eu tortor commodo cursus.
Vestibulum at tellus mi. Nunc tristique erat id orci viverra tincidunt vehicula lacus consectetur.</p>

<p style="line-height:200%;">Este es el cuarto párrafo con interlineado doble ...
	Nam varius euismod fermentum. Integer vulputate diam eu tortor commodo cursus.
Vestibulum at tellus mi. Nunc tristique erat id orci viverra tincidunt vehicula lacus consectetur.</p>

Regresar al índiceh1, h2, h3, h4, h5, h6

<h1>Cabecera 1</h1>
<h2>Cabecera 2</h2>
<h3>Cabecera 3</h3>
<h4>Cabecera 4</h4>
<h5>Cabecera 5</h5>
<h6>Cabecera 6</h6>

Regresar al índicepre

int main()
{
  /* Cuando quieras poner codigo fuente te recomiendo
     usar un tag pre
  */
  printf("Hola Mundo!!!");
  return 0;
}

<pre>int main()
{
  /* Cuando quieras poner codigo fuente te recomiendo
     usar un tag pre
  */
  printf("Hola Mundo!!!");
  return 0;
}</pre>

Regresar al índicecode

La palabra reservada <code>include</code> esta dentro de tags code
para que se muestre como código fuente y no texto regular.

Regresar al índicehr

Si quieres separar<hr/>tu página<hr/>en varias partes<hr/>usa el tag hr.

Regresar al índicebr

Varios saltos<br/><br/><br/><br/>de línea

Regresar al índiceinput

Texto: <input name="a1" type="text" value="Texto"></input><br/>
Contraseña: <input type="password" value="Texto"></input><br/>
Checkbox: <input type="checkbox" ></input>Para seleccionar<br/>
Radio: <input type="radio" ></input>Si o <input type="radio" ></input>No<br/>
Boton: <input type="button" value="Boton simple" ></input><br/>
Reset: <input type="reset" value="Boton para limpiar todo" ></input><br/>
Submit: <input type="submit" value="Boton para enviar" ></input><br/>
File: <input type="file" value="Subir" ></input><br/>
Oculto (obviamente no se ve): <input type="hidden" value="valor oculto"></input><br/>

Regresar al índicetextarea

<textarea cols="20" rows="4">Esta es una casilla de texto de varias lineas ... Nam varius euismod fermentum. Integer vulputate diam eu tortor commodo cursus. Vestibulum at tellus mi. Nunc tristique erat id orci viverra tincidunt vehicula lacus consectetur. Vestibulum pharetra, urna sit amet lobortis semper, magna purus ultrices dui, et imperdiet leo tellus eget tortor. Curabitur eu lacus augue, id egestas dolor. Sed eget leo massa. Cras tellus felis, sagittis id auctor nec, tempus at dui. Maecenas posuere aliquet sagittis. Quisque ut eros sapien.</textarea>

Regresar al índicesup

A veces es necesario escribir x<sup>2</sup> o hacer referencias bibliograficas<sup>1. Copstone</sup>

Regresar al índicesub

A veces es necesario escribir x<sub>2</sub> o listados a<sub>1</sub>, a<sub>2</sub>, ...

Regresar al índiceselect, option, optgroup

<select>
	<option value="a">Opcion A</option>
	<option value="b">Opcion B</option>
	<option value="c">Opcion C</option>
	<option value="d">Opcion D</option>
</select>
<hr/>
<select>
  <optgroup label="Paginas favoritas">
    <option value="1">Copstone</option>
    <option value="2">Google</option>
  </optgroup>
  <optgroup label="Carros favoritos">
    <option value="3">Subaru</option>
    <option value="4">Toyota</option>
  </optgroup>
</select>

Regresar al índiceul, li

<ul>
	<li>Punto 1</li>
	<li>Punto 2</li>
	<li>Punto 3</li>
	<li>Punto 4</li>
</ul>

Regresar al índiceol, li

<ol>
	<li>Punto 1</li>
	<li>Punto 2</li>
	<li>Punto 3</li>
	<li>Punto 4</li>
</ol>

Regresar al índicetable, tr, td, th

<table cellpadding="0" cellspacing="0">
<colgroup>
	<col/>
	<col/>
</colgroup>
<thead>
</thead>
<tbody>
<tr>
	<td>Celda 1</td>
	<td>Celda 2</td>
</tr>
<tr>
	<td>Celda 3</td>
	<td>Celda 4</td>
</tr>
</tbody>
<tfoot>
</tfoot>
</table>

Regresar al índiceimg

<img src="http://copstone.com/wp-content/themes/copstone/images/logo.gif"></img>

Regresar al índicestrong

Este texto es <strong>importante</strong> y quiero que lo <strong>veas</strong>

Regresar al índicefieldset

<fieldset>
	<legend>Titulo del fieldset</legend>
	Puedes poner el contenido que quieras aqui dentro.
</fieldset>

Regresar al índiceTrucos básicos

Para terminar voy a mostarte unos cuantos trucos básicos con HTML que te pueden ser muy útiles.

Regresar al índiceRefrescar

Si quieres hacer que una página que se refresque cada X segundos puedes agregar este meta tag a la sección head de tu página:

<meta http-equiv="Refresh" content="5; URL=">

En este caso, la página se refrescará cada 5 segundos.

Regresar al índiceRedireccionar

Si quieres hacer que una página se redirija a otra después de X segundos puedes agregar este meta tag a la sección head de tu página:

<meta http-equiv="Refresh" content="5; URL=http://copstone.com">

En este caso, la página se redirigirá a http://copstone.com en 5 segundos.

Regresar al índiceDesactivando el cache

Muchas veces, el contenido de tu página es tan dinámico (cambiante) que si el navegador guarda en caché una versión de tu página para ser mostrada al usuario tu usuario recibirá información antigua en lugar de información actualizada. Es por esta razón que muchas veces queremos que el navegador no guarde mi página en caché y se lo decimos mediante la agregación del siguiente meta tag en la sección head de la página:

<meta http-equiv="Pragma" content="no-cache">

Autor: Alfredo Granda

Se que tengo que hablar de mi, pero no se por donde comenzar. Empezare diciendo que me llamo Alfredo, y si de colores me hablas, el verde es el que prefiero. Una gaseosa es infaltable y aunque intenté dejarlo, debo de confesar que me duro poco el no fumar. Si me hablas de software, te dire que "Sólo C que programando C++", pero también convivo sin problemas con PHP y C#. En mis ratos libres me dedico a programar y si me preguntas algo más tengo una esposa que adoro y que nunca voy a dejar.

Comentarios (1)

Larry dice:

Marzo 4, 2010 en 2:51 pm

Muy buen post profe! , había algunas cosas que no las conocía, me leí todo por siaca. jaja! … haber si en copstone publican algo sobre Javascript también, sería muy bueno!… Saludos!

Responder