[GUIDE] One Paged Site+Navigations

Discussion in 'Computers and Technology' started by Shawn, Jul 18, 2009.

  1. Shawn

    Shawn Level IV

    Joined:
    Jul 15, 2009
    Messages:
    1,989
    Likes Received:
    76
    Location:
    Somewhere, lah.
    Firstly, :lol:

    Ok, so you want to create your own website eh?
    So let’s have a brief introduction
    1. The basic website you will be learning to make here will be coded in HTML, styled with CSS and includes

    JAVASCRIPT.
    2. HTML stands for Hyper Text Markup Language
    3. CSS stands for something like Customized style Sheets
    4. A quick tip for HTML you must remember : Most tags opened have to be closed.

    Example:
    Code (Text):
    1. <html> content here </html>

    This guide will design with div tags since table tags are out-dated.

    Now, let's progress.

    Contents
    1. Opening a html editor

    2. Stating a basic website
    i) Hello World!

    3. Customizing you site
    i) Background image/color
    ii) Cursors
    iii) Fonts

    4. Adding div tags and styling them
    i) Adding divs and their content
    ii) Assigning a unique ID/Class to them
    iii) Styling and positioning them

    5. Further customizing
    i) Padding and margins
    ii) Links, hovers, active, visited
    iii) Customizing bold, underline and italic text

    6. Navigation
    i) Javascript
    ii) Setting up – IDs, styles
    iii) onClick
    iv) onMouseover, onMouseout

    7. All the other stuff that I suddenly remember



    1. Opening a html editor
    This would be the easiest section in the entire guide you will find.
    Ok, open up notepad. I assume you don’t have dreamweaver.
    In notepad, when you save your file, go to Save As.. and change the drop down from "text file" to "All Files", save it as "website.html" (remove the quotes).
    The html extension saves the file as a website.

    2. Let’s get started
    Get this into notepad. Typing helps you remember.
    Code (Text):
    1.  
    2. <html>
    3. <head>
    4. <title>My First Website</title>
    5. </head>
    6. <body>
    7. Hello World!
    8. </body>
    9. </html>
    10.  
    Ok, explaining.
    Every tag that is like
    Code (Text):
    1. </html> , </body> , </head>
    is to close their opening tags.

    Explaination:
    Code (Text):
    1. <html>
    This html tag is to start the entire website
    Code (Text):
    1. <head>
    The head tag is encloses your CSS styles and Javascript
    Code (Text):
    1. <title>
    The title tag is used to give your webpage a title.
    Code (Text):
    1. My First Website
    This is the title of your site
    Code (Text):
    1. </title>
    This closes the page’s title
    Code (Text):
    1. </head>
    This closes the head tag. Let’s read this as "slash head"
    Code (Text):
    1. <body>
    Opens your body tag. The entire page’s content goes in here
    Code (Text):
    1. Hello World!
    This is the content. For now, you will give a shout out to the world.
    Code (Text):
    1. </body>
    This closes your body tag. Signifies the end of all content on your website.
    Code (Text):
    1. </html>
    Closes the whole website

    Ok save what you have just done as "website.html" (without the quotes)
    Now, go to the place you saved website.html and open it in your web browser (preferably with firefox. Because firefox is just better)

    In the next section, we will add basic customizations to the webpage.

    3. Basic customizing
    To customize a page, CSS is used.
    Insert this between the
    Code (Text):
    1. </title> and </head>
    tags on what you typed just now.
    Insert this :
    Code (Text):
    1.  
    2. <style type="text/css">
    3. body {
    4. background : url(http://i163.photobucket.com/albums/t305/mbbg.png);
    5. background-color: #FFF;
    6. color : #333;
    7. cursor : default;
    8. font-size : 8pt;
    9. font-family : "Trebuchet MS";
    10. overflow-x : hidden;
    11. }
    12. </style>
    13.  
    Explaination:
    "body" is to target the body tag

    "{" is to show the start of the CSS code to customize everything found between the
    Code (Text):
    1. <body> and </body>
    tags

    background : url(http://i163.photobucket.com/albums/t305 ... l/mbbg.png); this sets the background image to

    that found in http://i163.photobucket.com/albums/t305 ... l/mbbg.png, it’s an image hosted by me. Please host

    it yourself if you know how to. If you don’t want a backgroung image, delete this line.

    "background-color: #FFF;" sets the background color to #FFF, which is white. Other color codes can be found by

    googling "hexadecimal color codes"

    "color: #333;" sets the text color to #333 which is lighter black. Blask is #000

    "cursor: default;" sets the cursor to default which is the normal arrow pointer. Other values are crosshair,

    pointer, help, move google this too. Play around with the cursor and color values.

    "font-size: 8pt;" sets the font size to 8pt. Try experimenting around to see different values and their results.

    "font-family: "Trebuchet MS;" is the font used. Change this to other common fonts such as Tahoma and arial if you want to.

    "}" closes the CSS defined for the body tag.

    "overflow-x:hidden" hides everything that displays out of the page horizontally.
    Now save everything again, and refresh your website.
    You should see a background color, font size and font type change and a slight font color change.

    Important Things To Note
    There is no such property as "font-color" it is just "color".
    All css properties and their values are ended with a ";"
    Example:
    font-family: "Tahoma";
    In the next section, we will add div tags and add content into them.
    These will be the content of your website.

    4. Bring on the DIVs
    The code in your notepad should look something like this now :
    Code (Text):
    1.  
    2. <html>
    3.  
    4. <head>
    5.  
    6. <title>My First Website</title>
    7.  
    8. <style type="text/css">
    9. body {
    10. background : url(http://i163.photobucket.com/albums/t305/mbbg.png);
    11. background-color: #FFF;
    12. color : #333;
    13. cursor : default;
    14. font-size : 8pt;
    15. font-family : "Trebuchet MS";
    16. overflow-x: hidden;
    17. }
    18. </style>
    19.  
    20. </head>
    21.  
    22. <body>
    23.  
    24. Hello World!
    25.  
    26. </body>
    27.  
    28. </html>
    29.  
    Note I added new lines to make the code more readable and so you can understand it better.
    Now, to add div tags for your content.

    Browse your HTML code, and delete the "Hello World!" words.
    Paste this in it's place.
    Code (Text):
    1.  
    2. <div class="header"><img src=" http://www.neofriends.net/styles/subsilver2/theme/images/background.gif"></div>
    3.  
    4. <div id= "main">
    5. Welcome to my website. I was taught to do this by ShawnTeo on <a href=
    6.  
    7. "http://www.neofriends.net">neofriends.net</a>. I am trying to create my new website. <br> <b>bolded text</b>
    8.  
    9. <i>italicised text</i> <u>underlined text</u>
    10. </div>
    11.  
    So now lets all explain this.

    Explaination
    Think of divs as containers to hold the content placed inside them.

    Code (Text):
    1. <div class="header">
    Opens a div tag and gives it a class called "header"

    Code (Text):
    1. <img src=" http://www.neofriends.net/styles/subsilver2/theme/images/background.gif">
    This opens an img

    (image) tag and has the src (source) of that webaddress. I put an image in here as I want an image header.

    Code (Text):
    1. <div id= "main">
    This opens the div tag. "id=main" sets the unique id of this div.

    Code (Text):
    1. Welcome to my website … new website
    Content in the div named "main". Don’t change this for now.

    Code (Text):
    1. <a href= "http://www.neofriends.net">neofriends.net</a>
    "<a href= " starts a link.

    "http://www.neofriends.net" is the web address you want to link to, note that the address should be enclosed in " and ".

    Ok, save your work and refresh the webpage. You should now see new content. Next, we are going to style the div classed "header" and the div called "main".

    Put this in the CSS section, below the closing of the body CSS.
    Code (Text):
    1.  
    2. .header {
    3. position: absolute;
    4. left: 0px;
    5. top: 0px;
    6. }
    7.  
    8. #main {
    9. position: absolute;
    10. left: 0px;
    11. top: 150px;
    12. width: 700px;
    13. padding: 3px;
    14. }
    15.  
    Save the file and preview. Looks pretty eh? Congratulations.

    Explaination
    ".header" calls the class called "header" note the period is used before the word header to show that it's calling a

    class.

    "position: absolute;" sets the position to absolute. I don't know how to explain this, but just leave it as it is.

    "left: 0px;
    top: 0px;" this sets the postion of the div with the "header" class to 0 pixels from the left and 0 pixels from the

    top.

    "#main" calls the id called "main" note the # is used before the word main to show that it's calling an ID.

    "width: 700px;" sets the width of the "main" id div to 700 pixels.

    "padding: 3px;" gives a 3 pixel spacing all around the div. Set the padding to 0px then to 3px to see the

    difference.
    Ok, now we will move on to the next section.

    5. Further CSS customization
    Ok, looks like I have already covered padding.
    Let's ignore margins for now.

    Ok, now I will teach you how to customize links.
    You see the link I included in the ID "main" div?
    It looks ugly and blue.
    Let's spiff it up!

    Add this to your CSS, below the end of the #main customization.
    Code (Text):
    1.  
    2. a, a:link, a:active, a:visited {
    3. color: #999;
    4. cursor: crosshair;
    5. }
    6.  
    7. a:hover {
    8. color: #333;
    9. cursor: crosshair;
    10. text-decoration: none;
    11. }
    12.  
    What I just did was to style all links.

    Explaination
    "a, a:link, a:active, a:visited" calls all the links. a:link is a link, a:active is when the link is being clicked

    and a:visited is after you click the link

    "cursor: crosshair;" this sets the cursor when you move over all links to crosshair

    "a:hover" is the state when you move over the link

    "text-decoration: none;" a normal link usually has an underline. However, setting a:hover to have no text-decoration removes that underline when you move over a link.
    Save the file and refresh your website. Look! The appearance of the link has changed. Try moving over the link to see what you have just did.


    Next, we will customize the appearance of bolded, italicised and underlined text.
    This is not necessary and you can skip this part if you want to.

    Copy and paste this below the closing of a:hover.
    Code (Text):
    1.  
    2. b {
    3. color: #7b6f4c;
    4. font-family: "Courier New";
    5. }
    6.  
    7. i {
    8. font-family: "Georgia";
    9. }
    10.  
    11. u {
    12. color: #FF5C3D;
    13. }
    14.  
    What I have done was just to change the color and font-family of underlined (u), bolded (b) and italicised (i) text.

    Save it and see the difference.

    Now, the hard part. Navigation. We will be using javascript for this since it's a single page website you are making.

    6. Navigation
    Copy and paste this just below the
    Code (Text):
    1. </title>
    closed tag.
    Code (Text):
    1. <script type="text/javascript">
    2. function navigate(id) {
    3. document.getElementById('main').innerHTML=document.getElementById(id).innerHTML
    4. }
    5. </script>

    Copy and paste this after the div id called main.
    Code (Text):
    1.  
    2. <div id="portfolio" style="display: none;">
    3. Welcome to my portfolio.
    4. </div>
    5.  
    6. <div id="links" style="display: none;">
    7. <a href="http://www.neofriends.net">neofriends</a> <br>
    8. <a href="http://www.neofriends.net">neofriends</a> <br>
    9. <a href="http://www.neofriends.net">neofriends</a> <br>
    10. <a href="http://www.neofriends.net">neofriends</a> <br>
    11. <a href="http://www.neofriends.net">neofriends</a> <br>
    12. <a href="http://www.neofriends.net">neofriends</a> <br>
    13. <a href="http://www.neofriends.net">neofriends</a> <br>
    14. <a href="http://www.neofriends.net">neofriends</a> <br>
    15. <a href="http://www.neofriends.net">neofriends</a> <br>
    16. <a href="http://www.neofriends.net">neofriends</a>
    17. </div>
    18.  
    19. <div id="updates" style="display: none;">
    20. Put your updates here.
    21. </div>
    22.  
    What I have done is to basically call a javascript function and created a few divs that cannot be seen.
    However, once we set up the navigations, and when the navigation links are clicked, the hidden divs will appear.

    Now we must set up the navigations.
    Copy and paste the following above the div with the "header" class.
    Code (Text):
    1.  
    2. <div id="navi">
    3. <span class="navi_span" onClick="navigate('portfolio')" onMouseover="this.style.color='#999'"
    4.  
    5. onMouseout="this.style.color='#000'">Portfolio</span>
    6. <span class="navi_span" onClick="navigate('links')" onMouseover="this.style.color='#999'"
    7.  
    8. onMouseout="this.style.color='#000'">Links</span>
    9. <span class="navi_span" onClick="navigate('updates')" onMouseover="this.style.color='#999'"
    10.  
    11. onMouseout="this.style.color='#000'">Updates</span>
    12. </div>
    13.  

    Now copy and paste this below the closing of underline's CSS property.
    Code (Text):
    1.  
    2. #navi {
    3. position: absolute;
    4. left: 50px;
    5. top: 0px;
    6. z-index: 3;
    7. }
    8.  
    9. .navi_span {
    10. color: #000;
    11. font-size: 20pt;
    12. font-family: "Arial Black";
    13. }
    14.  
    What you have done is made the "navi" div appear above the image (by setting the z-index in CSS), postioned it to be

    in the box, and when you click them, they navigate.

    Well done, you have successfully completed your very first website.
    Thanks you. Go on, kiss me, hug me.

    If you have any suggestions, problems or questions, feel free to ask me on this thread.
    Attached is the text file of the code you should have once you have completed.

    7. Credits & Customization
    Thanks to neofriends.net for their banner.
    Thanks to Helper for his geniousity.

    You can customize the CSS values such as color, font size, font type, padding, width, positions and the content in

    the HTML document.


    Finally, after 4 hours, this guide is done.
    Hope this helps you.
    If you need any help for this, feel free to post questions.
    Copyright, Helper.
     

    Attached Files:

    #1 Shawn, Jul 18, 2009
    Last edited: Apr 12, 2021
    Tally and Lightning like this.
  2. Lightning

    Lightning Administrator
    Staff Member

    Joined:
    Nov 8, 2008
    Messages:
    3,021
    Likes Received:
    195
    Gender:
    Male
    Location:
    Florida, USA
    Oooh, looks really cool although I'd never have the time to maintain the site :p

    Very nicely written; lolz at Credits. Geniousity o_O :lol:

    +rep

    PS: Next time, post in Tech Guides, please ;)
     
  3. ricky92

    ricky92 Administrator
    Staff Member

    Joined:
    Nov 10, 2006
    Messages:
    1,866
    Likes Received:
    67
    CSS = Cascading Style Sheet.
    However, nice guide... it could help some people.