HTML

HTML.

Hypertext Markup Language.

HTML is the programming language for writing web pages. Many web-sites are written using software packages such as Front Page and Dreamweaver. However programmers still need to be able to understand HTML and the more advanced Javascript.

As a first attempt at web page writing it is a good exercise to learn a few basic commands in HTML. The text is written in Notepad, go to Start > Programs > Accessories > Notepad. After some code has been written you can instantly view in Internet Explorer or Netscape by saving the document as an html document. Run the html document to see the results, and make any necessary arrangements by clicking on View in the menu and selecting Source, the source code is displayed, (the original Notepad document).

Back

Note a Tag. It is the information stored within the arrow brackets i.e. <TAG>.

<HTML>
<HEAD>
<TITLE>
My First Web Page!
</TITLE>
</HEAD>

<BODY>
<H1>
Hello Everybody!!!
</H1>
</BODY>
</HTML>

Starting the document:
<HTML> defines the document, computer or browser can read in the correct syntax. It is always the first tag.
</HTML> end of the HTML document. It is always the last tag.

The structure of a web page:
<HEAD> creates a header, the head of the document, holds the information about the document such as the title. A Title should be present in the Head.
</HEAD> end of the Head.

<TITLE> gives the web page a title, appears on the web browser's title bar. It is used by search engines to find the page. Each page should have a different title.
</TITLE> end of the Title.

<BODY> creates the body of the web page, it is the content of the page that actually appears in the web browser. The entire content of the web page appears in the Body. The Body will contain the text, images, links, multimedia, animation etc. All the work you do will go into the Body.
</BODY> end of the Body.

<H1> creates the size of the text that comes next, H stands for Heading, and 1 stands for the biggest size. Therefore the most important message or headline could be written using this tag.
</H1> end of this size of text.

Note: every time a tag is opened i.e. <H1> it always has to be closed i.e. </H1>, the forward slash is used to denote the closing of the tag.

You will also have to include comments. A comment is another Tag.
<--COMMENT--> i.e. <--This will make the font colour red-->

Try different Font sizes and styles, make two lines of text:

<FONT SIZE=5 COLOR="00ccff" FACE="Courier">
Here is some text <P>
This word is in <I>italics</I> this word is <B> bold</B> </FONT>

You can make the text move by inserting <MARQUEE>text</MARQUEE>
You can align text by inserting <CENTER>
You can underline words with <U>text</U>
You can use a line break instead of a paragraph to make text start on the next line, <BR> instead of <P>.

Give the background some colour try yellow:
<BODY BGCOLOR="#FFFF00">

GRAPHICS:

To place an image on your web page you will need to know the location of your image.
<IMG SRC="image.jpg" WIDTH=250 HEIGHT=150>

IMG adds an image to the page, SRC specifies the uniform resource locator for the image. The size is set by WIDTH and HEIGHT. You can also add an image by referring to its website.

An image could also be set as a background.
<BACKGROUND="file:C:/Phone.jpg">

LINKS:

To place a link to an image in a piece of text:

<A HREF="image.jpg"> image</A>

A creates a hyperlink with HREF, or an anchor with a NAME attribute.

A link to a football site:
<A HREF="http://www.mathstutor.com/MenuFootball.html"><B>Football</B></A>

Note: A hyperlink is underlined.

<A HREF="BottomLine">This links to the bottom of the page</A>
<A NAME="BottomLine">This is the bottom of the page</A>

A Hyperlink to an e-mail address:
<A HREF="mailto:webmaster@ict-teacher.com">e-mail ICT-Teacher</A>

A graphical hyperlink:
<A HREF="http://www.google.com"><IMG SRC="image.jpg></A>
<A HREF="http://www.google.com"><IMG SRC="file:///C:/liverbuildings.jpg" ></A> an example where the image source is in a file.

Creating a Web Page:

The HTML code has to be written using Notepad (Start > All Programs > Accessories > Notepad).
When your first programming is completed save the file as an .html file, i.e. first.html in a new folder.

Go to the Internet Explorer browser, open and search for your saved file by selecting File > Open.
Click on the 'Browse' button to find your saved file.

To amend the code or add new code, click View > Source and the original Notepad code will appear for amending.

Amend or add the new code, save the file and click the refresh icon for an automatic update of the HTML web file.

Continue to add and amend code until the page you have written is satisfactory. You then need to add at least one other page and link them together.

A suggestion for what you need to Design.

You will need to start with two sketches on paper of what you would like to produce.

The theme is the new mobile phone company, include logo, contact details, the persons running it, and what it does on the first page, create a background colour, and some images. Create some links to other web sites, create an e-mail link, create a link to a second page, use an image as a link. Two new products are to be advertised on the second page, and a link back to the first page.

HTML a quick guide to TAGS.

To get started:

<HTML> An HTML document opens </HTML>
<HEAD> Opens the head to insert a title </HEAD>
<TITLE> Enter the web site title </TITLE>
<BODY> Where all the code goes </BODY>
<BODY BGCOLOR= > Sets the background colour, type colour name or #etc
<BACKGROUND="image.jpg"> For a background image
<BGSOUND SRC="musicname.wav" LOOP="INFINITE"> For a background sound

Formatting Text:

<FONT SIZE= , COLOR= , FACE= ,> <I> Italic, <B> Bold, <U> Underline
<H1> Largest text possible for headings, others are: H2, H3, H4, H5, H6
<BR> Inserts a line break.
<P> Inserts a paragraph break
<HR> Inserts a horizontal rule
<CENTER> Aligns the text to the centre of the page
<LI> Make a bullet list
<BIG> Big text, <SMALL> Small text <SUB> Subscript text
<SPACER TYPE="VERTICAL"(or HORIZONTAL) SIZE= > A space to the next line

Images:

<IMG SRC="image.jpg" WIDTH= Height= (If a border is needed) BORDER= >
<HSPACE= VSPACE= , > To add space around an image horizontal and vertical
<ALIGN= TOP/MIDDLE/BOTTOM >This gets the text to wrap around
<BR CLEAR=RIGHT/LEFT> This avoids text wrap and leaves spaces
Images are scaled by customising the HEIGHT and WIDTH

Links:

<A HREF="image.jpg"> image</A> Will place a link to an image in the text
<A HREF=http://www.bbc.co.uk><IMG SRC="theimagename.jpg"> Is an image link to the website
<A HREF="http://www.bbc.co.uk">BBC</A> Is a text link to a web site

Anchor:

Place an anchor in the page: <A NAME="nameofthetext"> Welcome</A>
Place a link to that anchor: <A HREF="#nameofthetext">Go to Welcome</A>

E-mail:

<A HREF="mailto: henry@bbc.co.uk">To e-mail Henry click here</A>

Note: many TAGS do not need to be closed, those that do are shown with a </ >