ca 272 - professional web site development class 2: anatomy of a web site and web page & intro...

CA 272 - Professional Web Site Development

Class 2: Anatomy of a Web Site and Web Page & Intro to HTML

Review - the Process

1. Client opens browser, Internet connection

2. Type URL or click link3. Browser queries name server(s) for IP

address4. Browser establishes HTTP connection

with Web server5. Browser sends GET request for Web

page

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 connections9. Browser receives data and begins to render

Web page / executes any JavaScript10. HTTP connections closed

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

Anatomy of a Web Page

What kind of elements do we see on Web pages …?


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


Web pages consist of two parts: <head> section - information about the page <body> section - actual content of 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

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

Markup Languages

Markup languages describe document’s structure and formatting

Markup example - a book

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

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”

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

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

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

(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

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)

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)

Intro to HTML

Web page structural elements: <html> <head> <body>

Bare minimum for Web page

Homework

Read chapter 1 of Visual QuickStart Guide Read sections 2.5 and 3.1 in Web

Development and Design Foundations

ca 272 - professional web site development class 2: anatomy of a web site and web page & intro...

Documents