HTML - Technion moodle

Download Report

Transcript HTML - Technion moodle 

‫ניהול מידע ברשת האינטרנט‬
‫‪Managing Web Data‬‬
‫‪096209‬‬
‫‪1‬‬
‫• מתרגלת‪ :‬טלי דולב‬
‫• שעת תרגול‪ :‬יום ד' ‪8:30-9:30‬‬
‫• ‪email: [email protected]‬‬
‫שעת קבלה ‪ -‬במייל או בתיאום מראש‬
‫‪2‬‬
‫• ציון סופי = ‪ 25%‬תרגילי בית ‪ 75% +‬מבחן‪.‬‬
‫• ‪ 3-5‬תרגילי בית הכוללים תרגילים "יבשים"‬
‫ו"רטובים"‪ .‬ציוני שיעורי הבית תקפים‪.‬‬
‫• רב תרגילי הבית יוגשו בזוגות‪ ,‬אך יתכנו גם‬
‫משימות אישיות‪.‬‬
‫‪3‬‬
HTML:
Hyper Text Markup Language
4
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)
5
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.
6
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
7
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
8
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.
9
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.
10
A simple HTML page
<html>
<head><title>My First HTML Page</title></head>
<body><font color=“red”>
Hello World Wide Web!</font></body>
</html>
11
A simple HTML page
• HTML elements contain text, separated by tags
• Generally, tags come in pairs, an opening tag
and a closing tag
• Tags can have attributes, which have values
enclosed in quotes
<html>
<head><title> My First HTML Page </title></head>
<body><font color=“red”>
Hello World Wide Web!</font></body>
</html>
12
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>
13
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!
14
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">
15
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 -->
16
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>
17
<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
Lists
• Ordered lists: <ol>
• Unordered lists: <ul>
• 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>
19
Hyperlinks
Basic form:
<a href = “target-url”> text to be displayed </a>
Defining an anchor:
When is
this
useful?
<a name = “anchor_name”> text to anchor </a>
Examples:
1. Complete Path
<a href = “http://www.google.com”>Google</a>
When should we use
complete paths?
When should we use
relative paths?
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>
20
More Hyperlinks
• <a href=
"mailto:[email protected]">Email</a>
• <a href=“telnet://[email protected]”> Connect to the
Library</a>
21
Images
• Adding images to the page can be done
using the img tag
<img src=“monkey.gif” alt=“Picture of a monkey”>
Tells the user what he/she is
missing if the browser can’t
load images
• An image can be used as a link
<a href=“monkies.html”><img src=“monkey.gif”
alt=“Picture of a monkey”></a>
22
Entities
• There are entities that replace symbols:
Space
&nbsp;
&#160;
<
&lt;
&#60;
>
&gt;
&#62;
&
&amp;
&#38;
Why are these entities defined?
These characters have a special meaning in HTML,
and therefore cannot be used in the text.
23
Frames
24
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” (*)
25
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
26
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>
27
Frames In Browser
28
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
29
The target attribute for <a> tag - Example
<html>
What will the
page look like?
<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>
30
The target attribute for <a> tag - Example
31
Inline Frame Example
• a frame inside an HTML page
<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>
&nbsp;
<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>
32
33
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?
34
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>
35
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>
36
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, dropdown menus, radio buttons, checkboxes,
etc.
37
Forms (cont.)
• A form has the following structure:
<form method="method" action="URL">
HTML with Form Widgets
(assignments to form parameters)
</form>
• The method refers to data transfer: get or post
• The action specifies the application that processes
the form parameters
38
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
GET: form data is encoded (by a browser) into
a URL
POST: form data appears within a message
body.
• Other submission mechanisms can be used
– e.g., pressing the "enter" key, choosing an item, etc.
39
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>
40
Input Widgets
• for typing letters, numbers, etc. in a form.
• Text area:
Favorite course:
<input type="text" name="fcourse" value="DBI"/>
• Password area:
Password:
<input type="password" name="pass" size=“5“/>
41
Checkboxes (Input Widgets cont.)
• multiple options can be chosen
<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/>
42
Radio Buttons (Input Widgets cont.)
• only one option can be chosen
Gender:
<input type="radio" name="gen" value="f"
checked="checked"/>female
<input type="radio" name="gen" value="m“/>male
43
Menus
<form action="">
<select name="fruit" size="1">
<option value="a">apples</option>
<option value="b"
selected="selected">bananas</option>
</select>
</form>
44
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>
45
Text Areas
Write a story:<br/>
<textarea name="story" rows="3"
cols="20">Default text...</textarea>
46
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
47
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>
48
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
49
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">
• HTML 4.01 - transitional (use with presentational attributes)
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01
Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
• HTML 4.01 - frameset (when using frames)
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01
Frameset//EN" "http://www.w3.org/TR/html4/frameset.dtd">
50
Logical vs. Physical tags
Logical tags are designed to describe (to the browser) the
enclosed text's meaning. (<strong>, <em>,<div> …)
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).
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.
51
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">
52
Hebrew in the Page
• Option1:
– charset=“windows-1255”
Recommendation:
Don’t use hebrew in
your website!!!
– 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
53
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
54
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
55
Connecting to t2
1. 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 complete
X-Windows environment.
For installation instructions: http//tcc.technion.ac.il -> Software (Tochnot)
-> Software at the Technion (Tochnot ba-Technion) -> GoGlobal
-> GoGlobal Readme Guide
56
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
57
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
58