1 html: hypertext markup language representation and management of data on the internet
TRANSCRIPT
1
HTML: HyperText Markup Language
Representation and
Management of Data on the
Internet
2
DisclaimerHTML 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
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.
You can also learn from pages on the web, by using the “View Source” option
3
What is the World-Wide Web?
• 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 URI?
• 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:
http://www.cs.huji.ac.il/~dbi
— 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
5
What is HTML?
• It 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.
6
A 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 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 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 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
Entities
• There are entities that replace special
symbol:
– Space:
– <: <
– >: >
– &: &
Why are these entities defined?
11
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”>
12
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>
13
14
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>
15
HyperlinksBasic form:
<a href = “target-url”> 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>
When should we use complete paths?
When should we use relative paths?
When should we use complete paths?
When should we use relative paths?
16
More Hyperlinks
• <a href ="mailto:[email protected]">Email</a>
• <a href="news:local.course.dbi">Newsgroup</a>
• <a href=“telnet://[email protected]”> Connect to
the Library</a>
17
Images
• 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>
18
Image Map
• A picture is divided to several areas where
each area is a link to a different place:
<img src=“monkey.gif” usemap=“#monky-map”><map name=“monky-map”>
<area shape=“rect” coords=“8, 8, 49, 34”href=“http://www.cs.huji.ac.il”><area shape=“poly” coords=“42, 87, 47, 66, 40, 87” href=“information.html”><area shape=“circle” coords=“50, 34, 12” href=“#info”>
</map>
19
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">
20
The Head of an HTML Page
• The META tag adds information about the
document (rather than content)
• Examples:
<META name="Author” content=“Snoopy”>
<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=yesterday.mid">
21
Frames
22
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” (*)
23
Frames
• 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
24
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>
25
Frames In Browser
26
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
27
Can we have Recursive Frames?
• What will we see when we call the file
“recursive.html”:<html> <head><title>Recursion Example</title></head>
<frameset cols=“20%,*”>
<frame name=“frame1” src=“merlin.gif”>
<frame name=“frame2” src=“recursive.html”>
</frameset>
</html>
28
29
Forms
30
Forms
• 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
31
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
32
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>
33
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
34
Yet Another Widget
• Textarea tag, with attributes
– name: name of variable that widget defines
– rows: height of text area
– cols: width of text area
35
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>
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
38
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-8-I">
<meta http-equiv="content-type" content="text/html; charset=iso-8859-8-I">
39
Hebrew in the Page
• You can use logical Hebrew:– charset=“windows-1255”
– Only good in Explorer
– Hebrew text is written from right to left
• You can use visual Hebrew:– charset=“iso-8859-8”
– Can be seen in Netscape
– Hebrew text is written from left to right so align=“right”
should be added
40
CSS: Cascading Style Sheet
41
Without a style sheet
42
What are Style Sheets
• A style sheet is a mechanism that allows to
specify how HTML (and XML) 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?
43
44
Why do we Need a Style Sheet?
• Separates content from format
• Reduces download time (how?)
• Consistent appearance over a site
• Allows to easily change style
– In one page
– In a whole site
• Increases the ability to handle style features w.r.t.
HTML
45
A CSS Style Sheet
• Usually, a file that ends with .css
• Contains a list of style rules for HTML
elements
• Case insensitive
• Comments are enclosed in /* */
46
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>
47
48
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% }
49
<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>
50
51
ExampleH1 {
font-family: Impact, Arial Black,
Helvetica Black, sans-serif;
font-size-adjust: .46;
font-size: 2.33em;
font-weight: 400;
font-style: normal;
text-decoration: none;
word-spacing: normal;
letter-spacing: normal;
text-transform: none;
}
Declaration
Property
Value(s)
Selector
52
What Kind of Properties can a CSS Style Sheet Change?
• Style properties
• Layout properties
– There are many properties and many possible
values
– We will not cover all of them here
– Look in the Web !!!
• A good source: http://www.w3schools.com/css
53
Style Properties
• Font properties
– family, size, weight, style, variant, …
• Text properties
– color, transform, decoration, …
• Background properties
– background-color, background-image, …
54
Layout Properties
• Text Layout
– direction, word-spacing, white-space, letter-spacing,
line-height, text-align, text-indent, …
• Elements as Boxes
– margin-top (-bottom, -left, -right)
– padding-top (-bottom, -left, -right)
– border-width, border-color, border-style, …
• Positioning Boxes
– position, left, top, width, height, overflow, visibility, clip,
z-index, …
55
Overview of the Layout Process in CSS
• Think of each word as a rectangular box
• The natural layout of the boxes is
– left to right
– top to bottom
• Think of each HTML (or XML) element as a
big box that contains smaller boxes (e.g.,
words)
56
The Layout of Big Boxes
• Big boxes are also laid out left-to-right, top-
to-bottom
• Inside each big box, the smaller boxes are
laid out similarly
– This is a simplified description of the layout
process
– Actually, there are more options than just the
natural document flow
57
Layout in HTML vs. CSS
• In pure HTML, the only way to control the
positions of elements is by using tables
– It is cumbersome to control positions in this way
– Rendering tables in a browser may take some
time (check out this page)
• CSS makes it easy to position elements on a
page
58
Relative vs. Absolute
• In CSS, positions (of boxes) and sizes (of fonts
and boxes) could be either relative or absolute
• In an “absolute” style
– Font size is fixed
– Sizes and positions of elements are fixed
• In a “relative” style
– you can change the font size
– The sizes and positions of elements may change when
the size of the window is changed
59
How and Where the Style is Described?
• The style is specified by style rules
• The style rules appear either in the
document or in external files, called style
sheets
– Inside a document, there are inline styles and
embedded style sheets
– External style sheets are either linked or
imported
60
Cascading of Styles
• CSS merges style rules from different places
(inline, document-level, imported and linked)
• Different places may have conflicting style
rules
• The process of merging (“cascading”) styles
from different places determines which style
rules have priority
61
CSS Selectors
• A rule has the following form
selector {declaration block}
• The selector determines when the rule is
applied
• For example, the following rule applies to
text that is inside a <P> tag
P {color: green; font-size: 1.5em; font-style: italic}
62
Several Kinds of Selectors• Universal Selector
• Type Selectors
• Descendant Selectors
• Child Selectors
• Adjacent-Sibling Selectors
• Attribute Selectors
• Class Selectors
• ID Selectors
• Pseudo-Class Selectors
• Pseudo-Element Selectors
Selectors can be grouped
63
Type Selector
• A type selector is the name of an element
type
• A type selector matches every instance of the
element typeP {color: green; font-size: 1.5cm; font-style: italic}
LI {color: red; font-size: 16px}
<p> <OL>
<LI> Some text … </LI><LI> More text</LI>
</OL></P>
What should be the color of the Text inside LI?
64
Universal Selector
• The universal selector matches every element
type
• The following rule means that all the text will have
a size of 40px
* {font-size: 40px}
– But even that may not work
• The following will always work
* {font-size: 40px ! important}
65
Class Selectors
• Style rules for the class
– P.joke {color: blue}
• What will be blue?
– .joke {color: blue}
• What will be blue?
•The definition of the class
<P class=“joke"> .... </P>
66
Class Selectors (cont’d)
• An element may have more than one class,
e.g., <P class="green quote new”>
• Which of the following selectors the above
element matches?
• P.quote.green
• P.new
• P.quote.new.green
• P.new.old
• Not all browsers support this feature
67
ID Selectors
• IDs are identical to classes, except that there can
only be one element with a given ID in a document
• In the HTML (or XML) document:
– <BODY id="introduction">
• In the style sheet:
– BODY#introduction {font-size: 1.2em}
– #introduction {font-size: 1.2em}
68
Attribute Selectors
• P[attribute]
– matches P when attribute is set to any value
• P[title=intro] or P[title="intro"] (the quotes are optional)
– matches P when its title attribute is set to "intro"
• P[class~=green]
– matches P when the class attribute value includes the
word "green"
69
Pseudo-Classes
• :link, :visited define styles for links and visited
links
• :hover defines a style for an element when the
mouse is over that element
• :focus defines a style when the element is ready
to accept input
• :active is used while an element is being
activated by the user
70
Examples of Rules for Pseudo-Classes
• A:link {color: blue}
• A:visited {color: purple}
• A:hover {font-size: 1.5em}
• A:active {color: red}
• INPUT:focus {background-color: yellow}
71
Contextual Selector
• P B {color: red}
• To which elements will the above rule be
applied?
• The following rule applies to all elements
that match either H1, H2, H3 or P B
P B, H1, H2, H3 {font-size: 120%}
Grouping of Selectors
72
Adding Style to Inner Text
• We want to add style to a fragment of some text
• We need to wrap the text with tags that do not
have a style of their own:
– <SPAN> Some text </SPAN> : does not stop the text
flow
– <DIV> Some text </DIV>: separated from the other text
• So, how can we add style to the fragment?
73
Inserting Style to a Page
74
Inline Styles
• In an inline style, the declaration block
appears as the value of the attribute style
• Any tag, except the <HTML> tag itself, can
have the style attribute
<P style=“color: green; font-size: 1.5em; font-style: italic”> This text will be shown in italic green and the size will be 1.5 times the current font size </P>
75
Embedded Style Sheets
<HTML>
<HEAD>
<STYLE type="text/css">
BODY {color: red}
</STYLE>
</HEAD>
<BODY> ... </BODY>
</HTML>
76
Link to an External Style Sheets
<HTML>
<HEAD>
<LINK rel="stylesheet" type="text/css”
href=“name.css“>
</HEAD>
<BODY>
...
</BODY>
</HTML>
In Exercise 0 you should use a link to an external style sheet
77
Imported Style Sheets
• The @import rule imports style rules to the
beginning of the style sheet
• Usage: @import url(nameOfFile.css)
• Several import rules may appear at the beginning
of the style sheet
• Import rules can appear in embedded style sheets
or in external style sheets
• Why do we need @import?
78
Inheritance and Cascading
79
Inheritance of Properties
• If an element does not match any rule for
some given property, then the element
inherits the computed value for that
property from its parent element
80
Example
• Given the rules:
– BODY { font-size: 10pt }
– H1 { font-size: 120% }
• What will be the font size of the EM element?
<BODY>
<H1>A <EM>large</EM> heading</H1>
</BODY>
81
Cascading Order
• When several rules define the same property and
match the same element, then the cascading order
is as follows:
– Primary sort: weight and origin
– Secondary sort: specificity of selectors
– Final sort: order of appearance
• The cascading order determines which rules
applies
82
Weight and Origin
• Author style sheets override user style sheets
• User style sheets override default (browser) style
sheets
• !important declaration overrides normal declaration
• If both author and user declarations have !
important, the user declarations still override the
author declarations
83
Specificity of a Selector
• Let a be the number of ID attributes in the given
selector
• Let b be the number of attributes and pseudo-
classes in the given selector
• Let c be the number of element names in the given
selector
• Sort the triples (a,b,c) lexicographically
• Pseudo-elements are ignored
84
Example
• Consider the two rules
– P {…}
– .introductory {…}
• If an element matches both, then the second
rule has a higher specificity and overrides
the first
85
Order of Appearance
• If two rules have the same weight, origin and
specificity, then the one that appears last in
the style sheet overrides the others
• Rules in imported style sheets are
considered to appear before local rules