Programme Name: Bachelor of Computer Applications
Course Name: HTML,CSS and CSS preprocessor (BCA20002)
Class: BCA2C
Academic Session: 2023-24
Study Material
HTML, CSS AND CSS Preprocessor (BCA20002)
Table of Contents
Topic Number Topic
1 Basic structure of an HTML document
2 creating an HTML document
3 Markup Tags
HTML
HTML stands for Hypertext Markup Language, and it is the most widely used language
to write Web Pages.
Hypertext refers to the way in which Web pages (HTML documents) are linked
together. Thus, the link available on a webpage is called Hypertext.
As its name suggests, HTML is a Markup Language which means you use HTML to
simply "mark-up" a text document with tags that tell a Web browser how to
structure it to display.
Advantages :
HTML helps to build structure of a website and is a widely used Markup
language.
It is easy to learn.
Every browser supports HTML Language.
HTML is light weighted and fast to load.
Storage of big files are allowed because of the application cache feature.
Do not get to purchase any extra software because it’s by default in every
window.
Loose syntax (although, being too flexible won’t suit standards).
HTML is simple to edit as being a plain text.
It integrates easily with other languages such as JavaScript, CSS etc.
Dept. of Computational Sciences
Brainware University, Kolkata
Programme Name: Bachelor of Computer Applications
Course Name: HTML,CSS and CSS preprocessor (BCA20002)
Class: BCA2C
Academic Session: 2023-24
HTML is that it is easy to code even for novice programmers.
Disadvantages:
It cannot produce dynamic output alone, since it’s a static language.
Making the structure of HTML documents becomes tough to understand.
Errors can be costly.
It is the time consuming as the time it consume to maintain on the color scheme
of a page and to make lists, tables and forms.
We need to write a lot of code for just creating a simple webpage.
Basic structure of an HTML
Basic HTML Document
Step 1: Write the following HTML code into Notepad:
<!DOCTYPE html>
<html>
<body>
<h1>My First Heading</h1>
<p>My first paragraph.</p>
</body>
</html>
Dept. of Computational Sciences
Brainware University, Kolkata
Programme Name: Bachelor of Computer Applications
Course Name: HTML,CSS and CSS preprocessor (BCA20002)
Class: BCA2C
Academic Session: 2023-24
Step 2: Save the HTML Page
Save the file on your computer. Select File > Save as in the Notepad menu.
Name the file "[Link]" and set the encoding to UTF-8 (which is the preferred
encoding for HTML files).
You can use either .htm or .html as file extension. There is no difference; it is up to you.
Step 3: View the HTML Page in Your Browser
Dept. of Computational Sciences
Brainware University, Kolkata
Programme Name: Bachelor of Computer Applications
Course Name: HTML,CSS and CSS preprocessor (BCA20002)
Class: BCA2C
Academic Session: 2023-24
Open the saved HTML file in your favorite browser (double click on the file, or right-click
- and choose "Open with").
The result will look much like this:
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 <Tag Name>. Except few tags,
Dept. of Computational Sciences
Brainware University, Kolkata
Programme Name: Bachelor of Computer Applications
Course Name: HTML,CSS and CSS preprocessor (BCA20002)
Class: BCA2C
Academic Session: 2023-24
most of the tags have their corresponding closing tags. For example, <html> has its
closing tag</html> and <body> tag has its closing tag </body> tag etc.
Above example of HTML document uses the following tags:
Tag Description
Doctype HTML is a declaration that informs the browser of the
<!DOCTYPE html> HTML version in which the document is written. In an HTML
file, this declaration appears as the first line.
This element includes all of the material on the page and is
<html>...</html>
sometimes referred to as the root element.
The <head> element is inserted between
the <html> and <body> tags and is a container for metadata
(info about data). Metadata is information about an HTML
<head>...</head>
document. Metadata is not displayed. Metadata often defines
the document title, character set, styles, scripts, and other
meta information.
The charset element specifies the HTML document's character
encoding. The HTML5 specification encourages web developers
<meta charset="utf-8">
to utilize the UTF-8 character set, which contains nearly all of
the world's characters and symbols!
The <title> tag specifies the title of an HTML document. It
changes the title of the browser's toolbar. When a web page is
<title>...</title>
added to favourites, it offers the title. It displays the page's title
in search engine results.
The body of the document is defined by the <body> tag.
<body>...</body> The <body> element includes all of the content of an HTML
document, including headings, paragraphs, graphics,
Dept. of Computational Sciences
Brainware University, Kolkata
Programme Name: Bachelor of Computer Applications
Course Name: HTML,CSS and CSS preprocessor (BCA20002)
Class: BCA2C
Academic Session: 2023-24
Tag Description
hyperlinks, tables, lists, and so on.
It is a division tag which is used in HTML to create content
divisions on a web page, such as (text, images, header, footer,
<div>...</div> navigation bar, etc.). The div is the most commonly used tag
in web development because it allows us to split data into web
pages and create specific sections for specific data or functions.
The <a> tag defines a hyperlink, which is used to connect two
<a href="#">...</a> pages. The href attribute is the most significant attribute of
the <a> element which indicates the destination of the link.
The <p> tag defines a paragraph. Anything mentioned
between <p> and </p> is considered as a paragraph. Most
browsers perceive a line as a paragraph even if we don't use
<p>...</p>
the closing tag, i.e.,</p>, which may result in unexpected
outcomes. As a result, it is both a good convention and a
requirement that we utilize the closing tag.
A heading element implies all font changes, paragraph breaks
before and after the header, and any white space required to
<h1>...</h1>, <h2>...</h2>, display the heading. h1, h2, h3, h4, h5, and h6 are the heading
<h3>...</h3>
components, with h1 being the highest (or most important)
level and h6 being the lowest
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.
Dept. of Computational Sciences
Brainware University, Kolkata
Programme Name: Bachelor of Computer Applications
Course Name: HTML,CSS and CSS preprocessor (BCA20002)
Class: BCA2C
Academic Session: 2023-24
Example
<html>
<head>
<title>Heading Example</title>
</head>
<body>
<h1>This is heading 1</h1>
<h2>This is heading 2</h2>
<h3>This is heading 3</h3>
<h4>This is heading 4</h4>
<h5>This is heading 5</h5>
<h6>This is heading 6</h6>
</body>
</html>
Paragraph Tag
The <p> 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:
<html>
Dept. of Computational Sciences
Brainware University, Kolkata
Programme Name: Bachelor of Computer Applications
Course Name: HTML,CSS and CSS preprocessor (BCA20002)
Class: BCA2C
Academic Session: 2023-24
<head>
<title>Paragraph Example</title>
</head>
<body>
<p>Here is a first paragraph of text.</p>
<p>Here is a second paragraph of text.</p>
<p>Here is a third paragraph of text.</p>
</body>
</html>
Line Break Tag
Whenever you use the <br /> element, anything following it starts from the next line.
This tag is an example of an empty element, where you do not need opening and closing
tags, as there is nothing to go in between them.
Example
<html>
<head>
<title>Line Break Example</title>
</head>
<body>
<p>Hello<br />
You delivered your assignment on time.<br />
Thanks<br />
Mahnaz</p>
</body>
</html>
Dept. of Computational Sciences
Brainware University, Kolkata
Programme Name: Bachelor of Computer Applications
Course Name: HTML,CSS and CSS preprocessor (BCA20002)
Class: BCA2C
Academic Session: 2023-24
HTML element
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:
Start Tag Content End Tag
<p> This is paragraph content. </p>
<h1> This is heading content. </h1>
<div> This is division content. </div>
<br />
So 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.../>, <hr /> and
<br /> elements. These are known as void elements.
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.
Dept. of Computational Sciences
Brainware University, Kolkata
Programme Name: Bachelor of Computer Applications
Course Name: HTML,CSS and CSS preprocessor (BCA20002)
Class: BCA2C
Academic Session: 2023-24
HTML Link Syntax
Links are specified in HTML using the “a” tag.
<html>
<h3>Example Of Adding a link</h3>
<body>
<p>Click on the following link</p>
<a href = "[Link]">Next</a>
</body>
</html>
Dept. of Computational Sciences
Brainware University, Kolkata