What You Need - A Checklist
OK, before we get going with creating your own website, there are a few things to think about and gather together.
An Idea
Before creating your own website, you need to have some idea of exactly what you are trying to do with it and what you would like to accomplish.
The reason I mention this again on the checklist is because I believe you should put a little planning into your new website. It is best to think about your ultimate goal and then work backwards. For example, are you looking to create a site to talk about yourself and potentially "sell" you to recruiters? The goal here would be an impressed recruiter. They will need to have information about you and will want to see that information on a professional-looking website. Want to keep your family updated on what is happening in your life? You'll probably want a site which allows easy updating often (a blog).
With a relatively firm grasp of where you want to go with this, let us get into the different tools you are going to need to get moving.
A Web Host
A web host is a company which you hire to provide a web server to you for your website. Most web hosts have a collection of web servers at their disposal. They will rent space on one of their servers and make that available to you for your website. Your website will share the same server with other websites, however you will not be able to tell this is happening in most instances.
Only sites which are very busy with high traffic usually require a server dedicated specifically to it. This would be called a "dedicated server". Most new sites do not require a dedicated server. If you are just starting out, it would definitely be overkill to invest in a dedicated server. Prices for monthly rental of dedicated servers are significantly higher than shared servers.
An FTP Client
A web host is going to provide space to store your website and have it be publicly accessible to other Internet users. However, you need a program to transfer your website from your own computer to your web host. If the files which comprise your website sit on your own computer, nobody can see them. Putting them on your server means others can see them.
FTP stands for File Transfer Protocol. It is simply the way two computers can move files between them. An FTP client is a program which you run on your computer which allows you to upload and download files from any remote computer - in this case, your server.
There are many, many FTP clients available, however they all more or less look and function the same. The standard layout is two panes - one side shows the files on your own computer and the other side shows files on your server. You use buttons to move files from one side to the other and vice versa, thereby moving files between the two computers.
You will need an FTP client to transfer your website to the Internet. Some web hosts provide a web-based way to move files to your server, however these systems are usually not as simple and convenient as having a real FTP client on your computer.
Here is a list of FTP clients you can look at, download and install if you like:
An HTML Editor
You will also need a program to actually create your website with. This is typically called an HTML Editor. HTML stands for Hyper Text Markup Language and is essentially the computer language used to provide formatting to any website.
There are two very different ways to create a web page:
There are many WYSIWYG HTML editors available. My personal favorite is Dreamweaver, provided by Adobe (formerly Macromedia). Dreamweaver is often considered to be the best WYSIWYG website designing program on the market and it is widely used by professionals. That said, it is still pretty easy to use and I am confident than a beginner would not be confused by it - especially after learning the basics provided in this course.
Other options available include:
An Image Editor
Most websites have images on them. While there are TONS of images already on the Internet that you can grab and use on your own website, before too long you're going to want to make something that you cannot find. This where an image editor comes in.
It is perfectly possible to get started making your own website without an image editor. It will also take additional instruction to learn how to use an image editor. But, for now, I will simply list a few options available for your exploration:
CSS Editor
CSS stands for Cascading Style Sheets. This is a universal way to control the formatting of an entire website from a single file. We will be covering the use of CSS in more advanced courses, but I will list a few available CSS editors here.
You do not need a CSS editor at this early stage if you are new to website creation. It is useful to get acquainted with HTML before you begin to delve into CSS. CSS is not complicated, but understanding it's use requires an understanding of HTML.
Choosing a Web Host
One of the prerequisites for having your own website is having a place to PUT your website. This is what a web host is. It is simply a computer which has been set up to deliver content to Internet visitors on request. Choosing a web host can be a daunting task - especially if you are new to all of this. Even seasoned website veterans can find themselves having a difficult time differentiating between hosts because of the similarity between them and the fact that almost all of them say the same thing. In this lesson, we will go through the basics of what a web host will offer you and lead you through the terminology. I'll also give you a big list of things to watch for when shopping for a home for your website.
Web Hosting Terminology
Most web host packages boast the same features in differing levels. Here is a basic rundown:
Evaluation of Hosts
If you try to judge web hosts only by what they say on their website, you will be confused. First of all, most of them say the same thing. Secondly, it is not unheard of for web hosts to stretch the truth. There are many reputable web hosts out there. There are also people running hosting companies out of their garage and trying to pass off as a large company.
The absolute best way to shop for web hosting is to read the reviews. Look around online and read what people are saying about particular web hosts. Here are some sites you can check out:
Also, be sure to search Google for any host you are evaluating. This is a great way to get user reviews.
Some Things to Watch Out For
As mentioned earlier, one of the complicated things about searching for a good web host is that you can't always trust what they say on their website. The reputable hosts are trustworthy. However, there is very little stopping a guy with a server in his bedroom from putting up a nice looking website that makes him look like a huge company. Here are some things that you may see on their website:
Other Things To Be Aware Of
How To Find A Good Host
I am not trying to scare you away from hosting providers, as, again, more times than not you will not have a problem with whomever you decide to go with. If you are looking for a provider, here is a quick list of pointers which may help you out:
Basic Introduction to Website Files
When making your own website, it is important that you have an understanding of the different types of files you will be working with and what they are. In this lesson, I will introduce the common file types to you.
First off, realize that your website is going to be made up of files. These files are no different than the files you have sitting on your hard drive. Whether you have Word documents saved, Excel spreadsheets, photos or any other type of file, they are all just files. The only difference is that the files for your website will be sitting on your web server rather than your own computer. Files come in different types, designated by the filename extension (the 3 or 4 letter extension after the period in a filename).
HTML (.html or .htm files)
HTML stands for hypertext markup language. It is the formatting language used to put together a website. By the time you complete this course, you will see just how simple HTML really is.
HTML files usually come in either a .html or .htm file extension. Each HTML file would represent a single web page. If you create a file containing HTML, save it with a file extension of either HTML or HTM and upload it to your seb server, you could pull that web page up simply by point your web browser to the file you just created.
JPEG (.jpeg or .jpg files)
A JPEG is simply a type of image file. See, image files can be saved in a variety of different formats. The difference between the formats comes down to compression methods, color depth and other things which are usually not visible to the naked eye. JPEG images, though, are very common online because they offer a good balance of file size versus photo quality. If you are going to place an image on your web page, there is a good chance that that image will be a JPEG image file.
GIF (.gif files)
A GIF file is another type of image file commonly used on websites. The primary difference between a JPEG and a GIF file is that the GIF file cannot exceed 256 colors in the image whereas a JPEG can go up to 65 million different color combinations. For some types of images, GIF format will result in a smaller file size than JPEG.
GIF images also allow two things that the JPEG format will not:
PHP (.php, .php3, .php4, .phtml files)
PHP is a programming language which allows the creation of dynamic, interactive web pages. When a person creates a PHP file and uploads it to the web server, the script will be run when you point the web browser to that file. The PHP code itself is processed by the web server BEFORE the user will see anything in the web browser, and the output created by the PHP file must still be HTML so that the browser can actually display it. We will go more into PHP elsewhere at PCMech EDU. It is also important to realize that your web server must be set up specifically to run PHP.
CGI (.cgi files)
CGI is another type of script (similar to PHP) that can be run on your website. Many web hosts will provide freely available scripts which you can use with your website for free. Often these provided scripts will be CGI based. Typically, CGI files would be run from a directory on the server called "cgi-bin".
Got Another Type of File?
The above breakdown only mentions the most common types of files used on a website. It is, by no means, comprehensive. If you come across a file extension that you are not familiar with, you can use Filext.com to look up the file extension and get a description of it. In fact, you can use this website to look up any file type you want.
Introduction to HTML
OK, it is now time to start actually creating a webpage. In this lesson, I am going to introduce you to HTML. In the following lessons, we will get into specific areas of HTML.
HTML stands for Hyper Text Markup Language. An HTML file is just a text file which contains small "markup tags". A markup tag is a small little bunch of text which tells the web browser how to display things on a website. And HTML file must have an HTM or HTML file extension, and that file can be created in any simple text editor. HTML is NOT a programming language.
In this and the next several lessons, I am going to show you the actual HTML code and how to create it by hand. You can use a WYSIWYG editor to create HTML pages much quicker, but I am a firm believer that true understanding of this subject requires the ability to manually create HTML. The subject is not complicated at all, as you will soon find out.
Create Your First Basic Webpage
Let us now create our first basic webpage. If running Windows, open up Notepad. If running OS X, open up TextEdit or SimpleText. Now, type in the following:
<html>
<head>
<title>Title of page</title>
</head>
<body>
This is my first webpage. <b>This text is bold</b>
</body>
</html>
Now, save this file as "mypage.htm". Now, open up your file manager (Explorer in Windows, Finder in OS X), navigate to the directory you just saved mypage.htm, and double-click that file. You will then open up this new web page in your web browser. Now, this file is currently on your hard drive and that means nobody can access it besides you. The moment you upload this file to your web server, it would become accessible via the Internet.
Structure of The Document
Let's go over the above example. This illustrates the basic structure of any HTML document.
The first tag in your document is <html>. This tells the browser that this is the beginning of a new HTML document. Note that the last tag of the document is </html>. All HTML tags must be closed, telling the browser that any particular HTML tag is no longer in effect. You will notice that all HTML tags in this document are first opened then closed using the same exact tag, but with a backslash.
The header section of an HTML document is between the <head> and </head> tags. In our above example, the only information in our header is the title of the document, referred to as the TITLE tag. Anything placed in the TITLE tag will appear in the title bar of your web browser's window. In the above example, you will notice that "Title of page" appears in the title bar of your browser.
The text between <body> and </body> is the part of the webpage which is visible to a viewer. This is the only part of the document which is visible in the web browser.
The <b> and </b> tags are included here to illustrate a simple BOLD. Anything surrounded by <b> and </b> will show up as bold text.
Formatting Text in HTML
The first and most basic skill in HTML is putting text on screen and making it look the way you want it. In the prior lesson, we went over the basic structure of an HTML page. Simply put, to put text on the website, you simply type the text into the BODY area of the HTML page and introduce some HTML to make the text look right. In this lesson, I will introduce the HTML tags you will need to accomplish that.
The Paragraph
In a text file, you start a new paragraph by simply hitting the Enter key a couple of times, then starting a new paragraph. In HTML, this doesn't work. If you simply type text into your HTML document without any formatting, it will look like one, huge run-on sentence. To separate text into paragraphs, you must surround that paragraph in paragraph tags. The paragraph tag is <p> and the closing tag is </p>..
You can control the alignment of a paragraph by introducing an attribute to this paragraph tag. <p align="left"> will align the paragraph to the left. <p align="right"> will align the entire paragraph to the right. <p align="center"> will align all the text in the center of your screen. <p align="justify"> will justify all text.
Headers
Headers are used to delineated areas of text on the page. For example, the words "The Paragraph" and "Headers" above are headers and, as you can see, helps delineate sections. It is useful to use headers on your web page. A big, long bunch of paragraphs can be difficult to read for your visitors. Headers allow readers to quickly scan the page to find the areas of interest to them.
There are multiple sizes of headers available in HTML. <h1> is the largest size of header. Then, it goes down from there: <h2>, <h3>, <h4>, etc. Each higher number will display smaller text size in the header. See below.
Note that use of the header tags also introduce automatic spacing between the lines. It is similar to paragraph formatting in that regard.
Bold, Italics, and Underlining
Three of the most used basic HTML text formatting tags are those that bold, italicize or underline text.
To bold text, you would surround it either by the <b> or <strong> tag.
<strong>This is bold text</strong>
will appear as
This is bold text.
To italicize text, you use the <i> or <em> tag. So,
<i>This is italicized text.</i>
will appear as
This is italicized text.
And, lastly, underlining text uses the <u> tag. So,
<u>This is underlined text.</u>
will appear as
This is underlined text.
Changing The Font and Font Size
Unless a particular font is specified in your HTML, your web browser will show all text using a font called "Times New Roman". If you want to use another font, you have to specify this in your HTML. Now, today, many sites do this using stylesheets. This will be covered later in the course, but before we get to that point, you should learn how to do it the classic way.
First, a lesson on fonts. A font is simply a style of lettering. For example, if you type a document into your word processor, you can select text and choose from different fonts in a dropdown menu to change the look of the text. Now, those fonts are coming from files on your hard drive. In Windows, these files are in your C:/Windows/fonts folder. Any program on your computer which allows font selection will get the available fonts from those installed in this folder. On your web page, any font installed on the computer can also be used in HTML.
To change fonts in HTML, we will now introduce the concept of the tag versus the attribute. Everything we have covered so far is an HTML tag. Each tag will function by itself. An attribute would be any modifiers added to a particular HTML tag. Each tag has certain, specified attributes which are available to it. To demonstrate, let me now introduce you to the <font> tag. And to change the font, we will introduce two attributes of face and size.
<font face="Arial" size="4">This is text in the Arial font at size 4.</font>
This HTML will display as:
This is text in the Arial font at size 4.
OK, you will see that we have managed to change the font. Now, we did this using the <font> tag. We introduced two attributes to it for face and size. The face is simply the name of the font. The size is the letter size, and the higher the number means the larger the size.
Here is a list of common fonts you can use:
|
Common Fonts |
|
Arial, Arial, Helvetica, sans-serif |
|
Arial Black, Arial Black, Gadget, sans-serif |
|
Comic Sans MS |
|
Courier New, Courier New, Courier, monospace |
|
Georgia, Georgia, serif |
|
Impact, Impact, Charcoal, sans-serif |
|
Lucida Console, Monaco, monospace |
|
Lucida Sans Unicode, Lucida Grande, sans-serif |
|
Palatino Linotype, Book Antiqua, Palatino, serif |
|
Tahoma, Geneva, sans-serif |
|
Times New Roman, Times, serif |
|
Trebuchet MS, Helvetica, sans-serif |
|
Verdana, Verdana, Geneva, sans-serif |
|
Symbol, Symbol (Symbol, Symbol) |
|
Webdings, Webdings (Webdings, Webdings) |
|
Wingdings, Zapf Dingbats (Wingdings, Zapf Dingbats) |
|
MS Sans Serif, Geneva, sans-serif |
|
MS Serif, New York6, serif |
Note that when you reference a font on your webpage, the font you specify must be installed on the reader's computer for the site to look correct. A common mistake if new web designers is to use a font which they have installed on their computer but which might not be installed on another's machine. The result would be that the web page looks great to you, but to them it will appear as "Times New Roman". The fonts referenced above are common to all computers. If you use a font not mentioned above, keep in mind that it may or may not be present on the computer of your web page visitors.
Font Color
Changing font color is as simple as adding another attribute to the <font> tag. To illustrate:
<font color="red">This is red text.</font>
is going to appear as
This is red text.
Many colors can be referenced by name as we did above. To introduce any variations in color, you will need to use what is called a hex code. A hex code is a string of 6 characters, a combination of letters and numbers, preceded by a number sign (#). For example, #000000 is a hex code and happens to represent the color of black. #FFFFFF is the hex code for the color white. Honestly, there is really no way to memorize all the available hex codes. Over time, you will come to remember some of them. Until then, you will need to use a color chart to find the hex code of a color you wish to use.
Using a hex code to designate font color is done the exact same way as above:
<font color="#33CC00">This text will appear in a shade of green.</font>
will appear as
This text will appear in a shade of green.
There is a color hex code reference at the end of this course for your reference.
Special Cases
There are a few formatting options which you may have use for every now and then.
<blockquote> will set aside a bunch of text as a quote. It will indent the whole paragraph.
The <pre> tag is used to enter straight text into the document without the need for formatting. The browser will display the text as raw text. Notice how no paragraph tag is needed to start a second line inside of the <pre> area.
Putting It All Together
This lesson throws a lot at you at once. Feel free to reference it any time. Now, in practice, all of these text formatting tags can be mixed and matched to produce the effect you want. You always need to make sure you properly close any tag that you open (the prior lesson addresses this). But, you can easily blend tags. For example:
<strong><i><u>This text is bolded, italicized AND underlined.</u></i></strong>
will appear as
This text is bolded, italized AND underlined.
You will also notice how I closed each HTML tag in the order that I introduced it. In the above example, I closed the <u> tag first because it was the last HTML tag to be used. HTML tags are nested and must be closed in the proper order.
As long as you close every tag you start and do so in the proper order, you can mix and match these tags to easily create a textual web page which all the formatting beauty you would in your favorite word processor