Download Notes1 - DCU School of Computing

HTML
HyperText Markup Language
The example HTML pages presented in these notes are available on
the course WEB site http://www.computing.dcu.ie/~jkernan/. It is
assumed that the reader has access to these pages.
For this part of the course we are concerned with using HTML to
design pages and link them together. We will also look at how HTML
is used in conjunction with the Internet to implement the World Wide
Web (WWW).
© 1998, 1999 David T. Gray, Howard Duncan, Jane kernan
0
Why Learn HTML
1. Its pretty easy to use
2. Standards for HTML expanding rapidly / Web editors not always up to
date with standards
3. Web editors have their own way of doing things – taking away control
from the user at times
4. Dynamic features of Web page development that facilitate interactivity
such as CGI’s, Java etc., require a knowledge of HTML to integrate
them and implememt them on Web pages.
© 1998, 1999 David T. Gray, Howard Duncan, Jane kernan
1
Using Notepad to develop HTML pages
Step 1, Develop HTML pages in Notepad
© 1998, 1999 David T. Gray, Howard Duncan, Jane kernan
2
Step 2, Save to your area as a HTML file
1: Save to Disk (a:drive) or to your network area (h:drive)
2: ensure that “Save as type” list box is set to “All Files (*.*)”
3: add extension (HTM or HTML) preferably in lowercase to filename
4: Save it to disk
© 1998, 1999 David T. Gray, Howard Duncan, Jane kernan
3
Step 3, To view the HTML file using Windows NT Explorer simply
double click the file and Internet Explorer or Netscape will launch
and open the file for you
© 1998, 1999 David T. Gray, Howard Duncan, Jane kernan
4
Alternatively you can open it
directly in Netscape or Internet
Explorer by choosing to open the
file from the File menu.
Latter we will look how to FTP
your web pages and view them
on the internet.
© 1998, 1999 David T. Gray, Howard Duncan, Jane kernan
5
Hypertext & Hypermedia
• With hypertext (or hypermedia) information is stored as a set of
documents.
+ With the WWW, documents are often called "pages".
+ We use the two terms synonymously.
• A document contains both information and links to other documents.
© 1998, 1999 David T. Gray, Howard Duncan, Jane kernan
6
• A hypertext viewer (Browser) will display the information in a
document and will allow a user to follow links.
+ For example, a link may be highlighted so that a user can select the
link.
+ When a link is followed, the document pointed to by the link is
displayed.
• Hypertext versus Hypermedia
+ With hypertext, all information is textual.
+ With hypermedia, information can consist of text, graphics, pictures,
sound, video, etc..
+ In the remainder of these notes we will use the term "hypertext", but
unless otherwise stated, we are also referring to hypermedia.
• With the Internet we use HTML to write hypertext pages.
• We use a browser to display pages.
+ In particular, a browser allows us to follow links to other pages.
© 1998, 1999 David T. Gray, Howard Duncan, Jane kernan
7
• In general, HTML pages can reside on different computers.
+ These pages can be retrieved over the Internet.
+ The only significant difference between local and remote pages is
the time taken to load them.
• However, on this part of the course we will assume that all pages
reside on the same computer.
+ Typically, an HTML page will be contained in a file with the
extension .html (e.g. index.html).
+ When we "double-click" on an HTML file a computer typically
starts a browser to display the file.
+ References within HTML files are names of other files.
introduction.html
table.html
content.html
reference.html
body.html
© 1998, 1999 David T. Gray, Howard Duncan, Jane kernan
8
• WWW pages are written using HTML.
+ We must use a standard format so that all browsers can interpret and
display the information.
• Note that there is a "war" between Netscape and Microsoft over the
exact definition of HTML.
• Therefore, HTML is constantly evolving and a browser may not be
able to interpret all aspects of a particular version of HTML.
• The most widely accepted standard is issued by the World Wide
Web Consortium, W3C. Neither Netscape nor Internet Explorer
conforms fully to it!
+ HTML is a markup language, i.e., it allows information to be specified
without giving exact details of how it should be displayed. This allows the
browser-user to decide on some aspects of how information should be
displayed.
• For example, many pages do not specify the exact font size to be
used, just the relative importance (1-6) of each piece of text. The
browser (under direction from the user) selects appropriate font
sizes.
© 1998, 1999 David T. Gray, Howard Duncan, Jane kernan
9
• In its simplest form, an HTML page contains:
+ Information to be displayed. This can include text, graphics, etc..
+ Hypertext Links that reference other pages, graphics etc..
+ A link contains the name and location of other information.
• However, HTML pages may contain:
+ Forms that can be filled out and returned to a server.
+ Programs that interact with users. These can be written in
scripting languages such as JavaScript (Netscape) or Visual Basic
(Microsoft), or in programming languages such as Java.
© 1998, 1999 David T. Gray, Howard Duncan, Jane kernan
10
Simple HTML
• An HTML page is simply ASCII text consisting of:
+ Text to be displayed.
+ Tags specifying how text should be formatted for display or some
action that should be taken by a browser.
• A browser will format and display text.
+ Multiple spaces & new lines within text are ignored.
+ Certain non-ASCII characters and characters with special
meanings can be represented using special codes. For example:
©
©
ç
ç
£
£
&
&
© 1998, 1999 David T. Gray, Howard Duncan, Jane kernan
11
Contents of the file
one.html when viewed
with a text editor such as
Notepad.
This is a piece of text
with
various spaces and
new lines.
Some special characters: © ç £ &.
one.html
Contents of the file
one.html when viewed
with a browser.
© 1998, 1999 David T. Gray, Howard Duncan, Jane kernan
12
Page Format
• While most browsers will attempt to display any arbitrary piece of
ASCII text, a page should have a standard format.
+ It should start with an <HTML> tag and end with a </HTML> tag.
+ Within these tags there should be a head and a body.
+ The head should be enclosed by the tags <HEAD> and </HEAD>.
It can contain a title and other information.
+ The body should be enclosed by the tags <BODY> and </BODY>.
It should contain the contents of the document.
+ Note that spaces and new lines are (in general) ignored.
<HTML>
<HEAD>
<TITLE> Document Title </TITLE>
</HEAD>
<BODY>
Document Contents
</BODY>
</HTML>
© 1998, 1999 David T. Gray, Howard Duncan, Jane kernan
13
<HTML>
<HEAD>
<TITLE> Simple Page</TITLE>
</HEAD>
<BODY>
This is a <B>simple</B> page.
</BODY>
</HTML>
three.html
© 1998, 1999 David T. Gray, Howard Duncan, Jane kernan
14
<HTML><HEAD><TITLE> Simple Page</TITLE></HEAD><BODY>
This is a <B>simple</B> page.</BODY></HTML>
four.html
© 1998, 1999 David T. Gray, Howard Duncan, Jane kernan
15
HTML Tools
• There is a wide range of formatting tags.
+ It is possible to produce HTML pages using a simple text editor
such as Notepad. Simple editors force you to type each HTML tag
in full. By learning the basic tags this way it gives you a greater
understanding of how HTML works.
+ However, it is much easier to use an HTML editor which displays a
formatted version of the text and automatically inserts the correct
tags. MS Word can be used in this way.
© 1998, 1999 David T. Gray, Howard Duncan, Jane kernan
16
Exercise I
•
The example HTML pages presented in these slides can be found on the
course WEB site.
+ You can view these pages from a browser in the normal way.
+ In addition, you can view the text for these pages using a text editor such
as notepad.
+ You can also download the text of any of these pages to a file on your own
machine.
+ The details of how to do this depends on your browser.
• However, for both Netscape and Microsoft IE Explorer, you can
use the right mouse button to get a popup menu that gives you
options to view the source of a page or to save it in a local file.
•
Use a simple text editor (such as Notepad) to create some simple HTML files
(e.g., test .html) of your own.
•
Once you have created these files, use a browser to view these files.
© 1998, 1999 David T. Gray, Howard Duncan, Jane kernan
17
Basic Text Formatting
Most Web pages use text as their primary means of communication.
Providing quality content should always be your first priority when you
add text to any Web page. But the visual presentation of text on a Web
page can greatly enhance or detract from the underlying content.
Some basic text formatting features are:
+ Fonts
+ Headings
+ Paragraphs
+ Carriage returns
+ Horizontal Rules
© 1998, 1999 David T. Gray, Howard Duncan, Jane kernan
18
• A tag consists of text bracketed by < and >.
+ i.e., <TAGNAME>
+ Some tags come in pairs - one to start a formatting operation and one to
end the operation.
+ End tags have the form: </TAGNAME>
+ Notes:
• Tag names are case insensitive – with the exception of some markup
languages currently under development (XML and XHTML)
• Tags can have attributes (sometimes called arguments or
parameters). These appear between the tag name and the closing >
bracket.
• For example, the tag <B> specifies that the following text should be
displayed in a bold font. Normal font is restored by using the end tag </B>.
+ <B> This is bold </B> while this is not. (<STRONG></STRONG>)
+ <U></U> these tags underline text
+ <I> this is italic</I> while this is not (<EM></EM>)
© 1998, 1999 David T. Gray, Howard Duncan, Jane kernan
19
<HR>
<B> This is bold </B> while this is not.<BR>
<U> This starts on a new line and is underlined <B>
and this is underlined and bold. </B></U><BR>
<HR>
<BR>
<BR>
<BR>
&copy; 1998
two.html
© 1998, 1999 David T. Gray, Howard Duncan, Jane kernan
20
Headings
• A good example of why HTML is a markup language, is the handling of
headings.
+ In most text we have various levels of headings, e.g., chapter
heading, main section heading, sub-section heading etc..
+ Generally, the font size and/or the emphasis of headings decreases
as we deal with less significant portions of a document.
+ To handle this, HTML specifies 6 levels of headings together with
normal text. It is assumed that 1 is more significant than 2, which is
in turn more significant than 3, etc..
+ Therefore, the exact font, font size and emphasis for headings is
determined by the browser. The page designer simply uses tags to
specify that certain text should be treated as headings.
+ Headings can be places anywhere inside the BODY of a Web page
© 1998, 1999 David T. Gray, Howard Duncan, Jane kernan
21
<HTML>
<HEAD>
<TITLE>
</HEAD>
<BODY>
<H1>
<H2>
<H3>
<H4>
<H5>
<H6>
Page Five</TITLE>
Heading 1 </H1><BR>
Heading 2 </H2><BR>
Heading 3 </H3><BR>
Heading 4 </H4><BR>
Heading 5 </H4><BR>
Heading 6 </H6><BR>
Normal text.
</BODY>
</HTML>
five.html
© 1998, 1999 David T. Gray, Howard Duncan, Jane kernan
22
General guidelines for using Headings 1-6
• <H1> Computer Science Program </H1>
<!—use H1 for titles at the top of a web page-->
• <H2>An Introduction to Module CA106 Web Design</H2>
<!– use H2 for subtitles or Chapter titles -->
This course represents the basic concepts in Web Design. It will introduce the
students to the basic concepts of HTML and later look at more advanced features.
Student will learn how to create their own Web pages …..
• <H3> Who should take CA106</H3>
<!– Use H3 for section Heads -->
This is a course for students interested in learning Web Design, I.e. learning how to
correctly design and present information on the web.
© 1998, 1999 David T. Gray, Howard Duncan, Jane kernan
23
• <H4>Prerequisites </H4>
There are no prerequisites
<!– Use H4 for Section heads -->
• <H5> Credits 5 </H5>
<!– Use H5 for “fine Print” -->
• <H6> must pass each module</H6>
<!– use H6 for “very fine Print” -->
© 1998, 1999 David T. Gray, Howard Duncan, Jane kernan
24
© 1998, 1999 David T. Gray, Howard Duncan, Jane kernan
Htmlheadings.html
25
• The Paragraph Element signals the beginning of a new Paragraph most
browser insert a blank line before a paragraph element thereby
signaling the start of a new paragraph. To mark the start of a new
paragraph in your HTML file, insert the tag pair <P> </P> at the
beginning and end of each paragraph
• To generate a carriage return within your HTML file uses the line break
element tag <BR>, this displays the text following the tag on a new line
without inserting a blank line which appears using the <P> </P> tags
• To emphasize a break in text without titles or sub-titles insert an <HR>
tag (horizontal rule element), this tag produces a horizontal line across
the page.
© 1998, 1999 David T. Gray, Howard Duncan, Jane kernan
26
Images
• An HTML page consists of ASCII text.
+ Therefore, we cannot put non-textual information directly into an HTML page.
+ Instead we can use various tags to specify where the non-textual information
resides.
+ For graphic information we use the IMG tag.
+ With the IMG tag we use an attribute to specify the name of a file containing
the image to be displayed.
+ When the page is displayed, the image is obtained from the specified file and
displayed.
+ A file will contain an image in some graphics format, not HTML.
+ If a simple file name is specified, then the file is assumed to be in the
same location as the HTML page. Therefore, if the file was obtained
locally, the image file is assumed to be in the same directory as the
HTML file.
© 1998, 1999 David T. Gray, Howard Duncan, Jane kernan
27
<HTML>
<HEAD>
<TITLE> Page Seven</TITLE>
</HEAD>
<BODY>
<BR>NetGate : <IMG SRC="globe3e.gif">
<IMG SRC="flydove.gif">
<BR>A dog : <IMG SRC="anidog3.gif">
</BODY>
</HTML>
This is an attribute
or parameter.
seven.html
© 1998, 1999 David T. Gray, Howard Duncan, Jane kernan
28
Hypertext Links
• A hypertext link is used within one page to reference another
page.
+ With HTML we specify a hypertext link using an anchor element.
+ This consists of :
• An <A> tag. This has an attribute that specifies the file name
of the referenced page.
• Text (and/or images) that can be selected in the browser to cause the
link to be followed.
• An </A> tag.
<A HREF="index.html">
text
</A>
File name of
referenced page
Selectable text to be
displayed for this link
© 1998, 1999 David T. Gray, Howard Duncan, Jane kernan
As we will see later, a hypertext
reference can specify a page on another
computer by using a URL (Uniform
Resource Locator).
29
<HTML>
<HEAD>
<TITLE> Contents</TITLE>
</HEAD>
<BODY>
<H1>Networks & Internets</H1>
Example pages:
<UL>
<LI> <A HREF="one.html"> One </A>
<LI> <A HREF="two.html"> Two </A>
<LI> <A HREF="three.html"> Three </A>
<LI> <A HREF="four.html"> Four </A>
<LI> <A HREF="five.html"> Five </A>
<LI> <A HREF="six.html"> Six </A>
<LI> <A HREF="seven.html"> Seven</A>
</UL>
</BODY>
</HTML>
eight.html
© 1998, 1999 David T. Gray, Howard Duncan, Jane kernan
30
Three types of HyperLinks
There are three types of HTML Links each one is used in a different
situation
+ Absolute URL: links to a page on a different Web Server
+ Relative URL: links to a page on the same Web Sever
+ Named Anchor : links to a different location on the same web page
Named Anchor
Named anchors are typically used to help people navigate through the
same web page.
+ Named anchors can be used in Relative and Absolute URLs
• Relative – example on next slide
• Absolute –
http://www.computing.dcu.ie/CA106/Anchors.html#School
timetable
© 1998, 1999 David T. Gray, Howard Duncan, Jane kernan
31
<HTML>
<HEAD>
<TITLE>Named Anchor</TITLE>
<HEAD>
<BODY>
<PRE>
This example looks at named anchors
<A HREF = "#Introduction to DCU"> Intro DCU</A>
<A HREF = "#Welcome to the School of computing"> School of Computing</A>
<A HREF = "#School timetable"> School TimeTable </A>
<h3><a name = "Introduction to DCU"> Intro DCU</a>
...............
<h3><a name = "Welcome to the School of computing"> school of computing</a>
.......................
<h3><a name = "School timetable"> School timeTable</a>
School TimeTable
</PRE>
File is Anchors.html
</BODY>
</HTML>
32
© 1998, 1999 David T. Gray, Howard Duncan, Jane kernan
33
Exercise II
• Using the facilities that we have discussed, set up an initial
version of your home page.
+ You home page must be placed into the file index.html.
+ You can use whatever content you wish.
+ It is also possible to copy stuff from other WEB sites; try
http://www.shef.ac.uk/~gg1jga/street/ or
http://www.unitedmedia.com/comics/dilbert/
http://www.users.globalnet.co.uk/~cfarmer/tvmovie/simpsons/simpsons.html
+ Create Named Anchors within your page
• Set up a second page and link it to your home page.
+ This page should be in a second file
© 1998, 1999 David T. Gray, Howard Duncan, Jane kernan
34