Web Realize - Editor HTML, CSS e JS
Aggiorna il tuo account per nascondere gli annunci pubblicitari.

Cos'è Web Realize

Web Realize è un editor di HTML, CSS e JavaScript, nasce principalmente per aiutare a imparare e creare un sito web in HTML e CSS, Infatti il nostro editor ha la Sezione Tools proprio per i meno esperti, all'interno di esso puoi trovare i Tag HTML, Attributi HTML, Codici CSS e Tabella Colori, è adatto anche ai più esperti.


Come utilizzare il Tools

Troverai dei bottoni con scritto l'elemento (esempio su Tag HTML se clicchi su BODY sul editor HTML apparirà il tag <body> ... </body>), una volta che ci cliccherai oltre a inserire il Tag HTML, Attributi HTML etc. la funzione del elemento verrà spiegata sulla TextBox sotto al Tools.
Ecco dei esempi delle Tab.
Tag HTML:


I tag HTML devono essere posizionati in maniera adatta, quando clicchi un bottone su tag HTML nell'editor HTML verrà inserito il codice a caso, dovrai sistemarlo tu nella maniera più giusta.


Attributi HTML:


Gli attributi HTML dopo che cliccherai i bottoni verranno inseriti sul editor di HTML è importante se non si è esperti che tu li inserisca dentro un tag e vedere nella spiegazione se è supportato per quel tag un esempio:


Come si vede dall'immagine, l'attributo che ho scelto non va bene con quel tag html, infatti come c'è scritto sulla textbox action=" ... " è supportato solo per il tag <form> e non per tutti.


Codici CSS:


Dopo che cliccherai i bottoni, nel editor CSS verrà inserito il codice CSS dovrai sistemarlo perché sono inseriti per dare l'esempio di come funzionano i codici CSS, per esempio
Se clicchi sul bottone Background la spiegazione verrà inserita sulla textbox, invece il codice verrà inserito sul editor CSS e sarà:
background: red|#fff|url("/esempio/img.jpg") no-repeat fixed center|initial|inherit; Le sbarre | servono per far capire la funzione che puoi inserire in quel determinato codice e quindi queste sbarre che vedi sono solo per dividere le funzioni,
tipo background: red; oppure background: #fff stessa cosa per url("/esempio/img.jpg") no-repeat fixed center

N.B per evitare rallentamenti sul caricamento della pagina abbiamo evitato di inserire tutti codici CSS, abbiamo messo solo quelli più usati, nei prossimi aggiornamenti inseriremo altri codici CSS in un'altra pagina.


Tabella Colori:


Questo strumento è molto utile per decidere il colore del background, del testo e altro.
Abbiamo inserito questo strumento per facilitare l'uso dei colori, infatti invece di cercarli su internet, si può tranquillamente trovarli tramite questo strumento, dopo che cliccate sul colore vi aprirà una finestra di colori e li potete mettere il colore che desiderate inserire, dopo dovete cliccare Ok e verrà inserito sulla Textbox e potete copiarlo tramite il bottone "Copia" o con Ctrl + C, pronto per essere inserito sul editor html o css.
ecco un esempio:




Come utilizzare l'editor HTML, CSS e JavaScript

L'editor ha 3 Tab e sono HTML, CSS e JavaScript, potrai utilizzare CSS e JavaScript separati dal HTML e poi salvandoli nel vostro computer, ecco dei esempi.
I tab HTML, CSS e JavaScript:



Salvataggio codici HTML, CSS e JavaScript



Caricare codice dal proprio computer


Con Carica codice puoi caricare codici HTML dal tuo pc con l'estensione .html e .txt

N.B per ora è disponibile caricare solo i file sul tab HTML con l'estensioni .html e .txt, nei prossimi aggiornamenti inseriremo anche sui tab CSS e JavaScript.


Cercare un elemento nell'editor



Cancellare tutto il codice



Annullare e Ripristinare azioni



La mancanza di un tag può causare errori, l'editor ti avviserà se c'è qualcosa che non va



Se selezioni con il mouse l'inizio di un tag ti verrà evidenziato anche la chiusura del tag o viceversa.




Come utilizzare L'anteprima

Nell'anteprima che si trova accanto all'editor si può visualizzare il lavoro che si sta facendo in tempo reale.

Nell'anteprima tramite i bottoni in alto a sinistra si puo vedere anche la visualizzazione dei dispositivi Smartphone, Tablet e Desktop (prossimamente ci sarà anche laptop).



Infine in alto a destra c'è Schermo intero dove puoi visualizzare il tuo lavoro a schermo intero (una volta finito di visualizzarlo a schermo intero premi ESC).



Come cambiare posizione dell'editor e dell'anteprima

Se non ti trovi bene con la visualizzazione di default dell'editor, dell'anteprima e del tools, puoi cambiare posizioni tramite il bottone "Cambia posizione"



Puoi attivare la modalità trascina per spostare a tuo piacimento i box, ma ricorda di disattivarla dopo aver spostato i box.


Per disattivare la modalità trascina


Qui puoi creare la tua pagina in HTML, CSS e JAVASCRIPT o fare altro.

Abbrevia Url
Tools
  • Tag HTML
  • Attributi HTML
  • Codici CSS
  • Tabella Colori
Tag HTML
Attributi HTML
Codici CSS
Tabella Colori
Scegli un colore:

Codice Hex:
Cambia posizione
  • HTML
  • CSS
  • JavaScript
HTML
Seleziona tutto Carica codice
CSS
Seleziona tutto

Finalmente hai finito, adesso puoi decidere se pubblicare i codici su natnox e condividerli con gli altri utenti o salvarli nel tuo account natnox privatamente.




Aggiorna il tuo account per nascondere gli annunci pubblicitari.