1. HTML5 Level II Session II
Chapter 13 - How to Work with Fonts and Printing
Hello.
My name is Carl Burnett and I’ll be your instructor for this session.
In Session 2, we will cover Chapter 12 - How to Format Web Pages for Printing.

2. Chapter Outline How to Embed Fonts in a Web Page
Formatting Web Pages for Printing
Formatting A Two-Column Web Page with Special Formatting for Printing
In this chapter we will cover how to format a web page for printing and how to format a a Two-Column Web Page for printing with Special Formatting.
9/17/2018
Copyright © Carl M. Burnett

3. Heading with Font Imported with CSS3
The CSS for embedding a font
@font-face {
font-family: Murach;
src: url("HARNGTON.TTF"); }
The CSS for applying the font to an HTML element
#booktitle {
font-family: Murach, sans-serif; }
The HTML for the element that the font is applied to
<h1 id="booktitle">Murach Books</h1>
9/17/2018
Copyright © Carl M. Burnett

4. Where to Find the Fonts On a Windows system - C:\Windows\Fonts
On a Mac OS system - System\Library\Fonts
9/17/2018
Copyright © Carl M. Burnett

5. How to Import and Apply a Font
Copy font family into a folder for your web site.
In CSS page code rule set for selector.
Use font-family property for name.
Use src Property to locate the font file.
In HTML element use name as value for font-family property.
List one or more other font-families in case the browser doesn’t support the selector.
9/17/2018
Copyright © Carl M. Burnett

6. Fonts Free Service 263 Font Families https://www.google.com/fonts
9/17/2018
Copyright © Carl M. Burnett

7. Heading that uses Google Web Font
The CSS for importing a Google Web Font
<link href="
rel="stylesheet">
The CSS for applying the font to an HTML element
#booktitle { font-family: "Sorts Mill Goudy", serif; }
The HTML for the element the font is applied to
<h1 id="booktitle">Murach Books</h1>
9/17/2018
Copyright © Carl M. Burnett

8. Adobe Typekit Editor Free account limited to two fonts
9/17/2018
Copyright © Carl M. Burnett

9. How to apply a Typekit font to an element
Code the class attribute with its value set to the name that was displayed in the upper-left corner of the Typekit Editor.
The script elements for importing Typekit fonts
<script src="
<script>try{Typekit.load();}catch(e){}</script>
The HTML for an element that a font is applied to
<h1 class="tk-blambot-pro">Murach Books</h1>
9/17/2018
Copyright © Carl M. Burnett

10. Link Elements for Screen and Print Style Sheets
<link rel="stylesheet" href="styles/main.css">
<link rel="stylesheet" href="styles/print.css“ media="print">
To define the CSS rules for printing a web page you use an external CSS file to define these rules.
Here is a example of the link to an external css file to print a web page. Notice that there is a special attribute “media” with a “print” value at the end of the CSS link.
This alerts the browser to use the CSS code that uses this attribute and value.
In this example the browser renders the web page and the last style sheet, the print.css, is the print style sheet. The css rules in the print.css sytlesheet determine the placement of the items and override the display styles.
9/17/2018
Copyright © Carl M. Burnett

11. Rule Set for Printing Embedded Within a Screen Style Sheet
@media print {
body {
font-family: "Times New Roman", Times, serif;
background-color: white; }
Style Element for Printing in the Head Section of the HTML
<style media="print">
font-family: "Times New Roman", Times, serif;
background-color: white;
</style>
I this example, the font family is replaced and the background color is returned to white.
Listed here is a style elements placed in the head section of the HTML page.
9/17/2018
Copyright © Carl M. Burnett

12. Recommendations for formatting printed pages
Change the text color to black and the background color to white.
Change text other than headings to a serif font to make the text easier to read when printed.
Use a base font size that’s easy to read when printed.
Remove site navigation since it can’t be used from a printed page.
Remove as many images as possible, particularly Flash and animated images.
There are standard recommendations that should be used when formatting web pages for printing.
First - Change the text color to black and the background color to white.
Also, Change text other than headings to a serif font to make the text easier to read when printed.
Use a base font size that’s easy to read when printed.
Remove site navigation if possible, since it can’t be used in a printed page.
Remove as many images as possible, especially Flash and animated images.
9/17/2018
Copyright © Carl M. Burnett

13. CSS Properties for Printing
Property
Description
display
block, inline, none
visibility
visible, hidden
page-break-before
always, auto, avoid
page-break-after
page-break-inside
auto, avoid
orphans
An integer to determine minimum number of lines within element that can be printed at the bottom
widows
An integer to determine minimum number of lines within element that can be printed at the next page
Listed here are the common CSS properties that can be specified for printing a web page.
If you don’t want an element to be included when the web page when it is printed, set the display property to none.
If you don’t want an element to be included when the web page when it is printed, but you still want to allocate space for this element set the visibility property to hidden.
9/17/2018
Copyright © Carl M. Burnett

14. CSS that Uses Two of the Properties for Printing
img { display: none; }
h1, h2, h3 { page-break-after: avoid; }
Listed here is the CSS that uses two properties for printing.
9/17/2018
Copyright © Carl M. Burnett

15. The CSS for the printed web page
body {
font-family: "Times New Roman", Times, serif;
width: auto; }
h1, h2 {
font-family: Verdana, Arial, Helvetica, sans-serif;
/* the styles for the navigation bar */
#nav_bar {
display: none;
/* the styles for the sidebar */
aside {
/* the styles for the article */
article {
border: none;
Example Web Page
Example Printed Page
Listed here is the CSS for printing a web page.
Here’s what the page looks like.
In this example the navigation bar and aside aren’t printed and the headings, text, and borders are set to black.
The width of the article is wider and the right border is removed.
Additionally, the font for the text has been changed to a serif font so it’s easier to read.
Here’s an example of the printed page.
9/17/2018
Copyright © Carl M. Burnett

16. How to Preview and Print a Web Page
To display a page in Print Preview mode, choose the FilePrint Preview command from the browser’s menu.
To print a page, click the Print button in the browser’s toolbar, choose the FilePrint command from the menu, or click the Print button in Print Preview mode.
Another option is to include a Print button on a page and use JavaScript to print the page when the button is clicked.
To display a page in Print Preview mode, choose the FilePrint Preview command from the browser’s menu.
To print a page, click the Print button in the browser’s toolbar, choose the FilePrint command from the menu, or click the Print button in Print Preview mode.
Another option is to include a Print button on a page and use JavaScript to print the page when the button is clicked.
9/17/2018
Copyright © Carl M. Burnett

17. Student Exercise 2
Complete Exercise 13-1 and 2 on page 473 using Dreamweaver.
Upload your HTML pages and CSS files to the live site to preview.
Now it’s your turn.
Please complete Exercise 12-1 on page 413.
When you have completed this exercise restart the video.
9/17/2018
Copyright © Carl M. Burnett

18. Class Review How to Embed Fonts in a Web Page
Skills for Formatting Printed Web Pages
A Two-Column Web Page with Special Formatting for Printing
Next Chapter 15 - How to Use JavaScript and
jQuery to Enhance Your Web Pages
Welcome back.
This completes Chapter 12 How to Format Web Pages for Printing.
Please complete the post-course assessment at the end of this screencast.
The next chapter we will cover is Chapter 13 - How to Use JavaScript to Enhance Your Web Pages
Thank you.
9/17/2018
Copyright © Carl M. Burnett