s11: html tags
TRANSCRIPT
-
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