L’HTML (sigles de Hyper Text Markup Language) s’estructura a través d’etiquetes i permet afegir contingut. Per la seva banda CSS (Cascade Style Sheet) és el responsable de l’aparença o estil d’aquest contingut.
Si es treballa a través de Visual Studio, és molt útil instal·lar prèviament les extensions:
- HTML End Tag Labels, que genera automàticament l’etiqueta de tancament quan escrius la primera.
- Auto Rename Tag, que canvia automàticament l’etiqueta de tancament si canvies la d’obertura.
- Image preview
- Live server (de RitwickDey), que permet previsualitzar el què estem fent a través del botó “Go live”.
Per utilitzar més àgilment aquesta última extensió, es recomanabñe activar “Autosafe” per evitar haver d’anar guardant cada cop que volem previsualitzar.
Visual Studio crea automàticament l’estructura de codi de la pàgina html si un cop creat el fitxer .html es va a la primera línia, s’escriu ! i a continuació es fa return. El codi generat és el següent:
Per la seva banda CSS permet donar format o estil a tota la pàgina, una determinada secció, una classe o una identitat:
En aquesta secció s’han porposat diverses activitats, a continuació es mostra la primera, en la què es creen llistes i taules amb HTML, a la dreta es mostra la previsualització del codi que permet l’extensió “Live Server” comentada anteriorment:
En una segona activitat s’ha creat un formulari, del qual es pot veure el codi i la previsualització en la captura següent:
I finalment, una última activitat amb 3 seccions diferents (per tal de poder-hi donar estils més fàcilment des del fitxer .CSS) que mostra una imatge, un vídeo i un àudio prèviament descarregats (i guardats a la mateixa carpeta que l’arxiu .html tal i com es mostra a l’explorador de la part esquerra:
