Blog Archives

HTML – Adding Webpages & Hyperlinks

In this video tutorial we investigate how to add more webpages to our website and how to create the hyperlinks for the navigation bar using the anchor tag <A> Video Tutorial

HTML – External CSS Stylesheet

Did you know? You can use CSS code both within your HTML page or as a separate CSS file Internal CSS Stylesheet Internal CSS is saved wihtin the HTML page by adding a <STYLE> tag inside the <HEAD> section of

HTML – Styling Text using CSS

Learning Objectives In this challenge we are learning how to format text on a web page using a range of CSS properties. Remember the key syntax for CSS is as follows: In this challenge we will use various CSS properties

HTML – How to add a Favicon?

Once your website is ready, you will want to design and add a favicon. This graphic will appear in your web-browser in the tab section as well as in the favourite toolbar. The favicon is also used by smartphone and

HTML – Using CSS with Pictures

There are many CSS properties that can be used to change the look and feel of your web graphics. You can use CSS to: Position a picture (e.g. center a picture or add a margin around your picture) Resize your

HTML – Adding Pictures

In this video tutorial you will learn: How to organise your picture files in your website folder The main three types of picture files: .png, .jpg and .gif How to use the <IMG> tag to add pictures to your webpage.

HTML – Website Layout

Are you ready to build up your first website? Before using this blog post let’s go through this checklist: Do you know your HTML tags? Do you understand how CSS works? Have you created a design for your website? Have

Star Wars Quotes

Learning Objectives In this challenge we are learning how to format text on a web page using a range of CSS properties. Remember the key syntax for CSS is as follows: In this challenge we will use various CSS properties

Hexadecimal Colour Codes

Look at the picture on the right. Can you give a unique name to each of the colours displayed on the picture? (e.g. Lemon yellow, sunset yellow, tangerine etc.) Do you know your colour codes? When building websites or Graphical

HTML Tags – Drag & Drop

Complete this drag and drop activity to complete the HTML code used to create the page displayed below: <B> <FONT color=”#FF0000″> <H1> </B> <U> <CENTER> </H1> </FONT> <A href=””> </A> </U> </CENTER> <IMG src=”logo.png” width=”250″/> Welcome to my webpage <P>I

HTML Chess Challenge

Learning Objectives In this challenge you are going to learn how to create and format a table using HTML. You will also learn how to insert special characters (using UNICODE characters) on to a webpage. First you may want to

HTML Codes

When creating your webpages you may want to use sepcial characters. Using the the following codes in your HTML code: Star SymbolsSymbolHTML CodeSymbolHTML Code✢4 Tear-drop asterisk&#10018;✣4 Balloon asterisk&#10019;✥Club asterisk&#10021;✤4 Balloon asterisk heavy&#10020;✦4-pointed star black&#10022;✧4-pointed star white&#10023;✩Stress outlined star&#10025;✪Circled white star&#10026;✫Open

Happy New Year!

Learning Objectives In this challenge you will learn how to format text using CSS including how to: Changing font style, Changing font color, Changing font weight, Changing text to italic, Underlining text. We will also investigate the use of borders,

Digicode – CSS Challenge

In this challenge you are going to use CSS to create your own digicode keypad. Learning Objectives By completing this challenge you will familiarise yourself with CSS pseudo-classes. A pseudo-class is used to define a special state of an element.

Road Signs in HTML / CSS

In this set of challenges we are going to use CSS to recreate various road signs. Learning Objectives By completing these challenges you will learn more about how CSS can be used to format information on the page. We will

Using CSS to organise text into columns

To improve the readability and design of your web pages you may want to organise your text into multiple columns. See the Pen CSS Columns by 101 Computing (@101Computing) on CodePen. Your Challenge Change the above code to split the

Create Post-It Notes using CSS

Familiarise yourself with CSS to see how CSS code can help you format and combine text and graphics effectively. Look at this script to create a post-it note. You could use this code for your own webpages. See the Pen

My First HTML page!

Are you ready to set up your first webpage? All you have to do is follow the following 5 easy steps… Step 1: Getting Ready Go to your files (e.g. “My Documents”) and create a new folder called “My Website”

HTML Applications (.HTA)

Have you ever heard of HTA files aka HTML Applications? If you not here is what you need to know about HTA: HTA files look very similar to HTML files but when you save them you need to give them

Do you know your <HTML> tags?

Download our HTML Cheat Sheet and use it as a reference when working on all your HTML web projects.