Results per page:

Match: any search words all search words

Page Contents - First Simple Web Page

Lesson Introduction  
Blank Page The HTML tags required for a blank page
Required HTML Elements  
Required HTML Tags <html>
  <head>
  <title>
  <body>
Adding some Text Exercise 1. My First Web Page
Saving your work

index.html
File names

View your page in a Web browser  
Line Breaks <br>
Paragraph <p>
Horizontal Line <hr>
Exercise 2. Line Break experimentation
Test Exercise 3. Page 1
Read panel Web Sites, Web pages, Links (Top right)
2. First Web Page An introduction into programming to create a simple web page:
Required Elements
HTML Tags - <html> <head> <title> <body>
Adding some Text - Exercise 1 My First Web Page
Line Breaks
- <br> <p> <hr>
Saving. Viewing in a browser. Editing

 

First Simple Web Page - Introduction

In this first HTML tutorial you will learn:

  1. The code for a blank HTML page
  2. How to add additional HTML tags to produce a very simple web page named:
    index.html
  3. The use of HTML elements and attributes.
  4. How this code consists of HTML tags and plain text
  5. How to save the HTML files to a folder named my-first-web-pages on your hard drive.
  6. How to view those pages in your browser.
  7. Tutorial 7 shows you 'How to link pages together', so that the viewer can easily view other pages.
  8. Tutorials 3 - 6 show you 'How to improve the look of your pages'

You will find out how producing you first web page is very gratifying.

John McGuinn

Code for a blank HTML page

When you start a new page a web editor will create several lines of Code, which you can think of as being required for a web page, as follows

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">

<html>

<head>
    <meta http-equiv="Content-Type" content="text/html; charset=ISO-8859-1">
    <title>Untitled Document</title>
</head>

<body>

</body>

</html>

!DOCTYPE Explanation

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">

  • This is the declaration to the Web browser about the type of document i.e. an HTML web page version 4.01
  • This declaration is used for the majority of standard web pages.
  • Some editors may produce 4 instead of 4.01, that's OK, but check if an update is available for the editor.
  • The latest declaration for still unofficial version HTML5 is much simpler
    <!DOCTYPE HTML>
  • As a Begginer you do not need to change this declaration

 

HTML Elements & HTML Element Tags

Tags

All web pages require the following code, in the form of HTML tags, which produces a blank web page.

<html>

     <head>
          <title></title>
     </head>


    <body>
    </body>
            
</html> 
  • Basically HTML tags are the programming code that states how your page is constructed
  • HTML tags are enclosed in a pair of less than and greater than brackets < > these brackets are known as the open delimiter and close delimiter respectively.
    • Although the Declaration is enclosed in < > brackets it is a Declaration & not a tag.
  • It is now recomended that tags are written in lower case letters and essencial for XHTML
  • Most HTML tags, but not all, require both a
    • start tag e.g. <body>
    • end tag, </body>
  • Note how the end tag, is the same as the start tag, with the inclusion of a / before the tag name.

  • There are a few tags that do not have a end tag,
    • <br> (Break, starts a new line)
    • <img> (Image tag)
  • Tags are not displayed by the browser.
  • Some tags are not supported by some browsers, some are supported differently, hence the different appearance of web pages in different browsers.
  • When writing your page you can indent lines to make the your code more readable.
    • The indentation is not required but does help to ensure that as you insert additional commands and text it is placed into the correct position.
    • It can help you find errors in the code.
    • Indentation is helpful with
      • tables and especially with nested tables
      • Div tags
    • Dreamweaver can automatically indent code
      • Setting Up use Edit > Preferences > Code Format > Enter a number 2 to 4 are usually ideal
      • To activate use Commands > Apply Source Formating
    • Indentation is not possible in KompoZer
  • Blank lines called white space can be introduced to make your code easier to understand. Compare these 2 examples

Example without white Space

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">
<html><head><meta http-equiv="Content-Type" content="text/html; charset=ISO-8859-1"><title>Untitled Document</title></head><body></body></html>

Example with white Space

<html>

     <head>
          <title></title>
     </head>


    <body>
   
	  </body>
            
</html>
    • Look how it is much easier to follow
    • Note how the opening & closing tags line up.
    • This "white space" is ignored by the browser.
    • It increases the size of a file, slightly lengthening download time.
    • It can always be trimmed later, before uploading to the web, either manually or automatically by some editors and HTML checker programs. Thus reducing the file size.
    • This spacing helps in tracing errors.
    • Introducing white space is not possible in KompoZer, think of changing to another editor.

Comments can also be placed within your code if required. Comments are ignored by the browser. <!--This is a a comment -->

Take particular note of how the tags are paired, end tags are in reverse order to start tags when nested

    <head>  <title></title>  </head> is correct.

    <head> <title> </head> </title> is wrong

The table below displays information about the tags.

End tag column, states if an end tag is required or not.

I strongly recommend that, where this is optional, you should place an end tag. Opt = Optional. Req. = Required. No = Don't use.

All tags in XHTML have to be closed.

Element Description / Comments End Tag
<html>

The HTML element is the container for the entire document. Ensure that <html> is the first command, and end tag if used the last one.

All other tags are nested between the <html> & </html>

Opt
<head> The HEAD element encloses the TITLE element as shown.
Other elements that can be contained in head are the BASE, ISINDEX, specialized LINK, META, SCRIPT, and STYLE elements
Opt
<title> This element describes the content of your page, appears in the browser title bar, and used by many search engines. Only 1 title allowed, must be within the HEAD element. Limit to 64 characters. Req.
<body>

The Visible content of your page & a vast array of Tags, many of them nested within other tags, go between the body tags

Opt

Exercise 1 My First Web Page

Adding some Text

In this HTML exercise you shortly will work through an exercise that will produce your first web page that you will save onto your hard drive, then view it with your web browser. Later in tutorial 9, when you have gained knowledge to produce a decent web page or site, you will learn how to upload a site onto the WWW

Seperating text vertically

The 3 simplests methods are

  • Line Breaks
  • Paragraphs
  • Horizontal Lines

Line break

Opening tag <br>   No closing Tag

The following content after a line break start on a new line, without a gap between the lines.

Ideal to place text a the line imediatly under an image

Paragraph tags

Opening tag <p>   Closing Tag </p>

Similar to the Line break in that the following content is place on a new line and a space is created between the lines.

Your content goes between the opening & closing tag. Your content may contain:

  • Nothing, actually it should contain a special space called a 'Non breaking space' this would taged as <p>&nbsp;</p>. This places a blank line into your page
  • A single letter, number, word or image
  • Several lines of text
  • Several lines of text & images
  • Several images

The Parsgraph element is very versatile and the most widely used element in webpages

The Paragraph Element is a Block-level element

 

Element Tag difference

In very simlple English

Tag

A tag is the bit inside the <>
E.G.

  • <p>
  • </p>

Element

AnE.G.

  • <p>
  • </p>

is the Opening tag + Contents + Closing tag (if it has one)

E.G.

  • <p>This is some content between an opening tag & a closing tag</p>

 

 

Step 1. Requirements:

At this stage in this HTML tutorial you only need to use Windows notepad, or the equivalent simple text edit or on a Mac as your HTML editor, and a browser such as Firefox. To refresh your memory on Web Browsers see Tutorial 1 - Web Browsers.

I believe that this is the best way to learn the code and layout of HTML.

If you have a more sophisticated HTML editor you can use this. These editors, depending on the editor, may have editing windows such as

  • Code view, this is a view similar to that produced by notepad, but enhanced, to make it easier to read the code. Achieved with
    • The text in various colours
    • Automatic code indentation
    • The use of bold or italic text.
    • The use of backround colours
  • WYSIWYG (What you see is what you get), this means that the appearance of the page in the editor looks similar to what a browser will produce.
  • Tag view. Similar to Code view but graphic icons are used for all the tags.

If you use one of these editors you can use the code page view, the same as using notepad. Or if you use one of the other views that will automatically create the code for you, always switch to the code view to see how changes effect the code produced.

In order to learn the code ensure that you look at the code produced.

It may be possible to have 2 windows on view at the same time.

Please note that automatic processes sometimes produces additional code that is not actually required.

Step 2. Preparation.

  1. Create a folder named my-first-web-pages, using Windows Explorer, or the equivalent on a Mac. Take a note of exactly where you save it I.e. its path. In windows you will probably have a folder in the C: > Users > Your Name > My Documents > My Web pages  Cteate your my-first-web-pages folder there.
  2. In order to carry out Step 4 below, you require at least 1 web browser installed on your computer. Firefox is recomended. To refresh your memory on Web Browsers see Tutorial 1 - Web Browsers.

 

Because the above code only produces a blank web page you will add

  • My First Web Page between the title tags
  • The words Hello World between the body tags, as below. Note that no additional tags are required.
<html>
     <head> 
             <title>My First Web Page</title>
     </head>
     <body>Hello World </body> 
</html>

Step 3. Enter the Code.

Depending on your preferred method of learning, you can copy (ctrl c) and paste (ctrl v) the above code into your HTML Editor or type it in. You will possibly remember better by typing it in, this is also better if your keyboard skills need improving.

Top.

Step 4. Saving your page

Save this file using the Save as... option as index.html to the folder my-first-web-pages you created in step one. After you have saved the file, close notepad.

 

 

Filenames

Special Filenames

index.html is a special filename it has a special meaning for Web browsers, in that it is one of pages that a browser will look for, even if the page is not typed into the browser. The page is automatically opened even if the filename is not included in the URL (web page address)

 

 

 

 

Example:

http://www.tutorials4u.com/html

will open the page

http://www.tutorials4u.com/html/index.html

A few hosts use index.htm as the default name for automatic opening. Check you hosts documentation.

There are more special filenames. These are unimportant at this stage but here is a list of them List of special file names

Important!

Filenames must never contain a space, this applies to ALL filenames including HTML filenames & Graphic filenames.

 

Top.

Step 5. View your page in a Web browser.

To do this open the file index.htm in the folder my-first-web-pages in your browser. You will find detailed instructions on how to do this with Microsoft Internet Explorer, the most popular web browser.

Note: Many of the purpose built HTML editors have a button that you can click that automatically performs this step.

 

  • Open up a browser such as Firefox or Microsoft Internet Explorer.
  • Click File on the menu bar of the browser.
  • Click on Open, The Open Dialog box shown left will appear.

Open Dialog

  • Click on the Browse button in the small popup window.

MS IE

  • Use the down icon to the right of the Look in: pane, to open up the list to select the drive where you saved your file.
  • In the large pane below it find and select the folder my-first-web-pages
  • Then select the file index.htm and double click on it. This will open up your web page in the browser.
  • Click OK Rearrange the 2 windows so you can view them both, you should be able to give them more room than the followingNotepad

Note the following:

  • In Notepad
    • The filename Index.html in the title bar
  • In the Browser
    • The title My First Web Page that was enclosed within the Title Tags
  • Hello World in the top left of the window. By default this should be black text on a white background

Step 6. Edit your code.

  • In note pad, click immediately after the end of the word World.
  • Press the Enter key twice.
  • Type in the word Again.
  • Your code should now look like this
<html>
     <head> 
             <title>My First Web Page</title>
     </head>
     <body>Hello World

Again </body> 
</html>
               

Question 1. When displayed in the browser, where do you think the word Again will appear on the page in relation to the words Hello World.

Go to Answer 1

Step 7. Save.

Because the file has already been saved, you can use the Save option, rather than the Save as... option.

Step 8. Refresh the browser.

Click the Refresh button in Internet explorer or the Reload button in Netscape and note the resultant changes.

This process of Amend the code, Save the Notepad file and refresh the browser is fast and almost gives you WYSIWYG results.

If the re-sizing has made the browser window too narrow the effect of word-wrap could place the text on more lines. Widen and narrow the size of the window to observe word-wrap.

You may be surprised that Hello World Again appears on 1 line. Remember what I said about "white space". If you wish to insert more that 1 space between words, or to force text onto a new line it must be coded into the HTML, you will learn how to do this in the next.

 

Top.

Line Breaks

You found out that placing blank lines within the text of your page does actually place a blank line into the browser's displayed page.

The table below shows 3 Elements that place some form of line break into your text.

Element Description / Comments End Tag Attributes
<br>

The Line Break element places the start of the following text or image onto the next line.

No clear
<p>

Prior to Ver 4, P started as a line break. Now P is a block level element, and defines a paragraph. Inserts a blank line after the paragraph. This cell contains 3 <p>s

If omitted the element ends at the next start block level element start tag.

No other block level element may be nested inside a P element.

Opt align
<hr> The Horizontal rule element. Inserts an horizontal rule (line). E.G.
The colouring, size and position of the horizontal rule can be altered using the attributes, when using recent browsers. The default line being a shaded engraved line.
No

align, color, noshade, size, width

 

Top.

Exercise 2. Line Break experimentation.

Step 1. Edit the previous code to the following.

<html>
     <head> 
             <title>My First Web Page</title>
     </head>
     <body>
     This is a<br>line break<br><p>This is a paragraph</p><p>Followed by 
Paragraph 2. Note how the spacing is different from the line break</p>
<p> example. And finally an horizontal line</p> <hr> </body> 





</html>
                    

Note

  • How several different tags have been placed on one of the lines.
    • Although this is allowed, it can make the code harder to read on very long lines.
  • How I have left a few lines of white space after line I have been working on.
    • This makes finding the current work area easier to find. For a short file like this it is not required, but in a large file it is a useful tip. Does not work in the KompoZer editor

     

Step 2. Save as Page01.htm
Save this code as Page01.htm in the my-first-web-pages folder.

Step 3. View the result in your browser, because you are using a new name you will have to open the file, rather than use the refresh button. Note the results of the 3 line breaks you have used.

Remove the closing P tag I.E. </p>, save and refresh the browser. Note how you loose a blank line.

Top.

Web Sites

Web sites consist of one or more Web pages.

Web Pages

Pages contain the text and graphics and HTML code & CSS rules that lets the browser know how to display the page.

Pages usually contain links that allows the user to easily move or navigate around the page, site or go to a different site.

You will learn how to code navigational links in tutorial 07 linking.

 

Test

Question 2. Place the following tags into the correct order to produce a blank web page
</html> <body> <head></title> <html> <title> </head> </body>

Question 3. What is the special file name that will open automatically by a browser.

Question 4. Which opening and end tag combination is used to place a blank line after some text.

Question 5. Which tag places text onto the next line. There is no end-tag,.

Question 6. Which tag draws a line across the screen. Is there a end-tag,.

Check your answers.

Reread sections of this tutorial if you obtained any wrong answers.

To conclude this test you are about to do your own page. Attempt to do as much as possible from memory, only refer to this tutorial if required.

Exercise 3. Page 1.

 

The entry into a web site is usually into an introduction to site page with a full site menu or main sections menu. The filename of this page is index.html

The index.html of say a families personal web site may have menu entries such as About me. The family. Our pets. My hobbies. Clicking on one of these links directs the user to the corresponding subject page further into the site.

What you will be doing next is to write about 3 or 4 paragraphs, on some subject of your own choice. This will eventually become a page on your website. But not an Entry page. In the following tutorials you will be continuously adding to and amending this page and the Index.html page you have already saved.

  • Start a new blank page.
  • Attempt to write the required code, from memory. See how much you can remember, before looking up the references above.
  • Enter a suitable heading before your text,and a couple of sub headings at suitable places within the text.
    • These should all be entered on separate lines using the <p> and </p> tags.
    • You will learn how to make these stand out from the general text of your page in tutorial 3. Page Appearance
  • Attempt to use the 3 methods of inserting line breaks from memory. Besides 3 or 4 paragraphs you should have a couple of line breaks, and at least 1 line.
  • Save the page as page01.htm If you wish to use a name of your own choice then do so, but you must use the name you have picked in place of page01.htm henceforth.
  • View the page in a browser, correct any errors if required.
  • Make the layout neater.
  • Check the result in different browsers if you have them.

Top.

Answers

Answer 1.
The result is displayed on one line,
Hello World Again.
You will learn that you can not enter more than 1 space between words by typing in additional spaces or line feeds. Additional code is used to state that it must be displayed on a separate line.
You will learn how to do this next.

Return to Question 1.

Answer 2.
The correct order is
<html> <head> <title></title> </head> <body> </body> </html>

Answer 3.
There are several of these special filename. The one that you have been introduced to in this lesson is Index.html
Although index.html is normally used used some host servers prefer index.htm. This will be pointed out in there documentation.
At this stage of the course you do not need to know about the other special file names.

More experienced students can find the file names listed at appendix.htm

Answer 4.
<p>
</p>

Answer 5.
<br>

NO end tag,

Answer 6.
<hr>
NO end tag,

Continue with Test