Google+ logo Twitter logo Youtube logo

Building the basic HTML structure


Building the basic HTML structure

We just defined the structure of the website. Now we're going to build the structure in actual HTML.

Defining the website-structure is nothing more or less then splitting up the page in sections.

We just saw that the example contains three blocks; header, menu and content.
Do you remember what a DIV is? A "section" of "block"! So: we're gonna create thee div's. For these blocks we're going to define a unique id for each one of them. Because it's handy to define logic and relevant ID-names we're going to name these: header, menu and content. This could look like this;

<div id="header">
	This is the header!
</div>
<div id="menu">
	This is the menu!
</div>
<div id="content">
	This is a section for actual information / content!
</div>

Like we have learned before we also need to create some basic HTML tags: <html>, <head> and <body>. These basic-tags will be merged with our example before, like this;
<html>
<head>
	<title>A website with three blocks!</title>
</head>
<body>
	<div id="header">
		This is the header!
	</div>
	<div id="menu">
		This is the menu!
	</div>
	<div id="content">
		This is a section for actual information / content!
	</div>
</body>
</html>

Now we have defined and created the HTML structure, we can style it.


Leave a comment ...

Name (will be visible)
E-mailaddress (will not be shown)
Comment
Type the code illustrated below

Back to top