introducción a html aplicaciones web (curso 2014/2015) · edited with emacs + lat e x+ prosper...

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


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>


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.


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.


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>


Edited

with

em

acs

+LA

T EX

+pro

sper

Comentarios

1

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>


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.


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).


Edited

with

em

acs

+LA

T EX

+pro

sper


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>


Edited

with

em

acs

+LA

T EX

+pro

sper


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.


Edited

with

em

acs

+LA

T EX

+pro

sper


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>


Edited

with

em

acs

+LA

T EX

+pro

sper


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.


Edited

with

em

acs

+LA

T EX

+pro

sper


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.


Edited

with

em

acs

+LA

T EX

+pro

sper


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>


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.


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>


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.


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>


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>


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>


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>


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>


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.


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.


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>


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.


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.


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>


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


Edited

with

em

acs

+LA

T EX

+pro

sper


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


Edited

with

em

acs

+LA

T EX

+pro

sper


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


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>


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>


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.


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


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>


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>


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>


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”.


http://modernizr.com/

http://caniuse.com/

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/


http://proquest.safaribooksonline.com/book/web-development/9781118416518

http://www.w3.org/TR/html5/

http://www.whatwg.org/specs/web-apps/current-work/multipage/

http://www.whatwg.org/specs/web-apps/current-work/multipage/

introducción a html aplicaciones web (curso 2014/2015) · edited with emacs + lat e x+ prosper...

Documents