0 © 1998, 1999 david t. gray, howard duncan, jane kernan ca106 – web design cara greene...

© 1998, 1999 David T. Gray, Howard Duncan, Jane kernan

1

CA106 – Web Design

Cara [email protected]

Course Website:www.computing.dcu.ie/~cgreene/ca106/

ca106.html


2

Course Outline

• Intro to HTML• Attributes, Lists, Colour• Tables• Frames, Forms, FTP• Advanced Features• Internet History• How the Internet works• Web design (1)• Web design (2)

• Accessibility and Standards

• Revision

• Assessment

• Web site – pairs (25%)• Report - individually

(25%)• Written exam (50%)


3

Assessment

• Design and create your own web site (25%)+To be completed in pairs+Due week 7

• Web site report (25%)+To be completed individually+Due week 9

• Written exam (50%)


4

Lectures and Labs

• Lectures+No lecture on Friday 17th March

• Labs+Thurday @5-6pm in L114, L201, L101, LG01+Not official lab time+Work on project & use examples on web page

www.computing.dcu.ie/~cgreene/ca106/ca106.html


5

HTMLHyperText Markup Language

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).

The example HTML pages presented in these notes are available on the course WEB site http://www.computing.dcu.ie/~cgreene/ca106/ca106.html. It is assumed that the reader has access to these pages.


6

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.


7

Using Notepad to develop HTML pages

Step 1, Develop HTML pages in Notepad


8

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 filename4: Save it to disk


9

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


10

Alternatively you can open it directly in Netscape or Internet Explorer by choosing to open the file from the File menu.

Later we will look how to FTP your web pages and view them on the internet.


11

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.


12

• 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.


13

• 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

body.html

content.html

table.html

reference.html


14

• 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.


15

• 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.


16

• 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:© © ç ç £ £ & &

Simple HTML


17

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 text editor such as Notepad.

Contents of the file one.html when viewed with a browser.


18

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>


19

<HTML> <HEAD> <TITLE> Simple Page</TITLE> </HEAD> <BODY>

This is a <B>simple</B> page. </BODY></HTML>

three.html


20

<HTML><HEAD><TITLE> Simple Page</TITLE></HEAD><BODY>This is a <B>simple</B> page.</BODY></HTML>

four.html


21

• 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.

HTML Tools


22

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.


23

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


24

• 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>)


25

<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>© 1998

two.html


26

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


27

<HTML> <HEAD> <TITLE> Page Five</TITLE> </HEAD> <BODY>

<H1> Heading 1 </H1><BR><H2> Heading 2 </H2><BR><H3> Heading 3 </H3><BR><H4> Heading 4 </H4><BR><H5> Heading 5 </H4><BR><H6> Heading 6 </H6><BR> Normal text.

</BODY></HTML>

five.html


28

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.


29

• <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” -->


30

Htmlheadings.html


31

• 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.


32

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.


33

<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>

seven.html

This is an attribute or parameter.


34

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 nameof 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

As we will see later, a hypertext reference can specify a page on

another computer by using a URL (Uniform Resource Locator).


35

eight.html

<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>


36

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

37

<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>

</BODY>

</HTML>

File is Anchors.html


38


39

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.

unitedmedia.com/comics/dilbert/+ 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

0 © 1998, 1999 david t. gray, howard duncan, jane kernan ca106 – web design cara greene...

Documents

howard duncan

web pages

html file

jane kernan step

jane kernan lectures

web editors

html pages step

jane kernan assessment