Want to create interactive content? It’s easy in Genially!

Get started free

Mis primeros pasos con HTML

Carlos Adolfo Reyes

Created on May 13, 2021

Afianza tus conocimientos con estos sencillos ejercicios. ¡Ánimo!

Start designing with a free template

Discover more than 1500 professional designs like these:

Branching Scenarios Challenge

Branching Scenario: Leadership Decisions

Branching Scenario: Save Christmas

Conflict Resolution: Branching Scenarios

Simple Branching Scenario

The Meeting Microlearning Mobile

Guess the Character

Explore all templates

Transcript

Afiance sus conocimientos sobre la estructura básica de un documento HTML y su codificación

Emplee este recurso una y otra vez mientras codifica en su dispositivo para afianzar sus conocimientos y habilidades. Puede desplazarse empleando los botones laterales < >

ORDENE EL CÓDIGO

¡Muy bien!

Arrastre cada línea a su lugar. Si el orden es corecto, observará Avance para iniciar...

1 2 3 4 5 6 7 8 9 10

¡Muy bien!

<!DOCTYPE html>

<title>Aprendo HTML</title>

</html>

</body>

</head>

<body>

<html lang="es-CO">

<head>

<meta charset="utf-8">

<p>¡Al fin me aprendí esta estructura!</p>

CORRECTO INCORRECTO

Evalúe cada línea de código arrastrando sobre la misma el elemento que corresponda. Luego use el botón Validar. Avance para iniciar...

<!DOCTYPE html> <html lang="es-CO> <head> <meta charset="uft-8"> <title>Aprendo HTML</tittle> <head> </body> <p>Elemento p: párrafo.</p> </body> </html>

1 2 3 4 5 6 7 8 9 10

VALIDAR

<¡DOCTYPE html> <html lang=es-CO"> <body> <meta charset="uft-8"> <title>HTML</title> <head> <body> <pre>Codificando...</p> </head> </html>

1 2 3 4 5 6 7 8 9 10

VALIDAR

SINTAXIS

Arrastre al lugar correcto. Avance para iniciar...

¡Buen trabajo!

Etiqueta de apertura

<p style="color:red">El odio no genera paz</p>

Etiqueta de cierre

Contenido

¡Buen trabajo!

¡Vamos por más!

<p style="color:red">Un párrafo.</p>

Etiqueta de apertura

Contenido

Etiqueta de cierre

Atributo

Valor

ELEMENTOS

Arrastre cada elemento/etiqueta al lugar correcto. Avance para iniciar...

h5

abbr

h4

sup

pre

Bloque de texto preformateado

Separador de contenido

Abreviatura

Encabezado

sub

Salto de línea

Texto de gran importancia

Encabezado

Comentarios al margen

strong

h3

Encabezado

Encabezado

Texto enfatizado

Contenido irrelevante

br

small

Superíndice

Itálica o cursiva

Encabezado

Subrayado

em

Párrafo

Bold o negrita

Resaltado

Subíndice

h1

h2

hr

mark

< >

ELEMENTOS QUE ADMITEN CONTENIDO

ELEMENTOS VACÍOS

meta

body

¡Muy bien!

head

br

hr

em

pre

h1

</>

Elemento con contenido

Elemento con contenido

¡Excelente!

Elemento vacío

Elemento vacío

<meta charset="utf-8">

<p style="color:red">Un párrafo.</p>

<p>Cuida el agua.</p>

<br>

</p>

<br>

</b>

juegos

social

<b>

<p>La <b>vida digital</b>:<br>compras<br>vida<br>social<br>juegos</p>

¡Excelente!

El sol es la estrella más cercana a la Tierra.

cercana

Tierra

sol

estrella

Tierra

estrella

cercana

sol

sol

cercana

estrella

Tierra

cercana

Tierra

<p>El <b>sol</b> es la <i>estrella</i> más cercana a la <mark>Tierra</mark>.</p>

LISTAS

Analice el código... lugo desarrolle los ejercicios propuestos. Avance para iniciar...

LISTA NO ORDENADA

ul - li

<ul>

<li>Elemento 1</li>

elementos

<li>Elemento 2</li>

<li>Elemento n</li>

</ul>

apariencia

estructura

LISTA ORDENADA

ol - li

<ol>

<li>Elemento 1</li>

elementos

<li>Elemento 2</li>

<li>Elemento n</li>

</ol>

apariencia

estructura

LISTA DE DESCRIPCIÓN

dl - dt - dd

<dl>

<dt>TÉRMINO 1</dt>

elementos

<dd>Descripción 1</dd>

<dt>TÉRMINO n</dt>

<dd>Descripción n</dd>

</dl>

apariencia

estructura

LISTA ORDENADA

LISTA DESCRIPCIÓN

LISTA NO ORDENADA

LISTA ORDENADA

ul - li

dl - dt - dd

ol - li

LISTA DESCRIPCIÓN

LISTA NO ORDENADA

1. Peras. 2. Fresas. 3. Uvas.

<li>

</ul>

1. Peras. 2. Fresas. 3. Uvas.

</dl>

<ol>

<dd>

</li>

</dt>

<ul>

<dl>

</ol>

<dt>

</dd>

  • Oxígeno
  • Azufre
  • Selenio

</li>

</dd>

</dt>

<li>

<li>

</li>

</ol>

<dd>

<dl>

<ul>

<li>

</dl>

<ol>

</li>

  • Oxígeno
  • Azufre
  • Selenio

</ul>

<dt>

<ol>

MICROSOFT Acrónimo de microcomputer y software.​ IBM Acrónimo de International Business Machines Corporation.​

</dd>

</li>

</dl>

</ol>

¡Lo tienes!

</dt>

<li>

</li>

</li>

<dd>

MICROSOFTAcrónimo de microcomputer y software.​IBMAcrónimo de International Business Machines Corporation.​

<dt>

<li>

<ul>

<li>

<dl>

</ul>

enlaces

Analice el código... lugo desarrolle los ejercicios propuestos. Avance para iniciar...

href

"http://www.b..."

"archivo.html"

elemento

valor

atributo

<p>Blog de Informática.</p>

<p>Blog de <a href="http://www.bytesperblog.blogspot.com">Informática.</a></p>

Blog de Informática.

Informática.

Blog de

Enlace a YouTube.

¡Excelente!

<p>Enlace a <a href="http://www.youtube.com">YouTube.</a></p>

</a>

"http://www.youtube.com"

<href>

"youtube.com"

<p>

<a>

href

</p>

Blog de

Informática.

El enlace usa una nueva pestaña.

El enlace usa la misma pestaña del navegador.

Blog de

Informática.

Blog de

Informática.

target

El enlace usa una nueva pestaña: atributo

<p>Blog de <a href="http://www.bytesperblog.blogspot.com" target="_blank">Informática.</a></p>

Los atributos se separan entrer sí por un espacio en blanco.

target="_blank"

Imágenes

Analice el código... lugo desarrolle los ejercicios propuestos. Avance para iniciar...

< ="corazon.png">

¡Excelente ritmo!

img

src

< ="uno.gif" ="300">

¡Muy bien!

src

img

width

Video & Audio

Analice el código... lugo desarrolle los ejercicios propuestos. Avance para iniciar...

¡Buen trabajo!

controls

src

video

mp4

caida

<video src="caida.mp4" controls>

¡Buen trabajo!

src

caida

controls

audio

mp3

<video src="caida.mp4" controls>

Tablas

Analice el código... lugo desarrolle los ejercicios propuestos. Avance para iniciar...

Entendemos las tablas como un arreglo de filas y columnas cuyas intersecciones producen celdas.

<table> </table>

Pero... en HTML no se codifican tablas. En su lugar, se codifican filas con celdas...

<table> </table>

El elemento table contiene la codificación de la tabla.

<table> <tr> </tr> </table>

El elemento tr (table row/fila) define cada fila de la tabla.

<table> <tr> <td>LUNES</td> </tr> </table>

El elemento td (table celd) define cada celda en la fila.

<table> <tr> <td>LUNES</td> <td>MARTES</td> <td>MIÉRCOLES</td> <td>JUEVES</td> <td>VIERNES</td> </tr> </table>

Tabla con UNA fila compuesta de cinco celdas.

LUNES MARTES MIERCOLES JUEVES VIERNES

<table> <tr> <td>LUNES</td> <td>MARTES</td> <td>MIÉRCOLES</td> <td>JUEVES</td> <td>VIERNES</td> </tr> </table>

<table> <tr> <td>LUNES</td> <td>MARTES</td> <td>MIÉRCOLES</td> <td>JUEVES</td> <td>VIERNES</td> </tr> <tr> <td>Matemáticas</td> <td>Inglés</td> <td>Español</td> <td>Económicas</td> <td>Informática</td> </tr> </table>

<table> <tr> <td>LUNES</td> <td>MARTES</td> <td>MIÉRCOLES</td> <td>JUEVES</td> <td>VIERNES</td> </tr> <tr> <td>Matemáticas</td> <td>Inglés</td> <td>Español</td> <td>Económicas</td> <td>Informática</td> </tr> <tr> <td>Matematicas</td> <td>Inglés</td> <td>Español</td> <td>Sociales</td> <td>Informática</td> </tr> <tr> <td>Estadística</td> <td>Políticas</td> <td>Ed. Física</td> <td>Etica</td> <td>Filosofía</td> </tr> </table>

Recuerde: se codifica por filas y celdas, no por columnas.

<table>

<tr>

¡Hola!

</table>

</tr>

<td>

</td>

¡Buen Trabajo!

<p>

¡Insista, persista y no desista que al final conquista!

</p>