Week 1

1,189 views
1,097 views

Published on

Published in: Technology
0 Comments
0 Likes
Statistics
Notes
  • Be the first to comment

  • Be the first to like this

No Downloads
Views
Total views
1,189
On SlideShare
0
From Embeds
0
Number of Embeds
133
Actions
Shares
0
Downloads
6
Comments
0
Likes
0
Embeds 0
No embeds

No notes for slide
  • Separation of presentation and structure (CSS and HTML);Separation of behavior and structure (JavaScript and HTML);Separation of behavior and presentation (JavaScript and CSS)
  • HTTP uses the client-server model: A Web Browser (HTTP client) opens a connection and sends a request message to an Apache Web (HTTP) server; A Web Serverreturns a response message, which usually containing the resource that was requested. After delivering the response, the server closes the connection (making HTTP a stateless protocol, i.e. not maintaining any connection information between transactions).
  • Week 1

    1. 1. Slide 1
    2. 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. 3. About Steve
    4. 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. 5. What people are saying about Steve"Doctor Steve is intellectual curious ontopics from information technology tomarketing, management, and finance, asevidenced by his accumulation ofmultiple degrees and few real jobs. Asenior consultant highly valued by someof the worlds largest companies, heremains a vice president at home, wherehe is solely responsible trash removal anddog walking. Steve is intensely interestedin browsers and the 3-D world thatsaround the corner.”
    6. 6. About James
    7. 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. 8. What people are saying about James
    9. 9. About You
    10. 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. 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. 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. 13. The XAMPP Control Panel Start the Apache Web server and MySQL server. Do not run as service yet! Slide 13
    14. 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. 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. 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. 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. 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 applicationson 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 applicationon 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. 19. The components of an HTTP URLhttp://www.murach.com/books/lists.htm protocol domain name path filenameWhat 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. 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. 21. An index of the apps in the book_apps directory Slide 21
    22. 22. Notepad++ with three tabs open Slide 22
    23. 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. 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. 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. 26. Joey’s Vision
    27. 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 satelliteGlobally available & accessible; Easy & natural for the user; massively scalable; and fully mass customized & micro- reliable & secure services targeted by the enterprise
    28. 28. Objectives1. Provide you with an understanding key Web technologies2. Provide you with an understanding of graphic design, usability and SEO3. Enable you to design and code a web app
    29. 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 theExperience
    30. 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. 31. Quiz: Which old white guy invented the Internet?
    32. 32. Internet ≠ World Wide WebThe World Wide Web is a system of interlinked hypertextdocuments accessed via the Internet.The World Wide Web uses3 essential technologies:• Uniform Resource Locator• HyperText Transfer Protocol• HyperText Markup Language
    33. 33. Uniform Resource Locators
    34. 34. Uniform Resource LocatorFirst, 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.gifProtocol Host Port PathScheme Name Name
    35. 35. HyperText Transfer Protocols
    36. 36. HTTP Request carriage return character line-feed characterrequest line(GET, POST, GET /index.html HTTP/1.1rnHEAD 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.7rncarriage return, Keep-Alive: 115rnline feed at start Connection: keep-alivern rnof line indicatesend of header lines
    37. 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 resources 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. 38. HTTP Responsestatus line(protocolstatus code HTTP/1.1 200 OKrnstatus 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. 39. HTTP Response codes200 OK – request succeeded, requested object later in this msg301 Moved Permanently – requested object moved, new location specified later in this msg (Location:)400 Bad Request – request msg not understood by server404 Not Found – requested document not found on this server505 HTTP Version Not Supported Application 2-39
    40. 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 sockettime Application 2-40
    41. 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 objectstime 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. 42. HyperText Markup Language
    43. 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. 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. 45. What is Semantic Structure?
    46. 46. HTML & Semantic Structure
    47. 47. The Early History of HTMLSource: University of Maryland, Baltimore County
    48. 48. Why we a new HTML standard“HTML isnt a very goodlanguage for making Webpages. However, it has been avery good language formaking the Web.” —Edd Dumbill Dec 6, 2005
    49. 49. Deficiencies of HTML4/XHMTL1Need for• Less presentation elements• More semantic elements• More separation of structure and presentation• More robust media controls
    50. 50. The battle for the future
    51. 51. XHMTL 2World Wide Web Consortiumpublished initial draft in 2002,representing the first major changesince 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. 52. HMTL 5Web Hypertext Application TechnologyWorking Group, founded by Apple,Mozilla, and Opera in 2004, publishedHMTL 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. 53. The new way forwardContinuous Periodic updates Releases
    54. 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 wasnt backwards problems compatible with the Web• It didnt solve real problems
    55. 55. What does HTML5 mean to Web designers?New tags for• semantic layout• support of rich media• new functionality• new APIs
    56. 56. Chapter 4 A crash course in XHTML*Murach’s JavaScript, C4 © 2009, Mike Murach & Associates, Inc. Slide 56
    57. 57. *Updates for this class• XHMTL rules supersede by HTML5 and will be noted where appropriateMurach’s JavaScript, C4 © 2009, Mike Murach & Associates, Inc. Slide 57
    58. 58. Agenda · Introduction to HTML · How to code a Web Page · How to code tablesMurach’s JavaScript, C5 © 2009, Mike Murach & Associates, Inc. Slide 58
    59. 59. An XHTML page that doesn’t have a CSS fileMurach’s JavaScript, C4 © 2009, Mike Murach & Associates, Inc. Slide 59
    60. 60. The same page with a CSS file for formattingMurach’s JavaScript, C4 © 2009, Mike Murach & Associates, Inc. Slide 60
    61. 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. 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. 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. 64. HTML4/ XHTML1 Layoutdiv=”header”div=”main”div=”footer”
    65. 65. HTML5 Layoutheadersectionfooter
    66. 66. The HTML5 for the web page <!DOCTYPE html> <html lang="en"> <!-- the head section --> <head> <title>Mikes 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>Mikes Bait &amp; Tackle Shop</h1> </header>Murach’s JavaScript, C4 © 2009, Mike Murach & Associates, Inc. Slide 66
    67. 67. The HTML5 for the web page (continued) <section id="main"> <p>Welcome to Mikes Bait &amp; Tackle Shop! We have all the gear youll 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>Phils 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. 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> Mikes Bait and Tackle Shop</p> </footer> </div> </body> </html>Murach’s JavaScript, C4 © 2009, Mike Murach & Associates, Inc. Slide 68
    69. 69. HTML Document Basics<html> = (optional) root element identifies that the documentcontains HTML<head> = (optional) element for “invisible” information aboutthe document and presentation and behavior rules<body> = (optional) elementfor “visible” content that getsdisplayed within the viewport
    70. 70. Agenda · Introduction to HTML Þ Basic Syntax · How to code a Web Page · How to code tablesMurach’s JavaScript, C5 © 2009, Mike Murach & Associates, Inc. Slide 70
    71. 71. An XHTML comment <!-- This is a comment so its ignored by the web browser. -->Murach’s JavaScript, C4 © 2009, Mike Murach & Associates, Inc. Slide 71
    72. 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 RulesMurach’s JavaScript, C4 © 2009, Mike Murach & Associates, Inc. Slide 72
    73. 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. 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. 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. 76. The syntax rules for XHTMLTrue 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. 77. Agenda · Introduction to HTML · How to code a Web Page Þ Head section · How to code tablesMurach’s JavaScript, C5 © 2009, Mike Murach & Associates, Inc. Slide 77
    78. 78. The HTML5 for a head section <head> <title>Mikes 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 iconMurach’s JavaScript, C4 © 2009, Mike Murach & Associates, Inc. Slide 78
    79. 79. The attributes of the <link> tagAttribute Descriptionhref 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 RulesMurach’s JavaScript, C4 © 2009, Mike Murach & Associates, Inc. Slide 79
    80. 80. Agenda · Introduction to HTML · How to code a Web Page Þ Head section Þ Core Attributes · How to code tablesMurach’s JavaScript, C5 © 2009, Mike Murach & Associates, Inc. Slide 80
    81. 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. 82. HTML Core Attributes• ID• Class• Title – You can add extra information about an element <abbr title="World Health Organization">WHO</abbr>
    83. 83. More on Classes and IDsA tag can contain both a class and an ID: <p id=“thoughts” class=“group”> … </p>CSS works with both classes and IDsJavaScript works only with IDs
    84. 84. HTML that uses the core attributes <section id="main"> <h1>Mikes Bait and Tackle Shop</h1> <p class="first">Welcome to Mikes 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. 85. The XHTML in a web browserMurach’s JavaScript, C4 © 2009, Mike Murach & Associates, Inc. Slide 85
    86. 86. Agenda · Introduction to HTML · How to code a Web Page Þ Head section Þ Core Attributes Þ Text · How to code tablesMurach’s JavaScript, C5 © 2009, Mike Murach & Associates, Inc. Slide 86
    87. 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. 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. 89. The block tags in a web browserMurach’s JavaScript, C4 © 2009, Mike Murach & Associates, Inc. Slide 89
    90. 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. 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<sub>1</sub> and the sup tag<sup>3</sup>.</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. 92. The inline tags in a web browserMurach’s JavaScript, C4 © 2009, Mike Murach & Associates, Inc. Slide 92
    93. 93. Block versus InlineBLOCK INLINESpace: Take up the full width Space: takes up only as muchavailable, with a new lines width as it needs and does notbefore and after force new linesNesting: Can have inline or Nesting: Can only have otherother block elements nested inline elements nested insideinside
    94. 94. More on Text Tags Logical Presentational <h1> <h2>Block <h3> <p> <em> <i> <strong> <b> <br /> <code>Inline <sub> <sup> <big> <small>
    95. 95. Pop Quiz:Which would you use and why? Logical Presentational Bold <strong> <b> Italics <em> <i>
    96. 96. Exercise Time
    97. 97. Exercise #1Create a page titled My DiscoverAdd these paragraphsThere are real uses for superscript and subscript (although deleted text is lesscommon).Superscript works for fancy numbers: 1stSubscript is handy for chemistry: H20Italic print: this page assumes no liability for damages incurred by using or notusing these elements.

    ×