skip to content
.
logo picture logo text
Sub-Menu for Web Design and Creation:

HTML Introduction

Return to Practice Menu  Return to Website "A" Tutorial

Before you begin:

If you use Windows, you will need to change some settings so that file extensions will show. Also, you'll need a plain text editor. You can use Notepad (comes free with Windows) or TextEdit (comes free with Macs) However, there are a few adjustments that need to be made. The "Necessary Settings" page explains what needs to be done and also contains a list of alternate plain text editors you might want to download and use.

Creating your HTML file

  • Now open a file in Notepad or Textedit (or other plain text editor).  Save it as an html file - name it whatever you want (no spaces, all lowercase), but save it with the extension .html (period html) at the end instead of .txt.  Example: mywebpage.html
  • You can use your browser to check your progress as you work. 
    • Open your browser:
      • Go to ----> File ---> Open file --->and then browse to find your file on your hard drive and open it.
      • Note: You won't see anything on the page until you put something into the body section.

Basic Page:

A web page needs some tags to tell the browser it is about to read an html page and when the page is finished. It also needs to specify the two main sections of the html page. The following is an explanation of those tags.

<html>This identifies the page as an html page.

<head> This is the first section of an HTML page. 

</head> Closes the head section

<body> This is the second section of the HTML page

</body> This closes the body section

</html> This is the ending tag for the whole html and comes at the end of everything.

Notice each tag has a beginning tag < > and an ending tag </ >.

<html></html>      <head></head>     <body></body>


First Code:

Type in the basic code. To make it easier, write it in a list as shown. (Hint: You could copy and paste)

<html>
<head>
</head>
<body>
</body>
</html>

Head Section

Title:

The title tag goes in the head section. Type in the title you want for your web page after the title tag <title> This is what shows up at the very very top of a browser window when someone is viewing your page. It is not what shows at the top of your web page. We use "headings" for that and we'll discuss those later:

<html>
<head>
<title>web page
</title>
</head>
<body>
</body>
</html>

More can go in the head section. If you use css, this is where you would put the code. Some scripts that you find will tell you to put certain parts of the script in the head section of your document and other parts in the body section. There's other things that go here you can learn about later. What you put in the head section does not appear as writing on the web page, but it can control what the writing looks like and where it appears. The head section is like the brain or control center.

If you were to use your browser to try to check you progress, your page would be blank. You haven't yet put anything in the <body> section of the page.

The Body Section:

This is the place for your text, images and such. It's like the box on Eons where you write your posts or PM's - only much better!

Putting in Text:  

Text goes in the body section between the body tags:  <body></body>

<html>
<head>
<title>web page
</title>
</head>
<body>The body section is the place where all of the text, images, links, etc. go. Usually you will want a title at the top of your page. This can be the same words as what you put between the title tags or it can be different. You can write whatever you want here, but it will be in one unstyled block until you put in tags for paragraphs, etc.  It will look something like the example below.
</body>
</html>

Open your plain text editor. Copy and past the code from the green box into a file. Go to "file" --> "save" and save the file as a plain text file. Name it "practice" or whatever. Then open the .txt file with your browser.

You should see all the text you just added all in one block, similar to this:

The body section is the place where all of the text, images, links, etc. go. Usually you will want a heading at the top of your page. This can be the same words as what you put between the title tags or it can be different. You can write whatever you want here, but it will be in one unstyled block until you put in tags for paragraphs, etc.  It will look something like the example below.

Headings and Paragraphs

Headings come in sizes: 1-6 with 1 being the largest.  <h1><h2><h3><h4><h5><h6> Generally, the  <h1> heading is used at the top of the web page to give the page a "title" that folks can see. Sort of like those essays we were priviledged to write for high school English classes.

Use <p> at the beginning of the text you want in a paragraph and use the </p> at the end of the paragraph

Here is an example of heading and paragraph tags being used to separate text into "containers"
<html>
<head>
<title>web page
</title>
</head>
<body>
<h1>My Life</h1>
<p>This is the story of my life. </p>
<h3>Year 0 through Year 2</h3>
<p>My main activities were eating, sleeping, and making my displeasure known.</p><p> I didn't do much writing during this particular phase of my life. It's not that there wasn't anything interesting going on. It was just that my mind seemed to be blank most of the time. Writer's Block, I think they call it</p><p>However, things began to improve towards the end of this phase when I discovered crayolas.</p><h3>Year 3 through Year 4</h3>
</body>
</html>

Copy the code from the green box. Replace what you have in the .txt file (or make a new .txt file). Save it. Open it with your browser. You should see something similar to this. 


My Life

This is the story of my life.

Year 0 through Year 2

My main activities were eating, sleeping, and making my displeasure known.

I didn't do much writing during this particular phase of my life. It's not that there wasn't anything interesting going on. It was just that my mind seemed to be blank most of the time. Writer's Block, I think they call it

However, things began to improve towards the end of this phase when I discovered crayolas.

Year 3 through Year 4


Congratulations! You've made a very simple webpage.

Of course, you don't want to stop here. You'll want to learn more about what you can do. The next section has some choices. Explore, play and have fun!

Options:

You have some different choices and different directions you could take. If one choice doesn't seem to be what you want, you can choose another.  You could:

  • Join a social network that allows HTML in posts and/or PM's so you can play with code. Alas, my favorite site disappeared in May of 2012.
  • Choose some of the other tutorials or practice exercises on this site such as :
    • Website "A" Tutorial: Step-by-step guide to hand code a very simple website with an external CSS file.
    • Pomodoro Template Exercise - Using different images without making changes to the code in the external css file.
    • Connection Template Exercise - Making a few changes in the css file to change color and change the image used for the background logo.
  • You could go to some other tutorials on the web, such as w3schools, Tizag Tutorials or the HTML Source and further explore writing HTML pages from scratch or just learn more about HTML. They have TONS of information.
  • You could check out The HTML5 Beginner's Guide at Website Set up. Most main browsers will now generally render HTML5 correctly, except for Internet Explorer, of course. The Mighty Digital site has links to "compatibility charts for web and mobile developers" which might help you decide whether to jump into HTML5 with both feet or to pick and choose what you wish to use
  • You could download an HTML editor such as Kompozer (Versions for Mac, Windows or Linux) or HTMLkit  (Windows only) to do some of the work for you. You can continue to use the HTML coding tutorial sites as a learning tool as you work with the editor.

Return to Practice Menu-->