34
HTML Concepts and Techniques Fifth Edition Chapter 3 Creating Web Pages with Links, Images, and Formatted Text

HTML Concepts and Techniques Fifth Edition Chapter 3 Creating Web Pages with Links, Images, and Formatted Text

Embed Size (px)

Citation preview

Page 1: HTML Concepts and Techniques Fifth Edition Chapter 3 Creating Web Pages with Links, Images, and Formatted Text

HTMLConcepts and Techniques

Fifth Edition

Chapter 3

Creating Web Pages with Links, Images, and Formatted Text

Page 2: HTML Concepts and Techniques Fifth Edition Chapter 3 Creating Web Pages with Links, Images, and Formatted Text

Chapter 3: Creating Web Pages with Links, Images, and Formatted Text 2

Chapter Objectives• Describe linking terms and definitions• Create a home page and enhance a Web page using

images• Align and add bold, italics, and color to text • Change the bullet type used in an unordered list• Add a text link to a Web page in the same Web site• Add an e-mail link• Use absolute and relative paths• Save and view an HTML file and test the links• Open an HTML file• Add an image with wrapped text

Page 3: HTML Concepts and Techniques Fifth Edition Chapter 3 Creating Web Pages with Links, Images, and Formatted Text

Chapter 3: Creating Web Pages with Links, Images, and Formatted Text 3

Chapter Objectives

• Add a text link to a Web page on another Web site

• Add links to targets within a Web page• Copy and paste HTML code• Add an image link to a Web page in the same

Web site

Page 4: HTML Concepts and Techniques Fifth Edition Chapter 3 Creating Web Pages with Links, Images, and Formatted Text

Plan Ahead

• Plan the Web site• Analyze the need• Choose the content for the Web page• Determine how the pages will link to one another• Establish what other links are necessary• Create the Web page and links• Test all Web pages within the Web site

Chapter 3: Creating Web Pages with Links, Images, and Formatted Text 4

Page 5: HTML Concepts and Techniques Fifth Edition Chapter 3 Creating Web Pages with Links, Images, and Formatted Text

Get Organized

• Go to your home directory (H:)• Double-click on the Web Dev or HTML directory that you

created.• Create Ch. 3 folder• All work you do today, put in the Ch3 folder.• Go to Public/HTML Stuff/Chapter03/ChapterFiles• There are 6 items in there. Copy and Paste these to your

Ch. 3 folder• Continue to separate work by chapters throughout the

remainder of this semester• NOW, read the Project – Pasta Divine Web Sit on pg.82

Project 3: Creating Web Pages with Links, Images, and Formatted Text 5

Page 6: HTML Concepts and Techniques Fifth Edition Chapter 3 Creating Web Pages with Links, Images, and Formatted Text

Links

• Text Links – – use descriptive words..not Click

here

– Underlined, different color text

– IE defaults

• Initial link – blue

• Visited link – purple

• Active link - varies

• Image Links – – above colors apply to borders

around images

• Moving a mouse pointer over a link causes it to change into a pointing hand.

• URL of the link appears on the status bar.

Project 3: Creating Web Pages with Links, Images, and Formatted Text 6

Page 7: HTML Concepts and Techniques Fifth Edition Chapter 3 Creating Web Pages with Links, Images, and Formatted Text

Links (pg. 86-89)

• To override the default colors for links…• <body link=“color” vlink=“color” alink=“color”>

– Link – Normal link (unvisited link)– Vlink – visited link (already been clicked)– Alink – Active link (color of link immediately after the

mouse clicks the hyperlink)

• Can link to – another web page on the same web site– another web page on a different web site– somewhere within the web page– Email address

Project 3: Creating Web Pages with Links, Images, and Formatted Text 7

Page 8: HTML Concepts and Techniques Fifth Edition Chapter 3 Creating Web Pages with Links, Images, and Formatted Text

Entering HTML Tags to Define the Web Page Structure

• Pull up one of your old projects (that validated correctly!)• Clean out all of the STUFF until it looks like the table on

the bottom of pg. 91.• Save this file as ‘structure.html’. • This will be your starting point for all future projects.• Some of you may have already created a template which

is fine. Just make sure it looks like pg. 91-92• The exception should be the !doctype statement that we

corrected upon validation…LEAVE IT ALONE…don’t attempt to make it match pg. 91.

Chapter 3: Creating Web Pages with Links, Images, and Formatted Text 8

Page 9: HTML Concepts and Techniques Fifth Edition Chapter 3 Creating Web Pages with Links, Images, and Formatted Text

Entering HTML Tags to Define the Web Page Structure

Chapter 3: Creating Web Pages with Links, Images, and Formatted Text 9

Page 10: HTML Concepts and Techniques Fifth Edition Chapter 3 Creating Web Pages with Links, Images, and Formatted Text

Chapter 3: Creating Web Pages with Links, Images, and Formatted Text 10

Adding an Image• Do bullet 1 on pg. 93 to add an image to your

document.

Page 11: HTML Concepts and Techniques Fifth Edition Chapter 3 Creating Web Pages with Links, Images, and Formatted Text

Chapter 3: Creating Web Pages with Links, Images, and Formatted Text 11

Adding a Left-Aligned Heading with a Font Color

• The most frequently used font attribute is size• Size can be 1-7, but 3 is the default.• Colors are the same as those for the background• Other attributes for the font tag

– Face=“fontname” – changes the font-type. If a browser can’t display the font requested, it will use its default font.

– Size=“x” – X may be an absolute size (1-7) or a relative size (+2, -1) to the last preset size.

• Headings are LEFT aligned by default, if you want center or right alignment, you must specify.

Page 12: HTML Concepts and Techniques Fifth Edition Chapter 3 Creating Web Pages with Links, Images, and Formatted Text

Chapter 3: Creating Web Pages with Links, Images, and Formatted Text 12

Adding a Left-Aligned Heading with a Font Color

Do #1 on pg. 95 – adding a heading with font color

Page 13: HTML Concepts and Techniques Fifth Edition Chapter 3 Creating Web Pages with Links, Images, and Formatted Text

Chapter 3: Creating Web Pages with Links, Images, and Formatted Text 13

Entering a Paragraph of Text• Enter the HTML code shown in Table 3–4 on

page 95 as the first paragraph in the HTML file. Press ENTER at the end of each line

• Continue to do pg. 97-98.• This will create another paragraph and a bulleted

list.• BE CAREFUL…sometimes code will work without

all tags being present..but it WILL NOT validate, neither will it pass my inspection.

• Make sure you save this file on your H: drive under Ch. 3 – name it pastadivine.html

Page 14: HTML Concepts and Techniques Fifth Edition Chapter 3 Creating Web Pages with Links, Images, and Formatted Text

Chapter 3: Creating Web Pages with Links, Images, and Formatted Text 14

This is what it will look like.

Page 15: HTML Concepts and Techniques Fifth Edition Chapter 3 Creating Web Pages with Links, Images, and Formatted Text

Chapter 3: Creating Web Pages with Links, Images, and Formatted Text 15

Adding a Text Link to Another Web Page within the Same Web Site

• Anchor tag - <a> & </a> - use to create anchors for links to another page in the same web site, to a web page in an external web site, within the same page, or for e-mail links. Example:– <a href=“URL”>linktext</a> where

• linktext is the phrase that appears on the web page• value for href is the URL of the linked page.

– See pg. 99, table 3-7 for attributes to the link <a> tag.

Page 16: HTML Concepts and Techniques Fifth Edition Chapter 3 Creating Web Pages with Links, Images, and Formatted Text

Chapter 3: Creating Web Pages with Links, Images, and Formatted Text 16

Adding a Text Link to Another Web Page within the Same Web Site and an email link

Do the steps on pg 100-101

Page 17: HTML Concepts and Techniques Fifth Edition Chapter 3 Creating Web Pages with Links, Images, and Formatted Text

Adding a Subject Together with Body Message Text

• Turn to pg. 102• Notice you can add a Subject and a message to

email by adding some additional information

Chapter 3: Creating Web Pages with Links, Images, and Formatted Text 17

Page 18: HTML Concepts and Techniques Fifth Edition Chapter 3 Creating Web Pages with Links, Images, and Formatted Text

Adding a Text Link to a Web Page in Another Web Site

• DO pg 103. • Save the file again

Chapter 3: Creating Web Pages with Links, Images, and Formatted Text 18

Page 19: HTML Concepts and Techniques Fifth Edition Chapter 3 Creating Web Pages with Links, Images, and Formatted Text

Adding a Text Link to a Web Page in Another Web Site

Chapter 3: Creating Web Pages with Links, Images, and Formatted Text 19

Page 20: HTML Concepts and Techniques Fifth Edition Chapter 3 Creating Web Pages with Links, Images, and Formatted Text

Validating a Web Page

• Go ahead and validate this web page…

• Pg. 106 will walk you through it.

• Look over your web page. It should look link pg. 107 (next slide)

• Go ahead and test the links…make sure they work.

• When all this is done…show me!

Chapter 3: Creating Web Pages with Links, Images, and Formatted Text 20

Page 21: HTML Concepts and Techniques Fifth Edition Chapter 3 Creating Web Pages with Links, Images, and Formatted Text

Viewing a Web Page

Chapter 3: Creating Web Pages with Links, Images, and Formatted Text 21

Page 22: HTML Concepts and Techniques Fifth Edition Chapter 3 Creating Web Pages with Links, Images, and Formatted Text

Chapter 3: Creating Web Pages with Links, Images, and Formatted Text 22

Opening an HTML File•Go to your home directory, HTML/Ch 3 folder and open specials.html with NotePad.

Page 23: HTML Concepts and Techniques Fifth Edition Chapter 3 Creating Web Pages with Links, Images, and Formatted Text

User friendly• Because this is such a long page, you should

provide users a quick way to move back to the top of the page without scrolling.

• See pg. 111 for what it will look link when we are finished.

Chapter 3: Creating Web Pages with Links, Images, and Formatted Text 23

Page 24: HTML Concepts and Techniques Fifth Edition Chapter 3 Creating Web Pages with Links, Images, and Formatted Text

Formatting Text (pg.114)• Look at pg. 114 for a list of attributes for use with

formatting text.• We’ll discuss these and look at pg. 115 for

examples.– <b> - Boldface

– <strong> - usually bold (browser interprets it)

– <big> - increases font size

– <em> - for emphasis (italicized usually)

– <i> - Italicized

– <sub> & <sup> - subscript and superscript

– <u> - underlined

Chapter 3: Creating Web Pages with Links, Images, and Formatted Text 24

Page 25: HTML Concepts and Techniques Fifth Edition Chapter 3 Creating Web Pages with Links, Images, and Formatted Text

Chapter 3: Creating Web Pages with Links, Images, and Formatted Text 25

Formatting Text in Bold

• Do the steps on pg. 116 to add some text formatting to your document.

Page 26: HTML Concepts and Techniques Fifth Edition Chapter 3 Creating Web Pages with Links, Images, and Formatted Text

Chapter 3: Creating Web Pages with Links, Images, and Formatted Text 26

Adding an Image with Wrapped Text

• Look at the bottom of pg 117. Notice the text is right next to the image.

• NOT GOOD…we need some horizontal/vertical space there.

• Turn to pg. 118, the same page with the hspace attribute used. – Hspace – left/right of the image

– Vspace – top/bottom of the image

• Using the <p> tag also controls the space around images..See pg. 119.

Page 27: HTML Concepts and Techniques Fifth Edition Chapter 3 Creating Web Pages with Links, Images, and Formatted Text

Chapter 3: Creating Web Pages with Links, Images, and Formatted Text 27

Using thumbnail sized images• Thumbnail images – smaller version of the actual image.

Usually, when clicked, will load the full-sized image.• To create thumbnails – resize the image in paint or

image-editing software and save with a different filename.• There are countless images in many places on the Web.

Search for ‘Free Web images’ or ‘Free GIFs’ and see what you get.

• Be aware of copyrighted images.• <a href=“largeimage.gif”><img src=“thumbnail.gif” /> </a>• This line of code will add a thumbnail image (you have to

have resized it in a image-editing program) that links to a larger image of itself.

• See pg. 120.

Page 28: HTML Concepts and Techniques Fifth Edition Chapter 3 Creating Web Pages with Links, Images, and Formatted Text

Chapter 3: Creating Web Pages with Links, Images, and Formatted Text 28

Adding an Image with Wrapped Text

• Do pages 120-121• Save the file…do this often, so if you have

problems, you haven’t lost much.

Page 29: HTML Concepts and Techniques Fifth Edition Chapter 3 Creating Web Pages with Links, Images, and Formatted Text

Chapter 3: Creating Web Pages with Links, Images, and Formatted Text 29

Clearing the Text Wrapping

• To stop wrapping to the right, use <br clear=“right” />• To stop wrapping to the left, use <br clear=“left” />

• <br clear=“all” /> will clear ALL wrapping• Do pg. 122

Page 30: HTML Concepts and Techniques Fifth Edition Chapter 3 Creating Web Pages with Links, Images, and Formatted Text

Chapter 3: Creating Web Pages with Links, Images, and Formatted Text 30

Setting Link Targets

• Now we need to add links WITHIN the web page.• First thing we have to do is create target links.• Ex. <a name=“targetname”> </a>• Target – a NAMED location or anchor within a

Web page to which a link can be created.• For long web pages, makes it easier for visitors to

navigate the site.• You will make your bulleted list a set of links to

targets within your web page.

Page 31: HTML Concepts and Techniques Fifth Edition Chapter 3 Creating Web Pages with Links, Images, and Formatted Text

Chapter 3: Creating Web Pages with Links, Images, and Formatted Text 31

Setting Link Targets

• Targetname MUST BE UNIQUE within that web document.

• Just marks a specific area of the web page to which a link can be directed.

• <a href=“#targetname”> - notice the # sign..• Turn to pg. 124 in your textbook

Page 32: HTML Concepts and Techniques Fifth Edition Chapter 3 Creating Web Pages with Links, Images, and Formatted Text

Chapter 3: Creating Web Pages with Links, Images, and Formatted Text 32

Adding Links to Link Targets within a Web Page

• PG. 125-127• Save this and then test all the links.• When it is working properly, call me and let me see it!

Page 33: HTML Concepts and Techniques Fifth Edition Chapter 3 Creating Web Pages with Links, Images, and Formatted Text

Chapter 3: Creating Web Pages with Links, Images, and Formatted Text 33

Copying and Pasting HTML Code

• Do pg. 128-129

• That will finish up all the links for this document.

• Save it, test it, validate it if you want to…just don’t leave off any tags!

• I want to see this work before we go any further.

Page 34: HTML Concepts and Techniques Fifth Edition Chapter 3 Creating Web Pages with Links, Images, and Formatted Text

What now?

• Homework-– Play ‘Who wants to be a

computer Genius’ for chapter 3

• (www.scsite.com/html5e/learn)• You must have at least 15 out

of 20 questions correct.• Print this out and turn it in to

me.

– Due next class meeting

• Labs for Ch. 3– Cases & Places– #1 & #3

• pg. 142• read this CAREFULLY

and make sure you do everything that is asked.

Project 3: Creating Web Pages with Links, Images, and Formatted Text 34