HTML and Web Pages

1
HTML and Web Pages
2
Edit Your HTML File

• PC
• using Notepad
• Other tools like Word
• HTML editor, like FrontPage
• UNIX
• telnet mozart.helios.nd.edu or darwin.helios.nd.ed
  u
• Use Pico

3
Publish at ND

• Copy/save your HTML file
• at the www folder at your H drive
• Use WS-FTP to transfer from a remote location
• If the file is filename.html your URL will be
• http//www.nd.edu/YourAFSID/filename.html
• If the file is index.html your URL will be
• http//www.nd.edu/YourAFSID/index.html or
• http//www.nd.edu/YourAFSID/

4
HTML

• A type of SGML (standard generalized markup
  language)
• HTML uses paired tags to markup different
  elements of a page
• Tags are not case sensitive

5
A Simple HTML File

• lthtmlgt
• ltheadgt
• ltTITLEgtA Simple HTML Examplelt/TITLEgt
• lt/headgt
• ltbodygt
• ltH1gtHTML is Easy To Learnlt/H1gt
• Welcome to the world of HTML.
• This is the first paragraph.
• ltPgt
• And this is the second paragraph.
• lt/bodygt
• lt/htmlgt

6
Paragraphs in HTML

• Carriage return in an HTML file is not
  interpreted
• Use ltbrgt to change line
• Use ltpgt to start a new paragraph
• Any number of white-spaces are compressed into a
  single one

7
Lists

• Unnumbered Lists
• ltULgt
• ltLIgt apples lt/LIgt
• ltLIgt bananas lt/LIgt
• ltLIgt grapefruit lt/LIgt
• lt/ULgt

• Numbered Lists
• ltOLgt
• ltLIgt oranges lt/LIgt
• ltLIgt peaches lt/LIgt
• ltLIgt grapes lt/LIgt
• lt/OLgt

8
Inline Image

• Syntax
• ltIMG SRC"mypic.gif" aligntop height50
  width40gt
• Attributes
• SRCmypic.gif" Name of the picture file
• ALIGN"bottom", "middle", "top"
• ALIGN tells the browser how to align the image
  with the neighboring text.
• HEIGHT"n", WIDTH"n"
• HEIGHT and WIDTH specify the display height and
  width (in pixels) for the image.

9
Hyperlinks

• The most important capability of HTML
• Both text and image can serve as anchors for the
  link
• lta HREFhttp//www.nd.edugtUniversity of Notre
  Damelt/agt
• lta HREFhttp//www.nd.edugt ltIMG
  SRCnd.gifgtlt/agt

10
Control the Font

• Text ltFONT SIZE 2gtresize the textlt/FONTgt text
• Text ltFONT SIZE -2gtresize the textlt/FONTgt text
• ltFONT SIZE2gtdefine the font sizelt/FONTgt
• ltFONT size2 facearial colorredgtdefine the
  fond facelt/FONTgt
• ltFONT FACE"arial,helvetica"gtbrowser will try
  Arial first, then Helvetica if Arial is not
  presentlt/FONTgt
• ltBgtBoldlt/Bgt
• ltIgtItaliclt/Igt
• ltcentergtcenterlt/centergt
• ltbrgt line break

11
Table

• Basic tags
• ltTABLEgt defines a table in HTMLlt/TABLEgt
• ltCAPTIONgtthe title of the tablelt/CAPTIONgt
• ltTRgta row within a tablelt/TRgt
• ltTHgta table header celllt/THgt
• ltTDgta table data cell with the text aligned left
  and centered verticallylt/TDgt

• Attributes
• BORDER - appearing in the TABLE tag
• ALIGN - can appear in CAPTION, TR, TH, or TD
• values left, center, and right, e.g.
  aligncenter.
• VALIGN - can appear inside a TR, TH, or TD
• values top, middle, bottom.
• WIDTHltvalue_or_percentgt

12
A Table Template
ltTABLE border1gt lt!-- start table
--gt ltCAPTIONgtltbgt Table Name lt/bgt lt/CAPTIONgt
ltTRgt lt!-- start first row --gt ltTHgt first
header cell contents lt/THgt ltTHgt last header
cell contents lt/THgt lt/TRgt lt!-- end first row
--gt ltTRgt lt!-- Start the second row --gt ltTDgt
second row, first cell contents lt/TDgt ltTDgt
second row, last cell contents lt/TDgt
lt/TRgt lt!-- end of second row --gt ltTRgt lt!--
Start last row --gt ltTDgt last row, first cell
contents lt/TDgt ltTDgt last row, last cell contents
lt/TDgt lt/TRgt lt/TABLEgt lt!-- end table --gt
13
Frame

• Frames provide a way to divide a Web browser
  window into separate areas that can display
  different pages and scroll independently.
• Frames are frequently used to display a banner at
  the top of each page or to create a static menu
  in one frame for a document in another

14
ltFRAMESETgt Tag

• establishes the size and location of the
  different frames in the browser window
• attributes ROWS and COLS
• can use numbers (pixels) or percentage
• ltFRAMESET ROWS"100,400"gt creates two frames that
  are 100 pixels tall and 400 pixels tall.

• ltFRAMESET COLS"50,200"gt creates frames that are
  50 pixels wide and 200 pixels wide.
• ltFRAMESET ROWS"40,60"gt creates frames that
  consume 40 and 60 of the window respectively
• use the asterisk character to specify a frame
  that consumes all of the remaining space, e.g.
  ltframeset rows"20, "gt

15
ltFRAMEgt Tag

• specifies which documents to display in the
  frames
• Attributes
• SRC"URL - source URL for document to be
  displayed in frame
• NAME"window-name
• name used to identify frame used for targeting
  links.
• MARGINWIDTH"value"
• the number of pixels added to the right and left
  of the frame
• SCROLLING"YESNOAUTO"
• to indicate whether the frame has scrollbars
  
• NORESIZE
• Prohibits a user from changing the size of a
  frame.
• Note frames can normally be resized even if you
  specify an explicit height and width.

16
Example 1

• ltHTMLgt
• ltHEADgt
• ltTITLEgtFrame Examplelt/TITLEgt
• lt/HEADgt
• ltFRAMESET COLS"35,65"gt
• ltFRAME SRChttp//menu.html"
  NAME"menu-frame"gt
• ltFRAME SRC"main.html" NAME"main-page"gt
• lt/FRAMESETgt
• lt/HTMLgt

17
Example 2

• ltHTMLgt
• ltHEADgt
• ltTITLEgtFrame Example 2lt/TITLEgt
• lt/HEADgt
• ltFRAMESET ROWS"40,"gt
• ltFRAME SRC"menu.html" NAME"menu-frame"gt
• ltFRAME SRC"main.html" NAME"main-page"gt
• lt/FRAMESETgt
• lt/HTMLgt