Web Programming
Overview of HTML, DOM, CSS
§ Aryo Pinandito, ST, M.MT
HTML
§ HyperText Markup Language
§ Primary document type for the web
§ Transmitted using the HyperText Transfer Protocol
§ Client sends request string (with parameters)
§ Server returns a document
§ Stateless protocol
§ Describes document content and structure
§ Precise formatting directives added later
§ Content and structure in same document
§ Browser or formatter responsible for rendering
§ Can partially render malformed documents
§ Different browsers render differently
2
HTML Tag
<p> Displayed Content </p>
opening content/value of tag closing
tag tag
<br/>
tag without content
HTML Tag Attribute
gives (visual) effect to
<p align="center"> This text is centered </p>
attribute attribute content/value of tag
name value
HTML5 Basic Structure
<!DOCTYPE html> HTML5 doc type declaration
<html>
HTML
<head> ... </head> head
<body> HTML
HTML document
... body
</body>
</html>
HTML Structure
§ HTML5 doctype declaration
§ As an identifier for web browser to treat and render the
document as HTML5 documents
§ <html> tag
§ HTML document block
§ <head>
§ Header section to put script and style definitions
§ <body>
§ Actual content of HTML document that will be rendered by
the web browser to the screen.
Document Object
Model (DOM)
HTML DOM
§ DOM stands for the Document Object Model.
§ The HTML DOM is the Document Object Model for
HTML.
§ The HTML DOM defines a standard set of objects
for HTML, and a standard way to access and
manipulate HTML objects.
§ Traversing, editing, and modifying DOM nodes
§ Editing text nodes
HTML DOM
§ The HTML DOM is a platform and language independent
API (application program interface) and can be used by
any programming language
§ The HTML DOM is used to manipulate HTML documents
§ DOM makes all components of a web page accessible
§ HTML elements
§ their attributes
§ text
§ They can be created, modified, and removed with
JavaScript
§ We will use Javascript to interface with the HTML DOM
DOM Objects
§ DOM components are accessible as objects or
collections of objects
§ DOM components form a tree of nodes
§ relationship parent node – children nodes
§ document is the root node
§ Attributes of elements are accessible as text
§ Browsers can show DOM visually as an expandable
tree
§ Firebug for Firefox
§ in IE -> Tools -> Developer Tools
DOM Standards
§ W3C www.w3.org defines the standards
§ DOM Level 3 recommendation
§ www.w3.org/TR/DOM-Level-3-Core/
§ DOM Level 2 HTML Specification
§ www.w3.org/TR/DOM-Level-2-HTML/
§ additional DOM functionality specific to HTML, in particular objects
for XHTML elements
§ But, the developers of web browsers
§ don't implement all standards
§ implement some standards differently
§ implement some additional features
Accessing Nodes by id
§ Access to elements by their id
§ document.getElementById(<id>)
§ returns the element with id <id>
§ id attribute can be defined in each start tag
§ div element with id attribute can be used as an root node for a
dynamic DOM subtree
§ span element with id attribute can be used as a dynamic inline
element
§ The preferred way to access elements
Other Access Methods
§ Access by elements' tag
§ there are typically several elements with the same tag
§ document.getElementsByTagName(<tag>)
§ returns the collection of all elements whose tag is <tag>
§ the collection has a length attribute
§ an item in the collection can be reached by its index
§ e.g.
§ html = document.getElementsByTagName("html")[0];
§ Access by elements' name attribute
§ several elements can have the same name
§ document.getElementsByName(<name>)
§ returns the collection of elements with name <name>
Other Node Properties
§ nodeName property
§ nodeValue property
§ attributes property
§ innerHTML property
§ not standard, but implemented in major browsers
§ very useful
§ style property
§ object whose properties are all style attributes, e.g., those
defined in CSS
Accessing JS Object's
Properties
§ There are two different syntax forms to access
object's properties in JS (
§ <object>.<property>
§ dot notation, e.g., document.nodeType
§ <object>[<property-name>]
§ brackets notation, e.g., document["nodeType“]
§ this is used in for-in loops
§ this works for properties of DOM objects, too
Attributes of Elements
§ Access through attributes property
§ attributes is an array
§ has a length attribute
§ an item can be reached by its index
§ an item has the properties name and value
§ e.g.
§ src=document.images[0].attributes[0].value;
§ Access through function getAttribute(<name>)
§ returns the value of attribute <name>
§ e.g.
§ src=document.images[0].getAttribute("src");
Text Nodes
§ Text node
§ can only be as a leaf in DOM tree
§ it's nodeValue property holds the text
§ innerHTML can be used to access the text
Modifying DOM Structure
§ document.createElement(<tag>)
§ creates a new DOM element node, with <tag> tag.
§ the node still needs to be inserted into the DOM tree
§ document.createTextNode(<text>)
§ creates a new DOM text with <text>
§ the node still needs to be inserted into the DOM tree
§ <parent>.appendChild(<child>)
§ inserts <child> node behind all existing children of <parent> node
§ <parent>.insertBefore(<child>,<before>)
§ inserts <child> node before <before> child within <parent> node
§ <parent>.replaceChild(<child>,<instead>)
§ replaces <instead> child by <child> node within <parent> node
§ <parent>.removeChild(<child>)
§ removes <child> node from within <parent> node
Modifying Node Attributes
§ <node>.setAttribute(<name>,<value>)
§ sets the value of attribute <name> to <value>
§ e.g.
§ document.images[0].setAttribute("src","keiki.jpg");
§ That's the standard
§ but it doesn't work in IE, there you have to use
§ setAttribute(<name=value>)
§ e.g.
§ document.images[0].setAttribute("src=\"keiki.jpg\"");
W3C Document Object Model
Special DOM Objects
§ window § history
§ the browser window § sites that the user visited
§ new popup windows can be § makes it possible to go back
opened and forth using scripts
§ document § location
§ the current web page inside § URL of the document
the window § setting it goes to another
page
§ body
§ <body> element of the
document
HTML DOM
An HTML DOM Example
<html> This coding example shows how
the background color of an HTML
<head>
document can be changed to
<script language = “javascript"> yellow when a user clicks on it:
function ChangeColor() {
document.body.bgColor="yellow" ;
}
</script>
</head>
<body onclick="ChangeColor()">
Click on this document!
</body>
</html>
http://www.w3schools.com/js/tryit.asp?filename=try_dom_change_color
HTML DOM
§ DOM Event
§ onBlur, onClick, onChange, onFocus, onKeyDown,
onKeyUp, onKeyPress, onLoad, onMouseDown, on
MouseMove, onMouseOut, onMouseOver, onSubmit, ...
§ http://science.slc.edu/~sallen/s05/examples/events.ht
ml
Cascading Style
Sheet (CSS)
Current Version CSS 3.0
What is CSS?
§ Cascading Style Sheets (CSS):
is a simple mechanism for
adding style (e.g. fonts, colors,
layouts) to Web documents.
§ Styles provide powerful
control over the presentation
of web pages.
Why CSS?
§ HTML was not meant to support styling
information
§ But browsers started supporting inline style changes to
make web look better
§ Inline styling information is problematic
§ Difficult to change
§ Lack of consistency
§ No support for different display formats
§ Bloats pages
§ No support for some styling features
27
Style Sheet Syntax
selector { property: value; }
Connecting HTML to CSS
§ HTML document typically refers to external style sheet
<HEAD>
<LINK rel="stylesheet"
type="text/css“ href="fluorescent.css">
</HEAD>
§ Style sheets can be embedded:
<HEAD><STYLE type="text/css">
<!-- …CSS DEFINITIONS.. -->
</STYLE></HEAD>
§ Style sheets can be embedded inline with style attribute:
<p style="text-align:right">Right-aligned text</p>
29
Three Scopes of CSS
§ Local
§ confined to a single element (tag)
§ Internal
§ affect elements in an entire page
§ External
§ can affect multiple pages
§ Precedence
§ Local > Internal > External
Local Style Sheet
§ Example
<h1 style="color:white; background:orange; font-
weight:bold;">Internal Style Sheet Applied to
Header 1</h1>
§ Practice
§ add “text-align” property to make it centered
§ add “border” property to let it has black, 1px thick, solid border at
left, right, top, and bottom
§ Tip: use “border: <top> <right> <bottom>
<left>;” format for 4 sides; use “border-<side>: xx yy zz;”
for a particular side, where <side> can be left, right, top or
bottom. Can apply to other similar properties.
Internal Style Sheet
§ How to create?
§ Put <style> </style> tag between
<head> and </head> tags of your HTML page
§ Use type attribute to indicate the style sheet type,
usually type="text/css"
§ Put your set of style sheet rules in between <style> and
</style> tags
External Style Sheet
§ An external style sheet is simply a text-only file
that contains only CSS rules.
§ How to link to external style sheet?
<link href="URL of CSS File"
rel="stylesheet" type="text/css" />
§ Practice
§ Create a file called "mystyle.css" and do the example
in local style sheet, but as external style sheet
Selector Type
§ Tag
§ redefines the look of a specific tag
body {background-color: #000000;}
§ Class
§ can apply to any tag
.indent{margin-right:5%;margin-left: 5%;}
In HTML: <p class="indent">
§ Advanced
§ IDs, pseudo-class selectors
#myId { color: #38608A; }
a:hover { color: #FF0000; }
Values - Lenghts
§ Lengths [a number + unit identifier]
§ Unit identifier can be
em (font size of the relevant font),
ex (x-height of the relevant font),
px (pixels),
in (inches), cm (centimeter), mm,
pt (points, =1/72 in), pc (picas, 1 pc = 12 pt)
§ E.g.
h1 { margin: 0.5em }, h1 { margin: 1ex },
p { font-size: 12px }, h2 { line-height: 3cm },
h4 { font-size: 12pt }, h4 { font-size: 1pc }
Values – Percentages & URIs
§ Percentages [a number + %]
§ p { line-height: 120% }
§ URLs & URIs
§ url("<A URI/URL>"), or
§ url(<A URI/URL>)
§ li { list-style:
url(http://ptiik.ub.ac.id/image/bullet2.jpg) disc }
§ body { background: url("yellow.png") }
Note: “yellow.png” location is relative to the URI of the style
sheet.
Values - Colors
§ Colors
§ A color is either a keyword (e.g. white, red), or a
numerical RGB specification (e.g. ).
§ A numerical RGB specification can be:
§ An RGB value in hexadecimal notation, which is a '#'
immediately followed by a 6 digit or 3 digit hexadecimal
number, i.e.
#rrggbb or #rgb.
e.g. #ff0000, #f00
§ An RGB value in functional notation, i.e.
rgb(rrr,ggg,bbb), rgb(r%,g%,b%)
e.g. rgb(255,0,0), rgb(100%,0%,0%)
Values - Colors
§ 16 original predefined color codes (names)
§ http://www.elizabethcastro.com/html/colors/sixteenco
lors.html
§ 216 browser safe colors
§ Colors display correctly on all color monitors
§ http://webdesign.about.com/od/colorcharts/l/bl_color
s.htm
Values - Strings
§ String
§ Sequence of characters written inside double quotes
(" ") or single quotes (' ').
§ Examples
"this is a 'string'"
"this is a \"string\""
'this is a "string"'
'this is a \'string\''
CSS Box Model
Box Model
Generic <div> and <span> tags
§ <div>
§ is a generic block-
level tag
§ <span>
§ is a generic inline
tag, it spans a series
of characters
Box Properties
§ margin : <length>
§ border : <style> <width> <color>
§ padding : <length>
§ width & height : <length>
p {
§ Examples: margin: 50px;
padding: 30px;
float: right;
height: 200px;
width: 400px;
border: 5px solid #006633;
}
Box Properties
§ Practice
§ Create an internal style called "boxStyle"
§ Insert an image that fits into one page.
§ Apply the “boxStyle” to the image
§ Color value: #9DACBF
Text Properties
§ font-family : <font name>, | <font name>, …
§ font-size : <length> | <percentage> | inherit
§ font-weight : normal | bold | lighter | 100 | 200 ...
§ normal = 400, bold = 700, lighter is relative
§ font-style : normal | italic | oblique | inherit
§ line-height : normal | <length> | <percentage> | inherit
§ text-transform : capitalize | uppercase | lowercase | none
| inherit
§ color : <color>
§ text-indent : <length> | <percentage> | inherit
§ text-align : left | right | center | justify | inherit
Text Properties Practice
§ Practice
§ Create a paragraph text
§ Create internal style for <p> tag as following
p {
margin: 50px;
padding: 50px;
clear: right;
float: right;
border: 10px solid #0066CC;
}
§ Create a internal style called “textStyle” and apply it to
paragraph text
Text Properties Practice
text-color is #666666;
font-family is Arial, Helvetica, sans-serif;
text-indent is 20%; padding is 20px;
Positioning Properties
§ height : <length> | <percentage> | inherit
§ width : <length> | <percentage> | inherit
§ left : <length> | <percentage> | auto | inherit
§ top : <length> | <percentage> | auto | inherit
§ right : <length> | <percentage> | auto | inherit
§ bottom : <length> | <percentage> | auto | inherit
§ position : static | relative | absolute | fixed | inherit
§ left/top/right/bottom usually used when position is
specified as absolute.
More in HTML CSS
§ Positioning
§ List
§ Background
§ Animation
§ Pseudo-class
Review
§ What are the constituent elements of an HTML
document?
§ What are the differences between block-level tag and
inline-level tag?
§ What is HTML DOM?
§ What are the elements involved in CSS box-model?
§ Explain the scopes of CSS definition!
§ What does CSS capable for?
Questions?
