DIY Project Webpage

Hive13 Project
DIY Project Webpage
Status: Complete
Start Date: 3/20/2014

Help promote HIVE13 to the general public by self-posting your project webpage! It is fun and easy. Send the link to your mom and she will be so proud of you!

This project page will show you how it is done, step-by-step, using this project webpage as the example.

Step 1 = Presuming you are a responsible member, click on this link to log onto the site.

Step 2 = Knowing your username and password to log on is the hardest part.

Step 3 = Before we get too deep, first go get or create the picture image for your project. Don't make it too big or too fancy, that just takes up space and makes things run more slowly.

Step 4 = Back on the main page, you can see you are logged in at the top of the screen. Click on the Upload File command shown on the left. We are going to upload your picture to the website so it is in place and ready when you want to link to it.

Step 5 = In the Upload file window, browse to select your file name. Here the file name is "DIY_Project_Webpage.png". A thumbnail is displayed to verify the chosen image.

Step 6 = Now scroll down to the bottom of the Upload file window and press the Upload file button.

Step 7 = The website uploads your picture. Remember the file name for future reference. Now go back to the Main page.

Step 8 = Copying what already works is an honored tradition. We are going to use the text from this webpage as the starter text for your webpage. Click on the DIY Project Website project link to navigate to this project's page.

Step 9 = Notice and click on the Edit command on the top line.

Step 10 = Now highlight and copy the first few lines of web page code from this page. You want to copy the "{{Infobox Project 2 ..." structure and the first few lines of page code.

Step 11 = Paste this code snippet into a NotePad window. Keeping the shell of the structure the same, edit it to add your project page name, picture file name, and project date as indicated here. Keep the "{{Infobox Project 2..." part the same. Note that this "2" is a consistent level 2 parameter for all projects and is not a sequential number (2, 3, 4, ...) that is different for all projects. Again this is preparation for subsequent steps.

Step 12 = Go back to the Main page (or any page on the site) and type in your choice for the URL for your project webpage. The format is "http://wiki.hive13.org/index.php/YOUR_PROJECT_WEBPAGE_NAME" This URL does not exist yet, but the website will create it as a new webpage when you press Enter and go to the next step.

Step 13 = This image shows the initial creation of the DIY_Project_Webpage page. Your project page will look the same but with YOUR_PROJECT_NAME instead. Click on the Edit this page command.

Step 14 = Now go back to the NotePad window in Step 11. Copy and paste your project page text into this window as shown here. Know that creating webpages is an iterative process. It is best to start small and keep things simple at first. Over time, you learn the quirks and tricks via a series of many little baby steps as you get it all just right.

Step 15 = Now scroll down to the bottom of this window and click on the Save Page button. Or, you can click on the Show preview button and make further edits back and forth before clicking on the Save page button. Later, when you go deep into making many edits, don't forget that you must save the page or your the edits will be lost.

Step 16 = Congratulations! Your project webpage now exists! But we are not done yet. At this point it is "lost in space" and is not yet fully linked in. Your project webpage does not yet appear in the list of projects on the main page. Remember those extra lines of the "{{Infobox Project 2 ..." code at the top of the window? That is for the code automation that builds the list of active projects. We need to go back and kick some things to get the website to recognize the new project webpage.

Step 17 = Go to the Main Page. Notice and click on the Edit button at the top.

Step 18 = So OK, you have the power to edit the main window. Just because you can, does not mean you should. Please be responsible. Without changing anything, simply scroll to the bottom of this window.

Step 19: Click on the "Save page" button here as was done on step 15 before. This fires off the automation that adds your project webpage to the projects list on the main page.

Now your project web page appears in the project list and is ready for your further additions, edits, and embellishments. You are now a published HIVE13 Web Master. Expand your new-found skills by going into the code for the other web pages on the site. Copy and paste those tricks into your project web page to make it better. Learn something new and show off your new found skills as a website builder. Give back to the HIVE13 and make the website better. WooHoo!