Discussion 4 - HyperText Markup Language (HTML)

4.0. Overview

In this unit, we're going to delve into the subject of writing HTML markup for the World Wide Web, and using CSS to design for the web.

4.1. A Brief History of the Internet

The World Wide Web (WWW) didn't spring into existence overnight. The first email sent from one user to another (from within a single machine) occurred in 1965. It wasn't until a few years later, in 1969, that the ARPAnet, precursor to the Internet, sent and received its first packets of information.

You can read more about these early days of the Internet's development on Wikipedia, and watch this History of the Internet (3 minutes, YouTube).

Note that the Internet—a network for passing information back and forth—is NOT the same thing as the World Wide Web. That was yet to come.

4.2. The World Wide Web

The first web page

In 1989, Tim Berners-Lee famously proposed a system by which hypertext viewed in a browser could be used "to link and access information of various kinds as a web of nodes in which the user can browse at will."

To accomplish such a thing, two devices were needed: a webserver to deliver the information (first built in 1990), and browser software to allow one's computer to traverse the hyperlinks.

The first graphical browser, Mosaic, was created in 1993.

You can read more about the development of the World Wide Web on Wikipedia.

4.3. HyperText Markup Language (HTML)

Basic text can be written out very simply, of course.

In writing out some notes for this course, I could type this into my computer:

2.7. HTML, CSS, and JavaScript

This class is going to be focused on programming for the web. Let's take a 
few minutes to get oriented.

There are three areas of interest for us:

1. HTML
2. CSS
3. JavaScript

Writing the text out like that is clean and straightforward, but I'd like to be a little more clear about the parts that I've written there. There are a couple of paragraphs, there's a numbered list, and there's a header at the top that describes the whole thing.

We can indicate those parts of the writing by "marking up" the document with HTML "tags." Here's how you'd do that.

<h1>2.7. HTML, CSS, and JavaScript</h1>
<p>This class is going to be focused on programming for the web. Let's take a 
few minutes to get oriented.</p>
<p>There are three areas of interest for us:</p>
<ol>
    <li>HTML</li>
    <li>CSS</li>
    <li>JavaScript</li>
</ol>

The code above is Hypertext Markup Language (HTML), which is a system for "marking up" plain text so that it can be formatted in a web browser like Mozilla's Firefox, Google's Chrome, or Apple's Safari. The textfile uses tags (indicated by angle brackets < and > ) to indicate how text—structured in the form of headers, paragraphs, lists, embedded graphics, etc—should be rendered in the browser. So this text can be viewed in two ways: as plain text in a text editor, or as formatted text in a browser.

Here is how a browser might display that same text:

2.7. HTML, CSS, and JavaScript

This class is going to be focused on programming for the web. Let's take a few minutes to get oriented.

There are three areas of interest for us:

HTML
CSS
JavaScript

What's the difference?

Simple text is just simple text.
Simple text can be written to include markup formatting tags called "HTML."
When HTML text is viewed in a browser, the markup tags are used to give the text some additional formatting and structure.

Webpages are most often viewed using a browser: Mozilla's Firefox, Apple's Safari, Google's Chrome, Microsoft's Edge, etc. The HTML source code for the page is interpreted by the browser and then displayed.

You can see the source code for most webpages by clicking the equivalent of View > Source in your browser's menu.

In Google's Chrome, select View > Developer > View Source. You can also select from within Chrome the "menu" icon ⋮ > More Tools > Developer Tools > Sources
In Firefox, select ☰ > Web Developer > Page Source.
In Safari, select Safari > Preferences > Advanced > Show Develop menu in menu bar.
Then Develop > Show Page Source.

Creating a simple webpage is pretty easy:

Create a text file with the extension .html that includes the text you want, written using HTML markup.
Open that file up in a browser, which will interpret the HTML code and display the page appropriately.
If you want the page to be public, transfer it to a web server where people will be able to type in a Uniform Resource Locator (URL) and view it!

We're going to do all of these.

4.4. Writing a webpage and a website

Let's try writing a very small website. This website will consist of just three pages, but it will include many features that you see on larger websites.

Once we've worked on this small website together to develop some of the important website creation strategies, you'll build another website of your own.

4.4.1. The sections of a webpage

Most webpages on most websites are split up into four main areas of screen "real estate":

a "header" near the top of the page
a "navigation" or "menu" division along the top of the page, or perhaps along the left or right side of the page
a "main" or "content" section where the primary content for that page is located
a "footer" section located at the bottom of the page

Identify the four sections on a webpage

Go to a website on the internet—the one for this class, or for your school, or for the LA Dodgers—and identify the header, nav, main, and footer sections for that website.

4.4.2. The index page

We'll use repl.it to build our website. Create a new repl using HTML, CSS, and JS. Let's call it 03-sampleWebsite
We will not be using CSS or JavaScript on our website at first, so we'll only be editing the HTML document index.html.
A webpage has text, and images, and links, and perhaps references to sound or movie files. But ultimately, it has to have content.
What is the website about?

For this project, I'm going to choose the delicate subject of coping with isolation during a pandemic lockdown. I want to be able to help people find ways to successfully manage their lives during a stressful time.

There are a lot of other topics that would be important to create a website for right now. But this is the one that we'll use for this short example.

With this subject in mind, let's start thinking about the "home page" of our website.
Within the opening and closing body tags of the index.html file, create a "header" to be displayed at the top of the page:
```
<h1>Life during Lockdown</h1>
```
Create a short menu that will be used to navigate our site. This "unordered list" will look a little funny at first, but we'll fix it all later on:
```
<ul>
    <li>Home</li>
    <li>Help</li>
    <li>About</li>
</ul>
```
Those references above are going to be links to other pages that we haven't yet written, but we can still set up the links.
"Home" refers to the page we're currently on, so we don't need a link to this page from this page. But let's include an "anchor" link that leads to the Help page, and do the same for the About page.
```
<li><a href="help.html">Help</a></li>
<li><a href="about.html">About</a></li>
```
When we're ready to write those pages, we'll include them in the same folder as our index.html page.

Create a paragraph or two about what this website intends to do for the user:

<p>If you've had to stay inside for 
a long period of time, either because of health concerns or 
civil unrest, you know that it can be stressful.</p>
<p>Quarantining to avoid the coronavirus, or having to stay 
inside due to a curfew, can lead to all sorts of unexpected health 
concerns including stress and anxiety.</p>
<p>This website can help. Click the links above to find 
out more.</p>

It's useful to be able to emphasize or highlight key terms or phrases in a document. Let's italicize the terms "health concerns" and "civil unrest":
```
...<em>health concerns</em> and <em>civil unrest</em>...
```
Let's also put the words "stress" and "anxiety" in bold face:
```
...<strong>stress</strong> and <strong>anxiety</strong>...
```
Finally, let's put a "footer" at the bottom of the page that includes a copyright symbol (because this is our work) and our name. We'll make our name a link so that when people click on it they will be able to email us.
```
<p>&copy;2022, <a href="mailto:rwhite@pfspasadena.org">Richard White</a></p>
```

This is a great start to our website! Click the "run" button in repl.it (if you haven't been doing it all along) to see what the page looks like. If you made a mistake here or there along the way, you'll have to go back and figure out what you did wrong. That's all part of the fun!

It's true that this is not the most exciting webpage you've ever seen, but it works (mostly).

4.4.3. Logical Divisions

If you look at this current webpage in the browser, it has well-organized content (even if it doesn't look very nice yet). In order to assist with the organizational structure of our page, we're going to add some "logical divisions," which we'll do with the <div> tag.

To logically identify the header part of our page, place a <header> tag before the <h1>Life during Lockdown</h1> statement, and a </header> to close it afterwards. That section of the page's code now looks like this:
```
<header>
    <h1>Life during Lockdown</h1>
</header>
```
In repl.it, click the green "run" button to load this new version of the page into the browser. Did the page's appearance change? It should look exactly the same! At this point, we haven't told the browser what to do with that logical division yet, so the page will look just as it did before.

Add a pair of nav (for "navigation") statements around the menu list. When you get done, it should look like this:

<nav>
    <ul>
        <li>Home</li>
        <li><a href="help.html">Help</a></li>
        <li><a href="about.html">About</a></li>
    </ul>    
</nav>

Add a pair of main statements around the main content of the page.

And finally, let's add a pair of footer statements around the footer section of the page. What does that look like now?

<footer>                       
    <p>&copy;2022, <a href="mailto:rwhite@pfspasadena.org">Richard White</a></p>
</footer>

Our page looks exactly like it did before, despite the fact that we've added some logical divisions.

Two important points on logical divisions

The header, nav, main, and footer divisions have been pre-defined by HTML5 as names for common divisions in a webpage. You can make your own div sections, however, and we'll see how you can do that on the next webpage.
What's the point of adding these logical division tags if the page looks just the same as it did before? We'll see when we get to the CSS part of our discussion.

This is the end of the coding we'll do for our first page. Let's take what we've done and use it to create a second page for the website.

4.4.4. The `Help` page

This is an important page for our website if we want to make sure our site is actually going to be useful to people.

In repl.it, click on the "new page" button and create a new page called help.html.
From the original index.html page select all the content on that page, copy it, and paste it into the new help.html page. We'll use that same page structure throughout our site, and just change the parts that are different for each page.
Modify the header for this page by changing it from "Life During Lockdown" to "Help is Available":
```
<h1>Help is Available</h1>
```

Modify the menu section so that it links to the Home page, but doesn't have a link to our current page.

<ul>
    <li><a href="index.html">Home</a></li>
    <li>Help</li>
    <li><a href="about.html">About</a></li>
</ul>

Change the content on this page. Delete the content from the first page, and instead put a paragraph that lets them know that being stressed or anxious at a time like this is perfectly normal.

<p>It's not unusual for people to feel stress
or anxiety when the world seems like it's gotten a 
little out of control. In fact, it would be strange 
if we <em>didn't</em> feel a little upset. 
Here's where you can get help.</p>

Let's put a list of resources that people can use to feel better about their lives. Also, let's put this in a special div that we'll call "highlight":

<div class="highlight">
    <ul>
        <li>Talk to your friends. They're there to support you.</li>
        <li>Reach out to family and neighbors.</li>
        <li>If you have serious depression, consult a health 
        care professional, or call the 
        <a href="https://suicidepreventionlifeline.org">National 
        Suicide Prevention Hotline</a> at 1-800-273-8255.</li>
        <li>If you have a medical emergency, dial 911.</li>
    </ul>
</div>

The footer of this page will be exactly the same as before. No changes are necessary.
Some pages benefit from having an image on them. Let's find an image that might help bring a sense of wellness and balance to people.

Hey, here's one that I took. Let's use it on our website.

In our project in repl.it, create a new folder called assets where we'll keep additional files that are used in our project.
Copy the image linked to above into your assets folder in repl.it. (There are a few ways to do this.)
In the main div of our webpage, include a reference to this source file along with some styling:
```
<img src="assets/sunken_city_rock2.jpg" style="width: 100%;" />
```
"Run" the page again to see what the Help page looks like in the browser. It may not be perfect, but it's good enough for now!

4.4.5. The `About` page

An "About" page usually has some sort of meta-information about the website, or the person or company that it represents. There may be biographical information there, or contact information...

Using the same strategies that we've developed so far, create your own "About" page for your website.

4.5. Backups, and Forks

If you do a lot of your computer work using Google Docs, you're probably not in the habit of saving your work, or backing up your work. Google Docs will save your changes for you as you edit a document, and the different Docs tools are pretty good about keeping your work stored "in the cloud" (ie. on Google's servers somewhere).

If you use other software on your computer, or if your work requires you to keep confidential documents, you won't be using Google Docs. You'll use documents that stay on your computer, and it's your responsibility to save those documents, and keep backups of those documents in case your computer crashes or gets lost or stolen.

This happens to people all the time!

4.5.1. Version Control

Another thing you have to do as a developer is keep track of different versions of your code. The first version of our website is done, and we're about to start working on adding some new features... but what if we mess something up? How can we quickly and easily get back to a working version of our code?

4.5.1.1. Archiving the Project

One thing you can do is to save an archived zip copy of your project. Open up the file menu so you can see the three vertical dots showing, click on those dots, then click on the "download as zip" option and a folder containing the current version of your project will be downloaded onto your computer. Store it in a safe place and you'll always have a copy of your project, at least as it was when you made the archive.

4.5.1.2. Forking a new version

Another thing you can do is "fork" a new version of your program. This leaves the current version as it is, but also creates a new version of the program with a different name so you can continue working on it without messing up the old version.

Watch this quick video to see how to do that.