HTML PDF

Arquitectura y Sistemas de Internet – HTML
HTML
Universidad de Burgos - Cristóbal J. Carmona <cjcarmona@ubu.es> 1/26

Tabla de contenidos
l  HTML
l  Evolución
l  ¿Qué es?
l  Etiquetas básicas
l  Presentación: CSS
l  HTML5 en 3 minutos

Evolución
Nacimiento finales de los 1990
l 
l  HTML 1.0 1991 (W3C)

l  HTML 2.0 1994
W3C l  HTML 3.2 1997 (fin de la guerra de los navegadores)
l  HTML 4.01 finales del 1999
W3C trabajó también en
-  Estándar de facto actual, pero... XHTML 2.0 como alternativa
pero finalmente abandonó
l  HTML 5 nace en el 2008 dicha especificación. En la
actualidad trabaja con el
WHATWG en HTML5
-  Working Draft 2011
WHATWG
-  Recomendación final en 2014, con vistas a HTML 5.1 en 2016
l  Otra forma de verlo:

l  http://evolutionofweb.appspot.com/?hl=es

¿Qué es?
l  HTML = HyperText Markup Language
l  Lenguaje de marcas (texto) para describir contenido o datos
en la web basado en SGML
-  Etiquetas, atributos y elementos
-  El documento HTML se "renderiza" (se representa
gráficamente) en un navegador
l  Concepto de motor de renderizado
Etiquetas
l  Ej:
Atributo
<!DOCTYPE html>
<html lang="es">
<head>
<meta charset="utf-8">
<title>Hola mundo</title>
</head>
Elemento <body>
<h1>Hola mundo</h1>
<p>Saludos.</p>
</body>
</html>

Uniform Resource Locator

l  Los recursos en la web se identifican por URL
http://www.ubu.es/titulaciones/es/master_informatica
Protocolo Servidor Ruta

l Correspondencia de las rutas con la estructura física de
ficheros en un servidor
l  Asociación lógica por nombre con dicho directorio
l  URL
l  Absolutas vs. Relativas
-  Ej: http://www.ubu.es/eps/index.html
-  Ej: /eps/index.html (suponiendo que estamos en
www.ubu.es
Etiquetas básicas
l  Cabecera y título
l  <head></head>
l  <title></title>
-  La información en la cabecera no se "renderiza"
l  Ej: el título se muestra en el título de la ventana (y se
usa como texto de favoritos o bookmarks)
Tipo de documento
Ej: HTML5
<!DOCTYPE html>
<html>
<head>
Cabecera <title>Título de la página</title>
Documento </head>
<body>
Cuerpo Cuerpo con texto a renderizar.
</body>
</html>

Etiquetas básicas
l  Párrafos
l  <p></p> : romper el texto en párrafos al igual que cuando redactamos un texto
l  Enfatizar y dar importancia a contenido
l  <em></em> y <strong></strong> : resaltar contenidos
l  Saltos de línea
l  <br> : inserta un salto de línea pero sin dividir el texto en párrafos
<!DOCTYPE html>
<html>
<head>
<title>Título de la página</title>
</head>
<body>
<p>Esto realmente <em>es</em> importante.</p>

<p><strong>Aviso:</strong> fundamental leer esto.</p>
Otro texto que de repente<br>

se rompe, aunque no en párrafos.
</body>
</html>

Etiquetas básicas
l  Encabezados
l  <h1></h1> <h2></h2> <h3></h3> <h4></h4> <h5></h5> <h6></h6>
-  Encabezados de distintos niveles en el texto
<!DOCTYPE html>
<html>
<head>
<title>Ejemplo encabezados</title>
</head>
<body>
<h1>De primer nivel</h1>
<h2>Segundo nivel</h2>
<p>Texto simple en un párrafo</p>
<h3>Tercer nivel</h3>
<p>Más texto</p>
</body>
</html>

Etiquetas básicas
l  Listas
l  <ul></ul> para listas no ordenadas (unordered list)
l  <ol></ol> para listas ordenadas (ordered list)
l  <li></li> items de la lista (list item)
-  Se permite el anidamiento de listas sin límites
<!DOCTYPE html>
<html>
<head>
<title>Ejemplo listas</title>
</head>
<body>
<ul>
<li>Sin ordenar</li>
<li>Elemento...</li>
<li>Tras elemento...
<ol>
<li>Elemento 1</li>
<li>Elemento 2</li>
<li>Elemento 3</li>
</ol>
</li>
</ul>
</body>
</html>

Etiquetas básicas
l  Enlaces
l  <a></a> enlace a otro documento u otra parte del documento actual
(anchor)
-  Enlaces absolutos o relativos (al documento o sitio web)
<!DOCTYPE html>
<html>
<head>
<title>Ejemplo enlaces</title>
</head>
<body>
<h1>Documento</h1>
<p>
<a href="http://www.ubu.es">
Enlace absoluto</a>
</p>
<p>
<a href="eps">Enlace relativo
suponiendo que estamos en la web de la UBU</a>
</p>
<a href="#seccion2">Ir a la siguiente sección</a>
<h2 id="seccion2">Sección 2</h2>
</body>
</html>
Etiquetas básicas
l  Imágenes
l  <img></img> inserción de imágenes
-  Atributos src, width, height y alt
l  src puede utilizar rutas absolutas o relativas a la

página
-  Ojo, al igual que <br> no es obligatorio cerrar la etiqueta
<!DOCTYPE html>
<html>
<head>
<title>Ejemplo tabla</title>
</head>
<body>
<img src="images/ubu.gif"
width="90" height="90"
alt="Logo de la UBU">
</body>
</html>

Etiquetas básicas
l  Tablas
l  <table></table> inserción de imágenes
-  Elementos adicionales
l  <tr></tr> para fila (row)
l  <td></td> para celda (data cell)
<!DOCTYPE html>
<html>
<head>
</head>
<body>
<table>
<tr>
<td>Fila 1, celda 1</td>
</tr>
<tr>
</tr>
<tr>
</tr>
Universidad de Burgos - Cristóbal J. Carmona <cjcarmona@ubu.es>
</table>
12/26
Etiquetas básicas
l  Formularios
l  Permiten el envío de datos para ser procesados (por nombre)
-  form, input, textarea, select y option.
l  <form></form> contiene la estructura (campos) del formulario
-  Atributo action para indicar a dónde enviar los datos
-  Atributo method para indicar si la petición es GET o POST
l  <input> distintos tipos de entrada de datos por parte del usuario
-  Tipos (type):
l  text, password, checkbox, radio y submit

-  submit se utiliza para que el usuario active el envío
de los datos
l  <textaarea> cuadro de texto multilínea
l  <select><option> listas desplegables de selección

Etiquetas básicas
l  Formularios
l  Ej:
<!DOCTYPE html>
<html>
<head>
</head>
<body>
<form action="contactus.php" method="post">
<p>Nombre:</p>
<p><input type="text" name="name" value="tu nombre">
</p>
<p>Comentarios: </p>
<p><textarea name="comments" rows="5"
cols="20">Comentarios</textarea></p>
<p>Selección:</p>
<p>
<input type="radio" name="opinion"
value="male">Positivo</p>
<p>
<input type="radio" name="opinion"
value="female">Negativo
</p>
<p>
<input type="submit">
</p>
</form>
</body>
</html>
Etiquetas básicas
l  Agrupación de elementos para aplicar estilos
l  <span></span>
l  <div></div>
-  span se coloca inline y se usa para una porción pequeña de HTML
en una línea (Ej: en un párrafo)
-  div es un bloque de líneas con grandes porciones de código
<!DOCTYPE html>
<html>
<head>
<title>Título de la página</title> A definir aspecto en CSS
</head>
<body>
Cuerpo con texto a renderizar.
<div id="panel">
<p>Esto es<span class="estilo2">otra cosa</span></p>
</div>
</body>
</html>

Presentación
l  Hojas de Estilo en Cascada o Cascade Style Sheet (CSS)
l  Sintaxis de definición: element { property: value; }
l  Definición de propiedades de presentación de los elementos HTML
-  Conceptos esenciales: selectores y propiedades
l  Formas
l  En línea
-  Ej: <p style="color: red">texto</p>
l  Integrado
-  Ej: <title>Ejemplo </title>
<style>
l  Enlazado p { color: red; }
a { color: blue; }
-  Ej: </style>
style.css
p {
<!DOCTYPE html> color: red;
<html> }
<head>
<title>CSS Example</title> a {
<link rel="stylesheet" href="style.css"> color: blue;
}

¿Qué es HTML5?
l  HTML5 =
l  Lenguaje de marcas (nueva versión que incluye HTML4 and
XHTML 1.0)
-  Construimos el documento
l  Representación (CSS3)
-  Decimos cómo se representa visualmente
l  Comportamiento avanzado (scripting JavaScript –
API)
-  Añadimos interacción a eventos en el documento
CSS3 y scripting
JavaScript en la
asignatura Diseño
Web
HTML5
l  Etiquetas eliminadas de HTML 4.01 Nuevos elementos
<acronym>
l 
l  <applet>
estructurales (semánticos):
l  <basefont> <header>
l  <big> <hgroup> NEW
l  <center> <section>
l  <dir>
l  <font>
<article>
l  <frame> <nav>
l  <frameset> <aside>
l  <isindex> <footer>
l  <noframes>
<main>
l  <strike>
l  <tt> <figure>
<figcaption>
<time>
Ver http://www.w3.org/TR/html5-diff/#obsolete-elements
HTML5
l  Nuevos elementos de formulario:
l  <input type="search"> cuadro de texto de búsqueda
l  <input type="tel"> para introducir teléfonos
l  <input type="url"> para introducir teléfonos
l  <input type="email"> para introducir direcciones de correo
l  <input type="number" step="x" min="y" max="z"> para introducir números en un
intervalo
l  <input type="range" min="x" max="y" step="z" value="xxx"> para usar un slider
l  <input type="color" value="#xxxxxx"> para introducir un color
l  Input type para fechas y hora:
-  type="datetime"
-  type="date"
-  type="month"
-  type="week"
-  type="time"
-  type="datetime-local"

HTML5
l  Nuevos elementos de formulario:
l  <datalist> lista de opciones predefinidas para controles de entrada.
Acompañan a un input type
l  <keygen> define un campo generador de claves (para formularios)
l  <output> define el resultado de un cálculo
l  <progress> barra de progreso
l  <meter> representa una medida en escala en un rango
l  Nuevos atributos de formulario:
l  placeholder da un valor por defecto adicional a colocar como pista en el
elemento
l  autofocus para obtener el foco en un elemento al cargar la página
l  autocomplete activar el autocompletado

HTML5
l  Ejemplo: style.css
input[type=email]:valid { background:
<!DOCTYPE html> green }
<html> input[type=email]:invalid { background:
<head> red }
<title>Formulario HTML5</title>
<link rel="stylesheet" href="style.css">
</head>
<body>
<form action="contactus.php" method="post">
Cuadro de búsqueda<input type="search" name="search"
autofocus><br>
Teléfono<input type="tel" name="telephone_number"><br>
URL<input type="url" name="web_address"><br>
Email<input placeholder="rmartico@ubu.es" type="email"
name="email_address"><br>
Número en rango<input type="number" name="quantity" step="2"
min="20" max="30"><br>
Rango con slider<input type="range" name="temperature" min="15"
max="25" step="0.5" value="18.5"><br>
Color<input name="color" type="color" value="#ff8800"><br>
Fecha<input name="fecha" type="date"><br>
País
<input name="country" type="text" list="country_name">
<datalist id="country_name">
<option value="Albania">
<option value="Andorra">
<option value="Australia">

</datalist>
<br>
Progreso
<progress value="22" max="100">Progreso</progress><br>
Universidad de Burgos - Cristóbal J. Carmona <cjcarmona@ubu.es>
Medidor<meter value="2" min="0" max="10">2 de 10</meter><br> 21/26
HTML5
l  Multimedia (en detrimento de Flash, JavaFX, Silverlight,
etc.)
l  <canvas> gráficos 2d e interactividad con scripting
(JS)
l  <svg> imágenes vectoriales
l  <math> fórmula matemática
l  <audio> contenido de sonido
l  <video> video o película
l  <source> múltiples fuentes de <video> y <audio>
l  <embed> contenedor de una aplicación externa o
plug-in
l  <track> textos para <video> y <audio>

CSS3
l  Define representación visual...
l  Y transiciones o transformaciones gráficas
l  Se divide su especificación en módulos
l  Añade:
l  Propiedades y valores
l  Selectores de atributos
l  Pseudo clases
l  Nuevos combinadores
l  Etc.

Scripting
l  Lenguaje de referencia: JavaScript
l  Ya utilizado con HTML (versiones previas) pero se
amplía...
l  Nuevas APIs:
Nombre Descripción
Canvas Manejo de canvas, renderizado de imágenes 2D y
animaciones
Web Workers Multihilo en JavaScript
Drag & drop Arrastrar y soltar elementos
Web Storage Almacenamiento de datos en local y en sesión
Geolocation Geolocalización del dispositivo
Web Sockets Conexión con sockets
Etc.
Bibliografía
l  M.L.Liu. (2004) Computación Distribuida. Fundamentos y Aplicaciones. Ed. Pearson
Addison-Wesley, 1ª edición. ISBN: 84-7829-066-4
l  Gralla, P. & Troller, M. (2006) How the Internet Works. 8th Edition, Publisher Que, ISBN-10:
0789736268. ISBN-13: 978-0789736260
l  Chapter 19. How Markup Languages Work
l  Chapter 20.How Hypertext Works
l  Chapter 21. How URLs Work
l  Chapter 22. How Image Maps and Interactive Forms Work
l  Pilgrim, M (2011) Dive into HTML5. Disponible en http://diveintohtml5.info/. Fecha última
visita: septiembre 2013.
l  HTML Dog (2013) HTML tutorials. And stuff. Disponible en http://www.htmldog.com/. Fecha
última visita: septiembre 2013.

Licencia
• Autor: Raúl Marticorena Sánchez
• Área de Lenguajes y Sistemas Informáticos
• Departamento de Ingeniería Civil
• Escuela Politécnica Superior
• UNIVERSIDAD DE BURGOS
• septiembre 2013
Este obra está bajo una licencia Creative Commons Reconocimiento-NoComercial-CompartirIgual 3.0 Unported.
No se permite un uso comercial de esta obra ni de las posibles obras derivadas, la distribución de las cuales se debe
hacer con una licencia igual a la que regula esta obra original
Licencia disponible en http://creativecommons.org/licenses/by-nc-sa/3.0/

HTML PDF

Încărcat de

Informații document

Titlu original

Drepturi de autor

Formate disponibile

Partajați acest document

Partajați sau inserați document

Opțiuni de partajare

Vi se pare util acest document?

Este necorespunzător acest conținut?

Drepturi de autor:

Formate disponibile

HTML PDF

Încărcat de

Drepturi de autor:

Formate disponibile

Arquitectura y Sistemas de Internet – HTML

Universidad de Burgos - Cristóbal J. Carmona <cjcarmona@ubu.es> 1/26

Universidad de Burgos - Cristóbal J. Carmona <cjcarmona@ubu.es> 2/26

l HTML 1.0 1991 (W3C)

l Otra forma de verlo:

Universidad de Burgos - Cristóbal J. Carmona <cjcarmona@ubu.es> 3/26

Universidad de Burgos - Cristóbal J. Carmona <cjcarmona@ubu.es> 4/26

Uniform Resource Locator

Protocolo Servidor Ruta

Universidad de Burgos - Cristóbal J. Carmona <cjcarmona@ubu.es> 6/26

<p>Esto realmente <em>es</em> importante.</p>

Otro texto que de repente<br>

Universidad de Burgos - Cristóbal J. Carmona <cjcarmona@ubu.es> 7/26

<h1>De primer nivel</h1>

Universidad de Burgos - Cristóbal J. Carmona <cjcarmona@ubu.es> 8/26

Universidad de Burgos - Cristóbal J. Carmona <cjcarmona@ubu.es> 9/26

<a href="#seccion2">Ir a la siguiente sección</a>

<h2 id="seccion2">Sección 2</h2>

l src puede utilizar rutas absolutas o relativas a la

Universidad de Burgos - Cristóbal J. Carmona <cjcarmona@ubu.es> 11/26

l <td></td> para celda (data cell)

l text, password, checkbox, radio y submit

Universidad de Burgos - Cristóbal J. Carmona <cjcarmona@ubu.es> 13/26

<form action="contactus.php" method="post">

Universidad de Burgos - Cristóbal J. Carmona <cjcarmona@ubu.es> 15/26

Universidad de Burgos - Cristóbal J. Carmona <cjcarmona@ubu.es> 16/26

Universidad de Burgos - Cristóbal J. Carmona <cjcarmona@ubu.es> 19/26

Universidad de Burgos - Cristóbal J. Carmona <cjcarmona@ubu.es> 20/26

Universidad de Burgos - Cristóbal J. Carmona <cjcarmona@ubu.es> 22/26

Universidad de Burgos - Cristóbal J. Carmona <cjcarmona@ubu.es> 23/26

Universidad de Burgos - Cristóbal J. Carmona <cjcarmona@ubu.es> 25/26

Licencia disponible en http://creativecommons.org/licenses/by-nc-sa/3.0/

S-ar putea să vă placă și

l  HTML 1.0 1991 (W3C)

l  Otra forma de verlo:

l  src puede utilizar rutas absolutas o relativas a la

l  <td></td> para celda (data cell)

l  text, password, checkbox, radio y submit