Register for your free account! | Forgot your password?

Go Back   elitepvpers > Conquer Online 2 > CO2 PServer - Discussions / Questions
You last visited: Today at 20:54

  • Please register to post and access all features, it's quick, easy and FREE!


WebDesign Tutorial - With Codes + Pictures

Reply
 
Old   #1
 
elite*gold: 0
Join Date: Jan 2009
Posts: 456
Received Thanks: 128
WebDesign Tutorial - With Codes + Pictures

*Note To Moderators, im not sure where this post should be placed, so im just posting here. Feel free to move to the correct forum at anytime!
Thanks*


Also Special thanks to W3Schools Online Web Tutorials!(google em for advanced help or leave an post!)

WebDesign Tutorial!
(This tutorial will teach you the basics of html & css and possibly some java and php scripts! Now you can make your own pserver websites instead of paying someone too or using a free template u may not even like!)

If anyone has any questions or comments feel free to leave a comment. Or if i missed out on anything, feel free to correct me aswell!

First Up:
Identifying a HTML Code & how they work!


Html codes are basically tags, for example <html> and </html>, this tag marks the area in which html codes are in use. The forward slash "/" at the start of the second tag is what is used to end the tag. It is like this for just about every tag.

Second:
The Basic HTML Tags


<b>Text Here</b> - Bold Tags
<u>Text Here</u> - Underline Tags
<i>Text Here</i> - Italic Tags
<br> - Line Break, used like an "enter"
<hr> - a line that divides the whole page width wise
<table></table> - Tables (i will go into more detail later on in the post)
<marquee></marquee> - Marquee(i will go into more detail later on in the post)

As you can see, they pretty much speak for themselves and how they work!

Three:
Tables


Tables are defined with the <table> tag. A table is divided into rows (with the <tr> tag), and each row is divided into data cells (with the <td> tag). The letters td stands for "table data," which is the content of a data cell. A data cell can contain text, images, lists, paragraphs, forms, horizontal rules, tables, etc.

For Example:
Code:
<table border="1">
<tr>
<td>row 1, cell 1</td>
<td>row 1, cell 2</td>
</tr>
<tr>
<td>row 2, cell 1</td>
<td>row 2, cell 2</td>
</tr>
</table>
looks like this:


Forth:
Headings!
(Thanks to zBest for correction)
Headings go from 1-7, 1 being the largest, 7 being the smallest, i have listed the codes below!
Code:
<h1>Heading</h1>
<h2>Heading</h2>
<h3>Heading</h3>
<h4>Heading</h4>
<h5>Heading</h5>
<h6>Heading</h6>
<h7>Heading</h7>

Fifth:
a taste of CSS

You may be asking yourself this question, so i thought ide give u some answers!
Code:
What is CSS?

    * CSS stands for Cascading Style Sheets
    * Styles define how to display HTML elements
    * Styles were added to HTML 4.0 to solve a problem
    * External Style Sheets can save a lot of work
    * External Style Sheets are stored in CSS files
An Example of Css code is:
Code:
<div style="position:absolute;background:black;top:0;left:150;height:250; width:250;"></div>
Now your pry saying what the F**K does this stuff mean?
Well, the Position is how the style will be staying on the page, the background is the background color for that area, the top then # is how many pixels it is from the top of the page, the left then # is how many pixels it is from the left of the screen, the height and width are the dimensions of the block in pixels. if this made no sence to you heres a picture! :P

The Div we made is right here! a black box dimensioned from the edges


Sixth:
Font!


How it works:
Code:
Font Attributes
Attribute 	                Example 	        Purpose
size="number" 	        size="2" 	        Defines the font size
size="+number" 	size="+1" 	        Increases the font size
size="-number" 	        size="-1" 	        Decreases the font size
face="face-name" 	face="Times" 	Defines the font-name
color="color-value" 	color="#eeff00" 	Defines the font color
color="color-name" 	color="red" 	Defines the font color

Seventh:
Color Codes






Eighth:
Images

Below is the code which is used to insert an image into a webpage, extras like
Code:
alt="Text"
can be added to make text pop up as you scroll over the image!
Code:
<img src="url" />
__________________________________________________ ___________________________
AND NOW A LESSON ON CSS FROM EmptyProject

If someone wants to know how to do CSS Internally or Externally here it is..

INTERNAL
Code:
Code:
<head>
<title>Home</title>
<style type="text/css">
p {color: white; }
div { word-wrap: break-word; }
body {background-color: black; }
</style>
</head>
To do it externally create a new file called lets say right now style.css

EXTERNAL
Code:
Code:
<head>
<link rel="stylesheet" type="text/css" href="style.css" />
</head>
Then on like style.css you can do this..

Code:
Code:
body {
margin: 0;
padding: 0;
}

div {
word-wrap: break-word;
}

a {
font-size: 10px;
color: yellow;
}

a:hover {
font-size: 12px;
color: black;
}

Quick Information on what means what..

div { } < This is talking about the tag <div>

#container { } < This is talking about the ID container

.body { } < This is talking about the class body

a { } < Again this is the tag <a> which is for links

a:hover { } < This is when you hover your mouse over a link.

a:visited { } < This is already visited.
Also...You can do an id for only a specific one so it cant be used widely..example for the id container..

Code:
Code:
div#container{

}

Maybe for a class

Code:

div.body{

}
EXAMPLES...We are saying this is external! This is just showing you not how the effect will be but how to set it up.
Code:
Code:
<div id="container"> 

<div class="body">

<ul>
<li><a href="index.php">Home</a></li>
<li></li>
</ul>

</div>

</div>
Hoven you can add that to your guide when you get a bit more into detail with CSS

If Hoven doesn't post on how to create a drop down menu here I will post it , Also a horizontal or vertical menu also .

Here is a bit javascript

Code:
Code:
<script language="JavaScript">
if(confirm("Would you like to see our sponsor's website?")) {
this.location.href="http://www.elitepvpers.com";
} else {
alert("Shame on you!");
}
</script>
_______________
__________________________________________________ ___________________________
Also this website was very helpful in the beginning to me so check it out! and subscribe to jimmyr's shit he makes many tuts aswell! NO THANKS FOR THE VIDEO PLEASE I DIDNT TAKE PART IN IT!

***NOTE THREAD IS NOT FINISHED, my internets just screwy so thought ide post and just edit in the rest incase it crashes***



Hoven is offline  
Thanks
14 Users
Old 10/01/2009, 06:21   #2
 
elite*gold: 0
Join Date: Sep 2007
Posts: 1,705
Received Thanks: 437


raidenx123 is offline  
Old 10/01/2009, 06:22   #3
 
elite*gold: 0
Join Date: Jan 2009
Posts: 456
Received Thanks: 128
i like to put it all in 1 place for people and this way if they got a question they dont have text to answer it, im here to help
Hoven is offline  
Old 10/01/2009, 06:31   #4
 
elite*gold: 0
Join Date: Oct 2009
Posts: 1
Received Thanks: 0
Omg Thanks so much man! this is like EXACTLY what i was looking for! best guide I have read ! I can't believe i found this. THANKS SO MUCH!!


Haarisx123 is offline  
Old 10/01/2009, 06:56   #5
 
elite*gold: 20
Join Date: Jan 2006
Posts: 884
Received Thanks: 228
nice tut
lostsolder05 is offline  
Old 10/01/2009, 06:59   #6
 
elite*gold: 0
Join Date: Aug 2008
Posts: 889
Received Thanks: 199
Sorry Hoven for correcting you,but headings <h8>;<h9> and <h10> doesnt exist,inly from 1 to 7.
zbest is offline  
Thanks
1 User
Old 10/01/2009, 07:00   #7
 
elite*gold: 0
Join Date: Jan 2009
Posts: 456
Received Thanks: 128
Quote:
Originally Posted by zbest View Post
Sorry Hoven for correcting you,but headings <h8>;<h9> and <h10> doesnt exist,inly from 1 to 7.
corrected =] thanks xD soz its late

Quote:
Originally Posted by Haarisx123 View Post
Omg Thanks so much man! this is like EXACTLY what i was looking for! best guide I have read ! I can't believe i found this. THANKS SO MUCH!!
Thanks, glad i could help!

Quote:
Originally Posted by lostsolder05 View Post
nice tut
Lol justin u know u love it xD u even told me on msn before i posted it all
Hoven is offline  
Old 10/01/2009, 07:08   #8
 
elite*gold: 0
Join Date: Jan 2008
Posts: 1
Received Thanks: 0
Nice tutorial indeed.
XDE is offline  
Old 10/01/2009, 07:17   #9
 
elite*gold: 0
Join Date: Jan 2009
Posts: 456
Received Thanks: 128
Quote:
Originally Posted by Haarisx123 View Post
Omg Thanks so much man! this is like EXACTLY what i was looking for! best guide I have read ! I can't believe i found this. THANKS SO MUCH!!
Quote:
Originally Posted by XDE View Post
Nice tutorial indeed.
thanks dude! how u been i havn't talked to u in ages!
Hoven is offline  
Old 10/01/2009, 07:39   #10
 
elite*gold: 1142
Join Date: Aug 2006
Posts: 2,464
Received Thanks: 1,159
Great, this will help me a bunch in my school work (currently doing html & css)

Everybody that finds this useful, thank him!
_Emme_ is offline  
Old 10/01/2009, 07:41   #11
 
elite*gold: 0
Join Date: Aug 2008
Posts: 889
Received Thanks: 199
Hoven don't be mad on me bcuz i corrected you :X.
And add more maybe the members will start doing their website not someone else for them .
zbest is offline  
Old 10/01/2009, 07:44   #12
 
elite*gold: 0
Join Date: Jan 2009
Posts: 456
Received Thanks: 128
Quote:
Originally Posted by zbest View Post
Hoven don't be mad on me bcuz i corrected you :X.
And add more maybe the members will start doing their website not someone else for them .
dw im not at all and yes thats what im hoping for :P

by the way ima be finishing the tut tomarrowish!
Hoven is offline  
Old 10/01/2009, 07:53   #13
 
elite*gold: 0
Join Date: Aug 2008
Posts: 889
Received Thanks: 199
Then good luck my friend
zbest is offline  
Old 10/01/2009, 12:23   #14
 
elite*gold: 0
Join Date: Sep 2009
Posts: 249
Received Thanks: 17
If someone wants to know how to do CSS Internally or Externally here it is..

INTERNAL
Code:
<head>
<title>Home</title>
<style type="text/css">
p {color: white; }
div { word-wrap: break-word; }
body {background-color: black; }
</style>
</head>
To do it externally create a new file called lets say right now style.css

EXTERNAL
Code:
<head>
<link rel="stylesheet" type="text/css" href="style.css" />
</head>
Then on like style.css you can do this..

Code:
body {
margin: 0;
padding: 0;
}

div {
word-wrap: break-word;
}

a {
font-size: 10px;
color: yellow;
}

a:hover {
font-size: 12px;
color: black;
}
Quick Information on what means what..

div { } < This is talking about the tag <div>

#container { } < This is talking about the ID container

.body { } < This is talking about the class body

a { } < Again this is the tag <a> which is for links

a:hover { } < This is when you hover your mouse over a link.

a:visited { } < This is already visited.

Also...You can do an id for only a specific one so it cant be used widely..example for the id container..

Code:
div#container{

}
Maybe for a class

Code:
div.body{

}
EXAMPLES...We are saying this is external! This is just showing you not how the effect will be but how to set it up.
Code:
<div id="container"> 

<div class="body">

<ul>
<li><a href="index.php">Home</a></li>
<li></li>
</ul>

</div>

</div>
Hoven you can add that to your guide when you get a bit more into detail with CSS

If Hoven doesn't post on how to create a drop down menu here I will post it , Also a horizontal or vertical menu also .

Here is a bit javascript

Code:
<script language="JavaScript">
if(confirm("Would you like to see our sponsor's website?")) {
this.location.href="http://www.elitepvpers.com";
} else {
alert("Shame on you!");
}
</script>
Empty Project is offline  
Thanks
2 Users
Old 10/01/2009, 12:49   #15
 
elite*gold: 0
Join Date: Apr 2008
Posts: 1,152
Received Thanks: 320
this is verry nice mods should open a topic bout websites


-Shunsui- is offline  
Thanks
1 User
Reply



« ANYONE NEED A HOSTER? | RulzanConquer is Back Online ! »

Similar Threads
[Guide / Tutorial] How to do pictures. UOSU
03/04/2010 - Metin2 Main - Discussions / Questions - 2 Replies
Hello. I know it might be a bad division, so how about something, please move and glue. With boredom, I made a guide UOSU. This program is used to take photos in various games such as Metin 2, Tibia, etc. UOSU Why? Now, thanks to this program,...
[Tutorial Nr. 2] Webdesign mit DIV coden
03/03/2010 - Coding Tutorials - 3 Replies
Bezüglich meines letzten Tutorials über DIV-Container und spezifisch darüber, wie man ein Webdesign (Vorlage psd) mit DIV-Containern anpasst. 1. Das Design Hch habe mir ein ganz einfaches, schlichtes Design ausgesucht. Das Grundlegende...
[TUTORIAL]how to fix your CRC with pictures :P
11/08/2009 - Dekaron Exploits, Hacks, Bots, Tools & Macros - 61 Replies
First i would like to give credits to Obama for his lame tutorial :P but after an hour or so i figured it out, but to make it easier on others i decided to write a tut that is actualy easy to understand. 1. when there is a new update aviable...



All times are GMT +2. The time now is 20:54.


Powered by vBulletin®
Copyright ©2000 - 2018, Jelsoft Enterprises Ltd.
SEO by vBSEO ©2011, Crawlability, Inc.

Support | Contact Us | FAQ | Advertising | Privacy Policy | Abuse
Copyright ©2018 elitepvpers All Rights Reserved.