HTML in 21 minutes

1
HTML in 21 minutes

• A legal HTML document (html/legalt.html)
• lthtmlgt
• ltheadgt
• lttitlegtMy Sitelt/titlegt
• lt/headgt
• ltbody bgcolorwhitegt
• lth2gtMy Sitelt/h2gt
• See the page
• lta href"http//www.it-c.dk/courses/W2/F2004/"gt
• Web Publishing with Databaseslt/agt
• lt/bodygt
• lt/htmlgt
• It can be difficult to format HTML code nicely
  but try to be consistent!
• Write the HTML code yourself!
• Later we shall construct programs that generate
  HTML code!

2
General Page Layout (ps1-extra.html)

• You should know about the following tags in HTML
• Headings/Overskrifter lth1gt. . .lt/h1gt, . . . ,
  lth4gt. . .lt/h4gt
• Rules (vandret streg) lthr /gt
• Paragraphs and line breaks ltpgt. . .lt/pgt, ltbr /gt
• Quotes ltblockquotegt. . .lt/blockquotegt
• Centering ltcentergt. . .lt/centergt
• Bold eller fed text ltbgt. . .lt/bgt
• Italic eller kursiv text ltigt. . .lt/igt
• Underlined eller understreget text ltugt. . .lt/ugt
• Ordered lists ltolgt. . .lt/olgt
• Unordered lists ltulgt. . .lt/ulgt
• List items ltligt. . .lt/ligt

3
Hyper links (ps1-extra.html)

• Hyper links lta href"link"gtnamelt/agt
• Local named hyper links lta name"thename"gt. .
  .lt/agt
• References to a name lta href"index.htmlthename"
  gtThe Namelt/agt
• Mail-to links lta href"mailtonh_at_itu.dk"gtnh_at_itu.d
  klt/agt
• Tables lttablegt. . .lt/tablegt, lttrgt. . .lt/trgt,
  ltthgt. . .lt/thgt and lttdgt. . .lt/tdgt
• Images ltimg src"pluto.jpg" /gt
• Colors
• ltfont color"red"gt. . .lt/fontgt
• and
• ltbody bgcolor"yellow"gt. . .lt/bodygt

4
HTML forms

• A form can contain text areas (lttextareagt), input
  fields (ltinputgt), and menus (ltselectgt)
• Example html/formular.html (and formular2.html)
• ltform action"mailtomael_at_itu.dk"
• method"post" enctype"text/plain"gt
• ... more code ...
• ltinput type"reset" value"Start Over!" /gt
• ltinput type"submit" value"Send Form" /gt
• lt/formgt
• Attributes to the ltformgt tag
• action"mailtomael_at_itu.dk"
• the completed form is sent by email
• method"post" should be used when the completed
  form is sent by email
• enctype"text/plain" sends the form as ordinary
  text (not encoded)
• A click on ltinput type"submit" value"Send Form"
  /gt sends the completed form.
• A click on ltinput type"reset" value"Start Over"
  /gt resets all fields, text areas, and menues.

5
Text Areas lttextareagt

• In a text area (lttextareagt) any text can be
  written
• lttextarea name"comments" rows"5" cols"80"gt
• Write your comments here!
• lt/textareagt
• The attributes
• name specifies a name for the field
• rows specifies the number of lines (rows) in the
  text area
• cols specifies the number of characters (columns)
  in each line in the text area

6
Input Fields ltinputgt

• The attribute type determines the type of the
  input field
• Single-line text areas
• ltinput type"text" name"lastname" /gt
• Passwords, which are not to be displayed by the
  browser
• ltinput type"password" name"studentid" /gt
• Check boxes, possibly more than one item can be
  checked at a time
• ltinput type"checkbox" name"paper"
  value"nytimes" /gt
• ltinput type"checkbox" name"paper"
  value"wpost" /gt
• ltinput type"checkbox" name"paper"
  value"guardian" /gt
• Radio buttons, only one item can be checked at a
  time
• ltinput type"radio" name"sex" value"male" /gt
• ltinput type"radio" name"sex" value"female"
  checked"yes" /gt
• Button for resetting a form
• ltinput type"reset" ... /gt
• Button for sending a completed form
• ltinput type"submit" ... /gt

7
Menu Choices, ltselectgt

• A drop-down menu, which allows the user so choose
  between a series of items (ltoptiongt)
• ltselect name"order"gt
• ltoption value"9"gtPepperoni Pizzalt/optiongt
• ltoption value"70"gtPizza Bambinolt/optiongt ltopt
  ion value"47"gtChicken Dipper (9 pieces)lt/optiongt
• lt/selectgt
• The attribute multiple in the ltselectgt tag allows
  the user to choose more than one item.
• Complete form html/formular.html
• With a nicer lay-out (using lttablegt)
  html/formular2.html

8
Completed questionnaire, when it is received via
email

• With enctype"text/plain"
• lastnameOlsen
• studentidda4567
• sexmale
• paperguardian
• commentsThis is not a nice questionnaire.
• order9
• Without enctype"text/plain"
• lastnameOlsenstudentidda4567sexmalepapergu
  ardian
• commentsThisisnotanicequestionnaire.order
  9