The document is an introduction to HTML and CSS presented by Dipak Kumar. It covers basic HTML tags for headings, paragraphs, and text formatting. It also discusses using CSS for colors, and the different methods of applying CSS including inline, internal and external stylesheets. The goal is to teach students the basics of HTML and CSS for creating webpages.

1. Introduction Basic Tag Heading and Paragraph Text and Colors HTML CSS
Introduction to IT System
Subject Code: 2002203
Lecture 03: HTML (Hyper Text Markup Language) and CSS (Cascading
Style Sheets)
Dipak Kumar
Lecturer
Department of CSE
Government Polytechnic Sitamarhi, Bihar, India-843331
© 2021 Dipak Kumar, All Rights Reserved

2. Introduction Basic Tag Heading and Paragraph Text and Colors HTML CSS
Outline
1 Introduction
2 Basic Tag
Basic Structure of HTML
Attributes
3 Heading and Paragraph
Heading
Paragraph
4 Text and Colors
Text Formatting
colors
5 HTML CSS
CSS
Inline
Internal
2/28 Dipak Kumar Introduction to IT System (2002203)

3. Introduction Basic Tag Heading and Paragraph Text and Colors HTML CSS
Introduction to HTML
What is HTML?
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.
3/28 Dipak Kumar Introduction to IT System (2002203)

4. Introduction Basic Tag Heading and Paragraph Text and Colors HTML CSS
Why to Learn HTML?
Create Web site - You can create a website or customize an existing web
template if you know HTML well.
Become a web designer - If you want to start a carrer as a professional web
designer, HTML and CSS designing is a must skill.
Understand web - If you want to optimize your website, to boost its speed and
performance, it is good to know HTML to yield best results.
Learn other languages - Once you understands the basic of HTML then other
related technologies like javascript, php, or angular are become easier to
understand.
4/28 Dipak Kumar Introduction to IT System (2002203)

5. Introduction Basic Tag Heading and Paragraph Text and Colors HTML CSS
How to Run HTML Code
Step-1: Open Notepad (PC) or Notepad++(PC).
Open the Start Screen (the window symbol at the bottom left on your
screen). Type Notepad.
Step-2: Write Some HTML.
Step-3: Save the HTML Page.
Save the file on your computer. Select File Save as in the Notepad menu.
like Demo.html
Step-4: View the HTML Page in Your Browser.
Open the saved HTML file in your favorite browser (double click on the file, or
right-click - and choose ”Open with”).
5/28 Dipak Kumar Introduction to IT System (2002203)

6. Introduction Basic Tag Heading and Paragraph Text and Colors HTML CSS
Step-1: Open Notepad
6/28 Dipak Kumar Introduction to IT System (2002203)

7. Introduction Basic Tag Heading and Paragraph Text and Colors HTML CSS
Step-2: Write HTML Code in Notepad
7/28 Dipak Kumar Introduction to IT System (2002203)

8. Introduction Basic Tag Heading and Paragraph Text and Colors HTML CSS
Step-3: Save the file as ”Demo.html”
8/28 Dipak Kumar Introduction to IT System (2002203)

9. Introduction Basic Tag Heading and Paragraph Text and Colors HTML CSS
Step-4: Views the HTML Page in Browser
9/28 Dipak Kumar Introduction to IT System (2002203)

10. Introduction Basic Tag Heading and Paragraph Text and Colors HTML CSS
Example of HTML
The !DOCTY PEhtml 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.
The body element defines the document’s body.
The h1 element defines a large heading
The p element defines a paragraph
10/28 Dipak Kumar Introduction to IT System (2002203)

11. Introduction Basic Tag Heading and Paragraph Text and Colors HTML CSS
Basic Structure of HTML
Basic HTML Tag
!DOCTY PEhtml this the html document
The HTML element is everything from the start tag to the end tag:
tagname Content goes here... /tagname
html ... /html
h1 My First Heading¡/h1
p My first paragraph. /p
h1
This is heading 1
/h1
h2
This is heading 2
/h2
h3
This is heading 3
/h3
!--This is a comment. Comments are ...
not displayed in the browser--
To learn HTML, you will need to study
various tags and understand how they
behave.
11/28 Dipak Kumar Introduction to IT System (2002203)

12. Introduction Basic Tag Heading and Paragraph Text and Colors HTML CSS
Basic Structure of HTML
HTML Code Example:
The html element is the root element and it defines the whole HTML
document.
!DOCTYPE html
html
body
h1
My First Heading
/h1
p
My first paragraph.
/p
/body
/html
It has a start tag html and an end
tag /html .
Then, inside the html element
there is a body element.
Note: Never Skip the End Tag.
12/28 Dipak Kumar Introduction to IT System (2002203)

13. Introduction Basic Tag Heading and Paragraph Text and Colors HTML CSS
Basic Structure of HTML
Basic Tag
Start Tag Description End Tag
html Defines the root of an HTML document /html
body Defines the document’s body /body
h1 .. h6 Defines HTML headings /h1 .. /h6
p Element defines a paragraph /p
br Element defines break the line. none
13/28 Dipak Kumar Introduction to IT System (2002203)

14. Introduction Basic Tag Heading and Paragraph Text and Colors HTML CSS
Basic Structure of HTML
Heading Code Example
Figure: Heading Examples
14/28 Dipak Kumar Introduction to IT System (2002203)

15. Introduction Basic Tag Heading and Paragraph Text and Colors HTML CSS
Attributes
HTML Attributes
All HTML elements can have attributes.
Attributes provide additional information about elements.
Attributes are always specified in the start tag.
Attributes usually come in name/value pairs like:name=”value”.
href: hyperlink Attributes
The a tag defines a hyperlink. The href attribute specifies the URL of
the page the link goes to that url.
a href=https://www.google.com Visit google /a
15/28 Dipak Kumar Introduction to IT System (2002203)

16. Introduction Basic Tag Heading and Paragraph Text and Colors HTML CSS
Attributes
HTML Attributes
src Attributes: The img tag is used to embed an image in an HTML
page. The src attribute specifies the path to the image to be displayed:
img src=GPSMR logo.jpeg
width and height Attributes: The img tag should also contain the width
and height attributes, which specifies the width and height of the image (in
pixels):
img src=GPSMR logo.jpeg width=500 height=600
style Attribute: The style attribute is used to add styles to an element, such as
color, font, size, and more.
p style=color:red;
This is a red paragraph.
/p
16/28 Dipak Kumar Introduction to IT System (2002203)

17. Introduction Basic Tag Heading and Paragraph Text and Colors HTML CSS
Heading
HTML Heading and Paragraph
Heading:
h1
Heading 1
/h1
h2
Heading 2
/h2
h3
Heading 3
/h3
h4
Heading 4
/h4
h5
Heading 5
/h5
h6
Heading ...
6
/h6
!--Heading Example--
Paragraph:
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
17/28 Dipak Kumar Introduction to IT System (2002203)

18. Introduction Basic Tag Heading and Paragraph Text and Colors HTML CSS
Paragraph
Paragraph
The HTML p .... /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.
hr (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:
The HTML br element defines a line break.
The HTML pre ... /pre element defines preformatted text.
The text inside a ¡pre¿ element is displayed in a fixed-width font (usually
Courier), and it preserves both spaces and line breaks.
18/28 Dipak Kumar Introduction to IT System (2002203)

19. Introduction Basic Tag Heading and Paragraph Text and Colors HTML CSS
Paragraph
Paragraph Example
!DOCTYPE html
html
body
p
This paragraph br
contains a lot of lines
in the br
source code, but the br
browser ignores it.
/p
hr
pre
Welcome to Gp Sitamarhi.
/pre
hr
/body
/html
19/28 Dipak Kumar Introduction to IT System (2002203)

20. Introduction Basic Tag Heading and Paragraph Text and Colors HTML CSS
Text Formatting
Text Formatting
Tags Description
b .. /b Defines bold text
em .. /em Defines emphasized text
i .. /i Defines a italic text
small .. /small Defines smaller text
strong .. /strong Defines important text
sub .. /sub Defines subscripted text
sup .. /sup Defines superscripted text
ins .. /ins Defines inserted text underline
del .. /del Defines deleted text
mark .. /mark Defines marked/highlighted text
Table: Text Formatting Tags
20/28 Dipak Kumar Introduction to IT System (2002203)

21. Introduction Basic Tag Heading and Paragraph Text and Colors HTML CSS
colors
Colors in HTML
Background Color:
p style=background
-color:Tomato;
Lorem ipsum...
/p
Text Color:
p style=color:MediumSeaGreen;
Ut wisi enim...
/p
Boarder Color:
h1 style=border:2px solid Violet;
Hello World
/h1
Color Values:
h1 style=background
-color:rgb(255, 99, 71);
...
/h1
h1 style=background
-color:hsl(9, 100%, 64%);
...
/h1
21/28 Dipak Kumar Introduction to IT System (2002203)

22. Introduction Basic Tag Heading and Paragraph Text and Colors HTML CSS
CSS
CSS
CSS stands for Cascading Style Sheets.
CSS saves a lot of work. It can control the layout of multiple web pages all at
once.
Cascading Style Sheets (CSS) is used to format the layout of a webpage.
Inline - by using the style attribute inside HTML elements
Internal - by using a style element in the head section
External - by using a link element to link to an external CSS file
Note: The most common way to add CSS, is to keep the styles in external CSS
files.
22/28 Dipak Kumar Introduction to IT System (2002203)

23. Introduction Basic Tag Heading and Paragraph Text and Colors HTML CSS
CSS
Inline CSS
An inline CSS is used to apply a unique style to a single HTML element.
An inline CSS uses the style attribute of an HTML element.
The following example sets the text color of the h1 element to blue, and the
text color of the p element to red:
h1 style=color:blue;
A Blue Heading
/h1
p style=color:red;
A red paragraph.
/p
23/28 Dipak Kumar Introduction to IT System (2002203)

24. Introduction Basic Tag Heading and Paragraph Text and Colors HTML CSS
CSS
Internal CSS
An internal CSS is used to define a style for a single HTML page.
An internal CSS is defined in the head section of an HTML page, within a
style element.
24/28 Dipak Kumar Introduction to IT System (2002203)

25. Introduction Basic Tag Heading and Paragraph Text and Colors HTML CSS
CSS
External CSS
An external style sheet is used to define the style for many HTML pages.
To use an external style sheet, add a link to it in the head section of each
HTML page:
!DOCTYPE html
html
head
link rel=stylesheet href=styles.css
/head
body
h1
This is a heading
/h1
p
This is a paragraph.
/p
/body
/html
”styles.css”:
body {
background
-color: powderblue;
}
h1 {
color: blue;
}
p {
color: red;
}
25/28 Dipak Kumar Introduction to IT System (2002203)

26. Introduction Basic Tag Heading and Paragraph Text and Colors HTML CSS
CSS Tag
CSS Code
!DOCTYPE html
html
head
style
h1 { color: blue; font-family: verdana;
font-size: 300%; }
p { color: red; font-family: courier;
font-size: 160%; }
/style
/head
body
h1
This is a heading
/h1
p
This is a paragraph.
/p
/body
/html
26/28 Dipak Kumar Introduction to IT System (2002203)

27. Introduction Basic Tag Heading and Paragraph Text and Colors HTML CSS
CSS Tag
CSS Properties
Property Description
HTML style attribute for inline styling
HTML style element to define internal CSS
HTML link element to refer to an external CSS file
HTML head element to store style and link elements
color property for text colors
font − size property for text sizes
border property for borders
padding property for space inside the border
margin property for space outside the border
Table: CSS Properties
27/28 Dipak Kumar Introduction to IT System (2002203)

28. Introduction Basic Tag Heading and Paragraph Text and Colors HTML CSS
HTML Links
LINKS
28/28 Dipak Kumar Introduction to IT System (2002203)