HTML



HTML básico

Hypertext Markup Language (HTML)

Atributos de las etiquetas HTML

Algunas etiquetas pueden contener información adicional llamadas atributos

Algunas etiquetas no tienen contenido y se pueden abrir y cerrar en una etiqueta

HTML 5

Estructura de una página HTML 

<!DOCTYPE html>
<html lang="es">
	<head>
    <meta charset="utf-8">
    <meta name="description" content="Contenido">
    <meta name="keywords" content="key1, key2">
    <meta name="author" content="Adan Perez">
    <link href="favicon.ico" type="image/x-icon" rel="shortcut icon">
    <meta name="viewport" content="width=device-width, initial-scale=1"> 
    <title>Título de la página</title>
    <link rel="stylesheet" href="style.css">   
    <script src="script.js"></script>
	</head>
	<body>
		contenido visible de la página
	</body>
</html>

Comentarios: <!-- ... -->

comentarios para documentar el fichero HTML o el texto

<!-- Mi página web, por Jaimito Pérez 
     Ingeniería Web, ETSIIT       -->
<p>la asignatura <!-- NO --> es divertida!</p>

Etiquetas HTML - Tabla de etiquetas comunes (1/2)

Hay muchos tipos de etiquetas HTML. Una lista de las más usadas sigue. Se puede ver la lista completa en este enlace. A menos que se especifique lo contrario se considera que las etiquetas se usan dentro del <body>

Etiqueta Descripción
<title> Page title (in <head>)
<meta> Meta information tag (in <head>)
<p> Paragraph tag
<h1> ... <h6> Heading tags
<header>, <footer> Header/Footer tags
<article>, <section> Article and section tags
<hr> Horizontal rule tag
<br> Line break tag
<a> Anchor tag (page links)

Etiquetas HTML - Tabla de etiquetas comunes (2/2)

Tag Description
<img /> Image tag
<em>, <strong> Emphasis (italic) and strong (bold) tags
<del>, <ins> Deletion (strikethrough) and insertion tags
<abbr> Abbreviation tag
<ul>, <ol> Unordered and ordered list tags
<li> List item tag (used as children of <ul> or <ol> list tags)
<dl>, <dt>, <dd> Definition list tags
<blockquote>, <q> Block and inline quotation tags
<code> Computer code tag
<pre> Preformatting tag

Título de la página: <title>

describe el título de la página

<title>Tema 2: HTML Básico</title>

Metadatos de la página Web: <meta>

información sobre la página (para el navegador, buscador, etc.) 

<meta charset="utf-8" />
<meta name="description"
   content="Sitio Web de los autores de programas JavaScript." />
<meta name="keywords" content="javascript, textbook" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />

Encabezados: <h1>, <h2>, ..., <h6>

encabezados o títulos para separar las partes principales de la página (block)

<h1>Universidad de Cantabria</h1>
<h2>Departamento de Matemática Aplicada y Ciencias de la Computación</h2>
<h3>Escuela de Ingenieros Industriales y de Telecomunicación</h3>

Párrafo: <p>

párrafos del texto (block)

<p>Neque porro quisquam est qui dolorem ipsum quia 
dolor sit amet, consectetur, adipisci velit...
</p>

Enlaces: <a>

enlaces, o "anclas (anchors)", a otras páginas (inline)

<p>
	Buscar 
	<a href="http://www.google.com/">Google</a> o 
  <a href="../index.html">Lecture Notes</a>.
</p>

Imágenes: <img>

inserta una imagen en la página (inline)

<img src="images/gollum.jpg" alt="Gollum de LOTR" />

Más detalles sobre imágenes

<a href="http://theonering.net/">
	<img src="images/gandalf.jpg" alt="Gandalf del LOTR"
	     title="No pasarán!" />
</a>

Imágenes adaptables

<a href="http://theonering.net/">
	<img src="images/gandalf.jpg" alt="Gandalf del LOTR" 
	 style="width:30%;"   title="No pasarán!" />
</a>

Imágenes con descripción: <figure>

inserta una descripción al pie de la imagen

<figure> 
<img src="images/gollum.jpg" alt="Gollum de LOTR" />  
<figcaption>Personaje Gollum en LOTR </figcaption>
</figure>

Etiquetas Semánticas:

No influyen en la apariencia de la página, sino en la estructura de la página

semantic tags layout

Más etiquetas semánticas

Línea Horizontal: <hr>

línea horizontal para separar visualmente secciones de una página (bloque)

<p>Primer párrafo</p>
<hr>
<p>Segundo párrafo</p>

Salto de línea: <br>

fuerza un salto de línea en medio de un elemento block (inline)

<p>La calidad nunca es un accidente, <br> siempre es el resultado 
de un esfuerzo de la inteligencia</p>
<p>Dos cosas me admiran: la inteligencia de las bestias <br>  y la 
bestialidad de los hombres.</p>

Elementos de frase: <em>, <strong>

em: texto enfatizado (representado normalmente en italica)
strong: texto muy enfatizado (representado normalmente en negrita) 

<p>
	HTML es <em>realmente</em>,
	<strong>REALMENTE</strong> divertido!
</p>

Eliminaciones e Inserciones: <del>, <ins>

contenido que debe ser eliminado o añadido al documento (inline)

<p>
	<del>Final Exam</del> <ins>Midterm</ins> is on <del>Aug 29</del> <ins>Apr 17</ins>.
</p>

Abreviaciones: <abbr>

una abreviatura, acrónimo, o término corriente (inline)

<p>
	Los buzos cuidadosos siempre recuerdan comprobar sus equipos
	<abbr title="Self-Contained Underwater Breathing Apparatus">SCUBA</abbr> .
</p>

Listas sin ordenar: <ul>, <li>

ul representa una lista con viñetas (block)
li representa un elemento simple dentro de la lista (block) 

<ul>
	<li>Sin zapatos</li>
	<li>Sin camiseta</li>
	<li>No hay problema!</li>
</ul>

Más sobre listas sin ordenar

<ul>
	<li>Simpsons:
		<ul>
			<li>Homer</li>
			<li>Marge</li>
		</ul>
	</li>
	<li>Familia del individuo:
		<ul>
			<li>Peter</li>
			<li>Lois</li>
		</ul>
	</li>
</ul>

Listas ordenadas: <ol>

ol representa una lista ordenada de elementos (block) 

<p>Grados ofertados en la Escuela:</p>
<ol>
	<li>Ingeniería de Tecnologías de Telecomunicación</li>
	<li>Ingeniería en Tecnologías Industriales</li>
	<li>Ingeniería Eléctrica</li>
	<li>Ingeniería Electrónica Industrial y Automática</li>
	<li>Ingeniería Mecánica</li>
	<li>Ingeniería Química</li>
</ol>

Lista de definición: <dl>, <dt>, <dd>

dl representa una lista de definiciones de términos (block)
dt representa cada término y dd su definición 

<dl>
	<dt>SGML</dt> <dd>Metalenguaje para la definición de otros lenguajes de marcado</dd>
	<dt>XML</dt> <dd>Lenguaje basado en SGML y que se emplea para describir datos</dd>
	<dt>XHTML</dt> <dd>Lenguajes derivados de XML para determinadas aplicaciones</dd>
</dl>

Citas: <blockquote>

cita larga (block) 

<p>Tim Berners Lee, creador de la WWW:</p>
<blockquote>
	<p>El poder de la web está en su universalidad. 
	         El acceso para todos sin importar su discapacidad es un aspecto esencial.</p>
</blockquote>

Citas Inline: <q>

cita corta (inline)

<p>Dijo Miguel de Cervantes: <q>Cada uno es artífice de su ventura</q></p>

No se usa comillas " por dos razones:

  1. HTML no debe contener caracteres de comillas dobles; deben ser escritas como &quot;
  2. el uso de <q> nos permite aplicar estilos CSS a las citas (ver más adelante)

No se usa comillas " por dos razones:

  1. HTML no debe contener caracteres de comillas dobles; deben ser escritas como &quot;
  2. el uso de <q> nos permite aplicar estilos CSS a las citas (ver más adelante)

Código de ordenador: <code>

parte de código de ordenador (mostrado habitualmente en un tipo de letra de ancho fijo)

<p>
	Las etiquetas <code>ul</code> y <code>ol</code>
	crean listas.
</p>

Texto preformateado: <pre>

parte de un texto pre-formateado (block)

<pre>
         Steve Jobs speaks loudly
            reality distortion
           Apple fans bow down
</pre>

Etiquetas anidadas

<p>
	HTML es <em>realmente,
	<strong>REALMENTE</em> muy</strong> divertido!
</p>

Elementos block e inline (explicación)

elements

Estándares Web

W3C HTML Validator

Representación de Caracteres HTML

manera de representar cualquier caracter Unicode dentro de una página Web

caracter(es) entidad
< >&lt; &gt;
é è ñ&eacute; &egrave; &ntilde;
™ ©&trade; &copy;
π δ Δ&pi; &delta; &Delta;
И&#1048;
" &&quot; &amp;

HTML-encoding text

&lt;p&gt;
	&lt;a href=&quot;http://google.com/search?q=marty&amp;ie=utf-8&quot;&gt;
		Search Google for Marty
	&lt;/a&gt;
&lt;/p&gt;

Iconos ("favicon")

<link href="filename" type="MIME type" rel="shortcut icon" />

<link href="yahoo.gif" type="image/gif" rel="shortcut icon" />
favicon favicon

Tablas

Tablas en HTML: <table>, <tr>, <td>

Una tabla 2D de filas y columnas de datos (block element) 

<table>
	<tr><td>1,1</td><td>1,2 okay</td></tr>
	<tr><td>2,1 real wide</td><td>2,2</td></tr>
</table>
1,11,2 okay
2,1 ancho real2,2

Cabeceras de tablas, títulos: <th>, <caption> 

<table>
	<caption>Mis datos valiosos</caption>
	<tr><th>Columna 1</th><th>Columna 2</th></tr>
	<tr><td>1,1</td><td>1,2 okay</td></tr>
	<tr><td>2,1 ancho real</td><td>2,2</td></tr>
</table>
Mis datos valiosos
Columna 1Columna 2
1,11,2 okay
2,1 ancho real2,2

Estilo de las tablas 

table { border: 2px solid black; caption-side: bottom; }
tr { font-style: italic; }
td { background-color: yellow; text-align: center; width: 30%; }
Mis datos valiosos
Columna 1Columna 2
1,11,2 okay
2,1 ancho real2,2

La propiedad border-collapse 

table, td, th { border: 2px solid black; }
table { border-collapse: collapse; }
Sin border-collapse
Column 1Column 2
1,11,2
2,12,2
Con border-collapse
Column 1Column 2
1,11,2
2,12,2

Los atributos rowspan y colspan

<table>
	<tr><th>Columna 1</th><th>Columna 2</th><th>Columna 3</th></tr>
	<tr><td colspan="2">1,1-1,2</td>
		<td rowspan="3">1,3-3,3</td></tr>
	<tr><td>2,1</td><td>2,2</td></tr>
	<tr><td>3,1</td><td>3,2</td></tr>
</table>

Estilos de columna: <col>, <colgroup> 

<table>
	<col class="urgente" />
	<colgroup class="destacar" span="2"></colgroup>
	
	<tr><th>Columna 1</th><th>Columna 2</th><th>Columna 3</th></tr>
	<tr><td>1,1</td><td>1,2</td><td>1,3</td></tr>
	<tr><td>2,1</td><td>2,2</td><td>2,3</td></tr>
</table>

Formularios

Formularios HTML

HTML form

Formulario HTML: <form> 

<form action="URL de destino">
	controles del formulario
</form>

Form example 

<form action="http://www.google.com/search">
	<div>
		Busquemos en Google:
		<input name="q" />
		<input type="submit" />
	</div>
</form>

Elementos de formularios

Una lista parcial de elementos de formularios HTML son:

Elementos de formularios: <input> 

<!-- 'q' es el nombre del parametro requerido por Google -->
<input type="text" name="q" value="Informe Pisa" />
<input type="submit" value="Venga!" />

Campos de Texto: <input> 

<input type="text" size="10" maxlength="8" /> NetID <br />
<input type="password" size="16" /> Password
<input type="submit" value="Log In" />

Cajas de Texto: <textarea>

un area de texto multi-línea (inline) 

<textarea rows="4" cols="20">
Escribe tus comentarios aquí.
</textarea>

Checkboxes con: <input>

opciones si/no que se pueden seleccionar o deseleccionar (inline) 

<input type="checkbox" name="lechuga" /> Lechuga
<input type="checkbox" name="tomate" checked="checked" /> Tomate
<input type="checkbox" name="pepino" checked="checked" /> Pepino

Botones tipo Radio: <input>

conjuntos de opciones mutuamente exclusivos (inline) 

<input type="radio" name="cc" value="visa" checked="checked" /> Visa
<input type="radio" name="cc" value="mastercard" /> MasterCard
<input type="radio" name="cc" value="amex" /> American Express

Etiquetas: <label> 

<label><input type="radio" name="cc" value="visa" checked="checked" /> Visa</label>
<label><input type="radio" name="cc" value="mastercard" /> MasterCard</label>
<label><input type="radio" name="cc" value="amex" /> American Express</label>

Listas desplegables: <select>, <option>

menú de opciones que se expanden y contraen (inline) 

<select name="favoritecharacter">
	<option>Jerry</option>
	<option>George</option>
	<option selected="selected">Kramer</option>
	<option>Elaine</option>
</select>

Uso de <select> en listas

<select name="favoritecharacter[]" size="3" multiple="multiple">
	<option>Jerry</option>
	<option>George</option>
	<option>Kramer</option>
	<option>Elaine</option>
	<option selected="selected">Newman</option>
</select>

Grupos de opciones: <optgroup> 

<select name="favoritecharacter">
	<optgroup label="Major Characters">
		<option>Jerry</option>
		<option>George</option>
		<option>Kramer</option>
		<option>Elaine</option>
	</optgroup>
	<optgroup label="Minor Characters">
		<option>Newman</option>
		<option>Susan</option>
	</optgroup>
</select>

Botones Reset 

Name: <input type="text" name="name" /> <br />
Food: <input type="text" name="meal" value="pizza" /> <br />
<label>Meat? <input type="checkbox" name="meat" /></label> <br />
<input type="reset" />

Parámetros de entrada ocultos 

<input type="text" name="username" /> Nombre <br />
<input type="text" name="sid" /> ID <br />
<input type="hidden" name="universidad" value="UC" />
<input type="hidden" name="anno" value="2014" />

Agrupación de inputs: <fieldset>, <legend>

grupos de campos de entrada con etiqueta opcional (block) 

<fieldset>
	<legend>Tarjetas de crédito:</legend>
	<input type="radio" name="cc" value="visa" checked="checked" /> Visa
	<input type="radio" name="cc" value="mastercard" /> MasterCard
	<input type="radio" name="cc" value="amex" /> American Express
</fieldset>

Estilo de controles de formulario 

elemento[atributo="valor"] {
	propiedad : valor;
	propiedad : valor;
	...
	propiedad : valor;
}

input[type="text"] {
	background-color: yellow;
	font-weight: bold;
}

Novedades en HTML 5

Multimedia

Formatos de ficheros multimedia

Formatos de ficheros de imagen

Gráficos Raster y vectorial

bitmap vs. vector

Formatos de ficheros Audio

Formatos de fichero Video

Enlaces a ficheros multimedia

<a href="video.avi">My video</a>

Tipos de ficheros y plugins

browser plugins

Inserción de audio 

<audio controls> 
  <source src="horse.mp3" type="audio/mpeg">
</audio>

Inserción de video 

<video controls > 
  <source="video.mp4" type="video/mp4"> 
</video>

Inclusión de video YouTube con iframe


Referencia a ficheros en la nube (audio/video)

Canvas

Javascript DrawingPanel!

Permite graficar dentro del navegador. Requiere el uso de Javascript

  1. Crear un elemento canvas 
    <canvas id="mycanvas" width="200" height="150"></canvas>
  2. Obtener una referencia del context a partir del cual se puede dibujar cosas, recuerda Graphics g 
    let ctx = document.getElementById("mycanvas").getContext("2d");
  3. Ir a los nodos "DrawingPanel"! 
    ctx.fillStyle = "#FF0000";
ctx.strokeStyle = "#00FF00";
for (let i = 0; i < 10; i++) {
	ctx.fillRect(i * 20, i * 10, 400 - i * 40, 200 - i * 20);
	ctx.strokeRect(i * 20, i * 10, 400 - i * 40, 200 - i * 20);
}

Métodos del contexto Canvas

método canvas análogo DrawingPanel
ctx.fillText(string, x, y); g.drawString(str, x, y);
ctx.fillRect(x, y, width, height); g.fillRect(x, y, width, height);
ctx.beginPath();
ctx.arc(x, y, radius, startAngle, endAngle);
ctx.stroke(); 		g.drawOval(x, y, width, height);
ctx.beginPath();
ctx.moveTo(x1, y1);
ctx.arc(x2, y2);
ctx.stroke(); 		g.drawLine(x1, y1, x2, y2);
ctx.fillStyle = "#FF0000" g.setColor(color);

Más cosas sobre canvas

Insertar un mapa o indicaciones (Google Maps)

Bibliografía y recursos

Libros

Recursos