HTML Lecture 2

1
HTML Lecture 2

• Formatting, images, and frames

2
HTML Comments

• Comments look like
• lt!--- Put comment here ---gt
• Comments make HTML code easier to read.
• They explain what the parts do.
• They break up the code into smaller pieces.
• You should use comments in complex HTML
  documents.

3
HTML Whitespace

• Whitespace is essentially ignored by HTML
  interpreters like web browsers
• Having many spaces between words, or tabs, or
  many newlines do not affect the appearance of the
  text.
• The symbol nbsp makes a space
• The tag ltbrgt makes a newline.

4
HTML Body formatting

• ltBODY BGCOLOR(number) text(number)
  background(picture)gtbody of the
  documentlt/BODYgt
• The numbers are 6 hexadecimal digits
• RRGGBB where each letter is 0-9 or A-F
• Picture is some .gif or .jpg or some other image.
  It gets tiled in the background.

5
HTML Links (Anchor tag)

• ltA HREFURLgttext or imagelt/agt
• URL can be
• A webpage
• A file to download
• An email address to mail to.
• The text or image is the thing you see on the
  actual page that takes you to the link.

6
HTML Fonts

• ltFONTgttextlt/FONTgt -- let you specify more
  detailed information.
• ltFONT SIZE(number)gt -- pick size.
• Number can be a difference like 2 or 3.
• ltFONT COLOR(number)gt -- pick color.
• Color is a 6-digit hexadecimal number.
• RRGGBB, each is 0-9 or A-F.

7
HTML Templates

• Get the basic structure of a webpage given to
  you.
• For example, mytemplate.html.
• You will use a file like this in a project.
• Every persons page will be different in detail.
• Every persons page will be similar in structure.
• You use the template and add details as needed.

8
HTML Images

• ltIMG SRCURL ALTmessage.gt
• SRC gives the location of the image.
• URL can be a local file or a remote file.
• Browser knows how to work with standard formats
  like .jpg, .gif.
• ALTmessage shows a text message.

9
Comments on the IMG Tag

• The easiest way to insert an image into HTML is
  if the picture you want to include is in the same
  directory as the actual HTML file.
• In this case, you simply have to write ltimg
  srcpicture namegt into your HTML for the image
  to appear on your web page.

10
(No Transcript)
11
As such, the picture will appear like this
12
Child Directory

• Another case is where the image you want is found
  in a child directory of where the HTML file is
  in.

13
For example, your HTML file is in web
construction, while the image you want is in
blue
14
Child Directory (continued)

• In this case, you must change your IMG tag to
  include the name of the child directory which
  contains the image
• It would look like this ltimg
  srcblue/vince1.jpg"gt where blue is the
  child directory.

15
IMPORTANT!!!

• It is important that the image you want is in the
  correct directory that you set the IMG tag to!
• For example, if the image you want is in a child
  directory, and you type this into your HTML
  
  ltimg srcvince.jpggt
  which says that the image is
  in the same directory, you might get something
  like this

16
(No Transcript)
17
Solutions

• To fix this, all you have to do is add the name
  of the child directory into the IMG tag.
• Similarly, if the image was in the parent
  directory, all you have to do is add 2 periods
  and a slash to the IMG tag.
• Finally, if the image and HTML are in the same
  directory, just make sure that only the image
  name is contained within the IMG tag.

18
Using frames

• Use the FRAMESET container in lieu of BODY
• FRAMESET options
• COLS splits the pane into columns
• ROWS splits the pane into rows
• BORDER defines the thickness in pixels of the
  border around the frame
• BORDERCOLOR defines the color of the border
  around the frame

19
HTML Frames

• Split the page into rows or columns.
• ltframeset rows90, 10gtlt/framesetgt
• ltframeset cols75,25gtlt/framesetgt
• Can do more than 2 rows/columns.
• The percents dont have to add up to 100.
• Things after ltnoframesgt are shown if your
  browser cant see frames.

20
Examples of frames

• ltFRAMESET COLS10,90gtdefines two columns, at
  10 and 90 of the screen width
• ltFRAMESET ROWS40,20, BORDER0gtdefines
  three rows, at 40 pixels, 20 of the screen
  length, and the rest of the screen length

21
Complex frames example

• ltFRAMESET COLS10,90gt ltFRAMESET
  ROWS50,50gt lt!-- frame for column 1 row 1
  --gt lt!-- frame for column 1 row 2 --gt
  lt/FRAMESETgt lt!-- frame for column 2
  --gtlt/FRAMESETgtltNOFRAMESgtltPgt ltA
  HREFhttp//home.netscape.comgt Download
  Navigatorlt/Agt to use frames.lt/Pgtlt/NOFRAMESgt

22
What about non-FRAME users?

• NOFRAMES container provides means to
• notify users that the page requires frames
• give users option of downloading newer browser
• ltNOFRAMESgtltPgt ltA HREFhttp//home.netscape.com
  gt Download Navigatorlt/Agt to use
  frames.lt/Pgtlt/NOFRAMESgt

23
FRAME tag

• The HTML source for the contents of a specific
  frame (or pane) is in the FRAME tagltFRAME
  SRCframe.htmlgt

24
FRAME tag options

• SRC -- The HTML source to load
• MARGINHEIGHT -- Space in pixels between the top
  and bottom of a frame and its contents
• MARGINWIDTH -- Space in pixels between the left
  and right of a frame and its contents
• NORESIZE -- Disable the resize handle

25
FRAME tag options, continued

• NAME -- The name of the frame (pane), so you can
  refer to it by name from other frames
• SCROLLING -- Whether or not to provide a scroll
  bar one of
• YES -- Provide a scroll bar
• NO -- Dont provide a scroll bar
• AUTO -- Provide a scroll bar only if its needed

26
Targeting specific frames

• You can target a frame thats been
  namedltFRAMESET COLS20,gt ltFRAME
  SRCleft.htmlgt ltFRAME SRCright.html
  NAMErightgtlt/FRAMESETgt
• From inside left.html you can sayltA
  HREFright-new.html TARGETrightgtPlace a
  new frame on the rightlt/Agt.

27
Reserved frame names

• _blank loads the source document into a new
  browser window
• _self loads the source document into the same
  window
• _parent loads the source document over the parent
  document
• _top loads the source document at the top, over
  all the frames in this window