How to Create a Simple
Webpage Using
Notepad
HTML Activity
Do you want to learn web design?
You don't need fancy
editing software to get
started creating a web
pages.
You can create web
pages using Notepad,
which comes pre-
installed on your
Windows computer.
The language used to
create web pages is
called "HTML," which
stands for Hypertext
Markup Language.
You can write HTML
using Notepad or any
other text editing
program.
Then all you need to do is
save the file as an HTML
document. HTML is easy
to learn, even if you have
no programming skills.
Things
You
Should
Know
• HTML is the primary language
used in web design.
• You can easily write HTML using
Notepad or any other text editing
program.
• Don't forget to save the file as an
HTML (.html) document.
Part 1 Creating a Document
• Open Start
Windows Start.
Click the
Windows logo in
the bottom-left
corner of the
screen. The Start
menu will pop up.
• Search for Notepad. Type in notepad to
do so. You should see a list of matching
results appear near the top of the Start
menu.
• Click File. This is in the top-left corner of
the Notepad window. Clicking it prompts a
drop-down menu
• Click the "Save as type" drop-down box. This option is near the
bottom of the window and should have "Text documents (*.txt)"
written on it. Clicking it prompts a drop-down menu to appear.
•Click All Files. It's in
the drop-down
menu. This will
allow you to save
your file as an HTML
document.
• Select a save location. Click the name of the folder in which you
want to save your document on the left side of the window.
• For example, to save your document on the desktop, you would
scroll up and click Desktop in the left-hand sidebar.
• Enter a name and the "html"
file extension. Click the "File
name" text box. Then type in
whatever you want to name
your file, followed by .html,
which is the file extension for
an HTML document.
• For example, to name your
webpage's file "hello", you
would type in hello.html.
• Click Save. Doing so turns your
current Notepad document into
an HTML document. At this point,
you can proceed with setting up
your web page's initial structure.
• If Notepad inadvertently closes or
you must return to your
document later, you can right-
click the HTML file and click Edit
in the resulting drop-down menu.
Part 2
Adding Structural Code
• Add your webpage's language tag. The first tag you'll need to add is the
language tag. This tells the web browser that this is an HTML document
and that the language being used is HTML. Type the following into
Notepad at the top of the page.
• Add the "head" tags. The "head" section of an HTML document contains the metadata for the web page.
This information is not displayed in your web browser. It can contain information such as the page title,
style sheets (CSS), scripts, and more. For now, just type <head> below the "<html>" tag, press Enter twice
to leave a space. Then type in </head>.
• Each HTML element has an opening and closing tag. When we add a new element, such as the
"<head>" tag to open the head, we need to add a closing tag as well. For the head, this is the "</head>"
tag.
• Add page title to your website. The title goes within the "head" section of your HTML document, so you
will need to enter this in between the opening "<head>" tag, and closing "</head>" tag. To add a title, type
the opening title tag, which is <title>". Then type your title text. Add the closing title tag immediately after,
which is </title>. For example, if you wanted to title your web page, "My Website,“.
• Add the "body" tags. Everything displayed in your web browser will go in
the "body" section of your HTML document. The opening and closing body
tags go below the closing "</head>" tag. Add the opening and closing body
tags, as shown.
•Close the HTML tag.
The last tag to go in
your document will
be a closing HTML tag
to signify the end of
the page. Type
</html> at the
bottom of the page
below the closing
"</body>" tag.
• Review your
HTML document
so far. At this
point, your
document should
look something
like the following:
Part 3
Testing Your Page
• Save your document. To
do so, click File in the
menu bar at the top,
followed by Save. This
will ensure that the
HTML document shows
the most recent version
of your web page when
you open it.
• Right-click your HTML
document. Navigate
to where you saved
your HTML document,
and right-click it. A
drop-down menu will
appear.
•Select Open with. It's
in the drop-down
menu. Doing so opens
a pop-out menu with
a list of apps you can
open the file with.
Review
•Review your webpage. If the formatting
looks good to you, you can go ahead and
close Notepad.
Return
•If you want to keep editing your HTML
document, return to Notepad and make the
necessary edits, making sure to save your
changes often.
Adjust
•You can adjust the webpage's background
color, set a background image, or change
the font color by using CSS in conjunction
with your HTML document.
Thank you

How to Create a Simple Webpage Using Notepad.pptx

  • 1.
    How to Createa Simple Webpage Using Notepad HTML Activity
  • 2.
    Do you wantto learn web design? You don't need fancy editing software to get started creating a web pages. You can create web pages using Notepad, which comes pre- installed on your Windows computer. The language used to create web pages is called "HTML," which stands for Hypertext Markup Language. You can write HTML using Notepad or any other text editing program. Then all you need to do is save the file as an HTML document. HTML is easy to learn, even if you have no programming skills.
  • 3.
    Things You Should Know • HTML isthe primary language used in web design. • You can easily write HTML using Notepad or any other text editing program. • Don't forget to save the file as an HTML (.html) document.
  • 4.
    Part 1 Creatinga Document
  • 5.
    • Open Start WindowsStart. Click the Windows logo in the bottom-left corner of the screen. The Start menu will pop up.
  • 6.
    • Search forNotepad. Type in notepad to do so. You should see a list of matching results appear near the top of the Start menu.
  • 7.
    • Click File.This is in the top-left corner of the Notepad window. Clicking it prompts a drop-down menu
  • 8.
    • Click the"Save as type" drop-down box. This option is near the bottom of the window and should have "Text documents (*.txt)" written on it. Clicking it prompts a drop-down menu to appear.
  • 9.
    •Click All Files.It's in the drop-down menu. This will allow you to save your file as an HTML document.
  • 10.
    • Select asave location. Click the name of the folder in which you want to save your document on the left side of the window. • For example, to save your document on the desktop, you would scroll up and click Desktop in the left-hand sidebar.
  • 11.
    • Enter aname and the "html" file extension. Click the "File name" text box. Then type in whatever you want to name your file, followed by .html, which is the file extension for an HTML document. • For example, to name your webpage's file "hello", you would type in hello.html.
  • 12.
    • Click Save.Doing so turns your current Notepad document into an HTML document. At this point, you can proceed with setting up your web page's initial structure. • If Notepad inadvertently closes or you must return to your document later, you can right- click the HTML file and click Edit in the resulting drop-down menu.
  • 13.
  • 14.
    • Add yourwebpage's language tag. The first tag you'll need to add is the language tag. This tells the web browser that this is an HTML document and that the language being used is HTML. Type the following into Notepad at the top of the page.
  • 15.
    • Add the"head" tags. The "head" section of an HTML document contains the metadata for the web page. This information is not displayed in your web browser. It can contain information such as the page title, style sheets (CSS), scripts, and more. For now, just type <head> below the "<html>" tag, press Enter twice to leave a space. Then type in </head>. • Each HTML element has an opening and closing tag. When we add a new element, such as the "<head>" tag to open the head, we need to add a closing tag as well. For the head, this is the "</head>" tag.
  • 16.
    • Add pagetitle to your website. The title goes within the "head" section of your HTML document, so you will need to enter this in between the opening "<head>" tag, and closing "</head>" tag. To add a title, type the opening title tag, which is <title>". Then type your title text. Add the closing title tag immediately after, which is </title>. For example, if you wanted to title your web page, "My Website,“.
  • 17.
    • Add the"body" tags. Everything displayed in your web browser will go in the "body" section of your HTML document. The opening and closing body tags go below the closing "</head>" tag. Add the opening and closing body tags, as shown.
  • 18.
    •Close the HTMLtag. The last tag to go in your document will be a closing HTML tag to signify the end of the page. Type </html> at the bottom of the page below the closing "</body>" tag.
  • 19.
    • Review your HTMLdocument so far. At this point, your document should look something like the following:
  • 20.
  • 21.
    • Save yourdocument. To do so, click File in the menu bar at the top, followed by Save. This will ensure that the HTML document shows the most recent version of your web page when you open it.
  • 22.
    • Right-click yourHTML document. Navigate to where you saved your HTML document, and right-click it. A drop-down menu will appear.
  • 23.
    •Select Open with.It's in the drop-down menu. Doing so opens a pop-out menu with a list of apps you can open the file with.
  • 24.
    Review •Review your webpage.If the formatting looks good to you, you can go ahead and close Notepad. Return •If you want to keep editing your HTML document, return to Notepad and make the necessary edits, making sure to save your changes often. Adjust •You can adjust the webpage's background color, set a background image, or change the font color by using CSS in conjunction with your HTML document.
  • 25.