Chapter 03 GG

8/12/2019 Chapter 03 GG

1/70

Creating Web Pages

with Links, Images,

and Embedded StyleSheets

HTML5 CSS7thEdition

8/12/2019 Chapter 03 GG

2/70

Describe linking terms and definitions

Create a home page and enhance a Web page

using images

Change body and heading format usingembedded (internal) style sheets

Align and add color to text using embedded and

inline styles

Chapter 3: Creating Web Pages with Links, Images, and Embedded Style Sheets 2

Chapter Objectives

8/12/2019 Chapter 03 GG

3/70

Add a text link to a Web page in the same Website

Add an e-mail link

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

Use absolute and relative paths

Save, validate, and view an HTML file and test the

links


Chapter Objectives

8/12/2019 Chapter 03 GG

4/70

Use style classes to add an image with wrappedtext

Add links to targets within a Web page

Use an inline style to change the default bullet listtype to square bullets

Copy and paste HTML code

Add an image link to a Web page in the same Web

site


Chapter Objectives

8/12/2019 Chapter 03 GG

5/70

Plan the Web site Analyze the need

Design the Web site

Choose the content for the Web pages

Determine the types of Cascading Style Sheets (CSS) that you will

use

Determine how the pages will link to one another

Establish what other links are necessary Develop the Web page(s) and insert all links

Test all Web pages within the Web site


Plan Ahead

8/12/2019 Chapter 03 GG

6/70

When using links on a web page use descriptive text asthe clickable word or phrase

When a link is identified with text it often appears as

underline text in a color different from the main web

page text

IE - default color for a normal link that has not been visited is

blue, a visited link is purple and an active link varies in color

Generally moving the mouse pointer over a link causes themouse pointer to change to a pointing handnotifies the

user that a link is available from that text/image


Using Links on a Web Page

8/12/2019 Chapter 03 GG

7/70



8/12/2019 Chapter 03 GG

8/70



8/12/2019 Chapter 03 GG

9/70

tag = anchortag is used to create anchors for links toanother page in the same web site, to a web page in an

external web site, within the same web page and for e-mail

links

a {color: black; }

a {text-decoration: none;}



8/12/2019 Chapter 03 GG

10/70


Link to Another Web page Within the

Same Web Site

sample photographs

8/12/2019 Chapter 03 GG

11/70


Link to a Web Page in Another Web Site

one of our fabulous tour destinations

8/12/2019 Chapter 03 GG

12/70


Link Within a Web Page

Frog Fish

8/12/2019 Chapter 03 GG

13/70


Link to an E-mail Address

[email protected]

8/12/2019 Chapter 03 GG

14/70

Click the Start button on the Windows taskbar to display the Start menu

Click All Programs at the bottom of the left pane on the Start menu to

display the All Programs list

Click Notepad++ in the All Programs list

Click Notepad++ in the list to display the Notepad++ window. If there are

files already open in Notepad from previous projects, close them all now by

clicking the Close button on each open file

If the Notepad++ window is not maximized, click the Maximize button on

the Notepad++ title bar to maximize it

Click View on the menu bar. If the Word wrap command does not have acheck mark next to it, click Word wrap


Starting Notepad++

8/12/2019 Chapter 03 GG

15/70


Starting Notepad++

8/12/2019 Chapter 03 GG

16/70


Entering HTML Tags to Define

the Web Page Structure

8/12/2019 Chapter 03 GG

17/70

With a USB flash drive connected to one of thecomputers USB ports, click File on the Notepad++ menu

bar and then click Save

Type the desired file name in the File name text box (do

not press ENTER)

Navigate to the desired location to save the file

Click the Save button in the Save As dialog box to save

the file with the name you entered to the desired savelocation


Saving an HTML File

8/12/2019 Chapter 03 GG

18/70


Adding a Banner Image

8/12/2019 Chapter 03 GG

19/70


Entering Paragraphs of Text

8/12/2019 Chapter 03 GG

20/70

How and where to use the four types of links Identify how to link from the home page to another

page in the same web site

Use an e-mail link on the home pageDetermine external links for the home page

Use internal links on long web pages


Plan Ahead

8/12/2019 Chapter 03 GG

21/70


Adding a Text Link to Another Web Page

within the Same Web Site

8/12/2019 Chapter 03 GG

22/70


tag Attributes and Functions

8/12/2019 Chapter 03 GG

23/70


Adding an E-Mail Link

8/12/2019 Chapter 03 GG

24/70

You can add a default subject and message in ane-mail link

Example:


Adding Other Information to an E-mail

Link

8/12/2019 Chapter 03 GG

25/70


Adding Other Information to an E-mail

Link

8/12/2019 Chapter 03 GG

26/70


Adding a Text Link to a Web Page in

Another Web Site

8/12/2019 Chapter 03 GG

27/70


Use Absolute and relative Paths

pathdescribes the location (folder or external site)where the files can be found beginning with the root

location

absolute pathspecifies the exact address for the fileto which you are linking or displaying a graphic

relative paths - specify the location of a file relative tothe location of the file that is currently in use

8/12/2019 Chapter 03 GG

28/70


Use Absolute and relative Paths

\Images\underwaterlogo.jpg

..\underwaterlogo.jpg

8/12/2019 Chapter 03 GG

29/70


Add Interest and Focus with Styles

8/12/2019 Chapter 03 GG

30/70


Add Interest and Focus with HTML Tags

8/12/2019 Chapter 03 GG

31/70


HTML Text Formatting Tags

Logical style tagsallow a browser to interpret thetag based on browser settings relative to other texton a web page

, and are examples of logical styles

Physical style tagsspecify a particular font changethat is interpreted strictly by all browsers

to ensure that a text appears as bold font you can use

and tags but the tag is a better fitbecause it does not dictate how the browser will display

the text

8/12/2019 Chapter 03 GG

32/70


Examples of Various Font Styles

8/12/2019 Chapter 03 GG

33/70


Using Embedded Style Sheets

Add a start tag at the top of the web pagewithin the & after adding the desired stylestatements end with tag

< style type=text/css>

h1 {font-family: Garamond;

font-size: 32pt; }

-->

8/12/2019 Chapter 03 GG

34/70


Embedded Style Sheet Example

< style type=text/css>

body {font-family:Arial,Verdana, Garamond;

font-size: 11pt;}

h1, h2,h3 {color: #020390;}

a {text-decoration:none;

color: #020390;}

a:hover {background: #020390;

color: #01d3ff;}

-->

selector:pseudo-class {property: value;}

8/12/2019 Chapter 03 GG

35/70


Embedded Style Sheets - CSS Properties and

Options

Addi E b dd d S l Sh

8/12/2019 Chapter 03 GG

36/70


Adding Embedded Style Sheet

Statements

8/12/2019 Chapter 03 GG

37/70


Adding an Inline Style for Color

8/12/2019 Chapter 03 GG

38/70

Click the Save button on the Notepad++ toolbar to savethe most recent version of the file on the same storage

device and in the same folder as the last time you saved

it


Saving an HTML File

8/12/2019 Chapter 03 GG

39/70

Open Internet Explorer

Navigate to the Web site validator.w3.org

Click the Validate by File Upload tab

Click the Browse button Locate and click to select the desired file to validate

Click the Open button

Click the Check button


Validating HTML Code

8/12/2019 Chapter 03 GG

40/70


Validating HTML Code

8/12/2019 Chapter 03 GG

41/70

Click the Notepad++ button on the taskbar toactivate the Notepad++ window

Click File on the menu bar, click Print, and then

click the Print button to print a hard copy of theHTML code


Printing an HTML File

8/12/2019 Chapter 03 GG

42/70


Printing an HTML File

8/12/2019 Chapter 03 GG

43/70

Open Internet Explorer In Internet Explorer, click the Address bar to select

the URL in the Address bar

Type the specific path to your file to display thenew URL in the Address bar and then press the

ENTER key


Viewing a Web Page

8/12/2019 Chapter 03 GG

44/70


Viewing a Web Page

8/12/2019 Chapter 03 GG

45/70

Click all links to make sure they act as intended Links to pages on the same Web site

Links to pages on a different Web site

E-mail links


Testing Links in a Web Page

8/12/2019 Chapter 03 GG

46/70

Navigate to the desired Web page to print Click the Print icon on the Command bar


Printing a Web Page

8/12/2019 Chapter 03 GG

47/70

Click the Notepad++ button on the taskbar Navigate to the location containing the desired file to open

Click the Open button in the Open dialog box to display the HTML

code for the desired Web page


Opening an HTML File

8/12/2019 Chapter 03 GG

48/70


Opening an HTML File

8/12/2019 Chapter 03 GG

49/70

A style statement is made up ofa selectorand adeclaration

The part of the style statement is that identifies the

page elements = selectora {text-decoration: none; color: #020390;}

You can also define specific elements of an HTML files

as a category or class& then you can create a specific

style for each class class=clasenamep.beginning {color: red; font-size: 20 pt;}


Work with Classes in Style Statements

8/12/2019 Chapter 03 GG

50/70

Alignment = key consideration when inserting animage & can give the image and surrounding text

completely different looksuse float & margin

properties

Float property indicates in which direction (left/right)

to display/float an element inserted on a web page

Floating an image allows the element to move to the

side indicated in the flow statement result therepositioning of other elements = text to move up

and allow to wrap next to the floated element


Add an Image with Wrapped Text

8/12/2019 Chapter 03 GG

51/70

using inline style



8/12/2019 Chapter 03 GG

52/70

using embedded style sheet

img.align-left {float: left;

margin-left: 5px;

margin-right: 5px;}img.align-right {float: right;

margin-left: 5px;

margin-right: 5px;}



8/12/2019 Chapter 03 GG

53/70

thumbnail images are used to improve page loadingtime

thumbnail image= smaller version of the image itself

& is used as a link and when you click it loads the full-

sized image

using a thumbnail gives the visitor the opportunity to

decide whether to view or not the full size image

create a thumbnail image= use paint or image editor

program and resize the real image to a smaller size


Using Thumbnail Images

8/12/2019 Chapter 03 GG

54/70


Using Thumbnail Images

Wrapping Text Around Images Using CSS

8/12/2019 Chapter 03 GG

55/70



Classes


8/12/2019 Chapter 03 GG

56/70



Classes

8/12/2019 Chapter 03 GG

57/70


Clearing the Text Wrapping

8/12/2019 Chapter 03 GG

58/70


Setting Link Targets

Adding Links to Link Targets

8/12/2019 Chapter 03 GG

59/70


Adding Links to Link Targets

within a Web Page

Adding Links to a Target

8/12/2019 Chapter 03 GG

60/70

At the top of the page (under the body tag), typeas the tag

Create a To Top link on the page that points to

the tag



at the Top of the Page


8/12/2019 Chapter 03 GG

61/70



at the Top of the Page

8/12/2019 Chapter 03 GG

62/70

Highlight the desired code to copy

Click Edit on the menu bar and then click copy

Position the pointer where you want to paste the

code Click Edit on the menu bar and then click Paste to

paste the HTML code that you copied


Copying and Pasting HTML Code

8/12/2019 Chapter 03 GG

63/70


Copying and Pasting HTML Code

8/12/2019 Chapter 03 GG

64/70


Adding an Image Link to a Web Page

8/12/2019 Chapter 03 GG

65/70

Q

8/12/2019 Chapter 03 GG

66/70

In Notepad++, click the File menu, then Close All

Click the Close button on the Notepad++ title bar

Click the Close button on all open browser

windows


Quitting Notepad++ and a Browser

Ch S

8/12/2019 Chapter 03 GG

67/70

Describe linking terms and definitions

Create a home page and enhance a Web page

using images

Change body and heading format usingembedded (internal) style sheets

Align and add color to text using embedded and

inline styles


Chapter Summary

Ch S

8/12/2019 Chapter 03 GG

68/70

Add a text link to a Web page in the same Website

Add an e-mail link

Add a text link to a Web page on another Web site Use absolute and relative paths

Save, validate, and view an HTML file and test the

links


Chapter Summary

Ch t S

8/12/2019 Chapter 03 GG

69/70

Use style classes to add an image with wrappedtext

Add links to targets within a Web page

Use an inline style to change the default bullet listtype to square bullets

Copy and paste HTML code

Add an image link to a Web page in the same Website


Chapter Summary

8/12/2019 Chapter 03 GG

70/70

Chapter 3 Complete

HTML7thEdition

Chapter 03 GG

Documents

Transcript of Chapter 03 GG