You are on page 1of 48

5 Elementos bsicos de HTML

Ejemplo de una pagina completa:


Haremos el encabezado navegacin, contenido y pie de pagina como todas paginas tienen. [*]En el encabezado va el logo y su eslogan si gusta. [*]Las opciones de navegacin(men). [*] Seccion de contenido con sus imgenes. [*] En el pie de pagina va el copyright.
<html> <head> <title>Barra de titulo</title> </head> <body> <div id="contenedor"> <div id="encabezado"> <h1>Paginas web</h1> <p>creacion de paginas en html</p> </div><!--encabezado--> <div id="navegacion"> <ul> <li><a href="index.html">Inicio</a></li> <li><a href="#">servicios</a></li> <li><a href="#">contactos</a></li> </ul> </div><!--navegacion--> <div id="contenido"> <h2>Lorem ipsum.</h2> <p>dolor sit amet, <strong>consectetur adipiscing elit</strong>. Quisque eu augue odio. <em>Vivamus id massa in orci porta indum. <em> Aenean consequat dui <strong><em>vitae lectus ullamcorper aliquam volutpat</strong></em> erat sollicitudin. Praesent a libero non dolor hendrerit pellentesque. Maecenas in lorem.</p> </div><!--contenido--> <div id="pie"> <p>creativehacks.com copyright todos los derechos reservados.</p> </div><!--pie--> </div> </body> </html>

Explicacin: 1. Divisiones: <div></div>


Div (divisin) es un contenedor de elementos que puede agrupar prrafos, listas y graficos en una caja o box que almacenan otras cajas y les dan formato mendiante un estilo CSS. Para poder identificar los elementos usamos un atributo id dentro de la etiqueta correspondiente, es recomendado usar comentario en el final de una etiqueta para saber donde acaba el elemento.
<body> <div id="contenedor"> <div id="encabezado"> </div><!--encabezado--> <div id="navegacion"> </div><!--navegacion--> <div id="contenido"> </div><!--contenido"> <div id="pie"> </div><!--pie--> </div> </body>

Los elementos div nos permiten crear cuadros en nuestra pagina web que a su vez sirven para almacenar otros elementos de HTML , representado graficamente.

2. Titulos: <h1></h1> y <h2></h2>


Los elementos heading (1-6) definen a los titulos por orden importancia empezando desde el 1 como el de mayor valor y sucesivamente.
<h1>Titulo <h2>Titulo <h3>Titulo <h4>Titulo <h5>Tiutlo 1</h1> 2</h2> 3</h3> 4</h4> 5</h5>

3. Listas: vietas y

numeracion: <ul></ul> y <ol></ol>


Las listas ordenadas y no ordenadas son muy importantes para estructurar el contenido en nuestra pgina web. Vietas: lista no ordenada. Una lista est compuesta por dos elementos: [*]<ul></ul> significa "unordered list" es decir "lista no ordenada" que es el principio y el final de la lista con vietas. [*]<li></li> que marcan los elementos dentro de la lista.
<ul> <li>Arroz</li> <li>Papaya</li> <li>Tomate</li> </ul>

Numeraciones: lista ordenada. Una lista est compuesta por dos elementos: [*]<ol></ol> significa "ordered list" es decir "lista ordenada" que es el principio y el final de la lista con numeraciones. [*]<li></li> significa "list item" que marcan los elementos dentro de la lista.
<ol> <li>primera</li> <li>segunda</li> <li>tercera</li> </ol>

4. Hipervnculos: <a></a>
Los hyperlinks o hipervnculos son el elemento html para mostrar un link o enlace web. Los hipervnculos siempre tienen la misma estructura, la etiqueta a que significa anchor.
<a href="..." title="...">Texto visible</a>

[*]href es la abreviatura de "Hypertext Reference" es donde se pone la ruta de la pgina a donde se llegara al hacer clic, y cambia en la misma ventana del navegador, puede ser un nombre de archivo o una URL. [*]El atributo title es opcional, solo se pone si usted gusta que se muestre un texto cuando el puntero del ratn este encima del hipervnculo.

[*]Entre <a> y </a> se coloca un texto que el navegador mostrara en subrayado azul por defecto.

<p>visita <a href="http://www.creativehacks.com" title="Creative Hacks - tutoriales">CreativeHacks</a> donde encontraras bastantes tutoriales para armar tu web</p>

5. Resaltar texto: <strong></strong> y <em></em>


Los elementos strong y em sirven para resaltar texto, ambos son elementos inline. [*]<Strong> define algo muy resaltado, mayormente llamado "negrita" [*]<Em> significa emphasize(enfatizar), llamado "cursiva".
<p>este texto tiene ejemplos de <strong>negrita</strong>y de <em> cursiva</em></p>

HTML
HTM redirige aqu. Para otros usos de la sigla, vase Hgalo usted mismo.

HTML (HyperText Markup Language)

Desarrollador

World Wide Web Consortium & WHATWG

Informacin general

Extensin de archivo

.html, .htm

Tipo de MIME

text/html

Type code

TEXT

Uniform Type Identifier

public.html

Tipo de formato

Lenguaje de marcado

Extendido de

SGML

Extendido a

XHTML

Estndar(es)

ISO/IEC 15445 W3C HTML 4.01 W3C HTML5(borrador)

Formato abierto

HTML, siglas de HyperText Markup Language (lenguaje de marcado hipertextual), hace referencia al lenguaje de marcado para la elaboracin de pginas web. Es un estndar que, en sus diferentes versiones, define una estructura bsica y un cdigo (denominado cdigo HTML) para la definicin de contenido de una pgina web, como texto, imgenes, etc. Es un estndar a cargo de la W3C, organizacin dedicada a la estandarizacin de casi todas las tecnologas ligadas a la web, sobre todo en lo referente a su escritura e interpretacin. El lenguaje HTML basa su filosofa de desarrollo en la referenciacin. Para aadir un elemento externo a la pgina (imagen, vdeo, script, etc.), este no se incrusta directamente en el cdigo de la pgina, sino que se hace una referencia a la ubicacin de dicho elemento mediante texto. De este modo, la pgina web contiene slo texto mientras que recae en el navegador web (interpretador del cdigo) la tarea de unir todos los elementos y visualizar la pgina final. Al ser un estndar, HTML busca ser un lenguaje que permita que cualquier pgina web escrita en una determinada versin, pueda ser interpretada de la misma forma (estndar) por cualquier navegadores web actualizado.

Sin embargo, a lo largo de sus diferentes versiones, se han incorporado y suprimido caractersticas, con el fin de hacerlo ms eficiente y facilitar el desarrollo de pginas web compatibles con distintos navegadores y plataformas (PC de escritorio, porttiles, telfonos inteligentes, tablets, etc.). Sin embargo, para interpretar correctamente una nueva versin de HTML, los desarrolladores de navegadores web deben incorporar estos cambios y el usuario debe ser capaz de usar la nueva versin del navegador con los cambios incorporados. Usualmente los cambios son aplicados mediante parches de actualizacin automtica (Firefox, Chrome) u ofreciendo una nueva versin del navegador con todos los cambios incorporados, en un sitio web de descarga oficial (Internet Explorer). Un navegador no actualizado no ser capaz de interpretar correctamente una pgina web escrita en una versin de HTML superior a la que pueda interpretar, lo que obliga muchas veces a los desarrolladores a aplicar tcnicas y cambios que permitan corregir problemas de visualizacin e incluso de interpretacin de cdigo HTML. As mismo, las pginas escritas en una versin anterior de HTML deberan ser actualizadas o reescritas, lo que no siempre se cumple. Es por ello que ciertos navegadores an mantienen la capacidad de interpretar pginas web de versiones HTML anteriores. Por estas razones, an existen diferencias entre distintos navegadores y versiones al interpretar una misma pgina web.
ndice
[ocultar]

1 Historia de HTML

1.1 Primeras especificaciones

2 Marcado HTML

o o

2.1 Elementos 2.2 Atributos

3 Cdigos HTML bsicos 4 Nociones bsicas de HTML 5 Saber ms 6 Historia del estndar 7 Accesibilidad web 8 Entidades HTML 9 Vase tambin 10 Referencias 11 Bibliografa 12 Enlaces externos

Historia de HTML[editar editar cdigo]


Primeras especificaciones[editar editar cdigo]

La primera descripcin de HTML disponible pblicamente 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 que incluyen el diseo inicial y relativamente simple de HTML. Trece de estos elementos todava existen en HTML 4.3 Berners-Lee consideraba a HTML una ampliacin de SGML, pero no fue formalmente reconocida como tal hasta la publicacin de mediados de 1993, por la IETF, de una primera proposicin para una especificacin de HTML: el boceto Hypertext Markup Language de Berners-Lee y Dan Connolly, el cual inclua una Definicin de Tipo de Documento SGML para definir la gramtica.4 El boceto expir luego de seis meses, pero fue notable por su reconocimiento de la etiqueta propia del navegador Mosaic usada para insertar imgenes sin cambio de lnea, que reflejaba la filosofa del IETF de basar estndares en prototipos con xito. 5 De la misma manera, el boceto competidor de Dave Raggett HTML+ (Hypertext Markup Format) (Formato de Marcaje de Hipertexto), de finales de 1993, sugera estandarizar caractersticas ya implementadas, como las tablas.6

Marcado HTML[editar editar cdigo]


El HTML se escribe en forma de etiquetas, rodeadas por corchetes angulares (<,>). HTML tambin puede describir, hasta un cierto punto, la apariencia de un documento, y puede incluir o hacer referencia a un tipo de programa llamado script, el cual puede afectar el comportamiento de navegadores web y otros procesadores de HTML.7 HTML tambin sirve para referirse al contenido del tipo de MIME text/html o todava ms ampliamente como un trmino genrico para el HTML, ya sea en forma descendida del XML (como XHTML 1.0 y posteriores) o en forma descendida directamente de SGML (como HTML 4.01 y anteriores). HTML consta de varios componentes vitales, entre ellos los elementos y sus atributos, tipos de data y la declaracin de tipo de documento.

Elementos[editar editar cdigo]


Los elementos son la estructura bsica de HTML. Los elementos tienen dos propiedades bsicas: atributos y contenido. Cada atributo y contenido tiene ciertas restricciones para que se considere vlido al documento HTML. Un elemento generalmente tiene una etiqueta de inicio (por ejemplo, <nombre-de-elemento>) y una etiqueta de cierre (por ejemplo, </nombre-de-

elemento>). Los atributos del elemento estn contenidos en la etiqueta de inicio y el contenido
est ubicado entre las dos etiquetas (por ejemplo, <nombre-de-

elemento atributo="valor">Contenido</nombre-de-elemento>). Algunos


elementos, tales como <br>, no tienen contenido ni llevan una etiqueta de cierre. Debajo se listan varios tipos de elementos de marcado usados en HTML.

Estructura general de una lnea de cdigo en el lenguaje de etiquetas HTML.

El marcado estructural describe el propsito del texto. Por ejemplo,<h2>Golf</h2> establece Golf como un encabezamiento de segundo nivel, el cual se mostrara en un navegador de una manera similar al ttulo Marcado HTML al principio de esta seccin. El marcado estructural no define cmo se ver el elemento, pero la mayora de los navegadores web han estandarizado el formato de los elementos. Puede aplicarse un formato especfico al texto por medio de hojas de estilo en cascada. El marcado presentacional describe la apariencia del texto, sin importar su funcin. Por ejemplo, <b>negrita</b> indica que los navegadores web visuales deben mostrar el texto en negrita, pero no indica qu deben hacer los navegadores web que muestran el contenido de otra manera (por ejemplo, los que leen el texto en voz alta). En el caso de <b>negrita</b> e <i>itlica</i>, existen elementos que se ven de la misma manera pero tienen una naturaleza ms semntica: <strong>enfsis

fuerte</strong> y <em>nfasis</em>. Es fcil ver cmo un lector de pantalla debera


interpretar estos dos elementos. Sin embargo, son equivalentes a sus correspondientes elementos presentacionales: un lector de pantalla no debera decir ms fuerte el nombre de un libro, aunque ste est en itlicas en una pantalla. La mayora del marcado presentacional ha sido desechada con HTML 4.0, en favor de hojas de estilo en cascada. El marcado hipertextual se utiliza para enlazar partes del documento con otros documentos o con otras partes del mismo documento. Para crear un enlace es necesario utilizar la etiqueta de ancla <a> junto con el atributo href, que establecer la direccin URL a la que apunta el enlace. Por ejemplo, un enlace que muestre el texto de la direccin y vaya hacia nuestra Wikipedia podra ser de la forma <a

href=http://www.wikipedia.org>http://www.wikipedia.org</a>. Tambin se
pueden crear enlaces sobre otros objetos, tales como imgenes <a href=enlace><img

src=imagen /></a>.

Atributos[editar editar cdigo]


La mayora de los atributos de un elemento son pares nombre-valor, separados por un signo de igual = y escritos en la etiqueta de comienzo de un elemento, despus del nombre de ste. El

valor puede estar rodeado por comillas dobles o simples, aunque ciertos tipos de valores pueden estar sin comillas en HTML (pero no en XHTML).8 9 De todas maneras, dejar los valores sin comillas es considerado poco seguro.10 En contraste con los pares nombre-elemento, hay algunos atributos que afectan al elemento simplemente por su presencia11 (tal como el atributo ismap para el elemento img).12

Cdigos HTML bsicos[editar editar cdigo]

Un ejemplo de cdigo HTML con coloreado de sintaxis.

<html>: define el inicio del documento HTML, le indica al navegador que lo que viene a
continuacin debe ser interpretado como cdigo HTML. Esto es as de facto, ya que en teora lo que define el tipo de documento es elDOCTYPE, que significa la palabra justo tras DOCTYPE el tag de raz.

<script>: incrusta un script en una web, o llama a uno mediantesrc="url del script".
Se recomienda incluir el tipo MIME en el atributo type, en el caso de JavaScript text/javascript.

<head>: define la cabecera del documento HTML; esta cabecera suele contener informacin
sobre el documento que no se muestra directamente al usuario como, por ejemplo, el ttulo de la ventana del navegador. Dentro de la cabecera <head> es posible encontrar:

<title>: define el ttulo de la pgina. Por lo general, el ttulo aparece en la barra de ttulo
encima de la ventana.

<link>: para vincular el sitio a hojas de estilo o iconos. Por ejemplo:<link rel="stylesheet" href="/style.css" type="text/css">.

<style>: para colocar el estilo interno de la pgina; ya sea usando CSS u otros lenguajes
similares. No es necesario colocarlo si se va a vincular a un archivo externo usando la etiqueta <link>.

<meta>: para metadatos como la autora o la licencia, incluso para indicar parmetros http
(mediante http-equiv="") cuando no se pueden modificar por no estar disponible la configuracin o por dificultades con server-side scripting.

<body>: 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 pgina, como color de fondo y mrgenes. Dentro del cuerpo <body> es posible encontrar numerosas etiquetas. A continuacin se indican algunas a modo de ejemplo:

<h1> a <h6>: encabezados o ttulos del documento con diferente relevancia. <table>: define una tabla. <tr>: fila de una tabla. <td>: celda de una tabla (debe estar dentro de una fila).

<a>: hipervnculo o enlace, dentro o fuera del sitio web. Debe definirse el parmetro de
pasada por medio del atributo href. Por ejemplo: <a href="http://www.example.com" title="Ejemplo"

target="_blank" tabindex="1">Ejemplo</a> se representa como Ejemplo). <div>: divisin de la pgina. Se recomienda, junto con css, en vez de <table> cuando
se desea alinear contenido.

<img>: imagen. Requiere del atributo src, que indica la ruta en la que se encuentra la
imagen. Por ejemplo: <img src="./imgenes/mifoto.jpg" />. Es conveniente, por accesibilidad, poner un atributo alt="texto alternativo".

<li><ol><ul>: etiquetas para listas. <b>: texto en negrita (etiqueta desaprobada. Se recomienda usar la etiqueta <strong>). <i>: texto en cursiva (etiqueta desaprobada. Se recomienda usar la etiqueta <em>). <s>: texto tachado (etiqueta desaprobada. Se recomienda usar la etiqueta <del>). <u>: Antes texto subrayado. A partir de HTML 5 define porciones de texto diferenciadas o
destacadas del resto, para indicar correcciones por ejemplo. (etiqueta desaprobada en HTML 4.01 y redefinida en HTML 5)13 14

La mayora de etiquetas deben cerrarse como se abren, pero con una barra (/) tal como se muestra en los siguientes ejemplos:

<table><tr><td>Contenido de una celda</td></tr></table>. <script>Cdigo de un script integrado en la pgina</script>.

Nociones bsicas de HTML[editar editar cdigo]


El lenguaje HTML puede ser creado y editado con cualquier editor de textos bsico, como puede ser Gedit en Linux, el Bloc de notasde Windows, o cualquier otro editor que admita texto sin formato como GNU Emacs, Microsoft Wordpad, TextPad, Vim, Notepad++, entre otros.

Existen, adems, otros editores para la realizacin de sitios web con caractersticas WYSIWYG (What You See Is What You Get, o en espaol: lo que ves es lo que obtienes). Estos editores permiten ver el resultado de lo que se est editando en tiempo real, a medida que se va desarrollando el documento. Ahora bien, esto no significa una manera distinta de realizar sitios web, sino que una forma un tanto ms simple, ya que estos programas, adems de tener la opcin de trabajar con la vista preliminar, tiene su propia seccin HTML, la cual va generando todo el cdigo a medida que se va trabajando. Algunos ejemplos de editores WYSIWYG sonKompoZer, Microsoft FrontPage o Adobe Dreamweaver. Combinar estos dos mtodos resulta muy interesante, ya que de alguna manera se ayudan entre s. Por ejemplo, si se edita todo en HTML y de pronto se olvida algn cdigo o etiqueta, simplemente me dirijo al editor visual o WYSIWYG y se contina ah la edicin o viceversa, ya que hay casos en que resulta ms rpido y fcil escribir directamente el cdigo de alguna caracterstica que el usuario desea adherir al sitio que buscar la opcin en el programa mismo. Existe otro tipo de editores HTML llamados WYSIWYM que dan ms importancia al contenido y al significado que a la apariencia visual. Entre los objetivos que tienen estos editores es la separacin del contenido y la presentacin, fundamental en el diseo web. HTML utiliza etiquetas o marcas, que consisten en breves instrucciones de comienzo y final, mediante las cuales se determina la forma en la que debe aparecer en su navegador el texto, as como tambin las imgenes y los dems elementos, en la pantalla del ordenador. Toda etiqueta se identifica porque est encerrada entre los signos menor que y mayor que (<>), y algunas tienen atributos que pueden tomar algn valor. En general las etiquetas se aplicarn de dos formas especiales:

Se abren y se cierran, como por ejemplo: <b>negrita</b>, que se vera en su navegador web como negrita.

No pueden abrirse y cerrarse, como <hr />, que se vera en su navegador web como una lnea horizontal.

Otras que pueden abrirse y cerrarse, como por ejemplo <p>. Las etiquetas bsicas o mnimas son:

<!DOCTYPE HTML> <html> <head> <title>Ejemplo1</title> </head> <body> <p>ejemplo1</p> </body> </html>

Saber ms[editar editar cdigo]

Seleccionando la opcin ver cdigo fuente en el navegador, se puede ver realmente la informacin que est recibiendo ste y cmo la est interpretando. Por ejemplo: en Internet Explorer o en Firefox, simplemente hay que desplegar el men ver y luego elegir cdigo fuente, mientras que en Chrome presionar CTRL + U. De esta forma, se abrir el editor de texto configurado como predeterminado en el sistema con el cdigo fuente de la pgina que se est viendo en ese momento en el explorador. Otra forma ms rpida consiste en hacer clic con el botn derecho del ratn en cualquier punto del rea donde el navegador muestra la pgina web y elegir ver cdigo fuente. Para el navegador Firefox existe el plugin Firebug, un depurador que permite entre otras cosas visualizar el cdigo HTML de la pgina que estamos visualizando de forma dinmica, y que incluso resalta el trozo de cdigo por el que est pasando el ratn en cada momento, por lo que es una herramienta muy til para aprender diversos conceptos de este lenguaje.

Historia del estndar[editar editar cdigo]


En 1989 existan dos tcnicas que permitan vincular documentos electrnicos, por un lado los hipervnculos (enlaces) y por otro lado un poderoso lenguaje de etiquetas denominado SGML. Por entonces, Tim Berners-Lee, quien trabajaba en el Centro Europeo de Investigaciones Nucleares CERN da a conocer a la prensa que estaba trabajando en un sistema que permitir acceder a ficheros en lnea que funcionaba sobre redes de computadoras o mquinas electrnicas basadas en el protocolo TCP/IP. Inicialmente fue desarrollado para que se pueda compartir fcilmente informacin entre cientficos de distintas universidades e institutos de investigacin de todo el mundo.15 A principios de 1990, Tim Berners-Lee define por fin el HTML como un subconjunto del conocido SGML y crea algo ms valioso an, elWorld Wide Web. En 1991, Tim Berners-Lee crea el primer navegador web, ViolaWWW, que funcionara en modo texto y sobre un sistema operativo UNIX. Los trabajos para crear un sucesor del HTML, denominado HTML +, comenzaron a finales de 1993. HTML+ se dise originalmente para ser un superconjunto del HTML que permitiera evolucionar gradualmente desde el formato HTML anterior. A la primera especificacin formal de HTML+ se le dio, por lo tanto, el nmero de versin 2 para distinguirla de las propuestas no oficiales previas. Los trabajos sobre HTML+ continuaron, pero nunca se convirti en un estndar, a pesar de ser la base formalmente ms parecida al aspecto compositivo de las especificaciones actuales. El borrador del estndar HTML 3.0 fue propuesto por el recin formado W3C en marzo de 1995. Con l se introdujeron muchas nuevas capacidades; por ejemplo, facilidades para crear tablas, hacer que el texto fluyese alrededor de las figuras y mostrar elementos matemticos complejos. Aunque se dise para ser compatible con HTML 2.0, era demasiado complejo para ser implementado con la tecnologa de la poca, y cuando el borrador del estndar expir en septiembre de 1995, se

abandon debido a la carencia de apoyos de los fabricantes de navegadores web. El HTML 3.1 nunca lleg a ser propuesto oficialmente, y el estndar siguiente fue el HTML 3.2, que abandonaba la mayora de las nuevas caractersticas del HTML 3.0 y, a cambio, adoptaba muchos elementos desarrollados inicialmente por los navegadores web Netscape y Mosaic. La posibilidad de trabajar con frmulas matemticas que se haba propuesto en el HTML 3.0 pas a quedar integrada en un estndar distinto llamado MathML. En 1997, HTML 4.0 se public como una recomendacin del W3C. HTML 4.0 adopt muchos elementos especficos desarrollados inicialmente para un navegador web concreto, pero al mismo tiempo comenz a limpiar el HTML sealando algunos de ellos como desaprobados o deprecated en ingls. HTML 4.0 implementa caractersticas como XForms 1.0 que no necesitan implementar motores de navegacin que eran incompatibles con algunas pginas web HTML. En 2004 la W3C reabri el debate de la evolucin del HTML, y se dieron a conocer las bases para la versin HTML5. No obstante, este trabajo fue rechazado por los miembros del W3C y se dara preferencia al desarrollo del XML. Apple, Mozilla y Opera anunciaron su inters en seguir trabajando en el proyecto bajo el nombre de WHATWG,16 que se basa en la compatibilidad con tecnologas anteriores. En 2006, el W3C se interes en el desarrollo de HTML5, y en 2007 se uni al grupo de trabajo del WHATWG para unificar el proyecto.

Accesibilidad web[editar editar cdigo]


Artculo principal: Accesibilidad web.

El diseo en HTML, aparte de cumplir con las especificaciones propias del lenguaje, debe respetar ciertos criterios de accesibilidad web, siguiendo unas pautas o las normativas y leyes vigentes en los pases donde se regule dicho concepto. Se encuentra disponible y desarrollado por el W3C a travs de las Pautas de Accesibilidad al Contenido Web 1.0 WCAG (actualizadas recientemente con la especificacin 2.017 ), aunque muchos pases tienen especificaciones propias, como es el caso de Espaa con la Norma UNE 139803.18

Entidades HTML[editar editar cdigo]


Los caracteres especiales como signo de puntuacin, letras con tilde o diresis o smbolos de escritura del lenguaje se deben convertir en entidad HTML para mostrarse en un navegador. La siguiente es una lista de caracteres espaoles y su correspondiente entidad HTML:

Carcter Entidad HTML Carcter Entidad HTML

&aacute;

&Aacute;

&eacute;

&Eacute;

&iacute;

&Iacute;

&oacute;

&Oacute;

&uacute;

&Uacute;

&uuml;

&Uuml;

&ntilde;

&Ntilde;

&iexcl;

&iquest;

HTML bsico - I
Cmo crear una pgina web

En este primer captulo, presentaremos las nociones bsicas del lenguaje HTML. Con una utilizacin inteligente de las etiquetas HTML ms sencillas, pueden lograrse documentos web de calidad suficiente. Al fin y al cabo, no debe olvidarse que lo importante, tanto en un papel como en Internet, sigue siendo el contenido.

1. Introduccin 2. La estructura mnima de un documento HTML 3. El texto bsico de un documento HTML 4. Los prrafos de documento HTML 5. Los enlaces de documento HTML un un

1. Introduccin

HTML1 es un lenguaje universal, que funciona en cualquier plataforma (Windows, Macintosh, Unix, OS/2, etc.) y con cualquier navegador o browser (Netscape, Internet Explorer, Mozilla Firefox, etc.). El precio que paga por su universalidad es su poca sofisticacin, puesto que no es otra cosa que el viejo formato ASCII2 (y con 7 bits en lugar de ocho, por lo que ni tan siquiera tiene acentos ni otros caracteres especiales). Por tanto, para que un documento HTML sea algo ms que simples caracteres bsicos, debe contener, adems de dicho texto, una serie de instrucciones para el browser que lo va a reproducir: estas intrucciones se denominan etiquetas o tags y se distinguen del texto porque van entre guiones (< >)3. Estas etiquetas contienen todo el resto de la informacin de la pgina web. Por tanto, si un documento HTML no es ms que texto ASCII (parte sin guiones y parte entre guiones: las etiquetas), cualquier documento web, hasta el ms sofisticado, puede escribirse directamente desde un sencillo programa bsico de texto, como el Cuaderno de Notas (Notepad) de Windows, por ejemplo. Sin embargo, escribir un documento complejo de esta manera exige un conocimiento exhaustivo de las numerossimas etiquetas existentes y sus normas de utilizacin; para evitar esta dificultad, hay una serie de programas denominados comnmente editores de HTML (desde el Composer al Dreamweaver, pasando por tantos otros), que permiten al usuario componer una pgina (es decir, generar etiquetas HTML) desde un interfaz ms o menos parecido al de un procesador de textos. A la hora de crear una pgina web, y aunque utilicemos un editor de HTML, es casi imprescindible entender la disposicin del etiquetado de un documento y manejar siquiera las etiquetas ms elementales. Son varias las razones que pueden aducirse para ello:

1. Los editores de HTML no son siempre herramientas perfectas, sobre todo cuando ha habido muchas modificaciones durante el proceso de creacin. Con bastante frecuencia se har necesario consultar el cdigo completo, con las etiquetas HTML (lo que se suele denominar cdigo fuente o cdigo madre) para corregir las disfunciones. 2. Tal vez la mejor manera de aprender a disear pginas web es observar las pginas de los dems, cuyos cdigos fuente estn siempre disponibles para ser imitados (o incluso copiados, tcnicamente, al menos). Pero, para ello, es necesario entenderlos. 3. Los mismos editores HTML manejan trminos propios del lenguaje HTML (heading, cellspacing, etc.), que es preciso comprender. 4. Es necesario un buen conocimiento de HTML para insertar otros cdigos ms potentes, como los de Javascript, por ejemplo.

El objetivo de este documento es aprender a componer una sencilla pgina web desde el ms bsico de los programas de texto disponibles en Windows: el Cuaderno de Notas.4 De esta manera, seremos capaces de entender y manejar los cdigos fuente de las pginas ms complejas.

inicio

2. Esquema mnimo de un documento HTML


Un documento HTML comienza siempre con la etiqueta <HTML>5, que indica que el documento en cuestin est construido con dicho lenguaje. La mayora de las etiquetas son pareadas, es decir, <...> corresponde al principio de la accin y </...> indica el fin de dicha accin. Por tanto, una pgina web estar siempre contenida entre las etiquetas <HTML> y </HTML>. Por otra parte, todo documento HTML consta de dos partes: la cabecera (head) y el cuerpo del documento (body). 1. La cabecera contiene bsicamente informacin destinada al browser (o navegador), que queda oculta al usuario. Su etiqueta (pareada) es <HEAD>. 2. El cuerpo es el documento que ve el usuario. Su etiqueta (pareada) es <BODY>.

Ya estamos en condiciones de componer nuestra primera pgina web. Basta con escribir las siguientes etiquetas en nuestro editor de texto y salvar el resultado con la extensin *.HTML o *.HTM: EJEMPLO 1 <HTML> <HEAD> </HEAD> <BODY> </BODY> </HTML> Ver resultado

He introducido una pequea tabulacin a la hora de escribir las etiquetas de cabecera y cuerpo, simplemente para facilitar su compresin grfica, puesto que esta cuestin es totalmente indiferente. El resultado no variara de haber colocado las etiquetas de cualquier otra manera. Por ejemplo: EJEMPLO 1: Variantes de escritura <HTML> <HEAD> </HEAD> <BODY> </BODY> </HTML> <HTML><HEAD></HEAD><BODY></BODY></HTML> <HTML> <HEAD></HEAD> <BODY></BODY> </HTML> Ver resultado

Esta primera pgina web est, lgicamente, vaca, pero es perfectamente operativa. Para modificarla, basta con modificar sus cdigos en el editor de texto. No hace falta cerrar para ello el navegador: una vez modificado y salvado el fichero, basta con utilizar el comando Actualizar(o Refresh) para ver los cambios. Al visualizar los resultados del Ejemplo 1, en la barra de ttulo de la ventana correspondiente slo aparece el nombre del navegador (con Netscape) o la trayectoria completa del archivo (con Explorer). Esto sucede porque nuestro documento no posee un ttulo propio. Para crearlo, debemos introducir una nueva etiqueta (pareada) en la cabecera: <TITLE>. Nuestro pgina web podra quedar, por tanto, as: EJEMPLO 2 <HTML>

<HEAD> <TITLE>Ejemplo 2</TITLE> </HEAD> <BODY> </BODY> </HTML> Ver resultado

Ya sabemos crear el esqueleto de una pgina web. La siguiente tarea ser aprender a introducir texto (entre los tags <BODY> y </BODY>) y controlar sus etiquetas elementales.

inicio

3. El texto bsico de un documento HTML

El texto bsico de un documento HTML puede escribirse sin etiquetas. Cada navegador lo visualiza entonces con el tipo y tamao de caracteres escogidos en su configuracin por defecto, e introduce un salto de lnea cuando los caracteres alcanzan el borde de la ventana. Para dominar las cuestiones de formato (de caracteres, de prrafo, etc.) es necesario utilizar las etiquetas correspondientes.

3.1. La etiqueta bsica


La etiqueta bsica, que controla el tipo de fuente utilizado, es <FONT>. <FONT> es una etiqueta pareada. Por tanto, afecta a los caracteres introducidos entre <FONT> y </FONT>. Pero sin ms especificaciones, la etiqueta an no sirve para nada. Se puede especificar el tipo de letra (es decir, la fuente de caracteres) aadindolo a la etiqueta, de la siguiente manera (en este caso, la fuente escogida es Arial): <FONT FACE="Arial">...</FONT>. Se puede especificar el color de la fuente con la etiqueta <FONT COLOR="?">...</FONT>. Para especificar los colores, conviene saber al menos lo siguiente: 1. Cada color posee su correspondiente cdigo. 2. Hay dos cdigos: hexadecimal lo ms habitual o RGB. En ambos casos se trata de expresar las proporciones de tres colores bsicos: rojo, verde y azul. 3. Los valores hexadecimales de los tres colores se expresan de la siguiente manera:

1. Rojo: color:#ff0000; 2. Verde: color:#00ff00; 3. Azul: color:#0000ff; 4. Los mismos colores, expresados con los valores RGB (red, green, blue), son los siguientes: 1. Rojo: color:rgb(255,0,0); 2. Verde: color:rgb(0,255,0); 3. Azul: color:rgb(0,0,255); 5. Todos los colores se expresan mediante combinaciones de estos tres colores bsicos. Existen muchos programas que proporcionan los valores de todos los colores que el usuario puede componer. Tambin en internet existen muchas pginas con los Cdigos de colores. 6. Los colores ms bsicos pueden especificarse sin cdigo, simplemente escribiendo la palabra correspondiente (por supuesto en ingls). Por ejemplo: <FONT COLOR="blue">...</FONT>, <FONT COLOR="red">...</FONT>, etc.

Se puede especificar el tamao de la fuente con la etiqueta <FONT SIZE="?">...</FONT>. El valor del tamao ("?") deseado puede suministrarse de manera absoluta (un nmero del 1 al 7) o relativa (+1, +2, -1, -2, etc., teniendo en cuenta que el valor por defecto es 3). 6 Todas estas etiquetas se pueden combinar, de modo que con una sola se controla, por ejemplo, el tipo, el tamao y el color de los caracteres:<FONT FACE="Arial" COLOR="#0000FF" SIZE="5">...</FONT>.

Con esta etiqueta hemos visto ya la sintaxis bsica de las etiquetas HTML, que podamos formalizar as: <ETIQUETA [ATRIBUTO="valor"]>. Lo anterior quiere decir que una etiqueta HTML (por ejemplo, FONT) puede llevar uno o varios atributos (FACE, COLOR, SIZE), cuyos valores se colocan entrecomillados tras el signo igual (="arial", ="#0000FF", etc.). Esto ser vlido para todas las etiquetas HTML que veamos a partir de este momento.

Volvamos a nuestro documento web y practiquemos posibilidades de la etiqueta <FONT>. Por ejemplo: EJEMPLO 3 <HTML> <HEAD> <TITLE>Ejemplo 3</TITLE>

con las

</HEAD> <BODY> Esto es texto simple: cada navegador lo visualizar segn su configuracin por defecto. <FONT SIZE="1">Este texto es tamao 1.</FONT> <FONT SIZE="2">Este texto es tamao 2.</FONT> <FONT SIZE="4">Este texto es tamao 4.</FONT> <FONT SIZE="+1">Este texto es tamao +1 (que es lo mismo que tamao 4).</FONT> <FONT FACE="Arial" SIZE="5" COLOR="FFFF00">Este texto posee varias especificaciones de formato.</FONT> </BODY> </HTML> Ver resultado

Nuestra pgina web, tal y como est diseada en el Ejemplo 3, no posee ninguna especificacin de lneas. A pesar de que las etiquetas estn ordenadas en varias lneas, el navegador coloca todos los caracteres seguidos (slo tiene en cuenta un nico espacio entre palabras). Para corregir este problema podemos utilizar la etiqueta <BR>, que introduce un salto de lnea. Nuestro pgina quedara entonces as: EJEMPLO 4 <HTML> <HEAD> <TITLE>Ejemplo 4</TITLE> </HEAD> <BODY> Esto es texto simple: cada navegador lo visualizar segn su configuracin por defecto.<BR> <FONT SIZE="1">Este texto es tamao 1.</FONT><BR> <FONT SIZE="2">Este texto es tamao 2.</FONT><BR> <FONT SIZE="4">Este texto es tamao 4.</FONT><BR> <FONT SIZE="+1">Este texto es tamao +1 (que es lo mismo que tamao 4).</FONT><BR> <FONT FACE="Arial" SIZE="5" COLOR="FFFF00">Este texto posee varias especificaciones de formato.</FONT> </BODY> </HTML> Ver resultado

Hay otra cuestin importante que debe saberse sobre la etiqueta <FONT>: es la etiqueta ms bsica, y conviene empezar a aprender por ella, pero est en desuso y desaparecer en las versiones futuras de HTML. En su lugar, existen otras etiquetas ms potentes, que iremos viendo en su momento.

3.2. Etiquetas de formato de caracteres

A partir de este momento, se trata simplemente de aadir ms etiquetas a nuestra an pequea coleccin, de modo que vayamos teniendo cada vez ms control sobre el formato de los caracteres. La tabla siguiente muestra las ms comunes: Cdigo Funcin Negrita <B>...</B> Cursiva <I>...</I> Subrayado <U>...</U> <SUB>...</SUB> Subndice <SUP>...</SUP> Superndice

Hay que realizar algunos comentarios sobre las etiquetas precedentes: 1. Existe otra etiqueta similar a <B>, menos utilizada porque depende de las opciones de configuracin del navegador: <STRONG>...</STRONG>. 2. Existe otra etiqueta similar a <I>, menos utilizada porque depende de las opciones de configuracin del navegador: <EM>...</EM>. 3. Conviene tener cuidado a la hora de manejar el subrayado, puesto que ste se utiliza convencionalmente para indicar los hiperenlaces, y podra por tanto resultar confuso para el usuario.

Es normal utilizar varias etiquetas para un mismo elemento de texto. En ese caso, hay que tener cuidado para encajarlas correctamente. Por ejemplo: <FONT FACE="Courier"><B><I>...</I></B></FONT> es correcto, pero <FONT FACE="Courier"><B><I>...</FONT><B></I> es incorrecto.

3.3. Otras etiquetas de caracteres

Hay muchas otras etiquetas que afectan a los caracteres. Vamos a presentar varias ms, que deben manejarse con cierta precaucin: 1. La etiqueta <PRE>...</PRE> indica que el texto afectado est preformateado, de modo que el navegador s tiene en

cuenta todos los espacios y saltos de lnea definidos en la pantalla. 2. La etiqueta <BLINK>...</BLINK> indica texto parpadeante. Slo funciona con Netscape. 3. La etiqueta <S>...</S> genera texto tachado. 4. La etiqueta <TT>...</TT> genera texto similar al de una mquina de escribir (fuente courier de paso fijo). 5. La etiqueta <BIG>...</BIG> aumenta el tamao de letra (equivale a <FONT SIZE="+1">). 6. La etiqueta <SMALL>...</SMALL> disminuye el tamao de letra (equivale a <FONT SIZE="-1">). EJERCICIO 1 Ya es hora de practicar con las herramientas que hemos presentado hasta ahora. Cmo? Es muy sencillo: crea una pgina web! Si no se te ocurre nada, te propongo que reproduzcas esta pgina. Para que no tengas que teclearlo todo, aqu tienes el archivo de texto, de modo que, si quieres, no tienes ms que pegarlo en tu editor y colocar las etiquetas correspondientes en los lugares adecuados. (Por cierto: las fuentes que he utilizado son Arial y Comic Sans MS.)

inicio

4. Los prrafos de un documento HTML

En el apartado anterior hemos aprendido a controlar la apariencia de los caracteres. (Recuerda, de todas maneras, que la etiqueta <FONT> est en desuso.) Vamos ahora a estudiar las etiquetas fundamentales que controlan la organizacin de los prrafos en un texto ms complejo.

Ya conocemos un tag que afecta a las lneas: <BR>. Si deseamos que una lnea no se parta al llegar al final de la ventana del navegador, debemos colocar al comienzo la etiqueta <NOBR>, y el navegador colocar entonces un scroll o barra de desplazamiento horizonal. Por supuesto, si queremos que haya ms lneas, al final s deber aparecer <BR>.

4.1. Los prrafos y su alineamiento

La etiqueta <BR> inserta un salto de lnea, pero no un salto de prrafo.7 En cambio, la etiqueta <P>...</P> inserta una salto de lnea y una lnea en blanco, por lo que, en la prctica, equivale a un nuevo prrafo. Por supuesto, tanto <BR> como <P>...</P> pueden repetirse varias veces seguidas para dejar ms distancia entre las lneas y los prrafos. De todas maneras, slo podemos separar los prrafos con lneas completas (una, dos, etc.), pero no podemos controlar el espacio entre los prrafos con la precisin que permite, por ejemplo, el programa Word (con las opciones de espaciado anterior y posterior).8 Un prrafo puede alinearse introduciendo los siguientes atributos en la etiqueta habitual: Cdigo Funcin Prrafo alineado a la izquierda <P align="left">...</P> <P align="center">...</P> Prrafo centrado Prrafo alienado a la derecha <P align="right">...</P> <P align="justify">...</P> Prrafo justificado

Las etiquetas anteriores permiten alinear los prrafos enteros, pero siempre dejando una lnea vaca delante de cada uno de ellas. Hay alguna manera de alinear independientemente lneas o grupos de lneas? S, con las siguientes etiquetas:

Cdigo

Funcin Lnea(s) alineada(s) a la izquierda <DIV align="left">...</DIV> <DIV align="center">...</DIV> Lnea(s) centrada(s) Lnea(s) alineada(s) a la derecha <DIV align="right">...</DIV> <DIV align="justify">...</DIV> Lnea(s) alineada(s) justificadas

En definitiva, disponemos de varias etiquetas similares para la creacin y la alineacin de los prrafos, que sern ms o menos apropiadas

dependiendo de las ocasiones. Veamos cmo funcionan en una pgina web: EJEMPLO 5 <HTML> <HEAD> <TITLE>Ejemplo 5</TITLE> </HEAD> <BODY> <P align="left">Este prrafo est alineado a la izquierda. En la prctica, equivale sencillamente a la misma etiqueta sin indicacin de alineacin.</P> <P align="center">Este prrafo est centrado. Hay una lnea en blanco entre este prrafo y el anterior.</P> <P>Ahora vamos a alinear tres lneas seguidas de tres maneras diferentes, pero sin dejar lneas vacas entre ellas, por medio de otras etiquetas:</P> <DIV align="left">alineado izquierdo alineado izquierdo alineado izquierdo alineado izquierdo</DIV> <DIV align="center">alineado centrado alineado centrado alineado centrado alineado centrado</DIV> <DIV align="right">alineado derecho alineado derecho alineado derecho alineado derecho </DIV> </BODY> </HTML> Ver resultado

Otra etiqueta que afecta a la alineacin de los prrafos es <BLOCKQUOTE>...<BLOCKQUOTE>, que introduce una doble sangra, derecha e izquierda. Pueden colocarse varias etiquetas seguidas para acentuar la sangra, como se observa en el siguiente ejemplo: EJEMPLO 6 <HTML> <HEAD> <TITLE>Ejemplo 6</TITLE> </HEAD> <BODY> <P>Prrafo normal Prrafo normal Prrafo normal Prrafo normal Prrafo normal Prrafo normal Prrafo normal Prrafo normal.</P> <P><BLOCKQUOTE>Prrafo con una sangra izquierda-derecha Prrafo con una sangra izquierda-derecha Prrafo con una sangra izquierda-derecha Prrafo con una sangra izquierdaderecha.</BLOCKQUOTE></P> <P><BLOCKQUOTE><BLOCKQUOTE><BLOCKQUOTE>Prrafo con tres sangras izquierda-derecha Prrafo con tres sangras

izquierda-derecha Prrafo con tres sangras izquierda-derecha Prrafo con tres sangras izquierdaderecha.</BLOCKQUOTE></BLOCKQUOTE></BLOCKQUOTE ></P> </BODY> </HTML> Ver resultado

4.2. Los ttulos

Pueden utilizarse hasta seis tipos de ttulos en un documento HTML, ordenados jerrquicamente por medio de la etiqueta <Hn>...</Hn>, donde n = 1 a 6. Las etiquetas de los ttulos introducen una lnea superior en blanco. Como lo habitual despus de un ttulo es un nuevo prrafo (<P>), que tambin introduce su propia lnea, el resultado final suele ser que una lnea de ttulo tiene una lnea en blanco antes y otra despus. Las etiquetas de los ttulos admiten indicaciones de alineacin, de la misma manera que la etiqueta de prrafo. Veamos qu aspecto tienen los ttulos de un documento HTML: EJEMPLO 7 <HTML> <HEAD> <TITLE>Ejemplo 7</TITLE> </HEAD> <BODY> <H1>Ttulo 1</H1> <H2>Ttulo 2</H2> <H3>Ttulo 3</H3> <H4>Ttulo 4</H4> <H5>Ttulo 5</H5> <H6>Ttulo 6</H6> <H7>Ttulo 7 (como no existe, no supone ningn cambio)</H7> <P>Adems, los ttulos pueden recibir indicaciones de alineacin, como en los siguientes ejemplos</P> <H3 align="center">Ttulo centrado</H3> <H3 align="right">Ttulo a la derecha</H3> </BODY> </HTML> Ver resultado

Este ejemplo permite plantear el siguiente ejercicio: EJERCICIO 2

En el EJEMPLO 7 se observa que siempre queda una lnea en blanco entre un ttulo y el prrafo siguiente (el que comienza con "Adems". Cmo puede suprimirse dicha lnea? Elimina, por ejemplo, la que hay entre el ttulo 7 y el prrafo siguiente. Sabes solucionarlo? Te parece fcil? Eso quiere decir que has entendido estupendamente todo lo expuesto hasta el momento. No lo has conseguido? No pasa nada, pero tal vez deberas repasar todo lo anterior con ms detalle. En cualquier caso, aqutienes la solucin.

4.3. Las listas


Las listas son elementos que, como los ttulos, permiten presentar niveles jerarquizados de texto. Los documentos HTML permiten dos tipos de listas: 1. Listas no ordenadas (bullet list): su etiqueta principal es <UL>...</UL>. 2. Listas ordenadas o numeradas (numbered list): su etiqueta principal es <OL>...</OL>. 3. Listas de definiciones (definition list): su etiqueta principal es <DL>...</DL> .

Una vez definido el tipo de lista deseada, los elementos que la componen se marcan de distinta manera segn el tipo: 1. En las listas ordenadas (<OL>...</OL>) o no ordenadas (<UL>...</UL>), cada elemento de dicha lista se marca con la etiqueta<LI>...</LI> (list item).

2. En las listas de definicin (<DL>...</DL>), se utilizan dos: cada elemento que se define se marca con <DT>...</DT> y el texto de cada definicin se marca con <DD>...</DD>. Esta etiqueta se puede repetir si se necesita introducir varios elementos de definicin.

Las listas se pueden encajar unas dentro de otras, adems de con el resto de las etiquetas disponibles. Vemos algn ejemplo: EJEMPLO 8 <HTML> <HEAD> <TITLE>Ejemplo 8</TITLE> </HEAD> <BODY> <H3>Los meses de primavera</H3> <UL> <LI>Abril</LI> <LI>Mayo</LI> <LI>Junio</LI> </UL> <BR> <H3>Los meses de verano</H3> <OL> <LI>Julio</LI> <LI>Agosto</LI> <LI>Septiembre</LI> </OL> <BR> <H3>Los meses del ao</H3> <UL> <LI>Los meses de primavera <OL> <LI>Abril</LI> <LI>Mayo</LI> <LI>Junio</LI> </OL> </LI> <LI>Los meses de verano <OL> <LI>Julio</LI> <LI>Agosto</LI> <LI>Septiembre</LI> </OL> </LI> </UL> <BR> <H3>Refranes de los meses</H3>

<DL> <DT>Marzo</DT> <DD>El sol de marzo da con el mazo.</DD> <DT>Abril</DT> <DD>El abril, aguas mil.</DD> <DT>Mayo</DT> <DD>Hasta el 40 de mayo no te quites el sayo.</DD> </DL> </BODY> </HTML> Ver resultado

Las listas admiten varios parmetros, que varan segn el tipo de lista: 1. Las tres listas admiten el parmetro COMPACT, que hace que el navegador presente la lista de la manera ms compacta posible. 2. El parmetro TYPE funciona con las dos primeras listas. Sus valores respectivos son, lgicamente, distintos:

En las no numeradas, controla el tipo de vieta: con forma de disco (<UL type="disc">, la opcin por defecto), de crculo (<UL type="circle">) y de cuadrado (<UL type="square">). En las numeradas, controla el tipo de numeracin: con nmeros rabes (<OL type="1">, la opcin por defecto), romanos (<OL type="I">), romanos en minsculas (<OL type="i">), letras maysculas (<OL type="A">) y minsculas (<OL type="a">).

3. La etiqueta <OL start="n"> indica el nmero por el que empieza la lista numerada. 4. En una lista numerada, se puede cambiar el nmero de un elemento y consiguientemente de los posteriores con la etiqueta <LI value="n">.

4.4. Las rayas horizontales

Las rayas horizontales son otro de los procedimientos habituales para separar los contenidos de un documento HTML. Se introducen simplemente con la etiqueta <HR>. Hay una serie de caractersticas de las rayas que pueden controlarse, como siempre, por medio de parmetros aadidos a la etiqueta bsica: 1. El tamao: la etiqueta <HR> introduce una raya que ocupa todo el ancho de la pantalla. Pueden especificarse distintas anchuras aadiendo el valor deseado, expresado en pixeles

(<HR width="n">) o en trminos porcentuales (<HR width="n%">).9 2. La alineacin: cuando una raya ocupa slo una parte de la pantalla, puede especificarse su alineacin por medio de las etiquetas habituales: <HR align="left"> <HR align="center"> <HR align="right"> 3. La altura: se expresa en pxeles por medio de la etiqueta <HR size="n">. Puede adoptar el valor 0 (la raya ms fina). 4. El color, por medio del prametro habitual: <HR color="?">. 5. El sombreado: la raya posee habitualmente un pequeo efecto de sombreado, que puede eliminarse con la etiqueta <HR noshade>.10

Como siempre, lo habitual suele ser la combinacin de varios parmetros en una misma etiqueta. Por ejemplo: <HR width="50%" size="0" align="center"> No queda sino practicar con las distintas posibilidades de rayas. Por ejemplo: EJEMPLO 9 <HTML> <HEAD> <TITLE>Ejemplo 9</TITLE> </HEAD> <BODY> sta es una lnea normal: <HR> sta es una lnea normal, sin sombreado: <HR noshade> sta es una lnea que ocupa la mitad de la pantalla (si no se establece la alineacin, se coloca centrada por defecto): <HR width="50%"> sta es ms estrecha y mucho ms gorda: <HR width="10%" size="20"> sta es igual pero de color rojo: <HR width="10%" size="20" color="#FF0000"> </BODY> </HTML> Ver resultado

inicio

5. Los enlaces de un documento HTML

En los apartados anteriores hemos aprendido a manejar correctamente el elemento fundamental de todo documento: el texto. Sin embargo, hay otro elemento bsico en un documento HTML, que le proporciona su mayor potencial: los hiperenlaces, que estudiaremos en este apartado. Un hiperenlace es un vnculo que une un elemento del documento activo (por ejemplo, una palabra) con otro, de manera que activamos ese segundo elemento simplemente con un click del ratn en el primero.11 La sintaxis general de la etiqueta es muy simple: <A HREF="destino">...</A>. (Los puntos suspensivos representan el elemento enlazado.) Para que el destino se abra en una ventana nueva, hay que indicar el siguiente atributo: <A HREF="destino" target="_blank">...</A> El destino de un hiperenlace puede ser de tres tipos: 1. Enlace externo: otro documento HTML situado en un ordenador remoto. 2. Enlace local: otro documento HTML situado en el mismo ordenador. 3. Ancla: otro lugar dentro del mismo documento HTML.

Vamos a examinar separadamente cada uno de estos tipos.

5.1. Los enlaces externos


Desde cualquier punto de un documento HTML puede establecerse un enlace con cualquier recurso de Internet. Como es sabido, los recursos ms habituales de Internet son: 1. La WWW, es decir, las pginas web o documentos HTML. La etiqueta correspondiente es: <A HREF="http://servidor/camino.../fichero">...</A> 2. El correo electrnico. La etiqueta correspondiente es: <A HREF="mailto:usuario@servidor">...</A> 3. La transferencia de ficheros (servidores FTP). La etiqueta correspondiente es: <A HREF="ftp://servidor/camino.../fichero">...</A>

Veamos algunos ejemplos: EJEMPLO 10

<HTML> <HEAD> <TITLE>Ejemplo 10</TITLE> </HEAD> <BODY> Vamos a enlazar las palabras "pincha aqu" con algunos destinos remotos.<BR> 1.- Con la pgina web de la UD:<BR> <A HREF="http://www.deusto.es" target="_blank">pincha aqu</a><BR> 2.- Con el servidor FTP de la sede de Ginebra de la OMS:<BR> <A HREF="ftp://ftp.who.ch/" target="_blank">pincha aqu</a><BR> 3.- Con mi correo electrnico:<BR> <A HREF="mailto:airibar@fil.deusto.es">pincha aqu</a><BR> </BODY> </HTML> Ver resultado

5.2. Los enlaces locales

La mayor parte de las "pginas web" son, en rigor, una coleccin de pginas, puesto que la organizacin clsica de los sitios web consiste en un conjunto ordenado de documentos HTML entrelazados y residentes en un mismo ordenador. Dentro de un mismo ordenador, los documentos HTML pueden residir en un mismo directorio o en varios: 1. Cuando todos los documentos residen en el mismo directorio no hay ningn problema, y la etiqueta ser, simplemente: <A HREF="fichero.htm">...</A>. 2. Cuando los ficheros residen en diferentes directorios, hay que facilitar la direccin completa del fichero, lo que puede hacerse de manera absoluta o relativa:

Direccionamiento absoluto: se indica la trayectoria completa del archivo en cuestin: <A HREF=file:///c:/directorio/subdirectorios/fiche ro.htm">...</A>

Direccionamiento relativo: no se indican los nombres de los directorios. Por ejemplo: <A HREF=../../..fichero.htm">...</A>

Aun utilizando un direccionamiento relativo, es necesario indicar los nombres de los directorios "descendentes". Por ejemplo, en una web ordenada como en la figura siguiente, un enlace desde un documento situado en el directorio <HTML> a un recurso situado en el directorio<Imgenes> debera especificarse as:

<A HREF=../../../../Componentes/Imgenes/fichero.htm">...</A>

5.3. Las anclas

Especialmente cuando el documento es largo, conviene utilizar enlaces que apunten hacia otro lugar dentro del mismo documento. Estos enlaces se denominan anclas, anclajes o apuntadores. El procedimiento de enlace es doble: 1. En primer lugar, hay que establecer el punto de anclaje en el lugar del documento que vaya a ser el destino del enlace. Su etiqueta es<A NAME=nombre>...</A>. 2. Despus slo queda enlazar los caracteres deseados con el ancla anterior. Su etiqueta es <A HREF=#nombre>...</A>.

Algunas observaciones sobre las anclas: 1. El nombre del ancla es arbitrario, pero lo lgico es que guarde alguna relacin con el destino, especialmente cuando hay muchas en un mismo documento. 2. Aunque la etiqueta del ancla sea pareada, lo normal es que no incluya nada entre sus dos partes (<A NAME=nombre>...</A>), puesto que lo importante es marcar el punto de inicio del ancla, no su final.

Vamos a practicar estas etiquetas creando una nota a pie de pgina como las utilizadas en este documento, que implican un doble anclaje:

EJEMPLO 11 <HTML> <HEAD> <TITLE>Ejemplo 11</TITLE> </HEAD> <BODY> <P>Al final de este prrafo vamos a colocar una nota a pie de pgina, de modo que al pinchar sobre la llamada, vamos a la nota, y al pinchar sobre el nmero de nota en el pie de pgina, volvemos a la llamada. <A NAME="llamada_1"></A><A HREF="#nota1"><SUP>1</SUP></A><BR><P> Bla,<BR> Bla,<BR> Bla,<BR> Bla,<BR> Bla,<BR> Bla,<BR> Bla,<BR> Bla,<BR> Bla,<BR> Bla, <BR> Bla,<BR> Bla,<BR> Bla,<BR> Bla,<BR> Bla,<BR> Bla,<BR> Bla,<BR> Bla,<BR> Bla,<BR> Bla,<BR> Bla,<BR> Bla,<BR> Bla,<BR> Bla,<BR> Bla,<BR> Bla,<BR> Bla,<BR> Bla,<BR> Bla,<BR> Bla,<BR> Bla,<BR> Bla,<BR> Bla,<BR> Bla,<BR> Bla,<BR> Bla,<BR> Bla,<BR> Bla,<BR> Bla,<BR> Bla,<BR> Bla,<BR> Bla,<BR> Bla,<BR> Bla,<BR> Bla,<BR> Bla, <HR size="0"> <A NAME="nota_1"></A><A HREF="#llamada_1"><SUP>1</SUP></A><FONT SIZE="-1">ste es el texto de la nota. Si pinchamos sobre el nmero, volvemos a la llamada.</FONT> </BODY> </HTML> Ver resultado Hemos presentado el etiquetado bsico de los enlaces, su utilizacin y sus tipos, pero an no somos capaces de alterar su formato predefinido. Esto lo veremos en el tercer captulo de esta serie, dedicado a Informacin Complementaria.

Introduccin al HTML 5
Enviado por Tito Fernando Ale Nieto

1.

Definicin

2. 3. 4. 5.

Caractersticas Novedades Presentacin en HTML 5 Bibliografa

DEFINICION
HTML 5 (HyperText Markup Language, versin 5) es la quinta revisin mayor del lenguaje bsico de la World Wide Web, HTML. HTML 5 especifica dos variantes de sintaxis para HTML: un clsico HTML (text/html), la variante conocida como HTML5 y una variante XHTMLconocida como sintaxis XHTML5 que deber ser servida como XML (XHTML) (application/xhtml+xml).1 Esta es la primera vez que HTML y XHTML se han desarrollado en paralelo.

CARACTERISTICAS
Hay que aclarar que HTML5 sigue en borrador y lo seguir estando durante algunos aos ms. El enfoque general ha cambiado bastante respecto a versiones anteriores de HTML, aadiendo semntica y accesibilidad implcitas, especificando cada detalle y borrando cualquier ambigedad. Tambin se tiene en cuenta que muchas pginas web actuales son dinmicas, parecindose ms a aplicaciones que a documentos. Algo bsico es que HTML5 est definido en base al DOM (la representacin interna de una web con la que trabaja un navegador), dejando de lado la representacin "real", definiendo a la vez un estndar HTML y XHTML.

MEJOR ESCTRUCTURA
En HTML5 hay varios elementos que sirven para estructurar mejor una pgina web, estableciendo qu es cada seccin, y reemplazando en muchas ocasiones a div.

Estos son los elementos: section representa una seccin "general" dentro de un documento o aplicacin, como un captulo de un libro. Puede contener subsecciones y si lo acompaamos de h1-h6 podemos estructurar mejor toda la pgina. article representa un contenido independiente en un documento, el caso ms claro son las entradas de un blog o las noticias de un peridico online. As, dentro de la portada podremos tener varios artculos demarcados semnticamente, por lo que una herramienta puede extraerlos fcilmente. aside representa un contenido que est muy poco relacionado con el resto de la pgina, como una barra lateral. Esencial para delimitar el contenido "importante" del contenido "de apoyo", haciendo ms caso al primero que al segundo. header representa la cabecera de una seccin, y es de suponer que se le d ms importancia que al resto, sobre todo si la seccin es un artculo. footer representa el pi de una seccin, con informacin acerca de la pgina/seccin que poco tiene que ver con el contenido de la pgina, como el autor, el copyright o el ao. nav representa una seccin dedicada a la navegacin entre el sitio, como la tpica barra superior de los peridicos.

MEJORES FORMULARIOS

El elemento input ha sido ampliado y ahora permite todos estos tipos de datos: datetime, datetime-local, date, month, week, time, para que indicar una fecha/hora. number para que el usuario indique un nmero. range para indicar un rango entre dos nmeros. email para indicar un correo electrnico. url para indicar una direccin web. search para indicar una bsqueda. color para indicar un color.

ELEMENTOS IMPORTANTES

audio y video sirven para incrustar un contenido multimedia de sonido o de vdeo, respectivamente. Sin duda uno de los aadidos ms interesantes, ya que permite reproducir/controlar vdeos y audios sin necesidad de plugins como el de Flash. embed sirve para contenido incrustado pero no nativo, sino ejecutado por plugins como el de Flash.

canvas es un elemento complejo que permite generar grficos, dibujando elementos dentro de l. MAS ELEMENTOS

dialog se plantea para escribir conversaciones, por ejemplo para transcripciones de chat. figure se plantea para asociar un contenido multimedia (una foto, un vdeo, etc) a un ttulo o leyenda. mark representa un texto resaltado, por ejemplo para resaltar una bsqueda. meter representa una medida, como el nmero de KB. progress representa el estado de una tarea, y se puede usar por ejemplo al subir un documento o al realizar varias tareas pesadas. Esto permitir barras de tareas personalizadas y potentes. time representa una fecha o una hora. command representa un comando que el usuario puede ejecutar en su navegador. output representa una salida de un programa, probablemente ejecutado directamente en el navegador, como una calculadora. datagrid representa datos de manera interactiva y permite trabajar dinmicamente con informacin y cambiar la pgina respecto a esa informacin. ETIQUETAS QUE SE VAN El listado de etiquetas que caen en desuso -porque ya existe una forma de hacer lo mismo con CSS- es el siguiente: FONT CENTER STRIKE BASEFONT BIG STRIKE TT U El HTML 5 elimina completamente el uso de frames (marcos) por razones de usabilidad y accesibilidad. No ocurre lo mismo con el IFRAME que seguir siendo vlido. Por lo tanto, las etiquetas vinculadas con los frames que salen son: FRAME FAMESET NOFRAMES Para terminar, encontramos etiquetas que ya no se usan porque creaban confusin o hacan lo mismo que otras ya existes. Estas son: ACRONYM APPLET ISINDEX DIR Atributos eliminados:

ETIQUETAS NUEVAS SECTION ARTICLE ASIDE HGROUP HEADER FOOTER NAV DIALOG FIGURE VIDEO EMBED MARK PROGRESS METER TIME RUBY (RT y RP) CANVAS COMMAND DETAILS DATALIST KEYGEN OUTPUT

NOVEDADES
1) El elemento "lienzo" o "Canvas". Este elemento permitir el renderizado de imgenes y grficos sin ningn proceso intermedio. Al no depender de nada ni nadie para presentar esta clase de flexibilidad en una pgina web, las posibilidades tanto de diseo como de interactividad de los usuarios con la pgina que visitan es sencillamente enorme. 2) Cach para aplicaciones. Aplicaciones web enteras pueden ser guardadas y utilizadas de forma local cuando no hay una conexin a Internet, al igual que toda la informacin que haya sido guardada o generada a travs de dichas aplicaciones. 3) Localizacin geogrfica. HTML 5 tendr la capacidad de determinar con un alto grado de precisin la ubicacin geogrfica del usuario. Esto se hara principalmente en pginas que, a partir de la posicin actual del usuario, pueden ofrecer diferentes clases de servicios relacionados con el rea en cuestin 4) "Operarios Web". habilitan la posibilidad de realizar procesamiento paralelo en segundo plano, mientras que la pgina web mantiene su rendimiento intacto. Las pginas web siempre han demostrado

cierta tendencia lineal a la hora de cargarse, pero con HTML 5, aquellas aplicaciones y sitios que dependan de una gran cantidad de cdigo, podrn ejecutarse de forma ms eficiente, y sin afectar el rendimiento del navegador. 5) El elemento "Video". Sin lugar a dudas, la mejora ms importante que incorpora HTML 5, y la que ms revuelo est provocando entre los medios. El elemento de vdeo incorporado en HTML 5 es la forma definitiva de rebelin, ya que se pueden reproducir vdeos en Internet y embeberlos en pginas sin la necesidad de un plugin.

DIFERENCIAS ENTRE HTML4 Y HTML5 4: indica si el elemento est definido en HTML 4.01 5: indica si el elemento est definido en HTML

Leer ms: http://www.monografias.com/trabajos89/introduccion-al-html-5/introduccion-al-html5.shtml#ixzz2fGDJkhN9

Etiquetas basicas de html

HTML es el lenguaje por el cual construimos una pgina web. Este lenguaje se basa principalmente en etiquetas, con las cuales vamos construyendo los diferentes apartados de

nuestra web. Es imprescindible conocer estas etiquetas y su funcionamiento para poder crear o al menos modificar una pgina web.

* <HTML>: indica el comienzo del documento HTML. * <HEAD>: indica que empieza la cabecera de la pgina. En ella se suele poner el ttulo (<title>

de la web, una descripcin y otras informaciones relacionadas con el contenido de la pgina.

* <BODY>: es el cuerpo de la pgina, donde va lo que se ve en el navegador al cargar una

web. En el body van los textos, las imgenes y todos los contenidos de la web.
* <H1>, <H2>, etc.: son los ttulos o encabezados. Se utilizan para establecer determinados textos de la pgina como titulares, suelen tener un tamao de fuente mayor para diferenciarlos del resto del texto. Son importantes en el posicionamiento en buscadores. * <A>: define los enlaces. * <TABLE>: es una tabla, y dentro de esta tenemos filas <TR> y celdas <TD>.

* <P>: el texto dentro de esta etiqueta forma un prrafo. * <IMG>: imgenes. * <BR>: salto de lnea. * <UL>: los textos dentro de esta etiqueta se estructuran en listas. Mediante el uso de <LI> definimos cada guin dentro de la lista, y usando <OL> en lugar de <UL> tendremos listas ordenadas. * <B> y <STRONG>: se utilizan para resaltar el texto. * <U>: texto subrayado. * <I>: texto en cursiva. Ejemplo de pgina bsica <html> <head> <title>Ttulo de la pgina</title> </head> <body> <h1>Encabezado de la pgina</h2> <h3>Encabezado de menor tamao</h3> <p>Este es el texto de un prrafo.</p> <p>Este es el texto de otro prrafo. Dentro de este prrafo, pueden ir palabras <b>en negrita</b>, <i>en cursiva</i> o lo que quieras.</p> <p>Tambin podemos poner listas como la siguiente:</p> <ul>

<li>Guin nmero uno.</li>


<li>Guin nmero dos.</li> <li>Guin nmero tres.</li> </ul> </body> </html>

Consejo de Atributos bgcolor=?> <body Establece el color de fondo, usando nombres o valores hex text=?> <body Establece el color del texto, usando nombres o valores hex link=?> <body Establece el color de los enlaces, usando nombres o valores hex vlink=?> <body Establece el color de los enlaces, usando nombres o valores hex alink=?> <body Establece el color de los enlaces con un clic Etiquetas de texto <pre> </ pre> Crea texto preformateado <h1> </ h1> Crea un ttulo grande <h6> </ h6> Crea un ttulo pequeo <b> </ b> Crea texto en negrita <i> </ i> Crea texto en cursiva <tt> </ tt> Crea, o mquina de escribir estilo de texto-teletipo <cite> </ cite> Crea una cita, por lo general en cursiva <em> </ em> Hace hincapi en la palabra (con cursiva o negrita) <strong> </ strong> Hace hincapi en la palabra (con cursiva o negrita) size=?> <font </ font> Ajusta tamao del fuente, de 1 a 7) color=?> <font </ font> Juegos de color de la fuente, usando nombres o valores hex Enlaces <a href="URL"> </ a> Crea un hipervnculo <a href="mailto:EMAIL"> </ a> Crea un enlace de correo <a name="NAME"> </ a> Crea una ubicacin de destino dentro de un documento <a href="#NAME"> </ a> Enlaces a ese lugar de destino en otra parte del documento Formato <p></p> Crea un nuevo prrafo

align=?> <p Alinea un prrafo a la izquierda, derecha o al centro <br> Inserta un salto de lnea <blockquote> </ Span> Sangra de texto de ambos lados <dl> </ dl> Crea una lista de definiciones <dt> Precede cada definicin de trmino <dd> Precede cada definicin <ol> </ ol> Crea una lista numerada <li> </ li> Precede a cada elemento de la lista, y aade un nmero <ul> </ ul> Crea una lista con vietas align=?> <div Un tag genrico utilizado para grandes bloques de formato de HTML, tambin se utiliza para hojas de estilo Elementos grficos <img src="name"> Agrega una imagen <img src="name" align=?> Alinea una imagen: izquierda, derecha, centro;, superior, medio fondo <img src="name" border=?> Ajusta tamao del borde alrededor de una imagen <hr> Inserta una regla horizontal size=?> <hr Establece el tamao (altura) de la regla width=?> <hr Establece la anchura de la regla, en porcentaje o valor absoluto noshade> <hr Crea una regla sin una sombra Tablas <table> </ table> Crea una tabla <tr> </ tr> marcha cada fila en una tabla <td> </ td> Pone en marcha cada celda de una fila <th> </ th> Pone en marcha la cabecera de la tabla (una celda normal, con negrita, texto centrado) Atributos de la tabla

border=#> <table Establece el ancho de borde alrededor de celdas de la tabla cellspacing=#> <table Ajusta la cantidad de espacio entre las celdas de la tabla cellpadding=#> <table Ajusta la cantidad de espacio entre el borde de una celda y su contenido width=# <table o %> Establece la anchura de la mesa - en pxeles o como porcentaje del ancho del documento align=?> <tr o align=?> <td Establece la alineacin de la celda (s) (a la izquierda, centro o derecha) valign=?> <tr o valign=?> <td Establece la alineacin vertical de la celda (s) (, superior, media o inferior) <td colspan=#> Establece el nmero de columnas de una celda debe abarcar <td rowspan=#> Establece el nmero de filas de una clula debe abarcar (por defecto = 1) <td nowrap> Evita las lneas dentro de una clula se rompa para adaptarse a Frames Marcos <frameset> </ frameset> etiquetas en un documento marco, tambin se pueden anidar en otros conjuntos de marcos rows="value,value"> <frameset Define las filas dentro de un conjunto de marcos, utilizando el nmero de pxeles, o el porcentaje de ancho de w cols="value,value"> <frameset Define las columnas dentro de un conjunto de marcos, utilizando el nmero de pxeles, o el porcentaje de ancho de <frame> Define un marco nico - o regin - dentro de un conjunto de marcos <NOFRAMES> </ noframes> Define lo que aparecer en navegadores que no soporten marcos Marcos Atributos src="URL"> <frame Especifica que el documento HTML se debe mostrar name="name"> <frame Nombres de la estructura, o de la regin, por lo que puede ser objetivo de otros marcos marginwidth=#> <frame Define los mrgenes izquierdo y derecho del marco, debe ser igual o superior a 1 marginheight=#> <frame Define los mrgenes superior e inferior del marco, debe ser igual o superior a 1 scrolling=VALUE> <frame Establece si el marco tiene una barra de desplazamiento, puede ser igual a "s", "no", o "auto. Valor" El valor por defecto, como en los documentos ordinarios, es automtico. noresize> <frame Impide que el usuario cambiar el tamao de un marco Formularios Para las formas funcionales, tendr que ejecutar un script CGI. El HTML slo crea la apariencia de un formulario.

<form> </ form> Crea todas las formas </select> <select name="nombre" mltiples size=?> </ select> Crea un men desplegable. Tamao establece el nmero de elementos de men visible antes de yo u necesidad de desplazarse. <option> Pone en marcha cada elemento de men <select name="NAME"> </ select> Crea un men desplegable <option> Pone en marcha cada elemento de men <textarea name="nombre" cols=40 rows=8> </ textarea> Crea un rea de la caja de texto. Establecer el ancho de las columnas, filas ajustar la altura. <input type="checkbox" name="NAME"> Crea una casilla de verificacin. Texto siguiente etiqueta. <input type="radio" name="nombre" value="x"> Crea un botn de radio. Texto sigue etiquetas <input type=text name="foo" size=20> . Crea una lnea de texto y un rea. Tamao establece la longitud, en caracteres. <input type="submit" value="NAME"> Crea un botn Enviar <input type="image" border=0 name="NAME" src="name.gif"> type="image" Crea un botn Enviar con una imagen type="reset"> <input Crea un botn de reinicio

You might also like