61 lines
1.8 KiB
HTML
61 lines
1.8 KiB
HTML
|
<!DOCTYPE html>
|
||
|
|
<html lang="en">
|
||
|
|
<head>
|
||
|
|
<meta charset="UTF-8">
|
||
|
|
<meta name="viewport" content="width=device-width, initial-scale=1.0">
|
||
|
|
<title>Document</title>
|
||
|
|
<link rel="stylesheet" id="site" href="https://localhost/adlerka/responsive.css" media="all" />
|
||
|
|
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.6.1/jquery.mim,js">
|
||
|
|
</script>
|
||
|
|
|
||
|
|
<script type="text/javascript"></script>
|
||
|
|
<script>
|
||
|
|
$(document).ready(function(){
|
||
|
|
$("hide").click(function(){
|
||
|
|
$("p").hide();
|
||
|
|
});
|
||
|
|
$("show").click(function(){
|
||
|
|
$("p").show();
|
||
|
|
});
|
||
|
|
});
|
||
|
|
|
||
|
|
|
||
|
|
</script>
|
||
|
|
</head>
|
||
|
|
|
||
|
|
<body>
|
||
|
|
<h1>1</h1>
|
||
|
|
<button type="button"
|
||
|
|
onclick="document.getElementById('demo').innerHTML = Date()">Click me to to display date and time</button>
|
||
|
|
|
||
|
|
<p id="demo"></p>
|
||
|
|
<h1>2</h1>
|
||
|
|
<p id="demo1">Javascript can change any type of html element.</p>
|
||
|
|
<script>
|
||
|
|
function myFunction() {
|
||
|
|
document.getElementById('demo1').style.fontSize = "25px";
|
||
|
|
document.getElementById('demo1').style.color = "red";
|
||
|
|
document.getElementById('demo1').style.backgroundColor = "yellow"
|
||
|
|
}
|
||
|
|
</script>
|
||
|
|
<button type="button" onclick="myFunction()">Click me</button>
|
||
|
|
|
||
|
|
<h1>3</h1>
|
||
|
|
<button id="hide">hide</button>
|
||
|
|
<button id="show">show</button>
|
||
|
|
<p>this is small content</p>
|
||
|
|
<p>another small paragraph</p>
|
||
|
|
<p>https://www.w3schools.com/jquery/</p>
|
||
|
|
<p>https://www.w3schools.com/html/html_scripts.asp/</p>
|
||
|
|
|
||
|
|
<h1>4</h1>
|
||
|
|
|
||
|
|
<img class="img1" src="https://hips.hearstapps.com/hmg-prod/images/dw-burnett-pcoty22-8260-1671143390.jpg?crop=0.668xw:1.00xh;0.184xw,0&resize=640:*"
|
||
|
|
style="width: 500px;"
|
||
|
|
@media screen and (max width="50em")*>
|
||
|
|
|
||
|
|
|
||
|
|
|
||
|
|
|
||
|
|
|
||
|
|
</html>
|