project 03 creating web pages with links, images, and formatted text - tags and attributes
Post on 12-Jun-2015
423 Views
Preview:
DESCRIPTION
TRANSCRIPT
CREATING WEB PAGES WITH LINKS, IMAGES, AND FORMATTED TEXT
Project 03 – Tags and Attributes
Body
<body>...</body> Defines the start and end of a Web page
alink="color" Defines the color of an active link
background="url" Identifies the image to be sued as a background
bgcolor="color" Sets the document's background color
link="color" Defines the color of links not yet visited
vlink="color" Defines the color of visited links
Link Color Attributes for <Body> TagAttribute Function
linkNormal linkControls the color of a normal unvisited link and/or link without mouse pointer pointing to itDefault color usually is blue
vlinkVisited linkControls the color of a link that has been clicked or visitedDefault color usually is green or purple
alinkActive linkControls the color of a link immediately after the mouse clicks the hyperlinkDefault color usually is green or red
Font
<font>...</font> Defines the appearance of enclosed text
size="value"Sets the font size in absolute terms (1 through 7) or as a relative value (e.g., +2)
color="color"
Sets the font color, can be a hexadecimal value (#rrggbb) or a word for a predefines color value (navy)
face="list"Identifies the font face; multiple entries should be separated by commas
point-size="value"Sets the point size of text for downloaded fonts
weight="value"Sets the weight of the font, ranging from 100 (lightest) to 900 (heaviest)
Font Attributes and ValuesAttribute Function
color="#xxxxxx"
Changes the font colorValue inside quotation marks is a six-digit color code or color name
face="fontname"
Changes the font face or typeValues inside quotation marks is the name of a font, such as Veranda or Arial; text appears using the default font if the font face is not specified
size="x"
Changes the font sizeValue inside quotation mark is a number that represents sizeValues can be an actual font size of 1 (smaller) to 7 (largest) or a relative font size, such as +2 or -1, which specifies a number of sizes larger or smaller than the preset font size
Anchor
<a>...</a>Anchor; creates a hyperlink or fragment identifier
charset="character set"
Specifies the character encoding of the linked resource
href="url"Hyperlink reference that specifies the target URL
name="text"Specifies a name for enclosed text, allowing it to be the target of a hyperlink
rel="relationship"Indicates the relationship going from the current page to the target
rev="relationship"Indicates the relationship going from the target to the current page
target="name"Defines the name of the window or frame in which the linked resource will display
<a> Tag Attributes and FunctionsAttributes
Functions
hrefSpecifies the URL of the linked page or file.
name Defines a name for the current anchor so it may be the target or destination of another link. Each anchor in a Web page must use a unique name.
rel
Indicates a forward relationship from the current document to the linked document. The value of the rel attribute is a link type, such as prev, next, index, or copyright. For example, the chapter5.htm Web page might include the tag, <a rel="next" href="chapter6.htm"> to indicate a link to the Web page for the next chapter, chapter6.htm
rev
Indicates a reverse (backward) relationship from the current document to the linked document. The value of the rev attribute is a link type, such as prev, next, index, or copyright. For example, the chapter5.htm Web page might include the tag, <a rel="prev" href="chapter4.htm"> to indicate a link to the Web page for the previous chapter, chapter4.htm
type
Specifies the content type (also known as media types or MIME types) of the linked page or file to help a browser determine if it can handle the resource type. Examples of content types include text/html, image/jpeg, video/quicktime, application/java, text/css, and text/javascript
Text Formatting Tags
HTML Tag Function
<b>...</b> Physical style tag that displays text as bold
<big>...</big> Increases the font size in comparison to the surrounding text
<blockquote>...</blockquote> Designates a long quotation; indents
margins on sections of text
<em>...</em> Logical style tag that displays text with emphasis (usually appears as italicized)
<i>...</i> Physical style tag that displays text as italicized
<pre>...</pre>
Sets enclosed text as preformatted material, meaning it preserves spaces and line breaks; often used for text in column format in another document pasted into HTML code
Text Formatting Tags
HTML Tag Function
<small>...</small> Decreases the font size in comparison to the surrounding text
<strong>...</strong> Logical style tag that displays text with strong emphasis (usually appears as bold)
<sub>...</sub> Displays text as subscript (below normal text)
<sup>...</sup> Displays text as superscript (above normal text)
<tt>...</tt> Displays text as teletype or monospace text
<u>...</u> Displays text as underlined
Bold
<b>...</b> Specifies text to display in bold no attributes
Bold
<bold>...</bold> Sets enclosed text to display in bold no attributes
Big
<big>...</big> Increases the size of the enclosed text to
a type size bigger than the surrounding text;
Exact display depends on the browser and default font
no attributes
Blockquote
<blockquote>...</blockquote> Sets enclosed text to display as a
quotation, indented on the right and left no attributes
Center
<center>...</center> Centers the enclosed text horizontally on
the page no attributes
Italics
<em>...</em> Indicates that the enclosed text
should be emphasized usually displays in italics no attributes
Italics
<i>...</i> Sets enclosed text to display in italics no attributes
Image<img>…</img> Inserts an image into the current Web page
align=”type”Defines image alignment in relation to the text or the page margin (top, middle, bottom, right, left)
alt=”text”
Provides a text description of an image if the browser cannot display the image; always should be used
border=”value”Sets the thickness of the border around the image to a value in pixels, default size is 3
height=”value”Sets the height of the image to a value in pixels; always should be used
src=”url”Specifies the URL of the image to be displayed; required
usemap=”url”Specifies the map of coordinates and links that defines the href within this image
width=”value”Sets the width of the I image to a value in pixels; always should be used
Quotation
<q>...</q> Sets enclosed text as a short quotation lang="option"
Defines the language in which the quotation will display
Small
<small>...</small> Sets enclosed text to display in a smaller
typeface no attributes
Strong
<strong>...</strong> Sets enclosed text to display with strong
emphasis usually displayed as bold text no attributes
Subscript
<sub>...</sub> Sets enclosed text to display in subscript no attributes
Superscript
<sup>...</sup> Sets enclosed text to display in
superscript no attributes
Teletype
<tt>...</tt> Formats the enclosed text in teletpye- or
computer-style monospace font no attributes
Underline
<u>...</u> Sets enclosed text to display with an
underline no attributes
top related