Pagina Web Bare Bones: 10 passaggi

2024 Autore: John Day | [email protected]. Ultima modifica: 2024-01-30 10:04

Oggi creeremo da zero una pagina web molto semplice e essenziale. Parleremo degli elementi HTML, dello stile della tua pagina web (colori, caratteri, allineamento, ecc.) e infine di come inserire un'immagine nella tua pagina web!

Alla fine di questo tutorial, avrai le competenze di base per creare una pagina web da zero e scoprirai che la codifica non è così difficile come sembra!

Passaggio 1: utilizzo del Blocco note

Useremo Blocco note su Windows per creare la nostra prima pagina web. Anche se qualsiasi editor di testo andrà bene, il blocco note è preinstallato sui computer Windows, quindi è un ottimo punto di partenza.

Per aprire il blocco note, vai alla barra di ricerca nell'angolo in basso a sinistra dello schermo e digita "Blocco note". Quindi seleziona l'applicazione "Blocco note" che compare nei risultati della ricerca. Dovrebbe aprirsi una nuova finestra.

Passaggio 2: aggiunta dell'albero del documento HTML di base

Tutte le pagine web devono seguire una struttura scheletrica standard affinché il tuo browser web (Chrome, Firefox, Edge, Internet Explorer, Safari…) elabori e visualizzi la tua pagina web.

Questo è chiamato albero del documento html. Nel Blocco note, digita gli "elementi" o i "tag" html come visualizzato nella schermata. Sentiti libero di copiare e incollare anche:

Passaggio 3: salvataggio come pagina.html

Ora che abbiamo la nostra struttura html di base in Blocco note, salviamola in modo da non perdere alcun lavoro e in modo che possiamo vedere le nostre modifiche mentre avanziamo lungo Instructable.

1. Seleziona 'File' > 'Salva con nome…' (Screenshot 1)
2. Cambia il tipo di file in "Tutti i file" (schermata 2)
3. Dai al tuo file un nome a tua scelta. Assicurati di annotare dove stai salvando il documento sul tuo computer in modo da poterlo aprire in seguito. NOTA: la parte più importante del salvataggio di questo file è aggiungere ".html" alla fine del nome del file. Ciò consentirà al tuo computer di riconoscerlo come una pagina web. Quindi, se vuoi nominare il tuo file "my_webpage", assicurati di aggiungere.html alla fine, ad es. "mia_pagina web.html"

Passaggio 4: aggiunta di un titolo alla tua pagina Web

Quindi abbiamo la struttura html di base necessaria ai browser Web per interpretare e visualizzare la nostra pagina Web, ma non abbiamo alcun contenuto. Cambiamo quello!

La prima cosa che dovremmo fare è dare un titolo alla nostra pagina web. Quasi tutte le pagine web hanno un titolo. Questo è ciò che viene visualizzato nella scheda del tuo browser web (vedi screenshot). Darò alla mia pagina web il titolo "Sito web di Taylor". Per fare ciò, dobbiamo aggiungere un elemento 'title'.

Sito web di Taylor

A questo punto noterai che ogni tag ha un tag di "apertura" e un tag di "chiusura". Come

e.

Questo per discernere dove inizia il titolo e dove finisce. Quasi tutti i tag html seguono questo, tuttavia ci sono alcune eccezioni.

Passaggio 5: aggiunta di contenuti alla tua pagina Web

Bene, abbiamo un titolo per la nostra pagina web, ma non abbiamo ancora alcun contenuto effettivo per esso. Aggiungiamo un po' di stile!

Abbiamo aggiunto un titolo alla nostra pagina web utilizzando un elemento 'titolo'. Diamo alla nostra pagina web un'intestazione grande e che attiri l'attenzione utilizzando un elemento 'h1' che è un elemento di intestazione.

Sito web di Taylor

Benvenuti nella mia pagina web

Passaggio 6: visualizzazione delle nostre modifiche fino ad ora

Abbiamo un titolo, abbiamo alcuni contenuti, diamo un'occhiata alla nostra pagina web per sapere come sta arrivando finora.

1. Salva il tuo file nel blocco note
2. Vai dove hai salvato il file e fai doppio clic su di esso. Dovrebbe aprirsi automaticamente nel browser Web predefinito. Guardando bene!

Passaggio 7: aggiunta di un tag di paragrafo

Abbiamo un titolo, un'intestazione, ora aggiungiamo un paragrafo con altro testo. Il nome dell'elemento per un paragrafo è 'p'. Puoi vedere il suo utilizzo di seguito:

Sito web di Taylor

Benvenuti nella mia pagina web

Oggi impareremo come creare questa semplicissima pagina web!

Nota: puoi visualizzare le modifiche in qualsiasi momento salvando il blocco note e aprendo il file.

Passaggio 8: dagli un po' di colore

Abbiamo la nostra pagina web in movimento, ma è piuttosto semplice. Diamo un po' di colore al nostro tag di paragrafo!

Possiamo colorare diversi elementi aggiungendo un attributo 'stile' al tag 'p' come descritto di seguito:

Sito web di Taylor

Benvenuti nella mia pagina web

Oggi impareremo come creare questa semplicissima pagina web!

Passaggio 9: aggiunta di un'immagine

Cos'è un sito web senza immagini? Aggiungiamo una foto al nostro sito!

Il primo passo è trovare un'immagine che ti piace. Ho usato google immagini per cercare un golden retriever. Tira l'immagine verso l'alto e assicurati che l'URL termini con.jpg,.png,.gif,.jpg, ecc.

Una volta scelta l'immagine, dobbiamo aggiungerla alla pagina html utilizzando un tag 'img'. La mia immagine è:

Aggiungilo alla tua pagina usando un tag 'img' con un attributo 'src':

Sito web di Taylor

Benvenuti nella mia pagina web

Oggi impareremo come creare questa semplicissima pagina web!

Passaggio 10: visualizzazione del prodotto finale

Salva il file del blocco note e apri il prodotto finale. Dovresti vedere la tua pagina web!