Embed Size (px)
Citation preview
1
ניהול מידע ברשת האינטרנט
Managing Web Data
096209
2
מתרגלת: טלי דולב•
8:30-9:30שעת תרגול: יום ד' •
•email: [email protected]
שעת קבלה - במייל או בתיאום מראש
3
מבחן.75% תרגילי בית + 25%ציון סופי = •
תרגילי בית הכוללים תרגילים "יבשים" 3-5•
ו"רטובים". ציוני שיעורי הבית תקפים.
רב תרגילי הבית יוגשו בזוגות, אך יתכנו גם •
משימות אישיות.
4
HTML:
Hyper Text Markup Language
5
How does the World Wide Web work?
• Web information is stored in documents called
Web pages.
• Web pages are files stored on computers called
Web servers.
• Computers reading the Web pages are called Web
clients.
• Web clients view the pages with a program called
a Web browser. (ex: Internet Explorer, Mozilla
Firefox)
6
How does the browser display pages?
• All Web pages contain instructions for
display.
• The browser displays the page by reading
these instructions.
• The most common display instructions are
called HTML tags.
7
What is HTML?
• A markup language - combines text and
extra information about the text
• An HTML file is a text file containing markup
tags
• HTML is used to write web pages:
– specify the role of different parts of the page
– specify the style that should be used when
displaying the page
8
Capabilities of HTML
• Content presentation
– Structures, e.g. paragraphs, lists, tables, etc.
– Decorations, e.g. fonts, images, etc.
• Declaration of meta information
– e.g. the page title, language, etc.
• Link to other pages
– i.e. attaching links to components
9
Capabilities of HTML (cont)
• Management of user input
– e.g. for searching, making reservations, ordering
products
• Directions for browsers
– e.g. refresh, redirect, caching control, etc.
10
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
end of this presentation.
• You can also learn from pages on the web, by
using the “View Source” option.
11
A simple HTML page
<html>
<head><title>My First HTML Page</title></head>
<body><font color=“red”>
Hello World Wide Web!</font></body>
</html>
12
A simple HTML page
• HTML elements contain 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
enclosed in quotes
13
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>
14
Some More General Rules
• Tags are not case sensitive (<head>,
<HEAD>, <Head> are the same),
recommended to use lowercase
• Whitespace in an html document is ignored
• HTML files should end with .htm or .html
• In HTML, there is an exception to almost
every rule!
15
The Head of an HTML Page
• The head element contains general information about a
document.
• The META tag provides information that is relevant to
browsers or search engines.
• Examples:
<META name="Author” content=“Snoopy”>
<META name="keywords“ content="HTML, DHTML, CSS, XML,
XHTML, JavaScript, VBScript">
<META http-equiv="Expires" content="Tue, 20 Aug 1996 14:25:27
GMT">
<META http-equiv="refresh" content=“5;
url=http://www.technion.ac.il/~mynewpage">
16
The Body of an HTML Page
• Headings: <h1>, …, <h6> where h1 is the largest,
h6 is the smallest
• 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”>
• Comments: <!-- This is a comment -->
17
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>
18
<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>
19
<ol> <li>Item 1
<li>Item 2
<ul> <li> Inner list item
<li> Another one
</ul>
<li> Item 3
</ol>
Lists
• Ordered lists: <ol>
• Unordered lists: <ul>
• List items: <li> (optional closing tag)
20
Hyperlinks
Basic form:<a href = “target-url”> text to be displayed </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>
When should we use complete paths?
When should we use relative paths?
When should we use complete paths?
When should we use relative paths?
When is this
useful?
21
More Hyperlinks
• <a href=
"mailto:[email protected]">Email</a>
• <a href=“telnet://[email protected]”> Connect to the
Library</a>
22
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>
Tells the user what he/she is missing if the browser can’t
load images
23
Entities
• There are entities that replace symbols:
Space  
< < <
> > >
& & &
Why are these entities defined?
These characters have a special meaning in HTML, and therefore cannot be used in the text.
24
Frames
25
FrameSets
• With frames, you can display more than one HTML
document in the same browser window
• 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” (*)
26
Frames
• Within FRAMESET elements, there can be: FRAMESETs, FRAMEs, and NOFRAMEs
• The <frame> tag defines what HTML document to put into each frame. A FRAME can have the attributes:– src=“url”: The url to be displayed in the frame
– name=”frame_name”: Name, used for targeting
– scrolling=“yes|no|auto”: auto is default
• In a NOFRAMES element put content for browsers that don’t support frames
27
Example<html>
<head><title>Frames Example</title></head>
<frameset cols=“20%,*”>
<frameset rows=“200,*”>
<frame name=“frame1” src=“monkey.gif”>
<frame name=“frame2” src=“hello.html”>
</frameset>
<frame name=“frame3”
src=“http://moodle.technion.ac.il/”>
<noframes> Here is a description of what you are
missing since your browser doesn’t support frames.
</noframes>
</frameset>
</html>
28
Frames In Browser
29
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:
<a href ="frame_a.html" target="frame1">Frame a</a>
– 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
30
The target attribute for <a> tag - Example
<html>
<frameset cols="120,*">
<frame src="tryhtml_contents.htm">
<frame src="tryhtml_frame_a.htm" name="showframe">
</frameset>
</html>
tryhtml_contents.htm:
<a href ="tryhtml_frame_a.htm" target ="showframe">Frame a</a><br>
<a href ="tryhtml_frame_b.htm" target="showframe">Frame b</a><br>
<a href ="tryhtml_frame_c.htm" target ="showframe">Frame c</a>
What will the page look like?
31
The target attribute for <a> tag - Example
32
Inline Frame Example
<body> <h1>Here are two Web pages:</h1> <p>
<iframe src="http://www.technion.ac.il" height="450" width=“300">
Your browser does not support this object!</iframe>
<iframe src="http://www.google.com" height="450" width="300"> Your browser does not support this object!</iframe> </p> <h2>Do you know these pages?</h2></body>
• a frame inside an HTML page
33
34
Frames are Bad
• The web developer must keep track of more
HTML documents
• Focus is on layout instead of structure
• URL doesn’t change when clicking through
frames
• Not compatible with all browsers
What should be done?
35
Tables
<TABLE Border=“1” >
<TR>
<TD>Dan</TD> <TD>1493</TD>
</TR>
<TR>
<TD>Yael</TD>
<TD>3829</TD>
</TR>
<TR>
<TD>Ofir </TD>
<TD>8372</TD></TR>
<TR>
<TD>Anat</TD>
<TD>4827</TD>
</TR>
</TABLE>
36
Tables
<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>
37
Forms
• A form is an area that can contain form
elements.
• Form elements (also called widgets) are
elements that allow the user to enter
information in a form.
• Examples: text fields, textarea fields, drop-
down menus, radio buttons, checkboxes,
etc.
38
Forms (cont.)
• A form has the following structure:
• The method refers to data transfer: get or post
• The action specifies the application that processes
the form parameters
<form method="method" action="URL">
</form>
HTML with Form Widgets
(assignments to form parameters)
39
Forms (cont.)
• Each widget is associated with a parameter (which
is the widget’s name), the value of which the user
can determine
• One of the form widgets is a submission button
• When this button is pressed, all parameter values
are sent to URL
• Other submission mechanisms can be used
– e.g., pressing the "enter" key, choosing an item, etc.
GET: form data is encoded (by a browser) into a URLPOST: form data appears within a message body.
40
An Example: Search Google
<form method="get" action="http://www.google.com/search">
<p> Type the search term:
<input name="q" type="text">
<input type="submit" value="search">
</p>
</form>
41
Input Widgets
• Text area:Favorite course: <input type="text" name="fcourse" value="DBI"/>
• Password area:Password: <input type="password" name="pass" size=“5“/>
• for typing letters, numbers, etc. in a form.
42
Checkboxes (Input Widgets cont.)
<input type="checkbox" name="incoffee" value="milk" checked="checked"/>milk<br/>
<input type="checkbox" name="incoffee" value="sugar"/>sugar<br/>
<input type="checkbox" name="incoffee" value="cocoa"/>cocoa<br/>
• multiple options can be chosen
43
Radio Buttons (Input Widgets cont.)
Gender:
<input type="radio" name="gen" value="f" checked="checked"/>female
<input type="radio" name="gen" value="m“/>male
• only one option can be chosen
44
Menus
<form action=""><select name="fruit" size="1"> <option value="a">apples</option> <option value="b" selected="selected">bananas</option> </select> </form>
45
Menus
<select name="vegetable" size="2" multiple="multiple"> <option value="tomato">tomato</option> <option value="cucumber">cucumber</option> <option value=" lettuce">lettuce</option> <option value="carrot">carrot</option> </select>
46
Text Areas
Write a story:<br/>
<textarea name="story" rows="3" cols="20">Default text...</textarea>
47
Form Widgets - Summary• 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
48
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>
49
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)
• Validate your page - http://validator.w3.org/
checks Web documents for conformance to
W3C Recommendations and other
standards
50
Document Type Definitions (cont.)
• HTML 4.01 - strict (use with CSS)
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Frameset//EN" "http://www.w3.org/TR/html4/frameset.dtd">
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
• HTML 4.01 - transitional (use with presentational attributes)
• HTML 4.01 - frameset (when using frames)
51
Logical vs. Physical tags
Logical tags are designed to describe (to the browser) the
enclosed text's meaning. (<strong>, <em>,<div> …)
Physical tags provide specific instructions on how to
display the text they enclose (<b>,<big>,<font>,<i> …)
TIP: Don't use <UL> to indent a block of text, or other such uses of logical tags in illogical ways.
Not recommended. Why?
Physical tags are messy. They were invented to add
style to HTML pages because style sheets were
not around. Use style sheets (Cascading
Style Sheets).
52
Character Encoding
• Used to set the Document Character Set
• In the Browser you can see the encoding by
“View>Encoding” or “View>Character
Coding”
<meta http-equiv="content-type" content="text/html; charset=iso-8859-1">
<meta http-equiv="content-type" content="text/html; charset=iso-8859-1">
53
Hebrew in the Page
• Option1:– charset=“windows-1255”
– Only good in Explorer
– Hebrew text is written from right to left
• Option2:– charset=“iso-8859-1”
– Can be seen in Netscape
– Hebrew text is written from left to right so align=“right”
should be added
Recommendation:Don’t use hebrew in
your website!!!
54
How to create your homepage
• Login into your account at t2. Connecting to t2
• Create a directory public_html in your home directory on t2.
• Place a file named index.html in this directory. This will be
your home page source file.
• Use your favorite editor to write into it text in HTML, the
markup language used by the World Wide Web.
• Make sure that the directory and the file are world-readable
by typing : – chmod a+x ~
– chmod a+rx ~/public_html
– chmod a+r ~/public_html/index.html
55
How to create your homepage (cont.)
• That's it! Now your Home Page will be accessible from any point in the world via the World Wide Web. Anyone who wants to read the information you've put in your ~/public_html/index.html file should refer to the URL: http://t2.technion.ac.il/~login
• for example : if your login is s1234567 Your home-page URL (i.e. address) is http://t2.technion.ac.il/~s1234567
• More information about html & www can be found at http://www.technion.ac.il/guides/www.html
56
Connecting to t21. Use publicly available programs -
1.1 Use ssh instead of telnet: For Windows, the putty utility is simple to use.
1.2 Use sftp instead of ftp. For Windows, use winscp.
Both putty and winscp are available at the Technion ftp server:
ftp://ftp.technion.ac.il/pub/security/ssh/
2. Use the X-emulation package Go-Global.
It is recommended to try Go-Global as it enables one to open a completeX-Windows environment.For installation instructions: http//tcc.technion.ac.il -> Software (Tochnot)-> Software at the Technion (Tochnot ba-Technion) -> GoGlobal-> GoGlobal Readme Guide
57
Your homepage in iestud
• Send request to open iestud account to http://iestud.technion.ac.il/
All other instructions are the same as t2 computer. For iestud or tx you do the same – only change the name from t2 to iestud or tx in the places it is mentioned
For iestud use TeraTerm ->ssh instead of telnet
58
The End!
These slides are based on those developed for the course: http://www.cs.huji.ac.il/~dbi
The examples used in slides can be found in:
http://t2.technion.ac.il/~stalid/examples.html
More information about html & www can be found at:
http://www.w3schools.com/html/default.asp
http://www.davesite.com/webstation/html/
http://www.htmlgoodies.com/tutors/basics.html
