Introduction to

Web Design

2

So what is Web Design?

By definition, Web design is the skill of

creating presentations of content that is

delivered to an end-user through the World

Wide Web, by way of a Web browser or other

Web-enabled software.

The Internet

The Internet is the interconnected network of computer networks.

The Internet carries a vast array of information resources and services, most notably the inter-linked hypertext documents of the World Wide Web (WWW) and the infrastructure to support electronic mail.

3

The Internet

The internet began as a network to connect

computers at research facilities and

universities.

Messages in this network travel to their

destinations by multiple routes or paths

allowing the network to function even if parts

of it were broken or destroyed. The message

would be re-routed through a functioning

portion of the network.

4

5

Insert video from code.org on packets

The network was developed by the Advanced

Research Projects Agency (ARPA) – and the

ARPAnet was born.

4 computers located at UCLA, Stanford

research institute , Univ of California and the

University of Utah were connected by the end

of 1969.

6

Growth of the Internet

As time went on, other networks such as the

National Science Foundation’s NSFnet, were created

and connected with the ARPAnet. Use of this

interconnected network or internet was originally

limited to government, research and educational

purposes. The ban on commercial use of the

Internet was lifted in 1991.

It was the early 90’s then, that the internet began to

rapidly grow.

7

When the restriction on commercial use was

lifted, the stage was set for future electronic

commerce: businesses were now welcome on

the Internet.

At this point, the internet was still text based

and not easy to use.

8

The Birth of the Web

While working at CERN, a research facility in

Switzerland, Tim Berners-Lee envisioned a

means of communication for scientists by

which they could easily “hyperlink” to another

research paper or article and immediately

view it.

Berners-Lee created the World Wide Web to

fulfill this need.

9

The Birth of the Web

Berners-Lee posted the code in a newsgroup and made it freely available.

This version of the WWW used Hypertext Transfer Protocol (HTTP) to communicate between the client computer and the web server.

HTTP is a set of rules for exchanging text, graphic, sound video and other multimedia files to communicate between the client computer and the web server.

10

What is the World Wide Web?

The WWW is the graphical user interface

providing access to the information stored on

web servers that are connected to the

Internet.

The Internet and the World Wide Web are not

one and the same.

The WWW at this time was text based and

used Hypertext Markup Language (HTML) to

format the documents. 11

The linked documents, or pages of information on

the Web are known as a Web Page.

Because the Web supports multimedia, text, images,

video and audio, a Web page can include any of

these elements.

A web site is a related collection of Web pages that

are created and maintained by an organization or

individual.

The home page is the first document seen when a

user accesses your web site. It often serves as an

index or table of contents to other documents and

files stored on the site.12

13

Web Browsers In order to view a web page on any type of Web

site, a computer needs to have a web browser installed.

A Web browser, also called a browser is a program that interprets and displays Web pages and enables you to view and interact with a Web page.

WorldWideWeb (later renamed Nexus) was the world's first web browser introduced in 1991, it was the only way to view the web at that time.

The First Graphical Browser

In 1993, Mosaic, the first graphical web

browser became available.

It was developed by Marc Andreessen and

graduate students working at the National

Center for Supercomputing Applications

(NCSA) at the University of Illinois.

Some of these same students also developed

another well known early browser named

Netscape Navigator14

The combination of graphical operating

systems, online service providers, http

protocol and the HTML language made

information on the Internet much easier to

access. The World Wide Web had arrived.

15

Web Standards and Accessibility

The World Wide Web Consortium, known as

the W3C, takes a proactive role in developing

recommendations and prototype technologies

related to the Web.

The W3C addresses things such as:

Web Architecture

Standards for web design

Accessibility

16

W3C Recommendations

The W3C recommendations are created in working

groups with input from many major corporations

involved in building web technologies.

These recommendations are guidelines. Major

software companies that build web browsers, such

as Microsoft, do not always follow the W3C

recommendations.

The fact that not all web browsers display a page in

the same way can be challenging as a web

developer.17

There is a trend toward conforming to the

W3C recommendations.

Organized groups such as The Web

Standards Project, exist whose mission is to

promote the W3C standards to both web

developers and those who create the

browsers.

We will follow the W3C standards in this

course as it will allow our sites to be

accessible.

18

Web Standards and Accessibility

The Web Accessibility Initiative – referred to as WAI

– is a major area of work by the W3C.

There is a need for all individuals to be able to

access the Web, as it is an integral part of our lives.

An accessible website provides accommodations

that help individuals overcome disabilities such as:

Visual

Auditory

Physical

Neurological

19

Accessibility and the Law

The Americans with Disabilities Act (ADA) was enacted in 1990 to protect civil rights of disabled people.

In 1996, a Department of Justice ruling indicated that the ADA accessibility requirements apply to internet resources.

In 1998, it was required that US government agencies give individuals with disabilities access to information technology that is comparable to the access available to others.

20

The Universal Design for the Web

The Center for Universal Design defines universal

design as “the design of products and environments

to be usable by all people, to the greatest extent

possible, without the need for adaptation for

specialized design.

Examples of such are automatic doors, cutout on

sidewalk curbs, a ramp and so on.

Awareness of universal design by web developers

has been increasing.

As a web developer, you should design with

accessibility in mind. 21

AssignmentVisit the W3C and answer the following

questions.

How did the W3C get started?

Who can join the W3C? What does it cost to

join?

The W3C home page lists a number of

technologies. Choose one that interests you,

click the link and read several of the

associated pages. List three facts or issues

you discover. 22

The World Organization of Webmasters (WOW) is a

professional association dedicated to the support of

individuals and organizations that create and manage

websites. Visit their site at webprofessionals.org and

answer the following questions:

How can you join WOW? What does it cost to join?

List one of the events that WOW participates in. Would

you want to attend this event? Why or why not?

List three ways that WOW can help you in your future

career as a web developer.

23

Network Overview

A network consists of two or more computers connected for the purpose of communicating and sharing resources.

Common components of a network include:

Server Computers

Client workstation computers

Shared devices such as printers

Networking devices such as routers, hubs and switches and the media to connect them.

24

Clients are the computer workstations used by

individuals, such as a PC on a desk.

The server receives requests from client

computers for resources such as a file.

Computers used as servers are usually kept in

a protected, secure area and are only

accessed by network administrators.

25

Networking devices such as hubs and

switches provide network connections for

computers, and routers direct information from

one network to another.

The media connecting the clients, servers,

peripherals and networking devices may

consist of copper cables, fiber optic cables

and / or wireless technologies.

26

The Client / Server Model

The term Client /Server dates from the 1980’s

and refers to computers joined by a network.

It can also describes a relationship between

two computer programs.

The client requests some type of service from

the server.

The server fulfills the request and transmits

the results to the client over a network.

27

Clients and servers can run on the same

computer but it is typical that they run on

separate computers.

A server can handle requests from multiple

clients.

The internet is a great example of client /

server architecture.

28

Example

A person is at a computer using a web browser client to access the Internet.

The person uses the web browser to visit a website.

The server is the web server program running on the computer with an IP address that corresponds to the website they are visiting.

The web server is contacted, it locates the web page and related resources that were requested and it responds by sending them.

29

Client vs. Server

Web Client

Connected to the Internet when needed

Usually runs web browser (client) software.

Requests web pages from a web server

Receives web pages and associated files from a web server

Web Server Always connected to the

Internet

Runs web server software

Uses HTTP

Receives a request for the web page

Responds to the request and transmits the status code, web page and associated files.

30

MIME

When clients and servers exchange files, they often need to indicate the type of file that is being transferred. This is done through the use of a MIME type.

Multi-Purpose Internet Mail Extensions (MIME) are rules that allow multimedia documents to be exchanged among many different computer systems.

It was originally intended to extend the email protocol but is also used by HTTP.

31

MIME MIME provides exchange for 7 different media types on the

internet: Audio

Video

Images

Applications

Messages

Multipart

Text

It also uses subtypes to further describe the data.

Mime type of a web page is: text/html

Mime type of an image could be image / gif or image / jpeg

32

A web server determines the MIME type of a

file before it is transmitted to the web browser.

The MIME type is sent along with the

document.

Clients and servers exchange information

through the use of communication protocols.

Protocols are the rules that describe how

clients and servers communicate with each

other over a network.33

Internet Protocols

Email Protocols

Incoming mail server: When you receive email, Post

Offics Protocol(POP) and Internet Message Access

Protocol (IMAP) can be used.

Outgoing mail server: When you send email to

others, Simple Mail Transfer Protocol (SMTP) is used

Hypertext Transfer Protocol (HTTP)

Used to exchange files on the Web. Web browsers

and Web Servers use this protocol.

34

File Transfer Protocol

Allows files to be exchanges between computers

on the internet. FTP is simply used to move files

from one computer to another (Upload and

download). Web developers use it to transfer web

page files from their computer to web servers.

Also used to download files from other servers to

individual computers.

35

TCP / IP

Transmission Control Protocol / Internet

Protocol (TCP/IP)

The official protocol of the internet. TCP and IP

have different functions that work together to

ensure reliable communication over the Internet.

TCP – Ensure the integrity of network

communication. Breaks files and messages

into packets.

36

IP – takes over after TCP creates packets,

using IP addressing to send each packet over

the Internet using the best path at the

particular time.

When the destination address is reached,

TCP verifies the integrity of each packet,

requests a resend if the package is damaged

and reassembles the file from multiple

packets.

37

IP is a set of rules that controls how data is sent between computers on the Internet. IP routes a packet to the correct destination address.

IP AddressesEach device connected to the Internet has a unique

numeric IP Address.

These addresses consist of a set of four groups of numbers, called octets.

This results in a decimal number in the format xxx.xxx.xxx.xxx where each set of xxx is a number from 0-255

38

An IP address can be entered into the address

bar just like the url is entered.

39

The current, widely used version of IP is IPv4.

It uses 32 bit addressing.

IPv6 is intended to replace IPv4 and provides

for more internet addresses because the IP

address is lengthened from 32 bits to 128 bits.

There are potentially 2128 unique IP addresses

available.

40

41

URI’s and URL’s

URI is a Uniform Resource Identifier. It

identifies a resource on the internet.

URL is a Uniform Resource Locator. It is a

type of URI that represents the network

location of a resource such as a web page, a

graphic file or an MP 3 file.

42

URL

URL consists of:

The protocol

The domain name

The hierarchical location of the file on the web

server

Example:

http://www.webdevbasics.net/3e/index.html

43

Parts of the Domain Name

Looking at the domain name from right to left, we have:

Top level domain

www.webdevbasics.net

Second level domain – the name you register and pay for

www.webdevbasics.net

Subdomain or web server name

www.webdevbasics.net44

Top Level Domain Names

The top level domain is either a generic top

level domain, such as .com or a country-code

top level domain, such as fr for France or au

for Australia.

Most Common TLD’s are:

com

net

org

edu45

Subdomain

A subdomain can be configured to house a

separate website located at the same domain.

For example, these are some subdomains in

use at Google.com

mail.google.com

maps.google.com

news.google.com

46

ICANN

The Internet Corporation for Assignment

Names and Numbers (ICANN) administers

generic top-level domain names.

ICANN accepts proposals for generic TLD

names and periodically launches new one.

https://iwantmyname.com/domains/new-gtld-

domain-extensions

47

Domain Name System

The Domain Name System (DNS) associates

these IP addresses with the text-based URL

and domain names you type into a browser.

48

49

What happens

when you type a

URL into the

browser address

bar?

50

Information on the Web

Anyone can publish anything on the Web.

How can you tell if the information you’ve

found is reliable.

1. Is the organization credible?

2. How recent it the information?

3. Are there links to additional resources?

51

Ethical Use of Information of the

Web

You should consider the following issues relating to the ethical use of the information you get from the Web.

Is it acceptable to copy someone’s graphic to use on your website?

Is it acceptable to copy someone’s music or video to use on your website?

Is it acceptable to copy someone’s website design to use on your site or on a client’s site?

52

Is it acceptable to copy an essay that appears

on a web page and use it or parts of it as your

writing?

Is it acceptable to insult someone on your

website or link to another website in a

derogatory manner?

53

The answer is NO.

The World Intellectual Property Organization (WIPO) is dedicate to protecting intellectual property rights internationally.

You can license your work using Creative Commons license that informs others who want to use your work exactly what they can and cannot do with it.

54

55

What is Hypertext Markup Language?

Web pages are created using Hypertext Markup Language (HTML), which is the authoring language used to create documents on the World Wide Web.

HTML uses a special set of mark up symobls or codes called tags to define the structure and layout of a web document and specify how the page is to be displayed in the browser.

A Web page is a file that contains text and HTML tagsHTML Tags mark the text to define how it should display

when viewed in a browser

Example: <strong></strong> are tags used to indicate bold text

<p></p> used to indicate a new paragraph

56

HTML Elements

Most HTML elements consist of three parts:

a start tag, content and an end tag

<strong> sample text </strong>

These kinds of tags are called container tags

because they contain text between the

opening and closing tags

57

Example of what a tag looks like:

<h1> We'll be open soon</h1>

<p>

<strong> Type some text here

</strong>

</p>

<p> Type text here too! </p>

The browser ignores any spaces it encounters in the text

editor. It is good to include them for readability.

58

Extensible Hypertext Markup

Language (XHTML)

Extensible Markup Language (XML) is a markup language that uses tags to describe the structure and content on a document, NOT the format.

Extensible Hypertext Markup Language (XHTML) is a reformulation of HTML so it conforms to the rules of XML.

XHTML combines the benefits of the display

features of HTML4 with the strict coding standards required by XML

59

XHTML Coding RulesYou should follow these rules to make sure your HTML

code conforms to the XHTML standards.

1. HTML file must include a DOCTYPE statement.

2. All tags and attributes must be written in lowercase.

3. All attribute must be given a value and it must be

enclosed in quotes.

4. All tags must be closed.

5. All elements must be properly nested.

Correct: <p> this paragraph contains some <em>emphasized text

</em> </p>

Incorrect:<p> this paragraph contains some <em>emphasized text </p>

</em>

HTML 5

HTML 5 is the newest version of HTML and is

intended to be the successor to HTML and will

replace XHTML.

HTML5 incorporates features of both HTML

and XHTML, adds new elements, provides

functionality such as form edits and native

video and is designed to be backwards

compatible.

60

The W3C approved HTML5 for

recommendation status in late 2012 and it

reached final Recommendation status in late

2014. The W3C continues its development of

HTML adding more new elements, attributes

and features in HTML 5.1 which is currently in

draft form.

61

Document Type Definition

The DTD defined the version of HTML

contained in the document.

Browsers and HTML code use the information

in the DTD when processing the web page.

The DTD statement, better known as the

Doctype statement is the first line of a web

page document.

<!DOCTYPE html>

62

Parts of the Web Page Template

Every single web page you create will include

the following elements (or tags):

html

head

title

meta

body

63

HTML Element

This indicates that the document is HTML formatted. The html element tells the browser how to interpret the document.

The opening html tag is places on a line below the DTD.

The closing html tag is placed at the end of the document and it indicates the end of the web page.

It also indicates the spoken language of the text in the document. lang = “en” indicates English.

64

<!DOCTYPE html>

<html lang = “en”>

</html>65

Head Section

Elements that are located in the head section include the title of the web page, meta tags that describe the document and references to scripts and styles.

Head element (or tag)<head>

You will always code at least 2 other elements in the head section: the title element and a meta element.

.

66

Title and Meta elements

<title> configures the text that will appear in the title bar of the browser window.

The title is also associated when the page is bookmarked and printed.

Search engines use the title to help determine keyword relevance and display the title in the results page of the search.

<meta> describes a characteristic of a web page such as character encoding.(web pages typically use utf-8)

67

<head>

<title> title of page </title>

<meta charset=“utf-8”> This is a stand alone tag (referred

to as a void element in html5)

</head>

68

Body Section

<body>

Everything on the page

</body>

The body section contains everything on the

web page that you want to show in the

browser window. This is all text, images and

other elements that make up the page.

69

Template should look like:

70

These additional meta tags help

the browser index the page for

search engines. The content will

be completed for each page.