Autore:
Laura McKinney
Data Della Creazione:
3 Aprile 2021
Data Di Aggiornamento:
1 Luglio 2024
Contenuto
HTML (HyperText Markup Language) è un linguaggio di base per la creazione di pagine web. È stato creato come un linguaggio di codifica facile e flessibile. Quasi tutti i siti Web su Internet sono sviluppati con una qualche forma di questo codice (ColdFusion, XML, XSLT). L'HTML è facile da capire, ma puoi continuare a impararlo per molto tempo se sei interessato alla sua funzionalità completa. Per aggiungere colore e divertimento al tuo sito web, puoi imparare CSS di base non appena ti abitui a una pagina HTML di base.
Passi
Parte 1 di 4: creazione di un documento
Apri un semplice editor di testo. NotePad è una buona opzione e può essere scaricato gratuitamente. È possibile scrivere HTML con la maggior parte degli editor di testo, ma un software più complesso con funzionalità di formattazione automatica può rendere difficile l'organizzazione della pagina HTML.
- Non utilizzare TextEdit, poiché di solito salva il file in un formato che il tuo browser potrebbe non riconoscere come HTML.
- Puoi anche utilizzare un editor HTML online. I programmi di editing HTML dedicati non sono consigliati ai principianti.
Salva un file come pagina web. Scegli File → Salva con nome nel menu in alto. Modificare il formato del file in "Pagina Web", ".html" o ".htm". Salva il file dove puoi trovarlo facilmente.- Non c'è differenza tra queste tre opzioni.
Apri il file in un browser. Fai doppio clic sul file e si aprirà automaticamente come una pagina web vuota nel tuo browser. In alternativa, puoi aprire un browser, come Firefox o Internet Explorer, quindi utilizzare File → Apri file per selezionare il documento.
- Questo sito non è in linea. È visualizzabile solo sul tuo computer.
Aggiorna la pagina web e guarda le modifiche apportate. Digita quanto segue nel documento vuoto: Ciao. Salva il documento. Aggiorna la pagina web vuota nel tuo browser e dovresti vedere la parola "Hello" in grassetto apparire nella parte superiore della pagina. Ogni volta che vuoi testare il tuo nuovo HTML durante questo tutorial, salva il documento .htm, quindi aggiorna la finestra del browser per vedere come viene compilato l'HTML.- Se vedi le parole ""e"'' Viene visualizzato nel browser, il file non è stato compilato correttamente in HTML. Prova un altro editor di testo o un altro browser.
Impara i tag. I comandi HTML sono scritti in "tag" che indicano al browser come compilare e visualizzare la tua pagina web. Sono sempre scritti tra virgolette singolee non vengono visualizzati nella pagina Web come li hai utilizzati nell'esempio precedente: - è una "carta di partenza" o "carta di apertura". Qualsiasi cosa scritta dopo questo tag verrà definita come "grassetto" (grassetto su una pagina web).
- è un "tag di fine" o "tag di chiusura", che puoi distinguere dal simbolo / segno. Denota la fine del testo in grassetto. La maggior parte (non tutti) i tag richiedono un tag di fine per funzionare, quindi assicurati di includerlo.
Costruisci il tuo documento. Elimina tutto nel tuo documento HTML. Ricomincia con il testo seguente, esattamente come è stato scritto (meno i punti elenco). Questo codice HTML dice al browser che tipo di HTML stai utilizzando e che tutto il tuo HTML verrà inserito all'interno dei tag. e .
Aggiungi i tag head (head) e body (body). I documenti HTML sono divisi in due parti. La sezione "in alto" è per informazioni speciali, come il titolo della pagina. La sezione "body" contiene il contenuto principale della pagina. Aggiungi entrambe queste sezioni al tuo documento e ricorda di includere i tag finali. Il testo appena aggiunto è in grassetto:
Dai un titolo alla tua pagina. La maggior parte delle carte nella sezione della testa non sono importanti per imparare con un principiante. Il tag del titolo è facile da usare, tuttavia, e determinerà ciò che verrà visualizzato come il nome della finestra del browser o nella scheda del browser. Posiziona i tag di inizio e fine del titolo all'interno dei tag head e scrivi le intestazioni che ti piacciono tra questi tag:
La mia prima pagina HTML.
Parte 2 di 4: formattazione del testo
Aggiungi testo al tuo corpo. Per questa sezione, lavoreremo solo con i tag del corpo. L'altro testo sarà ancora nel tuo documento, ma risparmieremo spazio non ripetendolo in questo tutorial. Scrivi quello che vuoi tra le carte e e apparirà come primo contenuto della tua pagina. Per esempio:
- Ho seguito le istruzioni di wikiHow per scrivere una pagina HTML.
Aggiungi intestazioni per il testo. Organizza la tua pagina con i tag di intestazione, che istruiscono il browser a visualizzare il testo tra di loro con una dimensione del carattere più grande. Questi tag vengono utilizzati anche dai motori di ricerca e da altri strumenti per determinare di cosa tratta il tuo sito web e come è organizzato.
è l'intestazione più grande e puoi creare intestazioni più piccole fino a
. Provali sulla tua pagina:Benvenuto nella mia pagina.
- Ho seguito le istruzioni di wikiHow per scrivere una pagina HTML.
Il mio obiettivo oggi:
Obiettivi completati:
- Impara a usare i titoli.
Obiettivi incompleti:
- Ulteriori informazioni sui tag di formattazione del testo.
Ulteriori informazioni sui tag di formattazione del testo. Hai già visto il tag "strong", ma ci sono molti altri modi per formattare il tuo testo. Prova questi tag o con più tag contemporaneamente per la stessa stringa di testo. Ricordati di aggiungere i tag finali nella parte posteriore!
- Testo importante, visualizzato in grassetto nel browser.
- Testo enfatizzato, visualizzato in corsivo nel browser.
- Testo un po 'più piccolo del solito. Questo testo verrà ridimensionato automaticamente se utilizzato in un'intestazione.
Il testo non è più pertinente, visualizzato con un trattino sul corpo.- Il testo viene inserito più tardi rispetto ad altri documenti, visualizzato con sottolineature.
Organizza il testo sulla tua pagina. Avrai notato che la pressione del tasto "invio" non è sufficiente per far apparire il testo su un'altra riga. Questi tag possono aiutarti a creare paragrafi e interruzioni di riga o a organizzare il testo in altri modi:
Abbreviazione di "paragrafo", il tag (paragrafo) manterrà tutto il testo tra questi tag in un paragrafo e lo separerà dal testo sopra e sotto di esso.
Questo tag genererà interruzioni di riga. Non aggiungere un tag di fine ad esso, poiché non interferisce con nessun altro contenuto. Usa questo tag nelle poesie o nelle righe degli indirizzi, non nei paragrafi.Se devi visualizzare il testo in modo molto accurato, questo tag imposta il testo al suo interno su un carattere a larghezza fissa (ogni lettera ha la stessa larghezza) e ti consente di creare intervalli Spazi vuoti e interruzioni di riga a piacere per la modifica regolare invece dei tag.
Questo tag definisce il tipo di testo da citare nuovamente da una fonte.
Puoi descrivere la fonte in seguito con cita carta.
Aggiungi il testo della didascalia invisibile. I tag di commento non vengono visualizzati sulla pagina web. Ti consentono di annotare te stesso nel documento HTML senza influire sul contenuto. Non aggiungere un tag di fine.
- Le carte che vanno da sole senza etichette finali sono chiamate "etichette vuote".
Combinali insieme. Il modo migliore per ricordare questi tag è utilizzarli sul tuo sito web. Ecco un esempio che utilizza le carte nei passaggi che hai imparato finora. Prova a prevedere come verranno visualizzati nel browser, quindi copiali nel tuo documento e scoprilo. annuncio pubblicitario
Parte 3 di 4: aggiunta di collegamenti e immagini
Informazioni sugli attributi. I tag possono contenere informazioni aggiuntive scritte al loro interno, chiamate attributi. Questi attributi sono rappresentati da parole aggiuntive all'interno dei tag stessi, nel modulo nome proprietà = "valore specifico". Ad esempio, qualsiasi tag HTML può avere l'attributo title:
Il paragrafo introduttivo è qui.
Intitola il paragrafo "Introduzione", che apparirà quando passi il mouse sopra il paragrafo nella pagina web.
Collegamenti ad altri siti web. Uso delle carte per creare un collegamento ipertestuale a qualsiasi altra pagina web. Inserisci l'URL della pagina web a cui collegarti utilizzando l'attributo href. Ecco un esempio che collega alla pagina web che stai leggendo:
Aggiungi un attributo id al tag. Un altro attributo che può utilizzare qualsiasi tag HTML è l'elemento "id". In qualsiasi carta, scrivi id = "vidu" o utilizzare qualsiasi nome che non contenga spazi. Non produce alcun effetto visibile, ma lo useremo nel passaggio successivo.
- Ad esempio, aggiungi quanto segue al tuo documento:
Questo paragrafo è usato come esempio per descrivere come funziona l'attributo id.
- Ad esempio, aggiungi quanto segue al tuo documento:
Collegamento a un elemento con un determinato ID. Ora possiamo usare il tag collegamento ipertestuale, , per collegarsi a un'altra posizione sulla stessa pagina. Invece di un URL, useremo il simbolo #, seguito dal valore id a cui vogliamo collegarci. Per esempio, Questo testo si collegherà al testo con l'id "vidu".
- Tutti i valori HTML fanno distinzione tra maiuscole e minuscole. "#VIDU" e "#vidu" si collegheranno entrambi alla stessa posizione.
- Se la tua pagina è abbastanza breve da visualizzare l'intera pagina in una volta, probabilmente non noterai nulla facendo clic su un collegamento nel tuo browser. Ridimensionare la finestra finché non viene visualizzata la barra di scorrimento, quindi riprovare.
Aggiungi foto. Carta
è un tag vuoto, il che significa che non è necessario alcun tag di fine. Tutte le informazioni necessarie al browser per visualizzare l'immagine vengono aggiunte utilizzando gli attributi. Ecco un esempio per visualizzare il logo wikiHow, con una descrizione per ogni attributo dietro:
- Proprietà src = "" dice al browser dove si trova la foto. (Tieni presente che pubblicare una foto dal sito di qualcun altro è considerato inappropriato e la foto scomparirà quando la pagina non sarà più attiva.)
- Proprietà style = "" Può fare molte cose, ma soprattutto è usato per impostare la larghezza e l'altezza di un'immagine in pixel. (Puoi anche utilizzare gli attributi separati width = "" e height = "", ma questo può portare a strani problemi di ridimensionamento se usi CSS.)
- Proprietà alt = "" è una breve descrizione dell'immagine che l'utente vedrà se l'immagine non è stata caricata. Questo è considerato un requisito, poiché viene utilizzato per gli screen reader per i visitatori del sito Web non vedenti.
Parte 4 di 4: Ulteriori informazioni Aggiunta e messa in linea del sito Web
Conferma il tuo HTML. La convalida HTML verifica la presenza di errori nel codice. Se il tuo sito non viene visualizzato correttamente, la convalida può aiutarti a trovare l'errore che causa il problema. Può anche insegnarti di più sull'HTML determinando che il codice ha un bell'aspetto in mostra, ma non è più consigliato a causa dei nuovi aggiornamenti nello standard HTML. L'utilizzo di HTML non valido non rende il tuo sito inutile, ma potrebbe causare problemi o essere instabile su browser diversi.
- Prova un servizio di convalida online gratuito dal W3C o cerca un altro strumento di convalida HTML 5 online.
Ulteriori informazioni su tag e attributi. Esistono molti altri tag e attributi HTML e molti posti per apprenderli:
- Prova w3schools e HTML Dog per ulteriori tutorial e elenchi completi di tag.
- Trova una pagina web che ti piace come appare, quindi utilizza la funzione "Visualizza sorgente pagina" del tuo browser per ottenere tu stesso il codice HTML. Copialo nel tuo documento e studia come funziona.
- Leggi altri articoli e scopri come creare tabelle in HTML, utilizzare i meta tag per aumentare le possibilità di trovarli tramite i motori di ricerca o utilizzare una divisione. specificare un'area sulla pagina) e span (usato per specificare lo stile dell'elemento di testo) per aiutare lo stile tramite CSS.
Porta il tuo sito web online. Scegli un servizio per ospitare il tuo sito Web, quindi puoi caricare tutte le pagine HTML che desideri sul tuo dominio web personale. Per fare ciò, dovrai utilizzare un software di caricamento FTP, ma anche molti servizi di noleggio web offrono questo servizio.
- Quando ti colleghi a pagine o immagini che si trovano direttamente sul tuo sito, dovrai utilizzare l'indirizzo completo. Ad esempio, se il tuo nome di dominio è www.chuyengiahtmlsieudang.com, allora il testo è in questi tag si collegherà a "www.chuyengiahtmlsieudang.com/nhatky/thuhai.html"
Aggiungi stili con CSS. Se la tua pagina HTML sembra un po 'monotona, prova ad apprendere le basi del CSS per aggiungere colori, caratteri diversi e un migliore controllo sulla posizione degli elementi. Il collegamento di un "foglio di stile" CSS a una pagina HTML ti consentirà di apportare drastiche modifiche al volo, regolando automaticamente lo stile di tutto il testo all'interno di un dato tag. Puoi giocare un po 'con il livello di formattazione di base qui, o approfondire di più con un tutorial più dettagliato nel tutorial CSS di HTML Dog.
Aggiungi JavaScript al tuo sito web. JavaScript è un linguaggio di programmazione utilizzato per aggiungere molte funzionalità alle tue pagine HTML. I comandi JavaScript vengono inseriti tra i tag di inizio e di fine e può essere utilizzato per aggiungere pulsanti interattivi, calcolare problemi di matematica e altro ancora. Scopri di più negli esempi w3c. annuncio pubblicitario
Consigli
- La dichiarazione doctype (Document Type Declaration usata) usata in questo tutorial è "loose HTML 4.0.1 transitional" (HTML 4.0.1 non tight transitional), un formato semplice. per i principianti da usare. Uso () un'alternativa al fatto che il browser lo compili in un formato HTML 5 rigoroso, che è lo stile standard consigliato (anche se meno comunemente usato).
avvertimento
- Lo scopo dell'HTML è mantenere il contenuto in un formato globale. Non ha alcun controllo sulla presentazione del tuo sito web, come il colore di sfondo e l'esatta posizione degli elementi. Sebbene ci siano ancora tag che ti consentono di farlo, è una buona idea usare CSS per creare un sito web più controllabile e coerente.
Quello di cui hai bisogno
- Un semplice editor di testo, come NotePad o TextEdit
- Un browser web, come Internet Explorer o Mozilla Firefox
- (Facoltativo) Un editor HTML come Adobe Dreamweaver, Aptana Studio o Microsoft Expression Web
