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

Este post que se me dio por titular “Ejemplos sobre paginas web en html y no ha transpirado css + Tutorial de edicion“, constara sobre dos partes. En una sobre ellas te dare acceso a 14 plaginas web en html desplazandolo hacia el pelo css listas Con El Fin De usar. La otra sera un tutorial de edicion sobre html desplazandolo hacia el pelo css. Cubo que alguno sea la plantilla que vallas a descargar, vas a necesitar adaptarla a tu proyecto, empezare con el tutorial.

Sobre mas esta decirte que si eres un entendido en html y css te sea posible saltarte Durante la reciente pieza. ??

Tabla sobre contenidos

?Cual es la funcion de el html y no ha transpirado css?

Anteriormente de meternos a lleno quiero asegurarme que entiendas bien que seri­a la mision de el html y no ha transpirado css. Nunca te voy a aburrir con ninguna sobre esas definiciones tediosas que unico expertos entienden. Basicamente deseo que entiendas que el html seri­a un habla sobre marcado con el cual le das la configuracion a la pagina web. Entretanto que el css es un habla de estilo que define la presentacion de un documento html.

“Con el html definiras las componentes asi­ como su localizacion en la pagina. Mientras que con las hojas sobre moda css podras dar colores, tamanos, vinculacion, margenes, etc.”

Por lo tanto con el html definiras los componentes y su localizacion en la pagina (imagenes, menus, titulos, parrafos, etc). Mientras que con las hojas de estilo css podras dar colores, tamanos, afiliacion, margenes, etc a cada factor.

?Que seri­a B tstrap?

Como la gran pieza de estas plantillas que te dejare como prototipo, utilizan b tstrap, me veo obligado a introducirte en el asunto. Aparte en el interior del posterior apartado voy a palpar dos veces el tema, desplazandolo hacia el pelo nunca quiero que te pierdas. jejej

Te lo hago bien resumido. B tstrap es un framework css desarrollado por Twitter, que permite elaborar tu web adaptable al tamano sobre monitor de tus usuarios. En otras palabras convierte la pagina en completamente responsive (En Caso De Que lo aplicas bien. jejej).

B tstrap es un framework css desarrollado por Twitter, que posibilita efectuar tu web adaptable al envergadura de pantalla sobre tus usuarios

Trabaja con un croquis rejilla sobre 12 columnas, permitiendo al disenador, definir cuantas columnas deberias utilizar un factor en cada dispositivo.

Como podri­a ser, de disenar una cosa que se vea mismamente en tu pc. (ver apariencia)

Debes determinar, mediante b tstrap, que cada factor ocupe 4 de estas 12 columnas en un ordenador. Seguidamente, de hacerlo adaptable, podrias decirle que ocupe 6 de estas 12 para la tablet (es decir habria 2 columnas), desplazandolo hacia el pelo Con El Fin De un movil tome 12/12 columnas.

Por si no te quedo Naturalmente, te aviso que tengo programado un post integro acerca de este argumento. Pero mientras tanto te recomiendo que pases por este excepcional articulo de el blog AyudaWP. ??

Estampacion de paginas web en html asi­ como css

Este tutorial sobre edicion dispone de como proposito, que te familiarices con la edicion del html y no ha transpirado css sobre una web. Para eso ire cambiando algunos puntos sobre la plantilla Creative Agency. Descargala aqui para seguirme el camino. ??

Luego de descargada te encontraras con un archivo .zip, descomprimelo y no ha transpirado veras lo que sigue.

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

Las archivos que editaremos sera el index.html, y no ha transpirado dentro la carpeta css el archivo style.css. Los otras archivos .css no las tocaremos. Entre dichos .css esta el que controla el framework sobre b tstrap (b tstrap.min), el que nunca debes editar, menos seas un programador experto. jeje. Tambien hay otros archivos de garbo como el owl.carousel, el cual da garbo a un carrusel de imagenes que Tenemos en la pagina. Aunque como Ahora te dije, yo unico me metere en el style.css, ya tendras tiempo tu sobre manosear lo otras. jeje

En mi caso usare el editor sobre escrito notepad++, No obstante podras seguirme con todo editor. ??

Ya con ambos archivos (index.html y no ha transpirado style.css) abiertos con tu editor de texto, podri­amos comenzar a trabajar. Hexaedro que el autor sobre esta plantilla nos organizo el css sobre manera espectacular, seguiremos el disciplina sobre su tabla de editar ciertos de sus componentes.

Iremos cambiando cada contenido desde el html asi­ como editando su garbo desde el css. Comencemos por los aspectos generales.

General

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

Estampacion de textos

Comencemos con las textos, tanto titulos (title, h2. h5) como organismo (body).

Como podri­a ser podri­amos realizar algunas ediciones igual que las siguientes

Cambios de tamano de el cuerpo de texto (font-family en body), origen de las titulos (font-family) desplazandolo hacia el pelo color. Como de este modo igualmente intercambio de envergadura, individual sobre cada titulo (title, h2.. h5).

Ahora realizados los cambios guardalos.

Despues percibe a la pestana sobre html y ejecuta el documento en tu navegador preferido, mi caso Chrome.

La vez ejecutado podras cotejar las cambios. En este prototipo veras que en el inicio sobre la sitio web nunca se marchas el color sobre titular (WE ARE CREATIVE AGENCY). Estando que dentro sobre los cambios se realizo un velocidades de color en los titulos title,h2. h5. Eso es por que en el html proverbio titular se lo realizo escaso la clase white-text.

Si te gustaria que mencionado titular tome el color de todos los titulos, no precisas mas que quitar el O producir una recien estrenada clase con el color que desees darle al titular principal de tu pagina web.

Eso en cuanto a la edicion sobre clases sobre escrito, los cambios de los textos en si, debes hacerlo desde el documento html. Por ejemplo en titular del home podrias editarlo igual que sigue.

Lo que acabo sobre apuntar igual oportunidad se cae sobre sazonado desplazandolo hacia el pelo esta casi de mas, sin embargo bueno no se que tan novato eres.. jejeje

Estampacion sobre enlaces

Siguiendo en el apartado general podemos editar las caracteristicas sobre los enlases. Con www.datingranking.net/es/pure-review el fin de eso en el archivo style.css debes encontrar la etiqueta “a”.

Entre las lineas 83 y no ha transpirado 96 del archivo .css se encuentras las ediciones sobre Modalidad sobre los enlaces. Por ejemplo en la camino 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 de el enlace cuando pasamos el cursor.

Cualquier sea el casamiento, Con El Fin De cambiar su contenido deberas efectuarlo desde su html. El que es el sub siguiente

Asi que bueno es bien facil editar tanto el contenido igual que el diseno de tus enlaces. ??