Basic Website Creation General Information about Websites Before you start creating your website you should get a general understanding of how the Internet works. This will help you understand what goes on behind the scenes of your web page. The Internet is made up of thousands of computers connected together through networks. Everything you can see on the web is stored on a computer somewhere in the world. Most are stored on giant hard drives called servers found in large buildings, but any computer can be a server if it is set up properly. Every page found on the Internet has a unique, identifying address called a URL (Uniform Resource Locator). An example of a URL is http://www.google.com. o http:// stands for Hyper Text Transfer Protocol. This is a protocol used to request and transmit files over the Internet. o www stands for World Wide Web. o google is the domain name. It is a unique identification name which Google paid for. Any secondary pages on the Google site will have additional words or numbers in the address to distinguish it from the main page. o.com is a top-level domain name. Every domain name ends in a top-level domain name, which is always either one of a small list of generic names (three or more characters), or a two-character, territory code..com is used for commercial sites. There are other generic top-level domain names, which you will probably recognize:.org: generally for non-profit organizations.net: for network providers.mil: for military organizations.gov: for government organizations.edu: for educational organizations 1
Pages are constructed out of text and character strings. The most basic is called HTML (HyperText Markup Language). Web browsers like Internet Explorer, Mozilla Firefox, and Netscape Navigator read this language and interpret it into the graphical format you see on your computer screen. Other types of web languages are SGML (Standard Generalized Markup Language), XHTML (extensible Hypertext Markup Language), JavaScript, PHP, and many more. Web developers use a combination of these languages to construct pages. The Appendix to this handout has some detailed instructions on how to build a page using HTML. Most general web pages end with an extension of.htm or.html. This tells the web browser that the page is a HTML document so it will interpret the code on the page correctly. The reason you don t see this when you visit a page such as www.google.com or www.yahoo.com is because that top-level page is named index.html or index.htm. Browsers follow a rule that states that all home pages are named index.htm or index.html. The browser will find the place on the internet where google s pages are located and they will automatically pull up the one named index when you type the address into the address bar. Websites cost money. Some places offer the service for free in hopes that you will like the free version, want more options, and then decide to pay for it. If you are building a site from the ground up you will have a few different costs. o The first is the domain name. In order to reserve and use a unique name for yourself you will have to pay a yearly fee for the use of the name. If you are going through a free web-based builder you will not have to purchase a name. A few places to go to register and purchase a domain name are: www.godaddy.com www.networksolutions.com www.register.com 2
o Another cost is server space from a hosting service. The host company will place your web pages and pictures on their servers for a yearly fee. These servers are always on and connected to the Internet so that anyone can view them at any time. Most of them also provide you with additional features such as an email account, site statistics, technical support, a discussion board, and a blog. To see a lists of service providers go to: http://hostjury.com/reviews/ o An optional cost is the software used to create the site. If you are going to be creating it yourself you will need a program to either type the code into or have the program build the components for you. (See the next section for a list of programs.) Websites use bandwidth to transfer files (pages and page content such as pictures) from the server to your personal computer whenever you view a web page. Wikipedia describes bandwidth as such, In website hosting, bandwidth is the amount of information downloadable from the webserver over a prescribed period of time. In essence, it is the rate [data/time], but the time in this case is not seconds but rather a month or a week. Web hosting companies often quote a monthly bandwidth limit for a website, for example 100 GB/month. If visitors to the website download a total greater than 100 GB in one month, the bandwidth limit will have been exceeded. Ways to Build a Site There are many different ways to create a web page. Some people like to type the code by hand. Others use a special program called a Rich Text editor or WYSIWYG (What You See Is What You Get) editor that creates the code for them as they place text or pictures into the page area. And then there are the web-based applications that will let you build your site right there on a web page with a Rich Text editor. Programs used to type code by hand: Notepad UltraEdit Word will work if you save the file as a plain text document and manually enter.htm or.html at the end of the file name. To see an extensive list of other programs visit: http://en.wikipedia.org/wiki/list_of_text_editors Common Rich Text editor programs: Microsoft FrontPage (now called Microsoft Expression Web) Macromedia Dreamweaver Microsoft Visual Studio To see a list of other programs visit: http://en.wikipedia.org/wiki/list_of_html_editors 3
Free Web-Based applications: www.sites.google.com www.bravenet.com www.geocities.yahoo.com www.wetpaint.com www.freewebs.com www.facternet.com www.tripod.lycos.com A large list can be found at: http://www.wikiclassifieds.org/wiki/web_hosting Before You Start Before you start building a web page you should have an idea about what content you are going to place on the pages. It can be about anything you want. Keep in mind, though, that some free services do not want you to sell anything with their service. You might need to purchase a hosting plan in order to buy or sell through your site. Specifics on permissions can be found on the hosting service s terms and conditions page. Some examples of web pages include: o A general page all about yourself and the things you do http://katie543.googlepages.com/home 4
o Specific pages dedicated to a particular content or subject area http://katie543.googlepages.com/gummybears o A place to put vacation pictures http://katie543.googlepages.com/vacation 5
http://katie543.googlepages.com/france o Review books o Post family photos o Inform others about your daily life like a Blog o Declare your love for cheese o The possibilities are endless! It s up to you! Choosing a service is also important. It s important to research the different options and choose the one that best fits your needs. You may not need a site that you pay for. A free site may satisfy your needs. Out of all of the free services www.bravenet.com offers the most extra features and provides more server space than most others. On the other hand, it is rather complicated to navigate and use, and there are ads displayed on your web pages. www.geocities.yahoo.com also offers a lot of server space. It doesn t offer as many extra features as Bravenet, and it also places ads on every page as well as being somewhat complicated to use. www.freewebs.com, www.facternet.com, and www.tripod.lycos.com are very small in comparison. They do not offer a lot of usage space, thus limiting what you can put on your pages. www.wetpaint.com is a free service that does not have a limit on usage space. You can upload as many pictures as you would like or create as many pages as your heart desires. The downside is that it has a lot of extra text surrounding any content you add to the pages. It looks messy. For our purposes, we are going to use the service by Google (www.sites.google.com) for this class. It is the easiest to learn and allows you to create nice looking pages with a very generous amount of space (100MB). 6
Signing up for a Google account Go to www.sites.google.com. **Remember this URL! It s where you will go whenever you want to sign in and modify your new pages once your page has been created. If you do not already have an account with Google you will need to sign up for one. 7
To sign up for a Google account you have to put in your current email address (which will now be your Google user name), a password, and accept their terms of service. 8
If you already have a Google account or you finish with your sign-up process you will be taken to this page. Click on the Create a Site button to continue. You will need to choose a Site name for your page. (It can be anything and be changed later.) You will also need to choose the ending of the URL for your new site by typing into the located at field. You cannot change the location field later, so choose wisely. Then continue choosing a few site settings and click on the Create site button. 9
Creating the pages Edit Page You will be brought to your home page to begin editing it. In the future, the Edit Page button will allow you to edit the content of this current page. You can type anything you want into the page content area or add a variety of other things like pictures, links, and gadgets of many kinds. Besides the standard formatting toolbar you would find in any word processing program that includes things like font size, font color, alignment, bold, italics, bullets, undo, redo, etc. you also have access to a few menus: 10
The Insert menu has a lot of different things that you can add to your web page. Besides images, links, a table of contents, and a horizontal line you can add a Google calendar, a Google Document from Google Docs, a video from You Tube, and other gadgets. To see a full list of Google Gadgets click on the More gadgets item at the bottom of the list. It will take you to a window that will allow you to add any gadget that Google makes. The Format menu will allow you to do a little more that isn t in included in the buttons on the toolbar. You can choose preset heading settings for larger text sizes as well as do things like strikethrough, superscript, subscript, and alignment. The Table menu will allow you to insert tables of many sizes. You also have the usual table functions like inserting and deleting rows and columns. 11
The Layout menu will allow you to change the page layout. Adding Images Place your cursor where you would like to insert an image. Then click on the Insert menu and the Image item. This window will open up in your browser window: Click on the Browse button to upload an image from your computer or click on an image that you have already uploaded to add it to your page. 12
If you click on Browse the File Upload window will open. Find the image or picture on your computer, click on it, and click on the Open button. The image you just uploaded will appear and will be outlined in a yellow box. If this is the image you want to add to your page, click on the Add Image button. Your image will appear on your page in the original size. If you would like it smaller you can click on the letters S, M, or L. If you decide you do not want the image there anymore, just click on the Remove button. The Align functions will move the image to the left side (L), center (C), or right side (R) of the screen. You can click and drag the image around the page to reposition it if you do not like exactly where it was placed. The Wrap function refers to whether the text and images on the rest of the page are wrapped around the image or if they begin on a new line, below your image. By default it is turned off. If you want things to wrap around the image you will have to turn it on by clicking on the on link. 13
Another option in the Image upload window is to place an image onto your page from another website by entering the picture s web address. Every picture has a unique web address just like a web page. It is not the address of the page it is found on! Click on the circle next to the Web address (URL) option on the left side of the Add an Image window. If you know the address of the image you can type it right into the box. The easier way is to copy and paste the address straight from the site it is found on, however. To do this, you would need to open a new browser window so that you have two windows open. Go to the site the image is stored on. Locate the image on the page. Right click on the image so that you get a menu to open. The last option in the menu should be Properties. Click on this to open the Properties window. The picture address will be in the center. Click and drag your mouse to highlight the address. Right click on the highlighted portion and click on Copy. Go back to your web site window. Right click in the Image URL box and select Paste. 14
The image address you copied will appear in the box. If you typed or copied it correctly the image will appear below the address. Click on the Add Image button to add it to your page. Linking In order to link some text on your page to another page you first need to type the words that you would like people to click on to navigate to another page. Then click and drag your mouse to highlight that text. Then click on the Link button. In the window that comes up, you have two options: Existing page will allow you to easily link to another page you have created. If you plan on creating the page in the future but do not have it yet, you can click on the Create new page button at the bottom to create it now. 15
The Web address option will allow you to link some text to another page on the Internet. You will have to either type in another site s address or copy/paste it into this window as you did with the pictures. Saving As you know, saving is a very important step in keeping your work. Fortunately, Google saves your work automatically every few minutes. If you would like to save your work at any time in between that you should click on the Save button in the upper right corner of your page. Google will tell you at what time it was saved. After clicking on the Save button Google will take you out of edit mode. There are three buttons you need to be familiar with: Create page, Edit page, and More actions. Create new page allows you to create a second, third, fourth, etc. page. Edit page will take you back into Edit mode for the current page. More actions is where you would go to play with the settings of the overall web site instead of the individual pages. 16
Settings More Actions The More actions button has options pertaining to the one page you are currently looking at as well as a link to the overall settings of the site. You are able to Print your page, Delete it, and perform a variety of other actions. Preview page as viewer will allow you to see what everyone else sees when they come to your site. A new window will open up so you can see the public view of your page. The Page settings item will allow you to specify whether this page should be included in the navigation bar to the left, whether the page title should be displayed on the page, and a few more options. By clicking on Manage Site you will be able to change the settings for your entire site. 17
Recent site activity shows you what kinds of changes have been made to the site. Pages gives you a list of all of your current pages. (To edit one of these pages, click on the name of that page that displays in blue.) Attachments gives a list of every picture or other document you have uploaded to your site. Page templates allows you to create a new page from a readymade template. General site settings allow you to: Change the Title of your site Change the description of your site. See how much space you have used up. Label your site as having mature content. Change which one of your pages is the home page. Enable Google Analytics. Set a language for your site. Decide who can see your site activity and revision history. Copy your site. Publish your site as a template. Delete your site. 18
Sharing settings allow you to invite other people through email to either be an owner, collaborator, or viewer. An owner can make any changes that you can to your site. A collaborator can make suggestions and minor changes to your site. A viewer can merely look at your site. Also, you can choose to make your site either public or hidden from everyone in the world. The Web address item will allow you to see what your site s address is. People who want to visit your site will need to type this in to get to yours. If you prefer to purchase your own domain name and use it for Google Sites you are free to do so. That s what the Learn more link is for. 19
Under Site Layout you can change the way your Header, Sidebar, and overall Site Layout looks. You can had your own image to the site header if you so desire. The sidebar lives on the left side of your page. You can choose what to include in your sidebar. The sidebar area has a list of what is currently included. You can click on the delete link to remove individual items or click on edit to modify them. The Add sidebar item link will allow you to add other things to the sidebar like a text box or countdown to a specific date. 20
The Colors and Fonts area will allow you to modify setting for all of your pages. You can add a background image, change the background color, change the page font, etc. Themes gives you the option to change the theme for the entire site. Remember to save your changes on each page before you go on to change a different setting. To return to editing your page, click on the Return to site link at the top. 21
Create a New Site You are able to create more than one web site using your Google user name. They don t have to have anything in common or link to one another. They can be completely separate in design and content. To create a second site, click on the My Sites link in the top, right corner of your page. This will show you a list of your current sites. You also see this page when you log into your account. Click on the Create new site button to create a new site. You will be taken to a page where you will choose a name and theme for the site. 22