dom.html

<!DOCTYPE html>
<html>

<head>
    <!-- <script src = "dom.js"></script> -->
    <style type="text/css">
        .intro1 {
            background-color: red;
        }

        .intro2 {
            background-color: violet;
        }

        .intro3 {
            background-color: blue;
        }
    </style>
</head>

<body>
    <p class = "intro1" id="intro1">First paragraph</p>
    <p class = "intro2" id="intro2">Second paragraph</p>
    <p class = "intro3" id="intro3">Third paragraph</p>

    <ul>
        <li class = "intro1">Ankara</li>
        <li>Bursa</li>
        <li>İstanbul</li>
        <li>Zonguldak</li>
    </ul>
    <p id="mesaj"></p>
    <input type="text" name=musteriAdi value="Engin Demirog">
    <h1 id = "salih">Salih</h1>
    <h1 id="yazar"></h1>
    <p class = "intro1" id="agac">Ağaç değeri</p>
    <div id="div1">
        <p id="p1"> P1 section</p>

        <p id="p2"> P2 section</p>
    </div>

    <!-- script is moved here, because we want to work script after html to avoid error.  -->
    <script src="dom.js"></script>
</body>

</html>