Sito Progetto Italiano by @PicentinoD - Codewith.it

#main, .loader-cont { display: none; } JavaScript disabilitato.
Non puoi usare Codewith.it senza JavaScript.

References

<embed>Tag per l'incorporamento di contenuti multimediali
<blockquote>Inserisce citazioni in un documento HTML
acceptDefinisce e filtra il formato dei file per il tag <input type=file>
rowspanDefinisce il numero di righe su cui una cella di una tabella deve estendersi.
autocompleteIndica l'opzione di auto completamento delle aree di input e/o di un form
placeholderDefinisce un testo segnaposto per un elemento input o textarea

Users

Log in to search for users

Explore

Find inspiration

la biblioteca di Francesc

Esercitazione Informatica

esercizio_tabella.htm.

Esercitazione n. 1(2)

HTML

CSS

JS

terminal console

feedback

add_box New

cookie Policy

Privacy information and cookies

We use cookies or technologies for technical purposes and, with your consent, also for other purposes as specified in the cookie policy. Refusal of consent may make some functions unavailable. Read more about the privacy policy

Click on “Agree” to confirm.

<!DOCTYPE html>
<html>
  <head>
    <meta charset="utf-8">
    <link rel="stylesheet" type="text/css" href="styles.css" />
    <title>L'illuminismo
    </title>
    <style>
	p {
  	background-color: #DBC9AC;
      text-align: left;
      font-family: "Arial";
      font-style: italic;
      line-height: 100%;
	}
      h2 {
        color: #E7EAEF;
        background-color: #9C4A1A;
        text-align: center;
      }
      h3 {
        text-shadow: 0 0 5px rgba(13,13,13,1);
      }
      h4 {
        color: #FF0000;
      }
      #titolo-tabella {
        text-align: center;
        color: #217074;
      }
    </style>
  </head>
  <body bgcolor="#E6D6BB">
    <div class="header">
  <a href="#default" class="logo">L'illuminismo</a>
  <div class="header-right">
    <a class="active" href="#Giovanni">Giovanni</a>
    <a href="#Illuminismo">Illuminismo</a>
    <a href="#Esponenti">Esponenti</a>
    <a href="#Beccaria">Beccaria</a>
  </div>
</div>
    <div class="content">
    <div id="Giovanni">
      <h2 class="Giovanni"> Giovanni Senzaterra </h2>
      <h4>Giovanni Senzaterra e la Magna Charta libertatum</h4>
      <p > Dopo lo scioglimento del patto di obbedienza e della marcia verso Londra (dovuto al non aver rispettato i diritti e privilegi) dei borghesi nei confronti di Giovanni senza terra che fu costretto a concedere la Magna carta libertatum. <br>
      La Magna Charta riconosce per iscritto i diritti dei feudatari, della Chiesa, delle città inglesi e degli «uomini liberi» (escludendo dunque i servi della gleba) nei confronti del sovrano d'Inghilterra, limitandone i poteri.
      </p>
      <img src="https://i0.wp.com/www.frammentirivista.it/wp-content/uploads/2021/01/5cc100162400003300221a91.jpeg?ssl=1" alt="Giovanni Senzaterra"
           height = "300" class="center"/>
    </div>
    <div id="Illuminismo">
      <h2 class="Illuminismo">L'illuminismo</h2>
      <h4>L'età dei lumi: Il ragionamento è libertà.
      </h4>
      <p >Nel XVIII secolo è iniziato l’illuminismo, un movimento culturale laico sviluppato in tutta Europa, ma trova la sua massima influenza in Francia. I principi dell’illuminismo sono cosmopolita, fratellanza, uguaglianza e libertà. <br>
•	Cosmopolita: ovvero “uomo di mondo”, per gli illuministi, l’uomo che ragionava era considerato cosmopolita; <br>
•	Uguaglianza: uno dei principi più importanti dell’illuminismo, dice che siamo tutti uguali per natura perché siamo accomunati dalla ragione; <br>
•	Libertà: per gli illuministi è un diritto assoluto, che però non significa che siamo liberi di fare quello che vogliamo, perché come disse Voltaire, la mia libertà finisce quando limito la tua.

      </p>
      <img src="https://miro.medium.com/max/1000/1*y7457FGb_MTmrPP3GFYZDg.png" alt="Illuminismo"
           height = "300" class="center"/>
      <div id="Esponenti">
      <h2>Voltaire e Montesquieu
      </h2>
      <h4>L'età dei lumi: Il ragionamento è libertà.
      </h4>
      <p class="Esponenti">I massimi esperti dell’illuminismo sono: <br><br>
VOLTAIRE
Pensiero: Credeva che si dovesse rinunciare ad una parte della propria liberta per il bene collettivo. <br><br>
MONTESQUIEU
Montesquieu prende in considerazione tre diversi modelli di governo, per discuterne le differenze e descrivere in che modo si rapportino alle leggi. Perché sia garantita la libertà dei cittadini i tre poteri devono essere separati, detenuti da soggetti diversi e devono limitarsi a vicenda. La libertà politica, secondo Montesquieu, «non consiste affatto nel fare ciò che si vuole», bensì «è il diritto di fare tutto quello che le leggi permettono»

      </p>
      <img src="https://www.blogdibruco.it/wp-content/uploads/2020/12/69cdef43d32009bebffb9441c2329c.jpg" alt=p
           height = "300" class="center"/>
    </div>
      <div id="Beccaria">
      <p>
      <h2>Cesare Beccaria
      </h2>
      <h4>Sottotilo da decidere
      </h4>
      <p>Nasce a Milano nel 1738, dove l’illuminismo inizia a fiorire. Beccaria decide di fare giurisprudenza e va a Pavia. A 22 anni legge le lettere persiane di Montesquieu e si appassiona. Beccaria fonderà insieme ai fratelli Verri il Caffè, il quale scrisse il primo articolo, che farà da portavoce del movimento illuminista lombardo. Il posto è visitato in maggioranza dagli illuministi, che con linguaggio chiaro e brillante, affrontano questioni legate al benessere della società.
Beccaria tra il 1763-1764 scrive la sua opera più importante “Dei delitti e delle pene”. Nell’opera Beccaria affronta il problema della legittimità dei governi di punire coloro che in qualsiasi modo contravvengono a quanto stabilito dalle leggi, in quanto,  come affermavano gli illuministi, tra il cittadino e lo Stato si stabiliva un “patto sociale” in base al quale ogni cittadini rinunciava a una piccola parte della propria libertà per il raggiungimento della maggior felicità possibile, garantita a ciascuno dall’azione dello Stato.

      </p>
      <img src="https://upload.wikimedia.org/wikipedia/commons/8/83/Cesare_Beccaria.jpg" alt=p
           height = "300" class="center"/>
      
    </div>
      
   <script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
  </body>
</html>

*{ }
  @keyframes logo {
  from {color: rgb(0,0,0);
    text-shadow: 0px 0px 10px rgb(255,255,255);}
  to {color: rgb(255,255,255);
    text-shadow: 0px 0px 10px rgb(0,0,0);}
}

.content {
  margin-top:80px;
  margin-left: -8px;
  margin-right: -8px;
}
/* Stile dell'header*/
.header {
  	height: 80px;
  	margin-left: -8px;
  	margin-right: -8px;
  	margin-top: -80px;
  	position: fixed;
  	overflow: hidden;
  	background-image: url("https://upload.wikimedia.org/wikipedia/commons/c/cb/Salon_de_Madame_Geoffrin.jpg");
  	background-size: cover;
  	background-position: 25% 60%;
	background-repeat: no-repeat;
	box-shadow: 0px 5px 8px 4px rgba(0,0,0,0.4);
	width:100%;
}
/* Stile dei link dell'header */
.header a {
  float: left;
  color: rgb(0,0,0);
  text-shadow: 0px 0px 5px rgb(255,255,255);
  text-align: center;
  padding: 12px;
  text-decoration: none;
  font-weight: light;
  font-family: "Lucida Handwriting";
  font-size: 12px;
  line-height: 56px;
  width: 75px
}

/* Stile del "logo" */
.header a.logo {
  color: #000000;
  font-size: 25px;
  font-weight: bold;
  font-family: "Lucida Handwriting";
  text-shadow: 0 0 5px rgb(255,255,255);
  text-align:
}

/* cambio bg quando ci passa il mouse */
.header :hover {
  background-color: #00000050;
  text-shadow: 0 0 5px rgb(0,0,0);
  animation-name: logo;
  animation-duration: 1s;
  animation-fill-mode: forwards;
  animation-direction: normal;
}

/* stile del link attivo che pero' non funziona*/
.header a.active {
  background-color: rgba(0,0,0,0.75);
  color: #A78B71;
  font-family: "Lucida Handwriting";
  text-shadow: 0 0 5px rgba(13,13,13,1);
}

/* sposta la sezione dei link sulla destra */
.header-right {
  float: right;
}

/* stile tabella */
.styled-table {
      	
    	border-collapse: collapse;
    	margin-left: auto;  
		margin-right: auto; 
    	font-size: 0.9em;
    	font-family: sans-serif;
    	min-width: 400px;
    	box-shadow: 0 0 20px rgba(13,13,13,0.5);
	}
	.styled-table thead tr {
    	background-color: #752E0F;
      	color: #ffffff;
   	 	text-align: left;
	}
	.styled-table th,
	.styled-table td {
    	padding: 12px 15px;
	}
	.styled-table tbody tr {
    	border-bottom: thin solid #000000;
	}

	.styled-table tbody tr:nth-of-type(even) {
    	background-color: #f3f3f3;
	}

	.styled-table tbody tr:first-of-type {
    	border-bottom: 3px solid #9C4A1A;
	}
	.styled-table tbody tr.team-vincente {
    font-weight: bold;
    color: #9C4A1A;
}
	.center {
  	display: block;
  	margin-left: auto;
  	margin-right: auto;
  	width: auto;
	}

$(".header").click(function() {
    if ($(".active").removeClass("active")) {
        $(this).removeClass("active");
    }
    $(this).addClass("active");
});