Complit HW 2

Frontpage and HTML

Basic Text in Frontpage

HTML (hypertext markup language) is the language we will use to make webpages.
To start, we will introduce a basic html editor. These editors are easy to use, and require no coding. The goal is to be able to publish a basic web page.
To start, open the editor that is packaged with Microsoft Office -- Frontpage. Start Menu -- Programs -- Office2000 -- Microsoft Frontpage
With Frontpage, as with most Office applications, there are multiple ways to execute actions. All can be done using the menus at the top. There are also icons in the toolbar and shortcut keys. Feel free to use any method -- it is a matter of personal preference.
When Frontpage loads, it should begin a new document. If it does not, select New from the File menu or click the New icon (white page) or use the right mouse button.
Click on the page you are working on. It is the large window on the right side. Here is where the layout of your page can be set up. Most things you can do with FrontPage will be set up in this area. This is roughly how your page will look like in the browser window. The term for this is WYSIWYG, or what you see is what you get (mostly).
We'll start by creating a title header for the page. Type "My Web" on the page.
Now, using the mouse, highlight the text. We will give this text large header characteristics.
On your toolbar, click on the pull-down box all the way on the left in the third row that should say (None) right now. This allows you to change the type of text that is highlighted. Click on Header 1. Header 1 or H1 is the largest header tag.
Now we will italicize it. While still highlighted, click the italics icon or press Ctrl+I.
Underline it as well -- underline icon or Ctrl+U
To center this header, click the center icon
Note: In practice, you can select the text features/modifications prior to typing the text.
Click at the end to remove the highlight and skip a line or two.
Change the header to back to (None) and disable any modifications you have (e.g., underline).
Now type your name. It should be in normal text - if it is not, make it so.
Now bold the text (ctrl+b) and right-align it.
Change the font and the font size.
Now you know how to control basic text modifications (bold, italics, underline, alignment, font, size).
Under your name, add today's date. You can add a date that updates automatically by going to Insert -- Date and Time. Choose the default format (date page was last updated, date only).
Align this right as well. We'll change the color of this text.
Highlight it and use the color button (There is an A with a black bar under it). Set the text color to red.

Hyperlinks

Hyperlinks will connect your page to another web document. When you click on a hyperlink, the web browser requests a certain url that you specify.
We will make a text hyperlink to the class webpage.
Underneath the date, type in "Complit Homepage" -- this is the text that will serve as the hyperlink. When choosing the text, make it descriptive, so the reader knows where the link will go.
Select the text you just typed using the mouse.
On the menu bar, go to Insert -- Hyperlink
In the field for "URL" copy the url for the class homepage from your browser & paste it here
Click ok - now the words "Complit Homepage" are a hyperlink (and are formatted to be blue and underlined)
When you put the pointer over the words, the address appears at the bottom (in the Status bar).
If you click on the "Preview" tab at the bottom, you will see what your page will look like. The hyperlink will work if you click it. Frontpage 2000 (as well as Word and Excel) will serve as a browser and request documents! (Older versions will not)
Go back to the "Normal" tab and left-align the text so we can add some more items.

Images

Most web pages use images. We will too.
Right click this image and select Save Image. Save this to the temp directory on the C: drive.
Now in frontpage, we'll display the picture. To center it, click the center icon
Skip a few lines to prevent clutter.
From the menu, click Insert -- Picture -- From File...
Navigate through to your temp file and find the image. Click ok and the image will appear.
In order for us to display an image, we must actually have the image file accessible.
You can display as many images as you like.
Images can be links. Follow the same method, but use the image instead of text. Make this image a link to the JHU homepage (www.jhu.edu).
Check using the Preview window to see that your link works when you click the image.
Here is a good time to mention copyrights and the web. If something is original and copyrighted, you cannot legally grab it off the web and post it on your page. There are plenty of free images with no strings attached. If you use images for this class, please use free images so no one gets arrested.

Tables

Now we'll insert a table. Tables are very useful for organizing content.
But first, let's throw in a separator so we stay organized.
We do this by going under the Insert menu. Choose Horizontal line. This will put a horizontal line on the screen.
Now we are going to add a table. Go to the menu and choose Table -- Insert -- Table.
A window will appear. Set the Size (the number of rows and columns our table will have) to 2 rows and 2 columns.
Specify a width of 50 for the table by making sure the "In percent" radio button is clicked and typing 50 in the text box next to it.
We now have a table. Select the entire table and set the font alignment to right.
In the four cells, type in the four seasons.
Use your text modifying abilities to make each word a different font.
Make each box a different color. Change the color of a field by highlighting the field and right clicking.
Set the color of fall to orange. Summer to yellow. Winter to blue. Spring to green.
Text hard to read? Try changing the text color (remember how?)
In the table fields, you can have text, hyperlinks, or images.

Lists

Frontpage allows you to add lists to your web page.
There are two major types of lists. One is an ordered list. The other is an unordered list.
An unordered list is like a bulleted list.
When you select an unordered list, type in the word "apple"
It appears as a bullet. Then hit return and type orange, this is the second bullet.
Hit return twice to exit the unordered list, or hit return and backspace.
Skip a line and we'll add an ordered list. An ordered list is ordered. It is like an outline.
Select ordered list and add three items - football, baseball, and basketball.
Now right click on your ordered list. If you select list item properties, you can change the way it is numbered. Instead of numbers, you can have letters, roman numerals, etc.
You can also do this from list properties. Here, you can create nested lists and definition lists as well.
Now we have enough for our web page.

Publishing

To wrap this up, go to File and select Save As...
Save this as hw2.html in your temp directory.
To publish it, we must put it in our public_html directory in our JHUNIX (or hops) account, right?
The files we want to move are the web page and the image
These files are in the temp directory now. They must be moved to public_html in our JHUNIX account.
Use SCP to transfer the hw2.html page and the picture (pic.jpg) in the temp directory to your public_html directory.
Now view it (http://jhunix.hcf.jhu.edu/~login/hw2.html). If you are having problems viewing your page (e.g., "You are not authorized to view this page")on JHUNIX, you will need to go into SCP and change these permissions so that everyone can see you page.
To change permissions, just click on the folder/file you want to change, then right-click, then choose CHMOD. Give folders leading up to your file (e.g., public_html) read and execute permissions for all three types of users, and give your webpage and picture read permissions for everyone. Your page should now be viewable.
On Monday, we will have you put a picture of yourself (taken with the camera in the lab) on the page & have the picture link to the course homepage.