What is HTML?

HTML is the most basic coding used to make a web page. You just need a text editor like notepad. On IPads you can use the HTML5 Editor.

The main structure tags

To set up your web page you need three sets of structure tags (see image below): HTML, head and body. With your iPad app you’ll have these already but it’s important to understand them, The head section is not used often. The main code goes in the body section. So think snowman.. little head, big body!

Your first HTML tags

Adding a heading

<h1>This is heading 1</h1>
<h2>This is heading 2</h2>
<h3>This is heading 3</h3>

Adding a paragraph

<p>My first paragraph.</p>
<p>My second paragraph.</p>
<p>My third paragraph.</p>

Adding an image

<img src="w3schools.jpg" />

Adding an image and setting its attributes width and height.

<img src="w3schools.jpg" alt="W3Schools.com" width="104" height="53" />

Adding a hyperlink referece

<a href="https://www.w3schools.com">This is a link</a>

Try these out with W3Schools

Read this webpage to try out each of the HTML codes above.

Troubleshooting: The image won’t show!

Does it say “google” anywhere in the link? You have copied a web page link. Make sure you keep selecting the image until you find it.
Does the link have a correct image ending? Check your HTML code. Have you misspelt something? Have you missed adding quotes around the link?
Is the code perfect and the image link valid? It might be an issue with that image, try a different one.

Formatting... working with...

By now you may have a great website but may want to add a bit of colour. To do this you need to use a style, Styles are special codes that are added into your existing HTML tags.

Click here for a useful list of valid HTML colors.

Changing the colour of your font

You can change the color of your font by adding the style tag inside one of your HTML tags.

Changing the background colour

You can change the background colour of your whole web page by changing your beginning tag to the following: Find out more here. Note: you need the American spelling of colour: "color".

Adding lists

There are two ways to add lists you can have a numbered list or a bullet point list, All lists use the tag <li> which stands for list item.

Numbered lists are organised.
For example you may want to give a set of instructions.
Numbered lists use the tag on which stands for ordered list.

Bullet point lists are used for items which don’t have a particular order.
For example you may want to give a set of do’s and don’ts.
Bullet point lists use the tag ul which stands for unordered list,

Find out more here.

Advanced: Tables... adding structure to your web pages

So far you have been able to add text and images one below the other. What if you want to add an item beside something else as I have on this web page? You’ll need to use table tags. Tables have a beginning and end table tag. Inside you separate the tables into rows, then you separate each row into cells. The best way to do this is to play around with existing code. Find out more here.

Note: you won’t see your table borders unless you set the border to anything but 1. Find out more about borders here.

Advanced: Forms... getting information from your user

To add a form is fairly easy. Find out more here, Unfortunately you won’t be able to do too much with the information as you would need to set up a server connection, But they give you some idea of how this work and look great.

Advanced: CSS... creating style for whole web pages or websites.

CSS can be included with an HTML tag as we have seen. But that only changes the one tag. You can create CSS which affects all tags of a particular type e.g. all paragraphs are blue. To do this you type the style at the top of your page in the head section, Find out more here.

You can also create totally separate files called style sheets. So one style sheet can be linked to many web pages so that they all have the same formatting. Find out more here.

Creating web pages using HTML