A simple example An HTML file is a text (ASCII) file in a special format: Charles Ling's home page...

A simple exampleAn HTML file is a text (ASCII) file in a special format:

<html><head><title>Charles Ling's home page</title></head>

<body><h1>My first and simple home page</h1>

<p>My name is <b>Charles Ling</b>

<p>Here is how I look like <IMG SRC=c_ling2.jpg width=30>

<p>My favourite things to do are<ul><li>Adventurous travelling around the world, starting from<a href="http://www.travelocity.ca">here</a><li>Shopping <a href="http://www.amazon.com">on-line</a></ul>… …

Building HTML files

Writing HTML files directly (using Notepad or other text editors)

Using Microsoft Word and saving it as web page

Using specialized software: Microsoft Frontpage, Macromedia Dreamweaver, etc. Adding animations, forms, java, javascript,

database functionality, etc.

Writing simple HTML files

Start notepad and write HTML code directly

“Save as” an HTML file (e.g., my.html) Start browser (e.g., Internet Explore) Click File > Open, click Browse to locate

and open the HTML file (e.g., my.html) You will see how the html file is

displayed on your PC You need to “publish” it on a web server

so people around the world can see it!

Learn from other people’s WebPages

View the page in your browser (IE) Click View > Source, you can see html

source codes (usually seems to be complicated if generated from software)

You can also save the page and images on your PC, by File > Save as

The structure of an HTML file

HTML files must employ a simple format so anyone can create web pages

HTML files is a simple text file that can be created using any editor that allows you to save the document as a text file

The structure of an HTML file

To combine the content and the presentation instructions in the same file, there must be a way to distinguish between these two components

In HTML, the presentation instructions are inserted as “tags”

Anything that isn’t a presentation instruction is content

HTML is not WYSIWYG (What you see is what you get)

HTML Tags

HTML tags normally occur in pairs The pair of tags surrounds the content

to which they apply A start tag is indicated with angle

brackets: <TAG> An end tag is indicated with a slash

after the opening angle bracket: </TAG>

HTML Tags (continued)

HTML has a set of predefined tags These tags can be used to

Control how the text in the document is displayed

Insert images into the document Insert links to other documents

Document tags

The entire HTML document is enclosed within the <HTML> and </HTML> tags

Every HTML document will have a head and a body

The document head is enclosed within the <HEAD> and </HEAD> tags

The body is enclosed within the <BODY> and </BODY> tags

Basic HTML Structure

The basic structure of an HTML document is:

</HTML>

<HEAD>

<TITLE>Basic HTML Structure</TITLE>

</HEAD>

<BODY>

. . .

</BODY>

</HTML>

The <TITLE> within the <HEAD> is displayed in the title bar of the browser

The HEAD and BODY tags

The <HEAD> of the document contains information used by the browser

All of the content for the document and the associated presentation instructions are placed inside the <BODY> tags

Formatting Tags

HTML contains tag definitions that allow you to control Headings Style Ordered Lists Unordered Lists Definition Lists etc.

Heading Tags

There are six heading levels The levels are named H1, H2, H3, …, H6

where H1 is the largest and H6 is the smallest

To create a heading, you enclose the text of the heading inside the opening and closing tags for the heading level

Headings example

<BODY>

<H1>Heading H1</H1>

<H2>Heading H2</H2>

<H3>Heading H3</H3>

<H4>Heading H4</H4>

<H5>Heading H5</H5>

<H6>Heading H6</H6>

</BODY>

Formatting tags

Formatting tags are used to control the display of text:

<I> - italics

<B> - bold <U> - underline <TT> - typewriter type face

Formatting example

When a <U>browser</U> presents a <B>web</B> document, the browser <I>scans the document</I> and applies the <TT>presentations instructions</TT>to the content

More examples

The above tags can be nested:

<B><U>Bold underlined text</U></B>

Layout Style Tags

Used to control text layout <CENTER> - center the text <P> - new paragraph <BR> - break, start a new line <HR> - horizontal rule, draw a line

Layout example<P>This is the first paragraph. Notice the spacebetween this paragraph and the next one.</P><P>This is a second paragraph. We can insert a linebreak by using the tag <CODE>BR</CODE>.<BR>This is a new line.</P><CENTER>Finally this is some centered text and ahorizontal rule.</CENTER><HR>

Lists

Lists of data can be defined using Ordered List – enumerated lists Unordered List – bulleted lists Definition List – lists that are made of terms

and their associated definitions

Ordered List

Use the <OL> and </OL> tags to start and end an ordered list

Within the ordered list, the list item (<LI>) tag is used to indicate the items on the list

The VALUE tag can be used to set the value of a list item

The START parameter is used to control the value of the first item

Ordered list types

The TYPE parameter controls what enumeration scheme is used

The types are: 1 – numbers (default) a – lower case letters A – upper case letters i – small Roman numerals I – large Roman numerals

Ordered list example 1

<OL>

<LI>Sunday<LI>Monday<LI>Tuesday<LI>Wednesday<LI>Thursday<LI>Friday<LI>Saturday

</OL>


<OL START=2 TYPE=A>

<LI>Sunday<LI>Monday<LI VALUE=6>Tuesday<LI>Wednesday<LI>Thursday<LI>Friday<LI>Saturday

</OL>


<OL START=1 TYPE=I>

<LI>Sunday<LI>Monday<LI VALUE=5>Tuesday<LI VALUE=10>Wednesday<LI>Thursday<LI>Friday<LI VALUE=50>Saturday

</OL>

Unordered List

Use the <UL> and </UL> tags to start and end an unordered list

Within the unordered list, the list item (<LI>) tag is used to identify the items on the list

The TYPE parameter can be used to control the look of the list• Disc – a solid disc• Circle – a hollow circle• Square – a square symbol

Unordered list example 1

<UL TYPE=DISC>


</UL>

Unordered list example 2

<UL TYPE=CIRCLE>


</UL>

More examplesAs usual with HTML tags, the list tags can be

nested:

<OL><LI>Sunday<LI>Monday<LI>Tuesday<LI>Wednesday<LI>Thursday<LI>Friday

<UL><LI>Friday Morning<LI>Friday Afternoon<LI>Friday Evening</UL>

<LI>Saturday</OL>

Images

Images are added to documents using the <IMG> tag

A </IMG> tag is not required The SRC parameter is used to indicate

the SouRCe of the image

Standard Image Formats

Examples of image formats used on the Web are: GIF – Graphics Interchange Format JPG ( JPEG ) – Joint Photographic Experts

Group BMP – Windows Bitmap

Graphics Interchange Format

Uses the Lempel-Ziv Welch (LZW) compression algorithm

The algorithm compresses regularities in the image data

This number of colors in the image cannot be greater than 256

This format is used when the image does not contain a wide range of colors or color shades

http://yoyo.cc.monash.edu.au/~davmac/algrthm/lzw.htm

Joint Photographic Experts Group

Images can contain millions of colors Uses Lossy compression algorithm

When the image is compressed it permanently loses some of its quality

The loss of quality can be imperceptible to the human eye

The loss of quality can be adjusted at the price of final image size: images with better quality will be larger than images with lower quality

This format is used when the image contains many colors and many color shades

Very common in web pages

Windows Bitmap

Every pixel in the image is represented by a piece of data

The data represents the color of the pixel

No compression means bitmap images are very large

Rarely used on Web pages because of the time required to download the image

Image example

<IMG SRC=midsex1.jpg>

URL

An URL is a Uniform Resource Locator An URL contains information about

The address of a document on the Internet The protocol that will be used to access the

document

Protocols

HTTP – HyperText Transfer Protocol Designed to transmit files on the WWW http://www.csd.uwo.ca

FTP – File Transfer Protocol Designed to transmit files over the Internet

(before the Web developed) ftp://ftp.csd.uwo.ca

E-mail: mailto:[email protected]

These protocols are sets of rules that dictate how files are transmitted between computers

Examples URL of HTTP

http://www.uwo.ca/selected/browse.html

The document is “browse.html” and it is located in the “selected” folder at the World Wide Web site for UWO in Canada

http://www.csd.uwo.ca/faculty/cling

By default, “index.html” is retrieved in the folder “faculty/cling/” at the web server www.csd.uwo.ca

Anchors

Anchor tags (<A> and </A>) are used to insert hyperlinks and bookmarks into HTML documents

A hyperlink is a link to another document on the World Wide Web

A bookmark is a named location within an HTML document

Anchors as links

A link is declared by using an A tag with a HREF attribute.

The HREF (Hypertext REFerence parameter) is the URL of the link destination.

The content inside the <A> tag and </A> tag will be displayed and will activate the link when clicked.

Link example

<A HREF="http://www.uwo.ca">UWO</A>

will display a link with the text UWO that will take the browser to the UWO web site

Images as links

The content inside the <A> and </A> tags can be an image:

<A HREF="http://www.uwo.ca">

<IMG SRC="http://www.csd.uwo.ca/images/midsex1.jpg">

</A>

Anchors as bookmarks

A bookmark is an A tag with a NAME attribute.

A bookmark is usually invisible If the bookmark is within the same

document, it can referred by # followed by the NAME of the bookmark.

Links and bookmarks within the same (long) document

<A NAME="top"></A>Go to <A HREF="#cog">papers on cognitive science</A>...<A NAME="cog"></A><H2>Papers on cognitive science start from here</H2>... <A HREF="#top">Back to top</A>

Links to bookmarks in other documents

The general syntax is:<A HREF="URL#Bookmark">Link Item</A>

Example:Click <a href=“http://www.csd.uwo.ca/faculty/cling/papers.html#cog”>

here</a> to see the cognitive science papers

You can see a working example at:http://www.csd.uwo.ca/faculty/cling/cs031/simple.html

http://www.csd.uwo.ca/faculty/cling/cs031/simple.html

Tables in HTML The tag <TABLE> marks the beginning of a table

declaration and the tag </TABLE>, its end The attribute BORDER of the <TABLE> tag controls

the width of the table border Tables are declared one row at the time. A

row declaration is enclosed within the <TR> and </TR> tags

A row declaration contains one or more cells. A cell is specified using the tags <TD> and </TD>

The content inside the TD tags will be displayed as the content of the cell

Table example

<TABLE BORDER=1>

<TR>

<TD>Row 1, Cell 1</TD>



</TR>

<TR>




</TR>

</TABLE>

Advanced table layout

Cell can be merged horizontally or vertically by using the ROWSPAN and COLSPAN attributes of the TD tag

The ROWSPAN attribute indicates how many rows the cell spans horizontally

The COLSPAN attribute indicates how many columns the cell spans vertically

Advanced layout example<TABLE BORDER=1><TR>

<TD ROWSPAN=3><IMG SRC="http://www.csd.uwo.ca/images/midsex1.jpg"></TD><TD>Top</TD>

</TR><TR>

<TD>Middle</TD></TR><TR>

<TD>Bottom</TD></TR></TR></TABLE>

Web Page Example 1

Create a Web page with “My First Web Page” as the title Your name as a level 2 heading An enumerated list of your three favorite

University courses An image for the University. Use http://www.uwo.ca/gifs/uwologo4.gif as the source URL.

Web Page Example 2

Create a Web Page with A TV show name as a level 1 heading at the

top of the page A paragraph of text about the show

Bold the stars names and italicize the night that the show is broadcast within this text

A horizontal line A link to a Web page for the show. Use the

name of the show as the link text A horizontal line A link to the heading at the top of the page,

using “Top” as the link text

Advanced HTML Editors

MS Word can be saved as html. But it is document oriented software and does not have access to the more advanced HTML features: animations Forms Scripting

Websites with large number of web pages are not easy to create and manage using Word

Dedicated software packages: Macromedia Dreamweaver and Microsoft Frontpage, among others

How to publish your web page on the UWO server

Detailed instructions are available at:http://www.uwo.ca/its/doc/hdi/web/personalpage.html

Step by step instructions:1. Open a Command Prompt2. Start the telnet program by typing

telnet panther.uwo.ca

3. Type your user name and password as instructed

4. Type the command publish: this will create a folder named public_html which will hold all your files and a default page in this folder named index.html

http://www.uwo.ca/its/doc/hdi/web/personalpage.html

5. At this point, the default web page is available at the address:http://publish.uwo.ca/~login-name/ where login-name is your user name.

6. Type logout to exit telnet7. You can transfer your file to the web server

by using the ftp program8. Rename your web page index.html.9. Type ftp at the command prompt to start

the file transfer program.10. You will be asked to enter your user name

and password11. Use the command lcd (local change

directory) to change the current local folder to the location of your web page

12. Type cd public_html to change the server's current folder to the location of your web page.

13. Type put index.html to transfer this file to the server. If you have other files (images), “put” these files to the server as well.

14. Type bye to exit the ftp program15. Check your results at

http://publish.uwo.ca/~login-name/

(By default, it looks for index.html)

A simple example An HTML file is a text (ASCII) file in a special format: Charles Ling's home page...

Documents

Transcript of A simple example An HTML file is a text (ASCII) file in a special format: Charles Ling's home page...