Jan's Working with the Web

Step-by-Step: Format Text

 Start with:   , hector 19-Lastname-Firstname.htm, resource files

You will be making some changes to make Hector's page more appealing and colorful. By changing the title to use just the text graphic of Hector's signature, the top of the page will look cleaner. Then you will change the font, size, and color of the headings.

1. If necessary, open hector19-Lastname-Firstname.htm in your text editor.

2.  Save as hector20-Lastname-Firstname.htm.

3. Remove heading:
   Select the heading text in the H1 tag, Home of Hector Chavez.
   Be careful not to include the anchor and the image of Hector's signature.
   
   
4. Delete.
5.  Save.
   [hector20-Lastname-Firstname.htm]
   

6. Switch to your browser and view the page.
   The signature image is still there, floating at the right, but the H1 text is gone.

Center Image on Page

To center an image, you need to center its container, often a P or DIV tag. But first you need to remove some styling you added earlier.

If you wanted all H1 headings to be centered, you would create a declaration in an external style sheet for that.

1. Edit the IMG tag for the signature to remove the STYLE attribute which is making it float. 
   
2. Add a STYLE attribute to the H1 tag to center its contents:
   <h1 style="text-align:center;"><img src="HTML/hchavez-transparent.gif" height="43" width="206"></h1>

   About the cascade: The style that floats the image would override any alignment from any other styles. So the floating has tobe removed so that the paragraph alignment will center the image.

3.  Save.
   [hector20-Lastname-Firstname.htm]
    
4. Switch to your browser and view the page.
   The signature image is centered.

Create External Style Sheet

You are going to move the current internal styles to a separate external style sheet.

1. In the source code for hector20-Lastname-Firstname.htm, copy the lines between the opening and closing STYLE tags.
2. Open a new copy of Notepad.
   A new blank document is showing. This will become your external style sheet.
3. With the cursor at the top of the blank page, Paste.

4.  Save as hchavez-Lastname-Firstname.css to the same folder on your Class disk as the various versions of Hector's page. Change the Lastname-Firstname part to your own name, of course.

   An external style sheet does NOT have a BODY tag or an HTML tag or a HEAD section. Adding extra parts will usually keep the style sheet from being used.

External Style Sheet: H2 - font-family, color, text-align

It is a common design practice to use a sans-serif font for headings and a serif font for text, or the other way around. You will find different recommendations about which type is best for body text and for headings. The current recommendations lean toward using sans-serif fonts for quantities of text on screen but to use serif fonts for printed material. Your browser defaults probably do not follow this recommendation!

Arial and Calibri are sans-serif fonts. The letters in these fonts do not have the little extra pieces like Times New Roman and Georgia use, which are serif fonts.

The browser default style for an H2 heading is usually larger and bolder than regular text. You will add some formatting to that using an external style sheet.

1. Edit the external style sheet that you just saved to add a style for H2 elements below the existing style. The style has the following features:
   • centered
   • text color is green
   • font is Tahoma, Trebuchet MS, Arial, or sans-serif
   h2 {
       text-align:center;
       color:green;
       font-family:Tahoma,'Trebuchet MS', Arial, sans-serif;
   }

2.  Save.
   [hchavez-Lastname-Firstname.css]
   

3. Switch to your browser and view hector20-Lastname-Firstname.htm
   Nothing has changed! Whoops. You have to add a LINK to the HEAD of the page.

4. Switch to the editor window that shows  hector20-Lastname-Firstname.htm.

5. Edit the HEAD section to include the following:
   (Be sure to use your own name!)
   <link rel="stylesheet" href="hchavez-Lastname-Firstname.css" type="text/css">
   

6. Delete the STYLE section since you moved it to the external style sheet.

7.  Save.
   [hector20-Lastname-Firstname.htm]

8. Switch to your browser and view hector20-Lastname-Firstname.htm
   The H2 heading updated to use the new style. Nothing else changed because you copied the original styles to the external style sheet.

Problem: Part or all of the styles are not used

Possible causes:

• Failed to LINK an external style sheet
• Mistyped the LINK code.
• External style sheet was moved or renamed.
• Same errors as were mentioned about internal style sheets
  • Punctuation of styles - colons, semicolons, quotes, parentheses, and brackets.
  • Spelling of the name of attributes and values, especially font and color.
  • Spelling and punctuation of class in the tag where you wanted to apply it.
  • Did you actually create the style named in the tag?
  • Did you apply the correct class to the tag?

External Style Sheet: H3 - font-family, color

Browsers have default settings for the headings - H1, H2, H3, H4, H5, H6.  They are sized relative to the default browser text size. When you format the headings, these default sizes still apply unless you apply a particular font size.

1. Switch to the Notepad window showing the CSS file, your external style sheet.
   

2. Add a style for H3 with the same color and font-family that you used for H2.
   Do not center this element.

   h3 {
       color:green;
       font-family:Tahoma,'Trebuchet MS', Arial, sans-serif;
   }

3.  Save.
   [hchavez-Lastname-Firstname.css]

4. Switch to your browser and Refresh.

5. Scroll to see all of hector20-Lastname-Firstname.htm
   All the H3 headings updated to use the new style.  That was easier than formatting them each separately, for sure!

External Style Sheet: H4, P, Class hobby

The subheadings under My Hobbies are in term/description form. That's not what those tags are really for. We used them just to illustrate one of the types of list. What we really need is a couple of styles that will create a new look.

1. Switch to your text editor to edit hector20-Lastname-Firstname.htm.

2. Edit the list under My Hobbies so that the subtitles, like Travel and Fishing are H4 tags.

3. Remove the <dl> and </dl> tags.

4. Change the DT tags to H4.
   Don't forget to edit both the opening and the closing tags! <dt> becomes <h4> and </dt> becomes </h4>.

5. Similarly, change the DD tags to P.

6.  Save.
   [hector20-Lastname-Firstname.htm]

7. Switch to your browser and Refresh.
   The subtitles are shown as bold, using the default font.

8. Switch to your text editor to edit the external style sheet, hchavez-Lastname-Firstname.css.
   

9. Add a new style for H4 tags that sets the font-family to 'Trebuchet MS', Arial, sans-serif and the font size to large.

   h4 {
       font-family:'Trebuchet MS', Arial, sans-serif;
       font-size: large;
   }
10. Add a new style for P tags that sets the font-family to Calibri, Arial, sans-serif.
    p {
        font-family:Calibri, Arial, sans-serif;
    }

11. Add a new class named hobby which sets the right margin at 100px and justifies the text.

    .hobby {
        margin-right:100px;
        text-align:justify;
    }

12.  Save.
    [hchavez-Lastname-Firstname.css]

13. Switch to your text editor to edit hector20-Lastname-Firstname.htm.

14. Edit the P tags in the Hobbies list to use the new class, hobby.

    <p class="hobby">

15.  Save.
    [hector20-Lastname-Firstname.htm]

16. Switch to your browser and Refresh.
    You may need to make the window narrower to see the effect of using the class 'hobby'.

17. Scroll to see all of hector20-Lastname-Firstname.htm.
    All of the paragraphs updated to use the new font! The Hobbies list is indented from the right. Sweet!!

Bold and Italic

Most browsers will render the logical tags <strong> and <em> the same as the tags <b> and <i>, bold and italic. But text readers use vocal emphasis for STRONG and EM but may not for B and I tagged text.

[Remember that your code may wrap differently in your editor and your page may wrap differently in your browser.]

1. In the section My Job, find the name of the newsletter, Here and There.

2. Wrap the name with both STRONG and EM tags.
   Be sure to get the closing tags in the correct order.
   
   <strong><em>Here and There</em></strong>
3. In the My Family section, surround the name Carla with B tags.
4. Repeat for the names Ricardo and Rosa.
   
5. Select the phrase in parentheses  (our soccer star!)  and surround it with I tags
   
6. Repeat for the phrase  (our ballerina) 
   <h3>My Family</h3>
   
   <p>I married my beautiful <b>Carla</b> 11 years ago. We have two children - <a
   href="family/ricardo/index.html"><b>Ricardo</b></a> who is 10 years old <i>(our soccer star!)</i> and <b>Rosa</b> who is 7 years old <i>(our ballerina)</i>.</p>
   <p style="text-align:center"><img src="HTML/carla2.jpg" width="170" height="212" alt="Photo: Carla and Hector Chavez" title="Our anniversary trip to the World Cup! Such fun!!"> <img src="HTML/ricardo2.jpg" width="170" height="212" alt="Photo: Ricardo at soccer" title="Ricardo waiting to get into the game... at last"> <img src="HTML/rosa2.jpg" width="284" height="213" alt="Photo: Rosa at ballet" title="Rosa worked so hard to get flexible!"></p>  
7. 
   

    Save.
   [hector20-Lastname-Firstname.htm]

8. Switch back to your browser and look for the changes.
   

Downloadable Font

CSS3 has a new feature, @font-face, which allows the browser to download a font to use on the page. BUT, you must have permission from the copyright holder of the font to share the font in this way. Most of the fonts on your computer came with programs that you or your school or company paid for. That gave you the right to use those fonts in those programs. It did not give you the right to give those fonts away over the Internet.

Google Web Fonts and several other sites offer free fonts. You could use a free font for special effects on your web pages but to make sure your viewers see that special font, you must upload it to your web space and then use the @font-face feature to send out the font from your web server.

Instead, for this topic, you will use Google Web Fonts. That way we won't have to worry about whether you have a place to upload a font!

Be careful to include back-up fonts in your font-family in case something goes wrong and the viewer's browser does not get to use your special font. Glitches in the process seem to be common!

1. Click this link Google Web Fonts to open the site in your browser.

2. Type Comments & Suggestions in place of whatever text shows in the first example.

   This is the text that you will format with a font from this site. The default text may not show the ampersand, which is important in this heading.

3. Click the button Apply to All.

4. Scroll through several fonts and see the inventiveness of font designers.
   How many different shapes for an ampersand did you see?
   Do you find it hard to pick out favorites? 

   Suggestion: Use your mouse scroll wheel, if you have one, to scroll the previews.

   It can take a LONG time to view all of the fonts. There were 804 when I took the screen shot.[June 2016]

   Tips: You can search for a name, if you already know one. Or, choose a category or another feature to shorten the list.

   Now you will use one of these lovely fonts! It takes two steps. You will have to add a LINK tag to the HEAD and then create a style that uses the font.
   

5. In the Search box, type swash.
   The previews automatically change to show only fonts with 'Swash' in the name.
   Berkshire Swash has a nice look with a fancy ampersand, &.
   

   Problem: No Berkshire Swash found
   Solution: Are the filters off? If not, Clear Filters.
   If they are, use another font with an interesting look. Your instructor may have a preference.

6. 

   In the preview for Berkshire Swash, click on Bershire Swash.
   A page opens that displays all of the characters.
   The directions for using this font appear.

7. Click on SELECT THIS FONT.
   A popup at the bottom of the window shows that one font has been selected.
   

8. Click on 1 Family Selected.
   A popup shows on top of the page with code and directions on how to use the code.
9. Select the code for the LINK and copy.

10. Switch to your text editor to the source code for Hector's page.

11. LINK code: In the HEAD section paste the code you just copied.
    This code tells the browser where to go to find the font named Berkshire Swash.
    

    Notice that there is a + where there would usually be a space in the font name. This is important!

    The same code will work for any of Google's fonts if you change the font name.

12. Edit the H3 tag that contains the text "Comments and Suggestions" to include an ampersand &amp; instead of the word 'and'.
    If you just type &, your browser might figure out what you meant or it might get very confused. It is not worth the risk! Always use HTML code for characters that are used in scripting!
    

13. Add the class to the H3 tag at the bottom of Hector's page:
    <h3 class="comment">Comments &amp; Suggestions</h3>

14.  Save.
    [hector20-Lastname-Firstname.htm]

15. Switch to view the external style sheet in your text editor.
16. New Class for H3 only: Add to the external style sheet a class that applies only to H3 elements and uses the new font. You must also include other fonts in the font-family in case something goes wrong with your code or the font's web server.
    h3.comment {font-family:'Berkshire Swash','Britannic Bold', cursive;}

    The single quotes around the font names with spaces are very important, too!

    Usually you want to choose similar fonts to list in the font-family. Britannic Bold is not much like Berkshire Swash. This time we want to be able to tell easily if the download process worked.

17. Switch to the browser and Refresh.
    What do you see? Different browsers/versions may show different results!

    Examples:

    IE: Used the downloaded the font at normal font weight instead of the Bold style that is part of the default H3 definition. Versions of Internet Explorer before IE11 fail to download the font.
     
    

    Chrome: Used the downloaded font at normal font weight
     
     

    Firefox: Using downloaded font at Bold font weight from H3 default style.
     
    

    Perhaps we should have included a font-weight property to override the default H3 styling. <sigh>