1. 3 Layers of a Web Page 1. Content/Structure - HTML 2. Presentation - CSS 3. Action/Behavioral - JavaScript

2. Technically, there are 4 layers Content Layer ◦ Text and foreground images Structural Layer ◦ HTML Presentational Layer ◦ CSS Action/Behavioral Layer ◦ JavaScript

3. But these two… Content Layer ◦ Text and foreground images Structural Layer ◦ HTML …are hard to separate

4. Most books present only 3 HTML to structure the content CSS used to decorate HTML structures JavaScript to manipulate HTML structures

5. Hypertext Markup Language A set of markup tags with syntax rules Unlike a programming language, you cannot describe actions or logic You can only describe information structure and context

6. HTML tags Also called HTML Elements Content goes here Content This the abstract of a paper

7. HTML Elements Can be nested and viewed as a tree (Document Object Model – DOM Tree) This is a paragraph. This is bold. This is italic p p b b i i This is a paragraph. This is This is bold italic

8. CSS: Cascading Style Sheets CSS was part of Tim Berners-Lee’s original design for HTML. but its use was almost entirely abandoned between 1996 and 2003.

9. CSS: Cascading Style Sheets Used to define appearance of HTML elements ◦ height, width ◦ font-size ◦ text-align ◦ color ◦ border, ◦ margins, padding, ◦ background-images, etc.

10. CSS: Cascading Style Sheets Web pages can have multiple style sheets ◦ Main styles ◦ Special purpose styles Tags can have conflicting styles ◦ One style sheet specifies p { font-weight: bold; } ◦ The other specifies p {font-weight: normal; }

11. CSS: Cascading Style Sheets Cascading refers to how conflicting style rules are resolved. ◦ Priority is given to the most specific rules  cascade down to the less specific rules. ◦ Priority is also given to rules that are “closer” to the content  embedded and inline styles override global or attached styles.

12. HTML & CSS together as friends HTML was supposed to be a structural or “semantic” language, ◦ But, The Browser Wars of the 90’s lead to the introduction of “style” or formatting tags  Example tag ◦ “style” tags are problematic and have been removed from the HTML standards (called deprecation).

13. Why are “style” tags bad? Content and Appearance should be separate Otherwise you create redundant code that is hard to maintain. ◦ Duplication instead of reuse

14. Semantic vs Style Semantic = Has Meaning Style = Specifies Appearance

15. Semantic vs Style Semantic  Meaning figcaption { font-family: Arial; size: 14pt; color: blue; } This is a tiger A figcaption is meaningful. Figures typically have a caption that describes the figure. Style   Appearance This is a tiger Here, we specify how to display the caption’s font But there is no way to know that “This is a tiger” is the caption for a figure.

16. CSS + HTML allows you to reuse styles figcaption { font-family: Arial; size: 14pt; color: blue; } Caption 1 … Caption 2 … Caption 3 … Caption 99 …

17. Duplication instead of reuse Caption 1 Caption 2 Caption 3 Sub-title 1 … Caption 999 Sub-title 99 Image if you wanted to change the font size to 2 for all captions but not the Sub-titles?

18. HTML & CSS syntax General StructureExample Content element { property: value; … } ESPN h1 { font-size: 10pt; color: red; }

19. Extensible HTML  XHTML XHTML is a reformulation of HTML according to XML standards. Only four differences 1.Inclusion of an XML header 2.Single tags end with />, instead of just > 3.Attribute values must have quotes: “value” 4.Tags must be in lowercase

20. Why use XHTML? Allows your web page to be parsed by a general XML parser. ◦ Lots of applications support XML parsing.

21. XHTML Rules Content In XHTML all element names must be lower case. ◦ In HTML tag case didn’t matter. In XHTML all element must have a closing tag ◦ Most web browsers are forgiving about closing tags, which makes it possible to forget about them ◦ Example Here is paragraph with no ending tag Here is another paragraph

22. HTML single tags HTML has a few tags that are standalone, i.e., no closing tag. Image: Line break: Link: ◦ Used to link/insert a Cascading Style Sheet

23. XHTML single tags To meet XML guidelines HTML single tags must to closed with a /> 1. Image: 2. Line break: 3. Link: Note the space before the />

24. Attributes content XHTML requires that all attribute values be enclosed in quotes. HTML: XHTML: Forgiving browsers don’t care about the quotes

25. Browsers ignore whitespace HTML documents are text documents. When web browsers render a web page, they ignore tabs, spaces and line breaks ◦ Allows web designer to format HTML code without having an effect on the web page’s rendered appearance. Tabs, spaces, and line breaks should be added with CSS, not HTML.

26. Basic HTML document Title Displays in Browser’s Top Bar Page content here

27. Text Structure (blocks) Most Important Header A paragraph in the literal sense. Sub-heading Smaller Sub-heading … Smallest Sub-heading

28. Lists Ordered Lists (ol)Unordered Lists (ul) Item 1 Item 2 Item 3 Item 4 Item 1 Item 2 Item 3 Item 4

29. Terms and Definitions ExampleMeaning Coffee black hot drink Milk white cold drink dl – definition list dt – definition term dd – definition description Used heavily in early HTML documents which were most scientific papers with lost of definitions and terms

30. Text Formatting (style) Teletype text Italic text Bold text Big text Small text

31. Text identity (semantic) Emphasized text Strong text Definition term Computer code text Sample computer code Variable Citation

32. Hyperlinks Called the anchor tag ESPN href stands for hypertext reference What is the element name? What is the attribute? What is the attribute’s value What is the content?

33. Elements we’ll learn about later Tables Forms Forms

34. Deprecation Removed from the standard Most browsers will still render deprecated tags ◦ However, browsers are not required to Do not use deprecated tags even though they may render properly on your browser.

35. Divisions and Spans Divisions used to break your webpage into logical blocks or boxes Spans used to create custom in- line tags, i.e., within the flow of a paragraph of text. Example: This is paragraph with a table reference. Table 2.4 is a lovely table.

36. HTML5 added many new semantic tags Defines an article Defines content aside from the page content Defines additional details that can be hidden Defines a visible heading for a element Specifies self-contained content, like illustrations, diagrams, photos, code listings, etc. Defines a caption for a element Defines a footer for a document or section Defines a header for a document or section Defines navigation links Defines a section in a document

37. CSS Attributes For Text Elements For Block Elements font-family, size, text-align, weight, sytle, variant, line-height, indent, direction height, width, margins, padding, borders, border-color, border-style, background color, background image.

38. JavaScript In the 90’s Sun Microsystems failed to copyright “Java.” Netscape (popular early browser), developed a browser scripting language and called it JavaScript to capitalize on Java’s emerging popularity JavaScript does NOT resemble Java in any way!

39. JAVASCRIPT EXAMPLE

40. JavaScript Basics Interpreted language ◦ Web browsers are JavaScript interpreters ◦ Only web server (Node.js) can interpret JavaScript JavaScript is embedded in a tag HTML includes action/event attributes that work nicely with JavaScript ◦

41. JavaScript Fundamentals Allows web pages to be interactive ◦ Web pages can change as the user moves the mouse, clicks or types. HTML includes form elements ◦ buttons, text boxes, selection menus, etc. that work nicely with JavaScript HTML5 includes a canvas element ◦ JavaScript can draw objects on the canvas that the user can interact with.