Category ' Web Designer'
How to Become a Web Designer
Posted by FireBubble on February 17, 2012 in Web Designer - Comments OffDo you dream of putting websites together that individuals around the world appreciate? Do you wish that your day job consisted of developing within the world of the web? It sounds like your ideal career choice would be that of a web designer!
Before jumping in headfirst and handing in your notice at your existing job to become a Web Designer though, it is important to understand that there are a few technical things you will need to know and understand. Have a look through this top five list; if your level of expertise is lacking in any one area then now is the time to get researching and practicing.
1. HTML
Chances are you’ve heard of HTML if you are interested in web design. This programming language is one of the most important things that you will need to learn as a web designer, as it will give you an insight into how websites really work.
2. CSS
CSS is another language used on the internet, this time for the purpose of styling the individual pages on your website. Without knowledge of CSS you will struggle to put together coherent, attractive and modern websites.
3. PHP & Other Web Languages
There are a whole host of web languages in existence today, from Perl to C++, Java to PHP. You don’t need to know them all to be a successful web designer, or at least not at the outset, but a knowledge of PHP will stand you in good stead for developing effective websites.
4. JavaScript
Have you ever noticed interactivity on websites? This often stems from the use of JavaScript, or Ajax (Asynchronous JavaScript and XML). You don’t need to know JavaScript to be successful as a web designer, but it is an optional extra that will help to move your development to the next level.
5. Content Management Systems
The internet is a constantly changing entity, and recently Content Management Systems have become the big thing, allowing relative novices to keep their own websites up to date. The big three systems are WordPress, Joomla and Drupal, with WordPress being generally the most favoured for its ease of use.
These five technical skills are just the start of all that you will need to know to become a Web Designer. A certain level of design ability, and an awareness of search engine optimisation (SEO), successful website navigation and the foibles of all of the favourite internet browsers are also essential for your success. You don’t need to know everything all at once though, so why not start working your way through the list now by introducing yourself first to HTML.
If you enjoyed reading the above, you may like to read more articles like this in our Articles For Web Designers category.
What is HTML?
Posted by FireBubble on February 17, 2012 in Web Designer - Comments OffHTML, or HyperText Markup Language, is an essential skill for any Web Designer. Why? Because even though WYSIWYG (What You See Is What You Get) editors can enable anyone to create a website without touching programming code, the code created is often messy and difficult to maintain. Knowing how the HTML behind the website works is your first essential skill toward successfully developing websites and becoming a successful web designer.
So first things first, what is HTML?
Well as already mentioned, HTML stands for HyperText Markup Language. Markup languages are not the same as programming languages such as C or Java; instead they are made up from a selection of markup tags. Within HTML these markup tags effectively describe how a website looks and operates. They are the building blocks that make up your web pages.
Tags within HTML fall between angled brackets, for example <html>, and usually occur in pairs with a matching start and end tag such as <h2> and </h2>. It is in between these start and end tags that you will place the content of your website, so as an example:
<h2>This is a title</h2>
The above piece of markup code would display the heading, ‘This is a title’ on your website.
There are many different tags that you as a Web Designer can incorporate into your web pages to achieve the functionality and aesthetic appeal that you desire; however it is not essential to learn them by heart instantly. There are many different guides for web designers and lists of tags online that will allow you to look up tags as and when you need them, though you will soon find yourself becoming familiar with those fundamental elements that occur on the majority of pages. This makes HTML a very easy web language to learn.
Although HTML is certainly the first language that any web designer / developer should get to grips with, it is not an infallible technology. HTML works the most successfully when teamed with other languages, such as CSS (Cascading Style Sheets). This CSS code can work with your fundamental HTML to style the pages of your website beautifully. JavaScript is another language that can add additional power to your pages when teamed with HTML.
If you are just starting out on your path to becoming a web designer don’t panic! It is not essential to know all of these technologies at once, as it is certainly possible to put together your very first web pages with some rudimentary HTML knowledge, but to become a fully-fledged web designer, learning HTML is the best place to start.
Click here for a basic tutorial in creating your first HTML Web Page.
If you enjoyed reading the above, you may like to read more articles like this in our Articles For Web Designers category.
What is CSS?
Posted by FireBubble on February 17, 2012 in Web Designer - Comments OffOnce upon a time a Web Designer was forced to create all of the styling for their website using HTML code. This was relatively simple to do; HTML provided tags such as <h1> for a heading and <p> for a paragraph of text, not to mention the <font> tag that allowed web designers to specify the colour and size of segments of content on their web pages. Simple! Until you start to consider larger websites that is. Imagine a 100 page website where each page needs to be consistent in its appearance. Adding all of that formatting information into each individual segment of HTML sounds like an incredible hassle, not to mention what happens if you want to make a simple change, for example altering the style of all of the headings.
Enter CSS (Cascading Style Sheets). These sheets, saved as .css files, are specifically designed to manage how a website written in a markup language is displayed. The sheets are saved externally to the rest of your HTML code, and correspond to every page on the website. Essentially that means that when a web designer wants to alter the style of all of the headings on a large website featuring many different pages, they only need to edit the .css file and not every individual page.
CSS is something that every Web Designer needs to know, particularly as it is now supported by every internet browser. The style sheets you create can control the fonts that you use, the colours and backgrounds of your website, the positioning of elements on your pages, your margins, lines, heights, widths and much, much more. There is currently no more precise and accurate way to organise and control the layout of your website, and with a multitude of sophisticated techniques included, CSS can be the tool to make each and every one of your web pages look stunning.
How does CSS work?
Every element that a web designer wishes to style using CSS must come complete with a specific rule in a .css file. This rule is made up of two distinct parts, a Selector, and a number of Declarations. Let’s stick with our example and think about changing how a heading looks on each of our 100 web pages:
h1 {
color:red;
font-size:14px;
}
In this example, h1 is your Selector; it determines the element you are actually styling. The clauses within the brackets are the two Declarations in this instance, defining the colour and size of the text. If you decided that you wanted to change the size of this heading on every page on your website you could simply change it here, and watch the alteration be propagated to every <h1> HTML tag within your website.
This has been a very simplistic look at the power of CSS, but hopefully it has raised your awareness as to how important this skill is for a web designer. There are many tutorials online that can help you to get started with developing and using CSS and there are also many excellent books available that many web designers will find very useful as a handy reference.
If you enjoyed reading the above, you may like to read more articles like this in our Articles For Web Designers category.
What is PHP?
Posted by FireBubble on February 17, 2012 in Web Designer - Comments OffThere are many languages useful in the development of websites, but if you want to be a Web Designer PHP is one of the most essential. Before jumping headfirst into PHP, or ‘Hypertext Pre-processor’, though, it is first worth familiarising yourself with HTML as PHP is usually embedded within this markup language. Once you are up to speed with the basics, PHP can help you to add more complex functionality to your pages, turning your once simple HTML website into the beautiful site that you’ve always dreamed of.
PHP is a scripting language and the code is executed on the side of the server. That means if you look at a website featuring PHP the instructions within the code are implemented on the computer that hosts the website, not on your own computer. There are other scripting languages out there such as ASP and Perl, but as PHP is undeniably the most popular this is where you should start on your journey to becoming a Web Designer.
Why Bother with PHP?
HTML is a fantastic markup language for putting together some simple sites, but if you want to include anything more complicated within your website such as forums, picture galleries, surveys, secure logins and much, much more, you’ll need a scripting language. PHP is loaded with benefits such as the following:
- It’s completely free! PHP is an open-source technology so you can download and use it with no cost to you, the web designer.
- It’s compatible across a number of platforms, including Windows, Unix and Linux.
- It supports the use of a range of databases, such as the popular MySQL and others including Oracle, Informix, Solid and many more.
- It really is ideal for both the smallest and the largest website development projects, so no matter what you have in mind PHP will work for you.
- You don’t need to spend a lifetime learning to master the basics of PHP; as scripting languages go it’s quite simple to pick up.
All of these benefits and more make PHP a great language for website developers.
The Basics of PHP Coding
PHP files are usually saved with the extension .php, and the files include a combination of sections of script code, HTML tags and text. The script code itself will be sandwiched between <?php and ?> tags. Displaying the text, ‘This is my first PHP website.’ on your screen is as simple as this:
<html>
<body>
<?php echo “This is my first PHP website.”
?>
</body>
</html>
If you enjoyed reading the above, you may like to read more articles like this in our Articles For Web Designers category.
What is JavaScript?
Posted by FireBubble on February 17, 2012 in Web Designer - Comments OffAs a Web Designer the scripting language JavaScript is not absolutely essential, but without it you might find yourself struggling to add the interactive elements that you desire to your web pages. Before delving into the details of this, the most powerful scripting language on today’s World Wide Web, it is important to recognise that JavaScript has nothing to do with the far more complex programming language, Java. That means you don’t need to understand Java to succeed with JavaScript, and likewise knowledge of Java won’t necessarily help you to create perfect JavaScript in an instant.
You may not have noticed it, but you will have encountered JavaScript on many a website as you’ve made your way around the internet. Perhaps you’ve seen a new window pop up based on some action of yours, or seen a text field automatically highlighted in red after you’ve input an incorrect value. Chances are, the functionality in place for those instances was created through some JavaScript code.
Do You Need to Learn JavaScript?
One of the great things about JavaScript is that many web designers have allowed their script-code to be used by the developing community. There’s a good likelihood that someone has already written a piece of code that will enable your web page to function in exactly the way you want it to. These pre-made sections of script can simply be plugged into your own code, but you must always ensure that you have the permission to use them.
Of course, even when using someone else’s JavaScript code, it is still a good idea to have at least a basic understanding of the technology. You may need to make some alterations to suit your own site, or even just be aware of how to slip the code into your own web pages to make it function.
When it does come to editing JavaScript you don’t need any fancy technology; any basic text editor will do. In many instances the script code itself will be slotted straight into a HTML file, but it is better practice, particularly for long sections of script, to create separate files with .js extensions. The functions within these external files can then simply be called from your HTML, improving the performance of your pages and allowing you to use the same technology on every page of your web site with relative ease.
A Web Designer should be aware of many different and useful technologies available for the improvement of their websites. JavaScript is just such a technology, so if you already have some familiarity with HTML and CSS this could be a great next language for you to start studying.
If you enjoyed reading the above, you may like to read more articles like this in our Articles For Web Designers category.
What is WordPress?
Posted by FireBubble on February 17, 2012 in Web Designer - Comments OffThe World Wide Web is an ever-growing entity, with more and more individuals desiring to have their own piece of online real estate advertising their business, service or simply their thoughts. As a Web Designer it is important to recognise this, and utilise any tools that can help you to produce excellent web pages quickly and simply, web pages that your clients can maintain by themselves.
Enter WordPress!
WordPress is a Content Management System (CMS); a system that allows a user to make changes to the content on the pages or posts of a website without needing to alter any HTML code. Although it is technically possible for anyone to put together their own simple WordPress website, many individuals will still look for a Web Designer to set things up for them so that they may have something more unique for their business which will help to strengthen the identity for a company or the brand of a particular product.
Although the completely free and open source WordPress was initially created as a platform for bloggers, the system has developed far beyond this humble beginning. Nowadays many powerful, attractive and highly functional web pages can be developed on WordPress, packed with these many benefits:
- Anyone can download WordPress for no cost whatsoever; this is a free framework that you can upload straight onto your website hosting to have this content management system up and running in no time at all. Many web hosting packages even include one-click installation programs that will install WordPress for you in literally just a couple of minutes. This installation usually also creates the necessary MySQL database to function with your WordPress website.
- After installing WordPress on a particular domain you can easily access the admin panel by visiting the address http://www.YourDomainHere.com/wp-admin. This admin panel is incredibly simple to understand and to use, with the ability to update pages and posts as easily as in a piece of word processing software.
- A lot of web designers around the globe take advantage of the WordPress system, and as such there is a useful and active community offering advice and suggestions for your own WordPress website.
- The look, feel and functionality of your WordPress website is governed by its theme; usually a combination of PHP, CSS and JavaScript files. There are thousands of themes either for free or a fee online that you can insert directly into your installation of WordPress. Many of these themes include a range of customisation options, from inserting your logo to altering the colour scheme to changing the layout of each individual page.
- Another great strength of WordPress is the vast multitude of plugins that can be added in to increase the functionality of your website. Want to incorporate a picture gallery or a survey? Want to improve your website’s Search Engine Optimisation or prevent spam comments on your blog? Plugins for all of these tasks and more are freely available for WordPress developers.
If you enjoyed reading the above, you may like to read more articles like this in our Articles For Web Designers category.
What is MySQL?
Posted by FireBubble on February 17, 2012 in Web Designer - Comments OffSay the word ‘Database’ and your initial reaction may be to think of a large table of data, perhaps names and addresses, stored within a program such as Microsoft Access. As a Web Designer however, you are far more likely to have contact with the relational database management system known as MySQL. A MySQL database can be created on your web-server, and can store a multitude of data relating to your website, from blog posts to image information.
There are several reasons that MySQL has become the predominant database structure for information on websites around the globe. Amongst these reasons is the fact that the technology is completely free and open source, and that it is also supported by the vast majority of website hosting accounts. As long as your hosting provider can support MySQL and PHP you are good to go! There isn’t an attractive graphical user interface as in the case of the Microsoft Access program when using MySQL, instead you’ll need to learn a variety of SQL statements to input and extract data, but don’t let that put you off. Particularly as a Web Designer can easily create websites using MySQL databases, without ever touching the tables filled with the information.
How is that possible? It’s done through the use of content management systems such as WordPress. Instead of manually inputting SQL statements to let your database know of the data that is required for a particular web page, you can simply have WordPress, or your CMS of choice, do the hard work for you.
So how does this actually work? Well let’s think of your MySQL database as a real thing; a filing cabinet filled to the brim with individual files relating to the different elements on your website. Let’s say you, the visitor to the website, want to access one particular piece of information, one particular file. As you head to the page in question the database is sent a PHP query asking for the relevant piece of information. In our filing cabinet example, this PHP request would essentially be your hand as you reach for the right record within the cabinet. Once the file is retrieved you can read it, gleaning the information that you require; once the PHP query is executed, the website will update with the information from the correct table and field of the database.
Essentially this all means that you, the web designer, doesn’t actually need to understand the finer details of SQL statements and the inner workings of MySQL as your CMS of choice can handle the requests for you. Despite that, it is still always worth grasping the basics of any technology that manipulates the workings of your website, on the off chance that something should ever go wrong.
If you enjoyed reading the above, you may like to read more articles like this in our Articles For Web Designers category.
Web Lesson 3 – How to Style Text with HTML & CSS
Posted by FireBubble on February 17, 2012 in Web Designer - Comments OffAltering the appearance of the text on your website is a great way to draw a visitor’s attention to your key sections of content, or simply to make a page look less like a single block of text. As a Web Designer you will need to understand how you can go about changing the style of your text to create websites that are highly effective. Fortunately using HTML, and a little CSS, this is an easy feat to master.
Simple HTML Styling
The first port of call of many web designers is to do some simple text styling using HTML. It is easy to make text bold, for example, by enclosing it within <b> or <strong> tags as in this example:
<strong>This text is bold.</strong>
Likewise you can easily italicise text with <em> tags, or underline it with <u>:
<em>But this text is in italics!</em>
<u>And this is underlined!</u>
This simple formatting can certainly help to spice up any web designer’s pages, but what if you want to do something fancier such as changing the size of the text or altering its colour?
Text Styling with HTML & CSS
Before the days of CSS, the best way for a Web Designer to style the font on their web pages was with the little HTML tag <font>. This tag could be used in the following way to define the typeface, size and colour of a piece of content on your website:
<p>
<font color=”blue” size=”2″ face=”arial”>
This text has been styled.
</font>
</p>
Although it is still possible to use the <font> tag within your own web programming, it is highly recommended today that you incorporate some simple CSS to handle the styling of your text for you. Why? Because CSS can be used to style all of your web pages, which saves you having to copy and paste your font information for each and every piece of text on each and every page of HTML.
Let’s say that you would like all of the headings on your website to be coloured in blue, whereas the bulk of the text itself you would prefer in black. This quick and easy section of CSS styling would achieve that effect, without needing to keep reminding the web browser of your stylistic choices:
<html>
<head>
<style type=”text/css”>
h1 {color:blue;}
p {color:black;}
</style>
</head>
<body>
…
Why not take some time to practice styling the text within your initial website; you might be pleasantly surprised at how simply you can alter the words that appear on screen to make your web pages really stand out.
If you enjoyed reading the above, you may like to read more articles like this in our Articles For Web Designers category.
Web Lesson 2 – Linking a HTML Web Page to a Style Sheet
Posted by FireBubble on February 17, 2012 in Web Designer - Comments OffAs a Web Designer it is very important to know how to style your websites to make them look aesthetically pleasing, as well as keeping all of the pages on your site constant. CSS is an excellent tool to achieve exactly that process, and it can be linked in with your existing HTML code to make your website design look beautiful and function smoothly.
There are two options when it comes to linking to a style sheet within your HTML:
- Embedding your style sheet within the HTML code itself. This means that the CSS will only relate to the page in question; fine for very small websites that only consist of a page or two, but certainly not the favoured option for larger sites.
- Linking to an external style sheet from your HTML code. The code that you might have embedded in the first of the two options can simply be removed to a separate .css file which can be linked to from your HTML, making it applicable to every separate page on your website.
Let’s consider both of these options.
1. Embedding your style sheet
Let’s say that this is the very simple HTML code for our first website:
<html>
<body>
<p>Welcome to my website!</p>
</body>
</html>
This isn’t very interesting really; it just displays one sentence of text on our web browsers, so let’s say we decide we want to change the background colour of the page itself to a beautiful blue, with hex code #07CED9. We can use embedded CSS to achieve this result by styling the Body section of our webpage using the following code within our HTML:
<html>
<body>
<style type =”text/css”>
body {
background-color: #07CED9
}
</style>
<p>Welcome to my website!</p>
</body>
</html>
The <style> tags inform the web browser that everything in between the two corresponds to CSS code, and applies said code to the finished web page.
2. Linking to your style sheet
It is better practice as a Web Designer to remove the CSS code from within your HTML, instead putting it in a separate file and linking to it. In the example shown above our very simple CSS document, named style.css, would look like this:
body {
background-color: #07CED9
}
And in our HTML document we would simply need to include a line within the <head> section to alert it to the requirement to load a style sheet:
<html>
<head>
<link rel=”stylesheet” href=”style.css”>
<body>
…
It’s as simple as that. We have only looked at one very simple example here, but there are numerous stylistic options within CSS to make any web designer’s pages look great.
If you enjoyed reading the above, you may like to read more articles like this in our Articles For Web Designers category.
Web Lesson 1 – Create a Basic HTML Web Page
Posted by FireBubble on February 17, 2012 in Web Designer - Comments OffHTML is an incredibly powerful markup language that you can use to put together your very own websites. Although other scripting and design languages can certainly add additional functionality and aesthetically pleasing elements to your web pages, any Web Designer should still take the time to learn this all important language. Without it you will always struggle to grasp exactly how your web pages fit together.
So without much further ado, let’s start this lesson introducing you to the basics of creating a HTML document. When you have finished reading you will have the knowledge that you need to create a simple web page, and to view it in your preferred browser.
Step 1 – Open a Text Editor
You can use any text editor to create HTML documents, for example Notepad if you are running on a Windows PC. Such a simple editor is all that you need to create your very first HTML document.
Step 2 – Create Your HTML Code
Before we start putting finger to keyboard, we need an understanding of how the HTML language operates. For your web browser to understand your instructions you need to incorporate a range of HTML tags within your document. These tags can be found within angled brackets, usually come in pairs and are used for every instruction.
Here are some important tags that you will need for this, your first HTML document:
- <html> and </html> tags should always be inserted as the first and last elements of any HTML document; they inform the web browser that what comes in between the two is the web page itself.
- <body> and </body> tags should wrap around everything that is to be displayed visibly on the webpage, aside from that information that falls within the page’s header.
- <p> and </p> tags are used to inform a web browser that the plain text between the tags is to be displayed as a paragraph.
So let’s put it all together:
<html>
<body>
<p>Welcome to my website!</p>
</body>
</html>
Step 3 – Save Your Document
Most text editors will encourage you to save your document as a .txt file, but in this case we want to alter that extension to .html. The homepage of any website is conventionally titled index.html so save your document with this name now.
Step 3 – Open Your First Web Page
All that remains is to admire the very first web page that you, a new web designer, have created. Just go to the location where you saved the index.html file and double click to open it. The page will appear in your default website browser and should simply show the text ‘Welcome to my website!’
There’s a lot more to learn about the various tags and formatting options to be found within HTML, but even creating this very first document has set you on your way to becoming a fully fledged Web Designer.
If you enjoyed reading the above, you may like to read more articles like this in our Articles For Web Designers category.
Want to be a Web Designer?
Posted by FireBubble on February 17, 2012 in Web Designer - Comments OffIf you are interesting in becoming a Web Designer then you might like to have a read through some of the recent articles that have been added to the Web Designer Category of this blog where you can read articles that provide such information as What do you need to know to become a Web Designer?, What is HTML?, What is CSS?, What is a MySQL Database? and many more. There is even a few tuition based articles to help you create your very First HTML Web Page.
Please note that FireBubble reserves the copyright to any articles posted on this website and does not provide the permission for them to be posted elsewhere.
It is hoped that the articles will provide a nice resource for individuals thinking about taking a first step into the world of web design.
