View
225
Download
0
Category
Preview:
Citation preview
CSCE 102 - Chapters 1 and 2
CSCE 102 - General Applications Programming
CSCE 102 - General Applications Programming
23/4/19 Benito Mendoza 1
By
Benito Mendoza
Department of Computer Science & Engineering
Introduction to InternetCreating a Basic Web Pages
CSCE 102 - Chapters 1 and 223/4/19 Benito Mendoza 2
We will use Vidal’s slides to illustrate it.
The Internet by José Vidal
The evolutionServices
Introduction to InternetCreating a Basic Web Pages
CSCE 102 - Chapters 1 and 2
Basic ServicesFTP – 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 TomlinsonHacked FTP to pass messages to usersE-Mail was bornWorld-wide use of Internet
The other reason for explosion in use of Internet is due to…
The evolutionServices
Introduction to InternetCreating a Basic Web Pages
CSCE 102 - Chapters 1 and 2
The WebTimothy Berners-Lee
1989Trying to share documents between research groups at CERNHypertext Markup language – formattingTransfer protocol – send/receive marked-up document
The evolutionServices
Introduction to InternetCreating a Basic Web Pages
CSCE 102 - Chapters 1 and 2
Basic Services
HTML – Hypertext Markup LanguageHTTP – Hypertext Transfer ProtocolBrowserW W W – World Wide WebHypertext – reference to another article of informationURL – Uniform Resource LocatorURI – Uniform Resource Identifier
The evolutionServices
Introduction to InternetCreating a Basic Web Pages
CSCE 102 - Chapters 1 and 2
Basic Services
First browsers were text-based1993 @ U. Illinois, MOSAIC created
GUI Browser – Graphical User Interface
Mosaic Netscape
The evolutionServices
Introduction to InternetCreating a Basic Web Pages
CSCE 102 - Chapters 1 and 2
Client-Server Computing
ClientServerWeb page access
Document is delivered at the clientComm. Connection is broken after document arrives at client
The evolutionServices
Introduction to InternetCreating a Basic Web Pages
CSCE 102 - Chapters 1 and 2
“Surfing”
Click hyperlinkBrowser requests document from serverServer returns document requestedBrowser displays document
The HTML Source DocumentCreating a Source DocumentHTML, XML, XHTML
Introduction to InternetCreating a Basic Web Pages
CSCE 102 - Chapters 1 and 2
Source Code
Document contains HTML source codeDescribes content and layout of Web page
Content: what to display
Layout:How it will lookHow it will behave
The HTML Source DocumentCreating a Source DocumentHTML, XML, XHTML
Introduction to InternetCreating a Basic Web Pages
CSCE 102 - Chapters 1 and 2
HTML Document
HTML documents are text-onlyWhat you’d see on a keyboard
Layout specified by “elements” or “tags”
Specify the structure of the pageClassify the contents
“This content is a heading”“This content is just some text”
The HTML Source DocumentCreating a Source DocumentHTML, XML, XHTML
Introduction to InternetCreating a Basic Web Pages
CSCE 102 - Chapters 1 and 2
TagsHeading tags
<h1>Some text goes here</h1>1 – 6Most important – least important
Paragraph tag<p>The paragraph goes here</p>
The HTML Source DocumentCreating a Source DocumentHTML, XML, XHTML
Introduction to InternetCreating a Basic Web Pages
CSCE 102 - Chapters 1 and 2
HTML Structure4 main elements of HTML source code
htmlheadtitlebody
<html>
<head>
<title>
</title>
</head>
<body>
</body>
</html>
The HTML Source DocumentCreating a Source DocumentHTML, XML, XHTML
Introduction to InternetCreating a Basic Web Pages
CSCE 102 - Chapters 1 and 2
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 windowDoes indentation matter?Do multiple CR’s affect the text?
The HTML Source DocumentCreating a Source DocumentHTML, XML, XHTML
Introduction to InternetCreating a Basic Web Pages
CSCE 102 - Chapters 1 and 2
Nest Properly
<head><title>Chapter 2</title>
</head>
<head><title>Chapter 2
</head></title>
Correct
Incorrect
Introduction to InternetCreating a Basic Web Pages
The HTML Source DocumentCreating a Source DocumentHTML, XML, XHTML
CSCE 102 - Chapters 1 and 2
HTML
Browsers:Evaluate from the top downIgnore whitespace
Tabs, extra spaces, line breaks
Make your HTML code easily read by humans but without human formattingDoes HTML code have to be lower case?
Introduction to InternetCreating a Basic Web Pages
The HTML Source DocumentCreating a Source DocumentHTML, XML, XHTML
CSCE 102 - Chapters 1 and 2
HTML
Browsers developed along diverging paths
NetscapeExplorer
Features were added – not always in the same way1994 - W3C created
Create an “official” version of HTML
Introduction to InternetCreating a Basic Web Pages
The HTML Source DocumentCreating a Source DocumentHTML, XML, XHTML
CSCE 102 - Chapters 1 and 2
HTML
PCs – not much of a problemHandheld devices – HUGE problemNeed:
A standardized version of HTMLCompatible with all types of devices
PCs, handhelds, others?
HTML development stopped at V4
Introduction to InternetCreating a Basic Web Pages
The HTML Source DocumentCreating a Source DocumentHTML, XML, XHTML
CSCE 102 - Chapters 1 and 2
XML
XML – Extensible Markup LanguageSpecifies a universal, structured formatData is classified by its meaningUsers could create custom tagsCar dealer: <make> <model> <year>Very strict syntax rules ensure universalityCase matters!
Introduction to InternetCreating a Basic Web Pages
The HTML Source DocumentCreating a Source DocumentHTML, XML, XHTML
CSCE 102 - Chapters 1 and 2
XHTML
XHTML – Extensible HTMLOfficial release January 2000XHTML is not XML but it is based on XMLInherits rules and benefits of XMLThus, XHTML is case-sensitive:
<body> ≠ <BODY> ≠ <Body> ≠ <BoDy>Why?
Introduction to InternetCreating a Basic Web Pages
The HTML Source DocumentCreating a Source DocumentHTML, XML, XHTML
CSCE 102 - Chapters 1 and 2
XHTML
Exceptions imply complexitySoftware cannot be written simplyIt must account for each exception individuallyPrograms must therefore be larger and more difficult to maintain
Complexity requiresAdditional processing (slower) anMore memory (larger and more expensive)
Introduction to InternetCreating a Basic Web Pages
The HTML Source DocumentCreating a Source DocumentHTML, XML, XHTML
CSCE 102 - Chapters 1 and 2
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 Declaration2nd line: Document Type Definition
Introduction to InternetCreating a Basic Web Pages
The HTML Source DocumentCreating a Source DocumentHTML, XML, XHTML
CSCE 102 - Chapters 1 and 2
Also, change <html> tag itself:
<html xmlns=“http://www.w3.org/1999/xhtml”>
“Tags defined in this document conform to the W3C definitions found at ...”Start using the new standards NOW
XML namespace
Introduction to InternetCreating a Basic Web Pages
The HTML Source DocumentCreating a Source DocumentHTML, XML, XHTML
CSCE 102 - Chapters 1 and 2
Meta
<meta> tag describes document contentUseful for search enginesOptional, goes in <head> sectionAttributes:
Name: “keywords”, “description”Content
<meta name=“keywords” content=“coffee, tea, imported” />
Introduction to InternetCreating a Basic Web Pages
The HTML Source DocumentCreating a Source DocumentHTML, XML, XHTML
CSCE 102 - Chapters 1 and 2
Paragraphs and Line Breaks
Can’t use whitespace to format documentHTML uses elements (tags) and only elements to define document’s structureParagraph tag <p>
Classifies a block of text as a paragraphPreceded and followed by a blank line (usually)Can add other attributes (Chapter 3)
Introduction to InternetCreating a Basic Web Pages
The HTML Source DocumentCreating a Source DocumentHTML, XML, XHTML
CSCE 102 - Chapters 1 and 2
Paragraphs and Line Breaks
Break tag <br>Generates a line breakWithout inserting a blank line like the <p> tag.“Empty” tag – no </br> needed<br /> instead (space optional)/ required by XHTML to indicate an empty elementCh02-Ex-05
Introduction to InternetCreating a Basic Web Pages
The HTML Source DocumentCreating a Source DocumentHTML, XML, XHTML
CSCE 102 - Chapters 1 and 2
Browsers are Idiot Proof
Try to compensate for errors.Different browsers handle html errors differently.Follow rules to try and avoid future complications.
Introduction to InternetCreating a Basic Web Pages
The HTML Source DocumentCreating a Source DocumentHTML, XML, XHTML
CSCE 102 - Chapters 1 and 2
XHTML DTD
StrictUse this DTD when you want clean markup, free of presentational clutter. Use this together with Cascading Style Sheets (CSS)
TransitionalUse this DTD when you need to use XHTML's presentational features because your readers don't have browsers that support Cascading Style Sheets (CSS)
FramesetUse this DTD when you want to use frames!
Introduction to InternetCreating a Basic Web Pages
The HTML Source DocumentCreating a Source DocumentHTML, XML, XHTML
CSCE 102 - Chapters 1 and 2
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
Introduction to InternetCreating a Basic Web Pages
The HTML Source DocumentCreating a Source DocumentHTML, XML, XHTML
CSCE 102 - Chapters 1 and 2
Inline Elements
Used to define structure of a sequence of characters within a line of text.Example: <em> and <strong> elements
Introduction to InternetCreating a Basic Web Pages
The HTML Source DocumentCreating a Source DocumentHTML, XML, XHTML
CSCE 102 - Chapters 1 and 2
Font Size
Inline elements <big> and <small>
Introduction to InternetCreating a Basic Web Pages
The HTML Source DocumentCreating a Source DocumentHTML, XML, XHTML
CSCE 102 - Chapters 1 and 2
Code Summary
Refer to end of Chapter 2.Page 48
Introduction to InternetCreating a Basic Web Pages
The HTML Source DocumentCreating a Source DocumentHTML, XML, XHTML
Recommended