Lecture Summaries class 3

Prepared by: Anthony Larrain

These notes serve as an outline to the lecture, they are not intended to be complete.

Recap of Lab1

You should know how to do the following:

Create directories and sub directories on your local system.
View a web page given the URL
View the HTML code, also called source code, of an existing web page. To view the source code:
- Right click on the web page
- Select View Source

Given an HTML file view the web page through your browser locally.

Know how to create a simple web page using the following HTML tags:

      html  head  title  body  h1  p  br  li  ul

More on HTML

HTML is not case sensitive. The tags <BR> and <br> have the same meaning. In order to comply with W₃C we will always use lowercase for tags. Plus it is easier to read and type.

All tags should have a closing tag. Closing tags begin with a forward slash '/'

HTML flows on the screen from left to right to fill up as much of the screen as possible. HTML tags are used to interrupt that flow for better design. This was the point of Lab1, question 4.

HTML tags are recommendations to the browser, there is never a guarantee your web page will always look the same in all browsers. Hence the need for standards. Things are better now then 5 years ago. Call up lab1 in both Internet Explorer and Netscape. Notice how the acronyms are being displayed differently.

Start tags can contain additional codes, called attributes used to: supply additional information to the tag

For example

<h1 align="center"> My First Page </h1>

Each attribute align has a value center separated by an equals symbol. The value should be enclosed in quotes (Standards).

See example center.html

More Tags

The font tag lets you change the face, size and color of the text it encloses. face size and color are attributes. A tag can contain more that one attribute. Attributes must be separated by at least one space.

See example font.html

Six heading tags h1 h2 h3 h4 h5 h6

The anchor tag, denoted by a This allows your page to link to another web page, that is create hyperlinks. There are several attributes you can use with the anchor tag, the one we focus on is the href attribute.

See example hyperlink.html

Notice the href attribute requires the complete URL. The complete URL is required when the web page is not part of your web space.

Horizontal rule the hr tag
italic tag, denoted <i> italic typeface.
The strong tag used for boldface
Order list the ol tag, an ordered list.
Definition lists the dl tag. Instead of using the li you use the dt followed by the dd tag.

See example deflist.html

The body tag allows for several attributes that can be used to change the background color, font color, hyperlink color.

For example

<body bgcolor="aqua"> sets the background color for the whole page. <body text="black"> sets the text color for the whole page <body link="red"> sets the unvisited link color. <body vlink="green"> sets the visited link color for the page as a whole.

For the body tag if one attribute is present they all should be included.

When choosing color there needs to be a "fair" amount of contrast so pages can be more readable for all visual users. We will talk more about this later.

Using Search Engines To Find Information

There are plenty of online sources to help you with, HTML, CSS, FrontPage, Web design etc ... Get into the habit of using one of them. Yahoo or Google.

For example to find out more about colors available to use, go to a search engine and type in:

web colors Or html colors

Publishing your pages online so the world can see them.

In order to get your files from your computer to your students account, called shrike, we will use a program called SSH. SSH stands for Secure Shell. It is a program that allows you to log into another computer over a network. You will use this program to transfer your files to and from Shrike and create directories on Shrike.

All files and directories must be in a directory called public_html.

This program is available in the labs. Typically it can be found by selecting Start / Internet Applications /SSH secure shell / secure file transfer client

To use SSH for File Upload:

Start SSH
Connect to Shrike

Click on Quick Connect.
In the Connect to Remote Host dialog, fill in the host name students.depaul.edu and your user name.
Click on the Connect button.
Enter your password.
See if the public_html directory is available

To create a directory on Shrike.
- Create it with the New Folder toolbar button or right click on the right panel.
- Right click on the folder and select Properties.
To upload a file, select it from the left and drag it to the right or right click the file and select upload.

To download SSH go to Resources

I will go through this in lab. If you need more assistance read this document. More about SSH In this document replace the word condor with students. We will go through this in lab.

HCI 201 - Multimedia and the World Wide Web

Lecture Summaries class 3

Recap of Lab1

More on HTML

Using Search Engines To Find Information

Publishing your pages online so the world can see them.