Need help? Chat now!

Hostwinds Blog

Resultados de búsqueda para:


Tutoriales de Hostwinds: Cómo construir un sitio web básico de blogs sin una aplicación de creación de sitios Pt. 3 Foto principal

Tutoriales de Hostwinds: Cómo construir un sitio web básico de blogs sin una aplicación de creación de sitios Pt. 3

por: Hostwinds Team  /  diciembre 28, 2018


Parte 3 de la serie de blogs de codificación de hostwinds está aquí, ¡gente!En las partes 1 y 2, construimos una página de inicio para nuestro sitio web de blogs con HTML y tres páginas web para tres postes hipotéticos de blog utilizando HTML.¡En CSS!CSS es un lenguaje de programación que funciona en conjunto con su código HTML para que su sitio web se vea mejor y más personalizado.Tenemos mucho que cubrir aquí, ¡así que cuelgue apretado!Antes de comenzar a crear nuestro primer documento CSS, repasaremos cómo vincular nuestro documento CSS a nuestros documentos HTML.¡Es fácil!

Oh y antes de que comencemos Vinculación de nuestro documento CSS a nuestros documentos HTML, consulte estos enlaces a la Parte 1 de esta serie de blogs, Parte 2 de esta serie de blogs y nuestras hojas de trucos en forma de las publicaciones de blog anteriores tituladas "Hostwinds HTML Hype Parte 2: EtiquetaHablar "y" Hostwinds CSS chat ".

Tutoriales de Hostwinds: Cómo crear un sitio web básico de blogs sin una aplicación de creación de sitios Pt.1

Tutoriales de Hostwinds: Cómo construir un sitio web básico de blogs sin una aplicación de creación de sitios Pt. 2

Hostwinds HTML Hype Parte 2: Charla sobre etiquetas

Chat CSS de Hostwinds

PDPara reiterar esto, el sitio web de blogs que estamos creando es básico.La esperanza es que podremos expandirse continuamente en nuestro sitio web y hacerlo lentamente, hacerlo más hermoso / dinámico / mágico Post por blog Post.Para todos los efectos, esta serie de blog fue diseñada para brindarle los fundamentos del edificio de sitios web.Bien, ahora vamos a bucear!

Primero, primero: vinculando su documento CSS a su documento HTML

Agregue esta línea de código dentro de sus etiquetas de apertura y cierre en los cuatro de sus documentos HTML:

¡Recuerda empujar a guardar!Para revisar, nuestros cuatro documentos HTML se ven como en este momento:

1. Página de inicio del sitio web:

Mi sitio web de blogs

Mi sitio web de blogs

Título de la publicación de blog 1

Aquí es donde puede colocar una breve sinopsis de la publicación de su blog si lo desea

Título de la publicación de blog 2

Aquí es donde puede colocar una breve sinopsis de la publicación de su blog si lo desea

Título de la publicación de blog 3

Aquí es donde puede colocar una breve sinopsis de la publicación de su blog si lo desea

¡Gracias por visitar este sitio de blogs!

2. Página web de la publicación de blog 1:

Mi sitio web de blogs | Blog 1

Mi sitio web de blogs

Título de la publicación de blog 1

Aquí es donde puede colocar todo el texto que desea agregar a su publicación de blog para el día.

¡Gracias por visitar este sitio de blogs!

3. Página web de la publicación de blog 2:

Mi sitio web de blogs | Blog 2

Título de la publicación de blog 2

Aquí es donde puede colocar todo el texto que desea agregar a su publicación de blog para el día.

¡Gracias por visitar este sitio de blogs!

4. Página web de la publicación de blog 3:

Mi sitio web de blogs | Blog 3

Título de la publicación de blog 3

Aquí es donde puede colocar todo el texto que desea agregar a su publicación de blog para el día.

¡Gracias por visitar este sitio de blogs!

NOTIFICACIÓN IMPORTANTE: Cuando el fragmento de código que inserto en estas publicaciones de blog es demasiado largo para caber en la ventana, aparecerá una pequeña barra de desplazamiento en la parte inferior de dicho código cuando pase el mouse sobre esa área. Puede deslizar la barra de desplazamiento hacia la derecha para ver el fragmento completo de código.

Ahora, tomaremos toda esta situación de CSS paso a paso.

Cómo configurar inicialmente el documento CSS

Paso 1: Cree una nueva carpeta dentro de la misma carpeta y editor de texto en el que está ahora (la misma carpeta y editor de texto que coloca su índice.html en la parte 1).Nombra la carpeta "CSS".A continuación, cree un nuevo archivo dentro de esa carpeta y nombra el archivo "Style.CSS", su documento STYLE.CSS se modificará todos sus documentos HTML.

Paso 2: Ahora podemos hacer referencia a (o "objetivo") todas las etiquetas que nos gustaría modificar así:

cuerpo {} nav {} h4 {} h3 {} img {} p {} botón {} botón: hover {} footer {} div {} .ReadNext {} #thankyou {}

Solo un recordatorio: Antes de pasar al Paso 3, revise la publicación del blog con respecto a los selectores, propiedades, valores de propiedades y sintaxis de CSS, si aún no está bien versado en esa arena.

Paso 3: Queremos que el fondo de nuestra página de inicio y las páginas web sea una imagen que ocupe la página completa.Puede elegir cualquier imagen de su gusto para ser su experiencia, pero nombraremos nuestra imagen de fondo "Your_Background_Image.png" para este tutorial.Además, haremos una hermosa imagen de las nubes en nuestros antecedentes.Para hacer de esta imagen los fondos de nuestras páginas web y hágalas asumir toda la página en cada una de nuestras páginas web, insertaremos las propiedades "Imagen de fondo" y "Tamaño de fondo" dentro del selector "Cuerpo" en el mismoparte superior del documento.

Nota: Su CSS (y HTML, para el caso) debe estar en orden desde qué elemento aparece en la página primero, luego segundo, y así sucesivamente.

Otra nota: puede estar preguntándose a sí mismo: "¿Por qué hay dos períodos frente a" /images/your_background_image.jpg? "¡Buena captura! Puede recordar la discusión que teníamos con respecto a las rutas de archivos relativos en la Parte 1 de esta serie de blogs.Utilizamos solo un período frente a nuestra referencia "/css/style.css" cuando usamos una ruta de archivo relativa para llamar a nuestro CSS al comienzo de esta publicación de blog. Esto se debe a que la carpeta "CSS" está dentro de la misma.carpeta que nuestro archivo índice.html. Hay dos períodos frente a "/images/your_background_image.jpg" porque le estamos diciendo que el navegador comience en nuestra carpeta "CSS" donde se encuentra nuestro documento de estilo.css, luego sale de eso.La carpeta "CSS", luego entra en una carpeta diferente llamada "Imágenes", luego tome el archivo de imagen llamado "Your_Background_Image.jpg".

A continuación, queremos cambiar la fuente del texto de enlace ("Blog Home") en nuestra barra de navegación y haga que el texto del enlace sea todo en mayúsculas.Por lo tanto, el documento hasta ahora debería aparecer así:

body { background-image: url('../images/your_background_image.jpg'); background-size:cover;} nav { font: 22px 'Cinzel', serif; text-transform: uppercase;}

Paso 4: Queremos cambiar las fuentes de todos nuestros títulos, hacer que sus textos estén en mayúsculas, centrar el texto del título y cambiar el color del texto a azul oscuro.

A continuación, nos aseguraremos de que las imágenes estén centradas, cambien sus anchos, coloque las fronteras a su alrededor y hagan que sus fronteras se reduzcan a los lados.Con estas adiciones incluidas, el documento se ve así:

body { background-image: url('../images/your_background_image.jpg'); background-size:cover;} nav { font: 22px 'Cinzel', serif; text-transform: uppercase;} h4 { font:33px 'Cinzel', serif; text-transform: uppercase; text-align: center; color: #5a7e9e;} h3 { font: 27px 'Cinzel', serif; text-transform: uppercase; text-align: center; color: #0b053f;} img { margin-left: auto; margin-right: auto; width: 50; display: block; border: 3px solid black; border-radius: 25px;}

Paso 5: ¡Moviéndose a la derecha junto!Cambiemos la fuente y el color de nuestros párrafos, mientras que también centramos los párrafos del texto.

Después de eso, vamos a modificar los botones en la página de inicio.Para centrarlos, usaremos las siguientes propiedades:

display: block;margin-left: auto;margin-right: auto;

Para cambiar el color de fondo, para hacer el texto en mayúsculas, para cambiar la familia de fuentes y el tamaño de fuente, para centrar el texto dentro de los botones, para agregar espacio entre los lados de los botones y el texto dentro de los botones, para dar los botones AFrontera negra sólida, y para redondear las esquinas de los botones, generaremos el siguiente código:

background-color: #bee5eb;text-transform: uppercase;font: 27px 'Cinzel', serif;text-align: center;padding: 20px 30px;border: 3px solid black;border-radius: 25px;

El documento ahora debería aparecer así:

body { background-image: url('../images/your_background_image.jpg'); background-size:cover;} nav { font: 22px 'Cinzel', serif; text-transform: uppercase;} h4 { font:33px 'Cinzel', serif; text-transform: uppercase; text-align: center; color: #5a7e9e;} h3 { font: 27px 'Cinzel', serif; text-transform: uppercase; text-align: center; color: #0b053f;} img { margin-left: auto; margin-right: auto; width: 50; display: block; border: 3px solid black; border-radius: 25px;} p { font: 22px 'Cinzel', serif; text-align: center; color: #074b82;} button { font: 27px 'Cinzel', serif; text-transform: uppercase; text-align: center; margin-left: auto; margin-right: auto; display:block; background-color: #bee5eb; padding: 20px 30px; border: 3px solid black; border-radius: 25px;}

Paso 6: Esta parte es genial!Para cambiar los colores de los botones de la página de inicio y hacer que casi aparezcan un poco, hasta que alguien se cierne sobre ellos con su mouse, escribiremos el siguiente código:

button:hover { background-color: #00a1f5; opacity: .5;}

Ahora vamos a modificar nuestro pie de página y la etiqueta DIV final.Cambiaremos el texto del pie de página (también conocido como cambiar la familia de fuentes, el tamaño de la fuente, el color de la fuente y la alineación de texto), el color de fondo del pie de página y agregar un espacio entre el pie de página y el área por encima de él escribiendo en este código CSS:

footer { font: 27px 'Cinzel', serif; text-align: left; color: #074b82; background-color: #bee5eb; margin-top: 10px;}

También modificaremos la etiqueta que creamos en la Parte 1 para comprender mejor cómo funcionan las etiquetas.Haremos el fondo del contenido entre las etiquetas de apertura y cierre en nuestra página index.html un gradiente de tres colores.Esto nos permitirá ver qué anidando nuestro trozo de código entre las etiquetas de apertura y cierre.Oso conmigo aquí, gente, porque esto no se verá muy estéticamente agradable en nuestra página de inicio.Añadiremos el siguiente código CSS a la parte inferior de nuestro documento Style.CSS, para que podamos crear este fondo degradado:

div { background-image: linear-gradient(to right, #2e6bd4, #bee5eb, #2e6bd4);}

Paso 7: Eche un vistazo a todo el documento CSS y asegúrese de que se vea adorable:

body { background-image: url('../images/your_background_image.jpg'); background-size:cover;} nav { font: 22px 'Cinzel', serif; text-transform: uppercase;} h4 { font:33px 'Cinzel', serif; text-transform: uppercase; text-align: center; color: #5a7e9e;} h3 { font: 27px 'Cinzel', serif; text-transform: uppercase; text-align: center; color: #0b053f;} img { margin-left: auto; margin-right: auto; width: 50; display: block; border: 3px solid black; border-radius: 25px;} p { font: 22px 'Cinzel', serif; text-align: center; color: #074b82;} button { font: 27px 'Cinzel', serif; text-transform: uppercase; text-align: center; margin-left: auto; margin-right: auto; display:block; background-color: #bee5eb; padding: 20px 30px; border: 3px solid black; border-radius: 25px;} button:hover { background-color: #00a1f5; opacity: .5;} footer { font: 27px 'Cinzel', serif; text-align: left; color: #074b82; background-color: #bee5eb; margin-top: 10px;} div { background-image: linear-gradient(to right, #2e6bd4, #bee5eb, #2e6bd4);}

Paso 8: Puede recordarlo de la Parte 2 de esta serie de blogs, pero la única diferencia (excepto los encabezados y la parte del texto entre las etiquetas de apertura y cierre que dicen "Post de blog 1" en lugar de "Blog Post 2" o "Post de blog3 ") entre la página web de la publicación del blog y las páginas web para la publicación de blog 2 y 3 es que las últimas páginas web contienen un enlace que permite a los usuarios ver la siguiente publicación del blog (la página web para la publicación del blog, uno no necesitaEste enlace, como es la publicación de blog más actual).En la Parte 2, agregamos la clase "README" a la etiqueta dentro del pie de página de nuestro blog Publica 2 y 3 documentos HTML.Ahora nos dirigiremos a esa clase en este documento CSS para que su texto en mayúsculas, agregue espacio entre las letras del enlace "Leer Siguiente Blog Post" y haga que los "¡Gracias por visitar este sitio de blogs!"flotan al lado del enlace "Leer Siguiente Blog Post" en lugar de debajo de ella (por defecto).

Para lograr estas modificaciones, agregaremos el siguiente trozo de código a la parte inferior de nuestro documento CSS:

#ReadNext { text-transform: uppercase; letter-spacing: 3px; float: left;}

Paso 9: ¿Recuerde que cuando agregamos ese ID a la etiqueta anidada entre nuestras etiquetas de apertura y cierre en nuestro documento Índice.html en la Parte 1?Hicimos esto, por lo que podríamos entender mejor cómo funcionan las identificaciones y cómo dirigirlas en CSS.¡Aquí vamos!Primero, escriba el siguiente código en la parte inferior de nuestro documento STYLE.CSS:

#ThankYou { text-transform: uppercase; color: #0b053f;}

Ahora, lo explicaré.En primer lugar, el hashtag frente a "Gracias" le dice al navegador, esta es una identificación.Dando solo el

Etiqueta en el índice.html La identificación "Gracias" y dirigida a ese ID en CSS para que el texto de ese párrafo específico sea en mayúsculas y un azul marino, nos aseguramos de que solo el párrafo en el pie de página de la página de inicio se cambie de esa manera.Los mismos párrafos en los pies de página de las páginas web para las publicaciones de blog 1, 2 y 3 no estarán en mayúsculas y no serán ese color azul marino.Vaya hacia adelante y revise sus páginas web para ver esta distinción para usted mismo después de agregar el código de arriba a su página Style.CSS.

Nuestro documento CSS ahora se verá así:

body { background-image: url('../images/your_background_image.jpg'); background-size:cover;} nav { font: 22px 'Cinzel', serif; text-transform: uppercase;} h4 { font:33px 'Cinzel', serif; text-transform: uppercase; text-align: center; color: #5a7e9e;} h3 { font: 27px 'Cinzel', serif; text-transform: uppercase; text-align: center; color: #0b053f;} img { margin-left: auto; margin-right: auto; width: 50; display: block; border: 3px solid black; border-radius: 25px;} p { font: 22px 'Cinzel', serif; text-align: center; color: #074b82;} button { font: 27px 'Cinzel', serif; text-transform: uppercase; text-align: center; margin-left: auto; margin-right: auto; display:block; background-color: #bee5eb; padding: 20px 30px; border: 3px solid black; border-radius: 25px;} button:hover { background-color: #00a1f5; opacity: .5;} footer { font: 27px 'Cinzel', serif; text-align: left; color: #074b82; background-color: #bee5eb; margin-top: 10px;} div { background-image: linear-gradient(to right, #2e6bd4, #bee5eb, #2e6bd4);} .ReadNext { text-transform: uppercase; letter-spacing: 3px; float: left;} #ThankYou { text-transform: uppercase; color: #0b053f;}

¡Al paso 10!

¡Oh espera!Primero, un "P.S."

PDNo puedo enfatizar esto lo suficiente: en sitios web más complejos, clases, etiquetas e ID son críticas y se usan muy a menudo.

Bien, ¡AHORA en el paso 10!

Paso 10: ¡Pruebe su sitio web actualizado y páginas web!Vaya a su Explorador de archivos, haga clic con el botón derecho en el archivo "index.html", y haga clic en "Abrir con".A continuación, seleccione su navegador de Internet preferido (Recomiendo Google Chrome).Haga clic en los botones "Leer Blog Post" y observe los cambios que hicimos en nuestras páginas web con CSS.

Página principal

Publicación de blog 1 Página web

Publicación de blog 2 Página web

Publicación de blog 3 Página web

Lienzo colorido CSS

En cierre, CSS hace que los sitios web sean más estéticamente agradables y dinámicos. Esperamos que haya podido beneficiarse de esta serie de blogs de tutoría hasta ahora, y esperamos continuar desarrollando este sitio web en futuras publicaciones de blogs. El plan es hacer que nuestro sitio web sea más interactivo y más elegante, ya que avanzamos. Alerta de spoiler: incluso podemos lanzar un poco de javascript en la mezcla en algún momento. Esperamos que disfrute el resto de su semana.

Escrito por Hostwinds Team  /  diciembre 28, 2018