html ii formatting the language of the web terry bake [email protected]

HTML HTML IIIIFormatting the Language of the Web

Terry [email protected]

Copyright D. Terrence Bake 2002

Introduction Introduction

HTML is the language used to create every web page that you see on the Internet

In this course you will learn the basics of formatting text in an HTML document using the <h1>, <p>, <br>, <hr> and <font> tags. We will cover some additional tags if time permits.


PrerequisitesPrerequisites

An understanding of very basic HTML is needed for the course

An understanding of how to use Microsoft’s Notepad


Overview Overview

HTML documents allow you to put your message on the web.

If you create these documents without using some sort of formatting tags, your words will run together in endless strings of text that will be very difficult for your users to read.


AgendaAgenda

Topics<h1> tag to create headings<p> tag to create paragraphs<br> tag to create a carriage return<hr> tag to create seperators within a page<font> tag to control font attributesEach of these topics will take approximately

seven minutes.


Using <h1> to Create HeadingsUsing <h1> to Create Headings

Once you have created a HTML document, you will want to put some text into them and you will likely want to create headings for the different sections of your document.

The <h> tag comes in six flavors from <h1> to <h6>. <h1> creates the largest heading and only one <h1> can be used in a HTML document.


Using <h1> to Create HeadingsUsing <h1> to Create Headings

<h1> is typical used for page titles.

<h2> to <h6> are used for sub headings. Each is smaller in size and boldness as the trailing number increases.


Save your HTML document as index.html to your desktop.

Within Notepad, create the following document:Within Notepad, create the following document:


Notice the difference between “Hello World!” and the rest of the text. Also notice that the text runs as one log string.

Now open the document in a web browser.Now open the document in a web browser.


Using <p> to create paragraphsUsing <p> to create paragraphs

The text in our document is not easily read and you can image how it would be if it were a thousand words long.

To prevent this problem, HTML has the <p> to create paragraphs within our document.

To make our different sections apparent to us when viewed in a browser, we will use a heading before each formatting tag.


Open your index.html in Notepad and add the changes Open your index.html in Notepad and add the changes denoted in blue:denoted in blue:


Notice the difference between our page title and the sub heading of “PARAGRAPHS”. Also notice the new white space created by <p>.

Now the HTML document in a web browser.Now the HTML document in a web browser.


Using <br> to start a new lineUsing <br> to start a new line

When you need to control the length of a line of text the <br> tag acts as a carriage return and it may be used alone or within other tags.

We will add a tag within the previous paragraph and another alone after the heading for this tag.

<br> is a singleton tag which means no closing tag is requred.


Notice the difference between our page title and the sub heading of “CARRIAGE RETURNS”. Also notice the carraige returns created by the <br> tags.



Using <hr> to create a horizontal Using <hr> to create a horizontal ruleruleIf you need a visual barrier within your

document, the <hr> tag creates a horizontal rule in your document.

By default, the <hr> tag will be centered between the sides of the browser and will cover 90% of the browser screen.

The width and the thickness of the horizontal rule can be altered via the width and height attributes of the <hr> tag.


Notice the difference between our page title and the sub heading of “HORIZONTAL RULE”. Also notice the horizontal rule created by the <hr> tag.



Font ManipulationFont Manipulation

The <font> tag allows you to tell the browser what font you want your text displayed in.

If the user’s computer has the font available on their computer, their browser will use that font to display your text. Otherwise it will use that browser’s default font.

You control fonts via the <font> tag’s attributes.


Font AttributesFont Attributes

face – Determines which font to use such as Arial, Times New Roman or Courier

size – Determines text viewing sizecolor – determines text color

The format for the <font> tag is as follows:<font face=“Arial” size=“4” color=“blue”>The order of the attributes does not matter.


Notice the different fonts, colors and sizes of the text created by various uses of attributes of the <font> tag.



SummarySummary

The World Wide Web is a great way to get your message to the world.

Use the <h1>, <p>, <br>, <hr> and <font> tags to make your message easier for the world to read and visually more appealing.

Any questions or comments?


Where to Get More InformationWhere to Get More Information

Today’s sessions of HTML IIIW3 Schools at http://www.w3schools.comHTML & Web Development classes here

at Cincinnati StateMy e-mail address – [email protected]

html ii formatting the language of the web terry bake [email protected]

Documents

page tag

headings tag

paragraphs tag

tag acts

singleton tag

closing tag

microsofts notepad slide

web browser