m0114002012012407302_understanding html, xhtml, css, javascript2

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


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


3/16

Agenda

HTML

HTML and XHTML

HTML 5

CSS

JavaScript

3


4/16

Learning Outcomes:

LO 1: Explain website programming concepts

LO 2: Choose appropriate programming language

techniques to deal with the user requirements

4


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


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:
and

6


7/16

With HTML Tags

We can:

Put some text

Insert image

Insert video Insert music

Create table

Create links

Create form

etc

7


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


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


10/16

HTML 5

New features (continued):

2D/3D Graphics

Local Storage

Local SQL Database Web Applications

10


11/16

CSS

Cascading Style Sheets

Extensions

.CSS


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


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


13/16

JavaScript

Developed by Netscape Communications

Corporation

Extensions

.JS


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


14/16

14

Summary

The usage of:

HTML

HTML & XHTML

HTML5 CSS

JavaScript


15/16

Next Session

HTML - Basic

Basic HTML tags

Headers

Fonts Text alignments

Special characters

Horizontal Rules

Paragraph

Line Break

15


16/16

16

End of

Web-based ProgrammingSession 2

Thank you

m0114002012012407302_understanding html, xhtml, css, javascript2

Documents