Tags for setting up the structure of your web page
Opening tag |
What its used for |
<!DOCTYPE html> |
Tells the browser that you are using HTML (It doesn't have a closing tag) Placed at top. |
<html> |
A container for all tags (apart from <!DOCTYPE html>) |
<head> |
An area that contains information about the website - No actual content |
<title> |
This tag is used to display text in the tab at the top of the browser |
<body> |
Area that contains all elements that are visible to the user (element = tag and content) |
Adding comments to your code
Opening tag |
What its used for |
<!--GCSECS is the best--> |
Comments are used to explain what your code does, just in case someone else has to use/edit your code when you are on holiday in the Maldives. The best developers comment their code lots |
Tags for editing text
Opening tag |
What its used for |
<h1> |
Largest heading tag |
<h2> |
Second Largest heading tag |
<h3> |
Third largest heading tag |
<p> |
Paragraph tag used to create separate paragraphs |
<b> |
Bold tag used to make a word or sentence bold |
<i> |
Italic tag used to make a word or sentence italic |
<u> |
Underline tag used to present a word or sentence as underlined |
<mark> |
highlights a word or sentence |
<s> |
Strikethough |
<code> |
Changes the font to "code" |
<sup> |
Superscript |
<sub> |
Subscript |
<marquee> |
Allows text to scroll |
Tags to edit the background
Opening tag |
What its used for |
<body bgcolor=blue> |
No close tag needed but must be used above the </body> tag. Try different colours |
<body background = "{URL}"> |
Change your background to an image. In the speech marks, enter either a URL of an image or a saved image that you already have e.g. sun.jpg. No close tag needed but must be used above the </body> tag. |
Tags for lists
Opening tag |
What its used for |
<ol> <li> <li> |
Ordered list (OL) creates a list with each item numbered. All tags need to be closed |
<ul> <li> <li> |
Unordered list (UL) creates a list that uses bullet points. All tags need to be closed |
Tags to add images
Opening tag |
What its used for |
<img src = "car.jpg"> |
img means image. src means source (where the image is located). car.jpg is the name of your image that you have (normally saved in the same folder as your html). No close tag needed! |
<img src = "{URL}"> |
{URL} is the exact location of an image on the internet e.g. https://t4.ftcdn.net/jpg/03/36/98/37/240_F_336983767_dpzS1kFcCW7zyzCc38hru592ayaYhozB.jpg |
<img src = "car.jpg" width="10" height="10"> |
It is possible to resize an image. In this case 10 means 10 pixels. You can use both width and height or just one of them |
<img src = "car.jpg" alt="A F1 car"> |
"alt" means alternative. The code will load the image first otherwise it will show the descriptive text |
Tags for hyperlinks (links)
Opening tag |
What its used for |
<a href="https://www.gcsecs.com/">great website</a> |
The "a" means "anchor" and "href" means hypertext reference. Used to link pages within a website |
<a href="https://www.gcsecs.com/" target="_blank"> great website</a> |
Opens your link in a new tab. Used to link external websites |
<a href="https://www.gcsecs.com/html-tags.html"> <img src="smiley.gif" > </a> |
Click on an image as a link. When working with the image, make sure it is saved to your folder |
Add music to your website
Opening tag |
What its used for |
<audio controls src="music.mp3"> |
This element will place a small player on your site. Be sure to have the mp3 and your html file in the same folder otherwise the player will show but the music will NOT play. (music file must have the same name in both the file name and in your html code |
https://www.youtube.com/audiolibrary |
A location to download royalty free music |
Links to make your web page more interesting
Web site |
Reason |
Here you can generate cool looking text that can be used for titles |
|
Animated gifs |
|
https://pixabay.com/gifs/pixabay.com/gifs/ |
Animated gifs |