Web 001: Basics of HTML

This will help you:

Write HTML (HyperText Markup Language) documents to display content (like a web page!)

HTML is the markup language used to create and display web pages. Yes, all of them. Google, Facebook, Twitter... you name a website: it uses HTML to show web pages. HTML isn't really a programming language - it can't do that much on its own, and it can't solve problems like programming languages can. It really just makes content look a certain way. Without the help of CSS, it doesn't even look very good. On the bright side, it's pretty easy to use - it's just a matter of surrounding pieces of content with to tell a browser how to display it.

Skipped that paragraph? Cool, we're gonna make you a personal website. It'll be pretty easy, and if you stick around for the CSS (or even JavaScript!) activities, it'll look awesome.

Time: 1 hour / Level: A1

You should already:

• Read this intro to HTML (I promise it's short!)

• If you've done the Python web scraping activity, this will probably seem easy peasy

  • Also you'll have a better idea of how web pages are usually structured.

Get the code and resources for this activity by clicking below. It will allow you to download the files from a Google Drive folder. Unzip the folder and save it in a sensible location.

Step 1: Learn About HTML/Tags

Tags are what makes HTML a thing. They look like this

<a href="google.com">This is Google!</a>
Would display as:
This is Google!

Almost all tags have to be opened <tagname> before the text and closed </tagname> after the text. Don't forget to close tags. Closing tags have a forward slash / before the tag name that matches the opening tag.

You can also nest tags. Here's a paragraph tag containing some text and a link:

<p>
  Hello world!
  This is a paragraph I wrote.

  <a href="example.com">Click this link!</a>
</p>

Which looks like:

Hello world! This is a paragraph I wrote.

Click this link!

All the text inside the <p></p> tag is the inner content or inner HTML. A tag may have no inner HTML. There is no space between the first < and the tag name, or between any attribute, =, and its value. In the <a></a> tag, which is a link tag, href is an attribute, and its value is example.com. In this case, href is the address the link points to. Attributes go between the <...> of the opening tag, right after the tag name. If there are several attributes, order doesn't matter.

Between the opening and closing tags (in the inner HTML), you can have any other tags which are applied to some or all of the enclosed content.

There are a bunch of tags, which can do things like create headings, create bullet points, create sections, and divide parts of your content into containers which can be arranged by CSS or other formatting. This is a great resource on HTML, CSS, JavaScript and more. It has an easy-to-navigate, quick-to-access reference on HTML tags and topics, as well as examples and even templates for nice and responsive website features.

Step 2: I Baked You Some Code

Right click on my_homepage (or my_projects, or my_resume) and open it in a text editor. Don't let it open in your browser!

For each tag you see, look up what it means. See if you can figure out how the page will be structured and how it will look.

Finally, open any of the pages in your browser. Is it like you expected? Try to match up different tags to different visible features and understand why things look how they do.

Some of the tags have a class attribute or an id attribute. The class attribute further describes what the tag is for, and will be used with CSS to give different formatting to tags with the same name (for example, we can make links which are supposed to be buttons look different from in-text links.)

The id attribute is an optional ID string which is completely unique to that tag. It can be used to uniquely identify an element for CSS formatting or JavaScript actions, or to link to a certain section of the page using # in the url.

Step 3: Make it Your Own

Modify the text and images in the pages to make them about you. You can add or remove pages if you want, and format them in different ways. This could be the beginning of making your very own portfolio or personal website.

It looks pretty bland right now, so if you want to learn how to make it pretty, continue with the activity on CSS.