Este post que se me dio por titular Ejemplos sobre paginas web en html y no ha transpirado css + Tutorial de edicion, constara de 2 partes. En la de ellas te dare via a 14 plaginas web en html y css listas Con El Fin De utilizar. La otra sera un tutorial de edicion sobre html asi como css. Cubo que cualquier sea la plantilla que vallas a descargar, vas a precisar adaptarla a tu proyecto, empezare con el tutorial.
De mas esta decirte que si eres un experto en html y no ha transpirado css puedas saltarte Durante la reciente parte. ??
Tabla sobre contenidos
?Cual es la funcion del html y css?
Primero de meternos a repleto deseo asegurarme que entiendas bien cual es la funcion del html desplazandolo hacia el pelo css. No te voy a aburrir con ninguna sobre esas definiciones tediosas que unico expertos entienden. Basicamente quiero que entiendas que el html seria un jerga de traumatizado con el que le das la organizacion a la pagina web. Mientras que el css seria un lenguaje sobre estilo que define la presentacion sobre un documento html.
Con el html definiras las puntos desplazandolo hacia el pelo su ubicacion en la pagina. Entretanto que con las hojas de estilo css podras dar colores, tamanos, alineacion, margenes, etc.
Por lo tanto con el html definiras los componentes y no ha transpirado su localizacion en la pagina (imagenes, menus, titulos, parrafos, etc). Entretanto que con las hojas de estilo css podras dar colores, tamanos, alineacion, margenes, etc a cada aspecto.
?Que seria B tstrap?
Igual que la de mi?s grande pieza de las plantillas que te dejare como ejemplo, utilizan b tstrap, me veo obligado a introducirte en el tema. Ademas dentro del inminente apartado voy a palpar dos veces el argumento, asi como no quiero que te pierdas. jejej
Te lo hago bien resumido. B tstrap es un framework css desarrollado por Twitter, que facilita efectuar tu web adaptable al medida de pantalla de tus usuarios. En otras palabras convierte una pagina en totalmente responsive (En Caso De Que lo aplicas bien. jejej).
B tstrap seria un framework css desarrollado por Twitter, que posibilita efectuar tu web adaptable al medida sobre monitor sobre tus usuarios
Trabaja con un croquis rejilla de 12 columnas, facilitando al disenador, determinar cuantas columnas debes utilizar un factor en cada mecanismo.
Como podria ser, para disenar algo que se mire mismamente en tu pc. (ver forma)
Deberias precisar, a traves de b tstrap, que cada aspecto ocupe 4 de estas 12 columnas en un ordenador. Seguidamente, para efectuarlo adaptable, podrias decirle que ocupe 6 de estas 12 para una tablet (es declarar habria 2 columnas), asi como Con El Fin De un movil tome 12/12 columnas.
Por si no te quedo Cristalino, te aviso que tengo programado un post integro en este motivo. Pero mientras tanto te recomiendo que pases por este magnifico articulo de el blog AyudaWP. ??
Edicion de paginas web en html asi como css
Este tutorial sobre edicion tiene como objeto, que te familiarices con la edicion de el html y css sobre la web. Con el fin de eso ire cambiando varios puntos de la plantilla Creative Agency. Descargala aqui de seguirme el paso. ??
Luego sobre 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, desplazandolo hacia el pelo adentro 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 cual no deberias editar, salvo seas un programador experto. jeje. Igualmente existe otros archivos sobre Modalidad como el owl.carousel, el que da Modalidad a un carrusel de imagenes que existe en la pagina. Pero como debido a te dije, yo unico me metere en el style.css, bien tendras tiempo tu sobre palpar lo demas. jeje
En mi caso usare el editor de escrito notepad++, sin embargo podras seguirme con cualquier editor. ??
Ya con los dos archivos (index.html y no ha transpirado style.css) abiertos con tu editor de texto, podriamos empezar a trabajar. Dado que el autor de esta plantilla nos organizo el css de modo exagerado, seguiremos el equilibrio sobre su tabla para editar varios de las componentes.
Iremos cambiando cada contenido desde el html y no ha transpirado editando su moda desde el css. Comencemos por los aspectos generales.
General
Son varios los puntos que se editan en el apartado general sobre la hoja style.css. Veremos igual que editar algunos sobre ellos. ??
Edicion sobre textos
Comencemos con los textos, tanto titulos (title, h2. h5) como organismo (body).
Por ejemplo podriamos elaborar algunas ediciones como las subsiguientes
Cambios sobre medida de el torso de escrito (font-family en body), surtidor sobre los titulos (font-family) y no ha transpirado color. Igual que asi igualmente marchas sobre tamano, individual de cada titulo (title, h2.. h5).
Debido a realizados las cambios guardalos.
Despues ve a la pestana de html desplazandolo hacia el pelo ejecuta el documento en tu navegador predilecto, mi caso Chrome.
La vez ejecutado podras contrastar las cambios. En este ejemplo veras que en el inicio de la website no se marchas el color sobre titular (WE ARE CREATIVE AGENCY). Siendo que dentro sobre las cambios se realizo un marchas de color en las titulos title,h2. h5. Eso seria por que en el html expresado titular se lo realizo bajo la tipo white-text.
Si quieres que dicho titular tome el color de todos los titulos, no necesitas mas que liquidar el O generar la nueva clase con el color que quieras darle al titular principal sobre tu pagina web.
Eso en cuanto a la impresion de clases sobre texto, las cambios de las textos en si, debes hacerlo desde el documento html. Como podria ser en titular de el home podrias editarlo como sigue.
Lo que acabo de apuntar igual ocasii?n se cae sobre prudente desplazandolo hacia el pelo esta casi de mas, sin embargo bueno nunca se que tan novato eres.. jejeje
Impresion de enlaces
Siguiendo en el apartado general podriamos editar las caracteristicas de las enlases. Para eso en el archivo style.css deberias indagar la etiqueta a.
Dentro de las lineas 83 desplazandolo hacia el pelo 96 del archivo .css se encuentras las ediciones sobre Modalidad de las enlaces. Como podria ser en la linea 83 editas el color inicial, entretanto 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.
Cualquier sea el enlace, de Canjear su contenido deberas efectuarlo desde su html. El que es el sub siguiente
Asi que bueno seria bien facil editar tanto el contenido como el esquema sobre tus enlaces. ??