HTML Basics

HTML Basics

Video

HTML

HTML is short for "HyperText Markup Language". Hypertext refers to the clickable, navigable links - and like $\LaTeX$, it is a markup language.

It follows a very similar structure:

Declaration

HTML documents historically declared themselves via an <html> "tag".

Tags are essentially $\LaTeX$ environments - in this case, almost everything in HTML has an open and closing tag (except special cases such as DOCTYPE declarations). an HTML document lives inside an <html>...</html> open and closing tag.

Closing tags have the same structure as opening tags, except with a / in front of the tag name. If you want to close a tag as soon as you open it, such as with a br tag for line breaks, you can put a slash at the end of the tag -   - which is a shorthand for  .

The header again contains important package/file loads and metadata for documents. It is contained in the environment:

<!DOCTYPE HTML>
<html>
  <head>

    # Header

  </head>

  # The rest of the document

</html>

For now, we will just add a bit of metadata to our example document:

<title>My First HTML Document</title>

This is the title - what is displayed in the tab - of the document.

Body

Everything you want rendered to students should appear in the next block, the <body> of the document.

<!DOCTYPE HTML>
<html>
  <head>
    <title>My First HTML Document</title>
  </head>
  <body>
    A Document Body
  </body>
</html>

This is now a valid - minimal - html document. You can save it and open in it in your web browser.

Document Formatting

HTML, at its core, tries to follow the same separation of content and style. However, unlike

, it doesn't make the same assumptions about content paragraphs - it needs to be more explicit.

So we are going to cover a few more tags. First, to define sections/subsections/in-page titles:

<h1>Largest Headline</h1>
<h2>Second Largest Headline</h2>
...
<h6>Sixth Largest Headline</h6>

and second, to make paragraphs:

<p>
A Paragraph.
</p>

There is also an html tag that does nothing to its content automatically called , if you want to style text without making a paragraph or header.

Document Styling

The style language for HTML documents is called CSS - "Cascading Style Sheets". It has its own format, involving Selectors and Values.

There are countless kinds of selectors, but the three most common are:

selector	example 1	example 2
Tag Name	`body`	`p`
Class	`#content`	`#quote`
ID	`.maincontent`	`.biography`

Tag name selectors allow you to set style values for tags such as  - or style the entire body with body. A common example might look like:

body {
    font-size: 21px;
    background-color: lightgray;
}

To set the (default) font size and background color for the entire document.

Styles are inherited. When there are conflicting styles for a given object, browsers are sometimes inconsistent in which takes precedence, but in general it is the lowest level or most specific selector. This is the titular "Cascading". Make sure to look at your webpage in all the common browsers to make sure it looks the way you want it to.

Classes and IDs are ways to specify, in the HTML, which content to style so you do not change all the content. An element can have only one ID , and as many classes as you like. Inversely, a class can have as many elements matching it as you like, but there can only be one element with a specific ID.

For example, we could have the following document:

Our First Webpage

Let's start with the blank template from before.

<!DOCTYPE HTML>
<html>
  <head>
    <title>Home</title>
  </head>
  <body>
    <h1> My Website! </h1>
  </body>
</html>

Let's start by adding an example body with some typical blocks and dummy text:

<!DOCTYPE HTML>
<html>
  <head>
    <title>Home</title>
  </head>
  <body>
    <h1> My Website! </h1>

    <div id="main">
      <p>Lorem ipsum dolor sit amet, consectetur <a href="#" class="internal">adipiscing elit</a>. Ut laoreet, nunc ut ornare aliquam, nibh lacus placerat neque, at gravida nunc turpis sit amet diam. Duis nibh nisi, laoreet nec ex eu, mollis sodales erat. Nulla ac vestibulum lectus, sed vehicula mauris. Aliquam erat volutpat. Nullam sagittis urna augue, in euismod risus faucibus et. Duis convallis mauris at diam egestas faucibus. Nullam dictum rhoncus metus sed fermentum. <a href="#" class="outgoing">Suspendisse semper venenatis</a> diam at viverra. In condimentum vulputate sapien.</p>

      <p>In bibendum, sem sed aliquam laoreet, augue libero dignissim ante, dapibus luctus purus risus nec nibh. Ut semper quam eu felis dapibus cursus. Morbi posuere maximus ullamcorper. Ut rutrum libero et dui blandit, id semper turpis mollis:</p>

      <blockquote>Aliquam fermentum ullamcorper bibendum. Pellentesque rutrum nisi in tempor volutpat. Nulla ut mattis erat. Mauris semper venenatis sem a pretium. Praesent auctor iaculis orci sed euismod. Morbi vitae massa luctus, molestie quam ut, mollis eros. Cras ligula lorem, varius a cursus at, posuere vel felis. Proin lacus diam, maximus et sollicitudin nec, eleifend quis lorem.</blockquote>

      <p>Nam suscipit congue tortor, at convallis dui consectetur vel. Nam eu enim tempor nibh tempus scelerisque ut at est. Morbi eget risus pellentesque, finibus diam in, venenatis libero. Cras tristique urna ultricies ligula tempus vehicula. <a href="#" class="internal">Lorem ipsum dolor</a> sit amet, consectetur adipiscing elit. Suspendisse congue fermentum massa ut dapibus. Aenean metus quam, sodales non enim eget, pretium interdum enim. Nunc ac elit non est blandit tincidunt vel a lacus. In dignissim nunc sit amet ante placerat, a sagittis neque varius.</p>
    </div>
    <div id="footer">
       <p>Science is what we understand well enough to explain to a computer. Art is everything else we do. - Donald Knuth</p>
    </div>
  </body>
</html>

Renders as:

Looking at this example file, we can see that we have all sorts of text and hypertext - internal page links and external links, paragraphs and a blockquote environment.

Let's style this a bit.

Final Form

<!DOCTYPE HTML>
<html>
  <head>
    <title>Home</title>

    <style>
      body {
        font-size: 21px;
        background-color: lightblue;
        color: #111111;
      }

      h1 {
        font-size: 51px;
        text-align: center;
      }

      blockquote {
        text-align: justify;
        border-left: 5px solid black;
        padding-left: 5px;
      }

      a {
        font-weight: bold;
      }

      #main {
        background-color: white;
        margin-left: 50px;
        margin-right: 50px;
        padding: 50px;
      }

      #footer {
        text-align: center;
      }

      .internal {
        color: red;
      }

      .outgoing {
        color: orange;
      }

    </style>
  </head>

  <body>
    <h1> My Website! </h1>

    <div id="main">
      <p>Lorem ipsum dolor sit amet, consectetur <a href="#" class="internal">adipiscing elit</a>. Ut laoreet, nunc ut ornare aliquam, nibh lacus placerat neque, at gravida nunc turpis sit amet diam. Duis nibh nisi, laoreet nec ex eu, mollis sodales erat. Nulla ac vestibulum lectus, sed vehicula mauris. Aliquam erat volutpat. Nullam sagittis urna augue, in euismod risus faucibus et. Duis convallis mauris at diam egestas faucibus. Nullam dictum rhoncus metus sed fermentum. <a href="#" class="outgoing">Suspendisse semper venenatis</a> diam at viverra. In condimentum vulputate sapien.</p>

      <p>In bibendum, sem sed aliquam laoreet, augue libero dignissim ante, dapibus luctus purus risus nec nibh. Ut semper quam eu felis dapibus cursus. Morbi posuere maximus ullamcorper. Ut rutrum libero et dui blandit, id semper turpis mollis:</p>

      <blockquote>Aliquam fermentum ullamcorper bibendum. Pellentesque rutrum nisi in tempor volutpat. Nulla ut mattis erat. Mauris semper venenatis sem a pretium. Praesent auctor iaculis orci sed euismod. Morbi vitae massa luctus, molestie quam ut, mollis eros. Cras ligula lorem, varius a cursus at, posuere vel felis. Proin lacus diam, maximus et sollicitudin nec, eleifend quis lorem.</blockquote>

      <p>Nam suscipit congue tortor, at convallis dui consectetur vel. Nam eu enim tempor nibh tempus scelerisque ut at est. Morbi eget risus pellentesque, finibus diam in, venenatis libero. Cras tristique urna ultricies ligula tempus vehicula. <a href="#" class="internal">Lorem ipsum dolor</a> sit amet, consectetur adipiscing elit. Suspendisse congue fermentum massa ut dapibus. Aenean metus quam, sodales non enim eget, pretium interdum enim. Nunc ac elit non est blandit tincidunt vel a lacus. In dignissim nunc sit amet ante placerat, a sagittis neque varius.</p>
    </div>

    <div id="footer">
       <p>Science is what we understand well enough to explain to a computer. Art is everything else we do. - Donald Knuth</p>
    </div>
  </body>
</html>

Renders as:

Modern HTML Usage

These days, virtually nobody writes a full HTML page for themselves. Professionals use software tools to construct pages for them - the one that this course is built using is called Pelican - but a common technique is copying features you like about other webpages.

Content Inspector

To look at a website's source code in Firefox or Chrome, open the "developer tools". On windows, the default keymap is F12 or Ctrl+Shift+I. On MacOS, it is Cmd+Opt+I.

A new panel should open with a lot of information. The main thing to notice is the first tab - "Inspector" on Firefox or "Elements" on Chrome - which contains the HTML document, as currently rendered on the page.

Open some parts and page through - you will see that it is a more complicated page than the one we put together!

To navigate it, we can use some tools.

In the top left of the panel is an icon of a mouse cursor on a box (the actual icon varies by browser/platform/version). Click it to open the inspector.

Hover over some items on the page, and you will see it shows you some information about the part you are hovering on - its source. You can also see what styles it has.

Everything in this tab is editable. This is an excellent place to play around with the formatting of specific elements, then copy+paste that format to your own source files!

Editing Your Source From Within The Browser

You may have noticed that both Firefox and Chrome have source/debugger tabs. These tabs let you edit your websites within the browser.

However, due to recent (and important) security features, this has become more complicated than simply opening a file and granting your browser directory access.

For this tutorial, I will describe the process in Chrome. The process in Firefox is similar.

Launch a local http server in the directory your html file is in. python -m http.server is perfectly adequate.
In the "Sources" tab, click the "+" under "Filesystem". Navigate to the directory, and add the directory to your sources.
Open the html source from the Filesystem tab, not the Page tab. Edits here will now be saved to the filesystem.
To edit CSS with the CSS editor, you must create an external CSS file, not simply a style tag. Inspect a page to see how CSS is linked, and link your own stylesheet.

Assignment

Today's assignment has two parts: creating and modifying websites.

Creating Websites

Create a simple, professional "About Me" html page. Make sure it has:

Your Name, as a h1
1-2 p paragraphs about you, that would introduce you to a student or faculty member looking at your website.
An image of you - I recommend your official department picture. To figure out how to link images, you can inspect an image on a website - such as the logo on the Purdue Department of Mathematics page - to see how img tags are used.
CSS styling of your content. Play around - we are going to replace this style with the department style on monday. For now, Make sure to:
- Set a larger font size, at least 21px
- Add margins so that no content is touching the left or right side of the page
- Give the document a background image or color of your choice, and the body a different color.

Validate your html using a tool such as The Official World Wide Web Consortium Validator.

If it passes, upload the .html file to Brightspace.

Modifying Websites

Using the developer console on your browser, go to a website that you visit regularly. (social media, news sites, or entertainment are suggestions). Take a screenshot of the page and save it as a png.

Then, use the console to edit some content in an amusing way - such as a joke headline on the New York Times - and take a second screenshot.

Upload both to Brightspace.

(This will be judged on successful editing, not on humor.)