~Quickstart For: Making A Webpage~
Hello, and welcome to "Making A Webpage," where we will hold a discussion on how you can begin making a webpage. For this session, please have these items on hand: a notebook of paper, a ruler, a pencil, and a highlighter. Also, have this available on your computer: a blank document on Notepad, a graphics program of some kind (if not, that's okay), and your internet browser, such as IE or Firefox.
To start with, we are going to help you generate a webpage from scratch, from your own ideas. We will start with something basic using a table layout.
- Step One: Open your notebook and map out what you'd like your webpage to look like. Include a place for a banner with your page's name on it, a place for navigation and links (try it with two columns on either side of your content and under your banner), and an area for content to be placed. Think this up for a while and then use your ruler and pencil to draw out your demo page. Now, highlight your banner and we'll start on that.
- Step Two: Open up a graphics program, such as Paint or something. (if you don't have one, check the web to find a program you can download.) Make your banner's design using the graphics program of your choice. Make it simple, for now, but coordinate it with your theme.
This is what my banner is going to look like: click here to see. Yes, it's not that great, but it'll serve it's purpose for now.
- Step Three: Now, see what you wanted your side navis (where your links will go) to look like. Highlight them on your paper and begin to work on them. Make your navis on your graphics program. Your navi should be able to repeat all the way down the page without looking weird, so do something like my navis, but in your own color scheme and design. Select the top part of your right navi and save it. Then, do this for your left navi as well.
This is my right navi: click here to see. This is my left navi: click here to see.
To be honest, you don't need to make the navis look that much different from each other, but as you can see I did flip the images horizontally to make them contrast each other slightly. You can try that. Notice how if you repeat the images vertically, they will look just fine. If you make your images have a border or add a line to them, the line will also be repeated. Avoid doing this. You can add a border or another image onto your navi later in the actual HTML code.
- Step Four: Now, let's make the content area. Highlight your content area on your paper so you know that this is what you are working on now. This part will be pretty easy. Just choose a solid color for your content area because this will also be an image that will repeat and stretch to your layout size. The color I'm going to choose will be blue. This is what my content color will be: click here to see.
See how I only needed to select a tiny bit of it? Try doing that because your browser will be able to load it faster if the image for a background is small, and it'll repeat to as big as you'd like so that it'll fit on the page.
- Step Five: Alright, that part wasn't so hard, was it? That was the fun part. Now comes the harder to handle coding. It won't be too difficult because I'll give you the code that I am using for the layout I'm working on. From there you can edit it to fit the layout you are making. Remember to put in the proper file extensions and sizes in where the code calls for it. You'll probably just need to edit the CSS of the code and it won't be too trifling. If you do have a problem however, and you really are lost, you can check out the HTML guides that are on the site. They are very easy to understand--made for newbies of all kinds. And, if you need more explainations as to CSS terms, we also have a guide for that at the Help Station. If you really still have quesitons, or if you noticed I coded something wrong (Ooops, that happens sometimes), then feel free to contact me.
Alright, here is the code. To preview what my layout turned out to look like, copy this code. Save it to your blank Notepad document and save it. Then, open it up in your browser. Then you can edit the different components of it to make your own layout.
And, well... now you can say you made your very own webpage! Of course, there is still much more to learn, so don't think this is the end. There are many other things you can do and add to your webpage. Head over to the Help Station to find more web topics that can help you out. And, don't hesitate to ask me directly for some help. Hope this guide gave you an idea of how to making a webpage.
Pokémon is © to Nintendo and is not affiliated with us in any way. All content and images on this site © to Stareon's Hideout, unless otherwise stated.
