22C5 - Problem Solving and Computing
Friday, January 19

HTML day 1

HTML Basics

Your web document is simply a text file.
It contains tags that tell the browser how to display the information.
Tags surround text, links, and multi-media objects.
Tags are always surrounded by angle brackets, for example, <HEAD> or <LI>
Most tags come in pairs. The first turns the action on, and the second turns the action off. For example, bold on, , and bold off, . There are a few exceptions. <HR> places a horizontal line on the page. Often is used alone to create paragraphs. However, some text here is also used.
The second tag -- to turn the action off -- always starts with a forward slash. For example, you start bold with and end bold with or you begin the document with <HTML> and end with </HTML>
Tags can be embedded; you must make sure you keep the order consistent. In other words, first tag on is last tag off, don't cross-over.
Many tags have optional attributes. For example, the tag has an ALIGN attribute. So centers the paragraph that follows it.
Use attributes only when needed, let the browser do the work.
HTML is a changing language. Different tags and attributes are supported by different versions of browsers. Browsers tend to ignore tags that they don't understand (and the text between them).
There is an official specification of the language.
HTML is case-insensitive. However, it is conventional to write tags and their attributes is upper case.

Creating a page

Each page is described by an HTML file. This file contains only text information.
The tags in this file describe the page content and general layout of the page.
The browser reads and interprets the HTML codes to produce the view seen by the user.
Every page starts with the <HTML> tag and ends with </HTML>
Next, define the HEAD and BODY of the page. There are many attributes that can go in the HEAD section but TITLE is the only one that should be present. The information in the TITLE will be displayed in the browser's title bar while viewing the page.

Everything that appears on the Web page will go between the BODY tags.

   <HTML>
      <HEAD>
         <TITLE>
             Class Sample Page
         </TITLE>
      </HEAD>
               
      <BODY>
          Put stuff here
      </BODY>

   </HTML>

In the Body

Text layout and formatting will determine how text is placed on the page and how the text will be displayed.

Header tags range from <H1> to <H6> with H1 being the largest and H6 the smallest. They format the text as headers and place each header on a separate line.

   <HTML>
       <HEAD>
           <TITLE>
               Class Sample Page
           </TITLE>
       </HEAD>

       <BODY>
           <CENTER>
               <H1> Problem Solving </H1>
               <H2> 22C5 </H2>
           </CENTER>

           This is sample HTML code for the notes
           presented on Aug 27.

           The basics of HTML will be presented so that
           web page construction becomes easier.

       </BODY>

    </HTML>

Problem Solving

22C5

This is sample HTML code for the notes presented on Aug 27. The basics of HTML will be presented so that web page construction becomes easier.

Notice that the text is reformatted to fit the window. The line breaks and white space do not matter to the browser. You need to use the and tags to control the text manually.
The tag forces a line break without leaving vertical space. You don't need to use the tag for every line, just when you need to force a line break.
The tag breaks the text and inserts a blank line. This is useful to separate paragraphs.

By default the text following BR or P will be left aligned. You can use the ALIGN attribute to modify this behavior. For example, or

   <HTML>
      <HEAD>
          <TITLE>
             Class Sample Page
          </TITLE>
      </HEAD>

      <BODY>
         <CENTER>
            <H1> Problem Solving </H1>
            <H2> 22C5 </H2>
         </CENTER>

         <P ALIGN=RIGHT>

         This is sample HTML code for the notes
         presented on Aug 27.

         <P ALIGN=CENTER>

         The basics of HTML will be presented so that
         web page construction becomes easier.

      </BODY>

   </HTML>

Problem Solving

22C5

This is sample HTML code for the notes presented on Aug 23.

The basics of HTML will be presented so that web page construction becomes easier.

Highlighting text

You can make text stand out by changing its format.
Logical tags let the browser choose how the text will be made distinctive. Text marked with the and tags will usually appear as italic and bold, respectively. However, some older browsers may choose to underline instead.
 emphatic emphatic
 strong strong
You can also use the and tags for italic and bold. Most browsers understand these tags.
 bold bold
 italic italic

Links

    <HTML>
       <HEAD>
          <TITLE>
             Class Sample Page
          </TITLE>
       </HEAD>

       <BODY>
          <CENTER>
             <A NAME="MYTOP"> </A> 
             <H1> Problem Solving </H1>
             <H2> 22C5 </H2>
          </CENTER>

          This is sample HTML code for the notes
          presented on Aug 23.

          <P>

          The basics of HTML will be presented so that
          web page construction becomes easier.

          <P>

          Visit another course

          <A HREF="myfile.html"> webpage </A> for more information.

          <P>

          Return to the <A HREF="#MYTOP"> top</A> of
          the page.

          <P>
               
          Go to <A HREF="http://www.uiowa.edu">
          The University of Iowa </A> home page.
            
      </BODY>
   </HTML>

Problem Solving

22C5

The basics of HTML will be presented so that web page construction becomes easier.

Visit another course webpage for more information.

Return to the top of the page.

Go to The University of Iowa home page.

The <A> tag tells the browser you are creating a link. The HREF attribute stands for Hypertext Reference. What follows HREF= in quotes is the name, or URL, of what you want to link to.
To link to other sites, we give the complete URL, as in <A HREF="http://www.uiowa.edu"> The University of Iowa</A>
To link to other documents at this site, as in <A HREF="myfile.html"> webpage </A>
Using the NAME attribute, you can link to other locations on the same page. This is particularly useful if you have a long page.
The NAME attribute labels the destination of a link with an anchor name. We will use the name "MYTOP" for our anchor.
At the destination text, add tags to define the name. In this case, place the tags <A NAME="MYTOP"> and </A> around the destination text.
Place the link tags <A HREF="#MYTOP"> and </A> around the text you want to link from. When users click on this text, they will be taken to text somewhere else on the page. In this case, to the top of the page.

Underlining and e-mail

Use to underline: this text

Here's what you use to specify an e-mail address: <A HREF="mailto:bruell@cs.uiowa.edu">bruell@cs.uiowa.edu</A>

My email address is bruell@cs.uiowa.edu

Lists

Often, a list is a great way to organize the information on your page. HTML contains many list-making tags.
The simplest is the unordered, or bulleted, list. This is denoted with the <UL> tag. Each item in the list is identified with the <LI> tag.
- this is the first item
- this is the second
```
 <UL>
 <LI>
 this is the first item
 <LI>
 this is the second
 </UL>
```
To get an ordered, or numbered, list use the <OL> tag rather than the <UL> tag.
1. this is the first item
2. this is the second
```
 <OL>
 <LI>
 this is the first item
 <LI>
 this is the second
 </OL>
```
Another type of list is the definition list. It presents the term on one line and then its definition indented on a separate line. This list uses the <DL> tag and denotes its elements with the <DT> and <DD> tags for definition title and definition description, respectively.

word 1
the definition of word 1
some other word
this word has a much longer definition and can go here over many lines.
```
 <DL>
 <DT> word 1
 <DD> the definition of word 1
 <DT> some other word
 <DD> this word has a much longer 
 definition and can go here over many
 lines.
 </DL>
```

Images

For use on the web, your image should be stored in GIF or JPEG format. JPEG is best for things like photographs, while GIF is best suited for drawings or line-art.
Use the <IMG> tag to place the images on your web page. Use the SRC attribute to point to the image.
For example, < IMG SRC="smiley.gif" > will place the image on the page. As in
By adding a we can get the image on the next line (just some filler text)
Remember, images take time to load. Keep images as small as possible.
Use the WIDTH and HEIGHT attributes to tell the browser how much space to leave on the page for the image while loading, as well as how large to display the image. For example, < IMG SRC="smiley.gif" WIDTH=80 HEIGHT=60> will do this

The IMG tag also has an ALIGN attribute for placing the graphic on the page relative to the text. This wraps the text 'beside' the graphic. For example,

   < IMG SRC="smiley.gif" ALIGN=RIGHT WIDTH=80 HEIGHT=60>
   Some text is in here.  Some text is in here.
   Some text is in here.  Some text is in here.
   Some text is in here.  Some text is in here.
   <P>
   <IMG SRC="smiley.gif" ALIGN=LEFT WIDTH=80 HEIGHT=60>
   And this is the next paragraph.
   And this is the next paragraph.
   And this is the next paragraph.
   And this is the next paragraph.
   <P>
   And a final paragraph.

Some text is in here. Some text is in here. Some text is in here. Some text is in here. Some text is in here. Some text is in here.

And this is the next paragraph. And this is the next paragraph. And this is the next paragraph. And this is the next paragraph.

And a final paragraph.

The IMG tag also has a border attribute. If you are using the image as a link, this determines the width of the colored border.

Colors

Most current browsers understand some colors by name, such as black, white, red, green. But to get control, you need to use hexadecimal codes.
Hex digits are 0-9 and A-F. The color codes are triples of hex numbers between 00 and FF. Each one of the 3 elements represent the amount of red, green, and blue, respectively. For example, FFFFFF is white, 000000 is black, and FF0000 is a very bright red.
Most browsers only display 256 colors, so the browser may not render your colors exactly as requested. There are many on-line resources to assist you in choosing colors.
Background color can be set by using the BGCOLOR attribute of the BODY tag. For example, <BODY BGCOLOR="#FFFFFF"> will set the background color of the page to be white.
You may also choose a background image. This image will be tiled to fill the window. That means, the image is used in its current size and is duplicated to fill the window. For example, <BODY BACKGROUND="smiley.gif"> will fill the background of the page with smiley faces.

E-mail feedback

To make a link to your e-mail address, add in code such as <A HREF="mailto:yourname@somewhere.com"> Mail Me </A>
Mail Me
When someone clicks on Mail Me, the e-mail program will start up and your e-mail address will be filled in as the destination of the mail.

Text colors

The attributes TEXT, LINK, VLINK, and ALINK can also be set in the BODY tag.
TEXT is the color of normal text
LINK is the color of an unfollowed link
VLINK is the color of a followed link
ALINK is the color a link while highlighted (clicked).

Fonts

There are two common ways to setup the text of your page.

The <Hn> Tag

This is heading size 1, the largest.

This is heading size 3.

This is heading size 6, the smallest.

<H1>This is heading size 1, the largest.</H1>

<H3>This is heading size 3.</H3>

<H6>This is heading size 6, the smallest.</H6>

Using the <Hn> command is fine for most simple pages, but there are some problems. You can only change the size of the text and not the font. Also, you may experience problems trying to align the text with graphic images. Notice, headings seem to demand their space. So, let's consider another option; the command.

The Tag

The tag can take the following 3 basic attributes: FACE, SIZE, and COLOR

Changing Font Face:
Changing the font of your text is really pretty simple. An example is shown below.
So, you want Different Fonts?
Here's the code that did it.
 So, you want Different Fonts? 
Notice that in this example two attributes or options were used, the FACE attribute and the SIZE attribute. The FACE option allows you to set the font you would like to use. But, what fonts can I use, you ask? That depends on the installation.
Changing Font Size:
You can see from the example above that you can adjust the size of your text using the command. You can set the font size to any number between 1 and 7, with 3 being the default. Unlike the heading <Hn> command, the font size 1 is the smallest and 7 is the largest.
Changing Font Color:
There is one more option, the COLOR attribute. You can easily change the color of your text by adding the COLOR attribute to your command. An example is shown below. This is a color example.
This is a color example.
Here's the HTML code.
 This is a color example.
More examples:
Here are some more examples demonstrating the flexibility of the command. The HTML code for each is shown.
This is a FACE example.
 This is a FACE example.
This is a FACE example.
 This is a FACE example.
This is a SIZE example.
 This is a SIZE example.
This is a SIZE example.
This is a SIZE example.
This is a COLOR example.
This is a COLOR example.
This is a COLOR example.
This is a COLOR example.
This is a SIZE example.
This is a SIZE example.
This is a SIZE example.
This is a SIZE example.
This is a SIZE example.
This is a SIZE example.

22C5 - Problem Solving and Computing Friday, January 19

HTML day 1

HTML Basics

Creating a page

In the Body

Problem Solving

22C5

Problem Solving

22C5

Highlighting text

Links

Problem Solving

22C5

Underlining and e-mail

Lists

Images

Colors

E-mail feedback

Text colors

Fonts

The <Hn> Tag

This is heading size 1, the largest.

This is heading size 3.

This is heading size 6, the smallest.

The <FONT> Tag

Changing Font Face:

Changing Font Size:

Changing Font Color:

More examples:

22C5 - Problem Solving and Computing
Friday, January 19