Lenny
Press "X" to admire hat
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:
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:
is an element - it has a start tag (<b>), an end tag (</b>), and content (and this text is BOLD).
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!
----------
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:
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:
is an element - it has a start tag (<b>), an end tag (</b>), and content (and this text is BOLD).
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 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).
