Difference between revisions of "HTML:Start"
| Line 1: | Line 1: | ||
| − | == | + | ==First thoughts== |
| + | The key to understanding HTML is in understanding that you not creating web pages. You are almost creating a database. | ||
| − | + | With HTML you initially define the content of the page, not how the page looks. You define the paragraphs, the headings, the labels, the images, and so on - the content of the page, but you do not refer to the presentation of this content. | |
| − | + | Imagine it like this. If you wanted to create a database of all the customers for an organisation, you would be interested in defining customer names, their addresses, their orders, their contact details, and so on. Later, you decide you want to produce a nice looking customer list, with all the customer names down the left hand side in bold, their addresses as a bullet point list, the primary contact in a red box. | |
| − | + | What you should hopefully realise is that with computers involved, there is no need to create the customer list again in a prettier format. You only need to provide instructions on how the information should look when it's printed. That's the relationship between HTML and CSS. HTML is the database-side of things, defining the information you want to present. CSS are the instructions that control how to present the information you have defined. | |
| − | + | Now, here's the tricky bit. | |
| − | + | As web users, when we look at a page, we don't seperate the content from the presentation in our minds. We see the whole thing together. When we write HTML and CSS, we tend to dip in and out of each language, not see them in isolation. For example, for the first few exercises, I'll be discussing layouts, content and presentation interchangably, because that's what you're most likely to be familiar with. | |
| − | |||
| − | + | OK - let's get started. | |
| − | |||
| − | == | + | ==Exercise 1 - The first experiment== |
| − | + | We're going to create an web page. Let me show you the entire content of the page, then I'll break it down and explain the different instructions and what they do. | |
| − | |||
| − | |||
| − | |||
| − | |||
| − | |||
| − | |||
| − | |||
| − | |||
| − | |||
| − | |||
| + | <nowiki><!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd"> | ||
<HTML> | <HTML> | ||
<HEAD> | <HEAD> | ||
| − | <TITLE> | + | <TITLE>My first HTML document</TITLE> |
| − | |||
| − | |||
</HEAD> | </HEAD> | ||
<BODY> | <BODY> | ||
| − | <P> | + | <P>Hello world!</P> |
| − | |||
| − | |||
</BODY> | </BODY> | ||
</HTML></nowiki> | </HTML></nowiki> | ||
| + | ==Exercise 1 - Breakdown== | ||
| + | ===Line 1 - <nowiki><!DOCTYPE...</nowiki>=== | ||
| + | Probably the most important line in this example is the one that starts <nowiki><!DOCTYPE...</nowiki> | ||
| − | + | When this page is downloaded into a browser or any other client application, this line tells the application what language the document is written in and also what DTD to use to decode and display the contents. | |
| − | |||
| − | |||
| − | == | + | ====What is a DTD?==== |
| + | A DTD is a Document Type Definition - it contains all the rules and valid uses of each element within your HTML. | ||
| − | + | ===Line 2 - <nowiki><HTML></nowiki>=== | |
| + | Following the DTD, every HTML page begins with <nowiki><HTML></nowiki>. This is called the 'HTML element start tag'. Put simply, this defines the beginning of the webpage. It states that everything following this tag, until it's end-tag (<nowiki></HTML></nowiki>) is the webpage. | ||
| − | + | ===Line 3 - <nowiki><HEAD></nowiki>=== | |
| + | The <nowiki><HEAD></nowiki> start-tag defines the heading section of the webpage. The heading section IS NOT SHOWN ON THE PAGE. This is tricky to comes to terms with at first. The heading of a webpage in HTML is not the top of the visible screen, the way the heading of a document normally would be. The heading of a webpage is a place to typically change settings affecting the way the webpage is displayed. This is the place where scripting languages like Javascript would exist in a webpage, as users would not want to see the Javascript code, they would only want to see the output of what Javascript can accomplish. The thing to remember, is that content in this section is not shown on a webpage (sort of!) | ||
| − | + | ===Line 4 - <nowiki><TITLE>...</nowiki>=== | |
| − | + | The <nowiki><TITLE></nowiki> of a webpage is not shown in the page. The title is shown in the address bar at the top of the browser window. It is the name that is used when book-marking a page, in the history, on the start/task bar if you have one on your computer. It is not shown anywhere in the body of the webpage. | |
| − | |||
| − | + | ===Line 5 - <nowiki></HEAD></nowiki>=== | |
| + | <nowiki></HEAD></nowiki> defines the end of the HEAD section of a webpage. The thing to notice is the '''/''' symbol before the word HEAD. Every / symbol followed by an element name is the end of that instance of that element. | ||
| − | + | ===Line 6 - <nowiki><BODY></nowiki>=== | |
| − | Everything | + | <nowiki><BODY></nowiki> defines the beginning of the main visible part of the webpage. Everything that follows (with some minor exceptions) from this point until the end of the body section (<nowiki></BODY></nowiki>) is designed to be visible content of the webpage, like menus, and colour, and images, and so on. |
| − | + | ===Line 7 - <nowiki><P>...</nowiki>=== | |
| + | This is the only visible element of the webpage. The <nowiki><P></nowiki> defines the beginning of an instance of a ''paragraph'' element. The text that follows (Hello World!) is the content of that paragraph. The <nowiki></P></nowiki> defines the end of the paragraph (note the '''/'''). Pay careful attention to the fact that we have not defined a font, or a size, or a colour, or any other visible attributes of the paragraph. We have merely defined the fact that we want a paragraph, and we have defined it's content. | ||
| − | + | ===Line 8 - <nowiki></BODY></nowiki>=== | |
| − | + | <nowiki></BODY></nowiki> defines the end of the main visible body of the webpage. | |
| − | + | ===Line 9 - <nowiki></HTML></nowiki>=== | |
| + | <nowiki></HTML></nowiki> defines the end of the webpage. | ||
| − | + | ==Thinking in boxes== | |
| − | + | If you look again at the structure of this webpage, you'll realise that we define a series of elements that exist inside other elements. This "element within element" concept is called "nesting." In order to write correct HTML, that will work as we expect it to, it is critical that we get the nesting aspect of the page right. The best way to describe this is to think about a series of boxes within boxes. | |
| − | + | [[Image:HTMLBoxes]] | |
| − | + | Box number 1 is our paragraph - we put a label on it (P) and inside we put some text (Hello World!) then we close the box. | |
| − | + | Box number 2 is our body part of our webpage - we put a label on it (BODY) in it we put all the items we want to be visible on our webpage, in the right order (in this case just the (P) box) | |
| − | + | Box number 3 is our title - we put a label on it (TITLE) and put the title of the page (My First HTML Document) inside the box. | |
| − | + | Box number 4 is our heading section - we put a label on it (HEAD) and put all the non-visible items we want into it in the right order (in this case, just the (TITLE)) | |
| − | + | Box number 5 is our webpage as a whole - we put a label on it (HTML) and also stamp it with the language it was written in (DOCTYPE...) | |
| − | + | Boxes within boxes... | |
| − | When you | + | =Ready to Move on?= |
| + | When you're absolutely confident you understand this section of the wiki, you can carry on to section [[02 - The Basics of HTML 4.01 ]] - do not continue to [[02 - The Basics of HTML 4.01 ]] if you are unsure about any of this content - you should seek assistance from your tutor if anything is unclear. | ||
Revision as of 17:21, 20 August 2007
First thoughts
The key to understanding HTML is in understanding that you not creating web pages. You are almost creating a database.
With HTML you initially define the content of the page, not how the page looks. You define the paragraphs, the headings, the labels, the images, and so on - the content of the page, but you do not refer to the presentation of this content.
Imagine it like this. If you wanted to create a database of all the customers for an organisation, you would be interested in defining customer names, their addresses, their orders, their contact details, and so on. Later, you decide you want to produce a nice looking customer list, with all the customer names down the left hand side in bold, their addresses as a bullet point list, the primary contact in a red box.
What you should hopefully realise is that with computers involved, there is no need to create the customer list again in a prettier format. You only need to provide instructions on how the information should look when it's printed. That's the relationship between HTML and CSS. HTML is the database-side of things, defining the information you want to present. CSS are the instructions that control how to present the information you have defined.
Now, here's the tricky bit.
As web users, when we look at a page, we don't seperate the content from the presentation in our minds. We see the whole thing together. When we write HTML and CSS, we tend to dip in and out of each language, not see them in isolation. For example, for the first few exercises, I'll be discussing layouts, content and presentation interchangably, because that's what you're most likely to be familiar with.
OK - let's get started.
Exercise 1 - The first experiment
We're going to create an web page. Let me show you the entire content of the page, then I'll break it down and explain the different instructions and what they do.
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">
<HTML>
<HEAD>
<TITLE>My first HTML document</TITLE>
</HEAD>
<BODY>
<P>Hello world!</P>
</BODY>
</HTML>
Exercise 1 - Breakdown
Line 1 - <!DOCTYPE...
Probably the most important line in this example is the one that starts <!DOCTYPE...
When this page is downloaded into a browser or any other client application, this line tells the application what language the document is written in and also what DTD to use to decode and display the contents.
What is a DTD?
A DTD is a Document Type Definition - it contains all the rules and valid uses of each element within your HTML.
Line 2 - <HTML>
Following the DTD, every HTML page begins with <HTML>. This is called the 'HTML element start tag'. Put simply, this defines the beginning of the webpage. It states that everything following this tag, until it's end-tag (</HTML>) is the webpage.
Line 3 - <HEAD>
The <HEAD> start-tag defines the heading section of the webpage. The heading section IS NOT SHOWN ON THE PAGE. This is tricky to comes to terms with at first. The heading of a webpage in HTML is not the top of the visible screen, the way the heading of a document normally would be. The heading of a webpage is a place to typically change settings affecting the way the webpage is displayed. This is the place where scripting languages like Javascript would exist in a webpage, as users would not want to see the Javascript code, they would only want to see the output of what Javascript can accomplish. The thing to remember, is that content in this section is not shown on a webpage (sort of!)
Line 4 - <TITLE>...
The <TITLE> of a webpage is not shown in the page. The title is shown in the address bar at the top of the browser window. It is the name that is used when book-marking a page, in the history, on the start/task bar if you have one on your computer. It is not shown anywhere in the body of the webpage.
Line 5 - </HEAD>
</HEAD> defines the end of the HEAD section of a webpage. The thing to notice is the / symbol before the word HEAD. Every / symbol followed by an element name is the end of that instance of that element.
Line 6 - <BODY>
<BODY> defines the beginning of the main visible part of the webpage. Everything that follows (with some minor exceptions) from this point until the end of the body section (</BODY>) is designed to be visible content of the webpage, like menus, and colour, and images, and so on.
Line 7 - <P>...
This is the only visible element of the webpage. The <P> defines the beginning of an instance of a paragraph element. The text that follows (Hello World!) is the content of that paragraph. The </P> defines the end of the paragraph (note the /). Pay careful attention to the fact that we have not defined a font, or a size, or a colour, or any other visible attributes of the paragraph. We have merely defined the fact that we want a paragraph, and we have defined it's content.
Line 8 - </BODY>
</BODY> defines the end of the main visible body of the webpage.
Line 9 - </HTML>
</HTML> defines the end of the webpage.
Thinking in boxes
If you look again at the structure of this webpage, you'll realise that we define a series of elements that exist inside other elements. This "element within element" concept is called "nesting." In order to write correct HTML, that will work as we expect it to, it is critical that we get the nesting aspect of the page right. The best way to describe this is to think about a series of boxes within boxes.
Box number 1 is our paragraph - we put a label on it (P) and inside we put some text (Hello World!) then we close the box.
Box number 2 is our body part of our webpage - we put a label on it (BODY) in it we put all the items we want to be visible on our webpage, in the right order (in this case just the (P) box)
Box number 3 is our title - we put a label on it (TITLE) and put the title of the page (My First HTML Document) inside the box.
Box number 4 is our heading section - we put a label on it (HEAD) and put all the non-visible items we want into it in the right order (in this case, just the (TITLE))
Box number 5 is our webpage as a whole - we put a label on it (HTML) and also stamp it with the language it was written in (DOCTYPE...)
Boxes within boxes...
Ready to Move on?
When you're absolutely confident you understand this section of the wiki, you can carry on to section 02 - The Basics of HTML 4.01 - do not continue to 02 - The Basics of HTML 4.01 if you are unsure about any of this content - you should seek assistance from your tutor if anything is unclear.
