Introducing HTML & other web languages

'Languages' on the Web
The document type definition
Web Browsers
The Basics of HTML
Web page Content with Activities

'Languages' on the Web

The Internet deals with a lot of different languages, and not just the ones we speak. There are also a large number of programming languages in use on the Internet, below are some examples of the ones in most popular use, some you may have even heard of!

HTML - Hypertext Markup Language
DHTML - Dynamic HTML (Changes as it is used)
SHTML - Server side includes HTML
XHTML - : Extensible HTML
XML - Extensible Markup Language
CSS - Cascading Style Sheets
JavaScript - Script language for interactive sites
Java - High-level programming language, used to run applets on sites
ActionScript - Language used by Macromedia Flash
CGI - Common Gateway Interface
Perl - Practical Extraction and Repeat Language
ASP - Active Server Pages
PHP - Hypertext Preprocessor
SQL - Standard Query Language

You will not need to remember all these, but it gives you an idea of the complexity of some web pages. If you want to find out a little more there are definitions of each of the languages on our Glossary page

The document type definition (DTD)

The programming language and version a page is written in should be specified at the start of the document, this is called a document type definition (DTD) . The DTD we are concerned with is as follows:

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>  	
<meta http-equiv="Content-Type" 
content="text/html;charset=iso-8859-1" />	
<meta http-equiv="author" content="Marilyn Peddle" />
<meta name="title" content="The Blackmore Blackmore Vale" />	
<meta name="Keywords" content="Blackmore Vale, North Dorset, 
Dorset, Villages, Towns, Southern England, UK"/>	
<meta name="Description" content="Introduction to the 
Blackmore Vale in Dorset England" />
<title>Index Page for The Blackmore Vale - Dorset</title>
<link href="blackmore_style.css" rel="stylesheet" type="text/css" />
</head>

This DTD is important as it allows the browser to know the language the web site is written in and therefore display the pages as the webmaster designed. Also without it it could cause problems when displaying a web page. You will not have to remember this as your editor will add this to every new page you make, although some editors such as FrontPage did not add this as default in the past.

The W3C sets standards for all of the different languages in use on the web and without this DTD at the top of the page they will fail any testing you may do on your site. We will look at more about testing later on.

Top

Web Browsers

When designing for the web, in order to make your pages accessible to a larger audience, they should work properly when viewed with all major browsers. There are slight differences with how the various browsers interpret the code you write. Below is a list of the major browsers and links to the relevant sites:

One of the best ways of ensuring your design will show as intended is to comply to the W3C standards. If we have time we will have a look at these and test a website using the online testing tools.

Why is this important? As we all use IE don't we?

Not so, more and more people are using other browsers here is a link to statistics of browser use. IE has had a lot of bad press with security issues, while the others have enjoyed virtually no problems.

The Basics of HTML

Hypertext Markup Language is a language that defines the structure and layout of a web document using a variety of tags.

Here is an example of the absolute minimum a HTML page can consist of:

	<html>
		<head>

			<title>Title goes here</title>
		</head>

		<body>

		Page content goes here

		</body>
	</html>

The html tags enclose everything in the page except the DTD and indicate to the browser that everything enclosed in these tags will be HTML or XHTML coding.

Remember a web page must contain a DTD if you are going to publish your pages on the web.

Head section

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>  	
<meta http-equiv="Content-Type" 
content="text/html;charset=iso-8859-1" />	
<meta http-equiv="author" content="Marilyn Peddle" />
<meta name="title" content="The Blackmore Blackmore Vale" />	
<meta name="Keywords" content="Blackmore Vale, North Dorset, 
Dorset, Villages, Towns, Southern England, UK"/>	
<meta name="Description" content="Introduction to the 
Blackmore Vale in Dorset England" />
<title>Index Page for The Blackmore Vale - Dorset</title>
<link href="blackmore_style.css" rel="stylesheet" type="text/css" />
</head>

We will look at the head section of the page first, after the DTD there is an opening html tag then comes the head section. Enclosed in the head tags is a lot of information, I will introduce some of the things you may find.

Meta tags - these give lots of information on the website and were used by search engines to index the site although not many use this method any more including Google. Search Optimization is another course of its own so we will not be delving into it too deeply!
Title is what is shown at the top of the browser window, often forgotten but makes for a tidier more professional site.

Title of a web page in IE

Link - Links to an external style sheet or maybe some JavaScript. We will be going into much more detail on style sheets in the next section.

In other words the head content contains information that will not be displayed on the page but may link to things that may be used in the page such a style sheets.

Activity 1

You can look at what's behind a web page when you are in a Browser.

On this page right click your mouse and select view source in the menu, the source code of the page will open up in Notepad in IE or in another page in other browsers, have a look, particularly at the DTD definition and the code in between the head tags.

Try this with a couple of other websites (Go to the links page if you like to save typing!). The information in the head section can get quite complicated in some sites!

Top

Web page Content

Well we are down to putting some content in a page and all content will be between body tags and the content inside these tags is what you will see on your web page.

Here is a chance for you to get some practice in hand coding in HTML. Don't worry we will be only covering basic stuff but at least it should give you an idea how a page is formed.

When coding remember that if you open a tag it must be closed

	<p>close the tag</p>

	<br />

A line break has a closing tag within it as is formatting text rather than containing text.

Always nest tags so that they open and close in sequence.

The paragraph has a nested span tag within it. This is particularly important when using styles.

Activity 2

Using Notepad

There is a folder already set up on the computer workspace with your school name on it which you will be using save your activities. Open the notepad folder in the Workshop folder and open the html_coding.txt file which will open in Notepad.

First of all put a title between the title tags. Something like My first page will do!

Now Save As the document in the folder you have just made and call it something like first_page with an extension .html or .htm (either is acceptable) eg first_page.htm

Don't close the Notepad document yet! Minimize it in the task bar for now.

Naming & coding conventions of web pages

When you are hand coding always use lower case for your tags, now HTML is being replaced by XHTML as a web standard it is a good idea to follow this practice. Your Web editor will do this when it writes the code behind your WSIWYG interface.

Another good web practice is naming all your web pages, images, documents etc. in lower case and leaving no spaces in a name such as web_design_workshop.html or webdesignworkshop.html. In the first example an underscore has been used as a space. It is up to you, if you use the same naming convention each time it will become a matter of course. This convention includes all folders and sub-folders in your website

Why do we do this?

Some servers will interpret upper and lower case and spaces differently and your page may not show as expected. Spaces are often showed as %20 by some servers.

Naming conventions

Summary

Here are some things to avoid when naming files or folders for Web use:

Spaces
Periods (dots) that do not immediately precede a file extension
Any character that is not a letter, a number, a dash, or an underscore

Paragraphs and line breaks

You can make your text in a page look a bit better and make them easier to read by spacing out the text using paragraph and line break tags. A paragraph tag puts a line space between your text, and a line break forces text onto the next line:

	<p>This is text within the body of my page.<br />
    This is now a new line of text.</p>	

	<p>This is a new paragraph.</p>

Activity 3

Try Adding paragraphs and line breaks to your page in Notepad and Save the file

Don't close Notepad.

Go to your folder where your html document is stored and double click the icon to open it and preview your work in IE. It will show as a web page document.

Headings

The next thing to do is to add headings and sub-headings to your pages. Headings make the text bold automatically, and make them easy to identify in the code. There are six levels of headings, 1 to 6, 1 is the largest six is the smallest.

This is a level 1 heading

This is a level 6 heading

	<h1>This is a level 1 heading</h1>
  	<h6>This is a level 6 heading</h6>

Activity 4

Now try adding a couple of different headings to your page in Notepad and Save it again.

Don't close Notepad.

Preview your page as in Activity 3

Links

The main benefit of HTML is the Hypertext part, this is the part that allows us to link documents and parts of documents together. Links on web pages use the 'anchor' tag to make a 'Hypertext REFerence':

External Links

The link shown below is an example of an absolute link, it directs to an exact address. Don't forget you need the http:// part of the address as well

	<p><a href="http://www.bbc.co.uk/">This is now a link</a></p>

Relative Links

When creating a site it is quite useful to link the pages using relative references, which point to a file in relation to the current document in your site. For example, to get to a page called file in a folder called pages the link should look like this:

	<p><a href="pages/file.html">Go to names list</a></p>

Activity 5

Add links in your Notepad document to an external site.

Then try a link to a local HTML page. I have put a page called barnes.htm in the workshop folder for you to link to.

	<p><a href="../Workshop/project_files/barnes.htm">William Barnes</a></p>

Like this as it is just outside of your folder.

Save your file.

If you would like to try some optional activities don't close Notepad.

Preview your page as in Activity 3 - 5

Optional Activities

Internal Page Links

In HTML you can also link to different sections of one page. This is particularly useful if you have a very long page and wish users to 'jump' between sections (this page has 'jump' links in it). The links to get to a place in the document use exactly the same tag as an external document, but you need to use an anchor point to 'point' to. Links within the document should begin with a '#' to tell the browser this. Here is an example of a 'jump' link:

To link down to a heading in your page put this code at the top of the page where you want to link from:

		<p><a href="#news">Today's News</a></p>

(page content)

Put this link where you want your link to got to, this is the anchor for the link.

		<p><a name="news"><h2>Todays News</h2></a></p>

Activity 6

Create Internal page links in your web page. Try linking from the bottom to the top of your page. Save your file.

Don't close Notepad.

Preview your page as in Activity 3 - 6. You may have to make your IE window smaller to get your link to work.

Or you can put some dummy text on your page to 'fill' it up. Go to the Lorem Ipsum generator site. Generate a few paragraphs and copy and paste it into your Notepad. Remember to put paragraph tags paragraph round each paragraph!

Images

Images are now a major part of the Internet. However, HTML pages themselves do not contain images. Image files are stored with HTML pages and the file is linked to from within the code. Images for the Internet are normally stored in GIF , JPEG or PNG file formats. An image should have a source (src), a height and width, and an alternative text (alt) attribute.
Here is an example of an image tag:

	<img src="filename.gif"  height="100" 
 	 width="200" alt="text if image is not displayed" />

Activity 7

Add an image to your page.

There is an image in the notepad folder in the Workshop folder called stour.jpg if you would like to copy this picture into your folder with your webpage.

Take a note of it's:

name
size in pixels
type of file (jpeg, gif etc.)

Now link to the image in your page in Notepad. Because the file is in the same folder as your page it is fairly straight forward you just have to link to the file.

In some websites it can become more complicated when your images are kept in separate folders from your html files

This THS logo has been stored in a logo folder, inside the images folder, while this page is in a folder called pages. So to link to it the address is ../images/logos/ths_crest2.gif. Don't worry if you can't grasp this because when we use Dreamweaver it does it all for you!

Lists

Bulleted lists are also very useful it helps to break up a document into chunks rather than a screen full of text making a document easier to read. They are also useful for lists of links I have used them as the page links and Activity links on the left of the page.

As in WORD you can have bulleted and numbered lists, called unordered and ordered list respectively.

unordered list 1
unordered list 2

ordered list 1
ordered list 2

		<ul>
			<li>unordered list 1</li>
			<li>unordered list 2 </li>
		</ul>

		<ol>
			<li>ordered list 1</li>
			<li>ordered list 2  </li>
		</ol>

Activity 8

Now try adding an unordered and ordered list to your page in Notepad and Save it again.

Don't close Notepad.

Preview your page as in Activity 3 & 4

Well you could write all your code with Notepad and produce a complex website, its the way I was taught when I first started web design but time constraints and dark circles under the eyes means that there must be an easier way, that is why for the most part designers use Dreamweaver which gives both options for WYSWYG editing and hand-coding.

We will be using Dreamweaver shortly but first we need to explain what is probably a new concept to you, namley CSS...

Next section Introduction to CCS >>

Top

Thomas Hardye Science College

Web Design Workshop

Introducing HTML & other web languages

'Languages' on the Web

The document type definition (DTD)

Web Browsers

The Basics of HTML

Head section

Activity 1

Web page Content

Activity 2

Using Notepad

Naming & coding conventions of web pages

Paragraphs and line breaks

Activity 3

Headings

This is a level 1 heading

This is a level 6 heading

Activity 4

Links

External Links

Relative Links

Activity 5

Optional Activities

Internal Page Links

Activity 6

Images

Activity 7

Lists

Activity 8