Scribd
Upload
21 views

Introduction of HTML/CSS/JS: Ruchi Agarwal Software Consultant Knoldus Software

HTML is a markup language used to define the structure and layout of web pages. CSS is used to style and lay out HTML elements, and JavaScript can be used to program behaviors and interactions in web pages. jQuery is a JavaScript library that simplifies HTML document traversal and manipulation, as well as event handling, animations, and Ajax interactions for rapid web development.

Uploaded by

james russell west brook
Copyright
© © All Rights Reserved
Available Formats
Download as PDF, TXT or read online on Scribd
21 views

Introduction of HTML/CSS/JS: Ruchi Agarwal Software Consultant Knoldus Software

HTML is a markup language used to define the structure and layout of web pages. CSS is used to style and lay out HTML elements, and JavaScript can be used to program behaviors and interactions in web pages. jQuery is a JavaScript library that simplifies HTML document traversal and manipulation, as well as event handling, animations, and Ajax interactions for rapid web development.

Uploaded by

james russell west brook
Copyright
© © All Rights Reserved
Available Formats
Download as PDF, TXT or read online on Scribd
You are on page 1/ 36

Introduction of HTML/CSS/JS

Ruchi Agarwal
Software Consultant
Knoldus Software
What is HTML?

● HTML is a language for describing web pages.


● HTML stands for Hyper Text Markup Language
● HTML is a markup language
● A markup language is a set of markup tags
● The tags describe document content
● HTML documents contain HTML tags and plain text
● HTML documents are also called web pages
HTML Tags

● HTML markup tags are usually called HTML tags


● HTML tags are keywords (tag names) surrounded by angle brackets like <html>
● HTML tags normally come in pairs like <b> and </b>
● The first tag in a pair is the start tag, the second tag is the end tag
● The end tag is written like the start tag, with a forward slash before the tag name
● Start and end tags are also called opening tags and closing tags

<tagname>content</tagname>
Basic HTML page structure
Example
What is CSS?

● CSS stands for Cascading Style Sheets


● Styles define how to display HTML elements
● Styles were added to HTML 4.0 to solve a problem
● External Style Sheets can save a lot of work
● External Style Sheets are stored in CSS files
● A CSS (cascading style sheet) file allows to separate web sites HTML content from it’s
style.
How to use CSS?
There are three ways of inserting a style sheet:
External Style Sheet:
An external style sheet is ideal when the style is applied to many pages.
<head>
<link rel="stylesheet" type="text/css" href="mystyle.css">
</head>

Internal Style Sheet:


An internal style sheet should be used when a single document has a unique style.
<head>
<style>
p {margin-left:20px;}
body {background-image:url("images/back40.gif");}
</style>
</head>
Inline Styles:
To use inline styles use the style attribute in the relevant tag. The style attribute can
contain any CSS property.

<p style="color:#fafafa;margin-left:20px">This is a paragraph.</p>

Multiple Styles Will Cascade into One:


Cascading order

● Inline style (inside an HTML element)


● Internal style sheet (in the head section)
● External style sheet
● Browser default
CSS Syntax

A CSS rule has two main parts: a selector, and one or more declarations:

Combining Selectors

h1, h2, h3, h4, h5, h6 {


color: #009900;
font-family: Georgia, sans-serif;
}
The id Selector
The id selector is used to specify a style for a single, unique element.
The id selector uses the id attribute of the HTML element, and is defined with a "#".

Syntax
#selector-id { property : value ; }

The class Selector


The class selector is used to specify a style for a group of elements.
The class selector uses the HTML class attribute, and is defined with a "."

Syntax
.selector-class { property : value ; }
CSS Anchors, Links and Pseudo Classes:

Below are the various ways you can use CSS to style links.

a:link {color: #009900;}


a:visited {color: #999999;}
a:hover {color: #333333;}
a:focus {color: #333333;}
a:active {color: #009900;}
The CSS Box Model
● All HTML elements can be considered as boxes. In CSS, the term "box model" is used when
talking about design and layout.

● The CSS box model is essentially a box that wraps around HTML elements, and it consists of:
margins, borders, padding, and the actual content.

● The box model allows to place a border around elements and space elements in relation to
other elements.
Example

#signup-form { #signup-form .fieldgroup input, #signup-form


background-color: #F8FDEF; .fieldgroup textarea, #signup-form
border: 1px solid #DFDCDC; .fieldgroup select {
border-radius: 15px 15px 15px 15px; float: right;
display: inline-block; margin: 10px 0;
margin-bottom: 30px; height: 25px;
margin-left: 20px; }
margin-top: 10px;
padding: 25px 50px 10px; #signup-form .submit {
width: 350px; padding: 10px;
} width: 220px;
height: 40px !important;
#signup-form .fieldgroup { }
display: inline-block;
padding: 8px 10px; #signup-form .fieldgroup label.error {
width: 340px; color: #FB3A3A;
} display: inline-block;
margin: 4px 0 5px 125px;
#signup-form .fieldgroup label { padding: 0;
float: left; text-align: left;
padding: 15px 0 0; width: 220px;
text-align: right; }
width: 110px;
}
What is JavaScript

● JavaScript is a Scripting Language


● A scripting language is a lightweight programming language.
● JavaScript is programming code that can be inserted into HTML pages.
● JavaScript inserted into HTML pages, can be executed by all modern web browsers.
How to use JavaScript?

The <script> Tag


To insert a JavaScript into an HTML page, use the <script> tag.
The <script> and </script> tells where the JavaScript starts and ends.
<script>
alert("My First JavaScript");
</script>

JavaScript in <body>
<html>
<body>
<script>
document.write("<h1>This is a heading</h1>");
</script>
</body>
</html>
External JavaScripts
Scripts can also be placed in external files. External files often contain code to be used by
several different web pages.
External JavaScript files have the file extension .js.
To use an external script, point to the .js file in the "src" attribute of the <script> tag:

<html>
<body>
<script src="myScript.js"></script>
</body>
</html>
The HTML DOM (Document Object Model)

When a web page is loaded, the browser creates a Document Object Model of the page.
The HTML DOM model is constructed as a tree of Objects:
Finding HTML Elements by Id

document.getElementById("<id-name>");

Finding HTML Elements by Tag Name

document.getElementsByTagName("<tag>");

Finding HTML Elements by Name

document.getElementsByName(“<name-attr>”)

Finding HTML Elements by Class

document.getElementByClass(“<class-name>”)
Writing Into HTML Output

document.write("<h1>This is a heading</h1>");
document.write("<p>This is a paragraph</p>");

Reacting to Events

<button type="button" onclick="alert('Welcome!')">Click Me!</button>

Changing HTML Content


Using JavaScript to manipulate the content of HTML elements is a very powerful functionality.

x=document.getElementById("demo") //Find the element


x.innerHTML="Hello JavaScript"; //Change the content
Changing HTML Styles
Changing the style of an HTML element, is a variant of changing an HTML attribute.

x=document.getElementById("demo") //Find the element


x.style.color="#ff0000"; //Change the style

Validate Input
JavaScript is commonly used to validate input.

if isNaN(x) {alert("Not Numeric")};


Example

function validateForm()
{
var nameValue=document.getElementById('name');
verifyName(nameValue);
var emailValue=document.getElementById('email');
verifyEmail(emailValue);
var password=document.getElementById('password');
verifyPassword(password,8,12);
}

function verifyName(uname)
{

var letters = /^[A-Za-z]+$/;


if(uname.value.match(letters))
{
return true;
}
else
{
alert('Invalid name');
return false;
}
}
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 requires many lines of JavaScript code to
accomplish, and wraps it 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.

Features:
● HTML/DOM manipulation
● CSS manipulation
● HTML event methods
● Effects and animations
● AJAX
jQuery Syntax
Basic syntax:
$(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)

Example:
$("p").hide() - hides all <p> elements.
How to use Jquery:
<head>
<script src="//ajax.googleapis.com/ajax/libs/jquery/1.8.3/jquery.min.js"></script>
</head>
jQuery Selectors:
jQuery selectors allow you to select and manipulate HTML element(s).

The element , id and class Selector


The jQuery element selector selects elements based on their tag names.
$("<tag-name>") //element selector
$("#<id-name>") // id selector
$(".<class-name>") // class selector
Example
$(document).ready(function(){
$("button").click(function(){
$("p").hide();
$("#test").hide(); //#id selector
$(".test").hide(); //.class selector
});
});
Example
jQuery Event

All the different visitors actions that a web page can respond to are called events.
An event represents the precise moment when something happens.

Mouse Events Keyboard Events Form Events Document/Window Events

click keypress submit load


dblclick keydown change resize
mouseenter keyup focus scroll

mouseleave blur unload

Example: $("p").click(function(){
// action goes here!!
});
JQuery Effects:

JQuery hide(), show() and toggle() method

$(selector).hide(speed,callback);
$(selector).show(speed,callback);
$(selector).toggle(speed,callback);

jQuery fadeIn() , fadeOut() ,fadeToggle() and fadeTo() method

$(selector).fadeIn(speed,callback);
$(selector).fadeOut(speed,callback);
$(selector).fadeToggle(speed,callback);
$(selector).fadeTo(speed,callback);
jQuery Sliding Methods

$(selector).slideDown(speed,callback);
$(selector).slideUp(speed,callback);
$(selector).slideToggle(speed,callback);

jQuery Animations - The animate() Method

$(selector).animate({params},speed,callback);

jQuery stop() Method

$(selector).stop(stopAll,goToEnd);
jQuery Method Chaining

$(selector).css("color","red").slideUp(2000).slideDown(2000);

jQuery - Get Content and Attributes

$(selector).click(function(){
alert("Text: " + $(selector).text());
alert("HTML: " + $(selector).html());
alert("Value: " + $(input-selector).val());
alert($(link-selector).attr("href"));
});
jQuery - Set Content and Attributes

$(selector).click(function(){
$(selector).text("Hello world!");
$(selector).html("<b>Hello world!</b>");
$(input-selector).val("Dolly Duck");
$(link-selector).attr("href","http://www.google.com”);
});

jQuery - Add Elements

$(selector).append("Some appended text.");


$(selector).prepend("Some prepended text.");
jQuery - Remove Elements
$("#<id-name>").remove();

jQuery Manipulating CSS


addClass() - Adds one or more classes to the selected elements
$("<tag-name>").addClass("<class-name>");

removeClass() - Removes one or more classes from the selected elements


$("<tag-name>").removeClass("<class-name>");

toggleClass() - Toggles between adding/removing classes from the selected elements


$("<tag-name>").toggleClass("<class-name>");

css() - Sets or returns the style attribute


$("<tag-name>").css("background-color","yellow");
jQuery Dimension Methods
jQuery - AJAX

AJAX = Asynchronous JavaScript and XML.


In short; AJAX is about loading data in the background and display it on the webpage,
without reloading the whole page.

jQuery load() Method


● The jQuery load() method is a simple, but powerful AJAX method.
● The load() method loads data from a server and puts the returned data into the
selected element.

Syntax:
$(selector).load(URL,data,callback);
Example

ajax load()

$("#success").load("htmlForm.html", function(response, status, xhr) {


if (status == "error") {
var msg = "Sorry but there was an error: ";
$("#error").html(msg + xhr.status + " " + xhr.statusText);
}
});

$.ajax()
$.ajax({
url: filename,
type: 'GET',
dataType: 'html',
beforeSend: function() {
$('.contentarea').html('<img src="images/loading.gif" />');
},
success: function(data, textStatus, xhr) {
$('.contentarea').html(data);
},
error: function(xhr, textStatus, errorThrown) {
$('.contentarea').html(textStatus);
}
});
jQuery - AJAX get() and post() Methods

Two commonly used methods for a request-response between a client and server are:
GET and POST.

GET is basically used for just getting (retrieving) some data from the server.
The GET method may return cached data.

POST can also be used to get some data from the server. However, the POST
method NEVER caches data, and is often used to send data along with the request.

Syntax:
$.get(URL,callback);
$.post(URL,data,callback);

You might also like