Web Development

by Nick Wong ‘20

Intro

To write a webpage, we need a special language - HTML
This isn’t a programming language
It’s a markup language, which tells us how to display information

CS50 IDE

This is an integrated development environment
It’s run on the web, and gives us the tools we need to code
To the left is our access to what files are on the server
To the bottom right is our console, or command line
And to the right, that main pain is space to open files

hello.html

CS50 IDE will try to autocomplete for us, so that we can use TAB to finish off our thought

<!DOCTYPE HTML>

<html>
    <head>
        <title>Hello, world!</title>
    </head>
    <body>
        Hello, world!
    </body>
</html>

What does this do?
It just tells the browser what it’s seeing and how to display it
These tags tell the browser what item it’s looking at
The head tag, usually tells the browser some information about the webpage
The body tag tells the browser the main content of the webpage
The tags all need to have some close, where if the tag has some “name”, it is closed by a “/name”
These tag closes show the browser when we’re done with each HTML element

image.html

What if we wanted to display images in our webpage?
If we make a new file “image.html”, and have some image (like “cat.jpg”) in our folder, we can make the webpage display this image
Very similar to our previous HTML:

<!DOCTYPE HTML>

<html>
    <head>
        <title>image</title>
    </head>
    <body>
        <img src="cat.jpg"/>
    </body>
</html>

In the img tag, we see that it doesn’t have a </img> counterpart
We can just signify that the tag has no children or elements within it using />
Chrome’s web inspector (as with right clicking and then selecting “Inspect”) lets us see under the hood
favicon.ico is a standard on the web for displaying a small image, often in the tab or the search bar

link.html

This page will be called “link.html” (or whatever you’d like)

<!DOCTYPE HTML>

<html>
    <head>
        <title>link</title>
    </head>
    <body>
        Search for <a href="https://www.google.com/search?q=cats"/>.
    </body>
</html>

What is this telling us?
We have something called markup within that text we were displaying
href is hyper reference - what tells a link where to link to
This is the essence of the Internet - to link to other locations
Links connect almost everything

headings.html

We already know the fundamental structure of the modern webpage
We can see that something called headings allows us to show new size texts

paragraphs.html

meta tags allows us, the webpage, to know if it’s being displayed on a device as opposed to a laptop
This lets us resize things to be properly displayed depending on device
Web browsers take things quite literally - we need to tell the browser when text breaks or has lines, for example

list.html

This has a similar structure to what we’ve seen so far
Now, there’s an unordered list (bullets, instead of numbers or letters)
The tag for an unordered list is ul, while for an ordered one it’s ol

table.html

The tag table allows us to create a table, for organizing data into rows and columns
tr gives us each row, with children td, which mark each cell within a row
Though this seems complex, and children and nesting can get involved, we just need to build it one piece at a time

search.html

Here, we can see how easy it is to use HTML to make webpages

<!DOCTYPE HTML>

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

The method we use here is “get”, an HTTP method that we’ve seen before
This gives us the simplest version of Google’s interface (which isn’t particularly complex as is)
Hopefully, this shows how much HTML actually is not as obscure nor as difficult as it seems
If we inspect Google’s page with Chrome’s Inspect, what do we see?
We can now see how Google’s page is actually organized somewhat like how ours have been
We can actually see that maybe every link we click is actually not exactly what we think it is
Google can give us a link that tells them we’ve clicked it, and then redirect us extremely quickly to where we want to go

css0.html

We don’t need to stick with the default stylings of HTML
We can actually use something called CSS - cascading style sheets, to style up our HTML
HTML5 has special tags that allow us to structure our page - header, main, footer
There are some new attributes we have access to, particularly style

<header style="font-size: large; text-align: center;">

We can now tell the browser to style our HTML
The structure of CSS is generally “attribute: parameter”, as we see above

css1.html

What if we could “factor out” the repetition of our previous code
As tags have children, which are the tags within them, tags can have parents or the tags in which they are
If we can write code to avoid copy/pasting code, we should - this is better design
For example, we can make the repetition before into one line of code:

<body style="font-size: large; text-align: center;">

Since each of our headers are children of the body tag, they end up with the same stylings, with a fraction of the code!

css2.html

What if we could maintain our style somewhere so that we don’t need to mix our style into our HTML code
We have a new attribute class, which allows us to organize code into groups
At the top of the webpage, in head, we can design the style of each class for the rest of the page

<!DOCTYPE HTML>

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

            .centered
            {
                text-align: center;
            }

            .large
            {
                font-size: large;
            }

            .medium
            {
                font-size: medium;
            }

            .small
            {
                font-size: small;
            }

        </style>

        ...

    </head>

    ...

</html>

You could say that this is now better designed, despite the overall effect remaining the same
We already have words or unique names, like header and footer

css3.html

We can change our style to match the unique names we already have
It is often better to try and minimize the amount of code we have to write
This is often for the sake of both readability, and efficiency

<!DOCTYPE HTML>

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

            body
            {
                text-align: center;
            }

            header
            {
                font-size: large;
            }

            main
            {
                font-size: medium;
            }

            footer
            {
                font-size: small;
            }

        </style>

        ...

    </head>

    ...

</html>

These properties are the same as before, but using the tools we already have
This way we don’t introduce new (and unneeded) lines of code
Extra lines of code could lead to new errors, and more things to maintain over time

css4.html

In our head tag, we can specify a file to include

<link href="css4.css" rel="stylesheet">

This now allows us to write our style code entirely elsewhere
Specifically, it goes into a file called “css4.css”
This link tag tells the browser that more information can be found at href
In particular, stylesheet information can be found there
In this file, we have the same contents, sans the style tag

body
{
    text-align: center;
}

header
{
    font-size: large;
}

main
{
    font-size: medium;
}

footer
{
    font-size: small;
}

Introducing to JavaScript

We now have some fundamental tools for building static content and styling it
However, this is static content - what if we wanted things to interact with the user?
JavaScript, or JS, is a browser language that allows us to interact with the user
This lets us write code within the browser
DOM - Document Object Model - in the example we see, we can type in a word, and the webpage prints that input to us via pop-up
How can the webpage grab data we input and then use it?

DOM

The Document Object Model makes every webpage into a form of hierarchy - where some tags are at the top, with other below them
This keeps with the parent and child model we’ve had so far in HTML
In our example, this look like (and is called), a tree
The browser builds up this tree in memory so as to be able to navigate it
This brings us to the script tag

dom0.html

Now we can use some JavaScript within our HTML

    <form onsubmit="greet(); return false;">

    ...

    </form>

We have some function greet() that performs some action
We also return false; last, which means that the default “go to server” action will not be executed
Towards the top of the example page, we see code that looks like this:

<script>

    function greet()
    {
        alert('hello, ' + document.getElementById('name').value + '!');
    }
</script>

This is the definition of our function greet(), or how the browser knows what to do
document is a special variable that gives us control over our document
getElementById is a special functionality
When we look at the HTML we used to define how our webpage looks:

<input id="name" placeholder="Name" type="text/>

This input tag has the id of “name”
So it would appear that document.getElementById('name').value tells our browser what the user typed in
This is just a particular syntax for getting at an element in a webpage
The browser doesn’t search the HTML for data, it uses a model, or tree, of the structure to find elements

dom1.html

If we now identify our form as with:

<form id="form>

we can use JavaScript to find this form

<script>

    document.getElementById('form').onsubmit = function () {
        alert('hello, ' + document.getElementById('name').value + '!');
    };

</script>

This uses JavaScript to associate the function we saw above with the submission of our form with id “form”
We need to include this code beneath the form’s creation in the HTML, because if the form does not exist, we cannot associate a function or event handler with it

dom2.html

We can move the script tag to the head of the webpage (or to the bottom) and tell the browser where to find our JavaScript code

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

This is similar to how we told the browser where to find our stylesheet earlier

form0.html

What if we wanted to check a form that would actually be sent to a server?

<form>
    Email: <input name="email" type="text"/>
    <br/>
    Password: <input name="password" type="password"/>
    <br/>
    Password (again): <input name="confirmation" type="password"/>
    <br/>
    I agree to the terms and conditions: <input name="agreement" type="checkbox"/>
    <br/><br/>
    <input type="submit" value="Register"/>
</form>

Simple formatting in this case, but it does provide us with a simple form we could submit
What kinds of validation do we want here?
- Password length? Passwords matching? Valid email input? Etc.
- Right now, nothing gets validated, how could we add some logic?
We can now add some JavaScript to validate our form:

<script>

    var form = document.getElementById('form');

    form.onsubmit = function() {

        if (form.email.value == '')
        {
            alert('You must provide your email address!');
            return false;
        }

        else if (form.password == '')
        {
            ...
        }

        ...

        return true;
    }

</script>

This code checks if the email or password are blank
When checking for equality in computer science, we usually use “==”, since “Left = Right” usually means “assign the value of Right to the variable Left”
If any of our validations fail, we return false, so as to prevent the form from being submitted

JavaScript vs Scratch

JavaScript may seem more cryptic or difficult than what we saw with Scratch
However, the actual idea of what we want to do in JavaScript is the same as with Scratch
There is a particular syntax for working with JavaScript, similar to how there are certain blocks in Scratch that can fit together and others that cannot

Summary

As we saw with HTML and CSS, we can create a webpage, format it, and style the elements within it
We also now know that JavaScript gives the browser access to data within the webpage
JavaScript also allows for dynamic updating of our page (as with Facebook messages) without us actually leaving the webpage
Looking forward:
- How do we scale for more and more users? A personal website to something like Google or Facebook
- What kind of technology is involved in running web devices and servers?
- How do we take into account the different kinds of devices that exist, and how they each display varying pieces of information?