Elemento
(dall'inglese corpo- body) è progettato per memorizzare il contenuto di una pagina web (contenuto) visualizzato nella finestra del browser. Le informazioni che dovrebbero essere visualizzate nel documento dovrebbero trovarsi all'interno del contenitore . Queste informazioni includono testo, immagini, tag, JavaScript, ecc.utilizzato anche per determinare i colori dei collegamenti e del testo su una pagina web. Questa pratica è disapprovata in HTML e si consiglia invece di utilizzare gli stili per specificare uno schema di colori, applicandoli al selettore del corpo.Spesso
utilizzato per inserire un gestore eventi, come onload, che viene eseguito dopo che il documento ha terminato il caricamento nella finestra o nel frame corrente.Tag di apertura e chiusura
non sono obbligatori in una pagina Web, ma è considerato buon stile utilizzarli per definire l'inizio e la fine di un documento HTML.Sintassi
...Etichetta di chiusura
Non richiesto.
Attributi
Esempio
Anche Aristotele nella sua "Politica" affermava che la musica, influenzando una persona, offre "una sorta di purificazione, cioè sollievo associato al piacere".
Il risultato dell'esempio corrente è mostrato in Fig. 1. Quando si utilizza l'evento onload di un elemento
Viene eseguito uno script scritto in JavaScript, in questo caso visualizza un messaggio che il documento è stato caricato.Riso. 1. Finestra pop-up in un documento
Specifica
Ogni specifica passa attraverso diverse fasi di approvazione.
- Raccomandazione: la specifica è stata approvata dal W3C ed è consigliata come standard.
- Raccomandazione del candidato ( Possibile raccomandazione) - il gruppo responsabile dello standard è soddisfatto del raggiungimento dei propri obiettivi, ma necessita dell'aiuto della comunità di sviluppo per implementare lo standard.
- Raccomandazione proposta Raccomandazione suggerita) - in questa fase il documento viene sottoposto all'Advisory Council del W3C per l'approvazione finale.
- Bozza di lavoro: una versione più matura di una bozza che è stata discussa e modificata per la revisione della comunità.
- Bozza dell'editore ( Bozza editoriale) - una bozza della norma dopo le modifiche apportate dai redattori del progetto.
- Bozza ( Progetto di specifica) - la prima bozza della norma.
Spicca lo standard HTML vivente (Living): non aderisce alla tradizionale numerazione delle versioni, poiché è in costante sviluppo e viene aggiornato regolarmente.
Etichetta (raddoppia) è progettato per memorizzare il contenuto di una pagina Web (contenuto) visualizzato in una finestra del browser. Le informazioni che dovrebbero essere visualizzate nel documento dovrebbero trovarsi all'interno del contenitore BODY. Queste informazioni includono testo, immagini, tag, JavaScript, ecc.
Etichetta utilizzato anche per determinare i colori dei collegamenti e del testo su una pagina web. Questa pratica è deprecata in HTML 4 e si consiglia invece di utilizzare gli stili per specificare uno schema di colori, applicandoli al selettore . Tuttavia, la maggior parte delle opzioni è ancora supportata su tutti i browser.
Spesso taggato utilizzato per posizionare un gestore eventi, come onLoad, che viene eseguito dopo che il documento ha terminato il caricamento nella finestra o nel frame corrente.
I tag BODY di apertura e chiusura su una pagina web sono facoltativi, ma è buona norma utilizzarli per definire l'inizio e la fine di un documento HTML.
Sintassi
...
Etichetta di chiusura
Necessario.
Opzioni
alink: imposta il colore del collegamento attivo.
background: imposta l'immagine di sfondo sulla pagina web.
bgcolor: colore di sfondo della pagina Web.
bgproperties - determina se far scorrere lo sfondo insieme al testo oppure no.
bottommargin: rientro dal bordo inferiore della finestra del browser al contenuto.
leftmargin - margine orizzontale dal bordo della finestra del browser al contenuto.
collegamento: colore del collegamento.
scroll - imposta se visualizzare o meno le barre di scorrimento.
testo: il colore del testo nel documento.
topmargin: rientro dal bordo superiore della finestra del browser al contenuto.
vlink - colore dei collegamenti visitati.
Esempio 1: utilizzo del tag BODY
Lorem ipsum dolor sit amet, consectetuer adipiscing elit, sed diem nonummy nibh euismod tincidunt ut lacreet dolore magna aliguam erat volutpat.
Ut wisis enim ad minim veniam, quis nostrud exerci tution ullamcorper suscipit lobortis nisl ut aliquip ex ea commodo consequat.
Descrizione dei parametri del tag BODY
Parametro ALINK
Descrizione
Imposta il colore del collegamento attivo. Il colore del collegamento corrente cambia nel colore attivo quando si fa clic sul collegamento con il cursore del mouse o si seleziona utilizzando la tastiera.
Sintassi
argomenti
Il valore del colore può essere impostato in due modi.
1. Con il suo nome
I browser supportano alcuni colori tramite il loro nome.
2. Per valore esadecimale
I numeri esadecimali vengono utilizzati per specificare i colori. Il sistema esadecimale, a differenza del sistema decimale, si basa, come suggerisce il nome, sul numero 16. I numeri saranno i seguenti: 0, 1, 2, 3, 4, 5, 6, 7, 8, 9, A , B, C , D, E, F. I numeri da 10 a 15 sono sostituiti da lettere latine. I numeri maggiori di 15 nel sistema esadecimale si formano combinando due numeri in uno solo. Ad esempio, il numero 255 in decimale corrisponde al numero FF in esadecimale. Per evitare confusione nella determinazione del sistema numerico, prima del numero esadecimale viene inserito il simbolo cancelletto #, ad esempio #666999. Ciascuno dei tre colori – rosso, verde e blu – può assumere valori da 00 a FF. Pertanto, il simbolo del colore è diviso in tre componenti #rrggbb, dove i primi due simboli indicano la componente rossa del colore, i due centrali il verde e gli ultimi due il blu.
Valore di default
Corrisponde al colore del collegamento.
...
Parametro SFONDO
Descrizione
Specifica l'immagine da utilizzare come sfondo. A differenza delle immagini normali, lo sfondo non ha larghezza o altezza impostate e viene sempre visualizzato a dimensione intera al 100%. Se l'immagine è di dimensioni inferiori rispetto alla finestra del browser, l'immagine viene ripetuta orizzontalmente a destra e in basso, allineandosi come un mosaico. Per questo motivo possono verificarsi differenze visibili all'incrocio delle immagini di sfondo, evidenti ai visitatori del sito. Quando scegli un'immagine di sfondo, assicurati che ci sia abbastanza contrasto tra essa e il testo sulla pagina web. Le GIF animate possono essere utilizzate come sfondi, ma distrarranno l'attenzione del lettore.
Sintassi
argomenti
Qualsiasi indirizzo immagine valido: puoi utilizzare un percorso relativo o assoluto.
Valore di default
NO.
Esempio 3: impostare uno sfondo su una pagina web
...
Parametro BGCOLOR
Descrizione
Imposta il colore di sfondo della pagina web. Puoi utilizzare questo parametro insieme allo sfondo, scegliendo un colore di sfondo vicino all'immagine di sfondo
Sintassi
argomenti
Vedi il parametro ALINK.
Valore di default
Dipende dal browser e dalla sua versione, ma il colore di sfondo è solitamente bianco.
Esempio 4: impostazione del colore di sfondo di una pagina web
...
Parametro BGPROPERTY
Descrizione
Per impostazione predefinita, l'immagine di sfondo scorre con il contenuto della pagina web. Usando il parametro bgproperties puoi fissare lo sfondo in un unico posto e quindi forzare lo scorrimento solo del contenuto. Questa qualità di una pagina web viene utilizzata raramente per i siti web, quindi può sembrare strana e insolita agli utenti.
Sintassi
argomenti
C'è solo un parametro fisso, che fissa lo sfondo. Se desideri rimuovere questa funzionalità, rimuovi il parametro bgproperties dal tag BODY o impostalo su un valore vuoto - "".
Valore di default
NO.
Esempio 5: correzione dello sfondo
...
Nota
- Non tutti i browser supportano questa impostazione; ad esempio Netscape la ignora.
- Si è notato che quando si imposta un'immagine di sfondo su una pagina web tramite gli stili, il parametro bgproperies smette di funzionare.
Parametro LEFTMARGIN
Descrizione
Definisce la quantità di spazio dai bordi sinistro e destro della finestra del browser al contenuto della pagina web.
Sintassi
argomenti
Un numero intero positivo che specifica l'offset in pixel.
Valore di default
10 pixel per Windows e 8 pixel per Macintosh.
Esempio 6: modifica del margine sinistro
...
Nota
- Il browser Netscape non comprende il parametro leftmargin; per impostare i margini utilizza i parametri marginwidth - margini orizzontali e marginheight - margini verticali.
- Per impostare i margini dai bordi destro, inferiore e superiore, utilizzare rispettivamente i parametri rightmargin, bottommargin e topmargin.
Parametro COLLEGAMENTO
Descrizione
Imposta il colore dei collegamenti non visitati.
Sintassi
argomenti
Vedi il parametro ALINK.
Valore di default
#0000FF
Esempio 7: impostazione del colore dei collegamenti
...
Parametro SCROLL
Descrizione
Il parametro scroll controlla la presenza di barre di scorrimento nella finestra del browser quando il contenuto di una pagina web supera la dimensione della finestra corrente. Questa impostazione funziona solo in Internet Explorer.
Sintassi
argomenti
sì: visualizza le barre di scorrimento.
no: impedisce la visualizzazione delle barre di scorrimento nella finestra.
Valore di default
SÌ
Esempio 8: nascondere la barra di scorrimento
...
Parametro TESTO
Descrizione
Imposta il colore predefinito del testo utilizzato in una pagina Web. I colori dei singoli elementi possono essere facilmente modificati utilizzando gli stili.
Sintassi
argomenti
Vedi il parametro ALINK.
Valore di default
#000000
Esempio 9: modifica del colore del testo
...
Parametro VLINK
Descrizione
Definisce il colore dei link visitati, cioè dei link su cui l'utente ha già “cliccato”.
Sintassi
argomenti
Vedi il parametro ALINK.
Valore di default
#551a8b (Navigatore 4); #800080 (Internet Explorer Windows); #006010 (Internet ExplorerMacintosh).
Esempio 10: impostazione del colore dei collegamenti visitati
...
Colore del testo
Colore di sfondo
Immagine di sfondo
Colore del collegamento
Imbottitura dei contenuti
Esercizio
Come già saprai, tra il tag di apertura e cartellino di chiusura Viene inserito il corpo della pagina o il contenuto della pagina stessa. Si chiama anche la parola contenuto(dall'inglese content - contenuto). Opzioni dei tag determinare le proprietà del contenuto nel suo insieme. In questa lezione ne vedremo alcuni.
Colore del testo
Il colore del testo dell'intero documento è determinato dal parametro testo. Gli viene assegnato un nome di colore o un valore di colore esadecimale, proprio come il parametro colore etichetta (vedi Lezione 2. Formattazione di un test):
OUsando questo esempio tutto il testo sulla pagina sarà rosso.
Parametro testoè facoltativo. Se lo ometti, il testo sulla pagina sarà nero per impostazione predefinita. Probabilmente lo hai già visto facendo gli esercizi precedenti. :)
Colore di sfondo
Il colore dello sfondo della pagina è determinato dal parametro bgcolor. Accetta un nome di colore o un valore di colore esadecimale, proprio come il parametro testo.
OIn questo esempio lo sfondo della pagina sarà rosso.
Parametro bgcolorè facoltativo. Se lo ometti, lo sfondo predefinito della pagina sarà bianco. Quello che hai già visto anche facendo gli esercizi precedenti. :)
Immagine di sfondo
Utilizzando il parametro sfondo Puoi assicurarti che la pagina non abbia uno sfondo semplice, ma lo sfondo sia un'immagine. Per questo parametro sfondoè necessario assegnare il percorso all'immagine che si desidera rendere sfondo, così come il parametro src etichetta
(Vedi Lezione 5. Immagini):
In questo modo puoi, ad esempio, affiancare lo sfondo di una pagina con un qualche tipo di motivo. Ma non dovresti abusare di questa opportunità e creare immagini di grandi dimensioni sullo sfondo per non appesantire troppo la pagina.
Ad esempio, abbiamo questo frammento di un modello:
Se la rendiamo un'immagine di sfondo, otterremo una pagina con uno sfondo come questo:
Parametro sfondoè anche facoltativo. Se lo ometti, lo sfondo predefinito della pagina sarà bianco.
Colore del collegamento
Sono disponibili 3 parametri dei tag per impostare il colore dei collegamenti corpo:
A questi parametri viene assegnato il nome del colore o il suo valore esadecimale, simile ad altri parametri responsabili del colore di qualcosa.
Questo è come apparirà sulla pagina (per vedere tutti gli stati del collegamento, ricordare com'era originariamente, tenere premuto, vedere cosa è diventato e infine rilasciare, tornare a questa pagina e vedere di che colore è ):
Questi parametri sono facoltativi. Se li ometti, i colori dei collegamenti assumeranno i valori predefiniti (rispettivamente blu, rosso, viola).
Imbottitura dei contenuti
Se desideri che il contenuto della pagina si allontani di una certa quantità dai bordi della finestra del browser, in questo caso il tag corpo ci sono 4 parametri:
margine sinistro- rientro dal bordo sinistro;
margine destro- rientranza dal bordo destro;
margine superiore- rientro dal bordo superiore;
margine inferiore- rientro dal bordo inferiore.
Questi parametri assumono valori in pixel. Non sono necessari e puoi usarli tutti insieme o separatamente. Ad esempio, puoi rientrare solo a sinistra e a destra, oppure solo in alto e in basso, ecc.:
OCiao ragazzi!
Oggi ho deciso di toccare un argomento che non cesserà mai di essere rilevante tra i giovani creatori di siti web.
C'è sempre la necessità di personalizzare i siti dopo che sono stati creati. Alcune impostazioni vengono eseguite modificando i file del modello del tema installato. Ad esempio, è necessario inserire un codice che visualizzi voci simili. Ma dove inserirlo?
Molto spesso i neofiti fanno queste domande. Sono preoccupati anche per altri problemi simili, la cui soluzione è essenzialmente identica. Inoltre, nei miei articoli futuri ricorrerò spesso all'inserimento di codici in vari punti del modello. Pertanto, questo materiale è più rilevante che mai.
In questo articolo, ti mostrerò come è molto semplice per te identificare il punto nel tuo modello WordPress in cui devi inserire qualsiasi codice. Prenderò in considerazione anche altri punti importanti che potrebbero interessarti nella fase iniziale.
Cominciamo dall'inizio e guardiamo i file che potresti dover modificare se desideri inserire i codici manualmente anziché utilizzare i plugin, perché esiste questa opzione. Non lo accolgo con favore, ma comunque, per i più pigri, descriverò tali plugin nei seguenti articoli.
All'inizio tengo una lezione video, poiché senza di essa sarà difficile comprendere il materiale presentato di seguito in formato testo.
Ora ti spiegherò tutto nel dettaglio in formato testo.
File responsabili dell'output di ogni tipo di pagina
Se hai letto molti articoli su altri blog sull'implementazione di alcune funzioni utilizzando codici (script), allora sono sicuro al 100% che hai visto frasi come:
- Incolla questo codice nel file responsabile della visualizzazione della pagina principale;
- Incolla questo codice nel file responsabile dell'output dei record e altro.
Esistono molti file in cui potrebbe essere necessario inserire codici. Ma cosa sono questi file? Tutto è molto semplice.
- Output della home page - index.php;
- Output dei record - file single.php;
- Output della pagina: file page.php;
- Output di archivi e categorie - archive.php;
- Output piè di pagina - footer.php;
- Risultati della pagina di ricerca - search.php;
- Output della barra laterale - sidebar.php;
- File di stile - style.css;
- Il file di output di 404 pagine è 404.php.
Ora, quando ti diranno che devi incollare il codice in questo o quell'altro file, saprai dove cercare.
Non resta che rispondere alla domanda: come determinare il posto giusto in ciascuno dei file?
Determinare dove inserire il codice
Per prima cosa, esaminiamo quei luoghi che non hanno bisogno di essere identificati. Saranno gli stessi per tutti, indipendentemente dal modello.
Il primo posto, identico per tutti i template, è l'area nel file Header.php. Questi sono i tag di apertura e chiusura
.Alcuni script vengono sempre inseriti tra questi tag, il che dovrebbe funzionare per tutte le pagine del sito. Cioè, abbiamo inserito uno script, ad esempio, per i pulsanti social tra questi tag e funzionano su tutte le pagine del sito in cui li visualizzeremo.
Questi tag si trovano nella parte superiore del file Header.php.
Il contenuto intermedio sarà diverso per ognuno, poiché tutto dipende dal modello.
Se ti viene detto che devi inserire questo codice tra i tag head di apertura e chiusura, copia il codice, cerca un'area simile nel tuo file modello e incollalo semplicemente tra questi tag.
Il secondo posto, identico per tutti i modelli, si trova nel file responsabile dell'output del footer - footer.php.
Gli script possono essere collegati non solo inserendoli tra i tag
nel file Header.php. Puoi caricarli anche tramite il file footer.php, velocizzando così il caricamento della pagina del sito.Il fatto è che quando la pagina inizia a caricarsi, viene caricata dall'alto verso il basso. Se tutti gli script sono nella parte superiore della pagina, la visualizzazione del suo contenuto rallenterà, poiché ci vorrà del tempo per caricare gli script.
Il nostro compito è mostrare il contenuto della pagina il più rapidamente possibile sia ai visitatori che ai motori di ricerca. In questo caso è consigliabile caricare gli script alla fine della pagina per mostrare prima il contenuto e poi caricare tutto il resto.
Per implementare questa opzione è necessario aprire il file footer.php e inserire lo script prima del tag body di chiusura. Si trova alla fine del contenuto del file, poiché è responsabile della fine dell'area della pagina.
Come puoi vedere, ho visualizzato tutti gli script in quest'area, prima del tag di chiusura(evidenziato con una cornice blu). A proposito, li ho visualizzati caricando da file e non inserendo gli script stessi in quest'area. Successivamente, ho accelerato notevolmente il blog. Come farlo sarà un articolo separato. Aspettare!
Spero che quando ti diranno di incollare il codice in queste aree, lo farai senza problemi.
Passiamo a una questione più complessa e proviamo a imparare come identificare luoghi in altri file modello in cui vengono inseriti vari altri codici. In genere, questi codici includono:
- Visualizza post simili;
- Output del modulo di sottoscrizione;
- Visualizzazione dei pulsanti social e così via.
Tutte queste cose vengono inserite dopo la parte principale del contenuto, cioè dopo la fine dell'articolo. Ognuno ha un codice modello diverso e, quindi, una risposta universale alla domanda "Dove finisce il codice di output del mio articolo?" semplicemente no.
Ma puoi facilmente determinare la fine del codice, dopo di che devi implementare la funzione di cui hai bisogno. Ho già parzialmente mostrato questo metodo nell'articolo sulla scelta di un modello WordPress (). Ho quindi utilizzato la funzionalità standard di un browser Internet.
Per comprendere meglio l'essenza di questo metodo, consiglio vivamente di guardare il video all'inizio di questo post. In esso ho mostrato come tutto accade in tempo reale. Bene, ora proverò a descriverlo nel modo più chiaro possibile.
Ti mostrerò utilizzando il browser Google Chrome come esempio. Anche altri browser hanno questa funzione, ma potrebbero avere un nome leggermente diverso.
- Google Chrome: visualizza il codice dell'elemento;
- Firefox: elemento esplora;
- Opera: ispeziona un elemento.
Il principio è simile in 3 browser. Ora ti mostrerò come determinare la posizione di qualsiasi area in qualsiasi modello.
Vai a visualizzare il codice dell'elemento (Google Chrome). Fare clic con il tasto destro su un'area vuota della pagina.
Successivamente, in fondo alla pagina appare un pannello che mostra l'intero codice sorgente della pagina, che possiamo modificare e vedere come cambieranno la struttura e l'aspetto del modello in tempo reale. Ma le modifiche ai dati non vengono salvate. Per fare ciò, è necessario modificare i file modello stessi.
Ecco come appare il pannello.
Ho indicato con una freccia una lente d'ingrandimento, facendo clic sulla quale possiamo ispezionare la struttura del modello e determinare da quali blocchi è composto il nostro modello. Chiamo questa funzione l'ispettore.
Dopo aver cliccato sull'ispettore, possiamo muovere il mouse sulla nostra pagina e vedremo che tutti gli elementi su cui passiamo il mouse iniziano ad essere evidenziati con uno sfondo colorato. Ad esempio, ti mostrerò uno screenshot di un articolo sulla scelta di un modello. Lì ho passato il mouse sul titolo del post.
Se dobbiamo inserire del codice dopo l'output del nostro articolo, allora non è difficile intuire che dobbiamo ispezionare l'area del nostro template e trovare il blocco che contiene tutto il contenuto dell'articolo. Puoi cercare sia la fine del blocco che l'inizio. Cioè, puoi ispezionare il modello sia dal basso che dall'alto.
Ma ecco una nota . Dobbiamo trovare non solo le righe dell'articolo, ma proprio i blocchi in cui si trova il contenuto stesso, poiché nei file modello non ci sono articoli. Esiste solo il codice che visualizza il contenuto ed è racchiuso in blocchi. Subito dopo il tag del blocco di chiusura
