Construye pginas web Emplea HTML para construir paginas
Construye páginas web Emplea HTML para construir paginas web • Elaborando una página informativa • Planteando, Diseñando y construyendo un sitio web Utiliza CSS para dar formato a paginas web • Creando y aplicando un tema mediante hojas de estilo • Creando una pagina web Responsiva
§ HTML, siglas en inglés de Hyper. Text Markup Language (‘lenguaje de marcas de hipertexto’), § Es un lenguaje de marcado para la elaboración de páginas web. § Es un estándar que sirve de referencia del software que conecta con la elaboración de páginas web en sus diferentes versiones, define una estructura básica y un código (denominado código HTML) para la definición de contenido de una página web, como texto, imágenes, videos, juegos, entre otros. ¿Qué es HTML? § Es un estándar a cargo del World Wide Web Consortium (W 3 C) o Consorcio WWW, organización dedicada a la estandarización de casi todas las tecnologías ligadas a la web, sobre todo en lo referente a su escritura e interpretación. § HTML se considera el lenguaje web más importante siendo su invención crucial en la aparición, desarrollo y expansión de la World Wide Web (WWW). § Es el estándar que se ha impuesto en la visualización de páginas web y es el que todos los navegadores actuales han adoptado.
Hyper. Text Markup Language ¿Qué es HTML?
§ Crear un Glosario de términos sobre HTML de toda la presentación. La fecha limite la dejamos hasta el 3 de abril Actividad 1 Realizar en la libreta, en digital, o con cualquier software que consideren apropiado. Deberán enviar el documento o la(s) imagen(es). Deberán incluir su nombre completo § ¿Qué es un glosario? § La Real Academia Española define glosario como "catálogo de palabras de una misma disciplina, de un mismo campo de estudio, etc. , definidas o comentadas“. § Debido a que un glosario y un diccionario se caracterizan por ser una lista de palabras que vienen con su significado al lado, muchas veces se piensa que son lo mismo. Sin embargo, no es así: Un diccionario explica el significado de todos los términos de determinado idioma. § Un glosario explica el significado de términos seleccionados de determinado tema, asunto o área de conocimiento. § Por lo tanto, la extensión de un glosario es mucho más reducida y específica, mientras que la de un diccionario es mucho más amplia.
§ El HTML fue desarrollado originalmente por Tim Bernes-Lee pero debido al rápido crecimiento de la web, surgió la necesidad de crear un estándar para que tanto los programadores como los navegadores pudieran basarse en unas mismas normas para escribir HTML. § Cada versión de HTML establece unas normas respecto a cuáles son las etiquetas válidas y cómo se deben escribir. § El primero en salir fue el HTML 1, sin embargo no fue considerado un estándar, § HTML 2: Presentado en el año de 1995, el HTML 2 es considerado la primera Versiones versión del HTML, el cual no soportaba tablas y donde la declaración explícita de los elementos body, html y head es opcional. § HTML 3. 2: Esta versión se lanzó en el año de 1997 gracias al W 3 C. El cual incorporó los últimos avances de las páginas web como applets de Java y texto que fluye alrededor de las imágenes. § HTML 4. 0: Lanzada en 1998. Entre sus novedades más destacadas se encuentran las hojas de estilos CSS, la posibilidad de incluir pequeños programas o scripts en las páginas web, mejora de la accesibilidad de las páginas diseñadas, tablas complejas y mejoras en los formularios. § HTML 5: Octubre 2014. establece una serie de nuevos elementos y atributos que reflejan el uso típico de los sitios web modernos. Algunos de ellos son técnicamente similares a las etiquetas <div> y <span>, pero tienen un significado semántico, como por ejemplo <nav> (bloque de navegación del sitio web) y <footer>.
§ Desarrollado por Tim Bernes-Lee § Cada versión de HTML establece unas normas respecto a cuáles son las etiquetas válidas y cómo se deben escribir. § Html 1. 0 no se considero un estándar Versiones § Html 2. 0 considerado el primer estándar, no soporta tablas. § Html 3. 0 1997, applets Java § Html 4. 0 1998, CSS y Script § Html 5. 0 nuevos atributos, mas modernos, 2014
Actividad 2 Realizar en la libreta, en digital, o con cualquier software que consideren apropiado. Deberán enviar el documento o la(s) imagen(es). Deberá incluir su nombre completo § Crear una tabla de las versiones de HTML. § La fecha limite de entrega establecida es el 25 de marzo § ¿Qué llevará la tabla? § Versión § Año de creación § Característica principal o que la diferencia de las otras
Estructura Global
§ Esta línea debe ser la primera línea del archivo, sin espacios o líneas que la precedan. § La etiqueta DOCTYPE es en realidad una declaración de tipo de documento. § El navegador va a tener en cuenta esta etiqueta para <!DOCTYPE> ajustar la página a las normas del tipo de lenguaje indicado en la etiqueta. § La no inclusión de esta etiqueta puede hacer que las páginas se vean de forma diferente en los distintos navegadores, ya que éstos no se ciñen a un tipo de lenguaje, y pueden interpretar las etiquetas de modo distinto.
Estructura Global
§ Luego de declarar el tipo de documento, debemos comenzar a construir la estructura HTML. § El elemento raíz de una página web es el elemento <html>, que abarca todo el documento excepto la declaración de tipo de documento inicial. § El atributo lang en la etiqueta de apertura <html> es el único atributo que necesitamos especificar en HTML 5. § Este atributo define el idioma del contenido del documento que estamos creando, en este caso es por español.
Estructura Global
§ El código HTML insertado entre las etiquetas <html> tiene que ser dividido entre dos secciones principales. § Al igual que en versiones previas de HTML, la primera sección es la cabecera y la segunda el cuerpo. § El siguiente paso, por lo tanto, será crear estas dos <head> secciones en el código usando los elementos <head> y <body> ya conocidos. § El elemento <head> va primero, por supuesto, y al igual que el resto de los elementos estructurales tiene una etiqueta de apertura y una de cierre. § El elemento <head> contiene información de carácter general (metadatos) que no se muestra en la ventana del navegador. Esta información se recoge en los elementos <title>, <link>, <meta> y <style>.
§ El elemento <title> contiene el título del documento. § Es un elemento obligatorio que debe contener únicamente texto. § Normalmente, los navegadores muestran ese texto en la pestaña del navegador. <title> § Como las pestañas son pequeñas, se suele mostrar solamente el principio del texto. § Situando el ratón sobre la pestaña se suele mostrar un cuadro de texto flotante con el título completo. § Ejemplo: § <title>Título de la página</title>
§ Los elementos <link> enlazan a otros documentos para diferentes fines. § El uso más habitual es para enlazar a hojas de estilo, aunque puede tener muchos usos. § Ejemplo de enlace <link> a una hoja de estilo: <link> § <link rel="stylesheet" href="estilo. css"> § Este es un ejemplo de enlace <link> a un favicon: § <link rel="icon" href="favicon. ico“ type=“image/png”/> § En este ejemplo en particular ponemos un icono en la pagina, es el que muestra la pestaña de nuestro navegador. Lo más conservador es que el icono tenga unas dimensiones de 16 x 16 píxeles
§ Los metadatos son datos (información) sobre los datos. § La etiqueta <meta> proporciona metadatos sobre el documento HTML. § Los metadatos no se mostrará en la página, pero serán aptos para su procesamiento. § La etiqueta meta se utiliza normalmente para especificar descripción de páginas, palabras clave, autor del documento, modificada por última vez, y otros metadatos. § Ejemplo 1 - Definición de palabras clave para los motores de búsqueda: § <meta name="keywords" content="HTML, CSS, XML, XHTML, Java. Script"> § Ejemplo 2 - Definir una descripción de su página web: <meta> § <meta name="description" content="Free Web tutorials on HTML and CSS"> § Ejemplo 3 - Definir el autor de una página: § <meta name="author" content="John Doe"> § Ejemplo 4 - Actualizar el documento cada 30 segundos: § <meta http-equiv="refresh" content="30"> § Ejemplo 5 - Configuración de la ventana para que su página web se ve bien en todos los dispositivos: § <meta name="viewport" content="width=device-width, initial-scale=1. 0">
<meta> atributos Attribute Value Description charset character_set Especifica la codificación de caracteres para el documento HTML content text Da el valor asociado con el atributo http-equiv o nombre http-equiv content-type default-style refresh Proporciona un encabezado HTTP para la información / valor del atributo de contenido name applicationname author description keywords Especifica un nombre para los metadatos. autor descripción palabras clave
§ El elemento <style> permite incluir en una página web declaraciones de estilo que se aplican al propio documento. § No se aconseja el uso de esta etiqueta dentro del HTML, <style> se recomienda utilizar siempre hojas de estilo independientes. § Ejemplo: § <style type="text/css"> § p { color: red; } § </style> § <p> Texto en rojo </p>
Estructura Global
§ La siguiente gran sección que es parte principal de la <body> organización de un documento HTML es el cuerpo. § El cuerpo representa la parte visible de todo documento y es especificado entre etiquetas <body>.
§ Crear un archivo HTML con estructura básica. § La fecha limite de entrega establecida es el 26 de marzo § ¿Qué llevará la página? Actividad 3 Realizar los archivos y guardarlos en la carpeta C: /xampp/htdocs/Modulo 1 Deberán enviar las imágenes. 1. - del código 2. - vista desde el navegador Deberán incluir su nombre completo § Versión HTML 5 § Lenguaje español § Cabecera, solo incluir: título, link y style § Cuerpo donde usemos la etiqueta <p> que nos de un texto azul
§ Crear un archivo HTML con estructura básica. § La fecha limite de entrega establecida es el 27 de marzo § ¿Qué llevará la página? Actividad 4 Realizar los archivos y guardarlos en la carpeta C: /xampp/htdocs/Modulo 1 Deberán enviar las imágenes. 1. - del código 2. - vista desde el navegador Deberán incluir su nombre completo § Sobre la practica anterior agregar la etiqueta meta § Incluir meta de: descripción, 3 palabras clave, autor, descripción y codificación de caracteres de tipo utf-8
§ En HTML las etiquetas se escriben con el siguiente formato: § <marca>contenido</marca> § La etiqueta aquí representada se llama marca y vemos que la etiqueta de comienzo y la etiqueta de cierre se distinguen en que la de cierre comienza por una barra inclinada (/). § En HTML hay muchas etiquetas emparejadas como estas: § <h 1>Introducción</h 1> § <p>Esto es un párrafo</p> Etiquetas § Pero HTML también permite tener algunas etiquetas sin emparejar. Estas etiquetas terminan con una barra inclinada: § <hr /> § <link. . . /> § Incluso hay etiquetas que no necesitan una etiqueta de cierre: § <img. . . > § <p>Esto es un párrafo pero no necesita cierre. § En HTML las etiquetas se pueden escribir en mayúsculas o minúsculas, indistintamente.
§ El bloque contenido entre una etiqueta de inicio y otra de cierre (o una etiqueta sin emparejar) lo llamaremos elemento. § Un elemento puede tener una etiqueta con atributos. § Un atributo especifica algunas características singulares de un elemento o información adicional. Atributos § Los atributos se especifican como pares atributo=”valor”, separados por espacios dentro de la etiqueta de inicio: § <etiqueta atributo=”valor”> texto </etiqueta> § En HTML no es obligatorio que el valor vaya entre comillas, pero sí recomendado. § Se usan en muchos elementos: § <a href=”http: //www. ra-ma. es/”>Editorial RA-MA</a> § <img src=”smiley. gif” alt=”Carita sonriente” />
§ Existen atributos genéricos que se pueden asociar a cualquier etiqueta y que nos serán de gran utilidad cuando estudiemos las tecnologías CSS y Java. Script: § id = “texto” § Asigna un identificador único al elemento dentro de la página. De esta forma podremos dar formato o manipular un elemento concreto de la página web. § class = “texto” Atributos genéricos § Indica que el elemento es de una clase concreta. Así varios elementos pueden ser de la misma clase y luego formatearlos o manipularlos de forma conjunta. § style = “texto” § Establece de forma directa los estilos CSS del elemento. Intentaremos evitar esto para no mezclar formato y contenido. Es su lugar, todo el estilo irá en un archivo CSS aparte. § title = “texto” § Asigna un título a un elemento. Es útil para mejorar la accesibilidad, ya que los navegadores lo muestran cuando el usuario pasa el ratón por encima del elemento.
§ <!-- texto del comentario (una o más líneas) --> Comentarios y caracteres especiales § < : < § > : > § & : § " : “ § : (espacio en blanco) § ' : ’ § – : & –
§ En la cabecera podemos indicar enlaces a otros archivos queremos que se carguen junto con la página web. § Generalmente, estos archivos serán hojas de estilo CSS y archivos Java. Script. Enlaces a otros archivos § Esto se realiza con la etiqueta <link/>: § <link rel=”stylesheet” type=”text/css” href=”/css/formato. css” /> § El atributo href es el que indica el documento que estamos cargando. § type indica el tipo de documento que es. § rel indica la relación entre ambos documentos.
§ Crear un archivo HTML con estructura básica. § La fecha limite de entrega establecida es el 31 de marzo § ¿Qué llevará la página? Actividad 5 Realizar los archivos y guardarlos en la carpeta C: /xampp/htdocs/Modulo 1 Deberán enviar las imágenes. 1. - del código 2. - vista desde el navegador Deberán incluir su nombre completo § Insertaras los 3 tipos de etiquetas y en el texto deberás incluir esta es una etiqueta “tipo 1” § Hacer uso de caracteres especiales y comentarios para explicar dentro del contenido de la pagina web un ejemplo de cada etiqueta y 3 ejemplos de etiquetas y atributos.
Organización
Organización
DISEÑO Organización EJEMPLO
USUARIO Organización PROGRAMADOR
§ Uno de los nuevos elementos incorporados en HTML 5 es <header>. § El elemento <header> no debe ser confundido con <head> usado antes para construir la cabecera del documento. <header> § Del mismo modo que <head>, la intención de <header> es proveer información introductoria (títulos, subtítulos, logos), pero difiere con respecto a <head> en su alcance. § Mientras que el elemento <head> tiene el propósito de proveer información acerca de todo el documento, <header> es usado solo para el cuerpo o secciones específicas dentro del cuerpo.
§ La <nav> define un conjunto de enlaces de navegación. § Tengamos en cuenta que no todos los enlaces de un <nav> documento deben estar dentro de un <nav> elemento. La <nav> elemento está destinado únicamente a los principales bloques de enlaces de navegación. § Navegadores, tales como lectores de pantalla para usuarios con discapacidad, pueden utilizar este elemento para determinar si se debe omitir la prestación inicial de este contenido.
§ La etiqueta <sección> define secciones de un documento, tales como capítulos, encabezados, pies de página, o cualquier otras secciones del documento. <section> § El elemento <section> se usa de forma explícita para agrupar contenido relacionado. § Considere la pregunta ¿está todo el contenido incluido relacionado entre sí? , si la respuesta es positiva entonces puede utilizar <section>.
§ Este elemento representa contenido que está relacionado con el contenido principal pero no es parte del mismo. <aside> § Define contenido que se encuentra fuera del lugar en el que está contenido (como una barra lateral), por lo que suele estar relacionado con el elemento que lo contiene.
§ La etiqueta <footer> se utiliza para representar el pie de página (en contexto de una página Web). § Se posiciona por supuesto en la parte inferior de la <footer> página, usualmente se utiliza este elemento para colocar información de derechos de autor, información de contacto o créditos. § <footer> § <p>© 2020 todo los derechos reservados</p> § </footer>
§ Crear un archivo HTML con organización de HTML 5. § La fecha limite de entrega establecida es el 1 de abril Actividad 6 Realizar los archivos y guardarlos en la carpeta C: /xampp/htdocs/Modulo 1 Deberán enviar las imágenes. 1. - del código 2. - vista desde el navegador Deberán incluir su nombre completo § ¿Qué llevará la página? § Crear un sitio con los elementos de organización de pagina web según la versión de HTML 5, el tema es libre, solo asegúrate de usar todos los módulos.
§ Las etiquetas de estructuración del texto sirven principalmente para definir los encabezados de las secciones y los párrafos. § Entre las etiquetas de bloque destacamos las siguientes: Etiquetas de estructuración del texto § Elemento <p> § Contiene el texto de un párrafo. El navegador no muestra los espacios en blanco ni los saltos de línea adicionales que escribamos dentro de un párrafo. § <p>Esto es un párrafo. Aunque escriba varios espacios y saltos de línea saldrá todo de manera compacta</p> § <p>Otro párrafo que estará separado del anterior</p> § <p>Y un tercero para terminar. </p>
§ Elementos <h 1>…<h 6> § Definen encabezados de secciones (niveles 1 a 6). Etiquetas de estructuración del texto Aunque podremos configurar cómo se visualiza cada encabezado a través de CSS, normalmente se utiliza una fuente mayor cuanto más alto sea el nivel del encabezado ( <h 1> es el de mayor nivel). § Estas etiquetas se utilizan para estructurar el documento en secciones, subsecciones, etc. Veamos un ejemplo: § <h 1>Sección 1</h 1> § <h 2>Sección 1. 1</h 2> § <p>Texto normal. </p> § <h 3>Sección 1. 1. 1</h 3> § <p>Texto normal. </p>
§ Son las que se utilizan para generalmente dentro de los párrafos. § La mayoría de estas etiquetas sirven para definir el formato del texto (como negrita, cursiva, etc. ) pero actualmente no se utilizan, ya que todos los aspectos del formato en HTML 5 se introducen mediante hojas de estilo CSS. § <br/> añade un salto de línea sin cambiar de párrafo (es decir, sin dejar Etiquetas de caracterización del texto espacio entre medias). § <em> indica que hay que enfatizar una porción de texto. La forma en que se visualiza ese énfasis dependerá de la hoja de estilo, aunque normalmente se utiliza una fuente en cursiva. § <strong> representa un mayor énfasis que <em> (aparecerá generalmente en negrita). § <code> sirve para incrustar código en medio de un párrafo § § § <p> En el <strong>lenguaje C</strong>, el punto de entrada de ejecución es la función <code>int main()</code>. Esta función puede tener <em>parámetros</em>. </p>
§ En HTML 5 se definen tres tipos de listas: § Listas numeradas: se delimitan con las etiquetas <ol> … </ol> y sirven para crear listas con números. § Listas con viñetas: se delimitan con las etiquetas <ul> … </ul>) y sirven para crear listas que utilizan símbolos o viñetas. Listas § Listas de definiciones: se delimitan con las etiquetas <dl> … </dl> y sirven para crear definiciones de términos. § Para delimitar cada uno de los elementos de las dos primeras listas se usan las etiquetas <li> … </li>. § En cambio, las definiciones usan dos tipos de etiquetas § distintas: § <dt> … </dt> delimitan los términos. § <dd> … </dd> delimitan las definiciones.
§ <p>Los contenidos de este modulo son: </p> § <ol> § § <li>Introducción al Desarrollo Web</li> <li>HTML 5</li> <li>CSS</li> <li>Java. Script</li> § </ol> § <p>Las tecnologías más utilizadas en el lado del cliente son: </p> Listas Ejemplo § <ul> § § <li>HTML 5</li> <li>CSS</li> <li>Java. Script</li> <li>JQuery</li> § </ul> § <p>Las partes de un documento html son: </p> § <dl> § § § </dl> <dt>Cabecera</dt> <dd>Incluye información sobre el documento. </dd> <dt>Cuerpo</dt> <dd>Incluye el contenido del documento</dd>
§ En una página web podemos insertar imágenes en formato fotográfico, también conocido como mapa de bits. § Existen distintos tipos de formatos para guardar las imágenes, aparte de jpg. El problema de este formato es que perderemos calidad. Por eso existen otros formatos que quizás sean más convenientes: §. png : es un formato de compresión sin pérdida que además Imagen soporta transparencias. Eso quiere decir que no perderemos calidad al comprimirlo (aunque ocupará más que un jpg) y que podemos representar iconos o imágenes con zonas trasparentes. §. jpg: es un formato de compresión con pérdida que no soporta transparencias. Se usa normalmente para fotografías. §. gif: es un formato gráfico sin pérdida, pero limitado a 256 colores. Por ello ocupa muy poco y es idóneo para imágenes básicas, como los iconos. Además soporta transparencias y animaciones.
§ Una vez que ya tenemos la imagen editada, la insertamos en nuestro HTML a través del elemento img. § Esta etiqueta tiene un atributo src donde indicamos la ruta a la imagen. Normalmente es una ruta relativa al directorio donde se encuentra el archivo HTML, pero también puede ser una URL de una en otra página web. § Supongamos que en el directorio donde estamos sirviendo los archivos <img > con Apache creamos una carpeta llamada img donde guardaremos todas las imágenes. § En ese caso, el enlace sería <img src=”img/imagen. png”/>. La otra opción es enlazar directamente con una imagen que esté en otro servidor, por ejemplo: § <img src=http: //www. ra-ma. es/css/images/logo. png alt=”Logo de RAMA”/> § En este caso hemos añadido el atributo alt, que contiene una descripción textual que se usa para los navegadores utilizados personas con deficiencias visuales que no pueden ver correctamente la imagen. En estos casos, el navegador “lee” el contenido del HTML y utiliza esta etiqueta alternativa para describir la imagen.
§ Para añadir un enlace usamos la etiqueta <a> (anchor, ancla): § <a href=”destino”>Título del enlace</a> § Donde el campo destino puede ser: § Una dirección absoluta: http: //www. ra-ma. es § Una dirección relativa: foros/general. php enlaces § Un correo electrónico: mailto: jareciog@fdi. ucm. es § Un enlace puede representarse como una imagen. Para ello incluiremos el elemento <img> dentro de la etiqueta <a>. . . </a>: § <a href=”http: //www. ra-ma. es/”> § <img src=”http: //www. ra-ma. es/css/images/logo. png” § alt=”Logo de RA-MA”/> § </a>
§ <header><a name=“arriba” />Esta es la cabecera</header> § <nav><a href=”#definiciones”>Ir a definiciones</a></nav> § <div id=”principal”> § <article> § <p>Las partes de un documento html son: </p> § <a name=”definiciones”/> § <dl> § <dt>Cabecera</dt> Enlaces internos § <dd>Incluye información sobre el documento. </dd> § <dt>Cuerpo</dt> § <dd>Incluye el contenido del documento</dd> § </dl> § </article> § <aside><img src=”lateral. png” alt=”imagen lateral”/> § </aside> § </div> § <footer><a href=”#arriba”>Volver arriba</a></footer>
§ <video>: incrusta un vídeo en la página. § <audio>: incrusta un elemento de audio. § <audio controls> § <source src=”horse. ogg” type=”audio/ogg”> § <source src=”horse. mp 3” type=”audio/mpeg”> § Tu navegador no soporta el formato de audio utilizado en esta Archivos multimedia web § </audio> § Dentro del elemento <video> o <audio> se suele incluir un texto que aparecerá en caso de no poder reproducir ninguna de las fuentes. Además de estos atributos hay tres atributos bastante interesantes: § autoplay: se comienza a ejecutar en el mismo momento en el que se carga la página. § controls: permite añadir controles de reproducción. § loop: reproduce una y otra vez el mismo audio o vídeo.
§ Ejemplos Archivo multimedia § <video src=”video. ogv” controls autoplay> § Tu navegador no implementa el elemento <code>video</code>. § </video>
§ Una tabla se define mediante el elemento <table>. Dentro del elemento § <table> se definen las filas con <tr> (table row). § Además, para cada fila, se define cada celda de la tabla con los elementos <td> (table data). § Dentro de este elemento se puede poner cualquier otro tablas elemento HTML (incluida otra tabla, aunque no se recomienda). § Normalmente necesitaremos combinar celdas (práctica llamada en inglés spanning) para hacer que varias celdas de una tabla se unan para formar una sola. § Para agrupar o combinar varias celdas de una fila se usa el atributo colspan, indicando el número de celdas que se combinarán. § Sin embargo, para agrupar columnas utilizamos el atributo rowspan, indicando también en su valor el número de celdas queremos combinar
§ <table> § <tr> § <td><strong>Curso</strong></td> § <td><strong>Horas</strong></td> § <td><strong>Horario</strong></td> § </tr> § <tr> Ejemplo de Tablas 1 § <td>CSS</td> § <td>20</td> § <td>16: 00 - 20: 00</td> § </tr> § <td>HTML</td> § <td>20</td> § <td>16: 00 - 20: 00</td> § </tr> § <td>Java. Script</td> § <td>60</td> § <td>16: 00 - 20: 00</td> § </tr> § </table>
§ <table> § <tr> § colspan=” 3” Tecnologías <td > del Front-End</td> § </tr> § <td>HTML 5</td> § <td>CSS</td> § <td>Java. Script</td> Ejemplo tablas celdas combinadas § </tr> § </table> § <tr> § <td rowspan=” 3”>Tecnologías del Front-End</td> § <td>HTML 5</td> § </tr> § <td>CSS</td> § </tr> § <td>Java. Script</td> § </tr> § </table>
§ Las tablas pueden tener un título o leyenda de la tabla, definido mediante el elemento <caption>. § Es un texto opcional que se muestra fuera de la tabla (por defecto, arriba). Se suele poner justo después de <table>. § También hay un tipo especial de fila que se crea con el elemento <thead> y que representa la fila que hace de cabecera de la tabla. Mas elementos para la tabla § En este caso, las celdas se definen con el elemento <th> § (table header). En este caso también es necesario utilizar el elemento <tbody> para separar la cabecera del cuerpo de la tabla. § Utilizar estos elementos nos permitirá dar un formato específico a la cabecera más fácilmente. § Por último, también se pueden acabar la tabla con un pie de tabla, definido con el elemento <tfoot>. § Curiosamente, este elemento tiene que definirse antes del elemento <tbody>.
§ <table> § <thead> § <tr> § <th>Curso</th> § <th>Horas</th> Elementos de tablas. ejemplo § § § § </tr> </thead> <tfoot> <tr> § <td>Total</td> § <td>180 horas</td> </tfoot> <tbody> <tr> § <td>HTML 5</td> § <td>100 horas</td> § </tr> § <td>CSS</td> § <td>80 horas</td> § </tr> § </tbody> § </table>
§ Crear un archivo HTML con organización de HTML 5, etiquetas de Actividad 7 Realizar los archivos y guardarlos en la carpeta C: /xampp/htdocs/Modulo 1 Deberán enviar las imágenes. 1. - del código 2. - vista desde el navegador Deberán incluir su nombre completo estructuración y caracterización, listas y tablas § La fecha limite de entrega establecida es el 2 de abril § ¿Qué llevará la página? § Asegúrate de organizar la pagina de acuerdo a lo trabajado en la practica anterior. § Usa todas las etiquetas antes mencionadas sobre estructuración y caracterización del texto. § Inserta los 3 tipos de lista, el tema es libre. § Inserta 3 imágenes en los 3 tipos de formatos explicados png (debe ser con fondo transparente), jpg y gif (puede ser el icono de la página). § Crea una tabla con tu nuevo horario, usa tanto atributos como puedas.
§ Los formularios son una parte fundamental de cualquier web, pues permiten enviar datos del usuario al servidor. § El ejemplo más común es el de la página de registro o login. Formularios § Un formulario se construye utilizando el elemento <form>. § Dentro de él estarán los controles que componen el formulario y de los que extraeremos la información que se enviará al servidor. § A la hora de definir un formulario debemos indicar a qué URL se envían los datos y qué método de HTTP queremos utilizar.
§ action=”URL”: contiene la URL de la aplicación del servidor que procesará los datos remitidos (por ejemplo, un script de PHP). § method: método HTTP para enviar los datos al servidor. <Form> Atributos Este cuanta con dos métodos principales: § GET: envía la información al servidor como parámetros en la URL indicada con el atributo action. Los datos enviados se pueden leer en la barra del navegador y la información enviada está limitado a 500 bytes. § POST: envía la información del formulario en la misma petición HTTP, por lo que puede enviar mayor cantidad de información. Permite enviar ficheros adjuntos y los datos enviados no se ven en la barra del navegador.
§ <form action=http: //www. miserver. es/repite. php method=”get”> § Repeticiones: <input name=”veces”/> § <input type=”submit”/> § </form> § Prueba este ejemplo en el navegador. § Crea un nuevo documento HTML vacío y copia el código dentro del elemento body. Método Get Ejemplo § El código es bastante sencillo: § primero tenemos un cuadro de texto para indicar el número de repeticiones y luego el botón Enviar. § Prueba a escribir un valor 3 en el cuadro de texto y pulsa el botón Enviar. § El navegador dará un error porque esa URL no existe, pero podrás comprobar cómo se ha generado la URL http: //www. miserver. es/repite. PHP? veces=3. § Para ello se ha concatenado la URL indicada en el atributo action con el parámetro veces indicado en el cuadro de texto <input name=”veces”/> y cuyo valor es el texto introducido. § Si hubiese más campos en el formulario, se añadirían los parámetros correspondientes en la URL concatenados con el símbolo &.
§ <form action=http: //www. miserver. es/repite. php method=”get”> § Repeticiones: <input name=”veces”/> § <input type=”submit”/> Método Post Ejemplo § </form> § Para aprovechar el ejemplo, veamos qué ocurre si utilizamos el método POST. § Cambia el atributo method del formulario a ese valor. § Cuando envíes el formulario podrás comprobar que no aparece nada en la URL.
§ Cada elemento de un formulario lleva siempre asociado un texto identificativo. § Este texto debe indicarse con la etiqueta label. § Esta etiqueta debe ir ligada al control del formulario que Etiquetas Descriptivas identifica, para que las hojas de estilo y las librerías Java. Script funcionen correctamente. § Para poder hacer esta asociación existen dos opciones. § La primera es colocar el control del formulario dentro de la etiqueta; la segunda es utilizar el atributo for, cuyo valor debe ser el identificador del control: § <label> Repeticiones: <input name=”veces”/></label> § <label for=”id_rep”/>Repeticiones</label> <input name=”veces” id=”id_rep”/>
§ Este elemento sirve para crear la gran mayoría de los controles que pueden aparecer en un formulario. § Dependiendo de la configuración de sus atributos nos permitirá obtener una gran variedad de datos del usuario, crear botones, crear casillas de selección, e incluso adjuntar archivos. § Como ya vimos en el ejemplo anterior, uno de los atributos <input> imprescindibles del elemento input es name, que indica el nombre del parámetro que se enviará junto con la petición HTTP. § Volviendo al ejemplo, si utilizamos <input name=”veces”/> entonces el parámetro que se enviaría sería: http: //www. miserver. es/repite. php? veces=3. § También podemos utilizar el atributo value para indicar un valor inicial. § Junto con el atributo name, el atributo que nos ofrece toda la funcionalidad del control <input> es el que nos permite indicar su tipo. § Dependiendo del valor del atributo type podremos crear controles para obtener distintos tipos de datos.
§ <html> § <head> § <title>Formulario</title> § <meta charset=”utf-8”/> § <style type=”text/css”> § form, fieldset{display: flex; flex-flow: row wrap; § width: 480 px; } § label{width: 200 px; } Ejemplo § input{width: 250 px; margin-bottom: 7 px; } § </style> § </head> § <body> § <form action=”http: //www. miserver. es/repite. php” § method=”get”> § <!-- añadir aquí los controles que veremos a continuación -> § </form> § </body> § </html>
§ Para crear un cuadro de texto tenemos que utilizar el atributo type = “text”. § El atributo value sirve para definir el valor por defecto, Cuadro de texto mientras que name indica el nombre del parámetro que se va a enviar al servidor. § <label>Texto: </label> § <input type=”text” name=”param. Texto” value=”texto”/>
§ Si en lugar de usar el tipo text usamos el tipo password, entonces tendremos un cuadro de texto en el que el valor introducido se camufla. § <label>Contraseña: </label> contraseña § <input type=”password” name=”param. Passwd”/> § Cuidado, que no se vea en el texto al escribirlo no significa que no se vea en la URL si usamos un método GET. § Haz la prueba y lo verás.
§ Además del campo de texto estándar existen otros campos de texto más específicos: email, URL, teléfono y búsqueda. § En el caso de los dos primeros, los tipos que se han de utilizar son email y url respectivamente, y el navegador mostrará un error si el texto introducido no se ajusta al patrón típico de ambos valores. § Por ejemplo, para el correo deberá contener una única arroba dentro del texto. § Sin embargo, para los campos de teléfono ( tel) y búsqueda (search) no se comprueba Otros campos de texto ninguna restricción y funcionan exactamente igual que el campo text. § Su uso es meramente estético y el navegador suele añadir algún icono para indicar al § usuario el tipo del campo. § A continuación podemos ver ejemplos de estos campos de texto: § <label>Email: </label> <input type=”email”/> § <label>URL: </label> <input type=”url”/> § <label>Teléfono: </label> <input type=”tel”/> § <label>Búsqueda: </label> <input type=”search”/> § También resulta muy interesante el tipo "date" para obtener fechas.
§ Para crear un conjunto de casillas de verificación de selección múltiple (checkbox), usamos el elemento <input type=”chekbox”>. Casillas de verificación § En este caso, el atributo checked nos servirá para activar la selección. § <label>Casilla de verificación: </label> § <input type=”checkbox” name=”param. Verif 1”/> § <label>Casilla de verificación activa: </label> § <input type=”checkbox” name=”param. Verif 2” checked/>
§ También podemos crear un conjunto de casillas de opción para elegir entre selecciones exclusivas. § Para ello utilizaremos el elemento <input type=”radio”>. § En este caso, el valor coincide con el título que aparece Casillas de opción junto al botón y hay que usar el mismo name para formar el grupo de selección exclusiva. § <label>Opción excluyente: </label> § <input type=”radio” name=”opcion”/> § <label>Opción excluyente activa: </label> § <input type=”radio” name=”opcion” checked/>
§ Podemos incluir distintos botones en un formulario. § Normalmente se añaden los botones de envío y reinicio del formulario, pero también podemos añadir botones representados con una imagen o botones genéricos cuya pulsación luego manejaremos con Java. Script. § En este tipo de elementos no tiene mucho sentido incluir Botones el atributo name. § Por otro lado, nos serviremos del atributo value para indicar el texto del botón. § Para enviar el formulario emplearemos un elemento <input type=”submit”>. § El navegador se encarga de enviar automáticamente los datos cuando el usuario pincha el botón de acuerdo con el método definido en el formulario (GET o POST).
§ El otro botón que suele añadirse es el de borrar el formulario. § Para ello utilizamos el elemento <input type=”reset”>. § Al pulsarlo, el navegador borra toda la información Botones introducida y muestra el formulario en su estado original. § También tenemos botones genéricos: <input type=”button”/>; y botones representados con una imagen: <input type=”image” src=”enviar. png”/>. § En este último caso utilizamos el atributo src para indicar la localización de la imagen que vamos a utilizar.
§ <label>Botón Enviar: </label> § <input type=”submit” value=”Enviar”/> § <label>Botón Enviar con imagen: </label> Botones Ejemplo § <input type=”image” src=”enviar. png”/> § <label>Botón Reiniciar</label> § <input type=”reset” value=”Reiniciar”/> § <label>Botón</label> § <input type=”button” value=”Un botón”/>
§ Otro de los posibles valores del atributo es type number, que fuerza al usuario a introducir un número. § De esta forma evitamos posibles errores en nuestra aplicación si el servidor espera que el valor enviado sea un valor numérico en lugar de cualquier tipo de texto. Números § En este caso podemos utilizar los atributos min, max y step para establecer el valor mínimo, máximo y el incremento permitido. § Por ejemplo, para obligar a introducir un número par entre 0 y 10, definiendo 0 como valor por defecto, utilizaríamos: § <label>Número: </label> § <input type=”number” min=” 0” max=” 10” step=” 2” value=” 0”/>
§ Si lo único que nos interesa es que el usuario indique una cantidad aproximada, entonces podemos utilizar el tipo range. § En este caso se mostrará una barra de desplazamiento, pero que no indica el valor numérico concreto. Gracias a los atributos min, max y step nosotros estableceremos el rango y el incremento. rangos § El usuario podrá mover la barra para indicar una cantidad, que, en realidad, se traduce en el valor numérico que nosotros hayamos configurado, pero el usuario no es consciente de ello. § <label>Rango: </label> § <input type=”range” min=” 1” max=” 5” step=” 1” value=” 3”/> § Prueba el ejemplo por ti mismo.
§ Otra novedad de HTML 5 es permitir seleccionar colores. § Para ello utilizamos el tipo color. § Además podemos indicar el color por defecto asignando colores al atributo value un color en formato hexadecimal (por ejemplo: #FF 0000 es el color rojo). § Hablaremos de las notaciones para indicar los colores en el próximo capítulo. § <label>Color: </label> <input type=”color” value=”#FF 0000”/>
§ En este caso, el tipo del elemento ha de ser <input type=”file”> Este elemento genera un botón que permite abrir un explorador de archivos en el cliente con el que seleccionar el archivo que se quiere adjuntar. Adjuntar archivos § Podemos incluso indicar el tipo de archivo a seleccionar mediante su código MIME. § Obviamente, solo podremos enviar un archivo al servidor si el método de envío del formulario es POST. Además, debemos incluir el atributo enctype=”multipart/form-data” en el formulario para que se envíe correctamente.
§ <form name=”fichero” action=”procesa_fichero. php” method=”post” enctype=”multipart/form-data”> Archivos ejemplo § <label>Ajuntar Imagen: </label> § <input type=”file” name=”imagen” accept=”image/jpeg, image/png”/> § <input type=”submit” value=”Enviar”> § </form>
§ El elemento input incluye, además, varios atributos adicionales muy interesantes. Estos atributos podremos utilizarlos dependiendo del tipo de control. Por ejemplo, el atributo checked solo se puede utilizar en las casillas de selección y opción; o el atributo accept, que es específico del tipo file. § El atributo autocomplete sirve para indicar al navegador si debe Atributos adicionales autocompletar ese campo con datos introducidos anteriormente por el usuario. § Esto lo habrás visto cuando accedes de nuevo a un formulario y ya tiene varios campos rellenos automáticamente. § Este atributo podemos utilizarlo en todos los controles menos en las casillas de selección y opción, y en los botones. § El atributo list sirve para indicar una lista de valores por defecto que se mostrarán al usuario como posible entrada del campo. § Su compatibilidad es igual que la de autocomplete y se utiliza indicando el identificador de un elemento HTML <datalist> donde enumeramos todas las opciones posibles.
§ <label>Lista: </label><input type=”text” name=”param. Lista” § list=”opciones”> Ejemplo § <datalist id=”opciones”> § <option value=”opcion 1”> § <option value=”opcion 2”> § <option value=”opcion 3”> § </datalist>
§ El elemento HTML <datalist> no tiene visualización asociada y solo sirve para indicar los valores. § Además, dentro de cada opción podemos añadir una etiqueta con el atributo label que se visualizará en lugar del valor de la opción. Veamos un ejemplo, pero esta vez con tipo url. § <label>Lista con etiquetas: </label> Ejemplo 2 § <input type=”url” name=”param. URLs” list=”urls”> § <datalist id=”urls”> § <option label=”Buscador Google” value=”http: //www. google. es”> § <option label=”Buscador Bing” value=”http: //www. bing. es”> § <option label=”Buscador Yahoo” value=”http: //www. yahoo. es”> § </datalist>
§ En los campos de texto (text, password, tel, email, etc. ) podemos utilizar el atributo maxlenght para indicar la longitud máxima del texto introducido. § También es muy útil utilizar el atributo placeholder para Atributos adicionales añadir un texto dentro del campo que dé idea al usuario del tipo de dato solicitado § En este caso, no suele añadirse la etiqueta <label>. § <input type=”text” placeholder=”Login”/> § <input type=”password” placeholder=”Contraseña”/> § <input type=”submit” value=”Enviar”/>
§ Además, otro atributo muy novedoso y potente es pattern, que permite indicar una expresión regular para validar el texto. § Veamos cómo lo incluiríamos en nuestro campo email: Atributos adicionales § <input type=”email” pattern=”[a-z 0 -9]+@[a-z 0 -9]+. [a-z] {2, 3}$”/> § Otro ejemplo es el campo contraseña. § En el siguiente ejemplo forzamos a que al menos haya un número, una letra en minúscula, otra en mayúscula y que al menos tenga ocho caracteres en total: § <input type=”password” name=”param. Passwd” pattern=”(? =. *d) (? =. *[a-z])(? =. *[A-Z]). {8, }”/>
§ El atributo multiple se utiliza con los tipos email y file para permitir introducir más de una dirección de correo o más de un archivo. § <label>Email: </label> <input type=”email” name=”param. Email” multiple/> § el atributo readonly se utiliza para que el campo no pueda ser modificado y para establecer un valor predefinido (con el campo value). § Esto lo podemos utilizar, por ejemplo, para indicar un precio que no queremos que sea cambiado. § De forma similar tenemos el tipo hidden, que nos permite añadir campos al Atributos adicionales formulario que no se visualizan, pero que sí se envían al servidor. § De nuevo, lo podemos utilizar para enviar datos que no queremos que vea o manipule el usuario. § Por último tenemos el atributo required, que obliga al usuario a rellenar ese campo antes de enviar el formulario. § Si no lo ha hecho, el navegador mostrará un mensaje de error. § Pruébalo por ti mismo. § El código sería el siguiente: § <label>Login: </label> <input type=”text” required/> § <label>Contraseña: </label> <input type=”password” required/> § <input type=”submit” value=”Enviar”/>
§ Si queremos incluir un cuadro de texto de varias líneas en el formulario no podemos utilizar el elemento <input type=”text”>, sino que es necesario usar el elemento <textarea> § <label>Comentarios</label> Cuadro de texto de varias lineas § <textarea name=”nombre” rows=” 4” cols=” 50” maxlenght=” 100”> § Escribe aquí tu comentario § </textarea> § Los atributos rows y cols indican el número de líneas y caracteres por línea respectivamente. § Otro atributo interesante es maxlenght, que limita el tamaño del texto al valor indicado.
§ Para crear una lista desplegable de selección utilizamos el elemento <select>. § Su esquema es similar a las listas en los cuadros de texto, aunque no permiten introducir ningún valor, solo seleccionar: § <label>Lista de selección</label> Listas de selección § <select name=”para. Seleccion”> § <option value=”opcion 1”>Primera opción</option> § <option value=”opcion 2”>Segunda opción</option> § <option value=”opcion 3”>Tercera opción</option> § </select> § Cada uno de los elementos se escribe dentro de un elemento option. § Como se puede ver, el valor que se enviará al servidor ( value) es independiente de lo que se mostrará en la lista (que puede ser un elemento HTML).
§ El elemento <fieldset> sirve para ver mejor las partes de un formulario al agrupar elementos relacionados. § Puede contener un elemento <legend>, que es el título que se visualiza con el grupo. Agrupaciones de elementos § <fieldset> § <legend>Login</legend> § <label>Texto: </label> <input type=”text” required/> § <label>Contraseña: </label> <input required/> § </fieldset> § <input type=”submit” value=”Enviar”/> type=”password”
Actividad 8 Realizar los archivos y guardarlos en la carpeta C: /xampp/htdocs/Modulo 1 Deberán enviar las imágenes. 1. - del código 2. - vista desde el navegador Deberán incluir su nombre completo § Crear un archivo HTML con organización de HTML 5, y formularios § La fecha limite de entrega establecida es el 3 de abril § ¿Qué llevará la página? § Deberás crear uno o dos formularios según lo consideres, donde incluirás todos los elementos anteriormente descritos del formulario. § Solo crearas los HTML, por ahora los PHP no son necesarios. § El tema es libre pero además de ir construyendo formularios conforme los ejemplos dados deberás crear 1 o 2 por tu cuenta.
§ Crear El sitio principal de alguno de los proyectos dados en el modulo 3. § Biblioteca § Academia Proyecto HTML § Club Náutico § Crearas la pagina principal con los elementos vistos, organización, estructura, imágenes, listas, tablas, etc. Mas adelante les envío guía de estudio para examen y la lista de cotejo del proyecto.
- Slides: 86