Help
My Basic Web Development Tutorial
What is HTML?
HTML stands for HyperText Markup Language and is the code used for the structure of your webpage.
What is CSS?
CSS stands for Cascading StyleSheets and it is used for the apperance of HTML elements using a range of codes.
HTML Basics
Okay, ALL tags used in HTML have to be close as well as opened. HTML tags are closed by putting a forward slash in fornt of the tag name, eg:
<html> </html>
notice that I have opened the tag by wrapping it in less than(<) and more than(>) symbols, and i have closed it the same way, but by adding a forward slash(/) before the tags name. Each tag can have an ID and a class.
An ID can only be used once on a single HTML document, and is unique, where as a Class, can be used as many times as you like in a single HTML document.
There are lots of tags such as:
Links
Images
Lists
Tables
Forms
Divs
There are loads of HTML tags, all of which can be found here
CSS Tags
CSS has 3 different types of selectors:
# denotes an ID
. denotes a Class
nothing denotes a tag - so instead of putting a # or a . you will put the tag you want the CSS to apply to.
CSS declarations always ends with a semicolon, and declaration groups are surrounded by curly brackets. This one is to open the CSS command: ({) and the other one is to close it: (}) with all the CSS code inside. The code is written out with each selector:
/*ID - One element with the ID of "body" will be 800pc wide*/
#body {
width: 800px;
}
/*Class - many elements with the class "body" will be 800px wide*/
.body {
width: 800px;
}
/*no selector - this will apply the CSS to the HTML tag "body" */
body {
width: 800px;
}
As said in the HTML section, ID's can be used once only, but classes can be used many times. This is different for CSS. You can have as many CSS scripts for one ID as you like in one CSS file.
Again there are lots of css tags such as:
width
height
margin
font family
color
all of which can be found here
Test Webpage
Now for this test webpage, i will embed the CSS in the HTML page and use an HTML5 Doctype. You can copy this code into a code editor, save it as an HTML file, and look at it in your browser.
<!DOCTYPE HTML>
<html>
<head>
<title>My First Webpage</title>
<style type="text/css">
#container {
width: 940px;
height: auto;
margin: 0 auto; /*Centers the DIV*/
}
#banner {
width: 800px;
height: 150px;
margin: 0 auto; /*Centers The DIV*/
background-color: #ff9900; /*orange BG colour*/
}
#nav {
width: 800px;
height: 40px;
background-color: #006428; /*Green BG colour*/
margin: 0 auto; /*Centers The DIV*/
}
#content {
width: 800px;
height: auto;
margin: 0 auto; /*Centers The Div*/
background-color: #532a80; /*Purple BG colour*/
}
#footer {
width: 800px;
height: 30px;
margin: 0 auto; /*centers the div*/
background-color: #004a80; /*Blue BG Colour*/
}
</style>
</head>
<body>
<div id="container">
<div id="banner">This footer div is 800px wide, and 150px high</div>
<div id="nav">This nav div is 800px wide and 40px high</div>
<div id="content">
This content div is 800px wide, has an automatic height, so expands when content is added.<br />
This content div is 800px wide, has an automatic height, so expands when content is added.<br />
This content div is 800px wide, has an automatic height, so expands when content is added.<br />
This content div is 800px wide, has an automatic height, so expands when content is added.<br />
</div>
<div id="footer">This footer div is 800px wide, and is at the right height for a few links</div>
</div>
</body>
</html>
Well i hope this beginner tutorial helped you, kept me out of the way of other people around the house for an hour. literally
If you want any help, anything added or changed, let me know
Ash
This post has been edited by Ash Scott: 01 January 2011 - 11:58 AM
