Lesson 4: The Body Element
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.
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=" ">
Block-Level 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 ).
Don´t worry about all the different tags for now, you´ll learn them all in the course of this tutorial.
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:
<h1>This is a H1 headline</h1>
And here are all the 6 different heading levels together
<h1>H1 - the biggest headline</h1>
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.
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.
<p>This is a paragraph. It begins with an opening tag, .... </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>.
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.
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.
<p>Buy now for <b><strike>37 $</strike> <u><big>only 19.95</big></u></b></p>
In order to illustrate it better, I´ve created a graphic for you.
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.
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.
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:
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.
Finally, I want to quickly show you the two main uses for the character entity (= 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 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 entity.
The video shows you two practical examples
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.
Cheap Website Hosting
Multiple Site Hosting