Tutorial 2 Review
Student Learning Outcomes:
1. Create a new web site
2. Change the appearance of page properties
3. Create a background color for the page
4. Save a Web site
5. Learn the functions of the common toolbar
6. Change the size of text
7. Discern which fonts to use on a Web page.
8. Check the document for spelling and grammer.
9. Create a list.
10. Insert a horizontal line.
11. Insert symbols.
12. Format text using the Font dialog box. .
Important Points:
1. Restore default toolbars - click task pane on the menu
bar, click reset workspace layout.
2. Save a file- click file on menu bar, click save.
3. Save as a. to a new location including the creation of
a new folder, b- new name, c-new title, d. different file type. Click file
on menu bar, click save as, You will see:
4. Setting page properties: right click the page, left click
page properties.
A. General Properties
You will see: What you type in the title will be contained
between the <title> and </title>, in the page description will be the
description meta tag <meta name=description content=" ">, in the page keywords
will be keywords meta tab <meta name= keywords content=" "> be sure to include
misspellings of key words so that common misspellings will still find your site.
The description and keywords meta tags are read by meta crawlers like goggle. In
the general tab you can also add a background sound.
B: Formatting Page: Click formatting tab: you will see:
Here you can add a background picture, chose the background color, text, and
hyperlinks.
1. To change back ground color: Click formatting tab, under colors, click
background list arrow, click more colors: You will see: Here you can
select and blend more than the default colors.
2. Click Custom: You will see:
C. Advance Properties. click advance properties tab: you
will see: Here you can set the top, left, bottom and right margins of the
page.
D. Custom Properties - click the custom tab. You will
see: Here you can work with system and user variables.
E. Language Properties: Click the language tab. You will see: Here you can
select the language that you are working with and the encoding.
5. Code and Design view: Click at the bottom of the page
the split tab. In the top pane you will see the code , in the bottom pane
you will see the design view. Everything you do in design view will be
reflected in code in the code window. Everything you do in the code window
will reflect in the design window.
6. Heading, CSS keyword and Point size.
| Heading |
CSS keyword |
Point Size |
| - |
xx-large |
36 |
| h1 |
x-large |
24 |
| h2 |
large |
18 |
| h3 |
medium |
14 |
| h4 |
small |
12 |
| h5 |
x-small |
10 |
| h6 |
xx-small |
8 |
7. Fonts.
a. Font is a particular design given to the appearance of text.
b. Font face is a particular type of font.
c. Font family is a group of variations on the same font face.
d. Five generic fonts
| Generic name |
Description |
Example |
| Serif |
Letters have strokes that finish the top or bottom of the letter
form |
Times New Roman |
| Sans serif |
Letter do not have finishing strokes |
Ariel |
| Monospace |
Fixed-width letters |
Courier New |
| Fantasy |
Decorative letters |
|
| Cursive |
Letters design to look like hand writing |
|
8. Creating a border around text and change border style, color, and width:
a. Select the text
b. Select the outside border list arrow from the common menu, then select
outside border.
You will see an outside border appear around the select text.
c. Select the text again, click format on the menu bar, and then click Borders
and Shading. You will see:
9. Colors - are a
combination of Red, Green, and Blue There are 216 web safe colors. For
3 number hexadecimal color codes click the following link.
http://html-color-codes.com/ To return to this window click the back
button on your browser.
10. Spelling - click view on the common toolbar, click
toolbars, click standard toolbar, click the spelling icon on the standard
toolbar. You will see:
11. Thesaurus - select the word, press shift-F7,
you will see:
12. Find and Replace text - Click the find button
on the standard toolbar. You will see: Here you can find a word in your
document.
a. Click the replace tab: you will see: Here you can find and replace text in
your document.
b. Click the HTML tags tab. You will see: Here you can find html tags in
your document and replace them.
13. To copy and paste - Select the text, right click
and click copy or Ctrl-C or cut. Place your cursor where you want to
copy the text to, right click and click paste or Ctrl-V.
14. View page in browser - after saving the file, tap the F12
key.
15. List -
a. A bulleted list is started with a dot or some other symbol, also
called unordered list can be customized <ul>.
b. A numbered list is preceded by numbers, letters, or roman numerals
also called ordered list <ol>
c. . List item Item on the list <li>
d. Definition list is used to format defined terms and their definitions.
e. Defined term is the term being explained.
f. A nested list is one that is contained within another list.
g. Multi Leveled or outline list contains more than one nested list.
16. Create bulleted List: select the text you want.
On common toolbar click the bullets button.
17. Modify bulleted list: Select the list, Click Format on the
menu bar, click bullets and numbering. You will see:
a. Bullets and Numbering, Pictures, here you select pictures
for bullets or use CSS.
b. Bullets and Numbering, Plain Here you can select the plain
bullets.
c. Bullets and Numbering, Numbers Here you can select the type
of numbering and what digit to start from:
18. Using the Font Dialog Box. Select the
text, select format from the common toolbar, select Font: you will see:
Here you can change the font, style, size, color and effects.
a. Font, Character spacing.
19. The line break tag <br /> just move down one line.
20. Horizontal Line From the toolbox in the upper right hand
corner click <hr>. Then double click the horizonal line in design view.
You will see: here you can set the width in percent or pixels, height in
pixels, alignment, color and solid line.
21. Insert a symbol: Select insert from menu bar, select
symbol, you will see: Here you can select symbols from different font
families, and subsets.
22. Comment tag - <!--- text here--->