F.4411.316.013 - POEJ/MIXTO/F.
Generation/
Curso JAVA (Online-Nacional) 3ªEd.
Java Bootcamp
Eduardo Corral Muñoz
[email protected]
Introducción a
HTML
Índice
_01 Qué es HTML
_02 Elementos HTML
_03 Formularios
_04 Multimedia
_05 La página web
_06 Buenas prácticas
01
Qué es HTML
Qué es HTML
HTML
HyperText Markup Language
(lenguaje de marcas de hipertexto)
Un lenguaje estándar para componer páginas web
Describe la estructura de un página web
Dispone de un conjunto de “etiquetas” que le indican al
navegador cómo debe mostrar el contenido en cada una de las
partes de la página
Un poco de historia
1989 Tim Berners-Lee inventa www
1991 Tim Berners-Lee inventa HTML
1993 Dave Raggett prepara HTML+
1995 El grupo de tarabajo HTML define HTML 2.0
1997 Recomendación W3C: HTML 3.2
1999 Recomendación W3C: HTML 4.01
2000 Recomendación W3C: XHTML 1.0
2008 WHATWG HTML5
2012 Primer diseño WHATWG HTML5 Living Standard
2014 Recomendación W3C: HTML5
2016 Candidato a Recomendación W3C: HTML 5.1
2017 Recomendación W3C: HTML5.1 2nd Edition
2017 Recomendación W3C: HTML5.2
Qué es HTML
Elem. de
Elementos Marcos Corrector
Versión presentación
HTML (Frameset) XML
u obsoletos
HTML 4.01 Strict
HTML 4.01 Transitional
HTML 4.01 Frameset
XHTML 1.0 Strict
XHTML 1.0 Transitional
XHTML 1.0 Frameset
XHTML 1.1
(permite añadir módulos)
HTML 5 No está basado en SGML. No necesita DTD
DTD → Document Type Definition
HTML está basado en SGML (Standard Generalized Markup Language)
XHTML está basado en XML (eXtensible Markup Language)
02
Elementos HTML
Elementos HTML
Describen la estructura de una página
Bloques de contenido para componer una página
Se representan mediante etiquetas (tags)
Los navegadores los usan interpretar el contenido
Elementos HTML
<html> … </html>
Define la página
<head> … </head>
Info para el navegador
<body> … </body>
Contenido visible
Elementos HTML
Estructura básica:
<!DOCTYPE html>
<head>
<title>Mi primera página</title>
</head>
<body>
<h1>Esto es un encabezado</h1>
<p>Y esto es un párrafo</p>
</body>
</html>
<etiqueta> contenido </etiqueta>
Elementos HTML
Estructura básica:
Ejemplo_1
<!DOCTYPE html>
<html> <!doctype html>
<head> <html>
<meta charset="utf-8" />
<title>Título de la página</title> <head>
</head> <meta />
<body>
<h1>Esto es un encabezado</h1> <title>
<h3>Subtítulo</h3> <body>
<p>Y esto un párrafo</p>
</body> <h1>..<h6>
</html> <p>
Elementos HTML
Textos y formatos
Ejemplo_2 <br>
<body>
<h1>Esto es un encabezado</h1>
<b>
<p>Y esto un párrafo</p> <strong>
<p>Formatos de texto:<br>
<b>En negrita</b><br>
<i>
<strong>Texto importante</strong><br> <em>
<i>Itálica</i><br>
<em>Énfasis</em><br>
<mark>
<mark>Marcado</mark><br> <small>
<small>Pequeño</small><br>
<del>Tachado</del><br>
<del>
<ins>Insertado</ins><br> <ins>
y un <sub>subíndice</sub><br>
y también <sup>superíndice</sup></p>
<sub>
</body> <sup>
Elementos HTML
Imágenes
Ejemplo_3
…
<img src="montanas.jpg" alt="Una Montaña" title="Una Montaña" width="500"
height="246" />
…
<img src=“ruta imagen” />
Atributos alt | title | width | height
Elementos HTML
Enlaces
Ejemplo_4
…
<a href="http://www.eoi.es">Enlace a otra página </a>
…
<a href=“url destino”>Texto enlace</a>
Atributo target=“_blank | _self | _top | …”
Imágenes como enlace
Bookmarks
Elementos HTML
Listas
Ejemplo_5
… <ul>
<li> Item uno </li>
<li> Item dos </li>
<li> Item tres </li>
</ul> <ul>
<ol>
<li> Item uno </li>
<li>
<li> Item dos </li> <ol type=“X”>
<li> Item tres </li>
</ol> <dl>
<dl>
<dt> Primero</dt>
<dt>
<dd> - descripción de primero</dd> <dd>
<dt> Segundo</dt>
<dd> - descripción de segundo</dd>
</dl> ...
Elementos HTML
Tablas
Ejemplo_6/a/b/c/d/e
<table width="400" border="1" cellspacing="2" cellpadding="2">
<tr>
<th>Col 1</th>
<th>Col 2</th>
<th>Col 3</th>
</tr> <table>
<tr> <thead> <tbody> <tfoot>
<td>Uno</td>
<td>Dos</td> <th>
<td>Tres</td> <tr>
</tr>
<tr> <td>
<td>Cuatro</td> <colspan>
<td>Cinco</td>
<td>Seis</td> <rowspan>
</tr>
</table>
Elementos HTML
Bloques e inline
Ejemplo_7
<div>
<h2>León</h2> <div>
<p>León (pronunciado: /leˈon/) (en leonés,
<span>
Llión)<sup>7</sup> es un municipio<sup>8</sup> y
ciudad <span style="color:red">española </span>ub
icada en el ...
</p>
</div>
03
Formularios
Formularios
Formularios
Ejemplo_8
<form action="procesa_formulario_1.php" method="post" name="formulario"
target="_blank">
Nombre:<br>
<input type="text" name="nombre">
<br>
Apellido:<br>
<input type="text" name="apellido">
<br>
<input type="submit" value="Enviar">
</form>
<form> <input>
Formularios
Elementos de un formulario
Ejemplo_9
<form action="procesa_formulario_2.php" method="post" target="_blank">
<!-- Select -->
Ciudad:
<select name="ciudad"> <select>
<option value="Madrid">Madrid</option>
<option value="León" selected>León</option>
selected
<option value="Cuenca">Cuenca</option> <textarea>
</select>
<!-- Text Area -->
<button>
<br>Mensaje:<br>
<textarea name="mensaje" rows="5" cols="30"></textarea> <br>
<!-- Button -->
<button type="button" onclick="alert('Hola')">Click Aquí</button>
<input type="submit" value="Enviar">
</form>
Formularios
Elementos de un formulario
Ejemplo_10
<form action="procesa_formulario_3.php" method="post">
<!– datalist --> <datalist>
Navegador:
<input list="navegador">
<datalist id="navegador">
<option value="Firefox">Firefox</option>
<option value="Chrome">Chrome</option>
<option value="Safari">Safari</option>
</datalist>
</form>
Formularios
Elementos de un formulario
Ejemplo_11
<form action="procesa_formulario_4.php" method="post"
oninput="x.value=parseInt(a.value)+parseInt(b.value)">
<output>
<input type="text" id="a" name="a" value="0">
+
<input type="text" id="b" name="b" value="0">
=
<output id="x" name="x" for="a b"></output>
<br><br>
<input type="submit" value="Enviar">
</form>
Formularios
Elementos de un formulario – input - Tipos
Ejemplo_12
<form action="procesa_formulario_5.php" method="post">
Texto:<input type="text" id="a" name="a"><br><br> input type:
Password:<input type="password" id="b" name="b"><br><br>
Radio: Blanco<input type="radio" name="c" value="Blanco">
text
Negro<input type="radio" name="c" value="Negro"> password
<br><br>
Checkbox: Bus<input type="checkbox" name="d" value=“Bus">
reset
Tren<input type="checkbox" name="e" value="Tren"> radio
<br><br>
<input type="Reset" value="Reset">
checkbox
<input type="submit" value="Submit"> checked
</form>
Formularios
Elementos de un formulario – input - Tipos
Ejemplo_13
<form action="procesa_formulario_6.php" method="post"> color
Color: <input type="color" name="a"><br><br>
Fecha: <input type="date" name="b"><br><br>
date
Fecha-Hora: <input type="datetime-local" name="c"><br><br> datetime
Hora: <input type="time" name="d"><br><br>
Mes: <input type="month" name="e"><br><br>
time
Semana: <input type="week" name="f"><br><br> month
Numero: <input type="number" name="g" min="1" max="10">
<br><br>
week
Rango: <input type="range" name="h" min="1" max="10"> number
<br><br>
Email: <input type="email" name="i"><br><br>
range
Búsqueda: <input type="search" name="j"><br><br> email
URL: <input type="url" name="k"><br><br>
<input type="submit" value="Submit">
search
</form> url
Formularios
Elementos de un formulario – input - Atributos
Ejemplo_14
<form action="procesa_formulario_7.php" method="post">
Valor:<input type="text" name="a" value=“Hola"><br><br>
Lectura:<input type="text" name="b" value="Hola" readonly><br><br>
Deshabilitado: <input type="text" name="c" value="Hola" disabled>
<br><br>
Tamaño: <input type="text" name="d" value= Hola" size="40"><br><br>
L.Máx.: <input type="text" name="e" value="Eduardo" maxlength="10">
<br><br>
<input type="submit" value="Submit">
</form>
value readonly disabled size maxlength
Formularios
Elementos de un formulario – input - Atributos
Ejemplo_15
<form action="procesa_formulario_8.php" method="post" autocomplete="on">
Autofocus: <input type="text" name="a" autofocus><br><br>
Archivos: <input type="file" name="b" multiple><br><br>
Patrón: <input type="text" name="c" pattern="[A-Za-z]{3}"><br><br>
Descripcion: <input type="text" name="d" placeholder="Nombre"><br><br>
Requerido: <input type="text" name="e" required><br><br>
Paso: <input type="number" name="f" step="3"><br><br>
<input type= "submit" value= "Enviar">
</form>
autocomplete autofocus multiple pattern
placeholder required step
04
Multimedia
Multimedia
Audio
Ejemplo_16
<!doctype html>
<html>
<head>
<meta charset="utf-8" />
<title>Multimedia - Audio</title>
</head> audio
<body>
<audio loop>
<source src="sonido.ogg" type="audio/ogg">
<source src="sonido.mp3" type="audio/mpeg">
El navegador no soporta el elemento audio
</audio>
</body>
</html>
Multimedia
Vídeo
Ejemplo_17
<!doctype html>
<html>
<head>
<meta charset="utf-8" />
<title>Multimedia - Vídeo</title>
</head> video
<body>
<video width="320" height="240" controls>
<source src="video.mp4" type="video/mpeg">
<source src="video.ogg" type="video/ogg">
El navegador no soporta el elemento video
</audio>
</body>
</html>
05
La página web
La página web
Diseño de página web
Cabecera
Menú de navegación
Contenido
Contenido Contenido
principal
Pie
La página web
Elementos semánticos HTML5
Cabecera = <header>
Menú de navegación = <nav>
Sección = <section>
Aparte =
<aside>
Artículo= <article>
Pie = <footer>
La página web
Elementos semánticos HTML5
<header>
<nav>
<main>
<section>
<article>
<aside>
<footer>
<figure> <figcaption>
<details> <summary>
La página web
Diseño de página web - home
Curso de Desarrollo de
logo
Aplicaciones Web
HTML CSS Javascript SEO Java Información
Datos
convocatoria
Descripción
del curso
Pie
La página web
Diseño de página web - contenido
Curso de Desarrollo de
logo
Aplicaciones Web
HTML CSS Javascript SEO Java Información
Ejemplo 1
Ejemplo 2
Contenido Ejemplo 3
principal ---
Pie
La página web
Diseño de página web - info
Curso de Desarrollo de
logo
Aplicaciones Web
HTML CSS Javascript SEO Java Información
Nombre Apellidos email Nacimiento
Nos conociste: Conocimientos: Comentarios:
Tv Ninguno
Radio HTML/HTML5
Prensa CSS/CSS3
Escuela Javascript
Oficina empleo Node JS
radio select
Pie
06
Buenas Prácticas
Buenas Prácticas
Objetivos
Facilitar la legibilidad del código y su modificación
Reducir al máximo la posibilidad de error
Asegurar el funcionamiento en todos los navegadores
Buenas Prácticas
Define todas las etiquetas en minúsculas
<DIV>
<P>¡No hagas esto!</P>
</DIV>
<div>
<p>¡Haz esto en su lugar!</p>
</div>
Buenas Prácticas
Cierra siempre las etiquetas y no utilices barras inclinadas en los
elementos de autocierre
<ul>
<li>¡No hagas
<li>esto!<img src= “incorrecto.png” />
</ul>
<ul>
<li>¡Esto es lo que tienes </li>
<li>que hacer!<img src= “correcto.png”></li>
</ul>
Buenas Prácticas
Utiliza comillas dobles para todos los atributos
<div id= ‘incorrecto’>
<p class= ‘a_si_no’>¡No hagas esto!</p>
</div>
<div id= “correcto”>
<p class= “a_si_si”>¡Haz esto!</p>
</div>
Buenas Prácticas
Los atributos booleanos (disabled, selected, checked…) no
necesitan un valor. Basta con que estén
<p hidden> ¡Párrafo oculto!</p>
<form>
<input type= “text” name=”deshabilitado” disabled>
</form>
Buenas Prácticas
Evita utilizar CSS en línea, llama a archivos externos.
<!doctype html>
<html>
<head>
…
<link rel= “stylesheet” href= “estilo.css”>
…
</head>
<body>
<h1>Esto es un encabezado </h1>
<p>Y esto es un párrafo</p>
</body>
</html>
Buenas Prácticas
Carga el javascript al final de la página antes de </body>
<!doctype html>
<html>
<head>
…
<link rel= “stylesheet” href= “estilo.css”>
…
</head>
<body>
…
<script src=“miscript.js”></script>
</body>
</html>
Buenas Prácticas
Utiliza “alt” en las imágenes, ayuda a los lectores de pantalla y
mejora la indexación
<img src= “logo.png” alt= “Mi empresa”>
Buenas Prácticas
Utiliza listas para los menús de navegación
<nav>
<ul>
<li>Inicio</li>
<li>Sección 1</li>
<li>Sección 2</li>
</ul>
</nav>
Buenas Prácticas
No abuses del <div>, emplea los elementos estructurales
<div id= “header”> <header>
¡No debes ¡Esto es
</div> </header>
<div id= “main”> <section id= “main”>
hacer cosas lo que debes
</div> </section>
<div id= “footer”> <footer>
como esta! de hacer!
</div> </footer>
...
