# Tutorial de HTML ### en HTML (que recursivo :P) Created by <i class="fab fa-telegram"></i> [edme88]("https://t.me/edme88") --- <style> .grid-container2 { display: grid; grid-template-columns: auto auto; font-size: 0.6em; text-align: left !important; } .grid-item { border: 3px solid rgba(121, 177, 217, 0.8); padding: 20px; text-align: left !important; } </style> <!-- .slide: style="font-size: 0.80em" --> ## Temario <div class="grid-container2"> <div class="grid-item"> ### Páginas Web * Estructura básica * Contenido mínimo * Sintaxis * Etiquetas head [Ejercicio: Primer HTML](U4_HTML.html#/9) * Etiquetas semánticas * Etiquetas body * Tipos de texto [Ejercicio: Secciones](U4_HTML.html#/17) [Ejercicio: Títulos](U4_HTML.html#/18) * Tipos de listas * Hipervínculos [Ejercicio: Listas](U4_HTML.html#/24) </div> <div class="grid-item"> [Ejercicio: Link](U4_HTML.html#/25) * Tablas [Ejercicio: Tablas 1,2,3,4](U4_HTML.html#/31) [Ejercicio: Comentarios](U4_HTML.html#/35) * Div ### Formularios * Form, inputs * Radio, range, checkbox * Select & option * Fecha, hora, mes, semana * Button * Textarea * Atributos [Ejercicio: Formulario](U4_HTML_avanzado.html#/57) </div> </div> --- ## Comenzar! Cuando estás empezando a trabajar con HTML es recomendable tener a mano siempre un CheatSheet con un resumen de los comandos más empleados. [HTML Cheat Sheet](https://raw.githubusercontent.com/UCC-LabCompu2/filminas/master/slides/cheatsheet/html5-cheatsheet.pdf) --- ## Estructura Básica  --- ## Contenido Minimo  <small> UTF-8 significa 8-bit Unicode Transformation Format y es un formato de codificación de caracteres </small> --- ## Sintaxis  --- ## ¿Cómo Comenzar?  --- ## Etiquetas * [title](https://www.w3schools.com/tags/tag_title.asp) Se muestra en la barra de título del navegador, al hacer un marcador a la página o en los buscadores de Internet. * [meta](https://www.w3schools.com/tags/tag_meta.asp) No son imprescindibles, pero permiten identificar algunos parámetros de la web, como autores, codificación de caracteres, etc. --- ## Github Classroom Repositorio base para realizar todos los ejercicios que veremos en clase: [Github Classroom 2025](https://classroom.github.com/a/AJOJ1SC2) --- ## Ejercicio: Primer HTML * Crear un archivo HTML * Incluir la etiqueta <head> * Incluir datos del autor, descripción y palabras principales --- ## Ejercicio: Primer HTML <iframe width="560" height="315" src="https://www.youtube.com/embed/k3nX5AdX54s" frameborder="0" allow="accelerometer; autoplay; encrypted-media; gyroscope; picture-in-picture" allowfullscreen></iframe> --- ### Etiquetas anidadas <!-- .slide: style="font-size: 0.80em" --> Significa que una etiqueta está dentro de otra. Por ejemplo, **strong** y **em** están anidadas dentro de **p**. A su vez, **em** esta anidada dentro de **strong**.  Generalmente la última etiqueta en abrirse es la primera en cerrarse. Los errores típicos son: olvidarse de cerrar etiquetas y cerrar etiquetas en un orden inadecuado (lo que puede generar demoras al renderizar una página). --- ## Etiquetas Semántica Etiquetas que dan un significado a las partes del documento, indican qué contenido engloban y cuál es su relación con el conjunto de elementos del documento HTML. --- ## Estructura Semántica  --- ## Estructura Semántica <!-- .slide: style="font-size: 0.80em" --> * [**Header:**](https://www.w3schools.com/tags/tag_header.asp) Especifica un encabezado de un documento o sección. * [**Nav:**](https://www.w3schools.com/tags/tag_nav.asp) Define un conjunto de enlaces de navegación. * [**Aside:**](https://www.w3schools.com/tags/tag_aside.asp) Define un contenido que se coloca como una barra lateral. * [**Main**](https://www.w3schools.com/tags/tag_main.asp) Contenido predominante de la página. * [**Section:**](https://www.w3schools.com/tags/tag_section.asp) Define una sección de un documento. (Ejemplo, introducción, contenido, contacto) * [**Article:**](https://www.w3schools.com/tags/tag_article.asp) Especifica contenido independiente. Debe tener sentido por sí mismo. (Ejemplo mensaje foro, entrada blog, articulo periodico) * [**Footer:**](https://www.w3schools.com/tags/tag_footer.asp) Especifica un pie de página de un documento o sección. --- ## Cuerpo de la Página ````html <body> <header> Logo de la Página + Titulo de la Página </header> <nav>Botones de navegación</nav> <section> Contenido de la página </section> <footer> Este es el pie de Pagina </footer> </body> ```` --- ## CABECERA ````html <header> <img src="images/html/logo.png"> <h1>NOMBRE DE LA PAGINA</h1> </header> ```` Los titulos van desde **h1** hasta **h6**. **h1** -> Título de mayor importancia. Sólo puede haber 1 por página. **h6** -> Título de menor importancia. --- ## [Tipos de Texto](https://www.w3schools.com/html/html_formatting.asp) ````html <p>Esto es un párrafo</p> <p>Esto es un párrafo con un <span>span</span></p> <strong>Esto es Negrita</strong> <em>Esto es Cursiva</em> <u>Esto es un Subrayado</u> 2<sup>3</sup>=8 Ozono= O<sub>3</sub> ```` <p>Esto es un párrafo</p> <p>Esto es un párrafo con un <span>span</span></p> <b>Esto es Negrita</b> <i>Esto es Cursiva</i> <u>Esto es un Subrayado</u> 2<sup>3</sup>=8 Ozono= O<sub>3</sub> --- ## Ejercicio: Secciones Empleando el template “ej_noticia”, incluir en la página 3 secciones mediante etiquetas semánticas: * En el **header** incluir una imagen y un título(la imagen debe ser descargada de internet e incluida en la carpeta ‘Ejercicios-HTML/imagenes’) * En **main**, separar el texto en párrafos. Debe incluir la utilización de estilos (negrita, itálica y subrayado). * El **footer** debe contener el autor de la página --- ## Ejercicio: Títulos Empleando el template “ej_noticia”, incluir diferentes tipos de título: * h1 para ‘Diario On-line’ * h3 para ‘Cordobici’ * h6 para la fecha de publicación * h5 para el sub-titulo de la noticia --- ## Ejercicio: Secciones y Títulos <iframe width="560" height="315" src="https://www.youtube.com/embed/FzZEdH5xJzI" title="YouTube video player" frameborder="0" allow="accelerometer; autoplay; clipboard-write; encrypted-media; gyroscope; picture-in-picture; web-share" allowfullscreen></iframe> --- ## Tipos de Listas * [Ordenadas](https://www.w3schools.com/tags/tag_ol.asp) * [No Ordenadas](https://www.w3schools.com/tags/tag_ul.asp) --- ## Listas Ordenadas ````html <ol> <li>Item uno</li> <li>Item dos</li> <li>Item 3</li> </ol> ```` 1. Item uno 2. Item dos 3. Item 3 --- ## Listas No Ordenadas ````html <ul> <li>Item uno</li> <li>Item dos</li> <li>Item 3</li> </ul> ```` <ul> <li>Item uno</li> <li>Item dos</li> <li>Item 3</li> </ul> --- ## [Hipervinculo](https://www.w3schools.com/tags/tag_a.asp) ````html <a href="http://www.w3schools.com/tags/tag_a.asp" target="_blank"> Soy un Hipervinculo xD </a> <br> <a href="mailto:edmealiciardi@gmail.com"> edmealiciardi@gmail.com </a> ```` <a href="http://www.w3schools.com/tags/tag_a.asp" target="_blank"> Soy un Hipervinculo xD </a> <br> <a href="mailto:edmealiciardi@gmail.com"> edmealiciardi@gmail.com </a> <small><strong>Target</strong> indica en donde se abrirá la página. </small> <small><strong>_blank</strong> en una nueva ventana o tab. </small> <small><strong>_self</strong> en el mismo marco donde se hizo click. </small> <small><strong>_parent</strong> en el marco principal. </small> <small><strong>_top</strong> en el cuerpo de la ventana </small> <small><strong>framename</strong> en un iframe determinado </small> --- ## Ejercicio: Listas Empleando el template “ej_listas” donde hay una receta, emplear: * una lista no ordenada para los ingredientes * una lista ordenada para los pasos de la preparación. * una imagen de la receta (la misma se encuentra en la carpeta ‘Ejercicios-HTML/imagenes’) --- ## Ejercicio: Link Empleando el template “ej_noticia”, incluir la etiqueta semántica **nav** debajo de la cabecera de la página,y agregar un link a la web de la receta (como si fuera un diario con diferentes secciones). --- ## Ejercicio: Listas y Link <iframe width="560" height="315" src="https://www.youtube.com/embed/DEd52yU1CHY" frameborder="0" allow="accelerometer; autoplay; encrypted-media; gyroscope; picture-in-picture" allowfullscreen></iframe> --- ## Tablas ````html <table> <thead> <tr> <th>Asignatura</th> <th>Nota</th> </tr> </thead> <tbody> <tr> <td>Analisis Matematico</td> <td>8</td> </tr> <tr> <td>Fisica I</td> <td>9</td> </tr> <tr> <td>Laboratorio de Computacion I</td> <td>8</td> </tr> </tbody> </table> ```` --- ## Tablas <table style="border: 2px solid white"> <thead> <tr> <th>Asignatura</th> <th>Nota</th> </tr> </thead> <tbody> <tr> <td>Analisis Matematico</td> <td>8</td> </tr> <tr> <td>Fisica I</td> <td>9</td> </tr> <tr> <td>Laboratorio de Computacion I</td> <td>8</td> </tr> </tbody> </table> --- ## Ejemplos de Tablas y bordes [Tablas y CSS](https://mosaic.uoc.edu/ac/le/es/m6/ud7/index.html) [W3School](https://www.w3schools.com/css/css_table.asp) [LibrosWeb](http://librosweb.es/libro/css/capitulo_10.html) --- ## Ejercicio: Tablas I Empleando el template “ej_tablas”, agregue las siguientes etiquetas: * table * tr * td  --- ## Ejercicio: Tablas II Empleando el template “ej_tablas”, agregue las siguientes etiquetas: * thead * tbody * th  --- ## Ejercicio: Tablas III Empleando el template “ej_tablas”, agregue el atributo: * colspan Elimine las siglas CPAR, y unifique esa celda con la contigua para que ambas contengan el texto “Campus party”  --- ## Ejercicio: Tablas VI Empleando el template “ej_tablas”, agregue el atributo: * rowspan Como en la columna “Lugar”, ‘Buenos Aires’ se repite, unificar ambas celdas.  Al contenido de la columna “Web”, agregar links a las páginas correspondientes --- ## Ejercicio: Comentarios Agrege comentarios a la página web de tablas. ````html <!--Esto es un comentario--> ```` --- ## Ejercicio: Tablas y Comentarios <iframe width="560" height="315" src="https://www.youtube.com/embed/C-_ZWqhN5YU" frameborder="0" allow="accelerometer; autoplay; encrypted-media; gyroscope; picture-in-picture" allowfullscreen></iframe> --- ## Div ````html <div> Contenido de la Caja </div> ```` <div> Contenido de la Caja </div> --- ## DIV * [div:](https://www.w3schools.com/tags/tag_div.asp) Define un bloque de contenido o sección de la página, para poder aplicarle diferentes estilos o para realizar operaciones sobre ese bloque específico.  --- ## Formulario Es un documento que nos permite rellenar información de forma ordenada y estructurada. Algunos ejemplos podrían ser escribir nuestro nombre y apellidos, dirección, cuenta de email, etc. --- ## Formularios Los elementos y atributos para formularios en HTML5 proveen un mayor grado de marcado semántico que en HTML4 y eliminan gran parte del tedioso trabajo de programar y diseñar que se necesitaba en HTML4. Las funcionalidades de los formularios en HTML5 brindan una experiencia mejor para los usuarios al permitir que los formularios tengan un comportamiento más consistente entre diferentes sitios web y al darle una devolución inmediata acerca de la información ingresada. --- ## Elementos para Formularios ````html <form id="form1"> </form> ```` <!-- .slide: style="font-size: 0.70em" --> Atributos que puede tener: * action: url donde se envia la información * method: los datos se envian de forma oculta(post) ó sin condificar(get) * accept: especifica tipo de archivo que puede subirse al formulario * enctype: indica como se deben codificar los datos al enviarse al servidor * autocomplete: controles del formulario que pueden tener sus valores automáticamente completados. * name: nombre con el que identificamos al formulario. * novalidate: indica que el formulario no es validado cuando es enviado * target: Indica dónde mostrar la respuesta, después de enviar el formulario (_self. _blank, _parent, _top) [VER HTML CheatSheet](https://raw.githubusercontent.com/UCC-LabCompu2/filminas/master/slides/cheatsheet/html5-cheatsheet.pdf) --- ## [Input](https://www.w3schools.com/tags/att_input_type.asp) Campo de texto en una línea ````html <input type="text" name="nombre"/> <input type="password" name="psw"> <input type="email" name="email"> <!--Valida @--> <input type="tel" name="telefono"/> <input type="url" name="pagina_web"/><!--Valida http--> <input type="color" name="color"/> ```` <input type="text" name="nombre"/> <input type="password" name="psw"> <input type="email" name="email"> <input type="tel" name="telefono"/> <input type="url" name="pagina_web"/> <input type="color" name="color"/> --- ## Input  --- ## Input  --- ## Input  --- ## Input  --- ## Input Radio Permiten elegir una sola opción entre un grupo (tener en cuenta que deben tener el mismo **name** para pertenecer al grupo). ````html <input type="radio" name="gender" value="male" checked> Male<br> <input type="radio" name="gender" value="female"> Female ```` <input type="radio" name="gender" value="male" checked> Male<br> <input type="radio" name="gender" value="female"> Female --- ## Input Range Permite que el usuario especifique un valor numérico comprendido entre un valor mínimo y máximo ````html <input type="range" id="a" name="a" value="50" min="0" max="120"> ```` <input type="range" id="a" name="a" value="50" min="0" max="120"> --- ## [Nuevos Campos de HTML 5.1](https://lenguajehtml.com/p/html/formularios/controles-campos-fecha-hora) * Fecha <input type="date"> * Hora <input type="time"> * Fecha y hora local <input type="datetime-local"> * Mes <input type="month"> * Semana <input type="week"> ````html <input type="date"> <input type="time"> <input type="datetime-local"> <input type="month"> <input type="week"> ```` --- ## Input Checkbbox Casilla de verificación asociada a una opción que puede ser marcado o desmarcado por el usuario. ````html <input type="checkbox" name="materia1" value="Matematica"> Matematica<br> <input type="checkbox" name="materia2" value="Lengua"> Lengua ```` <input type="checkbox" name="materia1" value="Matematica"> Matematica<br> <input type="checkbox" name="materia2" value="Lengua"> Lengua --- ## Input Number Campo para la entrada de un número. ````html <input type="number" name="points" min="0" max="100" step="10" value="30"> ```` <input type="number" name="points" min="0" max="100" step="10" value="30"> --- ## Input: Atributos <!-- .slide: style="font-size: 0.90em" --> Algunos atributos son: * name: permite hacer referencia al elemento desde Js empleando un document.formName.inputName * placehorder: ayuda visual del contenido del input * disabled: deshabilita el campo y no permite que el usuario ingrese textos * size: altera el ancho del cuadro de texto * maxlength: cantidad máxima de caracteres que se pueden ingresar Ejemplo: Si una tarjeta de crédito tiene entre 13 y 16 dígitos, colocar **maxlength** en 16. <input type="text" placeholder="nombre"/> <input type="text" value="15" disabled/> <input type="text" size="4"/> <input type="text" maxlength="4"/> --- ## Select & Option Permite al usuario elegir de entre un número de opciones de una lista. ````html <select name="materias"> <option value="analisisMat">Análisis Matemático</option> <option value="algebra">Álgebra</option> <option value="program1">Programación I</option> <option value="labCompu2">Taller de Desarrollo Web</option> </select> ```` <select name="materias"> <option value="analisisMat">Análisis Matemático</option> <option value="algebra">Álgebra</option> <option value="program1">Programación I</option> <option value="labCompu2">Taller de Desarrollo Web</option> </select> --- ## Button Crear un botón en el que se puede hacer click sin ningún valor por defecto. ````html <button type="button">Click Me!</button> ```` <button type="button">Click Me!</button> Atributos: * disabled * autofocus * autocomplete * form, etc, ect --- ## Textarea Representa un campo para la entrada de texto multilínea.  Suele configurarse los atributos: `rows="5" cols="50"` --- ## Placeholder Atributo de elementos input y textarea para representar una indicación que ayude al usuario a completar estos campos. ````html <input name="nombre" placeholder="Ingrese nombre"> ```` <input name="nombre" placeholder="Ingrese nombre"> --- ## Ejercicio: Formulario <!-- .slide: style="font-size: 0.50em" --> Empleando el template “ej_formulario”, agregue las siguientes etiquetas: * **form** para agrupar todos los campos * **input** tipo texto, radio, numero, email, password, checkbox y submit (agregar atributo size=40 a los campos de texto. Separe con **p** cada grupo.) * **select y option** para el selector * **textarea** * Atributo **placeholder** en todos los inputs * Atributo **maxlength** con un valor acorde a cada campo (edad=3, nombre=40, etc)  --- ## Ejercicio: Formulario <iframe width="560" height="315" src="https://www.youtube.com/embed/zSbEPLMhBh0" frameborder="0" allow="accelerometer; autoplay; encrypted-media; gyroscope; picture-in-picture" allowfullscreen></iframe> ---  --- ## ¿Dudas, Preguntas, Comentarios? 