HTML - Introducción - Universidad de Zaragoza
Anuncio
Sistemas de Información 12/13 La Web: HTML Departamento Informática e Ingeniería de Sistemas Universidad de Zaragoza Raquel Trillo Lado ([email protected]) " Guión El lenguaje HTML Introducción Estructura Principales etiquetas Validadores de código HTML El protocolo http Formularios en HTML Bibliografía Sistemas de Información Raquel Trillo Lado El lenguaje HTML: Introducción HTML: Hyper Text Markup Language Lenguaje basado en etiquetas Las etiquetas determinan los elementos de los documentos html y se escriben entre los símbolos <>: Ejemplos: <html> … </html> <p> …. </p> <etiqueta> contenido </etiqueta> o <etiqueta/> No case-sensitive. Recomendación minúsculas Atributos de etiquetas: <etiqueta atributo1=“valorAtributo1” /> Posible también el uso de comilla simple Sistemas de Información Raquel Trillo Lado El lenguaje HTML: Introducción Diferentes versiones a lo largo de la hª: Versión Año HTML 1991 HTML + 1993 HTML 2.0 1995 HTML 3.2 1997 HTML 4.01 1999 XHTML 1.0 2000 HTML 5 2012 Sistemas de Información Raquel Trillo Lado El lenguaje HTML: Introducción HTML 5: Probable standard del W3C (World Wide Web Consortium) Apoyo Google, Firefox, Apple, … Nuevas características destinadas a la creación de aplicaciones Web y no sólo a la creación de documentos HTML Sistemas de Información Raquel Trillo Lado El lenguaje HTML: Introducción Documento HTML: Fichero de texto escrito en lenguaje HTML Los navegadores Web: Interpretan documentos HTML y los muestran (no muestran las etiquetas) Firefox, IE, Chrome, … Sistemas de Información Raquel Trillo Lado El lenguaje HTML: Introducción Sistemas de Información Raquel Trillo Lado El lenguaje HTML: Introducción Editores HTML: Un simple editor de textos: NotePath, gedit, nedit, … Microsoft FrontPage, Adobe DreamWeaver, … Sistemas de Información Raquel Trillo Lado El lenguaje HTML: Estructura Estructura de un documento HTML: Un navegador debe conocer la versión de HTML que se está usando: Declaración <!DOCTYPE> Ejemplos: <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd"> <!DOCTYPE html> <!DOCTYPE> no es una etiqueta HTML sino una instrucción que para los navegadores web Sistemas de Información Raquel Trillo Lado El lenguaje HTML: Estructura Cabecera: título, estilo de presentación y meta-información Cuerpo del documento: contenido Comentarios: <!- - --> Ejemplo: <html> <!- - Esto es un comentario --> <head>……. </head> <body> …. </body> </html> Sistemas de Información Raquel Trillo Lado El lenguaje HTML: Etiquetas Etiquetas del encabezado: <title> Titulo de la página web </title>. Obligatorio <style> Definiciones del estilo de la página</style> <script> Definiciones de javascript para dar dinamismo a la página </script> <link rel=“StyleSheet” href="estilo.css” type="text/css”/> <meta name=“elemento a describir” content=“descripción”/>. Author, description , keywords <meta charset=“UTF-8”/> (ASCII, iso-8859-1) Sistemas de Información Raquel Trillo Lado El lenguaje HTML: Etiquetas Etiquetas del encabezado. Ejemplo: <html lang=“es”> <head> <title> Mi primera pag. Web</title> <meta name=“description” content=“uno cual.”> </head> <body>…</body> </html> Sistemas de Información Raquel Trillo Lado El lenguaje HTML: Etiquetas Texto: Párrafos: <p> Esto es un párrafo </p> Encabecezados: • 6 niveles de encabezamiento • <h1> </h1>, …<h6> </h6> Cambio de línea: <br/> Resaltar texto: <strong> </strong> <em> </em> Ejemplo: <html lang=“es”>……. <body> <h1> Mi primera pág. HTML </h1> <p> ¡Hola Mundo! </p> </body> </html> Sistemas de Información (<b> e <i>) Raquel Trillo Lado El lenguaje HTML: Etiquetas Imágenes: <img src=“ruta imagen” title=“Un titulo descriptivo” /> Ejemplo: <html lang=“es”>……. <body> <h1> Mi segunda pág. HTML </h1> <img src=“./edu.jpg” title=“Edu”/> </body> </html> Sistemas de Información Raquel Trillo Lado El lenguaje HTML: Etiquetas Enlaces o links: <a href=“dirección del recurso a enlazar”> contenido que genera la petición del recurso enlazado al hacer click </a> Ejemplo: <html lang=“es”>……. <body> <h1> Mi tercera pág. HTML </h1> <p> Apuntes de la asignatura disponible <a href=“http://bb.unizar.es” > aquí </a> </p> </body> </html> Sistemas de Información Raquel Trillo Lado El lenguaje HTML: Etiquetas Tablas: <table> contenido de la tabla </table> Definir encabezado: <th> </th> Definir filas: <tr> contenido de la fila</tr> Definir columnas: <td> contenido de la columna </td> Ejemplo: <html lang=“es”>…….<body> <table> <tr> <th>Alumno</th> <th>Nota</th> </tr> <tr> <td> Pepe Camino </td> <td> 9</td></tr> <tr> <td> Ana Yus</td><td> 8 </td></tr> </table> </body></html> Sistemas de Información Raquel Trillo Lado El lenguaje HTML: Etiquetas Listas: No ordenadas: <ul> <li>item 1</li> <li>item N</li> </ul> Ordenadas: <ol> <li>item 1</li> <li>item N</li> </ol> De definiciones: <dl> <dt>término1</dt> <dd>definición término 1</dd> <dt>términoN</dt> <dd>definición término N</dd> </dl> Sistemas de Información Raquel Trillo Lado El lenguaje HTML: Validadores Validador de código del W3C: Markup Validation Service http://validator.w3.org/ No requiere que el documento a validar esté accesible en un servidor web Validator.nu: Específico para HTML 5 http://html5.validator.nu/ No requiere que el documento a validar esté accesible en un servidor web Sistemas de Información Raquel Trillo Lado El protocolo HTTP Hypertext Transfer Protocol o HTTP: Desarrollado por el W3C en la década de los 90 para comunicar clientes y servidores Web. Esquema: petición de recurso – respuesta Los recursos se identifican mediante URL (Uniform Resource Identifier) Protocolo sin estado: No guarda información sobre las peticiones anteriores Fundamentalmente dos tipos de peticiones: GET: Los parámetros se codifican en la URL POST: Los parámetros se codifican en el cuerpo del mensaje Sistemas de Información Raquel Trillo Lado Formularios en HTML Formularios: Capturan información en el cliente y se la pasan al servidor <form name="input" action="http://procesarForm.do” method=“get”> <!- - Campos capturar entrada cliente - - > <!- - Fundamentalmente input - - > </form> Sistemas de Información Raquel Trillo Lado Formularios en HTML Elementos de captura de información en formularios. Etiqueta <input>: Cajas de texto: <input type="text" name="nombre" /> Ejemplo: <form> Nombre: <input type="text" name="nombre"/> Apellidos: <input type="text" name="apel"/> </form> Sistemas de Información Raquel Trillo Lado Formularios en HTML Elementos de captura de información en formularios. Etiqueta <input>: Cajas de texto para claves: <input type="password" name="clave" /> Radio Buttons para claves: <input type="radio" name="sex" value=“H”/> <input type="radio" name="sex" value=“M”/> Sistemas de Información Raquel Trillo Lado Formularios en HTML Elementos de captura de información en formularios. Etiqueta <input>: CheckBoxes: <input type="checkbox" name="vehiculo" value=“coche”/> <input type="checkbox" name="vehiculo" value=“bici”/> <input type="checkbox" name="vehiculo" value=“moto”/> Sistemas de Información Raquel Trillo Lado Formularios en HTML Elementos de captura de información en formularios. Etiqueta <input>: Botón de envío: <input type="submit"/> Botón de reseteo: <input type="reset"/> Otros botones: <input type="button" value=“un valor”/> Campos ocultos: <input type=”hidden” value=“un valor”/> Sistemas de Información Raquel Trillo Lado Formularios en HTML Elementos de captura de información en formularios. Etiqueta <textarea>: Ejemplo: <textarea rows="10" cols="30"> Valor por defecto que se muestra al inicializar el formulario. </textarea> Sistemas de Información Raquel Trillo Lado Formularios en HTML Elementos de captura de información en formularios. Listas desplegables. Etiquetas <select> y <option> : Ejemplo: <select name=”Marca del vehículo"> <option value="volvo">Volvo</option> <option value="saab">Saab</option> <option value="fiat">Fiat</option> <option value="audi">Audi</option> </select> Sistemas de Información Raquel Trillo Lado Algunas notas más Los documentos HTML servidor por un servidor Web se interpretan en el cliente que los requiere Las hojas de estilo CSS (Cascading Style Sheets) definen el formato de presentación de documentos HTML y también se interpretan en el cliente Los scripts JavaScript se emplean para introducir comportamiento dinámico en los documentos HTML y también se interpretan en el cliente Sedes del W3C: http://www.w3.org/2006/01/ WorldMapW3C Sistemas de Información Raquel Trillo Lado Bibliografía HTML: http://www.w3schools.com/html/default.asp Luc Van Lancker “HTML 5 y CSS3 Domine los estándares de las aplicaciones Web”, eni ediciones Transparencias en la plataforma Blackboard 9.1 del Anillo Digital Docente (ADD): http://bb.unizar.es Sistemas de Información Raquel Trillo Lado Fallo en el ejemplo de clase: Descargar Pruebas.zip para poder ver los ejemplos de prueba. Al usar como editor TextEdit y guardar el fichero que estába creando como fichero html, el editor automáticamente reescribía el contenido del fichero para que se visualizase tal y como lo que habíamos escrito (abrir en un editor de textos y en un navegador web prueba.html para comprobarlo) Solución: guardar el fichero como texto con la extensión html. De este modo no transformará el contenido que hemos tecleado y podremos hacer las pruebas (abrir en un editor de textos y en un navegador web prueba1.html para comprobarlo). Sistemas de Información Raquel Trillo Lado
