More HTML - Internet Database Lab.
Download
Report
Transcript More HTML - Internet Database Lab.
Great Ideas of CS with Java
Part 1 WWW & Computer programming in the language Java
Ch 1: The World Wide Web
Ch 2: Watch out: Here comes Java
Ch 3: Numerical computation & Function
Ch 4: Subroutines & Databases
Ch 5: Graphics
Ch 6: Simulation
Ch 7: Software engineering
Part 2 Understanding what a computer is and how it works
Ch 8: Machine architecture
Ch 9: Language translation
Ch 10: Virtual Environment for Computing
Ch 11: Security, Privavcy, and Wishful thinking
Ch 12: Computer Communication
Part 3 Advanced topics
Ch 13: Program Execution Time
Ch 14: Parallel Computation
Ch 15: Noncomputability
Ch 16: Artificial intelligence
1
SNU
IDB Lab.
Ch 1. The World Wide Web
Copyright © SNU IDB Lab.
SNU
IDB Lab.
Table of Contents
World History and Where We Are
Let’s Create Some Web Pages
More HTML
We Love HTML, But…
Summary
3
SNU
IDB Lab.
World History and Where We are (1)
The 3 most important events in human history ?
The
The
The
The
….
evolution of spoken language
discovery of fire
invention of printing press
Industrial Revolution
How about WWW as a candidate?
A worldwide electronic communication network that potentially
interconnects billions of individuals, businesses, governmental and
educational institutions, libraries, and political, social, and religious
groups as well as computers, databases, residences, automobiles,
even home appliances
4
SNU
IDB Lab.
World History and Where We are (2)
The evolution of World Wide Web is an important event.
WWW has been growing at an exponential rate
Now is a good time to understand the WWW technology and
especially networking
This chapter gets us started on:
What is WWW
How does WWW work
What can WWW (not) do
How do we stay safe within the WWW environment
5
SNU
IDB Lab.
Table of Contents
World History and Where We Are
Let’s Create Some Web Pages
More HTML
We Love HTML, But….
Summary
6
SNU
IDB Lab.
Let’s Create Some Web Pages
WWW: revolution that nobody anticipated
WWW is Hypertext
Linked property makes WWW what it is today
Links to Text
Links Other Network Resources!
Formerly “FTP” “Telnet” were painful for novices
HTML
(Hyper Text Markup Language)
Simplest way to specify web page
Platform (OS, HW) Independent Text Specification
A library of various TAGs for text presentation
Interpreted Locally in the Web Browser
The origin is Text Formatter software
SCRIBE Troff, Nroff TEX, PostScript LaTEX SGML HTML XML
7
SNU
IDB Lab.
Simple Web Page (1/2)
<html>
<head>
<title>The Nobel Prizes</title>
</head>
<body>
<h1>Alfred Nobel’s Legacy</h1>
<p>Alfred Nobel, a nineteenth-century industrialist, died in
1896 and left … </p>
<p>The Nobel Prizes are currently given for contributions
in six different areas of endeavor.</p>
</body>
</html>
8
SNU
IDB Lab.
Simple Web Page (2/2) – HTML tags
HTML element begins with <tag>, ends with </tag>
Tags are case-insensitive (e.g. <html> and <HTML> is same)
<html> denotes this is an HTML document
<head> gives heading information
<title> will be shown in the browser’s title bar
<body> Text flow of the document, including paragraphs, lists, etc.
<h1>
<p>
Headings(h1..h6) <h1> is the largest font
Paragraph
9
SNU
IDB Lab.
Table of Contents
World History and Where We Are
Let’s Create Some Web Pages
More HTML
We Love HTML, But …
Summary
10
SNU
IDB Lab.
More HTML element: Ordered List
UL(Unordered List), LI(List of Items)
The UL represents a list of items -- typically rendered as a bulleted list.
The content of a UL element is a sequence of LI elements.
For example:
<UL>
<LI>First list item
<LI>Second list item
<p>second paragraph of second item
<LI>Third list item
</UL>
11
SNU
IDB Lab.
More HTML element: Link to Other Pages
A(anchor), HREF(head anchor of a reference)
Syntax:
<a href=“URL”> text or others(images, objects, etc.) </a>
Example:
<html>
<head> <title>The Nobel Prizes</title> </head>
<body>… The Nobel Prizes are currently given for contributions in
<a href=“nobelareas.htm”> six different areas </a> of endeavor.
</body>
</html>
12
SNU
IDB Lab.
More HTML element: Ordered List
OL(Ordered List), LI(List of Items)
The OL represents an ordered list of items -- typically rendered as
a numbered list.
The content of a OL element is a sequence of LI elements.
For example:
<ol>
<li>Physics
<li>Chemistry
<li>Economics
</ol>
13
SNU
IDB Lab.
More HTML element: Definition List
DL(Definition List), DT(Definition Term), DD(Definition Definition)
A definition list is a list of terms and corresponding definitions.
For example:
<dl>
<dt> HTML <dd> Hyper Text Markup Language
<dt> WWW <dd> World Wide Web
</dl>
14
SNU
IDB Lab.
More HTML element: Leveling Headings
<h1>...<h6> create sequentially lower levels of headings
Example: <h1> Lists </h1>
<p>There are two types of lists,
unordered lists and ordered lists.</p>
<h2> Unordered Lists </h2>
<p>Unordered lists have the properties that …</p>
15
SNU
IDB Lab.
More HTML element: Modifying Typefaces
B Bold, I Italic, SUB H2O, SUP Ca2+
Example:
<b> <i> F=ma </i> </b> <br>
CH <sub>3</sub> COO <sup>-</sup>
<br> specifies a line break. (No closing tag(</br>) )
16
SNU
IDB Lab.
More HTML element: Preformatted Text
<pre> represents a character cell block of text and is suitable for text
that has been formatted for a mono-spaced (spacing is same across
characters) font.
Example:
<pre>
12345678901234
interesting
</pre>
12345678901234<br>
interesting
17
SNU
IDB Lab.
More HTML element: Horizontal Rule
<hr> put a horizontal rule(line).
You can simply <hr>, or <hr size=n width="n%">
Example:
<h1> Horizontal Rule </h1>
<hr size=4 width="50%">
Below the horizontal rule…
18
SNU
IDB Lab.
More HTML: URL’s Format
URLs (Uniform Resource Locators)
Addressing scheme for rosources (file, site name, port)
protocol://host.domain[:port]/path/file
protocol : ftp, http, gopher, WAIS, news, telnet
Port: logical access path to web server
http 80 port
Different port number can be used for avoiding collision
8080 for updating a web site
19
SNU
IDB Lab.
Table of Contents
World History and Where We Are
Let’s Create Some Web Pages
More HTML
We Love HTML, But …
Summary
20
SNU
IDB Lab.
We Love HTML, But …
We studied HTML to understand what the World Wide Web is.
Once we understand both WWW and HTML, we can move on to the next
level of computer science and networking course
Conveniently, the MS-Word provides “Save as Web Page” to convert your
document into HTML commands
Whole HTML specification is found at:
http://www.w3.org/MarkUp/html-spec
While you are surfing the net, you can see HTML source by selecting
“view source” on the menu in the browser.
21
SNU
IDB Lab.
A Simple Web Request Example
Web Server
User Request
[http://idb.snu.ac.kr/~hjk]
User
“idb.snu.ac.kr”
Response
[/home/hjk/public_html/index.html]
“~” means the home directory of the user
e.g. “~hjk” means “/home/hjk”
“public_html” The directory containing your web pages
22
SNU
IDB Lab.
Another Simple Web Request Example
User Request
[http://idb.snu.ac.kr]
Web Server
idb.snu.ac.kr
User
Response
[/home/www/public_html/index.html]
What is “www” user?
The default user of the web server
Web server will serve “~www/public_html”
(“/home/www/public_html”) if the server is requested
23
SNU
IDB Lab.
Steps for Publishing your web site
Get a web host
Edit your home page with 아래한글 or MS-Word
SNU plaza machine, any ISP machine
Suppose server name is “testserver.com” and your log-id is “hjk”
Name the file as index.html
Set up the ftp program & Transfer the index.html to the
web host
Load the index.html into testserver.com/hjk/public_html/
24
SNU
IDB Lab.
Table of Contents
World History and Where We Are
Let’s Create Some Web Pages
More HTML
We Love HTML, But …
Summary
25
SNU
IDB Lab.
Summary
Owing to the WWW technology, humankind is entering a new era
We studied the basics of HTML and the use of a browser for viewing
HTML pages
how to create a simple two-page web
how to make it part of the WWW
Besides simply displaying a page, we might like to see lots of action
and reaction
More can be done with Java, as you will see in the next chapter.
26
SNU
IDB Lab.
If you want to study more on WWW and HTML
and you are energetic…
(But I don’t think so ㅋㅋ)
Free online HTML tutorial site http://www.w3schools.com/html/
Creating a Web Page with HTML : Visual QuickProject Guide (Visual
Quickproject Series), Peachpit press, by Elizabeth Castro
Many many related web sites and “웹과 HTML” books available in
시중서점
You should be able to have a good command of HTML, not
automatic web page building tools like namo or blog.
27
SNU
IDB Lab.
Ch1: The WWW
Textbook Review Time
28
SNU
IDB Lab.