SlideShare a Scribd company logo
3
Most read
4
Most read
5
Most read
Creating
HTML using
Notepad
ROBERT S. PUGAYAN JR.
Learn HTML Using Notepad or TextEdit
Web pages can be created and modified by using professional HTML editors.
However, for learning HTML we recommend a simple text editor like Notepad (PC) or
TextEdit (Mac).
We believe that using a simple text editor is a good way to learn HTML.
Step 1: Open
Notedpad(PC)/Textedit(Mac)
Windows 8 or later:
Open the Start Screen (the window symbol at the bottom left on your screen). Type Notepad.
Windows 7 or earlier:
Open Start > Programs > Accessories > Notepad
Open Finder > Applications > TextEdit
Also change some preferences to get the application to save files correctly. In Preferences > Format
> choose "Plain Text"
Then under "Open and Save", check the box that says "Display HTML files as HTML code instead of
formatted text".
Then open a new document to place the code.
Step 2: Write some html.
Write or copy the following HTML code into Notepad:
<!DOCTYPE html>
<html>
<body>
<h1>My First Heading</h1>
<p>My first paragraph.</p>
</body>
</html>
Step 3: Save the HTML.
Save the file on your computer. Select File > Save as in the Notepad
menu.
Name the file "index.html" and set the encoding to UTF-8 (which is
the preferred encoding for HTML files).
Tip: You can use either .htm or .html as file extension. There is no difference; it is up to you.
Step 4:View the HTML Page in Your Browser
Open the saved HTML file in
your favorite browser
(double click on the file, or
right-click - and choose
"Open with").
Give me an insight of what you
have learned.
Activity 01
List down the steps on how to create a
programming code using notepad.

More Related Content

PPTX
Html editors
PPTX
Hyper text markup language course details description
PDF
Html introduction
PPTX
How to Create a Simple Webpage Using Notepad.pptx
PPTX
HTML 5 Tutorial
PPTX
Introduction-to-HTML_introduction content for learning
PPTX
TLE_8/PowerpointPresentation/Project_8lo
PPTX
Lesson 2 - HTML Overview - History and Basic Syntax
Html editors
Hyper text markup language course details description
Html introduction
How to Create a Simple Webpage Using Notepad.pptx
HTML 5 Tutorial
Introduction-to-HTML_introduction content for learning
TLE_8/PowerpointPresentation/Project_8lo
Lesson 2 - HTML Overview - History and Basic Syntax

Similar to creating html using notepad-learning material (20)

PPT
Coding in HTML- Web development(Structure of Html)
PPTX
Html basic
PPTX
HTML for Education
PDF
Html Tutorial
PPTX
HTML5 Topic 1
PPT
Html introduction
PPTX
Introduction to HTML
PPT
HTML Intermediate
PDF
Introduction to html
PPTX
Basic Html for beginners.
PDF
Html beginner
PPTX
HTML (presentation)
DOCX
Web Designing.docx
PDF
EmpTech Lesson 8 - Basic Web Page Creation
DOCX
HTML (Hyper Text Markup Language) Project
PPTX
WEB TECHNOLOGY SLIDE 2 coe35mgfdggdh.pptx
ODP
How to Make HTML and CSS Files
PPTX
Hyper Text Marup Language
PDF
Html basics 1
PDF
Html basics
Coding in HTML- Web development(Structure of Html)
Html basic
HTML for Education
Html Tutorial
HTML5 Topic 1
Html introduction
Introduction to HTML
HTML Intermediate
Introduction to html
Basic Html for beginners.
Html beginner
HTML (presentation)
Web Designing.docx
EmpTech Lesson 8 - Basic Web Page Creation
HTML (Hyper Text Markup Language) Project
WEB TECHNOLOGY SLIDE 2 coe35mgfdggdh.pptx
How to Make HTML and CSS Files
Hyper Text Marup Language
Html basics 1
Html basics
Ad

More from Steins18 (18)

PPTX
morse code follow up activity for grade 10.pptx
PPTX
morse code follow up activity for grade 10.pptx
PPTX
morse code for grade 10 high schoollearners.pptx
PPTX
orthographic projection for engineering.pptx
PPTX
Shading lecture for learners in highschool.pptx
PPTX
Enum in a Switch Statement learning material.pptx
PPTX
PseudoCoding-enrichment activity for learners02.pptx
PPTX
PseudoCoding-enrichment activity for students.pptx
PPTX
powerpoint workstation intended for learners.pptx
PPTX
POWERPOINT learning materials for students.pptx
PPTX
computer programming: an introduction.pptx
PPTX
introduction program logic Formulation.pptx
PPTX
Visual BAsic Softwares intended for ICT students
PPTX
Cookie Attribute.pptx
PPTX
Defining method in JavaScript object.pptx
PPTX
Prototype Object.pptx
PPTX
HTML Attributes.pptx
PPTX
JavaScript number object.pptx
morse code follow up activity for grade 10.pptx
morse code follow up activity for grade 10.pptx
morse code for grade 10 high schoollearners.pptx
orthographic projection for engineering.pptx
Shading lecture for learners in highschool.pptx
Enum in a Switch Statement learning material.pptx
PseudoCoding-enrichment activity for learners02.pptx
PseudoCoding-enrichment activity for students.pptx
powerpoint workstation intended for learners.pptx
POWERPOINT learning materials for students.pptx
computer programming: an introduction.pptx
introduction program logic Formulation.pptx
Visual BAsic Softwares intended for ICT students
Cookie Attribute.pptx
Defining method in JavaScript object.pptx
Prototype Object.pptx
HTML Attributes.pptx
JavaScript number object.pptx
Ad

Recently uploaded (20)

PDF
Approach and Philosophy of On baking technology
PPTX
Digital-Transformation-Roadmap-for-Companies.pptx
PDF
1 - Historical Antecedents, Social Consideration.pdf
PPTX
Tartificialntelligence_presentation.pptx
PDF
Encapsulation theory and applications.pdf
PPTX
TLE Review Electricity (Electricity).pptx
PDF
MIND Revenue Release Quarter 2 2025 Press Release
PDF
project resource management chapter-09.pdf
PDF
Getting Started with Data Integration: FME Form 101
PDF
7 ChatGPT Prompts to Help You Define Your Ideal Customer Profile.pdf
PPTX
SOPHOS-XG Firewall Administrator PPT.pptx
PDF
Video forgery: An extensive analysis of inter-and intra-frame manipulation al...
PDF
Heart disease approach using modified random forest and particle swarm optimi...
PDF
WOOl fibre morphology and structure.pdf for textiles
PDF
Unlocking AI with Model Context Protocol (MCP)
PPTX
Programs and apps: productivity, graphics, security and other tools
PDF
DASA ADMISSION 2024_FirstRound_FirstRank_LastRank.pdf
PDF
Mushroom cultivation and it's methods.pdf
PDF
Building Integrated photovoltaic BIPV_UPV.pdf
PDF
gpt5_lecture_notes_comprehensive_20250812015547.pdf
Approach and Philosophy of On baking technology
Digital-Transformation-Roadmap-for-Companies.pptx
1 - Historical Antecedents, Social Consideration.pdf
Tartificialntelligence_presentation.pptx
Encapsulation theory and applications.pdf
TLE Review Electricity (Electricity).pptx
MIND Revenue Release Quarter 2 2025 Press Release
project resource management chapter-09.pdf
Getting Started with Data Integration: FME Form 101
7 ChatGPT Prompts to Help You Define Your Ideal Customer Profile.pdf
SOPHOS-XG Firewall Administrator PPT.pptx
Video forgery: An extensive analysis of inter-and intra-frame manipulation al...
Heart disease approach using modified random forest and particle swarm optimi...
WOOl fibre morphology and structure.pdf for textiles
Unlocking AI with Model Context Protocol (MCP)
Programs and apps: productivity, graphics, security and other tools
DASA ADMISSION 2024_FirstRound_FirstRank_LastRank.pdf
Mushroom cultivation and it's methods.pdf
Building Integrated photovoltaic BIPV_UPV.pdf
gpt5_lecture_notes_comprehensive_20250812015547.pdf

creating html using notepad-learning material

  • 2. Learn HTML Using Notepad or TextEdit Web pages can be created and modified by using professional HTML editors. However, for learning HTML we recommend a simple text editor like Notepad (PC) or TextEdit (Mac). We believe that using a simple text editor is a good way to learn HTML.
  • 3. Step 1: Open Notedpad(PC)/Textedit(Mac) Windows 8 or later: Open the Start Screen (the window symbol at the bottom left on your screen). Type Notepad. Windows 7 or earlier: Open Start > Programs > Accessories > Notepad Open Finder > Applications > TextEdit Also change some preferences to get the application to save files correctly. In Preferences > Format > choose "Plain Text" Then under "Open and Save", check the box that says "Display HTML files as HTML code instead of formatted text". Then open a new document to place the code.
  • 4. Step 2: Write some html. Write or copy the following HTML code into Notepad: <!DOCTYPE html> <html> <body> <h1>My First Heading</h1> <p>My first paragraph.</p> </body> </html>
  • 5. Step 3: Save the HTML. Save the file on your computer. Select File > Save as in the Notepad menu. Name the file "index.html" and set the encoding to UTF-8 (which is the preferred encoding for HTML files). Tip: You can use either .htm or .html as file extension. There is no difference; it is up to you.
  • 6. Step 4:View the HTML Page in Your Browser Open the saved HTML file in your favorite browser (double click on the file, or right-click - and choose "Open with").
  • 7. Give me an insight of what you have learned.
  • 8. Activity 01 List down the steps on how to create a programming code using notepad.