Desenvolupament de la pràctica

La pràctica consisteix en crear una pàgina web.

Aquesta web s'haurà de publicar a GitHub Pages amb el nom smx-m8-uf5-practica2 S'haurà de preparar un servidor web local, per al desenvolupament de la web. El desenvolupament de la web haurà de complir, al menys, els següents criteris:

La pàgina ha de seguir la recomanació indicada a "Anatomia d'un document HTML"
Ha de contenir els següents elements HTML:
- Una capçalera principal
- Dues capçaleres secundàries
- Paràgrafs
- Paraules destacadaes
- Enllaços que portin a altres pàgines d'internet
- Imatges
- Els caracters especials < > " ' &
- Comentaris
A més a més s'hauràn d'especificar les següents metadades
- Títol
- Codificació de caracters
- Autor
- Descripció
- Favicon
- Idioma principal del document
Per últim, s'hauran d'enllaçar dos arxius CSS i Javascript:
- style.css
- script.js
El contingut dels arxius ha de ser aquest:
style.css html { width: 60em; margin: 0 auto; } body { margin: 0; } h1, h2, li { font-family: sans; } h1 { background-color: #00684B; color: white; padding: 16px; text-align: center; } h2 { background-color: #03a87c; color: white; padding: 8px 24px; margin-top: 48px; } em { background-color: #FF9E05; color:white; padding: 2px; } strong { color: #FF9E05; } a::after { content: " \2BB5"; } img { max-width: 100%; box-shadow: 0 19px 38px rgba(0,0,0,0.30), 0 15px 12px rgba(0,0,0,0.22); } ul { background-color: #FF9E05; padding: 8px 16px; } ul:empty { padding: 0; } li { font-weight: bold; color: white; background-color: #00684B; padding: 16px; margin: 8px; list-style-type: none; border-radius: 8px; transition: transform .2s; } li:hover { transform: scale(1.01); } script.js const list = document.createElement('ul'); const info = document.createElement('p'); info.textContent = 'A sota hi ha una llista dinàmica. Clica aquí \u{1f4cc} per a afegir un nou item a la llista. Clica un item existent per a canviar el seu text.'; document.body.appendChild(info); document.body.appendChild(list); info.onclick = () => { const item = document.createElement('li'); item.textContent = prompt('Quin contingut vols que tingui l\'item?'); list.appendChild(item); item.onclick = (e) => { item.textContent = prompt('Introdueix el nou contingut de l\'item'); } }

Inici en HTML

Desenvolupament de la pràctica

Exemple

Sense CSS

Amb CSS