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>
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
Code:
<div style="position:absolute;background:black;top:0;left:150;height:250; width:250;"></div>
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"
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>
EXTERNAL
Code:
Code:
<head> <link rel="stylesheet" type="text/css" href="style.css" /> </head>
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.
Code:
Code:
div#container{
}
Maybe for a class
Code:
div.body{
}
Code:
Code:
<div id="container"> <div class="body"> <ul> <li><a href="index.php">Home</a></li> <li></li> </ul> </div> </div>
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.
