Creating Web Pages with Links, Images, and Formatted...

HTMLProject #3-Links, Images, & Formatted Text

Project 3

Creating Web Pages with Links, Images, and Formatted Text

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

Project Objectives

1. Describe linking terms and definitions2. Create a home page and enhance a

Web page using images3. Align and add bold, italics, and color to

text 4. Change the bullet type used in an

unordered list5. Add a background image

Project Objectives

6. Add a text link to a Web page in the same Web site

7. Add an e-mail link8. View the HTML file and test the links9. Open an HTML file10.Add an image with wrapped text

Project Objectives

11.Add a text link to a Web page on another Web site

12.Add links to targets within a Web page13.Copy and paste HTML code14.Add an image link to a Web page in the

same Web site

Web Page Heading

• Always label the top of your assignments using the following comments:

Web Page Structure/Skeleton

<html>

<head><title>Your title goes here</title>

Note: Title shows up on the “title bar” of the web page & on page when it is printed.

</head> and then press the ENTER key

<body>Page content goes here</body>

</html>

Saving A Web Page

• Click File-->Save to save your files– The First time you save any project, the

Save As dialog box will automatically appear, since you are making a NEW FILE

– Using File-->Save As… after this will save your work as another new file, therefore creating a DUPLICATE of your work

– If you’ve already saved something before, only use File-->Save to save it again

Saving a Web Page

• You will always need to type the extension “.htm” when saving your pages.

Different Views, Same File• The .htm file will appear differently when viewed in Notepad vs.

Internet Explorer– Notepad is only a text editor, whereas Internet Explorer is a browser--it will interpret

your code into visuals.Notepad View Internet Explorer View

Printing An HTML File

• Click File-->Print• When the dialog box appears, click OK

Aligning Headings with a Font Color

<h1>Welcome to Plant World!

Entering a Paragraph of Text

A paragraph of text goes here

• The browser will put two line breaks after each closing tag

Creating Unordered (Bulleted) Lists

• Random sequence• Circles, Dots, Squares, special symbols

etc..• Requires TWO Tags to make it work

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

• Use the anchor tag to create links.• href attribute – tells the browser what page to

link to• As long as you are linking to a page within the

same site, you only need to include the filename.

<a href = "desertplants.htm"> Desert Plants

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

• When linking to a page in another site, enter the full web address as the value for href.

<a href="http://www.google.com">Click to go to Google.com.

Adding an E-Mail Link

• Use an anchor tag, as you would when creating a link to a web page

<a href =“mailto:plantworld@isp.com”>Click Here to send an E-Mail

Viewing a Web Page

• Open Internet Explorer– Click Start-->All Programs-->Internet Explorer– OR Double click the Internet Explorer Icon on

the desktop• Opening a Page

– Click the Address bar– Type the URL or file path of the page you want to

view and press ENTER– If the file is on your computer, you can also click

File-->Open and browse for the file instead

Testing Links in a Web Page

• Whenever you’ve made a new link, you should test it to make sure it works

• When viewing your file, click each of the links and make sure they do what they should

Opening an HTML File• Open Notepad• Click File-->Open• If necessary, click the Look in box arrow and then

select the U:/ Drive• Double-click your folder-->Web Design-->project#• If necessary, click the Files of type box arrow and

then click All Files• Double-click the file you want to open, OR single

click and then click the Open button in the Open dialog box

Formatting Text in Bold

The browser will display this text in bold

Formatting Text in Italics

“Em” is for “Emphasized”. In most browsers, this text will be italicized.

Formatting Text with a Font Color

• Sometimes a browser will recognize color names (i.e. )

• However, you will need to use the hexadecimal code for a color if you want a very specific color that doesn’t have a name

• Googling “hexadecimal color codes”should help you find codes for any color

Formatting Text with a Font Color

Pretty in Pink

Adding a Background Image

• Background is an attribute of the body tag.• Value = filename if image file is in the

same folder as the .htm file• Otherwise, Value = filepath/filename

Adding an Image

• Important attributes:– src is the file path / file name– width/height are the dimensions of your image– alt is the text that will display if the image can’t

Adding an Image with Wrapped Text

Image is left-aligned, with wrapped text…

This inserts a left-aligned image with wrapped text, as shown on the next slide. Align = “right” will align the image on the right instead.

Adding an Image with Wrapped Text

Clearing the Text Wrapping

Image is left-aligned, with wrapped text Image is left aligned, with wrapped text

Image is left-aligned, with wrapped text Image is left-aligned, with wrapped text Image is left-aligned, with wrapped text

Note: This is the same code as before,Only now with a break, clearing thetext wrapping. Differences shownon the next slide.

Clearing the Text Wrapping

Here is the same page, now with textcleared to the left

Above is the result of the original code

Setting Link Targets

<a name=“point1"></a> • This creates a link target named point1

<a href = “#point1”>Click here</a>• This link will take the user to the part of the

page that contains the point1 target• Don’t forget to type “#” before the target

name when linking

Adding Links to a Target at the Top of the Page

• First, make a link target<a name=“angles"></a>

• Then create a link to it:<a href=“#angles"><To top</a><a href=“baseball.#angles"><To top</a><a href=" sports/baseball.#angles "><To top</a>

Copying and Pasting HTML Code

• Highlight the HTML code you want to copy• Click Edit --> Copy, or press Ctrl + C

• Position the insertion point where you want to paste the text

• Click Edit --> Paste, or press Ctrl + V

Adding an Image Link to a Web Page

• Enclosing an image within anchor tags will make it a link

• By default, the image will be given a borderto show that it is a link

• Typing border = “0” in the image tag will get rid of this border

Adding an Image Link to a Web Page

Project Summary

1. Describe linking terms and definitions2. Create a home page and enhance a

Web page using images3. Align and add bold, italics, and color to

text 4. Change the bullet type used in an

unordered list5. Add a background image

Project Summary

6. Add a text link to a Web page in the same Web site

7. Add an e-mail link8. View the HTML file and test the links9. Open an HTML file10.Add an image with wrapped text

Project Summary

11.Add a text link to a Web page on another Web site

12.Add links to targets within a Web page13.Copy and paste HTML code14.Add an image link to a Web page in the

same Web site

HTMLProject #3-Links, Images, & Formatted Text

Project 3 Complete

Homework:AYK:ITL:Cases & Places:

Creating Web Pages with Links, Images, and Formatted...

Documents

Transcript of Creating Web Pages with Links, Images, and Formatted...

Creating Good Yearbook Pages

Creating Your Web Pages

HTML Lesson 3-create-links-to-new-pages

HTML Comprehensive Concepts and Techniques Third Edition Project 3 Creating Web Pages with Links, Images, and Formatted Text.

Creating new pages

Newschool lp creating pages

Creating Links to strengthen Michigan communities

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

Web Pages: Creating & Maintaining

1 Creating Web Pages Part 2. 2 TOPICS Links Links Web Graphics Web Graphics Lists Lists Tables Tables.

JAVA SERVER PAGES CREATING DYNAMIC WEB PAGES USING JAVA

New Perspectives on Creating Web Pages with HTMLteachers.dadeschools.net/zhernandez/PDF PP Presentations/New... · 10 XP Creating Links To create a link to an anchor, use the same

Creating SmartLinks (Deep Links) · 2019-12-24 · Creating SmartLinks (Deep Links) Product page promotional links in 4 steps! What is a SmartLink? SmartLinks enable you to create

List of 2184 Spiritual Website Links (42 Pages)

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

Creating Splash Pages

Creating Web Pages with Links, Images, and Formatted Text.

Creating links - Home | University of Exeter of Exeter Site Manager Manual Creating links 1 University of Exeter Web Team, January 2012 Creating links Introduction People come to a

HTML Concepts and Techniques Fourth Edition Project 3 Creating Web Pages with Links, Images, and Formatted Text.

Tutorial â€“ Creating Links Using Macromedia Dreamweaver and