Project 03 Creating Web Pages with Links, Images, and Formatted Text - Tags and Attributes

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

... 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

... 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

... Logical style tag that displays text with emphasis (usually appears as italicized)

... 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

... Decreases the font size in comparison to the surrounding text

... Logical style tag that displays text with strong emphasis (usually appears as bold)

... Displays text as subscript (below normal text)

... Displays text as superscript (above normal text)

<tt>...</tt> Displays text as teletype or monospace text

... Displays text as underlined

Bold

... 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

... Indicates that the enclosed text

should be emphasized usually displays in italics no attributes

Italics

... 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

... Sets enclosed text to display in a smaller

typeface no attributes

Strong

... Sets enclosed text to display with strong

emphasis usually displayed as bold text no attributes

Subscript

... Sets enclosed text to display in subscript no attributes

Superscript

... 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

... Sets enclosed text to display with an

underline no attributes

Project 03 Creating Web Pages with Links, Images, and Formatted Text - Tags and Attributes

Education

Transcript of Project 03 Creating Web Pages with Links, Images, and Formatted Text - Tags and Attributes