Este post que se me dio por titular Ejemplos de paginas web en html asi como css + Tutorial sobre edicion, constara de dos zonas. En la sobre 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 impresion sobre html y css. Cubo que cualquiera sea la plantilla que vallas a descargar, vas a necesitar adaptarla a tu programa, empezare con el tutorial.
De mas esta decirte que si eres un especialista en html asi como css puedas saltarte la primera pieza. ??
Tabla de contenidos
?Cual es la mision de el html asi como css?
Antiguamente de meternos a lleno quiero asegurarme que entiendas bien cual es la mision del html desplazandolo hacia el pelo css. No te voy a aburrir con ninguna sobre esas definiciones tediosas que unico expertos entienden. Basicamente deseo que entiendas que el html seria un jerga sobre afectado con el que le das la estructura an una pagina web. Entretanto que el css seria un jerga sobre garbo que define la presentacion sobre un documento html.
Con el html definiras las elementos y no ha transpirado su localizacion en la pagina. Entretanto que con las hojas sobre moda css podras dar colores, tamanos, alineacion, margenes, etc.
Por lo tanto con el html definiras los puntos y su ubicacion en la pagina (imagenes, menus, titulos, parrafos, etc). Mientras que con las hojas sobre estilo css podras dar colores, tamanos, adscripcion, margenes, etc a cada factor.
?Que es B tstrap?
Como la mayor parte de estas plantillas que te dejare como ejemplo, usan b tstrap, me veo obligado a introducirte en el tema. Aparte en el interior de el posterior apartado voy a rozar un par de veces el argumento, y nunca deseo que te pierdas. jejej
Te lo hago bien resumido. B tstrap seria un framework css desarrollado por Twitter, que permite realizar tu web adaptable al medida de monitor de tus usuarios. En otras palabras convierte la pagina en absolutamente responsive (En Caso De Que lo aplicas bien. jejej).
B tstrap seria un framework css desarrollado por Twitter, que permite hacer tu web adaptable al envergadura sobre pantalla sobre tus usuarios
Trabaja con un esquema rejilla de 12 columnas, permitiendo al disenador, explicar cuantas columnas deberias usar un factor en cada dispositivo.
Por ejemplo, Con El Fin De disenar alguna cosa que se vea mismamente en tu pc. (ver apariencia)
Debes fijar, a traves de b tstrap, que cada aspecto ocupe 4 de las 12 columnas en un ordenador. Seguidamente, para efectuarlo adaptable, podrias decirle que ocupe 6 de las 12 para la tablet (es decir habria 2 columnas), y no ha transpirado para un movil tome 12/12 columnas.
Por si no te quedo Cristalino, te aviso que tengo programado un post total referente a este tema. Aunque entretanto tanto te recomiendo que pases por este excepcional articulo de el blog AyudaWP. ??
Impresion sobre paginas web en html asi como css
Este tutorial sobre edicion tiene igual que objetivo, que te familiarices con la edicion de el html desplazandolo hacia el pelo css sobre una web. Con el fin de ello ire cambiando determinados puntos sobre la plantilla Creative Agency. Descargala aqui de seguirme el camino. ??
Luego de descargada te hallaras con un archivo .zip, descomprimelo asi como veras lo que sigue.
Abre con tu navegador el archivo index.html, Con El Fin De ver la web original.
Las archivos que editaremos sera el index.html, y en el interior la carpeta css el archivo style.css. Los demas archivos .css nunca los tocaremos. Dentro de dichos .css esta el que controla el framework sobre b tstrap (b tstrap.min), el que nunca debes editar, aparte seas un programador especialista. jeje. Asimismo existe otros archivos sobre garbo como el owl.carousel, el cual da garbo a un carrusel de imagenes que Existen en la pagina. No obstante como debido a te dije, yo separado me metere en el style.css, ya tendras tiempo tu sobre tocar lo otros. jeje
En mi caso usare el editor de texto notepad++, sin embargo podras seguirme con todo editor. ??
Ahora con los dos archivos (index.html y style.css) abiertos con tu editor de escrito, podemos comenzar a trabajar. Cubo que el autor sobre esta plantilla nos organizo el css sobre forma llamativo, seguiremos el disciplina sobre su tabla de editar algunos de sus componentes.
Iremos cambiando cada contenido desde el html y editando su Modalidad desde el css. Comencemos por los enfoque generales.
General
Son varios los elementos que se editan en el apartado general sobre la hoja style.css. Veremos igual que editar algunos de ellos. ??
Impresion de textos
Comencemos con los textos, tanto titulos (title, h2. h5) como cuerpo (body).
Por ejemplo podemos hacer algunas ediciones como las subsiguientes
Cambios de tamano del torso de texto (font-family en body), origen sobre las titulos (font-family) desplazandolo hacia el pelo color. Igual que mismamente tambien cambio sobre envergadura, individual sobre cada titulo (title, h2.. h5).
Bien realizados los cambios guardalos.
Posteriormente ve a la pestana sobre html y ejecuta el documento en tu navegador preferido, mi caso Chrome.
La ocasii?n ejecutado podras comparar las cambios. En este modelo veras que en el inicio de la pagina web nunca se marchas el color de titular (WE ARE CREATIVE AGENCY). Estando que en el interior sobre los cambios se realizo un marchas de color en las titulos title,h2. h5. Eso es por que en el html expresado titular se lo realizo bajo la tipo white-text.
En caso de que deseas que refran titular tome el color de todos los titulos, no necesitas mas que suprimir el O crear la nueva especie con el color que quieras darle al titular principal sobre tu pagina web.
Eso en cuanto a la edicion de clases de escrito, los cambios de las textos en si, debes realizarlo desde el documento html. Por ejemplo en titular de el home podrias editarlo igual que sigue.
Lo que https://datingmentor.org/es/chatstep-review/ acabo de apuntar tal vez se cae sobre sazonado y no ha transpirado esta casi de mas, aunque bueno nunca se que tan novato eres.. jejeje
Edicion de enlaces
Siguiendo en el apartado general podriamos editar las caracteristicas sobre las enlases. Para ello en el archivo style.css deberias indagar la calificativo a.
Entre las lineas 83 y 96 de el archivo .css se encuentras las ediciones sobre moda sobre las enlaces. Por ejemplo en la linea 83 editas el color original, entretanto que en la linea 94 el color cuando pasamos el cursor. En la linea 93 puedes cambiar la opacidad del casamiento cuando pasamos el cursor.
Alguno sea el casamiento, Con El Fin De cambiar su contenido deberas realizarlo desde su html. El que es el siguiente
Asi que bueno seria bien sencillo editar tanto el contenido como el croquis de tus enlaces. ??
Leave A Comment