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

unit 3 HTML

HTML (HyperText Markup Language) is the foundational markup language for creating web documents, providing structure and content for websites. It consists of various elements and tags that define the layout and presentation of web pages, with web browsers rendering this HTML content. CSS (Cascading Style Sheets) complements HTML by controlling the visual appearance of web documents, allowing for external, internal, and inline styling options.

Uploaded by

Harsh Sharma
Copyright
© © All Rights Reserved
Available Formats
Download as PDF, TXT or read online on Scribd
2 views

unit 3 HTML

HTML (HyperText Markup Language) is the foundational markup language for creating web documents, providing structure and content for websites. It consists of various elements and tags that define the layout and presentation of web pages, with web browsers rendering this HTML content. CSS (Cascading Style Sheets) complements HTML by controlling the visual appearance of web documents, allowing for external, internal, and inline styling options.

Uploaded by

Harsh Sharma
Copyright
© © All Rights Reserved
Available Formats
Download as PDF, TXT or read online on Scribd
You are on page 1/ 6

What is HTML?

HTML or HyperText Markup Language is common markup language for


documents intended for web browser. It creates the structure and content of
web material.

Why use HTML?


HTML is the skull structure of any website, to create or develop any website we
will need to use the HTML, like giving a header section or footer section or it can
be a sidebar section anything it could be. Basically HTML will create the
structure where we will put other elements by using HTML as well.

HTML Versions

HTML Document Structure


HTML elements are hierarchical, meaning we can create elements inside of an
element. But there are few rules to follow like the head cannot be placed inside
of a body like that so to know the basic structure of an HTML document please
check the below example code.

HTML Example Code


<!-- HTML Version Declaration -->
<!DOCTYPE html>
<!-- HTML Root Element -->
<html>

<!-- HTML Head Section -->


<head>
<!-- HTML Document Title -->
<title>This is Title</title>
</head>
<!-- HTML Body Section -->
<body>
<!-- HTML Header Element -->
<h1>This is Header</h1>
<!-- HTML Paragraphs Element -->
<p>This is a Paragraph</div>
</body>
</html>
Above example of HTML document uses the following tags:
Tag Description

<!DOCTYPE> This tag defines the document type and HTML version.

This tag encloses the complete HTML document and mainly comprises of
<html> document header which is represented by <head>...</head> and document body
which is represented by <body>...</body> tags.

This tag represents the document's header which can keep other HTML tags like
<head>
<title>, <link> etc.

<title> The <title> tag is used inside the <head> tag to mention the document title.

This tag represents the document's body which keeps other HTML tags like <h1>,
<body>
<div>, <p> etc.

<h1> to <h6> Specifies header h1 to header h6.

<p> This tag represents a paragraph.

Role of Web Browsers in HTML


Web Browsers like Google Chrome, Mozilla Firefox, Microsoft Edge, Apple Safari,
Opera, etc are able to show the output of HTML code, it will define the font size,
weight, structure, etc based on tags and attributes.

HTML Tags, Attributes and Elements


HTML tags and attributes create the HTML elements which are rendered on the
webpages.
 HTML Tags: Tags are similar to keywords, which specify how a web
browser will format and display content. A web browser can differentiate
between simple content and HTML content with the use of tags.
 HTML Attributes: Attributes are used to customize an element's behavior,
special terms called HTML attributes are utilized inside the opening tag.
An HTML element type can be modified via HTML attributes.
 HTML Elements: Elements are building blocks of a web page. It consists of
a start tag, an end tag, and the content between them.

Importance of Learning HTML


It is important to learn HTML if you want to pursue your career in Web
Development. A list of few things that required HTML to create on any
webpages.

 Paragraph: The paragraph in the HTML document is used to express


thoughts on the point in a clear way. In HTML the paragraph information
is placed inside HTML - <p> Tag.
 Headings HTML Heading refers to the 6 levels through <h1> to <h6>, h1
being the most important heading level and h6 of lowest importance.
 Block Elements: Block elements are those who created a space just below of
that element, and by default it renders on the left side unless we
manipulate the direction by using any attribute of CSS property. Block
elements are <div>, <p>, <table> and so on.
 Line Breaks: It is typically used to create separation between pieces of
information or control the layout of content on a webpage for print media.

CSS -Cascading Style sheet

CSS or Cascading Style Sheets is a tool that defines how web documents look on
screens or in print. Since its introduction in 1994, the W3C has encouraged the
use of style sheets for web design. CSS lets you control the presentation of your
content, whether it's on a screen, in print, or for accessibility, making web
design more flexible and efficient.

We can re-write the above example with the help of CSS as follows.

Open Compiler
<!DOCTYPE html>
<html>
<head>
<title>HTML CSS</title>
</head>
<body>
<p style="color:green;font-size:24px;">
Hello, World!
</p>
</body>
</html>

Types of CSS
There is no type or variety in CSS actually there is three ways to include CSS in
your HTML document.

 External CSS: Define style sheet rules in a separate .css file and then
include that file in your HTML document using HTML <link> tag.
 Internal CSS: Define style sheet rules in the header section of the HTML
document using <style> tag.
 Inline CSS: Define style sheet rules directly along-with the HTML elements
using style attribute.

External CSS
If you need to use your style sheet to various pages, then it’s always
recommended to define a common style sheet in a separate file. A cascading
style sheet file will have extension as .css and it will be included in HTML files
using <link> tag.

Consider we define a style sheet file style.css which has following rules.

.red{
color: red;
}
.thick{
font-size:20px;
}
.green{
color:green;
}
HTML FILE

Open Compiler
<!DOCTYPE html>
<html>
<head>
<title>HTML External CSS</title>
<link rel="stylesheet" type="text/css" href="/html/style.css">
</head>
<body>
<p class="red">This is red</p>
<p class="thick">This is thick</p>
<p class="green">This is green</p>
<p class="thick green">
This is thick and green
</p>
</body>
</html>

Internal CSS
If you want to apply Style Sheet rules to a single document only, then you can
include those rules in the header section of the HTML document
using <style> tag. Rules defined in the internal style sheet override the rules
defined in an external CSS file.

Open Compiler
<!DOCTYPE html>
<html>
<head>
<title>HTML Internal CSS</title>
<style type="text/css">
.red {
color: red;
}
.thick {
font-size: 20px;
}
.green {
color: green;
}
</style>
</head>
<body>
<p class="red">This is red</p>
<p class="thick">This is thick</p>
<p class="green">This is green</p>
<p class="thick green">
This is thick and green
</p>
</body>
</html>

Inline CSS
You can apply style sheet rules directly to any HTML element using the style
attribute of the relevant tag. This should be done only when you are interested
in making a particular change in any HTML element. Rules defined inline with
the element override the rules defined in an external CSS file as well as the
rules defined in <style> element.

Open Compiler
<!DOCTYPE html>
<html>
<head>
<title>HTML Inline CSS</title>
</head>
<body>
<p style="color:red;">This is red</p>
<p style="font-size:20px;">This is thick</p>
<p style="color:green;">This is green</p>
<p style="color:green;font-size:20px;">
This is thick and green
</p>
</body>
</html>
Print Page

You might also like