Curso Básico de HTML
Qué es HTML? HTML es un pseudo-lenguaje de programación, no es un lenguaje en sí. Utiliza tags o etiquetas específicas para crear contenido y dar una estructura al documento. Existen etiquetas de apertura y de cierre para mostrar el contenido. Es un lenguaje interpretado directamente por el navegador web. El navegador lee el código de arriba abajo y aplica la etiqueta que esté más cercana al texto (al contenido)
Elementos del HTML Un elemento es un componente de HTML que se utiliza para darle estructura al documento. Ejemplos de elementos: Párrafos Enlaces Imágenes Tablas...
Elementos del HTML ELEMENTO <p> Esto es un párrafo (cualquier contenido) </p> Etiqueta de apertura Etiqueta de cierre Contenido que se va a mostrar
Elementos del HTML <p> Esto es un párrafo </p> <a> Esto es un enlace </a> <img> Esto es una imagen
Atributos de los elementos Son añadidos que modifican un elemento para aportarle más información, significado o un valor Ejemplos de atributos: Alineación Longitud Altura Color...
Atributos de los elementos atributo <p align= center > Esto es un párrafo </p> atributo <a href= index.html > atributo Esto es un enlace </a> <img src= logo.jpg > Esto es una imagen
Utilizar varios elementos a la vez Etiqueta de apertura de negrita Etiqueta de cierre de negrita <p> <b> Esto es un párrafo en negrita </b> </p> Etiqueta de apertura de párrafo Etiqueta de cierre de párrafo Las etiquetas se cierran en orden inverso a su creación, es decir, se cierra primero la que esté más cerca del texto
Estructura básica de un documento documento cabecera cuerpo <html> <head> <title>título de la página</title> </head> <body> Contenido de la página </body> </html>
Etiquetas básicas I <big> Hace el texto más grande <big><big> Hace el texto mucho más grande <small> Hace el texto más pequeño <small><small> Hace el texto mucho más pequeño
Etiquetas básicas II <b> Pone el texto en negrita (blod) <strong> Pone el texto en negrita (fuerte) <i> Pone el texto en cursiva (italic) <em> Pone el texto en cursiva <u> Subraya el texto (underline)
Etiqueta para textos <font> Esto es un texto dentro de un párrafo </font> Parámetros de la etiqueta <font> Color color de la fuente: rgb, hexadecimal o su nombre (sintaxis en inglés, por ejemplo: red, green ) Face nombre de la fuente (por ej. Arial) Family familia de la fuente Size tamaño de la fuente
Listas de elementos Existen tres tipos de listas en HTML: Listas ordenadas (ordered list) Listas no ordenadas (unordered list) Listas de definición (definition list)
Apertura de la lista Listas odenadas Apertura del elemento de la lista <ol> <li> Elemento 1 de la lista </li> <li> Elemento 2 de la lista </li> Cierre del elemento de la lista </ol> Quedaría así: 1. Elemento 1 de la lista 2. Elemento 2 de la lista Cierre de la lista
Apertura de la lista Listas no odenadas Apertura del elemento de la lista <ul> <li> Elemento 1 de la lista </li> <li> Elemento 2 de la lista </li> Cierre del elemento de la lista </ul> Quedaría así: Elemento 1 de la lista Elemento 2 de la lista Cierre de la lista
Apertura de la lista Listas de definición Apertura del título de la definición <dl> <dt> Elemento a definir </dt> Cierre del título de la definición <dd> Texto de la definición </dd> Apertura del texto de la definición </dl> Cierre del texto de la definición Quedaría así: Elemento a definir exto de la definición Cierre de la lista
Enlaces o Links I <a href= destino > Texto del enlace </a> Se abre con la etiqueta <a href= > y se cierra con </a> Se puede enlazar a: Una página web interna o externa Un documento (word, excel, pdf ) Una zona dentro de la misma página web (marcador) Una dirección de correo electrónico
Enlaces o Links II Para enlazar con un documento: file <a href= file:documento.txt">texto del enlace</a> Para enlazar con un marcador: primero se crea el marcador con el parámetro name y después se vincula hacia el marcador <a name="arriba"></a> el marcador <a href="#arriba">texto del enlace</a> el vinculo Para abrir el vínculo en la misma ventana o en una nueva: _parent, _top, _self o _blank <a href= index.html target= _blank >texto del enlace</a>
Insertar Imágenes <img src= ruta de la imagen/imagen.extensión > No tiene etiqueta de cierre Parámetros: Width longitud Height altura Border borde Alt texto descriptivo o alternativo Align alineación
Combinando etiquetas <a href= index.html > <img src= imagenes/logo.jpg > </a> Al hacer clic en la imagen logo.jpg que está en la carpeta imagenes, nos llevará a la página index.html
Tablas I Apertura de la primera columna <table> <tr> Apertura de la Tabla Apertura de la primera fila Cierre de la primera columna Apertura de la segunda columna Apertura de la segunda fila <td> <td> <tr> Contenido Celda 1 Contenido Celda 2 Cierre de la primera fila </td> </td> </tr> Cierre de la segunda columna Cierre de la segunda columna Apertura de la primera columna <td> <td> Contenido Celda 4 Conenido Celda 4 </td> </td> Cierre de la segunda columna Apertura de la segunda columna Cierre de la segunda fila Cierre de la Tabla </tr> </table>
Tablas II Este sería el código de la tabla: <table> <tr> <td>contenido Celda 1</td> <td>contenido Celda 2</td> </tr> <tr> <td>contenido Celda 3</td> <td>contenido Celda 4</td> </tr> </table>
Tablas III Parece complicado, pero es muy sencillo. El resultado es este: Contenido Celda 1 Contenido Celda 2 Contenido Celda 3 Contenido Celda 4
Parámetros de las Tablas I Las tablas tienen varios parámetros, estos son los más utilizados: Border borde de la tabla Align alineación de la tabla Bgcolor color de fondo de la tabla Cellpadding espacio entre el borde de la celda y su contenido Cellspacing espacio entre los bordes de la tabla y los bordes de las celdas
Parámetros de las Tablas II <tr> y <td> también pueden tener sus propios parámetros: Border borde de la celda Align alineación horizontal del contenido Valign alineación vertical del contenido Bgcolor color de fondo de la celda Collspan número de columnas que ocupará la celda (combina columnas: lateralmente) Rowspan número de filas que ocupará la celda (combina filas: hacia abajo)
Ejemplo de una tabla compleja <table width="500" border="1" cellpadding="0" cellspacing="0"> <tr> <td height="50" colspan="2" align="center" valign="middle">contenido combinado de la Celda y la Celda 2</td> <td width="33%" align="center" valign="middle">contenido Celda 3</td> </tr> <tr> <td width="33%" height="50" align="center" valign="middle">contenido Celda 4</td> Continúa el código
Ejemplo de una tabla compleja <td width="34%" height="50" align="center" valign="middle">contenido Celda 5</td> <td width="33%" rowspan="2" align="center" valign="middle">contenido combinado de la Celda 6 y la Celda 9</td> </tr> <tr> <td width="33%" height="50" align="center" valign="middle">contenido Celda 7</td> <td width="34%" height="50" align="center" valign="middle">contenido Celda 8</td> </tr> </table>
Ejemplo de una tabla compleja Esta sería la tabla resultante: Contenido combinado de la Celda 1 y la Celda 2 Contenido Celda 3 Contenido Celda 4 Contenido Celda 5 Contenido combinado de la Contenido Celda 7 Contenido Celda 8 Celda 6 y la Celda 9 Una tabla que mide 500 píxeles, con un borde grosor 1 (border), sin espaciado entre las celdas (cellspacing) ni entre las celdas y el contenido (cellpadding). Las columnas de los extremos miden un 33% del total de la longitud de la tabla (width), y la columna central mide el 34%. La celda de la primera y de la segunda columnas están combinadas (colspan), la tercera celda de la segunda y la tercera filas están combinadas (rowspan). El contenido de las celdas está alineado horizontal (align) y verticalmente (valign). Todas las celdas tienen una altura de 50 píxeles (height).
Recomendaciones finales Asegúrate de entender y aprenderte la sintaxis de las etiquetas (saber escribirlas y reconocerlas) Apréndete las etiquetas más comunes Apréndete los atributos más comunes Aprende a estructurar el contenido No tengas miedo al código, te puede sacar de muchos problemas
Muchas gracias por haber realizado este Curso Básico de HTML No olvides suscribirte a mi página web para recibir más contenido como este Nos vemos en josegonzalezbueno.com