| Free HTML Tutorials • CSS • Frames Tutorials • Forms Tutorials • Beginners HTML Tutorials • Intermediate HTML Tutorials • Advanced HTML Tutorials • JavaScripts • Free Web Page Tutorials • Free Downloads |
|
Beginners Section |
|
TAGS 1 - BASIC HTML TAGS |
|
|
|
WEB PAGE BASICS
When creating a web page, certain basic rules need to be followed. To start the page you must use the <HTML> tag. This indicates to a browser the beginning of an HTML or web page. The closing tag </HTML> is at the end of the document and indicates the end of the page. Let's look at the coding of a very basic web page following this format.
This is a simple representation of what creates a web page.
Your input is displayed by the browser and can be text or images or links or whatever you choose.
Just make sure you use the right tags to open and close everything.
</BODY>
Note the pairs of opening and closing tags. The first one is <HTML> to start a web page. The closing tag, </HTML>, signals the end of the HTML document. Everything else goes between these two tags. The next tag is the <HEAD> tag. This opens a section in which you can title your page, use keywords, and add other descriptive information to the page. The section ends with the </HEAD> tag. The <TITLE> tag is seen only as the name of the browser window, or for search engine descriptions. End the title using the </TITLE> tag. In the example given, the title is "HTML is easy". The <BODY> tag starts the section where the "real" work appears, i.e. what the browser will display. The body section ends with </BODY>, just before the closing </HTML> tag. All of these tags are hidden from view with the browser open but it is vitally important to get them right or nothing will show up.
To better understand this, let's look at some of the common TAGS . These are what makes everything work in your browser. As you will have noticed, HTML tags begin with a "less than" sign, < and end with a "greater than" sign >. An example would be the tag used to create BOLD text, <B>. Place this before the text you want in bold. This is an opening tag. To end bold, you use a closing tag. A closing tag is the same as the opening tag, but with a forward slash before the command, like this: </B>. If you type:
then open it in your browser, it will look like this:
Not all tags require a closing tag. For example, the paragraph, <P>, line break, <BR>, and horizontal line, <HR> tags. Note: there are some situations that may need a closing P tag - </P>. Incidentally, you do not need to capitalize the tags; <P> is the same as <p>, but try to be consistent, i.e. use all CAPS or all lower case. My preference is for all caps to differentiate from the input. Neat code is easier to follow if you need to check it later. Here are examples of some tags you will use: <P> Creates a new paragraph and adds a space. Add this tag at the beginning of each paragraph. <BR> Creates a break between lines of text, without adding a space. You can use several BR's if you wish. No end tag needed. <U></U> This is the tag for underlined text - must be closed. Example:<U>Underline the line</U> This will show up on a web page like this: Underline the line (Be sparing with underlining. As you will learn later, LINKS are automatically underlined, so if you have a lot of underlining it will be confusing to your viewers.) <I></I> This is the tag for italics - must be closed. Example:<I>A new slant on things</I> This will show up on a web page like this: A new slant on things <STRIKE></STRIKE> This is the tag for strike out - must be closed. <STRIKE>Strike me purple!</STRIKE>
This will show up on a web page like this: You can also combine tags. If you want something in bold and italics, place both opening tags before the text and close both tags afterwards: Example: <B><I>This line is bold AND Italic. </I></B> This will show up on a web page like this: This is bold AND Italic.
The default alignment is to the left, but you can place things, like headings, in the centre of the page. For this you use the <CENTER> and </CENTER> tags. (Always American spelling for CENTER [centre] & COLOR [colour].) Example: <CENTER><B>THIS BOLD HEADING IS IN THE MIDDLE OF THE PAGE</B></CENTER> This will show up on a web page like this:
Alternatively, if you have only one line to centre, you can combine an ALIGN tag with a P tag, like this: <P ALIGN=center> <B>SO IS THIS ONE</B> The result will be the same as above:
SO IS THIS ONE No closing tag is required.
The order of the tags is not vitally important, but again it is best to be consistent in the way you write code. It doesn't usually matter to the browser how you open and close the tags, but working from inside out (or nesting tags) will help to minimise errors like forgetting closing tags. The following layout illustrates what is meant by "nesting tags":
<B>
This would usually be put on just one line like this: <B> <I> This line is bold AND Italic </I> </B>
The most important thing to remember when writing HTML code, is that the text you write is affected by every tag before it that has not been closed. Or to put it another way, the effect on your written text will not end until each tag is closed by its corresponding closing tag. If you forget to close a tag, it will usually be fairly obvious as your page will not look the way you intended. It can be very time consuming to track it down later so take care with tags.
Help
|