KIEI-451: Introduction to Software Development

HTML Introduction


<h1>Hi, this is my website.</h1>

This is the most basic example of an HTML element. There is a opening tag (<h1>), some content in the middle, and a matching closing tag (</h1>). Almost all HTML elements are written this way.

Although not technically correct, the terms tag and element are often used interchangeably. Sometimes, you’ll see this whole thing referred to as an “H1 tag”. Try not to get caught up in the semantics.


<h1>Hi, this is my website.</h1>
<p>Something really interesting about myself.</p>

Here, we have an H1 element and a P element. H1 stands for “heading level 1” and P stands for “paragraph”. A lot of the time, the tag abbreviations make total sense, although sometimes they don’t at all.


<p>My favorite things to eat, <em>by a wide margin</em>, are tacos.</p>
<p>In my spare time, I sometimes play golf and... <strong>eat tacos</strong>.</p>

Elements are either “block” or “inline”. Block-level elements begin a new line and stack on top of each other. Inline elements do not. Here, each P element will begin on its own line, whereas the strong and em elements will not.

BTW, strong = bold and em = italicized. Who knew?


<ul>
  <li>Tacos</li>
  <li>Bacon</li>
  <li>Pizza</li>
  <li>Fried Chicken</li>
</ul>

Elements may be nested. Here, we have a bulleted list. The UL (unordered list) element represents the entire list, and each LI (list item) element represents each item in the list.

<a href="http://google.com/">You can find anything on the Internet</a>

Some tags have attributes. Attributes are data that goes along with the tag. For example, here we’re using the A element to build a link. It wouldn’t make much sense to have an A tag without some information on where the link should lead when clicked, so we need the href attribute in order to do that.

<img src="carnitas.jpg">

Remember the part where almost all elements have an opening and closing? Here’s one of the rare examples of an element that doesn’t have a closing. These are known as “self-closing elements”. This is how you put an image on the page. The src attribute tells us everything we need to know about this tag, so we don’t need any inner content or a closing. Some other common self-closing elements are <br>, <hr>, and <meta>.

And yes, we can nest the IMG element within the A element to create a clickable image.

<a href="http://google.com/"><img src="cat.jpg"></a>

Web Pages

Now that we've been introduced to some basic HTML, it's time to examine the anatomy of a complete web page. Now, don't let the fancy terminology trip you up – a "web page" is simply a text file that lives on a hard drive somewhere. The only real requirements for turning a plain mild-mannered text file into a web page are:


<!doctype html>
<html>
<head>
  <title>This web page is pretty boring.</title>
</head>
<body>
  <h1>Zzzzzz</h1>
</body>
</html>

Yeah, pretty much the most boring valid HTML web page ever, right? But it's valid HTML that will be read and interpreted by any web browser, anywhere.

Web Page 👉 Web Site

A web site is a collection of one or more web pages. No, really, that's about it.

Alright, for the sake of discussing it some more, consider this group of files, sitting on a computer somewhere: 


index.html
products.html
about-us.html
contact.html

If this computer were accessible from the Internet somehow, you could slap a domain name on it (more about that later), and it'd be just like many of the publicly available web sites you might visit today. There are a couple more basic rules at work here: