1

Web Design
Web Design

HTML & CSS :

design and build websites
h t t p : / / w w w. h t m l a n d c s s b o o k . c o m

S
 2

Introduction
Web Design

S
 3

BASIC
CONCEPTS

■ Internet
Web Design

■ Web（WWW）

■ Webpage

■ Website

S
 4

Internet

The Internet is an international computer

network. It connects computer networks all
over the world. People can get different
Web Design

kinds of information from it.

S
 5

Web ( WWW )
World Wide Web

The World Wide Web, or just "the Web“, as

ordinary people call it, is a kind of service provided
on the Internet. The Web consists of pages that
Web Design

can be accessed using a Web browser.

Other services like Telnet, FTP, and e-mail are all

provided on the Internet, they are not part of the
World Wide Web.

S
 6

Web Page

Web pages are what make up the World Wide

Web. These documents are written in HTML
(hypertext markup language) and are translated
Web Design

by your Web browser.

Web pages can either be static or dynamic. Static

pages show the same content each time they are
viewed. Dynamic pages have content that can
change each time they are accessed.

S
 7

Web Site

A website, or Web site, is not the same

thing as a Web page. To put it simply, a
Web site is a collection of Web pages. For
Web Design

example, taobao.com is a Web site, but

there are millions of Web pages that make
up the site.

S
 8

HOW PEOPLE
ACCESS THE WEB
BROWSERS

People access websites using software called a

web browser. Popular examples include Firefox,
Internet Explorer, Safari, Chrome, and Opera.
Web Design

In order to view a web page, users might type a

web address into their browser, follow a link from
another site, or use a bookmark.

S
 9

HOW PEOPLE
ACCESS THE WEB
WEB SERVERS

When you ask your browser for a web page, the

request is sent across the internet to a special
computer known as a web server which hosts the
Web Design

website.

Web servers are special computers that are

constantly connected to the Internet, and are
optimized to send web pages out to people who
request them.

S
 10

HOW PEOPLE
ACCESS THE WEB
WEB SERVERS

Some big companies run their own web servers,

but it is more common to use the services of a
web hosting company who charge a fee to host
Web Design

your site.

S
 11

HOW PEOPLE
ACCESS THE WEB
DEVICES

People are accessing websites on an

increasing range of devices including desktop
computers, laptops, tablets, and mobile
Web Design

phones. It is important to remember that

various devices have different screen size and
some have faster connections to the web
than others.

S
 12

HOW WEBSITES
ARE CREATED
W H AT Y O U S E E

When you are looking at a website, it is

most likely that your browser will be
receiving HTML and CSS from the web
Web Design

server that hosts the site. The web browser

interprets the HTML and CSS code to
create the page that you see.

S
 13

HOW WEBSITES
ARE CREATED
H O W I T I S C R E AT E D

Small websites are often written just using HTML and

CSS.
Web Design

Larger websites — in particular those that are updated

regularly and use a content management system(CMS),
blogging tools, or e-commerce software — often make
use of more complex technologies on the web server,
but these technologies are actually used to produce
HTML and CSS that is then sent to the browser.

S
 14

HOW WEBSITES
ARE CREATED
H O W I T I S C R E AT E D

Larger, more complex sites may use a database to

store data, and programming languages such as PHP,
ASP.Net, Java, or Ruby on the web server.
Web Design

S
 15

HOW THE WEB

WORKS

■ A user in Barcelona visits sony.jp in Tokyo

■ A user in New York visits google.com in San Francisco

Web Design

■ A user in Stockholm visits qantas.com.au in Sydney

■ A user in Berlin visits alibaba.com in Hanghzou

S
 16

HOW THE WEB

WORKS
Connect to the web

■ When you connect to the web, you do

so via an Internet Service Provider(ISP).
You type a domain name or web address
Web Design

or URL into your browser to visit a site.

S
 17

HOW THE WEB

WORKS
Connect to the web

A URL is the address of a specific webpage or file on the

Internet. For example, the URL of the alibaba website is
"http://alibaba.com." The address of a certain page is
"http://alibaba.com/en/index.html" and includes the
Web Design

following elements:

■ http:// – the URL prefix, which specifies the protocol used

to access the location

■ alibaba.com – the server name or IP address of the server

■ /en/index.html – the path to the directory or file

S
 18

HOW THE WEB

WORKS
Contacts DNS

■ Your computer contacts a network of

servers called Domain Name System(DNS)
servers. These act like phone books; they
Web Design

tell your computer the IP address

associated with the requested domain
name.

S
 19

HOW THE WEB

WORKS
Contacts DNS

■ An IP address, or simply an "IP," is a unique

address that identifies a device on the Internet
or a local network. There are two primary types
Web Design

of IP address formats used today — IPv4 and

IPv6. IPv4 is the most widely used version of the
Internet Protocol. It defines IP addresses in a 32-
bit format, which looks like 123.123.123.123.
Each three-digit section can include a number
from 0 to 255.

S
 20

HOW THE WEB

WORKS
Contacts web server

■ The unique number that the DNS server

returns to your computer allows your
browser to contact the web server that
Web Design

hosts the website you requested.

A web server is a computer that is

constantly connected to the web, and is set
up especially to send web pages to users.

S
 21

HOW THE WEB

WORKS
Sends the page back

■ The web server then sends the page you

requested back to your web browser.
Web Design

S
 22

Structure
Web Design

S
 23

HOW PAGES USE

STRUCTURE

When you read stories in a newspaper, for each

story, there will be a headline, some text, and
possibly some images. If the article is a long piece,
Web Design

there may be subheadings that split the story into

separate sections or quotes from those involved.

Structure helps readers understand the stories in

the newspaper.

S
 24

STRUCTURING
WORD DOCUMENT

The use of headings and subheadings in any

document often reflects a hierarchy of
information.
Web Design

For example, a document might start with a

large heading, followed by an introduction or
the most important information. This might
be expanded upon under subheadings lower
down on the page.

S
 25

HTML
H y p e r Te x t M a r k u p L a n g u a g e

Markup in HTML means "set tags". HTML

defines many commands (tags) for
typesetting.
Web Design

HTML embedded various tags into the web

pages. This makes up the so-called HTML
document. HTML document is an ASCII
code file that can be created with any text
editor.

S
 26

HTML
H y p e r Te x t M a r k u p L a n g u a g e

Only when a HTML document is suffixed

with .html or .htm, browsers interpret the
tags in the document.
Web Design

If the HTML document is replaced by .txt as

its suffix, the HTML interpreter does not
interpret the tags, and the browser will only
show the original text file.

S
 27

HTML
H y p e r Te x t M a r k u p L a n g u a g e

When the browser reads the HTML

document from the server, according to the
tags in the HTML document and the size
Web Design

and resolution of the display used by the

browser, it rearranges the typesetting and
restores the page.

S
 28

HTML
H y p e r Te x t M a r k u p L a n g u a g e

<html>
<body>
<h1>This is the Main Heading</h1>
<p>This text might be an introduction to the rest of the
page. And if the page is a long one it might be split up into
Web Design

several sub-headings.</p>
<h2>This is a Sub-Heading</h2>
<p>Many long articles have sub-headings to help you
follow the structure of what is being written.
There may be even be sub-sub-headings(or lower-level
headings).</p>
<h2>Another Sub-Heading</h2>
<p>Here you can see another sub-heading.</p>
</body>
</html>

S
S
29
Web Design
S
30
Web Design
S
31
Web Design
 32

HTML BASIC TAGS

B O D Y, H E A D & T I T L E

<body>
Everything inside this element is shown inside the
browser window.
Web Design

<head>
Before the <body> element you will often see a
<head> element. This contains information about
the page. You will usually find a <title> element
inside the <head> element.

S
 33

HTML BASIC TAGS

B O D Y, H E A D & T I T L E

<title>
The contents of the <title> element are
either shown in the top of the browser, above
Web Design

where you usually type in the URL of the

page you want to visit, or on the tab for that
page (if your browser uses tabs to allow you
to view multiple pages at the same time).

S
 34

CREATING A WEB
PAGE ON A PC
Use Notepad

■ Press Start button

Start
All Programs(or Programs)
Accessories
Notepad
Web Design

■ Type the HTML code shown before.

■ Go to the File menu and selet Save as… to

save the file somewhere you can remember.
Save this file as first-test.html

■ start your web browser. Go to the File menu

and select Open. Browse to the file that you just
created, select it and click on the Open button.

S
 35

CODE IN A CONTENT
MANAGEMENT
SYSTEM

If you are working with a content

management system, blogging platform, or e-
commerce application, you will probably log
into a special administration section of the
Web Design

website to control it.

The tools provided in the administration

sections of these sites usually allow you to
edit parts of the page rather than the entire
page, which means you will rarely see the
<html>,<head>, or <body> elements.

S
 36

Assignment
Web Design

S
 37

Requirements：

1. Install the Web server software on your computer and set up

your own Web server.

2. Use a text editor to create the example web pages in the

courseware by yourself, and master the meaning and usage of
the markups in the example.
Web Design

3. Set the example web page file as the home page of the local
website, and visit it by entering the url address
http://localhost/ in the browser.

4. After completion, submit the homepage file, as well as a

screenshot of accessing the website with browser.

S
 38
Web Design

Thank You！
谢谢！