Scribd
Upload
41 views

HTML and Javascript Notes

Uploaded by

Abhimeethu18
Copyright
© © All Rights Reserved
Available Formats
Download as PDF, TXT or read online on Scribd
41 views

HTML and Javascript Notes

Uploaded by

Abhimeethu18
Copyright
© © All Rights Reserved
Available Formats
Download as PDF, TXT or read online on Scribd
You are on page 1/ 7

SILVERLINE PRESTIGE SCHOOL

SUBJECT: COMPUTER
CLASS: 8
SESSION - 2024-25
HTML,CSS & JAVASCRIPT NOTES

HTML stands for Hypertext Markup Language. It is a language used to create and format a web page
document.

Tags-
Whatever we put between the angular brackets <--------> is called a tag.

BEGINNING OF HTML PROGRAMMING:

Tags Description

<html>____</html> This is the first tag with which every single web page starts

<head>____</head> This tag allows us to include external files on our website and create a
heading for our title bar.

<title>____</title> This tag creates a heading that will appear at the title bar of the browser.

<body> _______ This is the main tag inside which all our HTML code will reside.
</body>

<h1>____ </h1> This tag allows us to create headings with different font sizes.
<h6>_____ </h6>

<hr> Creates a horizontal tag

div
The div tag is used in HTML to make divisions of content in the web page
images, header, footer, navigation bar, etc).Example -

<div class="myDiv">
<h2>This is a heading in a div element</h2>
<p>This is some text in a div element.</p>
</div>

center refers to the alignment of content in the middle of a container, whether it's
text, images, or other elements.

align is used to adjust the horizontal positioning of content within its containing
element. It specifies whether the content should be left-aligned,
right-aligned, centered, or justified.
height refers to the vertical dimension of an element, such as an image, a
container, or a table row.

width is the horizontal dimension of an element, similar to height but determining


how wide the element is.

a is used in HTML to create hyperlinks. It allows you to link to other web


pages, documents, or resources on the internet.

Bgcolor refers to the background color of an HTML element, such as a container, a


table cell, or the entire webpage. It's used to set the color that appears
behind the content of the element, enhancing its visual appearance.

<img> The <img> tag is used to embed an image in an HTML page.The <img>
tag has two required attributes:

● src - Specifies the path to the image


● alt - Specifies an alternate text for the image, if the image for some
reason cannot be displayed

Example-

<img src="img_girl.jpg" alt="Girl in a jacket" width="500" height="600">

<form> An HTML form is used to collect user input. The user input is most often
sent to a server for processing.

<input type="text"> Displays a single-line text input field

<input type="radio"> Displays a radio button (for selecting one of many choices), it comes up in
circle shape

<input Displays a Checkbox (for selecting many choices at a time), it comes up in


type="Checkbox"> square shape

<textarea> The <textarea> element defines a multi-line input field (a text area):

<select> The <select> element defines a drop-down list:

<button> The <button> element defines a clickable button:

<label> The <label> tag defines a label for many form elements.
The <label> element is useful for screen-reader users, because the
screen-reader will read out loud the label when the user focuses on the
input element.

Padding Padding Represents the amount of inner space an element has

Class Class is an attribute in HTML used to apply CSS to a specific set of content
Class attribute Class is an HTML attribute used to identify any HTML element (div,
headings, paragraphs, etc) on a webpage. Classes are useful when the
same HTML elements appear several times on a webpage.

Bootstrap It is a framework that includes various HTML and CSS-based design


templates for typography, forms, tables, navigation, layouts, etc.

Font element Font element is used to change the size, font style and color of the text in
the web page. This is a container element.

Font Size Font size attribute is used to set the size of the text. By default the font size
of the text is 3. We can change the font size according to our requirement
and choice.

FONT FACE Font Face is used to give the type of font like Arial, Lucida etc. face
attribute is browser dependent as some face may not work on any browser
in that case browser uses its default face.

FONT COLOR The font color attribute is used to give the color to the text. By default the
font color is black.
<FONT COLOR=”green”>

; (semicolon) a separator between two properties.

What is CSS : Cascading Style Sheet or CSS is a style sheet language used to design and layout a web
page. CSS lets us modify colors, fonts, text sizes, apply animations, effects and more. CSS files have the
extension .css .
Using CSS on a webpage

Syntax:
<start tag style =”property: value”> content </end tag>
Properties in the style attribute are color, background-color, font-size etc.
Value sets the property. For example, color attributes can have values like red, blue, green etc.
Colon (:)sets the value for an attribute.
Semi-colon (;) is used as a separator between two properties.
Example:
<P style=”background-color:red”> This is an Introduction to CSS! </p>
This is an Introduction to CSS! ←—OUTPUT

Class selector: The class selector selects elements with a specific class attribute. It matches all the HTML
elements based on the contents of their class attribute. The . symbol, along with the class name, is used
to select the desired class.

ID selector : The ID selector matches an element based on the value of its id attribute. In order for the
element to be selected, its ID attribute must exactly match the value given in the selector. The # symbol
and the id of the HTML element name are used to select the desired element.

Internal CSS : All the CSS code is added at a single place inside the <head> tag.
A special element <style></style> is added with CSS instructions written inside the <style> tags.
The <style> tag is used to define style information (CSS) for a document.
Syntax - <style>

h1 {color:red;}

p {color:blue;}

</style>

External CSS : This is the last and the most commonly used method to apply CSS. We create a separate file
for all the CSS code. The file extension is .css
Syntax-

<!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>

‘Box-shadow’ to give the container a shadow effect.


▪ h-offset — The horizontal offset of a shadow. A positive value puts the shadow on the right side of the box,
and a negative value puts the shadow on the left side of the box.
▪ v-offset — The vertical offset of a shadow. A positive value puts the shadow below the box, and a
negative value puts the shadow above the box.
▪ Blur — Sets the blur value of the shadow
▪ Spread — Sets the spread size of the shadow with positive or negative values.
▪ Color — Sets the shadow color.

Semantic Elements : A semantic element clearly describes its meaning to both the browser and the
developer.
Examples of non-semantic elements: <div> and <span> - Tells nothing about its content.
Examples of semantic elements: <form>, <table>, and <article> - Clearly defines its content.

JavaScript
▪ JavaScript is a scripting language used to write programs that run on browsers.
▪ JavaScript controls how a web page looks or responds when a user presses a key or moves the mouse.
▪ The suggestions we receive on Google, Amazon, or YouTube are coded using JavaScript.
To add functionality to the application, we need variables. For a program to use data,
we need ‘Variables’. ‘Variables’ are like containers that store data. ‘Data’ refers to the information on which a
computer program operates.
For example, names, ages, and employees in an organization are all data. To declare a variable in JS, we
use the keyword ‘var’.
To assign value to a variable, we use the assignment operator (=).
Syntax:
var <variable name> = value;

Arrays in JavaScript:
When multiple values are interrelated, we can use arrays.
Create an Array To create an array, we use square brackets [ ].
The items inside an array are separated using commas. We can store as many elements as we want in an
array.
Syntax: var = [‘Item1’, ’Item2’, ‘Item 3’] For example, the following is an array, storing a list of
programming names. var Program_names = [ ‘JavaScript’, ’PHP’, ’HTML’, ’CSS’];
▪ ’Program_names’ is the name of the array.
▪ The items inside the square bracket are the ‘array’ items.

Document.write( ): is a predefined function in java script that displays content on the browser.

Defining functions in an application


A function is a block of code that performs a specific task. Functions are a way to bundle code and reuse
it. Functions allow us to run the same piece of code from multiple places in a program without having to
copy and paste it repeatedly. Splitting an entire program into smaller blocks of code makes the program
structured and manageable.
Creating functions in JavaScript
▪ The keyword function is used to define a function. It is followed by the name of the function.
▪ Code in a function is written between curly brackets.
Syntax – function function_name {
JavaScript Code
}
Calling a function
To run code inside a function (the function body), we need to call the function. To do this, we enter the
function name followed by a pair of opening and closing
parentheses.
Syntax – function_name()
Alert () function - is a predefined function in java script, It creates a pop up window with the contents we
have added in the alert function.
Window.Location.Hash: The window. location. hash returns a string that contains a # along with the
fragment identifier of the URL. The fragment identifier of the URL starts with a # followed by an identifier that
uniquely identifies a section in an HTML document.
DATABASE:
A database is an organized collection of structured information, or data, typically stored electronically in a
computer system

OBJECT IN DATABASE :
● An object is a collection of properties, and a property is an association between a name (or
key) and a value.
● An object is a storage container.
Document Object Model (DOM) in JavaScript. JavaScript’s main purpose is to dynamically access and
manipulate HTML elements. For example, clicking a button, hovering over an item, scrolling, etc. DOM is
what allows us to do this. When we load an HTML document onto a browser, the browser converts the
elements into a tree-like structure.
document.getElementsById() - is used to access an HTML element based on its ID.
Logical Operator (AND (&&)) Before defining the else block, understand the use of the Logical
operator. Logical Operators are used when we want to combine 2 or more Boolean expressions and
produce a single Boolean output. Expressions that produce either a TRUE or FALSE value are known
as Boolean Expressions.

T T T

T F F

F T F

F F F

Flex : The flex property sets or returns the length of the item, relative to the rest of the flexible items
inside the same container.
Conditional Statements -
For loop : A "For" Loop is used to repeat a specific block of code a known number of times.
IF Statement : It executes one piece of code if something is true and another piece if it is false.
Syntax
If ( condition )
Take action 1
Else:
Take action 2
= : It helps to assign a value to a variable
== : It use to compare the value of two variables
parseInt() : It is used to convert the value into integer format.
Ecommerce: it is the online selling and buying of goods and services.Example - Amazon,flipkart etc.
Navigation Bar(nav bar) : its a horizontal bar that appears at the top of a website and contains links to
various sections on the website/webpage.
Flexbox : It's a CSS technique that offers an efficient way to lay out and align items without a
container. Layout is automatically adjusted according to the screen type.
Best Seller: A product which sells in a very large quantity.It could be a highest selling product on the
website.
Google Map: It's a web based service that provides detailed information about geographical regions
and sites around the world.

You might also like