Session 2: HTML Coding Basics

LIS 670: HTML Coding Basics

Objective

Make a browser readable web page using HTML.

What is HTML?

Hypertext Markup Language, or HTML for short, is what tells a web browser how a page should look. An HTML document contains two components: content (e.g., course schedule information) and HTML commands that specify the placement and formatting of the content (e.g., display the course name in bold, the instructor's name in italics, and show all the classes in a grid layout).

HTML Elements (Millhollan, 179-182 & Wikipedia.org "HTML Tag" entry)

"HTML elements generally consist of three parts: a start tag marking the beginning of an element, some amount of content, and an end tag. Elements may represent headings, paragraphs, hypertext links, lists, embedded media, and a variety of other structures." ("HTML Tag" entry at Wikipedia.org)

1. HTML tags are surrounded with angle brackets (< >).

2. HTML tags are not case sensitive.

3. HTML tags are often in pairs with a starting tag and ending (also called closing) tag (<body></body>).

4. "Nested" HTML tags should close in the reverse order of the opening tags:

<html>

<body>

<p>Why did the chicken cross the road?</p>

</body>

</html>

5. Some tags can have style properties which further refine the effects of the tag (more on this later):

Let’s Get Started

For the purposes of this workshop, we'll be working with the basic HTML document that you created as part of an earlier LIS 670 assignment ("test_file.html"). Start Internet Explorer and enter the address to your file in the browser's address bar:

http://www2.hawaii.edu/~yourusername/test_file.html

You can also follow along by looking at the files in this folder (tutorial starts with file01.html):

http://www.hawaii.edu/lis/webteam/workshops/LIS670/HTMLfiles/file01.html

Assuming you completed the LIS 670 assignment that had you create a bare-bones web page, your page will look something like this (if you click the browser's View menu and choose Source):

<html>

<head>

<title> …document title… </title>

</head>

<body>

…your page content…

</body>

</html>

Living in a ~~Material~~ UNIX world!

Web pages can be created using a simple text editor (e.g., Windows Notepad, Mac OS TextEdit, or UNIX Pico). There's also more advanced (and expensive) options such as Macromedia Dreamweaver. Since we're poor (and because we need to earn our nerd merit badges), we'll be using UNIX Pico to edit our HTML file.

To connect to UNIX:

1. Double click the SSH Secure Shell Client icon on the Windows desktop

2. Click the Quick Connect button or click the File menu and choose Connect

3. Under host name, type uhunix2.its.hawaii.edu

4. Under username, type your UH username

5. Click the Connect button and enter your password when prompted

On the uhunix web server, HTML files are stored in your public_html directory. To navigate to the public_html directory where your "test_file.html" file is located, type:

cd public_html

(Note: a list of other useful UNIX commands is included at the end of this handout)

To view the files located in the public_html directory, type:

Open your test_file.html document with the Pico text editor. To open the file with Pico, type:

pico test_file.html

Let’s style it up!

Looking at a web page without any formatting is like watching paint dry — pretty darn dull! Fortunately, HTML lets you apply many of the same concepts you've learned in Microsoft Word (e.g., applying styles, making text appear bold or italicized, changing the size or color of your text, centering words, etc.).

Formatting your web page is called “styling” it – basically it’s talking about how you want your page to look. HTML uses a companion language called CSS (which stands for “Cascading Style Sheets” – don’t get confused, it’s a language not a sheet!) to apply style to the various elements of a page. In some instances, like the next example, you can use predefined code to change the style of your content; in other instances you define the style yourself. Let’s try some examples.

Headers

Header tags are special predefined styles that instruct the browser to display text in a certain way. These six tags are useful for creating section headings and sub-headings.

Locate the <BODY> tag and type the following lines after it:

<h1>This is header style 1. It's the most prominent heading</h1>

<h2>This is header style 2, useful for subheadings and such.</h2>

<h3>This is header style 3. There are six header tags!</h3>

< Save your changes by pressing the control key and the letter “O” simultaneously (a list of Pico commands is at the end of handout). Press Enter when Pico prompts you for a filename.

Switch to the web browser and click the Refresh button. You can see the changes in size and thickness – there are six headers ranging from largest (1) to smallest (6).

Font

Next, let's get bold and lean a little to the right. Switch back to Pico and add the following lines to your HTML file:

<i>This is italics. Fancy!</i>

<b>This is bold. It looks strong and tough!</b>

< Save your changes and refresh your browser. HTML code has not yet disallowed the use of <i> and <b> but recommends that you use CSS instead for “richer effect.” More on this later (at our HTML workshops!)

When you look at this page, the two lines are right next to each other – that’s because they are just pieces of raw text thrown into the <body> of the page. What we need to do is put them in a container. This is an essential part of HTML/CSS.

Go to your Pico file and type:

<div><i>This is italics. Fancy!</i></div><br />

<div><b>This is bold. It looks strong and tough!</b></div><br />

< Save your changes and refresh your browser. What we have created is a <div> section, a “division.” This is necessary because all content (that is, the words, pictures, etc that you want on your page) has to be contained inside something. The <div> tag creates an invisible section for you to put your words into – think of it as an invisible shoebox that holds your content. Once we have that shoebox created, we can then tell the browser how we want the things inside the box to look with CSS rules.

The other thing we added was the <br /> tag. This means “break” and adds a line break where you enter the tag. This tag does NOT need another pair closing tag, but instead has the closing / slash in itself. <br /> is one of the most common tags used.

If you want to separate them more, there is something else you can do, which is better suited to typing sections of text.

Go to your Pico file and change the <div> parts to <p>:

<p><i>This is italics. Fancy!</i></p>

<p><b>This is bold. For emphasis.</b></p>

< Save your changes and refresh your browser. The <p></p> tags instruct the browser to make each line a new paragraph (so instead of a plain shoebox, we have created a “paragraph”-type shoebox to put our content into), and a paragraph automatically has a line break at the end of it. Check out the line break on your refreshed page. The difference between <p></p> and <div></div><br /> is minor when you are dealing with plain text; the difference is that while you will definitely use <p> as a shoebox for text, you will want to use <div> as a box for other things like images and navigation.

What do you do if you don’t want space between your sentences, but you do want to contain them? The simplest way of doing this is put a <p> around the whole thing!

Go to Pico and type:

<p>I love ice cream. No, I mean I <i>really</i> love <b>ice cream</b>.</p>

< Save your changes and refresh your browser

Font size matters

Getting back to font… Sometimes you may want to use a larger font on a portion of text. To do this, switch back to Pico and create a <p> tag with the style=”” command with the property font-size: for the text you want to modify. This seems complicated because we’re starting to use CSS, but once you understand all the pieces, it makes sense.

<p style="font-size: 1em;">This is a normal font size</p>

<p style="font-size: xx-small;">This is a teensy-weensy font size</p>

<p style="font-size: xx-large;">This is MUY GRANDE!</p>

< Save your changes and refresh your browser.

First we contained our text in a <p>. Then we want to tell the browser “make everything inside this <p> look like ______.” That’s where the “style” part comes in. By using the style=”” command inside the first <p> bracket, you are telling the browser “make everything inside this <p> look like this,” and then you lay out your rules. In our case we have three different <p>’s, with three different font sizes.

There are three things you can do with the font-size: rule, you can set the size as a range between xx-small and xx-large; you can set it as a percentage (if you wanted this particular paragraph to be 50% the size of the text on the whole page, for example); or you could set a defined size. In this case you will notice the first line says 1em; an em is the size of the capital letter “M” in the default font and font size set by the user’s browser – using this as a unit of measurement provides web designers with some amount of control and precision in their fonts and widths, while allowing for flexibility on the viewer’s part. If you want to specify the size of your font, we recommend the “em”!

Text Color

Again we have to use CSS to add style to our content. In this case, we want color, and you can control the color of text by adding the color: property to a style=”” tag. To try this, switch back to Pico and add the following line:

<p style="color: purple;">This is donna's favorite color!</p>

<p style="color: #0066CC;">This is one of my favorite colors!</p>

< Save your changes and refresh your browser.

There are sixteen pre-defined colors: aqua, black, blue, fuchsia, gray, green, lime, maroon, navy, olive, purple, red, silver, teal, white, and yellow. In addition, there are 216 “web safe colors” that all browsers should be able to read accurately. You can use these colors by using the “HEX” color code system (a combination of A-F and 0-9 to six places), as in the second example above. To see more colors and their codes, refer to the chart at:

http://www.w3schools.com/html/html_colors.asp

Spice Up Your Page

Staring at a white background all day long can get pretty dull. Fortunately, HTML lets you jazz things up! Pick one of the 16 pre-defined colors from the list (above) and change your page's background color by adding the background-color: attribute to the body style tag:

Switch back to Pico and without changing the text, add the background-color: attribute to the <body style=””> tag:

< Save your changes and refresh your web browser.

Ouch! That's enough to make people's eyes bleed. As a general rule, it's better to choose softer, subtler colors for a page's background (such as background-color: #CCFFFF;).

Last on our tour of spiffy graphic HTML tricks is the "horizontal rule," which you can use to insert a horizontal line that can act as a divider.

Switch back to Pico and add the following lines to the HTML file:

<hr />

<p>Walking a thin line -- by using the horizontal line tag!</p>

< Save your changes and refresh your web browser. Note that the <hr />, like the <br />, has no ending pair tag, but instead has a space and a slash inside it. The slash generally indicates the end of a code, but since there’s only one hr tag required, the slash has to go straight inside the original tag.

Making Lists

Have you ever used the "numbering" or "bullets" list feature in MS Word? It's pretty spiffy—just click either button and Word automatically creates a numbered or bulleted list as you type. Well, HTML has a similar feature (although not quite as automagically delicious as MS Word).

Switch back to Pico and add the following lines:

<h1>How to make dinner</h1>

<ol>

<li>Drive to favorite restaurant</li>

<li>Order dinner from waiter</li>

</ol>

<h2>Things to do today</h2>

<ul>

<li>Clean garage</li>

<li>Go surfing</li>

</ul>

< Save your changes and refresh your web browser to see the results. The <UL> tag creates an "unordered" —or unnumbered— list of items. The <OL> tag creates an "ordered" —or numbered— list of items. Which one you use in any given situation is largely dictated by your situation's needs: it's unlikely that you'd give someone a numbered shopping list (they might confuse the step numbers with the amount of items you want). Similarly, you're unlikely to create a bulleted set of directions—your recipient may skip necessary steps or perform them out of order.

You can also control the list's notation style by adding the style=”” attribute to the <UL> or <OL> tags, along with the list-style-type: property:

<h1>Choose one of the following:</h1>

<li>Meatloaf</li>

<li>Seared Ahi</li>

<li>Plate lunch</li>

</ol>

<h2>Benefits of Lite Beer</h2>

<li>Tastes Great!</li>

<li>Less Filling!</li>

</ul>

< Save your changes and refresh your web browser. For more style of lists, check a reference guide.

Turn the tables

Tables are composed of rows and cells, much like in Microsoft Excel, and are great for representing information in, well, tabular format. It used to be that tables were used to create the layout of a page, but no more! CSS is used for “positioning” as it is called, and table are now only used for tabular data.

The code for tables can be a little tricky to read, but if you indent the HTML code properly (as shown below), you can make the code easier to understand.

In Pico, type the following to create a basic table:

<tr>

<td>This is the first cell of row #1</td>

<td>This is the second cell of row #1</td>

</tr>

<tr>

<td>This is the first cell of row #2</td>

<td>This is the second cell of row #2</td>

</tr>

</table>

< Save your changes and refresh your web browser.

The <tr> tags specify a horizontal ROW in the table and the <td> tags specify each CELL within each ROW. The border= attribute on the <table> tag instructs the web browser to create a border around the whole table. The border= attribute can be any whole number (e.g., 1, 3, 10, 14, etc.). The larger the number, the thicker the border around the table...

Because HTML tables can be very complex, we've indented the various tags to indicate which one is subordinate to the other — when dealing with tables, it's useful to indent your HTML tags this way in order to give you an easy-to-read representation of how the table tags are related. It can also help you spot any errors in more complicated tables, should you forget to include a tag.

Other Useful Bits of Fluff

The <blockquote> tag indents a paragraph, which can be useful for quoting long sections of another work. Switch back to Pico and type some portion of the following passage:

<p>Once upon a time: <blockquote>We the People of the United States, in Order to form a more perfect Union, establish Justice, ensure domestic Tranquility, provide for the common defense, promote the general Welfare, and secure the Blessings of Liberty to ourselves and our Posterity, do ordain and establish this Constitution for the United States of America.</blockquote> And they lived Happily Ever After…</p>

< Save your changes and refresh your web browser.

Some characters must be represented by codes, since they're reserved by HTML (such as the @, &, or " symbols). Others are just plain impossible to type on most keyboards here in the USA (such as the diacritic in Dr. Jacso's name).

In those cases where you need to use such characters as content (rather than as part of an HTML command), you must encode them as "special characters" using HTML codes.

A list of special characters & their HTML codes can be found at the Web Monkey site:

http://www.w3schools.com/html/html_entities.asp

Switch back to Pico and type some portion of the following passage:

<p>To wit: <blockquote>These ampersands look the same on the web page: & or &! You are @ an HTML workshop. To get full credit for your hard work, be sure to put one of these © or © symbols on your Web site. And don’t stress out at school, take care of your &hearts;</blockquote> Hooray for special characters!</p>

< Save your changes and refresh your web browser.

The Missing Link

Eventually you will need to create a link from your own page to a different page somewhere else on the internet. To do this, use the "anchor" tag to specify the destination page address and the text you want to serve as the clickable link.

In Pico, type the following line in your HTML file:

< Save your changes and refresh your web browser.

Thank you all for coming to the workshop today!

The LIS Web Team also has a list of useful reference sites:

http://www.hawaii.edu/lis/webteam/tutorials/html.htm

Reference

Millhollon, Mary, and Jeff Castrina. Easy Web Page Creation. Microsoft: Redmond, 2001.

HTML Element. Wikipedia.org; Internet. Accessed 2005 September 26.

http://www.w3schools.com/html/ W3 Schools HTML tutorial and Reference Guide

http://www.w3schools.com/css/ W3 Schools CSS tutorial and Reference Guide

UNIX Commands

Command	Function
cd directoryname	Change directory levels.
chmod _ _ _ filename	Change your permissions.
ls -a	Lists all the files in your directory.
ls -la	List all the files in your directory in long format including the mode, number of bytes, the owner, last time it was modified, etc.
pine	Enter email. See docs at: http://www.hawaii.edu/itsdocs/category.html
pico filename	Edit a file. See docs at: http://www.hawaii.edu/itsdocs/category.html
rm filename	Delete file.
cp file1 file2	Copy contents of file #1 into file #2.
mv file1 file2	Move entire contents of file #1 into file #2. You can use mv to move a file into or out of a directory or to RENAME a file.
Man command	Gives you details about that command.
du	Called disk usage. Shows file and directory sizes.

Pico Commands

Command	Function
^O	Save.
^D	Delete the character at the cursor position. Can also use backspace key.
^K	Delete (kill) entire line.
^U	Undelete. Very important!
^L	Refresh display.
^W	Find words in the document. Helps when you have to edit a long page.
^A	Move to beginning of current line.
^E	Move to end of current line.
^V	Move forward a page of text.
^Y	Move backward a page of text.
^X	Exit Pico.

The ^ symbol is shorthand for the "control" key on the keyboard. Thus, ^O translates into "hold down the control key on the keyboard and press the O key."