Bloques en HTML e CSS

Cando queremos definir unha parte da páxina web en bloques temos que usar <div> ou <span>.

O teu traballo:

  • Busca información aquí de como usalas en html e como definir as súas propiedades en css usando padding

  • Investiga  a diferencia entre <div> e <span>.Pon uns exempliños de código e a captura de pantalla correspondente para ver como queda.

Clases en HTML5 e en CSS

Como facemos se queremos que algún parágrafo estea en verde e outros enrosa? Crearemos clase: un estilo propio en CSS e despois chamalo co atributo class=  en HTML. Hai varios xeitos de crealo en CSS: con *, con # e cun puntiño.

O teu traballo:

  • Cando se emprega * para definir unha clase? e cando #?
  • Pon un exemplo de clase definida nun CSS e como usas a etiqueta correspondente en HTML
  • Consultando esta páxina web  resposta a:
    1. Cal é a propiedade para poñer todo en maiúsculas?
    2. Como se cambia de cor unha ligazón xa visitada?
    3. Como quito o subliñado dunha ligazón?
    4. Como poño de cores unha ringleira dunha táboa?
    5. Como fago opaca unha imaxe?
Para aprender máis

Publicar en GitHub

Imos subir os nosos sitios web a GitHub. É unha rede social para desenvolvedores de software e úsase  para otras moitas cousas pero nós imos comezar dominando os commit e fork e conceptos sinxelos.

O teu traballo:

  1. Crea unha conta en GitHub e pon unha ligazón dos teus repositorios no teu caderno electrónico.
  2. O teu primeiro repositorio ten que chamarse atúaconta.github.io
  3. Acepta a creación dun README.md
  4. Navega ata atúaconta.github.io
  5. Sube os ficheiros que fixemos.
  6. Engade as URL seguintes: a do teu sitio web e a do teu GitHub.
  7. Navega ata o proxecto dun compañeiro e fai fork do seu repositorio.

Formulario de benvida en html

Clic para ampliar

Non van ser moi útiles se non sabemos PHP pero imos indo.

O teu traballo:

  1. Consultando aquí e tamén en w3schools trata de facer un formulario coma o da imaxe.
  2. Engade algún outro elemento que non apareza na imaxe e do que fale w3schools
  3. Engade un .css para que teña:
      1. o título nun tono de verde
      2. unha marxe esquerda de 2cm
      3. botóns de cores distintas con borde amarelo redondeado
  4. Consultando por aquí trata de que o formulario envíe os datos introducidos polo usuario ó teu correo electrónico. Mostra captura do navegador e do teu correo electrónico. (voluntario)

 

CSS follas de estilo

Xa temos o contido das nosas páxinas web usando HTML. Agora queremos  poñelas chulas e mellorar o seu estilazo: cores, marxes, ..

É o momento de aprender CSS. Imos meter nun ficheiro na nosa carpeta web onde describamos a pinta que vai ter o que vai en cada etiqueta de HTML. Hai tres xeitos de facelo. Nós imos aprender o máis complexo 😉

O teu traballo:

  • Mete nunha carpeta o ficheiro do outro día ó que chamamos portada.html
  • Descarga este ficheiro na mesma carpeta do paso anterior
  • Engade na cabeceira de portada.html  o elemento:
<link  rel=stylesheet  href=oteuficheiro.css>

e actualiza a páxina no navegador.

Un ficheiro algo máis complexo aquí.:

Seguimos coas páxinas oficiais   para ir de vagar. Fai unha lista de propiedades de CSS que podes engadir na túa folla de estilos. Complétaa con algúns dos valores desas propiedades que te parezan máis interesantes.Hai miles!!

Sublime Text

Existen moitos editores nos que traballar. A min persoalmente gústame Atom pero moitos profesionais aconséllanme que aprendamos  Sublime Text. Imos aló.

Referencias:

O teu traballo:

  1. Instala Sublime Text
  2. Deberíamos aprender todo esto.
  3. Instala o xestor de paquetes Package Control copiando e pegando o código dado
  4. Seguindo este vídeo demostra que instalaches:
    1. SidebarEnhancements
    2. AutoFileName
    3. ColorHighlighter
    4. BracketHighlighter
    5. Emmet
  5. Cotillea nas miñas anotacións o que vou atopando interesante.