1. Tutorial 1 1.1 Developing a Basic Web Page

2. Exploring the History of the World Wide Web
Network - a structure linking several points together (called nodes) allowing them to share information and services
Node - a point on a network, such as a computer, printer, or scanner
A computer can also be called a host to distinguish it from other nodes
New Perspectives on HTML and XHTML, 5e

3. Exploring the History of the World Wide Web
Nodes either provide or request data
Server - a node that provides information or a service
Ex: Print server (printing service), File server (storage)
Client - node that requests services from a server
Client-server network - one of the most commonly used designs in which several clients access information provided by one or more servers
New Perspectives on HTML and XHTML, Comprehensive

4. Exploring the History of the World Wide Web
Local area network (LAN) – a network confined to a small geographic area, such as within a building or department
Wide area network (WAN) – a network that covers a large area, such as several buildings or cities
Usually consists of two or more LANs
Largest WAN is the Internet
New Perspectives on HTML and XHTML, 5e

5. Structure of the Internet
New Perspectives on HTML and XHTML, 5e

6. Exploring the History of the World Wide Web
World Wide Web (Web) – interface designed to make the resources on the Internet accessible to the general public
Timothy Berners-Lee and other researchers at the CERN nuclear research facility near Geneva, Switzerland laid the foundations in 1989
They developed a system of interconnected hypertext documents
Hypertext - a method of organizing information that is not presented linearly, but in whatever order is requested by the user
Reading a book: linear
New Perspectives on HTML and XHTML, 5e

7. Hypertext Documents
Key to hypertext is the use of links - the elements in a hypertext document that allow you to jump from one topic or document to another
Can point to another section of the same document
Can point to another document entirely
Can open a document on your computer
Can open a document (through the Internet) on a computer anywhere in the world
New Perspectives on HTML and XHTML, 5e

8. Web Pages and Web Servers
Web page - each document on the Web
Web servers - a computer that stores and makes Web pages available to any device connected to the Internet
Web browser – program that retrieves a Web page from a server and renders the page on a computer or other device
Text-based browsers - the earliest browsers that were limited to displaying only text, no images
New Perspectives on HTML and XHTML, 5e

9. Web Pages and Web Servers
New Perspectives on HTML and XHTML, 5e

10. Introducing HTML
A Web page is a text file written in a language called Hypertext Markup Language (HTML)
Markup language - a language that describes a document’s content and structure
HTML is not a programming language or a formatting language
Browser determines how the Web page will look, not HTML
Styles – formatting rule written in a separate language from HTML telling the browser how to render an element for particular devices
New Perspectives on HTML and XHTML, 5e

11. Brief History of HTML
Standard Generalized Markup Language (SGML) - the first popular markup language used to create other markup languages
Early 90’s Netscape Navigator and Microsoft Internet Explorer were to major browsers
Extensions – features added to HTML by various browsers
New Perspectives on HTML and XHTML, 5e

12. Brief History of HTML
World Wide Web Consortium (W3C) - a group of Web developers, programmers, and authors that created a set of standards or specifications that all browser manufacturers were to follow
The W3C has no enforcement power but typically followed
New Perspectives on HTML and XHTML, 5e

13. History of HTML and XHTML
New Perspectives on HTML and XHTML, 5e

14. The History of HTML
Older features of HTML are often deprecated, or phased out, by the W3C
That does not mean you can’t continue to use them—you may need to use them if you are supporting older browsers
XML (Extensible Markup Language) - a metalanguage like SGML, but without SGML’s complexity and overhead
XHTML (Extensible Hypertext Markup Language) - a stricter version of HTML designed to confront some of the problems associated with the different and competing versions of HTML
New Perspectives on HTML and XHTML, 5e

15. Writing HTML Code Become well-versed in the history of HTML
Know your market
Test your code on several different browsers and browser versions
Read the documentation on the different versions of HTML and XHTML
New Perspectives on HTML and XHTML, 5e

16. Tools for Creating HTML Documents
Basic text editor such as Windows Notepad
HTML Converter – program that translates text written in another language into HTML code
Advantages: Free you from laborious task of typing HTML code and usually avoids coding errors
Disadvantages: Create large files including “bloated” code, more difficult to edit
New Perspectives on HTML and XHTML, 5e

17. Tools for Creating HTML Documents
HTML Editor – a program that helps you create an HTML file by inserting HTML codes for you as you work
Advantages and limitations similar to those of HTML converters
Allow you to save a lot of time and help you work more efficiently
Still have to work directly with underlying HTML code for finished product
New Perspectives on HTML and XHTML, 5e

18. Creating an HTML Document
Plan out your Web page before you start coding
Draw a planning sketch or create a sample document using a word processor
Preparatory work can weed out errors or point to potential problems
New Perspectives on HTML and XHTML, 5e

19. Creating an HTML Document
New Perspectives on HTML and XHTML, 5e

20. Creating an HTML Document
Element - a distinct object in the document, like a paragraph, a heading, or a page’s title
Formatting features such as boldfaced font, and italicized text may be used
New Perspectives on HTML and XHTML, 5e

21. Marking Elements with Tags
Tag - the core building block of HTML which marks the presence of an element
Two-sided tag - a tag that contains an opening and a closing tag to mark the contents beginning and end
<element>content</element>
Opening tag – indicates the beginning of the content
Closing tag – indicates the content’s end
New Perspectives on HTML and XHTML, 5e

22. The Structure of an HTML File
Root element – element that contains all the elements used in the document
The opening <html> tag marks the start of an HTML document, and the closing </html> tag tells a browser when it has reached the end of that HTML document
<html> marks the root element
New Perspectives on HTML and XHTML, 5e

23. The Structure of an HTML File
An HTML document is divided into two main sections: the head and the body
Head element - contains information about the document, for example the document title or the keywords
The content of the head element is not displayed within the Web page
Keywords will aid search engines locate the document
New Perspectives on HTML and XHTML, 5e

24. The Structure of an HTML File
Body element - contains all of the content to appear on the Web page
The body element can contain code that tells the browser how to render the content
New Perspectives on HTML and XHTML, 5e

25. Practice: Setting up Web page
Open a blank Notepad document
Type the following lines of code:
<html>
<head>
</head>
<body>
</body>
</html>
Save the file as dave.htm in your Internet/Web Page Design folder on OneDrive
New Perspectives on HTML and XHTML, Comprehensive

26. Defining the Page Title
Title element - contains the page’s title
A document’s title is usually displayed in the browser’s title bar
New Perspectives on HTML and XHTML, Comprehensive

27. Adding Comments Comment tag - adds notes to your HTML code
Comments can be spread over several lines
Comments are useful in documenting your HTML code for yourself and others
Comments are ignored by the browser
New Perspectives on HTML and XHTML, 5e

28. Adding Comments
New Perspectives on HTML and XHTML, 5e

29. Practice: Title In your <head> tag add the following:
Enter, space bar three times then in red…
<head>
<title> Dave’s Devil Sticks </title>
</head>
New Perspectives on HTML and XHTML, Comprehensive

30. Practice: Comment
In your <head> tag add the following above your title:
Enter
<head>
<! -- Dave’s Devil Sticks
Author: Your name
Date: 09/13/2018
-->
<title> Dave’s Devil Sticks </title>
</head>
New Perspectives on HTML and XHTML, Comprehensive

31. Displaying an HTML File
As you continue modifying the HTML code, you should occasionally view it with your Web browser to verify that you have not introduced any errors
You may want to view the results using different browsers to check for compatibility
New Perspectives on HTML and XHTML, 5e

32. Displaying an HTML File
New Perspectives on HTML and XHTML, 5e