Scribd
Upload
25 views

HTML and It's Properties

HTML stands for Hypertext Markup Language. It is a markup language that describes the structure of web pages using tags. HTML allows users to create web pages that contain text, hyperlinks, images, and other graphics. Some key HTML elements include headings, paragraphs, line breaks, and bold or italic text. CSS can be used to further style and lay out HTML elements on a page.

Uploaded by

Let's discovery What
Copyright
© © All Rights Reserved
Available Formats
Download as PPTX, PDF, TXT or read online on Scribd
25 views

HTML and It's Properties

HTML stands for Hypertext Markup Language. It is a markup language that describes the structure of web pages using tags. HTML allows users to create web pages that contain text, hyperlinks, images, and other graphics. Some key HTML elements include headings, paragraphs, line breaks, and bold or italic text. CSS can be used to further style and lay out HTML elements on a page.

Uploaded by

Let's discovery What
Copyright
© © All Rights Reserved
Available Formats
Download as PPTX, PDF, TXT or read online on Scribd
You are on page 1/ 24

html

HTML stands for Hypertext Markup Language. It is


a markup language that describes the structure of the
web page. It allows us to create web pages that
contain text and graphics.
Tools required for creating an html document
1. A text editor like a notepad or a WordPad program is required to write the
HTML code
or
A WYSIWYG editor (what you see is what you get) which has in-built
interface to design a web page quickly without knowing the actual HTML
commands, for example, adobe Dreamweaver

2. A web browser is used to display or view the HTML file. Some commonly
used web browsers are internet explorer, google chrome, Mozilla Firefox,
and so on
Creating HTML Documents
1. Open notepad by clicking on search bar > type notepad > click on notepad . The notepad window appear
2. type the following HTML code in the note pad window (fig. 1.1)
3. Click on file > save as. The save as dialog box opens. Enter the name of the file and enclose with .htm or .html
Extension with it for example, first.html (fig. 1.2) click on save button

Fig. 1.1 Fig. 1.2


4. To view a saved web page, open a web browser, for example, for example, google chrome. Now,
Press ctrl+o . The open dialog box appears. Locate your file and select it. Click on the open button (fig. 1.3)
5. The web page opens in the browser window (fig. 1.4).

Fig. 1.3 Fig. 1.4


HTML Tags, elements and Attributes

Tag
A tag is the basic formatting tool of HTML. It is used to tell a web browser how and where a particular text is
to be displayed in a web page.
A tag name is always written between the angle brackets’<‘ and ‘>’. Some examples of HTML tags are
<tittle>,<hr> and <b>.

A tag starts with an ON tag or opening tag, for example <body>, and ends with OFF tag or closing tag, i.e. the
tag name repeated with a ‘/” (forward slash) sign, for example </body>.

Classification of tags
An html tag can be either an empty tag or a container tag
 Empty tags: the tags which do not requires an OFF tag are called empty tags. It is not necessary to close
these tags. For example <br> tag which is used to give a line break.
 Container tags: the tags which have both, the ON and OFF tags are called container tags. These tags are
necessary to be closed. For example <u> hello world </u>. This tag will not work if it is not closed.
HTML Tags, elements and Attributes
Elements
An element is the basic building block of HTML. It includes everything starting from the opening till the closing
Tag . For example <u> how are you ?</u> is an HTML element. Tags just mark the beginning and end of an HTML element

Attributes
Attributes are extra bits of information related to a tag. Attributes appear inside the opening tag or the on tag
And their values are written inside the quotation marks.
Syntax:
<tag_name attribute_name=“attribute_value”>

For example, <p align =“center”> in this example, ‘align’ is an attribute of <p> tag. It indicates that the text inside the <p>
tag is to be displayed in the center of the browser window.
Rules for writing HTML code
There are some points which you should keep in mind while creating an HTML document.
 Tags should remain in the proper tag order.
 HTML elements can be nested. For example, <b><i>hello</i></b> will make the word
hello appear bold as well as italicized. A tag which opened first should be closed in the
end.
 Always close the tags. A tag which is opened should be closed to avoid confusion.
 Prefer lower case characters. However, tags and attributes are not case sensitive but still it
is a good practice to use lower case characters while writing the code.
 Always quote attribute values, because unquoted values may create problem while
displaying result
 Tag names cannot contain spaces. For example, < H T M L > will not work properly.
Even this type of spacing < HTML > will create a problem while executing.
HTML document structure
An HTML document is always enclosed within <html> and </html> tags. Every HTML
document is divided into two sections head and body.
 The head section contains the information about the web page such as document's title.
 The body section contains the actual content which is to be displayed in the web page.
The structure of the HTML document is discussed here:

Fig. 1.5
HTML document structure
 <!doctype html>: The doctype declaration is used to tell the web browser that the
document being visited is an html document. This statement need not be closed.
 <html>: This tag tells the browser that the document is a HTML document. It marks the
beginning and end of the document.
 <head>: This is a container tag for all the information related to the web page,
for example, the title, scripts, style, and so on.
 <title>: The title to be displayed in the title bar of the web page is enclosed within the
<title> and </title> tag. This is a container tag.
 <body>: This tag includes all the information that you want to be displayed on the web
page like text, graphics, videos, and so on. This is also a container tag.
HEADING, PARAGRAPH AND LINE BREAK ELEMENTS
Heading Tags (<hn> ... </hn>)
The <hn> tag helps in defining the different levels of headings in a web page. In the <hn>
tag, n varies from 1 to 6.
For example,
<h1> Heading Level 1 </h1>,
<h2> Heading Level 2 </h2>, and so on.
The tag <h1> is used to define the largest heading, and the tag <h6> is used to define the
smallest heading.

Fig. 1.6 Fig. 1.7


HEADING, PARAGRAPH AND LINE BREAK ELEMENTS

Paragraph Tag (<p></p>)


The <p> tag is used to mark the beginning of a new paragraph. This tag
automatically leaves
a single blank line space in between two paragraphs.

Fig. 1.8 Fig. 1.9


HEADING, PARAGRAPH AND LINE BREAK ELEMENTS

Line Break Tag (<br>)


This tag is used to give a line break. The text written after <br> tag starts
from a new line.
This element does not have an end tag. Thus it is an empty tag.

Fig. 1.10 Fig. 1.11


HEADING, PARAGRAPH AND LINE BREAK ELEMENTS

Horizontal Rule Tag (<hr>)


In HTML5, the <hr> tag defines a thematic break in the content. It appears
as a horizontal
rule across the web page. <hr> is also an empty tag.

Fig. 1.12 Fig. 1.13


HEADING, PARAGRAPH AND LINE BREAK ELEMENTS

Comment Tag (<!--comment -->)


The <!-- comment --> tag is used to insert comments in the code. Comments
help you to explain your code. Comments are not displayed in the browsers.
The example on the next page shows the use of <!-- comment --> tag.

Fig. 1.14 Fig. 1.15


HEADING, PARAGRAPH AND LINE BREAK ELEMENTS
Bold and Italics Tags (<b></b> and <i> </i>)
The <b> tag makes the text appear bolder than the normal text. The <i> tag makes the
text
appear italicized. The example below shows the use of <b> and <i> tag.
According to the HTML5 specification, the <b> tag should be used as a last resort to
highlight
the text. You can however use <hn>, <em> or <strong> tag to emphasize.

Fig. 1.16 Fig. 1.17


Background properties
Property description values example

Background-color Used to change the background color of an Color name, color code Background-color: red;
element

Background-size Used to specify the size of the background Auto, width in percent, height Background-size: auto;
image in percent Background-size:20% 10%

Background-image Used to specify the image to be used in the URL(image URL) Background-image:url(tree.jpg);
background of the element mentioned

Background-repeat Used to control the repetition of an image in Repeat, repeat-x(to repeat background-repeat: repeat-y;
the background of the element ,i.e. repeating horizontally), background-repeat: repeat-x;
horizontally, vertically or no repition at all Repeat-y(to vertically),no- background-repeat: no-repeat;
repeat

Background-attachment Used to decide whether the background will Scroll, fixed Background-attachment: scroll;
be scrolling or fixed Background-attachment: fixed;

Background-position Decides the starting position of the image Left ,right ,center ,left top ,left Background-position: left top;
used as background center ,left bottom, right top,
right center, right bottom ,
center top, center center,
center bottom, x% y%

You might also like