Scribd
Upload
17 views

Moocs File

The document provides an introduction to HTML, CSS, and JavaScript, detailing their roles in web development. It covers the structure and syntax of HTML, the advantages and functionalities of CSS, and the capabilities of JavaScript in manipulating web content. Each section includes examples and explanations of key concepts, such as HTML tags, CSS properties, and JavaScript functions.

Uploaded by

aryan Bohra
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
17 views

Moocs File

The document provides an introduction to HTML, CSS, and JavaScript, detailing their roles in web development. It covers the structure and syntax of HTML, the advantages and functionalities of CSS, and the capabilities of JavaScript in manipulating web content. Each section includes examples and explanations of key concepts, such as HTML tags, CSS properties, and JavaScript functions.

Uploaded by

aryan Bohra
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/ 18

INTRODUCTION TO HTML , CSS & JAVASCRIPT

HTML :-
HTML stands for Hyper Text Markup Language, which is the most
widely used language on Web to develop web pages. HTML was created by
Berners-Lee in late 1991 but "HTML 2.0" was the first standard HTML
specification which was published in 1995. HTML 4.01 was a major version
of HTML and it was published in late 1999. Though HTML 4.01 version is
widely used but currently we are having HTML-5 version which is an
extension to HTML 4.01, and this version was published in 2012.
Basic HTML Document In its simplest form, following is an example of
an HTML document:

This is a heading
<!DOCTYPE html>
<html>
<head>
<title>Page Title</title>
</head>
<body>

<h1>My First Heading</h1>


<p>My first paragraph.</p>

</body>
</html>

HTML Tags
As told earlier, HTML is a markup language and makes use of various tags
to format the content. These tags are enclosed within angle braces . Except
few tags, most of the tags have their corresponding closing tags. For
example, has its closing tag
and
tag has its closing tag
tag etc. Above example of HTML document uses the following tags:
<!DOCTYPE html>
<html>
<body>

<h1>My First Heading</h1>


<p>My first paragraph.</p>

</body>
</html>
Heading Tags:
Any document starts with a heading. You can use different sizes for your
headings. HTML also has six levels of headings, which use the elements
<h1>,<h2> ,<h3>,<h4> , <h5>, and <h6>. While displaying any heading,
browser adds one line before and one line after that heading.
Paragraph Tag:
The tag offers a way to structure your text into different paragraphs. Each
paragraph of text should go in between an opening <p>and a closing </p>
tag as shown below in the example:
<!DOCTYPE html>
<html>
<body>

<h1>My First Heading</h1>

<p>My first paragraph.</p>

</body>
</html>

Centering Content :
You can use tag to put any content in the center of the page or any table
cell.
Horizontal Lines

Horizontal lines are used to visually break-up sections of a document. The

tag creates a line from the current position in the document to the right
margin and breaks the line accordingly.
Again tag is an example of the empty element, where you do not need
opening and closing tags, as there is nothing to go in between them. The

element has a space between the characters hr and the forward slash. If
you omit this space, older browsers will have trouble rendering the
horizontal line, while if you miss the forward slash character and just use

it is not valid in XHTML

HTML ELEMENTS:-
An HTML element is defined by a starting tag. If the element contains other
content, it ends with a closing tag, where the element name is preceded by
a forward slash as shown below with few tags.
here <p>….</p> is an HTML element, <h1>…..</h1>
is another HTML element. There are some HTML elements which don't
need to be closed, such as ,<img/> and <h1/> and </br> elements. These
are known as void elements. HTML documents consists of a tree of these
elements and they specify how HTML documents should be built, and what
kind of content should be placed in what part of an HTML document.
HTML ATTRIBUTES:-
We have seen few HTML tags and their usage like heading tags <h1>,<h2>
and paragraph tag <p>and other tags. We used them so far in their simplest
form, but most of the HTML tags can also have attributes, which are extra
bits of information.
An attribute is used to define the characteristics of an HTML element and is
placed inside the element's opening tag. All attributes are made up of two
parts: a name and a value:

• The name is the property you want to set. For example, the paragraph

element in the example carries an attribute whose name is align, which you
can use to indicate the alignment of paragraph on the page.

• The value is what you want the value of the property to be set and always
put within quotations. The below example shows three possible values of
align attribute: left, center and right.
The Id Attribute:-
The id attribute of an HTML tag can be used to uniquely identify any
element within an HTML page. There are two primary reasons that you
might want to use an id attribute on an element:

• If an element carries an id attribute as a unique identifier, it is possible to


identify just that element and its content.

• If you have two elements of the same name within a Web page (or style
sheet), you can use the id attribute to distinguish between elements that
have the same name.
The title Attribute :-
The title attribute gives a suggested title for the element. They syntax for the
title attribute is similar as explained for id attribute.

The class Attribute:-


The class attribute is used to associate an element with a style sheet, and
specifies the class of element. You will learn more about the use of the
class attribute when you will learn Cascading Style Sheet (CSS). So for now
you can avoid it.
CSS -OVERVIEW
What is CSS?
Cascading Style Sheets, fondly referred to as CSS, is a simple design
language intended to simplify the process of making web pages
presentable.

CSS handles the look and feel part of a web page. Using CSS, you can
control the color of the text, the style of fonts, the spacing between
paragraphs, how columns are sized and laid out, what background images
or colors are used, as well as a variety of other effects.
CSS is easy to learn and understand but it provides a powerful control over
the presentation of an HTML document. Most commonly, CSS is combined
with the markup languages HTML or XHTML.
Advantages of CSS

• CSS saves time - You can write CSS once and then reuse the same sheet
in multiple HTML pages. You can define a style for each HTML element and
apply it to as many web pages as you want.

• Pages load faster - If you are using CSS, you do not need to write HTML
tag attributes every time. Just write one CSS rule of a tag and apply it to all
the occurrences of that tag. So, less code means faster download times.

• Easy maintenance - To make a global change, simply change the style,


and all the elements in all the web pages will be updated automatically.

• Superior styles to HTML - CSS has a much wider array of attributes than
HTML, so you can give a far better look to your HTML page in comparison to
HTML attributes.

• Multiple Device Compatibility - Style sheets allow content to be


optimized for more than one type of device. By using the same HTML
document, different versions of a website can be presented for handheld
devices such as PDAs and cellphones or for printing.
• Global web standards – Now HTML attributes are being deprecated and
it is being recommended to use CSS. So it’s a good idea to start using CSS
in all the HTML pages to make them compatible with future browsers.
Who Creates and Maintains CSS?
CSS is created and maintained through a group of people within the W3C
called the CSS Working Group. The CSS Working Group creates documents
called specifications. When a specification has been discussed and
officially ratified by the W3C members, it becomes a recommendation.
These ratified specifications are called recommendations because the
W3C has no control over the actual implementation of the language.
Independent companies and organizations create that software.
NOTE: The World Wide Web Consortium or W3C is a group that makes
recommendations about how the Internet works and how it should
evolve.
CSS Versions
Cascading Style Sheets level 1 (CSS1) came out of W3C as a
recommendation in December 1996. This version describes the CSS
language as well as a simple visual formatting model for all the HTML tags.
CSS2 became a W3C recommendation in May 1998 and builds on CSS1.
This version adds support for media-specific style sheets e.g. printers and
aural devices, downloadable fonts, element positioning and tables.

A CSS comprises of style rules that are interpreted by the browser and then
applied to the corresponding elements in your document. A style rule is
made of three parts:

• Selector: A selector is an HTML tag at which a style will be applied. This


could be any tag like <p> and </p> etc.

• Property: A property is a type of attribute of HTML tag. Put simply, all the
HTML attributes are converted into CSS properties. They could be color,
border, etc.
• Value: Values are assigned to properties. For example, color property
can have the value either red or #F1F1F1 etc.

The Attribute Selectors


You can also apply styles to HTML elements with particular attributes. The
style rule below will match all the input elements having a type attribute
with a value of text:
The advantage to this method is that the element is unaffected, and the
color applied only to the desired text fields. There are following rules
applied to attribute selector.

• p[lang] - Selects all paragraph elements with a lang attribute.

• p[lang="fr"] - Selects all paragraph elements whose lang attribute has a


value of exactly "fr".

• p[lang~="fr"] - Selects all paragraph elements whose lang attribute


contains the word "fr".

• p[lang|="en"] - Selects all paragraph elements whose lang attribute


contains values that are exactly "en", or begin with "en-".

CSS Selectors

CSS selectors are used to "find" (or select) the HTML elements you want to
style.
We can divide CSS selectors into five categories:
• Simple selectors (select elements based on name, id, class)
• Combinator selectors (select elements based on a specific
relationship between them)
• Pseudo-class selectors (select elements based on a certain state)
• Pseudo-elements selectors (select and style a part of an element)
• Attribute selectors (select elements based on an attribute or
attribute value)

This page will explain the most basic CSS selectors.


The CSS id Selector
The id selector uses the id attribute of an HTML element to select a specific
element.
The id of an element is unique within a page, so the id selector is used to
select one unique element!

To select an element with a specific id, write a hash (#) character, followed
by the id of the element.
The CSS rule below will be applied to the HTML element with id="para1":
#para1 {
text-align: center;
color: red;
}
Three Ways to Insert CSS
There are three ways of inserting a style sheet:
• External CSS
• Internal CSS

• Inline CSS

External CSS
With an external style sheet, you can change the look of an entire website by
changing just one file!

Each HTML page must include a reference to the external style sheet file
inside the <link> element, inside the head section.
Example
External styles are defined within the <link> element, inside the <head>
section of an HTML page:

<!DOCTYPE html>
<html>
<head>
<link rel="stylesheet" href="mystyle.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, and must be saved
with a .css extension.

The external .css file should not contain any HTML tags.

Internal CSS
An internal style sheet may be used if one single HTML page has a unique
style.
The internal style is defined inside the <style> element, inside the head
section.
Example
Internal styles are defined within the <style> element, inside the <head>
section of an HTML page:
<!DOCTYPE html>
<html>
<head>
<style>
body {
background-color: linen;
}
h1 {
color: maroon;
margin-left: 40px;
}
</style>
</head>
<body>

<h1>This is a heading</h1>
<p>This is a paragraph.</p>

</body>
</html>

Inline CSS
An inline style may be used to apply a unique style for a single element.
To use inline styles, add the style attribute to the relevant element. The
style attribute can contain any CSS property.
Example
Inline styles are defined within the "style" attribute of the relevant element:

<!DOCTYPE html>
<html>
<body>

<h1 style="color:blue;text-align:center;">This is a heading</h1>


<p style="color:red;">This is a paragraph.</p>

</body>
</html>
CSS Margins
The CSS margin properties are used to create space around elements,
outside of any defined borders.
With CSS, you have full control over the margins. There are properties for
setting the margin for each side of an element (top, right, bottom, and left).
Margin - Individual Sides

CSS has properties for specifying the margin for each side of an element:
• margin-top
• margin-right
• margin-bottom
• margin-left
All the margin properties can have the following values:

• auto - the browser calculates the margin


• length - specifies a margin in px, pt, cm, etc.
• % - specifies a margin in % of the width of the containing element
• inherit - specifies that the margin should be inherited from the parent
element

Tip: Negative values are allowed.


{
margin-top: 100px;
margin-bottom: 100px;
margin-right: 150px;
margin-left: 80px;
}
Margin - Shorthand Property
To shorten the code, it is possible to specify all the margin properties in one
property.
The margin property is a shorthand property for the following individual
margin properties:
• margin-top
• margin-right
• margin-bottom
• margin-left
So, here is how it works:

If the margin property has four values:


• margin: 25px 50px 75px 100px;
o top margin is 25px
o right margin is 50px
o bottom margin is 75px
o left margin is 100px

The auto Value


You can set the margin property to auto to horizontally center the element
within its container.

The element will then take up the specified width, and the remaining space
will be split equally between the left and right margins.

Example
Use margin: auto:

div {
width: 300px;
margin: auto;
border: 1px solid red;
}

CSS background-image
The background-image property specifies an image to use as the
background of an element.

By default, the image is repeated so it covers the entire element.


Example
Set the background image for a page:
body {
background-image: url("paper.gif");
}

CSS Backgrounds

The CSS background properties are used to add background effects for
elements.

In these chapters, you will learn about the following CSS background
properties:
• background-color
• background-image
• background-repeat
• background-attachment

• background-position
• background (shorthand prop

JavaScript Introduction

What is JavaScript?
JavaScript is the programming language of the web.

It can update and change both HTML and CSS.


It can calculate, manipulate and validate data.

Why Study JavaScript?


JavaScript is one of the 3 languages all web developers must learn:
1. HTML to define the content of web pages
2. CSS to specify the layout of web pages
3. JavaScript to program the behavior of web pages

JavaScript Can Change HTML Content


One of many JavaScript HTML methods is getElementById().
The example below "finds" an HTML element (with id="demo"), and
changes the element content (innerHTML) to "Hello JavaScript":
Example

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


JavaScript accepts both double and single quotes:
Example
document.getElementById('demo').innerHTML = 'Hello JavaScript';

JavaScript Can Change HTML Attribute Values


In this example JavaScript changes the value of the src (source) attribute of
an <img> tag:
The Light Bulb

Turn on the light Turn off the light

JavaScript Can Change HTML Styles (CSS)


Changing the style of an HTML element, is a variant of changing an HTML
attribute:
Example

document.getElementById("demo").style.fontSize = "35px";
The <script> Tag
In HTML, JavaScript code is inserted between <script> and </script> tags.
Example
<script>
document.getElementById("demo").innerHTML = "My First JavaScript";
</script>
JavaScript Functions and Events
A JavaScript function is a block of JavaScript code, that can be executed
when "called" for.
For example, a function can be called when an event occurs, like when the
user clicks a button.

JavaScript in <head> or <body>


You can place any number of scripts in an HTML document.
Scripts can be placed in the <body>, or in the <head> section of an HTML
page, or in both.

JavaScript in <head>
In this example, a JavaScript function is placed in the <head> section of an
HTML page.
The function is invoked (called) when a button is clicked:

Example
<!DOCTYPE html>
<html>
<head>
<script>
function myFunction() {
document.getElementById("demo").innerHTML = "Paragraph changed.";
}
</script>
</head>
<body>
<h2>Demo JavaScript in Head</h2>

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


<button type="button" onclick="myFunction()">Try it</button>

</body>
</html>
JavaScript in <body>
In this example, a JavaScript function is placed in the <body> section of an
HTML page.
The function is invoked (called) when a button is clicked:

Example
<!DOCTYPE html>
<html>
<body>

<h2>Demo JavaScript in Body</h2>

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

<button type="button" onclick="myFunction()">Try it</button>

<script>
function myFunction() {
document.getElementById("demo").innerHTML = "Paragraph changed.";
}
</script>

</body>
</html>
External JavaScript
Scripts can also be placed in external files:

External file: myScript.js


function myFunction() {
document.getElementById("demo").innerHTML = "Paragraph changed.";
}
External scripts are practical when the same code is used in many different
web pages.
JavaScript files have the file extension .js.
To use an external script, put the name of the script file in the src (source)
attribute of a <script> tag:

Example
<script src="myScript.js"></script>
JavaScript Values
The JavaScript syntax defines two types of values:
• Fixed values

• Variable values
Fixed values are called Literals.
Variable values are called Variables.
JavaScript - Introduction
JavaScript Literals
The two most important syntax rules for fixed values are:

1. Numbers are written with or without decimals:


10.50

1001
2. Strings are text, written within double or single quotes:
"John Doe"

'John Doe'

JavaScript Variables
In a programming language, variables are used to store data values.

JavaScript uses the keywords var, let and const to declare variables.
An equal sign is used to assign values to variables.
In this example, x is defined as a variable. Then, x is assigned (given) the
value 6:
let x;
x = 6;

You might also like