Come inserire un commento in HTML e CSS e simboli speciali o emoji.

Questa lezione vorrei dedicare ai momenti particolari di linguaggi HTMl e CSS. Vediamo come inserire un commento. Inserire commenti non solo faciliterà la nostra vita nel futuro (se per caso dovessimo cambiare qualcosa) ma anche vita di altri. Penso che leggendo l'articoli sul nostro sito avete visto che cerchiamo sempre in codici di esempi inserire  dei commenti per spiegarti meglio ogni fase della scrittura del codice. E nella seconda parte del articolo vediamo come con aiuto CSS e HTML posiamo inserire sulla nostra pagina caratteri speciali del HTML o cosi detti  simboli emoji.

Esso rappresentano la costruzione di  SGML (in inglese Standard Generalized Markup Language -. standarto di linguaggio di markup generalizzato), che si riferisce ai caratteri specifici. In sostanza, essi sono utilizzati per specificare i simvoli che non si trovano in una tastiera di computer standard, o che non supportano la codifica delle pagine HTML (Windows 1251, UTF-8, ecc.)

1. Commenti nel HTML

Diciamo che è una cosa molto facile inserire un commento nel codice  HTML, si utilizza la costruzione <!--    il nostro comento  ---> Vediamo un esempio per come inserire un commento

<!-- primo blocco --> 
<div> 
<p>Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Aenean commodo ligula eget dolor. Aenean massa. Cum sociis natoque penatibus et magnis dis parturient montes, nascetur  </p>
</div>
<!--  blocco successivo,  per adesso lo commentato e non sara piu visibile al utente sulla pagina ma rimane sempre nel codice e magari domani ci sara  utile.  
<div> 
<p>Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Aenean commodo ligula eget dolor. Aenean massa. Cum sociis natoque penatibus et magnis dis parturient montes, nascetur  </p>
</div>-->

Guarda anche il video tutoriel dedicato ai commenti dal nostro corso gratuito dedicato al linguaggio HTML

 

animatedDude

video prevui

2.Commenti nel linguaggio CSS

Anche qui e tutto abbastanza facile si utilizza la costruzione /* */ e al interno il nostro commento o pezzo del codice che vogliamo commentare, escludere dalla visualizzazione ma non cancellare dal foglio!!! magari ci servirà nel futuro

Vediamo un esempio

/* Blocco involucro */
  .main {
margin:0 auto;
width:940px;
position:relative;
/* 
  h2 
font-size:26px;
line-height:28px;
}
*/
/*abbiamo commentato questa proprietà del CSS e quindi non sara piu presa in considerazione nel attribuire questo stile al paragrafo con il tag H2*/

 

3. Simboli speciali di HTML e CSS o emoji

Per inserire un simbolo su una pagina web, è necessario specificare il codice HTML o emoji.

Simboli speciali sensibili al registro quindi devi scriverli  esattamente come indicato nella tabella. I simboli speciali che non possiedono un mnemonico di riferimento potrebbero non  essere visualizzate affatto in varie browser.

Per inserire un simbolo speciale o mnemonico utilizzate il rispettivo codice  HTML e per inserirli nel codice CSS si usa valore  content :' '  in combinazione con pseudo classi :before e :after che rispettivamente meterano il nostro simbolo speciale prima o dopo elemento a qui sono stati attribuiti.

Caratteri speciali ereditano il colore dal colore dell'elemento genitore del testo. Per cambiare il colore di un simbolo, è possibile inserire  codice HTML all'interno del tag <span> o impostare il valore desiderato nel css per la  proprietà color  (quando s simboli speciali vengono inserirti tramite proprieta content ).

Vediamo subito un esempio di che cosa si tratta, prima il codice HTML puoi il risultato

<p>  Il nostro oroscopo per segno di &#9800; <!-- il codice che inserisce il segno di ariete-->Ariete 21 Marzo - 20 Aprile 
Cura  del corpo, così vuole la coppia Luna-Giove nella vostra sesta Casa, che oltre che di lavoro parla anche di salute,
</p>

E con il nostro commento nella versione HTML  abbiamo anche indicato nel codice cosa significano questi simboli

Il nostro oroscopo per segno di ♈Ariete 21 Marzo - 20 Aprile. Cura parossistica del corpo, così vuole la coppia Luna-Giove nella vostra sesta Casa, che oltre che di lavoro parla anche di salute,

Vediamo la stessa cosa anche nel linguaggio CSS

<p class="ariete">Amore: Vita di coppia all’insegna dell’amore. Le stelle infatti promettono un’attività sessuale arricchita da un’insolita dose di erotismo a ravvivare la fiamma della passione. Imparerai anche i simboli speciali dopo l'amore fatto....  </p>
/* stile CSS è il nostro commento per il codice che segue */
 .ariete:before{
     content:'\2648 ';/* come vediamo il codice per inserire un simbolo speciale nel CSS e nel HTML sono diversi*/ 
color: #F41A1A;
font-size: 25px;
font-weight: bold;/* e con ultime tre proprietà CSS indichino colore peso e l'altezza del nostro mnemonico */

Vediamo il risultato

Amore: Vita di coppia all’insegna dell’amore. Le stelle infatti promettono un’attività sessuale arricchita da un’insolita dose di erotismo a ravvivare la fiamma della passione. Imparerai anche i simboli speciali dopo l'amore fatto....

 

E dopo che abbiamo capito come decorare il nostro simbolo speciale vediamo di inserirlo nel nostro codice HTML tramite il tag <span></span> indicando per questo tag classe ariete dal esempio sopra quindi avremo questo codice

<p >Amore: nel segno di <span class="ariete"></span>Vita di coppia all’insegna dell’amore. Le stelle infatti promettono un’attività sessuale arricchita da un’insolita dose di erotismo a ravvivare la fiamma della passione. Imparerai anche i simboli speciali dopo l'amore fatto.... </p>

Amore: nel segno di Vita di coppia all’insegna dell’amore. Le stelle infatti promettono un’attività sessuale arricchita da un’insolita dose di erotismo a ravvivare la fiamma della passione. Imparerai anche i simboli speciali dopo l'amore fatto....

 

E ora il momento di vedere i codici di simboli speciali

Segni e simboli utiliSegni zodiacali Semi delle carte
Vista Codice HTMl Codice CSS
&#9731; \2603
&#9766; \2626
&#9875; \2693
&#10163; \27B3
&#9990; \2706
&#9749; \2615
&#9998; \270E
&#9999; \270F
&#10000; \2710
&#10001; \2711
&#10002; \2712
&#9884; \269C
&#9937; \26D1
&#9885; \269D
&#10052; \2744
&#10084; \2764
&#10053; \2745
&#10054; \2746
&#9733; \2605
&#9734; \2606
&#10026; \272A
&#10027; \272B
&#10031; \272F
&#10057; \2749
&#10059; \274B
&#10034; \2732
&#9055; \235F
&#8859; \229B
&#9728; \2600
&#9729; \2601
&#9730; \2602
&#9745; \2611
&#9746; \2612
&#9785; \2639
&#9786; \263A
&#9787; \263B
&#9776; \2630
&#10047; \273f
&#10048; \2740
&#10046; \273E
&#10049; \2741
&#10050; \2742
&#9993; \2709
&#10086; \2766
&#10102; \2776
&#10103; \2777
&#10104; \2778
&#10105; \2779
&#10106; \277A
&#10107; \277B
&#10108; \277C
&#10109; \277D
&#10130; \2792
&#10131; \2793
&#10144; \27A0
&#10148; \27A4
&#10149; \27A5
&#10150; \27A6
&#10076; \275C
&#10075; \275B
&#10006; \2716
&#10008; \2718
&#10004; \2714
&#10010; \271A
&#8634; \21BA
&#8635; \21BB
Vista Codice HTML Codice CSS
&#9800; \2648
&#9801; \2649
&#9802; \264A
&#9803; \264B
&#9804; \264C
&#9805; \264D
&#9806; \264E
&#9807; \264F
&#9808; \2650
&#9809; \2651
&#9810; \2652
&#9811; \2653

 

VistaCodice Codice HTML Codice CSS
&spades; \2660
&clubs; \2663
&hearts; \2665
&diams; \2666
&#9825; \2661
&#9826; \2662
&#9828; \2664
&#9831; \2667
Letto 1838 volte

corso CSS pratica

Impara HTML e CSS da zero al risulto!

Da piccolo hai imparato leggere leggendo libri. E con aiuto del nostro corso imparerai CSS e HTML costruendo un sito web da un templat in PSD .

Scopri il corso