CSCE 102 - Chapters 1 and 2 CSCE 102 - General Applications Programming 2015-10-3 Benito Mendoza 1...

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



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 WebTimothy Berners-Lee

1989Trying to share documents between research groups at CERNHypertext Markup language – formattingTransfer protocol – send/receive marked-up document




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




Basic Services

First browsers were text-based1993 @ U. Illinois, MOSAIC created

GUI Browser – Graphical User Interface

Mosaic Netscape




Client-Server Computing

ClientServerWeb page access

Document is delivered at the clientComm. Connection is broken after document arrives at client




“Surfing”

Click hyperlinkBrowser requests document from serverServer returns document requestedBrowser displays document

The HTML Source DocumentCreating a Source DocumentHTML, XML, XHTML



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




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”




TagsHeading tags

<h1>Some text goes here</h1>1 – 6Most important – least important

Paragraph tagThe paragraph goes here




HTML Structure4 main elements of HTML source code

htmlheadtitlebody

<html>

<head>

<title>

</title>

</head>

<body>

</body>

</html>




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?




Nest Properly

<head><title>Chapter 2</title>

</head>

<head><title>Chapter 2

</head></title>

Correct

Incorrect




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?




HTML

Browsers developed along diverging paths

NetscapeExplorer

Features were added – not always in the same way1994 - W3C created

Create an “official” version of HTML




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




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!




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?




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)




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




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




Meta

<meta> tag describes document contentUseful for search enginesOptional, goes in <head> sectionAttributes:

Name: “keywords”, “description”Content

<meta name=“keywords” content=“coffee, tea, imported” />




Paragraphs and Line Breaks

Can’t use whitespace to format documentHTML uses elements (tags) and only elements to define document’s structureParagraph tag 

Classifies a block of text as a paragraphPreceded and followed by a blank line (usually)Can add other attributes (Chapter 3)




Paragraphs and Line Breaks

Break tag Generates a line breakWithout inserting a blank line like the tag.“Empty” tag – no needed instead (space optional)/ required by XHTML to indicate an empty elementCh02-Ex-05




Browsers are Idiot Proof

Try to compensate for errors.Different browsers handle html errors differently.Follow rules to try and avoid future complications.




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!



elenis

Information from http://www.w3schools.com/tags/tag_doctype.asp


Block-Level Elements

Define a complete section or block of text.Browser puts blank line before and after block.Does not need to get line blank.Example: Heading elements, Blockquote element




Inline Elements

Used to define structure of a sequence of characters within a line of text.Example: and elements




Font Size

Inline elements <big> and 




Code Summary

Refer to end of Chapter 2.Page 48

Date post:	29-Dec-2015
Category:	Documents
Upload:	quentin-robinson
View:	218 times
Download:	0 times

CSCE 102 - Chapters 1 and 2 CSCE 102 - General Applications Programming 2015-10-3 Benito Mendoza 1...

Documents