Building Blocks of a Webpage

Text Content

This webpage will introduce you to how to enter text, how to manipulate font size and characteristics, how to position text, how to make blockquote indentations, and how to make a simple table.

Text in a webpage is just typed.  Each browser has a default font and size.   Unless you put in an HTML code to instruct the browser differently, all text you enter will be in that default font.  The text will just continue until the browser finds a <p> paragraph marker, and then it will

skip a line and go to a new paragraph. You can put in a <br> code to simply
go to the next line.  These are two handy codes to know.

The font sizes are controlled by various codes.

<h1> Large Headline Font. </h1>

This font code creates relative sizes of the default font, <h1> being the largest, down to <h6> which is the smallest. 
Note that you have to turn many codes off.

<h2> Smaller but still quite large.</h2>

<h3> Schools for a New Millennium</h3>

<h4>Schools for a New Millennium</h4>

<h5>Schools for a New Millennium</h5>

<h6>Schools for a New Millennium</h6>

By the way, the <hr> code inserted the horizontal line above.

You can change the font characteristics with a few font codes:

Any Text in the default black can be changed to another color by the <font color=red>Any Text</font> codes. 

Similarly, you can change the font to any <font="arial">TrueType font</font> with a similar set of codes.  Note that the student's computer has to have the TrueType font on it; otherwise, the browser will select another font, sometimes a symbolic font that "looks Greek to me"--for example, sometimes a symbolic font that "looks Greek to me."  

You can position your text at the left, in the center, or on the right.

<center>You can center your text or headlines.</center>

<right>You can put text or headlines at the right margin.</right>

Left is the default for text, headlines, and images.

If this webpage is starting to look a little jumbled and cluttered, good.  It may teach you that
just because you can do something doesn't mean you should.

Blockquote

The default in browsers is to begin everything at the left edge of the screen, but you may wish to have your paragraphs "indent."  You can do this by inserting a <blockquote> command before the material you wish indented and then a </blockquote> to turn off that command. 

The default in browsers is to begin everything at the left edge of the screen, but you may wish to have your paragraphs "indent."  You can do this by inserting a <blockquote> command before the material you wish indented and then a </blockquote> to turn off that command. 

The default in browsers is to begin everything at the left edge of the screen, but you may wish to have your paragraphs "indent."  You can do this by inserting a <blockquote> command before the material you wish indented and then a </blockquote> to turn off that command. 

Not Columns but Tables

Speaking of indentation, it is hard for teachers to believe, but you can't indent paragraphs with anything like a tab key.  HTML just ignores extra spaces.   Imagine creating a syllabus without using tabs to make three columns for each date, topic, and assignment....

HTML doesn't have a columns command--another commonly used device in word processing.

But you can use the <table> HTML code to create columns.   Especially as you are starting to learn to make webpages using HTML codes, inserting the codes by hand is complicated, confusing, frsutrating, and time consuming.   For this function, you will really find the new HTML features of today's word processing programs handy.  The table code structure is very simple, but it gets confusing when you insert the text and images into the codes.  Beyond the basic codes below, there are many codes which put a border around the table, specify a mandatory width for the table on the screen, etc.

The basic table structure [I've inserted blockquote indentations to make the structure clear]:

<table> starts a table block

<tr> tags the beginning of a row in the table

<td>tags data in the first cell of the row and </td> tags the end of data in that cell
<td>tags data in the next cell of the row and </td> tags the end of data in that cell
<td>tags data in the last cell of the row and </td> tags the end of data in that cell

</tr> tags the end of the first row

<tr> tags the beginning of another row in the table

<td>tags data in the first cell of the row and </td> tags the end of data in that cell
<td>tags data in the next cell of the row and </td> tags the end of data in that cell
<td>tags data in the last cell of the row and </td> tags the end of data in that cell

</tr> tags the end of the this row

</table> tags the end of the table

Perhaps the above material would be presented more clearly in a table:

Next:  Inserting Images

NEH Schools for a New Millennium Grant

Webpages designed by John A. Cagle, Professor of Communication,
California State University, Fresno
December 12, 1998