The HyperText Markup Language¶

Quick Overview of Day

Experiment with HTML (HyperText Markup Language).

CS20-CS1 Explore the underlying technology of computing devices and the Internet, and their impacts on society.

Introduction to HTML¶

As we noted in the previous chapter, HTML is the language of the web for expressing content. But before we dive into the specifics of HTML, lets look at what we mean by a markup language in general. A markup language is a language that annotates text so that the computer can manipulate it for some purpose. Most markup languages are readable by humans and are designed to be written with a plain text editor as rather than a fancy word processor like Microsoft Word.

As we learn HTML its important to keep in mind that the job of HTML is to structure the document and provide content. Making the webpage look good is the job of a different technology called Cascading Style Sheets (CSS).

HTML uses a set of tags to annotate (mark up) the document. The tags all look like this: < tagname > and they are balanced so that at the end of the content for that tag there is </ tagname >. Notice that the closing tag contains a slash at the beginning to differentiate itself from an opening tag.

An HTML document then just contains a series of these balanced tags.

Note

When experimenting with HTML, you can simply use a web based environment (like the one you are in right now), but it can be very instructive to experiment with how to do this with files on your computer as well. For any of the examples given below, you can simply create a text file on your computer, type some HTML, then make sure you save the file as something.html. The .html extension is very important, as it allows your computer to identify what type of content is contained within the file. After the file is saved, open it using your web browser of choice (Chrome, Edge, Firefox, etc.).

When creating the text file on your computer, be sure to use a plain text editor (something like Notepad, not Word!). I recommend using Atom, as it works the same for Windows/Mac/Linux, is free, and doesn’t require admin rights to install in a lab setting.

My First Heading¶

A simple paragraph of text.

Another paragraph of text.

The HTML for this document is as follows:

If you click the render button you will see the HTML in the example above in a special output window that mimics your browser. Try changing the text of one of the paragraphs and click run again. Try changing the h1 tag to h2 Don’t forget to change both the opening and closing tags. I have indented the HTML for you so you can see the opening and closing tags more clearly. A web browser does not care about indentation one bit; you can get rid of all of the indentation, or put everything on one line and the page will still look the same.

Before we move on to talk more about specific HTML tags its useful to think about the page that is produced and the structure of the page. You get a sense of the structure from the indentation I have provided, but its useful to look at this from another perspective. Figure 2 illustrates a “tree view” of an HTML page.

This tree is upside down with how we usually think of a tree, but in computer science we put the “root” of the tree at the top. So the root of this tree is the html tag. The html tag has two children, the head and the body. The head has one child, which is the head tag. The html tag is the parent of the head tag. The body has three children, the h1 tag and two p tags. You may also find it helpful to think of this as an outline, although you would have to rotate the picture 90 degrees counter clockwise to get the orientation into outline form. We will see how this tree structure of an html page is useful later on if/when we start to use CSS and Javascript.

Basic HTML Tags¶

Headings¶

Like any document HTML documents may have several layers of headings. In fact you can have heading levels from 1 to 6 in an HTML document.

Now modify the example above to add the next three levels of headings. What do you notice? What happens if you add a level 7 heading? What happens if you close an h2 tag with an h1 or an h3?

As you might expect, the headings continue to get smaller as you go from 1 to 6. But when you go to level 7 the text gets bigger. This is because the web browser is written so that it just ignores any tags that it does not know about. This is somewhat of a disadvantage as you don’t get any error messages, things just look wrong, and you have to figure out why.

Another aspect of the heading tag is that it is what we call a block tag. Notice that each heading appears on its own line. Thats pretty much what we would expect for a heading. But not necessarily for other tags. shortly, we will see some inline tags that do not each appear on their own line.

Paragraphs¶

Paragraphs are another funamental element of documents. Paragraphs are also another example of a block element in that each paragraph gets its own space and is separated from other html elements by blank lines in the document.

What happens when you put a paragraph inside another paragraph? What about a header inside a paragraph?

Images¶

Images are another common element of a document or a web page. To include an image in a document you must use an img tag. Image tags are an example of an inline element because they just flow in with the surrounding text. They do not force a new block to be created in the rendering of the html.

The image tag has a new component to it called an attribute. In general tags can have many attributes in the case of an image we can inlude it by using a src attribute that contains the URL to the image we want to embed. We can embed any image on the internet in our own document by referring to it by its URL in the src attribute.

Note

If you are working on creating a basic webpage on your local computer, you can easily link to other files, images, etc. by saving them all in the same folder. If your skflag.png image is saved in the same folder as your index.html file, you can just use something like <img src="skflag.png">.

Try modifying the example above so that shows a different image. You will want to use a search engine to find the URL of an image file, then copy/paste it into the example above.

You can also change the height and width of an image by using a height= attribute or a width= attribute. Try changing the size of the image in the example above. Notice what it does to the flow. Try changing just one of height or width and then try changing both at the same time. You can stretch your image in all kinds of crazy ways.

There are several other attributes of the image tag as well. You can read about them here.

Links¶

The last basic tag to cover in this section is the link tag a. In fact the last sentence of the previous section used a link to send you to the w3schools website to learn more about the attributes of an img tag. Links are what made the web so popular in the first place. Today we call them links, but in earlier years they were usually referred to as Hyperlinks. You can provide a link to any URL on the web using the href attribute on the a tag. The text that you will click on goes between the opening a tag and the closing a tag.

Try clicking on the link in the example above. What happens? How do you get back? Don’t worry, you can always just reload this page.

Note

Due to a rendering error within ActiveCode, <a> tags will look like regular links, but will not function properly. To see the result of an <a> tag in action, I recommend doing these demonstrations using a text editor (such as Atom), and viewing the page in your browser.

Links can also be used to navigate within the same page. to do this you use one a tag to create an anchor point on the page using the name attribute like this: <a name="target">I am a target</a> You can create a link that will jump to the target anywhere else on the page using <a href="#target">Go to Target</a>

Simple Text Formatting¶

Making text bold or italic and other formatting is easy in HTML as well. The following example illustrates the basic text formatting tags.

You can mix and match these styles in all kinds of ways. Try making a superscript inside a superscript. Try making the subscript bold or italic.

Check your Understanding

Click on the beginning tag for all block elements in the example.Block elements start on a new line and take up the full width available.

<html>
<body>

<h1>Welcome to my Page</h1>
<p>Hello World!   This is <b>me</b> <img src="me.jpg"> </p>
<p>This is my second paragraph
<a href="home.html">Click here for my homepage</a>
</p>
</body>
</html>

Click on the beginning tag for all inline elements in the example.Inline elements do not start on a new line and only take as much width as needed.

 <html>
 <body>
 <h1>Welcome to my Page</h1>
 <p>Hello World!  This is <b>me</b> <img src="me.jpg"> </p>

 <p>This is my second paragraph
 <a href="home.html">Click here for my homepage</a>
 </p>
 </body>
 </html>

Advanced HTML Tags¶

Unordered Lists¶

Ordered Lists¶

The ol tag can also have a type attribute, so it could look something like <ol type="1">. The type attribute can be one of the following values:

1 This will cause the list to be numbered with numbers
A This will cause the list to be ordered with upper case letters
a This will cause the list to be ordered with lower case letters
I This will cause the list to be ordered with upper case roman numerals
i This will cause the list to be ordered with lower case roman numerals

Try it yourself.

Nesting Lists¶

Lists can be inside of other lists. This is true for most HTML tags.

Tables¶

Tables are used when we need to show information in a traditional grid format. Here is a complete example that illustrates the use of the following table specific tags

table – This is the main tag for a table
tr – every row in a table starts with a tr tag
td – every column in a row is delineated by a td tag
th – You can use the th tag in place of the td tag in the first row to make headings

There are many attributes you can use with the various table tags.

table * begins the table element
td * colspan – if you have a particular table where you need an extra wide column in some rows you can make a cell of your table span more than one column using the colspan attribute. Its value is the number of columns.
tr * rowspan – If you have a particular table where you need an column to span multiple rows you can make a cell of your table span more than one row using the rowspan attribute. Its value is the number of rows.

Experiment with a table. What kinds of tags can you include inside each td? Can you make a table inside another table?

Audio¶

Embedding audio in your webpage allows you to link to various files containing music or speech. The audio tag looks like the following:

The controls attribute provides start/stop/fast-forward/rewind buttons for the listener. The source tags inside the audio tag allow you to provide several different audio formats. This is because different browsers support different kinds of audio The browser will go through the list, in order, until it finds a format it understands, or else, it will replace the controller with the message at the end.

Video¶

Embedding video in your webpage allows you to link to various files containing movies.

The controls attribute provides start/stop/fast-forward/rewind buttons for the listener. The source tags inside the video tag allow you to provide several different video formats. This is because different browsers support different kinds of video The browser will go through the list, in order, until it finds a format it understands, or else, it will replace the controller with the message at the end.

IFrames¶

IFrames allow you to embed a webpage within another webpage. The activecode examples in this book use an iframe to allow you to experiment with the html, by creating a page within a page. If you wanted to embed a YouTube video onto a webpage, you would copy/paste the iframe element from YouTube into your HTML.

Note

Although you can certainly do the following practice problems here in the textbook, you might find it useful to make an HTML page in an text editor (such as Atom), then solve each of the following problems inside of that file.

Practice Problems¶

Make a little webpage to tell me a little about yourself. Use at least three levels of headings and some paragraphs.

You can copy the URL of almost any image in a browser by right clicking on the image and choosing “copy image URL” or something similar. Write an html page in the activecode window for this exercise that includes a header element giving a title to some image you find, then include the image in the page, sized appropriately, and a paragraph that describes the image.

Make an outline that has capital roman numerals at the highest level of the outline. and lower case roman numerals for the second level items. List three new concepts we have covered in this class at the first level, and for each of those list two or three key points.

Make a webpage that links to four of your favorite websites.

Make a webpage with a link at the bottom that when clicked will jump you all the way to the top of the page.

Make a webpage with a link at the top of it that when clicked will jump all the way to the bottom of the page. At the bottom of the page there should be a link to jump back to the top of the page.

Make a webpage with five different images. Each image should have a title.

Make a webpage with an image that when clicked will link to a search engine of your choice

Next Section - Cascading Style Sheets (CSS)