TIPS

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.

Ejemplo

Si abren el elemento de división así: <div>
Asegúrense de cerrar el elemento así: </div>

Resultado final:

            
            <div>
               Tu contenido va aquí...
            </div>

Creando mi primer HTML

1. Añadir el siguiente elemento HTML dentro del elemento <body> para que se muestre en el navegador el logo D-Coding:

            
            <div id="seccion-logo">
               <img src="http://www.populardcoding.com/tutorial1/img-logo.gif"> 
            </div>

2. Luego vamos añadir la imagen principal con el siguiente elemento HTML:

             
             <div id="seccion-foto-principal">
                <img src="http://www.populardcoding.com/tutorial1/img-foto-1.jpg">
             </div>

3. Añadir sección de la iniciativa del evento, el cual contiene una imagen y el texto:

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

4. Por último añadimos la sección de las 3 columnas(Coding, Expertos y Taller):

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

¿Cómo asignarle los estilos?

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.

Para ver esto en acción, añadan en su HTML la siguiente línea de código:

            
            <link rel="stylesheet" href="http://www.populardcoding.com/tutorial1/style-final.css">