Il World Wide Web è tessuto da pagine WEB e queste pagine sono create utilizzando l'Hypertext Markup Language (HTML). Mentre molte persone, in particolare i principianti, oggi parlano di "Programmazione HTML", HTML è linguaggio con marcatori... Utilizzi l'HTML per contrassegnare un documento di testo, proprio come fa un editor con una matita rossa in grassetto. Questi segni vengono utilizzati per determinare il formato (o lo stile) che verrà utilizzato durante la visualizzazione del testo sullo schermo del monitor.
Nozioni di base sull'HTML
Ecco una guida rapida alla scrittura di HTML. Molte persone scrivono ancora HTML e utilizzano strumenti simili a Blocco note o SimpleText. Questo tutorial ti aiuterà a iniziare con l'HTML. Anche se non avevi intenzione di modificare direttamente l'HTML, ma piuttosto di utilizzare un editor HTML come Netscape Composer o FrontPage, questa guida ti aiuterà a utilizzare meglio questi strumenti e renderà i tuoi documenti HTML leggibili dalla maggior parte dei browser. Dopo aver realizzato i vantaggi dell'apprendimento delle basi della scrittura HTML, potresti voler padroneggiare il materiale pubblicato nella sezione HTML avanzato.
Un buon modo per imparare è osservare come le altre persone codificano le proprie pagine HTML. Per fare ciò, seleziona "Visualizza" nel browser e poi "Sorgente".
Questa pagina ti insegnerà a:
- aggiungi titoli e paragrafi
- rendere il testo in corsivo
- cambia colore e dimensione del testo
- inserire immagini
- creare collegamenti ad altre pagine
- utilizzare diversi tipi di elenchi
Se stai cercando qualcos'altro, prova Advanced HTML
Aggiunta di titoli e paragrafi
Se hai utilizzato Microsoft Word, dovresti avere familiarità con l'uso degli stili per evidenziare i titoli in ordine di importanza. In HTML, le intestazioni sono classificate in sei livelli di importanza. H1 è il più importante, H2 è un po' meno importante e infine H6 è il meno importante.
Un esempio di come aggiungere un titolo importante:
Titolo importante
Risultato:
Titolo importante
e un po' meno importante:
Un po' meno importante
Risultato:
Un po' meno importante
Ogni paragrafo che scrivi deve iniziare con il tag
E finisci con il tag
... Per esempio:
Questo è il primo paragrafo.
E questo è il secondo paragrafo.
corsivo
Puoi evidenziare una o più parole usando il tag , esempio:
È veramente interessante paragrafo!
Risultato:
È veramente interessante paragrafo!
Cambia il colore e la dimensione del testo
Il tag FONT può essere utilizzato per specificare il colore e la dimensione del carattere che verrà utilizzato per visualizzare il testo. Questo esempio imposta il colore:
Questa proposta ha parola evidenziato in giallo.
Risultato:
Questa frase ha una parola evidenziata in giallo.
Attributo dimensione serve per indicare la dimensione del carattere in unità convenzionali da 1 a 7. È generalmente accettato che la dimensione di un carattere "normale" corrisponda al numero 3. La dimensione può essere specificata sia come valore assoluto (SIZE = 5) o come valore relativo (SIZE = + 2):
Consigli veterinario medico
Risultato:
Consulenza veterinaria
Inserisci immagini
L'uso delle immagini rende le tue pagine più interessanti. Inserire un'immagine consente il tag ... Supponiamo che il file immagine "peter.jpeg", largo 200 pixel e alto 150 pixel, si trovi nella stessa cartella del file HTML.
Specificare la larghezza e l'altezza non è strettamente necessario, ma aumenterà la velocità di caricamento della tua pagina WEB. Dovresti impostare una descrizione dell'immagine per le persone che hanno disabilitato il caricamento dell'immagine. Puoi aggiungere una breve descrizione usando l'attributo alt:
Il WWW utilizza due formati di file grafici, GIF e JPEG. Il formato GIF viene utilizzato quando è richiesta un'immagine o un'animazione trasparente, nonché per:
- disegni e testi in bianco e nero
- immagini con un numero limitato di colori
- grafici dai contorni netti (menu, pulsanti, diagrammi, ecc.)
- immagini con testo
Il formato JPEG è più adatto nei seguenti casi:
- immagini scansionate
- grafica con una complessa combinazione di colori e sfumature
- qualsiasi immagine con una tavolozza di più di 256 colori
Collegamento ad altre pagine
Testo tra e viene utilizzato come descrizione di un collegamento, generalmente indicato in blu e sottolineato con una linea.
Elenchi
HTML offre tre tipi di elenchi. Il primo tipo si chiama etichettato (non ordinato) una lista. Si apre un elenco puntato con il tag
- e ciascuno dei suoi elementi inizia con un tag standard
- , esempio:
- primo elemento della lista
- secondo elemento della lista
- terzo elemento della lista
Risultato:
- primo elemento della lista
- secondo elemento della lista
- terzo elemento della lista
Il secondo tipo - numerato (ordinato) elenco. Usa i tag
- e
- ... Esempio:
- primo elemento della lista
- secondo elemento della lista
- terzo elemento della lista
Risultato:
- primo elemento della lista
- secondo elemento della lista
- terzo elemento della lista
E l'ultimo è elenco delle definizioni (glossario)... Presenta il testo sotto forma di voce di dizionario, composta da un termine definito e da un paragrafo che ne rivela il significato, si apre con il tag
- ... Ogni termine si apre con il tag
- , e la definizione dal tag
- ... Esempio:
- primo termine
- la sua definizione
- secondo termine
- la sua definizione
- terzo termine
- la sua definizione
Risultato:
Primo termine la sua definizione secondo termine la sua definizione terzo termine la sua definizione
Le liste possono essere nidificate, una dentro l'altra. Esempio:
- primo elemento della lista
- secondo elemento della lista
- il primo elemento dell'elenco annidato
- il secondo elemento dell'elenco annidato
- terzo elemento della lista
Risultato:
- primo elemento della lista
- secondo elemento della lista
- il primo elemento dell'elenco annidato
- il secondo elemento dell'elenco annidato
- terzo elemento della lista
Definire i colori in HTML
In HTML, i colori sono identificati da numeri in codice esadecimale. Il sistema di colori si basa su tre colori primari: rosso, verde e blu. Ad ogni colore viene assegnato un valore da 00 a FF. Questi valori vengono poi concatenati in un unico numero, preceduto dal carattere #. Questa tabella mostra i diversi colori e il loro codice esadecimale.
F F F
F F FCCC
CCC999
999666
666333
333000
000FFC
C00FF9
900FF6
600FF3
30099C
C00CC9
900FFC
C33FFC
C66FF9
966FF6
633CC3
300CC0
033CCF
F00CCF
F33333
300666
600999
900CCC
C00F F F
F00CC9
933CC6
633330
000660
000990
000CC0
000FF0
000FF3
366FF0
03399F
F00CCF
F6699C
C33666
633999
933CCC
C33F F F
F33996
600993
300663
333993
333CC3
333FF3
333CC3
366FF6
699FF0
06666FA
F0099F
F6666C
C33669
900999
966CCC
C66F F F
F66996
633663
300996
666CC6
666FF6
666990
033CC3
399FF6
6CCFF0
09933F
F0066FA
F33339
90066C
C0099F
F33CCC
C99F F F
F99CC9
966CC6
600CC9
999FF9
999FF3
399CC0
066990
066FF3
3CCFF0
0CC00C
C0033C
C00336
600669
93399C
C66CCF
F99F F F
FCCFFC
C99FF9
933FFC
CCCFF9
9CCCC6
699993
366660
033CC0
099330
03333C
C3366C
C6600F
F0033F
F3366FA
F6699F
F99CCF
FCCCC9
9CC996
699993
399990
099663
366660
066006
600336
633009
900339
933669
96699C
C99FFC
CFFFF9
9FFFF6
6FFFF3
3FFFF0
0FFCC6
6CCCC3
3CC003
30000C
C33006
633339
96666C
C9999F
FCCCCF
F F F339
9FF99C
CFFCCC
CFFCC9
9FF996
6CC663
399330
066990
0CCCC0
0CC00F
F3333F
F66009
93300C
C6633F
F9999F
F F F99C
CCC006
6CC669
9CC999
9FF999
9CC993
3FF660
0CC660
099CC3
3FFCC0
0FF00F
F6666FA
F9933C
C66009
96666FA
F F F66C
CCC669
999003
366336
699666
6FF666
6CC666
699330
099993
3CCCC6
6FF990
0FF00F
F9966FA
FCC33C
C9933F
F F F33C
CCC339
999336
666006
699003
399333
3FF333
3CC333
399333
366663
3CC996
6FF660
0FF00F
FCC33F
FCC00F
F F F00C
CCC009
999006
666003
333339
9CC336
6CC000
0FF000
0CC000
099000
066000
033663
3FF330
0FF00C
C99009
9CC33C
CFF66C
CFF669
9FF336
6FF003
3CC330
0CC00C
CFF009
9FF006
6FF003
3FFPer semplicità, HTML definisce 16 colori standard, che, insieme ai relativi codici esadecimali, sono elencati di seguito.
nero = "# 000000" verde = "# 008000" argento = "# C0C0C0" lime = "# 00FF00" grigio = "# 808080" oliva = "#808000" bianco = "#FFFFFF" giallo = "#FFFF00" marrone = "# 800000" blu marino = "# 000080" rosso = "#FF0000" blu = "#0000FF" viola = "#800080" verde acqua = "# 008080" fucsia = "#FF00FF" acqua = "# 00FFFF" Vlad Merzhevich
I meta tag vengono utilizzati per memorizzare informazioni destinate a browser e motori di ricerca. Ad esempio, i motori di ricerca cercano i meta tag per ottenere descrizioni del sito, parole chiave e altri dati.
Meta tag per i motori di ricerca
C'è un'opinione tra gli sviluppatori di siti secondo cui i meta tag ben scritti ti consentono di salire ai primi posti dei motori di ricerca. In realtà, questo non è il caso, non salirai in alto solo sui meta tag, ma il contenuto non riuscito dei meta tag può peggiorare il ranking del sito.
Due meta tag sono specifici per i motori di ricerca: descrizione e parole chiave. Alcuni webmaster hanno aggiunto parole chiave alla sezione delle parole chiave che non hanno nulla a che fare con l'argomento del sito, ma hanno riscosso un certo successo tra i visitatori dei motori di ricerca. Tuttavia, dopo un po', i motori di ricerca hanno imparato ad affrontare questo fenomeno ea controllare il contenuto della pagina web per verificare la conformità con le parole chiave indicate.
Alcuni principi relativi ai meta tag:
- non includere parole chiave che non compaiono sulle tue pagine;
- non ripetere le parole chiave;
- utilizzare i meta tag per lo scopo previsto;
- rendere la descrizione e l'elenco delle parole chiave diverse per ogni pagina del sito, tenendo conto del contenuto.
descrizione
La maggior parte dei motori di ricerca visualizza il contenuto del campo della descrizione (esempio 1) durante la visualizzazione dei risultati di ricerca. Se questo tag non è sulla pagina, il motore di ricerca elencherà semplicemente le prime parole trovate nella pagina, che, di regola, non sono molto rilevanti.
Esempio 1. Utilizzo della descrizione
descrizione parole chiave
Questo meta tag aveva lo scopo di descrivere le parole chiave trovate nella pagina (esempio 2). Ma come risultato delle azioni di persone che vogliono entrare nelle prime linee dei motori di ricerca con qualsiasi mezzo, ora è screditato. Pertanto, molti motori di ricerca ignorano questo parametro.
Esempio 2. Utilizzo di parole chiave
parole chiave Le parole chiave possono essere elencate separate da spazi o virgole. I motori di ricerca stessi porteranno la voce al tipo che stanno utilizzando.
Pagine di caricamento automatico
Per caricare automaticamente un nuovo documento dopo un certo periodo di tempo, utilizzare l'istruzione http-equiv = "refresh" (esempio 3).
... Per i sistemi operativi Windows e Cyrillic, charset di solito prende il valore utf-8 o windows-1251 (esempio 4).
Esempio 4. Selezione della codifica corrente
codifica cirillico
Se non è presente alcuna indicazione di codifica, il browser cerca di determinare da solo quale tipo di caratteri viene utilizzato nel documento e seleziona automaticamente la codifica richiesta. Il browser non è sempre in grado di riconoscere con precisione la lingua della pagina web e in alcuni casi suggerisce la codifica vietnamita invece del cirillico. Per questo motivo, è meglio includere sempre la riga mostrata. Tuttavia, le circostanze in cui si specifica la codifica possono causare danni. Ad esempio, un server Web utilizza automaticamente la transcodifica dei dati in KOI-8 e un browser, quando incontra il parametro charset = windows-1251, traduce il testo nella codifica di Windows. Si scopre un doppio cambio di caratteri, non è facile leggere un testo del genere. Fortunatamente questo problema è già un ricordo del passato, in ogni caso può essere facilmente individuato e neutralizzato a livello di server.
Un marketer deve conoscere l'HyperText Markup Language, ovvero HTML? I progettisti di layout parlano tra loro questo linguaggio e, oltre ai browser, altri programmatori e sviluppatori possono capirlo in una certa misura. E sebbene la conoscenza dell'HTML non influisca direttamente sul livello delle vendite, la capacità di navigare le basi di questo linguaggio non sarà superflua nemmeno per un marketer.
E la prima cosa che deve essere fatta è scartare lo scetticismo associato all'idea che non puoi padroneggiare nemmeno le basi dell'HTML - non preoccuparti, tali dubbi brulicano nella testa di parecchie persone. E anche se potresti non dover continuamente incrociare questi problemi come parte delle tue mansioni lavorative o lavorare in LPgenerator, ti suggeriamo comunque di familiarizzare con i principi di base di questa lingua. Almeno sarai in grado non solo di fare amicizia con l'HTML, ma anche di avvicinarti a quelle persone nella tua azienda / squadra per le quali questa lingua è nativa :)
Che cos'è l'HTML?
Come già accennato, l'HTML è un linguaggio di markup ipertestuale, con l'aiuto del quale i nostri colleghi progettisti di layout creano direttamente la struttura delle pagine Web (le pagine di destinazione sono una delle varietà) e delle e-mail.
Se spieghiamo l'essenza di questo concetto in immagini semplici e visive, allora possiamo dire che HTML è il corpo e CSS (Cascading Style Sheets) è l'abbigliamento. Mentre i CSS definiscono l'aspetto di una pagina web, l'HTML forma la sua struttura (scheletro) attraverso intestazioni, elenchi e altri elementi simili, dall'inizio della pagina, l'intestazione, alla fine della pagina, il piè di pagina.
Inoltre, non è senza motivo che l'HTML sia un linguaggio markup: Esattamente tag o come vengono anche chiamati tag, racchiusi tra parentesi angolari formano quelli gli elementi che compongono il codice HTML. Per la maggior parte, gli elementi di una data lingua hanno tag di apertura e chiusura. Il corretto (valido) utilizzo di quest'ultimo dipende non solo dall'adeguatezza della struttura della pagina web, ma anche dalla correttezza della sua visualizzazione da parte dei browser Internet.
Concetti funzionali di base dell'HTML
Come mostrato nell'esempio HTML di seguito, inizia sempre con... Al browser, l'aspetto di questo elemento indica che dovrebbe rendere la struttura HTML:
Il titolo verrà inserito qui
E in questo luogo sarà il primo paragrafo
La versione ridotta presentata del semplice codice HTML contiene diversi elementi che, a loro volta, consistono in tag come:
- - tag di apertura e chiusura, che indica l'inizio e la fine di quella parte della pagina, che conterrà il suo contenuto. Questo tag è tradotto in russo con la parola "corpo";
- - ancora, tag di apertura e chiusura, che indicano l'inizio e la fine dell'intestazione. Possono esserci 6 tag di questo tipo in totale e differiscono per la dimensione del carattere: maggiore è l'ordine numerico del titolo, più piccole saranno le lettere. Insieme al tag
,
costituisce la struttura del contenuto stesso: in particolare, le etichette definiscono l'inizio e la fine dei paragrafi di testo.
Così, uno per uno, si formano diversi elementi, che verranno successivamente presentati nella pagina di destinazione. Come probabilmente avrai già capito, per indicare la chiusura di un determinato tag, è consuetudine in HTML mettere una barra "/".
Per consolidare l'abilità appena acquisita, puoi aggiungere qualche altra riga di codice. Prima di ciò, operavamo all'interno del "corpo" del contenuto di cui il tag è responsabile
, ma finora abbiamo proprio questo corpo senza "testa". Questo fastidioso malinteso può essere corretto aggiungendo le seguenti righe:Questo sarà il titolo dell'intera pagina
Ci sarà un titolo scritto con il carattere più grande
E questo è un miglioramento, in parte grassetto paragrafo.
Ci sarà anche un titolo qui, ma non così evidente come il precedente - sarà realizzato con un carattere più piccolo
Un altro paragrafo per completezza.
In effetti, il secondo frammento HTML sopra è una versione estesa del primo:
- apparso titolo il titolo della pagina, che si trova tra i tag
, che, a loro volta, formano l'intestazione, e non la parte di contenuto della pagina, poiché sono posizionati all'interno del tag , ma no ; - c'è un'altra intestazione di ordine inferiore (sarà meno evidente), che verrà posizionata all'interno ;
- una parte del testo nel primo paragrafo in ordine sarà trasformata: una frase racchiusa in un tag ("forte" è tradotto in russo), sarà evidenziato grassetto.
Questo è il modo in cui il codice cresce abbastanza rapidamente, interpretando il browser Internet che capisce ciò che il designer e il marketer vogliono ottenere da esso.
L'HTML non è così brutto come è disegnato, giusto?
È chiaro che ci sono molti altri tag, grazie ai quali vengono impostati parametri aggiuntivi della struttura di una pagina web. Tuttavia, anche una panoramica così breve sarà sufficiente per non confondersi se devi affrontare la necessità di approfondire il codice.
Esistono molte risorse Internet di alta qualità sull'argomento HTML e CSS. Parlando nel linguaggio dei marketer, possiamo dire che questa nicchia è abbastanza ben sviluppata e, se lo desideri, puoi aumentare le tue conoscenze in quest'area trovando una risorsa adatta, anche nella parte di lingua russa del Web.
La frase logora che la conoscenza è potere non perde la sua attualità, e la sua versione raffinata “ applicazione la conoscenza è potere ”può portare più lead e dividendi finanziari. E chissà, forse una comprensione più profonda di come funziona e funziona la tua pagina di destinazione a livello HTML ti aiuterà a utilizzare più pienamente quelle esistenti o addirittura a introdurre alcune nuove tecniche che possono aiutare ad aumentare le vendite.
Se, tuttavia, non hai il desiderio o il tempo - siamo tutti persone impegnate - per approfondire l'HTML, c'è sempre l'opportunità di usarlo per creare una landing page di alta qualità.
Al vostro servizio è anche il reparto impaginazione della nostra azienda ( [e-mail protetta] sito web), che soddisferà volentieri qualsiasi tuo capriccio all'interno della piattaforma: slider, pop-up, moduli di lead complessi, gallerie, ecc. Tutto è possibile nel nostro editor!
Alte conversioni per te!
Igor Kizin,
capo reparto layout LPgenerator
HTML è un linguaggio di markup ipertestuale. Si basa sui cosiddetti tag. I tag sono una sorta di elementi wrapper che impostano il formato e le proprietà degli elementi in una pagina web. In una pagina, abbiamo messo insieme per te un riferimento di tag HTML aggiornato.
Ci sono oltre un centinaio di elementi di markup in totale. Ognuno ha un numero di attributi e una propria sintassi. Il riferimento ai tag HTML ti aiuta a trovare rapidamente l'elemento che desideri.
Elenco dei tag HTML
Sotto nella tabella c'è un elenco di tag HTML5 con una breve descrizione in russo.