Web Development Hub

hamburgers

Guides

A range of guides of commonly asked questions for beginners

What are HTML, CSS, JavaScript and PHP?

Here is a short decription of each to help those understand the purpose of these, what they are capable of and why to use them.

HTML

HTML, which stands for Hypertext Markupo Language is a markup language which structures all websites. The content such as text and images are included in the HTML file. HTML is designed to make webpages and web applications but is slowly becoming used more and more for others tasks. Typically you would style a website with a CSS file separately so a stand alone HTML file usually will look very basic when rendered by the browser. HTML uses tags to allow the browser to understand what it needs to do. For example text typically belongs inside a paragrapgh tag so creating text could look like

<p> This is a paragraph in HTML format </p> The <p> signifies it’s the start of a paragraph and when the tag includes a backslash this shows the paragraph has ended. The file extension of a HTML file is either .html or .htm, HTML5 the latest standard brought lots of new features and most websites now use HTML5, which includes more semantic tags like <header>, <nav>, <footer> to help search engines understand a sites content more.

CSS

If HTML is the structure behing the website, CSS is what is used to style the website, whether its, colours, spacings, choosing fonts or anything else for that matter. CSS It stands for Cascading Style Sheets. In previous years styling tended to found within the HTML file itself but this made the markup messy. Now you will typically see the styling within its stand alone .css file. This simply requires an link within the HTML file to allow the browser to know where to look for the styling.

The typical CSS syntax looks like this.

p {
margin-top:10px;
font-size:14px;
font-family:calibri;
}

The p shows what part of the HTML is being targeted (known as the selector). In this case this means all <p> tags. Everything between is how it should be style for example the font size needs to be 14px. The left hand side is known as the property. I.e margin top and after the colon it is the value for that particular property.

A CSS file has the file extension .css.

The latest standard of CSS is CSS3 which came with lots of new properties to allow developers to styling aspects of their page with even more control

Javascript

JavaScript is the third of the essential technologies for developing websites. JavaScript should not be confused with Java as it is not related in any sense. JavaScript tends to bring intelligence to a site, whether it changes colour of text when clicked or calculating the price of a basket full of items.

Here is an example of some Javascript code.

var myText = document.getElementById(‘#text’);
myText.onclick = function() { myText.style.color = “blue” }

Here is a short explanation of the code provided. It is grabbing the tag with an ID of ‘text’ from the HTML file and then saving this into a variable. When this is clicked it then targets the text and changes the color of the text to blue. As you can imagine the possibilities are endless and just about anything you would need for a website can be done with Javascript. Unlike PHP, all broswers come compatiable with Javascript so there is no need for users to download anything to get the effect of Javascript.

Javascript files have a file entension of .js.

Javascript can be written in the HTML file but typically developers set aside a separate file and just like CSS you can simply link to the JS file from within the HTML file. There are plenty of Javascript libraries out there now, probably the most popular one being jQuery. They all have different benefits and purposes but generally libraries allow to code certain things most easily and quicker.

What is Front-End and Back-End Devlopment?

Front End Development

Front end development is typically everything the user can visibility see in the foreground of a website. This means the content included in HTML files like images, the styles provided from the CSS file and the potentially interaction JavaScript can be provide. Often web developers specialise in either Front- End or Back-End Development. Front end developers would focus highly on the design as well as the User Experience and the User Interface too. Plenty of websites require no need of Back-End development. The kind of website that doesn’t require an interaction with a database would normally not require Back-End development although there is far more to it than just dealing with databases.

Back End Development

Back-End Development which is also known as server side development allow us to run tasks and operations on the server side. A user would not be able to see any of the Back-End aspects of the website and it all runs in the background behind the scene. Back-End Developers will often dealing with file management, security, writing and reading from databases, processing online payments and much much more. Developers working on the back-end will generally work on more dynamic sites rather than basic static websites. Websites like e-commerce website or blogs require writing and reading information from databases and are dynamic website meaning there is a lot of background work included in these. Back end developers would tend to use the programming languages .net and more commonly PHP.

How to Set Up a File?

It is really easy to set up a basic HTML file. I have provided an example to the bare bones of the HTML file.

<html>
<head>
<title> Title of Webstie </title>
</head>
<body>
</body>
</html>

This can be copied into your own project as this is how all HTML projects are started. Everything is surrounded by the HTML tags to tell the browser the file is a HTML file. The ‘head’ tags provides a location to put the title of the webpage along with other possible information like meta tags for the sake of including key words or linking to JS/CSS files. Then everything a user would actually see on a website would be included within the body of the website.

<p style='color:blue'> This is my first website </p>

By adding this tag in between the body, then saving the file with a HTML file, we can then open it in a browser and this will produce our work with the text included.

This is how to set up a file to then allow us to practice more advance things.

What image format is the best for websites?

Typically there are three main file formats to choose from for websites and they all come with Pros and cons.

JPEG

JPEG images are full-color images which means at least 24bits of memory are used for each pixel in the image. The extension for this format is .jpg or sometimes .jpeg. JPEGS are lossy which means they keep color information but can compress the size of the file. It does this by carefully selecting un-needed data. However this can result in a degrade of image quality. JPEGS are ideal when using Photographs as they keep all the color information and because of this JPEGS are also ideal for those images with a high range of color. Because it can discard data it can also be useful when you want to make the file as small as possible. This can also help load times for websites. Unlike GIFS, JPEGS cannot be animated nor do they support transparency which is often important for websites. If your images benefits from having sharp edges I wouldn’t recommend using JPEG.

GIFS

GIF which stands for Graphics Interchange Format is a file format used to display indexed color graphics and images for the internet. Because of this it means GIFS only provide a range of 256 colors. This means GIFS are best for images with simple illustrations like logos but certainly not recommended for colorful photographs. A great aspect of GIFS is that it supports transparency and can be animated without the need of using a video. As well as being useful for logos and the likes it is probably the ideal format for simple line drawings or clipart. However as previously stated stay away from GIFS for detailed photograph or images with a high range of colors. Due to reasons previously stated the file size of GIFS can potentially be larger than other formats which may have an impact on performance for a website.

PNG

PNG which stands for Portable Network Graphics, supports transparency like GIF does, but unlike GIFS also has a full range of color depths. A reason why PNG is a good option for websites is that they can also hold a short text description of the image’s content, which allows Internet search engines to search for images based on these embedded text descriptions. Pros include the fact these files are lossless and tend to have smaller file sizes whereas they cannot be animated nor does every web browser support this format.

Conclusion

So the real answer is they all have benefits and drawbacks so it’s actually best to think of the best format for each individual situation. If I had to pick one I would probably opt for PNG but of course this isn’t the best choice in every situation.

Understanding Web Servers

Being able to open your HTML files in a browser and seeing what you have created but obviously by the time you want to put a website on the World Wide Web this will have to be put on a web server. A web server is similar to your own computer except it is constantly turned on which allows anyone (not just yourself) to access your website.

Companies like Go Daddy and Host Gator can provide a place to host your website. Once this has been registered it would just be a case of uploading the website’s files to the server. The companies that provide server space also tend to offer domains too so it can all be done through one site. Web servers and domain names tend to have an annual cost which can vary. You will be able to find free hosting services but these often have drawbacks, uptime issues and lower performance qualities.

Once registered for a web server you will be given a link to the servers Control Panel where you can upload your files, see your websites statistics, a chance to backup content, access to SQL/PHP databases should you require them, your email for you server and security options.

What is FTP and how do i use it?

FTP is essential for getting your files on your web server so everyone can access it. It stands for File Transfer Protocol. Your web server will FTP software within the control panel to allow you to upload. Usually it will allow to browse for your files and it’s just a case of choosing what needs to be uploaded and then selecting upload. Some of the better web servers provide a drag and drop function to allow this process to be even easier and quicker.

There is also software like File Zilla, you can download to allow you to do this without the need of having to go on your server’s website. This requires a little bit of setting up, usually providing a username, password and an FTP connection ID but once this is entered once it will retain these credentials.

Dreamweaver the leading code editing software has this inbuilt which makes this exceptionally easy. You can create your code and all within the same window with once click of a button it will all be uploaded for you.

What are JavaScript Libraries?

In basic terms is a library that is pre-written which allows others to develop JavaScript more easily and more quickly. Certain tasks like AJAX for example can be very long winded and some libraries make this exceptionally easy. jQuery is possibly the most popular library and makes light work of nearly everything. They are all free and available to anyone should they need it. Another example is jQuery Mobile which allows development for mobiles much easier with pre-set styles and widgets to save time and effort.

Here you can see an example of how much easier this makes it.

Using a library is done by downloading the minified version of the library or simply linking to a URL where the library information is stored. Before any code is interpreted it reads the libraries file as this allows the browser to understand the libraries code. The purpose of many libraries are to allow easier integrations between other technologies like CSS, PHP and Java.

What is SEO?

SEO is Search Engine Optimization and is based on your performance in search engines. Understanding all aspects of SEO is very difficult as the likes of Google rank websites on very complicated algorithms to make sure the most relevant and best websites are at the top for the search of any keyword.

Once a website is on a server and the URL is submitted to a search engine it can be a long and challenging process to get to the top of the search engine and make the search engine take notice of your site. As mentioned before your websites SEO performance is based on too many factors to discuss but we can discuss the main aspects which could give you a greater chance in any given search engine.

Backlinks

You can think of backlinks as referrals. That’s how the search engine see them. The more backlinks to your website from others the better you will do. It’s important to understand that backlinks will have vary levels of SEO power depending on the quality of the backlinks. Backlinks on a website with a higher page rank, trust and quality will be much more powerful.

Rich amount of Content

Search engines much prefer websites with lots of content for users to view and read. This typically means those websites are more reputable so having lots of text and images is very good. The more text you have the most words you will rank for also. Search engines will see websites with little content as insignificant.

Regularly Updated

Search engines like websites that are updated with new content on a regular basis. If a website has been left some a substantial period of time with no change engines will lower your ranking status. There are plenty of websites that are just left with no care to maintain it anymore, making no changes will make search engines think this website is no longer important.

Social Interactions

Search engines have started to take social interactions into account. Those with more shares and likes will perform better when searched for. This can come from a range of social media sites like Facebook, Twitter or Google+. It is now strongly recommended to make a page on the major social media sites to improve your chances.

User Experience

One of the most important aspects for users viewing a website is the quality of the user experience. It is therefore, the likes of Google will want those websites that give a great experience to users at the top of the searches. Websites like http://www.nibbler.com will test you websites user experience so you can improve to help your sites chances.

Understanding Browsers

On a very basic scale browsers interpret the code that has been written. They understand HTML, CSS and has JavaScript in-built so JavaScript code can be understood to. Many browsers can interpret the same code differently and it is always important to realise this when making a site. I would recommend to test your site in all major browsers. The major browsers being Safari, Chrome, Firefox, Internet Explorer (IE) and Opera.

For example some browsers will naturally give a heading tag some padding and margin whereas others won’t at all meaning your site could render differently even with the same code. A good workaround for site is to apply zero padding and margin to everything on the webpage like this.

* {
padding:0;
margin:0;
}

This sets it to zero by default but then if you wanted to give some margin to something on page you can continue in the usual way. It is also important to understand that when new code methods come out some are quicker to understand new code then others. For example all browsers now understand the CSS property ‘border-radius’ however when this was first introduced some websites could understand this and other cannot. A typical way around this is to use prefixes to help all the browsers understand new properties. This often looks something like this

#myDiv {
-webkit-border-radius: 5px;
-moz-border-radius: 5px;
border-radius: 5px;
}

The prefix –moz- is used for Mozila Firefox and –webkit- is used for Chrome and Opera. Where no prefix is used this is for the benefit of the browsers where the property is already fully understood.