HTML ( HyperText Markup Language)
HTML is a computer language devised to allow website creation.
HyperText is the method by which you move around on the web by
clicking on special text called hyperlinks which bring you to the next
page. HTML is a Language, as it has code-words and syntax like any
other language.
Hyper Text: Hyper Text simply means "Text within Text". A text has a
link within it, is a hypertext. Every time when you click on a word which
brings you to a new webpage, you have clicked on a hypertext.
Markup language: A markup language is a programming language
that is used make text more interactive and dynamic. It can turn a text
into images, tables, links etc.
Basic tags
The <!DOCTYPE html> declaration defines this document to
be HTML5
The<html>element is the root element of an HTML page
The<head>element contains meta information about the
document
The<title> element specifies a title for the document
The<body>element contains the visible page content
The<h1>element defines a large heading
The <h6> element defines a smaller heading
The<p>element defines a paragraph
Header Tags
The Html heading tag is six types.
<H1> H1 Header</H1>
<H2> H2 Header</H2>
<H3> H3 Header</H3>
<H4> H4 Header</H4>
<H5> H5 Header</H5>
<H6> H6 Header</H6>
Sample Programming
<!DOCTYPE html>
<html>
<head>
<title>This is my title</title>
</head>
<body>
<H1> H1 Header</H1>
<H2> H2 Header</H2>
<H3> H3 Header</H3>
<H4> H4 Header</H4>
<H5> H5 Header</H5>
<H6> H6 Header</H6>
<p>My first paragraph.</p>
</body>
</html>
HTML Element
HTML elements with no content are called empty elements. Empty
elements do not have an end tag, such as the <br> element.
HTML Attributes
All HTML elements can have attributes
Attributes provide additional information about an element
Attributes are always specified in the start tag
The href Attribute
HTML links are defined with the <a> tag. The link address is specified in the
“ href” attribute
<a href="https://litztech.in">View our page</a>
HTML TABLE
An HTML table is defined with the <table >tag and closing
with</table>
<td> : elements are the data containers of the table.
They can contain all sorts of HTML elements; text, images, lists,
other tables, etc.
<th> : elements are the header containers of the table.
Ex:
<h2>HTML</h2>
<table>
<tr>
<th>Firstname</th>
<th>Lastname</th>
<th>Age</th>
</tr>
<tr>
<td>Jill</td>
<td>Smith</td>
<td>50</td>
</tr>
<tr>
<td>Eve</td>
<td>Jackson</td>
<td>94</td>
</tr>
<tr>
<td>John</td>
<td>Doe</td>
<td>80</td>
</tr>
</table>
HTML List Example
1 An Unordered List <ul>
<h2>An Unordered HTML List</h2>
<ul>
<li>Coffee</li>
<li>Tea</li>
<li>Milk</li>
</ul>
2 An Ordered List: <ol>
<h2>An Ordered HTML List</h2>
<ol>
<li>Coffee</li>
<li>Tea</li>
<li>Milk</li>
</ol>
Block-level Elements
A block-level element always starts on a new line and takes up the full width
available (stretches out to the left and right as far as it can).
The <div> element is a block-level element.
<div>Hello</div>
<div>World</div>
HTML IFRAMES
An iframe is used to display a web page within a web page.
An HTML iframe is defined with the <iframe> tag.
The SRC attribute specifies the URL (web address) of the inline frame page.
Use the height and width attributes to specify the size of the iframe.
The attribute values are specified in pixels by default, but they can also be in
percent (like "80%").
<iframe src="first.html" height="200" width="300"></iframe>
Setting The Viewport
When making responsive web pages, add the following <meta> element in
all your web pages:
<meta name="viewport" content="width=device-width, initial-
scale=1.0">
HTML Symbol Entities
HTML entities were described in the previous chapter.
Many mathematical, technical, and currency symbols, are not present on a
normal keyboard.
EX:
<p>I will display €</p>
<p>I will display €</p>
<p>I will display €</p>
∀ ∀ ∀ FOR ALL
∂ ∂ ∂ PARTIAL DIFFERENTIAL
∃ ∃ ∃ THERE EXISTS
∅ ∅ ∅ EMPTY SETS
∇ ∇ ∇ NABLA
∈ ∈ ∈ ELEMENT OF
∉ ∉ ∉ NOT AN ELEMENT OF
∋ ∋ ∋ CONTAINS AS MEMBER
∏ ∏ ∏ N-ARY PRODUCT
∑ ∑ ∑ N-ARY SUMMATION
HTML FORMS
Form elements are different types of input elements, like text fields,
checkboxes, radio buttons, submit buttons, and more.
The <INPUT> element is the most important form element.
The <INPUT> element can be displayed in several ways, depending on
the typeattribute.
The HTML <FORM>element defines a form that is used to collect user input.
<INPUT TYPE=”TEXT”> defines a one-line input field for text input
The <input> Element
The most important form element is the <input> element.
The <input> element can be displayed in several ways, depending on the
type attribute.
Input Type Text
<input type="text"> defines a one-line text input field
What are 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. HTML5 offers new semantic elements to
define different parts of a web page
<article>
<aside>
<details>
<figcaption>
<figure>
<footer>
<header>
<main>
<mark>
<nav>
<section>
<summary>
<time>
HTML Canvas
The HTML <canvas> element is used to draw graphics on a web page.
The graphic to the left is created with <canvas>. It shows four elements: a
red rectangle, a gradient rectangle, a multicolor rectangle, and a multicolor
text.
What is HTML Canvas
The HTML <canvas> element is used to draw graphics, on the fly, via
JavaScript.
The <canvas> element is only a container for graphics. You must use
JavaScript to actually draw the graphics.
SVG
SVG stands for Scalable Vector Graphics
SVG is used to define graphics for the Web
SVG is a W3C recommendation
The HTML <svg> element is a container for SVG graphics.
Multimedia
Multimedia comes in many different formats. It can be almost anything you
can hear or see.
Examples: Images, music, sound, videos, records, films, animations, and
more.
Web pages often contain multimedia elements of different types and
formats.
MP4 is the new and upcoming format for internet video.
MP4 is recommended by YouTube.
MP4 is supported by Flash Players.
MP4 is supported by HTML5.
Before HTML5, a video could only be played in a browser with a plug-in (like
flash).
The HTML5 <video> element specifies a standard way to embed a video in a
web page.
Audio on the Web
Before HTML5, audio files could only be played in a browser with a plug-in
(like flash)The HTML5 <audio> element specifies a standard way to embed
audio in a web page.
<audio controls>
<source src="horse.ogg" type="audio/ogg">
<source src="horse.mp3" type="audio/mpeg">
Your browser does not support the audio element.
</audio>
CSS (Cascading Style Sheets)
CSS is a language that describes the style of an HTML document. CSS
describes how HTML elements should be displayed. 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
External stylesheets are stored in CSS files
CSS is used to define styles for your web pages, including the design, layout
and variations in display for different devices and screen sizes.
HTML was NEVER intended to contain tags for formatting a web page!
HTML was created to describe the content of a web page, like:
<h1>This is a heading</h1>
<p>This is a paragraph.</p>
When tags like <font>, and color attributes were added to the
HTML 3.2 specification, it started a nightmare for web developers.
Development of large websites, where fonts and color information
were added to every single page, became a long and expensive
process.
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!
Three Ways to Insert CSS
External style sheet
Internal style sheet
Inline style
External Style Sheet
With an external style sheet, you can change the look of an entire website
by changing just one file!
Each page must include a reference to the external style sheet file inside
the <link> element. The <link> element goes inside the <head> section:
CSS Selectors
An external style sheet can be written in any text editor. The file should not
contain any html tags. The style sheet file must be saved with a .css
extension.
CSS selectors are used to "find" (or select) HTML elements based on their
element name, id, class, attribute, and more.
Internal Style Sheet
An internal style sheet may be used if one single page has a unique style.
Internal styles are defined within the <style> element, inside the <head>
section of an HTML page:
<style>
body {
background-color: linen;
}
h1 {
color: maroon;
margin-left: 40px;
}
</style>
Inline Styles
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.
<h1 style="color:blue;margin-left:30px;">This is a heading</h1>
Multiple Style Sheets
If some properties have been defined for the same selector (element) in
different style sheets, the value from the last read style sheet will be used.
h1 {
color: navy;
}
CSS Backgrounds
The CSS background properties are used to define the background effects
for elements.
CSS background properties:
background-color
background-image
background-repeat
background-attachment
background-position
With CSS, a color is most often specified by:
a valid color name - like "red"
a HEX value - like "#ff0000"
an RGB value - like "rgb(255,0,0)"
Border Style
The border-style property specifies what kind of border to display
dotted - Defines a dotted border
dashed - Defines a dashed border
solid - Defines a solid border
double - Defines a double border
groove - Defines a 3D grooved border. The effect depends on the border-
color value
ridge - Defines a 3D ridged border. The effect depends on the border-color
value
inset - Defines a 3D inset border. The effect depends on the border-color
value
outset - Defines a 3D outset border. The effect depends on the border-color
value
none - Defines no border
hidden - Defines a hidden border
The border-style property can have from one to four values (for the top
border, right border, bottom border, and the left border).
Ex:
p.dotted {border-style: dotted;}
p.dashed {border-style: dashed;}
p.solid {border-style: solid;}
p.double {border-style: double;}
p.groove {border-style: groove;}
p.ridge {border-style: ridge;}
p.inset {border-style: inset;}
p.outset {border-style: outset;}
p.none {border-style: none;}
p.hidden {border-style: hidden;}
p.mix {border-style: dotted dashed solid double;}
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).
CSS has properties for specifying the margin for each side of an element:
margin-top
margin-right
margin-bottom
margin-left
Individual Sides
CSS has properties for specifying the margin for each side of an element:
margin-top
margin-right
margin-bottom
margin-left
The element Selector
The element selector selects elements based on the element name.
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
Padding
CSS has properties for specifying the padding for each side of an element:
padding-top
padding-right
padding-bottom
padding-left
You can select all <p> elements on a page like this (in this case, all <p>
elements will be center-aligned, with a red text color):
p {
text-align: center;
color: red;
}
The id Selector
The id selector uses the id attribute of an HTML element to select a specific
element.
The id of an element should be 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.
#hai {
text-align: center;
color: red;
}
The class Selector
The class selector selects elements with a specific class attribute.
To select elements with a specific class, write a period (.) character,
followed by the name of the class.The class selector selects elements with
a specific class attribute.
To select elements with a specific class, write a period (.) character,
followed by the name of the class.The class selector selects elements with
a specific class attribute.
To select elements with a specific class, write a period (.) character,
followed by the name of the class.
.center {
text-align: center;
color: red;
}
We can also specify that only specific HTML elements should be affected by
a class.
In the example below, only <p> elements with class="center" will be center-
aligned:
The display Property
The display property specifies if/how an element is displayed.
Every HTML element has a default display value depending on what type
of element it is. The default display value for most elements is block or
inline.
Using width
Setting the width of a block-level element will prevent it from
stretching out to the edges of its container. Then, you can set the
margins to auto, to horizontally center the element within its
container.
The element will take up the specified width, and the remaining
space will be split equally between the two margins
The display: inline-block Value
Compared to display: inline, the major difference is that display: inline-block
allows to set a width and height on the element.
Also, with display: inline-block, the top and bottom margins/paddings are
respected, but with display: inline they are not.
Compared to display: block, the major difference is that display: inline-block
does not add a line-break after the element, so the element can sit next to
other elements.
CSS Combinators
A CSS selector can contain more than one simple selector. Between the
simple selectors, we can include a combinator.
There are four different combinators in CSS:
descendant selector (space)
child selector (>)
adjacent sibling selector (+)
general sibling selector (~)
Javascript
JavaScript is a very powerful client-side scripting language. JavaScript is
used mainly for enhancing the interaction of a user with the webpage. In
other words, you can make your webpage more lively and interactive, with
the help of JavaScript. JavaScript is also being used widely in game
development and Mobile application development. JavaScript was
developed by Brendan Eich in 1995, which appeared in Netscape, a
popular browser of that time. JavaScript runs on any operating
system including Windows, Linux or Mac.
Basic validation
<script>
alert(“fields should not be left empty”);
<script>
First program
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":
<!DOCTYPE html>
<html>
<body>
<p id="demo">
</p>
<script>
document.getElementById("demo").innerHTML = "My First JavaScript";
</script>
</body>
</html>
JavaScript can "display" data in different ways:
1) Writing into an HTML element, using innerHTML.
2) Writing into the HTML output using document.write().
3) Writing into an alert box, using window.alert().
4) Writing into the browser console, using console.log().
Variables
JavaScript variables are containers for storing data values. In this example,
x, y, and z, are variables:
<script>
var x = 5;
var y = 6;
var z = x + y;
document.getElementById("demo").innerHTML = "The value of z is: " + z;
//11
</script>
Datatypes
JavaScript variables can hold many data types: numbers, strings, objects
and more:
<script>
var x = 16 + "Volvo";
document.getElementById("demo").innerHTML = x; //16Volvo
</script>
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).
<script>
function myFunction(p1, p2) {
return p1 * p2;
}
document.getElementById("demo").innerHTML = myFunction(4, 3); //12
</script>
Function Invocation
The code inside the function will execute when "something" invokes (calls)
the function:
When an event occurs (when a user clicks a button)
When it is invoked (called) from JavaScript code
Automatically (self invoked)
Conditional Statements
Very often when you write code, you want to perform different actions for
different decisions.
You can use conditional statements in your code to do this. In JavaScript we
have the following conditional statements: Use if to specify a block of code
to be executed, if a specified condition is true
Use else to specify a block of code to be executed, if the same condition is
false Use else if to specify a new condition to test, if the first condition is
false Use switch to specify many alternative blocks of code to be executed
