15 de febrero de 2021

Hacemos una tabla y la decoramos con CSS

 Vamos a hacer una tabla con HTML ya que no hay otra forma de hacerlo con Blogger.

Se debe incluir una tabla en al menos una de las entradas.

Por ejemplo, los diez primeros números en cuatro idiomas.

tenemos que usar tres etiquetas <table> para la tabla <tr> para fila y <td> para la celda. En el siguiente artículo podéis ver cómo se hace la tabla: ENLACE.


español inglés alemán ruso
cero zero null нуль
uno one eins один
dos two zwei две
tres three drei три
cuatro four vier четыре
cinco five fünf пять
seis six sechs шесть
siete seven sieben семь
ocho eight acht восемь
nueve nine neun девять

A la tabla anterior le hemos puesto en style:

  • a la etiqueta table:
    • border-collapse:collapse;
    • width:80%;
    • margin-left:20px;
    • text-align:center;
  • a las casillas de la tabla td:
    • border: 2px solid orange;
  • a las casillas de la primera fila de la tabla td:
    • border: 2px solid orange;
    • background-color: lightblue; border: 2px solid orange; width: 25%;
    • width: 25%;

Otro ejemplo de tabla:

pera melocotón naranja cereza plátano
piña albaricoque limón fresa
mango
uva
dátil pomelo mora aguacate

Esto es todo por hoy

8 de febrero de 2021

Primeros ejemplos de CSS

Ya hemos aprendido algo de HTML. 

Ahora veamos algo de CSS. El CSS me permite definir el aspecto de los elementos HTML. En este mismo blog mirad esta entrada: ENLACE.

En este enlace puedes consultar los nombres y códigos de colores: ENLACE.




he puesto la etiqueta anterior para poder probar CSS. Este párrafo debería tener un color de fondo y un borde.
Dentro de la etiqueta <p> he añadido el código CSS y ha quedado así: <p style="background-color: lightblue; border: 5px solid green;">
El codigo que he usado para el separador que hay encima del párrafo he escrito: <hr style="border: 3px solid olive; width: 60%;" />

1 de febrero de 2021

Primeros pasos en HTML


En la entrada hablo sobre el tema elegido. En mi caso hablamos de HTML.

Para confeccionar páginas web se utilizan dos lenguajes, HTML y CSS. HTML es un lenguaje de marcas en el que vamos indicando qué es cada elemento, por ejemplo un encabezado, un párrafo, una lista, negrita, cursiva, tablas, imágenes, enlaces, etc. CSS se usa para decidir el aspecto de los distintos elementos.

En Blogger no tenemos que preocuparnos demasiado ya que el editor va añadiendo automáticamente las etiquetas HTML a nuestros textos.

Hay veces que lo que nos ofrece Blogger no es suficiente, por lo que es bueno saber algo sobre HTML, por ejemplo, lo necesitaremos si queremos hacer una tabla, si quiero insertar un separador horizontal, insertar un vídeo que no sea de YouTube, etc.

Normalmente las etiquetas HTML se escriben por pares que indican el inicio y el fin de algo, por ejemplo <p> es la etiqueta que indica el comienzo de un párrafo y </p> indica el fin de párrafo. Si queremos poner en negrita unas palabras, ponemos la etiqueta <b> al comiento y </b> al final. 

Algunas etiquetas no tienen inicio y fin, por ejemplo <br> (salto de línea) o <img> (imagen).

Para ver el código HTML de vuestra entrada pulsad sobre el primer icono del editor para alternar entre la 'vista de redacción' y la 'vista en HTML'.  Blogger "apelotona" todo el código, de forma que es algo farragoso seguirlo.

Haced la entrada de la semana y al final de la misma anotad las etiquetas que se han utilizado. La entrada debe incluir una lista doble


Provincias de Andalucía y ciudades más importantes:

  • Almería
  • Cádiz
    • Cádiz.
    • Algeciras.
    • Puerto Real.
    • Puerto de Santa María.
  • Córdoba.
    • Córdoba
    • Lucena
    • Montilla
  • Granada.
    • Granada.
    • Motril.
    • Guadix.
    • Baza.
  • Huelva.
  • Jaén.
  • Málaga.
    • Málaga.
    • Ronda.
    • Marballa.
    • Fuengirola.
  • Sevilla.
    • Sevillla.
    • Écija.
    • Dos Hermanas.
    • Alcalá de Guadaira.


al final de la entrada digo qué etiquetas html hemos usado:

HTML usado en esta entrada:

  • <b> para negrita.
  • <u> para subrayado.
  • <h3> para subtítulos.
  • <p> párrafo.
  • <ul> una lista sin números.
  • <li> cada elemento de una lista.
  • <img> para fotos.
  • <a> para enlaces.
  • <br> para saltos de línea.