HTML and Web Pages

1
Lecture 3

• HTML and Web Pages

2
HTML Web Pages

• recall a Web page is a text document that
  contains additional formatting information in the
  HyperText Markup Language (HTML)
• HTML specifies formatting within a page using
  tags
• in its simplest form, a tag is a word or symbol
  surrounded by brackets (ltgt)

3
HTML Tags

• required tags in a Web page
• lthtmlgt and lt/htmlgt enclose the entire HTML
  document
• the HEAD section (enclosed between ltheadgt and
  lt/headgt) contains information that the browser
  uses to control the look of the page
• the HEAD can contain a title for the browser
  window, enclosed between lttitlegt and lt/titlegt
• the BODY section (enclosed between ltbodygt and
  lt/bodygt) contains the text that will appear in
  the page

4
HTML Elements

• tags and the text they enclose form an HTML
  element.
• HTLM elements form the building blocks of Web
  pages
• lttitlegt Title of the Page lt/titlegt is a TITLE
  element
• ltheadgt
• lttitlegt Title of the Page lt/titlegt
• lt/headgt
• is a HEAD element (which contains a nested TITLE
  element)

• most HTML elements have opening and closing tags,
  but not all
• lt!-- demo1.html Dave Reed --gt is a COMMENT
  element
• a comment is ignored by the browser (it does not
  appear in the rendered page)
• comments are used by the page developer to
  document page features

5
Text Layout

• white space (extra spaces, tabs and blank lines)
  are ignored by the browser
• this allows the browser to adjust the text to the
  window size
• you can control some of the text layout using
  HTML elements
• a PARAGRAPH element ( ltpgtlt/pgt ) specifies text
  surrounded by blank lines
• a BREAK element ( ltbr /gt ) causes text to be
  displayed on a new line
• Break element has no closing tag!!!
• the nbsp symbol forces a space to appear in the
  text

6
(No Transcript)
7
(No Transcript)
8
(No Transcript)
9
Headings Alignment

• in a large document, it is useful to divide the
  text into sections and then provide each with a
  heading describing the content that follows
• lth1gt lt/h1gt enclose a top-level heading (large
  and bold)
• lth2gt lt/h2gt enclose a sub-heading (slightly
  smaller and bold)
• . . .
• lth6gt lt/h6gt enclose the smallest sub-heading
• the HORIZONTAL-RULE element lthr /gt draws a
  dividing line in the page.
• It does not have a closing tag!!!

10
Headings Alignment (cont.)

• by default, headings and other elements are
  left-justified in the page
• can change the alignment of an element by adding
  a style attribute that qualifies the appearance
  of the element
• lth1 style"text-aligncenter"gt Centered Heading
  lt/h1gt
• ltp style"text-alignright"gt
• This paragraph is right justified. Each line
  will be shifted
• to line up at the right margin.
• lt/pgt
• An attribute is an additional property that can
  be assigned to an HTML element as part of its
  tag.

11
Headings Alignment (cont.)

• DIV tags group multiple elements into a single
  page division, so can be formatted together.
• ltdiv style"text-alignright"gt
• lth3gtRight-Justified Small Headinglt/h3gt
  
• ltpgt
• right-justified text ltbr/gt
• and more right-justified text
• lt/pgt
• lt/divgt

12
(No Transcript)
13
(No Transcript)
14
Font Formatting

• text can be formatted in a variety of ways
• bold (ltbgt lt/bgt), italics (ltigt lt/igt),
  underlined (ltugt lt/ugt)
• colored text is enclosed in ltspan
  style"color????"gt lt/spangt
• common colors can be used (e.g., red, green,
  orange, light blue, dark blue)

15
DIV SPAN tags

• SPAN tags serve to group a block of text together
  for common formatting.
• DIV tags serve to group a set of elements.

16
Common errors to avoid

• When specifying HTML elements with opening and
  closing tags, it is important to type both tags
  correctly.
• If you omit or misspell the opening tag of an
  element, the browser will ignore the closing tag,
  and no formatting will occur.
• If you specify the opening tag but forget or
  misspell the closing tag, the indicated
  formatting will continue throughout the document.
• See an example
• Any error related to the format of a statement is
  known as a syntax error.
• In general, the browser will ignore any HTML
  syntax error it encounters and continue rendering
  the page contents as best it can.

17
Hyperlinks

• a hyperlink, or just link, is a connection to
  another Web page
• by default, a link appears as underlined text in
  the page
• when the user clicks on the link, the
  corresponding page is retrieved and displayed
• a link is specified using ANCHOR tags ltagt and
  lt/agt
• text that appears within the tags is displayed as
  the link in the page
• must have an HREF attribute that specifies the
  associated Web address
• lta href"http//www.creighton.edu"gtCreighton
  Universitylt/agt
• lta href"personal.html"gtLocal Pagelt/agt
• note the browser displays links underlined and
  in color
• by default, links whose pages have not yet been
  visited are blue
• by default, links whose pages have previously
  been visited are purple

18
Hyperlinks (cont.)
19
Images

• Web pages can contain other types of media
  besides text and links
• images are embedded in a page using an IMG tag (
  ltimg /gt )
• similar to ltbr /gt and lthr /gt, there is no closing
  tag so it ends with a slash
• IMG attributes
• SRC specifies the location of the image file
• ALT specifies alternate text that is displayed if
  the image fails to load

20
Lists

• HTML lists organize items in sequence
• ltulgtlt/ulgt enclose an unordered list ltolgtlt/olgt
  enclose an ordered list
• ltligtlt/ligt enclose a list item

21
Lists (cont.)

• a style attribute can be used to format the list
  elements

22
(No Transcript)
23
(No Transcript)
24
Tables

• text can be aligned into rows and columns using a
  TABLE element
• lttablegt and lt/tablegt encapsulate the table data
• lttrgt and lt/trgt encapsulate a row within the table
• lttdgt and lt/tdgt encapsulate table data within a
  row (i.e., a column entry)

25
(No Transcript)
26
(No Transcript)
27
Tables with Borders

• borders can be added to tables using the border
  attribute
• the numeric value assigned to the attribute
  specifies thickness of borders, as measured in
  pixels.

28
Tables for Alignment

• tables are commonly used to align elements in the
  page
• here, an image is aligned to the left of some text

29
(No Transcript)
30
Background Color and Images

• To change a pages background color, you must
  assign a specific color value to the BGCOLOR
  attribute of the BODY tag.
• ltbody bgcolordesired colorgt
• Appendix B lists the most commonly used color
  names that are predefined by HTML.

31
Background Color and Images (cont.)

• To have backgrounds comprised of textured
  patterns or even photographic images, you can
  specify an image as the background of a Web page
  using the BACKGROUND attribute of the BODY tag.
• For example
• ltbody
• backgroundhttp//wp.netscape.com/rock/yellow_rock
  .gifgt
• If the image is too small to fit the entire
  browser window, then the image is repeated to
  fill the space. This is why simple, repetitive
  patterns make the best backgrounds.

32
Images as Links

• The following example defines an image link, in
  which an IMG element is placed inside the A tags.
• lta hrefhttp//www.prenhall.com/reedgt
• ltimg srchttp//www.prenhall.com/reed/Images/reed
  .gif altDave Reed /gt
• lt/agt

33
Images as Links (cont.)

• By default, images enclosed in A tags are
  surrounded by colored borders to identify the
  images as links. If you dont want the image to
  appear with a border, you can add attributes to
  the ANCHOR and IMG tags to remove the border
• lta hrefhttp//www.prenhall.com/reed
• styletext-decorationnonegt
• ltimg srchttp//www.prenhall.com/reed/Images/reed
  .gif altDave Reed /gt
• lt/agt