Documentos de Académico
Documentos de Profesional
Documentos de Cultura
Css
Hoja de estilo en cascada o CSS (siglas en ingls de cascading style sheets) es un lenguaje usado
para definir y crear la presentacin de un documento estructurado escrito en HTML o XML2 (y por
extensin en XHTML). El World Wide Web Consortium (W3C) es el encargado de formular la
especificacin de las hojas de estilo que servirn de estndar para los agentes de
usuario o navegadores.
La idea que se encuentra detrs del desarrollo de CSS es separar la estructura de un documento
de su presentacin.
La informacin de estilo puede ser definida en un documento separado o en el mismo documento
HTML. En este ltimo caso podran definirse estilos generales en la cabecera del documento o en
cada etiqueta particular mediante el atributo style.
Java y JavaScript
Un avance significativo en la tecnologa web fue la Plataforma Java de Sun Microsystems. Este
lenguaje permite que las pginas web contengan pequeos programas (llamados applets)
directamente en la visualizacin. Estos applets se ejecutan en el ordenador del usuario,
proporcionando un interfaz de usuario ms rico que simples pginas web. Los applets Java del
cliente nunca obtuvieron la popularidad que Sun esperaba de ellos, por una serie de razones,
incluyendo la falta de integracin con otros contenidos (los applets fueron confinados a pequeas
cajas dentro de la pgina renderizada) y el hecho de que muchos ordenadores del momento eran
vendidos a los usuarios finales sin una JVM correctamente instalada, por lo que se necesitaba que
el usuario descargara la mquina virtual antes de que el applet comenzara a aparecer.
Actualmente Adobe Flash desempea muchas de las funciones que originalmente se pensaron
que podran hacer los applets de Java incluyendo la ejecucin de contenido de vdeo, animaciones
y algunas caractersticas superiores de GUI. En estos momentos Java se utiliza ms como
plataforma y lenguaje para el lado delservidor y otro tipo de programacin.
JavaScript, en cambio, es un lenguaje de script que inicialmente fue desarrollado para ser usado
dentro de las pginas web. La versin estandarizada es el ECMAScript. Si bien los nombres son
similares, JavaScript fue desarrollado por Netscape y no tiene relacin alguna con Java, aparte de
que sus sintaxis derivan del lenguaje de programacin C. En unin con el Document Object
Model de una pgina web, JavaScript se ha convertido en una tecnologa mucho ms importante
de lo que pensaron sus creadores originales. La manipulacin del Modelo de Objetos de
Documento despus de que la pgina ha sido enviada al cliente se ha denominado HTML
Dinmico (DHTML), para enfatizar un cambio con respecto a las visualizaciones de HTML esttico.
En su forma ms simple, toda la informacin opcional y las acciones disponibles en las pginas
web con JavaScript ya son cargadas la primera vez que se enva la pgina. Ajax("Asynchronous
JavaScript And XML", en espaol, JavaScript Asncrono y XML) es una tecnologa basada en
JavaScript que puede tener un efecto significativo para el desarrollo de la Web. Ajax proporciona
un mtodo por el cual grandes o pequeas partes dentro de una pgina web pueden actualizarse,
usando nueva informacin obtenida de la red en respuesta a las acciones del usuario. Esto permite
que la pgina sea mucho ms confiable, interactiva e interesante, sin que el usuario tenga que
esperar a que se cargue toda la pgina. Ajax es visto como un aspecto importante de lo que suele
llamarse Web 2.0. Ejemplos de tcnicas Ajax usadas actualmente pueden verse en Gmail,Google
Maps, etc.
HTML
Definindolo de forma sencilla, "HTML es lo que se utiliza para crear todas las pginas web de
Internet". Ms concretamente, HTML es el lenguaje con el que se "escriben" la mayora de pginas
web.
Los diseadores utilizan el lenguaje HTML para crear sus pginas web, los programas que utilizan
los diseadores generan pginas escritas en HTML y los navegadores que utilizamos los usuarios
muestran las pginas web despus de leer su contenido HTML.
Aunque HTML es un lenguaje que utilizan los ordenadores y los programas de diseo, es muy fcil
de aprender y escribir por parte de las personas. En realidad, HTML son las siglas de HyperText
Markup Language y ms adelante se ver el significado de cada una de estas palabras.
El lenguaje HTML es un estndar reconocido en todo el mundo y cuyas normas define un
organismo sin nimo de lucro llamado World Wide Web Consortium, ms conocido como W3C.
Como se trata de un estndar reconocido por todas las empresas relacionadas con el mundo de
Internet, una misma pgina HTML se visualiza de forma muy similar en cualquier navegador de
cualquier sistema operativo.
El propio W3C define el lenguaje HTML como "un lenguaje reconocido universalmente y que
permite publicar informacin de forma global". Desde su creacin, el lenguaje HTML ha pasado de
ser un lenguaje utilizado exclusivamente para crear documentos electrnicos a ser un lenguaje que
se utiliza en muchas aplicaciones electrnicas como buscadores, tiendas online y banca
electrnica.
XHTML 1.0 es una adaptacin de HTML 4.01 al lenguaje XML, por lo que mantiene casi todas sus
etiquetas y caractersticas, pero aade algunas restricciones y elementos propios de XML. La
versin XHTML 1.1 ya ha sido publicada en forma de borrador y pretende modularizar XHTML.
Tambin ha sido publicado el borrador de XHTML 2.0, que supondr un cambio muy importante
respecto de las anteriores versiones de XHTML.
ELEMENTOS HTLM
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</nombrede-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.
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>nfasis fuerte</strong> y <em>nfasis</em> . Es fcil ver
cmo unlector 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 HTLM
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). De todas maneras, dejar los valores sin comillas
es considerado poco seguro. En contraste con los pares nombre-elemento, hay algunos atributos
que afectan al elemento simplemente por su presencia (tal como el atributo ismap para el
elemento img ).
<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 el DOCTYPE, que significa la palabra justo tras
DOCTYPE el tag de raz.
<script> : incrusta un script en una web, o llama a uno mediante src="url del script" . Se
recomienda incluir eltipo 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:
<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> .
<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:
<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" .
La mayora de etiquetas deben cerrarse como se abren, pero con una barra (/) tal como se
muestra en los siguientes ejemplos:
ESTRUCTURA HTLM
Todos los documentos Html tienen la estructura que se muesta a continuacin, aunque la
etiqueta <body> puede ser sustituida por <frameset> para un tipo de pginas que dividen la
ventana del navegador en varios cuadros (frames).
<HTML>
<HEAD>
<TITLE>Ttulo de la pgina</TITLE>
...
</HEAD>
<BODY>
Aqu ira el contenido de la pgina
</BODY>
</HTML>
CONTENEDOR HTLM
Contenedor (wrapper) suele encerrar la mayor parte de los contenidos de la pgina y se emplea
para definir las caractersticas bsicas de la pgina: su anchura, sus bordes, imgenes laterales,
si se centra o no respecto de la ventana del navegador, etc.
TABLAS HTLM
Desde sus primeras versiones, HTML incluy el soporte para crear tablas de datos en las pginas
web. Adems de ser sencillo, el modelo definido por HTML es muy flexible y bastante completo.
Las tablas en HTML utilizan los mismos conceptos de filas, columnas, cabeceras y ttulos que los
que se utilizan en cualquier otro entorno de publicacin de documentos:
Las tablas de HTML pueden contener elementos simples, agrupaciones de filas y de columnas,
cabeceras y pies de tabla, subdivisiones, cabeceras mltiples y otros elementos complejos.
A pesar de que las tablas HTML son fciles de comprender y utilizar, son uno de los elementos
ms polmicos de HTML. El problema de las tablas es que no siempre se utilizan adecuadamente.
Aunque parezca obvio, las tablas se deben utilizar para mostrar informacin tabular.
Hasta hace unos aos, las tablas tambin se utilizaban para definir la estructura de las pginas
web. La cabecera de la pgina era una fila de una gran tabla, el pie de pgina era otra fila de esta
tabla y la zona de contenidos estaba formada por varias columnas dentro de esa gran tabla.
Aunque algunos malos diseadores siguen utilizando hoy en da las tablas para definir la estructura
completa de las pginas web, se trata de una tcnica obsoleta y nada recomendable. El motivo es
que se complica en exceso el cdigo HTML y su mantenimiento es muy complejo. La solucin
correcta para definir la estructura de las pginas consiste en la utilizacin de hojas de estilos CSS.
IMGENES HTLM
Las imgenes son uno de los elementos ms importantes de las pginas web. De hecho,
prcticamente todas las pginas web contienen alguna imagen y la mayora incluyen decenas de
imgenes. Dentro de las imgenes que se pueden incluir en una pgina HTML se deben distinguir
dos tipos: las imgenes de contenido y las imgenes de adorno.
Las imgenes de contenido son las que proporcionan informacin y complementan la informacin
textual. Las imgenes de adorno son las que se utilizan para hacer bordes redondeados, para
mostrar pequeos iconos en las listas de elementos, para mostrar fondos de pgina, etc. Las
imgenes de contenido se incluyen directamente en el cdigo HTML mediante la etiqueta <img> y
las imgenes de adorno no se deberan incluir en el cdigo HTML, sino que deberan emplearse
hojas de estilos CSS para mostrarlas.
A continuacin se muestra la definicin de la etiqueta <img>, utilizada para incluir las imgenes en
las pginas HTML:
Etiqueta
<img>
Atributos
comunes
Atributos
propios
Tipo de
elemento
Descripcin
Los dos atributos requeridos son src y alt. El atributo src es similar al atributo href de los enlaces,
ya que establece la URL de la imagen que se va a mostrar en la pgina. Las URL indicadas
pueden ser absolutas o relativas. El atributo altpermite describir el contenido de la imagen
mediante un texto breve. Las descripciones deben tener una longitud inferior a 1024 caracteres y
son tiles para las personas y dispositivos discapacitados que no pueden acceder a las imgenes.
HIPERBINCULOS HTLM
HTML permite incluir en las pginas web otros elementos mucho ms complejos, comoapplets de
Java y vdeos en formato QuickTime o Flash. La mayora de este tipo de contenidos no los
interpreta el navegador directamente, sino que hace uso de pequeos programas
llamados plugins y que se encargan de tratar con este tipo de elementos complejos.
La etiqueta <object> es la que permite "embeber" o incluir en las pginas HTML cualquier tipo de
contenido complejo:
Etiqueta
<object>
Atributos
comunes
Atributos
propios
Tipo de
elemento
Bloque y en lnea
Descripcin
El atributo data se emplea para indicar la URL del recurso que se va a incluir. El atributo type indica
el tipo de contenido de los datos del objeto. Los posibles valores de type estn estandarizados y
coinciden con los del atributo type de la etiqueta <a> que se explic anteriormente.
El propio estndar de HTML incluye ejemplos de uso de esta etiqueta. Incluir un vdeo en formato
MPEG:
<object data="PlanetaTierra.mpeg" type="application/mpeg" />
Tambin se pueden incluir varias versiones alternativas de un mismo contenido. As, si el
navegador no es capaz de interpretar el formato por defecto, puede optar por cualquiera de los
otros formatos alternativos:
<object title="La Tierra vista desde el espacio" classid="http://www.observer.mars/TheEarth.py">
<!-- Formato alternativo en forma de vdeo -->
<object data="PlanetaTierra.mpeg" type="application/mpeg">
Etiqueta
<param>
Atributos
comunes
id
Atributos
propios
Tipo de
elemento
Etiqueta vaca
Descripci
n
El elemento anterior es correcto desde el punto de vista tcnico, pero provoca que algunos
navegadores como Internet Explorer no visualicen el vdeo hasta que se ha descargado
completamente. Si se trata de un vdeo largo, esta solucin no es vlida para el usuario.
Por este motivo, se utiliza una solucin alternativa para incluir vdeos Flash en las pginas HTML:
el uso de la etiqueta<embed>. Aunque esta solucin funciona correctamente, no se trata de una
solucin vlida desde el punto de vista del estndar de XHTML, por lo que las pginas que incluyan
esta solucin no pasarn correctamente el proceso de validacin.
Etiqueta
<embed>
Atributos
comunes
Atributos
propios
Tipo de
elemento
Bloque
Descripci
n
Este es el motivo por el que los sitios web ms populares de vdeos en formato Flash proporcionan
un cdigo similar al siguiente para incluir sus vdeos en las pginas HTML:
<object width="425" height="350">
<param name="movie" value="http://www.youtube.com/v/MsH0rBWCYjs"></param>
<param name="wmode" value="transparent"></param>
<embed src="http://www.youtube.com/v/MsH0rBWCYjs" type="application/x-shockwave-flash"
wmode="transparent" width="425" height="350"></embed>
</object>
Una vez ms, se debe tener en cuenta que la solucin anterior de utilizar la etiqueta <embed> es
correcta desde el punto de vista del usuario (no tiene que esperar a que el vdeo se descargue
completamente para poder verlo) pero no es una solucin tcnicamente vlida, ya que la
etiqueta <embed> no es parte del estndar XHTML.