HTML - Lesson 1 - Basic structure and placing text on a webpage.

Learn HTML - Basic Page Structure & Adding Text to the Page

Open Notepad. If you are using a Windows computer it's already on your computer since it is part of Windows. Click Start, All Programs, Accessories, Notepad. Copy the pink text below and paste it into Notepad.

In case you need a refresher on that, click the following link: How to Copy, Cut and Paste

From Notepad's Menubar, choose File, Save As then enter this in the File Name box: c:\lesson1.html
that should save the file on your C: drive with the name lesson1.html

Next, click this link: c:\lesson1.html or this link file:///c:/lesson1.html
which should open the file and display it as a webpage in the default browser on your computer.

(Your computer already knows to use your default web browser to open and display files which end with .htm or .html it will open the file in your default web browser for you)

Now, scroll down below the pink text to continue the lesson.

<html>

Hello World!

html stands for hypertext markup language.

html is the language of the Web.

You don't need to know all of it. So just start with the basic stuff to get a webpage
together.

Webpages contain text and images. Text, for the most part. For most pages text is the
most important part.

The text is marked up by using tags to identify portions which are to be interpreted by
the browser according to the particular tag that is used. One would be to make some text
stand out by making it bold.

Tags are usually paired but not always. The ending tag has a slash added. Don't forget to
add the ending tag or things will look funny.

Tags are not case-sensitive, they can be upper-case or lower-case.

</html>

Lesson Instructions continues here:

But the browser has run all the text together! Why did that happen? Here is how it looks:

Hello World! html stands for hypertext markup language. html is the language of the Web. You don't need to know all of it. So just start with the basic stuff to get a webpage together. Webpages contain text and images. Text, for the most part and for most pages text is the most important part. The text is marked up by using tags to identify portions which are to be interpreted by the browser according to the particular tag that is used. One would be to make some text stand out by making it bold. Tags are usually paired but not always. The ending tag has a slash added. Don't forget to add the ending tag or things will look funny. Tags are not case-sensitive, they can be upper-case or lower-case.

Why is all the text running together?
The browser ignores white space in an html file. A blank line added in the html code does NOT produce a blank line in the webpage. To get line spacing in your text, you have to markup the text with tags.
The above text is repeated below, after adding some html tags to get spacing and organization.

The BOLD tag emphasizes whatever text it encloses.

Is the BREAK tag which is a single, unpaired tag.

It doesn"t need to enclose anything because it just tells the browser to go to a new line before displaying the next part of the file.

The P tags are the PARAGRAPH tags.

They will cause an extra BLANK line before and after whatever they enclose.

<hr> HR, the horizontal rule tag, is another unpaired tag.

It just inserts a horizontal rule or line. This is useful to break the page into sections or areas.

Next lesson instructions:

Clear the old text out of Notepad

Now get Notepad ready for the next file by clearing out the text that you entered the first time.

On the Notepad Menubar, choose Edit, Select All, (all text should be highlighted) then Edit, Delete.

I have added the tags that you just learned about to the original text, so, NOW copy the pink text below into Notepad and do File, Save As, filename: c:\lesson1.html
Click this link to open the new file in your browser: c:\lesson1.html this might cause another copy of your browser to open. If the first browser window is still open, it will be displaying the old file. So you have to get the updated copy of the file.

Make the browser get a new copy of the file.

To cause your browser to get the latest copy of a file, ( if your browser is still open), you can press the F5 function key or View, Refresh or click the circular arrow icon in Internet Explorer.

In Firefox, View, Reload or CTRL + R or click the circular arrow icon.

This causes the browser to get another copy of the file which will be the one that you just saved.

Hello World!

html stands for hypertext markup language. 
html is the language of the Web.

You don't need to know all of the html tags. So let's just start with the

basic stuff to get a webpage together quickly . 
Webpages contain text and images. Text, for the most part and for most pages text

is the most important part. 
The text is marked up by using tags to identify portions which are to be

interpreted by the browser according to the particular tag that is used. One would be to

make some text stand out by making it bold. 
Tags are usually paired but not always.
The ending tag has a slash added.
Don't forget to add the ending tag or things will look funny. 
Tags are not case-sensitive, they can be upper-case or lower-case.

Your browser should now look like this:

Hello World!

html stands for hypertext markup language.
html is the language of the Web.

You don't need to know all of the html tags. So let's just start with the basic stuff to get a webpage together quickly .

Webpages contain text and images. Text, for the most part and for most pages text is the most important part.

The text is marked up by using tags to identify portions which are to be interpreted by the browser according to the particular tag that is used. One would be to make some text stand out by making it bold.

Tags are usually paired but not always.

The ending tag has a slash added.

Don't forget to add the ending tag or things will look funny.

Tags are not case-sensitive, they can be upper-case or lower-case.

=====End display of markedup text.=====

What we have learned from Lesson 1?

Line Spacing in the html file does NOT create the same spacing in the display of the file by the browser.

html tags have to be added to the text to make spacing where we want it.

We can use the bold, break, paragraph and hr tags for spacing, emphasis and layout.

Notepad was created for writing plain text files, NOT webpages. So, why is a beginner so often told to use Notepad to write a webpage? Because it is a program that is already on all Windows computers and it produces text files without extraneous formatting that could confuse the browser.

To get the html files to our webserver here are a couple of ways that are free to use and relatively easy to do. Check out the short videos.

Good News!
NVu is a free, readily available by downloading over the internet, html editor that will make html markup much easier and in many cases automatic.
Click Here to Get NVu, NOW for Windows, get this file: nvu-1.0-win32-installer-full.exe

Here's a video showing how easy NVu is to use. Click Here to See NVu in Use

Another way to upload html files to your webserver - just Drag and Drop on your computer.
Click Here for Video - Use Internet Explorer

Want to try Firefox as your browser.

Next Lesson: Adding images to the page. (like this)