Facebook Twitter Gplus Pinterest LinkedIn Google Maps E-mail
magnify
magnify

No tweets to display

formats

Understanding the basic HTML building blocks

Understanding the basic HTML Building blocks

Understanding the basic HTML Building blocks

This guide extends the guide ‘making basic textual edits’, which enables website owners to make basic changes to their website.

If you have followed the steps in the previous guide, you should have a copy of all of your website files, in a folder on your local computer. Typical files include:

  • HTML files – There will be one file for each page on your website, they contain the textual content, links and structual information about the page. You can recognise these by the file extensions [.htm, .html, or .php]
  • Image files – These will be stored in a folder called ‘img’ or ‘images’. Typical file extensions are [.jpg, .png or .gif].
  • Style Sheet files –  These files describe how the page should be styled (i.e. background colours, fonts etc). They have a [.css] file extension.
  • Javascript files – Not all sites will have these files. They dictate how certain events should be handled. In performing basic edits, you should not need to edit these files.

In this guide we are going to look specifically at the contents of your HTML files. Therefore, you should select the file you are interested in and open it up, using a text editor (we recommend notepad).

HTML files contain a collection of ‘tags’. A tag begins with the symbol ‘<’ and finishes with ‘>’, in general, any tag that is ‘opened’ must be closed at a later point, a closing tag is begins with a forward slash. In between these tags, is the content to which it is describing.

To illustrate this, every HTML file begins with an opening <html> tag, and finishes with a </html>.

Common tags to look out for in a document are:

Head Tags (<head></head>)

General page information is stored between these tags. For example, title, description, keywords. This is also where any style sheets or javascript files are linked to for the page.

Body Tags (<body></body>)

This is where the main content that will be displayed in the browser is located.

Nav Tags (<nav></nav>)

This is where the main navigation information is located. A standard navigation menu will be an unordered list of anchor links (see below).

Article (<article></article>)

This is where the textual content for the pages is located (i.e. headings and paragraphs).

Headings (<h1></h1>, <h2></h2> etc)

As the name describes, these tags are used to identify the headings for a page. You should use a H1 for the most important heading, H2 for lesser section heading, H3, H4, H5 in respective order as they are required.

Paragraph (<p></p>)

The paragraph tag comprises the bulk of the article. You should place these tags around each block of text to form paragraphs.

Unordered Lists (<ul><li>List Item One</li><li> List Item Two</li></ul>)

An unordered list generally denotes a bulleted list. Add additional <li></li> tags to add extra items to the list. These lists are often combined with anchor links (see below) to form the navigation menus (which are then stored within the NAV tags).

Anchor Links (<a href=’destination-page.htm’>MY LINK</a>)

Anchor links form the basis of the navigation for the whole of the website. By using a combination of these links throughout your sites webpages, you can allow the visitor to navigate between all the pages on your site. In the example above, you can replace ‘destination-page.htm’ with any other file to change where the user is taken. The ‘MY LINK’ text is what is shown to the user (i.e. what he clicks on).

Image Tags (<img src=”img/your-image.jpg” alt=”a text description” />)

Image tags are crucial to the visual appeal of your site. The image tag identifies which image to include using the source attribute (i.e. src=’img/your-image.jpg’). Notice the image is located in the ‘img’ folder. The alt attribute describes to non-visual browsers what the image is about (the image tag is also special because it is ‘self closing’ notice the trailing slash at the end of the tag).

Now you have a rough idea of what the tags mean, try adding some extra ones to a page!

Try the following:

Add a heading and paragraph.

1)      Locate the opening <article> tag within the page. Close to this, you should see the main <h1> header tag followed by several <p> paragraph tags.

2)      Try adding an additional <h2> header (remember to close with a </h2>) and an extra paragraph.

3)      Save the file and upload to the webserver.

4)      Refresh the page to see the change.

Add an extra link to the page navigation.

1)      Locate the opening <nav> tag. You should see an unordered list <ul>, with several <li></li> list elements, that each contain an anchor link <a href=’’>link</a>

2)      Try adding an extra link

3)      Save the file and upload to webserver.

4)      Refresh the page to see change.

Add an image.

1)      Upload ‘your-new-image.jpg’ to the ‘img’ folder on the webserver.

2)      Navigate to the <article> area of the HTML file.

3)      Add an image tag with the src=”img/your-new-image.jpg”.

4)      Save file and upload to web server.

5)      Refresh the page to see change.

Hopefully you are now a little more confident at making changes to your websites pages. Remember, if you make a mistake, copy the file you have been working on from the BACKUP folder and replace it over the one you have been working on.

This article has concentrated on changing the structure and content of your webpages. We strongly recommend that you read our article on ‘Understanding the basic elements of a CSS Style sheet’. Which will enable you to change how all the above information is displayed on the web browser (i.e. background colours, margins, fonts etc).

 
 Share on Facebook Share on Twitter Share on Reddit Share on LinkedIn
1 Comment  comments 
formats

Making basic textual edits to your static website

Making basic textual edits to your website

Making basic textual edits to your website

This guide is for static website owners, who may have had their site designed and developed by a third party, but, would like to make minor amends themselves.

A website is ‘static’ if there is no underlying software running the site (i.e. content management or ecommerce site). The site comprises a collection of files that informs the users web browser how to display the website information.

These files are located in a folder on a web server (often called ‘httpdocs’, ‘www’ or ‘web’). Typical files include:

  • HTML files – There will be one file for each page on your website, they contain the textual content, links and structual information about the page. You can recognise these by the file extensions [.htm, .html, or .php]
  • Image files – These will be stored in a folder called ‘img’ or ‘images’. Typical file extensions are [.jpg, .png or .gif].
  • Style Sheet files –  These files describe how the page should be styled (i.e. background colours, fonts etc). They have a [.css] file extension.
  • Javascript files – Not all sites will have these files. They dictate how certain events should be handled. In performing basic edits, you should not need to edit these files [.js].

So, now we know what comprises a website… how do you go about editing it?

In order to edit your site, you need to download a copy of the files to your home computer. To do this, you need a piece of software called an FTP client (FTP stands for file transfer protocol). We recommend filezilla.

Go to this website: http://filezilla-project.org/download.php and download (typically green ‘sourceforge’ button for windows users).

Install the software and run the program. You should be presented with a screen similar to below:

 

Filezilla Client

Filezilla Client

Now, in order to access the files for your site, you will need to find out the ‘connection information’, from the company that built the site for you. You will need:

a)      Host

b)      Username

c)       Password

d)      Port (generally 21)

Fill these into the boxes across the top of the Fillezilla window and click ‘quick connect’. You should then see the box on the right hand side (called ‘remote site’) populate with a collection of folders. Look for a folder called ‘httpdocs’, ‘www’ or ‘web’ and double click. If all has went correctly, you should now see the a collection of files that resemble your website!

Now we have found the files, we need to download them!

First of all, you need to create a home for your website file on your home computer. Open up the file manager, navigate to where you want to store the files, and create a new folder called ‘mywebsite’.

Now, in order to download these files, go back to the filezilla window and navigate to the same location, in the left hand panel of the window (called ‘Local Site’).

You are now ready to transfer files. In order to:

  • Download – drag files from the right panel (remote) to the left panel (local).
  • Upload – drag files from the left panel (local) to the right panel (remote).

Using the advice above, download the files to your folder called ‘mywebsite’. If you then navigate to the folder using your file manager, you should see the new files in the folder.

OK, you now have a copy of the files, before you even think of touching them, TAKE A COPY! To do this, select everything in the folder, right click mouse and select copy. Go to a new folder called ‘BACKUP_mywebsite’ and paste them into it. Don’t ever edit these files, if you ever have a problem, you can then upload these files back to the server and everything will be reverted back to normal.

Now it is time to edit your files!

For the purposes of this article, we are only looking at making minor textual changes. Therefore, we need to look at the HTML files (.htm, .html or .php). To find the file you want to edit, go to your website, navigate to a page, and look at the address bar. It will look something like this:

www.mysite.com/about-us.htm

To edit this page, we need to look for the file called ‘about-us.htm’. Open this file using a text editor (we recommend notepad).

To perform a simple edit, we recommend searching (CTRL + F) for the words you want to change. Make your edit (be sure not to overwrite any HTML tags i.e. <h1>, <p> or <a>). Save the document. Then upload the individual file back to the webserver (i.e. drag file from left to right in filezilla). You should experiment with very minor changes to begin with.

And that’s it! You just made a minor textual modification to your website.

We strongly recommend that you read our article ‘Understanding the basic HTML building blocks’ for a clearer idea of the contents of the HTML file you just edited. In doing so, you should then be able to make slightly more complicated edits to your webpages.

 

 
 Share on Facebook Share on Twitter Share on Reddit Share on LinkedIn
1 Comment  comments 
formats

Preventing your website from being hacked

Prevent your website from being hacked

Prevent your website from being hacked

Preventing your website from being hacked

The last thing that any website owner wants or needs is to become the victim of a malicious hacking attempt. Hackers target computers or websites for a variety of reasons, which may include stealing client data, financial information, passwords, emails or quite simply because they like causing disruption… Read more…

 
 Share on Facebook Share on Twitter Share on Reddit Share on LinkedIn
No Comments  comments 
formats

New website – The Butterfly Way

The Butterfly Way

The Butterfly Way

We are are proud to announce the publication of a new web site “The Butterfly Way”, which we have designed and developed for the owner Deborah Chambers. Read more…

 
 Share on Facebook Share on Twitter Share on Reddit Share on LinkedIn
No Comments  comments 
formats

Developing relationships with local companies

Developing Relationships

Developing Relationships

We are looking to develop long lasting relationships with local companies that operate in areas related to but not identical to our own.

We excel in the design and development of modern stylish websites, using cutting edge web technologies, with a special focus on the Joomla Content Management System and Magento Ecommerce Engine, the largest open source systems in their respective fields. Read more…

 
 Share on Facebook Share on Twitter Share on Reddit Share on LinkedIn
No Comments  comments 
formats

Looking back on our social media experiment

Competition

Looking back on our social media experiment

A couple of months ago we decided to join the fray and get on the social media wagon as part of our social media experiment (or #socialmediaexperiment in twitter speak…)

Our approach was to concentrate on developing our twitter following through various methods, then (to save some time) link both our facebook and linkedin accounts to replicate the information (there simply wasn’t the time to do each independently). While doing this we picked up some useful bits of information which we thought we would share in this article. Read more…

 
 Share on Facebook Share on Twitter Share on Reddit Share on LinkedIn
No Comments  comments 
formats

Website speed Part One

In these modern times, with people increasingly accessing the internet on the move via their smart phones or tablet devices, it is more important than ever to ensure your website is running as quickly as possible.

Not only will this improve the user experience and stop people from leaving your site in frustration, but it will also serve to boost your rankings in the search engines. Recent information suggests that google is now taking load times into consideration when determining which sites to serve in the search engine results. Read more…

 
 Share on Facebook Share on Twitter Share on Reddit Share on LinkedIn
No Comments  comments 
formats

Investment 4 Growth

Published on July 24, 2012 by in News
investment 4 growth

investment 4 growth

Investment for Growth have £250,000 to support the first 75 eligible businesses who need to develop their website! Read more…

 
 Share on Facebook Share on Twitter Share on Reddit Share on LinkedIn
No Comments  comments 
formats

Competition: Like our facebook page to win a website package

Competition

Competition

For the next 14 days we are running a competition as part of our “our little social media experiment”. To enter the competition all you need to do is simply like our facebook page and then tell us about it! Read more…

 
 Share on Facebook Share on Twitter Share on Reddit Share on LinkedIn
No Comments  comments 
formats

Competition: Win a small business website package

Published on July 2, 2012 by in News
Competition

Competition

For the next 14 days we are running a competition to promote the start of “our little social media experiment”. To enter the competition all you need to do is simply follow us on twitter @suremedia and then retweet our competition message to the rest of your followers. Read more…

 
 Share on Facebook Share on Twitter Share on Reddit Share on LinkedIn
No Comments  comments