Home-theater-designers
Crear un sitio web es una excelente manera de expresarse. Aunque existen muchas herramientas de creación de sitios web, escribirlo usted mismo es una forma divertida de aprender más sobre cómo funcionan los sitios web entre bastidores. Un buen proyecto para principiantes es crear un sitio web y agregar una imagen de fondo con CSS. Este proyecto lo pondrá en funcionamiento tanto con HTML como con CSS.
¿Qué es CSS?
CSS son las siglas de Cascading Style Sheet. Es un lenguaje de programación que le permite diseñar lenguajes de marcado. Uno de esos lenguajes de marcado es HTML o lenguaje de marcado de hipertexto. HTML se utiliza para crear sitios web. Aunque puede controlar parte del estilo del sitio web utilizando HTML, CSS ofrece muchas más opciones de control y diseño.
Creación de un sitio web básico con HTML
Dado que CSS es solo un lenguaje de estilo, para usarlo, primero necesitamos algo para diseñar. Un sitio web muy básico será suficiente para que comencemos a jugar con CSS. Nuestra página mostrará 'Hola mundo'.
|_+_|
En caso de que no esté familiarizado con HTML, repasemos rápidamente qué hacen todos los elementos. Como se mencionó, HTML es un lenguaje de marcado, lo que significa que usa etiquetas para marcar cuál es el texto. Siempre que veas una palabra rodeada de es una etiqueta. Hay dos tipos de etiquetas, una etiqueta que marca el comienzo de una sección usando y otra que marca el final de una sección usando. El texto dentro de una sección también está destinado a facilitar la visualización de esta distinción.
En nuestro ejemplo, tenemos cuatro etiquetas. los html La etiqueta indica qué elementos forman parte del sitio web. los cabeza contiene la información del encabezado que no se muestra en la página, pero es necesaria para crear la página. Todos los elementos mostrados se encuentran entre los cuerpo etiquetas. Solo tenemos un elemento mostrado, el pag etiqueta. Le dice al navegador web que el texto es un párrafo.
Relacionado: 10 ejemplos de código CSS simples que puede aprender en 10 minutos
Agregar CSS a HTML
Ahora que tenemos una página simple, podemos personalizar el estilo con CSS. Nuestra página es bastante simple en este momento, y no hay mucho que podamos hacer, pero comencemos haciendo que nuestro párrafo se destaque para que podamos distinguirlo del fondo agregando un borde.
|_+_|
Ahora, nuestro párrafo estará rodeado por un borde negro. Agregar una descripción de estilo en CSS a nuestra etiqueta de párrafo le dijo al sitio web cómo darle estilo al párrafo. Podemos agregar más descripciones. Aumentemos el espacio en blanco, o relleno, alrededor de nuestro párrafo y centremos nuestro texto.
juegos mentales para jugar con amigos|_+_|
Nuestro sitio web se ve mejor, pero nuestro HTML comienza a verse desordenado con todas esas descripciones en la etiqueta de párrafo. Podemos mover esta información a nuestro encabezado. Nuestro encabezado es para la información que necesitamos para mostrar el sitio web correctamente.
|_+_|
Ahora nuestro HTML es más fácil de leer. Notarás que tuvimos que cambiar algunas cosas. La etiqueta de estilo le dice al navegador web información de estilo, pero también qué estilo también. En nuestro ejemplo, hemos utilizado dos formas diferentes de decirle qué estilo. los pag en la etiqueta de estilo le dice al navegador web que aplique ese estilo a todas las etiquetas de párrafo. los #ourParagraph la sección le dice que solo aplique estilo a los elementos con la identificación ourParagraph . Darse cuenta de identificación La información se agregó a la etiqueta p en nuestro cuerpo.
Importación de un archivo CSS a su sitio web
Agregar la información de estilo al encabezado hace que nuestro código sea mucho más fácil de leer. Sin embargo, si queremos diseñar muchas páginas diferentes de la misma manera, tenemos que agregar ese texto en la parte superior de cada página. Puede que no parezca mucho trabajo, puede copiarlo y pegarlo después de todo, pero crea mucho trabajo si desea cambiar un elemento más adelante.
En su lugar, mantendremos la información CSS en un archivo separado e importaremos el archivo para darle estilo a la página. Copie y pegue la información entre las etiquetas de estilo en un nuevo archivo CSS ourCSSfile.css .
|_+_|Luego, importe el archivo al archivo HTML.
|_+_|Agregar una imagen de fondo con CSS
Ahora que tiene una base sólida en HTML y CSS, agregar una imagen de fondo será pan comido. Primero, identifica a qué elemento quieres darle una imagen de fondo. En nuestro ejemplo, agregaremos un fondo a toda la página. Esto significa que queremos cambiar el estilo del cuerpo . Recuerde, las etiquetas corporales contienen todos los elementos visibles.
|_+_|Para cambiar el estilo del cuerpo en CSS, primero use el cuerpo palabra clave. Luego agregue llaves como hicimos antes {}. Toda la información de estilo para el cuerpo debe estar entre llaves. El atributo de estilo que queremos cambiar es imagen de fondo . Hay muchos atributos de estilo. No espere memorizarlos todos. Marque una hoja de referencia de propiedades CSS con atributos que desee recordar.
Relacionado: 8 efectos HTML geniales que cualquiera puede agregar a su sitio web
Después del atributo, use dos puntos para indicar cómo cambiará el atributo. Para importar una imagen, use url () . indica que está utilizando un enlace para apuntar a la imagen. Coloque la ubicación del archivo entre corchetes entre comillas. Finalmente, termine la línea con un punto y coma. Aunque el espacio en blanco no tiene significado en CSS, use sangría para facilitar la lectura de CSS.
Nuestro ejemplo se ve así:
Si su imagen no se muestra correctamente debido al tamaño de la imagen, puede modificar la imagen directamente. Sin embargo, existen atributos de estilo de fondo en CSS que puede utilizar para modificar el fondo. Las imágenes que son más pequeñas que el fondo se repetirán automáticamente en el fondo. Para apagar eso, agregue repetición de fondo:no repetir; a tu elemento.
También hay dos formas de hacer que una imagen cubra todo el fondo. Primero, puede establecer el tamaño de fondo al tamaño de la pantalla con tamaño de fondo: 100% 100%; , pero esto estirará la imagen y puede distorsionarla demasiado. Si no desea que se modifiquen las proporciones de la imagen, también puede establecer el tamaño del fondo en cubrir . Cubrir hará que la imagen de fondo cubra el fondo, pero no distorsione la imagen.
Cambiar el color de fondo
Cambiemos una última cosa. Ahora que tenemos antecedentes, nuestro párrafo es difícil de leer. Hagamos su fondo blanco. El proceso es similar. El elemento que queremos modificar es #ourParagraph. El # indica que 'ourParagraph' es un nombre de identificación. A continuación, queremos establecer el color de fondo atribuir al blanco.
|_+_|Mucho mejor.
Continuar diseñando su sitio web con CSS
Ahora que sabe cómo cambiar el estilo de diferentes elementos HTML, ¡el cielo es el límite! El método básico para cambiar los atributos de estilo es el mismo. Identifique el elemento que desea cambiar y describa cómo cambiar el atributo. La mejor manera de aprender más es jugar con diferentes atributos. Ponte a prueba para cambiar el color de tu texto a continuación.
Cuota Cuota Pío Correo electrónico Los 8 mejores sitios para ejemplos de codificación HTML de calidad¿Quiere aprender HTML para codificar sus propios sitios web y aplicaciones? Utilice estos ejemplos de páginas web y el código fuente para aprender HTML y CSS.
Leer siguiente Temas relacionados- Programación
- HTML
- Web Design
- CSS
J. Seaton es un escritor científico que se especializa en analizar temas complejos. Tiene un doctorado de la Universidad de Saskatchewan; su investigación se centró en utilizar el aprendizaje basado en juegos para aumentar la participación de los estudiantes en línea. Cuando no está trabajando, la encontrará leyendo, jugando videojuegos o haciendo jardinería.
Más de Jennifer SeatonSuscríbete a nuestro boletín
¡Únase a nuestro boletín de noticias para obtener consejos técnicos, reseñas, libros electrónicos gratuitos y ofertas exclusivas!
¿Por qué no se entregan mis mensajes de texto?Haga clic aquí para suscribirse