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...
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>
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>
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>
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>
<LI>Sunday<LI>Monday<LI>Tuesday<LI>Wednesday<LI>Thursday<LI>Friday<LI>Saturday
</UL>
Unordered list example 2
<UL TYPE=CIRCLE>
<LI>Sunday<LI>Monday<LI>Tuesday<LI>Wednesday<LI>Thursday<LI>Friday<LI>Saturday
</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
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
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>
<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>
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
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)