Download PowerPoint

Survey
yes no Was this document useful for you?
   Thank you for your participation!

* Your assessment is very important for improving the workof artificial intelligence, which forms the content of this project

Document related concepts

URL redirection wikipedia , lookup

Cascading Style Sheets wikipedia , lookup

Transcript
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
&amp; (“&”), &lt; (“<”), &gt; (“>”), &copy; (“©”)
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