HTML5 CSS

Aprenem

<tr> per cada fila i <td> per cada columna o cel·la. . <th> indica que es tracta de la cel·la capçalera.TAULES Les taules es defineixen amb les etiquetes <table>.

Elements estructurals HTML .

❖ <figure> i <figcaption> (figura iy cita de figura): S’utilitza per encapsular una figura com únic element i contenir el títol de la figura. ❖ <main> Contingut principal de la pàgina o document ❖ <hgroup> Agrupació de més d’un encapçalament si es vol que tinga valor d’únic. ❖ <aside> (a part): Defineix un bloc de contingut relacionat amb el contingut principal que ho envolta. ❖ <time> S’usa per marcar temps i dates.Elements estructurals HTML ❖ <header> Capçalera ❖ <footer> Peu ❖ <nav> Navegació de la pàgina ❖ <article> (article): Conté una peça independent de contingut. per exemple. . però no és essencial per al flux del mateix. ❖ <section> (secció): S’utilitza per agrupar articles en diferents temes o per definir les diferents seccions en un sol article. una noticia.

ibm.html estiloexempleestructura.Elements estructurals HTML Documentació de referència https://www.uoc.edu/ac/le/es/m8/ud2/index.css html53.html fitxers: ejemploestructura.jpg són a la carpeta estructura html al Moodle .com/developerworks/ssa/web/tutorials/wa-html5/ http://mosaic.

ico i fica’l al blog anterior. <link rel="icon" type="image/ico" href=".Favicon Programari al web per crear un favicon de 16x16 http://www.cc/ Crea el favicon al teu gust.favicon. desa el fitxer creat a images amb format ./images/favicon.ico" /> On a l’html creus que l’hauràs de ficar? .

html El full d’estil no s’estarà aplicant perquè no el troba. haurem de canviar per: <!-../css/estiloexempleestructura.htm i la situarem al directori pagines del nostre site.Com contacte hi és a pagines hem de pujar un nivel per accedir al css --> <link rel="stylesheet" href=".css" type="text/css" /> Al ficar dos punts estem pujant un nivell i desprès ens desplacem a css .Creació de més pàgines i enllaç Crearem la pàgina contacte. Hem de fer l’enllaç amb la pàgina principal index.

html per a que al clicar en contacte ens duga a la pàgina contacte./pagines/contacte. recorda que hi és al directori pagines.Creació de més pàgines i enllaç Ens queda canviar index.html. Hem de canviar per aquest element de llista: <li><a href=".html">Contacte</a></li> .

com">Contacte per correu electrònic</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.Creació formulari de contacte Creació de més pàgines i enllaç Contacte mitjançant correu electrònic: <a href="mailto:micuenta@gmail.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> . <form id="formulario" method="post" action="validacion.

Més elements formulari html5 Creació de més pàgines i enllaç Més 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" /> .

Més elements formulari html5 Creació de més pàgines i enllaç <input type="file" name="adjunto"/> <input type="email" name="email" /> <br /> Llista desplegable <select name="aficion" /> <option value="1">música</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> <source src="mi-archivo-de-audio. preload=”none” . loop.mp3" type="audio/mpeg"> <source src="mi-archivo-de-audio. wav) perquè els diferents navegadors puguen reproduir el nostre fitxer.wav" type="audio/wav"> </audio> Atributs: autoplay.Audio Creació de més pàgines i enllaç Haurem de treballar amb tres formats d’audio (ogg.ogg" type="audio/ogg"> <source src="mi-archivo-de-audio. mp3.

ogv" type="video/ogg" /> </video> Poster és una imatge fitxa quan encara no es reprodueix el vídeo. ogg) per compatibilitat amb altres navegadors <video controls poster="demo.webm" type="video/webm" /> <source src="demo. .jpg"> <source src="demo.Vídeo Creació de més pàgines i enllaç Element per a la reproducció d’un vídeo.mp4" type="video/mp4" /> <source src="demo. webm. Haurem de tindre’l en diferents formats mp4.

org/es/docs/Web/HTML/Canvas Exemple d’animació feta amb canvas http://tron. <canvas width=”500” height=”500”></canvas> Amplària i alçaria l’hem de definir. fer composicions de fotos i inclús animacions.com/# .vectorform.mozilla.Canvas Creació de més pàgines i enllaç Element inclós en html5 destinat a dibuixar gràfics. Tutorial per saber més: https://developer.

Per accedir des de el navegador nomusuari.Publicar el lloc web Creació de més pàgines i enllaç Crearem un compte neocities https://neocities. Creem les carpetes i arrosseguem els fitxers dins d’aquestes. El nombre del nostre lloc apareixerà d’alt.org/ Confirmem el correu i ja podem començar a crear el nostre site.org .neocities.