Changing Text More...Where the +N or -N value provides the offset from the current font size •This is used with another tag… Changes the base font size

1

Changing Text More

014

2

Learning Objectives

• After this lesson you will be able to…

Use the <blink> tag

Use the <marquee> tag

Change the size of specific portions of text in a web page

Change the color of specific portions of text in a web page

Create superscripts and subscripts for text in a web page

Specify the font for portions of text on a web page

3

Blink Tag*Slides have notes only*

• When Netscape first unveiled their web browser they added a unique tag to draw attention to an important word or phrase -- by causing it to flash on and off in the web page.Did not go through the international W3 consortium

to develop an accepted standard for the feature

Just added the functionality to their web browser

• HTML for blink tag:<blink>Wow</blink>

4

Blink Tag*Slides have notes only*

• Many HTML people believe using it means…

“Avoid this page—the person that wrote it just learned HTML from a bubble gum wrapper.“

• Does not work on all web browsers!

Works in Netscape

Doesn’t work in Internet Explorer

5

Marquee Tag*Slides have notes only*

• Not to be outdone, Microsoft created its own special, non-standard tag to work only in Internet Explorer<marquee>Wow</marquee>

• Takes the text inside and displays it like a ticker tape (one letter added at a time) across the page.

• Does not work on all web browsers!Works in Internet Explorer

Doesn’t work in Netscape

6

Marquee Tags Used on WMHS Page*Slides have notes only*

• <MARQUEE><IMG src="http://www.augusta.k12.va.us/wilsonmemorialhs/lib/wilsonmemorialhs/transparentbeeformarquee.jpg"></MARQUEE>Gets the bee to run across

• <MARQUEE> Teaching the Youth of Today The Business of Tomorrow></MARQUEE>Gets words to run acrossSee staff page for example

7

Font Size*Slides have notes only*

• The may be used to set the size of the font…1 is the smallest

3 is the normal text size

7 is the largest

• Actual size depends on the computer font the user has selected for their web browserThis adjusts the size relative to the

default font the user has chosen

8


• The format for the font size tag is…

blah blah blah

Where N=1 to 7

• The font tag may be used in conjunction with other style tags or inside header tags

9


• The other method for using the font tag is to provide a relative size change:

blah blah blah

blah blah blah

Where the +N or -N value provides the offset from the current font size

• This is used with another tag…

<basefont size=5>

Changes the base font size from its default value of 3 to some other value

Might do this in a web page that will mostly have text of a larger or smaller than standard font size

10


• The power of using relative font size tags (e.g. size=+2) over absolute size tags (e.g. size=5) is that we could easily shift the size of ALL text in that page by changing one instance of the <basefont> tag.

Note:

The <basefont> tag has no closing tag

It continues to be the base font size until another <basefont> tag occurs

11


• If a web browser does not support the tags, you may want to try the HTML 3.0 tags:

<big>...</big>

...

Gives less font sizes to work with

Can still be useful for some browsers

12

Volcano Web

• First use the tag to modify the title in our opening page

• Open the index.html file in Notepad

• You have used an <h1>…</h1> header tag to format the title of the page.

13

Volcano Web*Doing first instruction on this slide*

• Change<h1>Volcano Web</h1> to…





V

OLCANO WEB



• Can be all on one line

14

Volcano Web Results Will Be…*Slides have explanation of what you did on Slide 13*

• The first V is now increased in size by 4 units above the base value

• Other letters are now capitalized

Increased 3 units above base value

Provides the layout style of SMALL CAPS

• ...tag makes title stand out

• Now there is not a header tag

tag is added above to force it to appear on a new line

15

Volcano Web Introduction Change

• Next, change each of the headers in index.html and in msh.html to raise the font size:

• You will see headers like…<h3>blah blah blah</h3>

• Change any <h2> and <h3> header tags so they look like…

blah blah blah



 

• This shows you a 2nd way to create headings

• Save each document

• Refresh in Internet Explorer

16

Font Color*Slides have notes only*

• Add an attribute to the tag to color a selected portion of text using…The hexadecimal codes

The 16 colors recognized by their names

• Examples…...

...

...


...


17

Volcano Web

• Size & color attributes can reside together in a tag

• Had set text color for text of page to yellowCan override that color for the title text

• Open index.html file in Notepad• Edit the line that contains the text of VOLCANO

WEB to read…VOLCANO WEB

• Result"V" a brighter violet color one size larger than other

letters

• Save and Refresh in Internet Explorer

18

Superscripts and Subscripts*Slides have notes only*

• The HTML format for these tags is…

... superscript

... subscript

19

Superscripts and Subscripts in Volcano

• Open Volcano index.html in Notepad

• After the last sentence in paragraph 2 ("Compare the history of human beings...'), add this sentence that uses subscripts…

Volcanoes were important contributors to the early earth atmosphere by releasing gases such as nitrogen (N2), carbon dioxide (CO2), and ammonia (NH4).

20

Use Superscripts to Denote a Cubic Volume

• Below the table we created with the <pre>...</pre> tags, add this sentence:

Note that volcanic eruptions that occurred before historic times were several orders of magnitude larger (more than 1000 km3 in erupted volume) than ones observed by humans.

• In the third column of the table, change…

Volume in km^3

To

Volume in km3

21

Superscripts and Subscripts


22

Font Face*Slides have notes only*

• The HTML for specifying a font face is…some text

• If a viewer's web browser supports the font FACE attribute and they have one of the listed fonts installed on their computer, then the text will be displayed with the specified font.

• Otherwise, it will use the same font as the rest of the web page.

23

Font Face

• When using a font face, select a face that is standard or be sure that the intended computers have any "exotic" fonts installed.

• We will now modify the tag for our title page so that the words "Volcano Web" appear in a different font.

• Open the index.html file in Notepad

24

Font Face*Doing instruction on this slide*

• Edit the line that contains the text of VOLCANO WEB to read…

V

OLCANO WEB


25

Font Face Notes*Slides have notes only*

• Choose Arial for Windows

• Choose Helvetica for Macintosh and/or computers that do not have the Arial font installed

• Use this HTML with discretion!

There is an art of use versus abuse of too many font styles!

26

Style Tags*Slides have notes only*

• This is Underline

This is Underline...

• This is Strike-through

<strike> This is Strike-through... </strike>

27

Independent Practice: 2 Slides

• Open index.html and second.html

• Modify each document…

Look for places where you might need superscripts or subscripts

Experiment with the ... tags in your own web pages

Consider using font tags inside the <hN>...</hN> tags as well

Experiment with using different fonts, even the wild ones!

Consider using the <blink> tag & the <marquee> tag

28

Independent Practice: 2 Slides

• Print index.html from Notepad

• Print second.html from Notepad

• Circle or highlight the HTML tag changes of…

Font tag changes

Usage of superscripts or subscripts

Usage of blink and/or marquee tags

• Staple the two (2) items together

• Put your name & computer number AND Personal Web 13 on the assignment

• Turn in for a grade

Documents

Changing Text More...Where the +N or -N value provides the offset from the current font size •This is used with another tag… Changes the base font size