Survey
* Your assessment is very important for improving the workof artificial intelligence, which forms the content of this project
Download Lecture 2
Document related concepts
Transcript
Computer Science 101 Simple Web Pages HTML There are many languages for creating Web pages, but HTML (Hypertext Markup Language) is the most basic Useful References Tim-Berners-Lee, Weaving the Web: The Original Design and Ultimate Destiny of the World Wide Web by Its Inventor David Weinberger, Small Pieces Loosely Joined: A Unified Theory of the Web w3schools HTML Tutorial How HTML Works Server’s disk Network connection Client’s browser • The client sends a request for a page to the server • HTML code is sent as text to the client • HTML code is stored in the client’s cache (temporary memory) • The client’s browser interprets the HTML code and formats the page Markup Tags • Codes that are not displayed but tell the browser what to do • Tags have the form <tag name> </tag name> An HTML File and Its Two parts • The head – usually contains the page’s title • The body – contains the rest of the text and commands The Title Tag Format of HTML Code • Fairly free-format • Tags are not case sensitive Container Elements • The sequence <start a container element tag> stuff </end tag> • Container elements can and should be nested, such as <head> <title> stuff </title> </head> is Plain Old Elements • Not containers, just simple commands • The break element, <BR>, is an example • Inserts one line break in the text • No ending tag Formatting Text • Bold, italic, etc. Vertical Space • Paragraph element <P> - begins a new paragraph on a new line, wrapping until the next horizontal space command • Horizontal rule element <HR> - inserts a horizontal line as a line break Header Elements • Provide headers of different font sizes <H1>, <H2>, … ,<H6> Comment Symbols • We want to document our code with information that the browser will ignore and not display • For the benefit of the readers of our HTML code, not our Web pages <!-- text of comment --> Comment Symbols Tags and Attributes • Tags tell the browser what to do • Attributes tell the browser how to do it • When the programmer does not specify attributes, defaults are used • Example: background color is white or gray HR Attributes • WIDTH - extent of horizontal size (default 100%) • SIZE - thickness (default 2) • ALIGN - left, middle, right (default left) Examples <HR> (uses defaults) <HR WIDTH="50%" SIZE=4 ALIGN=center> <HR WIDTH=40 SIZE=1> (40 pixels, or picture elements) <HR WIDTH="20%" ALIGN="right"> Rules and Conventions <tag attribute=value . . .> • attribute is usually uppercase • value can always be quoted, sometimes must be quoted, is usually lowercase Different Horizontal Rulers Paragraph Alignment <P ALIGN=(left, middle, or right)> • Not very useful • justify works on some browsers Paragraph Alignment Body Attributes • Govern the entire body of the page • • • • BGCOLOR - the background color TEXT - the text color LINK - the color of all links VLINK - the color of a link after it’s been selected Examples <BODY> (uses defaults) <BODY BGCOLOR="blue" TEXT="white"> <BODY VLINK="#990000"> (hexadecimal number) The FONT Tag • <FONT> some text </FONT> • It’s deprecated, meaning it’s probably supported by most browsers but may not be in future releases Font Attributes • SIZE – 3 (10 or 12 pt) is default • COLOR – as usual • FACE – Arial, Courier, Times, etc. • Relative size - +2, -2, etc. Example Linking to Other Pages • The Web is a hyperspace • One navigates to various items by following links • The navigation path can be linear or nonlinear Basic Principles of Web Site Design • Distribute topics into a set of pages • Connect the pages with links • Each topic should be self-contained and contain links to related topics, allowing users to form a cognitive map easily The Top-Level Page • Serves as a platform for browsing the entire site • Many ways to lay it out, but the most simple is to provide – an introductory paragraph – a set of links to the main topics Example: A Simple Site • Top-level page (index.html) has links to my hobbies and my career information • Hobbies are discussed in hobbies.html • Career stuff is in career.html Organization of Files = a directory = a file public_html hobbies.html index.html career.html The Anchor Element • Supports links to other pages or to places within the same page <A> … </A> • A required attribute is either HREF (link to another page) or NAME (link to same page) The HREF Anchor <A HREF="http://home.wlu.edu/~lambertk">Lambert page</A> <A HREF="a URL">The displayed text of the link</A> Absolute URLs • An absolute URL contains the complete address, including the server name – Example: http://home.wlu.edu/~lambertk • Causes a linking request to the server for a page, which involves some overhead (ie, time) Relative URLs • A relative URL contains just a path name (a file name or directory name and zero or more directory names) – Example: hobbies.html – Example: hobbies/golf.html • Link to server is already there, so this way is faster than with absolute URLs
