1 Lecture #5 Static Web Documents Shimrit Tzur-David HAIT Summer 2005
Welcome message from author
This document is posted to help you gain knowledge. Please leave a comment to let me know what you think about it! Share it to your friends and learn new things together.
Transcript
1
Lecture #5Static Web Documents
Shimrit Tzur-David
HAIT
Summer 2005
2
HTML: HyperText Markup Language
• HTML is a Markup Language• It is used to write web pages: specify the role of
different parts of the page and the style that should be used when displaying the page
• HTML gives authors the means to:– Publish online documents with text, images, etc.
– Retrieve online information via hypertext links
– Design forms for conducting transactions with remote services, for searching for information, making reservations, ordering products, etc.
3
A simple HTML page<html> <head><title>My First HTML Page</title></head> <body>
<font color=“red”>Hello World Wide Web!</font> </body></html>
4
A simple HTML page – Cont.
<html>
<head><title> My First HTML Page </title></head>
<body><font color=“red”>
Hello World Wide Web!</font></body>
</html>
• Generally, tags come in pairs, an opening tag and a closing tag
• Tags can have attributes, which have values
• HTML contains text, separated by tags
5
Some General Rules
• HTML page is surrounded by the html tag• 2 Basic parts:
– Head: Consists of things that describe the document (e.g., title – shown on the browser bar)
– Body: Consists of the content of the document
<html>
<head><title> My First HTML Page </title></head>
<body><font color=“red”>
Hello World Wide Web!</font></body>
</html>
6
Some More General Rules
• Tags are not case sensitive (<head>, <HEAD>, <Head> are the same)
• Whitespace in an html document is ignored
• HTML files should end with .htm or .html
• Your homepage should be in ~login/www and called index.html
• In HTML, there is an exception to almost every rule!
7
Entities
• There are entities that replace special symbol:– Space: – <: < – >: >– &: &
Why are these entities defined?
8
The Body of an HTML Page
• Headings: <h1>, …, <h6> where h1 is the most important
• Paragraphs: <p> (optional closing tag)• Line breaks: <br> (no closing tag)• Horizontal lines: <hr> (no closing tag)• Formatted text: bold <b>, italics <i>, underline
<u>• Font colors and styles: <font color = “red”
face=“Arial”>
9
Another Example<html>
<head>
<title>Example 2</title>
</head>
<!-- Here is a comment -->
<body>
<h1>This is an example of an HTML page</h1>
<p>Here is <b>emphasized</b> text and there is also <i>italic</i>
text here.
<br> Here is a new line </p>
<p>Is this <font color=“blue” face=“Arial”>easy</font>? <p><hr>And some
parting words... Good Bye
</body>
</html>
10
The Page
11
Lists• Unordered lists: <ul>
• Ordered lists: <ol>
• List items: <li> (optional closing tag)
<ol> <li>Item 1
<li>Item 2
<ul> <li> Inner list item
<li> Another one
</ul>
<li> Item 3
</ol>
12
Hyperlinks
Basic form:<a href = “target-url”> text to be linked </a>
Defining an anchor:<a href = “anchor_name”> text to anchor </a>
Examples:1. Complete Path
<a href = “http://www.google.com”>Google</a>
2. Relative Path<a href = “assigments/ex1.html”>Exercise 1</a>
3. Relative Path to Anchor<a href = “assigments/ex1.html#submit”>To Submit</a>
4. Email<a href ="mailto:[email protected]">Email</a>
13
Images
• Adding images to the page can be done using the img tag<img src=“monkey.gif” alt=“Picture of a
monkey”>
• An image can be used as a link<a href=“monkies.html”><img src=“monkey.gif”
alt=“Picture of a monkey”></a>
• What will happen when we click the image?
14
Document Type Definitions
• Since there are many standards for HTML, you should specify which one you are using.
• Put a document type definition (DTD) as the first line of your file (before the html tag)– <!DOCTYPE HTML PUBLIC
"-//W3C//DTD HTML 4.01 Transitional//EN“ >
– <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Frameset//EN">
15
Frames
16
FrameSets
• Instead of a “BODY”, the document has a “FRAMESET” element
• Size and number of frames is determined by the attributes “COLS” and “ROWS”
• Size can be given as a percent (50%) or number of pixels (70) or as “remaining size” (*)
17
Frames
• Within FRAMESET elements, there can be FRAMESETs, FRAMEs, and NOFRAMEs
• A FRAME can have the attributes:– src=“url”: The url to be displayed in the frame– name=”window_name”: Name, used for targeting– scrolling=“yes|no|auto”: auto is default
• In a NOFRAMES element put content for browsers that don’t support frame
18
Example<html>
<head><title>Frames Example</title></head>
<frameset cols=“20%,*”> <frameset rows=“200,*”>
<frame name=“frame1” src=“merlin.gif”>
<frame name=“frame2” src=“helloWorld.html”>
</frameset>
<frame name=“frame3” src=“http://www.cs.huji.ac.il/~dbi/main.html”>
<noframes> Here is a description of what you are
missing since your browser doesn’t support frames.
</noframes>
</frameset>
</html>
19
Frames in Browser
20
Links in Frames
• In a link, the TARGET attribute can specify where the new page will be opened:– target=“frame-name” : in the specified frame– target=“_self” : in the frame where the link is– target=“_top” : in the same window over the whole
screen– target-=“_blank” : in a new window of the
navigator
21
Forms
22
Forms – Cont.
• A form is surrounded by: <form method=“method_type” action=“url”>
</form>
• where:– method_type is GET or POST (more details when
you learn about HTTP)– url is the location of the server that should get the
form’s contents
23
Form Widgets
• Input tag, with attributes:– type: text/password/checkbox/radio/submit/reset
– name: name of variable that widget defines (not needed for submit and reset widgets)
– value: for text/password default value, for checkbox/radio value of the button when checked, submit/reset label of button
– checked: for checkbox/radio means checked by default
– size: for text/password size in characters
– maxlength: for text/password maximum number of input characters
24
Form Widgets Example
<form method=“get” action="http://www.cs.huji.ac.il/~noplace">Text: <input type="text" name="mytext"> <br>Password: <input type="password" name="mypassword"> <br>Checkbox 1: <input type="checkbox" name="mycheck1" value="1
check" checked="true" >Checkbox 2: <input type="checkbox" name="mycheck2" value="2
check"> <br>Option 1: <input type="radio" name="myradio" value="1 radio">Option 2: <input type="radio" name="myradio" value="2 radio">
<br><input type = "submit"> <input type = "reset"></form>
25
More Widgets
• Select tag, with attributes– name: name of variable that widget defines– size: if size is > 1, then a listbox is displayed, otherwise a
pop-down menu is displayed – multiple: if present, allow multiple selections (then, always
displayed as listbox)• Within tag, option tags with the choices. Can have
attribute selected, if selected by default• Textarea tag, with attributes
– name: name of variable that widget defines– rows: height of text area– cols: width of text area
26
Example
<textarea name="mytext" rows="3" cols="20">Default text...
</textarea><br><select name="fruit" size="1"> <option> bananas <option> apples</select> <select name="vegetables" size="2"> <option> tomatoes <option> cucumbers <option> lettuce</select> <br>
27
Tables
<h1>Example of Using Tables</h1><TABLE border="1">
<CAPTION><EM>A test table with merged cells</EM> </CAPTION> <TR><TH rowspan="2"></TH>
<TH colspan="2">Average</TH><TH rowspan="2">Red<BR>eyes</TH></TR>
<TR><TH>height<TH>weight</TR><TR><TH>Males</TH><TD>1.9</TD>
<TD>0.003</TD><TD>40%</TD> <TR><TH>Females</TH><TD>1.7</TD>
<TD>0.002</TD><TD>43%</TD></TR> </TABLE>
28
Tables
29
What are Style Sheets
• A style sheet is a mechanism that allows to specify how HTML pages should look
• Do we have style in simple HTML files?
• For HTML files that do not have an explicit style, where is their style hidden?
• A style sheet file!
30
Why do we Need a Style Sheet?
• Separates content from format
• Consistent appearance over a site
• Allows to easily change style– In one page– In a whole site
• Increases the ability to handle style features
31
A CSS Style Sheet
• A file that ends with .css
• Contains a list of style rules for HTML elements
• Case insensitive
• Comments are enclosed in /* */
32
Simple Example
<HTML><HEAD><TITLE>Formatting style with
CSS</TITLE></HEAD><BODY><IMG SRC="tomato.gif"><H1>A joke</H1><P> A mama tomato, a papa tomato and a baby tomato
are walking down the street. The baby tomato keeps falling behind so the papa tomato goes back, steps on the baby tomato and says, ketchup ("Catch-up!"). </P>
</BODY></HTML>
33
Simple Example – Cont.
34
Style File: joke.css
BODY { background-image: url("tomato1.gif");background-attachment: fixed }
H1 { background-color: rgb(100,150,100); /* green
*/color: rgb(250, 200, 250) /* pink */ }
P { background-color: yellow;color: purple;font-size: 200% }
35
<HTML><HEAD><TITLE>Formatting style with CSS</TITLE><LINK rel="stylesheet" type="text/css” href=“joke.css“></HEAD><BODY><IMG SRC="tomato.gif"><H1>A joke</H1><P> A mama tomato, a papa tomato and a baby tomato
are walking down the street. The baby tomato keeps falling behind so the papa tomato goes back, steps on the baby tomato and says, ketchup ("Catch-up!"). </P>
</BODY></HTML>
36
Related Documents
