A simple example An 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: <HEAD> <TITLE>Basic HTML Structure</TITLE> </HEAD> <BODY> . . . </BODY> 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>
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 space between this paragraph and the next one.</P> <P>This is a second paragraph. We can insert a line break by using the tag <CODE>BR</CODE>. <BR> This is a new line.</P> <CENTER>Finally this is some centered text and a horizontal 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 examples As 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:cling@csd.uwo.ca 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> <TD>Row 2, Cell 1</TD> <TD>Row 2, Cell 2</TD> <TD>Row 2, Cell 3</TD> </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> <TD>Middle</TD> <TD>Bottom</TD> </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 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: Open a Command Prompt Start the telnet program by typing telnet panther.uwo.ca Type your user name and password as instructed 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
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. Type logout to exit telnet You can transfer your file to the web server by using the ftp program Rename your web page index.html. Type ftp at the command prompt to start the file transfer program. You will be asked to enter your user name and password Use the command lcd (local change directory) to change the current local folder to the location of your web page
Type bye to exit the ftp program Check your results at Type cd public_html to change the server's current folder to the location of your web page. 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. Type bye to exit the ftp program Check your results at http://publish.uwo.ca/~login-name/ (By default, it looks for index.html)