Location via proxy:   [ UP ]  
[Report a bug]   [Manage cookies]                
Scribd
Upload
4 views

HTML

This document provides a comprehensive overview of HTML basics, including essential tags for structuring a document, layout elements, and formatting options. It covers the use of headings, paragraphs, links, images, lists, and attributes, explaining their syntax and purpose. The document serves as a foundational guide for beginners to understand and implement HTML coding effectively.

Uploaded by

Shubhangi Tyagi
Copyright
© © All Rights Reserved
Available Formats
Download as PDF, TXT or read online on Scribd
4 views

HTML

This document provides a comprehensive overview of HTML basics, including essential tags for structuring a document, layout elements, and formatting options. It covers the use of headings, paragraphs, links, images, lists, and attributes, explaining their syntax and purpose. The document serves as a foundational guide for beginners to understand and implement HTML coding effectively.

Uploaded by

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

1

HTML | Basics
In this article, we will go through all the basic stuff of HTML coding. There are
various tags that we must consider and include while starting to code in HTML.
These tags help in organization and basic formatting of elements in our script or web
pages. These step by step procedures will guide you through the process of writing
HTML.
Basic HTML Document

Below mentioned are the basic HTML tags which divides the whole document into
various parts like head, body etc.
 Every HTML document begins with a HTML document tag. Although this is not
mandatory but it is a good convention to start the document with this below
mentioned tag:
<!DOCTYPE html>
 <html> : Every HTML code must be enclosed between basic HTML tags. It
begins with <html> and ends with </html> tag.
 <head> : The head tag comes next which contains all the header information of
the web page or document like the title of the page and other miscellaneous
information. These informations are enclosed within head tag which opens
with <head> and ends with </head>. The contents will of this tag will be
explained in the later sections of course.
 <title> : We can mention the title of a web page using the <title> tag. This is a
header information and hence mentioned within the header tags. The tag
begins with <title> and ends with </title>
 <body> : Next step is the most important of all the tags we have learned so far.
The body tag contains the actual body of the page which will be visible to all the
users. This opens with <body> and ends with </body>. Every content enclosed
within this tag will be shown on the web page be it writings or images or audios
or videos or even links. We will see later in the section how using various tags
we may insert mentioned contents into our web pages.
HTML | Layout
Page layout is the part of graphic design that deals with the arrangement of visual
elements on a page. Page layout is used to make the web pages look better. It
establishes the overall appearance, relative importance, and relationships between
the graphic elements to achieve a smooth flow of information and eye movement for
maximum effectiveness or impact.
2

Page Layout Information:


 Header: The part of a front end which is used at the top of the page. <header>
tag is used to add header section in web pages.
 Navigation bar: The navigation bar is same as menu list. It is used to display
the content information using hyperlink.
 Index / Sidebar: It holds additional information or advertisements and is not
always necessary to be added into the page.
 Content Section: The content section is the main part where content is
displayed.
 Footer: The footer section contains the contact information and other query
related to web pages. The footer section always put on the bottom of the web
pages. The <footer> tag is used to set the footer in web pages.

1 HTML | Heading
There are six levels of headings defined by HTML. These six heading elements are
H1, H2, H3, H4, H5, and H6; with H1 being the highest level and H6 the least.
Importance of Heading :
1. Search Engines use headings for indexing the structure and content of the
webpage.
2. Headings are used for highlighting important topics.
3. They provide valuable information and tell us about the structure of the
document.
Horizontal rule in HTML :
The “hr” tag which stands for the horizontal rule is used to define a thematic break in an
HTML page. It is basically used to separate content.

The head element in HTML :


The HTML head element acts as a container for metadata. Metadata is the data about the
HTML document which is not displayed. The head element has nothing to do with headings.
The head element is placed between the “HTML” tag and “body” tag.

2 HTML | Paragraph
Last Updated: 01-11-2019

<p> tag:
The <p> tag in HTML defines a paragraph. These have both opening and closing
tag. So anything mentioned within <p> and </p> is treated as a paragraph. Most
browsers read a line as a paragraph even if we don‟t use the closing tag i.e, </p>,
but this may raise unexpected results. So, it is both a good convention and
we must use the closing tag.
Syntax:
<p> Content </p>
When we look at the webpage, we see that there are few spaces added before and after a
paragraph. HTML does this by default. Let‟s look at few properties of paragraph tag:
3

 As already mentioned, the<p>tag automatically adds space before and after


any paragraph, which is basically margins added by the browser.
 If a user adds multiple spaces, the browser reduces them it to a single space.
 If a user adds multiple lines, the browser reduces them to a single line.

<br> tag:
There is a way to let the HTML know where does the browser need to change the
lines by the use of <br> tag. These tags do not have any closing tag. So, just a
single opening tag will change the line.
Syntax:
<br>

<align> attribute:
The <p> tag specifically supports the alignment attribute and allows us to align our
paragraphs in left, right or center alignment.
Syntax:
<p align="value">

The <pre> element:


We have seen how the paragraph tag ignores all the change of lines and extra
spaces within a paragraph, but there is a way to preserve this by the use
of <pre> tag. It also contains an opening and a closing tag. It displays a text within a
fixed height and width and preserves the extra lines and spaces we use.
Syntax:
<pre> Content </pre>

3 HTML | Links
What is a link?
It is a connection from one web resource to another.A link has two ends,An anchor
and direction. The link starts at the “source” anchor and points to the “destination”
anchor, which may be any Web resource such as an image, a video clip, a sound
bite, a program, an HTML document or an element within an HTML document.
HTML Link Syntax
Links are specified in HTML using the “a” tag.

Syntax Explanation:
href : The href attribute is used to specify
the destination address of the link used.
Text link : The text link
is the visible part of the link.
4

4 HTML | Images
Last Updated: 30-07-2019
Earlier, the webpages used to comprise of only texts, which made them appear quite
boring and uninteresting. Fortunately, it wasn‟t long enough that the ability to embed
images on web pages was added for users. Let‟s see how to add images on a
webpage.
Adding images on a webpage :
The “img” tag is used to add images on a webpage. The “img” tag is an empty tag,
which means it can contain only a list of attributes and it has no closing tag.
Syntax :
<img src="url" alt="some_text">
Attribute:
 src:
src stands for source. Every image has a src attribute which tells the browser
where to find the image you want to display. The URL of the image provided
points to the location where the image is stored.
 alt:If the image cannot be displayed then the alt attribute acts as an alternative
description for the image. The value of the alt attribute is an user-defined text.

Setting width and height of Image :The width and height attributes are used to specify the
height and width of an image. The attribute values are specified in pixels by default.

Adding animated Image: Animated images in .gif format can also be added using
the “img” tag.
filter_none
edit
play_arrow
brightness_4
<!DOCTYPE html>
<html>
<h3>Adding a gif file on a webpage</h3>
<body>
<img src = "smiley.gif" alt = "smiley"
style = "width:200px; height:200px;">
</body>
</html>

Adding titles to Image: Along with the images, titles can also be added to images
to provide further information related to the inserted image. For inserting a title, the
title attribute is used.

Setting a border to Image :By default, every picture has a border around it. By using the
border attribute, the thickness of the border can be changed. A thickness of “0” means that
there will be no border around the picture.
5

<img src= "https:// download3.png" alt="GeeksforGeeks logo" width="200"


height="200" border="5">

Aligning a Picture: By default, an image is aligned at the left side of the page, but it can be
aligned to center or right using the align attribute.

<img src= "https://download3.png" alt="GeeksforGeeks logo" align="right">

Adding Image as a Link: An image can work as a link with a URL embedded in it. It can be
done by using the “img” tag inside an “a” tag.
<a href="https://ide.geeksforgeeks.org/tryit.php">
<img src= "https://download3.png" alt="GeeksforGeeks logo"> </a>

5 HTML | Mapping Image


What is image mapping :
In image mapping an image is specified with certain set of coordinates inside the
image which act as hyperlink areas to different destinations. It is different from an
image link since in image linking, an image can be used to serve a single link or
destination whereas in a mapped image, different coordinates of the image can
serve different links or destinations.

Elements required in Mapping an Image :

There are three basic html elements which are required for creating a mapped
image.
1. Map : It is used to create a map of the image with clickable areas.
2. Image : It is used for the image source on which mapping is done.
3. Area : It is used within the map for defining clickable areas.

Steps to create a mapped image :

 Determining Image size :


Determining the size of the image is very important because if the size of the image is
changed then the area coordinates will also require updation.

 Creating a map for overlaying the image :

 Determine the coordinates of the areas that you want to map :


It can be done in three shapes which are rectangle, circle and polygon. Coordinates
can be found easily by using MS-Paint.
6

6 HTML | Lists
What is a list?
A list is a record of short pieces of information, such as people‟s names, usually
written or printed with a single thing on each line and ordered in a way that makes a
particular thing easy to find.
For example:
 A shopping list
 To-do list
Lists in HTML

HTML offers three ways for specifying lists of information. All lists must contain one
or more list
elements.
The types of lists that can be used in HTML are :
 ul : An unordered list. This will list items using plain bullets.
 ol : An ordered list. This will use different schemes of numbers to list your
items.
 dl : A definition list. This arranges your items in the same way as they are
arranged in a dictionary.
The Unordered HTML List

An unordered list starts with the “ul” tag. Each list item starts with the “li” tag.The list
items are marked with bullets i.e small black circles by default.
<ul> Output
<li>Bread</li>
<li>Eggs</li>
<li>Milk</li>
<li>Coffee</li>
</ul>

The HTML Unordered List has various List Item Markers:-

Disc : Sets the list item marker to a bullet i.e default.

<ul style="list-style-type:disc">
<li>Bread</li> ….

Circle : Sets the list item marker to a circle.


<ul style="list-style-type:circle">

Square : Sets the list item marker to a square.


<ul style="list-style-type:square">

The HTML Ordered List

An ordered list starts with the “ol” tag. Each list item starts with the “li” tag. The list
items are marked with numbers by default.
7

<ol>
<li>Bread</li>
<li>Eggs</li>
<li>Milk</li>
<li>Coffee</li>
</ol>

The HTML Ordered List has various List Item Markers:


The type attribute of the <ol> tag, defines the type of the list item marker.
1. Type=”1″ : The list items will be numbered with numbers i.e default
<ol type="1">
2. Type=”A” : The list items will be numbered with uppercase letters.
3. Type=”a” : The list items will be numbered with lowercase letters
4. Type=”I” : The list items will be numbered with uppercase roman numbers
5. Type=”i” : The list items will be numbered with lowercase roman numbers

The HTML Description List

A description list is a list of terms, with a description of each term.


The <dl> tag defines the description list, the <dt> tag defines the term name,
and the <dd> tag describes each term.

<h2>A Description List</h2>


<dl>
<dt>Coffee</dt>
<dd>- 500 gms</dd>
<dt>Milk</dt>
<dd>- 1 ltr Tetra Pack</dd> Output

Nested List in HTML:

A nested list is a list which has a list inside a list.


<ul> Output
<li>Coffee</li>
<li>Tea
<ul>
<li>Black tea</li>
<li>Green tea</li>
</ul>
</li>
<li>Milk</li>
</ul>

7 HTML | Text Formatting


HTML provides us with the ability for formatting text just like we do it in MS Word or
any text editing software. In this article, we would go through few such options.
8

1. Making text Bold or Strong: We can make the text bold using the <b> tag.
The tag uses both opening and closing tag. The text that needs to be made
bold must be within <b> and </b> tag.
We can also use the <strong> tag to make the text strong, with added
semantic importance. It also opens with <strong> and ends with </strong> tag.

<!--Normal text--> Output


<p>Hello GeeksforGeeks</p>
<!--Text in Bold-->
<p><b>Hello
GeeksforGeeks</b></p>
<!--Text in Strong-->
<p><strong>Hello
GeeksforGeeks</strong></p>

2 Making text Italic or emphasize: The <i> tag is used to italicise the text. It opens with <i>
and ends with </i> tag.
The <em> tag is used to emphasize the text, with added semantic importance. It opens with
<em> and ends with </em> tag.

3 Highlighting a text: It is also possible to highlight a text in HTML using the <mark> tag. It
has a opening tag <mark> and a closing tag </mark>.

4 Making a text Subscript or Superscript: The <sup> element is used to superscript a text
and <sub> element is used to subscript a text. They both have opening and a closing tag.

<!--Text in Normal-->
<p>Hello GeeksforGeeks</p>
<!--Text in Superscript-->
<p>Hello
<sup>GeeksforGeeks</sup></p>
<!--Text in Subcript-->
<p>Hello
<sub>GeeksforGeeks</sub></p>

5 Making text smaller: The <small> element is used to make the text smaller. The text that
needs to be displayed smaller should be written inside <small> and </small> tag.

6 Striking through the text: The <del> element is used to strike through the text marking
the part as deleted. It also has an opening and a closing tag.

7 Adding a text: The <ins> element is used to underline a text marking the part as inserted
or added. It also has an opening and a closing tag.

8 HTML | Attributes
An attribute is used to provide extra or additional information about an element.
9


All HTML elements can have attributes. Attributes provide additional information
about an element.
 It takes two parameters : a name and a value. These define the properties of
the element and is placed inside the opening tag of the element. The name
parameter takes the name of the property we would like to assign to the
element and the value takes the properties value or extent of the property
names that can be aligned over the element.
 Every name has some value that must be written within quotes.
Syntax:
<element attribute_name="attribute_value">
Below are some of the most commonly used Attributes in HTML:
1. src Attribute :If we want to insert an image into a webpage, then we need to
use the <img> tag and the src attribute. We will need to specify the address of
the image as the attribute‟s value inside the double quote.

2. alt Attribute : As the name goes this is an alternate tag that is used to show or display
something if the primary attribute i.e., the <img> tag, fails to display the value assigned
to it. This can also be used to describe the image to a developer who is actually sitting
at the coding end.

<img Output
src="https://media.geeksforgeeks.org/
wp-content/cdn-uploads/Geek_logi_-
low_res.png" alt="The Logo"><br>
<img src="" alt="Since the src
value is blank,the alt value is
displayed">
</body>
</html>

3. The width and height Attribute : This attribute is used to adjust the width and height
of an image.

4. The id Attribute : This attribute is used to provide a unique identification to an


element. Situations may arise when we will need to access a particular element which
may have a similar name as the others. In that case, we provide different ids to various
elements so that they can be uniquely accessed. The properties extending the use of
id is generally used in CSS, which we will be learning later.

5. The title Attribute : The title attribute is used to explain an element on hovering the
mouse over it. The behavior differs with various elements but generally the value is
displayed while loading or hovering mouse pointer over it.

6. The href Attribute : This attribute is used to specify a link to any address. This
attribute is used along with <a> tag. The link put inside the href attribute gets linked to
the text displayed inside the<a> tag.
On clicking on the text we will be redirected to the link. By default, the link gets opened
10

in the same tag but by using the target attribute and setting its value to “_blank”, we
will be redirected to another tab or another window based on the browsers
configuration.
<a Output:
href="https://www.geeksforgeeks.org/">
Click to open in the same tab </a><br>
<a
href="https://www.geeksforgeeks.org/"
target="_blank">
Click to open in a different tab </a>

7. The style Attribute : This attribute is used to provide various CSS(Cascading Style
Sheets) effects to the HTML elements such as increasing font-size, changing font-
family, coloring etc. For a detailed explanation refer HTML | Style Tag. The program
below shows few name and values that go along the style attribute.

<h2 style="font-family:Chaparral
Pro Light;">Hello
GeeksforGeeks.</h2>
<h3 style="font-size:20px;">Hello
GeeksforGeeks.</h3>
<h2 style="color:#8CCEF9;">Hello
GeeksforGeeks.</h2>
<h2 style="text-
align:center;">Hello
GeeksforGeeks.</h2>

8. The lang attribute : The language is declared with the lang attribute. Declaring a
language is can be important for accessibility applications and search engines.

9 HTML | Iframes
Significance of Iframe in HTML :

The iframe in HTML stands for Inline Frame. The ” iframe ” tag defines a rectangular
region within the document in which the browser can display a separate document,
including scrollbars and borders. An inline frame is used to embed another document
within the current HTML document.
The „ src „ attribute is used to specify the URL of the document that occupies the
iframe.
Syntax :
<iframe src="URL"></iframe>
Setting Height and Width in Iframe :
The height and width attributes are used to specify the size of the iframe. The
attribute values are specified in pixels by default, but they can also be specified in
percentage like ” 80% “.
11

<p>Content goes here</p>

<iframe
src="https://ide.geeksforgeeks.org/tryit
.php"
height="
300" width="400">
</iframe>

10 HTML | Class Attribute


Class in html:
 The class is an attribute which specifies one or more class names for an HTML
element.
 The class attribute can be used on any HTML element.
 The class name can be used by CSS and JavaScript to perform certain tasks
for elements with the specified class name.
<style> Output
.country {
 background-color: black;
 color: white;
 padding: 8px; }
 </style> </head>
<body>
<h2 class="country">CHINA</h2>
<p>China has the largestpopulation
in the world.</p>
<h2 class="country">INDIA</h2>
<p>India has the second largest
population in the world.</p>
<h2 class="country">UNITED
STATES</h2>
<p>United States has the third
largest population in the
world.</p>
</body>

Explanation: In the above example CSS styles all elements with the class name
“country”.
Using the class attribute in JavaScript: JavaScript can access elements with a
specified class name by using the getElementsByClassName() method.

11 HTML | Id Attributes
The id attribute is a unique identifier which is used to specify the document. It is used
by CSS and JavaScript to perform a certain task for a unique element. In CSS, the id
12

attribute is used using # symbol followed by id.


Syntax:
<tag id=""></tag>

12 HTML | style attribute


Styles in HTML are basically rules that describe how a document will be presented in
a browser. Style information can be either attached as a separate document or
embedded in the HTML document.
There are 3 ways of implementing style in HTML :
1. Inline Style : In this method, the style attribute is used inside the HTML start
tag.
2. Embedded Style : In this method, the style element is used inside the <head>
element of the document.
3. External Style Sheet : In this method the <link> element is used to point to an
external CSS file.
Inline Style : In Inline styling, the CSS rules are directly written inside the starting
tag using the style attribute. The style attribute includes a series of CSS property and
value pairs. Each „ property : value „ pair is separated by a semicolon ( ; ).

External Style Sheet: External Style Sheets method can be useful when the CSS has to be
applied to various web pages. An external style sheet holds all the style rules in a separate
document that you can link from an HTML file on your site.
There are two ways of attaching external style sheets –

 Linking External Style Sheets


 Importing External Style Sheets
Linking External Style Sheets :
In this method, an external style sheet is linked to an HTML document using the
<link> tag.

Importing External Style Sheets :


External style sheets can be loaded into an HTML document using “@import”. The
“@import” statement instructs the browser to load the CSS file. Other CSS rules can also be
included using the <style> element.

13 HTML | Color Styles and HSL


Colors are used to make the page more attractive. Here are the different styles
which can be used to create new colors by combination of different colors.
1. Hexadecimal Style : In this style, we define the color in 6 digit hexadecimal
number (from 0 to F). It is denoted by „#‟. The first two digits indicate red color,
next two green color and the last two blue color.
Examples : If we want all „h1‟ tags of purple color.
13

h1{
color:#00FF00;
}

2. RGB Style [Red Green Blue] : In this we need to give 3 numbers indicating the
amount of red, green and blue colors respectively required in the mixed color.
The range of each color is from 0 to 255.
Example: If we want all „h1‟ tags of green color.
3. h1{
4. color:rgb(0, 255, 0);
5. }
Note: rgba(0, 0, 0) is Black color and rgb(255, 255, 255) is White color.
6. RGBA Style [Red Green Blue Alpha] : This style allows us to make the color
transparent according to our will. Alpha indicates the degree of transparency.
The range of green, blue and red is from 0 to 255 and that of alpha is from 0 to
1.
Example: If we want all „h1‟ tags of green color.

h1{
color:rgba(11, 99, 150, 1);}
7. HSL colors : Here „H‟ stands for hue, „S‟ for Saturation and „L‟ for Lightness.
HSL color values are specified as:
Syntax:
hsl(hue, saturation, lightness)
Hue is the color of the image itself. It‟s range is from 0 to 360. 0 is for red,

120 is for green and 240 is for blue.
 Saturation is the intensity/purity of the hue. 0% is for a shade of gray and
100% is the full color.
When color is fully saturated, the color is considered in purest/truest
version.
 Lightness is the color space‟s brightness. 0% is for black, 100% is for
white.
Example : If we apply hue on the above example given in example 1.
h1{
color:#00FF00;
background-color: hsl(200, 20%, 40%);
color: hsl(300, 30%, 90%);
}

In total we have 4096 different color combinations as we have the range of red,
green and blue from 00 to FF each so we have 16*16*16 different combinations
14

of colors. Then with hue, saturation and lightness we can achieve even more
creative and large number of colors.

14 HTML | Spell Check


The Spell Check feature in HTML is used to detect grammatical or spelling mistakes
in the text fields.
The Spell Check feature can be applied to HTML forms using
the spellcheck attribute. The spellcheck attribute is an enumerated attribute which
defines whether the HTML element will be checked for errors or not. It can be used
with “input” and “textarea” fields in HTML.
Syntax :
Syntax for spellcheck attribute in an input field in html:
<input type="text" spellcheck="value">
Syntax for spellcheck in a textarea field in html:
<textarea type="text" spellcheck="value"></textarea>
In the above syntax the value assigned to spellcheck will define whether spellcheck
will be enabled or not on the element. The spellcheck attribute has two valid values,
which are:
 True :It defines that the HTML element should be checked for errors.
 False :It defines that the HTML element should not be checked for errors.
When the attribute is not set, it takes the default value which is generally element
type and browser defined. The value can be also be inherited from the ancestral
element.
Enabling Spell Check in an HTML Form: To enable spellcheck in an HTML form
the spellcheck attribute is set to “true”. Below is the sample HTML program with
enabled spellcheck.

15 HTML | Quotations
The Quotation elements in HTML are used to insert quoted texts in a web page, that
is, portion of texts different from the normal texts in the web page.
Below are some of the most used quotation elements of HTML:
1. <q> element:
The <q> element is used to set a set of text inside the quotation marks. It has
both opening and closing tags.

16 HTML | Calculator
Here a Calculator is going to be formed with HTML code.
 Calculator Title: This is the title at the top of our application, “GeeksforGeeks
Calculator”.
15

 Output Screen: This will be our output screen, where all text will be shown.
Like the input that the user will type and the answer calculated from the user
input. So, we can again break down this into two smaller pieces as shown
below:
 Question Output: This will be the input given by the user.
 Answer Output: This will be the result calculated from user input.

17 HTML | Geolocation
Geo-location in HTML5 is used to share the location with some web site and aware
of the exact location. It is mainly used for local businesses, restaurants or showing
location on the map. It uses JavaScript to give the latitude and longitude to the
backend server. Most of the browsers supports Geo-location API. Geo-location API
uses global navigator object which can be created as follows:
var loc = navigator.geolocation

18 HTML | Drag and Drop


Drag and Drop is a very interactive and user-friendly concept which makes it easier
to move an object to a different location by grabbing it. This allows the user to click
and hold the mouse button over an element, drag it to another location, and release
the mouse button to drop the element there. In HTML 5 Drag and Drop are much
easier to code and any element in it is draggable.
Drag and Drop Events: There are many of Drag and Drop events some of them are
listed below:
EVENTS DESCRIPTION

ondragstart Calls a function, drag(event), that specifies what data to be dragged

To determine whether or not the drop target is to accept the drop. If the drop is

ondragenter to be accepted, then this event has to be canceled

Occurs when the mouse leaves an element before a valid drop target while the

ondragleave drag is ocurring

ondragover Specifies where the dragged data can be dropped

ondrop Specifies where the drop was occurred at the end of the drag operation
16

ondragend Occurs when the user has finished dragging an element

The Data Transfer Object: The data transfer property is used when the whole
process of Drag and Drop happens. It is used to hold the dragged data from the
source and drop it to the desired location. These are the properties associated with
it:
ATTRIBUTES DESCRIPTION

dataTransfer.setData(format, data) Sets the data to be dragged

Calling this function with no argument clears all

the data. Calling it with a format argument

dataTransfer.clearData(format) removes only that specific data.

Returns the data of the specified format. If there

dataTransfer.getData(format) is no such data, returns the empty string.

This property returns an array of all the formats

dataTransfer.types that were set in the dragstart event.

It is used to return all the files that are to be

dataTransfer.files dropped.

It is used to display an existing image as the drag

image instead of the default image alongside the

dataTransfer.setDragImage(element, x, y) cursor. The coordinates specify the drop location

Adds the specified element to be drawn as a drag

dataTransfer.addElement(element) feedback image

Tells the browser that only the listed type(s) of

dataTransfer.effectAllowed(value) operations are allowed for the user. The property


17

can be set to the following values: none, copy,

copyLink, copyMove, link, linkMove, move, all,

and uninitialized.

Controls the feedback that the user is given

during the dragenter and dragover events. When

the user hovers over a target element, the

browser’s cursor will indicate what type of

operation is going to take place (e.g. a copy, a

move, etc.). The effect can take on one of the

dataTransfer.dropEffect(value) following values: none, copy, link, move.

Procedure for Drag and Drop:


 Step 1: Make an object draggable
 First set the draggable attribute to true for that element to be draggable
<img draggable = “true”>
 Then, specify what should happen when the element is dragged. The
ondragstart attribute calls a function, drag(event), that specifies what data
to be dragged. The dataTransfer.setData() method sets the data type and
the value of the dragged data
 The event listener ondragstart will set the allowed effects (copy, move,
link, or some combination).
 function dragStart(ev) {

 ev.dataTransfer.setData("text", ev.target.id);
 }
 Step 2: Dropping the Object
 The ondragover event specifies where the dragged data can be dropped.
By default, data/elements cannot be dropped in other elements. To allow a
drop, it must prevent the default handling of the element. This is done by
calling the event.preventDefault() method
 Finally, the drop event, which allows the actual drop to be performed
 function dragDrop(ev) {
 ev.preventDefault();
 var data = ev.dataTransfer.getData("text");
 ev.target.appendChild(document.getElementById(data));
}
18

19 HTML | URL Encoding


A Uniform Resource Locator (URL) is simply the address of a website to access the
website content like www.geeksforgeeks.org. But there are certain characters are
allowed to use in the URL like alphabets A-Z and a-z, numbers 0-9 and few special
characters. They can be used as it is but the rest of the characters that are not in this
list are used after encoding them to a suitable form.
URL Encoding is the process of converting the URL into valid format that is accepted
by the web browsers. URL Encoding takes place by replacing all the characters that
are not allowed by a % sign followed by two hexadecimal digits. These two
hexadecimal values represent the numerical values of the character in the ASCII
character set. For example a space is not acceptable in a URL and is replaced by
„%20‟ or a „+‟ sign while encoding. Similarly a $ sign is replaced by „%24‟.

Reserved Characters: There are certain characters which sometimes have special
meanings in the URL and it can be used in both ways. For example the „/‟ character
is a reserved character and it has a special meaning when being used as a delimiter
to separate the paths of a URL. Here it is used by encoding it to „%2F‟. Else when it
has no special purpose it can be used normally.

Some characters need to be encoded while some don‟t need to be. Here is the
classification shows the group of characters that need to be encoded.
 Safe Characters: Alphanumeric i.e. 0-9, a-z and A-Z, special characters $, -, _,
., +, !, *, „, (, ), and reserved characters used for their reserved purposes. These
characters have no need to be encoded.
 ASCII Control characters: Ii includes the characters ranging from 00-1F in hex
(0-31 decimal) and 7F (127 decimal). These characters needs to be encoded.
 Non-ASCII Control characters: It includes 80-FF in hex (128-255 decimal).
These characters needs to be encoded.
 Reserved characters: These characters are used for special purpose an they
requires encoding.
 Unsafe characters: These character can be misunderstood within URLs for
various reasons. So it requires encoding. The characters < and > are unsafe
because they are used as the delimiters around URLs in free text, the quote
mark (” “) is unsafe as it is used to delimit URLs in some systems.

20 HTML | File Paths


A file path specifies the location of a file inside a web folder structure. Its like an
address of a file which helps the web browser to access the files. File paths are used
to link external resources such as images, videos, style sheets, JavaScript,
displaying other web pages etc.
To insert a file in a web page its source must be known. For example, the syntax
(<img src=” ” alt=” “>) is used to insert an image file, where the path of the file is
19

mentioned in the source (src).


File paths are of two types:
 Absolute File Paths
 Relative File Paths
Absolute File Paths: It describes the full address(URL) to access an internet file.
<img src=”https://media.geeksforgeeks.org/wp-content/uploads/geek.png” alt=”My
Image”>
Relative File Path: It describes the path of the file relative to the location of the current web
page file.

21 HTML | Tables
A table is an arrangement of data in rows and columns, or possibly in a more
complex structure. Tables are widely used in communication, research, and data
analysis.
 Tables are useful for various tasks such as presenting text information and
numerical data.
 Tables can be used to compare two or more items in tabular form layout.
 Tables are used to create databases.
Defining Tables in HTML
An HTML table is defined with the “table” tag. Each table row is defined with the “tr”
tag. A table header is defined with the “th” tag. By default, table headings are bold
and centered. A table data/cell is defined with the “td” tag.

Important Table options in HTML:

1. Adding a border to a HTML Table: A border is set using the CSS border
property. If you do not specify a border for the table, it will be displayed without
borders.

2. Adding Collapsed Borders in a HTML Table: For borders to collapse into one
border, add the CSS border-collapse property.

3. Adding Cell Padding in a HTML Table: Cell padding specifies the space between
the cell content and its borders.If we do not specify a padding, the table cells will be
20

displayed without padding.

4. Adding Left Align Headings in a HTML Table : By default the table headings are
bold and centered. To left-align the table headings,we must use the CSS text-align
property.

5. Adding Border Spacing in a HTML Table: Border spacing specifies the space
between the cells. To set the border spacing for a table,we must use the CSS border-
spacing property.

22 HTML | Comments
The comment tag (<!– Comment –>) is used to insert comments in the HTML code.
It is a good practice of coding so that coder and the reader can get help to
understand the code. It is helpful to understand the complex code. The comment tag
is useful during the debugging of codes.
 It is simple piece of code which is wiped off (ignore) by web browsers i.e, not
displayed by browser.
 It helps the coder and reader to understand the piece of code used for specially
in complex source code.
Syntax:
<!-- Comments here -->
Types of HTML Comments: There are three types of comments in HTML which
are:
 Single-line comment
 Multi-lines comment
 Using <comment> tag

23 HTML | Doctypes
What is doctype?
A doctype or document type declaration is an instruction which tells the web browser
about the markup language in which the current page is written. The Doctype is not
an element or tag, it lets the browser know about the version of or standard of HTML
or any other markup language that is being used in the document.
21

Declaration of a Doctype: A DOCTYPE declaration appears at the top of a web


page before all other elements. According to the HTML specification or standards,
every HTML document requires a document type declaration to ensure that the
pages are displayed in the way they are intended to be displayed.
The DOCTYPE for HTML5 is case-insensitive and can be written as shown below:
< !DOCTYPE html >
Doctype Usage: In the version, HTML 4.01, the usage of DOCTYPE declaration
was to create a reference to a document type definition (DTD), since the version
HTML 4.01 was completely based on a Standard Generalized Markup
Language(SGML).
The document type definition (DTD) is responsible for specifying the rules for the
Standard Generalized Markup Language(SGML) so that the browser processes the
content correctly. But in the HTML version, HTML 5 there isn‟t any need of a
reference to a document type definition (DTD) because HTML 5 is not based on a
Standard Generalized Markup Language(SGML).

24 HTML | Design Form


What is HTML Form :
HTML Form is a document which stores information of a user on a web server using
interactive controls. An HTML form contains different kind of information such as
username, password, contact number, email id etc.
The elements used in an HTML form are check box, input box, radio buttons, submit
buttons etc. Using these elements the information of an user is submitted on a web
server.
The form tag is used to create an HTML form.

Input Element in HTML Forms :

Input Elements are the most common elements which are used in HTML Forms.
Various user input fields can be created such as textfield, check box, password field,
radio button, submit button etc. The most common input elements are listed below:
1. Text Field in HTML Forms :
The text field is a one line input field allowing the user to input text. Text Field input
controls are created using the “input” element with a type attribute having value as
“text”.
2. Password Field in HTML Forms :
Password fields are a type of text field in which the text entered is masked using
asterisk or dots for prevention of user identity from another person who is looking onto
the screen. Password Field input controls are created using the “input” element with a
type attribute having value as “password”.
3. Radio Buttons in HTML Form :
Radio Buttons are used to let the user select exactly one option from a list of
predefined options. Radio Button input controls are created using the “input” element
with a type attribute having value as “radio”.
4. Checkboxes in HTML Form :
Checkboxes are used to let the user select one or more options from a pre-defined set
22

of options. Checkbox input controls are created using the “input” element with a type
attribute having value as “checkbox”.
5. File select boxes in HTML Forms :
File select boxes are used to allow the user to select a local file and send it as an
attachment to the web server.It is similar to a text box with a button which allows the
user to browse for a file.Instead of browsing for the file, the path and the name of the
file can also be written. File select boxes are created using the “input” element with a
type attribute having value as “file”.

25 HTML | Canvas Basics


What is HTML Canvas?
The HTML “canvas” element is used to draw graphics via JavaScript.The “canvas”
element is only a container for graphics.One must use JavaScript to actually draw
the graphics.Canvas has several methods for drawing paths, boxes, circles, text, and
adding images.
Example : The canvas would be a rectangular area on an HTML page. By default, a
canvas has no border and no content. An id attribute has been specified to refer it in
a script, and a width and height attribute to define the size of the canvas. The style
attribute is used to add a border.

CSS Introduction
Course Navigation

Cascading Style Sheets, fondly referred to as CSS, is a simply designed language


intended to simplify the process of making web pages presentable. CSS allows you
to apply styles to web pages. More importantly, CSS enables you to do this
independent of the HTML that makes up each web page.
CSS is easy to learn and understood but it provides powerful control over the
presentation of an HTML document.
WHY CSS?
 CSS saves time : You can write CSS once and reuse same sheet in multiple
HTML pages.
 Easy Maintainence : To make a global change simply change the style, and all
elements in all the webpages will be updated automatically.
23

 Search Engines : CSS is considered as clean coding technique, which means


search engines won‟t have to struggle to “read” its content.
 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.
 Offline Browsing : CSS can store web applications locally with the help of
offline catche.Using of this we can view offline websites.
CSS Syntax
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 set consists of a selector and declaration block.

Selector => h1
Declaration => {color:blue;font size:12px;}
 The selector points to the HTML element you want to style.
 The declaration block contains one or more declarations separated by
semicolons.
 Each declaration includes a CSS property name and a value, separated by a
colon.
For Example:
-> color is property and blue is value.
-> font size is property and 12px is value.
 A CSS declaration always ends with a semicolon, and declaration blocks are
surrounded by curly braces.
Example :
In the following example all p elements will be center-aligned, with a blue text color:

filter_none
brightness_4
p {
color: blue;
text-align: center;
}

CSS Selectors
CSS selectors are used to “find” (or select) HTML elements based on their element
name, id, class, attribute, and more.
1. THE UNIVERSAL SELECTORS : Rather than selecting elements of a specific
type, the universal selector quite simply matches the name of any element type
This rule renders the content of every element in our document in black.
2. THE ELEMENT SELECTOR : The element selector selects elements based on the
element name. 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) :
3. THE DESCENDANT SELECTOR : Suppose you want to apply a style rule to a
particular element only when it lies inside a particular element. As given in the following
example, style rule will apply to em element only when it lies inside ul tag.
24

4. 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.
 The style rule below will be applied to the HTML element with id=”para1″:

5 THE CLASS SELECTORS :


 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.
 In the example below, all HTML elements with class=”center” will be red and
center-aligned:

CSS Versions

1. CSS1
2. CSS2
3. CSS3
4. CSS4
Version 4 comes with:-
 CSS-Pro CSS-Mobile

JavaScript
JavaScript is a lightweight, cross-platform and interpreted scripting language. It is well-
known for the development of web pages, many non-browser environments also use it.
JavaScript can be used for Client-side developments as well as Server-side developments
 JavaScript was created in the first place for DOM manipulation. Earlier websites
were mostly static, after JS was created dynamic Web sites were made.
 Functions in JS are objects. They may have properties and methods just like
another object. They can be passed as arguments in other functions.
 Can handle date and time.
 Performs Form Validation although the forms are created using HTML.
 No compiler needed.

Introduction to JavaScript
JavaScript is a lightweight, cross-platform and interpreted scripting language. It is
well-known for the development of web pages, many non-browser environments also
use it. JavaScript can be used for Client-side developments as well as Server-
side developments. JavaScript contains a standard library of objects,
like Array, Date, and Math, and a core set of language elements
like operators, control structures, and statements.
25

 Client-side: It supplies objects to control a browser and its Document Object


Model (DOM). Like if client-side extensions allow an application to place
elements on an HTML form and respond to user events such as mouse
clicks, form input, and page navigation. Use full libraries for the client-side
are AngularJS, ReactJS, VueJS and so many others.
 Server-side: It supplies objects relevant to running JavaScript on a server. Like
if the server-side extensions allow an application to communicate with a
database, and provide continuity of information from one invocation to another
of the application, or perform file manipulations on a server. The useful
framework which is the most famous these days is node.js.
History of JavaScript: It was created in 1995 by Brendan Eich while he was an
engineer at Netscape. It was originally going to be named LiveScript but was
renamed. Unlike most programming languages, the JavaScript language has no
concept of input or output. It is designed to run as a scripting language in a host
environment, and it is up to the host environment to provide mechanisms for
communicating with the outside world. The most common host environment is the
browser.
Features of JavaScript: According to a recent survey conducted by Stack
Overflow, JavaScript is the most popular language on earth.
With advances in browser technology and JavaScript having moved into the server
with Node.js and other frameworks, JavaScript is capable of so much more. Here are
a few things that we can do with JavaScript:
 JavaScript was created in the first place for DOM manipulation. Earlier websites
were mostly static, after JS was created dynamic Web sites were made.
 Functions in JS are objects. They may have properties and methods just like
another object. They can be passed as arguments in other functions.
 Can handle date and time.
 Performs Form Validation although the forms are created using HTML.
 No compiler needed.
Platform for JavaScript:
 Web Development: Adding interactivity and behavior to static sites JavaScript
was invented to do this in 1995. By using AngularJS that can be achieved so
easily.
 Web Applications: With technology, browsers have improved to the extent that
a language was required to create robust web applications. When we explore a
map in Google Maps then we only need to click and drag the mouse. All
detailed view is just a click away, and this is possible only because of
JavaScript. It uses Application Programming Interfaces(APIs) that provide extra
power to the code. The Electron and React is helpful in this department.
 Server Applications: With the help of Node.js, JavaScript made its way from
client to server and node.js is the most powerful in the server-side.
 Games: Not only in websites, JavaScript also helps in creating games for
leisure. The combination of JavaScript and HTML 5 makes JavaScript popular
in game development as well. It provides the EaseJS library which provides
solutions for working with rich graphics.
 Smartwatches: JavaScript is being used in all possible devices and
applications. It provides a library PebbleJS which is used in smartwatch
applications. This framework works for applications that require the internet for
its functioning.
26

 Art: Artists and designers can create whatever they want using JavaScript to
draw on HTML 5 canvas, make sound more effective also can be
used p5.js library.
 Machine Learning: This JavaScript ml5.js library can be used in web
development by using machine learning.

DHTML JavaScript
Last Updated: 03-12-2018
DHTML stands for Dynamic HTML. Dynamic means that the content of the web page
can be customized or changed according to user inputs i.e. a page that is interactive
with the user. In earlier times, HTML was used to create a static page. It only defined
the structure of the content that was displayed on the page. With the help of CSS,
we can beautify the HTML page by changing various properties like text size,
background color etc. The HTML and CSS could manage to navigate between static
pages but couldn‟t do anything else. If 1000 users view a page that had their
information for eg. Admit card then there was a problem because 1000 static pages
for this application build to work. As the number of users increase, the problem also
increases and at some point it becomes impossible to handle this problem.
To overcome this problem, DHTML came into existence. DHTML included
JavaScript along with HTML and CSS to make the page dynamic. This combo made
the web pages dynamic and eliminated this problem of creating static page for each
user. To integrate JavaScript into HTML, a Document Object Model(DOM) is made
for the HTML document. In DOM, the document is represented as nodes and objects
which are accessed by different languages like JavaScript to manipulate the
document.

HTML document include JavaScript:: The JavaScript document is included in our


html page using the html tag. <src> tag is used to specify the source of external
JavaScript file.
Following are some of the tasks that can be performed with JavaScript:
 Performing html tasks
 Performing CSS tasks
 Handling events
27

 Validating inputs

Example 1: Example to understand how to use JavaScript in DHTML.


<html>
<head>
<title>DOM programming</title>
</head>

<body>
<h1>GeeksforGeeks</h1>
<p id = "geeks">Hello Geeks!</p>
<script style = "text/javascript">
document.getElementById("geeks").innerHTML =
"A computer science portal for geeks";
</script>
</body>
</html>
 Output:

Explanation: In the above example, change the text of paragraph which


using id. Document is an object of html that is displayed in the current window
or object of DOM. The getElementById(id) gives the element id. The
innerHTML defines the content within the id element. The id attribute is used
to change HTML document and its property. Paragraph content changed by
document id. For example: document.getElementById(“geeks”).style.color =
“blue”; It is used to set the paragraph color using id of elements.

You might also like