html ii formatting the language of the web terry bake [email protected]
TRANSCRIPT
![Page 2: HTML II Formatting the Language of the Web Terry Bake tbake@fuse.net](https://reader035.vdocuments.us/reader035/viewer/2022062618/551423d95503466d1a8b49a0/html5/thumbnails/2.jpg)
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.
![Page 3: HTML II Formatting the Language of the Web Terry Bake tbake@fuse.net](https://reader035.vdocuments.us/reader035/viewer/2022062618/551423d95503466d1a8b49a0/html5/thumbnails/3.jpg)
Copyright D. Terrence Bake 2002
PrerequisitesPrerequisites
An understanding of very basic HTML is needed for the course
An understanding of how to use Microsoft’s Notepad
![Page 4: HTML II Formatting the Language of the Web Terry Bake tbake@fuse.net](https://reader035.vdocuments.us/reader035/viewer/2022062618/551423d95503466d1a8b49a0/html5/thumbnails/4.jpg)
Copyright D. Terrence Bake 2002
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.
![Page 5: HTML II Formatting the Language of the Web Terry Bake tbake@fuse.net](https://reader035.vdocuments.us/reader035/viewer/2022062618/551423d95503466d1a8b49a0/html5/thumbnails/5.jpg)
Copyright D. Terrence Bake 2002
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.
![Page 6: HTML II Formatting the Language of the Web Terry Bake tbake@fuse.net](https://reader035.vdocuments.us/reader035/viewer/2022062618/551423d95503466d1a8b49a0/html5/thumbnails/6.jpg)
Copyright D. Terrence Bake 2002
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.
![Page 7: HTML II Formatting the Language of the Web Terry Bake tbake@fuse.net](https://reader035.vdocuments.us/reader035/viewer/2022062618/551423d95503466d1a8b49a0/html5/thumbnails/7.jpg)
Copyright D. Terrence Bake 2002
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.
![Page 8: HTML II Formatting the Language of the Web Terry Bake tbake@fuse.net](https://reader035.vdocuments.us/reader035/viewer/2022062618/551423d95503466d1a8b49a0/html5/thumbnails/8.jpg)
Copyright D. Terrence Bake 2002
Save your HTML document as index.html to your desktop.
Within Notepad, create the following document:Within Notepad, create the following document:
![Page 9: HTML II Formatting the Language of the Web Terry Bake tbake@fuse.net](https://reader035.vdocuments.us/reader035/viewer/2022062618/551423d95503466d1a8b49a0/html5/thumbnails/9.jpg)
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.Now open the document in a web browser.
![Page 10: HTML II Formatting the Language of the Web Terry Bake tbake@fuse.net](https://reader035.vdocuments.us/reader035/viewer/2022062618/551423d95503466d1a8b49a0/html5/thumbnails/10.jpg)
Copyright D. Terrence Bake 2002
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.
![Page 11: HTML II Formatting the Language of the Web Terry Bake tbake@fuse.net](https://reader035.vdocuments.us/reader035/viewer/2022062618/551423d95503466d1a8b49a0/html5/thumbnails/11.jpg)
Copyright D. Terrence Bake 2002
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:
![Page 12: HTML II Formatting the Language of the Web Terry Bake tbake@fuse.net](https://reader035.vdocuments.us/reader035/viewer/2022062618/551423d95503466d1a8b49a0/html5/thumbnails/12.jpg)
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 <p>.
Now the HTML document in a web browser.Now the HTML document in a web browser.
![Page 13: HTML II Formatting the Language of the Web Terry Bake tbake@fuse.net](https://reader035.vdocuments.us/reader035/viewer/2022062618/551423d95503466d1a8b49a0/html5/thumbnails/13.jpg)
Copyright D. Terrence Bake 2002
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.
![Page 14: HTML II Formatting the Language of the Web Terry Bake tbake@fuse.net](https://reader035.vdocuments.us/reader035/viewer/2022062618/551423d95503466d1a8b49a0/html5/thumbnails/14.jpg)
Copyright D. Terrence Bake 2002
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:
![Page 15: HTML II Formatting the Language of the Web Terry Bake tbake@fuse.net](https://reader035.vdocuments.us/reader035/viewer/2022062618/551423d95503466d1a8b49a0/html5/thumbnails/15.jpg)
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 <br> tags.
Now the HTML document in a web browser.Now the HTML document in a web browser.
![Page 16: HTML II Formatting the Language of the Web Terry Bake tbake@fuse.net](https://reader035.vdocuments.us/reader035/viewer/2022062618/551423d95503466d1a8b49a0/html5/thumbnails/16.jpg)
Copyright D. Terrence Bake 2002
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.
![Page 17: HTML II Formatting the Language of the Web Terry Bake tbake@fuse.net](https://reader035.vdocuments.us/reader035/viewer/2022062618/551423d95503466d1a8b49a0/html5/thumbnails/17.jpg)
Copyright D. Terrence Bake 2002
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:
![Page 18: HTML II Formatting the Language of the Web Terry Bake tbake@fuse.net](https://reader035.vdocuments.us/reader035/viewer/2022062618/551423d95503466d1a8b49a0/html5/thumbnails/18.jpg)
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 <hr> tag.
Now the HTML document in a web browser.Now the HTML document in a web browser.
![Page 19: HTML II Formatting the Language of the Web Terry Bake tbake@fuse.net](https://reader035.vdocuments.us/reader035/viewer/2022062618/551423d95503466d1a8b49a0/html5/thumbnails/19.jpg)
Copyright D. Terrence Bake 2002
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.
![Page 20: HTML II Formatting the Language of the Web Terry Bake tbake@fuse.net](https://reader035.vdocuments.us/reader035/viewer/2022062618/551423d95503466d1a8b49a0/html5/thumbnails/20.jpg)
Copyright D. Terrence Bake 2002
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.
![Page 21: HTML II Formatting the Language of the Web Terry Bake tbake@fuse.net](https://reader035.vdocuments.us/reader035/viewer/2022062618/551423d95503466d1a8b49a0/html5/thumbnails/21.jpg)
Copyright D. Terrence Bake 2002
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:
![Page 22: HTML II Formatting the Language of the Web Terry Bake tbake@fuse.net](https://reader035.vdocuments.us/reader035/viewer/2022062618/551423d95503466d1a8b49a0/html5/thumbnails/22.jpg)
Copyright D. Terrence Bake 2002
Notice the different fonts, colors and sizes of the text created by various uses of attributes of the <font> tag.
Now the HTML document in a web browser.Now the HTML document in a web browser.
![Page 23: HTML II Formatting the Language of the Web Terry Bake tbake@fuse.net](https://reader035.vdocuments.us/reader035/viewer/2022062618/551423d95503466d1a8b49a0/html5/thumbnails/23.jpg)
Copyright D. Terrence Bake 2002
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?
![Page 24: HTML II Formatting the Language of the Web Terry Bake tbake@fuse.net](https://reader035.vdocuments.us/reader035/viewer/2022062618/551423d95503466d1a8b49a0/html5/thumbnails/24.jpg)
Copyright D. Terrence Bake 2002
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]