HyperText Markup Language (HTML)

1
HyperText Markup Language (HTML) Part 2

• Laboratory of Intelligent Networks (LINK) _at_ KUT
• http//link.kut.ac.kr
• Youn-Hee Han

from http//www.w3schools.com
2
HTML Color

• Color Values
• HTML colors can be defined as a hexadecimal
  notation for the combination of Red, Green, and
  Blue color values (RGB).
• The lowest value 0 (hex 00)
• The highest value 255 (hex FF).
• The basic color table

3
HTML Color

• W3C Standard Color Names
• W3C has listed 16 color names
• The color names are
• aqua, black, blue, fuchsia, gray, green, lime,
  maroon, navy, olive, purple, red, silver, teal,
  white, and yellow
• The 216 cross-browser color palette
• http//link.kut.ac.kr/2008_1/WP/216color-code.html
  
• The palette of most colors
• http//link.kut.ac.kr/2008_1/WP/color-code.html

4
HTML Color

• Color combination
• Colors are displayed combining  RED, GREEN, and
  BLUE light sources

5
HTML Color

• 16 Million Different Colors
• The combination of Red, Green and Blue values
  from 0 to 255 gives a total of more than 16
  million different colors to play with (256 x 256
  x 256).
• Most modern monitors are capable of supporting
  the number of colors
• Shades of Gray
• Gray colors are displayed using an equal amount
  of power to all of the light sources

6
HTML Layout

• HTML Layout - Using Tables
• use HTML tables to format the layout of an HTML
  page.
• use a table without borders, and maybe a little
  extra cell-padding
• Does not recommend to use ltframegt tag for HTML
  layout

lthtmlgtltbodygt lttable border"0" width"100"
cellpadding"10"gt lttrgt lttd width"50"
valign"top"gt This is some text. This is some
text. This is some text. This is some
text. lt/tdgt lttd width"50" valign"top"gt Another
text. Another text. Another text. Another text.
Another text. Another text. lt/tdgt lt/trgt lt/tablegt lt
/bodygtlt/htmlgt
7
HTML formatting

• Spaghetti code including contents and formatting
• HTML coding where fonts and color information had
  to be added to every single Web page, became a
  long, expensive and unduly painful process

lthtmlgt ltbodygt ltpgt ltfont size"2"
face"Verdana"gtThis is a paragraph.lt/fontgt lt/pgt ltp
gt ltfont size"3" face"TimesgtThis is another
paragraph.lt/fontgt lt/pgt lt/bodygt lt/htmlgt
The above coding has old style!!! (HTML 3.2 style)
8
HTML formatting

• Removing all fonts and color information from
  HTML page
• HTML 4.0 separates the presentation from the
  document structure
• Do not use presentation attributes inside your
  HTML tags if you can avoid it.
• Start using styles (CSS)!

9
HTML Head

• ltheadgt tag
• It contains general information about a document.
  
• The elements inside the head element should not
  be displayed by a browser.
• Legal tags inside the head section.
• ltbasegt
• Defines a base URL for all the links on a page
• ltlinkgt
• Defines a resource reference
• ltmetagt
• Defines meta information
• "Meta" means "information about".
• lttitlegt
• Defines the document title
• ltstylegt
• Defines a style definition

10
HTML Head

• ltbasegt tag 1
• ltbase href"http//link.kut.ac.kr/webprogramming/"
  /gt
• It specifies a base URL for all of the links in a
  page

lthtmlgt ltheadgt ltbase href"http//link.kut.ac.kr/we
bprogramming/" /gt lt/headgt ltbodygt ltimg
src"/hi/smile.gif" /gt lta href"/hi/smile.gif"gthilt
/agt lt/bodygt lt/htmlgt
11
HTML Head

• ltbasegt tag - 2
• ltbase target"_blank_parent_self_top /gt
• Where to open all the links on the page. This
  attribute is used as the target attribute in each
  link.

lthtmlgt ltheadgtltbase target"_blank/gtlt/headgt ltbodygt
ltpgt lta href"http//www.w3schools.com"
target"_blank"gtThis linklt/agt will load in a new
window because the target attribute is set to
"_blank". lt/pgt ltpgt lta href"http//www.w3schools.c
om"gtThis linklt/agt will also load in a new window
even without a target attribute. lt/pgt lt/bodygt lt/ht
mlgt
12
HTML Head

• ltlinkgt tag
• It specifies an external document and defines the
  relationship between HTML and the document.
• A usual example
• Link to an external style sheet document

lthtmlgt ltheadgt ltlink rel"stylesheet"
type"text/css" href"styles.css"
/gt lt/headgt ltbodygt lth1gtI am formatted with a
linked style sheetlt/h1gt ltpgtMe too!lt/pgt lt/bodygt lt/h
tmlgt
13
HTML Head

• ltmetagt tag
• It provides meta-information about the document
• Usually, it provides information that is relevant
  to browsers or search engines like describing the
  content of your document.
• A usual example 1
• Document description

lthtmlgt ltheadgt ltmeta name"author" content"Jan
Egil Refsnes" /gt ltmeta name"revised"
content"Jan Egil Refsnes,6/10/99" /gt ltmeta
name"generator" content"A Text Editor" /gt ltmeta
name"description" content"HTML examples"
/gt lt/headgt ltbodygt ltpgtHellolt/pgt lt/bodygt lt/htmlgt
14
HTML Head

• ltmetagt tag
• A usual example 2
• Document keywords
• since too many webmasters have used meta tags for
  spamming, like repeating keywords to give pages a
  higher ranking, some search engines have stopped
  using them entirely.

lthtmlgt ltheadgt ltmeta name"keywords content"HTML,
DHTML, CSS, XML, XHTML, JavaScript, VBScript"
/gt lt/headgt ltbodygt ltpgtHellolt/pgt lt/bodygt lt/htmlgt
15
HTML Head

• ltmetagt tag
• A usual example 3
• Redirect a browser to a new page
• It is not recommended to use this technique to
  redirect a browser to different pages, as this
  makes the page inaccessible to some browsers.
• Instead, automatic page forwarding should be done
  using a server-side script (e.g., JSP or PHP)

lthtmlgt ltheadgt ltmeta http-equiv"Refresh
content"5urlhttp//link.kut.ac.kr"
/gt lt/headgt ltbodygtThis page is under
constructionlt/bodygt lt/htmlgt
16
HTML Attributes

• Core Attributes
• Not valid in ltbasegt, ltheadgt, lthtmlgt, ltmetagt,
  ltparamgt, ltscriptgt, ltstylegt, and lttitlegt elements
• Keyboard Attributes

Attribute Value Description
class class_name or style_name The class of the element
id id_name A unique id for the element
style style_definition An inline style definition
title tooltip_text  A text to display in a tool tip
Attribute Value Description
accesskey character Sets a keyboard shortcut to access an element
tabindex number Sets the tab order of an element
17
HTML Attributes

• accesskey attribute
• Syntax
• ltelement accesskey"character" gt
• The following elements can support accesskey
  attribute
• a, area, button, input, label, and textarea.

lthtmlgt ltbodygt ltlabel for"fuser"gtuser
namelt/labelgt ltinput type"text" accesskey"u"
/gt lt/bodygt lt/htmlgt
altu
lthtmlgt ltbodygt lta accesskey"b" href"http//www.da
um.net"gtDaumlt/agt lt/bodygt lt/htmlgt
altb
18
HTML Attributes

• tabindex attribute
• Syntax
• ltelement tabindex"iIndex" gt
• Range of "iIndex "
• 132767 used for normal tabbing order
• 0 (default) used for the lowest tabbing (?? ???
  ?? ??)
• The following elements can have focus
• a, button, iframe, img, input, object, select,
  textarea
• ?? ???? ?? ???? ? ? ?? ??? ?? ??

lthtmlgt ltbodygt ltinput type"text" tabindex"1" /gt
lt!-- ?? ?? ?? --gt ltinput type"text"gt ltinput
type"text" tabindex"2" /gt ltinput type"submit"
tabindex"3" /gt lt/bodygt lt/htmlgt
19
HTML Attributes

• tabindex attribute

lthtmlgt ltbodygt ltulgt ltligtItem 1 (no
tab)lt/ligt ltligtItem 2 (no tab)lt/ligt ltligtItem 3
(no tab)lt/ligt lt/ulgt ltulgt ltli tabindex"1"gtTab
Item 1lt/ligt ltli tabindex"2"gtTab Item
2lt/ligt ltli tabindex"3"gtTab Item 3lt/ligt ltli
tabindex"4"gtTab Item 4lt/ligt ltli
tabindex"5"gtTab Item 5lt/ligt lt/ulgt lt/bodygt lt/htmlgt
20
HTML Events

• Window Events
• Only valid in body and frameset elements.
• Form Element Events
• Only valid in form elements

Attribute Value Description
onload script Script to be run when a document loads
onunload script Script to be run when a document unloads
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
21
HTML Attributes

• Window Events Example

lthtmlgt ltheadgt ltscript type"text/javascript"gt
function load() window.status"Page is
loaded" lt/scriptgt lt/headgt ltbody
onload"load()"gt lt/bodygt lt/htmlgt
lthtmlgt ltheadgt ltscript type"text/javascript"gt
function mymessage() alert("This message
was triggered from me") lt/scriptgt lt/headgt ltbo
dy onload"mymessage()"gt lt/bodygt lt/htmlgt
22
HTML Attributes

• Form Element Events Example - onchange

lthtmlgt ltheadgt ltscript type"text/javascript"gt
function upperCase(x) var
ydocument.getElementById(x).value
document.getElementById(x).valuey.toUpperCase()
lt/scriptgt lt/headgt ltbodygtEnter your
name ltinput type"text" id"fname"
onchange"upperCase(this.id)" /gt lt/bodygt lt/htmlgt
23
HTML Attributes

• Form Element Events Example - onblur

lthtmlgt ltheadgt ltscript type"text/javascript"gt
function upperCase() var xdocument.getEleme
ntById("fname").value document.getElementById
("fname").valuex.toUpperCase()
lt/scriptgt lt/headgtltbodygtEnter your name ltinput
type"text" id"fname" onblur"upperCase(this.id)"
/gt lt/bodygt lt/htmlgt
24
HTML Attributes

• Form Element Events Example - onselect

lthtmlgt ltbodygt ltformgt Select text ltinput
type"text" value"Hello world!" onselect"alert('
You have selected some of the text.')" /gt ltbr
/gt ltbr /gt Select text lttextarea cols"20"
rows"5" onselect"alert('You have selected some
of the text.')" /gt Hello world!
lt/textareagt lt/formgt lt/bodygt lt/htmlgt
25
HTML Events

• Keyboard Events
• Not valid in 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
26
HTML Attributes

• Keyboard Events Example - onkeydown

lthtmlgtltbodygt ltscript type"text/javascript"gt cnt1
function showkey() if (cnt200)
cnt1 showchar.innerHTML'ltbr/gt'
showcode.innerHTML'ltbr/gt' cnt
showchar.innerHTML'('String.fromCharCode(event.
keyCode)') ' showcode.innerHTML'('event.key
Code')' lt/scriptgt ?? ltinput id"textobj"
type"text" onkeydown"showkey()"
onfocus"this.style.backgroundColor'cfc'"
onblur"this.style.backgroundColor'fff'"
/gt lthr/gt ltdiv id"showchar" class"showclass"gtlt/di
vgt lthr/gt ltdiv id"showcode" class"showclass"gtlt/di
vgt lt/bodygtlt/htmlgt
27
HTML Events

• Mouse Events
• Not valid in br, frame, frameset, head, html,
  iframe, meta, param, script, style, and 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
28
HTML Attributes

• Keyboard Events Example - onkeydown

lthtmlgt ltbodygt ltscript type"text/javascript"gt func
tion mouseTest() str'event.srcElement.tagName
'event.srcElement.tagName'ltbr/gt'
str'event.srcElement.id'event.srcElement.id'lt
br/gt' str'event.srcElement.type'event.srcEl
ement.type'ltbr/gt' str'event.type'event.typ
e'ltbr/gt' show.innerHTMLstr lt/scriptgt ltbody
onmousedown"mouseTest()"gt lttable border1
width300gt lttrgtltth id"thObj"gt???? ???
??.lt/thgtlt/trgt lttrgtlttdgtltbutton id"butObj"gt???
??.lt/buttongtlt/tdgtlt/trgt lttrgtlttdgtltinput type"text"
id"tdObj" value"??? ??."gtlt/tdgtlt/trgt lttrgtlttdgtltspa
n id"spanObj"gt??? ??.lt/spangtlt/tdgtlt/trgt lt/tablegt lt
div id"show" style"height5embordersolid 1
bluewidth300"gtlt/divgt ltbodygt lthtmlgt
29
URL Encoding

• What is URL Encoding?
• the process of converting "a string" into "a
  valid URL format" by converting "prohibited
  characters" into "valid characters"
• URL encoding is normally performed to convert
  data passed via html forms, because such data may
  contain special character, such as "/", ".", "",
  and so on
• What characters need to be encoded
• ASCII Control characters
• e.g. carriage return (CR) ? 0d
• Non-ASCII characters
• e.g. ?? ? 2623546203B2623443973B
• Reserved characters
• e.g. ampersand ("") ? 26
• Unsafe characters
• e.g. 'Less Than' symbol ("lt") ? 3c

30
URL Encoding

• Encoding of reserved and unsafe characters

31
URL Encoding

• Example
• One of the most common encounters with URL
  Encoding is when dealing with ltformgts. 
• Form methods (GET and POST) perform URL Encoding
  implicitly

lthtmlgtltbodygt ltform method"GET"
action"example.html"gt ltinput type"text"
name"var" size"50" value"This is a simple
short test."gt ltinput type"submit"gt
lt/formgt lt/bodygtlt/htmlgt
http//icl.kut.ac.kr/example.html?varThisisasi
mple26shorttest
http//icl.kut.ac.kr/example.html?var24263C
3E3F3B233A3D2C22277E2B25
32
Recommandation

• http//www.w3schools.com
• http//www.cadvance.org/