See how far you’ve learn by doing some of these examples, practice some more to know your level of creativity. By the way did you manage to make your own web page? if you didn’t this is a sample on how to begin.
<html>
<head>
<title>Welcome</title>
</head>
<body>
<h1>Hello</h1>
<p> This is your first text, try writing some more </p>
<h2> Hello Again </h2>
<p> This is another write up, and i think you're getting the hang of it</p>
</body>
</html>
Now let’s begin with the tutorial, first of all, make sure you have all the necessary tools for you to begin, if you forgot check the Intro to HTML page for reference. let’s start shall we?
Example 1:
We’ll learn some basic elements used in HTML, just follow through to understand what the elements are used for in an HTML document.
<big>This makes the text big and bold</big>
It will look like this on a browser
This makes the text big and bold
You can as well make the text smaller
Example 2:
<small>This makes the text smaller</small>
It will look like this on a browser
This makes the text smaller
Can i use Several Elements at the same time?
Yes off course you can, just make sure you don’t get it mixed up, although in HTML, it tries to correct it for you and do what you intended, but it’s best practice to thoroughly examine elements that are mixed to avoid unnecessary error or undesired result.
Example 3:
Mixing of elements should be written like this:
<strong><i>This makes the text bold with italics</i></strong>
And Not like this:
<strong><i>This makes the text bold with italics</strong></i>
The difference between the two steps is that, in the first step, we closed the tag we first opened last. in this way we avoid confusing ourselves and the browser. the second step is wrong, we closed the tag we opened second last. In that step if we coded so many elements we can get confused along the way.
More on Elements!
There are elements which are opened and closed in the same tags such as <br /> which forces the text to jump into the next line causing a line break. These elements are usually empty and are not connected to any specific text but they perform specific functions when used. Look at Block and In-line Elements for comparison.
Example 4:
This is Some Text <br /> this is another text which am writing.
It will look like this on a browser
This is Some Text
this is another text which am writing.
As you can see, the <br /> element forces the text to jump into the next line. this element can be used when defining spaces in your text or even when wanting an object (i.e images) to move or display in the next space below it. Another element which does have a similar tag property would be the <hr /> element (“hr – horizontal rule”). which makes a horizontal line, which can be used to demarcate a level of text or object from a another.
Example 5:
<hr />It will look like this on a browser
Elements that needs both opening and closing tag – as most elements do would be <ul> ,<li> & <ol>
<ul> – is short for “unordered list” and inserts bullet for each list item. <ol> – is short for “ordered list” and inserts number for each list item. <li> – is short for “list item” and it lists items in an ordered way. confused? To make this sound less confusing let’s see some examples.
Example 6:
<ul>
<li> Apple</li>
<li> Oranges</li>
<li> Pineapple</li>
</ul>It will look like this on a browser
- Apple
- Oranges
- Pineapple
Example 7:
<ol>
<li> Apple</li>
<li> Oranges</li>
<li> Pineapple</li>
</ol>It will look like this on a browser
- Apple
- Oranges
- Pineapple
That’s all Folks!
Try practicing all the new elements you have learn today and see how far you’ve gone in your programming skills.
<big> Making text big and bold</big>
<small> Making text smaller</small>
<strong> <i> Mixing elements</i></strong>
<br /> Making break line or skipping to next line.
<hr /> Making horizontal lines.
<ul> Unordered Listing using bullets </ul>
<ol> Ordered Listing using numbers</ol>
<li> Listing items</li>
| Back | Main: HTML Programming | Previous Lesson: Elements and Tags | Next Lesson: Attributes |
