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

Internet workshop
Internet workshopInternet workshop
Internet workshop
maria9102
 
Jhalak And Sheenal final Url
Jhalak And Sheenal  final UrlJhalak And Sheenal  final Url
Jhalak And Sheenal final Url
naly01
 
Final Url
Final UrlFinal Url
Final Url
naly01
 
Word to WordPerfect Conversion: How to Strip Formatting
Word to WordPerfect Conversion: How to Strip FormattingWord to WordPerfect Conversion: How to Strip Formatting
Word to WordPerfect Conversion: How to Strip Formatting
Oregon Law Practice Management
 

What's hot (20)

HTML for Education
HTML for EducationHTML for Education
HTML for Education
 
Html
HtmlHtml
Html
 
1. html introduction
1. html introduction1. html introduction
1. html introduction
 
Introduction to markup language and oXygen XML editor
Introduction to markup language and oXygen XML editorIntroduction to markup language and oXygen XML editor
Introduction to markup language and oXygen XML editor
 
An introduction to html
An introduction to htmlAn introduction to html
An introduction to html
 
HTML Introduction, HTML History, HTML Uses, HTML benifits
HTML Introduction, HTML History, HTML Uses, HTML benifitsHTML Introduction, HTML History, HTML Uses, HTML benifits
HTML Introduction, HTML History, HTML Uses, HTML benifits
 
Introducing HTML
Introducing HTMLIntroducing HTML
Introducing HTML
 
Internet workshop
Internet workshopInternet workshop
Internet workshop
 
URL
URLURL
URL
 
Jhalak And Sheenal final Url
Jhalak And Sheenal  final UrlJhalak And Sheenal  final Url
Jhalak And Sheenal final Url
 
Html
HtmlHtml
Html
 
Html grade 11
Html grade 11Html grade 11
Html grade 11
 
Html tag
Html tagHtml tag
Html tag
 
What is HTML - An Introduction to HTML (Hypertext Markup Language)
What is HTML - An Introduction to HTML (Hypertext Markup Language)What is HTML - An Introduction to HTML (Hypertext Markup Language)
What is HTML - An Introduction to HTML (Hypertext Markup Language)
 
Final Url
Final UrlFinal Url
Final Url
 
Word to WordPerfect Conversion: How to Strip Formatting
Word to WordPerfect Conversion: How to Strip FormattingWord to WordPerfect Conversion: How to Strip Formatting
Word to WordPerfect Conversion: How to Strip Formatting
 
What is HTML- d3brand.com
What is HTML- d3brand.comWhat is HTML- d3brand.com
What is HTML- d3brand.com
 
Html.ppt
Html.pptHtml.ppt
Html.ppt
 
HTML_Slideshow1
HTML_Slideshow1HTML_Slideshow1
HTML_Slideshow1
 
Artistic Web Applications - Week3 - Part 3
Artistic Web Applications - Week3 - Part 3Artistic Web Applications - Week3 - Part 3
Artistic Web Applications - Week3 - Part 3
 

Viewers also liked (8)

Cropping an Image
Cropping an ImageCropping an Image
Cropping an Image
 
Cropping and resizing the graphics
Cropping and resizing the graphicsCropping and resizing the graphics
Cropping and resizing the graphics
 
Photography Skill - Cropping
Photography Skill - CroppingPhotography Skill - Cropping
Photography Skill - Cropping
 
Image Steganography using LSB
Image Steganography using LSBImage Steganography using LSB
Image Steganography using LSB
 
Steganography Project
Steganography Project Steganography Project
Steganography Project
 
Cropping Assignment
Cropping AssignmentCropping Assignment
Cropping Assignment
 
2010 03-19 ... soutenir et mobiliser l'employabilité - le rôle des relations ...
2010 03-19 ... soutenir et mobiliser l'employabilité - le rôle des relations ...2010 03-19 ... soutenir et mobiliser l'employabilité - le rôle des relations ...
2010 03-19 ... soutenir et mobiliser l'employabilité - le rôle des relations ...
 
PPT steganography
PPT steganographyPPT steganography
PPT steganography
 

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
 
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
 
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
 
The OSI Model
The OSI ModelThe OSI Model
The OSI Model
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
 
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
 
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
 
The OSI Model
The OSI ModelThe OSI Model
The OSI Model
 
Lymphatic System
Lymphatic SystemLymphatic System
Lymphatic System
 

Recently uploaded

Why Teams call analytics are critical to your entire business
Why Teams call analytics are critical to your entire businessWhy Teams call analytics are critical to your entire business
Why Teams call analytics are critical to your entire business
panagenda
 
Cloud Frontiers: A Deep Dive into Serverless Spatial Data and FME
Cloud Frontiers:  A Deep Dive into Serverless Spatial Data and FMECloud Frontiers:  A Deep Dive into Serverless Spatial Data and FME
Cloud Frontiers: A Deep Dive into Serverless Spatial Data and FME
Safe Software
 

Recently uploaded (20)

Strategize a Smooth Tenant-to-tenant Migration and Copilot Takeoff
Strategize a Smooth Tenant-to-tenant Migration and Copilot TakeoffStrategize a Smooth Tenant-to-tenant Migration and Copilot Takeoff
Strategize a Smooth Tenant-to-tenant Migration and Copilot Takeoff
 
Manulife - Insurer Innovation Award 2024
Manulife - Insurer Innovation Award 2024Manulife - Insurer Innovation Award 2024
Manulife - Insurer Innovation Award 2024
 
Understanding Discord NSFW Servers A Guide for Responsible Users.pdf
Understanding Discord NSFW Servers A Guide for Responsible Users.pdfUnderstanding Discord NSFW Servers A Guide for Responsible Users.pdf
Understanding Discord NSFW Servers A Guide for Responsible Users.pdf
 
Apidays Singapore 2024 - Building Digital Trust in a Digital Economy by Veron...
Apidays Singapore 2024 - Building Digital Trust in a Digital Economy by Veron...Apidays Singapore 2024 - Building Digital Trust in a Digital Economy by Veron...
Apidays Singapore 2024 - Building Digital Trust in a Digital Economy by Veron...
 
The 7 Things I Know About Cyber Security After 25 Years | April 2024
The 7 Things I Know About Cyber Security After 25 Years | April 2024The 7 Things I Know About Cyber Security After 25 Years | April 2024
The 7 Things I Know About Cyber Security After 25 Years | April 2024
 
Why Teams call analytics are critical to your entire business
Why Teams call analytics are critical to your entire businessWhy Teams call analytics are critical to your entire business
Why Teams call analytics are critical to your entire business
 
Workshop - Best of Both Worlds_ Combine KG and Vector search for enhanced R...
Workshop - Best of Both Worlds_ Combine  KG and Vector search for  enhanced R...Workshop - Best of Both Worlds_ Combine  KG and Vector search for  enhanced R...
Workshop - Best of Both Worlds_ Combine KG and Vector search for enhanced R...
 
Cloud Frontiers: A Deep Dive into Serverless Spatial Data and FME
Cloud Frontiers:  A Deep Dive into Serverless Spatial Data and FMECloud Frontiers:  A Deep Dive into Serverless Spatial Data and FME
Cloud Frontiers: A Deep Dive into Serverless Spatial Data and FME
 
Data Cloud, More than a CDP by Matt Robison
Data Cloud, More than a CDP by Matt RobisonData Cloud, More than a CDP by Matt Robison
Data Cloud, More than a CDP by Matt Robison
 
2024: Domino Containers - The Next Step. News from the Domino Container commu...
2024: Domino Containers - The Next Step. News from the Domino Container commu...2024: Domino Containers - The Next Step. News from the Domino Container commu...
2024: Domino Containers - The Next Step. News from the Domino Container commu...
 
Top 5 Benefits OF Using Muvi Live Paywall For Live Streams
Top 5 Benefits OF Using Muvi Live Paywall For Live StreamsTop 5 Benefits OF Using Muvi Live Paywall For Live Streams
Top 5 Benefits OF Using Muvi Live Paywall For Live Streams
 
🐬 The future of MySQL is Postgres 🐘
🐬  The future of MySQL is Postgres   🐘🐬  The future of MySQL is Postgres   🐘
🐬 The future of MySQL is Postgres 🐘
 
Polkadot JAM Slides - Token2049 - By Dr. Gavin Wood
Polkadot JAM Slides - Token2049 - By Dr. Gavin WoodPolkadot JAM Slides - Token2049 - By Dr. Gavin Wood
Polkadot JAM Slides - Token2049 - By Dr. Gavin Wood
 
Apidays New York 2024 - Scaling API-first by Ian Reasor and Radu Cotescu, Adobe
Apidays New York 2024 - Scaling API-first by Ian Reasor and Radu Cotescu, AdobeApidays New York 2024 - Scaling API-first by Ian Reasor and Radu Cotescu, Adobe
Apidays New York 2024 - Scaling API-first by Ian Reasor and Radu Cotescu, Adobe
 
Boost PC performance: How more available memory can improve productivity
Boost PC performance: How more available memory can improve productivityBoost PC performance: How more available memory can improve productivity
Boost PC performance: How more available memory can improve productivity
 
Partners Life - Insurer Innovation Award 2024
Partners Life - Insurer Innovation Award 2024Partners Life - Insurer Innovation Award 2024
Partners Life - Insurer Innovation Award 2024
 
Tata AIG General Insurance Company - Insurer Innovation Award 2024
Tata AIG General Insurance Company - Insurer Innovation Award 2024Tata AIG General Insurance Company - Insurer Innovation Award 2024
Tata AIG General Insurance Company - Insurer Innovation Award 2024
 
Deploy with confidence: VMware Cloud Foundation 5.1 on next gen Dell PowerEdg...
Deploy with confidence: VMware Cloud Foundation 5.1 on next gen Dell PowerEdg...Deploy with confidence: VMware Cloud Foundation 5.1 on next gen Dell PowerEdg...
Deploy with confidence: VMware Cloud Foundation 5.1 on next gen Dell PowerEdg...
 
Connector Corner: Accelerate revenue generation using UiPath API-centric busi...
Connector Corner: Accelerate revenue generation using UiPath API-centric busi...Connector Corner: Accelerate revenue generation using UiPath API-centric busi...
Connector Corner: Accelerate revenue generation using UiPath API-centric busi...
 
Repurposing LNG terminals for Hydrogen Ammonia: Feasibility and Cost Saving
Repurposing LNG terminals for Hydrogen Ammonia: Feasibility and Cost SavingRepurposing LNG terminals for Hydrogen Ammonia: Feasibility and Cost Saving
Repurposing LNG terminals for Hydrogen Ammonia: Feasibility and Cost Saving
 

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.