Mr. Emu Tutorials: Lesson 1 - The Basics *Web Design*

Lenny

Press "X" to admire hat
Joined
Jan 11, 2007
Messages
3,958
Location
Manchester
I'm splitting the Web Design tutorials into five 'lessons' solely on HTML, to begin with. The sixth 'lesson' will consist of a recap of everything in lessons one to five, and a small two-week project that people can do which will allow them to bring everything from the lessons together. After that, I'll go onto CSS, Javascript, ASP, and other things.

----------

What is HTML?

HTML, which stands for Hyper Text Markup Language, uses markup tags to tell a Web browser how to display a web-page. HTML files always have the extension .htm or .html. The .htm extension dates back to the earlier days of computing when all files had a three letter file extension. It doesn't matter which one you use, as long as you remember you've used that one.

I'm used to using .html, so that's what I'll use throughout the tutorials.

And a bit of trivia: the Internet is the network of physical computers connected together through the TCP/IP protocol, whilst the World Wide Web is the collection of HTML documents.

-----

How do I write HTML?

First, you need something to write HTML in. I've suggested Nvu as it also allows you to see what you're doing in Real Time, but it's also possible to do in Notepad or the Mac equivalent, SimpleText, which is TextEdit in OSX (TextEdit users must change the following to get HTML code written in TE to work - open the "Format" menu and select "Plain text" instead of "Rich text". Then open the "Preferences" window under the "Text Edit" menu and select "Ignore rich text commands in HTML files").

When you've got a program in which you can write your HTML, it's a simple case of combining markup tags to build a page - almost like a lego kit. I'm going to teach you which tags to use to achievecertain things, and how to combine them.

-----

My first HTML Page

Let's start with something simple. Open your desired program.

Nvu users: Open Nvu. To the bottom-right of the screen is the "Source" tab. Click it to bring the HTML editor to the front, and delete the text already there.

Text editor users: Open your preferred text editor.

When you're ready, type in the following code:

<html>

<head>
<title>Page Title</title>
</head>

<body>
This is writing <b>and this text is BOLD</b>
</body>

</html>

Try and keep everything in lowercase - whilst uppercase will work, the newer standard, XHTML, will only work with lowercase tags, and so it's good practice to keep your tags in lowercase.

To talk you through the code - every page has three sets of tags: <html></html>, <head></head>, <body></body>. I've colour-coded them and will continue to do so to make them stand out. If there is a colour you can't read, please tell me and I'll change it in later tutorials.

The <html> tag tells the web browser that the page is an HTML page. The closed </html> tag at the end tells the browser that there is no more HTML - it's like an end of file indicator.

Anything between the <head> and </head> tags is header information, and is not displayed in the browser window - things like the title of the web-page (<title></title>), which itself is shown in the caption of the browser.

Anything between the <body> and </body> tags is displayed by the browser. Open any web page, and everything that you can see is between the body tags. A tag that I've used is the bold tag (<b></b>), which some of you might notice as being similar to the BBCode equivalent used on this and most of boards.

Save the page.

Nvu users: save it as you normally would save anything.

Text-editor users: when you save it (as you would anything else), save it as the type "All Files", and save it with the filename webpage.html. The important bit is the ".html" at the end of the filename.

Find the .html file and double click it to open it in your web browser.

-----

What is an Element?

Each HTML document is made up of tags. Each tag is made up of angle brackets (< >), and come in pairs (< ... > and </ ... >). The first of the pair is known as the start tag (< ... >) and the second is known as the end tag (</ ... >). The end tag always closes the tag, in the same way as BBCode tags on forums are closed. Anything between the start and end tags is called the element content.

The line:

<b>and this text is BOLD</b>

is an element - it has a start tag (<b>), an end tag (</b>), and content (and this text is BOLD).

<body>
This is writing <b>and this text is BOLD</b>
</body>

is also an element.

-----

Some Simple Tags to Play with

Replace the TEXT inside the tags with any text you want.

Using HTML you can make some text a large heading - <h1>TEXT</h1>
And all the way down to a small heading - <h6>TEXT</h6>

You can make things bold - <b>TEXT</b>
Or italicise them - <i>TEXT</i>

What if you want to create paragraphs? - <p>TEXT</p>

To make a new line, you use the <br /> tag after a line of text. You'll notice that it's a single tag - what we call a self-closing tag. The same is true of the horizontal rule tag, which puts a line across the page - <hr />.

If you want to tell yourself what the code does within the document without your comment being shown in the web browser, then put what you want between comment tags - <!-- TEXT -->.

Play with the different tags, but remember to keep them all between the <body> tags.

If you have any problems, post them and your code (use the quote tags if it's more than a line of code), and I or someone else will help you out. If you've gone through the tutorial, and feel confident enough to help another person out with a problem, then by all means do so.

-----

Next week I'll cover attributes within tags, formatting, and entities. Happy HTMLing!
 
I've been playing with Nvu since you've posted it and it really is quite easy to pick up. I prefer typing things into the source page and seeing them appear on the normal page rather than the other way around (too easy that way :p). I've now learnt how to make tables, how to put in colours for backgrounds, borders, change fonts, change font sizes, change heights and widths of tables, all in source (or html).

To say I didn't know any of this until I started messing around on Nvu, I'm quite proud of myself :D
 
Font sizes and the like are lesson two, tables are lesson three, colours are lesson five (well, the colours themselves - RGB, Hex, and names). :rolleyes:

It's good to know that you've picked it up easily, and that Nvu isn't too hard to use.
 
Ooh, get me! But I do tend to pick things up if left to play around with it for a while. I've just been adding things on the normal page, seeing what changes on the source page, deleting them and then doing it all myself. But it's good to have all the explanation behind what I've been doing.

I've had a go at both rgb and hex, but have noticed that the page reverts it back to rgb anyway.
 
Me too- the program is considerably more user friendly than the previous one I tried.
Ok, tables within tables are a bit tricky, and the mp3 files I've linked turn blue and underlined, and give the correct URL, but don't actually play yet (and why do the "set table size controls default to pixels when I always want them in percentages, mutter grumble?) but I am advancing (one picture, the basis for the edging and a great frustration with text that doesn't copy/paste and my inability to use pictures as links) and will probably be able to keep up with the first six lessons; it actually helps having a specific result you want to achieve.
 
Well the first five lessons just cover the basics, with no real aim except to teach people the basics. The sixth lesson is a two week project - I'll describe a site I want built, and people will have to weeks to build it. The lessons after that (CSS, Javascript, ASP, etc) will use the site that has been built (and I'll upload one that I've done if people want to use that instead) and evolve it to use the more advanced things.

I've already PM'ed a few things to Hoopy, since she's ahead - is there anything you'd like, Chris? My PM box is always open. I could give you some code to change the way the links to your MP3s look, for example, or see if I can work out where you might be going wrong with nested tables.
 
See, ya'll have it easy. I learned the semi-hard way. ie: someone else coded the html on my first website and I played 'copy/paste' / 'trial/error' to see what happened and what changed.

There's good and bad to that. Good: I figured it out on my own (which means I learn better). Bad: I copy/paste ALL of my code. I couldn't fill in all of the 'a href' CSS variants by hand if I had to - I'd have to look them up! I am such a bad coder. :p~
 
...okay, I was having a look at Nvu, and a lot of the basic commands you listed in your first post I remember, but...this bit...

<meta content="text/html; charset=ISO-8859-1"
http-equiv="content-type">

...I am not sure about. And I've been getting this thing where once I've put bold tags in for a certain section of text, the whole thing goes bold. It's annoying because I can't seem to see why it is happening...
 
<meta content="text/html; charset=ISO-8859-1"
http-equiv="content-type">

That's telling the browser that the page it's loading is an HTML page, and that is uses the ISO-5-1 character set - the default character set used in HTML documents.

If you open up the "Insert > Symbol" window in Word, the ISO-8859-1 character set is the same as "Latin 1".

Anything in meta tags tells the browser about the page - the character set and encoding it uses, what words and phrases it's connected to when you search for it in a search engine, and the description of the site given by the search engine.

---

...I am not sure about. And I've been getting this thing where once I've put bold tags in for a certain section of text, the whole thing goes bold. It's annoying because I can't seem to see why it is happening...

Without seeing the code, I'd hazard a guess at you not closing the bold tags? Or maybe putting in an end tag, but without the "/".

Could you post the code for me? It might be tomorrow until I can answer it (need to get off to bed as I need to be up at seven for work), but someone else might work it out for you.
 
Oh, that's where the keywords go, is it? Thanks for the explanation, makes perfect sense.


Hmm, now those would be the obvious mistakes, wouldn't they? I thought I'd checked that pretty carefully, though, which is why I was confused, but I shall go and look at the code, and post it assuming it's not one of those silly errors.

It was a bit disheartening, because I thought to myself, 'Well, if I can't even do anything this simple now, then...'. :p


Oh, and I managed to make it not bold with this:

<span style="font-weight: normal;">Body text...</span>

...but I didn't understand why it was bold by default.



Okay, here's the whole thing. Even the headline comes out bold, and that is before the bold tags?!

<html>
<head>
<meta content="text/html; charset=ISO-8859-1"
http-equiv="content-type">
<title>TITLE!</title>
</head>
<body>
<h1><b>HEADLINE!</b></h1>
<h2><i>Subheading!</i></h2>
<p>
</p>
<h3>Body text...<br>
<p></p>
Second paragraph and <span style="color: rgb(255, 0, 0);">something
in red</span>.
</h3>
</body>
</html>
 
Indeed it is. An example from one of my pages of everything until the end header tags

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

<html xmlns="XHTML namespace">

<head>

<!-- Created by Lenco. Productions (C) 2008 -->

<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />

<meta name="keywords" content="lenny, ineffable, journal, blog, technology, gadgets, musings, playstation 3, ps3, xbox 360, 360, video games, games, next gen, computer, desktop, PC, youtube, meme, internet" />

<meta name="description" content="Lenny, Ineffable So... - Musing on gadgets, technology, and the ineffable." />

<title>Lenny, Ineffably So - Home</title>

<link href="Java and CSS/ineffably_so.css" rel="stylesheet" type="text/css" media="all"/>

</head>

The document is an XHTML document that complies with the W3C standards. It uses the "UTF-8" charset, rather than ISO-8859-1, has a string of keywords, a descriprion, and title, and uses a stylesheet.

None of that is seen by the user, but is instead read by the browser when it loads the page.

---

Hmmm. You've not got <strong> tags around your text, have you? Could I have the whole code of that section?
 
Hmm, interesting. The <html xmlns=""> bit is new to me. The rest is cool.



Dunno much about stylesheets other than that they exist, as yet, but I guess they define how the page looks in some way or other...
 
The "xmlns" part of the HTML tag simply tells the browser that it's an XHTML document... but it's not really needed.

---

As for your code, which I see you put in after my edit asking you for it, try your code with <p> instead of <h1>, <h2>, and <h3> and tell me what happens.

It's something I should have mentioned, but ah well. :p

There are ways of setting the style of the page within the page itself, as well as with stylesheets, that make the headings not bold, but I'll save that for another day, unless you're really desparate to know. :p

And a stylesheet is just that - a document with all the style information for the page, which is linked to on all HTML pages rather than having the styles set in the HTML page itself. It's something I'll get to in a few weeks.
 
When I put in the <p> tags instead of the <h> tags, it sorts itself out - only the headline stays bold, and it has the bold tags, so that's fine. (All the text goes to the default size, of course.)



Ah, so stylesheets save a lot of time and effort, I'm guessing...


As for setting the style within the page, well, something different from the <span style> thingy, you mean?

I'm a nightmare once I get a glimpse of something unknown. I'm always dying to know. :p
 
You're on the right lines with <span style="... , yeah. The difference is that it's declared in simple <style></style> tags in the <head> tags. And yes, stylesheet save a hell of a lot of time and effort. As does Javascript - I use it for menus. Rather than having to put an HTML menu on every single HTML page, and update it on every single page when I make a change, I use a single file which each page links to that I can update easily and quickly.

To make the font size bigger, than you simply put it in <font> tags, which I'm sure you'll work out if you haven't already, and if you can't, then I think I'm covering it tomorrow, anyway. I'll be tolking about using <style> in the head tags when I do CSS, but PM me if you want extra lessons. Just don't forget the bacon butty for the teacher (appkes and I have a slight, shall we say, disagreement). ;)

And off to bed goes I. Toodles.
 
Pssst! When you set a font into a header font (<h1>), some of the headers have an in-built sytle that makes the font a specific size and style that includes bold. :p

Or am I not making sense? :D



Edit: Goodnight, Len!
 
If you're not making sense, then this should help you make sense (for I think this is what you're trying to get across). All the values are just random to illustrate the point:

H1 - font size 50, bold
H2 - font size 40, bold
H3 - font size 30, bold
H4 - font size 24, bold
H5 - font size 20, bold
H6 - font size 16, bold

So if text is surrounded by <h1></h1>, it will be forced up to size 50, and be made bold, and so on - the header tags will override any font/p/div/span etc. tags they're between, and vice versa, I think.

All of them can be changed, as I've said, using style code.
 
Okay, thanks, I'm beginning to get the picture (it takes a while). :p


Anyway, goodnight, Lenny. I'll wait and see what you put up next, and see if I can get my silly little head around that first.


Bacon butty is sounding good, though; give me meat over fruit any day of the week! :D
 
Aha! Yeah, that's a much better explanation. :D Thanks, Len.

And I'm liking the idea of a bacon butty with tomato sauce right now...


Or a cheeseburger with ketchup...
 
Then, to the Sal with you, you food-crazed nutter!! :D


*pulls out a ball of yarn and trails it behind him as he goes...*
 

Back
Top