Chapter 1: Intro Internet & Chapter 2
Download
Report
Transcript Chapter 1: Intro Internet & Chapter 2
Introduction to Internet
Creating a Basic Web Pages
CSCE 102 - General Applications
Programming
By
Benito Mendoza
Department of
Computer Science & Engineering
2016/4/12
Benito Mendoza
CSCE 102 - Chapters 1 and 2
1
Introduction to Internet
Creating a Basic Web Pages
The evolution
Services
We will use Vidal’s slides to illustrate it.
The Internet by José Vidal
2016/4/12
Benito Mendoza
CSCE 102 - Chapters 1 and 2
2
Introduction to Internet
Creating a Basic Web Pages
The evolution
Services
Basic Services
FTP – File Transfer Protocol (sftp)
Moves files from computer to computer
TELNET (ssh)
Connect to remote computer as if a local user
Early 70’s Ray Tomlinson
Hacked FTP to pass messages to users
E-Mail was born
World-wide use of Internet
The other reason for explosion in use of Internet is due
to…
CSCE 102 - Chapters 1 and 2
Introduction to Internet
Creating a Basic Web Pages
The evolution
Services
The Web
Timothy Berners-Lee
1989
Trying to share documents
between research groups at
CERN
Hypertext Markup language –
formatting
Transfer protocol –
send/receive marked-up
document
CSCE 102 - Chapters 1 and 2
Introduction to Internet
Creating a Basic Web Pages
The evolution
Services
Basic Services
HTML – Hypertext Markup Language
HTTP – Hypertext Transfer Protocol
Browser
W W W – World Wide Web
Hypertext – reference to another article of
information
URL – Uniform Resource Locator
URI – Uniform Resource Identifier
CSCE 102 - Chapters 1 and 2
Introduction to Internet
Creating a Basic Web Pages
The evolution
Services
Basic Services
First browsers were text-based
1993 @ U. Illinois, MOSAIC created
GUI Browser – Graphical User Interface
Mosaic Netscape
CSCE 102 - Chapters 1 and 2
Introduction to Internet
Creating a Basic Web Pages
The evolution
Services
Client-Server Computing
Client
Server
Web page access
Document is delivered at the client
Comm. Connection is broken after document
arrives at client
CSCE 102 - Chapters 1 and 2
Introduction to Internet
Creating a Basic Web Pages
“Surfing”
The HTML Source Document
Creating a Source Document
HTML, XML, XHTML
Click hyperlink
Browser requests document from server
Server returns document requested
Browser displays document
CSCE 102 - Chapters 1 and 2
Introduction to Internet
Creating a Basic Web Pages
Source Code
The HTML Source Document
Creating a Source Document
HTML, XML, XHTML
Document contains HTML source code
Describes content and layout of Web page
Content:
what to display
Layout:
How it will look
How it will behave
CSCE 102 - Chapters 1 and 2
Introduction to Internet
Creating a Basic Web Pages
HTML Document
The HTML Source Document
Creating a Source Document
HTML, XML, XHTML
HTML documents are text-only
What you’d see on a keyboard
Layout specified by “elements” or “tags”
Specify the structure of the page
Classify the contents
“This content is a heading”
“This content is just some text”
CSCE 102 - Chapters 1 and 2
Introduction to Internet
Creating a Basic Web Pages
Tags
The HTML Source Document
Creating a Source Document
HTML, XML, XHTML
Heading tags
<h1>Some text goes here</h1>
1–6
Most important – least important
Paragraph tag
<p>The paragraph goes here</p>
CSCE 102 - Chapters 1 and 2
Introduction to Internet
Creating a Basic Web Pages
HTML Structure
The HTML Source Document
Creating a Source Document
HTML, XML, XHTML
4 main elements of HTML source
code
<html>
html
head
title
body
<head>
<title>
</title>
</head>
<body>
</body>
</html>
CSCE 102 - Chapters 1 and 2
Introduction to Internet
Creating a Basic Web Pages
The HTML Source Document
Creating a Source Document
HTML, XML, XHTML
Use plain-text editors (Notepad)
Other types of editors (like MS WORD) use
hidden formatting codes
Filename.htm (or .html)
No spaces (underscore character instead)
Enclose in quotes when using Notepad
File – Open …
Drag icon into open browser window
Does indentation matter?
Do multiple CR’s affect the text?
CSCE 102 - Chapters 1 and 2
Introduction to Internet
Creating a Basic Web Pages
Nest Properly
Correct
Incorrect
The HTML Source Document
Creating a Source Document
HTML, XML, XHTML
<head>
<title>Chapter
2</title>
</head>
<head>
<title>Chapter 2
</head>
</title>
CSCE 102 - Chapters 1 and 2
Introduction to Internet
Creating a Basic Web Pages
HTML
The HTML Source Document
Creating a Source Document
HTML, XML, XHTML
Browsers:
Evaluate from the top down
Ignore whitespace
Tabs, extra spaces, line breaks
Make your HTML code easily read by
humans but without human formatting
Does HTML code have to be lower case?
CSCE 102 - Chapters 1 and 2
Introduction to Internet
Creating a Basic Web Pages
HTML
The HTML Source Document
Creating a Source Document
HTML, XML, XHTML
Browsers developed along diverging paths
Netscape
Explorer
Features were added – not always in the
same way
1994 - W3C created
Create an “official” version of HTML
CSCE 102 - Chapters 1 and 2
Introduction to Internet
Creating a Basic Web Pages
HTML
The HTML Source Document
Creating a Source Document
HTML, XML, XHTML
PCs – not much of a problem
Handheld devices – HUGE problem
Need:
A standardized version of HTML
Compatible with all types of devices
PCs, handhelds, others?
HTML development stopped at V4
CSCE 102 - Chapters 1 and 2
Introduction to Internet
Creating a Basic Web Pages
XML
The HTML Source Document
Creating a Source Document
HTML, XML, XHTML
XML – Extensible Markup Language
Specifies a universal, structured format
Data is classified by its meaning
Users could create custom tags
Car dealer: <make> <model> <year>
Very strict syntax rules ensure universality
Case matters!
CSCE 102 - Chapters 1 and 2
Introduction to Internet
Creating a Basic Web Pages
XHTML
The HTML Source Document
Creating a Source Document
HTML, XML, XHTML
XHTML – Extensible HTML
Official release January 2000
XHTML is not XML but it is based on XML
Inherits rules and benefits of XML
Thus, XHTML is case-sensitive:
<body> ≠ <BODY> ≠ <Body> ≠ <BoDy>
Why?
CSCE 102 - Chapters 1 and 2
Introduction to Internet
Creating a Basic Web Pages
XHTML
The HTML Source Document
Creating a Source Document
HTML, XML, XHTML
Exceptions imply complexity
Software cannot be written simply
It must account for each exception
individually
Programs must therefore be larger and more
difficult to maintain
Complexity requires
Additional processing (slower) an
More memory (larger and more expensive)
CSCE 102 - Chapters 1 and 2
Introduction to Internet
Creating a Basic Web Pages
XHTML
The HTML Source Document
Creating a Source Document
HTML, XML, XHTML
How to make HTML into XHTML?
Before <html> add:
<?xml version="1.0" encoding="UTF-8"?>
<!DOCTYPE html
PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitioinal.dtd">
1st line: XML Declaration
2nd line: Document Type Definition
CSCE 102 - Chapters 1 and 2
Introduction to Internet
Creating a Basic Web Pages
The HTML Source Document
Creating a Source Document
HTML, XML, XHTML
Also, change <html> tag itself:
<html xmlns=“http://www.w3.org/1999/xhtml”>
XML namespace
“Tags defined in this document conform to
the W3C definitions found at ...”
Start using the new standards NOW
CSCE 102 - Chapters 1 and 2
Introduction to Internet
Creating a Basic Web Pages
Meta
The HTML Source Document
Creating a Source Document
HTML, XML, XHTML
<meta> tag describes document content
Useful for search engines
Optional, goes in <head> section
Attributes:
Name: “keywords”, “description”
Content
<meta name=“keywords” content=“coffee, tea, imported” />
CSCE 102 - Chapters 1 and 2
Introduction to Internet
Creating a Basic Web Pages
The HTML Source Document
Creating a Source Document
HTML, XML, XHTML
Paragraphs and Line Breaks
Can’t use whitespace to format document
HTML uses elements (tags) and only
elements to define document’s structure
Paragraph tag <p>
Classifies a block of text as a paragraph
Preceded and followed by a blank line (usually)
Can add other attributes (Chapter 3)
CSCE 102 - Chapters 1 and 2
Introduction to Internet
Creating a Basic Web Pages
The HTML Source Document
Creating a Source Document
HTML, XML, XHTML
Paragraphs and Line Breaks
Break tag <br>
Generates a line break
Without inserting a blank line like the <p> tag.
“Empty” tag – no </br> needed
<br /> instead (space optional)
/ required by XHTML to indicate an empty
element
Ch02-Ex-05
CSCE 102 - Chapters 1 and 2
Introduction to Internet
Creating a Basic Web Pages
The HTML Source Document
Creating a Source Document
HTML, XML, XHTML
Browsers are Idiot Proof
Try to compensate for errors.
Different browsers handle html errors
differently.
Follow rules to try and avoid future
complications.
CSCE 102 - Chapters 1 and 2
Introduction to Internet
Creating a Basic Web Pages
XHTML DTD
The HTML Source Document
Creating a Source Document
HTML, XML, XHTML
Strict
Use this DTD when you want clean markup, free
of presentational clutter. Use this together with
Cascading Style Sheets (CSS)
Transitional
Use this DTD when you need to use XHTML's
presentational features because your readers
don't have browsers that support Cascading
Style Sheets (CSS)
Frameset
Use this DTD when you want to use frames!
CSCE 102 - Chapters 1 and 2
Introduction to Internet
Creating a Basic Web Pages
The HTML Source Document
Creating a Source Document
HTML, XML, XHTML
Block-Level Elements
Define a complete section or block of text.
Browser puts blank line before and after
block.
Does not need <p> to get line blank.
Example: Heading elements, Blockquote
element
CSCE 102 - Chapters 1 and 2
Introduction to Internet
Creating a Basic Web Pages
Inline Elements
The HTML Source Document
Creating a Source Document
HTML, XML, XHTML
Used to define structure of a sequence of
characters within a line of text.
Example: <em> and <strong> elements
CSCE 102 - Chapters 1 and 2
Introduction to Internet
Creating a Basic Web Pages
Font Size
The HTML Source Document
Creating a Source Document
HTML, XML, XHTML
Inline elements <big> and <small>
CSCE 102 - Chapters 1 and 2
Introduction to Internet
Creating a Basic Web Pages
Code Summary
The HTML Source Document
Creating a Source Document
HTML, XML, XHTML
Refer to end of Chapter 2.
Page 48
CSCE 102 - Chapters 1 and 2