FORMATTING FONT STYLE New Tags font font Attribute

FORMATTING

FONT STYLE New Tags: Attribute: face= Technically you cannot set the font to whatever you want. Instead you are “asking” the browser to use the font you have provided; however even then you may not get what you wish for!

FONT STYLE CONTINUED… Safe fonts: Times New Roman Ariel Verdana Courier Helvetica (Mac offers rather than Ariel) Sans Serif or monospace (generic font style)

FONT STYLE CONTINUED… You want to use more than one Separate them with a comma What does it look like? <h 1>The name of this heading</h 1> CSS is a little different: The font is designed for stated sections Body { font-family: arial , courier }

FONT SIZE By changing the font size, you can emphasize or de-emphasize different sections Why wouldn’t you want to do this? Tag? Attribute? size=

FONT SIZE CONTINUED… � There are 7 predetermined sizes � 1 being the smallest and 7 being the largest � Browsers can interpret this differently � Can also specify using relative size font sizing � Add + or – sign before a size number � Will alter the size according to the size of surrounding text

FONT SIZE EQUIVALENTS Size Attribute Font Size 1 7 Points 2 10 Points 3 12 Points 4 14 Points 5 18 Points 6 24 Points 7 36 Points

FONT SIZE CONTINUED… New Tag if wanted: If you want the whole page same size aside from individual identifications <basefont> Not supported by all browsers Internet Does Explorer but not Firefox or Safari not affect the size of any headings (h 1, h 2, etc) within your page text

FONT SIZE CONTINUED… � What does this look like? Second smallest font Second largest fontthen will create smaller by 2 <body> <basefont size=“ 4”> remainder of the body, headings, etc….

TRY IT! � Change the text style and size (you can change color too if you like) � When done and if time, open your Notepad page and change the body of your text showing three font styles and resize your text to the next size. Hint: use relative sizing

Text Color Variety of ways to add color to your website Hexadecimals RGB values Color naming Please go to http: //www. mathsisfun. com/hexadecimal-colors. html

TEXT COLOR � When adding color to your text, what tag should you use? � What would the attribute be? color=“…” � What is the best way to “name” your color? Use hexadecimals � For basic colors, you can use the name “red, ” “blue, ” “black, ” etc. � � What would it look like? The text that you are trying to color. The text that you are coloring.

Try It! Enter your font tags around one sentence in one of your paragraphs. Within your font tags, add your color attribute and provide a brightly colored hexadecimal value.

TEXT COLOR CONTINUED… To change all the text: WITHIN the body tag, you need to enter your attribute. What attribute would you use for coloring the entire document text? What text=“…” would that look like? <body text=“red”> or <body text=“#FF 0000”>

TEXT COLOR CONTINUED… � You can still individually change the font of text. Anything you want to change outside of the entire text should be done using the font tags around it. � The text attribute does not change the color of links. These have their own default coloring. � Be sure to choose a color that is appropriate for your site and does not clash or fade into the background color.

Try It! Within your body tag, add your text attribute and a different hexidecimal color value than the one you chose for your single sentence. Be sure the color is very different from the color that you chose for your sentence!

BACKGROUND PAGE COLOR � What tag would be used for setting a background color? � The body tag: you are changing the entire document � What attribute would be used? bgcolor=“…” � What do you want to avoid when choosing a background color? � Dark text colors and colors that do not obscure the

BACKGROUND PAGE COLOR CONTINUED… What does it look like? <body bgcolor=“#FFFF 00”> <body bgcolor=“yellow”>

TRY IT! Open your document in Notepad Change the entire page text color Change the heading to a different color Change the background color. Be sure to SAVE and test in the browser! Print out your html document and show me your page in the browser.

Formatting Continued… Structuring your site

Spacing Throughout the Document �How do we create space and/or sections? �Paragraph tags �Section headers �Line breaks �Line Height �Alignments �Horizontal Rule �Divisions �Lists �Tables

Spacing Continued… Though we have been taught to put our tags in pairs, there are some exceptions to the rule and <h 1> and </h 1> OR No closing tag can be used in HTML; however, is required in XHTML (This tag will not be the only tag that does not have a closing tag that it is paired with)

Spacing/Line Breaks Continued… �Line Break tag only goes where you need it �Use it to create minimal space between line �There is a default of spacing �You can use multiple line breaks to create more space between lines � CSS can help you control the space between lines in a paragraph and between the paragraphs. We have to keep it together Never come apart, Birds of a feather, Close to our heart.

What If I Do Not Want my text to Break? Example: Words with pictures or sentences that would break off due to size of display in a browser All text defined with these tags will be kept on one line no matter what You can add tags to alter this. <h 1>The World Wide Web Consortium: Working on Web Standards For The World</h 1>

Discretionary Line Breaks Regular line breaks are permanent. No matter how big the window is, the lines will continue to break where instructed to do so. When line breaks are necessary, though you want to control the line break, you can do so with a discretionary line break. Without the discretionary tag, the “no line break” will NOT continue text on the next line! Be sure to check all browsers as not all support discretionary line breaks

Discretionary Line Breaks Con’t… Controlling the line break: Add the “no line break” tags where needed. Type in where you want to control the line break It is useless to add in the tag without the tags. <h 1>The World Wide Web Consortium: Working on Web Standards For The World</h 1> What is different about this tag?

Try It! Target one of your paragraph sentences that is longer than one line in the browser Add the following tags Be sure to save and see what happens to the sentence in the browser window. Then add inside the sentence where you want the line to break. Be sure to save and see what happens to the heading in the browser window.

Alignments �Helps you control the horizontal positioning, or alignment, of your paragraphs �Can align left, right, center, or justify �What is the default? �Left �What tags do we use? Depends on what you want aligned: , <h 1> �What is the attribute? align=“…. ”

Try it! Create an align attribute inside your h 1 tag. Align your heading to the right Be sure to save and check in your browser. Align for center Keep whichever you like for your heading Target one of your paragraphs and “justify” your paragraph. Save and check in your browser.

Blank Spaces/Indenting �Not considered to be a tag or attribute �It is defined as a “special character” &nbsp � Stands for “nonbreaking space” � Counts for 1 space for each time it is used � Separated by a semi-colon The text that you wanted to indent

Try it! After your paragraph tag that begins your research information, add 5 &nbsp Be sure to save and check in your browser.

Block Quote Different from adding blank spaces Used to set off a paragraph from the rest of the document page. Adds the same amount of space on both sides of the paragraph Used with quoted text or excerpts from other sources (BE SURE TO CITE!!!)

Block Quote Continued… Only uses tags. No attribute needed. What are the tags? <blockquote> </blockquote> Does not need to be used in paragraph tags; however, you may want to add them to be safe with browsers. What does it look like? <blockquote>All of the text that you want to show in a block quote. However, it is usually quite long in nature (as in 4 lines or better). </blockquote>

Try it! Open Notepad for your website. Add line 2 line breaks after your heading Add a no-line break in your heading - done Add a discretionary break to your heading - done Center align your heading - done Justify Align your text paragraph - done Add 5 spaces to your text paragraph - done Add a large quote that is relevant to your content in your webpage (hint: copy and paste!) (Also, remember to cite the source though do not add it to your block quote! Place the name in paragraph tags and italicize) “Block quote” your quote

Margins

Margins �Just like any other document, there are preset default margins. �Right and Left Margins are set at 10 pixels �Top and Bottom Margins are set at 15 Pixels. �Depending on the “look” of your site, you will want to alter this. �What tag do we use? <body> �What attribute? margin=“…”

Margins Continued… How will the “margin=“…”” work when considering all sides? You have to specify what margin you are referring to. What would it look like? <body leftmargin=“ 25” rightmargin=“ 25” topmargin=“ 40” bottommargin=“ 40”>

Preformatted Text These tags allow you to display the line breaks and spaces you enter for a paragraph or block of text Browsers “ignore” returns, line breaks, and extra spaces unless you use these tags. Notepad accepts tabs so you can align the way you need it to. Can be used to align elements within the text into columns without creating a table.

Preformatted Text Continued… Example: Backpack Hiking supplies Suitcase Clothes, other necessities Laptop bag Computer, power cable, mouse What tags would you use? <pre> </pre> No attributes needed. Why? You are not altering the text or design in any way.

Preformatted Text Continued… �What it will look like in HTML: Common Carry-ons <pre> Backpack Hiking supplies Suitcase Clothes, other necessities Laptop bag Computer, power cable, mouse </pre> �Be aware that browsers will automatically default this text to a monospace font like Courier. If you want to keep uniformity, then you need to specify the font for this area but do so only after you have entered the tags and text. <pre>

Horizontal Rule Same as a horizontal solid line Used to separate blocks of information Is completely supported by the majority by the browsers MUST occupy a line by itself and cannot appear in a paragraph These tags should be depreciated Should be done with CSS; however can be done using HTML coding

Horizontal Rule Continued… By default, browsers display this as a thin gray line and sometimes with a 3 dimensional effect You can define thickness, length, and color of a horizontal line using size, width, and color attributes Size is set in pixels Width is set in pixels or percentage You can remove the shading of the 3 D effect by adding a no shade attribute to your horizontal rule tag You can also align the horizontal rule for a set look

Horizontal Rule Continued… �What tag will be used? <hr> �No ending tag �What attributes? �You do not need any attributes IF you do not care what it looks like. Otherwise: size=“…” width=“…” color=“…” �Remember that you can have the width set in pixels or % �What it will look like in code: <hr size=“ 10” width=“ 650” color=“#0000 FF”>

Line Height Refers to the amount of space between each line in a paragraph Can make your body text easier to read (if done within reason) Small line height for headers with more than one line can make the headers look “classier” It is usually relative to the text size

Line Height Continued… Does not work with straight HTML Hand-coding; however, can be used for styles What would the attribute look like? line height: HTML attributes have the = sign that follow; however, styles has the : sign to follow the attribute Altogether it would look something like this: {font-family: “Verdana”, ”helvetica”, “sans-serif”; fontsize: 12 px; line-height: 150%}

Try it! �Create margins altering all sides (greater than the default!) �Tell me something about your site in preformatted text (minimum 3 lines). Remember to set up your preformatted text and tags first before you add in your alterations to the font. � Example Apple, Inc. (Name of the genre and then singers that would apply) Fashion (Name of designer and types of clothes known for) Art (Name of artists and types of art) News (topic and samples of what it contains �Create a horizontal rule right before your Preformatted Text