Intermediate HTML: Introduction to Web Publishing

1
Intermediate HTMLIntroduction to Web Publishing
Dates for this Class Instructors Name
1 Name 2 Conference Call Number Phone No.
Presented by
2
Class Files

• If you have not previously done so, please do so
  now
• On the left hand menu choose Student Resources
• From the submenu, choose Download Class Files
• Under the Web Fundamentals Group, choose
  Intermediate HTML Frames, Columns and Enhanced
  Layout
• Run this file or save it to a disk?
• Choose Save to a Disk and make sure your DESKTOP
  is selected
• When the files have finished downloading you will
  have a zip file located on your desktop (it will
  say web102 or web102.exe)
• Double click on that icon this will start the
  unzipping process and ask you where to unzip the
  folder to Make sure you choose your DESKTOP
  again, then choose UNZIP.
• When it has finished unzipping the file, close
  that window.
• You should now see a folder on your desktop
  called Web 102This folder contains the files
  to be used for this class.

3
Basic Structure of an HTML Document
Introduction to Our Case Study
Open index.html in the modelsite folder in your
web102 folder to see our finished web page
4
Introduction To Frames

• A FRAMESET consists of multiple HTML pages
• A master document (such as maindoc.html or
  index.html) tells where to place the HTML pages,
  and
• One HTML page for each frame.

• In this example, maindoc.html is the master page
  containing the frameset information.
• page1.html will go into Frame 1
• page2.html will go into Frame 2
• page3.html will go into Frame 3

In order to create this webpage, you must create
4 HTML pages
5
The Frameset Tag
The master document holds the ltframesetgtlt/framese
tgt tags, which contain the dimensions of each
frame and the names of the files that will
supply the content to that particular frame
lthtmlgt ltheadgt lttitlegt Indexlt/titlegt ltheadgt
ltframesetgt lt!- - code for the frames goes
here - - gtlt/framesetgtlt/htmlgt
Notice there is NO ltbodygt tag! The ltframesetgt
replaces it.
6
Cols and Rows attributes
Framesets may be created to display the pages in a
Column format
Row format
or
7
To Create Columns
lthtmlgt ltheadgt lttitlegtMain Pagelt/titlegt lt/headgt ltf
rameset cols"30, " gt ltframe
src"page1.html"gt ltframe src"page2.html"gt lt/fr
amesetgt lt/htmlgt
8
The Code

• lthtmlgt
• ltheadgt
• lttitlegtMain Pagelt/titlegt
• lt/headgt
• ltframeset cols"30, " gt
• ltframe src"page1.html"gt
• ltframe src"page2.html"gt
• lt/framesetgt
• lt/htmlgt

• This says to create two columns
• The first column will be 30 of the width of
  the page
• The second column will take up the rest ()
  of the page
• The content of the first frame will be what
  is on page1.html
• The content of the second frame will be what
  is on page2.html

9
Size Definition
The definition for the width of the column may be
set in three ways
By percent ltframeset cols"30, " gt
By pixel width ltframeset cols"350, " gt
Relative to each other ltframeset cols2,
" gt
10
To Create Rows
lthtmlgt ltheadgt lttitlegtMain Pagelt/titlegt lt/headgt ltf
rameset rows"30, " gt ltframe
src"page1.html"gt ltframe src"page2.html"gt lt/fr
amesetgt lt/htmlgt
11
The Code

• lthtmlgt
• ltheadgt
• lttitlegtMain Pagelt/titlegt
• lt/headgt
• ltframeset rows"30, " gt
• ltframe src"page1.html"gt
• ltframe src"page2.html"gt
• lt/framesetgt
• lt/htmlgt

• This says to create two rows
• The first row will be 30 of the height of
  the page
• The second row will take up the rest () of
  the page
• The content of the first frame will be what
  is on page1.html
• The content of the second frame will be what
  is on page2.html

12
Size Definition
The definition for the height of the row may be
set in three ways
By percent ltframeset rows"30, " gt
By pixel width ltframeset rows"350, " gt
Relative to each other ltframeset rows2,
" gt
13
Frame Attributes
These codes should be included inside the ltframegt
tag.
14
Frameset Attributes
These codes should be included inside the
ltframesetgt tag.

15
Nested Framesets
ltframesetgt tags can be nested inside of other
ltframesetgt definitions. So, the following code
lthtmlgt ltheadgt lttitlegtMain Pagelt/titlegt lt/headgt ltfr
ameset rows"20, "gt ltframe src"page1.html"gt lt
frameset cols"30, " gt ltframe
src"page2.html"gt ltframe
src"page3.html"gt lt/framesetgt lt/framesetgt lt/html
gt
16
Would show
17
The ltnoframesgt Tag

• You may use the ltnoframesgt lt/noframesgt tags to
  display informationfor those viewers who are not
  using a frame-enabled browser.
• It may include alternate html code to be
  displayed
• A link to an alternate html page created
  specifically fornon frame-enabled browsers
• Text informing the visitor that your site
  requires a frame-enabledbrowser
• The ltnoframesgt tagset is placed after the closing
  lt/framesetgt tag

18
The ltnoframesgt Tag Code

• lthtmlgt
• ltheadgt
• lttitlegtMain Pagelt/titlegt
• lt/headgt
• ltframeset rows"30, " gt
• ltframe src"page1.html"gt
• ltframe src"page2.html"gt
• lt/framesetgt
• ltnoframesgt Please go to lta hrefhttp//www.eastdes
  ert.comgtEast Desert, Inc.lt/agt to view a
  non-frames site.
• lt/noframesgt
• lt/htmlgt

19
Exercise 1

• Please turn to Exercise 1 in your workbook
• Read and follow the instructions carefully
• Your finished exercise should looklike the
  following

20
(No Transcript)
21
Exercise 2

• Please turn to Exercise 2 in your workbook
• Read and follow the instructions carefully

22
The code for index.html should look like this
lthtmlgt ltheadgt lttitlegtWelcome to the East Desert
Timeslt/titlegt lt/headgt ltframeset rows"100, "
frameborder"0" framespacing"0"
border"0"gt ltframe src"exercise2-nav-done.html"
name"nav" noresizegt ltframe src"home.html"
name"bottom"gt lt/framesetgt lt/htmlgt
23
And the code for nav.html should look like this
lthtmlgt ltheadgt lttitlegtMain Navigation
Pagelt/titlegt ltbase target"bottom"gt lt/headgt ltbody
bgcolor"CCCC66"gt ltfont face"verdana"gtltcentergt
lta href"home.html"gtHOMElt/agt lta
href"staff.html"gtSTAFFlt/agt lta
href"contactus.html"gtCONTACT USlt/agt lta
href"newsletter.html"gtNEWSLETTERlt/agtlt/centergtlt/fo
ntgt ltcentergtltimg src"line.gif"gtlt/centergt lt/bodygt
lt/htmlgt
24
Exercise 3

• Please turn to Exercise 3 in your workbook
• Read and follow the instructions carefully

25
HTML Tables
26
lttable border1 width100gtltcaptiongt Movie
Table lt/captiongt lttrgt ltthgtMovielt/thgt ltthgtAct
orlt/thgt ltthgtCharacterlt/thgt lt/trgt
lttrgt lttdgtCasablancalt/tdgt lttdgtHumphrey
Bogartlt/tdgt lttdgtRick Blainelt/tdgt lt/trgt
lttrgt lttdgtCasablancalt/tdgt lttdgtIngrid
Bergmanlt/tdgt lttdgtIlsa Laszlolt/tdgt lt/trgt
lt/tablegt
27
Looks like this in the browser
28
Table Attributes
lttable border1 cellspacing2 cellpadding5
width95 alignright
bgcolor330000gt
29
Row Attributes
lttr aligncenter valignmiddle bgcolorbluegt
30
Cell Attributes
lttd width150 aligncenter valignmiddlebgco
lorblue rowspan2 colspan3gt
These can be applied to either a ltthgt tag or a
lttdgt tag
31
Exercise 4

• Please turn to Exercise 4 in your workbook
• Read and follow the instructions carefully

32
Exercise 5

• Please turn to Exercise 5 in your workbook
• Read and follow the instructions carefully

33
Exercise 6

• Please turn to Exercise 6 in your workbook
• Read and follow the instructions carefully

34
A More Complex Table
35
Exercise 7

• Please turn to Exercise 7 in your workbook
• Read and follow the instructions carefully

36
Exercise 8

• Please turn to Exercise 8 in your workbook
• Read and follow the instructions carefully

37
Back to Sample Sites Page