Elsewhere on the internet...

The League of Reason has some social media accounts! You can find us on Facebook or on Twitter for some interesting links and things.

The layman's barely a guide to writing a webpage

Post new topic Reply to topic  Page 1 of 1
 [ 14 posts ] 
The layman's barely a guide to writing a webpage
Author Message
ProlescumWebhamsterUser avatarPosts: 5009Joined: Thu Dec 31, 2009 8:41 pmLocation: Peptone-upon-Sores

Post The layman's barely a guide to writing a webpage

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 [youtube ]video[/youtube ] are a webhamster's pared down HTML, allowing for formatting or embedding without having to worry about certain HTML tags being used for nefarious purposes by spammers, trolls or other undesirables.

Why am I mentioning it? It's very similar, having the same effect as true HTML, and its familiarity will hopefully dispel the idea that creating simple webpages is beyond normal abilities.

HTML uses tags (example: <img> = image) to tell the browser to render all the different things you find on a webpage, so using the example image tag, we'll have a look at how to tags work before we tackle how to actually construct a page.

So we have our image tag:

<img>


What exactly do we do with it? We give it some attributes! Firstly, we want the address of the image (this must be an accessible image, so not one stored on your computer!) so we add the src attribute (source) like so:

<img src="http://adultdave.co.uk/images/adultdave_portrait.png">


For reasons of tradition, or perhaps because there are some people still using text browsers (I know I do...), we must give the image an alt attribute for when the image cannot be viewed:

<img src="http://adultdave.co.uk/images/adultdave_portrait.png" alt="Picture of Prole">


To give that extra bit of something or other, we should also give the image a title for when your mouse hovers over the image:

<img src="http://adultdave.co.uk/images/adultdave_portrait.png" alt="Picture of Prole" title="Picture of Prole">


Then we might want to give it some style, so we should add, let's say, a border attribute:

<img src="http://adultdave.co.uk/images/adultdave_portrait.png" alt="Picture of Prole" title="Picture of Prole" style="border: 2px solid; border-color: #000000;">


We've added a 2 pixel thick border in black (using hexadecimal colour code in this case #000000) to the style attribute of the img tag. Is it still making sense? Excellent...

Now, were the image too big, we can also set the height and width within the style attribute:

<img src="http://adultdave.co.uk/images/adultdave_portrait.png" alt="Picture of Prole" title="Picture of Prole" style="border: 2px solid; border-color: #000000; height: 100px; width: 220px;">


I should note at this point that the syntax is pretty important, for example, when adding an attribute, it must be followed with the appropriate syntax:

src=""


where the equals sign still means equals and within the speech marks denotes the specifics of the attribute, in this case, the src address:

src="http://adultdave.co.uk/images/adultdave_portrait.png"


We use semi-colons (;) to complete each specific part of the attribute and colons (:) to separate the particular attribute style from the effect of the attribute:

border-color: #000000;

height: 100px; width: 220px;


A full list of the various attributes for img tags can be found here.

Now that we've seen how a tag works, let's get on to how to construct a page...
if constructive debate is allowed to progress, better ideas will ultimately supplant worse ideas.

Comment is free, but facts are sacred
Last edited by Prolescum on Mon Oct 25, 2010 6:50 pm, edited 2 times in total.
Mon Oct 25, 2010 4:03 pm
ProlescumWebhamsterUser avatarPosts: 5009Joined: Thu Dec 31, 2009 8:41 pmLocation: Peptone-upon-Sores

Post Re: The layman's barely a guide to writing a webpage

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 <>):

<!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:

<!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:

<!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:

<!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 :D
if constructive debate is allowed to progress, better ideas will ultimately supplant worse ideas.

Comment is free, but facts are sacred
Mon Oct 25, 2010 4:07 pm
ProlescumWebhamsterUser avatarPosts: 5009Joined: Thu Dec 31, 2009 8:41 pmLocation: Peptone-upon-Sores

Post Re: The layman's barely a guide to writing a webpage

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>:

<!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:

<!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:

<!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:

<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...

<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.
if constructive debate is allowed to progress, better ideas will ultimately supplant worse ideas.

Comment is free, but facts are sacred
Mon Oct 25, 2010 4:15 pm
ProlescumWebhamsterUser avatarPosts: 5009Joined: Thu Dec 31, 2009 8:41 pmLocation: Peptone-upon-Sores

Post Re: The layman's barely a guide to writing a webpage

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...
if constructive debate is allowed to progress, better ideas will ultimately supplant worse ideas.

Comment is free, but facts are sacred
Mon Oct 25, 2010 6:31 pm
nophunUser avatarPosts: 63Joined: Sat May 08, 2010 5:23 am Gender: Male

Post Re: The layman's barely a guide to writing a webpage

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.
<header>, <nav>, <article>, <section>, <aside>, <footer>
Mon Oct 25, 2010 8:33 pm
ProlescumWebhamsterUser avatarPosts: 5009Joined: Thu Dec 31, 2009 8:41 pmLocation: Peptone-upon-Sores

Post Re: The layman's barely a guide to writing a webpage

nophun wrote: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.




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

Prolescum wrote: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.


@ Prolescum
Is there a reason you are not using HTML5's structure tags?
They are so nice to work with.
<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 ;)
if constructive debate is allowed to progress, better ideas will ultimately supplant worse ideas.

Comment is free, but facts are sacred
Mon Oct 25, 2010 8:52 pm
nophunUser avatarPosts: 63Joined: Sat May 08, 2010 5:23 am Gender: Male

Post Re: The layman's barely a guide to writing a webpage

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.
Mon Oct 25, 2010 9:19 pm
ProlescumWebhamsterUser avatarPosts: 5009Joined: Thu Dec 31, 2009 8:41 pmLocation: Peptone-upon-Sores

Post Re: The layman's barely a guide to writing a webpage

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.
if constructive debate is allowed to progress, better ideas will ultimately supplant worse ideas.

Comment is free, but facts are sacred
Mon Oct 25, 2010 9:47 pm
nophunUser avatarPosts: 63Joined: Sat May 08, 2010 5:23 am Gender: Male

Post Re: The layman's barely a guide to writing a webpage

Prolescum wrote:
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. ;)
Tue Oct 26, 2010 1:02 am
Master_Ghost_KnightContributorUser avatarPosts: 2748Joined: Sat Feb 21, 2009 11:57 pmLocation: Netherlands Gender: Male

Post Re: The layman's barely a guide to writing a webpage

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.
"I have an irrefutable argument for the existence of...." NO, STOP! You are already wrong!
Tue Oct 26, 2010 2:08 pm
ProlescumWebhamsterUser avatarPosts: 5009Joined: Thu Dec 31, 2009 8:41 pmLocation: Peptone-upon-Sores

Post Re: The layman's barely a guide to writing a webpage

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.
if constructive debate is allowed to progress, better ideas will ultimately supplant worse ideas.

Comment is free, but facts are sacred
Tue Oct 26, 2010 2:37 pm
ProlescumWebhamsterUser avatarPosts: 5009Joined: Thu Dec 31, 2009 8:41 pmLocation: Peptone-upon-Sores

Post Re: The layman's barely a guide to writing a webpage

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):

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:
<div id="newbit">This is new!</div>


<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:

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.

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:

<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.
if constructive debate is allowed to progress, better ideas will ultimately supplant worse ideas.

Comment is free, but facts are sacred
Last edited by Prolescum on Tue Oct 26, 2010 6:54 pm, edited 1 time in total.
Tue Oct 26, 2010 5:42 pm
CosmicSporkLeague LegendUser avatarPosts: 929Joined: Sat Feb 21, 2009 10:36 pmLocation: UK Gender: Cake

Post Re: The layman's barely a guide to writing a webpage

Prolescum wrote: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 :p It needs to be:
 margin: 10px 15px 10px 5px;

Semi-colons always show the end of the current rule.
Image
“Nothing is as frustrating as arguing with someone who knows what he's talking about.” - Sam Ewing
Tue Oct 26, 2010 6:11 pm
WWW
ProlescumWebhamsterUser avatarPosts: 5009Joined: Thu Dec 31, 2009 8:41 pmLocation: Peptone-upon-Sores

Post Re: The layman's barely a guide to writing a webpage

Lol, that'll teach me to do two things at once. I knew I'd cock up sooner or later :lol: Edited the post.
if constructive debate is allowed to progress, better ideas will ultimately supplant worse ideas.

Comment is free, but facts are sacred
Tue Oct 26, 2010 6:52 pm
Post new topic Reply to topic  Page 1 of 1
 [ 14 posts ] 
Return to Technology/Engineering

Who is online

Users browsing this forum: No registered users and 2 guests