Unfortunately the online html course we were using is no longer available for some reason so we're having to improvise our web design course.
Please ask for help help and guidance if you get stuck.
Our improvised course will cover:
You can refer to this web site for html codes:
Gimp is an image editing program a bit like Photoshop:
http://www.gimp.org/downloads/
Notepad++ is the text editor we are using to edit html pages:
http://notepad-plus.en.softonic.com/
Filezilla is an ftp program:
http://filezilla-project.org/download.php
Core ftp is a very simple ftp program:
http://www.coreftp.com/download.html
Starting off
Open Notpepad++ (or ordinary Notepad), copy and paste this html code into a new document and save it as myfirstpage.html in the folder your are going to use for your web course work:
<!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>
<title>XXXXXXXXXXXXXXXXXXXXXXXXXX</title
</head>
<body>
My first page
</body>
</html>
This is the page your are going to work on to learn learn and try out all the basic html code.
Basic html code
html, body, head, title, p, bold, align,h1, b,
<p align....
<font face="Arial.......color="......" size="...." >
hr align="center" width="400" size="5"
<body bgcolor="#FFCCCC" text="#000000" link="#990000" alink="#009900" vlink="#330033">
text = is the base text color on the page.
link = is the color of the link text on the page.
vlink = is the color of an already visited link.
alink = makes the link text blink another color when activating.
Lists
Lists.. ul lists are more important than ol and dl.........ul isused in nav menus.
You can skip learning ordered lists if you want as they are not used very often.
<ul> |
It creates an unordered list. Uses bullets for each item. |
<ol> |
It creates an ordered list. Uses numbers, letters, roman numerals for each item. |
<li> |
It creates a List Item for both ordered and unordered lists. Add a new <li> tag for each list item. |
</li> |
It closes a list item. |
type="disc" |
This attribute (type) and value (disc) is used with an unordered list. Disc is the default value. Other values are circle or square. This is what determines which kind of bullets are used. |
type="1" |
This attribute (type) and value (1) is used with an ordered list. Numbers are the default value. Other values are A, a, I, or i. This is what determines which kind of numbering style is used. |
start="4" |
This attribute (start) and value (4) is used with an ordered list. The value can be set to any number and will correspond with letters or Roman numerals, if you are using those numbering systems. This allows you to start one list where a previous list left off. |
<dl> |
It starts a definition list. |
<dt> |
It starts a definition term. |
<dd> |
It starts a definition item. Indented below the term, but with no bullet or number. |
</dl> |
It closes a definition list. |
</ul> |
It closes an unordered list. |
</ol> |
It closes an ordered list. |
Hyperlinks
Example
<a href="http://www.bbc.co.uk/news/">BBC News homepage</a>
target="_blank"
<a href="........................." target="_blank" ></a> opens the link page in a new window or tab.
Email links: <a href="mailto:anyone@somecompany.com">Email Me</a>
To hide the email address from spammers: use an image or a contact form.
Anchors <a name="top"></a> <a href="#top">
Relative vs. Absolute Links
Images
Create a separate "images" folder iside the same folder where you keep your web pages.
You can use Google images to find images to use
Example code for an image
<img src="images/mypicture.jpg" alt="my picture" width="100" height="54" align ="right">
alt ......always insert text describing your image inside the alt element: it helps blind people ; also Search engines read it, so your page is more likely to be found.
Vspace and hspace are used to create space around your image. For example:
<img src="images/mypicture.jpg" alt="my picture" width="100" height="54" align ="right" vspace="20" hspace="20">
This would create a space 20 pixels all around your image.
vspace is for vertical space.
hspace is for horizontal space.
Background images:
To use an image as a background to your web page use code like this:
<body background="my-background.gif" bgcolor="FFF">
We will do more on repeating background images on the Tables page.
Image links
To make an image work as a hyperling use code like this:
<a href="http://www.bbc.co.uk/news/ ><img src="my-picture" border="0"><a/>
N.b. it's important to specify border as 0 otherwise a border is put on the image by default.
******More pages in construction