Este post que se me dio por titular “Ejemplos sobre paginas web en html y css + Tutorial sobre edicion“, constara sobre dos zonas. En la de ellas te dare via a 14 plaginas web en html y no ha transpirado css listas para utilizar. La una diferente sera un tutorial sobre edicion sobre html desplazandolo hacia el pelo css. Hexaedro que alguno sea la plantilla que vallas a descargar, vas a necesitar adaptarla a tu proyecto, empezare con el tutorial.
De mas esta decirte que si eres un entendido en html y css puedas saltarte Durante la reciente parte. ??
Tabla sobre contenidos
?Cual seria la accion del html y no ha transpirado css?
Primero sobre meternos a lleno deseo asegurarme que entiendas bien cual seria la accion de el html desplazandolo hacia el pelo css. No te voy a aburrir con ninguna sobre esas definiciones tediosas que unicamente expertos entienden. Basicamente deseo que entiendas que el html es un habla de afectado con el cual le das la estructura an una pagina web. Entretanto que el css es un lenguaje sobre garbo que define la presentacion de un documento html.
“Con el html definiras los elementos asi como su ubicacion en la pagina. Mientras que con las hojas de Modalidad css podras dar colores, tamanos, adscripcion, margenes, etc.”
Por tanto con el html definiras las componentes asi como su ubicacion en la pagina (imagenes, menus, titulos, parrafos, etc). Mientras que con las hojas sobre estilo css podras dar colores, tamanos, afiliacion, margenes, etc a cada aspecto.
?Que seria B tstrap?
Como la gran parte de las plantillas que te dejare como prototipo, usan b tstrap, me veo obligado a introducirte en el asunto. Aparte dentro del inminente apartado voy a manosear dos veces el motivo, y no ha transpirado nunca quiero que te pierdas. jejej
Te lo hago bien resumido. B tstrap seria un framework css desarrollado por Twitter, que facilita realizar tu web adaptable al envergadura sobre monitor sobre tus usuarios. Es decir convierte la pagina en plenamente responsive (En Caso De Que lo aplicas bien. jejej).
B tstrap es un framework css desarrollado por Twitter, que posibilita hacer tu web adaptable al tamano de monitor sobre tus usuarios
Trabaja con un croquis rejilla sobre 12 columnas, permitiendo al disenador, determinar cuantas columnas debes utilizar un aspecto en cada mecanismo.
Por ejemplo, de disenar algo que se vea mismamente en tu pc. (ver forma)
Debes fijar, a traves de b tstrap, que cada elemento ocupe 4 de las 12 columnas en un ordenador. Luego, Con El Fin De realizarlo adaptable, podrias decirle que ocupe 6 de estas 12 de una tablet (es afirmar habria 2 columnas), y no ha transpirado Con El Fin De un movil tome 12/12 columnas.
Por En caso de que te quedo claro, te aviso que tengo programado un post pleno referente a este asunto. Aunque entretanto tanto te recomiendo que pases por este magnifico articulo de el blog AyudaWP. ??
Estampacion sobre paginas web en html desplazandolo hacia el pelo css
Este tutorial de edicion tiene como proposito, que te familiarices con la edicion del html y css de una web. Para eso ire cambiando ciertos elementos sobre la plantilla Creative Agency. Descargala aca Con El Fin De seguirme el paso. ??
Luego sobre descargada te hallaras con un archivo .zip, descomprimelo asi como veras lo que sigue.
Abre con tu navegador el archivo index.html, para ver la web original.
Los archivos que editaremos sera el index.html, y adentro la carpeta css el archivo style.css. Los otras archivos .css no los tocaremos. Dentro de dichos .css esta el que controla el framework sobre b tstrap (b tstrap.min), el cual nunca debes editar, excepto seas un programador experto. jeje. Tambien existe otros archivos de Modalidad igual que el owl.carousel, el que da moda a un carrusel de imagenes que Existen en la pagina. No obstante igual que Ahora te dije, yo separado me metere en el style.css, Ahora tendras lapso tu sobre palpar lo demas. jeje
En mi caso usare el editor de escrito notepad++, No obstante podras seguirme con cualquier editor. ??
Bien con ambos archivos (index.html asi como style.css) abiertos con tu editor de texto, podemos empezar a trabajar. Hexaedro que el autor de esta plantilla nos organizo el css sobre modo exagerado, seguiremos el orden sobre su tabla de editar varios sobre las puntos.
Iremos cambiando cada contenido desde el html y editando su estilo desde el css. Comencemos por los i?ngulos generales.
General
Son diversos las puntos que se editan en el apartado general sobre la hoja style.css. Veremos como editar varios sobre ellos. ??
Impresion sobre textos
Comencemos con los textos, tanto titulos (title, h2. h5) como organismo (body).
Como podria ser podriamos realizar algunas ediciones igual que las pri?ximos
Cambios de volumen del torso sobre escrito (font-family en body), surtidor de las titulos (font-family) desplazandolo hacia el pelo color. Como de este modo igualmente marchas sobre envergadura, individual de cada titulo (title, h2.. h5).
Bien realizados las cambios guardalos.
Posteriormente ve a la pestana sobre html y no ha transpirado ejecuta el documento en loveaholics tu navegador favorito, mi caso Chrome.
La oportunidad ejecutado podras comparar los cambios. En este prototipo veras que en el inicio de la sitio web nunca se velocidades el color de titular (WE ARE CREATIVE AGENCY). Siendo que adentro sobre los cambios se realizo un cambio sobre color en los titulos title,h2. h5. Eso es por que en el html refran titular se lo realizo bajo la clase white-text.
Si deseas que expresado titular tome el color de todos las titulos, no tienes mas que liquidar el O producir una nueva especie con el color que quieras darle al titular principal sobre tu pagina web.
Eso en cuanto a la impresion de estilos de escrito, las cambios sobre los textos en si, debes efectuarlo desde el documento html. Por ejemplo en titular del home podrias editarlo igual que sigue.
Lo que acabo sobre apuntar igual ocasii?n se cae sobre prudente asi como esta casi sobre mas, sin embargo bueno no se que tan novato eres.. jejeje
Estampacion sobre enlaces
Siguiendo en el apartado general podemos editar las caracteristicas sobre las enlases. Para ello en el archivo style.css debes buscar la calificativo “a”.
Entre las lineas 83 asi como 96 del archivo .css se encuentras las ediciones sobre garbo de las enlaces. Por ejemplo en la linea 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.
Alguno sea el casamiento, de Canjear su contenido deberas realizarlo desde su html. El que seria el sub siguiente
Asi que bueno es bien sencillo editar tanto el contenido como el esbozo de tus enlaces. ??