Scribd
Upload
72 views35 pages

Cit 303-Book 3 4

The document discusses HTML tags and CSS styles for page layout and design. It covers basic HTML tags for headings, paragraphs, and other text elements. It also covers CSS properties and HTML form tags. The document provides examples and descriptions of common tags.

Uploaded by

shayaankhursheed321
Copyright
© © All Rights Reserved
We take content rights seriously. If you suspect this is your content, claim it here.
Available Formats
Download as PDF, TXT or read online on Scribd
72 views35 pages

Cit 303-Book 3 4

The document discusses HTML tags and CSS styles for page layout and design. It covers basic HTML tags for headings, paragraphs, and other text elements. It also covers CSS properties and HTML form tags. The document provides examples and descriptions of common tags.

Uploaded by

shayaankhursheed321
Copyright
© © All Rights Reserved
We take content rights seriously. If you suspect this is your content, claim it here.
Available Formats
Download as PDF, TXT or read online on Scribd
You are on page 1/ 35

Chapter # 3 HTML and CSS

Chapter No. 03
HTML and CSS
At the end of this chapter students will be able to:

3.1- Describe Html Document Structure and Tags


3.2- Describe CSS Styles
3.3- Designing Tables
3.4- Designing Forms
3.5- Advance Page Layout
3.1 HTML DOCUMENT STRUCTURE AND TAGS
3.1.1 Html Document Structure:

HTML stands for Hypertext Markup Language, and it is the most widely used
language to write Web Pages. HTML is the standard markup language for
creating Web pages. It describes the structure of a Web page. It consists of a
series of elements. These elements tell the browser how to display the
content. Hypertext refers to the way in which Web pages (HTML documents)
are linked together. Thus, the link available on a webpage is called Hypertext.
HTML is a Markup Language which means you use HTML to simply "mark-up"
a text document with tags that tell a Web browser how to structure it to
display.
Originally, HTML was developed with the intent of defining the structure of
documents like headings, paragraphs, lists, etc.
An HTML document has two main parts: the head and the body. But firstly
every HTML document should start by declaring that it is an HTML document.
All HTML documents must start with a document type declaration:
<!DOCTYPEhtml>.
The HTML document itself begins with <html> and ends with </html>.
The visible part of the HTML document is between <body> and </body>.
Head of an HTML Document:
The head element contains Meta information about the HTML page. The
HEAD of an HTML document is where information (which might be ignored

32 | P a g e
Chapter # 3 HTML and CSS

by some Web browsers), such as the document's title, can be placed. The
HEAD of a document should be declared using the following HTML tags:
<head> Should appear after the <html> definition. </head> should appear at
the end of head.
A typical entry in the HEAD section of a document would be:
<title> Title of the document </title>. The title appears on the title bar of
your web browser.
Body of an HTML Document
The BODY of an HTML document is where all the information you wish to
view in your web browser. The text must be carefully marked-up, paragraphs
must begin with the <p> tag and the end of each paragraph must be clearly
marked using the HTML tag </p>. If the body text doesn't contain paragraph
breaks then the text will be viewed as one long paragraph! The BODY of a
document should be declared using the following HTML tags:
<body> tag should appear after the </head> tag. </body> tag should appear
after the document's text but before the </html> tag.
A Simple HTML Document (Example):
Write the following text in your html editor (notepad, NetBeans or any other
editor). You can use both lowercase and uppercase, as HTML is not case
sensitive.
<!DOCTYPE html>
<html>
<head>
<title> A Simple HTML Document </title>
</head>
<body>
<h1>Heading is added here</h1>
<p>This is a very simple HTML document</p>
<p>It only has two paragraphs</p>
</body>
</html>
Save this file as “first.html” here first is the name of your html document and
html is the extension that tells that the file you saved is an html file. The page
will look like as given in the picture below:

33 | P a g e
Chapter # 3 HTML and CSS

Figure 1: My First HTML Document

3.1.2 HTML TAGS


A tag is an instruction to tell the browser how it should display certain
content on the screen. Sometimes developers might refer to tags as
elements. Each tag element is defined by a starting tag, some content, and
an ending tag. For example:
<h1>My First Heading</h1>
Here <h1> is the starting tag used for heading, My First Heading is the
content for this tag element and </h1> is the ending tag which tells the tag is
ended here.
Each tag is enclosed in angle brackets (<>) and the ending tag is same just like
starting tag but has a forward slash ( / ) before the tag name.
Some tags in html do not need any closing or ending tag, like <hr> tag which
is used to add a horizontal line to separate the sections in your document.
Some important tags are discussed in this topic.

34 | P a g e
Chapter # 3 HTML and CSS

Basic HTML Tags: Some basic html tags are:-


Tag Description Example
<!DOCTYPE> Defines the document <!DOCTYPE html>
type
<html> Defines an HTML <html>….</html>
document All the contents for a specific
html document comes inside
these two tags.
<head> Contains title, <head>
metadata/information for <title>My First Page</title>
the document </head>
<title> Defines a title for the <title>My First Page</title>
document It comes inside the head
section.
<body> Defines the document's <body>…</body>
body Each and every thing visible in
a browser is added inside
body section. e.g.
<body>
<h1>First Heading</h1>
<p>First Paragraph</p>
</body>
<h1> to <h6> Defines HTML headings. <h1>First heading</h1>
There are six level of <h2>Second heading</h2>
headings available h1 to .
h6. While h1 is largest and .
h6 is smallest. We use .
headings to clearly label <h6>Sixth heading</h6>
different sections.
<p> Defines a paragraph in an <p>This is a paragraph in an
html document html document</p>
<br> Inserts a single line break. <p>This is a paragraph<br> in
This tag do not requires an html document</p>
an ending tag. The text after <br> will
appear in next line

35 | P a g e
Chapter # 3 HTML and CSS

<hr> Defines a thematic<p>This is a very simple HTML


change in the content. Itdocument</p><hr>
shows a horizontal line <p>It only has tree
separating sections. paragraphs</p>
There will be a horizontal line
between both paragraphs.
<!--...--> Defines a comment. As <!-- Here is where the project
usual comments are not description begins -->
shown in the browser
window. As they provide
extra information to the
person who creates or
manages the page.

Forms and Input Tags: Some important form tags are:-


Tag Description Example
<form> Defines an HTML form <form>…</form>
for user input All the elements of a form comes
inside these two tags
<input> Defines an input <form>
control. It is used to <label>Name: <input
add a text, button or type="text"></label></input>
password field for </form>
inputting This will add a textbox to input text.
<textarea> Defines a multiline <label>Address:
input control (text </label><textareacolspan="4"
area) rowspan="4"></textarea>
<button> Defines a clickable <button
button. You can put type=”button”>submit</button>
tags like
<i>,<b>,<br>,<img>etc
in <button> tag which
was not possible
while creating a
button using <input>
tag

36 | P a g e
Chapter # 3 HTML and CSS

<select> Defines a drop-down <label>Religion</label>


list <select><option>Islam</option>
<option>Cristian</option>
<option>Other</option>
</select>
<option> Defines an option in a <label>Religion</label>
drop-down list <select><option>Islam</option>
<option>Cristian</option>
<option>Other</option>
</select>
<label> Defines a label for an <label>Name: <input
<input> element type="text"></label></input>
</form>
This will give a label to your input
text.

Images: img tag is used for image in an html page


Tag Description Example
<img> Defines an <imgsrc="E:\CIT\CIT-303
image TextBook\pic.jpg" alt="Web
Development" widht="200"
height="200">

Link Tags: Some important tags are:-


Tag Description Example
<a> Defines a hyperlink. That is <a
to link your document to an href="http://www.tevta.gop.
external file, web page or a pk"
content on the same page target="_blank">TEVTA</a>
(Bookmark).
<link> Defines the relationship <link rel="stylesheet"
between a document and href="E:\CIT\Web
an external resource Development with
(mostly used to link to an Java\Project\mystyle.css">
external style sheets)

37 | P a g e
Chapter # 3 HTML and CSS

List Tags: To add list of values both ordered and unordered lists we use list
tags: Few tags are:-
Tag Description Example
<ul> Defines an unordered list <ul style="list-style-type:circle;
padding-
left:0px"><li>Islamabad</li><li
>Karachi</li><li>Lahore</li><li
>Peshawar</li><li>Quetta</li>
</ul>
<ol> Defines an ordered list <ol style="list-style-
type:lower-
roman"><li>Islamabad</li><li>
Karachi</li><li>Lahore</li><li>
Peshawar</li><li>Quetta</li><
/ol>
<li> Defines a list item "><li>Islamabad</li>

Table Tags: Some Tags used in table creation are:-


Tag Description Example
<table> Defines a table <table>…</table>
All the tags relevant to table
comes inside these two tags
<th> Defines a header cell in a <tr>
table <th>Sr#</th>
<th>Degree/Certificate</th>
<th>Marks obtained</th>
<th>University/Board</th>
</tr>
<tr> Defines a row in a table For example we may add a
new row for above header row
as:
<tr><td>1</td><td>Matric</td
><td>672/850</td><td>BISE
BWP</td></tr>

38 | P a g e
Chapter # 3 HTML and CSS

<td> Defines a cell in a table For example each data cell is


defined as:
<tr><td>1</td><td>Matric</td
><td>672/850</td><td>BISE
BWP</td></tr>

Styles Tags:To apply styles to a web page we use the tags:


Tag Description Example
<style> Defines style <h1 style="color:blue">Heading is
information for a added here</h1>
document

<div> Defines a section in a <div>


document. <div> is a <h1 style="color:blue">Heading is
block-level element added here</h1>
<p>This is a paragraph in an html
document</p>
<p><I>This is a very simple HTML
document</i></p>
</div>
<header> Defines a header for <header>
a document or <p>Web Development with Java</p>
section <p>CIT Third Year</p><hr>
</header>
<footer> Defines a footer for a <footer>
document or section <hr><p>Developed by: TEVTA</p>
<p><a
href="https://www.tevta.gop.pk">w
ww.tevta.gop.pk</a></p>
</footer>

Meta Info:
Tag Description Example
<head> Defines information <head>
about the document. <link rel="stylesheet"
The contents inside head href="E:\CIT\Web Development with

39 | P a g e
Chapter # 3 HTML and CSS

section are not visible in Java\Project\mystyle.css">


the document. It may <title> A Simple HTML Document
content title and other </title>
relevant information </head>
about your web
document.
<meta> Defines metadata about <meta name="description" content=
an HTML document. "Web Development Basics">
Metadata is data about <meta name="keywords" content="
data. <meta> tags comes HTML, CSS, JavaScript">
inside head section <meta name="Developed
by" content="TEVTA">

Attributes:
An attribute indicates the characteristics of an object. For example, size and
color of a line or text are the attributes. Attributes are specified with opening
tag to provide additional information about an element or object of the
document.
Example:
<h1 align=”center”>Web Programming </h1>
<hr size=50 color=red>
Some important attributes are: background-color, Background, Text, Link,
Vlink, Alink, href, src, width, alt, style, etc.
3.2 DESCRIBE CSS STYLES
CSS stands for Cascading Style Sheets. CSS describes how HTML elements are
to be displayed on screen, paper, or in other media. CSS saves a lot of work.
It can control the layout of multiple web pages all at once.
CSS can be added to HTML elements in 3 ways:
Inline - by using the style attribute in HTML elements
Internal - by using a <style> element in the <head> section
External - by using an external CSS file
Benefits of using CSS:
A style sheet gives the user several benefits:
 better control over layout
 better control over text display

40 | P a g e
Chapter # 3 HTML and CSS

 separate form from structure


 better site maintainability
 smaller Web pages which means faster downloads.

Example:
body {
background-color: lightblue;
}
h1 {
color: white;
text-align: center;
}
p{
font-family: verdana;
font-size: 20px;
}
3.2.1 Inline CSS
An inline CSS is used to apply a unique style to a single HTML element. An
inline CSS uses the style attribute of an HTML element. This example sets the
text color of the <h1> element to blue:
Example:
<h1 style="color:blue;">This is a Blue Heading</h1>

3.2.2 Internal CSS


An internal CSS is used to define a style for a single HTML page. An internal
CSS is defined in the <head> section of an HTML page, within a <style>
element:
Example:
<!DOCTYPE html>
<html>
<head>
<style>
body {
background-color: powderblue;
}
h1 {

41 | P a g e
Chapter # 3 HTML and CSS

color: blue;
}
p{
color: red;
}
</style>
</head>
<body>
<h1>This is a heading</h1>
<p>This is a paragraph.</p>
</body>
</html>
3.2.3 External CSS
An external style sheet is used to define the style for many HTML pages. With
an external style sheet, you can change the look of an entire web site, by
changing one file. To use an external style sheet, add it as a link to in the
<head> section of the HTML page:
Example:
<!DOCTYPE html>
<html>
<head>
<link rel="stylesheet" href="styles.css">
</head><body>
<h1>This is a heading</h1>
<p>This is a paragraph.</p>
</body>
</html>
An external style sheet can be written in any text editor. The file must not
contain any HTML code, and must be saved with a .css extension.
Here is how the "styles.css" looks:
body {
background-color: powderblue;
}
h1 {
color: blue;
}

42 | P a g e
Chapter # 3 HTML and CSS

p{
color: red;
}
CSS Fonts: The CSS color property defines the text color to be used. The
CSS font-family property defines the font to be used. The CSS font-size
property defines the text size to be used.
Example
<!DOCTYPE html>
<html>
<head>
<style>
h1 {
color: blue;
font-family: verdana;
font-size: 300%;
}
p{
color: red;
font-family: courier;
font-size: 160%;
}
</style>
</head>
<body>
<h1>This is a heading</h1>
<p>This is a paragraph.</p>
</body>
</html>
CSS Border: The CSS border property defines a border around an HTML
element:
Example
p{
border: 1px solid powderblue;
}

43 | P a g e
Chapter # 3 HTML and CSS

CSS Padding: The CSS padding property defines a padding (space) between
the text and the border:
Example
p{
border: 1px solid powderblue;
padding: 30px;
}
External References :
External style sheets can be referenced with a full URL or with a path relative
to the current web page. This example uses a full URL to link to a style sheet:
Example
<link rel="stylesheet" href="https://www.w3schools.com/html/styles. css">

Why we use CSS?


CSS is used to define styles for your web pages, including the design, layout
and variations in display for different devices and screen sizes. The style
definitions are normally saved in external .css files. With an external
stylesheet file, you can change the look of an entire website by changing just
one file.

3.3 DESCRIBE TABLES


Defining an HTML Table: The HTML tables allow web authors to arrange data
like text, images, links, other tables, etc. into rows and columns of cells. An
HTML table is defined with the <table> tag.

Each table row is defined with the <tr> tag. A table header is defined with the
<th> tag. By default, table headings are bold and centered. A table data/cell
is defined with the <td> tag.

Cellpadding and Cellspacing Attributes: There are two attributes called


cellpadding and cellspacing which you will use to adjust the white space in
your table cells. The cellspacing attribute defines space between table cells,
while cellpadding represents the distance between cell borders and the
content within a cell. <table border=”1”, cellpadding=”5” cellspacing=”5”>.

44 | P a g e
Chapter # 3 HTML and CSS

Colspan and Rowspan Attributes: You will use colspan attribute if you want
to merge two or more columns into a single column. Similar way you will use
rowspan if you want to merge two or more rows.

Some important Table Tags are:


<table>:Defines a table,e.g. <table>…</table> All the tags relevant to table
comes inside these two tags
<caption>:Defines a table caption,e.g.
<table><caption>Student Information</caption>
</table>
<th>: Defines a header cell in a table
<tr>
<th>Sr#</th>
<th>Degree/Certificate</th>
<th>Marks obtained</th>
<th>University/Board</th>
</tr>
<tr>: Defines a row in a table. For example we may add a new row for
above header row as:
<tr><td>1</td><td>Matric</td><td>672/850</td><td>BISE BWP</td></tr>
<td>: Defines a cell in a table For example each data cell is defined as:
<tr><td>1</td><td>Matric</td><td>672/850</td><td>BISE BWP</td></tr>

Simple Tabel Example:

<table boarder=2 cellspacing="5” cellpadding="5">


<tr>
<th> Sr# </th>
<th>Degree/ Certificate</th>
<th>Marks obtained</th>
<th>University/Board</th>
</tr>
<tr>
<td>101</td>
<td>Matriculation</td>
<td>950</td>
<td>BISE Lahore</td>

45 | P a g e
Chapter # 3 HTML and CSS

</tr>
<tr>
<td>102</td>
<td>DAE</td>
<td>990</td>
<td>PBTE Lahore</td>
</tr>
</table>

3.4 Designing Forms


HTML Forms are required, when you want to collect some data from the site
visitor. For example, during user registration you would like to collect
information such as name, email address, credit card, etc.

There are various form elements available like text fields, textarea fields,
dropdown menus, radio buttons, checkboxes, etc. Form Example:

First name:

Last name:
SUBMIT

The <form> Element: The HTML <form> element defines a form that is used
to collect user input:
<form> … </form>
An HTML form contains form elements.
Form elements are different types of input elements, like text fields,
checkboxes, radio buttons, submit buttons, and more.
The <input> Element:
The <input> element is the most important form element.
The <input> element can be displayed in several ways, depending on the
type attribute.
Here are some examples:
Type Description

<input type="text"> Defines a one-line text input field

46 | P a g e
Chapter # 3 HTML and CSS

<input type="radio"> Defines a radio button (for selecting one of


many choices)
<input type="submit"> Defines a submit button (for submitting the
form)
Text Input: <input type="text"> defines a one-line input field for text input:
Example
<form>
First name:<input type="text" name="firstname"><br>
Last name:<input type="text" name="lastname"><br>
</form>
Radio Button Input: <input type="radio"> defines a radio button. Radio
buttons let a user select ONE of a limited number of choices:
Example
<form>
<input type="radio" name="gender" value="male" checked> Male<br><input
type="radio" name="gender" value="female"> Female<br>
<input type="radio" name="gender" value="other">Other<br>
</form>
The Submit Button:
<input type="submit"> defines a button for submitting the form data to a
form-handler. The form-handler is typically a server page with a script for
processing input data. Example
<form action="/action_page.php">
First name:<input type="text" name="firstname" value="ahmad"><br>
Last name:<input type="text" name="lastname" value="ali"><br>
<input type="submit" value="Submit">
</form>
The Action Attribute: The action attribute defines the action to be
performed when the form is submitted. E.g. <form
action="/action_page.php">
The Target Attribute: The target attribute specifies if the submitted result
will open in a new browser tab, a frame, or in the current window.
e.g. <form action="/action_page.php" target="_blank">
The Method Attribute: The method attribute specifies the HTTP method
(GET or POST) to be used when submitting the form data: e.g.
<form action="/action_page.php" method="get">

47 | P a g e
Chapter # 3 HTML and CSS

3.5 Advance Page Layout


Page layout is the part of graphic design that deals with the arrangement of
visual elements on a page. Page layout is used to make the web pages look
better. It establishes the overall appearance, relative importance, and
relationships between the graphic elements to achieve a smooth flow of
information and eye movement for maximum effectiveness or impact.

Figure 4: HTML PAGE LAYOUT

Page Layout Information:


Header: The part of a front end which is used at the top of the page.
<header> tag is used to add header section in web pages.
Navigation bar: The navigation bar is same as menu list. It is used to display
the content information using hyperlink.
Index / Sidebar: It holds additional information or advertisements and is not
always necessary to be added into the page.
Content Section: The content section is the main part where content is
displayed.
Footer: The footer section contains the contact information and other query
related to web pages. The footer section always put on the bottom of the
web pages. The <footer> tag is used to set the footer in web pages.
Example:
<!DOCTYPE html>
<html>
<head>

48 | P a g e
Chapter # 3 HTML and CSS

<title>Page Layout</title>
<style>
.head1 {
font-size:40px;
color:#009900;
font-weight:bold;
}
.head2 {
font-size:17px;
margin-left:10px;
margin-bottom:15px;
}
body {
margin: 0 auto;
background-position:center;
background-size: contain;
}
.menu {
position: sticky;
top: 0;
background-color: #009900;
padding:10px 0px 10px 0px;
color:white;
margin: 0 auto;
overflow: hidden;
}
.menu a {
float: left;
color: white;
text-align: center;
padding: 14px 16px;
text-decoration: none;
font-size: 20px;
}
.menu-log {
right: auto;

49 | P a g e
Chapter # 3 HTML and CSS

float: right;
}
footer {
width: 100%;
bottom: 0px;
background-color: #000;
color: #fff;
position: absolute;
padding-top:20px;
padding-bottom:50px;
text-align:center;
font-size:30px;
font-weight:bold;
}
.body_sec {
margin-left:20px;
}
</style>
</head>
<body>
<!-- Header Section -->
<header>
<div class="head1">Computer Science</div>
<div class="head2">A computer science web Page</div>
</header>
<!-- Menu Navigation Bar -->
<nav>
<div class="menu">
<a href="#home">HOME</a>
<a href="#news">NEWS</a>
<a href="#notification">NOTIFICATIONS</a>
<div class="menu-log">
<a href="#login">LOGIN</a>
</div>
</div>
</nav>

50 | P a g e
Chapter # 3 HTML and CSS

<!-- Body section -->


<div class = "body_sec">
<section id="Content">
<h3>Content section</h3>
</section>
</div>
<!-- Footer Section -->
<footer>Footer Section</footer>
</body>
</html>

51 | P a g e
Chapter # 3 HTML and CSS

EXERCISE
PART I: SHORT QUESTIONS
13. What is html tag and give one example?
14. Write any five html tags?
15. What is CSS?
16. What is an Internal CSS?
17. Explain external CSS
18. Why we use CSS?
19. Describe cellpadding and cellspacing attributes.
20. How can you add a header in an html page?

PART II: LONG QUESTIONS


6. Briefly describe HTML Document Structure.
7. Brieflydescribe how to design a form in an html page.
8. Brieflydescribe CSS styles.

52 | P a g e
Chapter # 3 HTML and CSS

MULTIPLE CHOICE QUESTIONS


1. HTML Document has two main parts:
a. Header and Footer b. Head and Body
c. Title and Content d. Head and Content
2. Each tag is enclosed in
a. {} curly Brackets b. [] Square Bracket
c. () Parenthesis d. <> Angle Brackets
3. In the ending tag a ______ comes along with the tag name.
a. Back Slash ( \ ) b. Forward Slash ( / )
c. ( - ) Hyphen d. none
4. Which of the following is a comment tag.
a. /*…*/ b. <!--…--> c. <…> d. //
5. A/An ______ style is used to apply a unique style to a single HTML
element.
a. Inline b. Internal c. External d. None
6. An external stylesheet is saved in a separate file with extension.
a. .html b. .css c. .exe d. .java
7. We use ____ tag for Hyperlink.
a. <a> b. <link> c. <div> d. <nav>
8. To insert a header row in a table we use:
a. <th> tag b. <tr> tag c. <header> tag d. None
9. The tag____ has no ending Tag:
a. <p> tag b. <hr> tag c. <nav> tag d. none
10. The distance between cell boarder and cell content is st by ______
attribute.
a. cellspacing b. rowspan c. cellpadding d. colspan

1 2 3 4 5 6 7 8 9 10

B D B B A B A A B C

53 | P a g e
Chapter # 3 HTML and CSS

Reference:
HTML Tutorial. (n.d.). Retrieved from https://www.w3schools.com:
https://www.w3schools.com/html/html_intro.asp

54 | P a g e
Chapter # 4 Javascript

Chapter. No. 04
JAVASCRIPT
4.1 Introduction to Javascript
4.2 Hiding and Showing Elements
4.3 Styling Elements
4.4 Using Jquery
4.5 Jquery Selectors
4.6 Validating Forms
4.1 What is JavScript?
JavaScript is a lightweight, interpreted programming language. It is designed
for creating network-centric applications. It is complimentary to and
integrated with Java. JavaScript is very easy to implement because it is
integrated with HTML. It is open and cross-platform.

 JavaScript is the Programming Language for the Web.


 JavaScript can update and change both HTML and CSS.
 JavaScript can calculate, manipulate and validate data.
What can JavaScript Do?

1. JavaScript Can Change HTML Content


2. JavaScript Can Change HTML Attribute Values
3. JavaScript Can Change HTML Styles (CSS)
4. JavaScript Can Hide HTML Elements
5. JavaScript Can Show HTML Elements

Hello World using JavaScript:


Just to give you a little excitement about JavaScript programming, I'm going
to give you a small conventional JavaScript Hello World program, You can try
it using Demo link

<html>
<body>
<script language = "javascript" type = "text/javascript">
55 | P a g e
Chapter # 4 Javascript

<!--
document.write("Hello World!")
//-->
</script>
</body>
</html>
4.1.1 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":
Example

document.getElementById("demo").innerHTML = "Hello JavaScript";


4.1.2 JavaScript Can Hide HTML Elements

Hiding HTML elements can be done by changing the display style:


Example

document.getElementById("demo").style.display="none";
or
document.getElementById('demo').style.display='none';
4.1.3 JavaScript Can Show HTML Elements
Showing hidden HTML elements can also be done by changing the display style

Example:

document.getElementById("demo").style.display="block";
or
document.getElementById('demo').style.display='block';
4.1.4 JavaScript Can Change HTML Styles (CSS)
Changing the style of an HTML element, is a variant of changing an HTML attribute:

Example:

56 | P a g e
Chapter # 4 Javascript

document.getElementById("demo").style.fontSize="35px";
or
document.getElementById('demo').style.fontSize='35px';
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)
Example:

Function myFunction(p1,p2){
return p1 * p2; // The function returns the product of p1andp2
}

4.3 Styling Elements

The HTML DOM allows JavaScript to change the style of HTML elements.

To change the style of an HTML element, use this syntax:


document.getElementById(id).style.property = new style
The following example changes the style of a <p> element:
<html>
<body>

<p id="p2">Hello World!</p>

<script>
document.getElementById("p2").style.color = "blue";
</script>

</body>
</html>
Using Events

The HTML DOM allows you to execute code when an event occurs. Events
are generated by the browser when "things happen" to HTML elements:

57 | P a g e
Chapter # 4 Javascript

 An element is clicked on
 The page has loaded
 Input fields are changed

This example changes the style of the HTML element with id="id1", when the
user clicks a button

Example:

<!DOCTYPE html>
<html>
<body>

<h1 id="id1">My Heading 1</h1>

<button type="button"
onclick="document.getElementById('id1').style.color = 'red'">
Click Me!</button>

</body>
</html>

Figure 5: Styling Elements

58 | P a g e
Chapter # 4 Javascript

4.4 Using 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 DOM manipulation.
The jQuery library contains the following features:
 HTML/DOM manipulation
 CSS manipulation
 HTML event methods
 Effects and animations
 AJAX
 Utilities
4.4.1 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".
4.4.2 jQuery Hide and Show

With jQuery, you can hide and show HTML elements with the hide() and
show() methods:

$("#hide").click(function(){
$("p").hide();
});
59 | P a g e
Chapter # 4 Javascript

$("#show").click(function(){
$("p").show();
});

4.5 jQuery Selectors


jQuery selectors are one of the most important parts of the jQuery library.
jQuery selectors allow you to select and manipulate HTML element(s).jQuery
selectors are used to "find" (or select) HTML elements based on their name,
id, classes, types, attributes, values of attributes and much more. It's based
on the existing CSS Selectors, and in addition, it has some own custom
selectors. All selectors in jQuery start with the dollar sign and parentheses:
$().

4.5.1 The element Selector


The jQuery element selector selects elements based on the element name.

You can select all <p> elements on a page like this:


$("p")
Example
When a user clicks on a button, all <p> elements will be hidden:

$(document).ready(function(){
$("button").click(function(){
$("p").hide();
});
}):

4.5.2 The #id Selector


The jQuery #id selector uses the id attribute of an HTML tag to find the
specific element.

An id should be unique within a page, so you should use the #id selector
when you want to find a single, unique element. To find an element with a
specific id, write a hash character, followed by the id of the HTML element:

60 | P a g e
Chapter # 4 Javascript

$("#test")

Example
When a user clicks on a button, the element with id="test" will be hidden:

$(document).ready(function(){
$("button").click(function(){
$("#test").hide();
});
});

4.5.3 The .class Selector


The jQuery .class selector finds elements with a specific class.
To find elements with a specific class, write a period character, followed by the
name of the class:
$(".test")

Example
When a user clicks on a button, the elements with class="test" will be
hidden:

$(document).ready(function(){
$("button").click(function(){
$(".test").hide();
});
});

4.6 Apply validation on HTML form


Forms are used in webpages for the user to enter their required details that
are further send it to the server for processing. A form is also known as web
form or HTML form

<html>

<body>

61 | P a g e
Chapter # 4 Javascript

<h2>JavaScript Validation</h2>

<p>Please input a number between 1 and 10: </p>

<input id="numb">

<button type="button" onclick="myFunction()">Submit</button>

<p id="demo"></p>

<script>

functionmyFunction() {

// Get the value of the input field with id="numb"

let x = document.getElementById("numb").value;

// If x is Not a Number or less than one or greater than 10


let text;

if (isNaN(x) || x < 1 || x > 10)


{
text = "Input not valid";
}
else {
text = "Input OK";
}
document.getElementById("demo").innerHTML = text;
}
</script>

</body>
</html>

62 | P a g e
Chapter # 4 Javascript

EXERCISE
PART I: SHORT QUESTIONS
1. What is JavaScript?
2. What can JavaScript Do?
3. Write aexample of Hide HTML Element through javaScript?
4. Explain JavaScript Functions?
5. Write the syntax of JavaScript Functions.
6. Define jQuery Selector?
7. Define the #id Selector?
8. Define the .class Selector?
9. Write any two Examples of jQuery Selectors with Description?
10. Explain jQuery Hide and Show?
11. How to create sliding effects on HTML elements with jQuery?

PART II: LONG QUESTIONS


1- What is JavaScript? Give the example of simple JavaScript Hello
World program .
2- Give detail description of Styling Elements in javaScript. Also Add the
Examples
3- Write a note on jqQuery selectors.
4- Write the code to apply validation on HTML form using javaScript

63 | P a g e
Chapter # 4 Javascript

MULTIPLE CHOICE QUESTIONS


1. JavaScript is designed for creating
a) network-centric applications
b) client-centric applications
c) server-centric applications
d) none
2. can calculate, manipulate and validate data
a) JavaScript
b) JSp
c) server
d) None
3. HTML Elements Can be Hide and show through
a) JavaScript
b) JSp
c) server
d) None
4. Which of the following method syntax is correct
a) getElementsById()
b) getElementById()
c) gotElementByid()
d) All of Above
5. jQuery is a library
a ) JavaScript
b) HTML
c) CSS
d) None
6. jQuerywrapsmany lines of JavaScript code called
a) veriable
b) Constructer
c) Method
d) All of Above
7. Which of the following correct jQuery syntax
a) _(selector).action
b) ()$(selector).action()
c)@(selector).action()
d) None

64 | P a g e
Chapter # 4 Javascript

8. $(".test").hide() will hide


a) the current element.
b) all elements with class="test”
c) Both
d)None
9. Selectors in start with the dollar sign and parentheses: $().
a) JavaScript
b) HTML
c) CSS
d) jQuery
10.Selector uses to find the specific element.
a) .class
b) $ id p
c)#id selector
d)None

11.Selector uses to find the specific elements


a) .class selector
b) $ id p
c) #id selector
d)None
12.Selects the current HTML element
a) $(.this)
b) $(current)
c) $(this)
d) All of Above

Answers

1 2 3 4 5 6 7 8 9 10

A A A B A C B B D C

11 12

A C

65 | P a g e
Chapter # 4 Javascript

REFRENCES
1. https://www.tutorialspoint.com/javascript/index.html
2. https://www.w3schools.com/jquery/jquery_syntax.asp

66 | P a g e

You might also like

pFad - Phonifier reborn

Pfad - The Proxy pFad of © 2024 Garber Painting. All rights reserved.

Note: This service is not intended for secure transactions such as banking, social media, email, or purchasing. Use at your own risk. We assume no liability whatsoever for broken pages.


Alternative Proxies:

Alternative Proxy

pFad Proxy

pFad v3 Proxy

pFad v4 Proxy