Estaremos utilizando los siguiente elementos HTML:
Elemento HTML | ¿Qué significa? |
---|---|
<div> | División/Sección |
<img> | Insertar una imagen |
<h2> | Heading 2 o Título |
Verán que algunos elementos tienen un atributo de identificación ( id=“” ) para así poder estilizarlos luego.
*IMPORTANTE:
Asegúrense siempre cerrar todos los elementos de HTML en el código. De no hacerlo podría tener resultados no deseados.
<div> Tu contenido va aquí... </div>
<div id="seccion-logo">
<img src="http://www.populardcoding.com/tutorial1/img-logo.gif">
</div>
<div id="seccion-foto-principal"> <img src="http://www.populardcoding.com/tutorial1/img-foto-1.jpg"> </div>
<div id="seccion-iniciativa"> <div> <img src="http://www.populardcoding.com/tutorial1/img-foto-2.jpg"> </div> <div> <h2> Iniciativa </h2> Dentro del compromiso comunitario y de innovación de Popular, estamos ofreciendo los talleres D-coding, libres de costo. </div> </div>
<div id="seccion-iconos"> <div> <img src="http://www.populardcoding.com/tutorial1/img-icon-1.gif"> <h2> Coding </h2> Coding es el lenguaje de programación y análisis que se utiliza en el diseño y funcionamiento de los procesos computadorizados con el propósito de asignar, clasificar y ejecutar. </div> <div> <img src="http://www.populardcoding.com/tutorial1/img-icon-2.gif"> <h2> Expertos </h2> Charlas educativas llevadas a cabo por expertos en la materia, que forman parte de nuestro equipo de tecnología y un empleado actual de la red social LinkedIn. </div> <div> <img src="http://www.populardcoding.com/tutorial1/img-icon-3.gif"> <h2> Taller </h2> Se le estará dando la oportunidad a los estudiantes a codificar mediante un taller "hands-on", donde tendrán la oportunidad de completar un juego. </div> </div>
Para estilizar la página se utiliza un archivo Cascading Style Sheet(CSS). En este archivo es donde se añaden los tamaños de los elementos, colores de fondo, tamaños de fuentes(texto), etc.
Este es otro lenguaje que utiliza las páginas de HTML y es un fácil de aprender.
<link rel="stylesheet" href="http://www.populardcoding.com/tutorial1/style-final.css">