Main Content

Updates
To Do List
You
Health and Beauty
Reads
Jenni
Quizzes
Tutorials
The Domain
Dollmakers
Link Star-Girl.org
Question?
Plug Your Site
Index/Blog

Extra

Change The Skin
Jenni Fanlisting
Star-Girl.org Fanlisting
Webdesign Question?
Report An Error
MT Blog Archives
Nov-Apr 04 Archives
Feb-Nov 03 Archives

Sites and Projects

Shining Top Sites
Creme De La Femme
Starshine Boards
Starstruck Zine

Starshine.la Login

Username

Password



Linkage




Etc.

refreshes today
Tutorial Set > Making a Website. STEPS 3 & 4: Creating and Editing Pages


Step 3: CREATING PAGES

4. Now you need to learn how to create the actual pages of your website. However, you need to build on what you learned about folders in the previous tutorial to create a file within one of your folders. If it sounds complicated, trust me, it's not.
5. In the 'Site Manager' click the 'Add a Page' link. When the pop up window appears, type in the filename you want. I want my page to be called 'biography.html', so I've typed in 'biography'. Now in the box underneath that which says 'Folder', click the little black arrow next to the drop down menu and choose which folder you want the page to be in. I've chosen the 'Me' folder. Then press submit.



Step 4: EDITING PAGES

6. Go to your 'Site Manager', then click the folder you added the page to (mine is 'Me'). You should see the file you just created. Next to it is an icon with 'Edit' above it. Click it.



7. Now you need to add some actual code to your website. Copy what I've written below into your own page editor:



8. It might look a bit confusing, but it's very straightforward. Basically, with the exception of the TITLE codes, you've just added page tags to your page. Page tags are basically how the page is set out. The HTML tag tells the page that the coding used is HTML. The HEAD tag is the header of the page, which is where titles, css and some javascriot codes go (but you don't have to worry about those for now). The BODY tag is where your actual page content and text go. If you see a tag with a slash before it like this: </body>, it 'finishes off' the coding. So basically is signals the end of the BODY or the end of the HTML code.
9. Ok, now between the BODY tags, add your content to your page.



10. Now the basics are done, but your page is going to look pretty boring. Keep it as it is if you like, or change the font, colour and size of your text. This can be done all with one line of coding, as shown below:



11. Why are there 3 different fonts listed? Basically, if someone doesn't have a font on their computer, then they can't view it on a website. You should try to give visitors a choice of fonts in case they don't have the same ones as you. In my example above, if you didn't have the 'verdana' font, the site would automatically check for the 'tahoma' font, and so on until it found a font you have. You can list as many fonts as you like here. Font size can vary from 1 (smallest) to 7 (biggest). For a list of colours you can use click here. You can also have 'hex' colours; these are basically numbers instead of letters and work in the same way. You can find more about these using other basic tutorials on my site. Don't forget to type </font> to end the code.
12. Ok, so maybe you want to use 2 different fonts, colours and sizes. That's easy enough, just type in the coding again (or copy and paste). Use my example below as a guide:



13. Now go to File > Save. Once your file has been saved, close the page to go back to the file manager. Now click the 'biography.html' link (or whatever you called your file) to preview it in a new window. This is mine:



14. There's just a little problem...all the text is on one line. To fix this, 'Edit' your file by clicking the edit icon on the 'Site Manager' as before. Now type <br></br> where you want 2 line breaks. Just type <br> for one line break. Alternatively, you could type <p> Your Text </p>, for paragraphs.



15. Repeat step 13. This is my page:



Alternatively, you can view it here. Now create a few more pages in the same way.



To carry on with this set of tutorials, click here.


If this tutorial helped you, please link me on your site.

Star-Girl.org


Want another button? Click here.

Back | Forward

Advertised

Your Site Here?






All content and design is © Jennifer Brown 2005, unless otherwise stated. Please click *here* for more information.