Markdown: HTML para lacazáns?

Temos no noso repositorio en GitHub un ficheiro que se chama README.md que imos poñer ó noso gusto. Cómpre escribilo en Markdown que é unha especie de HTML rápido e sinxelo.

O teu traballo:

  1. Edita  o ficheiro README.md do teu repositorio. Aprende a sintaxe de Markdown aquí, da páxina do inventor, ou nesta outra. Emprega todos os elementos que desexes para que quede interesante a páxina de presentación do teu repositorio. Mostra unha captura
  2. Vai á lapela Wiki do repositorio (ver debuxo) e explica os teus cambios no proxecto das tarxetas. Engade dúas ligazóns no teu caderno: unha para ver o teu README.md e otra que nos leve directamente ó teu wiki.
  3. Como activamos a posibilidade de usar Markdown nos nosos wordpress.com?
  4. Existen editores de Markdown online que convirten o ficheiro.md nun ficheiro.html. Proba por exemplo este. Mostar o teu traballo. Nalgúns casos podes exportar a .pdf

Atopado por aí…

Imos traballar doutro xeito. Buscando por internet plantillas de CSS podemos atopar cousas moi chulas para modificar ó noso gusto.

O teu traballo:

  • Mira no repositorio en GitHub para ler a idea deste exercicio.
  • Descargade  ou clonade a carpeta e probade a ver o .html nun navegador.
  • Cambiade o texto para personalizalo un pouco.
  • Cambia cores e aliñacións no CSS.
  • Modifica os iconos.
  • Trata de modificar propiedades máis avanzada.
  • Conta no teu blog algunha descoberta que fixeras e pon a ligazón nun comentario para que o vexamos todos.
  • Pon a ligazón á túa web recén subida

HTML con semántica

Pescuda por internet sobre o que din que é o futuro das páxinas web: a web semántica. Que é o que ofrece HTML para traballar nela?

O teu traballo:

    • Busca unha explicacionciña do que é a web semántica. Fai unha lista das novas etiquetas de HTML5 e a súa utilidade
    • Mira neste repositorio en GitHub para ler a idea deste exercicio.
    • Descargade  ou clonade a carpeta e probade a ver o .html nun navegador.
    • Cambiade o texto para personalizalo un pouco.
    • Cambia cores e aliñacións no CSS.
    • Modifica os iconos.
    • Trata de modificar propiedades máis avanzadas.
    • Súbeo ó teu github.io
    • Pon a ligazón ó teu traballo recén subido na portada.

Colocando as imaxes

Imos colocar as imaxes nos nosos .html cun pouco máis de estilo.

O teu traballo:

  1. Fai unha nova carpeta e unha imaxe que se chame logo.png (ou non)
  2. Fabrica un .css coas seguintes clases:

.flotar { float: left; }
.colocar { clear: both; }

3. Copia o seguinte anaco de HTML e engade todo o que falta para que sexa unha páxina web enlazada a ese .css.

4. Move os párrafos e a imaxe. Cambia os valores de float e clear. Que acontece? Toma nota de todo.

5. Descarga outra foto e emprega a etiqueta <figcaption> para poñerlle un pe de foto. Modifica o necesario para que a letra do pe de foto sexa verde.

6. Fai un pequeno xornal con párrafos a un lado e texto a outro. Publícao no teu github.io. (Pode ser unha das páxinas do proxecto turístico). Engade a ligazón.

Encaixonados en CSS

Imos aclarar algo co que xa traballamos: border, padding, margin. Os espacios que podemos ir amoldando para facer mellores sitios web. Chámase o Box Model e na imaxe tratamos de aclarar como vai.

O teu traballo:

Consultando esta web  contesta estas preguntiñas:

  1. Que é a área de recheo? Como se di  en inglés “recheo”?
  2. Cales son as propiedades que determinan o espesor do recheo?
  3. A propiedade border de que é abreviatura?
  4. Se quero un marxe superior moi grande que debo usar?
  5.  Insire (con GitHubGist) unha clase en .css que uses con <div> nun .html. Mostra a captura de pantalla do teu navegador. Indica a ligazón a ese código.