Post on 22-Aug-2020
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
<p> </p> Esto es un párrafo (cualquier contenido)
Etiqueta de apertura Etiqueta de cierre
Contenido que se va a mostrar
ELEMENTO
Elementos del HTML
<p> </p> Esto es un párrafo
<a> </a> Esto es un enlace
<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
<p align=“center”>
<a href=“index.html”>
<img src=“logo.jpg”>
</p> Esto es un párrafo
</a> Esto es un enlace
Esto es una imagen
atributo
atributo
atributo
Utilizar varios elementos a la vez
</p> <b> <p> Esto es un párrafo en negrita </b>
Etiqueta de apertura de párrafo
Etiqueta de cierre de párrafo
Etiqueta de apertura de negrita
Etiqueta de cierre de negrita
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
<html>
<head>
<title>Título de la página</title>
</head>
<body>
Contenido de la página
</body>
</html>
cabecera
cuerpo
documento
Etiquetas básicas I
<big>
<big><big>
<small>
<small><small>
Hace el texto más grande
Hace el texto mucho más grande
Hace el texto más pequeño
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)
<u> Subraya el texto (underline)
<em> Pone el texto en cursiva
Etiqueta para textos
Esto es un texto dentro de un párrafo <font> </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)
Listas odenadas
Elemento 1 de la lista <li> </li>
Elemento 2 de la lista <li> </li>
</ol>
<ol>
Quedaría así:
1. Elemento 1 de la lista
2. Elemento 2 de la lista
Apertura de la lista
Cierre de la lista
Apertura del elemento de la lista
Cierre del elemento de la lista
Listas no odenadas
Elemento 1 de la lista <li> </li>
Elemento 2 de la lista <li> </li>
</ul>
<ul>
Apertura de la lista
Cierre de la lista
Apertura del elemento de la lista
Cierre del elemento de la lista
Quedaría así:
• Elemento 1 de la lista
• Elemento 2 de la lista
Listas de definición
Elemento a definir <dt>
Texto de la definición <dd> </dd>
</dl>
<dl>
Apertura de la lista
Cierre de la lista
Apertura del título de la definición
Cierre del título de la definición
</dt>
Apertura del texto de la definición
Cierre del texto de la definición
Quedaría así:
Elemento a definir
exto de la definición
Enlaces o Links I
<a href=“destino”> </a> Texto del enlace
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
Parámetros:
• Width longitud
• Height altura
• Border borde
• Alt texto descriptivo o alternativo
• Align alineación
<img src=“ruta de la imagen/imagen.extensión”>
No tiene etiqueta de cierre
Combinando etiquetas
<img src=“imagenes/logo.jpg”>
<a href=“index.html”>
</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
Contenido Celda 1 <td>
Contenido Celda 2 <td> </td>
</tr>
<tr> Apertura de la primera fila Apertura de la
primera columna
Cierre de la primera columna
</td> Apertura de la segunda columna
Cierre de la segunda columna
<table>
</table>
Contenido Celda 4 <td>
Conenido Celda 4 <td> </td>
</tr>
<tr>
Apertura de la primera columna
Cierre de la primera fila
</td>
Apertura de la segunda columna
Cierre de la segunda fila
Apertura de la Tabla
Cierre de la Tabla
Cierre de la segunda columna
Cierre de la segunda columna
Apertura de la segunda fila
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
Celda 6 y la Celda 9 Contenido Celda 7 Contenido Celda 8
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