Scribd
Upload
4 views

HTML

The document provides an introduction to HTML, covering its history, structure, and essential tags for creating web pages. It outlines the basic terminology, software requirements, and steps to write HTML code, along with examples of common HTML tags like headings, paragraphs, tables, and images. The learning objectives focus on understanding HTML's role in web development and familiarizing with its basic elements and structure.

Uploaded by

errorbrainnotfound
Copyright
© © All Rights Reserved
Available Formats
Download as PDF, TXT or read online on Scribd
4 views

HTML

The document provides an introduction to HTML, covering its history, structure, and essential tags for creating web pages. It outlines the basic terminology, software requirements, and steps to write HTML code, along with examples of common HTML tags like headings, paragraphs, tables, and images. The learning objectives focus on understanding HTML's role in web development and familiarizing with its basic elements and structure.

Uploaded by

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

Grade:VI

Introduction to HTML
Content:
1. Introduction to HTML
2. History of HTML
3. HTML Release Year
4. What is HTML?
5. HTML Document Structure
6. Software required for HTML
7. Basic Terminology
8. Steps to write HTML Code
9. Basic HTML Tags
10. Types of Tags in HTML
11. Formatting Tags
12. Table Tag
13. Image Tag
Learning Objective:
1. Understanding the concept of HTML and its role in creating web Pages.

2. Learn the basic structure of an HTML Document, including the use of


<html>,<head>, <title> and <body> tags.

3. Familiarize with basic HTML tags like headings (<h1> to <h6>),


Paragraph(<p>), Table (<table>) and image(<img>)tags.

4. To use a basic HTML page structure

1. Introduction to HTML:
HTML (HyperText Markup Language) is the standard markup language for creating
web pages and web applications. It is a combination of Hypertext and Markup
language. The Hypertext defines the link between web pages, and Markup defines
the text document within tags to structure the web pages.

2. HISTORY OF HTML:

HTML (HyperText Markup Language) was created by Tim Berners-Lee in 1991 to


help researchers share documents over the internet using links. Over time, it evolved

1 Introduction to HTML
through different versions to become the backbone of the web, allowing people
worldwide to build and view websites with text, images, and multimedia content.

3. HTML RELEASED YEAR:

4. 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.
5. HTML DOCUMENT STRUCTURE:
● 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)
● 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.

Example of Simple HTML code:

2 Introduction to HTML
6. Software required to write and execute HTML Code:
● Text Editor (Notepad)/ WYSIWYG( Ex. Vs Code)
● Web Browser (Microsoft Edge, Google Chrome, Mozilla Firefox etc)
7. Basic Terminologies:

● Text Editor: A text editor is a software application that allows you to create
and edit plain text files. For HTML, it enables you to write the markup code
that structures web pages.
● Web Browser:A web browser is a software application that allows users to
access, retrieve, and view content on the World Wide Web.
● Web Page: A web page is a document that is displayed in a web browser and
is part of the World Wide Web.
● Home Page: A home page is the main or introductory page of a website.
8. Basic Terminologies HTML:

● HTML TAG: An HTML tag is a keyword enclosed in angle brackets that


defines the start and end of an HTML element. Tags are used to create
elements in the document.
● HTML Element:An HTML element consists of the opening tag, the content
(text or other HTML elements), and the closing tag. Elements are the building
blocks of HTML documents.
● HTML attributes: An attribute provides additional information about an HTML
element. Attributes are placed inside the opening tag and typically come in
name/value pairs.
9. Steps to write HTML code:

1. Open Notepad:
● Press Windows + R and type notepad, then press Enter.
● Alternatively, search for Notepad from the Start menu.
2. Write Your HTML Code:

3 Introduction to HTML
3. Save the HTML File:
● Click File → Save As.
● In the Save as type, select All Files.
● Type the file name with the extension .html (e.g., index.html).
● Choose a location to save the file (like the Desktop or Documents).
● Click Save.
4. Navigate(Go) to the folder where you have saved the file.
5. You can see the browser icon on your file.
6. Double click on it and your file gets opened on the Browser.

10. Basic HTML Tags:

Tag Use

<HTML> Beginning of the HTML Document.

<head> Header Section of HTML.

<title> Text to display as title of the page.

<body> To write the content on the Web Page.

<hr> To draw a Horizontal Rule (line).

<p> To write a Paragraph.

<br> To break the line.

<I> To make the text Italic.

<b> To make the text bold.

<U> To Underline the text.

<H1> to <H6> Heading Tags, H1 is the largest heading and H6 is the


lowest .

<IMG> To insert an Image to the webpage.

<TABLE> To insert the table on the Webpage.

11. Types of Tags in HTML:

4 Introduction to HTML
In HTML, Tags are classified into two main categories: container tags and empty
tags.

Container Tags: Container tags are elements that can enclose content. They have
an opening tag and a closing tag.

Example: Heading tags <H1> to <H6>, <title>,<P> tag etc.

Empty Tags: Empty tags do not have any content and do not require a closing tag.
They are self-contained.

Example: <BR> tag to break a line,<IMG> tag to insert the image.

12. Formatting Tags in HTML:


In HTML, formatting tags are used to style text and indicate how it should
be displayed. Here are some common formatting tags:

1. Bold:

<b>This text is bold.</b>

2. Italic:

<i>This text is italic.</i>

3. Underline:

<u>This text is underlined.</u>

Output:
This text is bold.

This text is italic.

This text is underlined.

13. Table Tag:

The <table> tag in HTML is used to create a table on a webpage. It acts as a


container for various table elements, allowing you to organize data into rows and
columns. Here are some of the key tags associated with <table>:

● <tr>: Defines a table row.

5 Introduction to HTML
● <th>: Defines a header cell in a table, typically displayed in bold and
centered.
● <td>: Defines a standard data cell in a table.

Table Tag Attributes:

Attributes Use

Border Specifies the width of the table border. Example: <table


border="1">

Cellpadding Defines the space between the cell content and its border
(padding).
Example: <table cellpadding="10">

Cellspacing Sets the space between individual cells in the table.


Example: <table cellspacing="5">

Height Set the height of the table. Example: <table height="200">

Align Specifies the alignment of the table (left, right, center).


Example: <table align="center">

Example :Create a table of fruit along with their colors.

<!Doctype html>

<html>

<head> <title> Fruits Name along with their colors </title> </head>

<body>

<h1> Table of fruits along with colors</h1>

<table border ="2", cellpadding="10", cellspacing ="5", width ="50%",


align="center">

<tr> <th> Name </th> <th> Color </th> </tr>

<tr> <td> Apple </td> <td> Red </td> </tr>

<tr> <td> Mango </td><td> Yellow </td></tr>

</table>

6 Introduction to HTML
</body>

</html>

14. Image Tag:


The <img> tag in HTML is used to embed images in a webpage. It is a self-closing
tag and requires at least one attribute to function correctly. Here’s a basic overview
of the <img> tag and its attributes:

Attributes:

● src: specifies the URL of the image file


● alt: specifies alternative text to display if the image cannot be loaded
● width: specifies the width of the image (can be a percentage or pixel value)
● height: specifies the height of the image (can be a percentage or pixel value)

Basic Syntax:
<img src="image-url" alt="description of image">
Here, src: Specifies the path to the image file, and alt: Provides alternative text for
the image if it cannot be displayed.

Example:

<img src="https://www.example.com/image.jpg" alt="Description of the image" width="500"


height="300">

7 Introduction to HTML

You might also like