Embed Size (px)
Citation preview
Copyright 2007, Information Builders. Slide 1
Understanding Basic HTML
Amanda ReganTechnical 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 <BODY>ContentEnd tag, such as </BODY>
May have assigned attributes<BODY align=“center”>
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 documentMust include a TITLE element
BodyContains document’s actual content
BODY element, orFRAMESET element
Copyright 2007, Information Builders. Slide 5
The HEAD Element
TITLE – required; displayed on browser’s top barBASE – specifies base pathname for all URLsMETA – provides additional information about the documentSCRIPT – 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 <link> 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 <style> 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?
