Formatting

Formatting

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

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? <h1>The name of this heading</h1> • CSS is a little different: • The font is designed for stated sections • Body { font-family: arial , courier } Font Style Continued…

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

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 Continued…

Font Size Equivalents

New Tag if wanted: • If you want the whole page same size aside from individual identifications <basefont> • Not supported by all browsers • Internet Explorer but not Firefox or Safari • Does not affect the size of any headings (h1, h2, 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> <basefontsize=“4”> remainder of the body, headings, etc…. Font Size Continued…

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 Try it!

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

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. Text Color

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.

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? • text=“…” • What would that look like? <body text=“red”> or <body text=“#FF0000”> 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. Text color continued…

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!

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 colors and colors that do not obscure the text Background page color

What does it look like? <body bgcolor=“#FFFF00”> <body bgcolor=“yellow”> background page color continued…

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. Try it!

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 • <h1> and </h1> • 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. <h1>The World Wide Web Consortium: Working on Web Standards For The World</h1>

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. <h1>The World Wide Web Consortium: Working on Web Standards For The World</h1> • 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: , <h1> • What is the attribute? align=“….”

Try it! • Create an align attribute inside your h1 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 the 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 3D 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=“#0000FF”>

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”; font-size: 12px; 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

Formatting

Formatting

Presentation Transcript

Presentation Formatting

Document Formatting

Citation Formatting

Workbook Formatting

Formatting Pictures

Spreadsheet formatting

Output Formatting

Brief Formatting

FORMATTING PARAGRAPHS

Resume Formatting

MLA Formatting

AMA Formatting

Formatting Output

Formatting

Wrong Formatting

APA Formatting

Document Formatting

MLA FORMATTING

FORMATTING TIPS

Spreadsheet Formatting

MLA Formatting