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

2. The Course Instructor: Bowen Alpern Email: Bowen.Alpern@lehman.cuny.edu 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

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

4. An HTML Document My First Web Page Hello world!

5. 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 & (“&”), < (“ ”), © (“©”)

6. 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”)

7. 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)

8. 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

9. 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

10. 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

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

12. 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

13. Hyperlink Examples todo Directions My truck page My office hour

14. 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