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!

</h1>

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

<ul><li> </li>

</ul>

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

</a>

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.

</a>

Adding an E-Mail Link

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

<a href =“mailto:[email protected]”>Click Here to send an E-Mail

</a>


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

<body background=“greyback.jpg”>

Adding an Image

<img src="plantworldlg.jpg“ width="720“height="84“ alt="Plant World logo" />

• 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

<img src="butterfly.jpg" align="left" alt=“Swallowtail“width="245“height="198" />

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

<img src="butterfly.jpg" align = "left">

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

<a href="plantworld.htm">

<img src="butterfly.jpg" align="left" alt=“Swallowtail“width="245“height="198“border = “0” />

</a>


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