El Projecte | Sobre nosaltres | Contribuir | Donacions | Llicència

HOME

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>&copy; 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>&copy; 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.

HTML i CSS per a la Interfície d'Usuari

Què és HTML?

Conceptes Clau d'HTML

Exemple Bàsic d'HTML

Què és CSS?

Conceptes Clau de CSS

Exemple Bàsic de CSS

Integració d'HTML i CSS

Exemple d'Integració

Exercicis Pràctics

Exercici 1: Crear una Pàgina Web Simple

Solució de l'Exercici 1

Conclusió

Fonaments de la Interfície d'Usuari

Mòdul 1: Introducció a les Interfícies d'Usuari

Mòdul 2: Fonaments del Disseny Visual

Mòdul 3: Fonaments de l'Experiència d'Usuari (UX)

Mòdul 4: Components i Patrons de la Interfície d'Usuari

Mòdul 5: Tècniques Avançades de Disseny d'Interfícies d'Usuari

Mòdul 6: Desenvolupament i Implementació de la Interfície d'Usuari

Mòdul 7: Tendències Futures en el Disseny d'Interfícies d'Usuari