First Simple Web Page - Introduction What you will learn from this page
Step 1. Create a Folder The location "To save your web page"
Required Essential Code for an HTML page Example code for: HTML 4.01 & HTML5
In this first HTML tutorial you will learn:
You will find out how producing you first web page is very gratifying
You require a dedicated Folder to hold your Web site files & sub folder(s) that you will produce on your own computer.
In this tutorial I will name the folder
I will keep referring to this name. If you wish to use use a name of your own choice make a note of it for future reference.
In this tutorial I want to place the my-first-web-pages folder in the following location:
C: > Users > Your User Name>
The actual folder name & where you save it is up to you - What is essential is that you make a note of the folder name and where you save it, so that you can find it easily.
The video shows you how to create the folder my-first-web-pages
All HTML5 web pages require the following code, in the form of HTML tags, which will work & produce a simple BLANK web page, that will validate as correct.
<!DOCTYPE> <html lang="en"> <head> <meta charset="UTF-8"> <title></title> </head> <body> </body> </html>
When you start a new page in a web editor, the editor will usually create these lines of Source Code automatically.
To check this: Select the Source view / Code or similar named option in your editor and see the code produced. Note the code produced may 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
for using these Web Editors
Example for HTML5
<!DOCTYPE> <html> <head> <meta charset="UTF-8"> <title>Your Page TITLE goes here</title> </head> <body> <p>Your Page CONTENT goes here. The p tag indicates that this is a paragraph</p> </body> </html>
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
Then re-read the code & compare to the result.
In the above code you will see several letters or words within angle brackets <> such as <html> & <p>
These are HTML tags
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.
This is the one we recommend to use
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN"
<!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">
Opening tag <head> Closing Tag </head>
Opening tag <title> Closing Tag </title>
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
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
No closing Tag in HTML. Required in XHTML
<meta http-equiv="content-type" content="text/html; charset=UTF-8">
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).
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
Opening tag <br> No closing Tag in HTML. Required in XHTML as a combined opening / closing tag <br />
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
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:
Opening & Closing Tags along with its contents is called an Element
The Paragraph element is very versatile and the most widely used element in web pages
The Paragraph Element is a Block-level element, this means that: