Dr Graeme McRobbie J113

1
Web Page Development I

• Dr Graeme McRobbie (J113)
• mcro-ee0_at_wpmail.paisley.ac.uk
• 0141 848 3411

2
Descriptor

• 12hrs Lectures/Seminars
• 48hrs Practicals/ Projects

3
Assessment

• 100 Continuous Assessment
• 40 HTML Assessment (Week 6)
• 20 Multiple Choice Exam (Week 9)
• 40 Dreamweaver Assessment (Week 12)

4
Contents

• An Introduction to HTML 4.0
• Web Page Creation With Dreamweaver 3.0

5
References

• Ragget On HTML 4
• D. Ragget, Pearson Education, 1998
• An Introduction To Dreamweaver 3.0
• M. Stonelaw, Addison Wesley, 1999

6
Section 1

• Introduction To HTML

7
What Is HTML?

• HTML (Hypertext Markup Language) is a set of
  logical codes in parentheses that constitute the
  appearance of a web document and the information
  it contains
• Eg
• ltBgtThis text would appear bold in the browserlt/Bgt

8
What Is HTML?

• The codes are enclosed by less than "lt", and
  greater than "gt" brackets
• These bracketed codes of the markup are commonly
  referred to as tags
• HTML codes are always enclosed between brackets
  and are not case-sensitive
• However, tags are easier to recognise in a web
  document if they are capitalised

9
What Is HTML?

• Most lines of code have an opening tag and a
  closing tag distinguished by the "/" inside the
  "lt" opening bracket
• The first word or character that appears inside
  the "lt" opening bracket is called the element
• An element is a command that tells the browser to
  do something

10
What Is HTML?

• Words that follow the element and are contained
  inside the "gt" bracket of the opening tag are
  called attributes
• Attributes are not repeated or contained in the
  closing element
• Attributes that appear to the right of the
  element are separated by a space, and followed by
  an equal sign
• The value of the attribute is contained in quotes

11
What Is HTML?

• In the following example the element is FONT, the
  attribute is COLOUR, and the value of that
  attribute is BLUE
• Eg
• ltFONT COLOUR"BLUE"gtThis text would be
  bluelt/FONTgt

12
What Is HTML?

• Most HTML elements have more than one attribute
• Eg
• ltFONT COLOUR"BLUE" SIZE"1"gtThis text would be
  blue and one size larger than normallt/FONTgt

13
A Basic Document

• An element called HTML surrounds the whole
  document
• This element contains two sub-elements, HEAD and
  BODY
• These elements are required to form any HTML
  document

14
A Basic Document

• ltHTMLgtltHEADgt has sub-elements that define header
  materialltTITLEgt document title -the title of
  your document is what appears in a web browsers
  Favourite or Bookmark list lt/TITLEgtlt/HEADgtltBODYgt
  the remaining HTML elements are contained within
  these tags lt/BODYgtlt/HTMLgt

15
Section 2

• Overview Of HTML Page Creation

16
Choosing A Text Editor

• HTML Editors enable users to create documents
  quickly and easily by pushing a few buttons
• Instead of entering all of the HTML codes by
  hand, these programs will generate the HTML
  source code for you
• HTML Editors are excellent tools for experienced
  web developers

17
Choosing A Text Editor

• However, it is important that you learn and
  understand the HTML language so that you can edit
  code and fix bugs in your pages
• For this course, we will focus on using the
  standard Microsoft Windows text editor, NotePad

18
Creating A Basic Starting Document

• There are certain elements that are required in a
  web documents structure
• The easiest way to create and develop a document
  is to type the required elements in as a starting
  point
• This way you can add to your document by
  inserting elements and adding content between the
  starting and ending tags of existing elements

19
Creating A Basic Starting Document

• In NotePad you would start with
• ltHTMLgt ltHEADgt ltTITLEgtlt/TITLEgt lt/HEADgt ltBODYgt
  lt/BODYgt lt/HTMLgt

20
Creating A Basic Starting Document

• At this point your page has a HEAD and a BODY
  section inside the HTML tags
• You also have a TITLE element, inside the HEAD
  element, which you should always fill in
• The text in the TITLE element is used by the
  surfers browser and also by search engines

21
Creating A Basic Starting Document

• The TITLE of your document appears in the very
  top line of the users browser
• If the user chooses to "Bookmark" your page or
  save as a "Favourite" it is the TITLE that is
  added to the list
• The text in your TITLE should be as descriptive
  as possible because this is what many search
  engines, on the Internet, use for indexing your
  site

22
Creating A Basic Starting Document

• The following is an example of a document title
• ltHTMLgt ltHEADgt ltTITLEgtMy First
  Webpagelt/TITLEgt lt/HEADgt ltBODYgt lt/BODYgt lt/HTMLgt

23
Setting Document Properties

• Document properties are controlled by attributes
  of the BODY element
• For example, there are colour settings for the
  background colour of the page, the documents
  text and different states of links
• The BODY element also gives you the ability of
  setting an image as the documents background

24
Setting Document Properties

• To set your documents background colour, you
  need to edit the ltBODYgt element by adding the
  BGCOLOR attribute
• The following example would display a document
  with a white background colour
• ltBODY BGCOLOR"WHITE"gtlt/BODYgt

25
Setting Document Properties

• The TEXT attribute is used to control the colour
  of the text in the document
• The TEXT attribute would be added as follows
• ltBODY BGCOLOR"WHITE" TEXT"BLACK"gtlt/BODYgt

26
Setting Document Properties

• Many web developers will set the link colours to
  flow with the colour scheme of the site
• The format for setting link attributes is
• ltBODY BGCOLOR"WHITE" TEXT"BLACK" LINK"RED"
  VLINK"GREEN" ALINK"BLUE"gt
• where LINK is the initial appearance, VLINK is a
  visited link, and ALINK is an active link being
  clicked

27
Setting Document Properties

• The BODY element also gives you the ability of
  setting an image as the documents background
• Background images are "tiled" in the web browser
  which means that they are replicated until the
  browser screen is filled
• An example of a background images HTML code is
  as follows
• ltBODY BACKGROUND"logo.gif"gt

28
Section 3

• Headings, Paragraphs And Breaks

29
Headings, Paragraphs, Breaks and Horizontal Rules

• Inside the BODY element, heading elements H1
  through H6 are generally used for major divisions
  of the document

30
Headings, Paragraphs, Breaks and Horizontal Rules

• ltHTMLgtltHEADgtltTITLEgtExample Pagelt/TITLEgtlt/HEADgt
  ltBODYgtltH1gtHeading 1lt/H1gtltH2gtHeading
  2lt/H2gtltH3gtHeading 3lt/H3gtltH4gtHeading
  4lt/H4gtltH5gtHeading 5lt/H5gtltH6gtHeading
  6lt/H6gtlt/BODYgtlt/HTMLgt

31
Headings, Paragraphs, Breaks and Horizontal Rules

• Paragraphs allow you to add text to a document in
  such a way that it will automatically adjust the
  end of line to suit the window size of the
  browser in which it is being displayed

32
Headings, Paragraphs, Breaks and Horizontal Rules

• ltHTMLgtltHEADgtltTITLEgtExample Pagelt/TITLEgtlt/HEADgt
  ltBODYgt ltH1gtHeading 1lt/H1gtltPgtParagraph 1, ...
  lt/PgtltH2gtHeading 2lt/H2gtltPgtParagraph 2, ...
  lt/PgtltH3gtHeading 3lt/H3gtltPgtParagraph 3, ... lt/Pgt
• and so on...

33
Headings, Paragraphs, Breaks and Horizontal Rules

• The Line Break element ltBRgt allow you to decide
  where the text will break on a line
• The Horizontal Rule ltHRgt element causes the
  browser to display a horizontal line (rule) in
  your document

34
Headings, Paragraphs, Breaks and Horizontal Rules

• ltHTMLgt ltHEADgtltTITLEgtExample Pagelt/TITLEgtlt/HEADgt
  ltBODYgtltH1gtHeading 1lt/H1gtltPgtParagraph 1,
  ltBRgtLine 2 ltBRgtltHRgtLine 3 ltBRgt... lt/Pgt
• and so on...

35
Section 4

• Character Formatting

36
Character Formatting Elements

• ltPgtltFONT SIZE"1"gtOne Size Largerlt/FONTgt -
  Normal - ltFONT SIZE"-1"gt One Size
  Smallerlt/FONTgtltBRgtltBgtBoldlt/Bgt - ltIgtItalicslt/Igt -
  ltUgtUnderlinedlt/Ugt - ltFONT COLOR"BLACK"gt
  Coloredlt/FONTgtltBRgtltEMgtEmphasizedlt/EMgt -
  ltSTRONGgtStronglt/STRONGgt -ltTTgtTele
  Typelt/TTgtltBRgtltCITEgtCitationlt/CITEgtlt/Pgt

37
Character Formatting Elements

• ltPgtltSTRIKEgt strike-through text
  lt/STRIKEgtltBRgtltBIGgt places text in a big font
  lt/BIGgtltBRgtltSMALLgt places text in a small font
  lt/SMALLgtltBRgtltSUBgt places text in subscript
  position lt/SUBgt NormalltSUPgt places text in
  superscript style positionlt/SUPgtltBRgtlt/Pgt

38
Character Formatting Elements

• ltPgtltDFNgt defining instance of the enclosed term
  lt/DFNgtltBRgtltCODEgt used for extracts of program
  code lt/CODEgtltBRgtltSAMPgt used for sample output
  from programs, scripts, etc. lt/SAMPgtltBRgtltKBDgt
  used for text to be typed by the user
  lt/KBDgtltBRgtltVARgt used for variables or arguments
  to commands lt/VARgtltBRgtlt/Pgt