Repàs HTML i CSS

​Llenguatge de marques d'hipertext

• Es combina amb CSS i JS (entre d'altres) per tal de crear pàgines WEB

• Són fitxers que els navegadors saben interpretar

• Està composat per ETIQUETES (o tags) i aquestes poden tenir ATRIBUTS

DAW M04 Llenguatges de marques

UF 1

Tags

• Les etiquetes (o tags) són les marques que s'utilitzen per senyalar el principi i el final d'un element. Estan limitades a les que ofereix HTML5.

• Algunes poden NO tancar-se

• Es recomana posar els tags en minúscules

• Les etiquetes que tenen contingut s'HAN DE TANCAR

UF 1

DAW M04 Llenguatges de marques

Formularis

• S'indiquen amb el tag <form> i té dos atributs principals:

  • action="url_tracta_dades" url que tractarà les dades i a on s'enviarà ens camps omplerts per l'usuari quan faci el "submit"

  • method="GET"/"POST" ... On s'especifica quin mètode HTTP s'utilitza per enviar les dades al action

UF 1

DAW M04 Llenguatges de marques

Tipus d'inputs principals

• <input>

• <label>

• <select>

• <textarea>

• <button>

• <fieldset>

UF 1

DAW M04 Llenguatges de marques

• <legend>

• <datalist>

• <output>

• <option>

• <optgroup>

​Llenguatge de marques orientat a disseny

DAW M04 Llenguatges de marques

UF 1

UF 1

Estils CSS

• Inline CSS: atribut style dins del propi element (NO recomanat per HTML5).

• Internal CSS: s'escriu el CSS dins del tag "style" del <head>

• External CSS: Es referencia el css en el head a un fitxer extern. [RECOMANAT]

UF 1

DAW M04 Llenguatges de marques

Selectors:

• D'element: p { color: red; } afecta a tots els <p>

• D'identificador: #id1 {color:red; } afecta només a l'element amb id=id1

• De classe: .exempleClasse { color: red; } afecta als que tinguin la classe.

UF 1

DAW M04 Llenguatges de marques

• Agrupació de selectors: h1, h2, p { color: red; } afecta a tots

• Herència d'estils h1, h2, p {color: red; } p{background-color: blue} p tindrà color red i background color, perquè ho hereda (en cascada).

• Combinacions:

  • Al mateix nivell: p.classe1 { } Només aplica als p de classe classe1.

  • Descendents: div p {} només aplica als p que siguin descendents de div.

  • Fills: div > p {} afecta només als p de dins de div (de forma directa)

  • Germans propers: div + p {} només als que s'estan tocant.

  • Germans div ~ p {} només als que estan al mateix nivell.

UF 1

DAW M04 Llenguatges de marques

Maquetació per capes

• Fixed: No es mou respecte a la finestra

• Relative: Distància respecte a la seva posició "normal"

• Absolute: Segons el contenidor més proper

UF 1

DAW M04 Llenguatges de marques

• 30 % Part "teòrica" tipus test-preguntes curtes [Sense apunts]

• 70 % Part pràctica: se'us facilitarà un codi i recursos i se'us demanarà que hi feu modificacions i el completeu