Documenti di Didattica
Documenti di Professioni
Documenti di Cultura
ndice
(3.1) qu es HTML? __________________________________________________ 9
(3.1.1) introduccin
(3.1.2) historia de HTML
(3.1.3) herramientas HTML
9
10
14
17
17
18
19
20
29
30
32
33
33
34
35
36
36
37
37
38
39
41
42
43
43
44
(5)
44
44
46
47
48
49
49
51
52
52
53
54
55
55
56
56
57
57
58
58
59
60
61
61
62
66
66
67
68
68
69
70
71
71
72
(6)
72
72
72
72
73
73
74
74
74
75
75
77
(1)
(7)
(3) creacin de
pginas web con
HTML
(3.1) qu es HTML?
(3.1.1) introduccin
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 travs 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 da casi todo en Internet se ve a travs de documentos
HTML, que popularmente se denominan pginas web.
Inicialmente estos documentos se vean con ayuda de intrpretes de texto (como por
ejemplo el Lynx de Unix) que simplemente coloreaban el texto y remarcaban el
hipertexto. Despus el software se mejor y aparecieron navegadores con capacidad
ms grfica para mostrar formatos ms avanzados y visuales.
Lgicamente desde 1989 hasta nuestros das HTML ha mejorado. Entre sus avances
fundamentales:
El lenguaje cada vez ha ido incorporando nuevas etiquetas ms potentes, que
permiten incluir en los documentos HTML, tablas, capas, marcos, imgenes,
Se han aadido lenguajes de script (como JavaScript) con cdigo incrustado en
las pginas HTML que permiten aadir funcionalidades y dinamismo a las
pginas web
Se han aadido tcnicas 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 ms avanzado
Se han aadido utilidades para gestin avanzada de JavaScript con XML (AJAX)
Se ha permitido la inclusin de elementos avanzados en las pginas como Flash
o los applets de Java para dar mayor funcionalidad.
(9)
Lou Montulli desarrolla Lynx para los sistemas Unix, el primer navegador
de texto en la web. Ser ampliamente utilizado en los aos siguientes,
aunque luego quedar rpidamente superado por las capacidades de los
navegadores grficos
Se lanza comercialmente Mosaic por parte de la NCSA. Aade nuevos
elementos al HTML original como por ejemplo la inclusin de imgenes.
1994
Conferencia global sobre la web.
La IETF4 asigna un grupo de trabajo para estandarizar HTML.
1
Premio Prncipe 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
Supercomputacin, creador de las primeras grandes redes de clculo y supercomputadoras.
(10)
1995
Siguen apareciendo nuevos elementos en HTML que impulsan las
posibilidades de las pginas web. Se crea el borrador HTML 3, que incluye
tipos de letra y otras mejoras.
La empresa Mosaic Communications se convierte en Netscape
Communications y lanza el navegador Netscape Navigator. Se convertir
en los siguientes aos en el navegador ms utilizado.
Microsoft crea Internet Explorer y lo incorpora rpidamente como parte
del sistema operativo Windows 95. Comienza la primera guerra de los
navegadores. Los contendientes son Explorer y Navigator.
El grupo de trabajo de la IETF para HTML se desmantela por su escasa
influencia. El World Wide Consortium queda como principal organismo de
estandarizacin de HTML.
A finales de ao aparecen los primeros elementos de creacin de hojas de
estilo, raz del lenguaje CSS que permite dar formato avanzado a las
pginas web y que sigue siendo una de las tecnologas imprescindibles en la
actualidad para crear pginas web.
Sun Microsystems crea el lenguaje Java, que tendr una enorme influencia
en el desarrollo de Internet.
Los hermanos Allaire, crean ColdFussion, un lenguaje basado en HTML que
se ejecuta en el servidor que aloja las pginas web (servidores compatibles
con esta tecnologa) de modo que el cliente no necesita tener un software
especial que reconozca esta tecnologa. Al cliente le llegan pginas web
normales que ha preparado el servidor tras traducir este lenguaje.
Fue la primera tecnologa de script en el lado del servidor.
1996
4
5
Internet Engineering Task Force, grupo que estandariza diferentes aspectos de Internet
http://www.w3.org y en espaol http://www.w3c.es/
(11)
1997
Aparece la especificacin estndar HTML 3.2, la primera en ser
ampliamente aceptada. Incluye tablas, applets (pensadas para aadir
elementos Java a las pginas) y otros formatos avanzados de formato.
Sun Microsystems crea Java Servlets y Microsoft crea el lenguaje ASP.
Son dos de las tecnologas del lado del servidor que tendrn una gran
influencia en los aos siguientes.
1998
La W3C lanza como estndares a HTML 4.0 y a CSS2. Los estndares de la
W3C cada vez se tienen ms en cuenta y ambos alcanzan un gran xito.
La combinacin HTML+JavaScript+CSS se conoce este ao como DHTML
(HTML dinmico). Alcanzar un enorme notoriedad y ser la combinacin
habitual para hacer pginas web atractivas.
Aparece XML 1.0 por parte de la W3C, como el lenguaje que debi ser
HTML (en palabras del propio Tim Bernes Lee). No ha llegado a suplcantar
a HTML pero sigue teniendo una enorme influencia en todo tipo de
tecnologas.
1999
Sun crea JSP (pginas de servidor en lenguaje Java) y la plataforma de
trabajo J2EE (Java Enterprise) con lo que pretende crear un entorno
poderoso de trabajo para crear aplicaciones y servicios de Internet en los
servidores.
El navegador Internet Explorer de Microsoft domina el mercado poniendo
fin a la primera guerra de navegadores.
Aparece RSS un formato de contenido basado en XML que permite
sindicarse y obtener informacin de forma veloz.
La W3C presenta HTML 4.01, indicando que ser la ltima versin del HTML
clsico.
(12)
2000
Aparece el estndar W3C XHTML 1.0, versin de HTML basado en XML que
pretende derrocar a HTML. A da de hoy sigue siendo el estndar ms
respetado para crear pginas web.
ISO (organismo internacional de estndares) publica la norma ISO 15445
con la que normaliza HTML. Esta norma es prcticamente la misma que la
correspondiente al HTML 4.01 de la W3C.
2001
Estndar XHTML 1.1.
PHP como tecnologa en el lado del servidor y Flash en el lado del cliente,
son las tecnologas dominantes para crear aplicaciones web enriquecidas
(llamadas RIA, Rich Internet Applications)
2002
La fundacin Mozilla recoge el testigo de Netscape y crea el navegador
Firefox.
Microsoft crea la plataforma de aplicaciones .NET con vocacin de
competir con J2EE.
2003
Apple lanza al mercado el navegador Safari.
Se crea Wordpress el primer gestor de contenidos web (CMS). Permite
crear pginas web (especialmente blogs) fcilmente y gestionar a
diferentes usuarios que podrn editar contenidos de la web fcilmente.
2004
Se comercializa el navegador Firefox, comienza la segunda guerra de
navegadores.
Se forma el WHATWG para conseguir un HTML versin 5 que se convierta
en nuevo estndar. Lo impulsan Apple y Mozilla entre otros.
2005
AJAX, tecnologa que combina JavaScript, HTML, CSS y XML se populariza
pasando a ser una de las tecnologas fundamentales para crear pginas web
dinmicas.
Se crean patrones MVC (Modelo-Vista-Controlador) que facilitan a los
programadores la creacin de servicios web.
2007
Apple comercializa el primer iPhone, comienza el xito de los smartphones
que poco a poco pasan a ser uno de los dispositivos que ms pginas web
visitan.
Google presenta el sistema Android que en poco tiempo estar presente en
la mayora de smartphones.
(13)
2008
La guerra de los navegadores se recrudece con la llega de Google Chrome.
Actualmente es el navegador ms popular.
Aparece el primer borrador de HTML 5
2011
Se acepta HTML 5 y Flash empieza a dejar de utilizarse (aunque sigue
siendo muy influyente)
Aparecen numerosos borradores de CSS3
La W3C acepta HTML5 y acuerda con la WHATWG el futuro estndar. EN
2013 se espera que aparezca la recomendacin oficial de HTML 5 (y de
CSS3).
(15)
</body>
</html>
Las partes son:
La etiqueta DOCTYPE que permite especificar el documento DTD de validacin
del XHTML de la pgina. En caso de elegir otra versin de XHTML simplemente
hay que cambiar las rutas al documento validador
Elemento html que marca la raz de la pgina y adems debe especificar el
espacio de nombres al que pertenecen las etiquetas (atributo xmlns) y el
lenguaje en el que est escrita (atributo xml:lang).
Es conveniente (aunque el estndar no lo considera obligatorio) utilizar el
atributo lang, que es comn a todos los elementos HTML y que sirve tambin
para marcar el lenguaje en el que est escrita la pgina. Usando tanto xml:lang
como lang aseguramos que todos los navegadores queden avisados sobre el
lenguaje utilizado.
El lenguaje espaol se puede indicar con es simplemente o con ms detalle
usando es-ES que es el smbolo internacional de espaol de Espaa. Esta
terminologa sigue los cdigos de dos letras definidos en la norma ISO 639-1
(que contiene dos letras para cada lenguaje) y el cdigo de dos letras de pas
de la ISO 3166-1. Otros ejemplos son:
ca para cataln
(18)
eu para euskera
gl para gallego
fr para francs
en para ingls
en-US para ingls de Estados Unidos
HTML5
En el caso de HTML5 la estructura es muy parecida pero simplifica muchas etiquetas:
<!DOCTYPE html>
<html lang="es">
<head>
<meta charset="UTF-8" >
<title></title>
</head>
<body>
</body>
</html>
Como diferencias ms notables respecto a HTML:
La etiqueta DOCTYPE est simplificada
La etiqueta meta es mucho ms sencilla para indicar el cdigo del archivo
(Unicode)
El lenguaje se indica slo con el atributo lang del elemento html.
El resto de elementos no vara
<!DOCTYPE html>
<html lang="es">
<head>
<meta charset="UTF-8">
<title></title>
(19)
</head>
<body>
Este texto
tiene
espacios
muchos
</body>
</html>
El resultado mostrara en la pgina este texto:
Este texto tiene muchos espacios
Para mantener esas distancias, el texto tendra que estar dentro de un elemento pre,
pero no se aconseja el uso de pre porque ayuda a adquirir malos hbitos y dificulta el
aprendizaje de las formas avanzadas de maquetar pginas web.
La entidad permite aadir un espacio en blanco obligatorio. Por lo que si,
por ejemplo, la escribimos cuatro veces seguidas, estaremos dejando cuatro espacios en
blanco que el navegador s tendr en cuenta.
title
lang
xml:lang
dir
class
style
significado
Identifica al elemento. Se trata de un identificador en el sentido XML
(debe empezar por letra, no tener espacios, s puede tener nmeros y
no puede repetirse su valor en dos elementos de la misma pgina web).
Es uno de los atributos ms importantes.
Permite poner un ttulo al elemento. Es una especie de descripcin
corta que es muy til en aquellos elementos que no muestran
informacin que requiere una explicacin (como un abreviatura, una
sigla, una imagen,). El navegador reacciona a este atributo
mostrando un cartelito cuando el cursor del ratn se aproxima a un
elemento que use este atributo (ver imagen inferior)
Indica el lenguaje en el que est escrito el contenido del elemento
(para espaol: lang="es"). Slo se usa si algn elemento usa un
lenguaje distinto al indicado para toda la pgina.
Procede de XML significa lo mismo que lang, pero es entendible por el
software analizador de XML. Slo se usa en XHTML
Indica la direccin de lectura del texto contenido en el elemento.
Puede ser uno de estos dos valores: ltr (left to right, de izquierda a
derecha) o rtl (right to left, de derecha a izquierda).
Permiten especificar formato de tipo CSS al atributo
(20)
atributo
onclick
ondblclic
onkeyup
onkeydown
onkeypress
onmouseover
onmouseout
onmousedown
onmouseup
onmousemove
significado
Permiten asignar cdigo Javascript a alguna de esas acciones (un clic
de ratn, un doble clic, pulsar tecla, dejar de pulsar tecla, mantener
pulsada la tecla, entrar con el ratn en el elemento, mover el ratn
por encima, sacar el ratn del elemento, pulsar tecla de ratn, liberar
tecla de ratn,)
n es el nmero del cdigo dentro de la tabla Unicode (hay que recordar que los primeros
256 caracteres son los correspondientes a la tabla ISO-8859_1). Los smbolos que
obligatoriamente se deben codificar de esta forma son:
Carcter
Nmero
Nombre
"
'
"
&
<
>
&
"
' (el navegador Explorer no le reconoce, por
lo que no se aconseja su uso)
&
<
>
'
<
>
En definitiva las entidades de XML. Los caracteres fuera del cdigo ASCII y dentro de la
codificacin 8859_1 son:
Carcter
Nmero
Nombre
À
À
Á
Â
Ã
Ä
Å
Æ
Ç
È
É
Ê
Ë
Ì
Í
Î
Ï
Ð
Ñ
Ò
Ó
Ô
Õ
Ö
Ø
Ù
Ú
Û
Á
Â
Ã
Ä
Å
Æ
Ç
È
É
Ê
Ë
Ì
Í
Î
Ï
Ð
Ñ
Ò
Ó
Ô
Õ
Ö
Ø
Ù
Ú
Û
(22)
Nmero
Nombre
Ü
Ü
Ý
Þ
ß
à
á
â
ã
ä
å
æ
ç
è
é
ê
ë
ì
í
î
ï
ð
ñ
ò
ó
ô
õ
ö
ø
ù
ú
û
ü
ý
þ
ÿ
Ý
Þ
ß
à
á
â
ã
ä
å
æ
ç
è
é
ê
ë
ì
í
î
ï
ð
ñ
ò
ó
ô
õ
ö
ø
ù
ú
û
ü
ý
þ
ÿ
(23)
Nmero
Nombre
 
(espacio
obligatorio, los
navegadores respetan
estos espacios en blanco)
¡
¢
£
¤
¥
¦
§
¨
©
ª
«
¬
­
®
¯
°
±
²
³
´
µ
¶
·
¸
¹
º
»
¼
½
¾
¿
×
÷
¡
¢
£
¤
¥
¦
§
¨
©
ª
«
¬
­
®
¯
°
±
²
³
´
µ
¶
·
¸
¹
º
»
¼
½
¾
¿
×
÷
(24)
Hay que tener en cuenta que en la tabla 8859_1 no aparece el smbolo del euro (s en la
8859_1). Por lo que se permite usar el cdigo € para el smbolo .
Adems es posible utilizar otros smbolos que son parte de Unicode, por ejemplo los
matemticos:
Carcter
Nmero
Nombre
∀
∃
∗
∝
∠
∪
∴
≡
⊂
∀
∂
∃
∅
∇
∈
∉
∋
∏
∑
−
∗
√
∝
∞
∠
∧
∨
∩
∪
∫
∴
∼
≅
≈
≠
≡
≤
≥
⊂
⊃
⊄
⊆
⊇
⊕
∂
∅
∇
∈
∉
∋
∏
∑
−
√
∞
∧
∨
∩
∫
∼
≅
≈
≠
≤
≥
⊃
⊄
⊆
⊇
⊕
(25)
Nmero
Nombre
⊗
⊗
⊥
⋅
⊥
⋅
Smbolos griegos:
Carcter
Nmero
Α
Β
Γ
Δ
Ε
Ζ
Η
Θ
Ι
Κ
Λ
Μ
Ν
Ξ
Ο
Π
Ρ
Σ
Τ
Υ
Φ
Χ
Ψ
Ω
α
β
γ
δ
ε
ζ
η
θ
ι
(26)
Nombre
Α
Β
Γ
Δ
Ε
Ζ
Η
Θ
Ι
Κ
Λ
Μ
Ν
Ξ
Ο
Π
Ρ
Σ
Τ
Υ
Φ
Χ
Ψ
Ω
α
β
γ
δ
ε
ζ
η
θ
ι
Carcter
Nmero
κ
λ
μ
ν
ξ
ο
π
ρ
ς
σ
τ
υ
φ
χ
ψ
ω
ϑ
ϒ
ϖ
Nombre
κ
λ
μ
ν
ξ
ο
π
ρ
ς
σ
τ
υ
φ
χ
ψ
ω
ϑ
ϒ
ϖ
Nmero
Œ
œ
Š
š
Ÿ
ƒ
ˆ
˜
  (deja
un espacio del
tamao de la letra
ene)
Nombre
Œ
œ
Š
š
Ÿ
ƒ
ˆ
˜
 
  (deja
un espacio del
tamao de la letra
eme)
 
 
(espacio corto)
 
(27)
Carcter
Nmero
‌
(espacio para el
nmero cero sin
coma)
Nombre
‌
‍
(espacio para el
nmero cero con
coma)
‍
‎
‎
‏
–
—
‘
’
‚
“
”
„
†
‡
•
…
‰
′
″
‹
›
‾
€
™
←
↑
→
↓
↔
↵
⌈
⌉
⌊
⌋
◊
♠
‏
–
←
↵
—
‘
’
‚
“
”
„
†
‡
•
…
‰
′
″
‹
›
‾
€
™
↑
→
↓
↔
⌈
⌉
⌊
⌋
◊
♠
(28)
Carcter
Nmero
♣
♥
♦
Nombre
♣
♥
♦
En cualquier caso salvo para poder escribir smbolos de fuera del teclado, actualmente
con la difusin ya imparable de Unicode, lo normal es codificar las pginas Unicode y
escribir de forma normal los smbolos nacionales.
<p>
Prrafo con un poco de texto
</p>
<p>
Este es un prrafo completo englosado dentro de una etiqueta <em>p</em>,
aunque
el texto lo escriba
con tantos saltos de lnea
saldr junto sin ningn
salto
de
lnea
</p>
(29)
En el navegador saldra:
(3.6.2) ttulos
Hay una serie de siete etiquetas que comienzan con la letra h y le sigue un nmero del 1
al 7, que sirven para marcar prrafos que se considerarn ttulos del texto. De modo
que el nmero 1 marcar ttulos de primer nivel, es decir los ttulos principales irn
marcados con h1. Despus se podra usar h2 para designar prrafos que se considerarn
ttulos de segundo nivel. Ejemplo (XHTML completo):
<?xml version="1.0" encoding="UTF-8"?>
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN"
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" lang="es" xml:lang="es">
<head>
<title>Estrellas</title>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />
</head>
<body>
<h1>Sistema Solar</h1>
<h2> Planetas</h2>
<h3>Mercurio</h3>
<p>
Mercurio es el planeta del Sistema Solar ms prximo al Sol y el ms
pequeo (a excepcin de los planetas enanos). Forma parte de los
denominados planetas interiores o rocosos y carece de satlites
</p>
<h3>Venus</h3>
<p>
Venus es el segundo planeta del Sistema Solar en orden de distancia
desde el Sol, y el tercero en cuanto a tamao, de menor a mayo
</p>
<p>...</p>
<h2>Sol</h2>
(30)
<p>
El Sol es la estrella del sistema planetario en el que se encuentra la Tierra;
por tanto, es la ms cercana a la Tierra y el astro con mayor brillo aparente
</p>
<h2>Satlites</h2>
<h3>Luna</h3>
<p>
La Luna es el nico satlite natural de la Tierra y el quinto
satlite ms grande del Sistema Solar.
</p>
<h3>o</h3>
<p>
Fue descubierto por Galileo Galilei en 1610 y recibi inicialmente
el nombre de Jpiter I como primer satlite de Jpiter.
</p>
<p>...</p>
<h1>Otros Sistemas</h1>
<h2>Fomalhaut</h2>
<p>Estrella conocida desde la prehistoria ahora se le han descubierto
planetas</p>
<h2>Vega</h2>
<p>Antigua estrella polar, muy venerada. Posee un disco de polvo que podra
contener
planetas o bien formarse pronto</p>
</body>
</html>
(31)
En el navegador aparecera:
(32)
negrita
Lo hace el elemento strong y tambin (aunque se considera en desaparicin) el
elemento b (de bold, negrita).
cursiva
El elemento em y tambin i (de italic, aunque tambin en desaparicin).
subndice
Permite que el texto aparezca por debajo de la lnea base y en un tamao ms
pequeo. Lo hace el elemento sub, ejemplo:
superndice
Parecida al anterior, pero ahora el texto marcado con el elemento sup aparecer por
encima y en pequeo. Ejemplo:
significado
atributos que
se suelen
utilizar con
el elemento
blockquote Permite indicar una cita de texto extensa. Ejemplo:
cite Permite
indicar
<blockquote
una
cite="http://noticias.juridicas.com/base_datos/Admin/constitucion.tp.html#a1">
<p>
URL
<strong>Artculo 1 de la constitucion<strong><br />
que
seala
Espaa se constituye en un Estado social y democrtico de Derecho,
que propugna como valores superiores de su ordenamiento jurdico
al sitio
la libertad, la justicia, la igualdad y el pluralismo poltico.
de la
</p>
web del
</blockquote>
que
Los navegadores suelen colocar el texto dejando margen tanto a
procede
izquierda como a derecha.
el texto
literal.
address
Permite indicar una direccin postal. Los navegadores suelen
mostrar el prrafo de direccin en cursiva y centrado.
(35)
(3.8.4) correcciones
Permiten marcar texto para indicar como texto que se est revisando y que falta decidir
su contenido final.
elemento
significado
atributos que se suelen utilizar
con el elemento
ins
Indica que el texto marcado con este cite
URL a la direccin de
elemento es provisional.
la que procede el
texto original
datetime Indica la fecha de la
modificacin con
cuatro cifras para el
ao, dos para el mes
y dos para el da.
del
Indica
que
el
texto
est cite
provisionalmente marcado para su
eliminacin
datetime
URL a la direccin de
la que procede el
texto original
Indica la fecha de la
modificacin con
cuatro cifras para el
ao, dos para el mes
y dos para el da.
Ejemplo:
<p>
La capital de Alemania es <del>Bonn</del>
<ins datetime="20120312">Berln</ins>
</p>
Resultado:
La capital de Alemania es BonnBerln
(3.9) listas
Las listas permiten crear prrafos agrupados y alineados mediante smbolos como
vietas o nmeros y adems crean prrafos alineados de forma especial para su correcta
visibilidad.
(36)
Ejemplo:
<ul>
<li>Agua</li>
<li>Vino</li>
<li>Cerveza</li>
</ul>
Resultado:
Lista de bebidas
Agua
Vino
Cerveza
(3.9.2) numricas
Las listas numricas aparecen dentro del elemento ol (de ordered list, lista ordenada),
despus cada prrafo de la lista estar dentro de elementos de tipo li, al igual que las
anteriores. La diferencia ahora es que cada prrafo con li, aparece con un nmero y no
con una vieta. Ejemplo:
<ol>
<li>Agua</li>
<li>Vino</li>
<li>Cerveza</li>
</ol>
Resultado:
Lista de bebidas
1. Agua
2. Vino
3. Cerveza
Con el resultado:
Lista de bebidas
No alcohlicas
o Agua
Alcohlicas
o Vino
o Cerveza
Tambin es posible anidar mezclando tipos de listas:
<ol>
<li>
No alcohlicas
<ul>
<li>Agua</li>
</ul>
</li>
<li>
Alcohlicas
<ul>
<li>Vino</li>
<li>Cerveza</li>
</ul>
</li>
</ol>
Con el resultado:
Lista de bebidas
1. No alcohlicas
o Agua
2. Alcohlicas
o Vino
o Cerveza
(38)
<dd>
Sistema operativo de cdigo abierto disponible
en numerosas distribuciones gratuitas y de pago.
Es la base del sistema <strong>Android</strong>.
</dd>
<dt>Mac OS</dt>
<dd>
Sistema operativo de los ordenadores de la empresa <strong>Apple</strong>
<br />
La ltima versin es la <strong>Snow Lion</strong>
</dd>
</dl>
Resultado:
Windows
Sistema operativo de Microsoft disponible para PC disponible en versiones de 32 y 64 bits
y para servidores, ordenadores e incluso tabletas y mviles.
La ltima versin es la 8 y la 2012 para servidores.
Linux
Sistema operativo de cdigo abierto disponible en numerosas distribuciones gratuitas y de
pago. Es la base del sistema Android.
Mac OS
Sistema operativo de los ordenadores de la empresa Apple
La ltima versin es la Snow Lion
(3.10) enlaces
(3.10.1) URLs
Una URL (Uniform Resource Location) es la direccin concreta de un recurso (una
pgina web, una imagen, un vdeo, un directorio,) en Internet.
La gracia es que cada URL es nica con lo que es una especie de DNI de un recurso.
Si la URL es correcta slo habr un solo recurso posible al que se puede referir dicha
URL.
Una URL se forma usando:
El protocolo. Ejemplos:
http:// (para recursos de la web)
https:// (para recursos de la web contenidos en un servidor seguro)
ftp:// (recursos contenidos en un servidor de ficheros)
ftps:// (recursos contenidos en un servidor de ficheros seguro)
mailto: (direccin de correo electrnico)
file:/// (recurso dentro de nuestra propia computadora)
Servidor. Nombre completo en Internet del servidor que aloja el recurso al que
deseamos acceder. Por ejemplo: www.nasa.gov, www.centrodonbosco.es o
www.jorgesanchez.net
Puerto. Puerto por el que se debe conectar con el servidor para obtener el
recurso. Si no se indica (que es lo habitual) se toma el puerto por defecto. Por
(39)
ejemplo en http se usa el 80. Si queremos usar uno en particular se indica tras
el servidor poniendo dos puntos y el puerto. Por ejemplo www.midb.com:1521
Ruta. Indica el recorrido dentro del servidor que hay que hacer en sus
directorios para llegar al recurso que queremos. Se pone despus del servidor.
Ejemplos:
/index.html Accede a la pgina index.html situada en la raz del servidor.
/imagenes/paisajes/foto001.jpg Accede a la imagen foto001.jpg dentro
del directorio paisajes dentro, a su vez, del directorio paisajes
Cadena de bsqueda. Slo aparece tras direcciones a pginas web que admitan
recibir parmetros (como las pginas PHP, ASP o JSP por ejemplo).
Ejemplo ?pagina=5&idioma=es, pasar los parmetros pagina y lenguaje
usando los valores 5 y es respectivamente.
Ejemplo de URL completa:
www.ejemplourl.com:9000/dirs/srv/pagina1.php?a=90&r=7
Por otro lado los caracteres presentes en una URL deben de pertenecer al ASCII, de otro
modo tendremos el sempiterno problema de que no se lea bien la URL por diferentes
tipos de codificacin del texto. De hecho los caracteres permitidos en una URL son:
ABCDEFGHIJKLMNOPQRSTUVWXYZ
abcdefghijklmnopqrstuvwxyz
01234567890-_~.
Cualquier otro no es vlido aunque s aparecen los siguientes pero slo para indicar
elementos con significado especial (recorridos de la ruta, elementos de la parte de
consulta de la URL,). Estos smbolos estn reservados para un uso concreto y no se
pueden utilizar para ningn otro:
!#$%&'()*+,/:;=?@[]
Si una direccin URL requiere utilizar smbolos ms all de estos definidos, entonces
necesitamos codificar dicho smbolo
Si necesitamos codificar en la URL smbolos fuera de los caracteres permitidos
entonces debemos codificarlos usando una notacin que comienza con el smbolo % y le
sigue el cdigo hexadecimal correspondiente en el cdigo ASCII. As si una URL contiene
un cdigo reservado tendramos que codificarlo mediante:
!
&
'
%21 %23 %24 %25 %26 %27 %28 %29 %2A %2B %2C %2F %3A %3B %3D %3F %40 %5B %5D
(40)
%8A
%A2
%B6
%C9
%DD
"
<
>
%88
%89
%9F
%A1
%CA %CB %CC %CD %CE %CF %D0 %D1 %D2 %D3 %D4 %D5 %D6 %D8 %D9 %DA %DB %DC
%E1
%E5
%E6
%E7
%E8
%E9
%F0
%F1
%F2
%F3
%F4
%F5
%F6
%F7
%F8
%F9
%FA
%FE
%EF
Salto de lnea
%0A
%FF %0D
%0D%0A
significado
Permite indicar un cdigo de lenguaje (es, fr, en,) indicando el
lenguaje en el que est escrito el destino del enlace
Slo vlido en HTML5, permite indicar el medio idneo para mostrar el
contenido del enlace.
Permite indicar cmo se muestra la pgina de destino. Posibilidades:
_blank. Abre el enlace en una nueva pgina
_parent. Abre el enlace en el marco de la pgina padre de ella.
_top. Abre la pgina en el marco superior
_self. Abre la pgina en el marco actual
rel
(1)
(2)
< a href="http://www.colegio.edu/seccion1/actividades.html#verano">
Ver actividades de verano
</a>
El enlace del ejemplo salta a la pgina actividades.html localizada en la ruta indicada
y adems se coloca en la posicin indicada por la etiqueta marcada con el valor verano.
(3.11) imgenes
(3.11.1) introduccin
Las imgenes son fundamentales para que una pgina web sea ms atractiva. Los
navegadores no reconocen todas las imgenes, pero s los formatos ms importantes.
Fundamentalmente:
Formato jpg. Son imgenes que ocupan muy poco gracias a su alta compresin.
No admiten animaciones ni zonas marcadas con transparencia. Son el formato
habitual de la fotografa digital.
Formato gif. Imgenes con hasta 256 colores que pueden contener animaciones
y zonas marcadas como transparentes, a travs de las cuales se mostrara lo
que est por debajo de la imagen. Son buenas para hacer animaciones (los
populares gif animados) y para mostrar dibujos (que no fotos) en las pginas.
Formato png. Est considerado como el mejor de los tres porque ana ambas
ventajas. Permite imgenes fotogrficas con alta compresin y posibilidad
adems de utilizar canales alfa (zonas que permiten transparencia como los gif,
pero adems que admiten semitransparencias, mezclando colores de la imagen
con los colores de los elementos que estn por debajo de la imagen).
(43)
width
height
significado
Indica un texto alternativo. Ese texto aparece cuando la imagen no se
ha podido cargar (o durante la carga). Tambin suele aparecer cuando
arrimamos el cursor a la imagen a fin de informarnos sobre ella.
Es un texto tambin tenido en cuenta por los buscadores a fin de
identificar lo que muestra la imagen.
Anchura de la imagen. No es aconsejable usarle para cambiar el
tamao de la imagen, ya que si la ampliamos no se ver en buena
calidad y si la reducimos estaremos cargando una imagen grande para
luego mostrarla en pequeo; sera ms inteligente reducirla primero
con un editor de imgenes.
En cualquier caso es importante utilizar este atributo para que el
navegador sepa de antemano el tamao de la imagen y as que
maquete la pgina correctamente.
Altura de la imagen. Tiene las mismas connotaciones que el atributo
anterior.
uso
Los mapas se basan en una imagen previamente colocada en la pgina web mediante la
etiqueta img. La etiqueta que indica que la imagen es un mapa es la etiqueta map. En
dicha etiqueta se debe utilizar el atributo name para poner nombre al mapa de
imgenes. El contenido de name es un identificador (por lo que no puede tener espacios
en blanco ni nada que no sean letras del alfabeto ingls, nmeros o guion bajo) que
pondr un nombre nico al mapa.
(44)
Si deseamos que al hacer clic en el cuadrado, el crculo y la forma libre saltemos a otra
direccin necesitamos conocer las coordenadas (en esto nos pueden ayudar los
programas de retoque grfico). En esta imagen se muestran las coordenadas necesarias:
(45)
El cdigo HTML para hacer el mapa sera (suponiendo que la imagen se llama
formas.jpg):
atributos de canvas
id. Es el atributo que utilizan todos los elementos HTML para identificarles. En
el caso de canvas es casi obligatorio su uso para poder hacer referencia al
mismo.
width. Anchura del lienzo (funciona igual que en el caso de img)
height. Altura del lienzo.
(46)
<svg xmlns="http://www.w3.org/2000/svg">
..etiquetas svg
</svg>
(47)
Dentro del elemento svg se colocan las etiquetas que permiten dibujar en el rea del
svg. En principio si no indicamos tamao, todo el rea de la pgina web se toma para
dibujar en svg, pero podemos indicar los atributos width y height para indicar tamaos
concretos.
Las etiquetas que se pueden utilizar dentro de svg pertenecen al lenguaje SVG y
rebasan el propsito de este manual, pero un ejemplo de ellas sera:
<svg xmlns="http://www.w3c.org/2000/svg" height="400">
<rect id="rec1" x="50" y="50" width="300" height="100" fill="red" />
<ellipse id="elips1" cx="200" cy="100" rx="50" ry="75" fill="blue" />
</svg>
El resultado:
Obtiene el resultado:
(3.12) tablas
(3.12.1) introduccin
Las tablas son uno de los elementos fundamentales de HTML para mejorar la puesta
visual de las pginas web. Una tabla normal es un conjunto de filas y columnas en las
que se dispone el texto o las imgenes que deseemos.
Las tablas HTML permiten todo tipo de formato y en especial permiten unir varias
celdas para formar tablas con una disposicin irregular, lo que permiten disear
disposiciones muy complejas en las pginas. An ms: se permite incluso colocar una
tabla dentro de una celda lo que an permite ms libertad en la maquetacin de
pginas.
<table border="1">
<tr>
<td></td>
<td>Lunes</td>
<td>Martes</td>
<td>Mircoles</td>
<td>Jueves</td>
<td>Viernes</td>
</tr>
<tr>
<td>10:30</td>
<td>Matemticas</td>
<td>Geografa</td>
<td>Fsica</td>
<td>Dibujo</td>
<td>Matemticas</td>
</tr>
(49)
<tr>
<td>11:30</td>
<td>Ingls</td>
<td>Lenguaje</td>
<td>Geografa</td>
<td>Qumica</td>
<td>Fsica</td>
</tr>
</table>
Sale:
significado
Indica la anchura en pxeles del border de la tabla
Especifica el espacio en pxeles entre el borde de la celda y el
contenido de la misma. En definitiva es el espacio interior de la celda.
Espacio en pxeles existente entre celda y celda
Anchura de la tabla, puede ser en pxeles o en porcentaje sobre la
anchura de la pgina (usando el signo %)
Indica qu bordes de la tabla se mostrarn. Posibilidades:
none. Sin lneas
groups. Pone lneas slo para separar las etiquetas de grupos
rows. Bordes horizontales (entre filas)
cols. Bordes verticales (entre columnas)
all. Todos los bordes de la tabla
No se recomienda oficialmente usar las cuatro ltimas, pero lo cierto es que estn muy
aceptadas y casi todos los diseadores las siguen usando preferentemente sobre la
opcin de usar CSS en su lugar.
(50)
<table border="1">
<tr>
<th> </th>
<th>Lunes</th>
<th>Martes</th>
<th>Mircoles</th>
<th>Jueves</th>
<th>Viernes</th>
</tr>
<tr>
<th>10:30</th>
<td>Matemticas</td>
<td>Geografa</td>
<td>Fsica</td>
<td>Dibujo</td>
<td>Matemticas</td>
</tr>
<tr>
<th>11:30</th>
<td>Ingls</td>
<td>Lenguaje</td>
<td>Geografa</td>
<td>Qumica</td>
<td>Fsica</td>
</tr>
</table>
En el resultado slo se aprecia que el navegador colorea en negrita las celdas de
cabecera. Pero con ayuda de CSS podramos diferenciarlas ms (como veremos en la
siguiente unida).
(51)
<table border="1">
<caption>Ventas</caption>
<tr>
<th>Hardware</th>
<td>12.190 </td>
</tr>
<tr>
<th>Software</th>
<td>9.870 </td>
</tr>
</table>
Resultado:
(52)
<tfoot>
<tr>
<th>Total</th>
<th>25000</th>
<th>22000</th>
</tr>
</tfoot>
<tbody>
<tr>
<th>Enero</th>
<td>12000</td>
<td>15000</td>
</tr>
<tr>
<th>Febrero</th>
<td>13000</td>
<td>9000</td>
</tr>
</tbody>
</table>
Resultado:
(53)
Ejemplo de uso:
(54)
(3.14) formularios
Los formularios son un elemento en las pginas web que permiten recabar informacin
para enviarla a un servidor de aplicaciones y que la procese. Por ejemplo podemos
colocar cuadros de texto en los que el usuario pone sus datos y estos pasan a una pgina
PHP que tendr la capacidad de recoger dichos datos y actuar en consecuencia.
Ejemplo de formulario:
(55)
</form>
(56)
(3.14.4) botones
Los botones son controles del formulario en los que no se puede escribir, lo que s
permiten es cargar una imagen mediante su atributo src (que funciona como el atributo
src de las imgenes)
El atributo checked (que slo admite el valor checked) hace que el botn en el que se
usa, aparezca chequeado por defecto
El resultado:
Se pueden agrupar opciones dentro del cuadro usando el elemento optgroup. Ejemplo:
(59)
(60)
Resultado:
Entre la etiqueta textarea se puede colocar texto que aparecer inicialmente dentro
del cuadro.
(61)
Ejemplo:
etiquetado de controles
En lugar de poner la informacin de los controles poniendo texto directamente, se
recomienda usar la etiqueta label que utiliza un atributo for que sirve para asociar el
texto interno a la etiqueta label respecto al nombre del control que se indica con el
atributo for.
Esto permite una mejor usabilidad (los navegadores reconocen label y, por ejemplo,
al hacer clic en el texto de la etiqueta, el control asociado recibe el foco).
El ejemplo anterior usando label sera:
<form action="control_form.php" method="get">
<label for="texto">Escribe un texto descriptivo:</label>
<textarea rows="10" cols="40" name="texto" ></textarea><br />
<input type="submit" value="enviar"/><br />
</form>
datalist
No hay muchos navegadores que acepten esta etiqueta, pero es muy potente permite
aadir entradas a un control de cuadro de texto (y tambin a cuadros especializados
como los de email, url,.). La forma de usar consiste en usar el atributo HTML5 list
existente en la etiqueta input. Ese atributo asociar el cuadro de texto a la lista de
valores. Luego dentro de datalist se colocan etiquetas option para cada opcin en la
lista.
(63)
Ejemplo:
<form action="recogida.php" method="get">
<label for="gustos">
Escribe en qu te gusta pasar tu tiempo de ocio
</label>
<input type="text" id="gustos" name="gustos" list="listaGustos" />
<datalist id="listaGustos">
<option label="deportes" value="Deportes" />
<option label="teatro" value="Teatro" />
<option label="cine" value="Cine" />
<option label="leer" value="Leer" />
</datalist>
<input type="submit" value="enviar"/><br />
</form>
No aparece un cuadro combinado, ser un cuadro de texto que permitir que aparezca
la lista de opciones. Pero podremos escribir lo que queramos.
Sin embargo esta forma no funciona en la mayora de navegadores y por ello se usa
un truco que hace que los navegadores no compatibles con HTML5 vean la lista como un
cuadro combinado y los compatibles como un cuadro de texto en el que se podra
escribir:
<form action="recogida.php" method="get">
<label for="gustos">
Escribe en qu te gusta pasar tu tiempo de ocio
</label>
<datalist id="listaGustos">
<select name="listaGustos">
<option value="deportes" >Deportes</option>
<option value="teatro" >Teatro</option>
<option value="cine" >Cine</option>
<option value="leer" >Leer</option>
</select>
</datalist>
<input id="gustos" name="gustos" list="listaGustos" />
<input type="submit" value="enviar"/><br />
</form>
El truco consiste en meter select dentro del datalist, los navegadores modernos
ignorarn la etiqueta select y los viejos el datalist.
atributo required
Este atributo obliga a rellenar con algn valor el control en el que se usa. Es decir hace
que un determinado control sea de obligado rellenado en un formulario. Uso:
<input type="text" name="texto" id="texto" required />
O bien, usando una forma ms compatible con XMNL:
<input type="text" name="texto" id="texto" required="required" />
(64)
atributo multiple
Permite en los cuadros de entrada de texto que el usuario pueda indicar varios valores
si les separa con comas.
atributo pattern
Permite colocar una expresin regular en un cuadro de texto que, obligatoriamente,
tendr que cumplir el cuadro en el que se use el atributo. Ejemplo (cuadro de texto que
slo acepta introducir 5 letras maysculas y tres nmeros):
<form action="recogida1.php" method="get">
<label for="texto">
Escribe el n de serie (5 letras y tres nmeros)
</label>
<input type="text" pattern="[A-Z]{5}[0-9]{3}" id="gustos" name="texto"
/>
<input type="submit" value="enviar"/><br />
</form>
atributo placeholder
Un placeholder es un texto que ayuda a rellenar un cuadro de un formulario (est
especialmente pensado para los cuadros de texto) colocando un texto inicial en el
cuadro que se va en cuanto el cuadro obtiene el foco del usuario (porque, por ejemplo,
el usuario le hace clic). Ejemplo:
<form action="recogida1.php" method="get">
<label for="texto">
Escribe el n de serie
</label>
<input type="text" pattern="[A-Z]{5}[0-9]{3}" id="gustos" name="texto"
placeholder="5 letras y tres nmeros" />
<input type="submit" value="enviar"/><br />
</form>
El resultado es:
atributo autocomplete
Permite activar (valor on) o desactivar (valor off) el autocompletado del navegador. El
autocompletado es la opcin que permite a los usuarios cuando rellenan un formulario
ver entradas habituales que han escrito en el mismo u otros formularios. a veces
conviene desactivar cuando lo que se escribe son datos sensibles (nombre de usuario,
contraseas).
(65)
valor 1 saltaremos al 4. Los controles del cuadro (en el caso de los cuadros numricos,
las flechitas) obedecen a esa configuracin.
<!DOCTYPE html>
<html lang="es-ES">
<head>
<meta charset="UTF-8">
<base href="http://www.mipagina.com/conts" />
<title>Pgina 3</title>
</head>
Todos los enlaces relativos se buscarn en la direccin indicada. As el enlace:
<a href="pg4.html">
Ese enlace saltar a la direccin http://www.mipagina.com/conts/pg4.html
base es un elemento vaco.
(66)
uso
Indica la relacin del recurso con la pgina. Posibilidades:
stylesheet. Es la que ms se utiliza, indica que el recurso es
una hoja de estilos (CSS).
alternate. Indica que el recurso es una versin alternativa del
documento actual. Se usa bastante.
(67)
atributo
uso
href
hreflang
type
media
<style type="text/css">
p{
font-face: Arial, Helvetica, sans-serif;
}
</style>
Ese cdigo hace que el texto de las etiquetas p, use tipo de letra Arial en primera
opcin, Helvetica en segunda y sans-serif en tercera.
src
(68)
uso
Establece el contenido al que se refieren los atributos name y
http-equiv (que no se pueden utilizar a la vez)
name
http-equiv
(69)
(70)
No se puede meter un header dentro de otro header ni dentro del elemento foot o
address.
(71)
<article>
<hgroup>
<h2>Palencia</h2>
<h3>Paisajes</h3>
</hgroup>
<figure>
<img src="montanaPalentina.jpg" alt="Vista de la Montaa Palentina"
width="350" height="400"/>
<figcaption>
Vista de la Montaa Palentina desde Camporredondo
</figcaption>
</figure>
(72)
<p>
Los paisajes en la provincia de Palencia.......
</p>
....
</article>
(73)
uso
URL al recurso que se desea mostrar
Tipo MIME que indica el contenido del recurso que se incorpora con la
etiqueta
Altura de la ventana que mostrar el recurso
Anchura de la ventana que mostrar el recurso
(74)
uso
URL al recurso que se desea mostrar
Anchura del objeto en nuestra pgina
Altura del objeto en nuestra pgina
(75)
La idea es que el vdeo se codifica en varios formatos distintos y luego les hacemos
referencia dentro de la etiqueta video y el navegador usar el formato que sea capaz de
traducir (del que disponga de codecs).
El elemento source fundamentalmente dispone de dos atributos: src para indicar la
URL que nos lleva al vdeo y type que indica el tipo MIME del vdeo. Adems dentro del
tipo MIME se pueden indicar los codecs concretos que necesitamos para decodificar el
vdeo.
La idea es la siguiente:
subttulos
Aunque los navegadores actuales no permiten esta posibilidad (se consigue a travs de
JavaScript) de hecho s hay una etiqueta reciente que se coloca dentro del elemento
video que sirve para indicar subttulos. Se trata de track. Sus atributos son:
atributo
uso
src
URL al archivo VTT o SRT que contiene los subttulos
kind
Tipo de subttulos. Posibilidades:
subtitles. Subttulos normales
captions. Igual que el anterior pero con posibilidad de aadir
sonidos.
descriptions. Texto alternativo e independiente de la pelcula
chapters. Contiene los captulos que permiten navegar de forma
gil por la pelcula
metadata. Metadatos de la pelcula
label
Nombre de los subttulos para reconocerlos en caso de haber indicado
varios
srclang
Idioma de los subttulos (por ejemplo es para espaol)
Ejemplo:
(77)