The HyperText Markup Language¶
Quick Overview of Day
Experiment with HTML (HyperText Markup Language).
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.
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 VS Code, 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.
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
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