Hey guys,
Here's the first part for my tutorials about both CSS (Cascade Styling Sheet) and HTML (Hypertext Markup Language), which are Scripting languages for websites.
First of all, why would you learn this?
Because it's simple, and can look really nice if you know how to!
Well, we gotta learn some CSS since this will be implented in every page.
What do you think this code would do?
It will make the image located in http://www.yourwebsite.com/images/background.jpg be the bacground non-repetive and will be at center top inside the body tag, which is one of the most important tags in HTML which defines where the body in the document is. Place it in a document in your website, call it "styles.css". Now, not so hard was it?
Short breakdown:
The code in here will effect anything in the body tag.
Obviously setting background of anything in that tag.
#000000 is background color, which is black.
url(images/background.jpg) is the image and location.
This will make the image appear only once, starting at center of page inside tag and at the top of page inside tag.
; is just for ending the line of code.
Now you gotta know how to use this in your site. Well, first of start off by making a HTML document, call it "index.html". Index.html will open everytime you got to your website, eventually in folders if you add one there to.
Here's some basic code to add at top in your new document:
This is my top, modified a bit. This is XHTML, only difference is really that it is stricter with code.
Short breakdown of the most important:
This is the body tag we coded earlier. Now, everything inbetween will have the image non-repetive in bacground. Not so hard you might have thought?
This is the title for your website.
This is the name and location of the CSS document.
Now, one more thing:
At bottom add:
Ends the body and html for the document.
Not so hard, right? Now, let's move on to something a little more advanced; a menu.
Go into your CSS document, and add this code: (Read it too, ofc else you won't learn)
A little more advanced? Oh, sorry... Lot more advanced...
Breakdown:
Makes a div, class menu (will be explained how to use later)
Makes all objects in the div float starting from the left going against right
Width (in pixels) of how long the object, and it's background picture will be. Background was explained earlier, and I hope you remember it 😉
Padding (in pixels) from left, how many pixels from the start of object the objects will be.
This is for a tags in div class menu (aslo explained later).
Height (in pixels) of objects in here.
Sets size (which is 1.1em), weight (which here is bold) and color (which is white, to be visible on my pic as defined backgorund earlier)
This sets the padding (in pixels) for how long from the top objects and text here will be
Makes all text appear in center.
What happens when you hover over the div class menu a, in this case changes the pic to a pic that is kinda "pushed down" in my case.
Now, how to add this.
Go back to the HTML document, and inside the document, before end of page, add this code:
Now, that is what I told you about earlier, a div class menu. There is aslo added something new, a list. List starts with <ul> and ends with </ul>. Objects in these lists have <li> nd </li> as tags.
Now we want these to link to somewhere, right? Then we will add an a, which will activate the other code we made, the div class menu a. We aslo add an element into the a, href (usage href="url")
Try it out!
Now, if I now change my existing code and add a's with hrefs in, it will be something like this:
If you read it, you wil notice three different ways of linking.
Way 1:
Will link to a page in same directory as current page.
Way 2:
Will link to an external page.
Way 3:
Basically same as first, just that ".." makes it start from your top folder, if your website for example is mysite.com and the index is in mysite.com/myfolder/index.html then it will start from mysite.com.
Notes:
-Make sure to read entire tut, things are NOT explained twice
-Make sure to have a folder called images directly in your site.
-Have all images, call them the same as mine or change the code
-Don't worry if you can't make it work, just post here or PM me 🙂
-Your page is incomplete? Look forward to next tut, then!
Hope it helps you,
--AkselJ
Here's the first part for my tutorials about both CSS (Cascade Styling Sheet) and HTML (Hypertext Markup Language), which are Scripting languages for websites.
First of all, why would you learn this?
Because it's simple, and can look really nice if you know how to!
Well, we gotta learn some CSS since this will be implented in every page.
Code:
body {
background: #000000 url(images/background.jpg) no-repeat center top;
}What do you think this code would do?
It will make the image located in http://www.yourwebsite.com/images/background.jpg be the bacground non-repetive and will be at center top inside the body tag, which is one of the most important tags in HTML which defines where the body in the document is. Place it in a document in your website, call it "styles.css". Now, not so hard was it?
Short breakdown:
Code:
body {
}The code in here will effect anything in the body tag.
Code:
background:Obviously setting background of anything in that tag.
Code:
#000000 url(images/background.jpg)#000000 is background color, which is black.
url(images/background.jpg) is the image and location.
Code:
no-repeat center top;This will make the image appear only once, starting at center of page inside tag and at the top of page inside tag.
; is just for ending the line of code.
Now you gotta know how to use this in your site. Well, first of start off by making a HTML document, call it "index.html". Index.html will open everytime you got to your website, eventually in folders if you add one there to.
Here's some basic code to add at top in your new document:
Code:
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="content-type" content="text/html; charset=utf-8" />
<title>My website</title>
<meta name="keywords" content="" />
<meta name="description" content="" />
<link href="../style.css" rel="stylesheet" type="text/css" />
</head>
<body>This is my top, modified a bit. This is XHTML, only difference is really that it is stricter with code.
Short breakdown of the most important:
Code:
<body>This is the body tag we coded earlier. Now, everything inbetween will have the image non-repetive in bacground. Not so hard you might have thought?
Code:
<title>My website</title>This is the title for your website.
Code:
<link href="../style.css" rel="stylesheet" type="text/css" />This is the name and location of the CSS document.
Now, one more thing:
At bottom add:
Code:
</body>
</html>Ends the body and html for the document.
Not so hard, right? Now, let's move on to something a little more advanced; a menu.
Go into your CSS document, and add this code: (Read it too, ofc else you won't learn)
Code:
#menu {
float: left;
width: 612px;
padding-left: 30px;
background: url(images/menu.png) no-repeat;
}
#menu a {
float: left;
height: 31px;
width: 115px;
font-size: 1.1em;
font-weight: bold;
color: #ffffff;
padding-top: 10px;
text-align: center;
}
#menu a:hover {
background: url(images/menu_hover.gif) repeat-x;
}A little more advanced? Oh, sorry... Lot more advanced...
Breakdown:
Code:
#menu {
}Makes a div, class menu (will be explained how to use later)
Code:
float: left;Makes all objects in the div float starting from the left going against right
Code:
width: 612px;Width (in pixels) of how long the object, and it's background picture will be. Background was explained earlier, and I hope you remember it 😉
Code:
padding-left: 30px;Padding (in pixels) from left, how many pixels from the start of object the objects will be.
Code:
#menu a {
}This is for a tags in div class menu (aslo explained later).
Code:
height: 31px;Height (in pixels) of objects in here.
Code:
font-size: 1.1em;
font-weight: bold;
color: #ffffff;Sets size (which is 1.1em), weight (which here is bold) and color (which is white, to be visible on my pic as defined backgorund earlier)
Code:
padding-top: 10px;This sets the padding (in pixels) for how long from the top objects and text here will be
Code:
text-align: center;Makes all text appear in center.
Code:
#menu a:hover {
}What happens when you hover over the div class menu a, in this case changes the pic to a pic that is kinda "pushed down" in my case.
Now, how to add this.
Go back to the HTML document, and inside the document, before end of page, add this code:
Code:
<div id="menu">
<ul>
<li>Num 1</li>
<li>Num 2</li>
<li>Num 3</li>
</ul>
</div>Now, that is what I told you about earlier, a div class menu. There is aslo added something new, a list. List starts with <ul> and ends with </ul>. Objects in these lists have <li> nd </li> as tags.
Now we want these to link to somewhere, right? Then we will add an a, which will activate the other code we made, the div class menu a. We aslo add an element into the a, href (usage href="url")
Try it out!
Now, if I now change my existing code and add a's with hrefs in, it will be something like this:
Code:
<ul>
<li><a href="anotherpage.html">Num 1</a></li>
<li><a href="http://www.externalpage.com>Num 2</a></li>
<li><a href="..thirdpage.html"> Num 3</a></li>
</ul>
</div>If you read it, you wil notice three different ways of linking.
Way 1:
Code:
<a href="anotherpage.html">Num 1</a>Will link to a page in same directory as current page.
Way 2:
Code:
<li><a href="http://www.externalpage.com">Num 2</a></li>Will link to an external page.
Way 3:
Code:
<li><a href="..thirdpage.html"> Num 3</a></li>Basically same as first, just that ".." makes it start from your top folder, if your website for example is mysite.com and the index is in mysite.com/myfolder/index.html then it will start from mysite.com.
Notes:
-Make sure to read entire tut, things are NOT explained twice
-Make sure to have a folder called images directly in your site.
-Have all images, call them the same as mine or change the code
-Don't worry if you can't make it work, just post here or PM me 🙂
-Your page is incomplete? Look forward to next tut, then!
Hope it helps you,
--AkselJ
