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

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

3. 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 

4. 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

5. 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

6. Copyright 2007, Information Builders. Slide 6 Design Elements

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

8. 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:

9. 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.

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

11. Copyright 2007, Information Builders. Slide 11 Data Handling Elements

12. 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:

13. 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:

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

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

16. 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:

17. 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:

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

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

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

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