El universo es violeta (2ª edición)
4 de febrero de 2020
¡Saludos a todas, todos y todes! Desde Antares nos sumamos a la iniciativa del 11F (Día de la Mujer y la Niña en la Ciencia)...
MANUAL DE WEEBLY
PARA ANTARIANOS INTRÉPIDOS*
|
* No uso el masculino genérico como norma. En general, todo lo que diga será genérico, así que usaré el masculino, el femenino y el neutro genérico indistintamente y de forma aleatoria.
|
¡Saludos, intrépide antariane!
Si eres el nuevo webmaster de la página de Antares, espero que esto te sea de ayuda. Porque Weebly es..
Si eres el nuevo webmaster de la página de Antares, espero que esto te sea de ayuda. Porque Weebly es..
Weebly es la cosa menos personalizable que he visto en mi vida. ¡No tiene apenas opciones! Pero, a menos que queráis (volver a) hacer mudanza de página web, hay que hacerse a él aunque lo detestes con todo tu ser.
Por eso estoy yo aquí. Para hacerte la tarea algo más sencilla.
Lo primero que tienes que saber es que no te vas a cargar la página de la agrupación con mover el ratón. O no lo harás, mientras no le des a "Publicar" después (arriba a la derecha). Puedes realizar los cambios que quieras en el editor, dejarlos guardados y no publicarlos; o sea, que tienes margen para reparar las cagadas. Pero Weebly no tiene flechita de "Deshacer cambios".
En cualquier caso, nadie visita la web, así que, si te la cargas, sería una oportunidad para reconstruirla en un lugar mejor.
De todas maneras, si te da miedo y prefieres empezar con ruedines, puedes experimentar con la "web borrador": "Agrupación Gastronómica Cantares" en el panel de control de Weebly. También puedes hacer una copia de seguridad desde el panel de control pulsando en los puntos suspensivos a la derecha y luego en "Copiar sitio", aunque no se copiarán las entradas de blog.
Por eso estoy yo aquí. Para hacerte la tarea algo más sencilla.
Lo primero que tienes que saber es que no te vas a cargar la página de la agrupación con mover el ratón. O no lo harás, mientras no le des a "Publicar" después (arriba a la derecha). Puedes realizar los cambios que quieras en el editor, dejarlos guardados y no publicarlos; o sea, que tienes margen para reparar las cagadas. Pero Weebly no tiene flechita de "Deshacer cambios".
En cualquier caso, nadie visita la web, así que, si te la cargas, sería una oportunidad para reconstruirla en un lugar mejor.
De todas maneras, si te da miedo y prefieres empezar con ruedines, puedes experimentar con la "web borrador": "Agrupación Gastronómica Cantares" en el panel de control de Weebly. También puedes hacer una copia de seguridad desde el panel de control pulsando en los puntos suspensivos a la derecha y luego en "Copiar sitio", aunque no se copiarán las entradas de blog.
Dicho eso, a ver si te puedo echar un cable:
1. Lo básico
Del editor de Weebly te interesan 6 pestañas (es que las demás son de pago):
- Construir. Básica, basiquísima. Aprendes a dominarla fácil. Te permite introducir cuadros de texto, de título, imágenes, galería de imágenes, espaciadores, divisores, mapas, botones, formularios y muy importante: botones de "Leer más" ("Leer más pausa"). Si no introduces esos botones en las entradas del AstroBlog, tendrás páginas con seis entradas cada cual más kilométrica que la anterior. En otras palabras: NI SE TE OCURRA NO INTRODUCIR PAUSAS DE "LEER MÁS" EN LAS ENTRADAS DE BLOG LARGAS. Por cierto: si desde "Construir" te metes en distintas páginas ("AstroBlog", "Galería", "Conócenos"...) las opciones de construcción también serán distintas.
- Páginas. Sencillo. Son las páginas que aparecen en la barra horizontal de navegación bajo el título de la página: "Inicio", "Conócenos", "AstroBlog"... Puedes crear páginas y subpáginas de distinto tipo (te da opción el editor), y ocultarlas y que no aparezcan en la barra de navegación de cara al público. Esto es una página, pero no aparece de cara al público porque la he ocultado :)
- Plantilla. Esta pestaña es LA clave. Aquí es donde vas a personalizar toda la página web. Investiga "Cambio de plantilla" y "Cambiar fuentes" todo lo que quieras. Ese es un ámbito seguro, fácil de tocar y fácil de arreglar si algo sale mal. Pero es... extremadamente limitado. No puedes cambiar, por ejemplo, el texto de los botones de "Leer más" por "Sigue leyendo" y cosas así. Para cambiar eso tienes que pinchar en la opción de abajo del todo, "Editar HTML/CSS". Y eso es EL fregao'.
- Editar HTML/CSS. Esto LO IMPORTANTE y es el caos. Es el espacio en el que tienes acceso al código fuente de la página, o sea, a sus tripas, a los misterios de Eleusis, a los jeroglíficos de Keops, a la letra de los médicos. Sin embargo, es el único lugar en el que tienes auténticas opciones de personalización de la página web (CSS es un lenguaje de estilo: si quieres cambiar colores, formas, bordes, tipografías... es el sitio). Puedes hacer cosas como cambiar el color de los botones, añadir redes sociales que no están (mira el apartado 2 de estas instrucciones). He dejado unas INSTRUCCIONES.css en la sección de "ACTIVOS" del Editor de código para antarianas intrépidas.
- Editar HTML/CSS. Esto LO IMPORTANTE y es el caos. Es el espacio en el que tienes acceso al código fuente de la página, o sea, a sus tripas, a los misterios de Eleusis, a los jeroglíficos de Keops, a la letra de los médicos. Sin embargo, es el único lugar en el que tienes auténticas opciones de personalización de la página web (CSS es un lenguaje de estilo: si quieres cambiar colores, formas, bordes, tipografías... es el sitio). Puedes hacer cosas como cambiar el color de los botones, añadir redes sociales que no están (mira el apartado 2 de estas instrucciones). He dejado unas INSTRUCCIONES.css en la sección de "ACTIVOS" del Editor de código para antarianas intrépidas.
- Aplicaciones. En esta pestaña, encontrarás un almacén de widgets que puedes añadir a lo que hay en la pestaña "Construir"; aparecerán abajo del todo. Algunas son gratis, otras, de pago. Son útiles, aunque a mí me parecen algo feas y prefiero consturir las cosas en HTML. Sé que me odias por esto. Por eso las aplicaciones son útiles. Y, si no entiendes HTML, CSS o jQuery, no tienes más que borrar el código en <embed> y poner las aplicaciones equivalentes que ya están descargadas en Construir.
- Configuración. Pestaña sencilla en la que puedes modificar el nombre de la web, su dirección, el formato de fecha y hora... No descuides los ajustes de SEO (ni aquí, ni en las páginas, ni en las entradas del blog).
- Visualizador móvil. Te permite visualizar la web como se vería desde un móvil. Te da varias plantillas para cambiar esa visualización. Desgraciadamente, no te da muchas opciones... Y me temo que el Editor HTML/CSS tampoco es una solución. Es una cuestión de la plantilla de la web. Hay otras, como la de la web del Observatorio Astronómico de la UAM, que tienen una visualización móvil 10/10. No es el caso de nuestra plantilla. En fin. Es esto:
2. Sobre las categorías del blog
Para que quede más fancy, decidí prescindir de la aplicación "Categorías del blog" de la sección "Construir" para hacer "mi propio widget" de Categorías (que consiste en un cuadro de título y uno de texto, tampoco nos pongamos estupendas). El problema viene a la hora de añadir nuevas categorías, porque no aparecen inmediatamente. Para añadirlas, tendrás que escribir la nueva categoría a mano y enlazarla con la URL de la categoría (como enlazas cualquier otra página a un texto). ¿Cómo conseguir esa URL? Pues tendrás que añadir el widget de "Categorías del blog" desde "Construir" provisionalmente, publicar, refrescar la página, clicar en la nueva etiqueta, copiar el enlace, pegarlo cuando crees el hipervínculo en tu widget de Categorías personalizado y entonces eliminar el widget de Categorías de Weebly que habías añadido, publicar y refrescar. Parece complejo pero es trrrremendamente sencillo.
3. Sobre el widget de redes sociales
El widget de redes sociales original de Weebly es perfectamente funcional, pero es feo. Por ese motivo, el widget que tenemos actualmente es un <embed> construido artesanalmente con todo el amor y el cariño en HTML/CSS*. Puedes quitarlo en cualquier momento, y el widget original de Weebly será perfectamente funcional.
Cosas útiles. Páginas para descargar y copiar el código de iconos svg (gráficos vectoriales):
Cosas útiles. Páginas para descargar y copiar el código de iconos svg (gráficos vectoriales):
* El lenguaje HTML es un lenguaje de marcado, un lenguaje que sirve para construir sitios web. El navegador lo lee y muestra al cliente la aplicación que quieres de una forma... agradable. El lenguaje CSS es un lenguaje de estilo, o sea, con él diseñas el aspecto que quieres que tenga el elemento.
4. Sobre el botón "Volver arriba" (flecha ir arriba)
Hay una aplicación de Weebly (de la pestaña "Aplicaciones") perfectamente útil y funcional para esto, pero me gustaba más (¿o me daba morbo?) hacer una con HTML/CSS. Está en una caja <embed> (</>) al final de cada una de las páginas de la web (no es visible desde el Editor si no pasas el ratón por encima, pero es la última caja de toda la página).
5. Insertar código (<embed>, </>)
Esto es LA MAR de útil. (Y no porque yo sea una sádica que haga la web más complicada porque todo lo original de Weebly me parece feo.)
Con esto puedes insertar tweets, en "Astroblog", en "Contenidos"...
Desde "Construir", tienes que arrastrar el botón "Insertar código" (</>) al lugar donde quieras hacerlo. Entonces, haces clic para insertar un código en lenguaje HTML*. Puedes insertar ahí el código HTML que quieras; mi consejo es que busques el código de las aplicaciones que desees en Google y lo modifiques a tu antojo (puedes cambiar el color del fondo, de las letras, del borde, reducir su opacidad, hacer fade in...)
Consejo: pruébalo todo antes en https://www.w3schools.com/css/tryit.asp?filename=trycss_boxmodel (borra lo que ya hay en la caja de la izquierda). Si quieres códigos-base o un manual de HTML, CSS (y también PHP, Python y otros lenguajes de programación), explora www.w3schools.com/.
¿Qué códigos <embed> hay ya en la web?
Con esto puedes insertar tweets, en "Astroblog", en "Contenidos"...
Desde "Construir", tienes que arrastrar el botón "Insertar código" (</>) al lugar donde quieras hacerlo. Entonces, haces clic para insertar un código en lenguaje HTML*. Puedes insertar ahí el código HTML que quieras; mi consejo es que busques el código de las aplicaciones que desees en Google y lo modifiques a tu antojo (puedes cambiar el color del fondo, de las letras, del borde, reducir su opacidad, hacer fade in...)
Consejo: pruébalo todo antes en https://www.w3schools.com/css/tryit.asp?filename=trycss_boxmodel (borra lo que ya hay en la caja de la izquierda). Si quieres códigos-base o un manual de HTML, CSS (y también PHP, Python y otros lenguajes de programación), explora www.w3schools.com/.
¿Qué códigos <embed> hay ya en la web?
- Widget de redes sociales [TODAS LAS PÁGINAS]
- Carteles de "Próximas actividades" [INICIO]
- Cada una de las entradas de "Últimas entradas", y el botón de "Ver más" [INICIO]
- Flecha "Volver arriba" [TODAS LAS PÁGINAS]
- El pie de página [TODAS LAS PÁGINAS]
- Advertencia de visualización para navegadores móviles [ASTROBLOG, CONTENIDOS]
- Tweets insertados [ASTROBLOG, ENTRADAS DE BLOG, CONTENIDOS]
5.1. Ejemplo: insertar tweets
Para insertar tweets, inserta la URL (el enlace) de la página de Twitter que quieras enlazar (desde tweets hasta timelines) en https://publish.twitter.com/#. Ahí puedes personalizar la aplicación (anchura, altura, idioma, botones que aparecen...). Cuando lo tengas, copias el código que Twitter genera automáticamente y lo pegas en tu aplicación "Insertar código" en el constructor de la página de Weebly.
|
|
6. AÑADIR ENTRADAS AL WIDGET "ÚLTIMAS ENTRADAS"
ESTO ES IMPORTANTE.
No es que yo sea sádica, es que Weebly no tiene esta función y me pareció que era necesaria, ¿vale? Por eso está en HTML y es más complejo que si fuese una aplicación.
Te cuento cómo añadir una entrada a "ÚLTIMAS ENTRADAS" en la página de Inicio.
No es que yo sea sádica, es que Weebly no tiene esta función y me pareció que era necesaria, ¿vale? Por eso está en HTML y es más complejo que si fuese una aplicación.
Te cuento cómo añadir una entrada a "ÚLTIMAS ENTRADAS" en la página de Inicio.
Este es el código HTML que tienes que editar y pegar en un código insertado <embed> (</>)
VER CÓDIGO
<!DOCTYPE html>
<html>
<head>
<style>
div.post {
padding-top: 15px;
padding-left: 15px;
padding-right: 15px;
padding-bottom: 15px;
}
div.post-polaroid {
width: 270px; /* Anchura de la caja */
height: 390px; /* Altura de la caja */
background-color: #ffffff;
box-shadow: 1px 3px 6px 1px rgba(0, 0, 0, 0.2), 1px 5px 15px 1px rgba(0, 0, 0, 0.19);
margin-bottom: 25px;
border-radius: 0px 20px 0px 20px;
transition: transform .2s; /* Animation */
padding-bottom: 10px;
}
div.post-container {
text-align: center;
font-size: 20px;
font-weight: bold;
font: default;
}
div.post-title {
text-align: left;
font-size: 20px;
font-weight: bold;
font: default;
padding-top: 20px;
padding-right: 20px;
padding-left: 20px;
line-height: 1px;
}
div.post-polaroid:hover {
transform: scale(1.05); /* (150% zoom - Note: if the zoom is too large, it will go outside of the viewport) */
}
div.post-date {
text-align: right;
text-size: 7px;
color: red;
font: default;
padding-right: 20px;
padding-top: 10px;
padding-bottom: 10px;
}
div.post-description {
text-align: justify;
text-size: 20px;
font: default;
padding-right: 20px;
padding-left: 20px;
padding-top: 2px;
word-wrap: break-word;
line-height: 1.5em;
}
img.post {
object-fit: cover;
width: 270px; /* Anchura de la imagen */
height: 150px; /* Altura de la imagen */
display: block;
margin-left: auto;
margin-right: auto;
padding-top: 20px;
}
img.post:hover{
opacity: 0.8;
}
/* unvisited link */
a:link {
color: #a82e2e;
}
/* visited link */
a:visited {
color: #a82e2e;
}
/* mouse over link */
a:hover {
color: #d13a3a;
}
.zoom {
padding: 50px;
background-color: green;
width: 200px;
height: 200px;
margin: 0 auto;
}
.zoom:hover {
transform: scale(1); /* (150% zoom - Note: if the zoom is too large, it will go outside of the viewport) */
}
</style>
</head>
<body>
<div class="post" style="float:left;">
<div class="post-polaroid" style="height:390px">
<a href="AQUÍ INTRODUCE LA URL DE LA ENTRADA (el enlace)">
<div class="post-title">
<span style="text-align:left; line-height:1.4em">AQUÍ PON EL TÍTULO</span>
</div>
<div class="post-container">
<img class="post" src="AQUÍ INTRODUCE LA URL DE LA IMAGEN" alt="Esto es una descripción alternativa para la imagen (para quienes no puedan ver la imagen)">
</div>
<div class="post-date">
AQUÍ INTRODUCE LA FECHA, ejemplo:
4 de febrero de 2020
</div>
</a>
<div class="post-description">
AQUÍ PON UNAS LÍNEAS DEL TEXTO CON EL QUE EMPIEZA LA ENTRADA, ejemplo:
¡Saludos a todas, todos y todes! Desde Antares nos sumamos a la iniciativa del 11F (Día de la Mujer y la Niña en la Ciencia)...
NOTA: Si es demasiado largo, se saldrá de la caja. Ajústalo a ojo (lo siento).
</div>
</div>
</div>
</body>
</html>
<html>
<head>
<style>
div.post {
padding-top: 15px;
padding-left: 15px;
padding-right: 15px;
padding-bottom: 15px;
}
div.post-polaroid {
width: 270px; /* Anchura de la caja */
height: 390px; /* Altura de la caja */
background-color: #ffffff;
box-shadow: 1px 3px 6px 1px rgba(0, 0, 0, 0.2), 1px 5px 15px 1px rgba(0, 0, 0, 0.19);
margin-bottom: 25px;
border-radius: 0px 20px 0px 20px;
transition: transform .2s; /* Animation */
padding-bottom: 10px;
}
div.post-container {
text-align: center;
font-size: 20px;
font-weight: bold;
font: default;
}
div.post-title {
text-align: left;
font-size: 20px;
font-weight: bold;
font: default;
padding-top: 20px;
padding-right: 20px;
padding-left: 20px;
line-height: 1px;
}
div.post-polaroid:hover {
transform: scale(1.05); /* (150% zoom - Note: if the zoom is too large, it will go outside of the viewport) */
}
div.post-date {
text-align: right;
text-size: 7px;
color: red;
font: default;
padding-right: 20px;
padding-top: 10px;
padding-bottom: 10px;
}
div.post-description {
text-align: justify;
text-size: 20px;
font: default;
padding-right: 20px;
padding-left: 20px;
padding-top: 2px;
word-wrap: break-word;
line-height: 1.5em;
}
img.post {
object-fit: cover;
width: 270px; /* Anchura de la imagen */
height: 150px; /* Altura de la imagen */
display: block;
margin-left: auto;
margin-right: auto;
padding-top: 20px;
}
img.post:hover{
opacity: 0.8;
}
/* unvisited link */
a:link {
color: #a82e2e;
}
/* visited link */
a:visited {
color: #a82e2e;
}
/* mouse over link */
a:hover {
color: #d13a3a;
}
.zoom {
padding: 50px;
background-color: green;
width: 200px;
height: 200px;
margin: 0 auto;
}
.zoom:hover {
transform: scale(1); /* (150% zoom - Note: if the zoom is too large, it will go outside of the viewport) */
}
</style>
</head>
<body>
<div class="post" style="float:left;">
<div class="post-polaroid" style="height:390px">
<a href="AQUÍ INTRODUCE LA URL DE LA ENTRADA (el enlace)">
<div class="post-title">
<span style="text-align:left; line-height:1.4em">AQUÍ PON EL TÍTULO</span>
</div>
<div class="post-container">
<img class="post" src="AQUÍ INTRODUCE LA URL DE LA IMAGEN" alt="Esto es una descripción alternativa para la imagen (para quienes no puedan ver la imagen)">
</div>
<div class="post-date">
AQUÍ INTRODUCE LA FECHA, ejemplo:
4 de febrero de 2020
</div>
</a>
<div class="post-description">
AQUÍ PON UNAS LÍNEAS DEL TEXTO CON EL QUE EMPIEZA LA ENTRADA, ejemplo:
¡Saludos a todas, todos y todes! Desde Antares nos sumamos a la iniciativa del 11F (Día de la Mujer y la Niña en la Ciencia)...
NOTA: Si es demasiado largo, se saldrá de la caja. Ajústalo a ojo (lo siento).
</div>
</div>
</div>
</body>
</html>
Lo que tienes que modificar, es, sobre todo, lo que está en azul al final. Lo que está en naranja es el código CSS. Si la caja se te quedase pequeña, modifica la anchura de la caja y la altura de la caja, al principio del código (aparece indicado como "/* Anchura de la caja */").
CÓMO SACAR LA URL DE LA IMAGEN:
Cuando subas una imagen a la entrada, clica en la imagen para que te salgan las opciones, y le das a Enlazar > Archivo. Entonces, subes el archivo desde tu ordenador. De esta manera, los visitantes podrán ver la imagen en grande al clicar sobre ella.
Si la entrada no contiene imágenes, o si no contiene la imagen que quieres que te aparezca, entra en la página auxiliar que he habilitado (http://agrupacionantares.weebly.com/pezevolutivo-auxiliar.html) y súbela ahí. Esa página no es visible a menos que tengas la URL... y, como ves, eso ya contiene lore interno de Antares.
CÓMO SACAR LA URL DE LA IMAGEN:
Cuando subas una imagen a la entrada, clica en la imagen para que te salgan las opciones, y le das a Enlazar > Archivo. Entonces, subes el archivo desde tu ordenador. De esta manera, los visitantes podrán ver la imagen en grande al clicar sobre ella.
Si la entrada no contiene imágenes, o si no contiene la imagen que quieres que te aparezca, entra en la página auxiliar que he habilitado (http://agrupacionantares.weebly.com/pezevolutivo-auxiliar.html) y súbela ahí. Esa página no es visible a menos que tengas la URL... y, como ves, eso ya contiene lore interno de Antares.
5.2. Sobre cuántas veces hace falta repetir el código CSS
Esta explicación es un poco más compleja si no conoces HTML/CSS, pero ahí va.
VER EXPLICACIÓN
Los códigos <embed> suelen tener una estructura tal que así:
VER CÓDIGO
<!DOCTYPE html>
<html>
<head>
</head>
<body>
</body>
</html>
<html>
<head>
</head>
<body>
</body>
</html>
Cada uno de esos elementos se llama "etiqueta". Hay una etiqueta de apertura (como "<head>", sin "/") y una de cierre ("</head>"). Como ves, unas están contenidas en otras, y la etiqueta <html> lo abarca todo (quiero decir...).
El código CSS se mete en el encabezado, entre las etiquetas <head><style> ... </style></head>.
Todo código de programación (tipo jQuery, JavaScript...) se mete en <body><script> ... </script></body>.
Pero a nosotras, de momento, nos interesa el CSS.
Por cada elemento, hay un código HTML específico, con un CSS que le da su aspecto. Por ejemplo, una caja de "Últimas entradas":
El código CSS se mete en el encabezado, entre las etiquetas <head><style> ... </style></head>.
Todo código de programación (tipo jQuery, JavaScript...) se mete en <body><script> ... </script></body>.
Pero a nosotras, de momento, nos interesa el CSS.
Por cada elemento, hay un código HTML específico, con un CSS que le da su aspecto. Por ejemplo, una caja de "Últimas entradas":
vER CÓDIGO
<!DOCTYPE html>
<html>
<head>
<style>
div.post {
padding-top: 15px;
padding-left: 15px;
padding-right: 15px;
padding-bottom: 15px;
}
div.post-polaroid {
width: 270px;
height: 390px;
background-color: #ffffff;
box-shadow: 1px 3px 6px 1px rgba(0, 0, 0, 0.2), 1px 5px 15px 1px rgba(0, 0, 0, 0.19);
margin-bottom: 25px;
border-radius: 0px 20px 0px 20px;
transition: transform .2s; /* Animation */
padding-bottom: 10px;
}
div.post-container {
text-align: center;
font-size: 20px;
font-weight: bold;
font: default;
}
div.post-title {
text-align: left;
font-size: 20px;
font-weight: bold;
font: default;
padding-top: 20px;
padding-right: 20px;
padding-left: 20px;
line-height: 1px;
}
div.post-polaroid:hover {
transform: scale(1.05); /* (150% zoom - Note: if the zoom is too large, it will go outside of the viewport) */
}
div.post-date {
text-align: right;
text-size: 7px;
color: red;
font: default;
padding-right: 20px;
padding-top: 10px;
padding-bottom: 10px;
}
div.post-description {
text-align: justify;
text-size: 20px;
font: default;
padding-right: 20px;
padding-left: 20px;
padding-top: 2px;
word-wrap: break-word;
line-height: 1.5em;
}
img.post {
object-fit: cover;
width: 270px;
height: 150px;
display: block;
margin-left: auto;
margin-right: auto;
padding-top: 20px;
}
img.post:hover{
opacity: 0.8;
}
/* unvisited link */
a:link {
color: #a82e2e;
}
/* visited link */
a:visited {
color: #a82e2e;
}
/* mouse over link */
a:hover {
color: #d13a3a;
}
.zoom {
padding: 50px;
background-color: green;
width: 200px;
height: 200px;
margin: 0 auto;
}
.zoom:hover {
transform: scale(1); /* (150% zoom - Note: if the zoom is too large, it will go outside of the viewport) */
}
</style>
</head>
<body>
<div class="post" style="float:left;">
<div class="post-polaroid" style="height:390px">
<a href="http://agrupacionantares.weebly.com/astroblog/el-universo-es-violeta-2-edicion">
<div class="post-title">
<span style="text-align:left; line-height:1.4em">El universo es violeta (2ª edición)</span>
</div>
<div class="post-container">
<img class="post" src="http://agrupacionantares.weebly.com/uploads/3/7/6/6/37660899/cartel_universo_violeta_2.png" alt="El universo es violeta (2ª edición)">
</div>
<div class="post-date">
4 de febrero de 2020
</div>
</a>
<div class="post-description">
¡Saludos a todas, todos y todes! Desde Antares nos sumamos a la iniciativa del 11F (Día de la Mujer y la Niña en la Ciencia)...
</div>
</div>
</div>
</body>
</html>
<html>
<head>
<style>
div.post {
padding-top: 15px;
padding-left: 15px;
padding-right: 15px;
padding-bottom: 15px;
}
div.post-polaroid {
width: 270px;
height: 390px;
background-color: #ffffff;
box-shadow: 1px 3px 6px 1px rgba(0, 0, 0, 0.2), 1px 5px 15px 1px rgba(0, 0, 0, 0.19);
margin-bottom: 25px;
border-radius: 0px 20px 0px 20px;
transition: transform .2s; /* Animation */
padding-bottom: 10px;
}
div.post-container {
text-align: center;
font-size: 20px;
font-weight: bold;
font: default;
}
div.post-title {
text-align: left;
font-size: 20px;
font-weight: bold;
font: default;
padding-top: 20px;
padding-right: 20px;
padding-left: 20px;
line-height: 1px;
}
div.post-polaroid:hover {
transform: scale(1.05); /* (150% zoom - Note: if the zoom is too large, it will go outside of the viewport) */
}
div.post-date {
text-align: right;
text-size: 7px;
color: red;
font: default;
padding-right: 20px;
padding-top: 10px;
padding-bottom: 10px;
}
div.post-description {
text-align: justify;
text-size: 20px;
font: default;
padding-right: 20px;
padding-left: 20px;
padding-top: 2px;
word-wrap: break-word;
line-height: 1.5em;
}
img.post {
object-fit: cover;
width: 270px;
height: 150px;
display: block;
margin-left: auto;
margin-right: auto;
padding-top: 20px;
}
img.post:hover{
opacity: 0.8;
}
/* unvisited link */
a:link {
color: #a82e2e;
}
/* visited link */
a:visited {
color: #a82e2e;
}
/* mouse over link */
a:hover {
color: #d13a3a;
}
.zoom {
padding: 50px;
background-color: green;
width: 200px;
height: 200px;
margin: 0 auto;
}
.zoom:hover {
transform: scale(1); /* (150% zoom - Note: if the zoom is too large, it will go outside of the viewport) */
}
</style>
</head>
<body>
<div class="post" style="float:left;">
<div class="post-polaroid" style="height:390px">
<a href="http://agrupacionantares.weebly.com/astroblog/el-universo-es-violeta-2-edicion">
<div class="post-title">
<span style="text-align:left; line-height:1.4em">El universo es violeta (2ª edición)</span>
</div>
<div class="post-container">
<img class="post" src="http://agrupacionantares.weebly.com/uploads/3/7/6/6/37660899/cartel_universo_violeta_2.png" alt="El universo es violeta (2ª edición)">
</div>
<div class="post-date">
4 de febrero de 2020
</div>
</a>
<div class="post-description">
¡Saludos a todas, todos y todes! Desde Antares nos sumamos a la iniciativa del 11F (Día de la Mujer y la Niña en la Ciencia)...
</div>
</div>
</div>
</body>
</html>
La parte entre <head><style> ... </style></head> es lenguaje CSS. El resto, es HTML.
|
Lo que se ve es esto:
|
|
div es la etiqueta general de HTML. Observa que cada "párrafo" de CSS empieza con un "comando" para el HTML, como es div. Después, todo lo que vaya entre las etiquetas <div></div> tendrá el aspecto que le indicas con CSS en div { ... }.
Pero fíjate que nunca hay un div solo, siempre es div.post, div.post-polaroid, div.post-title... Lo que está en verde es la clase de div, es un nombre que le pones tú a cada sección del código para luego indicarle al HTML adónde se tiene que ir a leer el CSS para cada elemento. Así,
Pero fíjate que nunca hay un div solo, siempre es div.post, div.post-polaroid, div.post-title... Lo que está en verde es la clase de div, es un nombre que le pones tú a cada sección del código para luego indicarle al HTML adónde se tiene que ir a leer el CSS para cada elemento. Así,
lo que esté entre
<div class="post-title"> ... </div>
tendrá este aspecto:
div.post-title {
text-align: left;
font-size: 20px;
font-weight: bold;
font: default;
padding-top: 20px;
padding-right: 20px;
padding-left: 20px;
line-height: 1px;
}
text-align: left;
font-size: 20px;
font-weight: bold;
font: default;
padding-top: 20px;
padding-right: 20px;
padding-left: 20px;
line-height: 1px;
}
Hay otra manera de insertar CSS en HTML, bastante sencilla, que es la siguiente:
En vez de escribir el CSS en <head><style> ... </style><head>, lo escribes dentro de <div style=" ... "> Texto que va a tener ese estilo </div> (donde los puntos suspensivos como si fuera CSS). Por ejemplo,
En vez de escribir el CSS en <head><style> ... </style><head>, lo escribes dentro de <div style=" ... "> Texto que va a tener ese estilo </div> (donde los puntos suspensivos como si fuera CSS). Por ejemplo,
<!DOCTYPE html>
<html><head></head>
<body>
<div style=" text-align: left; font-size: 20px; font-weight: bold; font: default; padding-top: 20px; padding-right: 20px; padding-left: 20px; line-height: 1px;"> holahola caracola </div>
</body>
</html>
<html><head></head>
<body>
<div style=" text-align: left; font-size: 20px; font-weight: bold; font: default; padding-top: 20px; padding-right: 20px; padding-left: 20px; line-height: 1px;"> holahola caracola </div>
</body>
</html>
Que tendría este aspecto:
holahola caracola
Bueno, todo esto para decir que
- Si pones el CSS en el encabezado, entre <head><style> ... </style></head>, SOLO LO TIENES QUE PONER UNA VEZ EN CADA PÁGINA, Y NO UNA VEZ EN CADA ELEMENTO (aunque no pasa nada si lo haces). Por eso, ES IMPORTANTE QUE CADA CLASE (CLASS) TENGA UN NOMBRE ÚNICO.
- Si pones el CSS incrustado en el cuerpo, entre <body> ... <body> (lo último que he puesto), TIENES QUE PONER EL CSS CADA VEZ QUE PONGAS EL ELEMENTO, en style=" ... ".
El resumen es que solo hay que poner una vez el código CSS de cada elemento siempre que lo pongas entre <head><style> y </head><style>, de manera que podrías saltarte todo lo que hay dentro de <style> ... </style> en la segunda y la tercera entrada si lo pones en la primera.
5. Y ya estaría
Sí. Solo necesitas saber eso. Lo básico. Ea, muchas tardes y buenas suertes.
|
Madrid
25 de diciembre de 2019 fun, fun, fun. Última edición: 17 de marzo de 2020. |
