View
132
Download
2
Category
Preview:
DESCRIPTION
HTML: HyperText Markup Language. Representation and Management of Data on the Internet. Disclaimer. HTML is a broad topic. Only a small part of using HTML will be taught. Links to tutorials and resources for learning HTML are available at the course homepage. - PowerPoint PPT Presentation
Citation preview
1
HTML: HyperText Markup HTML: HyperText Markup LanguageLanguage
Representation and Management of Data on the
Internet
2
DisclaimerDisclaimerHTML is a broad topic. Only a small part of using HTML will be taught. Links to tutorials and resources for learning HTML are available at the course homepage.
You can also learn from pages on the web, by using the “View Source” option
3
What is the What is the World-Wide World-Wide WebWeb??
• A uniform naming scheme for locating resources on the Web (e.g., URIs)
• Protocols, for access to named resources over the Web (e.g., HTTP)
• Hypertext, for easy navigation among resources (e.g., HTML)
A network of computers, along with
4
What is a What is a URIURI??
• A Uniform Resource Identifier is a string that uniquely identifies a resource
• One type of URI is a Uniform Resource Locator (URL). A URL is generally made up of:
— The protocol used to access the resource — The domain name where the resource is located— The name of the resource itself, given as a path
http://www.cs.huji.ac.il/~dbi
5
What is What is HTMLHTML??
• Is not a programming language• Is used to write web pages: specify 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.
6
A simple HTML pageA simple HTML page
<html> <head><title>My First HTML Page</title></head> <body><font color=“red”>
Hello World Wide Web!</font></body></html>
7
A simple HTML pageA simple HTML page
• HTML contains text, separated by tags
<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
8
Some General RulesSome 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>
9
Some More General RulesSome 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• Errors in an html page are usually recoverable• In HTML, there is an exception to almost
every rule!
10
The The BodyBody of an HTML Page 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”>
11
Another ExampleAnother Example<html>
<head> <title>Untitled</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>
12
13
ListsLists• 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>
14
HyperlinksHyperlinksBasic form:
<a href = “target”> text to be linked </a>
Defining an anchor:<a name = “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>
15
More HyperlinksMore Hyperlinks
• <a href ="mailto:dbi@cs.huji.ac.il">Email</a>
• <a href="news:local.course.dbi">Newsgroup</a>
• <a href=“telnet://aleph@ram0.huji.ac.il”> Connect to the Library</a>
16
Advanced HTMLAdvanced HTML
17
Document Type DefinitionsDocument 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">
18
FramesFrames
19
FrameSetsFrameSets
• 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” (*)
20
FramesFrames
• Within FRAMESET elements, there can be FRAMESETs, FRAMEs, and NORAMEs
• 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
21
ExampleExample<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>
22
Frames In BrowserFrames In Browser
23
Links in FramesLinks 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
24
What’s Wrong?What’s Wrong?
• What is wrong with the file “bad.html”:
<html> <head><title>Bad Example</title></head> <frameset cols=“20%,*”> <frame name=“frame1” src=“merlin.gif”> <frame name=“frame2” src=“bad.html”> </frameset></html>
25
More Problems with More Problems with FramesFrames
1. The one-to-one relationship between the url and the view has been broken
– you can’t bookmark what you see– a search engine can’t index the page properly
2. Pages can be “stolen” using frames• Think about it: How can you make a page
using a frameset and doesn’t suffer from problem 1?
26
ImagesImages
• Adding images to the page can be done using the IMG tag<img src=“monkey.gif” alt=“Picture of a
monkey”>
• Am image can be used as a link<a href=“monkies.html”><img
src=“monkey.gif” alt=“Picture of a monkey”></a>
27
The The HeadHead of an HTML Page of an HTML Page• The META tag adds information about the
document (rather than content)• Examples:
<META name="Author” content=“Sara Cohen”> <META http-equiv="Expires" content="Tue, 20
Aug 1996 14:25:27 GMT"> <META http-equiv="refresh" content=“10;
url=http://www.cs.huji.ac.il/~mynewpage"><META http-equiv="refresh" content="0;
url=maotzur2.mid">
28
FormsForms
29
FormsForms
• 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 page that should get the form’s contents
30
Form WidgetsForm 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
31
Form Widgets ExampleForm 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>
32
More WidgetsMore 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
33
Yet Another WidgetYet Another Widget
• Textarea tag, with attributes– name: name of variable that widget
defines– rows: height of text area– cols: width of text area
34
ExampleExample
<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>
35
Important Topics not Important Topics not CoveredCovered
• Tables• Using Hebrew in a document• Setting the background, font and link
colors• Entities ( < > )
• See references for details about these
Recommended