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