IS 340 Dept. of IMDS Western Illinois University

Html Exercise Amaravadi

A CONCEPTUAL SUMMARY OF HTML

HTML is a tagging language. In HTML text is “tagged” with different types of tags to create a variety of effects such as bold, color etc. Most tags have a start marked by angled brackets (e.g. <start tag>) and an end marked with a forward slash and angled brackets (e.g. </end tag>). Thus <B> Bolded text </B> creates bolding for Bolded text. Some tags such as Break (<BR>) do not have closing tags. Some of the common tags are:

STRUCTURE TAGS

<TI> Title that will appear to search engines </TI> --- Window Title.

<Hn> Heading 1,2 or.. n </Hn> --- Headings.

<OL> Ordered list </OL> --- Ordered list, followed by list items

<UL> Un Ordered list </UL> --- Un ordered list.

<LI> List items </LI> --- Items in the ordered list.

<BODY> Body of the web site </BODY> --- Body of the web site.

<BODY BGCOLOR = LTGREY> Body </BODY> --- Same, with light grey background.

FORMAT TAGS

<B> text to be bolded </B> --- Bolding.

<P> text…. </P> --- Paragraph.

<BR> (there is no </BR> for this tag) --- Line breaks.

<Table> </Table> --- to mark begin & end of table.

<TR> </TR> --- Table row

<SPACER TYPE=HORIZONTAL (or VERTICAL) SIZE = N> --- For creating spacing.

HYPERLINK TAGS

<A Href = “URL or link address”> </A> --- Links to other web sites.

<A Href = “URL or link address”>LINK </A> --- Same, with a mouse-able link.

<IMG SRC="logo.jpg" height = 100 width = 600> --- Links to image files.

HTML GOODIES(FOR COLORS)

http://www.htmlgoodies.com/tutorials/colors/article.php/3478961

EXERCISE

In this assignment which is intended to give you an idea of html:

1) Read notes above

2) You will create a primitive web site using “notepad” application, found under “accessories.” Start notepad and open a “new” file.

3) The file will have

<html>

<body>

You need to identify and insert color tags here (what is the command?)

You need to identify and insert a heading tag here (what is the command?)

You need to identify and insert a secondary heading here (what is the command?)

You need to identify and insert a list of items here (what are the commands?)

You need to identify and insert a picture here (what is the command?)

You need to identify and insert a hyperlink here (what is the command?)

</body>

</html>

4) The website will have a heading, text description, a picture, a list (product items) and external links. Please Use a light background color. Items other than headings can be in any order.

5) You will be on your own except for the commands above.

6) Save your file as myfile.htm where myfile is the name of your file, make sure that you save the image file in the same directory as myfile.htm.

7) Ship it to your user account using the WS-FTP program and set permissions by going to wiu.edu/guava.

EXPORT YOUR FILES

You will have to use a communications software such as WinScp or WSFTP to upload your files.

The principle in either is simple. Once you login it shows local (your machine) and remote (i.e. the host machine) directories. In the case of WSFTP, you select the files and select and press the arrow key. In the case of WinScp, the process is similar, but you have to drag files to the destination folder.

WS-FTP LOGIN PANEL

WSFTP MAIN SCREEN

SET SECURITY

Go to https://www.wiu.edu/guava/ and login with your user name and password.

You need to also give permissions to view the site. Log into the http://www.wiu.edu/ECOM/ and select “GUAVA.” It asks you for user name and password. Once you are logged into ECOM, go into “web services” and FIX the web site permissions. It will acknowledge that it has correctly set the permissions so that others can view the web site. If permissions fails, this means you don’t have your files in the proper directory and you need to go back into the WSFTP, and check that the files are in the right directory. Then you need to go back into web permissions and set them.

SUBMISSION

When you have exported the file to your web site, you can view it by typing www.wiu.edu/users/xxxx/yyyy.htm where xxxx is your username (such as gf101) and yyyy.htm is the name of your html file (e.g. supercars.htm).