WE'RE WEB DEVELOPERS IN CAPE TOWN, SOUTH AFRICA

From the Blog

If you are in a situation where you have an iFrame that you would like to have rounded corners on, but you can’t control the css of this iFrame, there is a simple solution using a div.

And to do this you simply wrap the iFrame in div tags and give the div these css properties:

<div style=”border-radius: 10px; width: 300px; overflow: hidden;”> <iframe></iframe> </div>

The border-radius should be set to whatever you want the roundness to be, and the width must be set to the width of the iFrame, else you will get only a few (if any) rounded corners. But the most important thing is the overflow: hidden, as this hides the iFrames real corners.

The idea behind it is that the div acts as a sort of frame around the iFrame, and that this frame cuts off the sharp corners.

Its as simple as that.

Don’t forget to follow us on twitter. And please comment to let us know what you think of this trick or if you have a question.

May
03
Posted by robventer at 1:51 pm

For this html lesson, we are going to go over forms and their input fields.

WHAT IS AN HTML WEB FORM

Everytime you log in to a website like Facebook, Twitter, etc. you are entering information into a form (in those examples, your username and password). This information is then processed, and it is decided whether you are allowed to log in or not. Another common use of forms is when you sign up for a newsletter using your email address.

WHAT IS THE FUNDAMENTAL PURPOSE OF AN HTML WEB FORM

A form is used to get information from people visiting your website, and send it to a script file that will process, and react to the information in a predifined way, such as storing it, or allowing someone to log in, etc.

WHERE SHOULD YOU PUT YOUR CODE

You can make a new html file and start fresh (this helps keep things organised) or you can continue adding to your webpage.html, either way is fine so long as you put the code between the <body> tags.

HOW DO FORMS WORK?

Forms can have various ways to gather information, like text fields, checkboxes, radio buttons, password fields, select lists, textareas, etc. All dependant on what kind of information you are looking for.
So all of the form’s fields go inside of your opening <form> and closing </form> tags like so:

<form>
*
input fields
*
</form>

INPUT FIELDS

Most input fields are made using the <input> tag. And then the type of input field is decided using the “type” attribute, like so:

<form>
<input type=”text” /><br />
<input type=”password” />
</form>

Which ends up looking like this:



So the type attribute type=”text” tells the web browser what the input field should look like and how it should work. In this case it would make two blocks, one showing the typed text and the other hiding it. Noticed the “/”? Like the <img> tag, <input> is its own closing tag so don’t forget to close it with a “/”.

RADIO BUTTONS

There are also radio buttons type=”radio” which require some more attributes in order to work. These are the name and value attributes. So if you wanted to give a choice between pizza or a burger it would look like this:

<form>
<input type=”radio” name=”food” value=”burger” /> Burger<br />
<input type=”radio” name=”food” value=”pizza” /> Pizza
<form>

And that would look like this:

Burger
Pizza

So the new attribute name=”food” tells the browser to give an option between those two choices, and the answer is their choice of food (the value food should be set to whatever you want the choice to apply to). And the attribute value=”burger” or value=”pizza” decides what the available choices of food are.

CHECKBOXES

Checkboxes are very similar to radio buttons, the only difference in how they work is that, people can choose multiple options instead of just one. This is what the code for a checkbox looks like:

<form>
<input type=”checkbox” name=”food” value=”burger” /> Burger<br />
<input type=”checkbox” name=”food” value=”pizza” /> Pizza
</form>

Which gives you this result:

Burger
Pizza

So as you can see all that changes is the type, and now multiple options can be selected.

SUBMIT BUTTON

The submit button is possibly the most important input type and every working form needs one. This button is what people will press when they are done filling in or selecting options from the form, and without it your form has no purpose. So you put the button anywhere you want within your <form> tags, like so:

<form>
<input type=”text” /><br />
<input type=”submit” value=”Submit!” />
</form>

Which looks like this:



So the type must be equal to submit like this: type=”submit”. And the value you can set to whatever you want people to click on, for example “Send”, “Sign Up”, etc.

THE DOWNSIDE

Unfortunately even with a submit button your form cannot send any information, anywhere until you have learnt some form of scripting language (such as PHP or ASP). Because generally what happens is you submit the form to a file written in a scripting language (PHP is considerably more easy than most and completely free), and this file will process the information and then act on it. So in the the case of a log in button, once submitted, the file would check if the username and password match, and if they do it would then allow you to access the previously locked webpage(s).

THAT’S ALL FOR FORMS AND INPUT FIELDS!

I know it must suck to be able to make all those interesting input fields, and then not be able to have the form do anything, but the knowledge gained is a necessary part of any form, and in time you’ll be able to make your forms do whatever you feel. Until then you can learn more about forms and many other things besides from www.w3schools.com. Don’t forget to follow us on twitter. And please comment below if you enjoyed this lesson or if you have a question.

Feb
20
Posted by robventer at 10:33 am

For the next lesson in html, you are going to learn how to make a list, how to make your own link and insert your own image into a page!

FIRST THINGS FIRST

Do you still have your webpage.html? If not you should check out our first html lesson.

WHERE TO PUT YOUR CODE

All of the code in this lesson should be put between the <body> and </body> tags.

HOW TO MAKE A LINK IN HTML

The most important thing when making a link is to have somewhere to link to, so first we will make a copy of our webpage.html, changing the copy’s name to otherpage.html and putting it on the desktop (or in the same folder as webpage.html).
So if I wanted to make a link to our clients page it would look like this: Clients.
Now that you’ve done that you can link from your first webpage to it’s copy, and this is done using the <a> and </a> tags:

<a href=”otherpage.html”>Click here…</a>

href=”” is called an “attribute” of the link. A link can also have other attributes other than href=””, which we’ll get to later. Now, inside these quotations href=””: is where you tell the browser where to find the webpage you want to link to, and the Click here… are the words you want to be displayed in the browser as the link text, and can be anything you like.

HOW TO INSERT AN IMAGE IN HTML

First you need an image, for the example I am going to use a screenshot of one our recent websites. You should always try not to use large images unless they are a necessary part of your website’s appearance, so for the example I will use a smaller version of my chosen image:

Now how can you do it? First thing you need is to have an image, then you need to know where it is in relation to your saved webpage.html file. So for this example I recommend you put the image file on the desktop with your webpage.html file (or in the same folder).

Now you know where your image is you can try to insert it in your webpage, this is done using the <img> tag. This is what you want your <img> tag to look like:

<img src=”myimage.jpg” />

src=”myimage.jpg” is an attribute of the <img> tag. Inside the quotation marks src=”” is where you tell the browser where to look for the image and what the name of the image it’s looking for is. This information is in relation to where the browser finds the webpage.html file which is why you put the image on the desktop (or in the same folder) with your webpage file, and the name of the image file is whatever you called your image.

Now if you’re wondering why there is a “/” inside the <img> tag, it’s because the <img> tag is it’s own closing tag and it is considered a good practice to close it with a “/”. For more on opening and closing tags read our first html lesson.

HOW TO MAKE A LIST IN HTML

What you want your list to look like:

Shopping List:

  • Apples
  • Bread
  • Butter
  • Cheese

Choose a spot between your <body> tags and type this in:

Shopping List:<ul>
<li>Apples</li>
<li>Bread</li>
<li>Butter</li>
<li>Cheese</li>
</ul>

You have now got a list on your web page! And now that you know how it’s done you can make whatever kind of list you like. Interestingly, lists are usually used to create the main navigation menus on websites – with a little styling added to make them more attractive and interactive. We’ll get to that in a future lesson.

THAT’S IT FOR THIS LESSON

You can now add a few more interesting things to your webpage, to learn more about lists, links, and images you can visit www.w3schools.com. Don’t forget to follow us on twitter . And please comment to let us know if you liked this lesson or have a question.

Sep
21
Posted by robventer at 9:34 am

Content Management Systems or CMSes are the start of a  new age for websites. If you don’t yet know what this buzzword is all about, it’s time you got familiar with it.

In the past, when you wanted a website, you would find someone who knew code to build it for you, the obvious problem being that when you needed something changed on the website, only someone who knows code could make your updates.

Enter Content Management Systems. These allow you to update your website (ie manage your content) without knowing a shred of code. If you can use Microsoft Word for text and pictures, you can use a CMS (well, that’s the theory).

So how do you get a CMS? Well you do still need a web developer – someone who knows code, but you just have to tell them you need a CMS and he’ll build one for you.

Now it’s important to get the right CMS, because some of them are quite difficult to use – which defeats the point. So to make this decision it’s necessary to understand where CMSes come from. A CMS is can be created by any programmer who knows a language called Php. But some great programmers have got together to release free CMSes for the masses. The 3 most popular ones are WordPress, Drupal, and Joomla.

I’ve written a post that explains the difference between these 3 called What is the best CMS? But in short, we recommend WordPress since it’s much faster and easier to use, and literally 1000 times more popular than the next best.

In conclusion. These days, with the help of a CMS you can do all your website updates without needing to pay a web developer. So make use of WordPress – the best CMS for fast and easy website editing.

Sep
01
Posted by robventer at 8:47 am

As mentioned in a previous article “How you can update your own website”, a CMS (Content Management System) can be installed on your website so that you can update your own website without knowing any code.

Some background info for CMSes (Content Management Systems)

All a CMS is is a lot of Php code in your website. So anyone who knows Php can use it to write a CMS for you. Some CMSes are custom-written by a developer for a client with a website, and they can cost R250,000 or R180,000, or R75,000,  (yes – for the same job. I really have no idea how these guys work out such quotes).

Now since anyone can a write a CMS in their own way, some developers have teamed up to write CMSes to share with the world, and a few of them became very popular.

What CMSes are available?

There are a few popular CMSes that are free (opensource) for anyone to download and integrate into their own website. The most used ones include WordPress, Joomla, and Drupal. Joomla was the first one (it used to be called Mambo) and once that was very popular WordPress came along. Drupal became popular more recently (although its inception was before Joomla and is still not well known.

Some problems with CMSes?

I’ll start by telling you some of the problems with these CMSes. Drupal has a very high learning curve and is chiefly used by experienced developers. Companies actually hire developers to run their Drupal website, which in my mind defeats the point, right?

Joomla is currently dying a medium paced death. The main reasons are that it is still quite difficult to learn to use, making changes to your website is not very quick, the coding is bulky and slows websites down, and it’s easy to spot a Joomla website (they use templates which all look similar). Joomla gained popularity by been the only real choice out there.

Now you will find many web designers who sell Joomla sites, and they will tell you Joomla is the only way. I’m afraid they haven’t yet put the effort into learning WordPress, and they are used to making their profit out of Joomla. But times have moved on, and they’re no longer doing what’s best for their customers.

The advantages of both Drupal and Joomla is simply that they are CMSes – meaning you can change your own content (if you take the time to learn how).

What is the best CMS?

Enter WordPress. WordPress was originally written for bloggers. A blog is nothing more than an often-updated website. And the guys who wrote WordPress wanted to give bloggers the ability to do this quickly and easily and often. It was build for speed. Speed in getting into the backend, speed in updating the page, and speed for those viewing the site. That means a being to-the-point and using lightweight code.

Now since speed is all the rage when it comes to internet users, Google Search decided to give WordPress priority, and you will notice a WordPress websites ranking in Google searches much faster than the other 2 main CMS platform. Who wouldn’t want that?

Pretty soon web developers of all types (not just bloggers) caught on and realised how much simpler web updates were with WordPress. Internet marketers too, will tell you that if you want to improve your Google rank, step one is rebuilt your site using WordPress.

WordPress is fast, wordpress is lightweight, and there’s nothing you can’t do with it. Granted if you download predesigned templates they all tend to look similar, but that’s just convention. If you hire a web developer, they will be able to build you a WordPress site looking anyway you want.

WordPress is much more popular

You shouldn’t believe me. Have a look at these stats:

Current CMS users:

Joomla: 55,700

Drupal: 59,600

WordPress: 50,000,000

That’s 1000 times more WordPress users. Wow! And get this:

In the US, 22% of websites are using WordPress. That is a huge number, and the rest of the world is somewhere in the teens right now.

In conclusion

If you have a website that you want to be able to update yourself, and if you want that site to be fast for viewers, easy to update, and to have a Google Search advantage, find a web developer who is skilled in WordPress development, and get them to turn your website into a WordPress website.

 

Aug
29
Posted by robventer at 3:17 pm

After paying to have a website built, people have never been happy paying again every time the slightest text or image change was needed.  That’s why Content Management Systems were invented.

Make your own website changes

A Content Management System (CMS) allows you to login to the backend of your website and change things without needing to know any code. Predictably, CMSes have become so popular that these days any good web developer will be able to give you a CMS website if you ask for one.

Is a CMS website easy to use?

Usually logging in to the back end and changing your text is very simple to do. Depending on the CMS you’re using, it’s just a matter of typing and saving. Changing pictures will be slightly more involved, but only because photos need to be a certain height and width to keep your website looking decent. With freedom comes responsibility, and as you may have guessed, you will also have to ability to royally mess up your website. The easiest way to do this is by uploading bad pictures that are the wrong size and shape for the intended area on your page.

So how do I get a CMS?

A CMS is simply to do with the way your website is coded. Any web developer who knows Php can create a CMS for you, but some programmers have got together to create tried and tested CMSes for the whole world to use for free. Because they are used by so many people, these open source CMSes are continually improving. The 3 most popular open source CMSes are WordPress, Drupal, and Joomla, and of the 3, WordPress is literally 1000 times more popular than the other 2. And when I say literally, I mean there are actually 1000 times more people using WordPress than the other 2. That’s because WordPress is faster, and easier to use, as well as being very versatile. It’s also favoured by Google, which means people will find you more easily just because you chose to use WordPress. In my opinion, WordPress is the way to go.

So how do you get a CMS so you can update your own website? You simply ask your web developer to install WordPress. Once he’s done that, he’ll give you a user name and password to login to the backend of your website and start making changes.

Do I need to rebuild my website from scratch?

Your web developer could go through your site and recode it according to WordPress structure, but with the amount of recoding it be just like rebuilding your current site into a WordPress template that looks exactly like your current site. So you are basically starting over. Nows a good time to decide whether to build it according to your current design or have a fresh new look.

So I have to use templates?

Templates are something of a misnomer. The moment you have a website where any 2 pages look similar, you are using a template – a page based on another page. It’s what keeps things looking tidy and professional. With WordPress, you can have your own template built by your web designer, or you can download a free one built by someone else. But at the end of the day, a template is really just a website design. You can have your own design, or find a free one that is being given away. You can also buy a design from someone you don’t know.

With a CMS, can I keep my domain name?

Some clients have asked me whether they can keep their domain name with a CMS. The answer is yes, because everything remains the same except the way your website is coded.  If you already have a website and you’d like it transformed into a CMS website. The easiest way to do this is to build the site again as a CMS, so be prepared to budget for a new website.

In conclusion

To be able to maintain your own website without knowing any code, the best option is to ask your web developer to build you a WordPress website. WordPress is a free, open source Content Management System (CMS) that has become extremely popular amongst website owners all over the world.

Aug
23
Posted by robventer at 7:56 am

I’ve been building websites for clients for years, without knowing any code. Instead I used software to design and create the websites in their entirety. Just like most of you, code was a no-go zone.

One day I was struggling with something an unmentionable piece of software was unable to do, and many people were complaining about it on the forums. Then I read a forum entry that said:

“This software does a great job of getting you 80% of the way there. If you don’t like it, stop whining and learn php.”

That day the lights came on for me. For the first time I thought it was possible. And my no-go zone became an I-can’t-wait-to-go zone. That was a while back, and every day as I dedicate some time to learning more code, I become more and more passionate about it. It has given me the control.

Believe it or not, Html and Css take no time to learn. Mastery, of course, develops over time though, and continues to improve. I soon went on to Php and WordPress theme development, both of which I’m an evangelist for today. I mean this really is where things are happening on the web. If you’re not using WordPress for any type of website, you’re missing out.

Now I need to clarify:  When I say “code” I don’t mean the heavy stuff used for programming software etc… yet! For now I’m talking about the lightweight stuff anyone can learn to gain control over their websites. These are chiefly Html, Css, Php and Javascript. From there we’ll grow and flow into the more powerful languages.

This blog is intended to encourage you to try coding. The more I learn, the more I’ll share with you. I’ll be giving away lots of free codes you can use to make things happen on your websites.

See you in the first lesson!

Aug
23

Html is super easy! You can build your first webpage in 60 seconds flat. All you need is notepad which you’ll find on your computer already.

WHAT IS HTML?

Html is a language created for use with web browsers (eg. Internet Explore & Google Chrome), the purpose of html is to tell the web browser what you want it to do, like telling the browser to put an image here and a heading there.

THE BASICS OF HTML

You need to understand how html works first.

HOW TO MAKE AN HTML DOCUMENT

Right click on your desktop, choose New > Text document and rename it to webpage.html. Now double click it and you’ll see that it opens in your web browser. That’s because you saved it as a .html document. How easy was that? That’s your first webpage, even though it’s blank. Now to edit your webpage you need to open it in notepad and not your browser. So minimize your browser and go back to your desktop. This time right-click webpage.html and choose Open With > Notepad.

WHAT ARE HTML TAGS?

example: <p>This is a paragraph</p>
An html page is meant to be interpreted by a browser, like Internet Explorer,  Firefox, or Chrome. In your html you need to describe to your browser what everything on the page is, so that the browser can display it as such. If you want something to be a paragraph, put it within paragraph tags as above. The browser will display it using its built-in rules for displaying paragraphs. You can use this technique to describe headings and other things too.

THE GOLDEN RULE OF HTML

You open a tag like this <p> and close it like this </p>. These are the “opening” and “closing” tags for paragraphs. Almost every “element” has an opening and a closing tag, for the ones without a closing tag(eg. <img> & <br>) you should put a “/” just before the closing “>”, like this: “<br />”. There are lots of tags to learn, but the golden rule of html is to always close tags in the order that you open them, like this:

<p>This is my <strong>favourite paragraph.</strong></p>

How do you think your browser will display that? You got it: “This is my favourite paragraph.” because the <strong> tags indicate that the text should be bold.

It would be wrong to type: <p>This is my <strong>favourite paragraph.</p></strong> because you are not closing the tags in the order that you opened them.

HOW TO CREATE YOUR FIRST HTML WEBPAGE

In notepad, type, don’t copy and paste, the following:

<html>
<head>
<title>A rocking first attempt</title>
</head>
<body>
<h1>Hello World</h1>
<p>Not bad for my first site, ey? You should see me in a week!</p>
</body>
</html>

Now save that and refresh your browser, or if you closed your browser, go back to your desktop and double click the file webpage.html. It should say:

Hello World
Not bad for my first site, ey? You should see me in a week!

WHAT THE VARIOUS TAGS DO

First of all notice the order in which the tags are opened and closed. The whole document is wrapped in <html> tags to tell the browser that everything within those tags is html code.

<html> tells your browser what language you are working with. Hypertext Markup Language.

<head> The head section doesn’t display anything on your screen, it houses information about the page.

<title> is most important bit of info in the head section. You’ll see it displayed right at the top of your browser tab.

<body> is home to all the content that will displayed on your screen.

<h1> is the largest of the 6 heading tags. It marks the main heading of the page. Subheadings should be marked with <h2>. You can go down to <h6> for sub, sub…. headings.

<p> is a paragraph.

THAT’S IT!

You now know how to make a webpage. To learn about all the other tags you can use, have a look at www.w3schools.com. Don’t forget to follow us on twitter to get notified of all future coding lessons. And please comment to let us know if you liked this lesson or have a question.

Click here for Html Lesson 2: Links, images and lists in html