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

Creating the foundations of a html web page

Now that I have my page ready I’m going turn it into a web page and prepare it for content.

It’s probably best to explain exactly what and how a html code works. A html code or tag is an instruction telling your computer how to display and format the content that is stored within a file. These tags are in lowercase and are positioned within the < and > symbols with many (but not all) working in pairs.

An example of this is
• <b>Words in bold</b>

you can see the tag “b” wrapped with < and >, but did you noticed that the second “b” tag had a / after the < , this is because it is a closing tag telling your computer where to stop applying that particular format.

In the Missing Manual, MacDonald describes these pairs of tags as containers. “You place some content (like text) inside the container and it applies the formatting to the text”, he also suggests that “if you think of them this way, you’ll never forget to include the end tag”.
It seems that many web experts recommend identifying the document as a html file at the top of the coding to tell the computer what type of document it is reading.

For a webpage the coding for this is <!DOCTYPE html> and is the first thing you should do.

Then you need to add the tags <html> and </html>. Apart from the document type all other information will fall between these tags with <html> and the top and </html> at the very bottom of the page.

Below <html> you need to add <head> and </head>. Between these you need to add <title> and </title>, these tags allow you to name the header portion of your page as well as individuals tabs.

Then finally <body> and </body> which will contain all of the information about the content displayed on that web page.

It should look like this.

Creating a HTML ready coding page

To begin coding you’ll need to create a page ready for HTML coding. There are slight differences for doing this if you are using difference computer systems.

I’m using a Mac so when I’m creating my coding pages I’m using TextEdit which is provided with all Macs. TextEdit’s format when you first open it won’t allow you to produce a page ready for html so you must adjust it.

To do this open up a “TextEdit” page, go to “Format” and click “Make Plain Text”, This allows you to write html without the system reading it as its normal coding.

Once you have done that go to

“Save As”

Name the document and add “.html” to the end file name and click “Save“. Depending on how up-to-date your operating system is you may be asked if you are sure you want to save as .html, select “use .html“.

On the Windows operating system you will be using their text editor, “Notepad”. Open up “Notepad”, unlike TextEdit you don’t have to change the format just Click “Save As” and add “.html” to the end of the file name. Click “Save” and there you have it.

That’s it, you’ve just created a page ready for html.

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.