HTML
Contenitore
<!DOCTYPE html>
<html>
<head>
<meta http-equiv="content-type" content="text/html; charset=UTF-8">
<meta name="generator" content="AlterVista - Editor HTML">
<title>
</title>
<meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">
<link href="https://fonts.googleapis.com/icon?family=Material+Icons" rel="stylesheet">
<head>
<body>
</body>
</html>
<main>
< a href="#" style="position:fixed;
bottom:0px;left:0px; z-index:101;">
.< /a>
< a href="#" style="position:fixed;
bottom:0px;right:0px; z-index:101;">
.< /a>
< div id="fine">
< /div>
</main>
Attendere Loading
< style>
.bordoloading{ position:fixed;
top:0px; top:10%; top:48px; top:18px;
left:50%;
margin-left:-360px; margin-left:-342px;
padding:6px; background-color:black;
background-color:transparent;
font-size:18px; font-family:monospace;
font-variant:small-caps; }
.loading-stile{ background-color:black; }
.lampeggio { animation: blinker 1.5s linear infinite; }
@keyframes blinker { 50% { opacity: 0; } }
< /style>
< div id="AttendereLoading" class="bordoloading">
< div class=""
style="background-color:black; color:white">
< span>
< /span>
< span>
< svg height="10" width="10" class="lampeggio" >
< circle cx="5" cy="5" r="5" fill="orange" />
< /svg>
< /span>
< span class="loading-stile">
Loading...
< span id="percento">
< /span>
< /span>
< span>
< /span>
< span style="">
< /span>
< /div>
< /div>
< script>
function AttendereLoading()
{ if(document.all) {
document.all["AttendereLoading"].style.visibility="hidden"; }
else if (document.getElementById)
{
node=
document.getElementById("AttendereLoading").
style.visibility="hidden"; } }
< /script>
< script>
var percento=document.getElementById("percento");
var contatore=1;
var intervallo=setInterval(
function() { percento.innerHTML=contatore+"%"; contatore++;
if (contatore===101) {clearInterval(intervallo);} } , 30000)
< /script>
Dialogo modale
<style >
.bordomodale{ border:solid 0px gray; }
.bordocontenutomodale{ padding:6px; }
.modale{ position:fixed; top:0;right:0;
bottom:0;left:0; background-color:rgba(0,0,0,0.9);
z-index:100; pointer-events:none; opacity:0; }
.modale:target {pointer-events: auto; opacity:1;}
.contenutomodale{ width:50%; height:50%;
margin-left:25%; /* margin-top:25%; */
background-color:rgba(0,0,0,1.0);
background-color:gray;
background-image:
url('http://edoraandiamo.altervista.org/img0/carta06x.png');
background-repeat:repeat;
background-attachment:fixed; overflow:auto; }
</style >
<div id="modale" class="modale bordomodale" >
<div class="contenutomodale bordocontenutomodale"
style="position:relative;" >
<span style="position:absolute; left:40%;
font-size:1.8rem;"
class="material-icons" >
keyboard_arrow_down
</span >
<span style="position:absolute; left:60%;
font-size:1.8rem;"
class="material-icons" >
keyboard_arrow_up
</span >
<span >
<a href="#" class="material-icons"
style="margin:0px;padding:0px;" >
cancel </a >
</span >
<span style="text-align:center; float:right;" >
<a class="material-icons"
href="http://edoraandiamo.altervista.org/index.html" >
home </a >
</span >
<hr/ >
<ul >
<li >
</li >
<ul >
<li >
</li >
<li >
</li >
</ul >
<li >
</li >
<li >
</li >
</ul >
</div >
</div >
Drop menu
<style>
.bordo111d{ border:solid 0px orange;}
.bordo121d{ border:solid 0px orange;}
.bordo131d{ border:solid 0px orange;}
.dropmenu111{
position:fixed; bottom:0px; top:0px; left:0px;
width:100%; height:24px; margin:0px; padding:0px; }
.dropmenu121{ position:fixed; bottom:0px; top:0px;
left:50%; height:24px; margin-left:-360px;
font-size:24px; color:gray; }
.dropmenu131{display:none;}
.dropmenu111:hover .dropmenu131{
position:fixed; bottom:0px; top:0px;
left:50%; margin-left:-336px;
margin-top:0px; margin-bottom:0px;
padding:0px; width:672px;
height:24px; display:block; }
.dropmenu111:hover .dropmenu121{display:none;}
</style>
<div class="dropmenu111 bordo111d">
<span class="material-icons dropmenu121 bordo121d"
style="background-color:gray; color:black;">
menu </span>
<div class="dropmenu131 bordo131d"
style="position:relative;
background-color:black;">
<span style="position:absolute; bottom:0%;
left:0%; left:1%;">
<span style=" background-color:black;
font-size:12px; text-transform:uppercase;">
webdesign 2020 </span>
<span>
<img class="icona"
src="http://edoraandiamo.altervista.org/1.0/rinaldo-rasa-avatar.png"
alt="" title="Rinaldo Rasa"
style="width:16px; height:16px;margin:0px;padding:0px;">
</span>
<a href="mailto:rinaldo.rasa@gmail.com"
class="material-icons"
style=" background-color:black; color:gray; font-size:18px; ">
contact_mail </a>
</span>
<span class="material-icons"
style="position:absolute;bottom:0%; left:50%;
font-size:18px;" >
<a href="#modale"
style="font-size:24px;
background-color:black; color:green; " >
info</a>
</span>
<span class="material-icons"
style="position:absolute;bottom:0%; left:76%; " >
<a href="#fine" class="" style="font-size:18px;
font-size:22px; background-color:black; color:orange;">
keyboard_arrow_down </a>
</span>
<span class="material-icons"
style="position:absolute;bottom:0%; left:96%;" >
<a href="#" class=""
style="font-size:18px; font-size:22px;
background-color:black; color:orange;" >
keyboard_arrow_up </a>
</span>
</div>
</div>
Fine documento
<style> body, main { /* background-image:url('http://noteapiedipagina.altervista.org/WWWRoot/immagini/carta01.gif'); */ background-image: url('http://edoraandiamo.altervista.org/img0/carta06.png'); </style> <script> var orario = setInterval(intervalloHMS, 1000); function intervalloHMS() { var d = new Date(); document.getElementById("orarioHMS").innerHTML = d.toLocaleTimeString(); } </script>
php
Cronologia
<?php $actual_link = "http://{$_SERVER['HTTP_HOST']}{$_SERVER['REQUEST_URI']}"; $oggi_est = date("l") . " "; $oggi_est = $oggi_est . date("Y/m/d"); $oggi_est_time = date("h:i:sa"); $fp = fopen('/membri/edoraandiamo/text.txt', 'w'); fwrite($fp, $actual_link. " " .$oggi_est. " ". $oggi_est_time); fclose($fp); $myfile = fopen("/membri/edoraandiamo/logs.txt", "a") or die("Unable to open file!"); // $actual_link = "cronologia"; fwrite($myfile, "\n". $actual_link. " " .$oggi_est. " ". $oggi_est_time); fclose($myfile); ?>
Login/Logout
<!-- login.php -->
<?php session_start(); /* inizia la sessione */ /* controllo Login form */ if(isset($_POST['Submit'])){ /* username e password associtea array */ $logins = array('username0' =>
'password0','username1' =>
'password1','username2' =>
'password2'); /* associare username e password alla variabile */ $Username = isset($_POST['Username']) ? $_POST['Username'] : ''; $Password = isset($_POST['Password']) ? $_POST['Password'] : ''; /* controlla Username e Password */ if (isset($logins[$Username]) && $logins[$Username] == $Password){ /* se tutto ok */ $_SESSION['UserData']['Username']=$logins[$Username]; header("location:index2.php"); exit; } else { /* se sbagliato */ $msg="<span style='color:red'>
Login non valido</span>
"; } } ?>
<form action="" method="post" name="Login_Form">
<table width="400" border="0" align="center" cellpadding="5" cellspacing="1" class="Table">
<?php if(isset($msg)){?>
<tr>
<td colspan="2" align="center" valign="top">
<?php echo $msg;?>
</td>
</tr>
<?php } ?>
<tr>
<td colspan="2" align="left" valign="top">
<h3>
Login</h3>
</td>
</tr>
<tr>
<td align="right" valign="top">
Username</td>
<td>
<input name="Username" type="text" class="Input">
</td>
</tr>
<tr>
<td align="right">
Password</td>
<td>
<input name="Password" type="password" class="Input">
</td>
</tr>
<tr>
<td>
</td>
<td>
<input name="Submit" type="submit" value="Login" class="Button3">
</td>
</tr>
</table>
</form>
<!-- index.php -->
<?php session_start(); /* Starts the session */ if(!isset($_SESSION['UserData']['Username'])){ header("location:login2.php"); exit; } ?>
Loggato! <a href="logout.php">
Click </a>
LOGOUT. <!-- logout -->
<?php session_start(); /* Starts the session */session_destroy(); /* Destroy started session */header("location:login.php"); /* Redirect to login page */exit; ?>
Supplementi
Strutturazione del documento
<section>
<header>
<cite class="titolo1 blackwhite">
TITOLO principale</cite>
<time id="orarioHMS" class="orarioHMS grayblack">
</time>
<aside>
<a href="http://edoraandiamo.altervista.org/j/h/h04.php">
<span class="pripoi bordo1" style=" float:left; ">
≪
</span>
</a>
<a href="http://edoraandiamo.altervista.org/index.php">
<span class="pripoi bordo1" style="float:right;">
≫
</span>
</a>
</aside>
</header>
</section>
<center>
<section id="20200117" class="contenitore bordo1">
<mark class="titolo2 grayblack">
17 gennaio 2020</mark>
qui inserire gli articoli
</section>
</center>
<article class="bordo1">
<p>
<mark id="202001171" class="titolo3 greenwhite">
TITOLO</mark>
</p>
<div>
<p>
<mark id="2020011711" class="titolo4 tealblack">
Sottotitolo n.1</mark>
</p>
<p>
inserire informazioni
</p>
</div>
<div>
<p>
<mark id="2020011712" class="titolo4 tealblack">
Sottotitolo n.2</mark>
</p>
<p>
inserire informazioni
</p>
</div>
</article>
<section>
<hr/>
<article>
<footer>
<div id="altervistaforall1">
</div>
<div>
</div>
</footer>
<a href="#" style="position:fixed;
bottom:0px;left:0px; z-index:101;">
.</a>
<a href="#" style="position:fixed;
bottom:0px;right:0px; z-index:101;">
.</a>
<div id="fine">
</div>
</article>
</section>
Esercizio di programmazione
<!DOCTYPE html>
<html>
<head>
<meta http-equiv="content-type" content="text/html; charset=UTF-8">
<meta name="generator" content="AlterVista - Editor HTML">
<title>
</title>
<meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">
<link href="https://fonts.googleapis.com/icon?family=Material+Icons" rel="stylesheet">
<style>
body { position:relative;
font-size:2rem; font-family:monospace;
}
main {
position:absolute; left:50%; margin-left:-336px;
width:672px; margin-top:48px; margin-bottom:48px;
border:solid 1px blue;
font-size:1rem;
}
div, p { text-align:left; }
div, p, span, mark, cite { border-radius:4px; }
div, p, mark, cite { margin:1px; padding:1px; }
div, p { white-space: nowrap; overflow: hidden;
text-overflow: ellipsis; }
.pripoi { margin:1px;padding:1px;
background-color:rgba(0,255,0,0.2); color:black;
font-weight:bold;
border-radius:4px; box-shadow:6px 6px 12px black }
.titolo1 { font-size:1.8rem; }
.titolo2 { font-size:1.5rem; }
.titolo3 { font-size:1.0rem; }
.titolo4 { font-size:0.8rem; }
.bordo1 { border:solid 1px rgba(0,0,0,0.2); }
.grayblack { background-color:gray; color:black; }
.greenwhite { background-color:green; color:white; }
.blackwhite { background-color:black; color:white; }
.tealblack { background-color:teal; color:black; }
.maroonwhite { background-color:maroon; color:white; }
.bluewhite { background-color:maroon; color:white; }
</style>
<style>
hr {
clear: both;
color: black;
background-color: black;
height: 1px;
border-width: 0;
}
</style>
</head>
<body onload="AttendereLoadingx()">
<main class="bordo1">
<section>
<article>
<header>
<cite class="titolo1 blackwhite">
TITOLO</cite>
<time id="orarioHMS" class="orarioHMS grayblack">
</time>
<aside>
<a href="http://edoraandiamo.altervista.org/j/h/h04.php">
<span class="pripoi bordo1" style=" float:left; ">
≪
</span>
</a>
<a href="http://edoraandiamo.altervista.org/index.php">
<span class="pripoi bordo1" style="float:right;">
≫
</span>
</a>
</aside>
</header>
<p>
<br/>
</p>
</article>
</section>
<center>
<section id="20200117" class="contenitore bordo1">
<mark class="titolo2 grayblack">
17 gennaio 2020</mark>
<article class="bordo1">
<p>
<mark id="202001171" class="titolo3 greenwhite">
HTML</mark>
</p>
<div>
<p>
<mark id="2020011711" class="titolo4 tealblack">
Contenitore</mark>
</p>
<p>
<!DOCTYPE html> <br/>
<html> <br/>
<head> <br/>
<meta http-equiv="content-type" content="text/html; charset=UTF-8"> <br/>
<meta name="generator" content="AlterVista - Editor HTML"> <br/>
<title> <br/>
</title> <br/>
<meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no"> <br/>
<link href="https://fonts.googleapis.com/icon?family=Material+Icons" rel="stylesheet"> <br/>
<head> <br/>
<body> <br/>
</body> <br/>
</html> <br/>
</p>
<p>
</p>
<p>
<main> <br/>
< a href="#" style="position:fixed;
bottom:0px;left:0px; z-index:101;"> <br/>
.< /a> <br/>
< a href="#" style="position:fixed;
bottom:0px;right:0px; z-index:101;"> <br/>
.< /a> <br/>
< div id="fine"> <br/>
< /div> <br/>
</main> <br/>
</p>
</div>
<div>
<p>
<mark id="2020011712" class="titolo4 tealblack">
Attendere Loading</mark>
</p>
<p>
< style> <br/>
.bordoloading{ position:fixed;
top:0px; top:10%; top:48px; top:18px;
left:50%;
margin-left:-360px; margin-left:-342px;
padding:6px; background-color:black;
background-color:transparent;
font-size:18px; font-family:monospace;
font-variant:small-caps; }
.loading-stile{ background-color:black; }
.lampeggio { animation: blinker 1.5s linear infinite; }
@keyframes blinker { 50% { opacity: 0; } }
< /style> <br/>
< div id="AttendereLoading" class="bordoloading"> <br/>
< div class=""
style="background-color:black; color:white"> <br/>
< span> <br/>
< /span> <br/>
< span> <br/>
< svg height="10" width="10" class="lampeggio" > <br/>
< circle cx="5" cy="5" r="5" fill="orange" /> <br/>
< /svg> <br/>
< /span> <br/>
< span class="loading-stile"> <br/>
Loading...
< span id="percento"> <br/>
< /span> <br/>
< /span> <br/>
< span> <br/>
< /span> <br/>
< span style=""> <br/>
< /span> <br/>
< /div> <br/>
< /div> <br/>
< script> <br/>
function AttendereLoading()
{ if(document.all) {
document.all["AttendereLoading"].style.visibility="hidden"; }
else if (document.getElementById)
{
node=
document.getElementById("AttendereLoading").
style.visibility="hidden"; } }
< /script> <br/>
< script> <br/>
var percento=document.getElementById("percento");
var contatore=1;
var intervallo=setInterval(
function() { percento.innerHTML=contatore+"%"; contatore++;
if (contatore===101) {clearInterval(intervallo);} } , 30000)
< /script> <br/>
</p>
</div>
<div>
<p>
<mark id="2020011713" class="titolo4 tealblack">
Dialogo modale</mark>
</p>
<p>
<style > <br/>
.bordomodale{ border:solid 0px gray; }
.bordocontenutomodale{ padding:6px; }
.modale{ position:fixed; top:0;right:0;
bottom:0;left:0; background-color:rgba(0,0,0,0.9);
z-index:100; pointer-events:none; opacity:0; }
.modale:target {pointer-events: auto; opacity:1;}
.contenutomodale{ width:50%; height:50%;
margin-left:25%; /* margin-top:25%; */
background-color:rgba(0,0,0,1.0);
background-color:gray;
background-image:
url('http://edoraandiamo.altervista.org/img0/carta06x.png');
background-repeat:repeat;
background-attachment:fixed; overflow:auto; }
</style > <br/>
<div id="modale" class="modale bordomodale" > <br/>
<div class="contenutomodale bordocontenutomodale"
style="position:relative;" > <br/>
<span style="position:absolute; left:40%;
font-size:1.8rem;"
class="material-icons" > <br/>
keyboard_arrow_down
</span > <br/>
<span style="position:absolute; left:60%;
font-size:1.8rem;"
class="material-icons" > <br/>
keyboard_arrow_up
</span > <br/>
<span > <br/>
<a href="#" class="material-icons"
style="margin:0px;padding:0px;" > <br/>
cancel </a > <br/>
</span > <br/>
<span style="text-align:center; float:right;" > <br/>
<a class="material-icons"
href="http://edoraandiamo.altervista.org/index.html" > <br/>
home </a > <br/>
</span > <br/>
<hr/ > <br/>
<ul > <br/>
<li > <br/>
</li > <br/>
<ul > <br/>
<li > <br/>
</li > <br/>
<li > <br/>
</li > <br/>
</ul > <br/>
<li > <br/>
</li > <br/>
<li > <br/>
</li > <br/>
</ul > <br/>
</div > <br/>
</div > <br/>
</p>
</div>
<div>
<p>
<mark id="2020011714" class="titolo4 tealblack">
Drop menu</mark>
</p>
<p>
<style> <br/>
.bordo111d{ border:solid 0px orange;}
.bordo121d{ border:solid 0px orange;}
.bordo131d{ border:solid 0px orange;}
.dropmenu111{
position:fixed; bottom:0px; top:0px; left:0px;
width:100%; height:24px; margin:0px; padding:0px; }
.dropmenu121{ position:fixed; bottom:0px; top:0px;
left:50%; height:24px; margin-left:-360px;
font-size:24px; color:gray; }
.dropmenu131{display:none;}
.dropmenu111:hover .dropmenu131{
position:fixed; bottom:0px; top:0px;
left:50%; margin-left:-336px;
margin-top:0px; margin-bottom:0px;
padding:0px; width:672px;
height:24px; display:block; }
.dropmenu111:hover .dropmenu121{display:none;}
</style> <br/>
<div class="dropmenu111 bordo111d"> <br/>
<span class="material-icons dropmenu121 bordo121d"
style="background-color:gray; color:black;"> <br/>
menu </span> <br/>
<div class="dropmenu131 bordo131d"
style="position:relative;
background-color:black;"> <br/>
<span style="position:absolute; bottom:0%;
left:0%; left:1%;"> <br/>
<span style=" background-color:black;
font-size:12px; text-transform:uppercase;"> <br/>
webdesign 2020 </span> <br/>
<span> <br/>
<img class="icona"
src="http://edoraandiamo.altervista.org/1.0/rinaldo-rasa-avatar.png"
alt="" title="Rinaldo Rasa"
style="width:16px; height:16px;margin:0px;padding:0px;"> <br/>
</span> <br/>
<a href="mailto:rinaldo.rasa@gmail.com"
class="material-icons"
style=" background-color:black; color:gray; font-size:18px; "> <br/>
contact_mail </a> <br/>
</span> <br/>
<span class="material-icons"
style="position:absolute;bottom:0%; left:50%;
font-size:18px;" > <br/>
<a href="#modale"
style="font-size:24px;
background-color:black; color:green; " > <br/>
info</a> <br/>
</span> <br/>
<span class="material-icons"
style="position:absolute;bottom:0%; left:76%; " > <br/>
<a href="#fine" class="" style="font-size:18px;
font-size:22px; background-color:black; color:orange;"> <br/>
keyboard_arrow_down </a> <br/>
</span> <br/>
<span class="material-icons"
style="position:absolute;bottom:0%; left:96%;" > <br/>
<a href="#" class=""
style="font-size:18px; font-size:22px;
background-color:black; color:orange;" > <br/>
keyboard_arrow_up </a> <br/>
</span> <br/>
</div> <br/>
</div> <br/>
</p>
</div>
<div>
<p>
<mark id="2020011715" class="titolo4 tealblack">
Fine documento</mark>
</p>
<p>
<style> </br>
body, main {
/* background-image:url('http://noteapiedipagina.altervista.org/WWWRoot/immagini/carta01.gif'); */
background-image:
url('http://edoraandiamo.altervista.org/img0/carta06.png');
</style> </br>
<script> </br>
var orario = setInterval(intervalloHMS, 1000);
function intervalloHMS() {
var d = new Date();
document.getElementById("orarioHMS").innerHTML = d.toLocaleTimeString();
}
</script> </br>
</p>
<p>
</p>
</div>
</article>
<article class="bordo1" >
<p>
<mark id="202001172" class="titolo3 maroonwhite">
php</mark>
</p>
<div>
<p>
<mark id="2020011721" class="titolo4 tealblack">
Cronologia</mark>
</p>
<p>
<?php $actual_link = "http://{$_SERVER['HTTP_HOST']}{$_SERVER['REQUEST_URI']}"; $oggi_est = date("l") . " "; $oggi_est = $oggi_est . date("Y/m/d"); $oggi_est_time = date("h:i:sa"); $fp = fopen('/membri/edoraandiamo/text.txt', 'w'); fwrite($fp, $actual_link. " " .$oggi_est. " ". $oggi_est_time); fclose($fp); $myfile = fopen("/membri/edoraandiamo/logs.txt", "a") or die("Unable to open file!"); // $actual_link = "cronologia"; fwrite($myfile, "\n". $actual_link. " " .$oggi_est. " ". $oggi_est_time); fclose($myfile); ?>
</p>
</div>
<div>
<p>
<mark id="2020011722" class="titolo4 tealblack">
Login/Logout</mark>
</p>
<p>
<!-- login.php --> <br/>
<?php session_start(); /* inizia la sessione */ /* controllo Login form */ if(isset($_POST['Submit'])){ /* username e password associtea array */ $logins = array('username0' => <br/>
'password0','username1' => <br/>
'password1','username2' => <br/>
'password2'); /* associare username e password alla variabile */ $Username = isset($_POST['Username']) ? $_POST['Username'] : ''; $Password = isset($_POST['Password']) ? $_POST['Password'] : ''; /* controlla Username e Password */ if (isset($logins[$Username]) && $logins[$Username] == $Password){ /* se tutto ok */ $_SESSION['UserData']['Username']=$logins[$Username]; header("location:index2.php"); exit; } else { /* se sbagliato */ $msg="<span style='color:red'> <br/>
Login non valido</span> <br/>
"; } } ?> <br/>
<form action="" method="post" name="Login_Form"> <br/>
<table width="400" border="0" align="center" cellpadding="5" cellspacing="1" class="Table"> <br/>
<?php if(isset($msg)){?> <br/>
<tr> <br/>
<td colspan="2" align="center" valign="top"> <br/>
<?php echo $msg;?> <br/>
</td> <br/>
</tr> <br/>
<?php } ?> <br/>
<tr> <br/>
<td colspan="2" align="left" valign="top"> <br/>
<h3> <br/>
Login</h3> <br/>
</td> <br/>
</tr> <br/>
<tr> <br/>
<td align="right" valign="top"> <br/>
Username</td> <br/>
<td> <br/>
<input name="Username" type="text" class="Input"> <br/>
</td> <br/>
</tr> <br/>
<tr> <br/>
<td align="right"> <br/>
Password</td> <br/>
<td> <br/>
<input name="Password" type="password" class="Input"> <br/>
</td> <br/>
</tr> <br/>
<tr> <br/>
<td> <br/>
</td> <br/>
<td> <br/>
<input name="Submit" type="submit" value="Login" class="Button3"> <br/>
</td> <br/>
</tr> <br/>
</table> <br/>
</form> <br/>
<!-- index.php --> <br/>
<?php session_start(); /* Starts the session */ if(!isset($_SESSION['UserData']['Username'])){ header("location:login2.php"); exit; } ?> <br/>
Loggato! <a href="logout.php"> <br/>
Click </a> <br/>
LOGOUT. <!-- logout --> <br/>
<?php session_start(); /* Starts the session */session_destroy(); /* Destroy started session */header("location:login.php"); /* Redirect to login page */exit; ?> <br/>
</p>
</div>
</article>
<article class="bordo1">
<p>
<mark id="20200117s1" class="titolo3 bluewhite">
Supplementi</mark>
</p>
<div>
<p>
<mark id="20200117s11" class="titolo4 tealblack">
Strutturazione del documento</mark>
</p>
<p>
</p>
</div>
</article>
</section>
</center>
<section>
<hr/>
<article>
<footer>
<div id="altervistaforall1">
</div>
<div>
</div>
</footer>
<a href="#" style="position:fixed;
bottom:0px;left:0px; z-index:101;">
.</a>
<a href="#" style="position:fixed;
bottom:0px;right:0px; z-index:101;">
.</a>
<div id="fine">
</div>
</article>
</section>
</main>
<style>
.bordomodale{ border:solid 0px gray; }
.bordocontenutomodale{ padding:6px; }
.modale{ position:fixed; top:0;right:0;
bottom:0;left:0; background-color:rgba(0,0,0,0.9);
z-index:100; pointer-events:none; opacity:0; }
.modale:target {pointer-events: auto; opacity:1;}
.contenutomodale{ width:50%; height:50%;
margin-left:25%; /* margin-top:25%; */
background-color:rgba(0,0,0,1.0);
background-color:gray;
background-image:
url('http://edoraandiamo.altervista.org/img0/carta06x.png');
background-repeat:repeat;
background-attachment:fixed; overflow:auto; }
</style>
<div id="modale" class="modale bordomodale">
<div class="contenutomodale bordocontenutomodale"
style="position:relative;">
<span style="position:absolute; left:40%;
font-size:1.8rem;"
class="material-icons">
keyboard_arrow_down
</span>
<span style="position:absolute; left:60%;
font-size:1.8rem;"
class="material-icons">
keyboard_arrow_up
</span>
<span>
<a href="#" class="material-icons"
style="margin:0px;padding:0px;">
cancel</a>
</span>
<span style="text-align:center; float:right;">
<a class="material-icons"
href="http://edoraandiamo.altervista.org/index.html">
home </a>
</span>
<hr/>
<ul>
<li class="titolo3">
20200117</li>
<ul class="titolo3">
<li>
<a href="#202001171">
HTML</a>
</li>
<li>
<ul>
<li>
<a href="#2020011711">
Contenitore</a>
</li>
<li>
<a href="#2020011712">
Attendere Loading</a>
</li>
<li>
<a href="#2020011713">
Dialogo modale</a>
</li>
<li>
<a href="#2020011714">
Drop menu</a>
</li>
<li>
<a href="#2020011715">
Fine documento</a>
</li>
</ul>
</li>
</ul>
<ul class="titolo3">
<li>
<a href="#202001172">
PHP</a>
</li>
<li>
<ul>
<li>
<a href="#2020011721">
Cronologia</a>
</li>
<li>
<a href="#2020011722">
Login/Logout</a>
</li>
</ul>
</li>
</ul>
</ul>
</div>
</div>
<style>
.bordoloading{ position:fixed;
top:0px; top:10%; top:48px; top:18px;
left:50%;
margin-left:-360px; margin-left:-342px;
padding:6px; background-color:black;
background-color:transparent;
font-size:18px; font-family:monospace;
font-variant:small-caps; }
.loading-stile{ background-color:black; }
.lampeggio { animation: blinker 1.5s linear infinite; }
@keyframes blinker { 50% { opacity: 0; } }
</style>
<div id="AttendereLoading" class="bordoloading">
<div class=""
style="background-color:black; color:white">
<span>
</span>
<span>
<svg height="10" width="10" class="lampeggio" >
<circle cx="5" cy="5" r="5" fill="orange" />
</svg>
</span>
<span class="loading-stile">
Loading...
<span id="percento">
</span>
</span>
<span>
</span>
<span style="">
</span>
</div>
</div>
<script>
function AttendereLoading()
{ if(document.all) {
document.all["AttendereLoading"].style.visibility="hidden"; }
else if (document.getElementById)
{
node=
document.getElementById("AttendereLoading").
style.visibility="hidden"; } }
</script>
<script>
var percento=document.getElementById("percento");
var contatore=1;
var intervallo=setInterval(
function() { percento.innerHTML=contatore+"%"; contatore++;
if (contatore===101) {clearInterval(intervallo);} } , 30000)
</script>
<style>
.bordo111d{ border:solid 0px orange;}
.bordo121d{ border:solid 0px orange;}
.bordo131d{ border:solid 0px orange;}
.dropmenu111{
position:fixed; bottom:0px; top:0px; left:0px;
width:100%; height:24px; margin:0px; padding:0px; }
.dropmenu121{ position:fixed; bottom:0px; top:0px;
left:50%; height:24px; margin-left:-360px;
font-size:24px; color:gray; }
.dropmenu131{display:none;}
.dropmenu111:hover .dropmenu131{
position:fixed; bottom:0px; top:0px;
left:50%; margin-left:-336px;
margin-top:0px; margin-bottom:0px;
padding:0px; width:672px;
height:24px; display:block; }
.dropmenu111:hover .dropmenu121{display:none;}
</style>
<div class="dropmenu111 bordo111d">
<span class="material-icons dropmenu121 bordo121d"
style="background-color:gray; color:black;">
menu </span>
<div class="dropmenu131 bordo131d"
style="position:relative;
background-color:black;">
<span style="position:absolute; bottom:0%;
left:0%; left:1%;">
<span style=" background-color:black;
font-size:12px; text-transform:uppercase;">
webdesign 2020 </span>
<span>
<img class="icona"
src="http://edoraandiamo.altervista.org/1.0/rinaldo-rasa-avatar.png"
alt="" title="Rinaldo Rasa"
style="width:16px; height:16px;margin:0px;padding:0px;">
</span>
<a href="mailto:rinaldo.rasa@gmail.com"
class="material-icons"
style=" background-color:black; color:gray; font-size:18px; ">
contact_mail </a>
</span>
<span class="material-icons"
style="position:absolute;bottom:0%; left:50%;
font-size:18px;" >
<a href="#modale"
style="font-size:24px;
background-color:black; color:green; " >
info</a>
</span>
<span class="material-icons"
style="position:absolute;bottom:0%; left:76%; " >
<a href="#fine" class="" style="font-size:18px;
font-size:22px; background-color:black; color:orange;">
keyboard_arrow_down </a>
</span>
<span class="material-icons"
style="position:absolute;bottom:0%; left:96%;" >
<a href="#" class=""
style="font-size:18px; font-size:22px;
background-color:black; color:orange;" >
keyboard_arrow_up </a>
</span>
</div>
</div>
<style>
body, main {
/* background-image:url('http://noteapiedipagina.altervista.org/WWWRoot/immagini/carta01.gif'); */
background-image:
url('http://edoraandiamo.altervista.org/img0/carta06.png');
</style>
<!-- javascript miscellanea ini -->
<script>
var orario = setInterval(intervalloHMS, 1000);
function intervalloHMS() {
var d = new Date();
document.getElementById("orarioHMS").innerHTML = d.toLocaleTimeString();
}
</script>
<!-- javascript miscellanea fin -->
<!-- 17:45 17/01/2020 -->
</body>
</html>
Loading...
webdesign 2020
contact_mail
contact_mail
FOGLI DI STILE
row-header
highlight
box-grey
alert-warning
label
pre
btn
btn-primary
btn-save
btn-delete
action
highlight
.profile-thumb
data-box
data-header
data-summary
data-info
highlight-euro
highlight-ac
box-grey
chart-box
bg-circle
alert-message
alert-wait
alert-error
alert-warning
alert-message
palette
popup-window
popup-close
checkbox-switch
label
label-info
label-message
label-warning
label-error
pre
code
popover
popover-header
feedback
bg-circle
bg-title
font-disabled
btn
btn-primary
btn-save
btn-delete
btn-favicon
btn-small
btn-empty
form-grey
form-blue
welcome-question
welcome-action
welcome-more
welcome-advanced
app-bg
domain-top-seller
domain-promo
.fav-bg-alpha
picker
message-date
btn-buy02
checkout-choice-sep
Ooops!