Scribd
Upload
33 views

PW-03 HTML DOM and Javascript

The document provides an overview of HTML, DOM, and CSS, covering basic HTML structure and tags, how the DOM represents and accesses HTML elements as objects, and how CSS can be used to specify styles and formatting for HTML elements through selectors, properties, and values. HTML defines the content and structure of web pages, DOM provides programmatic access to HTML elements, and CSS controls the presentation and layout of HTML documents. The document also discusses HTML5 doctype declaration, common HTML tags, accessing DOM nodes and attributes, and the different scopes of CSS rules.

Uploaded by

Andika Nugraha
Copyright
© © All Rights Reserved
Available Formats
Download as PDF, TXT or read online on Scribd
33 views

PW-03 HTML DOM and Javascript

The document provides an overview of HTML, DOM, and CSS, covering basic HTML structure and tags, how the DOM represents and accesses HTML elements as objects, and how CSS can be used to specify styles and formatting for HTML elements through selectors, properties, and values. HTML defines the content and structure of web pages, DOM provides programmatic access to HTML elements, and CSS controls the presentation and layout of HTML documents. The document also discusses HTML5 doctype declaration, common HTML tags, accessing DOM nodes and attributes, and the different scopes of CSS rules.

Uploaded by

Andika Nugraha
Copyright
© © All Rights Reserved
Available Formats
Download as PDF, TXT or read online on Scribd
You are on page 1/ 51

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?

You might also like