PDF de programación - Creación de páginas web HTML (incluido HTML5)

(3)



índice

(3.3.1) publicación de páginas web

(3.1.1) introducción
(3.1.2) historia de HTML
(3.1.3) herramientas HTML

(3.6.1) párrafo simple
(3.6.2) títulos

(3.7.1) salto de línea
(3.7.2) línea horizontal

(3.4.1) HTML y XHTML
(3.4.2) estructura de una página web
(3.4.3) espacios en blanco
(3.4.4) atributos comunes

(3.1) ¿qué es HTML? __________________________________________________ 9
9
10
14
(3.2) normalización. versiones de HTML _______________________________ 14
(3.3) protocolo http __________________________________________________ 16
17
(3.4) fundamentos básicos de HTML y XHTML _________________________ 17
17
18
19
20
(3.5) codificación en HTML ___________________________________________ 21
(3.6) etiquetas básicas de párrafo ____________________________________ 29
29
30
(3.7) líneas y saltos __________________________________________________ 32
32
33
(3.8) elementos para marcar el texto _________________________________ 33
33
34
35
36
(3.9) listas __________________________________________________________ 36
36
37
37
38
(3.10) enlaces _______________________________________________________ 39
39
41
42
43
(3.11) imágenes _____________________________________________________ 43
43
44

(3.8.1) resaltado básico de caracteres
(3.8.2) marcado avanzado de caracteres
(3.8.3) marcado avanzado de párrafos
(3.8.4) correcciones

(3.9.1) con viñetas
(3.9.2) numéricas
(3.9.3) listas anidadas
(3.9.4) listas de términos

(3.10.1) URLs
(3.10.2) crear enlaces
(3.10.3) atributos del elemento a
(3.10.4) enlaces internos

(3.11.1) introducción
(3.11.2) inserción de imágenes

(5)

lenguajes de marcas y sistemas de gestión de información
(unidad 3) creación de páginas web con XHTML



(3.11.3) imágenes de fondo
(3.11.4) mapas de imagen
(3.11.5) elemento canvas
(3.11.6) etiqueta svg
(3.11.7) lenguaje MathML. etiqueta math

(3.12.1) introducción
(3.12.2) tablas simples
(3.12.3) celdas de cabecera
(3.12.4) títulos en las tablas
(3.12.5) etiquetas de agrupación de elementos de una tabla
(3.12.6) combinar celdas
(3.12.7) tablas dentro de tablas

44
44
46
47
48
(3.12) tablas ________________________________________________________ 49
49
49
51
52
52
53
54
(3.13) elementos span y div __________________________________________ 55
55
55
(3.14) formularios ___________________________________________________ 55
56
56
57
57
58
58
59
60
61
61
62
(3.15) etiquetas de cabecera _________________________________________ 66
66
66
67
68
68
69
(3.16) etiquetas semánticas de HTML5 ________________________________ 70
70
71
71
72

(3.14.1) etiqueta form
(3.14.2) cuadros de texto, input type="text"
(3.14.3) cuadro de contraseñas, input type="password"
(3.14.4) botones
(3.14.5) botones de radio
(3.14.6) casillas de verificación
(3.14.7) cuadros combinados
(3.14.8) cuadro de selección de archivo
(3.14.9) cuadro de texto multilínea
(3.14.10) agrupación de controles, fieldset
(3.14.11) controles de HTML 5

(3.13.1) elemento div
(3.13.2) elemento span

(3.15.1) elemento title
(3.15.2) elemento base
(3.15.3) elemento link
(3.15.4) etiqueta style
(3.15.5) etiqueta script
(3.15.6) etiqueta meta

(3.16.1) elemento header
(3.16.2) elemento footer
(3.16.3) elemento section
(3.16.4) elemento nav

(6)

1er curso de administración de sistemas informáticos en red
autor: Jorge Sánchez – www.jorgesanchez.net

(3.16.5) elemento article
(3.16.6) elemento hgroup
(3.16.7) elemento figure
(3.16.8) elemento figcaption
(3.16.9) elemento aside

72
72
72
72
73
(3.17) elementos multimedia _________________________________________ 73
73
74
74
74
75
75
77

(3.17.1) el problema del vídeo y el audio
(3.17.2) etiqueta embed
(3.17.3) etiqueta object
(3.17.4) elemento param
(3.17.5) elemento iframe
(3.17.6) elemento video
(3.17.7) elemento audio


(1)

(7)



(3) creación de
páginas web con

HTML

(3.1) ¿qué es HTML?

(3.1.1) introducción

Como se comentó en el primer tema: a finales de los 80 se desarrolló el lenguaje de
marcas SGML. En esa misma época Tim Bernes Lee utilizó SGML para definir un nuevo
lenguaje de etiquetas que llamó Hypertext Markup Language (lenguaje de marcado de
hipertexto) para crear documentos transportables a través de Internet en los que fuera
posible el hipertexto; es decir la posibilidad que determinadas palabras marcadas de
forma especial permitieran abrir un documento relacionado con ellas.

A pesar de tardar en ser aceptado, HTML fue un éxito rotundo y la causa indudable
del éxito de Internet. Hoy en día casi todo en Internet se ve a través de documentos
HTML, que popularmente se denominan páginas web.

Inicialmente estos documentos se veían con ayuda de intérpretes de texto (como por
ejemplo el Lynx de Unix) que simplemente coloreaban el texto y remarcaban el
hipertexto. Después el software se mejoró y aparecieron navegadores con capacidad
más gráfica para mostrar formatos más avanzados y visuales.

Lógicamente desde 1989 hasta nuestros días HTML ha mejorado. Entre sus avances

fundamentales:

El lenguaje cada vez ha ido incorporando nuevas etiquetas más potentes, que

permiten incluir en los documentos HTML, tablas, capas, marcos, imágenes,…

Se han añadido lenguajes de script (como JavaScript) con código incrustado en
las páginas HTML que permiten añadir funcionalidades y dinamismo a las
páginas web

Se han añadido técnicas en el lado del servidor con la misma finalidad como

aplicaciones CGI, PHP, ASP o JSP.

Se incorporaron lenguajes de estilo (como CSS) para generar un formato de

documento más avanzado

Se han añadido utilidades para gestión avanzada de JavaScript con XML (AJAX)
Se ha permitido la inclusión de elementos avanzados en las páginas como Flash

o los applets de Java para dar mayor funcionalidad.

(9)

lenguajes de marcas y sistemas de gestión de información
(unidad 3) creación de páginas web con XHTML



Se permiten elementos semánticos para dar mayor significado al contenido
Se permite el dibujo libre de elementos en la página mediante el elemento

canvas.

Es posible añadir vídeo, audio y otros elementos multimedia de forma fácil

En la actualidad HTML sigue siendo el lenguaje fundamental de las páginas web; pero
ahora Internet es la web, es decir todo en Internet se ve a través de una página web.
Por eso hoy en día HTML es la capa superficial bajo la que se agolpan tecnologías muy
diversas y muy distintas de HTML.

(3.1.2) historia de HTML

Se resaltan a continuación algunos de los eventos más importantes en la historia de
HTML. Se indica el año y lo que ocurrió en él

1989.

 Tim Bernes Lee1, científico británico que trabajaba en el CERN2 centro de
desarrollo nuclear ubicado en Suiza. Intenta trasladar el hipertexto a los
documentos científicos, mediante el cual es posible avanzar de un
documento a otro mediante enlaces existentes en el propio texto. Teorizó
la forma de transportar este tipo de documentos (el actual protocolo http)
y sobre el lenguaje de marcas a utilizar.

1991,

 Tim Bernes Lee acude a un grupo de discusión en Internet para discutir
sobre cómo implementar el hipertexto de forma más conveniente. Con ello
no pretende privatizar su invento sino hacerlo público desde el primer
momento. Crea ese año un navegador propio (llamado WorldWideWeb)
para pruebas.

1992



La NCSA3 se interesa por la ya llamada web de Bernes Lee y crea el primer
navegador: Mosaic. Entre sus creadores está Eric Bina y Marc Adreessen
futuros millonarios gracias a la web.

1993.





Lou Montulli desarrolla Lynx para los sistemas Unix, el primer navegador
de texto en la web. Será ampliamente utilizado en los años siguientes,
aunque luego quedará rápidamente superado por las capacidades de los
navegadores gráficos

Se lanza comercialmente Mosaic por parte de la NCSA. Añade nuevos
elementos al HTML original como por ejemplo la inclusión de imágenes.

1994

 Conferencia global sobre la web.



La IETF4 asigna un grupo de trabajo para estandarizar HTML.


1 Premio Príncipe de Asturias 2002 junto a Lawrence Roberts, Robert Kahn y Vinton Cerf:

considerados los padres de Internet

2 http://public.web.cern.ch/public/
3 National Center for Supercomputing Applications, Centro Nacional de Estados Unidos de
Supercomputación, creador de las primeras grandes redes de cálculo y supercomputadoras.

(10)

1er curso de administración de sistemas informáticos en red
autor: Jorge Sánchez – www.jorgesanchez.net



El lenguaje HTML empieza a ser caótico porque aparecen numerosas
etiquetas puestas por cada entidad privada. Dan Connolly recopila las
etiquetas HTML de la época más utilizada y se crea el borrador de HTML 2.

 Marc Adreessen y Jim Clark abandona la NCSA y fundan Mosaic
Communications (futura Netscape). Dejan también los estándares y crean
elementos nuevos en el lenguaje HTML para crear páginas más vistosas
para su navegador.
A finales del año se crea la World Wide Consortium5 (W3C) fichando a
algunos de los principales impulsores de la web (incluido Tim Bernes Lee).
Se convertirá en el principal organismo de estandarización de las
tecnologías relacionadas con la web en general y de HTML en particular



1995





Siguen apareciendo nuevos elementos en HTML que
las
posibilidades de las páginas web. Se crea el borrador HTML 3, que incluye
tipos de letra y otras mejoras.

impulsan

La empresa Mosaic Co