0% found this document useful (0 votes)
18 views4 pages

HTML Basics for Class 10 Students

The document provides an introduction to HTML, explaining its purpose in web page design and the structure of an HTML document. It covers key elements such as <html>, <head>, <body>, and <title>, along with the history and advantages of learning HTML. Additionally, it includes instructions for creating an HTML document using a simple text editor like Notepad.

Uploaded by

Gourav Barfa
Copyright
© All Rights Reserved
We take content rights seriously. If you suspect this is your content, claim it here.
Available Formats
Download as PDF, TXT or read online on Scribd
0% found this document useful (0 votes)
18 views4 pages

HTML Basics for Class 10 Students

The document provides an introduction to HTML, explaining its purpose in web page design and the structure of an HTML document. It covers key elements such as <html>, <head>, <body>, and <title>, along with the history and advantages of learning HTML. Additionally, it includes instructions for creating an HTML document using a simple text editor like Notepad.

Uploaded by

Gourav Barfa
Copyright
© All Rights Reserved
We take content rights seriously. If you suspect this is your content, claim it here.
Available Formats
Download as PDF, TXT or read online on Scribd

Class 10 – Computer Application (Code: 165) Unit 2: HTML

Computer Application (Code: 165)


Class : X

Topics Covered: Introduction to web page designing using HTML: create and save an HTML
document, access a web page using a web browser.

Hyper Text Markup Language (HTML)

HTML is a special language used to create websites. This language tells the browser (Google
chrome, Internet Explorer, Mozila Firefox etc.) how to display text, images, and links on the screen.

HTML is being widely used to format web pages with the help of different tags available in HTML
language.

Hypertext

Hypertext refers to the way in which Web pages (HTML documents) are linked together. Thus, the
link available on a webpage is called Hypertext.

Markup

Markup refers to the sequence of characters or other symbols / codes that we insert at certain
places in a text or word processing file to indicate how the file should look when it is printed or
displayed or to describe the document's logical structure. The markup indicators are often called
"tags."

History of HTML

HTML was created by Berners-Lee in late 1991 but "HTML 2.0" was the first standard HTML

specification which was published in 1995. HTML 4.01 was a major version of HTML and it was

published in late 1999. Though HTML 4.01 version is widely used but currently we are having
HTML-5 version which is an extension to HTML 4.01, and this version was published in 2012.

Some of the key advantages of learning HTML:

 Create Web site


 Become a web designer
 Understand website
 Learn other languages

1
Teacher- Rajesh Singh ([Link]@[Link])
Class 10 – Computer Application (Code: 165) Unit 2: HTML

Writing HTML Document/Page


HTML is made up of Elements or Tags and attributes. All tags are contained with angular brackets

(<>). Example: <head>, <H1>, <Body> etc. We can type HTML in capital letters as well as in small
letters. So HTML is not case sensitive it teats <HEAD> and <head> in same manner.

HTML Document Structure


Every HTML document has the following structure

<html>
<head>
<title> Title of the web page is written here </title>
</head>

<body>
Content of the web page is written here
</body>
</html>

<html>

The <html> tag represents the root (First element) of an HTML document. This tag is the container
for all other HTML elements.

<html>
<head>
<title>Title of the document </title>
</head>
<body>

<h1>This is a heading</h1>
<p>This is a paragraph.</p>

</body>
</html>

2
Teacher- Rajesh Singh ([Link]@[Link])
Class 10 – Computer Application (Code: 165) Unit 2: HTML

<head>

The <head> element is a container for metadata (data about data) and is placed between the
<html> tag and the <body> tag.

Metadata typically define the document title, character set, styles, scripts, and other meta
information.

Metadata is data about the HTML document. Metadata is not displayed.

<html lang="en">
<head>
<title>Title of the document</title>
</head>
<body>

<h1>This is a heading</h1>
<p>This is a paragraph.</p>

</body>
</html>

The following elements can go inside the <head> element:

 <title> (required in every HTML document)


 <style>
 <base>
 <link>
 <meta>
 <script>
 <noscript>

<body>

 The <body> tag defines the document's body.

 The <body> element contains all the contents of an HTML document, such as headings,
paragraphs, images, hyperlinks, tables, lists, etc.

 Note: There can only be one <body> element in an HTML document.

3
Teacher- Rajesh Singh ([Link]@[Link])
Class 10 – Computer Application (Code: 165) Unit 2: HTML

<title>

The <title> tag defines the title of the document. The title must be text-only, and it is shown in the
browser's title bar or in the page's tab. We can NOT have more than one <title> element in an
HTML document.

Creating an HTML document (Web page) using notepad text editor

Web pages can be created and modified by using any simple text editor like (Notepad).

below are the steps to create a web page with Notepad.

 Open Start > Programs > Accessories > Notepad


 Write or copy some HTML Code into Notepad like this.

 To save the file on your computer. Select File > Save as in the Notepad menu.
 Name the file "[Link]" and set the encoding to UTF-8 (which is the preferred encoding
for HTML files). We can use either .htm or .html as file extension. There is no difference, it is
up to us.
 Open the saved HTML file in a browser (double click on the file, or right-click - and choose
"Open with") and select the browser (Internet Explorer/Chrome/Firefox).

OUTPUT:

4
Teacher- Rajesh Singh ([Link]@[Link])

Common questions

Powered by AI

HTML tags and attributes are foundational to web page design as they define the structure and presentation of web content. Tags like <head>, <title>, <body>, and various heading and paragraph tags organize content semantically and visually. Attributes provide additional information about elements, customizing behavior and appearance. They allow greater control over layout, linking, and integration of other resources which is essential for a cohesive web design .

Metadata, located within the <head> section, significantly impacts web page performance and functionality by providing information such as the document's title, character set, styles, scripts, and various meta elements that aid search engines in indexing the page. Although not visible, this data optimizes resource loading and ensures the web page renders correctly, enhancing both usability and search visibility .

HTML markup facilitates the linking of web pages through Hypertext, which refers to the text or links that take users to different HTML documents or webpages when clicked. These links are created using the <a> (anchor) tag, which uses the href attribute to specify the URL of the page the link goes to .

A beginner should save their HTML code in a text editor like Notepad with a .html or .htm extension and ensure the file encoding is set to UTF-8. To view the page, they can simply double-click the file or right-click and select 'Open with' followed by choosing a web browser like Chrome or Firefox. This process translates the HTML code into a visual representation on the browser screen .

Hypertext in HTML is crucial for web navigation as it connects different HTML documents via hyperlinks, allowing users to easily navigate from one page to another. This interconnectivity is foundational to the web’s architecture, providing a non-linear method of accessing information that enhances user experience and accessibility, in addition to supporting the web’s open, linkable nature .

HTML files can be created using a basic text editor like Notepad by writing or coping HTML code into the editor. Best practices include saving the file with a .htm or .html extension, ensuring the file name is appropriate, and setting the file encoding to UTF-8 to support standard characters. Properly closing all HTML tags and using the standard document structure helps ensure the file functions correctly when opened in a web browser .

By studying HTML, learners gain the ability to create websites and develop web design skills, providing a comprehensive understanding of how websites function. HTML serves as a foundational skill that facilitates learning other web languages and technologies, given its role in structuring content on the web. This knowledge is essential for anyone pursuing a career in web development or related fields .

The versioning history of HTML is significant because it marks the evolution of web standards and capabilities, influencing how web developers build websites. HTML 2.0 established a foundation, while HTML 4.01 added enhancements needed in late 1999, supporting the growing complexity of web design. HTML5, introduced in 2012, incorporated more features for multimedia and improved layout control. This ongoing evolution ensures that web development remains aligned with technological advances and user demands .

HTML 5 introduced features that expanded upon HTML 4.01 by addressing modern web needs such as multimedia support, semantic text elements, and APIs for complex web applications. It streamlined markup for embedding video and audio directly into web pages, enhancing interoperability and allowing developers to build richer, more interactive user experiences without relying extensively on plugins .

An HTML document consists of several essential structural components: <html>, <head>, <title>, and <body> tags. The <html> tag represents the root of the document and encompasses all other elements. The <head> section contains metadata, which includes the <title> tag essential for defining the document’s title seen in the browser’s title bar. This section can also include style, scripts, and linking metadata that help in the document’s presentation and behavior. The <body> tag contains all the visible content of the web page such as text, images, and other multimedia elements .

You might also like