Class 3: Basic HTML
Tasks to complete for this class
- Go through the content that is listed below and then complete the Class 3 Reflection assignment. As you are reading the content below, you'll see some videos. Any activities or assignments mentioned in the video lecture may not be graded, but is meant for practice (for those of you who are watching me at 2x 🕵️) Once you finish reading through the contents, you can do the short reflection assignment.
- Finish HTML Tutorial (opens in a new tab). You should try all the examples, finish all the exercises, take HTML Quiz (opens in a new tab), and submit a screenshot that shows you have finished the quiz and how much time it took.
- (Optional) Did something not make sense?
Feel uneasy about something?
You can either ask me or you can watch parts from the
HTML Essential Training video (opens in a new tab)
(check Pacific Lynda (opens in a new tab)
if you would like to have full access to all the materials in Lynda (opens in a new tab))
(This linkedin video set is much more polished than what I do, and has covered more, I will be covering some of the same parts in the future)
HTML Walkthrough
Here we're going to:
- Introduce HTML
- Learn how to work with web pages and our live server side-by-side
- Understand more HTML Tags
- Familiarize yourself with an HTML element and its attributes
- Develop an appreciation for why we have HTML Standards
- Learn how to work with:
Setup
Before you start reading through this portion, make sure that you have completed Lab 0. I would also start up VSCode and the Live Server so that they are side-by-side. This can be accomplished by first having VS Code active and holding down the Windows Key and then pressing the left arrow key. If you do this correctly, you'll be given the option of clicking on another application to have on the right side. This can be the web browser where you have these instructions or the live server. For those of you on a mac, you can do something similar by holding the green full screen button.
Intro
A web page is typically made with a combination of:
- HTML, which is the content of a web page
- CSS, which is content about how it should look, and
- Javascript, which is how the web page should behave.
Today we will look at just the HTML for this page.
HTML is typically stored as text in a file, with the extension .html.
When a domain like www.pacific.edu (opens in a new tab) is placed into a web browser,
the browser will look and try to process the index.html file by default.
Essentially this means that you typing in a regular web address with no path, will fetch www.pacific.edu/index.html
.
The HTML file itself when you open it up looks like text. Here's our previous HTML file that we had from lab 0
<html>
<body>
Hello COMP 127!
</body>
</html>
This is what this page looks like in the browser
Notice how there are these special characters (<
and >
).
When text is placed between these two markers, like this <body>
, this is often referred to as a tag.
Tags allow developers to specify specific properties and sections of an HTML file.
Many of the HTML tags need a closing tag.
The closing tag looks similar to the opening tag, except that it has an additional slash \
at the beginning.
For example, the closing tag for <body>
is two lines below: <\body>
.
This means that any content in between the opening and closing body
tags would then be given those properties.
In our case, the text between the
body
tags would be considered the content to be displayed on the actual web page.
These properties and sections allow a web browser to show HTML content properly, though if you do not have these, most browsers do their best to guess what it is that you want.
In our case, the code that we have provided is not completely valid (which is why you see the yellow line in the image). We'll fix this in a later step. Notice how the tags are interspersed with text, some of which shows up directly on the web page. HTML has declared a variety of these tags to specify particular rules, which we'll cover later.
For now, let's do some HTML that follows the W3C standards. Change what you have below to this.
<!DOCTYPE html>
<html lang="en">
<head>
<title>
My First COMP 127 Webpage
</title>
</head>
<body>
Hello COMP 127!
</body>
</html>
Let's do a quick explanation:
DOCTYPE
provides a document type which helps browsers understand the type of document it is retrieving, it's a newer standard that's been introduced (opens in a new tab)lang="en"
is an attribute (notice how it's inside thehtml
tag) that specifies the language the html content is written in.<head>
is the header section of an html page. It stores information that is important to the webpage but is typically not displayed on the page itself. Such an example of this is the<title>
which provides a title for the webpage that often shows up in a browser window or tab or as a description for the page when you have multiple tabs open
Notice that when you type this in, the page itself does not really change except for the title (highlighted below).
Adding in more HTML tags
Let's add an h1
tag into our HTML code
<!DOCTYPE html>
<html lang="en">
<head>
<title>
My First COMP 127 Webpage
</title>
</head>
<body>
<h1>Welcome to 127!</h1>
<p>
Hello COMP 127!
</p>
</body>
</html>
Adding this in should give you a header that looks like this:
There are many tags that you have and using live server should allow you to get that instant feedback so that you can figure out what is happening. I encourage you to make sure that it is going side by side.
Let's try one more example. Suppose you wanted to separate your hello greeting and to say something about how 127 is cool. If you try to separate the text so that you have
Hello!
Comp 127 is cool!
Editing this in the HTML, you'll notice that live server does nothing different.
The line returns are not being displayed in webpage!
How can we have two separate blocks of text?
One way is to use the p
tag, and enclose at least one (or both of the sentence within a p
tag block,
this highlighted block is often referred to as an HTML element:
<p>
Hello!
</p>
COMP 127 is cool!
Doing that would help the browser understand that Hello!
needs to be in its own paragraph,
which we then close when that paragraph is finished.
Warning: Avoid using HTML tags to layout your data. HTML is largely meant for content, and not necessarily for changing the appearance of the page. It is ok to specify that something is a heading, we just do not want to focus too much at this stage on how that heading should look. We will use CSS for this, which will be discussed in an upcoming class. Another example of this is overusing the
<br />
tag to make your content look a certain way.
<br />
creates a specific line break that serves as a return statement for your content and is another way that I've heard folks discuss putting content on separate lines. Use it sparingly as there are proponents out there that argue thatbr
not be used except for poetry and mailing addresses (opens in a new tab)
Basic HTML tags
Here is a 15 minute lecture (opens in a new tab) that discusses a variety of HTML tags including:
<br/>
<a>
<img />
<!-- -->
<p>
<em>
<strong>
The video will walk you through adding each one and seeing how your contents change in the live server with vs code open, so it's important to follow along and try them yourselves!
In addition to learning the variety of different tags, it's important to understand the difference between block and inline elements.
Name | Description | Popular Examples |
---|---|---|
Block elements | HTML elements meant to take up the entire width of the screen/larger areas | <p> , <div> , <ul> , <li> , <h1>-<h6> |
Inline elements | allow you to specify some type of specific property to a certain portion of a block element | <br> , <a> , <span> , <strong> , <em> , <img> |
Also note that block elements cannot be nested inside of inline or other many types of block elements. This means you cannot do something like this:
<a href="www.google.com">
<h1>Search here!</h1> <!-- This h1 tag is not allowed here! -->
</a>
Because the block element (<h1>
) would be inside of the inline element (<a>
).
All other nesting combinations are fine.
A sneakier example of this would be if you were to try to next paragraph elements:
<p>
<p> <!-- we cannot have another block without closing the above p tag first! -->
this is not allowed
</p>
</p>
Please watch this short video from W3Schools (opens in a new tab) for a discussion of block vs inline elements.
For a deeper dive into this topic, you can read the accompanying W3C guide (opens in a new tab) on the different styles.
Anatomy of an HTML Element
An HTML Element consists of:
- at least one tag (but often an opening and closing tag, also referred to as a start and end tag)
- optional attributes that form part of the tag (and are placed inside the angle brackets
< >
) - optional content that is placed in between the opening and closing tag.
Let's discuss further how an HTML element can also have a variety of attributes.
Attributes are additional properties that are included as part of the HTML tag themselves.
Let's consider this fictitious HTML element called tag
:
<tag property1="value" property2="another value">
content that has this tag
</tag>
Notice how we have two attributes that are included inside the tag itself.
The properties come before the closing angle bracket >
.
Each HTML tag has different attributes that can be specified via different names,
such as the href
attribute shown in the HTML block above.
Each attribute/property name should be unique.
The values assigned to the properties are always enclosed in quotation marks.
HTML Standards
Watch this video (opens in a new tab) to understand why following standards are important for HTML pages. The W3C Consortium provides a validator (opens in a new tab) that is previewed discussed in the video above. There are also other tools that we may use install in the future to make sure that we are following web standards.
HTML Images and W3C Schools
The img
tag is an inline element that allows you to use either relative or absolute directories.
The syntax for the img tag is as follows.
<img src="path/to/filename.png" alt="explanation of image in text"/>
For accessibility, make sure to add the alt
attribute to describe in text what the image is describing.
Here is another video (opens in a new tab) that explains how to embed images into an HTML document.
and also shows how to install a
W3C Validator extension (opens in a new tab)
into VS Code.
Using this extension will allow you to check for validation errors more rapidly.
The video also shows how it can help you with some more insidious errors,
like embedding block elements into inline elements for example.
HTML Special Characters
Since HTML tries to interpret all text, how would you be able to show a <
sign on your webpage?
Because that is part of a tag, HTML cannot simply understand when it starts a tag and when not.
Modern browsers are much better at this, as will show in the video below, but it is still not valid.
To help with this, HTML has devised special codes for certain characters. Here are some of those characters. There are many many symbols you can write this way. The standard format for all characters is that they can also be represented by their UTF8 decimal character code (opens in a new tab).
Symbol | HTML Code | UTF8 Code |
---|---|---|
< | < | < |
> | > | > |
& | & | & |
" | "e; | " |
á | á | ´ |
ñ | ñ | Ñ |
¿ | ¿ | ¿ |
Here's a good reference for some of the additional characters (opens in a new tab), though there are many many more (opens in a new tab) including some weird symbols (opens in a new tab) and lots of arrows (opens in a new tab), since all of it is just the different characters from UTF8 that you can represent.
Here is a small video demonstrating how to insert special characters (opens in a new tab)
HTML Pre formatted Text, and Meta Information
The previous video explains how to insert code blocks and preformatted code (opens in a new tab).
The link above jumps to that section of the video to show you how to use the pre
and code
HTML tags.
Header Information
You can also jump to this portion of that same video (opens in a new tab)
to understand more about the meta
tag, which is placed in the header component of an HTML page.
The meta
tag contains information about the web page's metadata,
which may be useful for search engines and other robots.
Lastly, the video also explains the link
tag,
which allows you to add a web page thumbnail images for when you have a lot of tabs open.
Here's a quick example of what you would put in the header section of your webpage:
<link href="your_thumbnail_filename_here.jpg" type="image/jpeg" rel="icon">
Additional HTML Tags
The next video demos a variety of HTML structures (opens in a new tab) including:
Type | Associated HTML Tags |
---|---|
Unordered and ordered lists | <ul> , <ol> , <li> |
Tables | <table> , <caption , <th> , <td> , <tr> |
Quotes | <q> |
Block quotes | <blockquote> |
Definition lists | <dl> , <dt> , <dd> |