Tutorial 1 Creating Web Pages With HTML

1
Tutorial 1 Creating Web Pages With HTML

• By Marge Hohly
• Professor

2
Points to Cover

• HTML Page
• Basic page format
• Headings and properties for tags
• Paragraph tags
• Tag types
• Lists

• Character Tags
• Special Characters
• Horizontal Lines
• Graphics
• Practice page to code with class.

3
Creating an HTML Document

• HTML document parts
• Document Content
• What you see, text graphics
• Tags
• Controls appearance of the document content
• Tag generic syntax
• ltTag Name Propertiesgt Content lt/Tag Namegt
• ltH1 ALIGNCentergtMy Web Pagelt/H1gt

4
Web Page Basic Format

• ltHTMLgt
• ltHEADgt
• lt/HEADgt
• ltBODYgt
• lt/BODYgt
• lt/HTMLgt
• Basic Webpage Template
• View Basic page in browser

5
Heading Tags

• Heading elements affects the appearance of
  document content (Text)
• Heading tags Examples

6
Adding Properties to Tag

• Properties
• Header tags started to contain properties with
  HTML 3.2 version
• Align tag
• Center
• Left (Default)
• Right
• Header with Properties examples

7
Tag Types

• Opening tag
• The tag that turns on a particular layout feature
  in HTML.
• Opening tags are enclosed in lt gt symbols.
• Closing tag
• The tag that turns off a particular layout
  feature in HTML.
• Closing tags are enclosed in lt/ gt.

• Two-sided tag
• A tag that requires an opening and closing tag.
• ltH1gt Initial Heading lt/H1gt
• ltBgt Makes texts bold lt/Bgt
• One-sided tag
• A tag that does not require an opening and
  closing tag.
• ltHRgt Horizontal Rule or ltBRgt line Break

8
Paragraph Tags

• Defines the beginning and end of a paragraph of
  text.
• ltPgt The text of a paragraph lt/Pgt
• To insert a blank line use ltPgtlt/Pgt
• AlignOPTION where OPTION is either LEFT, CENTER,
  or RIGHT
• Example ltP ALIGNCENTERgt Text lt/Pgt

9
List Tags

• Unordered List
• Ordered List
• Definition List

10
Unordered List

• Know as a bulleted list
• ltULgt ltLIgt Line item lt/LIgt ltLIgt Line item
  lt/LIgt ltLIgt Line item lt/LIgtlt/ULgt
• Use starting and closing tags for all parts
• Unordered List Example

11
Ordered List

• Numbered List
• ltOLgt ltLIgt Line item lt/LIgt ltLIgt Line item
  lt/LIgt ltLIgt Line item lt/LIgtlt/OLgt
• Can modify the number type using properties
• Ordered List Example

12
Definition List

• A list of terms and their definitions line
• ltDLgt ltDTgt Term ltDDgt Definition line ltDTgt Term
  ltDDgt Definition line ltDTgt Term ltDDgt Definition
  line lt/DLgt
• Definition List Example

13
Adding Properties to Lists

• Unordered list can vary the shape of the bullet
• For example, circle, disk, square
• Type Property for Unordered Lists

14
Nested Lists

• A list within a list
• ltULgt ltLIgt Catslt/LIgt ltLIgt Dogslt/LIgt
  ltULgt ltLIgt Cockerlt/LIgt ltLIgt
  Poodlelt/LIgt lt/ULgt ltLIgt Birdslt/LIgtlt/ULgt
• Indenting helps you avoids errors in coding, but
  makes no difference in appearance
• Example Nested List

15
Character Tags

• Logical character tag
• Physical character tag

16
Logical Character Tags

• Indicates how the text is used, not necessarily
  how it is displayed
• Different browsers may interpret slightly
  differently
• Examples of Logical Character tags

17
Physical Character Tags

• Indicates exactly how text is to be formatted and
  displayed
• Examples of Physical Character Tags

18
Special Characters

• Sometimes you want to include characters in your
  Webpage that dont appear on your keyboard
• Sometimes you want to insert a non-character or
  numeric character like lt gt etc.
• Insert the code for the character ie 60 for a
  lt
• ExamplesSpecial Characters

19
Horizontal Lines

• To display a horizontal line in a web page use
  the Horizontal Rule tag
• The basic tag is ltHRgt
• Examples Horizontal Rules

20
Inline Image

• An image that appears directly on a Web page.
• Image inserted into the document where the anchor
  is placed.
• Example Inline Image

21
Simple Link

• A highlighted phrase or keyword that moves you
  from one topic to another after being clicked or
  activated.
• Example

22
Class Practice page

• Class will design and code a sample simple
  WebPages.
• Include
• At Least 2 levels of headings
• List
• Horizontal line
• Link (optional)
• Graphic (coffee cup)