Come creare una pagina HTML: istruzioni passo-passo, tecnologia e consigli
Pensi come creare una pagina HTML? Per fare ciò, è necessario dedicare alcune ore e conoscerai le basi dell'HTML. E puoi creare la tua prima pagina in 5 minuti.
HTML sta per HyperText Markup Language. In traduzione, questo significa "linguaggio di markup ipertestuale". È importante capire che l'HTML non è un linguaggio di programmazione, ma un markup del sito web.
Tutti i browser moderni possono riconoscerlo. Quindi visualizzano le informazioni in modo conveniente per l'utente, come precedentemente pianificato dall'autore.
In questa lingua, vengono utilizzati tag speciali. Ogni tag svolge la sua funzione. Ce ne sono molti. Idealmente, devi imparare tutto. Ma per un principiante la conoscenza di base è sufficiente.
Nozioni di base HTML
Prima di creare una pagina HTML, devi sapere di cosa è fatta. In questa lingua ci sono due concetti: un elemento e un tag.
Per specificare dove questo elemento inizia e si chiude, usa il tag di apertura e chiusura. Sembra così.
<tag apertura> contenuto </ chiusura tag>
Come puoi vedere, i tag di apertura e chiusura differiscono solo in "/".
L'intero documento HTML è una raccolta di questielementi. Ci sono determinati requisiti per la struttura del documento. Tutto il contenuto della pagina deve essere tra due tag <html> e </ html>. Quando scrivi il codice, prendi l'abitudine di impostare immediatamente il tag di apertura e chiusura.
Ricorda inoltre che la struttura del linguaggio HTML ha una sua gerarchia. Altrimenti si chiama nidificazione. Il tag HTML è il più importante, perché tutti gli altri sono al suo interno.
HTML ha due figli:
- <head> ... </ head>;
- <body> .. </ body>.
Il blocco HEAD indica varie informazioni di servizio. Questa informazione non è visualizzata nel browser. Ad esempio, istruzioni per sviluppatori, per qualsiasi programma, per robot e molto altro.
Soprattutto, non c'è contenuto qui.
La sezione BODY indica il contenuto del documento che verrà visualizzato all'utente.
Impara ad aprire e chiudere i tag contemporaneamente, perché potrebbero esserci 10 elementi nidificati. Inoltre, per comodità, si consiglia di far rientrare i tag nidificati. Ad esempio, come questo.
<Html>
<Head>
</ head>
<Body>
</ body>
</ html>
Così facendo erano i tag di uguale importanzasu un livello, e i bambini - "dentro". Quindi è molto più conveniente per la percezione e la ricerca del pezzo necessario del codice. Altrimenti, puoi essere confuso. Ma per risparmiare spazio, i tag testa e corpo possono essere eseguiti senza rientro. Questo è fatto in modo che tutti gli altri non abbiano un rientro superfluo. Tutto il resto è desiderabile separare.
Come creare una semplice pagina HTML
Per scrivere il codice è necessario un qualche tipo di editor. Ce ne sono molti. Notepad ++ e Adobe Dreamweaver sono popolari. Puoi anche usare un notebook.
Ecco come appare l'editor Notepad ++.
Questo è un editor molto utile ed è gratuito. Il precedente Adobe Dreamweaver è a pagamento. La differenza tra gli editor destinati a scrivere codice HTML da un notebook è che i tag speciali sono evidenziati. Se non è evidenziato, significa che hai scritto in modo errato.
Per garantire che la retroilluminazione corrisponda alla lingua, è necessario specificarlo nelle impostazioni.
Diamo un'occhiata a come creare una pagina HTML nel Blocco note. Cioè, finiamo la parte tecnica e poi passiamo direttamente allo studio dei tag.
Come creare una pagina Web nel blocco note HTML
Innanzitutto, apri il blocco note.
Quindi digita ciò che è mostrato nello screenshot seguente.
Abituati a scrivere con le tue mani, non solo a copiare. Quando scrivi con le mani, è meglio ricordare l'intero database dei tag.
Successivamente, fai clic sul menu "Salva file" e specifica qualsiasi nome di file, ma con l'estensione .html.
Dopodiché, puoi aprire il file nel browser e ammirare il risultato. Ora dovresti capire come creare una pagina web nel blocco note HTML.
Consorzio Mondiale W3C
C'è un'organizzazione come il W3C, chesviluppa e implementa tutti gli standard per Internet. Tutti i browser sono conformi a questi standard e elaborano i layout di pagina (codici) in base a queste regole.
Sul sito ufficiale degli sviluppatori HTML, puoi trovare una tabella con tutti i tag e le regole per il loro utilizzo. Nell'ambito di questo articolo, consideriamo il più basilare.
Potresti pensare, quali regole ci possono essere? Tutti i tag descritti hanno le loro raccomandazioni. Ce ne sono diversi:
- Tag opzionale
- Proibita.
- Tag vuoto
- antiquato
- The Lost.
Tag in HTML
Prima di creare una pagina HTML, è necessario capire cosa dovrebbe essere nella parte di servizio di HEAD.
Nell'area HEAD, sono obbligatori etag opzionali. Un tag obbligatorio è un'intestazione. È indicato da <title> Title </ title>. È assegnato all'intero documento. E quello che vedi nei risultati del motore di ricerca di Google è il tag del titolo.
Passiamo alla sezione BODY. Ci sono elementi che vengono visualizzati nel browser e ci sono anche quelli non visualizzati. Ad esempio, i commenti non vengono visualizzati all'utente. Possono essere usati per appunti o per suggerire ad altri dipendenti se lavori in una squadra.
Sono designati come <! - Commento ->
Tutto ciò che è tra <!- e ->, viene valutato dal programma in questo modo. Si noti che non è possibile allegare un tag di commento ad un altro tag di commento. Poiché non appena apri <! -, tutto ciò che accade non verrà visualizzato. Le informazioni non saranno visibili finché il gestore non vedrà il tag di chiusura ->.
Un esempio di questo nidificazione:
<! - primo commento <! - secondo commento -> continuazione del primo commento ->
Il risultato nel browser sarà il seguente
continuazione del primo commento ->
Ed ecco un pezzo <! - primo commento <! - secondo commento -> non sarà visibile La seconda apertura <! - tag è stata ignorata ed è stata trattata come un testo semplice.
Intestazioni nel testo
Il titolo è indicato non solo nella sezione HEAD con il tag title. Nel contesto, il titolo dovrebbe essere indicato necessariamente. Perché solo l'utente lo vedrà.
Le intestazioni sono disponibili in diversi livelli. Questo crea una gerarchia nel testo. Equivalente ai volumi, capitoli, paragrafi nei libri.
Ci sono solo 6 livelli. L'intestazione più importante è indicata da <h1> Intestazione </ h1>. In termini di avanzamento della pagina, il testo nei tag h1 e title deve corrispondere. Inoltre, h1 dal punto di vista estetico dovrebbe essercene solo uno. Ma questo non significa che il browser non elaborerà il successivo h1. Possono essere fatti quanti ne vuoi, ma questo non è desiderabile.
Per i sottotitoli usa i tag da h2 a h6. Sono chiamati il titolo del primo, secondo, terzo, quarto, quinto e sesto livello. Questo crea l'annidamento di informazioni e una suddivisione in categorie.
Sembra così
paragrafo
Il testo principale del codice deve essere formattato nel tag <p>.. </ p>. Veniva dalla parola "paragrafo". Ogni paragrafo deve essere formattato con un tag <p> e non tutti in un heap. Un'interruzione di riga normale non verrà elaborata. Tutto sarà visualizzato in una riga. Per i trattini, devi usare il tag <br>.
Si noti che il tag di migrazione non è chiuso. Lui è single.
Considera l'esempio della poesia.
Tag diversi, oltre al loro "nome", hanno eil suo attributo Ad esempio, un tag di paragrafo ha un attributo "alignment", che è denotato da align. Può prendere il valore a sinistra, a destra, al centro. Cioè, allineare sul bordo sinistro o destro o al centro.
Usando i collegamenti
Probabilmente, hai già pensato: ma come creare una pagina HTML con link? Non c'è niente di complicato in questo. Creare collegamenti a una pagina HTML è facile. Per questo, c'è un tag <a> speciale. Ha i suoi attributi richiesti. Il link corretto ha questo aspetto:
<a href="adkey"> link text </a>
Se non si specifica l'indirizzo e il testo, questo link sarà inutile o invisibile all'utente.
conclusione
Ci sono così tanti tag e ognuno ha il proprio set di attributi. Dopo aver letto queste informazioni, devi capire come creare una pagina Web HTML.
Per espandere le mie conoscenze in questoregione, è necessario leggere la letteratura aggiuntiva e utilizzare la directory dei tag HTML ufficiale che si trova sul sito Web del W3C. Se non usi la directory periodicamente aggiornata degli autori linguistici, sarà difficile per te diventare professionista in questo campo.
</ p>
