a090de5c-874a-47a9-bb8f-878d8dc94558_HTML NOTES UNIT-3(BCA III SEM)

MAHARISHI UNIVERSITY OF
INFORMATION TECHNOLOGY
DIGITAL NOTES
[Department of Computer Application]
Subject : HTML PROGRAMING

Name
Subject : BCA-303
Code
Course : BCA
Branch :
3RD
Semester :
Prepared by : suraj singh
SESSION 2024-25
HTML Introduction
HTML is the standard markup language for creating Web pages.
• HTML stands for Hyper Text Markup Language

• HTML is the standard markup language for creating Web pages
• HTML describes the structure of a Web page
• HTML consists of a series of elements
• HTML elements tell the browser how to display the content
• HTML elements label pieces of content such as "this is a heading", "this is a paragraph", "this is a
link", etc.
• What is HTML?
• HTML stands for HyperText Markup Language and it is used to create
webpages. It uses HTML tags and attributes to describe the structure and
formatting of a web page.
• HTML consists of various elements, that are responsible for telling search
engines how to display page content. For example, headings, lists, images, links,
and more.
A Simple HTML Document

Example
<!DOCTYPE html>
<html>
<head>
<title>Page Title</title>
</head>
<body>
<h1>My First Heading</h1>

<p>My first paragraph.</p>
</body>
</html>
Example Explained
• The <!DOCTYPE html> declaration defines that this document is an HTML5 document
• The <html> element is the root element of an HTML page
• The <head> element contains meta information about the HTML page
• The <title> element specifies a title for the HTML page (which is shown in the browser's title bar
or in the page's tab)
• The <body> element defines the document's body, and is a container for all the visible contents,
such as headings, paragraphs, images, hyperlinks, tables, lists, etc.
• The <h1> element defines a large heading
• The <p> element defines a paragraph
Features of HTML
• It is easy to learn and easy to use.
• It is platform-independent.
• Images, videos, and audio can be added to a web page.
• Hypertext can be added to the text.
• It is a markup language.
HTML Elements and Tags
HTML uses predefined tags and elements that instruct the browser on how to display the
content. HTML elements include an opening tag, some content, and a closing tag. It’s
important to remember to include closing tags. If omitted, the browser applies the effect
of the opening tag until the end of the page.
This section will dive into the basic structure of an HTML page, which includes
essential building-block elements like doctype declaration, HTML, head, title, and body
elements.
HTML Page Structure

The basic structure of an HTML page is shown below. It contains the essential building-
block elements (i.e. doctype declaration, HTML, head, title, and body elements) upon
which all web pages are created.
• <!DOCTYPE html> – This is the document type declaration (not technically
a tag). It declares a document as being an HTML document. The doctype
declaration is not case-sensitive.
• <html> – This is called the HTML root element. All other elements are
contained within it.
• <head> – The head tag contains the “behind the scenes” elements for a
webpage. Elements within the head aren’t visible on the front end of a
webpage. HTML elements used inside the <head> element include:
• <style> – This HTML tag allows us to insert styling into our web pages and
make them appealing to look at with the help of CSS.
• <title> – The title is what is displayed on the top of your browser when you
visit a website and contains the title of the webpage that you are viewing.
• <base> – It specifies the base URL for all relative URL’s in a document.
• <noscript> – Defines a section of HTML that is inserted when the scripting
has been turned off in the user’s browser.
• <script> – This tag is used to add functionality to the website with the help of
JavaScript.
• <meta> – This tag encloses the metadata of the website that must be loaded
every time the website is visited. For eg:- the metadata charset allows you to
use the standard UTF-8 encoding on your website. This in turn allows the
users to view your webpage in the language of their choice. It is a self-closing
tag.
• <link> – The ‘link’ tag is used to tie together HTML, CSS, and JavaScript. It
is self-closing.
• <body> – The body tag is used to enclose all the visible content of a webpage.
In other words, the body content is what the browser will show on the front
end.
HTML History
HTML is a markup language used by the browser to manipulate text, images, and other
content, in order to display it in the required format. HTML was created by Tim Berners-
Lee in 1991. The first-ever version of HTML was HTML 1.0, but the first standard
version was HTML 2.0, published in 1995.
Currently, we are using HTML5, which is the latest and most recent version of HTML.
Advantages of HTML
• HTML is used to build websites.
• It is supported by all browsers.
• It can be integrated with other languages like CSS, JavaScript, etc.
Disadvantages of HTML
• HTML can only create static web pages. For dynamic web pages, other
languages have to be used.
• A large amount of code has to be written to create a simple web page.
• The security feature is not good.
Creating a complete document with head and body tag.

Follow the steps to create HTML document.
• Open a text editor Notepad++.

• Write your HTML code into Notepad++.
• Save the file with .html extension.
• Run the file.
Example
Below is the structure of the HTML page.
Open Compiler
<!DOCTYPE html>
<html>
<head>
<title>HTML Articles</title>
</head>
<body>
<p>The paragraph which are need to display on the web page are to be placed in between the paragraph
tags.</p>
</body>
</html>
On executing the above program, the information about the head tags gets displayed on the title bar and,
the information inside the body tag displayed on the browser.
HTML <mark> tag

HTML <mark> tag is used to highlight the some text part inside of another element such as paragraph,
for reference or any notation purpose.
This is a newly added tag and introduced in HTML5.
In most of the browser, the text contained with <mark> tag renders with the yellow background, but it
can be changed using CSS background-color property.
Syntax:
1. <mark>write your content here....</mark>
Following are some specifications about the HTML <mark> tag
Display Inline
Start tag/End tag Both Start and End tag
Usage Semantic and textual
Example
1. <!DOCTYPE html>
2. <html>
3. <head>
4. <title>Mark Tag</title>
5. </head>
6. <body>
7. <h2>Exmaple of Mark Tag</h2>
8. <p>You can easily learn designing a website with our <mark>Web designing tutorial. </ma
rk></p>
9. </html>
Output:
HTML Paragraphs
A paragraph always starts on a new line, and is usually a block of text.
HTML Paragraphs
The HTML <p> element defines a paragraph.
A paragraph always starts on a new line, and browsers automatically add some white space (a margin)
before and after a paragraph.
Example
<p> This is a paragraph.</p>
<p>This is another paragraph.</p>
HTML Display
You cannot be sure how HTML will be displayed.
Large or small screens, and resized windows will create different results.
With HTML, you cannot change the display by adding extra spaces or extra lines in your HTML code.
The browser will automatically remove any extra spaces and lines when the page is displayed:
Example
<p>
This paragraph
contains a lot of lines
in the source code,
but the browser
ignores it.
</p>
<p>
This paragraph
contains a lot of spaces
in the source code,
but the browser
ignores it.
</p>
HTML Horizontal Rules
The <hr> tag defines a thematic break in an HTML page, and is most often displayed as a horizontal rule.
The <hr> element is used to separate content (or define a change) in an HTML page:
Example
<h1>This is heading 1</h1>
<p>This is some text.</p>
<hr>
<h2>This is heading 2</h2>
<p>This is some other text.</p>
<hr>
The <hr> tag is an empty tag, which means that it has no end tag.
HTML Line Breaks

The HTML <br> element defines a line break.
Use <br> if you want a line break (a new line) without starting a new paragraph:
Example
<p>This is<br>a paragraph<br>with line breaks.</p>

a090de5c-874a-47a9-bb8f-878d8dc94558_HTML NOTES UNIT-3(BCA III SEM)

Uploaded by

Copyright:

Available Formats

a090de5c-874a-47a9-bb8f-878d8dc94558_HTML NOTES UNIT-3(BCA III SEM)

Uploaded by

Document Information

Copyright

Available Formats

Share this document

Share or Embed Document

Sharing Options

Did you find this document useful?

Is this content inappropriate?

Copyright:

Available Formats

a090de5c-874a-47a9-bb8f-878d8dc94558_HTML NOTES UNIT-3(BCA III SEM)

Uploaded by

Copyright:

Available Formats

MAHARISHI UNIVERSITY OF

Subject : HTML PROGRAMING

• HTML stands for Hyper Text Markup Language

A Simple HTML Document

<h1>My First Heading</h1>

HTML Page Structure

Creating a complete document with head and body tag.

• Open a text editor Notepad++.

Below is the structure of the HTML page.

HTML <mark> tag

This is a newly added tag and introduced in HTML5.

1. <mark>write your content here....</mark>

Following are some specifications about the HTML <mark> tag

Usage Semantic and textual

HTML Line Breaks

You might also like