Ejemplos de paginas web en html y css + Tutorial de edicion

Imagen de portada diseñada por Graphiqastock / Freepik 

Este post que se me dio por titular «Ejemplos de paginas web en html y css + Tutorial de edición«, constará de dos partes. En una de ellas te daré acceso a 14 plaginas web en html y css listas para usar. La otra será un tutorial de edición de html y css. Dado que cualquiera sea la plantilla que vallas a descargar, vas a necesitar adaptarla a tu proyecto, empezaré con el tutorial.

De más esta decirte que si eres un experto en html y css puedas saltarte la primera parte. 😉

¿Cual es la función del html y css?

Antes de meternos a lleno quiero asegurarme que entiendas bien cual es la función del html y css. No te voy a aburrir con ninguna de esas definiciones tediosas que solo expertos entienden. Básicamente quiero que entiendas que el html es un lenguaje de marcado con el cual le das la estructura a una pagina web. Mientras que el css es un lenguaje de estilo que define la presentación de un documento html.

«Con el html definirás los elementos y su ubicación en la pagina. Mientras que con las hojas de estilo css podrás dar colores, tamaños, alineación, margenes, etc.»

Por lo tanto con el html definirás los elementos y su ubicación en la pagina (imágenes, menús, títulos, párrafos, etc). Mientras que con las hojas de estilo css podrás dar colores, tamaños, alineación, margenes, etc a cada elemento.

¿Que es Bootstrap?

Como la mayor parte de las plantillas que te dejaré como ejemplo, usan bootstrap, me veo obligado a introducirte en el tema. Además dentro del próximo apartado voy a tocar un par de veces el tema, y no quiero que te pierdas. jejej

Te lo hago bien resumido. Bootstrap es un framework css desarrollado por Twitter, que permite hacer tu web adaptable al tamaño de pantalla de tus usuarios. Es decir convierte una página en totalmente responsive (si lo aplicas bien. jejej).

Bootstrap es un framework css desarrollado por Twitter, que permite hacer tu web adaptable al tamaño de pantalla de tus usuarios

Trabaja con un diseño rejilla de 12 columnas, permitiendo al diseñador, definir cuantas columnas debes usar un elemento en cada dispositivo.

Por ejemplo, para diseñar algo que se vea así en tu pc. (ver imagen)

Debes definir, mediante bootstrap, que cada elemento ocupe 4 de las 12 columnas en un ordenador. Luego, para hacerlo adaptable, podrías decirle que ocupe 6 de las 12 para una tablet (es decir habría 2 columnas), y para un móvil tome 12/12 columnas.

Por si no te quedó claro, te aviso que tengo programado un post completo sobre este tema. Pero mientras tanto te recomiendo que pases por este excelente articulo del blog AyudaWP. 😉

Edición de páginas web en html y css

Este tutorial de edicion tiene como objetivo, que te familiarices con la edicion del html y css de una web. Para ello iré cambiando algunos elementos de  la plantilla Creative Agency. Descargala aquí para seguirme el paso. 😉

Luego de descargada te encontrarás con un archivo .zip, descomprímelo y verás lo que sigue.

Abre con tu navegador el archivo index.html, para ver la web original.

Los archivos que editaremos será el index.html, y dentro la carpeta css el archivo style.css. Los demás archivos .css no los tocaremos. Entre dichos .css esta el que controla el framework de bootstrap (bootstrap.min), el cual no debes editar, salvo seas un programador experto. jeje. Además hay otros archivos de estilo como el owl.carousel, el cual da estilo a un carrusel de imágenes que hay en la página. Pero como ya te dije, yo solo me meteré en el style.css, ya tendrás tiempo tu de tocar lo demás. jeje

En mi caso usaré el editor de texto notepad++, pero podrás seguirme con cualquier editor. 🙂

Ya con ambos archivos (index.html y style.css) abiertos con tu editor de texto, podemos comenzar a trabajar. Dado que el autor de esta plantilla nos organizo el css de manera espectacular, seguiremos el orden de su tabla para editar algunos de sus elementos.

Iremos cambiando cada contenido desde el html y editando su estilo desde el css. Comencemos por los aspectos generales.

General

Son varios los elementos que se editan en el apartado general de la hoja style.css. Veremos como editar algunos de ellos. 🙂

Edición de textos

Comencemos con los textos, tanto títulos (h1, h2..,h5) como cuerpo (body).

Por ejemplo podemos hacer algunas ediciones como las siguientes:

Cambios de tamaño del cuerpo de texto (font-family en body), fuente de los títulos (font-family) y color. Como así también cambio de tamaño, individual de cada titulo (h1, h2.. h5).

Ya realizados los cambios guárdalos.

Luego ve a la pestaña de html y ejecuta el documento en tu navegador preferido, mi caso Chrome.

Una vez ejecutado podrás comparar los cambios. En este ejemplo verás que en el inicio de la página web no se cambio el color de titular (WE ARE CREATIVE AGENCY). Siendo que dentro de los cambios se realizo un cambio de color en los titulos h1,h2,.. h5. Eso es por que en el html dicho titular se lo realizo bajo la clase white-text.

Si quieres que dicho titular tome el color de todos los titulos, no tienes mas que eliminar el class=»white-text». O crear una nueva clase con el color que quieras darle al titular principal de tu pagina web.

Eso en cuanto a la edición de estilos de texto, los cambios de los textos en si, debes hacerlo desde el documento html. Por ejemplo en titular del home  podrías editarlo como sigue.

Lo que acabo de apuntar tal vez se cae de maduro y esta casi de mas, pero bueno no se que tan novato eres.. jejeje

Edición de enlaces

Siguiendo en el apartado general podemos editar las características de los enlases. Para ello en el archivo style.css debes buscar la etiqueta «a».

Entre las líneas 83 y 96 del archivo .css se encuentras las ediciones de estilo de los enlaces. Por ejemplo en la línea 83 editas el color inicial, mientras que en la linea 94 el color cuando pasamos el cursor. En la linea 93 puedes cambiar la opacidad del enlace cuando pasamos el cursor.

Cualquiera sea el enlace, para cambiar su contenido deberás hacerlo desde su html. El cual es el siguiente

Asi que bueno es bien sencillo editar tanto el contenido como el diseño de tus enlaces. 🙂

Edición de botones

Toda pagina web necesita de botones. Veamos como editarlos para esta pagina web en html y css. 

Primero cabiemos el estilo desde el .css. Entre las líneas 228 y 256 puedes ver que el diseñador creo 3 tipos de botones. Ellos son main-btn, white-btn, y outline-btn. Los dos primeros son los que están en primera plana del home. Mientras que el tercero puedes encontrarlo en las tablas de precio.

Los cambios que aquí puedes hacer son infinitos. Personalmente no editaría los estilos de botones ya definidos, sino que crearía unos nuevos (en caso que no me gusten estos). Pero bueno tu eres libre de hacer lo que quieras.. jejje

Podrías hacer cambios generales (lineas 227 a 235 y 253 a 256), algunos de ellos:

• padding: aqui colocas los pixeles entre texto y borde del botón. Cuanto mayor sea el valor, mas grande el botón.
• border-radius: estos son los pixeles del radio de los bordes. Cuanto mayor el valor, mas circular será el borde.
• transition: tiempo en segundos para realizar del efecto del hover. Para el caso un cambio de opacidad.
• opacity: dentro de la edición del hover se colocó un cambio de opacidad. Un valor 1 de opacidad no produciría cambios, mientras que menor sea mas se aclara el botón.

También podrías cambiar los aspectos particulares de cada estilo de boton:

• background: ni mas ni menos que el color de fondo.
• color: este es el color del texto del boton.

Una edición muy común, que no tienen estos botones es el cambio de color al pasar el cursor. Eso lo podrías agregar en el hover. Que para el caso podrías individualizarlo y quedaría algo como esto.

Como puedes ver individualice el hover de cada boton, y obviamente elimine las anteriores lineas 253 a 256.

Bueno podría seguir con estos benditos botones, pero vamos que queda mucho.

Hasta aquí con la sección general del .css. Me dejo un montón sin tocar, pero ya llevo 1100 palabras y esto recién empieza. jajaja

Así que debo pasar a la siguiente sección. 🙂

Logo y Navigation

He juntado estas dos secciones, ya que en ambas solo hablaré del html. En ambos casos me pasaré por alto ediciones de estilo. Y es que me gusta como esta pagina web en html tiene su menú y logo. 😉 Y creo que si eres novato en esto mejor ni te metas en cambiar un menú.. jeje

Comenzando por el logo en las líneas 56 y 57 del index.html encontrarás esto:

Para no complicarte guarda guarda tu logo (dimensión recomendada 160×80) en la carpeta img. Ya guardado reemplaza lo que marque con rojo por el nombre del archivo de tu logo. Para el caso hay dos logo (uno en texto blanco y otro negro), por temas de contrastes. Necesarios al moverte dentro de la web ya que cambia el color de la barra del menú, donde esta el logo.

En cuanto al menú lo encuentras entre la línea 70 y 79. Cambiar el texto de cada pestaña es bien fácil. Solo quiero resaltar como hace para conectar cada pestaña con partes de la misma página. Es decir haces click y te desplazas hacia abajo de la pagina.

Lo que hace es generar un link interno. El #portfolio genera una conexión entre el link y el elemento que creaste llamado portfolio. Por lo que cuando hagas click allí te llevará al lugar de la pagina donde haya un elemento portfolio. Fácil no? 😉

About

Todas las paginas web tiene su apartado acerca de. Y en el caso de esta pagina web en html y css no es la excepción.

Haz click About del menú y te llevara a la sección que esta pagina tiene destinada para ello. Personalmente hice algunas ediciones dejándolo así.

La gran parte de las ediciones las realice en el contenido del html. A partir de la linea 131 del index.html comienza la seccion about. Alli no te costara nada darte cuenta donde cambiar los textos. 😉

Pero no solo cambie los textos, como te darás cuenta borre una de las columnas, solo deje dos. Para ello no solo necesitas borrar, sino también debes cambiar el class=»col-md-4″ por class=»col-md-6″. No voy a ahondar en el tema, pero dicha edición viene dada por el framework bootstrap. Ya te explique al principio algo de esto, si no lo leíste vuelve y entenderás. 😉

Otro cambio que realice fueron los iconos. Te indico en la siguiente imagen los cambios, y te aconsejo que para buscar mas iconos visites esta web.

En cuento a las ediciones del estilo en el .css, te puedo señalar que entre las líneas:

• 638-644 características generales: Allí puedes cambiar la alineación de texto (text-align), espacios a los bordes (padding), margenes, etc.
• 645-649 características de iconos: su tamaño (font-size), color y espacio entre icono y titulo (margin-bottom).
• 652-662 caractristicas al pasar el cursor: allí defines el color de fondo al pasar el cursor (background-color). También puedes cambiar la velocidad de la transicion, el diseñador lo coloco en 0.2 s.
• Lineas 665 y 666 definen el ancho que cubrirá el color al pasar el cursor. Si esta en 100% veras que cubre todo, si quieres reducir disminuyes el porcentaje.
• Desde 669 a 675 se definen características del titulo h3. Lo mas importante es el color del texto cuando cambia el fondo, lo que posibilita un contraste. Por defecto esta en blanco, y no queda nada mal.

Portfolio

Varios de los ejemplos de paginas web en html y css que te dejare mas adelante tiene portfolio. La plantilla Creative Agency también cuenta con el suyo.

Desde la linea 682 a 790 del style.css se encuentran los estilos del portfolio. Son muchas las posibilidades de edicion, veremos algunas de ellas.

• Cambio de color de fondo al pasar el cursor: no tienes mas que cambiar el código html de color en la línea 693.

• Edición de color de trexto: para el texto «category», puedes cambiarlo desde la línea 752 (dado que esta dentro de las etiquetas <span>). Mientras que el titulo  «Lorem ipsum dolor», dado que es un h3, debes editarlo desde la línea 728.

• Cambio en tamaño y color de iconos: las líneas 779 y 780 te permitirá cambiar el tamaño del background de iconos. Mientras que desde la 781 y 782 controlas el color del background y el icono respectivamente.

Ahora toquemos un poco el html del portfolio. Dado que los 6 elementos del portfolio tienen una misma estructura html, tomaré uno para mostrarte que debes editar.

Las ediciones en el html en general son simples. Solo te quiero apuntar nuevamente, que si piensas eliminar una columna, debes cambiar el col-md-4 por un 6. Esto viene por el Bootstrap, ya hablamos de ello un par de veces. 😉

Services

En el caso de la seccion «Servicios», su diseño es igual a la sección «About». Por lo tanto no veremos ninguna edición. Bueno bueno, no te enojes.. jejej En la seccion «Acerca de» me extendí bastante. 🙂

Why choise us

Esta sección esta conformada por texto y un carrusel de imágenes. El estilo del carrusel se encuentra en el archivo owl.carousel, es todo tuyo ya que no esta en el style.css jeje. Pero veamos un poco las ediciones desde el html (líneas 389 a 414).

Cambiar imágenes de fondo

En el home de esta web hay tres secciones con imágenes de fondo, veamos como cambiarlas.

En la línea 43 del documento html puedes reemplazar la primer imagen.

Este es el resultado.

La segunda imagen de fondo la puedes cambiar desde la línea 431.

Mientras que la tercera la encuentras en la 601.

Bueno con esto he finalizado la edición de esta pagina html y css. He dejado muchos elementos sin tocar, pero con lo que vimos confió que puedas hacerlo por tu cuenta. 😉

Ejemplos de paginas web en html y css

Y al fin llegamos a este apartado, el que que te daré plantillas en html y css listas para su uso. Busca la que mas se adapte a tu proyecto y comienza a editar la a tu gusto!! 🙂

#1 Avilon

Avilon es una plantilla limpia, elegante y moderna. Se puede utilizar para presentar y promocionar cualquier producto, como aplicaciones móviles, aplicaciones de escritorio, productos digitales, software , etc. Funciona perfectamente en todos los dispositivos: teléfonos inteligentes, tabletas y computadoras de escritorio.

#2 Salior

Sailor es una plantilla web en html y css, para negocios corporativos. Tiene muchas características y está diseñado para sitios como negocios corporativos, cartera, tiendas, etc. Esta plantilla se creó con la versión de Bootstrap 3.2, 10 colores de plantilla predefinidos, 10 fondos de patrones, efectos de animación WOW y muchos más.

#3 Squadfree

Squadfree es una plantilla de sitio HTML gratuita para con un diseño simple y moderno creado con el framework Bootstrap 3. Bonita animación CSS3 agregada en cada desplazamiento de sección y navegación, esta plantilla también utiliza la secuencia de comandos de animación wow.js para animar elementos de sección. Sientate libre de usar y modificar libremente esta excelente plantilla.

#4 Snow

Con bootstrap como estilo core css, esta plantilla de página de inicio html es muy elegante en apariencia y rendimiento. Está construido con dispositivos móviles y tabletas, así como consultas de medios receptivos bien codificados. Obtengala como una estructura base para su próximo proyecto de sitio web.

#5 Space

Con Creative Agency  puedes crear tu página web usando los últimos estándares html5, css3. Esta es una plantilla basada en bootstrap que le dará opciones para editar fácilmente, gracias a su sistema de grillas. En resumen, es una plantilla web responsive y limpia para el diseño de sitios web modernos.

#6 Sport

Una página de inicio mínimalista que puede usarse para proyectos personales y comerciales. Esta descarga gratuita contiene todos los archivos esenciales html, css, jquery para que pueda comenzar su nuevo sitio web comercial rápidamente.

#7 Straked

Este es uno de los ejemplos de pagina web en html y css mas minimista y moderno. Una pantilla multiproposito que no te costará adaptar a cualquier tipo de proyecto.

#8 Dup

Dup es una plantilla de sitio web simple pero con estilo. Nunca te costará ni un centavo, podrás usarla para todo tipo de intenciones. Aunque es la más adecuado para agencias digitales y pequeñas empresas, no tendrás ningún problema para adaptarla a otro propósito. Todo es posible con un hermoso tema como Dup.

#9 Bronea

Cuando la simplicidad se encuentra con la belleza, nace una impresionante plantilla HTML y Css llamada Bronea. Puedes usarla para una variedad de propósitos diferentes, cualquier negocio, uso personal, fines educativos, etc. LSe adapta a cualquier tipo de requerimiento.

#10 Gogopo

Gogopo es una plantilla html simple y gratuita, con la que no es necesario comenzar de cero, ya hay mucho trabajo completado para usted. Si es que te gusta el aspecto de Gogopo, no tienes que dedicar mucho más tiempo al diseño web. Mejor invertirlo en su experiencia y promoción.

#11 Creative Agency

Creative Agency, como su nombre lo implica, es una plantilla de sitio web gratuito para agencias creativas, digitales y de medios de cualquier tipo. Es lo suficientemente flexible como para ser utilizado en cualquier tipo de sitio, desde webs de negocios hasta simples blogs personales.

#12 Elite Shoppy

Elite Shoppy es una plantilla ecommerce. La mejor opción para todos sus sitios webs de comercio electrónico relacionados con la moda. Si lo que buscas es un diseño elegante, junto a una sencilla edición, Elite Shoppy es para vos.

#13 Games Hub

Plantilla orientada a webs de juegos online, que a su vez no tiene mayores dificultades para ser usada con otro propósito. En caso que lo que necesites es montar una pagina web de juegos, no hay dudas Games Hub es la plantilla para ti.

Bonus: Easy Error Widget (Error 404)

Como bonus me resulto interesante dejar esta pagina web html, cuya función, es responder ante errores. Estos pueden ser rotura de enlaces, problemas técnicos en su sitio, actualizaciones, etc. Esto ayudará a que sus visitantes no se frustren con dicho error. 🙂

Con esto ya cierro este post, espero que dentro de estos 14 ejemplos de paginas web en html y css hayas encontrado la que necesitas. 🙂 Ahora ponte a trabajar para adaptarla a tu proyecto!!