1. By: Ramon Christopher Morales
Fundamentals of
Web Building

2. Today’s discussion includes the
following:
 The web programming languages usually
used
HTML
CSS
JavaScript
Server-side Scripting
SQL

3.  HTML is the primary language for
building/creating web pages.
 CSS defines HOW HTML elements are to
be displayed.
 JavaScript is THE scripting language of
the Web.
 Server-side scripting is about
"programming" the behavior of the server.
 SQL is the standard language for
accessing and manipulating databases.

4. HTML - Hyper Text Markup Language
 HTML is an easy-to-learn markup
language.
 HTML uses markup tags inside angle
brackets, like <p>, to define
the elements of a web page:

5. HTML Example
 HTML uses start tags and end tags to markup
web page elements: In the example above, the
<p> tag marks the start of a paragraph, and
</p> marks the end of the paragraph.

6. HTML Example
 Web browsers (IE, Firefox, Chrome, etc) read
HTML documents, interpret the HTML tags, and
display the proper output (without displaying the
HTML tags):

7. HTML
 By using simple HTML tags, web designers
can add headers, paragraphs, text, tables,
images, lists, programming code, etc, to a
web page (HTML document).
 According to the HTML standard, HTML
should be used to define the content of
web pages.

8. CSS - Cascading Style Sheets
 CSS describes the visual style
(appearance, layout, color, fonts) of HTML
elements.

9. CSS EXAMPLE
 CSS was designed to separate document layout
from document content (which greatly improved
HTML flexibility and reduced HTML complexity).

10. CSS EXAMPLE
 CSS saves a lot of work!
 The CSS definitions are normally stored in
external files. This enables a web
developer to change the appearance and
layout of every page in a web site, just by
editing one single file!

11. CSS EXAMPLE
 If you have ever tried to change the style of
all elements in all your HTML pages, you
understand how you can save a lot of work
by storing the style definitions in an
external file.

12. JavaScript - Client-side Scripting
 JavaScript is used in billions of Web pages
to add functionality, validate forms,
communicate with the server, and much
more.
 JavaScript is easy to learn.

13. What is JavaScript?
 JavaScript is a scripting language
 A scripting language is a lightweight
programming language
 A JavaScript consists of lines of executable
computer code
 A JavaScript is usually embedded directly
into HTML pages

14. What is JavaScript?
 JavaScript was designed to add interactivity
to HTML pages
 JavaScript is free. Everyone can use
JavaScript without a license

15. Are Java and JavaScript the same?
 Java and JavaScript are two completely
different languages in both concept and
design!
 Java (developed by Sun Microsystems) is a
powerful and much more complex
programming language - in the same
category as C and C++
 JavaScript was invented by Brendan Eich at
Netscape (with Navigator 2.0), and has
appeared in all browsers since 1996.

16. Client-side Scripting
 JavaScript is about "programming" the
behavior of a browser. This is called client-
side scripting (or browser scripting).
 Server-side scripting is about "programming"
the behavior of the server

17. What can a JavaScript Do?
 JavaScript gives
HTML designers a
programming tool -
JavaScript is a
scripting language
with a very simple
syntax! Almost
anyone can put
small "snippets" of
code into their HTML
pages

18. What can a JavaScript Do?
 JavaScript can react to events - A
JavaScript can be set to execute when
something happens, like when a page has
finished loading or when a user clicks on an
HTML element

19. What can a JavaScript Do?
 JavaScript can be
used to validate
data - A JavaScript
can be used to
validate form data
before it is submitted
to a server. This
saves the server from
extra processing

20. What can a JavaScript Do?
 JavaScript can be used to create
cookies - A JavaScript can be used to store
and retrieve information on the visitor's

21. What can a JavaScript Do?
 JavaScript can be used to detect the
visitor's browser - A JavaScript can be used
to detect the visitor's browser, and load
another page specifically designed for that

22. What can a JavaScript Do?
 JavaScript can read/write/modify HTML
elements - A JavaScript can read and
change the content of an HTML element

23. HTML, CSS, JavaScript
 HTML is the primary language for
building/creating web pages.
 CSS defines HOW HTML elements are to be
displayed.
 JavaScript is THE scripting language of the
Web.

24. ASP and PHP - Server-side
Scripting
 Active Server Pages (ASP) and Hypertext
Preprocessor (PHP)
 An HTML file can contain HTML tags, text
and scripts.
 Server-side scripting is about "programming"
the behavior of the server. This is called
server-side scripting or server scripting.
 Client-side scripting is about "programming"
the behavior of the browser.

25. ASP and PHP - Server-side
Scripting
 Normally, when a browser requests an HTML
file, the server returns the file. However, if the
file contains a server-side script, the script is
executed on the server before the file is
returned to the browser as plain HTML.

26. What can Server Scripts Do?
 Dynamically edit, change or add any content
to a Web page
 Respond to user queries or data submitted
from HTML forms
 Access any data or databases and return the
result to a browser
 Customize a Web page to make it more
useful for individual users

27. What can Server Scripts Do?
 Provide security since your server code
cannot be viewed from a browser
 Because the scripts are executed on the
server, the browser that displays the file does
not need to support scripting at all!

28. SQL - Structured Query Language
 SQL is the standard language for accessing
and manipulating databases.
 Common database management systems
are: MySQL, SQL Server, Access, Oracle,
Sybase, and DB2
 Knowledge of SQL is invaluable for anyone
who wants to store or retrieve data from a
database.

29. What is SQL?
 SQL stands for Structured Query Language
 SQL allows you to access a database
 SQL is an ANSI standard computer language
 SQL can execute queries against a database
 SQL can retrieve data from a database
 SQL can insert new records in a database
 SQL can delete records from a database
 SQL can update records in a database
 SQL is easy to learn

30. SQL Database Tables
 A database usually contains one or more
tables. Each table is identified by a name
(e.g. "Customers" or "Orders"). Tables
contain records (rows) with data.

31. SQL Database Tables
 The table above (called “Persons”) contains
three records (one for each person) and four
columns (LastName, FirstName, Address,
and City).

32. SQL Queries
 With SQL, we can query a database and
have a result set returned. A query like this:
SELECT LastName FROM Persons
Gives a result set like this:

33. Summary
 HTML is the primary language for
building/creating web pages.
 CSS defines HOW HTML elements are to be
displayed.
 JavaScript is THE scripting language of the
Web.
 Server-side scripting is about
"programming" the behavior of the server.
 SQL is the standard language for accessing
and manipulating databases.