The last couple weeks you've been editing tables and posting them to the Document Collaboration. This week we want you to make your own page.
It's important that we don't want you to use an HTML editor, or a program like Microsoft Word, that will produce HTML pages as output. We're going to do it the old-fashioned way.
To do this, first you need to be using the right text editor. On Windows, this usually means Notepad, which is found under Programs/Accessories in the Start Menu. On the Mac, you want to use a program like SimpleText.
You have to get used to typing all the HTML "tags", so that when we begin writing real programs, how to put them into web pages will be easy for you.
To see what it is you need to be typing, go to the "View" menu at the top of the browser window and click on "Page Source" or "Document Source". Compare the source code with what the page actually looks like. You'll see the following tags that we'll be using in the first part of the page:
<html>-- this tells the browser that the document is an HTML document.
<head> .... </head>-- this surrounds the "Heading" of the document. It puts the title in the title bar at the top of the browser, and it will be where the text of programs goes.
<title>-- In between these is the title that goes at the top of the browser window.
<body> ... </body>-- between these goes the main body of the page: all the good stuff.
<h2> ... </h2>-- the text between these is bigger. There are several levels of h1, h2 etc... the bigger the number, the smaller the text. These are examples of formatting tags, which change the way text looks. Formatting tags always occur in pairs, like
<i> ... </i>for italics or
<b> ... </b>for boldface.
<p>tag tells the browser to make a new paragraph.
<font color=...> .... </font>tag -- it changes the color of the font. HTML knows a lot of colors. There are a bunch of ways to do change the color of the font, and other things about the font you can change, but we'll get to that later.
So what do we want you to do this week? Three things:
To make the link you use a tag that looks like:
<a href="put the URL here"> Link text goes here </a>
For instance, a link to my home page would be typed as follows:
<a href="http://www.math.upenn.edu/~deturck"> Dr. D's homepage </a>and it would display like this in the browser:
Dr. D's homepage
Have fun! Let us know if there are any problems!