Guida & Codici HTML

[Andrew1684]

Di seguito una breve descrizione/guida all'HTML per spiegare, in due parole, cos'è esattamente questo linguaggio e come può essere usato nel Forum.

Il post potrà essere aggiornato man mano con nuove righe di codice al fine di suggerire agli utenti tutti degli spunti per le proprie carriere, qualora vogliate usufruirne.



Anzitutto partiamo dal principio: HTML è l'acronimo di HyperText Markup Language, in italiano sarebbe Linguaggio di descrizione con ipertesti.

E' sostanzialmente uno dei linguaggi più usati (e personalizzabili) nella scrittura di documenti da visualizzare online.

La stesura dei codici di per sè è macchinosa e difficile per i non addetti ai lavori, e comunque non siamo qui per parlare di impaginazioni di siti web o scrittura specifica in soccorso dei meno esperti ci sono degli editors adibiti a ciò.

Cosa sono? Dei programmi che aiutano chi approccia il mondo HTML alla scrittura ed alla correzione di righe di codice pre-impostate per le operazioni più semplici, di seguito ne riporto un paio

Atom (Windows/Linux/Mac)

Notepad++ (Windows)

Visual Studio Code (Windows/Linux/Mac)

Ce ne sono molti altri ovviamente, sentitevi liberi di ricercare e trovare quello che più vi aggrada qualora siate interessati.



Ma in soldoni a cosa ci serve tutto ciò?

Beh ad esempio ad abbellire le nostre Carriere: oltre ad introdurre particolari grafici intriganti e non replicabili altrimenti, se ben usato può essere combinato con immagini, layouts, loghi, icone, menù (ecc...) al fine di personalizzare la propria narrazione.

Di seguito alcuni esempi di come questo linguaggio può personalizzare il vostro stile, vi riporterò vari "effetti" con il codice di fianco: per visualizzarvelo lo scriverò volutamente sbagliato lasciando al fianco del "<" di apertura uno spazio di troppo.



Prima di procedere oltre e addentrarci in alcuni esempi del vastissimo mondo del linguaggio HTML e CSS eccovi alcuni link che vi potranno tornare utile in caso di bisogno:

• www.html.it/guide/guida-html/
  
• www.html.it/guide/guida-css-di-base/
  
• https://css-tricks.com/ (in inglese)
  
• www.w3schools.com/css/ (in inglese)
  
• www.elamedia.it/guida-html.html
  
• https://graficamagica.forumfree.it/?t=4754...vaZdrTjNJH5ltTY
  
• https://developer.mozilla.org/it/docs/Web/HTML/Element
  
• Codice dei colori: https://encycolorpedia.it
  

Testo che scorre verso sx: < marquee direction="Left"> Abracadabra di qua



Abracadabra di qua



Verso dx: < marquee direction="Right">Abracadabra di la



Abracadabra di la



Verso l'alto: < marquee direction="up" scrollAmount=1 height="30" width="70%">Abracadabra in su



Abracadabra in su



(Notare che in questo codice sono presenti anche parametri di "height" e "width" per la personalizzazione di lunghezza ed altezza dell'immagine, ovviamente utilizzabili anche nelle foto)



Verso il basso: < marquee direction="Down">Abracadabra in giù



Abracadabra in giù



Bottone: < button> *clicka qui



*clicka qui



Linea divisoria: < span style="float: left; margin-right: 50px; padding-right: 50px;border-right: 1px solid #000;">testo

testo

testotesto

testo

testo



testo

testo

testotesto

testo

testo



Testo a scorrimento, come sopra, ma con rimbalzo: < marquee align="top" behavior="alternate" scrolldelay="5">Blabla



Blabla



Testo all'interno di un rettangolo:

< fieldset style="border: 6px solid #COLORE BORDO; margin: 0px; width: DIMENSIONE RIQUADRO px;background-color:#COLORE SFONDO;"> blablablablabla.

< /fieldset>

blablablablabla.

Testo e immagini all'interno di una cornice con il contenuto centrato:

< div>< fieldset>< legend>immagine e/o testo a vostro piacimento< /legend>

< p align="center">tutto all'interno della cornice in questo caso verrà centrato< /p>< /div>< /fieldset>

immagine e/o testo a vostro piacimento

tutto all'interno della cornice in questo caso verrà centrato

Aggiungere riga orizzontale divisoria:

LINEA CONTINUA: < hr style="border-top: 1px solid colore;"/ >

LINEA TRATTEGGIATA: < hr style="border-top: 1px dashed colore;"/ >

LINEA PUNTEGGIATA: < hr style="border-top: 1px dotted colore;"/ >

LINEA PIÙ SPESSA: < hr style="border-top: 5px solid colore;"/ >

LINEA PIÙ SPESSA CON BORDI STONDATI: < hr style="border-top: 5px solid colore; border-radius: 5px;"/ >



Insomma, chi più ne ha più ne metta. :surprised:

Ovviamente questa è solo la punta dell'iceberg, sono solo dei suggerimenti per le vostre possibili creazioni: sperimentate la cosa come meglio credete partendo da cose semplici, specialmente abbinandoci immagini!

Buon divertimento a tutti  :cool2: