HTML
Tutorial 1
Resumen Duración
35 min
En este tutorial conocerás los elementos básicos de HTML; en
especial: referencia del lenguaje de marcado y la estructura Autor
básica de un documento. Juan Vicente Pradilla Cerón
Fecha de Creación
Posteriormente, emplearás una herramienta en línea para hacer 02/08/2023
tu primer documento en HTML.
Licencia
1. Conociendo HTML
Duración: 15 min
Introducción a HTML
HTML (HyperText Markup Language) es un lenguaje de marcado para la creación de aplicaciones y
páginas Web. Fue estandarizado por la World Wide Web Consortium (W3C) y en la actualidad se
encuentra en su versión 5.3, actualizada por última vez en agosto de 2023.
HTML permite indicar una estructura lógica, mediante la combinación de elementos. Los elementos, a
su vez, contienen atributos y contenido. Un elemento generalmente tiene una etiqueta de inicio y una
etiqueta de cierre. Los atributos del elemento están contenidos en la etiqueta de inicio, y suelen tener
un valor asociado, mientras que, el contenido está ubicado entre las dos etiquetas. Algunos elementos,
no tienen contenido ni llevan una etiqueta de cierre.
Estructura del elemento
<etiqueta-inicio atributo1=”valor1” atributo2=”valor2”>contenido</etiqueta-cierre>
Ej: <div id=”idDiv” class=”classDiv” data-type=”content”>contenido</div>
Elementos básicos en HTML
● <!DOCTYPE html>: le dice al navegador que interprete el contenido como HTML5
● <html>: define el inicio del documento HTML, le indica al navegador debe interpretar las
etiquetas como HTML
● <script>: incrusta un script en una Web, o llama a uno mediante src="url del script". Se debe
incluir el tipo MIME en el atributo type
● <head>: define la cabecera del documento HTML; contiene información sobre el documento
que no se muestra directamente al usuario
○ <title>: define el título de la página
○ <link>: para vincular el sitio a hojas de estilo
● <body>: define el contenido del documento HTML. Esta es la parte del documento html que se
muestra al usuario
○ <header>: representa el encabezado de un documento
○ <main>: representa el contenido principal de un documento
○ <footer>: representa el pie de un documento
○ <nav>: representa una sección de un documento cuyo propósito es proporcionar
enlaces de navegación
○ <div>: división de un documento
○ <h1>, <h2>, …, <h6>: encabezados y subencabezados
○ <a>: vincula diferentes recursos Web entre sí; para utiliza el atributo href
○ <p>: define párrafos de texto
○ <ul>: lista desordenadas
■ <li>: cada elemento de la lista
○ <ol>: lista ordenadas
■ <li>: cada elemento de la lista
○ <table>: define la tabla
■ <tr>: fila
■ <th>: encabezado de columna
■ <td>: dato de una celda
○ <! -- y -- >: comentarios de código
Referencia al lenguaje de marcado HTML
Para facilitar el uso de HTML, te invito a estudiar la referencia del lenguaje que se ha publicado en el
sitio de Mozilla.
Estructura básica de un documento HTML
Generalmente a los programas aplicaciones y páginas Web realizadas usando HTML siguen la misma
estructura básica:
Estructura básica de documento HTML
<!DOCTYPE html>
<html lang="es">
<head>
<meta charset="utf-8" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<meta http-equiv="X-UA-Compatible" content="ie=edge" />
<title>Tutorial 01</title>
</head>
<body>
<header>
<div>Cabecera del documento</div>
</header>
<nav>
<a href="#">Enlace 1</a>
<a href="#">Enlace 2</a>
</nav>
<main>
<div>Contenido principal del documento</div>
</main>
<footer>
<div>Pie del documento</div>
</footer>
</body>
</html>
2. Primer documento en HTML
Duración: 20 min
Creando una cuenta en repositorio de código GitHub
En este tutorial utilizaremos el repositorio de código GitHub para trabajar con html. Para esto, en
primer lugar, se debe crear una cuenta.
1. Desde el navegador Web accede a la página de GitHub ([Link]
2. Crea una nueva cuenta, accediendo mediante el botón de la esquina superior derecha - Sign
up (Fig. 1)
Figura 1. Crear una cuenta personal en GitHub
3. Rellena los datos del formulario que se despliega, empleando tu cuenta institucional de la UAO
(Fig. 2)
Figura 2. Creando cuenta en GitHub con cuenta de la UAO
4. Finalmente, inicia sesión en GitHub
Creando una cuenta en el entorno de desarrollo CodeSandbox
En este tutorial utilizaremos el entorno de desarrollo CodeSandbox para trabajar con html. Para esto,
en primer lugar, se debe crear una cuenta.
1. Desde el navegador Web accede a la página de Codesandbox ([Link]
2. Inicia sesión en la aplicación, mediante el botón superior derecho - Sign In (Fig. 3)
Figura 3. Crear una cuenta en CodeSandbox - Paso 1
3. En el formulario que se despliega selecciona Iniciar sesión con GitHub, usa las credenciales de
la cuenta que creaste anteriormente (Fig. 4)
Figura 4. Crear una cuenta en CodeSandbox - Paso 2
4. Autoriza el uso a CodeSandbox desde GitHub mediante la ventana emergente
5. Selecciona tu nombre de usuario (sugiero que uses el usuario de tu correo institucional) y
termina la creación de la cuenta (Fig. 5)
Figura 5. Crear una cuenta en CodeSandbox - Paso 3
Creando una proyecto en CodeSandbox
En este tutorial utilizaremos el entorno de desarrollo CodeSandbox para trabajar con HTML y [Link].
1. Desde el navegador Web accede a la página de Codesandbox ([Link]
2. Dentro de CodeSandbox crea un nuevo proyecto, presionando en el botón New Sandbox (Fig.
6)
Figura 6. Crear un nuevo proyecto en CodeSandbox - Paso 1
3. Escoge la plantilla stastic desde las plantillas oficiales (Fig. 7)
Figura 7. Crear un nuevo proyecto en CodeSandbox - Paso 2
Modificando el documento HTML por defecto
1. Modifica el contenido del archivo [Link], usando el editor de código. Reemplaza el
contenido por el siguiente:
[Link]
<!DOCTYPE html>
<html lang="es">
<head>
<meta charset="utf-8" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<meta http-equiv="X-UA-Compatible" content="ie=edge" />
<title>Tutorial 01</title>
</head>
<body>
<header>
<div>Cabecera del documento</div>
</header>
<nav>
<a href="#">Enlace 1</a>
<a href="#">Enlace 2</a>
</nav>
<main>
<div>Contenido principal del documento 01</div>
</main>
<footer>
<div>Pie del documento</div>
</footer>
</body>
</html>
2. Guarda el archivo mediante el menú File/Save o usando el atajo de teclado Ctrl+s
3. Observa la salida del navegador y la consola (Fig. 8).
Figura 8. Resultado del código implementado
3. Retos
1. Acceda a la página Web creada desde su teléfono inteligente. Use la generación de código QR
desde el navegador
2. Cree otras dos páginas html adicionales y permitá la navegación entre las tres páginas. Use la
etiqueta <a>
3. En una de las páginas cree dos listas: una ordenada y otra desordenada. Use la etiquetas <ul>,
<ol> y <li>
4. En una página diferente cree una tabla de 4 columnas y 5 filas, con cabeceras para cada
columna. Use la etiquetas <table>, <tr>, <th> y <td>
5. En la última página cree un formulario. Use las etiquetas: <form>, <input>, <textarea>,
<select>, etc.