Presentation is loading. Please wait.

Presentation is loading. Please wait.

Learning Web Design: Chapter 1 and Chapter 2

Published by Modified over 6 years ago

Similar presentations

Presentation on theme: "Learning Web Design: Chapter 1 and Chapter 2"— Presentation transcript:

1 Learning Web Design: Chapter 1 and Chapter 2
Getting Started Learning Web Design: Chapter 1 and Chapter 2

2 Lesson Overview What is the Internet? History of the Internet
Anatomy of a Web Page What is the Web Made Of? Careers in Web Development Web-Related Languages Where Do I Start?

3 The Internet Internet = A network of networks
No company or government owns the Internet Many ways to share information between computers The World Wide Web is a subset of the Internet

4 World Wide Web The communication protocol of the WWW is HTTP = Hypertext Transfer Protocol The web is a visual medium that combines text and graphics Information is presented to the user via a web page Does not mean: “Whistle while you wait”

5 A Brief History of the Internet
1969 The Internet began as ARPANET US Department of Defense funded the project They wanted a way to insure the transfer of information between servers if there were a nuclear attack 1972 First electronic mail sent 1989 brought the advent of the WWW Tim Berners-Lee proposed hypertext to link related documents - The Invention of WWW (Youtube) First web pages were text only 1993 First graphical Web Browser- Mosiac 1997 The term “weblog” is coined, later shortened to “blog.” 2012 – Over 7 billion Internet users and over 367 billion web sites (

6 Who Controls the Web? No single entity controls the Web
Two organizations have an influence over the direction of the Web The World Wide Web Consortium (W3C) based at MIT They help set up the standards and enforce rules for the Web, Browser developers like Microsoft and Mozilla Constantly add new features to their browsers, often in conflict with each other and the work of the W3C

7 The Web Attracts Business
The early Internet was a community of research institutions and government agencies E-Commerce technologies have allowed businesses to conduct transactions in a somewhat secure manner on the Web Many companies still keep their most private information on intranets where they can make use of Web technologies

8 The Web is Graphical Browsers allow the presentation of both text and graphics in color on the same page The Web is really a hypermedia system Images Sound Video Animation Text and Hypertext Source:

9 Anatomy of a Web Page A web page is an electronic document written in a computer language called HTML (Hypertext Markup Language) When you surf the WWW, web pages are displayed in a web browser Web pages on a site are linked together through a system of hyperlinks, enabling you to jump between them by clicking on a link

10 Viewing Source Code index.html
<body> <h1>This is my Main Page</h1> <p>This is some text.</p> <p><a href="page1.htm"> This is a link to Page </a> </p> <p><a href="page2.htm"> This is a link to Page </a> </p> </body> </html> Source:

11 Viewing Source Code (continued)
HTML pages contain: HTML tags and plain text The code of the web page is stored as an ASCII text file with either the .htm or .html file extension You can view the source code by: opening the file in a text editor from the browser: View->Source

12 URL- Uniform Resource Locator
Resources are found on the Web through an address or location known as a URL The URL is made up of three parts: The protocol: http, ftp, news etc. The site name The absolute path protocol site name absolute path

13 Default Files When the server receives a request for a web page with just the directory name, it looks for a default document Default filenames are usually index.htm index.html The “i” must be lowercase to act as default file For security reasons, every directory should have a default file – prevents snooping

14 What is the Web Made Of? Your personal computer Web browser software
A connection to an Internet Service Provider (ISP) Servers that host the data Routers and switches to control the flow of the data Source:

15 Web Servers To publish pages on the Web you need a Web Server
This is a program that responds to requests for files from a browser The server accepts the connection, sends contents of the file, and then closes the connection

16 What the Browser Does A user working on a computer (client) machine sends a request across the Internet to a Web Server The Web Server finds the requested page and sends the information back to the Client The Client uses an application called a Browser to display the page

17 Chrome free, open-source web browser developed by Google
released in 2008 grown to be one of the most popular browsers today (52,7% of browser market as of April 2013 (w3schools.com/browsers)

18 Mozilla Firefox In 1998, Netscape freed up the source code for their web browser The Mozilla foundation is the independent, non-profit organization that support modifications to Firefox Firefox is second to Chrome as a dominant web browser; 27.9% of browser market as of April 2013 (w3schools.com/browsers)

19 Microsoft Internet Explorer
Most popular browser, newest version IE8 This browser is built into all the current versions of Microsoft Windows Also runs on Macintosh and UNIX platforms As of April 2013, 12.7% market share Free download available from Microsoft’s Web site

20 Safari This browser was created by Apple Inc. and first released in January 2003 Version of Safari for Windows was released in 2007 As of July 2009, had 4% browser market Key features: tabbed browsing, support CSS3, spell-checking Can be downloaded for free from

21 What do I need to learn? Web design is a catch-all term for the process that encapsulates a number of disciplines: Graphic design User Interface design Information design HTML production Programming Multimedia

22 Careers in Web Development
People of all backgrounds are becoming interested in learning about Web design: Print designers evolving their expertise to Web design Secretaries and office staff given Web development responsibilities Programmers moving into Web programming Graphic designers lending their talents to Web development teams Information engineers designing information presentation and data gathering via the Web

23 Graphic Designers Make decisions about everything that is seen on the Web page Color Typography – Font sizes, styles and colors Graphics Page Layout Might require some formal training if you want to design commercial sites

24 Interface Designers Focus on how the Web page works
Usability is a key issue Create methods for how things are done: buttons, menus, navigation links etc. Often have background in software design Requires a combination of personal research, experience, and common sense

25 Information Designers
Focus on the organization of content and how you get to it: Also called information architects Use flowcharts and diagrams Might have a background in database design and data modeling Some have background in library science

26 HTML Producers A majority of the Web design process involves the creation of HTML pages HTML programmers often need to have other scripting or programming skills Debugging errors is an important task Usually part of a development team Often use powerful tools to shorten development time

27 Programmers Enhance web pages with advanced functionality
Write scripts Programs Applications Database interactivity Server Some have background in Computer Science Some are self-taught

28 Multimedia Developer A web site can come to life with the addition of multimedia Graphics Sound Video Animation Interactivity A background in video or sound mastering is preferred Knowledge of development tools a must

29 Web-Related Languages
HTML Style Sheets (CSS) JavaScript,VBScript DHTML CGI Scripting

30 HTML Hypertext Markup Language The language used to write web pages
Evolving to XHTML Enhanced Hypertext Markup Language Everyone working with web development needs a background in HTML Once you learn the basics, using development tools will be easier

31 Cascading Style Sheets (CSS)
Allow you greater control over text and page formatting Styles can be reused to define a “look and feel” standard for a site Won’t work consistently on all browsers Will gain in popularity

32 JavaScript A scripting language Not Java
These program instructions can be inserted into a web page to add functionality Mouse-Overs Form Validation Pop-up windows or menus Changing behaviors Many professional web authoring tools generate JavaScript for you It is helpful to have a programming background

33 DHTML Dynamic HTML Refers to a combination of HTML, JavaScript, CSS, in such a way that makes web page elements move or change (dynamic) Requires advanced web-programming skill Many web tools provide ways for novice developers a way to add basic DHTML elements to your pages

34 CGI Programming Sometimes information is sent to or from a user of a web page This information is sent or streamed using a Common Gateway Interface syntax For example: Scripts can be written that translate information gathered from a form into a stream of information that is sent to another location on the web CGI Usually requires advanced programming skills

35 Where do I start? Understand how the Web works
Take a class on Web design Learn the fundamentals of (X)HTML Understand the role of the server Learn a Web design tool Build some test Web sites Keep adding to your “bag of tricks”

36 IS&T Web Development Focus
Information Systems and Information Technology degrees focus on Web Application development INFO Web Application Design X(HTML), CSS, Templates, Intro to Web Graphics INFO Internet Application I ASP.NET, SQL Server, C++ - Security, Web Admin, E-Commerce INFO Internet Application II XML, Web Services INFO (???? ) - Elective Course Open Source Application Development (new Spring 2010)

37 What is Needed for this Class?
Hardware Computer Scanner/Cell Phone/ Digital Camera Consistent Internet connection Software HTML Editor – Notepad++, EditPad Web Graphics Application- GIMP open source graphics application Authoring Environment – Microsoft Expression Web Internet Web Browser – at least two

38 Summary Web design is a very broad field of study
This class covers just the tip of the iceberg: HTML5 CSS Web Graphics Templates Website Management Afterward… Find your own niche

Download ppt "Learning Web Design: Chapter 1 and Chapter 2"

Similar presentations

Introduction to HTML, XHTML, and CSS

Introduction to HTML, XHTML, and CSS
The Internet and the Web

The Internet and the Web
4.01 How Web Pages Work.

4.01 How Web Pages Work.
Project 1 Introduction to HTML.

Project 1 Introduction to HTML.
Introduction to HTML 2006 CIS101. What is the Internet? Global network of computers that are connected and communicate via a series of Protocols Protocols.

Introduction to HTML 2006 CIS101. What is the Internet? Global network of computers that are connected and communicate via a series of Protocols Protocols.
Introduction to HTML 2006 INT197B. What is the Internet? Global network of computers that are connected and communicate via a series of Protocols Protocols.

Introduction to HTML 2006 INT197B. What is the Internet? Global network of computers that are connected and communicate via a series of Protocols Protocols.
Introduction to HTML 2004 CIS101. What is the Internet? Global network of computers that are connected and communicate via a series of Protocols Protocols.

Introduction to HTML 2004 CIS101. What is the Internet? Global network of computers that are connected and communicate via a series of Protocols Protocols.
1st Project Introduction to HTML.

1st Project Introduction to HTML.
Chapter 14 Introduction to HTML

Chapter 14 Introduction to HTML
HTML 1 Introduction to HTML. 2 Objectives Describe the Internet and its associated key terms Describe the World Wide Web and its associated key terms.

HTML 1 Introduction to HTML. 2 Objectives Describe the Internet and its associated key terms Describe the World Wide Web and its associated key terms.
Chapter ONE Introduction to HTML.

Chapter ONE Introduction to HTML.
WEB DESIGN SOME FOUNDATIONS. SO WHAT IS THIS INTERNET.

WEB DESIGN SOME FOUNDATIONS. SO WHAT IS THIS INTERNET.
Web Design Basic Concepts.

Web Design Basic Concepts.
 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.

 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.
Chapter 1 Introduction to HTML, XHTML, and CSS

Chapter 1 Introduction to HTML, XHTML, and CSS
1 Networks and the Internet A network is a structure linking computers together for the purpose of sharing resources such as printers and files Users typically.

1 Networks and the Internet A network is a structure linking computers together for the purpose of sharing resources such as printers and files Users typically.
What is Web Design?  Web design is the creation of a Web page using hypertext or hypermedia to be viewed on the World Wide Web.

What is Web Design?  Web design is the creation of a Web page using hypertext or hypermedia to be viewed on the World Wide Web.
Getting Started Learning Web Design: Chapter 1 and Chapter 2.

Getting Started Learning Web Design: Chapter 1 and Chapter 2.
Getting Started Learning Web Design: Chapter 1 and Chapter 2.

Getting Started Learning Web Design: Chapter 1 and Chapter 2.
Chapter 6 The World Wide Web. Web Pages Each page is an interactive multimedia publication It can include: text, graphics, music and videos Pages are.

Chapter 6 The World Wide Web. Web Pages Each page is an interactive multimedia publication It can include: text, graphics, music and videos Pages are.

Similar presentations

Ads by Google