Introduction to Web site design - Is Web design important?
Part 1 of 10
Imagine this web page as the tip of a very large iceberg. What you see on screen is actually the smallest part. To be successful on the World Wide Web / Internet takes time, effort and of course money.
Introduction
Deciding to get onto the World Wide Web / Internet today has never been quicker or easier. There are so many options from "do it yourself", Choose a pre-made template or choose from over a million Web designers ranging from the ridiculously cheap to the mega expensive.
Many first ventures onto the Internet end in disillusionment, massive expense, or simply walk away the project and forgetting the whole thing.
Why is that? The Internet is a massive beast and is built on a highly technical environment. The reality of the environment is hidden from us by friendly front-end systems. Which is great by encouraging more people to use it. But by not understanding how it all works means that you can not use it to your advantage. With so much competition on the Internet this means you will not get the results you want or expect.
This article is the first in a series of 10 over which we will provide a simple guide to services for web design and to provide the winning inch of knowledge to ensure your success on the Internet.
In this introduction we will cover some of the basics to act as backdrop as you to move through the remaining nine short articles.
We have adopted a process of nine steps courtesy of Services Web Design.
1. Introduction
2. Consulting
3. Keywords
4. Domain Naming
5. Design
6. Hosting
7. Integration
8. E-commerce
9. SEO (Search Engine Optimization)
10. Internet Marketing
Introduction to Web Design - Basic technology:
- HyperText Markup Language (HTML)
- Client Server Technology
- Web Browsers
1. HyperText Markup Language (HTML)
Many will have heard of it and many will know what it does, however many will never want to use it. Dating back, it was a language for formatting text to allow academics to communicate and share with each other.
Today, there are many software products that present a simple user interface to creating web pages. The software then translates your colors, text styles, lines, boxes and graphical image placement into HTML.
This removes the user from the technology altogether. On one hand it is great, it means more people get low cost access to the Internet, whilst on the other hand, not so great as it also means that you are not in control of your web pages!
When you need to add or change something in the HTML, which you will, you are suddenly confronted with reality of what the software has created! Trying to navigate your way through it is both daunting and potentially harmful to your Website.
To make things easier Frames were introduced to help speed up physical layouts and remove the need for HTML knowledge. Many templates on offer today will be "frames based". The problem with frames is that search engines do not like them. The search engine robots that index your site likes to start at the top right and work through bottom left. So when it finds a table it can become confused. All this means that your Website may not get indexed or if it does it may not index what you want it to. This may cause poor page ranking meaning that your Website will never make it to the first two or three pages of a search result.
The same is true of you use a Flash based Website. But there will be more on this and the whole issue of Search Engine Optimization in chapter 8.
The World Wide Web Consortium (W3C) have agreed a standard for better layout and formatting by using Cascading Style Sheets (CSS). This is a separate file to the HTML page. It is used by a Web Browser to interpret both the HTML and the Style of a web page. A lot can be achieved using CSS with the benefit of the HTML page remaining pure. CSS is more complicated to learn and use but it has significant advantages in making changes across large sites from a single file.
All professional Website designers are being encouraged to use CSS and most good ones do.
The W3C provides self-certification for Websites that conforms to the standards laid out for both HTML and CSS. Lookout for the certification symbols / link on pages that conform to W3C standards as you browse. You can use the link yourself it will take you directly the validation page. You can check any Web page in this way for yourself.
- CSS (Cascading Style Sheets)
- HTML (Hypertext Markup Language)
Example Site can be viewed here
Things to take away from section 1:
Exposure to HTML to fix or add things is inevitable regardless of Software package used
Clean HTML improves your likelihood of success on the Internet
CSS is an approved standard that all future / most current web browsers support
2. Server and storage - Internet Service Provider
Internet Service Providers (ISP) will sell/rent you space to host your Website using their hardware. They own massive server farms and usually offer two core technologies namely Unix (many variants) and Microsoft.
In simple terms the ISP, for a fee, will create a directory on a server (hard disc) in much the same way you would on your own computer i.e. to organize and store your files. This directory is then given an address. On your computer you will probably have a directory called "My Documents". On an ISP server it will http://www. This address is called a "Universal Resource Locator" (URL).
A URL is a way of accessing the documents within a directory created by an ISP "the Website address. Web addresses / urls look like this
http://www.services-web-design.com/index.htm"
To break this address down we begin with "HTTP" (HyperText Transfer Protocol) as a way of identifying that you want to access an hypertext page. HTTP is a request/response protocol between you, the client, and an ISP server.
The request is transferred to the server via Transmission Control Protocol (TCP) and is used again to deliver the HyperText Markup Language (HTML) page to your web page viewer (browser such as Internet Explorer, Firefox etc)
The browser, which is located on your local computer, interprets the HTML page and displays it on your screen according to the design.
The :// part is simply telling the TCP to look at the highest directory. On your computer this is probably C:/ or "My Computer".
"WWW" tells the TCP to look on the World Wide Web followed by the "." (period) followed by your specific Website address "." (period) extension i.e. COMpany or ORGanisation etc. Finally "/" to indicate the actual page in the example given it is the Index page (home page).
If no page name is given the default will always be the Index (home) page.
You may have seen other address types such HTTPS://name.website.com. The "S" indicates "Secure", you will most likely see this when making any transaction via a web page or filling out a form.
The important aspect to take from this section is that a Website is a collection of documents (HTML pages). A Website is really nothing more than a common address to those pages. You can address any page of the site directly e.g.
http://www.services-web-design.com" will default to the home page (Index.htm)
http://www.services-web-design.com/process_map.htm" will take you directly to the process map page.
Loading pages to your space on the ISPs server is achieved by using another protocol. The File Transfer Protocol (FTP). Much like TCP is the "get page" protocol, FTP is the "put a page" protocol.
To do this you will need to know the FTP address, the directory (usually "htdocs"), your user name (assigned by the ISP), your password and of course a document list on your local computer to "upload".
It is no more complicated than copying files from one location to another. However, the speed is governed by your connection.
The choices of connection range from a modem using your telephone line or broadband. You may be on a network, but your network server will still use variants of either. The only thing to watch for is your firewall or your computer security software that may want to block the FTP transmission.
Things to take away from this section 2:
A Website is a collection of HTML pages
Any HTML page can be accessed directly
Websites are hosted by an Internet Service Provider who acts as the "sever"
3. Internet Browsers.
We talked a little about these earlier. This software is located on your computer and it translates the HTML page to your screen. Not all browsers interpret the HTML page in the same way!
When designing your Website you must make allowances for the lowest possible common browser. Your web page may look great in Firefox version 2.0 but may actually crash someone else's computer if they are using Internet Explorer version 5!
The World Wide Web Consortium (W3C) together with the Internet Engineering Task Force have created standards. This covers HTTP, HTML, CSS etc. With standards in place all Web browser vendors can develop / build their browsers to a common standard. Meaning they will all interpret and display web pages in the same way. But as there are millions of people using a multitude of computers of varying technology with various browsers. The rule for Web designers is to allow for the lowest common version possible.
You may see this demonstrated on professional Websites where two versions are made available. One version for latter day browsers and an alternative version for older browsers.
But all professionally built Websites will provide an alternative / simple "text-link" based menu in additional to the main menu, and will use complexity sparingly. This allows all browsers to read your web page and thus reach as many people as possible.
Things to take away from this section 3:
Web Browsers interpret the HTML page to your screen "the client"
Not all Web browser interpret HTML pages in the same way
Website designers must make allowance for the lowest possible browser technology
In this section we covered the basics on how the World Wide Web / Internet technology works.
The next article covers the importance of planning your Website and using appropriate consulting to avoid making costly mistakes.
Part 1 of 10
Imagine this web page as the tip of a very large iceberg. What you see on screen is actually the smallest part. To be successful on the World Wide Web / Internet takes time, effort and of course money.
Introduction
Deciding to get onto the World Wide Web / Internet today has never been quicker or easier. There are so many options from "do it yourself", Choose a pre-made template or choose from over a million Web designers ranging from the ridiculously cheap to the mega expensive.
Many first ventures onto the Internet end in disillusionment, massive expense, or simply walk away the project and forgetting the whole thing.
Why is that? The Internet is a massive beast and is built on a highly technical environment. The reality of the environment is hidden from us by friendly front-end systems. Which is great by encouraging more people to use it. But by not understanding how it all works means that you can not use it to your advantage. With so much competition on the Internet this means you will not get the results you want or expect.
This article is the first in a series of 10 over which we will provide a simple guide to services for web design and to provide the winning inch of knowledge to ensure your success on the Internet.
In this introduction we will cover some of the basics to act as backdrop as you to move through the remaining nine short articles.
We have adopted a process of nine steps courtesy of Services Web Design.
1. Introduction
2. Consulting
3. Keywords
4. Domain Naming
5. Design
6. Hosting
7. Integration
8. E-commerce
9. SEO (Search Engine Optimization)
10. Internet Marketing
Introduction to Web Design - Basic technology:
- HyperText Markup Language (HTML)
- Client Server Technology
- Web Browsers
1. HyperText Markup Language (HTML)
Many will have heard of it and many will know what it does, however many will never want to use it. Dating back, it was a language for formatting text to allow academics to communicate and share with each other.
Today, there are many software products that present a simple user interface to creating web pages. The software then translates your colors, text styles, lines, boxes and graphical image placement into HTML.
This removes the user from the technology altogether. On one hand it is great, it means more people get low cost access to the Internet, whilst on the other hand, not so great as it also means that you are not in control of your web pages!
When you need to add or change something in the HTML, which you will, you are suddenly confronted with reality of what the software has created! Trying to navigate your way through it is both daunting and potentially harmful to your Website.
To make things easier Frames were introduced to help speed up physical layouts and remove the need for HTML knowledge. Many templates on offer today will be "frames based". The problem with frames is that search engines do not like them. The search engine robots that index your site likes to start at the top right and work through bottom left. So when it finds a table it can become confused. All this means that your Website may not get indexed or if it does it may not index what you want it to. This may cause poor page ranking meaning that your Website will never make it to the first two or three pages of a search result.
The same is true of you use a Flash based Website. But there will be more on this and the whole issue of Search Engine Optimization in chapter 8.
The World Wide Web Consortium (W3C) have agreed a standard for better layout and formatting by using Cascading Style Sheets (CSS). This is a separate file to the HTML page. It is used by a Web Browser to interpret both the HTML and the Style of a web page. A lot can be achieved using CSS with the benefit of the HTML page remaining pure. CSS is more complicated to learn and use but it has significant advantages in making changes across large sites from a single file.
All professional Website designers are being encouraged to use CSS and most good ones do.
The W3C provides self-certification for Websites that conforms to the standards laid out for both HTML and CSS. Lookout for the certification symbols / link on pages that conform to W3C standards as you browse. You can use the link yourself it will take you directly the validation page. You can check any Web page in this way for yourself.
- CSS (Cascading Style Sheets)
- HTML (Hypertext Markup Language)
Example Site can be viewed here
Things to take away from section 1:
Exposure to HTML to fix or add things is inevitable regardless of Software package used
Clean HTML improves your likelihood of success on the Internet
CSS is an approved standard that all future / most current web browsers support
2. Server and storage - Internet Service Provider
Internet Service Providers (ISP) will sell/rent you space to host your Website using their hardware. They own massive server farms and usually offer two core technologies namely Unix (many variants) and Microsoft.
In simple terms the ISP, for a fee, will create a directory on a server (hard disc) in much the same way you would on your own computer i.e. to organize and store your files. This directory is then given an address. On your computer you will probably have a directory called "My Documents". On an ISP server it will http://www. This address is called a "Universal Resource Locator" (URL).
A URL is a way of accessing the documents within a directory created by an ISP "the Website address. Web addresses / urls look like this
http://www.services-web-design.com/index.htm"
To break this address down we begin with "HTTP" (HyperText Transfer Protocol) as a way of identifying that you want to access an hypertext page. HTTP is a request/response protocol between you, the client, and an ISP server.
The request is transferred to the server via Transmission Control Protocol (TCP) and is used again to deliver the HyperText Markup Language (HTML) page to your web page viewer (browser such as Internet Explorer, Firefox etc)
The browser, which is located on your local computer, interprets the HTML page and displays it on your screen according to the design.
The :// part is simply telling the TCP to look at the highest directory. On your computer this is probably C:/ or "My Computer".
"WWW" tells the TCP to look on the World Wide Web followed by the "." (period) followed by your specific Website address "." (period) extension i.e. COMpany or ORGanisation etc. Finally "/" to indicate the actual page in the example given it is the Index page (home page).
If no page name is given the default will always be the Index (home) page.
You may have seen other address types such HTTPS://name.website.com. The "S" indicates "Secure", you will most likely see this when making any transaction via a web page or filling out a form.
The important aspect to take from this section is that a Website is a collection of documents (HTML pages). A Website is really nothing more than a common address to those pages. You can address any page of the site directly e.g.
http://www.services-web-design.com" will default to the home page (Index.htm)
http://www.services-web-design.com/process_map.htm" will take you directly to the process map page.
Loading pages to your space on the ISPs server is achieved by using another protocol. The File Transfer Protocol (FTP). Much like TCP is the "get page" protocol, FTP is the "put a page" protocol.
To do this you will need to know the FTP address, the directory (usually "htdocs"), your user name (assigned by the ISP), your password and of course a document list on your local computer to "upload".
It is no more complicated than copying files from one location to another. However, the speed is governed by your connection.
The choices of connection range from a modem using your telephone line or broadband. You may be on a network, but your network server will still use variants of either. The only thing to watch for is your firewall or your computer security software that may want to block the FTP transmission.
Things to take away from this section 2:
A Website is a collection of HTML pages
Any HTML page can be accessed directly
Websites are hosted by an Internet Service Provider who acts as the "sever"
3. Internet Browsers.
We talked a little about these earlier. This software is located on your computer and it translates the HTML page to your screen. Not all browsers interpret the HTML page in the same way!
When designing your Website you must make allowances for the lowest possible common browser. Your web page may look great in Firefox version 2.0 but may actually crash someone else's computer if they are using Internet Explorer version 5!
The World Wide Web Consortium (W3C) together with the Internet Engineering Task Force have created standards. This covers HTTP, HTML, CSS etc. With standards in place all Web browser vendors can develop / build their browsers to a common standard. Meaning they will all interpret and display web pages in the same way. But as there are millions of people using a multitude of computers of varying technology with various browsers. The rule for Web designers is to allow for the lowest common version possible.
You may see this demonstrated on professional Websites where two versions are made available. One version for latter day browsers and an alternative version for older browsers.
But all professionally built Websites will provide an alternative / simple "text-link" based menu in additional to the main menu, and will use complexity sparingly. This allows all browsers to read your web page and thus reach as many people as possible.
Things to take away from this section 3:
Web Browsers interpret the HTML page to your screen "the client"
Not all Web browser interpret HTML pages in the same way
Website designers must make allowance for the lowest possible browser technology
In this section we covered the basics on how the World Wide Web / Internet technology works.
The next article covers the importance of planning your Website and using appropriate consulting to avoid making costly mistakes.
Comments
Post a Comment