Outline

– Introduction to HTML HyperText Markup Language – Designing Documents for the (HTML) § Creating and publishing a Web page § Validating a document § Main HMTL elements – Block-level HTML elements – Text-level HTML element – Creating hypertext links – Adding images to documents – Building tables

CS 4390 Web Programming Introduction to HTML 2

The World Wide Web The World Wide Web

• Definitions – HTTP § The HyperText Transfer Protocol – request/response model – The World Wide Web § The language used by a WWW client (e.g. Netscape, Internet § The Internet is networks of computers that are connected Explorer) to request documents from a WWW server (i.e. the § The Web is the set of computers on the Internet that support program running at Web sites like amazon.com or yahoo.com) HTTP § A stateless protocol – server does not keep any information § In 1989, Tim Berners-Lee and associates proposed the World about the client after it sends its response Wide Web at CERN, The European High-Energy Physics § Interaction between client and server equires a Center request/response exchange (not like stand alone GUI) § The Web has ability to combine text with graphics and other – HTML multimedia § The HyperText Markup Language § The language used to design web pages

CS 4390 Web Programming Introduction to HTML 3 CS 4390 Web Programming Introduction to HTML 4

HyperText Markup Language HTML Example

• Text Mixed with Markup Tags Home Page for Lawrence M. Brown – Tags Enclosed in Angle (

Introduction

)

Home Page for Lawrence M. Brown

• What Does Markup Describe? NSWC Logo – Appearance Senior Network Engineer
– Layout Naval Surface Warfare Center
– Content (Can’t Enforce an Exact Look) 9500 MacArthur Boulevard
West Bethesda, Maryland, MD 20817-5700
email: • Changes in HTML 3.2 to HTML 4.0 [email protected]
Phone: (301) 277-4648
– Standardization of frames

This is my personal home page. For more specific – Deprecation of formatting elements (vs. style sheets) programming-related resources pages, please see: – Improved cell alignment and grouping in tables – Mouse and keyboard events for nearly all elements – Internationalization features CS 4390 Web Programming Introduction to HTML 5 CS 4390 Web Programming Introduction to HTML 6

1 Creating and Publishing a Web Page 1. Create an HTML document Designing Documents for the 2. Place the document in a world-accessible directory (often public_html or www) on a World Wide Web system running an HTTP server 3. Access the web page through http://hostname/~username/filename § E.g. http://www.apl.jhu.edu/~lmb/test.html – If the filename is omitted, a system default filename is assumed (often index.) § E.g. http://www.apl.jhu.edu/~hall/ refers to the file index.html in hall’s public_html directory CS 4390 Web Programming Introduction to HTML 8

Creating and Publishing HTML Document Template a Web Page 4. Validate the Document – Check the syntax using a formal HTML § http://validator.w3.org/ § http://www.htmlhelp.com/tools/validator/ – The version of HTML against which the document is validated is based on the DOCTYPE The WWW Consortium recently added advice that Web pages include information on the character set, even though ASCII or Latin-1 is the default. The validator at http://validator.w3.org/ gives warnings if you omit this. You can ignore such warnings if you wish. CS 4390 Web Programming Introduction to HTML 9 CS 4390 Web Programming Introduction to HTML 10

Main HTML Elements Main HTML Elements

DOCTYPE Declarations HTML: … • Strict HTML 4.01 DOCTYPE Attributes: • Transitional HTML 4.01 DOCTYPE • LANG -- informational, do not change how the text is rendered, language code for or spell • Frameset HTML 4.01 DOCTYPE checker • HTML elements • DIR -- LTR, RTL, Netscape does not support http://www.w3.org/TR/html4/index/elements.html • VERSION – HTML version, browser can determine • HTML attributes the HTML version http://www.w3.org/TR/html4/index/attributes.html

CS 4390 Web Programming Introduction to HTML 11 CS 4390 Web Programming Introduction to HTML 12

2 Main HTML Elements

HEAD: … Attributes: Profile – TITLE … element required – Optional elements: § BASE, META, BGSOUND § SCRIPT, NOSCRIPT, STYLE, LINK

CS 4390 Web Programming Introduction to HTML 13 CS 4390 Web Programming Introduction to HTML 14

BASE Element BASE Element, Example

• Specifies the starting location for relative News Headlines • Attributes: – HREF -- URL of the file

News Headlines

– TARGET -- specify the default to display

National News

Blah, blah, blah.

International News

Yadda, yadda, yadda.

CS 4390 Web Programming Introduction to HTML 15 CS 4390 Web Programming Introduction to HTML 16

META Element , Example

• Records document information, forwards and refreshes pages News Headlines • Attributes and values: – NAME="author", "keywords", "description" – CONTENT (required)

News Headlines

– HTTP-EQUIV="refresh" -- reload the page or

National News

Blah, blah, blah. load a new page

International News

Yadda, yadda, yadda. CS 4390 Web Programming Introduction to HTML 17 CS 4390 Web Programming Introduction to HTML 18

3 BGSOUND Element SCRIPT Element

• Playing sound files (wav, MIDI) • Embed scripting programs, usually • Nonstandard HTML elements JavaScript • Attributes: • Attributes: – SRC -- source file – LANGUAGE -- JavaScript – LOOP -- repeated 1 (default) or –1 or infinite – TYPE (required) – SRC

CS 4390 Web Programming Introduction to HTML 19 CS 4390 Web Programming Introduction to HTML 20

STYLE Element Main HTML Elements

• Specify cascading style sheets BODY Element – • Attributes: – HTML Attributes and Attribute Values – TYPE (required) – text/ § BACKGROUND -- tile small picture § BGCOLOR -- background color – TITLE § TEXT -- foreground color – MEDIA § LINK, VLINK, ALINK – link, visited link, active link color § OnLoad, OnUnload, OnFocus, OnBlur Elements inside BODY element – Remaining HTML elements

CS 4390 Web Programming Introduction to HTML 21 CS 4390 Web Programming Introduction to HTML 22

Block-Level Elements

• Headings – H1 ... H6 Block-Level Elements – ALIGN • Basic Text Sections – P – ALIGN – PRE – WIDTH – ADDRESS – BLOCKQUOTE

CS 4390 Web Programming Introduction to HTML 24

4 Block-Level Elements Block-Level Elements

• Lists • Tables and Forms – OL • Misc. – LI – HR – UL – DIV – CENTER – LI – MULTICOL (Netscape only) – DL – DT – DD

CS 4390 Web Programming Introduction to HTML 25 CS 4390 Web Programming Introduction to HTML 26

Headings Headings

• Heading Types • Attributes: ALIGN –

...

– Values: LEFT (default), RIGHT, CENTER –

...

• Nesting tags –

...

– Headings and other block-level elements can –

...

contain –
...
text-level elements, but not vice versa –
...

CS 4390 Web Programming Introduction to HTML 27 CS 4390 Web Programming Introduction to HTML 28

Headings, Example Headings, Result

Document Headings Samples of the six heading types:

Level-1 (H1)

Level-2 (H2)

Level-3 (H3)

Level-4 (H4)

Level-5 (H5)
Level-6 (H6)
CS 4390 Web Programming Introduction to HTML 29 CS 4390 Web Programming Introduction to HTML 30

5 P – The Basic Paragraph

• Attributes: ALIGN – LEFT (default), RIGHT, CENTER. Same as headings. – Whitespace ignored (use
for line break) § Consecutive

’s do not yield multiple blank lines – End is Optional:

Paragraph 1 Paragraph 1

Paragraph 2

Paragraph 2 Paragraph 3

Equivalent with Implied Tags Paragraph 3

Fully-Specified CS 4390 Web Programming Introduction to HTML 31 CS 4390 Web Programming Introduction to HTML 32

Preformatted Paragraphs

• The PRE Element – 

 ...
• Attributes: WIDTH – Expected width in characters. Not widely supported. • Problem: Special Characters 
 if (a > & & doThat(); " " } Non-breaking space  

CS 4390 Web Programming Introduction to HTML 33 CS 4390 Web Programming Introduction to HTML 34

OL: Ordered (Numbered) Lists OL: Ordered (Numbered) Lists

• OL Element • List entries: LI –

    –
  1. ...
    2. (End Tag Optional)
  2. … – Attributes: (When inside OL) VALUE, TYPE
  3. … ... A sample list:
  4. List Item One – Attributes: TYPE, START, COMPACT
  5. List Item Two
  6. List Item Three

CS 4390 Web Programming Introduction to HTML 35 CS 4390 Web Programming Introduction to HTML 36

6 Nested Ordered Lists UL: Unordered (Bulleted) Lists

  1. Headings
  2. Basic Text Sections
  3. Lists
    1. Ordered • UL Element
      1. The OL tag
          –
          • TYPE
          • START
          • COMPACT
          • …
      2. The LI tag
      3. …
    2. Unordered
        ...
      1. The UL tag
      2. The LI tag
    3. Definition
      1. The DL tag
      2. The DT tag
      3. The DD tag
  4. Miscellaneous
CS 4390 Web Programming Introduction to HTML 37 CS 4390 Web Programming Introduction to HTML 38

UL: Unordered (Bulleted) Lists UL: Custom Bullets

  • The UL tag • Attributes: TYPE, COMPACT
    • TYPE
        – TYPE is DISC, CIRCLE, or SQUARE
      • DISC
      • CIRCLE
      • SQUARE • List entries: LI (TYPE)
    • COMPACT – TYPE is DISC, CIRCLE, or SQUARE
  • The LI tag A sample list:
    • TYPE
        • List Item One
        • DISC
        • List Item Two
        • CIRCLE
        • SQUARE
        • List Item Three
    • VALUE
CS 4390 Web Programming Introduction to HTML 39 CS 4390 Web Programming Introduction to HTML 40

Definition Lists Definition List -- Example

A sample list: • Definition list:

…
HTML – Attributes: COMPACT
HyperText Markup Language
WWW • Definition term:
…
(optional)
World Wide Web – Attributes: None
• Definition description:
…
(optional) – Attributes: None

CS 4390 Web Programming Introduction to HTML 41 CS 4390 Web Programming Introduction to HTML 42

7 Text-Level Elements

• Physical Character Styles – B, I, TT, U, SUB, SUP, SMALL, BIG, STRIKE, S, Text-Level Elements BLINK – FONT § SIZE § COLOR § FACE – BASEFONT -- set the default font size for nonheading text for the remainder of document § SIZE

CS 4390 Web Programming Introduction to HTML 44

Physical Character Styles, Physical Character Styles, Result Example

...

Physical Character Styles

Bold
Italic
Teletype (Monospaced)
Underlined
Subscripts: f0 + f1
Superscripts: x2 + y2
Smaller
Bigger
Strike Through
Bold Italic
Big Monospaced
Small Italic
Gray
Delete
Insert
... CS 4390 Web Programming Introduction to HTML 45 CS 4390 Web Programming Introduction to HTML 46

Logical Character Styles, Text-Level Elements Example • Logical Character Styles ...

Logical Character Styles

– EM -- emphasis Emphasized
– STRONG -- strong emphasis Strongly Emphasized
Code
– CODE -- computer code with fixed width Sample Output
– SAMP -- sample program output Keyboard Text
– KBD – keyboard input Definition
Variable
– DFN -- definition Citation
– VAR -- variable Emphasized Code
Gray Citation
– CITE -- citation JDK – Acronym ... § Attribute: TITLE CS 4390 Web Programming Introduction to HTML 47 CS 4390 Web Programming Introduction to HTML 48

8 Logical Character Styles, Result Text-Level Elements

• Hypertext Links – A § HREF, NAME, TARGET, ... • Images – IMG § SRC (required), ALT, ALIGN, WIDTH, HEIGHT, HSPACE, VSPACE, BORDER, USEMAP, ISMAP • Misc. Text-Level Elements – BR (Explicit line break) – AREA (Client-side image maps) – (Java) – ... CS 4390 Web Programming Introduction to HTML 49 CS 4390 Web Programming Introduction to HTML 50

Hypertext Links Hypertext Links

• Links can contain images and other text-level • Link to Relative URL elements (i.e., ... ) – Use a filename or relative path to filename • Link to Absolute URL § Interpreted wrt location of current file Java is discussed in – Use a complete URL beginning with http:// Chapter 2. Java is discussed in • Link to Section Chapter 2. – Use a section name (see below) preceded by # Images are discussed in Section 2.

CS 4390 Web Programming Introduction to HTML 51 CS 4390 Web Programming Introduction to HTML 52

Hypertext Links IMG: Embedding Images

• Link to Section in URL • Example – Use absolute or relative URL, then #, then section name My Dog • Attributes: Sec. 2 of Chap. 1. – SRC (required) • Naming a Section – ALT (technically required) – Use and do not include the pound – ALIGN sign – WIDTH, HEIGHT

Images

– HSPACE, VSPACE – BORDER

CS 4390 Web Programming Introduction to HTML 53 CS 4390– WebUSEMAP, Programming ISMAP Introduction to HTML 54

9 Image Alignment, Example Image Alignment, Result

Image Alignment

Image Alignment

Alignment Result
LEFT Rude PC This positions the image at the left side, with text flowing around it on the right.
RIGHT Rude PC This positions the image at the right side, with text flowing around it on the left. ...
CS 4390 Web Programming Introduction to HTML 55 CS 4390 Web Programming Introduction to HTML 56

Tables

• Template

Table Elements
Table Caption
Heading1 Heading2
Row1 Col1 DataRow1 Col2 Data
Row2 Col1 DataRow2 Col2 Data
Row3 Col1 DataRow3 Col2 Data

CS 4390 Web Programming Introduction to HTML 58

TABLE Element Attributes TABLE Element Attributes

• ALIGN • CELLSPACING – The ALIGN attribute gives the horizontal alignment of – This gives the space in pixels between adjacent cells. the table as a whole Drawn as a 3D line if BORDER is nonzero, otherwise – Legal values are LEFT, RIGHT, and CENTER, with LEFT being the default empty space in the background color is used • BORDER – The default is usually about 3 – This specifies the width in pixels of the border around • CELLPADDING the table – This is in addition to the border around each cell (the – CELLPADDING determines the empty space, in CELLSPACING). pixels, between the cell’s border and the table element – The default is zero, which also results in the visible 3D – The default is usually about 1 divider between cells being turned off

CS 4390 Web Programming Introduction to HTML 59 CS 4390 Web Programming Introduction to HTML 60

10 TABLE Element Attributes TABLE Element Attributes

• WIDTH • BACKGROUND – This specifies the width of the table, either in pixels – This nonstandard attribute supported by IE gives an (

) or as a percentage of the current image file that will be tiled as the background of the browser width (
) table • BGCOLOR – You might want to use style sheets instead. – Specify the background color of the table TABLE (also • RULES legal for TR, TD, and TH) BORDERCOLOR, – HTML 4.0 attribute that specifies which inner dividing BORDERCOLORDARK, lines are drawn • BORDERCOLORLIGHT – All are drawn if this attribute is omitted – Non standard attributes supported by IE to specify the colors – Legal values are NONE, ROWS, COLS, and ALL to user for the borders CS 4390 Web Programming Introduction to HTML 61 CS 4390 Web Programming Introduction to HTML 62

TABLE Element Attributes Table CAPTION

• FRAME • Attribute – Specifies which outer borders are drawn – ALIGN (Values: TOP, BOTTOM) – All four are drawn if this attribute is omitted • Usage – Legal values are BORDER or BOX (all), VOID – An enclosing borderless table may give more (none), ABOVE (top), BELOW (bottom), flexibility than the built-in CAPTION. HSIDES (top and bottom, despite the somewhat confusing name), VSIDES (left and right), LHS (left), and RHS (right)

CS 4390 Web Programming Introduction to HTML 63 CS 4390 Web Programming Introduction to HTML 64

TR: Table Row TR: Table Row

• TR is used to define each row in the table • BGCOLOR • Each row will then contain TH and/or TD entries – Sets the color for the table row, overriding any values • ALIGN set for the table as a whole via the BGCOLOR attribute – ALIGN (legal values LEFT, RIGHT, or CENTER) is of TABLE used to set the default horizontal alignment for table • BORDERCOLOR, BORDERCOLORDARK, cells • BORDERCOLORLIGHT • VALIGN – Supported only by , these specify the – VALIGN (legal values TOP, MIDDLE, or BOTTOM) colors to use for the row borders is used to set the default vertical alignment for table cells

CS 4390 Web Programming Introduction to HTML 65 CS 4390 Web Programming Introduction to HTML 66

11 Table Cells: TH and TD Table Cells: TH and TD

• COLSPAN • ROWSPAN – COLSPAN defines a heading or cell data entry – ROWSPAN defines a heading or cell data entry that that spans multiple columns spans multiple rows; similar to COLSPAN • ALIGN

– LEFT, RIGHT, CENTER, JUSTIFY and CHAR.
Col 1&2 Heading – E.g., the following aligns entries on a decimal point Col3 Heading
Col1 Data Col2 Data • VALIGN Col3 Data – TOP, BOTTOM, MIDDLE

CS 4390 Web Programming Introduction to HTML 67 CS 4390 Web Programming Introduction to HTML 68

Table Cells: TH and TD Summary

• WIDTH, HEIGHT • A DOCTYPE is required to validate the document – Values in pixels only (no percentages officially • HTML document should have an enclosing allowed) HTML element, a HEAD (TITLE is required) and • NOWRAP a BODY • Documents are composed of block-level and – Use with caution text-level elements • BGCOLOR, BACKGROUND – Text-level elements must be inside block-level – Same as for TABLE and TR elements, not vice versa

CS 4390 Web Programming Introduction to HTML 69 CS 4390 Web Programming Introduction to HTML 70

Summary

• Hypertext links, , can be absolute or relative – A link to a named section is denoted by #section • Tables are composed of main table element,

; rows, ; table headers,
; and table data, – Use BGCOLOR to give background colors to tables, rows, or cells – Use ROWSPAN or COLSPAN to join cells

CS 4390 Web Programming Introduction to HTML 71

12