Introducción HTML
•
0 recomendaciones•1,434 vistas
Este documento proporciona información sobre tecnologías web de cliente como HTML. Explica conceptos básicos de HTML como su estructura, elementos y atributos. También cubre temas como formularios, enlaces, imágenes y validación.
Recomendados
Más contenido relacionado
La actualidad más candente
La actualidad más candente (20)
Destacado
Destacado (20)
Similar a Introducción HTML
Similar a Introducción HTML (20)
Más de Carlos A. Iglesias
Más de Carlos A. Iglesias (20)
Último
Último (20)
Introducción HTML
- 1. Tecnologías Web de Cliente HTML
- 2. Profesores Carlos A. Iglesias Mercedes Garijo Puedes contactarme en cif@gsi.dit.upm.es - Despacho C-211 2
- 3. 1. Principios Para qué vale 3
- 4. Contenido de la página web Lenguaje de marcas para definir documentos definiendo la semántica de los elementos (párrafos, imágenes, tablas, titulares, listas, …) 4
- 5. 5
- 7. Arquitectura Servidor Web Navegador Web Servidor Web HTTP request HTTP response 7
- 8. Prueba 8 ▣ Instala plugin de chrome Advanced REST client ▣ https://chrome.google. com/webstore/detail/advanced-rest- client/hgmloofddffdnphfgcellkdfbfbjeloo
- 9. Cosas que hay que saber de HTML Siglas HyperText Markup Language Navegador web El navegador web procesa el código HTML y visualiza la página web Extensión Los ficheros html terminan en .html (o htm) Marcas Anotación semántica del papel de un elemento de la página. Ej. <title> Título </title>. Editor Es un fichero de texto plano. Lo editamos con un editor de texto (notepad, gedit, …) o un IDE (Integrated Development Environment) Referencias Un fichero HTML referencia otros ficheros c(imágenes, estilos CSS, HTML, JS, …) con una URL que residen en el mismo servidor o en un servidor remoto 9
- 11. Anatomía página HTML <!DOCTYPE html> <html> <head> <title>Título</title> <meta charset="UTF-8"> </head> <body> <p>¡Hola!</p> </body> </html> Título ¡Hola! 11
- 12. Estructura página HTML Anatomía HTML <html> <head> <body> 12
- 13. Página HTML ▣ Preámbulo: <!DOCTYPE html> ▣ Resto: elementos HTML □ Delimitados por etiquetas <e></e> 13
- 14. Elementos HTML ▣ Elemento HTML con contenido □ <etiqueta>Contenido</etiqueta> □ Ej. <h1>Título</h1> ▣ Elemento HTML vacío □ <etiqueta> □ Ej. <br> (anteriormente a HTML5 era <br/>) ▣ Anidar elementos □ <li><b>....</b></li> □ <li><b>...</li></b> ▣ Atributo HTML (comillas opcionales) □ <etiq atributo1 = "v1" a2="v2"> contenido</etiq> □ Si el atributo es binario, simplemente se pone el nombre Ej. <etiq controls>contenido</etiq> ▣ Las etiquetas van en minúsculas 14
- 15. Ejemplo <!DOCTYPE html> <html> <head> <title>Ejemplo</title> <meta charset="UTF-8"> </head> <body> <!-- Prueba etiquetas --> <h1>Titular 1</h1> <h2>Titular 2</h2> <p>Un párrafo</p> </body> </html> Ejemplo Titular 1 Titular 2 Un párrafo 15
- 16. 16 Ejemplo Árbol DOM HTML html head title meta body h1 h2comment p charsetEjemplo Prueba etiquetas Titular 1 Titular 2 Un párrafo DOM: Document Object Model Nodo element (root) Nodo element Nodo text document UTF-8 Nodo attribute Nodo comment
- 17. Entidades de caracter 17 ▣ Problema quieres escribir <p> ▣ Solución: entidad de carácter □ < → < □ > → > <!DOCTYPE html> <html lang="es"> <head> <title>Ejemplo</title> <meta charset="UTF-8"> </head> <body> <p><p></p> </body> </html> Ejemplo <p>
- 18. Elemento root: <html> 18 ▣ Recomendación: especificar el idioma de la página en el atributo lang ▣ Ej. <!DOCTYPE html> <html lang="es"> <head> <title>Ejemplo</title> <meta charset="UTF-8"> </head> <body> <p>Un párrafo</p> </body> </html> Ejemplo Un párrafo
- 19. Elemento <head> ¿Qué contiene? ▣ Información ‘meta’ sobre el documento ▣ Título del documento ▣ Enlazar documentos para visualizar CSS y JS ▣ Información meta que indexan los buscadores Etiquetas de <head> ▣ <title> obligatoria ▣ <meta> □ Valores para atributos □ charset, viewport, description, author, ... ▣ Enlazar ficheros □ <link> → CSS, icono □ <script> → JS ▣ Incluir estilo css □ <style> → CSS empotrado 19
- 20. Ejemplo <head> ▣ Recomendación: □ usar siempre title y meta charset □ meta description y keywords mejoran SEO □ meta viewport facilita que se vea bien en móviles 20 <!DOCTYPE html> <html lang="es"> <head> <title>Ejemplo</title> <meta charset="UTF-8"> <meta name=description content="Tutorial de head"> <meta name=keywords content="width=device-width, initial-scale=1" > </head> <body> <p>Un párrafo</p> </body> </html>
- 21. Viewport 21 <meta name="viewport" content=" width = [pixels | device-width ], height = [pixels | device-height], initial-scale = float, minimum-scale = float, maximum-scale = float, user-scalable = [yes | no] "> Fuente: https://developer.apple. com/library/safari/documentation/AppleApplications/Reference/SafariWebCon tent/UsingtheViewport/UsingtheViewport.html
- 23. Favicon ▣ Icono en la pestaña del navegador ▣ Puedes crear la imagen con servicios como http://www.favicon.cc/ 23 <!DOCTYPE html> <html lang="es"> <head> <title>Ejemplo Favicon</title> <meta charset="UTF-8"> <link rel="icon" href="upm.ico"> </head> <body> <p>Mira el icono en la pestaña</p> </body> </html>
- 24. Elemento <body> ▣ secciones □ h1, h2, h3, …, h6 □ article, section, nav, aside, header, footer, address ▣ agrupar contenido □ p, hr, ul, ol, li, figure, figcaption, div, main ▣ formato texto □ a, em, strong, span, br, sub, sup, i, b, u ▣ integrar contenido □ img, iframe, video, audio ▣ enlaces □ a href, link ▣ tablas □ table, tr, td, hr ▣ formularios □ form, input, label, button, select, optgroup, fieldset, legend, 24
- 25. Elementos de flujo ▣ Párrafo <p></p> ▣ Nueva línea <br> ▣ Línea horizontal <hr> ▣ Titulares □ <h1></h1> □ <h2></h2> □ … □ <h6></h6> ▣ Comentarios □ <!-- … --> 25
- 26. Ejemplo 26 <!DOCTYPE html> <html> <head>...</head> <body> <!-- Prueba etiquetas --> <h1>Titular 1</h1> <h2>Titular 2</h2> <p>Uno y <br> dos </p> <hr> <p>Otro párrafo</p> </body> </html> Ejemplo Titular 1 Titular 2 Uno y dos Otro párrafo
- 27. Elementos para listas ▣ Listas numeradas (ordered list, list item): ol y li ▣ Listas no numeradas (unordered lists): ul y li 27 ... <body> <ol> <li>uno y</li> <li>dos</li> </ol> <ul> <li>tres</li> <li>cuatro</li> </ul> </body> ... Ejemplo 1. uno y 2. dos ● tres y ● cuatro
- 28. Elementos para formato de texto 28 Etiqueta Descripción Ejemplo Resultado <b> Texto en negrita (bold) <b>Texto</b> Texto <strong> Texto importante <strong>Texto</strong> Texto <i> Texto en cursiva (italic) <i>Texto</i> Texto <em> Texto enfatizado (emphasized) <em>Texto</em> Texto <small> Letra pequeña <small>Texto</small> Texto <sub> Subíndice H<sub>2</sub>O H2 O <sup> Superíndice mc<sup>2</sup> mc2 <ins> Insertado <ins>Texto</ins> Texto <del> Borrado (deleted) <del>Texto</del> Texto <mark> Marcado <mark>Texto</mark> Texto
- 29. Ejercicio 29 Escribe el código HTML (entero)
- 30. Ejercicio 30 Escribe el código HTML (entero)
- 31. Enlace a una página externa ▣ <a href="URL">Enlace</a> ▣ Ejemplo 31 <a href="http://www.google.es">Ir a Google </a> Ejemplo Ir a Google Ejemplo
- 32. Enlace a una página interna ▣ Ancla <a id="ancla">Texto</a> ▣ <a href="#ancla">Enlace misma página</a> ▣ <a href="http://pagina.html#ancla">Enlace otra página</a> ▣ Ejemplo 32 ... <ul> <li>Ir a <a href="#ref">Referencias</a></li> </ul> ... <h2><a id="ref">Referencias</a></h2> ...
- 33. Imágenes ▣ <img src="url imagen" alt="texto alternativo"> ▣ Podemos usar atributos width / height ▣ La URL puede ser absoluta o relativa al fichero html (ej. src="pepe.jpg", src="../pepe. jpg") 33 <img src="http://www.w3. org/Icons/w3c_home.gif" alt="" W3c logo>c Ejemplo
- 34. Vídeos <video width="400" controls> <source src="mov_bbb.mp4" type="video/mp4"> <source src="mov_bbb.ogg" type="video/ogg"> Tu navegador no soporta vídeos HTML5 </video> 34 Fuente: http://www.w3schools.com/html/tryit.asp?filename=tryhtml5_video Video cortesía de Big Buck Bunny
- 35. Sonido <audio controls> <source src="horse.ogg" type="audio/ogg"> <source src="horse.mp3" type="audio/mpeg"> Tu navegador no soporta el elemento HTML5 audio </audio> 35
- 38. 3. Flujo de elementos Cómo agrupar bloques de elementos en HTML 38
- 39. Elementos de bloque y en línea ▣ Elementos de bloque: tienen salto de línea y la caja ocupa todo el espacio □ div, p, ul, ol, li, br, h1-h6, body, table, blockquote, section, aside, header, footer, article, nav ▣ Elementos de línea: no tienen salto de línea □ span, a, b, i, img, label 39
- 40. Elementos div y span para flujo ▣ div: contenedor de otros elementos HTML □ normalmente usado para cambiar el estilo □ solemos usar dos atributos de div ■ id: identifica un div en una página (debe ser único por página) ■ class: identifica un tipo de div (puede haber varios) ▣ span: cambia el estilo de un contenido sin crear una nueva línea. Suele combinarse con class. 40
- 41. Ejemplo div / span 41 Ejemplo Rey Alarico I 395-410 Rey Ataulfo 410-415
- 43. Secciones 43 ▣ header - cabecera ▣ nav - navegación ▣ main - el contenido ppal de la página (sólo 1 por página) ▣ section - conj. de contenidos relacionados temáticamente ▣ article - un contenido ▣ aside - contenido colateral (anuncio, cita, …) ▣ footer - pié
- 45. Compatibilidad 45 En HTML5 podemos usar ambos estilos. La etiqueta div sigue siendo útil como una etiqueta genérica de flujo
- 46. Ejercicio 46 Programa una página HTML con tu CV que contenga las secciones: ▣ Datos personales □ Incluye una foto tuya ▣ Datos académicos ▣ Experiencia profesional (en su caso) □ Lista ordenada de forma cronológica inversa ▣ Conocimientos técnicos □ Incluye listas de lenguajes de programación, sistemas operativos y herramientas ▣ Idiomas □ Incluye una tabla con idiomas y nivel ▣ Referencias □ Al menos 3 enlaces de otros sitios web
- 47. 4. Formularios Cómo crear formularios para recoger datos del usuario 47
- 48. Formulario 48 Navegador Web Servidor Web HTTP request HTTP response SUBMIT CAMPO CAMPO CAMPO Valida la petición, la procesa, y genera la respuesta
- 49. Validación cliente y validación servidor 49 Validación cliente ▣ La realiza el navegador para “agilizar” ▣ Basado en las etiquetas HTML o mediante JavaScript Validación servidor ▣ El servidor comprueba que el formulario está autorizado ▣ SIEMPRE es necesaria ▣ Ej. realizar una compra
- 51. 51 Recuerda Incluye form action, name en inputs y botón submit
- 52. <form> 52 ▣ action: página del servidor que procesa la petición ▣ method: GET o POST <form action="procesa.php" method="get"> ... </form>
- 55. GET vs POST 55 GET ▣ Parámetros se ven en el navegador ▣ Permite favoritos ▣ Tamaño limitado (2ks) ▣ Sólo ASCII ▣ No podemos enviar ficheros POST ▣ No vemos parámetros ▣ No permite favoritos ▣ Límite mayor (8Ms) ▣ Podemos enviar binario y ficheros
- 56. URL encoding 56 Las URLs sólo pueden tener caracteres ASCII Se convierten los otros caracteres mediante un % y dos dígitos hexadecimales
- 57. <label> ▣ Etiqueta de un elemento input ▣ Atributo opcional for que indica el id del input 57 <form> <label>Nombre <input> </label> ... </form> <form> <label for="name">Nombre <input id="name"> </label> ... </form>
- 58. Atributos básicos de input ▣ type: tipo de entrada (ver a continuación) ▣ name: nombre de la variable para el servidor ▣ id: nombre del elemento input para CSS/JS ▣ value: valor por defecto 58 <form> <label for="phone">Teléfono <input type="tel" id="phone" name="phone" value="333"> </label> ... </form>
- 59. Otros atributos de input ▣ maxlength y minlength: validar una longitud ▣ size: tamaño de la caja ▣ readonly ▣ required ▣ multiple: podemos seleccionar varios valores ▣ pattern: expresión regular para validar entrada ▣ min y max: valor min y max de un valor numérico o fecha ▣ step: incremento en entrada numérica ▣ list: lista de valores sugeridos para autocompletar ▣ placeholder: ayuda para rellenar la entrada 59
- 60. <input type=""> ▣ type="text" / type="search" ▣ type="number" ▣ type="tel" ▣ type="url" ▣ type="email" ▣ type="password" ▣ type="range" - número con slider ▣ type="color" - envía el código del color HTML ▣ type="file" - necesita tecnología de servidor ▣ type="submit" ▣ type="reset" ▣ type="date" type="time" type="month" 60
- 61. Ejemplo input 61
- 62. Código color HTML El código de color HTML (ej. #FFFFFF) es el código hexadecimal de las componentes RGB 62
- 63. Legend, radio button, desplegable 63
- 64. Ejemplo Formulario Ejemplo fieldset, desplegable y radio button 64
- 65. 65 Checkbox
- 67. Ej. input tiempo Uso de <input type=””> en formularios para introducir tiempo. 67
- 68. Textarea 68
- 69. Valores por defecto 69 Válido en input de tipo text, tel, url, email, color, number, los de fechas, etc. Ver todo en http://nativeformelements.com/
- 71. 71 HTML nos permite crear páginas web y definir la organización de los elementos, pero necesitamos otras tecnologías (CSS, JS) para que las páginas tengan un aspecto e interacción adecuadas.
- 72. Conclusiones 72
- 73. ‘’ 73 “No es importante en absoluto hacerlo bien la primera vez, lo que es vital es hacerlo bien la última vez” Andrew Hunt y David Thomas
- 75. Referencias ▣ Especificación W3C □ http://www.w3.org/TR/html5/ ▣ Tutoriales HTML □ http://www.w3schools.com/html □ http://www.html-5-tutorial.com/ 75
- 76. Créditos Gracias a todos los que han publicado estos recursos de forma gratuita: ▣ Minicons de Webalys ▣ Plantilla de la presentación de SlidesCarnival ▣ Fotos de Unsplash y Wix 76