Jan 22

Howto: Code a tableless website part 1

Howto 28 Comments »

Preface

In this tutorial, I will teach you how to code a website without any tables. We will use CSS and <div> tags instead. The sample website we’re going to build consists of a header, navigation system on the left, and the main content on the right. Also a footer is added. I asume you already have basic or decent experience with HTML coding.

Get started

Let’s start off by creating two files. One will be the CSS file and one will be the HTML file. Now make your HTML look like the following code.

1
2
3
4
5
6
7
8
9
10
11

<html>
<head>
<link rel="stylesheet" type="text/css" href="style.css">
<title>Tablesless Website</title>
</head>
<body>
<div id="container">
Hello 
</div>
</body>
</html>

For styling we use the HTML <div> tags and we use CSS. As you can see I gave the <div> an id. Id’s are always unique. There can only be one id. We’re now going to give this <div> a styling. Enter the following code inside your CSS file and then save it as ’style.css’ in the same folder as your html file. The <link> tag inside your <head> in the HTML file includes the CSS file.

1
2
3
4
5
6

/* We use the # when we define the styling of an id */
#container { 
	width: 700px;
	margin-left: auto;
	margin-right: auto;
}

Explanation: Everything between the brackets are given to the specified tag before it. In this example we give the ID, container a width, margin-left and margin-right. The width specifies the width of the container (orly!). Margins define space between the specified tag and the element next to it. In this case the element next to <div id=”container”> is <body>. By setting the margin-left and margin-right at ‘auto’, #container will order perfectly in the middle of the sample website.

View the sample here.

Jan 21

The history of math

Math 7 Comments »

1960’s Arithmetic test:

“A logger cuts and sells a truck load of lumber for $100. His cost of production is four-fiths of that amount.
What is his profit?”

70’s New Math test:

“A logger exchanges a set (L) of lumber for a set (M) of money. The cardinality of set M is 100. The set C of production costs contains 20 fewer points.
What is the cardinality of set P of profits?”

80’s education reform version:

“A logger cuts and sells a truckload of lumber for $100. His cost is $80, and his profit is $20.
Find and circle the number 20.”

90’s version:

“An unenlightened logger cuts down a beautiful stand of 100 old growth trees in order to make a $20 profit.
Write an essay explaining how you feel about this as a way of making money.
Topic for discussion: How did the forest birds and squirrels feel?”

Jan 21

Snijpunten van wortel functies, rechte lijnen en van twee wortelfuncties

Dutch, Math 59 Comments »

Snijpunten van wortel functies en rechte lijnen en van twee wortelfuncties

a) √(8-2X) = X

8-2X = X^2
X^2+2x-8 = 0
(X-2)(X+4)
X = 2 v X = -4
X = -4 voldoet niet; deze oplossing is ingevoerd door het kwadrateren.
Invullen geeft coördinaat snijpunt: (2,2).

b) √(3-X) = √X
3-X = X
2X = 3
X = 3/2

c) 3-X = √(3X+1)
9-6X+X^2 = 3X+1
X^2-9X+8 = 0
(X-1)(X-8)
X = 1 v X = 8
X = 8 voldoet niet; deze oplossing is ingevoerd door het kwadrateren.
Invullen geeft coördinaat snijpunt: (1,2).

Jan 21

Hello World in Perl

Hello World, Perl 5 Comments »

Here is the hello world example in Perl.

1
2
3

#!usr/bin/perl
 
print("Hello World!");

Jan 21

Hello World in Java

Hello World, Java 8 Comments »

The hello world example in Java.

1
2
3
4
5
6
7

public class Main
{
	public static void main(String[] args)
	{
		System.out.println("Hello World!");
	}
}
Previous Entries
WP Theme & Icons by N.Design Studio
Entries RSS Comments RSS Log in