HTML

 TUTORIAL BASICO HTM


crear un archivo en word pad con lo siguiente

Grabar el archivo con la extencion .HTML 

recuerde hacer una copia de el siguiente codigo ya que si lo graba en html no se podra volver a modificar en word pad , este guardando su programación en un archivo de drive


indague sobre las etiquetas que estan en amarillo para que entienda que son cada una



  1. <html>
  2. <head>
  3. <title>Floramics. Amigos de las flores</title>
  4. </head>
  5. <body>
  6. <BODY BGCOLOR="#FFDEAD" >
  7. <h1> <p align="center"><font color="#884433" size="6" face="Comic Sans MS, Arial, MS Sans Serif">Bienvenido a Floramics</p></h1>
  8. <h2> <p align="center"><font color="#884433" size="4" face="Comic Sans MS, Arial, MS Sans Serif">Presentación</h2>
  9. <p> <p align="center"><font color="#993366" size="4" face="Comic Sans MS, Arial, MS Sans Serif">En esta web encontrarás información sobre la  asociación y nuestra colección de fotografías de  flores.</font></p>
  10. <p> <p align="center"><font color="#884433" size="2" face="Comic Sans MS, Arial, MS Sans Serif">Tenemos las fotografías organizadas en diferentes categorías.</p>
  11. <div style="float: right"><img src="graficos/flor_ejemplo2.jpg" width="150" height="150" alt="Margaritas" /></div>
  12. <div style="float: left"><img src="graficos/flor_ejemplo2.jpg" width="150" height="150" alt="Rosas" /></div>
  13. <div style="float: left"><img src="graficos/flor_ejemplo2.jpg" width="150" height="150" alt="Asturias" /></div>
  14. <div style="float: right"><img src="graficos/flor_ejemplo2.jpg" width="150" height="150" alt="Tulipanes" /></div>
  15. <div style="float: left"><img src="graficos/flor_ejemplo2.jpg" width="150" height="150" alt="Orquídea" /></div>
  16. <div style="float: right"><img src="graficos/flor_ejemplo2.jpg" width="150" height="150" alt="Trèbol" /></div>
  17. <div align="center"><img src="https://depor.com/resizer/sdWS6BJ-OR6kyGlkrI49HVHo1nc=/1200x900/smart/arc-anglerfish-arc2-prod-elcomercio.s3.amazonaws.com/public/RHM53X4CLNFR7CYAGMAJDTG5AA.jpg" width="150" height="150" alt="Osos" /></div>
  18. <br>
  19. <br>
  20. <br>
  21. <br>
  22. <br>
  23. <br>
  24. <br>
  25. <br>
  26. <br>
  27. <p>Interesante enlace sobre flores: <a href="http://www.mundoflores.net">Mundoflores</a>
  28. <h2><font color="#000000"size="4" face="Comic Sans MS, Arial, MS Sans Serif">Contacto</h2>
  29. <p align="center"><font color="#993366" size="2" face="Comic Sans MS, Arial, MS Sans Serif">Si quieres comunicarte con nosotros visita nuestra página de contacto. &nbsp;&nbsp;Te esperamos.</font></p>
  30. </body>
  31. </html>



ACTIVIDAD 1

en su pagina web las primeras actividades seran guiadas por el docente 

tipo de titulo <h1>

subtitulo <h2>

información de la pagina web <p>

insertar imagenes desde http o direccion de una carpeta <div style="float: right">

el color de cualquier tipo de estructura "#884433"

cambiar el fondo de la pagina por una imagen con el siguiente código :

<BODY background="en este espacio va la dirección web la cual es de la imagen" >






ACTIVIDAD 2

Insertar gif
Insertar videos

<iframe width="560" height="315" src="https://www.youtube.com/embed/Op8jWmULJlA" frameborder="0" allowfullscreen></iframe>
Insertar imágenes móviles
Insertar textos que hablen de la pagina y sus contenidos aplicando la programación <h1> <p align="center"><font color="#884433" size="6" face="Comic Sans MS, Arial, MS Sans Serif">Bienvenido a Floramics</p></h1>
<h2> <p align="center"><font color="#884433" size="4" face="Comic Sans MS, Arial, MS Sans Serif">Presentación</h2>
<h3>
<h4>



ACTIVIDAD 3

Creación de híper vínculos

Creación de un blog , en blogger el cual tenga información de su pagina , con imágenes y videos , la dirección http es la que quedara en el hiper vinculo.

cambio de fondo : <body style="background-color:#FF0000;">

copiar la seccion de div antes de cerrar el body e insertar nuevas imagenes :

<div style="float: right"><img src="graficos/flor_ejemplo2.jpg" width="150" height="150" alt="Margaritas" /></div>
<div style="float: left"><img src="graficos/flor_ejemplo2.jpg" width="150" height="150" alt="Rosas" /></div>
<div style="float: left"><img src="graficos/flor_ejemplo2.jpg" width="150" height="150" alt="Asturias" /></div>
<div style="float: right"><img src="graficos/flor_ejemplo2.jpg" width="150" height="150" alt="Tulipanes" /></div>
<div style="float: left"><img src="graficos/flor_ejemplo2.jpg" width="150" height="150" alt="Orquídea" /></div>
<div style="float: right"><img src="graficos/flor_ejemplo2.jpg" width="150" height="150" alt="Trèbol" /></div>

<div align="center"><img src="https://depor.com/resizer/sdWS6BJ-OR6kyGlkrI49HVHo1nc=/1200x900/smart/arc-anglerfish-arc2-prod-elcomercio.s3.amazonaws.com/public/RHM53X4CLNFR7CYAGMAJDTG5AA.jpg" width="150" height="150" alt="Osos" /></div>

Creación de un segundo cuerpo en html repitiendo los pasos anteriores para si tener dos paginas una de informaci ón y copiar el hipervínculo de esta a la principa

Tener en cuenta que la programación en html <p>Interesante enlace sobre flores: <a href="http://www.mundoflores.net">Mundoflores</a>  Se puede replicar muchas veces





CODIGO BASE MAS BACKGROUND

  1. <html>
  2. <head>
  3. <title>Floramics. Amigos de las flores</title>
  4. </head>
  5. <body>
  6. <BODY background="http://tumamifero.com/wp-content/uploads/2018/04/oso-1.jpg" >
  7. <h1> <p align="center"><font color="#884433" size="6" face="Comic Sans MS, Arial, MS Sans Serif">Bienvenido a Floramics</p></h1>
  8. <h2> <p align="center"><font color="#884433" size="4" face="Comic Sans MS, Arial, MS Sans Serif">Presentación</h2>
  9. <p> <p align="center"><font color="#993366" size="4" face="Comic Sans MS, Arial, MS Sans Serif">En esta web encontrarás información sobre la  asociación y nuestra colección de fotografías de  flores.</font></p>
  10. <p> <p align="center"><font color="#884433" size="2" face="Comic Sans MS, Arial, MS Sans Serif">Tenemos las fotografías organizadas en diferentes categorías.</p>
  11. <div style="float: right"><img src="graficos/flor_ejemplo2.jpg" width="150" height="150" alt="Margaritas" /></div>
  12. <div style="float: left"><img src="graficos/flor_ejemplo2.jpg" width="150" height="150" alt="Rosas" /></div>
  13. <div style="float: left"><img src="graficos/flor_ejemplo2.jpg" width="150" height="150" alt="Asturias" /></div>
  14. <div style="float: right"><img src="graficos/flor_ejemplo2.jpg" width="150" height="150" alt="Tulipanes" /></div>
  15. <div style="float: left"><img src="graficos/flor_ejemplo2.jpg" width="150" height="150" alt="Orquídea" /></div>
  16. <div style="float: right"><img src="graficos/flor_ejemplo2.jpg" width="150" height="150" alt="Trèbol" /></div>
  17. <div align="center"><img src="https://depor.com/resizer/sdWS6BJ-OR6kyGlkrI49HVHo1nc=/1200x900/smart/arc-anglerfish-arc2-prod-elcomercio.s3.amazonaws.com/public/RHM53X4CLNFR7CYAGMAJDTG5AA.jpg" width="150" height="150" alt="Osos" /></div>
  18. <br>
  19. <br>
  20. <br>
  21. <br>
  22. <br>
  23. <br>
  24. <br>
  25. <br>
  26. <br>
  27. <p>Interesante enlace sobre flores: <a href="http://www.mundoflores.net">Mundoflores</a>
  28. <h2><font color="#000000"size="4" face="Comic Sans MS, Arial, MS Sans Serif">Contacto</h2>
  29. <p align="center"><font color="#993366" size="2" face="Comic Sans MS, Arial, MS Sans Serif">Si quieres comunicarte con nosotros visita nuestra página de contacto. &nbsp;&nbsp;Te esperamos.</font></p>
  30. </body>
  31. </html>


Comentarios

Publicar un comentario

Entradas populares de este blog

GRADO 11

Imagen
SEMANA 10 del 07 de agosto al 11 de septiembre Oración Reflexión Conclusión del tercer periodo y conceptos.  CONCEPTOS APRENDIDOS EN EL TERCER PERIODO  En esta clase se dará cierre a las temáticas del tercer periodo compartiendo los conceptos que aprendimos en el mismo y dialogando de su aplicación a la vida cotidiano, comenzando por un tablero interactivo digital  el cual dará comienzo a la charla. Ingresar en la siguiente URL. https://www.wooclap.com/es/ CODIGO:  MKCYJK Ingresar en la siguiente URL. https://padlet.com/yordannyalzate/qmr6p75s691nn9y8 SEMANA 8 del 24 de agosto al 28 Oración Reflexión Tema conceptos claves de una contabilidad empresarial. CONTABILIDAD:  La contabilidad es la ciencia social que se encarga de estudiar, medir y analizar el patrimonio y la situación económica financiera de una empresa u organización, con el fin de facilitar la toma de decisiones en el seno de la misma y el control externo, presentando la información, previamente r...
Leer más

GRADO 10

Imagen
SEMANA 7 del 18 de agosto al 20 Oración Reflexión Programación básica Actividad CodeCombat, Multiplataforma para aprender programación básica mientras se juega. 1 Ingresar a la aplicación y suscribirse. 2 Realizar los primeros 10 niveles de la plataforma. 3 Tomar un pantallazo donde aparezca la constancia de los 10 niveles finalizados y su nombre en la parte inferior como muestra la siguiente imagen. 4 Subir el pantallazo a su carpeta de Google Drive.  ¡¡¡¡¡¡ Aprendan y diviértanse !!!!!!   Link de CodeCombat. https://codecombat.com/ Como ingresar a la plataforma y realizar la actividad  SEMANA 6 del 10 de agosto al 14 Oración Reflexión Programación  QUE ES UN BOT? Que es la programación? Es un orden donde interaccionan códigos los cuales el usuario programa de una forma lógica para dar una función concreta a lo que desea resolver, entendemos de una forma sencilla que programar es darle una orden o instrucción a un sistema digital para que este la cumpla...
Leer más

GRADO 9

Imagen
SEMANA 10 del 07 de agosto al 11 de septiembre Oración Reflexión Conclusión del tercer periodo y conceptos.  CONCEPTOS APRENDIDOS EN EL TERCER PERIODO  En esta clase se dará cierre a las temáticas del tercer periodo compartiendo los conceptos que aprendimos en el mismo y dialogando de su aplicación a la vida cotidiano, comenzando por un tablero interactivo digital  el cual dará comienzo a la charla. Ingresar en la siguiente URL. https://www.wooclap.com/es/ CODIGO:  SUFAXF Ingresar en la siguiente URL. https://padlet.com/yordannyalzate/qmr6p75s691nn9y8 SEMANA 9 del 31 de agosto al 04 de septiembre Oración Reflexión Trasformación digital  https://padlet.com/yordannyalzate/weqy1lt56hb1yeos SEMANA 8 del 24 de agosto al 28 Oración Reflexión Software libre Porque el software libre es importante?  Desarrollador de softwar libre  Para el desarrollador y productor de software, la libertad cambia mucho las reglas del juego. Con él le es más fácil comp...
Leer más