29 de enero de 2019

CSS, primeros pasos

CSS es un lenguaje que permite definir el aspecto de una página web. Se usa conjuntamente con HTML, de modo que se consigue separar el contenido del aspecto. Con CSS indicamos cómo se deben mostrar los distintos elementos.
CSS tiene una sintaxis muy simple:
 
selector {propiedad:valor; propiedad:valor; ...}

  El selector indica a qué etiqueta HTML van a aplicarse las declaraciones (propiedad:valor;).
Ejemplo:
   p {
     color:brown;
     font-size:12px;
   }
   h2 {
     font-size:120%;
     background-color:lightblue;
     color:darkgray;
     border:2px solid black;
   }
   hr {
      
   } 

El CSS se puede incluir de tres formas distintas:
  • En un archivo css independiente.
  • En la cabecera de un documento HTML.
  • En la misma etiqueta HTML usando el atributo style.

Blogger no nos da acceso a la cabecera del documento y la hoja de estilos externa se controla con los temas, ya hemos visto como personalizarlos. En la opción avanzada de personalización del tema se puede añadir CSS, pero es una opción que no veremos a no ser que a alguien le haga falta.

Ejemplos

En el encabezado anterior hemos añadido el siguiente código:
style="border: 2px solid blue; color: green; text-align: center;"
quedando:
<h2 style="border: 2px solid blue; color: green; text-align: center;">
  • border, borde
  • color, color del texto
  • text-align, alineación del texto 

Subencabezado

En el encabezado anterior hemos añadido el siguiente código:
<h3 style="background-color: lightgrey; border: 1px solid brown; color: brown; text-align: left;">
  • background-color, color de fondo
Por último ejemplos de separadores:


sin estilo

style="border: 1px solid purple; width: 90%;"

style="border: 3px dotted green; width: 25%;"





21 de enero de 2019

HTML, toma de contacto y primer ejercicio

Primer día que hablamos de HTML

Vemos la estructura de una página. Vemos que HTML es un lenguaje de marcas que se utiliza para crear páginas y sitios web.
El lenguaje HTML utiliza etiquetas que por lo general van en pares, una de inicio y otra de cierre. Cada etiqueta puede tener un conjunto de atributos, propiedades.
En el siguiente recuadro podemos ver la estructura básica de un documento HTML:
Aquí vemos el código HTML de una página básica:
<!DOCTYPE html>
<html lang="es">
<head>
  <meta charset="UTF-8"> 
  <title>primera prueba</title>
</head>

<body>

  <h1>Segunda evaluación</h1>
  <p>En esta evaluación aprenderemos
   a
   hacer
   <b>páginas web</b> usando      HTML5 y    CSS3.</p>
   <h1> Título nivel 1 </h1>
   <h2> Título nivel 2 </h2>
   <h3> Título nivel 3 </h3>
   <p> La memoria de núcleos magnéticos o memoria de 
   toros, fue una forma de memoria 
   principal de los computadores, 
   hasta comienzos de 1970.<br> 
   La función de esta memoria era similar a la que
    realiza la memoria <b>RAM</b> en
    la actualidad: es el espacio de trabajo, para la CPU,
   </p>
</body>
</html> 

Etiquetas más comunes

  • <h1>...</h1>, ..., <h6>...</h6> son encabezados, para los títulos.
  • <p>...</p> párrafo. 
  • <a ...>... </a> enlaces
  • <img ...> para insertar una imagen, no tiene etiqueta de cierre.
  • <br> salto de línea, no tiene etiqueta de cierre
Blogger permite crear las entradas del blog sin tener conocimientos de HTML pero es bueno aprender un poco para poder hacer cosas que no se pueden hacer directamente.
Para modificar el cógigo html de una entrada debemos pulsar el botón 'HTML' y para volver a la vista normal del editor pulsamos el botón 'Redactar'.
Hoy vamos a ver dos ejemplos de cosas que no se pueden hacer directamente:

Un separador


Un separador (<hr>). La etiqueta <hr> no tiene etiqueta final y se puede escribir de dos formas: <hr> o <hr />.

Lo que viene a continuación es un separador:


Ejemplo de lista

Blogger me permite crear listas, pero no listas dentro de listas, por eso es bueno saber algo de HTML:

Estaciones del año:

  • Primavera.
  • Verano.
  • Otoño.
  • Invierno.
Ahora veremos un ejemplo en el que nos haría falta crear listas con varios niveles:

Provincias por comunidad autónoma:

  • Extremadura
    • Cáceres
    • Badajoz
  • Aragón
    • Huesca
    • Teruel
    • Zaragoza
  • Cataluña
    • Barcelona
    • Girona
    • Lleida
    • Tarragona
Aquí vemos el código para poder crear una lista de listas como la anterior:
<ul>
  <li>Extremadura</li>
 <ul>
   <li>Cáceres</li>
   <li>Badajoz</li>
 </ul>
  <li>Aragón</li>
 <ul>
   <li>Huesca</li>
   <li>Teruel</li>
   <li>Zaragoza</li>
 </ul>
  <li>Cataluña</li>
 <ul>
   <li>Barcelona</li>
   <li>Girona</li>
   <li>Lleida</li>
   <li>Tarragona</li>
 </ul>

</ul>