1. Paul Jacobs The iSchool University of Maryland Thursday, Sept. 7, 2017
INFM 603: Session 2 Building Web Pages – Part I
Paul Jacobs
The iSchool
University of Maryland
Thursday, Sept. 7, 2017
This work is licensed under a Creative Commons Attribution-Noncommercial-Share Alike 3.0 United States See for details

2. Today’s Topics How the Internet and Web Work (Some Recap)
Introduction to HTML/CSS
Tools for Building and Serving Pages

3. How the Internet and WWW Work

4. Intro to the Web Basics of Internet architecture
Building blocks
Servers and addresses
How computers communicate data: TCP/IP and HTTP
Role of data representation: HTML and XML
Applications are built on top of this architecture
Web browsers (built from the start on TCP/IP, HTTP, and HTML) and web clients (built on Web browsers, with Java, Javascript, AJAX, etc.)
“Cloud-based” applications and interfaces (Amazon, webmail, etc.)
Course overview
Physical infrastructure
Course administration
Intro to the Web/HTML

5. Some building blocks Application software Data User
Infrastructure software
Course overview
Physical infrastructure
Course administration
Intro to the Web/HTML
Note: “organization” might include society at large (e.g. WWW)
Terminology of “client” and “server” used in different ways
Client makes requests, server satisfies those requests
Desktop computer that serves primarily as client can be called a client
Note: software not shown (physical view)
Desktop
computer
(Client)
Local-area
network
Server
Global
network
(Internet)

6. Client Web browser Web server Application logic Databases and DBMS
Common
gateway
interface
Application logic
Course overview
Physical infrastructure
Course administration
Intro to the Web/HTML
Databases and DBMS
Application partition

7. Internet Layers – Five Things You Want to Know
Information/data is exchanged (often via HTTP) at the application layer between hosts (i.e., computers)
The hosts may have to break the data up into chunks to send over the network. These chunks are called packets.
To coordinate the exchange of packets and make sure everything is received and reassembled correctly, a session is established at the transport layer, often using a protocol called TCP.
Within TCP, packets can be routed and switched at the network layer in order to reach their destination. This layer uses a protocol called IP for the source/destination “address”.
An application called DNS translates “domain names” (the part of the address we recognize) into IP addresses (which we often don’t).
Course overview
Physical infrastructure
Course administration
Intro to the Web/HTML
Moore’s law make shift from large time sharing computer facilities to individual, small but powerful computer systems, and

8. TCP/IP (Two Layers) Course overview Physical infrastructure
Course administration
Intro to the Web/HTML

9. IP Addresses
Every “node” (e.g., host, router, device) is identified by an “Internet Protocol” (IP) address
32 bit number, divided into four “octets” (8 bits expressed as a decimal):
Note: This is IPv4, IPv6 has 128-bit addresses, like: FE80:0000:0000:0000:0202:B3FF:FE1E:8329
Course overview
Physical infrastructure
Course administration
Intro to the Web/HTML
Examples: point your browser at
Type “IP address” into Google

10. An Internet Protocol (IP) Address
Identifies a network
IP address:
Identifies a specific computer
Course overview
Physical infrastructure
Course administration
Intro to the Web/HTML

11. Networks of Networks Local Area Networks (LAN)
Connections within a room, or perhaps a building
Wide Area Networks (WAN)
Provide connections between LANs
Internet
Collection of WANs across multiple organizations
Course overview
Physical infrastructure
Course administration
Intro to the Web/HTML

12. The Internet Global collection of public “IP” networks Independent
Private networks are often called “intranets”
Independent
Each organization maintains its own network
Cooperating
Internet Protocol (IP) address blocks
Domain names (ICANN)
World-Wide Web Consortium (W3C)
Computer Emergency Response Team (CERT)
Course overview
Physical infrastructure
Course administration
Intro to the Web/HTML

13. A Short History of the Internet
1969: Origins in government research
Advanced Research Projects Agency (ARPAnet)
Key standards: UDP, TCP, DNS
1983: Design adopted by other agencies
Created a need for inter-network connections
Key standards: IP
1991: World-Wide Web added point-and-click
Now ~1 billion Internet “hosts” (January 2014)
Key standards: HTTP, URL, HTML, XML
Course overview
Physical infrastructure
Course administration
Intro to the Web/HTML
Moore’s law make shift from large time sharing computer facilities to individual, small but powerful computer systems, and

14. What Changed in 1994?

15. TraceRoute and Other Tools
Look at how packets make their way visually around a network
Play with a variety of network tools

16. The TCP/IP “Protocol Stack”
Link layer moves bits
Ethernet, cable modem, DSL
Network layer moves packets IP
Transport layer provides services to applications (delivers “messages”)
UDP, TCP
Application layer uses those services
DNS, SFTP, SSH, …
Course overview
Physical infrastructure
Course administration
Intro to the Web/HTML

17. TCP/IP layer architecture
Application
Virtual network service
Transport
Virtual link for end to end packets
Network
Virtual link for packets
Course overview
Physical infrastructure
Course administration
Intro to the Web/HTML
Link
Link
Link
Link
Link
Link
Link for bits
Link for bits
Link for bits

18. For the More Advanced Course overview Physical infrastructure
Course administration
Intro to the Web/HTML

19. Ports Well-known ports Registered Ports Ephemeral Ports
22 Secure Shell (for SSH and SFTP)
25 Simple Mail Transfer Protocol (SMTP)
53 Domain Name System (DNS)
68 Dynamic Host Configuration Protocol (DHCP)
80 Hypertext Transfer Protocol (HTTP)
143 Internet Message Access Protocol (IMAP)
554 Real-Time Streaming Protocol (RTSP)
Registered Ports
8080 HTTP server run by ordinary users
Ephemeral Ports
Course overview
Physical infrastructure
Course administration
Intro to the Web/HTML

20. Domain Name Service (DNS)
“Domain names” improve usability
Easier to remember than IP addresses
Written like a postal address: specific-to-general
Each “name server” knows one level of names
“Top level” name servers know .edu, .com, .mil, …
.edu name server knows umd, umbc, stanford, …
.umd.edu name server knows glue, ischool, ttclass, …
.glue.umd.edu name server knows x, y, z, …
Course overview
Physical infrastructure
Course administration
Intro to the Web/HTML

21. IP Addresses and Domain Names
Course overview
Physical infrastructure
Course administration
Intro to the Web/HTML
Domain Name:

22. Uniform Resource Locator (URL)
Domain name
File name
Course overview
Physical infrastructure
Course administration
Intro to the Web/HTML
Protocol
Port
Path
What’s the relationship between a URL and an IP address?

23. Transmission Control Protocol (TCP)
Most common for the transport layer of the Internet
(transports data packets from one address to another)
Guarantees delivery all data
Retransmits missing data
Guarantees data will be delivered in order
“Buffers” subsequent packets if necessary
No guarantee of delivery time
Long delays may occur without warning
Course overview
Physical infrastructure
Course administration
Intro to the Web/HTML

24. File Transfer Protocol (FTP)
Used to move files between machines
Upload (put) moves from client to server
Download (get) moves files from server to client
Both visual and command line interfaces available
Normally requires an account on the server
Userid “anonymous” provides public access
Course overview
Physical infrastructure
Course administration
Intro to the Web/HTML

25. Internet  Web Internet: collection of global networks
Web: way of managing information exchange (i.e., using a browser)
There are many other uses for the Internet
File transfer (FTP)
(SMTP, POP, IMAP)
Telephony/video (VOIP)
Course overview
Physical infrastructure
Course administration
Intro to the Web/HTML

26. The World-Wide Web My Browser Requested Page (HTML) Fetch Page
Local copy of
Page requested
Requested Page
(HTML)
Proxy Server
Fetch Page
Remote Sever
Send Request
(http)
Course overview
Physical infrastructure
Course administration
Intro to the Web/HTML
A server that sits between a client application, such as a Web browser, and a real server. It intercepts all requests to the real server to see if it can fulfill the requests itself. If not, it forwards the request to the real server. Proxy servers have two main purposes:
Improve Performance: Proxy servers can dramatically improve performance for groups of users. This is because it saves the results of all requests for a certain amount of time. Consider the case where both user X and user Y access the World Wide Web through a proxy server. First user X requests a certain Web page, which we'll call Page 1. Sometime later, user Y requests the same page. Instead of forwarding the request to the Web server where Page 1 resides, which can be a time-consuming operation, the proxy server simply returns the Page 1 that it already fetched for user X. Since the proxy server is often on the same network as the user, this is a much faster operation. Real proxy servers support hundreds or thousands of users. The major online services such as Compuserve and America Online, for example, employ an array of proxy servers.
Filter Requests: Proxy servers can also be used to filter requests. For example, a company might use a proxy server to prevent its employees from accessing a specific set of Web sites.
Internet

27. “The Web” Internet communication protocols RTSP FTP Email Web Server
HTML
HTTP
URL
“The Web”
Internet
communication
protocols
RTSP
FTP
Web
Server
HTTP
(transfer)
File System
URL
(e.g.,
Course overview
Physical infrastructure
Course administration
Intro to the Web/HTML
HTML
(data/display)

28. HyperText Transfer Protocol (HTTP)
Send request
GET /path/file.html HTTP/1.0
From:
User-Agent: HTTPTool/1.0
Server response
HTTP/ OK
Date: Fri, 31 Dec :59:59 GMT
Content-Type: text/html
Content-Length: 1354
<html><body> <h1>Happy New Millennium!</h1> … </body> </html>
Course overview
Physical infrastructure
Course administration
Intro to the Web/HTML
The Difference Between FTP and HTTP File Transfer Protocol, or FTP, is a protocol used to upload files from a workstation to a FTP server or download files from a FTP server to a workstation. It is the way that files get transferred from one device to another in order for the files to be available on the Internet. When ftp appears in a URL it means that the user is connecting to a file server and not a Web server and that some form of file transfer is going to take place. Most FTP servers require the user to log on to the server in order to transfer files. In contrast, Hyper Text Transfer Protocol, or HTTP, is a protocol used to transfer files from a Web server onto a browser in order to view a Web page that is on the Internet. Unlike FTP, where entire files are transferred from one device to another and copied into memory, HTTP only transfers the contents of a web page into a browser for viewing. FTP is a two-way system as files are transferred back and forth between server and workstation. HTTP is a one-way system as files are transported only from the server onto the workstation's browser. When http appears in a URL it means that the user is connecting to a Web server and not a file server. The files are transferred but not downloaded, therefore not copied into the memory of the receiving device.

29. HyperText Markup Language (HTML)
Simple document (page) structure language for Web
Historically based on SGML (Standard Generalized Markup Language, for publishing)
Advantages
Adapts easily to different display capabilities
Widely available display software (browsers)
Disadvantages
Does not directly control layout
Does not formally specify data structures (ergo XML)
Course overview
Physical infrastructure
Course administration
Intro to the Web/HTML

30. Intro to HTML/CSS

31. HyperText Markup Language (HTML)
Simple document (page) structure language for Web
Historically based on SGML (Standard Generalized Markup Language, for publishing)
Advantages
Adapts easily to different display capabilities
Widely available display software (browsers)
Disadvantages
Does not directly control layout
Does not formally specify data structures (ergo XML)
Intro to HTML/CSS
Page Tools
Putting it Together

32. What is HTML (more)? HyperText Markup Language
Standard language for transmitting web pages/web content
The input that allows web browsers to function
The framework within which many scripts are written
The output of many scripts
Intro to HTML/CSS
Page Tools
Putting it Together

33. What About CSS? Cascading Style Sheets More to come later
Separates appearance from markup
Avoids repetitive work
A “patch”? A “kluge”?
More to come later
Intro to HTML/CSS
Page Tools
Putting it Together

34. Related terms
SGML (Standard Generalized Markup Language) (ca. 1986) – parent, framework
XHTML (eXtensible HTML) – current version
SHTML
DHTML – dynamic HTML
XML – a hybrid, closer to SGML and used for web interchange/middleware
Intro to HTML/CSS
Page Tools
Putting it Together

35. The text between the title tags appears as the title of the web page.
A Basic HTML File/Page
<?xml version = "1.0"?>
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN"
"
<!-- Fig. 4.1: main.html -->
<!-- Our first Web page -->
<html xmlns = "
<head>
<title>Internet and WWW How to Program - Welcome</title>
</head>
<body>
<p>Welcome to XHTML!</p>
</body>
</html>
Main.html
Program Output
© Prentice Hall
The text between the title tags appears as the title of the web page.
Elements between the body tags of the html document appear in the body of the web page

36. HTML Headers Header.html © Prentice Hall
<?xml version = "1.0"?>
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN"
"
<!-- Fig. 4.4: header.html -->
<!-- XHTML headers >
<html xmlns = "
<head>
<title>Internet and WWW How to Program - Headers</title>
</head>
<body>
<h1>Level 1 Header</h1>
<h2>Level 2 header</h2>
<h3>Level 3 header</h3>
<h4>Level 4 header</h4>
<h5>Level 5 header</h5>
<h6>Level 6 header</h6>
</body>
</html>
Every XHTML document is required to have opening and closing html tags.
The font size of the text between tags decreases as the header level increases.

37. Headers – Browser Display
Browser Ouput
© Prentice Hall
Select a header based on the amount of emphasis you would like to give that text.

38. Links and Anchor Text Links.html © Prentice Hall
<?xml version = "1.0"?>
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN"
"
<!-- Fig. 4.5: links.html >
<!-- Introduction to hyperlinks -->
<html xmlns = "
<head>
<title>Internet and WWW How to Program - Links</title>
</head>
<body>
<h1>Here are my favorite sites</h1>
<p><strong>Click on a name to go to that page.</strong></p>
<p><a href = "
<p><a href = " Hall</a></p>
<p><a href = "
<p><a href = " Today</a></p>
</body>
</html>
Links.html
© Prentice Hall
Text between strong tags will appear bold.
Linking is accomplished in XHTML with the anchor (a) element.
The text between the a tags is the anchor for the link.
The anchor links to the page whose value is given by the href attribute.
Elements placed between paragraph tags will be set apart from other elements on the page with a vertical line before and after it.

39. Links – Browser Output
Clicking on the “Deitel” link will open up the Deitel homepage in a new browser window.

40. Embedding Images in HTML
<?xml version = "1.0"?>
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN"
"
<!-- Fig. 4.7: picture.html -->
<!-- Adding images with XHTML -->
<html xmlns = "
<head>
<title>Internet and WWW How to Program - Welcome</title>
</head>
<body>
<p><img src = "xmlhtp.jpg" height = "238" width = "183"
alt = "XML How to Program book cover" />
<img src = "jhtp.jpg" height = "238" width = "183"
alt = "Java How to Program book cover" /></p>
</body>
</html>
Picture.html
© Prentice Hall
The value of the src attribute of the image element is the location of the image file.
The height and width attributes of the image element give the height and width of the image.
The value of the alt attribute gives a description of the image. This description is displayed if the image cannot be displayed.

41. Syntax and Lingo “Tag” – any kind of markup, denoted by < and >
Can appear 2 ways, eg. <title> … </title> (/ means end of that element) or <img … /> (the entire contents of the element is between < and />
“Element” means any part of a document indicated by a set of tags
“Attribute” and “value” (for an attribute) are assigned within elements, e.g.
alt = "XML How to Program book cover”
<input type = "submit" value = "Submit Your Entries" /> (type and value are attributes)
Intro to HTML/CSS
Page Tools
Putting it Together

42. Embedded Images - Display
Browser Output
© Prentice Hall
The second image could not be displayed properly, so the value of its alt attribute is displayed instead.

43. Images as Anchors/Nav Menus
<?xml version = "1.0"?>
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN"
"
<!-- Fig. 4.8: nav.html >
<!-- Using images as link anchors -->
<html xmlns = "
<head>
<title>Internet and WWW How to Program - Navigation Bar
</title>
</head>
<body>
<p>
<a href = "links.html">
<img src = "buttons/links.jpg" width = "65"
height = "50" alt = "Links Page" /></a><br />
<a href = "list.html">
<img src = "buttons/list.jpg" width = "65"
height = "50" alt = "List Example Page" /></a><br />
<a href = "contact.html">
<img src = "buttons/contact.jpg" width = "65"
height = "50" alt = "Contact Page" /></a><br />
<a href = "header.html">
<img src = "buttons/header.jpg" width = "65"
height = "50" alt = "Header Page" /></a><br />
<a href = "table.html">
<img src = "buttons/table.jpg" width = "65"
height = "50" alt = "Table Page" /></a><br />
Nav.html
© Prentice Hall
Placing an image element between anchor tags, creates an image that is an anchor for a link.
A line break will render an empty line on a web page.

44. Images as Anchors/Display
Nav Output
© Prentice Hall
Clicking on the image entitled “links” brings the user to the page on the right.
Using an image as an anchor works exactly the same as using text.

45. Some Image File Formats
.jpg (JPEG) – Probably most common these days, allows compression, compatible with most image software, cameras, etc
.gif (GIF) – Also fairly common, allows for transparency and automation
.bmp (BMP, Bitmap) – No compression
.png (PNG) – Avoids intellectual property issues but not as common
There are still numerous issues with displaying images in browsers (e.g., size, download times, broken links, accessibility, etc.)
Intro to HTML/CSS
Page Tools
Putting it Together

46. Some Other HTML Tags
<head> </head> - the page header, where the title goes, for example
<!-- this is a comment --> - comments, very important but ignored by the browser
<p> </p> beginning and end of paragraph
Lists (unordered and ordered, <ul> </ul> and <ol> </ol>)
Tables (e.g. <table>, <thead>, <tbody>, … )
This Space Available
Intro to HTML/CSS
Page Tools
Putting it Together

47. Some Other HTML Features
Forms
Image Maps
Frames
SEO-related tags, e.g. “<meta>” with “keywords” or “description”
Intro to HTML/CSS
Page Tools
Putting it Together

48. A Note on Validators https://validator.w3.org/ (and others)
<meta “charset=UTF-8”> or <meta “charset=ISO ”>
Intro to HTML/CSS
Page Tools
Putting it Together

49. Why Learn HTML?
It helps us to understand something about computers and basic programming
Even if we use page composition software (like Dreamweaver or KompoZer) or a CMS (like Drupal, WordPress) we may need to “hack” some HTML to make our pages the way we like them
Scripting languages interact with HTML and may have to create HTML, so we can’t learn scripting without knowing some HTML
Intro to HTML/CSS
Page Tools
Putting it Together

50. Each form must begin and end with form tags.
HTML Forms
1 <?xml version = "1.0"?>
2 <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN"
" 4
5 <!-- Fig. 5.3: form.html -->
6 <!-- Form Design Example 1 --> 7
8 <html xmlns = "
<head>
<title>Internet and WWW How to Program - Forms</title>
</head> 12
<body> 14
<h1>Feedback Form</h1> 16
<p>Please fill out this form to help
us improve our site.</p> 19
<!-- This tag starts the form, gives the method of -->
<!-- sending information and the location of form -->
<!-- scripts. Hidden inputs contain >
<!-- non-visual information >
<form method = "post" action = "/cgi-bin/formmail"> 25
<p>
value = "main.html" />
</p> <input type = "hidden" name = "recipient"
value = />
<input type = "hidden" name = "subject"
value = "Feedback Form" />
<input type = "hidden" name = "redirect" 32
Form.html
© Prentice Hall
Each form must begin and end with form tags.
The method attribute specifies how the form’s data is sent to the Web server. The post method appends form data to the browser request.
The value of the action attribute specifies the URL of a script on the Web server.
Input elements are used to send data to the script that processes the form.
A hidden value for the type attribute sends data that is not entered by the user.

51. The value attribute displays a name on the buttons created.
HTML Forms (cont’d)
Form.html
© Prentice Hall 34
<!-- <input type = "text"> inserts a text box -->
<p><label>Name:
<input name = "name" type = "text" size = "25"
maxlength = "30" />
</label></p> 40
<p>
<!-- input types "submit" and "reset" insert -->
<!-- buttons for submitting and clearing the -->
<!-- form's contents >
<input type = "submit" value =
"Submit Your Entries" />
<input type = "reset" value =
"Clear Your Entries" />
</p> 50
</form> 52
</body>
54 </html>
The label element describes the data the user needs to enter in the text box.
The size attribute gives the number of characters visible in the text box.
The maxlength attribute gives the maximum number of characters the user can input.
The value attribute displays a name on the buttons created.

52. HTML Forms – Browser Display
Form Display
© Prentice Hall
Text box created using input element.
Submit button created using input element.
Reset button created using input element.

53. Some Other Form Elements and Attributes
<select> [element] - drop down list with <selected> attributes
checkbox [attribute, e.g. <input name = “instructor” type = “checkbox” value = “Jacobs”>]
radio [attribute] - radio button, e.g. <input name = “heardaboutus” type = “radio” value = “friend”>
Password [attribute]
Forms go with scripts (to come later; the input name and value “posts” to the script as a variable value)
Intro to HTML/CSS
Page Tools
Putting it Together

54. A Note on Forms – Input, Reset and Submit
Input attributes can be used by all scripts, including client-side (e.g., javascript) and server-side (e.g., PHP)
Submit button (attribute) is only used with action element to send data to server-side
Reset button (attribute) clears all input; it looks a lot like submit but acts differently
Intro to HTML/CSS
Page Tools
Putting it Together

55. Time for Some Hands-On Practice
Create an HTML page using WordPad
Save it on your computer
Open with a browser
For more advanced students – use extra time to create a fancier page, using tools

56. Creating and Editing Pages Using Tools

57. How Are Web Pages Created?
Static pages using text editors (Notepad, Wordpad, Notepad++, emacs, VI, . . .)
Good for practice
Can be good for programming (e.g., Notepad++)
Static pages using HTML editors (esp. WYSIWYG) like DreamWeaver, KompoZer
Much faster for certain features, like layout, images
Still allows hardcore HTML editing and programming
Can support site publishing and site management
Content Management Systems like Drupal, Joomla, WordPress
Better for re-use, large scale site creation
Can be harder to customize, program
Intro to HTML/CSS
Page Tools
Putting it Together

58. Some Tools for This Class
Some kind of FTP (to upload files to sites) (WinSCP suggested, others for MAC)
Some kind of good editor (NotePad++ suggested) for code, etc.
Some kind of HTML editor (KompoZer or Dreamweaver suggested)
Content management, others to come later
Intro to HTML/CSS
Page Tools
Putting it Together

59. Why KompoZer Freely available
Has very similar features to other HTML editors
Not platform-specific (or browser-specific)
Has at least some basic support for publishing, scripts
Intro to HTML/CSS
Page Tools
Putting it Together

60. KompoZer – Basic Interface
Intro to HTML/CSS
Page Tools
Putting it Together

61. KompoZer – Tag View
Intro to HTML/CSS
Page Tools
Putting it Together

62. KompoZer – HTML Source View
Intro to HTML/CSS
Page Tools
Putting it Together

63. More Hands-On Practice

64. Basics of Creating/Editing Web Pages
Start with the basics – copy header or copy entire file from somewhere and edit it
Make changes to your HTML file
Open the file with various browsers and make sure that it looks right (note: if you’re using a WYSIWYG HTML editor this will be easier)
Copy the file up to terpconnect or to some other public site as needed using SFTP (note: later in the class you’ll be able to copy entire sites with many pages, but for now we’ll do one file at a time)
Note: if your HTML pages link to other local files (such as using <img src = “mypicture.jpg” … > ) you will need to make sure that those files are also in the right place.
Intro to HTML/CSS
Page Tools
Putting it Together
The Difference Between FTP and HTTP File Transfer Protocol, or FTP, is a protocol used to upload files from a workstation to a FTP server or download files from a FTP server to a workstation. It is the way that files get transferred from one device to another in order for the files to be available on the Internet. When ftp appears in a URL it means that the user is connecting to a file server and not a Web server and that some form of file transfer is going to take place. Most FTP servers require the user to log on to the server in order to transfer files. In contrast, Hyper Text Transfer Protocol, or HTTP, is a protocol used to transfer files from a Web server onto a browser in order to view a Web page that is on the Internet. Unlike FTP, where entire files are transferred from one device to another and copied into memory, HTTP only transfers the contents of a web page into a browser for viewing. FTP is a two-way system as files are transferred back and forth between server and workstation. HTTP is a one-way system as files are transported only from the server onto the workstation's browser. When http appears in a URL it means that the user is connecting to a Web server and not a file server. The files are transferred but not downloaded, therefore not copied into the memory of the receiving device.

65. Getting Started with Tools
Goal: Create your own basic web page, get some practice with HTML
Steps
Try it first with WordPad or Notepad
Then download and install Notepad++, KompoZer, and an sftp tool (if you haven’t finished already)
Edit your page(s) and upload to terpconnect (e.g., using WinSCP or FileZilla) [note – you will have to change directories to /pub]
View the page from a browser on the Web
Get ready for more advanced features (CSS, forms, scripts)
If you want to use other tools to complete the assignments, that is fine – but you may get less help from class
Intro to HTML/CSS
Page Tools
Putting it Together

66. Where We Are in the Course
We can create and edit basic HTML pages (or even basic sites)
We can see how those pages will appear on the Web
We need more power to change the look of the pages (Session 3)
We can create forms using HTML but can’t do much with the input
Need to be able to do basic computations on the input, using Javascript (Session 4)
Need to be able to upload form data to other applications (Session 7, using PHP)
Need to be able to read data from databases and store form data in databases (Sessions 5, 6, 7, and 8)
We need to learn better tools for creating and managing web sites, rather than just pages (Session 9)
We need to learn how HTML can be generated dynamically from programs and applications (Sessions 7, 8, and 9)
Intro to HTML/CSS
Page Tools
Putting it Together
The Difference Between FTP and HTTP File Transfer Protocol, or FTP, is a protocol used to upload files from a workstation to a FTP server or download files from a FTP server to a workstation. It is the way that files get transferred from one device to another in order for the files to be available on the Internet. When ftp appears in a URL it means that the user is connecting to a file server and not a Web server and that some form of file transfer is going to take place. Most FTP servers require the user to log on to the server in order to transfer files. In contrast, Hyper Text Transfer Protocol, or HTTP, is a protocol used to transfer files from a Web server onto a browser in order to view a Web page that is on the Internet. Unlike FTP, where entire files are transferred from one device to another and copied into memory, HTTP only transfers the contents of a web page into a browser for viewing. FTP is a two-way system as files are transferred back and forth between server and workstation. HTTP is a one-way system as files are transported only from the server onto the workstation's browser. When http appears in a URL it means that the user is connecting to a Web server and not a file server. The files are transferred but not downloaded, therefore not copied into the memory of the receiving device.

67. Recap – Intro to HTML
What is HTML, what type of language is it, and what’s its role on the Web
How to create and edit HTML files
Using different types of tags
Knowing how to structure and modify pages
Different tools for creating and changing files
Understanding the big picture
Getting HTML files up to a web server
Knowing what comes later (creating HTML dynamically, more complex sites, application integration)
Intro to HTML/CSS
Page Tools
Putting it Together