CIS 228 The Internet Day 2, 9/1/11 Hypertext

The Course Instructor: Bowen Alpern Office hour: GI 137-I, 4-5pm Tu (and by appointment) Texts: Head First HTML with CSS & XHTML Head First JavaScript Format: T, Th 9-10:50am, GI 218 Lecture (about 50 min), Break (10 min), Lab (50 min) Final project: design and build a web site

Alphabet Soup HTML HyperText Markup Language CSS Cascading Style Sheets XHTML eXtensible HyperText Markup Language

An HTML Document My First Web Page Hello world!

HTML Vocabulary Tag – markup (enclosed in angle brackets) Opening tags:,,,,, Closing tags:,,,,, Empty tags:,, Element – a component of a document An empty tag, or Opening tag, matching closing tag, everything in between Attribute – a name value pair in an opening tag id=”end”, src=”photo.jpg”, alt=”my pic”, class=”address”> Character Entity – special characters & (“&”), < (“ ”), © (“©”)

HTML Elements Opening tag, content, closing tag (or empty tag) Elements Nest Each element is fully contained in a unique parent The html element is the root Two kinds: Block elements Large sections of a document Inline elements Raw text (e.g. “a mule”) Multiple whitespace chars (“ “, “\t”, “\n”) collapse to a singe space Short sections of text (e.g “a very stupid mule”)

Kinds of HTML Elements Block elements That contain other block elements:,,,, That contain only inline elements: Titles(in element): Headings:,,,,, Paragraphs: Inline elements: quote emphasis (often italic) emphasis (often bold)

Some HTML Elements contains and elements contains information about the page contains the page content contains inline elements that make up a heading a slightly less dramatic heading contains inline elements that make up a paragraph an inline quotation inline element indicating emphasis inline element also indicating emphasis an empty element indicating a picture an empty element indicating a line break

Style Element element helps determine page presentation Parent is the element Attribute type=“text/css” Content consists of CSS declarations body { background-color: #db8; Margin: 10%; font-family: sans-serif; } Style information will be stored in separate files

Web Vocabulary Web page – the unit of hypertext content stored on a server and displayed by a browser Server – a repository for web pages, which are delivered to browsers upon request Browser – obtains web pages specified (explicitly or implicitly via a hyperlink) by a user and displays their contents to the user Hyperlink – clickable html element that indicates a transition to a web page specified by an attribute in the opening tag of the element Hypertext – text containing one or more hyperlinks

Some Browsers Internet Explorer (Microsoft) Firefox (Mozilla) Opera (Opera Software) Safari (Apple) Chrome (Google) Seamonkey (Mozilla) Konqueror (KDE, Linux) Amaya (W3C)

Hypertext element specifies a hyperlink It's content is clickable CSS specifies how this content is displayed Usually underlined and in a distinctive color It's href attribute specifies a new web page As a path to a file on the same computer, or As URL (Uniform Resource Locator) a later class It's title attribute specifies descriptive text Suggestion: text should match the pages title element

Hyperlink Examples todo Directions My truck page My office hour

Paths Path – sequence of names separated by “/”s Absolute paths begin with a “/” (ignore for now) The final name in a path specifies a file Other names specify directories (folders) The special name “..” specified the parent directory Examples: trucks.html Second Kings/22/20.html../../../second/cousin/once/removed.html