A simple example An HTML file is a text (ASCII) file in a special format: Charles Ling's home page...
-
Upload
lenard-paul -
Category
Documents
-
view
225 -
download
2
Transcript of A simple example An HTML file is a text (ASCII) file in a special format: Charles Ling's home page...
![Page 1: A simple example An HTML file is a text (ASCII) file in a special format: Charles Ling's home page My first and simple home page My name is Charles Ling.](https://reader033.fdocuments.us/reader033/viewer/2022050714/56649e265503460f94b15c4a/html5/thumbnails/1.jpg)
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>… …
![Page 2: A simple example An HTML file is a text (ASCII) file in a special format: Charles Ling's home page My first and simple home page My name is Charles Ling.](https://reader033.fdocuments.us/reader033/viewer/2022050714/56649e265503460f94b15c4a/html5/thumbnails/2.jpg)
![Page 3: A simple example An HTML file is a text (ASCII) file in a special format: Charles Ling's home page My first and simple home page My name is Charles Ling.](https://reader033.fdocuments.us/reader033/viewer/2022050714/56649e265503460f94b15c4a/html5/thumbnails/3.jpg)
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.
![Page 4: A simple example An HTML file is a text (ASCII) file in a special format: Charles Ling's home page My first and simple home page My name is Charles Ling.](https://reader033.fdocuments.us/reader033/viewer/2022050714/56649e265503460f94b15c4a/html5/thumbnails/4.jpg)
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!
![Page 5: A simple example An HTML file is a text (ASCII) file in a special format: Charles Ling's home page My first and simple home page My name is Charles Ling.](https://reader033.fdocuments.us/reader033/viewer/2022050714/56649e265503460f94b15c4a/html5/thumbnails/5.jpg)
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
![Page 6: A simple example An HTML file is a text (ASCII) file in a special format: Charles Ling's home page My first and simple home page My name is Charles Ling.](https://reader033.fdocuments.us/reader033/viewer/2022050714/56649e265503460f94b15c4a/html5/thumbnails/6.jpg)
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
![Page 7: A simple example An HTML file is a text (ASCII) file in a special format: Charles Ling's home page My first and simple home page My name is Charles Ling.](https://reader033.fdocuments.us/reader033/viewer/2022050714/56649e265503460f94b15c4a/html5/thumbnails/7.jpg)
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)
![Page 8: A simple example An HTML file is a text (ASCII) file in a special format: Charles Ling's home page My first and simple home page My name is Charles Ling.](https://reader033.fdocuments.us/reader033/viewer/2022050714/56649e265503460f94b15c4a/html5/thumbnails/8.jpg)
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>
![Page 9: A simple example An HTML file is a text (ASCII) file in a special format: Charles Ling's home page My first and simple home page My name is Charles Ling.](https://reader033.fdocuments.us/reader033/viewer/2022050714/56649e265503460f94b15c4a/html5/thumbnails/9.jpg)
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
![Page 10: A simple example An HTML file is a text (ASCII) file in a special format: Charles Ling's home page My first and simple home page My name is Charles Ling.](https://reader033.fdocuments.us/reader033/viewer/2022050714/56649e265503460f94b15c4a/html5/thumbnails/10.jpg)
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
![Page 11: A simple example An HTML file is a text (ASCII) file in a special format: Charles Ling's home page My first and simple home page My name is Charles Ling.](https://reader033.fdocuments.us/reader033/viewer/2022050714/56649e265503460f94b15c4a/html5/thumbnails/11.jpg)
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
![Page 12: A simple example An HTML file is a text (ASCII) file in a special format: Charles Ling's home page My first and simple home page My name is Charles Ling.](https://reader033.fdocuments.us/reader033/viewer/2022050714/56649e265503460f94b15c4a/html5/thumbnails/12.jpg)
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
![Page 13: A simple example An HTML file is a text (ASCII) file in a special format: Charles Ling's home page My first and simple home page My name is Charles Ling.](https://reader033.fdocuments.us/reader033/viewer/2022050714/56649e265503460f94b15c4a/html5/thumbnails/13.jpg)
Formatting Tags
HTML contains tag definitions that allow you to control Headings Style Ordered Lists Unordered Lists Definition Lists etc.
![Page 14: A simple example An HTML file is a text (ASCII) file in a special format: Charles Ling's home page My first and simple home page My name is Charles Ling.](https://reader033.fdocuments.us/reader033/viewer/2022050714/56649e265503460f94b15c4a/html5/thumbnails/14.jpg)
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
![Page 15: A simple example An HTML file is a text (ASCII) file in a special format: Charles Ling's home page My first and simple home page My name is Charles Ling.](https://reader033.fdocuments.us/reader033/viewer/2022050714/56649e265503460f94b15c4a/html5/thumbnails/15.jpg)
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>
![Page 16: A simple example An HTML file is a text (ASCII) file in a special format: Charles Ling's home page My first and simple home page My name is Charles Ling.](https://reader033.fdocuments.us/reader033/viewer/2022050714/56649e265503460f94b15c4a/html5/thumbnails/16.jpg)
Formatting tags
Formatting tags are used to control the display of text:
<I> - italics
<B> - bold <U> - underline <TT> - typewriter type face
![Page 17: A simple example An HTML file is a text (ASCII) file in a special format: Charles Ling's home page My first and simple home page My name is Charles Ling.](https://reader033.fdocuments.us/reader033/viewer/2022050714/56649e265503460f94b15c4a/html5/thumbnails/17.jpg)
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
![Page 18: A simple example An HTML file is a text (ASCII) file in a special format: Charles Ling's home page My first and simple home page My name is Charles Ling.](https://reader033.fdocuments.us/reader033/viewer/2022050714/56649e265503460f94b15c4a/html5/thumbnails/18.jpg)
More examples
The above tags can be nested:
<B><U>Bold underlined text</U></B>
![Page 19: A simple example An HTML file is a text (ASCII) file in a special format: Charles Ling's home page My first and simple home page My name is Charles Ling.](https://reader033.fdocuments.us/reader033/viewer/2022050714/56649e265503460f94b15c4a/html5/thumbnails/19.jpg)
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
![Page 20: A simple example An HTML file is a text (ASCII) file in a special format: Charles Ling's home page My first and simple home page My name is Charles Ling.](https://reader033.fdocuments.us/reader033/viewer/2022050714/56649e265503460f94b15c4a/html5/thumbnails/20.jpg)
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>
![Page 21: A simple example An HTML file is a text (ASCII) file in a special format: Charles Ling's home page My first and simple home page My name is Charles Ling.](https://reader033.fdocuments.us/reader033/viewer/2022050714/56649e265503460f94b15c4a/html5/thumbnails/21.jpg)
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
![Page 22: A simple example An HTML file is a text (ASCII) file in a special format: Charles Ling's home page My first and simple home page My name is Charles Ling.](https://reader033.fdocuments.us/reader033/viewer/2022050714/56649e265503460f94b15c4a/html5/thumbnails/22.jpg)
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
![Page 23: A simple example An HTML file is a text (ASCII) file in a special format: Charles Ling's home page My first and simple home page My name is Charles Ling.](https://reader033.fdocuments.us/reader033/viewer/2022050714/56649e265503460f94b15c4a/html5/thumbnails/23.jpg)
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
![Page 24: A simple example An HTML file is a text (ASCII) file in a special format: Charles Ling's home page My first and simple home page My name is Charles Ling.](https://reader033.fdocuments.us/reader033/viewer/2022050714/56649e265503460f94b15c4a/html5/thumbnails/24.jpg)
Ordered list example 1
<OL>
<LI>Sunday<LI>Monday<LI>Tuesday<LI>Wednesday<LI>Thursday<LI>Friday<LI>Saturday
</OL>
![Page 25: A simple example An HTML file is a text (ASCII) file in a special format: Charles Ling's home page My first and simple home page My name is Charles Ling.](https://reader033.fdocuments.us/reader033/viewer/2022050714/56649e265503460f94b15c4a/html5/thumbnails/25.jpg)
Ordered list example 2
<OL START=2 TYPE=A>
<LI>Sunday<LI>Monday<LI VALUE=6>Tuesday<LI>Wednesday<LI>Thursday<LI>Friday<LI>Saturday
</OL>
![Page 26: A simple example An HTML file is a text (ASCII) file in a special format: Charles Ling's home page My first and simple home page My name is Charles Ling.](https://reader033.fdocuments.us/reader033/viewer/2022050714/56649e265503460f94b15c4a/html5/thumbnails/26.jpg)
Ordered list example 3
<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>
![Page 27: A simple example An HTML file is a text (ASCII) file in a special format: Charles Ling's home page My first and simple home page My name is Charles Ling.](https://reader033.fdocuments.us/reader033/viewer/2022050714/56649e265503460f94b15c4a/html5/thumbnails/27.jpg)
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
![Page 28: A simple example An HTML file is a text (ASCII) file in a special format: Charles Ling's home page My first and simple home page My name is Charles Ling.](https://reader033.fdocuments.us/reader033/viewer/2022050714/56649e265503460f94b15c4a/html5/thumbnails/28.jpg)
Unordered list example 1
<UL TYPE=DISC>
<LI>Sunday<LI>Monday<LI>Tuesday<LI>Wednesday<LI>Thursday<LI>Friday<LI>Saturday
</UL>
![Page 29: A simple example An HTML file is a text (ASCII) file in a special format: Charles Ling's home page My first and simple home page My name is Charles Ling.](https://reader033.fdocuments.us/reader033/viewer/2022050714/56649e265503460f94b15c4a/html5/thumbnails/29.jpg)
Unordered list example 2
<UL TYPE=CIRCLE>
<LI>Sunday<LI>Monday<LI>Tuesday<LI>Wednesday<LI>Thursday<LI>Friday<LI>Saturday
</UL>
![Page 30: A simple example An HTML file is a text (ASCII) file in a special format: Charles Ling's home page My first and simple home page My name is Charles Ling.](https://reader033.fdocuments.us/reader033/viewer/2022050714/56649e265503460f94b15c4a/html5/thumbnails/30.jpg)
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>
![Page 31: A simple example An HTML file is a text (ASCII) file in a special format: Charles Ling's home page My first and simple home page My name is Charles Ling.](https://reader033.fdocuments.us/reader033/viewer/2022050714/56649e265503460f94b15c4a/html5/thumbnails/31.jpg)
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
![Page 32: A simple example An HTML file is a text (ASCII) file in a special format: Charles Ling's home page My first and simple home page My name is Charles Ling.](https://reader033.fdocuments.us/reader033/viewer/2022050714/56649e265503460f94b15c4a/html5/thumbnails/32.jpg)
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
![Page 33: A simple example An HTML file is a text (ASCII) file in a special format: Charles Ling's home page My first and simple home page My name is Charles Ling.](https://reader033.fdocuments.us/reader033/viewer/2022050714/56649e265503460f94b15c4a/html5/thumbnails/33.jpg)
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
![Page 34: A simple example An HTML file is a text (ASCII) file in a special format: Charles Ling's home page My first and simple home page My name is Charles Ling.](https://reader033.fdocuments.us/reader033/viewer/2022050714/56649e265503460f94b15c4a/html5/thumbnails/34.jpg)
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
![Page 35: A simple example An HTML file is a text (ASCII) file in a special format: Charles Ling's home page My first and simple home page My name is Charles Ling.](https://reader033.fdocuments.us/reader033/viewer/2022050714/56649e265503460f94b15c4a/html5/thumbnails/35.jpg)
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
![Page 36: A simple example An HTML file is a text (ASCII) file in a special format: Charles Ling's home page My first and simple home page My name is Charles Ling.](https://reader033.fdocuments.us/reader033/viewer/2022050714/56649e265503460f94b15c4a/html5/thumbnails/36.jpg)
Image example
<IMG SRC=midsex1.jpg>
![Page 37: A simple example An HTML file is a text (ASCII) file in a special format: Charles Ling's home page My first and simple home page My name is Charles Ling.](https://reader033.fdocuments.us/reader033/viewer/2022050714/56649e265503460f94b15c4a/html5/thumbnails/37.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
![Page 38: A simple example An HTML file is a text (ASCII) file in a special format: Charles Ling's home page My first and simple home page My name is Charles Ling.](https://reader033.fdocuments.us/reader033/viewer/2022050714/56649e265503460f94b15c4a/html5/thumbnails/38.jpg)
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
![Page 39: A simple example An HTML file is a text (ASCII) file in a special format: Charles Ling's home page My first and simple home page My name is Charles Ling.](https://reader033.fdocuments.us/reader033/viewer/2022050714/56649e265503460f94b15c4a/html5/thumbnails/39.jpg)
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
![Page 40: A simple example An HTML file is a text (ASCII) file in a special format: Charles Ling's home page My first and simple home page My name is Charles Ling.](https://reader033.fdocuments.us/reader033/viewer/2022050714/56649e265503460f94b15c4a/html5/thumbnails/40.jpg)
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
![Page 41: A simple example An HTML file is a text (ASCII) file in a special format: Charles Ling's home page My first and simple home page My name is Charles Ling.](https://reader033.fdocuments.us/reader033/viewer/2022050714/56649e265503460f94b15c4a/html5/thumbnails/41.jpg)
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.
![Page 42: A simple example An HTML file is a text (ASCII) file in a special format: Charles Ling's home page My first and simple home page My name is Charles Ling.](https://reader033.fdocuments.us/reader033/viewer/2022050714/56649e265503460f94b15c4a/html5/thumbnails/42.jpg)
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
![Page 43: A simple example An HTML file is a text (ASCII) file in a special format: Charles Ling's home page My first and simple home page My name is Charles Ling.](https://reader033.fdocuments.us/reader033/viewer/2022050714/56649e265503460f94b15c4a/html5/thumbnails/43.jpg)
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>
![Page 44: A simple example An HTML file is a text (ASCII) file in a special format: Charles Ling's home page My first and simple home page My name is Charles Ling.](https://reader033.fdocuments.us/reader033/viewer/2022050714/56649e265503460f94b15c4a/html5/thumbnails/44.jpg)
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.
![Page 45: A simple example An HTML file is a text (ASCII) file in a special format: Charles Ling's home page My first and simple home page My name is Charles Ling.](https://reader033.fdocuments.us/reader033/viewer/2022050714/56649e265503460f94b15c4a/html5/thumbnails/45.jpg)
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>
![Page 46: A simple example An HTML file is a text (ASCII) file in a special format: Charles Ling's home page My first and simple home page My name is Charles Ling.](https://reader033.fdocuments.us/reader033/viewer/2022050714/56649e265503460f94b15c4a/html5/thumbnails/46.jpg)
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
![Page 47: A simple example An HTML file is a text (ASCII) file in a special format: Charles Ling's home page My first and simple home page My name is Charles Ling.](https://reader033.fdocuments.us/reader033/viewer/2022050714/56649e265503460f94b15c4a/html5/thumbnails/47.jpg)
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
![Page 48: A simple example An HTML file is a text (ASCII) file in a special format: Charles Ling's home page My first and simple home page My name is Charles Ling.](https://reader033.fdocuments.us/reader033/viewer/2022050714/56649e265503460f94b15c4a/html5/thumbnails/48.jpg)
Table example
<TABLE BORDER=1>
<TR>
<TD>Row 1, Cell 1</TD>
<TD>Row 1, Cell 2</TD>
<TD>Row 1, Cell 3</TD>
</TR>
<TR>
<TD>Row 2, Cell 1</TD>
<TD>Row 2, Cell 2</TD>
<TD>Row 2, Cell 3</TD>
</TR>
</TABLE>
![Page 49: A simple example An HTML file is a text (ASCII) file in a special format: Charles Ling's home page My first and simple home page My name is Charles Ling.](https://reader033.fdocuments.us/reader033/viewer/2022050714/56649e265503460f94b15c4a/html5/thumbnails/49.jpg)
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
![Page 50: A simple example An HTML file is a text (ASCII) file in a special format: Charles Ling's home page My first and simple home page My name is Charles Ling.](https://reader033.fdocuments.us/reader033/viewer/2022050714/56649e265503460f94b15c4a/html5/thumbnails/50.jpg)
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>
![Page 51: A simple example An HTML file is a text (ASCII) file in a special format: Charles Ling's home page My first and simple home page My name is Charles Ling.](https://reader033.fdocuments.us/reader033/viewer/2022050714/56649e265503460f94b15c4a/html5/thumbnails/51.jpg)
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.
![Page 52: A simple example An HTML file is a text (ASCII) file in a special format: Charles Ling's home page My first and simple home page My name is Charles Ling.](https://reader033.fdocuments.us/reader033/viewer/2022050714/56649e265503460f94b15c4a/html5/thumbnails/52.jpg)
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
![Page 53: A simple example An HTML file is a text (ASCII) file in a special format: Charles Ling's home page My first and simple home page My name is Charles Ling.](https://reader033.fdocuments.us/reader033/viewer/2022050714/56649e265503460f94b15c4a/html5/thumbnails/53.jpg)
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
![Page 54: A simple example An HTML file is a text (ASCII) file in a special format: Charles Ling's home page My first and simple home page My name is Charles Ling.](https://reader033.fdocuments.us/reader033/viewer/2022050714/56649e265503460f94b15c4a/html5/thumbnails/54.jpg)
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
![Page 55: A simple example An HTML file is a text (ASCII) file in a special format: Charles Ling's home page My first and simple home page My name is Charles Ling.](https://reader033.fdocuments.us/reader033/viewer/2022050714/56649e265503460f94b15c4a/html5/thumbnails/55.jpg)
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
![Page 56: A simple example An HTML file is a text (ASCII) file in a special format: Charles Ling's home page My first and simple home page My name is Charles Ling.](https://reader033.fdocuments.us/reader033/viewer/2022050714/56649e265503460f94b15c4a/html5/thumbnails/56.jpg)
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)