Índice del curso de html5
- Introducción a HTML y su historia
- Estructura básica de un documento HTML
- Etiquetas básicas y su uso
- Enlaces y vínculos
- Imágenes y multimedia
- Tablas
- Formularios y entrada de datos
- Estilos y diseño con CSS
- Semántica y etiquetas de contenido en HTML5
- Canvas y gráficos en HTML5
- Geolocalización y uso de datos en HTML5
- Audio y video en HTML5
- Web Storage y bases de datos en HTML5
- Web Workers y multi-hilo en HTML5
- Aplicaciones Web y el uso de HTML5 en aplicaciones móviles
- Depuración y herramientas de desarrollo para HTML5.
1 – Introducción a HTML y su historia
HTML (HyperText Markup Language) es un lenguaje de marcado utilizado para estructurar y dar formato a contenido en la World Wide Web. Es el estándar principal para la creación de sitios web y páginas web.
HTML fue creado en 1990 por el físico y matemático británico Tim Berners-Lee, mientras trabajaba en el Consejo Europeo para la Investigación Nuclear (CERN). La primera versión de HTML, HTML 1.0, fue publicada en 1993. Desde entonces, ha habido varias versiones de HTML, con la versión más reciente siendo HTML5, publicada en 2014.
HTML se basa en etiquetas que se utilizan para definir el contenido y dar formato a él. Estas etiquetas se escriben entre corchetes angulares y se colocan alrededor del contenido que se quiere formatear. Por ejemplo, la etiqueta «b» se utiliza para dar formato en negrita a un fragmento de texto: <b>Texto en negrita</b>.
HTML es un lenguaje de marcado, no un lenguaje de programación, lo que significa que no tiene la capacidad de realizar acciones o tareas por sí mismo. En su lugar, se utiliza en conjunción con otros lenguajes de programación, como JavaScript, para crear sitios web interactivos y aplicaciones web.
2 – Estructura básica de un documento HTML
La estructura básica de un documento HTML consta de dos partes: la cabecera y el cuerpo.
La cabecera (head) es la parte de arriba del documento HTML y se encuentra entre las etiquetas de apertura y cierre «head». En la cabecera se incluyen elementos como el título de la página, los enlaces a hojas de estilo (CSS) y scripts (JavaScript), y meta información sobre la página.
El cuerpo (body) es la parte principal del documento HTML y se encuentra entre las etiquetas de apertura y cierre «body». Es aquí donde se coloca el contenido visible de la página, como texto, imágenes, tablas y enlaces.
A continuación se muestra un ejemplo de la estructura básica de un documento HTML:
<html>
<head>
<title>Título de la página</title>
</head>
<body>
Contenido de la página
</body>
</html>
En la parte superior del documento se encuentra la declaración «DOCTYPE», que indica el tipo de documento que se está utilizando. En este caso, se está utilizando HTML5, que es la versión más reciente de HTML.
Luego viene la etiqueta «html», que engloba todo el documento. Dentro de esta etiqueta se encuentran las etiquetas «head» y «body», que se explicaron anteriormente.
Es importante tener en cuenta que todas las etiquetas deben tener una etiqueta de cierre correspondiente, a excepción de algunas etiquetas «vacías» que no tienen contenido, como la etiqueta «br» para un salto de línea. Por ejemplo, la etiqueta de apertura «head» se cierra con la etiqueta «head» de cierre «</head>».
3 – Etiquetas básicas y su uso
Las etiquetas básicas de HTML son el conjunto de etiquetas más comúnmente utilizadas para dar formato y estructurar el contenido de una página web. Algunas de las etiquetas básicas más comunes incluyen:
- «p» para párrafos
- «br» para saltos de línea
- «b» para dar formato en negrita
- «i» para dar formato en cursiva
- «u» para subrayar
- «h1» a «h6» para encabezados
- «div» para dividir el contenido en secciones
- «span» para aplicar formato a un fragmento de texto dentro de un párrafo
A continuación se muestra un ejemplo de cómo se utilizan algunas de estas etiquetas:
<h1>Encabezado de nivel 1</h1>
<p>Este es un
<b>párrafo</b> con algunas palabras en
<i>cursiva</i> y en <b>negrita</b>.</p>
<p>Este es otro párrafo con una palabra
<u>subrayada</u> y un salto de línea <br> aquí.</p>
En este ejemplo, se utiliza la etiqueta «h1» para definir un encabezado de nivel 1. Luego se utilizan las etiquetas «p» para definir párrafos y las etiquetas «b», «i» y «u» para dar formato al texto dentro de los párrafos. También se utiliza la etiqueta «br» para insertar un salto de línea.
Es importante tener en cuenta que las etiquetas deben anidarse correctamente para que el documento HTML sea válido. Por ejemplo, si se utiliza una etiqueta de apertura «b» para dar formato en negrita, debe haber una etiqueta de cierre «b» correspondiente para cerrar el formato en negrita. De lo contrario, el formato en negrita se aplicará a todo el contenido posterior hasta que se encuentre una etiqueta de cierre «b».
4 – Enlaces y vínculos
Los enlaces y vínculos son una parte importante de HTML y se utilizan para conectar páginas web y recursos en Internet.
Para crear un enlace en HTML, se utiliza la etiqueta «a» (que significa «anchor» en inglés). La etiqueta «a» se utiliza junto con el atributo «href» para especificar el destino del enlace. El destino del enlace puede ser una dirección URL absoluta, como «https://www.example.com«, o una dirección URL relativa, que es una dirección relativa al documento HTML actual.
A continuación se muestra un ejemplo de cómo se utiliza la etiqueta «a» para crear un enlace:
<a href="https://www.example.com">Enlace a example.com</a>
En este ejemplo, se ha creado un enlace a la dirección «https://www.example.com» y se ha especificado el texto del enlace como «Enlace a example.com». Cuando alguien haga clic en el enlace, se abrirá la dirección especificada en un navegador web.
También es posible utilizar la etiqueta «a» para crear enlaces a recursos locales, como archivos de imágenes o documentos PDF. Por ejemplo:
<a href="/images/logo.png">Enlace a una imagen</a>
En este ejemplo, se ha creado un enlace a una imagen llamada «logo.png» que se encuentra en una carpeta llamada «images» en el mismo servidor que el documento HTML actual.
5 – Imágenes y multimedia
Para insertar imágenes en una página HTML, se utiliza la etiqueta «img». La etiqueta «img» es una etiqueta vacía, lo que significa que no tiene etiqueta de cierre y se utiliza únicamente para insertar una imagen en el documento.
La etiqueta «img» se utiliza junto con el atributo «src» para especificar la dirección URL de la imagen que se desea insertar. También se pueden utilizar otros atributos opcionales, como «alt» para proporcionar una descripción de la imagen para los usuarios de lectores de pantalla y «width» y «height» para especificar el tamaño de la imagen en pixels.
A continuación se muestra un ejemplo de cómo se utiliza la etiqueta «img» para insertar una imagen en una página HTML:
<img src="/images/logo.png" alt="Logo de la empresa" width="200" height="100">
En este ejemplo, se ha insertado una imagen llamada «logo.png» que se encuentra en una carpeta llamada «images» en el mismo servidor que el documento HTML actual. También se ha proporcionado una descripción de la imagen con el atributo «alt» y se ha especificado el tamaño de la imagen en pixels con los atributos «width» y «height».
Además de las imágenes, también es posible insertar otros tipos de multimedia, como vídeos y audio, en una página HTML utilizando las etiquetas «video» y «audio». Estas etiquetas se utilizan de manera similar a la etiqueta «img», pero se pueden proporcionar múltiples fuentes de media y opciones de control para el reproductor de media.
6 – Tablas
Las tablas son una forma común de presentar datos en una página HTML. Una tabla se compone de filas y columnas de celdas de datos, y se utilizan para organizar y presentar información de manera clara y fácil de entender.
Para crear una tabla en HTML, se utilizan las etiquetas «table», «tr» (para filas), «td» (para celdas de datos) y «th» (para encabezados de celda). La etiqueta «table» define el inicio y el final de la tabla, y las etiquetas «tr» definen las filas de la tabla. Las celdas de datos se colocan dentro de las filas y se definen con las etiquetas «td», mientras que los encabezados de celda se definen con las etiquetas «th».
A continuación se muestra un ejemplo de cómo se utilizan estas etiquetas para crear una tabla:
<table>
<tr>
<th>Encabezado 1</th>
<th>Encabezado 2</th>
</tr>
<tr>
<td>Fila 1, columna 1</td>
<td>Fila 1, columna 2</td>
</tr>
<tr>
<td>Fila 2, columna 1</td>
<td>Fila 2, columna 2</td>
</tr>
</table>
En este ejemplo, se ha creado una tabla con dos encabezados de celda («Encabezado 1» y «Encabezado 2») y dos filas de celdas de datos. También es posible utilizar atributos opcionales, como «colspan» y «rowspan», para combinar celdas o crear celdas que abarquen varias filas o columnas.
Es importante tener en cuenta que las tablas deben estructurarse correctamente para que sean válidas y se muestren correctamente en el navegador. Esto significa que cada etiqueta de apertura debe tener una etiqueta de cierre correspondiente y que las etiquetas deben anidarse correctamente.
7 – Formularios y entrada de datos
Los formularios son una parte importante de muchos sitios web y se utilizan para recopilar información de los usuarios, como sus nombres, direcciones de correo electrónico y números de teléfono.
En HTML, se utilizan las etiquetas «form», «input», «textarea» y «button» para crear formularios y campos de entrada de datos. La etiqueta «form» define el inicio y el final del formulario y se utiliza junto con el atributo «action» para especificar la página a la que se envían los datos del formulario.
Los campos de entrada de datos se colocan dentro del formulario y se definen con las etiquetas «input», «textarea» o «select». La etiqueta «input» se utiliza para crear diferentes tipos de campos de entrada, como campos de texto, casillas de verificación y botones de opción. La etiqueta «textarea» se utiliza para crear un área de texto multilínea y la etiqueta «select» se utiliza para crear un menú desplegable.
A continuación se muestra un ejemplo de cómo se utilizan estas etiquetas para crear un formulario:
<form action="/enviar-datos" method="post">
<label for="nombre">Nombre:</label>
<input type="text" name="nombre" required pattern="[A-Za-z]{3,}" minlength="3" maxlength="30">
<br>
<label for="correo">Correo electrónico:</label>
<input type="email" name="correo" required>
<br>
<label for="mensaje">Mensaje:</label>
<textarea name="mensaje" required rows="4" cols="50"></textarea>
<br>
<input type="submit" value="Enviar">
</form>
En este ejemplo, se ha añadido un campo de entrada de tipo «email» y un área de texto multilínea. También se ha añadido un botón de envío con la etiqueta «input» y el atributo «type» establecido en «submit». Cuando el usuario haga clic en el botón, se enviarán los datos del formulario a la página especificada en el atributo «action» del formulario.
Es importante tener en cuenta que los formularios deben utilizar el método «post» para enviar los datos al servidor de forma segura. El método «get» se utiliza para recuperar datos del servidor y no debe utilizarse para enviar datos sensibles a través de un formulario.
8 – Estilos y diseño con CSS
La validación de formularios es un proceso importante para asegurarse de que los datos que se envían a través de un formulario son válidos y seguir cumpliendo con los requisitos del sitio web.
En HTML, es posible utilizar atributos especiales para validar los campos de entrada de datos de un formulario y asegurar que los datos sean válidos antes de enviarlos al servidor. Algunos de estos atributos incluyen:
- «required» para indicar que un campo es obligatorio y debe rellenarse antes de enviar el formulario
- «pattern» para especificar un patrón que debe cumplir el valor del campo para que sea válido
- «min» y «max» para establecer límites mínimos y máximos en el valor de un campo
- «minlength» y «maxlength» para establecer límites mínimos y máximos en la longitud de un campo
A continuación se muestra un ejemplo de cómo se utilizan algunos de estos atributos para validar un campo de entrada de texto:
<input type="text" name="nombre" required pattern="[A-Za-z]{3,}" minlength="3" maxlength="30">
En este ejemplo, se ha creado un campo de entrada de texto que es obligatorio rellenar (gracias al atributo «required») y debe contener sólo letras (gracias al atributo «pattern»). También se ha establecido un límite mínimo de 3 caracteres y un límite máximo de 30 caracteres (gracias a los atributos «minlength» y «maxlength»).
Es importante tener en cuenta que la validación de formularios en HTML sólo es una medida de seguridad básica y no debe utilizarse como única forma de validar los datos. Es recomendable validar los datos también en el lado del servidor para asegurarse de que cumplen con todos los requisitos necesarios.
9 – Semántica y etiquetas de contenido en HTML5
La etiqueta «canvas» es una etiqueta de HTML5 que se utiliza para crear gráficos en línea y animaciones dinámicas. El elemento «canvas» es una zona rectangular en la que se pueden dibujar gráficos mediante JavaScript y se puede utilizar para crear una amplia variedad de efectos visuales.
Para utilizar la etiqueta «canvas», se debe especificar el tamaño del área de dibujo utilizando los atributos «width» y «height». Luego, se puede utilizar JavaScript para dibujar en el canvas.
A continuación se muestra un ejemplo de cómo se utiliza la etiqueta «canvas» para dibujar una línea:
<canvas id="miCanvas" width="200" height="100"></canvas>
<script>
var canvas = document.getElementById("miCanvas");
var ctx = canvas.getContext("2d");
ctx.moveTo(0, 0);
ctx.lineTo(200, 100);
ctx.stroke();
</script>
En este ejemplo, se ha creado un elemento «canvas» de 200 pixels de ancho y 100 pixels de alto. Luego, se ha utilizado JavaScript para obtener un contexto de dibujo 2D y dibujar una línea desde la esquina superior izquierda (0,0) hasta la esquina inferior derecha (200,100). Finalmente, se ha utilizado el método «stroke» para dibujar la línea en el canvas.
Además de dibujar líneas, también es posible utilizar la etiqueta «canvas» para dibujar arcos, rectángulos, imágenes y texto. También se pueden utilizar animaciones y eventos de mouse para crear gráficos y juegos interactivos en línea.
10 – Canvas y gráficos en HTML5
La geolocalización es una característica de HTML5 que permite a los sitios web determinar la ubicación geográfica del usuario. Esto se puede utilizar para proporcionar una experiencia personalizada al usuario, como mostrar contenido relevante basado en su ubicación o para proporcionar servicios como mapas y direcciones.
Para utilizar la geolocalización en una página web, es necesario utilizar el objeto «navigator.geolocation» de JavaScript. Este objeto proporciona métodos para acceder a la ubicación del usuario y para monitorear cambios en su ubicación.
A continuación se muestra un ejemplo de cómo se puede utilizar el objeto «navigator.geolocation» para obtener la ubicación del usuario y mostrarla en un mapa:
<div id="mapa"></div>
<script>
var mapa = document.getElementById("mapa");
navigator.geolocation.getCurrentPosition(function(posicion) {
var latitud = posicion.coords.latitude;
var longitud = posicion.coords.longitude;
var coordenadas = new google.maps.LatLng(latitud, longitud);
var opciones = {
zoom: 15,
center: coordenadas,
mapTypeId: google.maps.MapTypeId.ROADMAP
};
var map = new google.maps.Map(mapa, opciones);
var marcador = new google.maps.Marker({
position: coordenadas,
map: map,
title: "Mi ubicación"
});
});</script>
En este ejemplo, se ha utilizado el objeto «navigator.geolocation» para obtener la ubicación del usuario y se han almacenado las coordenadas de latitud y longitud en las variables «latitud» y «longitud». Luego, se ha utilizado la API de Google Maps para crear un mapa y un marcador en la ubicación del usuario.
Es importante tener en cuenta que para utilizar la API de Google Maps, es necesario obtener una clave de API y añadir una etiqueta «script» con la URL de la API en la página. También es necesario incluir un elemento «div» con un ID especificado en el código para mostrar el mapa.
11 – Geolocalización y uso de datos en HTML5
La historia de HTML comienza a finales de la década de 1980, cuando el científico de la información Tim Berners-Lee desarrolló un lenguaje de marcado llamado HTML (HyperText Markup Language) para la World Wide Web. HTML se utilizaba para estructurar y dar formato a los documentos de la World Wide Web, y permitía a los usuarios crear enlaces entre documentos y recursos de la Web.
A lo largo de los años, se han desarrollado diferentes versiones de HTML, cada una con nuevas características y mejoras. La primera versión de HTML se publicó en 1993 y se llamó HTML 1.0. A partir de entonces, se han publicado varias versiones de HTML, incluyendo HTML 2.0, HTML 3.2, HTML 4.01 y HTML 5.
HTML 5 es la última versión de HTML y fue publicada en 2014. HTML 5 introduce varias nuevas características y mejoras, como soporte para audio y vídeo sin la necesidad de plugins, mejoras en la forma en que se maneja la estructura y el contenido de los documentos, y soporte para gráficos en línea y geolocalización. HTML 5 también es más fácil de aprender y utilizar que las versiones anteriores de HTML, y se está convirtiendo en la norma para el desarrollo de sitios web.
12 – Audio y video en HTML5
La etiqueta «video» es una etiqueta de HTML5 que se utiliza para incrustar vídeos en una página web. La etiqueta «video» es compatible con la mayoría de los navegadores modernos y permite a los usuarios ver vídeos en línea sin la necesidad de instalar plugins adicionales.
Para utilizar la etiqueta «video», se debe especificar el archivo de vídeo que se desea reproducir utilizando el atributo «src» y, opcionalmente, se pueden especificar el ancho y el alto del reproductor de vídeo utilizando los atributos «width» y «height». También se pueden utilizar atributos como «controls» para mostrar controles de reproducción y «autoplay» para reproducir el vídeo automáticamente al cargar la página.
A continuación se muestra un ejemplo de cómo se utiliza la etiqueta «video» para incrustar un vídeo en una página web:
<video src="mi-video.mp4" width="320" height="240" controls autoplay></video>
En este ejemplo, se ha incrustado un vídeo llamado «mi-video.mp4» con un ancho de 320 pixels y un alto de 240 pixels. También se han habilitado los controles de reproducción y se ha establecido el atributo «autoplay» para reproducir el vídeo automáticamente al cargar la página.
Es importante tener en cuenta que la etiqueta «video» sólo es compatible con algunos formatos de vídeo, como MP4, WebM y Ogg. Si se utiliza un formato de vídeo no compatible, el reproductor de vídeo no se mostrará en el navegador.
13 – Web Storage y bases de datos en HTML5
El almacenamiento web es una característica de HTML5 que permite a los sitios web almacenar datos en el navegador del usuario. El almacenamiento web proporciona una forma segura y fiable de almacenar datos en el lado del cliente y está diseñado para reemplazar a las cookies, que se utilizan a menudo para almacenar pequeñas cantidades de datos en el navegador.
El almacenamiento web se puede utilizar para almacenar cualquier tipo de datos, como preferencias de usuario, información de inicio de sesión y datos de carrito de compras. Los datos almacenados en el almacenamiento web se mantienen disponibles incluso si el usuario cierra el navegador o reinicia su ordenador, lo que lo convierte en una opción ideal para el almacenamiento a largo plazo de datos.
Para utilizar el almacenamiento web en una página web, es necesario utilizar el objeto «window.localStorage» de JavaScript. Este objeto proporciona métodos para almacenar y recuperar datos del almacenamiento web.
A continuación se muestra un ejemplo de cómo se puede utilizar el objeto «localStorage» para almacenar y recuperar un dato llamado «nombreUsuario»:
// Almacenar el dato
localStorage.setItem("nombreUsuario", "Juan Pérez");var nombreUsuario = localStorage.getItem(«nombreUsuario»);
En este ejemplo, se ha utilizado el método «setItem» para almacenar el dato «nombreUsuario» en el almacenamiento web.
El objeto «sessionStorage» se utiliza de la misma manera que «localStorage», pero los métodos «setItem» y «getItem» se aplican a «sessionStorage» en lugar de «localStorage».
A continuación se muestra un ejemplo de cómo se puede utilizar «sessionStorage» para almacenar y recuperar un dato llamado «nombreUsuario»:
// Almacenar el dato
sessionStorage.setItem("nombreUsuario", "Juan Pérez");// Recuperar el dato
var nombreUsuario = sessionStorage.getItem("nombreUsuario");
Es importante tener en cuenta que el almacenamiento web sólo está disponible en navegadores que lo soporten y que los datos almacenados en el almacenamiento web pueden ser eliminados por el usuario o por el sistema. Por lo tanto, es importante diseñar la aplicación de manera que maneje adecuadamente estos casos.
14 – Web Workers y multi-hilo en HTML5
La etiqueta «form» es una etiqueta de HTML que se utiliza para crear formularios en una página web. Los formularios son utilizados para recopilar información del usuario, como nombres, direcciones de correo electrónico y contraseñas.
Para utilizar la etiqueta «form», se debe especificar la acción a realizar cuando se envía el formulario utilizando el atributo «action» y el método HTTP a utilizar (normalmente «get» o «post») utilizando el atributo «method». Luego, se pueden añadir elementos de formulario como campos de texto, botones y elementos de menú utilizando etiquetas como «input», «button» y «select».
A continuación se muestra un ejemplo de cómo se utiliza la etiqueta «form» para crear un formulario de inicio de sesión:
<form action="/login" method="post">
<label for="email">Correo electrónico:</label><br>
<input type="email" id="email" name="email"><br>
<label for="password">Contraseña:</label><br>
<input type="password" id="password" name="password"><br><br>
<input type="submit" value="Iniciar sesión">
</form>
En este ejemplo, se ha creado un formulario con dos campos de texto para el correo electrónico y la contraseña y un botón de envío. Al hacer clic en el botón «Iniciar sesión», se enviará el formulario al servidor utilizando el método «post» y se procesará la acción «/login».
15 – Aplicaciones Web y el uso de HTML5 en aplicaciones móviles
Las etiquetas «style» y «link» son etiquetas de HTML que se utilizan para añadir estilos a una página web. La etiqueta «style» se utiliza para incluir estilos en línea en una página, mientras que la etiqueta «link» se utiliza para enlazar a un archivo de estilos externo.
La etiqueta «style» se utiliza de la siguiente manera:
<style>
/* Declaraciones de estilo */
</style>
Dentro de la etiqueta «style», se pueden incluir declaraciones de estilo utilizando la sintaxis CSS (Cascading Style Sheets). Las declaraciones de estilo se aplicarán a los elementos de la página que cumplan con las reglas especificadas.
A continuación se muestra un ejemplo de cómo se pueden utilizar las etiquetas «style» y «link» para añadir estilos a una página web:
<head>
<style>
body {
background-color: lightblue;
}
</style>
<link rel="stylesheet" href="estilos.css">
</head>
En este ejemplo, se ha utilizado la etiqueta «style» para establecer el color de fondo del cuerpo de la página en azul claro y se ha utilizado la etiqueta «link» para enlazar a un archivo de estilos externo llamado «estilos.css». Los estilos del archivo «estilos.css» también se aplicarán a la página.
Es importante tener en cuenta que las declaraciones de estilo incluidas en la etiqueta «style» tienen prioridad sobre las declaraciones de estilo enlazadas a través de la etiqueta «link», lo que significa que las declaraciones de estilo incluidas en «style» sobrescribirán a las declaraciones de estilo en el archivo externo si hay conflictos.
16 – Depuración y herramientas de desarrollo para HTML5.
La etiqueta «canvas» es una etiqueta de HTML5 que se utiliza para dibujar gráficos en línea en una página web. La etiqueta «canvas» proporciona un área en la que se pueden dibujar líneas, formas y imágenes utilizando JavaScript.
Para utilizar la etiqueta «canvas», se debe especificar el ancho y el alto del área de dibujo utilizando los atributos «width» y «height». Luego, se puede utilizar JavaScript para dibujar en el área de dibujo utilizando el objeto «canvas» y sus métodos de dibujo.
A continuación se muestra un ejemplo de cómo se utiliza la etiqueta «canvas» para dibujar una línea en una página web:
<canvas id="miCanvas" width="200" height="100"></canvas>
<script>
var canvas = document.getElementById("miCanvas");
var contexto = canvas.getContext("2d");
contexto.moveTo(0, 0);
contexto.lineTo(200, 100);
contexto.stroke();
</script>
En este ejemplo, se ha creado un área de dibujo de 200 pixels de ancho y 100 pixels de alto y se ha utilizado JavaScript para dibujar una línea desde el punto (0,0) hasta el punto (200,100).
Además de dibujar líneas, la etiqueta «canvas» también se puede utilizar para dibujar formas como rectángulos, círculos y arcos utilizando los métodos «rect», «arc» y «fill». También se pueden utilizar imágenes en el área de dibujo utilizando el método «drawImage».
A continuación se muestra un ejemplo de cómo se pueden utilizar estos métodos para dibujar un rectángulo rojo y una imagen en el área de dibujo:
<canvas id="miCanvas" width="200" height="100"></canvas>
<script>
var canvas = document.getElementById("miCanvas");
var contexto = canvas.getContext("2d");
// Dibujar rectángulo rojo
contexto.fillStyle = "red";
contexto.fillRect(10, 10, 50, 50);
// Dibujar imagen
var imagen = new Image();
imagen.src = "mi-imagen.jpg";
imagen.onload = function() {
contexto.drawImage(imagen, 70, 10);
};
</script>
En este ejemplo, se ha utilizado el método «fillRect» para dibujar un rectángulo rojo en la posición (10,10) con un ancho de 50.