Lecture 1 COMP1900 Website Construction Michele Huston Web Manager THE AUSTRALIAN WAR MEMORIAL

Lecture 1 COMP1900

Website ConstructionWebsite Construction

Michele Huston

Web ManagerTHE AUSTRALIAN WAR MEMORIAL

www.awm.gov.au

Lecture 1 COMP1900

IntroductionIntroduction

• What is it?• Demonstrate Dreamweaver• Language and Notation

Lecture 1 COMP1900

The Internet & The WebThe Internet & The Web

• Are they the same thing?

Lecture 1 COMP1900

The InternetThe Internet

• Computer network• Connects networks together

Lecture 1 COMP1900

World Wide WebWorld Wide Web

• Universal Access to Files– Platform independent

• Apple, Windows, DOS, Mac, Amiga, Unix

– Software independent• Word Perfect, MS Word, Claris

Lecture 1 COMP1900

CERNCERN

• European Centre for Particle Physics

• Tim Berners-Lee• HTML

– Based on SGML

• HTTP

Lecture 1 COMP1900

BrowsersBrowsers

• Lynx• 1990’s

– NCSA Mosaic – Netscape– Internet Explorer– Opera

Lecture 1 COMP1900

W3CW3C

• World Wide Web Consortium• Web Standards Body

Lecture 1 COMP1900

W3C StandardsW3C Standards

• HTTP - Hypertext Transfer Protocol• HTML - Hypertext Markup

Language• XML - Extensible Markup Language• XHTML - Extensible Hypertext

Markup Language

Lecture 1 COMP1900

MultimediaMultimedia

• SMIL - Synchronised Multimedia Integration Language

• SVG - Scalable Vector Graphics

Lecture 1 COMP1900

Web DesignWeb Design

• Non-linear• People are used to linear

– We read in one direction, one page at a time

• Good Web Design– gives sense of the familiar– student.anu.edu.au

Lecture 1 COMP1900

Web DesignWeb Design

• Clear intent & goals– 9 -11 secs to capture attention– student consultants– Jim’s Homepage

• Personal Homepage– Intent: to create an online CV– Goal: to impress employers

Lecture 1 COMP1900

Know your audienceKnow your audience

• Young - bright colours, upbeat language, multimedia

• www.webmonkey.com

• Conservative - blues, white, black, • www.jbwere.com.au

• Expensive - elegant, black, silver, gold,

• www.jaguar.com

Lecture 1 COMP1900

Scope the websiteScope the website

• Gather all the content together• Navigation

– Global– Local

• Template the look & feel– separate from document structure

Lecture 1 COMP1900

Writing & Viewing HTMLWriting & Viewing HTML

• HTML editor• Dreamweaver, Golive, HotmetalPro

• HTML converters• MS Word, RTF to HTML

• Web Browser• Netscape, IE, Opera, Lynx

• Browser plugins• Real Audio, Flash, Shockwave, Quicktime

Lecture 1 COMP1900

HTML Document HTML Document StructureStructure

• HTML Tags– Beginning & Ending tags

• <HTML> </HTML>• Headings <H1> </H1>

– Exceptions• Images <IMG> • Horizontal rule<HR> • Line break <BR>

• Barebones Guide to HTML - werbach.combare/barebones

Lecture 1 COMP1900

Structure of an HTML DocumentStructure of an HTML Document

<html> <head><title></title> </head> <body>

</body></html>

Lecture 1 COMP1900

TITLE TagTITLE Tag

• Between the <head></head> tags• <title>My Home Page</title>• appears in

• Browser menu bar• Search engine results pages• link name for favourites or bookmarks

• given priority in search engine indexes

Lecture 1 COMP1900

HeadingsHeadings

• <h1>Biggest</h1>– <h2>Bigger</h2>

• <h3></h3>– <h4></h4>

» <h5>Smaller</h5>

Lecture 1 COMP1900

Formatting TagsFormatting Tags

• <p>paragraph</p>• <br> line break• <pre> preformatted text</pre>• <blockquote></blockquote>• <div>divide sections</div>

Lecture 1 COMP1900

Formatting TagsFormatting Tags

• <b>bold</b>– <strong>bold</strong>

• <i>italic</i>– <em>italic</em>

• <u>underline</u>

Lecture 1 COMP1900

Text AlignmentText Alignment

• Attribute align– center, left, right

• <div align=“right”>Text</div>• <p align=“center”>Text</p>

Lecture 1 COMP1900

Bulleted ListsBulleted Lists

• <ul><li>list element 1</li><li>list element 2</li></ul>

• attribute type disc|square|circle• <ul type=“square”></ul>

Lecture 1 COMP1900

Ordered ListsOrdered Lists

• <ol><li>list element 1</li><li>list element 2</li></ol>

• attribute type A|I|i|1• <ul type=“i”></ul>

lower case roman

Lecture 1 COMP1900

<font></font><font></font>

• attribute size• 1,2, … 7 or • +1,+2, … +7• -1,-2, …. -7

• eg <font size=“-1”>small</font>

Lecture 1 COMP1900

<font></font><font></font>

• Attribute - color– note spelling– hexidecimal eg. #FF3366– name eg. red, green, blue

• <font color=“#CC3399”>magenta</font>

• Visibone Color lab - www.visibone.com/colorlab/

Documents

Lecture 1 COMP1900 Website Construction Michele Huston Web Manager THE AUSTRALIAN WAR MEMORIAL