Learning how to create a website and web design tools

Woman working up all night at computer

This web design series covers learning how to create a website from the perspective of the technology professional. 

Over the course of this web design series we will cover how to implement and maintain hypertext-based websites using authoring and scripting languages, use web management tools and digital media tools, and apply human factor principles to design.

If you are a small business owner or manager, check out our companion site Smart Technology Info as we target business professionals or managers as we try to separate the tasks and tools of technology in the section on how to make a website for small business success.

Site designer skills are a combination of minimal technical and non-technical skills required by a website designer that are not product or system specific.  While we will discuss various software packages, and use available software to illustrate concepts, the focus is the understanding of the concepts and issues rather than any particular software.

Over the years I have been active in the webmaster community online, as well as teaching numerous webmaster classes at three different community colleges. Questy's Webmaster's Portal, formerly at Questy.com, was used as outline for students to review material covered in the classes that I taught.  Many of the pages have been edited down to small articles presented here.

Each topic on the site is presented in a concise stand alone article that you can choose to read as you find the time.  The pages in this sectin form a collection of topics from start to finish that cover a more broader scopr of learning how to create a website and web design tools from a technical perspective. When you are reading a page look at the menu along the right side bar to see other pages on similar topics.



What is HTML and What is the Value in Learning It?

Editing HTML yourself, allows you more creative control, as well as technical control over the output. HTML is one of the basic building blocks at the core of the concept we now call the World Wide Web.

With with the creation of software applications that create sites without the need for code knowledge, the questions are often asked, what is HTML, and what is the value in learning it?

What is HTML?

HTML is an acronym for Hypertext Markup Language. Markup languages date back to the 1960s developed by IBM to enable the sharing of machine readable documents.

Tim Berners-Lee began working with the concept of Hypertext in the early 1980s. In the early 1990s Berners-Lee would develop HTML as the computer language that would take the collection of wires and computers of the internet, and give them a more universal method of communications that would be known as the World Wide Web.

How HTML works

The definition of a scripting language is a set of instructions that are interpreted by an application. In the case of HTML the instructions are the HTML document, or  web page, and the application used to interpret them is call the web browser.

The individual parts of the script in HTML are called tags. HTML is a series of tags that are integrated into a text document. When an ASCII (American Standard Code for Information Interchange) text file is created in notepad using HTML tags and saved as an HTML file, it becomes a web page.

Part of HTML and web page publishing is formatting text, and adding pictures and graphics to a document much like traditional word processing or desk top publishing that preceded it.

The other part of HTML is the magic of the hyperlink or hypertext. The hyperlink allows you to click on a link and go that designated URL, Uniform Resource Locator, the web address of whatever you are linking to with in your own site, or any site anywhere on the World Wide Web. Just as the core networking protocols of the internet represented a radical departure from how things were done prior to their development, the concept of hypertext was likewise a new way of delivering information.

Before HTML editors were widely used most webmasters simply typed HTML tags into notepad, and saved the resulting document as an HTML file. The resulting HTML file is the set of instructions that are interpreted by an application known as a browser.

HTML tags consist of a left angle bracket (<) a tag name and a right angle bracket (>). The end tag looks just like the start tag except a slash (/) precedes the text within the brackets. For example: <h1> Heading </h1>

Simply put, HTML tags tell the browser what to do.

Why even learn HTML?

In the late 1990s when web sites were first being built by a new breed of web users the main tool to create a web site was a text editor, like note pad.

Today millions of internet users create web sites with blogging sites using applications like WordPress. Online blogging tools and ready to use online content management systems allow you to express yourself and share ideas by creating a blog in a matter of minutes. The need to know anything about the technology that creates the web site is not necessary.

There are many WYSIWYG (What You See Is What You Get) HTML editors, which are software application for creating and managing individual web pages. So the need to know anything about the underlying language of HTML is not necessary.

Editing HTML yourself, allows you more creative control, as well as technical control over the output. The more HTML your learn, the more you appreciate HTML editors. The more you use HTML editors, the more you'll be glad to have a basic understanding of HTML.

If your definition of a webmaster is someone who logs into some type of blogging software simply to publish comments and news, then understanding HTML may be more than you care to tackle.

Many years ago I taught various courses on web design.  I had one introductory course that I wished everyone would take before they learn how to use any software or content management systems. We covered a variety of basic skills and concepts. Before we used any software of any kind to create a web page I had students use only notepad to create a webpage using HTML.  It made the students appreciate how the software automated processes and managed the control of the website they were building, and gave them a better understanding of the features of the software.

Likewise, with most content management systems (CMS), the person creating the website needs very little technical skills for basic page creation.  But if you understand exactly what the CMS is doing, it can help you in troubleshooting when you have problems.

In my current primary job I don't do much with web design. When someone is on vacation I need to pitch in and do some website editing.  Most times the edits are very simple updates that are needed. I just download the page to my desktop and open it up in notepad to make the changes.  Sometimes people get so dependent on the power tools, they don't even realize that there may be a simple way to do something.

I don't claim to be a master at scripting languages, but being able to open a script up in notepad to do some troubleshooting and editing has helped me solve many problems over the years.

HTML is a core building block to understanding scripting languages

If you want to do any type of webmastering where you are actually creating custom web pages or designing templates, learning HTML is part of understanding a small piece of a larger system.

Writing code and understanding coding concepts are skills that are developed over time. The more you learn about HTML, the easier it will be to learn other web languages. As you progress in your learning of web technologies you will encounter many scripting languages such as PHP, Perl , and Python. Even with the evolution of web languages, HTML is still a core component of web site development and is used along with other scripting languages to create web pages.

Tim Berners-Lee is currently the director of the World Wide Web Consortium (WC3) a vendor-neutral group of international members of Internet developers setting standards for the web including standards for HTML. Just about anything you could want to know about HTML can be found at the WC3 website.



What should I learn to become a web designer?

As a technology professional for many years, the question of "What should I learn to become a web designer?" is one I have answered many times. As an instructor at different community colleges, it is a question that I created programs and courses to answer. 

If someone asked the question in terms of building construction, "what do I need to be a construction worker?" the answer would be similar.  Get a general understanding of all the areas of building construction, and they find an area of specialization. We will take that same approach in answering the question of becoming a web designer.

It is not as easy as question to answer as some may think. As I frequent many online forums I see heated discussions on basic definitions of terms like web designer.  There are also frequent debates on what specific technologies are hot right now, and what technologies are core requirements for a job in web development. For the sake of addressing this question, we will focus on the open source school of thought.  While someone studying strictly Microsoft technologies will have similar objective, the specific path will be a bit different.

Defining Web Designer

For the sake of this discussion, let us begin by defining web designer from a technology viewpoint. The web is collection of information held together by a group of technologies, the core of these technologies is the language of HTML, Hyper Text MarkUp Language. The vehicle by which these technologies are delivered to the people using the web is know as HTTP, Hyper Text Transfer Protocol.  The standard definitions of these technologies (1)  are maintained by an organization know as the w3c, World Wide Web Consortium. (2)

From strictly artistic point of view, one could define the web designer as someone who creates interesting content that captures an audience, or conveys a message, while focusing more attention on how a web site looks rather than how it works. This side of web design becomes very subjective.

There are many paths to becoming a web designer, we will outline some core skills that will help you in an broad understanding of the topic.   In the programs that I helped to develop, we stressed a broad range of basic skills that touched on both the technical and artistic side of being a web designer before specializing in any one area, A basic understanding of networking

Many folks who call themselves web designers never touch an ethernet cable, or perhaps never even see a router. But a basic understanding of networking can help you to enter the field of web design, and advance your career in web design.  Students who learned a bit of basic networking often commented how glad they were to finally have some idea of the meaning of many of the phrases they heard being used by their colleagues. You do not need to be a network engineer to understand enough networking technology to better communicate with someone on the help desk helping to troubleshoot why your web page is not being displayed to your end users.

What should I learn to become a web designer?

Some employers may be happy with demonstrated skills, and a great interview, while others may look at certifications and credentials.  Whether you need certifications in each of these areas, or simply some self taught skills to prove your knowledge at a job interview is a different debate beyond this article.  You can decide based on the time you have to spend, as well as resources available at your local tech school or community college, how to best move forward. 

As we began this article, comparing the original question to that of "what do I need to be a construction worker?" hopefully you now understand that both questions are similar in that they are very broad questions, rather than a specific question.

As you progress through your learning you may find an area that suits your interests or abilities that will ultimately help you to answer the question.

(1) http://www.w3.org/standards/

(2) http://www.w3.org/Consortium/

What's the Difference Between Web Designer and Web Developer?

To someone outside the field of technology, or someone just entering the profession, the differences between web designer or web developer may seem to be just a simple matter of semantics or perspective.  When discussing the creation of a website, it is important to understand a professional website involves many technical as well as non-technical issues.

When you delve more deeply into the definitions from a professional standpoint, it becomes a heated debate.  In a recent open source online forum a question was posted by a recruiter asking for the typical tasks performed by a developer. As an outsider to the profession, the recruiter was trying to get a good understanding of what a web developers does, and formulate a good job description to use in the search for a web developer.  What followed was a very long and intense conversation discussing the roles of web developers, as well as heated discussions on definitions of web languages, and which web languages were the best tools to use for various tasks.  In this discussion I am carefully using the phrase web languages to include both programming and scripting languages, as part of the discussion was on defining the meaning and purpose of programming and scripting languages as well.

Just as with computer networking, there are many layers of technologies used in the delivery of a web page. The role and the tasks involved in becoming a web designer, are just one part of a much larger picture.  The web designer is focused more on the layout or the look and and feel focusing more attention on how a web site looks rather than how it works. Once learning the basics, the web designer can use technologies such as HTML and CSS, along with flash and video to create a visual theme for the web site.

On the other hand the web developer focuses on creating solutions to a problem. Problems such as how to gather data from clients, how to interconnect web sites to data bases, how to get web sites to communicate with other web sites.  Tools of the developer often include various server side frameworks such as PHP, Perl, Python, and data bases like MySQL.  While the web designer may create a form to gather the data, the web developer often had the responsibility to create a back end to manage the data once it gets to the server.

CIW defines Web Designer and Web Developer

In an effort to get a professional opinion on the definitions of Web Designer or Web Developer let us take a look at how they are defined by CIW, a certification organization claiming to be,"the world's fastest growing vendor-neutral Web technology education and certification programs for professionals."

"The CIW Web Design Specialist course is for the individual who wants to develop the skills necessary to specialize in Web site design. In this course, you will build upon your basic Web authoring skills to learn the essentials and best practices of Web design, including design theory, tools and technologies."

 "The essential combination of a front-end scripting language, a back-end programming language and the skills to integrate them with a database is what makes a Web Development Professional."

Your Skills and Interests Will Steer You in the Best Direction

Start your basic training as discussed in the article "What Should I Learn to Become a Web Designer?" and as you progress, your personal interests and skills will ultimately help you to answer the question of which path is best for you.

If you are more artistic than technical, the role of web designer may be for you. The web designer is also more likely to directly interface with the client as they develop the look and feel of the site. If you would rather deal with problem solving and technical issues, then you may find yourself in the role of web developer. 

Why choose Drupal as a website building tool?

Why I choose DrupalThere are just too many content management systems out there for one person to do their own comparisons, but over the years I have done as much as I could to do some testing to make my own personal kick the tires comparisons.

My technology websites were first done in the phpWebSite content management system and later XOOPS, before I eventually built the sites using Drupal.

After many years of website building, and using numerous tools, I have chosen Drupal as my primary website building tool.

Drupal Emerged as the Winner

I have personally tested and used phpWebSite, PostNuke, Xoops, WordPress, Joomla, and Drupal, as well as a few less popular content management systems over the years.

Many of the content management systems has features that I wish the other would have. Some were much easier "out of the box" to customize, some had more intuitive administration.

I got to the point where I had to make a commitment to one, as trying to stay on top of changes on many different systems, and always trying to compare features, was too time consuming.

I focused my effort to select a content management system on the answer to the following two questions.

1) Does the product look like it has been steadily growing and being developed and does it look like it has a clear direction moving forward?

2) Does the product have a professional and helpful support community where I can find help quickly and easily online?

When I focused the stability of the developer and the quality of available support it became clear that Drupal would emerge as the content management system for the Guru 42 family of sites.

Installing Drupal yourself

Drupal is fairly easy to install, and most LAMP based web hosting companies offer an automated installation. Drupal 7 does offer support for Microsoft IIS but I use it  on LAMP servers. LAMP is an acronym for Linix Apache MySQL PHP. Drupal uses the MySQL database to hold the data contained in the website and the site is based on PHP.

Look around the Drupal community to get an understanding of what you can do to expand your Drupal install beyond the basic package.

Modules are the blocks of code that allow Drupal to perform its tasks.  Basic modules can be activated to use Drupal as an online forum or blog.

Scalable feature sets are implemented through plug-ins or modules that are developed independently of the Content Management System. Additional features can be easily installed to extend functionality of the site without having to do a major rebuild.

Thousands of modules can be downloaded for free from the Drupal website to allow Drupal to do just about anything possible with a website.

Themes are the blocks of code that give Drupal its look and feel.  The basic software comes with a few themes that can be changed to various color schemes. There are hundreds of themes that can be downloaded for free from the Drupal website.

Drupal Website Building Notes

I began using Drupal with version 6.  The administrative interface was often criticized as not being user friendly, to learn it you need to invest some time.

Drupal version 7 was released in 2011. All new sites developed after 2011 are using version 7. Older sites will eventually be moved from Drupal version 6 to version 7.

Drupal version 7 made site management much easier than version 6 with a much cleaner administrative interface and a much improved update process.

Version 8 is in development, and I am anxious to see what new tools will be available. If Drupal keeps going as it is now it will separate itself from the pack of content management systems.

If you have questions on site building and Drupal from the perspective of a business owner or manager looking for a content management or web building solution, check out this information on Content Management Systems at SmartTechnology.info. 

The website Philosophyguru's Drupal Playground at philosophyguru.org where is my online sandbox to test ideas and make notes on Drupal issues.  The notes on this site are not a complete outline of issues, but represent a live notebook of sorts for recording ideas and issues.

LAMP technologies take websites beyond HTML

HTML documents are plain text files, or static documents that live on a computer connected to the Internet, ready to be viewed. A Web server waits for and sends out those files in response to requests from Web browsers.

There is nothing dynamic or interactive about HTML documents, they are "flat" files. If you want your site to do something dynamic or interactive, like handling information in an HTML form, you have to run a separate program outside your Web server.

Many web designers create web pages and graphics on a desktop computer, and upload them to the server, having their only exposure to the server as a very small part of a much larger process.  For the same reason that a basic understanding of networking is extremely helpful to a web designer, having a basic understanding of web server technology helps to work with other technology team members in troubleshooting problems, as well as having a better understanding of  the total picture of all the elements in a functioning web site.

LAMP technologies make website dynamic

In web technology the acronym LAMP refers to the core components of an open source web server, Linux - Apache - MySQL - PHP.

Linux is the operating system, Apache is the HTTP Server, MySQL is the database software), and PHP is the scripting language designed for Web development that bring the dynamic Web pages to your desktop web browser.

The original authors of these specific components did not design them all to work specifically with each other. The open source community and web developers sharing open source principals have developed the LAMP tool set to work well together.

Using LAMP technologies for dynamic updating and interactivity features has taken websites from the early hand coded HTML pages of the 1990s to the interactive multimedia pages of today.

Apache, while considered an HTTP web server application, is usually taught as part of the Linux operating system, as it is a core component of any installation. As a web designer you do not need a comprehensive understanding on Linux, but the ability to execute a few tasks will come in handy as you troubleshoot problems.

As a website designer or developer you will need to understand databases and at the very least, you should have the ability to use web based tools such as phpMyAdmin, a free Web-based front end widely installed by web hosts, to create a database as well as import and export data.

While HTML is the core scripting language that is used to create a web page, Perl, PHP, and Python are all languages used in addition to HTML to create dynamic web pages. Once you get a very basic understanding of how they work, it is likely you will focus of learning one of them, or perhaps even a similar web language to create a dynamic page.

PHP is the most commonly used scripting language in open source content management systems.  It is an HTML embedded scripting language designed for producing dynamic web pages. Tags can be mixed with regular HTML tags so PHP code is needed only where a dynamic portion of the page is desired.