Edited
with
em
acs
+LA
T EX
+pro
sper
Introducción a HTML
Aplicaciones Web (Curso 2014/2015)
Jesus Arias Fisteus // [email protected]
Introduccion a HTML– p. 1
Edited
with
em
acs
+LA
T EX
+pro
sper
Introducción a HTML
Introduccion a HTML– p. 2
Edited
with
em
acs
+LA
T EX
+pro
sper
¡Hola Mundo!
1 <!DOCTYPE html>2 <html>3 <head>4 <meta charset="UTF-8">
5 <title>Mi primera página HTML</title>6 </head>7 <body>8 <p>¡Hola Mundo!</p>9 </body>
10 </html>
Introduccion a HTML– p. 3
Edited
with
em
acs
+LA
T EX
+pro
sper
La cabecera del documento
Elemento head.
Suele contener:
title: título de la página.
link: enlaces a documentos externos (p.e.hojas de estilo, documento RSS, metadatos,etc.
style: hoja de estilo empotrada en eldocumento.
script: programa empotrado en eldocumento, normalmente Javascript.
Introduccion a HTML– p. 4
Edited
with
em
acs
+LA
T EX
+pro
sper
El cuerpo del documento
Elemento body.
Contiene la parte del documento que serepresenta en el navegador web:
Texto organizado en párrafos, tablas, imágenes,formularios, etc.
Introduccion a HTML– p. 5
Edited
with
em
acs
+LA
T EX
+pro
sper
Espacios en blanco y salto automático
de línea
1 <p>
2 Múltiples espacios en blanco consecutivos son
3 tratados como si sólo se tratase de uno.
4 Los caracteres de salto de línea o tabuladores5 son tratados como si simplemente6
7 fuesen espacios.8 </p>
Introduccion a HTML– p. 6
Edited
with
em
acs
+LA
T EX
+pro
sper
Comentarios
1 <!-- El texto que aperece entre las marcas2 de comentario es ignorado por el3 navegador web -->
Introduccion a HTML– p. 7
Edited
with
em
acs
+LA
T EX
+pro
sper
Texto preformateado
1 <pre>2 public class CircleAreaCalc {3
4 private BigDecimal pi;5
6 public CircleAreaCalc(int numDigits) {7 PiCalc piCalc = new PiCalc(numDigits);8 pi = piCalc.compute();9 }
10
11 public BigDecimal area(BigDecimal radius) {12 BigDecimal area = radius.pow(2);13 area = area.multiply(pi);14 return area;15 }16 }17 </pre>
Introduccion a HTML– p. 8
Edited
with
em
acs
+LA
T EX
+pro
sper
Elementos de bloque y elementos de lí-
nea
Los elementos que contiene el cuerpo deldocumento pueden ser:
Elementos de bloque: hay una separación delínea antes y después del documento.
Ejemplos: p, table, div, pre, h1, etc.
Elementos de línea: se muestran dentro delflujo normal de una línea, sin forzar saltos delínea.
Ejemplos: em, strong, a, img, etc.
Introduccion a HTML– p. 9
Edited
with
em
acs
+LA
T EX
+pro
sper
Marcado semántico de texto
Elementos que permiten controlar cómo sepresenta el texto:
em: énfasis (cursiva típicamente).
strong: énfasis fuerte (negrilla típicamente).
b: negrilla.
i: cursiva.
small: comentarios adicionales, como porejemplo letra pequeña citando avisos legales(p.e. declaración de copyright).
Introduccion a HTML– p. 10
Edited
with
em
acs
+LA
T EX
+pro
sper
Marcado semántico de texto
1 <p>
2 Esta aplicación web le permite <em>comprar</em>
3 o <em>vender</em> <strong>únicamente</strong>4 objetos de segunda mano.5 </p>6
7 <p>8 <small>El operador del servicio se reserva9 el derecho a cancelarlo sin previo aviso.</small>
10 </p>
Introduccion a HTML– p. 11
Edited
with
em
acs
+LA
T EX
+pro
sper
Marcado semántico de texto
Más elementos que permiten controlar cómo sepresenta el texto:
cite: para mencionar la fuente de algo (p.e.para citar documentos en la bibliografía).
q: para presentar literalmente texto de unadocumento, dicho por una persona, etc.
dfn: para presentar la definición de conceptosimportantes.
abbr: para presentar un acrónimo oabreviatura.
Introduccion a HTML– p. 12
Edited
with
em
acs
+LA
T EX
+pro
sper
Marcado semántico de texto
1 <p>
2 El científico <cite>Albert Einstein</cite>3 dijo que <q>nunca consideres el estudio como
4 una obligación, sino como una oportunidad5 para penetrar en el bello y maravilloso6 mundo del saber.</q>7 </p>8 <p>9 Crear un documento
10 <abbr title="HyperText Markup Language">HTML</abbr>11 es muy sencillo.12 </p>13 <p>
14 Un <dfn>byte</dfn> en una unidad de información15 compuesta por 8 bits.16 </p>
Introduccion a HTML– p. 13
Edited
with
em
acs
+LA
T EX
+pro
sper
Marcado semántico de texto
Marcado relacionado con los ordenadores:
code: código de ordenador.
var: variable en un programa.
samp: ejemplo de salida de un programa.
input: entrada dada a un programa.
Introduccion a HTML– p. 14
Edited
with
em
acs
+LA
T EX
+pro
sper
Marcado semántico de texto
Elemento time:
Su contenido debe ser una especificación detiempo (fecha, mes, año, semana, día de lasemana, hora, zona horaria, duración de algo,etc.)
Puede llevar un atributo datetime con unarepresentación procesable por un ordenador.
Si no, el propio contenido debe serprocesable por un ordenador.
Introduccion a HTML– p. 15
Edited
with
em
acs
+LA
T EX
+pro
sper
Marcado semántico de texto
1 <p>
2 El congreso comenzó
3 <time datetime='2014-09-05'>ayer</time>
4 y durará <time datetime='P3D'>3 días</time>.5 </p>6 <p>7 Correo recibido el <time>2014-09-23T10:00</time>.8 </p>
Introduccion a HTML– p. 16
Edited
with
em
acs
+LA
T EX
+pro
sper
Imágenes
Las imágenes se incluyen con el elemento img.
Es un elemento de línea.
Además, se debe proporcionar un textodescriptivo.
Se puede conservar el tamaño original de laimagen o escalarla a otra altura y/o anchura.
Introduccion a HTML– p. 17
Edited
with
em
acs
+LA
T EX
+pro
sper
Imágenes
1 <p>2 <img src="logo-uc3m.jpg" alt="Logotipo de UC3M">3 <img src="logo-uc3m.jpg" width="100"4 alt="Logotipo de UC3M">5 <img src="logo-uc3m.jpg" width="100" height="100"6 alt="Logotipo de UC3M">7 </p>
Introduccion a HTML– p. 18
Edited
with
em
acs
+LA
T EX
+pro
sper
Hipervínculos
Un documento HTML puede enlazar mediantehipervínculos con:
Objetos externos: otra página HTML, unaposición de otra página HTML, ficherosdescargables, etc.
Otra posición del propio documento: porejemplo, enlazar desde una sección deldocumento hacia otra sección.
Introduccion a HTML– p. 19
Edited
with
em
acs
+LA
T EX
+pro
sper
Hipervínculos
1 <p>2 La <a href="http://www.uc3m.es/">Universidad3 Carlos III de Madrid</a> fue fundada en 1989.4 </p>5 <p>6 <a href="http://www.uc3m.es/">7 <img src="logo-uc3m.jpg"></a>8 </p>9 <p>
10 Este <a href="http://www.uc3m.es/" target="_blank">
11 hipervínculo</a> se abre en una nueva ventana12 o pestaña.13 </p>
Introduccion a HTML– p. 20
Edited
with
em
acs
+LA
T EX
+pro
sper
Hipervínculos
1 <p>2 Este tema se trata en mayor profundidad3 <a href="#p3">posteriormente en este documento</a>.4 </p>5
6 <p id="p3">7 El tema tiene una complejidad...8 </p>
Introduccion a HTML– p. 21
Edited
with
em
acs
+LA
T EX
+pro
sper
Listas ordenadas
1 <p>2 Esto es una lista ordenada (el orden de los3 elementos de la lista es relevante):4 </p>5 <ol>6 <li>Primer punto.</li>7 <li>Segundo punto.</li>8 </ol>9
10 <p>
11 Se pueden usar números, letras, etc.:12 </p>13 <ol type="a">14 <li>Primer punto.</li>15 <li>Segundo punto.</li>16 </ol>
Introduccion a HTML– p. 22
Edited
with
em
acs
+LA
T EX
+pro
sper
Listas no ordenadas
1 <p>2 Esto es una lista no ordenada (el orden de los3 elementos de la lista4 <strong>no</strong> es relevante):5 </p>6 <ul>7 <li>Primer punto.</li>8 <li>Segundo punto.</li>9 </ul>
Introduccion a HTML– p. 23
Edited
with
em
acs
+LA
T EX
+pro
sper
Tablas
1 <table>2 <thead>3 <tr>4 <td>Fecha</td>5 <td>Lugar</td>6 <td>Precio</td>7 </tr>8 </thead>9 <tbody>
10 <tr>11 <td>10-09-2014</td>12 <td>Madrid</td>13 <td>60</td>14 </tr>15 <tr>16 <td>12-09-2014</td>17 <td>Sevilla</td>18 <td>50</td>19 </tr>20 <tr>21 <td>13-09-2014</td>22 <td>Málaga</td>23 <td>50</td>24 </tr>25 </tbody>26 </table>
Introduccion a HTML– p. 24
Edited
with
em
acs
+LA
T EX
+pro
sper
Secciones
Marcado de secciones de un documento:
Cabecera: elemento header.
Pie de página: elemento footer.
Enlaces de navegación: elemento nav.
Información secundaria / relacionada: elementoaside.
Información de contacto: elemento address.
Unidad autocontenida: elemento article.
Sección: elemento section.
Introduccion a HTML– p. 25
Edited
with
em
acs
+LA
T EX
+pro
sper
Títulos
Marcado de títulos de secciones y otras partes deun documento:
Elementos h1, h2, h3, h4, h5 y h6.
Introduccion a HTML– p. 26
Edited
with
em
acs
+LA
T EX
+pro
sper
Secciones
1 <article>2 <header>3 <h2>Apples</h2>4 <p>Tasty, delicious fruit!</p>5 </header>6 <p>The apple is the pomaceous fruit of the apple7 tree.</p>8 <section>9 <h3>Red Delicious</h3>
10 <p>These bright red apples are the most common11 found in many supermarkets.</p>12 </section>13 <section>14 <h3>Granny Smith</h3>15 <p>These juicy, green apples make a great16 filling for apple pies.</p>17 </section>18 </article>
Introduccion a HTML– p. 27
Edited
with
em
acs
+LA
T EX
+pro
sper
Agrupación de contenido: div y span
A veces conviene agrupar contenido en un únicoelemento. Por ejemplo:
Para aplicar estilos a dicho contenido en suconjunto.
Para manipularlo en su conjunto por unprograma.
Para agrupar en un bloque elementos de línea.
Dos elementos sin semántica para agrupar:
Elemento div: agrupación de bloque.
Elemento span: agrupación de línea.
Se ilustrará su uso cuando se explique CSS.
Introduccion a HTML– p. 28
Edited
with
em
acs
+LA
T EX
+pro
sper
Formularios
Los formularios permiten que el usuario introduzcainformación.
Se recoge la información mediante controles dedistintos tipos: texto, fechas, números, listas,casillas marcables, ficheros, etc.
Típicamente se envía la información recogida alservidor mediante una petición HTTP.
Introduccion a HTML– p. 29
Edited
with
em
acs
+LA
T EX
+pro
sper
Formularios
1 <form action="http://example.com/search">2 <label>3 Texto: <input type="search" name="term">4 </label>5 <input type="submit" value="Buscar">6 </form>
Introduccion a HTML– p. 30
Edited
with
em
acs
+LA
T EX
+pro
sper
Formularios: elemento input
Atributo type Uso
hidden oculto, no visible en la página
text una línea de texto
search una línea de texto, con semántica de buscar
tel número de teléfono
url URL absoluta
email dirección de correo electrónico
password una línea de texto, para información sensible
number Número
range Número en el cual la precisión no es relevante
color Color
Introduccion a HTML– p. 31
Edited
with
em
acs
+LA
T EX
+pro
sper
Formularios: elemento input
Atributo type Uso
datetime fecha y hora, con zona horaria UTC
date fecha (día, mes, año)
month fecha como mes (mes, año)
week fecha como semana (número de semana, año)
time hora, sin zona horaria
datetime-local fecha y hora, sin zona horaria
Introduccion a HTML– p. 32
Edited
with
em
acs
+LA
T EX
+pro
sper
Formularios: elemento input
Atributo type Uso
checkbox cuadro marcable
radio botón marcable, sólo se marca uno por grupo
file Fichero
sumbit Botón de envío
image Imagen de envío (con coordenadas)
reset Botón de vuelta al estado inicial del formulario
button Botón genérico
Introduccion a HTML– p. 33
Edited
with
em
acs
+LA
T EX
+pro
sper
Formularios: elemento select
Desplegable con varias opciones a elegir.
1 <label for="unittype">Select unit type:</label>2 <select id="unittype" name="unittype">3 <option value="1">Miner</option>4 <option value="2">Puffer</option>5 <option value="3" selected>Snipey</option>6 <option value="4">Max</option>7 <option value="5">Firebot</option>8 </select>
Introduccion a HTML– p. 34
Edited
with
em
acs
+LA
T EX
+pro
sper
Formularios: elemento textarea
Cuadro de entrada de texto de varias líneas.
1 <textarea name="mensaje" rows="5" cols="80"2 placeholder="Escribe tu mensaje..."></textarea>
Introduccion a HTML– p. 35
Edited
with
em
acs
+LA
T EX
+pro
sper
Formularios: atributos comunes de los
controles
Atributo Uso
name Nombre del control. Cuando se envía el formulario, se incluyen
el nombre y valor del control.
maxlength Máximo número de caracteres
minlength Mínimo número de caracteres
disabled Si presente, no se puede interaccionar con el control
autofocus Si presente, el control recibe el foco al cargarse la página
autocomplete Toma valores on (por defecto) y off. Si el valor es off, el nave-
gador no debe guardar el valor del control ni ofrecer sugerencias
de autocompletado para el mismo.
Introduccion a HTML– p. 36
Edited
with
em
acs
+LA
T EX
+pro
sper
Formularios: atributos comunes del
elemento input
Atributo Uso
size Tamaño visible del control (número de caracteres)
readonly Si presente, no se puede cambiar el valor
required Si presente, el control debe tomar un valor no vacío
multiple Si presente, se pueden subir múltiples valores para el control
pattern Expressión regular para validar el valor
min Mínimo valor en campos numéricos
max Máximo valor en campos numéricos
step Granularidad esperada para un valor numérico
list Listado de valores sugeridos al usuario (en combinación con el
elemento datalist)
placeholder Pista sobre cómo rellenar el control
Introduccion a HTML– p. 37
Edited
with
em
acs
+LA
T EX
+pro
sper
Formularios: agrupación de controles
1 <fieldset>2 <legend>Display</legend>3 <div>4 <label>5 <input type="radio" name="c" value="0" checked>6 Black on White7 </label>8 </div>9 <div>
10 <label>11 <input type="radio" name="c" value="1">12 White on Black13 </label>14 </div>15 <div>16 <label>17 <input type="checkbox" name="g">18 Use grayscale19 </label>20 </div>21 </fieldset>
Introduccion a HTML– p. 38
Edited
with
em
acs
+LA
T EX
+pro
sper
Formularios: sugerencia de valores
1 <label>
2 País <input type="text" name="pais" list="paises">3 </label>4 <datalist id="paises">5 <option value="España">6 <option value="Portugal">7 <option value="Andorra">8 <option value="Francia">9 </datalist>
Introduccion a HTML– p. 39
Edited
with
em
acs
+LA
T EX
+pro
sper
Formularios: múltiples ficheros
1 <label>
2 Selecciona una o más fotos:3 <input type="file" name="foto" multiple required>4 </label>
Introduccion a HTML– p. 40
Edited
with
em
acs
+LA
T EX
+pro
sper
Compatibilidad con navegadores
HTML5 está en constante evolución:
Algunas características pueden no estarimplementadas en determinados navegadoreso versiones de navegadores.
Es problemático dar soporte a navegadoresantiguos y a la vez aprovechar las nuevascaracterísticas.
Recursos útiles:Bibliotecas Javascript, como Modernizr.Información de soporte por navegadores,como “Can I Use”.
Introduccion a HTML– p. 41
Edited
with
em
acs
+LA
T EX
+pro
sper
Referencias
Rob Larsen, Beginning HTML and CSS. Wrox(2013).
Acceso en Safari
Capítulos 1, 2, 3, 4, 5 y 6.
Especificación de HTML5 del W3C:
http://www.w3.org/TR/html5/
Especificación de HTML5 de WHATWG:
http://www.whatwg.org/specs/
web-apps/current-work/multipage/
Introduccion a HTML– p. 42