Changing Text More...Where the +N or -N value provides the offset from the current font size •This...
Transcript of Changing Text More...Where the +N or -N value provides the offset from the current font size •This...
![Page 1: 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](https://reader034.fdocuments.us/reader034/viewer/2022042105/5e83abd064d1d764e51076a7/html5/thumbnails/1.jpg)
1
Changing Text More
014
![Page 2: 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](https://reader034.fdocuments.us/reader034/viewer/2022042105/5e83abd064d1d764e51076a7/html5/thumbnails/2.jpg)
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
![Page 3: 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](https://reader034.fdocuments.us/reader034/viewer/2022042105/5e83abd064d1d764e51076a7/html5/thumbnails/3.jpg)
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>
![Page 4: 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](https://reader034.fdocuments.us/reader034/viewer/2022042105/5e83abd064d1d764e51076a7/html5/thumbnails/4.jpg)
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
![Page 5: 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](https://reader034.fdocuments.us/reader034/viewer/2022042105/5e83abd064d1d764e51076a7/html5/thumbnails/5.jpg)
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
![Page 6: 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](https://reader034.fdocuments.us/reader034/viewer/2022042105/5e83abd064d1d764e51076a7/html5/thumbnails/6.jpg)
6
Marquee Tags Used on WMHS Page*Slides have notes only*
• <MARQUEE><SPAN style="FONT-SIZE: 8pt; FONT-FAMILY: Comic Sans MS"><IMG src="http://www.augusta.k12.va.us/wilsonmemorialhs/lib/wilsonmemorialhs/transparentbeeformarquee.jpg"></SPAN></MARQUEE>Gets the bee to run across
• <MARQUEE><SPAN style="FONT-SIZE: 8pt; FONT-FAMILY: Comic Sans MS"> Teaching the Youth of Today The Business of Tomorrow></SPAN></MARQUEE>Gets words to run acrossSee staff page for example
![Page 7: 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](https://reader034.fdocuments.us/reader034/viewer/2022042105/5e83abd064d1d764e51076a7/html5/thumbnails/7.jpg)
7
Font Size*Slides have notes only*
• The <font> 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
![Page 8: 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](https://reader034.fdocuments.us/reader034/viewer/2022042105/5e83abd064d1d764e51076a7/html5/thumbnails/8.jpg)
8
Font Size*Slides have notes only*
• The format for the font size tag is…
<font size=N>blah blah blah</font>
Where N=1 to 7
• The font tag may be used in conjunction with other style tags or inside header tags
![Page 9: 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](https://reader034.fdocuments.us/reader034/viewer/2022042105/5e83abd064d1d764e51076a7/html5/thumbnails/9.jpg)
9
Font Size*Slides have notes only*
• The other method for using the font tag is to provide a relative size change:
<font size=+1>blah blah blah</font>
<font size=-2>blah blah blah</font>
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
![Page 10: 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](https://reader034.fdocuments.us/reader034/viewer/2022042105/5e83abd064d1d764e51076a7/html5/thumbnails/10.jpg)
10
Font Size*Slides have notes only*
• 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
![Page 11: 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](https://reader034.fdocuments.us/reader034/viewer/2022042105/5e83abd064d1d764e51076a7/html5/thumbnails/11.jpg)
11
Font Size*Slides have notes only*
• If a web browser does not support the <font> tags, you may want to try the HTML 3.0 tags:
<big>...</big>
<small>...</small>
Gives less font sizes to work with
Can still be useful for some browsers
![Page 12: 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](https://reader034.fdocuments.us/reader034/viewer/2022042105/5e83abd064d1d764e51076a7/html5/thumbnails/12.jpg)
12
Volcano Web
• First use the <font size=X> 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.
![Page 13: 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](https://reader034.fdocuments.us/reader034/viewer/2022042105/5e83abd064d1d764e51076a7/html5/thumbnails/13.jpg)
13
Volcano Web*Doing first instruction on this slide*
• Change<h1>Volcano Web</h1> to…
<p>
<b>
<font size=+4>V</font>
<font size=+3>OLCANO WEB</font>
</b>
• Can be all on one line
![Page 14: 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](https://reader034.fdocuments.us/reader034/viewer/2022042105/5e83abd064d1d764e51076a7/html5/thumbnails/14.jpg)
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
• <b>...</b>tag makes title stand out
• Now there is not a header tag
<p>tag is added above to force it to appear on a new line
![Page 15: 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](https://reader034.fdocuments.us/reader034/viewer/2022042105/5e83abd064d1d764e51076a7/html5/thumbnails/15.jpg)
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…<p>
<font size=+1><b>blah blah blah</b>
</font>
<br>
• This shows you a 2nd way to create headings
• Save each document
• Refresh in Internet Explorer
![Page 16: 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](https://reader034.fdocuments.us/reader034/viewer/2022042105/5e83abd064d1d764e51076a7/html5/thumbnails/16.jpg)
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…<font color=red>...</font>
<font color=#993459>...</font>
<font color=lime>...</font>
<font color=#002200>...</font>
<font color=navy>...</font>
<font color=#193467>...</font>
![Page 17: 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](https://reader034.fdocuments.us/reader034/viewer/2022042105/5e83abd064d1d764e51076a7/html5/thumbnails/17.jpg)
17
Volcano Web
• Size & color attributes can reside together in a <font> 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…<b><font size=+4 color=#FF66FF>V</font><font size=+3 color=#DD0055>OLCANO WEB</font></b>
• Result"V" a brighter violet color one size larger than other
letters
• Save and Refresh in Internet Explorer
![Page 18: 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](https://reader034.fdocuments.us/reader034/viewer/2022042105/5e83abd064d1d764e51076a7/html5/thumbnails/18.jpg)
18
Superscripts and Subscripts*Slides have notes only*
• The HTML format for these tags is…
<sup>...</sup> superscript
<sub>...</sub> subscript
![Page 19: 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](https://reader034.fdocuments.us/reader034/viewer/2022042105/5e83abd064d1d764e51076a7/html5/thumbnails/19.jpg)
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 (N<sub>2</sub>), carbon dioxide (CO<sub>2</sub>), and ammonia (NH<sub>4</sub>).
![Page 20: 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](https://reader034.fdocuments.us/reader034/viewer/2022042105/5e83abd064d1d764e51076a7/html5/thumbnails/20.jpg)
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 km<sup>3</sup> in erupted volume) than ones observed by humans.
• In the third column of the table, change…
Volume in km^3
To
Volume in km<sup>3</sup>
![Page 21: 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](https://reader034.fdocuments.us/reader034/viewer/2022042105/5e83abd064d1d764e51076a7/html5/thumbnails/21.jpg)
21
Superscripts and Subscripts
• Save and Refresh in Internet Explorer
![Page 22: 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](https://reader034.fdocuments.us/reader034/viewer/2022042105/5e83abd064d1d764e51076a7/html5/thumbnails/22.jpg)
22
Font Face*Slides have notes only*
• The HTML for specifying a font face is…<font FACE="font1,font2">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.
![Page 23: 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](https://reader034.fdocuments.us/reader034/viewer/2022042105/5e83abd064d1d764e51076a7/html5/thumbnails/23.jpg)
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 <font> tag for our title page so that the words "Volcano Web" appear in a different font.
• Open the index.html file in Notepad
![Page 24: 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](https://reader034.fdocuments.us/reader034/viewer/2022042105/5e83abd064d1d764e51076a7/html5/thumbnails/24.jpg)
24
Font Face*Doing instruction on this slide*
• Edit the line that contains the text of VOLCANO WEB to read…
<b><font face="Arial,Helvetica" size=+4 color=#FF66FF>V</font>
<font face="Arial,Helvetica" size=+3 color=#DD0055>OLCANO WEB</font></b>
• Save and Refresh in Internet Explorer
![Page 25: 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](https://reader034.fdocuments.us/reader034/viewer/2022042105/5e83abd064d1d764e51076a7/html5/thumbnails/25.jpg)
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!
![Page 26: 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](https://reader034.fdocuments.us/reader034/viewer/2022042105/5e83abd064d1d764e51076a7/html5/thumbnails/26.jpg)
26
Style Tags*Slides have notes only*
• This is Underline
<u>This is Underline...</u>
• This is Strike-through
<strike> This is Strike-through... </strike>
![Page 27: 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](https://reader034.fdocuments.us/reader034/viewer/2022042105/5e83abd064d1d764e51076a7/html5/thumbnails/27.jpg)
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 <font>...</font> 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
![Page 28: 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](https://reader034.fdocuments.us/reader034/viewer/2022042105/5e83abd064d1d764e51076a7/html5/thumbnails/28.jpg)
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