Desenvolupament web estàtic amb HTML + CSS: Com ho fem per...?¶

En aquesta secció exposarem diferents exemples de codi per implementar diferents conceptes, per exemple, com centrar una imatge a dins d'un element DIV.

Ho estructurarem en 3 blocs:

Aprendre a formatar contingut HTML
Aprendre a aplicar estils CSS
Aprendre a generar i maquetar contingut web

Formatar contingut HTML¶

Configurar una icona personalitzada al web

DescripcióSintaxiExemple

Una icona és una petita imatge que identifica al web al nevegador.

La podem crear amb https://www.favicon.cc.

Podem usar .gif o png, també.

Podem usar també: https://pixlr.com/editor/

Usarem l'etiqueta link amb els atributs

rel: posarem TIPUS icon
href: indica la ruta d'on hi ha ARXIU imatge de la icona, png, ico, ...
type: posarem el FORMAT imatge, image/gif, image/x-icon, ...

<link rel="TIPUS" href="ARXIU" type="FORMAT">

I anirà a dins del <head> del HTML.

<head>
    <link rel="shortcut icon" href="favicon.ico" type="image/x-icon" />
</head>

<head>
    <link rel="icon" href="assets/images/favicon.png">
</head>

Crear un imatge com a vincle

DescripcióSintaxiExemple:

L’objectiu és fer que una imatge actuï com a vincle.

Per aconseguir-ho cal anidar les etiquetes <a> i <img>, d’aquesta forma la totalitat de la imatge esdevindrà l’espai de l’enllaç.

Usarem l'etiqueta <img>anidada per l'etiqueta <a>

<a href="ENLLAÇ">
    <img SRC="IMATGE">
</a>

<a href="https://httpd.apache.org" target="_blank">
    <img src="apache.png">
</a>

Crear una taula simple

DescripcióSintaxisExemple

Volem crear una taula HTML amb una capçalera de Nom, Edat i Ciutat. I dades de dues persones

Usarem <table>, i que el parser del navegador, ens ho formati en files i columnes.

Usarem <table>, <thead>, <tr>,<th>,<td> i <tbody>

Anirem anidant

    <table>
        <thead>

        </thead>
        <tbody>

        </tbody>
    </table>

A dins de cada <thead>, anidarem un <tr> com a capçalera que farà d'estil negreta. I per cada columna un <th>...</th>

    <thead>
        <tr>
            <th>...</th>
            <th>...</th>
            <th>...</th>
        </tr>
    </thead>

A dins de cada <tbody>, anidarem un <tr> per cada fila d'indormació. I per cada columna un <td>...</td>

    <tbody>
        <tr>
            <td>........</td>
            <td>........</td>
            <td>........</td>
        </tr>
        <tr>
            <td>........</td>
            <td>........</td>
            <td>........</td>
        </tr>
    </tbody>

:info: Més endavant ho podrem generar de manera dinàmica amb Javascript o PHP

I en total tenim:

    <table>
        <thead>
            <tr>
                <th>...</th>
                <th>...</th>
                <th>...</th>
            </tr>
        </thead>
        <tbody>
            <tr>
                <td>......</td>
                <td>......</td>
                <td>......</td>
            </tr>

        </tbody>
    </table>

    <table>
        <thead>
            <tr>
                <th>Nom</th>
                <th>Edat</th>
                <th>Ciutat</th>
            </tr>
        </thead>
        <tbody>
            <tr>
                <td>Anna</td>
                <td>30</td>
                <td>Barcelona</td>
            </tr>
            <tr>
                <td>Pere</td>
                <td>25</td>
                <td>València</td>
            </tr>
        </tbody>
    </table>

Nom	Edat	Ciutat
Anna	30	Barcelona
Pere	25	València

Aplicar estils CSS¶

Importar i usar una font de google al CSS

DescripcióSintaxisExemple

Volem usar una font de text de les disponible a Google Fonts

D'aquesta manera podem usar-la directament al dissenyar l'estil de la nostra interfície

Tenim dues possibilitats:

Afegir l'enllaç al <head>

    <link href="https://fonts.googleapis.com/css2?family=Roboto:wght@400;700&display=swap" rel="stylesheet">

Importar la font directament dins de l'arxiu .css

    @import url('https://fonts.googleapis.com/css2?family=Roboto:wght@400;700&display=swap');

Llavors ja la puc usar directament a l'element que m'interessi

    body {
        font-family: 'Roboto', sans-serif;
    }

Importem al css la font de google

    @import url('https://fonts.googleapis.com/css?family=Dancing+Script&display=swap');

    p {
        font-family: 'Dancing Script', cursive;
    }

    <p>Exemple de font Google Dancing cursiva</p>

Exemple de font Dancing cursiva

Generar i maquetar contingut web¶

Incrustar mapa de Google Maps

DescripcióSintaxiExemple

Incrustar un mapa no interactiu de Google maps a la nostra web.

:warning: Aquest mapa no serà interactiu i serà sense usar una API-Key de google maps. Per fer-ho caldria usar la versió js.

Es pot inserir un mapa utilitzant l'etiqueta <iframe> i atributs:

width: píxels d'amplada
height: píxels d'alçada
src: font del mapa de google
style: estil aplicat, es pot fer selector.

    <iframe width="px" height="px" src="URL map">  </iframe>

La manera més simple d'obtenir els valors dels atributs a inserir a l'etiqueta <iframe> és fer-ho:

Navegant a https://maps.google.com
Menú > Compartir o insereix mapa
Insereix un mapa
Copia l'html

<iframe src="https://www.google.com/maps/embed?pb=!1m14!1m12!1m3!1d22868.699269129094!2d2.8246016000000003!3d41.96270079999999!2m3!1f0!2f0!3f0!3m2!1i1024!2i768!4f13.1!5e1!3m2!1sca!2ses!4v1730964345653!5m2!1sca!2ses" width="750" height="250" style="border:0;" allowfullscreen="" loading="lazy" referrerpolicy="no-referrer-when-downgrade"></iframe>

Incrustar vídeo de Youtube

DescripcióSintaxiExemple

Incrustar un vídeo de YouTube a dins d'una pàgina HTML.

Es pot inserir un vídeo utilitzant l'etiqueta <iframe> i atributs:

width: píxels d'amplada
height: píxels d'alçada
src: font del vídeo
title: títol

    <iframe width="px" height="px" src="URL vídeo">  </iframe>

<iframe width="560" height="315" src="https://www.youtube.com/embed/qP23O70ve7k?si=Zj-c7MBuN-W2hnrx" title="YouTube video player" frameborder="0" allow="accelerometer; autoplay; clipboard-write; encrypted-media; gyroscope; picture-in-picture; web-share" referrerpolicy="strict-origin-when-cross-origin" allowfullscreen></iframe>

Incrustar un vídeo pròpi

DescripcióSintaxiExemple

Incrustar un vídeo propi a dins d'una pàgina HTML.

Es pot inserir un vídeo utilitzant l'etiqueta <video> i <source> i atributs:

width: píxels d'amplada
height: píxels d'alçada
src: font del vídeo. L'arxiu de vídeo ha d'estar al propi servidor i a la mateixa carpeta del codi html o bé en una ruta accessible.
type: tipus arxiu, video/mp4, video/ogg, ...

    <video width="px" height="px240" controls>
        <source src="arxiu video" type="tipus video">
    </video>

<video width="320" height="240" controls>
    <source src="movie.mp4" type="video/mp4">
</video>