Copyright 2007, Information Builders. Slide 1 Understanding Basic HTML Amanda Regan Technical Director June, 2008

Copyright 2007, Information Builders. Slide 2 What is HTML?  Hypertext Markup Language  Used to create Web pages  Easy to understand and write

Copyright 2007, Information Builders. Slide 3 What is HTML?  Implemented by elements, which:  Control structure and behavior  Are not case sensitive  Generally consist of three parts:  Start tag, such as  Content  End tag, such as  May have assigned attributes 

Copyright 2007, Information Builders. Slide 4 What is HTML?  Root element HTML contains all other elements.  HTML documents consist of two basic parts:  Header section (HEAD element)  Contains information about the document  Must include a TITLE element  Body  Contains document’s actual content  BODY element, or  FRAMESET element

Copyright 2007, Information Builders. Slide 5 The HEAD Element  TITLE – required; displayed on browser’s top bar  BASE – specifies base pathname for all URLs  META – provides additional information about the document  SCRIPT – places a script inside the document

Copyright 2007, Information Builders. Slide 6 Design Elements

Copyright 2007, Information Builders. Slide 7 The SPAN Element  Identifies a generic inline element, such as informational text.  To generate a SPAN element:

Copyright 2007, Information Builders. Slide 8 The IMG Element  Places an image on the page.  The src attribute is required.  To generate an IMG element:

Copyright 2007, Information Builders. Slide 9 Specifying Styles  Three ways to insert a CSS stylesheet:  External Style Sheet – used when the style is applied to many pages. Each page must link to the style sheet using the tag, which goes inside the head section.  Internal Style Sheet – used when a single document has a unique style. You define internal styles in the head section with the tag.  Inline Styles – used when a unique style is to be applied to a single occurrence of an element. The style attribute is placed inside the relevant tag, and it can contain any CSS property.

Copyright 2007, Information Builders. Slide 10 The style Attribute  Specifies properties for an inline stylesheet.

Copyright 2007, Information Builders. Slide 11 Data Handling Elements

Copyright 2007, Information Builders. Slide 12 The INPUT Element  Creates a variety of form input controls.  Type of control defined by the type attribute.  Default is text input.  From the Insert menu:

Copyright 2007, Information Builders. Slide 13 The IFRAME Element  Defines an inline frame within a document used for embedding an HTML document in a Web page.  Displays the content of an external document; may display scrolling devices.  From the toolbar:

Copyright 2007, Information Builders. Slide 14 The IFRAME Element (continued)  For example, specifying this frame property...

Copyright 2007, Information Builders. Slide 15 The IFRAME Element (continued) ... produces this HTML code:

Copyright 2007, Information Builders. Slide 16 The TABLE Element  Indicates a table.  Minimum elements are tr (table row) and td (table cells).  From the Insert menu:

Copyright 2007, Information Builders. Slide 17 The FORM Element  Contains controls for collecting user input.  The action attribute (required) specifies the URL of the program that will process the form.  From the toolbar:

Copyright 2007, Information Builders. Slide 18 The FIELDSET Element  Groups related form controls and labels.  From the toolbar:

Copyright 2007, Information Builders. Slide 19 The SELECT Element  Defines a multiple choice menu or a scrolling list box.  From the toolbar:

Copyright 2007, Information Builders. Slide 20 Putting It All Together  Demo: build a simple launch page

Copyright 2007, Information Builders. Slide 21 And finally...  Questions?