Results per page:

Match: any search words all search words

Page Contents - First Simple Web Page

First Simple Web Page - Introduction What you will learn from this page
Step 1. Create a Folder Required location "To save your web page"
Step 1. Essencial Code for an HTML page

Example code for:
HTML 4.01 & HTML5

Videos & instructions for Blue Griffon Web Editor
Videos & instructions for Dreamweaver Web Editor
Videos & instructions for KompoZer Web Editor
Videos & instructions for Notebook Text Editor

Code Explanations  

HTML tags
HTML Elements
!DOCTYPE Declaration Explanation

HTML5 DOCTYPE

HTML 4.01 DOCTYPE

<head> Tag Explanation
<meta> Tag Explanation
<html> Tag Explanation
<body> Tag Explanation
<br> Line break Explanation
<p> Paragraph tag Explanation

 

 

   
   
   
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. How to create a folder on your computer to hold your web pages and graphic files
  2. Learn make a simple web page in HTML using HTML tags
  3. The code for a simple HTML page
  4. How to add additional HTML tags to produce a very simple web page named:
    index.html
  5. The use of HTML elements and attributes.
  6. How this code consists of HTML tags and plain text
  7. How to save the HTML files to a folder named my-first-web-pages on your hard drive.
  8. How to validate your file to ensure that it correct HTML
  9. How to view those pages in your browser.
  10. Tutorial 7 shows you 'How to link pages together', so that the viewer can easily view other pages.
  11. 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

  1. Produce a simple web page using HTML tags
  2. The code for a simple HTML page
  3. How to add additional HTML tags to produce a very simple web page named:
    index.html
  4. The use of HTML elements and attributes.
  5. How this code consists of HTML tags and plain text
  6. How to save the HTML files to a folder named my-first-web-pages on your hard drive.
  7. How to validate your file to ensure that it correct HTML
  8. How to view those pages in your browser.
  9. Tutorial 7 shows you 'How to link pages together', so that the viewer can easily view other pages.
  10. 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

 

Step 1. Create a Folder

You require a dedicated Folder to hold your Web site files & sub folder(s) that you will produce on your own computer.

Folder Name

In this tutorial I will name the folder
my-first-web-pages

I will keep refering to this name. If you wish to use use a name of your own choice make a note of it for future reference.

my-first-web-pages folder location

In this tutorial I want to place the my-first-web-pages folder in the following location:
C: > Users > Your User Name>

  1. Copy from this Tutorial   the name of the folder you will create
    my-first-web-pages
  2. In Windows Explorer browse to C: > Users > Your User Name>
  3. Right Click your User Name, in my case it is Jon
  4. In the drop down menu Mouse over New then select Folder
  5. A New Folder will be highlighted Paste or Type in my-first-web-pages

 

The actual folder name & where you save it is up to you - What is essencial is that you make a note of the folder name and where you save it, so that you can find it easily.

How to Create a Folder in Windows Video

The video shows you how to create the folder my-first-web-pages

 

Lesson 1. My First Web Page

All web pages require the following code, in the form of HTML tags, which will work & produce a simple web page, that will validate as correct.

When you start a new page in a web editor, the editor will usually create several lines of Source Code. Select the Source view / Code,  and you can see the code produced. Note the code produced will vary slightly depending on the editor used.

Use the following code if you are using either Blue Griffon, Notebook or Dreamweaver or a web editor that can prepare HTML5

Click for specific instructions information & videos

for using these Web Editors | Blue Griffon | KompoZer | Microsoft WebMatrix |Notebook | Dreamweaver |

Example for HTML5

<!DOCTYPE html>
 <html>

<head> <meta charset="UTF-8"> <title>Your Page TITLE goes here</title> </head> <body> <p>Your Page CONTENT goes here and is in a paragraph</p>
   </body>  </html>

View the results of this code in a browser

 

Use the following code if you are using Kompozer or a web editor that can't prepare an HTML5 page

Example for HTML 4.01

<!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>Your Page TITLE goes here</title>

</head> <body> <p>Your Page CONTENT goes here and is in a Paragraph</p>
</body> </html>

View the results of this code in a browser

When you view in your browser Note the 3 areas in the screen shot below taken from the Firefox browser

  • Look for Your Page TITLE goes here in the
    • top line of the window (Not in the Chrome browser)
    • & in the Tab
  • Look for Your Page CONTENT goes here in the browsers main window.

Then re-read the code & compare to the result.

Browser view

 

Code Explanations

 

HTML Tags & HTML Elements

 

HTML Tags

In the above code you will see several letters or words within angle brackets <> such as <html> & <p>

These are HTML tags


  • Basically HTML tags are the markup code that imparts information to either the web brower or to search engines.

  • 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 recommended that tags are written in lower case letters
  • 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.
  • HTML has 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. The ones that you will use as a beginner are listed here: eg.<br> <hr> <img> <embed> <link> <meta>
  • Some tags are not supported by some browsers, some are supported differently, hence the different appearance of web pages in different browsers.

HTML Tags

HTML Elements

  • Most but not all tags have some content with them eg.  <p>These words within the P tag are content<p>
  • An HTML tag + it's content is known as an HTML Element.

 

!DOCTYPE Declaration Explanation

The <!DOCTYPE> declaration must be the very first thing in your HTML document, before the <html> tag.

The <!DOCTYPE> declaration informs the web browser what type of document to expect

The <!DOCTYPE> tag does not have an end tag.

!DOCTYPE Declaration Explanation

HTML5 DOCTYPE

HTML 4.01 DOCTYPE

 

 

HTML5 DOCTYPE

<!DOCTYPE html>

 

HTML 4.01 DOCTYPEs

  • This is the declaration to the Web browser that this page (file) is an HTML 4.01 document
  • If you wish to use HTML 4.01 or to amend an HTML 4.01 file then more information on HTML 4.01 !DOCTYPE
  • There are 3 HTML 4.01 DOCTYPEs
HTML 4.01 Strict

This is the one we recomend to use

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

HTML 4.01 Transitional

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

HTML 4.01 Frameset

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

 

<head> Tag Explanation

Opening tag <head>   Closing Tag </head>

  • The <head> element is a container for all the head elements.
  • The <head> element must include a title for the document
  • May include scripts, styles, meta information, and more.
  • The following elements can go inside the <head> element:
    • <title> (this element is required in the head section)
    • <style> CSS styles
    • <base>
    • <link>
    • <meta>
    • <script>
    • <noscript>

 

<title> Tag Explanation

Opening tag <title>   Closing Tag </title>

  • Defines a title in the browser toolbar and or Tabs
  • Provides a title for the page when it is added to favorites
  • Displays a title for the page in search-engine results

Only 1 title tag is allowed, must be within the HEAD element. Limit the contents of the Title to 64 characters.

Should contain some of your pages main key words or key phrases & describe your page.

Please note that there is a Title attribute

 

<meta> Tag Explanation

The meta element imparts data that is used by the Web browser & search engines

There are several different meta elements. In this tutorial 2 we have introduced the charset meta element

This defines the set of characters - Letters, numbers & symbols that should be used by the browser.

In the UK the sets normally used are either

  • UTF-8 contains more characters than ISO-8859-1
  • ISO-8859-1

Examples

HTML5
<meta charset="UTF-8">

HTML 4.01
<meta http-equiv="content-type" content="text/html; charset=UTF-8">

 

<html> Tag Explanation

Opening tag <html>   Closing Tag </html>

The <html> tag tells the browser that this is an HTML document. The <html> tag is the container for all other HTML elements (except for the <!DOCTYPE> tag).

 

<body> Tag Explanation

Opening tag <body>   Closing Tag </body>

The <body> tag defines the document's body.  Everything that appears in the browsers window

The <body> element contains all the contents of an HTML document, such as text, hyperlinks, images, videos, tables, lists, etc

<br> Line break Explanation

Opening tag <br>   No closing Tag in HTML

The content following a line break starts on a new line, without the gap between the lines that a <p> tag produces.

Ideal to place text a the line immediately under an image

 

<p> Paragraph tag Explanation

Opening tag <p>   Closing Tag </p>

Similar to the Line break in that the following content is place on a new line and in addition 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

Opening & Closing Tags along with its contents is called an Element

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

The Paragraph Element is a Block-level element, this means that:

  • The Paragraph starts on a new line
  • An element placed after a Paragraph Element is placed on a new line.
  • There is a space above & below the paragraph