1. Slide 1

2. Agenda
• Who we are and who you are
• XAMPP set up review
• Joey’s Vision
• Objectives
• Some background Stuff
• Some more background stuff

3. About Steve

4. About Steve
• Senior Consultant, Crossfire Consulting
– 10+ years helping clients with their information products and
services development efforts.
– Expertise in strategic planning, product development,
marketing, research, computer and communication sciences,
and finance.
– Corporate trainer on HTML5 and other Internet technologies.
– Past lives include new product development at Fujitsu Limited,
co-brand marketing programs at MasterCard, and finance at
American Express.
– Bachelor, master, and doctorate degrees from the Lubin School
of Business at Pace University
– Certified ScrumMaster

5. What people are saying about Steve
"Doctor Steve is intellectual curious on
topics from information technology to
marketing, management, and finance, as
evidenced by his accumulation of
multiple degrees and few real jobs. A
senior consultant highly valued by some
of the world's largest companies, he
remains a vice president at home, where
he is solely responsible trash removal and
dog walking. Steve is intensely interested
in browsers and the 3-D world that's
around the corner.”

6. About James

7. About James
• Partner, Crossfire Consulting
– 20+ years as an IT consultant, systems engineer,
information security consultant, technology
analyst, and software developer
– Expertise in information security, web application
development, and project and program
management
– Adjunct Professor of ECE&CS at The University of
New Haven and Business&IT at The University of
Phoenix
– Previous experiences at Verizon and Pitney Bowes
– Bachelor, master, and Ph.D. degrees from Tufts
University, School of Engineering
– Certified Information Systems & Security
Professional
– Certified CT High School Math Teacher
– Opened for James Brown in 1981
– Next real gig, “Sweet Charity,” March 8-10

8. What people are saying about James

9. About You

10. XAMPP
• An Apache Web Server, MySQL, PHP, and Perl
web application development environment for
your personal use
• http://www.apachefriends.org
– Download the package for your Operating System
– Install XAMPP (.exe for Windows, .dmg for Mac)
• Take all defaults!
Slide 10

11. Start XAMPP
• Mac: Double click
/Applications/XAMPP/XAMPP Control
• Windows: Launch XAMPP from Start |
Programs | XAMPP
• The Control Application is used to start/stop,
install/uninstall services.
Slide 11

12. How to start the XAMPP control panel
Select the XAMPP Control Panel item from the Windows Start
menu or double-click on the XAMPP icon on your desktop.
How to start and stop Apache or MySQL
Click on its Start or Stop button.
To start Apache or MySQL automatically when your computer
starts, check its Svc checkbox.
Slide 12

13. The XAMPP Control Panel
Start the Apache
Web server and
MySQL server.
Do not run as
service yet!
Slide 13

14. Explore XAMPP
• Go to: http://localhost
• What do you see?
– Should see “Welcome to XAMPP for ‘your operating system’!”
• What is really happening?
– XAMPP has set up a “real” web environment on your machine!
– Apache running locally (not on another server) and on port 80
– MySQL running locally and on port 3306
• PHP and Perl do not have ports (not servers)
• Potential problems
– You do not have administrative privileges for your laptop
– Already have a web server running on port 80 or MySQL on your
laptop
– Other wacky permissions issues (typically corporate types)
Slide 14

15. Get familiar with the XAMPP install
• Nose around, see what you see!
• Notables
– phpinfo()
– phpMyAdmin
• Under the covers
– The XAMPP default “htdocs” folder
• The only thing we will modify!
– Really, do NOT change anything else!
• Maybe /etc/http.conf, but even then resist!
Slide 15

16. Get ready for our exercises!
• Download the PHP & MySQL exercises
– http://murach.com/downloads/phps.htm
– Choose the .zip file (phps_allfiles.zip)
• Inflate the .zip file (phps_allfiles folder)
• Move the three folders in the phps_allfiles
folder to the XAMPP /htdocs folder
Slide 16

17. The structure for the book apps and ex_starts
xampp
htdocs
book_apps
ch01_product_discount
ch02_product_discount
ch02_future_value
ch04_product_list
ch04_product_manager
...
ex_starts
ch02_ex1
ch02_ex2
ch04_ex1
...
Slide 17

18. How to deploy a PHP application on a local server
Copy all of the directories and files for an application to the
xampphtdocs directory on the server.
How to deploy the downloadable applications
on a local server
Copy the book_apps and ex_starts directories and all their
contents to the xampphtdocs directory on the server.
How to deploy an application
on an Internet server
Use an FTP (File Transfer Protocol) program to upload the tested
directories and files to the htdocs directory of the Apache web
server.
Slide 18

19. The components of an HTTP URL
http://www.murach.com/books/lists.htm
protocol domain name path filename
What happens if you omit parts of a URL
If you omit the protocol, the default of http:// will be used.
If you omit the filename, one of the default filenames for the
Apache web server will be used: index.htm, index.html, or
index.php.
If you omit the filename and there is no default file, Apache will
display an index of the files and directories in the path.
Slide 19

20. URLs for pages on an Internet web server
A request for a specific page
http://www.murach.com/books/xhcss.htm
A request for the default (home) page of a web site
http://www.murach.com/
URLs for applications on a local web server
A request for the default page in an application directory
http://localhost/book_apps/ch01_product_discount/
A request for a directory with no default page
http://localhost/book_apps/
Slide 20

21. An index of the apps in the book_apps directory
Slide 21

22. Notepad++ with three tabs open
Slide 22

23. How to open files in Notepad++
Use the Open button in the toolbar.
Right-click on the file in the Windows Explorer and select Edit
with Notepad++.
How to save the current file
Use the Save button in the toolbar.
Press Ctrl+S.
How to save all open files
Use the Save All button.
Slide 23

24. How to close the current file in Notepad++
Use the Close button in the toolbar.
How to close all open files
Use the Close All button.
How to open a new file in a new tab
Use the New button in the toolbar.
Slide 24

25. How to change the Notepad++ style for comments
Start the SettingsStyler Configurator command.
Select PHP in the language list and COMMENT in the style list.
Change the font name and font size in the drop-down lists to the
blank entries at the top of the lists.
Repeat this for COMMENTLINE for the PHP language, for
COMMENT for the HTML language, and for COMMENT for the
CSS language.
Slide 25

26. Joey’s Vision

27. Cloud Computing, Web Mobility & the HTML5 suite
Few Continuous Some Access Many Connected
Cloud Sources Networks Devices Unlimited # of Apps
Enterprise Apps
(PC targeted at)
cellular
Custom Apps
(device
targeted)
telco / Browser Apps
cable (targeted at all
devices)
Html5
CSS3
WiFi ISPs JavaScript
Web GL
Mwave
SVG
satellite
Globally available & accessible; Easy & natural for the user;
massively scalable; and fully mass customized & micro-
reliable & secure services targeted by the enterprise

28. Objectives
1. Provide you with an understanding key Web
technologies
2. Provide you with an understanding of graphic
design, usability and SEO
3. Enable you to design and code a web app

29. Web Technology Stack
Data – What does it know?
Behavior – What does it do?
Behavior – What does it do?
Presentation – What does it look like?
Structure – What does this logically mean?
Richness
of the
Experience

30. Your final project
• You will build the
greatest guitar store
app, a fully functional
e-commerce site
• You will then customize
the user interface and
show it off to the class

31. Quiz: Which old white guy invented
the Internet?

32. Internet ≠ World Wide Web
The World Wide Web is a system of interlinked hypertext
documents accessed via the Internet.
The World Wide Web uses
3 essential technologies:
• Uniform Resource Locator
• HyperText Transfer Protocol
• HyperText Markup Language

33. Uniform Resource Locators

34. Uniform Resource Locator
First, a review…
• A web page is an object that consists of base HTML-file and
my include several referenced objects
– A referenced object can be a file, an image, an applet, audio file,…
• Each object is addressable by a URL
http://www.someschool.edu:80/someDept/pic.gif
Protocol Host Port Path
Scheme Name Name

35. HyperText Transfer Protocols

36. HTTP Request
carriage return character
line-feed character
request line
(GET, POST, GET /index.html HTTP/1.1rn
HEAD commands) Host: www-net.cs.umass.edurn
User-Agent: Firefox/3.6.10rn
Accept: text/html,application/xhtml+xmlrn
header Accept-Language: en-us,en;q=0.5rn
lines Accept-Encoding: gzip,deflatern
Accept-Charset: ISO-8859-1,utf-8;q=0.7rn
carriage return, Keep-Alive: 115rn
line feed at start Connection: keep-alivern
rn
of line indicates
end of header lines

37. HTTP Methods
• GET is used to obtain a resource
• POST is used to used to send data to be processed
– input is uploaded to server in entity body
• HEAD is used to obtain the response headers only, and not the a
resource's contents
– asks server to leave requested object out of response
• PUT uploads file in entity body to path specified in URL field
• DELETE deletes file specified in the URL field

38. HTTP Response
status line
(protocol
status code HTTP/1.1 200 OKrn
status phrase) Date: Sun, 26 Sep 2010 20:09:20 GMTrn
Server: Apache/2.0.52 (CentOS)rn
Last-Modified: Tue, 30 Oct 2007 17:00:02
GMTrn
header ETag: "17dc6-a5c-bf716880"rn
Accept-Ranges: bytesrn
lines Content-Length: 2652rn
Keep-Alive: timeout=10, max=100rn
Connection: Keep-Alivern
Content-Type: text/html; charset=ISO-8859-
1rn
rn
data, e.g., <html>
data data data data data ...
requested
HTML file
Application 2-38

39. HTTP Response codes
200 OK
– request succeeded, requested object later in this msg
301 Moved Permanently
– requested object moved, new location specified later in this msg
(Location:)
400 Bad Request
– request msg not understood by server
404 Not Found
– requested document not found on this server
505 HTTP Version Not Supported
Application 2-39

40. Suppose a user enters
(contains text,
www.someSchool.edu/someDepartment/home.index references to 10
jpeg images)
1a. HTTP client initiates TCP
connection to HTTP server
1b. HTTP server at host
(process) at
www.someSchool.edu waiting
www.someSchool.edu on port 80
for TCP connection at port 80.
“accepts” connection, notifying
client
2. HTTP client sends HTTP request
message (containing URL) into TCP
connection socket. Message 3. HTTP server receives request
indicates that client wants object message, forms response message
someDepartment/home.index containing requested object, and
sends message into its socket
time
Application 2-40

41. Nonpersistent HTTP (cont.)
4. HTTP server closes TCP connection.
5. HTTP client receives response
message containing html file,
displays html. Parsing html
file, finds 10 referenced jpeg
objects
time 6. Steps 1-5 repeated for each of 10
jpeg objects
Key takeaway is that the Web server maintains no information about
past client requests

42. HyperText Markup Language

43. The Birth of
HyperText Markup Language
• HyperText denotes a network of
linked reference information
• Invented HyperText Markup
Language in 1990
– Not a programming language but a
HyperText authoring tool

44. Theoretical categories of a
electronic Markup Languages
• Presentational markup defines the look of each text element
in order to achieve WYSIWYG (e.g. MS Word)
• Procedural markup provide specific presentational
instructions to the program that is processing the text (e.g.
PostScript)
• Semantic Markup (Descriptive/Declarative Markup) describes
the logical structure of the document, leaving the
interpretation of how to present to the document to the
program that is processing the text

45. What is Semantic Structure?

46. HTML & Semantic Structure

47. The Early History of HTML
Source: University of Maryland, Baltimore County

48. Why we a new HTML standard
“HTML isn't a very good
language for making Web
pages. However, it has been a
very good language for
making the Web.”
—Edd Dumbill
Dec 6, 2005

49. Deficiencies of
HTML4/XHMTL1
Need for
• Less presentation elements
• More semantic elements
• More separation of structure and presentation
• More robust media controls

50. The battle for the future

51. XHMTL 2
World Wide Web Consortium
published initial draft in 2002,
representing the first major change
since 1999 (HTML 4.01)
• Seeks to replace HTML
• Relies solely on XML syntax
• Completes the separation of
content and presentation
• Introduces new functional
elements, reducing the use of
JavaScript

52. HMTL 5
Web Hypertext Application Technology
Working Group, founded by Apple,
Mozilla, and Opera in 2004, published
HMTL 5 (aka Web Applications 1)
• Seeks to extend HTML
• Maintains SGML syntax
• Supports both HMTL4 and XHTML1
• Adopts de facto industry standards
• Adds new functional elements
• Adds new JavaScript-based APIs

53. The new way forward
Continuous Periodic
updates Releases

54. Why did HTML5 win out?
XHTML2 disadvantages HTML5 advantages
• Required major changes by • Ensured backward
Browsers compatible
• New language requiring • Standardized accepted
unlearning, learning, and techniques and industry
relearning practices
• Insufficient new features • Changes aimed to solve real
• It wasn't backwards problems
compatible with the Web
• It didn't solve real problems

55. What does HTML5 mean to Web
designers?
New tags for
• semantic layout
• support of rich media
• new functionality
• new APIs

56. Chapter 4
A crash course
in XHTML*
Murach’s JavaScript, C4 © 2009, Mike Murach & Associates, Inc.
Slide 56

57. *Updates for this class
• XHMTL rules supersede by HTML5 and will be
noted where appropriate
Murach’s JavaScript, C4 © 2009, Mike Murach & Associates, Inc.
Slide 57

58. Agenda
· Introduction to HTML
· How to code a Web Page
· How to code tables
Murach’s JavaScript, C5 © 2009, Mike Murach & Associates, Inc. Slide 58

59. An XHTML page that doesn’t have a CSS file
Murach’s JavaScript, C4 © 2009, Mike Murach & Associates, Inc.
Slide 59

60. The same page with a CSS file for formatting
Murach’s JavaScript, C4 © 2009, Mike Murach & Associates, Inc.
Slide 60

61. <!DOCTYPE>
• HTML 4 document type definition:
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML
4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">
• HTML 5 document type definition:
<!DOCTYPE html>

62. Looser Rules for Markup
•
• <html>, <head>, requires are all optional
<body> type
<link> no longer not required attribute
•
• Closing tags are
No distinction betweencase letters lower case matter</EM></p>
• <P>Upper and lower upperon <Em> don’t
and
Valid <p>this closing slash (/)/> self-closing (aka void element)
to omit is valid</p><br
<p>and this is valid</p><br>
<p>even this is valid</p><br/>
•
• Attributes are not required need to be encased in quotes it
Attribute values no longer to have values associated with
<input type=checkbox checked>

63. Best Practice for New Rules
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8" />
<link rel=“stylesheet” type="text/css” href=”styles.css” media="screen” />
<script src=“scripts.js” type="text/javascript"><scripts>
</head>
<body>
…
</body>
</html>

64. HTML4/ XHTML1 Layout
div=”header”
div=”main”
div=”footer”

65. HTML5 Layout
header
section
footer

66. The HTML5 for the web page
<!DOCTYPE html>
<html lang="en">
<!-- the head section -->
<head>
<title>Mike's Bait &amp; Tackle Shop</title>
<meta charset="UTF-8" />
<link rel="shortcut icon" href="site.ico"
type="image/ico" />
</head>
<!-- the body section -->
<body>
<div id="page">
<header>
<h1>Mike's Bait &amp; Tackle Shop</h1>
</header>
Murach’s JavaScript, C4 © 2009, Mike Murach & Associates, Inc.
Slide 66

67. The HTML5 for the web page (continued)
<section id="main">
<p>Welcome to Mike's Bait &amp; Tackle Shop!
We have all the gear you'll need to make your
next fishing trip a great success!</p>
<h2>New Products</h2>
<ul>
<li>Ultima 3000 Two-Handed Fly Rod</li>
<li>Phil's Faux Shrimp Fly - Size 6</li>
<li>Titanium Open Back Fly Reel - Black</li>
</ul>
</section>
Murach’s JavaScript, C4 © 2009, Mike Murach & Associates, Inc.
Slide 67

68. The HTML5 for the web page (continued)
<footer>
<p class="contact">
<a href="contact.html">Contact us</a>
to place your order today!</p>
<p class="copyright">&copy;
<script>
var today = new Date();
document.writeln( today.getFullYear() );
</script>
Mike's Bait and Tackle Shop</p>
</footer>
</div>
</body>
</html>
Murach’s JavaScript, C4 © 2009, Mike Murach & Associates, Inc.
Slide 68

69. HTML Document Basics
<html> = (optional) root element identifies that the document
contains HTML
<head> = (optional) element for “invisible” information about
the document and presentation and behavior rules
<body> = (optional) element
for “visible” content that gets
displayed within the viewport

70. Agenda
· Introduction to HTML
Þ Basic Syntax
· How to code a Web Page
· How to code tables
Murach’s JavaScript, C5 © 2009, Mike Murach & Associates, Inc. Slide 70

71. An XHTML comment
<!-- This is a comment so it's ignored by the
web browser. -->
Murach’s JavaScript, C4 © 2009, Mike Murach & Associates, Inc.
Slide 71

72. Tags that have both opening and closing tags
<p>This text is within the opening and closing tags.</p>
Self-closing tags
<br />
<img src="logo.gif" alt="Murach Logo" />
New Rules
Murach’s JavaScript, C4 © 2009, Mike Murach & Associates, Inc.
Slide 72

73. Tags can have attributes
Attributes are always specified in the start tag
Attributes come in name/value pairs with the New Rules
values in single or double quotation marks
A tag with 3 attributes
<input type="text" name="firstName" id="firstName" />
A tag with 3 attributes plus a Boolean attribute
<input type="checkbox" name="mailList" id="mailList"
checked="checked" />
Murach’s JavaScript, C4 © 2009, Mike Murach & Associates, Inc.
Slide 73

74. Nesting of tags, but inner set must be closed
before outer set
<p>
<blockquote>
</blockquote>
</p>
Correct and incorrect nesting of tags
A tag with correct nesting
<b>This text <i>demonstrates correct</i></b><i>nesting
of tags.</i>
A tag with incorrect nesting
<b>This text <i>demonstrates incorrect</b> nesting
of tags.</i>
Murach’s JavaScript, C4 © 2009, Mike Murach & Associates, Inc.
Slide 74

75. The syntax rules for XHTML
1. The document must begin with a <!DOCTYPE> declaration.
2. The first tag must be the <html> tag.
3. Tag names and attributes must be lowercase.
4. All attributes must have values and those values must be in
quotes.
5. When you nest tags, you must close the inner tag before you close
the outer tag.
6. Extra whitespace is ignored.
Pop Quiz: Given the new rules how many are still true?
Murach’s JavaScript, C4 © 2009, Mike Murach & Associates, Inc.
Slide 75

76. The syntax rules for XHTML
True 1. The document must begin with a <!DOCTYPE> declaration.
False 2. The first tag must be the <html> tag.
False 3. Tag names and attributes must be lowercase.
False 4. All attributes must have values and those values must be in
quotes.
True 5. When you nest tags, you must close the inner tag before you close
the outer tag.
True 6. Extra whitespace is ignored.
Pop Quiz: Given the new rules how many are still true?
Murach’s JavaScript, C4 © 2009, Mike Murach & Associates, Inc.
Slide 76

77. Agenda
· Introduction to HTML
· How to code a Web Page
Þ Head section
· How to code tables
Murach’s JavaScript, C5 © 2009, Mike Murach & Associates, Inc. Slide 77

78. The HTML5 for a head section
<head>
<title>Mike's Bait and Tackle Shop</title>
<meta name="author" content="Ray Harris" />
<meta charset=”utf-8" />
<meta http-equiv="refresh" content="30" />
<link rel="shortcut icon" href="site.ico"
type="image/ico" />
<link rel="stylesheet" href="main.css" />
<script src="common.js"></script>
</head>
A browser that shows the title and the icon
Murach’s JavaScript, C4 © 2009, Mike Murach & Associates, Inc.
Slide 78

79. The attributes of the <link> tag
Attribute Description
href The URL of the resource being linked to the web
page.
rel The relationship of the resource being linked to the
web page.
type The media type of the resource being linked. New Rules
Murach’s JavaScript, C4 © 2009, Mike Murach & Associates, Inc.
Slide 79

80. Agenda
· Introduction to HTML
· How to code a Web Page
Þ Head section
Þ Core Attributes
· How to code tables
Murach’s JavaScript, C5 © 2009, Mike Murach & Associates, Inc. Slide 80

81. Core XHTML attributes
Attribute Description
id A unique identifier for an element.
class One or more classes that apply to an element.
title Additional information about the element.
Murach’s JavaScript, C4 © 2009, Mike Murach & Associates, Inc.
Slide 81

82. HTML Core Attributes
• ID
• Class
• Title
– You can add extra information about an element
<abbr title="World Health
Organization">WHO</abbr>

83. More on Classes and IDs
A tag can contain both a class and an ID:
<p id=“thoughts” class=“group”> … </p>
CSS works with both classes and IDs
JavaScript works only with IDs

84. HTML that uses the core attributes
<section id="main">
<h1>Mike's Bait and Tackle Shop</h1>
<p class="first">Welcome to Mike's Bait &amp; Tackle
Shop!</p>
<form action="subscribe.php" method="post">
<p>Please enter your e-mail address to subscribe
to our newsletter.</p>
<p>E-Mail:
<input type="text" name="email"
id="email"
title="Enter e-mail here." /></p>
<p><input type="submit" value="Subscribe"/></p>
</form>
</section>
<footer id="footer">
<p class="copyright">Copyright 2009.</p>
</footer>
Murach’s JavaScript, C4 © 2009, Mike Murach & Associates, Inc.
Slide 84

85. The XHTML in a web browser
Murach’s JavaScript, C4 © 2009, Mike Murach & Associates, Inc.
Slide 85

86. Agenda
· Introduction to HTML
· How to code a Web Page
Þ Head section
Þ Core Attributes
Þ Text
· How to code tables
Murach’s JavaScript, C5 © 2009, Mike Murach & Associates, Inc. Slide 86

87. Common block tags
Tag Description
<div> Creates an unformatted block of text.
<h1> Creates a level-1 heading displayed as 200%, bold
text.
<h2> Creates a level-2 heading displayed as 150%, bold
text.
<h3> Creates a level-3 heading displayed as 117%, bold
text.
<p> Creates a paragraph of text with a blank line after it.
Murach’s JavaScript, C4 © 2009, Mike Murach & Associates, Inc.
Slide 87

88. Examples of block tags
<div id="main">
<h1>This is an h1 tag.</h1>
<p>This is a p tag.</p>
<h2>This is an h2 tag.</h2>
<p>This is a p tag.</p>
</div>
<footer id="footer"> New Rules
<p>This is a p tag in the footer.</p>
</footer>
Murach’s JavaScript, C4 © 2009, Mike Murach & Associates, Inc.
Slide 88

89. The block tags in a web browser
Murach’s JavaScript, C4 © 2009, Mike Murach & Associates, Inc.
Slide 89

90. Inline tags for formatting text
Tag Description
<br /> Starts a new line of text.
<i> Text displayed in italics.
<b> Text displayed in bold.
<em> Emphasized text in italics.
<strong> Strong text in bold.
<code> Programming code displayed in a monospaced font.
<sub> Subscripted text.
<sup> Superscripted text.
<big> Text displayed larger than normal.
New Rules
<small> Text displayed smaller than normal.
<span> Creates an unformatted group of text that can be
styled by CSS.
Murach’s JavaScript, C4 © 2009, Mike Murach & Associates, Inc.
Slide 90

91. Examples of inline tags that format text
<p>Text that breaks <br /> across two lines.</p>
<p>Text formatted in <i>italics</i> and <b>bold</b>.</p>
<p>Text that uses <em>the em tag</em> for italics and
<strong>the strong tag</strong> for boldfacing.</p>
<p>Text that uses <code>the code tag</code> to display a
monospaced font.</p>
<p>Text that uses the sub tag₁ and the sup
tag³.</p>
<p>Text that uses the <big>big tag</big>, and <small> New Rules
the small tag</small>.</p>
<p>Text that uses the span tag to identify <span
class="book">a book title</span>.</p>
Murach’s JavaScript, C4 © 2009, Mike Murach & Associates, Inc.
Slide 91

92. The inline tags in a web browser
Murach’s JavaScript, C4 © 2009, Mike Murach & Associates, Inc.
Slide 92

93. Block versus Inline
BLOCK INLINE
Space: Take up the full width Space: takes up only as much
available, with a new lines width as it needs and does not
before and after force new lines
Nesting: Can have inline or Nesting: Can only have other
other block elements nested inline elements nested inside
inside

94. More on Text Tags
Logical Presentational
<h1>
<h2>
Block <h3>
<p>
<em>
<i>
<strong>
<b>
<br />
<code>
Inline <sub>
<sup>
<big>
<small>

95. Pop Quiz:
Which would you use and why?
Logical Presentational
Bold <strong> <b>
Italics <em> <i>

97. Exercise Time

98. Exercise #1
Create a page titled My Discover
Add these paragraphs
There are real uses for superscript and subscript (although deleted text is less
common).
Superscript works for fancy numbers: 1st
Subscript is handy for chemistry: H20
Italic print: this page assumes no liability for damages incurred by using or not
using these elements.