*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
can be added to make text pop up as you scroll over the image!
__________________________________________________ ___________________________
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***
:X.
