Week 2 - Building webpages

Document Sample
Week 2 - Building webpages Powered By Docstoc
					Principles of HTML, XHTML,
         and DHTML


               Chapter 2
Building, Linking, and Publishing Basic
              Web Pages
                               Objectives

• In this chapter, you will:
     – Work with basic elements and attributes
     – Learn how to organize your pages with section and
       content-grouping elements
     – Add links to Web pages
     – Publish Web pages




Principles of HTML, XHTML, and DHTML                       2
 First…. What is white space and why
  is it important to Web page design?

• White space is an important design element that
  refers to the empty areas on a page. It makes a
  page easier to read and enhances visual appeal.

• Beginning Web page authors are often tempted to
  pack each page with as much information as
  possible, but experienced authors know that white
  space is critical to the success both of Web pages
  and traditional printed pages.


                                                       3
           Working with Basic Elements
                 and Attributes
• Elements
     – Basic building blocks of all HTML pages
• All elements must have an opening tag and a
  closing tag




Principles of HTML, XHTML, and DHTML             4
  Understanding the Different Types of
              Elements




Principles of HTML, XHTML, and DHTML     5
Principles of HTML, XHTML, and DHTML   6
  Understanding the Different Types of
         Elements (continued)
• Block-level elements
     – Give a Web page its structure
     – Can contain other block-level elements or inline
       elements
• Inline elements
     – Describe the text that appears on a Web page
     – Must be placed inside a block-level element




Principles of HTML, XHTML, and DHTML                      7
     Differences between block-level
      elements and inline elements.
• Block-level elements give a Webpage its structure.
  Most Web browsers render block-level elements so
  they appear on their own line.

• Block-level elements can contain other block-level
  elements or inline elements.

• The <p> element and heading elements (<h1>,
  <h2>, and so on) are examples of common block-
  level elements. Inline, or text-level, elements
  describe the text that appears on a Web page.
                                                       8
     Differences between block-level
      elements and inline elements.

• Unlike block-level elements, inline elements do not
  appear on their own lines; they appear within the
  line of the block-level element that contains them.
• Examples of inline elements include the <b> (bold)
  and <br> (line break) elements.




                                                        9
                 Working with Attributes

• Learn how to work with attributes
     – Starting with standard attributes




Principles of HTML, XHTML, and DHTML       10
              Using Standard Attributes

• Standard attributes
     – Available to almost every element
     – Only the HTML 5 attributes contenteditable,
       draggable, and spellcheck are currently
       implemented in a Web browser
• lang attribute
     – Two-letter code that represents a language
     – Specify the language spoken in a particular country
       by adding a hyphen and a two-letter country code


Principles of HTML, XHTML, and DHTML                         11
   Designating the language and text
         direction of elements

• Although English is the primary language of the
  Web, it is certainly not the only language used.

• To be a considerate resident of the international
  world of the Web, you should designate the
  language of your elements using the lang attribute.

• Be aware that the lang attribute simply states the
  original language in which an element was written;
  it is up to the user agent that renders the element
  to decide what to do with the information.
                                                     12
   Designating the language and text
         direction of elements

• You assign to the lang attribute a two-letter code
  that represents a language.

• For instance, the language code for English is en.

• Therefore, to assign English as the language for a
  particular element, you add the attributes lang="en"
  and xml:lang="en" to the element’s opening tag.



                                                       13
     Designating the language and text
           direction of elements
• You must also consider the direction in which a
  language is read when you define elements.

• Although you read most Western languages from left to
  right, languages such as Arabic and Hebrew are read
  from right to left. For this reason, you should always
  include the dir attribute along with lang attribute.

• You can assign one of two values to the dir attribute: ltr
  (for left to right) and rtl (for right to left). For Western
  languages such as English, you assign the dir attribute
  a value of left to right, as follows: dir="ltr".
Principles of HTML, XHTML, and DHTML   15
 Using Standard Attributes (continued)




          Figure 2-3 Central Valley Farmers’ Market home page
          after adding standard attributes


Principles of HTML, XHTML, and DHTML                            16
             Defining Boolean Attributes

• Boolean attribute
     – Specifies one of two values: true or false
     – Presence of a Boolean attribute in an element’s
       opening tag indicates a value of “true”
     – Absence indicates “false”
• Minimized form
     – Boolean attribute is not assigned a value
     – Example:
          <input type="checked" checked />


Principles of HTML, XHTML, and DHTML                     17
             Defining Boolean Attributes
                     (continued)
• Full form of a Boolean attribute
     – Assign the name of the attribute itself as the attribute’s
       value
     – Example:
          <input type="checked" checked="checked" />




Principles of HTML, XHTML, and DHTML                          18
 Defining the minimized and full form of
           a Boolean attribute.
• When a Boolean attribute is not assigned a value,
  as in the preceding code, it is referred to as having a
  minimized form.

• However, recall from last week that all attribute
  values must appear within quotation marks.

• This syntax also means that an attribute must be
  assigned a value.

• For this reason, minimized Boolean attributes are
  illegal in HTML.
                                                       19
Minimized & full form of Boolean attribute.
• You can still use Boolean attributes in HTML if you use
  their full form. You create the full form of a Boolean
  attribute by assigning the name of the attribute itself as
  the attribute’s value. For example, to use the <input>
  element’s checked Boolean attribute in HTML, you use
  the full form of the attribute as follows:
       <input type="checked" checked="checked" />

• Remember that to specify a value of false for a Boolean
  attribute, you simply exclude the attribute from the
  element. If you do not want a check box control to be
  selected by default, for instance, you simply exclude the
  checked attribute from the <input> element, as follows:

       <input type="checked" />
                                                               20
            Organizing with Section and
            Content-Grouping Elements
• Section elements
     – Used for organizing the primary sections of an HTML
       document
     – See Table 2-4
• <body> element
     – Main section element




Principles of HTML, XHTML, and DHTML                    21
            Organizing with Section and
            Content-Grouping Elements
                    (continued)




Principles of HTML, XHTML, and DHTML      22
                      Creating Headings

• Heading elements
     – Used to emphasize a document’s headings and
       subheadings
• XHTML has six heading elements:
     – <h1> through <h6>
• Use to organize content
     – Not as a formatting tool
• Rules of thumb for using headings



Principles of HTML, XHTML, and DHTML                 23
         Creating Headings (continued)




                   Figure 2-6 DRG Aviation page with heading
                   elements in Firefox

Principles of HTML, XHTML, and DHTML                           24
     A little on using heading elements in
                 your documents.
• You should choose a heading element based on how the
  sections of your document fit together rather than how
  the headings appear in a Web browser—different user
  agents render the output of heading elements differently.

•   Although many Web page authors use heading elements
    as a formatting tool, their real purpose is to provide away
    of outlining the content of your document, much as you
    would create an outline or a table of contents.

• In those formats you would not use a higher- numbered
  heading unless it was nested under a lower numbered
  heading, but this is not a requirement for writing well-
  formed HTML documents.                                     25
   A little on using heading elements in
               your documents.
• There are several rules of thumb for using headings.
  Generally, most Web pages should include only a single
  <h1> element as the main heading for a page.

• You can think of the <h1> element as being equivalent to
  the title of a document, and a document should contain
  only one title.

• Second-level headings should use the <h2> element,
  and additional higher-numbered headings should be
  nested beneath lower-numbered headings.

                                                           26
Defining Document Sections (HTML 5)
• <section> elements
     – Used to define organized types of content
     – Not meant for visually formatting content
• <hgroup> element
     – Defines the headings for a document or section




Principles of HTML, XHTML, and DHTML                    27
    Working with Headers and Footers
                (HTML 5)
• Header section
     – Defines an introduction to a document or section
• Footer section
     – Placed immediately after a section element
     – Contains information about that section
          • When it was created or last updated
          • Author
          • Copyright information




Principles of HTML, XHTML, and DHTML                      28
 Why should you use <section>, <header>,
 and <footer> elements in your Web pages?

• Sections created with the <section> element usually
  define specific types of organized content such as
  chapters or other types of logical groupings.

• A header section defines an introduction to a
  document or section.

• A footer section usually is placed immediately after
  a section element and contains information about
  that section, such as when it was created or last
  updated, the author, and copyright information.
                                                     29
 What type of content should you normally
   place inside an <article> element?

• The <article> element defines a link to external
  content such as a news article or Web log (blog).

• Although there are no requirements for what you
  place in an <article> element, it should normally
  include a brief description of the article, a link to the
  external URL, and the date of publication.




                                                         30
  Linking to External Articles (HTML 5)
• <article> element
     – Defines a link to external content
     – Should normally include a brief description of the
       article, a link to the external URL, and the date of
       publication




Principles of HTML, XHTML, and DHTML                          31
                     Defining Addresses
• <address> element
• Defines contact information
• Should define an e-mail address or Web page of
  the owner or author
• Typically placed within a <footer> element




Principles of HTML, XHTML, and DHTML               32
         Grouping Navigation Elements
                  (HTML 5)
• <nav> element
     – Define navigation section that contains links to other
       parts of the current page or to other pages




Principles of HTML, XHTML, and DHTML                        33
              Creating Asides (HTML 5)

• Aside
     – Comment or remark about the main theme or topic
• <aside> element
     – Create content that is related to the surrounding
       content




Principles of HTML, XHTML, and DHTML                       34
        Working with Content-Grouping
                  Elements
• Organize majority of the content within the various
  document sections
• Some of the most frequently used elements in Web
  page authoring




Principles of HTML, XHTML, and DHTML                35
Principles of HTML, XHTML, and DHTML   36
           Paragraphs and Line Breaks
• Paragraph (<p>) and line-break (<br />)
  elements
     – Provide the simplest way of adding white space to a
       document
• White space
     – Important design element
     – Empty areas on a page




Principles of HTML, XHTML, and DHTML                     37
           Paragraphs and Line Breaks
                  (continued)




                Figure 2-14 Separate paragraphs in Firefox




Principles of HTML, XHTML, and DHTML                         38
                         Horizontal Rules
• Horizontal-rule (<hr />) element
     – Draws a horizontal rule on a Web page to act as a
       section divider




Principles of HTML, XHTML, and DHTML                       39
           Horizontal Rules (continued)




               Figure 2-15 Central Valley Farmers’ Market home page
               with horizontal rules


Principles of HTML, XHTML, and DHTML                                  40
      Linking and Publishing Your Web
                   Pages
• Hypertext links
     – Used to open files or navigate to other documents
       on the Web
     – Underlined and often displayed in a vivid color
• Anchor: text or image used to represent a link
• <a> element
     – Create a basic hyperlink
     – href attribute specifies the link’s target URL



Principles of HTML, XHTML, and DHTML                       41
      Linking and Publishing Your Web
             Pages (continued)
• Can use an image as a link anchor




Principles of HTML, XHTML, and DHTML    42
      Linking and Publishing Your Web
             Pages (continued)




                     Figure 2-17 Web page with an image link



Principles of HTML, XHTML, and DHTML                           43
      Understanding Uniform Resource
                 Locators
• Uniform Resource Locator (URL)
     – Identifies a Web page
• Hypertext Transfer Protocol (HTTP)
     – Manages the hypertext links that are used to
       navigate the Web
     – Ensures that Web browsers correctly process and
       display the various types of information contained in
       Web pages




Principles of HTML, XHTML, and DHTML                       44
      Understanding Uniform Resource
           Locators (continued)
• URL components:
     –   Protocol
     –   Host
     –   Domain name
     –   Domain identifier
     –   Filename (optional)
• Example:
     – https://banking.wellsfargo.com/



Principles of HTML, XHTML, and DHTML     45
      Understanding Uniform Resource
           Locators (continued)




Principles of HTML, XHTML, and DHTML   46
      Understanding Uniform Resource
           Locators (continued)
• mailto protocol
     – Used in links to provide a quick way to send an e-
       mail message to a specified address
     – Example: mailto:name@domain.com




Principles of HTML, XHTML, and DHTML                        47
   Working with Absolute and Relative
                 Links
• Absolute URL
     – Full Web address of a Web page or to a specific
       drive and directory



• Relative URL
     – Specifies location of a file relative to the location of
       the currently loaded Web page



Principles of HTML, XHTML, and DHTML                              48
    Again…. the difference between
      absolute and relative URLs.

• An absolute URL refers to the full Web address of
  a Webpage or to a specifi c drive and directory.

• A relative URL specifi es the location of a fi le
  relative to the location ofthe currently loaded Web
  page.




                                                        49
   Linking Within the Same Web Page

• Bookmarks
     – Internal links within the current document
     – Create using <a> element using the id attribute




Principles of HTML, XHTML, and DHTML                     50
   Linking Within the Same Web Page
               (continued)




          Figure 2-20 Wikipedia’s HTML 5 page with internal links

Principles of HTML, XHTML, and DHTML                                51
 Recap: Linking within the same Web page

• Bookmarks are internal links within the current
  document and can be an effective tool for helping
  users navigate through a long Web page.

• You create bookmark links by using the id attribute.
  Recall that the standard id attribute uniquely
  identifies an individual element in a document.

• Any element that includes an id attribute can be the
  target of a link. For instance, you may have a long
  Web page with an <h2> element near the bottom
  that reads “Summary of Qualifications”.
                                                      52
 Recap: Linking within the same Web page
• To create a bookmark to any other element, including
  heading elements, you nest an <a> element inside
  another element.

• If an <a>element does not include an href attribute (it
  shouldn’t when you are creating a bookmark), its
  contents are treated as normal text and are subject to
  the rules of the parent element.

• Therefore, if the content of an <a> element does not
  include an href attribute and is nested inside a
  heading element, it will be formatted in a browser
  with the style of the parent heading element.
                                                     53
            Publishing Your Web Pages

• To publish
     – Decide where Web site will be hosted
     – Create and register a domain name for the site
     – Post the files via FTP to the Web server
• Web hosting
     – Publication of a Web site for public access
     – Using your own computer is usually not a good idea
       for several reasons
• Web server
     – Special type of computer used for hosting Web sites
Principles of HTML, XHTML, and DHTML                     54
            Publishing Your Web Pages
                    (continued)
• Internet Service Provider (ISP)
     – Provides access to the Internet and other types of
       services
• More popular ISPs include:
     – Yahoo!, Google, America Online, and EarthLink
• Having an ISP host your Web site offers many
  advantages




Principles of HTML, XHTML, and DHTML                        55
            Registering Domain Names

• Pick a name that is close to your business name or
  that describes your Web site
• Domain name registrar
     – Find out if a domain name is available and register it
• InterNIC
     – Organization responsible for the registration of
       domain names and IP addresses
• Notify your ISP of your domain information
     – Easiest to register your domain name through the
       ISP you intend to use

Principles of HTML, XHTML, and DHTML                        56
              Advertising Your Web Site

• Get listed on search sites:

     – Web directories
     – Web directories are listings of Web sites that have
       been manually compiled.

     – Search engines
          • Use a “crawler” or “spider” program to get information
            about Web sites



Principles of HTML, XHTML, and DHTML                             57
                Understanding Metadata

• Metadata
     – Data that describes the definition and structure of
       information enclosed within
• Use <meta> element in <head> element
     – Inform search engines and Web servers about the
       information in your Web page
     – Primary attributes:
          • name
          • content
          • http-equiv

Principles of HTML, XHTML, and DHTML                         58
             Defining the name Attribute

• Define a name for the information you want to
  provide about the Web page




Principles of HTML, XHTML, and DHTML              59
        Hiding Web Pages from Search
                  Engines
• robots.txt file
     – Place in the root directory of the Web server that
       hosts your Web site
• Robots Exclusion Protocol
     – Inform search-engine spiders not to index certain
       directories and files
     – Not very useful for typical Web page authors
          • Do not have access to the root directory of the hosting
            ISP’s Web server



Principles of HTML, XHTML, and DHTML                             60
        Hiding Web Pages from Search
             Engines (continued)
• Alternative:
     – Create a robots <meta> element for each Web
       page




Principles of HTML, XHTML, and DHTML                 61
Recap: Why we use a robots <meta> element instead
of the robots.txt file to inform search-engine spiders of
     the directories & files we don’t want indexed.

• An alternate method for preventing spiders from
  indexing certain Web pages is to create a robots
  <meta> element for each Web page.
• You create this element by assigning a value of robots
  to the <meta> element’s name attribute.
• You then assign one or more of following values to the
  content attribute: index,noindex, nofollow, or none.
• The index value instructs a spider to index the page,
  the noindex value instructs a spider not to index the
  page, and the nofollow value instructs a spider not to
  follow any links on the page.
                                                      62
      Specifying Content Type with the
            http-equiv Attribute
• Response header
     – Sent to the Web browser before the Web page to
       provide information that the browser needs to render
       the page
• Content-type <meta> element
     – Specify a content type that the document uses
     – Allow a Web server to construct the response
       header




Principles of HTML, XHTML, and DHTML                      63
                                Summary

• Types of elements:
     –   Block-level
     –   Inline
     –   Section
     –   Content-grouping
• Hyperlinks
     – Create using <a> element
     – Reference absolute or relative URL
     – Reference bookmark


Principles of HTML, XHTML, and DHTML        64
                   Summary (continued)

• Publishing Web pages
     – Register domain name
     – Find Web host
     – Set <meta> element attributes for search engines




Principles of HTML, XHTML, and DHTML                      65
         Comprehension Check

1. _____ elements give a Web page its structure.

a.   XHTML
b.   Block-level
c.   Inline
d.   Meta




                                                   66
                     Answer

1. Inline elements give a Web page its structure.




                                                    67
         Comprehension Check

1. According to the Strict DTD, inline elements must
   be placed within block-level elements.

True or False?




                                                       68
                     Answer

1. True

According to the Strict DTD, inline elements must be
placed within block-level elements.




                                                       69
         Comprehension Check

• You should designate the language of your
  elements using the _____ and xml:lang attributes.

a.    country
b.    local
c.    lang
d.    language




                                                      70
                     Answer

• You should designate the language of your
  elements using the lang and xml:lang attributes.




                                                     71
          Comprehension Check

• Which of the following values can you assign to the
  dir attribute? (Choose all that apply.)

a.    ltr
b.    rtl
c.    left
d.    right




                                                        72
                     Answer

• The following values can be assigned to the dir
  attribute?

a.    ltr
b.    rtl




                                                    73
         Comprehension Check

• Which standard attribute can you use to create a
  ToolTip for an element?

a.    tooltip
b.    description
c.    help
d.    title




                                                     74
                     Answer

• The Title attribute can be used to create a ToolTip
  for an element?




                                                        75
        Comprehension Check

• Most Web browsers render <address> elements as
  text.

a.   blue
b.   boldface
c.   italicized
d.   superscript




                                                   76
                   Answer

• Most Web browsers render <address> elements as
  text.

• C. italicized




                                                   77
         Comprehension Check

• You do not need to use a <nav> element inside a
  <footer> element. True or False?




                                                    78
                    Answer

• True.
• You do not need to use a <nav> element inside a
  <footer> element.




                                                    79
         Comprehension Check

• Which elements can you use to add white space to
  a document? (Choose all that apply.)

a.   <b>
b.   <p>
c.   <br />
d.   <hr />




                                                     80
                    Answer

• Which elements can you use to add white space to
  a document? (Choose all that apply.)

a.   <b>
b.   <p>
c.   <br />
d.   <hr />




                                                     81
         Comprehension Check

• Horizontal rules are empty elements.

True or False?




                                         82
                    Answer

True. Horizontal rules are empty elements.




                                             83
         Comprehension Check

• The last part of a domain name, known as the
  _____, identifies the type of institution or
  organization.

a.   domain
b.   domain identifier
c.   protocol
d.   IP address



                                                 84
                       Answer

• The last part of a domain name, known as the
  domain identifier identifies the type of institution or
  organization.




                                                            85
          Comprehension Check

• What protocol do you use to automatically send an
  e-mail message to a specified address?

a.    ftp://
b.    mail:
c.    mailto:
d.    telnet://




                                                      86
                     Answer

The protocol to use to automatically send an e-mail
message to a specified address is mailto.




                                                      87
         Comprehension Check

• Domain names are stored in a master database
  that is maintained by _____.

a.   Microsoft
b.   Netscape
c.   the W3C
d.   InterNIC




                                                 88
                   Answer

• Domain names are stored in a master database
  that is maintained by InterNIC.




                                                 89
         Comprehension Check

• Which attribute is required in all <meta> elements?

a.    description
b.    content
c.    name
d.    http-equiv




                                                        90
                     Answer

• Which attribute is required in all <meta> elements?

a.    description
b.    content
c.    name
d.    http-equiv




                                                        91
         Comprehension Check

• How many characters are you limited to in a
  description <meta> element?

a.    50
b.    100
c.    200
d.    300




                                                92
                    Answer

• How many characters are you limited to in a
  description <meta> element?

a.    50
b.    100
c.    200
d.    300




                                                93
         Comprehension Check

• How many characters are you limited to in a
  keyword <meta> element?

a.    250
b.    500
c.    1000
d.    You can use as many characters as you like.




                                                    94
                    Answer

• How many characters are you limited to in a
  keyword <meta> element?

a.    250
b.    500
c.    1000
d.    You can use as many characters as you like.




                                                    95
         Comprehension Check

1. To get search engines to return your Web pages
   more often during searches, you should pack the
   keyword list with repetitious or unrelated words.

True or False?




                                                       96
         Answer

False.




                  97
           Comprehension Check

• Which of the following values can you assign to the
  content attribute in a robots <meta> element?
  (Choose all that apply.)

•   a. index
•   b. noindex
•   c. nofollow
•   d. none



                                                        98
                     Answer

• Which of the following values can you assign to the
  content attribute in a robots <meta> element?

•   a. index
•   b. noindex
•   c. nofollow
•   d. none




                                                        99
That’s all folks………




                      100

				
DOCUMENT INFO
Shared By:
Categories:
Tags:
Stats:
views:5
posted:4/6/2012
language:English
pages:100