Web Responsive – HTML5/CSS3

por | Mar 22, 2017 | HTML | 8 Comentarios

crear-web-html5-css3

Crearemos la estructura básica de un sitio web «responsive» realizado con HTML5 y CSS3. La estructura de HTML5 nos permite agregar etiquetas determinadas como los son «section«, «aside«, «nav«, «header«, entre otras. Usaremos varias de estas etiquetas en nuestro ejemplo para adaptar la disposición de los elementos de nuestro sitio web al entorno de visión del usuario.

Puedes ver la plantilla en este enlace: Tutorial HTML5 y CSS3

Creando una web responsive

Debemos crear dos archivos en nuestro editor de código, puedes usar el editor de código que prefieras (Existen varias opciones, yo te recomiendo Atom o Sublime Text). El primer archivo lo nombraremos index.html y el segundo le llamaremos estilos.css.
En el archivo index.html agregaremos las siguientes lineas de código:

<!DOCTYPE html>
<html lang="es">
<head>
	<meta charset="utf-8">
	<meta name="viewport" content="width=device-width, initial-scale=1.0" />
  <LINK REL="stylesheet" TYPE="text/css" HREF="estilos.css">
</head>
 
<body>
 
<div class="container">
 
  <!-- Empieza Header -->
	<header>
		<h1>Web Responsive HTML5 - CSS3</h1>
	</header>
<!-- Finaliza Header -->
 
<!-- Empieza Menu -->
	<nav>
		<ul>
			<li><a href="#">Item 1</a></li>
			<li><a href="#">Item 2</a></li>
			<li><a href="#">Item 3</a></li>
			<li><a href="#">Item 4</a></li>
		</ul>
	</nav>
<!-- Finaliza Menu -->
 
<!-- Empieza Seccion de contenido -->
	<section>
		<h2>
			Contenido del Sitio Web
    </h2>
			<p>
			Lorem ipsum dolor sit amet, consectetur adipiscing elit. In iaculis porttitor varius. Cras et turpis et eros porta imperdiet eget a elit. Pellentesque eu ullamcorper urna. Vestibulum ante ipsum primis in faucibus orci luctus et ultrices posuere cubilia Curae; Fusce non iaculis urna. Pellentesque vulputate felis et mauris dignissim cursus. Suspendisse fringilla malesuada est, a fermentum erat molestie sit amet. Etiam quis ex eget sapien suscipit facilisis. Curabitur bibendum eget dolor in rhoncus. Fusce vehicula diam ut erat mollis malesuada. Pellentesque massa sapien, eleifend sed quam at, euismod maximus quam.
			</p>
			<p>
			Lorem ipsum dolor sit amet, consectetur adipiscing elit. In iaculis porttitor varius. Cras et turpis et eros porta imperdiet eget a elit. Pellentesque eu ullamcorper urna. Vestibulum ante ipsum primis in faucibus orci luctus et ultrices posuere cubilia Curae; Fusce non iaculis urna. Pellentesque vulputate felis et mauris dignissim cursus. Suspendisse fringilla malesuada est, a fermentum erat molestie sit amet. Etiam quis ex eget sapien suscipit facilisis. Curabitur bibendum eget dolor in rhoncus. Fusce vehicula diam ut erat mollis malesuada. Pellentesque massa sapien, eleifend sed quam at, euismod maximus quam. Fusce vehicula diam ut erat mollis malesuada.
		  </p>
      <p>Pellentesque massa sapien, eleifend sed quam at, euismod maximus quam. Fusce vehicula diam ut erat mollis malesuada.</p>
	</section>
<!-- Finaliza Seccion de contenido -->
 
<!-- Empieza barra lateral -->
	<aside>
    <h2>Barra lateral</h2>
    <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. In iaculis porttitor varius. Cras et turpis et eros porta imperdiet eget a elit. Pellentesque eu ullamcorper urna. Vestibulum ante ipsum primis in faucibus orci luctus et ultrices posuere cubilia Curae; Fusce non iaculis urna. Pellentesque vulputate felis et mauris dignissim cursus. Suspendisse fringilla malesuada est, a fermentum erat molestie sit amet. Etiam quis ex eget sapien suscipit facilisis. Curabitur bibendum eget dolor in rhoncus. Fusce vehicula diam ut erat mollis malesuada. Pellentesque massa sapien, eleifend sed quam at, euismod maximus quam.</p>
  </aside>
<!-- Finaliza barra lateral -->
 
<!-- Empieza pie de pagina -->
	<footer>
		<a href="https://www.internetedadinero.com">Ejemplo de Web Responsive - www.internetedadinero.com</a>
	</footer>
<!-- Empieza pie de pagina -->
 
</div>
</body>
</html>

Podemos ver que tenemos algunas etiquetas meta al principio de nuestro archivo, la siguiente etiqueta meta

<meta name="viewport" content="width=device-width, initial-scale=1.0" />

Se utiliza para controlar cómo aparecerá el contenido HTML en los dispositivos móviles. El contenido se ajustara al ancho del dispositivo con una escala inicial es de 1.

Vemos que tenemos también algunas etiquetas de HTML5 como header, nav, section, aside. Estas etiquetas se usaran para agregar estilos en nuestra hoja de estilos CSS.

Hoja de estilos CSS

Hasta el momento nuestro sitio no se ve organizado, aparecen los elementos pero no contienen estilos, es por que no hemos agregado nuestra hoja de estilos CSS, la cual llamamos desde HTML usando la etiqueta:

<LINK REL="stylesheet" TYPE="text/css" HREF="estilos.css">

Ya podemos agregar los estilos de nuestro sitio web responsive, En el archivo estilos.css agregamos el siguiente código:

/* Hoja de estilos
Contiene los estilos de un sitio web responsive.
Michel Haddad - Internetedadinero.com | 2017
*/
 
.container {
  width:1080px;
  margin:0px auto;
  font-size:1em;
  font-family: "Arial", Georgia, Serif;
  font-size: 15px;
}
header {
  text-align:center;
  border: 1px solid #ccc;
  background: #fafafa
}
a {
  color: #333;
  text-decoration: none;
}
section,aside {
  padding: 10px;
  -moz-border-radius:3px;-webkit-border-radius:3px;-o-border-radius:3px;border-radius:3px;
}
section {
  float: left;
  width: 70%;
  background: #fafafa;
  border: 1px solid #ccc;
}
aside {
  float: right;
  width: 25%;
  background:#ccc;
  color: #333;
}
nav {
  overflow: hidden;
  background:#444;
  margin-top: 0.5%;
  margin-bottom: 0.5%;
}
nav ul {
  list-style-type:none;
  float:left;
  padding:0px;
  width: 100%;
  display: table;
  text-align: center;
}
nav ul li {
  display: inline-block;
  float: none;
  padding:3px 10px;
  margin:2px;
  background:#fafafa;
  -moz-border-radius:3px;-webkit-border-radius:3px;-o-border-radius:3px;border-radius:3px;
}
nav ul li:hover {
  background-color: #ccc;
  text-decoration: underline;
}
nav a {
 display:block;
 text-align:center;
 text-decoration:none;
 color: #333;
}
footer {
  position: fixed;
  Width: 100%;
  right: 0;
  bottom: 0;
  left: 0;
  padding: 10px 0px 10px 0px;
  background-color: #333;
  text-align: center;
}
footer a {
  color: #fff;
}
 
/* pantalla maximo 980px */
@media screen and (max-width:980px) {
  .container {
    width:98%;
  }
  section {
    width:68%;
  }
}
 
/* pantalla maximo 700px */
@media screen and (max-width:700px) {
  aside,section {
    float:none;
    width:96%;
    font-size:1.2em;
  }
  nav, section {
    font-size:1.2em;
  }
  aside {
    margin-top:5px;
    background:#333;
    color: #fff;
  }
  nav ul {
    float:none;
    clear:both;
  }
}
 
 
/* pantalla maximo 480px */
@media screen and (max-width:480px) {
  aside {
    display:block;
    background:#333;
    color: #fff;
    font-size:1.5em;
  }
  nav, section {
    font-size:1.5em;
  }
  section {
    width:94%;
  }
  nav ul {
    display: table;
    text-align: center;
    float: none;
    width:100%;
  }
  nav ul li {
    float:none;
  }
}

Vemos que la expresión @media de CSS3 nos permite aplicar condiciones a nuestra hoja de estilos CSS para cada tamaño de dispositivo, podemos agregar o eliminar estilos dependiendo del tamaño del dispositivo del que se accede.
Puedes ver mas información en el siguiente enlace.

Las propiedades que más nos interesan son las siguientes.

  • width y height: Ancho y alto del navegador (podemos añadir el prefijo min- o max-)
  • width y height: Ancho y alto del dispositivo, móviles y tablets (podemos añadir el prefijo min- o max- )
  • Orientation: Orientación del móvil o tablet (para panorámico utilizaremos orientation:portrait, para vertical orientation:landscape)
  • @media screen and (max-width:980px): Se utiliza para definir un tamaño o inferior. En este caso, para 980px o menos.

Conclusiones

Si revisas tu sitio accediendo desde tu navegador al archivo index.html, podrás visualizar que el sitio web es adaptable o responsive. Puedes empezar a agregar mas estilos o modificarlos y revisar los cambios en tu sitio. Esta es la estructura básica de un sitio web responsive realizado con HTML5 y CSS3.

Espero que este artículo te haya ayudado a entender mejor la estructura de un sitio web Responsive – HTML5 y CSS3. No olvides comentar si tienes alguna duda y te agradezco mucho que tomaras el tiempo de leer, si te gustó el articulo te agradezco lo compartas.

Puedes ver la plantilla en este enlace: Tutorial HTML5 y CSS3
Puedes descargar los archivos oprimiendo este enlace: Descargar archivos

8 Comentarios

  1. Antonio
    Antonio el 6 septiembre, 2019 a las 3:35 pm

    una pagina html5 no debería tener un ?

    Responder
    • Antonio
      Antonio el 6 septiembre, 2019 a las 3:36 pm

      un main queria decir

      Responder
  2. Victor Colman
    Victor Colman el 29 junio, 2019 a las 4:30 pm

    Muy buen aporte. Estoy tratando de conocer bien a fondo, diseñar con la metodología Responsive.
    Muchas gracias.
    Hay alguna muestra de página, con imágenes, para verla y practicar ?
    Muchas gracias.

    Responder
  3. Henry
    Henry el 6 julio, 2018 a las 10:57 am

    Excelente aporte para los que nos estamos actualizando, gracias.

    Responder
    • Michel Haddad
      Michel Haddad el 6 julio, 2018 a las 11:01 am

      Muchas gracias por tu comentario, un honor poder ayudar, te comento que pronto estará disponible un nuevo articulo para la creación de una plantilla web con HTML y CSS, seguramente te apoyara aun mas en este aprendizaje. Un saludo

      Responder
  4. Jose Curi Diaz
    Jose Curi Diaz el 5 mayo, 2018 a las 11:59 am

    Gracias por la información, saqué 19 en el examen de ingeniería Web :3

    Responder
    • Michel Haddad
      Michel Haddad el 7 mayo, 2018 a las 10:18 am

      Hola, muchas gracias por tu comentario ¿Es una buena nota? jeje, si te fue mal, te pido disculpas, pronto estaré actualizando el articulo, si te fue bien, entonces es un honor haber podido apoyarte. Un saludo

      Responder

Enviar comentario

Tu dirección de correo electrónico no será publicada. Los campos obligatorios están marcados con *

 
Share This