Basic HTML

1
Website Development

• Basic HTML
• hypertext
• tags elements
• text formatting
• hyperlinks
• images
• tables
• frames

2
Hypertext HTML

• HyperText Markup Language (HTML) is the language
  for specifying the static content of Web pages
• hypertext refers to the fact that Web pages are
  more than just text
• can contain multimedia, provide links for jumping
  within without
• markup refers to the fact that it works by
  augmenting text with special symbols (tags) that
  identify structure and content type

3
Web development tools

• many high-level tools exist for creating Web
  pages
• e.g., Microsoft FrontPage, Netscape Composer,
  Adobe PageMill,
• Macromedia DreamWeaver, HotDog,
• also, many applications have "save to HTML"
  options (e.g., Word)
• for most users who want to develop basic, static
  Web pages, these are fine
• assembly language vs. high-level language analogy

so, why are we learning low-level HTML using a
basic text editor?

• may want low-level control
• may care about size/readability of pages
• may want to "steal" page components and integrate
  into existing pages
• may want dynamic features such as scripts or
  applets

4
Tags vs. elements

• HTML specifies a set of tags that identify
  structure and content type
• tags are enclosed in lt gt
• ltimg src"image.gif" /gt specifies an image
• most tags come in pairs, marking a beginning and
  ending
• lttitlegt and lt/titlegt enclose the title of a page

• an HTML element is an object enclosed by a pair
  of tags
• lttitlegtMy Home Pagelt/titlegt is a TITLE element
• ltbgtThis text appears bold.lt/bgt is a BOLD element
• ltpgtPart of this text is ltbgtboldlt/bgt.lt/pgt
• is a PARAGRAPH element that contains a BOLD
  element

HTML document is a collection of elements
(text/media with context)
5
Structural elements

• an HTML document has two main structural elements
• HEAD contains setup information for the browser
  the Web page
• e.g., the title for the browser window, style
  definitions, JavaScript code,
• BODY contains the actual content to be displayed
  in the Web page

lthtmlgt lt!-- page01.html --gt lt!-- Demo web page
--gt ltheadgt lttitlegtTitle for
Pagelt/titlegt lt/headgt ltbodygt Text that appears
in the page lt/bodygt lt/htmlgt
HTML documents begin and end with lthtmlgt and
lt/htmlgt tags Comments appear between lt!-- and
--gt HEAD section enclosed between ltheadgt and
lt/headgt BODY section enclosed between ltbodygt and
lt/bodygt
6
Text layout

• the BODY can contain multiple lines of text
• text layout and spacing is pretty much ignored by
  the browser
• every sequence of whitespace is interpreted as a
  single space
• browser automatically wraps the text to fit the
  window size
• ? can layout text in an HTML document for
  readability, will not affect how it is viewed

lthtmlgt lt!-- page02.html --gt lt!-- Demo web
page --gt ltheadgt lttitlegtTitle for
Pagelt/titlegt lt/headgt ltbodygt This is a whole
lot of text that goes on and on and
on and on . . . lt/bodygt lt/htmlgt
7
Overriding default layouts
lthtmlgt lt!-- page03.html --gt lt!-- Demo web
page --gt ltheadgt lttitlegtTitle for
Pagelt/titlegt lt/HEADgt ltbodygt ltpgt This is a
paragraph of textltbr/gt made up of two lines.
lt/pgt ltpgt This is another paragraph with a
nbsp GAP nbsp between some of the words.
lt/pgt ltpgt nbspnbsp This paragraph
isltbr/gt indented on the first lineltbr/gt but
not on subsequent lines. lt/pgt lt/bodygt lt/htmlgt

• for the most part, layout of the text must be
  left to the browser
• WHY?
• can override some text layout
• can cause a line break using the ltbr/gt tag (no
  closing tag)
• can specify a new paragraph (starts on a new
  line, preceded by a blank line) using ltpgtlt/pgt
• can force a space character using the symbol for
  a non-breaking space nbsp

8
Separating blocks of text

• can specify headings for paragraphs or blocks of
  text
• lth1gtlt/h1gt tags produce a large, bold heading
• lth2gtlt/h2gt tags produce a slightly smaller
  heading
• . . .
• lth6gtlt/h6gt tags produce a tiny heading
• can insert a horizontal rule to divide sections
• lthr/gt draws line across window
• lthr width"50" /gt sets width
• lthr size10 /gt sets thickness

lthtmlgt lt!-- page04.html --gt lt!-- Demo web page
--gt ltheadgt lttitlegtTitle for
Pagelt/titlegt lt/headgt ltbodygt lth1gtMajor heading
1lt/h1gt ltpgt Here is some text. lt/pgt
lth2gtSubheadinglt/h2gt ltpgt Here is some
subtext. lt/pgt lthr/gt lth1gtMajor heading
2lt/h1gt ltpgt Here is some more text.
lt/pgt lt/bodygt lt/htmlgt
9
Aligning text
lthtmlgt lt!-- page05.html --gt lt!-- Demo web page
--gt ltheadgt lttitlegtTitle for Pagelt/titlegt lt/head
gt ltbodygt lth1 style"text-aligncenter"gtCentered
Headinglt/h1gt ltpgt Here is some left-justified
text (which is the default in HTML). lt/pgt
ltp style"text-aligncenter"gt Here is some
centered text. lt/pgt ltdiv style"text-alignri
ght"gt lth2gtRight-justified Headinglt/h2gt
ltpgtHere is some right-justified text.lt/pgt
lt/divgt lt/bodygt lt/htmlgt

• can specify how elements should be aligned
  (default is left-justified)
• utilize STYLE attribute of tag
• to justify more than one element as a group, use
  DIV tags
• ell elements enclosed in DIV are formatted
  similarly

10
Text styles

• can specify styles for fonts
• ltbgt lt/bgt specify bold
• ltigt lt/igt specify italics
• ltugt lt/ugt specify underlined
• ltttgt lt/ttgt specify typewriter-like (fixed-width)
  font
• ltbiggt lt/biggt increase the size of the font
• ltsmallgt lt/smallgt decrease the size of the font
• Note if elements are nested, the order of
  opening/closing is important!
• (must be LIFO)

lthtmlgt lt!-- page06.html --gt lt!-- Demo web
page --gt ltheadgt lttitlegtTitle for
Pagelt/titlegt lt/headgt ltbodygt ltpgt Text can be
emphasized using ltbgtboldlt/bgt, ltigtitalicslt/igt,
or even ltbiggtresizinglt/biggt. ltbr/gt
ltugtUnderlininglt/ugt text is not generally
recommended since it looks too much a like a
hyperlink. ltbr/gt The typewriter font is good
for displaying code ltsmallgtltttgtsum sum
ilt/ttgtlt/smallgt lt/pgt lt/bodygt lt/htmlgt
11
More text styles

• ltsubgt lt/subgt specify a subscript
• ltsupgt lt/supgt specify a superscript
• ltp style"colorred"gt lt/pgt for paragraphs
• ltspan style"colorblue"gt lt/spangt for inline text

lthtmlgt lt!-- page07.html --gt lt!-- Demo web
page --gt ltheadgt lttitlegtTitle for
Pagelt/titlegt lt/headgt ltbodygt ltpgt ltspan
style"colorred"gtSubscriptslt/spangt (e.g.,
xltsubgt1lt/subgt) and ltspan style"colorblue"gtsup
erscripts lt/spangt (e.g., 2ltsupgt10lt/supgt) can
be embedded directly in text. lt/pgt ltpgt In
order to avoid affecting line spacing, usually
it should be made smaller (e.g.,
ltsmallgt2ltsupgt10lt/supgtlt/smallgt).
lt/pgt lt/bodygt lt/htmlgt
12
More text grouping

• ltpregtlt/pregt specify text that is to be displayed
  as is (line breaks and spacing are preserved)
• useful for code or whenever you want text to fit
  a specific layout
• ltblockquotegtlt/blockquotegt specify text that is
  to be indented on both margins
• useful for quotations or for indenting text in
  subsections

lthtmlgt lt!-- page08.html --gt ltheadgt
lttitlegtTitle for Pagelt/titlegt lt/headgt ltbodygt
ltpgt ltttgtltpregt for (i 0 i lt 10 i)
sum sum i lt/pregtlt/ttgt lt/pgt
ltpgt Eagleson's Law states that ltblockquotegt
Any code of your own that you haven't looked
at for six or more months might as well have
been written by someone else. lt/blockquotegt
lt/pgt lt/bodygt lt/htmlgt
13
Lists

• there are 3 different types of list elements
• ltolgtlt/olgt specifies an ordered list (using
  numbers or letters to label each list item)
• ltligt identifies each list item
• can set type of ordering, start index
• ltulgtlt/ulgt specifies unordered list (using a
  bullet for each)
• ltligt identifies each list item
• ltdlgtlt/dlgt specifies a definition list
• ltdtgt identifies each term
• ltddgt identifies its definition

lthtmlgt lt!-- page09.html --gt ltheadgt
lttitlegtTitle for Pagelt/titlegt lt/headgt ltbodygt
ltpgt ltolgt ltligtFirst thing. ltligtSecond
thing. ltligtThird thing. lt/olgt lt/pgt
ltpgt ltdlgt ltdtgtHTML ltddgtHyperText Markup
Language ltdtgtHTTP ltddgtHyperText Transfer
Protocol lt/dlgt lt/pgt lt/bodygt lt/htmlgt
14
Hyperlinks

• perhaps the most important HTML element is the
  hyperlink, or ANCHOR
• lta href"URL"gtlt/agt
• where URL is the Web address of the page to be
  displayed when the user clicks on the link
• if the page is accessed over the Web, must start
  with http//
• if not there, the browser will assume it is the
  name of a local file
• lta href"URL" target"_blank"gtlt/agt
• causes the page to be loaded in a new window

lthtmlgt lt!-- page10.html --gt ltheadgt
lttitlegtTitle for Pagelt/titlegt lt/headgt ltbodygt
ltpgt lta href"http//www.csuhayward.edu"gt Cal
State Haywardlt/agt ltbrgt lta href"page09.html"
target"_blank"gt Open page09 in a new
windowlt/agt lt/pgt lt/bodygt lt/htmlgt
15
Hyperlinks (cont.)

• for long documents, you can even have links to
  other locations in that document
• lta name"ident"gtlt/agt
• where ident is a variable for identifying this
  location
• lta href"ident"gtlt/agt
• will then jump to that location within the file
• lta href"URLident"gtlt/agt
• can jump into the middle of another file just as
  easily

lthtmlgt lt!-- page11.html --gt ltheadgt
lttitlegtTitle for Pagelt/titlegt lt/headgt ltbodygt
ltp align"center"gt lta href"HTML"gtHTMLlt/agt
lta href"HTTP"gtHTTPlt/agt lta
href"IP"gtIPlt/agt lta href"TCP"gtTCPlt/agt
lt/pgt ltpgt Computer acronyms ltdlgt lta
name"HTML"gtlt/agtltdtgtHTML ltddgtHyperText Markup
Language lta name"HTTP"gtlt/agtltdtgtHTTP
ltddgtHyperText Transfer Protocol lta
name"IP"gtlt/agtltdtgtIP ltddgtInternet Protocol
lta name"TCP"gtlt/agtltdtgtTCP ltddgtTransfer
Control Protocol lt/pgt lt/bodygt lt/htmlgt
16
Images

• can include images using IMG
• by default, browsers can display GIF and JPEG
  files
• other image formats may require plug-in
  applications for display
• ltimg src"filename" alt"alternate text" /gt
• again, if file is to be accessed over the Web,
  must start with http// (if not, will assume
  local file)

lthtmlgt lt!-- page12.html --gt ltheadgt
lttitlegtTitle for Pagelt/titlegt lt/headgt ltbodygt
ltdiv style"text-aligncenter" ltpgtltimg
border"0" src"heckerb.jpg" width"362"
height"539"gtlt/pgt ltpgtBarbara Heckerlt/pgt
lt/divgt lt/bodygt lt/htmlgt
17
Tables

• tables are common tools for arranging complex
  layout on a Web page
• a table divides contents into rows and columns
• by default, column entries are left-justified, so
  provide for alignment

lthtmlgt lt!-- page13.html --gt ltheadgt
lttitlegtTitle for Pagelt/titlegt lt/headgt ltbodygt
lttablegt lttrgt lttdgtfoolt/tdgt lttdgtbarlt/tdgt
lt/trgt lttrgt lttdgtbizbazlt/tdgt
lttdgtbooboolt/tdgt lt/trgt lt/tablegt lt/bodygt lt/htm
lgt
lttablegtlt/tablegt specify a table
element lttrgtlt/trgt specify a row in the
table lttdgtlt/tdgt specify table data (i.e., each
column entry in the table)
18
Layout in a table

• can have a border on tables using the BORDER
  attribute
• lttable border1gt
• increasing the number makes the border thicker
• can control the horizontal vertical layout
  within cells
• lttd align"center"gt
• lttd align"right"gt
• lttd valign"top"gt
• lttd valign"bottom"gt

lthtmlgt lt!-- page14.html --gt ltheadgt
lttitlegtTitle for Pagelt/titlegt lt/headgt ltbodygt
lttable border1gt lttr align"center"gt
lttdgtfooltbrgtfoolt/tdgt lttd valign"top"gtbarlt/t
dgt lt/trgt lttrgt lttdgtbizbazlt/tdgt
lttdgtbooboolt/tdgt lt/trgt lt/tablegt lt/bodygt lt/ht
mlgt
19
Table width

• by default, the table is sized to fit the data
• can override specify the width of a table
  relative to the page
• lttable width"60"gt
• useful for page footer
• set table width to 100
• 1st column left-justified
• 2nd column right-justified

lthtmlgt lt!-- page15.html --gt ltheadgt
lttitlegtTitle for Pagelt/titlegt lt/headgt ltbodygt
lttable width"100"gt lttrgt lttdgtleft-most
lttd align"right"gtright-mostlt/tdgt
lt/trgt lt/tablegt lt/bodygt lt/htmlgt
20
Other table options

• can control the space between cells margins
  within cells
• lttable cellspacing5gt
• lttable cellpadding5gt
• can add headings
• ltthgt is similar to lttdgt but displays heading
  centered in bold
• can have data that spans more than one column
• lttd colspan2gt
• similarly, can span more than one row
• lttd rowspan2gt

lthtmlgt lt!-- page16.html --gt ltheadgt
lttitlegtTitle for Pagelt/titlegt lt/headgt ltbodygt
lttable border1 cellspacing4
cellpadding8gt lttrgt ltthgtHEAD1lt/thgt
ltthgtHEAD2lt/thgt ltthgtHEAD3lt/thgt lt/trgt lttrgt
lttdgtonelt/tdgt lttdgttwolt/tdgt lttdgtthreelt/tdgt
lt/trgt lttrgt lttd rowspan2
align"center"gt four lt/tdgt lttd colspan2
align"center"gt five lt/tdgt lt/trgt lttrgt
lttdgt six lt/tdgt lttdgt seven lt/tdgt
lt/trgt lt/tablegt lt/bodygt lt/htmlgt
21
Frames

• frames provide the ability to split the screen
  into independent pages
• must define a FRAMESET that specifies the layout
  of the pages
• actual pages to be displayed must be in separate
  files

• can divide vertically
• ltframeset cols"50,50"gt
• or, can divide horizontally
• ltframeset rows"30,,"gt
• causes the browser to divide the remaining
  space evenly among pages

lthtmlgt lt!-- page17.html --gt ltframeset
cols","gt ltframe src"page01.html"gt ltframe
src"page02.html"gt lt/framesetgt lt/htmlgt
22
Frame defaults

• by default, each frame is an independent page,
  scrollable
• the relative size of the frames can be changed by
  dragging the border in between

lthtmlgt lt!-- page18.html --gt ltframeset
rows"35,"gt ltframeset cols","
frameborder0 gt ltframe src"page01.html"gt
ltframe src"page02.html"gt lt/framesetgt ltframe
src"page03.html"gt lt/framesetgt lt/htmlgt

• can specify whether you want a border
• frameborder1 (default)
• frameborder0 no border
• can even nest frames

23
Frame controversy

• frames are probably the most controversial HTML
  feature
• some people love them, some people hate them
• 2 reasonable uses for frames
• as a navigational aid
• can divide the screen into a static menu frame
  and the main frame for navigating a site
• as a means of separating program input from
  output
• can divide the screen into a static man input
  form frame and the main frame for displaying
  output

24
Menu frame

• to create a menu, need to be able to direct links
  to the main frame
• name the frames in the FRAMESET
• specify the frame name as TARGET in the link
• specify _top as target to return to top level of
  browser

lthtmlgt lt!-- menu19.html --gt ltheadgt lttitlegtMenu
of Demoslt/titlegt lt/headgt ltbodygt Links to demo
pages ltpgt lta href"page01.html"
target"main"gtDemo 1lt/agtltbr/gt lta
href"page02.html" target "main"gtDemo
2lt/agtltbr/gt lta href"page03.html" target
"main"gt Demo 3lt/agtltbr/gt lta href"page04.html"
target "main"gt Demo 4lt/agtltbr/gt lta
href"page05.html" target "main"gt Demo
5lt/agtltbr/gt lta href"page06.html" target
"main"gt Demo 6lt/agtltbr/gt lta href"http//www.creig
hton.edu" target"_top" gtCreightonlt/agt lt/pgt lt/b
odygt lt/htmlgt
lthtmlgt lt!-- page19.html --gt ltheadgt lttitlegtDemo
Browserlt/titlegt lt/headgt ltframeset cols"30,"gt
ltframe src"menu19.html" name"menu"gt
ltframe src"page01.html" name"main"gt lt/framesetgt
lt/htmlgt
25
Web rules of thumb

• HTML provides for lots of neat features,
• but just because you can add a feature doesn't
  mean you should!
• don't add features that distract from the content
  of the page
• use color fonts sparingly and be careful how
  elements fit together
• e.g, no purple text on a pink background, no
  weird fonts
• use images only where appropriate
• e.g., bright background images can make text hard
  to read
• e.g., the use of clickable images instead of
  buttons or links can slow access
• don't rely on window or font size for layout
• e.g., font size may be adjusted by viewer, window
  constrained
• dont be annoying
• e.g., no pop-up windows, excessive advertising,
  silly music
• break large document into smaller or provide a
  menu (either internal or frame)

26
End of LectureNext time, more HTML