HTML: HyperText Markup Language

1
HTML HyperText Markup Language

• Representation and Management of Data on the
  Internet

2
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. You can also learn from pages
on the web, by using the View Source option
3
What is the World-Wide Web?

• A network of computers, along with

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

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
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
lthtmlgt ltheadgtlttitlegtMy First HTML
Pagelt/titlegtlt/headgt ltbodygtltfont
colorredgt Hello World Wide
Web!lt/fontgtlt/bodygt lt/htmlgt
7
A simple HTML page

• HTML contains text, separated by tags

• Generally, tags come in pairs, an opening tag and
  a closing tag

• Tags can have attributes, which have values

lthtmlgt ltheadgtlttitlegt My First HTML Page
lt/titlegtlt/headgt ltbodygtltfont colorredgt Hello
World Wide Web!lt/fontgtlt/bodygt lt/htmlgt
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

lthtmlgt ltheadgtlttitlegt My First HTML Page
lt/titlegtlt/headgt ltbodygtltfont colorredgt Hello
World Wide Web!lt/fontgtlt/bodygt lt/htmlgt
9
Some More General Rules

• Tags are not case sensitive (ltheadgt, ltHEADgt,
  ltHeadgt 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 nbsp
• lt lt
• gt gt
• amp

Why are these entities defined?
11
The Body of an HTML Page

• Headings lth1gt, , lth6gt where h1 is the most
  important
• Paragraphs ltpgt (optional closing tag)
• Line breaks ltbrgt (no closing tag)
• Horizontal lines lthrgt (no closing tag)
• Formatted text bold ltbgt, italics ltigt, underline
  ltugt
• Font colors and styles ltfont color red
  faceArialgt

12
Another Example

• lthtmlgtltheadgt lttitlegtExample 2lt/titlegtlt/headgtlt
  !-- Here is a comment --gt
• ltbodygt lth1gtThis is an example of an HTML
  pagelt/h1gt ltpgtHere is ltbgtemphasizedlt/bgt text and
  there is also ltigtitaliclt/igt text here.
• ltbrgt Here is a new line lt/pgt
• ltpgtIs this ltfont colorblue
  faceArialgteasylt/fontgt? ltpgtlthrgtAnd some parting
  words... Good Bye
• lt/bodygt
• lt/htmlgt

13
(No Transcript)
14
Lists

• Unordered lists ltulgt
• Ordered lists ltolgt
• List items ltligt (optional closing tag)

15
Hyperlinks
When should we use complete paths? When should
we use relative paths?

• Basic form
• lta href target-urlgt text to be linked lt/agt
• Defining an anchor
• lta name anchor_namegt text to anchor lt/agt
• Examples
• Complete Path
• lta href http//www.google.comgtGooglelt/agt
• Relative Path
• lta href assigments/ex1.htmlgtExercise 1lt/agt
• Relative Path to Anchor
• lta href assigments/ex1.htmlsubmitgtTo
  Submitlt/agt

16
More Hyperlinks

• lta href "mailtodbi_at_cs.huji.ac.il"gtEmaillt/agt
• lta href"newslocal.course.dbi"gtNewsgrouplt/agt
• lta hreftelnet//aleph_at_ram0.huji.ac.ilgt Connect
  to the Librarylt/agt

17
Images

• Adding images to the page can be done using the
  img tag
• ltimg srcmonkey.gif altPicture of a monkeygt
• Am image can be used as a link
• lta hrefmonkies.htmlgtltimg srcmonkey.gif
  altPicture of a monkeygtlt/agt

18
Image Map

• A picture is divided to several areas where each
  area is a link to a different place

ltimg srcmonkey.gif usemapmonky-mapgtltmap
namemonky-mapgt ltarea shaperect coords8,
8, 49, 34 hrefhttp//www.cs.huji.ac.ilgt ltare
a shapepoly coords42, 87, 47, 66, 40, 87
hrefinformation.htmlgt ltarea shapecircle
coords50, 34, 12 hrefinfogtlt/mapgt
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)
• lt!DOCTYPE HTML PUBLIC
  "-//W3C//DTD HTML 4.01
  Transitional//EN gt
• lt!DOCTYPE HTML PUBLIC "-//W3C//DTD
  HTML 4.01 Frameset//EN"gt

20
The Head of an HTML Page

• The META tag adds information about the document
  (rather than content)
• Examples
• ltMETA name"Author contentSnoopygt
• ltMETA http-equiv"Expires" content"Tue, 20 Aug
  1996 142527 GMT"gt
• ltMETA http-equiv"refresh" content10
  urlhttp//www.cs.huji.ac.il/mynewpage"gt
• ltMETA http-equiv"refresh" content"0
  urlyesterday.mid"gt

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
• srcurl The url to be displayed in the frame
• namewindow_name Name, used for targeting
• scrollingyesnoauto auto is default
• In a NOFRAMES element put content for browsers
  that dont support frame

24
Example

• lthtmlgtltheadgtlttitlegtFrames Examplelt/titlegtlt/headgt
• ltframeset cols20,gt ltframeset
  rows200,gt
• ltframe nameframe1 srcmerlin.gifgt
• ltframe nameframe2 srchelloWorld.htmlgt
• lt/framesetgt
• ltframe nameframe3 srchttp//www.cs.huji.a
  c.il/dbi/main.htmlgt
• ltnoframesgt Here is a description of what you
  are
• missing since your browser doesnt support
  frames.
• lt/noframesgt
• lt/framesetgt
• lt/htmlgt

25
Frames In Browser
26
Links in Frames

• In a link, the TARGET attribute can specify where
  the new page will be opened
• targetframe-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

lthtmlgt ltheadgtlttitlegtRecursion
Examplelt/titlegtlt/headgt ltframeset
cols20,gt ltframe nameframe1
srcmerlin.gifgt ltframe nameframe2
srcrecursive.htmlgt lt/framesetgt lt/htmlgt
28
(No Transcript)
29
Forms
30
Forms

• A form is surrounded by
• ltform methodmethod_type actionurlgt
  lt/formgt
• 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 forms 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 -gt default value,
  for checkbox/radio -gt value of the
  button when checked, submit/reset -gt label of
  button
• checked for checkbox/radio -gt means checked by
  default
• size for text/password -gt size in characters
• maxlength for text/password -gt maximum number of
  input characters

32
Form Widgets Example

• ltform methodget action"http//www.cs.huji.ac.i
  l/noplace"gt
• Text ltinput type"text" name"mytext"gt ltbrgt
• Password ltinput type"password"
  name"mypassword"gt ltbrgt
• Checkbox 1 ltinput type"checkbox"
  name"mycheck1" value"1 check" checked"true" gt
• Checkbox 2 ltinput type"checkbox"
  name"mycheck2" value"2 check"gt ltbrgt
• Option 1 ltinput type"radio" name"myradio"
  value"1 radio"gt
• Option 2 ltinput type"radio" name"myradio"
  value"2 radio"gtltbrgt
• ltinput type "submit"gt
• ltinput type "reset"gt
• lt/formgt

33
More Widgets

• Select tag, with attributes
• name name of variable that widget defines
• size if size is gt 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

• lttextarea name"mytext" rows"3"
  cols"20"gtDefault text...
• lt/textareagtltbrgt
• ltselect name"fruit" size"1"gt
• ltoptiongt bananas
• ltoptiongt apples
• lt/selectgt
• ltselect name"vegetables" size"2"gt
• ltoptiongt tomatoes ltoptiongt cucumbers ltoptiongt
  lettuce
• lt/selectgt ltbrgt

36
Tables

• ltTABLE border"1"gt
• ltCAPTIONgtltEMgtA test table with merged cellslt/EMgt
  lt/CAPTIONgt
• ltTRgtltTH rowspan"2"gtlt/THgt
• ltTH colspan"2"gtAveragelt/THgt
• ltTH rowspan"2"gtRedltBRgteyeslt/THgtlt/TRgt
• ltTRgtltTHgtheightltTHgtweightlt/TRgt
• ltTRgtltTHgtMaleslt/THgtltTDgt1.9lt/TDgt
• ltTDgt0.003lt/TDgtltTDgt40lt/TDgt
• ltTRgtltTHgtFemaleslt/THgtltTDgt1.7lt/TDgt
• ltTDgt0.002lt/TDgtltTDgt43lt/TDgtlt/TRgt
• lt/TABLEgt

37
(No Transcript)
38
Character Encoding

• Used to set the Document Character Set
• In the Browser you can see the encoding by
  ViewgtEncoding or ViewgtCharacter Coding

ltmeta http-equiv"content-type"
content"text/html charsetiso-8859-8-I"gt
39
Hebrew in the Page

• You can use logical Hebrew
• charsetwindows-1255
• Only good in Explorer
• Hebrew text is written from right to left
• You can use visual Hebrew
• charsetiso-8859-8
• Can be seen in Netscape
• Hebrew text is written from left to right so
  alignright 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
(No Transcript)
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

• ltHTMLgt
• ltHEADgtltTITLEgtFormatting style with
  CSSlt/TITLEgtlt/HEADgt
• ltBODYgt
• ltIMG SRC"tomato.gif"gt
• ltH1gtA jokelt/H1gt
• ltPgt 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!"). lt/Pgt
• lt/BODYgt
• lt/HTMLgt

47
(No Transcript)
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

• ltHTMLgt
• ltHEADgtltTITLEgtFormatting style with CSSlt/TITLEgt
• ltLINK rel"stylesheet" type"text/css
  hrefjoke.cssgt
• lt/HEADgt
• ltBODYgt
• ltIMG SRC"tomato.gif"gt
• ltH1gtA jokelt/H1gt
• ltPgt 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!"). lt/Pgt
• lt/BODYgt
• lt/HTMLgt

50
(No Transcript)
51
Example
H1 font-family Impact, Arial Black,
Helvetica Black, sans-serif font-size-adjust
.46 font-size 2.33em font-weight 400 fon
t-style normal text-decoration none word-spa
cing normal letter-spacing normal text-trans
form none
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 ltPgt 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 type

P color green font-size 1.5cm font-style
italic LI color red font-size 16px
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

• The definition of the class
• ltP classjoke"gt .... lt/Pgt

• Style rules for the class
• P.joke color blue
• What will be blue?
• .joke color blue
• What will be blue?

66
Class Selectors (contd)

• An element may have more than one class, e.g., ltP
  class"green quote newgt
• 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
• ltBODY id"introduction"gt
• In the style sheet
• BODYintroduction font-size 1.2em
• introduction font-size 1.2em

68
Attribute Selectors

• Pattribute
• matches P when attribute is set to any value
• Ptitleintro or Ptitle"intro" (the quotes
  are optional)
• matches P when its title attribute is set to
  "intro"
• Pclassgreen
• 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

• Alink color blue
• Avisited color purple
• Ahover font-size 1.5em
• Aactive color red
• INPUTfocus background-color yellow

71
Contextual Selector

• P B color red
• To which elements will the above rule be applied?
  

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
• ltSPANgt Some text lt/SPANgt does not stop the text
  flow
• ltDIVgt Some text lt/DIVgt 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 ltHTMLgt tag itself, can have
  the style attribute

ltP stylecolor green font-size 1.5em
font-style italicgt This text will be shown in
italic green and the size will be 1.5 times the
current font size lt/Pgt
75
Embedded Style Sheets

• ltHTMLgt
• ltHEADgt
• ltSTYLE type"text/css"gt
• BODY color red
• lt/STYLEgt
• lt/HEADgt
• ltBODYgt ... lt/BODYgt
• lt/HTMLgt

76
Link to an External Style Sheets

• ltHTMLgt
• ltHEADgt
• ltLINK rel"stylesheet"
  type"text/css
  hrefname.cssgt
• lt/HEADgt
• ltBODYgt
• ...
• lt/BODYgt
• lt/HTMLgt

In Exercise 0 you should use a link to an
external style sheet
77
Imported Style Sheets

• The _at_import rule imports style rules to the
  beginning of the style sheet
• Usage _at_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 _at_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?
• ltBODYgt
• ltH1gtA ltEMgtlargelt/EMgt headinglt/H1gt
• lt/BODYgt

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