 |
Building A SiteThis is a mini walkthrough on how to build a simple website of your own. Stop making excuses and start creating! BrainstormingThe first thing you need to do is decide what your site will be about. It can be a or just about anything else. If it's legal, you can make it. I suggest surfing the web to see if you get any ideas. Once you have come up with your brilliant theme, you will have to think what you want the content to be. It is pretty much only two categories, text and images. You will not be able to write all the text for your website in one sitting. Just write down whatever comes to mind. If you can't think of anything to write read a book about the subject, browse similar sites, or talk to someone else about it. You can always come back and add something to the text later. Make sure that you proofread everything you write because it is annoying to visit a site with every other word misspelled. Find pictures to go on your site can be hard. There are tons of sites that have them for you to download, but creating your own is almost always the best thing to do. If your computer drawing skills aren't up to par, you can scan an image. If you don't have a scanner, just go to a local Kinkos or a place like that where you can pay a little bit to use a scanner. If you really want to use an image from the web, make sure you have to creator's permission and that you give them credit for it. Never direct to someone else's image, it costs them money and uses of their space. Just save the image to your computer and upload it to your web space. Now you will have to make a blueprint of what you want your pages to look like. Make sure that you always keep a link back to your main page. Also, try not to have a lot of images on your pages because most people still use a dial up connection. Once your plans are all drawn up it's time to start the coding. BuildingNow it is time to open up your text editor. If you are using Windows try Notepad or WordPad, and I think Mac users can use Text Edit or Simple text. Anywho, open whichever one up and create new document. I will make a page along with you so just follow me. [view] How boring, lol. See how I used capital letters for the HTML tags? You don't have to do that, but I think it makes it easier to tell the coding from the text. Using the TAB key can help keep things organized too. Right, well, those are the tags you will need for every HTML document you make. The text will change though. Ah, I should explain what HTML and tags are for those people you are really confused now... The stuff in green is HTML coding. HTML stands for HyperText Markup Language, and is a computer language used to write web sites. Tags are the stuff between the angle brackets ( < > ) and act as commands in your HTML document. Tags almost always come in pairs, one starts the code and the other ends it. The HTML and /HTML tags in the above document tell your browser that the page is written in HTML. The HEAD and /HEAD tags tell the browser the stuff in between them is part of the header. Stuff you put in the header will not appear on the page. Ze TITLE and /TITLE tags will give your site a name. Just type something between them and it will appear on the title part. If you click on the view link under the above textarea you will see the title is Summie's Home Page. Next are the BODY and /BODY tags. Whatever you may type between these tags will make up your site. All clear? Good. Feel free to copy and paste that code into your editor. You should probably learn how to save it now. Go to Save As and in the save box type index.html and click okay. Make sure you pay attention where you saved the file. Open your web browser and in the Address Bar type in the directory, folder, and name of your saved HTML document. For example, C:\documents\index.html. This is case sensitive so be careful. Press go and you will see your website so far. You just made your first web page! Woot! You might want to make your page look a little cooler now that you have the basics down. Let's go from top to bottom. A nice big heading for your page might be nice. An easy way to make one is with an heading tag. There are a few different sizes. The H1 tag is huge and the H6 tag is tiny. We should add a heading tag to our HTML document now. [view] Save and refresh the browser window with your page. Well, that's a little better. We should try adding some text now. if you want to put a enter space somewhere in your text use the BR tag or the P tag. The P /P tags is a short way of typing two BR tags. Your browser will not read more than one P tag in a row so if you want to make a big space use a couple BR tags instead. Go add some text now. [view] If you want some of your text to stand out, you can make it bold, italic, or underlined. You can make a word bold and underlined if you want, just use both tags. You can also make a list like the one above. Put an LI tag in front of each word or phrase that will be on a list line. If you want a list with numbers put OL and /OL tags around the list text, and if you want and unordered list like the one above put UL and /UL tags around the list text. Ah, that was confusing, just look at how I did it below. [view] So lovely it makes your eyes burn. You need to learn how to make your site more colorful and detailed. Right now the text is at your browsers default font and size setting, so we'll just add a font tag. There are three main parts to a font tag, the type, size, and color. Try to pick a very common font, like verdana or arial. The size for fonts ranges from one to seven, one being the smallest and seven being the largest. Finally there is the font color. You should use a hex code instead of the name of a color so all web browsers will be able to understand it. Here are some common colors and their hex codes:
Let's add a background color to the page while we're at it. Find the codes I added. [view] All ramblings of Erica Feggestad 2000-2008 |
 |