SlideShare una empresa de Scribd logo
1 de 19
Basic HTML Tags
Z TONYELA 215020312
“
What is HTML?
 It is the standard mark-up
language for creating Web
pages.
2
HYPER TEXT
MARKUP LANGUAGE
 An HTML file is text containing small mark
up tags
 The mark up tags tell the Web browser
how to display the page
 An HTML file must have an htm or html file
extension.
3
What are HTML tags?
 HTML tags are the hidden keywords within a web
page that define how your web browser must
format and display the content.:
<tagname> content goes here ……</tagname>
4
5
Basic document tags
 <html>
 <head>
 <title>
 <body>
 <h1>to <h6>
 <p>
 <br>
Defines an HTML document
Opening tag <html>
Closing tag </html>
6
<html>
It defines information about the
document.
Opening tag <head>
Closing tag </head>
7
<head>
It defines a title for the document.
Opening tag <title>
Closing tag </title>
8
<title>
It defines the document’s body.
Opening tag <body>
Closing tag </body>
9
<body>
It defines the HTML headings.
Opening tag <h1> or <h6>
Closing tag </h1> or </h6>
Note: h1 is a first heading and the largest
whereas h6 is a sixth level and the smallest
10
<h1> to <h6>
It defines a paragraph.
Opening tag <p>
Closing tag </p>
11
<p>
It inserts a single line break.
Opening tag <br>
Closing tag The <br> tag is an
empty tag which means that it has
no end tag.
12
<br>
TEST YOUR KNOWLEDGE
1. Use your Notepad ++ to capture the following HTML code.
2. Save as a web page called MyWeb, for example,MyWeb.html.
3.View your webpage with your web browser.
13
14
 <html>
 <head>
 <title>My web page</title>
 </head>
 <body>
 <h1>h1 to h6 is used for headings 1</h1>
 <hr/>The horizontal rule tag creates a
line across the page.It is often used to
separate two sections of a web page.
 <br/>The break tag inserts a blank line.
15
 <p>The paragraph tag will force a new
paragraph on the display on the web
page</p>
 <p>The break tag is an empty tag and
does not need anything to close it.
<br/>Remember that the break tag
inserts a blank line while the paragraph
tag forces text to a new line.</p>
 <p><b>The bold tag is placed between
the paragraph tags if that whole
paragraph is to be bold</b></p>
16
 <p><i>The italics tag is placed between the
paragraph tags if that whole paragraph is to
be italics.</i></p>
 <p><b><i>Paragraph tags are the outermost
tags that then contain the bold and the
italics tags. Note the order of the opening
tags and the closing tags, that is p b i and
then i b p. bold</i></b></p>
 </body>
 </html>
17
THIS IS HOW IT SHOULD LOOK
18
References
 W3 Schools
http://www.w3schools.com/html/default
.asp
 Mindset Learn
http://learn.mindset.co.za/resources/co
mputer-applications-technology/grade-
11/solutions-development-html
THANKS!
Any questions?
You can find me at:
Zintle.t@webmail.co.za
19

Más contenido relacionado

La actualidad más candente (20)

Introduction to HTML
Introduction to HTMLIntroduction to HTML
Introduction to HTML
 
Html
HtmlHtml
Html
 
Introduction to html
Introduction to htmlIntroduction to html
Introduction to html
 
HTML
HTMLHTML
HTML
 
Html basic
Html basicHtml basic
Html basic
 
1. HTML
1. HTML1. HTML
1. HTML
 
Basic html structure
Basic html structureBasic html structure
Basic html structure
 
HTML Introduction
HTML IntroductionHTML Introduction
HTML Introduction
 
Web designing using html
Web designing using htmlWeb designing using html
Web designing using html
 
HTML Introduction
HTML IntroductionHTML Introduction
HTML Introduction
 
HTML
HTMLHTML
HTML
 
basic introduction of html tags
basic introduction  of html tagsbasic introduction  of html tags
basic introduction of html tags
 
PPT on Basic HTML Tags
PPT on Basic HTML TagsPPT on Basic HTML Tags
PPT on Basic HTML Tags
 
Html Slide Part-1
Html Slide Part-1Html Slide Part-1
Html Slide Part-1
 
[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
 
Html and its tags
Html and its tagsHtml and its tags
Html and its tags
 
Web Page Designing Using HTML
Web Page Designing Using HTMLWeb Page Designing Using HTML
Web Page Designing Using HTML
 
Html Simple Tutorial
Html Simple TutorialHtml Simple Tutorial
Html Simple Tutorial
 
Intro to HTML
Intro to HTMLIntro to HTML
Intro to HTML
 
HTML Text formatting tags
HTML Text formatting tagsHTML Text formatting tags
HTML Text formatting tags
 

Similar a Html (20)

Html basics
Html basicsHtml basics
Html basics
 
Html basic file
Html basic fileHtml basic file
Html basic file
 
Html basics
Html basicsHtml basics
Html basics
 
Html BASICS
Html BASICSHtml BASICS
Html BASICS
 
Html basics 1
Html basics 1Html basics 1
Html basics 1
 
Html basics
Html basicsHtml basics
Html basics
 
Html basics
Html basicsHtml basics
Html basics
 
HTML_Basics.pdf
HTML_Basics.pdfHTML_Basics.pdf
HTML_Basics.pdf
 
Html basics
Html basicsHtml basics
Html basics
 
Html basics
Html basicsHtml basics
Html basics
 
Html basics NOTE
Html basics NOTEHtml basics NOTE
Html basics NOTE
 
Html basics
Html basicsHtml basics
Html basics
 
html.pdf
html.pdfhtml.pdf
html.pdf
 
Html tutorial
Html tutorialHtml tutorial
Html tutorial
 
HTML and DHTML
HTML and DHTMLHTML and DHTML
HTML and DHTML
 
Basic Html Notes
Basic Html NotesBasic Html Notes
Basic Html Notes
 
Html Workshop
Html WorkshopHtml Workshop
Html Workshop
 
Html1
Html1Html1
Html1
 
Best HTML Training &Coaching in Ambala
Best HTML Training &Coaching in AmbalaBest HTML Training &Coaching in Ambala
Best HTML Training &Coaching in Ambala
 
An introduction to html
An introduction to htmlAn introduction to html
An introduction to html
 

Último

THEORIES OF ORGANIZATION-PUBLIC ADMINISTRATION
THEORIES OF ORGANIZATION-PUBLIC ADMINISTRATIONTHEORIES OF ORGANIZATION-PUBLIC ADMINISTRATION
THEORIES OF ORGANIZATION-PUBLIC ADMINISTRATIONHumphrey A Beña
 
4.16.24 Poverty and Precarity--Desmond.pptx
4.16.24 Poverty and Precarity--Desmond.pptx4.16.24 Poverty and Precarity--Desmond.pptx
4.16.24 Poverty and Precarity--Desmond.pptxmary850239
 
Incoming and Outgoing Shipments in 3 STEPS Using Odoo 17
Incoming and Outgoing Shipments in 3 STEPS Using Odoo 17Incoming and Outgoing Shipments in 3 STEPS Using Odoo 17
Incoming and Outgoing Shipments in 3 STEPS Using Odoo 17Celine George
 
ANG SEKTOR NG agrikultura.pptx QUARTER 4
ANG SEKTOR NG agrikultura.pptx QUARTER 4ANG SEKTOR NG agrikultura.pptx QUARTER 4
ANG SEKTOR NG agrikultura.pptx QUARTER 4MiaBumagat1
 
Virtual-Orientation-on-the-Administration-of-NATG12-NATG6-and-ELLNA.pdf
Virtual-Orientation-on-the-Administration-of-NATG12-NATG6-and-ELLNA.pdfVirtual-Orientation-on-the-Administration-of-NATG12-NATG6-and-ELLNA.pdf
Virtual-Orientation-on-the-Administration-of-NATG12-NATG6-and-ELLNA.pdfErwinPantujan2
 
EMBODO Lesson Plan Grade 9 Law of Sines.docx
EMBODO Lesson Plan Grade 9 Law of Sines.docxEMBODO Lesson Plan Grade 9 Law of Sines.docx
EMBODO Lesson Plan Grade 9 Law of Sines.docxElton John Embodo
 
4.16.24 21st Century Movements for Black Lives.pptx
4.16.24 21st Century Movements for Black Lives.pptx4.16.24 21st Century Movements for Black Lives.pptx
4.16.24 21st Century Movements for Black Lives.pptxmary850239
 
USPS® Forced Meter Migration - How to Know if Your Postage Meter Will Soon be...
USPS® Forced Meter Migration - How to Know if Your Postage Meter Will Soon be...USPS® Forced Meter Migration - How to Know if Your Postage Meter Will Soon be...
USPS® Forced Meter Migration - How to Know if Your Postage Meter Will Soon be...Postal Advocate Inc.
 
Dust Of Snow By Robert Frost Class-X English CBSE
Dust Of Snow By Robert Frost Class-X English CBSEDust Of Snow By Robert Frost Class-X English CBSE
Dust Of Snow By Robert Frost Class-X English CBSEaurabinda banchhor
 
Visit to a blind student's school🧑‍🦯🧑‍🦯(community medicine)
Visit to a blind student's school🧑‍🦯🧑‍🦯(community medicine)Visit to a blind student's school🧑‍🦯🧑‍🦯(community medicine)
Visit to a blind student's school🧑‍🦯🧑‍🦯(community medicine)lakshayb543
 
Oppenheimer Film Discussion for Philosophy and Film
Oppenheimer Film Discussion for Philosophy and FilmOppenheimer Film Discussion for Philosophy and Film
Oppenheimer Film Discussion for Philosophy and FilmStan Meyer
 
Choosing the Right CBSE School A Comprehensive Guide for Parents
Choosing the Right CBSE School A Comprehensive Guide for ParentsChoosing the Right CBSE School A Comprehensive Guide for Parents
Choosing the Right CBSE School A Comprehensive Guide for Parentsnavabharathschool99
 
Daily Lesson Plan in Mathematics Quarter 4
Daily Lesson Plan in Mathematics Quarter 4Daily Lesson Plan in Mathematics Quarter 4
Daily Lesson Plan in Mathematics Quarter 4JOYLYNSAMANIEGO
 
ROLES IN A STAGE PRODUCTION in arts.pptx
ROLES IN A STAGE PRODUCTION in arts.pptxROLES IN A STAGE PRODUCTION in arts.pptx
ROLES IN A STAGE PRODUCTION in arts.pptxVanesaIglesias10
 
Expanded definition: technical and operational
Expanded definition: technical and operationalExpanded definition: technical and operational
Expanded definition: technical and operationalssuser3e220a
 
TEACHER REFLECTION FORM (NEW SET........).docx
TEACHER REFLECTION FORM (NEW SET........).docxTEACHER REFLECTION FORM (NEW SET........).docx
TEACHER REFLECTION FORM (NEW SET........).docxruthvilladarez
 

Último (20)

THEORIES OF ORGANIZATION-PUBLIC ADMINISTRATION
THEORIES OF ORGANIZATION-PUBLIC ADMINISTRATIONTHEORIES OF ORGANIZATION-PUBLIC ADMINISTRATION
THEORIES OF ORGANIZATION-PUBLIC ADMINISTRATION
 
4.16.24 Poverty and Precarity--Desmond.pptx
4.16.24 Poverty and Precarity--Desmond.pptx4.16.24 Poverty and Precarity--Desmond.pptx
4.16.24 Poverty and Precarity--Desmond.pptx
 
Incoming and Outgoing Shipments in 3 STEPS Using Odoo 17
Incoming and Outgoing Shipments in 3 STEPS Using Odoo 17Incoming and Outgoing Shipments in 3 STEPS Using Odoo 17
Incoming and Outgoing Shipments in 3 STEPS Using Odoo 17
 
ANG SEKTOR NG agrikultura.pptx QUARTER 4
ANG SEKTOR NG agrikultura.pptx QUARTER 4ANG SEKTOR NG agrikultura.pptx QUARTER 4
ANG SEKTOR NG agrikultura.pptx QUARTER 4
 
Virtual-Orientation-on-the-Administration-of-NATG12-NATG6-and-ELLNA.pdf
Virtual-Orientation-on-the-Administration-of-NATG12-NATG6-and-ELLNA.pdfVirtual-Orientation-on-the-Administration-of-NATG12-NATG6-and-ELLNA.pdf
Virtual-Orientation-on-the-Administration-of-NATG12-NATG6-and-ELLNA.pdf
 
EMBODO Lesson Plan Grade 9 Law of Sines.docx
EMBODO Lesson Plan Grade 9 Law of Sines.docxEMBODO Lesson Plan Grade 9 Law of Sines.docx
EMBODO Lesson Plan Grade 9 Law of Sines.docx
 
4.16.24 21st Century Movements for Black Lives.pptx
4.16.24 21st Century Movements for Black Lives.pptx4.16.24 21st Century Movements for Black Lives.pptx
4.16.24 21st Century Movements for Black Lives.pptx
 
USPS® Forced Meter Migration - How to Know if Your Postage Meter Will Soon be...
USPS® Forced Meter Migration - How to Know if Your Postage Meter Will Soon be...USPS® Forced Meter Migration - How to Know if Your Postage Meter Will Soon be...
USPS® Forced Meter Migration - How to Know if Your Postage Meter Will Soon be...
 
Dust Of Snow By Robert Frost Class-X English CBSE
Dust Of Snow By Robert Frost Class-X English CBSEDust Of Snow By Robert Frost Class-X English CBSE
Dust Of Snow By Robert Frost Class-X English CBSE
 
Visit to a blind student's school🧑‍🦯🧑‍🦯(community medicine)
Visit to a blind student's school🧑‍🦯🧑‍🦯(community medicine)Visit to a blind student's school🧑‍🦯🧑‍🦯(community medicine)
Visit to a blind student's school🧑‍🦯🧑‍🦯(community medicine)
 
FINALS_OF_LEFT_ON_C'N_EL_DORADO_2024.pptx
FINALS_OF_LEFT_ON_C'N_EL_DORADO_2024.pptxFINALS_OF_LEFT_ON_C'N_EL_DORADO_2024.pptx
FINALS_OF_LEFT_ON_C'N_EL_DORADO_2024.pptx
 
Oppenheimer Film Discussion for Philosophy and Film
Oppenheimer Film Discussion for Philosophy and FilmOppenheimer Film Discussion for Philosophy and Film
Oppenheimer Film Discussion for Philosophy and Film
 
Choosing the Right CBSE School A Comprehensive Guide for Parents
Choosing the Right CBSE School A Comprehensive Guide for ParentsChoosing the Right CBSE School A Comprehensive Guide for Parents
Choosing the Right CBSE School A Comprehensive Guide for Parents
 
Daily Lesson Plan in Mathematics Quarter 4
Daily Lesson Plan in Mathematics Quarter 4Daily Lesson Plan in Mathematics Quarter 4
Daily Lesson Plan in Mathematics Quarter 4
 
ROLES IN A STAGE PRODUCTION in arts.pptx
ROLES IN A STAGE PRODUCTION in arts.pptxROLES IN A STAGE PRODUCTION in arts.pptx
ROLES IN A STAGE PRODUCTION in arts.pptx
 
Expanded definition: technical and operational
Expanded definition: technical and operationalExpanded definition: technical and operational
Expanded definition: technical and operational
 
INCLUSIVE EDUCATION PRACTICES FOR TEACHERS AND TRAINERS.pptx
INCLUSIVE EDUCATION PRACTICES FOR TEACHERS AND TRAINERS.pptxINCLUSIVE EDUCATION PRACTICES FOR TEACHERS AND TRAINERS.pptx
INCLUSIVE EDUCATION PRACTICES FOR TEACHERS AND TRAINERS.pptx
 
TEACHER REFLECTION FORM (NEW SET........).docx
TEACHER REFLECTION FORM (NEW SET........).docxTEACHER REFLECTION FORM (NEW SET........).docx
TEACHER REFLECTION FORM (NEW SET........).docx
 
Paradigm shift in nursing research by RS MEHTA
Paradigm shift in nursing research by RS MEHTAParadigm shift in nursing research by RS MEHTA
Paradigm shift in nursing research by RS MEHTA
 
LEFT_ON_C'N_ PRELIMS_EL_DORADO_2024.pptx
LEFT_ON_C'N_ PRELIMS_EL_DORADO_2024.pptxLEFT_ON_C'N_ PRELIMS_EL_DORADO_2024.pptx
LEFT_ON_C'N_ PRELIMS_EL_DORADO_2024.pptx
 

Html

  • 1. Basic HTML Tags Z TONYELA 215020312
  • 2. “ What is HTML?  It is the standard mark-up language for creating Web pages. 2 HYPER TEXT MARKUP LANGUAGE
  • 3.  An HTML file is text containing small mark up tags  The mark up tags tell the Web browser how to display the page  An HTML file must have an htm or html file extension. 3
  • 4. What are HTML tags?  HTML tags are the hidden keywords within a web page that define how your web browser must format and display the content.: <tagname> content goes here ……</tagname> 4
  • 5. 5 Basic document tags  <html>  <head>  <title>  <body>  <h1>to <h6>  <p>  <br>
  • 6. Defines an HTML document Opening tag <html> Closing tag </html> 6 <html>
  • 7. It defines information about the document. Opening tag <head> Closing tag </head> 7 <head>
  • 8. It defines a title for the document. Opening tag <title> Closing tag </title> 8 <title>
  • 9. It defines the document’s body. Opening tag <body> Closing tag </body> 9 <body>
  • 10. It defines the HTML headings. Opening tag <h1> or <h6> Closing tag </h1> or </h6> Note: h1 is a first heading and the largest whereas h6 is a sixth level and the smallest 10 <h1> to <h6>
  • 11. It defines a paragraph. Opening tag <p> Closing tag </p> 11 <p>
  • 12. It inserts a single line break. Opening tag <br> Closing tag The <br> tag is an empty tag which means that it has no end tag. 12 <br>
  • 13. TEST YOUR KNOWLEDGE 1. Use your Notepad ++ to capture the following HTML code. 2. Save as a web page called MyWeb, for example,MyWeb.html. 3.View your webpage with your web browser. 13
  • 14. 14  <html>  <head>  <title>My web page</title>  </head>  <body>  <h1>h1 to h6 is used for headings 1</h1>  <hr/>The horizontal rule tag creates a line across the page.It is often used to separate two sections of a web page.  <br/>The break tag inserts a blank line.
  • 15. 15  <p>The paragraph tag will force a new paragraph on the display on the web page</p>  <p>The break tag is an empty tag and does not need anything to close it. <br/>Remember that the break tag inserts a blank line while the paragraph tag forces text to a new line.</p>  <p><b>The bold tag is placed between the paragraph tags if that whole paragraph is to be bold</b></p>
  • 16. 16  <p><i>The italics tag is placed between the paragraph tags if that whole paragraph is to be italics.</i></p>  <p><b><i>Paragraph tags are the outermost tags that then contain the bold and the italics tags. Note the order of the opening tags and the closing tags, that is p b i and then i b p. bold</i></b></p>  </body>  </html>
  • 17. 17 THIS IS HOW IT SHOULD LOOK
  • 18. 18 References  W3 Schools http://www.w3schools.com/html/default .asp  Mindset Learn http://learn.mindset.co.za/resources/co mputer-applications-technology/grade- 11/solutions-development-html
  • 19. THANKS! Any questions? You can find me at: Zintle.t@webmail.co.za 19