8/4/2019 S11: HTML Tags

1/19

G053 Unit 14

Session 11

8/4/2019 S11: HTML Tags

2/19

Know what HTML is

Understand the typical layout for HTML

Knowledge of basic HTML tags Create your first HTML document

Understand the different types of

hyperlinks Understand how to code tables

Implement

8/4/2019 S11: HTML Tags

3/19

HTML stands for Hypertext Mark-upLanguage.

It was invented in 1990 by Tim Burners-Lee a scientist who worked for CERN inSwitzerland.

HTML uses tags to instruct browsers onhow to format and display the informationon a web page.

The main advantage of HTML is that youcan link between pages.

Implement

8/4/2019 S11: HTML Tags

4/19

HTML tags are English words which act asinstructions on how the content should beformatted.

Commands must be enclosed within forthem to be recognised and ended with .

The content you wish to format goes between

them. My Homepage will make text appearbold. E.g.

My Homepage

Implement

8/4/2019 S11: HTML Tags

5/19

HTML documents all need the followingstructure:

Place title of page here it will be displayed in the top

blue bar or browser.

This is where the main content of the site will appear

Implement

8/4/2019 S11: HTML Tags

6/19

To use an image on your page it needs tobe saved as a JPEG, GIF or PNG file in afolder called images (to keep things tidy).

You then use the to insert it intothe page. (note the image tag is one of afew which does not have a separate

closing tag)

e.g

Implement

8/4/2019 S11: HTML Tags

7/19

To create a web page you need to type thecontent and the tags into a text editor suchas notepad.

You must remember to save thedocuments with the .htm or .htmlextension.

E.g. homepage.html

Any graphics you wish to include should besaved in the SAME folder as the webpage

or in a separate folder called images.

Implement

8/4/2019 S11: HTML Tags

8/19

Your teacher will provide you with a listingof tags you will be using.

These will be enough to complete your

assignment matching the Mark Criteriawhich asks you to recognise and explainbasic tags.

Implement

8/4/2019 S11: HTML Tags

9/19

Using basic HTML code, create your ownsimple homepage.

Its should include text formatting andpictures taken off the internet.

Implement

8/4/2019 S11: HTML Tags

10/19

Hyperlinks are one of the reasons whyHTML is so useful,

A hyperlink can be defined as:

Underlined text within an electronic document.When clicked with the mouse, the viewer willbe taken to another place.

A graphic or part of a graphic that contains alink to another location.

The process of creating a link that will take theviewer to another location.

Implement

8/4/2019 S11: HTML Tags

11/19

There are three main types of Hyperlink withinHTML,

Links to different parts of a page,

Links to different pages in a website, Links to other websites external from your own.

The coding is very similar for each type of link,

Each type can be applied to either text or agraphic.

Implement

Click Here

Textual Hyperlink Graphical Hyperlink

8/4/2019 S11: HTML Tags

12/19

To create a link to another web page within your siteuse the following code:

My Link

e.g. My Hobbies

To create a link to a website external to your site usethe following code: My Link

e.g. BBC Website

To use an image as a link use the tag

between the link tags,e.g.

Implement

8/4/2019 S11: HTML Tags

13/19

Unless your are using an image on yourwebsite, text and backgrounds need to beformatted using the or tag. Note: color is spelt in theAmerican way

HTML recognises 16 basic colours by

entering their name:

Implement

BlackNavyGreen

Maroon

GrayBlueLime

Red

SilverTealOlive

Purple

WhiteAquaYellow

Fuchsia

8/4/2019 S11: HTML Tags

14/19

HTML supports about 16 million colours, Advanced colours use Hexadecimal to record

the amount of red, green and blue to be used,

Hexadecimal is a numbering system to base16 and is difficult luckily there are manyresources on the internet to help,

Once you have found the colour code, enter it

into the html instead of the name.

E.g. 33CC99 Is a green to make it the backgroundcolour

Implement

8/4/2019 S11: HTML Tags

15/19

Expand your website to include morecolours include at least two HEX colours.

Create a second page in your websitewhich gives details about your hobbies.

Link the two pages together.

Create links on your pages to externalsites which you often visit include at leastone hyperlink which has an image.

Implement

8/4/2019 S11: HTML Tags

16/19

Tables should not be used to aid layout butto store tabular data.

- starts and finishes a new table

- starts and finishes a new table row

- starts and finishes a new table cell.

Implement

Artist

Album

Arctic MonkeysSuck it and see

Artist Album

Arctic Monkeys Suck it and see

8/4/2019 S11: HTML Tags

17/19

Include a border=x statement in the tag to show the lines around thecells.

Include a width=x% statement in the tag to set the %age of the screenthe table should use.

Implement

Artist

Album

Arctic MonkeysSuck it and see

8/4/2019 S11: HTML Tags

18/19

Incorporate a table into your website on a topicof your choice.

Implement

8/4/2019 S11: HTML Tags

19/19

Write a short report explaining for following tags you haveused:

Anchor tag (used for hyperlinks) Image tag

Table tags , ,

Font tag

Implement