Into to HTML: Creating A Basic Web Page

by: Caleb Jonasson - October 12th, 2009   Filed under: Web Development Add Comment

In order to create your own web page you should first open up a text editor such as notepad or notepad ++. First things first is to copy the following code into your text editor and save it as index.php. PHP is a server side programming language which is most commonly used across the web because of its simple integration with html. Actual PHP code requires a server but if there is html text inside of a PHP file a simple test on your computer will allow you to properly view the page.

<!DOCTYPE html PUBLIC “-//W3C//DTD XHTML 1.0 Transitional//EN” “http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd”>
<html xmlns=”http://www.w3.org/1999/xhtml”>
<head>
<meta http-equiv=”Content-Type” content=”text/html; charset=utf-8″ />
<title>Demo Website || featured on Code With Design</title>
</head>

<body>
<h1>H1 tags</h1>
<h2>H2 tags</h2>
<h3>H3 tags</h3>
<p>The h1 stands for header1 and these p tags are paragraph tags</p>
</body>
</html>

Now we are going to step through the code so you know exactly what is going on and how the web browser reads the information. The top line of the code will let your browser know what standards it is to follow when reading the code.

<!DOCTYPE html PUBLIC “-//W3C//DTD XHTML 1.0 Transitional//EN” “http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd”>

The second line of code states that it is going to follow the w3 standards.

<html xmlns=”http://www.w3.org/1999/xhtml”>

Now we are going to get into the more customizable areas of the website. This section of information is known as head information and is not displayed on the webpage itself. This information is once again read by the browser but you can tell the search engines what information to display along with the title of the page. There are many more things that you can do with this section of the text which I will be going over in another into to HTML article.

<head>
<meta http-equiv=”Content-Type” content=”text/html; charset=utf-8″ />
<title>Demo Website || featured on Code With Design</title>
</head>

The first bit of the code is very boring but now we can get more into the content of the page. As you can see there are greater and lesser then signs with content in between, these are called tags. When declaring information inside of a tag you need to have a starting tag and a closing tag. The closing tag is going to allow you to specify that it is closing and will always close the tag immediately before it. For every opening tag you need to have a closing tag or information will not be displayed properly.

<h1>H1 tags</h1>
<h2>H2 tags</h2>
<h3>H3 tags</h3>

Notice how these tag examples are within the body tags. This means that the following content will be displayed within the body of the web browser. When you look at the page you will notice that it breaks into sections. The main section is html which contains the sub sections of head and body.

<html>
<head>
</head>
<body>
</body>
</html>

You can start creating a site with just this information but it is a good idea to clarify the beginning information in the tags for the best results when trying to find bugs and errors.

Within the body of the page a lot of the information can be sorted into different sections. In order to seperate the content you will need to use something called div tags. A div tag can easily break apart seperate sections of the page and will help you style your page in the future.

<div id=”header”>
<h1>Code With Design</h1>
</div>

Note that it is possible to contain divs inside of divs.

Caleb Jonasson

Tags: , , , , ,

Javascript Hoirzontal Menu

by: Caleb Jonasson - October 8th, 2009   Filed under: javascript, Web Development Add Comment

javascript_horizontal_menu

In order to create a proper working javascript based horizontal menu you need to have all of the necessary files. These files consist of :

/SpryAssets/SpryMenuBarHorizontal.css
/SpryAssets/SpryMenuBar.js

index.php
main.css

The first section of code is going to be the SpryMenuBarHorizontal.css

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93

@charset "UTF-8";
ul.MenuBarHorizontal
{
margin: 0;
padding: 0;
list-style-type: none;
font-size: 100%;
cursor: default;
width: auto;
}
ul.MenuBarActive
{
z-index: 1000;
}
ul.MenuBarHorizontal li
{
margin: 0;
padding: 0;
list-style-type: none;
font-size: 100%;
position: relative;
text-align: left;
cursor: pointer;
width: 8em;
float: left;
}
ul.MenuBarHorizontal ul
{
margin: 0;
padding: 0;
list-style-type: none;
font-size: 100%;
z-index: 1020;
cursor: default;
width: 8.2em;
position: absolute;
left: -1000em;
}
ul.MenuBarHorizontal ul.MenuBarSubmenuVisible
{
left: auto;
}
ul.MenuBarHorizontal ul li
{
width: 8.2em;
}
ul.MenuBarHorizontal ul ul
{
position: absolute;
margin: -5% 0 0 95%;
}
ul.MenuBarHorizontal ul.MenuBarSubmenuVisible ul.MenuBarSubmenuVisible
{
left: auto;
top: 0;
}
ul.MenuBarHorizontal ul
{
border: 1px solid #CCC;
}
ul.MenuBarHorizontal a
{
display: block;
cursor: pointer;
background-color: #4b4b4b;
padding: 0.2em 0.4em;
color: #ffffff;
text-decoration: none;
}
ul.MenuBarHorizontal a:hover, ul.MenuBarHorizontal a:focus
{
background-color: #4b4b4b;
color: #FFF;
}
ul.MenuBarHorizontal a.MenuBarItemHover, ul.MenuBarHorizontal a.MenuBarItemSubmenuHover, ul.MenuBarHorizontal a.MenuBarSubmenuVisible
{
background-color: #333366;
color: #ccccff;
}
ul.MenuBarHorizontal iframe
{
position: absolute;
z-index: 1010;
}
@media screen, projection
{
ul.MenuBarHorizontal li.MenuBarItemIE
{
display: inline;
f\loat: left;
background: #4b4b4b;
}
}

The second file, SpryMenuBar.js looks like this.

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119
120

    var Spry;
    if(!Spry)
    {
    Spry = {};
    }
    if(!Spry.Widget)
    {
    Spry.Widget = {};
    }
    Spry.Widget.MenuBar = function(element, opts)
    {
    this.init(element, opts);
    };
 
    Spry.Widget.MenuBar.prototype.init = function(element, opts)
    {
    this.element = this.getElement(element);
 
    this.currMenu = null;
 
    var isie = (typeof document.all != ‘undefined’ &amp;&amp; typeof window.opera == ‘undefined’ &amp;&amp; navigator.vendor != ‘KDE’);
    if(typeof document.getElementById == ‘undefined’ || (navigator.vendor == ‘Apple Computer, Inc.’ &amp;&amp; typeof window.XMLHttpRequest == ‘undefined’) || (isie &amp;&amp; typeof document.uniqueID == ‘undefined’))
    {
    return;
    }
    if(opts)
    {
    for(var k in opts)
    {
    var rollover = new Image;
    rollover.src = opts[k];
    }
    }
 
    if(this.element)
    {
    this.currMenu = this.element;
    var items = this.element.getElementsByTagName(‘li’);
    for(var i=0; i 0)
    {
    layers[0].parentNode.removeChild(layers[0]);
    }
    };
 
    Spry.Widget.MenuBar.prototype.clearMenus = function(root)
    {
    var menus = root.getElementsByTagName(‘ul’);
    for(var i=0; i 0 ? submenus[0] : null);
 
    var hasSubMenu = false;
    if(menu)
    {
    this.addClassName(link, “MenuBarItemSubmenu”);
    hasSubMenu = true;
    }
 
    if(!isie)
    {
 
    listitem.contains = function(testNode)
    {
    if(testNode == null)
    {
    return false;
    }
    if(testNode == this)
    {
    return true;
    }
    else
    {
    return this.contains(testNode.parentNode);
    }
    };
    }
 
    var self = this;
 
    this.addEventListener(listitem, ‘mouseover’, function(e)
    {
    if(self.bubbledTextEvent())
    {
 
    return;
    }
    clearTimeout(closetime);
    if(self.currMenu == listitem)
    {
    self.currMenu = null;
    }
 
    self.addClassName(link, hasSubMenu ? “MenuBarItemSubmenuHover” : “MenuBarItemHover”);
    if(menu &amp;&amp; !self.hasClassName(menu, “MenuBarSubmenuVisible”))
    {
    opentime = window.setTimeout(function(){self.showSubmenu(menu);}, 250);
    }
    }, false);
 
    this.addEventListener(listitem, ‘mouseout’, function(e)
    {
    if(self.bubbledTextEvent())
    {
 
    return;
    }
 
    var related = (typeof e.relatedTarget != ‘undefined’ ? e.relatedTarget : e.toElement);
    if(!listitem.contains(related))
    {
    clearTimeout(opentime);
    self.currMenu = listitem;
 
    self.removeClassName(link, hasSubMenu ? “MenuBarItemSubmenuHover” : “MenuBarItemHover”);
    if(menu)
    {
    closetime = window.setTimeout(function(){self.hideSubmenu(menu);}, 600);
    }
    }
    }, false);
    };

Now you need your index.php. This is where the menu content will be.

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49

<!DOCTYPE html PUBLIC “-//W3C//DTD XHTML 1.0 Transitional//EN” “http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd”>
<html xmlns=”http://www.w3.org/1999/xhtml”>
<head>
<meta http-equiv=”Content-Type” content=”text/html; charset=utf-8″ />
<title>Untitled Document</title>
<link href=”main.css” rel=”stylesheet” type=”text/css” />
<script src=”SpryAssets/SpryMenuBar.js” type=”text/javascript”></script>
<link href=”SpryAssets/SpryMenuBarHorizontal.css” rel=”stylesheet” type=”text/css” />
</head>
 
<body>
 
<div id=”container”>
<div id=”header”>
<h1>Header</h1>
 
<ul id=”MenuBar1″>
<li>
<div align=”center”><a href=”#”>simple</a></div>
</li>
<li>
<div align=”center”><a href=”#”>Smart</a></div>
</li>
<li>
<div align=”center”><a href=”#”>Tutorials</a>
<ul>
<li><a href=”#”>Photoshop</a></li>
<li><a href=”#”>Illustrator</a></li>
<li><a href=”#”>Flash</a></li>
<li><a href=”#”>Dreamweaver</a></li>
</ul>
</div>
</li>
</ul>
<!– end #header –></div>
<div id=”mainContent”>
<h1> Main Content </h1>
<!– end #mainContent –></div>
<div id=”footer”>
<p>Footer</p>
<!– end #footer –></div>
<!– end #container –></div>
<script type=”text/javascript”>
<!–
var MenuBar1 = new Spry.Widget.MenuBar(“MenuBar1″);
//–>
</script>
</body>
</html>

The last file that we need is the main.css file.

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38

@charset "utf-8";
body {
font: 100% Verdana, Arial, Helvetica, sans-serif;
background: #666666;
margin: 0;
padding: 0;
text-align: center;
color: #000000;
}
.oneColElsCtrHdr #container {
width: 46em;
background: #FFFFFF;
margin: 0 auto;
border: 1px solid #000000;
text-align: left;
}
.oneColElsCtrHdr #header {
background: #4b4b4b;
color: #ffffff;
padding: 0 10px 0 20px;
}
.oneColElsCtrHdr #header h1 {
margin: 0;
padding: 10px 0;
}
.oneColElsCtrHdr #mainContent {
padding: 0 20px;
background: #FFFFFF;
margin-top: 50px;
}
.oneColElsCtrHdr #footer {
padding: 0 10px;
background:#DDDDDD;
}
.oneColElsCtrHdr #footer p {
margin: 0;
padding: 10px 0;
}

Try it out by clicking here.

Tags: , , , , , , ,

Intro to HTML: CSS Creating a Style Sheet

by: Caleb Jonasson - September 30th, 2009   Filed under: CSS, Web Development Add Comment

CSS stands for cascading style sheet, this is the document that will contain all of the information required to make your site look more appealing to the people reading it. Some of the things that CSS files can do are as follows: give areas of the page or the page a background, change the font and font color, and manage placement of div tags. Take note that the page created in this example is going to be very ugly and its sole purpose is to give you a better understanding as to how CSS works.

For the following we are going to use this as a layout and I would recommend that you use it as a base structure that you can build your site upon for the duration of this article.

<!DOCTYPE html PUBLIC “-//W3C//DTD XHTML 1.0 Transitional//EN” “http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd”>
<html xmlns=”http://www.w3.org/1999/xhtml”>
<head>
<meta http-equiv=”Content-Type” content=”text/html; charset=utf-8″ />
<title>Untitled Document</title>
<link href=”style.css” rel=”stylesheet” type=”text/css” />
</head>

<body>
<div id=”container”>
<div id=”header”>
<h1>Code With Design</h1>
</div>
<div id=”sidebar1″>
<h3>navigation</h3>
<p>navigation links coming in another tutorial.</p>
</div>
<div id=”mainContent”>
<h1> Header 1</h1>
<p>Paragraph text.</p>
</div>
<br />
<div id=”footer”>
<p>Code With Design</p>
</div>

</div>
</body>
</html>

On this page we are going to work with styling the div tags. If you look at the code you will notice that the tags aren’t just a simple open and closing tag. These look differently because the div tags are named. This is important because the style.css file needs to know what to do with the separate content.

<div id=”footer”>

You are also going to notice that in the head of the file there is a link to the style sheet. If you where to put your pages into a separate folder you would have to change the link because it is relative. You can also call on it through a URL.

<link href=”style.css” rel=”stylesheet” type=”text/css” />

If you need to push the link back use ../ before style.css

<link href=”../style.css” rel=”stylesheet” type=”text/css” />

Now that we have gone over how to properly link to a style sheet it is time to take a look at what an actual style sheet. The beginning of a style sheet will contain some simple code then will start to stylize the body. All of the content within the style.css sheet will be named as divs and other parts of content such as p for paragraph or hover for content with a mouse over. The attributes that go with these separate sections are placed within curly bracers.

@charset “utf-8″;
body  {
font: 100% Verdana, Arial, Helvetica, sans-serif;
background: #ffffff;
margin: 0;
padding: 0;
text-align: center;
color: #000000;
}
#container {
width: 900px;
background: #FFFFFF;
margin: 0 auto;
text-align: left;
}
#header {
background: #ffffff;
padding: 0 10px 0 20px;
}
#header h1 {
margin: 0;
padding: 10px 0;
}
#sidebar1 {
float: right;
width: 200px;
background: #ffffff;
padding: 15px 10px;
}
#mainContent {
margin: 0 250px 0 0;
padding: 0 20px;
}
#footer {
padding: 0 10px 0 20px;
background:#ffffff;
}
#footer p {
margin: 0;
padding: 10px 0;
}
.fltrt {
float: right;
margin-left: 8px;
}
.fltlft {
float: left;
margin-right: 8px;
}
.clearfloat {
clear:both;
height:0;
font-size: 1px;
line-height: 0px;
}

Because I intend on linking an image to this page I want to make sure that the image will not have a border when I mouse over it. So in this demo I will first add an image that is linkable to the index.php page. The code looks like this.

<a href=”http://www.google.ca/”><img src=”http://www.google.ca/intl/en_ca/images/logo.gif” alt=”” name=”image” width=”276″ height=”110″ id=”image” /></a>

Place the code into the main content div of your page and preview the page before changing the CSS so you know what the browser will want to do automatically. Now that you can see the large blue lines around the image you can place this code into the style.css page. As long as the code is not placed inside of another attribute it will work, it is a good idea to keep the separate styles close together based on where they come on the page so you may want header first then content followed by sidebar then footer.

#mainContent img{
float:left;
border: 0px;
text-decoration:none;
}

Because the CSS entered above has a hash sign followed by the content section and a space with “img” typed after; the following effects will only apply themselves to images inside of the main content. If you would like all of the images to display no border then you would have to enter the following code.

img {
border: 0px;
}

This is a very important technique when styling a page and it comes in handy quite often. If I wanted the paragraph to be indented 20 pixels and the header to only be indented 10 pixels I would use a very similar method.

#mainContent h1,h2,h3{
padding-left: 10px;

}

#mainContent p {
padding-left:20px;
}

In order to give the page some boarders we could use the simple code.

#container {
border: 1px solid #444444;
}

Now you should have a simple understanding as to how CSS files can effect your document and one of the great things about them is that you can easily style all of the pages on your website by just linking back to the style sheet. This way if you need to change the look of something all you need to do is update the style.css file.

Tags: , , , ,