The layman's barely a guide to writing a webpage

Prolescum · Oct 25, 2010

Having taken Anachronous Rex's thought and molested it thoroughly, I thought I'd do my bit and add a layman's guide to building simple webpages... It's quite a good thing to know, and is surprisingly easy to pick up.

This first post is just an little primer to show how it works, and I'll go into depth in subsequent posts. Comments and corrections are appreciated, corrections will be added to the appropriate posts.

So... ever used BBcode? Of course you have, you're on a forum...

BBcode (bulletin board code), such as [i ]italics[/i ] or

Prolescum · Oct 25, 2010

As you may or may not know, a webpage passes information to your browser for various reasons. One important bit of info, most would say vital, is the declaration. There are a few different types of file readable from a browser, I'm sure you've seen .php, .aspx or .xhtml floating around at the end of URLs, and when we write a webpage, whichever format, we must let the browser know so it renders correctly (unless it's Internet Explorer, in which case it will balls it up regardless - more on that on another post).

As it's just basic HTML we're dealing with, we'll be using the current HTML standard HTML 4.01 Transitional, so we need to declare this document to be HTML 4.01.

Are you ready to have a go at writing a page?

Open up a blank document (my preferred text editor is gedit, but many of you will have notepad or whatever MS call it these days which is probably fine) and paste the following document declaration (make sure you include the <>):

Code:

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">

We are using the transitional (loose instead of strict) because some of the attributes are being deprecated but are still valuable to know for later on.

So now that we've declared the type of document we're using, we want to add our first tags:

Code:

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html>
<head></head>
<body></body>
</html>

Doesn't look like much, right? It isn't yet. If you're wondering what the tags with slashes are, well, usually, we are required to close the tags we open to better enable us to define areas of the page. In the above example, we have <head> and <body> tags and their respective close-tags.

<html> defines the area that contains the, er html... The <head> tag will contain data, links and scripts for the browser to read/load, whilst the <body> tag contains the viewable page data.

As an example, I've added some common head tags:

Code:

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html>
<head> 
  <meta name="google-site-verification" content="blah blah blah"> 
  <meta http-equiv="Content-Type" content="text/html; charset=UTF-8"> 
  <title>This is the name of the page | egap eht fo eman eht si sihT</title>  
  <link href="http://ourwebsite.com/style.css" rel="stylesheet" type="text/css"> 
  <script type="text/javascript" src="http://ourwebsite.com/scripts/flashyjavascript.js"></script> 
  <script type="text/javascript" src="http://ourwebsite.com/scripts/flashyjavascript2.js"></script> 
  <link rel="alternate" type="application/rss+xml" title="the RSS feed" href="http://ourwebsite.com/tinc?key=5oPYthwI">   
</head>
<body></body>
</html>

As you can see, lots of information is tucked away in there but for our purposes, we'll only be using the <title> tag at the moment.

Add a title within the <head> tags and some text to the <body> tags like so:

Code:

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
  <title>Is Charlie Brown lame?</title>     
</head>
<body>
Hello, world!</body>
</html>

then save it with an .html extension (like peanuts.html or something) to your desktop and open it with your browser (you can right click the file and it should give you the option. Unless you use a mac, in which case, lol). Congratulations, you've created a basic page

Prolescum · Oct 25, 2010

So now we've got our basic page set up, we should add some detail. We do this by adding CSS (cascading style sheets), which we link to in the <head> tags (a separate file), but we can also add it directly to the HTML proper. As we're dealing with a simple page, we'll be adding it to the page itself for now. Open the page in both your text editor and your browser.

Below we have our basic page, now with an added <style> tag, including the type (text/css), remembering to close the tag with </style>:

Code:

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
  <title>Is Charlie Brown lame?</title> 
<style type="text/css">
body {
	font-family: "Trebuchet MS", Verdana, Arial, Helvetica, sans-serif;
	font-size: 14px;
	color: #cccccc;
	background-color: #696249;
}
</style>
</head>
<body>Hello, world!</body>
</html>

What we've done here is define the body of the page, specifying a particular font, the font's size, its colour (in American English...) and a background colour. You can play with these as much as you fancy. There is a colour wheel here.

What we really need now is a section or division, where a part of the page differentiates itself from the body. We can achieve this by using the <div> tags in combination with the CSS. Firstly, we'll add a type of division to the CSS and give it attributes:

Code:

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
  <title>Is Charlie Brown lame?</title> 
<style type="text/css">
body {
	font-family: "Trebuchet MS", Verdana, Arial, Helvetica, sans-serif;
	font-size: 14px;
	color: #cccccc;
	background-color: #696249;
}

#newbit {
	font-size: 18px;
	background-color: #222222;
}
</style>
</head>
<body>Hello, world!</body>
</html>

Then we'll add the division (<div>) and give it the identity (id="" attribute) newbit:

Code:

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
  <title>Is Charlie Brown lame?</title> 
<style type="text/css">
body {
	font-family: "Trebuchet MS", Verdana, Arial, Helvetica, sans-serif;
	font-size: 14px;
	color: #cccccc;
	background-color: #696249;
}

#newbit {
	font-size: 18px;
	background-color: #222222;
}
</style>
</head>
<body>Hello, world!
<div id="newbit">This is new!</div>
</body>
</html>

As you can see, anything within the <div> will have the attributes of the newbit style. I will note that <div> tags do not need to have an id, as they are for dividing areas of the page, but they are often given an identity.

"...but what if we want the <div> to be, say, a box?" I hear you cry? Well, we add some more attributes to the #newbit CSS. Let's say we want the box to be 600 pixels x 100 pixels, we would add:

Code:

<i>
</i><style type="text/css">
body {
	font-family: "Trebuchet MS", Verdana, Arial, Helvetica, sans-serif;
	font-size: 14px;
	color: #cccccc;
	background-color: #696249;
}

#newbit {
	font-size: 18px;
	background-color: #222222;
	width: 600px;
	height: 100px;
}
</style>

And as if by magic (or if you save your edits and refresh the page in your browser) you'll see the division has become a 600x100px box!

What if we want to put the box somewhere else on the page? We add more attributes to the CSS...

Code:

<i>
</i><style type="text/css">
body {
	font-family: "Trebuchet MS", Verdana, Arial, Helvetica, sans-serif;
	font-size: 14px;
	color: #cccccc;
	background-color: #696249;
}

#newbit {
	font-size: 18px;
	background-color: #222222;
	width: 600px;
	height: 100px;
	text-align: center;
	margin-left: auto;
	margin-right: auto;
}
</style>

Above, I've centre justified the text and specified left and right margins. You may set margins (top, bottom, left or right) as you wish, but with auto for both left and right, each side shares equal margin dependent on the specified width of the <div>. Feel free to fiddle with the attributes and we'll take a look at arranging <div> tags on the page next time.

Prolescum · Oct 25, 2010

Okay, so we've written a basic page and defined a division, now we get to the interesting bit...

Multiple divs!

So far it's all been plain sailing, and at the outset, this bit is too. I've changed some of our page, adding an extra div (secondbit) to the <body>, and defining it in the CSS section of the <head> and have given the first and second divs similar attributes.

Save the new version or add the appropriate bits to your own one and have a look through your web browser. You should see two equally sized boxes with borders. Looking back at the CSS, you'll see the secondbit div has margin-top: 20px;, otherwise it will put the div directly below the first with no space.

A bit about the border:

border-style attributes come in various flavours, solid, dotted, dashed, inset, outset, ridge etc, although many are a little old-fashioned really. Sticking with solid usually looks okay

You must define the border's style, width and colour if you're going to use one. You can also give each border (border-left, border-right, border-top, border-bottom) attributes if you wish, although there aren't many who do these days.

But what if we want the boxes next to each other horizontally? Well, we have to wrap the second box around the first. Sounds a bit daft, but an example of what I mean would be, on any given webpage, you're likely to come across an image where the image's article text surrounds the image rather than the image standing alone on a separate line. The principle is the same. If we aligned the image to the left, the text would surround it from the right and vice versa.

So to do this with a div, we need to float both of them to the left of the page (the left as defined by the earlier body attributes in the CSS - the body being the parent tag of newbit and secondbit). We have to do both otherwise they will appear one on top of the other.

Here's the entire page:

You may have noticed that I removed the margin-top and changed the margin-left attribute on secondbit, as this now defines the distance from newbit, not body. Float comes in the following varieties:
left, right, none and inherit. The first three are self explanatory, inherit means to inherit the float value of the parent tag.

Next up: Text formatting...

nophun · Oct 25, 2010

Cool little guild. Just two things I would look at.
If working on a actual website that uses multiple pages it is a good Idea to use external style sheets. Obviously this helps with many things like, updating the style of you website without having to edit every page.

@ Prolescum
Is there a reason you are not using HTML5's structure tags?
They are so nice to work with.

Code:

<header>, <nav>, <article>, <section>, <aside>, <footer>

Prolescum · Oct 25, 2010

nophun said:
Cool little guild. Just two things I would look at.
If working on a actual website that uses multiple pages it is a good Idea to use external style sheets. Obviously this helps with many things like, updating the style of you website without having to edit every page.

Show More Hide

{TEXT}

Yes, I noted that when I first added the CSS to the page. I will be separating them as time goes on

Prolescum said:
We do this by adding CSS (cascading style sheets), which we link to in the <head> tags (a separate file), but we can also add it directly to the HTML proper. As we're dealing with a simple page, we'll be adding it to the page itself for now.

Code:
@ Prolescum
Is there a reason you are not using HTML5's structure tags?
They are so nice to work with.

Code:

<header>, <nav>, <article>, <section>, <aside>, <footer>

Yes, there are a few reasons, the main ones being that HTML5 isn't a standard and won't be for quite a few years yet, 4.01 loose allows a certain amount of sloppiness, and as stated, this is a layman's guide

nophun · Oct 25, 2010

HTML 4.01 is old and boring. Everyone will use HTML5 before it is standard. Lots of big sites already got sections running HTML5 code.

Shinny and supported > Aged and standard . :razz:
I am joking of course. I understand why you are sticking with the standard.

Can a mod please delete all my posts in this thread, so the actual tutorial is easier to follow.
Thanks.

Prolescum · Oct 25, 2010

I don't think you need your posts deleted, they're perfectly reasonable

It's also worth noting that IE 6 and 7, the world's most widely used browsers do not (and will not) support HTML5 or CSS3.

nophun · Oct 26, 2010

Prolescum said:
It's also worth noting that IE 6 and 7, the world's most widely used browsers do not (and will not) support HTML5 or CSS3.

It should also be noted if MS was competent in the web browser department IE6-7 would not have even close to the market share they have today. Very much like trying to get people to move from WinXP to Vista, no progress was made until Win7's release and XP was no longer supported. Enter IE9 to be released next year w/ HTML5 support.

http://www.youtube.com/html5

It is time to update your browsers folks.

Master_Ghost_Knight · Oct 26, 2010

If the IE9 is going to be like the beta version, here is a good advice when trying to install it: Don't!
Oh and here is a very good reference website to learn your stuff:
http://www.w3schools.com/

They don't give you the trickyer bits, but it is good to strat learning.

Prolescum · Oct 26, 2010

The issue of IE9 is moot, as enterprise still use IE6 + XP (there are valid reasons for this) and will probably over the next couple of years migrate to IE8 + Windows 7. IE9 is in beta testing and won't be pushed out to users or installed by default (as far as I know). IE8 wasn't even pushed downstream to Vista users if my memory serves. Either way, you'd have to directly download it, and given that most browsers are already years ahead and that IE9 won't be supporting many new features of HTML5 and CSS3 (there are valid, if a bit silly, reasons for this, and it speaks to the general unreadiness of HTML5/CSS3 as it stands today), it makes it doubly moot. Chrome/Chromium is increasing its speed of releases to every six weeks, Mozilla is preparing version 4 of Firefox with all its new fancy doodads and Opera is preparing version 11. IE9 is a bit of an also-ran.

@MGK

Already linked w3schools in the first post, it's a great resource

This is meant to be a quick start-up guide to pick up a basic understanding and learn as you go, fiddling is the best way to learn.

Prolescum · Oct 26, 2010

We now have our basic page with some colours and a couple of boxes, let's have a look at formatting our text.

Our CSS (from the <head> section) looks like this (I've annotated it - you can safely copy/paste, as annotations are not read by the browser):

In the body section, we have our basic rules for our text, however, we'll need more than one type to build a good looking page... We can achieve this by setting our preferences for H1, H2 and H3 tags. Firstly, we need to set our style in the CSS. Underneath the body section, we will add a header style (H1):

Code:

<i>
</i>h1 {
	font-family: "Trebuchet MS", Verdana, Arial, Helvetica, sans-serif;
	font-size: 22px;
	line-height: 22px;
	color: #cccccc;
}

You'll note that the font-size and line-height (this defines the space between the lines, btw) are larger than the ones set in the body.

Now we need to tag some text. We'll take the line from the div newbit and add H1 tags:

Code:

<div id="newbit">This is new!</div>

Code:

<div id="newbit"><h1>This is new!</h1></div>

Save the document and refresh your browser. Your code should now look somewhat like this

We can add H1, H2 and H3 styles, but that doesn't seem like very many options... To increase the amount available, we can give our styles classes. Let's take the H1 example:

Code:

<i>
</i>h1 {
	font-family: "Trebuchet MS", Verdana, Arial, Helvetica, sans-serif;
	font-size: 22px;
	line-height: 22px;
	color: #cccccc;
}

If we wanted to add a little flourish to a particular bit of text, we can create a class with the same font, size etc but a different colour or perhaps with a shadow. Yeah, shadows are always good...* We'll give H1 the class sweet:

*Warning: text-shadow might not work in Internet explorer. It is from CSS3 (the next standard for CSS due in a few years) but is implemented in most browsers already.

Code:

<i>
</i>h1 {
	font-family: "Trebuchet MS", Verdana, Arial, Helvetica, sans-serif;
	font-size: 22px;
	line-height: 22px;
	color: #cccccc;
}

h1.sweet {
	font-family: "Trebuchet MS", Verdana, Arial, Helvetica, sans-serif;
	font-size: 22px;
	line-height: 22px;
	color: #004488;
	text-shadow: 1px 1px 1px #cccccc;
}

and we'll add some H1-tagged text with the new class to the HTML (inside the div newbit:

Code:

<i>
</i><h1>This is new!</h1>
<h1 class="sweet">This is even newer!</h1>

The entire page should look like this:

Save it and have a look through your browser.

About text shadows:

Much CSS can be written in a kind of shorthand, abbreviated to keep the amount of code to a minimum. For example, margins can be set separately as margin-left, margin-right, margin-top, margin-bottom or all together as margin, however, the shorthand allows you to specify them all in various styles.

margin: 10px 15px; = top and bottom are 10px, right and left are 15px
margin: 10px 15px 10px; = top is 10px, right and left are 15px and bottom is 10px
margin: 10px 15px 10px 5px; = top 10px, right 15px, bottom 10px; left 5px;

text-shadow uses horizontal (X) and vertical (Y) axes, blur radius and colour, thus text-shadow: (X axis) 1px (Y axis) 1px (blur radius) 1px (colour) #cccccc; (text-shadow: 1px 1px 1px #cccccc

.

I will post some links for further detail soon, but I highly recommend just playing around with it; no one's going to die if you do. Well, maybe if you really mess up a webhamster will sigh, but on the scale of things, there are far worse crimes...

Next time: Adding a header.

Edited: Thanks to Spork.

CosmicSpork · Oct 26, 2010

Prolescum said:
About text shadows:

Much CSS can be written in a kind of shorthand, abbreviated to keep the amount of code to a minimum. For example, margins can be set separately as margin-left, margin-right, margin-top, margin-bottom or all together as margin, however, the shorthand allows you to specify them all in various styles.

margin: 10px; 15px; = top and bottom are 10px, right and left are 15px
margin: 10px; 15px; 10px; = top is 10px, right and left are 15px and bottom is 10px
margin: 10px; 15px; 10px; 5px; = top 10px, right 15px, bottom 10px; left 5px;

text-shadow uses horizontal (X) and vertical (Y) axes, blur radius and colour, thus text-shadow: (X axis) 1px (Y axis) 1px (blur radius) 1px (colour) #cccccc; (text-shadow: 1px 1px 1px #cccccc.

You're putting semi-colons in the wrong place

It needs to be:

Code:

<i>
</i> margin: 10px 15px 10px 5px;

Semi-colons always show the end of the current rule.

Prolescum · Oct 26, 2010

Lol, that'll teach me to do two things at once. I knew I'd cock up sooner or later :lol: Edited the post.

The layman's barely a guide to writing a webpage

Prolescum

New Member

Prolescum

New Member

Prolescum

New Member

Prolescum

New Member

nophun

New Member

Prolescum

New Member

nophun

New Member

Prolescum

New Member

nophun

New Member

Master_Ghost_Knight

New Member

Prolescum

New Member

Prolescum

New Member

CosmicSpork

New Member

Prolescum

New Member