HTML & CSS Day One starts with an introduction to Internet and Web Browsers. We also look at the fundamentals of HTML. You will create a (very) simple HTML web page with text in it. You will use HTML to format the text so that it looks bold and italicised. You will also learn how [...]
Entries Tagged as 'HTML & CSS'
1.1 Getting data from another computer
July 2nd, 2009 1 Comment
To understand how computers get information over the internet, you first need to understand what happens when you open a document which is saved on your computer. When you open a document using the Finder or Windows Explorer you are usually do it by clicking on little pictures of folders. But what is a folder [...]
Tags:
1.2 How servers help you get online
July 2nd, 2009 No Comments
Before you can see a web page displayed on your computer's screen, it must first be copied from the machine on which it is saved on your own hard drive. Retrieving a web page over the internet is essentially just like getting a document over a local network. The basic steps are: You need to [...]
Tags:
1.3 What is a domain name?
July 2nd, 2009 No Comments
If we wanted to retrieve a document saved on a server on the other side of the world, the address of that document can be quite long and complicated. The address would specify in which country to find the computer that the document is on. Maybe which institution in that country. Which network in that [...]
Tags:
1.4 What does a web browser do?
July 2nd, 2009 3 Comments
You are already familiar with some of the more popular web browsers: Internet Explorer used to be the most popular but these days other browsers like Safari and FireFox are also widely used. A web browser has two main tasks it lets you find and open a web page. it displays that web page in [...]
Tags:
1.5 What is "markup language"?
July 2nd, 2009 No Comments
So how does one describe a web page using only text? Lets imagine that we wanted to create a web page that looks like this: We could start by creating a text file that contains the following text: A Thousand Hairy Savages A thousand hairy savages sitting down to lunch. Gobble, gobble, Glup, glup, Munch [...]
Tags:
1.7 the basic parts of HTML
July 2nd, 2009 No Comments
This is the what the HTML of a basic web page looks like without it being translated by the browser. <html> <head> <title> Example Web Page </title> </head> <body bgcolor = "#99CCFF"> This is a very simple web page.<br> It has a blue background <br> It has some text.<br> <b>Some of the text is bold.</b> [...]
Tags:
1.8 Create an HTML page in a text editor
July 2nd, 2009 No Comments
What software should I use? There are many applications for creating HTML pages – Adobe Dreamweaver is a popular example. The problem with Dreamweaver and similar applications is that while trying to understand the fundamentals of HTML, you often end up spending more time figuring out how to use the application. I recommend that you [...]
Tags:
1.9 Create a title for your HTML page
July 2nd, 2009 No Comments
I'm assuming you have already inserted the basic HTML skeleton tags. Now, to make a title for your page, that will end up being displayed in the very top bar of the browser window: In your text editor, insert some words between the title tags. Something like this: <html> <head> <title> My Page Title </title> [...]
Tags:
1.10 How to view your HTML page in a browser
July 2nd, 2009 No Comments
To see if your HTML is working correctly, you need to view it in a browser. If you have not done so already, save the document correctly, in the root folder (Type a name for your document, and add the file extension .htm) Once you have saved the page as a .htm page, open the [...]
Tags:
1.11 Inserting content and formatting content
July 2nd, 2009 No Comments
OK, so far so good. Now, to get some content in your page: Type the words you want displayed in your page between the two body tags, like this: <html> <head> <title> My Page Title </title> </head> <body> This is where the content goes. </body> </html> Save the page. Don't go: Save As – just [...]
Tags:
1.12 Linking pages
July 2nd, 2009 No Comments
Up to now we have just been playing with the look of the page. But what about the most important aspect of a web page – the link? You can create a text link – also called a hyperlink – which opens another page when the viewer clicks on it. To prepare for this exercise, [...]
Tags:
2 HTML & CSS Day Two
July 1st, 2009 No Comments
For Day 2 we take a closer look at controlling colour, font type and font size using HTML. Later on (in Day 4) we will look at better ways of controlling colour and fonts using CSS – but for the moment it's a convenient way of understanding HTML fundamentals. Exercise 1 Create a new .htm [...]
Tags:
2.1 Create links to pages in sub-folders
July 1st, 2009 No Comments
In Day One, you created a link that points to another page. The HTML for creating a link from one page to the other was: <a href = "two.htm"> this is the link </a> Did you notice that although I said that the filename ("two.htm") is the address of the page that you wish to [...]
Tags:
2.2 File Naming conventions and folder organisation
July 1st, 2009 No Comments
Home Page Naming Convention To ensure that the correct page opens when someone enters the domain name of your site, follow the home page naming conventions. The browser will open the relevant folder on the server and probably have to choose between any number of .htm pages that it could open. To ensure that the [...]
Tags:
2.3 Colour in HTML (and CSS too)
July 1st, 2009 No Comments
There are two ways to specify colour in HTML (and CSS too, which we will deal with later). The first is to use one of the pre-defined colour names. Here is a link to the W3schools list of colour names. You can also use a hexadecimal value to indicate a colour. A hexadecimal value is [...]
Tags:
2.4 Set page background colour with HTML
July 1st, 2009 No Comments
By default, the browser displays the document as having black text on a white background. So unless you specify otherwise, that is what your web page will look like. Lets change the background colour. To change the background colour, you need to change the text that is inside the opening body tag. The following example [...]
Tags:
2.5 Set font, colour and size in HTML
July 1st, 2009 No Comments
The best way to format type is with Cascading Style Sheets (CSS). We will be looking at that later on in these pages. For the moment, to help you understand HTML, we will continue doing it the old fashioned way using HTML and the <font> tag. To specify what font to use, put the following [...]
Tags:
2.6 Inserting an Image using HTML
July 1st, 2009 No Comments
You can use the following images Any image that has been saved in the GIF or JPEG or PNG format The resolution should be 72dpi The image should not be too large. To give you an idea – a typical web site is about 650 pixels wide. If you think your images don't fulfil these [...]
Tags:
3 HTML & CSS Day Three
June 30th, 2009 No Comments
In Day 3 we look at a common way of controlling the layout of web pages – using HTML tables. Exercise 1 Use HTML to create a table that looks like this: Exercise 2 Have a look at the screenshot below. Create an identical .htm page. Tables Using HTML tables for layout Create a simple [...]
Tags:
