Creating Web Pages

1
Creating Web Pages

• Web Page Design
• Mrs. Gillespie

2
In this course, we will create web pages in two
ways

• Using text editors (requires you to write code
  manuallyknown as hard coding)
• Using graphical user interface editors or WYSIWYG
  (What You See Is What You Get). These programs
  allow you to use icons and menus to select
  features and program does code for you.
• Both ways require a working knowledge of HTML
• A combination of the two methods will probably be
  used most of the time.

3
Why learn codes when there are editor programs
(WYSIWYG) that will do it for you?

• Editor programs become outdated. To add latest
  features, youll have to do some hard-coding.
• WYSIWYG programs will not help you create dynamic
  content.
• Creativity!!!

4
Hypertext Markup Language (HTML)

• Language used to create most web pages
• Language adds formatting tags to the basic text
  of the page
• Idea of tagging comes from Standard Generalized
  Markup Language (SGML)
• HTML tagsa character or set of characters
  enclosed in less-than and greater-than signs (lt,
  gt). These computer codes tell your web browser
  how to display information on your screen
  (Process called markup).
• Used to indicate features such as bold, character
  size, font color, hyperlinks, and images

5
World Wide Web Consortium (W3C)

• An organization that was brought together in 1994
• Issues recommendations that companies live by
• HTML 4.01 is the most recent version of HTML to
  be recommended by the Consortium.

6
What is XHTML?

• It is not uncommon for a page to look completely
  different in Netscape than it does in Internet
  Explorer.
• Some features are not recognized by a browser
  program.
• In order to take care of this inconsistency, W3C
  created XHTML 1.0 or Extensible Hypertext Markup
  Language.

7
What is XHTML? (cont)

• XHTML is described as a reformulation of HTML
  4.01 and XML.
• XML is a tagging language that is more general
  than HTML.
• XML HTML XHTML

8
What is XHTML? (cont)

• Three different flavors of XHTML 1.0 which were
  designed to ease web authors and software
  companies into the new guidelines slowly.
• Strict (version closest to XHTML 1.0)
• Transitional (closest to majority of web pages
  that already exista reformulation of HTML 4.01)
• Frameset
• Transitional will be used in this class.

9
What is XHTML? (cont)

• Each version is described by a Document Type
  Definition (DTD).
• Our pages can be validated using this DTD to make
  sure we havent made any structural/typing
  mistakes.

10
The Basic Web PageSteps

• Create a folder with all of your files for your
  web site
• Create the text of the web page in a text editor
  (Notepad)
• Review the page in a browser. Page cannot be
  edited in browsermust go back to text editor.

11
TAGS

• There are two types of tags
• Container tagscome in pairs (opening and
  closing)
• lttitlegtWeb Page Designlt/titlegt
• The closing tag is denoted by a slash (/)
  character
• Empty tagsstand alone
• ltbr /gt Inserts a line break between text
• lthr /gt Inserts a horizontal ruled line

12
What constitutes a tag?

• A tag can consist of the following three items
  inside the angle bracket
• An elementprovides the main instruction of the
  tag. Elements include lttitlegt, ltfontgt, lttablegt,
  ltpgt
• An attributespecifies a quality or describes a
  certain aspect of the element, including ALIGN,
  FACE, COLOR, SIZE
• A valuegives value to the element and its
  attribute. ltp aligncentergt

13
The basic structure of an XHTML page

• lthtmlgt
• ltheadgt
• lttitlegtWeb page designlt/titlegt
• lt/headgt
• ltbodygt
• Page text and media
• lt/bodygt
• lt/htmlgt

14
Sections included in each document

• Each document will include four sections the
  HTML document, the head, the title and the body
  section.
• The head includes the title tag which will appear
  in the title box of the browser window.
• Title text also becomes the bookmark name for the
  page.
• Info included within the body tags will appear in
  the browser window when the page is loaded.

15
HTML tags to add white space

• ltpgtThis is the tag used to start a new
  paragraph.lt/pgt
• This tag inserts a line break wherever the tag
  occurs. It is an empty tag.ltbr /gt
• lthr /gt inserts a horizontal rule. It is an empty
  tag.

16
HTML tags to add white space

• ltpregtThis preformatted tag shows the text and
  spacing exactly as you type it into the
  editor.lt/pregtThis tag can cause other problems.
• To add additional horizontal spaces, you would
  need to use the nonbreaking space special
  character, nbsp.

17
The ltMETAgt tag

• The ltmetagt tag is an empty tag that describes the
  content of your page.
• Can be very useful with search engines.
• Placed between the ltheadgt tags in your HTML
  document.

18
ltMETAgt Continued

• Keywords for Search Engines
• ltmeta namekeywords contentSullivan South
  High School, schoolgt
• To Provide a Detailed Description
• ltmeta nameDescription contentEnter your
  useful information here.gt
• Name of the Author
• ltmeta httpAuthor contentRosa Estelle
  Rodriguezgt

19
Adding Hidden Comments

• You can hide comments within your HTML source
  code that will not appear on the page. The Syntax
  for including a comment within your document is
  as follows
• lt! comment text here -- gt
• Hidden comments are useful for adding messages to
  yourself or other developers who might be
  updating your code.

20
Bold and italics

• ltBgtThis text will appear as boldface.lt/Bgt
• ltIgtThis text will appear in italics.lt/Igt
• ltBgtltIgtThis text will appear as both bold and
  italics.lt/Igtlt/Bgt
• LIFOlast in first outto ensure proper
  nesting. Nesting means putting tags contained
  within another in the right order.

21
Heading Level Tags

• HTML uses 6 heading levels.
• ltH1gtlt/H1gt
• ltH2gtlt/H2gt
• ltH3gtlt/H3gt
• ltH4gtlt/H4gt
• ltH5gtlt/H5gt
• ltH6gtlt/H6gt

22
Aligning and Organizing your text

• Center textltP ALIGNCENTERgt your text here
  lt/Pgt
• Right align textltP ALIGNRIGHTgt your text here
  lt/Pgt
• Left align textltPgt your text here lt/Pgt
• An attribute is something inside a tag that
  changes the way it works.

23
ADDING IMAGES

• When you add an image to a web page, you are
  actually adding a reference to the image
  location.
• To insert an image, the ltimg /gt tag is used.

24
ATTRIBUTES FOR ADDING IMAGES

• ltimg srclogo.gif /gt Source
  attributespecifies file
• ltimg srclogo.gif altLogo /gtAlternate text
  attributespecifies text if file cannot load
• What are five circumstances where browser will
  display text? (Study Guide)

25
ATTRIBUTES FOR ADDING IMAGES

• ltimg srclogo.gif altLogo alignmiddle
  /gtAlign attributefive valuesdefault value is
  bottom
• ltimg srclogo.gif altLogo height150
  width100 /gtHeight/Width attributemust know
  size of image before you can set the size

26
QUESTIONS?