Transcript PowerPoint
CIS 228 The Internet Day 2, 9/1/11 Hypertext The Course Instructor: Bowen Alpern Email: [email protected] 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 <html> <head> <title>My First Web Page</title> </head> <body> <p>Hello world!</p> </body> </html> HTML Vocabulary Tag – markup (enclosed in angle brackets) Opening tags: <html>, <div id=”end”>, <h1>,<p>, <q>, <em> Closing tags: </html>, </div>, </h1>, </p>, </q>, </em> Empty tags: <br>, <hr>, <img src=”photo.jpg” alt=”my pic”> 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 <em>very stupid</em> mule”) Kinds of HTML Elements Block elements That contain other block elements: <html>, <head>, <body>, <div>, <blockquote> That contain only inline elements: Titles(in <head> element): <title> Headings: <h1>, <h2>, <h3>, <h4>, <h5>, <h6> Paragraphs: <p> Inline elements: <q> quote <em> emphasis (often italic) <strong> emphasis (often bold) Some HTML Elements <html> contains <head> and <body> elements <head> contains information about the page <body> contains the page content <h1> contains inline elements that make up a heading <h2> a slightly less dramatic heading <p> contains inline elements that make up a paragraph <q> an inline quotation <em> inline element indicating emphasis <strong> inline element also indicating emphasis <img> an empty element indicating a picture <br> an empty element indicating a line break Style Element <style> element helps determine page presentation Parent is the <head> element Attribute type=“text/css” Content consists of CSS declarations <style type=“text/css”> body { background-color: #db8; Margin: 10%; font-family: sans-serif; } </style> 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 <a> 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 <a href=“todo.html” title=“todo”>todo</a> <a href=“directions.html” title=“directions”> Directions </a> <a href=“vehicles/trucks.html” title=“trucks”> My truck page </a> <a href=“../../hour.html” title=“office hour”> My office hour </a> 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