SlideShare una empresa de Scribd logo
1 de 12
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
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
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
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
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
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
}
}
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
}
}
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
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
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
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>
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
}

Más contenido relacionado

Similar a HTML CICLOS 7 Y 8.pptx

Similar a HTML CICLOS 7 Y 8.pptx (20)

Diseño web
Diseño webDiseño web
Diseño web
 
Diseño web
Diseño webDiseño web
Diseño web
 
HTML
HTMLHTML
HTML
 
Como crear paginas en html
Como crear paginas en htmlComo crear paginas en html
Como crear paginas en html
 
Tp 4 alvaro
Tp 4 alvaroTp 4 alvaro
Tp 4 alvaro
 
Diseño web
Diseño webDiseño web
Diseño web
 
Programacion - Php
Programacion - PhpProgramacion - Php
Programacion - Php
 
PHP IUTE
PHP IUTEPHP IUTE
PHP IUTE
 
Elementos y recomendaciones generales
Elementos y recomendaciones generalesElementos y recomendaciones generales
Elementos y recomendaciones generales
 
Estructura basica de una pagina web en html
Estructura basica de una pagina web en htmlEstructura basica de una pagina web en html
Estructura basica de una pagina web en html
 
Alojamiento de páginas web
Alojamiento de páginas webAlojamiento de páginas web
Alojamiento de páginas web
 
Diseño de páginas Web
Diseño de páginas Web Diseño de páginas Web
Diseño de páginas Web
 
Html
HtmlHtml
Html
 
Guia html 1
Guia html 1Guia html 1
Guia html 1
 
Procedimiento la wed
Procedimiento  la wedProcedimiento  la wed
Procedimiento la wed
 
cargar un website en la red social
cargar un website en la red socialcargar un website en la red social
cargar un website en la red social
 
Taller de Proyectos Digitales
Taller de Proyectos DigitalesTaller de Proyectos Digitales
Taller de Proyectos Digitales
 
WPO para bloggers de viaje: mejora el tiempo de carga de tu blog
WPO para bloggers de viaje: mejora el tiempo de carga de tu blogWPO para bloggers de viaje: mejora el tiempo de carga de tu blog
WPO para bloggers de viaje: mejora el tiempo de carga de tu blog
 
Pre 1
Pre 1Pre 1
Pre 1
 
5 servidor web
5 servidor web5 servidor web
5 servidor web
 

Último

Historia y técnica del collage en el arte
Historia y técnica del collage en el arteHistoria y técnica del collage en el arte
Historia y técnica del collage en el arteRaquel Martín Contreras
 
la unidad de s sesion edussssssssssssssscacio fisca
la unidad de s sesion edussssssssssssssscacio fiscala unidad de s sesion edussssssssssssssscacio fisca
la unidad de s sesion edussssssssssssssscacio fiscaeliseo91
 
DECÁGOLO DEL GENERAL ELOY ALFARO DELGADO
DECÁGOLO DEL GENERAL ELOY ALFARO DELGADODECÁGOLO DEL GENERAL ELOY ALFARO DELGADO
DECÁGOLO DEL GENERAL ELOY ALFARO DELGADOJosé Luis Palma
 
MAYO 1 PROYECTO día de la madre el amor más grande
MAYO 1 PROYECTO día de la madre el amor más grandeMAYO 1 PROYECTO día de la madre el amor más grande
MAYO 1 PROYECTO día de la madre el amor más grandeMarjorie Burga
 
EXPECTATIVAS vs PERSPECTIVA en la vida.
EXPECTATIVAS vs PERSPECTIVA  en la vida.EXPECTATIVAS vs PERSPECTIVA  en la vida.
EXPECTATIVAS vs PERSPECTIVA en la vida.DaluiMonasterio
 
LA ECUACIÓN DEL NÚMERO PI EN LOS JUEGOS OLÍMPICOS DE PARÍS. Por JAVIER SOLIS ...
LA ECUACIÓN DEL NÚMERO PI EN LOS JUEGOS OLÍMPICOS DE PARÍS. Por JAVIER SOLIS ...LA ECUACIÓN DEL NÚMERO PI EN LOS JUEGOS OLÍMPICOS DE PARÍS. Por JAVIER SOLIS ...
LA ECUACIÓN DEL NÚMERO PI EN LOS JUEGOS OLÍMPICOS DE PARÍS. Por JAVIER SOLIS ...JAVIER SOLIS NOYOLA
 
2024 - Expo Visibles - Visibilidad Lesbica.pdf
2024 - Expo Visibles - Visibilidad Lesbica.pdf2024 - Expo Visibles - Visibilidad Lesbica.pdf
2024 - Expo Visibles - Visibilidad Lesbica.pdfBaker Publishing Company
 
texto argumentativo, ejemplos y ejercicios prácticos
texto argumentativo, ejemplos y ejercicios prácticostexto argumentativo, ejemplos y ejercicios prácticos
texto argumentativo, ejemplos y ejercicios prácticosisabeltrejoros
 
Factores ecosistemas: interacciones, energia y dinamica
Factores ecosistemas: interacciones, energia y dinamicaFactores ecosistemas: interacciones, energia y dinamica
Factores ecosistemas: interacciones, energia y dinamicaFlor Idalia Espinoza Ortega
 
Informatica Generalidades - Conceptos Básicos
Informatica Generalidades - Conceptos BásicosInformatica Generalidades - Conceptos Básicos
Informatica Generalidades - Conceptos BásicosCesarFernandez937857
 
GLOSAS Y PALABRAS ACTO 2 DE ABRIL 2024.docx
GLOSAS  Y PALABRAS ACTO 2 DE ABRIL 2024.docxGLOSAS  Y PALABRAS ACTO 2 DE ABRIL 2024.docx
GLOSAS Y PALABRAS ACTO 2 DE ABRIL 2024.docxAleParedes11
 
programa dia de las madres 10 de mayo para evento
programa dia de las madres 10 de mayo  para eventoprograma dia de las madres 10 de mayo  para evento
programa dia de las madres 10 de mayo para eventoDiegoMtsS
 
TEMA 13 ESPAÑA EN DEMOCRACIA:DISTINTOS GOBIERNOS
TEMA 13 ESPAÑA EN DEMOCRACIA:DISTINTOS GOBIERNOSTEMA 13 ESPAÑA EN DEMOCRACIA:DISTINTOS GOBIERNOS
TEMA 13 ESPAÑA EN DEMOCRACIA:DISTINTOS GOBIERNOSjlorentemartos
 
Herramientas de Inteligencia Artificial.pdf
Herramientas de Inteligencia Artificial.pdfHerramientas de Inteligencia Artificial.pdf
Herramientas de Inteligencia Artificial.pdfMARIAPAULAMAHECHAMOR
 
PPT GESTIÓN ESCOLAR 2024 Comités y Compromisos.pptx
PPT GESTIÓN ESCOLAR 2024 Comités y Compromisos.pptxPPT GESTIÓN ESCOLAR 2024 Comités y Compromisos.pptx
PPT GESTIÓN ESCOLAR 2024 Comités y Compromisos.pptxOscarEduardoSanchezC
 
Lecciones 04 Esc. Sabática. Defendamos la verdad
Lecciones 04 Esc. Sabática. Defendamos la verdadLecciones 04 Esc. Sabática. Defendamos la verdad
Lecciones 04 Esc. Sabática. Defendamos la verdadAlejandrino Halire Ccahuana
 

Último (20)

Historia y técnica del collage en el arte
Historia y técnica del collage en el arteHistoria y técnica del collage en el arte
Historia y técnica del collage en el arte
 
la unidad de s sesion edussssssssssssssscacio fisca
la unidad de s sesion edussssssssssssssscacio fiscala unidad de s sesion edussssssssssssssscacio fisca
la unidad de s sesion edussssssssssssssscacio fisca
 
DECÁGOLO DEL GENERAL ELOY ALFARO DELGADO
DECÁGOLO DEL GENERAL ELOY ALFARO DELGADODECÁGOLO DEL GENERAL ELOY ALFARO DELGADO
DECÁGOLO DEL GENERAL ELOY ALFARO DELGADO
 
Power Point: "Defendamos la verdad".pptx
Power Point: "Defendamos la verdad".pptxPower Point: "Defendamos la verdad".pptx
Power Point: "Defendamos la verdad".pptx
 
MAYO 1 PROYECTO día de la madre el amor más grande
MAYO 1 PROYECTO día de la madre el amor más grandeMAYO 1 PROYECTO día de la madre el amor más grande
MAYO 1 PROYECTO día de la madre el amor más grande
 
EXPECTATIVAS vs PERSPECTIVA en la vida.
EXPECTATIVAS vs PERSPECTIVA  en la vida.EXPECTATIVAS vs PERSPECTIVA  en la vida.
EXPECTATIVAS vs PERSPECTIVA en la vida.
 
LA ECUACIÓN DEL NÚMERO PI EN LOS JUEGOS OLÍMPICOS DE PARÍS. Por JAVIER SOLIS ...
LA ECUACIÓN DEL NÚMERO PI EN LOS JUEGOS OLÍMPICOS DE PARÍS. Por JAVIER SOLIS ...LA ECUACIÓN DEL NÚMERO PI EN LOS JUEGOS OLÍMPICOS DE PARÍS. Por JAVIER SOLIS ...
LA ECUACIÓN DEL NÚMERO PI EN LOS JUEGOS OLÍMPICOS DE PARÍS. Por JAVIER SOLIS ...
 
2024 - Expo Visibles - Visibilidad Lesbica.pdf
2024 - Expo Visibles - Visibilidad Lesbica.pdf2024 - Expo Visibles - Visibilidad Lesbica.pdf
2024 - Expo Visibles - Visibilidad Lesbica.pdf
 
texto argumentativo, ejemplos y ejercicios prácticos
texto argumentativo, ejemplos y ejercicios prácticostexto argumentativo, ejemplos y ejercicios prácticos
texto argumentativo, ejemplos y ejercicios prácticos
 
Factores ecosistemas: interacciones, energia y dinamica
Factores ecosistemas: interacciones, energia y dinamicaFactores ecosistemas: interacciones, energia y dinamica
Factores ecosistemas: interacciones, energia y dinamica
 
Informatica Generalidades - Conceptos Básicos
Informatica Generalidades - Conceptos BásicosInformatica Generalidades - Conceptos Básicos
Informatica Generalidades - Conceptos Básicos
 
GLOSAS Y PALABRAS ACTO 2 DE ABRIL 2024.docx
GLOSAS  Y PALABRAS ACTO 2 DE ABRIL 2024.docxGLOSAS  Y PALABRAS ACTO 2 DE ABRIL 2024.docx
GLOSAS Y PALABRAS ACTO 2 DE ABRIL 2024.docx
 
programa dia de las madres 10 de mayo para evento
programa dia de las madres 10 de mayo  para eventoprograma dia de las madres 10 de mayo  para evento
programa dia de las madres 10 de mayo para evento
 
Unidad 4 | Teorías de las Comunicación | MCDI
Unidad 4 | Teorías de las Comunicación | MCDIUnidad 4 | Teorías de las Comunicación | MCDI
Unidad 4 | Teorías de las Comunicación | MCDI
 
Unidad 3 | Teorías de la Comunicación | MCDI
Unidad 3 | Teorías de la Comunicación | MCDIUnidad 3 | Teorías de la Comunicación | MCDI
Unidad 3 | Teorías de la Comunicación | MCDI
 
TEMA 13 ESPAÑA EN DEMOCRACIA:DISTINTOS GOBIERNOS
TEMA 13 ESPAÑA EN DEMOCRACIA:DISTINTOS GOBIERNOSTEMA 13 ESPAÑA EN DEMOCRACIA:DISTINTOS GOBIERNOS
TEMA 13 ESPAÑA EN DEMOCRACIA:DISTINTOS GOBIERNOS
 
Defendamos la verdad. La defensa es importante.
Defendamos la verdad. La defensa es importante.Defendamos la verdad. La defensa es importante.
Defendamos la verdad. La defensa es importante.
 
Herramientas de Inteligencia Artificial.pdf
Herramientas de Inteligencia Artificial.pdfHerramientas de Inteligencia Artificial.pdf
Herramientas de Inteligencia Artificial.pdf
 
PPT GESTIÓN ESCOLAR 2024 Comités y Compromisos.pptx
PPT GESTIÓN ESCOLAR 2024 Comités y Compromisos.pptxPPT GESTIÓN ESCOLAR 2024 Comités y Compromisos.pptx
PPT GESTIÓN ESCOLAR 2024 Comités y Compromisos.pptx
 
Lecciones 04 Esc. Sabática. Defendamos la verdad
Lecciones 04 Esc. Sabática. Defendamos la verdadLecciones 04 Esc. Sabática. Defendamos la verdad
Lecciones 04 Esc. Sabática. Defendamos la verdad
 

HTML CICLOS 7 Y 8.pptx

  • 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 }