Webdesign 1 Foundation Computing I'd kill for a Nobel Peace Prize.

Slides:



Advertisements
Similar presentations
Introduction to Web Design Lecture number:. Todays Aim: Introduction to Web-designing and how its done. Modelling websites in HTML.
Advertisements

HTML I. HTML Hypertext mark-up language. Uses tags to identify elements of a page so that a browser such as Internet explorer can render the page on a.
HTML Basics Customizing your site using the basics of HTML.
Computers: Tools for an Information Age Writing Your Own Web Page: Using HTML and Web Authoring Tools.
Chapter 3 – Web Design Tables & Page Layout
WEB DESIGN TABLES, PAGE LAYOUT AND FORMS. Page Layout Page Layout is an important part of web design Why do you think your page layout is important?
Objective Understand web-based digital media production methods, software, and hardware. Course Weight : 10%
XP Information Technology Center - KFUPM1 Microsoft Office FrontPage 2003 Creating a Web Site.
XP Browser and Basics1. XP Browser and Basics2 Learn about Web browser software and Web pages The Web is a collection of files that reside.
CIS101 Introduction to Computing Week 05. Agenda Your questions Exam next week - Excel Introduction to the Internet & HTML Online HTML Resources Using.
A Beginners Guide to Web Site Design. What we will cover…. Planning your site. Creating a template. Images and Fonts. Absolute vs. Relative Links.
CIS101 Introduction to Computing Week 05. Agenda Your questions CIS101 Survey Introduction to the Internet & HTML Online HTML Resources Using the HTML.
CIS101 Introduction to Computing
CM143 - Web Week 2 Basic HTML. Links and Image Tags.
HTML Introduction HTML
Glencoe Digital Communication Tools Create a Web Page with HTML Chapter Contents Lesson 4.1Lesson 4.1 Get Started with HTML (85) Lesson 4.2Lesson 4.2 Format.
Chapter 2 Introduction to HTML5 Internet & World Wide Web How to Program, 5/e Copyright © Pearson, Inc All Rights Reserved.
CPSC 203: Introduction to Computers Tutorials 03 & 29 by Jie (Jeff) Gao.
Chapter 9 Collecting Data with Forms. A form on a web page consists of form objects such as text boxes or radio buttons into which users type information.
Web Development 311 Fall : Fall Why web pages? Most companies have intranets, extranets, and web sites Content can be changed quickly and.
1 Introduction to Web Development. Web Basics The Web consists of computers on the Internet connected to each other in a specific way Used in all levels.
 Using Microsoft Expression Web you can: › Create Web pages and Web sites › Set what you site will look like as you design it › Add text, images, multimedia.
Copyright © Texas Education Agency, All rights reserved. 1 Web Technologies Website Development with Dreamweaver.
HTML HTML stands for "Hyper Text Mark-up Language“. Technically, HTML is not a programming language, but rather a markup language. Used to create web pages.
Web Technologies Website Development Trade & Industrial Education
HTML HyperText Markup Language Constantly evolving - extra facilities being added regularly Java applets and JavaScript used to increase functionality.
4 HTML Basics Section 4.1 Format HTML tags Identify HTML guidelines Section 4.2 Organize Web site files and folder Use a text editor Use HTML tags and.
XP New Perspectives on Browser and Basics Tutorial 1 1 Browser and Basics Tutorial 1.
.  Entertain  Inform  Educate  Blogs  Sell  Date  Gamble  Religion.
Programming in HTML.  Programming Language  Used to design/create web pages  Hyper Text Markup Language  Markup Language  Series of Markup tags 
10 Adding Interactivity to a Web Site Section 10.1 Define scripting Summarize interactivity design guidelines Identify scripting languages Compare common.
Website Development with Dreamweaver
Using Html Basics, Text and Links. Objectives  Develop a web page using HTML codes according to specifications and verify that it works prior to submitting.
CP2022 Multimedia Internet Communication1 HTML and Hypertext The workings of the web Lecture 7.
NASRULLAH KHAN.  Lecturer : Nasrullah   Website :
Section 4.1 Format HTML tags Identify HTML guidelines Section 4.2 Organize Web site files and folder Use a text editor Use HTML tags and attributes Create.
Programming in HTML.  Programming Language  Used to design/create web pages  Hyper Text Markup Language  Markup Language  Series of Markup tags 
Introduction to web development and HTML MGMT 230 LAB.
HTML: Hyptertext Markup Language Doman’s Sections.
1 © Copyright 2000 Ethel Schuster The Web… in 15 minutes Ethel Schuster
Web Page Fundamentals HTML: The Language of the Web.
CPSC 203 Introduction to Computers Lab 33 By Jie Gao.
HTML BTEC National in Computing Section5. Create Information “HTML: defining HTML, discussing HTML uses and demonstrating HTML basics, HTML structure…..
HTML GUIDE Press F5 and then Click on the links on the left to get to the section you want Section 1: Getting Started Section 2: Moving Banner Section.
4 HTML Basics Section 4.1 Format HTML tags Identify HTML guidelines Section 4.2 Organize Web site files and folder Use a text editor Use HTML tags and.
Website design and structure. A Website is a collection of webpages that are linked together. Webpages contain text, graphics, sound and video clips.
Introduction to HTML. _______________________________________________________________________________________________________________ 2 Outline Key issues.
NASRULLAH KHAN.  Lecturer : Nasrullah   Website :
Web Authoring with Dreamweaver. Unit Objectives  Be able to define keywords: HTML, HTTP (protocol), browser, web server, client/server, tag, attribute,
Spiderman ©Marvel Comics Creating Web Pages (part 1)
Writing Your Own Web Page: Using HTML and FrontPage Chapter 10.
Introduction to HTML Simple facts yet crucial to beginning of study in fundamentals of web page design!
Understanding Web-Based Digital Media Production Methods, Software, and Hardware Objective
Learning Aim C.  Creating web pages involves many considerations.  In this section we will look at the different software tools you can use and how.
introductionwhyexamples What is a Web site? A web site is: a presentation tool; a way to communicate; a learning tool; a teaching tool; a marketing important.
COMP 143 Web Development with Adobe Dreamweaver CC.
Objective % Select and utilize tools to design and develop websites.
Chapter 1 Introduction to HTML.
Objective % Select and utilize tools to design and develop websites.
Section 10.1 YOU WILL LEARN TO… Define scripting
Creating a Successful Web Presence
Chapter 27 WWW and HTTP.
Objective Understand web-based digital media production methods, software, and hardware. Course Weight : 10%
Introduction to HTML Simple facts yet crucial to beginning of study in fundamentals of web page design!
Understand basic HTML and CSS terminology, concepts, and basic operations. Objective 3.01.
An Introduction to HTML Pages
INFS 230 L Internet Technology
4.00 Apply procedures to add content by using Dreamweaver. (22%)
Presentation transcript:

Webdesign 1 Foundation Computing I'd kill for a Nobel Peace Prize.

2 of 71 Web Design and Authoring  World Wide Web created whole new way of publishing information  Special roles include: Web programmers Web design artists Web navigation specialists Content experts and authors

3 of 71 HTML  Standard format/language for Web documents: hypertext markup language  Markup language: Comprises normal text of document together with tags  Tags provide format, structure and references to other files, eg. multimedia, other web documents

4 of 71 Examining the HTML  You can look at the HTML of a Web page by selecting View->Source in Internet Explorer  Try it!  As you will see, HTML is not a very easy language to read (or write)  You can directly edit HTML using a text editor such as Notepad

5 of 71 Learning HTML  You are not expected to be an HTML expert!  A lot of web designers use WYSIWYG editors such as FrontPage or Dreamweaver  They often work side by side in code and layout view!  Learn enough of the basic tags to produce simple web pages or make minor changes to a web page  Refer to the HTML Tutorial

6 of 71 Overall File Structure HTML Tutorial Document body text here.  will look like this: click hereclick here

7 of 71 Code HTML Tutorial Document body text here.

8 of 71 Common HTML Tags  Level 1 Heading  Paragraph  line break   click here  bold  emphasis  underlined  centred text Click here

9 of 71 Common HTML Tags Level 1 Heading Paragraph line break click here bold emphasis underlined centred text

10 of 71 Another example Birgit's Web Page Birgit's Web Page My favourite colour is blue. My favourite sport is softball. My favourite movie is Whalerider. I could say some interesting things here. Click here Click here

11 of 71 Another example Birgit's Web Page Birgit's Web Page My favourite colour is blue. My favourite sport is softball. My favourite movie is Whalerider. I could say some interesting things here.

12 of 71 Spaces, gaps, new lines This will be printed In the same line as the text above. To create a line break you need to use Or to start a new paragraph. Or to add extra space between words in a sentence. Click here Click here

13 of 71 Spaces, gaps, new lines This will be printed In the same line as the text above. To create a line break you need to use Or to start a new paragraph. Or to add extra space between words in a sentence.

14 of 71 Navigating the Web  Each document can have numerous active links (using the HREF tag).  Someone browsing can follow a long sequence of links moving from web page (document) to web page.  Browsers keep track of where you have been so you can move back/forward.

15 of 71 Adding Links  Say I wanted to put a link to the USQ website onto my web page.  I could add the following: I work at USQ. URL for link Text to display for link  is called an anchor tag

16 of 71 Adding Images Name of file with image Text to display if image unavailable Click here Click here  Say I wanted to include a graphic image or photograph  I could add the following: Image must be in same folder as HTML file. You can add a “path” if the image is stored elsewhere.

17 of 71

18 of 71 Writing code  In future, you may use a WYSIWYG editor to write HTML code  For assignment 7, you may not! Do not save in your browser Save in Notepad only!!! Edit in Notepad only!

19 of 71 Web Page Design Issues  Page will not appear exactly the same everywhere Different computer screens, fonts etc. Different browsers (eg PDA) Default settings (eg font size) Different operating systems (eg playing WMV files on Mac)  Size and download time

20 of 71 Web Page Design Issues (2)  Content versus aesthetics  Consistent Look-and-Feel Common page layout, heading etc. Navigation bars/buttons Fonts, colours, alignment

21 of 71 Download Time  Common modems are 56 Kbps  Effective download speeds across the Internet can be substantially less  WYSIWYG editors will show the download time for a page over a standard modem  Keep images small (eg. < 100K) by using GIF or JPEG compression (see final module)

22 of 71 Separating Content and Formatting  A web site with many pages can share the same formatting information, eg. Colours & backgrounds Font size, colour, face Location of sections on screen Separate printable view  Use Cascading Style Sheet (CSS)

23 of 71 Write Less!  Guidelines Be succinct Write for scannability Use hypertext (links to other pages)  Reading from computer screens is about 25% slower than reading from paper  People don’t like reading from screens  Write 50% less text

24 of 71 Scannability  Users rarely read every word  Structure articles with headlines  Use meaningful rather than "cute" headings  Use highlighting and emphasis to make important words catch the user's eye.

25 of 71 Web Sites  A web site is a collection of related web pages, generally maintained by a single person or organisation  A web page is a separate HTML file  With frames, a web page may comprise many HTML files  Images and other multi-media components are separate files also, eg. GIF, JPEG Click here Click here

26 of 71 Good Web Site Design  Make the site's purpose clear  Help users find what they need  Make navigation easy  Use visual design to enhance not distract  Less is more!  Use meaningful graphics  Alt text and titles  Accessible

27 of 71 Bad Web Site Design  Animations  Orphan Pages  Long Scrolling Pages  Lack of Navigation Support  Outdated Information  Overly Long Download Times  Links that don’t work

28 of 71 Quiz  What does the Privacy Act regulate?

29 of 71 Quiz (2)  What does the Freedom of Information Act allow?

30 of 71 Quiz (3)  What is the purpose of the Spam Act?

31 of 71 Quiz (4)  What is the purpose of Copyright?

32 of 71 Quiz (5)  Which HTML tag will include a line break? A. B. C. D.

33 of 71 Quiz (6)  Which HTML tag will make text bold? A. B. C. D.

34 of 71 Quiz (7)  What is wrong in the following HTML code? Title of this page My website Welcome to my website!!!

35 of 71 Quiz (7)  What is wrong in the following HTML code? Title of this page My website Welcome to my website!!!

36 of 71 Quiz (7)  What is wrong in the following HTML code? Title of this page My website Welcome to my website!!!

37 of 71 Quiz (7)  What is wrong in the following HTML code? Title of this page My website Welcome to my website!!!

38 of 71 Quiz (7)  What is wrong in the following HTML code? Title of this page My website Welcome to my website!!!

39 of 71 Quiz (7)  What is wrong in the following HTML code? Title of this page My website Welcome to my website!!!

40 of 71 Quiz (7)  What is wrong in the following HTML code? Title of this page My website Welcome to my website!!!

41 of 71 Quiz (8)  How will the following HTML code appear in a web browser? The quick brown fox jumped over the lazy dog.

42 of 71 Quiz (8)  How will the following HTML code appear in a web browser? The quick brown fox jumped over the lazy dog.

43 of 71 Quiz (9)  What HTML code will include an image with file name myphoto.jpg?

44 of 71 Quiz (9)  What HTML code will include an image with file name myphoto.jpg?

45 of 71 Quiz (9)  What HTML code will include an image with file name myphoto.jpg?

46 of 71 Quiz (9)  What HTML code will include an image with file name myphoto.jpg?

47 of 71 Quiz (10)  What is good website design? What is bad website design?

48 of 71 Missing links from last week  Social context:  CSS (cascading style sheets)  HTML Allows you to try the code!  Colour contrast  Bad web design

49 of 71

50 of 71

51 of 71 Missing links from last week  Social context:  CSS (cascading style sheets)  HTML Allows you to try the code!  Colour contrast  Bad web design

52 of 71 Browser (in)compatibility  Firefox vs Internet Explorer  Default font size

53 of 71 Use Hyperlinks  Split information up into chunks connected by hypertext links: Each chunk can be brief The full hyperspace can contain much more information than would be feasible in a printed article Long and detailed background information can be relegated to secondary pages  Let readers select those topics they care about and only download those pages

54 of 71 Structuring a Website  Help people navigate a web site: arrange pages hierarchically like sections and sub-sections  Provide links to the next, previous page, the parent and children pages and to the "top" home page  Consistent menu on every page (similar to TOC), in same location  Bread crumbs?

55 of 71

56 of 71 Example Web Site Structure Page 3 Home Page Page 1.1 Page 1 Page 2 Page 3.1Page 3.2

57 of 71 A Shallow Site Design Home Page Page 1 Page 2Page 3Page 4Page 5Page 6

58 of 71 A Deeper Site Design Page 1 Page 1.1 Page Page 2.1 Page Page Page 2 Home Page Page 1.1.1

59 of 71 Big or complex Documents?  What if you want to make available: A big report written in Word? An Excel spreadsheet? A PowerPoint presentation?  Don’t assume the person viewing your web site has Microsoft Office!  Convert to Adobe PDF format, eg. using Adobe Acrobat or CutePDF.

60 of 71 Static & Dynamic Pages  You will create static pages Look the same until you edit them  Dynamic pages change over time, eg. Stock prices, sporting results etc. Webmail  Uses server side programming languages such as CGI, ASP, JSP and PHP

61 of 71 Forms and CGI  Web pages can also be set up to allow users to input data into boxes or form fields  User clicks a "submit" button and the information is sent back to the web server  Normally handled by CGI – the Common Gateway Interface, eg. the details may be ed to someone

62 of 71 Active Pages  Web page interacts with user, eg. Image rollover Calculations Complex animations  Uses client side scripting such as JavaScript or VB Script.  More complex user interaction by downloading an applet, e.g. Java.

63 of 71 Web Hosting  Many ISPs provide users with some space to place a small web site  Larger web sites may require paid web hosting arrangements  Usually you build your web site on your local computer and then upload it to the web server using FTP or perhaps a “content management” web page  Every USQ students has some web space on the student server (FTP) (FTP) (view) (view)

64 of 71

65 of 71

66 of 71

67 of 71

68 of 71

69 of 71

70 of 71 Web Hosting Issues  Available Space  ISP’s server reliability and performance  Your own domain name? Domain name registration  CGI support, eg. for enquiry forms being ed to you

71 of 71 Getting Found  Various ways to ensure people find your website: Publicise URL Links from another website  Portals  Link exchange Tell a search engine  Use meta tags to tell the search engine keywords (see Study Book)