: Edwin

1
??????

• ?? Edwin
• ?? kcchu6_at_cse.cuhk.edu.hkMSN
  ed_at_edwinchu.infoICQ 46374052???? 98340556
• ???? http//edwincheese.schtuff.com/interactive_w
  eb_programming

2
??????

• ???
• ????HTML

3
HTML

• Hyper Text Markup Language

4
Example 1 My First Homepage
5
Example 1 Explained

• The first tag in a HTML document is lthtmlgt
• This tag tells your browser that this is the
  start of an HTML document
• The last tag in your document is lt/htmlgt
• This tag tells your browser that this is the end
  of the HTML document

6
Example 1 Explained

• Between the ltheadgt tag and the lt/headgt tag is
  header information
• Header information is not displayed in the
  browser window
• Between the lttitlegt tags is the title of your
  document
• The title is displayed in your browser's caption,
  bookmarks, etc

7
Example 1 Explained

• Between the ltbodygt tags is the content that will
  be displayed in your browser
• Paragraphs are defined with the ltpgt tag
• Tables are defined with the lttablegt tag
• HTML uses the ltagt (anchor) tag to create a link
  to another document
• In this example, it is a link to an email address

8
HTML Elements

• HTML documents are text files made up of HTML
  tags and text
• HTML tags are surrounded by the two characters lt
  and gt
• HTML tags usually come in pairs like ltbgt and lt/bgt
• The first tag in a pair is the start tag, the
  second tag is the end tag
• The text between the start and end tags is the
  tag content

9
Tag Attributes

• Tags can have attributes
• Attributes can provide additional information
  about the HTML tag
• Attributes usually come in name/value pairs like
  this name"value"
• Attribute values should always be enclosed in
  quotes
• Double style quotes are the most common, but
  single style quotes are also allowed.
• Examplelta href"mailtokcchu6_at_cse.cuhk.edu.hk"gtk
  cchu6_at_cse.cuhk.edu.hklt/agt
• Which part is the attribute?

10
Basic HTML Tags - Headings

• Headings are defined with the lth1gt to lth6gt tags.
  lth1gt defines the largest heading. lth6gt defines
  the smallest heading
• Try it now
• Examplelth1gtThis is a headinglt/h1gtlth2gtThis is a
  headinglt/h2gt
• lth3gtThis is a headinglt/h3gt
• lth4gtThis is a headinglt/h4gt
• lth5gtThis is a headinglt/h5gt
• lth6gtThis is a headinglt/h6gt

11
Basic HTML Tags - Paragraphs

• Paragraphs are defined with the ltpgt tag
• ExampleltpgtThis is a paragraphlt/pgtltpgtThis is
  another paragraphlt/pgt
• Write a poem inside a paragraph using HTMLMy
  Bonnie lies over the ocean.My Bonnie lies over
  the sea.My Bonnie lies over the ocean.Oh, bring
  back my Bonnie to me.

12
Basic HTML Tags - Paragraphs

• HTML does not preserve line breaks in source
  code, it treats line break as a single space
• Use ltbrgt to insert line break
• ExampleMy Bonnie lies over the ocean.ltbrgtMy
  Bonnie lies over the sea.ltbrgtMy Bonnie lies over
  the ocean.ltbrgtOh, bring back my Bonnie to me.

13
Basic HTML Tags - Comments

• The comment tag is used to insert a comment in
  the HTML source code
• A comment will be ignored by the browser
• You can use comments to explain your code, which
  can help you when you edit the source code at a
  later date
• lt!-- This is a comment --gt

14
Notes on Basic HTML Tags

• HTML automatically adds an extra blank line
  before and after some elements, like before and
  after a paragraph, and before and after a heading
• HTML will truncate the spaces in your text. Any
  number of spaces count as one.

15
Text Formatting

• HTML defines a lot of elements for formatting
  output, like bold or italic text
• Below are a lot of examples that you can try out
  yourself
• What is the effect of each of these tag?

16
HTML Special Characters

• Some characters like the lt character, have a
  special meaning in HTML, and therefore cannot be
  used in the text
• To display a less than sign (lt) in HTML, we have
  to use a character entity
• Try it out (put following text in the body part
  of HTML)nbsp lt gt amp quot
• Non-breaking Space
• Normally HTML will truncate spaces in your text
• If you write 10 spaces in your text HTML will
  remove 9 of them
• To add spaces to your text, use the nbsp
  character entity

17
HTML Special Characters

• Some Other Commonly Used Character Entities (Not
  all browser support all of these entities)

18
HTML HyperLinks

• Some Other Commonly Used Character Entities (Not
  all browser support all of these entities)

19
HyperLinks

• HTML uses hyperlinks to link to another document
  on the Web
• One of the most important feature of HTML
• HTML uses the ltagt (anchor) tag to create a link
  to another document
• An anchor can point to any resource on the Web
  an HTML page, an image, a sound file, a movie,
  etc.
• The href attribute is used to address the
  document to link to
• The name attribute is used to create a named
  anchor
• When using named anchors we can create links that
  can jump directly into a specific section on a
  page
• lta name"tips"gtUseful Tips Sectionlt/agtlta
  href"tips"gtJump to the Useful Tips Sectionlt/agt

20
Relative and Absolute URL

• URL in HTML could be either relative or absolute
• Absolute URL points to the exact location of a
  resource on the Internet
• A complete URL
• Example http//www.cuhk.edu.hk/test.htm
• Relative URL points to a resource in relation to
  the present file location
• Example test.htm

21
Tables

• Tables are defined with the lttablegt tag
• A table is divided into rows (with the lttrgt tag),
  and each row is divided into header cells (with
  the ltthgt tag) or data cells (with the lttdgt tag)
• Examplelttable border"1"gtlttrgtltthgtHeadinglt/thgtltt
  hgtAnother Headinglt/thgtlt/trgtlttrgtlttdgtrow 1, cell
  1lt/tdgtlttdgtrow 1, cell 2lt/tdgtlt/trgtlttrgtlttdgtrow 2,
  cell 1lt/tdgtlttdgtrow 2, cell 2lt/tdgtlt/trgtlt/tablegt
• What is the use of border attribute?
• Try to omit it and observe the difference

22
Tables Cell Spans

• A cell (ltthgt or lttdgt) could may span several rows
  or columns
• The number of rows or columns spanned by a cell
  is set by the rowspan and colspan attributes for
  the ltthgt and lttdgt elements

23
Tables Cell Spans

• Try this sample

lttable border"1"gt lttrgt ltthgtNamelt/thgtltth
colspan"2"gtTelephonelt/thgt lt/trgt lttrgt lttdgtBill
Gateslt/tdgtlttdgt555 77 854lt/tdgtlttdgt555 77
855lt/tdgt lt/trgt lt/tablegt lttable border"1"gt lttrgt
ltthgtFirst Namelt/thgtlttdgtBill Gateslt/tdgt lt/trgt lttr
gt ltth rowspan"2"gtTelephonelt/thgtlttdgt555 77
854lt/tdgt lt/trgt lttrgt lttdgt555 77
855lt/tdgt lt/trgt lt/tablegt
24
Generic Block - Division

• ltdivgt defines a generic block in a HTML document
  but impose no other presentational idioms
• Authors may use these elements in conjunction
  with style sheets to tailor HTML to their own
  needs and tastes
• Like ltpgt and lth1-6gt, HTML automatically adds an
  extra blank line before and after ltdivgt

25
Lists

• HTML supports ordered, unordered and definition
  lists
• Unordered Lists
• ltulgtltligtCoffeelt/ligtltligtMilklt/ligtlt/ulgt
• Ordered Lists
• ltolgtltligtCoffeelt/ligtltligtMilklt/ligtlt/olgt
• Definition Lists
• ltdlgtltdtgtCoffeelt/dtgtltddgtBlack hot
  drinklt/ddgtltdtgtMilklt/dtgtltddgtWhite cold
  drinklt/ddgtlt/dlgt

26
Images

• Images are defined with the ltimggt tag
• Syntax ltimg srcURLgt
• The alt attribute is used to define an "alternate
  text" for an image
• Alternate text is display when the image could
  not be loaded
• ltimg src"http//www.cuhk.edu.hk/v5/en/img/banner_
  01.jpg" altCUHK"gt

27
Forms

• HTML forms are used to collection information
  from user
• A HTML form begins with ltformgt tag
• ltform name"input" actionguestbook.php"
  method"get"gt
• When the user clicks on the "Submit" button, the
  content of the form is sent to the URL
  represented by the action attribute
• The method attribute define the HTTP request type
  when submitting the form
• GET or POST

28
Example 2 - Form
29
Example 2 - Form
30
Other Form Elements

• Checkbox
• ltinput typecheckbox nameNAME
  checkedchecked valueongt
• Reset
• ltinput typereset nameNAME valueReset Megt
• Button
• ltbutton typesubmitgtClick Melt/buttongt
• You could even put image inside ltbuttongt

31
More Information on HTML

• HTML is a powerful and huge language to describe
  a hypertext document
• Near 100 of tags in total
• HTML Tags Reference
• http//w3schools.com/tags/default.asp

32
Standard Compliance HTML

• HTML have been evolving for more than ten years
• Different browser render the same HTML page
  slightly differently
• Microsoft Internet Explorer VS Mozilla Firefox
• HTML is standardized by W3C - The World Wide Web
  Consortium
• Software venders should make their browser
  compliance to the rendering standard of HTML
• Writing standard compliance HTML allow your web
  pages to be viewed in different browsers without
  major defects (Cross-browser)
• No Best view in Internet Explorer notation again

33
Writing Standard Compliance HTML

• We will concentrate on HTML 4.01 standard in this
  section
• XHTML 1.0 is another HTML standard defined by W3C
• Standard HTML file begins with DOCTYPE
• Example
• lt!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN"
  "http//www.w3.org/TR/html4/strict.dtd"gt
• Should not use attributes or tags which is aimed
  to specify presentational parameters, like font
  face, font size, color, background, line
  separation, etc

34
HTML 4.01 VS HTML 3.2

• HTML 3.2 Was Very Wrong
• HTML 3.2 introduce tags like ltfontgt and color
  attribute for formatting a document
• It started a nightmare for web developers
• Development of large web sites where fonts and
  color information had to be added to every single
  Web page

35
HTML 4.01 VS HTML 3.2

• The original HTML was never intended to contain
  tags for formatting a document
• HTML tags were intended to define the content and
  structure of the document
• In HTML 4.01 all formatting can be removed from
  the HTML document and stored in a separate style
  sheet
• HTML 4.01 separates the presentation from the
  document structure
• Total control of presentation layout without
  messing up the document content
• We will introduce Cascading Style Sheets in next
  class
• Beautify your web page using CSS!

36
Validate Your HTML Files as HTML 4.01

• Try validating your HTML file just created
• http//validator.w3.org/
• Probably many errors occurred, because HTML
  standard is very strict

37
Task of Today!

• Create a personal web page with
• An page heading
• A self introduction section
• A photo of someone
• A class timetable
• A form which submitting to guestbook.php
• Pass HTML 4.01 validation