Professional Documents
Culture Documents
IWT-IG@so Shubh
IWT-IG@so Shubh
Elements
HTML elements are the basic building blocks of web pages. They define the structure and content
of the page.
<header>
<h1>Welcome to my website!</h1>
<nav>
<ul>
<li><a href="#about">About</a></li>
<li><a href="#services">Services</a></li>
<li><a href="#contact">Contact</a></li>
</ul>
</nav>
</header>
Attributes
HTML attributes provide additional information about an HTML element, such as its source or
alternate text.
<img src="example.jpg" alt="An example image" width="400" height="300" style="border: 1px solid black;">
Headings
HTML headings are used to define the structure of a web page and to provide visual hierarchy.
There are six levels of headings, from h1 (most important) to h6 (least important)
Paragraphs
Paragraphs are used to group together a block of text.
Text formatting
Text formatting: HTML provides a variety of tags to format text, including bold, italic, and underlined
text.
Links
Links are used to connect webpages and create a navigation structure.
Images
Tables
<table> : The <table> tag is used to define the table itself.
<caption> : The <caption> tag is used to provide a title or caption for the table. It is placed
immediately after the <table> tag.
<thead> , <tbody> , and <tfoot> : These tags are used to divide the table into three sections: the
header, body, and footer. The <thead> tag is used to define the header section of the table,
which typically contains column headings. The <tbody> tag is used to define the body section
of the table, which contains the main content. The <tfoot> tag is used to define the footer
section of the table, which can contain summary information or additional notes.
<td> : The <td> tag is used to define a standard cell in a table. Standard cells contain the main
<table>
<tr>
<th>Name</th>
<th>Age</th>
<th>Occupation</th>
</tr>
<tr>
<td>John Smith</td>
<td>35</td>
<td>Software Developer</td>
</tr>
<tr>
<td>Jane Doe</td>
<td>28</td>
<td>Graphic Designer</td>
</tr>
</table>
Lists
Lists are used to group items together. HTML provides two types of lists: ordered and unordered.
<ul>
<li>Item 1</li>
<li>Item 2</li>
<li>Item 3</li>
</ul>
<ol>
<li>First item</li>
<li>Second item</li>
<li>Third item</li>
</ol>
<div>
This is a block-level element.
</div>
A inline element only takes up as much width as necessary and does not start on a new line.
Some common examples of inline elements are <a> , <img> , <span> , <input> , and <strong>
/* External stylesheet */
<link rel="stylesheet" type="text/css" href="styles.css">
/* Inline styles */
<div style="color: blue;">This text is blue.</div>
/* Embedded styles */
<style>
p {
font-size: 18px;
}
</style>
Selectors
Selectors are used to target specific HTML elements and apply styles to them. There are several
types of selectors in CSS, including element selectors, class selectors, ID selectors, and more.
/* Element selector */
p {
color: red;
}
/* Class selector */
.special {
font-weight: bold;
}
/* ID selector */
#main-heading {
font-size: 36px;
}
Backgrounds
The background property in CSS is used to apply one or more background styles to an HTML
element. It is a shorthand property that allows you to set several individual background properties
at once, such as background-color , background-image , and background-size .
Here are some of the most commonly used background properties in CSS:
1. background-color : Sets the background color of an element. You can specify a color value using
a keyword, RGB or HSL values, or hexadecimal notation. For example:
2. background-image : Sets the background image of an element. You can specify the image using a
URL, like so:
div {
background-image: url('background.jpg');
}
3. background-size : Sets the size of the background image. You can specify the size using a
keyword like cover , contain , or auto , or you can use values like 50% or 100px .
div {
background-image: url('background.jpg');
background-size: cover;
}
4. background-repeat : Determines whether the background image is repeated or not. You can set
this property to repeat , repeat-x , repeat-y , or no-repeat .
div {
background-image: url('background.jpg');
background-repeat: no-repeat;
}
5. background-position : Sets the position of the background image. You can specify the position
using keywords like left , right , center , or top , or you can use values like 50% 50% or 10px
20px .
div {
background-image: url('background.jpg');
background-position: center;
}
6. background-attachment : Determines whether the background image is fixed or scrolls with the
rest of the page. You can set this property to fixed or scroll .
div {
background-image: url('background.jpg');
background-attachment: fixed;
}
2. font-family : Sets the font family used to display the text. You can specify a font family name or
a comma-separated list of font family names.
p {
font-family: "Helvetica Neue", Helvetica, Arial, sans-serif;
}
3. font-size : Sets the size of the text. You can specify the size using keywords like large , small ,
or medium , or you can use values like 12px or 2em .
p {
font-size: 16px;
}
4. font-weight : Sets the weight (or thickness) of the text. You can specify a value of bold , normal ,
lighter , or a numerical value between 100 and 900 .
p {
font-weight: bold;
}
5. text-align : Sets the alignment of the text within its container. You can use values like left ,
center , right , or justify .
p {
text-align: center;
}
6. text-decoration : Sets the decoration applied to the text. You can use values like underline ,
line-through , overline , or none .
p {
text-decoration: underline;
}
7. text-transform : Sets the capitalization of the text. You can use values like uppercase , lowercase ,
capitalize , or none .
p {
text-transform: uppercase;
}
1. Content : This is the actual content of the element, such as text or images. The size of the
content box is determined by the width and height properties.
div {
width: 200px;
height: 100px;
}
2. Padding : This is the space between the content and the border. You can set the padding using
the padding property, which can take up to four values (top, right, bottom, left). You can also
use the shorthand property, which applies the same padding value to all sides.
div {
padding: 20px;
/* or */
padding: 10px 20px 30px 40px; /* top, right, bottom, left */
}
3. Border: This is the line that surrounds the content and padding. You can set the border using
the border property, which can take up to three values (width, style, color). You can also use
the shorthand property, which applies all three values.
div {
border: 1px solid black;
/* or */
border-width: 2px;
border-style: dashed;
border-color: red;
}
4. Margin: This is the space between the border and the adjacent elements. You can set the
margin using the margin property, which can take up to four values (top, right, bottom, left). You
can also use the shorthand property, which applies the same margin value to all sides.
div {
margin: 20px;
/* or */
margin: 10px 20px 30px 40px; /* top, right, bottom, left */
}
Border: You can add borders to table cells using the border property.
Padding and spacing: You can control the padding and spacing of table cells using the
padding and border-spacing properties.
2. Lists:
List style: You can change the style of list bullets using the list-style-type property.
List images: You can use images as list bullets using the list-style-image property.
Nested lists: You can use CSS to style nested lists by targeting the appropriate list
element.
Display
1. block : This value makes an element a block-level element, meaning that it takes up the full
width of its parent element and starts on a new line. Block-level elements include headings,
paragraphs, and divs.
2. inline : This value makes an element an inline-level element, meaning that it doesn't start on a
new line and only takes up as much width as necessary. Inline-level elements include spans
and links.
4. none : This value hides the element completely, and it won't take up any space on the web
page.
The display property can also take other values, such as table , flex , and grid , which are used
for creating specific layout structures.
Inline-block.
In CSS, the display property is used to define how an HTML element should be displayed. The
inline-block value of the display property creates a block-level element that flows with
surrounding text like an inline element, but it also has its own dimensions and box model (padding,
margin, border) like a block-level element.
For example, let's say you want to create a box with a background color that contains a heading
and some text, but you want the box to be centered on the page and have a specific width. You can
achieve this by using the inline-block value for the display property.
<div class="box">
<h2>Box Title</h2>
.box {
display: inline-block;
width: 400px;
background-color: #f2f2f2;
padding: 20px;
border: 1px solid #ddd;
border-radius: 5px;
text-align: center;
}
h2 {
color: #333;
}
p {
color: #666;
}
JavaScript
SYLLABUS : Connecting HTML and JavaScript, Comments, Literals, Data types, values and
variables, Expressions and operators, Statements – conditionals, loops, break, continue,
try/catch/finally/throw, with, Functions – declaration, invocation, arguments and parameters, variable
arguments, rest parameters, optional parameters and default values, functions as values, Arrays –
creating arrays, reading and writing array elements, sparse array, array length, adding and deleting
array elements, iterating array, multidimensional array, array methods, Strings
<!DOCTYPE html>
<html>
<head>
<title>My Website</title>
</head>
<body>
<h1>Welcome to my website</h1>
<p>Click the button below to change the text.</p>
<button onclick="document.getElementById('text').innerHTML = 'Hello, world!';">Click me</button>
<p id="text">This is some text.</p>
<script>
// JavaScript code goes here
</script>
</body>
</html>
<!DOCTYPE html>
<html>
<head>
<title>My Website</title>
<script src="myscript.js"></script>
</head>
<body>
<h1>Welcome to my website</h1>
Comments
// Single-line comments
/* Multi-line comments */
Literals
Literal is a value that appears directly in the source code of a program. It is a way of representing
data in a program's code, and is used to create and assign values to variables or as arguments to
functions.
1. String literals :
2. Numeric literals :
3. Boolean literals :
4. Array literals :
5. Object literals:
const person = {
name: 'Alice',
age: 30,
city: 'New York'};
2. String: represents textual data, such as names, messages, or other types of text.
let x;
console.log(x); // prints undefined
const id = Symbol('id');
const person = {
name: 'Alice',
age: 30,
city: 'New York'};
3. Function: a type of object used to represent code that can be called or executed.
let age = 30; // create a variable named "age" and assign it the value 30
const name = 'Alice'; // create a constant named "name" and assign it the value 'Alice'
var count = 0; // create a variable named "count" and assign it the value 0
if (true) {
var a = 1;
let b = 2;
const c = 3;
}
console.log(a); // prints 1
console.log(b); // ReferenceError: b is not defined
console.log(c); // ReferenceError: c is not defined
function example() {
var x = 1;
let y = 2;
const z = 3;
if (true) {
var x = 4; //was 1
let y = 5; //was 2
const z = 6; //was 3
console.log(x, y, z); // prints 4 5 6
}
console.log(x, y, z); // prints 4 2 3
}
example();
2. Comparison operators: used to compare values and return a Boolean value (true or false).
Examples include >, <, >=, <=, ==, !=, ===, and !==.
3. Logical operators: used to combine and manipulate Boolean values. Examples include &&
(logical AND), || (logical OR), and ! (logical NOT).
5. Conditional (ternary) operator: used to create a conditional expression in one line. It has the
form condition ? valueIfTrue : valueIfFalse.
let a = 5;
let b = "hello";
let c = true;
let d = undefined;
let e = null;
let f = [1, 2, 3];
let g = { name: "John", age: 30 };
console.log(typeof a); // "number"
console.log(typeof b); // "string"
console.log(typeof c); // "boolean"
console.log(typeof d); // "undefined"
console.log(typeof e); // "object"
console.log(typeof f); // "object"
console.log(typeof g); // "object"
class Car {
constructor(make, model, year) {
this.make = make;
this.model = model;
this.year = year; } }
Conditionals(if/else)
Loops(for/while)
Break
Continue
try/catch/finally/throw
try {
let x = y + 1;
} catch (e) {
console.log("An error occurred: " + e);
} finally {
console.log("This code will always run");
}
function divide(a, b) {
if (b === 0)
throw new Error "Cannot divide by zero";
return a / b;
}
try {
let result = divide(10, 0);
} catch (e) {
console.log(e);
}
with
The with statement is used to specify the default object to use for property lookups in a block of
code.
function greet(name) {
console.log("Hello " + name + "!"); }
Invocation
function add(a, b) {
return a + b; }
let result = add(2, 3);
Variable Arguments
JavaScript functions can accept any number of arguments, even if they are not defined in the
function declaration. The arguments object can be used to access these variable arguments
inside the function
function sum() {
let total = 0;
for (let i = 0; i < arguments.length; i++) {
console.log(arguments[i]+" ")
total += arguments[i]; }
return total; }
let result = sum(1, 2, 3, 4, 5); // Output: 15
Rest Parameters
ES6 introduced the concept of rest parameters, which allows you to define a function with a
variable number of parameters. These are denoted by three dots ... before the last parameter
in the function definition, and they create an array of all the remaining arguments passed to the
function.
function sum(...args) {
let total = 0;
for (let arg of args)
total += arg;
return total; }
let result = sum(1, 2, 3, 4, 5); // Output: 15
function multiply(a, b = 1, c = 1) {
return a * b * c;
}
multiply(2); // returns 2
multiply(2, 3); // returns 6
multiply(2, 3, 4); // returns 24
Functions as Values
function add(a, b) {
return a + b; }
function multiply(a, b) {
return a * b;}
function calculate(operation, a, b) {
return operation(a, b); }
Arrays – creating arrays, reading and writing array elements, sparse array,
array length, adding and deleting array elements, iterating array,
multidimensional array, array methods
Creating Arrays
numbers[2] = 10;
console.log(numbers); // output: [1, 2, 10, 4, 5]
Sparse Array
Array Length
fruits.pop();
console.log(fruits); // output: ['apple', 'banana', 'cherry']
fruits.shift();
console.log(fruits); // output: ['banana', 'cherry']
fruits.unshift('pear');
console.log(fruits); // output: ['pear', 'banana', 'cherry']
Multidimensional Array
Array Methods
let newArray = arr.slice(); // creates a new array with all the elements of arr
let newArray2 = arr.concat([6, 7, 8]); // creates a new array by joining arr with another array
Strings
let str = "The quick brown fox jumps over the lazy dog";
// Using the repeat method to repeat the string a certain number of times
console.log("Repeat the string three times:", str.repeat(3));
// Using the trim method to remove whitespace from the beginning and end of the string
console.log("Trimmed string:", str.trim());