Sunday, August 25, 2019

Write HTML Using Notepad, Notepad++ and TextEdit

How to write HTML codes using notepad, notepad++ and TextEdit

Web pages can be created and modified by using professional HTML editors however, for learning HTML I recommend a simple text editor like Notepad or Notepad++(PC) or TextEdit (Mac). When you understand the concept, you can proceed to use other editors like VS code, Atom, etc.
Using a simple text editor is a good way to learn fast without spending time trying to acquaint yourself with the less easy -to -use  code editors.
To begin writing html code, just follow the four steps below to create your first web page with Notepad for Windows OS, notepad++ or TextEdit for Mac OS.

Step 1:
For Windows OS

If you are using Windows 8 or later:
Open the Start Screen (the window symbol at the bottom left on your screen).
Type Notepad.
Click and open either notepad or notepad++ depending on what you are working with. If you already have a notepad++ installed with a shortcut link on your desktop, then simply double click to open it instead of going through the preceding procedures.
if you are using Windows 7 or earlier:
Open Start > Programs > Accessories > Notepad
You can follow same as in procedure iii of Windows 8.
For Mac OS
Open TextEdit
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 "Ignore rich text commands in HTML files".
Then open a new document to place the code.

Step 2: Write Some HTML


You can proceed to Write or copy some HTML into your text editor which you just opened
<!DOCTYPE html>
<html>
  <head>
   <title>Learning HTML</title>
  </head>
  <body>
       <h1>My First Heading</h1>
<p>My first paragraph.</p>
   </body>
</html>

Step 3: Save the HTML Page


Make sure you create a separate folder where you will be saving all you works and give it appropriate name, let's call it "projects". The folder could be on your desktop or inside your document folder but be sure to save all your files in there if not you will have problems later as you progress in the learning process.
To Save the file on your computer, Select File > Save as in the Notepad menu.
Choose the destination folder which you had created earlier (projects)
Name the file "index.html" and set the encoding to UTF-8 (which is the preferred encoding for HTML files) but if you are using Notpad++, under filename just type "index" and under file type, select "HTML".
Note: I prefer you use notepad++ because it gives color to your codes once it's saved unlike notepad which doesn't do that.
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

To view the web page you just created
Navigate to the folder "projects"
Open the folder and you will see a file names "index" (if you follow the steps accordingly, this should be the only file in this folder)
If the file was saved with the appropriate suffix (.html or .htm) you will see the logo of your default browser shown.
Open the saved HTML file in your favorite browser (double click on the file, or right-click - and choose "Open with").
That is the simple way of writing and launching HTML codes, I believe this guide is of help to you as you continue in the journey of coding.
If you have need for further clarification or observation, commendation, etc you can leave a comment at the comments box and share with those it could help as well.

keep yourself updated by visiting https://pjadoga.blogspot.com or sign up to receive updates directly in your mail box.

0 comments:

Post a Comment

Please leave your comment here

Featured

How to Initiate Search Engine Optimization (SEO) With Blogger/Blogspot

Search Engine Optimization (SEO) With Blogger/Blogspot In my previous post, I explain how you can help someone find your site on search en...

Contact Us now

Name

Email *

Message *