Welcome to ENGH 375: Web Authoring and Design
Before you start to create and design your website, you should probably know some basic things about how websites actually work. Despite the Internet's ubiquity, many people are not very familiar with how it works.
The Internet, which is the now-global system that connects different networks across the world, was first created in 1969. It should not be confused with the World Wide Web, which wasn't developed until the 1990s and is a system of interconnected documents that are called web pages.
Let's start with the URL, which is short for Uniform Resource Locator. The very beginning of a URL is the protocol, usually seen as http://, which stands for hypertext transfer protocol and is the foundation of digital communicaiton on the World Wide Web. The top level domain (TLD) is the part that appears after a website's domain name (.com, .org, etc.), and it indicates the kind of website a domain is. For example, .com usually indicates a commercial site, .gov is for a government site, and .edu is for an educational institution like a school or college. Countries can have their own TLD; for example, Australia is .au. Everything after the TLD is the directory and directs you to specific servers within the domain with the last one pointing to a particular file.
It can help to think of websites as structured like file folders on your computer, where you have a main drive that contains different folders, which in turn contain files. Also remember that the main page of a site will almost always be labeled index.html, which is the default and therefore not something that you usually have to manually type in when searching a URL.
After you enter a web address into the search bar, that address goes through a router followed by the Internet Service Provider (ISP), which turns the address into a number that then goes through other routers until it connects with the server indicated by the web address. That's the process that takes you to different websites.
Remember that different browsers have different standards for webpages, though it's gradually becoming more uniform.
There are three levels of design for a website: user experience, which determines how easy a site is to use and navigate; aesthetic, which is how good the site looks from a visual standpoint; and functional, which is how effective the site is at doing whatever it's actually supposed to do. It's important to make your site accessible and easy for users to operate, since otherwise, they won't want to visit it.
Web design also consists of 5 planes: the surface plane, the images and text that make up what the site looks like (in other words, what's on the surface); the skeleton plane, which is the elements beneath the surface including buttons, controls, images and text blocks and should be designed to optimize the arrangement of elements for maximum efficiency and effect; the structure plane, which is the organization of site pages, defining how users get to a particular page and where they can go from there; the scope plane, which defines what the overall features and functions of the site are (in other words, what you need the site to be able to do); and the strategy plane, which incorporates what both the site-runners and the site users what out of the site.
You should approach your website with a plan. First, consider what your site objectives are and what your users' needs will be. From there, you can figure out the functional specifications and content requirements, which will help determine the interaction design and information architecture of the site. Next, design the information, interface and navigation, and finally, you should end with the visual/aesthetic design of the site. This process takes you from the most abstract factors that go into site creation to the most concrete factors.
In order to create a website, there are two software programs that you should have. The first is something that can be used to compose code, like Notepad++ for PCs or Text Wrangler for Macs. The second is a file transfer program like SSH or FileZilla (for Macs). These are all free, open source programs. You probably also want to have an image editing program like Photoshop or GIMP.
