HTML, CSS, JAVASCRIPT

STAGE 9
Computing for lower secondary
Combining HTML, CSS and JavaScript
To add interactivity to websites, developers will often use a programming language called
JavaScript. JavaScript was first developed in 1995. Today, companies like Google and Facebook
are developing complex web applications using JavaScript. JavaScript has evolved to the point
that it is one of the most commonly used languages by developers of server-side applications.
One of the key points leading to the success of JavaScript is the continual update in its
functionality. The ongoing development of new and exciting features and library functions
means it continues to offer developers new options.
The ongoing development of new and exciting features and library functions means it continues
to offer developers new options.
for example, The Facebook Ads app makes use of the React JavaScript library.
Combining HTML, CSS and JavaScript

HTML defines the content and

structure of a web page and
CSS is used to define how the content
is presented.
JavaScript is used to define how the
user can interact with that content
HTML: A quick review
HTML is used to produce the structure for a web page
while CSS provides the presentation or styling for
web page content. Every web page presented on the
internet uses the same HTML tags to add text, images,
video, sound and other content; yet they all look
totally different. Some commonly used HTML tags
and their functions include:
HTML: A quick review
w3schools for CSS: container class
What makes one website look different from another is not the HTML code used to
produce the content but the CSS code used to style it.

CSS can be used to style the presentation of navigation elements in addition to the content
displayed on web pages. Developers can create their own CSS to change the presentation of
their web pages. CSS can be inline, internal or it can be accessed by linking to an external
.css file.
 w3schools for CSS: container class
Website developers will often create their To combat this problem
own style definitions and apply them to developers are able to create
and reuse style definitions by
different HTML elements in the document
using a special feature of CSS
they are creating. This can prove to be known as a class.
quite inefficient, especially if the same A class is used to assign a
styles are being used over and over again. name to and create a style
This can also lead to problems if the definition which can be used
developer needs to edit style definitions again and again.
Once that style has been
at a later stage,it can be difficult to locate
defined it can be applied again
all of the style definitions in a large and again to different HTML
HTML document. elements in a web page.
 w3schools for CSS: container class
You can use some of the w3schools CSS classes to style your web pages.
The w3schools library of CSS classes can be accessed and used directly
from their website by providing a link to the w3css stylesheet at
www.w3schools.com/w3css .
One of the predefined CSS classes we can use from w3schools library is the
container class (that is, the class called 'container'). The container class can
be used, for example, to set the margins, padding and alignment for any
HTML element defined inside that container. Any HTML element inside a
defined container to will have the same margins, padding and alignment.
 w3schools for CSS: classes
w3schools have defined many more classes that that can be applied to your
HTML.

For instance:
w3-color class – this defines the background colour.
w3-text-color class – this defines the text colour.
w3-cell class – this allows, for example, text and images to be presented
side by side, or for text and images to be combined.
The w3schools classes provide developers with many complex tools to use to
help improve the layout of their web pages.
Developers can combine classes and apply more than one class to an HTML
element to produce complex web page layouts.
CSS and HTML: buttons, bars and anchors

Websites provide users with a range of ways to navigate

from one web page to another.
Most websites however provide users with a navigation
bar to allow a user to navigate using buttons or images.
For example, the Hodder Education website uses a
combination of text-based hyperlinks and navigation
buttons all presented in a navigation bar across the top of
the web page.
CSS and HTML: buttons, bars and anchors
Sometimes, if an individual web page is very long, the
developer will include a hyperlink within the page
which allows the user to jump to another section of the
page. A hyperlink used this way is called an anchor.

To create an anchor and hyperlink on a page in this way

a web developer will use a special HTML attribute
called an id attribute to assign a name to the content to
be accessed in another position on the HTML document.
 HTML: Forms for user input

Many organisations use web pages to collect

information from users. One way they do this
is through the use of data input forms. Forms
provide users with headings which prompt
them to enter their data into text boxes or
select predetermined options.
 HTML: Forms for user input
Forms can be added to HTML documents using
the <form> </form> tags. Often developers want
the section of an HTML page which contains the
form content to stand out from the rest of the
page; placing the form inside a new <div> </div>
tag will allow this portion of the HTML document
to be styled differently from the remainder of the
page.
 HTML: Forms for user input

For instance:
Practice
Alex Phillips has provided you with a storyboard for the second page of the Web-Pro Games
website.
 JavaScript
Submitting and validating forms
When data is entered into an input form by the website user, they need to be
able to send the data recorded in the form fields to the organisation that owns
the website. One of the simplest ways of doing this is to use a mailto form. A
mailto form allows the user to click on a submit button which opens the user’s
email application to display a new message containing all of the details they wish
to send to the organisation. The mailto: tag can be added at the bottom of a form
to create a button the user can click on to submit the completed form.

The mailto: tag must have a matching action attribute which is associated with
the opening form tag. This is used to tell the web browser what to do with the
form once it is submitted by the user. The action attribute can also however be
used to link to a special script file which can be used to handle the data recorded
on the form.
 JavaScript
Submitting and validating forms
Some of the downsides of using the mailto: approach include:
form data is sent as an attachment which has to be opened and stored by the
recipient
the user of the website must be using Outlook Express in order for
mailto to work effectively

It is unrealistic to assume that everyone accessing a website will be using or have access to the two applications
required by the mailto
Today so many organisations use specialised script forms which are saved with their HTML pages on their web
server. These scripts are known as form mail scripts and are linked to in the same way as a CSS file but instead
of styling a web page displayed using a web browser the form mail script collects the data from the form fields
and sends it to a specified email address.
 Introducing JavaScript
Validating form contents
To help ensure the correct type of data is entered by the user developers
will often program a number of validation checks into the form.

Validation checks are normally carried out before the user submits the
data in the form to the website owners. Most forms will have a button for
the user to press when they have completed all of the details.

The code used to validate the data on the form is often run on the user’s
computer. Code which runs on the user’s computer is an example of
client-side script. Most developers will use JavaScript to do this.
Introducing JavaScript Validating
form contents
When data is input and submitted to a web server it can sometimes lead to code being
executed on the web server, rather than on the user’s computer.

Like CSS, JavaScript can be integrated into a web page in a variety of methods. It too
can be included in-line, internally or as an external file which is accessed by an HTML
document. The web browser knows it is using JavaScript rather than HTML or CSS as
JavaScript instructions are enclosed inside the <script> </script> tags.
THANK YOU
Zin wai

0 9 9 7 4 8 0 9 0 8 2