creating web pages with links, images, and formatted text information presented by s. cox
TRANSCRIPT
![Page 1: Creating Web Pages with Links, Images, and Formatted Text Information Presented by S. Cox](https://reader036.vdocuments.site/reader036/viewer/2022082820/56649e905503460f94b9490b/html5/thumbnails/1.jpg)
Creating Web Pages with Links, Images, and Formatted Text
Information
Presented by S. Cox
![Page 2: Creating Web Pages with Links, Images, and Formatted Text Information Presented by S. Cox](https://reader036.vdocuments.site/reader036/viewer/2022082820/56649e905503460f94b9490b/html5/thumbnails/2.jpg)
Linking
• To another web page within the same web site• To a web page in another web site• Within the same web page• To an e-mail address
2
![Page 3: Creating Web Pages with Links, Images, and Formatted Text Information Presented by S. Cox](https://reader036.vdocuments.site/reader036/viewer/2022082820/56649e905503460f94b9490b/html5/thumbnails/3.jpg)
Link Attributes
• If you want to change the colors of text links or image link borders to override the browser defaults….
• <body link=“color” vlink=“color” alink=“color”>
3
![Page 4: Creating Web Pages with Links, Images, and Formatted Text Information Presented by S. Cox](https://reader036.vdocuments.site/reader036/viewer/2022082820/56649e905503460f94b9490b/html5/thumbnails/4.jpg)
Link AttributesAttribute Function
link •Normal link•Controls the color of a normal unvisited link and/or link without mouse pointer pointing to it•Default color usually is blue
vlink •Visited link•Controls the color of a link that has been clicked or visited•Default color is usually purple or green
alink •Active link•Controls the color of a link immediately after the mouse clicks the hyperlink•Default color is usually green or red
4
![Page 5: Creating Web Pages with Links, Images, and Formatted Text Information Presented by S. Cox](https://reader036.vdocuments.site/reader036/viewer/2022082820/56649e905503460f94b9490b/html5/thumbnails/5.jpg)
Linking
• The <a> and </a> tags are used to create links on a web page…also called the anchor tag because it is used to create anchors for links
• Example of a link to a web page:<a href=“URL”>linktext</a>
• Example of an Email link:<a href=“mailto:[email protected]”>linktext</a>– mailto – used to indicate it is an email link
• Target – or name location in the same file5
![Page 6: Creating Web Pages with Links, Images, and Formatted Text Information Presented by S. Cox](https://reader036.vdocuments.site/reader036/viewer/2022082820/56649e905503460f94b9490b/html5/thumbnails/6.jpg)
Linking
• Adding links within a Web page– <a name=“targetname”></a> goes around the
text that you want to be the link– <a href=“#targetname”> goes in the location you
want the link to “jump” to within the same page
6
![Page 7: Creating Web Pages with Links, Images, and Formatted Text Information Presented by S. Cox](https://reader036.vdocuments.site/reader036/viewer/2022082820/56649e905503460f94b9490b/html5/thumbnails/7.jpg)
<a> Tag Attributes and FunctionsAttribute Function
href Specifies 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 on 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.
rev Indicates a reverse 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.
type specifies the content type of the linked page or file to help a browser determine if it can handle the resource type.
7
![Page 8: Creating Web Pages with Links, Images, and Formatted Text Information Presented by S. Cox](https://reader036.vdocuments.site/reader036/viewer/2022082820/56649e905503460f94b9490b/html5/thumbnails/8.jpg)
Using Absolute and Relative Paths
• Path – describes the location (folder or external web site) where the files can be found
• Absolute path – specifies the exact address for the file to which you are linking or displaying a graphic
• Relative paths – specify the location of a file, relative to the location of the file that is currently in use…utilizes the double period (..)
8
![Page 9: Creating Web Pages with Links, Images, and Formatted Text Information Presented by S. Cox](https://reader036.vdocuments.site/reader036/viewer/2022082820/56649e905503460f94b9490b/html5/thumbnails/9.jpg)
Font Attributes and ValuesAttribute and Value Function
color=“#xxsxxx” •Changes the font color•Value inside quotation marks is a six-digit color code or color name
Face=“fontname” •Changes the font face or type•Value inside quotation marks is the name of a font, such as Veranda, or Arial
Size=“x” •Changes the font size•Value inside quotation marks is a number that represents size•Values can be an actual font size of 1 (smallest) to 7 (largest) or a relative font size, such as +2 or -1
9
![Page 10: Creating Web Pages with Links, Images, and Formatted Text Information Presented by S. Cox](https://reader036.vdocuments.site/reader036/viewer/2022082820/56649e905503460f94b9490b/html5/thumbnails/10.jpg)
Text Formatting
• Logical style tags allow a browser to interpret the tag based on browser settings, relative to other text on a web page
• Physical style tags specify a particular font change that is interpreted strictly by all browsers
10
![Page 11: Creating Web Pages with Links, Images, and Formatted Text Information Presented by S. Cox](https://reader036.vdocuments.site/reader036/viewer/2022082820/56649e905503460f94b9490b/html5/thumbnails/11.jpg)
Text Formatting TagsHTML 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 (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
<small></small> Decreases the font size in comparison to the surrounding text
<strong></strong> Logical style tag that displays text with stong emphasis (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
11
![Page 12: Creating Web Pages with Links, Images, and Formatted Text Information Presented by S. Cox](https://reader036.vdocuments.site/reader036/viewer/2022082820/56649e905503460f94b9490b/html5/thumbnails/12.jpg)
Adding Images with Wrapped Text
• Using the align=“left” or align=“right” attribute in an image tag will allow the text to wrap around the image
• To control space around the image, use the hspace=“x” (horizontal space) or vspace=“x” (vertical space) attribute in the image tag…the x indicates the number in pixels
12
![Page 13: Creating Web Pages with Links, Images, and Formatted Text Information Presented by S. Cox](https://reader036.vdocuments.site/reader036/viewer/2022082820/56649e905503460f94b9490b/html5/thumbnails/13.jpg)
Using Thumbnail Images
• A thumbnail image is a smaller version of the image itself
• The thumbnail is used as a link that, when clicked, will load the full-sized image
• The HTML code to add a thumbnail image:<a href=“largeimage.gif”><img src=“thumbnail.gif” /></a>
13