CS101 Sect 6 Webx - Web Design John Cabot University
Download
Report
Transcript CS101 Sect 6 Webx - Web Design John Cabot University
CS 101 Sect 6 – the World Wide Web
1
Introduction: history and essential standards of the World
Wide Web.
How the Web works: servers and browsers.
Web building primer. What is hypertext, a basic web page.
Introduction to Web design: how to create a web site to
express ideas graphically, writing for the web.
Tools for Web design: Web editors, HTML Editors, Web
publishing.
Building blocks of a web page, adding colours, images,
links and tables, HTML writing standards and CSS.
References online: the W3C tutorial and other reference
material.
[email protected]
Your first Web page
2
Just follow me, do not worry if you do not
understand
Open notepad
Copy the text from the following slide
[email protected]
Text for your first web page
3
<html>
<head>
<title>Head First Lounge</title>
</head>
<body>
<h1>Welcome to the Head First Lounge</h1>
<p>
Join us any evening for refreshing elixirs, conversation and maybe a game or two of
<em>Dance Dance Revolution</em>.
Wireless access is always provided; BYOWS (Bring your own web server).
</p>
<h2>Directions</h2>
<p>
You’ll find us right in the center of downtown Webville. Come join us!
</p>
</body>
</html>
[email protected]
Your first Web page
4
Save on your desktop as myname1.html (“myname”
is supposed to be “your” name, e.g. In my case that
would be gazziano1.html, ok ??)
Double click on the file you saved
There is your first web page
[email protected]
You’re closer to learning HTML than you think
5
Surprise: class test now
Take a look at the “tags” (the statements within <>)
and see if you can guess what they tell the browser
about the content
10 minutes to complete
[email protected]
Text for your second web page
6
<html>
<head>
<title>Head First Lounge</title>
</head>
<body>
<h1>Welcome to the Head First Lounge</h1>
<img src=”drinks.gif”> ((WHAT?? WHERE IS THIS??)) (ASK THE TEACHER)
<p>
Join us any evening for refreshing elixirs, conversation and maybe a game or two of
<em>Dance Dance Revolution</em>.
Wireless access is always provided; BYOWS (Bring your own web server).
</p>
<h2>Directions</h2>
<p>
You’ll find us right in the center of downtown Webville. Come join us!
</p>
</body>
</html>
[email protected]
The Internet
7
Sometimes called simply “the Net,” the Internet is a
worldwide system of computer networks—a network
of networks hence Internet, in which users at any
one computer can get information from any other
computer
The Internet uses a portion of the total resources of
the currently existing public telecommunication
networks. Technically, what distinguishes the
Internet is its use of a set of protocols called TCP/IP
(Transmission Control Protocol/Internet Protocol).
[email protected]
The World Wide Web
8
Runs on the Internet, Intranet, Extranet
Uses the Hypertext Protocol (HTTP)
We just call it the Internet, but it is a subset
of it
[email protected]
Files on the Web
9
[email protected]
10
[email protected]
Web server and web browser are different
11
[email protected]
12
The
W3school
, world’s largest website
for developers is a
fundamental source of
references and training.
They set the Web
standards !!!
Intranet / Internet tools for CS 130
[email protected]
13
Test solution
[email protected]
14
Now for some serious
stuff
From now on we will use
an HTML editor
Let us open our index
and mission file with it
Follow my instructions
Find Coffee Cup Html Editor on
your pc
[email protected]
15
Find the LOUNGE folder
with files on MYJCU
shared files
Download the files in
your
X:/CS130/LOUNGE/
Folder
Open HTM editor and
load all .html
Next stage: rebuild a better
LOUNGE
[email protected]
16
Find the LOUNGE folder
with files on MYJCU
shared files
Download the files in
your
X:/CS130/LOUNGE/
Folder
Open HTM editor and
load all .html
[email protected]
17
[email protected]
18
[email protected]
19
[email protected]
20
[email protected]
21
[email protected]