HTML5 & CSS3

Primera pàgina

<!DOCTYPE HTML>

<html lang="ca">

<head>

<meta charset="UTF-8">

<!-- laprimera.html -->

<title>La meva primera pàgina!</title>

</head>

<body>

<h1>La meva primera pàgina!</h1>

<p>

Aquesta és la primera pàgina que he fet, i estic molt orgullosa d&apos;ella.

És tan bonica!

</p>

</body>

</html>

Elements de la pàgina:

<!DOCTYPE HTML>: capçalera que indica que es tracta d'un document HTML5.
<html lang="ca">: node arrel amb un atribut per a la llengua.
<head></head>: capçalera del document on hi ha definicions, NO part visual.
<meta charset="UTF-8">: tipus de codificació de la pàgina.
: comentari.
<title></title>: títol de la pàgina que apareix a la barra del navegador.
<body></body>: el contingut de la pàgina.
<h1></h1>: etiqueta de títol, mida màxima. Hi ha h2, h3...
<p></p>: etiqueta de paràgraf.

Caràcters especials: <, >,",' i & es representen com < > " ' &

Validació

Les pàgines HTML es poden validar online en aquesta adreça:

http://validator.w3.org/

L'objectiu és que no hi hagi ni errors ni avisos.

Introducció a HTML

HTML text fundamentals: títols, paràgrafs, llistes, èmfasi, importància
Creació de enllaços: menú de navegació
Format avançat de text: citacions, abreviatures, contactes, codi, dates
Taules
Imatges
Depuració d'HTML

Estructura d'una web

Seccions d'un document
HTML de l'estructura
Planificació d'una web

Descarrega els arxius de referència.

Introducció a Flexbox.

Introducció a CSS

CSS avançat

Estil del text: text, fonts, llistes i enllaços.
Estil de les capses: model de caixa, fons, vora, taules i efectes.
Posicionament: normal, flexbox, grid, floats, posicionament, multi-columna.

HTML Cheat sheet

CSS Cheat sheet

Referències

Github learning area (MDN): https://github.com/mdn/learning-area
Aprendre HTML (MDN): https://developer.mozilla.org/en-US/docs/Learn
HTML Reference (MDN): https://developer.mozilla.org/en-US/docs/Web/HTML/Reference
Aprendre CSS (MDN): https://developer.mozilla.org/en-US/docs/Learn/CSS
CSS Reference (MDN): https://developer.mozilla.org/en-US/docs/Web/CSS/Reference
Validador: http://validator.w3.org/
Recursos del llibre: http://www.aharrisbooks.net/haio/book_1/
Tidy: http://infohound.net/tidy/

Page updated

Report abuse