html

1
html

• Karl W Broman
• Department of Biostatistics
• Johns Hopkins University
• http//www.biostat.jhsph.edu/kbroman

2
General principles

• Simple is better
• Content over form
• Text before images
• Look at others source
• Be satisfied with what you get

3
Good
4
Not so good
5
About html

• html hypertext markup language
• Like LaTeX
• Plain text files
• Marked up to indicate content (e.g., italics
  surrounded by ltigt and lt/igt)
• The browser interprets the marks to form the page
• A good book
• Musciano Kennedy (2002) Html and xhtml the
  definitive guide, 5th edition. OReilly.

6
At Hopkins Biostat

• On www.biostat.jhsph.edu
• (a.k.a. biosun01.biostat.jhsph.edu)
• ? /home/html/kbroman
• /public_html ? /home/html/kbroman/public_html

7
Website structure

• index.html or default.htm
• public_html/publications
• /presentations
• /personal
• /teaching
• /posters
• /software

8
Basic marks

• lth1gt lth5gt Headers of different sizes
• ltpgt Start paragraph
• ltbrgt Line break
• lthrgt Horizontal rule

9
Marks can take arguments

• ltp align"left"gt
• ltp align"right"gt
• ltp align"center"gt

10
A basic page

• lthtmlgtltheadgtlttitlegtMy example pagelt/titlegt
• lt/headgtltbodygt
• lth2gtThis is an example pagelt/h2gt
• ltpgtI can write a bunch of stuff here.
• ltpgtAnd then create a new paragraph.ltbrgt
• Or I can just start a new line.
• lthrgt
• ltp align"right"gtltfont size2gtSmall stuff on the
  rightlt/fontgt
• lt/bodygtlt/htmlgt

11
As seen in the browser
12
Links

• lta href"http//www.biostat.jhsph.edu/kbroman"gtMy
  home pagelt/agt
• lta href"publications"gtMy publicationslt/agt
• lta href"publications/mypaper.pdf"gtpdf (200k)lt/agt

13
Images

• lta href"myphoto.jpg"gtA link to a picturelt/agt
• ltimg src"myphoto.jpg" alt"A description"gt

14
Fonts, etc.

• ltfont color"red"gtMake this red.lt/fontgt
• ltbgtThis will be boldlt/bgt but this wont be.
• ltigtThis will be in italicslt/igt but not this.

15
In the browser
16
Lists

• ltpgtAn ordered list
• ltolgt
• ltligtThe first item.
• ltligtThe second item.
• lt/olgt
• ltpgtAn unordered list with gaps between items
• ltulgt
• ltligtThe first item.lt/ligtltpgt
• ltligtThe second item.lt/ligtltpgt
• ltligtThe third item.lt/ligt
• lt/ulgt

17
In the browser
18
More lists

• ltpgtFancier list
• ltolgt
• ltligtThe first item.
• ltol typeagt
• ltligtSub item one.
• ltligtSub item two.
• lt/olgt
• ltligtThe second item.
• lt/olgt

19
In the browser
20
Tables

• lttable noborder cellpadding3 cellspacing3gt
• lttrgtlttdgtltbgtCol 1lt/bgt
• lttdgtltbgtCol 2lt/bgt
• lttdgtltbgtCol 3lt/bgt
• lttrgtlttdgtThe second row
• lttdgtMore here
• lttdgtYet more
• lttr height20gtlttdgtnbsp lt!-- Thats a space --gt
• lttrgtlttdgtRow after a gap
• lttd colspan2gtHeres a bunch of stuff
  covering two columns.
• lt/tablegt

21
In the browser
22
A few more points

• I often use lttd valign"top"gt in tables to get
  things to line up properly.
• I often include extra empty columns to put bigger
  gaps between the non-empty columns.
• Sometimes I need to put a nbsp in a cell to get
  my empty columns to work.
• You can use lttd width10gt or lttd width15gt to
  refer to width relative to the browser or in
  pixels.
• The lttablegt tag can also take a width argument.

23
Cascading style sheets

• Make it easier to have a consistent style on all
  of your web pages.
• Create a file like "myformat.css" containing
  various information about font types, sizes, and
  colors and such. (Or use someone elses file.)
• Include a reference to it in each html file.

24
kbroman.css

• BODY color black background-color ffe
  font-family arial font-size 14px
• H1 color 039 font-family arial font-size
  25px
• H2 color 039 font-family arial font-size
  22px
• H3 color 039 font-family arial font-size
  17px
• H4 color 039 font-family arial font-style
  italic
• font-size 14px font-weight normal
• H4.indent color 039 font-family arial
  font-style italic font-size 14px font-weight
  normal margin-left 14px
• H5 font-family arial font-size 10px
• A color 90C text-decoration none
• Alink color 90C text-decoration none
• Avisited color 90C text-decoration none

25
And more

• P.vlarge font-family arial font-size 20px
• P.large font-family arial font-size 17px
  margin-left 14px
• P.lgnoindent font-family arial font-size
  17px margin-left 0
• P.noindent font-family arial font-size 14px
  margin-left 0
• P.small font-family arial font-size 10px
  margin-left 0
• P color black font-family arial font-size
  14px margin-left 14px
• CODE color blue font-family courier
  font-size 14px
• CODE.large color blue font-family courier
  font-size 17px margin-left 14px
• PRE color blue font-family courier
  font-size 14px
• PRE.indent color blue font-family courier
  font-size 14pxmargin-left 28px

26
The top of my page

• lthtmlgtltheadgt
• lttitlegtKarl W Bromanlt/titlegt
• ltmeta name"description" content"Home page of
  Karl Broman, Associate Professor of Biostatistics
  at Johns Hopkins University"gt
• ltlink relstylesheet type"text/css"
  href"kbroman.css"gt
• lt/headgt
• ltbodygt
• ltp classnoindentgt