HTML5 CSS

Aprenem
TAULES
Les taules es defineixen amb les etiquetes <table>, <tr> per cada fila i <td> per
cada columna o cella. <th> indica que es tracta de la cella capalera.
Elements estructurals HTML
Elements estructurals HTML
<header> Capalera
<footer> Peu
<nav> Navegaci de la pgina
<article> (article): Cont una pea independent de contingut, per exemple, una noticia.
<section> (secci): Sutilitza per agrupar articles en diferents temes o per definir les
diferents seccions en un sol article.
<time> Susa per marcar temps i dates.
<aside> (a part): Defineix un bloc de contingut relacionat amb el contingut principal que
ho envolta, per no s essencial per al flux del mateix.
<main> Contingut principal de la pgina o document
<hgroup> Agrupaci de ms dun encapalament si es vol que tinga valor dnic.
<figure> i <figcaption> (figura iy cita de figura): Sutilitza per encapsular una figura com
nic element i contenir el ttol de la figura.
Elements estructurals HTML
Documentaci de referncia

https://www.ibm.com/developerworks/ssa/web/tutorials/wa-html5/

http://mosaic.uoc.edu/ac/le/es/m8/ud2/index.html

fitxers: ejemploestructura.html

estiloexempleestructura.css

html53.jpg

sn a la carpeta estructura html al Moodle

Favicon
Programari al web per crear un favicon de 16x16

http://www.favicon.cc/

Crea el favicon al teu gust, desa el fitxer creat a images amb format .ico i fical al
blog anterior.

<link rel="icon" type="image/ico" href="./images/favicon.ico" />

On a lhtml creus que lhaurs de ficar?

Creaci de ms pgines i enlla
Crearem la pgina contacte.htm i la situarem al directori pagines del nostre site.
Hem de fer lenlla amb la pgina principal index.html

El full destil no sestar aplicant perqu no el troba, haurem de canviar per:

<!-- Com contacte hi s a pagines hem de pujar un nivel per accedir al css -->
<link rel="stylesheet" href="../css/estiloexempleestructura.css" type="text/css" />
Al ficar dos punts estem pujant un nivell i desprs ens desplacem a css
Creaci de ms pgines i enlla
Ens queda canviar index.html per a que al clicar en contacte ens duga a la pgina
contacte.html, recorda que hi s al directori pagines.
Hem de canviar per aquest element de llista:
<li><a href="./pagines/contacte.html">Contacte</a></li>
Creaci formulari de contacte
Creaci de ms pgines i enlla
Contacte mitjanant correu electrnic:
<a href="mailto:micuenta@gmail.com">Contacte per correu electrnic</a>
Formulari amb diferents elements html5. Sols es tracta de una mostra perqu
necessita php per a fer la validaci (Programaci en el servidor) i no s el nostre
objectiu.

<form id="formulario" method="post" action="validacion.php" >

<label for="nombre">Nom: </label><input type="text" id="nombre" name="nombre" size="20"
required autofocus /><br />
<input type="button" name="enviar" id="enviar" value="Desar canvis" />
</form>
Ms elements formulari html5
Creaci de ms pgines i enlla
Ms elements de formulari inclosos en html5
<input required type="text" name="apellidos" />
<input type="password" name="password" />
<input type="number"name="edad" min="11" max="100" step="2" value="15" />
<input type="date" name="fecha" value="2017-06-08" step="1"/>
Botons radio:
<input type="radio" name="opci" value="opci 1" checked="checked" />
<input type="radio" name="opci" value="opci 2" /> Opci 2 <br />
Checkbox:
<input type="checkbox" name="publicidad" value="publicidad" checked="checked" />
Ms elements formulari html5
Creaci de ms pgines i enlla
<input type="file" name="adjunto"/>
<input type="email" name="email" /> <br />
Llista desplegable
<select name="aficion" />
<option value="1">msica</option>
<option value="2">lectura</option>
<option value="3">esport</option>
</select>
<input type="color" name="color" value="#FF0000" />
<input type="url" name="web" />
<textarea rows="3" cols="50" ></textarea>
Audio
Creaci de ms pgines i enlla
Haurem de treballar amb tres formats daudio (ogg, mp3, wav) perqu els
diferents navegadors puguen reproduir el nostre fitxer.
<audio>
<source src="mi-archivo-de-audio.ogg" type="audio/ogg">
<source src="mi-archivo-de-audio.mp3" type="audio/mpeg">
<source src="mi-archivo-de-audio.wav" type="audio/wav">
</audio>
Atributs: autoplay, loop, preload=none
Vdeo
Creaci de ms pgines i enlla
Element per a la reproducci dun vdeo. Haurem de tindrel en diferents formats
mp4, webm, ogg) per compatibilitat amb altres navegadors
<video controls poster="demo.jpg">
<source src="demo.mp4" type="video/mp4" />
<source src="demo.webm" type="video/webm" />
<source src="demo.ogv" type="video/ogg" />
</video>

Poster s una imatge fitxa quan encara no es reprodueix el vdeo.

Canvas
Creaci de ms pgines i enlla
Element incls en html5 destinat a dibuixar grfics, fer composicions de fotos i
incls animacions.
<canvas width=500 height=500></canvas>
Amplria i alaria lhem de definir.

Tutorial per saber ms:

https://developer.mozilla.org/es/docs/Web/HTML/Canvas

Exemple danimaci feta amb canvas

http://tron.vectorform.com/#
Publicar el lloc web
Creaci de ms pgines i enlla
Crearem un compte neocities
https://neocities.org/
Confirmem el correu i ja podem comenar a crear el nostre site.
Creem les carpetes i arrosseguem els fitxers dins daquestes.
El nombre del nostre lloc apareixer dalt.
Per accedir des de el navegador
nomusuari.neocities.org