html tutorial, internet tutorials

  Lesson 4: The Body Element  

     Introduction      

This is the first lesson which is going to last a bit longer, because we´ll play around with a couple of different elements used to format the text on your webpage. In this lesson we´re going to use only the very basic forms of each element. You will learn in a later lesson how to change text colors, background colors, font sizes, font styles, text alignment and other styling options.

Now is the right moment to start using the HTML editor 1stPage2000 instead of your text editor, because it´s going to save you a lot of time. You know I want to make everything very easy for you, so I´ve created a short video to introduce you to the most important functions of 1stPage2000 and to show you some basic options you should set. By now, you should already have this tool installed on your computer like shown in the first lesson.

video
Video button not working ? Click Here

For your convenience, I have provided again the default HTML code for the meta tags below. Copy it into the template for new documents, like shown in the video.

<meta name="keywords" content=" ">
<meta name="description" content=" ">
<meta http-equiv="content-type" content="text/html; charset=ISO-8859-1">



     Block-Level and Inline Elements     

First you should know the two different main groups of elements that can be used within the BODY section of an HTML document: block-level elements and inline elements

One difference between the two groups is that when rendered visually in a web browser, the content of block-level elements starts on a new line while the content of inline elements does not.

Another difference is that block-level elements may contain inline elements, some block-level elements may even contain other block-level elements, while inline elements may only contain text and other inline elements.

Some examples for block-level elements are the elements used for headings ( H ), paragraphs ( P ), forms ( FORM ), divisions ( DIV ), tables ( TABLE ) and lists ( OL / UL / DL ).

Inline elements are those which are used to format text differently from the surrounding text inside the same parent element, such as the elements used for bold text ( B ), underlined text ( U ), subscript ( SUB ), superscript ( SUP ), anchors and hyperlinks ( A ) and many more.

Don´t worry about all the different tags for now, you´ll learn them all in the course of this tutorial.


      Headings      

H is the element name that stands for "heading". There are 6 levels of headings being 1 the biggest and 6 the smallest heading. Headings are block-level elements and like most other elements, a heading is composed with an opening tag, the content and a closing tag, hence the HTML code for a level 1 heading would look like this:

Display Example: This is how it looks like in your browser.

<h1>This is a H1 headline</h1>

And here are all the 6 different heading levels together

Display Example: This is how it looks like in your browser.

<h1>H1 - the biggest headline</h1>
<h2>H2 - smaller than H1</h2>
<h3>H3 - smaller than H2</h3>
<h4>H4 - smaller than H3</h4>
<h5>H5 - smaller than H4</h5>
<h6>H6 - the smallest headline</h6>

When you are using headings on a webpage, you should always use an H1 (level 1 heading) first. Other levels should optionally follow in a logical sequence, i.e. you would use H2 (not H3) as sub-heading after a H1 heading. If you think that the H1 level is too big, don´t worry: there´s a simple way to adapt the font sizes of headings and you will learn it soon.

Let´s add some headings to our webpages now.

video
Video button not working ? Click Here



      Paragraphs      

Most of the text on your webpages will be embedded in paragraphs. For this purpose you will be using the P element. The example below shows two paragraphs.

Display Example: This is how it looks like in your browser.

<p>This is a paragraph. It begins with an opening tag, .... </p>
<p>There is always a blank line between two paragraphs. </p>

In the next video I´ll show you how to add some paragraphs to your webpage, but there are also some more basic things you will learn, so it´s very important you don´t skip this one. You´ll discover that several white spaces and blank lines within your HTML code are merged into one blank space by the browsers and also how to force line breaks using the empty tag <br>.

video
Video button not working ? Click Here



     Elements for Text Formatting     

From the different text formatting options you have, a few basic ones are done by using special elements. All these elements are composed with an opening tag, the content to be formatted and a closing tag. You can see the most frequently used ones in the table below, their names, their effects on text and how the HTML code for the display example looks like.

Name

Display Example

HTML Code

EM

emphasized text

<em>emphasized text</em>

B

bold text

<b>bold text</b>

I

italic text

<i>italic text</i>

U

underlined text

<u>underlined text</u>

SUP

Asuperscript
f.ex.: E=mc2

A<sup>superscript</sup>
f.ex.: E=mc<sup>2</sup>

SUB

Asubscript
f.ex.: H2O

A<sub>subscript</sub>
f.ex.: H<sub>2</sub>O

STRIKE

strike-through

<strike>strike-through</strike>

TT

teletype writer

<tt>teletype writer</tt>

BIG

bigger than normal

<big>bigger than</big> normal

SMALL

smaller than normal

<small>smaller than</small> normal



     The Correct Nesting of Elements     

Before you start experimenting with the elements above, you should learn how to correctly "nest" different elements, i.e. writing the opening and closing tags of the HTML elements in the right order when you put several ones inside another.

Below are two lines of HTML code. In the first line, the inline element B is correctly nested inside the block-level element P, the two inline elements STRIKE and U are correctly nested inside B and the inline element BIG is correctly nested inside U. Although the second line is invalid HTML code, most web browsers would still display it correctly as you can see in the display example.

Display Example: This is how it looks like in your browser.

<p>Buy now for <b><strike>37 $</strike> <u><big>only 19.95</big></u></b></p>

<p>Buy now for <strike><b>37 $</strike> <big><u>only 19.95</b></u></big></p>

In order to illustrate it better, I´ve created a graphic for you.

nesting

Now have some fun and experiment with the different elements you´ve learned in this lesson to get more familiar with them. I´ll show you in the video where you find the buttons for a speedy insertion of the most important text formatting elements.

video
Video button not working ? Click Here



     Comments in HTML     

Sometimes it´s very useful to include comments inside your HTML code which allow you to keep a better view of your document´s structure. Especially large documents can become pretty confusing when they contain a lot of different codes. Comments can be also useful to place instructions inside the HTML code of website templates in order to make it easier for a user to understand the structure of a template. Other uses for comments are to temporarily hide content from being displayed on your webpages and also the inclusion of SSI (server side includes - you´ll learn this in an advanced lesson).

A comment starts with "<!--" and ends with "-->" and all its content is not displayed when the document is viewed in a browser. A comment may basically contain any text and code, except " -- ".

<!-- I am a comment -->

Watch the video to see some practical examples for the use of comments and how comments look like in your 1stPage2000 HTML editor.

video



     Horizontal Rules     

Horizontal rules are simple lines used to divide different parts of a webpage. To create a horizontal rule, the stand-alone element HR is used. The most simple horizontal line is formed by "<HR>", which creates a 100% wide and 1 pixel thick line. The default color is grey, the default style "groove" and the default alignment is centered.

To change thickness, alignment, width and style of the horizontal rule, you may use certain attributes inside the HR tag, such as SIZE (for thickness in pixels), WIDTH (for the length), ALIGN (for the alignment) and NOSHADE (for the style). These attributes may take the following values:

align: left / right / center
size: an integer number
width: integer number or percentage
noshade: no values

However, more flexibility and more styling options are given with Cascading Style Sheets ( CSS ), which you will learn in lesson 10.

Display Example: This is how it looks like in your browser.

<hr>

<hr width="500" size="15">

<hr width="50%" align="left" size="5" noshade>



     Escaping Special Characters     

By now you already know that certain characters have special functions in HTML, for example the angle brackets "<" (aka the "less than" sign) and ">" (aka the "greater than" sign), which are used for html tags, and the double quotation marks ("), which are used to delimit the values of attributes. Also, there are many special characters that cannot be easily entered on a keyboard, such as the copyright or trademark symbols (© ® ™) and those characters that cannot be expressed in the document´s character encoding, for example foreign currencies like Yen (¥) and Euro (€) or foreign letters (ç, ã, α, ω, β, δ).

So if you want to use these characters inside your text, you need to "escape" (= encode) them using the so-called character entity references, or entities for short. Entities are case-sensitive and take the following form:  &entity;  (ampersand, entityname, semicolon)

Here are some of the most commonly used entities. Watch the video to learn how to easily insert entities in your HTML documents with 1stPage2000 and where you find a complete reference list.

Entity in HTML

Displayed as

   Examples (HTML code --> Displayed as)

&copy;

©

 

&acute;

´

don&acute;t  -->  don´t

&amp;

&

 

&nbsp;

 

(non breaking space = forces a white space)
3..2..1.. &nbsp;&nbsp;0  -->  3..2..1..   0

&lt;

<

 

&gt;

>

 

&quot;

"

 

video
Video button not working ? Click Here


Finally, I want to quickly show you the two main uses for the character entity &nbsp; (= non breaking space). As the name implies, it creates blank spaces that prevent line breaks. So if you have words in the text of your webpage that you do not want to be separated because it would negatively affect the text flow, then you would use &nbsp; between these words instead of a regular blank space.

Another use is to separate single words with more than just one space. As you already know, all the white space and blank lines between single words inside your HTML code are merged together into one by the web browsers. So if you have certain places where you would like to have more white space before, behind or between words, then you could also use one or more occurrences of the &nbsp; entity.

The video shows you two practical examples

video
Video button not working ? Click Here


Until now we´ve been only working with text, I guess you´re already getting bored. So in the next lesson you will learn how to include pictures and graphics into your webpages.



previous lesson top of page next lesson


    Web Design

  • Design and market your own professional-looking website with easy-to-use tools.

  The Lessons  

Introduction
Skills & Tools
HTML Basics
The Head Section
The Body Section
Images
Anchors & Links
Lists
Tables
Font Styles
Cascading Style Sheets
Website Layout
Domainname Registration
Website Logos & Buttons
Main Webpages
Legal Documents
Web Hosting Providers
Publishing Your Website

Editing Images


Glossary

FAQ / Support

Resources


Cheap Website Hosting
DailyRazor offers a full featured hosting plan for only $ 1.66 per month. Best choice for people on a low budget for hosting one website.

Multiple Site Hosting
Some webhosts allow you to host several different websites under one hosting account. This makes your hosting costs per site very cheap. My favorite webhosts:
Bluehost
Hostgator
Lunarpages

CSS Tutorial
"Styling with CSS" is a comprehensive and easy guide to web design with CSS for beginners. Highly recommended book that should be on your shelf.
Buy it from Amazon.

Home   :::    Contact   :::    Advertise   :::    Submit Tutorials   :::    Links   :::    Sitemap
Terms of Use, Disclaimers, Privacy Policy
© 2005-2009 EASYWEBTUTORIALS.COM
Page copy protected against web site content infringement by Copyscape