Ejem sobre paginas web en html asi­ como css + Tutorial de edicion

Este post que se me dio por titular “Ejemplos de paginas web en html asi­ como css + Tutorial sobre edicion“, constara de 2 partes. En una sobre ellas te dare acceso a 14 plaginas web en html y no ha transpirado css listas Con El Fin De utilizar. La una diferente sera un tutorial sobre publicacion sobre html y css. Hexaedro que cualquiera sea la plantilla que vallas a descargar, vas a precisar adaptarla a tu programa, empezare con el tutorial.

Sobre mas esta decirte que si eres un experto en html y css puedas saltarte la primera parte. ??

Tabla sobre contenidos

?Cual seri­a la mision del html y css?

Primeramente sobre meternos a repleto quiero asegurarme que entiendas bien que es la mision de el html asi­ como css. No te voy a aburrir con ninguna sobre esas definiciones tediosas que solo expertos entienden. Basicamente deseo que entiendas que el html seri­a un estilo de traumatizado con el cual le das la infraestructura a la pagina web. Entretanto que el css seri­a un lenguaje de moda que define la presentacion sobre un documento html.

“Con el html definiras los componentes desplazandolo hacia el pelo su ubicacion en la pagina. Mientras que con las hojas sobre Modalidad css podras dar colores, tamanos, afiliacion, margenes, etc.”

Por lo tanto con el html definiras los componentes asi­ como su ubicacion en la pagina (imagenes, menus, titulos, parrafos, etc). Entretanto que con las hojas de Modalidad css podras dar colores, tamanos, alineacion, margenes, etc a cada factor.

?Que es B tstrap?

Igual que la gran parte de las plantillas que te dejare igual que ej, usan b tstrap, me veo obligado a introducirte en el argumento. Tambien adentro de el posterior apartado voy a manosear dos veces el tema, y nunca deseo que te pierdas. jejej

Te lo hago bien resumido. B tstrap es un framework css desarrollado por Twitter, que permite hacer tu web adaptable al volumen de monitor sobre tus usuarios. Es decir convierte una pagina en plenamente responsive (En Caso De Que lo aplicas bien. jejej).

B tstrap seri­a un framework datingranking.net/es/eastmeeteast-review css desarrollado por Twitter, que permite efectuar tu web adaptable al volumen de pantalla sobre tus usuarios

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

Por ejemplo, Con El Fin De disenar algo que se mire asi en tu pc. (ver forma)

Deberias fijar, mediante b tstrap, que cada elemento ocupe 4 de estas 12 columnas en un ordenador. Despues, Con El Fin De efectuarlo adaptable, podrias decirle que ocupe 6 de las 12 Con El Fin De una tablet (es aseverar habria 2 columnas), y de un movil tome 12/12 columnas.

Por si no te quedo Cristalino, te aviso que tengo programado un post rotundo referente a este asunto. Pero mientras tanto te recomiendo que pases por este excelente articulo de el blog AyudaWP. ??

Estampacion de paginas web en html y css

Este tutorial de edicion tiene igual que objetivo, que te familiarices con la edicion del html y no ha transpirado css sobre una web. De ello ire cambiando ciertos elementos de la plantilla Creative Agency. Descargala aca Con El Fin De seguirme el paso. ??

Luego de descargada te encontraras con un archivo .zip, descomprimelo asi­ como veras lo que sigue.

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

Los archivos que editaremos sera el index.html, y no ha transpirado en el interior la carpeta css el archivo style.css. Las otras archivos .css no los tocaremos. Entre dichos .css esta el que controla el framework sobre b tstrap (b tstrap.min), el cual no deberias editar, fuera de seas un programador experto. jeje. Asimismo hay otros archivos de moda como el owl.carousel, el que da garbo a un carrusel sobre imagenes que existe en la pagina. No obstante igual que ya te dije, yo unico me metere en el style.css, bien tendras tiempo tu sobre manosear lo otras. jeje

En mi caso usare el editor de texto notepad++, No obstante podras seguirme con cualquier editor. ??

Bien con ambos archivos (index.html y style.css) abiertos con tu editor de escrito, podemos empezar a trabajar. Dado que el autor de esta plantilla nos organizo el css de forma llamativo, seguiremos el orden sobre su tabla de editar varios sobre las componentes.

Iremos cambiando cada contenido desde el html y no ha transpirado editando su moda desde el css. Comencemos por los i?ngulos generales.

General

Son varios las componentes que se editan en el apartado general sobre la hoja style.css. Veremos igual que editar determinados de ellos. ??

Impresion sobre textos

Comencemos con los textos, tanto titulos (title, h2. h5) como cuerpo (body).

Por ejemplo podri­amos hacer algunas ediciones como las siguientes

Cambios sobre volumen del cuerpo humano de escrito (font-family en body), causa sobre las titulos (font-family) y color. Igual que asi ademas velocidades de envergadura, individual sobre cada titulo (title, h2.. h5).

Ahora realizados los cambios guardalos.

Posteriormente percibe a la pestana de html desplazandolo hacia el pelo ejecuta el documento en tu navegador favorito, mi caso Chrome.

La ocasii?n ejecutado podras comparar los cambios. En este exponente veras que en el inicio de la sitio web nunca se velocidades el color de titular (WE ARE CREATIVE AGENCY). Estando que dentro de las cambios se realizo un intercambio de color en las titulos title,h2. h5. Eso es por que en el html dicho titular se lo realizo escaso la especie white-text.

Si quieres que refran titular tome el color sobre todos las titulos, no precisas mas que suprimir el O generar una novedosa especie con el color que quieras darle al titular principal de tu pagina web.

Eso en cuanto a la impresion de estilos sobre texto, los cambios sobre las textos en si, debes efectuarlo desde el documento html. Por ejemplo en titular de el home podrias editarlo como sigue.

Lo que acabo sobre apuntar tal ocasii?n se cae sobre sazonado asi­ como esta casi sobre mas, pero bueno no se que tan novato eres.. jejeje

Impresion de enlaces

Siguiendo en el apartado general podri­amos editar las caracteristicas sobre las enlases. De ello en el archivo style.css deberias indagar la etiqueta “a”.

Dentro de las lineas 83 asi­ como 96 del archivo .css se encuentras las ediciones sobre Modalidad de las enlaces. Por ejemplo en la camino 83 editas el color inaugural, entretanto que en la linea 94 el color cuando pasamos el cursor. En la linea 93 puedes Canjear la opacidad de el enlace cuando pasamos el cursor.

Cualquier sea el casamiento, Con El Fin De Canjear su contenido deberas realizarlo desde su html. El cual es el sub siguiente

Asi que bueno es bien sencillo editar tanto el contenido igual que el bosquejo sobre tus enlaces. ??

Leave a Reply

Your email address will not be published. Required fields are marked *