SlideShare ist ein Scribd-Unternehmen logo
1 von 14
Introduction to HTML
A workshop by Xolani Madlopha
What is HTML?
• It is an abbreviation for Hyper Text Markup Language.
• In creating the website, it focuses more on the content of the
website.
• It is the type of coding or hypertext that one needs to know when
adding content to the website or webpage they are creating.
• HTML is gotten from a dialect SGML (Standard
Illustrations Markup Language).
• The eventual fate of HTML is XML (eXtended Markup
Dialect).
• HTML isn't a programming dialect, it is a Markup
Dialect.
• A markup dialect is an arrangement of markup labels.
• A tag is constantly encased in edge section
<>like <HTML>
• HTML labels ordinarily come in sets like
<HTML> and </HTML> i.e.
Begin tag = <HTML>
End tag =</HTML>
• Start and end labels are additionally called opening
labels and shutting labels
BASIC STRUCTURE OF HTML
<html>
<head></head>
<body></body>
</html>
THESE BASIC STRUCTURES ARE VERY ESSENTIAL AND
MUST BE ALWAYS THERE AND USED IN YOUR HTML.
• <HTML> - Describe HTML web page that is
to be viewed by a web browser.
• <HEAD> - This defines the header section
of the page.
• <TITLE> - This shows a caption in the title
bar of the page.
• <BODY> - This tag show contents of the
web page will be displayed.
THE BASIC HTML TAGS APPLIED LIKE THIS:
<html>
<head>
Write your heading and other top things you need to mention
</head>
<body> write the full content and paragraphs here
write the full content and paragraphs here
write the full content and paragraphs here
</body>
</html>
Heading Element:->
• There are six heading elements
(<H1>,<H2>,<H3>,<H4>, <H5>,<H6>).
• All the six heading elements are container
tag and requires a closing tag.
• <h1> will print the largest heading
• <h6> will print the smallest heading
The visual description of how headers
make your headings to be:
How to start
• You can use Notepad or Notepad ++
• Write the codes and tags with the content incide the notepad/
notepad ++
• Then save the file with these extensions: (.Htm), (.Htm).
• Click on that file and open it with Chrome, Internet Explorer etc. to
see if the content is displayed in a web format.
REFERENCES
Reddy. Y, (2013), Introduction to html, Slideshare.net,
(Accesed on 2 September 2018)
Calvert. S, Swift. B, (2013), Html css-presentation,
Slideshare.net, (Accesed on 2 September 2018)
Patni. S, (2018), introduction to html, Slideshare.net
Mayalisa, (2018), Introduction to html, Slideshare.net,
(Accesed on 2 September 2018)

Weitere ähnliche Inhalte

Was ist angesagt? (20)

Html 5
Html 5Html 5
Html 5
 
Week 4 Lecture Part 2
Week 4 Lecture Part 2Week 4 Lecture Part 2
Week 4 Lecture Part 2
 
Html
HtmlHtml
Html
 
HTML
HTMLHTML
HTML
 
uptu web technology unit 2 html
uptu web technology unit 2 htmluptu web technology unit 2 html
uptu web technology unit 2 html
 
Html training part1
Html training part1Html training part1
Html training part1
 
[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
 
Lesson 1: Introduction to HTML
Lesson 1: Introduction to HTMLLesson 1: Introduction to HTML
Lesson 1: Introduction to HTML
 
Html
HtmlHtml
Html
 
An Introduction to HTML
An Introduction to HTMLAn Introduction to HTML
An Introduction to HTML
 
Html introduction
Html introductionHtml introduction
Html introduction
 
How to create basic webpage
How to create basic webpageHow to create basic webpage
How to create basic webpage
 
Ict html
Ict htmlIct html
Ict html
 
HTML- Hyper Text Markup Language
HTML- Hyper Text Markup LanguageHTML- Hyper Text Markup Language
HTML- Hyper Text Markup Language
 
Introduction to HTML
Introduction to HTMLIntroduction to HTML
Introduction to HTML
 
SEO Training in Noida- Skyinfotech.in
SEO Training in Noida- Skyinfotech.inSEO Training in Noida- Skyinfotech.in
SEO Training in Noida- Skyinfotech.in
 
Html
HtmlHtml
Html
 
HTML5
HTML5 HTML5
HTML5
 
Html
HtmlHtml
Html
 
Html vs xhtml
Html vs xhtmlHtml vs xhtml
Html vs xhtml
 

Ähnlich wie 215077679 introduction to HTML (20)

Ankit (221348051) BCA-Aiml.pptx
Ankit (221348051) BCA-Aiml.pptxAnkit (221348051) BCA-Aiml.pptx
Ankit (221348051) BCA-Aiml.pptx
 
HYPER TEXT MARKUP LANGUAGE BASIC LESSONS
HYPER TEXT MARKUP LANGUAGE BASIC LESSONSHYPER TEXT MARKUP LANGUAGE BASIC LESSONS
HYPER TEXT MARKUP LANGUAGE BASIC LESSONS
 
Basic HTML
Basic HTMLBasic HTML
Basic HTML
 
Html - Tutorial
Html - TutorialHtml - Tutorial
Html - Tutorial
 
HTML 5 Tutorial
HTML 5 TutorialHTML 5 Tutorial
HTML 5 Tutorial
 
HTML & CSS.ppt
HTML & CSS.pptHTML & CSS.ppt
HTML & CSS.ppt
 
Slides 2 - HTML
Slides 2 - HTMLSlides 2 - HTML
Slides 2 - HTML
 
Html
HtmlHtml
Html
 
What is html
What is htmlWhat is html
What is html
 
Lecture 2 introduction to html
Lecture 2  introduction to htmlLecture 2  introduction to html
Lecture 2 introduction to html
 
Handout1 intro to html
Handout1 intro to htmlHandout1 intro to html
Handout1 intro to html
 
Html and its tags
Html and its tagsHtml and its tags
Html and its tags
 
An-Introduction-to-HTML
An-Introduction-to-HTMLAn-Introduction-to-HTML
An-Introduction-to-HTML
 
Basic Html Notes
Basic Html NotesBasic Html Notes
Basic Html Notes
 
Class1slides
Class1slidesClass1slides
Class1slides
 
Html
HtmlHtml
Html
 
2a web technology html basics 1
2a web technology html basics 12a web technology html basics 1
2a web technology html basics 1
 
Html tutorial
Html tutorialHtml tutorial
Html tutorial
 
Html tutorial
Html tutorialHtml tutorial
Html tutorial
 
Html tutorial
Html tutorialHtml tutorial
Html tutorial
 

Kürzlich hochgeladen

FSB Advising Checklist - Orientation 2024
FSB Advising Checklist - Orientation 2024FSB Advising Checklist - Orientation 2024
FSB Advising Checklist - Orientation 2024Elizabeth Walsh
 
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.pptxDr. Ravikiran H M Gowda
 
TỔNG ÔN TẬP THI VÀO LỚP 10 MÔN TIẾNG ANH NĂM HỌC 2023 - 2024 CÓ ĐÁP ÁN (NGỮ Â...
TỔNG ÔN TẬP THI VÀO LỚP 10 MÔN TIẾNG ANH NĂM HỌC 2023 - 2024 CÓ ĐÁP ÁN (NGỮ Â...TỔNG ÔN TẬP THI VÀO LỚP 10 MÔN TIẾNG ANH NĂM HỌC 2023 - 2024 CÓ ĐÁP ÁN (NGỮ Â...
TỔNG ÔN TẬP THI VÀO LỚP 10 MÔN TIẾNG ANH NĂM HỌC 2023 - 2024 CÓ ĐÁP ÁN (NGỮ Â...Nguyen Thanh Tu Collection
 
Sensory_Experience_and_Emotional_Resonance_in_Gabriel_Okaras_The_Piano_and_Th...
Sensory_Experience_and_Emotional_Resonance_in_Gabriel_Okaras_The_Piano_and_Th...Sensory_Experience_and_Emotional_Resonance_in_Gabriel_Okaras_The_Piano_and_Th...
Sensory_Experience_and_Emotional_Resonance_in_Gabriel_Okaras_The_Piano_and_Th...Pooja Bhuva
 
UGC NET Paper 1 Mathematical Reasoning & Aptitude.pdf
UGC NET Paper 1 Mathematical Reasoning & Aptitude.pdfUGC NET Paper 1 Mathematical Reasoning & Aptitude.pdf
UGC NET Paper 1 Mathematical Reasoning & Aptitude.pdfNirmal Dwivedi
 
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).pptxEsquimalt MFRC
 
Exploring_the_Narrative_Style_of_Amitav_Ghoshs_Gun_Island.pptx
Exploring_the_Narrative_Style_of_Amitav_Ghoshs_Gun_Island.pptxExploring_the_Narrative_Style_of_Amitav_Ghoshs_Gun_Island.pptx
Exploring_the_Narrative_Style_of_Amitav_Ghoshs_Gun_Island.pptxPooja Bhuva
 
How to setup Pycharm environment for Odoo 17.pptx
How to setup Pycharm environment for Odoo 17.pptxHow to setup Pycharm environment for Odoo 17.pptx
How to setup Pycharm environment for Odoo 17.pptxCeline George
 
Google Gemini An AI Revolution in Education.pptx
Google Gemini An AI Revolution in Education.pptxGoogle Gemini An AI Revolution in Education.pptx
Google Gemini An AI Revolution in Education.pptxDr. Sarita Anand
 
This PowerPoint helps students to consider the concept of infinity.
This PowerPoint helps students to consider the concept of infinity.This PowerPoint helps students to consider the concept of infinity.
This PowerPoint helps students to consider the concept of infinity.christianmathematics
 
Key note speaker Neum_Admir Softic_ENG.pdf
Key note speaker Neum_Admir Softic_ENG.pdfKey note speaker Neum_Admir Softic_ENG.pdf
Key note speaker Neum_Admir Softic_ENG.pdfAdmir Softic
 
Graduate Outcomes Presentation Slides - English
Graduate Outcomes Presentation Slides - EnglishGraduate Outcomes Presentation Slides - English
Graduate Outcomes Presentation Slides - Englishneillewis46
 
Kodo Millet PPT made by Ghanshyam bairwa college of Agriculture kumher bhara...
Kodo Millet  PPT made by Ghanshyam bairwa college of Agriculture kumher bhara...Kodo Millet  PPT made by Ghanshyam bairwa college of Agriculture kumher bhara...
Kodo Millet PPT made by Ghanshyam bairwa college of Agriculture kumher bhara...pradhanghanshyam7136
 
COMMUNICATING NEGATIVE NEWS - APPROACHES .pptx
COMMUNICATING NEGATIVE NEWS - APPROACHES .pptxCOMMUNICATING NEGATIVE NEWS - APPROACHES .pptx
COMMUNICATING NEGATIVE NEWS - APPROACHES .pptxannathomasp01
 
Salient Features of India constitution especially power and functions
Salient Features of India constitution especially power and functionsSalient Features of India constitution especially power and functions
Salient Features of India constitution especially power and functionsKarakKing
 
Interdisciplinary_Insights_Data_Collection_Methods.pptx
Interdisciplinary_Insights_Data_Collection_Methods.pptxInterdisciplinary_Insights_Data_Collection_Methods.pptx
Interdisciplinary_Insights_Data_Collection_Methods.pptxPooja Bhuva
 
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 POSCeline George
 
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 17Celine George
 
Application orientated numerical on hev.ppt
Application orientated numerical on hev.pptApplication orientated numerical on hev.ppt
Application orientated numerical on hev.pptRamjanShidvankar
 
How to Give a Domain for a Field in Odoo 17
How to Give a Domain for a Field in Odoo 17How to Give a Domain for a Field in Odoo 17
How to Give a Domain for a Field in Odoo 17Celine George
 

Kürzlich hochgeladen (20)

FSB Advising Checklist - Orientation 2024
FSB Advising Checklist - Orientation 2024FSB Advising Checklist - Orientation 2024
FSB Advising Checklist - Orientation 2024
 
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
 
TỔNG ÔN TẬP THI VÀO LỚP 10 MÔN TIẾNG ANH NĂM HỌC 2023 - 2024 CÓ ĐÁP ÁN (NGỮ Â...
TỔNG ÔN TẬP THI VÀO LỚP 10 MÔN TIẾNG ANH NĂM HỌC 2023 - 2024 CÓ ĐÁP ÁN (NGỮ Â...TỔNG ÔN TẬP THI VÀO LỚP 10 MÔN TIẾNG ANH NĂM HỌC 2023 - 2024 CÓ ĐÁP ÁN (NGỮ Â...
TỔNG ÔN TẬP THI VÀO LỚP 10 MÔN TIẾNG ANH NĂM HỌC 2023 - 2024 CÓ ĐÁP ÁN (NGỮ Â...
 
Sensory_Experience_and_Emotional_Resonance_in_Gabriel_Okaras_The_Piano_and_Th...
Sensory_Experience_and_Emotional_Resonance_in_Gabriel_Okaras_The_Piano_and_Th...Sensory_Experience_and_Emotional_Resonance_in_Gabriel_Okaras_The_Piano_and_Th...
Sensory_Experience_and_Emotional_Resonance_in_Gabriel_Okaras_The_Piano_and_Th...
 
UGC NET Paper 1 Mathematical Reasoning & Aptitude.pdf
UGC NET Paper 1 Mathematical Reasoning & Aptitude.pdfUGC NET Paper 1 Mathematical Reasoning & Aptitude.pdf
UGC NET Paper 1 Mathematical Reasoning & Aptitude.pdf
 
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
 
Exploring_the_Narrative_Style_of_Amitav_Ghoshs_Gun_Island.pptx
Exploring_the_Narrative_Style_of_Amitav_Ghoshs_Gun_Island.pptxExploring_the_Narrative_Style_of_Amitav_Ghoshs_Gun_Island.pptx
Exploring_the_Narrative_Style_of_Amitav_Ghoshs_Gun_Island.pptx
 
How to setup Pycharm environment for Odoo 17.pptx
How to setup Pycharm environment for Odoo 17.pptxHow to setup Pycharm environment for Odoo 17.pptx
How to setup Pycharm environment for Odoo 17.pptx
 
Google Gemini An AI Revolution in Education.pptx
Google Gemini An AI Revolution in Education.pptxGoogle Gemini An AI Revolution in Education.pptx
Google Gemini An AI Revolution in Education.pptx
 
This PowerPoint helps students to consider the concept of infinity.
This PowerPoint helps students to consider the concept of infinity.This PowerPoint helps students to consider the concept of infinity.
This PowerPoint helps students to consider the concept of infinity.
 
Key note speaker Neum_Admir Softic_ENG.pdf
Key note speaker Neum_Admir Softic_ENG.pdfKey note speaker Neum_Admir Softic_ENG.pdf
Key note speaker Neum_Admir Softic_ENG.pdf
 
Graduate Outcomes Presentation Slides - English
Graduate Outcomes Presentation Slides - EnglishGraduate Outcomes Presentation Slides - English
Graduate Outcomes Presentation Slides - English
 
Kodo Millet PPT made by Ghanshyam bairwa college of Agriculture kumher bhara...
Kodo Millet  PPT made by Ghanshyam bairwa college of Agriculture kumher bhara...Kodo Millet  PPT made by Ghanshyam bairwa college of Agriculture kumher bhara...
Kodo Millet PPT made by Ghanshyam bairwa college of Agriculture kumher bhara...
 
COMMUNICATING NEGATIVE NEWS - APPROACHES .pptx
COMMUNICATING NEGATIVE NEWS - APPROACHES .pptxCOMMUNICATING NEGATIVE NEWS - APPROACHES .pptx
COMMUNICATING NEGATIVE NEWS - APPROACHES .pptx
 
Salient Features of India constitution especially power and functions
Salient Features of India constitution especially power and functionsSalient Features of India constitution especially power and functions
Salient Features of India constitution especially power and functions
 
Interdisciplinary_Insights_Data_Collection_Methods.pptx
Interdisciplinary_Insights_Data_Collection_Methods.pptxInterdisciplinary_Insights_Data_Collection_Methods.pptx
Interdisciplinary_Insights_Data_Collection_Methods.pptx
 
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
 
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
 
Application orientated numerical on hev.ppt
Application orientated numerical on hev.pptApplication orientated numerical on hev.ppt
Application orientated numerical on hev.ppt
 
How to Give a Domain for a Field in Odoo 17
How to Give a Domain for a Field in Odoo 17How to Give a Domain for a Field in Odoo 17
How to Give a Domain for a Field in Odoo 17
 

215077679 introduction to HTML

  • 1. Introduction to HTML A workshop by Xolani Madlopha
  • 2. What is HTML? • It is an abbreviation for Hyper Text Markup Language. • In creating the website, it focuses more on the content of the website. • It is the type of coding or hypertext that one needs to know when adding content to the website or webpage they are creating.
  • 3. • HTML is gotten from a dialect SGML (Standard Illustrations Markup Language). • The eventual fate of HTML is XML (eXtended Markup Dialect). • HTML isn't a programming dialect, it is a Markup Dialect. • A markup dialect is an arrangement of markup labels.
  • 4. • A tag is constantly encased in edge section <>like <HTML> • HTML labels ordinarily come in sets like <HTML> and </HTML> i.e. Begin tag = <HTML>
  • 5. End tag =</HTML> • Start and end labels are additionally called opening labels and shutting labels
  • 6. BASIC STRUCTURE OF HTML <html> <head></head> <body></body> </html> THESE BASIC STRUCTURES ARE VERY ESSENTIAL AND MUST BE ALWAYS THERE AND USED IN YOUR HTML.
  • 7. • <HTML> - Describe HTML web page that is to be viewed by a web browser. • <HEAD> - This defines the header section of the page. • <TITLE> - This shows a caption in the title bar of the page. • <BODY> - This tag show contents of the web page will be displayed.
  • 8. THE BASIC HTML TAGS APPLIED LIKE THIS: <html> <head> Write your heading and other top things you need to mention </head> <body> write the full content and paragraphs here write the full content and paragraphs here write the full content and paragraphs here </body> </html>
  • 9. Heading Element:-> • There are six heading elements (<H1>,<H2>,<H3>,<H4>, <H5>,<H6>). • All the six heading elements are container tag and requires a closing tag. • <h1> will print the largest heading • <h6> will print the smallest heading
  • 10. The visual description of how headers make your headings to be:
  • 11.
  • 12. How to start • You can use Notepad or Notepad ++ • Write the codes and tags with the content incide the notepad/ notepad ++ • Then save the file with these extensions: (.Htm), (.Htm). • Click on that file and open it with Chrome, Internet Explorer etc. to see if the content is displayed in a web format.
  • 13.
  • 14. REFERENCES Reddy. Y, (2013), Introduction to html, Slideshare.net, (Accesed on 2 September 2018) Calvert. S, Swift. B, (2013), Html css-presentation, Slideshare.net, (Accesed on 2 September 2018) Patni. S, (2018), introduction to html, Slideshare.net Mayalisa, (2018), Introduction to html, Slideshare.net, (Accesed on 2 September 2018)