LuxSci

Introduction to Internet Programming with Perl and HTML: Part 1 – Introduction to HTML

Published: December 31st, 2009

Background

The “Introduction to Internet Programming with Perl and HTML” is classic a 12-part lecture series that Erik Kangas has given many times in the past to advanced high school and college students who are just starting to learn about programming web sites. This course works its way through the basic aspects of HTML and Perl gives new programmers and designers a solid foundation. This lecture series has been resurrected for the LuxSci FYI blog due to popular demand for its content.

Once you have completed this course, you will be ready to learn about JavaScript, Cascading Style Sheets, intermediate Perl, databases, and more.

Original Introduction

By the time you are done with this course, if you have done or understood all the exercises and homework, you should know enough HTML and programming in Perl to write basic interactive web sites! The various lessons in this course build up to a “final project” — a web site designed, for example, to allow users to vote or take polls online.

We will teach you basic HTML commands and aesthetic techniques, basic programming concepts, and enough Perl to write basic, but effective scripts. We will not cover concepts such as: Cascading Style Sheets, Dynamic HTML, JavaScript, Graphic Design, FLASH, Perl references, Perl regular expressions, and other more advanced Perl concepts.

Part 1: Introduction to HTML

1.1 What is HTML?

HTML stands for “Hyper-Text Markup Language”. The “Hyper-Text” part refers to the fact that you can make “links” from one web page to another (i.e. those underlined words you can click on, or those images you can click on to take you to a different web page — those are “links”). This is a link to the front page of Lux Scientiae.

The “Markup” part refers to the fact that a web page doesn’t have to be plain old text like that which comes off a typewriter, but can contain different fonts, font sizes, colors, and other formatting to make the content more interesting or readable. “Markup” also implies that in order to make use of such styles, you have to manually specify them within your web page using special commands. This is like LaTeX, but unlike Microsoft Word or WordPerfect which hide the style commands from you (you never need to know that they are there or what they are) and just display your text as bold, for example.

To get a feel for what using HTML implies, lets consider an example: to make the text “John Smith” bold using HTML, we would have to type “<b>John Smith</b>” which would display “John Smith“. You will notice the added “<b>” and “</b>“. These are known as markup tags or just tags. The “<b>” marks the beginning of a section of bold text. The “</b>” indicates the end of the bold text.

The basic rules of HTML markup tags are

  • All tags are names enclosed in angle brackets, “< ... >“.
  • Almost all tags come in pairs of start and end tags.
  • The end tag is differentiated from the start tag by the leading forward slash (“/“) before the name of the tag (i.e “b“).
  • The names of tags are case insensitive. This means that, for example, “<b>John Smith</b>“, “<b>John Smith</B>“, and “<B>John Smith</B>” are all equivalent.

That’s it — HTML is just plain text with lots of tags that specify how the text should look. In the following sections, we will introduce you to many of the basic tags you can use, and describe how you can construct your first full web page!

1.2 The Anatomy of a Web Page

A “web page” is a text file containing text marked up with HTML. You should use a text editor to create and edit such files, such as: Notepad or Textpad (my favorite) if you are using Windows, or vi, or emacs if you are using UNIX of Linux. If you use a word processor, like Microsoft Word, be sure to use the “Save As…” feature to save the file as a “text file”, otherwise it may contain a lot of unwanted hidden stuff. We do not recommend the “Save as HTML” option in many word processors, as the resulting HTML is often not compatible with all browsers, is overly complex, and doesn’t look quite as you intended. Text files containing HTML should be saved with names ending in the “.html” extension (many Microsoft products save them as “.htm” which is a throw-back to the old days when file name extensions could only be 3 letters long).

In order for your web pages to be visible to people on the Internet, it must be installed into a “web server” — a machine with a connection to the Internet running special “web server software”. You typically obtain the services of a web hosting company such as LuxSci to provide you with such a server. They will tell you how to install your files on their servers.

You do NOT have to install your HTML files on a web server to preview them yourself. You can just save them to your local computer, then (in Windows) double click on them to display them in your default web browser, or open your favorite web browser and choose “File:Open” from the menu and then browse to and choose the file you wish to see. We recommend this method for previewing your work and making corrections before even thinking of installing it on your web server (where anyone on the Internet may be able to see it!) Writing HTML is an iterative process of writing text, adding HTML tags, previewing, and making corrections. However, if you have 2 windows open — one where you are editing your text file and one where you are previewing it — this integrative process can be very fast and efficient.

So far, we have defined HTML as being some plain text with tags added (of which we have only taught you the boldface tag). While this gives you “HTML marked-up text”, it is not a complete “web page”. To write a complete web page, you need to put your HTML marked-up text inside a simple framework…

Example 1.2.1: Basic Web Page Framework

<html>
<head>
<title>Optional Title of Your Web Page</title>
</head>
<body>

Enter your HTML marked-up text here...

</body>
</html>

Looking at the example, we see that…

  • The entire web page contents must be enclosed in the “<html> ... </html>” tags. These say “The HTML is in here!”
  • The web page is composed of 2 parts: the “header” which is enclosed in “<head> ... </head>” tags and comes at the top of the document, and the “body” which is enclosed in “<body> ... </body>” tags and comes after the header.
  • Inside the header, you can optionally indicate the title of your web page by using the “<title> Enter Title Here </title>” tags. This title, if included, will appear in the title bar of the viewer’s web browser; it will not appear in the web page itself — only stuff in the body of the web page appears there! There are many other things you can include in the header, some of which we will cover later. The general purpose of the header is for the specification of information about the web page and instructions on how to better handle the contents of the body section.
  • You put all your HTML marked-up text inside the body section. This can be QUITE LONG – there is no limit to how much stuff you can include there; however, if you include a lot of text it may take a long time to download for your viewers who have slow Internet connections (it’s nice to break up very large pages into several smaller pages for this reason – and for peoples’ short attention span!)

The example is a complete web page. You can save it to disk and use it as a template for making your own web pages. Remember, the HTML tags are not case sensitive, so you can use “<html> ... </html>” or “<HTML> ... </HTML>” as you prefer (but you should pick and stick with one for consistency).

1.3 Tags, Tags, and More Tags

In this section we will introduce you to many of the basic tags of HTML and provide examples of their use. These effects can be all also accomplished using CSS (Cascading Style Sheets) and probably are better done that way; however, when just learning HTML, its is good to lean these basic markup tags as well.

Bold: To make text bold, enclose it in the “b” tags: “<b>Bold Text</b>“, yielding “Bold Text“.

Italic: To make text italic, enclose it in the “i” tags: “<i>Italic Text</i>“, yielding “Italic Text“.

Underline: To make text underlined, enclose it in the “u” tags: “<u>Underline Text</u>“, yielding “Underline Text“. Note that underlining text is different from making a link to another document, even though they often look the same. For this reason, it is advised to avoid underlining text unless absolutely necessary (as in book titles) to prevent confusion.

Strike-Out: To make a horizontal line through the middle of your text, enclose it in the “s” tags: “<s>Invalid Text</s>“, yielding “Invalid Text”.

These tags can be nested (as can most tags) to produce a combination of effects, like bolded italic text: “<i><b>Bold Italic Text</b></i>“, yielding “Bold Italic Text“. Just be sure that you close the tags in the reverse order that you opened them as in this example.

Paragraphs and Line Breaks. As you have probably already seen, HTML pretty much ignores your spaces and line breaks, running all your text together in 1 long line (that wraps at the edge of the window). There are many ways of correcting this behavior, the simplest of which is the use of the break tag, “<br>“. This tag (which is one of the few that does not come with an ending tag) literally means “insert a line break here”. You can use multiple break tags in a row to insert blank lines in your page. You can also use the paragraph tag, “<p> ... </p>“, Which marks the beginning and end of a paragraph of text. Text in a paragraph is separated from the rest of your web page by some vertical space before and after the paragraph. Paragraph tags are recommended over break tags for demarking paragraphs of text.

Example 1.3.1: Using Simple HTML Markup

<html><head></head><body>

<p><b>Space Data Corporation</b> isn't
the first company to come up with a pie-in-the-sky idea
promising to bring seamless wireless service to rural
America. </p>

<p>Some have proposed filling the coverage gaps
by launching communication equipment on blimps, rockets
and <i>solar-powered gliders</i>. As yet,
for a slew of financial and technological reasons, none
has proven feasible. </p>

<b><i>Items:</i></b><br>
SPACE<br>HEALTH<br>ENTERTAINMENT<br>
TRAVEL<br>EDUCATION<br>IN-DEPTH

</body></html>
Results:
Space Data Corporation isn’t the first company to come up with a pie-in-the-sky idea promising to bring seamless wireless service to rural America.

Some have proposed filling the coverage gaps by launching communication equipment on blimps, rockets and solar-powered gliders. As yet, for a slew of financial and technological reasons, none has proven feasible.

Items:

SPACE
HEALTH
ENTERTAINMENT
TRAVEL

EDUCATION
IN-DEPTH

Font size: You can change the size of the text displayed in several ways. The easy way is to use the “<big>” and “<small>” tags which indicate the enclosed text should be “one step” larger or smaller than it currently is. These tags can be nested to make text even bigger or even smaller! I.e. “<small>Small Text</small>” gives “Small Text” and “<big>Big Text</big>” gives “Big Text“.

Another way to alter the size of your text is to use the “<font>” tag. This tag is interesting because it takes “parameters” which shape its function. For specifying the font size, you use “<font size="NN">your text</font>“, where NN can be “+1”, “+2”, “-1”, “-2”, etc. These act just like the big and small tags (for size="+1" and size="-1", respectively) and the nested big and small tags for greater changes in the font size, changing the size relative to whatever it currently is. You can also specify an “absolute” font size from 1 to 7 (where 1 is very small, 7 is very large, and 3 is normal) (i.e. “<font size="4">your text</font>“.

Headings: With line breaks, bold face, and font size tags, you can now create nice headings and subheadings in your web pages. However, since this is such a common thing, HTML has six special heading tags: “<h1>” through “<h6>“. Level 1 headings (h1) display the most prominent headings, and level 6 are the least prominent. Headings are usually displayed bold and with a larger font that the default body text. Most browsers also add some space before and after headings to further set them apart from the rest of your text.

Example 1.3.2: Making Headings

<html><head></head><body>

<h2>Space Data</h2>
<h5>In the News</h5>

<p><b>Space Data Corporation</b> isn't the first company
to come up with a pie-in-the-sky idea promising
to bring seamless wireless
service to rural America. </p>

<big><b>Space Data</b><br><Br></big>
<font size="+1"><b>In the News</b><br><br> </font>

<p>Some have proposed filling the coverage gaps by launching
communication equipment on blimps, rockets and <i>solar-powered
gliders</i>. As yet, for a slew of financial and technological
reasons, none has proven feasible. </p>

<font size="1">Size 1</font>
<font size="2">Size 2</font>
<font size="3">Size 3</font>
<font size="4">Size 4</font>
<font size="5">Size 5</font>
<font size="6">Size 6</font>
<font size="7">Size 7</font>

</body></html>
Results:

Space Data

In the News

Space Data Corporation isn’t the first company to come up with a pie-in-the-sky idea promising to bring seamless wireless service to rural America.

Space Data


In the News

Some have proposed filling the coverage gaps by launching communication equipment on blimps, rockets and solar-powered gliders. As yet, for a slew of financial and technological reasons, none has proven feasible.

Size 1 Size 2 Size 3 Size 4 Size 5 Size 6 Size 7

Font Color: You can also use the font tag to change the color of your text as well. You do this by putting a color="XXXX" parameter in the font tag with XXXX being the color you want. This color can be either the name of a color, or a 6-letter code for the color. The list of standard color codes can be obtained at: Web Monkey (symbols), and at Netscape (names). For example, you can make text red via “<font color="red">Red text</font>” which will display “Red text“. You can have both color and size parameters in the same font tag, and you can nest font tags for a combination of effects.

Body Background Color: Now that you can change the color of text, you should also know that you can change the background color of you web page as a whole! The body tag takes an optional parameter “bgcolor="XXXX"” which specified the background color of the page. You specify “XXXX” in the same way you do for font colors.

Example 1.3.3: Color

<html><head></head><body bgcolor="yellow">

<h1><font color="red">My
<font color="blue">[Blue]</font>
Heading!</font></h1>

<p>Some have proposed filling the coverage gaps
by launching communication equipment on blimps, rockets
and <i>solar-powered gliders</i>. As yet,
for a slew of financial and technological reasons, none
has proven feasible. </p>

</body></html>
Results:

My [Blue] Heading!

Some have proposed filling the coverage gaps by launching communication equipment on blimps, rockets and solar-powered gliders. As yet, for a slew of financial and technological reasons, none has proven feasible.

While this example illustrates the use of color, it is kind of gaudy. You probably want to make use of much subtler colors in your web pages. This is something we will return to when we discuss aesthetics!

Additional Formatting Tags

Horizontal Rule: The hr tag (another tag without an end-tag) produces a horizontal line across your page. This is perfect if you want to separate 2 parts of you page with a line!

Block Quote: The blockquote tag encloses a set of text (like the paragraph tag does). All the text enclosed is set apart from the surrounding text by adding vertical space before and after it, and by indenting the text on the left and right. These pages actually make heave use of the blockquote tag!

Lists: HTML has several ways that you can make lists of items. The two most used are ordered lists and unordered lists. In ordered lists, the items are numbered; in unordered lists, the items are bulleted. You designate an ordered list with the ol tag and unordered lists with the ul tag. Between the begin and end list tags, you use the li tag to designate individual list items. Your can easily nest lists as well!

Example 1.3.4: Lists

<html><head></head><body>

<p>Ethically acceptable incentives, not the checkbook,
should be used to persuade people to donate organs and close
the alarming gap between supply and demand of vital body parts,
a group of doctors recommended in last week's New England
Journal of Medicine.</p>

<blockquote> Mindful that there has been limited success
in persuading families to allow organs to be removed from dead
loved ones, the doctors said new federal laws should encourage
organ donations in the same the way society rewards other charitable
gifts.</blockquote>

<hr>

<ol>
<li>Some US States</li>
    <ul>
    <li>Ohio</li>
    <li>Massachusetts</li>
    <li>Akaska</li>
    <li>...</li>
    </ul>
<li>Some Countries</li>
    <ol>
    <li>Unites States</li>
    <li>Canada</li>
    </ol>
</ol>

</body></html>
Results:
Ethically acceptable incentives, not the checkbook, should be used to persuade people to donate organs and close the alarming gap between supply and demand of vital body parts, a group of doctors recommended in last week’s New England Journal of Medicine.

Mindful that there has been limited success in persuading families to allow organs to be removed from dead loved ones, the doctors said new federal laws should encourage organ donations in the same the way society rewards other charitable gifts.


  1. Some US States
    • Ohio
    • Massachusetts
    • Akaska
  2. Some Countries
    1. Unites States
    2. Canada

Comments: One very important part of programming (and HTML as well) is writing comments — descriptive text telling you or others what you are doing, but which should not be included in the displayed output of your web page. To include a comment in your HTML document, simply enclose the comment text in the begin (“<!--“) and end (“-->“) comment symbols; i.e. “<!-- Your Comments -->“. This is also useful for stopping arbitrary blocks of HTML from being displayed.

Special Characters: (HTML Entities) Since ALL tags are defined via the left and right angle brackets, how would you actually display one of these symbols in your web page? You use a so-called “character entity”; a special set of symbols that stands for the character you want to display. These character entities always start with an ampersand (“&“) and end with a semi-colon (“;“). The left angle bracket (less than sign, “<“) is displayed using the set of symbols (“&lt;“); the right angle bracket (greater-than sign, “>“) is displayed using the set of symbols (“&gt;“). A complete set of character entities that you can use is given at Web Monkey. You can use either the name code or the number code as given in that web page.

Another very useful special character is the “non-breaking space”, i.e. your way to tell HTML “I really want a space here!” To enter a non-breaking space, type “&nbsp;“. This will insert a space. If you put many of these in a two, you can do things like indent the first line of a paragraph, or separate words. It is called a non-breaking space, because if you put it between two words, like “my&nbsp;father“, HTML will NEVER wrap your text such that these 2 words would be on different lines — it won’t break them apart. Of course, this only works if there are no normal spaces, tabs or line feeds between these words, only non-breaking spaces, so “my&nbsp; father” wouldn’t work because of the presense of the normal space!

Example 1.3.5: Comments and Entities

<html><head></head><body>

<p>Ethically acceptable incentives, not the checkbook,
should be used to <!-- persuade people to donate organs
and close the alarming gap between supply and demand of vital
body parts, a group of doctors recommended in last --> week's
New England Journal of Medicine.</p>

<p>55.379 &lt; 99.873</p>

</body></html>
Results:
Ethically acceptable incentives, not the checkbook, should be used to week’s New England Journal of Medicine.

55.379 < 99.873

1.4 URLs, Links, and Images

What is a URL? URL stands for “Uniform Resource Locator”. It is a means by which you can refer to anything on the Internet – an HTML page, an image, a video clip, etc. It is that text which appears in the Address line in your browser ad usually starts with “http://“. For example, “https://luxsci.com” is the URL for the home page of Lux Scientiae, and “http://hotwired.lycos.com/webmonkey/reference/special_characters/index.html” is the URL for the character entities page on Web Monkey that we linked to above.

Links. To make a hyper-text link from your web page to some other web page, you use the anchor tag (“<a href="URL">Displayed Text</a>“). This tag takes the parameter href which is the URL of the web page you are linking to. The text between the begin and end anchor tags will be displayed underlined and, if you click on it, you will be taken to the web page that corresponds to the specified URL.

The examples of URLs so far have all been absolute URLs, in that they include all the information needed to find the web page — the protocol (i.e. “http://“), the domain (i.e. “hotwired.lycos.com“), and the directory and file name on the web server (i.e. “/webmonkey/reference/special_characters/index.html“). You can also specify a relative URL. Relative URLs can be relative to the domain or relative to the current directory. For this example, let us take this web page as the current URL, i.e. our Address line in our web browser says “https://luxsci.com/extranet/courses/internet_prog/html1.html“. Let us say that we want the syllabus page. Its absolute URL is “https://luxsci.com/extranet/courses/internet_prog/index.html“. We can specify it via a URL relative to the current domain as “/extranet/courses/internet_prog/index.html” or via a URL relative to the current directory as “index.html“. The distinguishing difference between these two types of relative URLs is the presence of the “/” as the leading character.

It is usually best to use the simplest form of the URL that you can so that you are minimally dependent on the domain name or directory that your files are located in; i.e. if you need to move your site someplace else, fewer changes will be needed if you use relative URLs.

Example 1.4.1: Making Links

<html><head></head><body>

<h3>Some Links</h3>
<ul>
<li><a href="https://luxsci.com">Lux Scientiae</a></li>
<li><a href="http://google.com">Google.com</a></li>
<li><a href="index.html">The Syllabus for this class</a></li>
<li><a href="/extranet/resources.html">Other Web Resources</a></li>
</ul>

</body></html>
Results:

Some Links

Images! Now for what you’ve all been waiting for … how to include an image in your web page! Each image has a URL just like a web page does, only, instead of a text file ending in “.html“, an image is a binary file with an ending “.gif“, “.jpg“, or “.png“. Note that this means that images are not embedded in your web pages, only references to the locations of your images on the Internet are located in the web page!

You include an image in your web page using the image tag, “<img src="URL" width="WWW" height="HHH">“. The image tag does not have an ending tag. The URL works just like the URL used for making links, except that it refers to an image and not a web page. You can optionally specify the size with which the image should be displayed using the width and height parameters. The “WWW” and “HHH” are the number of pixels (dots) wide and high that the image should be displayed. If you know how big the images is, you should include its dimensions here as it will make your web page load faster.

You can also dynamically change the size of your image to any width or height you like using these parameters. The web browser will automatically resize the image to the specified size — you can get some pretty interesting stretching and compressing effects this way!

Copyright Most images that you find on the web are copyrighted. You should NOT download and use them on your web sites unless you have express written permission! This cannot be stressed enough! Any you should especially not just link to someone else’s images on their web sites (using their server and bandwidth to serve you viewers is a bad thing).

Linking Images One interesting trick is to nest the link tag and the image tag so that you can click on an image to go to a new web page!

Example 1.4.2: Images

<html><head></head><body>

<center>
<img src="https://luxsci.com/images/Banners/LuxSci_Banner_468x60.gif"
     width="468" height="60">
<br><Br>
<A href="https://luxsci.com">
<img src="https://luxsci.com/images/Banners/LS125x125.gif">
</a>

<img src="https://luxsci.com/images/Banners/LS125x125.gif"
width=75 height=75>

</center>

</body></html>
Results:


This example shows how to include images in your web page and also how to resize the image. Note that relying on the web browser to resize your images for you will often result in a poor quality result. It is better to resize your images in a graphics tools such as Adobe Photoshop for making professional-looking web sites.

Note the new center tag we have also introduced which causes everything inside to be centered in your web page!

1.5 Your Homework!

Now it is time to practice what you have learned here. Your assignment is to do the following:

  1. Create your “home page” — the front page of your personal web site.
    • The file should be named “index.html“.
    • You should include your name, a picture of you or something that represents you, and some quotation that you like. Include links to other web sites that you like or use a lot.
    • Try to make it look nice.
  2. Create an online Resume for yourself:
    • Include your educational history, job history, honors, skills, hobbies, etc.
    • Use as many of the HTML concepts we have taught here as possible, while making the page look nice and present your information readably — the whole idea of a resume is to impress someone, so it should look good!
    • Make a prominent link to this page on the home page you created in part 1.

1.6 Additional Resources

There are lots of web sites out there which expound on HTML and all the features and usages of these tags (and the tags that we haven’t yet mentioned). The following links are for your reference and additional reading:

Some other relevant reading:

3 Responses to “Introduction to Internet Programming with Perl and HTML: Part 1 – Introduction to HTML”

  1. Perl Flow Control Basics | LuxSci FYI Says:

    […] article is Part 4 of our series on Introduction to Internet Programming series. See the Introduction and Part 1, Introduction to HTML. This article covers logical comparisons, making decisions with if, comparing text, while and for […]

  2. Introduction to the Perl list data type | LuxSci FYI Says:

    […] article is Part 5 of our series on Internet Programming. See the Introduction and Part 1, Introduction to HTML. This article covers the Perl "list" data […]

  3. Introduction to Internet Programming Part 6: Perl Data Part II – Hashes | LuxSci FYI Says:

    […] article is Part 5 of our series on Internet Programming. See the Introduction and Part 1, Introduction to HTML. This article covers the Perl "hash" data […]

Leave a Comment


You must be connected or logged in to post a comment. This is to reduce spam comments.

If you have not previously commented, you can connect using existing social media account, or register with a new username and password.