lesson 4 html structural design techniques
TRANSCRIPT
![Page 1: Lesson 4 HTML Structural Design Techniques](https://reader031.vdocuments.mx/reader031/viewer/2022020706/61fc84db8d33c02b785e1d72/html5/thumbnails/1.jpg)
1
Lesson 4 HTML Structural Design Techniques
HTML and JavaScript
BASICS, 4th Edition
Barksdale / Turner
![Page 2: Lesson 4 HTML Structural Design Techniques](https://reader031.vdocuments.mx/reader031/viewer/2022020706/61fc84db8d33c02b785e1d72/html5/thumbnails/2.jpg)
Le
ss
on
4
Barksdale / Turner HTML and JavaScript BASICS 4E 2 2
Objectives
Create a frameset.
Add a navigation bar.
Make a welcome page.
Create a nested frameset.
Include a title bar frame and page.
Utilize frame and frameset options.
![Page 3: Lesson 4 HTML Structural Design Techniques](https://reader031.vdocuments.mx/reader031/viewer/2022020706/61fc84db8d33c02b785e1d72/html5/thumbnails/3.jpg)
Le
ss
on
4
Barksdale / Turner HTML and JavaScript BASICS 4E 3 3
Vocabulary
border attribute
cols attribute
frames
frame separator
frameset tag
left-hand navigation
name attribute
navigation bar
nested frameset
noresize attribute
![Page 4: Lesson 4 HTML Structural Design Techniques](https://reader031.vdocuments.mx/reader031/viewer/2022020706/61fc84db8d33c02b785e1d72/html5/thumbnails/4.jpg)
Le
ss
on
4
Barksdale / Turner HTML and JavaScript BASICS 4E 4 4
Vocabulary (continued)
pixel
rows attribute
src attribute
target attribute
title bar
![Page 5: Lesson 4 HTML Structural Design Techniques](https://reader031.vdocuments.mx/reader031/viewer/2022020706/61fc84db8d33c02b785e1d72/html5/thumbnails/5.jpg)
Le
ss
on
4
Barksdale / Turner HTML and JavaScript BASICS 4E 5 5
Creating an HTML Frameset
Framesets allow you to display two or more
Web pages on the screen at the same time.
One frame can communicate with a page in a
different frame.
As its name implies, the frameset tag allows
you to define a set of rectangular areas on
your browser screen called frames.
![Page 6: Lesson 4 HTML Structural Design Techniques](https://reader031.vdocuments.mx/reader031/viewer/2022020706/61fc84db8d33c02b785e1d72/html5/thumbnails/6.jpg)
Le
ss
on
4
Barksdale / Turner HTML and JavaScript BASICS 4E 6 6
Creating an HTML Frameset (continued)
The <frameset> and </frameset> tags mark
the beginning and end of frame definitions.
The rows attribute allows you to define
horizontal frames. The cols attribute allows
you to define vertical frames.
The name and src attributes allow you to
name each frame and to specify the source
Web page to be displayed in each frame.
![Page 7: Lesson 4 HTML Structural Design Techniques](https://reader031.vdocuments.mx/reader031/viewer/2022020706/61fc84db8d33c02b785e1d72/html5/thumbnails/7.jpg)
Le
ss
on
4
Barksdale / Turner HTML and JavaScript BASICS 4E
Creating an HTML Frameset (continued)
Three frames on a Web page
7
![Page 8: Lesson 4 HTML Structural Design Techniques](https://reader031.vdocuments.mx/reader031/viewer/2022020706/61fc84db8d33c02b785e1d72/html5/thumbnails/8.jpg)
Le
ss
on
4
Barksdale / Turner HTML and JavaScript BASICS 4E 8 8
Adding a Navigation Bar
A common Web design is to place a Web page
in a narrow left-hand frame that contains
hyperlinks. The Web page is displayed in the
larger right-hand frame.
This is referred to as left-hand navigation, and
the Web page containing the hyperlinks is
called a navigation bar.
![Page 9: Lesson 4 HTML Structural Design Techniques](https://reader031.vdocuments.mx/reader031/viewer/2022020706/61fc84db8d33c02b785e1d72/html5/thumbnails/9.jpg)
Le
ss
on
4
Barksdale / Turner HTML and JavaScript BASICS 4E
Adding a Navigation Bar (continued)
Two-frame Web page
9
![Page 10: Lesson 4 HTML Structural Design Techniques](https://reader031.vdocuments.mx/reader031/viewer/2022020706/61fc84db8d33c02b785e1d72/html5/thumbnails/10.jpg)
Le
ss
on
4
Barksdale / Turner HTML and JavaScript BASICS 4E 10 10
Adding a Navigation Bar (continued)
A pixel is an individual “dot” of light on a
computer screen.
The target attribute tells the browser which
frame it should use to display the target Web
page.
![Page 11: Lesson 4 HTML Structural Design Techniques](https://reader031.vdocuments.mx/reader031/viewer/2022020706/61fc84db8d33c02b785e1d72/html5/thumbnails/11.jpg)
Le
ss
on
4
Barksdale / Turner HTML and JavaScript BASICS 4E 11 11
Creating a Web Site Welcome Page
A welcome page should give users a good first
impression of the Web site.
A welcome page with
a navigation bar
![Page 12: Lesson 4 HTML Structural Design Techniques](https://reader031.vdocuments.mx/reader031/viewer/2022020706/61fc84db8d33c02b785e1d72/html5/thumbnails/12.jpg)
Le
ss
on
4
Barksdale / Turner HTML and JavaScript BASICS 4E 12 12
Creating a Nested Frameset
As you recall, a frameset can contain either
horizontal frames or vertical frames, but not
both.
A nested frameset solves this problem.
– You can use a <frameset> tag inside another
<frameset> tag to create both vertical and
horizontal frames.
![Page 13: Lesson 4 HTML Structural Design Techniques](https://reader031.vdocuments.mx/reader031/viewer/2022020706/61fc84db8d33c02b785e1d72/html5/thumbnails/13.jpg)
Le
ss
on
4
Barksdale / Turner HTML and JavaScript BASICS 4E 13 13
Creating a Title Bar
A page that displays
a constant title for a
Web site is
commonly called a
title bar.
Three frames with a navigation
bar, title bar, and welcome page
![Page 14: Lesson 4 HTML Structural Design Techniques](https://reader031.vdocuments.mx/reader031/viewer/2022020706/61fc84db8d33c02b785e1d72/html5/thumbnails/14.jpg)
Le
ss
on
4
Barksdale / Turner HTML and JavaScript BASICS 4E 14 14
Using Advanced HTML Options
The border attribute within the <frameset>
tag adjusts the appearance of the frame
separators.
The noresize attribute within the <frame> tag
instructs the browser that the user should not
be able to change the size of the frames.
These two attributes can be used separately
or together.
![Page 15: Lesson 4 HTML Structural Design Techniques](https://reader031.vdocuments.mx/reader031/viewer/2022020706/61fc84db8d33c02b785e1d72/html5/thumbnails/15.jpg)
Le
ss
on
4
Barksdale / Turner HTML and JavaScript BASICS 4E
Using Advanced HTML Options (continued)
Eliminating frame separators on a Web page
15
![Page 16: Lesson 4 HTML Structural Design Techniques](https://reader031.vdocuments.mx/reader031/viewer/2022020706/61fc84db8d33c02b785e1d72/html5/thumbnails/16.jpg)
Le
ss
on
4
Barksdale / Turner HTML and JavaScript BASICS 4E 16 16
Summary
In this lesson, you learned:
How to create a frameset.
How to interpret frameset attributes and
values.
How to create a navigation bar in a frame.
How to make a simple welcome page in a
frame.
![Page 17: Lesson 4 HTML Structural Design Techniques](https://reader031.vdocuments.mx/reader031/viewer/2022020706/61fc84db8d33c02b785e1d72/html5/thumbnails/17.jpg)
Le
ss
on
4
Barksdale / Turner HTML and JavaScript BASICS 4E
Summary (continued)
How to insert nested tags and attributes.
How to add a title bar frame to a frameset.
How to remove the borders in a frameset.