html tutorial for beginners

HTML Web Design Tutorial #8

Inserting Special Characters into Your Web Page
Take a look at your keyboard, and you'll see a lot of keys for inserting letters, numbers, and even some symbols. However, most common keyboards are missing certain characters that you may want to put on your web page. The copyright symbol © is a good example of this.

Fortunately there's a way to display these special characters on a web page, by using a reference code. Basically, every character is represented by a numeric position. By inserting a reference code that contains that particular number, you can create its corresponding character. Some of the characters can even be referenced by using a designated word called a character entity reference.

In lesson #8 we will see how to add both the numeric, and entity codes using the copyright symbol as an example. You may also want to see our full list of character references. To begin, click on the "play" button below.

HTML Web Design Tutorial #9

Formatting Your Text with Bold & Italic Tags
When you want certain words or phrases on your web page to be noticed more readily, you can apply a bold format to that text. When used sparingly, bold text will draw the reader's attention to important words on the web page. Making words bold is as simple as enclosing them in the opening <b>, and closing </b> tags.

Another way to format text is through the use of italics. When you want to add emphasis to particular words or phrases, italic text, which slants slightly to the right, can be used for that effect. Italic text is created using the opening <i>, and closing </i> tags.

In our next lesson, you'll see how to use these tags by themselves, and in combination. We'll also show you a common mistake made with tags, and how to correct it. Click the "play" button below to begin.

HTML Web Design Tutorial #10

Controlling Presentation with Inline Style
In part 9, we saw how to change the appearance of some of our text to bold or italic, by using certain tags. It used to be that all presentation changes to a web page were controlled with html tags. However, that method proved to be quite inefficient. So, a better method of affecting presentation was developed.

The current standard for web design states that the structure of a web page should be built by using html tags, while its presentation should be controlled using styles. There are three different methods, and each has its own advantages depending on the needs of your web page.

In the next three lessons #10-12, we're going to see how to implement each different method. We'll start by learning inline style, which is best suited for one unique element on a single web page. Then in the following two lessons we'll see how to make internal and external style sheets. To begin learning, click on the "play" button below.

HTML Web Design Tutorial #11

Controlling Presentation with Internal Style Sheets
In part 10 we got our first look at using style in a web page. By using an attribute in some existing tags, we were able to affect the presentation of just those elements. Next, we will learn about the second method, by using an internal style sheet.

With an internal sheet, the rules for presentation will be listed at the top of the page inside of the head section. Those rules will then be referenced to particular elements in the web page by the use of a selector. The selector can reference all instances of a particular element, as in:
p {color: blue}

Which will make all text inside all p (paragraph) elements the color blue. Or instead, the selector can represent a particular named element, which we will learn more about coming up. To begin lesson #11, click on the "play" button below.

HTML Web Design Tutorial #12

Controlling Presentation with External Style Sheets
In lesson #11 you learned how to place an internal sheet into the head section of a web page, and apply a rule to a particular element. Now, were going to see how to implement our third method, by creating and linking to an external style sheet.

An external sheet is a very efficient method of applying similar presentation to every page in an entire website. Rather than adding your rules at the top of every web page in your site, you can just put all your rules into a separate text file, and then link to that file from each of your web pages.

The greatest benefits of using external sheets are saved time, and reduced file size. Time is saved by only having to make a change in one document instead of many. File size is reduced when all your rules are listed only once, instead of multiple times. To see how to create one of these external sheets, click on the "play" button below.

HTML Web Design Tutorial #13

Changing Color Using the RGB Color Model
For this next lesson, we're going to take a break from building our page, so we can see a visual representation of how color is displayed on a computer monitor.

Most monitors nowadays can display over 16 million colors. All those different combinations are derived from only three base colors: red, green, and blue. This is where the term RGB comes from. It's an acronym for red, green, blue. The monitor displays a combination of one or more of those three colors at different intensities, in order to produce a particular color.

Knowing how the RGB color model works, will allow you to create colors other than the basic 16, which can be specified by name. You'll be able to choose from a wide variety of colors by numerically specifying the intensity of your red, green, and blue. To begin watching our RGB color demonstration, click on the "play" button below.

HTML Web Design Tutorial #14

Changing the Color of Your Web Page Background
In part 13 you saw a visual representation of how color is displayed on a computer monitor. You learned how to choose from a wide spectrum of colors by setting the values of just three. Now we're going to see how to apply what we've learned by changing the background color of our web page.

Similar to changing the color of our text, like we learned in parts 10-12, we'll change our web page background color by adding a rule to our external style sheet. This works well if you plan to use the same background color for all your web pages. If for some reason you need a different color for each web page, then you should use an internal sheet for each individual page.

Now, we will change the background color of our demonstration page in this lesson, so you can see how it's done. However, we will switch it back to white for the rest of the series, as we feel it's better to use black text on a white, or light, background for the readable areas of a web page. Later on in the series, we will add some background color to the left side of the page using the same style property. To see how this is done, click on the "play" button below.

HTML Web Design Tutorial #15

Changing Your Web Page Text to a Different Font
In part 14 we saw how background color can be specified. Next we'll see how to specify a particular font face. A font is a complete set of type (letters, numbers, punctuation and symbols) of one particular family, size, and style. Here are some examples:

Comic Sans MS
Courier New
Times New Roman

Most web browsers are initially setup to display web page text in the "Times New Roman" font. That font is considered easier to read on a printed page, because it has little lines, hooks, and curls called serifs that finish off the main strokes of the characters. However, reading printed text is different than reading text on a monitor.

It is generally agreed that text with serifs is more difficult to read on a computer monitor. For this reason, many web authors will switch to a font that doesn't have serifs: like Arial for instance. This is what we're going to see how to do in our next lesson, which you can begin by clicking on the "play" button below.

HTML Web Design Tutorial #16

Setting the Alignment of Content on a Web Page
In part 15 you got to see some different kinds of fonts, and how to change them on your web page. Now we will see how to align elements in the center, or to the right of our web page.

When you put something new into your web page you'll see that it always lines up on the left side of the page. By default, all content is aligned to the left, just like you would start writing on the left side of a sheet of paper. Sometimes though, there'll be a need to put something in the center of the page, or even on its right side.
Using the text-align property in a style rule can set the alignment of any block-level element. In this next lesson, we will see how to apply this rule to some of our text. We'll also see how to put some text into a class, so that only it is affected by the rule, and not all of the text. To see how it's done, click on the "play" button below.

HTML Web Design Tutorial #17

Increasing or Decreasing the Size of Your Text
When you glance at a newspaper in the rack, the first thing you notice is the headlines. That's because they're bigger than the rest of the print; they stand out and draw your attention. You'll probably want to do the same thing for your web page. By creating a headline that's larger, you can quickly grab a visitor's attention, and tell them what your web page is about.

In some cases, you'll want your text to be smaller than regular. Maybe it needs to be shrunk in order to fit into a particular area, or maybe it's legal info and you want it to look like the proverbial "small print".
Whatever the case, you can change the size of your text from the default, and you'll see how to do so in this next lesson. Click the "play" button below to begin.