HTML, CSS BASICS OF HTML AND CSS USED IN WEBSITE.pptx

2
HTML Basics
 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 is Not Case Sensitive

3
Example of HTML Code
<!DOCTYPE html>
<html>
<head>
<title>Title of Page</title>
</head>
<body>
<p> Life begins at the end <br> of your comfort zone </p>
</body>
</html>

4
Explanation of the Example
 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).

5
Explanation of the Example
 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 <p> element defines a paragraph.

6
HTML Basics
 Every HTML document begins with an HTML
document tag. Although this is not mandatory, it is a
good convention to start the document with this
below-mentioned tag.
 <!DOCTYPE html>
 Every HTML code must be enclosed between basic
HTML tags. It begins with <html> and ends
with </html> tag.

7
HTML Basics
 The head tag comes next which contains all the
header information of the web page or documents
like the title of the page and other miscellaneous
information. This information is enclosed within the
head tag which opens with <head> and ends
with </head>.
 We can mention the title of a web page using
the <title> tag. This is header information and hence
is mentioned within the header tags. The tag begins
with <title> and ends with </title>.

8
HTML Basics
 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>. All content is
enclosed within this tag.

9
HTML Elements
 The HTML element is everything from the start tag to the
end tag:
<tagname> Content goes here... </tagname>
 Example
<p> is starting tag of a paragraph, and </p> is
closing tag of the same paragraph but,
<p> This is paragraph </p>
is an element.

10
HTML Elements
 Empty Elements
 Some HTML elements have no content (like the <br>
element). These elements are called empty
elements. Empty elements do not have an end tag.
 Nested HTML Elements
 An element within an element is called nested
element.

11
Example of Nested Element
<!DOCTYPE html>
<html>
<head>
<title> My first Program </title>
</head>
<body>
<p>My first paragraph</p>
</body>
</html>

12
HTML Attributes
 Attributes provide additional information about
elements. They are always specified in the start tag.
Example
 <img> Element
 <img src=“image.jpg" alt=“alternative text“
width="500" height="600">
 src, alt, width and height are attributes of <img>

13
HTML Attributes
 <a> element
 <a href="https://www.google.com"> click here </a>
 Href is an attribute of <a>
 <p> element
 <p align=“left”> This is left aligned </p>
 Align is an attribute of <p>

14
HTML Basics
 HTML Headings
 These tags help us to give headings to the content of a
webpage. These tags are mainly written inside the body
tag. HTML provides us with six heading tags
from <h1> to <h6>. <h1> defines the most important
heading. Every tag displays the heading in a different
style and font size.
 HTML Paragraph
 These tags help us to write paragraph statements on a
webpage. They start with the <p> tag and ends
with </p>.

15
HTML Basics
 HTML Break
These tags are used for inserting a single line type break. It does
not have any closing tag. In HTML the break tag is written as <br>.
Example:
<!DOCTYPE html>
<html>
<head>
<title> My first Program </title>
</head>
<body>
<p> Life begins at the end <br> of your comfort zone </p>
</body>
</html>

16
 HTML Horizontal Line
 The <hr> tag is used to break the page into various parts,
creating horizontal margins with help of a horizontal line
running from the left to right-hand side of the page. This is
also an empty tag and doesn’t take any additional
statements.
 HTML Images
 The image tag is used to insert an image into our web
page. <img src=”source_of_image” alt=“alternative
text“>
HTML Basics

17
HTML Basics
 Anchor Tag
 The <a> tag defines a hyperlink, which is used to link
from one page to another.
 <a href="https://www.google.com"> click here</a>
 <b> Tag
 This is used to bold the text.
 <p>This is normal text<b>and this is bold
text</b></p>

18
 <i> Tag
 It is used to italicize the text in HTML
 <p><i>This is Italicized text</i>This is simple text</p>
 <u> Tag
 It is used to underline the text in HTML.
 <p>This is some <u>underlined</u> text.</p>
HTML Basics

19
CSS
(Cascading Style Sheet)

20
What is CSS
 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

21
CSS Syntax
 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.
 Multiple CSS declarations are separated with semicolons,
and declaration blocks are surrounded by curly braces.

22
How to add CSS
 There are three ways of inserting CSS
 External CSS
 Internal CSS
 Inline CSS
 External CSS
 With an external style sheet, we can change the look of
an entire website by changing just one file!
 Each HTML page must include a reference to the
external style sheet file inside the <link> element, inside
the head section.

23
Example of External CSS
<!DOCTYPE html>
<html>
<head>
<link rel="stylesheet" href="m
ystyle.css">
</head>
<body>
<h1>heading</h1>
<p>paragraph.</p>
</body>
</html>
 External styles are defined
within the <link> element,
inside the <head> section
of an HTML page
 An external style sheet
can be written in any text
editor, and must be
saved with a .css
extension.
 With an external style
sheet, you can change
the look of an entire
website by changing just
one file

24
Example of External CSS
 Here is how the
"mystyle.css" file looks:
body {
background-
color: lightblue;
}
h1 {
color: navy;
margin-left: 20px;
}

25
Example of Internal CSS
<!DOCTYPE html>
<html>
<head>
<style>
body {
background-color: pink; }
h1 {
color: blue;
margin-left: 40px; }
</style>
</head>
<body>
<h1>heading</h1>
<p>paragraph.</p>
</body>
</html>
 An internal style sheet
may be used if one single
HTML page has a unique
style.
 Internal styles are defined
within the <style>
element, inside the
<head> section of an
HTML page

26
Example of Inline CSS
<!DOCTYPE html>
<html>
<body>
<h1 style="color:blue;text-
align:center;">heading</h1>
<p style="color:red;">paragra
ph.</p>
</body>
</html>
 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.

27
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.
 Assume that an external style sheet has the following
style for the <h1> element:
 h1 {
color: red;
}

28
 Then, assume that an internal style sheet also has the
following style for the <h1> element:
 h1{
color: blue;
}
 Now, if the internal style is defined after the link to the
external style sheet, the <h1> elements will be “blue“:

29
<head>
<link rel="stylesheet“ href="mystyle.css">
<style>
h1 {
color: blue;
}
</style>
</head>

30
 If the internal style is
defined before the link
to the external style
sheet, the <h1>
elements will be “red":
<head>
<style>
h1 {
color: blue;
}
</style>
<link rel="stylesheet“
href="mystyle.css">
</head>

31
 If the internal style is defined before the link to the
external style sheet, but still we want blue color for
<h1> elements. Then we have to use !important rule.
 The !important rule in CSS is used to add more
importance to a property/value than normal.
 In fact, if we use the !important rule, it will override ALL
previous styling rules for that specific property on that
element.

32
<head>
<style>
h1 {
color: blue !important;
}
</style>
<link rel="stylesheet“
href="mystyle.css">
</head>
 Now, the <h1>
elements will be
“blue”.

HTML, CSS BASICS OF HTML AND CSS USED IN WEBSITE.pptx

Recommended

More Related Content

Similar to HTML, CSS BASICS OF HTML AND CSS USED IN WEBSITE.pptx (20)

Recently uploaded (20)

HTML, CSS BASICS OF HTML AND CSS USED IN WEBSITE.pptx

Editor's Notes