El Projecte | Sobre nosaltres | Contribuir | Donacions | Llicència
HOME Els meus cursos Finalitzats
◄ Anterior
◄

Creant el disseny

Següent ►
►

En aquest tema, aprendrem a crear el disseny d'un lloc web complet utilitzant HTML i CSS. Ens enfocarem en la creació d'una estructura clara i organitzada que sigui fàcil de mantenir i escalar. Aquest procés inclou la definició de l'estructura del document, l'ús d'elements semàntics, i l'aplicació d'estils CSS per donar forma al disseny.

  1. Definint l'estructura del document

1.1. Estructura bàsica de l'HTML

Comencem amb una estructura bàsica d'HTML que inclou els elements essencials:

<!DOCTYPE html>
<html lang="ca">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>El meu lloc web</title>
    <link rel="stylesheet" href="styles.css">
</head>
<body>
    <header>
        <h1>El meu lloc web</h1>
        <nav>
            <ul>
                <li><a href="#home">Inici</a></li>
                <li><a href="#about">Sobre nosaltres</a></li>
                <li><a href="#services">Serveis</a></li>
                <li><a href="#contact">Contacte</a></li>
            </ul>
        </nav>
    </header>
    <main>
        <!-- Contingut principal aquí -->
    </main>
    <footer>
        <p>&copy; 2023 El meu lloc web. Tots els drets reservats.</p>
    </footer>
</body>
</html>

1.2. Elements semàntics

Utilitzem elements semàntics per millorar la llegibilitat i l'accessibilitat del nostre codi:

  • <header>: Conté l'encapçalament del lloc web, incloent el títol i la navegació.
  • <nav>: Defineix una secció de navegació.
  • <main>: Conté el contingut principal del document.
  • <footer>: Inclou el peu de pàgina amb informació addicional.

  1. Creant el disseny amb CSS

2.1. Enllaçant el CSS

Hem enllaçat el nostre fitxer CSS al document HTML amb la següent línia dins de l'etiqueta <head>:

<link rel="stylesheet" href="styles.css">

2.2. Estils bàsics

Comencem amb alguns estils bàsics per donar forma al nostre disseny:

/* styles.css */

body {
    font-family: Arial, sans-serif;
    margin: 0;
    padding: 0;
    box-sizing: border-box;
}

header {
    background-color: #333;
    color: white;
    padding: 1rem;
    text-align: center;
}

nav ul {
    list-style-type: none;
    padding: 0;
}

nav ul li {
    display: inline;
    margin: 0 1rem;
}

nav ul li a {
    color: white;
    text-decoration: none;
}

main {
    padding: 2rem;
}

footer {
    background-color: #333;
    color: white;
    text-align: center;
    padding: 1rem;
    position: fixed;
    width: 100%;
    bottom: 0;
}

2.3. Layout amb Flexbox

Utilitzem Flexbox per crear un disseny flexible i responsiu:

/* Flexbox per al layout */
header, footer {
    display: flex;
    justify-content: space-between;
    align-items: center;
}

nav ul {
    display: flex;
    justify-content: center;
    align-items: center;
}

main {
    display: flex;
    flex-direction: column;
    align-items: center;
}

  1. Exemple complet

Aquí teniu l'exemple complet del nostre document HTML amb els estils CSS aplicats:

3.1. HTML

<!DOCTYPE html>
<html lang="ca">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>El meu lloc web</title>
    <link rel="stylesheet" href="styles.css">
</head>
<body>
    <header>
        <h1>El meu lloc web</h1>
        <nav>
            <ul>
                <li><a href="#home">Inici</a></li>
                <li><a href="#about">Sobre nosaltres</a></li>
                <li><a href="#services">Serveis</a></li>
                <li><a href="#contact">Contacte</a></li>
            </ul>
        </nav>
    </header>
    <main>
        <section id="home">
            <h2>Benvinguts</h2>
            <p>Aquesta és la pàgina d'inici del nostre lloc web.</p>
        </section>
        <section id="about">
            <h2>Sobre nosaltres</h2>
            <p>Informació sobre la nostra empresa.</p>
        </section>
        <section id="services">
            <h2>Serveis</h2>
            <p>Descripció dels serveis que oferim.</p>
        </section>
        <section id="contact">
            <h2>Contacte</h2>
            <p>Formes de contactar amb nosaltres.</p>
        </section>
    </main>
    <footer>
        <p>&copy; 2023 El meu lloc web. Tots els drets reservats.</p>
    </footer>
</body>
</html>

3.2. CSS

/* styles.css */

body {
    font-family: Arial, sans-serif;
    margin: 0;
    padding: 0;
    box-sizing: border-box;
}

header {
    background-color: #333;
    color: white;
    padding: 1rem;
    text-align: center;
    display: flex;
    justify-content: space-between;
    align-items: center;
}

nav ul {
    list-style-type: none;
    padding: 0;
    display: flex;
    justify-content: center;
    align-items: center;
}

nav ul li {
    margin: 0 1rem;
}

nav ul li a {
    color: white;
    text-decoration: none;
}

main {
    padding: 2rem;
    display: flex;
    flex-direction: column;
    align-items: center;
}

footer {
    background-color: #333;
    color: white;
    text-align: center;
    padding: 1rem;
    position: fixed;
    width: 100%;
    bottom: 0;
}

Exercici pràctic

Exercici

Crea una pàgina HTML amb la següent estructura:

  1. Un encapçalament amb el títol "El meu lloc web".
  2. Una barra de navegació amb enllaços a "Inici", "Sobre nosaltres", "Serveis" i "Contacte".
  3. Una secció principal amb quatre seccions: "Benvinguts", "Sobre nosaltres", "Serveis" i "Contacte".
  4. Un peu de pàgina amb el text "© 2023 El meu lloc web. Tots els drets reservats.".

Solució

Segueix l'exemple complet proporcionat anteriorment per crear la teva pàgina HTML i CSS.

Conclusió

En aquesta secció, hem après a crear el disseny d'un lloc web utilitzant HTML i CSS. Hem definit l'estructura del document, utilitzat elements semàntics i aplicat estils CSS per donar forma al disseny. A més, hem vist com utilitzar Flexbox per crear un disseny flexible i responsiu. Amb aquests coneixements, estàs preparat per crear dissenys més complexos i atractius per als teus projectes web.

◄ Anterior
◄
Següent ►
►

Curs d'HTML

Mòdul 1: Introducció a l'HTML

Mòdul 2: Formatació de text en HTML

Mòdul 3: Enllaços i mitjans en HTML

Mòdul 4: Taules en HTML

Mòdul 5: Formularis en HTML

Mòdul 6: Elements semàntics d'HTML5

Mòdul 7: Tècniques avançades d'HTML

Mòdul 8: Integració d'HTML i CSS

Mòdul 9: Disseny web responsiu

Mòdul 10: Millors pràctiques i accessibilitat

Mòdul 11: Projecte: Construint un lloc web complet

El Projecte | Sobre nosaltres | Contribuir | Donacions | Llicència
© Copyright 2024. Tots els drets reservats