SlideShare a Scribd company logo
1 of 24
Introduction to HTML
What is an HTML?
 Is a popular computer language that is used
to create web page.
 It is a coding system used to create a web
pages.
 It consists of markup that conveys
information about the structure.
 It provides instructions to the Web browser
on how documents should appear.
URL
 Uniform Resource Locator
 Is a unique address for a file that resides on
the Internet.
 URL is composed of two forms:
 Absolute URL
 Relative URL
Absolute URL
 Is one that contains the name of the protocol
and the hostname.
 Complete internet address that takes one to
the exact directory or file of a website. Also
called absolute link
 Example
 http://www.businessdictionary.com/definition/a
bsolute-URL.html
Relative URL
 Is one that contains only the name of the
path of a file. It is the one that points to a
resource within the same site.
 Example
 absolute-URL.html
To Illustrate...
RELATIVE URL ABSOLUTE URL
about.html http://WebReference.com/html/about.html
tutorial1/ http://WebReference.com/html/tutorial1/
tutorial1/2.html http://WebReference.com/html/tutorial1/2.html
/experts/ http://WebReference.com/experts/
./about.html http://WebReference.com/html/about.html
APPLICATIONS NEEDED
Text Editor or the HTML Editor
Web Browser
Text Editor
A text editor is a program that will
allow you to edit plain text files
Example
Notepad
WordPad
Microsoft Word
...
Web Browser
 A web browser is a software application which
enables a user to display and interact with text,
images, videos, music and other information
typically located on a Web page at a website on the
World Wide Web
 Example
 Internet Explorer
 Mozilla Firefox
 Apple Safari
 Konqueror
 Opera
 OmniWeb
HTML document structure
<html>
<head>
<title> </title>
</head>
<body>
</body>
</html>
HTML document structure
<html>
<head>
<title> </title>
</head>
<body>
</body>
</html>
Notes To Consider
• HTML tags are not case-sensitive.
• Words enclosed in an angle
brackets, < >, are the codes or
tags
• Tags always come in pairs. The
second pairs has a slash (/) before
the tag inside the bracket.
• The slash means “stop”
• The tag with a slash is called the
CLOSING TAG, while the one
without a slash is called the
OPENING TAG.
• The tag <html> and </html>
must be placed at the start and
end of every document.
• What you type in between the
<body> and </body> tag are the
content that will appear on the
Web page.
• The text in between the <title>
and </title> tag will appear on
the title bar of a web browser.
To start making your own Web Page
1. Open a new file in Notepad.
2. Type an HTML document structure.
3. Save your work.
How to save
1. Click File, then Save As or Save.
2. Save As dialog box will appear.
3. Create your own folder.
4. In the File Name box, type the file name
1. Take note, use .html as an extension file
5. Finally, click save.
The .html extension indicates that the file
is a web page and not an ordinary text file
To view your HTML document in
Internet Explorer
1. Explore where you save your file.
2. Double click the file.
To edit your page
1. Explore where you save your file.
2. Right click the web page you want to edit.
3. Choose Open with...
4. If notepad is not one of the applications...
5. Click on Browse...
Assignment
Topic: Paragraph, Text Break and
Formatting Text
1. What is the tag use to create a paragraph,
text break, and indentation?
2. What are formatting tags?
3. Write 3 short poems.

More Related Content

What's hot

Div tag presentation
Div tag presentationDiv tag presentation
Div tag presentation
alyssa_lum11
 

What's hot (20)

Introduction to html
Introduction to htmlIntroduction to html
Introduction to html
 
HTML + CSS Examples
HTML + CSS ExamplesHTML + CSS Examples
HTML + CSS Examples
 
Basic Html Knowledge for students
Basic Html Knowledge for studentsBasic Html Knowledge for students
Basic Html Knowledge for students
 
Html
HtmlHtml
Html
 
Html
HtmlHtml
Html
 
Introduction to html
Introduction to htmlIntroduction to html
Introduction to html
 
Html ppt
Html pptHtml ppt
Html ppt
 
HTML, CSS and Java Scripts Basics
HTML, CSS and Java Scripts BasicsHTML, CSS and Java Scripts Basics
HTML, CSS and Java Scripts Basics
 
Cse html ppt
Cse html pptCse html ppt
Cse html ppt
 
HTML Introduction
HTML IntroductionHTML Introduction
HTML Introduction
 
How to learn HTML in 10 Days
How to learn HTML in 10 DaysHow to learn HTML in 10 Days
How to learn HTML in 10 Days
 
HTML & CSS Masterclass
HTML & CSS MasterclassHTML & CSS Masterclass
HTML & CSS Masterclass
 
Html basic
Html basicHtml basic
Html basic
 
HTML
HTMLHTML
HTML
 
Html
HtmlHtml
Html
 
HTML Lesson 1
HTML Lesson 1HTML Lesson 1
HTML Lesson 1
 
HTML (Web) basics for a beginner
HTML (Web) basics for a beginnerHTML (Web) basics for a beginner
HTML (Web) basics for a beginner
 
The Complete HTML
The Complete HTMLThe Complete HTML
The Complete HTML
 
Div tag presentation
Div tag presentationDiv tag presentation
Div tag presentation
 
Intro Html
Intro HtmlIntro Html
Intro Html
 

Viewers also liked

Introduction to html
Introduction to htmlIntroduction to html
Introduction to html
vikasgaur31
 

Viewers also liked (10)

Introduction to HTML
Introduction to HTMLIntroduction to HTML
Introduction to HTML
 
Lecture 2 introduction to html
Lecture 2  introduction to htmlLecture 2  introduction to html
Lecture 2 introduction to html
 
Lesson 1: Introduction to HTML
Lesson 1: Introduction to HTMLLesson 1: Introduction to HTML
Lesson 1: Introduction to HTML
 
Introduction to HTML and CSS
Introduction to HTML and CSSIntroduction to HTML and CSS
Introduction to HTML and CSS
 
HTML presentation for beginners
HTML presentation for beginnersHTML presentation for beginners
HTML presentation for beginners
 
Introduction to html
Introduction to htmlIntroduction to html
Introduction to html
 
Introduction to HTML
Introduction to HTMLIntroduction to HTML
Introduction to HTML
 
Top Tips For Working Smarter
Top Tips For Working SmarterTop Tips For Working Smarter
Top Tips For Working Smarter
 
10 Practical Ways to Be More Efficient at Work
10 Practical Ways to Be More Efficient at Work10 Practical Ways to Be More Efficient at Work
10 Practical Ways to Be More Efficient at Work
 
The Productivity Secret Of The Best Leaders
The Productivity Secret Of The Best LeadersThe Productivity Secret Of The Best Leaders
The Productivity Secret Of The Best Leaders
 

Similar to Introduction to HTML (20)

Html - Tutorial
Html - TutorialHtml - Tutorial
Html - Tutorial
 
Web Design-III IT.ppt
Web Design-III IT.pptWeb Design-III IT.ppt
Web Design-III IT.ppt
 
1 introduction to html
1 introduction to html1 introduction to html
1 introduction to html
 
About html
About htmlAbout html
About html
 
Introduction to HTML.pptx
Introduction to HTML.pptxIntroduction to HTML.pptx
Introduction to HTML.pptx
 
Html tutorial
Html tutorialHtml tutorial
Html tutorial
 
Html tutorial
Html tutorialHtml tutorial
Html tutorial
 
Html tutorial
Html tutorialHtml tutorial
Html tutorial
 
Html
HtmlHtml
Html
 
Html basics
Html basicsHtml basics
Html basics
 
Learn html from www
Learn html from wwwLearn html from www
Learn html from www
 
Html introduction
Html introductionHtml introduction
Html introduction
 
HTML Basics.pdf
HTML Basics.pdfHTML Basics.pdf
HTML Basics.pdf
 
Tm 1st quarter - 1st meeting
Tm   1st quarter - 1st meetingTm   1st quarter - 1st meeting
Tm 1st quarter - 1st meeting
 
Intr to-html-xhtml-1233508169541646-3
Intr to-html-xhtml-1233508169541646-3Intr to-html-xhtml-1233508169541646-3
Intr to-html-xhtml-1233508169541646-3
 
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 HTML
Introduction to HTMLIntroduction to HTML
Introduction to HTML
 
Html (hypertext markup language)
Html (hypertext markup language)Html (hypertext markup language)
Html (hypertext markup language)
 
Html basics
Html basicsHtml basics
Html basics
 
HTML_Basics.pdf
HTML_Basics.pdfHTML_Basics.pdf
HTML_Basics.pdf
 

More from Ann Alcid

Inserting graphics (for ygroup)
Inserting graphics (for ygroup)Inserting graphics (for ygroup)
Inserting graphics (for ygroup)
Ann Alcid
 
Inserting background
Inserting backgroundInserting background
Inserting background
Ann Alcid
 
Working with dialog box and working with web page
Working with dialog box and working with web pageWorking with dialog box and working with web page
Working with dialog box and working with web page
Ann Alcid
 
Autoshape and word art (for ygroup)
Autoshape and word art (for ygroup)Autoshape and word art (for ygroup)
Autoshape and word art (for ygroup)
Ann Alcid
 
Picture toolbar
Picture toolbarPicture toolbar
Picture toolbar
Ann Alcid
 
Standard and formatting toolbar
Standard and formatting toolbarStandard and formatting toolbar
Standard and formatting toolbar
Ann Alcid
 
Introduction, features and environment of ms front page 2003
Introduction, features and environment of ms front page 2003Introduction, features and environment of ms front page 2003
Introduction, features and environment of ms front page 2003
Ann Alcid
 
Tips in designing a webpage
Tips in designing a webpageTips in designing a webpage
Tips in designing a webpage
Ann Alcid
 
Cropping and resizing the graphics
Cropping and resizing the graphicsCropping and resizing the graphics
Cropping and resizing the graphics
Ann Alcid
 
Ordered & unordered list in MS Frontpage 2003
Ordered & unordered list in MS Frontpage 2003Ordered & unordered list in MS Frontpage 2003
Ordered & unordered list in MS Frontpage 2003
Ann Alcid
 
Types of background in MS Frontpage 2003
Types of background in MS Frontpage 2003Types of background in MS Frontpage 2003
Types of background in MS Frontpage 2003
Ann Alcid
 
Preformatted, abbreviation, acronyms
Preformatted, abbreviation, acronymsPreformatted, abbreviation, acronyms
Preformatted, abbreviation, acronyms
Ann Alcid
 
Horizonal ruled line
Horizonal ruled line Horizonal ruled line
Horizonal ruled line
Ann Alcid
 
Paragraph, text break and formatting text in MS Frontpage 2003
Paragraph, text break and formatting text in MS Frontpage 2003Paragraph, text break and formatting text in MS Frontpage 2003
Paragraph, text break and formatting text in MS Frontpage 2003
Ann Alcid
 
Introduction to html
Introduction to htmlIntroduction to html
Introduction to html
Ann Alcid
 
Table in MS Frontpage 2003
Table in MS Frontpage 2003Table in MS Frontpage 2003
Table in MS Frontpage 2003
Ann Alcid
 
Tips In Designing A Webpage
Tips In Designing A WebpageTips In Designing A Webpage
Tips In Designing A Webpage
Ann Alcid
 

More from Ann Alcid (20)

Inserting graphics (for ygroup)
Inserting graphics (for ygroup)Inserting graphics (for ygroup)
Inserting graphics (for ygroup)
 
Inserting background
Inserting backgroundInserting background
Inserting background
 
Working with dialog box and working with web page
Working with dialog box and working with web pageWorking with dialog box and working with web page
Working with dialog box and working with web page
 
Autoshape and word art (for ygroup)
Autoshape and word art (for ygroup)Autoshape and word art (for ygroup)
Autoshape and word art (for ygroup)
 
Picture toolbar
Picture toolbarPicture toolbar
Picture toolbar
 
Standard and formatting toolbar
Standard and formatting toolbarStandard and formatting toolbar
Standard and formatting toolbar
 
Introduction, features and environment of ms front page 2003
Introduction, features and environment of ms front page 2003Introduction, features and environment of ms front page 2003
Introduction, features and environment of ms front page 2003
 
Tips in designing a webpage
Tips in designing a webpageTips in designing a webpage
Tips in designing a webpage
 
Cropping and resizing the graphics
Cropping and resizing the graphicsCropping and resizing the graphics
Cropping and resizing the graphics
 
Marquee
MarqueeMarquee
Marquee
 
Ordered & unordered list in MS Frontpage 2003
Ordered & unordered list in MS Frontpage 2003Ordered & unordered list in MS Frontpage 2003
Ordered & unordered list in MS Frontpage 2003
 
Types of background in MS Frontpage 2003
Types of background in MS Frontpage 2003Types of background in MS Frontpage 2003
Types of background in MS Frontpage 2003
 
Preformatted, abbreviation, acronyms
Preformatted, abbreviation, acronymsPreformatted, abbreviation, acronyms
Preformatted, abbreviation, acronyms
 
Horizonal ruled line
Horizonal ruled line Horizonal ruled line
Horizonal ruled line
 
Paragraph, text break and formatting text in MS Frontpage 2003
Paragraph, text break and formatting text in MS Frontpage 2003Paragraph, text break and formatting text in MS Frontpage 2003
Paragraph, text break and formatting text in MS Frontpage 2003
 
Introduction to html
Introduction to htmlIntroduction to html
Introduction to html
 
Table in MS Frontpage 2003
Table in MS Frontpage 2003Table in MS Frontpage 2003
Table in MS Frontpage 2003
 
Adobe Photoshop Creating New Document
Adobe Photoshop Creating New DocumentAdobe Photoshop Creating New Document
Adobe Photoshop Creating New Document
 
Adobe Photoshop Toolbar
Adobe Photoshop ToolbarAdobe Photoshop Toolbar
Adobe Photoshop Toolbar
 
Tips In Designing A Webpage
Tips In Designing A WebpageTips In Designing A Webpage
Tips In Designing A Webpage
 

Recently uploaded

1029 - Danh muc Sach Giao Khoa 10 . pdf
1029 -  Danh muc Sach Giao Khoa 10 . pdf1029 -  Danh muc Sach Giao Khoa 10 . pdf
1029 - Danh muc Sach Giao Khoa 10 . pdf
QucHHunhnh
 
The basics of sentences session 2pptx copy.pptx
The basics of sentences session 2pptx copy.pptxThe basics of sentences session 2pptx copy.pptx
The basics of sentences session 2pptx copy.pptx
heathfieldcps1
 

Recently uploaded (20)

microwave assisted reaction. General introduction
microwave assisted reaction. General introductionmicrowave assisted reaction. General introduction
microwave assisted reaction. General introduction
 
1029 - Danh muc Sach Giao Khoa 10 . pdf
1029 -  Danh muc Sach Giao Khoa 10 . pdf1029 -  Danh muc Sach Giao Khoa 10 . pdf
1029 - Danh muc Sach Giao Khoa 10 . pdf
 
Measures of Dispersion and Variability: Range, QD, AD and SD
Measures of Dispersion and Variability: Range, QD, AD and SDMeasures of Dispersion and Variability: Range, QD, AD and SD
Measures of Dispersion and Variability: Range, QD, AD and SD
 
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
 
ComPTIA Overview | Comptia Security+ Book SY0-701
ComPTIA Overview | Comptia Security+ Book SY0-701ComPTIA Overview | Comptia Security+ Book SY0-701
ComPTIA Overview | Comptia Security+ Book SY0-701
 
Micro-Scholarship, What it is, How can it help me.pdf
Micro-Scholarship, What it is, How can it help me.pdfMicro-Scholarship, What it is, How can it help me.pdf
Micro-Scholarship, What it is, How can it help me.pdf
 
Class 11th Physics NEET formula sheet pdf
Class 11th Physics NEET formula sheet pdfClass 11th Physics NEET formula sheet pdf
Class 11th Physics NEET formula sheet pdf
 
Unit-V; Pricing (Pharma Marketing Management).pptx
Unit-V; Pricing (Pharma Marketing Management).pptxUnit-V; Pricing (Pharma Marketing Management).pptx
Unit-V; Pricing (Pharma Marketing Management).pptx
 
Ecological Succession. ( ECOSYSTEM, B. Pharmacy, 1st Year, Sem-II, Environmen...
Ecological Succession. ( ECOSYSTEM, B. Pharmacy, 1st Year, Sem-II, Environmen...Ecological Succession. ( ECOSYSTEM, B. Pharmacy, 1st Year, Sem-II, Environmen...
Ecological Succession. ( ECOSYSTEM, B. Pharmacy, 1st Year, Sem-II, Environmen...
 
The basics of sentences session 2pptx copy.pptx
The basics of sentences session 2pptx copy.pptxThe basics of sentences session 2pptx copy.pptx
The basics of sentences session 2pptx copy.pptx
 
Asian American Pacific Islander Month DDSD 2024.pptx
Asian American Pacific Islander Month DDSD 2024.pptxAsian American Pacific Islander Month DDSD 2024.pptx
Asian American Pacific Islander Month DDSD 2024.pptx
 
General Principles of Intellectual Property: Concepts of Intellectual Proper...
General Principles of Intellectual Property: Concepts of Intellectual  Proper...General Principles of Intellectual Property: Concepts of Intellectual  Proper...
General Principles of Intellectual Property: Concepts of Intellectual Proper...
 
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
 
Advanced Views - Calendar View in Odoo 17
Advanced Views - Calendar View in Odoo 17Advanced Views - Calendar View in Odoo 17
Advanced Views - Calendar View in Odoo 17
 
ICT Role in 21st Century Education & its Challenges.pptx
ICT Role in 21st Century Education & its Challenges.pptxICT Role in 21st Century Education & its Challenges.pptx
ICT Role in 21st Century Education & its Challenges.pptx
 
Sociology 101 Demonstration of Learning Exhibit
Sociology 101 Demonstration of Learning ExhibitSociology 101 Demonstration of Learning Exhibit
Sociology 101 Demonstration of Learning Exhibit
 
Food Chain and Food Web (Ecosystem) EVS, B. Pharmacy 1st Year, Sem-II
Food Chain and Food Web (Ecosystem) EVS, B. Pharmacy 1st Year, Sem-IIFood Chain and Food Web (Ecosystem) EVS, B. Pharmacy 1st Year, Sem-II
Food Chain and Food Web (Ecosystem) EVS, B. Pharmacy 1st Year, Sem-II
 
PROCESS RECORDING FORMAT.docx
PROCESS      RECORDING        FORMAT.docxPROCESS      RECORDING        FORMAT.docx
PROCESS RECORDING FORMAT.docx
 
Introduction to Nonprofit Accounting: The Basics
Introduction to Nonprofit Accounting: The BasicsIntroduction to Nonprofit Accounting: The Basics
Introduction to Nonprofit Accounting: The Basics
 
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
 

Introduction to HTML

  • 2. What is an HTML?  Is a popular computer language that is used to create web page.  It is a coding system used to create a web pages.  It consists of markup that conveys information about the structure.  It provides instructions to the Web browser on how documents should appear.
  • 3. URL  Uniform Resource Locator  Is a unique address for a file that resides on the Internet.  URL is composed of two forms:  Absolute URL  Relative URL
  • 4. Absolute URL  Is one that contains the name of the protocol and the hostname.  Complete internet address that takes one to the exact directory or file of a website. Also called absolute link  Example  http://www.businessdictionary.com/definition/a bsolute-URL.html
  • 5. Relative URL  Is one that contains only the name of the path of a file. It is the one that points to a resource within the same site.  Example  absolute-URL.html
  • 6. To Illustrate... RELATIVE URL ABSOLUTE URL about.html http://WebReference.com/html/about.html tutorial1/ http://WebReference.com/html/tutorial1/ tutorial1/2.html http://WebReference.com/html/tutorial1/2.html /experts/ http://WebReference.com/experts/ ./about.html http://WebReference.com/html/about.html
  • 7. APPLICATIONS NEEDED Text Editor or the HTML Editor Web Browser
  • 8. Text Editor A text editor is a program that will allow you to edit plain text files Example Notepad WordPad Microsoft Word ...
  • 9. Web Browser  A web browser is a software application which enables a user to display and interact with text, images, videos, music and other information typically located on a Web page at a website on the World Wide Web  Example  Internet Explorer  Mozilla Firefox  Apple Safari  Konqueror  Opera  OmniWeb
  • 10. HTML document structure <html> <head> <title> </title> </head> <body> </body> </html>
  • 11. HTML document structure <html> <head> <title> </title> </head> <body> </body> </html>
  • 13. • HTML tags are not case-sensitive. • Words enclosed in an angle brackets, < >, are the codes or tags
  • 14. • Tags always come in pairs. The second pairs has a slash (/) before the tag inside the bracket. • The slash means “stop”
  • 15. • The tag with a slash is called the CLOSING TAG, while the one without a slash is called the OPENING TAG.
  • 16. • The tag <html> and </html> must be placed at the start and end of every document.
  • 17. • What you type in between the <body> and </body> tag are the content that will appear on the Web page.
  • 18. • The text in between the <title> and </title> tag will appear on the title bar of a web browser.
  • 19. To start making your own Web Page 1. Open a new file in Notepad. 2. Type an HTML document structure. 3. Save your work.
  • 20. How to save 1. Click File, then Save As or Save. 2. Save As dialog box will appear. 3. Create your own folder. 4. In the File Name box, type the file name 1. Take note, use .html as an extension file 5. Finally, click save.
  • 21. The .html extension indicates that the file is a web page and not an ordinary text file
  • 22. To view your HTML document in Internet Explorer 1. Explore where you save your file. 2. Double click the file.
  • 23. To edit your page 1. Explore where you save your file. 2. Right click the web page you want to edit. 3. Choose Open with... 4. If notepad is not one of the applications... 5. Click on Browse...
  • 24. Assignment Topic: Paragraph, Text Break and Formatting Text 1. What is the tag use to create a paragraph, text break, and indentation? 2. What are formatting tags? 3. Write 3 short poems.