Codifica della pagina html utf 8. Codifica in html

Impostazione del set di caratteri

Meta tag

È necessario aggiungere uno speciale meta-tag a ciascuna pagina (o modello di intestazione) che indichi al browser quale set di caratteri utilizzare per visualizzare i testi. Questo tag è standard e di solito ha questo aspetto:

set di caratteri = UTF-8» />

set di caratteri = "utf-8 ″/> (opzione per HTML 5)

Devi inserirlo nella sezione - meglio all'inizio, subito dopo l'apertura :

Meta tag di codifica

Tramite .htaccess (se tutto il resto fallisce)

Di solito le prime due opzioni sono sufficienti e i browser visualizzano il testo come... Ma con alcuni di loro potrebbero esserci problemi e quindi puoi ricorrere all'aiuto file htaccess.

Per fare ciò, è necessario scrivere la seguente riga al suo interno:

AddDefaultCharset utf-8

È tutto. Se applichi successivamente questi 3 metodi per impostare la codifica sul tuo progetto, allora la probabilità che che tutto verrà visualizzato come dovrebbe, vicino al 100%.

Come "vedere" cosa si nasconde dietro i simboli incomprensibili sul sito?

Se sei andato su una pagina web, vedi "krakozyabry" e vuoi vedere il testo normale, allora ci sono solo due modi:

• informare il proprietario del sito per impostare tutto correttamente
• prova a indovinare tu stesso la codifica. Questo viene fatto utilizzando gli strumenti standard del browser. In Chrome, ad esempio, devi fare clic sul menu "Strumenti => Codifica" e scegli il set di caratteri appropriato dall'elenco enorme (cioè indovina).

Fortunatamente, quasi tutti i progetti web moderni sono realizzati con la codifica UTF-8, che è "universale" per diversi alfabeti e quindi è sempre meno probabile che su Internet si vedano questi caratteri oscuri.

Affinché le pagine del tuo sito vengano visualizzate correttamente in tutti i browser e su tutti i tipi di dispositivi, devi occuparti di impostare la codifica corretta. Il mancato rispetto di alcune condizioni, di cui parleremo in dettaglio oggi, può portare al fatto che il testo si trasformerà in un insieme di caratteri insignificanti che sono semplicemente impossibili da leggere (krakozyabry).

Perché viene visualizzato krakozyabry al posto del testo normale?

Ogni pagina del tuo sito deve avere una codifica specifica. La codifica attualmente in uso deve essere segnalata al browser passando delle intestazioni speciali. In queste intestazioni devi specificare la codifica corrispondente a quella che utilizzi nel corpo dei documenti pubblicati sul sito (nelle sue pagine).

I browser moderni possono determinare da soli la codifica del documento, se il webmaster ha dimenticato di specificarlo esplicitamente. A volte capita che sorgano incongruenze tra il "parere" del browser e la realtà, quindi appare un insieme di caratteri che non possono essere letti. Un insieme di sciocchezze può assumere forme diverse, a volte saranno solo strani simboli, simili ad antichi geroglifici, e talvolta solo domande o domande all'interno di diamanti neri. In generale, non è così importante che tipo di krakozyabry mostra il browser, ma ciò che è importante è che una persona non possa leggerli.

Se riscontri un problema con una codifica specificata in modo errato e vedi sul tuo sito qualcosa che non sei in grado di leggere, utilizza prima di tutto uno speciale Decoder sviluppato nello studio di Artemy Lebedev. Per fare ciò, basta copiare il testo che si desidera decifrare, incollarlo nell'apposito campo e fare clic su "Decrittografa". In caso di decodifica riuscita, vedrai il testo già leggibile, così come la codifica sorgente e il percorso che il programma ha dovuto seguire per produrre il risultato.

Tutto questo è necessario, piuttosto, per gli utenti avanzati che le informazioni ricevute possono aiutare in qualche modo. Forse il risultato delle azioni del programma ti darà un'idea e capirai da dove provengono i krakozyabrs sul tuo sito e risolverai rapidamente la situazione. E se le manipolazioni fatte non ti dicono nulla, allora andiamo avanti.

Come scegliere la codifica giusta

Nell'ambito di questo articolo, non approfondiremo cosa sono le codifiche e come differiscono l'una dall'altra, dal momento che Non vogliamo sovraccaricare né noi stessi né voi con informazioni non necessarie e, ai fini dell'articolo di oggi, non lo era. Vale la pena notare solo il fatto che su un sito in lingua russa non ha assolutamente senso installare la codifica di Windows-1251, che è descritta in modo esauriente nel meraviglioso articolo di Wikipedia. Anche se tutti i testi su di esso saranno scritti esclusivamente in russo e non ci saranno caratteri non standard intercalati. Ti basterà invece scegliere la codifica universale UTF-8, dandola per scontata, senza riempirti la testa di informazioni non necessarie.

Il fatto è che non ha senso scegliere una codifica per il tuo sito che supporti solo i caratteri delle lingue slave, come russo, ucraino, bielorusso, serbo, macedone e bulgaro. Perché dovresti inizialmente limitarti e condannarti a possibili problemi in futuro? Cosa fai se devi inserire un simbolo che non è tra quelli supportati?

UTF-8 (dall'inglese Unicode Transformation Format) è un formato di trasformazione Unicode a otto bit che ha ricevuto riconoscimenti a livello mondiale ed è stato standardizzato proprio per evitare i problemi associati alla comparsa di crepe e confusione con testi illeggibili. Da cui si può tranquillamente concludere che in questo caso, dei due mali, bisogna scegliere quello più grande e dormire bene, senza addentrarsi nei dettagli, perché qui comunque è tutto chiaro. Guarda le dimensioni di Giove e Venere per fare un confronto.

Modi di base per impostare la codifica corretta

Molto spesso, i problemi con la codifica del sito sorgono non perché nessuna delle condizioni, di cui ti parleremo ora, sia stata soddisfatta, ma è sufficiente non soddisfarne solo una perché il testo sul tuo sito inizi a visualizzare in modo errato. Dopo aver impostato la codifica in tutti i modi precedenti, il problema verrà risolto con una probabilità del 99,9%. Siamo giunti a questa conclusione sulla base di molti anni di esperienza con siti su tutti i tipi di siti di hosting, utilizzando una varietà di sistemi di amministrazione e impostazioni del server.

Codifica .Htaccess - AddDefaultCharset

Prima di tutto, devi impostare la codifica predefinita di tutte le pagine del tuo sito utilizzando una direttiva htaccess molto utile: AddDefaultCharset, che letteralmente significa "Codifica AddDefault" in inglese. Questo è fatto molto semplicemente:

AddDefaultCharset UTF-8

Se non sai cos'è , quindi crea semplicemente un file di testo nel blocco note, quindi usando Total Commander rinominalo in un file senza titolo con l'estensione HTACCESS ( - questo è come dovrebbe apparire il nome completo del tuo file). Successivamente, carica il file appena creato nella directory principale del tuo sito (nello stesso posto in cui si trova il file eseguibile principale, ad esempio index.php). E non dimenticare di inserire la riga di codifica predefinita che abbiamo appena fornito.

Codifica con meta set di caratteri

I meta tag sono in grado di inviare informazioni su una pagina al browser sotto forma di intestazioni speciali, una delle quali è esattamente quella di cui abbiamo bisogno - set di caratteri... In generale, i meta tag possono avere fino a 4 attributi diversi:

1. contenuto;
2. http-equiv;
3. nome;
4. schema.

Infatti, dei quattro attributi presentati, solo uno è richiesto: contenuto ma ci sono eccezioni. Ad esempio, nel nostro caso, verrà utilizzata una versione abbreviata del record e imposteremo la codifica utilizzando il meta tag esattamente in questo modo:

Il vecchio formato di registrazione è caduto da tempo nell'oblio e non ha più senso usarlo:

Come sai, i meta tag vengono solitamente posizionati all'interno del contenitore. testa... Tutti, senza eccezione, probabilmente lo sanno già. Fai questo e passeremo all'elemento successivo della nostra lista.

Codifica file con funzione di intestazione PHP

Questo metodo è adatto solo a coloro che hanno un sito Web implementato utilizzando il linguaggio di programmazione più popolare al momento, principalmente focalizzato sulla creazione di siti Web - PHP (Hyper Text Preprocessor). Per risolvere il problema posto in questo articolo, utilizzeremo la meravigliosa funzione integrata header(), progettata per passare intestazioni, simile ai meta tag, ma con la leggera differenza che l'azione viene eseguita da uno script PHP e non da l'output del codice HTML.

Imposta la codifica UTF-8 per un file utilizzando la funzione intestazione () abbastanza semplice: devi solo incollare il codice indicato all'inizio della pagina, ma ovviamente all'interno dell'ambito PHP, che è indicato in questo modo:o così -.

Intestazione ("Tipo di contenuto: testo / html; set di caratteri = utf-8");

Il punto più importante qui è che abbiamo il diritto di trasferire le intestazioni solo se prima non c'era alcun output dallo script. Ecco perché stiamo inserendo questo codice all'inizio della pagina. Devi farlo con saggezza e capire bene cosa sta succedendo, perché puoi essere sicuro di inserire l'intestazione all'inizio del file, ma potresti non sapere che questo file è utilizzato in un altro file, che viene estratto usando la funzione richiedere o includere dopo che alcune informazioni sono state visualizzate. Pertanto, se non capisci molto bene di cosa stiamo parlando ora, è meglio passare al passaggio successivo e tornare a questo se i 3 precedenti non hanno aiutato a stabilire la corretta codifica delle pagine del tuo sito.

Salvare i file nella codifica corretta

Uno dei motivi forse più comuni per la comparsa di crepe sul sito è la codifica errata dei file stessi, che vengono utilizzati per generare il documento finale. Molto spesso, questo problema si pone per i programmatori alle prime armi che stanno appena muovendo i primi passi nella padronanza dell'arte. Quando uno dei sistemi di amministrazione attualmente popolari viene selezionato come motore del sito, questo problema può verificarsi in casi molto rari, ma se viene utilizzato, ciò accade in quasi ogni terzo caso.

Come abbiamo concordato in precedenza, la codifica che utilizziamo su tutti, anche sui siti in lingua russa più hard-core, è UTF-8, quindi codificheremo tutti i file che compongono il motore del sito nello stesso formato. E per cambiare la codifica del file stesso, caricato sul server, non basterà di certo il solito block notes fornito dal sistema operativo Windows. Pertanto, è meglio utilizzare un programma di terze parti distribuito gratuitamente - Notepad ++, che può essere scaricato dal sito Web ufficiale senza problemi.

Dopo aver completato con successo il semplice processo di installazione, dovrai impostare questo programma come editor predefinito, effettuare alcune impostazioni a tuo piacimento e modificare la codifica del file visualizzato in modo errato nello stesso modo mostrato nello screenshot. Quelli. è necessario selezionare il valore "Codifica in UTF-8 (no BOM)". Una buona indicazione che questo era il caso è che inizialmente nessuna delle opzioni sarà selezionata e ti verrà chiesto "Converti in UTF-8 (no BOM)". Se hai visto questo, assicurati che rimangano solo pochi secondi prima che il problema con la codifica venga risolto.

Inoltre, voglio solo dire che devi scegliere esattamente senza BOM... Altrimenti, se si codifica solo in UTF-8 (con BOM), verranno creati byte extra all'inizio del file. Cercano di non utilizzare BOM - Byte Order Mark specificamente sul Web durante la codifica in formato UTF-8, perché questo porta a errori interferendo con la corretta interpretazione di PHP.

Bene, ora, quando tutte le azioni necessarie sono state completate, molto probabilmente sulle pagine del tuo sito vedrai un testo di facile lettura di fronte a te e respirerai liberamente 🙂

Accettiamo di avere le nostre differenze.
Robert Louis Stevenson.

Questa è una lezione in cui parleremo di cosa è meta tags, per cosa e come vengono utilizzati e come compilarli correttamente.

Come ho già detto in, meta tags si trovano nell'intestazione della pagina html, tra i tag e e non vengono visualizzati in alcun modo dal browser (ad eccezione del contenuto del tag "title"). Tuttavia, i meta tag per un sito Web svolgono un ruolo molto importante. Aggiungerli e ottimizzarli può aiutare notevolmente il sito nella sua vita.

Consiglio di utilizzare solo quei meta tag che veramente sono necessari per il funzionamento del sito. Non ingombrare l'area della "testa" con istruzioni non necessarie. qualsiasi errore qui può portare a conseguenze disastrose. Se sai cosa stai facendo, i meta tag saranno solo utili, ma se scarichi tutto qui, puoi avere problemi difficili da diagnosticare.

primo meta tag molto importante. Inoltre, questo meta tag è ugualmente importante per i motori di ricerca e per i visitatori. I primi nella classifica dei risultati di ricerca attribuiscono grande importanza alle parole chiave che sono contenute nel tag title, i secondi vedono il suo contenuto come un link al sito negli stessi risultati di ricerca:

Con ossessionato da questo stesso meta tag viene visualizzato nel titolo della finestra:

In HTML, il meta tag "title" viene aggiunto come segue:

Contenuto del meta tag "title"

Contenuto della pagina principale

Inoltre, come ho detto prima, parole chiave che aggiungi al meta tag "title" sarà accolto estremamente positivamente dai motori di ricerca. Pertanto, quando compili questo tag, cerca di includervi le parole chiave corrette. A proposito, saranno discussi ulteriormente.

§ 2. Meta-tag "parole chiave"

Fin dall'inizio, brevemente su cosa, infatti, queste stesse "parole chiave".

Quelle parole che caratterizzano in modo più completo il contenuto della pagina html e ne saranno la chiave. Possono essere sia parole che frasi separate, ma... necessariamente deve apparire nel testo della pagina. I motori di ricerca li utilizzano per determinare la pertinenza di una pagina per una particolare query.

Ad esempio, per questa pagina le parole chiave sarebbero "meta tag", "meta title tag", "meta keywords" e così via.

Più in dettaglio sulle parole chiave, in particolare, e sull'ottimizzazione del sito, in generale, parleremo in.

Per facilitare il lavoro dei motori di ricerca, viene utilizzato il meta-tag "parole chiave". In esso, il webmaster prescrive le parole chiave per la pagina. Il codice HTML per il meta tag "keywords" ha il seguente aspetto:

Elenco delle parole chiave ">
Contenuto del meta tag "title"

Contenuto della pagina principale

Le parole chiave vanno aggiunte una alla volta, separate da virgole, al singolare. Ad esempio, non "parole chiave", ma "parola chiave, parola". Inoltre, il comportamento irresponsabile dei webmaster, che, per ottenere posizioni più elevate nei motori di ricerca, martellavano le "parole chiave" del meta-tag non solo con le parole chiave, ma anche con numerosi derivati ​​da esse, ha portato al fatto che i motori di ricerca praticamente ha smesso di prestare attenzione a questo tag. ... Attualmente Giusto meta-tag "keywords" riempito viene utilizzato dai motori di ricerca solo come uno dei tanti fattori di ranking (lontano da quello principale). Se vedono "parole chiave" davanti a loro, in cui hanno stipato tutte le possibili varianti di parole chiave, allora questo diventa per loro il primo segnale che questa pagina non è affidabile.

§ 3. Meta-tag "descrizione" (descrizione della pagina)

Il prossimo meta tag importante è il tag "descrizione", che dovrebbe contenere una breve descrizione della pagina. Proprio "breve" e precisamente "descrizione della pagina". Basta aggiungere una o due piccole frasi in cui indicare cosa e per chi è questa pagina.

Una caratteristica importante della "descrizione" del meta-tag è il fatto che nel caso del suo corretta compilando i motori di ricerca sulla base dello snippet della pagina nella SERP (breve descrizione sotto il link alla pagina):

Se ai motori di ricerca non piace il modo in cui viene riempito il meta tag "descrizione", lo snippet è formato da frammenti di frasi (estratte dall'intera pagina) che sono rilevanti per la query.

Pertanto, la corretta "descrizione" del meta-tag contiene necessariamente la parola chiave (frase) e descrive brevemente e accuratamente di cosa tratta la pagina e per chi. "Descrizione" insieme a "titolo" formano un paio di meta tag molto importanti, che determinano se l'utente passerà dai risultati della ricerca al sito o meno! Pertanto, come "titolo", deve essere scritto per ogni pagine!

H Il codice TML per creare il meta tag "descrizione" sarà il seguente:

Il contenuto del meta tag "descrizione" ">
Contenuto del meta tag "title"

Contenuto della pagina principale

Passiamo ora alla descrizione dei principali meta tag tecnici del gruppo "HTTP-EQUIV" (equivalenti HTTP).

§ 4. Meta tag tecnici

I meta tag tecnici significano molto per un sito web. Possono essere utilizzati per controllare la visualizzazione della pagina, le impostazioni di indicizzazione, ecc. In questo tutorial, esamineremo i meta tag tecnici di base.

• tipo di contenuto- il tipo del documento e la sua codifica. Questo meta tag è necessario affinché il browser visualizzi correttamente i caratteri.
  Ci sono molte codifiche. La maggior parte di loro non li incontrerai nemmeno. Per non parlare del fatto che li userai tu stesso. I browser moderni determinano automaticamente il tipo di codifica, ma per maggiore sicurezza puoi specificarlo tu stesso. Se crei un documento html nel sistema operativo Windows, la cui lingua è il russo, la codifica sarà "windows-1251" e il codice per l'inserimento del meta tag è il seguente:

  Contenuto del meta tag "title"

  Contenuto della pagina principale
  

• lingua dei contenuti- indicazione della lingua del documento. Il valore di questo meta tag facoltativo viene utilizzato sia dai crawler che dai server web. Codice di incorporamento:

  Contenuto del meta tag "title"

  Contenuto della pagina principale
  

• ricaricare- tempo (in secondi) dopo il quale il documento verrà automaticamente ricaricato o passato ad un'altra pagina html con l'indirizzo specificato (url). Ad esempio, per ricaricare automaticamente il documento ogni 30 secondi, inserisci questo meta tag in questo modo:

  Contenuto del meta tag "title"

  Contenuto della pagina principale
  

  E, in ordine, dopo 5 secondi, per andare alla pagina all'indirizzo http: //www.site/, devi scrivere così:

  Contenuto del meta tag "title"

  Contenuto della pagina principale
  

• robot- meta-tag, che è responsabile delle impostazioni di indicizzazione della pagina. Il meta tag robots può avere i seguenti valori:
  • indice- la pagina è indicizzata;
  • noindex- la pagina non è indicizzata;
  • Seguire- si tiene conto dei collegamenti ipertestuali presenti nella pagina;
  • non seguire- i collegamenti ipertestuali sulla pagina non vengono conteggiati
  • tutto- sostituisce "index" e "follow", ovvero la pagina è indicizzata e vengono presi in considerazione i collegamenti ipertestuali su di essa (per impostazione predefinita);
  • nessuno- sostituisce "noindex" e "nofollow", ovvero la pagina non è indicizzata e i collegamenti ipertestuali su di essa non vengono conteggiati.

  Il codice per inserire il meta tag "robots":

  Contenuto del meta tag "title"

  Contenuto della pagina principale
  

autore e diritto d'autore- meta tag che consentono di indicare la paternità e il proprietario del contenuto della pagina. Codice HTML da incorporare:

Contenuto del meta tag "title"

Contenuto della pagina principale

§ 5. conclusione

Questi sono tutti i meta tag in HTML di cui un principiante avrà bisogno. Il resto è specifico e potresti averne bisogno dopo aver acquisito esperienza e sapere esattamente cosa stai facendo. Di tutto quanto sopra, consiglio vivamente di utilizzare su ogni la pagina del tuo sito web è la seguente:

Titolo della pagina

Applicare l'acciaio se necessario, ma non preoccuparti troppo. Ricorda che i meta tag non renderanno interessante il tuo sito, possono solo aiutare il browser e il server web a visualizzare correttamente le pagine del sito e il motore di ricerca a trovarle.

Su questa sezione del mio sito è finalmente finito e più avanti parleremo di come iniziare la promozione e la promozione del tuo sito su Internet. Ci sono anche un paio di miei suggerimenti per esperienza personale sull'ottimizzazione delle pagine del sito. Fare clic su "Avanti".

Uno dei problemi più comuni affrontati da un principiante Webmaster(e non solo principianti), questo problemi con la codifica sul sito... Anche me appare costantemente durante la creazione di siti " abracadabra". Ma, fortunatamente, so perfettamente come risolvere questo problema, quindi metto tutto in ordine in pochi secondi. E in questo articolo cercherò di insegnarti il ​​​​più rapidamente risolvere problemi legati alla codifica sul sito.

La prima cosa che vale la pena notare è che tutti i problemi con la comparsa di "gibberish" sono associati a una mancata corrispondenza tra la codifica del documento e la codifica impostata dal browser. Diciamo un documento in windows-1251, e il browser per qualche motivo espone UTF-8... E le seguenti ragioni possono essere la fonte di tale discrepanza.

Il primo motivo

Meta tag scritto in modo errato tipo di contenuto... Fai attenzione, dovrebbe sempre contenere la codifica in cui è scritto il tuo documento.

Il secondo motivo

Sembra che il meta tag sia scritto nel modo desiderato e il browser mostra esattamente quello che vuoi, ma per qualche motivo c'è ancora un problema con la codifica. Qui, quasi sicuramente, la colpa è che il documento stesso ha un'ottima codifica. Se lavori in Blocco note ++, poi in basso a destra c'è il nome della codifica del documento corrente (ad esempio, ANSI). Se inserisci il meta tag UTF-8, e il documento stesso è scritto in ANSI poi fai la conversione in UTF-8(tramite il menu " Codifiche"e oggetto" Converti in UTF-8 senza BOM").

Terzo motivo

Quarto motivo

E infine, l'ultimo motivo popolare è problema con la codifica nel database... Innanzitutto, assicurati che tutte le tabelle e i campi siano scritti con la stessa codifica, che corrisponda alla codifica del resto del sito. Se questo non aiuta, subito dopo aver effettuato la connessione nello script, esegui la seguente richiesta:

IMPOSTA NOMI "utf8"

Invece di " utf8"potrebbe esserci una codifica diversa. Successivamente, tutti i dati dal database devono uscire con la codifica corretta.

In questo articolo spero di aver smontato almeno 90% dei problemi associati alla comparsa di "senza senso" sul sito... Ora devi affrontare un problema così popolare e semplice come la codifica errata in pochissimo tempo.

15.03.2016

Non ancora

Ciao a tutti!
Continuando ad apprendere le basi dell'HTML. In questa lezione analizzeremo come specificare la codifica HTML per il sito (pagina web).
Questo tutorial è molto importante, poiché non sapere come specificare la codifica per una pagina Web può rendere la tua pagina illeggibile. Tu chiedi: "Come mai, non saranno in grado di?"
Lascia che ti mostri come appare il mio blog con la codifica sbagliata:

Così, Codifica HTML Sono tabelle di corrispondenza di codici e simboli dell'alfabeto. Cioè, il nostro computer cambierà il codice di codifica in lettere comprensibili e leggibili.

Per dire al browser in quale codifica si trovano i caratteri della pagina web, devi scrivere tra i tag questo è il meta tag:

Si prega di notare che il codice contiene la parola "codifica nome". Qui è necessario specificare la codifica HTML.
Di solito è utf-8 o windows-1251.

Codifica perutf-8:

codificaper windows-1251:

Se dimentichi di dire al browser in quale codifica si trova il sito o la pagina web, il browser proverà a determinare automaticamente la codifica, ma non sempre funziona correttamente. Di conseguenza, il risultato sarà lo stesso che ho mostrato nell'immagine sopra.

Passiamo alla pratica.

Come creare un documento HTML con
codifica utf-8

"Tutti i programmi" => "Standard" => "Blocco note" :