En aquest tema, explorarem com HTML i CSS són fonamentals per al desenvolupament de la interfície d'usuari. Aprendrem a estructurar el contingut amb HTML i a estilitzar-lo amb CSS per crear interfícies atractives i funcionals.
Què és HTML?
HTML (HyperText Markup Language) és el llenguatge de marcatge utilitzat per estructurar el contingut d'una pàgina web. És la base de qualsevol interfície d'usuari web i permet definir elements com encapçalaments, paràgrafs, enllaços, imatges, i molt més.
Conceptes Clau d'HTML
- Etiquetes HTML: Són els blocs de construcció d'HTML. Cada etiqueta té un nom i pot tenir atributs que defineixen les seves propietats.
- Estructura d'un Document HTML: Inclou elements com
<html>
,<head>
, i<body>
. - Elements Semàntics: Com
<header>
,<footer>
,<article>
, que ajuden a descriure el propòsit del contingut.
Exemple Bàsic d'HTML
<!DOCTYPE html> <html lang="ca"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title>Pàgina d'Exemple</title> </head> <body> <header> <h1>Benvinguts a la meva pàgina web</h1> </header> <main> <p>Aquesta és una pàgina d'exemple utilitzant HTML.</p> <a href="https://www.example.com">Visita el nostre lloc</a> </main> <footer> <p>© 2023 La meva pàgina web</p> </footer> </body> </html>
Què és CSS?
CSS (Cascading Style Sheets) és el llenguatge utilitzat per descriure la presentació d'un document HTML. Permet aplicar estils com colors, fonts, espais, i dissenys a les pàgines web.
Conceptes Clau de CSS
- Selectores: Identifiquen els elements HTML als quals s'aplicaran els estils.
- Propietats i Valors: Defineixen els estils específics que s'aplicaran als elements seleccionats.
- Cascada i Especificitat: Determinen com es combinen i s'apliquen els estils.
Exemple Bàsic de CSS
body { font-family: Arial, sans-serif; line-height: 1.6; } header { background-color: #4CAF50; color: white; padding: 10px 0; text-align: center; } a { color: #4CAF50; text-decoration: none; } a:hover { text-decoration: underline; }
Integració d'HTML i CSS
Per aplicar CSS a un document HTML, podem utilitzar tres mètodes principals:
- Estils en línia: Aplicar estils directament a les etiquetes HTML amb l'atribut
style
. - Fulls d'estil interns: Incloure CSS dins d'una etiqueta
<style>
al document HTML. - Fulls d'estil externs: Enllaçar un arxiu CSS extern al document HTML amb l'etiqueta
<link>
.
Exemple d'Integració
<!DOCTYPE html> <html lang="ca"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title>Pàgina d'Exemple</title> <link rel="stylesheet" href="styles.css"> </head> <body> <header> <h1>Benvinguts a la meva pàgina web</h1> </header> <main> <p>Aquesta és una pàgina d'exemple utilitzant HTML i CSS.</p> <a href="https://www.example.com">Visita el nostre lloc</a> </main> <footer> <p>© 2023 La meva pàgina web</p> </footer> </body> </html>
Exercicis Pràctics
Exercici 1: Crear una Pàgina Web Simple
- Crea un document HTML que inclogui un encapçalament, un paràgraf i un enllaç.
- Aplica estils bàsics utilitzant un full d'estil extern per canviar el color de fons de l'encapçalament i el color del text del paràgraf.
Solució de l'Exercici 1
HTML:
<!DOCTYPE html> <html lang="ca"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title>Pàgina Simple</title> <link rel="stylesheet" href="styles.css"> </head> <body> <header> <h1>La meva Pàgina Simple</h1> </header> <main> <p>Aquesta és una pàgina web simple amb HTML i CSS.</p> <a href="https://www.example.com">Visita el nostre lloc</a> </main> </body> </html>
CSS (styles.css):
header { background-color: #333; color: white; padding: 10px; text-align: center; } p { color: #555; font-size: 16px; }
Conclusió
En aquesta secció, hem après els fonaments d'HTML i CSS, que són essencials per al desenvolupament de la interfície d'usuari. Hem vist com estructurar el contingut amb HTML i com aplicar estils amb CSS per crear pàgines web atractives i funcionals. A mesura que avancem, explorarem com utilitzar aquestes habilitats per crear interfícies més complexes i interactives.
Fonaments de la Interfície d'Usuari
Mòdul 1: Introducció a les Interfícies d'Usuari
- Què és una Interfície d'Usuari?
- Història de les Interfícies d'Usuari
- Tipus d'Interfícies d'Usuari
- Principis Bàsics del Disseny d'Interfícies d'Usuari
Mòdul 2: Fonaments del Disseny Visual
- Teoria del Color
- Tipografia en la Interfície d'Usuari
- Disseny i Composició
- Disseny per a l'Accessibilitat
Mòdul 3: Fonaments de l'Experiència d'Usuari (UX)
- Comprensió de l'Experiència d'Usuari
- Investigació d'Usuaris i Persones
- Wireframing i Prototipatge
- Proves d'Usabilitat
Mòdul 4: Components i Patrons de la Interfície d'Usuari
- Components Comuns de la Interfície d'Usuari
- Patrons de Disseny en la Interfície d'Usuari
- Disseny Responsiu
- Microinteraccions
Mòdul 5: Tècniques Avançades de Disseny d'Interfícies d'Usuari
- Animació en la Interfície d'Usuari
- Sistemes de Disseny i Guies d'Estil
- Eines Avançades de Prototipatge
- Visualització de Dades
Mòdul 6: Desenvolupament i Implementació de la Interfície d'Usuari
- Introducció al Desenvolupament Frontend
- HTML i CSS per a la Interfície d'Usuari
- JavaScript per a Interfícies d'Usuari Interactives
- Frameworks i Llibreries