Advanced HTML

1
Advanced HTML
2
Frames

• ltframeset cols"25,50, 25 "gt
• ltframe src"http//www.atilim.edu.tr"gt
• ltframe src"first.htm"gt
• ltframe src"http//www.atilim.edu.tr/mkoyuncu"
  gt
• lt/framesetgt
• Do not use frames with body

3
Mixed frames

• lthtmlgt
• ltframeset rows30,70"gt
• ltframe src"frame_a.htm"gt
• ltframeset cols"25,75"gt
• ltframe src"frame_b.htm"gt
• ltframe src"frame_c.htm"gt
• lt/framesetgt
• lt/framesetgt
• lt/htmlgt

4
Navigation frames

• lthtmlgt
• ltframeset cols"200,"gt
• ltframe src"menu.htm"gt
• ltframe src"frame_a.htm name"showframe"gt
• lt/framesetgt
• lt/htmlgt

Menu.htm
lthtmlgt ltbodygt lta href"http//www.atilim.edu.tr"
target"showframe"gtATILIM UNIVERSITYlt/agt ltbrgt lta
href"http//www.atilim.edu.tr/mkoyuncu/SE211.htm
" target"showframe"gtSE211lt/agt ltbrgt lta
href"first.htm" target"showframe"gtdenemelt/agt lt/b
odygt lt/htmlgt
5
Inline Frames

• lthtmlgt
• ltbodygt
• ltiframe src"default.asp"gtlt/iframegt
• ltpgtSome older browsers don't support iframes.lt/pgt
• ltpgtIf they don't, the iframe will not be
  visible.lt/pgt
• lt/bodygt
• lt/htmlgt

6
Links to bookmarks

• Create a bookmark in your page
• lta name"mybookmark"gt
• lth1gtBOOKMARKlt/h1gtlt/agtltbr /gt
• From another page
• lta href"first.htmmybookmark"gtFirst page
  (bookmark)lt/agt
• From same page
• lta href"mybookmark"gtFirst page (bookmark)lt/agt

7
Links on images

• lthtmlgt
• ltbodygt
• ltimg src"planets.gif" width"145" height"126"
  usemap"planetmap"gt
• ltmap id"planetmap" name"planetmap"gt
• ltarea shape"rect" coords"0,0,82,126" alt"Sun"
  href"sun.htm"gt
• ltarea shape"circle" coords"90,58,3"
  alt"Mercury" href"mercur.htm"gt
• ltarea shape"circle" coords"124,58,8"
  alt"Venus" href"venus.htm"gt
• lt/mapgt
• lt/bodygt
• lt/htmlgt

8
Events

• Window Events
• Only valid in body and frameset elements.
• Attribute Value Description
• onload script Script to be run when a document
  loads
• onunload script Script to be run when a document
  unloads

9
Events

• Form Element Events
• Only valid in form elements.
• Attribute Value Description
• onchange script Script to be run when the element
  changes
• onsubmit script Script to be run when the form is
  submitted
• onreset script Script to be run when the form is
  reset
• onselect script Script to be run when the
  element is selected
• onblur script Script to be run when the element
  loses focus
• onfocus script Script to be run when the element
  gets focus

10
Events

• Keyboard Events
• Not valid in base, bdo, br, frame, frameset,
  head, html, iframe, meta, param, script, style,
  and title elements.
• Attribute Value Description
• onkeydown script What to do when key is pressed
• onkeypress script What to do when key is pressed
  and released
• onkeyup script What to do when key is released

11
Events

• Mouse Events
• Not valid in base, bdo, br, frame, frameset,
  head, html, iframe, meta, param, script, style,
  title elements.
• Attribute Value Description
• onclick script What to do on a mouse click
• ondblclick script What to do on a mouse
  double-click
• onmousedown script What to do when mouse button
  is pressed
• onmousemove script What to do when mouse pointer
  moves
• onmouseout script What to do when mouse pointer
  moves out of an element
• onmouseover script What to do when mouse pointer
  moves over an element
• onmouseup script What to do when mouse button is
  released

12
Events

• Examples
• lta onmouseover"style.color'red'"
• onmouseout"style.color'black'"
  href"http//www.atilim.edu.tr"
  target"showframe"gtATILIM UNIVERSITYlt/agt
• ltbrgt
• ltpgt
• lta href"http//www.atilim.edu.tr/mkoyuncu/SE211.
  htm" target"showframe"gt
• ltimg src"SE211-1.jpg" onmouseover"src'SE211-2.j
  pg'" onmouseout"src'SE211-1.jpg'"alt"vize"
  height"30" width"200" align"left"gt
• lt/agt
• lt/pgt

13
MARQUEE

• WIDTH how wide the marquee is
• HEIGHT how tall the marquee is
• DIRECTION which direction the marquee should
  scroll
• BEHAVIOR what type of scrolling
• SCROLLDELAY how long to delay between each jump
•  
• SCROLLAMOUNT how far to jump
• LOOP how many times to loop
• BGCOLOR background color
• HSPACE horizontal space around the marquee
• VSPACE vertical space around the marquee

14
MARQUEE

• WIDTH Integer
• HEIGHT Integer
• DIRECTION left, right, up, down
• BEHAVIOR SCROLL SLIDE ALTERNATE SCROLLDELAY
  Integer
•  
• SCROLLAMOUNT Integer
• LOOP INFINITE number of loops
• BGCOLOR background color
• HSPACE Integer
• VSPACE Integer

15
MARQUEE

• MARQUEE style"WIDTH 250px HEIGHT 100px"
  scrollAmount1 directionup border1
  bgcolor"rgb(50,230,250)"
• classNavlink onmouseover"this.stop()"
• onmouseout"this.start()"gt
• ltoLgt
• ltligt ALI IMRE
• ltligt CAN BILGEN
• ltligt CEREN ULUSALER
• ltligt EBRU YAVUZ
• ltligt EDA BALCIOGLU
• ltligt ENGIN ZEKI ERDOGMUS
• ltligt FERIT ÜNAL
• ltligt GiRAY GÜMRAH
• ltligt KEREM PARLAKGÜMÜS
• ltligt MÜRÜVET KAPLAN
• ltligt NERGIS ERGEN
• ltligt TUNA HACALOGLU
• ltligt ÖZLEM UYSAL
• lt/olgt

16
STYLES

• What is CSS?
• CSS stands for Cascading Style Sheets
• Styles define how to display HTML elements
• Styles are normally stored in Style Sheets
• External Style Sheets can save you a lot of work
• External Style Sheets are stored in CSS files
• Multiple style definitions will cascade into one

17
STYLES

• Syntax
• The CSS syntax is made up of three parts
• a selector, a property and a value
• selector property value
• body color black
• p font-family "sans serif"
• p text-aligncenter colorred

18
STYLES

• p text-align center
• color black
• font-family arial
• h1, h2, h3, h4, h5, h6 color green

19
STYLES

• The class Selector
• p.right text-align right
• p.center text-align center
• lt/headgt
• ltbodygt
• ltp class"right"gt This paragraph will be
  right-aligned.
• lt/pgtltp class"center"gt This paragraph will be
  center-aligned. lt/pgt

20
STYLES

• Internal style sheet, included within the head
  element
• In-line definition as attributes of elements
  within the body of a document
• External specification in a style sheet

21
Internal style sheet

• ltheadgtltstyle type"text/css"gth1 color redh3
  color bluelt/stylegtlt/headgt

22
In-line Style Sheet

• lthtmlgt
• ltbodygt
• lta href"lastpage.htm" style"text-decorationnone
  "gtTHIS IS A LINK!lt/agt
• lt/bodygt
• lt/htmlgt

23
External Style Sheet

• ltheadgt
• ltlink rel"stylesheet" type"text/css"
  href"mystyle.css" /gt
• lt/headgt
• Mystyle.css
• hr color sienna
• p margin-left 20px
• body background-image url("images/back40.gif")
  

24
Styles

• Background A shorthand property for setting all
  background properties in one declaration
• background-attachment Sets whether a background
  image is fixed or scrolls with the rest of the
  page
• background-color Sets the background color of an
  element
• background-image Sets an image as the background
• background-position Sets the starting position
  of a background image
• background-repeat Sets if/how a background image
  will be repeated

25
Styles

• Color Sets the color of a text
• Direction Sets the text direction
• letter-spacing Increase or decrease the space
  between characters
• text-align Aligns the text in an element
• text-decoration Adds decoration to text
• text-indent Indents the first line of text in an
  elementtext-shadow 
• text-transform Controls the letters in an
  elementunicode-bidi 
• white-space Sets how white space inside an
  element is handled
• word-spacing Increase or decrease the space
  between words

26
Styles

• Font A shorthand property for setting all of the
  properties for a font in one declaration
• font-family A prioritized list of font family
  names and/or generic family names for an element
• font-size Sets the size of a font
• font-size-adjust Specifies an aspect value for
  an element that will preserve the x-height of the
  first-choice font
• font-stretch Condenses or expands the current
  font-family
• font-style Sets the style of the font
• font-variant Displays text in a small-caps font
  or a normal font
• font-weight Sets the weight of a font

27
Styles

• Border A shorthand property for setting all of
  the properties for the four borders in one
  declaration
• border-bottom A shorthand property for setting
  all of the properties for the bottom border in
  one declaration
• border-bottom-color Sets the color of the bottom
  border
• border-bottom-style Sets the style of the bottom
  border
• border-bottom-width Sets the width of the bottom
  border
• border-color Sets the color of the four borders,
  can have from one to four colors
• border-left A shorthand property for setting all
  of the properties for the left border in one
  declaration
• border-left-color Sets the color of the left
  border
• border-left-style Sets the style of the left
  border
• border-left-width Sets the width of the left
  border
• Same properties are available for right and top

28
Styles

• margin A shorthand property for setting the
  margin properties in one
• margin-bottom Sets the bottom margin of an
  element
• margin-left Sets the left margin of an
  elementauto
• margin-right Sets the right margin of an
  elementauto
• margin-top Sets the top margin of an elementauto

29
Styles

• Review references for more style.

30
Pseudo-class

• Syntax
• The syntax of pseudo-classes
• selectorpseudo-class property value
• CSS classes can also be used with pseudo-classes
• selector.classpseudo-class property value

31
Pseudo-class

• active Adds special style to an activated
  element
• Focus Adds special style to an element while
  the element has focus
• hover Adds special style to an element when you
  mouse over  it
• link Adds special style to an unvisited link
• visited Adds special style to a visited link
• first-child Adds special style to an element
  that is the first child of some other element
• lang Allows the author to specify a language to
  use in a specified element

32
Pseudo-class

• Note ahover MUST come after alink and
  avisited in the CSS definition in order to be
  effective!!
• Note aactive MUST come after ahover in the CSS
  definition in order to be effective!!

33
Pseudo-class

• lthtmlgt
• ltheadgt
• ltstyle type"text/css"gt
• a.onelink color ff0000
• a.onevisited color 0000ff
• a.onehover color ffcc00
• a.twolink color ff0000
• a.twovisited color 0000ff
• a.twohover font-size 150
• a.threelink color ff0000
• a.threevisited color 0000ff
• a.threehover background 66ff66
• a.fourlink color ff0000
• a.fourvisited color 0000ff
• a.fourhover font-family monospace

34
Pseudo-class

• ltbodygt
• ltpgtMouse over the links to see them change
  layout.lt/pgt
• ltpgtltbgtlta class"one" href"default.asp"
  target"_blank"gtThis link changes
  colorlt/agtlt/bgtlt/pgt
• ltpgtltbgtlta class"two" href"default.asp"
  target"_blank"gtThis link changes
  font-sizelt/agtlt/bgtlt/pgt
• ltpgtltbgtlta class"three" href"default.asp"
  target"_blank"gtThis link changes
  background-colorlt/agtlt/bgtlt/pgt
• ltpgtltbgtlta class"four" href"default.asp"
  target"_blank"gtThis link changes
  font-familylt/agtlt/bgtlt/pgt
• ltpgtltbgtlta class"five" href"default.asp"
  target"_blank"gtThis link changes
  text-decorationlt/agtlt/bgtlt/pgt
• lt/bodygt
• lt/htmlgt

35
Pseudo-elements

• lthtmlgt
• ltheadgt
• ltstyle type"text/css"gt
• pfirst-letter
• color ff0000
• font-sizexx-large
• lt/stylegt
• lt/headgt
• ltbodygt
• ltpgt
• You can use the first-letter pseudo-element to
  add a special effect to the first letter of a
  text!
• lt/pgt
• lt/bodygt
• lt/htmlgt