Lecture 6

Welcome!

  • In our previous session, we implemented the Internet. Today, we are going to weave a web on top of it.
  • The World Wide Web, or Web for short, is really just a service that takes for granted that there is an infrastructure like the Internet that can get data from point A to point B.
  • What we’re going to focus on today is exactly what that data is that’s traveling between web browsers and web servers.
  • You can think of this process as sending an old-school letter in the mail. On the outside of the envelope, you might put the IP address of the recipient and a TCP port number that specifies the service you’re requesting, perhaps 80 or 443 for the web.
  • Inside this envelope can be any number of messages, but when we’re talking about the web, it’s going to follow a specific format.
  • Recall that web browsers and web servers speak a protocol called HTTP, Hypertext Transfer Protocol, that governs what the messages inside these envelopes must look like.
  • For instance, a browser might send a message like GET / HTTP/2 to request the root of a website. The server responds with a status code like 200 (meaning OK) and the content type, such as text/html.
  • HTML, or Hypertext Markup Language, is not a programming language. It’s a markup language, which means it’s a way of structuring your data and adding metadata to it.
  • HTML is relatively simple. A single lecture on HTML is enough to understand the basics, even though it takes practice to learn all of its features.

Tags and Attributes

  • HTML has only two syntactic features: tags and attributes.

  • Here is perhaps the simplest web page you can write in HTML version 5:

    <!DOCTYPE html>

<!-- Demonstrates HTML -->

<html lang="en">
    <head>
        <title>hello, title</title>
    </head>
    <body>
        hello, body
    </body>
</html>

    Notice that the first line is a document type declaration that indicates to the browser this is HTML version 5. The html tag contains everything, with a lang attribute set to en for English.

  • A tag is the name inside angle brackets, like <html> or <title>. Tags typically come in pairs: an open tag (or start tag) and a close tag (or end tag).
  • Notice how the close tag includes a forward slash before the tag name: </title>, </body>, </html>.
  • An attribute modifies the behavior of a tag. In <html lang="en">, lang is the attribute and en is its value. Attributes are key-value pairs.
  • The head tag contains metadata about the page, including the title that appears in the browser tab.
  • The body tag contains the main content of the page, everything visible in the browser window.

Document Object Model

  • There is a perfect correspondence between HTML and a tree structure called the DOM, or Document Object Model.

  • The DOM is the data structure that a browser builds in memory upon downloading a web page.

    HTML and DOM tree

  • Notice how the document is at the root, with html as its child. The html element has two children: head and body. Each of these has its own children containing the actual text content.
  • An element is everything between the start tag and end tag, including the content inside.
  • The indentation in HTML is just for human readability. Browsers don’t care about whitespace, but it helps us understand the hierarchy.

URLs

  • Recall from our discussion of HTTP that URLs follow a specific format.
  • A URL like https://www.example.com/file.html specifies a scheme (https), a fully qualified domain name (www.example.com), and a path to a specific file (file.html).
  • The file extension .html indicates the contents are HTML, though nowadays URLs don’t necessarily need to end with .html.
  • If you have nothing at the end of the URL, it implies you want the default homepage, often named index.html.

HTML Elements

  • Let’s explore more HTML tags and what they can do.

  • Paragraphs require the <p> tag. You cannot just write paragraphs of text and expect the browser to format them with breaks between them.

    <!DOCTYPE html>

<!-- Demonstrates paragraphs -->

<html lang="en">
    <head>
        <title>paragraphs</title>
    </head>
    <body>
        <p>
            Lorem ipsum dolor sit amet...
        </p>
        <p>
            Mauris ut dui in eros...
        </p>
    </body>
</html>

    Notice how each paragraph is wrapped in <p> and </p> tags. Without these tags, the text would appear as one continuous blob.

  • Headings are represented by <h1> through <h6> tags:

    <!DOCTYPE html>

<!-- Demonstrates headings (for chapters, sections, subsections, etc.) -->

<html lang="en">

    <head>
        <title>headings</title>
    </head>

    <body>

        <h1>One</h1>
        <p>
            Lorem ipsum dolor sit amet...
        </p>

        <h2>Two</h2>
        <p>
            Mauris ut dui in eros...
        </p>

        <h3>Three</h3>
        <p>
            Aenean venenatis convallis...
        </p>

    </body>

</html>

    Notice that <h1> is the biggest and boldest heading, while <h6> is the smallest. The browser automatically formats these differently.

  • Unordered lists use the <ul> tag with list items <li>:

    <!DOCTYPE html>

<!-- Demonstrates (unordered) lists -->

<html lang="en">
    <head>
        <title>list</title>
    </head>
    <body>
        <ul>
            <li>foo</li>
            <li>bar</li>
            <li>baz</li>
        </ul>
    </body>
</html>

    Notice that this creates a bulleted list. The terms foo, bar, and baz are placeholder words that computer scientists use, much like mathematicians use x, y, and z.

  • Ordered lists use <ol> instead:

    <!DOCTYPE html>

<!-- Demonstrates (ordered) lists -->

<html lang="en">
    <head>
        <title>list</title>
    </head>
    <body>
        <ol>
            <li>foo</li>
            <li>bar</li>
            <li>baz</li>
        </ol>
    </body>
</html>

    Notice that the browser automatically numbers the items. This is valuable because you can add or remove items without having to manually renumber everything.

  • Tables use a collection of tags to structure rows and columns:

    <!DOCTYPE html>

<!-- Demonstrates table -->

<html lang="en">
    <head>
        <title>phonebook</title>
    </head>
    <body>
        <table>
            <thead>
                <tr>
                    <th>Name</th>
                    <th>Number</th>
                </tr>
            </thead>
            <tbody>
                <tr>
                    <td>Brian</td>
                    <td>+1-617-495-1000</td>
                </tr>
                <tr>
                    <td>David</td>
                    <td>+1-617-495-1000</td>
                </tr>
            </tbody>
        </table>
    </body>
</html>

    Notice how <thead> contains the table header, <tbody> contains the table body, <tr> represents each table row, <th> is a table heading cell, and <td> is table data.

Images and Video

  • Images use the <img> tag:

    <!DOCTYPE html>

<!-- Demonstrates image -->

<html lang="en">
    <head>
        <title>image</title>
    </head>
    <body>
        <img alt="Harvard University" src="bridge.png">
    </body>
</html>

    Notice that the src attribute specifies the source file, and alt provides alternative text for accessibility and slow connections. The <img> tag is an empty element that does not need a closing tag.

  • Videos can be embedded using the <video> tag:

    <!DOCTYPE html>

<!-- Demonstrates video -->

<html lang="en">
    <head>
        <title>video</title>
    </head>
    <body>
        <video controls muted>
            <source src="video.mp4" type="video/mp4">
        </video>
    </body>
</html>

    Notice how controls and muted are attributes that don’t need values. Their mere presence tells the browser to show playback controls and start muted.

  • YouTube videos can be embedded using an <iframe>:

    <!DOCTYPE html>

<!-- Demonstrates video -->

<html lang="en">
    <head>
        <title>video</title>
    </head>
    <body>
        <iframe width="560" height="315" src="https://www.youtube.com/embed/4n2tptIU87U" title="YouTube video player" frameborder="0" allow="accelerometer; autoplay; clipboard-write; encrypted-media; gyroscope; picture-in-picture; web-share" referrerpolicy="strict-origin-when-cross-origin" allowfullscreen></iframe>
    </body>
</html>

    Notice that this HTML can be copied from YouTube’s share feature. Be cautious about copying and pasting code from external sources, as it could potentially include malicious content.

  • Hyperlinks use the anchor tag <a>:

    <!DOCTYPE html>

<!-- Demonstrates link -->

<html lang="en">
    <head>
        <title>link</title>
    </head>
    <body>
         Visit <a href="image.html">Harvard</a>.
    </body>
</html>

    Notice that href specifies where the link goes, and the text between the tags is what the user sees and clicks.

  • The href can be a relative path (like image.html) or a full URL (like https://www.harvard.edu/).
  • Phishing attacks exploit the fact that the displayed text can be different from the actual destination. The word “Harvard” could link to a completely different site.
  • If you hover over a link, most browsers show the actual destination URL in the corner of the window.

Forms

  • Forms collect user input and can send data to servers:

    <!DOCTYPE html>

<!-- Demonstrates form -->

<html lang="en">
    <head>
        <title>search</title>
    </head>
    <body>
        <form action="https://www.google.com/search" method="get">
            <input name="q" type="text">
            <input type="submit" value="Google Search">
        </form>
    </body>
</html>

    Notice that the action attribute specifies where to send the form data, and method="get" means the data will be sent as URL parameters. The name="q" attribute identifies the input field, and Google uses q for query.

  • When you submit this form, the URL becomes something like https://www.google.com/search?q=cats, where the ? introduces key-value pairs called HTTP parameters.

Input Types

  • Inputs can have different types for better user experience:

    <!DOCTYPE html>

<!-- Demonstrates form -->

<html lang="en">
    <head>
        <title>search</title>
    </head>
    <body>
        <form action="https://www.google.com/search" method="get">
            <input name="q" type="search">
            <input type="submit" value="Google Search">
        </form>
    </body>
</html>

    Notice that changing type="text" to type="search" adds a small X button to clear the field.

  • Additional attributes can enhance the experience:

    <!DOCTYPE html>

<!-- Demonstrates additional form attributes -->

<html lang="en">
    <head>
        <title>search</title>
    </head>
    <body>
        <form action="https://www.google.com/search" method="get">
            <input autocomplete="off" autofocus name="q" placeholder="Query" type="search">
            <button>Google Search</button>
        </form>
    </body>
</html>

    Notice that autocomplete="off" prevents browser suggestions, autofocus puts the cursor in the field automatically, and placeholder shows grayed-out hint text.

Regular Expressions

  • Regular expressions, or regexes, are patterns that you can validate against.
  • Common regex syntax includes:
    • . - any single character
    • * - zero or more of the previous character
    • + - one or more of the previous character
    • ? - zero or one of the previous character
    • {n} - exactly n of the previous character
    • [0-9] - any digit
    • \d - any decimal digit
    • \D - any character that is not a digit

Client-side Validation

  • HTML can validate user input using patterns:

    <!DOCTYPE html>

<!-- Demonstrates pattern attribute for phone number -->

<html lang="en">
    <head>
        <title>register</title>
    </head>
    <body>
        <form>
            <input autocomplete="off" autofocus name="phone" pattern="\d{3}-\d{3}-\d{4}" placeholder="###-###-####">
            <button>Register</button>
        </form>
    </body>
</html>

    Notice that the pattern \d{3}-\d{3}-\d{4} requires exactly three digits, a hyphen, three more digits, another hyphen, and four digits.

  • For email validation, you could use a pattern like .+@.+\.edu:

    <!DOCTYPE html>

<!-- Demonstrates pattern attribute for email -->

<html lang="en">
    <head>
        <title>register</title>
    </head>
    <body>
        <form>
            <input autocomplete="off" autofocus name="email" pattern=".+@.+\.edu" placeholder="Email">
            <button>Register</button>
        </form>
    </body>
</html>

    Notice that \. means a literal dot (since . normally means any character), and this pattern requires an @ sign and a .edu ending.

  • You can also use built-in input types for common validations:

    <!DOCTYPE html>

<!-- Demonstrates type="email" -->

<html lang="en">
    <head>
        <title>register</title>
    </head>
    <body>
        <form>
            <input autocomplete="off" autofocus name="email" placeholder="Email" type="email">
            <button>Register</button>
        </form>
    </body>
</html>

    Notice that type="email" tells the browser to use its built-in email validation, which is more sophisticated than a simple pattern.

Developer Tools

  • Modern browsers have built-in developer tools that let you inspect and modify web pages.
  • You can access these by right-clicking on a page and selecting “Inspect” or “View Page Source”.
  • The Elements tab shows the HTML and CSS of the page. You can:
    • Expand and collapse elements
    • See what CSS properties apply to each element
    • Modify the HTML or CSS temporarily
  • Any changes you make are only in your browser’s memory. Reloading the page restores the original content.
  • This is why client-side validation is not sufficient for security. A user can remove validation patterns using developer tools and submit invalid data. You still need server-side validation to ensure data integrity.
  • The W3C Validator at validator.w3.org can help check that your HTML is correct.

CSS

  • CSS, or Cascading Style Sheets, is the language used to stylize web pages.
  • HTML gives us the structure and layout. CSS handles the fonts, colors, spacing, and visual appearance.
  • CSS uses properties, which are key-value pairs. In HTML we have attributes and values; in CSS we have properties and values.

  • You can add CSS inline using the style attribute:

    <!DOCTYPE html>

<!-- Demonstrates inline CSS with P tags -->

<html lang="en">
    <head>
        <title>home</title>
    </head>
    <body>
        <p style="font-size: large; text-align: center;">
            John Harvard
        </p>
        <p style="font-size: medium; text-align: center;">
            Welcome to my home page!
        </p>
        <p style="font-size: small; text-align: center;">
            Copyright &#169; John Harvard
        </p>
    </body>
</html>

    Notice how style="font-size: large; text-align: center;" applies two CSS properties. Properties are separated by semicolons, and each property has a key and value separated by a colon.

  • The &#169; is an HTML entity that represents the copyright symbol.

  • Using <div> tags instead of <p> is more appropriate when the content isn’t truly a paragraph:

    <!DOCTYPE html>

<!-- Demonstrates inline CSS with DIV tags -->

<html lang="en">
    <head>
        <title>home</title>
    </head>
    <body>
        <div style="font-size: large; text-align: center;">
            John Harvard
        </div>
        <div style="font-size: medium; text-align: center;">
            Welcome to my home page!
        </div>
        <div style="font-size: small; text-align: center;">
            Copyright &#169; John Harvard
        </div>
    </body>
</html>

    Notice that <div> stands for division, representing a generic section of the page.

  • The “C” in CSS stands for Cascading. Styles can cascade down from parent elements to children:

    <!DOCTYPE html>

<!-- Removes outer DIV -->

<html lang="en">
    <head>
        <title>home</title>
    </head>
    <body style="text-align: center">
        <div style="font-size: large">
            John Harvard
        </div>
        <div style="font-size: medium">
            Welcome to my home page!
        </div>
        <div style="font-size: small">
            Copyright &#169; John Harvard
        </div>
    </body>
</html>

    Notice that text-align: center on the body cascades down to all child elements, eliminating repetition.

Selectors

  • Instead of inline styles, CSS can be placed in a <style> tag in the head using selectors:

    <!DOCTYPE html>

<!-- Demonstrates CSS selectors -->

<html lang="en">
    <head>
        <style>

            body {
                font-size: medium;
                text-align: center;
            }

            #header {
                font-size: large;
            }

            #footer {
                font-size: small;
            }

        </style>
        <title>home</title>
    </head>
    <body>
        <div id="header">
            John Harvard
        </div>
        <div>
            Welcome to my home page!
        </div>
        <div id="footer">
            Copyright &#169; John Harvard
        </div>
    </body>
</html>

    Notice how body is a type selector that selects elements by tag name. The #header and #footer are ID selectors that select elements by their unique id attribute.

  • HTML5 provides semantic tags that are more meaningful than generic <div> elements:

    <!DOCTYPE html>

<!-- Uses semantic tags instead of DIVs -->

<html lang="en">
    <head>
        <style>

            body {
                text-align: center;
            }

            header {
                font-size: large;
            }

            main {
                font-size: medium;
            }

            footer {
                font-size: small;
            }

        </style>
        <title>home</title>
    </head>
    <body>
        <header>
            John Harvard
        </header>
        <main>
            Welcome to my home page!
        </main>
        <footer>
            Copyright &#169; John Harvard
        </footer>
    </body>
</html>

    Notice how <header>, <main>, and <footer> are more semantically meaningful. This helps search engines and screen readers understand the page structure.

  • Class selectors allow you to create reusable styles:

    <!DOCTYPE html>

<!-- Demonstrates class selectors -->

<html lang="en">
    <head>
        <style>

            .centered {
                text-align: center;
            }

            .large {
                font-size: large;
            }

            .medium {
                font-size: medium;
            }

            .small {
                font-size: small;
            }

        </style>
        <title>home</title>
    </head>
    <body>
        <header class="centered large">
            John Harvard
        </header>
        <main class="centered medium">
            Welcome to my home page!
        </main>
        <footer class="centered small">
            Copyright &#169; John Harvard
        </footer>
    </body>
</html>

    Notice that class selectors start with a dot (.centered). Elements can have multiple classes separated by spaces. Unlike IDs, classes can be used on multiple elements.

  • Classes can cascade just like other styles:

    <!DOCTYPE html>

<!-- Demonstrates cascading of classes -->

<html lang="en">
    <head>
        <style>

            .centered {
                text-align: center;
            }

            .large {
                font-size: large;
            }

            .medium {
                font-size: medium;
            }

            .small {
                font-size: small;
            }

        </style>
        <title>home</title>
    </head>
    <body class="centered">
        <header class="large">
            John Harvard
        </header>
        <main class="medium">
            Welcome to my home page!
        </main>
        <footer class="small">
            Copyright &#169; John Harvard
        </footer>
    </body>
</html>

    Notice that the .centered class is applied to the body and cascades down to all children.

  • CSS can be moved to an external stylesheet for better organization:

    <!DOCTYPE html>

<!-- Demonstrates external stylesheets -->

<html lang="en">
    <head>
        <link href="home8.css" rel="stylesheet">
        <title>home</title>
    </head>
    <body class="centered">
        <header class="large">
            John Harvard
        </header>
        <main class="medium">
            Welcome to my home page!
        </main>
        <footer class="small">
            Copyright &#169; John Harvard
        </footer>
    </body>
</html>

    Notice that the <link> tag with rel="stylesheet" connects this HTML file to an external CSS file. The href specifies the stylesheet’s location.

  • The external CSS file (home8.css) contains the styles:

    .centered {
    text-align: center;
}

.large {
    font-size: large;
}

.medium {
    font-size: medium;
}

.small {
    font-size: small;
}

    Notice that this is pure CSS with no HTML tags around it. This separation allows designers and developers to work on different files.

  • Pseudo-selectors can style elements based on their state:

    <!DOCTYPE html>

<!-- Demonstrates type selector and pseudoselector for link -->

<html lang="en">
    <head>
        <style>

            a {
                color: red;
                text-decoration: none;
            }

            a:hover {
                text-decoration: underline;
            }

        </style>
        <title>link</title>
    </head>
    <body>
        Visit <a href="https://www.harvard.edu/">Harvard</a>.
    </body>
</html>

    Notice that a:hover applies only when the user hovers over a link. This creates an interactive effect where the underline appears on hover.

Frameworks

  • Frameworks or libraries are collections of CSS (and often JavaScript) that others have written and shared.

  • Bootstrap is a popular framework that provides pre-styled components:

    <!DOCTYPE html>

<!-- Demonstrates table with Bootstrap -->

<html lang="en">
    <head>
        <link href="https://cdn.jsdelivr.net/npm/bootstrap@5.3.7/dist/css/bootstrap.min.css" rel="stylesheet" integrity="sha384-LN+7fdVzj6u52u30Kp6M/trliBMCMKTyK833zpbD+pXdCLuTusPj697FH4R/5mcr" crossorigin="anonymous">
        <title>phonebook</title>
    </head>
    <body>
        <table class="table">
            <thead>
                <tr>
                    <th scope="col">Name</th>
                    <th scope="col">Number</th>
                </tr>
            </thead>
            <tbody>
                <tr>
                    <td>Brian</td>
                    <td>+1-617-495-1000</td>
                </tr>
                <tr>
                    <td>David</td>
                    <td>+1-617-495-1000</td>
                </tr>
            </tbody>
        </table>
    </body>
</html>

    Notice how including the Bootstrap CSS via a <link> tag and adding class="table" transforms a plain table into a beautifully styled one.

  • Frameworks allow you to stand on the shoulders of others, using well-designed styles without having to create them yourself.

JavaScript

  • JavaScript is a programming language commonly used within web pages to control dynamically the contents and user experience.
  • Unlike HTML and CSS, JavaScript is a proper programming language with functions, conditionals, loops, and more.
  • JavaScript can modify the DOM in real-time. When you use Gmail and new emails appear without reloading, that’s JavaScript at work.

  • JavaScript can be included using the <script> tag:

    <!DOCTYPE html>

<!-- Demonstrates onsubmit -->

<html lang="en">
    <head>
        <script>

            function greet() {
                alert('hello, ' + document.querySelector('#name').value);
            }

        </script>
        <title>hello</title>
    </head>
    <body>
        <form onsubmit="greet(); return false;">
            <input autocomplete="off" autofocus id="name" placeholder="Name" type="text">
            <input type="submit">
        </form>
    </body>
</html>

    Notice that the function keyword defines a function (like def in Python). The document.querySelector('#name') selects the element with ID “name” and .value gets what the user typed. The alert() function shows a popup.

  • Event listeners provide a cleaner way to handle events:

    <!DOCTYPE html>

<!-- Demonstrates DOMContentLoaded -->

<html lang="en">
    <head>
        <script>

            document.addEventListener('DOMContentLoaded', function() {
                document.querySelector('form').addEventListener('submit', function(e) {
                    alert('hello, ' + document.querySelector('#name').value);
                    e.preventDefault();
                });
            });

        </script>
        <title>hello</title>
    </head>
    <body>
        <form>
            <input autocomplete="off" autofocus id="name" placeholder="Name" type="text">
            <input type="submit">
        </form>
    </body>
</html>

    Notice that addEventListener waits for specific events. DOMContentLoaded fires when the page is ready. e.preventDefault() stops the form from actually submitting.

  • JavaScript can respond to keystrokes in real-time:

    <!DOCTYPE html>

<!-- Demonstrates keyup and template literals -->

<html lang="en">
    <head>
        <script>

            document.addEventListener('DOMContentLoaded', function() {
                let input = document.querySelector('input');
                input.addEventListener('keyup', function(event) {
                    let name = document.querySelector('p');
                    if (input.value) {
                        name.innerHTML = `hello, ${input.value}`;
                    }
                    else {
                        name.innerHTML = 'hello, whoever you are';
                    }
                });
            });

        </script>
        <title>hello</title>
    </head>
    <body>
        <form>
            <input autocomplete="off" autofocus placeholder="Name" type="text">
        </form>
        <p></p>
    </body>
</html>

    Notice that keyup fires when a key is released. The let keyword declares a variable. Template literals using backticks and ${variable} allow embedding variables in strings. The innerHTML property changes the content of an element.

  • JavaScript can access browser features like speech synthesis:

    <!DOCTYPE html>

<html lang="en">
    <head>
        <script>

            document.addEventListener('DOMContentLoaded', function() {
                document.querySelector('form').addEventListener('submit', function(e) {
                    let name = document.querySelector('#name').value;
                    let utterance = new SpeechSynthesisUtterance(`hello, ${name}`);
                    window.speechSynthesis.speak(utterance);
                    e.preventDefault();
                });
            });

        </script>
        <title>title</title>
    </head>
    <body>
        <form>
            <input autocomplete="off" autofocus id="name" placeholder="Name" type="text">
            <input type="submit">
        </form>
    </body>
</html>

    Notice that this uses the browser’s speech synthesis API to actually speak the greeting aloud.

  • JavaScript can change CSS properties dynamically:

    <!DOCTYPE html>

<!-- Demonstrates programmatic changes to style -->

<html lang="en">
    <head>
        <title>background</title>
    </head>
    <body>
        <button id="red">R</button>
        <button id="green">G</button>
        <button id="blue">B</button>
        <script>

            let body = document.querySelector('body');
            document.querySelector('#red').addEventListener('click', function() {
                body.style.backgroundColor = 'red';
            });
            document.querySelector('#green').addEventListener('click', function() {
                body.style.backgroundColor = 'green';
            });
            document.querySelector('#blue').addEventListener('click', function() {
                body.style.backgroundColor = 'blue';
            });

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

    Notice that body.style.backgroundColor accesses and modifies the CSS background-color property. In JavaScript, CSS property names use camelCase (backgroundColor) instead of hyphens (background-color).

  • JavaScript can create animations using timers:

    <!DOCTYPE html>

<html lang="en">
    <head>
        <script>

            // Toggles visibility of greeting
            function blink()
            {
                let body = document.querySelector('body');
                if (body.style.visibility == 'hidden')
                {
                    body.style.visibility = 'visible';
                }
                else
                {
                    body.style.visibility = 'hidden';
                }
            }

            // Blink every 500ms
            window.setInterval(blink, 500);

        </script>
        <title>blink</title>
    </head>
    <body>
        hello, world
    </body>
</html>

    Notice that setInterval calls the blink function every 500 milliseconds. This recreates the deprecated <blink> tag that was removed from HTML for being annoying.

  • JavaScript can implement features like autocomplete:

    <!DOCTYPE html>

<html lang="en">

    <head>
        <title>autocomplete</title>
    </head>

    <body>

        <input autocomplete="off" autofocus placeholder="Query" type="text">

        <ul></ul>

        <script src="large.js"></script>
        <script>

            let input = document.querySelector('input');
            input.addEventListener('keyup', function(event) {
                let html = '';
                if (input.value) {
                    for (word of WORDS) {
                        if (word.startsWith(input.value)) {
                            html += `<li>${word}</li>`;
                        }
                    }
                }
                document.querySelector('ul').innerHTML = html;
            });

        </script>

    </body>
</html>

    Notice how this searches through a list of words (loaded from large.js) and dynamically updates the page with matching results. This is event-driven programming, where code waits for events like keypresses to happen.

  • Indeed, JavaScript can be used as an alternative to something like Python. But using these technologies—which are not going anywhere anytime soon—you can compose all of today’s websites and some of today’s mobile applications.
  • Even though we haven’t looked at all of the tags and attributes, properties and functions that exist across these three languages, we have looked at all of the fundamentals on top of which you can build sites and applications of your own.

Summing Up

In this lesson, you learned about the technologies that weave the World Wide Web. Specifically, you learned…

  • How HTTP requests and responses work between browsers and servers.
  • HTML for structuring web page content using tags and attributes.
  • The Document Object Model (DOM) as a tree representation of web pages.
  • Various HTML elements for paragraphs, headings, lists, tables, images, videos, links, and forms.
  • How to use input types and regular expressions for client-side validation.
  • Developer tools for inspecting and debugging web pages.
  • CSS for styling web pages using selectors, properties, and values.
  • The difference between type, ID, and class selectors.
  • Frameworks like Bootstrap for pre-built styles.
  • JavaScript for making web pages interactive and dynamic.

See you next time!