El documento presenta una introducción a HTML5 dirigida a estudiantes de secundaria impartida por el profesor Robert Campo. Explica conceptos básicos como hipervínculos y etiquetas, e incluye ejemplos. También describe una actividad práctica en clase para que los estudiantes desarrollen sitios web vinculados entre sí usando el editor Notepad++.

1. 1
2
3
4
5
6
7
8
9
10
11
12
13
14
Programación‘HTML5’ {
< No necesitas mucha experiencia para
programar hábilmente >
HTml5 a tu medida - Ing. Robert Campo
[Para principiantes - Bachillerato]
}
Para 9°.html Secundaria.css

2. 1
2
3
4
5
6
7
8
9
10
11
12
13
14
01
< A cargo del Profesor
Robert Campo >
Oración Inicial
02
< Desempeño esperado: Aplico hiperenlaces y
etiquetas para formato de texto a las páginas
web.>
Hiperenlaces
03
< Realizar actividad en
clase >
Praáctica en clase
Tabla de ‘Contenido’ {
}
HTml5 a tu medida - Ing. Robert Campo
Para 9°.html Secundaria.css

3. 1
2
3
4
5
6
7
8
9
10
11
12
13
14
Oración ‘Inicial’;
«<! ––«Te damos gracias Dios Padre Celestial…
Por todas las bendiciones que día tras día nos regalas,
Te pido por nuestros estudiantes, para que les regales
un corazón dispuesto, oídos bien atentos, ojos bien
abiertos…
Dales señor todo el conocimiento, entendimiento, mentes
penetrantes, lucidez para aprender y mucho
discernimiento.
Te lo pedimos todos los docentes de todo corazón,
Amén. «––>«
HTml5 a tu medida - Ing. Robert Campo
Para 9°.html Secundaria.css

4. 1
2
3
4
5
6
7
8
9
10
11
12
13
14
Vamos a Explorar
¿Sabes qué es un hiperenlace?
HTml5 a tu medida - Ing. Robert Campo

5. 1
2
3
4
5
6
7
8
9
10
11
12
13
14
02 {
[Vamos a aprender-
Hiperenlaces]
<a href="colegio.html">Ir al colegio</a>
<a href="https://es.wikipedia.org/wiki/World_Wide_Web"
target="_blank">World Wide Web</a>
}
Para 9°.html Secundaria.css
HTml5 a tu medida - Ing. Robert Campo

6. 1
2
3
4
5
6
7
8
9
10
11
12
13
14
< Cuando queramos que los visitantes puedan navegar de manera
sencilla entre las páginas necesitaremos usar hipervínculos o
enlaces. Hablamos de un mecanismo que nos da el poder de
intercambiar la página que estamos visualizando o movernos con
rapidez de un apartado a otro. E incluso ir a lugares externos
que no nos pertenecen.>
< Direcciones web absolutas
Son aquellas que hacen referencia a un sitio web especifico
indicando la ruta de acceso donde se encuentra la página web,
debemos anotar que al no indicar la página web se asume que esta
es index.html. >
Concepto < /2 > {
Concepto < /1 > {
HTml5 a tu medida - Ing. Robert Campo
Para 9°.html Secundaria.css
}
}

7. 1
2
3
4
5
6
7
8
9
10
11
12
13
14
< Direcciones web Relativas
Son aquellas que hacen referencia a una página web y no se le
indica ruta de acceso y el navegador la busca en la misma
carpeta donde se está ejecutando nuestra página web que la
vincula.
Las direcciones relativas NO inician por http..>
< Nota:
Si la página se encuentra en una subcarpeta se debe hacer referencia a la subcarpeta un backSlash (/) y luego el
nombre de la página.
Ejemplo:Suponemos que la página está en una subcarpeta llamada ejemplo, debemos escribir así:
<a href=”ejemplo/hiperenlace.html”> Clic para ir hiperenlaces</a>
Se debe indicar la extensión de la página >
Concepto < /4 > {
Concepto < /3 > {
Programming Language
Para 9°.html Secundaria.css
}
}

8. 1
2
3
4
5
6
7
8
9
10
11
12
13
14
Actividad; {
‘Taller en clases:
Desarrolle 3 página web que se encuentren vinculadas entre sí, en la sala de sistemas
utilizando el editor Notepad++, debe tener en cuenta:
Descargue las imágenes y cópielas en la carpeta donde estarán las páginas web.
Entre a Notepad++ y escriba el código de las 3 páginas web por separado.
Grabe el código con las características indicadas.
Tenga en cuenta:
Nombre de la página web: Curso- Apellido Nombre Estudiante-Nombre Actividad
Ejemplo:
092- Palomino Jennifer- Tema Principal.html
092- Palomino Jennifer- Subtema1.html
092- Palomino Jennifer- Subtema2.html’
<p Actividad en clase >
} </p>
HTml5 a tu medida - Ing. Robert Campo
Para 9°.html Secundaria.css

9. 1
2
3
4
5
6
7
8
9
10
11
12
13
14
Que es esto? ‘Desarrollos_aula ?’
{
}
Languajes
Crear páginas web
Html
< Uso en clase >
70% Css
< Uso en clase >
30%
Hipertexto Botones
Videos e
imágenes
HTml5 a tu medida - Ing. Robert Campo
Para 9°.html Secundaria.css

10. 1
2
3
4
5
6
7
8
9
10
11
12
13
14
< “"La mayoría del software actual es
muy parecido a una pirámide egipcia,
con millones de ladrillos puestos unos
encima de otros sin una estructura
integral, simplemente realizada a base
de fuerza bruta y miles de esclavos"
-- Alan Kay” >
HTml5 a tu medida - Ing. Robert Campo
Para 9°.html Secundaria.css

11. 1
2
3
4
5
6
7
8
9
10
11
12
13
14
HTml5 a tu medida - Ing. Robert Campo
Para 9°.html Secundaria.css
Thanks; {
robert.campo@colbifficartagena.edu
.co
Ing. Electrónico/Esp. Gerencia de
Proyectos
‘¿Tienes alguna pregunta?’
<Espero pronto sus
comentarios>

12. 1
2
3
4
5
6
7
8
9
10
11
12
13
14
CREDITS: This presentation template was
created by Slidesgo, including icons by
Flaticon, and infographics & images by
Freepik
Thanks; {
robert.campo@colbifficartagena.edu.co
Ing. Electrónico/Esp. Gerencia de Proyectos
‘Do you have any questions?’
< Please keep this slide for attribution >
HTml5 a tu medida - Ing. Robert Campo
Para 9°.html Secundaria.css
}