Difference between revisions of "HTML:Start"
| Line 1: | Line 1: | ||
| − | ==''' | + | =='''Introduction'''== |
The purpose of this workbook is to introduce you to the concepts used in creating web pages. Many tools and techniques are used in the creation of web materials, but most advanced tools and techniques are based on the same fundamental method. Once you know the principles of HTML, you can go on to learn more advanced web development tools, understanding how they work behind the scenes. | The purpose of this workbook is to introduce you to the concepts used in creating web pages. Many tools and techniques are used in the creation of web materials, but most advanced tools and techniques are based on the same fundamental method. Once you know the principles of HTML, you can go on to learn more advanced web development tools, understanding how they work behind the scenes. | ||
| + | |||
| + | =='''What is HTML?'''== | ||
HTML stands for Hyper Text Mark-up Language (often referred as HTML). HTML is a formatting language (sometimes referred to as a programming language, although this is a misconception) used to create a variety of web material, and is very easy to use. | HTML stands for Hyper Text Mark-up Language (often referred as HTML). HTML is a formatting language (sometimes referred to as a programming language, although this is a misconception) used to create a variety of web material, and is very easy to use. | ||
Revision as of 16:28, 1 February 2007
Introduction
The purpose of this workbook is to introduce you to the concepts used in creating web pages. Many tools and techniques are used in the creation of web materials, but most advanced tools and techniques are based on the same fundamental method. Once you know the principles of HTML, you can go on to learn more advanced web development tools, understanding how they work behind the scenes.
What is HTML?
HTML stands for Hyper Text Mark-up Language (often referred as HTML). HTML is a formatting language (sometimes referred to as a programming language, although this is a misconception) used to create a variety of web material, and is very easy to use.
HTML Editors
In order to create a HTML file, all that you need is the simplest software tool available to any computer user – a text editor. Any text editor can be used, but for the purpose of this course, I will use the NOTEPAD text editor available on any version of Microsoft Windows. WHY? Notepad is the standard text editor distributed with any version of Microsoft Windows. It is installed by default with any Windows installation, and is very easy to use.
UPDATED FOR VERSION 2.0
It has now been decided that PSPad (freely available www.pspad.com) is the preferred text editor for the module. It must be stressed that PSPad is still just a text editor (with more useful functions) and for the purpose of this workbook, Notepad is still a perfectly adequate substitute. No aspects of this workbook require you to use any features not available in Notepad. You can install a cutdown version of PSPad in your My Documents directory to use on university computers by following instructions here -> PSPad - download and install instructions
Saving Your Work
In order to create web pages using this workbook, you will need somewhere to store them. The best place to store them is in "My Documents" – if you wish to work on your website from any university computer, "My Documents" will be available. If you wish to transport your work home, I would recommend the purchase of a small USB data storage device (AKA a USB Pen/Key Drive), so that you can transport your work with you, and amend it whatever computer you are using.
Your First Webpage
Follow the steps shown below to create your first page. Start PSPad – in the new file dialog box, choose "HTML document" and click OK. If you are not shown the dialog, go to the "File" menu, and click "New File…"
Make sure that the content of the new file is exactly as shown at the top of the next page. PSPad may fill in some of this for you, but you’ll need to fill in what it does not.
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<HTML>
<HEAD>
<TITLE>
My first HTML document
</TITLE>
</HEAD>
<BODY>
<P>
Hello World!
</P>
</BODY>
</HTML>
Click on Save (in the File Menu) and save the file somewhere in the "My Documents" folder, with a meaningful name, such as first.htm
Open up the "My Documents" folder on your desktop, and double-click the first.htm file to open in.
Congratulations, you’ve just created and viewed your first web page.
Your First Webpage – Debrief
Let’s examine the contents of the first.htm file to understand what the commands mean.
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
At the start of every HTML file you must include this statement. Automated testing tools used to verify web pages use this line to understand what version of HTML the document is written in. This must be exact – no missing spaces or symbols. Although the contents of the blue box above are shown on two lines due to the width of this page, the contents can be on one line – a space should be typed between the …//EN" and "http: parts of the statement. Without this, the webpage is not much more than a simple text document. It tells the browser what mark- up language the page has been written in, so it knows how to display the content correctly. A web page which does not include a DOCTYPE at all will render (display) in Quirks mode. The web browser will display your webpage based on the defaults- e.g. Font could be Times New Roman, 12pt, black.
<HTML>
This statement identifies the start of the Hypertext Mark-up Language section of the document. Everything placed between these will display the content correctly- providing the HTML is correct. Anything out of these tags will display it as default text on the page.
<HEAD>
HTML documents are broadly split into two sections – the header section and the main body. The header section contains commands that are not visible in the main content of the web page, but control other aspects, such as some aspects of the appearance of the web page. A HTML document must contain both a header and a main body section. Note: notice how the <HEAD> line is indented from the line before. Indenting is a useful programming standard used to better format the content of HTML, make the code easier to read, and to quickly find sections when errors need to be corrected. You should adopt this convention of indenting in your coding – if you are following this workbook as part of a course, you will no doubt be assessed on the quality of your code at some point.
<TITLE>My first HTML document</TITLE>
This line controls the title of the document. It doesn't show on the webpage itself. The title is presented both in the Title Bar of the browser (Internet Explorer, etc.) window and also in the Taskbar at the bottom of the Windows XP screen. It is useful to give documents meaningful titles so that they are easily identified when the desktop has lots of open windows, and if you have Bookmarks (websites in your Favourites folder). Note: notice how the <TITLE> line is indented with the <BODY> section
</HEAD>
This line identifies that we have completed the header section of our document.
<BODY><P>Hello World!</P></BODY>
This line identifies that we are beginning the main body of the document, followed by the content of the page, followed by the end of the main body of the web page. Everything that is going to be viewed on your webpage should go here.
</HTML>
This line identifies the end of the HTML document.
Ready for the next part?
When you fully understand everything on this page, try moving on to 02 - The Basics of HTML 4.01
