Web Realize - Editor HTML, CSS e JS

Benvenuto !

Ti diamo il benvenuto nell'editor
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 e Codici CSS, è adatto anche ai più esperti.

Puoi trovare sul nostro sito anche tutorial di HTML, CSS e JAVASCRIPT.

Come usare Web Realize

Come utilizzare il Tools

Il tools è utilissimo per chi è inesperto su html, css e javascript, si possono trovare dei bottoni come esempio su Tag HTML se clicchi su BODY inserirà i tag <body> ... </body> sul editor HTML, oltre a inserire il Tag HTML, Attributi HTML etc. la funzione del elemento verrà spiegata con una piccola descrizione sulla Textbox accanto ai bottoni, ecco un esempio:

Nelle sezioni Tag HTML, Attributi HTML e Proprietà CSS troverai quasi tutti i tag, attributi HTML e proprietà CSS, non sono tutti, ma sono solo alcuni per iniziare a capire come funziona HTML e CSS.

Tutorial

Nella sezione Tutorial trovarai tutte le discussioni sui tutorial o problemi per HTML e CSS, basterà cliccare sul titolo e si aprirà una nuova pagina.

Esercizi

Nella sezione Esercizi trovarai dei esercizi da completare per HTML e CSS ottimo per chi è agli inizi.

Helper

La sezione Helper è come un terminale ma interno, serve per facilitare all'utente l'inserimento dei codici html e css.
Per esempio se digiti sul terminale Helper img URL_IMMAGINE nell'editor inserirà <img src="URL_IMMAGINE" alt="..." />

Creazione 3...

HTML
CSS
JavaScript

<meta charset="UTF-8" />

<!-- 
Questo fornisce al browser le istruzioni su come controllare le dimensioni e il ridimensionamento della pagina.

La width=device-width parte imposta la larghezza della pagina per seguire la larghezza dello schermo del dispositivo (che varierà a seconda del dispositivo).

La initial-scale=1.0 parte imposta il livello di zoom iniziale quando la pagina viene caricata per la prima volta dal browser.
 -->
<meta name="viewport" content="width=device-width, initial-scale=1.0">

<title>Titolo Pagina</title>

<meta name="description" content="Questa è una descrizione" />

<meta name="keywords" content="HTML, CSS, JAVASCRIPT" />

<div class="Boxesempio"> 
   
 
<h1 class="titolo">Questo è un esempio dell'intestazione</h1>

<h4 id="dettagli">Esempio intestazione</h4>

<p style="font-size:13px;color:black;">Esempio paragrafo</p>

<br />

<button class="bottone">Bottone</button>
  <button class="bottone" onclick="prova()">Per JavaScript</button>

</div>

</body>

</html>

/* QUESTO È UN COMMENTO */

/* Questo è per il body */
body {
   margin: 0px;
   padding: 0px;
   background-color: #000;
}

/* Un selettore di classe è un nome preceduto da un punto ("." HTML: class="Boxesempio") */
.Boxesempio {
   text-align: center;
   background-color: #fff;
   color: #000;
   padding: 15px;
   width: 300px;
   margin: 0px auto;
  
}

/* Un selettore di ID è un nome preceduto da un carattere cancelletto ("#" HTML: id="dettagli")  */
#dettagli {
  background: #156A95;
  padding: 5px;
  color: #fff;
  border: 1px solid #F44336;
  text-align: center;
  margin:0px auto;
}

/* La regola @media viene utilizzata nelle media query per applicare stili diversi a diversi tipi di media / dispositivi.

Le media query possono essere utilizzate per controllare molte cose, come:

larghezza e altezza della finestra
larghezza e altezza del dispositivo
orientamento (il tablet / telefono è in modalità orizzontale o verticale?)
risoluzione

*/
@media only screen and (max-width: 425px) { 
.Boxesempio {
   text-align: center;
   background-color: #E30000;   
   padding: 5px;
   width: 100%;
}
  
  
  
#dettagli {
  width: 80%;
}
  
}

Anteprima intero

Anteprima