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).

5 HTML Codes of Practice for a Beginner

Before I start adding content to my web page I thought I best find out what codes of practices to follow when building a HTML website.

So here are

5 HTML Codes of Practice for a Beginner

HTML Code of Practice

Always Declare a Doctype

The doctype declaration should be the first thing in your HTML documents. The doctype declaration tells the browser about the XHTML standards you will be using and helps it read and render your markup correctly.

HTML Code of Practice

Use Headings Wisely

Learn to use header elements (<h1>to<h6>) to denote your HTML’s Content hierarchy. This helps to make your content more meaningful for screen-reading software and search engines, as well as other user agents.

HTML Code of Practice

Type all HTML in lower case

It is an industry-standard practice to keep your markup (coding) lower-cased. capitalizing your markup will work and will probably not affect how your web pages are rendered, but it does affect code readability.

HTML Code of Practice

Check your coding works on all Browsers

Web Browsers (Internet Explorer, Google Chrome, Firefox, Bing etc) all run HTML coding differently. You should regularly check your web pages on multiple versions of browsers to ensure they all run it correctly. Internet Explorer 6 is a browser that runs using older coding and causes web coders most issues.

HTML Code of Practice

Write Consistently Formatted Code

A cleanly written and well-indented code base shows your professionalism, as well as your consideration for the other people who might need to work on your code.

Write properly indented clean markup from the start; it will increase your work’s readability.

If you work to these codes of practise your html websites will be of a higher standard.

Codes of practice have been provided by Saqib Sarwar at SixRevisions.com

Photos attributed to Leo Reynolds