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: Spoiler Code (Text): <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. Spoiler Code (Text): <html> <head> <title>My First Website</title> </head> <body> Hello World! </body> </html> Ok, explaining. Every tag that is like Code (Text): </html> , </body> , </head> is to close their opening tags. Explaination: Spoiler Code (Text): <html> This html tag is to start the entire website Code (Text): <head> The head tag is encloses your CSS styles and Javascript Code (Text): <title> The title tag is used to give your webpage a title. Code (Text): My First Website This is the title of your site Code (Text): </title> This closes the page’s title Code (Text): </head> This closes the head tag. Let’s read this as "slash head" Code (Text): <body> Opens your body tag. The entire page’s content goes in here Code (Text): Hello World! This is the content. For now, you will give a shout out to the world. Code (Text): </body> This closes your body tag. Signifies the end of all content on your website. Code (Text): </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): </title> and </head> tags on what you typed just now. Insert this : Spoiler Code (Text): <style type="text/css"> body { background : url(http://i163.photobucket.com/albums/t305/mbbg.png); background-color: #FFF; color : #333; cursor : default; font-size : 8pt; font-family : "Trebuchet MS"; overflow-x : hidden; } </style> Explaination: Spoiler "body" is to target the body tag "{" is to show the start of the CSS code to customize everything found between the Code (Text): <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: Spoiler 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 : Spoiler Code (Text): <html> <head> <title>My First Website</title> <style type="text/css"> body { background : url(http://i163.photobucket.com/albums/t305/mbbg.png); background-color: #FFF; color : #333; cursor : default; font-size : 8pt; font-family : "Trebuchet MS"; overflow-x: hidden; } </style> </head> <body> Hello World! </body> </html> 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. Spoiler Code (Text): <div class="header"><img src=" http://www.neofriends.net/styles/subsilver2/theme/images/background.gif"></div> <div id= "main"> Welcome to my website. I was taught to do this by ShawnTeo on <a href= "http://www.neofriends.net">neofriends.net</a>. I am trying to create my new website. <br> <b>bolded text</b> <i>italicised text</i> <u>underlined text</u> </div> So now lets all explain this. Explaination Spoiler Think of divs as containers to hold the content placed inside them. Code (Text): <div class="header"> Opens a div tag and gives it a class called "header" Code (Text): <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): <div id= "main"> This opens the div tag. "id=main" sets the unique id of this div. Code (Text): Welcome to my website … new website Content in the div named "main". Don’t change this for now. Code (Text): <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. Spoiler Code (Text): .header { position: absolute; left: 0px; top: 0px; } #main { position: absolute; left: 0px; top: 150px; width: 700px; padding: 3px; } Save the file and preview. Looks pretty eh? Congratulations. Explaination Spoiler ".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. Spoiler Code (Text): a, a:link, a:active, a:visited { color: #999; cursor: crosshair; } a:hover { color: #333; cursor: crosshair; text-decoration: none; } What I just did was to style all links. Explaination Spoiler "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. Spoiler Code (Text): b { color: #7b6f4c; font-family: "Courier New"; } i { font-family: "Georgia"; } u { color: #FF5C3D; } 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): </title> closed tag. Spoiler Code (Text): <script type="text/javascript"> function navigate(id) { document.getElementById('main').innerHTML=document.getElementById(id).innerHTML } </script> Copy and paste this after the div id called main. Spoiler Code (Text): <div id="portfolio" style="display: none;"> Welcome to my portfolio. </div> <div id="links" style="display: none;"> <a href="http://www.neofriends.net">neofriends</a> <br> <a href="http://www.neofriends.net">neofriends</a> <br> <a href="http://www.neofriends.net">neofriends</a> <br> <a href="http://www.neofriends.net">neofriends</a> <br> <a href="http://www.neofriends.net">neofriends</a> <br> <a href="http://www.neofriends.net">neofriends</a> <br> <a href="http://www.neofriends.net">neofriends</a> <br> <a href="http://www.neofriends.net">neofriends</a> <br> <a href="http://www.neofriends.net">neofriends</a> <br> <a href="http://www.neofriends.net">neofriends</a> </div> <div id="updates" style="display: none;"> Put your updates here. </div> 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. Spoiler Code (Text): <div id="navi"> <span class="navi_span" onClick="navigate('portfolio')" onMouseover="this.style.color='#999'" onMouseout="this.style.color='#000'">Portfolio</span> <span class="navi_span" onClick="navigate('links')" onMouseover="this.style.color='#999'" onMouseout="this.style.color='#000'">Links</span> <span class="navi_span" onClick="navigate('updates')" onMouseover="this.style.color='#999'" onMouseout="this.style.color='#000'">Updates</span> </div> Now copy and paste this below the closing of underline's CSS property. Spoiler Code (Text): #navi { position: absolute; left: 50px; top: 0px; z-index: 3; } .navi_span { color: #000; font-size: 20pt; font-family: "Arial Black"; } 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.
Oooh, looks really cool although I'd never have the time to maintain the site Very nicely written; lolz at Credits. Geniousity :lol: +rep PS: Next time, post in Tech Guides, please