HTML Basics

Document Sample
HTML Basics Powered By Docstoc
					4   HTML Basics
    YOU WILL LEARN TO…



    Section 4.1
       • Format HTML tags
       • Identify HTML guidelines


    Section 4.2
       •   Organize Web site files and folder
       •   Use a text editor
       •   Use HTML tags and attributes
       •   Create lists using HTML
       •   View an HTML document
4   HTML Basics
    YOU WILL LEARN TO…



    Section 4.3
       • Insert images using HTML
       • Insert links using HTML
       • Debug and test a Web page


    Section 4.4
       • Re-create an existing HTML document in
         Dreamweaver
       • Test a Web page in Dreamweaver
                                                          pp.   98-101
Section 4.1   HTML Coding
              Focus on Reading

              Main Ideas                  Key Terms

              An HTML document is         Hypertext Markup
              composed of instructions,     Language (HTML)
              or tags. These tags tell    HTML tag
              Web browsers how to         starting tag
              display the content
              contained in a Web page.    ending tag
              The World Wide Web          nested tag
              Consortium establishes      empty tag
              guidelines and standards    source code
              for using HTML.
                                                            pp.   98-101
Section 4.1   HTML Coding
              HTML Tags

              Knowing Hypertext          Hypertext Markup
              Markup Language            Language (HTML) The
              (HTML) will help you       code used to create Web
                                         pages. (p. 98)
              understand how Web site
              development applications
              like Dreamweaver work.     HTML tag Text contained
                                         between two angle brackets
                                         (< >) that tells the Web
              You create Web page        browser how to display a
              documents by inserting     page’s content. (p. 98)
              HTML tags into a text
              document.
                                                              pp.   98-101
Section 4.1   HTML Coding
              HTML Tags

              HTML tags often come in   starting tag The first of a
              starting tag and ending   pair of HTML tags; also
              tag sets.                 known as an opening tag.
                                        (p. 98)

                                        ending tag The last of a
                                        pair of HTML tags; also
                                        known as a closing tag.
                                        (p. 98)
                                                                pp.   98-101
Section 4.1   HTML Coding
              HTML Tags

              Nested tags refers to the   nested tag An HTML tag
              order in which HTML tags    that is enclosed within
              appear.                     another set of tags. (p. 99)

                                          empty tag An HTML tag
              Empty tags do not
                                          that requires only an
              require an ending tag.      opening tag; also known as
                                          an orphan tag. (p. 99)
                                                                 pp.   98-101
Section 4.1   HTML Coding
              HTML Guidelines and Standards

              The World Wide Web Consortium (W3C) develops
              specifications for the use of HTML and other programming
              languages that are used on the Internet.

              These specifications help to ensure that all Web pages
              can be displayed by any browser that follows W3C
              specifications.
                                                                 pp.   98-101
Section 4.1   HTML Coding
              HTML Guidelines and Standards

              Understanding and using the basic guidelines for HTML
              code will help you see the relationship between the code
              you write and what you see in the Web browser. For
              example, extra spaces between elements in an HTML
              document will not necessarily display in a Web browser.
                                                           pp.   98-101
Section 4.1   HTML Coding
              HTML Guidelines and Standards

              You can see the HTML      source code The text and
              commands used to create   HTML commands used to
              any Web page by viewing   create the Web page.
              its source code.          (p. 101)
                                                         pp.   98-101
Section 4.1   HTML Coding
                             Section Assessment
               Evaluate An HTML        D. a nested tag
               tag that is enclosed
               within another set of
               tags is called what
               type of tag?
               A. a starting tag
               B. an empty tag
               C. an ending tag
               D. a nested tag
                                                            pp.   102-108
Section 4.2   Using a Text Editor
              Focus on Reading

              Main Ideas                   Key Terms

              You can use a text editor    file name extension
              to create text documents     attribute
              that can be displayed in a   ordered list
              Web browser. These
              documents must contain       unordered list
              HTML commands. Always
              organize your folders and
              files carefully when
              creating a Web site.
                                                                 pp.   102-108
Section 4.2   Using a Text Editor
              Organizing Files and Folders

              Every Web site is composed of folders and files.

              Whether you use a text editor or a Web site development
              application, you must keep your files organized.
                                                              pp.   102-108
Section 4.2   Using a Text Editor
              Using Notepad

              Notepad can be used as a   file name extension The
              text editor for creating   three or four characters after
              Web sites.                 a period in a file name that
                                         tell the computer system
                                         what type of file it is reading.
              When you save an HTML      (p. 103)
              document in Notepad, use
              the Save As function to
              name the file and choose
              the .html file name
              extension.
                                                           pp.   102-108
Section 4.2   Using a Text Editor
              Adding Attributes using HTML

              Some HTML tags can      attribute An HTML
              contain attributes to   instruction that is included in
              specify a tag’s         an HTML tag to specify a
                                      characteristic of a Web page
              characteristics. Some
                                      element. (p. 104)
              attributes include:

              • Font color
              • Background color
              • Heading
              • Alignment
                                                                pp.   102-108
Section 4.2   Using a Text Editor
              Creating Lists Using HTML

              Lists help make text         ordered list A type of list
              easier to read and add       that contains items, usually
              visual interest to a page.   numbered, that must appear
                                           in a particular sequence.
                                           (p. 106)
              There are two types of
              lists: ordered lists and
                                           unordered list A list that
              unordered lists.
                                           contains items that can
                                           appear in any order; also
                                           known as a bulleted list).
                                           (p. 106)
                                                                     pp.   102-108
Section 4.2   Using a Text Editor
              Viewing an HTML Page

              With text editors you cannot see how your page will appear in a
              Web browser while you are creating it. You must save the HTML
              document and then view it in a browser.
                                                                   pp.   102-108
Section 4.2   Using a Text Editor




              • Activity 4A – Create Folders to Organize a Site (p. 102)
              • Activity 4B – Create and Saving an HTML Document
                              (p. 104)
              • Activity 4C – Add Color and Format Text Using HTML
                              (p. 106)
              • Activity 4D – Create an Unordered List Using HTML (p. 107)
              • Activity 4E – View HTML in a Browser (p. 108)
                                                   pp.   102-108
Section 4.2   Using a Text Editor
                             Section Assessment
                Analyze Which file      A. .html
                name extension
                should you choose
                when you save an
                HTML file in Notepad?
                A. .html
                B. .doc
                C. .xls
                D. .mlth
                                                           pp.   109-114
Section 4.3   Enhancing and Testing Your HTML Page
              Focus on Reading

              Main Ideas                   Key Terms

              Use image tags to insert     anchor tag
              graphics using HTML. You     text link
              can create links by using    graphic link
              an anchor tag to specify
              the clickable area. A link   relative link
              can be absolute or           absolute link
              relative. Web pages must     debugging
              be tested.                   testing
                                                              pp.   109-114
Section 4.3   Enhancing and Testing Your HTML Page
              Adding Images Using HTML

              You can insert images into pages using the <IMG> tag and
              assign these common attributes:

              • Source (src)
              • Alternative text (alt)
              • Align (align)
              • Border (border)
              • Width (width)
              • Height (height)

              <IMG> src=“images/book.gif” alt=“Books”
              align=“center” border=“0” width=“40” height=“30”>
                                                               pp.   109-114
Section 4.3   Enhancing and Testing Your HTML Page
              Inserting Links Using HMTL

              There are different types   anchor tag An HTML tag
              of HTML links.              used to create hyperlinks.
                                          The tag identifies what is
                                          clicked on and where it links
              • Anchor tag (<A></A>)      to. (p. 110)
              • Text link
              • Graphic link              text link A type of link in
                                          which users click text to
                                          activate the link. (p. 111)

                                          graphic link A type of link in
                                          which users click an image
                                          to activate the link. (p. 111)
                                                               pp.   109-114
Section 4.3   Enhancing and Testing Your HTML Page
              Inserting Links Using HMTL

              Text and graphic links are   relative link A type of link
              either relative or           that is used when linking to
                                           a local file, such as one
              absolute.                    within the same Web site.
                                           (p. 111)
              The anchor tag set uses
              the href (short for          absolute link A type of link
                                           that contains the complete
              Hypertext Reference)         URL or path of the file being
              attribute to tell the Web    linked to. (p. 112)
              browser where it needs to
              link to.
                                                             pp.   109-114
Section 4.3   Enhancing and Testing Your HTML Page
              Testing a Web Page

              Debugging and testing       debugging The process of
              your Web site will help     locating and correcting any
              you to make sure that the   obvious errors in a Web
                                          site’s HTML code. (p. 113)
              pages display properly
              and all links are
              connected correctly.        testing The process of
                                          repeatedly checking the
                                          Web page and site to make
                                          certain that elements display
                                          as designed. (p. 113)
                                                                     pp.   109-114
Section 4.3   Enhancing and Testing Your HTML Page




              • Activity 4F – Insert and Image Using HTML (p. 110)
              • Activity 4G – Insert Absolute Links Using HTML (p. 112)
              • Activity 4H – Test an HTML Document (p. 113)
                                                           pp.   109-114
Section 4.3   Enhancing and Testing Your HTML Page
                                Section Assessment
              True/False Text and         True. Text and graphics
              graphic links are either    are either relative or
              relative or absolute.       absolute. A relative link
                                          is used when linking to
                                          a local file. An absolute
                                          link contains the
                                          complete URL or path
                                          of the of the file being
                                          linked to.
                                                            pp.   116-122
Section 4.4   Dreamweaver Versus Notepad
              Focus on Reading

              Main Ideas                    Key Terms

              A Web site development        color palette
              application allows you to     border
              create Web sites by
              clicking buttons instead of
              typing HTML commands
              into a text document.
                                                              pp.   116-122
Section 4.4   Dreamweaver Versus Notepad
              Adding Color and Formatting Text in Dreamweaver

              The major advantage of using Dreamweaver is that you
              can see approximately how your final page will appear
              while you are working on it.

              This allows you to make adjustments, such as changing
              the font size or background color, as you go.
                                                              pp.   116-122
Section 4.4   Dreamweaver Versus Notepad
              Adding Color and Formatting Text in Dreamweaver

              In Dreamweaver, there         color palette A menu of
              are two ways to select        colors available in the
              background colors:            Dreamweaver program.
              • Enter hexadecimal           (p. 116)
              numbers into the
              Background color box in the
              Page Properties dialog box.
              • Choose a color from the
              Dreamweaver color palette.
                                                           pp.   116-122
Section 4.4   Dreamweaver Versus Notepad
              Adding Graphics and Links

              Adding a border can add   border A visual break on the
              visual interest to your   page that is used to add
              page.                     visual interest and to
                                        separate elements. (p. 120)
                                                                pp.   116-122
Section 4.4   Dreamweaver Versus Notepad
              Testing a Web Page

              Always spell check and proofread your Web page.

              Also view your Web page in more than one browser to
              make sure each line works properly.
                                                                    pp.   116-122
Section 4.4   Dreamweaver Versus Notepad




              • Activity 4I – Create and Format a page in Dreamweaver
                              (p. 117)
              • Activity 4J – Add Headings and Unordered Lists in
                               Dreamweaver (p. 118)
              • Activity 4K – Insert a Graphic and Links in Dreamweaver
                               (p. 120)
              • Activity 4L – Test a Web Page in Dreamweaver (p. 122)
                                                      pp.   116-122
Section 4.4   Dreamweaver Versus Notepad
                             Section Assessment
               True/False One            False. Dreamweaver’s
               major advantage of        major advantage is
               Dreamweaver is that it    that you can see how
               allows you to create      your page will turn
               Web sites by keying       out while you are
               HTML commands             working on it.
               instead of clicking
               buttons.
4   HTML Basics
    Chapter Review


      Identify The attributes   B. Image
      src, alt, align,
      border, width,
      and height are all
      commonly used with
      which type of tag?
      A. Ordered list
      B. Image
      C. Nested
      D. Anchor
4   HTML Basics
    Chapter Review


      Analyze Why should     Debugging and
      you always test and    testing a Web site
      debug your Web pages   ensures that all of
      before publishing      the pages display
      them?                  properly and that all
                             links work correctly.
4   HTML Basics
    Chapter Resources

    For more resources on this chapter, go to the Introduction
    to Web Design Using Dreamweaver Web site at
    WebDesignDW.glencoe.com.

				
DOCUMENT INFO
Shared By:
Categories:
Tags:
Stats:
views:8
posted:11/29/2011
language:English
pages:35