-
7/31/2019 M0114002012012407302_Understanding HTML, XHTML, CSS, JavaScript2
1/16
Understanding HTML, XHTML, CSS, JavaScript
Session 2
Course : M0114 Web-based Programming
Year : 2012
-
7/31/2019 M0114002012012407302_Understanding HTML, XHTML, CSS, JavaScript2
2/16
Last Session Review
Website Introduction
History of HTML and the World Wide Web
Web Content
Web Content Delivery
Web Programming
Tools for developing website
2
-
7/31/2019 M0114002012012407302_Understanding HTML, XHTML, CSS, JavaScript2
3/16
Agenda
HTML
HTML and XHTML
HTML 5
CSS
JavaScript
3
-
7/31/2019 M0114002012012407302_Understanding HTML, XHTML, CSS, JavaScript2
4/16
Learning Outcomes:
LO 1: Explain website programming concepts
LO 2: Choose appropriate programming language
techniques to deal with the user requirements
4
-
7/31/2019 M0114002012012407302_Understanding HTML, XHTML, CSS, JavaScript2
5/16
HTML
HyperText Markup Language
Extensions
.HTM
.HTML
Not case-sensitive
Client-side programming
We can see the source code Starting with < and ending with >
5
-
7/31/2019 M0114002012012407302_Understanding HTML, XHTML, CSS, JavaScript2
6/16
HTML Tags
Opening tag
Start of an HTML command
E.g:
Closing tag Indicates the end of an HTML command
E.g:
Empty tag An HTML command without enclosing any text in the page
E.g:
and6
-
7/31/2019 M0114002012012407302_Understanding HTML, XHTML, CSS, JavaScript2
7/16
With HTML Tags
We can:
Put some text
Insert image
Insert video Insert music
Create table
Create links
Create form
etc
7
-
7/31/2019 M0114002012012407302_Understanding HTML, XHTML, CSS, JavaScript2
8/16
HTML & XHTML
XHTML = more structured version of HTML
Targeting XHTML 1.1 -> developing web pages that
adhere to the very latest web standards
E.g:
8
-
7/31/2019 M0114002012012407302_Understanding HTML, XHTML, CSS, JavaScript2
9/16
HTML 5
HTML5 adds many new features from previous
version
E.g: , , elements
New features:
New Elements
New Attributes Full CSS3 Support
Video and Audio
9
-
7/31/2019 M0114002012012407302_Understanding HTML, XHTML, CSS, JavaScript2
10/16
HTML 5
New features (continued):
2D/3D Graphics
Local Storage
Local SQL Database Web Applications
10
-
7/31/2019 M0114002012012407302_Understanding HTML, XHTML, CSS, JavaScript2
11/16
CSS
Cascading Style Sheets
Extensions
.CSS
Client-side programming
Can combined with HTML tags
Create a style for your website
E.g: font style, size, color, padding, align, etc
Standardization for your website layout
E.g: CSS can be used for any web pages that using this CSS
11
-
7/31/2019 M0114002012012407302_Understanding HTML, XHTML, CSS, JavaScript2
12/16
CSS Example
H1 {
font-size: 14pt;
font-family: Verdana;
}
It means, every web pages that have
html tag will change the font style into Verdana font,size 14pt
12
-
7/31/2019 M0114002012012407302_Understanding HTML, XHTML, CSS, JavaScript2
13/16
JavaScript
Developed by Netscape Communications
Corporation
Extensions
.JS
Client-side programming
Can combined with HTML tags
Make your web more dynamic and interactive E.g: display messages to the user, validate form,
calculations, animate images
13
-
7/31/2019 M0114002012012407302_Understanding HTML, XHTML, CSS, JavaScript2
14/16
14
Summary
The usage of:
HTML
HTML & XHTML
HTML5 CSS
JavaScript
-
7/31/2019 M0114002012012407302_Understanding HTML, XHTML, CSS, JavaScript2
15/16
Next Session
HTML - Basic
Basic HTML tags
Headers
Fonts Text alignments
Special characters
Horizontal Rules
Paragraph
Line Break
15
-
7/31/2019 M0114002012012407302_Understanding HTML, XHTML, CSS, JavaScript2
16/16
16
End of
Web-based ProgrammingSession 2
Thank you