HTML_Example

============================= z1 =========================================
<!DOCTYPE html>
<html>
<head>
<style>
p.intro {
    background-color:black;
    color:white;
    border:1px solid grey;
    padding:10px;
    margin:30px;
    font-size:150%;
}
</style>
</head>
<body>

<h1>To jest nagłówek</h1>

<p class="intro">To jest akapit.</p>
<p class="intro">To jest akapit.</p>
<p class="intro">To jest akapit.</p>

</body>
</html>

============================= z2 =========================================
<!DOCTYPE html>
<html>
<head>
<style>
body {background-color:lightgrey;}
h1   {color:blue;}
p {
    color:black;
    /* -- */
    border-style: solid;
    border-color: red;
}
</style>
</head>
<body>

<h1>To jest nagłówek</h1>

<p>To jest akapit.</p>
<p>To jest akapit.</p>
<p>To jest akapit.</p>
<p>To jest akapit.</p>

</body>
</html>

============================= z3 =========================================
<!DOCTYPE html>
<html>
    <head>

        <style>
        /* -- */
        body {text-align: center;}
        </style>
    </head>
    <body>
        <h1>To jest nagłówek</h1>
        <h2>TO też jest nagłówek</h2>
        <p>To jest akapit</p>
        <p>To też jest akapit</p>
    </body>
</html>

============================= z4 =========================================
<!DOCTYPE html>
<html>
<head>
<style>
    /* -- */
    #special {
        color: red;
    }
</style>
</head>
<body>

<h1>Mój <span id="special">Unikalny</span> Nagłówek</h1>

</body>
</html>

============================= z5 =========================================
<!DOCTYPE html>
<html>
<head>
<style>
ul#menu {
    list-style-type: none;
    margin: 0;
    padding: 0;
}

ul#menu li {
    float:left;
    /* -- */
    padding-right: 5px;
}
</style>
</head>
<body>

<ul id="menu">
  <li>Jabłka</li>
  <li>Banany</li>
  <li>Cytryny</li>
  <li>Pomarańcze</li>
</ul>

</body>
</html>

============================= z6 =========================================
<!DOCTYPE html>
<html>
<head>
<body>

<ol type="a">
  <li>Kawa</li>
  <li>Herbata</li>
  <li>Mleko</li>
</ol>

</body>
</html>

============================= z7 =========================================
<!DOCTYPE html>
<html>
<head>
<style>
table, th, td {
    border: 1px solid black;
    text-align: left;
}

/* -- */
th, td {
      background: black;
      color: white;
}
</style>
</head>
<body>

<table style="width:100%">
  <tr>
    <th>Imię</th>
    <th>Nazwisko</th>
    <th>Punkty</th>
  </tr>
  <tr>
    <td>John</td>
    <td>Smith</td>
    <td>50</td>
  </tr>
  <tr>
    <td>Ewa</td>
    <td>Jackson</td>
    <td>94</td>
  </tr>
</table>

</body>
</html>

============================= z8 =========================================
<!DOCTYPE html>
<html>
<body>

<form action="action_page.php" method="post">
Imię: <input type="text" name="name">

<!-- -->
<input type="submit" name="send" value="wyslij">

</form>

</body>
</html>

============================= z9 =========================================

<!DOCTYPE html>
<html>
<body>

<form action="/action_page.php">
  Ilość (pomiędzy 1 a 5):
  <!-- -->
  <input type="number" name="numer" min="1" max="5">
  <input type="submit">
</form>

</body>
</html>

============================= z10 =========================================
<!DOCTYPE html>
<html>
<head>
<style>
p {
    background-color: lightblue;
    /* -- */
    padding: 25px 50px 25px 50px;
}
</style>
</head>
<body>

<h1>To jest nagłówek</h1>
<p>To jest akapit. To jest akapit. To jest akapit. To jest akapit.</p>

</body>
</html>

============================= z11 =========================================
<!DOCTYPE html>
<html>
<head>
<style>
.container {
    position: relative;
}

.topleft {
    font-size: 18px;
    /* -- */
    position: absolute;
    margin-left: 30px;
    margin-top: 15px;
}

img {
    width: 100%;
    height: auto;
    opacity: 0.3;
}
</style>
</head>
<body>

<div class="container">
  <img src="trolltunga.jpg" alt="Norway" width="1000" height="300">
  <div class="topleft">Top Left</div>
</div>

</body>
</html>


============================= z12 =========================================
<!DOCTYPE html>
<html>
<head>
<style>
img {
    position: absolute;
    left: 0px;
    top: 0px;
    /* -- */
    z-index: -1;
}
</style>
</head>
<body>

<h1>This is a Heading</h1>
<p>This is a paragraph.</p>
<p>This is another paragraph.</p>
<img src="trolltunga.jpg" alt="Norway" width="1000" height="300">

</body>
</html>

============================= z13 =========================================
<!DOCTYPE html>
<html>
<head>
<style>
/* -- */
 input:hover{
    background: lightblue;
 }

</style>
</head>
<body>

<form action="/action_page.php" method="get">
  Imię: <input type="text" name="fname"><br>
  Nazwisko: <input type="text" name="lname"><br>
  <input type="submit" value="Wyślij">
</form>

</body>
</html>

============================= z14 =========================================
<!DOCTYPE html>
<html>
<head>
<style>
/* -- */
 p::first-line{
    color: red;
 }
</style>
</head>
<body>

<p>In my younger and more vulnerable years my father gave me some advice that I've been turning over in my mind ever since. 'Whenever you feel like criticizing anyone,' he told me, 'just remember that all the people in this world haven't had the advantages that you've had.'</p>

</body>
</html>

============================= z15 =========================================
<!DOCTYPE html>
<html>
<head>
<style>
img {
    opacity: 0.4;
}
/* -- */
img:hover {
    opacity: 1;
}
</style>
</head>
<body>

<img src="klematis.jpg" width="150" height="113">

</body>
</html>

============================= z16 =========================================
<!DOCTYPE html>
<html>
<head>

<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>

</head>
<body>

<h2 class="test">To jest nagłówek</h2>

<p class="test">To jest akapit  .</p>
<p>To jest kolejny akapit.</p>

<button class="prz">Kliknij</button>


<script type="text/javascript">
    $("button").click(function(){
        $(".test").toggle();
    });
</script>

</body>
</html>

============================= z17 =========================================
<!DOCTYPE html>
<html>
<head>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
</head>
<body>

<h2>To jest nagłówek</h2>

<p style="background-color:#ff0000">To jest akapit.</p>
<p style="background-color:#00ff00">To jest akapit.</p>
<p style="background-color:#0000ff">To jest akapit.</p>

<p>This is a paragraph.</p>

<button>Ustaw background-color elementów p</button>

<script type="text/javascript">
    $(document).ready(function(){
            $("button").click(function() {
            $("p").css("background-color", "yellow");
        });
    });

</script>
</body>
</html>

============================= z18 =========================================
<!DOCTYPE html>
<html>
<head>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
</head>
<body>

<h1>Witaj na tej stronie</h1>

<p>To jest akapit.</p>

<div style="border: 1px solid black;">
  <p>Akapit w elemencie div.</p>
  <p>Kolejny akapit w elemencie div.</p>
</div>
<br>

<div style="border: 1px solid black;">
  <p>Akapit w elemencie div.</p>
  <p>Kolejny akapit w elemencie div.</p>
</div>
<br>

<div style="border: 1px solid black;">
  <p>Akapit w elemencie div.</p>
  <p>Kolejny akapit w elemencie div.</p>
</div>

<script>
    $(document).ready(function(){
        $("div").first().css("background-color", "yellow");
    });
</script>
</body>
</html>

============================= z19 =========================================
<!DOCTYPE html>
<html>
<head>

<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<style>
.important {
    font-weight: bold;
    font-size: xx-large;
}

.blue {
    color: blue;
}
</style>
</head>
<body>

<div id="div1">To jest jakiś tekst.</div>
<div id="div2">To jest jakiś tekst.</div>
<br>

<button>Dodaj klasy do pierwszego elementu div</button>

<script type="text/javascript">
    $(document).ready(function(){
        $("button").click(function(){
            $("#div1").addClass("important blue");
        });
    });

</script>
</body>
</html>

============================= z20 =========================================
<!DOCTYPE html>
<html>
<head>

<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
</head>
<body>

<div id="div1" style="height:100px;width:300px;border:1px solid black;background-color:yellow;">

To jest tekst w elemencie div.
<p>To jest akapit w elemencie div.</p>
<p>To jest kolejny akapit w elemencie div.</p>

</div>
<br>

<button>Wyczyść element div</button>

<script type="text/javascript">
    $(document).ready(function(){
        $("button").click(function(){
            $("#div1").empty();
        });
    });

</script>
</body>
</html>

============================= z21 =========================================
<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="utf-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <!-- The above 3 meta tags *must* come first in the head; any other head content must come *after* these tags -->
    <title>Bootstrap</title>
    <!-- Bootstrap -->
    <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" integrity="sha384-BVYiiSIFeK1dGmJRAkycuHAHRg32OmUcww7on3RYdg4Va+PmSTsz/K68vbdEjh4u" crossorigin="anonymous">

    <!-- HTML5 shim and Respond.js for IE8 support of HTML5 elements and media queries -->
    <!-- WARNING: Respond.js doesn't work if you view the page via file:// -->
    <!--[if lt IE 9]>
      <script src="https://oss.maxcdn.com/html5shiv/3.7.3/html5shiv.min.js"></script>
      <script src="https://oss.maxcdn.com/respond/1.4.2/respond.min.js"></script>
    <![endif]-->
  </head>
  <body>
    <div class="container-fluid">
        <div class="row">
            <div class="col-lg-3 col-md-4 col-sm-6">
                <button type="button" class="btn btn-primary">
                    Primary <span class="badge badge-light">7</span>
                </button>
                <button type="button" class="btn btn-success">
                    Success <span class="badge badge-light">3</span>
                </button>
                <button type="button" class="btn btn-danger">
                    Danger <span class="badge badge-light">5</span>
                </button>
            </div>
            <div class="col-lg-9 col-md-8 col-sm-6">
                <img class="img-responsive" src="trolltunga.jpg" alt="Chania">
            </div>
        </div>
    </div>

    <!-- jQuery (necessary for Bootstrap's JavaScript plugins) -->
    <script src="https://ajax.googleapis.com/ajax/libs/jquery/1.12.4/jquery.min.js"></script>
    <!-- Include all compiled plugins (below), or include individual files as needed -->
    <script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js" integrity="sha384-Tc5IQib027qvyjSMfHjOMaLkfuWVxZxUPnCJA7l2mCWNIpG9mGCD8wGNIcPD7Txa" crossorigin="anonymous"></script>
  </body>
</html>
============================= z22 =========================================
<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="utf-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <!-- The above 3 meta tags *must* come first in the head; any other head content must come *after* these tags -->
    <title>Bootstrap</title>
    <!-- Bootstrap -->
    <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" integrity="sha384-BVYiiSIFeK1dGmJRAkycuHAHRg32OmUcww7on3RYdg4Va+PmSTsz/K68vbdEjh4u" crossorigin="anonymous">

    <!-- HTML5 shim and Respond.js for IE8 support of HTML5 elements and media queries -->
    <!-- WARNING: Respond.js doesn't work if you view the page via file:// -->
    <!--[if lt IE 9]>
      <script src="https://oss.maxcdn.com/html5shiv/3.7.3/html5shiv.min.js"></script>
      <script src="https://oss.maxcdn.com/respond/1.4.2/respond.min.js"></script>
    <![endif]-->
  </head>
  <body>
        <div class="dropdown">
          <button class="btn btn-primary dropdown-toggle" type="button" data-toggle="dropdown">Przykład Dropdown
          <span class="caret"></span></button>
          <ul class="dropdown-menu">
            <li><a href="#">HTML</a></li>
            <li><a href="#">CSS</a></li>
            <li><a href="#">JavaScript</a></li>
          </ul>
        </div>
    <!-- jQuery (necessary for Bootstrap's JavaScript plugins) -->
    <script src="https://ajax.googleapis.com/ajax/libs/jquery/1.12.4/jquery.min.js"></script>
    <!-- Include all compiled plugins (below), or include individual files as needed -->
    <script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js" integrity="sha384-Tc5IQib027qvyjSMfHjOMaLkfuWVxZxUPnCJA7l2mCWNIpG9mGCD8wGNIcPD7Txa" crossorigin="anonymous"></script>
  </body>
</html>