PDF de programación - Introducción a la programación Web

Table of Contents

Contenidos
Introducción a HTML
Editores HTML
Sintaxis del lenguaje
Estructura básica de una Web
Elementos de la cabecera
Etiquetas básicas
Listas
Tablas
Cajas, etiqueta DIV
Enlaces
Imágenes
Formularios
Eventos
Símbolos HTML
Introducción a CSS

Adjuntar una hoja de estilo
Definición de estilos para etiquetas HTML
Identificadores y clases
Estilos CSS básicos

Estilos para textos
Estilos para párrafos
Estilos para fondos
Estilos para cajas

Pseudo-clases
Capas
Ejemplo de uso

Introducción a HTML 5

Navegadores que lo soportan
Doctype

1.1
1.2
1.2.1
1.2.2
1.2.3
1.2.4
1.2.5
1.2.6
1.2.7
1.2.8
1.2.9
1.2.10
1.2.11
1.2.12
1.2.13
1.3
1.3.1
1.3.2
1.3.3
1.3.4
1.3.4.1
1.3.4.2
1.3.4.3
1.3.4.4
1.3.5
1.3.6
1.3.7
1.4
1.4.1
1.4.2

2

Estructura semántica
Formularios
Etiqueta Mark
Canvas
Audio
Vídeo
Geolocalización
Almacenamiento Offline
Detectar funcionalidades de HTML 5

Introducción a CSS 3

Nuevos selectores de atributos
Nuevas pseudo-clases
Color
Bordes
Fondos
Texto
Columnas
Modelo de caja básico
Transiciones
Transformaciones

Introducción a JavaScript

Inclusión de JavaScript en HTML
Etiqueta noscript
Consideraciones sobre el lenguaje
Variables
Operadores
Estructuras de control de flujo
Funciones útiles
Funciones
DOM
Eventos
Detección de errores

Más información
Ejercicios 1

1.4.3
1.4.4
1.4.5
1.4.6
1.4.7
1.4.8
1.4.9
1.4.10
1.4.11
1.5
1.5.1
1.5.2
1.5.3
1.5.4
1.5.5
1.5.6
1.5.7
1.5.8
1.5.9
1.5.10
1.6
1.6.1
1.6.2
1.6.3
1.6.4
1.6.5
1.6.6
1.6.7
1.6.8
1.6.9
1.6.10
1.6.11
1.7
1.8

3

Ejercicios 2

1.9

4

Contenidos

Contenidos

El objetivo de este libro es realizar una introducción a los conceptos más básicos de la
programación web, como son HTML y CSS, hasta otros más avanzados y novedosos de
HTML 5, CSS 3 o JavaScript.

En las primeras secciones se realiza una introducción a los conceptos fundamentales,
desde la sintaxis del lenguaje, etiquetas, editores de HTML, estructura básica de una página
web, etc. Se incluyen pequeños ejemplos para cada uno de los apartados además de algún
ejemplo más elaborado y ejercicios finales.

También se tratan aspectos más avanzados como eventos HTML, procesamiento de
formularios, pseudo-clases CSS, disposición o estructuración de una web en capas, y se
realiza una introducción a los últimos elementos del lenguaje introducidos con HTML 5 y
CSS: transiciones, transformaciones, audio, vídeo, geolocalización, etc.

Por último se incluye una sección de introducción a JavaScript en la que también se parte
desde los conceptos más básicos (inclusión de scripts en HTML, variables, operadores,
etc.) hasta algunos más avanzados como funciones, eventos o como trabajar con el DOM
de una página Web.

Los contenidos principales de este libro son:

Introducción a HTML
Editores HTML
Sintaxis del lenguaje
Estructura básica de una Web
Elementos de cabecera
Etiquetas básicas
Listas
Tablas
Cajas, etiqueta DIV
Enlaces
Imágenes
Formularios
Eventos
Símbolos HTML
Introducción a CSS

Adjuntar una hoja de estilo
Definición de estilos para etiquetas HTML

5

Contenidos

Identificadores y clases
Estilos CSS básicos
Pseudo-clases
Capas
Ejemplo

Introducción a HTML 5

Navegadores que lo soportan
Doctype
Estructura semántica
Formularios
Etiqueta Mark
Canvas
Audio
Vídeo
Geolocalización
Almacenamiento Offline
Detectar funcionalidades de HTML 5

Introducción a CSS 3

Nuevos selectores de atributos
Nuevas pseudo-clases
Color
Bordes
Fondos
Texto
Columnas
Modelo de caja básico
Transiciones
Transformaciones

Introducción a JavaScript

Inclusión de JavaScript en HTML
Etiqueta noscript
Consideraciones sobre el lenguaje
Variables
Operadores
Estructuras de control de flujo
Funciones útiles
Funciones
DOM
Eventos
Detección de errores

6

Contenidos

Más información
Ejercicios

7

Introducción a HTML

Introducción a HTML

HTML, siglas de HyperText Markup Language (Lenguaje de marcado de hipertexto), es el
lenguaje de marcado predominante para la elaboración de páginas web. Es usado para
describir la estructura y el contenido en forma de texto, así como para complementar el
texto con objetos tales como imágenes.

El código HTML se escribe en forma de "etiquetas", mediante las cuales podemos describir
la estructura lógica y apariencia del contenido. La apariencia que podemos describir con
HTML está bastante limitada, pero el código se puede complementar y mejorar mediante el
uso de otros lenguajes como JavaScript o CSS.

En las siguientes secciones se realiza una introducción a las principales características de
HTML, partiendo desde los posibles editores más adecuados para escribir código o la
estructura básica que una página HTML debe tener, hasta conceptos más avanzados como
la inclusión de formularios o el manejo de los eventos producidos en una página.

8

Editores HTML

Editores HTML

El lenguaje HTML puede ser creado y editado con cualquier editor de textos básico, como
puede ser Gedit en Linux o el Bloc de notas de Windows. Existen además otros editores
para la realización de sitios web con características WYSIWYG (What You See Is What You
Get, o en español: "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 más simple ya que estos programas, además de tener la opción de trabajar con la
vista preliminar, tiene su propia sección HTML, la cual va generando todo el código a
medida que se va trabajando. Algunos ejemplos de editores son Adobe Dreamweaver,
KompoZer o Microsoft FrontPage.

Estos editores aceleran o facilitan la creación de código HTML, pero en algunas ocasiones
también generan mucho más código del necesario (como es el caso de Microsoft
FrontPage). Lo ideal es tener un control total sobre el código que se escribe y utilizar estos
editores sólo como una pequeña ayuda. También podemos utilizar otro tipo de editores que
simplemente comprueben que el código HTML escrito es correcto (que las etiquetas y
atributos son correctos, las etiquetas se cierran correctamente, etc.).

9

Sintaxis del lenguaje

Sintaxis del lenguaje

Las etiquetas HTML deben de ir encerradas entre corchetes angulares <> , y pueden ser
de dos tipos:

Se abren y se cierran, como por ejemplo: <b>negrita</b> o <p>texto</p> .

Se abren y cierran en la misma etiqueta, como: <br/> o <hr/> .

En caso de que no cerremos una etiqueta que deba ser cerrada se producirá un error en la
estructura del documento y probablemente también genere errores en la visualización.

Hay etiquetas que además pueden contener atributos, en este caso los atributos se deben
de colocar en la etiqueta de inicio, de la forma:

<etiqueta atributo1="valor1" atributo2="valor2">...</etiqueta>

O para las etiquetas de solo apertura:

<etiqueta atributo1="valor1" atributo2="valor2"/>

Por ejemplo:

<img src="imagen.jpg" alt="Imagen de cabecera"/>

10

Estructura básica de una Web

Estructura básica de una Web

Un documento HTML comienza con la etiqueta <html> y termina con </html> . Dentro del
documento (entre las etiquetas de principio y fin de html) hay dos zonas bien diferenciadas:
el encabezamiento, delimitado por <head> y </head> , que sirve para incluir definiciones
iniciales válidas para todo el documento; y el cuerpo, delimitado por <body> y </body> ,
donde reside la información del documento.

Las etiquetas básicas o mínimas son:

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.d
td">
<html>
<head>
<title>Ejemplo</title>
</head>
<body>
¡Hola mundo!
</body>
</html>

La primera línea es el DOCTYPE, o el tipo de documento que viene a continuación. En este
caso se usa el estándar de HTML 4.01 (el último estándar adoptado en 1999, ya que
HTML5 a fecha de 2011 sigue siendo un borrador). La siguiente etiqueta, <html> , define el
inicio del documento HTML, e indica que lo que viene a continuación debe ser interpretado
como código HTML. Como podemos ver en la última línea, se cierra la etiqueta </html> .

Dentro de estas etiquetas <html> ... </html> encontramos las dos secciones
mencionadas:

Encabezamiento ( head ): Esta sección inicial contiene todos los elementos no visuales
de nuestra web, como por ejemplo los metadatos descriptivos (autor, palabras clave,
descripción del contenido, etc.), los estilos a utilizar en los elementos visuales del
cuerpo, el título que aparecerá en la barra superior del navegador (como en el ejemplo
superior), y otra serie de elementos que se estudiarán más en detalle en la siguiente
sección.

Cuerpo ( body ): Aquí hemos de incluir todos los contenidos visuales de nuestra web,
todos los textos, imágenes, enlaces, etc. En el ejemplo de arriba lo único que se incluye
es el texto "¡Hola mundo!" por lo que al abrir esta web nos aparecerá una página web
que incluirá únicamente ese texto.

11

Estructura básica de una Web

En los siguientes apartados se describirán más en detalle los elementos que podemos
utilizar dentro del encabezamiento o del cuerpo de una web. En primer lugar se estudiarán
los elementos de la cabecera y a continuación todas las etiquetas HTML que se suelen
utilizar para la construcción de una web.

12

Elementos de la cabecera

Elementos de la cabecera

La sección de cabecera <head> ... </head> se utiliza para describir el tipo de contenido y
aspecto visual que tendrá la web. Es importante destacar que todo el contenido de la
sección de cabecera no se muestra directamente al usuario, sino que es únicamente
información descriptiva y metadatos. Por ejemplo, nos permitirá indicar metadatos que son
muy útiles para la indexación de la web en buscadores, como el tipo de contenido, palabras
clave o el autor, o indicar los estilos con los cuales se mostrarán los elementos visuales,
entre otra información.

Algunas de las principales etiquetas que podemos utilizar dentro de la cabecera son:

<title></title> : define el título de la pá