HTML II Formatting the Language of the Web Terry Bake

Copyright D. Terrence Bake 2002 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,,, and tags. We will cover some additional tags if time permits.

Copyright D. Terrence Bake 2002 Prerequisites An understanding of very basic HTML is needed for the course An understanding of how to use Microsofts Notepad

Copyright D. Terrence Bake 2002 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.

Copyright D. Terrence Bake 2002 Agenda Topics tag to create headings tag to create paragraphs tag to create a carriage return tag to create seperators within a page tag to control font attributes Each of these topics will take approximately seven minutes.

Copyright D. Terrence Bake 2002 Using 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 tag comes in six flavors from to. creates the largest heading and only one can be used in a HTML document.

Copyright D. Terrence Bake 2002 Using to Create Headings is typical used for page titles. to are used for sub headings. Each is smaller in size and boldness as the trailing number increases.

Copyright D. Terrence Bake 2002 Save your HTML document as index.html to your desktop. Within Notepad, create the following document:

Copyright D. Terrence Bake 2002 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.

Copyright D. Terrence Bake 2002 Using 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 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.

Copyright D. Terrence Bake 2002 Open your index.html in Notepad and add the changes denoted in blue:

Copyright D. Terrence Bake 2002 Notice the difference between our page title and the sub heading of PARAGRAPHS. Also notice the new white space created by. Now the HTML document in a web browser.

Copyright D. Terrence Bake 2002 Using to start a new line When you need to control the length of a line of text the 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. is a singleton tag which means no closing tag is requred.

Copyright D. Terrence Bake 2002 Open your index.html in Notepad and add the changes denoted in blue:

Copyright D. Terrence Bake 2002 Notice the difference between our page title and the sub heading of CARRIAGE RETURNS. Also notice the carraige returns created by the tags. Now the HTML document in a web browser.

Copyright D. Terrence Bake 2002 Using to create a horizontal rule If you need a visual barrier within your document, the tag creates a horizontal rule in your document. By default, the 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 tag.

Copyright D. Terrence Bake 2002 Open your index.html in Notepad and add the changes denoted in blue:

Copyright D. Terrence Bake 2002 Notice the difference between our page title and the sub heading of HORIZONTAL RULE. Also notice the horizontal rule created by the tag. Now the HTML document in a web browser.

Copyright D. Terrence Bake 2002 Font Manipulation The tag allows you to tell the browser what font you want your text displayed in. If the users computer has the font available on their computer, their browser will use that font to display your text. Otherwise it will use that browsers default font. You control fonts via the tags attributes.

Copyright D. Terrence Bake 2002 Font Attributes face – Determines which font to use such as Arial, Times New Roman or Courier size – Determines text viewing size color – determines text color The format for the tag is as follows: The order of the attributes does not matter.

Copyright D. Terrence Bake 2002 Open your index.html in Notepad and add the changes denoted in blue:

Copyright D. Terrence Bake 2002 Notice the different fonts, colors and sizes of the text created by various uses of attributes of the tag. Now the HTML document in a web browser.

Copyright D. Terrence Bake 2002 Summary The World Wide Web is a great way to get your message to the world. Use the,,, and tags to make your message easier for the world to read and visually more appealing. Any questions or comments?

Copyright D. Terrence Bake 2002 Where to Get More Information Todays sessions of HTML III W3 Schools at HTML & Web Development classes here at Cincinnati State My address –