Come codificare un sito Web

Come codificare un sito WebVuoi imparare come creare un sito Web con HTML e CSS?


Sei nel posto giusto. In questa guida, ti mostriamo tutti i passaggi per passare da una schermata vuota a un sito Web funzionante ottimizzato e piuttosto bello allo stesso tempo.

Ma prima cosa sono HTML e CSS?

Bene, potresti semplicemente cercare entrambi i termini in Wikipedia, ma quelle definizioni non sono molto facili da leggere. Semplifichiamo un po ‘le cose:

  • HTML (Hypertext Markup Language) definisce la struttura e il contenuto di una pagina Web – dove le cose vanno, Come sono disposti e ciò che è sulla pagina
  • CSS (Fogli di stile a cascata) definisce il styling / presentazione di una pagina Web e gli elementi in essa contenuti

Non puoi davvero averne uno senza l’altro: i due lavorano insieme per creare la pagina web finale, il suo design e il contenuto su di essa.

Nota; quando diciamo “una pagina web”, intendiamo un singolo documento HTML, una singola pagina che fa parte del tuo sito web. Considerando che “un sito Web” è la cosa completa – l’intero sito con tutte le sue singole pagine web.

Come creare un sito Web utilizzando HTML e CSS (indice):

  1. Scopri le basi dell’HTML
  2. Comprendere la struttura del documento HTML
  3. Scopri i selettori CSS
  4. Metti insieme un foglio di stile CSS
  5. Ottieni Bootstrap
  6. Scegli un design
  7. Personalizza il tuo sito Web con HTML e CSS
  8. Aggiungi contenuto e immagini
  9. Ottimizza colori e caratteri
  10. Crea pagine aggiuntive

Tempo totale per la creazione di un sito Web: 4-5 ore
Livello di abilità: Intermedio

Se ritieni che ciò sia troppo complicato, ti consigliamo di creare un sito Web utilizzando WordPress o di scegliere uno dei costruttori di siti Web. Puoi anche consultare un elenco dei migliori IDE selezionati per lo sviluppo web. 

Contents

Prima di iniziare, raccogli le tue risorse:

Quindi, la prima cosa di cui hai bisogno anche prima di creare un sito Web con HTML e CSS è un web server (hosting). Non preoccuparti, però; non è necessario acquistare la propria macchina. Molte società di web hosting ti venderanno un semplice servizio di hosting sui loro computer. Basta google per “web hosting” e scegliere qualcosa che non sia troppo costoso.

Con il server ordinato, la prossima cosa che ti serve è un nome di dominio. Il nome di dominio è ciò che il sito Web è identificato sul Web. Ad esempio, il nome di dominio di questo sito è websitesetup.org.

Quando hai sia un nome di dominio che un server, puoi connetterli insieme.

Divulgazione completa: Guadagniamo una commissione se finisci per acquistare Bluehost attraverso i nostri link di riferimento in questa guida. Questo ci aiuta a mantenere WebsiteSetup attivo e aggiornato. Grazie per il vostro sostegno.

Per risolvere questo problema senza problemi, ti consigliamo di iscriverti a un’azienda come Bluehost.

Gestiranno tutte le impostazioni per te. Ciò significa che: (un) crea un account di hosting per te, (B) registra un nome di dominio per tuo conto, (C) configurare tutto per lavorare insieme, e (D) ti dà accesso a una dashboard di facile utilizzo.

Vai avanti e registrati Bluehost, noi aspetteremo. Quando torni e hai il tuo server web configurato e pronto per l’uso, scorri fino al passaggio successivo.

Post scriptum Se vuoi solo sperimentare un sito Web HTML sul tuo computer, e non intendiamo renderlo pubblico, utilizzare un software server Web locale. Si chiama quello che raccomandiamo e che ci piace usare XAMPP. Ha versioni sia per Mac che per PC ed è facile da usare. Ecco una guida su come installarlo sul tuo computer.

1. Impara le basi dell’HTML

L’elemento principale di una struttura HTML è un HTML etichetta.

Un tag, ad esempio, è simile al seguente:

QUALCOSA

Qui, abbiamo a che fare con a etichetta. Questo lo farà grassetto un pezzo di testo che si trova tra il tag di apertura () e il tag di chiusura (). In questo caso, quel pezzo di testo è QUALCOSA.

Ma ci sono altri tag, solo per citarne alcuni:

  • ... renderà il testo in corsivo tra i tag di apertura e chiusura
  • ... lo sottolineerà
  • ...

    è un paragrafo di testo


  • ...

    è l’intestazione principale nella pagina

Oltre a questi semplici tag, ci sono anche tag più complessi. Ad esempio, se si desidera creare un elenco come il seguente:

  • Articolo 1
  • Articolo 2
  • Articolo 3

… puoi farlo con il seguente codice HTML:

  • Articolo 1
  • Articolo 2
  • Articolo 3

Oppure, se si desidera aggiungere un collegamento a un’altra pagina, come questa:

Questo è un link alla nostra homepage

… puoi farlo con questo codice:

Questo è un link alla mia homepage

Leggi questo per ottenere il elenco completo di tag HTML. Sarà utile mentre crei un sito Web con HTML e CSS.

2. Comprendere la struttura del documento HTML

Pensa alla tua pagina HTML come se fosse costruita con Legos. Metti diversi mattoni uno sopra l’altro per finire con una data struttura più grande.

Ma invece dei mattoncini Lego, ottieni tag HTML …

Ecco la struttura del documento HTML più semplice:





Ciao mondo!


Ciao mondo!

La mia prima pagina web.

Puoi prendere il codice sopra, copiarlo e incollarlo in un nuovo file, salvare il documento come index.html, e sarà una pagina HTML perfettamente valida.

Spieghiamo le singole parti di questo codice:

  • – la dichiarazione iniziale del documento
  • – un’altra dichiarazione; afferma che ciò che verrà dopo è un documento HTML scritto in inglese
  • – segna l’inizio del testa sezione; il testa sezione è dove vanno tutti i parametri di base della pagina; la maggior parte di questi non verrà mostrata sullo schermo; definiscono semplicemente cosa sta succedendo sotto il cofano
  • – definisce quale set di caratteri viene utilizzato per scrivere il documento; non c’è bisogno di dedicare troppo tempo a questo; usa questa dichiarazione così com’è
  • Ciao mondo! – il titolo della pagina; questo è ciò che le persone vedranno nella barra del titolo del proprio browser, ad es .:

titolo nel browser Web durante la creazione di un sito Web con HTML e CSS

  • – segna l’inizio del corpo sezione; questo è dove tutto il contenuto della pagina va; è la parte principale di un documento HTML; sottolineiamo questo, questa sezione è il punto in cui includerai tutti i contenuti che dovrebbero apparire sulla pagina

  • Ciao mondo!

    – l’intestazione principale nella pagina

  • La mia prima pagina web.

    – un semplice paragrafo di testo

  • – il tag di chiusura dell’intero documento HTML

Una nota importante qui. Lavorare su un file HTML in un’app di testo di base o in un elaboratore di testi complesso come MS Word non è una buona esperienza. Per semplificarti le cose, installa uno strumento chiamato Testo sublime. Ha versioni sia per Mac che per PC ed è gratuito.

Perché è meglio? Tra le altre cose, colorerà la sintassi di un file HTML. Ciò significa che distinguerà visivamente i tag HTML dal contenuto del testo, dai parametri dei tag e da altri valori. Fondamentalmente, diventerà tutto leggibile. Ecco come appare la nostra semplice struttura HTML in Sublime Text:

la sintassi sublime è ottima quando si crea un sito Web con HTML e CSS

Ok, torniamo sull’argomento. Puoi prenderlo nuovo index.html il tuo file, copiarlo nella posizione in cui si trova la directory principale del tuo server Web, quindi vedere quella pagina accedendo ad esso tramite un browser Web. Non essere troppo eccitato, però; questa pagina sarà piuttosto brutta (vedi sotto).

questa pagina è brutta

Va bene, quindi la pagina è brutta, come renderla non così?

3. Scopri i selettori CSS

Proprio come HTML ha i suoi tag, CSS ha selettori.

I selettori descrivono come un determinato elemento dovrebbe comportarsi in termini di aspetto. Ecco un esempio di un selettore CSS:

p {
dimensione carattere: 18px;
}

Questo selettore indica che tutto l’HTML

i tag all’interno del documento avranno una dimensione del carattere di 18 px.

Tuttavia, un modo più pratico di utilizzare i selettori CSS non è limitare tutti i tag di un determinato tipo a un determinato stile, ma piuttosto creare diverse “classi” e assegnarle ai tag uno per uno.

Ad esempio, un selettore di classe nei CSS è simile al seguente:

.testo normale {
dimensione carattere: 18px;
}

Notare il punto (.) prima del nome della classe (normale-text). Con la classe “normal-text” definita, ora possiamo assegnare quella classe a quei tag HTML specifici che vogliamo rendere 18px.

Per esempio:

Questo testo sarà di 18 px.

Prendiamo ancora un minuto per spiegare tutti gli elementi di quel pezzo di codice CSS sopra:

  • .normale-text – definizione della classe; tutto dopo il nome della classe e tra parentesi aperte e chiuse {} definisce l’aspetto degli elementi assegnati a questa classe
  • dimensione del font – una proprietà CSS di esempio
  • 18px – un valore assegnato alla proprietà

Ci sono un sacco di proprietà CSS a parte quanto sopra dimensione del font. Ecco il elenco completo se sei curioso.

4. Metti insieme un foglio di stile CSS

Un documento HTML è molto strutturale: ogni elemento ha il suo posto e l’ordine degli elementi è cruciale per la costruzione e l’aspetto finale della pagina Web in questione. Un documento CSS è molto meno.

I documenti CSS sono spesso indicati come fogli di stile. Fondamentalmente, un foglio di stile CSS è un elenco di tutte le definizioni di classe utilizzate nel documento HTML corrispondente. L’ordine delle definizioni delle classi non è così cruciale per la maggior parte del tempo (almeno per i progetti semplici).

Il modo in cui metti insieme un foglio di stile CSS è definendo ciascuna classe una per una e quindi testando se il risultato nel design della tua pagina è quello che volevi.

Sembra un lavoro noioso, e lo è.

Ma ti renderemo le cose più facili e non ti forzeremo a imparare a mano il design HTML e CSS. Invece di insegnarti tutto da zero, prenderemo un organismo vivente e sezioneremo i suoi elementi.

È qui che entra in gioco una cosa chiamata Bootstrap.

5. Scarica / installa Bootstrap

Bootstrap è un toolkit open source per la creazione di un sito Web con HTML e CSS.

In parole povere, Bootstrap si occupa della struttura di base di un documento HTML e di un foglio di stile CSS per te. Fornisce un framework che assicura che il ponteggio principale della tua pagina web sia pronto e ottimizzato per un ulteriore sviluppo.

Fondamentalmente, Bootstrap ti consente di non iniziare da zero, e invece andare direttamente nella parte divertente. Con esso, non devi lavorare sulle prime fasi spesso noiose della creazione di un sito Web con HTML e CSS.

Ci sono due percorsi che puoi seguire:

  • Opzione (un): impara Bootstrap: vai alla homepage di Bootstrap, scarica il pacchetto Bootstrap principale e inizia a crearlo sopra.
  • Opzione (B): prendi una scorciatoia – ottieni uno starter pack per Bootstrap con un design accattivante e una pagina web demo già costruita.

Opzione (un) potrebbe avere una curva di apprendimento all’inizio, ma non è in alcun modo il modo peggiore di avvicinarsi alla creazione di un sito Web con HTML e CSS. Una volta padroneggiata la struttura principale di Bootstrap, potrebbe essere più semplice creare nuove pagine e farle apparire esattamente come le desideri. Il Documentazione Bootstrap è un ottimo posto per iniziare con questo percorso.

Andremo con Opzione (B) per questa guida. Lo stiamo facendo per un paio di motivi, il principale dei quali:

Iniziare con una struttura già pronta fa risparmiare molto dolore nel cercare di capire le necessità di base di un documento HTML. Ciò ti consente di concentrarti su cose interessanti, come la disposizione dei contenuti e il loro aspetto.

In breve, apprendere le cose in questo modo ti darà un risultato di bell’aspetto più veloce, che supponiamo sia quello che vuoi.

6. Scegli un disegno

Quando crei un sito Web con HTML e CSS, sei libero di utilizzare qualsiasi modello Bootstrap che ti piace. Dovrebbero funzionare tutti in modo abbastanza simile.

Tuttavia, per questa guida, utilizzeremo uno dei modelli di Avvia Bootstrap. Hanno una buona selezione di modelli gratuiti che sono ottimizzati, funzionano senza problemi e sono anche molto ben progettati.

Si chiama il tema che useremo Creativo. L’effetto finale che cercheremo sarà simile a questo:

homepage finale dopo aver creato un sito Web con HTML e CSS

Per iniziare, il modello Creativo, fare clic su Download gratuito pulsante che si trova sulla destra (attivato questa pagina) e salva il pacchetto zip sul desktop.

Decomprimi il pacchetto e sposta il suo contenuto nella directory principale del tuo server web locale o del tuo account di web hosting.

Ora apri quella posizione tramite il tuo browser. Vedrai la versione stock del modello:

avviare il modello bootstrap

È già abbastanza bello, ma ora è tempo di imparare come usare HTML e CSS per trasformarlo esattamente in quello che vuoi che sia.

7. Personalizza il tuo sito Web con HTML e CSS

Lavoriamo prima sulla home page del design. Questo ci mostrerà come sostituire la grafica, i testi e mettere a punto tutto in generale.

Abbiamo parlato brevemente della sezione principale di un documento HTML sopra. Diamo un’occhiata più approfondita qui.

Quando apri il file index.html file del tuo sito Bootstrap in Sublime Text, vedrai una sezione head come questa (abbiamo rimosso tutte le cose non cruciali da questo codice per chiarezza *):






Creativo: avvia il tema Bootstrap





* Oltre a quanto sopra, c’era anche il codice per caricare Google Fonts, icone Font Awesome e un modulo lightbox per le immagini visualizzate sulla pagina.

La maggior parte delle dichiarazioni qui lo sappiamo già, ma ce ne sono alcune nuove:

  • Prima di tutto, tutto tra parentesi è un commento HTML. Non viene visualizzato nella pagina finale.
  • – è uno dei tag di dichiarazione di Bootstrap. Definisce le dimensioni del viewport del sito Web.
  • – questa riga carica il foglio di stile CSS del modello creativo e contiene anche il foglio di stile predefinito di Bootstrap.

Modifichiamo quest’ultima dichiarazione – la riga che carica il CSS – per semplificare il lavoro in seguito.

Cambia quella riga in:


Questa è solo una piccola differenza: caricherà la versione non abbreviata dello stesso foglio CSS. Questa versione è semplicemente più semplice da modificare.

Ora scorri verso il basso fino alla fine del index.html file. Vedrai le seguenti righe subito prima della chiusura corpo etichetta:

        

Sono responsabili del caricamento di file JavaScript che gestiscono alcune delle interazioni più visive del progetto. Ad esempio, quando si fa clic su Di link nel menu in alto, verrai indirizzato senza problemi al blocco about nella stessa pagina – questo, tra le altre cose, viene eseguito tramite JavaScript. Non dobbiamo preoccuparci di comprendere questo codice in questo momento. Lasciamo questo per un’altra volta.

Invece, lavoriamo sull’aggiunta dei nostri contenuti alla pagina:

8. Aggiungi contenuti e immagini

La prima cosa che vorrai fare è cambiare il titolo della pagina.

1. Cambia il titolo

Trovare il titolo tag nella sezione head e sostituisci il testo tra i tag con qualcosa di tuo:

Il mio sito HTML

2. Personalizza la sezione Eroi

La sezione degli eroi è ciò che chiamiamo questo blocco:

sezione degli eroi

Sarebbe bello avere il nostro contenuto al suo interno. Per modificare questo blocco, torna al tuo index.html file e trova questa sezione:

...


...

Scopri di più

L’intero blocco di codice controlla ciò che è nella sezione degli eroi.

Ci sono alcuni nuovi tag qui:


  • – questo è un tag che definisce che l’intera sezione è l’intestazione della pagina; questo tag ha un paio di fratelli e sorelle sotto forma di
    tag e
    etichetta
  • – è un tag CSS generale che indica che ciò che segue è una sezione separata (aka divisione) nel documento HTML; il suo utilizzo semplifica la distinzione visiva delle singole sezioni della pagina

Noterai anche che alcuni degli altri tag (che già conosciamo) sembrano essere un po ‘più complessi, a cui sono assegnate più classi CSS. Per esempio:

...

Le classi assegnate al

il tag qui è testo maiuscolo testo-bianco carattere-peso-grassetto.

Queste classi sono state create da Bootstrap e dallo sviluppatore del tema Creative. La buona notizia è che anche tu puoi usarli liberamente durante la creazione di un sito Web con HTML e CSS.

Francamente, puoi personalizzare qualsiasi tag che aggiungi alla struttura della tua pagina assegnandogli un numero qualsiasi di classi.

Se si desidera visualizzare l’elenco completo delle classi disponibili, è possibile aprire il principale creative.css file che si trova nel file css sottodirectory del tema creativo.

Avere una comprensione di tutte queste classi all’inizio può sembrare intimidatorio, ma in realtà è molto più facile di quanto sembri.

Ad esempio, una delle classi assegnate ad alcuni dei paragrafi nel nostro index.html il file è font-weight-light. Quando salti in creative.css file e Ctrl + F cercando quel nome di classe, vedrai che imposta semplicemente il font-weight parametro così:

.font-weight-light {
peso carattere: 300;
}

Modifica dei testi predefiniti in index.html il file è molto semplice. Basta trovare il tag che si desidera modificare e cambiare ciò che è tra i tag di apertura e chiusura.

Ad esempio, per cambiare il titolo principale, basta cambiare questo:

Il tuo preferito ...

A qualcosa di simile al seguente:

Ammira il mio sito Web HTML!

Puoi fare lo stesso con tutti i paragrafi e gli altri tag della pagina.

L’importante è che puoi anche aggiungere nuovi paragrafi liberamente. Ad esempio, possiamo prendere il paragrafo che è già sulla pagina, crearne una copia e incollarlo proprio sotto il paragrafo originale; così:

Avviare Bootstrap can ...

Paragrafo 2

Ora, con la cura dei testi, sostituiamo l’immagine sullo sfondo.

Questo è un po ‘più complicato da fare in quanto richiede di andare nel file del foglio di stile CSS e di apportare le modifiche lì. Come puoi vedere nel codice HTML di colombiere sezione, nessun tag indicherebbe l’inclusione di un’immagine nella pagina in alcun modo. Questo è tutto fatto tramite CSS.

Quando dai un’altra occhiata all’intero blocco di codice che gestisce colombiere sezione, vedrai che è assegnato a una classe chiamata colombiere. Questa riga di codice gestisce l’assegnazione della classe:

Il colombiere la classe è quella che mette un’immagine sullo sfondo dell’intero blocco.

Apriamo il creative.css file di nuovo e cercare la classe “masthead”:

header.masthead {
imbottitura: 10rem;
padding-bottom: calc (10rem - 72px);
sfondo: gradiente lineare (in basso, rgba (92, 77, 66, 0,8) 0%, rgba (92, 77, 66, 0,8) 100%), url ("../ img / bg-masthead.jpg" );
posizione di sfondo: centro;
background-repeat: nessuna ripetizione;
sfondo-allegato: scroll;
dimensione dello sfondo: copertina;
}

Questo codice fa tutti i tipi di cose fantasiose alla nostra immagine (come aggiungere una sovrapposizione, ombreggiatura, ecc.), Ma la parte importante è questa: url ( "../ img / bg-masthead.jpg"). Questa è la linea che indica dove trovare l’immagine di sfondo. Sarà nel img sottodirectory.

Per cambiare questa immagine di sfondo, prendi qualsiasi tua immagine, copiala su img sottodirectory e quindi copia e incolla il suo nome al posto dell’originale bg-masthead.jpg file. In breve, cambia questo: url ( "../ img / bg-masthead.jpg") a questo: url ( "../ img / YOURFILE.jpg").

3. Personalizza gli altri blocchi nella pagina

Mentre attraversi il index.html file, noterai che ci sono già molte sezioni diverse nella pagina. Abbiamo una sezione per il navigazione, e di un blocco, alcuni Servizi, un’ portafoglio, un’ chiamare all’azione, un’ contatto blocco e a footer.

Sebbene ci siano contenuti diversi in tutte queste sezioni, le sezioni stesse hanno una struttura simile. Tutti hanno all’incirca lo stesso set di tag HTML – solo classi CSS diverse assegnate loro.

Il modo migliore per modificare la pagina in base alle proprie esigenze è di esaminare i blocchi uno per uno e sperimentare cambiando le cose.

Oltre a modificare i testi, puoi anche spostare intere sezioni (le parti tra i

tag). Certo, devi farlo a mano (tagliando e incollando gli elementi in posizione), è ancora semplice farlo.

Detto questo, ci sono due modifiche piuttosto basilari di cui non abbiamo ancora parlato. Vediamo ora questi:

9. Ottimizza colori e caratteri

Cambiare colori o caratteri è molto facile da fare in HTML e CSS. La cosa più semplice che puoi fare è assegnare uno stile in linea a un tag HTML. Per esempio:

Testo rosso

In HTML, i colori sono rappresentati dai loro valori esadecimali; “# FF0000” è rosso. Ecco una tabella di tutti gli altri colori standard.

Un modo migliore per assegnare i colori è farlo tramite il foglio di stile CSS. Ad esempio, per ottenere lo stesso effetto del codice sopra, possiamo inserirlo nel nostro foglio di stile CSS:

p.red {
colore: # FF0000;
}

E quindi usa il seguente pezzo di codice HTML nel documento principale:

Testo rosso

Questo secondo metodo è fondamentalmente come vengono fatte le cose in Bootstrap.

Per cambiare il colore di qualsiasi testo sulla pagina, trova prima il tag responsabile dello stile di quel testo, quindi vai nel foglio di stile e modifica la classe corrispondente o creane una nuova.

Ecco un esempio; dì che vuoi cambiare il colore dell’intestazione dicendo “Al tuo servizio”. Attualmente è nero e questo è il codice che lo gestisce:

Al tuo servizio

Per cambiarne il colore, il modo migliore è creare una nuova classe chiamata, diciamo, .text-arancio e imposta qui il valore del colore, in questo modo:

.text-orange {
colore: # f4623a! importante;
}

* Il !importante farà in modo che questa impostazione di colore sovrascriva qualsiasi altra impostazione di colore precedente.

Ora, possiamo tornare alla nostra intestazione e cambiare il suo codice in:

Al tuo servizio

Con queste modifiche, l’intestazione sarà ora arancione:

arancione h2

Per cambiare il carattere e le sue dimensioni, puoi fare qualcosa di molto simile. Ma prima, un esempio di come appare un blocco di definizione dei caratteri nei CSS:

.SOMECLASS {
famiglia di caratteri: "Merriweather", Roboto, sans-serif;
dimensione carattere: 18px;
}
  • carica caratteri Merriweather, Roboto, e un valore predefinito di sistema sans-serif font (leggi questo per informazioni sui font sicuri per il web)
  • imposta la dimensione del carattere su 18px

Questo tipo di definizione può essere inserito in qualsiasi classe CSS, proprio come la definizione di colore. In realtà, le definizioni di carattere e colore si trovano spesso nelle stesse dichiarazioni di classe.

Tornando al nostro esempio precedente, per modificare la dimensione del carattere per quell’intestazione che dice “Al tuo servizio”, potremmo prima creare una classe come questa:

.text-xxl {
dimensione carattere: 50px;
}

E quindi assegnare questa classe all’intestazione:

Al tuo servizio

�� Quando si modificano i colori o i caratteri nel modello creato da Bootstrap, esaminare innanzitutto nel foglio di stile CSS le classi che potrebbero già fornire dimensioni o colori alternativi. Usa quelli ove disponibili.

10. Creare pagine aggiuntive

Ora che hai personalizzato la home page, è tempo di iniziare a lavorare su alcune pagine aggiuntive e quindi collegarle alla home page.

Quando si crea un sito Web con HTML e CSS, è possibile creare un numero qualsiasi di sottopagine e collegarle tutte insieme.

Ecco alcune delle pagine comuni necessarie alla maggior parte dei siti Web:

  • sulla pagina
  • contatto
  • portafoglio
  • prodotti e servizi
  • squadra
  • politiche (politica sulla privacy, termini, ecc.)

1. Inizia con il layout

Quando costruisci una nuova pagina web, la prima decisione che devi prendere è ciò che vuoi che sia il layout.

Quando si crea un sito Web con HTML e CSS, nulla ti impedisce di creare qualunque cosa layout che desideri. L’unica difficoltà è effettivamente metterlo insieme.

HTML e CSS possono essere difficili da gestire quando si parte da uno schermo vuoto, quindi utilizzeremo anche Bootstrap qui. Innanzitutto, ti mostreremo alcuni principi per creare un layout e poi dimostreremo come farlo con Bootstrap.

Il modo in cui puoi pensare al layout della tua pagina web è considerarlo una sequenza di singoli blocchi, uno sopra l’altro. Qualcosa del genere (notare i quattro blocchi distinti):

il layout durante la creazione di un sito Web con HTML e CSS

La cosa grandiosa di Bootstrap è che gestisce i principi di layout di base e i dettagli di aspetto per te in modo che tu possa concentrarti solo sul mettere quei blocchi nei posti giusti.

In questa sezione della guida, creeremo una nuova pagina “informazioni”.

Per iniziare, creeremo solo un progetto di base del layout. Qualcosa di simile a quello sopra.

  • c’è un menu di navigazione in alto,
  • un blocco del titolo a larghezza intera sotto il menu,
  • la sezione principale del contenuto nel mezzo, inscatolata al centro dello schermo (non a larghezza intera),
  • e un piè di pagina.

Ora costruiamo questo layout in HTML.

2. Crea una nuova pagina

Il modo più semplice per iniziare a lavorare su una nuova pagina è duplicare una pagina esistente e usarla come modello. Questo è quello che faremo.

Crea una copia del index.html file e rinominarlo about.html.

Solo per rendere le pagine più facili da distinguere in questa fase iniziale, modifica il nuovo about.html file e modifica ciò che è nel file </code> etichetta. Per esempio, <code><title>A proposito di me.

Ora esaminiamo il file riga per riga e decidiamo cosa lasceremo e cosa rimuoveremo:

  • Il navigazione menu (sotto ). Probabilmente vuoi mantenere intatta questa sezione, solo per rendere l’esperienza di navigazione uniforme su tutte le pagine.
  • Il eroe principale sezione (sotto ). Questo non ci servirà secondo il nostro progetto di layout. Puoi andare avanti e cancellare l’intera sezione.
  • Il di sezione (sotto ). Riutilizzeremo questa sezione come blocco principale del titolo.
  • Il Servizi sezione, portafoglio sezione, chiamare all’azione sezione e contatto sezione (tutto tra e ). Non abbiamo assolutamente bisogno di queste sezioni. Puoi andare avanti e cancellarli.
  • Il footer sezione e tutto sotto (sotto ). Questo dovremo mantenere.

Questo rende il nostro codice attuale abbastanza semplice. Fondamentalmente è proprio questo:



























Quello che ci manca qui è il contenuto principale sezione. Per costruirlo, riutilizzeremo la sezione informazioni.

Vai avanti e fai una copia della sezione about. Questo:

...


...

Ora cambia le prime due righe in questo:

Dal momento che non abbiamo bisogno di

intestazione lì e il

elemento, rimuoviamoli e basta. L’unica cosa rimasta all’interno di questo intero blocco sarà un paragrafo di testo. Così:

Un paragrafo di testo.

Quando salvi il file e navighi attraverso il tuo browser, vedrai che in pratica hai due blocchi molto simili uno sotto l’altro, con lo stesso colore di sfondo:

sulla testa della pagina

Sarebbe meglio avere uno sfondo bianco nella sezione principale del contenuto. Per cambiarlo, l’unica cosa che dobbiamo fare è rimuovere il bg-primaria classe dalla principale

etichetta. In altre parole, trasforma il tag in questo:

Così va meglio:

sulla testa della pagina 2

Aggiungiamo alcuni paragrafi fittizi alla pagina per popolarla ancora un po ‘, più forse un sottotitolo:

Lorem ipsum dolor sit amet, consectetur adipiscing elit...

Proin fermentum, felis tempor pharetra lobortis, magna quam hendrerit dolor...

sottotitolo

Lorem ipsum dolor sit amet, consectetur adipiscing elit...

Ecco come appare sulla pagina:

circa ver 1

Se non desideri che il testo sia centrato, rimuovi semplicemente il text-center classe da uno dei

tag.

circa ver 2

Se vuoi dare un tocco in più a questi blocchi di testo, puoi creare nuove classi CSS (come prima) e assegnarle ai paragrafi nel blocco. Oppure, puoi dare un’occhiata al foglio di stile corrente e vedere quali classi sono già lì per questo scopo. Ecco quelli che abbiamo assegnato al

e

tags:

Lorem ipsum dolor sit amet...

Proin fermentum, felis tempor pharetra lobortis, magna quam hendrerit dolor...

sottotitolo

Ed ecco l’effetto:

circa ver 3

Un’altra cosa che faremo qui è aggiungere un’immagine da qualche parte nella pagina.

Ecco come appare un tag immagine di esempio in HTML:


Abbastanza semplice, vero? L’unico parametro è il percorso del file di immagine. Per mantenere le cose ben organizzate, puoi inserire la tua immagine in img directory di nuovo (proprio come hai fatto con quello sfondo qualche tempo fa). In tal caso, il tag immagine sarà:


Detto questo, il tag immagine in questa particolare configurazione è abbastanza limitato. Per renderlo un po ‘più raffinato, assegniamo alcune classi Bootstrap. Particolarmente:


Queste due classi daranno agli angoli arrotondati della tua immagine e assicureranno anche che la dimensione dell’immagine non superi la dimensione del blocco in cui si trova.

Ora puoi aggiungere un tag come questo da qualche parte nella sezione principale del contenuto della tua pagina di informazioni. Ad esempio, qui:

Lorem ipsum dolor sit amet...

Proin fermentum, felis tempor pharetra lobortis, magna quam hendrerit dolor...

sottotitolo

Ed ecco l’effetto finale sulla pagina:

circa ver 4

Ecco la nostra pagina sulle informazioni in tutto il suo splendore:

sulla pagina completa

3. Link alla nuova pagina

Una volta terminata la nuova pagina, collegiamola ora dalla home page (il index.html file). Naturalmente, il posto migliore per aggiungere questo link è nel menu di navigazione (sotto ).

In particolare, cerca questa linea:

Di

Lo cambieremo in questo:

Di

Questo è qualcosa di cui non abbiamo ancora parlato, ma il tag è un tag di collegamento in HTML. Usandolo, è possibile collegarsi a qualsiasi pagina Web fornendo l’indirizzo di quella pagina nel href parametro. Il testo del collegamento – la parte cliccabile del collegamento – sarà il testo tra l’apertura e la chiusura tag.

Quando aggiorni la home page ora, vedrai il tuo nuovo link che punta alla pagina delle informazioni.

Ulteriori letture:

In questa fase, ti sei praticamente costruito un semplice sito Web composto da due pagine: a homepage e un di pagina.

Quello che dovresti fare ora è risciacquare e ripetere creando nuove pagine, ottimizzandole, aggiungendole al contenuto e quindi collegando tutto dal menu di navigazione.

Altre cose che vale la pena fare mentre attraversi questi passaggi è apprendere ulteriormente i principi HTML e CSS, scorrere l’elenco di controllo e anche imparare Bootstrap e le sue strutture e classi. Alcune risorse per questo:

  • Cheat sheet HTML5
  • Foglio informativo CSS
  • Foglio cheat Javascript
  • Tutorial HTML
  • Tutorial Bootstrap
  • Foglio cheat Bootstrap

Padroneggiare Bootstrap, molto probabilmente il miglior percorso attualmente disponibile per creare siti Web ottimizzati e belli con HTML e CSS.

In caso di domande sulla creazione di un sito Web con HTML e CSS, non esitate a inviarli nei commenti.

Jeffrey Wilson Administrator
Sorry! The Author has not filled his profile.
follow me

    Like this post? Please share to your friends:
    Adblock
    detector
    map