Home-theater-designers
Anche se i siti web moderni sono generalmente costruiti con interfacce user-friendly, è utile conoscere un po' di HTML di base. Se conosci i seguenti 17 tag di esempio HTML (e alcuni extra), sarai in grado di creare una pagina web di base da zero o modificare il codice creato da un'app come WordPress.
Abbiamo fornito esempi di codice HTML con output per la maggior parte dei tag. Se vuoi vederli in azione, scarica il file HTML di esempio alla fine dell'articolo. Puoi giocarci in un editor di testo e caricarlo in un browser per vedere cosa fanno le tue modifiche.
1.
Avrai bisogno di questo tag all'inizio di ogni documento HTML che crei. Assicura che un browser sappia che sta leggendo HTML e che si aspetta HTML5, l'ultima versione.
Anche se questo non è in realtà un tag HTML, è comunque utile saperlo.
2.
Questo è un altro tag che dice a un browser che sta leggendo HTML. Il tag va subito dopo il tag DOCTYPE e lo chiudi con un tag proprio alla fine del tuo file. Tutto il resto nel tuo documento va tra questi tag.
3.
Il tag inizia la sezione di intestazione del tuo file. Le cose che vanno qui non vengono visualizzate sulla tua pagina web. Invece, contiene metadati per i motori di ricerca e informazioni per il tuo browser.
Per le pagine di base, il tag conterrà il tuo titolo, e questo è tutto. Ma ci sono alcune altre cose che puoi includere, che esamineremo tra un momento.
Quattro.
Questo tag imposta il titolo della tua pagina. Tutto quello che devi fare è inserire il tuo titolo nel tag e chiuderlo, in questo modo (ho incluso anche i tag di intestazione, per mostrare il contesto):
My Website
Questo è il nome che verrà visualizzato come titolo della scheda quando viene aperta in un browser.
5.
Come il tag del titolo, i metadati vengono inseriti nell'area dell'intestazione della tua pagina. I metadati vengono utilizzati principalmente dai motori di ricerca e sono informazioni su cosa c'è nella tua pagina. Esistono diversi metacampi, ma questi sono alcuni dei più comunemente usati:
- descrizione : Una descrizione di base della tua pagina.
- parole chiave : una selezione di parole chiave applicabili alla tua pagina.
- autore : l'autore della tua pagina.
- viewport : Un tag per garantire che la tua pagina abbia un bell'aspetto su tutti i dispositivi.
Ecco un esempio che potrebbe applicarsi a questa pagina:
Il tag 'viewport' dovrebbe sempre avere 'width=device-width, initial-scale=1,0' come contenuto per assicurarsi che la pagina venga visualizzata correttamente su dispositivi mobili e desktop.
6.
Dopo aver chiuso la sezione dell'intestazione, si arriva al corpo. Lo apri con il tag e lo chiudi con il tag. Questo va proprio alla fine del tuo file, appena prima del tag.
Tutto il contenuto della tua pagina web va tra questi tag. È semplice come sembra:
Everything you want displayed on your page.
7.
Intestazione leggermente meno grande
Sottotitolo
Risultato:
Come puoi vedere, diventano più piccoli ad ogni livello.
8.
Il tag di paragrafo inizia un nuovo paragrafo. Questo di solito inserisce due interruzioni di riga.
Guarda, ad esempio, l'interruzione tra la riga precedente e questa. questo è quello che
tag farà.
Your first paragraph.
Your second paragraph.
Risultato:
Il tuo primo paragrafo.
Il tuo secondo paragrafo.
Puoi anche usa gli stili CSS nei tag di paragrafo, come questo che cambia la dimensione del testo:
This is 50% larger text.
Risultato:
9.
Il tag di interruzione di riga inserisce una singola interruzione di riga:
The first line.
The second line (close to the first one).
Risultato:
Lavorare in modo simile è il
etichetta. Questo disegna una linea orizzontale sulla tua pagina ed è utile per separare sezioni di testo.
10.
Questo tag definisce il testo importante. In generale, ciò significa che sarà audace. Tuttavia, è possibile utilizzare i CSS per creare il testo viene visualizzato in modo diverso.
come associare gli airpod ad Android?
Tuttavia, puoi tranquillamente usare al testo in grassetto.
Very important things you want to say. Risultato:
Cose molto importanti che vuoi dire.
Se conosci il tag per il testo in grassetto, puoi ancora usarlo. Non c'è alcuna garanzia che continuerà a funzionare nelle versioni future di HTML, ma per ora funziona.
undici.
Piace e , e sono correlati. Il tag identifica il testo enfatizzato, il che generalmente significa che sarà in corsivo. Di nuovo, c'è la possibilità che i CSS facciano visualizzare il testo enfatizzato in modo diverso.
An emphasized line. Risultato:
Una linea enfatizzata.
Il tag funziona ancora, ma di nuovo, è possibile che venga deprecato nelle versioni future dell'HTML.
12.
Il , o anchor, tag ti consente di creare collegamenti. Un semplice collegamento assomiglia a questo:
Vai a MUO L'attributo 'href' identifica la destinazione del collegamento. In molti casi, questo sarà un altro sito web. Potrebbe anche essere un file, come un'immagine o un PDF.
Altri attributi utili includono 'target' e 'title'. L'attributo target viene utilizzato quasi esclusivamente per aprire un collegamento in una nuova scheda o finestra, in questo modo:
Go to MUO in a new tab Risultato:
L'attributo 'title' crea un tooltip. Passa il mouse sul link sottostante per vedere come funziona:
Hover over this to see the tool tip Risultato:
Passa il mouse sopra per vedere il suggerimento
13. ![]()
Se desideri incorporare un'immagine nella tua pagina, dovrai utilizzare il tag immagine. Normalmente lo utilizzerai insieme all'attributo 'src'. Questo specifica l'origine dell'immagine, in questo modo:
Risultato:
come creare un pacchetto di adesivi per telegramma
Sono disponibili altri attributi, come 'altezza', 'larghezza' e 'alt'. Ecco come potrebbe apparire:
Come ci si potrebbe aspettare, gli attributi 'height' e 'width' impostano l'altezza e la larghezza dell'immagine. In generale, è una buona idea impostarne solo uno in modo che l'immagine venga ridimensionata correttamente. Se usi entrambi, potresti ritrovarti con un'immagine allungata o schiacciata.
Il tag 'alt' dice al browser quale testo visualizzare se l'immagine non può essere visualizzata ed è una buona idea includerla con qualsiasi immagine. Se qualcuno ha una connessione particolarmente lenta o un vecchio browser, può ancora farsi un'idea di cosa dovrebbe essere nella tua pagina.
14.
Il tag dell'elenco ordinato consente di creare un elenco ordinato. In generale, ciò significa che otterrai un elenco numerato. Ogni elemento nell'elenco ha bisogno di un tag dell'elemento dell'elenco (
), quindi la tua lista sarà simile a questa:
- First thing
- Second thing
- Third thing
Risultato:
- Prima cosa
- Seconda cosa
- Terza cosa
In HTML5, puoi usare
per invertire l'ordine dei numeri. E puoi impostare il valore iniziale con l'attributo start. L'attributo 'tipo' ti permette di dire al browser quale tipo di simbolo usare per gli elementi della lista. Può essere impostato su '1,' 'A,' 'a,' 'I' o 'i', impostando la visualizzazione dell'elenco con il simbolo indicato in questo modo:
quindici.
L'elenco non ordinato è molto più semplice della sua controparte ordinata. È semplicemente un elenco puntato.
- First item
- Second item
- Third item
Risultato:
- Primo elemento
- Secondo elemento
- Terzo elemento
Gli elenchi non ordinati hanno anche attributi 'tipo' e puoi impostarli su 'disco', 'cerchio' o 'quadrato'.
16.
Sebbene l'utilizzo di tabelle per la formattazione sia disapprovato, ci sono molte volte in cui vorrai utilizzare righe e colonne per segmentare le informazioni sulla tua pagina. Sono necessari diversi tag per far funzionare una tabella. Ecco il codice HTML di esempio:
1st column
2nd column
Row 1, column 1
Row 1, column 2
Row 2, column 1
Row 2, column 2
Il
e
i tag specificano l'inizio e la fine della tabella. Iltag contiene tutto il contenuto della tabella. Ogni riga della tabella è racchiusa tra a
etichetta. Ogni cella all'interno di ogni riga è racchiusa in uno dei duetag per le intestazioni di colonna, oppure tag per i dati delle colonne. Hai bisogno di uno di questi per ogni colonna su ogni riga. Risultato:
1a colonna 2a colonna Riga 1, colonna 1 Riga 1, colonna 2 Riga 2, colonna 1 Riga 2, colonna 2
17.
Quando stai citando un altro sito web o una persona e vuoi distinguere la citazione dal resto del tuo documento, usa il tag blockquote. Tutto quello che devi fare è racchiudere la citazione nei tag di apertura e chiusura di blockquote:
The Web as I envisaged it, we have not seen it yet. The future is still so much bigger than the past.
Risultato:
Il Web come lo immaginavo, non l'abbiamo ancora visto. Il futuro è ancora molto più grande del passato.
La formattazione esatta utilizzata può dipendere dal browser che stai utilizzando o dal CSS del tuo sito. Ma il cartellino rimane lo stesso.
Esempi di codice HTML
Con questi 17 esempi HTML, dovresti essere in grado di creare un semplice sito web. Puoi testarli tutti in questo momento in un editor di testo online per avere un'idea di come funzionano.
Per lezioni più brevi in HTML, prova alcune app di microlearning per la codifica. Ti aiuteranno a diventare più veloce in pochissimo tempo.
Condividere Condividere Tweet E-mail Vuoi imparare la programmazione di base? Prova 5 app di codifica di dimensioni ridotte nel tuo tempo libero Vuoi imparare la programmazione di base ma hai poco tempo? Queste app di codifica di dimensioni ridotte occuperanno solo pochi minuti della tua giornata impegnativa.
Leggi Avanti Argomenti correlati - Programmazione
- Wordpress
- HTML
- Sviluppo web
- Tutorial sulla programmazione
Circa l'autore Andy Betts(221 articoli pubblicati) Andy è un ex giornalista cartaceo ed editore di riviste che scrive di tecnologia da 15 anni. In quel periodo ha contribuito a innumerevoli pubblicazioni e prodotto lavori di copywriting per grandi aziende tecnologiche. Ha anche fornito commenti di esperti per i media e ha ospitato panel in occasione di eventi del settore.
Altro da Andy BettsIscriviti alla nostra Newsletter
Iscriviti alla nostra newsletter per suggerimenti tecnici, recensioni, ebook gratuiti e offerte esclusive!
Clicca qui per iscriverti