OK, lets get straight into it. Here, you will learn just how easy it is to create a web page. In fact, by the time you've finished with this web page, you will have created your own web page!
When you create a web page you will usually do something like this:
We just coded a bunch of HTML tags. These tags tell the browser what to display and where. You may have noticed that for every "opening" tag there was also a "closing" tag, and that the content we wanted to display appeared in between. Most HTML tags have an opening and closing tag.
All HTML documents should at least contain all of the tags we've just coded and in that order.
HTML elements are the fundamentals of HTML. HTML documents are simply a text file made up of HTML elements. These elements are defined using HTML tags. HTML tags tell your browser which elements to present and how to present them. Where the element appears is determined by the order in which the tags appear.
HTML consists of almost 100 tags. Don't let that put you off though - you will probably find that most of the time, you only use a handful of tags on your web pages. Having said that, I highly recommend learning all HTML tags eventually - but we'll get to that later.
OK, lets look more closely at the example that we created in the previous lesson.
Explanation of the above code:
You'll also notice that the closing tag is slightly different to the opening tag - the closing tag contains a forward slash (
You may be familiar with some of the formatting options that are available in word processing applications such as Microsoft Office, and desktop publishing software such as QuarkXpress. Well, many of these formatting features are available in HTML too! This lesson contains some of the more common formatting options.
Typing this code:
Results in this:
Typing this code:
Results in this:
Typing this code:
Results in this:
Results in this:
Results in this:
Results in this:
Typing this code:
Results in this:
We will be covering more HTML tags throughout this tutorial, but before we do that, you should know about attributes.
HTML tags can contain one or more attributes. Attributes are added to a tag to provide the browser with more information about how the tag should appear or behave. Attributes consist of a name and a value separated by an equals (=) sign.
OK, we've already seen the body tag in previous lessons, but this time we can see that something extra has been added to the tag - an attribute. This particular attribute statement,
The browser knows to make the background color orange because we are using standard HTML tags and attributes (along with standard Cascading Style Sheets code) for setting the color.
This results in:
You don't need to fully comprehend these just yet. The good thing about attributes is that, in most cases, they are optional. Many HTML elements assign a default value to its attributes - meaning that, if you don't include that attribute, a value will be assigned anyway. Having said that, some HTML tags do require an attribute (such as the hyperlink example above).
Next ---->>
When you create a web page you will usually do something like this:
- Create an HTML file
- Type some HTML code
- View the result in your browser
- Repeat the last 2 steps (if necessary)
Creating a Webpage
OK, let's walk through the above steps in more detail.Create an HTML file
An HTML file is simply a text file saved with an .html or .htm extension (i.e. as opposed to a .txt extension).- Open up your computer's normal plain text editor (this will probably be Notepad if you're using Windows or TextEdit if you're using a Mac). You could use a specialized HTML editor such as DreamWeaver or FrontPage if you prefer.
- Create a new file (if one wasn't already created)
- Save the file as html_tutorial_example.html
Type some HTML code
Type the following code:
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd"> <html> <head> <title>HTML Tutorial Example</title> </head> <body> <p>Less than 5 minutes into this HTML tutorial and I've already created my first homepage!</p> </body> </html>
View the result in your browser
Either...- Navigate to your file then double click on it
- Open up your computer's web browser (for example, Internet Explorer, Firefox, Netscape etc).
- Select File > Open, then click "Browse". A dialogue box will appear prompting you to navigate to the file. Navigate to the file, then select "Open".
Repeat the last 2 steps until you're satisfied with the result
It's unrealistic to expect that you will always get it right the first time around. Don't worry - that's OK! Just try again and again - until you get it right.
Explanation of code
OK, before we get too carried away, I'll explain what that code was all about.We just coded a bunch of HTML tags. These tags tell the browser what to display and where. You may have noticed that for every "opening" tag there was also a "closing" tag, and that the content we wanted to display appeared in between. Most HTML tags have an opening and closing tag.
All HTML documents should at least contain all of the tags we've just coded and in that order.
HTML elements are the fundamentals of HTML. HTML documents are simply a text file made up of HTML elements. These elements are defined using HTML tags. HTML tags tell your browser which elements to present and how to present them. Where the element appears is determined by the order in which the tags appear.
HTML consists of almost 100 tags. Don't let that put you off though - you will probably find that most of the time, you only use a handful of tags on your web pages. Having said that, I highly recommend learning all HTML tags eventually - but we'll get to that later.
OK, lets look more closely at the example that we created in the previous lesson.
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd"> <html> <head> <title>HTML Tutorial Example</title> </head> <body> <p>Less than 5 minutes into this HTML tutorial and I've already created my first homepage!</p> </body> </html>
- The <!DOCTYPE... > element tells the browser which version of HTML the document is using.
- The <html> element can be thought of as a container that all other tags sit inside (except for the !DOCTYPE tag).
- The <head> tag contains information that is not normally viewable within your browser (such as meta tags, JavaScript and CSS), although the <title> tag is an exception to this. The content of the
<title>tag is displayed in the browser's title bar (right at the very top of the browser). - The <body> tag is the main area for your content. This is where most of your code (and viewable elements) will go.
- The <p> tag declares a paragraph. This contains the body text.
Closing your tags
As mentioned in a previous lesson, you'll notice that all of these tags have opening and closing tags, and that the content of the tag is placed in between them. There are a few exceptions to this rule.You'll also notice that the closing tag is slightly different to the opening tag - the closing tag contains a forward slash (
/) after the <. This tells the browser that this tag closes the previous one.UPPERCASE or lowercase?
Although most browsers will display your page regardless of the case you use, you should always code in lowercase. This helps keep your code XML compliant (but that's another topic).You may be familiar with some of the formatting options that are available in word processing applications such as Microsoft Office, and desktop publishing software such as QuarkXpress. Well, many of these formatting features are available in HTML too! This lesson contains some of the more common formatting options.
Headings
There is a special tag for specifying headings in HTML. There are 6 levels of headings in HTML ranging fromh1 for the most important, to h6 for the least important.Typing this code:
<h1>Heading 1</h1> <h2>Heading 2</h2> <h3>Heading 3</h3> <h4>Heading 4</h4> <h5>Heading 5</h5> <h6>Heading 6</h6>
Heading 1
Heading 2
Heading 3
Heading 4
Heading 5
Heading 6
Bold
You specify bold text with the<b> tag.Typing this code:
<b>This text is bold.</b>
This text is bold.
Italics
You specify italic text with the<i> tag.Typing this code:
<i>This text is italicised.</i>
This text is italicised.
Line Breaks
Typing this code:<p>Here is a...<br />line break.</p>
Here is a
line break.
line break.
Horizontal Rule
Typing this code:Here's a horizontal rule... <hr /> ...that was a horizontal rule :)
Here's a horizontal rule...
...that was a horizontal rule :)
...that was a horizontal rule :)
Unordered (un-numbered) List
Typing this code:<ul> <li>List item 1</li> <li>List item 2</li> <li>List item 3</li> </ul>
- List item 1
- List item 2
- List item 3
Ordered (numbered) List
Note, that the only difference between an ordered list and an unordered list is the first letter of the list definition ("o" for ordered, "u" for unordered).Typing this code:
<ol> <li>List item 1</li> <li>List item 2</li> <li>List item 3</li> </ol>
- List item 1
- List item 2
- List item 3
HTML tags can contain one or more attributes. Attributes are added to a tag to provide the browser with more information about how the tag should appear or behave. Attributes consist of a name and a value separated by an equals (=) sign.
Example
Consider this example:<body style="background-color:orange"> style="background-color:orange", tells the browser to style the body element with a background color of orange. The browser knows to make the background color orange because we are using standard HTML tags and attributes (along with standard Cascading Style Sheets code) for setting the color.
Another Example
Here's another example of adding an attribute to an HTML tag. In this example, we use the <a> tag to create a hyperlink to the Quackit website.<a href="http://www.worldwebdesigner.blogspot.com">World Web Designer Blog</a>
Quackit Website
Many attributes are available to HTML elements, some are common across most tags, others can only be used on certain tags. Some of the more common attributes are: | Attribute | Description | Possible Values |
|---|---|---|
| class | Used with Cascading Style Sheets (CSS) | (the name of a predefined class) |
| style | Used with Cascading Style Sheets (CSS) | (You enter CSS code to specify how the way the HTML element is presented) |
| title | Can be used to display a "tooltip" for your elements. | (You supply the text) |
You don't need to fully comprehend these just yet. The good thing about attributes is that, in most cases, they are optional. Many HTML elements assign a default value to its attributes - meaning that, if you don't include that attribute, a value will be assigned anyway. Having said that, some HTML tags do require an attribute (such as the hyperlink example above).
| Therefore... | Good: | <head> |
| Bad: | <HEAD> |
Next ---->>
No comments:
Post a Comment