1 ניהול מידע ברשת האינטרנט Managing Web Data 096209.

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>



</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>



</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:

17

Another Example<html>

<head>

<title>Example 2</title>

</head>



<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>



<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

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

http://www.w3schools.com/html/default.asp




1 ניהול מידע ברשת האינטרנט Managing Web Data 096209.

Documents

Transcript of 1 ניהול מידע ברשת האינטרנט Managing Web Data 096209.