html e css - scrivere codice come testo

Html e CSS: scrivere codice come testo

Essendo un blog che si occupa di fare guide in italiano e che cerca di farle nel modo più accurato e semplice possibile come conseguenza naturale facciamo anche molta ricerca e in questo periodo ci siamo imbattuti in molti forum dove spesso viene chiesto proprio come è possibile in Html e CSS scrivere codice come testo, nella maggior parte delle occasioni però le risposte più valide arrivano da siti internet in inglese, che per quanto sia una lingua essenziale da conoscere nell’ambito informatico, non è così scontato che tutti lo sappiano, e in ogni caso non è da tutti conoscere l’inglese tecnico; ecco perché oggi vogliamo esporvi 2 metodi che reputiamo efficaci al fine di mostrare parte di codice senza che venga interpretato dal browser, principalmente soprattutto grazie al codice HTML, ma vi daremo anche 2 consigli su come “abbellirlo” e visualizzarlo al meglio grazie al CSS.



Indice

Scrivere i caratteri speciali in codice HTML

Torna all’indice



Questo è un metodo semplice, ma che a volte crea confusione, perché consiste nel sostituire all’interno del codice che volete che si veda i caratteri speciali, (ad es. le virgolette o le varie parentesi) con i codici HTML corrispondenti. Non è difficile applicarlo, bisogna solo fare molta attenzione a ciò che scriviamo. Vi facciamo subito un esempio.

Poniamo il caso che abbiate la necessità di mostrare come è stata scritta una parte di testo in codice HTML come questa:

I computer sono incredibilmente veloci, accurati e stupidi. Gli uomini sono incredibilmente lenti, inaccurati e intelligenti. L’insieme dei due costituisce una forza incalcolabile. – Albert Einstein

Per mostrare il testo sotto forma di codice HTML, senza che venga interpretato dal browser dovrete scrivere così:

<p style="text-align: center; font-size: 18px"> I <strong>computer</strong> sono incredibilmente veloci, accurati e stupidi. Gli <strong>uomini</strong> sono incredibilmente lenti, inaccurati e intelligenti. L’insieme dei due costituisce una forza incalcolabile. – <cite>Albert Einstein</cite></p>

Il risultato visivo che otterrete sarà proprio questo:

<p style="text-align: center; font-size: 18px"> I <strong>computer</strong> sono incredibilmente veloci, accurati e stupidi. Gli <strong>uomini</strong> sono incredibilmente lenti, inaccurati e intelligenti. L’insieme dei due costituisce una forza incalcolabile. – <cite>Albert Einstein</cite></p>

Come potrete notare leggendo attentamente abbiamo sostituito i caratteri speciali con i corrispondenti in HTML.

Carattere speciale Codice HTML
&quot;
< &lt;
> &gt;
&ndash;

Niente di proibitivo dunque, ci vorrà solo un minimo di conoscenza di HTML e di concentrazione.

Scrivere il codice all’interno del tag <textarea>

Torna all’indice

Secondo metodo che abbiamo trovato pratico e che non richiede grosse conoscenze di codice è proprio l’utilizzo del tag “textarea” associato a due o più attributi. Qui sotto vi riportiamo il codice che dovrete utilizzare.

<textarea readonly="readonly" cols = "50" rows = "10">I <strong>computer</strong> sono incredibilmente veloci, accurati e stupidi. Gli <strong>uomini</strong> sono incredibilmente lenti, inaccurati e intelligenti. L’insieme dei due costituisce una forza incalcolabile. – <cite>Albert Einstein</cite> </textarea>

Il risultato sarà questo:

In questo caso noi abbiamo usato 4 attributi associati al tag “textarea”:

  • name = definiamo il nome della’aerea di testo.
  • readonly = con valore readonly gli abbiamo detto che deve essere di sola lettura, se lo omettiamo diventerà un aria di testo con possibilità di scrittura.
  • cols = con valore numerico di 50 gli stiamo specificando la larghezza visibile dell’area di testo.
  • rows = con valore numerico di 10 gli specifichiamo il numero visibile di linee dell’area di testo.

Questa tecnica non è la più bella a vedersi, ma è quella più veloce da eseguire e che ci da meno da pensare, veloce e pratica. Volendo, inoltre, aggiungendo la regola “textarea {resize: none;}” al CSS toglieremo il ridimensionamento in basso a destra dell’area di testo, evitando così che gli utenti ne modifichino la grandezza

Creare una classe apposita per il codice

Torna all’indice

Grazie ai fogli di stile abbiamo la possibilità di gestire come visualizzare il codice al meglio delle nostre necessità. Ad esempio noi abbiamo deciso di usare un colore di sfondo, un bordo con uno spessore e un colore precisi e un carattere diverso dal resto del sito.
Questo il codice CSS da aggiungere:

.esempiocodice {
height: auto;
width: 400px;
font-family: sans-serif;
background : #d1ffd4;
border : 2px solid #64fb6f;
padding : 20px;
}

Anche questo non è così complicato da fare e vi aiuta mettere in risalto la parte di testo o di codice che vi interessa. Nel nostro caso abbiamo usato un selettore di classe (.esempiocodice) e nel blocco delle dichiarazioni (cioè tutto ciò che sta dentro le parentesi graffe) abbiamo messo come proprietà l’altezza (height, con valore auto che si regolerà in base al contenuto), la larghezza (width, con valore numerico in px), il carattere con cui impostare la parte di codice (font-family), il colore dello sfondo (background, con un valore numerico che abbiamo indicato con un numero esadecimale), il bordo (border, a cui abbiamo detto di essere spesso di due px, pieno e di un colore con valore numerico indicato sempre con un numero esadecimale ) e lo spazio di distanza all’interno dei bordi dell’elemento (padding, con valore numerico); dopo di che abbiamo dato una classe ad un paragrafo ( <p class = "esempiocodice">Testo/Codice<p>) ottenendo così il risultato voluto.
Speriamo davvero di esservi stati utili e di aver chiarito come è possibile visualizzare del codice come testo senza che il browser lo interpreti, grazie al codice HTML e CSS.

Seguici sui nostri canali Social:

icona Facebook Guida in Italiano icona Instagram Guida in Italiano icona Telegram Guida in Italiano icona youtube Guida in Italiano

Qualche info sul Team

  • Oltre 12 anni di esperienza sull’informatica
  • Oltre 4 anni di esperienza sulla grafica
  • Oltre 5000 problemi tecnici risolti
  • Tanta tanta tanta passione
Copyright © 2020 Guida in Italiano - Tutti i Diritti sono riservati
Powered by Riparto dal Web Torino e provincia
Siti Web | Seo | Marketing Digitale a Torino