Anda di halaman 1dari 11

Herramientas para

trabajar con HTML5


ndice
1 | Herramientas para trabajar con HTML5 3

1.1 | Creacin de una pgina en HTML5 con 4


Eclipse

1.2 | Herramientas de edicin: Eclipse 6

1.3 | Introduccin a HTML 8

1.4 | Marcado HTML 9


Herramientas para trabajar con HTML5 | TELEFNICA // 3

1. Herramientas para trabajar con HTML5


Para trabajar con HTML5 vamos a usar el entorno Eclipse. Se trata de un entorno de desarrollo
multiplataforma y permite desarrollar en mltiples lenguajes tanto de programacin como de
marcado, uso de UML, etc.

El IDE eclipse es de libre distribucin y puede mediante la implementacin de los plugins


descargarse desde su web oficial (www. adecuados. La arquitectura de plugins
eclipse.org), ms concretamente la versin de Eclipse permite, adems de integrar
para desarrolladores J2EE. Esta versin diversos lenguajes sobre un mismo IDE,
contiene una serie de plugins preinstalados introducir otras aplicaciones accesorias
para desarrollo de aplicaciones web con que pueden resultar tiles durante el
Java. Aunque el lenguaje Java se encuentra proceso de desarrollo como: herramientas
fuera del mbito de este curso, esta versin UML, editores visuales de interfaces,
tambin contiene el editor para HTML5, ayuda en lnea para libreras, etc.
que es la funcionalidad que vamos a usar.
El IDE Eclipse es, nicamente, una de las
En la web oficial de Eclipse, se define herramientas que se engloban bajo el
como An IDE for everything and nothing denominado Proyecto Eclipse. El Proyecto
in particular (un IDE para todo y para Eclipse ana tanto el desarrollo del IDE
nada en particular). Eclipse es, en el fondo, Eclipse como de algunos de los plugins
nicamente un armazn (workbench) sobre mas importantes (como el JDT, plugin para
el que se pueden montar herramientas el lenguaje Java, o el CDT, plugin para el
de desarrollo para cualquier lenguaje, lenguaje C/C++).
Herramientas para trabajar con HTML5 | TELEFNICA // 4

Este proyecto tambin alcanza a las libreras que sirven como base En concreto, permite:
para la construccin del IDE Eclipse (pero pueden ser utilizadas
Crear paginas HTML 5 con una nueva plantilla.
de forma completamente independiente), como por ejemplo, la
librera de widgets SWT. Proporciona autocompletado de cdigo para los elementos de
HTML5.
A partir de la versin Helios del IDE de Eclipse y superiores (con
los plugins para desarrolladores de Java EE) proporciona soporte Ofrece un editor de propiedades para los atributos de HTML5.
para el desarrollo de HTML5. Las versiones anteriores tambin
Ofrece un editor WYSIWYG para el desarrollo visual de pginas
tienen un editor de HTML, pero no admite HTML 5.
HTML5.

1.1 | Creacin de una pgina en HTML5 con Eclipse


Crear un documento HTML 5 es fcil. Simplemente hay que seguir Seleccione nuevo archivo HTML5 para la plantilla y hacer click en
estos pasos: finish para terminar.
Seleccione File New Other.
Expandir Web y seleccione un archivo HTML. Haga clic en Next.
Escriba un nombre de archivo, seleccione la carpeta principal y
haga click en next.

ILUSTRACIN: NUEVO DOCUMENTO HTML5 (2)

ILUSTRACIN: NUEVO DOCUMENTO HTML5 (1)


Herramientas para trabajar con HTML5 | TELEFNICA // 5

El archivo se abrir con el editor de HTML, que proporciona


resaltado de sintaxis (aade diferentes colores y tipos de letra en
funcin del elemento que se muestra). Las etiquetas se muestran <!DOCTYPE html>
en verde, los atributos de color morado, los valores de los atributos <html>
de color azul, y los valores de los elementos en negro. <head>
Hay que tener en cuenta que el documento contiene el elemento <meta charset=UTF-8>
DOCTYPE nuevo que se utiliza. Tambin contiene el elemento <title>Insert title here</title>
meta simplificado que se utiliza para especificar la codificacin de </head>
caracteres UTF-8. <body>

</body>
</html>

ILUSTRACIN: NUEVO DOCUMENTO HTML5 (3)


Herramientas para trabajar con HTML5 | TELEFNICA // 6

1.2 | Herramientas de edicin: Eclipse


Vamos a ver algunas de las herramientas que el plugin nos proporciona:

Es el resultado de la sintaxis. Las palabras reservadas y signos


correspondientes al estndar aparecen resaltados en color. El
resto del texto en negro.
Autocompletado de etiquetas. Basta con pulsar ctrl + espacio y
una lista de elementos HTML5 validos aparecern listados. Si ya
hemos escrito parte de la etiqueta, nos lo autocompletara si slo
hay una etiqueta que empieza por el texto escrito. Si hay ms
de una, aparecer un listado nicamente con las coincidencias.
Slo nos mostrarn las etiquetas permitidas en el lugar en el que
estamos editando.

ILUSTRACIN: AUTOCOMPLETADO DE ETIQUETAS


Herramientas para trabajar con HTML5 | TELEFNICA // 7

Autocompletado de atributos. Funciona exactamente igual que


con las etiquetas, solo que debemos estar editando dentro de la
declaracin de una etiqueta.

ILUSTRACIN: AUTOCOMPLETADO DE ATRIBUTOS


Herramientas para trabajar con HTML5 | TELEFNICA // 8

1.3 | Introduccin a HTML


HTML (HiperText Markup Languaje). Su nombre se traduce literalmente como Lenguaje de marcado
de hipertexto.

Se encuentra enmarcado en los llamados lenguajes de marcado. Los Es independiente de la plataforma ya que HTML solo genera
lenguajes de marcado son los utilizados para generar documentos documentos de texto y admite cualquier codificacin de caracteres.
en los que, junto con el texto que constituye el contenido, se incluyen
El proceso de alterar la informacin de una pgina es relativamente
etiquetas o marcas que contienen informacin adicional sobre la
sencillo y gil ya que es un lenguaje de fcil comprensin.
estructura del contenido.
Basa su contenido en referenciacion. Si en una pgina HTML,
En el caso de HTML, se trata concretamente de un lenguaje de
queremos introducir algn elemento como una imagen, script,
marcado de presentacin, en el que las etiquetas que acompaan
video, u otra pgina HTML (por ejemplo), no se incluye su contenido
al texto indican al navegador informacin de cmo se encuentra
directamente en ella si no que se referencia (se indica donde est el
organizado.
contenido que queremos incluir). El navegador es el encargado de
Es un estndar desarrollado y regulado por la W3C, que es un interpretar las referencias y cargarlas componiendo la visualizacin
organismo dedicado a la estandarizacin de las tecnologas final.
utilizadas en la Web.
Al ser un estndar, uno de sus objetivos es la compatibilidad hacia
Una de las caractersticas principales del lenguaje es que las pginas atrs (o retro-compatibilidad). Un navegador que es capaz de
generadas con HTML son de hipertexto. Esto quiere decir que una interpretar una versin de HTML, debe ser capaz de interpretar
pgina no contiene un texto aislado, sino que estn o pueden estar pginas escritas en cualquiera de sus versiones anteriores.
enlazadas a otras pginas y ser referenciadas desde otras pginas
mediante enlaces o links. Esto nos permite navegar por ellas.
Herramientas para trabajar con HTML5 | TELEFNICA // 9

1.4 | Marcado HTML


El marcado HTML se realiza mediante etiquetas de apertura y cierre. Todo lo que se encuentra dentro
de una etiqueta de apertura y cierre se encuentra afectado por ella, incluyendo texto plano y cualquier
otra etiqueta que pueda contener.

Una etiqueta de apertura se define con un nombre de etiqueta Entre la etiqueta de apertura y la de cierre, se encuentra el contenido.
encerrado entre los corchetes angulares < y > (signo menor que y El contenido puede ser texto u otras etiquetas. Una etiqueta con
signo mayor que) contenido tiene el siguiente formato:

Ejemplo: <body> Ejemplo: <etiqueta>contenido</etiqueta>

Una etiqueta de cierre se define con el corchete angular de apertura Si entre la etiqueta de apertura y la de cierre no se aade ningn
< seguido del carcter barra /, el nombre de etiqueta y finalmente contenido, se puede declarar con un corchete angular de apertura
el corchete angular de cierre. < seguido del nombre de la etiqueta, una barra / y finalmente el
corchete angular de cierre.
Ejemplo: </body>
Ejemplo: <br />
Herramientas para trabajar con HTML5 | TELEFNICA // 10

Los atributos aaden informacin adicional a una etiqueta. Cada A continuacin vemos dos ejemplos de pgina que van a versiones
etiqueta admite una serie de atributos. Se aaden nicamente a las diferentes de HTML:
etiquetas de apertura, justo despus del nombre. Se admite ms
de un atributo por etiqueta. Siguen el esquema clave / valor de la
siguiente forma: clave: valor.
<!DOCTYPE html PUBLIC -//W3C//DTD HTML 4.01
Transitional//EN http://www.w3.org/TR/html4/loose.
Ejemplo: <img src=logo.gif></img> dtd>
<html>
<head>
Por ejemplo, supongamos que tenemos el siguiente cdigo HTML:
<title>login</title>
<meta http-equiv=Content-Type content=text/
html; charset=ISO-8859-1>
</head>
<a href=http://httpd.apache.org>enlace a
la pgina de apache</a> ILUSTRACIN: DEFINICIN DE DOCUMENTO EN HTML 4.01

El texto que se encuentra encerrado entre la etiqueta de apertura


<a> y la etiqueta de cierre </a>, ser interpretado por el navegador
como un enlace. El atributo href indica la pagina a la que referencia <!DOCTYPE html>
el enlace. <html>
<head>
En un fichero que va a contener un documento HTML, debemos definir <title>login</title>
en la primera lnea cual es la versin de HTML que vamos a utilizar. <meta charset=UTF-8>
De esta forma, el navegador podr interpretarlo correctamente. </head>
Tambin es til aadir el tipo de documento a la hora de desarrollar
puesto que el editor de HTML que usemos, podr validar si lo que ILUSTRACIN: DEFINICIN DE DOCUMENTO HTML5
escribimos es correcto.