Sign in or 
| Version | User | Scope of changes |
|---|---|---|
| Sep 5 2008, 11:26 PM EDT (current) | TomySky | |
| Sep 5 2008, 11:26 PM EDT | TomySky |
Changes
Key: Additions Deletions
HTML code has to be read by a computer, and so your page must define the "language" that the html is using so it can be properly interpreted by your web browser.
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.0 Transitional//EN">
From here on out, all sections of code will have a beginning and an end, known as the "open" and "close" of that section. The first section of your code is the html tag. So we open it with:
<html>
When we close this tag again at the end of our page, we will include the </html> command. So, we have <...> to open and </...> to close.
Inside the html section is the header area. So we open it.
<head>
Then we include the Title of the page, which is what is shown at the top of your browser window as the page name. Coders will often include indentations to indicate when something is inside of another section, just to make things cleaner and easier to read if they ever need to make changes.
<title>My Page's Name</title>
Notice how the title area is closed with </title> after the text is done.
Now we will open the style area. This is defined as "text/css" so that the browser again knows what kind of code it is looking for.
<style type="text/css" media="all">
You can tell a web browser not to display code within a <!-- and --> or "comment" tag. It is often used for coders to leave notes about what is going on within the code. It is also used for the style section.
<!--
body {
position: absolute;
top: 50px;
left: 100px;
}
Here we have defied a few things about the body of the web page with CSS like code within the HTML. This would be even better in a css document, but if you don't have one of those, this will accomplish much of the same thing. So we have told the browser that the body of the page has a very specific location on the browser window (and "absolute") position 50 pixels from the top and 100 pixels from the left of the browser window. And, just like the tags in the html (such as the <body> tag) we need to open and close the sections of the style sheet as well with { and }.
Next we define what we want a div to act like. A div (short of "division") of a page is an area or block of the page that is self-contained and follows it's own set of rules. This makes it easy to have different parts of your page look and act differently without completely recording, say, the text size each time. In this example, we want the text inside the div to be centered within the div. We will also close the comments and sytle section of this html document.
div {
text-align: center;
}
-->
</style>
This also ends the header area and begins the body of the web page.
</head>
<body>
There are many, many useful tags, but I'll start this out with just a few. I will likely add an html tags page at a later date.
<p> will "print" the text you type after it. You do not need to close this tag. It is the only one like it. It is also very common.
<b> used to be used for "bold," but now the correct code is <strong>. Don't forget to close it with </strong> when you are done with bold text.
<i> used to be used for "italics," but now the code is <em> for "emphasis." Again, close it with </em>.
<a href="...."> is the anchor tag. This code produces a link to another url. You type the text that you want to be included in the link after the anchor tags open, and then you close it to end the text link:
<a href="http://production-now.com">Get media help here</a>.
<img src="http://4.bp.blogspot.com/_WBDpA9NxuXE/SKcq2zfHFlI/AAAAAAAAAzg/-pqOmBoGnwc/s1600-h/Crow.jpg"> This will pull up an image from a particular url or "image source." Use this if you want to display a picture. You will include this within an anchor tag if you want the picture itself to be a clickable link. Depending on how this is used, you do not have to close the img tag.
<div> we've already discussed.
And then at the end of the page, we close both the body and the html.
</body>
</html>
Since the body is within the html, we need to make sure we include the </body> before the </html>.
So, there it is. A very brief introduction to what you will see within html code.
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.0 Transitional//EN">
From here on out, all sections of code will have a beginning and an end, known as the "open" and "close" of that section. The first section of your code is the html tag. So we open it with:
<html>
When we close this tag again at the end of our page, we will include the </html> command. So, we have <...> to open and </...> to close.
Inside the html section is the header area. So we open it.
<head>
Then we include the Title of the page, which is what is shown at the top of your browser window as the page name. Coders will often include indentations to indicate when something is inside of another section, just to make things cleaner and easier to read if they ever need to make changes.
<title>My Page's Name</title>
Notice how the title area is closed with </title> after the text is done.
Now we will open the style area. This is defined as "text/css" so that the browser again knows what kind of code it is looking for.
<style type="text/css" media="all">
You can tell a web browser not to display code within a <!-- and --> or "comment" tag. It is often used for coders to leave notes about what is going on within the code. It is also used for the style section.
<!--
body {
position: absolute;
top: 50px;
left: 100px;
}
Here we have defied a few things about the body of the web page with CSS like code within the HTML. This would be even better in a css document, but if you don't have one of those, this will accomplish much of the same thing. So we have told the browser that the body of the page has a very specific location on the browser window (and "absolute") position 50 pixels from the top and 100 pixels from the left of the browser window. And, just like the tags in the html (such as the <body> tag) we need to open and close the sections of the style sheet as well with { and }.
Next we define what we want a div to act like. A div (short of "division") of a page is an area or block of the page that is self-contained and follows it's own set of rules. This makes it easy to have different parts of your page look and act differently without completely recording, say, the text size each time. In this example, we want the text inside the div to be centered within the div. We will also close the comments and sytle section of this html document.
div {
text-align: center;
}
-->
</style>
This also ends the header area and begins the body of the web page.
</head>
<body>
There are many, many useful tags, but I'll start this out with just a few. I will likely add an html tags page at a later date.
<p> will "print" the text you type after it. You do not need to close this tag. It is the only one like it. It is also very common.
<b> used to be used for "bold," but now the correct code is <strong>. Don't forget to close it with </strong> when you are done with bold text.
<i> used to be used for "italics," but now the code is <em> for "emphasis." Again, close it with </em>.
<a href="...."> is the anchor tag. This code produces a link to another url. You type the text that you want to be included in the link after the anchor tags open, and then you close it to end the text link:
<a href="http://production-now.com">Get media help here</a>.
<img src="http://4.bp.blogspot.com/_WBDpA9NxuXE/SKcq2zfHFlI/AAAAAAAAAzg/-pqOmBoGnwc/s1600-h/Crow.jpg"> This will pull up an image from a particular url or "image source." Use this if you want to display a picture. You will include this within an anchor tag if you want the picture itself to be a clickable link. Depending on how this is used, you do not have to close the img tag.
<div> we've already discussed.
And then at the end of the page, we close both the body and the html.
</body>
</html>
Since the body is within the html, we need to make sure we include the </body> before the </html>.
So, there it is. A very brief introduction to what you will see within html code.
