Embed Size (px)
Citation preview
Unit 1
Changing the
Appearance of
Text
TITLECORNELL NOTES
TOPIC: NOTES:
Summary:
HTMLHypertext Markup Language
1st and last tag on a page
Tags < > Tags are placed in Angle Brackets
Attributes Adding color or style to the font tag.
TITLECORNELL NOTES
TOPIC: NOTES:
Summary:
index The name given a home page.
<title> Give the web page a title that describes its contents.
</title> The title tag must be closed in order for the body of the web page to display.
<body>You must place the BODY tags around the contents of a Web Page.
<font>Using an attribute you can change the style and color of the font. It may be necessary to place the attributes in “” (quotations) for it to display.
TITLECORNELL NOTES
TOPIC: NOTES:
Summary:
Identifies a paragraph on the web page
<br> Typed in front of text you wish to appear on its own line.
Creates blank space. This must be typed for each blank space you want to add. NO ANGLE BRACKETS
<h1-h6>Type the <h?> tag in front of the text you want to make a heading. Replace the ? With a number 1-6 to create different size headings.
<p>
TITLECORNELL NOTES
TOPIC: NOTES:
Name: Date:08/06/2009Period:
Summary:
Aligns text, images, headings, paragraphs. Align is an attribute and must be added to a tag with the way you want to align the text, image, heading, or paragraph. You can align left, right and center.
<center> Type center in front of the text, heading, image you want to center.
align
</center> Type this tag after the text, image, heading you want centered or the entire page of information will center on the web page.
TITLECORNELL NOTES
TOPIC: NOTES:
Name: Date:08/06/2009Period:
Summary:
Type this where you want to add a comment or an image, then press the Spacebar. Type the comment and press the spacebar again.
--> Type this to complete the comment.
<!--
TITLECORNELL NOTES
TOPIC: NOTES:
Name: Date:08/10/2009Period:
Summary:
Bolds Text
Underline Text
<b> </b>
<i> </i> Italicize Text
<u> </u>
<big> </big> Type in front of text you want to enlarge
<small> </small> Type in front of text you want to reduce
<strike> </strike> Type in front of text you want to strike out.
TITLECORNELL NOTES
TOPIC: NOTES:
Name: Date:08/10/2009Period:
Summary:
Font Attributes
Face
Color
<font face=“Old English Text MT, Arial”>
This changes the font style from the default style of text. By adding a comma, a space, and typing a second style font you have provided a second font choice. Doing this means you have provided a second choice of font in case your first font choice is not available on a reader’s computer. One of the fonts you specify should be a common font such as arial to increase the probability that your web page will display one of your choices.
<font color=blue face=comic sans ms>
TITLECORNELL NOTES
TOPIC: NOTES:
Name: Date:08/10/2009Period:
Summary:
Font Size
Changing the size of text can enhance the appearance of your web page.
You can change the size of individual text to create effects.
<basefont size=“#”>
Replace the # with a number from 1 to 7. The smallest font size is 1; the largest font size is 7. Specifying font size will not affect the size of your headings.
Try this:
<font size =1>This is font size one.</font><font size =2>This is font size two.</font><font size =3>This is font size three.</font><font size =4>This is font size four.</font><font size =5>This is font size five.</font><font size =6>This is font size six.</font><font size =7>This is font size seven.</font>
TITLECORNELL NOTES
TOPIC: NOTES:
Name: Date:08/10/2009Period:
Summary:
<body text =yellow>
The web browser displays all the text on the Web page in the color you specified.
<font color=“?”> Type this in front of the text you want to change. Replace the ? With the name or code for the color you want to use. </font>
Try this:<font color=red>This text is red.</font><font color=blue>This text is blue.</font><font color=green>This text is green.</font><font color=black>This text is black.</font><font color=yellow>This text is yellow.</font>
Font Attributes
Color
TITLECORNELL NOTES
TOPIC: NOTES:
Name: Date:08/10/2009Period:
Summary:
<body bgcolor=yellow>
The web browser displays the background color you specified.
<body bgcolor=“?”> Type this in the body tag. Replace the ? With the name or code for the color you want to use as a background color.
bgcolor
TITLECORNELL NOTES
TOPIC: NOTES:
Name: Date:08/10/2009Period:
Summary:
Type <ol> before the list.
Type <li> in front of each item in the list.
•If you want to continue an item in the list on the next line without creating a new list item, use the <br> tag.
Type </ol> after the list.
Try this: Table of Contents<ol><li>Introduction<li> Company History<li> Mission Statement <li>Products offered <li>Services offered<li>Future Goals<li>Conclusion</ol>
Creating Lists
Ordered List
TITLECORNELL NOTES
TOPIC: NOTES:
Name: Date:08/10/2009Period:
Summary:
Type <ul> before the list.
Type <li> in front of each item in the list.
•If you want to continue an item in the list on the next line without creating a new list item, use the <br> tag.
Type </ul> after the list.
Try this: Most Popular Types of Pasta<ul><li>Cannelloni<li>Lasagna<li>Linguini<li>Manicotti <li>Ravioli<li>Spaghetti</ul>
Creating Lists
Unordered List
TITLECORNELL NOTES
TOPIC: NOTES:
Name: Date:08/10/2009Period:
Summary:
In the <ul> tag, type type-? Replacing the ? With the bullet style you want to use:
Circle
Disc
Square
<ul type=square>
The web browser displays the list with the type of bullet style you specified. Try the different styles.
Creating Lists
Unordered List
Changing the bullet style
TITLECORNELL NOTES
TOPIC: NOTES:
Name: Date:08/10/2009Period:
Summary:
Try this: Table of Contents<ol><li>Introduction
<ol type=a><li>Who are
we?<li>Brief
company history<li>How we
can help your business</ol><li> Company History<li> Mission Statement <li>Products offered <li>Services offered<li>Future Goals<li>Conclusion</ol>
Nested List
TITLECORNELL NOTES
TOPIC: NOTES:
Name: Date:08/10/2009Period:
Summary:
You can create a definition list to display terms and their definitions. This type of list is ideal for a glossory.
<dl> Typed before the list<dt> Type in front of each term in the list.<dd>Type in front of each definition in the list.
Definition List
DL
DT
DD
TITLECORNELL NOTES
TOPIC: NOTES:
Name: Date:08/10/2009Period:
Summary:
You can indent paragraphs by typing a <ul> in front of the text you want to indent. At the end of the paragraph type</ul>.
Type <blockquote> in front of the text you want to display as a block quote. Type </blockquote> after the text you want to display as a block quote.
Indenting Paragraphs
Blockquote
