HTML Overview formerly a Quick Review

Size: px

Start display at page:

Download "HTML Overview formerly a Quick Review"

Scarlett Banks
6 years ago
Views:

1 HTML Overview formerly a Quick Review Outline HTML into Emergence of DHTML HTML History Evolution of Web 1.0 to Web 2.0 DHTML = HTML + JavaScript + CSS Key Set of HTML Tags Basic: a, html, head, body, h1-h6, strong, em, p, br, hr Good to Know: table, td, tr, ol, ul, li, pre HTML 5 Semantic: header, footer, aside, nav HTML 5 XML Validation ( HTML5 is XML) DTDs, IDEs/Editor, Tag Guidelines, Validation 8/16, 8/10 & 9/2007 Professor T. DeDonno HTML 2 1

2 HTML into Emergence of DHTML HTML History 1965 HyperText was Coined 1989 HTML SGML Instance Standard Generalized Markup Language IBM ISO/OSI Standard HTML 1.0 Basic Formatting titles, headings, paragraphs, and lines 1991 Web Introduced 1993 Mosaic HTML Browser Anointed Internet Killer App; Critical Web App 8/16, 8/10 & 9/2007 Professor T. DeDonno HTML 4 2

3 SGML 8/16, 8/10 & 9/2007 Professor T. DeDonno HTML 5 Mosaic /16, 8/10 & 9/2007 Professor T. DeDonno HTML 6 3

4 Mosaic w Wikipedia 9/2001 Three Significant Differences? 8/16, 8/10 & 9/2007 Professor T. DeDonno HTML 7 9/01 9/07 8/15 8/16 8K (Goal 100K) 1900K 4800K 5200K Exponential Growth to Linear Growth Support for Mobile RWD Firefox w Wikipedia 9/2007 8/16, 8/10 & 9/2007 Professor T. DeDonno HTML 8 4

5 Original Web CLIENT TCP Get Server TCP Put Objectives: Faster Way to Exchange Publications Standard Conference Journal was too Slow Lot of Missing Pieces: Security, DB, Dynamic, State, etc. How Did Web Hit Critical Mass so Fast? 8/16, 8/10 & 9/2007 Professor T. DeDonno HTML 9 Hit Critical Mass Fast Web Browser CLIENT TCP Get Web Server Server HTML Forms Java Applet TCP Put Java CGI C & Perl Right Place Right Time - Everything Was in Place Standards CGI & OSI SGML Expanded Fast, But Do We Have Full Featured Robust Dynamic Client? 8/16, 8/10 & 9/2007 Professor T. DeDonno HTML 10 5

6 Robust Dynamic Client Simplified Client Side Programming Quick and Dirty Desktop Publishing Standard Adherence Browser Wars Began 8/16, 8/10 & 9/2007 Professor T. DeDonno HTML : Browser Wars Heated Up Browsers Added Desktop & Programming Netscape JavaScript client side programming Added <center> <font> Later <blink>, <table> Table Become Popular for Formatting IE <Marquee>, VBScript W3C Standard Adherence ECMA Standard VBScript & javascript CSS for Presentation 8/16, 8/10 & 9/2007 Professor T. DeDonno HTML 12 6

7 DHTML 1996 to Today Dynamic HyperText Markup Language Client Becomes Dynamic Entity IE Wins War But Netscape Wins JavaScript Battle W3C HTML & CSS Web Browser CLIENT HTML Forms Java Applet TCP Get TCP Put Web Server Java Server CGI C & Perl DHTML = JavaScript + HTML + CSS = Behavior + Markup + Presentation JSP PHP 8/16, 8/10 & 9/2007 Professor T. DeDonno HTML 13 HTML Tags HTML5 is based on XML HTML4.01 SGML Based 7

8 Basic HTML Tags a Anchor <a href= >Ebay</a> html Root Tag Root Tag has 2 children head & body head Header Defines title, character set, etc. body Page Body <body>. </body> h1..h6 Headers <h6>header</h6> strong Strong <strong>bold</strong> em Emphasis <em>emphasis</em> p Paragraph <p>paragraph of text</p> div Block neutral Display type block; no formatting br Line break <br /> hr Horiz Rule <hr /> 8/16, 8/10 & 9/2007 Professor T. DeDonno HTML 15 HTML Example <body> <p> Paragraph Line Break Before & After</p> <em> Emphasis Tag </em> <br /> <! - - New Line Break -- > <strong>strong Tag </strong> <h1>header One First Header</h1> <h6>sixth Header Less Pronounced</h6> <a href= > CIM </a> <hr /> <!- - Horizontal Rule - - > </body> 8/16, 8/10 & 9/2007 Professor T. DeDonno HTML 16 8

9 Basic Links Relative/Absolute <html><head><title>links</title></head> <body> Test relative versus absolute links <a href= / title= relative > Open Web Server Root Folder</a> <a href= basichtml.htm title= relative page > Open Previous example </a> <a href= >Ebay</a> </body> </html> 8/16, 8/10 & 9/2007 Professor T. DeDonno HTML 17 Good to Know Tags table creates a Table td table data cell th table Header cell tr table row ul unordered list & ol ordered list li list Item pre Preformatted Text White spacing: tabs, new lines and spaces Rendering Multiple White Spaces become a single space <pre> Maintains White spacing 8/16, 8/10 & 9/2007 Professor T. DeDonno HTML 18 9

10 Table/List Example <table border= 1 > <tr><th>n</th><th>n*n</th></tr> <tr><td>1</td><td>1</td></tr> <tr><td>2</td><td>4</td></tr> </table> <p>html Has Two Types of Lists</p> <ol> <li>ordered using <ol> tag</li> <li>unordered using <ul> tag</li> </ol> <p>in normal Web Page rendering multiple white spaces become a single blank space. But preformatted tag maintains white spaces</p> <pre>white Space Types Space, Tab, newline </pre> 8/16, 8/10 & 9/2007 Professor T. DeDonno HTML 19 chapter1/table.html 8/16, 8/10 & 9/2007 Professor T. DeDonno HTML 20 10

11 HTML Core Attributes Attribute: Property consisting of name value Pair <a title= Click Me href= /> On Rollover Click Me has a Pop-up Title works most of the time In AD Act implement title tags id= Unique name class= CSS class for tag style= CSS Rule for Formatting 8/16, 8/10 & 9/2007 Professor T. DeDonno HTML 21 HTML5 Semantic Tags Tag Location Meaning.. <header> <nav> <aside> <footer> <aside> Side Bar </aside> <header>javascript/jquery</header> <nav>site Links</nav> <p>main Content</p> <footer>contact Info</footer> Need to Load JavaScript to support IE7 Similar to <div id= pageheader > 8/16, 8/10 & 9/2007 Professor T. DeDonno HTML 22 11

12 HTML Validation HTML DTD IDEs/Editors to Create XHTML HTML Template HTML Validation Guidelines Validating Documents HTML XHTML Extensible HTML (HTML 4.01 deprecated XHTML) Instance of XML based on HTML Definition XHTML is XML instance with HTML DTD XML rules open tag must have closing <p>..</p> DTD: Document Type Definition DTD specifies rules like <p> inside <body> HTML5 or HTML is an XML Standard Web Pages Must Follow XML Syntax And HTML DTD (allowable tags & locations ) 8/16, 8/10 & 9/2007 Professor T. DeDonno HTML 24 12

13 DTDS and XML All XML Documents Follow Same XML Syntax Requirement They have a specific DTD (or XSD) For HTML 5 we use.. <!doctype html> Where html is root node and DTD (XHTML) HTML 4.01 had 3 Main DTDs Strict, transitional and frameset 8/16, 8/10 & 9/2007 Professor T. DeDonno HTML 25 Transitional DTD Example CS5/CS4/Studio 8 Dreamweaver Default Let Dreamweaver do it (DDit) CS6 & Creative Cloud HTML5 is standard <!DOCTYPE> First Tag/Line XML Document <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" " transitional.dtd"> 8/16, 8/10 & 9/2007 Professor T. DeDonno HTML 26 13

14 HTML Document w DTD <!DOCTYPE html> <html> </html> <head> <meta charset= utf-8 /> <title>web Page Title</title> </head> <body> <p>web Page Display Tags</p> </body> 8/16, 8/10 & 9/2007 Professor T. DeDonno HTML 27 Alt Options To Create Web Page Can Use a High Level Web Page IDE Adobe Dreamweaver Aptana Open Source Web Page IDE Any Editor Must Know HTML Internals TextPad, VIM, NotePad++, sublime Netbeans: PHP, JavaScript, SQL Built In Eclipse: PHPEclipse, JSEclipse & Web Tools Follow XML/HTML Requirements 8/16, 8/10 & 9/2007 Professor T. DeDonno HTML 28 14

15 XML (HTML) Syntax Case Sensitive Tags (html lowercase) Quote all Attribute Values <img src= big.jpg height= 200 /> Proper Nesting with all Tags Close all Tags even Empty Tags <br /> Special Characters " Ddit pause on & Use CSS for Presentation, use style attribute 8/16, 8/10 & 9/2007 Professor T. DeDonno HTML 29 HTML Quiz? <li> Professor <em title=last> DeDonno </li> </em> <li> Professor <strong> Tom </strong> </li> <li> <strong> Professor Tom DeDonno </strong> Missing Ending Tag? Displayed Web Browser? Improper Nesting? XML Attribute Syntax error? For DTD validation <li> must be inside or block 8/16, 8/10 & 9/2007 Professor T. DeDonno HTML 30 15

16 Validating Documents Future videos will add Web Developer add-on Always follow XML Syntax Requirements Validate during creation not after Validator: Web Developer and Dreamweaver Link Let Dreamweaver Create Your Document Can add HTML Validator Icon to footer CSS3 is Separate Validator 8/16, 8/10 & 9/2007 Professor T. DeDonno HTML 31 validationtest.html <!DOCTYPE html><html><head><meta charset="utf-8" /> <title>html Validation Example</title> <p>hello</p></head><body> <p>this page has 5 errors can you find them? Paragragh tag Line Break Before & After <em> Emphasis Tag </em> <strong>strong Tag no line break</strong> <h1> First Header</h1> <h6>sixth Header Less Pronounced</h6> <p><a href=" <hr>  <a href= cut and paste link"><img src=" height="50" width="88" /></a> Often Best to Copy image to local folder - <a href= search link google it">google images</a></body></html> 8/16, 8/10 & 9/2007 Professor T. DeDonno HTML 32 16

17 Validating Web Pages Dreamweaver Validation Button Button Red (Error click for Error) or Green Ok File Validate Firefox Web Developer Add-on Tools Validate or Check Mark Upper right Corner) Both use Option Include Validation Link in footer 8/16, 8/10 & 9/2007 Professor T. DeDonno HTML 33 Optional Add Validation Link to Footer Get validation link from Validator <a href=" link to filel"><img alt= html5 badge src=" 5-topper.png" height="50" width="88" /></a> Often Best to Copy image to local folder - Google search find matching html5 badge 8/16, 8/10 & 9/2007 Professor T. DeDonno HTML 34 17

18 Quiz HTML Intro First Line in Well formed Document Starts First tag of all XML Documents is? Two children of <html> root tag? XML Syntax all tags are nested, always enclose attribute values with, case sensitivity. A <p> tag inside <head> block is? In 21 st century learn to use IDE (cimw115)? 8/16, 8/10 & 9/2007 Professor T. DeDonno HTML 35 Deprecated HTML Tags HTML XHTML Replacement applet u,i Center, Font b object (Flash & Java) em (device Independent) CSS Definition use style attribute strong 8/16, 8/10 & 9/2007 Professor T. DeDonno HTML 36 18

19 XHTML Help References htmlref.com Good XHTML Site CIM298 Portfolio & CIM272 CSS Recommended Reference Book Web Design in a Nutshell Advantageous Look For CSS3/HTML5 Edition 8/16, 8/10 & 9/2007 Professor T. DeDonno HTML 37 19

CHAPTER 2 MARKUP LANGUAGES: XHTML 1.0

WEB TECHNOLOGIES A COMPUTER SCIENCE PERSPECTIVE CHAPTER 2 MARKUP LANGUAGES: XHTML 1.0 Modified by Ahmed Sallam Based on original slides by Jeffrey C. Jackson reserved. 0-13-185603-0 HTML HELLO WORLD! Document