Vista previa del material en texto
Introducción al Desarrollo Web Departamento de Informática HTML - Parte 2 2022 Repaso Etiquetas básicas y atributos para: ● Texto ● Imágenes ● Enlaces “Construcción del primer sitio web” Ejemplo Elementos de línea y de bloque Una etiqueta de línea es aquella que ocupa el espacio mínimo necesario en horizontal, y permite que otro elemento se coloque a su lado. Ejemplo: <a>, <img> Una etiqueta de bloque, ocupa todo el ancho disponible y no permite que otro elemento se coloque a su lado (aunque aparentemente tenga lugar suficiente). Ejemplo: <h1>, <h2>, <h3>, <p>, <ul>, <li>, <table>,<div> Elementos de línea y de bloque HTML Funcionamiento: Internet HTML Funcionamiento: ■ World Wide Web HTML Funcionamiento: ■ URL - Dominio HTML Funcionamiento: ■ Hosting HTML Funcionamiento: ■ Del lado del cliente ■ Del lado del servidor HTML Funcionamiento: Tablas Vamos a utilizar las tablas para organizar contenido. NO para la estructura de las páginas Tablas - Etiqueta <table> Definir una tabla: <table> </table> Tablas - Etiqueta <tr> Crear una fila dentro de una tabla: <table> <tr> </tr> <tr> </tr> <tr> </tr> <tr> </tr> </table> Tablas - Etiqueta <td> Definir una columna dentro de una fila: <table> <tr> <td> Primera </td> <td> Segunda </td> <td> Tercera </td> </tr> </table> Tablas - Ejemplo <table> <tr> <td> Fila 1 - Columna 1</td> <td> Fila 1 - Columna 2 </td> <td> Fila 1 - Columna 3</td> </tr> <tr> <td> Fila 2 - Columna 1</td> <td> Fila 2 - Columna 2 </td> <td> Fila 2 - Columna 3</td> </tr> <tr> <td> Fila 3 - Columna 1</td> <td> Fila 3 - Columna 2 </td> <td> Fila 3 - Columna 3</td> </tr> <tr> <td> Fila 4 - Columna 1</td> <td> Fila 4 - Columna 2 </td> <td> Fila 4 - Columna 3</td> </tr> </table> Tablas - Encabezado de las columnas <table border="1"> <tr> <th> Encabezado 1</th> <th> Encabezado 2 </th> <th> Encabezado 3</th> </tr> <tr> <td> Fila 1 - Columna 1 </td> <td> Fila 1 - Columna 2 </td> <td> Fila 1 - Columna 3 </td> </tr> <tr> <td> Fila 2 - Columna 1 </td> <td> Fila 2 - Columna 2 </td> <td> Fila 2 - Columna 3 </td> </tr> <tr> <td> Fila 3 - Columna 1 </td> <td> Fila 3 - Columna 2 </td> <td> Fila 3 - Columna 3 </td> </tr> </table> Tablas - Ejemplo Tablas - Unificar celdas horizontal <TABLE BORDER="1"> <TR> <TD>Item 1</TD> <TD COLSPAN=2>Item 2</TD> </TR> <TR> <TD>Item 3</TD> <TD>Item 4</TD> <TD>Item 5</TD> </TR> </TABLE> Tablas - Unificar celdas vertical <TABLE BORDER="1"> <TR> <TD ROWSPAN=2>Item 1</TD> <TD>Item 2</TD> <TD>Item 3</TD> <TD>Item 4</TD> </TR> <TR> <TD>Item 5</TD> <TD>Item 6</TD> <TD>Item 7</TD> </TR> </TABLE> Tablas - Unificar celdas vertical <TABLE BORDER="1"> <TR> <TD ROWSPAN=2>Item 1</TD> <TD>Item 2</TD> <TD>Item 3</TD> <TD>Item 4</TD> </TR> <TR> <TD>Item 5</TD> <TD>Item 6</TD> <TD>Item 7</TD> </TR> </TABLE> Tablas - Atributos Tablas - Etiqueta <div> Se utiliza para agrupar contenido <div> y </div> (ambas obligatorias). <div style="color: blue;"> <h2> Ejemplo de div y span </h2> <p> Esto es un párrafo dentro de un div, <span style="color: red;"> y esto un span dentro de un párrafo.</span> </p> </div>
