Emily Kauffman

Back to teaching

CIS 275 Lecture 2: The World Wide Web

This class

  1. Intro to HTML5
  2. History of the web
  3. Next week

Intro

Today we're going to talk about HTML5, specifically, what what it is and why we aren't talking about HTML1 instead. HTML stands for hypertext markup language. Markup languages are actually very common. They're not the same as programming language, instead they're special languages that are used to annotate, or markup documents.

We're going to do an in depth discussion of HTML next week, but for now, in HTML, tags tell the browser where you want to put headings, paragraphs, images, links, etc.

HTML files have a .html file extension. You've all seen file extensions before, they tell your computer which application to use your open a file. For example, your computer opens .doc files in Microsoft Word, and .ppt in PowerPoint. The .html extension tells your computer to open the file using a web browser, such as Chrome, Safari, or Firefox.

Your browser can read this file and it knows how to display it on the screen. It also allows screen readers and other assisted devices to utilize the tags and present the information in ways that the user can understand.

HTML is very similar to English; you can read it out and understand it even if you don't know a lot about it.

<!doctype html>
<html>
  <h1>I am a level one heading!</h1>
  <p>I am a paragraph.</p>
  <img src="cat.jpg" alt="a cat sitting on a couch"/>
  <a href="contact.html">Click me</a>
</html>

Look closely at this example. The doctype is used to say "this is an HTML file". The html tag says "everything between these tags is HTML code". The h1 denotes a level one heading. Think of a word document, how you can set different headings. This is similar. Next is a paragraph tag. We have an image tag. You can see that it has two attributes, src and alt. The src simply says which image to display in the browser, and the alt tag is used by screen readers. If you are blind and viewing the web page, you won't be able to see the image, but the screen reader will read the alt text when it gets to that place on the page. Finally, we have what's called an anchor tag, or a hyperlink. When you click it, it redirects to the location specified in the href attribute. In this case, if I clicked the link, I'd be taken to the contact page.

In the beginning, learning HTML is mostly memorizing these tags, which is called learning the syntax. It involves learning how to write tags with the brackets and slashes, the attributes for the tags, etc. You'll spend a lot of time wondering "did I write this correctly", is this the right type of bracket or slash. This is short-lived. Once you're comfortable with the syntax, your main concerns will be with the meaning of the tags. For example, should I use a paragraph tag or a heading tag here for this text? This is called learning the semantics.

History of the Web (1)

So how did we get to HTML5? What happened to HTML1? What even is the web? We're going to answer these questions and more. The web is a culmination of a series of innovations over a long period of time, where each subsequent invention built on what came before it. Eventually, it leads up to where we are today.

History of the Web Slides


Next Class

  • Read: Duckett, Introduction & Chps. 1-3

Resources

  1. Fee, Sam. Timeline Update. Computing & Information Studies, Washington & Jefferson College.