SlideShare a Scribd company logo
1 of 15
TRINITY INSTITUTE OF PROFESSIONAL STUDIES
Sector – 9, Dwarka Institutional Area, New Delhi-75
Affiliated Institution of G.G.S.IP.U, Delhi
HTML
BBA CA 208
By : Ruchika Bajaj
Assistant Professor (IT)
TRINITY INSTITUTE OF PROFESSIONAL STUDIES
Sector – 9, Dwarka Institutional Area, New Delhi-75
HTML
• HTML stands for Hyper Text Markup Language
• It is a language with the help of which we can create
your own Web site.
• A markup language is a set of markup tags
• HTML documents are described by HTML tags
• Each HTML tag describes different document content
TRINITY INSTITUTE OF PROFESSIONAL STUDIES
Sector – 9, Dwarka Institutional Area, New Delhi-75
HTML Example: Document Tag
<!DOCTYPE html>
<html>
<head>
<title>Page Title</title>
</head>
<body>
<h1>My First Heading</h1>
<p>My first paragraph.</p>
</body>
</html>
TRINITY INSTITUTE OF PROFESSIONAL STUDIES
Sector – 9, Dwarka Institutional Area, New Delhi-75
HTML Example
 The DOCTYPE declaration defines the document type to be HTML
 The text between <html> and </html> describes an HTML
document
 The text between <head> and </head> provides information about
the document
 The text between <title> and </title> provides a title for the
document
 The text between <body> and </body> describes the visible page
content
 The text between <h1> and </h1> describes a heading
 The text between <p> and </p> describes a paragraph
 Using this description, a web browser can display a document with a
heading and a paragraph.
TRINITY INSTITUTE OF PROFESSIONAL STUDIES
Sector – 9, Dwarka Institutional Area, New Delhi-75
HTML Tags
• HTML tags are keywords (tag names) surrounded
by angle brackets:
• <tagname>content</tagname>
• HTML tags normally come in pairs like <p> and </p>
• The first tag in a pair is the start tag, the second tag is
the end tag
• The end tag is written like the start tag, but with
a slash before the tag name
• The start tag is often called the opening tag. The end
tag is often called the closing tag.
TRINITY INSTITUTE OF PROFESSIONAL STUDIES
Sector – 9, Dwarka Institutional Area, New Delhi-75
Write HTML Using Notepad or Text
Edit
• HTML can be edited by using a professional
HTML editor like:
• Adobe Dreamweaver
• Microsoft Expression Web
• CoffeeCup HTML Editor
TRINITY INSTITUTE OF PROFESSIONAL STUDIES
Sector – 9, Dwarka Institutional Area, New Delhi-75
Step 1: Open Notepad
• To open Notepad in Windows 7 or earlier:
• Click Start (bottom left on your screen).
Click All Programs. Click Accessories.
Click Notepad.
• To open Notepad in Windows 8 or later:
• Open the Start Screen (the window symbol at
the bottom left on your screen).
Type Notepad.
TRINITY INSTITUTE OF PROFESSIONAL STUDIES
Sector – 9, Dwarka Institutional Area, New Delhi-75
Step 2: Write Some HTML
• Write or copy some HTML into Notepad.
• <!DOCTYPE html>
<html>
<body>
<h1>My First Heading</h1>
<p>My first paragraph.</p>
</body>
</html>
TRINITY INSTITUTE OF PROFESSIONAL STUDIES
Sector – 9, Dwarka Institutional Area, New Delhi-75
TRINITY INSTITUTE OF PROFESSIONAL STUDIES
Sector – 9, Dwarka Institutional Area, New Delhi-75
Step 3: Save the HTML Page
• Save the file on your computer.
• Select File > Save as in the Notepad menu.
• Name the file "index.htm" or any other name
ending with htm.
TRINITY INSTITUTE OF PROFESSIONAL STUDIES
Sector – 9, Dwarka Institutional Area, New Delhi-75
TRINITY INSTITUTE OF PROFESSIONAL STUDIES
Sector – 9, Dwarka Institutional Area, New Delhi-75
HTML Paragraphs
• HTML paragraphs are defined with the <p> tag:
• Example
<p>
This paragraph
contains a lot of lines
in the source code,
but the browser
ignores it.
</p>
TRINITY INSTITUTE OF PROFESSIONAL STUDIES
Sector – 9, Dwarka Institutional Area, New Delhi-75
HTML Line Breaks
• The HTML <br> element defines a line break.
• Use <br> if you want a line break (a new line)
without starting a new paragraph:
• Example
• <p>This is<br>a para<br>graph with line
breaks</p>
• Result:
• This is
a para
graph with line breaks
TRINITY INSTITUTE OF PROFESSIONAL STUDIES
Sector – 9, Dwarka Institutional Area, New Delhi-75
Container Tags
• Container tags are those tags which contains
content in it.
• Ex :
• <p>
This paragraph
contains a lot of lines
in the source code,
but the browser
ignores it.
</p>
• Hence p tag is a container tag
TRINITY INSTITUTE OF PROFESSIONAL STUDIES
Sector – 9, Dwarka Institutional Area, New Delhi-75
Empty Tag
• <br > is an empty element without a closing
tag (the <br> tag defines a line break).
• It does not require any content in it.

More Related Content

What's hot

HTML Introduction
HTML IntroductionHTML Introduction
HTML Introduction
c525600
 

What's hot (20)

Introduction to basic HTML [Librarian edition]
Introduction to basic HTML [Librarian edition]Introduction to basic HTML [Librarian edition]
Introduction to basic HTML [Librarian edition]
 
Html vs xhtml
Html vs xhtmlHtml vs xhtml
Html vs xhtml
 
HTML
HTMLHTML
HTML
 
basic introduction of html tags
basic introduction  of html tagsbasic introduction  of html tags
basic introduction of html tags
 
HTML Introduction
HTML IntroductionHTML Introduction
HTML Introduction
 
Xhtml
XhtmlXhtml
Xhtml
 
Html
HtmlHtml
Html
 
Html Slide Part-1
Html Slide Part-1Html Slide Part-1
Html Slide Part-1
 
Introduction to HTML
Introduction to HTMLIntroduction to HTML
Introduction to HTML
 
uptu web technology unit 2 html
uptu web technology unit 2 htmluptu web technology unit 2 html
uptu web technology unit 2 html
 
Lecture 4 - Adding XTHML for the Web
Lecture  4 - Adding XTHML for the WebLecture  4 - Adding XTHML for the Web
Lecture 4 - Adding XTHML for the Web
 
Introduction to XHTML
Introduction to XHTMLIntroduction to XHTML
Introduction to XHTML
 
Html 5
Html 5Html 5
Html 5
 
Design Tools Html Xhtml
Design Tools Html XhtmlDesign Tools Html Xhtml
Design Tools Html Xhtml
 
XHTML
XHTMLXHTML
XHTML
 
[Basic HTML/CSS] 1. html - basic tags
[Basic HTML/CSS] 1. html - basic tags[Basic HTML/CSS] 1. html - basic tags
[Basic HTML/CSS] 1. html - basic tags
 
Lecture 2 introduction to html basics
Lecture 2 introduction to html basicsLecture 2 introduction to html basics
Lecture 2 introduction to html basics
 
Xhtml
XhtmlXhtml
Xhtml
 
Basic Html Knowledge for students
Basic Html Knowledge for studentsBasic Html Knowledge for students
Basic Html Knowledge for students
 
HTML
HTMLHTML
HTML
 

Similar to HTML- Hyper Text Markup Language

Introduction to HTML
Introduction to HTMLIntroduction to HTML
Introduction to HTML
Siva Rushi
 
Introduction to html (912 kb)
Introduction to html (912 kb)Introduction to html (912 kb)
Introduction to html (912 kb)
IMRAN KHAN
 

Similar to HTML- Hyper Text Markup Language (20)

Html
HtmlHtml
Html
 
Web Technologies
Web TechnologiesWeb Technologies
Web Technologies
 
HTML Basics by software development company india
HTML Basics by software development company indiaHTML Basics by software development company india
HTML Basics by software development company india
 
Web component driven development
Web component driven developmentWeb component driven development
Web component driven development
 
Web tech html css js
Web tech html css jsWeb tech html css js
Web tech html css js
 
HTML, CSS and XML
HTML, CSS and XMLHTML, CSS and XML
HTML, CSS and XML
 
HTML (Basic to Advance)
HTML (Basic to Advance)HTML (Basic to Advance)
HTML (Basic to Advance)
 
Additional HTML
Additional HTML Additional HTML
Additional HTML
 
HTML & CSS.ppt
HTML & CSS.pptHTML & CSS.ppt
HTML & CSS.ppt
 
Html,CSS & UI/UX design
Html,CSS & UI/UX designHtml,CSS & UI/UX design
Html,CSS & UI/UX design
 
HTML Basic, CSS Basic, JavaScript basic.
HTML Basic, CSS Basic, JavaScript basic.HTML Basic, CSS Basic, JavaScript basic.
HTML Basic, CSS Basic, JavaScript basic.
 
Introduction to HTML
Introduction to HTMLIntroduction to HTML
Introduction to HTML
 
Introduction to html (912 kb)
Introduction to html (912 kb)Introduction to html (912 kb)
Introduction to html (912 kb)
 
Fundamentals of HTML5
Fundamentals of HTML5Fundamentals of HTML5
Fundamentals of HTML5
 
Introduction to Web Technology and Web Page Development
Introduction to Web Technology and Web Page DevelopmentIntroduction to Web Technology and Web Page Development
Introduction to Web Technology and Web Page Development
 
The Time for Vanilla Web Components has Arrived
The Time for Vanilla Web Components has ArrivedThe Time for Vanilla Web Components has Arrived
The Time for Vanilla Web Components has Arrived
 
Html presentation
Html presentationHtml presentation
Html presentation
 
Drupal7 Theming session on the occassion of Drupal7 release party in Delhi NCR
Drupal7 Theming session on the occassion of  Drupal7 release party in Delhi NCRDrupal7 Theming session on the occassion of  Drupal7 release party in Delhi NCR
Drupal7 Theming session on the occassion of Drupal7 release party in Delhi NCR
 
Html
HtmlHtml
Html
 
02 HTML-01.pdf
02 HTML-01.pdf02 HTML-01.pdf
02 HTML-01.pdf
 

More from Trinity Dwarka

More from Trinity Dwarka (20)

Why BAJMC in Trinity Dwarka
Why BAJMC in Trinity DwarkaWhy BAJMC in Trinity Dwarka
Why BAJMC in Trinity Dwarka
 
Career Options after BCA
Career Options after BCACareer Options after BCA
Career Options after BCA
 
Principles of Management-Management-Concept & Meaning
  Principles of Management-Management-Concept & Meaning  Principles of Management-Management-Concept & Meaning
Principles of Management-Management-Concept & Meaning
 
Principles of Management- Management Process & Functions
Principles of Management- Management Process  &  FunctionsPrinciples of Management- Management Process  &  Functions
Principles of Management- Management Process & Functions
 
Principles of Management- Managerial Levels & Roles-
Principles of Management- Managerial Levels & Roles-Principles of Management- Managerial Levels & Roles-
Principles of Management- Managerial Levels & Roles-
 
Management-Concept & Meaning
 Management-Concept & Meaning Management-Concept & Meaning
Management-Concept & Meaning
 
Principles of Management- Planning
Principles of Management- PlanningPrinciples of Management- Planning
Principles of Management- Planning
 
Organizing Authority & Responsibility- Principles of Management
Organizing Authority & Responsibility- Principles of ManagementOrganizing Authority & Responsibility- Principles of Management
Organizing Authority & Responsibility- Principles of Management
 
Staffing- Principles of Management
Staffing- Principles of ManagementStaffing- Principles of Management
Staffing- Principles of Management
 
Directing-Principles of Management
Directing-Principles of ManagementDirecting-Principles of Management
Directing-Principles of Management
 
Dimensional Modelling-Data Warehouse & Data Mining
 Dimensional Modelling-Data Warehouse & Data Mining Dimensional Modelling-Data Warehouse & Data Mining
Dimensional Modelling-Data Warehouse & Data Mining
 
Data Preprocessing- Data Warehouse & Data Mining
Data Preprocessing- Data Warehouse & Data MiningData Preprocessing- Data Warehouse & Data Mining
Data Preprocessing- Data Warehouse & Data Mining
 
Computer Networks- Network Basics
Computer Networks- Network BasicsComputer Networks- Network Basics
Computer Networks- Network Basics
 
Java Programming- Introduction to Java Applet Programs
Java Programming- Introduction to Java Applet ProgramsJava Programming- Introduction to Java Applet Programs
Java Programming- Introduction to Java Applet Programs
 
Linux Environment- Linux vs Unix
Linux Environment- Linux vs UnixLinux Environment- Linux vs Unix
Linux Environment- Linux vs Unix
 
Linux Environment- Linux Basics
Linux Environment- Linux BasicsLinux Environment- Linux Basics
Linux Environment- Linux Basics
 
BCA-Mobile Computing- BASICS OF MOBILE COMPUTING
BCA-Mobile Computing- BASICS OF MOBILE COMPUTINGBCA-Mobile Computing- BASICS OF MOBILE COMPUTING
BCA-Mobile Computing- BASICS OF MOBILE COMPUTING
 
INTRODUCTION TO INFORMATION TECHNOLOGY- IT Basics
INTRODUCTION TO INFORMATION TECHNOLOGY- IT BasicsINTRODUCTION TO INFORMATION TECHNOLOGY- IT Basics
INTRODUCTION TO INFORMATION TECHNOLOGY- IT Basics
 
Database Management System
Database Management System Database Management System
Database Management System
 
JAVA PROGRAMMING- OOP Concept
JAVA PROGRAMMING- OOP ConceptJAVA PROGRAMMING- OOP Concept
JAVA PROGRAMMING- OOP Concept
 

Recently uploaded

The basics of sentences session 3pptx.pptx
The basics of sentences session 3pptx.pptxThe basics of sentences session 3pptx.pptx
The basics of sentences session 3pptx.pptx
heathfieldcps1
 
Spellings Wk 4 and Wk 5 for Grade 4 at CAPS
Spellings Wk 4 and Wk 5 for Grade 4 at CAPSSpellings Wk 4 and Wk 5 for Grade 4 at CAPS
Spellings Wk 4 and Wk 5 for Grade 4 at CAPS
AnaAcapella
 

Recently uploaded (20)

The basics of sentences session 3pptx.pptx
The basics of sentences session 3pptx.pptxThe basics of sentences session 3pptx.pptx
The basics of sentences session 3pptx.pptx
 
On National Teacher Day, meet the 2024-25 Kenan Fellows
On National Teacher Day, meet the 2024-25 Kenan FellowsOn National Teacher Day, meet the 2024-25 Kenan Fellows
On National Teacher Day, meet the 2024-25 Kenan Fellows
 
How to Manage Call for Tendor in Odoo 17
How to Manage Call for Tendor in Odoo 17How to Manage Call for Tendor in Odoo 17
How to Manage Call for Tendor in Odoo 17
 
Understanding Accommodations and Modifications
Understanding  Accommodations and ModificationsUnderstanding  Accommodations and Modifications
Understanding Accommodations and Modifications
 
NO1 Top Black Magic Specialist In Lahore Black magic In Pakistan Kala Ilam Ex...
NO1 Top Black Magic Specialist In Lahore Black magic In Pakistan Kala Ilam Ex...NO1 Top Black Magic Specialist In Lahore Black magic In Pakistan Kala Ilam Ex...
NO1 Top Black Magic Specialist In Lahore Black magic In Pakistan Kala Ilam Ex...
 
How to Add a Tool Tip to a Field in Odoo 17
How to Add a Tool Tip to a Field in Odoo 17How to Add a Tool Tip to a Field in Odoo 17
How to Add a Tool Tip to a Field in Odoo 17
 
Introduction to TechSoup’s Digital Marketing Services and Use Cases
Introduction to TechSoup’s Digital Marketing  Services and Use CasesIntroduction to TechSoup’s Digital Marketing  Services and Use Cases
Introduction to TechSoup’s Digital Marketing Services and Use Cases
 
dusjagr & nano talk on open tools for agriculture research and learning
dusjagr & nano talk on open tools for agriculture research and learningdusjagr & nano talk on open tools for agriculture research and learning
dusjagr & nano talk on open tools for agriculture research and learning
 
Graduate Outcomes Presentation Slides - English
Graduate Outcomes Presentation Slides - EnglishGraduate Outcomes Presentation Slides - English
Graduate Outcomes Presentation Slides - English
 
21st_Century_Skills_Framework_Final_Presentation_2.pptx
21st_Century_Skills_Framework_Final_Presentation_2.pptx21st_Century_Skills_Framework_Final_Presentation_2.pptx
21st_Century_Skills_Framework_Final_Presentation_2.pptx
 
How to Add New Custom Addons Path in Odoo 17
How to Add New Custom Addons Path in Odoo 17How to Add New Custom Addons Path in Odoo 17
How to Add New Custom Addons Path in Odoo 17
 
How to Manage Global Discount in Odoo 17 POS
How to Manage Global Discount in Odoo 17 POSHow to Manage Global Discount in Odoo 17 POS
How to Manage Global Discount in Odoo 17 POS
 
Unit 3 Emotional Intelligence and Spiritual Intelligence.pdf
Unit 3 Emotional Intelligence and Spiritual Intelligence.pdfUnit 3 Emotional Intelligence and Spiritual Intelligence.pdf
Unit 3 Emotional Intelligence and Spiritual Intelligence.pdf
 
Our Environment Class 10 Science Notes pdf
Our Environment Class 10 Science Notes pdfOur Environment Class 10 Science Notes pdf
Our Environment Class 10 Science Notes pdf
 
REMIFENTANIL: An Ultra short acting opioid.pptx
REMIFENTANIL: An Ultra short acting opioid.pptxREMIFENTANIL: An Ultra short acting opioid.pptx
REMIFENTANIL: An Ultra short acting opioid.pptx
 
OS-operating systems- ch05 (CPU Scheduling) ...
OS-operating systems- ch05 (CPU Scheduling) ...OS-operating systems- ch05 (CPU Scheduling) ...
OS-operating systems- ch05 (CPU Scheduling) ...
 
VAMOS CUIDAR DO NOSSO PLANETA! .
VAMOS CUIDAR DO NOSSO PLANETA!                    .VAMOS CUIDAR DO NOSSO PLANETA!                    .
VAMOS CUIDAR DO NOSSO PLANETA! .
 
HMCS Max Bernays Pre-Deployment Brief (May 2024).pptx
HMCS Max Bernays Pre-Deployment Brief (May 2024).pptxHMCS Max Bernays Pre-Deployment Brief (May 2024).pptx
HMCS Max Bernays Pre-Deployment Brief (May 2024).pptx
 
Spellings Wk 4 and Wk 5 for Grade 4 at CAPS
Spellings Wk 4 and Wk 5 for Grade 4 at CAPSSpellings Wk 4 and Wk 5 for Grade 4 at CAPS
Spellings Wk 4 and Wk 5 for Grade 4 at CAPS
 
Python Notes for mca i year students osmania university.docx
Python Notes for mca i year students osmania university.docxPython Notes for mca i year students osmania university.docx
Python Notes for mca i year students osmania university.docx
 

HTML- Hyper Text Markup Language

  • 1. TRINITY INSTITUTE OF PROFESSIONAL STUDIES Sector – 9, Dwarka Institutional Area, New Delhi-75 Affiliated Institution of G.G.S.IP.U, Delhi HTML BBA CA 208 By : Ruchika Bajaj Assistant Professor (IT)
  • 2. TRINITY INSTITUTE OF PROFESSIONAL STUDIES Sector – 9, Dwarka Institutional Area, New Delhi-75 HTML • HTML stands for Hyper Text Markup Language • It is a language with the help of which we can create your own Web site. • A markup language is a set of markup tags • HTML documents are described by HTML tags • Each HTML tag describes different document content
  • 3. TRINITY INSTITUTE OF PROFESSIONAL STUDIES Sector – 9, Dwarka Institutional Area, New Delhi-75 HTML Example: Document Tag <!DOCTYPE html> <html> <head> <title>Page Title</title> </head> <body> <h1>My First Heading</h1> <p>My first paragraph.</p> </body> </html>
  • 4. TRINITY INSTITUTE OF PROFESSIONAL STUDIES Sector – 9, Dwarka Institutional Area, New Delhi-75 HTML Example  The DOCTYPE declaration defines the document type to be HTML  The text between <html> and </html> describes an HTML document  The text between <head> and </head> provides information about the document  The text between <title> and </title> provides a title for the document  The text between <body> and </body> describes the visible page content  The text between <h1> and </h1> describes a heading  The text between <p> and </p> describes a paragraph  Using this description, a web browser can display a document with a heading and a paragraph.
  • 5. TRINITY INSTITUTE OF PROFESSIONAL STUDIES Sector – 9, Dwarka Institutional Area, New Delhi-75 HTML Tags • HTML tags are keywords (tag names) surrounded by angle brackets: • <tagname>content</tagname> • HTML tags normally come in pairs like <p> and </p> • The first tag in a pair is the start tag, the second tag is the end tag • The end tag is written like the start tag, but with a slash before the tag name • The start tag is often called the opening tag. The end tag is often called the closing tag.
  • 6. TRINITY INSTITUTE OF PROFESSIONAL STUDIES Sector – 9, Dwarka Institutional Area, New Delhi-75 Write HTML Using Notepad or Text Edit • HTML can be edited by using a professional HTML editor like: • Adobe Dreamweaver • Microsoft Expression Web • CoffeeCup HTML Editor
  • 7. TRINITY INSTITUTE OF PROFESSIONAL STUDIES Sector – 9, Dwarka Institutional Area, New Delhi-75 Step 1: Open Notepad • To open Notepad in Windows 7 or earlier: • Click Start (bottom left on your screen). Click All Programs. Click Accessories. Click Notepad. • To open Notepad in Windows 8 or later: • Open the Start Screen (the window symbol at the bottom left on your screen). Type Notepad.
  • 8. TRINITY INSTITUTE OF PROFESSIONAL STUDIES Sector – 9, Dwarka Institutional Area, New Delhi-75 Step 2: Write Some HTML • Write or copy some HTML into Notepad. • <!DOCTYPE html> <html> <body> <h1>My First Heading</h1> <p>My first paragraph.</p> </body> </html>
  • 9. TRINITY INSTITUTE OF PROFESSIONAL STUDIES Sector – 9, Dwarka Institutional Area, New Delhi-75
  • 10. TRINITY INSTITUTE OF PROFESSIONAL STUDIES Sector – 9, Dwarka Institutional Area, New Delhi-75 Step 3: Save the HTML Page • Save the file on your computer. • Select File > Save as in the Notepad menu. • Name the file "index.htm" or any other name ending with htm.
  • 11. TRINITY INSTITUTE OF PROFESSIONAL STUDIES Sector – 9, Dwarka Institutional Area, New Delhi-75
  • 12. TRINITY INSTITUTE OF PROFESSIONAL STUDIES Sector – 9, Dwarka Institutional Area, New Delhi-75 HTML Paragraphs • HTML paragraphs are defined with the <p> tag: • Example <p> This paragraph contains a lot of lines in the source code, but the browser ignores it. </p>
  • 13. TRINITY INSTITUTE OF PROFESSIONAL STUDIES Sector – 9, Dwarka Institutional Area, New Delhi-75 HTML Line Breaks • The HTML <br> element defines a line break. • Use <br> if you want a line break (a new line) without starting a new paragraph: • Example • <p>This is<br>a para<br>graph with line breaks</p> • Result: • This is a para graph with line breaks
  • 14. TRINITY INSTITUTE OF PROFESSIONAL STUDIES Sector – 9, Dwarka Institutional Area, New Delhi-75 Container Tags • Container tags are those tags which contains content in it. • Ex : • <p> This paragraph contains a lot of lines in the source code, but the browser ignores it. </p> • Hence p tag is a container tag
  • 15. TRINITY INSTITUTE OF PROFESSIONAL STUDIES Sector – 9, Dwarka Institutional Area, New Delhi-75 Empty Tag • <br > is an empty element without a closing tag (the <br> tag defines a line break). • It does not require any content in it.