Basic HTML

Every page on the internet is made up of HTML and CSS--Hypertext Markup Language and Cascading Style Sheets.

(You don't need to remember that).

Most modern websites, like our course blog, are made of HTML generated by a Content Management System (like wordpress) and you'll only rarely need to write HTML+CSS yourself. However, I am making you suffer through this assignment to familiarize you with the basic building blocks of a webpage. You will need to be able to read HTML to understand how to grab and interact with different parts of a webpage later in the semester.

In this assignment, we'll learn to write the basic skeleton of an HTML page and dress it up with CSS.

How HTML Tags work

Tags surround the content text and tell the browser how to display it. Tags are used to organize and style text and sections of the page.

Image by Miriam Posner

Italics <i>text</i>
Italicizes text

Bold <b>text</b>
Makes text bold

Paragraph <p>text</p>
Creates and ends a paragraph.  Used for formatting spacing.

Link <a href="http://www.google.com">text</a>
Creates a link.  Clicking "text" will take you to google.com when the page is displayed

Image <img src="http://www.flickr.com/myimage.png">
Adds an image stored at the specified link

Header <h1>text</h1>
Formats your text as a header, which usually means "text" will be larger and
have space around it.  You can also use h2 through h6 for smaller headers.

Div is a container that holds other stuff.
You can style a div or leave it invisible as an organizer.
<div>
    <p>text</p>
    <p>text</p>
</div>
Divs are used to contain multiple pieces of content and organize them together.

Useful tags

Glitch

For this assignment we're going to use the web editor Glitch. You can use your google account to log in or directly make an account.

Glitch

Glitch is an HTML editor the way that Word, Pages, or Google Docs are text editors. HTML, CSS, and other coding languages can be written in many programs/apps, not just Glitch.

We're using Glitch for class because it gives you a live preview of your work and we can easily share our projects with one another. In the future, you can use other programs that live only on your computer or use a different web editor.

Just remember that HTML is to Glitch what an essay is to Word--you can take the content and edit it in many other programs.

After making your account, scroll down a bit and make a Blank Website

(Ignore the Hello Website for now, it comes with a lot of extras we don't need at the moment)

This is your basic development environment. Glitch generates and hosts your webpage online for you so we can preview and share it with class. Find more help in the Glitch Getting Started Guide

The editing pane where you'll make changes

The list of files, like Finder or Explorer on your computer

The preview of your website. Anything visible here will be visible online when you're done

The randomly generated url of your project

Glitch is helpful because it generates a basic template file for us, but not all HTML editors will do this.

HTML documents are nested. <!DOCTYPE html><html></html> tells the browser to interpret everything within it as html.

<head></head> tells the browser about the page, like the title. Think of it as a book's cover.

<body></body> contains the book's content.

Edit your HTML file

<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="utf-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1" />
    <link rel="icon" href="https://glitch.com/favicon.ico" />

    <title>YOUR NAME</title>

    <!-- import the webpage's stylesheet -->
    <link rel="stylesheet" href="/style.css" />

    <!-- import the webpage's javascript file -->
    <script src="/script.js" defer></script>
  </head>
  <body>

  </body>
</html>

We're going to start editing our file--empty your body tag (make sure to leave both the opening and closing tag!) and edit the title to be your name (or another safe for work title

If you open your preview in a new tab, it doesn't look like anything yet. But it does have your name as a title!

Add some content

Add a header using <h1></h1> stating your name.

Use <div></div> to contain and organize your paragraphs.

(Notice that I am only showing you the content of the body tag--you should still have the head tag in your index.html file)

  <body>
    <h1>Your Name</h1>
    <div>
      <p>I am interested in cats and dubstep. I would like to run away and
join the circus when I grow up.</p>
      <p>I am very good at googling things and very bad at writing things.</p>
      <p>I would like to improve my skills in finding cat pictures.</p>
    </div>
  </body>

How does your preview look now?

Experiment

Try adding <b>bold</b> and <i>italic</i> tags around different sections. Remember to close the tags if Glitch doesn't do it for you! If all of your text is suddenly bold, you might not have closed a tag, or you might have a typo. You can nest <b><i></i></b> tags within each other too!

<!DOCTYPE html>
<html>
  <head>
    <title>Your Name</title>
  </head>
  <body>
    <h1>Your Name</h1>
    <div>
      <p>I am interested in <b>cats</b> and <i>dubstep</i>. I would like to run away and 
<b>join the circus</b> when I grow up.</p>
      <p>I am very good at googling things and very bad at <i>writing things</i>.</p>
      <p><b>I would like to improve my skills in finding <i>cat pictures</i>.</b></p>
    </div>
  </body>
</html>

How's it look?

If your changes don't show up in the browser, double check that you saved your HTML file!

In the Assets tab, upload an image for your project. Remember that this will be visible on the public web and choose something you're ok with sharing!

When it's uploaded, click it and click "Copy URL"

You can also rename it to give it a human-readable name.

Add an Image

Back in index.html, create another <div></div> and add an image tag. Paste in the url of the file you uploaded. The url inside <img src="URL"> tells the browser where to find the image. Make sure to type or paste your path exactly with the correct file type. If you type filename.jpg when it's actually filename.png, your image won't show up!

<!DOCTYPE html>
<html>
  <head>
    <title>Your Name</title>
  </head>
  <body>
    <h1>Your Name</h1>
    <div>
      <p>I am interested in <b>cats</b> and <i>dubstep</i>. I would like to run away and 
<b>join the circus</b> when I grow up.</p>
      <p>I am very good at googling things and very bad at <i>writing things</i>.</p>
      <p><b>I would like to improve my skills in finding <i>cat pictures</i>.</b></p>
    </div>
    <div>
      <img src="https://cdn.glitch.global/5f46f217-122a-4ead-953f-2ae6983136b5/fatty.jpg">
    </div>
  </body>
</html>

A note about Glitch: Glitch is helpful for us to learn with, because it does a couple of things automatically for us. One is responsively resize our images--meaning it makes sure that our image fits in the browser window even if it's too large. If you were working in another editor, you might need to resize your images yourself.

You can also resize your images here if you don't want it to take up the whole width of the window.

Sometimes you need to tell the browser how to display images. Tell the browser that the image should be 50% the width of the window, and the height should be proportional to the width.

(For the sake of space and clarity, I'm using a short filename here. You should keep using your long url)

<div>
    <img src="fatty.jpg" width=50% height=auto>
</div>

Better

You can also specify the exact height and width of elements using pixel measurements. Play around. What do the the below measurements do? (Hint: height=auto without quotes is useful for keeping an image proportional)

<div>
    <img src="fatty.jpg" width=600px height=800px>
</div>

Add a Link

Create another <div></div> and add a link tag (<a href="www.link.com">text<a/>). The url in quotes tells the browser where the link goes--make sure this includes https:// or www. as it appears in the address bar, or your link may not work!

  <body>
    <h1>Your Name</h1>
    <div>
      <p>I am interested in <b>cats</b> and <i>dubstep</i>. I would like to run away and <b>join the circus</b> when I grow up.</p>
      <p>I am very good at googling things and very bad at <i>writing things</i>.</p>
      <p><b>I would like to improve my skills in finding <i>cat pictures</i>.</b></p>
    </div>
    <div>
      <img src="fatty.jpg" width=500px height=auto>
    </div>
    <div>
      <p><a href="https://twitter.com/MaeveKane">My Twitter</a></p>
    </div>
  </body>

Looks good!

What's next?

Right now our page looks pretty plain. There's no style, no way to change how things look. Continue to the next lesson on Cascading Style Sheets to jazz up your page.

Did you get stuck somewhere? Ask in the Slack channel for help.

Want to see how your HTML file should look before moving on? Check out the next slide.

<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="utf-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1" />
    <link rel="icon" href="https://glitch.com/favicon.ico" />

    <title>YOUR NAME</title>

    <!-- import the webpage's stylesheet -->
    <link rel="stylesheet" href="/style.css" />

    <!-- import the webpage's javascript file -->
    <script src="/script.js" defer></script>
  </head>
  <body>
    <h1>Your Name</h1>
    <div>
      <p>
        I am interested in <b>cats</b> and <i>dubstep</i>. I would like to run
        away and <b>join the circus</b> when I grow up.
      </p>
      <p>
        I am very good at googling things and very bad at <i>writing things</i>.
      </p>
      <p>
        <b>I would like to improve my skills in finding <i>cat pictures</i>.</b>
      </p>
    </div>
    <div>
      <img src="https://cdn.glitch.global/5f46f217-122a-4ead-953f-2ae6983136b5/fatty.jpg?v=1670352135823" width="500px" height="auto" />
    </div>
    <div>
      <p><a href="https://twitter.com/MaeveKane">My Twitter</a></p>
    </div>
  </body>
</html>