Download presentation
Presentation is loading. Please wait.
1
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=" <li>Shopping <a href=" </ul> … …
3
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.
4
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!
5
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
6
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
7
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)
8
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>
9
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
10
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
11
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
12
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
13
Formatting Tags HTML contains tag definitions that allow you to control Headings Style Ordered Lists Unordered Lists Definition Lists etc.
14
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
15
Headings example <BODY> <H1>Heading H1</H1>
16
Formatting tags Formatting tags are used to control the display of text: <I> - italics <B> - bold <U> - underline <TT> - typewriter type face
17
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
18
More examples The above tags can be nested:
<B><U>Bold underlined text</U></B>
19
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
20
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>
21
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
22
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
23
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
24
Ordered list example 1 <OL> <LI>Sunday <LI>Monday
<LI>Tuesday <LI>Wednesday <LI>Thursday <LI>Friday <LI>Saturday </OL>
25
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>
26
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>
27
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
28
Unordered list example 1
<UL TYPE=DISC> <LI>Sunday <LI>Monday <LI>Tuesday <LI>Wednesday <LI>Thursday <LI>Friday <LI>Saturday </UL>
29
Unordered list example 2
<UL TYPE=CIRCLE> <LI>Sunday <LI>Monday <LI>Tuesday <LI>Wednesday <LI>Thursday <LI>Friday <LI>Saturday </UL>
30
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>
31
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
32
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
33
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
34
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
35
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
36
Image example <IMG SRC=midsex1.jpg>
37
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
38
Protocols HTTP – HyperText Transfer Protocol
Designed to transmit files on the WWW FTP – File Transfer Protocol Designed to transmit files over the Internet (before the Web developed) ftp://ftp.csd.uwo.ca These protocols are sets of rules that dictate how files are transmitted between computers
39
Examples URL of HTTP The document is “browse.html” and it is located in the “selected” folder at the World Wide Web site for UWO in Canada By default, “index.html” is retrieved in the folder “faculty/cling/” at the web server
40
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
41
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.
42
Link example <A HREF=" will display a link with the text UWO that will take the browser to the UWO web site
43
Images as links The content inside the <A> and </A> tags can be an image: <A HREF=" <IMG SRC=" </A>
44
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.
45
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>
46
Links to bookmarks in other documents
The general syntax is: <A HREF="URL#Bookmark">Link Item</A> Example: Click <a href=“ here</a> to see the cognitive science papers You can see a working example at:
47
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
48
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>
49
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
50
Advanced layout example
<TABLE BORDER=1> <TR> <TD ROWSPAN=3> <IMG SRC=" </TD> <TD>Top</TD> </TR> <TD>Middle</TD> <TD>Bottom</TD> </TABLE>
51
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 as the source URL.
52
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
53
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
54
How to publish your web page on the UWO server
Detailed instructions are available at: 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
55
At this point, the default web page is available at the address:
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
56
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 (By default, it looks for index.html)
Similar presentations
