1 / 20

Essential Anatomy of Professional Web Development and HTML Introduction

Understand the anatomy of a website and web page, learn how browsers interact with web servers, the structure of HTML elements, and the importance of HTML in web development. Explore common HTML tags, block vs inline elements, and the essential components of a web page.

addison
Download Presentation

Essential Anatomy of Professional Web Development and HTML Introduction

An Image/Link below is provided (as is) to download presentation Download Policy: Content on the Website is provided to you AS IS for your information and personal use and may not be sold / licensed / shared on other websites without getting consent from its author. Content is provided to you AS IS for your information and personal use only. Download presentation by click this link. While downloading, if for some reason you are not able to download a presentation, the publisher may have deleted the file from their server. During download, if you can't get a presentation, the file might be deleted by the publisher.

E N D

Presentation Transcript

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

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

  3. Process - continued • Web server processes request (connect with Web application server, database, etc.) • Server responds to browser with status code and message • Various files sent via HTTP connections • Browser receives data and begins to render Web page / executes any JavaScript • 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: • <head> section - information about the page • <body> 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: <p> (block element) • Headings 1 - 6: <h1> - <h6> (block elements) • Image: <img> (inline element) • Anchor: <a> (inline element) • Link: <a href=http://www.google.com> • Bold: <b> or <strong> (inline element) • Italics: <i> or <em> (inline element)

  19. Intro to HTML • Web page structural elements: • <html> • <head> • <body> • 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

More Related