Lesson 5 Advanced Text Formatting Advanced Text Formatting

Advanced Text Formatting o Here is where good design begins o There are several

Bold and Italic o If you want words bolded, simply place the <b> container

Font Tag o The font tag gives you control over how your page will

Font Size o So far, the only way we have learned to change our

Font size (cont. ) o With the font size, you can change the size

Let’s try this: o In your About Me webpage code, change the font size

Font Face o You can also change the type style of a font with

Font Faces usually available o o o o Arial Black Arial Narrow Book Antiqua

Font Face Code o <font face=“arialblack”>text</font> o This code would display the text in

Combining attributes o You can combine attributes in one font code, like this o

Let’s try it: o In the Gettysburg address code, change the font size of

Font color o You already know that you can change the font color of

Font color attribute o The color attribute works just like font size and font

And last, but not least. . . o <blockquote></blockquote> o If you want to

Let’s apply what we’ve learned o Pull up firstpage. html in Notepad o After

Font Changes Summary <font face=“Arial”> <font size=“ 2”> <font color=“######”> It goes between the

Adding a button o <form method="get" action="http: //address you want to link to"><input type="submit"

Slides: 18

Download presentation

Lesson 5 Advanced Text Formatting

Advanced Text Formatting o Here is where good design begins o There are several tags and attributes to learn o We will be learning the following tags and attributes n n <blockquote> </blockquote> o Size o Face o Color

Bold and Italic o If you want words bolded, simply place the container tag around that text. o By the same token, if you want something italicized, place the container tag around that text.

Font Tag o The font tag gives you control over how your page will look o The font tag does nothing without an attribute o We will learn three attributes today that go with the font tag n Size n Face n Color

Font Size o So far, the only way we have learned to change our font size is with <h 1>, etc. tags o The font size tag (attribute) looks like this text o The default size for browser’s is 3.

Font size (cont. ) o With the font size, you can change the size of any text, even within a sentence. Learning HTML Code does have its advantages. o The code for this would look like this Learning HTML Code does have its advantages.

Let’s try this: o In your About Me webpage code, change the font size of a word to a 2. o If you want to see the various sizes (1 -7), you can create a page that includes text for each level

Font Face o You can also change the type style of a font with the face attribute o However, keep in mind if the person viewing your page does not have that font, the browser will automatically display Times New Roman

Font Faces usually available o o o o Arial Black Arial Narrow Book Antiqua Bookman Old Style Century Gothic Century Schoolbook o o Courier New Garamond Times New Roman Verdana

Font Face Code o text o This code would display the text in the font Arial Black, if the viewer’s computer has that font.

Combining attributes o You can combine attributes in one font code, like this o This is what Garamond size four looks like. This is what Garamond size four looks like.

Let’s try it: o In the Gettysburg address code, change the font size of the “Four score and seven years ago” paragraph to 5 and to the arial font o Be sure to place your font tags at the beginning of the paragraph and at the end of the paragraph before your list of Presidents.

Font color o You already know that you can change the font color of the entire page by including the attribute “text color” in the body tag. o But, you can also change the color of just one line or one word with the font tag and the color attribute.

Font color attribute o The color attribute works just like font size and font face. o will display this text in the color bright blue o You can also combine the color attribute with font face and/or font size.

And last, but not least. . . o <blockquote></blockquote> o If you want to indent a sentence or an entire paragraph, use the blockquote tag around the copy.

Let’s apply what we’ve learned o Pull up firstpage. html in Notepad o After the tag and before “I am learning to use, put the following code: o Place the ending code after the word “appears” and before the ending tag o What will this do? This will change the font size, color and face of the sentence I am learning to use the horizontal rule, headline, paragraph, and line break tags. Writing HTML isn’t as hard as it appears.

Font Changes Summary It goes between the body tags The ending tag goes before the ending body tag o Put all together for a change would look like this: And of course, your ending tag o o o

Adding a button o <form method="get" action="http: //address you want to link to"><input type="submit" value="click here"></form> o This is what it would look like: o Add color to your button: o <FORM METHOD="get" ACTION="http: //www. lissaexplains. com"> <INPUT TITLE="submit" TYPE="submit" STYLE="background: #00 ff 00" VALUE="Click Here"></FORM>