Ejemplos de Ejercicios

Ejercicio 1

Ejemplo de 2 párrafos en HTML


• Como realizar 2 parrafos
< !DOCTYPE html>
< html lang="es-ES">
< head>
< meta charset="utf-8">
< title>Ejemplo de 2 párrafos< /title>
< /head>
< body>
< p>Esto es un párrafo.< /p>
< p>Esto es otro párrafo.< /p>
< /body>
< /html>
Resolución 1

Inicio

Ejercicio 2

Ejemplo con comentarios en HTML


• Como realizar comentarios
< !--Ejemplo del Tutorial de HTML-->
< !DOCTYPE html>
< html lang="es-ES">
< head>
< meta charset="utf-8">
< title>Ejemplo con comentarios< /title>
< /head>
< body>
< !-- En el body hay 2 párrafos -->
< p>Esto es un párrafo.< /p>
< p>Esto es otro párrafo.< /p>
< /body>
< /html>
Resolución 2

Inicio

Ejercicio 3

Ejemplo de estilo


• Ejemplo de estilos en linea en HTML
< !DOCTYPE html>
< html lang="es-ES">
< head>
< meta charset="utf-8">
< title>Ejemplo de estilo en línea< /title>
< /head>
< body>
< p style="color:red">Esto es un párrafo de color rojo.< /p>
< /body>
< /html>
Resolución 3

• Ejemplo de estilo interno en HTML
< !DOCTYPE html>
< html lang="es-ES">
< head>
< meta charset="utf-8">
< title>Ejemplo de estilo interno< /title>
< style>
p {color:red;}
< /style>
< /head>
< body>
< p>Esto es un párrafo de color rojo.< /p>
< /body>
< /html>
Resolución 3

• Ejemplo de estilo externo en HTML
< !DOCTYPE html>
< html lang="es-ES">
< head>
< meta charset="utf-8">
< title>Ejemplo de estilo externo< /title>
< link rel="stylesheet" href="styles.css">
< /head>
< body>
< p>Esto es un párrafo de color rojo.< /p>
< /body>
< /html>
Resolución 3

• Ejemplo de párrafo rojo y centrado en HTML
< !DOCTYPE html>
< html lang="es-ES">
< head>
< meta charset="utf-8">
< title>Ejemplo de párrafo rojo y centrado< /title>
< style>
p {
color:red;
text-align:center;
}
< /style>
< /head>
< body>
< p>Esto es un párrafo de color rojo y centrado.< /p>
< /body>
< /html>
Resolución 3

• Ejemplo de uso del elemento "span" y del atributo class en HTML
< !DOCTYPE html>
< html lang="es-ES">
< head>
< meta charset="utf-8">
< title>Ejemplo uso del elemento span y del atributo class< /title>
< style>
.rojo {color:red;}
< /style>
< /head>
< body>
< p>Párrafo con < span class="rojo">dos palabras< /span> de color rojo.< /p>
< /body>
< /html>
Resolución 3

Inicio

Ejercicio 4

Parrafos


• Ejemplo de un párrafo en HTML
< !DOCTYPE html>
< html lang="es-ES">
< head>
< meta charset="utf-8">
< title>Ejemplo de un párrafo< /title>
< /head>
< body>
< p>Esto es un párrafo.< /p>
< /body>
< /html>
Resolución 3

• Ejemplo de 2 párrafos en HTML
< !DOCTYPE html>
< html lang="es-ES">
< head>
< meta charset="utf-8">
< title>Ejemplo de 2 párrafos< /title>
< /head>
< body>
< p>Esto es un párrafo.< /p>
< p>Esto es otro párrafo.< /p>
< /body>
< /html>
Resolución 3

• Ejemplo de párrafos con blancos en HTML
< !DOCTYPE html>
< html lang="es-ES">
< head>
< meta charset="utf-8">
< title>Ejemplo de párrafos con blancos< /title>
< /head>
< body>
< p>Párrafo con 6 espacios seguidos.< /p>
< p>Párrafo con


3 retornos de carro.< /p>
< p>Párrafo con 2 tabulaciones.< /p>
< /body>
< /html>
Resolución 3

• Ejemplo de uso del elemento "pre" en HTML
< !DOCTYPE html>
< html lang="es-ES">
< head>
< meta charset="utf-8">
< title>Ejemplo uso del elemento pre< /title>
< /head>
< body>
< pre>Párrafo con 6 espacios seguidos.< /pre>
< pre>Párrafo con
3 retornos de carro.< /pre>
< pre>Párrafo con 2 tabulaciones.< /pre>
< /body>
< /html>
Resolución 3

• Ejemplo de 3 párrafos en HTML
< !DOCTYPE html>
< html lang="es-ES">
< head>
< meta charset="utf-8">
< title>Ejemplo de 3 párrafos< /title>
< /head>
< body>
< p>Texto uno.< /p>
< p>Texto dos.< /p>
< p>Texto tres.< /p>
< /body>
< /html>
Resolución 3

• Ejemplo de uso del elemento "br" en HTML
< !DOCTYPE html>
< html lang="es-ES">
< head>
< meta charset="utf-8">
< title>Ejemplo uso del elemento br< /title>
< /head>
< body>
< p>Texto uno.< br>Texto dos.< br>Texto tres.< /p>
< /body>
< /html>
Resolución 3

• Ejemplo de uso del elemento "hr" en HTML
< !DOCTYPE html>
< html lang="es-ES">
< head>
< meta charset="utf-8">
< title>Ejemplo uso del elemento hr< /title>
< /head>
< body>
< p>Párrafo uno.< /p>
< hr>
< p>Párrafo dos.< /p>
< hr>
< p>Párrafo tres.< /p>
< /body>
< /html>
Resolución 3

Inicio

Ejercicio 5

Parrafos


• Ejemplo de texto en negrita en HTML
< !DOCTYPE html>
< html lang="es-ES">
< head>
< meta charset="utf-8">
< title>Ejemplo de texto en negrita< /title>
< /head>
< body>
< p>En este párrafo, < b>estas palabras se deben mostrar en negrita< /b>, en un navegador web.< /p>
< /body>
< /html>
Resolución 3

• Ejemplo de texto en cursiva en HTML
< !DOCTYPE html>
< html lang="es-ES">
< head>
< meta charset="utf-8">
< title>Ejemplo de texto en cursiva< /title>
< /head>
< body>
< p>En este párrafo, < i>estas palabras se deben mostrar en cursiva, en un navegador web.< /p>
< /body>
< /html>
Resolución 3

• Ejemplo de texto en cursiva y negrita en HTML
< !DOCTYPE html>
< html lang="es-ES">
< head>
< meta charset="utf-8">
< title>Ejemplo de texto en cursiva y negrita< /title>
< /head>
< body>
< p>En este párrafo, < i>de estas palabras en cursiva < b>estas también se ven en negrita< /b>< /i>, en un navegador web.< /p>
< /body>
< /html>
Resolución 3

• Ejemplo de texto strong y em en HTML
< !DOCTYPE html>
< html lang="es-ES">
< head>
< meta charset="utf-8">
< title>Ejemplo de texto strong y em< /title>
< /head>
< body>
< p>En este párrafo, < strong>estas palabras son de gran importancia< /strong> y < em>estas están enfatizadas< /em>, mostrándose en negrita y cursiva respectivamente en un navegador web.< /p>
< /body>
< /html>
Resolución 3

• Ejemplo de texto small en HTML
< !DOCTYPE html
< html lang="es-ES">
< head>
< meta charset="utf-8">
< title>Ejemplo de texto small< /title>
< /head>
< body>
< p>En este párrafo, < small>estas palabras se muestran más pequeñas< /small>, en un navegador web.< /p>
< /body>
< /html>
Resolución 3

• Ejemplo de texto subíndice y superíndice en HTML
< !DOCTYPE html>
< html lang="es-ES">
< head>
< meta charset="utf-8">
< title>Ejemplo de texto subíndice y superíndice< /title>
< /head>
< body>
< p>Texto normal.< sub>Texto subíndice.< /sub>< /p>
< p>Texto normal.< sup>Texto superíndice.< /sup>< /p>
< /body>
< /html>
Resolución 3

• Ejemplo de texto resaltado en HTML
< !DOCTYPE html>
< html lang="es-ES">
< head>
< meta charset="utf-8">
< title>Ejemplo de texto resaltado< /title>
< /head>
< body>
< p>En este párrafo, < mark>estas palabras se muestran resaltadas< /mark>, en un navegador web.< /p>
< /body>
< /html>
Resolución 3


Inicio

Mas Ejercicios

Elaborada por:

Estudiante Mariana Andres Francisco

Para:

CECyTEM TULTITLAN