INTRODUCTION TO WEB PROGRAMMING
1
0731213
CSS
2
CSS IS A LANGUAGE THAT DESCRIBES THE
STYLE OF AN HTML DOCUMENT
ADDING STYLE
There are two aspects to adding style to a Web
page via CSS
• Specifying what the style looks like “Declaration”
• Naming the HTML element “Selector”
A CSS Selector
A CSS declaration
p {
font-family: sans-serif;
color: red;
}
CSS
CSS
3
selector
{
property: value;
property: value;
...
property: value;
}
NAMING HTML ELEMENTS
• There are two naming options for an HTML element: assigning
“ID” names and “class names.”
• An id declaration is the same as a class declaration, except
that it should only be used specifically once per Web page
<h1 class=”myboldandbluelook”> Introduction </h1>
.myboldandbluelook
{
font-weight: bold;
color: blue;
}
<h1 id=”myboldandbluelook”> Introduction </h1>
4
#myboldandbluelook
{
font-weight: bold;
color: blue;
}
ATTACHING A CSS FILE <LINK>
<head>
...
<link href="filename" type="text/css" rel="stylesheet" />
...
</head>
HTML
<link href="style.css" type="text/css" rel="stylesheet" />
<link href="http://www.google.com/uds/css/gsearch.css"
rel="stylesheet" type="text/css" />
HTML
A page can link to multiple style sheet files
5
• In case of a conflict (two sheets define a style for the same
HTML element), the latter sheet's properties will be used
CSS PROPERTIES FOR COLORS
p {
color: red;
background-color: yellow;
}
CSS
This paragraph uses the style above
property
description
color
color of the element's text
background-color
color that will appear behind the
element
6
output
•
CSS properties for colors. More details
•
CSS properties for Backgrounds. More details
•
CSS properties for Borders. More details
•
CSS properties for Margins. More details
•
CSS properties for padding. More details
•
CSS properties for text. More details
•
CSS properties for fonts. More details
•
CSS properties for links. More details
•
CSS properties for float and clear. More details
•
CSS properties for align. More details
•
and even more
7
CSS PROPERTIES
CSS COMMENTS /*…*/
/* This is a comment.
It can span many lines in the CSS file. */
p {
color: red; background-color: aqua;
}
CSS
The // single-line comment style is NOT supported in CSS
8
The <!-- ... --> HTML comment style is also NOT supported
in CSS
GROUPING STYLES
p, h1, h2 {
color: green;
}
h2 {
background-color: yellow;
}
CSS
This paragraph uses the above style.
This h2 uses the above styles.
output
A style can select multiple elements separated by
commas
9
The individual elements can also have their own styles
DESCENDANT (NESTED)
SELECTOR
• Syntax is similar to the example of grouping
selectors—but without the commas
• Selects all elements that correspond to the “nested”
structure specified by the selector
ul li a strong{color:green;}
CSS
10
• E.g., the above style will apply to any <strong> HTML tag that
lies within an <a> tag that lies within an <li> tag that lies within
a <ul> tag
CSS EXAMPLE
Example.html
style.css
<!DOCTYPE html>
<html>
<head>
<link href=“style.css"
type="text/css" rel="stylesheet"
/>
</head>
<body>
<h1>My First CSS Example</h1>
<p>This is a paragraph.</p>
</body>
</html>
HTML
body {
background-color: lightblue;
}
h1 {
color: white;
text-align: center;
}
p {
font-family: verdana;
font-size: 20px;
}
11
CSS
12
JAVASCRIPT
WHY STUDY JAVASCRIPT?
• JavaScript is very easy to learn. No setup is required.
• Widely accepted by most of the Web browsers
• Interaction at client side with the user is made more
interesting and more easier
• Make actions in the user's browser without sending messages
back and forth to the server.
• JavaScript also allows your page to be interactive.
• Provide responses within the Web page to various actions that
your visitor takes so as to avoid the need to load new Web
pages to respond (AJAX).
13
• Considering the performance, JavaScript is fast and Reliable.
INTRODUCTION
JavaScript Can Change HTML Content
• One of many JavaScript HTML methods is getElementById().
• This example uses the method to "find" an HTML element (with
id="demo") and changes the element content (innerHTML) to
"Hello JavaScript":
document.getElementById("demo").innerHTML = "Hello JavaScript";
document.getElementById('demo').innerHTML = 'Hello JavaScript’;
JavaScript accepts both double and single quotes
• JavaScript Can Change HTML Styles (CSS)
• Changing the style of an HTML element, is a variant of
changing an HTML attribute
14
document.getElementById("demo").style.fontSize = "25px";
INTRODUCTION
JavaScript Can Hide or Show HTML Elements
• Hiding HTML elements can be done by changing the display
style
15
document.getElementById("demo").style.display = "none";
document.getElementById("demo").style.display = "block";
WHERE TO PUT JAVASCRIPT
The <script> Tag
• In HTML, JavaScript code must be inserted between <script>
and </script> tags.
<script>
document.getElementById("demo").innerHTML = "My First JavaScript";
</script>
• You can place any number of scripts in an HTML document.
16
• Scripts can be placed in the <body>, or in the <head> section
of an HTML page, or in both.
JAVASCRIPT FUNCTIONS
•
A JavaScript function is a block of code designed to perform a particular
task.
•
A JavaScript function is executed when "something" invokes it (calls it).
•
A JavaScript function is defined with the function keyword, followed by
a name, followed by parentheses ().
•
Function names can contain letters, digits, underscores, and dollar signs
(same rules as variables).
•
The parentheses may include parameter names separated by commas:
(parameter1, parameter2, ...)
•
The code to be executed, by the function, is placed inside curly
brackets: {}
17
function myFunction(p1, p2) {
return p1 * p2;
// The function returns the product of p1 and p2
}
JAVASCRIPT EVENTS
• HTML events are "things" that happen to HTML elements.
• When JavaScript is used in HTML pages, JavaScript
can "react" on these events.
<element event='some JavaScript’>
18
<input type=text onmouseover="document.getElementById('demo').innerHTML
= ‘Hello’ "/>
<input type=text onmouseover=“changeText()"/>
JAVASCRIPT EXAMPLE
<html>
<head>
<script>
function changeText1()
{document.getElementById("demo").innerHTML = "Your mouse is here.";}
</script>
</head>
<body>
<h1>A Web Page</h1>
<p id="demo">A Paragraph</p>
<input type=text onmouseover="changeText1()"
onmouseout="changeText2()"/>
</body>
</html>
19
function changeText2()
{document.getElementById("demo").innerHTML = "Your mouse left.";}
Event
Description
onchange
An HTML element has been
changed
onclick
The user clicks an HTML element
onmouseover
The user moves the mouse over an
HTML element
onmouseout
The user moves the mouse away
from an HTML element
onkeydown
The user pushes a keyboard key
onload
The browser has finished loading
the page
20
COMMON HTML EVENTS
JQUERY
JQUERY IS A JAVASCRIPT LIBRARY.
21
JQUERY GREATLY SIMPLIFIES JAVASCRIPT
PROGRAMMING.
WHAT IS JQUERY?
•
jQuery is a lightweight, "write less, do more", JavaScript library.
•
The purpose of jQuery is to make it much easier to use JavaScript on
your website.
•
jQuery takes a lot of common tasks that require many lines of JavaScript
code to accomplish, and wraps them into methods that you can call with a
single line of code.
•
jQuery also simplifies a lot of the complicated things from JavaScript, like
AJAX calls and HTML manipulation.
•
The jQuery library contains the following features:
HTML manipulation
CSS manipulation
HTML event methods
Effects and animations
AJAX
Utilities
22
•
•
•
•
•
•
ADDING JQUERY TO YOUR WEB
PAGES
Two ways
1. Download the jQuery library from jQuery.com
<head>
<script src="jquery-3.2.1.min.js"></script>
</head>
2. Include jQuery from a CDN (Content Delivery Network), like
Google
23
<head>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.2.1/jquery.min.js"></
script>
</head>
JQUERY SYNTAX
• The jQuery syntax is tailor-made for selecting HTML elements
and performing some action on the element(s).
• Basic syntax is: $(selector).action()
• A $ sign to define/access jQuery
• A (selector) to "query (or find)" HTML elements
• A jQuery action() to be performed on the element(s)
• Examples:
$(this).hide() - hides the current element.
$("p").hide() - hides all <p> elements.
$(".test").hide() - hides all elements with class="test".
$("#test").hide() - hides the element with id="test".
24
•
•
•
•
JQUERY SELECTORS
The element Selector: The jQuery element selector selects
elements based on the element name.
$("p").hide();
The #id Selector: The jQuery #id selector uses the id attribute of
an HTML tag to find the specific element.
$("#test").hide();
The .class Selector: The jQuery class selector finds elements with
a specific class.
25
$(".test").hide();
JQUERY EVENTS
Mouse Events
Keyboard
Events
Form Events
Document/Wind
ow Events
click
keypress
submit
load
dblclick
keydown
change
resize
mouseenter
keyup
focus
scroll
blur
unload
mouseleave
Ready Event: This is to prevent any jQuery code from running
before the document is finished loading (is ready).
26
$(document).ready(function(){
$("p").click(function(){
$(this).hide();
});
});
SET CONTENT AND ATTRIBUTES
• text() - Sets or returns the text content of selected elements
• html() - Sets or returns the content of selected elements
(including HTML markup)
• val() - Sets or returns the value of form fields
CSS
27
$(“p").click(function(){
$("#test1").text("Hello world!");
});
$(“p").click(function(){
$("#test2").html("<b>Hello world!</b>");
});
$(“p").click(function(){
$("#test3").val("Dolly Duck");
});
ACCESS AND MANIPULATE
ELEMENTS AND ATTRIBUTES
• Get: text(), html(), val(), and attr(): details
• Set: text(), html(), val(), and attr(): details
• Add: append(), prepend(), after(), and before(): details
• Remove: remove() and empty(): details
• Get and Set CSS: addClass(), removeClass(), and
toggleClass(): details
• Get and Set CSS: css(): details
28
• Dimensions: width(), height(), innerWidth(), innerHeight(),
outerWidth(), and outerHeight(): details
JQUERY EXAMPLE
29
<html>
<head>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.2.1/jquery.min.js"></script>
<script>
$(document).ready(function(){
$("p").click(function(){
$(this).hide();
});
});
</script>
</head>
<body>
<p>If you click on me, I will disappear.</p>
<p>Click me away!</p>
<p>Click me too!</p>
</body>
</html>
XML
XML STANDS FOR EXTENSIBLE MARKUP LANGUAGE.
30
XML WAS DESIGNED TO STORE AND TRANSPORT DATA.
WHAT IS XML?
• XML stands for eXtensible Markup Language
• XML is a markup language much like HTML
• XML was designed to store and transport data
31
• XML was designed to be self-descriptive
HOW CAN XML BE USED?
• XML Separates Data from Presentation
• XML does not carry any information about how to be
displayed.
• The same XML data can be used in many different
presentation scenarios.
• Because of this, with XML, there is a full separation
between data and presentation.
• XML is Often a Complement to HTML
32
• In many HTML applications, XML is used to store or
transport data, while HTML is used to format and display
the same data.
XML ELEMENTS
An XML element is everything from (including) the element's start
tag to (including) the element's end tag.
An element can contain:
• text
• attributes
• other elements
<book category="children">
<title>Harry Potter</title>
<author>J K. Rowling</author>
<year>2005</year>
<price>29.99</price>
</book>
33
• or a mix of the above
XML ATTRIBUTES
• XML elements can have attributes, just like HTML.
• Attributes are designed to contain data related to a specific
element
• XML Attributes Must be Quoted
34
<person gender="female">
<?xml version="1.0" encoding="UTF-8"?>
<breakfast_menu>
<food>
<name>Belgian Waffles</name>
<price>$5.95</price>
<description>
Two of our famous Belgian Waffles with plenty of real maple syrup
</description>
<calories>650</calories>
</food>
<food>
<name>Strawberry Belgian Waffles</name>
<price>$7.95</price>
<description>
Light Belgian waffles covered with strawberries and whipped cream
</description>
<calories>900</calories>
</food>
</breakfast_menu>
35
XML EXAMPLE
THE END
36
PREPARED BY: RANEEM QADDOURA 2017
© Copyright 2026 Paperzz