Basic HTML - Part 2
There are lots of additional attributes you can add to the codes we've used in the previous tutorial to liven a boring black and white page.
Backgrounds
Open test.html again in your editor and find the <body> tag. We can change the background colour to any colour we want. Let's try black:
<body bgcolor="black">
Save and view - is the background all black? You can use more than just the name of a colour - like hex codes and RGB percentage, but for simple terms, we will stick to just the colour names. As you have noticed, I am using the word color in the code and using colour when I explain. You can use either spelling of the word and it will still work.
You can also add an image to the background! By default, your image will keep repeating or tiling, however you can fix it up by using CSS (you will find tutorials for this as well - however I advise you to learn HTML first). Here's what you can put:
<body bgcolor="white" background="image.gif">
In the above code, I have added background="image.gif" to the body tag. Replace image.gif with the URL/address to your image that is either in the same folder/server as test.html, in a subfolder on your server or hosted elsewhere in the Internet.
Customize Fonts
Alright, so you've played around with your background a little bit. Change it back to a black background for this part. I know you are wondering how to change the default black font or make it bigger … maybe change the font face? Here is what we will do. Copy and paste this code inside the body of your document (under the shopping link is fine):
<font size="4" color="white" face="arial"> TEXT HERE </font>
- Change size of the text to any number depending on how big or small you want. It could be a positive integer (0,1,2,3,4…etc), or use the + or - signs in front of the number to make the defualt size bigger or smaller (+1, +2, +3, -1, -2, -3…etc).
- The face can be set to any type of font you choose - however keep in mind that some computers might not have that exact font and will display the default font. Some fonts that can be used on most browsers are Times New Roman, Tahoma, Arial and Verdana.
- Again, color can change to any you choose as well, but this example is white so you can see the text appear on a black background.
- Lastly, change TEXT HERE with your own words for full customization!
There are a lot of different things you can do with text to make it stand out - like bold, italics, and underline. Here's how you can add them:
<b>TEXT</b> - makes bold text
<i>TEXT</i> - makes italicized text
<u>TEXT</u> - makes underlined text
<s>TEXT</s> - makes strikethrough text
<sup>TEXT</sup> - makes superscript text
<sub>TEXT</sub> - makes subscript text
Note that all these tags have an opening and closing. You must make sure to close a tag or it will affect most of the page until it finds a closing tag or until it reaches the end of your codes. You can use a combination of these tags - like bold underlined. Get into the habit of opening and closing the tags in the right order:
<u><b>TEXT HERE</b></u>
Paragraph Text
Now you know how to manipulate text, we'll look at manipulating a block of text. You've already created a paragraph using <p> and </p>, now we can align the text in different ways. Text is always aligned to the left by default.
<p align="right"> … </p> - align text to the right.
<p align="center"> … </p> - align text in the center.
<p align="left"> … </p> - align text to the left.
You can also align images as well as text. In the next part of Basic HTML Series, we will cover images and linking.
Horizontal Line
Lastly, we can add dividers between blocks of text. The following code creates a horizontal rule or horizontal line:
<hr>
Similar to the line break, this tag does not need a closing pair. You can do all sorts of things to this tag like change the color, size and width by specifying the attributes within the tag:
<hr width="200" color="blue" size="3">
The first horizontal rule is the default one <hr>, and the second is what you will see if you use the code above:
Congrats! You've finished Part 2. Move onto reading Basic HTML - Part 3