Getting to the points of your HTML web page

Text makes up the majority of most web page’s content but large chunks of text can make the average user reluctant to read the whole article as they want to receive their information in short sharp pieces. If you do have a lot of text content a great way to break it up is by using bullet points or numbers list.

Bullet Point List

To start a bullet points list the tag used is <ul>. This indents the position where the bullet point begins but doesn’t display the bullet point. This is done with the tag <li>, this tells the web browser when a bullet point should be inserted. Onces <ul> is in place insert the text that you want positioned next to your bullet point. When you have finished close the tag with </li>, that will finish your first bullet point.

Continue to insert as many bullet points as you want by adding additional <li> tags underneath but remember to close each one. Once you have finished all your bullet points close the list with </ul> which is the closing tag for the original opening tag <ul>.

<ul>

<li>Bullet Point</li>

<li>Bullet Point 2</li>

</ul>

Numbered Points List

If you want a numbered list instead of a bullet point list, you copy the same process but instead of using <ul> you will replace it with the <ol> tag looking like:

<ol>

<li>Numbered Point 1</li>

<li>Numbered Point 2</li>

</ol>

The Image below shows how this is done within the coding.

Click to enlarge

Drawing a line under your HTML web page content

The <br> tag is a great way to separate content but another good way is by simply drawing a line across the width of your page to divide sections up. This is simple, just like the <br> tag this tag is a standalone and doesn’t need an end tag.  To insert this line put the <hr> tag between the content you want it to appear and its done.

The image below shows an example of this.

<br>eaking a HTML web page

So you can now group sections of text in paragraphs but what if you just want to have two different sentences on two different lines.

In a word document you would simply press the enter key but in the last post “introducing p, b and i to your list of html tags” you can see that clear space in html coding does nothing once opened in an internet browser.

Thats where the <br> tag comes in, it stands for line break and does exactly that, it breaks portions of text up and moves them onto different lines. This is a standalone piece of code meaning there is no end tag (so you dont need to put </br> ). You can also use it multiple times in a row to create greater space between content.

The screen shot below demonstrates the use of this. In green you can see it used to break a line of text putting it on two separate lines. Where in red it has been used multiple times to create even more space between text.

Click image to enlarge

Introducing p, b and i to your list of HTML tags

So, by now you should be able to;

• open, format and save a page capable of containing HTML coding
• create the basic format for starting a HTML web page, recognise the tags used and understand what they do
• insert contents into that web page 
• open your web page in any internet browser to check your html coding is working
• Insert titles into the body of your web page using a different format from the default setting.

Now to introduce three new tags to your HTML web page

<p>, <b> and <i>.

Lets start with the <p> tag. The <p> tag is used in the body of the page and stands for paragraph. It groups sections of text together like a paragraph seen in a book. If you were to write a chunk of text into the body of your coding, without being wrapped with the <p> tags, it would just come out in a continuous section like seen circled in red below even if its spaced out in the coding.  Paragraphs are a great way to split up the chunks of text making it easier on the eye for user. Even with the <p> tags text will remain in a continuous line even if spaced out in your code (demonstrated circled in green) but each <p> container tags will be spaced apart.

Click to enlarge

Now introducing <b> and <i>. 

<b> formats the display of the text between it and its closing tag </b> in bold.

<i> formats all text between it and its closing tag </i> in italics.

These can either be used separately on sections of text or working together making text both bold and italic. When you do this you should open and close the tags in the reverse order. e.g. If you open <b> first the <i> you should close </i> then </b> to up keep a good code of practice.

This is illustrated in the parts circled in orange above.

So now you’ve meet <p>, <b> and <i> play around with them to make sure you understand how to use them.

Making your web page titles stand out from the rest of your HTML

Every web page needs a title

With many having multiple sub titles

All varying in different sizes

Web pages contain lots of information and it is important that users are able to find this information with ease. Titles and sub titles are a great way of doing this, a good title will provide users with an accurate insight into what the accompanying content is about.

A good website that demonstrates this is the BBC’s home page that is pictured below. Its use of titles tells you clearly what the content is about with sub titles offering additional links to other relevant content. The main titles are in a large font to gain the focus of the user with secondary titles reduced in size but still more prominent than their standard text.

BBC Home page - Great example of the use of different sized headings

When adding a title to your HTML coding it is positioned in the body of the text (between the body tags) and they can be 6 different pre-set sizes.

 The tag for a title is “h” followed by a number between 1-6. The different numbers are what gives the title’s text its different size compared to the main content.

Here is a picture that shows all the different title tags, next to their corresponding sizes. As you can see these tags also require a closing tag (</).

Now go and try these tags out on your HTML web page, play around with the sizes and see which you prefer.

Adding content to your HTML web page and viewing it in a browser

Now that you have the basic HTML layout for your web page you can start adding content to it.

Lets start with the header section.

1a

Between the title tags enter the title you want displayed along the top of your Internet browser and the tab it is located in.

Your text should be positioned in the same place as the text “CyberCinderblocks First Web Page” between the two title tags.(Image 1a circled in RED)

Doing this heads your browser and names the tab your webpage is located in. (Illustrated in image 2a, circled in RED).

Now lets add some content to the page by adding some text between the body tags. It doesn’t have to be anything long as I’m sure you’ll have changed it before we have finished our web page. In both 1a and 2a these are shown circled in Green.

2a

So now you have done this for yourself, how do you view it as a web page?

First you need to save the work you’ve done so far. I renamed my file to allow me to use the basic layout again without having to type it out from scratch, so like before I went to “Save As” → renamed the file (adding .html to the end of the file name) → clicked “Save” and choose “Use .html“. You don’t have to rename it, you can just choose to save over the file.

To check your coding you need to open it in an Internet browser. Because you have saved the file as html all you have to do is open the file as you would any other and it should open up in your default browser.  If you look at image 3a, you can see that the file icon for CyberCinderblocks.html (circled in RED) is of google chrome (my default browser).

You may be be wondering, “if my file opens in a browser as default, how do I open it to add additional code”,  that’s easy as well, all you do is right click the file → Open With→TextEdit(or Notepad).

To check your work as your going along, all you have to do is save the coding in TextEdit(or Notepad)  and refresh your already opened browser (you don’t need to close TextEdit). This is done by clicking the refresh button on the browser (usually located to the left of the address bar) or by pressing cmd+R (Mac) or F5 (Windows).

The Project

It’s time to get started.

I’ve got myself a copy of Creating a Website; the missing manual by Matthew MacDonald and will be using it as my main resource whilst building my website. I will be referring to it in posts but only the bits that are relevant to me so if you feel it has been insightful it may be worth getting yourself a copy to expand on the areas that would help you.

Now before I jump into building my first ever website I have spent some time deciding what type of site I want to create. MacDonald lists multiple types of websites and I have chosen to make a website dedicated to hosting my personal résumé as it will help with employment in the future whilst demonstrating my ability to use and understand HTML. This type of site will host a wide variety of information about myself such as employment history, education and professional experience, whilst being able to provide more information than a paper copy as it will contain multimedia features and direct hyperlinks to relevant information while the visual display of the site can be customised to show some of my personality.

It will be like downloading my details onto the website. If only it could be done like tron.