1. CA 272 - Professional Web Site Development Class 2: Anatomy of a Web Site and Web Page & Intro to HTML

2. Review - the Process 1. Client opens browser, Internet connection 2. Type URL or click link 3. Browser queries name server(s) for IP address 4. Browser establishes HTTP connection with Web server 5. Browser sends GET request for Web page

3. Process - continued 6. Web server processes request (connect with Web application server, database, etc.) 7. Server responds to browser with status code and message 8. Various files sent via HTTP connections 9. Browser receives data and begins to render Web page / executes any JavaScript 10. HTTP connections closed

4. Anatomy of a Web Site Files organized into folders on a Web server Includes: HTML files (Web pages) ‘replaced elements’ - images, audio/video, Flash, etc. Linked files related to display or function of page (e.g., external style sheets, JavaScript files) Folder structure like a tree

5. Anatomy of a Web Page What kind of elements do we see on Web pages …?

6. Anatomy of a Web Page What kind of elements do we see on Web pages …? text images links multimedia (audio/video/animation) forms buttons frames

7. Anatomy of a Web Page Web pages consist of two parts: section - information about the page section - actual content of page

8. Anatomy of a Web Page Head section contains internal info we mostly cannot see: Document title metadata scripts – e.g., JavaScript links to external style sheets and scripts comments – notes by the programmer all but comments and scripting are in head section

9. Intro to HTML - Hypertext Markup Language HTML forms the basis for all Web pages HTML is a markup language - not a programming language no logic or procedures no methods/actions

10. Markup Languages Markup languages describe document’s structure and formatting Markup example - a book

11. Intro to HTML HTML is a markup language for the Web Everything on Web page must be labeled as HTML element - also called ‘tags’ HTML elements - chunk of Web page content E.g., paragraph or image

12. Anatomy of an HTML Tag HTML element start tag attribute – value pair * content * end tag * not all elements have these By Aapo Laitinen for Wikipedia, “HTML Element”

13. HTML Elements Start and end tags enclosed in <> brackets Attribute is property of content (e.g., width of an image) Element may contain: Text Other elements Nothing

14. HTML Tags Fixed set of tags - about 80 Text only Tags are often nested within other tags Document tree (Document Object Model) Parents Children Siblings

15. Whose Language? Who’s in charge of HTML? created by Tim Berners-Lee formalized into specification in 1990s by Internet Engineering Task Force (under ISOC – international organization on Internet) since 1996, specification maintained by World Wide Web Consortium (W3C) and its HTML Working Group W3C is consortium of 400+ industry organizations

16. (X)HTML Specifications W3C specifications: HTML 4.0 published in 1997 HTML 4.0.1 published in 1999 now focused on XHTML XHTML specifications first published by W3C in January 2000 now working on XHTML 2.0 and successor to HTML

17. Block vs Inline Elements block-level elements: generate new block (new line) on page structural pieces of page can contain block or inline elements inline elements: occur within line may be content-related or formatting may only contain other inline elements (if at all)

18. Common HTML Elements Paragraph: (block element) Headings 1 - 6: - (block elements) Image: (inline element) Anchor: (inline element) Link: http://www.google.com Bold: or (inline element) Italics: or (inline element)

19. Intro to HTML Web page structural elements: Bare minimum for Web page

20. Homework Read chapter 1 of Visual QuickStart Guide Read sections 2.5 and 3.1 in Web Development and Design Foundations