Lecture 1 COMP1900 Website Construction Michele Huston Web Manager THE AUSTRALIAN WAR MEMORIAL .
-
date post
20-Dec-2015 -
Category
Documents
-
view
214 -
download
1
Transcript of Lecture 1 COMP1900 Website Construction Michele Huston Web Manager THE AUSTRALIAN WAR MEMORIAL .
![Page 1: Lecture 1 COMP1900 Website Construction Michele Huston Web Manager THE AUSTRALIAN WAR MEMORIAL .](https://reader035.fdocuments.in/reader035/viewer/2022062714/56649d415503460f94a1bcc7/html5/thumbnails/1.jpg)
Lecture 1 COMP1900
Website ConstructionWebsite Construction
Michele Huston
Web ManagerTHE AUSTRALIAN WAR MEMORIAL
www.awm.gov.au
![Page 2: Lecture 1 COMP1900 Website Construction Michele Huston Web Manager THE AUSTRALIAN WAR MEMORIAL .](https://reader035.fdocuments.in/reader035/viewer/2022062714/56649d415503460f94a1bcc7/html5/thumbnails/2.jpg)
Lecture 1 COMP1900
IntroductionIntroduction
• What is it?• Demonstrate Dreamweaver• Language and Notation
![Page 3: Lecture 1 COMP1900 Website Construction Michele Huston Web Manager THE AUSTRALIAN WAR MEMORIAL .](https://reader035.fdocuments.in/reader035/viewer/2022062714/56649d415503460f94a1bcc7/html5/thumbnails/3.jpg)
Lecture 1 COMP1900
The Internet & The WebThe Internet & The Web
• Are they the same thing?
![Page 4: Lecture 1 COMP1900 Website Construction Michele Huston Web Manager THE AUSTRALIAN WAR MEMORIAL .](https://reader035.fdocuments.in/reader035/viewer/2022062714/56649d415503460f94a1bcc7/html5/thumbnails/4.jpg)
Lecture 1 COMP1900
The InternetThe Internet
• Computer network• Connects networks together
![Page 5: Lecture 1 COMP1900 Website Construction Michele Huston Web Manager THE AUSTRALIAN WAR MEMORIAL .](https://reader035.fdocuments.in/reader035/viewer/2022062714/56649d415503460f94a1bcc7/html5/thumbnails/5.jpg)
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
![Page 6: Lecture 1 COMP1900 Website Construction Michele Huston Web Manager THE AUSTRALIAN WAR MEMORIAL .](https://reader035.fdocuments.in/reader035/viewer/2022062714/56649d415503460f94a1bcc7/html5/thumbnails/6.jpg)
Lecture 1 COMP1900
CERNCERN
• European Centre for Particle Physics
• Tim Berners-Lee• HTML
– Based on SGML
• HTTP
![Page 7: Lecture 1 COMP1900 Website Construction Michele Huston Web Manager THE AUSTRALIAN WAR MEMORIAL .](https://reader035.fdocuments.in/reader035/viewer/2022062714/56649d415503460f94a1bcc7/html5/thumbnails/7.jpg)
Lecture 1 COMP1900
BrowsersBrowsers
• Lynx• 1990’s
– NCSA Mosaic – Netscape– Internet Explorer– Opera
![Page 8: Lecture 1 COMP1900 Website Construction Michele Huston Web Manager THE AUSTRALIAN WAR MEMORIAL .](https://reader035.fdocuments.in/reader035/viewer/2022062714/56649d415503460f94a1bcc7/html5/thumbnails/8.jpg)
Lecture 1 COMP1900
W3CW3C
• World Wide Web Consortium• Web Standards Body
![Page 9: Lecture 1 COMP1900 Website Construction Michele Huston Web Manager THE AUSTRALIAN WAR MEMORIAL .](https://reader035.fdocuments.in/reader035/viewer/2022062714/56649d415503460f94a1bcc7/html5/thumbnails/9.jpg)
Lecture 1 COMP1900
W3C StandardsW3C Standards
• HTTP - Hypertext Transfer Protocol• HTML - Hypertext Markup
Language• XML - Extensible Markup Language• XHTML - Extensible Hypertext
Markup Language
![Page 10: Lecture 1 COMP1900 Website Construction Michele Huston Web Manager THE AUSTRALIAN WAR MEMORIAL .](https://reader035.fdocuments.in/reader035/viewer/2022062714/56649d415503460f94a1bcc7/html5/thumbnails/10.jpg)
Lecture 1 COMP1900
MultimediaMultimedia
• SMIL - Synchronised Multimedia Integration Language
• SVG - Scalable Vector Graphics
![Page 11: Lecture 1 COMP1900 Website Construction Michele Huston Web Manager THE AUSTRALIAN WAR MEMORIAL .](https://reader035.fdocuments.in/reader035/viewer/2022062714/56649d415503460f94a1bcc7/html5/thumbnails/11.jpg)
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
![Page 12: Lecture 1 COMP1900 Website Construction Michele Huston Web Manager THE AUSTRALIAN WAR MEMORIAL .](https://reader035.fdocuments.in/reader035/viewer/2022062714/56649d415503460f94a1bcc7/html5/thumbnails/12.jpg)
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
![Page 13: Lecture 1 COMP1900 Website Construction Michele Huston Web Manager THE AUSTRALIAN WAR MEMORIAL .](https://reader035.fdocuments.in/reader035/viewer/2022062714/56649d415503460f94a1bcc7/html5/thumbnails/13.jpg)
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
![Page 14: Lecture 1 COMP1900 Website Construction Michele Huston Web Manager THE AUSTRALIAN WAR MEMORIAL .](https://reader035.fdocuments.in/reader035/viewer/2022062714/56649d415503460f94a1bcc7/html5/thumbnails/14.jpg)
Lecture 1 COMP1900
Scope the websiteScope the website
• Gather all the content together• Navigation
– Global– Local
• Template the look & feel– separate from document structure
![Page 15: Lecture 1 COMP1900 Website Construction Michele Huston Web Manager THE AUSTRALIAN WAR MEMORIAL .](https://reader035.fdocuments.in/reader035/viewer/2022062714/56649d415503460f94a1bcc7/html5/thumbnails/15.jpg)
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
![Page 16: Lecture 1 COMP1900 Website Construction Michele Huston Web Manager THE AUSTRALIAN WAR MEMORIAL .](https://reader035.fdocuments.in/reader035/viewer/2022062714/56649d415503460f94a1bcc7/html5/thumbnails/16.jpg)
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
![Page 17: Lecture 1 COMP1900 Website Construction Michele Huston Web Manager THE AUSTRALIAN WAR MEMORIAL .](https://reader035.fdocuments.in/reader035/viewer/2022062714/56649d415503460f94a1bcc7/html5/thumbnails/17.jpg)
Lecture 1 COMP1900
Structure of an HTML DocumentStructure of an HTML Document
<html> <head><title></title> </head> <body>
</body></html>
![Page 18: Lecture 1 COMP1900 Website Construction Michele Huston Web Manager THE AUSTRALIAN WAR MEMORIAL .](https://reader035.fdocuments.in/reader035/viewer/2022062714/56649d415503460f94a1bcc7/html5/thumbnails/18.jpg)
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
![Page 19: Lecture 1 COMP1900 Website Construction Michele Huston Web Manager THE AUSTRALIAN WAR MEMORIAL .](https://reader035.fdocuments.in/reader035/viewer/2022062714/56649d415503460f94a1bcc7/html5/thumbnails/19.jpg)
Lecture 1 COMP1900
HeadingsHeadings
• <h1>Biggest</h1>– <h2>Bigger</h2>
• <h3></h3>– <h4></h4>
» <h5>Smaller</h5>
![Page 20: Lecture 1 COMP1900 Website Construction Michele Huston Web Manager THE AUSTRALIAN WAR MEMORIAL .](https://reader035.fdocuments.in/reader035/viewer/2022062714/56649d415503460f94a1bcc7/html5/thumbnails/20.jpg)
Lecture 1 COMP1900
Formatting TagsFormatting Tags
• <p>paragraph</p>• <br> line break• <pre> preformatted text</pre>• <blockquote></blockquote>• <div>divide sections</div>
![Page 21: Lecture 1 COMP1900 Website Construction Michele Huston Web Manager THE AUSTRALIAN WAR MEMORIAL .](https://reader035.fdocuments.in/reader035/viewer/2022062714/56649d415503460f94a1bcc7/html5/thumbnails/21.jpg)
Lecture 1 COMP1900
Formatting TagsFormatting Tags
• <b>bold</b>– <strong>bold</strong>
• <i>italic</i>– <em>italic</em>
• <u>underline</u>
![Page 22: Lecture 1 COMP1900 Website Construction Michele Huston Web Manager THE AUSTRALIAN WAR MEMORIAL .](https://reader035.fdocuments.in/reader035/viewer/2022062714/56649d415503460f94a1bcc7/html5/thumbnails/22.jpg)
Lecture 1 COMP1900
Text AlignmentText Alignment
• Attribute align– center, left, right
• <div align=“right”>Text</div>• <p align=“center”>Text</p>
![Page 23: Lecture 1 COMP1900 Website Construction Michele Huston Web Manager THE AUSTRALIAN WAR MEMORIAL .](https://reader035.fdocuments.in/reader035/viewer/2022062714/56649d415503460f94a1bcc7/html5/thumbnails/23.jpg)
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>
![Page 24: Lecture 1 COMP1900 Website Construction Michele Huston Web Manager THE AUSTRALIAN WAR MEMORIAL .](https://reader035.fdocuments.in/reader035/viewer/2022062714/56649d415503460f94a1bcc7/html5/thumbnails/24.jpg)
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
![Page 25: Lecture 1 COMP1900 Website Construction Michele Huston Web Manager THE AUSTRALIAN WAR MEMORIAL .](https://reader035.fdocuments.in/reader035/viewer/2022062714/56649d415503460f94a1bcc7/html5/thumbnails/25.jpg)
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>
![Page 26: Lecture 1 COMP1900 Website Construction Michele Huston Web Manager THE AUSTRALIAN WAR MEMORIAL .](https://reader035.fdocuments.in/reader035/viewer/2022062714/56649d415503460f94a1bcc7/html5/thumbnails/26.jpg)
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/