Featured Templates
Home
HTML and CSS
Tutorials
The Basics of HTML
Added: Oct 03, 2005 Rating: Less than 3 votes yet
Level: Beginner Software:
Basic HTML Body Tags
- Once you have defined the minimum HTML document, it is time to go about displaying some information. For the most part, displaying information is a matter of simply typing text into the body of the HTML document (between the <BODY> and </BODY> tags).
- However, as we mentioned earlier, web browsers do not pay attention to white space, thus the following bits of text are displayed exactly the same way in a web browser window. This is some text that is displayed as you would expect This is some text that is displayed in a way you would not expect: exactly the same as the above
- So in order to control line breaks and paragraph marks, you must specify exactly where you want them to go (making two spaces between characters is another matter and will be covered in Day Two).
- To specify a paragraph break, you will use the <P> tag and to specify a line break, you will use te <BR> tag.
- You can also instruct the browser draw a line between text using the <HR> tag, but many design theorists recommend against using the tag.
- The following table reviews the features of the tags
<P> </P>
Indicates a new paragraph and instructs the browser to add a blank line. Takes optional alignment parameters of LEFT, RIGHT or CENTER to align the paragraph.
<BR>
Forces a line break in the text. This tag takes an optional parameter to specify how text should wrap around images however we will discuss this on Day Two.
<HR>
This tag creates a horizontal line across the screen. By default the line will span the entire width of the document according to the specifications of BLOCKQUOTE and LIST tags. However, you can modify the look of the line by using any of the following attributes. ALIGN may equal LEFT, RIGHT, or CENTER. SIZE may equal some pixel value. WIDTH may equal some pixel value or some percentage of the document width. NOSHADE will turn off the beveling look. COLOR may equal some color hexvalue.
Basic HTML Body Tags by Example
- The following HTML code shows the basic HTML body tags in action.
<HTML>
<HEAD>
<TITLE>Hello World</TITLE>
</HEAD>
<BODY>
This is a very simple web page. Notice that
the browser does not pay attention too spaces that
we
add to our document unless you specify what type of
spacing you want
<P>
Like when you use a paragraph tag or a <BR>
break line tag
<P>
And here is a hard rule
<P>
<HR ALIGN = "CENTER" SIZE = "10" WIDTH = "50%"
COLOR = "AA0000" NOSHADE>
</BODY> |
Coding Style
- As you begin coding documents for your company or for yourself, it will benefit you greatly if you define your own standards and style that you apply without question to every page you build.
- This will help immensely when you 1) rewrite all your pages and can use a script to replace one set of standard text with another set of standard text instead of doing all the changes by hand and 2) when someone else tries to modify or add to your collection of web pages.
- Style is a personal thing, but there are a few standards that have become...well...standard.
- Use capital letters for tags, arguments and values.
- Use a space before and after equal signs within tags.
- Use quotes around tag attribute values whether or not they include white space.
- Use embedded spacing in your HTML code so that the code itself looks similar to how it will be formatted by a browser. In other words, use indentation and paragraph markings in the code when you specify paragraphs in the code.
- Keep your line width to 80 characters so that UNIX editors will be able to read your code. If a tag goes beyond 80 characters, indent continuing attributes.
- Follow HTML standards even if browsers will let you slide. This means, use closing tags like </HTML>
- Include no extra spaces in anchors and only anchor meaningful words
Coding Style by Example
Here is an example of "bad" code.
<HTML ><head><Title>Hello World</TITLE></Head><Body bgcolor=white text=black> This is a very simple web page. Notice that the browser does not pay attention to spaces that we add to our document unless you specify what type of spacing you want<p>Like when you use a paragraph tag or a <br> break line tag. <A HREF = "next.html"> click here to go on to the next page </A></BODY>
- Here is an example of good code:
<HTML>
<HEAD>
<TITLE>Hello World</TITLE>
</HEAD>
<BODY BGCOLOR = "FFFFFF" TEXT = "000000"
VLINK = "AAAAAA" ALINK = "564345">
<!-- BEGINING OF PAGE BODY -->
This is a very simple web page. Notice that the
browser does not pay attention to spaces that we
add to our document unless you specify what
type of spacing you want
<P>
Like when you use a paragraph tag or a
<BR>break line tag.
<P>
Click <A HREF = "next.html">here</A> to go to the next page.
<!-- ENDING OF PAGE BODY -->
</BODY>
</HTML>
|
- Notice how the example of "good" code is VERY easy to read. For example, the paragraph mark in the code actually had new lines around it in the code so it actually looked like a paragraph mark.
- As your code gets more and more complex, good coding standards will become more and more important.
- Finally, take some time to get familiar with an HTML Validation Program that you can use to check your code against the various HTML standards.
Exercise One
- In this exercise you will create a simple web page using the tags we have just discussed. Your page should include two bits of content: a section about you and a section about the work you do. The Figure below shows an example of what you are trying to create.
More HTML and CSS: Most Popular Materials | Fresh Materials
| More HTML Tutorials at Markuptutorials.com
10 Random HTML and CSS Tutorials :
10 Random Markuptutorials.com Materials: